*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:linear-gradient(135deg,#0f172a,#111827,#1e293b);
min-height:100vh;
color:#fff;
}

.dashboard{
max-width:500px;
margin:auto;
padding:20px;
}

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

.user-box h2{
font-size:28px;
font-weight:700;
color:#fff;
}

.user-box p{
color:#94a3b8;
font-size:15px;
margin-top:5px;
}

.logout{
background:#ef4444;
color:#fff;
text-decoration:none;
padding:10px 15px;
border-radius:12px;
font-size:14px;
font-weight:600;
}

.wallet{
background:linear-gradient(135deg,#2563eb,#3b82f6);
padding:25px;
border-radius:25px;
margin-bottom:20px;
box-shadow:0 15px 35px rgba(37,99,235,.4);
}

.wallet p{
color:#dbeafe;
font-size:14px;
}

.wallet h1{
font-size:40px;
margin-top:10px;
}

.menu-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
margin-bottom:20px;
}

.menu-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
padding:20px;
text-align:center;
text-decoration:none;
color:#fff;
font-size:18px;
font-weight:600;
transition:.3s;
}

.menu-card:hover{
transform:translateY(-3px);
}

.menu-card span{
display:block;
margin-top:10px;
font-size:15px;
}

.service-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,.08);
border-radius:25px;
padding:20px;
}

.service-card h3{
margin-bottom:15px;
font-size:18px;
}

.service-card select{
width:100%;
padding:15px;
background:#1e293b;
border:none;
outline:none;
border-radius:15px;
color:#fff;
font-size:15px;
margin-bottom:15px;
}

.buy-btn{
width:100%;
padding:16px;
border:none;
border-radius:15px;
font-size:17px;
font-weight:700;
background:linear-gradient(135deg,#22c55e,#16a34a);
color:#fff;
cursor:pointer;
}

.buy-btn:hover{
opacity:.95;
}

.login-container{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
}

.login-card{
width:100%;
max-width:420px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.1);
border-radius:25px;
padding:25px;
}

.login-card h1{
text-align:center;
margin-bottom:20px;
}

.tabs{
display:flex;
gap:10px;
margin-bottom:20px;
}

.tab-btn{
flex:1;
padding:14px;
border:none;
border-radius:14px;
background:#334155;
color:#fff;
cursor:pointer;
}

.tab-btn.active{
background:#2563eb;
}

.tab-content{
display:none;
}

.tab-content.active{
display:block;
}

input{
width:100%;
padding:15px;
border:none;
outline:none;
border-radius:14px;
background:rgba(255,255,255,.08);
color:#fff;
margin-bottom:15px;
}

.btn{
width:100%;
padding:15px;
border:none;
border-radius:14px;
background:linear-gradient(135deg,#2563eb,#3b82f6);
color:#fff;
font-size:16px;
font-weight:700;
cursor:pointer;
}

.alert{
background:#16a34a;
padding:12px;
border-radius:12px;
margin-bottom:15px;
text-align:center;
}
.history-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px;

margin-bottom:10px;

background:
rgba(255,255,255,.05);

border-radius:15px;

color:#fff;
}
#resultBox{
margin-top:20px;
}

.order-card{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
padding:20px;
margin-top:20px;
}

.order-card h3{
margin-bottom:15px;
}

.order-item{
display:flex;
justify-content:space-between;
margin-bottom:10px;
}

.timer-box{
background:#dc2626;
padding:12px;
border-radius:12px;
text-align:center;
font-weight:700;
margin-top:15px;
}

.otp-box{
background:#16a34a;
padding:15px;
border-radius:15px;
font-size:24px;
font-weight:700;
text-align:center;
margin-top:15px;
}

.check-btn{
width:100%;
margin-top:10px;
padding:14px;
border:none;
border-radius:14px;
background:#2563eb;
color:#fff;
font-weight:600;
cursor:pointer;
}

.cancel-btn{
width:100%;
margin-top:10px;
padding:14px;
border:none;
border-radius:14px;
background:#ef4444;
color:#fff;
font-weight:600;
cursor:pointer;
}
/* PREMIUM EFFECTS */

body{
background:
linear-gradient(
135deg,
#020617,
#0f172a,
#1e293b
);
background-attachment:fixed;
}

.wallet{
position:relative;
overflow:hidden;
}

.wallet::before{

content:'';

position:absolute;

width:180px;
height:180px;

background:
rgba(255,255,255,.12);

border-radius:50%;

top:-70px;
right:-70px;
}

.wallet h1{
font-size:42px;
font-weight:700;
}

.service-card,
.order-card,
.login-card{

box-shadow:
0 10px 30px rgba(0,0,0,.25);
}

.buy-btn,
.check-btn,
.cancel-btn,
.btn{

transition:.25s;
}

.buy-btn:hover,
.check-btn:hover,
.cancel-btn:hover,
.btn:hover{

transform:translateY(-2px);
}

.order-card{

animation:
fadeIn .3s ease;
}

.otp-box{

background:
linear-gradient(
135deg,
#16a34a,
#22c55e
);

color:#fff;

box-shadow:
0 10px 30px rgba(34,197,94,.35);
}

.history-item:hover{

background:
rgba(255,255,255,.08);
}

select{

appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
cursor:pointer;
}

input[type=file]{

padding:12px;
cursor:pointer;
}

::-webkit-scrollbar{
width:5px;
}

::-webkit-scrollbar-thumb{
background:#3b82f6;
border-radius:10px;
}

@keyframes fadeIn{

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

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

}