:root { --dffe-primary: #1a6b3e; --dffe-secondary: #2e86ab; --dffe-accent: #f0a500; }
body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; background-color: #f8f9fa; }
.bg-primary, .btn-primary, .navbar.bg-primary { background-color: var(--dffe-primary) !important; border-color: var(--dffe-primary) !important; }
.btn-primary:hover { background-color: #145532 !important; }
.btn-outline-primary { color: var(--dffe-primary) !important; border-color: var(--dffe-primary) !important; }
.btn-outline-primary:hover { background-color: var(--dffe-primary) !important; color: #fff !important; }
.text-primary { color: var(--dffe-primary) !important; }
.bg-primary-subtle { background-color: rgba(26,107,62,0.1) !important; }
.navbar-dark.bg-primary { background: linear-gradient(135deg, var(--dffe-primary) 0%, #0d4a29 100%) !important; }
.card { transition: transform 0.2s ease, box-shadow 0.2s ease; border-radius: 12px !important; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,.1) !important; }
.card-header { border-radius: 12px 12px 0 0 !important; }
.table thead th { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.kpa-content ul { padding-left: 1.5rem; }
.kpa-content ul li { margin-bottom: .4rem; line-height: 1.6; }
.form-control:focus, .form-select:focus { border-color: var(--dffe-primary); box-shadow: 0 0 0 .25rem rgba(26,107,62,.15); }
.input-group-text { background-color: #f8f9fa; border-right: none; }
.alert { border-radius: 10px; border: none; }
footer { font-size: .875rem; }
.hero-section {
    background-image: linear-gradient(rgba(0,0,0,0.52), rgba(10,50,25,0.62)), url('/images/hero-bg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 400px;
    display: flex;
    align-items: center;
}
.navbar-logo { height: 48px; width: auto; object-fit: contain; }

.auth-page {
    min-height: calc(100vh - 260px);
    display: flex;
    align-items: center;
}

.auth-card {
    width: 100%;
}

.auth-header h2 {
    letter-spacing: .01em;
}

@media (max-width: 767.98px) {
    .auth-page {
        min-height: auto;
        align-items: stretch;
    }

    .auth-card .card-body {
        padding: 1.25rem !important;
    }

    .auth-card .btn-lg {
        padding-top: .6rem;
        padding-bottom: .6rem;
        font-size: 1rem;
    }
}