:root {
    --bg-body: #f1f5f9;
    --text-main: #0f172a;
    --text-muted: #475569;
    --card-bg: #ffffff; 
    --card-border: #cbd5e1;
    --input-bg: #ffffff;
    --tab-bg: #e2e8f0;
    --tab-btn-active: #ffffff;
    --pill-bg: #f8fafc;
    --pill-text: #0f172a;
    --accent-glow: rgba(16, 185, 129, 0.15);
    --groepstotaal-bg: #ecfdf5;
    --groepstotaal-text: #047857; 
    --koploper-bg: #fefce8;
    --koploper-text: #713f12; 
    --blob-1: rgba(16, 185, 129, 0.05); 
    --blob-2: rgba(99, 102, 241, 0.04); 
}

.dark {
    --bg-body: #0b0f17;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --card-bg: #131b2e; 
    --card-border: rgba(255, 255, 255, 0.07);
    --input-bg: #1a243a;
    --tab-bg: #131b2e;
    --tab-btn-active: #1e293b;
    --pill-bg: rgba(255, 255, 255, 0.05);
    --pill-text: #f1f5f9;
    --accent-glow: rgba(16, 185, 129, 0.22);
    --groepstotaal-bg: rgba(16, 185, 129, 0.1);
    --groepstotaal-text: #6ee7b7; 
    --koploper-bg: rgba(251, 191, 36, 0.1);
    --koploper-text: #fde68a; 
    --blob-1: rgba(16, 185, 129, 0.08); 
    --blob-2: rgba(99, 102, 241, 0.06);
}

body { 
    font-family: 'DM Sans', sans-serif; 
    font-weight: 400;
    background-color: var(--bg-body); 
    color: var(--text-main);
    transition: background-color 0.25s ease, color 0.25s ease; 
}

.theme-card { 
    background-color: var(--card-bg); 
    border-color: var(--card-border); 
    color: var(--text-main); 
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; 
}

.theme-input { 
    background-color: var(--input-bg); 
    border-color: var(--card-border); 
    color: var(--text-main); 
}

.font-syne, .font-heading { font-family: 'DM Sans', sans-serif; font-weight: 800; }

.card-active { 
    border-color: #10b981 !important; 
    box-shadow: 0 0 25px var(--accent-glow) !important; 
}

.admin-only { display: none; }
body.is-admin .admin-only { display: flex; }

.modal { display: none; }
.modal.active { display: flex; }

.tab-pane { opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
.tab-pane.active-pane { display: block !important; opacity: 1; transform: translateY(0px); }

.btn-drink-bier { background-color: rgba(56, 189, 248, 0.08); color: #0284c7; border: 1px solid rgba(56, 189, 248, 0.2); }
.dark .btn-drink-bier { background-color: rgba(56, 189, 248, 0.12); color: #38bdf8; border-color: rgba(56, 189, 248, 0.25); }

.btn-drink-wijn { background-color: rgba(244, 63, 94, 0.08); color: #e11d48; border: 1px solid rgba(244, 63, 94, 0.2); }
.dark .btn-drink-wijn { background-color: rgba(244, 63, 94, 0.12); color: #fb7185; border-color: rgba(244, 63, 94, 0.25); }

.btn-drink-champ { background-color: rgba(251, 191, 36, 0.08); color: #d97706; border: 1px solid rgba(251, 191, 36, 0.2); }
.dark .btn-drink-champ { background-color: rgba(251, 191, 36, 0.12); color: #fcd34d; border-color: rgba(251, 191, 36, 0.25); }

.btn-drink-cocktail { background-color: rgba(232, 121, 249, 0.08); color: #c026d3; border: 1px solid rgba(232, 121, 249, 0.2); }
.dark .btn-drink-cocktail { background-color: rgba(232, 121, 249, 0.12); color: #f472b6; border-color: rgba(232, 121, 249, 0.25); }

.btn-drink-sterk { background-color: rgba(249, 115, 22, 0.08); color: #ea580c; border: 1px solid rgba(249, 115, 22, 0.2); }
.dark .btn-drink-sterk { background-color: rgba(249, 115, 22, 0.12); color: #fb923c; border-color: rgba(249, 115, 22, 0.25); }

.toast-animate { animation: slideUp 0.3s ease-out forwards; }
@keyframes slideUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }