body{
    font-family:Arial,Helvetica,sans-serif;
    background:radial-gradient(circle at top,#0b1f3a 0,#061323 42%,#020b14 100%);
    margin:0;
    color:#fff;
}
.container{max-width:1120px;margin:25px auto;padding:20px}
.card{
    background:#fff;
    color:#10213d;
    border-radius:18px;
    padding:22px;
    margin-bottom:18px;
    box-shadow:0 12px 32px rgba(0,0,0,.28);
}
h1,h2{margin-top:0}
input,select,textarea,button{
    padding:12px;
    border-radius:10px;
    border:1px solid #ccd5e1;
    margin:5px 0;
    width:100%;
    box-sizing:border-box;
}
button,.btn{
    background:linear-gradient(135deg,#0bb346,#057a32);
    color:#fff;
    border:0;
    cursor:pointer;
    font-weight:bold;
    text-decoration:none;
    display:inline-block;
    padding:12px 16px;
    border-radius:12px;
}
.btn2{background:#001b69}
.danger{background:#b00020}
.muted{color:#777}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
table{width:100%;border-collapse:collapse;background:#fff;color:#111}
th,td{border-bottom:1px solid #ddd;padding:10px;text-align:left}
th{background:#001b69;color:#fff}
.ok{color:#078b37;font-weight:bold}
.pend{color:#b00020;font-weight:bold}
.qr{max-width:130px}
.badge,.status-pill{display:inline-block;padding:6px 10px;border-radius:20px;font-weight:bold}
.aberto,.open{background:#078b37;color:#fff}
.fechado,.closed{background:#001b69;color:#fff}
.aviso{background:#fff8d8;border-left:5px solid #f4cf00;padding:12px;border-radius:10px;margin-bottom:14px}
.encerrado{background:#ffe8e8;border-left-color:#b00020;color:#8a0018}
.pixbox{background:#eef7ff;border:1px dashed #001b69;padding:14px;border-radius:12px}
.pixcodigo{font-family:monospace;background:#fff;padding:10px;border-radius:8px;word-break:break-all}
.controle{font-family:monospace;background:#001b69;color:#fff;padding:4px 8px;border-radius:6px}

.topo-logo{
    background:rgba(3, 13, 26, .94);
    text-align:center;
    padding:16px 12px;
    border-bottom:4px solid rgba(255,255,255,.08);
}
.topo-logo a{display:inline-block}
.topo-logo img{
    width:100%;
    max-width:430px;
    height:auto;
    display:block;
    margin:0 auto;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.menu-mobile{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
    margin:0 0 22px 0;
    background:rgba(3,13,26,.75);
    border:1px solid rgba(255,255,255,.12);
    padding:12px;
    border-radius:18px;
    box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.menu-mobile .btn{
    border-radius:13px;
    padding:14px 18px;
    min-width:120px;
    text-align:center;
    box-shadow:0 5px 14px rgba(0,0,0,.2);
    background:#001b69;
}
.menu-mobile .btn span{display:block;margin-top:5px}
.menu-mobile .ativo{background:linear-gradient(135deg,#0bb346,#057a32)}

.bonus-card{
    background:linear-gradient(135deg,#062915,#0a5a2e);
    border:1px solid rgba(56,255,119,.25);
    color:#fff;
    border-radius:20px;
    padding:28px;
    margin-bottom:28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:inset 0 0 40px rgba(0,0,0,.28),0 12px 25px rgba(0,0,0,.2);
}
.bonus-card h2{font-size:22px;color:#39d968;margin-bottom:14px}
.bonus-card strong{font-size:48px;display:block}
.bonus-card p{color:#dcefe5;font-size:16px}
.piggy{font-size:76px;filter:drop-shadow(0 0 18px #39ff76)}

.app-card{border-radius:22px}
.section-title{display:flex;justify-content:space-between;align-items:center;border-bottom:4px solid #078b37;margin-bottom:22px}
.section-title h2{color:#061a46;font-size:28px}
.section-title span{font-size:34px}
.busca-controle{background:#f6f8fc;border:1px solid #e2e8f0;padding:18px;border-radius:16px;margin-bottom:24px}
.busca-controle label{display:block;font-weight:bold;margin-bottom:8px;color:#001b69}
.busca-linha{display:flex;gap:10px;align-items:center}
.busca-linha input{flex:1;margin:0}
.busca-linha button,.busca-linha .btn{width:auto;white-space:nowrap;margin:0}
.secao-titulo{margin-top:24px;padding-top:10px;color:#001b69;border-top:2px solid #e5e5e5}
.encerrados-titulo{color:#b00020}

.game-card{
    background:linear-gradient(180deg,#061b3c,#031126);
    border:1px solid rgba(255,255,255,.16);
    border-radius:18px;
    color:#fff;
    padding:18px;
    margin-bottom:18px;
    box-shadow:0 12px 24px rgba(0,0,0,.22);
}
.game-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.date-pill{background:#078b37;color:#fff;padding:7px 12px;border-radius:9px;font-weight:bold}
.teams{display:grid;grid-template-columns:1fr 50px 1fr;align-items:center;text-align:center;gap:10px}
.team{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:bold;text-transform:uppercase}
.team.big{gap:10px}
.flag-img{width:64px;height:64px;object-fit:cover;border-radius:50%;border:3px solid rgba(255,255,255,.7);box-shadow:0 4px 12px rgba(0,0,0,.35)}
.flag-placeholder{width:64px;height:64px;border-radius:50%;background:#092451;border:3px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:30px}
.versus{font-size:30px;font-weight:bold}
.controle-jogo{text-align:center;margin:12px 0;color:#b9c5d9}
.controle-jogo span{color:#39d968;font-weight:bold}
.game-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.16);border-radius:14px;overflow:hidden;margin:14px 0}
.game-stats div{padding:14px;text-align:center;background:rgba(5,25,55,.86)}
.game-stats b{display:block;font-size:18px;color:#fff}
.game-stats small{color:#cbd7ee}
.game-btn{width:100%;text-align:center;font-size:16px}

.match-header{background:linear-gradient(180deg,#061b3c,#031126);color:#fff;border-radius:18px;padding:22px;display:grid;grid-template-columns:1fr 50px 1fr;align-items:center;margin-bottom:18px}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.stat{background:#f4f8ff;border-radius:10px;padding:12px;border-left:5px solid #0b9340}
.stat b{font-size:20px;color:#078b37}
.resumo-lista-apostas{background:#f3f6fb;border-left:5px solid #001b69;padding:10px 12px;border-radius:8px;margin:10px 0 12px 0;line-height:1.6}

.admin-top,.admin-tabs{background:rgba(3,13,26,.72);padding:16px;border-radius:16px;margin-bottom:18px;border:1px solid rgba(255,255,255,.1)}
.admin-top{display:flex;align-items:center;justify-content:space-between}
.admin-top h1{font-size:24px;margin:0}
.admin-tabs{display:flex;gap:10px;flex-wrap:wrap}
.admin-tabs .ativo{background:linear-gradient(135deg,#0bb346,#057a32)}
.admin-game-mini .flag-img,.admin-game-mini .flag-placeholder{width:32px;height:32px;font-size:16px;display:inline-flex;vertical-align:middle}

.beneficios{background:rgba(3,13,26,.72);border:1px solid rgba(255,255,255,.12);border-radius:18px;margin:22px 0 10px;padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.beneficios div{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;border-right:1px solid rgba(255,255,255,.18)}
.beneficios div:last-child{border-right:0}
.beneficios span{font-size:28px;color:#39d968}
.beneficios b{margin-top:5px}
.beneficios small{color:#c8d3e6}
.rodape{text-align:center;padding:20px 12px 30px;color:#b7c3d2;font-size:13px}

.telao{background:#001021;color:#fff;min-height:100vh}
.telao .card{background:#071b36;color:#fff;border:2px solid #f4cf00}
.telao h1,.telao h2{color:#f4cf00}
.telao th{background:#078b37}

.telao .stat{
    background:#f4f4f4;
    color:#000000;
}

.telao .stat b{
    color:#078b37 !important;
    font-size:32px;
    font-weight:bold;
}

@media(max-width:700px){
    .topo-logo{padding:14px 10px;border-radius:0 0 18px 18px}
    .topo-logo img{max-width:270px}
    .container{margin:0 auto;padding:10px}
    .menu-mobile{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:8px;border-radius:18px;margin-bottom:14px;position:sticky;top:0;z-index:20;background:rgba(3,13,26,.94)}
    .menu-mobile .btn{min-width:0;width:100%;padding:10px 4px;margin:0;font-size:20px;line-height:1.1;border-radius:14px;box-shadow:none;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center}
    .menu-mobile .btn span{font-size:10px;margin:0}
    .bonus-card{padding:18px;border-radius:16px}
    .bonus-card strong{font-size:38px}
    .piggy{font-size:52px}
    .card{padding:15px;border-radius:16px}
    .section-title h2{font-size:24px}
    .busca-linha{flex-direction:column;align-items:stretch}
    .busca-linha button,.busca-linha .btn{width:100%}
    .teams,.match-header{grid-template-columns:1fr 36px 1fr}
    .flag-img,.flag-placeholder{width:54px;height:54px}
    .game-stats{grid-template-columns:1fr}
    .beneficios{grid-template-columns:1fr;margin-bottom:10px}
    .beneficios div{border-right:0;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:10px}
    .beneficios div:last-child{border-bottom:0}
    table,thead,tbody,th,td,tr{display:block}
    tr{margin-bottom:12px;border:1px solid #ddd;border-radius:8px;overflow:hidden}
    th{display:none}
    td{border-bottom:1px solid #eee}
    input,select,button,.btn{font-size:16px}
}
@media(max-width:380px){
    .menu-mobile .btn{font-size:18px}
    .menu-mobile .btn span{font-size:9px}
}

/* Cole ao final do style.css */
.edit-jogo-row td{
    background:#f6f8fc;
    padding:18px;
}
.admin-edit-game{
    border:1px solid #dbe3ef;
    border-radius:14px;
    padding:16px;
    background:#fff;
}
.edit-actions{
    display:flex;
    gap:10px;
    margin-top:10px;
}
.edit-actions button,
.edit-actions .btn{
    width:auto;
}
.resultado-inline{
    display:flex;
    align-items:center;
    gap:6px;
}
.resultado-inline input{
    width:70px;
}
.admin-jogos-table .btn{
    white-space:nowrap;
}
@media(max-width:700px){
    .edit-actions{
        flex-direction:column;
    }
    .edit-actions button,
    .edit-actions .btn{
        width:100%;
    }
}