* {
            box-sizing: border-box;
        }

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

        body {
            margin: 0;

            min-height: 100vh;

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

            padding: 24px;

            background: #f4f6f8;

            color: #202124;

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

        .page {
            width: 100%;

            max-width: 420px;
        }

        .brand {
            margin-bottom: 22px;

            text-align: center;
        }

        .brand-title {
            margin: 0;

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

            line-height: 1.2;
        }

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

            color: #858a91;

            font-size: 14px;
        }

        .card {
            padding:
                30px;

            background: #ffffff;

            border:
                1px solid #e1e4e8;

            border-radius: 14px;

            box-shadow:
                0 8px 30px
                rgba(0, 0, 0, 0.05);
        }

        .card-title {
            margin:
                0
                0
                5px;

            font-size: 22px;
            font-weight: 700;
        }

        .card-description {
            margin-bottom: 24px;

            color: #7b8188;

            font-size: 13px;
        }

        .field {
            margin-bottom: 18px;
        }

        .field label {
            display: block;

            margin-bottom: 7px;

            color: #454a50;

            font-size: 13px;
            font-weight: 600;
        }

        .field input {
            width: 100%;

            height: 44px;

            padding:
                9px
                12px;

            background: #ffffff;

            border:
                1px solid #d5d9de;

            border-radius: 8px;

            outline: none;

            color: #202124;

            font-family: inherit;
            font-size: 15px;

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

        .field input:focus {
            border-color: #6f99d4;

            box-shadow:
                0 0 0 3px
                rgba(76, 125, 190, 0.12);
        }

        .submit-button {
            width: 100%;

            min-height: 44px;

            margin-top: 4px;

            border: 0;

            border-radius: 8px;

            background: #3569b3;

            color: #ffffff;

            font-family: inherit;
            font-size: 15px;
            font-weight: 650;

            cursor: pointer;

            transition:
                background-color 0.15s ease;
        }

        .submit-button:hover {
            background: #2d5d9f;
        }

        .error-box {
            margin-bottom: 20px;

            padding:
                11px
                13px;

            background: #fff0f0;

            border:
                1px solid #f2cccc;

            border-radius: 8px;

            color: #b63b3b;

            font-size: 13px;
        }

        .error-box ul {
            margin: 0;

            padding-left: 18px;
        }

        .field-error {
            margin-top: 6px;

            color: #b63b3b;

            font-size: 12px;
        }

        .footer {
            margin-top: 18px;

            color: #999ea4;

            font-size: 11px;

            text-align: center;
        }

        @media (max-width: 500px) {
            body {
                padding: 16px;
            }

            .card {
                padding:
                    24px
                    20px;
            }

            .brand-title {
                font-size: 26px;
            }
        }