body{

margin:0;
background:
linear-gradient(135deg,#1677ff 0%,#0d47a1 100%);

font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial;

display:flex;
align-items:center;
justify-content:center;

height:100vh;

color:white;

}

.container{

text-align:center;

background:
rgba(255,255,255,0.10);

padding:42px;

border-radius:18px;

backdrop-filter:blur(14px);

box-shadow:
0 15px 40px rgba(0,0,0,0.25);

width:92%;
max-width:400px;

}

.logo{

width:140px;
margin-bottom:18px;

animation:fadeDown 0.8s ease;

}

.button.disabled{

opacity:0.5;
pointer-events:none;
cursor:not-allowed;

}

.name{

font-size:26px;
font-weight:600;

}

.message{

margin-top:10px;
opacity:0.95;

}

.counter{

font-size:58px;
margin-top:18px;
font-weight:bold;

}

.loader{

margin-top:18px;

width:54px;
height:54px;

border-radius:50%;

border:4px solid rgba(255,255,255,0.3);
border-top:4px solid white;

animation:spin 1s linear infinite;

margin-left:auto;
margin-right:auto;

}

.button{

margin-top:28px;

background:white;
color:#1677ff;

padding:15px 24px;

border-radius:12px;

display:inline-block;

text-decoration:none;

font-weight:bold;

transition:0.25s;

}

.button:hover{

transform:scale(1.05);

box-shadow:
0 6px 20px rgba(0,0,0,0.25);

}

.security{

margin-top:16px;

font-size:13px;
opacity:0.75;

}

.fade-in{

animation:fadeIn 0.8s ease;

}

.turnstile-box{

margin-top:18px;

}

@keyframes spin{

0%{transform:rotate(0)}
100%{transform:rotate(360deg)}

}

@keyframes fadeIn{

from{opacity:0;transform:translateY(15px)}
to{opacity:1;transform:translateY(0)}

}

@keyframes fadeDown{

from{opacity:0;transform:translateY(-15px)}
to{opacity:1;transform:translateY(0)}

}