.auth-body {
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f5f6ff;
}

.auth-page {
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    place-items: center;
    padding: 1.25rem;
    color: #101936;
    background:
        repeating-linear-gradient(45deg, rgba(101, 84, 232, .035) 0 1px, transparent 1px 42px),
        linear-gradient(135deg, #f2efff 0%, #f5fbfd 52%, #ffffff 100%);
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    width: min(1160px, 100%);
    min-height: min(700px, calc(100svh - 2.5rem));
    max-height: calc(100svh - 2.5rem);
    overflow: hidden;
    border: 1px solid rgba(16, 25, 54, .09);
    border-radius: 1.5rem;
    background: #ffffff;
    box-shadow: 0 32px 90px rgba(16, 25, 54, .16);
}

.auth-hero,
.auth-login-panel {
    min-width: 0;
}

.auth-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: 2.35rem 2.65rem 2.15rem;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(145deg, #101936 0%, #24105f 56%, #4937c7 100%);
}

.auth-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    opacity: .32;
    background: repeating-linear-gradient(45deg, transparent 0 38px, rgba(255, 255, 255, .055) 38px 39px);
}

.auth-hero::after {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    width: 42%;
    height: 5px;
    content: "";
    background: linear-gradient(90deg, #16b8d9, #1fc7a5, #ffb84d);
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    width: fit-content;
    min-height: 3rem;
}

.auth-brand img {
    display: block;
    flex: 0 0 auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .16));
}

.auth-brand-unikoc {
    width: 8.8rem;
}

.auth-brand > span {
    width: 1px;
    height: 2.25rem;
    background: rgba(255, 255, 255, .2);
}

.auth-brand-atlas {
    width: 10.8rem;
    max-height: 3.35rem;
}

.auth-hero-copy {
    margin-top: 2.45rem;
}

.auth-kicker {
    margin: 0 0 .75rem;
    color: #a9f2fb;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.auth-hero-copy h1 {
    max-width: 560px;
    margin: 0;
    color: #ffffff;
    font-family: Manrope, "Plus Jakarta Sans", sans-serif;
    font-size: 2.7rem;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: 0;
}

.auth-hero-copy > p:last-child {
    max-width: 530px;
    margin: .95rem 0 0;
    color: rgba(255, 255, 255, .70);
    font-size: .94rem;
    font-weight: 600;
    line-height: 1.65;
}

.auth-feature-carousel {
    margin-top: 2rem;
    padding: 1.05rem 0 .85rem;
    border-top: 1px solid rgba(255, 255, 255, .13);
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.auth-feature-stage {
    min-height: 5.75rem;
}

.auth-feature-slide {
    display: grid;
    grid-template-columns: 3.45rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.auth-feature-slide[hidden] {
    display: none;
}

.auth-feature-slide.is-active {
    animation: auth-feature-in .34s ease both;
}

@keyframes auth-feature-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-feature-icon {
    display: grid;
    width: 3.45rem;
    height: 3.45rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .10);
    color: #ffffff;
}

.auth-feature-icon svg {
    width: 1.7rem;
    height: 1.7rem;
}

.auth-feature-icon--cyan { color: #71dff0; }
.auth-feature-icon--mint { color: #6ee7c8; }
.auth-feature-icon--rose { color: #ff9bb0; }
.auth-feature-icon--amber { color: #ffd08a; }

.auth-feature-slide div > span {
    display: block;
    color: #71dff0;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.auth-feature-slide strong {
    display: block;
    margin-top: .24rem;
    color: #ffffff;
    font-family: Manrope, "Plus Jakarta Sans", sans-serif;
    font-size: 1.22rem;
    font-weight: 800;
}

.auth-feature-slide p {
    max-width: 470px;
    margin: .35rem 0 0;
    color: rgba(255, 255, 255, .66);
    font-size: .79rem;
    font-weight: 600;
    line-height: 1.5;
}

.auth-feature-nav {
    display: flex;
    align-items: center;
    gap: .34rem;
    margin-top: .7rem;
    padding-left: 4.45rem;
}

.auth-feature-nav button {
    width: .42rem;
    height: .42rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .24);
    transition: width .2s ease, border-radius .2s ease, background-color .2s ease;
}

.auth-feature-nav button.is-active {
    width: 1.35rem;
    border-radius: 999px;
    background: #71dff0;
}

.auth-feature-nav button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.auth-feature-count {
    margin-left: auto;
    color: rgba(255, 255, 255, .42);
    font-size: .6rem;
    font-weight: 800;
}

.auth-feature-count b {
    color: #ffffff;
    font-weight: 900;
}

.auth-promises {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-top: auto;
    padding-top: 1.7rem;
}

.auth-promises > div {
    display: flex;
    gap: .65rem;
    min-width: 0;
    align-items: flex-start;
}

.auth-promises i {
    display: grid;
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #71dff0;
    font-size: .6rem;
    font-style: normal;
    font-weight: 900;
}

.auth-promises span,
.auth-promises strong,
.auth-promises small {
    display: block;
    min-width: 0;
}

.auth-promises strong {
    color: #ffffff;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.25;
}

.auth-promises small {
    margin-top: .18rem;
    color: rgba(255, 255, 255, .52);
    font-size: .63rem;
    font-weight: 600;
    line-height: 1.35;
}

.auth-login-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2.8rem;
    background: #ffffff;
}

.auth-login-card {
    width: min(100%, 420px);
}

.auth-card-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #6554e8;
    font-size: .7rem;
    font-weight: 900;
}

.auth-card-badge i,
.auth-footnote > span i {
    display: inline-block;
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: #1fc7a5;
    box-shadow: 0 0 0 4px rgba(31, 199, 165, .12);
}

.auth-card-heading h2 {
    margin: .75rem 0 0;
    color: #101936;
    font-family: Manrope, "Plus Jakarta Sans", sans-serif;
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: 0;
}

.auth-card-heading p {
    margin: .5rem 0 0;
    color: #667085;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.55;
}

.auth-alert {
    display: flex;
    gap: .65rem;
    margin-top: 1rem;
    padding: .8rem .9rem;
    border: 1px solid #fecdd3;
    border-radius: .65rem;
    background: #fff1f2;
    color: #b42318;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.45;
}

.auth-alert svg {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .05rem;
}

.auth-alert--info {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.auth-form {
    display: grid;
    gap: .9rem;
    margin-top: 1.45rem;
}

.auth-field > span:first-child {
    display: block;
    margin-bottom: .38rem;
    color: #344054;
    font-size: .78rem;
    font-weight: 800;
}

.auth-field-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    margin-bottom: .38rem;
}

.auth-field-heading > label {
    color: #344054;
    font-size: .78rem;
    font-weight: 800;
}

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-wrap > svg {
    position: absolute;
    left: 1rem;
    width: 1.15rem;
    height: 1.15rem;
    color: #667085;
    pointer-events: none;
}

.auth-input-wrap input {
    width: 100%;
    min-height: 3.45rem;
    padding: 0 3rem;
    border: 1px solid #d8dce6;
    border-radius: .75rem;
    outline: none;
    background: #ffffff;
    color: #101936;
    font-size: .88rem;
    font-weight: 700;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.auth-input-wrap input::placeholder {
    color: #98a2b3;
    font-weight: 600;
}

.auth-input-wrap input:focus {
    border-color: #6554e8;
    box-shadow: 0 0 0 4px rgba(101, 84, 232, .12);
}

.dark .auth-field-heading > label { color: #e2e8f0; }

.auth-password-toggle {
    position: absolute;
    right: .65rem;
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #667085;
    transition: color .18s ease, background-color .18s ease;
}

.auth-password-toggle:hover {
    background: #f0eeff;
    color: #6554e8;
}

.auth-password-toggle svg {
    width: 1.05rem;
    height: 1.05rem;
}

.auth-form-meta {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
}

.auth-access-options {
    display: grid;
    gap: .65rem;
    padding: .72rem .78rem;
    border: 1px solid #e8eaf2;
    border-radius: .75rem;
    background: #fafbff;
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #344054;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
}

.auth-remember input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: #6554e8;
}

.auth-remember span {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
}

.auth-remember small {
    color: #98a2b3;
    font-size: .64rem;
    font-weight: 700;
}

.auth-consent {
    display: flex;
    gap: .55rem;
    min-width: 0;
    align-items: flex-start;
    color: #667085;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.45;
}

.auth-legal-consents {
    display: grid;
    gap: .45rem;
    padding-top: .65rem;
    border-top: 1px solid #e8eaf2;
}

.auth-legal-consents .auth-consent {
    font-size: .65rem;
}

.auth-consent input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: .08rem 0 0;
    accent-color: #6554e8;
}

.auth-consent a,
.auth-help,
.auth-footnote a {
    color: #6554e8;
    font-weight: 800;
}

.auth-help {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: .7rem;
    white-space: nowrap;
}

.auth-help:hover,
.auth-consent a:hover,
.auth-footnote a:hover {
    text-decoration: underline;
}

.auth-help-note {
    margin: -.35rem 0 0;
    padding: .65rem .75rem;
    border-left: 3px solid #16b8d9;
    border-radius: .35rem;
    background: #effbfe;
    color: #344054;
    font-size: .73rem;
    font-weight: 700;
}

.auth-identity-warning {
    display: flex;
    gap: .4rem;
    align-items: flex-start;
    margin: -.45rem 0 0;
    padding: .58rem .68rem;
    border: 1px solid #fed7aa;
    border-radius: .55rem;
    background: #fff7ed;
    color: #9a3412;
    font-size: .69rem;
    font-weight: 750;
    line-height: 1.42;
}

.auth-identity-warning::before {
    content: "!";
    display: grid;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: .02rem;
    place-items: center;
    border-radius: 50%;
    background: #f97316;
    color: #fff;
    font-size: .62rem;
    font-weight: 900;
}

.auth-identity-warning[hidden] {
    display: none;
}

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 3.5rem;
    margin-top: .15rem;
    border: 0;
    border-radius: .75rem;
    background: linear-gradient(105deg, #24105f, #6554e8);
    color: #ffffff;
    font-size: .9rem;
    font-weight: 900;
    box-shadow: 0 15px 30px rgba(101, 84, 232, .24);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.auth-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 18px 34px rgba(101, 84, 232, .30);
}

.auth-submit:active {
    transform: translateY(0);
}

.auth-submit:disabled {
    cursor: wait;
    opacity: .78;
    transform: none;
}

.auth-submit svg {
    width: 1.15rem;
    height: 1.15rem;
}

.auth-support-bar {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: .7rem;
    border: 1px solid #e7e5fa;
    border-radius: .75rem;
    background: #f8f7ff;
}

.auth-support-bar > span {
    min-width: 0;
}

.auth-support-bar strong,
.auth-support-bar small {
    display: block;
}

.auth-support-bar strong {
    color: #24105f;
    font-size: .72rem;
    font-weight: 900;
}

.auth-support-bar small {
    margin-top: .12rem;
    color: #667085;
    font-size: .6rem;
    font-weight: 650;
    line-height: 1.3;
}

.auth-support-bar > div {
    display: flex;
    flex: 0 0 auto;
    gap: .38rem;
}

.auth-support-action {
    display: inline-flex;
    min-height: 2.15rem;
    gap: .38rem;
    align-items: center;
    justify-content: center;
    padding: .4rem .6rem;
    border: 1px solid #d9d4fb;
    border-radius: .55rem;
    background: #fff;
    color: #4f3dc8;
    font-size: .62rem;
    font-weight: 900;
    white-space: nowrap;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.auth-support-action:hover {
    transform: translateY(-1px);
    border-color: #8b7df0;
    background: #f1efff;
}

.auth-support-action svg {
    width: .95rem;
    height: .95rem;
}

.auth-support-action--whatsapp {
    border-color: #bbf7d0;
    color: #067647;
}

.auth-support-action--whatsapp:hover {
    border-color: #4ade80;
    background: #ecfdf3;
}

.auth-submit-spinner {
    animation: auth-spin .78s linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

.auth-footnote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid #eaecf0;
    color: #667085;
    font-size: .68rem;
    font-weight: 650;
    line-height: 1.4;
}

.auth-footnote > span {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
}

.auth-footnote > span i {
    width: .38rem;
    height: .38rem;
    box-shadow: none;
}

.auth-footnote div {
    display: inline-flex;
    gap: .75rem;
}

.auth-guide-modal[hidden] {
    display: none;
}

.auth-legal-modal[hidden] {
    display: none;
}

.auth-modal-open {
    overflow: hidden;
}

.auth-guide-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    padding: 1rem;
    place-items: center;
}

.auth-legal-modal {
    position: fixed;
    z-index: 1010;
    inset: 0;
    display: grid;
    padding: 1rem;
    place-items: center;
}

.auth-legal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(16, 25, 54, .68);
    backdrop-filter: blur(7px);
}

.auth-legal-card {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(100%, 48rem);
    max-height: min(90dvh, 50rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 1rem;
    outline: 0;
    background: #f8fafc;
    box-shadow: 0 32px 90px rgba(16, 25, 54, .34);
    animation: auth-guide-in .2s ease both;
}

.auth-legal-heading {
    display: grid;
    grid-template-columns: 2.7rem minmax(0, 1fr) 2rem;
    gap: .8rem;
    align-items: center;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #e4e7ec;
    background: #ffffff;
}

.auth-legal-icon {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border-radius: .7rem;
    background: #eeebff;
    color: #5947d9;
}

.auth-legal-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.auth-legal-heading small {
    display: block;
    color: #6554e8;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.auth-legal-heading h3 {
    margin: .18rem 0 0;
    color: #101936;
    font-family: Manrope, "Plus Jakarta Sans", sans-serif;
    font-size: 1.12rem;
    font-weight: 850;
    line-height: 1.25;
}

.auth-legal-close {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f2f4f7;
    color: #475467;
    font-size: 1.25rem;
    line-height: 1;
}

.auth-legal-content {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    scrollbar-gutter: stable;
}

.auth-legal-content > article {
    max-width: none;
}

.auth-legal-content > article > header,
.auth-legal-content > article > div,
.auth-legal-content > article > p {
    box-shadow: none;
}

.auth-legal-loading,
.auth-legal-error {
    display: flex;
    min-height: 14rem;
    gap: .75rem;
    align-items: center;
    justify-content: center;
    color: #475467;
    font-size: .82rem;
}

.auth-legal-loading > span {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #d9d4fb;
    border-top-color: #6554e8;
    border-radius: 50%;
    animation: auth-spin .7s linear infinite;
}

.auth-legal-error {
    flex-direction: column;
    text-align: center;
}

.auth-legal-error strong {
    color: #b42318;
}

.auth-legal-error button {
    min-height: 2.5rem;
    padding: .45rem .85rem;
    border: 0;
    border-radius: .6rem;
    background: #6554e8;
    color: #ffffff;
    font-size: .75rem;
    font-weight: 850;
}

.auth-guide-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(16, 25, 54, .64);
    backdrop-filter: blur(7px);
}

.auth-guide-card {
    position: relative;
    width: min(100%, 31rem);
    max-height: min(90dvh, 42rem);
    overflow-y: auto;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: .9rem;
    outline: 0;
    background: #fff;
    box-shadow: 0 30px 80px rgba(16, 25, 54, .3);
    animation: auth-guide-in .2s ease both;
}

@keyframes auth-guide-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-guide-heading {
    display: grid;
    grid-template-columns: 2.7rem minmax(0, 1fr) 2rem;
    gap: .8rem;
    align-items: center;
}

.auth-guide-icon {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border-radius: .7rem;
    background: #eeebff;
    color: #5947d9;
}

.auth-guide-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.auth-guide-heading small {
    color: #6554e8;
    font-size: .6rem;
    font-weight: 900;
}

.auth-guide-heading h3 {
    margin: .18rem 0 0;
    color: #101936;
    font-family: Manrope, "Plus Jakarta Sans", sans-serif;
    font-size: 1.12rem;
    font-weight: 850;
    line-height: 1.25;
}

.auth-guide-close {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f2f4f7;
    color: #475467;
    font-size: 1.25rem;
    line-height: 1;
}

.auth-guide-steps {
    display: grid;
    gap: .55rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.auth-guide-steps li {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    gap: .65rem;
    align-items: start;
    padding: .72rem;
    border: 1px solid #eaecf0;
    border-radius: .65rem;
    background: #fbfcfe;
}

.auth-guide-steps li > b {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: .5rem;
    background: #24105f;
    color: #fff;
    font-size: .7rem;
}

.auth-guide-steps strong,
.auth-guide-steps small {
    display: block;
}

.auth-guide-steps strong {
    color: #1d2939;
    font-size: .76rem;
    font-weight: 900;
}

.auth-guide-steps small {
    margin-top: .16rem;
    color: #667085;
    font-size: .69rem;
    font-weight: 600;
    line-height: 1.45;
}

.auth-guide-whatsapp {
    display: flex;
    min-height: 2.9rem;
    gap: .55rem;
    align-items: center;
    justify-content: center;
    border-radius: .65rem;
    background: #067647;
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
}

.auth-guide-whatsapp:hover {
    background: #05603a;
}

.auth-guide-whatsapp svg {
    width: 1rem;
    height: 1rem;
}

.auth-ready .auth-brand,
.auth-ready .auth-hero-copy,
.auth-ready .auth-feature-carousel,
.auth-ready .auth-promises,
.auth-ready .auth-login-card {
    animation: auth-rise .35s ease both;
}

.auth-ready .auth-hero-copy { animation-delay: .04s; }
.auth-ready .auth-feature-carousel { animation-delay: .08s; }
.auth-ready .auth-promises { animation-delay: .12s; }
.auth-ready .auth-login-card { animation-delay: .06s; }

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

.dark .auth-page {
    background: #0c1224;
}

.dark .auth-shell {
    border-color: #313e59;
    background: #192132;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .35);
}

.dark .auth-login-panel {
    background: #192132;
}

.dark .auth-card-heading h2,
.dark .auth-field > span:first-child {
    color: #ffffff;
}

.dark .auth-card-heading p,
.dark .auth-consent,
.dark .auth-footnote {
    color: #c2c9d6;
}

.dark .auth-access-options {
    border-color: #384660;
    background: #202b40;
}

.dark .auth-legal-consents {
    border-top-color: #384660;
}

.dark .auth-input-wrap input {
    border-color: #465675;
    background: #202b40;
    color: #ffffff;
}

.dark .auth-input-wrap input::placeholder,
.dark .auth-input-wrap > svg,
.dark .auth-password-toggle {
    color: #a3adc2;
}

.dark .auth-input-wrap input:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, .14);
}

.dark .auth-help-note {
    background: #202b40;
    color: #e7e9ef;
}

.dark .auth-identity-warning {
    border-color: #7c2d12;
    background: #431407;
    color: #fed7aa;
}

.dark .auth-support-bar {
    border-color: #3b4560;
    background: #202b40;
}

.dark .auth-support-bar strong,
.dark .auth-guide-heading h3,
.dark .auth-guide-steps strong {
    color: #fff;
}

.dark .auth-support-bar small,
.dark .auth-guide-steps small {
    color: #c2c9d6;
}

.dark .auth-support-action {
    border-color: #465675;
    background: #192132;
    color: #c8c2ff;
}

.dark .auth-support-action--whatsapp {
    border-color: #166534;
    color: #86efac;
}

.dark .auth-guide-card {
    border-color: #465675;
    background: #192132;
}

.dark .auth-legal-card {
    border-color: #465675;
    background: #192132;
}

.dark .auth-legal-heading {
    border-bottom-color: #384660;
    background: #192132;
}

.dark .auth-legal-heading h3 {
    color: #ffffff;
}

.dark .auth-legal-content {
    color: #e7e9ef;
}

.dark .auth-guide-close,
.dark .auth-guide-steps li,
.dark .auth-legal-close {
    border-color: #3b4560;
    background: #202b40;
    color: #d0d5dd;
}

.dark .auth-footnote {
    border-top-color: #313e59;
}

@media (max-width: 900px) {
    .auth-body {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .auth-page {
        display: block;
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
        padding: 0;
    }

    .auth-shell {
        grid-template-rows: minmax(190px, 34dvh) minmax(0, 1fr);
        grid-template-columns: 1fr;
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-hero {
        min-height: 0;
        padding: clamp(.8rem, 2.2vh, 1.2rem) clamp(1rem, 4vw, 1.4rem);
    }

    .auth-brand {
        gap: .75rem;
        min-height: 2rem;
    }

    .auth-brand-unikoc {
        width: clamp(6.2rem, 22vw, 8rem);
    }

    .auth-brand > span {
        height: 1.7rem;
    }

    .auth-brand-atlas {
        width: clamp(7.5rem, 27vw, 9.5rem);
        max-height: 2.55rem;
    }

    .auth-hero-copy,
    .auth-promises {
        display: none;
    }

    .auth-feature-carousel {
        display: block;
        margin-top: auto;
        margin-bottom: auto;
        padding: clamp(.48rem, 1.4vh, .7rem) 0 clamp(.4rem, 1.2vh, .6rem);
    }

    .auth-feature-stage {
        min-height: 4.2rem;
    }

    .auth-feature-slide {
        grid-template-columns: 2.7rem minmax(0, 1fr);
        gap: .75rem;
    }

    .auth-feature-icon {
        width: 2.7rem;
        height: 2.7rem;
        border-radius: .72rem;
    }

    .auth-feature-icon svg {
        width: 1.35rem;
        height: 1.35rem;
    }

    .auth-feature-slide div > span {
        font-size: .52rem;
    }

    .auth-feature-slide strong {
        margin-top: .12rem;
        font-size: clamp(.9rem, 3.5vw, 1.08rem);
        line-height: 1.15;
    }

    .auth-feature-slide p {
        display: -webkit-box;
        overflow: hidden;
        margin-top: .2rem;
        font-size: clamp(.64rem, 2.5vw, .73rem);
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .auth-feature-nav {
        gap: .3rem;
        margin-top: .35rem;
        padding-left: 3.45rem;
    }

    .auth-login-panel {
        min-height: 0;
        align-items: center;
        overflow: hidden;
        padding: clamp(.8rem, 2.2vh, 1.35rem) clamp(1rem, 4vw, 1.4rem);
    }

    .auth-login-card {
        width: min(100%, 520px);
        margin: 0 auto;
    }

    .auth-card-heading h2 {
        margin-top: .42rem;
        font-size: clamp(1.28rem, 5vw, 1.65rem);
    }

    .auth-form {
        gap: clamp(.5rem, 1.35vh, .75rem);
        margin-top: clamp(.65rem, 1.8vh, 1rem);
    }

    .auth-field > span:first-child {
        margin-bottom: .24rem;
        font-size: .7rem;
    }

    .auth-input-wrap input {
        min-height: clamp(2.75rem, 7vh, 3.15rem);
        font-size: .8rem;
    }

    .auth-submit {
        min-height: clamp(2.8rem, 7vh, 3.15rem);
    }

    .auth-footnote {
        margin-top: clamp(.55rem, 1.4vh, .9rem);
        padding-top: clamp(.5rem, 1.2vh, .75rem);
    }

    .auth-body.auth-keyboard-open,
    .auth-body.auth-keyboard-open .auth-page,
    .auth-body.auth-keyboard-open .auth-shell {
        height: var(--auth-visual-viewport-height, 100dvh);
        min-height: var(--auth-visual-viewport-height, 100dvh);
        max-height: var(--auth-visual-viewport-height, 100dvh);
    }

    .auth-body.auth-keyboard-open .auth-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
    }

    .auth-body.auth-keyboard-open .auth-hero {
        display: none;
    }

    .auth-body.auth-keyboard-open .auth-login-panel {
        align-items: flex-start;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-top: .75rem;
        padding-bottom: 1.25rem;
    }

    .auth-body.auth-keyboard-open .auth-login-card {
        margin-top: 0;
        margin-bottom: auto;
    }
}

@media (max-width: 480px) {
    .auth-login-panel {
        padding-right: .9rem;
        padding-left: .9rem;
    }

    .auth-form-meta {
        gap: .55rem;
    }

    .auth-help {
        align-self: flex-start;
    }

    .auth-support-bar {
        align-items: stretch;
        padding: .55rem;
    }

    .auth-support-bar > span {
        display: none;
    }

    .auth-support-bar > div {
        width: 100%;
    }

    .auth-support-action {
        flex: 1 1 0;
    }

    .auth-footnote {
        gap: .35rem;
    }
}

@media (max-width: 900px) and (max-height: 720px) {
    .auth-shell {
        grid-template-rows: minmax(168px, 31dvh) minmax(0, 1fr);
    }

    .auth-hero {
        padding-top: .65rem;
        padding-bottom: .55rem;
    }

    .auth-feature-carousel {
        margin-top: auto;
        margin-bottom: auto;
        padding-top: .38rem;
        padding-bottom: .32rem;
    }

    .auth-feature-stage {
        min-height: 3.85rem;
    }

    .auth-feature-nav {
        margin-top: .18rem;
    }

    .auth-login-panel {
        padding-top: .65rem;
        padding-bottom: .65rem;
    }

    .auth-card-badge,
    .auth-footnote {
        display: none;
    }

    .auth-card-heading h2 {
        margin-top: 0;
        font-size: 1.2rem;
    }

    .auth-form {
        gap: .45rem;
        margin-top: .55rem;
    }

    .auth-input-wrap input,
    .auth-submit {
        min-height: 2.7rem;
    }

    .auth-consent {
        font-size: .61rem;
        line-height: 1.3;
    }

    .auth-legal-consents {
        gap: .3rem;
        padding-top: .45rem;
    }

    .auth-access-options {
        gap: .45rem;
        padding: .5rem .58rem;
    }

    .auth-help {
        font-size: .63rem;
    }

    .auth-support-bar {
        padding: .42rem;
    }

    .auth-support-bar > span {
        display: none;
    }

    .auth-support-bar > div {
        width: 100%;
    }

    .auth-support-action {
        flex: 1 1 0;
        min-height: 1.95rem;
    }
}

@media (max-width: 640px) {
    .auth-legal-modal {
        padding: .55rem;
    }

    .auth-legal-card {
        width: 100%;
        max-height: calc(100dvh - 1.1rem);
        border-radius: .8rem;
    }

    .auth-legal-heading {
        grid-template-columns: 2.35rem minmax(0, 1fr) 2rem;
        gap: .65rem;
        padding: .75rem .8rem;
    }

    .auth-legal-icon {
        width: 2.35rem;
        height: 2.35rem;
    }

    .auth-legal-content {
        padding: .65rem;
    }

    .auth-legal-content > article > header,
    .auth-legal-content > article > div {
        padding: 1rem;
    }
}

@media (max-width: 900px) and (max-height: 580px) and (orientation: landscape) {
    .auth-shell {
        grid-template-columns: minmax(250px, 42%) minmax(0, 1fr);
        grid-template-rows: 1fr;
    }

    .auth-hero {
        padding: .8rem 1rem;
    }

    .auth-feature-carousel {
        margin-top: auto;
        margin-bottom: auto;
    }

    .auth-login-panel {
        padding: .65rem 1.1rem;
    }
}

@media (max-height: 720px) and (min-width: 901px) {
    .auth-shell {
        min-height: calc(100svh - 1.5rem);
        max-height: calc(100svh - 1.5rem);
    }

    .auth-page {
        padding: .75rem;
    }

    .auth-hero {
        padding: 1.45rem 1.8rem;
    }

    .auth-hero-copy {
        margin-top: 1.35rem;
    }

    .auth-hero-copy h1 {
        font-size: 2.15rem;
    }

    .auth-feature-carousel {
        margin-top: 1.15rem;
        padding: .8rem 0;
    }

    .auth-promises {
        padding-top: 1rem;
    }

    .auth-login-panel {
        padding: 1.4rem 2rem;
    }

    .auth-form {
        gap: .7rem;
        margin-top: 1rem;
    }

    .auth-input-wrap input,
    .auth-submit {
        min-height: 3.05rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-ready .auth-brand,
    .auth-ready .auth-hero-copy,
    .auth-ready .auth-feature-carousel,
    .auth-ready .auth-promises,
    .auth-ready .auth-login-card {
        animation: none;
    }
}