/* Website presentation; transport and business handlers remain in dashboard.html. */
:root,html[data-theme=light],html[data-theme=dark]{--primary-hover:#8BE7F1;--primary-pressed:#52C8D6;--on-primary:#07131A}
.sub-bar-days,.tariff-price,.stat-card-value{font-family:inherit!important}
@media(max-width:1023px){body[data-page=payment] .app{padding-top:20px}body[data-page=payment] .main>.page-header{margin-bottom:16px}body[data-page=payment] .main>.sub-bar{margin-bottom:16px}}
#createDevForm .device-create-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-top:14px}#createDevForm .device-create-actions button{white-space:normal;min-height:52px}#cancelDeviceCreateBtn{padding-inline:8px}
.create-dialog-backdrop{display:none;position:fixed;inset:0;background:#0009;z-index:300}
@media(min-width:1024px){body:has(#createDevForm:not(.hidden)) .create-dialog-backdrop{display:block}body:has(#createDevForm:not(.hidden)){overflow:hidden}#createDevForm:not(.hidden){position:fixed;z-index:301;left:50%;top:var(--create-dialog-viewport-center,50%);transform:translate(-50%,-50%);width:min(480px,calc(100% - 40px));max-height:calc(var(--create-dialog-viewport-height,100dvh) - 32px);overflow:auto;overscroll-behavior:contain;box-sizing:border-box}}
#createDialogTitle{font-size:1.375rem;margin:0 0 24px}.device-create-actions{flex-wrap:wrap}
.referral-copy{min-width:156px}.sub-bar-info{min-width:0}.login-auth-title{display:none}
@media(max-width:1023px){body[data-page=payment] .page-header{margin-bottom:20px}body[data-page=payment] .sub-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-bottom:20px}body[data-page=payment] .sub-bar-right{width:auto;display:block;text-align:right}body[data-page=payment] .sub-bar-days{font-size:1.375rem}body[data-page=payment] .sub-bar-value{font-size:1rem}body[data-page=payment] .card{padding:16px}body[data-page=payment] .card-title{margin-bottom:12px!important}body[data-page=payment] .tariffs-wrap{gap:12px}.referral-copy{width:100%}}
html,#appShell{background:#0B0F14!important}
html[data-theme=light],html[data-theme=dark]{--network-status-success:#6CE0A6;--network-status-warning:#F1C777;--page-background:#0B0F14}
@media(min-width:1024px){.app{display:grid!important}}
:root,html[data-theme=light],html[data-theme=dark]{color-scheme:dark;--bg-primary:#0B0F14;--bg-secondary:#141B23;--bg-tertiary:#1C2530;--bg-card:#141B23;--surface-raised:#141B23;--surface:#141B23;--text-primary:#F2F6FA;--text-secondary:#AAB6C4;--text-muted:#AAB6C4;--accent-cyan:#91E0EC;--accent-purple:#A9D9E3;--accent-yellow:#F1C777;--accent-green:#6CE0A6;--accent-red:#FF9DAB;--primary:#68DDEA;--primary-border:#465362;--primary-border-hover:#718494;--glass-bg:#141B23;--glass-hover:#1C2530;--glass-border:#303C49;--gradient-main:#68DDEA;--gradient-accent:#68DDEA;--brand-text:#F2F6FA;--brand-text-shadow:none;--mobile-nav-height:72px;--pay-action-height:52px}
html{scrollbar-gutter:stable;overflow-y:scroll}body{background:#0B0F14!important;color:#F2F6FA;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:1rem;line-height:1.5}button,input,select,textarea{font-family:inherit!important}h1,h2,h3,p{overflow-wrap:anywhere}a{color:#A9D9E3}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #91E0EC;outline-offset:4px}.bg-ambient{display:none}.topbar{height:auto;min-height:72px;padding:12px max(24px,calc((100vw - 1320px)/2));background:rgba(11,15,20,.92);border-color:#303C49;box-shadow:none;gap:12px}.topbar-brand span,.login-title{background:none!important;color:#F2F6FA!important;-webkit-text-fill-color:#F2F6FA!important;text-shadow:none!important}.topbar-brand{font-size:1.0625rem}.topbar-right{gap:12px}.topbar-avatar{width:32px;height:32px;background:#20323D;color:#F2F6FA}.account-button{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;border:1px solid #465362;color:#F2F6FA;background:#1C2530;min-height:44px;max-width:50vw}.account-button>span:first-child{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app{max-width:1320px;grid-template-columns:224px minmax(0,1fr);gap:32px;margin:0 auto;padding:32px 24px 64px}.sidebar{width:auto;padding:0;border:0;background:none;box-shadow:none}.nav-item{border-radius:14px;min-height:48px;font-size:1rem;margin-bottom:6px;background:transparent;color:#AAB6C4}.nav-item.active{background:#20323D;color:#F2F6FA;border-color:transparent;box-shadow:none}.nav-item:hover{transform:none}.main{padding:0;min-width:0;animation:none!important}.page-header{margin-bottom:28px}.page-title{font-size:2rem;line-height:1.2;letter-spacing:-.025em;font-weight:600}.page-subtitle{font-size:1rem;color:#AAB6C4}.card:not(.support-card),.stat-card,.device-item,.device-create-panel,.instruction-protocol-block{padding:24px;border:1px solid #303C49;border-radius:20px;background:#141B23!important;box-shadow:none!important;backdrop-filter:none!important}.card::before,.stat-card::before{display:none}.card{margin-bottom:24px}.card h2{font-size:1.375rem;margin:0 0 16px}.card h3{font-size:1.125rem;margin:16px 0}.btn,.auth-btn{min-height:52px;border-radius:14px;padding:12px 20px;font-size:1rem;line-height:1.375;font-weight:600}.tariff-card:hover{transform:none!important}.btn-outline{background:#1C2530;border:1px solid #465362;color:#F2F6FA}.btn-outline:hover{background:#263341}.btn-danger{background:#36242C;color:#FF9DAB;border-color:#AC6773}.form-input,.auth-input,.form-select{min-height:52px;border-radius:14px;background:#1C2530;color:#F2F6FA;border:1px solid #676E7F;font-size:1rem}.form-label,.auth-field label{font-size:.875rem}.device-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.device-item{display:block;min-width:0;margin:0}.device-item:hover{background:#141B23;border-color:#303C49}.device-icon{display:none}.device-info{width:100%;min-width:0}.device-name{font-size:1.25rem;line-height:1.4;white-space:normal;overflow-wrap:anywhere}.device-title-line{align-items:flex-start}.device-meta{font-size:.875rem;margin-top:8px}.device-actions{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:10px;margin-top:24px}.device-actions [data-device-action=show_qr]{grid-column:2;grid-row:1;width:56px;padding:10px;min-height:56px}.device-actions [data-device-action=show_qr] span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.device-actions [data-device-action=download_config],.device-actions [data-device-action=open_karing]{grid-column:1;grid-row:1;min-height:56px}.device-actions [data-device-action=copy_subscription_link]{grid-column:1/-1;background:transparent;min-height:44px}.device-menu{background:#1C2530;color:#F2F6FA;border-color:#465362}.device-overflow summary{min-width:44px;min-height:44px}.tariffs-grid{gap:16px}.tariff-card{min-width:0;background:#141B23;color:#F2F6FA;border:1px solid #676E7F;border-radius:20px;padding:24px;transition:background-color 160ms,border-color 160ms;text-align:left}.tariff-card.selected{background:#20323D;border-color:#91E0EC;box-shadow:none}.tariff-card::before{display:none}.tariff-days{font-size:1.5rem;color:#F2F6FA}.tariff-price{font-size:2rem;margin:24px 0}.tariff-per-day{color:#AAB6C4}.payment-history-list{margin-top:20px}.payment-row{background:none;border-color:#303C49}.qr-modal{background:rgba(0,0,0,.7);backdrop-filter:none;z-index:1000}.qr-card{background:#141B23;border:1px solid #465362;border-radius:24px;box-shadow:0 24px 80px #0005;max-height:calc(100dvh - 40px);overflow:auto}.qr-close{min-width:44px;min-height:44px}.login-page{padding:100px 20px 60px;background:none;min-height:100svh}.login-card{width:min(440px,100%);padding:32px;background:#141B23;border:1px solid #303C49;border-radius:20px;box-shadow:none;backdrop-filter:none}.login-card::before{display:none}.login-brand{display:block;text-align:left;color:#F2F6FA;text-decoration:none;margin-bottom:28px;font-size:1.0625rem;font-weight:600}.login-title{font-size:1.75rem;line-height:1.22;text-align:left;font-weight:600}.login-subtitle{text-align:left}.login-note{font-size:.875rem}.login-telegram-btn{background:#1C2530;border:1px solid #465362;border-radius:14px;box-shadow:none}.login-bot-btn{border:1px solid #465362;border-radius:14px;color:#F2F6FA;background:#1C2530}.ref-code{white-space:normal;overflow-wrap:anywhere;min-width:0}.ref-code-box{background:#1C2530;border-color:#465362;flex-wrap:wrap;gap:12px}.account-value{overflow-wrap:anywhere}.account-result{margin-top:12px;color:#AAB6C4}.sub-bar{background:#141B23!important;border-color:#303C49;padding:20px;border-radius:20px;box-shadow:none}.sub-bar::before{display:none}.instr-tab,.instruction-method{background:#141B23;border-color:#465362;border-radius:16px}.instr-tab.active{background:#20323D;color:#F2F6FA;border-color:#91E0EC}.instruction-inline-link{color:#A9D9E3}.state-loading{min-height:180px;color:#AAB6C4}.main>.btn:first-child{margin-bottom:24px}.mobile-nav{display:none}
@media(max-width:1023px){.app{display:block;width:100%;padding:28px 20px calc(var(--mobile-nav-height) + 32px);margin:0}.sidebar{display:none}.topbar{padding:12px 20px;min-height:64px}.topbar-user-name,.topbar-avatar,.account-button>span:first-child{display:none}.account-button{padding:10px 12px}.topbar-right{gap:8px}.mobile-nav{display:block;position:fixed;inset:auto 0 0;z-index:100;background:rgba(11,15,20,.96);border-top:1px solid #303C49;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));backdrop-filter:blur(16px)}.mobile-nav-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;max-width:none}.mobile-nav-item{min-height:56px;padding:6px 2px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:0;font-size:.8125rem;line-height:1.3;color:#AAB6C4;border-radius:14px}.mobile-nav-item i{font-size:1.375rem;line-height:24px;width:24px;height:24px}.mobile-nav-item.active{background:#20323D;color:#F2F6FA}.mobile-nav-item.active::before{display:none}.mobile-nav-item span{white-space:normal}.page-title{font-size:1.75rem}.page-header-actions{gap:20px;align-items:stretch}.page-primary-action{width:100%}.device-list{grid-template-columns:1fr}.device-item{min-height:0;padding:20px}.device-actions{grid-template-columns:minmax(0,1fr) 56px}.tariffs-grid.regular-tariffs{display:grid;grid-template-columns:1fr;gap:10px}.regular-tariffs .tariff-card{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;column-gap:12px;align-items:center;min-height:64px;padding:14px 16px;position:relative}.regular-tariffs .tariff-days,.regular-tariffs .tariff-label{display:none}.regular-tariffs .tariff-per-day{grid-column:1;grid-row:1;font-size:1rem;color:#F2F6FA}.regular-tariffs .tariff-price{grid-column:2;grid-row:1;margin:0;font-size:1.125rem}.regular-tariffs .tariff-card::after{content:'';grid-column:3;grid-row:1;position:static;width:20px;height:20px;border:2px solid #9299AA;border-radius:50%;box-sizing:border-box;background:none;transform:none}.regular-tariffs .tariff-card.selected::after{border-color:#91E0EC;background:radial-gradient(circle,#91E0EC 0 4px,transparent 5px)}body[data-page=payment] .main{padding-bottom:calc(var(--pay-action-height) + 36px)}body[data-page=payment] #payBtn{position:fixed;left:20px;right:20px;bottom:calc(var(--mobile-nav-height) + 12px);width:calc(100% - 40px);z-index:101;box-shadow:0 0 0 12px #0B0F14!important;min-height:52px;margin:0}body:has(.qr-modal:not(.hidden)) #payBtn{visibility:hidden}.sub-bar{padding:16px;gap:12px}.card{padding:20px}.login-card{padding:24px}.page-subtitle{font-size:.9375rem}}
@media(max-width:360px){.app{padding-inline:16px}.topbar{padding-inline:16px}.topbar-brand{font-size:.9375rem}.device-item{padding:16px}.device-actions{grid-template-columns:minmax(0,1fr) 56px}.topbar-right .btn-logout{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Compact cabinet composition. Text drives height, including at 200%. */
.page-header{margin-bottom:24px}.page-header-actions{align-items:center}.page-title{font-weight:650}
.device-count{margin-top:8px}.device-title-line{gap:12px;align-items:center}.device-title-line .protocol-logo{width:40px;height:40px;flex:none;border-radius:10px}.device-name{flex:1;min-width:0;font-size:1.125rem}.device-overflow{margin-left:auto;flex:none}
.device-network{padding:0;border:0;background:none;margin-top:16px}.device-traffic{font-size:.875rem;margin-top:8px}.device-meta{margin-top:12px}.device-actions{margin-top:20px}.device-item{display:flex;flex-direction:column}.device-info{display:flex;flex-direction:column;flex:1}.device-actions{margin-top:auto;padding-top:20px}
.sub-bar,body[data-page=payment] .sub-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;padding:20px;margin-bottom:24px;align-items:start}
.sub-bar-info{grid-column:1}.sub-bar-value{font-size:.9375rem;font-weight:400;color:#AAB6C4;margin-top:4px}.sub-bar-label{font-size:1rem;font-weight:600;color:#F2F6FA}
.sub-bar-right,body[data-page=payment] .sub-bar-right{display:flex;align-items:baseline;gap:6px;width:auto;flex-wrap:wrap;justify-content:flex-end;text-align:right}.sub-bar-days,body[data-page=payment] .sub-bar-days{font-size:1.375rem;line-height:1.4;color:#F2F6FA}.sub-bar-days-label{font-size:.875rem;color:#AAB6C4}
.sub-bar-footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:#AAB6C4;font-size:.9375rem}.sub-bar-footer:empty{display:none}.sub-bar-footer .btn{min-height:44px;padding:10px 16px}
.payment-plans{margin-bottom:24px}.payment-plans h2{margin:0 0 16px;font-size:1.375rem}.tariff-name{font-size:1.125rem;font-weight:600}.tariff-duration{font-size:.875rem;color:#AAB6C4}.regular-tariffs .tariff-price{font-size:1.5rem;margin:16px 0 0}.payment-row{padding:16px 0;border-radius:0;border:0;border-bottom:1px solid #303C49}.payment-row:first-child{padding-top:0}.payment-row:last-child{border-bottom:0;padding-bottom:0}.payment-title{font-size:1.125rem}.payment-meta{font-size:.875rem;margin-top:6px}
.text-action{display:inline-flex;align-items:center;min-height:44px;padding:10px 0;background:none;border:0;color:#A9D9E3;font:inherit;text-align:left;cursor:pointer;text-decoration:none}.text-action:focus-visible,select:focus-visible{outline:2px solid #91E0EC;outline-offset:4px}
body[data-page=dashboard] .main{max-width:680px}.main>.account-back:first-child{margin-bottom:12px}.account-identity h2,.account-email h2{margin-bottom:8px}.account-identity p,.account-email-status{font-size:.9375rem;color:#AAB6C4}.account-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.account-actions .btn{flex:1 1 190px;white-space:normal;padding-inline:12px}.account-email .auth-form{margin-top:20px}.account-result:empty{margin:0}.account-logout{color:#FF9DAB;margin-top:0}.account-email h2{font-size:1.125rem;overflow-wrap:anywhere}
.card.support-card{display:grid;grid-template-columns:36px minmax(0,1fr) 20px;align-items:center;gap:12px;padding:20px;border:1px solid #303C49;border-radius:20px;background:var(--bg-card);box-shadow:none;backdrop-filter:none;text-decoration:none;color:var(--text-primary);transition:background-color 190ms,border-color 190ms}
.support-card-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(104,221,234,.12);color:var(--accent-cyan)}
.support-card-copy{display:grid;gap:4px;min-width:0;overflow-wrap:anywhere}
.support-card-copy strong{font-size:1.0625rem;line-height:1.375rem;font-weight:600}
.support-card-copy>span{font-size:.875rem;line-height:1.25rem;color:var(--text-secondary)}
.support-card-arrow{color:var(--text-secondary)}
.support-card:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:4px}
@media(hover:hover) and (pointer:fine){.card.support-card:not([aria-disabled=true]):not([aria-busy=true]):hover{background:var(--bg-tertiary);border-color:var(--accent-cyan)}}
.card.support-card:not([aria-disabled=true]):not([aria-busy=true]):active{background:var(--bg-tertiary);border-color:var(--accent-cyan)}
@media(hover:none),(pointer:coarse){.card.support-card{transition-duration:120ms}.card.support-card:not([aria-disabled=true]):not([aria-busy=true]):active{transition-duration:0ms}}
@media(prefers-reduced-motion:reduce){.card.support-card{transition:none}}
.help-heading{font-size:1.375rem;margin:0 0 16px}.instruction-protocol-block{padding:0;border:0;background:none!important}.single-protocol{display:flex;gap:10px;align-items:center;margin-bottom:16px;color:#AAB6C4}.single-protocol img{width:24px;height:24px}.platform-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.platform-tabs .instr-tab{min-height:60px;flex-direction:row;gap:12px;font-size:1rem;text-align:left;padding:12px}.protocol-card-grid .instr-tab{min-height:52px;flex-direction:row}.help-links{margin-top:24px;display:flex;flex-direction:column;gap:12px}.support-email{display:flex;gap:12px;align-items:center;text-decoration:none;min-height:52px;color:#F2F6FA}.support-email small{display:block;color:#AAB6C4;font-size:.875rem;margin-top:4px}.support-email span{min-width:0;overflow-wrap:anywhere}
body[data-page=referrals] .main{max-width:760px}.referral-lead h2{font-size:2rem;line-height:1.25;margin:0 0 12px}.referral-lead p{color:#AAB6C4}.referral-channels{display:grid;grid-template-columns:1fr 1fr;background:#141B23;border:1px solid #303C49;padding:5px;border-radius:18px;margin:24px 0 20px;gap:4px}.referral-channels button{font:inherit;min-height:48px;padding:10px;border:1px solid transparent;border-radius:13px;background:none;color:#AAB6C4;cursor:pointer}.referral-channels .selected{background:#20323D;color:#F2F6FA;border-color:#465362}.referral-trial{color:#AAB6C4;font-size:.875rem;margin:12px 0 20px}.referral-delivery .text-action{margin-top:8px}.referral-address{overflow-wrap:anywhere;font-size:.9375rem;color:#AAB6C4;user-select:all;margin-top:8px}.ref-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.ref-stats strong{display:block;font-size:1.5rem;font-weight:600;overflow-wrap:anywhere}.ref-stats span{display:block;font-size:.875rem;color:#AAB6C4;margin-top:6px}
#qrCopyBtn{width:100%;min-height:52px;white-space:normal}#qrActions{display:block}.qr-copy-status:empty{display:none}.form-select{width:100%;padding:12px 14px;appearance:auto}#newDevRegion:disabled{opacity:.65}
.region-select-shell{width:100%;height:max(52px,calc(1.5em + 24px));box-sizing:border-box;overflow:hidden;border:1px solid #676E7F;border-radius:14px;background:#1C2530}.region-select-shell:focus-within{outline:2px solid #91E0EC;outline-offset:4px}
#newDevRegion{width:calc(100% + 2px);height:max(52px,calc(1.5em + 24px));min-height:52px;margin:-1px;box-sizing:border-box;border:0;background:transparent;padding:12px 32px 12px 8px;text-indent:8px;border-radius:14px;font-size:1rem}#newDevRegion:focus-visible{outline:0}
#createDevForm:not(.hidden)>*{flex-shrink:0}
#createDevForm:not(.hidden)::after{content:'';display:block;flex:none;min-height:8px}
@media(max-width:1023px){
 #createDevForm:not(.hidden){position:static;transform:none;width:100%;max-height:none;overflow:visible;overscroll-behavior:auto;margin-bottom:16px;scroll-margin-top:84px}
 #createDevForm .device-create-actions{grid-template-columns:minmax(0,1fr)}
 #createDevForm .device-create-actions button{width:100%}
 #cancelDeviceCreateBtn{background:transparent;border-color:transparent;color:#AAB6C4;padding-inline:16px}
}
.mobile-bottom{display:none}
@media(max-width:1023px){
 .app{padding-bottom:calc(var(--bottom-area-height,96px) + 24px)}.page-header-actions{align-items:stretch}.card,.device-item{padding:20px}.account-actions .btn{flex-basis:140px}
 .mobile-bottom{display:flex;flex-direction:column;gap:10px;position:fixed;z-index:100;left:0;right:0;bottom:0;padding:8px 14px max(8px,env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,#0B0F14 18px)}
 .mobile-nav{position:relative;inset:auto;display:block;padding:6px;background:#141B23;border:1px solid #303C49;border-radius:28px;box-shadow:0 6px 24px #0004;backdrop-filter:none}
 .mobile-nav-items{position:relative;gap:0;isolation:isolate}.mobile-nav-items::before{content:'';position:absolute;z-index:-1;left:0;top:0;bottom:0;width:25%;border-radius:22px;background:#26333E;transform:translateX(calc(var(--nav-index,0)*100%));transition:transform 200ms ease-out;opacity:0}.mobile-nav.has-selection .mobile-nav-items::before{opacity:1}
 .mobile-nav-item{min-height:60px;border-radius:22px;background:none!important;gap:5px;font-size:.75rem;padding:6px 2px}.mobile-nav-item span{max-width:none;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}.mobile-nav-item svg{width:24px;height:24px;flex:none}
 body[data-page=payment] .main{padding-bottom:0}body[data-page=payment] #payBtn{position:static;width:100%;margin:0;box-shadow:none!important;min-height:52px}
 body:has(.qr-modal:not(.hidden)) .mobile-bottom{visibility:hidden}
 .regular-tariffs .tariff-card{grid-template-columns:minmax(0,1fr) minmax(0,auto) 20px;gap:0 10px;padding:14px 16px;min-height:72px}.regular-tariffs .tariff-name{grid-column:1;grid-row:1;font-size:1.125rem;overflow-wrap:anywhere}.regular-tariffs .tariff-duration{grid-column:1;grid-row:2}.regular-tariffs .tariff-price{grid-column:2;grid-row:1/3;font-size:1.375rem;margin:0;overflow-wrap:anywhere;text-align:right}.regular-tariffs .tariff-card::after{grid-row:1/3}
}
@media(max-width:360px){.card,.device-item,.sub-bar,body[data-page=payment] .sub-bar{padding:16px}.sub-bar,body[data-page=payment] .sub-bar{column-gap:10px}.regular-tariffs .tariff-card{padding:14px 12px}.ref-stats{gap:12px}}
@media(prefers-reduced-motion:reduce){.mobile-nav-items::before{transition:none}}
.payment-row{display:block}.device-actions:empty{display:none}.support-email svg{flex:none}
#qrActions{display:flex;flex-direction:column;gap:12px}
/* Reserve the wrapping label even while its shorter confirmation is visible. */
#qrCopyBtn{display:grid;grid-template-columns:minmax(0,1fr)}#qrCopyBtn::after{content:'Скопировать ссылку подписки';visibility:hidden;grid-area:1/1}#qrCopyBtn>span{grid-area:1/1;align-self:center}
@media(max-width:360px){.mobile-bottom{padding-inline:12px}.mobile-nav{padding:4px}.mobile-nav-item{letter-spacing:-.025em}}
/* Payment actions stay in the page flow; only the navigation is fixed. */
.payment-actions{min-width:0;text-align:left}
.payment-actions .btn-full{width:min(100%,264px);min-height:52px;white-space:normal}
.payment-vpn-hint{margin:8px 0 0;color:var(--text-muted);font-size:.875rem;line-height:1.45;max-width:44ch}
@media(min-width:1024px){
 body[data-page=payment] .payment-plans .tariffs-grid,body[data-page=payment] .promo-tariffs{margin-bottom:20px}
 body[data-page=payment] .payment-actions{display:grid;grid-template-columns:minmax(0,1fr) 200px;grid-template-areas:"hint button";align-items:center;gap:20px;text-align:left}
 body[data-page=payment] .payment-actions .btn-full{grid-area:button;width:100%;justify-self:end}
 body[data-page=payment] .payment-vpn-hint{grid-area:hint;justify-self:start;width:min(100%,520px);max-width:520px;margin:0;text-align:left}
 body[data-page=payment] .payment-plans{margin-bottom:28px}
}
@media(max-width:1023px){
 body[data-page=payment] .app{padding-bottom:calc(var(--bottom-area-height,96px) + 24px)}
 body[data-page=payment] #payBtn{position:static;inset:auto;width:100%;margin:0;box-shadow:none!important}
 .payment-actions .btn-full{width:100%}
 .payment-vpn-hint{max-width:none}
}
@media(max-width:1023px){html{scrollbar-gutter:auto;overflow-y:auto;scrollbar-color:auto}}
@media(forced-colors:active){html{scrollbar-color:auto}}

/* Shared brand shell; device, payment and account surfaces keep their existing styles. */
html #appShell{background:#0B0F14!important}
.login-page{background:#0B0F14}
.topbar{background:#0B0F14;border-bottom-color:#0B0F14;backdrop-filter:none;-webkit-backdrop-filter:none}

/* Short desktop confirmations occupy only the free space between brand and account. */
@media(min-width:1024px){
 .topbar-inner .desktop-toast-slot{position:relative;flex:1 1 auto;min-width:0;height:0;align-self:center;pointer-events:none}
 .desktop-toast-slot .toast.compact-confirmation{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);display:block;box-sizing:border-box;width:max-content;max-width:100%;padding:10px 16px;border:1px solid #465362;border-radius:14px;background:#1C2530;color:#F2F6FA;box-shadow:0 8px 24px #0006;backdrop-filter:none;animation:none;pointer-events:none;text-align:center;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
}
@media(max-width:1023px){.desktop-toast-slot{display:none}}

/* Help instructions: one calm surface for the protocol and its platform choices. */
body[data-page=instructions] .instruction-protocol-block{
 padding:24px;
 border:1px solid #303C49;
 border-radius:20px;
 background:#141B23!important;
}
body[data-page=instructions] .single-protocol{
 gap:12px;
 margin:0;
 color:#F2F6FA;
 font-size:1.1875rem;
 font-weight:600;
 line-height:1.35;
}
body[data-page=instructions] .single-protocol .protocol-logo{width:32px;height:32px;flex:none}
body[data-page=instructions] .instruction-chooser-hint{
 margin:8px 0 20px;
 color:#AAB6C4;
 font-size:.9375rem;
 line-height:1.5;
}
body[data-page=instructions] .platform-tabs .instr-tab{
 min-height:54px;
 height:auto;
 justify-content:flex-start;
 align-items:center;
 padding:12px 16px;
 gap:12px;
 text-align:left;
 white-space:normal;
}
body[data-page=instructions] .platform-tabs .instr-tab .os-icon{flex:none}
body[data-page=instructions] .platform-tabs .instr-tab span{min-width:0;overflow-wrap:anywhere}
body[data-page=instructions] .platform-tabs .instr-tab::after{
 content:'→';
 flex:none;
 margin-left:auto;
 color:currentColor;
 font-size:1.25rem;
 line-height:1;
}
body[data-page=instructions] .protocol-card-grid .instr-tab{
 justify-content:flex-start;
 gap:12px;
 padding:12px 16px;
 text-align:left;
}
body[data-page=instructions] .protocol-card-grid .protocol-logo{width:28px;height:28px;flex:none}
@media(max-width:620px){
 body[data-page=instructions] .platform-tabs,
 body[data-page=instructions] .protocol-card-grid{grid-template-columns:1fr}
 body[data-page=instructions] .instruction-protocol-block{padding:20px}
}
@media(max-width:360px){body[data-page=instructions] .instruction-protocol-block{padding:16px}}
@media(max-width:1023px){
 body[data-page=instructions] .platform-tabs{grid-template-columns:repeat(auto-fit,minmax(min(100%,8em),1fr))}
 body[data-page=instructions] .platform-tabs .instr-tab::after{display:none}
 body[data-page=instructions] .platform-tabs .instr-tab{justify-content:flex-start;min-width:0}
 body[data-page=instructions] .instruction-guide .step-list li{padding:12px 12px 12px 48px;min-height:52px;background:#1C2530;border-color:#465362}
 body[data-page=instructions] .instruction-guide .step-list li::before{left:10px;top:12px;background:#203B40;color:#91E0EC}
 .toast.compact-confirmation{position:fixed;top:auto;bottom:calc(var(--bottom-area-height,96px) + 12px);left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;padding:10px 16px;border:1px solid #465362;border-radius:14px;background:#1C2530;color:#F2F6FA;box-shadow:0 8px 24px #0006;backdrop-filter:none;animation:none;pointer-events:none;text-align:center;line-height:1.4}
}
