:root{--primary:#6366f1;--primary-dark:#4f46e5;--primary-light:#818cf8;--accent:#22d3ee;--accent-dark:#06b6d4;--error:#ef4444;--success:#10b981;--gray-50:#fafafa;--gray-100:#f4f4f5;--gray-200:#e4e4e7;--gray-300:#d4d4d8;--gray-400:#a1a1aa;--gray-500:#71717a;--gray-600:#52525b;--gray-700:#3f3f46;--gray-800:#27272a;--gray-900:#18181b}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--gray-100);color:var(--gray-900);min-height:100vh}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#0f0f23,#1a1a2e 50%,#16213e);position:relative;overflow:hidden}.login-page:after,.login-page:before{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.6;animation:pulse 8s ease-in-out infinite}.login-page:before{width:600px;height:600px;background:radial-gradient(circle,rgba(99,102,241,.4) 0,transparent 70%);top:-200px;right:-100px;animation-delay:0s}.login-page:after{width:500px;height:500px;background:radial-gradient(circle,rgba(34,211,238,.3) 0,transparent 70%);bottom:-150px;left:-100px;animation-delay:-4s}@keyframes pulse{0%,to{transform:scale(1) translate(0);opacity:.6}50%{transform:scale(1.1) translate(20px,-20px);opacity:.4}}.login-page>:first-child:before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 0),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 0);background-size:60px 60px;pointer-events:none}.login-container{background:rgba(255,255,255,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:24px;box-shadow:0 32px 64px -12px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.2);padding:48px 44px;width:100%;max-width:440px;position:relative;z-index:1;animation:slideUp .6s cubic-bezier(.16,1,.3,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.login-header{text-align:center;margin-bottom:40px}.login-header:before{content:"";display:flex;align-items:center;justify-content:center;width:80px;height:80px;margin:0 auto 24px;background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);border-radius:20px;box-shadow:0 12px 24px -6px rgba(99,102,241,.5),inset 0 1px 0 rgba(255,255,255,.2);position:relative;animation:float 6s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.login-header:after{content:"🏢";position:absolute;top:72px;left:50%;transform:translateX(-50%);font-size:36px;filter:grayscale(1) brightness(10)}.login-header h1{font-size:28px;font-weight:700;color:var(--gray-900);margin-bottom:10px;letter-spacing:-.5px;background:linear-gradient(135deg,var(--gray-900) 0,var(--gray-700) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-header p{font-size:15px;color:var(--gray-500);font-weight:400}.form-error,.login-error{background:linear-gradient(135deg,#fef2f2,#fee2e2);border:1px solid #fecaca;color:var(--error);padding:14px 18px;border-radius:12px;margin-bottom:24px;font-size:14px;font-weight:500;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;animation:shake .5s cubic-bezier(.36,.07,.19,.97)}.form-error:before,.login-error:before{content:"⚠️";font-size:16px}@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}.login-form{gap:24px}.form-group,.login-form{display:flex;flex-direction:column}.form-group{gap:8px}.form-group label{font-size:14px;font-weight:600;color:var(--gray-700);display:flex;align-items:center;gap:6px}.form-group input{padding:16px 18px;border:2px solid var(--gray-200);border-radius:14px;font-size:16px;transition:all .25s cubic-bezier(.4,0,.2,1);background:var(--gray-50);font-weight:400}.form-group input:hover{border-color:var(--gray-300);background:white}.form-group input:focus{outline:none;border-color:var(--primary);background:white;box-shadow:0 0 0 4px rgba(99,102,241,.15),0 2px 8px rgba(99,102,241,.1)}.form-group input::placeholder{color:var(--gray-400);font-weight:400}.login-button{background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);color:white;border:none;padding:18px 28px;border-radius:14px;font-size:16px;font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);margin-top:8px;box-shadow:0 8px 20px -6px rgba(99,102,241,.5),inset 0 1px 0 rgba(255,255,255,.2);position:relative;overflow:hidden}.login-button:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.1) 50%,transparent);transform:translateX(-100%);transition:transform .5s ease}.login-button:hover:before{transform:translateX(100%)}.login-button:hover{transform:translateY(-2px);box-shadow:0 12px 28px -6px rgba(99,102,241,.6),inset 0 1px 0 rgba(255,255,255,.2)}.login-button:active{transform:translateY(0);box-shadow:0 4px 12px -4px rgba(99,102,241,.4),inset 0 1px 0 rgba(255,255,255,.2)}.login-button:disabled{background:linear-gradient(135deg,var(--gray-300) 0,var(--gray-400) 100%);box-shadow:none;cursor:not-allowed;transform:none}.login-button:disabled:before{display:none}.login-button:disabled:after{content:"";display:inline-block;width:16px;height:16px;margin-left:8px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle}@keyframes spin{to{transform:rotate(1turn)}}@media (max-width:480px){.login-page{padding:16px}.login-page:before{width:400px;height:400px;top:-100px;right:-150px}.login-page:after{width:350px;height:350px;bottom:-100px;left:-150px}.login-container{padding:36px 28px;border-radius:20px}.login-header{margin-bottom:32px}.login-header:before{width:68px;height:68px;border-radius:18px;margin-bottom:20px}.login-header:after{top:64px;font-size:30px}.login-header h1{font-size:24px}.login-header p{font-size:14px}.login-form{gap:20px}.form-group input{padding:14px 16px;border-radius:12px}.login-button{padding:16px 24px;border-radius:12px}}@media (prefers-color-scheme:dark){.login-container{background:rgba(39,39,42,.95)}.login-header h1{background:linear-gradient(135deg,#fff,#d4d4d8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-header p{color:var(--gray-400)}.form-group label{color:var(--gray-300)}.form-group input{background:var(--gray-800);border-color:var(--gray-700);color:white}.form-group input:hover{border-color:var(--gray-600)}.form-group input:focus,.form-group input:hover{background:var(--gray-700)}.form-group input::placeholder{color:var(--gray-500)}}