.sensor-card{background:linear-gradient(135deg,#121a2be6,#0f1625f2);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;box-shadow:0 4px 12px #00000026;cursor:pointer}.sensor-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent));opacity:0;transition:opacity .3s ease}.sensor-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #00000040;border-color:#5cc8ff66}.sensor-card:hover:before{opacity:1}.sensor-card.status-ok{border-left:3px solid var(--accent)}.sensor-card.status-warn{border-left:3px solid var(--warn)}.sensor-card.status-err{border-left:3px solid var(--danger);animation:pulseError 2s ease-in-out infinite}@keyframes pulseError{0%,to{box-shadow:0 4px 12px #00000026}50%{box-shadow:0 4px 12px #ff6b6b4d}}.sensor-card.status-offline{opacity:.7;border-left:3px solid var(--muted)}.sensor-card-header{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 20px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(92,200,255,.04),transparent)}.sensor-card-title-section{flex:1;min-width:0}.sensor-card-name{font-size:18px;font-weight:700;margin:0 0 6px;color:var(--text);display:flex;align-items:center;gap:10px;flex-wrap:wrap}.sensor-card-location{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;margin:0}.sensor-card-code{font-size:11px;color:var(--muted);font-family:Courier New,monospace;background:#5cc8ff14;padding:2px 8px;border-radius:4px;margin-top:4px;display:inline-block}.live-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:linear-gradient(135deg,#52e0a526,#52e0a514);border:1px solid rgba(82,224,165,.3);color:var(--accent);animation:fadeIn .3s ease-out}.live-badge .pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s ease-in-out infinite}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.client-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:700;background:linear-gradient(135deg,#5cc8ff26,#5cc8ff14);border:1px solid rgba(92,200,255,.3);color:var(--primary)}.sensor-status-badge{flex-shrink:0}.sensor-card-body{padding:20px}.sensor-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px}.sensor-metric{display:flex;flex-direction:column;gap:8px}.metric-header{display:flex;align-items:center;gap:8px}.metric-icon{font-size:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.metric-label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.metric-value{font-size:32px;font-weight:700;line-height:1;transition:all .3s ease}.metric-value.temp-ok{color:var(--accent)}.metric-value.temp-warn{color:var(--warn)}.metric-value.temp-err{color:var(--danger);animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.metric-value.no-data{color:var(--muted);font-size:16px}.metric-detail{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}.last-update-section{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#5cc8ff0a;border-radius:8px;margin-bottom:16px}.last-update-info{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.update-icon{font-size:14px}.update-time{font-weight:600;color:var(--text)}.update-status{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:4px 8px;border-radius:6px}.update-status.recent{background:#52e0a51a;color:var(--accent)}.update-status.delayed{background:#ffd1661a;color:var(--warn)}.update-status.offline{background:#8aa0bf1a;color:var(--muted)}.sensor-card-actions{display:flex;gap:10px;align-items:center}.card-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:10px;border:1px solid var(--border);background:#0f1625cc;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;text-decoration:none}.card-btn:hover{border-color:var(--primary);background:#5cc8ff1a;transform:translateY(-1px)}.card-btn.primary{background:linear-gradient(135deg,#1a83bb,#176b99);border-color:#1a83bb;color:#fff}.card-btn.primary:hover{background:linear-gradient(135deg,#1e8cc7,#1a7ba8);border-color:#1e8cc7}.quick-actions{display:flex;gap:8px}.quick-action-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border);background:#0f1625cc;font-size:16px;cursor:pointer;transition:all .2s ease}.quick-action-btn:hover{border-color:var(--primary);background:#5cc8ff1a;transform:scale(1.1)}.quick-action-btn:active{transform:scale(.95)}@media (max-width: 768px){.sensor-card-header{flex-direction:column;gap:12px;align-items:flex-start}.sensor-card-name{font-size:16px}.sensor-metrics{grid-template-columns:1fr;gap:12px}.metric-value{font-size:28px}.last-update-section{flex-direction:column;gap:8px;align-items:flex-start}.sensor-card-actions{flex-direction:column}.card-btn{width:100%}}@media (max-width: 480px){.sensor-card-body{padding:16px}.sensor-card-name{font-size:15px}.metric-value{font-size:24px}.metric-label{font-size:11px}}.sensor-card.loading{pointer-events:none}.sensor-card.loading .metric-value{background:linear-gradient(90deg,var(--muted) 25%,var(--text) 50%,var(--muted) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.empty-state{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 200px);padding:40px 20px}.empty-state-content{max-width:800px;width:100%;text-align:center;animation:fadeInUp .6s ease}.empty-icon{margin-bottom:32px;animation:float 3s ease-in-out infinite}.empty-icon svg{filter:drop-shadow(0 10px 30px rgba(92,200,255,.2))}.empty-title{font-size:32px;font-weight:700;color:#e7eefc;margin:0 0 16px}.empty-description{font-size:16px;color:#8aa0bf;line-height:1.6;max-width:500px;margin:0 auto 40px}.empty-actions{display:flex;gap:16px;justify-content:center;margin-bottom:48px;flex-wrap:wrap}.btn-empty{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-empty.btn-primary{background:linear-gradient(135deg,#5cc8ff,#4a9fd8);color:#0b1220;box-shadow:0 4px 15px #5cc8ff4d}.btn-empty.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #5cc8ff80}.btn-empty.btn-secondary{background:#ffffff0d;color:#e7eefc;border:1px solid rgba(255,255,255,.1)}.btn-empty.btn-secondary:hover{background:#ffffff14;border-color:#5cc8ff4d}.btn-icon{font-size:20px}.empty-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-bottom:48px;text-align:left}.feature-item{display:flex;gap:16px;padding:20px;background:#ffffff05;border:1px solid rgba(92,200,255,.1);border-radius:12px;transition:all .3s ease}.feature-item:hover{background:#ffffff0a;border-color:#5cc8ff4d;transform:translateY(-2px)}.feature-icon{font-size:32px;flex-shrink:0}.feature-content h4{font-size:16px;font-weight:600;color:#e7eefc;margin:0 0 4px}.feature-content p{font-size:14px;color:#8aa0bf;margin:0;line-height:1.5}.empty-help{margin-bottom:40px}.help-section{background:#5cc8ff0d;border:1px solid rgba(92,200,255,.2);border-radius:12px;padding:32px}.help-section h3{font-size:20px;font-weight:600;color:#e7eefc;margin:0 0 20px}.help-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.help-link{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#e7eefc;text-decoration:none;font-size:14px;font-weight:500;transition:all .2s ease}.help-link:hover{background:#ffffff14;border-color:#5cc8ff66;transform:translateY(-1px)}.help-link span{font-size:18px}.empty-tips{background:#52e0a50d;border:1px solid rgba(82,224,165,.2);border-radius:12px;padding:24px;text-align:left;max-width:500px;margin:0 auto}.empty-tips h4{font-size:16px;font-weight:600;color:#e7eefc;margin:0 0 16px}.empty-tips ul{list-style:none;padding:0;margin:0}.empty-tips li{padding:8px 0;font-size:14px;color:#8aa0bf;line-height:1.5}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@media (max-width: 768px){.empty-title{font-size:26px}.empty-description{font-size:15px}.empty-actions{flex-direction:column}.btn-empty{width:100%;justify-content:center}.empty-features{grid-template-columns:1fr}.help-links{flex-direction:column}.help-link{width:100%;justify-content:center}}.onboarding-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#0b1220,#1a2332);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .3s ease}.onboarding-wizard{background:linear-gradient(135deg,#121a2b,#0f1726);border:1px solid rgba(92,200,255,.2);border-radius:16px;max-width:600px;width:100%;box-shadow:0 20px 60px #00000080;animation:slideUp .4s ease}.onboarding-header{display:flex;justify-content:space-between;align-items:center;padding:24px 32px;border-bottom:1px solid rgba(92,200,255,.1)}.onboarding-logo{display:flex;align-items:center;gap:12px}.logo-icon{font-size:32px}.onboarding-logo h1{font-size:24px;font-weight:700;color:#e7eefc;margin:0}.onboarding-skip{background:none;border:none;color:#8aa0bf;font-size:14px;cursor:pointer;padding:6px 12px;border-radius:6px;transition:all .2s ease}.onboarding-skip:hover{background:#ffffff0d;color:#e7eefc}.onboarding-progress-bar{height:4px;background:#5cc8ff1a;overflow:hidden}.onboarding-progress-fill{height:100%;background:linear-gradient(90deg,#5cc8ff,#52e0a5);transition:width .4s ease}.onboarding-content{padding:32px;min-height:350px;max-height:60vh;overflow-y:auto}.onboarding-step-header{text-align:center;margin-bottom:32px}.step-icon{font-size:56px;margin-bottom:16px}.step-subtitle{font-size:13px;color:#5cc8ff;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin:0 0 8px}.step-title{font-size:28px;font-weight:700;color:#e7eefc;margin:0}.wizard-step{animation:fadeInUp .3s ease;overflow-y:visible}.onboarding-content::-webkit-scrollbar{width:6px}.onboarding-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.onboarding-content::-webkit-scrollbar-thumb{background:#5cc8ff4d;border-radius:3px}.onboarding-content::-webkit-scrollbar-thumb:hover{background:#5cc8ff80}.step-description{font-size:15px;color:#8aa0bf;line-height:1.6;margin-bottom:24px;text-align:center}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:14px;font-weight:600;color:#e7eefc;margin-bottom:8px}.form-group .input{width:100%;padding:12px 16px;background:#ffffff0d;border:1px solid rgba(92,200,255,.2);border-radius:8px;color:#e7eefc;font-size:14px;transition:all .2s ease}.form-group .input:focus{outline:none;border-color:#5cc8ff;box-shadow:0 0 0 3px #5cc8ff1a}.form-hint{display:block;font-size:12px;color:#8aa0bf;margin-top:6px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.temp-range-display{background:#52e0a50d;border:1px solid rgba(82,224,165,.2);border-radius:8px;padding:16px;margin:20px 0}.range-bar{text-align:center}.range-safe{display:flex;flex-direction:column;gap:4px}.range-label{font-size:12px;color:#52e0a5;font-weight:600;text-transform:uppercase}.range-values{font-size:20px;font-weight:700;color:#e7eefc}.checkbox-group{display:flex;align-items:center}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-label input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:#5cc8ff}.checkbox-label span{font-size:14px;color:#e7eefc}.info-box{display:flex;gap:12px;padding:16px;background:#5cc8ff0d;border:1px solid rgba(92,200,255,.2);border-radius:8px;margin-top:24px}.info-box.info-warning{background:#ffd1660d;border-color:#ffd1664d}.info-box.info-success{background:#52e0a50d;border-color:#52e0a54d}.info-icon{font-size:24px;flex-shrink:0}.info-box strong{display:block;font-size:14px;color:#e7eefc;margin-bottom:4px}.info-box p{font-size:13px;color:#8aa0bf;margin:0;line-height:1.5}.summary-card{background:#ffffff05;border:1px solid rgba(92,200,255,.1);border-radius:12px;padding:20px;margin:24px 0}.summary-item{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.05)}.summary-item:last-child{border-bottom:none;padding-bottom:0}.summary-item:first-child{padding-top:0}.summary-icon{font-size:32px;flex-shrink:0}.summary-item strong{display:block;font-size:13px;color:#8aa0bf;margin-bottom:4px}.summary-item p{font-size:16px;color:#e7eefc;margin:0;font-weight:600}.text-success{color:#52e0a5!important}.text-muted{color:#8aa0bf!important}.next-steps{margin-top:24px}.next-steps h3{font-size:16px;color:#e7eefc;margin:0 0 12px}.next-steps ul{list-style:none;padding:0;margin:0}.next-steps li{padding:8px 0;font-size:14px;color:#8aa0bf}.onboarding-actions{display:flex;gap:16px;padding:24px 32px;border-top:1px solid rgba(92,200,255,.1)}.btn-onboarding{flex:1;padding:14px 24px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-primary{background:linear-gradient(135deg,#5cc8ff,#4a9fd8);color:#0b1220}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #5cc8ff66}.btn-secondary{background:#ffffff0d;color:#e7eefc;border:1px solid rgba(255,255,255,.1)}.btn-secondary:hover:not(:disabled){background:#ffffff14}.btn-secondary:disabled{opacity:.3;cursor:not-allowed}.onboarding-indicators{display:flex;gap:8px;justify-content:center;padding:20px 32px}.indicator{width:12px;height:12px;border-radius:50%;background:#8aa0bf4d;transition:all .3s ease}.indicator.active{width:32px;border-radius:6px;background:#5cc8ff;box-shadow:0 0 12px #5cc8ff99}.indicator.completed{background:#52e0a5}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.onboarding-overlay{padding:0;align-items:flex-start;overflow-y:auto}.onboarding-wizard{max-width:100%;min-height:100vh;max-height:none;overflow-y:visible;border-radius:0;display:flex;flex-direction:column}.onboarding-header{padding:16px 20px;flex-shrink:0}.onboarding-logo h1{font-size:20px}.logo-icon{font-size:28px}.onboarding-skip{font-size:13px;padding:4px 8px}.onboarding-content{padding:20px;min-height:auto;flex:1;overflow-y:auto}.step-icon{font-size:48px;margin-bottom:12px}.step-subtitle{font-size:12px}.step-title{font-size:22px}.step-description{font-size:14px;margin-bottom:20px}.form-group{margin-bottom:16px}.form-group label{font-size:13px}.form-group .input{padding:10px 14px;font-size:14px}.form-row{grid-template-columns:1fr;gap:12px}.temp-range-display{padding:12px;margin:16px 0}.range-values{font-size:18px}.info-box{padding:12px;gap:10px;margin-top:16px}.info-icon{font-size:20px}.info-box strong{font-size:13px}.info-box p{font-size:12px}.summary-card{padding:16px;margin:16px 0}.summary-item{padding:12px 0;gap:12px}.summary-icon{font-size:28px}.summary-item strong{font-size:12px}.summary-item p{font-size:14px}.next-steps{margin-top:16px}.next-steps h3{font-size:15px}.next-steps li{padding:6px 0;font-size:13px}.onboarding-actions{flex-direction:column;padding:16px 20px;gap:12px;flex-shrink:0;position:sticky;bottom:0;background:linear-gradient(135deg,#121a2b,#0f1726);border-top:1px solid rgba(92,200,255,.2);box-shadow:0 -4px 10px #0000004d}.btn-onboarding{width:100%;padding:12px 20px;font-size:14px}.onboarding-indicators{padding:16px 20px;flex-shrink:0}.indicator{width:10px;height:10px}.indicator.active{width:28px}}@media (max-width: 480px){.onboarding-header{padding:12px 16px}.onboarding-content{padding:16px}.step-icon{font-size:40px}.step-title{font-size:20px}.onboarding-actions,.onboarding-indicators{padding:12px 16px}}@media (max-height: 600px) and (orientation: landscape){.onboarding-wizard{max-height:none}.onboarding-content{padding:16px 20px}.step-icon{font-size:36px;margin-bottom:8px}.step-title{font-size:20px}.onboarding-step-header{margin-bottom:20px}.form-group{margin-bottom:12px}}.tour-overlay{position:fixed;inset:0;background:#000000b3;z-index:10000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fadeIn .3s ease}.tour-tooltip{background:linear-gradient(135deg,#1a2332,#0f1726);border:1px solid rgba(92,200,255,.3);border-radius:12px;padding:0;box-shadow:0 10px 40px #00000080,0 0 20px #5cc8ff33;max-width:400px;animation:slideIn .3s ease}.tour-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(92,200,255,.2)}.tour-step-counter{font-size:13px;color:#5cc8ff;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.tour-skip-btn{background:none;border:none;color:#8aa0bf;font-size:13px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s ease}.tour-skip-btn:hover{background:#ffffff0d;color:#e7eefc}.tour-content{padding:20px}.tour-title{font-size:18px;font-weight:600;color:#e7eefc;margin:0 0 12px}.tour-description{font-size:14px;color:#8aa0bf;line-height:1.6;margin:0}.tour-actions{display:flex;gap:12px;padding:0 20px 20px}.tour-btn{flex:1;padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.tour-btn-primary{background:linear-gradient(135deg,#5cc8ff,#4a9fd8);color:#0b1220}.tour-btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #5cc8ff66}.tour-btn-secondary{background:#ffffff0d;color:#e7eefc;border:1px solid rgba(255,255,255,.1)}.tour-btn-secondary:hover:not(:disabled){background:#ffffff14}.tour-btn-secondary:disabled{opacity:.4;cursor:not-allowed}.tour-progress{display:flex;gap:6px;justify-content:center;padding:0 20px 16px}.tour-dot{width:8px;height:8px;border-radius:50%;background:#8aa0bf4d;transition:all .3s ease}.tour-dot.active{width:24px;border-radius:4px;background:#5cc8ff;box-shadow:0 0 10px #5cc8ff80}.tour-dot.completed{background:#52e0a5}.tour-highlight{position:relative;z-index:10002!important;animation:pulse 2s infinite;box-shadow:0 0 0 4px #5cc8ff66,0 0 20px #5cc8ff4d!important;border-radius:8px!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{box-shadow:0 0 0 4px #5cc8ff66,0 0 20px #5cc8ff4d}50%{box-shadow:0 0 0 6px #5cc8ff99,0 0 30px #5cc8ff80}}@media (max-width: 768px){.tour-tooltip{max-width:90vw;left:5vw!important;right:5vw}}.dashboard-container{animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.dashboard-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border)}.dashboard-title-section{flex:1}.dashboard-title{font-size:32px;font-weight:700;margin:0 0 8px;background:linear-gradient(135deg,var(--text),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}.dashboard-subtitle{font-size:16px;color:var(--muted);margin:0;line-height:1.5}.connection-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:20px;font-size:14px;font-weight:600;transition:all .3s ease;animation:slideInRight .5s ease-out}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.connection-badge.connected{background:linear-gradient(135deg,#52e0a526,#52e0a514);border:1px solid rgba(82,224,165,.3);color:var(--accent)}.connection-badge.disconnected{background:linear-gradient(135deg,#ffd16626,#ffd16614);border:1px solid rgba(255,209,102,.3);color:var(--warn)}.status-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s ease-in-out infinite}.connection-badge.connected .status-dot{background:var(--accent);box-shadow:0 0 8px #52e0a599}.connection-badge.disconnected .status-dot{background:var(--warn);box-shadow:0 0 8px #ffd16699}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:32px}.kpi-card{display:flex;align-items:center;gap:20px;padding:24px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(135deg,#121a2bcc,#0f1625e6);box-shadow:var(--shadow);transition:all .3s ease;position:relative;overflow:hidden}.kpi-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.02));opacity:0;transition:opacity .3s ease}.kpi-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0000004d;border-color:#5cc8ff66}.kpi-card:hover:before{opacity:1}.kpi-icon{font-size:48px;line-height:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));transition:transform .3s ease}.kpi-card:hover .kpi-icon{transform:scale(1.1) rotate(-5deg)}.kpi-content{flex:1;display:flex;flex-direction:column;gap:4px}.kpi-label{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.kpi-value{font-size:36px;font-weight:700;line-height:1;background:linear-gradient(135deg,var(--text),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.kpi-detail{font-size:12px;color:var(--muted);line-height:1.4}.kpi-card.kpi-primary .kpi-icon{filter:drop-shadow(0 4px 12px rgba(92,200,255,.4))}.kpi-card.kpi-temperature .kpi-icon{filter:drop-shadow(0 4px 12px rgba(255,107,107,.4))}.kpi-card.kpi-humidity .kpi-icon{filter:drop-shadow(0 4px 12px rgba(82,224,165,.4))}.dashboard-controls{display:flex;gap:16px;margin-bottom:24px;flex-wrap:wrap}.search-section{flex:1;min-width:300px;position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:16px;font-size:18px;color:var(--muted);pointer-events:none;z-index:1}.search-input{width:100%;padding:14px 48px;border:2px solid var(--border);border-radius:12px;background:#0f1625cc;color:var(--text);font-size:15px;transition:all .3s ease}.search-input:focus{outline:none;border-color:var(--primary);background:#0f1625f2;box-shadow:0 0 0 4px #5cc8ff1a}.search-input::placeholder{color:var(--muted);opacity:.7}.clear-search{position:absolute;right:12px;width:28px;height:28px;border:none;background:#5cc8ff1a;color:var(--muted);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;font-size:14px}.clear-search:hover{background:#5cc8ff33;color:var(--text)}.filter-section{display:flex;gap:12px;align-items:center}.filter-select{padding:14px 16px;border:2px solid var(--border);border-radius:12px;background:#0f1625cc;color:var(--text);font-size:15px;font-weight:500;cursor:pointer;transition:all .3s ease;min-width:200px}.filter-select:hover{border-color:#5cc8ff66}.filter-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px #5cc8ff1a}.refresh-btn{display:flex;align-items:center;gap:8px;padding:14px 20px;border:2px solid var(--border);border-radius:12px;background:#0f1625cc;color:var(--text);font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.refresh-btn:hover:not(:disabled){border-color:var(--primary);background:#5cc8ff1a;transform:translateY(-2px)}.refresh-btn:disabled{opacity:.6;cursor:not-allowed}.refresh-btn.refreshing .refresh-icon{animation:spin 1s linear infinite}.results-summary{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;margin-bottom:20px;background:linear-gradient(135deg,#5cc8ff14,#52e0a50f);border:1px solid rgba(92,200,255,.2);border-radius:12px;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.results-text{font-size:14px;color:var(--text)}.results-text strong{color:var(--primary);font-weight:700}.clear-filters{padding:8px 16px;border:1px solid rgba(92,200,255,.3);border-radius:8px;background:transparent;color:var(--primary);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}.clear-filters:hover{background:#5cc8ff1a;border-color:var(--primary)}.sensors-section{animation:fadeInUp .5s ease-out}.no-results{text-align:center;padding:80px 24px;background:linear-gradient(135deg,#121a2bcc,#0f1625e6);border:2px dashed var(--border);border-radius:20px;animation:fadeIn .4s ease-out}.no-results-icon{font-size:72px;margin-bottom:24px;opacity:.5;filter:grayscale(1)}.no-results-title{font-size:24px;font-weight:700;margin:0 0 12px;color:var(--text)}.no-results-text{font-size:16px;color:var(--muted);margin:0 0 32px;line-height:1.6}@media (max-width: 768px){.dashboard-header{flex-direction:column;gap:16px}.connection-badge{align-self:flex-start}.dashboard-title{font-size:28px}.dashboard-subtitle{font-size:14px}.kpi-grid{grid-template-columns:1fr;gap:16px}.kpi-card{padding:20px}.kpi-icon{font-size:40px}.kpi-value{font-size:32px}.dashboard-controls{flex-direction:column}.search-section{width:100%;min-width:unset}.filter-section{width:100%;flex-direction:column}.filter-select,.refresh-btn{width:100%}.results-summary{flex-direction:column;gap:12px;text-align:center}}@media (max-width: 480px){.dashboard-title{font-size:24px}.kpi-card{gap:16px;padding:16px}.kpi-icon{font-size:36px}.kpi-value{font-size:28px}.kpi-label{font-size:12px}.kpi-detail{font-size:11px}.search-input{padding:12px 44px;font-size:14px}.filter-select,.refresh-btn{padding:12px 16px;font-size:14px}.no-results{padding:60px 20px}.no-results-icon{font-size:56px}.no-results-title{font-size:20px}.no-results-text{font-size:14px}}.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border);animation:fadeIn .4s ease-out}.page-title-section{flex:1}.page-title{font-size:32px;font-weight:700;margin:0 0 8px;background:linear-gradient(135deg,var(--text),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;display:flex;align-items:center;gap:12px}.page-subtitle{font-size:16px;color:var(--muted);margin:0;line-height:1.5}.page-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.status-card{padding:16px 20px;border-radius:12px;display:flex;align-items:center;gap:12px;border:1px solid;animation:slideDown .3s ease-out;margin-bottom:20px}.status-card.info{background:linear-gradient(135deg,#5cc8ff1f,#5cc8ff0f);border-color:#5cc8ff4d;color:var(--primary)}.status-card.success{background:linear-gradient(135deg,#52e0a51f,#52e0a50f);border-color:#52e0a54d;color:var(--accent)}.status-card.warning{background:linear-gradient(135deg,#ffd1661f,#ffd1660f);border-color:#ffd1664d;color:var(--warn)}.status-card.error{background:linear-gradient(135deg,#ff6b6b1f,#ff6b6b0f);border-color:#ff6b6b4d;color:var(--danger)}.status-icon{font-size:20px;flex-shrink:0}.status-message{flex:1;font-size:14px;font-weight:500}.enhanced-card{background:linear-gradient(135deg,#121a2be6,#0f1625f2);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.enhanced-card-header{padding:20px 24px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(92,200,255,.04),transparent);display:flex;justify-content:space-between;align-items:center}.enhanced-card-title{font-size:20px;font-weight:700;margin:0;color:var(--text);display:flex;align-items:center;gap:12px}.enhanced-card-body{padding:24px}.metric-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:24px}.metric-card{display:flex;align-items:center;gap:16px;padding:20px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(135deg,#121a2bcc,#0f1625e6);transition:all .3s ease}.metric-card:hover{transform:translateY(-2px);border-color:#5cc8ff66;box-shadow:0 8px 16px #0003}.metric-card-icon{font-size:40px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}.metric-card-content{flex:1;display:flex;flex-direction:column;gap:4px}.metric-card-label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.metric-card-value{font-size:24px;font-weight:700;line-height:1;color:var(--text)}.metric-card-detail{font-size:11px;color:var(--muted)}.enhanced-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}.enhanced-table thead th{padding:14px 16px;border-bottom:2px solid var(--border);color:var(--muted);font-weight:700;text-align:left;text-transform:uppercase;font-size:11px;letter-spacing:.5px;background:#5cc8ff08}.enhanced-table tbody tr{transition:all .2s ease;border-bottom:1px solid var(--border)}.enhanced-table tbody tr:hover{background:#5cc8ff0d}.enhanced-table tbody td{padding:16px}.enhanced-table tbody tr:last-child{border-bottom:none}.action-buttons{display:flex;gap:10px;flex-wrap:wrap}.action-buttons .btn{min-width:120px}.empty-state-container{text-align:center;padding:80px 24px;background:linear-gradient(135deg,#121a2b99,#0f1625cc);border:2px dashed var(--border);border-radius:16px;animation:fadeIn .4s ease-out}.empty-state-icon{font-size:64px;margin-bottom:20px;opacity:.4;filter:grayscale(1)}.empty-state-title{font-size:20px;font-weight:700;margin:0 0 8px;color:var(--text)}.empty-state-message{font-size:15px;color:var(--muted);margin:0 0 24px;line-height:1.6}.info-box{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;border-radius:12px;border:1px solid;margin-bottom:16px;animation:slideDown .3s ease-out}.info-box.info{background:linear-gradient(135deg,#5cc8ff14,#5cc8ff0a);border-color:#5cc8ff40;color:var(--text)}.info-box.success{background:linear-gradient(135deg,#52e0a514,#52e0a50a);border-color:#52e0a540;color:var(--text)}.info-box.warning{background:linear-gradient(135deg,#ffd16614,#ffd1660a);border-color:#ffd16640;color:var(--text)}.info-box.error{background:linear-gradient(135deg,#ff6b6b14,#ff6b6b0a);border-color:#ff6b6b40;color:var(--text)}.info-box-icon{font-size:20px;flex-shrink:0;margin-top:2px}.info-box-content{flex:1}.info-box-title{font-size:14px;font-weight:700;margin:0 0 4px}.info-box-message{font-size:13px;color:var(--muted);margin:0;line-height:1.5}.section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:32px 0}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title-enhanced{font-size:18px;font-weight:700;margin:0;color:var(--text);display:flex;align-items:center;gap:10px}.filter-bar{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap;align-items:center}.filter-bar .select,.filter-bar .input{min-width:200px}.stats-bar{display:flex;gap:12px;padding:16px 20px;background:#5cc8ff0a;border:1px solid rgba(92,200,255,.2);border-radius:12px;margin-bottom:20px}.stats-item{display:flex;align-items:center;gap:8px;padding-right:20px;border-right:1px solid var(--border)}.stats-item:last-child{border-right:none;padding-right:0}.stats-icon{font-size:16px}.stats-label{font-size:12px;color:var(--muted)}.stats-value{font-size:16px;font-weight:700;color:var(--text)}.badge-enhanced{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;border:1px solid}.badge-enhanced.info{background:linear-gradient(135deg,#5cc8ff26,#5cc8ff14);border-color:#5cc8ff4d;color:var(--primary)}.badge-enhanced.success{background:linear-gradient(135deg,#52e0a526,#52e0a514);border-color:#52e0a54d;color:var(--accent)}.badge-enhanced.warning{background:linear-gradient(135deg,#ffd16626,#ffd16614);border-color:#ffd1664d;color:var(--warn)}.badge-enhanced.error{background:linear-gradient(135deg,#ff6b6b26,#ff6b6b14);border-color:#ff6b6b4d;color:var(--danger)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;gap:16px}.loading-spinner{width:48px;height:48px;border:4px solid rgba(92,200,255,.2);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}.loading-text{font-size:15px;color:var(--muted);font-weight:500}@media (max-width: 768px){.page-header{flex-direction:column;gap:16px}.page-title{font-size:28px}.page-subtitle{font-size:14px}.page-actions{width:100%}.page-actions .btn{flex:1}.metric-cards-grid{grid-template-columns:1fr}.filter-bar{flex-direction:column}.filter-bar .select,.filter-bar .input{width:100%}.stats-bar{flex-direction:column}.stats-item{width:100%;border-right:none;border-bottom:1px solid var(--border);padding-right:0;padding-bottom:12px}.stats-item:last-child{border-bottom:none;padding-bottom:0}.action-buttons{flex-direction:column}.action-buttons .btn{width:100%}.enhanced-table{font-size:12px}.enhanced-table thead th{padding:10px 12px;font-size:10px}.enhanced-table tbody td{padding:12px}}@media (max-width: 480px){.page-title{font-size:24px}.enhanced-card-header{padding:16px 20px}.enhanced-card-body{padding:20px}.empty-state-container{padding:60px 20px}.empty-state-icon{font-size:48px}.empty-state-title{font-size:18px}.enhanced-table{display:block;overflow-x:auto}}:root{--bg:#0b1220;--panel:#121a2b;--muted:#8aa0bf;--text:#e7eefc;--primary:#5cc8ff;--accent:#52e0a5;--danger:#ff6b6b;--warn:#ffd166;--card:#0f1726;--border: #1e2a42;--shadow: 0 6px 20px rgba(0,0,0,.25)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Arial;background:radial-gradient(1200px 800px at 10% 0%,#0d1730 0%,var(--bg) 60%);color:var(--text)}a{color:inherit;text-decoration:none}.container{max-width:1200px;margin:0 auto;padding:20px}.nav{position:sticky;top:0;z-index:10;background:#121a2be6;-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--border)}.nav .inner{display:flex;align-items:center;gap:16px;padding:12px 20px;position:relative}.brand{font-weight:700;letter-spacing:.3px}.brand b{color:var(--primary)}.hamburger{display:none;flex-direction:column;justify-content:space-around;width:24px;height:24px;background:transparent;border:none;cursor:pointer;padding:0;z-index:11}.hamburger span{width:100%;height:2px;background:var(--text);border-radius:1px;transition:all .3s ease}.hamburger:hover span{background:var(--primary)}.navlinks{display:flex;gap:12px;margin-left:auto;transition:all .3s ease}.navlinks a{padding:8px 12px;border-radius:10px;transition:all .2s ease}.navlinks a:hover{background:#5cc8ff14}.navlinks a.active{background:#5cc8ff1f;outline:1px solid rgba(92,200,255,.35)}.grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}.card{background:linear-gradient(180deg,#5cc8ff0f,#5cc8ff05);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}.card-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}.card-body{padding:16px}.card-title{font-size:16px;font-weight:600}.muted{color:var(--muted);font-size:14px}.kpi{display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(180deg,#0c1324,#0a1222)}.kpi .value{font-size:28px;font-weight:700}.kpi .label{color:var(--muted);font-size:12px}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:#0f1627;color:var(--text);cursor:pointer}.btn:hover{outline:1px solid rgba(92,200,255,.35)}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn.primary{background:linear-gradient(180deg,#1a83bb,#176b99);border-color:#1a83bb}.btn.danger{background:linear-gradient(180deg,#b33b3b,#922f2f);border-color:#b33b3b}.input,.select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#0e1526;color:var(--text)}.input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer}.input[type=datetime-local]{color-scheme:dark}.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1}.table{width:100%;border-collapse:collapse;font-size:14px}.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border)}.table th{color:var(--muted);font-weight:600;text-align:left}.badge{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid transparent;display:inline-flex;align-items:center;box-shadow:0 2px 8px #00000026;transition:all .2s ease}.badge:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}.badge.ok{background:linear-gradient(135deg,#52e0a52e,#52e0a514);color:#52e0a5;border-color:#52e0a566;text-shadow:0 1px 2px rgba(0,0,0,.2)}.badge.warn{background:linear-gradient(135deg,#ffd1662e,#ffd16614);color:#ffd166;border-color:#ffd16666;text-shadow:0 1px 2px rgba(0,0,0,.2)}.badge.err{background:linear-gradient(135deg,#ff6b6b2e,#ff6b6b14);color:#ff6b6b;border-color:#ff6b6b66;text-shadow:0 1px 2px rgba(0,0,0,.2)}.section-title{font-size:18px;font-weight:700;margin:10px 0 6px}.subtle{font-size:13px;color:var(--muted)}.card-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.hero{max-width:420px;margin:40px auto;padding:24px;border:1px solid var(--border);border-radius:18px;background:#0e1628;box-shadow:var(--shadow)}.center{text-align:center}@media (max-width: 768px){.hamburger{display:flex;margin-left:auto}.navlinks{position:absolute;top:100%;left:0;right:0;background:#121a2bf2;-webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--border);flex-direction:column;gap:0;margin-left:0;padding:12px 20px;transform:translateY(-100%);opacity:0;visibility:hidden}.navlinks-open{transform:translateY(0);opacity:1;visibility:visible}.navlinks a{padding:12px 16px;border-radius:8px;margin:2px 0;text-align:left;border:1px solid transparent}.navlinks a:hover{background:#5cc8ff1f;border-color:#5cc8ff40}.navlinks a.active{background:#5cc8ff26;border-color:#5cc8ff66}}@media (max-width: 480px){.nav .inner{padding:12px 16px}.brand{font-size:16px}.navlinks{padding:12px 16px}}.alert{padding:12px 16px;border-radius:10px;border:1px solid;margin:12px 0}.alert.error{background:#ff6b6b1f;color:var(--danger);border-color:#ff6b6b59}.alert.success{background:#52e0a51f;color:var(--accent);border-color:#52e0a559}.user-info{display:flex;align-items:center;gap:12px;margin-left:auto}.user-name{color:var(--muted);font-size:14px}.btn.logout{background:#ff6b6b1f;color:var(--danger);border-color:#ff6b6b59}.btn.logout:hover{background:#ff6b6b33;border-color:#ff6b6b80}.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--muted)}@media (max-width: 768px){.user-info{margin-left:0;margin-top:12px;justify-content:space-between}.user-name{font-size:13px}}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#0b1220,#1a2a42,#0b1220);position:relative;overflow:hidden}.login-container:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(92,200,255,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(82,224,165,.08) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(255,107,107,.05) 0%,transparent 50%);pointer-events:none}.login-card{background:linear-gradient(145deg,#121a2bf2,#0f1625f2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(92,200,255,.2);border-radius:24px;padding:48px 40px;width:100%;max-width:420px;box-shadow:0 25px 50px #0000004d,0 0 0 1px #ffffff0d,inset 0 1px #ffffff1a;position:relative;z-index:1;animation:loginSlideIn .6s ease-out}@keyframes loginSlideIn{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.login-header{text-align:center;margin-bottom:40px}.login-logo{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px}.logo-icon{font-size:32px;filter:drop-shadow(0 0 10px rgba(92,200,255,.3));animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.login-title{font-size:32px;font-weight:700;background:linear-gradient(135deg,#5cc8ff,#52e0a5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0;letter-spacing:-.5px}.login-subtitle{color:var(--muted);font-size:16px;margin:0;line-height:1.5}.login-error{background:linear-gradient(135deg,#ff6b6b26,#ff6b6b14);border:1px solid rgba(255,107,107,.3);border-radius:12px;padding:16px 20px;margin-bottom:24px;display:flex;align-items:center;gap:12px;color:var(--danger);font-size:14px;animation:errorShake .5s ease-in-out}@keyframes errorShake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.error-icon{font-size:16px;flex-shrink:0}.login-form{display:flex;flex-direction:column;gap:24px;margin-bottom:32px}.form-group{display:flex;flex-direction:column;gap:8px}.form-label{font-size:14px;font-weight:600;color:var(--text);letter-spacing:.3px}.form-input{padding:16px 20px;border:2px solid rgba(92,200,255,.2);border-radius:12px;background:#0f1625cc;color:var(--text);font-size:16px;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px #5cc8ff1a,0 0 20px #5cc8ff33;background:#0f1625f2}.form-input::placeholder{color:var(--muted);opacity:.7}.form-input:disabled{opacity:.6;cursor:not-allowed}.login-button{padding:18px 24px;background:linear-gradient(135deg,#1a83bb,#176b99);border:none;border-radius:12px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:12px;position:relative;overflow:hidden;letter-spacing:.3px}.login-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.login-button:hover:before{left:100%}.login-button:hover{background:linear-gradient(135deg,#1e8cc7,#1a7ba8);transform:translateY(-2px);box-shadow:0 10px 25px #1a83bb4d}.login-button:active{transform:translateY(0)}.login-button:disabled{opacity:.7;cursor:not-allowed;transform:none;box-shadow:none}.loading-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.login-footer{text-align:center;padding-top:24px;border-top:1px solid rgba(92,200,255,.1)}.login-help{color:var(--muted);font-size:14px;margin:0;line-height:1.5}.help-link{color:var(--primary);cursor:pointer;text-decoration:underline;transition:color .3s ease}.help-link:hover{color:var(--accent)}@media (max-width: 480px){.login-container{padding:16px}.login-card{padding:32px 24px;border-radius:20px}.login-title{font-size:28px}.login-subtitle{font-size:14px}.form-input{padding:14px 16px;font-size:16px}.login-button{padding:16px 20px;font-size:15px}}