.login-page{flex-direction:column;min-height:100vh;display:flex;position:relative;overflow:hidden}.login-container{z-index:10;flex:1;justify-content:center;align-items:center;padding:20px;display:flex}.login-box{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1);border-radius:16px;flex-direction:column;gap:32px;width:100%;max-width:400px;padding:40px;display:flex;position:relative;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}.mascot-wrapper{pointer-events:none;z-index:-1;position:absolute;top:-100px;right:20px}.login-mascot{filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));width:140px;height:auto}.login-header{text-align:center}.login-header h1{color:#fff;letter-spacing:-.02em;margin:0 0 8px;font-size:2.5rem;font-weight:700}.login-subtitle{color:#888;margin:0;font-size:.95rem}.login-error{color:#ef4444;text-align:center;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:8px;padding:12px;font-size:.9rem}.waiting-state{text-align:center}.loading-spinner{border:3px solid rgba(255,255,255,.1);border-top-color:#fff;border-radius:50%;width:32px;height:32px;margin:0 auto 20px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.login-btn-primary{color:#fff;cursor:pointer;background:#000;border:1px solid rgba(255,255,255,.2);border-radius:8px;justify-content:center;align-items:center;gap:12px;width:100%;padding:14px;font-size:1rem;font-weight:600;transition:all .2s;display:flex}.login-btn-primary:hover{background:#111;border-color:rgba(255,255,255,.4)}.sonolus-icon-wrapper img{filter:brightness(200%);width:auto;height:20px}@media (max-width:600px){.login-box{padding:24px}.mascot-wrapper{top:-80px;right:10px}.login-mascot{width:100px}}
.login-background-container{z-index:-1;background-color:#0f172a;width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden}.login-background-overlay{z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:radial-gradient(circle,rgba(15,23,42,.4) 0%,rgba(15,23,42,.95) 100%);width:100%;height:100%;position:absolute;top:0;left:0}.login-bg-placeholder{z-index:-1;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);width:100vw;height:100vh;position:fixed;top:0;left:0}.masonry-marquee-wrapper{z-index:1;justify-content:center;gap:30px;width:200%;height:200%;display:flex;position:absolute;transform:rotate(-10deg)translate(-25%,-25%)}.marquee-column{flex-direction:column;flex-shrink:0;gap:20px;width:300px;display:flex}@keyframes scrollUp{0%{transform:translateY(0)}to{transform:translateY(-50%)}}@keyframes scrollDown{0%{transform:translateY(-50%)}to{transform:translateY(0)}}.column-up{animation:linear infinite scrollUp}.column-down{animation:linear infinite scrollDown}.bg-chart-card{opacity:.8;aspect-ratio:1;border-radius:12px;flex-shrink:0;width:300px;min-width:300px;height:300px;min-height:300px;transition:opacity .3s;display:block;position:relative;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,.3)}.bg-chart-img{width:100%;height:100%;position:absolute;object-fit:cover!important}@media (max-width:768px){.login-background-container{width:100%;height:100vh;position:fixed;top:0;left:0}.masonry-marquee-wrapper{gap:20px;width:400%;height:300%;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-10deg)}.marquee-column{flex-shrink:0;gap:16px;width:300px}.bg-chart-card{opacity:.85;border-radius:12px;flex-shrink:0;display:block;width:300px!important;min-width:300px!important;height:300px!important;min-height:300px!important}.login-background-overlay{background:radial-gradient(circle,rgba(15,23,42,.3) 0%,rgba(15,23,42,.9) 100%)}}