:root {
    --brand-ink: #0f2c3f;
    --brand-deep: #114b5f;
    --brand-accent: #1a936f;
    --brand-sand: #f3efe0;
    --brand-warm: #f6bd60;
    --surface: #ffffff;
    --shadow-soft: 0 12px 32px rgba(17, 75, 95, 0.14);
}

body {
    font-family: "Manrope", "Segoe UI", sans-serif;
    color: var(--brand-ink);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Fraunces", Georgia, serif;
    letter-spacing: 0.2px;
}

.app-bg {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 10%, rgba(26, 147, 111, 0.16), transparent 34%),
        radial-gradient(circle at 92% 20%, rgba(246, 189, 96, 0.24), transparent 38%),
        linear-gradient(180deg, #f8fbfc 0%, #f6f9fb 55%, #eef5f8 100%);
}

.app-navbar {
    background: linear-gradient(90deg, var(--brand-deep), #0a2b3d);
}

.navbar .navbar-brand {
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.18rem;
}

.navbar .nav-link {
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.card {
    border: 0;
    box-shadow: var(--shadow-soft);
    border-radius: 1rem;
    animation: card-in 320ms ease;
}

.card .card-header {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.table thead th {
    color: var(--brand-deep);
    font-weight: 700;
    border-bottom-width: 0;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(26, 147, 111, 0.07);
}

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

.btn-primary:hover,
.btn-primary:focus {
    border-color: #157f61;
    background-color: #157f61;
}

.btn-outline-secondary {
    color: var(--brand-deep);
    border-color: #8da5b3;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: #8da5b3;
    border-color: #8da5b3;
}

.form-control,
.form-select {
    border-radius: 0.75rem;
    border-color: #c8d8e0;
    padding: 0.62rem 0.85rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 0.22rem rgba(26, 147, 111, 0.2);
}

.alert {
    border: 0;
    border-radius: 0.9rem;
}

@keyframes card-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .navbar .nav-link {
        display: inline-block;
        margin-bottom: 0.35rem;
    }
}