.login-modern-page {
    --login-ink: #0a2b20;
    --login-muted: #687d75;
    --login-green: #079866;
    --login-lime: #b9f55f;
    display: grid;
    grid-template-columns: minmax(430px, .95fr) minmax(0, 1.05fr);
    min-height: 700px;
    overflow: hidden;
    border: 1px solid rgba(9, 72, 50, .1);
    border-radius: 34px;
    background: #fff;
    box-shadow: 0 32px 80px rgba(9, 52, 38, .13);
    font-family: "Aptos", "Avenir Next", "Segoe UI Variable", sans-serif;
    animation: login-rise 620ms cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes login-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-modern-page *,
.login-modern-page *::before,
.login-modern-page *::after { box-sizing: border-box; }

.login-panel {
    display: flex;
    flex-direction: column;
    padding: clamp(2rem, 4.6vw, 4rem);
    color: var(--login-ink);
    background:
        radial-gradient(circle at 0 100%, rgba(31, 184, 130, .08), transparent 28%),
        #fff;
}

.login-brand {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: var(--login-ink);
}

.login-brand:hover { color: var(--login-ink); }
.login-brand__mark { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(8, 93, 62, .12); border-radius: 17px; background: #eff9f5; }
.login-brand__mark img { width: 44px; height: 44px; display: block; }
.login-brand > span:last-child strong,
.login-brand > span:last-child small { display: block; }
.login-brand > span:last-child strong { font-size: 1.35rem; font-weight: 850; letter-spacing: -.03em; }
.login-brand > span:last-child small { margin-top: .05rem; color: #7a8e86; font-size: .68rem; }

.login-panel__content {
    width: min(500px, 100%);
    margin: auto;
    padding: 2.5rem 0 1rem;
}

.login-panel__header { margin-bottom: 1.8rem; }
.login-eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem; color: #087d55; font-size: .68rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.login-eyebrow span { width: 22px; height: 2px; border-radius: 99px; background: #20b17d; }
.login-panel__header h1 { margin: 0; color: var(--login-ink); font-size: clamp(2.3rem, 4vw, 3.65rem); font-weight: 850; letter-spacing: -.06em; line-height: 1; }
.login-panel__header > p:last-child { margin: .9rem 0 0; color: var(--login-muted); line-height: 1.65; }

.login-fields { display: grid; gap: 1rem; }
.login-field { min-width: 0; }
.login-field__label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.login-field__label label { color: #365249; font-size: .76rem; font-weight: 800; }
.login-field__label a { color: #087d55; font-size: .68rem; font-weight: 800; }
.login-field__control { position: relative; }
.login-field__control input,
.login-field__control select,
.login-field__control textarea {
    width: 100%;
    min-height: 52px;
    padding: .78rem .95rem;
    border: 1px solid rgba(66, 100, 88, .23);
    border-radius: 14px;
    color: var(--login-ink);
    background: #f8fbfa;
    font-family: inherit;
    font-size: .9rem;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.login-field[data-field="username"] input,
.login-field[data-field="password"] input { padding-left: 3rem; }
.login-field__control input:focus { border-color: #19aa77; background: #fff; box-shadow: 0 0 0 4px rgba(25, 170, 119, .1); }
.login-field--error input { border-color: #db5555; background: #fff8f8; }

.login-field__icon {
    position: absolute;
    z-index: 1;
    left: .95rem;
    top: 50%;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: #71877e;
    transform: translateY(-50%);
    pointer-events: none;
}

.login-field__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.login-field__control:focus-within .login-field__icon { color: #099665; }
.login-help { margin-top: .3rem; color: #86978f; font-size: .66rem; }
.login-error { margin: .35rem 0 0; color: #c63f3f; font-size: .69rem; font-weight: 700; }

.login-field[data-field="captcha"] .login-field__control { overflow: hidden; }
.login-field[data-field="captcha"] iframe { max-width: 100%; }

.login-form__errors {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .65rem;
    margin-top: 1rem;
    padding: .8rem .9rem;
    border: 1px solid rgba(205, 64, 64, .18);
    border-radius: 13px;
    color: #b83b3b;
    background: #fff5f5;
    font-size: .74rem;
}

.login-form__errors > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: rgba(205, 64, 64, .08); }
.login-form__errors svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-form__errors p { margin: .25rem 0 0; }

.login-submit {
    width: 100%;
    min-height: 55px;
    margin-top: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(100deg, #087c54, #0bae76);
    box-shadow: 0 16px 32px rgba(8, 137, 91, .2);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 850;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.login-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 38px rgba(8, 137, 91, .28); }
.login-submit svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.login-register { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid rgba(9, 61, 43, .09); color: var(--login-muted); font-size: .78rem; }
.login-register a { color: #087d55; font-weight: 850; }
.login-security { display: flex; align-items: center; justify-content: center; gap: .35rem; margin: .85rem 0 0; color: #94a49e; font-size: .62rem; text-align: center; }
.login-security svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.login-showcase {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(2.4rem, 4.5vw, 4rem);
    color: #effff7;
    background: linear-gradient(145deg, #063b2a, #075f42 65%, #087b54);
}

.login-showcase__grid,
.login-showcase__orb { position: absolute; z-index: -1; pointer-events: none; }
.login-showcase__grid { inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, #000, transparent 90%); }
.login-showcase__orb { width: 440px; height: 440px; top: -270px; right: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(185,245,95,.34), transparent 68%); }

.login-showcase__copy { max-width: 580px; }
.login-showcase__eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; color: rgba(239,255,247,.67); font-size: .68rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.login-showcase__eyebrow span { width: 22px; height: 2px; border-radius: 99px; background: var(--login-lime); }
.login-showcase__copy h2 { margin: 0; color: #fff; font-size: clamp(2.35rem, 4vw, 3.75rem); font-weight: 850; letter-spacing: -.06em; line-height: 1.02; }
.login-showcase__copy > p:last-child { max-width: 500px; margin: 1rem 0 0; color: rgba(238,255,247,.66); line-height: 1.65; }

.login-preview {
    width: min(500px, 100%);
    margin: auto;
    padding: 1.15rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    background: rgba(255,255,255,.09);
    box-shadow: 0 28px 58px rgba(0,33,22,.24);
    backdrop-filter: blur(14px);
    transform: rotate(-1.5deg);
}

.login-preview__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.login-preview__top small,
.login-preview__top strong { display: block; }
.login-preview__top small { color: rgba(239,255,247,.55); font-size: .66rem; }
.login-preview__top strong { margin-top: .12rem; font-size: .95rem; }
.login-preview__top > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #0b4b35; background: var(--login-lime); font-size: .82rem; font-weight: 900; }
.login-preview__progress { height: 6px; margin: 1rem 0; border-radius: 99px; background: rgba(255,255,255,.12); }
.login-preview__progress span { display: block; width: 72%; height: 100%; border-radius: inherit; background: var(--login-lime); }

.login-preview__question { padding: 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: rgba(2,31,21,.28); }
.login-preview__meta { display: flex; justify-content: space-between; color: rgba(239,255,247,.58); font-size: .66rem; }
.login-preview__meta span { color: var(--login-lime); font-weight: 850; text-transform: uppercase; }
.login-preview__question > strong { display: block; margin-top: .5rem; font-size: 1.05rem; }
.login-preview__answer { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .6rem; margin-top: .85rem; padding: .7rem; border: 1px solid rgba(185,245,95,.24); border-radius: 12px; background: rgba(185,245,95,.08); font-size: .72rem; }
.login-preview__answer i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #0a5b3e; background: var(--login-lime); font-style: normal; font-weight: 900; }
.login-preview__answer svg { width: 18px; height: 18px; fill: none; stroke: var(--login-lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.login-preview__tools { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; margin-top: .7rem; }
.login-preview__tools > div { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; padding: .7rem; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.05); }
.login-preview__tools > div > span { width: 34px; height: 34px; grid-row: span 2; display: grid; place-items: center; border-radius: 10px; color: var(--login-lime); background: rgba(185,245,95,.08); }
.login-preview__tools svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.login-preview__tools strong { font-size: .75rem; }
.login-preview__tools small { color: rgba(239,255,247,.5); font-size: .59rem; }

.login-showcase__footer { display: flex; align-items: center; gap: .7rem; margin-top: auto; padding-top: 1.5rem; }
.login-showcase__footer > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #0b533a; background: var(--login-lime); }
.login-showcase__footer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.login-showcase__footer p { margin: 0; }
.login-showcase__footer strong,
.login-showcase__footer small { display: block; }
.login-showcase__footer strong { font-size: .75rem; }
.login-showcase__footer small { margin-top: .1rem; color: rgba(239,255,247,.5); font-size: .63rem; }

html.theme-dark .login-modern-page { border-color: rgba(163,215,193,.13); background: #0b2019; box-shadow: 0 32px 80px rgba(0,0,0,.3); }
html.theme-dark .login-panel { --login-ink: #effff7; --login-muted: #a8beb5; background: radial-gradient(circle at 0 100%, rgba(31,184,130,.07), transparent 28%), #0c211a; }
html.theme-dark .login-brand { color: #effff7; }
html.theme-dark .login-brand__mark { border-color: rgba(172,217,199,.16); background: #102c22; }
html.theme-dark .login-brand__mark img { content: url("../img/examus-logo-dark.svg"); }
html.theme-dark .login-panel__header h1,
html.theme-dark .login-field__label label { color: #effff7; }
html.theme-dark .login-field__control input { color: #effff7; border-color: rgba(172,217,199,.2); background: #102c22; }
html.theme-dark .login-field__control input:focus { background: #123529; }
html.theme-dark .login-register { border-color: rgba(172,217,199,.12); }

@media (max-width: 980px) {
    .login-modern-page { grid-template-columns: 1fr; }
    .login-showcase { min-height: 650px; }
    .login-panel__content { width: min(580px, 100%); padding-top: 3rem; }
}

@media (max-width: 720px) {
    .login-modern-page { border-radius: 25px; }
    .login-panel,
    .login-showcase { padding: 1.4rem; }
    .login-brand__mark { width: 52px; height: 52px; }
    .login-brand__mark img { width: 40px; height: 40px; }
    .login-panel__content { padding: 2.6rem 0 .5rem; }
    .login-panel__header h1 { font-size: 2.65rem; }
    .login-showcase { min-height: 570px; }
    .login-showcase__copy h2 { font-size: 2.4rem; }
    .login-preview { margin: 2.2rem 0; transform: none; }
    .login-preview__tools { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .login-modern-page { animation: none; }
    .login-submit,
    .login-field__control input { transition: none; }
}