:root{--bg0: #0c1412;--bg1: #13201c;--bg2: #1a2c26;--line: rgba(180, 220, 200, .12);--text: #e8f2ec;--muted: #8aa398;--solar: #f0b429;--battery: #3dd68c;--grid: #5b9cff;--load: #ff7a59;--danger: #ff5d5d;--ok: #3dd68c;--panel: rgba(19, 32, 28, .82);--radius: 18px;font-family:DM Sans,system-ui,sans-serif;color:var(--text);background:var(--bg0)}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:radial-gradient(1200px 600px at 10% -10%,rgba(240,180,41,.16),transparent 55%),radial-gradient(900px 500px at 100% 0%,rgba(61,214,140,.12),transparent 50%),radial-gradient(800px 500px at 50% 100%,rgba(91,156,255,.1),transparent 45%),var(--bg0)}button,input,select{font:inherit;color:inherit}.app-frame{min-height:100vh;display:grid;grid-template-columns:1fr}.sidebar{display:none}.brand{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.02em;margin:0;line-height:1.05}.brand-sm{font-size:1.45rem}.brand span{color:var(--solar);font-style:italic}.mobile-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.mobile-status{color:var(--muted);font-size:.82rem;margin-top:.3rem}.mobile-logout{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:.4rem .8rem;cursor:pointer}.mobile-nav{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:1rem}.mobile-nav button{background:transparent;border:1px solid transparent;color:var(--muted);padding:.4rem .75rem;border-radius:999px;cursor:pointer}.mobile-nav button.active{color:var(--text);border-color:var(--line);background:#ffffff0a}.app-main{min-width:0;padding:1rem 1rem 2rem}.app-content{width:100%;max-width:none}@media (min-width: 980px){.app-frame{grid-template-columns:240px minmax(0,1fr);transition:grid-template-columns .22s ease}.app-frame.sidebar-collapsed{grid-template-columns:72px minmax(0,1fr)}.sidebar{display:flex;flex-direction:column;position:sticky;top:0;z-index:20;height:100vh;padding:1.15rem .85rem 1.1rem;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 28%),#0a100edb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;transition:padding .22s ease}.sidebar-top{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.25rem}.sidebar-brand{min-width:0}.sidebar .brand{display:flex;align-items:center;gap:.65rem;font-size:1.55rem}.brand-icon{display:inline-flex;color:var(--solar);flex:0 0 auto}.brand-icon svg{width:22px;height:22px}.brand-text{white-space:nowrap}.sidebar-status{display:flex;gap:.65rem;align-items:flex-start;margin-top:.85rem;padding:.75rem .8rem;border-radius:14px;border:1px solid var(--line);background:#0003}.sidebar-status strong{display:block;font-size:.82rem;font-weight:600}.sidebar-status small{display:block;margin-top:.2rem;color:var(--muted);font-size:.72rem;line-height:1.35}.sidebar-nav{display:flex;flex-direction:column;gap:.3rem;flex:1}.sidebar-nav button,.sidebar-logout{width:100%;display:flex;align-items:center;gap:.75rem;text-align:left;background:transparent;border:1px solid transparent;color:var(--muted);padding:.75rem .85rem;border-radius:12px;cursor:pointer;font-weight:600}.nav-icon{display:inline-flex;width:1.35rem;height:1.35rem;align-items:center;justify-content:center;flex:0 0 auto}.nav-icon svg{display:block}.nav-label{min-width:0;white-space:nowrap}.sidebar-nav button:hover{color:var(--text);background:#ffffff08}.sidebar-nav button.active{color:var(--text);border-color:#f0b42947;background:#f0b42914}.sidebar-nav button.active .nav-icon{color:var(--solar)}.sidebar-foot{margin-top:auto;padding-top:1rem}.sidebar-logout{border-color:var(--line)}.sidebar.is-collapsed{padding:1.05rem .55rem}.sidebar.is-collapsed .brand{justify-content:center}.sidebar.is-collapsed .brand-text,.sidebar.is-collapsed .sidebar-status-text,.sidebar.is-collapsed .nav-label{display:none}.sidebar.is-collapsed .sidebar-status{justify-content:center;padding:.6rem}.sidebar.is-collapsed .sidebar-nav button,.sidebar.is-collapsed .sidebar-logout{justify-content:center;padding:.8rem .35rem}.mobile-topbar,.mobile-nav{display:none}.app-main{padding:1.25rem 1.5rem 2.25rem}.hero-flow{min-height:520px;padding:1.15rem 1rem 1.25rem}.flow-svg{height:min(48vh,560px)}}@media (min-width: 1400px){.app-frame{grid-template-columns:260px minmax(0,1fr)}.app-frame.sidebar-collapsed{grid-template-columns:76px minmax(0,1fr)}.app-main{padding:1.4rem 2rem 2.5rem}.flow-svg{height:min(52vh,620px)}}.status-dot{width:.55rem;height:.55rem;border-radius:50%;display:inline-block;margin-right:.4rem;background:var(--danger);box-shadow:0 0 0 4px #ff5d5d26}.status-dot.on{background:var(--ok);box-shadow:0 0 0 4px #3dd68c2e}.hero-flow{position:relative;border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);background:radial-gradient(500px 220px at 16% 18%,rgba(240,180,41,.08),transparent 60%),radial-gradient(420px 200px at 84% 20%,rgba(255,122,89,.07),transparent 55%),linear-gradient(180deg,#ffffff08,#0000002e);padding:1rem .6rem 1.1rem;overflow:hidden;min-height:440px}.flow-stage{width:100%;position:relative}.flow-svg{width:100%;height:min(62vw,420px);display:block}.node-value{font-size:.98rem;font-weight:600;fill:var(--text);text-anchor:middle;pointer-events:none}.node-hit{cursor:pointer;outline:none}.node-hit.is-active{fill:#ffffff0a}.device-tip{position:absolute;z-index:5;transform:translate(-50%,calc(-100% - 18px));min-width:180px;max-width:240px;padding:.7rem .8rem .75rem;border-radius:14px;border:1px solid var(--line);background:#0a1210f2;box-shadow:0 12px 32px #00000073;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:auto}.device-tip.tip-wide{min-width:260px;max-width:300px}.device-tip.tip-below{transform:translate(-50%,22px)}.device-tip-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:.35rem}.device-tip-title{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.device-tip-status{font-size:.68rem;color:var(--muted);text-transform:lowercase}.device-tip-hero{display:flex;flex-direction:column;gap:.1rem;margin-bottom:.55rem}.device-tip-hero strong{font-size:1.35rem;font-weight:700;line-height:1.1}.device-tip-hero span{font-size:.72rem;color:var(--muted)}.device-tip-cards{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}.device-tip-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:.45rem .5rem}.device-tip-card-label{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.2rem}.device-tip-card-primary{font-size:.95rem;font-weight:700;margin-bottom:.15rem}.device-tip-card-line{font-size:.68rem;color:var(--muted);line-height:1.3}.device-tip-rows{margin:.45rem 0 0;display:grid;gap:.28rem}.device-tip-row{display:flex;justify-content:space-between;gap:.75rem;font-size:.78rem;line-height:1.25}.device-tip-row dt{margin:0;color:var(--muted)}.device-tip-row dd{margin:0;font-weight:600;text-align:right;color:var(--text)}.metric-sub{margin-top:.25rem;font-size:.72rem;color:var(--muted);line-height:1.3}.metrics-lg{gap:1rem;margin-top:1.15rem}.metrics-lg .metric{padding:1.15rem 1.2rem 1.2rem;min-height:168px;display:flex;flex-direction:column;gap:.35rem;border-top:3px solid transparent}.metric-solar{border-top-color:var(--solar)}.metric-load{border-top-color:var(--load)}.metric-battery{border-top-color:var(--battery)}.metric-grid-card{border-top-color:var(--grid)}.metric-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.metric-badge{font-size:.68rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.15rem .5rem;text-transform:lowercase}.metric-badge.on{color:var(--ok);border-color:#3dd68c59}.metric-badge.off{color:var(--danger);border-color:#ff5d5d59}.metrics-lg .metric .v{font-size:1.85rem;font-weight:700;line-height:1.1;margin:.15rem 0 .35rem}.metrics-lg .metric .v small{font-size:.85rem;font-weight:600;opacity:.7;margin-left:.15rem}.metric-grid{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:.45rem .7rem}.metric-grid>div{display:flex;flex-direction:column;gap:.1rem;min-width:0}.metric-grid span{font-size:.68rem;color:var(--muted)}.metric-grid b{font-size:.82rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.details-panel{margin-top:1.15rem}.details-grid{display:grid;grid-template-columns:1fr;gap:.9rem}@media (min-width: 700px){.details-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1100px){.details-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.details-grid section{background:#0000002e;border:1px solid var(--line);border-radius:14px;padding:.85rem .95rem}.details-grid h3{margin:0 0 .65rem;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.details-grid dl{margin:0;display:grid;gap:.4rem}.details-grid dl>div{display:flex;justify-content:space-between;gap:.75rem;font-size:.82rem;line-height:1.3}.details-grid dt{margin:0;color:var(--muted)}.details-grid dd{margin:0;font-weight:600;text-align:right;color:var(--text)}@media (max-width: 799px){.metrics-lg .metric{min-height:150px}.metrics-lg .metric .v{font-size:1.55rem}}@media (max-width: 640px){.device-tip,.device-tip.tip-wide{min-width:160px;max-width:min(280px,78vw);padding:.55rem .65rem}.device-tip-hero strong{font-size:1.15rem}}.solar-fill{fill:var(--solar)}.load-fill{fill:var(--load)}.battery-fill{fill:var(--battery)}.grid-fill{fill:var(--grid)}.flow-caption{margin:.15rem .5rem 0;color:var(--muted);font-size:.8rem;text-align:center;text-transform:lowercase;letter-spacing:.02em}.beam-guide,.beam-track,.beam-packets{pointer-events:none}.beam-packet{filter:drop-shadow(0 0 4px currentColor)}.flow-beam.is-serve.is-on .beam-track{stroke-opacity:.65}.led-on{animation:pulse-led 1.6s ease-in-out infinite}@keyframes pulse-led{0%,to{opacity:1}50%{opacity:.45}}.office-node.on .office-ring{animation:pulse-led 2s ease-in-out infinite}.sun-badge{animation:sun-pulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes sun-pulse{0%,to{opacity:1}50%{opacity:.75}}.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1rem}@media (min-width: 800px){.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}.metric{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem}.metric .k{color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase}.metric .v{font-size:1.35rem;font-weight:600}.metric .v.solar{color:var(--solar)}.metric .v.battery{color:var(--battery)}.metric .v.grid{color:var(--grid)}.metric .v.load{color:var(--load)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;margin-top:1rem}.panel h2{margin:0 0 .75rem;font-size:1.05rem;font-weight:600}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem}.login-card{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:1.5rem}.login-card label{display:block;color:var(--muted);font-size:.85rem;margin:.75rem 0 .35rem}.login-card input{width:100%;background:#00000040;border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem}.login-card button,.btn{margin-top:1rem;width:100%;border:0;border-radius:12px;padding:.8rem 1rem;background:linear-gradient(135deg,#d9a21b,#f0b429);color:#1a1405;font-weight:700;cursor:pointer}.btn.secondary{background:#ffffff0f;color:var(--text);border:1px solid var(--line);width:auto;margin-top:0}.err{color:var(--danger);font-size:.9rem;margin-top:.75rem}.chart{width:100%;height:220px;display:block}table{width:100%;border-collapse:collapse;font-size:.9rem}th,td{text-align:left;padding:.55rem .35rem;border-bottom:1px solid var(--line)}th{color:var(--muted);font-weight:500}.form-row{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:end;margin-bottom:.75rem}.form-row label{display:block;color:var(--muted);font-size:.8rem;margin-bottom:.3rem}.form-row input{width:100%;background:#00000040;border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem}.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}.chip{font-size:.75rem;padding:.3rem .65rem;border-radius:999px;border:1px solid var(--line);color:var(--muted)}.chip.on{color:var(--ok);border-color:#3dd68c59}.chip.off{color:var(--danger);border-color:#ff5d5d59}.history-page{margin-top:.5rem}.history-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}.history-toolbar h2{margin:0;font-size:1.25rem}.history-note{margin:.25rem 0 0;color:var(--muted);font-size:.82rem}.history-ranges{display:flex;flex-wrap:wrap;gap:.35rem;background:#00000038;border:1px solid var(--line);border-radius:999px;padding:.25rem}.history-ranges button{border:0;background:transparent;color:var(--muted);padding:.4rem .85rem;border-radius:999px;font-size:.82rem;font-weight:600}.history-ranges button.active{background:#ffffff14;color:var(--text)}.history-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}@media (min-width: 900px){.history-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}.history-stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1rem 1.05rem;display:flex;flex-direction:column;gap:.2rem}.history-stat span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}.history-stat b{font-size:1.25rem;font-weight:700}.history-stat b.solar{color:var(--solar)}.history-stat b.load{color:var(--load)}.history-stat b.battery{color:var(--battery)}.history-stat b.grid{color:var(--grid)}.history-stat small{color:var(--muted);font-size:.75rem}.history-charts{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width: 960px){.history-charts{grid-template-columns:1fr 1fr}.history-card-wide{grid-column:1 / -1}}.history-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:1rem 1rem .85rem}.history-card header h3{margin:0;font-size:1rem}.history-card header p{margin:.2rem 0 .75rem;color:var(--muted);font-size:.8rem}.chart-wrap{position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.history-chart{width:100%;height:240px;display:block}.chart-grid{stroke:#b4dcc814;stroke-width:1}.chart-axis{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:0}.chart-crosshair line{stroke:#e8f2ec59;stroke-width:1;stroke-dasharray:4 4}.chart-legend{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.55rem;padding:0 .15rem .15rem}.chart-legend-item{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--muted)}.chart-legend-item i{width:10px;height:10px;border-radius:999px;display:inline-block}.chart-tip{position:absolute;top:12px;z-index:3;min-width:150px;padding:.55rem .65rem;border-radius:12px;border:1px solid var(--line);background:#0a1210f0;box-shadow:0 10px 28px #0006;pointer-events:none}.chart-tip-time{font-size:.7rem;color:var(--muted);margin-bottom:.35rem}.chart-tip-row{display:grid;grid-template-columns:10px 1fr auto;gap:.4rem;align-items:center;font-size:.78rem;margin-top:.2rem}.chart-tip-row .swatch{width:8px;height:8px;border-radius:999px}.chart-tip-row b{font-weight:700}.history-empty{color:var(--muted);padding:2rem .5rem;text-align:center}