@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');

body {
    font-family: Manrope, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 12% 18%, rgba(118, 232, 184, 0.22) 0%, transparent 32%),
        radial-gradient(circle at 88% 2%, rgba(255, 193, 123, 0.25) 0%, transparent 38%),
        #f8f9fa;
}

.hero-surface {
    background: linear-gradient(135deg, #ffffff 0%, #f2fff9 55%, #fff6e8 100%);
}

.table-responsive {
    border-radius: 0.5rem;
}

.card {
    border: 1px solid #e9ecef;
}

.note-card {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: #fff;
}

.app-shell .table thead th {
    white-space: nowrap;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6c757d;
}

.app-shell .table tbody td {
    font-size: 0.93rem;
    vertical-align: middle;
}

.app-shell .card-body > .d-flex h3,
.app-shell .card-body > .d-flex h4 {
    margin-bottom: 0;
}

.pet-temperament {
    font-weight: 600;
}