@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap";:root{--accent-blue:#3b82f6;--accent-green:#10b981;--accent-orange:#f59e0b;--accent-purple:#a855f7;--accent-red:#ef4444;--bg-gradient:radial-gradient(circle at center, #1a1e2e5c 0%, #0b0d112e 100%);--card-bg:#17191e61;--card-border:#ffffff24;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--inv-color:#f1f5f9;--dim-color:#1e293b;--sub-color:#475569;--inv-shadow:drop-shadow(2px 6px 12px #ffffff4d);--glass-blur:blur(20px)}[data-theme=light]{--bg-gradient:radial-gradient(circle at center, #ffffff57 0%, #e2e8f024 100%);--card-bg:#ffffff75;--card-border:#0f172a24;--text-primary:#0f172a;--text-secondary:#475569;--inv-color:#1e293b;--dim-color:#cbd5e1;--sub-color:#94a3b8;--inv-shadow:drop-shadow(2px 6px 8px #0003)}*{box-sizing:border-box;margin:0;padding:0}body{width:100vw;height:100vh;color:var(--text-primary);background:var(--bg-gradient);background-attachment:fixed;font-family:Outfit,sans-serif;transition:background .3s,color .3s;overflow:hidden}button,input{font:inherit}#root{height:100%}.dashboard{flex-direction:column;gap:1.5rem;height:100%;padding:1.5rem;display:flex}.loading-screen{text-align:center;justify-content:center;align-items:center}.loading-screen .animating{color:var(--accent-orange);margin-bottom:1rem;animation:1.3s ease-in-out infinite pulse}.loading-screen p{color:var(--text-secondary)}header{justify-content:space-between;align-items:center;gap:1rem;padding:0 1rem;display:flex}.header-brand,.header-actions{align-items:center;display:flex}.header-brand{gap:.75rem;min-width:0}.header-icon{color:var(--accent-blue);background:#3b82f61a;border-radius:12px;padding:.5rem}h1{font-size:1.125rem;font-weight:700}.system-status{color:var(--text-secondary);align-items:center;gap:.5rem;font-size:.75rem;display:flex}.status-dot{background:var(--accent-green);border-radius:50%;width:8px;height:8px;box-shadow:0 0 14px #10b981cc}.status-dot.error{background:var(--accent-red);box-shadow:0 0 14px #ef4444b3}.header-actions{gap:1.5rem}.theme-button{width:42px;height:42px;color:var(--text-primary);background:var(--card-bg);border:1px solid var(--card-border);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;display:flex}.dashboard-main{flex:1;grid-template-columns:320px minmax(0,1fr);gap:1.5rem;min-height:0;display:grid;overflow:hidden}.device-list{background:var(--card-bg);border:1px solid var(--card-border);min-width:0;min-height:0;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:8px;flex-direction:column;padding:1rem;display:flex}.section-title{color:var(--text-secondary);letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;font-weight:700}.device-list-scroll{gap:.55rem;min-height:0;margin-top:.8rem;padding-right:.2rem;display:grid;overflow-y:auto}.device-list-scroll::-webkit-scrollbar{width:4px}.device-list-scroll::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}.device-button{min-height:72px;color:var(--text-primary);text-align:left;border:1px solid var(--card-border);cursor:pointer;background:#ffffff0a;border-radius:8px;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem;display:flex}.device-button.active{border-color:color-mix(in srgb, var(--accent-blue) 58%, var(--card-border) 42%);background:color-mix(in srgb, var(--accent-blue) 16%, transparent 84%)}.device-button span{min-width:0}.device-button strong,.device-button small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.device-button small{color:var(--text-secondary);margin-top:.25rem}.device-power{color:var(--accent-green);flex:none;font-weight:700}.workspace{flex-direction:column;gap:1rem;min-width:0;min-height:0;display:flex;overflow:hidden}.powerflow-shell{aspect-ratio:5/3;background:var(--card-bg);border:1px solid var(--card-border);width:100%;max-width:1120px;min-height:480px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:24px;flex:1;justify-content:center;align-items:center;margin:0 auto;display:flex;position:relative;overflow:hidden;box-shadow:0 8px 32px #0003}.flow-overlay-top-left{z-index:10;pointer-events:none;position:absolute;top:1.5rem;left:1.5rem}.flow-overlay-top-right{z-index:10;position:absolute;top:1.5rem;right:1.5rem}.flow-device-info h2{color:var(--text-primary);margin:0;font-size:1.5rem;font-weight:700}.flow-device-info p{color:var(--text-secondary);margin-top:.25rem;font-size:.8rem}.history-modal-backdrop{z-index:1200;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#070a108c;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.history-modal-panel{width:min(920px,100%);max-height:min(82vh,760px);overflow:auto}.history-panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#141416f2;border:1px solid #ffffff1a;border-radius:16px;padding:20px;box-shadow:0 10px 30px #00000080}.graph-header{justify-content:space-between;align-items:flex-start;margin-bottom:20px;display:flex}.graph-header h3{font-size:16px;font-weight:600}.graph-header span,.graph-range-controls span{color:#ffffff9e;font-size:11px}.icon-btn{color:#ffffffb3;cursor:pointer;background:#ffffff0d;border:0;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.graph-range-controls{grid-template-columns:1fr 1fr auto auto;align-items:end;gap:.5rem;margin-bottom:12px;display:grid}.graph-range-controls label{flex-direction:column;gap:.25rem;display:flex}.graph-range-controls input{color:#fff;background:#ffffff0f;border:1px solid #ffffff29;border-radius:8px;height:34px;padding:0 8px;font-size:12px}.graph-range-controls button{color:#fff;cursor:pointer;background:#3b82f6cc;border:0;border-radius:8px;height:34px;padding:0 12px;font-size:12px;font-weight:600}.graph-content{min-height:280px}.muted{color:var(--text-secondary);font-size:.86rem}.ws-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:4px;padding:1px 5px;font-size:9px;font-weight:800}.ws-badge.open{color:#22c55e;background:#22c55e26;border:1px solid #22c55e40;animation:2s infinite ws-pulse}.ws-badge.connecting{color:#f59e0b;background:#f59e0b26;border:1px solid #f59e0b40}.ws-badge.closed{color:#ef4444;background:#ef444426;border:1px solid #ef444440}@keyframes pulse{0%,to{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1)}}@keyframes ws-pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@media (width<=1440px){.dashboard-main{grid-template-columns:300px minmax(0,1fr)}}@media (width<=1280px){.dashboard-main{grid-template-columns:280px minmax(0,1fr)}}@media (width<=900px),(height<=760px){.powerflow-shell{min-height:320px;max-height:440px}}@media (width<=860px){body{overflow:auto}.dashboard{height:auto;min-height:100vh}.dashboard-main{grid-template-columns:1fr;padding:1rem 0}.device-list{max-height:260px}.graph-range-controls{grid-template-columns:1fr 1fr}}.mobile-topbar{display:none}@media (width<=768px){body{height:auto;overflow:hidden auto}.dashboard{gap:0;height:auto;min-height:100dvh;padding:0}.mobile-topbar{background:var(--card-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--card-border);z-index:100;justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex;position:sticky;top:0}.mobile-topbar-left strong{font-size:.95rem;display:block}.mobile-topbar-left .muted{font-size:.7rem}.mobile-topbar-right{align-items:center;gap:.5rem;display:flex}.theme-button-sm{border:1px solid var(--card-border);width:32px;height:32px;color:var(--text-primary);cursor:pointer;background:#ffffff0f;border-radius:8px;justify-content:center;align-items:center;display:flex}.dashboard-main{flex-direction:column;gap:0;padding:0;display:flex;overflow:visible}.device-list{-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;border-radius:0;order:-1;padding:.5rem 1rem}.device-list .section-title{margin-bottom:.4rem}.device-list-scroll{-webkit-overflow-scrolling:touch;gap:.5rem;margin-top:0;padding-bottom:.25rem;display:flex;overflow:auto hidden}.device-button{flex:0 0 180px;min-height:54px;padding:.5rem .75rem}.device-button strong{font-size:.85rem}.device-button small{font-size:.65rem}.workspace{padding:0;overflow:visible}.powerflow-shell{min-height:unset;max-height:unset;aspect-ratio:unset;height:auto;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;border-radius:0;margin:0;padding:0}.powerflow-shell svg{width:100%;height:auto}.flow-overlay-top-left,.flow-overlay-top-right{display:none}.mobile-summary-card{padding:.75rem 1rem}.summary-grid{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.summary-tile{background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);cursor:pointer;border-radius:14px;padding:.75rem;transition:transform .15s}.summary-tile:active{transform:scale(.97)}.tile-label{text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem;font-size:.65rem;font-weight:700;display:block}.tile-value{font-size:1.25rem;font-weight:700;line-height:1.2;display:block}.tile-value small{opacity:.7;font-size:.75rem;font-weight:500}.tile-sub{color:var(--text-secondary);margin-top:.2rem;font-size:.65rem;display:block}.summary-tile.solar .tile-label,.summary-tile.solar .tile-value{color:#22c55e}.summary-tile.home .tile-label,.summary-tile.home .tile-value{color:#3b82f6}.summary-tile.battery .tile-label,.summary-tile.battery .tile-value{color:#a855f7}.summary-tile.grid .tile-label,.summary-tile.grid .tile-value{color:#ff6b6b}.history-modal-panel{width:100%;padding:0}.graph-range-controls{grid-template-columns:1fr}}