/* ============================================================
   Умка — дизайн-система. Тёмная (по умолчанию) + светлая тема.
   Бренд: тёплый «умный помощник», медвежонок Умка.
   Без внешних CDN — всё локально, доступно из РФ напрямую.
   ============================================================ */

/* ---------- токены ---------- */
:root{
  /* Тёплый акцент на холодной базе: медвежонок живой, лёд — нет.
     Голубой с фиолетовым на почти-чёрном — палитра, которую выдаёт любой
     генератор «современного ИИ-сервиса»; уходим от неё намеренно. */
  --acc:#e0913e;          /* медовый янтарь — заливки, кнопки, рамки */
  --acc-2:#c97b2c;
  --acc-ink:#1b1206;      /* текст НА янтаре */
  /* Акцентный текст на фоне страницы — отдельный токен: на светлой теме
     заливка должна остаться светлой (иначе кнопка выглядит бурой), а текст
     обязан быть тёмным, иначе не читается. Один цвет обе роли не тянет. */
  --acc-text:#e0913e;
  --teal:#5ad1c2;         /* арктический бирюзовый — вторичный, холодный */
  --violet:#7fb6dd;       /* ледяной голубой */
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --maxw:1120px;
  /* Onest — кириллица родная, характер тёплый; Inter здесь не подходил
     дважды: он не грузился вовсе и опознаётся как «шрифт любого ИИ-сервиса» */
  --font:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --display:'Unbounded','Onest',system-ui,sans-serif;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,'Cascadia Code',Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(0,0,0,.18),0 8px 28px -12px rgba(0,0,0,.5);
  --shadow-soft:0 2px 18px -8px rgba(0,0,0,.35);
  /* Три скорости вместо одной: раньше и подсветка бордера, и появление
     тоста, и открытие панели шли за одинаковые .18s — интерфейс от этого
     ощущался переключающимся, а не отзывчивым. */
  --t-fast:.12s cubic-bezier(.4,0,.2,1);   /* наведение, нажатие */
  --t:.22s cubic-bezier(.4,0,.2,1);        /* панели, модалки */
  --t-slow:.42s cubic-bezier(.16,.84,.28,1); /* появление контента */
}

/* dark (default) */
:root,[data-theme="dark"]{
  --bg:#0d1016;
  --bg-2:#11151d;
  --panel:#161b25;
  --panel-2:#1c2230;
  --line:#262d3b;
  --line-2:#323b4d;
  --txt:#eef1f7;
  --txt-2:#aeb6c6;
  --mut:#828d9f;   /* 5.1:1 на панели — ниже уходило под 4.5 */
  --code-bg:#0a0d13;
  --user-bub:#1e2735;
  --glow:radial-gradient(60% 60% at 50% 0%,rgba(224,145,62,.11),transparent 70%);
}
/* light — прохладный «ледяной» */
[data-theme="light"]{
  --bg:#eef4fb;
  --bg-2:#e3ecf7;
  --panel:#ffffff;
  --panel-2:#eef4fb;
  --line:#d8e3f1;
  --line-2:#c4d4e8;
  --txt:#142033;
  --txt-2:#4a5973;
  --mut:#5d6a81;   /* было #7a8699 — 3.33 на светлом фоне */
  /* базовый бирюзовый дал 1.67 на светлом фоне — берём глубокий тон */
  --teal:#177066;
  --code-bg:#eaf1fa;
  --user-bub:#e7f0fb;
  /* на светлом фоне янтарь нужен глубже, иначе белый текст на нём не читается */
  --acc:#eda344;          /* заливка светлая — кнопка остаётся янтарной */
  --acc-2:#dd9130;
  --acc-ink:#2a1a06;      /* и текст на ней тёмный */
  --acc-text:#9d5a15;     /* а акцентный текст на светлом фоне — глубокий */
  --shadow:0 1px 2px rgba(40,80,150,.07),0 10px 30px -14px rgba(40,90,160,.28);
  --shadow-soft:0 2px 16px -8px rgba(40,90,160,.18);
  --glow:radial-gradient(60% 60% at 50% 0%,rgba(157,90,21,.10),transparent 70%);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);font-size:16px;line-height:1.6;
  color:var(--txt);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
/* height:auto обязателен. Атрибуты width/height на <img> — это
   презентационные подсказки, и они задают ОБЕ стороны. Если потом CSS
   переопределит только ширину, высота останется натуральной, а
   aspect-ratio не сработает: ему нечего вычислять, обе стороны уже
   заданы. Так витрина на главной растянулась на 1294 px в высоту. */
img{max-width:100%;height:auto;display:block}
/* Цвет тоже наследуем. Без этого любая кнопка без явного color берёт
   браузерный buttontext (чёрный) и на тёмном фоне текст пропадает —
   так пропали заголовки карточек-подсказок. */
button,input,select,textarea{font-family:inherit;color:inherit}
::selection{background:rgba(224,145,62,.32)}

/* ---------- layout primitives ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-text)}
.muted{color:var(--mut)}

/* ---------- header / nav ---------- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(12px);
  background:color-mix(in srgb,var(--bg) 80%,transparent);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:14px;height:64px;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.01em}
.brand svg{width:30px;height:30px;flex:none}
.nav-links{display:flex;gap:6px;margin-left:18px}
.nav-links a{padding:8px 12px;border-radius:10px;color:var(--txt-2);font-weight:500;font-size:15px;transition:var(--t)}
.nav-links a:hover{color:var(--txt);background:var(--panel)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:12px;border:1px solid transparent;
  font-weight:650;font-size:15px;cursor:pointer;transition:var(--t-fast);white-space:nowrap;line-height:1}
.btn-acc{background:linear-gradient(180deg,var(--acc),var(--acc-2));color:var(--acc-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 8px 20px -10px rgba(201,123,44,.6)}
.btn-acc:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-ghost{background:var(--panel);border-color:var(--line);color:var(--txt)}
.btn-ghost:hover{border-color:var(--line-2);background:var(--panel-2)}
.btn-sm{padding:7px 12px;font-size:14px;border-radius:10px}
.btn-icon{width:38px;height:38px;padding:0;border-radius:10px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

.theme-toggle{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel);color:var(--txt-2);display:grid;place-items:center;cursor:pointer;transition:var(--t)}
.theme-toggle:hover{color:var(--txt);border-color:var(--line-2)}

/* ---------- hero ---------- */
.hero{position:relative;padding:76px 0 60px;text-align:center;background:var(--glow)}
/* Unbounded заметно шире прежнего шрифта: при старом кегле заголовок
   разъезжался на три строки и уводил мокап чата ниже экрана. */
.hero h1{font-size:clamp(29px,4.4vw,49px);line-height:1.08;letter-spacing:-.025em;font-weight:700;margin:18px 0 0}
.hero h1 .hl{background:linear-gradient(120deg,var(--acc),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:clamp(17px,2.4vw,21px);color:var(--txt-2);max-width:620px;margin:20px auto 0}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.chip-free{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--teal) 16%,transparent);border:1px solid color-mix(in srgb,var(--teal) 35%,transparent);
  color:var(--teal);font-weight:600;font-size:14px}
.trust{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:40px;color:var(--mut);font-size:14px}
.trust b{color:var(--txt);font-size:22px;display:block;font-weight:800}
.trust>div{text-align:center}

/* preview window (hero mock) */
.glass{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.mock{max-width:760px;margin:46px auto 0}
.mock-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line)}
.dot{width:11px;height:11px;border-radius:50%;background:var(--line-2)}
.mock-body{padding:22px;text-align:left;display:flex;flex-direction:column;gap:14px}
.mb-row{display:flex;gap:12px;align-items:flex-start}
.mb-av{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:14px}
.mb-u{background:var(--user-bub)}
/* Медвежонок всегда на ледяной подложке, как в логотипе: янтарь — акцент
   интерфейса, а зверь у нас белый и сидит на льду. */
.mb-a{background:linear-gradient(135deg,#6fc0ff,#4f8cff);color:#fff}
.mb-txt{font-size:15px;color:var(--txt-2);padding-top:4px}
.mb-txt code{font-family:var(--mono);background:var(--code-bg);padding:2px 6px;border-radius:6px;font-size:13px}

/* ---------- sections ---------- */
section{padding:64px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 44px}
.sec-head h2{font-size:clamp(26px,4vw,40px);letter-spacing:-.02em;font-weight:800;margin:10px 0 0}
.sec-head p{color:var(--txt-2);margin:14px 0 0;font-size:17px}

/* feature grid */
.grid{display:grid;gap:18px}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:var(--t)}
.feat:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.feat .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;
  background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc-text)}
.feat h3{margin:0 0 6px;font-size:18px;font-weight:700}
.feat p{margin:0;color:var(--txt-2);font-size:15px}

/* models showcase */
.models-strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:880px;margin:0 auto}
.mtag{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);font-weight:600;font-size:14px;transition:var(--t)}
.mtag:hover{border-color:var(--acc-text);color:var(--acc-text)}
.mtag .pv{width:7px;height:7px;border-radius:50%;background:var(--teal)}

/* steps */
.steps{counter-reset:s;display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:24px;
  width:34px;height:34px;border-radius:10px;background:linear-gradient(180deg,var(--acc),var(--acc-2));
  color:var(--acc-ink);display:grid;place-items:center;font-weight:800;box-shadow:var(--shadow-soft)}
.step h3{margin:14px 0 6px;font-size:17px}
.step p{margin:0;color:var(--txt-2);font-size:15px}

/* pricing */
.price-grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative}
.plan.pop{border-color:var(--acc-text);box-shadow:0 0 0 1px var(--acc),0 18px 40px -20px rgba(201,123,44,.5)}
.plan .badge{position:absolute;top:-12px;right:22px;background:var(--acc);color:var(--acc-ink);
  font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px}
.plan .amt{font-size:34px;font-weight:850;letter-spacing:-.02em;margin:6px 0}
.plan .amt span{font-size:15px;color:var(--mut);font-weight:600}
.plan ul{list-style:none;padding:0;margin:18px 0;display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;gap:10px;align-items:flex-start;color:var(--txt-2);font-size:15px}
.plan li svg{flex:none;color:var(--teal);margin-top:3px}

/* FAQ */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.qa{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.qa summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:650;font-size:16px;
  display:flex;align-items:center;gap:12px;transition:var(--t)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";margin-left:auto;font-size:22px;color:var(--mut);font-weight:400;transition:var(--t)}
.qa[open] summary::after{transform:rotate(45deg);color:var(--acc-text)}
.qa summary:hover{color:var(--acc-text)}
.qa .a{padding:0 20px 20px;color:var(--txt-2);font-size:15px}

/* CTA band */
.cta-band{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 18%,var(--panel)),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:48px;text-align:center}
.cta-band h2{font-size:clamp(24px,3.5vw,34px);margin:0 0 10px;letter-spacing:-.02em}
.cta-band p{color:var(--txt-2);margin:0 0 24px}

/* footer */
.foot{border-top:1px solid var(--line);padding:48px 0 40px;margin-top:20px;color:var(--mut);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.foot h4{color:var(--txt);font-size:14px;margin:0 0 12px;font-weight:700}
.foot a{display:block;color:var(--txt-2);padding:5px 0;transition:var(--t)}
.foot a:hover{color:var(--acc-text)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:32px;
  padding-top:22px;border-top:1px solid var(--line)}

/* ---------- forms ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--txt-2);margin:0 0 6px;font-weight:600}
.inp{width:100%;padding:12px 14px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:11px;color:var(--txt);font:inherit;font-size:15px;transition:var(--t)}
.inp:focus{outline:none;border-color:var(--acc-text);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.inp::placeholder{color:var(--mut)}
.form-msg{font-size:14px;margin-top:10px;min-height:18px}
.form-msg.err{color:#ff8a8a}.form-msg.ok{color:var(--teal)}

/* ---------- blog ---------- */
.post-list{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}

/* Карточки инструментов на странице «что умеет». Плотнее, чем карточки
   направлений: инструментов пятнадцать, и такими же крупными плитками
   они растянули бы страницу на три экрана. */
.tool-cards{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);align-items:stretch}
.tool-card{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 18px 20px;display:flex;gap:14px;
  align-items:flex-start;transition:var(--t);text-decoration:none;color:inherit;
  height:100%;box-sizing:border-box}
.tool-card:hover{border-color:var(--line-2);transform:translateY(-2px);
  box-shadow:var(--shadow-soft)}
.tool-card img{flex:0 0 44px;width:44px;height:44px;object-fit:contain;margin-top:1px}
/* Колонка текста растягивается на всю высоту карточки, а не только на
   высоту своего содержимого — иначе в ряду с разной длиной описания
   у каждой карточки цена «от X» садилась на свою высоту, и низ ряда
   получался рваным, а не ровной линией. */
.tool-card>div{display:flex;flex-direction:column;flex:1;min-width:0}
.tool-card h3{margin:0 0 6px;font-size:16px;line-height:1.3;font-weight:700}
.tool-card p{margin:0;font-size:13.5px;line-height:1.5;color:var(--mut)}
.tool-card time{display:block;margin-top:auto;padding-top:8px;color:var(--mut);font-size:12.5px}
@media(max-width:980px){ .tool-cards{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .tool-cards{grid-template-columns:1fr} }
.post-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;transition:var(--t);display:flex;flex-direction:column;gap:10px}
.post-card:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.post-card .tag{font-size:12px;color:var(--acc-text);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.post-card h3{margin:0;font-size:20px;letter-spacing:-.01em}
.post-card p{margin:0;color:var(--txt-2);font-size:15px}
.post-card time{color:var(--mut);font-size:13px}
.article{max-width:740px;margin:0 auto;padding:40px 0}
.article h1{font-size:clamp(28px,5vw,44px);line-height:1.1;letter-spacing:-.02em;margin:14px 0 8px}
.article .meta{color:var(--mut);font-size:14px;margin-bottom:30px}
.article h2{font-size:26px;margin:36px 0 12px;letter-spacing:-.01em}
.article h3{font-size:20px;margin:26px 0 8px}
.article p,.article li{font-size:17px;line-height:1.75;color:var(--txt-2)}
.article a{color:var(--acc-text);text-decoration:underline;text-underline-offset:3px}
/* Кнопка внутри статьи — это кнопка, а не ссылка в тексте. Правило выше
   красило её в акцентный цвет и подчёркивало: на янтарной заливке выходил
   тёмно-оранжевый текст по оранжевому, читать невозможно. */
.article a.btn{text-decoration:none}
.article a.btn-acc{color:var(--acc-ink)}
.article a.btn-ghost{color:var(--txt)}
.article ul,.article ol{padding-left:22px}
.article blockquote{border-left:3px solid var(--acc);margin:20px 0;padding:6px 18px;color:var(--txt-2);
  background:var(--panel);border-radius:0 10px 10px 0}
.article code{font-family:var(--mono);background:var(--code-bg);padding:2px 6px;border-radius:6px;font-size:.9em}
.article img{border-radius:12px;margin:24px 0}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin:24px 0}
.toc b{display:block;margin-bottom:8px}.toc a{display:block;color:var(--txt-2);padding:3px 0;font-size:15px}
.toc a:hover{color:var(--acc-text)}

/* ===========================================================
   ЧАТ-КАБИНЕТ  (app.html)
   =========================================================== */
.app{display:grid;grid-template-columns:272px 1fr;height:100dvh;overflow:hidden}
/* Панель приложения адресуется по id, а не по классу: тот же класс .side
   носит боковина статьи в блоге, и её правила лежат ниже по файлу. При
   равном весе побеждали они — панель получала position:static, вставала в
   сетку приложения второй строкой и занимала ровно половину экрана. */
#side{background:var(--bg-2);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.side-top{padding:14px;display:flex;flex-direction:column;gap:10px;flex-shrink:0}
#side .brand{padding:4px 6px 6px}
.convs{flex:1;overflow-y:auto;padding:6px 10px;display:flex;flex-direction:column;gap:3px}
.conv{padding:9px 12px;border-radius:10px;color:var(--txt-2);cursor:pointer;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:var(--t);display:flex;align-items:center;gap:8px;
  /* Не сжимать. Список — колонка flex, и при двух десятках чатов строки
     ужимались до наложения друг на друга: вторая строка залезала на имя
     соседнего чата. */
  flex:none}
.conv:hover{background:var(--panel);color:var(--txt)}
.conv.active{background:var(--panel-2);color:var(--txt)}
.conv .del{margin-left:auto;opacity:0;color:var(--mut);flex:none}
.conv:hover .del{opacity:1}
.conv .del:hover{color:#ff8a8a}
.side-foot{padding:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;flex-shrink:0}
/* Карточка баланса внутри кабинета. Её стили жили вместе со старым блоком
   в боковой панели и уехали вместе с ним — здесь она осталась нужна. */
.bal-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px}
.bal-card .n{font-size:20px;font-weight:800;color:var(--txt);
  font-variant-numeric:tabular-nums}
.bal-card .l{font-size:12px;color:var(--mut)}

/* ---------- ВХОД В КАБИНЕТ ---------- */

/* Две строки: кто вошёл и сколько на счету. Стрелка справа — единственный
   надёжный признак, что блок кликается: подпись «нажмите» такой задачи не
   решает, её просто не читают. */
/* Не button: браузер навязывает кнопке собственную внутреннюю раскладку —
   центрует содержимое и ужимает блоки по ширине текста, а наш display при
   этом игнорируется. С тремя строками карточка из-за этого разъезжалась.
   Роль и обработка клавиш заданы вручную. */
.acc-card{display:flex;flex-direction:column;align-items:stretch;
  width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:0;cursor:pointer;
  font:inherit;color:var(--txt);overflow:hidden;transition:var(--t-fast)}
.acc-card:hover{border-color:var(--line-2);background:var(--panel-2)}
.acc-card:focus-visible{outline:2px solid var(--acc-text);outline-offset:2px}

.acc-top{display:flex;align-items:center;gap:9px;padding:10px 12px}
.acc-av{width:26px;height:26px;border-radius:7px;flex:none}
.acc-who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.acc-who b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.acc-who span{font-size:11.5px;color:var(--mut);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.acc-go{margin-left:auto;flex:none;color:var(--mut);transition:var(--t-fast)}
.acc-card:hover .acc-go{color:var(--acc-text);transform:translateX(2px)}

/* Деньги отделены линией: это другой род сведений, чем имя и разделы. */
.acc-bal{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 12px;border-top:1px solid var(--line);background:var(--bg-2)}
.acc-bal .l{font-size:11.5px;color:var(--mut)}
.acc-bal .n{font-size:16px;font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap}

.scrim{display:none}
.main-col{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.chat-top{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);min-height:60px}
.burger{display:none}

/* model picker */
.mp{position:relative}
.mp-btn{display:flex;align-items:center;gap:9px;padding:9px 14px;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;cursor:pointer;font-weight:600;font-size:15px;color:var(--txt);transition:var(--t)}
.mp-btn:hover{border-color:var(--line-2)}
.mp-btn .pv{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.mp-btn svg{color:var(--mut)}
.mp-pop{position:absolute;top:calc(100% + 8px);left:0;width:360px;max-width:86vw;z-index:30;
  background:var(--panel);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow);
  overflow:hidden;display:none}
.mp-pop.open{display:block}
.mp-search{padding:12px;border-bottom:1px solid var(--line)}
.mp-list{max-height:60vh;overflow-y:auto;padding:6px}
.mp-grp{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding:10px 12px 4px}
.mp-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;cursor:pointer;font-size:14px;transition:var(--t-fast)}
.mp-item:hover{background:var(--panel-2)}
.mp-item.sel{background:color-mix(in srgb,var(--acc) 14%,transparent)}
.mp-item .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-item .pr{font-size:12px;color:var(--mut);font-family:var(--mono)}

/* messages */
/* Строка ввода лежит поверх области прокрутки, поэтому низ нужно освободить —
   иначе на узком экране карточки подсказок уходили под неё и налезали на поле. */
.scroll{flex:1;overflow-y:auto;scroll-behavior:smooth;padding-bottom:172px;box-sizing:border-box}
.thread{max-width:720px;margin:0 auto;padding:26px 20px 140px;display:flex;flex-direction:column;gap:26px}
.msg{display:flex;gap:14px;align-items:flex-start}
.msg .av{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:14px;font-weight:700}
.msg.u .av{background:var(--user-bub);color:var(--txt-2)}
.msg.a .av{background:linear-gradient(135deg,var(--acc),var(--acc-2));color:var(--acc-ink)}
.msg .body{min-width:0;flex:1;padding-top:3px}
.msg .who{font-weight:700;font-size:14px;margin-bottom:3px}
.bubble{font-size:15.5px;line-height:1.7;color:var(--txt);word-wrap:break-word;overflow-wrap:anywhere}
.bubble.u-text{color:var(--txt-2)}
.bubble p{margin:0 0 12px}.bubble p:last-child{margin-bottom:0}
.bubble h1,.bubble h2,.bubble h3{margin:18px 0 8px;line-height:1.25}
.bubble ul,.bubble ol{margin:0 0 12px;padding-left:22px}
.bubble li{margin:3px 0}
.bubble a{color:var(--acc-text);text-decoration:underline;text-underline-offset:2px}
.bubble blockquote{border-left:3px solid var(--line-2);margin:12px 0;padding:2px 14px;color:var(--txt-2)}
.bubble table{border-collapse:collapse;margin:12px 0;font-size:14px;width:100%;display:block;overflow-x:auto}
.bubble th,.bubble td{border:1px solid var(--line);padding:7px 11px;text-align:left}
.bubble th{background:var(--panel)}
.bubble :not(pre)>code{font-family:var(--mono);background:var(--code-bg);padding:2px 6px;border-radius:6px;font-size:.88em}
/* Проявляются при наведении на ЛЮБОЕ сообщение. Раньше правило было
   написано только для ответов Умки, и кнопки у реплик пользователя
   оставались навсегда прозрачными — выглядело как их отсутствие. */
.msg-tools{display:flex;gap:6px;margin-top:10px;opacity:0;transition:var(--t)}
.msg:hover .msg-tools,.msg:focus-within .msg-tools{opacity:1}

/* У двух последних сообщений кнопки видны всегда. Именно с ними работают
   чаще всего — копируют ответ, переспрашивают, правят вопрос, — и заставлять
   ради этого искать их наведением незачем. Остальная лента остаётся чистой. */
#thread .msg:nth-last-child(-n+2) .msg-tools{opacity:1}

/* На сенсорном экране наведения нет — там показываем везде. */
@media(hover:none){.msg-tools{opacity:1}}
.tool-btn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--mut);
  background:transparent;border:1px solid transparent;border-radius:8px;padding:4px 8px;cursor:pointer;transition:var(--t-fast)}
.tool-btn:hover{color:var(--txt);background:var(--panel)}

/* code block */
.codewrap{margin:14px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--code-bg)}
.codebar{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12px;color:var(--mut)}
.codebar .copy{margin-left:auto;cursor:pointer;color:var(--mut);background:none;border:none;font-size:12px;
  display:inline-flex;gap:5px;align-items:center;transition:var(--t)}
.codebar .copy:hover{color:var(--acc-text)}
.codewrap pre{margin:0;padding:14px 16px;overflow-x:auto}
.codewrap code{font-family:var(--mono);font-size:13.5px;line-height:1.6;color:var(--txt);white-space:pre}
/* минимальная подсветка токенов */
.tk-kw{color:#ff9f8a}.tk-str{color:#9ad98a}.tk-num{color:#f0c674}.tk-com{color:var(--mut);font-style:italic}
.tk-fn{color:#7fb8ff}.tk-punc{color:var(--txt-2)}

/* typing dots */
.dots{display:inline-flex;gap:4px;align-items:center;height:18px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--mut);animation:bl 1.2s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.18s}.dots i:nth-child(3){animation-delay:.36s}
@keyframes bl{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* empty state */
.empty{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;gap:8px;box-sizing:border-box}
.empty .lg{width:64px;height:64px;margin-bottom:6px}
.empty h2{font-size:26px;letter-spacing:-.02em;margin:0}
.empty p{color:var(--txt-2);margin:0;max-width:420px}
.suggest{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:560px;width:100%;margin-top:22px}
.sg{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:15px 16px;cursor:pointer;transition:var(--t-fast)}
.sg:hover{border-color:var(--acc-text);transform:translateY(-2px)}
.sg b{display:block;font-size:14.5px;margin-bottom:2px}
.sg span{font-size:13px;color:var(--mut)}

/* composer */
.composer{position:absolute;left:0;right:0;bottom:0;padding:14px 20px 32px;
  background:linear-gradient(180deg,transparent,var(--bg) 22%)}
.composer-in{max-width:720px;margin:0 auto;background:var(--panel);border:1px solid var(--line-2);
  border-radius:18px;padding:10px 10px 10px 16px;display:flex;align-items:flex-end;gap:10px;
  box-shadow:var(--shadow);transition:var(--t)}
.composer-in:focus-within{border-color:var(--acc-text);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent),var(--shadow)}
.composer textarea{flex:1;border:none;background:none;color:var(--txt);font:inherit;font-size:16px;
  resize:none;max-height:200px;line-height:1.5;padding:8px 0;outline:none}
.composer textarea::placeholder{color:var(--mut)}
.send-btn{width:40px;height:40px;flex:none;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(180deg,var(--acc),var(--acc-2));color:var(--acc-ink);display:grid;place-items:center;transition:var(--t-fast)}
.send-btn:hover{filter:brightness(1.06)}
.send-btn[disabled]{opacity:.4;cursor:not-allowed}
.attach{width:38px;height:38px;flex:none;border-radius:11px;border:1px solid var(--line);background:var(--bg-2);
  color:var(--mut);cursor:pointer;display:grid;place-items:center;transition:var(--t-fast)}
.attach:hover{color:var(--acc-text);border-color:var(--line-2)}
.composer-hint{max-width:720px;margin:8px auto 0;text-align:center;font-size:12px;color:var(--mut)}
.thumb{display:inline-flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;padding:5px 8px;margin:0 0 8px;font-size:13px;color:var(--txt-2)}
.thumb img{width:34px;height:34px;border-radius:7px;object-fit:cover}
.thumb .x{cursor:pointer;color:var(--mut)}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);z-index:100;
  display:none;align-items:center;justify-content:center;padding:20px}
.modal-bg.open{display:flex}
.modal{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:28px;width:100%;max-width:400px;box-shadow:var(--shadow)}
.modal h3{margin:0 0 4px;font-size:22px}
.modal .sub{color:var(--txt-2);font-size:14px;margin:0 0 20px}
.tabs{display:flex;gap:8px;background:var(--bg-2);border-radius:11px;padding:4px;margin-bottom:18px}
.tabs button{flex:1;padding:9px;border:none;background:none;color:var(--txt-2);border-radius:8px;
  font-weight:600;cursor:pointer;font-size:14px;transition:var(--t-fast)}
.tabs button.on{background:var(--panel);color:var(--txt);box-shadow:var(--shadow-soft)}
.modal-x{float:right;cursor:pointer;color:var(--mut);background:none;border:none;font-size:20px;line-height:1}
.key-out{font-family:var(--mono);font-size:13px;background:var(--code-bg);border:1px solid var(--line);
  border-radius:10px;padding:12px;word-break:break-all;margin-top:10px;color:var(--teal)}
.acc-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.acc-row:last-child{border:none}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:200;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--txt);padding:11px 18px;border-radius:12px;
  box-shadow:var(--shadow);opacity:0;transition:var(--t);font-size:14px;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:2px solid var(--bg)}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .g-3,.steps,.price-grid{grid-template-columns:1fr}
  .g-2,.post-list,.suggest{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}
@media(max-width:760px){
  section{padding:48px 0}
  .hero{padding:54px 0 40px}
  .app{grid-template-columns:1fr}
  #side{position:fixed;inset:0 auto 0 0;width:280px;z-index:80;transform:translateX(-100%);transition:transform var(--t)}
  #side.open{transform:translateX(0);box-shadow:var(--shadow)}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:70;display:none}
  .scrim.open{display:block}
  .burger{display:grid}
  .cta-band{padding:32px 20px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .nav-in{gap:10px;height:58px}
  .nav-right{gap:8px}
  .nav-right .btn-ghost{display:none}          /* «Войти» прячем — есть «Открыть Умку» */
  .brand{font-size:17px}
  .trust{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 12px;max-width:330px;margin-left:auto;margin-right:auto}
  .trust b{font-size:20px}
  .hero h1{font-size:clamp(25px,6.4vw,34px)}
  .mock-body{padding:16px}
  .cta-band h2{font-size:24px}
}
@media(max-width:420px){
  .foot-grid{grid-template-columns:1fr}
  .thread{padding:18px 14px 130px}
  .composer{padding:10px 12px 14px}
  .composer-hint{font-size:11px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ---------- КАБИНЕТ: вкладки, расходы, ключи ---------- */
.modal-wide{max-width:600px}
.acc-tabs{margin-bottom:18px}
.acc-pane{display:none}
.acc-pane.on{display:block}
.acc-foot{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.acc-foot .btn{color:#ff8a8a}

.forecast{margin:10px 0 16px;font-size:13.5px;color:var(--txt-2);text-align:center}
.forecast b{color:var(--txt)}

/* переключатель периода */
/* 6px вместо 4: при меньшем зазоре переключатели читаются как слипшиеся */
.seg{display:flex;gap:8px;background:var(--bg-2);border-radius:11px;padding:4px;margin-bottom:16px}
.seg button{flex:1;padding:8px;border:none;background:none;color:var(--txt-2);border-radius:8px;
  font-weight:600;cursor:pointer;font-size:13.5px;font-family:inherit;transition:var(--t-fast)}
.seg button.on{background:var(--panel);color:var(--txt);box-shadow:var(--shadow-soft)}

/* плитки со сводкой */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.tile{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.tile .v{font-size:19px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile .k{font-size:11.5px;color:var(--mut);margin-top:2px;line-height:1.3}

/* столбики по дням */
.chart{display:flex;align-items:flex-end;gap:2px;height:96px;padding:0 2px 22px;
  border-bottom:1px solid var(--line);margin-bottom:18px;position:relative}
.chart .bar{flex:1;min-width:3px;background:var(--acc);border-radius:3px 3px 0 0;
  opacity:.85;transition:var(--t);position:relative;min-height:2px}
.chart .bar:hover{opacity:1}
.chart .bar.zero{background:var(--line-2);opacity:.5}
.chart .ax{position:absolute;bottom:4px;font-size:11px;color:var(--mut);white-space:nowrap}
.chart .ax.l{left:2px}
.chart .ax.r{right:2px}

/* расход по моделям */
.mrow{padding:9px 0;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:none}
.mrow-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
.mrow-n{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow-v{font-size:13px;color:var(--txt-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.mrow-bar{height:4px;border-radius:3px;background:var(--line);overflow:hidden}
.mrow-bar i{display:block;height:100%;background:var(--acc);border-radius:3px}

.hint{color:var(--mut);font-size:13.5px;padding:14px 0;text-align:center}
/* Подпись под полем ссылки. Не .hint: тот центрирует текст, и пояснение
   уезжало на середину, отрываясь от поля, к которому относится. */
.ref-note{color:var(--mut);font-size:12.5px;margin-top:6px;line-height:1.4}

/* ключи */
.krow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.krow:last-child{border-bottom:none}
.krow .ki{flex:1;min-width:0}
.krow .kn{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.krow .kd{font-size:11.5px;color:var(--mut);margin-top:1px;font-family:var(--mono)}
.krow .kx{background:none;border:1px solid var(--line-2);color:var(--mut);cursor:pointer;
  border-radius:8px;padding:5px 10px;font-size:12px;font-family:inherit;transition:var(--t-fast)}
.krow .kx:hover{color:#ff8a8a;border-color:#ff8a8a}
.krow.off{opacity:.5}
.krow .tag{font-size:11px;color:var(--mut);font-family:var(--mono)}

@media(max-width:560px){
  .tiles{grid-template-columns:1fr 1fr}
  .tiles .tile:last-child{grid-column:1/-1}
}

/* ---------- КАБИНЕТ: профиль и лимиты ключей ---------- */
.ph{margin:0 0 12px;font-size:15px;letter-spacing:-.01em}
.danger{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.danger .ph{color:#ff8a8a}
.danger .btn{color:#ff8a8a;border-color:rgba(255,138,138,.35)}
.danger .btn:hover{border-color:#ff8a8a}

/* строка ключа: счётчики и лимит */
.krow{align-items:flex-start}
.krow .kmeta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:5px;font-size:11.5px;color:var(--mut)}
.krow .kmeta b{color:var(--txt-2);font-weight:600}
.klim{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
.klim input{width:110px;padding:6px 9px;font-size:12.5px;border-radius:8px;
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--txt);font-family:inherit}
.klim input:focus{outline:none;border-color:var(--acc-text)}
.klim label{font-size:11.5px;color:var(--mut)}
.klim button{background:none;border:1px solid var(--line-2);color:var(--txt-2);cursor:pointer;
  border-radius:8px;padding:6px 11px;font-size:12px;font-family:inherit;transition:var(--t-fast)}
.klim button:hover{border-color:var(--acc-text);color:var(--acc-text)}
.klim .over{color:#ff8a8a}

/* ---------- ИСТОРИЯ ДИАЛОГОВ ---------- */
.conv-search{margin-top:8px;font-size:13.5px;padding:9px 11px}
.conv .t{overflow:hidden;flex:1;min-width:0;white-space:normal;line-height:1.3}
.conv .nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600}
.conv .sn{display:block;font-size:11.5px;color:var(--mut);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;margin-top:2px}

/* Заголовок списка и разделители по времени. Без них столбец из тридцати
   почти одинаковых строк приходится перечитывать целиком, чтобы найти
   вчерашний разговор. */
/* Заголовок списка чатов. Двойной класс нужен, чтобы перебить .tools-h:
   он объявлен ниже по файлу и своим padding:0 2px прижимал «Ваши чаты» к
   самому краю. «Инструменты» лежат внутри .side-top с отступом 14px, здесь
   его нет — поэтому 16px задаём сами, чтобы оба заголовка встали по одной
   вертикали. */
.tools-h.convs-h{padding:12px 16px 4px; margin:0}
/* Подписи «Сегодня», «Вчера» — по той же левой линии, что и заголовок
   раздела: список внутри .convs уже сдвинут на 10px, поэтому здесь 6. */
.conv-gr{font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mut); padding:12px 8px 4px; user-select:none; flex:none}
.conv-gr:first-child{padding-top:4px}
/* Активный отмечен не только фоном: на светлой теме разница фона едва
   заметна, и непонятно, в каком чате находишься. */
.conv{position:relative}
.conv.active::before{content:"";position:absolute;left:3px;top:9px;bottom:9px;
  width:3px;border-radius:2px;background:var(--acc)}
/* Кнопки действий висят поверх строки, а не в потоке. В потоке они молча
   съедали треть ширины даже невидимыми, и название обрывалось на середине:
   «Описание ру…» вместо «Описание ручки Wildberries». */
.conv .acts{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:flex;gap:2px;opacity:0;pointer-events:none;transition:var(--t);
  padding-left:14px;border-radius:8px}
.conv:hover .acts,.conv.active .acts{opacity:1;pointer-events:auto}
/* Под кнопками — фон строки, иначе текст просвечивает сквозь них. */
.conv:hover .acts{background:linear-gradient(90deg,transparent,var(--panel) 14px)}
.conv.active .acts{background:linear-gradient(90deg,transparent,var(--panel-2) 14px)}
.conv .acts button{background:none;border:none;color:var(--mut);cursor:pointer;
  padding:2px 4px;border-radius:6px;font-size:13px;line-height:1;font-family:inherit}
.conv .acts button:hover{color:var(--txt);background:var(--bg-2)}
.conv .acts button.rm:hover{color:#ff8a8a}
.conv.pin .t::before{content:"📌 ";font-size:11px}
.conv .ren{flex:1;font:inherit;font-size:14px;background:var(--bg-2);color:var(--txt);
  border:1px solid var(--acc);border-radius:7px;padding:4px 7px;min-width:0}
.convs .none{color:var(--mut);font-size:13px;text-align:center;padding:20px 8px}

/* ---------- ВЫБОР МОДЕЛИ ---------- */
.mp-pop{width:440px}
/* Фильтры выбора модели.

   Прошлые попытки: перенос от тесноты (кнопки слипались), прокрутка (её в
   узкой панели не видно и пальцем не поймать) и равные колонки (подпись
   «Бесплатно» обрезалась многоточием). Все три чинили симптом.

   Здесь два ряда, и они разные по смыслу: сверху — ЧТО модель делает,
   снизу — КАКАЯ она. Верхний ряд крупнее и заметнее: с него выбор и
   начинается. Нижний тише, это уточнение. */
.mp-filters{padding:14px 12px 12px;display:flex;flex-direction:column;gap:8px;
  border-top:1px solid var(--line)}
.mp-row{display:flex;flex-wrap:wrap;gap:6px}
.mp-row button{
  flex:0 0 auto;white-space:nowrap;cursor:pointer;font-family:inherit;
  border-radius:999px;transition:var(--t-fast);
  background:var(--bg-2);border:1px solid var(--line);color:var(--txt-2);
  padding:8px 13px;font-size:12.5px;font-weight:500;line-height:1.2;
}
.mp-row button:hover{border-color:var(--line-2);color:var(--txt);background:var(--panel-2)}
.mp-row button.on{
  background:var(--acc);border-color:transparent;color:var(--acc-ink);font-weight:600;
  box-shadow:0 3px 12px -5px var(--acc);
}
/* Второй ряд — уточнения, поэтому тише: мельче, без заливки в активном. */
.mp-row-2 button{padding:6px 11px;font-size:11.5px;background:transparent}
.mp-row-2 button.on{
  background:transparent;color:var(--acc-text);border-color:var(--acc-text);
  box-shadow:none;
}

.mp-item{align-items:flex-start;padding:10px 12px}
.mp-item .col{flex:1;min-width:0}
.mp-item .nm{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mp-item .nm b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-item .meta{font-size:11.5px;color:var(--mut);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-item .meta b{color:var(--txt-2);font-weight:600}
.mp-item.locked{opacity:.55}

.bdg{font-size:10px;letter-spacing:.03em;padding:2px 7px;border-radius:20px;
  border:1px solid var(--line-2);color:var(--mut);white-space:nowrap;flex:none}
.bdg.free{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 45%,transparent)}
.bdg.eye{color:var(--violet);border-color:color-mix(in srgb,var(--violet) 45%,transparent)}
.bdg.think{color:var(--acc-text);border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.bdg.lock{color:var(--mut)}

.mp-item .star{flex:none;background:none;border:none;cursor:pointer;font-size:14px;
  color:var(--mut);opacity:.35;padding:2px 4px;line-height:1;transition:var(--t-fast)}
.mp-item:hover .star{opacity:.8}
.mp-item .star.on{opacity:1;color:var(--acc-text)}
.mp-note{font-size:12px;color:var(--mut);padding:8px 12px 10px;line-height:1.45;
  border-bottom:1px solid var(--line);margin-bottom:4px}

/* ---------- ПРАВКА СООБЩЕНИЯ И СТОИМОСТЬ ---------- */
.edit-ta{width:100%;box-sizing:border-box;margin-top:6px;background:var(--bg-2);
  color:var(--txt);border:1px solid var(--acc);border-radius:12px;padding:11px 13px;
  font:inherit;font-size:15px;line-height:1.5;resize:vertical;min-height:64px;outline:none}
.edit-row{display:flex;gap:8px;margin-top:8px}
.msg-cost{font-size:12px;color:var(--mut);align-self:center;padding-left:2px;
  font-variant-numeric:tabular-nums;cursor:default}

/* вложения */
.thumb{margin-right:8px}
.thumb .sz{color:var(--mut);font-size:11.5px}
.att{display:inline-block;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px;padding:3px 9px;font-size:12.5px;color:var(--txt-2);margin:0 6px 4px 0}

/* поиск в интернете */
#webBtn.on{color:var(--acc-ink);background:var(--acc);border-color:var(--acc-text)}
#webBtn.on:hover{color:var(--acc-ink)}
.web-note{font-size:11.5px;color:var(--mut);text-align:center;margin-top:6px}
.web-note b{color:var(--txt-2)}

/* ---------- ПЕРСОНАЖ И ДВИЖЕНИЕ ---------- */

/* Аватар ответа — медвежонок, а не буква «У». Единственное, чего у
   конкурентов нет и что нельзя скопировать вместе с градиентом. */


/* Спящий на пустом экране: чуть дышит, чтобы страница не выглядела картинкой */
.bear-idle{animation:breathe 4.2s ease-in-out infinite;transform-origin:50% 70%}
@keyframes breathe{
  0%,100%{transform:scale(1) translateY(0)}
  50%{transform:scale(1.035) translateY(-2px)}
}

/* Появление контента: сдержанно, один раз, с каскадом по соседям */
@keyframes riseIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.reveal{opacity:0}
.reveal.seen{animation:riseIn var(--t-slow) both}
.reveal.seen.d1{animation-delay:.06s}
.reveal.seen.d2{animation-delay:.12s}
.reveal.seen.d3{animation-delay:.18s}
.reveal.seen.d4{animation-delay:.24s}

/* Новое сообщение в переписке тоже приезжает, а не возникает */
.msg{animation:riseIn var(--t-slow) both}

/* Заголовки лендинга — характерным шрифтом, но только они */
.hero h1,.sec-h h2{font-family:var(--display);font-weight:600;letter-spacing:-.03em}

@media(prefers-reduced-motion:reduce){
  .bear-idle,.msg,.reveal.seen{animation:none!important}
  .reveal{opacity:1}
}

/* курсор печати в мокапе первого экрана */
.mb-txt{min-height:1.4em}
.mb-txt.typing::after{content:"";display:inline-block;width:2px;height:1em;
  background:var(--acc);margin-left:2px;vertical-align:-2px;animation:caret .9s steps(1) infinite}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.mb-av img{width:100%;height:100%;display:block;border-radius:inherit}
.mb-av.mb-a{overflow:hidden;padding:2px;box-sizing:border-box}
@media(prefers-reduced-motion:reduce){.mb-txt.typing::after{display:none}}

/* ---------- РОЛЬ, ПАПКИ, ЭКСПОРТ ---------- */
.role-btn{white-space:nowrap;max-width:210px;overflow:hidden;text-overflow:ellipsis}
.role-btn.on{border-color:var(--acc);color:var(--acc-text)}

.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-bottom:18px}
.roles button{text-align:left;background:var(--bg-2);border:1px solid var(--line);color:var(--txt-2);
  border-radius:11px;padding:11px 13px;cursor:pointer;font-family:inherit;transition:var(--t-fast)}
.roles button:hover{border-color:var(--line-2);color:var(--txt)}
.roles button.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--txt)}
.roles button b{display:block;font-size:13.5px;font-weight:600;margin-bottom:2px}
.roles button span{font-size:11.5px;color:var(--mut);line-height:1.35;display:block}
.role-ta{width:100%;box-sizing:border-box;resize:vertical;font:inherit;font-size:14px;line-height:1.5}
.role-row{display:flex;gap:8px;margin-top:16px}

/* папки в списке диалогов */
.folder-h{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);padding:12px 12px 5px;cursor:pointer;user-select:none}
.folder-h:hover{color:var(--txt-2)}
.folder-h .caret{transition:transform var(--t-fast);font-size:9px}
.folder-h.closed .caret{transform:rotate(-90deg)}
.folder-h .cnt{margin-left:auto;font-size:11px;opacity:.7}

/* картинка, сгенерированная моделью */
.gen-img{margin-top:10px}
.gen-img img{max-width:100%;width:auto;border-radius:12px;display:block;border:1px solid var(--line)}
.gen-dl{display:inline-block;margin-top:8px;font-size:12.5px;color:var(--txt-2);
  border:1px solid var(--line-2);border-radius:8px;padding:5px 11px;text-decoration:none;transition:var(--t-fast)}
.gen-dl:hover{border-color:var(--acc);color:var(--acc-text)}
.bdg.draw{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 45%,transparent)}

/* ---------- МАСКОТ ---------- */
.umka{display:block;line-height:0;position:relative}
.umka img{width:100%;height:auto;display:block;transition:opacity .13s ease}
.umka.u-swap img{opacity:0}

/* еле заметное дыхание — чтобы страница не выглядела картинкой */
.umka-breathe img{animation:umkaBreathe 4.8s ease-in-out infinite;transform-origin:50% 80%}
@keyframes umkaBreathe{
  0%,100%{transform:scale(1) translateY(0)}
  50%{transform:scale(1.02) translateY(-3px)}
}
/* спящий дышит медленнее и глубже */
.umka.u-sleep img{animation-duration:6.4s}

/* Маскот сам себе аватар: подложка не нужна, а специфичности .av.bear не
   хватало против .msg.a .av — янтарный квадрат перекрывал зверя. */
.msg.a .av.bear,.av.bear{background:none;padding:0;overflow:visible;
  width:38px;height:38px;margin-top:-3px}

.empty .lg{width:150px;height:auto;margin-bottom:2px}

@media(prefers-reduced-motion:reduce){.umka-breathe img{animation:none}}

/* ---------- ИКОНКИ ---------- */
.ic{display:inline-block;vertical-align:-3px;flex:none}
.tool-btn .ic,.btn .ic{margin-right:5px;vertical-align:-3.5px}
.conv .acts button{display:grid;place-items:center;width:24px;height:24px;padding:0}
.conv .acts button .ic{vertical-align:0}
.conv .acts button.act-on{color:var(--acc-text);opacity:1}
.mp-item .star .ic{vertical-align:0}
.mp-item .star.on .ic{fill:currentColor}
.att .ic{vertical-align:-3px;margin-right:3px}
.thumb .ic{vertical-align:-3px;margin-right:4px}
.thumb .x{display:inline-grid;place-items:center;vertical-align:-3px}
.sg b .ic{margin-right:6px;vertical-align:-3px;color:var(--acc-text)}

/* аватар пользователя — иконка, а не эмодзи */
.av.u .ic{color:var(--txt-2)}
/* маскот в аватаре: убираем внутренние отступы, он и так в кадре */
/* Маскот сам себе аватар: подложка ему не нужна, а специфичности .av.bear
   не хватало против .msg.a .av — янтарный квадрат перекрывал зверя.
   Плюс чуть больше места: с шарфом он не влезал в 32 пикселя. */
.msg.a .av.bear,.av.bear{background:none;padding:0;overflow:visible;
  width:38px;height:38px;margin-top:-3px}
.empty .lg{width:104px;height:auto}

/* ---------- СТРОКА ВВОДА ПО РЕФЕРЕНСУ ---------- */
/* Модель и роль выбираются здесь, а не в шапке: выбор относится к
   сообщению, которое пишешь, и держать его через весь экран странно. */
.composer-in{display:block;padding:12px 12px 10px;border-radius:16px}
/* Отступ снизу, а не 10px: текст стоял вплотную к ряду кнопок — проверка
   отступов показывала ноль пикселей между ними. */
.composer-in textarea{width:100%;display:block;padding:6px 4px 0;margin-bottom:12px;font-size:15.5px}
.composer-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.composer-bar .sp{margin-left:auto}

.chip{display:inline-flex;align-items:center;gap:7px;background:var(--bg-2);
  border:1px solid var(--line);color:var(--txt-2);border-radius:9px;padding:6px 10px;
  font:inherit;font-size:12.5px;cursor:pointer;transition:var(--t-fast);max-width:230px}
.chip:hover{border-color:var(--line-2);color:var(--txt)}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .pv{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}
#roleBtn.on{border-color:var(--acc);color:var(--acc-text)}

.ci{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:8px;
  border:1px solid var(--line);background:var(--bg-2);color:var(--mut);cursor:pointer;
  transition:var(--t-fast)}
.ci:hover{color:var(--txt);border-color:var(--line-2)}
#webBtn.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.send-btn{width:30px;height:30px;border-radius:8px}

/* ---------- ДИКТОВКА ---------- */

/* Внутри кнопки живут два состояния: значок микрофона в покое и живая
   звуковая дорожка во время записи. Дорожка честнее пульсации — по ней
   видно, что запись идёт, а не просто горит лампочка. */
#micBtn{position:relative;overflow:hidden}
#micBtn svg{transition:opacity .18s ease,transform .18s ease}

.mic-wave{position:absolute;inset:0;display:none;align-items:center;
  justify-content:center;gap:2px;pointer-events:none}
.mic-wave i{width:2px;height:4px;border-radius:1px;background:currentColor;
  animation:micBar 900ms ease-in-out infinite}
.mic-wave i:nth-child(2){animation-delay:150ms}
.mic-wave i:nth-child(3){animation-delay:300ms}
.mic-wave i:nth-child(4){animation-delay:450ms}
@keyframes micBar{0%,100%{height:4px}50%{height:14px}}

#micBtn.rec{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);
  animation:micGlow 1.8s ease-in-out infinite}
#micBtn.rec svg{opacity:0;transform:scale(.6)}
#micBtn.rec .mic-wave{display:flex}
@keyframes micGlow{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 50%,transparent)}
  70%{box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 0%,transparent)}
}

/* Расшифровка: кнопка гаснет и внутри крутится колечко. */
#micBtn.busy{color:var(--acc-text);border-color:var(--acc-text);cursor:default}
#micBtn.busy svg{opacity:0}
#micBtn.busy::after{content:"";position:absolute;width:14px;height:14px;
  border-radius:50%;border:2px solid currentColor;border-top-color:transparent;
  animation:micSpin .7s linear infinite}
@keyframes micSpin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  #micBtn.rec,.mic-wave i,#micBtn.busy::after{animation:none}
  .mic-wave i{height:9px}
}

/* выпадашка моделей раскрывается вверх — строка ввода внизу экрана */
.mp-pop{top:auto;bottom:calc(100% + 8px)}

/* шапка чата: только название диалога */
.chat-title{font-size:14px;color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:52vw}

/* ---------- ПЛОТНОСТЬ ПО РЕФЕРЕНСУ ---------- */
/* Разделы в боковой панели: мелкая заглавная подпись вместо пустоты */
.side-lbl{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--mut);
  padding:14px 12px 6px}
.convs{padding:2px 8px 8px}
.conv{padding:8px 10px;font-size:13.5px;border-radius:8px}
.msg .av{width:30px;height:30px;border-radius:8px}

/* ---------- УЗКИЙ ЭКРАН: пустой чат ---------- */
/* На 390px подсказки идут в один столбец, и содержимое переставало влезать:
   нижняя карточка уходила под строку ввода. Уплотняем — маскот мельче,
   подсказки в два столбца, отступы теснее. */
@media(max-width:560px){
  .empty{padding:20px 16px;gap:4px}
  .empty .lg{width:88px;margin-bottom:0}
  .empty h2{font-size:21px}
  .empty p{font-size:14px}
  .suggest{grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
  .sg{padding:11px 12px;border-radius:11px}
  .sg b{font-size:13px}
  .sg span{font-size:11.5px}
}

/* ссылки-кнопки под формой входа */
.auth-alt{display:flex;justify-content:center;gap:16px;margin-top:14px}
.linkish{background:none;border:none;padding:4px 2px;font-size:13.5px;
  color:var(--txt-2);cursor:pointer;border-radius:6px;transition:var(--t-fast)}
.linkish:hover{color:var(--acc-text)}
.linkish:focus-visible{outline:2px solid var(--acc-text);outline-offset:2px}
/* Атрибут hidden должен работать всегда. Браузерное [hidden]{display:none}
   перебивается любым нашим display на элементе — так вкладки «Вход /
   Регистрация» оставались видны при hidden=true. */
[hidden]{display:none!important}

/* адрес API рядом с ключом */
.key-base{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin:10px 0 12px}
.key-base .l{font-size:11.5px;color:var(--mut);flex:none}
.key-base code{font-family:var(--mono,ui-monospace,monospace);font-size:13px;
  color:var(--teal);word-break:break-all;flex:1;min-width:0}

/* ---------- ДЕНЬГИ НА ИСХОДЕ ---------- */

/* Не красный: закончившийся баланс — не поломка и не вина человека.
   Янтарный говорит «нужно действие», не пугая. */
.acc-card.bal-low .acc-bal,.acc-card.bal-empty .acc-bal{
  background:color-mix(in srgb,var(--acc) 12%,var(--bg-2));
  border-top-color:color-mix(in srgb,var(--acc) 35%,var(--line))}
.acc-card.bal-low .acc-bal .n,.acc-card.bal-empty .acc-bal .n{color:var(--acc-text)}
.acc-warn{display:block;padding:7px 12px;font-size:11.5px;font-weight:600;
  color:var(--acc-ink);background:var(--acc);text-align:center}
.acc-warn[hidden]{display:none}

/* Строка модели: знак производителя слева, под именем — зачем она нужна. */
.mp-item{align-items:flex-start}
.mp-mark{
  flex:none;width:30px;height:30px;border-radius:9px;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  font:700 11px var(--font);letter-spacing:.01em;
  border:1px solid transparent;
}
.mp-logo{
  display:block;width:17px;height:17px;
  -webkit-mask:var(--logo) center/contain no-repeat;
  mask:var(--logo) center/contain no-repeat;
}
.mp-about{
  font-size:12px;color:var(--mut);line-height:1.4;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bdg.pop{background:rgba(224,145,62,.16);color:var(--acc-text)}

/* СТУДИЯ: видео и музыка.

   Не окно поверх чата, а третья колонка приложения — как на прямых
   площадках. Слева история, по центру результаты, справа настройки с
   ценой, приколотой внизу. В окне человек «заглядывает на секунду», в
   колонке — работает: пробует, меняет параметр, пробует снова.

   Каждая настройка идёт заголовком, серым пояснением и контролом. Без
   пояснения «точность следования описанию 0.5» не значит ничего, а
   испортить им результат легко. */
body.studio .app{grid-template-columns:272px 1fr 340px}
body.studio .scroll,body.studio .composer,body.studio .composer-hint{display:none}
body.studio .st-canvas{display:flex}
body.studio .st-panel{display:flex}

.st-panel{display:none;flex-direction:column;min-height:0;
  background:var(--bg-2);border-left:1px solid var(--line)}
.st-scroll{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 8px}
.st-ph{margin-bottom:14px}

.st-cap{display:block;font-size:13.5px;font-weight:600;margin:0 0 4px}
.st-sub{font-size:12px;color:var(--mut);margin:0 0 8px;line-height:1.45}
/* Пояснение, ставшее предупреждением: человека послали в это поле, и
   он должен прочитать здесь, зачем. */
.st-sub.err{color:#ff8a8a}
.st-pick{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.st-pick .st-mark{flex:none}
.st-mark .mp-mark{width:32px;height:32px;border-radius:9px}
.st-pick select{flex:1;min-width:0;font-size:14px;font-weight:500}
.st-about{font-size:12px;color:var(--mut);margin:0 0 16px;line-height:1.45}
#stPrompt{width:100%;resize:vertical;min-height:84px;font-family:inherit;font-size:14px}

.st-f{padding:14px 0 0;border-top:1px solid var(--line);margin-top:14px}
.st-f-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.st-f-h b{font-size:13px;font-weight:600}
.st-f-v{font-family:var(--mono);font-size:12px;color:var(--txt-2);
  font-variant-numeric:tabular-nums}
.st-f-hint{font-size:11.5px;color:var(--mut);margin-top:3px;line-height:1.45}
.st-f > .inp,.st-f > select{width:100%;margin-top:8px}
.st-sel{font-size:13.5px}

.st-f-row{position:relative;padding-right:50px}
.st-sw{position:absolute;right:0;top:14px;width:40px;height:23px;flex:none;
  border-radius:999px;border:1px solid var(--line-2);background:var(--bg);
  cursor:pointer;transition:var(--t-fast);padding:0}
.st-sw::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;
  border-radius:50%;background:var(--mut);transition:var(--t-fast)}
.st-sw.on{background:var(--acc);border-color:transparent}
.st-sw.on::after{left:19px;background:var(--acc-ink)}

.st-slider{width:100%;margin-top:9px;accent-color:var(--acc)}
.st-ends{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:10.5px;color:var(--mut);margin-top:2px}

.st-bar{flex:none;padding:12px 16px 16px;border-top:1px solid var(--line);
  background:var(--bg-2)}
.st-go{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:13px 16px;font-size:14.5px;font-weight:600}
.st-go b{font-family:var(--display);font-weight:700;font-size:14.5px}
/* Нехватка денег — не поломка, а следующий шаг, и кнопка ведёт к нему.
   Гасить её прозрачностью, как раньше, было неверно вдвойне: она выглядела
   отключённой, хотя работает, и предлагала тупик вместо выхода. Поэтому
   вид не блёклый, а другой: обводка и акцентная надпись — «это тоже
   действие, но не то, за которым вы шли». */
.st-go.no-money{
  background:color-mix(in srgb,var(--acc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 46%,var(--line));
  color:var(--acc-text);
}
.st-go.no-money b{
  font-family:var(--font); font-weight:500; font-size:13.5px; color:var(--txt-2);
}
.st-go.no-money:hover{background:color-mix(in srgb,var(--acc) 18%,transparent)}

/* Переключатель доработки описания. */
.st-enh{display:flex;gap:10px;align-items:flex-start;margin:10px 0 16px;
  padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-2);cursor:pointer;transition:var(--t-fast)}
.st-enh:hover{border-color:var(--line-2)}
.st-enh input{margin:2px 0 0;flex:none;accent-color:var(--acc)}
.st-enh b{display:block;font-size:13px;font-weight:600}
.st-enh i{display:block;font-style:normal;font-size:12px;color:var(--mut);
  margin-top:2px;line-height:1.4}

/* Что ушло модели — под спойлером: нужно не всем и не всегда. */
.st-sent{margin-top:7px}
.st-sent > summary{cursor:pointer;list-style:none;font-size:12px;
  color:var(--mut);user-select:none}
.st-sent > summary::-webkit-details-marker{display:none}
.st-sent > summary::before{content:"▸ ";font-size:10px}
.st-sent[open] > summary::before{content:"▾ "}
.st-sent > summary:hover{color:var(--txt-2)}
.st-sent p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--txt-2);
  padding:9px 11px;background:var(--bg-2);border-radius:8px}

/* Текст песни — поле, в котором действительно пишут, а не вписывают. */
.st-lyr{min-height:132px;line-height:1.5;font-size:13.5px;white-space:pre-wrap}
.st-lyr-act{display:flex;gap:8px;margin-top:8px}

/* ── быстрый выбор по делу ───────────────────────────────────────── */
/* Четыре кнопки в ряд, между «Новым чатом» и поиском. Это не фильтры
   каталога: они не сужают список, а сразу ставят модель и открывают
   нужный экран. Отсюда и вид — плитки, а не чипы. */
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
  margin-top:8px}
.quick button{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 4px 8px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--mut);cursor:pointer;
  font:500 11px var(--font);transition:var(--t-fast)}
.quick button i{display:block;line-height:0;color:var(--acc-text);opacity:.85}
.quick button span{letter-spacing:-.01em}
.quick button:hover{border-color:var(--line-2);color:var(--txt-2);
  background:var(--panel-2)}
.quick button:hover i{opacity:1}
.quick button:active{transform:translateY(1px)}

/* ── тонкая настройка ─────────────────────────────────────────────── */
/* Девять ручек вроде «сдвига расписания» нужны единицам, но нужны
   по-настоящему. Прячем под заголовок: кто ищет — найдёт, остальным они
   не мешают видеть длительность и качество. */
.st-adv{margin-top:6px;border-top:1px solid var(--line);padding-top:12px}
.st-adv > summary{cursor:pointer;list-style:none;font-size:12.5px;color:var(--mut);
  padding:4px 0;user-select:none;display:flex;align-items:center;gap:7px}
.st-adv > summary::-webkit-details-marker{display:none}
.st-adv > summary::before{content:"▸";font-size:11px;transition:transform var(--t-fast)}
.st-adv[open] > summary::before{transform:rotate(90deg)}
.st-adv > summary:hover{color:var(--txt-2)}

/* Целое число: ползунок тянуть удобно, поле — когда нужно точно.
   Ширину поля задаём жёстко: у .inp стоит width:100%, и без этого поле
   съедало всю строку, а от ползунка оставалась точка. */
.st-int{display:flex;gap:9px;align-items:center}
.st-int .st-slider{flex:1 1 auto;min-width:0;width:auto}
.st-int .st-num{flex:0 0 76px;width:76px;padding:7px 6px;font-size:13px;
  font-variant-numeric:tabular-nums;text-align:center}
.st-int > .inp:not(.st-num){flex:1 1 auto;min-width:0}
.st-int .st-act{flex:none;white-space:nowrap}

/* Картинка-параметр: конечный кадр. */
.st-mini-drop{display:flex;gap:10px;align-items:center}
.st-mini-prev{width:56px;height:56px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line-2)}

/* ── исходный кадр для «оживить картинку» ─────────────────────────── */
.st-drop{display:grid;place-items:center;min-height:132px;cursor:pointer;
  border:1px dashed var(--line-2);border-radius:12px;background:var(--bg-2);
  overflow:hidden;transition:var(--t-fast);margin-bottom:6px}
.st-drop:hover,.st-drop.over{border-color:var(--acc);background:var(--panel-2)}
.st-drop-t{font-size:13px;color:var(--txt-2);text-align:center;line-height:1.5;
  padding:16px}
.st-drop-t i{font-style:normal;color:var(--mut);font-size:12px}
.st-drop img{width:100%;max-height:220px;object-fit:contain;display:block}
.st-drop-act{display:flex;justify-content:flex-end;min-height:18px;margin-bottom:14px}

/* ── формат кадра ─────────────────────────────────────────────────── */
/* Прямоугольник в настоящих пропорциях сам себе подпись: «9:16» надо
   расшифровывать, вертикальный кадр — нет. */
.st-ar{display:flex;gap:8px;flex-wrap:wrap}
.st-ar-b{flex:1;min-width:56px;display:flex;flex-direction:column;align-items:center;
  gap:7px;padding:10px 6px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-2);cursor:pointer;transition:var(--t-fast);
  font:inherit;color:var(--mut)}
.st-ar-b i{display:block;border:1.5px solid currentColor;border-radius:3px;opacity:.75}
.st-ar-b span{font-size:11.5px;font-variant-numeric:tabular-nums}
.st-ar-b:hover{border-color:var(--line-2);color:var(--txt-2)}
.st-ar-b.on{border-color:var(--acc);color:var(--acc-text);
  background:color-mix(in srgb,var(--acc) 10%,transparent)}

.st-ta{resize:vertical;min-height:52px;line-height:1.45}

/* Полотно результатов вместо переписки. */
.st-canvas{display:none;flex:1;min-height:0;overflow-y:auto;
  flex-direction:column;padding:24px 24px 40px}
.st-empty{margin:auto;text-align:center;max-width:44ch;padding:40px 0}
.st-empty-mark{margin:0 auto 18px}
.st-empty-mark .mp-mark{width:64px;height:64px;border-radius:19px;font-size:20px}
.st-empty h2{font-family:var(--display);font-size:22px;font-weight:600;margin:0 0 8px}
.st-empty p{color:var(--mut);font-size:14px;margin:0;line-height:1.55}
.st-jobs{display:flex;flex-direction:column;gap:16px;max-width:760px;
  width:100%;margin:0 auto}

/* Карточка работы. Кадр сверху, подпись снизу — как у любой работы, о
   которой хочется думать «сделано», а не «строка в списке». */
.st-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;animation:stВъехал .32s cubic-bezier(.16,.84,.28,1) both}
@keyframes stВъехал{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Форма кадра приходит из настроек задания: 16:9, 9:16, 1:1. Пока модель
   работает и когда пришёл ролик — кадр один и тот же, поэтому подстановка
   плеера ничего не сдвигает. */
/* Высоту задаём мы, ширину CSS считает от неё по отношению сторон. Иначе
   вертикальный ролик 9:16 растягивался на всю ширину полотна и вырастал
   на полторы тысячи пикселей — карточка переставала помещаться на экран.
   min() не даёт горизонтальному ролику вылезти за края. */
.st-frame{--h:min(400px,54vh);position:relative;background:var(--bg-2);
  aspect-ratio:var(--ar,16/9);
  width:min(100%,calc(var(--h) * var(--arn,1.778)));
  margin:0 auto;display:grid;place-items:center;overflow:hidden}
/* У музыки кадра как такового нет — только полоска со столбиками. */
.st-card[data-kind="music"] .st-frame{aspect-ratio:auto;width:100%;
  height:auto;min-height:128px;padding:18px}
/* contain, а не cover: cover обрезает и «зумит» всё, что не совпало с
   рамкой, — вертикальный ролик в широком кадре превращался в кашу.
   Лучше поля по краям, чем испорченная картинка. */
.st-frame video{width:100%;height:100%;object-fit:contain;display:block;
  background:#000}
.st-frame audio{position:relative;z-index:2;width:100%}

/* Заготовка: медленный блик поперёк кадра. Она говорит «идёт работа»
   без единого слова и без крутящегося колеса, которое одинаково значит
   и «две секунды», и «навсегда». */
.st-skel{position:absolute;inset:0;
  background:linear-gradient(100deg,
    var(--bg-2) 0%,
    color-mix(in srgb,var(--acc) 4%,var(--panel-2)) 26%,
    color-mix(in srgb,var(--acc) 22%,var(--panel-2)) 44%,
    color-mix(in srgb,var(--acc) 4%,var(--panel-2)) 62%,
    var(--bg-2) 100%);
  background-size:260% 100%;animation:stБлик 2.1s linear infinite}
@keyframes stБлик{from{background-position:180% 0}to{background-position:-80% 0}}

.st-live{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--txt-2);background:color-mix(in srgb,var(--bg) 62%,transparent);
  border:1px solid var(--line-2);border-radius:100px;padding:6px 13px;
  backdrop-filter:blur(6px)}
.st-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);
  animation:stПульс 1.5s ease-in-out infinite}
@keyframes stПульс{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* Звук нечего показывать — рисуем ровные столбики, которые дышат. */
.st-wave{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:6px;opacity:.32}
.st-wave i{display:block;width:5px;border-radius:3px;background:var(--acc);
  height:22px;animation:stДышит 1.5s ease-in-out infinite}
.st-wave i:nth-child(2){animation-delay:.12s}
.st-wave i:nth-child(3){animation-delay:.24s}
.st-wave i:nth-child(4){animation-delay:.36s}
.st-wave i:nth-child(5){animation-delay:.48s}
.st-wave i:nth-child(6){animation-delay:.6s}
.st-wave i:nth-child(7){animation-delay:.72s}
@keyframes stДышит{0%,100%{height:14px;opacity:.5}50%{height:44px;opacity:1}}

.st-broken{color:var(--mut);opacity:.55}

.st-body{padding:14px 16px 15px}
/* Без кадра карточка не должна выглядеть обрезанной сверху. */
.st-failed .st-body,.st-cancelled .st-body{padding-top:15px}
.st-line{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:14.5px}
.st-line b{font-weight:600}
.st-chip{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:7px;white-space:nowrap}
.st-c-queued,.st-c-running{background:rgba(224,145,62,.16);color:var(--acc-text)}
.st-c-done{background:rgba(105,196,149,.16);color:#69c495}
.st-c-failed,.st-c-cancelled{background:rgba(240,144,143,.14);color:#f0908f}

/* Запрос человека — его слова, поэтому кавычки и курсив, а не наш текст. */
.st-said{margin:7px 0 0;font-size:13px;line-height:1.5;color:var(--txt-2);
  font-style:italic;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.st-said::before{content:"«"}
.st-said::after{content:"»"}
.st-why{margin:9px 0 0;font-size:13px;line-height:1.45;color:#f0908f;
  display:flex;gap:8px;align-items:flex-start}
.st-why svg{flex:none;margin-top:1px}

/* Полоса заполняется по времени и намеренно не доходит до конца: полная
   полоса без файла читается как «готово», а готового ещё нет. */
/* Имя .st-bar уже занято нижней панелью с ценой — мой прогресс наследовал
   её отступы и рамку и не рисовался вовсе. Отсюда .st-prog. */
.st-prog{height:5px;border-radius:3px;background:var(--line);margin:12px 0 8px;
  overflow:hidden}
.st-prog i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--acc-2),var(--acc));
  transition:width 1s linear;position:relative}
.st-prog i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  animation:stБежит 1.6s linear infinite}
@keyframes stБежит{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.st-meta{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:12.5px;
  color:var(--mut);flex-wrap:wrap}
.st-t{font-variant-numeric:tabular-nums}
.st-left{flex:1}
.st-act{border:1px solid var(--line-2);background:none;color:var(--txt-2);
  font:inherit;font-size:12.5px;padding:5px 11px;border-radius:8px;cursor:pointer;
  text-decoration:none;transition:var(--t-fast)}
.st-act:hover{border-color:var(--acc);color:var(--txt)}
.st-act:disabled{opacity:.5;cursor:default}

/* Кому движение мешает — показываем то же самое, только неподвижно. */
@media (prefers-reduced-motion:reduce){
  .st-card,.st-skel,.st-dot,.st-wave i,.st-prog i::after{animation:none}
  .st-skel{background:var(--panel-2)}
  .st-prog i{transition:none}
}

/* На телефоне трёх колонок нет: настройки идут снизу, полотно сверху. */
@media (max-width:900px){
  body.studio .app{grid-template-columns:1fr}
  .st-panel{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;
    max-height:62dvh;border-left:0;border-top:1px solid var(--line);
    border-radius:18px 18px 0 0;box-shadow:0 -12px 40px -16px rgba(0,0,0,.6)}
  body.studio .st-canvas{padding-bottom:64dvh}
}

/* Полоска для тех, кто открыл сайт внутри Telegram. Не модальное окно:
   она сообщает, а не требует решения, и работать не мешает. */
.tg-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
  display:flex;gap:12px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line-2);border-radius:14px;
  padding:14px 14px 14px 16px;box-shadow:var(--shadow);
  max-width:520px;margin:0 auto;
  animation:tgBarВъехал .32s cubic-bezier(.16,.84,.28,1) both}
@keyframes tgBarВъехал{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tg-bar b{display:block;font-size:14px;margin-bottom:4px}
.tg-bar span{display:block;font-size:13px;line-height:1.5;color:var(--txt-2)}
.tg-bar-x{flex:none;border:0;background:none;color:var(--mut);cursor:pointer;
  padding:2px;line-height:0;border-radius:6px}
.tg-bar-x:hover{color:var(--txt)}
@media (prefers-reduced-motion:reduce){.tg-bar{animation:none}}

/* Окно с подарком за регистрацию. */
.gift-modal{max-width:400px;text-align:left}
.gift-date{font-size:11.5px;color:var(--mut);margin-bottom:8px}
.gift-modal h3{margin:0 0 8px}
.gift-modal .sub{margin:0 0 6px;line-height:1.55}
.gift-modal .sub b{color:var(--acc-text);font-weight:600}

/* Поле-приманка для автозаполнения. Chrome, увидев пароль без пары-логина,
   подставлял запомненную почту в первое текстовое поле страницы — то есть в
   поиск по истории. Прячем размером, а не display:none: скрытые показом поля
   браузер пропускает, и приманка не сработает. */
.uname-decoy{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  pointer-events:none}

/* Правый верх: тариф, баланс, «Купить» и аватар. */
.hdr-acc{display:flex;align-items:center;gap:8px}
.hdr-money{display:flex;align-items:center;gap:0;background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:3px 3px 3px 4px;
  font-size:13px;white-space:nowrap}
.hdr-plan{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--txt-2);background:var(--panel-2);border-radius:999px;padding:4px 8px}
.hdr-bal{font-weight:600;padding:0 10px;font-variant-numeric:tabular-nums}
.hdr-buy{border:0;background:none;color:var(--acc-text);cursor:pointer;
  font:600 13px var(--font);padding:5px 11px;border-radius:999px;transition:var(--t)}
.hdr-buy:hover{background:rgba(224,145,62,.14)}
.hdr-av{border:0;background:none;padding:0;cursor:pointer;border-radius:50%;
  width:34px;height:34px;flex:none;transition:var(--t);
  outline:2px solid transparent;outline-offset:2px}
.hdr-av:hover{outline-color:var(--line-2)}
.hdr-av img{width:34px;height:34px;border-radius:50%;display:block}
@media (max-width:620px){
  /* Баланс на телефоне видно всегда: новичок должен видеть, как тратится
     подарок, не лазая в меню. Жертвуем кнопкой темы и словом «Пополнить» —
     тап по числу ведёт туда же. */
  #themeTop{display:none}
  .hdr-buy{display:none}
  .hdr-money{font-size:12.5px;padding:3px 4px}
  .hdr-bal{padding:0 8px;cursor:pointer}
}

/* На витрине места меньше, чем в приложении: там шапка занята только
   кнопками, здесь ещё и разделами сайта. У вошедшего аватар выдавливал
   «Продолжить в чате» за край экрана, поэтому на телефоне его убираем —
   меню аккаунта остаётся в самом приложении, куда эта кнопка и ведёт. */
@media (max-width:620px){
  #navAv{display:none}
}

/* Меню аккаунта — всплывающая панель под тем, по чему нажали:
   по аватару в шапке или по карточке в боковой панели. */
.usermenu{position:fixed;z-index:70;width:290px;max-width:calc(100vw - 24px);
  background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:6px;box-shadow:0 18px 50px -14px rgba(0,0,0,.7);
  max-height:min(70vh,560px);overflow-y:auto;
  animation:umIn .14s cubic-bezier(.16,.84,.28,1)}
@keyframes umIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.usermenu{animation:none}}
.um-head{display:flex;gap:10px;align-items:center;padding:10px 10px 12px;
  border-bottom:1px solid var(--line);margin-bottom:6px}
.um-head img{width:32px;height:32px;border-radius:9px;flex:none}
.um-head b{display:block;font-size:13.5px;line-height:1.3}
.um-head span{display:block;font-size:11.5px;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.um-row{display:flex;align-items:center;gap:8px;width:100%;
  background:none;border:0;padding:9px 10px;border-radius:9px;cursor:pointer;
  color:var(--txt);font:400 13.5px var(--font);text-align:left;
  text-decoration:none;transition:var(--t)}
.um-row:hover{background:var(--panel-2)}
.um-row i{margin-left:auto;color:var(--mut);font-style:normal;font-size:15px}
.um-val{margin-left:auto;color:var(--txt-2);font-weight:600}
.um-badge{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;background:var(--line-2);color:var(--txt-2)}
.um-sep{height:1px;background:var(--line);margin:6px 4px}
.um-exit{color:#e57373}
.um-exit:hover{background:rgba(229,115,115,.1)}

/* Личная информация: карточка «кто вы» и два поля рядом. */
.who-card{display:flex;gap:12px;align-items:center;margin:6px 0 16px}
.who-card img{width:40px;height:40px;border-radius:11px}
.who-card b{display:block;font-size:14.5px}
.who-card span{display:block;font-size:12.5px;color:var(--mut)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}

/* Кошелёк: сумма, полоса состава и подписи под ней. */
.wallet{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px}
.w-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.w-l{font-size:12.5px;color:var(--txt-2)}
.w-n{font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-.02em;
  line-height:1.1;margin-top:2px}
.w-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;margin-top:18px;
  background:var(--line)}
.w-bar span{display:block;height:100%}
.w-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12.5px;
  color:var(--txt-2)}
.wl{display:inline-flex;align-items:center;gap:6px}
.wl i{width:8px;height:8px;border-radius:50%;display:block}
.wl b{color:var(--txt);font-weight:600}
.wl-out{margin-left:auto}

/* Группы в меню кабинета: без них девять пунктов подряд читались как свалка. */
.acc-grp{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);padding:16px 12px 6px}
.acc-grp:first-child{padding-top:8px}

/* Строка «ключ — значение» в безопасности. */
.sec-row{display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--line)}
.sec-row:last-child{border-bottom:none}
.sec-row .k{color:var(--txt-2);font-size:14px}
.sec-row .v{font-weight:500;font-size:14px}

/* Память: строка с фактом и кнопкой убрать. */
.mem-row{display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:12px 14px;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;margin-bottom:8px;font-size:14px;line-height:1.45}

/* Приглашения: поле со ссылкой и кнопкой рядом. */
.ref-row{display:flex;gap:8px;align-items:center}
.ref-row .inp{flex:1;min-width:0}

/* Настройки: выбор темы карточками, а не переключателем — видно, что берёшь. */
.set-block{margin-bottom:26px}
.set-label{display:block;font-size:12.5px;color:var(--txt-2);margin-bottom:9px}
.set-hint{font-size:12.5px;color:var(--mut);margin:9px 0 0;line-height:1.5}
.theme-pick{display:flex;gap:12px;flex-wrap:wrap}
.theme-pick button{background:none;border:0;padding:0;cursor:pointer;
  font:500 12.5px var(--font);color:var(--txt-2);display:flex;
  flex-direction:column;gap:7px;align-items:center;transition:var(--t)}
.theme-pick button.on{color:var(--txt)}
.tp{display:block;width:96px;height:62px;border-radius:9px;border:2px solid var(--line-2);
  transition:var(--t)}
.theme-pick button.on .tp{border-color:var(--acc)}
.tp-l{background:linear-gradient(160deg,#eef4fb 55%,#dbe6f4)}
.tp-d{background:linear-gradient(160deg,#161b25 55%,#0d1016)}

/* Шапка вкладки «Тарифы» в кабинете. */
.tarif-head h3{font-family:var(--display);font-size:19px;font-weight:600;margin:0 0 6px}
.tarif-head p{color:var(--txt-2);font-size:13.5px;margin:0;max-width:62ch;line-height:1.5}
#planBox .period{margin-top:16px}
.form-msg.ok{color:#69c495}

/* Пакеты пополнения. Сумма в рублях крупно: человек выбирает деньгами,
   а не кредитами, и переводить в уме не станет. */
.pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pkg{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  cursor:pointer;transition:var(--t);text-align:left;width:100%}
.pkg:hover{border-color:var(--acc);transform:translateY(-1px)}
.pkg[disabled]{opacity:.55;cursor:progress;transform:none}
.pkg .pkg-rub{font-size:20px;font-weight:700;font-family:var(--display)}
.pkg .pkg-what{font-size:12.5px;color:var(--txt-2);line-height:1.45}
.pkg .pkg-bonus{font-size:11.5px;font-weight:600;color:var(--acc-text)}
.pkg-note{font-size:12.5px;color:var(--txt-2);line-height:1.55;margin:10px 0 0}

/* Своя сумма пополнения. */
.own{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.own-l{display:block;font-size:12.5px;color:var(--txt-2);margin-bottom:8px}
.own-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.own-inp{position:relative;flex:1;min-width:150px}
.own-inp .inp{width:100%;padding-right:32px;font-size:16px;font-weight:600}
.own-inp .inp::-webkit-outer-spin-button,
.own-inp .inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.own-inp .inp[type=number]{-moz-appearance:textfield}
.own-cur{position:absolute;right:13px;top:50%;transform:translateY(-50%);
  color:var(--mut);font-size:15px;pointer-events:none}
.own-hint{font-size:12.5px;color:var(--mut);margin:9px 0 0;line-height:1.5}
.own-hint.ok{color:var(--txt-2)}
.own-hint.err{color:#f0908f}
.pkg-note.ok{color:var(--acc-text)}

/* ссылка внутри подсказки под строкой ввода */
.composer-hint .linkish{font-size:inherit;color:var(--acc-text);padding:0;
  text-decoration:underline;text-underline-offset:2px}
.composer-hint .linkish:hover{color:var(--acc)}

/* ---------- ЛИЧНЫЙ КАБИНЕТ ОТДЕЛЬНЫМ ЭКРАНОМ ---------- */

/* Раньше это было окно поверх чата: четыре вкладки в тесной коробке, и всё
   важное — ключи, расходы, удаление аккаунта — ютилось в ней. */
/* Кабинет — модальное окно поверх чата. Раньше это был глухой экран во
   весь браузер: человек шёл посмотреть баланс и терял из виду переписку,
   а «где я» становилось отдельным вопросом. Теперь чат виден позади. */
.acc-page{position:fixed;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;padding:26px;
  background:rgba(4,7,12,.6);backdrop-filter:blur(5px)}
.acc-page.open{display:flex;animation:accIn .16s ease}
@keyframes accIn{from{opacity:0}to{opacity:1}}
.acc-shell{width:min(1160px,100%);height:min(740px,calc(100dvh - 52px));
  background:var(--bg-2,var(--bg));border:1px solid var(--line);
  border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 24px 70px -20px rgba(0,0,0,.7);
  animation:accUp .2s cubic-bezier(.16,.84,.28,1)}
@keyframes accUp{from{transform:translateY(10px) scale(.99)}to{transform:none}}

/* На телефоне окно занимает всё: маленькая коробка на маленьком экране —
   это поля вокруг пустоты. */
@media (max-width:760px){
  .acc-page{padding:0;background:var(--bg);backdrop-filter:none}
  .acc-shell{width:100%;height:100dvh;border:0;border-radius:0;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .acc-page.open,.acc-shell{animation:none}
}
body.acc-open{overflow:hidden}

.acc-top{display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--line);min-height:60px;flex:none}
.acc-top-t{font-family:var(--display,inherit);font-weight:600;font-size:16px}

.acc-body{flex:1;min-height:0;display:grid;grid-template-columns:250px 1fr}

/* Левое меню: разделы видны все сразу, не надо угадывать, что за вкладкой. */
.acc-nav{border-right:1px solid var(--line);padding:16px 12px;display:flex;
  flex-direction:column;gap:6px;overflow-y:auto}
.acc-nav button{display:flex;align-items:center;gap:10px;width:100%;
  text-align:left;background:none;border:none;color:var(--txt-2);
  font:inherit;font-size:14px;padding:10px 12px;border-radius:10px;
  cursor:pointer;transition:var(--t-fast)}
.acc-nav button:hover{background:var(--panel);color:var(--txt)}
.acc-nav button.on{background:var(--panel-2);color:var(--txt);font-weight:600}
.acc-nav button svg{flex:none;opacity:.8}
.acc-nav button.on svg{color:var(--acc-text);opacity:1}
/* Выход. Прижат к низу столбца и отделён чертой: это не восьмая
   вкладка, а выход из аккаунта, и путать его с вкладками нельзя.
   Цвет приглушённый — действие есть, но звать к нему незачем. */
.acc-nav .acc-exit{margin-top:auto;color:var(--mut);
  border-top:1px solid var(--line);border-radius:0 0 10px 10px;
  padding-top:14px;margin-bottom:2px}
.acc-nav .acc-exit:hover{color:#e5484d;background:color-mix(in srgb,#e5484d 12%,transparent)}
.acc-nav .acc-exit:hover svg{color:#e5484d;opacity:1}

.acc-me{display:flex;align-items:center;gap:10px;padding:6px 12px 16px;
  margin-bottom:8px;border-bottom:1px solid var(--line)}
.acc-me .acc-av{width:34px;height:34px;border-radius:9px;flex:none}
.acc-who-b{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.acc-who-b b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-who-b span{font-size:11.5px;color:var(--mut)}

.acc-main{overflow-y:auto;padding:26px 30px 60px}
/* Ширину держим читаемой: во весь экран строки формы растягиваются
   на полтора метра и глаз теряет начало следующей. */
.acc-pane{display:none;max-width:720px}
.acc-pane.on{display:block}
/* Тарифы — исключение: там не строки формы, а четыре карточки в ряд,
   и 720 px зажимают их до двух колонок с пустотой справа. */
#paneTarif{max-width:1180px}

@media(max-width:820px){
  .acc-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .acc-nav{flex-direction:row;border-right:none;border-bottom:1px solid var(--line);
    overflow-x:auto;padding:10px 12px;gap:6px;scrollbar-width:none}
  .acc-nav::-webkit-scrollbar{display:none}
  .acc-nav button{flex:none;width:auto}
  .acc-nav button span{display:none}
  /* Столбец здесь горизонтальный: «прижать к низу» смысла не имеет,
     выход просто уходит в конец ряда, за последнюю вкладку. */
  .acc-nav .acc-exit{margin-top:0;margin-left:auto;border-top:0;
    border-left:1px solid var(--line);border-radius:10px;
    padding-top:10px;padding-left:14px}
  /* На узком экране карточка «кто вошёл» уезжает наверх, в шапку. */
  .acc-me{display:none}
  .acc-main{padding:20px 16px 48px}
}

/* ---------- БЛОКИ ВНУТРИ КАБИНЕТА ---------- */
.acc-block{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.acc-block-h{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:14px}
.acc-block h4{margin:0;font-size:15px;font-weight:600}
.seg.sm button{font-size:12px;padding:5px 10px}

/* ---------- ИСТОРИЯ ОПЕРАЦИЙ ---------- */
.tx{display:grid;grid-template-columns:74px 1fr auto auto;gap:12px;align-items:center;
  padding:10px 2px;border-bottom:1px solid var(--line);font-size:13px}
.tx:last-child{border-bottom:none}
.tx-w{color:var(--mut);font-size:12px;white-space:nowrap}
.tx-time{opacity:.65}
.tx-what{display:flex;flex-direction:column;gap:1px;min-width:0}
.tx-what b{font-weight:600;font-size:13px}
.tx-model{color:var(--mut);font-size:11.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tx-tok{color:var(--mut);font-size:11.5px;white-space:nowrap}
/* Знак и цвет вместе: по одному минусу перед числом направление
   считывается хуже, особенно когда строк много. */
.tx-sum{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.tx-sum.plus{color:var(--teal)}
.tx-sum.minus{color:var(--txt-2)}
.tx-more{margin-top:14px;text-align:center}
.tx-more button[hidden]{display:none}
@media(max-width:640px){
  .tx{grid-template-columns:1fr auto;gap:4px 10px}
  .tx-w{grid-column:1/2}
  .tx-sum{grid-column:2/3;grid-row:1/3}
  .tx-what{grid-column:1/2}
  .tx-tok{display:none}
}

/* ---------- ПРИМЕР ПОДКЛЮЧЕНИЯ ---------- */
.snip{position:relative;background:var(--code-bg);border:1px solid var(--line);
  border-radius:11px;overflow:hidden}
.snip pre{margin:0;padding:14px 46px 14px 14px;overflow-x:auto}
.snip code{font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;
  line-height:1.65;color:var(--txt-2);white-space:pre}
.snip .ci{position:absolute;top:8px;right:8px}

/* сводка в «Балансе» */
.bal-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.bs{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.bs-v{font-size:17px;font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.bs-k{font-size:11.5px;color:var(--mut)}
@media(max-width:640px){.bal-sum{grid-template-columns:1fr;gap:8px}
  .bs{flex-direction:row;align-items:baseline;justify-content:space-between}}

/* Блоки кода в статьях блога. Без прокрутки длинная формула выпирала за
   край и утаскивала вбок всю страницу на телефоне. */
.article pre,.post pre,article pre{max-width:100%;overflow-x:auto;
  background:var(--code-bg);border:1px solid var(--line);border-radius:10px;
  padding:13px 15px;margin:16px 0}
.article pre code,.post pre code,article pre code{
  font-family:var(--mono,ui-monospace,monospace);font-size:13px;line-height:1.6;
  color:var(--txt-2);white-space:pre;background:none;border:none;padding:0}
/* Контейнер статьи не должен растягиваться под содержимое: без min-width:0
   широкий блок кода раздвигает его и толкает страницу вбок. */
.article{min-width:0}
.article>*{max-width:100%}

/* ─── связка с Telegram в кабинете ───────────────────────────────────────── */
.tg-block{margin-bottom:26px}
.tg-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.tg-row .inp{max-width:190px;text-transform:uppercase;letter-spacing:.12em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.tg-or{margin-top:16px}
/* Привязан — состояние, а не действие: показываем спокойно, без кнопки. */
.tg-on{display:flex;align-items:center;gap:8px;font-weight:600}
.tg-on b{color:var(--acc)}

/* Вторая строка в подарке — что на эти токены можно сделать. Тише
   основной: это пояснение, а не сама новость. */
.gift-modal .gift-note{
  margin-top:8px; font-size:13px; color:var(--mut);
}


/* ── Картинки и таблицы в статьях блога ─────────────────────────────
   Раньше в статьях был только текст, поэтому подписей под картинками и
   таблиц в оформлении не существовало вовсе: вставленная таблица падала
   голыми строками. */
.article figure{margin:28px 0}
.article figure img{margin:0; width:100%; height:auto; display:block}
.article figcaption{
  margin-top:10px; font-size:14px; line-height:1.5; color:var(--mut);
  text-align:center; max-width:56ch; margin-left:auto; margin-right:auto;
}
/* Широкую таблицу на телефоне прокручиваем внутри её же рамки: иначе
   разъезжается вся страница. */
.article .tbl-wrap{
  overflow-x:auto; margin:24px 0; border:1px solid var(--line); border-radius:12px;
}
.article table{
  border-collapse:collapse; width:100%; min-width:520px; font-size:15px;
  font-variant-numeric:tabular-nums;
}
.article thead th{
  text-align:right; font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mut); padding:12px 14px;
  border-bottom:1px solid var(--line); background:var(--panel); white-space:nowrap;
}
.article thead th:first-child,
.article tbody td:first-child{text-align:left}
.article tbody td{
  padding:11px 14px; text-align:right; color:var(--txt-2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.article tbody tr:last-child td{border-bottom:0}
.article tbody td:first-child{white-space:normal}

/* Предупреждение о черновых настройках студии. Тон служебный, не
   тревожный: это не ошибка, а цена выбора, и решает человек сам. */
.st-warn{
  margin:0 0 9px; padding:9px 11px; border-radius:9px;
  font-size:12.5px; line-height:1.45; color:var(--txt-2);
  background:color-mix(in srgb,var(--acc) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 34%,var(--line));
}

/* ── Холст: результат кода рядом с перепиской ─────────────────────────
   Накладной панелью, а не колонкой в сетке. Сетка приложения уже держит
   боковую панель и студию; третья раскладка на тех же колонках означала бы
   три состояния body, которые надо не перепутать. Накладка ни от чего не
   зависит и одинаково ложится и в чате, и в студии. */
.cv{
  position:fixed; top:0; right:0; bottom:0; z-index:120;
  width:min(56vw, 900px);
  display:none; flex-direction:column;
  background:var(--bg); border-left:1px solid var(--line);
  box-shadow:-18px 0 50px -22px rgba(0,0,0,.6);
}
.cv.is-open{display:flex}

.cv-head{
  display:flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:10px 10px 10px 12px; border-bottom:1px solid var(--line);
}
.cv-tabs{display:flex; gap:2px; padding:3px; border-radius:10px;
  background:color-mix(in srgb,var(--txt) 8%,transparent)}
.cv-tab{
  padding:6px 13px; border:0; border-radius:8px; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:500;
  color:var(--txt-2); background:transparent;
}
.cv-tab.is-on{color:var(--txt); background:var(--panel)}
.cv-lang{
  margin-right:auto; padding-left:6px;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--mut);
}
.cv-act{
  padding:6px 11px; border-radius:9px; cursor:pointer;
  font:inherit; font-size:13px; color:var(--txt-2);
  border:1px solid var(--line); background:transparent; white-space:nowrap;
}
.cv-act:hover{border-color:var(--acc); color:var(--txt)}
.cv-x{
  width:30px; height:30px; flex:0 0 auto; border:0; border-radius:8px;
  cursor:pointer; padding:0; background:transparent; color:var(--txt-2);
  font-size:20px; line-height:1; display:grid; place-items:center;
}
.cv-x:hover{background:color-mix(in srgb,var(--txt) 9%,transparent); color:var(--txt)}

.cv-body{position:relative; flex:1 1 auto; min-height:0}
/* Белый фон у кадра намеренно: страницы обычно светлые, и показывать их на
   нашем тёмном — врать о том, как они выглядят. */
.cv-frame{position:absolute; inset:0; width:100%; height:100%; border:0; background:#fff}
.cv-code{
  position:absolute; inset:0; display:none; width:100%; height:100%;
  padding:14px 16px; border:0; resize:none; outline:0;
  font-family:var(--mono); font-size:13px; line-height:1.6;
  color:var(--txt); background:var(--code-bg); white-space:pre; tab-size:2;
}
.cv.show-code .cv-frame{visibility:hidden}
.cv.show-code .cv-code{display:block}

/* Кнопка показа в шапке блока кода — та же, что «копировать», рядом. */
.codebar [data-canvas]{margin-left:auto}
.codebar [data-copy]{margin-left:0}

@media(max-width:900px){
  /* На телефоне холст занимает экран: разглядывать вёрстку в щели
     шириной с ладонь бессмысленно. */
  .cv{width:auto; left:0; border-left:0}
  /* Крестик важнее всего остального: без клавиатуры Escape не нажать, и
     если его выдавит за край — холст не закрыть вообще. Поэтому убираем
     всё, что можно, а сам крестик запрещаем сжимать. */
  .cv-act[data-a="tab"]{display:none}
  .cv-lang{display:none}
  .cv-head{gap:6px; padding:9px 8px 9px 10px}
  .cv-act{padding:6px 9px; font-size:12.5px}
  .cv-tab{padding:6px 11px; font-size:13px}
  .cv-x{flex:0 0 30px; margin-left:auto}
}

/* Подпись автора в статьях блога. Ведёт на «о сервисе»: подпись, которую
   нельзя проверить, для поисковиков и читателя стоит немного.
   Точность правила выше, чем у «.article a», иначе подпись выглядит как
   обычная ссылка внутри текста и спорит с заголовком за внимание. */
.article .meta .author-line{color:var(--txt); font-weight:600;
  text-decoration:none; border-bottom:none}
.article .meta .author-line:hover{color:var(--acc-text)}

/* ─── Блог: список ────────────────────────────────────────────────────────── */
/* Обложка у каждой статьи. Соотношение задано через aspect-ratio, а не
   размерами картинки: иначе при загрузке страница дёргается, а это самый
   заметный вид «плохо сделано». */
.blog-filters{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px}
/* Фильтры блога. Привязаны к своему списку, а не к голому .chip: тот же
   класс носят кнопки под полем ввода в приложении, и правила отсюда их
   перебивали — кнопка модели теряла flex, и стрелка уезжала под текст,
   а длинное имя вроде «Nano Banana (Gemini 2.5 Flash Image)» переставало
   обрезаться и распирало строку. */
.blog-filters .chip{display:inline-block; padding:8px 16px; border:1px solid var(--line);
  border-radius:999px; font-size:14px; color:var(--txt); background:transparent;
  cursor:pointer; transition:background .15s, border-color .15s, color .15s}
.blog-filters .chip:hover{border-color:var(--acc)}
.blog-filters .chip[aria-pressed="true"]{background:var(--acc); border-color:var(--acc);
  color:var(--acc-ink); font-weight:600}

.cover{display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:14px; background:var(--code-bg)}

.popular{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:0 0 44px}
.pop-card{display:block; text-decoration:none; color:inherit}
.pop-card .cover{margin-bottom:12px}
.pop-card h3{margin:0; font-size:19px; line-height:1.35; font-weight:700}
.pop-card:hover h3{color:var(--acc-text)}

.post-card .cover{margin-bottom:14px}

/* ─── Блог: разворот статьи ───────────────────────────────────────────────── */
/* Две колонки: текст и липкая боковина. Боковина уезжает под текст на узких
   экранах — оглавление там всё равно длиннее самого экрана. */
.article-wrap{display:grid; grid-template-columns:minmax(0,1fr) 300px;
  gap:40px; align-items:start}
/* Элемент сетки по умолчанию не уже своего содержимого: широкая таблица
   внутри статьи распирала колонку, и страница ехала вбок на телефоне.
   Одного min-width:0 мало — ширина элемента всё равно считается по самому
   широкому содержимому. Явные 100% привязывают её к колонке, и таблица
   начинает прокручиваться внутри своей обёртки, как и задумано. */
.article-wrap > *{min-width:0; width:100%}
.article-wrap .side{position:sticky; top:84px; display:flex; flex-direction:column; gap:18px}
.side-box{border:1px solid var(--line); border-radius:16px; padding:18px 20px;
  background:var(--panel)}
.side-box .ttl{margin:0 0 12px; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mut); font-weight:700}
.side-toc a{display:block; padding:6px 0; font-size:14px; line-height:1.45;
  color:var(--mut); text-decoration:none; border:0}
.side-toc a:hover{color:var(--acc-text)}
.side-toc a.on{color:var(--txt); font-weight:600}
.side-cta{text-align:center}
.side-cta img{width:120px; height:120px; margin:0 auto 12px; display:block}
.side-cta b{display:block; font-size:17px; line-height:1.3; margin-bottom:8px}
.side-cta p{margin:0 0 16px; font-size:14px; line-height:1.5; color:var(--mut)}
.side-cta .btn{display:block; width:100%; text-align:center}

@media (max-width:1080px){
  .article-wrap{grid-template-columns:1fr}
  .article-wrap .side{position:static}
  .popular{grid-template-columns:1fr}
}

/* Заголовки разделов в блоге — по левому краю: список читают колонкой
   сверху вниз, и центрированная строка каждый раз уводит взгляд обратно
   к середине. Шапка страницы при этом остаётся по центру. */
.blog-index .sec-head{text-align:left; max-width:none; margin-left:0; margin-right:0}

/* ─── Инструменты в боковой колонке ───────────────────────────────────────── */
/* Пять кнопок на виду, остальное под «Все инструменты». Список из пятнадцати
   в узкой колонке не читается, а первые пять закрывают большинство приходов. */
.tools-box{margin:14px 0 0}
.tools-h{font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mut); font-weight:700; margin:0 0 8px; padding:0 2px}
.tools{display:flex; flex-direction:column; gap:4px}
.tools button, .tools-more{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:8px 10px; border:1px solid transparent; border-radius:10px;
  background:transparent; color:var(--txt); font:inherit; font-size:13.5px;
  cursor:pointer; transition:background .14s, border-color .14s;
}
.tools button:hover, .tools-more:hover{background:var(--user-bub); border-color:var(--line)}
.tools button.on{background:var(--user-bub); border-color:var(--acc)}
.tools button .t-ico{flex:0 0 22px; width:22px; height:22px; object-fit:contain}
/* Строка была серой и терялась — половину инструментов не находили. */
.tools-more{margin-top:2px; color:var(--txt-2); font-size:13px; font-weight:600}
.tools-more i{margin-left:auto; font-style:normal; opacity:.7}

/* Окно со всеми инструментами */
.tools-modal{max-width:640px; width:100%}
.tools-modal h3{margin:0 0 4px}
.modal-sub{margin:0 0 18px; color:var(--mut); font-size:14px}
.tools-all{display:grid; grid-template-columns:1fr 1fr; gap:10px;
  max-height:60vh; overflow-y:auto}
.tools-all button{
  display:block; text-align:left; padding:13px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--panel); color:var(--txt);
  font:inherit; cursor:pointer; transition:border-color .14s, background .14s;
}
.tools-all button:hover{border-color:var(--acc); background:var(--user-bub)}
.tools-all b{display:block; font-size:14.5px; margin-bottom:4px; font-weight:600}
.tools-all span{display:block; font-size:12.5px; line-height:1.45; color:var(--mut)}
@media (max-width:560px){ .tools-all{grid-template-columns:1fr} }

/* Плашка «работает инструмент» над полем ввода */
.tool-on{
  max-width:720px; margin:0 auto 8px;
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:12px; background:var(--user-bub);
  border:1px solid var(--acc); font-size:13.5px;
}
.tool-on b{font-weight:600}
.tool-on button{
  margin-left:auto; background:none; border:0; color:var(--mut);
  font:inherit; font-size:13px; cursor:pointer; padding:2px 4px;
}
.tool-on button:hover{color:var(--acc-text)}

/* ─── Панель инструмента ──────────────────────────────────────────────────── */
/* Форма под задачу вместо голого поля ввода: человек видит, что от него
   нужно, и не гадает, с чего начать. Ширина та же, что у ленты сообщений
   и поля ввода, — панель не должна жить своей жизнью посреди экрана. */
.empty.tool-mode{
  max-width:720px; width:100%; margin:0 auto;
  text-align:left; align-items:stretch; justify-content:flex-start;
  padding:34px 20px 200px; gap:0;   /* снизу — место под поле ввода: оно поверх */
}
.empty.tool-mode p{max-width:none}

.tp-head{display:flex; align-items:center; gap:15px; margin:0 0 8px}
.tp-ico{flex:0 0 52px; width:52px; height:52px; object-fit:contain}
.tp-head h2{margin:0; font-size:23px; letter-spacing:-.015em; line-height:1.2}
.tp-head p{margin:4px 0 0; color:var(--txt-2); font-size:14px; line-height:1.45}
.tp-greet{
  margin:16px 0 22px; color:var(--txt-2); font-size:14.5px; line-height:1.6;
  padding-left:67px;                 /* под текстом шапки, а не под значком */
}

/* Сама форма — карточкой: так видно, где заканчивается ввод и начинается чат. */
.tp-form{
  display:flex; flex-direction:column; gap:18px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:22px 24px; margin:0 0 16px;
}
.tp-row{display:flex; flex-direction:column; gap:7px; width:100%}
.tp-label{font-size:13px; font-weight:600; color:var(--txt); letter-spacing:.01em}
.tp-label .req{color:var(--acc-text); margin-left:2px}
.tp-in{
  width:100%; padding:11px 14px; border:1px solid var(--line-2); border-radius:10px;
  background:var(--bg); color:var(--txt); font:inherit; font-size:15px;
  outline:none; transition:border-color .14s, box-shadow .14s;
}
.tp-in:focus{border-color:var(--acc); box-shadow:0 0 0 3px rgba(224,145,62,.13)}
.tp-in::placeholder{color:var(--mut)}
/* Поле открывается по клику (защита от автоподстановки почты), но выглядеть
   заблокированным при этом не должно — человек об этой хитрости не знает. */
.tp-in[readonly]{cursor:text; opacity:1}
/* И браузерная жёлто-белая заливка автозаполнения, если он всё же влезет. */
.tp-in:-webkit-autofill,
.tp-in:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--txt);
  box-shadow:0 0 0 1000px var(--bg) inset;
  transition:background-color 9999s ease-in-out 0s;
}
textarea.tp-in{resize:vertical; min-height:84px; line-height:1.55}
select.tp-in{cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),
                   linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 18px) 51%, calc(100% - 13px) 51%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-right:38px}
/* Карусель карточек: кадры смотрят по одному и крупно. Сетка из пяти
   штук делает каждый размером с марку — по такой не понять, годится макет
   или нет. */
.cards-car{position:relative;margin-top:6px}
.cards-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:2px}
.cards-track::-webkit-scrollbar{display:none}
.card-slide{flex:0 0 min(340px,78%);scroll-snap-align:center;
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
  overflow:hidden}
.card-slide img{display:block;width:100%;height:auto}
.card-bar{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:8px 10px;font-size:12.5px;color:var(--mut)}
.card-num{font-variant-numeric:tabular-nums}
/* Просмотр картинки во весь экран. */
.shot-bg{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.86);
  display:flex;align-items:center;justify-content:center;padding:24px;
  cursor:zoom-out;animation:shotIn .12s ease-out}
@keyframes shotIn{from{opacity:0}to{opacity:1}}
.shot-img{max-width:min(1100px,94vw);max-height:88vh;border-radius:12px;
  cursor:default;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.shot-dl{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;
  border-radius:10px;background:var(--panel);color:var(--txt);
  border:1px solid var(--line);text-decoration:none;font-size:14px}
.shot-dl:hover{border-color:var(--line-2)}
.shot-x{position:fixed;top:14px;right:16px;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--line);background:var(--panel);
  color:var(--txt);font-size:24px;line-height:1;cursor:pointer}
.shot-x:hover{border-color:var(--line-2)}
.gen-img img,.card-slide img{cursor:zoom-in}

.card-live{margin-left:auto;background:none;border:1px solid var(--line);
  color:var(--txt-2);border-radius:8px;padding:3px 9px;font:inherit;
  font-size:12px;cursor:pointer;transition:var(--t-fast)}
.card-live:hover{border-color:var(--acc);color:var(--acc-text)}
.car-arr{position:absolute;top:calc(50% - 18px);width:34px;height:34px;
  border-radius:50%;border:1px solid var(--line);background:var(--panel);
  color:var(--txt);font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-soft);transition:var(--t-fast)}
.car-arr:hover{border-color:var(--line-2);background:var(--panel-2)}
.car-влево{left:-6px}
.car-вправо{right:-6px}
.cards-wait{display:flex;align-items:center;gap:8px;color:var(--mut);
  font-size:13px;margin-top:8px}

.tp-note{font-size:12.5px; color:var(--mut); line-height:1.4}

/* Переключатель мощности в форме инструмента. Тот же сегмент, что и в
   остальном интерфейсе, только прижат к полям и с пояснением снизу. */
.tp-seg{margin:0 0 6px}
.tp-seg button.locked{opacity:.45; cursor:not-allowed}
.tp-seg-note{margin-top:2px}
.tp-file{
  display:flex; align-items:center; gap:9px;
  padding:13px 14px; border:1px dashed var(--line-2); border-radius:10px;
  background:var(--bg); color:var(--mut); font:inherit; font-size:14.5px;
  cursor:pointer; text-align:left; width:100%;
  transition:border-color .14s, color .14s;
}
.tp-file:hover{border-color:var(--acc); color:var(--txt)}
.tp-file.ok{border-style:solid; border-color:var(--acc); color:var(--txt)}

/* Кнопка — последней строкой в самой форме, как в любой обычной форме.
   Прилипание ко дну я пробовал: кнопка всплывала посреди полей и
   перекрывала их — хуже, чем прокрутить до конца. */
.tp-go{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:4px; padding-top:18px; border-top:1px solid var(--line);
}
.tp-go .btn{width:auto; padding:12px 30px; font-size:15px}
.tp-price{color:var(--mut); font-size:13.5px; cursor:help;
  border-bottom:1px dotted var(--line-2)}
.tp-err{color:#e06a4e; font-size:13.5px}

@media (max-width:720px){
  .empty.tool-mode{padding:22px 14px 190px}
  .tp-form{padding:18px 16px; border-radius:14px}
  .tp-greet{padding-left:0}
  .tp-head{gap:12px}
  .tp-ico{flex:0 0 42px; width:42px; height:42px}
  .tp-head h2{font-size:20px}
}

/* Плашка «работает инструмент» — по ширине поля ввода, а не экрана. */
/* Карточки в окне — со значком */
.tools-all button{display:flex; gap:12px; align-items:flex-start}
.tm-ico{flex:0 0 40px; width:40px; height:40px; object-fit:contain; margin-top:1px}
.tm-txt{min-width:0}

/* Что можно сделать с готовым ответом инструмента. */
.tool-next{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 16px; border:1px solid var(--line); border-radius:14px;
  background:var(--panel); margin-top:4px;
}
.tn-h{font-size:13px; font-weight:600; color:var(--mut)}
/* Цена на кнопке «Дальше» — мельче и приглушённее подписи: это уточнение,
   а не второе название действия. */
.tn-p{margin-left:8px; font-size:12px; opacity:.75;
  font-variant-numeric:tabular-nums}

.tn-b{
  padding:9px 16px; border:1px solid var(--acc); border-radius:10px;
  background:transparent; color:var(--acc-text); font:inherit; font-size:14px;
  cursor:pointer; transition:background .14s;
}
.tn-b:hover:not(:disabled){background:var(--user-bub)}
.tn-b:disabled{opacity:.6; cursor:default}

/* Пока открыта форма инструмента, поле ввода прячем: человек не должен
   гадать, куда писать — в поле формы или вниз. Вернётся вместе с ответом. */
body.tool-form .composer{display:none}
body.tool-form .empty.tool-mode{padding-bottom:60px}

/* Собранный файл в переписке. Это конец пути инструмента: человек пришёл
   за презентацией, и ссылка на неё не должна выглядеть как сноска в
   тексте — она главное на экране. */
/* Селектор с .bubble не случайно: строкой 407 задан общий вид ссылки в
   пузыре, и без равной специфичности текст кнопки красился в тот же
   янтарь, что и её фон, — плашка выходила пустой. */
.bubble a.dl-file,
.dl-file{
  display:inline-flex; align-items:center; gap:9px;
  margin:10px 0 2px; padding:13px 20px 13px 17px;
  background:var(--acc); color:var(--acc-ink);
  border-radius:var(--radius-sm); border:1px solid transparent;
  font-weight:600; font-size:14.5px; text-decoration:none;
  box-shadow:var(--shadow-soft); transition:var(--t-fast);
  max-width:100%; word-break:break-word;
}
.bubble a.dl-file{color:var(--acc-ink); text-decoration:none}
.bubble a.dl-file:hover,
.dl-file:hover{background:var(--acc-2); color:var(--acc-ink); transform:translateY(-1px)}
.dl-file:active{transform:none}
.dl-file:focus-visible{outline:2px solid var(--txt); outline-offset:2px}

/* План презентации: список слайдов вместо машинной разметки, которой его
   пишет модель. Здесь человек проверяет структуру до сборки файла —
   у лидеров рынка это самый важный экран продукта, и правка плана стоит
   две секунды против переверстки десяти слайдов. */
/* Имя с приставкой не для красоты: класс .plan на сайте уже занят
   карточкой тарифа из plans.css, и первая версия этого блока унаследовала
   от неё display:grid на пунктах — текст сыпался по одной букве в строку. */
.dplan{display:flex; flex-direction:column; gap:2px; margin:2px 0 4px}
.dplan-h{font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--mut); font-weight:600; margin-bottom:8px}
.dplan-s{display:flex; gap:13px; padding:12px 0;
  border-top:1px solid var(--line)}
.dplan-s:first-of-type{border-top:none; padding-top:2px}
.dplan-n{flex:0 0 26px; height:26px; border-radius:50%;
  background:var(--panel-2); border:1px solid var(--line);
  color:var(--mut); font-size:12.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums; margin-top:1px}
.dplan-b{min-width:0; flex:1}
.dplan-t{font-weight:600; font-size:15.5px; line-height:1.35;
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.dplan-k{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--acc-text); border:1px solid var(--line-2);
  border-radius:20px; padding:2px 8px; font-weight:600; flex:0 0 auto}
.dplan-l{margin:7px 0 0; padding-left:17px; display:flex;
  flex-direction:column; gap:4px}
.dplan-l li{font-size:14px; line-height:1.45; color:var(--txt-2)}
.dplan-say{margin-top:9px; background:none; border:none; padding:0;
  color:var(--mut); font:inherit; font-size:12.5px; cursor:pointer;
  border-bottom:1px dotted var(--line-2)}
.dplan-say:hover{color:var(--acc-text)}
.dplan-say-t{margin-top:7px; font-size:13.5px; line-height:1.55;
  color:var(--txt-2); padding:10px 13px; background:var(--bg-2);
  border-radius:var(--radius-sm); border:1px solid var(--line)}
.dplan-f{margin-top:12px; padding-top:11px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--mut)}
@media (max-width:600px){
  .dplan-s{gap:10px}
  .dplan-t{font-size:14.5px}
}