:root {
    --dark: #34383a;
    --dark-soft: #45494b;
    --orange: #b46a29;
    --orange-dark: #8c4c16;
    --cream: #ffc878;
    --cream-light: #fff0d8;
    --cream-soft: #fff8ef;
    --background: #f7f7f6;
    --text: #17191d;
    --muted: #68758f;
    --border: #e2dfda;
    --green: #16843c;
}

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

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

body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: #f7f7f6;
    color: var(--text);
}


/* ============================
   PAGE
============================ */

.login-page {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(520px, 1.05fr) minmax(500px, .95fr);
}


/* ============================
   LEFT
============================ */

.login-brand-panel {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 55px;
    overflow: hidden;
    background: linear-gradient( 145deg, #34383a 0%, #3b3e3f 45%, #292c2d 100% );
    color: white;
}


/* ============================
   BRAND HEADER
============================ */

.brand-header {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
}

.brand-logo {
    width: 92px;
    height: 92px;
    flex-shrink: 0;
    object-fit: contain;
    filter: drop-shadow( 0 4px 5px rgba(0,0,0,.15) );
}

.brand-university {
    margin-left: 18px;
    line-height: 1.45;
}

    .brand-university strong {
        display: block;
        font-size: 17px;
        letter-spacing: .2px;
    }

    .brand-university span {
        display: block;
        margin-top: 2px;
        font-size: 13px;
        color: rgba(255,255,255,.85);
    }

    .brand-university .department {
        color: #ffc266;
        font-weight: 700;
    }


/* ============================
   MAIN BRAND
============================ */

.brand-content {
    position: relative;
    z-index: 5;
    max-width: 590px;
    margin: auto 0;
}

.system-badge {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    margin-bottom: 25px;
    border: 1px solid rgba(255,200,120,.25);
    border-radius: 30px;
    background: rgba(255,200,120,.10);
    color: #ffd394;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
}

.brand-content h1 {
    max-width: 530px;
    font-size: 48px;
    line-height: 1.13;
    font-weight: 600;
}

    .brand-content h1 span {
        display: block;
        color: #ffc572;
        font-size: 64px;
    }

.brand-content > p {
    max-width: 540px;
    margin-top: 18px;
    color: rgba(255,255,255,.68);
    font-size: 15px;
    line-height: 1.75;
}


/* ============================
   FEATURES
============================ */

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 32px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.78);
    font-size: 13px;
}

    .feature-item > div {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 8px;
        background: rgba(255,199,112,.13);
        color: #ffc36d;
    }


/* ============================
   BRAND FOOTER
============================ */

.brand-footer {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
}

.footer-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c97931;
}


/* ============================
   DECORATION
============================ */

.brand-decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.decoration-one {
    width: 470px;
    height: 470px;
    right: -230px;
    top: -190px;
    border: 80px solid rgba(255,196,105,.035);
}

.decoration-two {
    width: 370px;
    height: 370px;
    left: -230px;
    bottom: -190px;
    border: 65px solid rgba(255,196,105,.025);
}

.decoration-three {
    width: 190px;
    height: 190px;
    right: 50px;
    bottom: 60px;
    background: rgba(255,190,90,.025);
}


/* ============================
   RIGHT PANEL
============================ */

.login-form-panel {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 45px;
    background: linear-gradient( 135deg, #fff 0%, #fffdf9 55%, #fff8ef 100% );
}

    .login-form-panel::before {
        content: "";
        position: absolute;
        width: 340px;
        height: 340px;
        right: -160px;
        bottom: -180px;
        border-radius: 50%;
        background: rgba(255,196,105,.10);
    }

.login-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
}


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

.mobile-brand {
    display: none;
    align-items: center;
    margin-bottom: 30px;
}

    .mobile-brand img {
        width: 65px;
        height: 65px;
        object-fit: contain;
    }

    .mobile-brand div {
        margin-left: 12px;
    }

    .mobile-brand strong,
    .mobile-brand span {
        display: block;
    }

    .mobile-brand strong {
        font-size: 13px;
    }

    .mobile-brand span {
        margin-top: 3px;
        color: var(--muted);
        font-size: 10px;
    }


/* ============================
   HEADING
============================ */

.login-label {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--orange);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.login-heading h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
}

.login-heading p {
    max-width: 360px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}


/* ============================
   ALERT
============================ */

.login-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 12px 14px;
    border: 1px solid #f4cccc;
    border-radius: 7px;
    background: #fff1f1;
    color: #c73e3e;
    font-size: 12px;
}


/* ============================
   FORM
============================ */

.login-form {
    margin-top: 32px;
}

.form-group {
    margin-bottom: 20px;
}

    .form-group > label {
        display: block;
        margin-bottom: 8px;
        color: #363c45;
        font-size: 12px;
        font-weight: 650;
    }

.input-box {
    position: relative;
    height: 52px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

    .input-box:focus-within {
        border-color: #d59a59;
        box-shadow: 0 0 0 3px rgba(190,116,45,.10);
    }

.input-icon {
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient( 135deg, #fff1db, #ffe5bd );
    color: #a76023;
    font-size: 17px;
}

.input-box input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 14px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #252a30;
    font-size: 13px;
}

    .input-box input::placeholder {
        color: #a0a5ac;
    }

.show-password {
    width: 46px;
    height: 100%;
    border: 0;
    background: transparent;
    color: #8a919a;
    cursor: pointer;
    font-size: 16px;
}


/* ============================
   OPTIONS
============================ */

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -3px;
    margin-bottom: 23px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #68727f;
    font-size: 12px;
    cursor: pointer;
}

    .remember-me input {
        width: 15px;
        height: 15px;
        accent-color: var(--orange);
    }


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

.login-button {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient( 90deg, #a65c23, #bd7b40 );
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 650;
    box-shadow: 0 7px 18px rgba(153,83,28,.17);
    transition: transform .15s, box-shadow .15s, filter .15s;
}

    .login-button:hover {
        transform: translateY(-1px);
        filter: brightness(1.04);
        box-shadow: 0 10px 23px rgba(153,83,28,.22);
    }


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

.login-security {
    display: flex;
    gap: 11px;
    margin-top: 25px;
    padding: 13px 14px;
    border-radius: 7px;
    background: linear-gradient( 90deg, #fff4e4, #fff8ee );
}

    .login-security > div {
        color: #ae6828;
        font-size: 18px;
    }

    .login-security p {
        margin: 0;
        color: #7a695a;
        font-size: 11px;
        line-height: 1.55;
    }

.login-copyright {
    margin-top: 25px;
    color: #a1a4aa;
    text-align: center;
    font-size: 10px;
}

    .login-copyright span {
        margin: 0 6px;
        color: #d2a269;
    }


/* ============================
   VALIDATION
============================ */

.validation-message,
.validation-summary {
    color: #ce3f3f;
    font-size: 11px;
}

.validation-message {
    display: block;
    margin-top: 5px;
}


/* ============================
   RESPONSIVE
============================ */

@media (max-width: 1050px) {

    .login-page {
        grid-template-columns: minmax(420px,.9fr) minmax(450px,1.1fr);
    }

    .login-brand-panel {
        padding: 30px 40px;
    }

    .brand-content h1 {
        font-size: 39px;
    }

        .brand-content h1 span {
            font-size: 54px;
        }
}


@media (max-width: 850px) {

    .login-page {
        display: block;
    }

    .login-brand-panel {
        display: none;
    }

    .login-form-panel {
        min-height: 100vh;
        padding: 35px 25px;
    }

    .mobile-brand {
        display: flex;
    }
}


@media (max-width: 480px) {

    .login-form-panel {
        align-items: flex-start;
        padding: 25px 18px;
    }

    .login-container {
        max-width: none;
    }

    .login-heading h2 {
        font-size: 27px;
    }
}