:root {
    --green-900: #0f2c1b;
    --green-800: #123723;
    --green-700: #15522f;
    --green-600: #198754;
    --green-500: #2bb673;
    --green-300: #72d4a7;

    --text: #eef3ef;
    --text-soft: rgba(255, 255, 255, .70);

    --glass: rgba(255, 255, 255, .09);
    --glass-strong: rgba(255, 255, 255, .12);
    --border: rgba(255, 255, 255, .16);
    --shadow: 0 30px 90px rgba(0, 0, 0, .35);

    --input-bg: rgba(255, 255, 255, .13);
    --input-border: rgba(255, 255, 255, .20);
    --input-placeholder: rgba(255, 255, 255, .55);

    --button-bg: rgba(232, 255, 240, .88);
    --button-text: #173322;

    --danger-soft: rgba(220, 53, 69, .12);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(34, 197, 94, .18),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(16, 185, 129, .10),
            transparent 24%
        ),
        radial-gradient(
            circle at 50% 78%,
            rgba(74, 222, 128, .14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #07110b 0%,
            #0d1712 45%,
            #0a120d 100%
        );
}

.ambient-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.page {
    position: relative;
    z-index: 2;

    min-height: 100vh;

    display: grid;
    place-items: center;

    padding:
        max(18px, env(safe-area-inset-top))
        16px
        max(18px, env(safe-area-inset-bottom));
}

.login-shell {
    width: 100%;
    max-width: 540px;
}

.login-card {
    position: relative;
    overflow: hidden;

    border-radius: 36px;

    padding:
        28px
        20px
        22px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .10),
            rgba(255, 255, 255, .06)
        );

    border:
        1px solid
        var(--border);

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(24px);

    -webkit-backdrop-filter:
        blur(24px);
}

.login-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .08),
            transparent 35%,
            rgba(255, 255, 255, .03) 70%,
            transparent
        );

    pointer-events: none;
}

.photo-block {
    position: relative;

    display: flex;

    justify-content: center;

    margin-bottom: 18px;
}

.photo-wrap {
    position: relative;

    width: 126px;
    height: 126px;

    flex:
        0 0 126px;

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;

    -webkit-tap-highlight-color: transparent;
}

.photo-ring {
    position: absolute;

    inset: -7px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(114, 212, 167, .75),
            rgba(255, 255, 255, .35),
            rgba(43, 182, 115, .82)
        );

    filter:
        drop-shadow(
            0 10px 24px
            rgba(0, 0, 0, .20)
        );
}

.photo-frame {
    position: absolute;

    inset: 0;

    border-radius: 50%;

    overflow: hidden;

    border:
        4px solid
        rgba(255, 255, 255, .22);

    background:
        rgba(255, 255, 255, .12);

    backdrop-filter:
        blur(8px);
}

.person-photo,
.photo-fallback {
    width: 100%;
    height: 100%;

    border-radius: 50%;
}

.person-photo {
    display: block;

    object-fit: cover;

    object-position:
        center top;

    background:
        #d5e6db;
}

.photo-fallback {
    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #e7f5ec,
            #cfe6d7
        );

    color:
        var(--green-700);

    font-size:
        56px;
}

.photo-badge {
    position: absolute;

    right: -3px;
    bottom: 2px;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .92);

    color:
        var(--green-600);

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 20px;

    box-shadow:
        0 8px 18px
        rgba(0, 0, 0, .20);
}

.heading {
    text-align: center;

    margin-bottom: 18px;
}

.app-kicker {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    padding:
        8px
        14px;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .08);

    border:
        1px solid
        rgba(255, 255, 255, .10);

    color:
        rgba(255, 255, 255, .88);

    font-size:
        .78rem;

    letter-spacing:
        .02em;
}

.app-kicker i {
    color:
        var(--green-300);
}

.heading h1 {
    margin:
        0 0 8px;

    font-size:
        1.7rem;

    font-weight:
        760;

    letter-spacing:
        -.03em;

    color:
        #f8fbf9;
}

.heading p {
    margin: 0;

    color:
        var(--text-soft);

    font-size:
        .95rem;

    line-height:
        1.55;
}

.form-stage {
    margin-top:
        22px;
}

.field-group {
    margin-bottom:
        16px;
}

.field-shell {
    position: relative;
}

.field-icon {
    position: absolute;

    top: 50%;
    left: 8px;

    transform:
        translateY(-50%);

    z-index: 4;

    width: 54px;
    height: 54px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size:
        1.35rem;

    color:
        rgba(255, 255, 255, .78);

    background:
        rgba(255, 255, 255, .14);

    border:
        1px solid
        rgba(255, 255, 255, .18);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .08);

    pointer-events: none;
}

.pill-input {
    width: 100%;

    min-height:
        70px;

    padding:
        0 64px
        0 82px;

    border-radius:
        999px;

    border:
        1px solid
        var(--input-border);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .13),
            rgba(255, 255, 255, .08)
        );

    color:
        #ffffff;

    font-size:
        1rem;

    outline:
        none;

    transition:
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease,
        transform .2s ease;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .05),
        0 10px 24px
        rgba(0, 0, 0, .08);
}

.pill-input::placeholder {
    color:
        var(--input-placeholder);
}

.pill-input:hover {
    border-color:
        rgba(255, 255, 255, .28);
}

.pill-input:focus {
    border-color:
        rgba(114, 212, 167, .55);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .16),
            rgba(255, 255, 255, .10)
        );

    box-shadow:
        0 0 0 .24rem
        rgba(43, 182, 115, .12),
        inset 0 1px 0
        rgba(255, 255, 255, .06);
}

.password-toggle {
    position: absolute;

    top: 50%;
    right: 16px;

    transform:
        translateY(-50%);

    z-index: 5;

    border: 0;

    background:
        transparent;

    color:
        rgba(255, 255, 255, .68);

    font-size:
        1.2rem;

    padding:
        8px;

    cursor:
        pointer;
}

.password-toggle:hover {
    color:
        #ffffff;
}

.btn-login {
    width: 100%;

    min-height:
        74px;

    border: none;

    border-radius:
        999px;

    margin-top:
        8px;

    font-size:
        1.1rem;

    font-weight:
        700;

    letter-spacing:
        .01em;

    color:
        var(--button-text);

    background:
        linear-gradient(
            180deg,
            rgba(247, 255, 250, .95),
            rgba(227, 247, 234, .92)
        );

    box-shadow:
        0 18px 34px
        rgba(0, 0, 0, .16),
        inset 0 1px 0
        rgba(255, 255, 255, .55);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.btn-login:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 22px 38px
        rgba(0, 0, 0, .18),
        inset 0 1px 0
        rgba(255, 255, 255, .65);
}

.btn-login:disabled {
    opacity:
        .82;

    transform:
        none;
}

.login-meta {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    text-align: center;

    margin-top:
        16px;

    color:
        rgba(255, 255, 255, .62);

    font-size:
        .78rem;
}

.login-meta i {
    color:
        var(--green-300);
}

.login-alert {
    margin-bottom:
        14px;

    border:
        1px solid
        rgba(220, 53, 69, .18);

    border-radius:
        20px;

    color:
        #ffd6db;

    background:
        linear-gradient(
            180deg,
            rgba(220, 53, 69, .17),
            rgba(220, 53, 69, .09)
        );

    backdrop-filter:
        blur(8px);
}

.debug-box {
    margin-top:
        16px;

    padding:
        16px;

    border-radius:
        18px;

    border:
        1px solid
        rgba(220, 53, 69, .28);

    background:
        rgba(60, 8, 14, .42);

    color:
        #ffe3e7;

    font-size:
        .8rem;
}

.debug-box pre {
    margin:
        8px 0 12px;

    padding:
        12px;

    border-radius:
        12px;

    background:
        rgba(0, 0, 0, .34);

    color:
        #fff;

    white-space:
        pre-wrap;

    word-break:
        break-word;

    max-height:
        260px;

    overflow:
        auto;
}

.photo-debug {
    max-width:
        360px;

    margin:
        12px auto 0;

    padding:
        9px 12px;

    border-radius:
        12px;

    background:
        rgba(255, 243, 205, .92);

    color:
        #664d03;

    font-size:
        .73rem;

    text-align:
        left;

    word-break:
        break-word;
}

.fatal-error-box {
    font-family:
        Arial,
        sans-serif;

    max-width:
        920px;

    margin:
        30px auto;

    padding:
        25px;

    background:
        #fff5f5;

    border:
        2px solid #dc3545;

    border-radius:
        16px;

    color:
        #842029;

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, .12);
}

.fatal-error-box h2 {
    margin-top: 0;
}

.error-page {
    margin: 0;

    padding:
        30px;

    background:
        #f8f9fa;

    font-family:
        Arial,
        sans-serif;

    color:
        #212529;
}

.error-box {
    max-width:
        900px;

    margin:
        auto;

    padding:
        30px;

    background:
        #fff;

    border-radius:
        18px;

    border-left:
        6px solid #dc3545;

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, .10);
}

.error-box h1 {
    color:
        #dc3545;
}

.error-box pre {
    padding:
        15px;

    border-radius:
        10px;

    overflow:
        auto;

    white-space:
        pre-wrap;

    word-break:
        break-word;

    background:
        #212529;

    color:
        #fff;
}

@media (min-width: 576px) {

    .login-card {
        padding:
            32px
            28px
            24px;
    }

    .photo-wrap {
        width:
            138px;

        height:
            138px;

        flex-basis:
            138px;
    }

    .heading h1 {
        font-size:
            1.9rem;
    }

}

@media (
    prefers-reduced-motion: reduce
) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }

}

.photo-wrap:active {
    transform: scale(.97);
}

.photo-frame {
    will-change: transform;
}