.stage-brand{display:inline-flex;align-items:center;gap:10px;font:700 26px/1.2 'Golos Text Variable',sans-serif;letter-spacing:-.6px;color:var(--ak-accent)}
.stage-brand-cube{display:block;flex:none;object-fit:contain}
.stage-code{font:700 30px/1.4 'JetBrains Mono',monospace;letter-spacing:3px;text-align:center;padding:12px 0;user-select:all}
.stage-note{position:fixed;bottom:8px;right:10px;z-index:10;padding:3px 8px;border-radius:20px;background:#202026dc;color:#a5a5b0;font-size:10px;pointer-events:none}
.stage-link{color:var(--ak-accent);text-decoration:none}
.stage-price{font-size:28px;line-height:1.2;font-weight:700}
.stage-history{display:grid;gap:12px}
.stage-history-item{display:flex;justify-content:space-between;gap:16px;align-items:center}
.stage-count{font-size:32px;font-weight:700;line-height:1.2}
.stage-feature{display:flex;align-items:center;gap:9px;color:var(--ak-text-2);font-size:15px}
.stage-feature::before{content:'✓';color:var(--ak-accent)}
.stage-credentials{margin-top:4px}
.stage-actions{display:flex;gap:8px;flex-wrap:wrap}
.stage-actions .btn{flex:1;min-width:140px}
.stage-key{overflow-wrap:anywhere}
.stage-payment-frame{display:block;width:100%;height:72dvh;min-height:560px;border:0;border-radius:var(--r-md);background:#fff}
[aria-label="Переименовать"],[aria-label="Сменить подписку"]{display:none!important}

.install-platforms{flex-wrap:wrap;overflow:visible}
.install-client-picker{display:flex;flex-wrap:wrap;gap:8px}
.stage-content-flow>.motion-height-inner{display:flex;flex-direction:column;gap:16px}
.install-guide .install-client-picker{margin-top:20px}
.install-client-picker button{display:flex;align-items:center;gap:7px;min-height:42px;padding:10px 16px;border:1px solid var(--ak-border);border-radius:var(--r-md);background:var(--ak-card);color:var(--ak-text-2);font:inherit}
.install-client-picker button[aria-pressed='true']{border-color:var(--ak-accent);color:var(--ak-accent);background:color-mix(in srgb,var(--ak-accent) 9%,var(--ak-card))}
.install-client-picker button span{font-size:12px;opacity:.7}
.install-guide{padding:0 20px;overflow:hidden}
.install-step{padding:22px 0}
.install-step+.install-step{border-top:1px solid var(--ak-divider)}
.install-step-heading{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.install-step-heading h2{margin:0}
.install-step-number{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--ak-accent) 13%,var(--ak-card));color:var(--ak-accent);font-size:14px;font-weight:600}
.install-step-body{display:grid;gap:14px}
.install-step-body p,.install-subscription p,.install-subscription h2{margin:0}
.install-actions{display:flex;flex-wrap:wrap;gap:10px}
.install-actions>.btn{flex:1;min-width:min(210px,100%);white-space:normal;text-align:center}
.install-file-note{font-size:12px}
.install-import{white-space:normal;text-align:center}
.install-subscription{display:grid;gap:14px}
.install-qr{display:flex;justify-content:center;padding-top:6px;animation:stage-reveal .3s ease-out}
.install-qr img{max-width:100%;height:auto;border-radius:12px}
@media(min-width:640px){.install-step-body{padding-left:40px}}
@media(max-width:359px){.install-guide{padding:0 14px}.install-client-picker button{padding:9px 12px}}

/* One route entry owns position and opacity. Scaling a tall page around its
   centre tied the visible Y offset to asynchronous content height, and changed
   text rasterisation at the end. Async children never replay route entry. */
:root{--stage-screen-time:.55s;--stage-reveal-time:.42s;--stage-window-in:.48s;--stage-window-out:.34s;--stage-ease:cubic-bezier(.25,.46,.32,1)}
.shell-main .card,.shell-main .plan,.swap .card{animation:none}
.shell{overflow-x:clip}
.shell-main{animation:stage-enter var(--stage-screen-time) var(--stage-ease);transform-origin:50% 0}
.shell-main:has(>.stage-route-loading){animation:none}
.stage-route-scene{display:contents}
.stage-route-loading{display:grid;place-items:center;min-height:calc(100dvh - 130px);animation:stage-reveal .2s ease-out .15s backwards}
.shell-main .swap{animation-name:stage-reveal}
.swap{animation-duration:var(--stage-screen-time);animation-timing-function:var(--stage-ease)}
@keyframes stage-enter{from{opacity:0;transform:translate3d(var(--stage-route-offset,24px),0,0)}to{opacity:1;transform:translate3d(0,0,0)}}

/* Fade a separate layer: animating the scrim background repainted the viewport. */
.sheet-scrim,.sheet-scrim[data-closing]{background:transparent;animation:none;isolation:isolate}
.sheet-scrim::before{content:'';position:absolute;inset:0;z-index:-1;background:#0009;pointer-events:none;animation:stage-scrim-in var(--stage-window-in) var(--stage-ease) both}
.sheet-scrim[data-closing]::before{animation:stage-scrim-out var(--stage-window-out) cubic-bezier(.4,0,.2,1) both}
.sheet{overscroll-behavior:contain;animation-duration:var(--stage-window-in);animation-timing-function:var(--stage-ease)}
.sheet-scrim[data-closing] .sheet{animation-duration:var(--stage-window-out);animation-timing-function:cubic-bezier(.4,0,.2,1)}
/* A small spring settlement matches the old modal without a JS motion runtime.
   Phone sheets keep their full-height slide and avoid an oversized overshoot. */
@media(min-width:640px){
 .sheet{animation-name:stage-dialog-in}
 @keyframes stage-dialog-in{0%{opacity:0;transform:translateY(20px) scale(.96)}75%{opacity:1;transform:translateY(-1px) scale(1.002)}100%{opacity:1;transform:none}}
}
@keyframes stage-scrim-in{from{opacity:0}to{opacity:1}}
@keyframes stage-scrim-out{from{opacity:var(--scrim-exit-opacity,1)}to{opacity:0}}

/* This persistent wrapper enters once; loading/data/search changes stay inside
   it and do not restart the shell's direct-child reveal animation. */
.stage-devices-screen{display:flex;flex-direction:column;gap:16px;min-width:0}
.stage-devices-loading{min-height:max(552px,calc(100dvh - 180px));overflow:hidden}
.stage-device-placeholder{height:69px;padding:16px 20px;border-bottom:1px solid var(--ak-line);display:flex;align-items:center;gap:12px}
.stage-device-placeholder::before{content:'';width:24px;height:24px;border-radius:8px;background:var(--ak-bg)}
.stage-device-placeholder::after{content:'';width:55%;height:32px;border-radius:6px;background:var(--ak-bg)}
@keyframes stage-reveal{from{opacity:0}to{opacity:1}}
.stage-toast{position:fixed;z-index:45;bottom:calc(20px + var(--safe-bottom));left:50%;width:min(440px,calc(100% - 40px));background:var(--ak-card);border-radius:var(--r-md);box-shadow:0 8px 32px #0006;pointer-events:none;transform:translateX(-50%);animation:stage-reveal var(--stage-reveal-time) var(--stage-ease) both}

/* Press feedback remains immediate; the release has the old soft spring feel. */
.press{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.btn{transition:background var(--t) var(--ease-out),color var(--t) var(--ease-out),transform .3s cubic-bezier(.34,1.56,.64,1)}
.press:active{transition-duration:80ms;transform:scale(.98)}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important;will-change:auto!important}
 .press:active{transform:none}
 .skeleton{background:var(--ak-card)}
 .shell-main,.stage-route-loading{animation:none!important;transform:none;opacity:1}
}