:root { 
    --coral: #FF5A5F; 
    --gold: #FFB347; 
    --dark: #2d3436; 
    --bg-light: #f8f9fa; 
    --white: #ffffff; 
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.08); 
    --border-radius: 12px; 
}

body { font-family: 'Inter', sans-serif; background-color: var(--bg-light); margin: 0; }

.main-header { background: var(--dark); color: var(--gold); text-align: center; padding: 20px; border-bottom: 4px solid var(--gold); }

/* Elements that use the theme color variable */
.btn-primary, .card-sales, .nav-btn.active { 
    background-color: var(--coral) !important; 
    color: white !important;
}

.nav-container { background: var(--white); display: flex; justify-content: center; padding: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.nav-links { display: flex; gap: 10px; }
.nav-btn { background: transparent; border: none; font-weight: 700; padding: 10px 20px; cursor: pointer; border-radius: 8px; color: var(--dark); }

main { max-width: 1200px; margin: 30px auto; padding: 0 20px; }
.grid-container { display: grid; grid-template-columns: 350px 1fr; gap: 30px; }
.dashboard-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.card { padding: 25px; border-radius: var(--border-radius); color: white; text-align: center; }
.card-savings { background: #2ecc71; }
.card-debt { background: var(--gold); }

.form-section, .table-section { background: var(--white); padding: 25px; border-radius: var(--border-radius); box-shadow: var(--shadow); margin-bottom: 20px; }
input, select { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #dfe6e9; border-radius: 8px; }

.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #2d3436; z-index: 9999; display: flex; justify-content: center; align-items: center; }
.auth-card { width: 320px; }
.category-tag { background: #f1f2f6; padding: 5px 10px; border-radius: 20px; font-size: 0.75rem; display: inline-block; margin: 3px; border-left: 3px solid var(--coral); }
.error-text { color: #FF5A5F; font-size: 0.8rem; margin-top: 10px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 12px; border-bottom: 2px solid #eee; font-size: 0.8rem; color: #636e72; }
td { padding: 12px; border-bottom: 1px solid #f9f9f9; }