:root{color-scheme:dark;--bg:#101019;--surface:#1a1a27;--raised:#222234;--line:#343347;
--text:#f4f2ff;--muted:#aba9bf;--accent:#b69aff;--purple:#8058ee;--good:#91e3bf;--bad:#ffadb4;
font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:16px;line-height:1.55}
[hidden]{display:none!important}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}button:disabled{cursor:default;opacity:.5}a{color:var(--accent);text-underline-offset:4px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.layout{max-width:1056px;margin:auto;padding:0 24px}.topbar{height:94px;display:flex;align-items:center;
justify-content:space-between;border-bottom:1px solid var(--line);gap:15px}.brand{display:flex;align-items:center;
gap:11px;font-size:23px;font-weight:760;letter-spacing:-.06em;color:var(--text);text-decoration:none}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;background:var(--purple);border-radius:13px;
font-size:25px;letter-spacing:-.06em}.brand-vpn{color:var(--accent);font-weight:450}.button{display:inline-flex;
justify-content:center;align-items:center;gap:9px;border:1px solid transparent;border-radius:13px;
min-height:48px;padding:12px 20px;font-weight:660;text-decoration:none;line-height:1.3;text-align:center}
.primary{background:var(--purple);color:white}.primary:hover{background:#9069f6}.secondary{background:
var(--raised);border-color:var(--line);color:var(--text)}.secondary:hover{border-color:var(--muted)}
.ghost{background:transparent;border-color:var(--line);color:var(--text)}.danger{background:#442530;
color:var(--bad);border-color:#663342}.small{font-size:13px}.button.small{padding:8px 13px;min-height:38px}
main{min-height:64vh;padding:38px 0 24px}.page-heading{margin-bottom:28px}.page-heading h1{font-size:
clamp(29px,4vw,42px);line-height:1.18;letter-spacing:-.04em;margin:7px 0 12px;overflow-wrap:anywhere}
h2{font-size:21px;line-height:1.3;letter-spacing:-.02em;margin:0 0 10px}h3{font-size:18px;margin:0 0 8px}
p{margin:0 0 12px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-weight:700;font-size:11px;
color:var(--accent)}.muted{color:var(--muted)}.lead{max-width:600px;font-size:17px}.small{font-size:13px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px}.hero-card{
background:linear-gradient(135deg,#302146,#1d1b30 66%);border-color:#554276;position:relative;overflow:hidden}
.hero-top{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:22px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;background:#193f36;
color:var(--good);font-size:12px;font-weight:650}.pill::before{content:"";width:6px;height:6px;border-radius:50%;
background:currentColor}.pill.warning{color:#f3d196;background:#42331e}.pill.inactive{color:var(--muted);
background:var(--raised)}.hero-plan{font-size:29px;font-weight:720;letter-spacing:-.035em;margin:0}
.days{font-size:48px;font-weight:750;line-height:1.1;letter-spacing:-.055em;margin:0 0 7px}.days span{
font-size:19px;letter-spacing:0;color:#c9bcdf;font-weight:480}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;
margin-top:22px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.stats-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 26px}.stat{border:1px solid
var(--line);background:var(--surface);border-radius:18px;padding:20px}.stat strong{display:block;font-size:24px;
line-height:1.3;margin:3px 0 8px;overflow-wrap:anywhere}.stat p:last-child{margin-bottom:0}.section{margin-top:28px}
.section-heading{display:flex;justify-content:space-between;gap:15px;align-items:baseline;margin-bottom:14px}
.section-heading h2{margin:0}.section-heading p{margin:0;font-size:13px}.notice{background:#242133;border:1px
solid #484054;border-radius:14px;padding:15px 18px;color:#d5cde8;margin:18px 0;font-size:14px}.notice.warning{
border-color:#786039;background:#31291f;color:#ead6b3}.notice.error{background:#35212a;color:var(--bad);border-color:#613a47}
.row{display:flex;align-items:center;justify-content:space-between;gap:15px}.stack{display:flex;flex-direction:
column;gap:12px}.text-link{font-size:14px}.progress{display:block;width:100%;height:7px;margin:17px 0 12px;
border:0;border-radius:8px;overflow:hidden;background:#323045;accent-color:var(--accent)}.progress::-webkit-progress-bar{
background:#323045}.progress::-webkit-progress-value{background:var(--accent);border-radius:8px}.empty{text-align:center;
padding:40px 24px}.empty .symbol{display:grid;place-items:center;margin:0 auto 18px;width:64px;height:64px;
border-radius:22px;background:var(--raised);color:var(--accent);font-size:29px}.empty p{max-width:440px;margin:12px auto 24px}
.device{display:flex;align-items:center;gap:15px;padding:18px 0;border-bottom:1px solid var(--line)}.device:first-child{
padding-top:0}.device:last-child{border-bottom:0;padding-bottom:0}.device-icon{display:grid;place-items:center;width:43px;
height:43px;flex:0 0 43px;border-radius:13px;background:#302842;color:var(--accent);font-size:23px}.device-info{flex:1;
min-width:0}.device-info h3{font-size:15px;margin:0 0 3px;overflow-wrap:anywhere}.device-info p{font-size:12px;margin:0}
.plan-price{font-size:31px;font-weight:730;letter-spacing:-.035em;margin:14px 0}.plan-price small{font-weight:450;
font-size:14px;letter-spacing:0;color:var(--muted)}.plan-details{min-height:70px}.plan-details p{font-size:14px;margin-bottom:5px}
.card .full{width:100%}.period-option{display:flex;align-items:center;gap:12px;background:var(--raised);border:1px solid
var(--line);border-radius:12px;padding:13px}.period-option:has(input:checked){border-color:var(--accent);background:#332746}
.period-option input{accent-color:var(--purple);width:18px;height:18px}.period-option span{flex:1}.period-option strong{
white-space:nowrap}.sum{font-size:25px;font-weight:750;margin:18px 0}.login-card{max-width:600px;margin:25px auto 0;
padding:32px}.login-card .symbol{font-size:30px;color:var(--accent);margin-bottom:18px}.login-card h1{font-size:34px;
line-height:1.16;letter-spacing:-.04em;margin:0 0 16px}.login-card .button{width:100%;margin-top:16px}.code-field{display:
block;width:100%;letter-spacing:.35em;text-align:center;font-weight:750;font-size:34px;padding:16px;background:#101019;
color:var(--text);border:1px solid var(--line);border-radius:13px;margin:16px 0;font-variant-numeric:tabular-nums}
.login-status{font-size:14px;color:var(--muted);margin-top:20px;text-align:center}.help-links{display:flex;flex-wrap:wrap;
gap:10px 22px}.help-links a{font-size:14px}.loading{text-align:center;padding:80px 20px;color:var(--muted)}.spinner{
display:inline-block;width:27px;height:27px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;
animation:spin .9s linear infinite;margin-bottom:15px}@keyframes spin{to{transform:rotate(360deg)}}
.bottom-nav{display:flex;gap:5px;padding:8px;background:rgba(25,25,38,.97);border:1px solid var(--line);border-radius:18px;
position:fixed;bottom:24px;left:50%;transform:translateX(-50%);width:430px;z-index:10;box-shadow:0 12px 40px #0005}
.bottom-nav button{flex:1;display:flex;gap:4px;align-items:center;flex-direction:column;border:0;background:transparent;
color:var(--muted);font-size:11px;min-height:49px;border-radius:12px;padding:5px}.bottom-nav button span{font-size:20px;
line-height:22px}.bottom-nav button[aria-current=page]{background:#332745;color:#c5aaff}.app-footer{display:flex;
justify-content:center;gap:18px;padding:25px 0 130px;flex-wrap:wrap}.app-footer a{font-size:12px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:112px;transform:translateX(-50%);max-width:min(90vw,480px);background:#e7def8;
color:#21182e;padding:13px 19px;border-radius:13px;box-shadow:0 5px 35px #0008;z-index:60;font-size:14px}
dialog{border:1px solid var(--line);border-radius:23px;padding:27px;background:var(--surface);color:var(--text);
width:min(94vw,530px);max-height:90dvh;overflow:auto;box-shadow:0 25px 100px #0007}dialog::backdrop{background:#080810bf;
backdrop-filter:blur(5px)}dialog h2{font-size:24px;margin-bottom:18px}.modal-actions{display:flex;gap:10px;flex-wrap:wrap;
margin-top:22px}.modal-actions>*{flex:1}.secret-field{display:block;width:100%;background:#101019;color:var(--text);
border:1px solid var(--line);padding:12px;border-radius:10px;font-family:ui-monospace,monospace;font-size:12px}
.step-list{padding-left:22px}.step-list li{margin-bottom:13px}.offline{background:#493c21;color:#f3dfa5;border-radius:
12px;padding:10px 15px;font-size:13px;margin-top:16px}.skip-link{position:fixed;top:-100px;left:20px;background:var(--purple);
color:white;padding:10px;z-index:100}.skip-link:focus{top:10px}.noscript{padding:20px;text-align:center}
@media(max-width:680px){.layout{padding:0 18px}.topbar{height:78px}.brand{font-size:21px}.brand-mark{width:34px;height:34px;
font-size:23px;border-radius:11px}main{padding-top:28px}.page-heading{margin-bottom:22px}.page-heading h1{font-size:32px}
.card{padding:21px;border-radius:19px}.grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px}.stats-grid>.stat:last-child{grid-column:1/-1}.stat{padding:17px}.stat strong{font-size:21px}.hero-plan{font-size:24px}
.days{font-size:42px}.hero-actions{gap:10px}.hero-actions>*{flex:1;padding-left:10px;padding-right:10px}.pill{font-size:11px}
.bottom-nav{width:calc(100% - 24px);bottom:max(12px,env(safe-area-inset-bottom));padding:6px;border-radius:17px}
.app-footer{padding-bottom:110px}.login-card{padding:25px 21px;margin-top:8px}.login-card h1{font-size:31px}
.device{gap:10px}.device .button{font-size:12px;padding:8px 10px;min-height:36px}.section-heading{flex-wrap:wrap;gap:4px}
.modal-actions{flex-direction:column}.modal-actions>*{width:100%}.toast{bottom:98px}.row.wrap{flex-wrap:wrap}.lead{font-size:16px}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}

.login-card > .button + p{margin-top:18px}

.days span{margin-left:8px}

.credential-form{display:flex;flex-direction:column;gap:14px;margin:24px 0 12px}.form-field{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600}.form-input{width:100%;min-width:0;min-height:48px;border:1px solid var(--line);border-radius:12px;background:#101019;color:var(--text);padding:12px;font-size:16px}.field-hint{margin:-7px 0 0}.credential-form .button,.auth-links .button{margin-top:0}.auth-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.auth-links>*{flex:1;min-width:130px}.auth-separator{text-align:center;margin:24px 0 -4px}.auth-footer{margin-top:25px}.check-field{display:flex;align-items:flex-start;gap:10px;margin:20px 0;font-size:14px}.check-field input{width:20px;height:20px;flex:0 0 20px;accent-color:var(--purple)}.recovery-code{margin:20px 0 12px;font-size:14px}.account-details{overflow-wrap:anywhere}.account-details .button{align-self:flex-start}.account-details .credential-form{width:100%;max-width:530px}.link-code{max-width:360px}.form-field textarea{resize:vertical;min-height:100px}