:root {
            --primary: #f97316;
            --primary-light: #ffedd5;
            --primary-gradient: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
            --text-dark: #0f172a;
            --text-light: #64748b;
            --white: #ffffff;
            --google-red: #ea4335;
            --facebook-blue: #1877f2;
        }

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

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            min-height: 100vh;
            display: flex;
            background: #fff;
            overflow-x: hidden;
            position: relative;
        }

        /* --- نظام الـ Blobs الخلفية --- */
        .bg-blobs {
            position: fixed;
            width: 100%; height: 100%;
            top: 0; left: 0; z-index: 0;
            overflow: hidden; pointer-events: none;
        }

        .blob {
            position: absolute;
            width: 500px; height: 500px;
            background: var(--primary-light);
            filter: blur(80px);
            border-radius: 50%;
            opacity: 0.5;
            animation: move 20s infinite alternate;
        }

        .blob-1 { top: -100px; right: -100px; background: #fed7aa; }
        .blob-2 { bottom: -150px; left: -100px; background: #ffedd5; animation-delay: -5s; }
        .blob-3 { top: 40%; left: 30%; width: 300px; height: 300px; background: #fdba74; opacity: 0.3; animation-delay: -10s; }

        @keyframes move {
            from { transform: translate(0, 0) scale(1) rotate(0deg); }
            to { transform: translate(60px, 120px) scale(1.1) rotate(45deg); }
        }

        .login-container {
            display: flex;
            width: 100%;
            z-index: 1;
            position: relative;
        }

        /* --- Side Info Section --- */
        .side-info {
            flex: 1.2;
            position: sticky;
            top: 0; height: 100vh;
            display: flex; align-items: center; justify-content: center;
            color: white; padding: 60px; overflow: hidden;
        }

        .side-info-bg {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: url('https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover; background-position: center; z-index: 1;
        }

        .side-info-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.88) 0%, rgba(15, 23, 42, 0.75) 100%);
            backdrop-filter: blur(10px); z-index: 2;
        }

        .info-content { position: relative; z-index: 3; max-width: 500px; }

        .brand-box { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; }
        .brand-icon {
            width: 50px; height: 50px; background: white; color: var(--primary);
            border-radius: 12px; display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .brand-name { font-family: 'Outfit', sans-serif; font-size: 2.2rem; font-weight: 800; }

        .info-content h1 { font-family: 'Outfit', sans-serif; font-size: 3.5rem; line-height: 1.1; margin-bottom: 20px; font-weight: 800; }
        .info-content p { font-size: 1.2rem; opacity: 0.9; margin-bottom: 20px; }

        /* --- Form Section --- */
        .side-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 40px; }

        .form-content { width: 100%; max-width: 400px; position: relative; z-index: 5; }

        .form-header { margin-bottom: 35px; }
        .form-header h2 { font-family: 'Outfit', sans-serif; font-size: 2.5rem; color: var(--text-dark); letter-spacing: -1px; }
        .form-header span { color: var(--primary); }

        .input-box { margin-bottom: 20px; }
        .input-box label { display: block; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; font-size: 0.9rem; }

        .field { position: relative; display: flex; align-items: center; }

        .field i.main-icon {
            position: absolute;
            left: 20px;
            color: var(--primary);
            font-size: 1.1rem;
            z-index: 10;
            pointer-events: none;
        }

        .field .toggle-password {
            position: absolute;
            right: 20px;
            color: var(--text-light);
            cursor: pointer;
            z-index: 10;
            transition: 0.3s;
        }
        .field .toggle-password:hover { color: var(--primary); }

        .field input {
            width: 100%;
            padding: 16px 50px 16px 55px;
            border: 2px solid #e2e8f0;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            font-family: inherit;
            font-size: 1rem;
            transition: 0.3s ease;
        }

        .field input:focus {
            outline: none;
            border-color: var(--primary);
            background: white;
            box-shadow: 0 10px 20px rgba(249, 115, 22, 0.08);
        }

        .actions { display: flex; justify-content: space-between; align-items: center; margin: 15px 0 25px 0; font-weight: 600; font-size: 0.9rem; }

        .btn-login {
            width: 100%; background: var(--primary-gradient); color: white; padding: 18px;
            border: none; border-radius: 15px; font-size: 1.1rem; font-weight: 800;
            cursor: pointer; transition: 0.3s; box-shadow: 0 10px 20px rgba(249, 115, 22, 0.2);
            display: flex; justify-content: center; align-items: center; gap: 12px;
        }
        .btn-login:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(249, 115, 22, 0.3); }

        .divider {
            display: flex; align-items: center; text-align: center; margin: 25px 0;
            color: var(--text-light); font-size: 0.85rem; font-weight: 600;
        }
        .divider::before, .divider::after {
            content: ''; flex: 1; border-bottom: 1px solid #e2e8f0;
        }
        .divider:not(:empty)::before { margin-right: .5em; }
        .divider:not(:empty)::after { margin-left: .5em; }

        .social-group { display: flex; gap: 15px; }
        .social-btn {
            flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
            padding: 14px; border: 2px solid #e2e8f0; border-radius: 15px;
            background: white; color: var(--text-dark); font-weight: 700; font-size: 0.9rem;
            cursor: pointer; transition: 0.3s; text-decoration: none;
        }
        .social-btn i { font-size: 1.2rem; }
        .social-btn.google:hover { border-color: var(--google-red); color: var(--google-red); background: #fff5f5; }
        .social-btn.facebook:hover { border-color: var(--facebook-blue); color: var(--facebook-blue); background: #f0f7ff; }

        .footer-text { text-align: center; margin-top: 30px; font-weight: 600; color: var(--text-light); }
        .footer-text a { color: var(--primary); text-decoration: none; font-weight: 800; }

        @media (max-width: 900px) {
            .side-info { display: none; }
            body { overflow-y: auto; }
            .side-form { padding: 40px 24px; align-items: flex-start; }
        }