body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#f2f2f2;
    color:#1f2937;
}
.bella-body{min-height:100vh;}
.bella-shell{
    min-height:100vh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:0 16px 24px;
}
.bella-card{
    width:100%;
    max-width:470px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    padding:28px 30px 26px;
    min-height:100vh;
    box-sizing:border-box;
}
.bella-logo-wrap{text-align:center;margin-top:6px;}
.bella-logo{max-width:78%;max-height:130px;height:auto;}
.bella-title{
    text-align:center;
    color:#027347;
    font-size:28px;
    font-weight:700;
    margin-top:18px;
    margin-bottom:10px;
}
.bella-subtitle{
    text-align:center;
    font-size:27px;
    line-height:1.45;
    color:#222;
    margin:0 0 44px;
}
.bella-subtitle-small{font-size:20px;margin-bottom:24px;}
.bella-form{margin-top:0;}
.bella-label{
    font-size:21px;
    color:#222;
    margin-bottom:16px;
}
.bella-input-wrap{margin-bottom:54px;}
.bella-input{
    width:100%;
    height:72px;
    box-sizing:border-box;
    border:1.5px solid #d9d9d9;
    border-radius:8px;
    background:#ffffff;
    padding:0 14px;
    font-size:16px;
    outline:none;
}
.bella-input::placeholder{color:#8a8a8a;opacity:1;}
.bella-input:focus{
    border-color:#cf172d;
    box-shadow:0 0 0 3px rgba(207,23,45,.08);
}
.bella-btn{
    width:100%;
    height:78px;
    border:none;
    border-radius:10px;
    background:#cf172d;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    font-weight:500;
}
.bella-btn:hover{opacity:.95}
.bella-btn-secondary{
    background:#027347;
    font-size:20px;
    height:60px;
}
.bella-forgot{
    text-align:center;
    color:#027347;
    font-size:22px;
    margin-top:32px;
}
.bella-hr{
    border:none;
    border-top:1px solid #cfcfcf;
    margin:34px 0 30px;
}
.bella-terms{
    text-align:center;
    color:#222;
    font-size:19px;
    line-height:1.5;
    margin:0;
}
.alert{padding:14px 16px;border-radius:10px;margin-bottom:18px;font-size:15px}
.alert.error{background:#fff1f1;color:#8a1f1f;border:1px solid #f2c5c5}
.alert.success{background:#f1fff4;color:#1f6a33;border:1px solid #ccefd5}
.alert.info{background:#f0f7ff;color:#184d96;border:1px solid #cfe2ff}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:12px 10px;border-bottom:1px solid #edf1f7;text-align:left;font-size:14px;vertical-align:top}
th{background:#f8fbff}
.small{font-size:13px;color:#6f8197}
.kpi{font-size:24px;font-weight:700}
.kpi-dark{color:#1f2937}
.kpi-green{color:#027347}
.kpi-red{color:#c91c2c}
.result-card{
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:14px;
    padding:18px;
    box-shadow:0 4px 18px rgba(0,0,0,.05);
}
.result-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border-bottom:1px solid #f0f0f0;
    font-size:15px;
}
.result-row span{color:#6b7280}
.result-row strong{text-align:right;color:#111827}
.result-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin:16px 0 14px;
}
.result-box{
    border-radius:12px;
    padding:14px;
    background:#f7f7f7;
    border:1px solid #ececec;
}
.result-box-green{background:#effbf5;border-color:#caead9}
.result-box-red{background:#fff1f1;border-color:#f1c6cc}
.bella-table-wrap{margin-top:12px;border:1px solid #eee;border-radius:12px}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;background:#fff;border-bottom:1px solid #eef2f7}
.nav-links{display:flex;gap:10px;flex-wrap:wrap}
.nav-links a{color:#0d6efd;text-decoration:none;font-weight:700}
.section-card{padding:24px}
.badge{display:inline-block;padding:7px 11px;border-radius:999px;background:#ecf4ff;color:#0d6efd;font-weight:700;font-size:12px}
.badge-status{min-width:82px;text-align:center}
.badge-pendente{background:#fff6dd;color:#8a6700}
.badge-pago{background:#e9fff0;color:#15723b}
.badge-cancelado,.badge-expirado{background:#fff1f1;color:#8a1f1f}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.container{max-width:1180px;margin:0 auto;padding:24px;}
.card{
    background:#fff;border-radius:20px;box-shadow:0 16px 40px rgba(22,52,102,.14);
    border:1px solid #e8eef8;
}
.portal-card{max-width:620px;width:100%;padding:32px 28px;}
.logo{
    width:90px;height:90px;border-radius:22px;
    background:linear-gradient(135deg,#0d6efd,#5aa6ff);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:36px;font-weight:700;margin:0 auto 18px;
}
.subtitle{color:#56708e;line-height:1.5}
.form-group{margin-bottom:16px}
label{display:block;font-weight:700;margin-bottom:8px}
input,select,textarea{box-sizing:border-box}
button,.btn{text-decoration:none}
.total-box{display:flex;gap:16px;flex-wrap:wrap}
.total-item{flex:1;min-width:180px;background:#f8fbff;border:1px solid #e0ecff;border-radius:18px;padding:16px}
.footer-note{margin-top:18px;font-size:12px;color:#789}
code{font-family:Consolas, monospace;font-size:12px}
@media (max-width: 900px){
    .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width: 700px){
    .grid-2,.grid-3{grid-template-columns:1fr}
    .navbar{flex-direction:column;gap:10px;align-items:flex-start}
}
@media (max-width: 560px){
    .bella-card{padding:24px 22px 24px;}
    .bella-title{font-size:25px}
    .bella-subtitle{font-size:23px;margin-bottom:34px}
    .bella-label{font-size:18px}
    .bella-forgot{font-size:18px}
    .bella-terms{font-size:16px}
    .bella-btn{font-size:22px;height:72px}
}

.bella-extra-text{margin-top:18px;text-align:center;color:#222;font-size:18px;line-height:1.5;white-space:normal;}