*{box-sizing:border-box}

:root{
    --g:#18a957;
    --gd:#0d8b43;
    --r:#e54848;
    --b:#e5e7eb;
    --t:#1f2937;
    --m:#6b7280;
    --w:#fff;
    --bg:#f5f7fa;
}

html{
    font-family:Arial,Helvetica,sans-serif;
    background:var(--bg);
    color:var(--t);
}

body{
    margin:0;
    min-height:100vh;
    background:var(--bg);
}

body.modal-open{
    overflow:hidden;
}

.page{
    width:min(1180px,calc(100% - 24px));
    margin:auto;
    padding:18px 0 40px;
}

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

.login-line{
    font-size:18px;
    font-weight:700;
}

.login-link,
.inline-login{
    border:0;
    background:none;
    color:var(--gd);
    font-weight:800;
    text-decoration:underline;
    padding:0;
}

.top-actions{
    display:flex;
    gap:8px;
}

.action-btn{
    border:1px solid var(--b);
    background:#fff;
    border-radius:999px;
    padding:9px 15px;
    font-weight:700;
}


/*
|--------------------------------------------------------------------------
| MENU DO USUÁRIO LOGADO
|--------------------------------------------------------------------------
*/

.usuario-menu{
    position:fixed;
    top:14px;
    right:18px;
    z-index:2000;
}

.usuario-menu-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:38px;
    border:1px solid var(--b);
    background:#fff;
    color:var(--t);
    border-radius:999px;
    padding:9px 14px;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 4px 16px #00000012;
    transition:0.15s ease;
}

.usuario-menu-button:hover{
    background:#f5f7fa;
    transform:translateY(-1px);
}

.usuario-menu-arrow{
    font-size:10px;
    line-height:1;
    transition:transform 0.15s ease;
}

.usuario-menu.open .usuario-menu-arrow{
    transform:rotate(180deg);
}

.usuario-menu-dropdown{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    width:175px;
    background:#fff;
    border:1px solid var(--b);
    border-radius:14px;
    padding:7px;
    box-shadow:0 12px 35px #00000020;
}

.usuario-menu.open .usuario-menu-dropdown{
    display:block;
}

.usuario-menu-name{
    padding:9px 10px;
    color:var(--m);
    font-size:12px;
    font-weight:700;
    border-bottom:1px solid #f0f0f0;
    margin-bottom:5px;
}

.usuario-menu-logout{
    width:100%;
    border:0;
    background:transparent;
    color:#b42318;
    text-align:left;
    border-radius:9px;
    padding:10px;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}

.usuario-menu-logout:hover{
    background:#fff1f1;
}


/*
|--------------------------------------------------------------------------
| INFORMAÇÕES DA RIFA
|--------------------------------------------------------------------------
*/

.raffle-info{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:18px;
}

.info-card{
    background:#fff;
    border:1px solid var(--b);
    border-radius:18px;
    padding:16px;
    text-align:center;
    box-shadow:0 4px 14px #0000000d;
}

.info-label{
    display:block;
    color:var(--m);
    font-size:12px;
    font-weight:800;
    margin-bottom:5px;
}

.info-card strong{
    font-size:23px;
}


/*
|--------------------------------------------------------------------------
| NÚMEROS
|--------------------------------------------------------------------------
*/

.number-area,
.top-buyers{
    background:#fff;
    border:1px solid var(--b);
    border-radius:20px;
    padding:18px;
    box-shadow:0 4px 14px #0000000d;
}

.number-legend{
    display:flex;
    justify-content:center;
    gap:22px;
    margin-bottom:16px;
    color:var(--m);
    font-size:13px;
    font-weight:700;
}

.dot{
    display:inline-block;
    width:11px;
    height:11px;
    border-radius:50%;
    margin-right:5px;
}

.available{
    background:var(--g);
}

.bought{
    background:var(--r);
}

.number-grid{
    display:grid;
    grid-template-columns:repeat(10,minmax(0,1fr));
    gap:8px;
}

.number-card{
    min-height:62px;
    border-radius:13px;
    border:2px solid transparent;
    font-weight:800;

    /* CENTRALIZA NÚMERO E COMPRADOR */
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.available-number{
    background:#effbf4;
    border-color:#b8ebca;
    color:var(--gd);
}

.available-number:hover{
    transform:translateY(-2px);
}

.number-card.bought{
    background:#fff0f0;
    border-color:#f2b1b1;
    color:var(--r);
    cursor:not-allowed;
}

.number-value{
    display:block;
    width:100%;
    text-align:center;
    font-size:20px;
}

.buyer-label{
    display:block;
    width:100%;
    margin-top:4px;
    text-align:center;
    font-size:9px;
    font-weight:800;
    line-height:1.1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.top-buyers{
    margin-top:20px;
    display:flex;
    align-items:center;
    gap:18px;
}

.trophy-circle{
    width:76px;
    height:76px;
    min-width:76px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff8d8;
    font-size:40px;
}

.top-buyers h2{
    margin:0 0 9px;
    font-size:18px;
}

.top-list{
    display:grid;
    gap:6px;
}

.top-row{
    display:grid;
    grid-template-columns:32px minmax(120px,1fr) auto;
    gap:10px;
    align-items:center;
    font-size:14px;
}

.top-name{
    font-weight:800;
}

.empty-top{
    margin:0;
    color:var(--m);
}


/*
|--------------------------------------------------------------------------
| ERROS
|--------------------------------------------------------------------------
*/

.error-card{
    background:#fff1f1;
    border:1px solid #f1b7b7;
    border-radius:18px;
    padding:20px;
    display:grid;
    gap:5px;
    color:#8b1e1e;
}


/*
|--------------------------------------------------------------------------
| MODAIS
|--------------------------------------------------------------------------
*/

.modal-overlay{
    position:fixed;
    inset:0;
    z-index:1000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:#0f172a94;
    backdrop-filter:blur(3px);
}

.modal-overlay.show{
    display:flex;
}

.modal{
    width:min(440px,100%);
    max-height:calc(100vh - 36px);
    overflow:auto;
    position:relative;
    background:#fff;
    border-radius:22px;
    padding:28px;
    box-shadow:0 20px 60px #0003;
}

.close-btn{
    position:absolute;
    top:10px;
    right:12px;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:#f3f4f6;
    font-size:25px;
}

.entry-modal{
    text-align:center;
}

.entry-icon{
    font-size:40px;
}

.entry-modal h1{
    margin:0 0 20px;
}

.entry-price,
.entry-prize{
    border-radius:15px;
    padding:13px;
    margin-top:10px;
}

.entry-price{
    background:#effbf4;
}

.entry-prize{
    background:#fff8d8;
}

.entry-price span,
.entry-prize span{
    display:block;
    font-size:11px;
    font-weight:800;
    color:var(--m);
    margin-bottom:4px;
}

.entry-price strong,
.entry-prize strong{
    font-size:21px;
}

.entry-modal p{
    margin:20px 0 12px;
    font-weight:700;
}

.countdown{
    color:var(--m);
    font-size:12px;
}

.auth-modal h2,
.modal h2{
    text-align:center;
    margin:0 0 6px;
}

.modal-subtitle{
    text-align:center;
    color:var(--m);
}

.login-form{
    display:grid;
    gap:8px;
}

.login-form label{
    font-size:13px;
    font-weight:800;
}

.login-form input{
    width:100%;
    height:46px;
    border:1px solid var(--b);
    border-radius:11px;
    padding:0 12px;
}

.primary-btn{
    height:46px;
    margin-top:7px;
    border:0;
    border-radius:11px;
    background:var(--g);
    color:#fff;
    font-weight:800;
}

.auth-links{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:17px;
}

.auth-links a{
    color:var(--gd);
    font-size:13px;
    font-weight:700;
}

.photo-placeholder{
    min-height:250px;
    margin-top:18px;
    border:2px dashed var(--b);
    border-radius:16px;
    display:grid;
    place-items:center;
    align-content:center;
    color:var(--m);
    text-align:center;
}

.rules-content{
    margin-top:18px;
    color:#4b5563;
    line-height:1.6;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVO
|--------------------------------------------------------------------------
*/

@media(max-width:900px){

    .number-grid{
        grid-template-columns:repeat(8,minmax(0,1fr));
    }

}


@media(max-width:620px){

    .topbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .top-actions{
        width:100%;
    }

    .action-btn{
        flex:1;
    }

    .raffle-info{
        grid-template-columns:1fr;
    }

    .number-grid{
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:6px;
    }

    .number-card{
        min-height:55px;
    }

    .usuario-menu{
        top:10px;
        right:10px;
    }

    .usuario-menu-button{
        min-height:36px;
        padding:8px 12px;
    }

}


@media(max-width:390px){

    .number-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .top-buyers{
        align-items:flex-start;
        flex-direction:column;
    }

}