/* ─────────────────────────────────────────────────────────
   KADR — интерфейс рабочего места.

   Опирается на токены.css и основа.css, своих цветов не заводит:
   всё через токены, поэтому обе темы работают сами собой.

   Метафора та же, что на витрине: кадр — прямоугольник с прямыми
   углами, цифры выровнены табличными знаками (font-variant-numeric),
   а не третьей гарнитурой — гарнитур ровно две, как требует пункт 14
   чек-листа запретов.
   ───────────────────────────────────────────────────────── */

/* ─────────── шапка приложения ─────────── */
.app-head .head-in{ gap:var(--s5); }

.app-nav{ display:none; gap:var(--s2); margin-left:var(--s6); }
@media (min-width:860px){ .app-nav{ display:flex; } }
.app-nav button{
  background:none; border:0; border-bottom:1px solid transparent;
  font:inherit; font-size:.9375rem; color:var(--dim);
  padding:6px 2px; cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.app-nav button:hover{ color:var(--ink); }
.app-nav button[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--acc); }

.purse{
  display:flex; align-items:center; gap:var(--s4);
  margin-left:auto;
}
.purse-sum{
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:1.0625rem;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.purse-sum small{
  display:block; font-size:.625rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim); margin-bottom:1px;
}
.app-head .btn.btn-ghost{ min-height:38px; padding:0 var(--s4); font-size:.875rem; }

/* На узком экране в шапку не влезали логотип, почта, очередь, баланс,
   «Пополнить» и переключатель разом: приёмка мерила разлив в 226 px
   на 375. Внизу при этом уже стоит .tabbar, поэтому почта и «Пополнить»
   в шапке — дубль. Оставляем знак, баланс и переключатель. */
@media (max-width:859px){
  .app-head .head-in{ gap:var(--s4); }
  /* Прячем почту и «Пополнить» — они дублируются ниже. А вот «Выйти»
     скрывать нельзя: в .tabbar его нет, и на телефоне из аккаунта было
     не выйти вообще. Оставляем без подписи, одной ссылкой. */
  .app-head .me > *:not(.me-в){ display:none; }
  .app-head .btn.btn-ghost{ display:none; }
  .app-head .me-в{ font-size:.8125rem; }
  .purse{ gap:var(--s3); }
}

/* нижняя навигация на узком экране */
.tabbar{
  position:fixed; inset:auto 0 0 0; z-index:60;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb,var(--paper) 94%,transparent); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
@media (min-width:860px){ .tabbar{ display:none; } }
.tabbar button{
  background:none; border:0; border-top:2px solid transparent;
  font:inherit; font-size:.75rem; color:var(--dim);
  padding:11px 4px calc(11px + env(safe-area-inset-bottom)); cursor:pointer;
}
.tabbar button[aria-current="page"]{ color:var(--acc); border-top-color:var(--acc); }

/* ─────────── общий каркас экрана ─────────── */
.screen{ display:none; padding-block:var(--s6) var(--s9); }
.screen.on{ display:block; }
@media (max-width:859px){ .screen{ padding-bottom:96px; } }

.screen-h{ margin-bottom:var(--s6); }
.screen-h h1{
  font-size:clamp(1.75rem,4vw,2.5rem); line-height:1;
  letter-spacing:-.03em; margin:var(--s3) 0 0;
}
.screen-h p{ margin-top:var(--s3); color:var(--dim); max-width:56ch; }

/* ─────────── рабочее место ─────────── */
.ws{ display:grid; gap:var(--s6); align-items:start; }
@media (min-width:1040px){
  .ws{ grid-template-columns:376px minmax(0,1fr); gap:var(--s7); }
}

.panel{
  border:1px solid var(--line); background:var(--paper-2);
  padding:var(--s5);
}
@media (min-width:1040px){
  /* Панель липнет и прокручивается сама: при длинной очереди кнопка запуска
     иначе уезжает вниз и до неё приходится листать всю выдачу. */
  .panel{
    position:sticky; top:82px;
    max-height:calc(100vh - 100px);
    overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
  }
  .panel::-webkit-scrollbar{ width:10px; }
  .panel::-webkit-scrollbar-thumb{
    background:var(--line-2); border:3px solid var(--paper-2); border-radius:6px;
  }
  .panel::-webkit-scrollbar-track{ background:transparent; }
}

.pf + .pf{ margin-top:var(--s5); }
.pf-lab{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.6875rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim); margin-bottom:var(--s3);
}
.pf-lab .cnt{ font-variant-numeric:tabular-nums; color:var(--dim); }

.ta{
  width:100%; min-height:118px; resize:vertical;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line-2); border-radius:0;
  font:inherit; font-size:.9375rem; line-height:1.55;
  padding:var(--s4);
}
.ta::placeholder{ color:var(--dim); }
.ta:focus{ outline:2px solid var(--acc); outline-offset:1px; border-color:transparent; }

/* референс */
.ref{
  display:flex; align-items:center; gap:var(--s4);
  border:1px dashed var(--line-2); border-radius:0;
  padding:var(--s4); cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.ref:hover{ border-color:var(--dim); background:color-mix(in srgb,var(--ink) 4%,transparent); }
.ref-ico{
  width:34px; height:34px; flex:none; border:1px solid var(--line-2);
  display:grid; place-items:center; color:var(--dim);
}
.ref-t{ font-size:.875rem; }
.ref-t small{ display:block; color:var(--dim); font-size:.8125rem; margin-top:2px; }

/* пропорции — сегменты с настоящими прямоугольниками */
.seg{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s2); }
.sg{ position:relative; }
.sg input{ position:absolute; opacity:0; pointer-events:none; }
.sg span{
  display:grid; place-items:center; gap:6px;
  padding:var(--s3) 2px; cursor:pointer;
  border:1px solid var(--line); border-radius:0;
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.6875rem; color:var(--dim);
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.sg span::before{
  content:''; display:block; border:1px solid currentColor; opacity:.85;
  width:var(--w); height:var(--h);
}
.sg:hover span{ border-color:var(--line-2); color:var(--ink); }
.sg input:checked + span{ border-color:var(--acc); color:var(--acc); background:var(--acc-fog); }
.sg input:focus-visible + span{ outline:2px solid var(--acc); outline-offset:2px; }

/* итог и запуск */
.cost{
  margin-top:var(--s5); padding-top:var(--s5);
  border-top:1px solid var(--line-2);
}
.cost-row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.875rem; color:var(--dim);
}
.cost-row + .cost-row{ margin-top:var(--s2); }
.cost-row b{
  font-family:var(--text); font-variant-numeric:tabular-nums; font-weight:500; font-size:1.5rem;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.cost .btn{ width:100%; justify-content:center; margin-top:var(--s4); }
.cost-fine{ margin-top:var(--s3); font-size:.8125rem; color:var(--dim); }
.cost-warn{ color:var(--сбой); }

/* ─────────── результаты ─────────── */
.res-h{
  display:flex; align-items:baseline; gap:var(--s4);
  flex-wrap:wrap; margin-bottom:var(--s4);
}
.res-h h2{ font-size:1.25rem; letter-spacing:-.015em; font-weight:700; }
.res-h .mono{ margin-left:auto; }

.shots{ display:grid; gap:var(--s3); grid-template-columns:repeat(2,1fr); align-items:start; }
@media (min-width:700px){ .shots{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1400px){ .shots{ grid-template-columns:repeat(4,1fr); } }

.shot{
  position:relative; border:1px solid var(--line);
  background:var(--paper-2); overflow:hidden;
}
.shot-img{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--paper-3); }
.shot-img img{ width:100%; height:100%; object-fit:cover; transition:transform .32s var(--ease); }
.shot:hover .shot-img img{ transform:scale(1.03); }
/* пропорция задаётся на группе: все кадры одного запроса одинаковы,
   поэтому нижний край строки ровный, а не рваный */
.shots.r43  .shot-img{ aspect-ratio:4/3; }
.shots.r169 .shot-img{ aspect-ratio:16/9; }
.shots.r34  .shot-img{ aspect-ratio:3/4; }
.shots.r916 .shot-img{ aspect-ratio:9/16; }

/* ─────────── группа: один запрос ─────────── */
.run + .run{ margin-top:var(--s6); padding-top:var(--s6); border-top:1px solid var(--line); }
.run-head{ margin-bottom:var(--s4); }
.run-prompt{
  font-size:.9375rem; color:var(--ink); max-width:64ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.run-meta{
  display:flex; flex-wrap:wrap; gap:6px var(--s4); margin-top:var(--s2);
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.6875rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim);
}
.run-meta .acc{ color:var(--acc); }
.run-back{ color:var(--ок); }

/* кроп-марки — та же деталь, что на витрине */
.shot::before,.shot::after{
  content:''; position:absolute; width:13px; height:13px;
  border:1px solid var(--acc); opacity:0; z-index:3;
  transition:opacity .28s var(--ease); pointer-events:none;
}
.shot::before{ top:7px; left:7px; border-right:0; border-bottom:0; }
.shot::after{ bottom:7px; right:7px; border-left:0; border-top:0; }
.shot:hover::before,.shot:hover::after{ opacity:.65; }

.shot-foot{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4);
  border-top:1px solid var(--line);
}
.shot-n{ font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.8125rem; color:var(--acc); }
.shot-m{
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.6875rem; letter-spacing:.05em;
  color:var(--dim); margin-left:auto; white-space:nowrap;
}
/* Отсчёт под самой картинкой — тот же приём, что и у отсчёта пачки
   сверху (.жизнь), только меньше и без рамки: под каждым кадром своя
   рамка была бы уже избыточной. Горит красным в последние 15 минут —
   ровно та же граница, что и у отсчёта пачки, специально совпадает. */
.shot-до.горит{ color:var(--сбой); font-weight:600; }
.shot-до.истекло{ opacity:.6; }

/* действия поверх готового кадра */
.shot-act{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:flex; gap:var(--s2); padding:var(--s3);
  background:linear-gradient(to top,color-mix(in srgb,var(--deep) 92%,transparent),transparent);
  opacity:0; transform:translateY(6px);
  transition:opacity .26s var(--ease), transform .26s var(--ease);
}
.shot:hover .shot-act,.shot:focus-within .shot-act{ opacity:1; transform:none; }
.shot-act button{
  flex:1; min-height:34px;
  background:color-mix(in srgb,var(--deep) 72%,transparent); backdrop-filter:blur(6px);
  border:1px solid var(--line-2); border-radius:0;
  color:var(--ink); font:inherit; font-size:.8125rem; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.shot-act button:hover{ background:var(--acc); border-color:var(--acc); color:var(--on-acc); }

/* состояния кадра */
.shot-state{
  position:absolute; inset:0; z-index:1;
  display:grid; place-content:center; justify-items:center; gap:var(--s3);
  padding:var(--s4); text-align:center;
}
.shot-state .mono{ font-size:.6875rem; }

/* «генерируется» — бегущая полоса-затвор */
.shimmer{
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    var(--paper-3) 28%, color-mix(in srgb,var(--ink) 7%,transparent) 46%, var(--paper-3) 64%);
  background-size:280% 100%;
  animation:sweep 1.5s linear infinite;
}
@keyframes sweep{ from{ background-position:180% 0; } to{ background-position:-80% 0; } }

.prog{ width:74px; height:2px; background:var(--line-2); overflow:hidden; }
.prog i{ display:block; height:100%; background:var(--acc); width:38%; }

.shot.failed{ border-color:color-mix(in srgb,var(--сбой) 45%,transparent); }
.shot.failed .shot-state{ background:var(--сбой-fog); }
.shot-err{ color:var(--сбой); font-size:.8125rem; max-width:22ch; }
.shot-back{ font-size:.75rem; color:var(--dim); margin-top:2px; }

/* пустое состояние */
.empty{
  border:1px dashed var(--line-2); padding:var(--s9) var(--s5);
  text-align:center; display:grid; justify-items:center; gap:var(--s4);
}
.empty h3{ font-size:1.25rem; font-weight:700; letter-spacing:-.015em; }
.empty p{ color:var(--dim); max-width:44ch; font-size:.9375rem; }
.empty-marks{ display:flex; gap:var(--s2); }
.empty-marks i{
  width:26px; height:34px; border:1px solid var(--line-2); display:block;
}
.empty-marks i:nth-child(2){ height:26px; align-self:center; border-color:var(--acc); opacity:.55; }
.empty-marks i:nth-child(3){ height:20px; align-self:center; }

/* ─────────── история ─────────── */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--line); }
table.log{ width:100%; min-width:680px; border-collapse:collapse; font-size:.875rem; }
table.log th,table.log td{ text-align:left; padding:12px var(--s4); border-bottom:1px solid var(--line); }
table.log th{
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.6875rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim); font-weight:500;
  background:var(--paper-2); position:sticky; top:0;
}
table.log tr:last-child td{ border-bottom:0; }
table.log td.n{ font-family:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
table.log td.p{ color:var(--dim); max-width:38ch; }
table.log td.p span{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.plus{ color:var(--ок); }
.minus{ color:var(--ink); }
.tag{
  display:inline-block; font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.625rem;
  letter-spacing:.08em; text-transform:uppercase;
  padding:2px 7px; border:1px solid currentColor; white-space:nowrap;
}
.tag.ok{ color:var(--dim); }
.tag.back{ color:var(--ок); }
.tag.pay{ color:var(--acc); }

/* ─────────── баланс ─────────── */
.bal{ display:grid; gap:var(--s6); align-items:start; }
@media (min-width:960px){ .bal{ grid-template-columns:minmax(0,1fr) 400px; gap:var(--s7); } }

.bal-card{
  border:1px solid var(--acc); background:var(--acc-fog);
  padding:var(--s6);
}
.bal-card .mono{ font-size:.6875rem; }
.bal-sum{
  font-family:var(--text); font-variant-numeric:tabular-nums; font-weight:500;
  font-size:clamp(2.75rem,8vw,4rem); line-height:1;
  letter-spacing:-.03em; margin-block:var(--s3) var(--s3);
  font-variant-numeric:tabular-nums;
}
.bal-note{ font-size:.9375rem; color:var(--dim); }
.bal-note b{ color:var(--ink); font-family:var(--text); font-variant-numeric:tabular-nums; font-weight:500; }

.sums{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin-top:var(--s5); }
.sm{ position:relative; }
.sm input{ position:absolute; opacity:0; pointer-events:none; }
.sm span{
  display:block; text-align:center; padding:var(--s3) 2px; cursor:pointer;
  border:1px solid var(--line-2); border-radius:0;
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.9375rem;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.sm:hover span{ border-color:var(--ink); }
.sm input:checked + span{ background:var(--acc); border-color:var(--acc); color:var(--on-acc); }
.sm input:focus-visible + span{ outline:2px solid var(--acc); outline-offset:2px; }

.pays{ display:grid; gap:var(--s2); margin-top:var(--s5); }
.pay{
  position:relative; display:grid;
  grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s4);
  padding:var(--s4); border:1px solid var(--line); border-radius:0; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.pay:hover{ border-color:var(--line-2); }
.pay input{ position:absolute; opacity:0; pointer-events:none; }
.pay:has(input:checked){ border-color:var(--acc); background:var(--acc-fog); }
.pay:has(input:focus-visible){ outline:2px solid var(--acc); outline-offset:2px; }
.pay-ico{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--acc);
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.75rem;
}
.pay-t{ font-size:.9375rem; font-weight:500; }
.pay-t small{ display:block; font-weight:400; color:var(--dim); font-size:.8125rem; margin-top:2px; }
.pay-fee{ font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.75rem; color:var(--dim); white-space:nowrap; }

/* ─────────── вход ─────────── */
.auth-wrap{ min-height:78vh; display:grid; place-items:center; padding-block:var(--s7); }
.auth{ width:100%; max-width:392px; }
.auth .mark{ justify-content:center; font-size:1.5rem; }
.auth h1{ font-size:1.75rem; letter-spacing:-.025em; text-align:center; margin-top:var(--s5); }
.auth p.sub{ text-align:center; color:var(--dim); margin-top:var(--s3); font-size:.9375rem; }
.auth-box{ margin-top:var(--s6); border:1px solid var(--line); background:var(--paper-2); padding:var(--s5); }
.inp{
  width:100%; background:var(--paper); color:var(--ink);
  border:1px solid var(--line-2); border-radius:0;
  font:inherit; font-size:.9375rem; padding:14px var(--s4);
}
.inp::placeholder{ color:var(--dim); }
.inp:focus{ outline:2px solid var(--acc); outline-offset:1px; border-color:transparent; }
.auth-box .btn{ width:100%; justify-content:center; margin-top:var(--s3); }
.or{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s4);
  margin-block:var(--s5); color:var(--dim);
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.6875rem; letter-spacing:.09em; text-transform:uppercase;
}
.or::before,.or::after{ content:''; height:1px; background:var(--line); }
.auth-fine{ margin-top:var(--s5); text-align:center; font-size:.8125rem; color:var(--dim); }
.auth-fine a{ color:var(--dim); border-bottom:1px solid var(--line-2); }
.auth-fine a:hover{ color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  .shimmer{ animation:none; }
  .shot-img img,.shot-act{ transition:none; }
}

/* ссылка «Скачать» поверх готового кадра — выглядит как кнопка */
.shot-act .dl{
  flex:1; min-height:34px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--deep) 72%,transparent); backdrop-filter:blur(6px);
  border:1px solid var(--line-2); border-radius:0;
  color:var(--ink); font-size:.8125rem;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.shot-act .dl:hover{ background:var(--acc); border-color:var(--acc); color:var(--on-acc); }

/* ─────────── выбор модели ─────────── */
.pick{ position:relative; }
.pick-btn{
  width:100%; display:grid; grid-template-columns:auto 1fr auto auto;
  align-items:center; gap:var(--s3);
  background:var(--paper); border:1px solid var(--line-2); border-radius:0;
  color:var(--ink); font:inherit; font-size:.9375rem;
  padding:11px var(--s4); cursor:pointer; text-align:left;
  transition:border-color .2s var(--ease);
}
.pick-btn:hover{ border-color:var(--dim); }
.pick-btn[aria-expanded="true"]{ border-color:var(--acc); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--ок); flex:none; }
.pick-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pick-price{
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.8125rem; color:var(--acc);
  padding:2px 7px; border:1px solid color-mix(in srgb,var(--acc) 42%,transparent); white-space:nowrap;
}
.pick-arr{ color:var(--dim); }

.pick-list{
  position:absolute; z-index:30; inset:calc(100% + 4px) 0 auto 0;
  background:var(--paper-2); border:1px solid var(--line-2); border-radius:0;
  padding:4px; max-height:min(58vh,420px); overflow:auto;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.pick-item{
  width:100%; display:grid; grid-template-columns:1fr auto; gap:var(--s3);
  align-items:baseline; background:none; border:0; border-radius:0;
  color:var(--ink); font:inherit; font-size:.9375rem;
  padding:9px var(--s3); cursor:pointer; text-align:left;
}
.pick-item:hover{ background:color-mix(in srgb,var(--ink) 6%,transparent); }
.pick-item[aria-selected="true"]{ background:var(--acc-fog); }
.pick-item small{ display:block; color:var(--dim); font-size:.8125rem; margin-top:2px; }
.pick-item .p{ font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.8125rem; color:var(--acc); white-space:nowrap; }
.pf-hint{ margin-top:var(--s3); font-size:.8125rem; color:var(--dim); }

/* ─────────── переключатель ─────────── */
.sw{ display:flex; align-items:center; gap:var(--s3); cursor:pointer; }
.sw input{ position:absolute; opacity:0; pointer-events:none; }
.sw-track{
  width:36px; height:20px; flex:none; border-radius:11px;
  background:var(--paper); border:1px solid var(--line-2);
  display:flex; align-items:center; padding:2px;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.sw-knob{
  width:14px; height:14px; border-radius:50%; background:var(--dim);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.sw:has(input:checked) .sw-track{ background:color-mix(in srgb,var(--acc) 24%,transparent); border-color:var(--acc); }
.sw:has(input:checked) .sw-knob{ transform:translateX(16px); background:var(--acc); }
.sw:has(input:focus-visible) .sw-track{ outline:2px solid var(--acc); outline-offset:2px; }
.sw-t{ font-size:.9375rem; }

/* Значок «?» — короткое объяснение поля, без ухода на отдельную страницу.
   Кнопка, не span: клавиатурный фокус обязан до неё доходить, а hover
   недоступен ни касанию, ни Tab-навигации без него. */
.что{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; flex:none; margin-left:-2px;
  border:1px solid var(--line-2); border-radius:50%; background:none;
  color:var(--dim); font:inherit; font-size:.6875rem; line-height:1;
  cursor:help; position:relative;
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.что:hover,.что:focus-visible{ color:var(--acc); border-color:var(--acc); }
.что::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  width:236px; max-width:70vw; padding:var(--s3) var(--s4);
  background:var(--deep); color:var(--on-deep);
  font-size:.75rem; line-height:1.45; font-weight:400; text-align:left;
  border-radius:2px; box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s var(--ease); z-index:6;
}
.что:hover::after,.что:focus-visible::after{ opacity:1; visibility:visible; }
@media (max-width:520px){
  /* На узком экране подсказка шире, чем половина ширины по обе стороны
     от центра значка, — по центру она обрежется краем экрана. */
  .что::after{ left:auto; right:-8px; transform:none; }
}
.sw-p{ margin-left:auto; font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.8125rem; color:var(--dim); }
.sw.off{ opacity:.4; pointer-events:none; }

/* ─────────── референсы ─────────── */
.drop{
  display:flex; align-items:center; gap:var(--s3);
  border:1px dashed var(--line-2); border-radius:0;
  padding:var(--s4); cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.drop:hover,.drop.over{ border-color:var(--acc); background:var(--acc-fog); }
.drop-plus{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--dim); font-size:1.125rem; line-height:1;
}
.drop-t{ font-size:.875rem; }
.drop-t small{ display:block; color:var(--dim); font-size:.8125rem; margin-top:2px; }
#refrow.off{ opacity:.4; pointer-events:none; }

.refs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s3); }
.ref-th{ position:relative; width:52px; height:52px; border:1px solid var(--line-2); }
.ref-th img{ width:100%; height:100%; object-fit:cover; }
.ref-x{
  position:absolute; top:-6px; right:-6px; width:18px; height:18px;
  border-radius:50%; border:1px solid var(--line-2); background:var(--paper);
  color:var(--ink); font-size:.75rem; line-height:1; cursor:pointer;
  display:grid; place-items:center; padding:0;
}
.ref-x:hover{ background:var(--сбой); border-color:var(--сбой); color:#fff; }

/* ─────────── seed ─────────── */
.seed{ display:flex; align-items:center; gap:var(--s3); }
.two{ display:flex; border:1px solid var(--line-2); border-radius:0; overflow:hidden; }
.tw{
  background:none; border:0; color:var(--dim); font:inherit; font-size:.8125rem;
  padding:7px var(--s4); cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.tw.on{ background:var(--acc); color:var(--on-acc); }
.tw:not(.on):hover{ color:var(--ink); }
.seed-n{ flex:1; padding:7px var(--s3); font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.8125rem; }

/* ─────────── кнопка запуска ─────────── */
.btn.go{
  width:100%; flex-direction:column; gap:2px; min-height:56px;
  justify-content:center; align-items:center;
}
.btn.go small{ font-weight:400; font-size:.8125rem; opacity:.72; font-family:var(--text); font-variant-numeric:tabular-nums; }
.btn.go:disabled{ opacity:.55; cursor:default; }
#arrow.off{ display:none; }

/* ─────────── очередь ─────────── */
.queue[hidden]{ display:none; }   /* иначе display перебивает атрибут hidden */
.queue{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 10px; border:1px solid var(--line-2); border-radius:0;
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.75rem; color:var(--dim);
}
.q-dot{
  width:6px; height:6px; border-radius:50%; background:var(--acc);
  animation:пульс 1.4s ease-in-out infinite;
}
@keyframes пульс{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.q-t{ font-variant-numeric:tabular-nums; color:var(--ink); }

.h-n{ width:88px; margin-left:auto; padding:6px var(--s3);
      font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.8125rem; }

/* ─────────── выгрузка задания ─────────── */
.run-dl{
  margin-left:auto; background:none; border:1px solid var(--line-2);
  border-radius:0; color:var(--dim); font:inherit;
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.625rem; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 9px; cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.run-dl:hover{ color:var(--acc); border-color:var(--acc); }
.run-meta{ align-items:center; }

/* ─────────── появление кадров ─────────── */
.shot{ animation:кадр-в .45s var(--ease) both; }
@keyframes кадр-в{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to{ opacity:1; transform:none; }
}
/* цифры баланса и цены меняются заметно, но без прыжка */
#purse,#total,#balsum{ transition:color .25s var(--ease); }
.blink{ color:var(--acc) !important; }

@media (prefers-reduced-motion:reduce){
  .shot{ animation:none; }
  .q-dot{ animation:none; }
}

/* ─────────── значок кредитов ─────────── */
.кр{
  display:inline-block; width:.86em; height:.86em;
  vertical-align:-.08em; margin-left:.28em;
  background:currentColor;
  -webkit-mask:var(--знак) center/contain no-repeat;
  mask:var(--знак) center/contain no-repeat;
}
:root{
  --знак:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.5h18v13H3z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='8.4' cy='10' r='1.7' fill='%23000'/%3E%3Cpath d='M3.6 17.4l5.2-5 3.1 3 3.4-3.9 5.1 5.9z' fill='%23000'/%3E%3C/svg%3E");
}

/* ─────────── просмотр кадра ───────────

   Лайтбокс и накладки поверх кадров тёмные в обеих темах: кадр
   смотрят на тёмном, иначе врёт его собственная яркость. Значит
   брать цвет из инвертируемых токенов им нельзя — 26.08 на этом
   уже попался блок «К оплате», получив контраст 1.1:1.

   Поэтому внутри них токены переопределяются на ночные. Правила
   ниже написаны обычным образом и продолжают работать. */
.lb,.shot-act,.лупа{
  --paper:#0C0D12;
  --paper-2:#14161F;
  --paper-3:#1B1E2A;
  --ink:#ECEBE8;
  --ink-2:#C6C6CE;
  --dim:#8A8C99;
  --line:rgba(236,235,232,.13);
  --line-2:rgba(236,235,232,.28);
  --acc:#6B80FF;
  --acc-hi:#8494FF;
  --on-acc:#0B0C11;
  --deep:#1B1E2A;
  --deep-2:#080910;
}

.lb[hidden]{ display:none; }
.lb{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:color-mix(in srgb,var(--deep-2) 95%,transparent); backdrop-filter:blur(18px);
  animation:лб-в .22s var(--ease);
}
@keyframes лб-в{ from{ opacity:0; } to{ opacity:1; } }
.lb-in{
  display:grid; gap:var(--s4); justify-items:center;
  max-width:min(94vw,1600px); max-height:88vh;
}
.lb-in img{
  max-width:min(94vw,1600px); max-height:78vh;
  width:auto; height:auto; object-fit:contain;
  border:1px solid var(--line);
  animation:лб-кадр .28s var(--ease);
}
@keyframes лб-кадр{
  from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; }
}
.lb-meta{
  display:flex; align-items:center; gap:var(--s5);
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.8125rem; color:var(--dim);
}
.lb-n{ color:var(--acc); }
.lb-dl{
  border:1px solid var(--line-2); padding:7px var(--s4);
  color:var(--ink); font-family:var(--text); font-size:.875rem;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.lb-dl:hover{ background:var(--acc); border-color:var(--acc); color:var(--on-acc); }

.lb-x,.lb-nav{
  position:absolute; z-index:2; background:color-mix(in srgb,var(--deep) 74%,transparent);
  border:1px solid var(--line-2); color:var(--ink);
  cursor:pointer; display:grid; place-items:center;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.lb-x:hover,.lb-nav:hover{ background:var(--acc); border-color:var(--acc); color:var(--on-acc); }
.lb-x{ top:var(--s5); right:var(--s5); width:46px; height:46px; font-size:1.5rem; line-height:1; }
.lb-nav{ top:50%; transform:translateY(-50%); width:56px; height:84px; font-size:2rem; line-height:1; }
.lb-prev{ left:var(--s4); }
.lb-next{ right:var(--s4); }
/* Начиная с 1000px слева стоит панель промпта шириной 320 — стрелка на
   left:16px ложилась поверх неё и резала выбор модели. Отодвигаем её за
   панель, чтобы «назад» оставалось при кадре, а не поверх формы. */
@media (min-width:1000px){
  .lb-prev{ left:calc(320px + var(--s6)); }
}
@media (max-width:640px){
  .lb-nav{ width:44px; height:66px; font-size:1.5rem; }
}
.shot-img img{ cursor:zoom-in; }

@media (prefers-reduced-motion:reduce){
  .lb,.lb-in img{ animation:none; }
}

/* ─────────── итог пополнения ─────────── */
.итог{ margin-bottom:var(--s4); }
.ит-стр{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); padding-block:9px;
  font-size:.875rem; color:var(--dim);
}
.ит-стр + .ит-стр{ border-top:1px solid var(--line); }
.ит-стр b{
  font-family:var(--text); font-variant-numeric:tabular-nums; font-weight:500; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ит-сеть b{ color:var(--dim); }
.ит-всего{ border-top:1px solid var(--line-2) !important; padding-top:var(--s4); }
.ит-всего span{ color:var(--ink); font-size:.9375rem; }
.ит-всего b{ font-size:1.5rem; color:var(--acc); }

/* в крупных числах значок соразмеряем с цифрой, а не с кеглем */
.bal-sum .кр{ width:.42em; height:.42em; margin-left:.18em; vertical-align:.06em; opacity:.7; }
.cost-row b .кр,#total .кр{ width:.62em; height:.62em; }

/* памятка под суммами — заполняет левую колонку и объясняет порядок */
.памятка{ margin-top:var(--s7); border-top:1px solid var(--line); }
.пм{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s4);
  padding-block:var(--s4); border-bottom:1px solid var(--line);
  align-items:start;
}
.пм-н{
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.75rem; color:var(--acc);
  border:1px solid color-mix(in srgb,var(--acc) 42%,transparent); padding:3px 8px;
}
.пм-т{ font-size:.9375rem; }
.пм-т small{ display:block; color:var(--dim); font-size:.875rem; margin-top:3px; }

/* ─────────── аккаунт в шапке ─────────── */
.me{ display:flex; align-items:center; gap:var(--s3); font-size:.8125rem; }
.me[hidden]{ display:none; }
.me-п{ color:var(--dim); max-width:20ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.me-в{ color:var(--dim); border-bottom:1px solid var(--line-2); }
.me-в:hover{ color:var(--ink); }

/* гостю видна только страница входа */
body.гость .app-nav,body.гость .purse .btn,body.гость .tabbar,
body.гость .purse-sum,body.гость .queue{ display:none; }

/* ─────────── кнопка Google ───────────
   Единственный элемент сервиса, который не слушается темы: у знака
   Google свой гайдлайн, и перекрашивать его под палитру нельзя. */
.btn-google{
  width:100%; justify-content:center; gap:var(--s3);
  background:#FFFFFF; color:#1F1F1F; font-weight:600;
  border-color:#DADCE0;
}
.btn-google:hover{ background:#F1F3F4; border-color:#C6C9CE; }
.auth-why{ margin-top:var(--s4); font-size:.8125rem; color:var(--dim); text-align:center; }

/* ─────────── адрес для перевода ─────────── */
.адрес{ margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--line-2); }
.адрес[hidden]{ display:none; }
.адр-сумма,.адр-строка{
  display:flex; align-items:center; gap:var(--s3);
  background:var(--paper); border:1px solid var(--line-2); padding:var(--s3) var(--s4);
}
.адр-сумма code,.адр-строка code{
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.875rem; color:var(--ink);
  word-break:break-all; flex:1;
}
.адр-сумма code{ color:var(--acc); font-size:1.0625rem; }
.копи{
  flex:none; background:none; border:1px solid var(--line-2); color:var(--dim);
  font:inherit; font-size:.75rem; padding:5px 10px; cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.копи:hover{ color:var(--acc); border-color:var(--acc); }

/* ─────────── QR оплаты ───────────
   Широкий экран: код слева, поля справа. Телефон: код сверху — с него и
   платят, и он там главное, а не приписка сбоку. */
.оплата{ display:grid; gap:var(--s4); grid-template-columns:1fr; }
@media (min-width:640px){
  .оплата{ grid-template-columns:auto 1fr; align-items:start; }
}
.оплата-поля{ min-width:0; }
.qr{ margin:0; display:flex; flex-direction:column; align-items:center; gap:var(--s2); }
.qr[hidden]{ display:none; }
/* Белая подложка обязательна в обеих темах: сканеру нужен контраст, а
   тёмный код на тёмном фоне не читается ничем. */
.qr-холст{
  width:168px; height:168px; padding:10px; box-sizing:border-box;
  background:#fff; color:#000; border:1px solid var(--line-2);
}
.qr-холст svg{ display:block; width:100%; height:100%; }
.qr figcaption{ font-size:.75rem; color:var(--dim); }
.адр-кошелёк{ width:100%; justify-content:center; margin-top:var(--s3); }
.адр-кошелёк[hidden]{ display:none; }

/* ─────────── сумма пополнения ─────────── */
.сумма{
  display:flex; align-items:center; gap:var(--s3);
  margin-bottom:var(--s4);
}
.сумма-п{
  width:9ch; padding:10px var(--s3);
  font-family:var(--text); font-variant-numeric:tabular-nums; font-size:1.25rem; text-align:right;
  font-variant-numeric:tabular-nums;
}
/* значок кредитов сразу за полем ввода */
.сумма-з{
  width:1.1em; height:1.1em; flex:none; background:var(--acc);
  -webkit-mask:var(--знак) center/contain no-repeat;
  mask:var(--знак) center/contain no-repeat;
}
.сумма-д{
  margin-left:auto; font-family:var(--text); font-variant-numeric:tabular-nums; font-size:1.0625rem;
  color:var(--dim); font-variant-numeric:tabular-nums;
}

/* Сетка, а не flex-wrap: пять кнопок в ряд переносили пятую на вторую
   строку и растягивали её во всю ширину — на 375 px это выглядело как
   ошибка вёрстки. Сетка даёт ровные ряды при любой ширине. */
.быстро{
  display:grid; gap:var(--s2); margin-top:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(64px,1fr));
}
.быстро button{
  min-width:0;
  background:none; border:1px solid var(--line-2); border-radius:0;
  color:var(--dim); font:inherit; font-family:var(--text); font-variant-numeric:tabular-nums; font-size:.8125rem;
  padding:7px var(--s3); cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.быстро button:hover{ color:var(--ink); border-color:var(--ink); }
.быстро button.on{ background:var(--acc); border-color:var(--acc); color:var(--on-acc); }

/* ─────────── выделение кадров ─────────── */
.выб{
  position:absolute; top:8px; left:8px; z-index:4;
  width:22px; height:22px; display:grid; place-items:center;
  opacity:0; transition:opacity .18s var(--ease);
}
.shot:hover .выб,.shot:focus-within .выб,.выб:has(input:checked){ opacity:1; }
.выб-фл{
  appearance:none; -webkit-appearance:none; margin:0;
  width:20px; height:20px; cursor:pointer;
  border:1px solid var(--line-2); border-radius:0;
  background:color-mix(in srgb,var(--deep) 72%,transparent); backdrop-filter:blur(4px);
  display:grid; place-items:center;
}
.выб-фл:checked{ background:var(--acc); border-color:var(--acc); }
.выб-фл:checked::after{
  content:''; width:10px; height:6px;
  border-left:2px solid var(--on-acc); border-bottom:2px solid var(--on-acc);
  transform:rotate(-45deg) translate(1px,-1px);
}
.shot:has(.выб-фл:checked){ outline:2px solid var(--acc); outline-offset:-2px; }

.выбор{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s3);
  padding:var(--s3) var(--s4); margin-bottom:var(--s4);
  border:1px solid var(--acc); background:var(--acc-fog);
}
.выбор[hidden]{ display:none; }
.выбор-н{ font-size:.875rem; margin-right:auto; }
.выбор-к{
  background:none; border:1px solid var(--line-2); border-radius:0;
  color:var(--ink); font:inherit; font-size:.8125rem;
  padding:7px var(--s4); cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.выбор-к:hover{ border-color:var(--ink); }
.выбор-к.главная{ background:var(--acc); border-color:var(--acc); color:var(--on-acc); font-weight:600; }
.выбор-к.главная:hover{ background:var(--acc-hi); }
.выбор-к.опасная:hover{ background:var(--сбой); border-color:var(--сбой); color:#fff; }
.выбор-к:disabled{ opacity:.5; cursor:default; }

/* ─────────── панель в просмотре кадра ─────────── */
.lb-wrap{
  display:grid; gap:var(--s5); align-items:center;
  max-width:min(96vw,1700px); max-height:90vh;
}
@media (min-width:1000px){ .lb-wrap{ grid-template-columns:320px minmax(0,1fr); } }
.lb-side{
  background:var(--paper-2); border:1px solid var(--line);
  padding:var(--s5); max-height:86vh; overflow-y:auto;
}
.lb-prompt{ min-height:150px; font-size:.875rem; }
.lb-model{ width:100%; padding:10px var(--s3); font-size:.875rem; }
.lb-go{ width:100%; flex-direction:column; gap:2px; margin-top:var(--s4); min-height:52px; }
.lb-go small{ font-weight:400; font-size:.75rem; opacity:.75; font-family:var(--text); font-variant-numeric:tabular-nums; }
.lb-row{
  display:flex; gap:var(--s2); margin-top:var(--s5);
  padding-top:var(--s4); border-top:1px solid var(--line);
}
.lb-row .lb-dl{ flex:1; text-align:center; }
.lb-del{
  flex:1; background:none; border:1px solid var(--line-2); border-radius:0;
  color:var(--dim); font:inherit; font-size:.875rem; padding:7px var(--s3);
  cursor:pointer; transition:color .2s var(--ease), border-color .2s var(--ease);
}
.lb-del:hover{ color:var(--сбой); border-color:var(--сбой); }
.лупа{
  flex:1; min-height:34px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--deep) 72%,transparent); backdrop-filter:blur(6px);
  border:1px solid var(--line-2); border-radius:0;
  color:var(--ink); font-size:.8125rem;
}
.shot:hover .лупа{ background:var(--acc); border-color:var(--acc); color:var(--on-acc); }

/* ─────────── служебное пополнение (временно) ─────────── */
.админка{
  margin-top:var(--s6); padding:var(--s5);
  border:1px dashed var(--сбой); background:var(--сбой-fog);
}
.админка[hidden]{ display:none; }
.админка .btn{ min-height:44px; }

/* ─────────── согласие с условиями ─────────── */
.согл{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s3);
  align-items:start; cursor:pointer; margin-bottom:var(--s5);
}
.согл input{ position:absolute; opacity:0; pointer-events:none; }
.согл-кв{
  width:20px; height:20px; margin-top:1px; flex:none;
  border:1px solid var(--line-2); border-radius:0;
  display:grid; place-items:center; color:var(--on-acc);
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.согл-кв svg{ opacity:0; transition:opacity .18s var(--ease); }
.согл:has(input:checked) .согл-кв{ background:var(--acc); border-color:var(--acc); }
.согл:has(input:checked) .согл-кв svg{ opacity:1; }
.согл:has(input:focus-visible) .согл-кв{ outline:2px solid var(--acc); outline-offset:2px; }
.согл-т{ font-size:.875rem; color:var(--dim); line-height:1.5; }
.согл-т a{ color:var(--ink); border-bottom:1px solid var(--line-2); }
.согл-т a:hover{ border-bottom-color:var(--acc); color:var(--acc); }

/* кнопка входа до согласия — видна, но не работает */
.btn-google[aria-disabled="true"]{
  opacity:.42; cursor:not-allowed; filter:grayscale(1);
}
@keyframes трясти-к{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}
.трясти{ animation:трясти-к .34s var(--ease); }
@media (prefers-reduced-motion:reduce){ .трясти{ animation:none; } }

.соглпред{
  margin-bottom:var(--s4); padding:var(--s3) var(--s4);
  border:1px solid var(--сбой); background:var(--сбой-fog);
  color:var(--ink); font-size:.875rem;
}
.соглпред[hidden]{ display:none; }

/* ─────────────────────────────────────────────────────────
   Выборка кадров (28.08.2026)

   Поведение галерейное: пока ничего не выделено, клик открывает кадр;
   как только выделен хотя бы один — клик по любому другому добавляет
   его к выделению. Значит состояние выборки должно быть видно, иначе
   человек не понимает, почему кадр перестал открываться.
   ───────────────────────────────────────────────────────── */

/* Выделенный кадр: рамка акцентом и подложка, а не одна галочка. */
.shot.выбран{
  border-color:var(--acc);
  box-shadow:inset 0 0 0 1px var(--acc);
}
.shot.выбран .shot-img::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:var(--acc); opacity:.14; pointer-events:none;
}

/* Пока идёт выбор, курсор над кадром обещает выделение, а не лупу. */
.режим-выбора .shot-img img{ cursor:pointer; }
.режим-выбора .shot-act{ opacity:0 !important; }

/* Галочка в режиме выбора видна всегда — иначе непонятно, что чем можно
   управлять; вне режима проявляется при наведении. */
.shot.выбран .выб,
.режим-выбора .выб{ opacity:1; }

/* Кнопка «Выбрать сессию» в шапке запроса. */
.run-sel{
  background:none; border:1px solid var(--line-2); color:var(--dim);
  font:inherit; font-size:.75rem; padding:4px 10px; cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.run-sel:hover{ color:var(--acc); border-color:var(--acc); }

/* Кнопки панели выбора без выделения неактивны, но остаются на месте:
   прыгающая панель раздражает сильнее, чем серая кнопка. */
.выбор-к[disabled]{ opacity:.4; cursor:not-allowed; }
.выбор-к[disabled]:hover{ border-color:var(--line-2); color:inherit; }


/* ─────────── ключи API ───────────
   Список ключей — строки, а не карточки: карточка вокруг каждой строки —
   пункт 15 чек-листа запретов, да и читать столбцом удобнее. */
.апи{ display:grid; gap:var(--s6); align-items:start; }
@media (min-width:1040px){
  .апи{ grid-template-columns:minmax(0,1fr) 380px; gap:var(--s7); }
}

.апи-шапка{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); flex-wrap:wrap;
  padding-bottom:var(--s4); border-bottom:1px solid var(--line-2);
}
.апи-шапка h2{ font-size:1.25rem; letter-spacing:-.015em; font-weight:700; }

.ключи{ display:grid; }
.ключ{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); flex-wrap:wrap;
  padding-block:var(--s4); border-bottom:1px solid var(--line);
  transition:background .25s var(--ease);
}
.ключ:hover{ background:color-mix(in srgb,var(--ink) 4%,transparent); }
.ключ.погашен{ opacity:.5; }
.ключ-и{ display:grid; gap:3px; min-width:0; }
.ключ-имя{ font-weight:600; }
.ключ-хвост{
  font-size:.8125rem; color:var(--dim);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.ключ-ц{ display:flex; align-items:center; gap:var(--s4); margin-left:auto; }
.ключ-мета{
  font-size:.8125rem; color:var(--dim);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ключ-нет{ font-size:.8125rem; color:var(--dim); }
.ключи-пусто{ padding-block:var(--s5); color:var(--dim); max-width:52ch; }

/* показ только что выпущенного ключа */
.ключ-новый-показ{
  margin-top:var(--s5); padding:var(--s5);
  border:1px solid var(--acc); background:var(--acc-fog);
}
.ключ-новый-показ[hidden]{ display:none; }
.кп-лоб{
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--acc); font-weight:500; margin-bottom:var(--s3);
}

/* боковая колонка с примером */
.апи-бок{
  border:1px solid var(--line); background:var(--paper-2);
  padding:var(--s5);
}
.апи-бок h3{ font-size:1.0625rem; margin-bottom:var(--s4); }
.апи-код{
  margin:0 0 var(--s4); padding:var(--s4);
  background:var(--paper); border:1px solid var(--line);
  font-size:.8125rem; line-height:1.6;
}
/* Команда переносится по словам, а не уезжает за край: боковая колонка
   узкая, и горизонтальная прокрутка внутри неё нащупывается плохо. */
.апи-код code{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  white-space:pre-wrap; word-break:break-word;
}
.апи-о{ font-size:.875rem; color:var(--dim); margin-bottom:var(--s4); }
.апи-о code{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:.8125rem; color:var(--ink);
}
.апи-бок .btn{ width:100%; }

/* ═══════════ рабочее место: переработка 02.09.2026 ═══════════
   Разбор того, что было не так, — в комментариях к каждому правилу.
   Общая мысль: это экран, куда заходят работать, а не читать. Место над
   сгибом принадлежит инструменту, а не заголовку. */

/* Шапка рабочего экрана. Витринная версия занимала около 110 пикселей и
   уводила кнопку запуска под сгиб: человек, открыв страницу, первым
   делом крутил колесо. */
.screen-h.тонкая{
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:var(--s3) var(--s4); margin-bottom:var(--s5);
  padding-bottom:var(--s4); border-bottom:1px solid var(--line);
}
.screen-h.тонкая h1{
  font-size:1.375rem; line-height:1.1; letter-spacing:-.02em; margin:0;
}
.screen-h.тонкая .подсказка-шапки{
  margin:0; color:var(--dim); font-size:.8125rem; max-width:none;
}

/* Кнопка запуска липнет к низу панели. Панель прокручивается сама, и при
   длинном списке настроек главное действие уезжало из виду.

   Липким должно быть только действие. Всё, что липнет, закрывает собой
   то, что под ним, — и когда в этом блоке лежали ещё две сноски, он
   вырастал до 238 px и навсегда накрывал четыре группы полей.

   Отступ снизу у самой панели — вторая половина решения: без него
   последняя группа настроек упирается в липкую кнопку и до неё нельзя
   долистать вовсе. */
/* ─── тонкая настройка ───
   Свёртка, а не ещё одна панель: закрытая занимает одну строку, открытая
   ведёт себя как обычные группы полей. */
.тонко{ margin-top:var(--s5); border-top:1px solid var(--line-2); }
.тонко > summary{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); padding:var(--s4) 0 0; cursor:pointer;
  font-family:var(--text); font-size:.8125rem; color:var(--ink);
  list-style:none;
}
.тонко > summary::-webkit-details-marker{ display:none; }
.тонко > summary::after{
  content:""; flex:none; width:8px; height:8px; margin-left:auto;
  border-right:1.4px solid var(--dim); border-bottom:1.4px solid var(--dim);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s var(--ease);
}
.тонко[open] > summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.тонко > summary:hover{ color:var(--acc); }
.тонко > summary:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; }
.тонко-что{
  font-variant-numeric:tabular-nums; font-size:.75rem; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%;
}
.тонко[open] .тонко-что{ opacity:0; }
.тонко .pf:first-of-type{ margin-top:var(--s4); }

/* Таблица истории шире телефона и лежит в контейнере с
   overflow-x:auto. Полосы прокрутки на телефоне нет, тени тоже не было —
   и колонки «Кадр», «Сумма», «Статус» уезжали за край без единого
   намёка, что они есть. Покупатель не видел, сколько стоила генерация и
   вернулись ли деньги.

   Тень у края — обычный приём: слои с background-attachment:local
   уезжают вместе с содержимым и открывают тень, а на краю прокрутки
   закрывают её обратно. Значит подсказка появляется ровно тогда, когда
   есть что листать. */
.tbl-wrap{
  background:
    linear-gradient(to right, var(--paper-2) 30%, rgba(0,0,0,0)) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--paper-2) 30%, rgba(0,0,0,0)) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.28), rgba(0,0,0,0)) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.28), rgba(0,0,0,0)) right / 14px 100% no-repeat scroll;
}

.cost-сноски{ margin-top:var(--s4); }
.cost-сноски .cost-fine{ margin-top:var(--s2); }

@media (min-width:1040px){
  .panel{ padding-bottom:calc(var(--s5) + 92px); }
  .panel .пуск-док{
    position:sticky; bottom:calc(var(--s5) * -1);
    margin:var(--s4) calc(var(--s5) * -1) calc(var(--s5) * -1);
    padding:var(--s4) var(--s5) var(--s5);
    background:linear-gradient(to bottom,
      transparent 0, var(--paper-2) var(--s4), var(--paper-2) 100%);
    border-top:1px solid var(--line);
  }
}

/* ─── панель выбора ───
   Была всегда акцентной и всегда со всеми кнопками, включая выключенную
   «Перегенерировать» в заливке. Выключенная кнопка в акценте — худший
   вид подсказки: тянет взгляд и не объясняет, почему не работает. */
.выбор{
  border-color:var(--line); background:var(--paper-2);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.выбор.активна{ border-color:var(--acc); background:var(--acc-fog); }
.выбор-н{ color:var(--dim); }
.выбор.активна .выбор-н{ color:var(--ink); font-weight:600; }
.выбор-действия{ display:flex; gap:var(--s3); flex-wrap:wrap; }
.выбор-действия[hidden]{ display:none; }

/* ─── карточка кадра ───
   Готовые кадры грузятся лениво, и до загрузки картинки в карточке была
   пустота: ряд одинаковых тёмных прямоугольников выглядел как сломанная
   вёрстка. Теперь под картинкой лежит подложка, а сама картинка
   проявляется, когда загрузилась. */
.shot-img{ background:var(--paper-3, var(--paper-2)); position:relative; }
/* Затухания здесь нет намеренно. Пробовали проявлять картинку по
   событию load (opacity 0 → 1): правило с классом матчилось, но
   вычисленная прозрачность оставалась нулевой, и кадры пропадали
   целиком. Разбираться было дороже, чем оно стоит: пустоту в карточке
   до загрузки убирает подложка выше, а это и была вся задача. */

/* ─── шапка задания ───
   Промпт — единственное, по чему человек отличает одну пачку от другой,
   а он был того же размера и цвета, что и служебные подписи под ним. */
.run-head .run-prompt{
  font-size:1rem; font-weight:600; letter-spacing:-.01em; color:var(--ink);
}
.run-head .run-meta{ color:var(--dim); }

/* Счётчик жизни кадра. Три часа — срок, за который легко не успеть,
   поэтому он не мелкая сноска: спокойный, пока времени много, заметный
   за четверть часа до конца. */
.жизнь{
  font-variant-numeric:tabular-nums; color:var(--dim);
  border:1px solid var(--line); padding:2px var(--s2);
}
.жизнь.горит{ color:var(--сбой); border-color:var(--сбой); font-weight:600; }
.жизнь.истекло{ opacity:.6; }

/* Предупреждение о сроке рядом с кнопкой запуска: человек узнаёт про
   три часа до того, как потратит кредиты, а не после. */
.срок-памятка{
  margin-top:var(--s3); font-size:.8125rem; color:var(--dim);
  border-left:2px solid var(--acc); padding-left:var(--s3);
}

/* «Архивом» и «По отдельности» — соседние кнопки, разница только в том,
   что получится в загрузках. Значит и вид у них обязан быть один.
   Раньше комментарий это обещал, а правила давали 10 px против 12 px,
   uppercase против обычного регистра и разную высоту: 26 против 29. */
.run-dl,
.run-dl-по{
  background:none; border:1px solid var(--line-2); border-radius:0;
  color:var(--ink); font:inherit; font-size:.75rem;
  letter-spacing:normal; text-transform:none;
  padding:4px 10px; cursor:pointer;
  transition:border-color .18s var(--ease);
}
.run-dl-по{ margin-left:var(--s2); }
.run-dl:hover,
.run-dl-по:hover{ border-color:var(--ink); }
.run-dl:disabled,
.run-dl-по:disabled{ opacity:.5; cursor:default; }

/* Кадр, который сервер уже удалил, но у человека сохранена копия. */
.shot.сохранён{ outline:1px solid var(--acc); outline-offset:-1px; }
.shot.сохранён .shot-m{ color:var(--acc); }