body{
margin:0;
font-family:Arial;
background:linear-gradient(135deg,#f5f6fa,#e9ecf2);
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
color:#222;
}

.box{
background:#fff;
padding:40px;
border-radius:18px;
width:100%;
max-width:420px;
box-shadow:0 25px 60px rgba(0,0,0,.15);
text-align:center;
}

h1{
margin-bottom:25px;
}

input{
width:100%;
padding:15px;
margin:10px 0;
border-radius:10px;
border:1px solid #ddd;
font-size:16px;
}

button{
width:100%;
padding:16px;
background:#e30000;
color:#fff;
border:none;
border-radius:10px;
font-size:17px;
font-weight:bold;
cursor:pointer;
margin-top:15px;
}

button:hover{
background:#b80000;
}

.link{
margin-top:15px;
display:block;
color:#555;
text-decoration:none;
font-size:14px;
}

.dashboard{
text-align:center;
}

.badge{
display:inline-block;
padding:8px 15px;
border-radius:30px;
margin-top:10px;
font-weight:bold;
}

.pago{
background:#0aa84f;
color:#fff;
}

.pendente{
background:#ffb300;
color:#fff;
}

.download{
display:block;
margin-top:25px;
padding:18px;
background:#0aa84f;
color:white;
text-decoration:none;
border-radius:12px;
font-weight:bold;
}

.logout{
margin-top:20px;
display:inline-block;
color:#999;
text-decoration:none;
font-size:14px;
}

/* DASHBOARD PREMIUM */

.panel{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:linear-gradient(135deg,#f5f6fa,#e9ecf2);
}

.panel-card{
background:#fff;
padding:50px 40px;
border-radius:22px;
box-shadow:0 40px 80px rgba(0,0,0,.15);
text-align:center;
max-width:420px;
width:100%;
}

.panel-card h1{
margin-bottom:10px;
}

.sub{
color:#666;
margin-bottom:30px;
}

.status{
padding:14px;
border-radius:12px;
margin-bottom:25px;
font-weight:bold;
}

.success{
background:#0aa84f;
color:#fff;
}

.pending{
background:#ffb300;
color:#fff;
}

.btn-download{
display:block;
background:#0aa84f;
color:white;
padding:18px;
border-radius:12px;
text-decoration:none;
font-weight:bold;
margin-bottom:15px;
}

.btn-pay{
display:block;
background:#e30000;
color:white;
padding:18px;
border-radius:12px;
text-decoration:none;
font-weight:bold;
margin-bottom:15px;
}

.note{
font-size:14px;
color:#777;
margin-bottom:25px;
}

.logout{
font-size:14px;
color:#999;
text-decoration:none;
}

.loader{
width:45px;
height:45px;
border:5px solid #eee;
border-top:5px solid #e30000;
border-radius:50%;
margin:25px auto;
animation:spin 1s linear infinite;
}

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

.loader{
width:50px;
height:50px;
border:5px solid #eee;
border-top:5px solid #e30000;
border-radius:50%;
margin:25px auto;
animation:spin 1s linear infinite;
}

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

.loader{
width:45px;
height:45px;
border:5px solid #eee;
border-top:5px solid #e30000;
border-radius:50%;
margin:25px auto;
animation:spin 1s linear infinite;
}

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

.pay-success{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#0a9b41;
color:white;
padding:25px 40px;
border-radius:15px;
font-size:22px;
font-weight:bold;
box-shadow:0 20px 50px rgba(0,0,0,.25);
animation:pop 0.6s ease,fadeOut 4s forwards;
z-index:9999;
}

@keyframes pop{
0%{transform:translate(-50%,-50%) scale(.4);opacity:0}
100%{transform:translate(-50%,-50%) scale(1);opacity:1}
}

@keyframes fadeOut{
0%{opacity:1}
80%{opacity:1}
100%{opacity:0;visibility:hidden}
}

.vip-badge{
margin:10px auto;
background:linear-gradient(45deg,#ffd700,#ffae00);
color:#000;
padding:8px 18px;
border-radius:30px;
font-weight:bold;
display:inline-block;
box-shadow:0 5px 20px rgba(0,0,0,.2);
}

.sep{
margin:20px 0;
opacity:.15;
}

.title{
margin-bottom:15px;
}

.activity{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
margin:25px 0;
width:100%;
}

.act{
background:#f7f7f7;
padding:18px;
border-radius:14px;
text-align:center;
box-shadow:0 8px 25px rgba(0,0,0,.08);
overflow:hidden;
word-break:break-word;
}

.act span{
display:block;
font-size:13px;
color:#777;
margin-bottom:6px;
}

.act b{
font-size:17px;
display:block;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
}

/* MOBILE */
@media(max-width:650px){
.activity{
grid-template-columns:1fr;
}
}


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

.panel-card{
width:100%;
}

.act:hover{
transform:translateY(-3px);
transition:.2s;
}