/* Дополнения к слоям дизайна: состояния, которых нет в макетах (ошибки, вход, выбор ключа). Цвета и радиусы из werty.css. */
html,body{margin:0;background:var(--bg,#0A0D0B)}
body{min-height:100vh}
.page{min-height:100vh}
.errbox{margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--redbg);border:1px solid rgba(255,138,122,.35);color:var(--red);font-size:14px;line-height:1.45}
.devlock{display:inline-flex;align-items:center;gap:6px;margin:14px 0 4px;padding:8px 14px;border-radius:999px;background:var(--limebg);border:1px solid rgba(163,184,99,.35);font-size:14px;font-weight:500}
.devlock span{color:var(--muted);font-weight:400}
.keysel{display:block;margin:12px 0 0;font-size:13px;color:var(--muted)}
.keysel select{margin-left:8px;background:var(--surface2);color:var(--text);border:1px solid var(--line2);border-radius:10px;padding:8px 10px;font:inherit;max-width:100%}
.msgcard{margin:48px auto;max-width:640px;padding:36px;text-align:left}
.msgcard .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.tshost{display:flex;justify-content:center;margin-top:14px;min-height:0}
.loginhint{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--amberbg);color:var(--amber);font-size:13px;line-height:1.45}
.loginhint .btn{margin-top:8px;height:38px;padding:0 14px;font-size:14px}
.gwrap{display:flex;justify-content:center;align-items:center;min-height:44px}
.gwrap.gfail{font-size:12.5px;color:var(--red);text-align:center}
[data-status]{min-height:20px}
.is-error{color:var(--red)}
.is-ok{color:var(--lime)}
.qrcrypto{margin-top:6px;text-align:center;color:var(--muted);font-size:14px}
.qrcrypto b{color:var(--text)}
.qrslot svg{display:block;width:196px;height:196px}
.sublink code{overflow-wrap:anywhere}
.qrbox svg{display:block}
.subqr .qrbox svg{width:116px;height:116px}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
h1.t:focus{outline:none}
/* телефон: подпись цены в нижней плашке переносится, а не прячется под кнопку */
.mob .pfoot .hint{white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.mob .pfoot .pp{min-width:0}

/* Новая иконка устройства: пружинное появление и мягкая подсветка (макет Motion). При prefers-reduced-motion без анимации. */
.dvx.new{animation:dvnew .55s cubic-bezier(.3,1.6,.5,1) both !important;animation-delay:0s !important}
.dvx.new svg{animation:dvglow .9s ease-out both}
@keyframes dvnew{0%{transform:translateY(16px) scale(.5) rotate(-8deg);opacity:0}60%{transform:translateY(-3px) scale(1.12) rotate(2deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes dvglow{0%{filter:drop-shadow(0 0 0 rgba(163,184,99,0))}35%{filter:drop-shadow(0 0 10px rgba(163,184,99,.75))}100%{filter:drop-shadow(0 0 0 rgba(163,184,99,0))}}
@media (prefers-reduced-motion:reduce){.dvx.new,.dvx.new svg{animation:none !important}}

/* Согласие без чекбокса: текст под кнопкой «Оплатить» */
.consentnote{margin:12px 0 0;font-size:13px;line-height:1.45;color:var(--muted);text-align:center}
.consentnote a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.qractions{flex-wrap:wrap}

/* Иконки устройств: базовой анимации нет (раньше она проигрывалась повторно после .new). Вход на шаг: .enter; новая иконка: .new; повтор по наведению/касанию: .pop */
.dvx{animation:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.dvx.enter{animation:dvin .45s cubic-bezier(.3,1.5,.5,1) both}
.dvx.pop{animation:dvnew .5s cubic-bezier(.3,1.6,.5,1) both !important;animation-delay:0s !important}
@media (prefers-reduced-motion:reduce){.dvx.enter,.dvx.pop{animation:none !important}}

/* Телефон: страница на всю ширину экрана (в макете .mob = 390px, на узких экранах 360 давала горизонтальный скролл) */
.page.mob{width:100%;max-width:100%;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.mob .pfoot{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
/* Срок: плашка скидки и подпись не переносятся на отдельные строки */
.mob .terms .term .name{white-space:nowrap}
.mob .terms .term .badge{white-space:nowrap;margin-left:6px}
.mob .terms .term .meta{white-space:nowrap}
.mob .terms .term .price{white-space:nowrap}
@media (max-width:400px){.mob .terms .term{gap:10px}.mob .terms .term .price{font-size:19px}.mob .terms .term .meta{font-size:12.5px}}

/* Узкие телефоны (360-400): цена в плашке не налезает на кнопку, скидка остаётся в строке названия */
@media (max-width:400px){
  .mob .terms .term .price{font-size:16px}
  .mob .terms .term .name{font-size:15px}
  .mob .terms .term .badge{padding:2px 6px;font-size:10.5px;margin-left:5px}
  .mob .pfoot{gap:10px;padding-left:14px;padding-right:12px}
  .mob .pfoot .tot{font-size:22px}
  .mob .pfoot .btn{width:124px}
  .mob .pfoot .hint{font-size:12px}
}
@media (max-width:400px){
  .mob .terms .term{padding:12px 11px;gap:8px}
  .mob .terms .term .price{font-size:15.5px}
  .mob .terms .term .badge{margin-left:4px}
}

/* ---- Загрузка (hotfix6) ---- */
/* Покупка: логотип-лок-ап на месте списка тарифов. Барлоу Condensed в fonts пока нет: запасной узкий шрифт, без внешнего CDN. */
.bootlock{display:grid;place-items:center;min-height:min(62vh,420px);padding:24px 0}
.bootlock .lockup{gap:18px;flex-wrap:nowrap}
.bootlock .wtile{border-radius:26%}
.bootlock .wword{font-family:'Barlow Condensed','Roboto Condensed','Arial Narrow','Helvetica Neue',Arial,sans-serif;font-stretch:condensed;font-size:56px}
.bootlock .wword span span{animation-delay:calc(.15s + var(--i) * .06s)}
.bootlock .rule{animation-delay:.65s;margin-top:10px}
@media (max-width:420px){.bootlock .lockup{gap:12px}.bootlock .wtile{--s:64px !important}.bootlock .wword{font-size:40px}}
@media (max-width:340px){.bootlock .wword{font-size:34px}}
/* Кабинет: экран загрузки по центру видимой области, плавно исчезает */
.bootfx{position:fixed;left:0;top:0;right:0;height:100vh;height:100dvh;z-index:100;display:grid;place-items:center;background:var(--bg);transition:opacity .35s ease}
.bootfx.out{opacity:0;pointer-events:none}
.bootfx-in{width:min(240px,80vw);text-align:center}
.bootfx .fx{height:170px;margin-top:0}
.bootcap{margin-top:6px;font-size:13px;color:var(--muted);letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){.bootfx .rp,.bootfx .sp{display:none}.bootfx .wtile{animation:none}.bootlock .wword span span{opacity:1;transform:none;animation:none}.bootlock .rule{transform:none;animation:none}}
/* hotfix6: шрифт и цвет экрана загрузки кабинета (он вне .page), высота блока загрузки покупки */
.bootfx{font-family:var(--body,system-ui,sans-serif);color:var(--text)}
.bootcap{font-family:var(--body,system-ui,sans-serif);color:var(--muted)}
.bootlock{min-height:max(420px,58vh)}

/* hotfix7: шапка на узких телефонах (360-400): кнопка возврата только со стрелкой, логотип в одну строку; вордмарк Barlow Condensed */
.top{flex-wrap:nowrap;gap:12px}
.top .logo{min-width:0;white-space:nowrap}
.top .pill{flex:none}
@media (max-width:400px){
  .top .pill-t{display:none}
  .top .pill{width:44px;height:44px;padding:0;justify-content:center;gap:0}
}
.wword{font-family:'Barlow Condensed','Roboto Condensed','Arial Narrow','Helvetica Neue',Arial,sans-serif}