:root{--primary-color: #3b82f6;--primary-dark: #2563eb;--text-color: #1f2937;--text-light: #6b7280;--bg-color: #f0f4f8;--card-bg: #ffffff}html,body{margin:0;padding:0;height:100%;overflow:hidden}body{color:#1f2937;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif;line-height:1.5}.login-container{min-height:100vh;background:linear-gradient(135deg,#f0f4f8,#e2e8f0);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;perspective:1000px}.login-container:before{content:"";position:absolute;width:200vw;height:200vh;top:-50vh;left:-50vw;background:radial-gradient(circle at 50% 50%,rgba(59,130,246,.15) 0%,transparent 50%),radial-gradient(circle at 0% 0%,rgba(99,102,241,.1) 0%,transparent 50%),radial-gradient(circle at 100% 0%,rgba(59,130,246,.1) 0%,transparent 50%),radial-gradient(circle at 100% 100%,rgba(99,102,241,.1) 0%,transparent 50%),radial-gradient(circle at 0% 100%,rgba(59,130,246,.1) 0%,transparent 50%);animation:rotateLights 20s linear infinite;transform-origin:center center}.login-container:after{content:"";position:absolute;width:200vw;height:200vh;top:-50vh;left:-50vw;background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(59,130,246,.1) 60deg,transparent 120deg,rgba(99,102,241,.1) 180deg,transparent 240deg,rgba(59,130,246,.1) 300deg,transparent 360deg);animation:rotateLights 15s linear infinite reverse;transform-origin:center center;opacity:.7}.light-spots{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 20% 20%,rgba(59,130,246,.15) 0%,transparent 25%),radial-gradient(circle at 80% 20%,rgba(99,102,241,.15) 0%,transparent 25%),radial-gradient(circle at 20% 80%,rgba(59,130,246,.15) 0%,transparent 25%),radial-gradient(circle at 80% 80%,rgba(99,102,241,.15) 0%,transparent 25%),radial-gradient(circle at 50% 50%,rgba(59,130,246,.1) 0%,transparent 50%);animation:moveLights 15s ease-in-out infinite;pointer-events:none}.login-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 15px 35px #0000001a,0 5px 15px #0000000d;width:100%;max-width:340px;position:relative;z-index:1}.login-header{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;text-align:center;padding:1.25rem;position:relative;overflow:hidden}.login-header:before{content:"";position:absolute;top:-150%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 0%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.1) 55%,transparent 100%);animation:shine 4s infinite}.login-title{color:#fff;font-size:1.5rem;margin:0;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.1);position:relative}.login-subtitle{color:#fffffff2;font-size:.85rem;margin:.25rem 0 0;font-weight:400;text-shadow:0 1px 2px rgba(0,0,0,.1);position:relative;opacity:.9}.card-body{padding:1.25rem;background:#fff}.form-label{color:#2c3e50;font-weight:500;font-size:.85rem;margin-bottom:.35rem;display:block}.form-control{border:1px solid #e1e8ed;border-radius:8px;padding:.6rem;font-size:.9rem;width:100%;transition:all .2s ease;box-sizing:border-box;background:#fff;height:2.5rem}.form-control:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;outline:none}.mb-3{margin-bottom:1rem}.btn-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:8px;color:#fff;padding:.6rem;font-size:.9rem;font-weight:500;width:100%;height:2.5rem;transition:all .2s ease;cursor:pointer;position:relative;overflow:hidden}.btn-primary:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 0%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.1) 55%,transparent 100%);transform:translate(-100%) rotate(45deg);animation:buttonShine 2s infinite}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8)}.btn-primary:disabled{background:linear-gradient(135deg,#94a3b8,#64748b);cursor:not-allowed}.error-message{color:#dc3545;background-color:#fde8e8;padding:.75rem;border-radius:8px;margin-bottom:1rem;text-align:center;font-size:.9rem}@keyframes rotateLights{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes moveLights{0%,to{transform:translate(0)}25%{transform:translate(-5%,-5%) rotate(5deg)}50%{transform:translate(5%,5%) rotate(-5deg)}75%{transform:translate(-5%,5%) rotate(5deg)}}@keyframes shine{0%{transform:translate(-100%) rotate(45deg)}to{transform:translate(100%) rotate(45deg)}}@keyframes buttonShine{0%{transform:translate(-100%) rotate(45deg)}to{transform:translate(100%) rotate(45deg)}}@media (max-width: 576px){.login-container{padding:1rem}}