@import "https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;600;700;800;900&display=swap";
:root{--auth-primary:#1f2937;--auth-primary-light:#374151;--auth-primary-dark:#111827;--auth-secondary:#6b7280;--auth-accent:#4b5563;--auth-success:#10b981;--auth-danger:#ef4444;--auth-bg-gradient-start:#f9fafb;--auth-bg-gradient-end:#e5e7eb;--auth-text-light:#fff;--auth-text-dark:#111827;--auth-border:#d1d5db;--auth-shadow-lg:0 20px 50px #0000001a}.auth-page{background:linear-gradient(135deg,#fff 0%,#f3f4f6 50%,#e5e7eb 100%);justify-content:center;align-items:center;min-height:100vh;font-family:Readex Pro,Cairo,sans-serif;display:flex;position:relative;overflow:hidden}.auth-page:before{content:"";background:radial-gradient(circle at 30%,#6b72800d 0%,#0000 50%),radial-gradient(circle at 70% 80%,#4b55630d 0%,#0000 50%);width:150%;height:150%;animation:15s infinite gradientShift;position:absolute}@keyframes gradientShift{0%,to{transform:translate(0)rotate(0)}33%{transform:translate(-5%,-5%)rotate(120deg)}66%{transform:translate(5%,5%)rotate(240deg)}}.floating-shape{opacity:.1;animation:20s ease-in-out infinite float;position:absolute}.floating-shape-1{background:linear-gradient(135deg,#9ca3af,#6b7280);border-radius:30% 70% 70% 30%/30% 30% 70% 70%;width:100px;height:100px;animation-delay:0s;top:10%;left:10%}.floating-shape-2{background:linear-gradient(135deg,#6b7280,#4b5563);border-radius:63% 37% 54% 46%/55% 48% 52% 45%;width:150px;height:150px;animation-delay:5s;bottom:15%;right:15%}.floating-shape-3{background:linear-gradient(135deg,#9ca3af,#374151);border-radius:41% 59%;width:80px;height:80px;animation-delay:10s;top:50%;right:5%}@keyframes float{0%,to{transform:translate(0)rotate(0)}25%{transform:translate(20px,-20px)rotate(90deg)}50%{transform:translate(-15px,15px)rotate(180deg)}75%{transform:translate(15px,20px)rotate(270deg)}}.auth-container{z-index:1;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);width:100%;max-width:1100px;box-shadow:var(--auth-shadow-lg);background:#fffffffa;border-radius:30px;grid-template-columns:1fr 1fr;min-height:650px;margin:2rem;animation:.8s ease-out slideUp;display:grid;position:relative;overflow:hidden}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.branding-panel{text-align:center;color:var(--auth-text-light);background:linear-gradient(135deg,#111827 0%,#1f2937 100%);flex-direction:column;justify-content:center;align-items:center;padding:4rem 3rem;display:flex;position:relative;overflow:hidden}.branding-panel:before{content:"";background:radial-gradient(circle,#9ca3af26 0%,#0000 70%);border-radius:50%;width:300px;height:300px;animation:4s ease-in-out infinite pulse;position:absolute;top:-100px;right:-100px}@keyframes pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.2)}}.auth-logo{z-index:1;background:linear-gradient(135deg,#6b7280 0%,#4b5563 100%);border-radius:30px;justify-content:center;align-items:center;width:120px;height:120px;margin-bottom:2rem;font-size:4rem;animation:3s ease-in-out infinite logoFloat;display:flex;position:relative;box-shadow:0 10px 40px #6b72804d}@keyframes logoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.branding-panel h1{text-shadow:0 2px 10px #0003;z-index:1;margin-bottom:1rem;font-size:2.5rem;font-weight:800;position:relative}.branding-panel p{opacity:.95;z-index:1;max-width:400px;font-size:1.125rem;line-height:1.8;position:relative}.auth-features{z-index:1;flex-direction:column;gap:1.5rem;width:100%;margin-top:3rem;display:flex;position:relative}.auth-feature-item{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;align-items:center;gap:1rem;padding:1rem 1.5rem;transition:all .3s;display:flex}.auth-feature-item:hover{background:#ffffff26;transform:translate(-5px)}.auth-feature-icon{font-size:1.8rem}.auth-feature-text{text-align:right;font-size:.95rem}.auth-form-panel{flex-direction:column;justify-content:center;padding:4rem 3rem;display:flex}.auth-form-header{text-align:center;margin-bottom:3rem}.auth-form-header h2{color:var(--auth-primary);margin-bottom:.5rem;font-size:2rem;font-weight:700}.auth-form-header p{color:var(--auth-text-dark);opacity:.7;font-size:1rem}.auth-tabs{background:#f8fafc;border-radius:15px;gap:.5rem;margin-bottom:2rem;padding:.5rem;display:flex}.auth-tab{color:var(--auth-text-dark);cursor:pointer;opacity:.6;background:0 0;border:none;border-radius:12px;flex:1;padding:.875rem;font-size:1rem;font-weight:600;transition:all .3s}.auth-tab.active{color:#fff;opacity:1;background:linear-gradient(135deg,#111827 0%,#1f2937 100%);box-shadow:0 4px 12px #1f29374d}.auth-input-wrapper{position:relative}.auth-input-icon{opacity:.4;color:var(--auth-text-dark);font-size:1.25rem;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.auth-input{border:2px solid var(--auth-border);background:#f8fafc;border-radius:12px;width:100%;padding:.95rem 3rem .95rem 1rem;font-size:1rem;transition:all .3s}.auth-input:focus{background:#fff;border-color:#111827;outline:none;box-shadow:0 0 0 4px #1f29371a}.auth-btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#111827 0%,#1f2937 100%);border:none;border-radius:12px;justify-content:center;align-items:center;gap:.75rem;width:100%;padding:1.125rem;font-size:1.125rem;font-weight:700;transition:all .3s;display:flex;box-shadow:0 4px 16px #1f293740}.auth-btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#000 0%,#111827 100%);transform:translateY(-2px);box-shadow:0 8px 24px #1f293759}.auth-btn-primary:disabled{opacity:.6;cursor:not-allowed}@media (max-width:968px){.auth-container{grid-template-columns:1fr;max-width:500px}.branding-panel{display:none}.auth-form-panel{padding:3rem 2rem}}@media (max-width:480px){.auth-form-panel{padding:2rem 1.5rem}.auth-form-header h2{font-size:1.5rem}}.auth-loading{border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:1s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}