body {
    background: linear-gradient(180deg, #f4f6ef 0%, #f8faf6 180px, #eef2ea 100%);
    color: #313131;
    font-family: Arial, Helvetica, sans-serif;
}

.brand-strip {
    background: #ffffff;
    border: 1px solid #e6ebdd;
    border-radius: 20px;
    padding: 18px 22px;
    box-shadow: 0 12px 30px rgba(58, 69, 38, 0.06);
}

.brand-logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.brand-logo {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.brand-logo-canada {
    max-height: 66px;
}

.brand-logo-undp {
    max-height: 86px;
}

.brand-logo-vitas {
    max-height: 66px;
}

.hero-card,
.section-card {
    background: #ffffff;
    border: 1px solid #dfe7d0;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(58, 69, 38, 0.07);
}

.hero-card {
    padding: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.hero-card-vitas {
    position: relative;
    overflow: hidden;
}

.hero-card-vitas:before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    background: linear-gradient(180deg, #b8cb36 0%, #95ab22 100%);
}

.hero-card-vitas > div {
    position: relative;
    z-index: 1;
}

.section-card {
    padding: 24px;
    margin-bottom: 24px;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef5c8;
    color: #68771a;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.section-card h2 {
    font-size: 1.3rem;
    margin-bottom: 18px;
    color: #4f5e14;
    padding-bottom: 8px;
    border-bottom: 2px solid #edf2da;
}

.form-label {
    font-weight: 700;
    color: #4a4a4a;
}

.text-muted {
    color: #6b6b6b !important;
}

.option-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    padding: 12px 14px;
    border: 1px solid #dde6c3;
    border-radius: 14px;
    background: #fbfcf7;
}

.option-group label,
.check-grid label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #dde6c3;
    border-radius: 14px;
    background: #fbfcf7;
}

.score-table th {
    background: #f1f6da;
    color: #4f5e14;
}

.btn-primary,
.btn-outline-primary,
.btn-brand {
    border-radius: 14px;
    font-weight: 700;
    padding: 0.7rem 1.2rem;
}

.btn-primary {
    background: #b8cb36;
    border-color: #b8cb36;
    color: #303303;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #a7ba2c;
    border-color: #a7ba2c;
    color: #262900;
}

.btn-outline-primary,
.btn-brand {
    color: #6b7c1d;
    border-color: #b8cb36;
    background: #ffffff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-brand:hover,
.btn-brand:focus {
    background: #b8cb36;
    border-color: #b8cb36;
    color: #303303;
}

.alert {
    border-radius: 14px;
}

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="number"],
select {
    min-height: 46px;
    border-radius: 12px !important;
    border-color: #d9e1c7;
}

.form-control:focus,
.form-select:focus,
textarea:focus {
    border-color: #b8cb36;
    box-shadow: 0 0 0 0.2rem rgba(184, 203, 54, 0.2);
}

.required-error {
    border-color: #dc3545 !important;
}

@media (max-width: 767.98px) {
    .hero-card,
    .section-card,
    .brand-strip {
        padding: 18px;
        border-radius: 16px;
    }

    .hero-card {
        flex-direction: column;
        align-items: stretch;
    }

    .brand-logos {
        justify-content: center;
    }

    .brand-logo-canada,
    .brand-logo-vitas {
        max-height: 54px;
    }

    .brand-logo-undp {
        max-height: 74px;
    }
}

/* Login and VITAS main logo update */
.main-brand-strip { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.main-vitas-logo { max-width:420px; width:100%; height:auto; display:block; }
.login-bar { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.auth-body { min-height:100vh; background:linear-gradient(135deg,#f7faf0,#ffffff); }
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card { width:100%; max-width:460px; background:#fff; border-radius:24px; padding:32px; box-shadow:0 18px 45px rgba(0,0,0,.08); border-top:6px solid #b7c900; }
.auth-logo { width:100%; max-width:320px; display:block; margin:0 auto 24px auto; }
.auth-card h1 { font-size:1.65rem; font-weight:700; margin-bottom:8px; }
.auth-links { display:flex; justify-content:center; gap:10px; margin-top:18px; flex-wrap:wrap; }
.existing-docs { background:#f8faf2; border:1px solid #e2e8c8; padding:14px 18px; border-radius:14px; margin-bottom:12px; }
.existing-docs h3 { font-size:1rem; margin-bottom:8px; }
.existing-docs ul { margin-bottom:0; }
@media (max-width: 768px) {
    .main-brand-strip { flex-direction:column; align-items:flex-start; }
    .main-vitas-logo { max-width:300px; }
    .login-bar { width:100%; justify-content:space-between; }
    .auth-card { padding:22px; }
}