:root {
    --academy-ink: #101d4d;
    --academy-muted: #687293;
    --academy-blue: #315cf4;
    --academy-violet: #5b31e8;
    --academy-line: #d8def0;
    --academy-paper: #fbfcff;
    --academy-danger: #c23d57;
}

* { box-sizing: border-box; }

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--academy-ink);
    background:
        radial-gradient(circle at 15% 15%, rgba(113, 99, 255, 0.11), transparent 23rem),
        radial-gradient(circle at 85% 87%, rgba(69, 119, 255, 0.1), transparent 27rem),
        #f8f9ff;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

.academy-login {
    display: flex;
    min-height: 100vh;
    padding: clamp(1rem, 5vw, 5rem);
    align-items: center;
    justify-content: center;
}

.academy-login__shell {
    display: grid;
    width: min(100%, 83rem);
    min-height: min(48rem, calc(100vh - 4rem));
    overflow: hidden;
    border: 1px solid #d8dcff;
    border-radius: 1.4rem;
    background: #ffffff;
    box-shadow: 0 1.4rem 3.5rem rgba(35, 53, 121, 0.13);
    grid-template-columns: minmax(22rem, 1fr) minmax(25rem, 0.98fr);
}

.academy-login__brand-panel {
    position: relative;
    display: flex;
    min-height: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.98), rgba(250, 250, 255, 0.97) 42%, rgba(239, 241, 255, 0.98)),
        #f7f8ff;
    align-items: center;
    justify-content: center;
}

.academy-login__brand-panel::before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(100, 110, 224, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 110, 224, 0.035) 1px, transparent 1px);
    background-size: 2.2rem 2.2rem;
    content: "";
    opacity: 0.65;
}

.academy-login__corner {
    position: absolute;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(97, 83, 239, 0.78), rgba(115, 145, 255, 0.43));
}

.academy-login__corner--top { top: -6.6rem; left: -5.8rem; }

.academy-login__corner--bottom {
    bottom: -8rem;
    left: -4rem;
    width: 17rem;
    height: 17rem;
    background: linear-gradient(135deg, rgba(45, 55, 192, 0.96), rgba(88, 87, 235, 0.72));
    box-shadow: 1.1rem -0.35rem 0 rgba(140, 138, 255, 0.16);
}

.academy-login__formula {
    position: absolute;
    z-index: 1;
    color: rgba(81, 86, 195, 0.22);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1rem, 1.6vw, 1.45rem);
    font-style: italic;
    pointer-events: none;
}

.academy-login__formula--one { top: 10%; left: 37%; transform: rotate(-13deg); }
.academy-login__formula--two { bottom: 34%; left: 8%; transform: rotate(-8deg); }
.academy-login__formula--three { right: 8%; bottom: 29%; transform: rotate(6deg); }
.academy-login__formula--four { bottom: 19%; left: 44%; }

.academy-login__dots {
    position: absolute;
    top: 28%;
    left: 9%;
    width: 3.9rem;
    height: 2.7rem;
    background-image: radial-gradient(circle, rgba(87, 89, 233, 0.33) 0.16rem, transparent 0.18rem);
    background-size: 0.85rem 0.85rem;
}

.academy-login__circle {
    position: absolute;
    border: 2px solid rgba(87, 89, 233, 0.24);
    border-radius: 50%;
}

.academy-login__circle--one { top: 19%; left: 24%; width: 1.8rem; height: 1.8rem; }
.academy-login__circle--two { top: 10%; right: 25%; width: 1.7rem; height: 1.7rem; }

.academy-login__triangle {
    position: absolute;
    top: 29%;
    right: 10%;
    width: 0;
    height: 0;
    border-right: 0.65rem solid transparent;
    border-bottom: 1.15rem solid rgba(99, 91, 245, 0.43);
    border-left: 0.65rem solid transparent;
    transform: rotate(8deg);
}

.academy-login__wave {
    position: absolute;
    right: -7%;
    bottom: -18%;
    left: -8%;
    height: 39%;
    border-top: 1px solid rgba(109, 119, 235, 0.2);
    border-radius: 50% 50% 0 0;
    background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 0.72rem, rgba(104, 113, 231, 0.12) 0.75rem 0.8rem, transparent 0.83rem 1.55rem);
    opacity: 0.7;
    transform: perspective(21rem) rotateX(58deg);
    transform-origin: bottom;
}

.academy-login__brand-content {
    position: relative;
    z-index: 2;
    width: min(82%, 26rem);
    margin-top: -1rem;
    text-align: center;
}

.academy-login__logo {
    display: block;
    width: clamp(5.5rem, 10vw, 8rem);
    height: clamp(5.5rem, 10vw, 8rem);
    margin: 0 auto 1.35rem;
    object-fit: contain;
}

.academy-login h1 {
    margin: 0;
    color: var(--academy-ink);
    font-size: clamp(2rem, 3.8vw, 3.25rem);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.1;
}

.academy-login h1 strong { font-weight: 900; }

.academy-login__brand-line {
    display: block;
    width: 4rem;
    height: 0.16rem;
    margin: 0.75rem auto;
    border-radius: 999px;
    background: #f3b521;
}

.academy-login__brand-content p {
    margin: 0;
    color: #505a7c;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
}

.academy-login__form-panel {
    display: flex;
    min-width: 0;
    padding: clamp(2rem, 6vw, 5.75rem);
    background: #ffffff;
    align-items: center;
    justify-content: center;
}

.academy-login__form-wrap { width: min(100%, 28rem); }
.academy-login__mobile-brand { display: none; }

.academy-login h2 {
    margin: 0;
    color: var(--academy-ink);
    font-size: clamp(2rem, 3.1vw, 2.7rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1.15;
}

.academy-login__intro {
    margin: 0.7rem 0 2.4rem;
    color: var(--academy-muted);
    font-size: 0.96rem;
    line-height: 1.55;
}

.academy-login__field { margin-bottom: 1.35rem; }

.academy-login__field > label {
    display: block;
    margin: 0 0 0.5rem;
    color: #273254;
    font-size: 0.86rem;
    font-weight: 800;
}

.academy-login__input {
    display: flex;
    min-height: 3.35rem;
    overflow: hidden;
    border: 1px solid var(--academy-line);
    border-radius: 0.6rem;
    background: #ffffff;
    align-items: center;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.academy-login__input:focus-within {
    border-color: var(--academy-blue);
    box-shadow: 0 0 0 0.22rem rgba(49, 92, 244, 0.11);
}

.academy-login__input--error { border-color: var(--academy-danger); }

.academy-login__input > i {
    width: 3.1rem;
    color: var(--academy-violet);
    font-size: 1.22rem;
    text-align: center;
}

.academy-login__input input {
    width: 100%;
    min-width: 0;
    padding: 0.85rem 0.3rem 0.85rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--academy-ink);
    font: inherit;
    font-size: 0.95rem;
}

.academy-login__input input::placeholder { color: #9aa3bb; }

.academy-login__password-toggle {
    display: inline-flex;
    width: 3.2rem;
    align-self: stretch;
    border: 0;
    background: transparent;
    color: #77809b;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.academy-login__password-toggle:hover,
.academy-login__password-toggle:focus { color: var(--academy-violet); outline: 0; }

.academy-login__error {
    margin: 0.38rem 0 0;
    color: var(--academy-danger);
    font-size: 0.78rem;
    font-weight: 700;
}

.academy-login__options {
    display: flex;
    margin: 1.55rem 0 1.7rem;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.academy-login__remember {
    display: inline-flex;
    gap: 0.5rem;
    color: var(--academy-muted);
    font-size: 0.84rem;
    align-items: center;
    cursor: pointer;
}

.academy-login__remember input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--academy-violet);
}

.academy-login__options a,
.academy-login__register a {
    color: var(--academy-violet);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
}

.academy-login__options a:hover,
.academy-login__register a:hover { text-decoration: underline; }

.academy-login__submit {
    display: flex;
    width: 100%;
    min-height: 3.45rem;
    padding: 0.8rem 1rem;
    border: 0;
    border-radius: 0.58rem;
    background: linear-gradient(105deg, var(--academy-violet), var(--academy-blue));
    box-shadow: 0 0.65rem 1.2rem rgba(69, 61, 214, 0.2);
    color: #ffffff;
    font: inherit;
    font-size: 0.96rem;
    font-weight: 800;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    transition: box-shadow 160ms ease, filter 160ms ease, transform 160ms ease;
}

.academy-login__submit span { margin-left: auto; }
.academy-login__submit i { margin-right: 0.1rem; margin-left: auto; font-size: 1.35rem; }

.academy-login__submit:hover,
.academy-login__submit:focus {
    outline: 0;
    box-shadow: 0 0.82rem 1.45rem rgba(69, 61, 214, 0.28);
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.academy-login__register {
    margin: 2.1rem 0 0;
    color: var(--academy-muted);
    font-size: 0.86rem;
    text-align: center;
}

@media (max-width: 980px) {
    .academy-login { padding: 1.5rem; }
    .academy-login__shell { grid-template-columns: minmax(19rem, 0.88fr) minmax(23rem, 1.12fr); }
    .academy-login__form-panel { padding: clamp(2rem, 5vw, 3.5rem); }
}

@media (max-width: 720px) {
    .academy-login { display: block; min-height: 100svh; padding: 0; }

    .academy-login__shell {
        display: flex;
        min-height: 100svh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        flex-direction: column;
    }

    .academy-login__brand-panel {
        flex: 0 0 13.5rem;
        min-height: 13.5rem;
    }

    .academy-login__brand-content { width: 92%; margin: 0; }
    .academy-login__logo { width: 3.8rem; height: 3.8rem; margin-bottom: 0.65rem; }
    .academy-login__logo { filter: drop-shadow(0 0.3rem 0.45rem rgba(34, 44, 122, 0.13)); }
    .academy-login h1 {
        font-size: 2.1rem;
        text-shadow: 0 1px 0 #ffffff, 0 0.2rem 0.7rem rgba(255, 255, 255, 0.9);
    }
    .academy-login__brand-content p {
        font-size: 0.9rem;
        text-shadow: 0 1px 0 #ffffff, 0 0.18rem 0.55rem rgba(255, 255, 255, 0.92);
    }
    .academy-login__brand-line { margin: 0.48rem auto; }
    .academy-login__corner--bottom {
        bottom: -13rem;
        left: -6rem;
        width: 16rem;
        height: 16rem;
    }
    .academy-login__formula--two, .academy-login__formula--three, .academy-login__formula--four, .academy-login__dots, .academy-login__wave { display: none; }

    .academy-login__form-panel { display: block; padding: 2rem clamp(1.25rem, 7vw, 3rem) 2.8rem; }
    .academy-login__form-wrap { margin: 0 auto; }
    .academy-login__mobile-brand { display: none; }
}

@media (max-width: 390px) {
    .academy-login__brand-panel { flex-basis: 12rem; min-height: 12rem; }
    .academy-login__form-panel { padding: 1.7rem 1.15rem 2.2rem; }
    .academy-login__intro { margin-bottom: 1.7rem; }
    .academy-login__options { flex-direction: column; align-items: flex-start; gap: 0.72rem; }
}

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