: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);
            --bg: #f4f8fc;
            --card: rgba(255,255,255,0.92);
            --line: var(--qc-line);
            --danger: var(--qc-danger);
            --warning: var(--qc-warning);
            --success: var(--qc-success);
            --shadow: 0 20px 58px rgba(36,56,75,0.13);
            --shadow-sm: 0 12px 32px rgba(36,56,75,0.08);
        }

        * {
            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%);
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
        }

        .auth-page {
            min-height: 100vh;
            display: grid;
            grid-template-columns: minmax(0, .95fr) minmax(520px, 1.05fr);
            align-items: stretch;
            position: relative;
        }

            .auth-page::before,
            .auth-page::after {
                content: "";
                position: absolute;
                border-radius: 999px;
                background: linear-gradient(135deg, rgba(79,172,254,0.12), rgba(0,242,254,0.08));
                pointer-events: none;
                z-index: 0;
            }

            .auth-page::before {
                width: 280px;
                height: 280px;
                top: 95px;
                right: -85px;
            }

            .auth-page::after {
                width: 360px;
                height: 360px;
                bottom: -140px;
                left: -120px;
            }

        .auth-visual,
        .auth-panel {
            position: relative;
            z-index: 1;
        }

        .auth-visual {
            padding: 38px 44px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            color: var(--dark);
            font-weight: 900;
            width: fit-content;
        }

        .brand-icon {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: 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);
            position: relative;
            overflow: hidden;
        }

            .brand-icon::after {
                content: "";
                position: absolute;
                width: 86px;
                height: 86px;
                border-radius: 50%;
                background: rgba(255,255,255,0.18);
                top: -46px;
                left: -46px;
            }

        .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-copy {
            max-width: 650px;
            padding: 48px 0 20px;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--deep);
            background: rgba(255,255,255,0.76);
            border: 1px solid rgba(79,172,254,0.18);
            border-radius: 999px;
            padding: 9px 14px;
            font-weight: 900;
            box-shadow: 0 10px 26px rgba(36,56,75,0.06);
            margin-bottom: 18px;
        }

        .hero-copy h1 {
            margin: 0 0 18px;
            color: var(--dark);
            font-size: clamp(2.15rem, 4vw, 4rem);
            line-height: 1.24;
            font-weight: 900;
            letter-spacing: -.8px;
        }

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

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

        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            margin-top: 32px;
        }

        .benefit-card {
            background: rgba(255,255,255,0.8);
            border: 1px solid rgba(79,172,254,0.14);
            border-radius: 22px;
            padding: 16px;
            box-shadow: var(--shadow-sm);
        }

            .benefit-card i {
                width: 44px;
                height: 44px;
                border-radius: 16px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: var(--primary);
                background: linear-gradient(135deg, rgba(79,172,254,0.15), rgba(0,242,254,0.08));
                margin-bottom: 12px;
                font-size: 19px;
            }

            .benefit-card strong {
                display: block;
                color: var(--dark);
                font-weight: 900;
                margin-bottom: 5px;
            }

            .benefit-card span {
                display: block;
                color: var(--muted);
                font-size: 12px;
                font-weight: 800;
                line-height: 1.7;
            }

        .role-preview {
            width: min(520px, 100%);
            background: rgba(255,255,255,0.84);
            border: 1px solid rgba(79,172,254,0.18);
            border-radius: 34px;
            padding: 20px;
            box-shadow: var(--shadow);
            backdrop-filter: blur(20px);
            margin-top: 30px;
        }

        .preview-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 16px;
            color: var(--dark);
            font-weight: 900;
        }

            .preview-title span {
                color: var(--primary);
                background: rgba(79,172,254,0.1);
                border-radius: 999px;
                padding: 7px 11px;
                font-size: 12px;
            }

        .role-list {
            display: grid;
            gap: 12px;
        }

        .role-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 14px 16px;
        }

            .role-item div {
                display: flex;
                align-items: center;
                gap: 10px;
                color: var(--dark);
                font-weight: 900;
            }

            .role-item i {
                width: 42px;
                height: 42px;
                border-radius: 15px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: var(--primary);
                background: linear-gradient(135deg, rgba(79,172,254,0.15), rgba(0,242,254,0.08));
            }

            .role-item small {
                color: var(--muted);
                font-weight: 800;
            }

        .auth-footer {
            color: var(--muted);
            font-size: 13px;
            font-weight: 700;
            margin-top: 26px;
        }

        .auth-panel {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 34px;
        }

        .register-card {
            width: min(100%, 610px);
            background: rgba(255,255,255,0.92);
            border: 1px solid rgba(79,172,254,0.16);
            border-radius: 34px;
            box-shadow: var(--shadow);
            padding: 34px;
            backdrop-filter: blur(18px);
            position: relative;
            overflow: hidden;
        }

            .register-card::before {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                height: 6px;
                background: linear-gradient(135deg, var(--primary), var(--secondary));
            }

        .register-header {
            text-align: center;
            margin-bottom: 26px;
        }

        .register-icon {
            width: 78px;
            height: 78px;
            border-radius: 25px;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 30px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 15px 34px rgba(79,172,254,0.27);
        }

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

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

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .form-group {
            margin-bottom: 0;
        }

            .form-group.full {
                grid-column: 1 / -1;
            }

        .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: 54px;
            border: 1px solid rgba(79,172,254,0.16);
            border-radius: 18px;
            padding: 13px 16px;
            padding-left: 48px;
            outline: none;
            background: #fff;
            color: #24384b;
            font-size: 15px;
            font-weight: 700;
            transition: all .25s ease;
        }

        select.form-control {
            appearance: none;
            cursor: pointer;
        }

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

        .input-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--muted);
            pointer-events: none;
        }

        .password-toggle {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            width: 35px;
            height: 35px;
            border: 0;
            border-radius: 12px;
            background: rgba(79,172,254,0.1);
            color: var(--primary);
            cursor: pointer;
        }

        .password-input {
            padding-left: 56px;
        }

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

        .password-hint {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
            margin-top: 8px;
            line-height: 1.7;
        }

        .submit-section {
            margin-top: 20px;
        }

        .btn-register {
            width: 100%;
            border: 0;
            min-height: 54px;
            border-radius: 18px;
            color: #fff;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 14px 30px rgba(79,172,254,0.28);
            font-size: 16px;
            font-weight: 900;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            transition: all .25s ease;
        }

            .btn-register:hover {
                transform: translateY(-2px);
                box-shadow: 0 18px 40px rgba(79,172,254,0.36);
            }

        .alert {
            border-radius: 18px;
            padding: 13px 15px;
            margin: 0 0 18px;
            font-weight: 800;
            line-height: 1.8;
        }

        .alert-danger {
            color: #dc3545;
            background: rgba(220,53,69,0.1);
            border: 1px solid rgba(220,53,69,0.18);
        }

        .alert-warning {
            color: #ffc107;
            background: rgba(255,193,7,0.14);
            border: 1px solid rgba(255,193,7,0.22);
        }

        .alert p {
            margin: 0 0 5px;
        }

            .alert p:last-child {
                margin-bottom: 0;
            }

        .login-link {
            text-align: center;
            margin-top: 22px;
            color: var(--muted);
            font-weight: 800;
        }

            .login-link a {
                color: var(--primary);
                font-weight: 900;
            }

        .back-home {
            margin-top: 14px;
            text-align: center;
        }

            .back-home a {
                display: inline-flex;
                align-items: center;
                gap: 7px;
                color: var(--deep);
                font-weight: 900;
                padding: 9px 12px;
                border-radius: 999px;
                transition: all .22s ease;
            }

                .back-home a:hover {
                    background: rgba(79,172,254,0.1);
                    color: var(--primary);
                }

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

            .auth-visual {
                padding-bottom: 0;
            }

            .hero-copy {
                padding-top: 36px;
            }

            .auth-footer {
                display: none;
            }

            .auth-panel {
                padding-top: 10px;
            }

            .benefits-grid {
                grid-template-columns: repeat(4, 1fr);
            }

            .role-preview {
                display: none;
            }
        }

        @media(max-width: 820px) {
            .benefits-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .auth-visual,
            .auth-panel {
                padding: 20px 16px;
            }

            .hero-copy h1 {
                font-size: 2.05rem;
            }

            .form-grid {
                grid-template-columns: 1fr;
            }

            .form-group.full {
                grid-column: auto;
            }

            .register-card {
                padding: 28px 20px;
                border-radius: 26px;
            }
        }

        @media(max-width: 520px) {
            .brand-text span {
                display: none;
            }

            .hero-copy p {
                font-size: 1rem;
            }

            .benefits-grid {
                display: none;
            }
        }

        .account-type-section {
            grid-column: 1 / -1;
        }

        .role-cards {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            margin-top: 10px;
        }

        .role-option {
            display: block;
            cursor: pointer;
        }

        .role-radio {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .role-card-select {
            min-height: 145px;
            border: 2px solid rgba(79,172,254,0.16);
            background: #fff;
            border-radius: 22px;
            padding: 18px;
            transition: all .25s ease;
            box-shadow: 0 10px 26px rgba(36,56,75,0.06);
            position: relative;
            overflow: hidden;
        }

            .role-card-select::before {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, rgba(79,172,254,0.08), rgba(0,242,254,0.05));
                opacity: 0;
                transition: opacity .25s ease;
            }

        .role-card-content {
            position: relative;
            z-index: 1;
        }

        .role-card-icon {
            width: 52px;
            height: 52px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            background: linear-gradient(135deg, rgba(79,172,254,0.16), rgba(0,242,254,0.09));
            font-size: 22px;
            margin-bottom: 12px;
        }

        .role-card-select strong {
            display: block;
            color: var(--dark);
            font-size: 1.05rem;
            font-weight: 900;
            margin-bottom: 6px;
        }

        .role-card-select span {
            display: block;
            color: var(--muted);
            font-size: 13px;
            font-weight: 800;
            line-height: 1.8;
        }

        .role-check {
            position: absolute;
            top: 14px;
            left: 14px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            opacity: 0;
            transform: scale(.7);
            transition: all .25s ease;
            z-index: 2;
        }

        .role-radio:checked + .role-card-select {
            border-color: var(--primary);
            box-shadow: 0 16px 34px rgba(79,172,254,0.18);
            transform: translateY(-2px);
        }

            .role-radio:checked + .role-card-select::before {
                opacity: 1;
            }

            .role-radio:checked + .role-card-select .role-check {
                opacity: 1;
                transform: scale(1);
            }

        .role-radio:focus + .role-card-select {
            box-shadow: 0 0 0 .22rem rgba(79,172,254,0.16);
        }

        @media(max-width: 620px) {
            .role-cards {
                grid-template-columns: 1fr;
            }
        }