/* Прототип /test/: раскладка экранов пути клиента. Подключается после tokens.css и components.css.
   Своих цветов, кеглей, теней и отступов нет — только переменные tokens.css. Что стоит закрепить
   в _design/ компонентами — список «на правку _design/» на /test/opis/. */

/* Ширина боковой панели — существующее значение --tile-min (260); в _design/ — component.app.side-width. */
:root{--app-side:calc(var(--tile-min) + var(--space-32))}
[hidden]{display:none!important}
body{min-height:100vh}
img{max-width:100%}
ul.plain,ol.plain{list-style:none;padding:0;margin:0}
.muted{color:var(--color-text-secondary)}
.small{font:var(--type-small-weight) var(--type-small-size)/var(--type-small-lh) var(--font-sans)}
.meta{font:var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-lh) var(--font-mono);color:var(--color-text-secondary)}
.stack{display:flex;flex-direction:column;gap:var(--space-stack)}
.stack-s{display:flex;flex-direction:column;gap:var(--space-8)}
.center{text-align:center}
.center>h1,.center>h2{display:inline-block;text-align:left}
.center .lede{margin-inline:auto}
.hr{border:0;border-top:var(--border-width) solid var(--color-border-default);margin:var(--space-24) 0}
.mt{margin-top:var(--space-section)}
.mt-s{margin-top:var(--space-16)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-16)}
@media (max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}

/* ── Шапка сайта ─────────────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:var(--z-sticky);background:var(--color-bg-sticky);
  -webkit-backdrop-filter:blur(var(--sticky-bar-blur));backdrop-filter:blur(var(--sticky-bar-blur));
  border-bottom:var(--border-width) solid var(--color-border-default)}
.site-head .in{max-width:var(--container-tool);margin:0 auto;padding:var(--space-12) var(--space-page-gutter);
  display:flex;align-items:center;gap:var(--space-16)}
.site-nav{display:flex;gap:var(--space-4);margin:0 0 0 auto;padding:0;list-style:none}
.site-nav a{display:inline-flex;align-items:center;min-height:var(--nav-height);padding:0 var(--space-12);
  border-radius:var(--radius-pill);color:var(--color-text-body);text-decoration:none;
  font:var(--type-control-s-weight) var(--type-control-s-size)/var(--type-control-s-lh) var(--font-sans)}
.site-nav a:hover{color:var(--color-text-primary);background:var(--color-bg-sunken)}
.site-nav a[aria-current="page"]{color:var(--color-text-primary);font-weight:var(--fw-600)}
.site-cta{display:flex;gap:var(--space-8);align-items:center}
.site-menu{display:none;margin-left:auto;position:relative}
.site-menu>summary{list-style:none}
.site-menu>summary::-webkit-details-marker{display:none}
.site-menu .pop{right:0;left:auto;top:calc(100% + var(--space-8));bottom:auto;min-width:var(--tile-min)}
.crumbbar{border-bottom:var(--border-width) solid var(--color-border-default)}
.crumbbar .in{max-width:var(--container-tool);margin:0 auto;padding:var(--space-8) var(--space-page-gutter);
  display:flex;justify-content:space-between;gap:var(--space-16)}
@media (max-width:1180px){.site-nav{display:none}.site-menu{display:block}.site-cta .hide-m{display:none}}
.site-cta .btn{white-space:nowrap}
@media (max-width:600px){.hide-s{display:none}}

/* ── Поповер (меню аккаунта, меню сайта на телефоне, состояния прототипа) ── */
.pop{position:absolute;left:0;bottom:calc(100% + var(--space-8));z-index:var(--z-popover);min-width:100%;
  background:var(--color-bg-surface);border:var(--border-width) solid var(--color-border-default);
  border-radius:var(--radius-row);box-shadow:var(--shadow-popover);padding:var(--space-8)}
.pop a,.pop .pi{display:flex;align-items:center;gap:var(--space-8);min-height:var(--nav-height);padding:0 var(--space-12);
  border-radius:var(--radius-control);color:var(--color-text-primary);text-decoration:none;
  font:var(--type-control-s-weight) var(--type-control-s-size)/var(--type-control-s-lh) var(--font-sans)}
.pop a:hover{background:var(--color-bg-sunken)}
.pop a[aria-current="page"]{background:var(--nav-active-bg);font-weight:var(--fw-600)}
.pop .pi{color:var(--color-text-secondary);min-height:0;padding-block:var(--space-8)}
.pop hr{border:0;border-top:var(--border-width) solid var(--color-border-subtle);margin:var(--space-4) 0}

/* ── Герой: текст + карточка входа слева, пример справа ─────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-48);align-items:center;
  padding:var(--space-64) 0}
.hero-text{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-16)}
.hero-text h1{display:inline-block;text-align:left;margin:0}
.auth{width:100%;max-width:var(--container-single);display:flex;flex-direction:column;gap:var(--space-12);text-align:left}
.auth .gbtn,.auth .btn{width:100%}
.or{display:flex;align-items:center;gap:var(--space-12);color:var(--color-text-secondary);
  font:var(--type-micro-weight) var(--type-micro-size)/var(--type-micro-lh) var(--font-mono);text-transform:var(--type-micro-transform)}
.or::before,.or::after{content:"";flex:1;border-top:var(--border-width) solid var(--color-border-default)}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:var(--space-32);padding:var(--space-40) 0}}

/* ── Пример кабинета на сайте ─────────────────────────────────────────── */
.preview{background:var(--color-bg-sunken);border:var(--border-width) solid var(--color-border-default);
  border-radius:var(--radius-card);padding:var(--space-24)}
.preview .card{padding:var(--space-20)}

/* ── Форматы ──────────────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--tile-min)),1fr));gap:var(--space-16);margin-top:var(--space-24)}
.plan{display:flex;flex-direction:column;gap:var(--space-12)}
.plan .pt{font:var(--type-title-xl-weight) var(--type-title-xl-size)/var(--type-title-xl-lh) var(--font-sans);margin:0}
.plan .pp{font:var(--type-num-m-weight) var(--type-num-m-size)/var(--type-num-m-lh) var(--font-mono);margin:0}
.plan .btn{width:100%}
.plan.is-main{border-color:var(--color-border-accent)}
.ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-8)}
.ticks li{position:relative;padding-left:var(--space-24)}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--color-status-ok-text);font-family:var(--font-mono)}
.ticks li.later::before{content:"…";color:var(--color-text-secondary)}
.tabs{display:inline-flex;max-width:100%}

/* ── Вопросы ──────────────────────────────────────────────────────────── */
.faq{max-width:var(--container-dialog);margin:var(--space-24) auto 0;border-top:var(--border-width) solid var(--color-border-default)}
.faq details{border-bottom:var(--border-width) solid var(--color-border-default)}
.faq summary{display:flex;justify-content:space-between;gap:var(--space-16);align-items:center;min-height:var(--nav-height);
  padding:var(--space-16) 0;cursor:pointer;list-style:none;
  font:var(--type-title-m-weight) var(--type-title-m-size)/var(--type-title-m-lh) var(--font-sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--color-text-secondary)}
.faq details[open] summary::after{content:"−"}
.faq details>p{padding:0 0 var(--space-16)}

/* ── Страница по центру: вход, первый запуск ───────────────────────────── */
.bare-head{max-width:var(--container-tool);margin:0 auto;padding:var(--space-20) var(--space-page-gutter)}
.centered{min-height:calc(100vh - var(--space-80));display:grid;place-items:center;padding:var(--space-24) var(--space-page-gutter) var(--space-64)}
.centered .box{width:100%;max-width:var(--container-single)}
.login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-48);align-items:center;
  max-width:var(--container-tool);margin:0 auto;padding:var(--space-48) var(--space-page-gutter) var(--space-64)}
@media (max-width:900px){.login{grid-template-columns:1fr}.login .preview{display:none}}

/* ── Оболочка приложения: боковая панель + рабочая область ─────────────── */
.app{display:grid;grid-template-columns:var(--app-side) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;gap:var(--space-16);
  padding:var(--space-16);background:var(--color-bg-surface);border-right:var(--border-width) solid var(--color-border-default)}
.side-top{display:flex;align-items:center;gap:var(--space-8)}
.side-top .side-menu{display:none;margin-left:auto;position:relative}
.side-top .side-menu>summary{list-style:none}
.side-top .side-menu>summary::-webkit-details-marker{display:none}
.side-top .side-menu .pop{right:0;left:auto;top:calc(100% + var(--space-8));bottom:auto;min-width:var(--tile-min);max-height:80vh;overflow:auto}
.side .btn--primary{width:100%;justify-content:flex-start}
.side .cnav--side{padding:0;gap:var(--space-4)}
.side .cnav--side a{border-color:transparent;background:transparent;border-radius:var(--radius-control);justify-content:flex-start}
.side .cnav--side a:hover{background:var(--color-bg-sunken)}
.side .cnav--side a[aria-current="page"]{background:var(--nav-active-bg);border-color:var(--nav-active-border)}
.side .cnav--side .badge{margin-left:auto}
.side-k{font:var(--type-micro-weight) var(--type-micro-size)/var(--type-micro-lh) var(--font-mono);letter-spacing:var(--type-micro-tracking);
  text-transform:var(--type-micro-transform);color:var(--color-text-secondary);margin:var(--space-8) 0 0;padding:0 var(--space-12)}
.side-foot{margin-top:auto;position:relative}
.acct>summary{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-8);border-radius:var(--radius-control);
  cursor:pointer;list-style:none;border:var(--border-width) solid var(--color-border-default)}
.acct>summary::-webkit-details-marker{display:none}
.acct>summary:hover{border-color:var(--color-border-control-hover)}
.ava{flex:0 0 auto;display:inline-grid;place-items:center;width:var(--nav-height);height:var(--nav-height);border-radius:var(--radius-round);
  background:var(--color-bg-sunken);font:var(--type-label-weight) var(--type-label-size)/1 var(--font-sans)}
.acct .who{min-width:0;display:flex;flex-direction:column}
.acct .who b{font:var(--type-label-weight) var(--type-label-size)/var(--type-label-lh) var(--font-sans)}
.main{min-width:0;padding:var(--space-page-top) var(--space-page-gutter) var(--space-page-bottom)}
.main-in{max-width:var(--container-dialog);margin:0 auto}
.main-wide{max-width:var(--container-tool);margin:0 auto}
.page-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-12);margin-bottom:var(--space-24)}
.page-top h1{margin:0}
.page-top .btn-row{margin-left:auto}
@media (max-width:1180px){
  /* Без rows свободная высота экрана делится между шапкой и рабочей областью — шапка раздувается. */
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .side{position:sticky;height:auto;z-index:var(--z-sticky);flex-direction:row;align-items:center;padding:var(--space-12) var(--space-page-gutter);
    border-right:0;border-bottom:var(--border-width) solid var(--color-border-default);background:var(--color-bg-sticky);
    -webkit-backdrop-filter:blur(var(--sticky-bar-blur));backdrop-filter:blur(var(--sticky-bar-blur));overflow:visible}
  .side-top{flex:1}
  .side-top .side-menu{display:block}
  .side-nav,.side-foot{display:none}
}

/* ── Путь: шаги ──────────────────────────────────────────────────────── */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-8)}
.steps li{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-16);min-height:var(--nav-height);
  background:var(--color-bg-surface);border:var(--border-width) solid var(--color-border-default);border-radius:var(--radius-row)}
.steps .n{font:var(--type-num-s-weight) var(--type-meta-size)/var(--type-meta-lh) var(--font-mono);color:var(--color-text-secondary);min-width:2ch}
.steps .t{flex:1;min-width:0}
.steps a.t{color:inherit;text-decoration:none}
.steps li.now{background:var(--nav-active-bg);border-color:var(--nav-active-border)}
.steps li.now .t{font-weight:var(--fw-600)}
.steps-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.steps-2{grid-template-columns:1fr}}

/* ── Поле ввода чата ─────────────────────────────────────────────────── */
.composer{background:var(--color-bg-surface);border:var(--border-width) solid var(--field-border);border-radius:var(--radius-card);
  padding:var(--space-12) var(--space-16);display:flex;flex-direction:column;gap:var(--space-8)}
.composer textarea{border:0;outline:0;width:100%;min-height:var(--field-textarea-min);resize:none;background:transparent;padding:var(--space-4) 0;
  font:var(--type-field-weight) var(--type-field-size)/var(--type-field-lh) var(--font-sans);color:var(--field-text)}
.composer:focus-within{border-color:var(--color-border-control-hover)}
.composer .tools{display:flex;align-items:center;gap:var(--space-8)}
.composer .send{margin-left:auto;display:inline-grid;place-items:center;width:var(--nav-height);height:var(--nav-height);
  border-radius:var(--radius-control);border:var(--border-width) solid var(--button-primary-border);background:var(--button-primary-bg);cursor:pointer}
.composer .send svg{width:var(--space-20);height:var(--space-20)}
.composer .send path{stroke:var(--color-brand-red)}
.composer.is-off{background:var(--field-disabled-bg);border-color:var(--color-border-disabled)}
.composer.is-off textarea{color:var(--color-text-disabled);cursor:not-allowed}
.composer.is-off .send{border-color:var(--color-border-disabled);background:var(--button-disabled-bg);cursor:not-allowed}
.composer.is-off .send path{stroke:var(--color-text-disabled)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-8);justify-content:center}
.chips a{display:inline-flex;align-items:center;min-height:var(--nav-height);padding:0 var(--space-16);border-radius:var(--radius-pill);
  border:var(--border-width) solid var(--color-border-button);background:var(--color-bg-surface);color:var(--color-text-body);text-decoration:none;
  font:var(--type-control-s-weight) var(--type-control-s-size)/var(--type-control-s-lh) var(--font-sans)}
.chips a:hover{border-color:var(--color-border-button-hover);color:var(--color-text-primary)}
.greet{display:flex;flex-direction:column;align-items:center;gap:var(--space-24);text-align:center;padding:var(--space-48) 0 var(--space-32)}
.greet h1{display:inline-block;text-align:left;margin:0}
.greet .composer,.greet .inset{width:100%;text-align:left}

/* ── Чат: сообщения ──────────────────────────────────────────────────── */
.thread{display:flex;flex-direction:column;gap:var(--space-24);padding-bottom:var(--space-24)}
.msg-u{align-self:flex-end;max-width:min(80%,var(--container-single));background:var(--color-bg-sunken);
  border-radius:var(--radius-row);padding:var(--space-12) var(--space-16)}
.msg-a{max-width:var(--container-measure)}
.msg-a .acts{display:flex;gap:var(--space-4);margin-top:var(--space-8)}
.typing{display:inline-flex;gap:var(--space-4)}
.typing i{width:var(--space-8);height:var(--space-8);border-radius:var(--radius-round);background:var(--color-text-secondary);
  animation:t-blink var(--motion-pulse) var(--motion-ease) infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes t-blink{0%,100%{opacity:.25}50%{opacity:1}}
.dock{position:sticky;bottom:0;background:var(--color-bg-page);padding:var(--space-12) 0 var(--space-16)}

/* ── Две колонки: разговор и результат ────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-24);align-items:start}
.split-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--tile-min));gap:var(--space-24);align-items:start}
.panel-h{display:flex;align-items:center;gap:var(--space-8);padding-bottom:var(--space-12);margin-bottom:var(--space-16);
  border-bottom:var(--border-width) solid var(--color-border-subtle)}
.panel-h .btn-row{margin-left:auto}
@media (max-width:1180px){.split,.split-r{grid-template-columns:1fr}}

/* ── Настройки: вкладки слева ─────────────────────────────────────────── */
.settings{display:grid;grid-template-columns:minmax(0,var(--tile-min)) minmax(0,1fr);gap:var(--space-32);align-items:start}
.settings>nav .cnav--side a{justify-content:flex-start}
.set-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-12) var(--space-24);padding:var(--space-16) 0;
  border-bottom:var(--border-width) solid var(--color-border-subtle)}
.set-row:last-child{border-bottom:0}
.set-row .lbl{flex:1 1 var(--tile-min);min-width:0}
.set-row .lbl b{display:block}
.set-row .val{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center}
.switch{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--nav-height);cursor:pointer}
.switch input{width:var(--space-20);height:var(--space-20);accent-color:var(--color-text-primary)}
@media (max-width:900px){.settings{grid-template-columns:minmax(0,1fr)}.settings>*{min-width:0}.settings>nav .cnav--side{flex-direction:row;overflow-x:auto}
  .settings>nav .cnav--side a{width:auto}}

/* ── Загрузка: серые заготовки ─────────────────────────────────────────── */
.skel{display:block;background:var(--color-bg-sunken);border-radius:var(--radius-8);height:var(--space-16);margin:0 0 var(--space-12)}
.skel.h{height:var(--space-32);width:60%}
.skel.w{width:80%}.skel.s{width:40%}
.skel.box{height:calc(var(--space-80) + var(--space-40));border-radius:var(--radius-row)}

/* ── Пустое место «заполнится, когда…» ─────────────────────────────────── */
.empty{border:var(--border-width) dashed var(--color-border-control);border-radius:var(--radius-row);padding:var(--space-20);
  color:var(--color-text-secondary);background:var(--color-bg-surface)}
.empty b{color:var(--color-text-primary)}

/* ── Письмо ───────────────────────────────────────────────────────────── */
.mail{max-width:var(--container-single);margin:0 auto}
.mail-h{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-4) var(--space-12);margin-bottom:var(--space-16)}

/* ── Состояния прототипа: плашка в углу ───────────────────────────────── */
.proto{position:fixed;right:var(--space-16);bottom:var(--space-16);z-index:var(--z-toast)}
.proto>summary{list-style:none;cursor:pointer}
.proto>summary::-webkit-details-marker{display:none}
.proto>summary .badge{box-shadow:var(--shadow-popover);min-height:var(--nav-height);padding:0 var(--space-16)}
.proto .pop{left:auto;right:0;min-width:var(--tile-min)}

/* ── Опись ────────────────────────────────────────────────────────────── */
.opis .row-top{flex-wrap:wrap}
.opis .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--tile-min)),1fr));gap:var(--space-8) var(--space-24);
  padding:0 var(--space-row-pad-x) var(--space-12)}
.opis .cols p{margin:0}
.score{font:var(--type-num-s-weight) var(--type-meta-size)/var(--type-meta-lh) var(--font-mono)}

/* Команды в описи на телефоне переносятся, а не растягивают страницу. */
pre.quote{white-space:pre-wrap;overflow-wrap:anywhere}
/* Телефон: в шапке знак и «Меню»; «Записаться на разговор» — первым пунктом меню (малой кнопки в _design/ нет). */
.site-menu .hide-wide{display:none}
@media (max-width:600px){.site-menu .hide-wide{display:block}}

/* ── Путь ассистента (16.10): боковая панель, поле ввода, лимит, артефакт, цены, загрузка ── */
.err{color:var(--field-error-text)}
/* Боковая панель: пункт без страницы и список «Недавние» в одну строку с обрезкой. */
.side .cnav--side .off{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8);min-height:var(--nav-height);
  padding:0 var(--nav-pad-x);color:var(--color-text-disabled);
  font:var(--type-control-s-weight) var(--type-control-s-size)/var(--type-control-s-lh) var(--font-sans)}
.side .recent a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .recent a{color:var(--color-text-body)}
/* Поле ввода: «+» с меню и выбор модели. */
.cmenu{position:relative}
.cmenu>summary{list-style:none;cursor:pointer}
.cmenu>summary::-webkit-details-marker{display:none}
.cmenu .pop{min-width:var(--tile-min)}
.composer .model{margin-left:auto;width:auto;min-width:0;max-width:60%}
.composer .model~.send{margin-left:0}
/* C24: плашка лимита прилегает к полю ввода сверху. */
.limit{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-8) var(--space-16);
  padding:var(--space-8) var(--space-16);background:var(--color-status-warn-bg);color:var(--color-status-warn-text);
  border:var(--border-width) solid var(--color-status-warn-line);border-bottom:0;border-radius:var(--radius-card) var(--radius-card) 0 0;
  font:var(--type-small-weight) var(--type-small-size)/var(--type-small-lh) var(--font-sans);text-align:left}
.limit a{color:inherit;font-weight:var(--fw-600)}
.limit+.composer-wrap>.composer,.limit+.composer{border-top-left-radius:0;border-top-right-radius:0}
.dock-limit{width:100%}
/* Новый чат: приветствие и поле — в середине экрана, как у образца. */
.greet{min-height:70vh;justify-content:center}
/* Чат и панель артефакта: рядом на широком, друг под другом на узком. */
.chat-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-24);align-items:start}
.chat-col{min-width:0}
.chat-split .art{position:sticky;top:var(--space-16)}
.art .cnav{margin-bottom:var(--space-16)}
.art-card{display:flex;flex-direction:column;gap:var(--space-4);max-width:var(--tile-min);margin:var(--space-8) 0;padding:var(--space-12) var(--space-16);
  border:var(--border-width) solid var(--color-border-default);border-radius:var(--radius-row);background:var(--color-bg-surface);
  color:var(--color-text-primary);text-decoration:none}
.art-card:hover{border-color:var(--color-border-control-hover)}
@media (max-width:1180px){.chat-split{grid-template-columns:1fr}.chat-split .art{position:static}}
/* Цены: две карточки на повышении плана, таблица сравнения, QR. */
.plans--2{max-width:var(--container-dialog);margin-inline:auto}
label.plan{cursor:pointer}
.compare th,.compare td{text-align:center}
.compare th:first-child,.compare td:first-child{text-align:left}
.compare th .btn{margin-top:var(--space-8)}
.qr-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-12)}
.qr{width:calc(var(--space-80) * 2);height:calc(var(--space-80) * 2)}
.qr rect{fill:var(--color-text-primary)}
.only-s{display:none}
@media (max-width:600px){.only-s{display:inline-flex}}
/* Проекты: поиск и сортировка в строку; статья: оглавление справа. */
.proj-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--tile-min));gap:var(--space-12);margin-bottom:var(--space-24)}
@media (max-width:600px){.proj-tools{grid-template-columns:1fr}}
.toc{position:sticky;top:var(--space-80)}
.toc a{color:var(--color-text-body)}
@media (max-width:1180px){.toc{position:static;order:-1}}
.use{margin-bottom:var(--space-16)}
.art .panel-h{flex-wrap:wrap}
.compare th .btn{text-transform:none;letter-spacing:normal}
/* Вход: колонки по центру экрана по высоте, как у образца. */
@media (min-width:901px){.login{min-height:calc(100vh - var(--space-80))}}
/* ── Наш фронтенд (16.10, второй проход): площадки, кабинет, свой Claude ── */
/* Чат: на ≥820 поле ввода прижато к низу рабочей области (липкое), а не стоит сразу под сообщением.
   Высота колонки — экран минус отступы рабочей области и строка заголовка чата. */
@media (min-width:820px){
  .chat-col{display:flex;flex-direction:column;
    min-height:calc(100dvh - var(--space-page-top) - var(--space-page-bottom) - var(--space-80))}
  .chat-col>.dock{margin-top:auto}
}
@media (min-width:820px) and (max-width:1180px){
  /* Сверху ещё полоса приложения (знак и «Меню»). */
  .chat-col{min-height:calc(100dvh - var(--space-page-top) - var(--space-page-bottom) - var(--space-80) - var(--space-64))}
}
/* Цены: «цена появится» — текстом, а не цифрой. */
.plan .pp.tbd{font:var(--type-title-l-weight) var(--type-title-l-size)/var(--type-title-l-lh) var(--font-sans);color:var(--color-text-secondary)}
/* Полоса площадок под героем. */
.plat-strip{list-style:none;margin:0;padding:var(--space-16) 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-16);
  border-top:var(--border-width) solid var(--color-border-default);border-bottom:var(--border-width) solid var(--color-border-default)}
.plat-strip li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-12);min-width:0}
.plat-strip li b{font:var(--type-title-m-weight) var(--type-title-m-size)/var(--type-title-m-lh) var(--font-sans)}
.plat-strip li .small{flex:1 1 100%;order:3}
@media (max-width:600px){.plat-strip{grid-template-columns:1fr}}
/* Адрес коннектора с кнопкой «Скопировать». */
.addr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);min-width:0}
.addr code{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;padding:var(--space-8) var(--space-12);border-radius:var(--radius-control);
  background:var(--color-bg-sunken);font:var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-lh) var(--font-mono)}
.row-body{padding:0 var(--space-row-pad-x) var(--space-row-pad-y);min-width:0}
.row-body>p{margin:0 0 var(--space-8)}
.row-body .btn-row{margin:0}
.steps .t code{overflow-wrap:anywhere}
.set-row .val .addr{flex:1 1 100%}
/* Кабинет: плитки площадок на всю ширину рабочей области. */
.plats .tile.is-soon{background:var(--color-bg-surface);border-style:dashed;border-color:var(--color-border-control)}
.plats .tile.is-soon .tt{color:var(--color-text-secondary)}
.plats .tile .badge{align-self:flex-start}
.plats .tile.is-add{border-style:dashed}
a.tile.plat{color:inherit;text-decoration:none}
/* Кабинет площадки: строка функции «ваше решение» выделена как активный пункт. */
.row.fn.now{background:var(--nav-active-bg);border-color:var(--nav-active-border)}
.row.fn .rtitle a{color:inherit}
.own{position:sticky;top:var(--space-16)}
@media (max-width:1180px){.own{position:static}}
/* Кабинет площадки: справа карточка «свой Claude» чуть шире плитки — адрес помещается в строку;
   на ≥1440 функции в две колонки, чтобы занять ширину. */
.cab-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,calc(var(--tile-min) + var(--space-64)));gap:var(--space-24);align-items:start}
.fn-list{display:grid;gap:var(--space-8)}
@media (min-width:1440px){.fn-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1180px){.cab-split{grid-template-columns:minmax(0,1fr)}}
/* Строки «платформа → действие»: на телефоне кнопка уходит под название, а не сжимает его. */
.ways .row-top{flex-wrap:wrap}
.ways .rhead{flex:1 1 calc(var(--space-80) * 2)}
.set-row .val .gbtn{width:100%}

/* ── Вход: пропорции claude.ai/login, половины зеркально (владелец 17.10) ─
   Слева на месте их фото — знак площадок и названия, справа заголовок и форма в карточке.
   Подложки у знака нет: серую панель владелец отверг 17.10. На телефоне знака нет, как фото у образца. */
/* Geologica — шрифт строки площадок (владелец 17.10, выбран из шести); файл копирует сборка из _build/fonts/. */
@font-face{font-family:"Geologica";font-weight:500;font-display:swap;
  src:url("fonts/geologica-latin-500-normal.woff2") format("woff2")}
.signin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-40);max-width:var(--size-1440);
  margin:0 auto;padding:var(--space-24) var(--space-page-gutter) var(--space-36);min-height:calc(100vh - var(--space-80))}
.signin-form{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-16);min-width:0}
/* Заголовок легче штатного H1 (800 владелец назвал уродливым 17.10): 600, как у образца — крупно и спокойно. */
.signin-claim{margin:0;max-width:11ch;text-align:center;color:var(--color-text-primary);text-wrap:balance;
  font:var(--fw-600) var(--fs-52)/1.08 var(--font-sans);letter-spacing:-.03em}
.signin-sub{margin:0 0 var(--space-24);max-width:36ch;text-align:center;text-wrap:balance;color:var(--color-text-secondary);
  font:var(--fw-400) var(--fs-19)/1.45 var(--font-sans)}
.signin-form > [data-st]{display:flex;justify-content:center;width:100%}
.signin-form .auth{width:100%;max-width:calc(var(--tile-min) * 1.75)}
.signin .auth--login{gap:var(--space-16);padding:var(--space-32);background:var(--color-bg-surface);
  border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.signin .auth--login .small{text-align:center}
/* «Всё крупнее» (владелец 17.10): кнопки и поле входа выше и крупнее штатных. */
.signin .auth--login :is(.gbtn,.btn,.field input){min-height:var(--space-52);font-size:var(--fs-17)}

/* Знак площадок — контур знака _design/logo/mark.svg, семь залитых полосок; пульс — из platforms-wave.html, 2.4 с. */
/* Размер и зазор — как в первой из трёх версий 17.10, которая владельцу понравилась больше. */
.signin-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-40);min-width:0}
.signin-stage .wave{display:block;width:auto;height:min(calc(var(--tile-min) * 1.4), 40vh);overflow:visible}
.wave-pulse{transform-box:fill-box;transform-origin:center;opacity:0;
  animation:wave-pulse 2.4s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes wave-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9,1.14);opacity:0}}
@media (prefers-reduced-motion:reduce){.wave-pulse{animation:none}}
/* Названия — строчными блоками: если строка не влезает, text-wrap:balance делит её поровну; отрицательное поле
   гасит поля крайних названий. */
.pcloud{--pc-gap:var(--space-24);--pc-row:var(--space-12);list-style:none;padding:0;
  margin:calc(var(--pc-row) / -2) calc(var(--pc-gap) / -2);text-align:center;text-wrap:balance;
  color:var(--color-text-secondary);font:var(--fw-500) var(--fs-17)/1.2 "Geologica",var(--font-sans)}
.pcloud li{display:inline-block;margin:calc(var(--pc-row) / 2) calc(var(--pc-gap) / 2)}

@media (max-width:1180px){
  .signin-claim{font-size:var(--fs-40)}
  .signin-sub{font-size:var(--fs-17)}
  .signin-stage .wave{height:min(var(--tile-min), 40vh)}
  .pcloud{--pc-gap:var(--space-16);font-size:var(--fs-15)}
}
@media (max-width:900px){
  .signin{grid-template-columns:minmax(0,1fr);padding-top:var(--space-40)}
  .signin-stage{display:none}
}
@media (max-width:640px){
  .signin{min-height:0}
  .signin-form{justify-content:flex-start}
  .signin-claim{font-size:var(--fs-32)}
  .signin-sub{font-size:var(--fs-16);margin-bottom:var(--space-8)}
  .signin .auth--login{padding:var(--space-24)}
}

/* ── Приложение по снимку claude.ai/new (владелец 17.10) ──────────────────
   Боковая панель: свернуть · знак · переключатель «Чат | Кабинет», поиск, пункты с иконками, «Закреплённые»,
   «Недавние», аккаунт внизу с меню (настройки, использование, подписка). Иконки — своё, на правку _design/. */
.ic{width:var(--space-20);height:var(--space-20);flex:0 0 auto}
.icon-btn{display:inline-grid;grid-auto-flow:column;place-items:center;gap:var(--space-4);min-width:var(--nav-height);height:var(--nav-height);
  padding:0 var(--space-8);border:0;border-radius:var(--radius-control);background:transparent;color:var(--color-text-secondary);cursor:pointer;
  list-style:none;text-decoration:none}
.icon-btn::-webkit-details-marker{display:none}
.icon-btn:hover{background:var(--color-bg-sunken);color:var(--color-text-primary)}
.side{gap:var(--space-12)}
.side-top .seg{margin-left:auto;display:inline-flex;padding:var(--space-4);gap:var(--space-4);border-radius:var(--radius-control);
  background:var(--color-bg-sunken)}
.seg a{display:inline-grid;place-items:center;padding:var(--space-4) var(--space-8);border-radius:var(--radius-8);color:var(--color-text-secondary)}
.seg a[aria-current="page"]{background:var(--color-bg-surface);color:var(--color-text-primary);
  box-shadow:0 0 0 var(--border-width) var(--color-border-default)}
.side-top .wordmark{margin-right:var(--space-4)}
.side-nav{display:flex;flex-direction:column;gap:var(--space-8);flex:1;min-height:0;overflow:auto}
.side-search{display:flex;align-items:center;gap:var(--space-8);min-height:var(--nav-height);padding:0 var(--space-12);
  border:var(--border-width) solid var(--color-border-default);border-radius:var(--radius-control);background:var(--color-bg-surface);
  color:var(--color-text-secondary)}
.side-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;color:var(--color-text-primary)}
.snav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.snav a,.snav .off,.snav summary{display:flex;align-items:center;gap:var(--space-12);min-height:var(--nav-height);padding:0 var(--space-12);
  border-radius:var(--radius-control);color:var(--color-text-body);text-decoration:none;cursor:pointer;list-style:none}
.snav summary::-webkit-details-marker{display:none}
.snav a:hover,.snav summary:hover{background:var(--color-bg-sunken);color:var(--color-text-primary)}
.snav a[aria-current="page"]{background:var(--color-bg-sunken);color:var(--color-text-primary);font-weight:var(--fw-600)}
.snav .off{color:var(--color-text-secondary);cursor:default}
.snav .ic{color:var(--color-text-secondary)}
.snav .more[open] summary .ic{transform:rotate(90deg)}
.snav .more summary{color:var(--color-text-secondary)}
.more-in{display:flex;flex-direction:column;padding-left:calc(var(--space-12) * 2 + var(--space-20))}
.more-in a{min-height:auto;padding:var(--space-8) var(--space-12)}
.snav.recent a{gap:0}
.snav.recent span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.side-k{margin-top:var(--space-12)}
.side-k--row{display:flex;align-items:center;justify-content:space-between;padding-right:0}
.side-k--row .icon-btn{min-width:0;height:auto;padding:var(--space-4)}
.acct>summary{border-color:transparent}
.acct>summary:hover{background:var(--color-bg-sunken);border-color:transparent}
.acct>summary .ic{margin-left:auto;color:var(--color-text-secondary)}
.acct-pop{left:0;right:0;min-width:0}
.acct-pop a{display:flex;align-items:center;gap:var(--space-12)}
.acct-pop a>span{display:flex;flex-direction:column;min-width:0;flex:1}
.acct-pop a>.meta{flex:0 0 auto}
.acct-pop .ic{color:var(--color-text-secondary)}
.acct-pop .up{color:var(--color-text-primary);font-weight:var(--fw-600)}
.bar-mini{display:block;height:var(--space-4);margin:var(--space-4) 0;border-radius:var(--radius-pill);background:var(--color-bg-sunken);overflow:hidden}
.bar-mini i{display:block;height:100%;background:var(--color-text-primary);border-radius:inherit}

/* Экран после входа */
.home{position:relative;min-height:calc(100vh - var(--space-page-top) - var(--space-page-bottom));display:grid;place-items:center}
.tmp-chat{position:absolute;top:0;right:0}
.home-c{width:100%;max-width:var(--container-dialog);display:flex;flex-direction:column;align-items:center;gap:var(--space-24);
  padding-bottom:10vh}
.home-c [data-st]{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-24)}
.home-c [data-st][hidden]{display:none}
.hello{display:flex;align-items:center;gap:var(--space-12);margin:0;padding-left:0;text-align:center}
.hello::before{display:none}
.hello img{width:var(--space-40);height:var(--space-40);flex:0 0 auto}
.composer-wrap{width:100%}
.composer .tools{display:flex;align-items:center;gap:var(--space-8)}
.tools-r{margin-left:auto;display:flex;align-items:center;gap:var(--space-4)}
.composer .cmenu>summary{list-style:none}
.composer .mic .ic+.ic{width:var(--space-12);height:var(--space-12)}
.composer .send{margin-left:0;color:var(--color-brand-red)}
.composer:has(textarea:placeholder-shown) .send{border-color:var(--color-border-disabled);background:var(--button-disabled-bg);cursor:not-allowed}
.composer:has(textarea:placeholder-shown) .send path{stroke:var(--color-text-disabled)}
.composer .cmenu .pop a{display:flex;align-items:center;gap:var(--space-12)}
.composer .cmenu .pop a .meta{margin-left:auto}
.under{display:flex;align-items:center;gap:var(--space-16);padding:var(--space-8) var(--space-16) 0;color:var(--color-text-body)}
.umenu{position:relative}
.umenu>summary{list-style:none;display:inline-flex;align-items:center;gap:var(--space-4);cursor:pointer}
.umenu>summary::-webkit-details-marker{display:none}
.umenu>summary .ic{width:var(--space-12);height:var(--space-12)}
.umenu--r{margin-left:auto}
.umenu .pop{top:calc(100% + var(--space-8));bottom:auto;min-width:calc(var(--tile-min) * .8)}
.umenu--r .pop{left:auto;right:0}
.side-top{gap:var(--space-4)}
.side-top>.icon-btn{min-width:0;padding:0 var(--space-4);margin-right:var(--space-8)}
.seg a{padding:var(--space-4)}
@media (max-width:1180px){.side-top .seg,.side-nav{display:none}}