html{--rail:240px;--studio-edge:#283748;--studio-ice:#a6d8ff}
body{padding-left:var(--rail);background:#090e15}
body::before{background:radial-gradient(ellipse at 90% 0%,#17354a 0,transparent 55%),#090e15}
body .routix-bar{position:fixed;inset:0 auto 0 0;width:var(--rail);max-width:none;height:100dvh;margin:0;padding:32px 18px;box-sizing:border-box;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;gap:38px;border:0;border-right:1px solid var(--studio-edge);border-radius:0;background:#0c121a;z-index:45}
.routix-bar .routix-brand{padding-left:8px}.routix-bar .routix-menu{display:grid;gap:6px;flex:0;overflow:visible}.routix-menu a{display:flex;align-items:center;gap:14px;min-height:44px;padding:0 14px}.routix-menu svg{height:18px;width:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.routix-menu a.active{background:#183146!important;color:#d4ecff;box-shadow:inset 3px 0 #8ccfff!important}.routix-bar .bar-tools{margin-top:auto}.bar-tools aside{inset:auto auto calc(100% + 10px) 0}
body main.container{box-sizing:border-box;width:min(1160px,100%);padding:clamp(24px,4vw,64px);margin:0 auto}
main .section.tab-panel>h2{font-size:clamp(32px,4vw,54px);letter-spacing:-.055em;font-weight:560;margin:0 0 28px}
body main .hero.tab-panel.active{position:relative;isolation:isolate;grid-template-columns:minmax(0,1fr);min-height:min(570px,75vh);border:0;border-left:2px solid #75bdec;border-radius:0;background:linear-gradient(100deg,#101f2d,#0e1b2899);padding:clamp(24px,5vw,72px);margin:0}
.hero .hero-content{max-width:540px}.hero .studio-vpn{display:block;color:#8dc6ed;font-weight:380}.hero .route-art{position:absolute;width:45%;right:0;bottom:0;opacity:.18;z-index:-1}.hero .hero-facts{border:0}
main .section .btn-primary,main .hero .btn-primary,#auth .btn-primary{background:#b5ddfb;color:#081523;border:0;border-radius:6px;box-shadow:none;padding:12px 20px;font-weight:680}
main .section .btn-ghost,main .hero .btn-ghost{border:0;border-bottom:1px solid #658197;background:transparent;border-radius:0;box-shadow:none}
body #plans .plans-grid{display:grid;grid-template-columns:1fr;gap:0;border-block:1px solid #354657}
body #plans .plan-mini{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;align-items:center;gap:18px;min-height:80px;border:0;border-bottom:1px solid #293949;border-radius:0;background:#101b25;padding:18px 22px;box-shadow:none}
#plans .plan-mini>*{margin:0}#plans .plan-mini .plan-badge{display:none}#plans .plan-mini.featured{box-shadow:inset 3px 0 #9bd8ff}#plans .plan-mini .price{font-size:27px}
body #dashboard>.card{display:flex;flex-direction:column;gap:14px;align-items:stretch}
#dashboard .account-pages{display:flex;gap:8px;border-bottom:1px solid #405263}.account-pages button{padding:12px;border:0;color:#a4b2c3;background:transparent}.account-pages [aria-pressed=true]{color:#d5eeff;border-bottom:2px solid #8dd1ff}
.account-overview{display:grid;grid-template-columns:1fr 1fr;gap:14px}.account-overview button{display:flex;justify-content:space-between;align-items:end;min-height:110px;padding:20px;border:1px solid #31485a;border-radius:8px;background:linear-gradient(140deg,#1c3447,#101c27);color:#e9f5ff;font:600 18px Routix}
#dashboard:not([data-view=overview]) .account-overview,#dashboard:not([data-view=devices]) #devices-card,#dashboard:not([data-view=settings]) :is(#security-card,#account-link-card){display:none!important}
#dashboard:has(#logout[style*="none"]) :is(.account-pages,.account-overview){display:none}
.subscription-stage .sub-panel{background:#0d1822;border:1px solid #324756;border-radius:10px;padding:clamp(16px,3vw,38px)}
.subscription-stage .sub-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:26px 0}.subscription-stage .sub-metric{border:0;border-left:2px solid #5f96bb;border-radius:0;background:transparent}.sub-login{display:none}.subscription-stage:has(#subscription-card[style*="none"]) .sub-login{display:block}
body #purchases .card,.payment-lookup .card{border:0;border-radius:0;border-top:1px solid #395367;background:#101a24;box-shadow:none}
#purchases .purchase-card{border:0;border-bottom:1px solid #33414e;border-radius:0;background:transparent}
#auth .auth-frame{display:grid;grid-template-columns:minmax(150px,.65fr) minmax(260px,1fr);border:1px solid #334656;border-radius:12px;overflow:hidden;background:#0b131d}
.auth-brand{display:grid;align-content:center;justify-items:center;gap:18px;background:radial-gradient(ellipse at center,#234259,#101b28 75%);font-size:23px}.auth-brand img{border-radius:18px}#auth .auth-frame .auth-shell{width:100%;margin:0}#auth .auth-frame .card{background:transparent;border:0;box-shadow:none}
@media(prefers-reduced-motion:no-preference){main .tab-panel.active{animation:studio-page .28s ease-out both}.routix-menu a svg,.account-overview span{transition:transform .18s ease}.routix-menu a:hover svg{transform:translateX(3px)}.account-overview button:hover span{transform:translate(2px,-2px)}}
@keyframes studio-page{from{opacity:.5;transform:translateX(7px)}to{opacity:1;transform:none}}
@media(max-width:900px){body{padding-left:0}body .routix-bar{position:sticky;inset:0 0 auto;width:100%;height:auto;display:grid;grid-template-columns:1fr auto;padding:8px 14px;gap:8px;border-right:0;border-bottom:1px solid #344455}.routix-bar .routix-menu{grid-column:1/-1;display:flex;overflow-x:auto;justify-content:flex-start}.routix-menu a{white-space:nowrap;gap:6px;min-height:36px}.routix-bar .bar-tools{margin:0}.bar-tools aside{inset:calc(100% + 8px) 0 auto auto}body main.container{padding:20px 14px}.routix-brand img{width:34px;height:34px}}
@media(max-width:620px){#auth .auth-frame{grid-template-columns:1fr}.auth-brand{display:none}body #plans .plan-mini{grid-template-columns:1fr auto;gap:8px}.subscription-stage .sub-metrics{grid-template-columns:1fr;gap:10px}.account-overview{grid-template-columns:1fr}.hero .route-art{width:75%}}
.studio-footer{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;padding:24px clamp(16px,4vw,64px);border-top:1px solid #263341;background:#0a1018;color:#90a2b4;font:13px Routix,sans-serif}.studio-footer span{margin-right:auto}.studio-footer :is(button,a){color:inherit;background:none;border:0;padding:0;font:inherit;text-decoration:none;cursor:pointer}