:root { --bg: #000; --card: #141414; --accent: #ffcc00; --text: #fff; --dim: #888; }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; }
body { background: var(--bg); color: var(--text); padding: 15px; }
.container { max-width: 500px; margin: 0 auto; }
header { text-align: center; margin-bottom: 15px; }
header h1 { color: var(--accent); font-style: italic; font-weight: 900; }
.subtitle { font-size: 0.6rem; color: var(--dim); letter-spacing: 2px; }

/* Botões de Ação (Pix e Clube) */
.action-buttons { display: flex; gap: 10px; margin-bottom: 20px; }
.btn-action { flex: 1; background: #1a1a1a; color: var(--accent); border: 1px solid #333; padding: 12px 5px; border-radius: 8px; font-weight: bold; font-size: 0.75rem; cursor: pointer; text-align: center; transition: 0.2s; }
.btn-action:active { background: #333; }

/* Banner Instalação PWA */
#pwa-install-banner { background: var(--accent); color: #000; padding: 12px 15px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-weight: bold; font-size: 0.9rem; box-shadow: 0 4px 10px rgba(255, 204, 0, 0.3); }
#btn-install-pwa { background: #000; color: var(--accent); border: none; padding: 8px 16px; border-radius: 8px; font-weight: 900; cursor: pointer; }
#pwa-install-banner.hidden { display: none; }

.dashboard { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.card { background: var(--card); padding: 15px; border-radius: 12px; border: 1px solid #222; }
.faturamento-total { border-bottom: 4px solid var(--accent); }
.faturamento-total p { font-size: 2rem; color: var(--accent); font-weight: 900; }
.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card-label { font-size: 0.6rem; color: var(--dim); text-transform: uppercase; }

.central-ganhos { margin-bottom: 25px; }
.card-99 { background: #1c1c1e; border-radius: 16px; padding: 20px; }
.grafico-container { display: flex; align-items: flex-end; justify-content: space-between; height: 80px; }
.bar { width: 10%; background: #333; border-radius: 4px; cursor: pointer; min-height: 4px; transition: 0.3s; }
.bar:active { background: #555; }
.bar.active { background: var(--accent); }
.dias-semana { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.6rem; color: var(--dim); }
.stats-99 { display: flex; justify-content: space-between; text-align: center; margin-top: 15px; }
.stat-value { font-size: 0.9rem; font-weight: bold; display: block; }

.formulario { background: var(--card); padding: 20px; border-radius: 16px; }
.modalidade-selector { display: flex; gap: 8px; margin-bottom: 15px; }
.radio-btn { flex: 1; }
.radio-btn input { display: none; }
.radio-btn span { display: block; padding: 10px; background: #1a1a1a; border-radius: 8px; text-align: center; font-size: 0.8rem; border: 1px solid #333; transition: 0.2s; }
.radio-btn input:checked + span { background: var(--accent); color: #000; border-color: var(--accent); }
.input-stack { display: flex; flex-direction: column; gap: 10px; }
.input-group { display: flex; gap: 10px; }

input { background: #1a1a1a; border: 1px solid #333; color: #fff; padding: 12px; border-radius: 8px; width: 100%; font-size: 1rem;}
.date-input { color: var(--accent); font-weight: bold; text-align: center; }
::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }

.hidden { display: none !important; }
#btn-salvar { background: var(--accent); border: none; padding: 15px; border-radius: 8px; font-weight: 900; cursor: pointer; width: 100%; margin-top: 5px; }

/* Sistema de Modais */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); align-items: center; justify-content: center; z-index: 100; }
.modal-content { background: #1c1c1e; width: 85%; max-width: 380px; padding: 25px; border-radius: 20px; border: 1px solid #333; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.close { font-size: 1.8rem; color: var(--dim); cursor: pointer; line-height: 1; }
.detail-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #222; font-size: 0.9rem; }
.text-center { text-align: center; }

/* Estilos Específicos Modais Novas */
.modal-desc { font-size: 0.8rem; color: var(--dim); margin-bottom: 20px; line-height: 1.4; }
.qr-container { background: #fff; padding: 10px; border-radius: 12px; display: inline-block; margin-bottom: 15px; }
.qr-code { width: 180px; height: 180px; display: block; }
.pix-key-text { font-size: 1.1rem; font-weight: bold; color: var(--accent); margin-bottom: 20px; word-break: break-all; }
#btn-copy-pix { background: var(--accent); color: #000; border: none; padding: 14px; border-radius: 8px; font-weight: 900; cursor: pointer; width: 100%; font-size: 0.9rem; transition: 0.2s; }

/* Vitrine de Produtos - E-commerce Style */
.produtos-lista { display: flex; flex-direction: column; gap: 20px; }
.produto-item { background: #141414; border: 1px solid #333; padding: 15px; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; }
.produto-img { width: 100%; height: 160px; object-fit: contain; background: #fff; border-radius: 8px; padding: 5px; }
.produto-info h4 { color: var(--text); margin-bottom: 5px; font-size: 1rem; }
.produto-info p { font-size: 0.8rem; color: var(--dim); line-height: 1.4; }
.btn-comprar { display: block; background: #00e676; color: #000; text-align: center; text-decoration: none; font-weight: bold; padding: 14px; border-radius: 8px; font-size: 0.9rem; transition: 0.2s; }
.btn-comprar:active { background: #00c853; }

/* Agrupamento de Histórico e Pesquisa */
.search-input { margin: 20px 0 15px; }
.grupo-data { margin-top: 20px; margin-bottom: 10px; }
.cabecalho-grupo { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; background: #000; border-bottom: 1px solid #222; position: sticky; top: 0; z-index: 10; }
.cabecalho-grupo span:first-child { font-size: 0.85rem; font-weight: 900; color: var(--accent); text-transform: uppercase; }
.cabecalho-grupo .total-dia { font-size: 0.75rem; color: #00ff88; font-weight: bold; }
.item-corrida { background: var(--card); padding: 15px; border-radius: 10px; margin-bottom: 8px; display: flex; justify-content: space-between; border-left: 4px solid #333; }
.hora-item { font-size: 0.65rem; color: #666; margin-bottom: 3px; display: block; font-weight: bold; }