:root {
    --bg-dark: #0f0f0f;
    --bg-panel: #1a1a1a;
    --gold: #d4af37;
    --red: #8b0000;
    --text: #e0e0e0;
    --sidebar-w: 260px;
}

/* TEMA LEGADO (PRETO PURO) */
body.legacy-mode {
    background: #000000 !important;
}
body.legacy-mode main {
    background: #000000 !important;
}
body.legacy-mode .card-info, 
body.legacy-mode .prayer-container {
    background: #0a0a0a !important;
    border: 1px solid #333 !important;
}

/* ESTILOS GERAIS */
body { margin: 0; font-family: 'Georgia', serif; color: var(--text); overflow: hidden; transition: 0.3s; }
.app-container { display: flex; height: 100vh; }

.sidebar {
    width: var(--sidebar-w); background: #000;
    border-right: 2px solid var(--red); padding: 20px;
    display: flex; flex-direction: column;
}

.nav-btn {
    background: none; border: none; color: #888; width: 100%;
    text-align: left; padding: 15px; cursor: pointer; border-radius: 5px;
    margin-bottom: 8px; display: flex; align-items: center; gap: 10px; font-size: 1.1rem;
}
.nav-btn.active, .nav-btn:hover { background: var(--red); color: #fff; }

main { flex: 1; padding: 60px 40px; overflow-y: auto; background: radial-gradient(#222, #000); }

.content-section { display: none; max-width: 900px; margin: 0 auto; animation: fadeIn 0.5s; }
.content-section.active { display: block; }

.prayer-container { background: var(--bg-panel); padding: 25px; margin-bottom: 25px; border-left: 4px solid var(--gold); }
.latin { font-style: italic; font-size: 1.2rem; color: #ccc; line-height: 1.6; }
.btn-play { background: var(--gold); border: none; padding: 10px 20px; font-weight: bold; cursor: pointer; }

/* MODAL DE CONFIGURAÇÕES */
.modal {
    display: none; position: fixed; z-index: 300; left: 0; top: 0;
    width: 100%; height: 100%; background-color: rgba(0,0,0,0.8);
}
.modal-content {
    background-color: #111; margin: 15% auto; padding: 30px;
    border: 1px solid var(--gold); width: 300px; text-align: center; border-radius: 10px;
}
.btn-config {
    width: 100%; padding: 10px; margin: 5px 0; cursor: pointer;
    background: var(--red); color: white; border: none; border-radius: 5px;
}
.legacy-btn { background: #333; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }