:root {
    --wine: #6d1a2a;
    --wine-light: #8b2239;
    --gold: #c9a84c;
}

.bg-wine { background-color: var(--wine) !important; }

body {
    background-color: #f8f5f0;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.navbar-brand { font-weight: 700; letter-spacing: .3px; }

.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.card-header-wine {
    background: var(--wine);
    color: #fff;
    border-radius: 12px 12px 0 0 !important;
    font-weight: 600;
    padding: .85rem 1.25rem;
}

.cost-section { border-left: 4px solid var(--wine); padding-left: 1rem; margin-bottom: 2rem; }
.cost-section h6 { color: var(--wine); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: .8rem; margin-bottom: 1rem; }

.rsvp-badge-zusage  { background: #198754; color: #fff; }
.rsvp-badge-absage  { background: #dc3545; color: #fff; }
.rsvp-badge-offen   { background: #6c757d; color: #fff; }

.stat-card { border-radius: 10px; padding: 1.2rem 1.5rem; color: #fff; }
.stat-card .number { font-size: 2rem; font-weight: 700; }
.stat-card .label  { font-size: .85rem; opacity: .85; }

.stat-wine      { background: var(--wine); }
.stat-gold      { background: #a07830; }
.stat-green     { background: #198754; }
.stat-gray      { background: #6c757d; }

.result-row td:last-child { text-align: right; font-weight: 600; }
.result-total td { font-weight: 700; font-size: 1.1rem; background: #f8f5f0; }
.result-section td { color: var(--wine); font-weight: 700; background: #fdf8f0; padding-top: 1rem; }

.delta-positive { color: #198754; }
.delta-negative { color: #dc3545; }

.login-card { max-width: 400px; margin: 8vh auto; }
.login-logo  { font-size: 3rem; color: var(--wine); }

.btn-wine { background: var(--wine); color: #fff; border: none; }
.btn-wine:hover { background: var(--wine-light); color: #fff; }

.table-guests th { background: #f0ebe3; }

.spender-badge { background: var(--gold); color: #fff; font-size: .75rem; padding: 2px 8px; border-radius: 20px; }

input[type=number] { text-align: right; }

@media (max-width: 576px) {
    .stat-card .number { font-size: 1.5rem; }
    .container-fluid { padding: 0 .75rem; }
}