:root {
    --verde: #27ae60;
    --azul: #2c3e50;
    --vermelho: #e74c3c;
    --fundo: #f0f2f5;
    --cinza: #888;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, sans-serif; background: var(--fundo); margin: 0; display: flex; justify-content: center; min-height: 100vh; }
.container { width: 100%; max-width: 440px; background: #fff; min-height: 100vh; position: relative; box-shadow: 0 0 15px rgba(0,0,0,0.1); display: flex; flex-direction: column; }
#cookieBanner { position: fixed; bottom: 10px; left: 10px; right: 10px; background: #222; color: #fff; padding: 8px 10px; border-radius: 8px; font-size: 12px; z-index: 9999; display: none; align-items: center; justify-content: space-between; gap: 8px; }
#cookieBanner a { color: #4caf50; text-decoration: none; }
#cookieBanner button { background: #4caf50; border: 0; color: #000; padding: 5px 8px; border-radius: 6px; font-weight: 700; cursor: pointer; }
.header { padding: 15px; border-bottom: 1px solid #eee; background: #fff; }
.header-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.logo { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.logo-icon { width: 40px; height: 40px; background: var(--verde); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; }
.logo-text { margin: 0; font-size: 18px; line-height: 1.2; }
.logo-text b { display: block; font-size: 16px; color: var(--verde); font-weight: normal; }
.logo-text span { font-size: 22px; font-weight: bold; color: #111; }
.menu-btn { background: none; border: none; cursor: pointer; padding: 5px; z-index: 1001; }
.menu-btn div { width: 25px; height: 3px; background: var(--azul); margin: 4px 0; border-radius: 2px; }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 998; display: none; }
.sidebar { position: fixed; top: 0; right: -280px; width: 280px; height: 100%; background: #fff; box-shadow: -5px 0 15px rgba(0,0,0,0.1); z-index: 999; transition: right 0.4s ease; padding: 80px 20px 20px; overflow-y: auto; }
.sidebar.active { right: 0; }
.sidebar ul { list-style: none; padding: 0; }
.sidebar li { padding: 15px 0; border-bottom: 1px solid #eee; font-weight: bold; color: var(--azul); cursor: pointer; transition: color 0.3s; }
.sidebar li:hover { color: var(--verde); }
.content { padding: 15px; flex: 1; }
.intro-text { font-size: 13px; color: #666; margin-bottom: 20px; line-height: 1.4; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.tab-btn { flex: 1; padding: 12px; border: none; background: #ddd; border-radius: 8px; cursor: pointer; font-weight: bold; color: #444; transition: all 0.3s; }
.tab-btn.active { background: var(--verde); color: white; }
.page { display: none; animation: fadeIn 0.3s; }
.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.main-area { display: none; }
.main-area.active { display: block; }
textarea { width: 100%; height: 100px; border-radius: 8px; border: 1px solid #ccc; padding: 12px; font-size: 14px; resize: none; margin-bottom: 10px; font-family: inherit; }
.input-group { margin-bottom: 20px; font-weight: bold; font-size: 14px; display: flex; align-items: center; justify-content: space-between; }
.input-group input { width: 60px; padding: 8px; border: 1px solid #ccc; border-radius: 6px; text-align: center; }
.btn-principal { background: var(--verde); color: white; width: 100%; padding: 15px; border: none; border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; text-transform: uppercase; margin-bottom: 15px; transition: background 0.3s; }
.btn-principal:hover { background: #219653; }
.btn-add { background: #eee; border: 1px dashed #999; color: #666; padding: 10px; border-radius: 8px; width: 100%; margin-bottom: 15px; cursor: pointer; font-weight: bold; transition: all 0.3s; }
.btn-add:hover { background: #ddd; border-color: #666; }
.help-title { font-size: 18px; font-weight: bold; color: var(--azul); margin: 20px 0 10px 0; display: flex; align-items: center; gap: 8px; }
.help-card { background: #f9f9f9; border-left: 4px solid var(--verde); padding: 15px; border-radius: 8px; margin-bottom: 15px; }
.help-card b { color: var(--verde); display: block; margin-bottom: 5px; font-size: 15px; }
.help-card p { font-size: 13px; color: #444; margin: 5px 0; line-height: 1.5; }
.cron { background: #1a1a1a; color: #0f0; padding: 15px; border-radius: 12px; text-align: center; margin-bottom: 20px; }
#display { font-size: 40px; font-family: monospace; margin-bottom: 10px; }
.cron-buttons { display: flex; gap: 10px; justify-content: center; }
.cron-btn { padding: 10px 20px; border-radius: 5px; border: none; color: white; font-weight: bold; cursor: pointer; transition: opacity 0.3s; }
.cron-btn:hover { opacity: 0.9; }
.cron-btn.start { background: var(--verde); }
.cron-btn.reset { background: var(--vermelho); }
.t-card { border: 1px solid #ddd; border-radius: 12px; margin-bottom: 15px; overflow: hidden; background: #fff; }
.t-header { background: #f8f9fa; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
.jogador-item { display: flex; justify-content: space-between; padding: 8px 15px; border-top: 1px solid #f0f0f0; align-items: center; }
.contador-group { display: flex; align-items: center; gap: 8px; }
.btn-contador { background: #f1f1f1; border: 1px solid #ccc; width: 30px; height: 30px; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background 0.3s; }
.btn-contador:hover { background: #e0e0e0; }
.pontos { min-width: 25px; text-align: center; font-weight: bold; }
.btn-acao { background: #3498db; color: white; width: 100%; padding: 12px; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; margin-top: 10px; transition: background 0.3s; }
.btn-acao:hover { background: #2980b9; }
.vitorias-panel { background: linear-gradient(135deg, #fff9e6, #fff2d7); border: 1px solid #f1c40f; border-radius: 16px; padding: 15px; margin-bottom: 20px; }
.vitorias-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; font-weight: bold; color: #e67e22; font-size: 1.1em; }
.btn-reset-vitoria { background: linear-gradient(145deg, #95a5a6, #7f8c8d); border: none; color: white; padding: 6px 14px; border-radius: 40px; font-size: 12px; font-weight: bold; cursor: pointer; transition: all 0.2s; }
.btn-reset-vitoria:hover { background: linear-gradient(145deg, #7f8c8d, #6c7a7a); transform: scale(1.02); }
.vitorias-lista { display: flex; flex-direction: column; gap: 10px; }
.vitoria-item { display: flex; justify-content: space-between; align-items: center; background: white; padding: 10px 14px; border-radius: 60px; border-left: 4px solid #f1c40f; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: all 0.2s; }
.vitoria-item:hover { transform: translateX(3px); }
.vitoria-contador { font-size: 1.3em; font-weight: bold; background: #fef5e0; padding: 4px 12px; border-radius: 30px; min-width: 50px; text-align: center; color: #e67e22; margin: 0 8px; }
.vitoria-botoes { display: flex; gap: 8px; }
.vitoria-botoes button { background: linear-gradient(145deg, #f39c12, #e67e22); border: none; color: white; font-weight: bold; font-size: 14px; padding: 6px 16px; border-radius: 40px; cursor: pointer; transition: all 0.2s; }
.vitoria-botoes button:hover { background: linear-gradient(145deg, #e67e22, #d35400); transform: scale(1.05); }
.seo-content { margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px; }
.seo-content h2 { font-size: 16px; color: var(--azul); margin-bottom: 10px; }
.seo-content p { font-size: 13px; color: #666; line-height: 1.5; text-align: justify; }
.footer-info { background: #f9f9f9; padding: 15px; border-radius: 10px; margin-top: 20px; font-size: 13px; color: #666; }
footer { padding: 15px; text-align: center; font-size: 12px; color: #888; border-top: 1px solid #eee; background: #fff; }
footer span { cursor: pointer; text-decoration: underline; color: var(--verde); margin: 0 5px; }
footer span:hover { color: var(--azul); }
.team-input-block { margin-bottom: 15px; }
.team-input-block input, .team-input-block textarea { width: 100%; padding: 8px; margin-bottom: 5px; border-radius: 5px; border: 1px solid #ccc; }
.team-input-block input { font-weight: bold; }
#hist-comp { margin-top: 20px; background: #f9f9f9; padding: 15px; border-radius: 8px; display: none; }
.historico-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#hist-lista { font-size: 13px; text-align: left; max-height: 200px; overflow-y: auto; }
#hist-lista div { padding: 8px 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.btn-limpar { background: #e74c3c; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.balanced-panel { background: #e8f5e9; border-radius: 12px; padding: 15px; margin: 15px 0; border: 1px solid var(--verde); }
.switch-label { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: bold; color: var(--azul); margin-bottom: 15px; }
.switch-label input { width: 20px; height: 20px; cursor: pointer; }
.player-builder { background: white; border-radius: 12px; padding: 10px; margin-top: 10px; max-height: 400px; overflow-y: auto; }
.player-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; background: #fafafa; padding: 8px; border-radius: 8px; }
.player-row input, .player-row select { padding: 8px; border-radius: 6px; border: 1px solid #ccc; flex: 1 1 100px; }
.player-row .nome-jogador { flex: 2 1 120px; }
.star-select { width: 80px; text-align: center; }
.btn-remove-player { background: #e74c3c; color: white; border: none; border-radius: 6px; width: 34px; height: 34px; cursor: pointer; font-weight: bold; }
.btn-add-player { background: var(--verde); color: white; border: none; padding: 10px; border-radius: 8px; width: 100%; margin: 10px 0; cursor: pointer; font-weight: bold; }
.info-equilibrado { background: #d4edda; border-radius: 8px; padding: 8px; font-size: 12px; margin-bottom: 12px; text-align: center; }
.goalkeeper-area { background: #f0f8ff; border-radius: 12px; padding: 12px; margin: 15px 0; border: 1px solid #3498db; }
.goalkeeper-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: bold; color: #2980b9; }
.goalkeeper-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 120px; overflow-y: auto; padding: 5px; }
.gk-check { display: flex; align-items: center; gap: 5px; background: white; padding: 5px 10px; border-radius: 20px; border: 1px solid #ccc; font-size: 13px; }
.gk-check input { margin-right: 4px; transform: scale(1.1); }
.btn-incluir-gk { background: #3498db; color: white; border: none; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; transition: 0.2s; }
.btn-incluir-gk:hover { background: #2980b9; }
@media (max-width:480px) { .container { min-height: 100vh; max-width: 100%; } .sidebar { width: 250px; right: -250px; } .vitoria-item { flex-wrap: wrap; justify-content: center; gap: 8px; border-radius: 20px; } .vitoria-contador { order: 1; } .vitoria-botoes { order: 2; } }