* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

    /* Existing DENR-inspired green palette */
    --denr-dark: #14532d;
    --denr-green: #198754;
    --denr-light: #22c55e;
    --denr-soft: #dcfce7;

    --white: #ffffff;
    --text-dark: #1f2937;
    --text-light: #6b7280;

}

body {

    font-family: 'Poppins', sans-serif;

    min-height: 100vh;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0b3d22,
            #14532d,
            #198754
        );

}


/* =========================================
   ANIMATED BACKGROUND
========================================= */

.background {

    position: fixed;

    inset: 0;

    overflow: hidden;

    z-index: 0;

}


/* glowing circles */

.glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    opacity: .25;

    animation: floatGlow 10s infinite alternate ease-in-out;

}

.glow-1 {

    width: 400px;

    height: 400px;

    background: #22c55e;

    top: -150px;

    left: -100px;

}

.glow-2 {

    width: 350px;

    height: 350px;

    background: #86efac;

    right: -100px;

    bottom: -100px;

    animation-delay: 2s;

}

.glow-3 {

    width: 250px;

    height: 250px;

    background: #16a34a;

    left: 45%;

    top: 30%;

    animation-delay: 4s;

}


@keyframes floatGlow {

    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(50px, -30px) scale(1.2);
    }

}


/* =========================================
   FLOATING LEAVES
========================================= */

.leaf {

    position: absolute;

    color: rgba(255,255,255,.12);

    font-size: 60px;

    animation: floatingLeaf 12s infinite linear;

}

.leaf-1 {

    left: 10%;

    top: 10%;

    animation-duration: 14s;

}

.leaf-2 {

    left: 80%;

    top: 20%;

    font-size: 40px;

    animation-duration: 17s;

}

.leaf-3 {

    left: 20%;

    bottom: 10%;

    font-size: 80px;

    animation-duration: 18s;

}

.leaf-4 {

    right: 10%;

    bottom: 20%;

    font-size: 55px;

    animation-duration: 15s;

}

.leaf-5 {

    left: 50%;

    top: 5%;

    font-size: 35px;

    animation-duration: 20s;

}


@keyframes floatingLeaf {

    0% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(-40px)
            rotate(180deg);

    }

    100% {

        transform:
            translateY(0)
            rotate(360deg);

    }

}


/* =========================================
   LOGIN WRAPPER
========================================= */

.login-wrapper {

    position: relative;

    z-index: 2;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 80px;

    padding: 40px;

}


/* =========================================
   BRANDING
========================================= */

.branding {

    width: 450px;

    color: white;

    animation: slideLeft .9s ease forwards;

}


.logo-container {

    margin-bottom: 25px;

}


.logo-circle {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    background: rgba(255,255,255,.15);

    border: 2px solid rgba(255,255,255,.5);

    backdrop-filter: blur(10px);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 42px;

    color: #bbf7d0;

    box-shadow:
        0 10px 30px rgba(0,0,0,.2);

    animation: logoFloat 4s infinite ease-in-out;

}


@keyframes logoFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


.branding h1 {

    font-size: 55px;

    line-height: 1.05;

    font-weight: 700;

    margin-bottom: 20px;

}

.branding h1 span {

    display: block;

    color: #bbf7d0;

}


.divider {

    width: 80px;

    height: 4px;

    background: #86efac;

    border-radius: 5px;

    margin-bottom: 25px;

}


.branding h3 {

    font-size: 18px;

    font-weight: 500;

    margin-bottom: 8px;

}


.branding p {

    font-size: 14px;

    opacity: .75;

    line-height: 1.6;

}


.environment-message {

    margin-top: 35px;

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 13px;

    opacity: .85;

}


.environment-message i {

    color: #86efac;

    font-size: 20px;

}


/* =========================================
   LOGIN CARD
========================================= */

.login-card {

    width: 420px;

    background: rgba(255,255,255,.96);

    border-radius: 24px;

    padding: 45px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.25);

    animation: slideRight .9s ease forwards;

}


.card-header {

    text-align: center;

    margin-bottom: 35px;

}


.card-header h2 {

    color: var(--text-dark);

    font-size: 27px;

    font-weight: 600;

}


.card-header p {

    color: var(--text-light);

    font-size: 13px;

    margin-top: 6px;

}


/* =========================================
   INPUTS
========================================= */

.input-group {

    position: relative;

    margin-bottom: 30px;

}


.input-group input {

    width: 100%;

    height: 55px;

    border: none;

    border-bottom: 2px solid #d1d5db;

    outline: none;

    padding:
        15px
        45px
        5px
        45px;

    font-family: inherit;

    font-size: 14px;

    background: transparent;

    color: var(--text-dark);

}


.input-group label {

    position: absolute;

    left: 45px;

    top: 18px;

    color: #9ca3af;

    font-size: 14px;

    pointer-events: none;

    transition: .25s ease;

}


.input-icon {

    position: absolute;

    left: 12px;

    top: 19px;

    color: #9ca3af;

    transition: .25s ease;

}


.input-group input:focus {

    border-bottom-color: var(--denr-green);

}


.input-group input:focus ~ label,

.input-group input:not(:placeholder-shown) ~ label {

    top: -5px;

    font-size: 11px;

    color: var(--denr-green);

}


.input-group input:focus ~ .input-icon {

    color: var(--denr-green);

    transform: scale(1.15);

}


.password-toggle {

    position: absolute;

    right: 10px;

    top: 17px;

    border: none;

    background: none;

    cursor: pointer;

    color: #9ca3af;

    font-size: 16px;

    transition: .2s;

}


.password-toggle:hover {

    color: var(--denr-green);

}


/* =========================================
   LOGIN BUTTON
========================================= */

.login-button {

    width: 100%;

    height: 55px;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    background:
        linear-gradient(
            135deg,
            #14532d,
            #198754
        );

    color: white;

    font-family: inherit;

    font-size: 15px;

    font-weight: 500;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    position: relative;

    overflow: hidden;

    transition: .3s;

    box-shadow:
        0 8px 20px rgba(25,135,84,.25);

}


.login-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(25,135,84,.35);

}


.login-button:active {

    transform: scale(.98);

}


.button-icon {

    transition: .3s;

}


.login-button:hover .button-icon {

    transform: translateX(5px);

}


/* Shine effect */

.login-button::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 60%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform: skewX(-20deg);

    transition: .6s;

}


.login-button:hover::before {

    left: 130%;

}


/* =========================================
   ERROR
========================================= */

.login-error {

    display: flex;

    align-items: center;

    gap: 10px;

    background: #fee2e2;

    color: #b91c1c;

    padding: 12px 14px;

    border-radius: 10px;

    font-size: 12px;

    margin-bottom: 25px;

    animation: shake .4s ease;

}


@keyframes shake {

    0%,100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }

}


/* =========================================
   SECURITY
========================================= */

.security-message {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7px;

    margin-top: 25px;

    font-size: 11px;

    color: #9ca3af;

}


.security-message i {

    color: var(--denr-green);

}


.portal-footer {

    text-align: center;

    margin-top: 20px;

    font-size: 10px;

    color: #b0b4b8;

}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes slideLeft {

    from {

        opacity: 0;

        transform:
            translateX(-50px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


@keyframes slideRight {

    from {

        opacity: 0;

        transform:
            translateX(50px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


/* =========================================
   MOBILE
========================================= */

.mobile-logo {

    display: none;

}


@media (max-width: 900px) {

    body {

        overflow-y: auto;

    }

    .login-wrapper {

        padding: 30px 20px;

    }

    .branding {

        display: none;

    }

    .login-card {

        width: 100%;

        max-width: 420px;

    }

    .mobile-logo {

        display: flex;

        width: 60px;

        height: 60px;

        border-radius: 50%;

        margin: 0 auto 15px;

        align-items: center;

        justify-content: center;

        background: #dcfce7;

        color: #198754;

        font-size: 25px;

    }

}


@media (max-width: 450px) {

    .login-card {

        padding: 35px 25px;

        border-radius: 18px;

    }

}