/* =====================================================================
   VarFunGateway — деловая дизайн-система (редизайн 2026-09)
   Светлая тема по умолчанию, тёмная — html[data-theme="dark"].
   Один акцент, нейтральные серые, плоские карточки, никакого моушна:
   единственная анимация на сайте — 120 мс переход цвета на hover.
   ===================================================================== */

:root {
  --bg:        #ffffff;
  --bg-2:      #f5f6f8;       /* чередующиеся секции, шапки таблиц */
  --surface:   #ffffff;
  --surface-2: #f5f6f8;
  --surface-3: #eceef2;
  --border:    #e3e5ea;
  --border-2:  #cfd3da;
  --text:      #111318;
  --text-2:    #555b68;
  --text-3:    #8b909c;

  --accent:      #1f56e0;
  --accent-dark: #1846bd;
  --accent-soft: #edf2ff;
  --accent-line: #cbd8ff;
  --accent-text: #ffffff;

  --ok:      #158a44; --ok-bg:   #e9f7ee; --ok-line:   #c6ebd3;
  --warn:    #b7660c; --warn-bg: #fdf3e3; --warn-line: #f4dcb5;
  --bad:     #c62828; --bad-bg:  #fdecec; --bad-line:  #f5c6c6;

  --code-bg:   #0f1115;
  --code-text: #e8eaee;
  --code-k:    #8ab4ff;
  --code-s:    #9fe0b0;
  --code-c:    #7b8190;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --disp: var(--sans);

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(17,19,24,.04);
  --nav-h: 64px;
  --ease: ease;
}

:root[data-theme="dark"] {
  --bg:        #0f1115;
  --bg-2:      #14171d;
  --surface:   #161920;
  --surface-2: #1c2028;
  --surface-3: #242934;
  --border:    #262a33;
  --border-2:  #343945;
  --text:      #e8eaee;
  --text-2:    #a3a8b4;
  --text-3:    #6f7583;
  --accent:      #5b8cff;
  --accent-dark: #7aa2ff;
  --accent-soft: #1a2540;
  --accent-line: #2a3d6b;
  --accent-text: #0f1115;
  --ok-bg:   #12301d; --ok-line:   #1f4a2e; --ok:   #4fd37f;
  --warn-bg: #3a2a10; --warn-line: #5a4118; --warn: #f0b35a;
  --bad-bg:  #3a1616; --bad-line:  #5a2424; --bad:  #ff7b7b;
  --code-bg:   #0b0d11;
  --shadow: none;
}

/* ---- Reset ---------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 16px) }
[hidden] { display:none !important }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a { color:inherit; text-decoration:none }
a:hover { color:var(--accent) }
img,svg { max-width:100%; vertical-align:middle }
::selection { background:var(--accent-soft); color:var(--text) }
h1,h2,h3,h4 { margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.15; color:var(--text) }
h1 { font-size:clamp(32px,4.4vw,48px); letter-spacing:-.025em; line-height:1.08 }
h2 { font-size:clamp(24px,3vw,32px) }
h3 { font-size:17px; font-weight:600; letter-spacing:-.01em; line-height:1.3 }
h4 { font-size:15px; font-weight:600; letter-spacing:0 }
p { margin:0 0 12px }
p:last-child { margin-bottom:0 }
code:not(.code code) { font-family:var(--mono); font-size:.92em; background:var(--surface-2); border:1px solid var(--border); border-radius:4px; padding:1px 5px }
hr { border:none; border-top:1px solid var(--border); margin:24px 0 }

:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm) }
* { scrollbar-width:thin; scrollbar-color:var(--border-2) transparent }
::-webkit-scrollbar { width:8px; height:8px }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:4px }

/* ---- Layout + utilities --------------------------------------------- */
.wrap { max-width:1200px; margin:0 auto; padding:0 32px }
@media(max-width:720px){ .wrap { padding:0 20px } }
@media(max-width:400px){ .wrap { padding:0 16px } }
.narrow { max-width:820px }
.mono  { font-family:var(--mono) }
.small { font-size:13px }
.muted { color:var(--text-2) }
.faint { color:var(--text-3) }
.center { text-align:center }
.row { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end }
.row>* { flex:1; min-width:150px }
.stack { display:flex; flex-direction:column; gap:12px }
.hstack { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
/* длинная подпись рядом с иконкой — переносится абзацем, а не уезжает под иконку */
.hstack-text { flex:1 1 0; min-width:0 }
.between { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap }
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.link-u { color:var(--accent); border-bottom:1px solid var(--accent-line) }
.link-u:hover { border-color:var(--accent) }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:12px }
.num {
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-3); font-variant-numeric:tabular-nums;
}
.lead { font-size:18px; line-height:1.5; color:var(--text-2); max-width:56ch }
.lead.center { margin-left:auto; margin-right:auto; text-align:center }
.crumbs { display:flex; gap:8px; font-size:13px; color:var(--text-3); margin-bottom:16px; flex-wrap:wrap }
.crumbs a { color:var(--text-3) } .crumbs a:hover { color:var(--accent) }

/* Служебные элементы старой разметки (прогресс, зерно, шторка) — просто нет */
#progress,#grain,#cursor-glow,#intro,#totop,.foot-mark,.invert-mark,.strip { display:none }

/* ---- Header --------------------------------------------------------- */
header.nav {
  position:sticky; top:0; z-index:100;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.nav-in { display:flex; align-items:center; gap:12px; height:var(--nav-h) }
.logo { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--text); white-space:nowrap; flex:none }
.logo:hover { color:var(--text) }
.logo .mark { width:28px; height:28px; border-radius:7px; display:block }
.links { display:flex; align-items:center; gap:2px }
.link, .nav-dd > summary {
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 8px; border-radius:var(--r-md);
  font-size:14px; font-weight:500; color:var(--text-2); white-space:nowrap;
  transition:color .12s, background .12s; cursor:pointer;
}
.link:hover, .nav-dd > summary:hover { color:var(--text); background:var(--surface-2) }
.link.on { color:var(--accent) }
.tag-new { font-size:10px; font-weight:700; line-height:1; padding:3px 5px; border-radius:5px; background:var(--accent); color:var(--accent-text); text-transform:uppercase; letter-spacing:.04em }
.spacer { flex:1 }
.nav-auth { display:flex; gap:8px; align-items:center }
.nav-auth form { margin:0 }
.nav-toggle {
  display:none; width:40px; height:40px; border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--surface); color:var(--text);
  font-size:18px; cursor:pointer; align-items:center; justify-content:center;
}
.tg-card { display:block; color:var(--text) }
.tg-card:hover { color:var(--text); border-color:var(--text-3) }
.tg-card .cell-ico { background:#e6f3fc; color:#1d8fd6 }
:root[data-theme="dark"] .tg-card .cell-ico { background:#173042; color:#5fb7f0 }
/* Выпадающее меню «Возможности» — на <details>, без JS */
.nav-dd { position:relative }
.nav-dd > summary { list-style:none }
.nav-dd > summary::-webkit-details-marker { display:none }
.nav-dd > summary::after { content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); margin-left:2px; opacity:.7 }
.nav-dd[open] > summary { color:var(--text); background:var(--surface-2) }
.nav-dd-menu {
  position:absolute; top:calc(100% + 8px); left:0; z-index:110;
  min-width:280px; padding:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:0 12px 32px rgba(17,19,24,.10);
  display:grid; gap:2px;
}
.nav-dd-menu a { display:flex; flex-direction:column; gap:2px; padding:9px 12px; border-radius:var(--r-md); color:var(--text) }
.nav-dd-menu a:hover { background:var(--surface-2); color:var(--text) }
.nav-dd-menu b { font-size:14px; font-weight:600 }
.nav-dd-menu span { font-size:12.5px; color:var(--text-2) }
.theme-btn {
  width:36px; height:36px; border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); color:var(--text-2); cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition:background .12s, color .12s;
}
.theme-btn:hover { background:var(--surface-2); color:var(--text) }
.theme-btn-thumb { font-size:15px; line-height:1 }
.theme-btn .ico { width:17px; height:17px; stroke:currentColor }
.theme-btn .ico-moon { display:none }
:root[data-theme="dark"] .theme-btn .ico-sun { display:none }
:root[data-theme="dark"] .theme-btn .ico-moon { display:block }

.mobile-menu { display:none; border-top:1px solid var(--border); background:var(--surface) }
.mobile-menu.active { display:block; max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; overscroll-behavior:contain }
.mobile-links { display:flex; flex-direction:column; gap:4px; padding:12px 20px 18px }
.mobile-links .link { padding:10px 8px; font-size:15px }
.mobile-links .btn { margin-top:4px }
.mobile-links b { font-size:12px; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; padding:12px 8px 4px }
@media(max-width:1240px) {
  .links, .nav-auth { display:none }
  .nav-toggle { display:inline-flex }
  .nav-in { gap:12px }
}
body.menu-open { overflow:hidden }

/* ---- Buttons -------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px; border-radius:var(--r-md);
  border:1px solid var(--border-2); background:var(--surface); color:var(--text);
  font:inherit; font-size:14px; font-weight:500; line-height:1; white-space:nowrap;
  cursor:pointer; text-decoration:none; transition:background .12s, border-color .12s, color .12s;
}
.btn:hover { background:var(--surface-2); border-color:var(--text-3); color:var(--text) }
.btn:disabled { opacity:.5; cursor:not-allowed }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-text) }
.btn.primary:hover { background:var(--accent-dark); border-color:var(--accent-dark); color:var(--accent-text) }
.btn.ghost { border-color:transparent; background:transparent; color:var(--text-2) }
.btn.ghost:hover { background:var(--surface-2); color:var(--text) }
.btn.danger { color:var(--bad); border-color:var(--bad-line); background:var(--surface) }
.btn.danger:hover { background:var(--bad-bg); border-color:var(--bad) }
.btn.sm { height:34px; padding:0 12px; font-size:13px }
.btn.lg { height:46px; padding:0 22px; font-size:15px }
.btn.wide { width:100%; display:flex }
.btn.arrow::after { content:"→"; font-weight:400 }
.btn.is-loading { pointer-events:none; opacity:.7 }
.btn .ico { width:16px; height:16px; stroke:currentColor }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px }
.hero-actions.center { justify-content:center }

/* ---- Badges + chips ------------------------------------------------- */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:0 8px; border-radius:var(--r-sm);
  font-size:12px; font-weight:500; line-height:1;
  border:1px solid var(--border); color:var(--text-2); background:var(--surface);
  white-space:nowrap;
}
.badge .d { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none }
.badge.ok   { color:var(--ok);   background:var(--ok-bg);   border-color:var(--ok-line) }
.badge.warn { color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line) }
.badge.bad  { color:var(--bad);  background:var(--bad-bg);  border-color:var(--bad-line) }
.badge.blue { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line) }
.badge.tier { color:var(--text-2); background:var(--surface-2) }
.badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px }
.badges .badge { height:28px; padding:0 10px; font-size:12.5px }
.badges.center { justify-content:center }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 12px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--surface); color:var(--text-2);
  font:inherit; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s, color .12s;
}
.chip:hover { border-color:var(--text-3); color:var(--text) }
.chip.on { border-color:var(--accent); color:var(--accent); background:var(--accent-soft) }
.chip b { font-weight:500; color:var(--text-3) }
.chip.on b { color:var(--accent) }
.chip .glyph { display:none }

/* Монограмма провайдера — вместо логотипов сторонних компаний */
.ava {
  width:32px; height:32px; border-radius:7px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.02em;
  background:var(--surface-2); color:var(--text-2); border:1px solid var(--border);
}
.ava.lg { width:56px; height:56px; font-size:18px; border-radius:12px }
.ava.sm { width:24px; height:24px; font-size:9px; border-radius:6px }
/* логотип внутри плашки: цветной — картинкой, контурный — маской и красится
   в цвет текста, поэтому одинаково читается в обеих темах */
.ava .ava-img { width:74%; height:74%; object-fit:contain; display:block }
.ava .ava-ic {
  width:66%; height:66%; display:block; background:currentColor;
  /* путь к иконке задаётся inline-стилем mask-image на самом элементе:
     url() в inline-стиле считается от страницы, а url() внутри CSS-переменной —
     от style.css, из-за чего иконки уходили в static/static/… */
  -webkit-mask-position:center; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat;
  mask-position:center; mask-size:contain; mask-repeat:no-repeat;
}
.ava.lg .ava-img { width:66%; height:66% }
.ava.lg .ava-ic { width:58%; height:58% }
.ava.sm .ava-img { width:80%; height:80% }
.ava.sm .ava-ic { width:70%; height:70% }
.ava[data-p="OpenAI"]      { background:#e7f6f1; color:#0d7a5e; border-color:#bfe8d8 }
.ava[data-p="Anthropic"]   { background:#fbeee6; color:#a54d1d; border-color:#f2d3bf }
.ava[data-p="Google"]      { background:#e8f0fd; color:#2b5fbf; border-color:#c5d7f7 }
.ava[data-p="DeepSeek"]    { background:#e9edfe; color:#3a53c9; border-color:#c6cffb }
.ava[data-p="xAI"]         { background:#eceef2; color:#111318; border-color:#d3d6dc }
.ava[data-p="Qwen"]        { background:#f0e9fd; color:#6229c4; border-color:#d8c8f8 }
.ava[data-p="Moonshot AI"] { background:#e4f4f8; color:#0b6a85; border-color:#bfe2ec }
.ava[data-p="MiniMax"]     { background:#fde9ee; color:#b62a4d; border-color:#f6c5d1 }
.ava[data-p="Meta"]        { background:#e7f0fe; color:#1a5fc4; border-color:#c3d8fb }
.ava[data-p="Mistral AI"]  { background:#fef0e4; color:#c05f0e; border-color:#f9d5b6 }
.ava[data-p="NVIDIA"]      { background:#eef7e0; color:#4d7a0b; border-color:#d2e8ad }
.ava[data-p="Z.ai"]        { background:#e3f4f2; color:#0c6b62; border-color:#bde3de }
:root[data-theme="dark"] .ava[data-p] { background:var(--surface-2); border-color:var(--border-2); color:var(--text-2) }
/* тёмные логотипы (Baidu, Voyage, DeepSeek…) на тёмной плашке не видно —
   под них даём светлую подложку, как это делают витрины моделей */
:root[data-theme="dark"] .ava.ic-img { background:var(--surface-2) !important; border-color:var(--border-2) }

/* ---- Hero ----------------------------------------------------------- */
.hero { padding:80px 0 64px }
.hero .lead { margin-top:20px }
.hero.calm { text-align:center }
.hero.calm .wrap { max-width:760px }
.hero.calm h1 { max-width:20ch; margin:0 auto }
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center }
.hero-grid h1 { max-width:16ch; font-size:clamp(32px,3.9vw,46px) }
.hero-note { font-size:13px; color:var(--text-3); margin-top:14px }
@media(max-width:960px) { .hero-grid { grid-template-columns:minmax(0,1fr); gap:32px } .hero { padding:48px 0 40px } .hero-grid h1 { max-width:none } }

.works-with { border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:18px 0 }
.works-with .wrap { display:flex; align-items:center; gap:24px; flex-wrap:wrap }
.works-with .num { white-space:nowrap }
.works-with-list { display:flex; gap:20px; flex-wrap:wrap }
.works-with-list span { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--text-2) }

.stats { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin:32px 0 }
.stats > div { padding:18px 20px; border-right:1px solid var(--border); background:var(--surface) }
.stats > div:last-child { border-right:none }
.stats b { display:block; font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums }
.stats span { font-size:13px; color:var(--text-2) }
@media(max-width:800px) { .stats { grid-template-columns:repeat(2,1fr) } .stats > div:nth-child(2n) { border-right:none } .stats > div:nth-child(-n+2) { border-bottom:1px solid var(--border) } }

/* Карточки моделей (витрина каталога и главная) */
.model-card {
  display:flex; flex-direction:column; gap:14px; padding:18px; position:relative;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  color:var(--text); transition:border-color .12s, background .12s;
}
.model-card:hover { border-color:var(--text-3); color:var(--text) }
.mc-head { display:flex; align-items:flex-start; gap:12px; min-width:0; padding-right:74px }
.mc-name { min-width:0; flex:1 }
.mc-name b, .mc-name a b {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-family:var(--mono); font-size:13.5px; font-weight:600; line-height:1.3; overflow-wrap:anywhere;
}
.mc-sub { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:5px; font-size:12.5px; color:var(--text-3) }
.mc-name .badge { height:20px; padding:0 7px; font-size:11px; gap:5px }
.mc-name .badge .d { width:5px; height:5px }
.mc-desc { margin:0; font-size:13px; color:var(--text-2); min-height:36px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.mc-prices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; border-top:1px solid var(--border); padding-top:12px; margin-top:auto }
.mc-prices span { display:block; font-size:11.5px; color:var(--text-3) }
.mc-prices b { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums }
.mc-perf { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:-4px }
.mc-perf span { display:block; font-size:11.5px; color:var(--text-3) }
.mc-perf b { font-size:13px; font-weight:600; font-family:var(--mono); font-variant-numeric:tabular-nums }
.perf-bar { display:flex; gap:3px; margin-top:5px }
.perf-bar i { flex:1; height:3px; border-radius:2px; background:var(--border) }
.perf-bar i.on { background:var(--accent) }

/* ---- Каталог: избранное, сравнение, вид карточками ------------------ */
/* Звёздочка «в избранное» — кнопка для вошедших, ссылка на вход для гостей */
.fav-btn {
  width:32px; height:32px; flex:none; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); color:var(--text-3);
  transition:color .12s, border-color .12s, background .12s;
}
.fav-btn.sm { width:30px; height:30px; border-radius:var(--r-sm) }
.fav-btn:hover { color:#d98d0a; border-color:var(--border-2) }
.fav-btn .ico { width:16px; height:16px; fill:none }
.fav-btn.sm .ico { width:15px; height:15px }
.fav-btn.on { color:#d98d0a; border-color:#f0cf8a; background:#fff8e8 }
.fav-btn.on .ico { fill:currentColor }
:root[data-theme="dark"] .fav-btn.on { background:#3a2f12; border-color:#6b571f }
.fav-btn[disabled] { opacity:.5 }

/* галочка «к сравнению» */
.cmp { display:flex; align-items:center; width:16px; flex:none; margin:0; cursor:pointer }
.cmp input { width:16px; height:16px }
.row-tools { display:inline-flex; align-items:center; gap:8px }

/* панель сравнения внизу каталога */
.cmp-bar {
  position:sticky; bottom:16px; z-index:60; margin-top:16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 16px; border:1px solid var(--border-2); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:0 8px 28px rgba(17,19,24,.12);
}
:root[data-theme="dark"] .cmp-bar { box-shadow:none; background:var(--surface-2) }

/* переключатель «список / карточки» */
.view-toggle { display:inline-flex; border:1px solid var(--border-2); border-radius:var(--r-md); overflow:hidden; height:40px }
.view-toggle .vt { display:inline-flex; align-items:center; justify-content:center; width:42px; color:var(--text-3); border-right:1px solid var(--border) }
.view-toggle .vt:last-child { border-right:none }
.view-toggle .vt:hover { color:var(--text); background:var(--surface-2) }
.view-toggle .vt.on { color:var(--accent); background:var(--accent-soft) }
.view-toggle .ico { width:17px; height:17px }

/* плитки каталога */
.model-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
@media(max-width:1000px) { .model-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:680px) { .model-grid { grid-template-columns:minmax(0,1fr) } }
.mc-tools { position:absolute; top:12px; right:12px; display:flex; gap:6px; align-items:center; z-index:2 }
.mc-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:-4px }
.model-grid .mc-desc { min-height:36px }

/* таблица сравнения */
.cmp-table .cmp-label { color:var(--text-2); font-size:13.5px; width:220px; white-space:normal; font-weight:400 }
.cmp-table tbody td { vertical-align:top }
.cmp-table thead th { vertical-align:top; text-transform:none; letter-spacing:normal; font-size:14px }

/* Поиск по моделям: кнопка в шапке и панель под ней */
.search-panel {
  position:absolute; top:100%; left:0; right:0; z-index:115;
  padding:14px 0 16px; background:var(--surface);
  border-bottom:1px solid var(--border); box-shadow:0 16px 32px rgba(17,19,24,.08);
}
.nav-search { position:relative; width:100% }
.nav-search input {
  height:44px; padding-left:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238b909c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:12px center;
}
.nav-search-dd {
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:120;
  padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:0 12px 32px rgba(17,19,24,.10); display:grid; gap:2px; max-height:52vh; overflow:auto;
}
.nav-search-dd a.sug { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:9px 11px; border-radius:var(--r-md); color:var(--text) }
.nav-search-dd a.sug:hover, .nav-search-dd a.sug.on { background:var(--surface-2); color:var(--text) }
.nav-search-dd .sug-id { font-family:var(--mono); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.nav-search-dd .sug-meta { font-size:12px; color:var(--text-3); flex:none }
.mobile-menu .nav-search input { height:40px }
@media(max-width:1240px) { #searchToggle { display:none } .search-panel { display:none } }

/* ---- Sections ------------------------------------------------------- */
.sec { padding-block:72px }
.sec.alt { background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.sec.tight { padding-block:40px }
.sec-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:32px; flex-wrap:wrap }
.sec-head > div { max-width:680px }
.sec h2 { margin:0 }
.sec .sub, .sub { color:var(--text-2); margin:10px 0 0; font-size:16px; max-width:64ch }
.sec-head .num { margin-bottom:10px }
@media(max-width:600px) { .sec { padding-block:44px } .sec-head { margin-bottom:22px } }

/* ---- Grid + cards --------------------------------------------------- */
.grid { display:grid; gap:0 }
.grid.gap { gap:16px }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)) }
.g3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
.g4 { grid-template-columns:repeat(4,minmax(0,1fr)) }
@media(max-width:960px) { .g4 { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:760px) { .g2,.g3,.g4 { grid-template-columns:minmax(0,1fr) } }
/* Плотная сетка ячеек с общими границами (как таблица преимуществ) */
.grid:not(.gap) { border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--border); gap:1px }
.grid:not(.gap) > * { background:var(--surface) }
.grid:not(.gap):empty { display:none }

.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:24px; position:relative;
  box-shadow:var(--shadow);
}
.card.flush { padding:0; overflow:hidden }
.card > .card-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 20px; border-bottom:1px solid var(--border) }
.card-title { font-size:16px; font-weight:600; letter-spacing:-.01em; margin:0 }
.card h3 { margin-bottom:8px }
.card .num + h3 { margin-top:6px }
.card table { min-width:0 }
.card.scroll { overflow-x:auto }
.cell { padding:26px 24px; border:none }
.cell h3 { margin:12px 0 6px; font-size:16px }
.cell p { color:var(--text-2); margin:0; font-size:14px }
.cell-ico, .ico-box {
  width:36px; height:36px; border-radius:var(--r-md);
  background:var(--accent-soft); color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
}
.ico { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none }
.ico.ok { color:var(--ok); width:18px; height:18px } .ico.warn { color:var(--warn) } .ico.bad { color:var(--bad) } .ico.accent { color:var(--accent) }
.badge .ico { width:14px; height:14px }
/* способность модели (аудио на вход / голосовой ответ) — строкой в описании, не бейдж-статус */
.io-badge { display:inline-flex; align-items:center; gap:3px; color:var(--accent); white-space:nowrap }
.io-badge .ico { width:13px; height:13px; stroke-width:2 }
.cell-ico .ico { width:20px; height:20px }
.flowline { }
.cell .num { margin-top:14px }
.cell .cell-ico + .num { margin-top:14px }

/* Плитки-показатели (кабинет, статус, админка) */
.tile { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; display:flex; flex-direction:column; gap:4px }
.tile .t-label { font-size:13px; color:var(--text-2) }
.tile .t-value { font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.15; font-variant-numeric:tabular-nums }
.tile .t-note { font-size:13px; color:var(--text-3) }
.kpi { padding:18px 20px; background:var(--surface) }
.kpi b { display:block; font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums }
.kpi span { font-size:13px; color:var(--text-2) }
.bar-line { height:6px; background:var(--surface-3); border-radius:3px; overflow:hidden }
.bar-line > i { display:block; height:100%; background:var(--accent); border-radius:3px }
.bar-line.ok > i { background:var(--ok) } .bar-line.warn > i { background:var(--warn) } .bar-line.bad > i { background:var(--bad) }

/* ---- Code ----------------------------------------------------------- */
.code {
  background:var(--code-bg); color:var(--code-text);
  border-radius:var(--r-lg); padding:18px 20px;
  font-family:var(--mono); font-size:13px; line-height:1.65;
  overflow-x:auto; white-space:pre; tab-size:2; position:relative;
  border:1px solid transparent;
}
:root[data-theme="dark"] .code { border-color:var(--border) }
@media(max-width:720px) { .code { font-size:12px; white-space:pre-wrap; word-break:break-word } }
.code .c { color:var(--code-c) }
.code .k { color:var(--code-k); font-weight:500 }
.code .s { color:var(--code-s) }
.code .f { color:var(--code-text) }
.code.win { border-radius:var(--r-lg) }
.code:has(.copy),.code.hascopy { padding-top:44px }
.copy {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#c9cdd6;
  font:inherit; font-family:var(--sans); font-size:12px; font-weight:500;
  padding:5px 10px; border-radius:var(--r-sm); cursor:pointer; line-height:1.4; white-space:nowrap;
  transition:background .12s, color .12s;
}
.code .copy,.code.hascopy .copy { position:absolute; top:10px; right:10px }
.copy+.copy { margin-left:8px }
.copy:hover { background:rgba(255,255,255,.16); color:#fff }
.copy.done { color:#9fe0b0 }
.keybox .copy, .card .copy:not(.code .copy) { background:var(--surface); border-color:var(--border-2); color:var(--text-2) }
.keybox .copy:hover { background:var(--surface-2); color:var(--text) }
.code-card { border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface) }
.code-card .codebar { margin:0; padding:0 8px; background:var(--bg-2); border-bottom:1px solid var(--border) }
.code-card .code { border-radius:0; border:none }

.codebar { display:flex; gap:0; margin-bottom:16px; border-bottom:1px solid var(--border); flex-wrap:wrap }
.tab {
  padding:10px 14px; font-size:13.5px; font-weight:500; color:var(--text-2);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; border-top:0; border-left:0; border-right:0; font-family:inherit;
  transition:color .12s, border-color .12s;
}
.tab:hover { color:var(--text) }
.tab.on { color:var(--text); border-bottom-color:var(--accent) }

/* ---- Tables --------------------------------------------------------- */
table { width:100%; border-collapse:collapse; font-size:14px }
th {
  text-align:left; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-3); padding:10px 14px; border-bottom:1px solid var(--border); background:var(--bg-2);
  white-space:nowrap;
}
td { padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle }
tr:last-child td { border-bottom:none }
tbody tr:hover td { background:var(--surface-2) }
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface) }
.table-wrap table { min-width:640px }
.table-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; background:var(--bg-2); border-top:1px solid var(--border); font-size:13px; color:var(--text-2); flex-wrap:wrap }
td.r, th.r { text-align:right }
.err-table td:first-child { font-family:var(--mono); color:var(--accent); font-weight:600; width:90px }

/* Каталог моделей */
.model {
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-bottom:1px solid var(--border); background:var(--surface);
}
.model:last-child { border-bottom:none }
.model:hover { background:var(--surface-2) }
.model .meta { flex:1; min-width:0 }
.model .name { font-family:var(--mono); font-size:13.5px; font-weight:500; word-break:break-all; color:var(--text) }
.model .name a:hover { color:var(--accent) }
.model .sub { font-size:12.5px; color:var(--text-3); margin-top:2px }
.model .cols { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end }
.model-list { border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden }
.model-head { background:var(--bg-2); padding:10px 18px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3) }
.model-head:hover { background:var(--bg-2) }
.model .cat-cols { display:grid; grid-template-columns:76px 96px 96px 130px 150px; gap:10px; align-items:center; flex:none; justify-content:start }
.cat-col { font-size:13px; white-space:nowrap }
.cat-col.act { text-align:right }
@media(max-width:1000px) { .model .cat-cols { grid-template-columns:96px 130px } .cat-col:nth-child(1), .cat-col:nth-child(3), .cat-col.act { display:none } .cat-cols .cat-col[style*="span 2"] { grid-column:span 1 } }
/* телефон: цены и статус — второй строкой под названием, с подписями вместо шапки таблицы */
@media(max-width:600px) {
  .model-head { display:none }
  .model { flex-wrap:wrap; gap:8px 12px; padding:12px 14px }
  .model .name { word-break:normal; overflow-wrap:anywhere }
  .model .sub { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
  .model .cat-cols { display:flex; flex-wrap:wrap; flex:1 1 100%; gap:6px 14px; padding-left:28px }
  .model .cat-cols .cat-col { display:inline-flex; align-items:center; gap:5px }
  .model .cat-cols .cat-col.act { display:none }
  .cat-col[data-l]::before { content:attr(data-l); font:12px var(--sans); color:var(--text-3) }
  .catalog-filters select { min-width:0; flex:1 1 auto }   /* сколько влезает в ряд, без обрезанных подписей */
}
.catalog-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 16px }
.catalog-filters input, .catalog-filters select { width:auto; min-width:160px }
.catalog-filters input[type="search"], .catalog-filters input[type="text"] { min-width:240px; flex:1 }
/* Тип модели — вкладками, как в витринах моделей: видно, сколько чего есть */
.cat-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin:0 0 18px; overflow-x:auto; scrollbar-width:none }
.cat-tabs::-webkit-scrollbar { display:none }
.cat-tab {
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; margin-bottom:-1px;
  font-size:14px; font-weight:500; color:var(--text-2); white-space:nowrap;
  border-bottom:2px solid transparent; transition:color .12s, border-color .12s;
}
.cat-tab:hover { color:var(--text) }
.cat-tab.on { color:var(--text); border-bottom-color:var(--accent) }
.cat-tab b { font-size:12px; font-weight:600; color:var(--text-3); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-pill); padding:1px 8px; font-variant-numeric:tabular-nums }
.cat-tab.on b { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line) }
/* Постраничный вывод каталога */
.pager { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:20px }
.pager a, .pager > span {
  min-width:36px; height:36px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface);
  font-size:13.5px; color:var(--text-2); font-variant-numeric:tabular-nums;
}
.pager a:hover { border-color:var(--text-3); color:var(--text) }
.pager .on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600 }
.pager .gap { border:none; background:none; color:var(--text-3) }
.pager .info { border:none; background:none; color:var(--text-3); margin-right:auto }
.facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--border); gap:1px }
.facts > div { background:var(--surface); padding:14px 18px; display:flex; flex-direction:column; gap:3px }
.facts .f-label { font-size:12.5px; color:var(--text-3) }
.facts .f-value { font-size:15px; font-weight:600 }
.facts-2 { grid-template-columns:repeat(2,minmax(0,1fr)) }
@media(max-width:760px) { .facts { grid-template-columns:repeat(2,minmax(0,1fr)) } }
.uptime { display:flex; gap:3px; height:28px; align-items:flex-end }
.uptime i { flex:1; height:100%; border-radius:2px; background:var(--ok) }
.uptime i.warn { background:var(--warn) } .uptime i.bad { background:var(--bad) } .uptime i.none { background:var(--surface-3) }

/* ---- Forms ---------------------------------------------------------- */
label { display:block; font-size:13px; font-weight:500; color:var(--text-2); margin-bottom:6px }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea {
  width:100%; height:40px; padding:0 12px;
  border:1px solid var(--border-2); border-radius:var(--r-md);
  font:inherit; font-size:14px; color:var(--text); background:var(--surface);
  transition:border-color .12s, box-shadow .12s; -webkit-appearance:none; appearance:none;
}
textarea { height:auto; min-height:96px; padding:10px 12px; line-height:1.5; resize:vertical }
select { padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b909c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center }
select[multiple] { background-image:none; height:auto; padding:6px }
select[multiple] option { padding:6px 8px; border-radius:4px }
input:not([type="checkbox"]):not([type="radio"]):hover,select:hover,textarea:hover { border-color:var(--text-3) }
input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
input::placeholder, textarea::placeholder { color:var(--text-3) }
input[type="checkbox"],input[type="radio"] { width:16px; height:16px; min-width:16px; margin:0; accent-color:var(--accent); cursor:pointer }
input[type="range"] { width:100%; accent-color:var(--accent) }
.field { margin-bottom:16px }
.field .hint { font-size:12.5px; color:var(--text-3); margin-top:6px; background:none; border:none; padding:0 }
.check { display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--text); font-weight:400; cursor:pointer; margin-bottom:0 }
.check input { width:auto }
.input-group { display:flex; gap:8px; align-items:center }
.input-group > * { min-width:0 }
.input-group .btn { flex:none }
.seg { display:inline-flex; border:1px solid var(--border-2); border-radius:var(--r-md); overflow:hidden }
.seg > * { padding:8px 14px; font-size:13.5px; font-weight:500; color:var(--text-2); background:var(--surface); cursor:pointer; border:none; border-right:1px solid var(--border); font-family:inherit }
.seg > *:last-child { border-right:none }
.seg > .on { background:var(--accent-soft); color:var(--accent) }

/* ---- Alerts, keybox, tabs, panel ----------------------------------- */
.alert {
  padding:14px 16px; border-radius:var(--r-lg); font-size:14px; margin-bottom:20px;
  border:1px solid var(--border); background:var(--surface);
  display:flex; gap:12px; align-items:flex-start;
}
.alert.ok   { border-color:var(--ok-line);   background:var(--ok-bg);   color:var(--text) }
.alert.err  { border-color:var(--bad-line);  background:var(--bad-bg);  color:var(--text) }
.alert.warn { border-color:var(--warn-line); background:var(--warn-bg); color:var(--text) }
.alert.info { border-color:var(--accent-line); background:var(--accent-soft); color:var(--text) }
.alert a { color:var(--accent); border-bottom:1px solid var(--accent-line) }
.ov-self-grant { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px }
.ov-self-grant input { width:64px; height:30px; padding:4px 8px; font-size:12px }
.link-btn { border:0; background:none; padding:0; font:inherit; color:var(--accent); cursor:pointer; border-bottom:1px solid var(--accent-line) }
.keybox {
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--border-2);
  border-radius:var(--r-md); padding:12px 14px;
  font-family:var(--mono); font-size:13px; overflow-wrap:anywhere; line-height:1.5; color:var(--text);
}
.keybox .copy { position:static; margin-left:auto; flex:none }
.tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:24px; flex-wrap:wrap }
.tabs a { padding:10px 14px; font-size:13.5px; font-weight:500; color:var(--text-2); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .12s, border-color .12s }
.tabs a:hover { color:var(--text) }
.tabs a.on { color:var(--text); border-bottom-color:var(--accent) }
.panel { max-width:440px; margin:0 auto; padding:64px 0 }
.panel h2 { margin:0 0 8px }
.divider { height:1px; background:var(--border); border:none; margin:0 }
.bars .bar { transition:none }
.dashlinks { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px }
#toast {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(8px);
  background:var(--text); color:var(--bg); padding:10px 16px; border-radius:var(--r-md);
  font-size:13.5px; font-weight:500; opacity:0; pointer-events:none; z-index:300;
  transition:opacity .15s, transform .15s; display:flex; gap:8px; align-items:center;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0) }
#toast i { display:none }

/* ---- Rings (устаревшее, кабинет теперь на плитках) ------------------ */
.rings { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media(max-width:820px) { .rings { grid-template-columns:minmax(0,1fr) } }
.ring-card { text-align:center; padding:20px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface) }
.ring { width:120px; aspect-ratio:1; margin:0 auto 12px; position:relative }
.ring .track { stroke:var(--surface-3) }
.ring .prog { stroke:var(--accent); stroke-dashoffset:var(--off,402.1) }
.ring .val { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center }
.ring .val b { font-size:20px; letter-spacing:-.02em }
.ring .val span { font-size:11px; color:var(--text-3) }

/* ---- Кабинет: боковое меню + контент ------------------------------- */
.dash { display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; align-items:start; padding-top:32px; padding-bottom:72px }
.dash-side { position:sticky; top:calc(var(--nav-h) + 20px); display:flex; flex-direction:column; gap:2px; padding:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg) }
.dash-side a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-md); color:var(--text-2); font-size:14px; font-weight:500 }
.dash-side a:hover { background:var(--surface-2); color:var(--text) }
.dash-side a.on { background:var(--accent-soft); color:var(--accent) }
.dash-side .ico { width:18px; height:18px }
.dash-side hr { margin:6px 8px }
.dash-main { display:flex; flex-direction:column; gap:20px; min-width:0 }
.dash-head { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap }
.dash-head h1 { font-size:28px }
.tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
@media(max-width:1040px) { .tiles { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:900px) { .dash { grid-template-columns:minmax(0,1fr); gap:20px } .dash-side { position:static; flex-direction:row; flex-wrap:wrap } }
@media(max-width:520px) { .tiles { grid-template-columns:minmax(0,1fr) } }
.bars { display:flex; align-items:flex-end; gap:6px; height:140px }
.bars > div { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; min-width:0 }
.bars .bar { width:100%; max-width:30px; border-radius:3px 3px 0 0; background:var(--accent); opacity:.6; min-height:2px }
.bars > div:last-child .bar { opacity:1 }
.bars .bar-label { font-size:10px; color:var(--text-3); white-space:nowrap }
.list { display:flex; flex-direction:column }
.list > div { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--border); font-size:14px }
.list > div:first-child { border-top:none; padding-top:0 }

/* ---- Документация: боковая навигация ------------------------------- */
.docs { display:grid; grid-template-columns:240px minmax(0,1fr); gap:48px; align-items:start; padding-top:32px; padding-bottom:72px }
.docs-side { position:sticky; top:calc(var(--nav-h) + 20px); display:flex; flex-direction:column; gap:2px }
.docs-side b { font-size:12px; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; padding:6px 12px 8px }
.docs-side a { display:block; padding:7px 12px; border-radius:var(--r-md); color:var(--text-2); font-size:14px; font-weight:500 }
.docs-side a:hover { background:var(--surface-2); color:var(--text) }
.docs-side a.on { background:var(--accent-soft); color:var(--accent) }
.docs-main { display:flex; flex-direction:column; gap:40px; max-width:860px; min-width:0 }
.docs-main section { scroll-margin-top:calc(var(--nav-h) + 20px) }
.docs-main h2 { font-size:24px; margin-bottom:12px }
.docs-main h3 { margin:18px 0 8px }
.docs-main p { color:var(--text-2); font-size:15px }
.docs-main .code { margin:12px 0 }
.docs-main ul, .docs-main ol { color:var(--text-2); padding-left:22px; margin:0 0 12px }
.docs-main li { margin:4px 0 }
.docs-main table { font-size:14px }
.note { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:var(--r-lg); font-size:14px }
.note .ico { color:var(--accent); width:20px; height:20px; margin-top:1px }
.note p { margin:0; color:var(--text) }
@media(max-width:900px) { .docs { grid-template-columns:minmax(0,1fr); gap:24px } .docs-side { position:static; flex-direction:row; flex-wrap:wrap } .docs-side b { width:100% } }

.steps-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin-bottom:32px; background:var(--border); gap:1px }
.step-card { padding:24px; position:relative; background:var(--surface) }
.step-num { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin:12px 0 8px; display:block }
.step-card h4 { font-size:16px; margin:0 0 6px }
.step-card p { color:var(--text-2); font-size:14px; margin:0 }
.step-card .cell-ico { margin-bottom:0 }
.step-arrow { display:none }
@media(max-width:700px) { .steps-row { grid-template-columns:minmax(0,1fr) } }
.client-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 22px; margin-bottom:16px }
.client-card-head { display:flex; align-items:center; gap:12px; margin-bottom:12px }
.client-icon { width:36px; height:36px; border-radius:var(--r-md); background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; flex-shrink:0 }
.client-card-head h4 { font-size:15px; margin:0 }
.client-card-head p { font-size:13px; color:var(--text-2); margin:2px 0 0 }
.mini-steps { display:flex; flex-direction:column; gap:6px; margin-top:8px }
.mini-step { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--text-2) }
.mini-step b { flex:none; width:20px; height:20px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:11px; display:inline-flex; align-items:center; justify-content:center; font-weight:600 }

/* ---- Цены / чекаут -------------------------------------------------- */
.price-hero { display:flex; align-items:baseline; gap:10px; margin:8px 0 12px }
.price-hero b { font-size:56px; font-weight:700; letter-spacing:-.03em; line-height:1 }
.price-hero span { font-size:18px; color:var(--text-2) }
.checkout-price { font-size:40px; font-weight:700; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums }
.pay-options { display:flex; flex-direction:column; gap:10px; margin-bottom:8px }
.pay-option, .wiz-opt {
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--border-2); border-radius:var(--r-md);
  background:var(--surface); padding:12px 14px; cursor:pointer;
  font-size:14px; font-weight:400; color:var(--text); margin-bottom:0;
  transition:border-color .12s, background .12s;
}
.pay-option:hover, .wiz-opt:hover { border-color:var(--text-3) }
.pay-option input, .wiz-opt input { width:auto; margin:0; accent-color:var(--accent) }
.pay-option span { font-size:14px; font-weight:500 }
.pay-option:has(input:checked), .wiz-opt:has(input:checked) { border-color:var(--accent); background:var(--accent-soft) }
.preset { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px }
.preset label { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border:1px solid var(--border-2); border-radius:var(--r-md); font-size:13.5px; font-weight:500; color:var(--text-2); cursor:pointer; margin:0; background:var(--surface) }
.preset label:has(input:checked) { border-color:var(--accent); color:var(--accent); background:var(--accent-soft) }
.preset input { width:auto; margin:0 }
.total { display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; border-top:1px solid var(--border); margin-top:6px }
.total b { font-size:28px; font-weight:700; letter-spacing:-.02em }
.plan { padding:24px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface) }
.plan .tag { font-size:12px; color:var(--text-3) }
.plan .price { font-size:32px; font-weight:700; letter-spacing:-.02em; margin:8px 0 }
.plan ul { list-style:none; padding:0; margin:12px 0 0 }
.plan li { display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid var(--border); font-size:14px }

/* ---- FAQ (details/summary) ------------------------------------------ */
.faq { border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface) }
.faq details { border-top:1px solid var(--border) }
.faq details:first-child { border-top:none }
.faq summary { list-style:none; cursor:pointer; padding:16px 20px; font-weight:600; font-size:15px; display:flex; justify-content:space-between; gap:16px; align-items:center }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:"+"; color:var(--text-3); font-size:18px; font-weight:400; flex:none }
.faq details[open] summary::after { content:"–" }
.faq details[open] summary { color:var(--accent) }
.faq details p { padding:0 20px 16px; margin:0; color:var(--text-2); font-size:14.5px; max-width:72ch }

/* ---- Мастер (админка, протоколы) ----------------------------------- */
.wiz-step { padding:18px 0; border-top:1px solid var(--border) }
.wiz-step:first-of-type { border-top:none; padding-top:6px }
.wiz-head { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px }
.wiz-head b { display:block; font-size:15px; margin-bottom:2px }
.wiz-head .muted { display:block; max-width:64ch }
.wiz-n { flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--accent-text); font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center }
.wiz-options { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px }
.wiz-opt { flex:1 1 200px; align-items:flex-start }
.wiz-opt.sm { flex:0 1 auto; padding:9px 12px }
.wiz-opt input { margin-top:3px; flex:0 0 auto }
.wiz-opt span b { display:block; font-size:14px; font-weight:500 }
.wiz-opt span small { display:block; color:var(--text-2); font-size:12.5px; margin-top:2px }
.wiz-foot { display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--border) }
.wiz-foot .btn { margin-left:auto }
.wiz .steps-row { margin-bottom:0 }

/* ---- Инверт-блок (CTA внизу страниц) ------------------------------- */
.invert { padding:0 0 72px }
.invert .wrap > .cta-box, .cta-box {
  background:var(--text); color:var(--bg); border-radius:var(--r-xl); padding:48px;
  display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;
}
.cta-box h2 { color:inherit; margin:0 0 8px }
.cta-box p { color:inherit; opacity:.72; margin:0; max-width:56ch; font-size:16px }
.cta-box .hero-actions { margin:0 }
.cta-box .btn { background:transparent; border-color:rgba(255,255,255,.28); color:inherit }
.cta-box .btn:hover { background:rgba(255,255,255,.1) }
.cta-box .btn.primary { background:var(--bg); color:var(--text); border-color:var(--bg) }
.cta-box .btn.primary:hover { background:var(--surface-2); border-color:var(--surface-2) }
:root[data-theme="dark"] .cta-box { background:var(--surface-2); color:var(--text); border:1px solid var(--border) }
:root[data-theme="dark"] .cta-box .btn.primary { background:var(--accent); color:var(--accent-text); border-color:var(--accent) }
@media(max-width:700px) { .cta-box { padding:28px 24px } }

/* ---- Отзывы --------------------------------------------------------- */
.reviews-wall { }
.review { padding:22px }
.review-stars { color:#f59e0b; letter-spacing:2px; font-size:14px }
.review-stars span { color:var(--border-2) }

/* ---- Footer --------------------------------------------------------- */
footer { border-top:1px solid var(--border); background:var(--surface); padding:48px 0 28px; font-size:14px; margin-top:auto }
.foot { display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px }
.fbrand { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text) }
.fbrand img { border-radius:6px }
.foot .tagline { color:var(--text-2); font-size:13.5px; margin-top:12px; max-width:34ch }
.fcol { display:flex; flex-direction:column; gap:9px }
.fcol b { font-size:13px; color:var(--text); margin-bottom:2px }
.fcol a, .fcol span { color:var(--text-2); font-size:14px }
.fcol a:hover { color:var(--text) }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:36px; padding-top:18px; border-top:1px solid var(--border); font-size:13px; color:var(--text-3); flex-wrap:wrap }
.foot-bottom a { color:var(--text-3) } .foot-bottom a:hover { color:var(--text) }
.foot-links { display:flex; gap:18px; flex-wrap:wrap }
.lang-switch { display:inline-flex; gap:6px; align-items:center }
.lang-switch a { color:var(--text-3); font-weight:500 }
.lang-switch a.on { color:var(--text) }
.status-pill { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--text-2) }
.status-pill i { width:8px; height:8px; border-radius:50%; background:var(--ok); display:inline-block }
.status-pill.warn i { background:var(--warn) } .status-pill.bad i { background:var(--bad) }
@media(max-width:960px) { .foot { grid-template-columns:repeat(2,1fr) } .foot > div:first-child { grid-column:1 / -1 } }
@media(max-width:520px) { .foot { grid-template-columns:minmax(0,1fr) } }

/* ---- WorkSpace ------------------------------------------------------ */
.ws { display:grid; grid-template-columns:260px minmax(0,1fr); border:1px solid var(--border); border-radius:var(--r-lg); min-height:68vh; overflow:hidden; margin-top:8px; background:var(--surface) }
@media(max-width:900px) { .ws { grid-template-columns:minmax(0,1fr) } }
.ws-side { border-right:1px solid var(--border); padding:14px 12px; background:var(--bg-2); display:flex; flex-direction:column; gap:2px }
.ws-side .num { padding:0 4px }
.ws-chat { display:block; padding:9px 11px; border-radius:var(--r-md); border:1px solid transparent }
.ws-chat:hover { background:var(--surface) ; border-color:var(--border) }
.ws-chat.on { background:var(--surface); border-color:var(--border-2) }
.ws-chat-title { display:block; font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text) }
.ws-chat-meta { display:block; font-size:12px; color:var(--text-3); margin-top:2px }
.ws-main { display:flex; flex-direction:column; min-width:0 }
.ws-bar { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--border); background:var(--surface); flex-wrap:wrap }
.ws-bar-form { display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.ws-bar select { width:auto; min-width:220px; height:36px }
.ws-feed { flex:1; padding:20px 20px; overflow-y:auto; max-height:56vh; display:flex; flex-direction:column; gap:4px }
.msg { margin-bottom:16px }
.msg.me { display:flex; justify-content:flex-end }
.bubble { max-width:72ch; padding:12px 16px; border:1px solid var(--border); border-radius:var(--r-lg); white-space:pre-wrap; line-height:1.6; font-size:14.5px; color:var(--text); background:var(--surface) }
.msg.me .bubble { background:var(--accent); color:var(--accent-text); border-color:var(--accent) }
.bubble.ai { background:var(--bg-2) }
.msg-meta { font-size:12px; color:var(--text-3); margin-top:6px }
.steps { margin-bottom:10px; border-left:2px solid var(--border-2); padding-left:14px }
.step { font-family:var(--mono); font-size:12px; color:var(--text-3); padding:3px 0 }
.step b { color:var(--text-2); font-weight:500 }
.step.run::after { content:" …" }
.typing { display:inline-flex; gap:4px; align-items:center; padding:12px 16px; color:var(--text-3); font-size:13px }
.typing span { width:6px; height:6px; border-radius:50%; background:var(--text-3); display:block }
.subagent-badge { display:inline-block; font-size:11px; padding:1px 7px; border-radius:var(--r-sm); background:var(--accent-soft); color:var(--accent); margin-right:6px }
.subagent-task { font-size:12px; color:var(--text-3); margin:2px 0 }
.subagent-out summary { cursor:pointer; font-size:12px; color:var(--text-2) }
.subagent-out pre { white-space:pre-wrap; font-size:12px; background:var(--bg-2); border:1px solid var(--border); padding:8px; border-radius:var(--r-md); max-height:200px; overflow:auto; margin-top:4px }
.media-row { display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 4px }
.media-row img, .media-row video { max-width:260px; border:1px solid var(--border); border-radius:var(--r-md); display:block }
.ws-composer { display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--border); align-items:flex-end; background:var(--surface) }
.ws-composer textarea { min-height:44px; max-height:180px; font-size:14px }
#attach-btn { flex:none; font-size:16px; padding:0 12px }
.attach-preview { display:flex; flex-wrap:wrap; gap:8px; padding:10px 16px 0; background:var(--surface) }
.attach-item { position:relative; width:64px; height:64px }
.attach-item img, .attach-item video { width:64px; height:64px; object-fit:cover; border:1px solid var(--border); border-radius:var(--r-md) }
.attach-remove { position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:var(--text); color:var(--bg); border:none; font-size:12px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center }
.ws-empty { padding:48px 20px; text-align:center }
.ws-empty h3 { margin:0 0 8px }
.ws-empty p { color:var(--text-2); margin:0 0 20px }
.ws-hints { display:flex; flex-direction:column; gap:8px; max-width:600px; margin:16px auto 0 }
/* подсказки-кнопки в пустом Playground; div.hint — обычная подпись под полем */
button.hint { background:var(--surface); border:1px solid var(--border); padding:10px 14px; border-radius:var(--r-md); font:inherit; font-size:13.5px; cursor:pointer; text-align:left; color:var(--text); display:flex; justify-content:space-between; align-items:center; gap:12px }
button.hint::after { content:"→"; color:var(--text-3); flex:none }
button.hint:hover { border-color:var(--text-3) }
div.hint { font-size:12.5px; line-height:1.5; color:var(--text-3); margin-top:6px }
#preview-panel { background:var(--surface) !important; border-color:var(--border) !important }
#preview-panel textarea { background:var(--surface); color:var(--text); border-color:var(--border) }

/* ---- Калькулятор стоимости на странице модели ----------------------- */
.cost-calc { display:flex; flex-direction:column; gap:16px; padding:20px }
.cost-calc .calc-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.cost-calc .calc-inputs.one { grid-template-columns:minmax(0,1fr) }
.cost-calc label { margin-bottom:6px }
.cost-calc .calc-result { display:flex; gap:32px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:14px }
.cost-calc .calc-result b { display:block; font-size:22px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.2 }
@media(max-width:560px) { .cost-calc .calc-inputs { grid-template-columns:minmax(0,1fr) } }

/* ---- Статус сервиса ------------------------------------------------- */
.status-row { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--border) }
.status-row:last-child { border-bottom:none }
.status-row .name { flex:1; min-width:0; font-weight:500 }
.status-row .name span { display:block; font-size:12.5px; color:var(--text-3); font-weight:400 }

/* ---- Правовые страницы ---------------------------------------------- */
.legal h2 { font-size:19px; margin:32px 0 10px }
.legal p, .legal li { color:var(--text-2); font-size:15px; line-height:1.7 }
.legal ul { padding-left:22px; margin:0 0 12px }
.legal b { color:var(--text) }

/* ---- Ошибка --------------------------------------------------------- */
.err-code { font-size:72px; font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--text-3) }

/* ---- Двухколоночные сетки, заданные инлайном: на узких экранах — в столбик */
@media(max-width:900px) { [data-price-grid], [data-two-col] { grid-template-columns:minmax(0,1fr) !important } }

/* ---- Печать, мобильные мелочи -------------------------------------- */
@media print { header.nav, footer, .theme-btn, .nav-toggle, .btn { display:none !important } body { background:#fff; color:#000 } }
@media(max-width:600px) {
  h1 { font-size:30px } h2 { font-size:24px }
  .hero-actions .btn { flex:1 1 auto }
  .sec-head .btn { width:100% }
}

/* =====================================================================
   Refresh 2 (2026-09) — аккуратная полировка. Фирменный стиль не меняем:
   тот же синий акцент, белый фон, та же сетка. Только глубина, ритм и
   детали: мягкие тени, ровные скругления, живая полоса логотипов.
   ===================================================================== */

:root {
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --shadow-xs: 0 1px 2px rgba(16,18,28,.05);
  --shadow-sm: 0 1px 2px rgba(16,18,28,.05), 0 2px 8px rgba(16,18,28,.04);
  --shadow-md: 0 8px 24px rgba(16,18,28,.08), 0 2px 6px rgba(16,18,28,.05);
  --shadow-lg: 0 20px 48px rgba(16,18,28,.12), 0 6px 16px rgba(16,18,28,.06);
  --ring: 0 0 0 4px rgba(31,86,224,.14);
}
:root[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.4);
  --shadow-md: 0 12px 34px rgba(0,0,0,.5);
  --shadow-lg: 0 26px 60px rgba(0,0,0,.6);
  --ring: 0 0 0 4px rgba(91,140,255,.22);
}

a, .btn, .link, .chip, .tab, .card, .cell, .model-card, .step-card, .provider, table tr td {
  transition: color .16s var(--ease), background .16s var(--ease),
              border-color .16s var(--ease), box-shadow .18s var(--ease),
              transform .18s var(--ease);
}

/* --- Поверхности: единый радиус и мягкая тень --- */
/* Тени — только самостоятельным карточкам. Плотные сетки (.grid:not(.gap),
   .steps-row) и их ячейки (.cell, .step-card) НЕ трогаем: у них общие
   границы и они должны оставаться единой панелью. */
.card, .kpi, .model-card, .ring-card,
.cost-calc, .review, .client-card, .code-card {
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.model-card:hover, .ring-card:hover {
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
  border-color:#dde2ee;
}
:root[data-theme="dark"] .model-card:hover { border-color:var(--border-2) }
.cell-ico { border-radius:12px }

/* --- Кнопки --- */
.btn { border-radius:var(--r-md); font-weight:600; box-shadow:var(--shadow-xs) }
.btn:hover { box-shadow:var(--shadow-sm) }
.btn.primary { box-shadow:0 2px 10px rgba(31,86,224,.22) }
.btn.primary:hover { box-shadow:0 8px 20px rgba(31,86,224,.30) }
.btn.ghost { box-shadow:none }
.btn.ghost:hover { background:var(--surface-2) }

/* --- Hero: лёгкое свечение, не меняя фон --- */
.hero {
  background:
    radial-gradient(58% 60% at 14% 0%, rgba(31,86,224,.06) 0%, transparent 72%),
    radial-gradient(46% 50% at 96% 8%, rgba(31,86,224,.05) 0%, transparent 72%),
    var(--bg);
}
.hero h1 { text-wrap:balance }
.code-card { border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden }
.code-card .codebar { background:var(--surface-2); border-bottom:1px solid var(--border) }

/* --- Секции/заголовки --- */
.sec-head .sub { color:var(--text-2) }
.badges .badge { box-shadow:var(--shadow-xs) }

/* --- Формы --- */
input:focus, select:focus, textarea:focus, .input-group:focus-within {
  outline:none; border-color:var(--accent); box-shadow:var(--ring);
}
.field label { font-weight:600; color:var(--text-2) }
.preset label { border-radius:var(--r-md) }
.preset label:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); color:var(--accent) }

/* --- Таблицы --- */
table th {
  background:var(--surface-2); color:var(--text-3);
  font-size:12px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
}
table tr:hover td { background:var(--surface-2) }
.table-wrap, .table { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm) }

/* --- Полоса «Работает с»: бесконечная прокрутка --- */
.works-with-list.marquee {
  flex:1 1 320px; min-width:0; display:block; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display:flex; gap:30px; width:max-content; animation:vf-marquee 46s linear infinite }
.works-with-list.marquee span { flex:none; white-space:nowrap; font-size:14px; color:var(--text-2) }
.works-with:hover .marquee-track { animation-play-state:paused }
@keyframes vf-marquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation:none; flex-wrap:wrap }
}

/* --- Прочее --- */
::selection { background:var(--accent-soft) }
.badge, .chip, .status-pill, .io-badge { border-radius:var(--r-pill) }
::selection { background:var(--accent-soft) }
.fcol a:hover { color:var(--accent) }

/* Полоса чипов разработчиков в каталоге — одна прокручиваемая строка */
.chips-scroll {
  display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding-bottom:6px;
  scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
}
.chips-scroll .chip { flex:none }
.chips-scroll::-webkit-scrollbar { height:6px }

/* ==== Локальные шрифты (без Google Fonts) ==== */
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/166a7b1bbd1b.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/f57bddc7f884.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ab08444fa0b7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/0defa227c5dd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/166a7b1bbd1b.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/f57bddc7f884.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ab08444fa0b7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/0defa227c5dd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/166a7b1bbd1b.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/f57bddc7f884.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ab08444fa0b7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/0defa227c5dd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/166a7b1bbd1b.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/f57bddc7f884.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ab08444fa0b7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/0defa227c5dd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/27e1b5c3200e.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/b1b0412a2fc1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fe142708d57b.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ab7c1a7e9749.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ba16536d419a.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/480c062501e3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/27e1b5c3200e.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/b1b0412a2fc1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fe142708d57b.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ab7c1a7e9749.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ba16536d419a.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/480c062501e3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Популярное за неделю (каталог) и лимиты ключа (кабинет) --- */
.pop-strip { margin: 0 0 20px; }
.pop-title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.pop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.pop-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); transition: border-color .12s; }
.pop-item:hover { border-color: var(--text-3); }
.pop-rank { font-family: var(--mono); font-size: 12px; color: var(--text-3); min-width: 14px; }
.pop-name { display: grid; min-width: 0; }
.pop-name b { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-name span { font-size: 12px; color: var(--text-3); }
.key-limits summary { cursor: pointer; color: var(--accent); margin-top: 4px; list-style: none; }
.key-limits summary::-webkit-details-marker { display: none; }
.key-limits-form { display: grid; gap: 6px; margin-top: 8px; min-width: 170px; }
.key-limits-form label { display: grid; gap: 2px; font-size: 12px; color: var(--text-2); }
.key-limits-form input { padding: 4px 8px; font-size: 13px; }

/* =====================================================================
   Главная 2026-09-24: переключатель моделей на первом экране.
   Логотипы лабораторий — настоящие кнопки: клик меняет модель в коде и
   цены под ним. Движение — только в ответ на клик.
   ===================================================================== */
.hero { background:var(--bg); }
.switcher { display:grid; gap:14px; }
.sw-labs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; position:relative; isolation:isolate; }
/* подсветка выбранной лаборатории — одна на всех, переезжает к нажатой кнопке */
.sw-indicator { position:absolute; left:0; top:0; z-index:-1; border-radius:var(--r-lg); background:var(--accent-soft);
  border:1.5px solid var(--accent); opacity:0; pointer-events:none;
  transition:transform .42s cubic-bezier(.2,.9,.25,1.15), width .42s cubic-bezier(.2,.9,.25,1.15), height .42s; }
.sw-indicator.on { opacity:1; }
.sw-lab { display:grid; justify-items:center; gap:8px; padding:12px 4px 10px; border:1px solid var(--border);
  border-radius:var(--r-lg); background:transparent; color:var(--text-2); font:inherit; font-size:12.5px;
  cursor:pointer; transition:border-color .15s, background .15s, color .15s; min-width:0; }
.sw-lab span:last-child { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sw-lab:hover { border-color:var(--border-2); color:var(--text); }
.sw-lab[aria-pressed="true"] { border-color:transparent; color:var(--accent); font-weight:600; }
.sw-lab .ava { transition:transform .25s cubic-bezier(.2,.9,.25,1.3); }
.sw-lab:active .ava { transform:scale(.92); }
.sw-lab[aria-pressed="true"] .ava { transform:scale(1.06); }
.sw-labs:not(:has(.sw-indicator.on)) .sw-lab[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); }
.sw-lab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.sw-hint { margin:-4px 0 0; font-size:13px; color:var(--text-3); }
.sw-code { border-radius:var(--r-lg); background:#15171c; color:#e8eaee; overflow:hidden; }
.sw-code pre { margin:0; padding:20px 22px; font-family:var(--mono); font-size:13.5px; line-height:1.7; white-space:pre-wrap; word-break:break-word; background:none; border:0; color:inherit; }
.sw-code .k { color:var(--code-k); } .sw-code .s { color:var(--code-s); }
.sw-model { color:#ffd580; border-bottom:1px solid rgba(255,213,128,.45); }
.sw-facts { display:grid; grid-template-columns:repeat(3,auto) 1fr; gap:4px 28px; align-items:end; margin:0; padding:0 2px; }
.sw-facts dt { font-size:12.5px; color:var(--text-3); }
.sw-facts dd { margin:2px 0 0; font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; }
/* смена значения: старое уходит вверх, новое приходит снизу */
.sw-facts dd, [data-calc-total], [data-calc-rub] { transition:transform .15s ease, opacity .15s ease; }
[data-calc-total], [data-calc-rub] { display:inline-block; }
.swap-out { transform:translateY(-45%); opacity:0; }
.swap-in { transform:translateY(45%); opacity:0; transition:none !important; }
.sw-more { justify-self:end; font-size:14px; color:var(--accent); }
@media(max-width:600px) {
  .sw-labs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sw-code pre { font-size:11.5px; padding:16px; }
  .sw-out { padding:12px 16px 16px; }
  .sw-facts { grid-template-columns:repeat(3,auto); }
  .sw-more { grid-column:1 / -1; justify-self:start; }
}
/* ответ модели под кодом — приходит потоком */
.sw-out { border-top:1px solid #262a33; padding:14px 22px 18px; }
.sw-out-head { display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color:#8b909c; margin-bottom:8px; }
.sw-out-head [data-sw-who] { color:#ffd580; }
.sw-meter { font-variant-numeric:tabular-nums; }
.sw-meter span { color:#e8eaee; }
.sw-text { margin:0; font-family:var(--sans); font-size:15px; line-height:1.6; color:#e8eaee; min-height:4.8em; }
.sw-text .caret { display:inline-block; width:8px; height:1.05em; margin-left:2px; vertical-align:-3px; background:var(--accent); animation:vf-blink 1s steps(1) infinite; }
@keyframes vf-blink { 50% { opacity:0; } }

/* демо резервной модели: 503 → резерв → 200 */
.fo-demo { display:grid; gap:10px; padding:14px; border-radius:var(--r-md); background:var(--bg-2); border:1px solid var(--border); margin-top:auto; }
.fo-toggle { display:flex; align-items:center; gap:10px; border:0; background:none; padding:0; font:inherit; font-size:14px; color:var(--text); cursor:pointer; text-align:left; }
.fo-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:6px; }
.fo-switch { flex:none; width:38px; height:22px; border-radius:999px; background:var(--border-2); position:relative; transition:background .2s; }
.fo-switch span { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .25s cubic-bezier(.2,.9,.25,1.3); }
.fo-toggle[aria-pressed="true"] .fo-switch { background:var(--accent); }
.fo-toggle[aria-pressed="true"] .fo-switch span { transform:translateX(16px); }
.fo-trace { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.fo-row { display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 10px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--border); font-size:13.5px; animation:fo-in .3s ease both; }
.fo-row[hidden] { display:none; }
.fo-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fo-dot { width:8px; height:8px; border-radius:50%; background:var(--text-3); }
.fo-status { font-weight:600; font-variant-numeric:tabular-nums; color:var(--text-3); }
.fo-row.wait .fo-dot { animation:fo-pulse .8s ease-in-out infinite; }
.fo-row.bad { border-color:var(--bad-line); } .fo-row.bad .fo-dot { background:var(--bad); } .fo-row.bad .fo-status { color:var(--bad); }
.fo-row.ok { border-color:var(--ok-line); } .fo-row.ok .fo-dot { background:var(--ok); } .fo-row.ok .fo-status { color:var(--ok); }
.fo-result { margin:0; font-size:13.5px; font-weight:600; min-height:1.4em; }
.fo-result.bad { color:var(--bad); } .fo-result.ok { color:var(--ok); }
@keyframes fo-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@keyframes fo-pulse { 50% { opacity:.3; } }

@media (prefers-reduced-motion: reduce) {
  .sw-lab, .sw-lab .ava, .sw-indicator, .fo-switch, .fo-switch span { transition:none; }
  .sw-text .caret, .fo-row, .fo-row.wait .fo-dot { animation:none; }
}

/* подключение: три шага — это последовательность, отсюда и номера */
.steps-line { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.steps-line li { border-top:2px solid var(--text); padding-top:18px; }
.steps-line .step-num { display:block; font-size:28px; font-weight:700; line-height:1; margin-bottom:14px; font-variant-numeric:tabular-nums; }
.steps-line h4 { font-size:18px; margin:0 0 6px; }
.steps-line p { margin:0; color:var(--text-2); font-size:15px; max-width:34ch; }
@media(max-width:760px) { .steps-line { grid-template-columns:minmax(0,1fr); gap:24px; } }

/* бенто: две карточки разной роли и спокойный список */
.bento { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:40px; }
.bento-card { border-radius:var(--r-xl); padding:30px; border:1px solid var(--border); background:var(--surface); display:flex; flex-direction:column; gap:12px; }
.bento-card h3 { font-size:22px; letter-spacing:-.02em; margin:0; }
.bento-card p { margin:0; color:var(--text-2); font-size:15px; max-width:60ch; }
.bento-card.wide { grid-column:span 2; }
.bento-code { margin-top:auto; display:grid; border-radius:var(--r-md); background:#15171c; padding:6px 0; }
.bento-code > div { display:grid; grid-template-columns:104px minmax(0,1fr); gap:12px; padding:9px 16px; align-items:baseline; }
.bento-code > div + div { border-top:1px solid #23272f; }
.bc-lang { font-size:12.5px; color:#8b909c; }
.bento-card .bento-code code { font-family:var(--mono); font-size:13px; color:#e8eaee; background:none; border:0; padding:0; overflow-wrap:anywhere; }
.bento-code .s { color:var(--code-s); }
@media(max-width:600px) { .bento-code > div { grid-template-columns:minmax(0,1fr); gap:2px; } }
.bento-avas { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.bento-avas .more { font-size:13px; color:var(--text-3); margin-left:4px; }
.setting-mock { display:grid; gap:6px; padding:14px; border-radius:var(--r-md); background:var(--bg-2); border:1px solid var(--border); margin-top:auto; }
.sm-label { font-size:12.5px; font-weight:600; color:var(--text-2); }
.sm-select { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border:1px solid var(--border-2);
  border-radius:var(--r-sm); background:var(--surface); font-size:14px; }
.sm-select::after { content:""; width:8px; height:8px; border-right:1.5px solid var(--text-3); border-bottom:1.5px solid var(--text-3); transform:rotate(45deg) translateY(-2px); }
.feature-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 40px; }
.feature-list > div { padding:22px 0; border-top:1px solid var(--border); }
.feature-list h3 { font-size:16px; margin:12px 0 6px; }
.feature-list p { margin:0; color:var(--text-2); font-size:14px; }
@media(max-width:960px) { .bento { grid-template-columns:minmax(0,1fr); } .bento-card.wide { grid-column:auto; } .feature-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .feature-list { grid-template-columns:minmax(0,1fr); } .bento-card { padding:22px; } }

/* карточки моделей: кромка цвета разработчика и цена крупнее */
.model-card { overflow:hidden; }
.model-card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--pc, var(--accent)); opacity:.85; }
.model-card .mc-prices b { font-family:var(--mono); font-size:15px; }
.model-card:hover { border-color:color-mix(in srgb, var(--pc, var(--accent)) 45%, var(--border)); }


/* переключатель кабинета: личный / организация */
.ctx-switch { display:grid; gap:6px; padding:0 0 14px; margin-bottom:10px; border-bottom:1px solid var(--border); }
.ctx-switch select { width:100%; }
.ctx-switch a { justify-self:start; }

/* --- /admin/supplier: экономика Clodex ----------------------------------- */
.clx-hero { background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface, var(--bg))), var(--surface, var(--bg)) 60%); }
.clx-accent { color:var(--accent) }
.clx-flow { display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; margin-top:16px }
.clx-flow > div { flex:1 1 150px; border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--bg) }
.clx-flow > div span { display:block; font-size:11.5px; color:var(--text-3) }
.clx-flow > div b { font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums }
.clx-flow > i { align-self:center; font-style:normal; color:var(--text-3) }
.clx-flow > .clx-win { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--bg)) }
.clx-flow > .clx-win b { color:var(--accent) }
@media (max-width:720px) { .clx-flow > i { display:none } }

/* ======================================================================
   Кабинет: руководство по настройке и обзор расхода
   ====================================================================== */
.pill-count { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600;
  font-family:var(--mono); color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); white-space:nowrap }
.setup-bar { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:14px 0 4px }
.setup-bar i { height:5px; border-radius:3px; background:var(--surface-3); position:relative; overflow:hidden }
.setup-bar i.on::after { content:""; position:absolute; inset:0; background:var(--accent); border-radius:inherit;
  transform-origin:left; animation:vf-fill .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 90ms + 150ms) }
.setup-list { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:4px }
.setup-list li { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:var(--r-md); transition:background .2s }
.setup-list li:hover { background:var(--surface-2) }
.setup-list .setup-title { flex:1; font-size:14px }
.setup-list li.done .setup-title { color:var(--text-3); text-decoration:line-through; text-decoration-color:var(--border) }
.setup-check { width:24px; height:24px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700;
  border:1.5px solid var(--border); color:var(--text-3); font-family:var(--mono) }
.setup-list li.done .setup-check { background:var(--accent); border-color:var(--accent); color:#fff }
.setup.collapsed .setup-list { display:none }

.ov { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.15fr); grid-template-rows:auto auto; gap:16px }
.ov-card, .ov-balance { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 18px;
  display:flex; flex-direction:column; gap:6px; min-width:0; position:relative; overflow:hidden }
.ov-balance { grid-column:3; grid-row:1 / span 2; padding:20px 22px; gap:12px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--surface)) 0%, var(--surface) 55%); border-color:var(--accent-line) }
.ov-balance.low { border-color:var(--bad); background:linear-gradient(160deg, color-mix(in srgb, var(--bad) 8%, var(--surface)) 0%, var(--surface) 55%) }
.ov-balance .btn { margin-top:auto }
.ov-label { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3) }
.ov-label .ico { width:15px; height:15px }
.ov-value { font-family:var(--mono); font-size:24px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.2 }
.ov-value.hot { color:var(--accent) }
.ov-big { font-family:var(--mono); font-size:38px; font-weight:700; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums }
.ov-note { font-size:12.5px; color:var(--text-3); margin-top:auto }
.ov-rows { display:flex; flex-direction:column; border-top:1px dashed var(--border) }
.ov-rows > div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed var(--border); font-size:13px }
.ov-rows span { color:var(--text-3) }
.ov-rows b { font-family:var(--mono); font-weight:600 }
.spark { width:100%; height:34px; display:block; margin:2px 0 }
.spark-line { fill:none; stroke:var(--accent); stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round }
.spark-fill { fill:color-mix(in srgb, var(--accent) 12%, transparent); stroke:none }
@media (max-width:1100px) {
  .ov { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ov-balance { grid-column:1 / -1; grid-row:auto }
}
@media (max-width:560px) { .ov { gap:10px } .ov-card { padding:12px 14px } .ov-value { font-size:19px } .ov-label { font-size:10.5px; letter-spacing:.04em } .ov-big { font-size:32px } }
#usage > .card { display:flex; flex-direction:column }
#usage .bars { flex:1; min-height:140px }

/* ======================================================================
   Движение. Всё короткое и по делу: карточки мягко появляются при
   прокрутке, графики растут, числа досчитываются, наведение приподнимает.
   Класс .motion ставит site.js — без JS (и при «уменьшить движение»)
   ничего не скрыто и не двигается.
   ====================================================================== */
@keyframes vf-rise { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
@keyframes vf-fill { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@keyframes vf-grow { from { transform:scaleY(0) } to { transform:scaleY(1) } }
/* линию графика «прорисовываем» шторкой, а не пунктиром: stroke-dasharray вместе с
   non-scaling-stroke Firefox считает в пикселях экрана — линия рвалась посередине */
@keyframes vf-draw { from { clip-path:inset(0 100% 0 0) } to { clip-path:inset(0 0 0 0) } }
@keyframes vf-fade { from { opacity:0 } to { opacity:1 } }

.motion .rv { opacity:0; transform:translateY(10px) }
.motion .rv.is-in { animation:vf-rise .55s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--rv, 0) * 55ms) }

.motion .bars .bar { transform-origin:bottom; animation:vf-grow .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i, 0) * 35ms + 120ms) }
.motion .bar-line > i { transform-origin:left; animation:vf-fill .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:.15s }
.motion .spark-line { animation:vf-draw 1.1s cubic-bezier(.4,0,.2,1) both .2s }
.motion .spark-fill { animation:vf-fade .8s ease both .6s }
.motion .perf-bar i.on { transform-origin:left; animation:vf-fill .5s cubic-bezier(.2,.8,.2,1) both }
.motion .perf-bar i.on:nth-child(2) { animation-delay:.06s } .motion .perf-bar i.on:nth-child(3) { animation-delay:.12s }
.motion .perf-bar i.on:nth-child(4) { animation-delay:.18s } .motion .perf-bar i.on:nth-child(5) { animation-delay:.24s }

.ov-card, .ov-balance, .model-card, .tile, .clx-flow > div { transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s }
.ov-card:hover, .model-card:hover, .tile:hover, .clx-flow > div:hover { transform:translateY(-2px); border-color:var(--border-2, var(--text-3));
  box-shadow:0 8px 24px -12px rgba(16,18,28,.18) }
.ov-balance:hover { box-shadow:0 10px 30px -14px color-mix(in srgb, var(--accent) 45%, transparent) }
.btn { transition:background .15s, border-color .15s, color .15s, transform .12s, box-shadow .2s }
.btn:active { transform:scale(.97) }
.btn.primary:hover { box-shadow:0 6px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent) }
.dash-side a { transition:background .15s, color .15s, padding-left .2s }
.dash-side a:hover { padding-left:15px }
.badge { transition:transform .15s }
a.badge:hover { transform:translateY(-1px) }

@media (prefers-reduced-motion: reduce) {
  .motion .rv { opacity:1; transform:none }
  .motion .rv.is-in, .motion .bars .bar, .motion .bar-line > i, .motion .spark-line, .motion .spark-fill,
  .motion .perf-bar i.on, .setup-bar i.on::after { animation:none }
  .ov-card:hover, .model-card:hover, .tile:hover, .clx-flow > div:hover, a.badge:hover, .btn:active { transform:none }
  .dash-side a:hover { padding-left:12px }
}

/* Кабинет на телефоне: меню — одной лентой, которая листается вбок (сеткой оно
   занимало весь первый экран), у графика подписан каждый второй день
   (14 подписей в одну строку не помещались и раздвигали страницу вбок) */
@media (max-width:900px) {
  .dash-side { flex-wrap:nowrap; overflow-x:auto; gap:4px; padding:6px; scrollbar-width:none; overscroll-behavior-x:contain }
  .dash-side::-webkit-scrollbar { display:none }
  .dash-side .ctx-switch { order:1; display:flex; align-items:center; gap:8px; flex:none; padding:0 0 0 8px; margin:0; border-bottom:0; border-left:1px solid var(--border) }
  .dash-side .ctx-switch label { display:none }
  .dash-side .ctx-switch select { width:auto; height:36px }
  .dash-side .ctx-switch a { white-space:nowrap }
  .dash-side a { flex:none; white-space:nowrap; padding:8px 12px }
  .dash-side a:hover { padding-left:12px }
  .dash-side hr { display:none }
}
.bars .bar-label { max-width:100%; overflow:hidden }
@media (max-width:560px) {
  .bars { gap:3px }
  .bars > div:nth-child(even) .bar-label { visibility:hidden }
  .bars .bar-label { overflow:visible }   /* соседняя подпись скрыта — «16.09» целиком, а не «16.0» */
}
.clx-sell { margin-top:12px; padding:12px 14px; border-radius:12px; border:1px solid var(--accent-line); background:var(--accent-soft) }
.clx-sell span { display:block; font-size:11.5px; color:var(--text-3) }
.clx-sell b { font-family:var(--mono); font-size:22px; color:var(--accent) }
.clx-sell b small { font-size:13px; color:var(--text-2); font-weight:500 }
.clx-sell em { display:block; font-style:normal; font-size:12px; color:var(--text-2); margin-top:4px; line-height:1.5 }

/* --- VFG-Connect: команда установки ------------------------------------- */
.connect { margin-top:12px }
.connect-os { display:inline-flex; gap:2px; padding:3px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); margin-bottom:10px }
.connect-os button { border:0; background:transparent; font:inherit; font-size:13px; font-weight:500; color:var(--text-2); padding:6px 12px; border-radius:7px; cursor:pointer; transition:background .15s, color .15s }
.connect-os button[aria-selected="true"] { background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(16,18,28,.08) }
.connect-steps { margin:12px 0 0; padding-left:18px; line-height:1.7 }

/* --- /admin/admins: права администраторов -------------------------------- */
.adm-list { display:flex; flex-direction:column; margin-top:12px }
.adm-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; padding:14px 0; border-top:1px solid var(--border); align-items:start }
.adm-row:first-child { border-top:none }
.adm-who { display:flex; flex-wrap:wrap; gap:8px; align-items:center; grid-column:1 / -1 }
.adm-perms { display:flex; flex-wrap:wrap; gap:6px; align-items:center; grid-column:1 }
.adm-actions { flex-basis:100%; margin-top:4px }
.adm-remove { grid-column:2; grid-row:2; margin:0 }
.perm-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12.5px;
  border:1px solid var(--border); color:var(--text-3); background:var(--surface); cursor:pointer; transition:background .15s, border-color .15s, color .15s }
.perm-chip input { margin:0; accent-color:var(--accent) }
.perm-chip.on, .perm-chip:has(input:checked) { border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent) }
.perm-chip:has(input:not(:checked)) { border-color:var(--border); background:var(--surface); color:var(--text-3) }
.perm-chip.locked { opacity:.55; cursor:not-allowed }
.adm-perms.static .perm-chip { cursor:default }
.perm-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px }
.perm-opt { display:flex; gap:8px; align-items:flex-start; padding:8px 10px; border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:border-color .15s, background .15s }
.perm-opt:has(input:checked) { border-color:var(--accent-line); background:var(--accent-soft) }
.perm-opt input { margin-top:3px; accent-color:var(--accent) }
.perm-opt b { display:block; font-size:13px; font-weight:600 }
.perm-opt small { display:block; font-size:11.5px; color:var(--text-3); line-height:1.35 }
@media (max-width:640px) { .perm-grid { grid-template-columns:minmax(0,1fr) } .adm-row { grid-template-columns:minmax(0,1fr) } .adm-remove { grid-column:1; grid-row:auto } }

/* ---- Варфик — маскот VFG (templates/_icons.html → mascot(cls, state)) --------
   Пиксельный, из одной карты: static/brand/varfik.svg, .png, баннер VFG Connect.
   Позы: '' — спокоен, hello — машет, think — думает, sleep — спит (раздел
   выключен), lost — потерялся (404), happy — радуется (оплата прошла). */
.vk { display:block; width:32px; height:32px; overflow:visible; flex:none }
.vk-xs { width:20px; height:20px }
.vk-sm { width:26px; height:26px }
.vk-md { width:64px; height:64px }
.vk-lg { width:96px; height:96px }
.vk-eyes, .vk-arm-l, .vk-arm-r { transform-box:fill-box; transform-origin:center }
.vk-bob { animation:vk-bob 1.6s steps(1) infinite }
.vk-eyes { animation:vk-blink 4.2s infinite }
.vk-spark rect { animation:vk-spark 1.6s steps(1) infinite }
.vk-sm .vk-bob, .vk-sm .vk-spark rect { animation:none }
.vk-hello .vk-arm-r { animation:vk-wave 4.2s steps(1) infinite }
.vk-think .vk-bob { animation-duration:.5s }
.vk-think .vk-spark rect { animation-duration:.35s }
.vk-think .vk-eyes { animation:vk-look 1.4s steps(1) infinite }
.vk-lost .vk-eyes { animation:vk-look 2.6s steps(1) infinite }
.vk-lost .vk-spark rect { animation:vk-flicker 2.2s steps(1) infinite }
.vk-sleep .vk-bob { animation-duration:3.2s }
.vk-sleep .vk-eyes { animation:none; transform:scaleY(.15) }
.vk-sleep .vk-spark rect { animation:none; fill:#2B4FD8 }   /* искра погашена */
.vk-happy .vk-bob, .vk-happy .vk-feet { animation:vk-jump .6s steps(1) infinite }   /* прыжок — вместе с ногами */
.vk-happy .vk-arm-l, .vk-happy .vk-arm-r { animation:vk-cheer .6s steps(1) infinite }
@keyframes vk-bob { 50% { transform:translateY(-1px) } }
@keyframes vk-jump { 50% { transform:translateY(-2px) } }
@keyframes vk-blink { 0%, 93%, 100% { transform:scaleY(1) } 95% { transform:scaleY(.15) } }
@keyframes vk-spark { 50% { fill:#FFF1A8 } }
@keyframes vk-flicker { 0%, 60%, 70%, 80%, 100% { fill:#FFC94A } 65%, 75% { fill:#2B4FD8 } }
@keyframes vk-wave { 0%, 70%, 100% { transform:none } 75%, 85% { transform:translateY(-2px) } 80%, 90% { transform:translateY(-3px) } }
@keyframes vk-cheer { 50% { transform:translateY(-3px) } }
@keyframes vk-look { 0%, 100% { transform:none } 25% { transform:translateX(-1px) } 75% { transform:translateX(1px) } }
/* «z z z» над спящим */
.vk-zz { position:relative; display:inline-block }
.vk-zz::before, .vk-zz::after { content:"z"; position:absolute; top:4%; right:-4%; font:700 15px/1 var(--mono); color:var(--text-3);
  animation:vk-z 2.4s ease-in infinite; opacity:0 }
.vk-zz::after { font-size:11px; animation-delay:1.2s }
@keyframes vk-z { 0% { opacity:0; transform:translate(0, 8px) } 30% { opacity:1 } 100% { opacity:0; transform:translate(12px, -18px) } }
@media (prefers-reduced-motion: reduce) { .vk *, .vk-zz::before, .vk-zz::after { animation:none !important } }

/* где живёт */
.switcher { position:relative }
.hero-vk { position:absolute; right:10px; top:-58px }
footer { position:relative }
.foot-vk { position:absolute; right:max(20px, 6vw); top:-30px }
.err-vk { margin:0 0 18px }
.panel-vk { margin:-4px 0 10px }
.pay-vk { display:flex; justify-content:center; margin:2px 0 8px }
.pay-card:has(#pay-steps[data-stage="done"]) .vk-think .vk-bob,
.pay-card:has(#pay-steps[data-stage="done"]) .vk-think .vk-feet { animation:vk-jump .6s steps(1) infinite }
.pay-card:has(#pay-steps[data-stage="done"]) .vk-think .vk-eyes { animation:vk-blink 4.2s infinite }
.pay-card:has(#pay-steps[data-stage="done"]) .vk-think .vk-arm-l,
.pay-card:has(#pay-steps[data-stage="done"]) .vk-think .vk-arm-r { animation:vk-cheer .6s steps(1) infinite }
.vk-card { display:grid; grid-template-columns:auto minmax(0,1fr); gap:28px; align-items:center }
.vk-card-art { display:grid; grid-template-columns:repeat(2, auto); gap:18px 22px; padding:18px 22px; border-radius:14px; background:#121834 }
@media (max-width:700px) { .vk-card { grid-template-columns:minmax(0,1fr) } .vk-card-art { justify-content:center } }

/* VFG Code на главной и на /code */
.announce { display:inline-flex; align-items:center; gap:8px; max-width:100%; margin-bottom:14px; padding:5px 12px 5px 6px; border-radius:999px;
  border:1px solid var(--accent-line); background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:500; transition:border-color .15s, box-shadow .2s }
.announce:hover { color:var(--accent); border-color:var(--accent); box-shadow:0 6px 20px -12px color-mix(in srgb, var(--accent) 70%, transparent) }
.code-promo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:48px; align-items:center }
.code-promo h2 { margin:0 0 12px }
.code-promo-list { list-style:none; padding:0; margin:18px 0 6px; display:grid; gap:8px }
.code-promo-list li { display:flex; gap:10px; align-items:flex-start; color:var(--text-2) }
.code-promo-list .ico { width:18px; height:18px; flex:none; margin-top:2px }
.code-hero .term, .code-promo .term { margin:0; box-shadow:0 30px 70px -40px rgba(20,30,80,.55) }
@media (max-width:960px) { .code-promo { grid-template-columns:minmax(0,1fr); gap:28px } }
@media (max-width:600px) { .term { font-size:11.5px; padding:14px } }
.code-card { display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:start; border-color:var(--accent-line) }
.code-card-art { display:grid; place-items:center; width:120px; height:120px; border-radius:14px; background:#121834 }
@media (max-width:600px) { .code-card { grid-template-columns:minmax(0,1fr) } .code-card-art { width:100%; height:96px } }
.code-banner { display:flex; gap:16px; align-items:center; margin-top:20px; color:var(--text); border-color:var(--accent-line); transition:border-color .15s, box-shadow .2s }
.code-banner:hover { color:var(--text); border-color:var(--accent); box-shadow:0 10px 30px -18px color-mix(in srgb, var(--accent) 70%, transparent) }
.code-banner .code-card-art { width:76px; height:76px; flex:none }
.code-banner b { display:block; font-size:16px; margin-bottom:4px }
.code-banner .muted { font-size:14px }

/* VFG Code в документации — как выглядит сессия в терминале */
.term { margin:14px 0 16px; padding:16px 18px; border-radius:14px; background:#0f1115; color:#e6e6e6; border:1px solid #23262f;
  font:13px/1.65 var(--mono); overflow-x:auto }
.term > div { white-space:pre }
.term-head { display:flex; align-items:center; gap:16px; margin-bottom:10px; white-space:normal !important }
.term b { color:#fff; font-weight:600 }
.term i { font-style:normal; color:#8b909c }
.term em { font-style:normal; color:#7cf6ff }
.term u { text-decoration:none; color:#4a74ff }
.term s { text-decoration:none; color:#ffc94a }
.term .del { color:#ff6b6b; padding-left:22px }
.term .add { color:#5fd38d; padding-left:22px }

/* Телефон: длинная надпись на кнопке переносится, а не вылезает за экран */
@media (max-width:600px) {
  .btn { white-space:normal; height:auto; min-height:40px; max-width:100%; padding-block:8px; line-height:1.2; text-align:center }
  .btn.sm { min-height:34px; padding-block:6px }
  .btn.lg { min-height:46px }
  .badges .badge { white-space:normal; height:auto; min-height:24px; padding-block:4px; line-height:1.3 }
}

/* Широкая таблица прямо в карточке (админка, правила, настройка) листается внутри
   карточки, а не растягивает всю страницу вбок */
@media (max-width:860px) { .card:has(table) { overflow-x:auto } }

/* Телефоны: поля ввода не мельче 16px — иначе iOS увеличивает страницу при фокусе
   и она остаётся увеличенной; !important — у части полей свой размер по более
   точному селектору (поиск в чате, фильтры каталога) */
@media (max-width:860px) and (pointer:coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size:16px !important }
}


.price-split { display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:56px; align-items:center }
.code-split { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start }
.secret-box { border-color:var(--accent-line); background:var(--accent-soft); margin-bottom:8px }
.keys-actions { display:flex; gap:6px; flex-wrap:wrap }
.field-error { color:var(--bad); font-size:13px; margin-top:8px }
.chat-app { display:grid; grid-template-columns:260px 1fr 280px; min-height:calc(100vh - var(--nav-h)); border-top:1px solid var(--border) }
.chat-col { border-right:1px solid var(--border); padding:16px; overflow:auto }
.chat-col:last-child { border-right:0; border-left:1px solid var(--border) }
.chat-item { padding:10px 12px; border-radius:10px; cursor:pointer; color:var(--text-2); margin-bottom:4px }
.chat-item:hover, .chat-item.on { background:var(--surface-2); color:var(--text) }
.chat-main { display:flex; flex-direction:column }
.chat-log { flex:1; padding:24px; overflow:auto; display:flex; flex-direction:column; gap:14px }
.bubble { max-width:72ch; padding:12px 14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border) }
.bubble.me { align-self:flex-end; background:var(--accent-soft); border-color:var(--accent-line) }
.chat-input { display:flex; gap:8px; padding:16px; border-top:1px solid var(--border) }
.chat-input textarea { flex:1; min-height:44px; height:44px }
.studio-grid { display:grid; grid-template-columns:340px 1fr; min-height:calc(100vh - var(--nav-h)); border-top:1px solid var(--border) }
.studio-form { padding:20px; border-right:1px solid var(--border) }
.studio-canvas { padding:24px; display:grid; grid-template-columns:1fr 1fr; gap:16px; background:var(--bg-2) }
.art { aspect-ratio:1; border-radius:12px; border:1px solid var(--border); background:linear-gradient(135deg,#1f56e0,#7aa2ff 40%,#ff7ab6) }
.art.b { background:linear-gradient(160deg,#0f1115,#1f56e0 50%,#9fe0b0) }
.art.c { background:linear-gradient(200deg,#c96442,#111318 60%,#4a74ff) }
.art.d { background:linear-gradient(120deg,#158a44,#edf2ff 40%,#1f56e0) }
.status-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.status-row { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border:1px solid var(--border); border-radius:10px; background:var(--surface) }
.compare-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.compare-grid table { width:100%; font-size:13.5px; border-collapse:collapse }
.compare-grid td { padding:8px 0; border-bottom:1px solid var(--border); color:var(--text-2) }
.compare-grid td:last-child { text-align:right; color:var(--text); font-family:var(--mono); font-size:13px }
.auth-wrap { max-width:440px; margin:48px auto 80px }
.auth-wrap .card { padding:28px }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px }
.auth-alt { display:grid; gap:8px; margin:16px 0 }
.divider { display:flex; align-items:center; gap:12px; color:var(--text-3); font-size:13px; margin:16px 0 }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--border) }
@media (max-width:980px) {
  .chat-app, .studio-grid, .compare-grid, .status-grid, .price-split, .code-split { grid-template-columns:1fr }
  .chat-col:last-child { display:none }
  .studio-canvas { grid-template-columns:1fr }
}

/* =====================================================================
   Редизайн 2026-09-30: каталог из static/catalog.json, калькулятор,
   сравнение, карточка модели, FAQ, бизнес, статус, правовые страницы.
   ===================================================================== */

/* ---- Доступность ---------------------------------------------------- */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important }
.skip-link { position:absolute; left:12px; top:-60px; z-index:400; padding:10px 14px; border-radius:var(--r-md); background:var(--accent); color:var(--accent-text); font-weight:600; transition:top .15s }
.skip-link:focus { top:12px; color:var(--accent-text) }
.lbl { display:block; font-size:13px; font-weight:500; color:var(--text-2); margin-bottom:6px }

/* ---- Внутренние страницы ------------------------------------------- */
.page-hero { padding:48px 0 32px }
.page-hero h1 { max-width:22ch }
.page-hero .lead { margin-top:14px }
.page-hero + .sec.tight { padding-top:8px }
@media (max-width:600px) { .page-hero { padding:32px 0 20px } }

/* ---- Главная: hero -------------------------------------------------- */
.home .hero { position:relative; overflow:hidden; isolation:isolate; padding-bottom:40px }
.home .hero::before {
  content:""; position:absolute; inset:-200px -10% auto; height:620px; z-index:-1; pointer-events:none;
  background:radial-gradient(600px 300px at 18% 40%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
             radial-gradient(520px 280px at 85% 20%, color-mix(in srgb, #ff7ab6 9%, transparent), transparent 70%);
}
.hero h1 { font-size:clamp(34px,4.3vw,54px); max-width:15ch; letter-spacing:-.03em }
.hero-points { list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--text-2); font-size:14px }
.hero-points li { display:inline-flex; align-items:center; gap:7px }
.hero-points .ico { width:17px; height:17px }
.ico.ok { color:var(--ok) }
.hero-stats { margin:48px 0 0; background:var(--surface) }
.hero-stats b { font-size:24px }
@media (max-width:600px) { .hero-stats b { font-size:20px } }

/* ---- Интеграции ----------------------------------------------------- */
.card.flush { padding:0; overflow:hidden }
.integr-tabs { margin:0; padding:0 12px; background:var(--bg-2); overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none }
.integr-tabs::-webkit-scrollbar { display:none }
.integr-tabs .tab { white-space:nowrap }
.integr-pane { padding:20px 24px 24px }
.integr-pane > p { margin-bottom:14px; max-width:80ch }
.code pre { margin:0; white-space:pre; overflow-x:auto; font:inherit }
.code .c { color:var(--code-c) }

/* ---- Карточки моделей ---------------------------------------------- */
.model-grid.four { grid-template-columns:repeat(4,minmax(0,1fr)) }
@media (max-width:1100px) { .model-grid.four { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px) { .model-grid.four { grid-template-columns:minmax(0,1fr) } }
.model-card { border-top:3px solid var(--pc, var(--border)) }
.model-card:hover { border-color:var(--border-2); border-top-color:var(--pc, var(--border-2)); box-shadow:0 10px 30px -18px rgba(17,19,24,.35) }
.mc-name a:hover b { color:var(--accent) }
.mc-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:-2px }
.mc-foot .badge { height:22px; padding:0 8px; font-size:11.5px }
.mc-caps { display:flex; gap:6px; flex-wrap:wrap }
.cap { display:inline-flex; align-items:center; gap:6px; height:24px; min-width:24px; justify-content:center; padding:0 6px; border-radius:6px; background:var(--surface-2); color:var(--text-2); font-size:12.5px }
.cap .ico { width:14px; height:14px }
.cmp { width:30px; height:30px; justify-content:center; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface) }
.cmp input { margin:0; accent-color:var(--accent) }

/* ---- Каталог: панель фильтров -------------------------------------- */
.cat-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) auto auto auto auto; gap:10px; align-items:center }
.cat-toolbar select { height:40px; min-width:0 }
.cat-search { position:relative; margin:0 }
.cat-search .ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--text-3); pointer-events:none }
.cat-search input { padding-left:38px !important; height:40px; width:100% }
.cat-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:16px 0 18px; flex-wrap:wrap }
.cat-bar .chips { margin:0 }
.view-toggle .vt { background:var(--surface); border-top:0; border-bottom:0; border-left:0; cursor:pointer; height:100% }
@media (max-width:1000px) {
  .cat-toolbar { grid-template-columns:1fr 1fr }
  .cat-search { grid-column:1 / -1 }
  .cat-toolbar .view-toggle { justify-self:end }
}
@media (max-width:520px) { .cat-toolbar { grid-template-columns:minmax(0,1fr) } .cat-toolbar .view-toggle { justify-self:start } }
.cat-table td { vertical-align:middle }
.cat-table .mono { font-size:13px }
.ct-model { display:flex; align-items:center; gap:10px; min-width:0 }
.ct-model a b { font-weight:600 }
.ct-cmp { width:36px }
.ct-cmp input { accent-color:var(--accent) }
.empty { text-align:center; padding:40px 24px }
.empty h3 { margin-bottom:6px }
.btn.disabled { opacity:.55 }

/* лоток сравнения */
.cmp-tray {
  position:sticky; bottom:16px; z-index:60; margin-top:20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:12px 16px; border:1px solid var(--accent-line); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:0 12px 36px -12px rgba(17,19,24,.28);
}
.cmp-tray-l { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0 }
.cmp-list { display:flex; gap:6px; flex-wrap:wrap }
.cmp-pill { display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 4px 0 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:12.5px }
.cmp-pill button { border:0; background:transparent; color:inherit; cursor:pointer; font-size:16px; line-height:1; width:22px; height:22px; border-radius:50% }
.cmp-pill button:hover { background:var(--accent-line) }

/* ---- Карточка модели (диалог) -------------------------------------- */
dialog.mdl { width:min(760px, calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--border); border-radius:var(--r-xl); background:var(--surface); color:var(--text); box-shadow:0 30px 80px -20px rgba(0,0,0,.45) }
dialog.mdl::backdrop { background:rgba(15,17,21,.55); backdrop-filter:blur(2px) }
.mdl-body { padding:28px; position:relative }
.mdl-x { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:22px; line-height:1; cursor:pointer }
.mdl-x:hover { background:var(--surface-2); color:var(--text) }
.mdl-head { display:flex; gap:16px; align-items:flex-start; padding-right:44px }
.mdl-head .fav-btn { margin-left:auto; flex:none }
.mdl-title { min-width:0 }
.mdl-title h2 { font-size:26px }
.mdl-id { display:flex; align-items:center; gap:8px; margin:6px 0; flex-wrap:wrap }
.mdl-id code { font-size:13px }
.mdl-id .copy { position:static; height:26px }
.mdl-desc { color:var(--text-2); font-size:15.5px; margin:18px 0 }
.mdl-caps { margin-top:14px }
.mdl-caps .cap { height:28px; padding:0 10px }
.mdl-h { margin:26px 0 12px }
.mdl .cost-calc { padding:18px }
.mdl .code { margin-top:0 }
.mdl .codebar { margin-bottom:10px }
.mdl .hero-actions { margin-top:22px }
@media (max-width:600px) { .mdl-body { padding:20px } .mdl-head { flex-wrap:wrap } }

/* ---- Калькулятор расходов ------------------------------------------ */
.ucalc { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
.ucalc-form { padding:24px; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:4px }
.ucalc-presets { display:flex; flex-wrap:wrap; width:100% }
.ucalc-presets > * { flex:1 1 auto }
.ucalc-nums { margin-top:4px }
.ucalc-nums .field { margin-bottom:0 }
.ucalc-total { margin-top:18px; padding-top:18px; border-top:1px solid var(--border); display:grid; grid-template-columns:1fr auto; gap:12px 20px; align-items:end }
.ucalc-total b[data-uc-month] { display:block; font-size:40px; font-weight:700; letter-spacing:-.03em; line-height:1.05; margin:4px 0; font-variant-numeric:tabular-nums }
.ucalc-total dl { margin:0; display:grid; gap:6px; text-align:right }
.ucalc-total dt { font-size:12px; color:var(--text-3) }
.ucalc-total dd { margin:0; font-weight:600; font-variant-numeric:tabular-nums }
.ucalc-total .btn { grid-column:1 / -1; justify-self:start }
.ucalc-chart { padding:24px; background:var(--bg-2); min-width:0 }
.ucalc-chart-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px }
.ucb-list { display:flex; flex-direction:column; gap:2px }
.ucb {
  position:relative; display:grid; grid-template-columns:minmax(0,170px) minmax(0,1fr) 78px; gap:12px; align-items:center;
  width:100%; padding:6px 8px; border:0; border-radius:var(--r-sm); background:transparent; color:var(--text-2);
  font:inherit; font-size:13px; text-align:left; cursor:pointer;
}
.ucb:hover, .ucb:focus-visible { background:var(--surface) }
.ucb-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px }
.ucb-track { height:14px; display:block }
.ucb-track i { display:block; height:100%; min-width:3px; border-radius:0 4px 4px 0; background:var(--accent-line); transition:width .35s cubic-bezier(.2,.8,.2,1) }
.ucb-val { text-align:right; font-variant-numeric:tabular-nums; color:var(--text); font-weight:500 }
.ucb.on { color:var(--text); background:var(--surface) }
.ucb.on .ucb-name { font-weight:600 }
.ucb.on .ucb-track i { background:var(--accent) }
.ucb-tip {
  position:absolute; right:8px; bottom:calc(100% + 4px); z-index:5; padding:6px 10px; border-radius:var(--r-sm);
  background:var(--text); color:var(--bg); font-size:12px; white-space:nowrap; pointer-events:none;
  opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s;
}
.ucb:hover .ucb-tip, .ucb:focus-visible .ucb-tip { opacity:1; transform:none }
@media (max-width:900px) { .ucalc { grid-template-columns:minmax(0,1fr) } .ucalc-form { border-right:0; border-bottom:1px solid var(--border) } }
@media (max-width:520px) {
  .ucb { grid-template-columns:minmax(0,110px) minmax(0,1fr) 64px; gap:8px }
  .ucalc-total { grid-template-columns:1fr } .ucalc-total dl { text-align:left }
  .ucalc-total b[data-uc-month] { font-size:32px }
}

/* ---- Таблица «Tux99 и альтернативы» -------------------------------- */
.vs-table { min-width:720px }
.vs-table th { font-size:14px; text-transform:none; letter-spacing:0; vertical-align:bottom }
.vs-table td:first-child { color:var(--text); font-weight:500; width:34% }
.vs-table td { color:var(--text-2); font-size:13.5px; vertical-align:middle }
.vs-table .vs-us { background:var(--accent-soft); color:var(--text) }
.vs-table th.vs-us { color:var(--accent); font-size:16px }
.yes, .no, .part { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; margin-right:6px; vertical-align:middle }
.yes { background:var(--ok-bg); color:var(--ok) }
.no { background:var(--bad-bg); color:var(--bad) }
.part { background:var(--warn-bg); color:var(--warn) }
.yes .ico, .no .ico, .part .ico { width:14px; height:14px; stroke-width:2.4 }
.cmp-table .yes { width:auto; height:auto; background:none; gap:4px; border-radius:0; font-weight:500 }
.cmp-table .no { width:auto; height:auto; background:none; color:var(--text-3); border-radius:0 }

/* ---- Для бизнеса ---------------------------------------------------- */
.biz { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px; align-items:center }
.biz-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.biz-grid .card h3 { margin:14px 0 6px }
.biz-grid .card p { font-size:14px; margin:0 }
@media (max-width:960px) { .biz { grid-template-columns:minmax(0,1fr); gap:28px } }
@media (max-width:560px) { .biz-grid { grid-template-columns:minmax(0,1fr) } }

/* ---- FAQ ------------------------------------------------------------ */
.faq-wrap { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:48px; align-items:start }
.faq summary { transition:color .12s }
.faq summary:hover { color:var(--accent) }
@media (max-width:900px) { .faq-wrap { grid-template-columns:minmax(0,1fr); gap:24px } }

/* ---- Цены ----------------------------------------------------------- */
.formula { padding:28px }
.formula-row { display:flex; align-items:center; gap:20px; flex-wrap:wrap }
.formula-row > div { display:flex; flex-direction:column; gap:2px; min-width:140px }
.formula-row b { font-size:28px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.formula-row .op { font-size:28px; color:var(--text-3) }
.formula-total { padding:12px 18px; border-radius:var(--r-lg); background:var(--accent-soft); border:1px solid var(--accent-line) }
.formula-total b { color:var(--accent) }
@media (max-width:960px) { .price-split { grid-template-columns:minmax(0,1fr); gap:32px } }

/* ---- Сравнение ------------------------------------------------------ */
.cmp-picks { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
.cmp-slot { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px dashed var(--border-2); border-radius:var(--r-lg); background:var(--surface) }
.cmp-slot.filled { border-style:solid; border-color:var(--border) }
.cmp-slot select { flex:1; min-width:0; border:0 !important; background:transparent; padding:6px 0 !important; font-weight:600; box-shadow:none !important; color-scheme:light }
:root[data-theme="dark"] .cmp-slot select { color-scheme:dark }
.cmp-slot select option, .cmp-slot select optgroup { background:var(--surface); color:var(--text) }
.cmp-plus { color:var(--text-3); font-size:18px; background:var(--surface-2) }
.cmp-work { display:flex; flex-wrap:wrap; gap:12px 18px; align-items:flex-end; margin:16px 0 18px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-2) }
.cmp-work-t { font-weight:600; align-self:center }
.cmp-work label { margin:0; display:flex; flex-direction:column; gap:4px; font-size:12.5px }
.cmp-work input { width:150px; height:36px }
.cmp-work .btn { margin-left:auto }
.cmp-table { min-width:640px }
.cmp-table td.win { background:var(--ok-bg); color:var(--text); font-weight:600 }
.cmp-table th .ct-model a { font-size:13px }
@media (max-width:900px) { .cmp-picks { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px) { .cmp-picks { grid-template-columns:minmax(0,1fr) } .cmp-work .btn { margin-left:0 } .cmp-work input { width:120px } }

/* ---- Статус --------------------------------------------------------- */
.status-banner { display:flex; gap:14px; align-items:center; padding:18px 22px; border-radius:var(--r-lg); border:1px solid var(--ok-line); background:var(--ok-bg) }
.status-banner i { width:12px; height:12px; border-radius:50%; background:var(--ok); flex:none; box-shadow:0 0 0 5px color-mix(in srgb, var(--ok) 20%, transparent) }
.status-banner b { display:block; font-size:18px }
.status-banner span { color:var(--text-2); font-size:14px }
.status-banner.warn { border-color:var(--warn-line); background:var(--warn-bg) }
.status-banner.warn i { background:var(--warn) }
.status-list { display:flex; flex-direction:column; gap:10px }
.status-prov { border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); overflow:hidden }
.status-prov summary { display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer; list-style:none }
.status-prov summary::-webkit-details-marker { display:none }
.status-prov summary .name { flex:1; font-weight:600 }
.status-prov summary .name span { display:block; font-size:12.5px; font-weight:400; color:var(--text-3) }
.status-prov[open] summary { border-bottom:1px solid var(--border) }
.status-prov .status-row { border:0; border-radius:0; border-bottom:1px solid var(--border); padding:10px 18px 10px 54px; display:flex; justify-content:space-between }
.status-prov .status-row:last-child { border-bottom:0 }

/* ---- Документация --------------------------------------------------- */
.docs-main h1 { margin-bottom:12px }
.docs-main section > p, .docs-main section > ol { max-width:74ch }
.docs-main .table-wrap table { min-width:560px }
.docs-main td code, .docs-main th code { white-space:nowrap }
.code-tabs { margin-top:18px }
.code-tabs .codebar { margin-bottom:0; border-bottom:0 }

/* ---- Вход и регистрация -------------------------------------------- */
.auth-split { display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:56px; align-items:center; padding-top:56px; padding-bottom:80px }
.auth-card { padding:32px }
.auth-card h1 { font-size:28px }
.auth-aside h2 { margin-bottom:18px }
.auth-points, .auth-steps { list-style:none; padding:0; margin:0; display:grid; gap:14px }
.auth-points li { display:flex; gap:10px; color:var(--text-2) }
.auth-points .ico { width:20px; height:20px; flex:none; margin-top:1px }
.auth-points b { color:var(--text) }
.auth-steps { counter-reset:st }
.auth-steps li { counter-increment:st; display:grid; grid-template-columns:32px 1fr; gap:2px 12px }
.auth-steps li::before { content:counter(st); grid-row:span 2; width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:700; display:grid; place-items:center }
.auth-steps span { color:var(--text-2); font-size:14px }
.auth-code { margin-top:24px; padding:14px 16px; border-radius:var(--r-lg); background:var(--code-bg); color:var(--code-s); font-size:14px }
.pass-wrap { position:relative }
.pass-wrap input { width:100%; padding-right:92px !important }
.pass-toggle { position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--accent); font:inherit; font-size:13px; cursor:pointer; padding:6px 8px; border-radius:var(--r-sm) }
.pass-toggle:hover { background:var(--accent-soft) }
.field-error { color:var(--bad); font-size:14px; margin:0 0 12px }
.demo-note { margin-top:18px }
@media (max-width:860px) { .auth-split { grid-template-columns:minmax(0,1fr); gap:32px; padding-top:32px } }

/* ---- Tux Chat и Studio --------------------------------------------- */
.app .chat-app, .app .studio-grid { min-height:calc(100dvh - var(--nav-h)) }
.chat-main { min-width:0 }
.chat-log { min-height:300px }
.bubble { white-space:pre-wrap }
.bubble-meta { margin-top:8px; font-size:12px; color:var(--text-3); white-space:normal }
.chat-hints { display:flex; gap:8px; flex-wrap:wrap; padding:0 16px 12px }
.chat-hints .chip { height:auto; min-height:32px; padding:6px 12px; white-space:normal; text-align:left }
.chat-input textarea { resize:none }
.chat-facts { margin:0; display:grid; gap:6px }
.chat-facts div { display:flex; justify-content:space-between; font-size:13px }
.chat-facts dt { color:var(--text-3) }
.chat-facts dd { margin:0; font-weight:600; font-variant-numeric:tabular-nums }
@media (max-width:960px) {
  .chat-app { grid-template-columns:minmax(0,1fr) }
  .chat-col { border-right:0 !important; border-left:0 !important; border-bottom:1px solid var(--border) }
  .chat-side { display:none }
  .studio-grid { grid-template-columns:minmax(0,1fr) }
  .studio-form { border-right:0; border-bottom:1px solid var(--border) }
}

/* ---- О сервисе, безопасность, правовые ------------------------------ */
.flow { display:flex; align-items:stretch; gap:12px }
.flow-step { flex:1; display:flex; flex-direction:column; gap:4px; padding:20px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface) }
.flow-step span:last-child { color:var(--text-2); font-size:14px }
.flow-step b { font-size:17px }
.flow-step.on { border-color:var(--accent); background:var(--accent-soft) }
.flow-n { width:26px; height:26px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; font-size:13px; font-weight:700; color:var(--text-2); margin-bottom:6px }
.flow-step.on .flow-n { background:var(--accent); color:var(--accent-text) }
.flow-arrow { align-self:center; color:var(--text-3); font-size:22px }
@media (max-width:760px) { .flow { flex-direction:column } .flow-arrow { transform:rotate(90deg) } }
.plain-list { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:10px }
.plain-list li { color:var(--text-2); padding-left:18px; position:relative }
.plain-list li::before { content:""; position:absolute; left:2px; top:.65em; width:6px; height:6px; border-radius:50%; background:var(--border-2) }
.contact-list { display:grid; gap:4px; margin-top:12px }
.contact-list a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); color:var(--text) }
.contact-list a:hover b { color:var(--accent) }
.store-card h3 { display:flex; align-items:center; gap:8px }
.store-card h3 .ico { width:20px; height:20px }
.no-ico { color:var(--bad) }
.yes-card { border-top:3px solid var(--ok) }
.no-card { border-top:3px solid var(--bad) }
.legal h2:first-child { margin-top:0 }
.requisites p { margin:0 0 6px; color:var(--text-2) }
.nf { padding:40px 0 }
.nf .err-code { font-size:120px; background:linear-gradient(135deg, var(--accent), #ff7ab6); -webkit-background-clip:text; background-clip:text; color:transparent }

/* ---- Мелочи --------------------------------------------------------- */
.nav-search-dd .sug-empty { padding:12px 14px; color:var(--text-3); font-size:13.5px }
.dash-balance { font-size:15px; font-weight:600; color:var(--text); padding:8px 14px; border:1px solid var(--border); border-radius:999px; background:var(--surface) }
.secret-box pre { white-space:pre-wrap; word-break:break-all }
.secret-box #newSecret { word-break:break-all }
/* место справа под кнопки карточки: звезда — 40px, звезда + «сравнить» — 76px */
.mc-head { padding-right:40px }
.model-card:has(.cmp) .mc-head { padding-right:76px }
.mc-name b { overflow-wrap:anywhere }
/* широкие таблицы на телефоне прокручиваются, а не обрезаются; relative —
   чтобы скрытые подписи (.sr-only) не вылезали за обёртку и не давали
   горизонтальную прокрутку всей страницы */
.table-wrap { overflow-x:auto; position:relative }
.yes, .no, .part { position:relative }
code:not(.code code) { overflow-wrap:anywhere }
@media (max-width:900px) { .code-split { grid-template-columns:minmax(0,1fr) } }
.term { max-width:100%; overflow-x:auto }
.cmp-table thead th a { color:var(--text); font-weight:600 }
.cmp-table thead th a:hover { color:var(--accent) }

/* домен в логотипе: Tux99.me */
.logo-name { white-space:nowrap }
.logo-tld { color:var(--accent); font-weight:600 }

/* ---- Админка -------------------------------------------------------- */
.adm-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px }
@media (max-width:800px) { .adm-row { grid-template-columns:minmax(0,1fr) } }
.adm-search { width:min(320px, 100%) }
.adm-blocked td { opacity:.6 }
.adm-blocked td:last-child { opacity:1 }
.adm-pos { color:var(--ok) }
.adm-neg { color:var(--bad) }
.adm-denied { max-width:560px }
.adm-denied .btn { margin-top:14px }
dialog.adm-dlg { width:min(460px, calc(100vw - 24px)) }
#admUsers td { vertical-align:middle }

/* ---- Логотип: пиксельный Тукс ------------------------------------- */
.logo .mark, .fbrand img { border-radius:0; image-rendering:pixelated; image-rendering:crisp-edges }
.logo .mark { width:30px; height:30px }

/* ---- Вход по ключу, оплата, живой чат и Studio (2026-10) ------------ */
.tag-soon { font-size:10px; font-weight:700; line-height:1; padding:3px 5px; border-radius:5px; background:var(--surface-3); color:var(--text-2); text-transform:uppercase; letter-spacing:.04em }
.auth-seg { display:flex; width:100%; margin:0 0 18px }
.auth-seg > * { flex:1 1 0 }
.keyreg-nick { display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:var(--r-lg); background:var(--accent-soft); border:1px solid var(--accent-line); margin-bottom:14px }
.keyreg-nick b { font-size:22px; font-family:var(--mono); color:var(--accent); word-break:break-all }
.keyreg-key { font-size:15px; letter-spacing:.02em; word-break:break-all; white-space:normal }
.btn.disabled, .btn[aria-disabled="true"] { opacity:.5; pointer-events:auto; cursor:not-allowed }
.warn-text { color:var(--warn); margin:8px 0 12px }
.login-key-card .code { margin-bottom:8px; white-space:normal; word-break:break-all }

.pay-card { display:flex; flex-direction:column; gap:14px; padding:28px }
.pay-top { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap }
.pay-top .input-group { max-width:220px }
.pay-sum { text-align:right }
.pay-sum b { display:block; font-size:30px; font-weight:700; letter-spacing:-.02em }
.pay-methods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:6px 0 4px }
.pay-method { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:1px dashed var(--border-2); border-radius:var(--r-lg); background:var(--bg-2); color:var(--text-2); font:inherit; text-align:left; cursor:not-allowed }
.pay-method b { color:var(--text); font-size:14px }
.pay-method span { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3) }
@media (max-width:560px) { .pay-methods { grid-template-columns:minmax(0,1fr) } .pay-sum { text-align:left } }

.chat-list { display:flex; flex-direction:column; gap:2px }
.chat-list .chat-item { border:0; background:transparent; font:inherit; text-align:left; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.chat-gate { margin:24px; }
.chat-empty { margin:auto; text-align:center; max-width:420px; padding:40px 16px }
.chat-empty h3 { margin-bottom:6px }
.bubble.typing:empty::after { content:"…"; color:var(--text-3) }
.bubble-err { border-color:var(--bad-line); background:var(--bad-bg); color:var(--bad) }
.chat-input .btn.danger { color:var(--bad) }
.chat-input textarea:disabled { opacity:.6 }

.studio-canvas .art.loading { animation:studio-pulse 1.2s ease-in-out infinite alternate }
@keyframes studio-pulse { from { opacity:.35 } to { opacity:.8 } }
.art-out { margin:0; display:flex; flex-direction:column; gap:8px; align-items:flex-start }
.art-out img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; border:1px solid var(--border); background:var(--surface) }

.code-card-plain { min-width:0 }
.code-card-plain .codebar { margin-bottom:0; border-bottom:0 }
@media (max-width:900px) { .code-promo { grid-template-columns:minmax(0,1fr) } }

/* ---- Коды: активация, пакеты в кабинете, партии в админке ---- */
.redeem-input { font-size:17px; letter-spacing:.06em; text-transform:uppercase }
@media (max-width:420px) { .redeem-input { font-size:14px; letter-spacing:.02em } .auth-card { padding:24px 20px } }
.redeem-title { margin-top:10px; font-size:clamp(22px, 3vw, 28px) }
.redeem-done .code pre { white-space:pre; overflow-x:auto }
.redeem-done { scroll-margin-top:96px }
.auth-split.is-done { grid-template-columns:minmax(0,760px); justify-content:center }
.auth-split.is-done .auth-aside { display:none }
.linklike { background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer }
.dash-hero-side { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.pkg-bar { height:6px; border-radius:99px; background:var(--border); overflow:hidden; margin-top:6px; max-width:180px }
.pkg-bar i { display:block; height:100%; background:var(--accent); border-radius:inherit }
.pkg-bar.empty i { background:var(--bad) }
.adm-cost { padding:12px 14px; border-radius:var(--r-lg); background:var(--accent-soft); border:1px solid var(--accent-line); font-size:13px; line-height:1.55; margin:6px 0 14px }
.adm-cost b { font-size:14px }
.adm-codes-text { width:100%; min-height:220px; font-family:var(--mono); font-size:13px; line-height:1.6; padding:12px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--surface-2); color:inherit; resize:vertical }
.adm-quick { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px }
.adm-quick button { font-size:12px; padding:3px 9px; border-radius:99px; border:1px solid var(--border); background:none; color:var(--text-2); cursor:pointer }
.adm-quick button:hover { border-color:var(--accent-line); color:var(--accent) }

/* =====================================================================
   Tux-стиль (2026-10): спокойный минимализм со своим характером.
   Цвета пингвина — графитовое тело, жёлтый/оранжевый клюв, тёплая «бумага».
   Пиксельные детали в тон маскоту: жёсткие тени у кнопок, квадратики-маркеры.
   Слой последний — переопределяет всё, что выше.
   ===================================================================== */
:root {
  --bg:#fbfaf6; --bg-2:#f5f3ed; --surface:#ffffff; --surface-2:#f6f4ee; --surface-3:#ece9e1;
  --border:#e7e3d9; --border-2:#d5d0c3;
  --text:#161824; --text-2:#5d5a52; --text-3:#8f8a7e;
  --accent:#b85a0c; --accent-dark:#9a4a08; --accent-soft:#fff3df; --accent-line:#ffd9a6; --accent-text:#ffffff;
  --pix:#ffc53d; --pix-2:#f08a24;
  --r-sm:4px; --r-md:6px; --r-lg:10px; --r-xl:12px;
  --shadow:none; --shadow-xs:none; --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
  --ring:0 0 0 3px rgba(255,197,61,.55);
  --nav-h:60px;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#0e1017; --bg-2:#121522; --surface:#141826; --surface-2:#1a1f30; --surface-3:#232a3f;
  --border:#232a3d; --border-2:#323b56;
  --text:#f1efe8; --text-2:#a9adbd; --text-3:#6e7488;
  --accent:#ffc53d; --accent-dark:#ffd56e; --accent-soft:#29230f; --accent-line:#4b3d16; --accent-text:#161824;
  --pix:#f08a24; --pix-2:#ffc53d;
  --ring:0 0 0 3px rgba(255,197,61,.35);
  color-scheme:dark;
}
::selection { background:var(--pix); color:#161824 }
body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }

/* типографика: крупно и плотно */
h1,h2,h3,h4 { font-weight:650; letter-spacing:-.03em }
h1 { letter-spacing:-.04em; line-height:1.04 }
.hero h1, .hero-grid h1 { font-size:clamp(40px,5.2vw,66px); max-width:14ch; line-height:1.03; letter-spacing:-.045em }
h2 { font-size:clamp(28px,3.3vw,40px); line-height:1.1 }
.lead { font-size:18px; line-height:1.6; color:var(--text-2) }
.sec { padding-block:96px }
.sec.tight { padding-block:56px }
.sec.alt { background:var(--bg-2); border-color:var(--border) }
.hero { padding:96px 0 80px }

/* подписи разделов: моноширинный шрифт и пиксельный квадратик */
.eyebrow { font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.06em; color:var(--text-2);
  display:inline-flex; align-items:center; gap:10px }
.eyebrow::before { content:""; width:8px; height:8px; background:var(--pix); box-shadow:3px 3px 0 var(--pix-2); flex:none }

/* фон без размытых пятен */
.hero, .home .hero { background:var(--bg) }
.home .hero::before { display:none }
.clx-hero, .ov-balance { background:var(--surface) }
.nf .err-code { background:none; -webkit-text-fill-color:currentColor; color:var(--text) }

/* шапка */
header.nav { background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--border) }
.links .link { color:var(--text-2) }
.links .link:hover { color:var(--text) }
a:hover { color:var(--accent) }
.link-u { color:var(--text); border-bottom:2px solid var(--pix) }
.link-u:hover { color:var(--text); border-color:var(--pix-2) }
.cmp-guide-link, .cmp-guide-link:hover { border-bottom:0 !important; text-decoration:none }

/* кнопки: графитовая основная с пиксельной тенью; при нажатии «вдавливается» */
.btn { border-radius:var(--r-md); font-weight:550; transition:transform .08s, box-shadow .08s, background .15s, border-color .15s, color .15s }
.btn.primary { background:var(--text); border-color:var(--text); color:var(--bg); box-shadow:3px 3px 0 var(--pix) }
.btn.primary:hover { background:var(--text); border-color:var(--text); color:var(--bg);
  transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--pix) }
.btn.primary:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--pix) }
.btn:not(.primary):not(.danger) { background:var(--surface); border-color:var(--border-2); color:var(--text); box-shadow:none }
.btn:not(.primary):not(.danger):hover { background:var(--surface); border-color:var(--text); color:var(--text); box-shadow:2px 2px 0 var(--border-2) }
.btn.ghost { border-color:transparent !important; background:transparent !important; box-shadow:none !important }
.btn.ghost:hover { background:var(--surface-2) !important }

/* карточки: плоские, на hover — лёгкий пиксельный сдвиг */
.card, .kpi, .model-card, .ring-card, .cost-calc, .review, .client-card, .code-card, .tile, .ov-card, .ov-balance,
.table-wrap, .table, .badges .badge, .announce, .code-banner { box-shadow:none }
.model-card, .ring-card, .ov-card, .tile, .code-banner { transition:transform .12s, box-shadow .12s, border-color .12s }
.model-card:hover, .ring-card:hover, .ov-card:hover, .tile:hover, .code-banner:hover {
  transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--border-2); border-color:var(--text-3) }
.model-card, .model-card:hover { border-top-color:var(--border) }
.model-card:hover { border-top-color:var(--text-3) }
.code-card { border-radius:var(--r-lg); box-shadow:6px 6px 0 var(--surface-3) }
.ava { background:var(--surface-2) !important; border-radius:var(--r-md) }

/* всплывающие меню и окна — мягкая тень, чтобы отделялись от страницы */
.nav-dd-menu, .nav-search-dd, .cmp-bar, dialog.mdl { box-shadow:0 14px 40px -14px rgba(22,24,36,.22) }
:root[data-theme="dark"] .nav-dd-menu, :root[data-theme="dark"] .nav-search-dd, :root[data-theme="dark"] dialog.mdl { box-shadow:0 14px 40px -14px rgba(0,0,0,.8) }

/* метки и бейджи */
.tag-soon { background:var(--accent-soft); color:var(--accent); border-color:transparent; font-family:var(--mono) }
.announce { background:var(--surface); border-color:var(--border-2); color:var(--text-2) }
.announce:hover { color:var(--text); border-color:var(--text) }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { border-radius:var(--r-md) }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color:var(--text); box-shadow:var(--ring) }
@media (prefers-reduced-motion: reduce) { .btn, .model-card, .ring-card, .ov-card, .tile { transition:none } }

/* ---- Питомец: пиксельный Тукс гуляет по сайту (static/pet.js) ---- */
.tux-pet { position:fixed; left:0; top:0; z-index:96; cursor:grab; will-change:transform; -webkit-tap-highlight-color:transparent;
  touch-action:none; -webkit-user-select:none; user-select:none }
.tux-pet.is-air { pointer-events:none }                       /* летит или висит на курсоре — клики проходят сквозь него */
html.pet-dragging, html.pet-dragging * { cursor:grabbing !important; -webkit-user-select:none; user-select:none }
.tux-pet canvas { display:block; width:100%; height:100%; image-rendering:pixelated; image-rendering:crisp-edges }
.tux-pet-zz { position:fixed; left:0; top:0; z-index:96; pointer-events:none; font:600 12px/1 var(--mono); color:var(--text-3);
  letter-spacing:.2em; animation:tux-zz 2.4s ease-in-out infinite }
@keyframes tux-zz { 0%,100% { opacity:.25; margin-top:4px } 50% { opacity:1; margin-top:-4px } }
.has-pet .hero-vk, .has-pet .foot-vk { display:none }
.pet-toggle { background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer }
.pet-toggle:hover { color:var(--text) }
@media print { .tux-pet, .tux-pet-zz { display:none } }

/* ---- Компоновка Tux99 (2026-10): плавающая шапка, док с кнопками внизу, первый экран по центру ---- */
header.nav { top:10px; width:min(1180px, calc(100% - 24px)); margin:10px auto 0; border:1px solid color-mix(in srgb, var(--border) 68%, transparent);
  border-radius:var(--r-xl); background:color-mix(in srgb, var(--surface) 58%, transparent); backdrop-filter:saturate(170%) blur(20px);
  -webkit-backdrop-filter:saturate(170%) blur(20px) }
body { padding-bottom:0 }

.dock { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:95; display:flex; align-items:center; gap:2px;
  padding:6px; max-width:calc(100% - 24px); background:var(--surface); border:1px solid var(--border-2); border-radius:14px;
  box-shadow:4px 4px 0 var(--pix) }
.dock-link { display:inline-flex; align-items:center; height:36px; padding:0 12px; border-radius:var(--r-md); font-size:14px;
  font-weight:500; color:var(--text-2); white-space:nowrap }
.dock-link:hover { background:var(--surface-2); color:var(--text) }
.dock-code { color:var(--text) }
.dock-code::before { content:""; width:7px; height:7px; margin-right:8px; background:var(--pix-2); flex:none }
.dock-sep { width:1px; height:24px; background:var(--border); margin:0 6px; flex:none }
.dock .nav-auth { display:flex; gap:6px; align-items:center }
.dock .btn { height:36px; padding:0 14px; font-size:14px; white-space:nowrap }
.dock .btn.primary { box-shadow:2px 2px 0 var(--pix) }
.dock .btn.primary:hover { box-shadow:3px 3px 0 var(--pix) }

/* Вход в кабинет всегда виден в шапке; сам кабинет содержит ключи, баланс и аналитику. */
.nav-account { flex:none; height:36px; padding-inline:14px; border-color:var(--accent-line); color:var(--accent); font-size:13px }
.nav-account:hover { background:var(--accent-soft); color:var(--accent) }

/* Распределение запросов по моделям в кабинете. */
.model-usage { display:grid; grid-template-columns:128px minmax(0,1fr); align-items:center; gap:14px; margin-top:14px; min-width:0 }
.model-donut-wrap { width:120px; height:120px; position:relative; margin:auto }
.model-donut { display:block; width:100%; height:100%; overflow:visible }
.model-donut-track { fill:none; stroke:var(--surface-3); stroke-width:13 }
.model-donut-center { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; pointer-events:none }
.model-donut-center b { font:700 19px/1.1 var(--mono); font-variant-numeric:tabular-nums }
.model-donut-center span { margin-top:4px; color:var(--text-3); font-size:10px }
.model-usage-legend { display:grid; gap:7px; min-width:0; max-height:180px; overflow:auto; padding-right:2px }
.model-usage-row { display:grid; grid-template-columns:8px minmax(0,1fr) auto 34px auto; align-items:center; gap:7px; min-width:0; font-size:11.5px }
.model-usage-row > i { width:8px; height:8px; border-radius:50% }
.model-usage-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px }
.model-usage-row > b { font-family:var(--mono); font-size:11px; font-variant-numeric:tabular-nums }
.model-usage-row > span:not(.model-usage-name) { text-align:right; font-variant-numeric:tabular-nums }
.model-usage-cost { min-width:54px; font-family:var(--mono); font-size:10.5px }
.model-usage-empty { grid-column:1/-1; margin:12px 0; text-align:center }
.chat-settings { margin-top:16px; padding:12px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface) }
.chat-settings > summary { cursor:pointer; list-style:none; font-size:13px; font-weight:650; display:flex; align-items:center; justify-content:space-between; gap:8px }
.chat-settings > summary::-webkit-details-marker { display:none }
.chat-settings > summary::after { content:"+"; color:var(--accent); font-size:18px; line-height:1 }
.chat-settings[open] > summary::after { content:"−" }
.chat-settings-body { display:grid; gap:8px; margin-top:12px }
.chat-setting-label, .chat-setting-line { font-size:11.5px; font-weight:600; color:var(--text-2) }
.chat-settings-body select { width:100%; min-width:0; height:36px; font-size:12px }
.chat-settings-body textarea { width:100%; min-height:70px; resize:vertical; padding:8px 10px; font:12px/1.5 var(--sans); border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-2); color:var(--text) }
.chat-setting-line { display:flex; align-items:center; justify-content:space-between; gap:8px }
.chat-setting-line b { color:var(--accent); font:600 12px var(--mono) }
.chat-range { width:100%; accent-color:var(--accent) }
.chat-connector-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px }
.chat-connector-head b { font-size:12px }
.chat-connector-head .btn { height:30px; padding:0 9px; font-size:11px }
.chat-settings-body > .small { font-size:10.5px; line-height:1.45; margin:0 }
.chat-source-list { display:grid; gap:4px }
.chat-source { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; padding:5px 7px; border-radius:var(--r-sm); background:var(--surface-2); font-size:11px }
.chat-source span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.chat-source button { flex:none; border:0; background:transparent; color:var(--text-3); font-size:17px; line-height:1; cursor:pointer }
.chat-source button:hover { color:var(--bad) }
.account-settings-card hr { margin:14px 0 4px }
.account-settings-card h4 { margin:0; font-size:14px }
.telegram-link-code { display:grid; gap:8px; margin-top:10px; padding:10px; border:1px solid var(--accent-line); border-radius:var(--r-md); background:var(--accent-soft) }
.telegram-link-code code { font:600 13px var(--mono); overflow-wrap:anywhere }
.telegram-link-code a { color:var(--accent); font-size:12px; font-weight:600 }
.telegram-link-code .copy { position:static; justify-self:start }
@media(max-width:560px) {
  .model-usage { grid-template-columns:1fr; gap:12px }
  .model-donut-wrap { width:132px; height:132px }
  .model-usage-legend { max-height:220px }
  .model-usage-row { font-size:12px }
}

/* Чекбокс сравнения: чёткое состояние, контрастная галочка и заметный фокус клавиатуры. */
.model-card .mc-tools .cmp { position:relative; width:30px; height:30px; flex:none; border:1px solid var(--border-2); border-radius:9px;
  background:var(--surface-2); transition:background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease }
.model-card .mc-tools .cmp:hover { border-color:var(--accent); transform:translateY(-1px) }
.model-card .mc-tools .cmp input { position:absolute; inset:0; width:100%; height:100%; margin:0; appearance:none; -webkit-appearance:none;
  border:0; border-radius:inherit; background:transparent; cursor:pointer; outline:none }
.model-card .mc-tools .cmp:has(input:checked) { border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent) }
.model-card .mc-tools .cmp:has(input:checked)::after { content:""; position:absolute; left:10px; top:7px; width:6px; height:10px;
  border:solid var(--accent-text); border-width:0 2px 2px 0; transform:rotate(45deg); pointer-events:none }
.model-card .mc-tools .cmp:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:3px }
@media(max-width:1240px) { .nav-account { display:none } }
@media (max-width:760px) {
  .dock { left:8px; right:8px; bottom:8px; transform:none; max-width:none; justify-content:space-between }
  .dock-link:not(.dock-code), .dock-sep { display:none }
  .dock .btn { padding:0 10px }
}
@media (max-width:380px) { .dock-code::before { display:none } .dock-link { padding:0 8px } }

.funpay-card h3 { margin-bottom:4px }
.funpay-steps { list-style:none; counter-reset:fp; margin:16px 0 20px; padding:0; display:grid; gap:14px; text-align:left }
.funpay-steps li { counter-increment:fp; display:grid; grid-template-columns:30px 1fr; gap:2px 12px }
.funpay-steps li::before { content:counter(fp); grid-row:span 2; width:28px; height:28px; display:grid; place-items:center;
  font:600 13px/1 var(--mono); background:var(--pix); color:#161824; box-shadow:2px 2px 0 var(--pix-2) }
.funpay-steps b { font-weight:600 }
.funpay-steps span { color:var(--text-2); font-size:14px }

/* ---- Английская версия (static/i18n.js) ---- */
html.i18n-wait body { opacity:0 }
.lang-btn { font:600 12px/1 var(--mono); letter-spacing:.04em }

/* ---- Телефон (2026-10): док, чат, каталог, документация, кабинет, подвал ---- */
/* код в демо на первом экране — слева, как в редакторе (сам первый экран выровнен по центру) */
.hero-demo .sw-code, .hero-demo .sw-facts { text-align:left }
.chat-mbar { display:none }

@media (max-width:980px) {
  /* чат без боковых колонок: модель, новый чат, история и баланс — панелью над перепиской */
  .chat-mbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); background:var(--surface) }
  .chat-mbar select { height:40px; min-width:0 }
  .chat-mbar .btn { height:40px; white-space:nowrap }
  .chat-mbar-hist, .chat-mbar-meta { grid-column:1 / -1 }
  .chat-mbar-meta { font-size:12.5px; color:var(--text-3); font-variant-numeric:tabular-nums }
}

@media (max-width:900px) {
  /* документация: разделы — прилипающей лентой под шапкой, листается вбок */
  .docs-side { position:sticky; top:calc(var(--nav-h) + 18px); z-index:20; flex-wrap:nowrap; overflow-x:auto; gap:4px;
    margin:0 -20px; padding:8px 20px; background:color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); scrollbar-width:none }
  .docs-side::-webkit-scrollbar { display:none }
  .docs-side b { display:none }
  .docs-side a { flex:none; white-space:nowrap; padding:6px 12px }
  .docs-main section { scroll-margin-top:calc(var(--nav-h) + 76px) }
}

@media (max-width:760px) {
  /* док: «Активировать код» и одна кнопка — вход или кабинет; остальное в меню ☰ */
  .dock .nav-auth .btn.ghost { display:none }
  /* в чате и Studio дока нет: внизу поле ввода */
  .app .dock { display:none }
  body.app { padding-bottom:0 }
  .app .chat-app { height:calc(100dvh - var(--nav-h) - 22px); min-height:0 }
  .app .chat-main, .app .chat-log { min-height:0 }
  .chat-input { padding:10px 12px; padding-bottom:max(10px, env(safe-area-inset-bottom)) }
  .chat-input .btn { white-space:nowrap; padding:0 14px }
  .chat-log { padding:16px 12px }

  /* первый экран без пустого зазора под шапкой */
  .hero-centered { padding:28px 0 28px }
  .hero-demo { margin-top:32px }
  .announce { font-size:12.5px }

  /* популярные модели — лентой, листается пальцем */
  .model-grid.four { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:-20px;
    padding:4px 20px 12px; scrollbar-width:none; overscroll-behavior-x:contain }
  .model-grid.four::-webkit-scrollbar { display:none }
  .model-grid.four > .model-card { flex:0 0 84%; scroll-snap-align:center }

  /* калькулятор: три числа в одну строку */
  .ucalc .ucalc-nums { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
  .ucalc .ucalc-nums label { font-size:12px; line-height:1.25; min-height:2.5em; display:flex; align-items:flex-end }

  /* таблица сравнения: первый столбец остаётся на месте при прокрутке вбок */
  .vs-table th:first-child, .vs-table td:first-child { position:sticky; left:0; z-index:1; background:var(--surface);
    min-width:132px; box-shadow:1px 0 0 var(--border) }

  /* каталог: типы моделей одной лентой */
  .cat-bar .chips { flex-wrap:nowrap; overflow-x:auto; margin-inline:-20px; padding:2px 20px; scrollbar-width:none; max-width:calc(100% + 40px) }
  .cat-bar .chips::-webkit-scrollbar { display:none }
  .cat-bar .chips .chip { flex:none }

  /* подвал: ссылки в две колонки */
  .foot { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 16px }
  .foot > div:first-child { grid-column:1 / -1 }

  /* поля не меньше 16px — иначе iPhone приближает страницу при фокусе */
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size:16px }
}

@media (max-width:640px) {
  /* кабинет: сначала ключи и пакеты, потом форма; таблицы — карточками */
  .dash-hero > .wrap { display:flex; flex-direction:column }
  .dash-keys { order:1 } .dash-forms { order:2 } .dash-log-head, .dash-log { order:3 }
  .dash-forms .grid.g3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
  .dash-forms .grid.g3 label { font-size:12px; line-height:1.25; min-height:2.5em; display:flex; align-items:flex-end }
  .table-wrap.rt-wrap { border:0; background:none; overflow:visible; box-shadow:none }
  table.rt { min-width:0 !important }
  table.rt thead { display:none }
  table.rt, table.rt tbody, table.rt tr { display:block; width:100% }
  table.rt tr { border:1px solid var(--border); border-radius:var(--r-lg); padding:8px 14px; margin-bottom:10px; background:var(--surface) }
  table.rt tr:hover td { background:none }
  table.rt td { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0 !important;
    border:0 !important; text-align:right; width:auto }
  table.rt td[data-l]::before { content:attr(data-l); color:var(--text-3); font-size:12.5px; font-weight:400; text-align:left; flex:none }
  table.rt td:first-child { display:block; text-align:left; padding-bottom:8px !important; border-bottom:1px solid var(--border) !important; margin-bottom:4px }
  table.rt td:empty { display:none }
  table.rt td.muted { display:block; text-align:left }
  table.rt .keys-actions { justify-content:flex-start; flex-wrap:wrap; gap:8px; padding-top:10px !important }
  table.rt .rt-v { text-align:right; min-width:0 }
  table.rt .rt-v .pkg-bar { margin-left:auto }
}

@media (max-width:520px) {
  /* каталог: фильтры в две колонки вместо пяти строк */
  .cat-toolbar { grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .cat-toolbar .view-toggle { justify-self:end }
}

@media (max-width:400px) {
  /* узкий телефон: «Войти» остаётся в меню ☰, чтобы в док влезла «Купить на FunPay» */
  .dock .nav-auth a[href="/login"] { display:none }
  /* ленты до краёв экрана — под отступ .wrap в 16px */
  .model-grid.four, .cat-bar .chips, .docs-side { margin-inline:-16px; padding-left:16px; padding-right:16px }
  .cat-bar .chips { max-width:calc(100% + 32px) }
}

/* Главная: продуктовый первый экран с демонстрацией рядом с обещанием. */
.hero-centered { text-align:left; padding:clamp(40px,6vw,76px) 0 32px }
.hero-main { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(28px,5vw,68px); align-items:center }
.hero-centered .hero-copy { width:100%; max-width:590px; display:flex; flex-direction:column; align-items:flex-start; position:relative }
.hero-centered h1 { max-width:16ch; margin-inline:0; font-size:clamp(42px,4.6vw,60px); line-height:1.02; letter-spacing:-.045em }
.hero-centered .lead { max-width:56ch; margin-inline:0; font-size:clamp(16px,1.4vw,18px); line-height:1.65 }
.hero-centered .hero-actions.center { justify-content:flex-start }
.hero-centered .hero-points { justify-content:flex-start; gap:9px 15px; font-size:13px }
.hero-centered .hero-more { margin-top:14px }
.hero-centered .hero-demo { width:100%; max-width:none; margin:0; padding:18px; border:1px solid color-mix(in srgb,var(--border) 68%,transparent); border-radius:var(--r-lg); background:color-mix(in srgb,var(--surface) 58%,transparent); backdrop-filter:saturate(165%) blur(18px); -webkit-backdrop-filter:saturate(165%) blur(18px); box-shadow:6px 6px 0 color-mix(in srgb,var(--pix) 78%,transparent) }
.hero-demo-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border) }
.hero-demo-kicker { color:var(--text-2); font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase }
.hero-demo-status { display:inline-flex; align-items:center; gap:7px; color:var(--text-2); font-size:12px }
.hero-demo-status i { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--pix-2); box-shadow:0 0 0 3px color-mix(in srgb,var(--pix-2) 16%,transparent) }
.hero-centered .hero-vk { right:-4px; top:-32px }
.hero-centered .hero-stats { margin:38px 0 20px }
.hero-demo .sw-code,.hero-demo .sw-facts { text-align:left }
.compare-teaser { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center }
.compare-teaser h2 { max-width:18ch }
.compare-teaser .sub { max-width:64ch; margin-bottom:0 }
.compare-teaser-links { display:grid; justify-items:start; gap:12px; min-width:215px }
@media(min-width:761px) { body:has(.hero-centered) .dock { display:none } }

@media(max-width:980px) {
  .hero-main { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px }
  .hero-centered .hero-demo { padding:14px }
  .hero-centered .hero-stats { margin-top:30px }
}
@media(max-width:760px) {
  .hero-centered { padding:34px 0 26px }
  .hero-main { grid-template-columns:1fr; gap:34px }
  .hero-centered .hero-copy { max-width:100% }
  .hero-centered h1 { font-size:clamp(42px,11vw,60px); max-width:13ch }
  .hero-centered .hero-points { display:grid; grid-template-columns:1fr; gap:9px }
  .hero-centered .hero-demo { padding:12px; box-shadow:4px 4px 0 var(--pix) }
  .hero-centered .hero-vk { top:-26px; right:-4px }
  .hero-centered .hero-stats { margin-top:28px }
  .compare-teaser { grid-template-columns:1fr; gap:20px }
  .compare-teaser-links { grid-template-columns:1fr 1fr; min-width:0; align-items:center; gap:12px 20px }
  .compare-teaser-links .btn { grid-column:1 / -1 }
}
@media(max-width:420px) {
  .compare-teaser-links { grid-template-columns:1fr }
  .compare-teaser-links .btn { grid-column:auto }
}

.tc-page{--tc-bg:#101115;--tc-panel:#15171d;--tc-panel-2:#191b22;--tc-border:#292c35;--tc-muted:#8b8f9d;--tc-text:#ececf0;--tc-accent:#f3a436;min-height:100dvh;background:var(--tc-bg);color:var(--tc-text);font:13px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;display:flex;flex-direction:column}.tc-page button,.tc-page select,.tc-page textarea{font:inherit}.tc-top{height:58px;flex:none;display:flex;align-items:center;gap:24px;padding:0 22px;border-bottom:1px solid var(--tc-border);background:#131419}.tc-brand{display:flex;align-items:center;gap:9px;color:var(--tc-text);font-size:15px;font-weight:650;text-decoration:none}.tc-brand-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:linear-gradient(145deg,#ffca72,#ea8f2b);color:#171717;font-size:17px}.tc-brand b{color:#f6b14c}.tc-project{flex:1;color:#a7a9b3}.tc-project i,.tc-tab>i{display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;background:#f2a43a;vertical-align:middle}.tc-top-actions{display:flex;gap:8px}.tc-top .btn,.tc-editor .btn,.tc-proposal .btn{min-height:32px;padding:0 11px;border:1px solid #343742;border-radius:7px;background:#1a1c23;color:#ddd;font-size:12px}.tc-top .btn.primary,.tc-proposal .btn.primary{background:#f3a436;border-color:#f3a436;color:#191817;font-weight:650}.tc-top .btn:disabled{opacity:.45}.tc-workspace{flex:1;min-height:calc(100dvh - 58px);display:grid;grid-template-columns:245px minmax(280px,1fr) 380px}.tc-files,.tc-agent{background:var(--tc-panel)}.tc-files{border-right:1px solid var(--tc-border);display:flex;flex-direction:column;min-width:0}.tc-pane-head{height:45px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;color:#888c98;font-size:10px;letter-spacing:.12em;font-weight:700}.tc-pane-head button{border:0;background:none;color:#b8bac2;font-size:20px;cursor:pointer}.tc-empty-files{margin:auto 18px;display:flex;align-items:center;flex-direction:column;text-align:center;gap:9px;color:#e2e2e7}.tc-folder-icon{display:grid;place-items:center;width:45px;height:45px;margin-bottom:6px;border:1px solid #333641;border-radius:13px;color:#f2aa45;font-size:25px}.tc-empty-files b{font-size:13px}.tc-empty-files p{margin:0 0 8px;color:var(--tc-muted);font-size:11px;line-height:1.6}.tc-empty-files .btn{padding:8px 11px;border:1px solid #3a3d47;border-radius:7px;background:#20222a;color:#e9e9ec;cursor:pointer}.tc-empty-files>span{color:#777b87;font-size:10px}.tc-text-button{border:0;background:none;color:#f1ad4d;font-size:11px;cursor:pointer}.tc-files-foot{padding:12px 14px;border-top:1px solid var(--tc-border);color:#878a96;font-size:10px}.tc-online{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#58c995}.tc-file-list{overflow:auto;padding:6px}.tc-file{width:100%;display:flex;align-items:center;gap:8px;padding:6px 8px;overflow:hidden;border:0;border-radius:5px;background:transparent;color:#aeb0bb;text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.tc-file:hover{background:#20222a}.tc-file.active{background:#292a30;color:#fff}.tc-file-glyph{width:21px;flex:none;color:#e9a745;font-size:9px;font-weight:700;text-align:center}.tc-editor{min-width:0;display:flex;flex-direction:column;background:#101115}.tc-tab{height:42px;flex:none;display:flex;align-items:center;gap:7px;padding:0 13px;border-bottom:1px solid var(--tc-border);color:#c9cbd2;font-size:11px}.tc-editor-actions{margin-left:auto}.tc-editor-text{width:100%;height:100%;flex:1;resize:none;padding:19px 22px;border:0;outline:0;background:transparent;color:#e3e4e8;font:12px/1.75 "Cascadia Code",Consolas,monospace;tab-size:2;white-space:pre}.tc-editor-welcome{max-width:460px;margin:auto;padding:35px;text-align:center}.tc-welcome-mark{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 21px;border:1px solid #49402f;border-radius:17px;background:#201c16;color:#f2ad49;font-size:27px}.tc-editor-welcome h1{margin:0 0 9px;color:#f1f0ee;font-size:24px;letter-spacing:-.04em}.tc-editor-welcome>p{margin:0 auto;color:#989ba6;font-size:12px;line-height:1.8}.tc-shortcuts{display:grid;gap:9px;margin:25px 0;color:#b6b8c1;text-align:left;font-size:11px}.tc-shortcuts span{display:flex;align-items:center;gap:9px}.tc-shortcuts kbd{display:grid;place-items:center;width:21px;height:21px;border:1px solid #333640;border-radius:6px;background:#1b1d24;color:#f2af4b;font:10px monospace}.tc-editor-welcome>.btn{padding:10px 14px;border:1px solid #e99e36;border-radius:7px;background:#f0a43d;color:#181716;font-size:12px;font-weight:650;cursor:pointer}.tc-editor-welcome>.btn span{margin-left:8px}.tc-welcome-note{margin-top:15px;color:#717580;font-size:10px}.tc-statusbar{height:25px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px;border-top:1px solid var(--tc-border);color:#848793;font-size:9px}.tc-agent{min-width:0;display:flex;flex-direction:column;border-left:1px solid var(--tc-border)}.tc-agent-head{height:45px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 13px;border-bottom:1px solid var(--tc-border)}.tc-agent-head>div{display:flex;align-items:center;gap:7px}.tc-agent-head b{font-size:12px}.tc-agent-spark{color:#f1a944;font-size:16px}.tc-agent-head select{max-width:205px;padding:5px 8px;border:1px solid #343742;border-radius:6px;background:#1b1d24;color:#c6c8d0;font-size:10px}.tc-chat{flex:1;min-height:150px;overflow:auto;padding:15px 13px}.tc-agent-empty{margin:32px auto;max-width:270px}.tc-orb{display:grid;place-items:center;width:36px;height:36px;margin-bottom:16px;border:1px solid #4a3c28;border-radius:12px;background:#211c15;color:#f1ac45;font-size:18px}.tc-agent-empty h2{margin:0 0 5px;font-size:16px;letter-spacing:-.02em}.tc-agent-empty p{margin:0 0 17px;color:#979aa5;font-size:11px;line-height:1.6}.tc-prompt-chip{width:100%;display:flex;align-items:center;justify-content:space-between;margin:6px 0;padding:9px 10px;border:1px solid #30323b;border-radius:7px;background:#191b21;color:#bfc1c9;text-align:left;font-size:10px;cursor:pointer}.tc-prompt-chip:hover{border-color:#705331;color:#f2b252}.tc-prompt-chip span{color:#f2ad49}.tc-message{margin:14px 0}.tc-message-label{margin-bottom:5px;color:#818591;font-size:9px;font-weight:700;letter-spacing:.1em}.tc-message.user .tc-message-label{color:#eba744}.tc-message-content{color:#d7d8de;font-size:11px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.tc-message-meta{margin-top:5px;color:#7f8390;font-size:9px}.tc-thinking{color:#aaaeb8;font-size:10px}.tc-thinking i{display:inline-block;width:5px;height:5px;margin-right:3px;border-radius:50%;background:#efa943;animation:tc-pulse .8s infinite alternate}.tc-thinking i:nth-child(2){animation-delay:.2s}.tc-thinking i:nth-child(3){animation-delay:.4s}@keyframes tc-pulse{to{opacity:.25;transform:translateY(-3px)}}.tc-proposal{margin-top:16px;overflow:hidden;border:1px solid #4b3b25;border-radius:8px;background:#17171a}.tc-proposal-head{display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:9px 10px;border-bottom:1px solid #332b20}.tc-proposal-head>span:first-child{grid-column:1/-1;color:#e7a443;font-size:8px;letter-spacing:.1em;font-weight:700}.tc-proposal-head b{overflow:hidden;color:#dedfe3;font-size:10px;text-overflow:ellipsis}.tc-proposal-head>span:last-child{color:#9799a2;font-size:9px}.tc-proposal pre{max-height:230px;margin:0;padding:10px;overflow:auto;color:#c9cbd2;font:10px/1.6 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.tc-proposal-actions{display:flex;gap:6px;padding:8px;border-top:1px solid #302a22}.tc-proposal .btn{min-height:29px;padding:0 9px;font-size:10px}.tc-proposal .btn.primary{margin-left:auto}.tc-proposal-nav{display:flex;justify-content:space-between;padding:0 8px 8px}.tc-proposal-nav button{border:0;background:none;color:#e9a943;font-size:9px;cursor:pointer}.tc-notice{padding:6px 12px;color:#dfad61;font-size:9px}.tc-composer{flex:none;margin:0 10px;padding:8px;border:1px solid #3a3c45;border-radius:9px;background:#1b1d23}.tc-composer:focus-within{border-color:#79572e}.tc-composer textarea{width:100%;min-height:61px;resize:vertical;border:0;outline:0;background:transparent;color:#e6e6eb;font-size:11px;line-height:1.6}.tc-composer textarea::placeholder{color:#747884}.tc-composer-foot{display:flex;align-items:center;justify-content:space-between;color:#777b87;font-size:9px}.tc-send{width:28px;height:28px;border:0;border-radius:7px;background:#efa43d;color:#171614;font-size:19px;font-weight:700;cursor:pointer}.tc-send:disabled{opacity:.4;cursor:default}.tc-privacy{flex:none;margin:7px 11px 10px;color:#737782;text-align:center;font-size:8px;line-height:1.5}.tc-auth{position:fixed;z-index:20;top:50%;left:50%;width:min(390px,calc(100vw - 32px));transform:translate(-50%,-50%);padding:28px;border:1px solid #3c3e47;border-radius:14px;background:#1b1d24;box-shadow:0 20px 80px #0009;text-align:center}.tc-auth-icon{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 14px;border-radius:12px;background:#302518;color:#f3ad48;font-size:22px}.tc-auth h2{margin:0 0 8px;font-size:20px}.tc-auth p{margin:0 0 18px;color:#a3a5af;font-size:12px;line-height:1.7}.tc-auth .btn{margin:4px;padding:8px 11px;border:1px solid #444650;border-radius:7px;background:#24262d;color:#eee;text-decoration:none}.tc-auth .btn.primary{border-color:#f3a436;background:#f3a436;color:#171614}@media(max-width:1050px){.tc-workspace{grid-template-columns:210px minmax(240px,1fr) 330px}}@media(max-width:800px){.tc-workspace{grid-template-columns:190px minmax(230px,1fr)}.tc-agent{grid-column:1/-1;min-height:480px;border-top:1px solid var(--tc-border);border-left:0}.tc-chat{max-height:550px}.tc-agent-empty{margin:18px auto}}@media(max-width:560px){.tc-top{height:52px;padding:0 10px;gap:9px}.tc-brand{font-size:13px}.tc-project{overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.tc-top-actions{gap:4px}.tc-top .btn{min-height:29px;padding:0 7px;font-size:10px}.tc-workspace{min-height:calc(100dvh - 52px);grid-template-columns:1fr}.tc-files{min-height:190px;max-height:250px;border-right:0;border-bottom:1px solid var(--tc-border)}.tc-empty-files{margin:18px}.tc-file-list{max-height:190px}.tc-editor{min-height:460px}.tc-editor-welcome{padding:24px}.tc-editor-welcome h1{font-size:21px}.tc-agent{min-height:470px}.tc-statusbar{font-size:8px}.tc-statusbar span:last-child{display:none}}
.tc-cli{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:34px;align-items:center;padding:38px max(22px,calc((100vw - 1120px)/2));border-top:1px solid var(--tc-border);background:#15171d}.tc-eyebrow{color:#e6a13e;font-size:9px;font-weight:700;letter-spacing:.15em}.tc-cli h2{margin:6px 0;font-size:22px;letter-spacing:-.04em}.tc-cli-copy p{max-width:460px;margin:0 0 14px;color:#999ca7;font-size:11px;line-height:1.7}.tc-cli-download{display:inline-block;padding:8px 12px;border:1px solid #e9a440;border-radius:7px;background:#f0a43d;color:#181715;text-decoration:none;font-size:10px;font-weight:700}.tc-cli-commands{display:grid;gap:11px}.tc-cli-commands>div{display:grid;gap:5px}.tc-cli-commands span,.tc-cli-commands small{color:#9396a1;font-size:9px}.tc-cli-commands code{padding:8px 10px;border:1px solid #30323b;border-radius:6px;background:#101115;color:#e1bf8a;font:10px/1.6 Consolas,monospace;overflow-wrap:anywhere}.tc-cli-commands small code{padding:1px 3px}@media(max-width:650px){.tc-cli{grid-template-columns:1fr;gap:18px;padding:28px 16px}}
.tc-proposal pre.tc-diff{max-height:270px;padding:8px;font:9px/1.55 Consolas,monospace}.tc-diff .remove{display:block;background:#4a202522;color:#ef928d}.tc-diff .add{display:block;background:#1b503122;color:#8fdaa6}.tc-diff .same{display:block;color:#a5a8b2}
.tc-pet-toggle{border-color:#58462d!important;color:#f0b35c!important}.tc-pet-toggle:hover{background:#292319!important}@media(max-width:430px){.tc-project{display:none}}

/* Tux Code readability and brand polish */
.tc-page{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px}
.tc-brand{gap:10px;font-size:16px;letter-spacing:-.02em}
.tc-brand-mark{display:block;width:32px;height:32px;object-fit:contain;border-radius:0;background:none}
.tc-top .btn{min-height:38px;padding:0 14px;font-size:13px}
.tc-pet-toggle{font-weight:600}
.tc-agent-head{min-height:56px;height:auto;gap:14px;padding:8px 16px}
.tc-agent-head b{font-size:14px}
.tc-agent-head select{width:min(245px,58%);max-width:245px;min-height:40px;padding:7px 34px 7px 12px;border:1px solid #3c414d;border-radius:9px;background-color:#20232c;color:#f0f1f5;font-family:inherit;font-size:14px;font-weight:550;line-height:1.4;cursor:pointer;box-shadow:0 1px 2px #0003;transition:border-color .15s,background-color .15s,box-shadow .15s}
.tc-agent-head select:hover{border-color:#675239;background-color:#252832}
.tc-agent-head select:focus-visible{outline:2px solid #eaa23e;outline-offset:2px}
.tc-agent-head select option{background:#20232c;color:#f0f1f5}
.tc-composer{padding:12px;border-radius:12px}
.tc-composer textarea{min-height:100px;padding:2px;font-family:inherit;font-size:15px;line-height:1.65;letter-spacing:0;color:#f0f1f5}
.tc-composer textarea::placeholder{color:#9297a4}
.tc-composer-foot{min-height:34px;font-size:12px;letter-spacing:.005em}
.tc-send{width:34px;height:34px;font-size:21px}
.tc-privacy{font-size:10px}
@media(max-width:560px){.tc-top .btn{min-height:32px;padding:0 8px;font-size:11px}.tc-agent-head{padding:7px 10px}.tc-agent-head select{width:min(220px,58%);min-height:38px;font-size:13px}.tc-composer textarea{font-size:15px}.tc-composer-foot{font-size:11px}}

.ucalc-company-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.ucalc-company-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 11px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text-2);font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.ucalc-company-tabs button:hover{border-color:var(--border-2);color:var(--text)}
.ucalc-company-tabs button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.ucalc-company-tabs button span{display:grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border-radius:6px;background:#ffffff0c;color:inherit;font-size:10px}
.hero-centered .hero-vk{display:none}

/* Tux Code: use the site's typeface and make dense workspace labels easier to read. */
.tc-page { font-family:var(--sans); font-size:14px; line-height:1.55 }
.tc-project { font-size:14px }
.tc-top .btn { font-size:14px }
.tc-pane-head { font-size:11px }
.tc-empty-files b { font-size:14px }
.tc-empty-files p, .tc-agent-empty p { font-size:12px }
.tc-empty-files>span, .tc-text-button { font-size:11px }
.tc-files-foot { font-size:11px }
.tc-file { font-size:13px }
.tc-tab { font-size:12px }
.tc-editor-text { font-size:13px }
.tc-editor-welcome>p { font-size:13px }
.tc-shortcuts { font-size:12px }
.tc-shortcuts kbd { font-size:11px }
.tc-welcome-note { font-size:11px }
.tc-statusbar { font-size:10px }
.tc-agent-head b { font-size:15px }
.tc-agent-head select { font-size:15px }
.tc-agent-empty h2 { font-size:17px }
.tc-prompt-chip, .tc-message-content { font-size:12px }
.tc-message-label, .tc-message-meta { font-size:10px }
.tc-thinking { font-size:11px }
.tc-proposal-head>span:first-child { font-size:9px }
.tc-proposal-head b { font-size:11px }
.tc-proposal-head>span:last-child { font-size:10px }
.tc-proposal pre.tc-diff { font-size:10px }
.tc-notice { font-size:10px }
.tc-composer textarea { font-size:16px }
.tc-composer-foot { font-size:13px }
.tc-eyebrow { font-size:10px }
.tc-cli h2 { font-size:23px }
.tc-cli-copy p { font-size:12px }
.tc-cli-download { font-size:11px }
.tc-cli-commands span, .tc-cli-commands small { font-size:10px }
.tc-cli-commands code { font-size:11px }
@media(max-width:560px) {
  .tc-top .btn { font-size:12px }
  .tc-agent-head select { font-size:14px }
  .tc-composer textarea { font-size:16px }
  .tc-composer-foot { font-size:12px }
}

/* Compact two-column menu keeps navigation readable without covering the page. */
.nav-dd-menu{width:min(460px,calc(100vw - 28px));min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:9px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.nav-dd-menu a{min-width:0;padding:10px;border:1px solid transparent;border-radius:9px;transition:background .16s,border-color .16s,transform .16s}
.nav-dd-menu a:hover{border-color:var(--border);transform:translateY(-1px)}
.nav-dd-menu b{font-size:13px;line-height:1.3}
.nav-dd-menu span{font-size:11.5px;line-height:1.45}
@media(max-width:560px){.nav-dd-menu{position:fixed;top:calc(var(--nav-h) + 5px);left:12px;width:calc(100vw - 24px);max-height:calc(100dvh - var(--nav-h) - 20px);overflow:auto}.nav-dd-menu a{padding:9px}.nav-dd-menu b{font-size:12px}.nav-dd-menu span{font-size:10.5px}}

/* Experimental motion pass: restrained entrance, soft ambient drift and tactile hover. */
@keyframes tux-rise-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* Только прозрачность: transform на <body> делает его containing block для position:fixed
   (питомец, док, тосты) и сдвигает их на 10px из-за схлопывания margin у шапки. */
@keyframes tux-fade-in{from{opacity:0}to{opacity:1}}
@keyframes tux-glow-drift{0%,100%{opacity:.75;transform:translate3d(0,0,0) scale(1)}50%{opacity:1;transform:translate3d(0,10px,0) scale(1.025)}}
@keyframes tux-soft-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 10%,transparent)}}
body:not(.tc-page){animation:tux-fade-in .45s cubic-bezier(.2,.7,.2,1) both}
.home .hero::before{animation:tux-glow-drift 12s ease-in-out infinite}
.home .hero-main>*{animation:tux-rise-in .55s cubic-bezier(.2,.7,.2,1) both}
.home .hero-main>*:nth-child(2){animation-delay:.08s}
.home .hero-main>*:nth-child(3){animation-delay:.16s}
.home .hero-demo{animation:tux-rise-in .65s .1s cubic-bezier(.2,.7,.2,1) both}
.card,.model-card,.ucb,.sw-lab,.nav-dd-menu a{transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .2s,background-color .2s,box-shadow .2s}
.model-card:hover,.card:not(.flush):hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:0 16px 36px -22px color-mix(in srgb,var(--text) 24%,transparent)}
.btn{transition:transform .16s cubic-bezier(.2,.7,.2,1),background .18s,border-color .18s,color .18s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.sw-lab:hover,.ucb:hover{transform:translateY(-2px)}
.theme-btn,.nav-toggle{transition:transform .18s,background .18s,border-color .18s}
.theme-btn:hover,.nav-toggle:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Tux99 home — Aurora direction (design concept 03) */
body.home-aurora {
  --bg:#090d1d; --bg-2:#0f1529; --surface:#131a2e; --surface-2:#18213a; --surface-3:#202b4a;
  --border:#2b3558; --border-2:#43507b; --text:#f5f6ff; --text-2:#b3bbd7; --text-3:#818cae;
  --accent:#a7a3ff; --accent-dark:#8a84fc; --accent-soft:#252a4b; --accent-line:#514f91; --accent-text:#10162a;
  --ok:#70dfb8; --ok-bg:#102d2d; --ok-line:#20534d; --pix:#7b7cff; --pix-2:#75e1d5;
  background:radial-gradient(ellipse at 72% 3%,#3e43a333,transparent 33%),radial-gradient(ellipse at 0% 37%,#14608118,transparent 36%),var(--bg);
  color:var(--text)
}
body.home-aurora header.nav {background:color-mix(in srgb,#111831 38%,transparent);border-color:#8794e126;box-shadow:0 10px 34px #03071830;backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%)}
body.home-aurora header.nav .nav-in {color:#e8eaff}
body.home-aurora .hero-centered {padding-top:clamp(52px,7vw,92px);padding-bottom:38px}
body.home-aurora .announce {border-color:#858bda55;background:linear-gradient(110deg,#747cff1b,#79e4d01a);color:#dce1ff}
body.home-aurora .tag-new {background:linear-gradient(135deg,#a9a2ff,#70e4d3);color:#0d1428}
body.home-aurora .hero-centered h1 {max-width:13ch;font-size:clamp(48px,5.4vw,72px);letter-spacing:-.065em;line-height:.99}
body.home-aurora .hero-centered .lead {color:#b3bbd7;font-size:clamp(17px,1.55vw,19px);line-height:1.7}
body.home-aurora .hero-centered .btn.primary {background:linear-gradient(115deg,#aaa4ff,#77e4d4);border-color:transparent;color:#10162a;box-shadow:0 8px 24px #7775ff38}
body.home-aurora .hero-centered .btn:not(.primary) {background:#ffffff08;border-color:#ffffff28;color:#eff0ff}
body.home-aurora .hero-centered .hero-more {color:#c4c9e5}
body.home-aurora .hero-points li {color:#b1bad4}
body.home-aurora .hero-points .ico.ok {color:#78e3c9}
body.home-aurora .hero-centered .hero-demo {position:relative;border:1px solid #c4c7ff36;border-radius:22px;background:linear-gradient(145deg,#1a2340d9,#11192de8);box-shadow:0 24px 80px #03071880,0 0 55px #6865f21c;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
body.home-aurora .hero-demo-head {border-color:#ffffff17}
body.home-aurora .hero-demo-kicker {color:#b3badb}
body.home-aurora .hero-demo-status {color:#aeb8d5}
body.home-aurora .hero-demo-status i {background:#75e1d5;box-shadow:0 0 0 4px #75e1d52b,0 0 15px #75e1d5}
body.home-aurora .hero-demo .switcher {border-radius:15px}
body.home-aurora .hero-demo .sw-code {border-color:#ffffff13;background:#0a1020cc}
body.home-aurora .hero-demo .sw-out {border-color:#ffffff13;background:#111a2c}
body.home-aurora .hero-demo .sw-indicator {box-shadow:0 0 0 1px #8c8cff80,0 0 25px #8582ff48}
body.home-aurora .hero-demo .sw-more {color:#b8b6ff}
body.home-aurora .hero-stats {border-color:#ffffff1b;border-radius:18px;background:#1118317a;box-shadow:0 12px 36px #02061436;backdrop-filter:blur(16px)}
body.home-aurora .hero-stats>div {background:transparent;border-color:#ffffff13}
body.home-aurora .hero-stats b {color:#f2f3ff}
body.home-aurora .hero-stats span {color:#aab3d0}
body.home-aurora .works-with {border-color:#ffffff12;background:#0c1222a6}
body.home-aurora .works-with .num {color:#8994b8}
body.home-aurora .works-with-list span {color:#c4c9df}
body.home-aurora .sec {background:transparent;border-color:#ffffff10}
body.home-aurora .sec.alt {background:linear-gradient(110deg,#121a31a8,#11182b80);border-color:#ffffff12}
body.home-aurora .eyebrow {color:#8d95c4}
body.home-aurora .sec-head .sub {color:#aab3d0}
body.home-aurora .chips .chip {background:#151d35a8;border-color:#ffffff18;color:#bdc5dd}
body.home-aurora .chips .chip:hover,body.home-aurora .chips .chip.on {background:#7579ff20;border-color:#8887ff70;color:#e5e4ff}
body.home-aurora .model-card,body.home-aurora .bento-card,body.home-aurora .feature-list>div,body.home-aurora .faq details,body.home-aurora .steps-line>li,body.home-aurora .card.tg-card {background:linear-gradient(145deg,#171f37db,#11182bdd);border-color:#ffffff19;box-shadow:0 12px 34px #02061629;backdrop-filter:blur(14px)}
body.home-aurora .model-card:hover,body.home-aurora .bento-card:hover,body.home-aurora .feature-list>div:hover,body.home-aurora .card.tg-card:hover {border-color:#9293ff62;box-shadow:0 18px 48px #03071952,0 0 24px #7d7cff14}
body.home-aurora .model-card .mc-sub,body.home-aurora .model-card .mc-desc,body.home-aurora .bento-card p,body.home-aurora .feature-list p,body.home-aurora .faq details p,body.home-aurora .steps-line p {color:#aab3d0}
body.home-aurora .model-card .mc-prices,body.home-aurora .model-card .mc-foot,body.home-aurora .steps-line>li {border-color:#ffffff15}
body.home-aurora .model-card .mc-prices span,body.home-aurora .model-card .mc-foot {color:#929dbc}
body.home-aurora .model-card .mc-prices b {color:#f2f3ff}
body.home-aurora .bento-card .bento-code {background:#090f20;border-color:#ffffff10}
body.home-aurora .bento-card .bento-code code {color:#d9e0ff}
body.home-aurora .feature-list .cell-ico {background:#7779ff1c;border-color:#8586ff3a;color:#9b9aff}
body.home-aurora .steps-line .step-num {background:linear-gradient(135deg,#a9a3ff,#75e1d5);color:#11162a;box-shadow:0 0 18px #7d7cff35}
body.home-aurora .faq details summary {color:#eff0ff}
body.home-aurora .faq details[open] {border-color:#8587ff66}
body.home-aurora .link-u {color:#b7b5ff;text-decoration-color:#8587ff88}
body.home-aurora .cta-box {border:1px solid #b8b8ff42;border-radius:24px;background:radial-gradient(ellipse at 82% 0%,#8580ff3b,transparent 46%),linear-gradient(125deg,#20274b,#142a3e);box-shadow:0 20px 55px #03071860}
body.home-aurora .invert {background:transparent}
body.home-aurora footer {border-color:#ffffff12;background:#0b1020a6}
body.home-aurora footer .fcol a,body.home-aurora footer .fdesc,body.home-aurora footer .f-bottom {color:#98a2c2}
body.home-aurora .hero-centered .hero-vk {filter:drop-shadow(0 0 14px #8480ff75)}
/* Aurora polish: compact numbered steps, readable feature cards and quieter links. */
body.home-aurora .steps-line {gap:14px}
body.home-aurora .steps-line>li {padding:20px;border:1px solid #ffffff19;border-radius:16px}
body.home-aurora .steps-line .step-num {display:grid;place-items:center;width:34px;height:34px;margin:0 0 14px;border-radius:11px;background:linear-gradient(135deg,#aaa4ff,#75e1d5);color:#11162a;font-size:17px;box-shadow:0 5px 18px #7d7cff30}
body.home-aurora .feature-list {gap:14px;align-items:stretch}
body.home-aurora .feature-list>div {min-width:0;padding:20px;border:1px solid #ffffff19;border-radius:16px}
body.home-aurora .feature-list h3 {line-height:1.3}
body.home-aurora .feature-list p {line-height:1.65;overflow-wrap:anywhere}
body.home-aurora .link-u,body.home-aurora .faq-wrap a {text-decoration:none}
body.home-aurora .funpay-steps li::before {border-radius:10px;background:linear-gradient(135deg,#aaa4ff,#75e1d5);color:#11162a;box-shadow:none;font:700 13px/1 var(--mono)}
body.home-aurora .hero-centered h1 {max-width:15ch}
body.home-aurora .hero-centered .hero-demo {padding:clamp(18px,2vw,28px)}
body.home-aurora .demo-showcase-status {display:flex;align-items:center;gap:8px;margin-bottom:18px;color:#aeb8d5;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
body.home-aurora .demo-showcase-status i {width:7px;height:7px;border-radius:50%;background:#75e1d5;box-shadow:0 0 0 4px #75e1d52b,0 0 14px #75e1d5}
body.home-aurora .demo-showcase-head {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;color:#eef0ff;font-size:14px}
body.home-aurora .demo-showcase-head span {color:#929dbc;font-size:11px;font-weight:400}
body.home-aurora .demo-picks {display:grid;gap:4px}
body.home-aurora .demo-model {display:grid;grid-template-columns:30px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;width:100%;padding:9px 10px;text-align:left;color:#edf0ff;background:transparent;border:1px solid transparent;border-radius:11px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
body.home-aurora .demo-model:hover {background:#ffffff08;transform:translateX(2px)}
body.home-aurora .demo-model[aria-pressed=true] {background:linear-gradient(110deg,#8582ff1c,#75e1d510);border-color:#a09cff85}
body.home-aurora .demo-model .ava {grid-row:span 2;width:28px;height:28px}
body.home-aurora .demo-model-name {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:650}
body.home-aurora .demo-model-provider {color:#8f9ab9;font-size:10px}
body.home-aurora .demo-model-price {grid-column:3;grid-row:1/3;color:#f0efff;font:600 11px/1 var(--mono)}
body.home-aurora .demo-snippet {display:grid;gap:5px;margin-top:14px;padding:14px;border:1px solid #ffffff0d;border-radius:12px;background:#080f20c9;color:#cbd4f5;font:500 11px/1.55 var(--mono);overflow:hidden}
body.home-aurora .demo-snippet code {font:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.home-aurora .demo-snippet code span {color:#83dfb6}
body.home-aurora .demo-showcase-more {display:inline-flex;margin-top:13px;color:#b8b6ff;font-size:12px;text-decoration:none}
body.home-aurora .demo-showcase-more:hover {color:#75e1d5}
body.home-aurora .demo-model:focus-visible {outline:2px solid #8e8bff;outline-offset:2px}
/* Make the hero demo read as frosted glass, with visible light passing through it. */
body.home-aurora .hero-centered .hero-demo {background:radial-gradient(ellipse at 8% 0%,#a9a5ff38,transparent 42%),radial-gradient(ellipse at 100% 30%,#54d5dc20,transparent 46%),linear-gradient(135deg,#343d6d6e 0%,#1e31504f 48%,#171f3780 100%);border-color:#d7dcff6b;box-shadow:inset 0 1px 0 #ffffff35,inset 0 0 45px #a2a6ff12,0 28px 90px #050a1a75,0 0 58px #747bff20;backdrop-filter:saturate(185%) blur(30px);-webkit-backdrop-filter:saturate(185%) blur(30px)}
body.home-aurora .hero-demo-head {border-bottom-color:#ffffff28}
body.home-aurora .demo-model {background-color:#ffffff03}
body.home-aurora .demo-model[aria-pressed=true] {background:linear-gradient(105deg,#b4b1ff35,#72e2d526);border-color:#c4c2ffad;box-shadow:inset 0 1px 0 #ffffff35,0 5px 22px #7c84ff19}
body.home-aurora .demo-snippet {background:linear-gradient(130deg,#070d1d9c,#17233d91);border-color:#ffffff25;box-shadow:inset 0 1px 0 #ffffff12,0 10px 26px #060b1a35;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body.home-aurora .demo-snippet code {padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
body.home-aurora .demo-showcase-more {text-shadow:0 0 18px #9c99ff50}
/* Aurora v2: a visibly new landing composition and a chat-first demo. */
body.home-aurora {background:radial-gradient(ellipse at 82% 4%,#7774ff52,transparent 34%),radial-gradient(ellipse at 3% 28%,#1dc6c52d,transparent 36%),radial-gradient(ellipse at 88% 72%,#3b58a126,transparent 38%),#090d1d;background-attachment:fixed}
body.home-aurora header.nav .nav-in {background:linear-gradient(110deg,#151c376b,#20275052);border:1px solid #dbe0ff2b;border-radius:20px;backdrop-filter:blur(28px) saturate(185%);-webkit-backdrop-filter:blur(28px) saturate(185%);box-shadow:inset 0 1px 0 #ffffff1c,0 12px 38px #05091b50}
body.home-aurora .hero-centered {position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(40px,6vw,74px);padding-bottom:58px;background:radial-gradient(ellipse at 78% 30%,#7477ff20,transparent 42%),radial-gradient(ellipse at 16% 88%,#49d7d023,transparent 34%),linear-gradient(180deg,#10183275,#090d1d00 96%);border-bottom:1px solid #c9d1ff16}
body.home-aurora .hero-centered::before {content:"";position:absolute;z-index:-1;pointer-events:none;width:min(68vw,900px);height:min(68vw,900px);right:-12%;top:-27%;border-radius:50%;background:radial-gradient(circle,#817dff3a 0%,#53d8d421 38%,transparent 70%);filter:blur(44px);opacity:.9}
body.home-aurora .hero-main {position:relative;gap:clamp(28px,4vw,58px);padding:clamp(24px,3.2vw,48px);border:1px solid #dce1ff35;border-radius:32px;background:radial-gradient(ellipse at 95% 0%,#8e89ff2b,transparent 42%),radial-gradient(ellipse at 5% 100%,#52daca1c,transparent 42%),linear-gradient(135deg,#212b4fc4 0%,#192746a8 48%,#15213bb5 100%);box-shadow:inset 0 1px 0 #ffffff2b,inset 0 0 80px #a5a5ff0d,0 28px 90px #03081782;backdrop-filter:blur(28px) saturate(175%);-webkit-backdrop-filter:blur(28px) saturate(175%)}
body.home-aurora .hero-copy {z-index:1}
body.home-aurora .hero-kicker {display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;color:#82e5dc;font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
body.home-aurora .hero-kicker::before {content:"";width:8px;height:8px;border-radius:2px;background:linear-gradient(135deg,#b4a5ff,#62e1d2);box-shadow:0 0 16px #79dbdd}
body.home-aurora .hero-centered h1 {max-width:10ch;font-size:clamp(52px,6.1vw,82px);line-height:.98;letter-spacing:-.07em;text-wrap:balance}
body.home-aurora .hero-centered .lead {max-width:34ch;margin-top:20px;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:#c0c8e4}
body.home-aurora .hero-centered .hero-actions {margin-top:25px}
body.home-aurora .hero-centered .hero-more {display:inline-flex;margin-top:16px;font-weight:600}
body.home-aurora .hero-centered .hero-demo {z-index:1;min-width:0;padding:clamp(18px,2.2vw,28px);border:1px solid #e3e5ff61;border-radius:26px;background:linear-gradient(145deg,#ffffff20,#ffffff0b 45%,#74dcda0c),#111a3182;box-shadow:inset 0 1px 0 #ffffff3b,inset 0 -28px 70px #5558a014,0 22px 54px #05091d55;backdrop-filter:blur(32px) saturate(185%);-webkit-backdrop-filter:blur(32px) saturate(185%)}
body.home-aurora .demo-chat {display:flex;flex-direction:column;gap:15px}
body.home-aurora .demo-chat-top {display:flex;align-items:center;gap:11px}
body.home-aurora .demo-chat-orb {display:grid;place-items:center;width:36px;height:36px;border:1px solid #c7c7ff55;border-radius:12px;background:linear-gradient(145deg,#a59aff4a,#5bdaca27);color:#aef3e8;font-size:20px;box-shadow:inset 0 1px 0 #ffffff36,0 0 22px #8a85ff29}
body.home-aurora .demo-chat-top>div {display:grid;gap:3px;color:#f5f5ff;font-size:14px}
body.home-aurora .demo-chat-top small {color:#aeb9d5;font-size:11px}
body.home-aurora .demo-live {display:inline-flex;align-items:center;gap:7px;margin-left:auto;color:#aeb9d5;font-size:11px}
body.home-aurora .demo-live i {width:7px;height:7px;border-radius:50%;background:#70e2bd;box-shadow:0 0 12px #70e2bd}
body.home-aurora .demo-scenarios {display:flex;gap:8px;padding:4px;border:1px solid #ffffff20;border-radius:14px;background:#080f2080}
body.home-aurora .demo-scenario {flex:1;padding:9px 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:#aeb8d4;font-family:var(--sans);font-size:12px;font-weight:600;line-height:1.2;cursor:pointer;transition:all .2s ease}
body.home-aurora .demo-scenario:hover {color:#f4f3ff;background:#ffffff0b}
body.home-aurora .demo-scenario[aria-selected=true] {color:#141a31;background:linear-gradient(110deg,#b7aaff,#78e1d4);box-shadow:0 4px 16px #7774ff35}
body.home-aurora .demo-conversation {display:grid;gap:11px;min-height:218px;align-content:start;animation:aurora-chat-in .35s ease both}
body.home-aurora .demo-message {max-width:92%;padding:13px 15px;border:1px solid #ffffff21;border-radius:15px;color:#e6eaff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.home-aurora .demo-message>span {display:block;margin-bottom:6px;color:#9da9cb;font:600 10px/1.2 var(--mono);letter-spacing:.04em}
body.home-aurora .demo-message p {margin:0;font-size:13px;line-height:1.55}
body.home-aurora .demo-user {justify-self:end;background:linear-gradient(130deg,#8b83ff35,#6ddacc24);border-color:#b8b5ff42}
body.home-aurora .demo-assistant {justify-self:start;background:linear-gradient(125deg,#ffffff12,#63d9d00d);box-shadow:inset 0 1px 0 #ffffff15}
body.home-aurora .demo-provider-label {margin:1px 0 -7px;color:#9da8c6;font-size:11px}
body.home-aurora .demo-provider-picks {display:flex;gap:7px;overflow-x:auto;padding:2px 1px 6px;scrollbar-width:thin}
body.home-aurora .demo-provider {display:flex;flex:0 0 auto;align-items:center;gap:7px;padding:6px 9px;border:1px solid #ffffff20;border-radius:11px;background:#ffffff08;color:#c8cde3;font-size:10px;cursor:pointer;transition:all .2s ease}
body.home-aurora .demo-provider .ava {width:22px;height:22px;border-radius:7px}
body.home-aurora .demo-provider .ava-ic,.home-aurora .demo-provider .ava-img {width:14px;height:14px}
body.home-aurora .demo-provider:hover {background:#ffffff13;border-color:#b2afff6b}
body.home-aurora .demo-provider[aria-pressed=true] {color:#f4f2ff;border-color:#aaa6ff91;background:linear-gradient(120deg,#9790ff2a,#69d9ce18);box-shadow:inset 0 1px 0 #ffffff1e}
body.home-aurora .demo-chat-foot {display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid #ffffff20;color:#d3d8ef;font:600 11px/1.3 var(--mono)}
body.home-aurora .demo-chat-foot small {color:#8995b5;font:400 10px/1.3 var(--sans)}
body.home-aurora .demo-showcase-more {align-self:flex-end;margin:0}
body.home-aurora .hero-stats {position:relative;z-index:1;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px;padding:7px;border:1px solid #dbe0ff2b;border-radius:20px;background:linear-gradient(115deg,#1c274691,#16264170);box-shadow:inset 0 1px 0 #ffffff1f,0 14px 44px #03081755;backdrop-filter:blur(24px) saturate(165%);-webkit-backdrop-filter:blur(24px) saturate(165%)}
body.home-aurora .hero-stats>div {min-height:72px;padding:16px 20px}
body.home-aurora .hero-stats b {font-size:clamp(18px,2vw,24px)}
body.home-aurora .sec.alt {background:radial-gradient(ellipse at 8% 50%,#5264bb15,transparent 45%),linear-gradient(110deg,#111a31b5,#10182ba8);backdrop-filter:blur(15px)}
body.home-aurora .model-card,body.home-aurora .bento-card,body.home-aurora .feature-list>div,body.home-aurora .faq details,body.home-aurora .steps-line>li,body.home-aurora .card.tg-card {background:linear-gradient(145deg,#202b48b8,#151e34a8);border-color:#dbe0ff24;box-shadow:inset 0 1px 0 #ffffff12,0 15px 42px #03081735;backdrop-filter:blur(22px) saturate(155%);-webkit-backdrop-filter:blur(22px) saturate(155%)}
@keyframes aurora-chat-in {from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){body.home-aurora .hero-centered{padding:28px 0 34px}body.home-aurora .hero-main{grid-template-columns:1fr;padding:21px;border-radius:25px;gap:26px}body.home-aurora .hero-centered h1{max-width:11ch;font-size:clamp(48px,13vw,68px)}body.home-aurora .hero-centered .lead{max-width:34ch;margin-top:15px}body.home-aurora .hero-centered .hero-demo{padding:17px;border-radius:20px}body.home-aurora .demo-conversation{min-height:0}body.home-aurora .hero-stats{margin-top:16px;padding:4px}body.home-aurora .hero-stats>div{min-height:64px;padding:12px 10px}body.home-aurora .hero-stats span{font-size:10px}}
@media(prefers-reduced-motion:reduce){body.home-aurora .demo-conversation{animation:none}}
@media(max-width:760px){body.home-aurora .steps-line>li,body.home-aurora .feature-list>div{padding:17px}}
@media(max-width:760px){body.home-aurora .hero-centered{padding-top:38px}body.home-aurora .hero-centered h1{font-size:clamp(42px,12vw,60px)}body.home-aurora .hero-centered .hero-demo{border-radius:16px;padding:12px}body.home-aurora .hero-stats{border-radius:14px}body.home-aurora .cta-box{border-radius:18px}}

/* Shared glass language across the whole product, including inner pages. */
body.site-glass { background:radial-gradient(ellipse at 90% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 34%),radial-gradient(ellipse at 0% 45%,color-mix(in srgb,#28c7c0 5%,transparent),transparent 36%),var(--bg); background-attachment:fixed }
body.site-glass header.nav { background:color-mix(in srgb,var(--surface) 54%,transparent); border-color:color-mix(in srgb,var(--border-2) 58%,transparent); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 7%,transparent),0 14px 42px #0710241c; backdrop-filter:blur(24px) saturate(175%); -webkit-backdrop-filter:blur(24px) saturate(175%) }
body.site-glass .nav-in { border-radius:inherit }
body.site-glass :is(.card,.model-card,.kpi,.tile,.feature-list>div,.faq details,.steps-line>li,.table-wrap,.auth-card,.dash-card,.workspace-card) { border-color:color-mix(in srgb,var(--border-2) 58%,transparent); background:color-mix(in srgb,var(--surface) 78%,transparent); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 4%,transparent),0 12px 34px #0610220c; backdrop-filter:blur(14px) saturate(135%); -webkit-backdrop-filter:blur(14px) saturate(135%) }
body.site-glass .sec.alt { background:color-mix(in srgb,var(--bg-2) 62%,transparent); border-color:color-mix(in srgb,var(--border) 70%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px) }
body.site-glass .btn { border-radius:11px; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease }
body.site-glass .btn.primary { background:linear-gradient(110deg,#a9a0ff,#70ded3); border-color:#aaa5ff; color:#11172b; box-shadow:0 5px 18px #7978ff32,inset 0 1px 0 #ffffff70 }
body.site-glass .btn.primary:hover { background:linear-gradient(110deg,#b8b0ff,#86eee0); border-color:#c1bdff; color:#11172b; transform:translateY(-2px); box-shadow:0 9px 24px #7978ff48,inset 0 1px 0 #ffffff90 }
body.site-glass .btn:not(.primary):not(.danger) { background:color-mix(in srgb,var(--surface) 54%,transparent); border-color:color-mix(in srgb,var(--border-2) 80%,transparent) }
body.site-glass .link-u,body.site-glass .link-u:hover { border:0; text-decoration:none; color:var(--accent) }
body.site-glass .link-u:hover { filter:brightness(1.12) }

/* A tidy model list replaces the long card wall on the landing page. */
body.home-aurora .home-model-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
body.home-aurora .home-model-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto 18px; align-items:center; gap:10px; min-width:0; padding:13px 15px; border:1px solid #dbe0ff24; border-radius:15px; color:#edf0ff; background:linear-gradient(130deg,#202b48ba,#151e34b0); box-shadow:inset 0 1px 0 #ffffff12,0 10px 28px #03081730; backdrop-filter:blur(18px); transition:transform .18s,border-color .18s,background .18s }
body.home-aurora .home-model-row:hover { transform:translateY(-2px); border-color:#aaa6ff70; color:#fff; background:linear-gradient(115deg,#30345b,#193344) }
body.home-aurora .home-model-row .ava { width:34px;height:34px }
body.home-aurora .home-model-name { display:grid; gap:2px; min-width:0 }
body.home-aurora .home-model-name b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px/1.3 var(--mono) }
body.home-aurora .home-model-name small { color:#9da9c7;font-size:11px }
body.home-aurora .home-model-price { color:#dce2fa;font:600 12px/1.2 var(--mono);white-space:nowrap }
body.home-aurora .home-model-arrow { color:#8d8aff;font-size:17px }

/* Calculator: keep the price comparison at a usable height with its own scroll. */
.ucalc { align-items:start }
.ucalc-form,.ucalc-chart { align-self:start; min-width:0 }
.ucalc-chart { border-left:1px solid var(--border); background:color-mix(in srgb,var(--bg-2) 60%,transparent) }
.ucb-list { max-height:350px; overflow:auto; overscroll-behavior:contain; padding-right:5px; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--accent) 40%,transparent) transparent }
.ucb { min-height:32px }
.ucb-track { max-width:100% }
.cmp-desc { display:block; min-width:150px; max-width:280px; white-space:normal; color:var(--text-2); font-size:12px; line-height:1.45 }
@media(max-width:900px){.ucalc-chart{border-left:0;border-top:1px solid var(--border)}.ucb-list{max-height:300px}}
@media(max-width:760px){body.home-aurora .home-model-list{grid-template-columns:1fr}.ucb-list{max-height:270px}}

/* More legible interactive mini-chat. */
body.home-aurora .demo-chat-top>div { font-size:16px }
body.home-aurora .demo-chat-top small { font-size:13px }
body.home-aurora .demo-scenario { font-size:14px; padding:11px 13px }
body.home-aurora .demo-message p { font-size:15px; line-height:1.65 }
body.home-aurora .demo-message>span { font-size:11px }
body.home-aurora .demo-provider-label { font-size:12px }
body.home-aurora .demo-provider { font-size:11px }

/* Pixel Tux sits on section edges and gently swings its feet. */
.tux-seat { position:absolute; z-index:3; width:42px; height:42px; display:block; pointer-events:none; filter:drop-shadow(0 5px 9px #05091b70) }
.tux-seat-svg { display:block; width:100%; height:100%; overflow:visible; shape-rendering:crispEdges }
.tux-seat-svg .vk-feet { transform-box:fill-box; animation-duration:.72s; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate }
.tux-seat-svg .vk-foot-l { transform-origin:50% 0%; animation-name:tux-swing-left }
.tux-seat-svg .vk-foot-r { transform-origin:50% 0%; animation-name:tux-swing-right; animation-delay:-.36s }
@keyframes tux-swing-left { from{transform:rotate(-16deg) translateY(-.2px)} to{transform:rotate(16deg) translateY(.4px)} }
@keyframes tux-swing-right { from{transform:rotate(16deg) translateY(.4px)} to{transform:rotate(-16deg) translateY(-.2px)} }
.hero-tux { top:-50px; right:28px; width:48px;height:66px }
.step-tux { top:-34px; right:14px; width:36px;height:50px }
.calc-tux { top:-35px; left:24px; width:38px;height:52px }
.funpay-tux { top:-35px; right:24px; width:38px;height:52px }
.hero-main,.steps-line>li,.ucalc,.funpay-card { position:relative }
.steps-line>li,.ucalc,.funpay-card { overflow:visible }
@media(prefers-reduced-motion:reduce){.tux-seat-svg .vk-feet{animation:none}}

/* Smaller hero headline after the glass redesign. */
body.home-aurora .hero-centered h1 { max-width:12ch; font-size:clamp(42px,5.2vw,68px); line-height:1.02; letter-spacing:-.055em }
@media(max-width:760px){body.home-aurora .hero-centered h1{max-width:13ch;font-size:clamp(40px,10vw,56px)}}

/* The light homepage keeps the same polished structure and interactive demo. */
body.home:not(.home-aurora) .hero-centered { position:relative; padding:clamp(32px,5vw,64px) 0 42px; background:radial-gradient(ellipse at 92% 0%,#f6bb7b20,transparent 35%),radial-gradient(ellipse at 4% 48%,#55c9c322,transparent 38%); border-bottom:1px solid var(--border) }
body.home:not(.home-aurora) .hero-main { position:relative; gap:clamp(28px,4vw,58px); padding:clamp(24px,3.2vw,48px); border:1px solid color-mix(in srgb,var(--border-2) 70%,transparent); border-radius:30px; background:linear-gradient(135deg,#ffffffd9,#f4f6ffb8 54%,#e8f7f4b0); box-shadow:inset 0 1px 0 #ffffff,0 24px 70px #25345116; backdrop-filter:blur(24px) saturate(145%); -webkit-backdrop-filter:blur(24px) saturate(145%) }
body.home:not(.home-aurora) .hero-kicker { display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;color:#167e80;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase }
body.home:not(.home-aurora) .hero-kicker::before { content:"";width:8px;height:8px;border-radius:3px;background:linear-gradient(135deg,#8d7cff,#44cfc0);box-shadow:0 0 13px #72c8d680 }
body.home:not(.home-aurora) .hero-centered .hero-demo { position:relative;padding:clamp(18px,2vw,28px);border:1px solid #9ba9c466;border-radius:24px;background:linear-gradient(145deg,#ffffffd9,#f4f7fbe0 58%,#e8f6f3c9);box-shadow:inset 0 1px 0 #ffffff,0 20px 50px #29364d16;backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%) }
body.home:not(.home-aurora) .demo-chat { display:flex;flex-direction:column;gap:15px }
body.home:not(.home-aurora) .demo-chat-top { display:flex;align-items:center;gap:11px }
body.home:not(.home-aurora) .demo-chat-orb { display:grid;place-items:center;width:36px;height:36px;border:1px solid #9288e655;border-radius:12px;background:linear-gradient(145deg,#aaa0ff38,#55d2c522);color:#57589b;font-size:20px }
body.home:not(.home-aurora) .demo-chat-top>div { display:grid;gap:3px;color:var(--text);font-size:15px }
body.home:not(.home-aurora) .demo-chat-top small { color:var(--text-2);font-size:12px }
body.home:not(.home-aurora) .demo-live { display:inline-flex;align-items:center;gap:7px;margin-left:auto;color:var(--text-2);font-size:11px }
body.home:not(.home-aurora) .demo-live i { width:7px;height:7px;border-radius:50%;background:#25b886;box-shadow:0 0 10px #25b88670 }
body.home:not(.home-aurora) .demo-scenarios { display:flex;gap:7px;padding:4px;border:1px solid var(--border);border-radius:13px;background:#e9edf6b8 }
body.home:not(.home-aurora) .demo-scenario { flex:1;padding:10px 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text-2);font:600 13px/1.2 var(--sans);cursor:pointer;transition:all .2s ease }
body.home:not(.home-aurora) .demo-scenario:hover { color:var(--text);background:#ffffffa8 }
body.home:not(.home-aurora) .demo-scenario[aria-selected=true] { color:#141a31;background:linear-gradient(110deg,#aaa0ff,#70d9ca);box-shadow:0 4px 14px #7774ff25 }
body.home:not(.home-aurora) .demo-conversation { display:grid;gap:11px;min-height:185px;align-content:start;animation:aurora-chat-in .35s ease both }
body.home:not(.home-aurora) .demo-message { max-width:92%;padding:13px 15px;border:1px solid #a6b3c866;border-radius:15px;color:var(--text);background:#ffffffa6 }
body.home:not(.home-aurora) .demo-message>span { display:block;margin-bottom:6px;color:var(--text-2);font:600 10px/1.2 var(--mono);letter-spacing:.04em }
body.home:not(.home-aurora) .demo-message p { margin:0;font-size:14px;line-height:1.55 }
body.home:not(.home-aurora) .demo-user { justify-self:end;background:linear-gradient(130deg,#9085ff22,#55cdbb25);border-color:#a59be655 }
body.home:not(.home-aurora) .demo-assistant { justify-self:start;background:linear-gradient(125deg,#ffffffd9,#eef7f5d9);box-shadow:inset 0 1px 0 #ffffff }
body.home:not(.home-aurora) .demo-provider-label { margin:1px 0 -7px;color:var(--text-2);font-size:12px }
body.home:not(.home-aurora) .demo-provider-picks { display:flex;gap:7px;overflow-x:auto;padding:2px 1px 6px;scrollbar-width:thin }
body.home:not(.home-aurora) .demo-provider { display:flex;flex:0 0 auto;align-items:center;gap:7px;padding:6px 9px;border:1px solid var(--border);border-radius:11px;background:#ffffffa8;color:var(--text-2);font-size:11px;cursor:pointer;transition:all .2s ease }
body.home:not(.home-aurora) .demo-provider .ava { width:22px;height:22px;border-radius:7px }
body.home:not(.home-aurora) .demo-provider .ava-ic,body.home:not(.home-aurora) .demo-provider .ava-img { width:14px;height:14px }
body.home:not(.home-aurora) .demo-provider:hover { background:#fff;border-color:#a49bff }
body.home:not(.home-aurora) .demo-provider[aria-pressed=true] { color:var(--text);border-color:#9a91f4;background:linear-gradient(120deg,#aaa0ff23,#69d9ce20) }
body.home:not(.home-aurora) .demo-chat-foot { display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--border);color:var(--text);font:600 11px/1.3 var(--mono) }
body.home:not(.home-aurora) .demo-chat-foot small { color:var(--text-2);font:400 10px/1.3 var(--sans) }
body.home:not(.home-aurora) .demo-showcase-more { align-self:flex-end;margin:0;color:var(--accent);text-decoration:none }
@media(max-width:760px){body.home:not(.home-aurora) .hero-main{grid-template-columns:1fr;padding:21px;border-radius:24px;gap:25px}body.home:not(.home-aurora) .hero-centered .hero-demo{padding:16px;border-radius:19px}body.home:not(.home-aurora) .demo-conversation{min-height:0}}

/* =====================================================================
   Aurora — выбранная основная тема сайта.
   Последний слой: единая палитра для светлой и тёмной темы и снятие
   янтарных «пиксельных» акцентов, оставшихся от Tux-стиля 2026-10.
   ===================================================================== */
:root {
  --bg:#f6f5fc; --bg-2:#eef0fa; --surface:#ffffff; --surface-2:#f3f4fb; --surface-3:#e9eaf6;
  --border:#e2e2f1; --border-2:#cfd0e6;
  --text:#181a2e; --text-2:#585d7b; --text-3:#8b8faa;
  --accent:#6f63f2; --accent-dark:#5a4fe0; --accent-soft:#eeecfe; --accent-line:#cdc7fb; --accent-text:#ffffff;
  --ok:#0f9d63; --ok-bg:#e7f8f0; --ok-line:#c2ecd9;
  --warn:#b5790f; --warn-bg:#fdf4e3; --warn-line:#f2ddb4;
  --bad:#c83a55; --bad-bg:#fdecef; --bad-line:#f5c8d1;
  --code-bg:#0d1226; --code-text:#e6e9ff; --code-k:#a6adff; --code-s:#7fe0c4; --code-c:#8b93b8;
  --pix:#8f88ff; --pix-2:#54d6c8;
  --ring:0 0 0 3px color-mix(in srgb,#6f63f2 30%,transparent);
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#090d1d; --bg-2:#0f1529; --surface:#131a2e; --surface-2:#18213a; --surface-3:#202b4a;
  --border:#2b3558; --border-2:#43507b;
  --text:#f5f6ff; --text-2:#b3bbd7; --text-3:#818cae;
  --accent:#a7a3ff; --accent-dark:#8a84fc; --accent-soft:#252a4b; --accent-line:#514f91; --accent-text:#10162a;
  --ok:#70dfb8; --ok-bg:#102d2d; --ok-line:#20534d;
  --warn:#f0c073; --warn-bg:#2e2410; --warn-line:#4b3a15;
  --bad:#ff8b9a; --bad-bg:#331620; --bad-line:#542533;
  --code-bg:#0a0f20; --code-text:#dbe2ff; --code-k:#9aa6ff; --code-s:#7fe0c4; --code-c:#7c86b0;
  --pix:#8b8bff; --pix-2:#75e1d5;
  --shadow:none;
  --ring:0 0 0 3px color-mix(in srgb,#8f8bff 34%,transparent);
  color-scheme:dark;
}

/* Подписи разделов: вместо пиксельного квадратика — точка цвета Aurora. */
body .eyebrow { font-family:var(--sans); color:var(--text-2); letter-spacing:.12em; font-weight:600 }
body .eyebrow::before { width:8px; height:8px; border-radius:3px; background:linear-gradient(135deg,var(--pix),var(--pix-2)); box-shadow:0 0 14px color-mix(in srgb,var(--pix) 55%,transparent) }
body ::selection { background:color-mix(in srgb,var(--accent) 26%,transparent); color:var(--text) }

/* Кнопки: единый градиент Aurora вместо графита с пиксельной тенью. */
body .btn { border-radius:12px }
body .btn.primary { background:linear-gradient(115deg,var(--accent),#54d6c8); border-color:transparent; color:var(--accent-text); box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 32%,transparent),inset 0 1px 0 #ffffff5c }
body .btn.primary:hover { background:linear-gradient(115deg,var(--accent-dark),#6fe6da); color:var(--accent-text); transform:translateY(-2px); box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 46%,transparent),inset 0 1px 0 #ffffff80 }
body .btn.primary:active { transform:translateY(0) scale(.99); box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 30%,transparent) }
body .btn:not(.primary):not(.danger) { box-shadow:none; background:color-mix(in srgb,var(--surface) 70%,transparent); border-color:var(--border-2) }
body .btn:not(.primary):not(.danger):hover { border-color:var(--accent-line); color:var(--text); box-shadow:none }
body .dock .btn.primary { box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 32%,transparent) }
body .dock { box-shadow:0 12px 34px -14px color-mix(in srgb,var(--text) 38%,transparent) }

/* Карточки: мягкий подъём вместо пиксельного сдвига. */
body .model-card:hover,body .ring-card:hover,body .ov-card:hover,body .tile:hover,body .code-banner:hover { transform:translateY(-3px); box-shadow:0 18px 42px -20px color-mix(in srgb,var(--accent) 55%,transparent); border-color:var(--accent-line) }
body .code-card { box-shadow:0 16px 40px -26px color-mix(in srgb,var(--text) 35%,transparent) }
body .funpay-steps li::before { border-radius:10px; background:linear-gradient(135deg,var(--pix),var(--pix-2)); color:var(--accent-text); box-shadow:none }

/* Светлый первый экран — в тонах Aurora, без оранжевого. */
body.home:not(.home-aurora) .hero-centered { background:radial-gradient(ellipse at 92% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 35%),radial-gradient(ellipse at 4% 48%,color-mix(in srgb,#55c9c3 14%,transparent),transparent 38%); border-bottom:1px solid var(--border) }

/* Tux Code: тот же Aurora-акцент вместо янтарного. */
.tc-page { --tc-bg:#0a0d1c; --tc-panel:#111731; --tc-panel-2:#161d38; --tc-border:#2a3358; --tc-muted:#8b93b8; --tc-text:#eef0ff; --tc-accent:#a7a3ff }
.tc-top { background:#0e1430; border-color:var(--tc-border) }
.tc-brand-mark { background:linear-gradient(145deg,#b7aaff,#78e1d4); color:#10162a }
.tc-brand b { color:#b9b4ff }
.tc-project i, .tc-tab>i { background:#a7a3ff }
.tc-top .btn.primary, .tc-proposal .btn.primary { background:#a7a3ff; border-color:#a7a3ff; color:#10162a }
.tc-cli { background:var(--tc-panel); border-color:var(--tc-border) }
.tc-eyebrow { color:#b9b4ff }
.tc-cli-download { background:#a7a3ff; border-color:#a7a3ff; color:#10162a }
.tc-cli-commands code { color:#c9c6ff; background:#0a0d1c; border-color:var(--tc-border) }
.tc-agent-head select:hover { border-color:#5a5f92 }
.tc-agent-head select:focus-visible { outline-color:#a7a3ff }
.tc-pet-toggle { border-color:#3a4470 !important; color:#b9b4ff !important }
.tc-pet-toggle:hover { background:#171d38 !important }

.demo-caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:currentColor;animation:demo-caret-blink 1s steps(1) infinite}
@keyframes demo-caret-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.demo-caret{animation:none}}
/* hero 2-col fix */
.hero-centered .hero-main{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,58px);align-items:center}
.hero-centered .hero-main>.hero-demo{margin:0;width:100%;min-width:0}
@media(max-width:960px){.hero-centered .hero-main{grid-template-columns:1fr}}

/* ===== vs-table + calc feet fix 2026-10-18 ===== */
.calc-tux, .ucalc > .tux-seat { display:none !important }
.vs-table { table-layout:fixed; width:100%; border-collapse:separate; border-spacing:0 }
.vs-table th, .vs-table td { padding:14px 16px; vertical-align:middle !important; border-bottom:1px solid var(--border) }
.vs-table tbody tr:last-child td { border-bottom:0 }
.vs-table th:first-child, .vs-table td:first-child { width:34% }
.vs-table th:not(:first-child), .vs-table td:not(:first-child) { width:22% }
.vs-table thead th { text-align:center; line-height:1.3; height:auto }
.vs-table thead th:first-child { text-align:left }
.vs-table th.vs-us, .vs-table td.vs-us { text-align:center; background:var(--accent-soft) !important;
  box-shadow:inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent) }
.vs-table th.vs-us { font-size:17px; font-weight:700; color:var(--accent); border-top-left-radius:10px; border-top-right-radius:10px;
  box-shadow:inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 2px 0 var(--accent) }
.vs-table tbody tr:last-child td.vs-us { box-shadow:inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 -2px 0 var(--accent) }
.vs-table td:not(:first-child) { text-align:center }
.vs-table td.vs-us .yes, .vs-table td.vs-us .no, .vs-table td.vs-us .part { margin:0 auto }
.vs-table td:not(:first-child) .yes, .vs-table td:not(:first-child) .no, .vs-table td:not(:first-child) .part { margin-right:6px }
.vs-table td.vs-us .yes, .vs-table td.vs-us .no { margin-right:0 }
.vs-table tr:hover td.vs-us { background:var(--accent-soft) !important }
@media (max-width:720px){
  .vs-table { min-width:600px }
  .vs-table th, .vs-table td { padding:11px 10px; font-size:13px }
  .vs-table th:first-child, .vs-table td:first-child { width:132px }
  .vs-table th.vs-us { font-size:15px }
}

/* remove compare section 2026-10-18 */
#compare,a[href="#compare"],a[href="/#compare"]{display:none!important}

/* кабинет: вкладки-разделы, сетка карточек, низ колонок выравнивается растяжением последней карточки */
.dash-tabs { display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.dash-tabs button { height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--border-2); background:transparent;
  color:var(--text-2); font-weight:600; font-size:13px; cursor:pointer; font-family:inherit }
.dash-tabs button:hover { color:var(--text); border-color:var(--text-3) }
.dash-tabs button.on { background:var(--accent); border-color:var(--accent); color:var(--accent-text) }
.dash-kpis { margin-bottom:20px }
.dash-steps { margin:10px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:6px; color:var(--text-2); font-size:14px }
.dash-steps li::marker { color:var(--accent) }
.dash-log-cta { display:flex; gap:8px; flex-wrap:wrap }
@keyframes dashIn { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }
.dash-kpis, .dash-forms > .dash-col, .dash-keys, .dash-log-head, .dash-log, .secret-box { animation:dashIn .28s ease both }
@media (prefers-reduced-motion: reduce) { .dash-kpis, .dash-forms > .dash-col, .dash-keys, .dash-log-head, .dash-log, .secret-box { animation:none } }
.dash-forms .dash-col { display:flex; flex-direction:column; gap:16px; min-width:0 }
@media(min-width:961px) {
  .dash-forms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:stretch }
  .dash-forms.one { grid-template-columns:minmax(0,760px) }
  .dash-forms.full { grid-template-columns:minmax(0,1fr) }
  .dash-forms .dash-col > *:last-child { flex:1 0 auto }
}
@media(min-width:1500px) {
  /* кабинет на широких экранах: контент занимает больше места, поля по краям меньше */
  [data-page="dashboard"] .wrap { max-width:1520px }
}
/* кабинет: кнопки-строки и мелочи */
.dash-forms .btn { border-radius:12px }
.dash-forms .btn-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.dash-forms .btn-row .btn { margin:0 }