html,
body {
    min-block-size: 100%;
    margin: 0;
}

.app-auth-form {
    min-block-size: 100vh;
    margin: 0;
    font-family: var(--font-family-base, "Alexandria", system-ui, sans-serif);
    color: var(--color-text);
}

.app-auth-page,
.app-auth-page * {
    box-sizing: border-box;
}

.app-auth-page {
    --auth-shell-padding: clamp(24px, 4vw, 56px);
    --auth-shell-align-items: center;
    --auth-card-columns: minmax(0, 1.28fr) minmax(0, .96fr);
    --auth-card-areas: "form brand";
    --auth-card-inline-size: min(100%, 1180px);
    --auth-card-min-block-size: 580px;
    --auth-card-radius: var(--radius-8);
    --auth-card-shadow: 0 28px 80px rgba(15, 52, 96, .28);
    --auth-form-inner-size: min(100%, 460px);
    --auth-form-inner-padding: clamp(28px, 4vw, 56px);
    --auth-heading-title-size: clamp(26px, 2.7vw, 34px);
    --auth-brand-content-padding: clamp(32px, 5vw, 60px);
    --auth-brand-visual-size: min(100%, 300px);
    --auth-brand-visual-min-block-size: 130px;
    --auth-brand-visual-margin-block-end: 28px;
    --auth-brand-visual-padding: 22px 30px;
    --auth-logo-size: 280px;
    --auth-company-size: clamp(26px, 2.5vw, 34px);
    --auth-company-white-space: nowrap;
    --auth-brand-copy-margin-block-start: 22px;
    --auth-feature-display: flex;
    --auth-feature-margin-block-start: 34px;
    --auth-page-background: #d9ecfb;
    --auth-background-overlay: linear-gradient(115deg, rgba(255, 255, 255, .82), rgba(214, 235, 250, .62) 46%, rgba(22, 99, 150, .24));
    --auth-form-glow: color-mix(in srgb, var(--color-primary) 8%, transparent);
    --auth-lock-color: var(--color-primary);
    --auth-lock-background: color-mix(in srgb, var(--color-primary-soft) 48%, var(--color-surface));
    --auth-lock-border: color-mix(in srgb, var(--color-primary-border) 28%, transparent);
    --auth-heading-color: var(--color-primary-deeper);
    --auth-heading-muted: var(--color-text-muted);
    --auth-input-background: var(--form-control-background);
    --auth-input-color: var(--color-text);
    --auth-input-border: var(--color-border);
    --auth-input-focus-border: var(--color-primary);
    --auth-input-focus-ring: var(--color-focus-ring);
    --auth-submit-background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 88%, var(--color-surface) 12%), var(--color-primary-hover));
    --auth-submit-shadow: 0 14px 28px color-mix(in srgb, var(--color-primary) 28%, transparent);
    --auth-brand-background: radial-gradient(circle at 38% 22%, color-mix(in srgb, var(--color-primary) 38%, transparent), transparent 30%), linear-gradient(145deg, var(--color-primary-deep), var(--color-primary-deeper) 58%, #071f3f);
    --auth-brand-accent: var(--color-primary-border);
    position: relative;
    min-block-size: 100vh;
    overflow-x: hidden;
    background: var(--auth-page-background);
    isolation: isolate;
}

[data-app-theme="dark"] .app-auth-page {
    --auth-page-background: #0f172a;
    --auth-background-overlay: linear-gradient(115deg, rgba(15, 23, 42, .86), rgba(15, 23, 42, .76) 46%, rgba(2, 6, 23, .66));
    --auth-card-shadow: 0 28px 80px rgba(2, 6, 23, .42);
    --auth-heading-color: var(--color-text);
    --auth-heading-muted: var(--color-text-secondary);
}

@media (prefers-color-scheme: dark) {
    [data-app-theme="system"] .app-auth-page {
        --auth-page-background: #0f172a;
        --auth-background-overlay: linear-gradient(115deg, rgba(15, 23, 42, .86), rgba(15, 23, 42, .76) 46%, rgba(2, 6, 23, .66));
        --auth-card-shadow: 0 28px 80px rgba(2, 6, 23, .42);
        --auth-heading-color: var(--color-text);
        --auth-heading-muted: var(--color-text-secondary);
    }
}

.app-auth-background {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        var(--auth-background-overlay),
        url("../../images/login-cover.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.app-auth-page::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(circle at 18% 15%, rgba(255, 255, 255, .58) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 72%, rgba(255, 255, 255, .42) 0 2px, transparent 3px),
        linear-gradient(135deg, transparent 0 54%, rgba(255, 255, 255, .34) 55%, transparent 56%);
    background-size: 72px 72px, 96px 96px, 100% 100%;
}

.app-auth-page::after {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .35;
    content: "";
    background:
        linear-gradient(90deg, transparent 0 72%, rgba(255, 255, 255, .55) 72.2%, transparent 72.5%),
        radial-gradient(circle at 76% 64%, transparent 0 46px, rgba(255, 255, 255, .5) 47px 48px, transparent 49px);
}

.app-auth-shell {
    display: grid;
    min-block-size: 100vh;
    align-items: var(--auth-shell-align-items);
    justify-items: center;
    padding: var(--auth-shell-padding);
}

.app-auth-card {
    display: grid;
    direction: ltr;
    grid-template-columns: var(--auth-card-columns);
    grid-template-areas: var(--auth-card-areas);
    inline-size: var(--auth-card-inline-size);
    min-block-size: var(--auth-card-min-block-size);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: var(--auth-card-radius);
    background: var(--color-surface);
    box-shadow: var(--auth-card-shadow);
}

:root[dir="ltr"] .app-auth-page {
    --auth-card-areas: "form brand";
}

:root[dir="rtl"] .app-auth-page {
    --auth-card-areas: "brand form";
}

:root[dir="ltr"] .app-auth-page--login {
    --auth-card-columns: minmax(0, .96fr) minmax(0, 1.28fr);
}

:root[dir="rtl"] .app-auth-page--login {
    --auth-card-columns: minmax(0, 1.28fr) minmax(0, .96fr);
}

:root[dir="ltr"] .app-auth-page--branch {
    --auth-card-columns: minmax(0, .96fr) minmax(0, 1.28fr);
}

:root[dir="rtl"] .app-auth-page--branch {
    --auth-card-columns: minmax(0, 1.28fr) minmax(0, .96fr);
}

.app-auth-form-panel {
    grid-area: form;
    display: grid;
    align-items: center;
    background:
        radial-gradient(circle at 16% 18%, var(--auth-form-glow), transparent 34%),
        var(--color-surface);
}

:root[dir="ltr"] .app-auth-form-panel,
:root[dir="ltr"] .app-auth-brand-panel {
    direction: ltr;
}

:root[dir="rtl"] .app-auth-form-panel,
:root[dir="rtl"] .app-auth-brand-panel {
    direction: rtl;
}

.app-auth-form-inner {
    display: grid;
    inline-size: var(--auth-form-inner-size);
    margin-inline: auto;
    padding: var(--auth-form-inner-padding);
    gap: 16px;
}

.app-auth-lock {
    display: inline-grid;
    inline-size: 64px;
    block-size: 64px;
    margin-inline: auto;
    border: 1px solid var(--auth-lock-border);
    border-radius: 18px;
    color: var(--auth-lock-color);
    background: var(--auth-lock-background);
    box-shadow: 0 14px 34px rgba(14, 83, 148, .12);
    place-items: center;
}

.app-auth-lock i {
    font-size: 26px;
}

.app-auth-heading {
    text-align: center;
}

.app-auth-heading h1 {
    margin: 0;
    color: var(--auth-heading-color);
    font-family: inherit;
    font-size: var(--auth-heading-title-size);
    font-weight: 800;
    line-height: 1.3;
}

.app-auth-heading p {
    max-inline-size: 320px;
    margin: 10px auto 0;
    color: var(--auth-heading-muted);
    font-size: 14px;
    line-height: 1.9;
}

.app-auth-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 18px;
    padding: 13px 16px;
    font-size: 13px;
    line-height: 1.65;
}

.app-auth-alert--error {
    border: 1px solid rgba(220, 38, 38, .24);
    color: #991b1b;
    background: linear-gradient(180deg, rgba(254, 242, 242, .98), rgba(255, 247, 247, .98));
}

.app-auth-alert i {
    color: var(--color-danger);
    font-size: 17px;
}

.app-auth-alert-content {
    display: grid;
    gap: 2px;
}

.app-auth-alert-title {
    font-weight: 800;
}

.app-auth-alert-message {
    color: #b91c1c;
}

.app-auth-legacy-error {
    display: none;
}

.app-auth-field {
    display: grid;
    gap: 7px;
}

.app-auth-label {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.app-auth-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-block-size: 52px;
    border: 1px solid var(--auth-input-border);
    border-radius: 14px;
    padding-inline: 16px;
    color: var(--auth-input-color);
    background: var(--auth-input-background);
    transition: border-color var(--transition-focus), box-shadow var(--transition-focus), background var(--transition-focus);
}

.app-auth-input-wrap:focus-within {
    border-color: var(--auth-input-focus-border);
    box-shadow: 0 0 0 4px var(--auth-input-focus-ring);
}

.app-auth-input-wrap > i {
    flex: 0 0 auto;
    color: var(--color-primary);
    font-size: 18px;
}

.app-auth-input-wrap .app-auth-input-eye {
    color: var(--color-text-muted);
    font-size: 16px;
}

.app-auth-password-toggle {
    display: inline-grid;
    flex: 0 0 auto;
    inline-size: 28px;
    block-size: 28px;
    border: 0;
    border-radius: var(--radius-2);
    padding: 0;
    color: var(--color-text-muted);
    background: transparent;
    place-items: center;
    cursor: pointer;
}

.app-auth-password-toggle:hover,
.app-auth-password-toggle:focus-visible {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.app-auth-input {
    inline-size: 100%;
    min-inline-size: 0;
    border: 0;
    outline: 0;
    color: var(--auth-input-color);
    background: transparent;
    font: inherit;
    font-size: 14px;
    text-align: start;
}

.app-auth-input::placeholder {
    color: var(--color-text-subtle);
}

.app-auth-field-error {
    color: var(--color-danger);
    font-size: 12px;
    font-weight: 700;
}

.app-auth-actions {
    padding-block-start: 2px;
}

.app-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    inline-size: 100%;
    min-block-size: 54px;
    border: 0;
    border-radius: 14px;
    color: var(--color-primary-contrast);
    text-decoration: none;
    font-size: 16px;
    font-weight: 800;
    background: var(--auth-submit-background);
    box-shadow: var(--auth-submit-shadow);
    transition: filter var(--transition-button), box-shadow var(--transition-button), transform var(--transition-button);
}

.app-auth-submit:hover,
.app-auth-submit:focus {
    color: var(--color-primary-contrast);
    filter: brightness(1.04);
    box-shadow: 0 18px 34px color-mix(in srgb, var(--color-primary) 32%, transparent);
}

.app-auth-submit:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
}

.app-auth-submit:active {
    transform: translateY(1px);
}

.app-auth-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid rgba(22, 163, 74, .24);
    border-radius: 18px;
    color: #147237;
    background: linear-gradient(180deg, rgba(240, 253, 244, .98), rgba(229, 255, 239, .94));
    padding: 13px 16px;
    font-size: 13px;
    line-height: 1.65;
}

.app-auth-status i {
    color: var(--color-success);
    font-size: 22px;
}

.app-auth-status--error {
    border-color: rgba(220, 38, 38, .24);
    color: #991b1b;
    background: linear-gradient(180deg, rgba(254, 242, 242, .98), rgba(255, 247, 247, .94));
}

.app-auth-status--error i {
    color: var(--color-danger);
}

.app-auth-status--warning {
    border-color: rgba(217, 119, 6, .26);
    color: #92400e;
    background: linear-gradient(180deg, rgba(255, 251, 235, .98), rgba(255, 247, 218, .94));
}

.app-auth-status--warning i {
    color: var(--color-warning);
}

.app-auth-status-text {
    display: block;
    font-weight: 500;
    text-align: center;
}

.app-auth-footer {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding-block-start: 8px;
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: center;
}

.app-auth-maker,
.app-auth-connection-link {
    color: var(--color-primary);
    font-weight: 800;
    text-decoration: none;
}

.app-auth-maker:hover,
.app-auth-connection-link:hover {
    text-decoration: underline;
}

.app-auth-version,
.app-auth-connection-text {
    color: var(--color-text-muted);
}

.app-auth-connection-input {
    inline-size: min(100%, 260px);
    min-block-size: 38px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding-inline: 12px;
    text-align: center;
}

.app-auth-brand-panel {
    position: relative;
    grid-area: brand;
    display: grid;
    overflow: hidden;
    color: var(--color-primary-contrast);
    background: var(--auth-brand-background);
}

.app-auth-brand-overlay {
    position: absolute;
    inset: 0;
    opacity: .42;
    background:
        linear-gradient(90deg, transparent 0 44%, rgba(255, 255, 255, .22) 44.2%, transparent 44.6%),
        radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .7) 0 2px, transparent 3px),
        radial-gradient(circle at 16% 82%, color-mix(in srgb, var(--color-primary-border) 50%, transparent) 0 1px, transparent 2px);
    background-size: 100% 100%, 92px 92px, 68px 68px;
}

.app-auth-brand-content {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    min-block-size: 100%;
    padding: var(--auth-brand-content-padding);
    text-align: center;
}

.app-auth-brand-visual {
    display: grid;
    inline-size: var(--auth-brand-visual-size);
    min-block-size: var(--auth-brand-visual-min-block-size);
    margin-block-end: var(--auth-brand-visual-margin-block-end);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 26px;
    padding: var(--auth-brand-visual-padding);
    background:
        radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 62%),
        rgba(255, 255, 255, .07);
    box-shadow: 0 24px 54px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
    backdrop-filter: blur(1px);
    place-items: center;
}

.app-auth-logo {
    max-inline-size: var(--auth-logo-size);
    block-size: auto;
    margin: 0;
}

.app-auth-company {
    max-inline-size: min(100%, 560px);
    color: var(--color-primary-contrast);
    font-size: var(--auth-company-size);
    font-weight: 900;
    line-height: 1.25;
    white-space: var(--auth-company-white-space);
    text-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

.app-auth-brand-copy {
    max-inline-size: 380px;
    margin: var(--auth-brand-copy-margin-block-start) 0 0;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    line-height: 1.9;
}

.app-auth-feature-list {
    display: var(--auth-feature-display);
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-block-start: var(--auth-feature-margin-block-start);
}

.app-auth-feature-list span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 42px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding-inline: 18px;
    color: rgba(255, 255, 255, .94);
    background: rgba(255, 255, 255, .06);
    font-size: 12px;
    font-weight: 500;
}

.app-auth-feature-list i {
    color: var(--auth-brand-accent);
}

@media (max-width: 991.98px) {
    .app-auth-page {
        --auth-shell-padding: 24px;
        --auth-card-columns: 1fr;
        --auth-card-areas:
            "form"
            "brand";
        --auth-card-inline-size: min(100%, 620px);
        --auth-card-min-block-size: 0;
        --auth-brand-content-padding: 28px;
        --auth-brand-visual-size: min(100%, 180px);
        --auth-brand-visual-min-block-size: 96px;
        --auth-brand-visual-margin-block-end: 12px;
        --auth-brand-visual-padding: 14px 18px;
        --auth-logo-size: 170px;
        --auth-company-size: 24px;
        --auth-company-white-space: normal;
        --auth-brand-copy-margin-block-start: 10px;
        --auth-feature-margin-block-start: 18px;
    }
}

@media (min-width: 992px) and (max-height: 900px) {
    .app-auth-page {
        --auth-shell-padding: 16px;
        --auth-card-min-block-size: 0;
        --auth-form-inner-padding: 22px 32px;
        --auth-heading-title-size: clamp(24px, 2.2vw, 30px);
        --auth-brand-content-padding: 28px 42px;
        --auth-brand-visual-size: min(100%, 264px);
        --auth-brand-visual-min-block-size: 112px;
        --auth-brand-visual-margin-block-end: 18px;
        --auth-brand-visual-padding: 18px 26px;
        --auth-logo-size: 248px;
        --auth-company-size: clamp(24px, 2.2vw, 30px);
        --auth-brand-copy-margin-block-start: 14px;
        --auth-feature-margin-block-start: 22px;
    }

    .app-auth-shell {
        min-block-size: 100vh;
    }

    .app-auth-card {
        block-size: calc(100vh - 32px);
        max-block-size: 760px;
    }

    .app-auth-form-panel,
    .app-auth-brand-panel {
        min-block-size: 0;
    }

    .app-auth-form-inner {
        gap: 10px;
    }

    .app-auth-lock {
        inline-size: 56px;
        block-size: 56px;
        border-radius: 16px;
    }

    .app-auth-lock i {
        font-size: 23px;
    }

    .app-auth-heading h1 {
        line-height: 1.22;
    }

    .app-auth-heading p {
        margin-block-start: 6px;
        line-height: 1.65;
    }

    .app-auth-alert,
    .app-auth-status {
        padding-block: 9px;
    }

    .app-auth-field {
        gap: 5px;
    }

    .app-auth-input-wrap {
        min-block-size: 48px;
    }

    .app-auth-actions {
        padding-block-start: 0;
    }

    .app-auth-submit {
        min-block-size: 50px;
    }

    .app-auth-footer {
        gap: 5px;
        padding-block-start: 4px;
    }

    .app-auth-brand-copy {
        line-height: 1.65;
    }

    .app-auth-feature-list {
        gap: 9px;
    }

    .app-auth-feature-list span {
        min-block-size: 38px;
        padding-inline: 15px;
    }
}

:root[data-m3n-density="compact"] .app-auth-page {
    --auth-shell-padding: 16px;
    --auth-card-min-block-size: 0;
    --auth-form-inner-padding: 22px 32px;
    --auth-heading-title-size: clamp(24px, 2.2vw, 30px);
    --auth-brand-content-padding: 28px 42px;
    --auth-brand-visual-size: min(100%, 264px);
    --auth-brand-visual-min-block-size: 112px;
    --auth-brand-visual-margin-block-end: 18px;
    --auth-brand-visual-padding: 18px 26px;
    --auth-logo-size: 248px;
    --auth-company-size: clamp(24px, 2.2vw, 30px);
    --auth-brand-copy-margin-block-start: 14px;
    --auth-feature-margin-block-start: 22px;
}

:root[data-m3n-density="compact"] .app-auth-shell {
    min-block-size: 100vh;
}

:root[data-m3n-density="compact"] .app-auth-card {
    block-size: calc(100vh - 32px);
    max-block-size: 760px;
}

:root[data-m3n-density="compact"] .app-auth-form-panel,
:root[data-m3n-density="compact"] .app-auth-brand-panel {
    min-block-size: 0;
}

:root[data-m3n-density="compact"] .app-auth-form-inner {
    gap: 10px;
}

:root[data-m3n-density="compact"] .app-auth-lock {
    inline-size: 56px;
    block-size: 56px;
    border-radius: 16px;
}

:root[data-m3n-density="compact"] .app-auth-lock i {
    font-size: 23px;
}

:root[data-m3n-density="compact"] .app-auth-heading h1 {
    line-height: 1.22;
}

:root[data-m3n-density="compact"] .app-auth-heading p {
    margin-block-start: 6px;
    line-height: 1.65;
}

:root[data-m3n-density="compact"] .app-auth-alert,
:root[data-m3n-density="compact"] .app-auth-status {
    padding-block: 9px;
}

:root[data-m3n-density="compact"] .app-auth-field {
    gap: 5px;
}

:root[data-m3n-density="compact"] .app-auth-input-wrap {
    min-block-size: 48px;
}

:root[data-m3n-density="compact"] .app-auth-actions {
    padding-block-start: 0;
}

:root[data-m3n-density="compact"] .app-auth-submit {
    min-block-size: 50px;
}

:root[data-m3n-density="compact"] .app-auth-footer {
    gap: 5px;
    padding-block-start: 4px;
}

:root[data-m3n-density="compact"] .app-auth-brand-copy {
    line-height: 1.65;
}

:root[data-m3n-density="compact"] .app-auth-feature-list {
    gap: 9px;
}

:root[data-m3n-density="compact"] .app-auth-feature-list span {
    min-block-size: 38px;
    padding-inline: 15px;
}

@media (max-width: 575.98px) {
    .app-auth-page {
        --auth-shell-padding: 14px;
        --auth-shell-align-items: stretch;
        --auth-card-radius: 22px;
        --auth-card-shadow: 0 18px 42px rgba(15, 52, 96, .22);
        --auth-form-inner-padding: 24px 18px 28px;
        --auth-heading-title-size: 24px;
        --auth-feature-display: none;
    }
}