:root {
    color-scheme: dark;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    color: #fff;
    background: #11133f;
}

.login-page {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    overflow: hidden;
    padding: 2rem;
    isolation: isolate;
    background:
        radial-gradient(circle at 16% 15%, rgba(95, 226, 205, .24), transparent 30%),
        radial-gradient(circle at 88% 84%, rgba(255, 97, 198, .25), transparent 32%),
        linear-gradient(135deg, #101240 0%, #252768 48%, #12153f 100%);
}

.login-page::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    content: "";
    opacity: .25;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.ambient {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(2px);
    animation: float 9s ease-in-out infinite;
}

.ambient-one { width: 320px; height: 320px; top: -110px; right: 10%; background: linear-gradient(145deg, rgba(79, 219, 210, .58), rgba(45, 126, 255, .12)); }
.ambient-two { width: 260px; height: 260px; bottom: -95px; left: 7%; background: linear-gradient(145deg, rgba(255, 95, 190, .5), rgba(127, 74, 255, .16)); animation-delay: -3s; }
.ambient-three { width: 80px; height: 80px; top: 22%; left: 10%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); animation-delay: -6s; }

.glass-shell {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    width: min(1040px, 100%);
    min-height: 610px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 30px;
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 30px 80px rgba(4, 6, 34, .48), inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(26px) saturate(125%);
    -webkit-backdrop-filter: blur(26px) saturate(125%);
}

.brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 3.5rem;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(23, 218, 195, .16), rgba(98, 62, 208, .12));
    border-right: 1px solid rgba(255,255,255,.16);
}

.brand-panel::after {
    position: absolute;
    width: 360px;
    height: 360px;
    right: -170px;
    bottom: -130px;
    content: "";
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 110px rgba(255,255,255,.025);
}

.brand-logo { position: relative; z-index: 1; width: 158px; padding: 1rem; border: 4px solid rgba(255,255,255,.32); border-radius: 50%; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 16px 36px rgba(4,6,34,.28); }
.brand-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 13px rgba(0,0,0,.22)); }

.brand-copy { margin: auto 0; max-width: 440px; }
.eyebrow { color: #91f2e1; font-size: .72rem; font-weight: 800; letter-spacing: .22em; }
.brand-copy h1 { margin: .75rem 0 1.25rem; font-size: clamp(3.6rem, 7vw, 6.1rem); line-height: .86; letter-spacing: -.07em; }
.brand-copy h1 span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.72); }
.aims-expansion { display: flex; flex-wrap: wrap; gap: .15rem .75rem; max-width: 440px; margin: -.15rem 0 1.15rem; color: #fff; font-size: clamp(1.14rem, 2vw, 1.42rem); font-weight: 800; line-height: 1.35; letter-spacing: -.025em; text-shadow: 0 4px 14px rgba(0,0,0,.22); }
.aims-expansion span { white-space: nowrap; }
.aims-expansion b { display: inline-block; margin-right: .035em; color: #91f2e1; font-size: 1.42em; font-weight: 900; line-height: .8; text-shadow: 0 0 20px rgba(145,242,225,.28); }
.brand-copy .brand-description { max-width: 390px; margin: 0; color: rgba(255,255,255,.7); font-size: .98rem; font-weight: 500; line-height: 1.7; }
.brand-meta { display: flex; gap: 1.3rem; color: rgba(255,255,255,.68); font-size: .78rem; }
.brand-meta i { margin-right: .35rem; color: #91f2e1; }

.form-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.25rem, 5vw, 4.75rem); background: rgba(7, 10, 48, .15); }
.mobile-brand { display: none; }
.form-heading { margin-bottom: 2rem; }
.form-heading h2 { margin: .65rem 0 .55rem; font-size: clamp(1.8rem, 4vw, 2.55rem); letter-spacing: -.04em; }
.form-heading p { margin: 0; color: rgba(255,255,255,.62); line-height: 1.55; }
.login-form { display: grid; gap: .65rem; }
.login-form label { margin-top: .45rem; color: rgba(255,255,255,.8); font-size: .82rem; font-weight: 700; }

.glass-input {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 55px;
    padding: 0 1rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 15px;
    background: rgba(255,255,255,.08);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.glass-input:focus-within { border-color: rgba(145,242,225,.72); background: rgba(255,255,255,.12); box-shadow: 0 0 0 4px rgba(75, 220, 200, .1); }
.glass-input > i { margin-right: .8rem; color: #91f2e1; }
.glass-input input { width: 100%; border: 0; outline: 0; color: #fff; font: inherit; background: transparent; }
.glass-input input::placeholder { color: rgba(255,255,255,.38); }
.password-toggle { padding: .35rem; border: 0; color: rgba(255,255,255,.6); cursor: pointer; background: transparent; }
.password-toggle:hover { color: #fff; }

.login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-height: 55px;
    margin-top: 1.25rem;
    border: 0;
    border-radius: 15px;
    color: #10143b;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    background: linear-gradient(100deg, #8cf0df, #b7f7ec);
    box-shadow: 0 12px 28px rgba(60, 220, 197, .22);
    transition: transform .2s ease, box-shadow .2s ease;
}
.login-button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(60, 220, 197, .3); }
.login-button i { transition: transform .2s ease; }
.login-button:hover i { transform: translateX(4px); }

.login-alert { display: flex; gap: .7rem; align-items: center; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid rgba(255,138,163,.35); border-radius: 13px; color: #ffd5df; background: rgba(190, 34, 76, .2); font-size: .86rem; }
.login-note { margin: 1.6rem 0 0; color: rgba(255,255,255,.48); font-size: .76rem; line-height: 1.55; }
.login-note i { margin-right: .35rem; }
.page-footer { position: absolute; bottom: .7rem; margin: 0; color: rgba(255,255,255,.42); font-size: .72rem; }

@keyframes float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-18px,0); } }

@media (max-width: 800px) {
    .login-page { padding: 1.25rem; }
    .glass-shell { display: block; width: min(480px,100%); min-height: auto; border-radius: 24px; }
    .brand-panel { display: none; }
    .form-panel { min-height: 600px; padding: 2.25rem; }
    .mobile-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: auto; color: rgba(255,255,255,.82); font-weight: 800; }
    .mobile-brand img { width: 62px; height: 62px; padding: .35rem; object-fit: contain; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; background: #fff; filter: drop-shadow(0 7px 10px rgba(0,0,0,.22)); }
    .mobile-name { max-width: 270px; color: #fff; font-size: .9rem; font-weight: 800; line-height: 1.45; }
    .mobile-name b { color: #91f2e1; font-size: 1.35em; font-weight: 900; }
    .form-heading { margin-top: 3rem; }
    .login-note { margin-bottom: auto; }
}

@media (max-width: 420px) {
    .login-page { padding: .75rem; }
    .form-panel { min-height: calc(100vh - 1.5rem); padding: 1.6rem; }
    .glass-shell { border-radius: 20px; }
    .page-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}