@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap";
:root{--bg-color:#0d0f14;--panel-bg:#ffffff08;--panel-border:#ffffff0d;--text-main:#e2e8f0;--text-muted:#94a3b8;--accent-blue:#38bdf8;--accent-green:#34d399;--accent-yellow:#fbbf24;--accent-red:#f87171;--glass-blur:blur(12px)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);background-image:radial-gradient(circle at 15%,#38bdf81a,#0000 30%),radial-gradient(circle at 85% 30%,#34d3991a,#0000 30%),linear-gradient(#0d0f14d1,#0d0f14d1),url(/bg-map.png);background-position:50%,50%,50%,50%;background-size:100% 100%,100% 100%,100% 100%,cover;background-attachment:fixed;flex-direction:column;min-height:100vh;font-family:Outfit,sans-serif;display:flex}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dashboard-container{width:100%;max-width:1800px;margin:0 auto;padding:2rem}.header{background:var(--panel-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid #ffffff1f;border-radius:1.5rem;justify-content:space-between;align-items:center;margin-bottom:2rem;padding:1.5rem 2rem;display:flex;box-shadow:0 0 40px #38bdf80f,inset 0 0 20px #ffffff08}.header h1{background:linear-gradient(to right, var(--accent-blue), var(--accent-green));-webkit-text-fill-color:transparent;letter-spacing:-1px;-webkit-background-clip:text;margin:0;font-size:2.5rem;font-weight:800}.status-badge{color:#4ade80;background:#22c55e26;border:1px solid #22c55e4d;border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;display:flex}.status-badge:before{content:"";background:#4ade80;border-radius:50%;width:8px;height:8px;animation:2s infinite pulse;box-shadow:0 0 10px #4ade80}.status-badge.offline{border-color:#f871714d}.status-badge.offline:before{background:var(--accent-red);box-shadow:0 0 10px var(--accent-red)}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.pulse-indicator{animation:2s infinite pulse}.dashboard-layout{grid-template-columns:1fr;align-items:stretch;gap:1.5rem;display:grid}@media (min-width:1000px){.dashboard-layout{grid-template-columns:minmax(400px,1.2fr) 1fr}}.bubbles-grid{flex:1;grid-template-columns:repeat(2,1fr);gap:1.5rem;display:grid}@media (min-width:1000px){.bubbles-grid{grid-template-columns:repeat(3,1fr)}}.header-metrics{color:var(--text-muted);background:#ffffff08;border-radius:12px;flex-wrap:wrap;align-items:center;gap:1rem;padding:.5rem 1rem;display:flex}@media (max-width:768px){.header{flex-direction:column;padding:1rem}.header-metrics{justify-content:center;gap:.5rem;width:100%;padding:.5rem}.header-separator{display:none!important}.header h1{font-size:1.8rem!important}.metric-value{font-size:3rem!important}.metric-unit{font-size:1.2rem!important}.forecast-item:nth-child(n+5){display:none!important}}.glass-panel{background:var(--panel-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid #ffffff1f;border-radius:1.5rem;flex-direction:column;height:100%;padding:1.5rem;transition:transform .3s,box-shadow .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 0 40px #38bdf80f,inset 0 0 20px #ffffff08}.glass-panel:hover{border-color:#ffffff1a;transform:translateY(-5px);box-shadow:0 10px 40px #38bdf81a,inset 0 0 20px #ffffff08}.glass-panel:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);height:2px;transition:transform .5s;position:absolute;top:0;left:0;right:0;transform:translate(-100%)}.glass-panel:hover:before{transform:translate(100%)}.metric-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;align-items:center;gap:.5rem;margin-bottom:.5rem;font-size:.875rem;font-weight:600;display:flex}.metric-value{margin-bottom:.5rem;font-size:3.5rem;font-weight:800}.metric-unit{color:var(--text-muted);font-size:2rem;font-weight:400}.solar-value{color:var(--accent-yellow)}.battery-value{color:var(--accent-green)}.grid-value{color:var(--accent-red)}.load-value{color:var(--accent-blue)}.progress-bar-container{background:#ffffff1a;border-radius:6px;width:100%;height:12px;margin-top:1.5rem;position:relative;overflow:visible}.progress-bar{border-radius:6px;height:100%;transition:width 1s cubic-bezier(.4,0,.2,1),background-color 1s}.battery-marker{z-index:10;background:#fff;width:2px;position:absolute;top:-4px;bottom:-4px}.battery-marker-label{color:var(--text-muted);white-space:nowrap;font-size:.9rem;font-weight:600;position:absolute;top:18px;transform:translate(-50%)}@media (max-width:1920px) and (max-height:480px){body{overflow:hidden}.dashboard-container{max-width:100%;padding:1rem}.forecast-section{display:none!important}}