*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,Segoe UI,sans-serif;min-height:100vh;display:flex;justify-content:center;align-items:center;overflow-x:hidden;background:linear-gradient(-45deg,#1a002f,#3b0066,#000,#2d003e);background-size:400% 400%;animation:gradientMove 12s ease infinite}@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.login-container,.dashboard-wrapper{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.login-card{width:420px;background:#120028bf;padding:50px 40px;border-radius:22px;box-shadow:0 0 40px #ff007a40,0 0 80px #7a00ff40;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);text-align:center;color:#fff}.login-card h2{font-size:24px;font-weight:600;margin-bottom:35px;letter-spacing:1px;background:linear-gradient(90deg,#ff007a,#7a00ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.login-card input{width:100%;padding:14px 18px;margin-bottom:20px;border-radius:30px;border:1px solid rgba(255,255,255,.15);outline:none;font-size:14px;background:#ffffff0d;color:#fff;transition:.3s ease}.login-card input::placeholder{color:#fff9}.login-card input:focus{border-color:#ff007a;box-shadow:0 0 15px #ff007a99;background:#ffffff1a}.login-card button{width:100%;padding:14px;border-radius:30px;border:none;background:linear-gradient(90deg,#ff007a,#7a00ff);color:#fff;font-weight:600;font-size:15px;cursor:pointer;transition:.3s ease}.login-card button:hover{transform:translateY(-3px);box-shadow:0 10px 25px #ff007a80,0 0 30px #7a00ff99}.error{margin-top:12px;color:#ff6b8a;font-size:13px}.dashboard-card{width:480px;background:#120028bf;padding:60px 50px;border-radius:24px;box-shadow:0 0 50px #ff007a40,0 0 80px #7a00ff40;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);text-align:center;color:#fff;position:relative}.dashboard-card h2{font-size:22px;margin-bottom:40px;letter-spacing:1px;background:linear-gradient(90deg,#ff007a,#7a00ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.toggle-btn{padding:16px 36px;border-radius:40px;border:none;background:linear-gradient(90deg,#ff007a,#7a00ff);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:.3s ease}.toggle-btn:hover{transform:translateY(-3px);box-shadow:0 10px 25px #ff007a80,0 0 30px #7a00ff99}.logout-btn{position:absolute;top:20px;right:20px;background:linear-gradient(90deg,#ff416c,#ff007a);border:none;padding:8px 16px;border-radius:20px;color:#fff;font-size:12px;cursor:pointer;transition:.3s}.logout-btn:hover{box-shadow:0 0 15px #ff007a99}.status-panel{margin-top:35px;padding:16px 40px;border-radius:40px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:15px;font-weight:500;text-transform:uppercase;letter-spacing:1px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);animation:fadeIn .4s ease;min-width:300px}.panel-dot{width:12px;height:12px;border-radius:50%;animation:pulse 1.4s infinite}.panel-on{background:#00ff9626;color:#00ff95;box-shadow:0 0 25px #00ff9666}.panel-on .panel-dot{background:#00ff95}.panel-off{background:#ff466426;color:#ff4b6e;box-shadow:0 0 25px #ff466466}.panel-off .panel-dot{background:#ff4b6e}.panel-waiting{background:#ffffff14;color:#fffc;box-shadow:0 0 20px #ffffff1a}.panel-waiting .panel-dot{background:#fffa}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}to{transform:scale(1);opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.login-container,.dashboard-wrapper{padding:20px}.login-card,.dashboard-card{width:100%;padding:35px 25px;border-radius:28px;box-shadow:0 0 60px #ff007a4d,0 0 120px #7a00ff4d}.dashboard-card{margin-top:40px}.login-card h2,.dashboard-card h2{font-size:20px}.toggle-btn{width:100%;padding:18px;font-size:17px;border-radius:50px}.toggle-btn:active{transform:scale(.96)}.logout-btn{top:15px;right:15px;padding:6px 14px;font-size:11px}.status-panel{margin-top:30px;width:100%;padding:18px;border-radius:20px;font-size:14px}}
