:root {
    --primary: #1a237e;
    --secondary: #c62828;
    --accent: #ffd700;
    --bg: #0a0a0b;
    --card-bg: #161618;
    --text: #f0f0f0;
    --border: #2d2d30;
    --shadow: 0 8px 32px rgba(0,0,0,0.5);
    --escudo-border: #ffd700;
    --perfil-border: #ffffff;
}

body.light-mode {
    --bg: #f0f2f5;
    --card-bg: #ffffff;
    --text: #1a1a1a;
    --border: #d1d5db;
    --primary: #1a237e;
    --escudo-border: #b8860b;
    --perfil-border: #4b5563;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    padding-top: 260px;
    transition: background 0.3s ease, color 0.3s ease;
}

.navbar {
    position: fixed;
    top: 0; left: 0; width: 100%;
    background: rgba(26, 35, 126, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999;
    padding: 20px 5%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow);
}

.brand h1 { 
    font-family: 'Oswald', sans-serif; 
    font-size: 1.8rem; 
    color: white; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}
.brand h1 span { color: var(--accent); }
.logo-icon { font-size: 2.2rem; }

.header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.header-main { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: center; }

.stats-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.stat-card { background: rgba(255,255,255,0.1); padding: 8px; border-radius: 12px; min-width: 90px; text-align: center; border: 1px solid rgba(255,255,255,0.05); }
.stat-card label { display: block; font-size: 0.6rem; text-transform: uppercase; margin-bottom: 5px; color: rgba(255,255,255,0.8); }
.stat-card .value { font-size: 1rem; font-weight: 600; color: var(--accent); }

.destaque-faltam { border: 1px solid var(--secondary); background: rgba(198, 40, 40, 0.1); }
.destaque-faltam .value { color: #ff5252; }

.progress-bar-container { width: 100%; height: 6px; background: rgba(0,0,0,0.3); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.progress-fill { width: 0%; height: 100%; background: var(--accent); transition: width 0.5s ease; }

.search-box { position: relative; }
#inputBusca { 
    width: 100%; padding: 12px 20px; border-radius: 30px; border: none; 
    background: var(--bg); color: var(--text); border: 2px solid var(--border); 
}
#inputBusca:focus { border-color: var(--accent); outline: none; }

.container { max-width: 1400px; margin: 0 auto; padding: 20px; }

.grupo-container { 
    margin-bottom: 60px; 
    background: var(--card-bg); padding: 30px; 
    border-radius: 20px; border: 1px solid var(--border); 
}

.time-section { margin-bottom: 45px; }
.grupo-title { font-family: 'Oswald', sans-serif; font-size: 2.2rem; margin-bottom: 30px; border-left: 6px solid var(--accent); padding-left: 15px; }

.section-stats-bar {
    display: flex; align-items: center; gap: 15px; margin-bottom: 15px;
    background: rgba(0,0,0,0.1); padding: 8px 15px; border-radius: 8px;
}
.section-stats-bar .mini-bar-bg { flex-grow: 1; height: 8px; background: rgba(0,0,0,0.2); border-radius: 4px; overflow: hidden; }
.section-stats-bar .mini-bar-fill { height: 100%; width: 0%; background: var(--accent); transition: 0.3s; }
.section-stats-bar .stats-text { font-size: 0.8rem; font-weight: 600; white-space: nowrap; }

.time-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bandeira { width: 40px; height: 28px; border-radius: 3px; object-fit: cover; border: 1px solid var(--border); }

.grid-figurinhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 15px; }

.figurinha {
    aspect-ratio: 3/4; background: var(--bg); border: 1px solid var(--border);
    border-radius: 8px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; cursor: pointer; transition: 0.2s ease; position: relative; padding: 10px; text-align: center;
}
.figurinha:hover { transform: translateY(-5px); border-color: var(--accent); z-index: 5; }
.figurinha span.num-sigla { font-size: 0.8rem; font-weight: 700; opacity: 0.8; }

.player-name, .desc-especial { font-size: 0.65rem; font-weight: 600; margin-top: 5px; line-height: 1.2; text-transform: uppercase; }

/* CORES DINÂMICAS QUANDO COLADA */
.figurinha.colada { 
    background-color: var(--bg-colada, var(--primary)) !important; 
    color: var(--txt-colada, white) !important; 
    border-color: var(--accent) !important; 
}

.especial-prateada { border: 2.5px dashed var(--escudo-border) !important; }
.especial-perfilado { border: 2.5px dashed var(--perfil-border) !important; }

.badge-repetida {
    position: absolute; top: -8px; right: -8px; background: var(--secondary); color: white;
    width: 22px; height: 22px; border-radius: 50%; display: none; align-items: center;
    justify-content: center; font-size: 0.75rem; font-weight: bold; border: 2px solid var(--bg);
}

.legend-row { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid var(--border); }
.legend-boxes { display: flex !important; flex-direction: row !important; gap: 10px; }
.box-extra { width: 35px; height: 35px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.75rem; font-weight: bold; border-radius: 6px; }

.box-extra.active.regular { background: #2ecc71; color: white; }
.box-extra.active.bronze { background: #cd7f32; color: white; }
.box-extra.active.prata { background: #c0c0c0; color: #333; }
.box-extra.active.ouro { background: var(--accent); color: #000; box-shadow: 0 0 10px var(--accent); }

.ui-button { padding: 8px 15px; border-radius: 8px; border: none; background: rgba(255,255,255,0.2); color: white; cursor: pointer; font-weight: 600; }
.erro-balao { position: absolute; top: 55px; left: 50%; transform: translateX(-50%); background: var(--secondary); color: white; padding: 8px 20px; border-radius: 8px; font-size: 0.85rem; display: none; z-index: 100; }

.btn-danger {
    background: rgba(198, 40, 40, 0.2) !important;
    border: 1px solid #c62828 !important;
    color: #ff5252 !important;
    transition: 0.3s;
}

.btn-danger:hover {
    background: #c62828 !important;
    color: white !important;
}

/* Garante que os botões fiquem alinhados */
.actions { display: flex; gap: 10px; }