/* Reference-board presentation layer. No auth, prices or business logic. */
body.reference-ui{--bg:#020817;--surface:#071423;--surface2:#0b192d;--border:#17283e;--text:#f4f5ff;--muted:#a5aec3;--purple:#7736fa;--radius:16px;background-color:#020817;background-image:linear-gradient(180deg,rgba(2,8,23,.34),rgba(2,8,23,.78) 55%,rgba(2,8,23,.93)),url('/static/brand/dark-dungeon-cover-v1.webp');background-repeat:no-repeat;background-position:center top,50% 48%;background-size:cover,106% auto;background-attachment:fixed,fixed;color:var(--text);font-size:14px;animation:ashna-cover-drift 28s ease-in-out infinite alternate;min-height:100vh;position:relative;isolation:isolate}
body.reference-ui::before,body.reference-ui::after{content:"";position:fixed;inset:-12%;pointer-events:none;z-index:0}
body.reference-ui::before{background:radial-gradient(circle at 18% 30%,rgba(130,71,255,.28),transparent 24%),radial-gradient(circle at 82% 58%,rgba(45,103,255,.2),transparent 26%);filter:blur(18px);animation:ashna-aura 12s ease-in-out infinite alternate}
body.reference-ui::after{background-image:radial-gradient(circle,rgba(177,141,255,.72) 0 1px,transparent 1.7px),radial-gradient(circle,rgba(72,139,255,.5) 0 1px,transparent 1.6px);background-size:84px 84px,123px 123px;background-position:0 0,35px 24px;opacity:.34;mix-blend-mode:screen;animation:ashna-particles 26s linear infinite}
.reference-ui .site-header,.reference-ui .site-main,.reference-ui .site-footer{position:relative;z-index:1}
.reference-ui .site-header{background:rgba(3,13,29,.78);border-bottom:1px solid rgba(133,99,255,.24);box-shadow:0 12px 40px rgba(0,0,0,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.reference-ui .header-inner{direction:ltr;max-width:1240px;gap:24px;padding:14px 24px;min-height:76px}
.reference-ui .header-inner .brand{font-size:20px;gap:8px}
.reference-ui .header-inner nav{direction:rtl;margin-left:auto;gap:26px;font-size:13px}
.reference-ui .header-inner nav a[aria-current]{text-underline-offset:24px}
.reference-ui .command-open{order:2;min-height:38px;padding:8px;border-color:#1b2d48;background:transparent}
.reference-ui .command-open kbd{display:none}
.reference-ui .account-link{order:3;direction:rtl;font-size:12px;min-height:40px;padding:10px 18px}
.reference-ui .site-main{max-width:1240px;padding:0 28px}
.reference-ui .btn{border-radius:12px;border-color:#443977;background:#061221;min-height:42px;padding:10px 18px;font-weight:650;box-shadow:none}
.reference-ui .btn.primary{background:#7736fa;border:1px solid #965cff;box-shadow:0 4px 16px #6834db29}
.reference-ui .btn:hover{background:#17223a;border-color:#9d79fa;transform:none}
.reference-ui .btn.primary:hover{background:#8a4bff}
.reference-ui .hero{min-height:500px;padding:28px 0 12px;gap:32px}
.reference-ui .hero h1{font-size:clamp(38px,4.2vw,58px);line-height:1.45;letter-spacing:-1.2px}
.reference-ui .hero-copy>p{font-size:16px;max-width:470px;line-height:2}
.reference-ui .hero-art{max-width:510px;justify-self:center}
.reference-ui .hero-art>img{max-height:460px;object-fit:contain}
.reference-ui .hero-globe-scene{width:min(46vw,520px);aspect-ratio:1;position:relative;display:grid;place-items:center;isolation:isolate;overflow:visible;filter:drop-shadow(0 28px 45px rgba(2,8,23,.55))}
.reference-ui .hero-globe{width:82%;height:82%;max-height:none!important;object-fit:contain;position:relative;z-index:2;animation:ashna-globe-float 7s ease-in-out infinite,ashna-globe-pulse 5.5s ease-in-out infinite alternate;will-change:transform,filter}
.reference-ui .globe-halo{position:absolute;inset:14%;z-index:0;border-radius:50%;background:radial-gradient(circle,rgba(64,164,255,.25),rgba(119,54,250,.2) 42%,transparent 72%);filter:blur(15px);animation:ashna-globe-halo 5s ease-in-out infinite alternate}
.reference-ui .globe-ring{position:absolute;z-index:1;inset:20%;border:1px solid rgba(105,190,255,.62);border-radius:50%;box-shadow:0 0 18px rgba(49,151,255,.38),inset 0 0 16px rgba(132,72,255,.24);pointer-events:none}
.reference-ui .globe-ring-one{transform:rotateX(68deg) rotateZ(-12deg) scale(1.19);animation:ashna-ring-one 14s linear infinite}
.reference-ui .globe-ring-two{inset:23%;border-color:rgba(184,92,255,.56);transform:rotateY(67deg) rotateZ(24deg) scale(1.23);animation:ashna-ring-two 17s linear infinite reverse}
.reference-ui .flag-track{position:absolute;inset:7%;z-index:4;border-radius:50%;animation:ashna-flag-orbit 25s linear infinite;pointer-events:none}
.reference-ui .flag-node{--orbit-radius:222px;position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--flag-angle)) translateX(var(--orbit-radius));pointer-events:none}
.reference-ui .orbit-flag{display:flex;align-items:center;gap:7px;direction:rtl;white-space:nowrap;padding:4px;background:transparent;transform:translate(-50%,-50%) rotate(var(--flag-counter));animation:ashna-flag-counter 25s linear infinite;color:#fff;font-size:12px;font-weight:800;text-shadow:0 2px 8px #020817,0 0 10px rgba(45,133,255,.85);pointer-events:auto;cursor:default;transition:filter .2s ease,scale .2s ease}
.reference-ui .flag-track:has(.orbit-flag:hover),.reference-ui .flag-track:has(.orbit-flag:focus-visible){animation-play-state:paused}.reference-ui .flag-track:has(.orbit-flag:hover) .orbit-flag,.reference-ui .flag-track:has(.orbit-flag:focus-visible) .orbit-flag{animation-play-state:paused}
.reference-ui .orbit-flag:hover,.reference-ui .orbit-flag:focus-visible{z-index:8;filter:brightness(1.28) saturate(1.2) drop-shadow(0 0 12px rgba(85,160,255,.9));scale:1.16;outline:2px solid transparent;outline-offset:4px}
.reference-ui .orbit-flag img{width:28px;height:20px;max-width:none!important;flex:0 0 auto;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.reference-ui .hero-note{font-size:11px}
.reference-ui .art-caption{font-size:12px;padding:9px 14px;border-radius:13px;background:#051427e8;box-shadow:none}
.reference-ui .eyebrow{color:#83bfff;letter-spacing:0;font-size:11px}
.reference-ui .section-heading>.eyebrow{display:inline-block;padding:3px 14px;border-radius:20px;background:#0a2037}
.reference-ui .hero .pill{background:#0a2037;border:none;border-radius:22px}
.reference-ui .benefits{padding:18px 0 30px;gap:18px;border-bottom:1px solid #14243b}
.reference-ui .benefits svg{width:28px;height:28px;padding:10px;box-sizing:content-box;background:#0b2441;border-radius:50%;color:#3bb7ff;margin-bottom:0}
.reference-ui .benefits>div:nth-child(2) svg{color:#30d4a7;background:#082d2d}
.reference-ui .benefits>div:nth-child(4) svg{color:#ac64ff;background:#251545}
.reference-ui .benefits b{font-size:14px}.reference-ui .benefits span{font-size:11px}
.reference-ui .section{padding:46px 0 12px}
.reference-ui .section-heading{margin-bottom:26px}
.reference-ui .section-heading h1,.reference-ui .section-heading h2{font-size:32px;font-weight:850;margin:10px 0;line-height:1.5}
.reference-ui .section-heading p{font-size:13px;max-width:640px;margin:auto;line-height:1.9}
.reference-ui .panel{background:linear-gradient(145deg,rgba(9,24,43,.9),rgba(5,14,28,.82));border:1px solid rgba(90,118,162,.3);border-radius:15px;box-shadow:0 18px 52px rgba(0,0,0,.2);padding:24px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.reference-ui .family-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:0 auto 28px}
.reference-ui .family-pills button{font:inherit;font-size:12px;color:#d5dded;border:1px solid #273851;border-radius:30px;background:#03101d;padding:10px 24px;min-height:42px;cursor:pointer}
.reference-ui .family-pills button[aria-pressed=true]{background:#7636f5;border-color:#925cff;color:white}
.reference-ui .family-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;direction:rtl}
.reference-ui .family-card{position:relative;padding:26px 18px 20px;gap:12px;min-height:285px;text-align:center}
.reference-ui .family-card h3{font-size:20px;line-height:1.6;font-weight:800}
.reference-ui .family-card p{font-size:12px;line-height:1.9;min-height:46px;max-width:220px}
.reference-ui .family-card bdi{font-size:10px;overflow-wrap:anywhere;line-height:1.8}
.reference-ui .family-card .btn{font-size:12px;padding:9px 12px;min-height:40px}
.reference-ui .family-card.featured-family{border-color:#8860ff;box-shadow:0 0 0 2px #7951e523;background:#0b1630}
.reference-ui .icon-orb{height:64px;width:64px;border-radius:24px;background:#111c43;color:#8670ff;margin:0 0 3px}
.reference-ui .icon-orb img{object-fit:contain}
.reference-ui .steps{gap:24px;padding:0}.reference-ui .steps article{padding:20px;border:1px solid #17283e;border-radius:14px;background:#061220}
.reference-ui .steps h3{font-size:16px}.reference-ui .steps p{font-size:12px}.reference-ui .step{font-size:23px}
.reference-ui .filters{max-width:1050px;margin:0 auto 26px;border:none;background:#061321;padding:14px 18px;border-radius:16px;gap:14px}
.reference-ui .filters label{font-size:11px}.reference-ui input,.reference-ui select{border-color:#21334e;background:#04101e;font-size:13px;min-height:42px;border-radius:11px}
.reference-ui .plan-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.reference-ui .plan-card{padding:24px 18px 18px;gap:6px;background:#061321;min-width:0}
.reference-ui .plan-card h3{font-size:23px;line-height:1.5}
.reference-ui .plan-card .eyebrow{color:#c5cce0;font-size:12px}
.reference-ui .plan-card .price{font-size:23px;padding:10px 0 15px;border-bottom:1px solid #17283e;color:#f4f5ff}
.reference-ui .features{gap:10px;margin-bottom:12px;padding-top:12px;line-height:1.8;font-size:11px}
.reference-ui .features svg{color:#29d59b;width:15px;height:15px}
.reference-ui .features bdi{white-space:normal;overflow-wrap:anywhere;font-size:10px}
.reference-ui .plan-card .btn{width:100%;font-size:12px}.reference-ui .plan-service-link{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding-top:11px;color:#cfc5ff;font-size:11px;font-weight:700;transition:color .2s ease,transform .2s ease}.reference-ui .plan-service-link svg{width:15px}.reference-ui .plan-service-link:hover,.reference-ui .plan-service-link:focus-visible{color:#fff;transform:translateY(-1px)}
.reference-ui .trials .plan-card{border-color:#324176}
.reference-ui .faq{max-width:900px}.reference-ui .faq details{padding:17px 20px;background:#061321;border:1px solid #17283e;border-radius:12px;margin-bottom:10px}
.reference-ui .faq summary{font-size:14px}.reference-ui .support-banner{margin:42px 0;background:#09152a;border-color:#2c3057;padding:28px}
.reference-ui .support-banner h2{font-size:23px}
.reference-ui .site-footer{padding:28px;gap:24px;max-width:1240px;font-size:11px}.reference-ui .site-footer .brand{font-size:17px}
.reference-ui .page-heading{padding:30px 0 14px}.reference-ui .page-heading h1{font-size:29px;font-weight:850}
.reference-ui .page-heading .eyebrow{font-size:10px}.reference-ui .page-heading p{font-size:12px}
.reference-ui .account-layout{direction:ltr;grid-template-columns:205px minmax(0,1fr);gap:26px;margin:12px 0 48px}
.reference-ui .account-layout>div,.reference-ui .account-nav{direction:rtl}
.reference-ui .account-nav{padding:14px 10px;background:#05111f;border-color:#17283e;min-height:340px}
.reference-ui .account-nav a{font-size:13px;padding:12px;border-radius:9px;display:flex;gap:10px;align-items:center}
.reference-ui .account-nav a[aria-current]{background:#202955;color:#e5ddff}
.reference-ui .account-nav svg{width:17px;height:17px;color:#aab4d1}
.reference-ui .account-nav form{margin-top:auto}
.reference-ui .stat-grid{gap:14px;margin:0 0 24px}
.reference-ui .stat-grid .panel{padding:18px;display:flex;flex-direction:column;gap:4px;background:#0a1729}
.reference-ui .stat-grid b{font-size:23px;font-weight:750}.reference-ui .stat-grid small{font-size:11px}
.reference-ui .service-card{padding:22px;background:#061321;border-color:#192b43}
.reference-ui .service-card h3{font-size:17px}.reference-ui .service-card .badge{font-size:10px;padding:3px 11px}
.reference-ui .service-card progress{height:9px;accent-color:#62d4ae;border-radius:20px;overflow:hidden;direction:ltr}
.reference-ui progress::-webkit-progress-bar{background:#1c2e4b;border-radius:20px}.reference-ui progress::-webkit-progress-value{background:#63d6b1;border-radius:20px}
.reference-ui .service-card p{font-size:12px}.reference-ui .service-card .btn{min-width:110px}
.reference-ui .tabs{width:fit-content;margin:24px auto;padding:5px;gap:4px;border:1px solid #21304b;border-radius:30px;background:#03101e}
.reference-ui .tabs .btn{min-height:39px;border:none;border-radius:24px;background:transparent;font-size:12px;min-width:94px}
.reference-ui .tabs .btn[aria-pressed=true]{background:#7736fa;box-shadow:0 3px 12px #7136ef36}
.reference-ui .guide-grid{direction:ltr;grid-template-columns:210px minmax(0,1fr);gap:20px;margin-bottom:34px}
.reference-ui .guide-grid>*{direction:rtl}.reference-ui .guide-nav{padding:12px;border:1px solid #17283e;border-radius:14px;background:#05111f;align-self:start}
.reference-ui .guide-nav .btn{text-align:right;justify-content:flex-start;min-height:47px;font-size:13px;border:0;background:transparent}
.reference-ui .guide-nav .btn[aria-pressed=true]{background:#242954;color:#e3d8ff}
.reference-ui .guide-body{padding:30px;min-height:350px}.reference-ui .guide-body h2{font-size:24px}.reference-ui .guide-body ol{font-size:14px;line-height:2.4}
.reference-ui .guide-body ol li{padding:6px 0}.reference-ui .guide-body li::marker{color:#a087ff;font-weight:700}
.reference-ui .guide-body .app-asset{float:left;width:78px;height:78px;margin:0 12px 18px}
.reference-ui .connection-check{margin:30px 0}.reference-ui .connection-check h2{font-size:25px}
@media(max-width:1020px){.reference-ui .header-inner nav{gap:14px}.reference-ui .header-inner{gap:14px}.reference-ui .family-grid,.reference-ui .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-ui .hero h1{font-size:42px}.reference-ui .hero{min-height:450px}.reference-ui .hero-copy>p{font-size:14px}.reference-ui .account-layout{grid-template-columns:175px minmax(0,1fr)}}
@media(max-width:700px){.reference-ui .header-inner{padding:12px 16px;min-height:65px;gap:9px}.reference-ui .header-inner .brand{font-size:17px}.reference-ui .header-inner nav{margin:0}.reference-ui .header-inner .menu-toggle{order:2;margin:0;margin-left:auto}.reference-ui .command-open{display:none}.reference-ui .account-link{font-size:11px;padding:9px 12px;min-height:40px}.reference-ui .site-main{padding:0 16px}.reference-ui .hero{padding-top:30px;min-height:0}.reference-ui .hero h1{font-size:36px;line-height:1.5}.reference-ui .hero-copy>p{font-size:13px}.reference-ui .hero-art{max-width:350px}.reference-ui .hero-art>img{max-height:330px}.reference-ui .hero-globe-scene{width:min(92vw,350px);margin-top:14px}.reference-ui .flag-node{--orbit-radius:148px}.reference-ui .orbit-flag{padding:5px 7px;border-radius:9px}.reference-ui .orbit-flag b{display:none}.reference-ui .orbit-flag:hover b,.reference-ui .orbit-flag:focus-visible b{display:inline}.reference-ui .orbit-flag img{width:25px;height:17px}.reference-ui .hero-globe-scene .art-caption{bottom:-1%;font-size:10px;min-width:154px}.reference-ui .benefits{grid-template-columns:repeat(2,1fr);padding:14px 0 25px}.reference-ui .benefits b{font-size:12px}.reference-ui .benefits span{font-size:10px}.reference-ui .section{padding-top:32px}.reference-ui .section-heading h1,.reference-ui .section-heading h2{font-size:26px}.reference-ui .section-heading p{font-size:12px}.reference-ui .family-pills{gap:7px;margin-bottom:18px}.reference-ui .family-pills button{padding:9px 12px;font-size:11px;min-height:39px}.reference-ui .family-grid{gap:10px}.reference-ui .family-card{padding:20px 12px 15px;min-height:265px;gap:9px}.reference-ui .family-card h3{font-size:16px}.reference-ui .family-card p{font-size:11px}.reference-ui .family-card .btn{font-size:11px;padding:9px 7px}.reference-ui .icon-orb{width:52px;height:52px}.reference-ui .steps{gap:12px}.reference-ui .steps article{padding:17px}.reference-ui .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.reference-ui .plan-card{padding:18px 12px 14px}.reference-ui .plan-card h3{font-size:21px}.reference-ui .plan-card .price{font-size:19px}.reference-ui .plan-card .eyebrow{font-size:10px}.reference-ui .features{font-size:10px;gap:8px}.reference-ui .plan-card .btn{font-size:11px;padding:10px 6px}.reference-ui .plan-service-link{font-size:10px}.reference-ui .filters{padding:12px;gap:10px}.reference-ui .account-layout{display:flex;flex-direction:column;gap:16px}.reference-ui .account-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-height:0;width:100%;padding:8px}.reference-ui .account-nav a{font-size:11px;padding:9px 5px;gap:5px}.reference-ui .account-nav svg{width:15px}.reference-ui .account-nav form{grid-column:1/-1}.reference-ui .stat-grid{gap:10px}.reference-ui .stat-grid .panel{padding:15px}.reference-ui .service-card{padding:17px}.reference-ui .guide-grid{grid-template-columns:1fr}.reference-ui .guide-nav{display:flex;padding:6px}.reference-ui .guide-nav .btn{justify-content:center;font-size:12px}.reference-ui .guide-body{padding:22px}.reference-ui .guide-body h2{font-size:21px}.reference-ui .guide-body .app-asset{width:50px;height:50px}.reference-ui .tabs{width:100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start}.reference-ui .tabs .btn{min-width:74px;padding:9px;font-size:11px}.reference-ui .support-banner{padding:22px}.reference-ui .site-footer{padding:24px 16px}.reference-ui .connection-check h2{font-size:22px}}
.reference-ui .family-grid:has(> [hidden]){grid-template-columns:minmax(0,360px);justify-content:center}
.reference-ui [data-family="gaming_config"],.reference-ui [data-family-key="gaming_config"]{--plan-accent:#56a6ff;--plan-tint:#10223a}
.reference-ui [data-family="cod_special"],.reference-ui [data-family-key="cod_special"]{--plan-accent:#faab58;--plan-tint:#2a201e}
.reference-ui [data-family="web_browsing"],.reference-ui [data-family-key="web_browsing"]{--plan-accent:#35d5bb;--plan-tint:#0b292b}
.reference-ui [data-family="wireguard_multi"],.reference-ui [data-family-key="wireguard_multi"]{--plan-accent:#ab83ff;--plan-tint:#211935}
.reference-ui .plan-card,.reference-ui .family-card{border-top:3px solid var(--plan-accent,#ab83ff);background:linear-gradient(160deg,var(--plan-tint,#111d32),#071421 62%)}
.reference-ui .plan-card .eyebrow,.reference-ui .family-card .icon-orb{color:var(--plan-accent,#ab83ff)}
.reference-ui .plan-card .btn{border-color:var(--plan-accent,#ab83ff);color:var(--plan-accent,#ab83ff)}
.reference-ui .plan-card .btn.primary{color:white}
.reference-ui .features .plan-countries{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.reference-ui .country-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 6px;border:1px solid #294055;border-radius:7px;color:#dce5f4;font-size:11px;background:#081423}
.reference-ui .country-badge img{width:24px;height:18px;object-fit:cover;border-radius:3px;flex-shrink:0}
@media(max-width:370px){.reference-ui .plan-grid{grid-template-columns:1fr}.reference-ui .family-card h3{font-size:14px}}
@keyframes ashna-cover-drift{0%{background-position:center top,47% 46%;background-size:cover,106% auto}50%{background-position:center top,51% 51%;background-size:cover,112% auto}100%{background-position:center top,54% 47%;background-size:cover,108% auto}}
@keyframes ashna-aura{0%{transform:translate3d(-2%,-1%,0) scale(.96);opacity:.55}100%{transform:translate3d(3%,2%,0) scale(1.08);opacity:1}}
@keyframes ashna-particles{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-84px,-123px,0)}}
@keyframes ashna-globe-float{0%,100%{transform:translate3d(0,-4px,0) rotate(-1deg)}50%{transform:translate3d(0,9px,0) rotate(1.2deg)}}
@keyframes ashna-globe-pulse{0%{filter:drop-shadow(0 0 12px rgba(52,154,255,.24))}100%{filter:drop-shadow(0 0 30px rgba(126,62,255,.48))}}
@keyframes ashna-globe-halo{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1.1);opacity:1}}
@keyframes ashna-ring-one{to{transform:rotateX(68deg) rotateZ(348deg) scale(1.19)}}
@keyframes ashna-ring-two{to{transform:rotateY(67deg) rotateZ(384deg) scale(1.23)}}
@keyframes ashna-flag-orbit{to{transform:rotate(360deg)}}
@keyframes ashna-flag-counter{to{transform:translate(-50%,-50%) rotate(var(--flag-turn))}}
@media(max-width:700px){body.reference-ui{background:#020817;animation:none!important}body.reference-ui::before{position:fixed;inset:0;background-image:linear-gradient(180deg,rgba(2,8,23,.42),rgba(2,8,23,.82) 58%,rgba(2,8,23,.96)),url('/static/brand/dark-dungeon-cover-v1.webp');background-repeat:no-repeat;background-position:center top;background-size:cover;filter:none;animation:none!important;transform:none;opacity:1}body.reference-ui::after{display:none}.reference-ui .site-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(3,13,29,.94)}.reference-ui .hero-globe-scene{filter:none}.reference-ui .hero-globe{animation:ashna-globe-float 8s ease-in-out infinite;will-change:transform}.reference-ui .globe-halo{filter:blur(8px);animation:none}.reference-ui .globe-ring{animation:none}.reference-ui .flag-track,.reference-ui .orbit-flag{animation-duration:32s}}
@media(prefers-reduced-motion:reduce){body.reference-ui,body.reference-ui::before,body.reference-ui::after,.reference-ui .hero-globe,.reference-ui .globe-halo,.reference-ui .globe-ring,.reference-ui .flag-track,.reference-ui .orbit-flag{animation:none!important}.reference-ui *{scroll-behavior:auto!important}}

/* Gaming identity strip: locally hosted, reviewed game logos. */
.reference-ui .gaming-showcase{position:relative;margin:22px 0 4px;padding:22px;overflow:hidden;border:1px solid rgba(88,129,205,.3);border-radius:20px;background:linear-gradient(135deg,rgba(5,22,43,.94),rgba(19,10,52,.9));box-shadow:0 18px 55px rgba(0,0,0,.24)}
.reference-ui .gaming-showcase-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.reference-ui .gaming-showcase h2{margin:3px 0 2px;font-size:24px}.reference-ui .gaming-showcase p{margin:0;color:var(--muted);font-size:12px}.reference-ui .gaming-live{display:flex;align-items:center;gap:6px;padding:8px 11px;border:1px solid rgba(54,220,163,.28);border-radius:99px;background:rgba(20,135,100,.15);color:#45e4ad;font-size:10px;white-space:nowrap}.reference-ui .gaming-live svg{width:15px}
.reference-ui .gaming-marquee{overflow:hidden;direction:ltr;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.reference-ui .gaming-track{display:flex;width:max-content;gap:10px;animation:ashna-game-scroll 34s linear infinite}.reference-ui .gaming-marquee:hover .gaming-track,.reference-ui .gaming-marquee:focus-within .gaming-track{animation-play-state:paused}
.reference-ui .game-tile{position:relative;display:grid;grid-template-columns:74px 1fr 24px;align-items:center;gap:10px;width:258px;min-height:86px;padding:8px;border:1px solid rgba(112,132,181,.28);border-radius:15px;overflow:hidden;background:#071525;color:#fff;transition:transform .2s,border-color .2s,box-shadow .2s;cursor:default}.reference-ui .game-tile:hover,.reference-ui .game-tile:focus-visible{z-index:2;transform:translateY(-3px) scale(1.025);border-color:#8c69ff;box-shadow:0 15px 35px rgba(58,34,159,.3);outline:none}.reference-ui .game-art{display:flex;align-items:center;justify-content:center;width:74px;height:68px;padding:10px;border:1px solid rgba(123,151,210,.22);border-radius:11px;background:radial-gradient(circle at 50% 35%,rgba(91,67,210,.32),rgba(4,17,33,.92) 72%);box-shadow:inset 0 0 20px rgba(70,89,168,.16)}.reference-ui .game-logo{display:block;width:100%;height:100%;object-fit:contain;transition:transform .2s ease,filter .2s ease}.reference-ui .game-tile:hover .game-logo,.reference-ui .game-tile:focus-visible .game-logo{transform:scale(1.08)}.reference-ui .logo-call-of-duty,.reference-ui .logo-ea-fc,.reference-ui .logo-apex-legends{filter:brightness(0) invert(1)}.reference-ui .logo-valorant{filter:brightness(0) saturate(100%) invert(39%) sepia(96%) saturate(2220%) hue-rotate(329deg) brightness(105%) contrast(96%)}.reference-ui .game-tile b{display:block;font-size:13px}.reference-ui .game-tile small{display:block;margin-top:5px;color:#82aaf3;font-size:10px;direction:rtl}.reference-ui .game-tile>svg{width:20px;color:#9d7bff}.reference-ui .gaming-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px!important;font-size:10px!important}.reference-ui .gaming-hint svg{width:13px}@keyframes ashna-game-scroll{to{transform:translateX(-50%)}}
@media(max-width:700px){.reference-ui .gaming-showcase{margin:14px 0 0;padding:16px 12px;border-radius:17px}.reference-ui .gaming-showcase-head{align-items:flex-start}.reference-ui .gaming-showcase h2{font-size:20px}.reference-ui .gaming-showcase-head p{font-size:10px;line-height:1.8}.reference-ui .gaming-live{padding:6px 8px;font-size:8px}.reference-ui .gaming-track{animation-duration:42s}.reference-ui .game-tile{grid-template-columns:58px 1fr 20px;width:218px;min-height:72px}.reference-ui .game-art{width:58px;height:56px}.reference-ui .game-tile b{font-size:12px}.reference-ui .game-tile small{font-size:9px}.reference-ui .gaming-hint{display:none}}
@media(prefers-reduced-motion:reduce){.reference-ui .gaming-track{animation:none!important}}

/* Telegram login */
body.reference-ui.auth-page{display:grid;place-items:center;min-height:100vh;padding:24px}.reference-ui .telegram-login-shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);width:min(1080px,100%);min-height:610px;overflow:hidden;border:1px solid rgba(107,137,199,.28);border-radius:28px;background:rgba(3,13,28,.93);box-shadow:0 35px 100px rgba(0,0,0,.48)}.reference-ui .telegram-login-card{display:flex;flex-direction:column;padding:42px}.reference-ui .login-brand{display:flex;align-items:center;gap:12px;direction:ltr}.reference-ui .login-brand img{filter:drop-shadow(0 0 14px rgba(112,71,255,.45))}.reference-ui .login-brand b{display:block;font-size:20px}.reference-ui .login-brand span{display:block;color:#7790ac;font-size:10px;direction:rtl}.reference-ui .login-copy{margin-top:46px}.reference-ui .login-kicker{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:99px;background:rgba(38,166,122,.12);color:#43dfa9;font-size:10px}.reference-ui .login-kicker svg{width:14px}.reference-ui .login-copy h1{margin:14px 0 8px;font-size:34px;line-height:1.45}.reference-ui .login-copy p{max-width:510px;margin:0;color:#9aabc1;font-size:13px;line-height:2}.reference-ui .login-actions{display:grid;gap:9px;margin-top:24px}.reference-ui .telegram-login-button,.reference-ui .login-secondary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;border:1px solid #8864ff;border-radius:14px;color:#fff;font:800 13px inherit;text-decoration:none;cursor:pointer}.reference-ui .telegram-login-button{background:linear-gradient(135deg,#347fea,#7b42f5);box-shadow:0 14px 32px rgba(73,76,225,.28)}.reference-ui .telegram-login-button span{flex:1}.reference-ui .telegram-login-button svg,.reference-ui .login-secondary svg{width:18px}.reference-ui .login-secondary{background:#081a2c;color:#cdd9e8}.reference-ui .login-code-panel{display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:center;margin-top:22px;padding:14px 16px;border:1px solid rgba(95,140,207,.3);border-radius:14px;background:#07192b}.reference-ui .login-code-panel span{color:#91a3ba;font-size:10px}.reference-ui .login-code-panel strong{grid-row:1/3;grid-column:2;padding:9px 12px;border-radius:10px;background:#142747;color:#fff;font-size:20px;letter-spacing:.12em}.reference-ui .login-code-panel small{color:#6f849e;font-size:9px}.reference-ui .login-status{display:flex;align-items:center;justify-content:center;gap:7px;margin:13px 0 0;color:#76a6df;font-size:10px}.reference-ui .login-status svg{width:15px;animation:login-spin 1.2s linear infinite}.reference-ui .login-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto;padding-top:28px}.reference-ui .login-trust>span{padding:11px;border:1px solid rgba(67,105,149,.3);border-radius:12px;background:rgba(7,24,42,.72)}.reference-ui .login-trust svg{width:17px;color:#9274ff}.reference-ui .login-trust b,.reference-ui .login-trust small{display:block}.reference-ui .login-trust b{margin-top:7px;font-size:10px}.reference-ui .login-trust small{margin-top:4px;color:#7388a2;font-size:8px;line-height:1.7}.reference-ui .login-restart{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:15px;color:#8296ae;font-size:10px;text-decoration:none}.reference-ui .login-restart svg{width:13px}.reference-ui .login-visual{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:42px;overflow:hidden;background:radial-gradient(circle at 50% 28%,rgba(76,105,255,.25),transparent 35%),linear-gradient(145deg,#061b35,#0c0b2d)}.reference-ui .login-orb{position:absolute;top:28px;left:50%;width:420px;height:420px;transform:translateX(-50%)}.reference-ui .login-orb img{width:100%;height:100%;object-fit:contain;animation:ashna-globe-float 8s ease-in-out infinite}.reference-ui .login-visual>div{position:relative;z-index:1}.reference-ui .login-visual>div>span{color:#67b7ec;font:700 9px system-ui;letter-spacing:.16em}.reference-ui .login-visual h2{margin:7px 0;font-size:33px;line-height:1.45}.reference-ui .login-visual p{margin:0;color:#8fa4bf;font-size:11px;line-height:1.9}@keyframes login-spin{to{transform:rotate(360deg)}}
@media(max-width:780px){body.reference-ui.auth-page{display:block;padding:12px}.reference-ui .telegram-login-shell{display:flex;flex-direction:column;min-height:calc(100svh - 24px);border-radius:22px}.reference-ui .telegram-login-card{order:2;padding:24px 18px}.reference-ui .login-visual{order:1;min-height:210px;padding:22px}.reference-ui .login-orb{top:-82px;width:300px;height:300px}.reference-ui .login-visual h2{font-size:24px}.reference-ui .login-visual p{display:none}.reference-ui .login-copy{margin-top:25px}.reference-ui .login-copy h1{font-size:25px}.reference-ui .login-copy p{font-size:11px}.reference-ui .login-trust{grid-template-columns:1fr;margin-top:22px;padding-top:0}.reference-ui .login-trust>span{display:grid;grid-template-columns:24px 1fr;column-gap:7px}.reference-ui .login-trust svg{grid-row:1/3}.reference-ui .login-trust b{margin:0}.reference-ui .login-trust small{margin:1px 0 0}.reference-ui .login-code-panel{grid-template-columns:1fr}.reference-ui .login-code-panel strong{grid-row:auto;grid-column:auto;text-align:center}.reference-ui .telegram-login-button,.reference-ui .login-secondary{min-height:50px}.reference-ui .login-status{text-align:center;line-height:1.7}}
@media(prefers-reduced-motion:reduce){.reference-ui .login-orb img,.reference-ui .login-status svg{animation:none!important}}
