*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:#0a0a0a;color:#fff;overflow-x:hidden}#root{min-height:100vh}.login-container{min-height:100vh;background-color:#0a0a0a;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background-image:radial-gradient(circle at 25% 25%,rgba(255,107,53,.1) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(255,107,53,.05) 0%,transparent 50%)}.login-wrapper{width:100%;max-width:450px;padding:20px}.login-card{background:linear-gradient(135deg,#1a1a1a,#252525);border-radius:20px;padding:40px;box-shadow:0 10px 40px #00000080;border:1px solid #333;position:relative;overflow:hidden}.rotating-bg{position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,107,53,.1) 0%,transparent 70%);animation:rotate 30s linear infinite;pointer-events:none}.login-header{text-align:center;margin-bottom:40px;position:relative;z-index:1}.logo-section{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:20px}.logo{width:60px;height:60px;filter:drop-shadow(0 0 20px rgba(255,107,53,.5));animation:pulse 2s ease-in-out infinite}.title{font-size:2.5em;font-weight:700;background:linear-gradient(45deg,#ff6b35,#f7931e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.subtitle{color:#888;font-size:1.1em;margin-top:10px}.demo-info{background:#2196f31a;border:1px solid #2196F3;color:#2196f3;padding:12px;border-radius:8px;margin-bottom:20px;font-size:.85em;position:relative;z-index:1}.demo-title{font-weight:700;margin-bottom:5px}.login-form{position:relative;z-index:1}.form-group{margin-bottom:25px}.form-group label{display:block;margin-bottom:8px;color:#ddd;font-size:.95em;font-weight:500}.form-group input{width:100%;padding:15px 20px;background:#0a0a0a;border:2px solid #333;border-radius:10px;color:#fff;font-size:1em;transition:all .3s ease;outline:none}.form-group input:focus{border-color:#ff6b35;box-shadow:0 0 20px #ff6b354d;background:#111}.form-group input:disabled{opacity:.6;cursor:not-allowed}.password-input-wrapper{position:relative}.password-input-wrapper input{padding-right:50px}.password-toggle{position:absolute;right:15px;top:50%;transform:translateY(-50%);background:none;border:none;color:#666;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:color .3s ease}.password-toggle:hover{color:#ff6b35}.password-toggle:disabled{cursor:not-allowed;opacity:.5}.remember-section{display:flex;align-items:center;gap:10px;margin-bottom:30px}.remember-section input[type=checkbox]{display:none}.remember-section label{display:flex;align-items:center;gap:10px;cursor:pointer;color:#888;font-size:.9em}.checkbox{width:20px;height:20px;background:#0a0a0a;border:2px solid #333;border-radius:5px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.checkbox.checked{background:#ff6b35;border-color:#ff6b35}.checkmark{color:#000;font-weight:700}.submit-button{width:100%;padding:15px;background:linear-gradient(135deg,#ff6b35,#f7931e);border:none;border-radius:10px;color:#000;font-size:1.1em;font-weight:700;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 30px #ff6b3566}.submit-button:active:not(:disabled){transform:translateY(0)}.submit-button:disabled{cursor:not-allowed;opacity:.7}.login-footer{text-align:center;margin-top:30px;position:relative;z-index:1}.forgot-password{color:#888;text-decoration:none;font-size:.9em;transition:color .3s ease}.forgot-password:hover{color:#ff6b35;text-decoration:underline}.copyright{text-align:center;margin-top:30px;color:#666;font-size:.8em}.api-status{margin-top:5px;font-size:.7em}.status-indicator{color:#4caf50}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-dark);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--color-light-gray);border-radius:4px;transition:background .3s ease}::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}*{scrollbar-width:thin;scrollbar-color:var(--color-light-gray) var(--color-dark)}button{font-family:inherit;cursor:pointer;outline:none;transition:all .3s ease}a{color:inherit;text-decoration:none}.container{max-width:1400px;margin:0 auto;padding:0 20px}.text-primary{color:var(--color-primary)}.text-secondary{color:var(--color-secondary)}.text-muted{color:var(--color-text-gray)}.bg-dark{color:var(--color-dark)}.bg-dark-gray{background-color:var(--color-dark-gray)}.rounded{border-radius:8px}.rounded-lg{border-radius:15px}.shadow{box-shadow:0 5px 20px #00000080}.transition{transition:all .3s ease}@media (max-width: 480px){.login-card{padding:30px 20px}.title{font-size:2em}.logo{width:50px;height:50px}}:root{--color-primary: #ff6b35;--color-primary-dark: #e85a2a;--color-primary-light: #ff8555;--color-secondary: #f7931e;--color-secondary-dark: #e88318;--color-secondary-light: #f9a33e;--color-background: #0a0a0a;--color-background-light: #1a1a1a;--color-background-lighter: #252525;--color-surface: #1a1a1a;--color-surface-light: #252525;--color-surface-lighter: #333333;--color-text: #ffffff;--color-text-secondary: #ddd;--color-text-muted: #888;--color-text-disabled: #666;--color-border: #333;--color-border-light: #444;--color-border-focus: #ff6b35;--color-success: #4CAF50;--color-error: #F44336;--color-warning: #FF9800;--color-info: #2196F3;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--font-xs: .75rem;--font-sm: .875rem;--font-base: 1rem;--font-lg: 1.125rem;--font-xl: 1.25rem;--font-2xl: 1.5rem;--font-3xl: 1.875rem;--font-4xl: 2.25rem;--font-5xl: 3rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .1);--shadow-2xl: 0 25px 50px rgba(0, 0, 0, .25);--shadow-glow: 0 0 20px rgba(255, 107, 53, .3);--z-base: 0;--z-dropdown: 10;--z-sticky: 20;--z-fixed: 30;--z-modal-backdrop: 40;--z-modal: 50;--z-popover: 60;--z-tooltip: 70;--z-notification: 80;--z-max: 99;--transition-fast: .15s ease;--transition-base: .3s ease;--transition-slow: .5s ease;--breakpoint-xs: 480px;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:0}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}to{transform:scale(1);opacity:1}}@keyframes pulseGlow{0%,to{box-shadow:0 0 20px #ff6b3580}50%{box-shadow:0 0 40px #ff6b35cc}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotateIn{0%{transform:rotate(-200deg);opacity:0}to{transform:rotate(0);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}@keyframes shakeSmall{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes loadingDots{0%,80%,to{opacity:0}40%{opacity:1}}@keyframes glow{0%,to{filter:drop-shadow(0 0 10px rgba(255,107,53,.5))}50%{filter:drop-shadow(0 0 20px rgba(255,107,53,.8))}}.animate-fadeIn{animation:fadeIn .3s ease-in-out}.animate-fadeOut{animation:fadeOut .3s ease-in-out}.animate-slideInLeft{animation:slideInLeft .3s ease-out}.animate-slideInRight{animation:slideInRight .3s ease-out}.animate-slideInUp{animation:slideInUp .3s ease-out}.animate-slideInDown{animation:slideInDown .3s ease-out}.animate-scaleIn{animation:scaleIn .3s ease-out}.animate-bounce{animation:bounce 2s infinite}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.animate-shake{animation:shake .5s ease-in-out}.animate-glow{animation:glow 2s ease-in-out infinite}.transition-all{transition:all var(--transition-base)}.transition-colors{transition:color var(--transition-base),background-color var(--transition-base),border-color var(--transition-base)}.transition-transform{transition:transform var(--transition-base)}.transition-opacity{transition:opacity var(--transition-base)}.hover-scale:hover{transform:scale(1.05)}.hover-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}.hover-glow:hover{box-shadow:var(--shadow-glow)}