:root {
    --npp-red: #c8102e;
    --npp-red-dark: #8e0b20;
    --npp-blue: #1f4f8f;
    --npp-navy: #121c32;
    --npp-ink: #17202f;
    --npp-muted: #667085;
    --npp-border: #dde3ec;
}

* {
    box-sizing: border-box;
}

html,
body.auth-body {
    min-height: 100%;
}

body.auth-body {
    margin: 0;
    color: var(--npp-ink);
    background: #eef2f6;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

.auth-shell {
    min-height: 100vh;
}

.auth-brand {
    position: relative;
    color: #fff;
    background:
        linear-gradient(rgba(18, 28, 50, 0.78), rgba(18, 28, 50, 0.86)),
        url("/assets/npp-logo.png") center 68% / 360px auto no-repeat,
        linear-gradient(145deg, var(--npp-red) 0%, var(--npp-red-dark) 45%, var(--npp-navy) 100%);
    overflow: hidden;
}

.auth-brand::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 8px;
    background: linear-gradient(90deg, #c8102e 0 33.333%, #f4cf35 33.333% 66.666%, #0b7a43 66.666% 100%);
}

.auth-brand-content {
    position: relative;
    z-index: 1;
    width: min(100%, 430px);
}

.auth-logo-badge {
    display: inline-flex;
    width: 70px;
    height: 70px;
    align-items: center;
    justify-content: center;
    flex: 0 0 70px;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
}

.auth-logo-badge img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.auth-logo-fallback {
    color: var(--npp-red);
    font-size: 1.2rem;
    font-weight: 800;
}

.auth-brand h1 {
    margin: 0 0 4px;
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1.2;
}

.auth-tagline {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.auth-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.02rem;
    line-height: 1.55;
}

.auth-flag-bar {
    display: flex;
    width: 92px;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
}

.auth-flag-bar span {
    flex: 1;
}

.auth-flag-bar span:nth-child(1) {
    background: #c8102e;
}

.auth-flag-bar span:nth-child(2) {
    background: #f4cf35;
}

.auth-flag-bar span:nth-child(3) {
    background: #0b7a43;
}

.auth-feature-list {
    display: grid;
    gap: 11px;
    margin: 0;
}

.auth-feature-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.92rem;
}

.auth-feature-list i {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 8px;
}

.auth-form-panel {
    background:
        radial-gradient(circle at 20% 20%, rgba(31, 79, 143, 0.08), transparent 28%),
        #f8fafc;
}

.auth-form-card {
    width: min(100%, 420px);
    padding: 34px;
    background: #fff;
    border: 1px solid var(--npp-border);
    border-radius: 8px;
    box-shadow: 0 24px 65px rgba(23, 32, 47, 0.12);
}

.auth-form-card h2 {
    margin: 0;
    color: var(--npp-ink);
    font-size: 1.5rem;
    font-weight: 800;
}

.lead-muted,
.auth-help-text,
.auth-footer-note {
    color: var(--npp-muted);
}

.lead-muted {
    font-size: 0.95rem;
}

.auth-form-card .form-label {
    margin-bottom: 7px;
    color: var(--npp-ink);
    font-size: 0.84rem;
    font-weight: 750;
}

.auth-input-group {
    position: relative;
}

.auth-input-group .form-control {
    min-height: 48px;
    padding: 0.75rem 2.8rem;
    color: var(--npp-ink);
    border: 1px solid #cfd7e3;
    border-radius: 7px;
    font-size: 0.95rem;
}

.auth-input-group .form-control:focus {
    border-color: var(--npp-blue);
    box-shadow: 0 0 0 0.22rem rgba(31, 79, 143, 0.12);
}

.auth-input-icon,
.auth-toggle-visibility {
    position: absolute;
    top: 0;
    z-index: 2;
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: center;
    color: var(--npp-muted);
}

.auth-input-icon {
    left: 14px;
    width: 18px;
    pointer-events: none;
}

.auth-toggle-visibility {
    right: 7px;
    width: 38px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 7px;
}

.auth-toggle-visibility:hover {
    color: var(--npp-ink);
    background: #eef2f6;
}

.btn-npp {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #fff;
    background: var(--npp-red);
    border: 1px solid var(--npp-red);
    border-radius: 7px;
    font-weight: 750;
}

.btn-npp:hover,
.btn-npp:focus {
    color: #fff;
    background: var(--npp-red-dark);
    border-color: var(--npp-red-dark);
}

.auth-help-text {
    font-size: 0.84rem;
}

.auth-footer-note {
    font-size: 0.78rem;
}

@media (max-width: 991.98px) {
    .auth-brand {
        min-height: 38vh;
    }

    .auth-form-panel {
        min-height: 62vh;
    }
}

@media (max-width: 575.98px) {
    .auth-brand {
        min-height: auto;
    }

    .auth-feature-list {
        display: none;
    }

    .auth-form-card {
        padding: 24px;
    }

    .auth-brand h1 {
        font-size: 1.08rem;
    }
}