:root {
    --teal-950: #064d50;
    --teal-900: #08696b;
    --teal-800: #087c7e;
    --teal-700: #0a898a;
    --teal-100: #e7f4f2;
    --ink: #183536;
    --muted: #718686;
    --border: #dce9e7;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.login-page {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 14% 16%, rgba(77,184,179,.23), transparent 29%),
        radial-gradient(circle at 82% 78%, rgba(2,63,66,.32), transparent 34%),
        var(--teal-900);
    color: var(--ink);
    font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
body.login-page::before {
    position: fixed;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 48px 48px;
    content: "";
    mask-image: linear-gradient(135deg, #000, transparent 68%);
    pointer-events: none;
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }

/* Page transition: two DUT-colored curtains reveal and cover the login page. */
.login-curtain {
    position: fixed;
    z-index: 9999;
    inset: 0;
    overflow: hidden;
    background: transparent;
    pointer-events: auto;
    visibility: visible;
}
.login-curtain__center {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    min-width: 190px;
    padding: 1.1rem 1.5rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 18px;
    background: rgba(4,69,72,.72);
    color: #fff;
    box-shadow: 0 18px 45px rgba(1,35,37,.28);
    text-align: center;
    transform: translate(-50%, -50%);
    transition: opacity .3s ease, transform .45s ease;
    backdrop-filter: blur(10px);
}
.login-curtain__logo { display: grid; width: 54px; height: 54px; overflow: hidden; place-items: center; margin-bottom: .65rem; border: 2px solid rgba(255,240,0,.78); border-radius: 14px; background: #fff; }
.login-curtain__logo img { width: 47px; height: 47px; object-fit: contain; }
.login-curtain__center strong { font-size: .82rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.login-curtain__center small { margin-top: .25rem; color: rgba(255,255,255,.68); font-size: .58rem; }
.login-curtain.is-open { pointer-events: none; visibility: hidden; transition: visibility 0s linear 1.12s; }
.login-curtain.is-open .login-curtain__center { opacity: 0; transform: translate(-50%, -50%) scale(.84); }
.login-curtain.is-closing { background: transparent; }
.login-curtain.is-closing .login-curtain__center { transition-delay: .42s; }

.login-stage {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 100vh;
    padding: 2rem;
    place-items: center;
}
.login-card {
    position: relative;
    display: grid;
    grid-template-columns: 46% 54%;
    width: min(1080px, 100%);
    min-height: 680px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.48);
    border-radius: 38px;
    background: #fff;
    box-shadow: 0 30px 75px rgba(1,42,44,.32), 0 4px 14px rgba(1,42,44,.1);
}

.login-panel {
    position: relative;
    z-index: 4;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    width: 100%;
    max-width: 500px;
    flex-direction: column;
    padding: 3.1rem 3.8rem 2.3rem;
}
.login-brand { display: inline-flex; align-items: center; align-self: flex-start; gap: .8rem; }
.login-brand__logo { display: grid; width: 53px; height: 53px; overflow: hidden; flex: 0 0 53px; place-items: center; border: 1px solid #e0e8e6; border-radius: 14px; background: #fff; box-shadow: 0 7px 18px rgba(4,85,87,.12); }
.login-brand__logo img { width: 46px; height: 46px; object-fit: contain; }
.login-brand__text { display: flex; flex-direction: column; }
.login-brand__text strong { color: var(--teal-800); font-size: .82rem; font-weight: 800; letter-spacing: .075em; }
.login-brand__text small { margin-top: .2rem; color: #91a4a3; font-size: .51rem; font-weight: 650; letter-spacing: .22em; }

.login-heading { margin-top: 2.5rem; }
.login-heading h1 { margin: 0; color: #172e2f; font-size: 2rem; font-weight: 800; letter-spacing: -.045em; }
.login-heading p { max-width: 340px; margin: .75rem 0 0; color: var(--muted); font-size: .77rem; line-height: 1.65; }
.login-form { margin-top: 2rem; }
.login-field { margin-bottom: 1.15rem; }
.login-field > label, .login-field__label-row label { display: block; color: #385657; font-size: .68rem; font-weight: 700; }
.login-field__label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .42rem; }
.login-field__label-row span { color: var(--teal-700); font-size: .56rem; font-weight: 650; }
.login-field > label { margin: 0 0 .42rem; }
.login-input { position: relative; display: flex; align-items: center; }
.login-input > i { position: absolute; left: .95rem; z-index: 1; color: #8ba5a4; font-size: 1rem; pointer-events: none; }
.login-input input {
    width: 100%;
    height: 48px;
    padding: 0 2.8rem 0 2.6rem;
    border: 1px solid transparent;
    border-radius: 7px;
    outline: none;
    background: #edf6f5;
    color: #244344;
    font-size: .75rem;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-input input::placeholder { color: #9aafae; }
.login-input input:focus { border-color: #7ac4c1; background: #fff; box-shadow: 0 0 0 4px rgba(10,137,138,.1); }
.login-input.has-error input { border-color: #dc7777; background: #fff7f7; }
.login-password-toggle { position: absolute; right: .38rem; display: grid; width: 37px; height: 37px; padding: 0; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #789291; cursor: pointer; }
.login-password-toggle:hover { background: rgba(8,124,126,.09); color: var(--teal-800); }
.login-field__error { margin: .38rem 0 0; color: #b42323; font-size: .59rem; line-height: 1.4; }
.login-input input:-webkit-autofill,
.login-input input:-webkit-autofill:hover,
.login-input input:-webkit-autofill:focus { -webkit-text-fill-color: #244344; box-shadow: 0 0 0 1000px #edf6f5 inset; transition: background-color 9999s ease-out 0s; }

.login-submit {
    display: flex;
    width: 100%;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: .25rem;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(180deg, #0b9695, #087d7f);
    color: #fff;
    font-size: .73rem;
    font-weight: 750;
    box-shadow: 0 9px 20px rgba(8,125,127,.18);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.login-submit:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 12px 24px rgba(8,125,127,.24); }
.login-submit i { font-size: 1rem; transition: transform .18s ease; }
.login-submit:hover i { transform: translateX(3px); }
.login-submit:disabled { cursor: wait; opacity: .75; transform: none; }
.login-submit.is-loading i { animation: login-arrow .75s ease-in-out infinite alternate; }
.login-submit:focus-visible, .login-password-toggle:focus-visible, .login-home:focus-visible { outline: 3px solid rgba(10,137,138,.22); outline-offset: 2px; }

.login-divider { display: flex; align-items: center; gap: .8rem; margin: 1.25rem 0 .9rem; color: #98aaa9; font-size: .57rem; }
.login-divider::before, .login-divider::after { height: 1px; flex: 1; background: #e3ecea; content: ""; }
.login-options { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.login-options > div { display: flex; height: 40px; align-items: center; justify-content: center; gap: .4rem; border-radius: 7px; background: #edf6f5; color: #547170; font-size: .61rem; font-weight: 650; }
.login-options i { color: var(--teal-800); font-size: .95rem; }
.login-home { display: inline-flex; align-items: center; align-self: center; gap: .3rem; margin-top: 1.15rem; color: #7d9291; font-size: .59rem; font-weight: 600; transition: color .18s ease; }
.login-home:hover { color: var(--teal-800); }

.login-alert { display: flex; align-items: flex-start; gap: .45rem; margin-top: 1rem; padding: .6rem .7rem; border: 1px solid; border-radius: 7px; font-size: .62rem; line-height: 1.45; }
.login-alert i { font-size: .85rem; }
.login-alert--success { border-color: #a9ded0; background: #effaf5; color: #176b50; }
.login-alert--error { border-color: #f0bbbb; background: #fff4f4; color: #9c2929; }

.login-art { position: relative; z-index: 1; grid-column: 2; grid-row: 1; min-width: 0; }
.login-art__shape {
    position: absolute;
    z-index: 0;
    top: -135px;
    right: -165px;
    width: 750px;
    height: 770px;
    border-radius: 50%;
    background: linear-gradient(145deg, #0b8e8e, #087476 72%);
}
.login-art::after {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(to top, rgba(255,255,255,.94), transparent);
    content: "";
    pointer-events: none;
}
.login-art > img { position: absolute; z-index: 3; right: -42px; bottom: -26px; width: 650px; max-width: none; filter: drop-shadow(0 22px 18px rgba(2,48,50,.18)); }

.login-leaves { position: absolute; z-index: 2; top: 24px; right: 30px; width: 235px; height: 180px; border-top: 2px solid rgba(222,176,34,.65); border-radius: 50%; transform: rotate(-18deg); }
.login-leaves::before { position: absolute; top: 28px; left: 35px; width: 175px; height: 1px; background: rgba(222,176,34,.62); content: ""; transform: rotate(31deg); transform-origin: left; }
.login-leaves span { position: absolute; width: 55px; height: 25px; border: 1px solid rgba(222,176,34,.65); border-radius: 100% 0 100% 0; }
.login-leaves span:nth-child(1) { top: 28px; left: 38px; transform: rotate(17deg); }
.login-leaves span:nth-child(2) { top: 48px; left: 75px; transform: rotate(45deg); }
.login-leaves span:nth-child(3) { top: 72px; left: 112px; transform: rotate(65deg); }
.login-leaves span:nth-child(4) { top: 18px; left: 90px; transform: rotate(205deg); }
.login-leaves span:nth-child(5) { top: 30px; left: 137px; transform: rotate(220deg); }
.login-leaves span:nth-child(6) { top: 58px; left: 173px; transform: rotate(235deg); }

@keyframes login-arrow { to { transform: translateX(4px); opacity: .55; } }

@media (max-width: 980px) {
    .login-card { grid-template-columns: 52% 48%; min-height: 650px; }
    .login-panel { padding: 2.6rem 2.5rem 2rem; }
    .login-art > img { right: -75px; width: 570px; }
    .login-art__shape { right: -260px; }
}

@media (max-width: 760px) {
    .login-stage { padding: 1rem; }
    .login-card { display: block; width: min(520px, 100%); min-height: 0; border-radius: 28px; }
    .login-panel { max-width: none; padding: 2rem 1.5rem 1.6rem; }
    .login-art { height: 270px; overflow: hidden; }
    .login-art__shape { top: -170px; right: -105px; width: 680px; height: 610px; }
    .login-art > img { right: 50%; bottom: -145px; width: 460px; transform: translateX(50%); }
    .login-leaves { top: 8px; right: 10px; transform: scale(.75) rotate(-18deg); transform-origin: top right; }
    .login-heading { margin-top: 1.8rem; }
}

@media (max-width: 430px) {
    .login-stage { padding: 0; }
    .login-card { min-height: 100vh; border: 0; border-radius: 0; }
    .login-panel { padding: 1.4rem 1.2rem 1.35rem; }
    .login-brand__logo { width: 46px; height: 46px; flex-basis: 46px; border-radius: 12px; }
    .login-brand__logo img { width: 40px; height: 40px; }
    .login-heading { margin-top: 1.45rem; }
    .login-heading h1 { font-size: 1.75rem; }
    .login-form { margin-top: 1.45rem; }
    .login-art { height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .login-curtain { display: none; }
}