
.gx-ios-mode-button{
position:fixed;
right:14px;
bottom:calc(14px + env(safe-area-inset-bottom));
z-index:999998;
border:1px solid rgba(255,255,255,.12);
background:linear-gradient(135deg,#d40000,#7b0009);
color:#fff;
border-radius:999px;
padding:13px 17px;
font-weight:900;
font-size:13px;
letter-spacing:.02em;
box-shadow:0 18px 44px rgba(212,0,0,.28),0 18px 70px rgba(0,0,0,.48);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
cursor:pointer;
}
.gx-ios-mode-button span{opacity:.88;font-weight:800}
.gx-ios-modal{
position:fixed;
inset:0;
z-index:999999;
display:none;
align-items:flex-end;
justify-content:center;
background:rgba(0,0,0,.72);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
padding:18px;
}
.gx-ios-modal.is-visible{display:flex}
.gx-ios-card{
width:min(620px,100%);
background:linear-gradient(180deg,#111116,#050505);
border:1px solid rgba(255,255,255,.10);
border-radius:26px;
padding:24px;
box-shadow:0 26px 90px rgba(0,0,0,.64);
color:#fff;
}
.gx-ios-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 10px;
border-radius:999px;
background:rgba(212,0,0,.16);
border:1px solid rgba(212,0,0,.32);
color:#ff465a;
font-size:11px;
font-weight:1000;
letter-spacing:.12em;
text-transform:uppercase;
}
.gx-ios-title{
font-size:30px;
line-height:1;
font-weight:1000;
margin:16px 0 10px;
}
.gx-ios-text{
color:#d2d2d8;
font-size:15px;
line-height:1.55;
}
.gx-ios-steps{
display:grid;
gap:10px;
margin:18px 0;
}
.gx-ios-step{
display:flex;
gap:12px;
align-items:flex-start;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
padding:13px;
}
.gx-ios-step-num{
width:28px;
height:28px;
min-width:28px;
display:grid;
place-items:center;
border-radius:50%;
background:#d40000;
font-weight:1000;
}
.gx-ios-step strong{display:block;margin-bottom:2px}
.gx-ios-step small{display:block;color:#aaa;line-height:1.4}
.gx-ios-actions{
display:flex;
gap:10px;
margin-top:18px;
}
.gx-ios-close,
.gx-ios-ok{
flex:1;
height:50px;
border:0;
border-radius:15px;
font-weight:900;
cursor:pointer;
}
.gx-ios-ok{background:#d40000;color:#fff}
.gx-ios-close{background:rgba(255,255,255,.08);color:#fff}
.gx-ios-app-ready{
display:none;
margin-top:14px;
padding:13px;
border-radius:16px;
background:rgba(0,180,96,.12);
border:1px solid rgba(0,180,96,.28);
color:#d9ffe9;
font-weight:800;
}
.gx-ios-modal.is-standalone .gx-ios-app-ready{display:block}
.gx-ios-modal.is-standalone .gx-ios-steps{display:none}
@media(max-width:760px){
.gx-ios-mode-button{
left:14px;
right:14px;
bottom:calc(12px + env(safe-area-inset-bottom));
border-radius:16px;
text-align:center;
}
.gx-ios-title{font-size:26px}
.gx-ios-card{padding:21px;border-radius:24px}
}
