/* Shared setup and checkout components follow the site's theme tokens. */
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.ux-button,.device-picker button,.os-picker button,.password-toggle{border:1px solid var(--line);background:var(--bg-card);color:var(--text);padding:13px 18px;min-height:44px;font:14px/1.4 Arial,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;cursor:pointer;border-radius:0}
.ux-button:hover,.device-picker button:hover,.os-picker button:hover{border-color:var(--lime)}.ux-button:focus-visible,summary:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.ux-help,.ux-trial{display:inline-block;color:var(--lime);font:14px/1.7 Arial,sans-serif;text-decoration:underline;text-underline-offset:5px;padding:12px 0}.ux-trial{display:block;margin-top:14px}
.extra-plans,.promo-panel{border-top:1px solid var(--line);margin-top:22px;padding-top:14px}.extra-plans summary,.promo-panel summary,#crypto-options summary{cursor:pointer;min-height:44px;padding:12px 0;font:14px/1.4 Arial,sans-serif;color:var(--text)}.extra-plans>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}.extra-plans .renew-options{display:flex;align-items:stretch;padding:0}
.instructions{scroll-margin-top:25px}.instructions .section-heading h2{font-size:clamp(20px,3vw,36px);line-height:1.7}.instructions .section-heading>p{max-width:330px;color:var(--muted);line-height:1.7}.device-picker{display:inline-flex;border:1px solid var(--line);padding:4px;gap:4px;margin:0 0 20px}.device-picker button{border:0;min-width:145px}.device-picker [aria-pressed=true]{background:var(--lime);color:var(--bg)}[data-theme=light] .device-picker [aria-pressed=true]{color:white}.os-picker{display:flex;gap:10px;margin-bottom:24px}.os-picker [aria-pressed=true]{border-color:var(--lime);color:var(--lime);box-shadow:inset 0 -2px var(--lime)}
.guide-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:38px;align-items:start}.guide-video{border:1px solid var(--line);background:var(--bg-card);aspect-ratio:16/10;display:grid;place-items:center;min-width:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:36px 36px}.guide-video video{width:100%;height:100%;max-height:440px;background:#000}.video-placeholder{text-align:center;background:var(--bg-card);padding:25px;max-width:88%}.video-placeholder strong{font:20px var(--pixel);color:var(--lime)}.video-placeholder p{font-size:15px;line-height:1.6;margin:18px 0 8px}.video-placeholder small{font:13px/1.6 Arial;color:var(--muted)}.video-mark{display:block;font:40px monospace;color:var(--lime);margin-bottom:20px}.guide-steps{list-style:none;margin:0;padding:0}.guide-steps li{display:flex;gap:20px;padding:0 0 23px;margin-bottom:20px;border-bottom:1px solid var(--line)}.guide-steps li:before{content:none}.guide-steps li>span{font:12px/1.8 var(--pixel);color:var(--lime);padding-top:4px}.guide-steps h3{font:600 19px/1.5 Arial;margin:0}.guide-steps p{font:14px/1.7 Arial;color:var(--muted);margin:8px 0 14px}
.account-instructions{margin-bottom:35px;padding:28px;border:1px solid var(--line);background:var(--bg-card)}.account-instructions .section-heading{margin-bottom:25px}.account-instructions .section-heading h2{font-size:20px}.account-grid{grid-template-columns:1.15fr 1fr .85fr}.profile-card{margin-right:0}.connect-device{display:flex;justify-content:center;margin-top:16px;font-size:11px;padding:18px}.pending-plan{max-width:600px;margin:35px auto -55px;padding:18px;color:var(--text);border:1px solid var(--line);line-height:1.7;background:var(--bg-card)}
.cabinet-container label{display:block;margin:0 0 8px;font:14px Arial}.password-toggle{margin-top:8px;padding:8px 0;border:0;background:none;color:var(--muted);font-size:13px}.cabinet-container input{font-family:Arial,sans-serif!important}.cabinet-container .toggle-link a{display:inline-block;min-height:32px;padding:5px}
#renew-dialog{width:min(540px,calc(100% - 24px));padding:30px;max-height:calc(100dvh - 32px);overscroll-behavior:contain;background:var(--bg-card);color:var(--text)}#renew-dialog h2{margin:15px 0 8px}#renew-dialog>p{font:14px/1.6 Arial;color:var(--muted)}#renew-dialog fieldset{border:0;padding:0;margin:0;min-width:0}#renew-dialog legend{padding:0}#renew-dialog .renew-options{gap:8px;margin:20px 0 0}#renew-dialog .plan-btn{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;text-align:start;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--text);padding:15px 16px;font:16px Arial}#renew-dialog .plan-btn.is-selected{border-color:var(--lime);box-shadow:inset 3px 0 var(--lime)}#renew-dialog .plan-btn>span{display:grid;gap:6px}#renew-dialog .plan-btn strong{color:var(--text);font-size:15px;font-weight:600}#renew-dialog .plan-btn small{font:12px/1.5 Arial;color:var(--muted)}#renew-dialog .plan-btn b{font:600 19px Arial;white-space:nowrap;color:var(--lime)}#renew-dialog .plan-btn:hover{border-color:var(--lime)}#renew-dialog :disabled{cursor:default}#renew-dialog fieldset:disabled{opacity:.6}
#renew-dialog input:not([type=radio]),#renew-dialog select{width:100%;min-width:0;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:0;padding:13px;font:16px Arial;margin:8px 0}#renew-dialog input:focus,#renew-dialog select:focus{outline:2px solid var(--lime);outline-offset:2px}#renew-dialog label{font:14px/1.6 Arial}.promo-row{display:flex;gap:10px;align-items:center}.promo-row input{flex:1}.promo-row button{flex-shrink:0}#promo-res{font:13px/1.5 Arial;color:var(--lime);margin:5px 0}.payment-methods{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}.payment-choice{display:flex;align-items:center;gap:10px;padding:8px 0;min-height:44px}#renew-dialog input[type=radio]{width:18px;height:18px;accent-color:var(--lime);margin:0}#crypto-options{padding-top:5px}#crypto-options select{margin-bottom:0}.checkout-total{padding:22px 0 18px;margin-top:20px;border-top:1px solid var(--line)}.checkout-total>div{display:flex;align-items:center;justify-content:space-between;gap:15px}.checkout-total strong{font:600 30px Arial;color:var(--text)}.checkout-total p{margin:8px 0 0;font:13px/1.6 Arial;color:var(--muted)}#checkout-discount{color:var(--lime)}#btn-continue-pay{width:100%;display:flex;justify-content:center;font:600 16px Arial;padding:18px}.dialog-cross{width:44px;height:44px;top:6px;right:7px;color:var(--text)}
.payment-result{font:14px/1.7 Arial;overflow-wrap:anywhere}.payment-result:empty{display:none}.payment-result .primary{font:600 14px/1.5 Arial;text-align:center;justify-content:center;width:100%;padding:15px}.payment-qr{background:#fff;padding:12px;width:max-content;max-width:100%;margin:20px auto}.payment-qr:empty{display:none}.payment-qr img,.payment-qr canvas{max-width:100%;height:auto}.payment-status{color:var(--muted)}.payment-success{color:var(--lime)}#renew-dialog .is-error{color:#e77768}#check-payment{width:100%;margin-top:15px}.crypto-amount{font:600 20px/1.6 Arial}.bank-link{margin-top:16px}.instructions .ux-help{margin-top:12px}
@media(min-width:701px){.payment-result .bank-link{margin-bottom:12px}}
@media(max-width:1100px){.account-grid{grid-template-columns:1.15fr 1fr}.guide-grid{gap:25px}.account-instructions{padding:22px}}
@media(max-width:700px){.guide-grid{grid-template-columns:1fr;gap:25px}.device-picker{display:flex}.device-picker button{flex:1;min-width:0}.instructions .section-heading{display:block}.instructions .section-heading>p{max-width:none;margin-top:16px}.guide-video{aspect-ratio:16/10}.account-grid{grid-template-columns:1fr}.account-instructions{padding:20px}.pending-plan{margin:25px 5% 0}.cabinet-container{margin-top:25px!important}#renew-dialog{padding:26px 20px;max-height:calc(100dvh - 20px)}.extra-plans>div{flex-wrap:wrap}.guide-steps li{gap:14px}.guide-steps h3{font-size:17px}nav{gap:12px!important}.promo-row{gap:8px}.promo-row button{padding:13px 10px}.checkout-total strong{font-size:27px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.infinity-bar{animation:none}}
.connection-overview{display:flex;align-items:center;justify-content:space-between;gap:25px;border:1px solid var(--lime);padding:28px;margin-bottom:16px;background:var(--bg-card)}.connection-overview h2{font:600 26px/1.4 Arial;margin:13px 0 8px}.connection-overview p{color:var(--muted);margin:0;font:14px/1.6 Arial}.connection-actions{display:flex;flex-direction:column;gap:12px}.connection-actions .primary{font:600 14px Arial;padding:18px;margin:0;text-align:center;justify-content:center}.account-setup{margin-bottom:28px}.account-setup>summary{padding:18px 0;cursor:pointer;font-size:15px;color:var(--lime)}.account-instructions{margin-bottom:0}
#renew-dialog{padding:0;overflow:hidden}#renew-dialog[open]{display:flex;flex-direction:column}.checkout-body{padding:30px 30px 12px;overflow-y:auto;min-height:0;overscroll-behavior:contain}.checkout-footer{flex-shrink:0;background:var(--bg-card);padding:0 30px 24px;border-top:1px solid var(--line)}.checkout-footer .checkout-total{margin:0;border:0;padding:16px 0}.checkout-footer #check-payment{margin-top:16px}#renew-dialog .dialog-cross{z-index:2;background:var(--bg-card)}#renew-dialog .payment-result .field-note{margin-top:16px}
@media(max-width:700px){.connection-overview{display:block;padding:22px}.connection-actions{margin-top:20px}.connection-overview h2{font-size:23px}.checkout-body{padding:25px 20px 12px}.checkout-footer{padding:0 20px 20px}.checkout-footer .checkout-total{padding:13px 0}.checkout-footer #checkout-description{font-size:12px}}
#change-invoice{margin-top:18px;border-top:1px solid var(--line)}#change-invoice summary{cursor:pointer;padding:15px 0;font:14px Arial;color:var(--text)}#change-invoice p{font:13px/1.7 Arial;color:var(--muted)}
/* Quiet feedback: composited entrances and short, local control transitions. */
html{scrollbar-gutter:stable}html:has(.account-dialog[open]){overflow:hidden}
.primary,.choose,.ux-button,.device-picker button,.os-picker button,.plan-btn{transition:transform .2s cubic-bezier(.22,1,.36,1),background-color .18s,border-color .18s,color .18s,box-shadow .18s}
@media(hover:hover){.ux-button:hover,.os-picker button:hover{transform:translateY(-2px)}.plan:hover{border-color:var(--lime)}.device-picker button:hover{filter:brightness(1.06)}}
.plan{transition:border-color .2s}.plan-btn:active:not(:disabled),.device-picker button:active,.os-picker button:active{transform:scale(.985)}
#renew-dialog .plan-btn{transition:background-color .2s,border-color .2s,box-shadow .2s,transform .16s}#renew-dialog .plan-btn.is-selected{background:color-mix(in srgb,var(--lime) 6%,var(--bg))}
#renew-dialog[open]{animation:checkout-in .32s cubic-bezier(.22,1,.36,1) both}#renew-dialog.dialog-closing{animation:checkout-out .18s ease both}#renew-dialog[open]::backdrop{animation:backdrop-enter .26s ease both}#renew-dialog.dialog-closing::backdrop{animation:backdrop-exit .18s ease both}
#renew-dialog[open]:not(.dialog-closing) .checkout-footer{animation:checkout-footer-in .32s cubic-bezier(.22,1,.36,1) both}
.account-dialog .dialog-cross{position:absolute;display:grid;place-items:center;inset-inline-end:10px;inset-inline-start:auto;top:10px;width:40px;height:40px;min-width:40px;padding:0;margin:0;border:1px solid transparent;line-height:1;color:var(--muted);background:var(--bg-card);box-shadow:none;z-index:3;transition:color .18s,border-color .18s,background-color .18s}
.account-dialog .dialog-cross svg{display:block;pointer-events:none;transition:transform .22s cubic-bezier(.22,1,.36,1)}
.account-dialog .dialog-cross:hover{color:var(--text);border-color:var(--line)}.account-dialog .dialog-cross:hover svg{transform:rotate(90deg)}.account-dialog .dialog-cross:active{transform:scale(.94)}.account-dialog .dialog-cross:focus-visible{outline-offset:2px;border-color:var(--lime)}.account-dialog h2[tabindex="-1"]:focus{outline:none}
#renew-dialog .checkout-body>h2{padding-inline-end:30px}#renew-dialog .checkout-body>.eyebrow{padding-inline-end:38px}
.extra-plans>.detail-motion{display:block;padding:0}.detail-motion{min-width:0}.extra-plans .detail-motion>div:not(.renew-options){display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}
@keyframes checkout-in{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes checkout-out{to{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes checkout-footer-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#renew-dialog,#renew-dialog::backdrop,#renew-dialog .checkout-footer{animation:none!important}.dialog-cross svg,.primary,.choose,.ux-button,.device-picker button,.os-picker button,.plan-btn{transition:none!important}.dialog-cross:hover svg{transform:none}}
/* Accordion choreography: expand the space, then bring the controls into it. */
:is(.extra-plans,.promo-panel,#crypto-options,#setup-details,#change-invoice)>summary{display:flex;align-items:center;gap:12px;list-style:none;position:relative;transition:color .22s ease}
:is(.extra-plans,.promo-panel,#crypto-options,#setup-details,#change-invoice)>summary::-webkit-details-marker{display:none}
:is(.extra-plans,.promo-panel,#crypto-options,#setup-details,#change-invoice)>summary::before{content:'';display:block;width:7px;height:7px;flex:0 0 7px;border-inline-end:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-inline:3px 5px;opacity:.65;transition:transform .4s cubic-bezier(.2,.85,.22,1),opacity .2s,color .2s}
:is(.extra-plans,.promo-panel,#crypto-options,#setup-details,#change-invoice)[open]>summary::before{transform:rotate(45deg);opacity:1;color:var(--lime)}
:is(.extra-plans,.promo-panel,#crypto-options,#setup-details,#change-invoice)[data-expanded=false]>summary::before{transform:rotate(-45deg);opacity:.65}
:is(.extra-plans,.promo-panel,#crypto-options,#setup-details,#change-invoice)>summary:hover{color:var(--lime)}
.detail-motion{display:flow-root}.detail-animating{overflow:clip;overflow-anchor:none;box-sizing:border-box}
#renew-dialog .detail-motion{padding-inline-start:14px;border-inline-start:1px solid color-mix(in srgb,var(--lime) 22%,transparent);margin-inline-start:6px}
#renew-dialog .extra-plans>.detail-motion{display:flow-root;padding-inline-start:14px}
@media(prefers-reduced-motion:reduce){:is(.extra-plans,.promo-panel,#crypto-options,#setup-details,#change-invoice)>summary::before{transition:none}}

/* Inline password visibility control; logical spacing also supports Persian. */
.password-field{position:relative;margin-bottom:20px}.cabinet-container .password-field input{margin-bottom:0;padding-inline-end:56px;width:100%;min-width:0}.password-field .password-toggle{position:absolute;z-index:3;inset-inline-end:4px;top:calc(50% - 22px);transform:none;width:44px;height:44px;min-height:44px;padding:10px;margin:0;border:0;background:transparent;color:var(--muted);transition:color .18s ease,background-color .18s ease}.password-field .password-toggle:hover,.password-field .password-toggle[aria-pressed=true]{color:var(--lime);background:var(--bg-card)}.password-toggle svg{width:23px;height:23px;pointer-events:none}.eye-slash{opacity:0;transition:opacity .18s ease}.password-toggle[aria-pressed=true] .eye-slash{opacity:1}@media(prefers-reduced-motion:reduce){.password-field .password-toggle,.eye-slash{transition:none}}

.password-field .password-toggle:active:not(:disabled){transform:none}
