.page{max-width:1080px;margin:0 auto;padding:28px 20px 48px}.login-page{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}.login-card{width:min(100%,440px);padding:32px}.login-card h1{font-size:clamp(24px,6vw,30px)}.login-intro{color:var(--muted);line-height:1.6;margin:16px 0 28px}.login-card form{display:grid;gap:12px}.login-card label{font-size:14px}.login-card input{width:100%;min-height:46px;padding:10px 12px;margin-bottom:8px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit}.auth-button{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg-elev);color:var(--text);cursor:pointer}.login-submit{margin-top:8px;background:var(--load);color:var(--bg);font-weight:650}.auth-button:disabled{opacity:.6;cursor:wait}.auth-button:focus-visible,.login-card input:focus-visible{outline:2px solid var(--load);outline-offset:3px}.account-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:12px}.auth-notice{max-width:1080px;margin:16px auto;padding:0 20px}.header{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:28px}.eyebrow{margin:0 0 6px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:12px}h1{margin:0;font-size:32px;font-weight:650}.meta{color:var(--muted);font-size:14px;text-align:right}.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}.card{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;min-height:148px}.label{margin:0;color:var(--muted);font-size:13px}.value{margin:14px 0 8px;font-size:34px;font-weight:680;letter-spacing:-.03em}.hint{margin:0;color:var(--muted);font-size:13px}.flow-scroll{margin-top:18px}.flow{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1.25fr) 36px minmax(0,1fr);grid-template-rows:auto 36px auto 36px auto;align-items:center}.flow-solar{grid-area:1 / 3}.flow-solar-link{grid-area:2 / 3;color:var(--pv)}.flow-grid{grid-area:3 / 1}.flow-grid-link{grid-area:3 / 2;color:var(--grid)}.flow-building{grid-area:3 / 3}.flow-charger-link{grid-area:3 / 4;color:var(--load)}.flow-charger{grid-area:3 / 5}.flow-battery-link{grid-area:4 / 3;color:var(--bat)}.flow-battery{grid-area:5 / 3}.node{min-width:0;text-align:center;padding:18px 10px;border-radius:16px;border:1px solid var(--line);background:var(--bg-elev)}.node strong{display:block;font-size:22px;margin-top:8px}.arrow{text-align:center;font-size:28px}.arrow:not(.active){color:var(--muted)}.node .hint{display:block;margin-top:8px}.battery-soc{display:block;width:100%;height:12px;margin-top:10px;accent-color:var(--bat)}.error{border-color:#ff7a7a66;color:var(--danger)}.tone-pv{box-shadow:inset 0 0 0 1px #f5c5422e}.tone-load{box-shadow:inset 0 0 0 1px #5ad0c82e}.tone-bat{box-shadow:inset 0 0 0 1px #7ad47a2e}.tone-grid{box-shadow:inset 0 0 0 1px #7aa2ff2e}.charger-section{margin-top:28px}.charger-section h2{font-size:22px;font-weight:650}.charger-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.status-value{font-size:24px;overflow-wrap:anywhere}.connected{color:#7ad47a}.disconnected{color:var(--danger)}.setpoint-reason{margin-top:10px}.mode-control{min-height:auto;margin-bottom:14px}.mode-solar{--mode-accent: #8cdda7;--mode-rgb: 92, 194, 125}.mode-immediate{--mode-accent: #7bbfff;--mode-rgb: 58, 149, 255}.mode-control-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.mode-icon{display:flex;align-items:center;justify-content:flex-end;width:66px;height:32px;color:var(--pv)}.mode-icon svg{width:32px;height:32px}.mode-immediate .mode-icon{color:var(--mode-accent)}.mode-immediate .mode-icon svg{width:66px}.mode-slider{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:20px;margin:16px 0;color:var(--muted)}.mode-slider>span:last-child{text-align:right}.mode-slider .mode-selected{color:var(--mode-accent);font-weight:650}.mode-slider-track{position:relative;min-width:0;height:52px;border-radius:999px}.mode-slider-visual{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;border-radius:inherit;border:1px solid rgba(var(--mode-rgb),.5);background:linear-gradient(110deg,rgba(var(--mode-rgb),.15),rgba(var(--mode-rgb),.32));box-shadow:inset 0 0 20px rgba(var(--mode-rgb),.1),0 0 18px rgba(var(--mode-rgb),.08);transition:background .4s,border-color .4s,box-shadow .4s}.mode-slider input{position:relative;display:block;-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;height:52px;margin:0;padding:0 10px;border-radius:inherit;background:transparent;cursor:pointer}.mode-slider input::-webkit-slider-runnable-track{height:52px;background:transparent}.mode-slider input::-moz-range-track{height:52px;background:transparent}.mode-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:10px;border:4px solid var(--mode-accent);border-radius:50%;background:#eef9f2;box-shadow:0 2px 8px #0000004d,0 0 14px rgba(var(--mode-rgb),.3)}.mode-slider input::-moz-range-thumb{width:24px;height:24px;border:4px solid var(--mode-accent);border-radius:50%;background:#eef9f2;box-shadow:0 2px 8px #0000004d,0 0 14px rgba(var(--mode-rgb),.3)}.mode-slider-track[data-disabled=true]{opacity:.5}.mode-slider input:disabled{cursor:wait}.mode-slider input:focus-visible{outline:2px solid var(--mode-accent);outline-offset:4px}.energy-particle{position:absolute;pointer-events:none}.energy-particle:nth-child(1){--particle-position: 12%;--particle-delay: -1s}.energy-particle:nth-child(2){--particle-position: 28%;--particle-delay: -4s}.energy-particle:nth-child(3){--particle-position: 45%;--particle-delay: -6s}.energy-particle:nth-child(4){--particle-position: 62%;--particle-delay: -2.5s}.energy-particle:nth-child(5){--particle-position: 78%;--particle-delay: -5s}.energy-particle:nth-child(6){--particle-position: 90%;--particle-delay: -7s}.mode-solar .energy-particle{left:var(--particle-position);bottom:-12px;width:7px;height:11px;border-radius:2px 8px;background:#b3f3c2a6;animation:solar-rise 9s linear infinite;animation-delay:var(--particle-delay)}.mode-immediate .energy-particle{top:var(--particle-position);width:32px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,#aedcff);box-shadow:0 0 6px #77c3ffb3;animation:electric-flow 1.8s linear infinite;animation-delay:var(--particle-delay)}.mode-immediate .energy-particle:after{content:"";position:absolute;right:0;top:-2px;width:6px;height:6px;background:#d8efff;transform:rotate(45deg)}@keyframes solar-rise{0%{transform:translate(0) rotate(-15deg);opacity:0}20%{opacity:.55}80%{opacity:.55}to{transform:translate(8px,-78px) rotate(25deg);opacity:0}}@keyframes electric-flow{0%{left:-40px;opacity:0}15%{opacity:.85}85%{opacity:.85}to{left:100%;opacity:0}}.mode-error{color:var(--danger);margin:12px 0 0}@media(max-width:860px){.charger-grid{grid-template-columns:1fr}.header,.meta{text-align:left;display:block}}@media(max-width:640px){.page{padding:20px 12px 32px}.mode-slider{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;font-size:14px}.mode-slider>span:first-child{grid-area:1 / 1}.mode-slider>span:last-child{grid-area:1 / 2}.mode-slider-track{grid-area:2 / 1 / 3 / 3}.flow{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 32px auto 32px auto;column-gap:12px}.flow-grid{grid-area:1 / 1}.flow-solar{grid-area:1 / 2}.flow-grid-link{grid-area:2 / 1;transform:rotate(90deg)}.flow-solar-link{grid-area:2 / 2}.flow-building{grid-area:3 / 1 / 4 / 3}.flow-battery-link{grid-area:4 / 1}.flow-charger-link{grid-area:4 / 2;transform:rotate(90deg)}.flow-battery{grid-area:5 / 1}.flow-charger{grid-area:5 / 2}.flow .node{padding:14px 8px;border-radius:12px;font-size:14px;line-height:1.4;overflow-wrap:anywhere}.flow .node strong{font-size:clamp(18px,4.8vw,22px);margin-top:6px}.flow .node .hint{font-size:12px;margin-top:6px}.flow .flow-building strong{font-size:26px}}@media(prefers-reduced-motion:reduce){.energy-particle{animation:none!important;display:none}.mode-slider-visual{transition:none}}:root{color-scheme:dark;--bg: #081018;--bg-elev: #0f1c28;--card: #122433;--line: rgba(140, 190, 170, .16);--text: #e7f4ee;--muted: #8aa39a;--pv: #f5c542;--load: #5ad0c8;--grid: #7aa2ff;--bat: #7ad47a;--danger: #ff7a7a}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:Segoe UI,system-ui,sans-serif;background:radial-gradient(circle at 12% -10%,rgba(245,197,66,.16),transparent 38%),radial-gradient(circle at 90% 0%,rgba(90,208,200,.12),transparent 32%),var(--bg);color:var(--text)}button{font:inherit}