*{
box-sizing:border-box;
-webkit-tap-highlight-color:transparent
}

:root{
--bg:#07050d;
--surface:rgba(255,255,255,.065);
--border:rgba(255,255,255,.105);
--text:#f8f6ff;
--muted:#898391;
--dim:#625c69;
--blue:#45c8ff;
--purple:#7955ff;
--pink:#cb31ff;
--green:#42d79a
}

html{
background:var(--bg)
}

body{
margin:0;
min-width:320px;
min-height:100vh;
overflow-x:hidden;
color:var(--text);
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
background:
radial-gradient(circle at 10% -10%,rgba(125,42,193,.24),transparent 31%),
radial-gradient(circle at 100% 22%,rgba(0,132,255,.15),transparent 30%),
linear-gradient(180deg,#090511,#07050d 58%,#08060e)
}

button,
input,
select{
font:inherit
}

button{
cursor:pointer
}

svg{
width:22px;
height:22px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round
}

.bg-orb{
position:fixed;
border-radius:999px;
filter:blur(110px);
pointer-events:none
}

.bg-a{
width:360px;
height:360px;
top:-180px;
left:-180px;
background:#9e21ff;
opacity:.14
}

.bg-b{
width:340px;
height:340px;
right:-200px;
top:27%;
background:#008dff;
opacity:.11
}

.bg-c{
width:330px;
height:330px;
left:-200px;
bottom:-170px;
background:#9d20ff;
opacity:.09
}

.shell{
position:relative;
z-index:1;
width:min(100%,620px);
min-height:100vh;
margin:auto;
padding:
max(20px,env(safe-area-inset-top))
20px
115px
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:28px
}

.brand{
display:flex;
align-items:center;
gap:11px
}

.brand-mark{
width:50px;
height:50px;
border-radius:16px;
display:grid;
place-items:center;
font-weight:900;
font-size:17px;
background:
linear-gradient(135deg,var(--blue),var(--purple),var(--pink));
box-shadow:0 12px 32px rgba(112,72,255,.23)
}

.brand>div:last-child{
display:flex;
flex-direction:column
}

.brand strong{
font-size:20px;
letter-spacing:-.7px
}

.brand span{
font-size:8px;
letter-spacing:1.6px;
font-weight:800;
color:#85808c
}

.top-actions{
display:flex;
gap:8px
}

.icon-button{
width:44px;
height:44px;
border-radius:14px;
display:grid;
place-items:center;
border:1px solid var(--border);
background:rgba(255,255,255,.045);
color:#9d96a5
}

.icon-button svg{
width:18px
}

.glass{
position:relative;
background:
linear-gradient(
135deg,
rgba(255,255,255,.087),
rgba(255,255,255,.025)
);
border:1px solid var(--border);
box-shadow:
inset 0 1px rgba(255,255,255,.07),
0 20px 55px rgba(0,0,0,.19);
backdrop-filter:blur(28px) saturate(140%);
-webkit-backdrop-filter:blur(28px) saturate(140%)
}

.glass::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:
linear-gradient(115deg,rgba(255,255,255,.05),transparent 25%,transparent 72%)
}

#mainContent{
width:100%
}

.page{
display:none;
width:100%;
min-height:0;
padding:0;
margin:0
}

.page.active{
display:block;
animation:pageEnter .35s cubic-bezier(.2,.8,.2,1)
}

@keyframes pageEnter{
from{
opacity:0;
transform:translateY(10px);
filter:blur(2px)
}
to{
opacity:1;
transform:none;
filter:none
}
}

.page-intro{
margin:0 3px 22px
}

.kicker{
font-size:9px;
letter-spacing:1.7px;
font-weight:800;
color:#787180
}

.page-intro h1{
font-size:36px;
line-height:1.02;
letter-spacing:-2px;
margin:7px 0 9px
}

.page-intro h1 span{
background:
linear-gradient(90deg,var(--blue),#9861ff,var(--pink));
-webkit-background-clip:text;
background-clip:text;
color:transparent
}

.page-intro p{
margin:0;
max-width:430px;
font-size:11px;
line-height:1.6;
color:#827c88
}

.hero{
border-radius:29px;
padding:23px;
overflow:hidden
}

.hero-top{
display:flex;
justify-content:space-between;
gap:15px
}

.status{
display:inline-flex;
align-items:center;
gap:7px;
padding:7px 10px;
border-radius:99px;
font-size:8px;
letter-spacing:1px;
font-weight:800;
color:#9992a1;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06)
}

.status i,
.live i{
width:6px;
height:6px;
border-radius:99px;
background:var(--green);
box-shadow:0 0 12px var(--green)
}

.hero h2{
font-size:27px;
letter-spacing:-1px;
margin:14px 0 6px
}

.hero p{
margin:0;
max-width:320px;
font-size:10px;
line-height:1.55;
color:#7f7985
}

.power-ring{
flex:0 0 100px;
width:100px;
height:100px;
padding:2px;
border-radius:999px;
background:
linear-gradient(145deg,var(--blue),var(--purple),var(--pink))
}

.power-ring>div{
width:100%;
height:100%;
border-radius:inherit;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
background:#0c0812
}

.power-ring svg{
width:28px;
height:28px;
color:#bba3ff
}

.power-ring span{
font-size:8px;
letter-spacing:1.2px;
font-weight:800;
color:#897a9c
}

.primary{
width:100%;
border:0;
border-radius:17px;
padding:15px;
margin-top:20px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
color:white;
font-size:10px;
font-weight:900;
letter-spacing:.7px;
background:
linear-gradient(100deg,#4388ff,#7956ff,#b83df3);
box-shadow:0 15px 35px rgba(103,72,255,.2)
}

.primary svg{
width:17px
}

.primary.small{
width:auto;
margin:0;
padding:12px 16px
}

.section-head{
display:flex;
justify-content:space-between;
align-items:flex-end;
margin:28px 3px 13px
}

.section-head span{
font-size:8px;
font-weight:800;
letter-spacing:1.6px;
color:#68616f
}

.section-head h3{
font-size:18px;
margin:3px 0 0
}

.live{
display:flex;
align-items:center;
gap:6px;
font-size:8px;
color:#76707c
}

.stats-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px
}

.stat{
border-radius:21px;
padding:16px
}

.stat>span{
font-size:7px;
font-weight:800;
letter-spacing:1.2px;
color:#68616e
}

.stat>strong{
display:block;
font-size:20px;
letter-spacing:-.8px;
margin-top:9px
}

.stat>small{
font-size:8px;
color:#66606c
}

.tool-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:11px
}

.tool{
border-radius:20px;
padding:14px;
display:flex;
align-items:center;
gap:11px;
text-align:left;
color:white
}

.tool-icon{
width:39px;
height:39px;
flex:0 0 39px;
border-radius:12px;
display:grid;
place-items:center;
background:
linear-gradient(135deg,rgba(64,192,255,.1),rgba(142,80,255,.12));
color:#ba9eff
}

.tool-icon svg{
width:17px
}

.tool strong{
display:block;
font-size:10px
}

.tool span{
display:block;
font-size:8px;
color:#6c6572;
margin-top:2px
}

.games-toolbar{
display:grid;
grid-template-columns:1fr auto;
gap:10px
}

.search{
height:52px;
border-radius:17px;
display:flex;
align-items:center;
gap:10px;
padding:0 14px
}

.search svg{
width:17px;
color:#6a6370
}

.search input{
width:100%;
border:0;
outline:0;
background:transparent;
color:white;
font-size:10px
}

.search input::placeholder{
color:#56505c
}

.add-button{
border:0;
border-radius:15px;
padding:0 15px;
display:flex;
align-items:center;
gap:7px;
color:white;
font-size:9px;
font-weight:800;
background:
linear-gradient(100deg,#4d83ff,#8255ff,#ac43ef)
}

.add-button svg{
width:14px
}

.game-count{
margin:22px 3px 12px;
display:flex;
justify-content:space-between;
align-items:end
}

.game-count strong{
font-size:17px
}

.game-count span{
font-size:8px;
color:#68616e
}

.game-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:11px
}

.game-card{
border-radius:22px;
overflow:hidden
}

.game-cover{
height:140px;
background-size:cover;
background-position:center;
position:relative
}

.game-cover.generated{
display:grid;
place-items:center;
background:
radial-gradient(circle at 20% 15%,rgba(67,200,255,.2),transparent 35%),
radial-gradient(circle at 85% 90%,rgba(203,49,255,.2),transparent 40%),
linear-gradient(135deg,#171020,#0d0a12)
}

.game-letter{
width:62px;
height:62px;
border-radius:19px;
display:grid;
place-items:center;
background:rgba(255,255,255,.065);
border:1px solid rgba(255,255,255,.08);
font-size:26px;
font-weight:900
}

.game-body{
padding:12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px
}

.game-body>div{
min-width:0
}

.game-body strong{
display:block;
font-size:10px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

.game-body span{
display:block;
font-size:7px;
color:#68616e;
margin-top:2px
}

.game-actions{
display:flex;
gap:5px
}

.mini-button{
width:31px;
height:31px;
padding:0;
border-radius:10px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.08);
background:rgba(122,82,255,.08);
color:#aa92d9
}

.mini-button svg{
width:12px
}

.empty{
display:none;
border-radius:24px;
min-height:300px;
padding:40px 20px;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center
}

.empty.show{
display:flex
}

.empty-icon{
width:72px;
height:72px;
border-radius:22px;
display:grid;
place-items:center;
background:
linear-gradient(135deg,rgba(64,190,255,.08),rgba(144,79,255,.12));
color:#baa1ff;
margin-bottom:16px
}

.empty-icon svg{
width:30px
}

.empty h3{
margin:0 0 6px;
font-size:16px
}

.empty p{
margin:0 0 17px;
max-width:270px;
font-size:9px;
line-height:1.55;
color:#6e6874
}

.ping-panel{
border-radius:29px;
padding:24px;
text-align:center
}

.ping-ring{
width:170px;
height:170px;
padding:2px;
margin:3px auto 17px;
border-radius:999px;
background:
conic-gradient(var(--blue),var(--purple),var(--pink),var(--blue))
}

.ping-ring>div{
width:100%;
height:100%;
border-radius:inherit;
display:flex;
align-items:center;
justify-content:center;
background:#0b0711
}

.ping-ring strong{
font-size:48px;
letter-spacing:-3px
}

.ping-ring span{
font-size:10px;
margin-left:5px;
color:#6e6775
}

.ping-panel h3{
margin:0 0 5px;
font-size:15px
}

.ping-panel p{
margin:0;
font-size:9px;
color:#6f6874
}

.network-stats{
margin-top:11px
}

.server-list,
.metric-list,
.settings-list{
display:flex;
flex-direction:column;
gap:9px
}

.server{
border-radius:19px;
padding:14px;
display:flex;
align-items:center;
justify-content:space-between
}

.server strong{
display:block;
font-size:10px
}

.server span{
font-size:8px;
color:#68616e
}

.server b{
font-size:10px;
color:#bea6ff
}

.score{
border-radius:24px;
padding:20px;
display:flex;
justify-content:space-between;
align-items:center
}

.score>div:first-child{
display:flex;
align-items:baseline;
gap:5px
}

.score span{
font-size:8px;
letter-spacing:1.2px;
font-weight:800;
color:#696270
}

.score strong{
font-size:44px;
letter-spacing:-2px;
margin-left:8px
}

.score small{
font-size:9px;
color:#68616e
}

.score-badge{
width:69px;
height:69px;
border-radius:99px;
display:grid;
place-items:center;
font-size:10px;
font-weight:900;
background:
linear-gradient(135deg,var(--blue),var(--purple),var(--pink))
}

.metric-list{
margin-top:11px
}

.metric{
border-radius:20px;
padding:15px
}

.metric-row{
display:flex;
justify-content:space-between
}

.metric-row span{
font-size:9px;
color:#817a87
}

.metric-row strong{
font-size:11px
}

.bar{
height:5px;
border-radius:99px;
overflow:hidden;
background:rgba(255,255,255,.05);
margin:11px 0 7px
}

.bar i{
display:block;
height:100%;
width:0;
border-radius:inherit;
background:
linear-gradient(90deg,var(--blue),var(--purple),var(--pink));
transition:width .3s ease
}

.metric small{
font-size:7px;
color:#635d69
}

.notice{
border-radius:20px;
padding:15px;
margin-top:12px
}

.notice strong{
font-size:10px
}

.notice p{
font-size:8px;
line-height:1.55;
color:#6e6874;
margin:5px 0 0
}

.setting{
min-height:66px;
border-radius:19px;
padding:13px 14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px
}

.setting strong{
display:block;
font-size:10px
}

.setting span{
display:block;
font-size:8px;
color:#6a6470;
margin-top:2px
}

.setting select{
border:1px solid rgba(255,255,255,.08);
background:#15101b;
color:#b7afbd;
border-radius:10px;
padding:8px;
font-size:8px;
outline:0
}

.button-setting{
width:100%;
color:white;
text-align:left
}

.button-setting svg{
width:17px;
color:#867c8c
}

.switch{
position:relative;
width:42px;
height:24px;
flex:0 0 42px
}

.switch input{
display:none
}

.switch span{
position:absolute;
inset:0;
border-radius:99px;
background:#25212a;
transition:.25s
}

.switch span::before{
content:"";
position:absolute;
width:18px;
height:18px;
left:3px;
top:3px;
border-radius:50%;
background:#77717c;
transition:.25s
}

.switch input:checked+span{
background:
linear-gradient(100deg,#4f73ff,#9950f7)
}

.switch input:checked+span::before{
transform:translateX(18px);
background:white
}

.version{
margin:34px 0 8px;
display:flex;
flex-direction:column;
align-items:center
}

.version>div{
width:44px;
height:44px;
border-radius:14px;
display:grid;
place-items:center;
font-weight:900;
margin-bottom:8px;
background:
linear-gradient(135deg,var(--blue),var(--purple),var(--pink))
}

.version strong{
font-size:10px
}

.version span{
font-size:8px;
color:#5f5965
}

.bottom-nav{
position:fixed;
z-index:100;
left:50%;
bottom:max(12px,env(safe-area-inset-bottom));
transform:translateX(-50%);
width:min(calc(100% - 28px),590px);
height:72px;
padding:7px;
border-radius:24px;
display:grid;
grid-template-columns:repeat(5,1fr)
}

.nav{
border:0;
border-radius:17px;
background:transparent;
color:#615b68;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px
}

.nav svg{
width:18px
}

.nav span{
font-size:7px;
font-weight:800
}

.nav.active{
color:#d0bcff;
background:
linear-gradient(135deg,rgba(54,189,255,.07),rgba(141,77,255,.13))
}

.modal{
position:fixed;
inset:0;
z-index:500;
display:flex;
align-items:flex-end;
justify-content:center;
visibility:hidden;
pointer-events:none
}

.modal.open{
visibility:visible;
pointer-events:auto
}

.modal-bg{
position:absolute;
inset:0;
background:rgba(3,2,7,.48);
backdrop-filter:blur(0);
opacity:0;
transition:.3s
}

.modal.open .modal-bg{
opacity:1;
backdrop-filter:blur(10px)
}

.modal-sheet{
position:relative;
z-index:2;
width:min(calc(100% - 18px),600px);
max-height:calc(100vh - 20px);
overflow:auto;
border-radius:28px 28px 18px 18px;
padding:10px 19px 22px;
transform:translateY(105%);
transition:.4s cubic-bezier(.2,.85,.2,1);
background:
linear-gradient(145deg,rgba(27,19,36,.96),rgba(10,7,15,.96))
}

.modal.open .modal-sheet{
transform:none
}

.modal-handle{
width:40px;
height:4px;
border-radius:99px;
margin:0 auto 17px;
background:rgba(255,255,255,.14)
}

.modal-title{
display:flex;
justify-content:space-between;
align-items:center
}

.modal-title span{
font-size:8px;
letter-spacing:1.4px;
font-weight:800;
color:#746d7b
}

.modal-title h2{
font-size:21px;
margin:4px 0
}

.modal-title button{
width:39px;
height:39px;
border-radius:12px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.04);
color:#918a98
}

.modal-title svg{
width:16px
}

#gameForm{
display:flex;
flex-direction:column;
gap:12px;
margin-top:17px
}

#gameForm label{
display:flex;
flex-direction:column;
gap:7px
}

#gameForm label>span{
font-size:8px;
font-weight:800;
color:#827b88
}

#gameForm input{
height:48px;
border-radius:14px;
border:1px solid rgba(255,255,255,.08);
outline:0;
padding:0 13px;
background:rgba(255,255,255,.035);
color:white;
font-size:10px
}

#gameForm input[type=file]{
padding:12px
}

#gameForm input:focus{
border-color:rgba(133,87,255,.48)
}

.modal-actions{
display:grid;
grid-template-columns:1fr 1.35fr;
gap:9px;
margin-top:7px
}

.secondary{
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
background:rgba(255,255,255,.04);
color:#a39ba9
}

.primary.save{
margin:0
}

.toast{
position:fixed;
z-index:800;
left:50%;
top:22px;
transform:translate(-50%,-80px);
opacity:0;
padding:11px 15px;
border-radius:13px;
background:#17111e;
border:1px solid rgba(255,255,255,.08);
font-size:9px;
font-weight:700;
box-shadow:0 15px 40px rgba(0,0,0,.3);
transition:.3s
}

.toast.show{
transform:translate(-50%,0);
opacity:1
}

button,
.glass{
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease,
background .2s ease
}

button:active{
transform:scale(.965)
}

body.no-animation *{
animation:none!important;
transition:none!important
}

@media(hover:hover){

.tool:hover,
.stat:hover,
.metric:hover,
.server:hover,
.game-card:hover{
transform:translateY(-2px);
border-color:rgba(255,255,255,.15)
}

}

@media(max-width:470px){

.shell{
padding-left:14px;
padding-right:14px
}

.page-intro h1{
font-size:32px
}

.game-grid{
grid-template-columns:1fr
}

.game-cover{
height:180px
}

.power-ring{
width:86px;
height:86px;
flex-basis:86px
}

}

@media(min-width:780px){

body{
padding:28px 0
}

.shell{
border-radius:38px;
border:1px solid rgba(255,255,255,.04);
box-shadow:0 50px 120px rgba(0,0,0,.42)
}

}


/* =========================================
   QX V4 REAL SESSION MODE
========================================= */

#homeFps,
#homePing,
#homeCpu,
#homeRam,
#mainPing,
#jitterValue,
#statsFps,
#statsCpu,
#statsRam{
font-variant-numeric:tabular-nums;
}

.qx-preparing .hero{
border-color:
rgba(117,86,255,.28);
}

.qx-preparing .power-ring{
animation:
qxPrepareSpin 1.4s linear infinite;
}

@keyframes qxPrepareSpin{

0%{
filter:
drop-shadow(
0 0 0
rgba(118,79,255,0)
);
}

50%{
filter:
drop-shadow(
0 0 17px
rgba(118,79,255,.35)
);
}

100%{
filter:
drop-shadow(
0 0 0
rgba(118,79,255,0)
);
}

}


/*
  Real browser-session optimization:
  reduce the Qx interface's own compositor/GPU cost.
  External Android apps are not modified by this CSS.
*/

body.qx-game-session .bg-orb{
display:none;
}

body.qx-game-session .glass{
backdrop-filter:none;
-webkit-backdrop-filter:none;

background:
rgba(19,16,25,.94);

box-shadow:
inset 0 1px
rgba(255,255,255,.055);
}

body.qx-game-session .glass::before{
display:none;
}

body.qx-game-session .hero,
body.qx-game-session .stat,
body.qx-game-session .tool,
body.qx-game-session .metric,
body.qx-game-session .server{
transition:none;
}

#gameModeBtn.session-active{
background:
linear-gradient(
100deg,
#268d72,
#32b888
);

box-shadow:
0 12px 28px
rgba(38,177,128,.16);
}

#gameModeBtn:disabled{
cursor:wait;
opacity:.94;
}



/* ==========================================================
   QX V5 BOOST SESSION
========================================================== */

.boost-page{
min-height:calc(100vh - 120px)
}

.boost-shell{
width:100%;
padding:4px 0 15px
}

.boost-header{
display:flex;
align-items:center;
gap:13px;
margin-bottom:23px
}

.boost-header>div{
display:flex;
flex-direction:column
}

.boost-header span{
font-size:8px;
letter-spacing:1.5px;
font-weight:800;
color:#726b79
}

.boost-header strong{
font-size:15px;
margin-top:3px
}

.boost-back{
width:43px;
height:43px;
border-radius:14px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.09);
background:rgba(255,255,255,.04);
color:#9991a1
}

.boost-back svg{
width:18px
}

.boost-visual{
text-align:center;
padding:14px 0 8px
}

.boost-radar{
position:relative;
width:210px;
height:210px;
margin:0 auto 24px;
display:grid;
place-items:center
}

.radar-ring{
position:absolute;
border-radius:50%;
border:1px solid rgba(137,92,255,.17)
}

.ring-one{
width:100%;
height:100%;
animation:
qxRadar 2.2s ease-in-out infinite
}

.ring-two{
width:78%;
height:78%;
border-color:
rgba(74,195,255,.16);
animation:
qxRadar 2.2s .3s ease-in-out infinite
}

.ring-three{
width:57%;
height:57%;
border-color:
rgba(205,49,255,.17);
animation:
qxRadar 2.2s .6s ease-in-out infinite
}

@keyframes qxRadar{

0%,100%{
transform:scale(.96);
opacity:.45
}

50%{
transform:scale(1.03);
opacity:1
}

}

.boost-core{
position:relative;
z-index:2;
width:100px;
height:100px;
border-radius:50%;
display:grid;
place-items:center;
background:
radial-gradient(
circle at 30% 20%,
rgba(91,191,255,.25),
transparent 40%
),
linear-gradient(
145deg,
rgba(121,83,255,.3),
rgba(26,18,37,.95)
);
border:
1px solid rgba(168,116,255,.31);
box-shadow:
0 0 55px rgba(105,72,255,.2),
inset 0 1px rgba(255,255,255,.1)
}

.boost-core span{
font-size:24px;
font-weight:900;
letter-spacing:-1px
}

.boost-visual h1{
font-size:27px;
letter-spacing:-1px;
margin:0 0 7px
}

.boost-visual p{
font-size:9px;
line-height:1.6;
color:#77707d;
margin:0 auto;
max-width:390px
}

.boost-progress{
width:100%;
height:6px;
margin:25px 0 18px;
border-radius:999px;
overflow:hidden;
background:rgba(255,255,255,.045)
}

.boost-progress i{
display:block;
width:0;
height:100%;
border-radius:inherit;
background:
linear-gradient(
90deg,
#43c7ff,
#7955ff,
#cb31ff
);
box-shadow:
0 0 15px rgba(121,85,255,.35);
transition:
width .55s cubic-bezier(.2,.8,.2,1)
}

.boost-steps{
display:flex;
flex-direction:column;
gap:9px
}

.boost-step{
min-height:72px;
border-radius:19px;
display:grid;
grid-template-columns:40px 1fr auto;
align-items:center;
gap:11px;
padding:12px 14px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.055),
rgba(255,255,255,.019)
);
border:
1px solid rgba(255,255,255,.075);
transition:
border-color .3s ease,
background .3s ease,
transform .3s ease,
opacity .3s ease
}

.step-number{
width:37px;
height:37px;
border-radius:12px;
display:grid;
place-items:center;
font-size:10px;
font-weight:900;
color:#746e7d;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.055)
}

.boost-step strong{
display:block;
font-size:10px
}

.boost-step span{
display:block;
font-size:8px;
line-height:1.45;
color:#6a6370;
margin-top:3px
}

.boost-step b{
font-size:7px;
letter-spacing:.8px;
color:#625b68
}

.boost-step.active{
transform:translateX(4px);
border-color:
rgba(131,87,255,.34);
background:
linear-gradient(
135deg,
rgba(74,185,255,.075),
rgba(137,76,255,.09)
)
}

.boost-step.active .step-number{
color:#d7c7ff;
background:
linear-gradient(
135deg,
rgba(64,190,255,.12),
rgba(137,79,255,.16)
)
}

.boost-step.active b{
color:#b69bff;
animation:
qxBlink 1s ease-in-out infinite
}

@keyframes qxBlink{
50%{
opacity:.35
}
}

.boost-step.done{
border-color:
rgba(68,215,154,.16)
}

.boost-step.done .step-number{
color:#72ddb0;
background:
rgba(68,215,154,.08)
}

.boost-step.done b{
color:#69dbaa
}

.boost-step.failed{
opacity:.7;
border-color:
rgba(255,183,77,.12)
}

.boost-step.failed b{
color:#c49b68
}

.boost-complete{
display:none;
margin-top:20px;
padding:24px 18px;
border-radius:24px;
text-align:center;
background:
linear-gradient(
135deg,
rgba(48,190,140,.07),
rgba(127,76,255,.07)
);
border:
1px solid rgba(81,218,165,.13)
}

.boost-complete.show{
display:block;
animation:
qxComplete .45s cubic-bezier(.2,.8,.2,1)
}

@keyframes qxComplete{
from{
opacity:0;
transform:translateY(10px) scale(.98)
}
to{
opacity:1;
transform:none
}
}

.complete-check{
width:57px;
height:57px;
margin:0 auto 12px;
border-radius:50%;
display:grid;
place-items:center;
color:#71e0ae;
background:
rgba(59,211,151,.08);
border:
1px solid rgba(69,220,160,.18)
}

.complete-check svg{
width:26px
}

.boost-complete h2{
font-size:19px;
margin:0 0 6px
}

.boost-complete p{
font-size:8px;
line-height:1.55;
color:#77707d;
margin:0
}


/* ==========================================================
   REAL SESSION LIGHT MODE
   This only reduces Qx's own rendering cost.
========================================================== */

body.qx-session-lite .bg-orb{
display:none
}

body.qx-session-lite .glass{
backdrop-filter:none;
-webkit-backdrop-filter:none;
background:rgba(18,15,24,.96)
}

body.qx-session-lite .glass::before{
display:none
}


/* Prevent bottom nav appearing over boost preparation */
#page-boost.active ~ *{
}


/* ==========================================================
   VALUE READABILITY
========================================================== */

#homePing,
#homeFps,
#homeCpu,
#homeRam,
#mainPing,
#jitterValue,
#downlinkValue,
#networkType,
#onlineValue{
font-variant-numeric:tabular-nums
}



/* ==========================================================
   QX V6
========================================================== */

.stats-qx-logo{
width:100%;
height:100%;
display:block;
border-radius:50%;
object-fit:cover
}


.score-badge{
overflow:hidden;
padding:0;
background:none
}


.boost-brand{
width:48px;
height:48px;
flex:0 0 48px
}


.boost-brand img{
width:100%;
height:100%;
border-radius:15px;
display:block
}


#gameModeBtn.session-active{
background:
linear-gradient(
100deg,
#1f9877,
#34c493
);

box-shadow:
0 14px 35px
rgba(44,193,145,.17)
}


#gameModeBtn.session-active:hover{
filter:brightness(1.05)
}


body.qx-session-lite .bg-orb{
display:none
}


body.qx-session-lite .glass{
backdrop-filter:none;
-webkit-backdrop-filter:none;
background:
rgba(18,15,24,.97)
}


body.qx-session-lite .glass::before{
display:none
}


body.qx-session-lite .ambient{
display:none
}


/*
CPU/RAM/display cards no longer need arbitrary percentage bars.
*/

.metric:not(:first-child){
min-height:87px
}


.metric:not(:first-child) .metric-row{
margin-bottom:8px
}


#batteryValue,
#statsCpu,
#statsRam,
#statsDisplay,
#pixelRatio{
font-variant-numeric:
tabular-nums
}


/*
Boost page intentionally has no return button.
It redirects automatically.
*/

.boost-page .bottom-nav{
display:none
}


.brand-mark{
overflow:hidden;
padding:0;
}

.brand-mark img{
width:100%;
height:100%;
display:block;
object-fit:cover;
border-radius:16px;
}

.server{
gap:12px;
}

.server-connect{
margin-left:auto;
border:1px solid rgba(255,255,255,.10);
background:rgba(130,82,255,.10);
color:#c7afff;
border-radius:10px;
padding:8px 11px;
font-size:8px;
font-weight:800;
}