@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-color: #0b0f19;--text-main: #ffffff;--text-muted: #8b9bb4;--glass-bg: rgba(26, 32, 53, .6);--glass-border: rgba(255, 255, 255, .05);--primary-glow: rgba(56, 189, 248, .15);--accent-temp: #f97316;--accent-hum: #0ea5e9;--accent-gas: #eab308;--accent-gas-alert: #ef4444;--accent-dist: #10b981}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);font-family:Inter,sans-serif;min-height:100vh;background-image:radial-gradient(circle at 15% 50%,var(--primary-glow),transparent 25%),radial-gradient(circle at 85% 30%,rgba(139,92,246,.1),transparent 25%)}.dashboard-container{max-width:1200px;margin:0 auto;padding:2rem}.header{margin-bottom:2.5rem;display:flex;justify-content:space-between;align-items:center}.header h1{font-size:1.75rem;font-weight:700;letter-spacing:-.025em}.status-badge{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:9999px;background:var(--glass-bg);border:1px solid var(--glass-border);font-size:.875rem;font-weight:500}.status-dot{width:8px;height:8px;border-radius:50%}.status-dot.online{background-color:#10b981;box-shadow:0 0 8px #10b981}.status-dot.offline{background-color:#ef4444;box-shadow:0 0 8px #ef4444}.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:2rem}.glass-card{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:1rem;padding:1.5rem;transition:transform .2s ease,box-shadow .2s ease}.glass-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0003}.metric-header{display:flex;align-items:center;gap:.75rem;color:var(--text-muted);font-size:.875rem;font-weight:500;margin-bottom:1rem}.metric-value{font-size:2.5rem;font-weight:700;line-height:1}.metric-unit{font-size:1rem;color:var(--text-muted);margin-left:.25rem}.main-content{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem}.chart-container{height:350px}.control-panel{display:flex;flex-direction:column;gap:1rem}.control-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:1.25rem;border-radius:.75rem;border:1px solid var(--glass-border);background:#ffffff08;color:var(--text-main);font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.control-btn:hover{background:#ffffff14}.control-btn:active{transform:scale(.98)}.control-btn.active{background:#38bdf81a;border-color:#38bdf84d;color:#38bdf8}@media (max-width: 1024px){.bento-grid{grid-template-columns:repeat(2,1fr)}.main-content{grid-template-columns:1fr}}@media (max-width: 640px){.bento-grid{grid-template-columns:1fr}}