/* Existing approved Login form styles reused for separate digital pages. */

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            min-height: 100vh;

            background:
                radial-gradient(
                    circle at 50% 40%,
                    rgba(18,18,18,.18),
                    transparent 42%
                ),
                #050505;

            color: #F5F5F5;

            font-family:
                Arial,
                Helvetica,
                sans-serif;

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

            position: relative;

            overflow: hidden;

            padding:
                22px 18px
                50px;
        }

        body::before {
            content: "";

            position: fixed;
            inset: 0;

            pointer-events: none;

            background:
                linear-gradient(
                    rgba(255,255,255,.012) 1px,
                    transparent 1px
                );

            background-size:
                100% 3px;

            opacity: .22;
        }

        .screen {
            width:
                min(360px, 100%);

            display: flex;
            flex-direction: column;
            align-items: center;

            gap: 16px;
        }

        .title {
            width: 100%;

            text-align: center;

            color: #F5F5F5;

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

            letter-spacing: .20em;

            text-transform: uppercase;

            margin-bottom: 8px;
        }

        .field-group {
            width: 100%;

            display: flex;
            flex-direction: column;

            gap: 13px;
        }

        .field {
            width: 100%;
        }

        .field label {
            display: block;

            margin-bottom: 7px;

            color:
                rgba(245,245,245,.52);

            font-size: 8px;
            font-weight: 700;

            letter-spacing: .15em;

            text-transform: uppercase;
        }

        .field input {
            width: 100%;
            height: 50px;

            padding:
                0 14px;

            background:
                #0B0B0B;

            border:
                1px solid #2A2A2A;

            outline: none;

            color:
                #F5F5F5;

            font-family:
                Consolas,
                monospace;

            font-size: 12px;

            letter-spacing: .08em;

            transition:
                border-color .2s ease,
                background .2s ease;
        }

        .field input::placeholder {
            color:
                rgba(245,245,245,.28);
        }

        .field input:focus {
            background:
                #0F0F0F;

            border-color:
                rgba(169,5,5,.42);
        }

        .password-support {
            width: 100%;

            margin-top: 9px;

            display: flex;

            justify-content: flex-end;
        }

        .recover-link {
            border: 0;

            background:
                transparent;

            color:
                rgba(245,245,245,.42);

            font-family:
                Arial,
                Helvetica,
                sans-serif;

            font-size: 7px;
            font-weight: 700;

            letter-spacing: .11em;

            text-transform: uppercase;

            cursor: pointer;

            transition:
                color .2s ease;
        }

        .recover-link:hover {
            color:
                #ffffff;
        }

        .login-button {
            position: relative;

            width: 100%;
            height: 49px;

            margin-top: 4px;

            background:
                #111111;

            border:
                1px solid
                rgba(169,5,5,.35);

            color:
                #F5F5F5;

            font-size: 10px;
            font-weight: 700;

            letter-spacing: .18em;

            text-transform: uppercase;

            cursor: pointer;

            transition:
                background .2s ease,
                border-color .2s ease;
        }

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

            position: absolute;

            left: 0;
            top: 0;
            bottom: 0;

            width: 2px;

            background:
                #a90505;

            opacity: .75;
        }

        .login-button:hover {
            background:
                #171717;

            border-color:
                rgba(169,5,5,.55);
        }

        .message {
            width: 100%;

            min-height: 14px;

            color:
                rgba(245,245,245,.34);

            font-family:
                Consolas,
                monospace;

            font-size: 7px;

            letter-spacing: .09em;

            text-transform: uppercase;

            text-align: center;

            opacity: 0;

            transition:
                opacity .2s ease;
        }

        .message.show {
            opacity: 1;
        }

        .footer-text {
            margin-top:
                -2px;

            color:
                rgba(245,245,245,.15);

            font-size:
                6.5px;

            letter-spacing:
                .12em;

            text-transform:
                uppercase;

            text-align:
                center;
        }

        .back-link {
            position:
                fixed;

            left:
                22px;

            bottom:
                18px;

            z-index:
                10;

            display:
                inline-flex;

            align-items:
                center;

            gap:
                7px;

            border:
                0;

            background:
                transparent;

            color:
                rgba(245,245,245,.38);

            font-family:
                Arial,
                Helvetica,
                sans-serif;

            font-size:
                8px;

            font-weight:
                700;

            letter-spacing:
                .14em;

            text-transform:
                uppercase;

            cursor:
                pointer;

            transition:
                color .2s ease;
        }

        .back-link::before {
            content:
                "←";

            color:
                rgba(245,245,245,.50);

            font-size:
                12px;
        }

        .back-link:hover {
            color:
                #ffffff;
        }

        @media (max-width: 480px) {

            body {
                padding:
                    18px 16px
                    48px;
            }

            .screen {
                width:
                    min(340px, 100%);
            }

            .title {
                font-size:
                    10.5px;
            }

            .back-link {
                left:
                    16px;

                bottom:
                    14px;
            }
        }