:root {
    color-scheme: dark;

    --text: #f7f1e7;
    --muted: #b0ada8;
    --gold: #dcae62;
    --gold-light: #f7d792;
    --danger: #ff9d92;
    --success: #91dfad;

    --panel: rgba(10, 16, 25, 0.92);
    --input: rgba(4, 10, 17, 0.80);
}


* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
    background: #071019;
}


body {
    min-height: 100vh;
    margin: 0;

    overflow-x: hidden;

    color: var(--text);

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

    background:
        linear-gradient(
            rgba(3, 8, 14, 0.20),
            rgba(3, 8, 14, 0.74)
        ),
        url("/static/assets/castle-background.webp")
        center / cover
        fixed
        no-repeat;
}


body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 11%,
            rgba(225, 166, 78, 0.14),
            transparent 34%
        ),
        linear-gradient(
            90deg,
            rgba(2, 6, 11, 0.54),
            transparent 26%,
            transparent 74%,
            rgba(2, 6, 11, 0.54)
        );
}


.page-noise {
    position: fixed;
    inset: 0;

    pointer-events: none;

    opacity: 0.045;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
        );
}


.page-shell {
    position: relative;
    z-index: 1;

    min-height: 100vh;

    display: grid;
    place-items: center;

    padding:
        24px
        14px;
}


.login-card {
    position: relative;

    width:
        min(
            100%,
            610px
        );

    overflow: hidden;

    padding:
        0
        32px
        30px;

    border:
        1px solid
        rgba(235, 192, 116, 0.24);

    border-radius: 28px;

    background:
        linear-gradient(
            180deg,
            rgba(31, 39, 49, 0.74),
            rgba(8, 14, 22, 0.97)
        ),
        var(--panel);

    box-shadow:
        0
        38px
        105px
        rgba(0, 0, 0, 0.66);

    backdrop-filter:
        blur(20px)
        saturate(1.08);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(1.08);
}


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

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            transparent 31%
        ),
        radial-gradient(
            circle at 50% 0%,
            rgba(226, 170, 81, 0.11),
            transparent 38%
        );
}


.card-inner-border {
    position: absolute;
    inset: 8px;

    pointer-events: none;

    border:
        1px solid
        rgba(234, 191, 115, 0.09);

    border-radius: 21px;
}


.hero,
.login-form {
    position: relative;
    z-index: 1;
}


.hero {
    text-align: center;
}


.hero-banner {
    position: relative;

    min-height: 220px;

    display: grid;
    place-items: end center;

    margin:
        0
        -32px
        20px;

    overflow: hidden;

    padding:
        25px
        22px
        24px;

    border-bottom:
        1px solid
        rgba(232, 190, 116, 0.17);

    border-radius:
        27px
        27px
        35px
        35px;

    background:
        url("/static/assets/header-panorama.webp")
        center 42% / cover
        no-repeat;

    box-shadow:
        inset
        0
        -55px
        72px
        rgba(7, 13, 21, 0.68);
}


.hero-banner::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 55%,
            rgba(225, 167, 79, 0.12),
            transparent 39%
        ),
        linear-gradient(
            90deg,
            rgba(4, 8, 13, 0.35),
            transparent 26%,
            transparent 74%,
            rgba(4, 8, 13, 0.35)
        );
}


.hero-banner-shade {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(4, 8, 13, 0.06),
            rgba(4, 8, 13, 0.17) 43%,
            rgba(8, 14, 22, 0.92) 100%
        );
}


.brand {
    position: relative;
    z-index: 1;

    display: grid;
    justify-items: center;
}


.brand-caption {
    display: inline-flex;
    align-items: center;

    min-height: 25px;

    padding:
        0
        11px;

    margin-bottom: 8px;

    border:
        1px solid
        rgba(234, 193, 119, 0.22);

    border-radius: 999px;

    color: #e2c58f;

    background:
        rgba(7, 13, 21, 0.54);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.35px;
    text-transform: uppercase;
}


.brand-title {
    color: #f0c978;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            44px,
            8vw,
            67px
        );

    font-weight: 900;

    line-height: 0.95;

    letter-spacing: -1px;

    text-shadow:
        0
        5px
        0
        #4a2c10,
        0
        11px
        24px
        rgba(0, 0, 0, 0.78);
}


.brand-subtitle {
    margin-top: 7px;

    color: #d8dde7;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 3.2px;

    text-shadow:
        0
        3px
        12px
        rgba(0, 0, 0, 0.72);
}


.hero h1 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            32px,
            6vw,
            44px
        );

    line-height: 1.04;

    text-shadow:
        0
        6px
        22px
        rgba(0, 0, 0, 0.55);
}


.hero-description {
    max-width: 430px;

    margin:
        12px
        auto
        22px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.55;
}


.login-form {
    display: grid;
    gap: 15px;
}


.field label {
    display: block;

    margin:
        0
        0
        7px;

    color: #dfd8cc;

    font-size: 12px;
    font-weight: 780;
}


.input-wrap,
.select-wrap {
    position: relative;
}


.field-icon {
    position: absolute;

    left: 15px;
    top: 50%;

    z-index: 2;

    width: 19px;
    height: 19px;

    transform:
        translateY(-50%);

    color:
        rgba(
            224,
            179,
            97,
            0.83
        );

    pointer-events: none;
}


.field-icon svg,
.password-toggle svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}


input,
select {
    width: 100%;
    height: 55px;

    border:
        1px solid
        rgba(231, 190, 116, 0.17);

    border-radius: 14px;

    outline: none;

    color: var(--text);
    background: var(--input);

    font: inherit;
    font-size: 14px;

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}


input {
    padding:
        0
        48px;
}


select {
    appearance: none;
    -webkit-appearance: none;

    padding:
        0
        50px
        0
        48px;

    cursor: pointer;
}


input::placeholder {
    color: #737985;
}


input:focus,
select:focus {
    border-color:
        rgba(241, 202, 128, 0.68);

    background:
        rgba(4, 10, 17, 0.94);

    box-shadow:
        0
        0
        0
        4px
        rgba(218, 163, 78, 0.10);
}


.field.has-error input {
    border-color:
        rgba(255, 134, 121, 0.76);

    box-shadow:
        0
        0
        0
        4px
        rgba(255, 84, 69, 0.08);
}


.password-toggle {
    position: absolute;

    right: 7px;
    top: 50%;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    transform:
        translateY(-50%);

    border: none;
    border-radius: 10px;

    color: #858c96;
    background: transparent;

    cursor: pointer;
}


.password-toggle:hover {
    color: var(--gold-light);

    background:
        rgba(226, 181, 101, 0.08);
}


.password-toggle svg {
    width: 19px;
    height: 19px;
}


.select-arrow {
    position: absolute;

    right: 18px;
    top: 50%;

    width: 8px;
    height: 8px;

    transform:
        translateY(-72%)
        rotate(45deg);

    border-right:
        2px solid
        rgba(230, 190, 118, 0.80);

    border-bottom:
        2px solid
        rgba(230, 190, 118, 0.80);

    pointer-events: none;
}


.field-error {
    min-height: 0;

    margin:
        6px
        3px
        0;

    color: var(--danger);

    font-size: 11px;
    line-height: 1.4;
}


.submit-button {
    position: relative;

    isolation: isolate;

    width: 100%;
    min-height: 56px;

    margin-top: 2px;

    overflow: hidden;

    border:
        1px solid
        #f3d08a;

    border-radius: 14px;

    color: #24180b;

    background:
        linear-gradient(
            180deg,
            #f3d08b 0%,
            #dda955 53%,
            #b7772c 100%
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(255, 255, 255, 0.72),
        0
        14px
        31px
        rgba(111, 68, 20, 0.34);

    font: inherit;
    font-size: 15px;
    font-weight: 900;

    letter-spacing: 0.35px;

    cursor: pointer;

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


.submit-button:hover {
    transform:
        translateY(-1px);

    filter:
        brightness(1.06);

    box-shadow:
        inset
        0
        1px
        0
        rgba(255, 255, 255, 0.78),
        0
        17px
        35px
        rgba(111, 68, 20, 0.42);
}


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


.submit-button:disabled {
    cursor: wait;
    filter: saturate(0.62);
}


.button-shine {
    position: absolute;

    z-index: -1;

    top: -110%;
    bottom: -110%;
    left: -42%;

    width: 29%;

    transform:
        rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.47),
            transparent
        );

    animation:
        button-shine
        4.8s
        ease-in-out
        infinite;
}


@keyframes button-shine {
    0%,
    65% {
        left: -42%;
    }

    100% {
        left: 138%;
    }
}


.button-spinner {
    display: none;

    width: 18px;
    height: 18px;

    margin-left: 8px;

    vertical-align: -4px;

    border:
        2px solid
        rgba(29, 20, 9, 0.25);

    border-top-color:
        #291a0c;

    border-radius: 50%;

    animation:
        spinner
        0.72s
        linear
        infinite;
}


.submit-button.is-loading
.button-spinner {
    display: inline-block;
}


@keyframes spinner {
    to {
        transform:
            rotate(360deg);
    }
}


.form-status {
    display: none;

    padding:
        10px
        12px;

    border-radius: 11px;

    font-size: 12px;
    line-height: 1.45;
}


.form-status.visible {
    display: block;
}


.form-status.success {
    color: var(--success);

    border:
        1px solid
        rgba(119, 213, 148, 0.24);

    background:
        rgba(56, 129, 78, 0.13);
}


.form-status.error {
    color: var(--danger);

    border:
        1px solid
        rgba(255, 124, 109, 0.24);

    background:
        rgba(144, 54, 45, 0.14);
}


@media (
    max-width: 620px
) {
    body {
        background-attachment: scroll;
    }


    .page-shell {
        place-items: start center;

        padding:
            8px
            7px
            18px;
    }


    .login-card {
        padding:
            0
            15px
            21px;

        border-radius: 22px;
    }


    .card-inner-border {
        inset: 6px;

        border-radius: 17px;
    }


    .hero-banner {
        min-height: 185px;

        margin:
            0
            -15px
            17px;

        padding:
            20px
            13px
            18px;

        border-radius:
            21px
            21px
            28px
            28px;
    }


    .brand-title {
        font-size:
            clamp(
                39px,
                13vw,
                56px
            );
    }


    .brand-subtitle {
        font-size: 9px;
        letter-spacing: 2.5px;
    }


    .hero h1 {
        font-size:
            clamp(
                30px,
                10vw,
                39px
            );
    }


    .hero-description {
        margin-bottom: 18px;

        font-size: 13px;
    }
}


@media (
    max-width: 390px
) {
    .hero-banner {
        min-height: 168px;
    }


    .brand-caption {
        font-size: 7.5px;
    }
}


@media (
    prefers-reduced-motion: reduce
) {
    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}