:root {
            --primary: var(--qc-primary);
            --secondary: var(--qc-secondary);
            --deep: var(--qc-deep);
            --dark: var(--qc-dark);
            --text: var(--qc-text);
            --muted: var(--qc-muted);
            --line: var(--qc-line);
            --danger: var(--qc-danger);
            --shadow: 0 20px 58px rgba(36,56,75,0.13)
        }

        * {
            box-sizing: border-box;
            font-family: "Cairo", sans-serif}

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

        body {
            min-height: 100vh;
            color: var(--text);
            background: radial-gradient(circle at top right,rgba(79,172,254,0.18),transparent 32%),radial-gradient(circle at bottom left,rgba(0,242,254,0.13),transparent 32%),linear-gradient(135deg,rgba(0,242,254,0.1) 0%,rgba(79,172,254,0.1) 52%,#fff 100%)
        }

        a {
            text-decoration: none
        }

        .auth-page {
            min-height: 100vh;
            display: grid;
            grid-template-columns: minmax(0,1fr) minmax(420px,.82fr)
        }

        .auth-visual {
            padding: 54px clamp(30px,6vw,90px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden
        }

            .auth-visual:after {
                content: "";
                position: absolute;
                width: 360px;
                height: 360px;
                border-radius: 50%;
                left: -130px;
                bottom: -150px;
                background: linear-gradient(135deg,rgba(79,172,254,0.14),rgba(0,242,254,0.08));
                z-index: -1
            }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 13px;
            width: max-content
        }

        .brand-icon {
            width: 58px;
            height: 58px;
            border-radius: 19px;
            display: grid;
            place-items: center;
            color: #fff;
            font-size: 24px;
            background: linear-gradient(135deg,var(--primary),var(--secondary));
            box-shadow: 0 12px 28px rgba(79,172,254,0.28)
        }

        .brand-text strong {
            display: block;
            font-size: 1.45rem;
            line-height: 1.15;
            background: linear-gradient(135deg,var(--deep),var(--primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .brand-text span {
            display: block;
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
            margin-top: 2px
        }

        .hero {
            max-width: 650px;
            padding: 70px 0 30px
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 9px 14px;
            border: 1px solid rgba(79,172,254,0.18);
            border-radius: 999px;
            background: rgba(255,255,255,0.78);
            color: var(--deep);
            font-weight: 900
        }

        .hero h1 {
            margin: 20px 0 16px;
            font-size: clamp(2.1rem,4vw,3.9rem);
            line-height: 1.25;
            color: var(--dark);
            font-weight: 900
        }

            .hero h1 span {
                background: linear-gradient(135deg,var(--primary),var(--secondary));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent
            }

        .hero p {
            margin: 0;
            color: #244966;
            font-size: 1.05rem;
            line-height: 2;
            font-weight: 700
        }

        .steps {
            display: grid;
            gap: 13px;
            margin-top: 30px;
            max-width: 570px
        }

        .step {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 15px 17px;
            border: 1px solid rgba(79,172,254,0.15);
            border-radius: 20px;
            background: rgba(255,255,255,0.76);
            box-shadow: 0 10px 25px rgba(36,56,75,0.06);
            font-weight: 800;
            color: var(--dark)
        }

            .step i {
                width: 42px;
                height: 42px;
                border-radius: 14px;
                display: grid;
                place-items: center;
                color: var(--primary);
                background: rgba(79,172,254,0.12)
            }

        .footer {
            color: var(--muted);
            font-size: 12px;
            font-weight: 700
        }

        .auth-panel {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 34px;
            background: rgba(255,255,255,0.36);
            border-right: 1px solid rgba(79,172,254,0.12)
        }

        .card {
            width: min(500px,100%);
            padding: clamp(28px,4vw,48px);
            border: 1px solid rgba(79,172,254,0.18);
            border-radius: 32px;
            background: rgba(255,255,255,0.94);
            box-shadow: var(--shadow)
        }

        .card-header {
            text-align: center;
            margin-bottom: 28px
        }

        .card-icon {
            width: 76px;
            height: 76px;
            border-radius: 24px;
            margin: 0 auto 17px;
            display: grid;
            place-items: center;
            color: #fff;
            font-size: 29px;
            background: linear-gradient(135deg,var(--primary),var(--secondary));
            box-shadow: 0 14px 30px rgba(79,172,254,0.27)
        }

        .card h2 {
            margin: 0 0 8px;
            color: var(--dark);
            font-size: 1.72rem;
            font-weight: 900
        }

        .card-header p {
            margin: 0;
            color: var(--muted);
            font-weight: 700;
            line-height: 1.8
        }

        .form-group {
            margin-bottom: 20px
        }

        .form-label {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 9px;
            color: var(--dark);
            font-weight: 900
        }

            .form-label i {
                color: var(--primary)
            }

        .input-wrap {
            position: relative
        }

        .form-control {
            width: 100%;
            min-height: 56px;
            padding: 13px 16px 13px 49px;
            border: 1px solid rgba(79,172,254,0.16);
            border-radius: 18px;
            outline: 0;
            background: #fff;
            color: #24384b;
            font-size: 15px;
            font-weight: 700;
            transition: .25s
        }

            .form-control:focus {
                border-color: var(--primary);
                box-shadow: 0 0 0 .22rem rgba(79,172,254,0.16)
            }

        .input-icon {
            position: absolute;
            left: 17px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary)
        }

        .field-validation-error, .text-danger {
            display: block;
            margin-top: 7px;
            color: var(--danger);
            font-size: 12px;
            font-weight: 800
        }

        .validation-summary-valid {
            display: none
        }

        .validation-summary-errors {
            margin-bottom: 18px;
            padding: 13px 15px;
            border: 1px solid rgba(220,53,69,0.16);
            border-radius: 15px;
            background: rgba(220,53,69,0.1);
            color: var(--danger);
            font-size: 13px;
            font-weight: 800
        }

            .validation-summary-errors ul {
                margin: 0;
                padding-right: 18px
            }

        .btn-submit {
            width: 100%;
            min-height: 56px;
            border: 0;
            border-radius: 18px;
            color: #fff;
            background: linear-gradient(135deg,var(--primary),var(--secondary));
            box-shadow: 0 13px 28px rgba(79,172,254,0.24);
            font-size: 15px;
            font-weight: 900;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px
        }

            .btn-submit:disabled {
                opacity: .7;
                cursor: not-allowed
            }

        .links {
            text-align: center;
            margin-top: 23px
        }

            .links a {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                color: #4facfe;
                font-weight: 900
            }

        @media(max-width:900px) {
            .auth-page {
                grid-template-columns: 1fr
            }

            .auth-visual {
                display: none
            }

            .auth-panel {
                min-height: 100vh;
                border: 0;
                padding: 22px
            }

            .card {
                border-radius: 26px
            }
        }