body{
font-family:system-ui;
background:#f1f5f9;
margin:0;
padding:30px;
display:flex;
justify-content:center;
}

.container{
max-width:500px;
width:100%;
text-align:center;
}

h1{
font-size:26px;
margin-bottom:5px;
}

.subtitle{
color:#64748b;
margin-bottom:20px;
}

.live{
background:#ecfdf5;
padding:10px;
border-radius:8px;
margin-bottom:20px;
color:#166534;
}

.stats{
display:flex;
gap:15px;
margin-bottom:20px;
}

.card{
flex:1;
background:white;
padding:15px;
border-radius:12px;
box-shadow:0 10px 20px rgba(0,0,0,0.05);
}

.num{
font-size:22px;
font-weight:bold;
color:#16a34a;
}

.label{
font-size:13px;
color:#64748b;
}

.progress{
height:10px;
background:#e2e8f0;
border-radius:10px;
overflow:hidden;
margin-bottom:25px;
}

.bar{
height:100%;
width:65%;
background:linear-gradient(90deg,#22c55e,#16a34a);
}

.form{
background:white;
padding:20px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
margin-bottom:20px;
}

input{
width:100%;
padding:12px;
margin-top:10px;
border-radius:8px;
border:1px solid #e2e8f0;
}

button{
width:100%;
margin-top:15px;
padding:14px;
background:#22c55e;
border:none;
border-radius:8px;
color:white;
font-size:16px;
cursor:pointer;
}

button:hover{
background:#16a34a;
}

.hidden{
display:none;
}

.status{
margin-top:15px;
font-weight:bold;
}

.feed-title{
margin-top:30px;
}

.feed{
text-align:left;
margin-top:10px;
}

.feed-item{
background:white;
padding:10px;
border-radius:8px;
margin-bottom:10px;
font-size:14px;
box-shadow:0 5px 10px rgba(0,0,0,0.05);
}


.timer{

background:#fef9c3;

padding:10px;

border-radius:8px;

margin-bottom:20px;

font-weight:600;

color:#92400e;

}

.feed-title{

margin-top:30px;

font-size:18px;

font-weight:700;

}

.feed{

margin-top:15px;

}

.feed-item{

display:flex;

align-items:center;

gap:10px;

background:white;

padding:12px;

border-radius:10px;

margin-bottom:10px;

box-shadow:0 8px 18px rgba(0,0,0,0.05);

font-size:14px;

animation:slideIn .4s ease;

}

.feed-icon{

font-size:18px;

}

.feed-text{

flex:1;

}

.feed-money{

color:#16a34a;

font-weight:bold;

}

@keyframes slideIn{

from{
opacity:0;
transform:translateY(10px);
}

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

}

.num{
font-size:24px;
font-weight:700;
letter-spacing:1px;
color:#16a34a;
}


.info{

margin-top:40px;

text-align:left;

}

.info h2{

margin-bottom:15px;

font-size:20px;

}

.steps{

display:flex;

flex-direction:column;

gap:15px;

margin-bottom:30px;

}

.step{

display:flex;

gap:12px;

background:white;

padding:15px;

border-radius:10px;

box-shadow:0 8px 18px rgba(0,0,0,0.05);

}

.step-icon{

font-size:22px;

}

.step p{

margin:5px 0 0;

color:#64748b;

font-size:14px;

}

.faq{

display:flex;

flex-direction:column;

gap:12px;

}

.faq-item{

background:white;

padding:15px;

border-radius:10px;

box-shadow:0 8px 18px rgba(0,0,0,0.05);

}

.faq-item p{

margin-top:5px;

font-size:14px;

color:#64748b;

}


.phone-input{

display:flex;

align-items:center;

border:1px solid #e2e8f0;

border-radius:8px;

padding:10px;

margin-top:10px;

background:white;

}

.prefix{

font-weight:bold;

margin-right:6px;

color:#334155;

}

.phone-input input{

border:none;

outline:none;

flex:1;

font-size:16px;

}


.buttons{

margin-top:20px;

display:flex;

flex-direction:column;

gap:12px;

}

.vote-btn{

display:block;

background:#22c55e;

color:white;

padding:16px;

border-radius:10px;

text-decoration:none;

font-size:16px;

font-weight:600;

box-shadow:0 8px 20px rgba(0,0,0,0.08);

}

.vote-btn:hover{

background:#16a34a;

}

.vote-btn.tg{

background:#3b82f6;

}

.vote-btn.tg:hover{

background:#2563eb;

}






.top-buttons{
margin-top:20px;
margin-bottom:25px;
}

.vote-btn.main{
font-size:18px;
padding:18px;
}

.highlight{
color:#22c55e;
}

.trust{
background:#ecfdf5;
padding:15px;
border-radius:10px;
margin-top:20px;
margin-bottom:20px;
font-size:14px;
}

.step p{
font-size:13px;
color:#64748b;
margin-top:4px;
}

.faq-item{
background:white;
padding:15px;
border-radius:10px;
margin-top:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.05);
}