:root {
    --green-950: #003d23;
    --green-900: #004d2b;
    --green-800: #006638;
    --green-700: #087a46;
    --gold: #f0b719;
    --gold-soft: #ffd65a;
    --ink: #09251a;
    --muted: #667080;
    --line: #d8dce1;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: Inter, "Segoe UI", Arial, sans-serif; color: var(--ink); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.login-page { min-height: 100vh; overflow-x: hidden; background: #fff; }
.login-layout { min-height: calc(100vh - 61px); display: grid; grid-template-columns: 55% 45%; position: relative; }

.identity-panel {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 61px);
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(0, 99, 54, .12), transparent 38%),
        radial-gradient(circle at 20% 42%, rgba(20, 146, 82, .38), transparent 36%),
        linear-gradient(145deg, #005e35 0%, #004e2c 56%, #003f24 100%);
    border-top-right-radius: 46% 92%;
    border-bottom-right-radius: 46% 92%;
    box-shadow: 7px 0 0 var(--gold), 16px 0 32px rgba(0, 57, 31, .16);
}
.identity-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image:
        radial-gradient(circle at 15% 13%, rgba(255,255,255,.25) 0 2px, transparent 2.5px),
        linear-gradient(45deg, transparent 48%, rgba(255,255,255,.06) 49% 51%, transparent 52%);
    background-size: 92px 92px, 180px 180px;
}
.identity-panel::after {
    content: "";
    position: absolute;
    right: 7%;
    top: 5%;
    width: 27%;
    aspect-ratio: 1;
    opacity: .08;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, #fff 0 2px, transparent 2px 8px);
}
.identity-content {
    position: relative;
    z-index: 2;
    width: 78%;
    min-height: calc(100vh - 61px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vh, 52px) clamp(28px, 5vw, 92px) 27px;
    text-align: center;
}
.institution-crest {
    width: clamp(225px, 22vw, 350px);
    max-height: 42vh;
    object-fit: contain;
    filter: drop-shadow(0 17px 22px rgba(0, 25, 12, .32));
}
.identity-brand { margin-top: clamp(2px, 1vh, 13px); }
.identity-brand strong {
    display: block;
    color: #fff;
    font-size: clamp(48px, 5.25vw, 83px);
    font-weight: 900;
    letter-spacing: -.065em;
    line-height: .96;
    text-shadow: 0 5px 9px rgba(0, 20, 10, .28);
}
.identity-brand strong span {
    margin-left: .04em;
    color: var(--gold-soft);
    background: linear-gradient(#ffe16d, #e3a70b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.identity-brand p { margin: 11px 0 0; font-size: clamp(15px, 1.55vw, 24px); font-weight: 520; letter-spacing: .015em; }
.identity-motto {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: clamp(18px, 2.4vh, 29px);
    padding-top: 19px;
    border-top: 3px solid var(--gold);
    text-align: left;
}
.identity-motto > span {
    display: grid;
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    place-items: center;
    border: 4px solid var(--gold-soft);
    border-radius: 50%;
    color: var(--gold-soft);
    font-size: 19px;
}
.identity-motto p { margin: 0; font-size: clamp(15px, 1.35vw, 21px); font-weight: 550; line-height: 1.35; }
.identity-meta {
    width: min(650px, 100%);
    display: grid;
    grid-template-columns: .8fr 1px 1.45fr;
    align-items: center;
    gap: clamp(20px, 2.3vw, 38px);
    margin-top: auto;
    padding-top: 26px;
    text-align: left;
}
.identity-meta > div { display: flex; align-items: center; gap: 16px; min-width: 0; }
.identity-meta > div > span { color: var(--gold-soft); font-size: 34px; }
.identity-meta p { display: flex; min-width: 0; margin: 0; flex-direction: column; }
.identity-meta strong { font-size: clamp(13px, 1.1vw, 17px); white-space: nowrap; }
.identity-meta small { margin-top: 4px; color: rgba(255,255,255,.9); font-size: clamp(11px, .95vw, 15px); white-space: nowrap; }
.meta-divider { display: block; width: 1px; height: 51px; background: rgba(255,255,255,.36); }

.identity-grid { position: absolute; z-index: 1; display: grid; grid-template-columns: repeat(3, 35px); gap: 5px; opacity: .07; }
.identity-grid i { width: 35px; height: 35px; border: 7px solid #fff; }
.identity-grid i:nth-child(2), .identity-grid i:nth-child(4), .identity-grid i:nth-child(9) { border-width: 3px; }
.grid-one { top: 11%; left: 3%; }
.grid-two { left: 4%; bottom: 14%; transform: scale(.82); }
.identity-map { position: absolute; z-index: 1; top: 13%; right: 14%; width: 140px; height: 140px; display: grid; place-items: center; border: 2px dashed rgba(255,255,255,.15); border-radius: 50%; color: rgba(255,255,255,.09); font-size: 76px; }

.access-panel {
    position: relative;
    min-width: 0;
    display: grid;
    place-items: center;
    padding: clamp(40px, 6vw, 100px) clamp(28px, 6vw, 108px);
    background:
        radial-gradient(circle at 40% 43%, rgba(234,237,237,.72), transparent 42%),
        linear-gradient(135deg, #fff, #fbfbfb);
}
.back-link {
    position: absolute;
    top: 25px;
    right: 34px;
    color: #5e6b66;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: color .18s ease;
}
.back-link i { margin-right: 7px; }
.back-link:hover { color: var(--green-700); }
.login-card {
    width: min(670px, 100%);
    padding: clamp(36px, 4.2vw, 68px) clamp(32px, 4.4vw, 70px) 34px;
    border: 1px solid #eef0ef;
    border-radius: 22px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 52px rgba(28,45,38,.13);
}
.login-heading { margin-bottom: 34px; text-align: center; }
.mobile-brand { display: none; }
.login-heading h1 { margin: 0; color: #0b3d26; font-size: clamp(29px, 2.5vw, 42px); font-weight: 820; letter-spacing: -.035em; }
.heading-accent { display: block; width: 67px; height: 5px; margin: 24px auto 20px; border-radius: 99px; background: var(--gold); }
.login-heading p { margin: 0; color: var(--muted); font-size: clamp(14px, 1.15vw, 18px); }
.login-alert { display: flex; align-items: flex-start; gap: 10px; margin: -12px 0 21px; padding: 12px 14px; border-radius: 10px; font-size: 13px; font-weight: 650; line-height: 1.4; }
.login-alert i { margin-top: 2px; }
.login-alert.is-error { border: 1px solid #f0c2c5; background: #fff1f2; color: #ac3038; }
.login-alert.is-success { border: 1px solid #b8e1cb; background: #effaf4; color: #087347; }
.login-card form { display: grid; }
.login-card form > label { margin: 0 0 10px; color: #17231f; font-size: 14px; font-weight: 700; }
.login-card form > label:not(:first-of-type) { margin-top: 27px; }
.login-input { position: relative; }
.login-input > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 22px;
    color: var(--green-700);
    font-size: 19px;
    transform: translateY(-50%);
}
.login-input input {
    width: 100%;
    height: 64px;
    padding: 10px 58px 10px 60px;
    border: 1px solid #cfd4d7;
    border-radius: 8px;
    outline: 0;
    color: var(--ink);
    background: #fff;
    font-size: 15px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.login-input input::placeholder { color: #9ba0a9; }
.login-input input:focus { border-color: #36a471; box-shadow: 0 0 0 4px rgba(0, 107, 59, .1); }
.toggle-password {
    position: absolute;
    top: 50%;
    right: 9px;
    width: 50px;
    height: 44px;
    border: 0;
    border-left: 1px solid #d9dde0;
    background: transparent;
    color: var(--green-700);
    font-size: 19px;
    transform: translateY(-50%);
    cursor: pointer;
}
.toggle-password:focus-visible, .forgot-password:focus-visible, .back-link:focus-visible { outline: 3px solid rgba(240,183,25,.65); outline-offset: 3px; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 27px; }
.remember-option { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: #5f6971; font-size: 14px; cursor: pointer; }
.remember-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.remember-option span { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #cbd1d5; border-radius: 5px; background: #fff; }
.remember-option input:checked + span { border-color: var(--green-700); background: var(--green-700); }
.remember-option input:checked + span::before { content: "\f00c"; color: #fff; font-family: "Font Awesome 6 Free"; font-size: 12px; font-weight: 900; }
.remember-option input:focus-visible + span { outline: 3px solid rgba(240,183,25,.55); outline-offset: 2px; }
.forgot-password { padding: 0; border: 0; background: transparent; color: #c03236; font-size: 14px; cursor: pointer; }
.forgot-password:hover { text-decoration: underline; }
.btn-login {
    height: 61px;
    margin-top: 38px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(90deg, #006034, #087941, #006034);
    color: #fff;
    font-size: 16px;
    font-weight: 830;
    letter-spacing: .015em;
    text-transform: uppercase;
    box-shadow: 0 9px 18px rgba(0, 94, 51, .22);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.btn-login i { margin-right: 11px; font-size: 19px; }
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 12px 23px rgba(0, 94, 51, .27); }
.btn-login:active { transform: translateY(0); }
.btn-login:focus-visible { outline: 4px solid rgba(240,183,25,.58); outline-offset: 3px; }
.login-note { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 31px 0 0; padding-top: 27px; border-top: 1px solid #e2e4e5; color: #747b84; font-size: 14px; }
.login-note i { color: var(--green-700); font-size: 22px; }
.login-footer {
    min-height: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 3px solid var(--gold);
    background: linear-gradient(90deg, #004425, #005f34, #004425);
    color: #fff;
    font-size: 15px;
    letter-spacing: .08em;
}
.login-footer strong { margin-left: 8px; }
.login-footer strong span { color: var(--gold-soft); }

@media (max-height: 850px) and (min-width: 981px) {
    .institution-crest { width: clamp(175px, 18vw, 260px); max-height: 35vh; }
    .identity-brand strong { font-size: clamp(43px, 4.4vw, 65px); }
    .identity-motto { margin-top: 15px; padding-top: 13px; }
    .identity-motto > span { width: 42px; height: 42px; flex-basis: 42px; }
    .identity-meta { padding-top: 14px; }
    .login-card { padding-top: 34px; padding-bottom: 25px; }
    .login-heading { margin-bottom: 24px; }
    .heading-accent { margin-block: 17px 14px; }
    .login-input input { height: 55px; }
    .login-card form > label:not(:first-of-type) { margin-top: 19px; }
    .login-options { margin-top: 20px; }
    .btn-login { height: 54px; margin-top: 26px; }
    .login-note { margin-top: 22px; padding-top: 19px; }
}

@media (max-width: 980px) {
    .login-layout { min-height: calc(100vh - 55px); grid-template-columns: 1fr; background: #f6f8f7; }
    .identity-panel { min-height: 300px; border-radius: 0 0 45% 45% / 0 0 26% 26%; box-shadow: 0 6px 0 var(--gold), 0 14px 28px rgba(0,57,31,.13); }
    .identity-content { width: 100%; min-height: 300px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: center; justify-content: center; gap: 5px 25px; padding: 26px max(40px, 8vw) 44px; text-align: left; }
    .institution-crest { grid-row: 1 / 3; width: clamp(145px, 22vw, 205px); max-height: 230px; }
    .identity-brand { align-self: end; margin: 0; }
    .identity-brand strong { font-size: clamp(43px, 8vw, 66px); }
    .identity-brand p { font-size: clamp(14px, 2.5vw, 18px); }
    .identity-motto { align-self: start; margin-top: 10px; padding-top: 12px; }
    .identity-motto p { font-size: 14px; }
    .identity-motto > span { width: 39px; height: 39px; flex-basis: 39px; border-width: 3px; font-size: 15px; }
    .identity-meta, .identity-grid, .identity-map { display: none; }
    .access-panel { padding: 57px 24px 42px; }
    .back-link { top: 24px; right: 27px; }
    .login-card { width: min(620px, 100%); }
    .login-footer { min-height: 55px; }
}

@media (max-width: 600px) {
    .identity-panel { min-height: 210px; border-radius: 0 0 42% 42% / 0 0 18% 18%; }
    .identity-content { min-height: 210px; grid-template-columns: 104px 1fr; gap: 3px 16px; padding: 18px 24px 31px; }
    .institution-crest { width: 104px; max-height: 150px; }
    .identity-brand strong { font-size: clamp(34px, 10vw, 48px); }
    .identity-brand p { margin-top: 5px; font-size: 11px; }
    .identity-motto { margin-top: 6px; padding-top: 8px; border-top-width: 2px; gap: 9px; }
    .identity-motto > span { width: 31px; height: 31px; flex-basis: 31px; border-width: 2px; font-size: 12px; }
    .identity-motto p { font-size: 10px; }
    .access-panel { align-items: start; padding: 55px 14px 29px; }
    .back-link { top: 23px; right: 18px; font-size: 11px; }
    .login-card { padding: 27px 20px 23px; border-radius: 17px; }
    .login-heading { margin-bottom: 25px; }
    .login-heading h1 { font-size: 27px; }
    .heading-accent { width: 54px; height: 4px; margin: 17px auto 14px; }
    .login-heading p { font-size: 13px; }
    .login-card form > label { font-size: 13px; }
    .login-card form > label:not(:first-of-type) { margin-top: 19px; }
    .login-input input { height: 54px; padding-left: 50px; font-size: 14px; }
    .login-input > i { left: 17px; font-size: 16px; }
    .login-options { margin-top: 20px; }
    .remember-option, .forgot-password { font-size: 12px; }
    .remember-option span { width: 20px; height: 20px; }
    .btn-login { height: 53px; margin-top: 27px; font-size: 14px; }
    .login-note { margin-top: 23px; padding-top: 20px; font-size: 12px; }
    .login-footer { min-height: 49px; font-size: 12px; }
}

@media (max-width: 380px) {
    .identity-panel { min-height: 185px; }
    .identity-content { min-height: 185px; grid-template-columns: 82px 1fr; padding-inline: 17px; }
    .institution-crest { width: 82px; }
    .identity-brand strong { font-size: 31px; }
    .identity-motto > span { display: none; }
    .login-options { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}