@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-primary:#0f0f1a;--bg-card:#1a1a2e;--bg-card-hover:#1f1f35;--border-subtle:#ffffff0f;--text-primary:#e8e8f0;--text-secondary:#8888a8;--text-muted:#5a5a7a;--accent-blue:#4fc3f7;--accent-green:#66bb6a;--accent-red:#ef5350;--accent-orange:#ffa726;--accent-purple:#ab47bc;--accent-cyan:#26c6da;--glow-blue:#4fc3f726;--glow-green:#66bb6a26;--glow-red:#ef53501f}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:Inter,-apple-system,sans-serif;overflow-x:hidden}.app{max-width:900px;margin:0 auto;padding:24px 20px}.header{text-align:center;margin-bottom:32px}.header h1{background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple));-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;font-size:1.75rem;font-weight:700}.header .subtitle{color:var(--text-muted);margin-top:6px;font-size:.8rem}.connection-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:20px;align-items:center;gap:6px;margin-top:10px;padding:4px 14px;font-size:.72rem;font-weight:500;display:inline-flex}.connection-badge.connected{background:var(--glow-green);color:var(--accent-green);border:1px solid #66bb6a40}.connection-badge.disconnected{background:var(--glow-red);color:var(--accent-red);border:1px solid #ef535040}.connection-badge .dot{background:currentColor;border-radius:50%;width:7px;height:7px}.connection-badge.connected .dot{animation:2s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.dashboard-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;display:grid}.card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;padding:22px;transition:all .25s;position:relative;overflow:hidden}.card:hover{background:var(--bg-card-hover);border-color:#ffffff1a;transform:translateY(-2px)}.card:before{content:"";border-radius:16px 16px 0 0;height:2px;position:absolute;top:0;left:0;right:0}.card.blue:before{background:linear-gradient(90deg, var(--accent-blue), transparent)}.card.green:before{background:linear-gradient(90deg, var(--accent-green), transparent)}.card.orange:before{background:linear-gradient(90deg, var(--accent-orange), transparent)}.card.purple:before{background:linear-gradient(90deg, var(--accent-purple), transparent)}.card.cyan:before{background:linear-gradient(90deg, var(--accent-cyan), transparent)}.card.red:before{background:linear-gradient(90deg, var(--accent-red), transparent)}.card-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.card-label{text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);font-size:.75rem;font-weight:600}.card-icon{opacity:.8;font-size:1.3rem}.card-value{letter-spacing:-1px;font-size:2rem;font-weight:700}.card-value.on{color:var(--accent-green);text-shadow:0 0 20px var(--glow-green)}.card-value.off{color:var(--accent-red)}.card-detail{color:var(--text-muted);margin-top:8px;font-size:.78rem}.progress-bar-container{margin-top:14px}.progress-bar-bg{background:#ffffff0f;border-radius:4px;width:100%;height:8px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));border-radius:4px;height:100%;transition:width .5s}.footer{text-align:center;border-top:1px solid var(--border-subtle);margin-top:32px;padding-top:20px}.footer .last-update{color:var(--text-muted);font-size:.78rem}.footer .uptime{color:var(--text-muted);margin-top:4px;font-size:.72rem}.waiting{text-align:center;padding:60px 20px}.waiting .loader{border:3px solid var(--border-subtle);border-top-color:var(--accent-blue);border-radius:50%;width:40px;height:40px;margin:0 auto 20px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.waiting p{color:var(--text-secondary);font-size:.9rem}.waiting .hint{color:var(--text-muted);margin-top:8px;font-size:.75rem}@media (width<=600px){.app{padding:16px 12px}.header h1{font-size:1.4rem}.dashboard-grid{grid-template-columns:1fr 1fr;gap:10px}.card{border-radius:12px;padding:16px}.card-value{font-size:1.5rem}}