:root {
    --brand: #7c3aed;
    --brand-dark: #5b21b6;
    --soft-bg: #f8fafc;
}

html, body {
    min-height: 100%;
    background: var(--soft-bg);
}

.btn-brand {
    color: white;
    background-color: var(--brand);
    border-color: var(--brand);
}

.btn-brand:hover {
    color: white;
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
}

.hero {
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #ffffff, #ede9fe);
    box-shadow: 0 1rem 3rem rgba(15, 23, 42, .08);
}

.card-soft {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08);
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: .75rem;
}

.slot-button {
    min-height: 74px;
    border-radius: 1rem;
    font-weight: 700;
}

.slot-free {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.slot-free:hover,
.slot-selected {
    background-color: #22c55e;
    color: white;
}

.slot-pending {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.slot-booked {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.validation-message {
    color: #dc3545;
    font-size: .875rem;
}