:root{--primary-blue:#3b82f6;--primary-blue-dark:#1e40af;--primary-blue-light:#60a5fa;--primary-blue-ultra-light:#dbeafe;--secondary-teal:#06b6d4;--secondary-emerald:#10b981;--secondary-amber:#f59e0b;--secondary-rose:#f43f5e;--secondary-purple:#8b5cf6;--secondary-indigo:#6366f1;--white:#fff;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;--gray-800:#1e293b;--gray-900:#0f172a;--font-arabic:'Cairo' , 'Segoe UI' , Tahoma , Geneva , Verdana , sans-serif;--font-english:'Inter' , 'Segoe UI' , Tahoma , Geneva , Verdana , sans-serif;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1) , 0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1) , 0 4px 6px -2px rgba(0,0,0,.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.1) , 0 10px 10px -5px rgba(0,0,0,.04);--shadow-2xl:0 25px 50px -12px rgba(0,0,0,.25);--transition-fast:.15s ease-in-out;--transition-normal:.3s ease-in-out;--transition-slow:.5s ease-in-out}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family: var(--font-arabic);background:var(--primary-blue);min-height:100vh;overflow-x:hidden;position:relative;direction:rtl;color:var(--gray-700);line-height:1.6}.geometric-background{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1;overflow:hidden}.geometric-shape{position:absolute;opacity:.1;animation:float 20s ease-in-out infinite}.shape-1{top:10%;left:10%;width:120px;height:120px;background:var(--white);border-radius:50%;animation-delay:0s}.shape-2{top:20%;right:15%;width:80px;height:80px;background:var(--secondary-teal);border-radius:var(--radius-lg);animation-delay:2s}.shape-3{bottom:30%;left:20%;width:100px;height:100px;background:var(--secondary-emerald);border-radius:50%;animation-delay:4s}.shape-4{bottom:15%;right:25%;width:60px;height:60px;background:var(--secondary-amber);border-radius:var(--radius-md);animation-delay:6s}.shape-5{top:50%;left:5%;width:90px;height:90px;background:var(--secondary-purple);border-radius:50%;animation-delay:8s}@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-20px) rotate(120deg);
    }
    66% {
        transform: translateY(10px) rotate(240deg);
    }
}.floating-particles{position:absolute;width:100%;height:100%}.particle{position:absolute;width:4px;height:4px;background:var(--white);border-radius:50%;opacity:.6;animation:particle-float 4s ease-in-out infinite}.particle:nth-child(1) {top:20%;left:25%;animation-delay:0s}.particle:nth-child(2) {top:40%;left:75%;animation-delay:1s}.particle:nth-child(3) {top:60%;left:45%;animation-delay:2s}.particle:nth-child(4) {top:80%;left:65%;animation-delay:3s}.particle:nth-child(5) {top:30%;left:85%;animation-delay:4s}@keyframes particle-float {
    0%, 100% {
        transform: translateY(0px);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-15px);
        opacity: 1;
    }
}.login-container{display:flex;min-height:100vh;position:relative;z-index:2}.login-side-panel{flex:1;background:rgba(255,255,255,.1);backdrop-filter:blur(20px);border-right:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;padding:var(--spacing-3xl);position:relative;max-width:50%;overflow:hidden;contain:layout style paint}.side-content{text-align:center;color:var(--white);max-width:400px}.brand-section{margin-bottom:var(--spacing-3xl)}.brand-icon{width:80px;height:80px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-lg);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3)}.brand-icon i{font-size:2rem;color:var(--white);animation:pulse 2s ease-in-out infinite}@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}.brand-section h2{font-size:2.5rem;font-weight:700;margin-bottom:var(--spacing-md);color:var(--white)}.brand-section p{font-size:1.1rem;opacity:.9;line-height:1.6}.features-list{display:flex;flex-direction:column;gap:var(--spacing-lg)}.feature-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:rgba(255,255,255,.1);border-radius:var(--radius-lg);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);transition:var(--transition-normal)}.feature-item:hover{background:rgba(255,255,255,.2);transform:translateX(-5px)}.feature-item i{font-size:1.25rem;color:var(--secondary-emerald)}.feature-item span{font-size:1rem;color:var(--white)}.login-main-panel{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl);background:var(--white)}.login-card{width:100%;max-width:480px;background:var(--white);border-radius:var(--radius-2xl);padding:var(--spacing-3xl);box-shadow:var(--shadow-2xl);position:relative}.login-header{text-align:center;margin-bottom:var(--spacing-3xl)}.logo-container{position:relative;display:inline-block;margin-bottom:var(--spacing-xl)}.logo-container img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:4px solid var(--primary-blue-ultra-light);animation:logo-float 3s ease-in-out infinite}.logo-glow{position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;background:var(--primary-blue);border-radius:50%;opacity:.2;animation:glow-pulse 2s ease-in-out infinite;z-index:-1}@keyframes logo-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}@keyframes glow-pulse {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.1); }
}.welcome-title{font-size:2.25rem;font-weight:700;color:var(--gray-800);margin-bottom:var(--spacing-sm)}.welcome-subtitle{font-size:1.1rem;color:var(--gray-500);line-height:1.5}.error-alert{display:flex;align-items:flex-start;gap:var(--spacing-md);background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.2);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl);animation:slideInDown .5s ease}.error-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.error-icon i{color:var(--secondary-rose);font-size:1.25rem}.error-content{display:flex;flex-direction:column;gap:var(--spacing-xs)}.error-title{font-weight:600;color:var(--secondary-rose);font-size:.9rem}.error-message{color:var(--gray-600);font-size:.875rem;line-height:1.4}@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}.modern-form{display:flex;flex-direction:column;gap:var(--spacing-xl)}.input-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.input-label{font-size:.875rem;font-weight:500;color:var(--gray-700);margin-bottom:var(--spacing-xs)}.input-container{position:relative;display:flex;align-items:center}.input-icon{position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%);color:var(--gray-400);font-size:1.125rem;transition:var(--transition-normal);z-index:2}.modern-input{width:100%;padding:var(--spacing-lg) var(--spacing-3xl) var(--spacing-lg) var(--spacing-lg);border:2px solid var(--gray-200);border-radius:var(--radius-lg);font-size:1rem;font-family:inherit;background:var(--white);color:var(--gray-700);transition:var(--transition-normal);outline:none;direction:ltr}.modern-input::placeholder{color:var(--gray-400);direction:rtl}.modern-input:focus{border-color:var(--primary-blue);box-shadow:0 0 0 3px rgba(59,130,246,.1)}.input-border{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--primary-blue);transform:scaleX(0);transition:var(--transition-normal);border-radius:0 0 var(--radius-lg) var(--radius-lg)}.input-container.focused .input-icon{color:var(--primary-blue);transform:translateY(-50%) scale(1.1)}.input-container.focused .input-border{transform:scaleX(1)}.input-container.success .modern-input{border-color:var(--secondary-emerald)}.input-container.success .input-icon{color:var(--secondary-emerald)}.input-container.error .modern-input{border-color:var(--secondary-rose)}.input-container.error .input-icon{color:var(--secondary-rose)}.password-toggle{position:absolute;left:var(--spacing-md);top:50%;transform:translateY(-50%);background:none;border:none;color:var(--gray-400);cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:var(--transition-normal);z-index:2}.password-toggle:hover{color:var(--primary-blue);background:rgba(59,130,246,.1)}.password-toggle.active{color:var(--primary-blue)}.form-options{display:flex;align-items:center;justify-content:space-between;margin:var(--spacing-lg) 0}.custom-checkbox{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;user-select:none}.custom-checkbox input[type="checkbox"]{display:none}.checkmark{width:20px;height:20px;border:2px solid var(--gray-300);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:var(--transition-normal);background:var(--white)}.checkmark i{font-size:.75rem;color:var(--white);opacity:0;transition:var(--transition-normal)}.custom-checkbox input[type="checkbox"]:checked+.checkmark{background:var(--primary-blue);border-color:var(--primary-blue)}.custom-checkbox input[type="checkbox"]:checked+.checkmark i{opacity:1}.checkbox-text{font-size:.875rem;color:var(--gray-600)}.forgot-password{font-size:.875rem;color:var(--primary-blue);text-decoration:none;transition:var(--transition-normal)}.forgot-password:hover{color:var(--primary-blue-dark);text-decoration:underline}.login-submit-btn{position:relative;width:100%;padding:var(--spacing-lg) var(--spacing-xl);background:var(--primary-blue);color:var(--white);border:none;border-radius:var(--radius-lg);font-size:1.1rem;font-weight:600;font-family:inherit;cursor:pointer;transition:var(--transition-normal);display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);overflow:hidden;box-shadow:var(--shadow-lg)}.login-submit-btn:hover{background:var(--primary-blue-dark);transform:translateY(-2px);box-shadow:var(--shadow-xl)}.login-submit-btn:active{transform:translateY(0)}.login-submit-btn.loading{cursor:not-allowed;background:var(--gray-400)}.btn-text{transition:var(--transition-normal)}.btn-icon{transition:var(--transition-normal)}.btn-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:var(--transition-normal)}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top:2px solid var(--white);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}.ripple-effect{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);transform:scale(0);animation:ripple .6s linear;pointer-events:none}@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}.login-footer{text-align:center;margin-top:var(--spacing-xl);padding-top:var(--spacing-xl);border-top:1px solid var(--gray-200)}.login-footer p{font-size:.875rem;color:var(--gray-500)}.support-link{color:var(--primary-blue);text-decoration:none;transition:var(--transition-normal)}.support-link:hover{color:var(--primary-blue-dark);text-decoration:underline}@keyframes shake {
    0%, 20%, 40%, 60%, 80%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
}@media (max-width:1024px){.login-container{flex-direction:column}.login-side-panel{flex:none;min-height:40vh;padding:var(--spacing-xl);border-right:none;border-bottom:1px solid rgba(255,255,255,.2)}.brand-section h2{font-size:2rem}.features-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}}@media (max-width:768px){body{font-size:14px}.login-side-panel{min-height:30vh;padding:var(--spacing-lg)}.brand-section h2{font-size:1.75rem}.brand-section p{font-size:1rem}.features-list{grid-template-columns:1fr;gap:var(--spacing-sm)}.feature-item{padding:var(--spacing-sm)}.login-main-panel{padding:var(--spacing-lg)}.login-card{padding:var(--spacing-xl)}.welcome-title{font-size:1.875rem}.welcome-subtitle{font-size:1rem}.modern-input{padding:var(--spacing-md) var(--spacing-xl) var(--spacing-md) var(--spacing-md)}.login-submit-btn{padding:var(--spacing-md) var(--spacing-lg);font-size:1rem}}@media (max-width:480px){.login-side-panel{min-height:25vh;padding:var(--spacing-md)}.brand-icon{width:60px;height:60px}.brand-icon i{font-size:1.5rem}.brand-section h2{font-size:1.5rem}.login-card{padding:var(--spacing-lg)}.welcome-title{font-size:1.5rem}.logo-container img{width:60px;height:60px}}@media (min-resolution:2dppx){.geometric-shape{opacity:.08}.particle{opacity:.4}}@media print{.geometric-background,.login-side-panel{display:none}.login-container{display:block}.login-main-panel{background:var(--white)}.login-card{box-shadow:none;border:1px solid var(--gray-300)}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.login-submit-btn:focus-visible,.modern-input:focus-visible,.password-toggle:focus-visible,.custom-checkbox:focus-visible,.forgot-password:focus-visible,.support-link:focus-visible{outline:2px solid var(--primary-blue);outline-offset:2px}.video-background-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;border-radius:var(--radius-2xl) 0 0 var(--radius-2xl);max-width:100%;max-height:100%;contain:layout style paint;background: linear-gradient(
        135deg,
        var(--primary-blue) 0%,
        var(--primary-blue-dark) 25%,
        var(--secondary-teal) 50%,
        var(--secondary-emerald) 75%,
        var(--primary-blue) 100%
    );background-size:400% 400%;animation:gradientShift 15s ease infinite}@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}#youtube-background{position:absolute;top:50%;left:50%;width:110%;height:110%;min-width:110%;min-height:110%;transform:translate(-50%,-50%) scale(1.05);pointer-events:none;object-fit:cover;max-width:120%;max-height:120%;contain:layout style paint;will-change:transform;backface-visibility:hidden;perspective:1000px;transform-style:preserve-3d;image-rendering:optimizeSpeed;image-rendering:-webkit-optimize-contrast;contain:layout style paint}.video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.15) 0%,
        rgba(30, 64, 175, 0.1) 25%,
        rgba(6, 182, 212, 0.08) 50%,
        rgba(16, 185, 129, 0.1) 75%,
        rgba(59, 130, 246, 0.15) 100%
    );z-index:2;backdrop-filter:blur(1px);border-radius:var(--radius-2xl) 0 0 var(--radius-2xl)}.login-side-panel .side-content{position:relative;z-index:3;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);border-radius:var(--radius-xl);padding:var(--spacing-2xl);margin:var(--spacing-lg);border:1px solid rgba(255,255,255,.15)}.video-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--white);font-size:1.1rem;font-weight:600;transition:opacity var(--transition-slow)}.loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top:3px solid var(--white);border-radius:50%;animation:spin .6s linear infinite;margin-bottom:var(--spacing-sm);will-change:transform;transform-origin:center}.loading-text{text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.5);background:rgba(59,130,246,.9);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);min-width:200px;animation:pulse 2s ease-in-out infinite}@keyframes pulse {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}.video-controls{position:absolute;top:var(--spacing-lg);right:var(--spacing-lg);z-index:10;display:flex;flex-direction:column;gap:var(--spacing-sm);opacity:.7;transition:opacity var(--transition-normal)}.video-control-btn{width:45px;height:45px;border-radius:50%;border:none;background:rgba(59,130,246,.9);color:var(--white);font-size:1.1rem;cursor:pointer;transition:all var(--transition-normal);backdrop-filter:blur(10px);box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2)}.video-control-btn:hover{background:rgba(59,130,246,1);transform:scale(1.1);box-shadow:var(--shadow-xl)}.video-control-btn:active{transform:scale(.95)}@media (max-width:768px){.video-background-container{border-radius:var(--radius-xl) var(--radius-xl) 0 0;max-width:100%;max-height:50vh;overflow:hidden}.video-overlay{border-radius:var(--radius-xl) var(--radius-xl) 0 0;background: linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.2) 0%,
            rgba(30, 64, 175, 0.15) 25%,
            rgba(6, 182, 212, 0.12) 50%,
            rgba(16, 185, 129, 0.15) 75%,
            rgba(59, 130, 246, 0.2) 100%
        )}.login-side-panel .side-content{margin:var(--spacing-md);padding:var(--spacing-xl);background:rgba(255,255,255,.12)}.video-controls{top:var(--spacing-md);right:var(--spacing-md)}.video-control-btn{width:40px;height:40px;font-size:1rem}}@media (max-width:480px){.video-controls{top:var(--spacing-sm);right:var(--spacing-sm)}.video-control-btn{width:35px;height:35px;font-size:.9rem}.login-side-panel .side-content{margin:var(--spacing-sm);padding:var(--spacing-lg)}}@media (max-width:768px){.video-overlay{backdrop-filter:blur(1px)}#youtube-background{width:105%;height:105%;min-width:105%;min-height:105%;transform:translate(-50%,-50%) scale(1.02);image-rendering:optimizeSpeed;image-rendering:pixelated;image-rendering:crisp-edges;filter:none;backdrop-filter:none;will-change:auto}.loading-spinner{width:40px;height:40px;border-width:3px}.loading-text{font-size:.9rem;padding:var(--spacing-xs) var(--spacing-sm)}}@media (max-width:1200px){.login-side-panel{max-width:45%}.video-background-container{max-width:100%;max-height:100%}#youtube-background{max-width:110%;max-height:110%}}@media (max-width:768px){.login-side-panel{display:none!important}.login-container{flex-direction:column}.login-main-panel{width:100%;flex:1}}@media (min-width:1920px){.login-side-panel{max-width:40%}.video-background-container{max-width:100%;max-height:100%}}