:root{color-scheme:dark;--bg:#03070d;--panel:rgba(9,18,31,.78);--panel-strong:rgba(13,26,44,.92);--soft:rgba(255,255,255,.055);--line:rgba(255,255,255,.105);--text:#f7f9fd;--muted:#91a1b5;--blue:#2993ff;--green:#25d06f;--yellow:#f6bd13;--pink:#fc7188;--purple:#d94ee8;--cyan:#18baf2;--radius:24px;--shadow:0 28px 80px rgba(0,0,0,.34)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(ellipse 58rem 42rem at 5% -10%,rgba(31,126,255,.28),transparent 68%),radial-gradient(ellipse 50rem 36rem at 100% 0,rgba(10,160,108,.2),transparent 70%),linear-gradient(145deg,#071321 0,#040a13 50%,#020509 100%);background-attachment:fixed;letter-spacing:-.012em}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(#000,transparent 76%)}
button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.skip-link{position:fixed;left:16px;top:-60px;z-index:100;padding:12px 16px;color:#fff;background:#167cf5;border-radius:12px}.skip-link:focus{top:16px}
.site-header{width:min(1480px,calc(100% - 52px));height:96px;margin:auto;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none}.brand img{width:48px;height:48px;object-fit:cover;border-radius:15px;box-shadow:0 15px 42px rgba(41,147,255,.28)}.brand span{display:grid;gap:2px}.brand strong{font-size:20px;letter-spacing:-.03em}.brand small{color:var(--muted);font-weight:700}
.shell{width:min(1480px,calc(100% - 52px));margin:auto;min-height:calc(100vh - 170px);position:relative;z-index:1}.glass{background:linear-gradient(145deg,rgba(16,31,51,.86),rgba(5,12,22,.84));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.025);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.button{min-height:44px;padding:10px 15px;border:1px solid var(--line);border-radius:13px;color:var(--text);background:rgba(255,255,255,.055);font-weight:800;transition:.2s ease}.button:hover{transform:translateY(-1px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}.button:focus-visible,input:focus-visible,select:focus-visible,.nav-button:focus-visible,.energy-node:focus-visible{outline:3px solid rgba(41,147,255,.35);outline-offset:2px}.button-primary{width:100%;border:0;background:linear-gradient(135deg,#167cff,#15b873);box-shadow:0 12px 32px rgba(29,132,246,.24)}.button-primary:hover{background:linear-gradient(135deg,#2b8cff,#20ca82)}
.login-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.72fr);gap:clamp(40px,8vw,120px);align-items:center;min-height:calc(100vh - 210px);padding:3vh 5vw 9vh}.login-intro{max-width:720px}.eyebrow{display:block;color:#69b6ff;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.login-intro h1{max-width:700px;margin:15px 0 18px;font-size:clamp(44px,5.2vw,76px);line-height:.99;letter-spacing:-.055em}.login-intro>p{max-width:640px;color:#a4b2c3;font-size:clamp(17px,1.6vw,21px);line-height:1.55}.login-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:38px}.login-feature-grid>div{display:grid;gap:5px;padding:16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035)}.login-feature-grid small{color:var(--muted)}.feature-icon{width:36px;height:36px;display:grid;place-items:center;margin-bottom:5px;border-radius:12px;background:rgba(255,255,255,.07)}.feature-icon.solar{color:var(--yellow)}.feature-icon.battery{color:var(--green)}.feature-icon.tariff{color:var(--cyan)}
.login-card{padding:clamp(25px,3.5vw,38px);display:grid;gap:17px;border-radius:30px}.secure-pill,.premium-pill,.live-pill{display:inline-flex;align-items:center;gap:7px;width:max-content;border-radius:999px;color:#8ef1b7;background:rgba(37,208,111,.12);border:1px solid rgba(37,208,111,.22);font-size:12px;font-weight:850;padding:7px 11px}.secure-pill span,.live-pill i,.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green)}.login-card h2{margin:3px 0 -8px;font-size:32px;letter-spacing:-.04em}.login-card p,.login-help{margin:0;color:var(--muted);line-height:1.5}.login-card label{display:grid;gap:7px;color:#b9c5d2;font-size:13px;font-weight:800}.login-card input{width:100%;min-height:51px;padding:13px 14px;color:var(--text);border:1px solid var(--line);border-radius:14px;background:rgba(1,7,14,.58)}.login-help{text-align:center;font-size:12px}.notice{padding:13px 15px;border-radius:15px;line-height:1.45}.notice-error{color:#ffd2da;background:rgba(127,29,50,.34);border:1px solid rgba(252,113,136,.35)}
.app-layout{display:grid;grid-template-columns:258px minmax(0,1fr);gap:28px;align-items:start}.sidebar{position:sticky;top:20px;padding:12px}.account-card{display:flex;align-items:center;gap:11px;padding:14px;margin-bottom:8px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(135deg,rgba(41,147,255,.19),rgba(37,208,111,.09))}.account-card img{width:36px;height:36px;object-fit:cover;border-radius:11px}.account-card div{display:grid;gap:3px;min-width:0}.account-card small{overflow:hidden;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}.portal-nav{display:grid;gap:7px}.nav-button{width:100%;min-height:51px;padding:8px 10px;display:flex;align-items:center;gap:10px;text-align:left;color:var(--muted);border:1px solid transparent;border-radius:14px;background:transparent}.nav-button span{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.065)}.nav-button b{font-size:14px}.nav-button:hover{color:#fff;background:rgba(255,255,255,.055)}.nav-button.active{color:#fff;border-color:rgba(41,147,255,.34);background:linear-gradient(135deg,rgba(41,147,255,.26),rgba(41,147,255,.1))}.sidebar-foot{display:flex;align-items:center;gap:8px;margin:18px 8px 6px;color:var(--muted);font-size:11px;font-weight:750}
.workspace{min-width:0}.workspace-header{min-height:112px;padding:3px 3px 22px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.workspace-header h1{margin:7px 0 4px;font-size:clamp(30px,3vw,42px);line-height:1;letter-spacing:-.045em}.workspace-header p{margin:0;color:var(--muted)}.header-meta{display:flex;align-items:center;gap:10px;margin-top:11px;color:var(--muted);font-size:12px}.premium-pill{padding:5px 9px;font-size:11px}.site-picker{display:grid;gap:7px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.site-picker select{min-width:230px;min-height:47px;padding:11px 36px 11px 14px;color:var(--text);border:1px solid var(--line);border-radius:14px;background:rgba(8,18,31,.82)}
.page{display:none}.page.active{display:block}.live-card{min-height:610px;padding:24px;display:grid;grid-template-columns:minmax(440px,1.15fr) minmax(300px,.85fr);grid-template-rows:auto 1fr;gap:18px 32px;overflow:hidden;background:radial-gradient(circle at 18% 5%,rgba(246,189,19,.18),transparent 24rem),radial-gradient(circle at 76% 24%,rgba(41,147,255,.23),transparent 27rem),radial-gradient(circle at 35% 92%,rgba(37,208,111,.14),transparent 26rem),linear-gradient(145deg,rgba(13,28,47,.93),rgba(3,9,17,.95))}.live-card-head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px}.site-chips{display:flex;gap:8px}.site-chips>span{min-height:38px;padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(2,8,17,.52);font-size:12px;font-weight:800}
.flow-board{position:relative;min-height:485px;width:100%;max-width:570px;margin:auto}.flow-line{position:absolute;height:4px;overflow:hidden;border-radius:999px;transform-origin:left center;opacity:.25;background:rgba(148,163,184,.32)}.flow-line:after{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,transparent 0 18%,currentColor 31%,transparent 45%);background-size:88px 100%;animation:flow 1.45s linear infinite}.flow-line.active{opacity:.9;color:var(--green);background:rgba(37,208,111,.32);box-shadow:0 0 18px rgba(37,208,111,.3)}.flow-line.active:after{opacity:1}.flow-line.reverse:after{animation-direction:reverse}.flow-line.solar{width:170px;left:51%;top:137px;transform:rotate(68deg);color:var(--yellow);background:rgba(246,189,19,.32)}.flow-line.home{width:205px;left:23%;top:273px;transform:rotate(-34deg)}.flow-line.battery{width:135px;left:32%;top:338px;transform:rotate(-35deg)}.flow-line.grid{width:145px;left:61%;top:341px;transform:rotate(25deg);color:var(--pink);background:rgba(252,113,136,.3)}@keyframes flow{to{background-position:88px 0}}
.energy-node{position:absolute;width:108px;height:108px;padding:8px;display:grid;place-content:center;text-align:center;color:#fff;border:3px solid rgba(255,255,255,.25);border-radius:50%;background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.18),rgba(7,17,30,.9));box-shadow:0 18px 42px rgba(0,0,0,.36);transition:.2s ease}.energy-node:hover{transform:translateY(-3px);filter:brightness(1.12)}.energy-node>span{font-size:24px}.energy-node strong{margin:3px 0 0;font-size:19px}.energy-node small{color:#b8c4d1;font-size:10px;font-weight:800}.energy-node.solar{top:10px;left:calc(50% - 54px);border-color:var(--yellow);box-shadow:0 0 36px rgba(246,189,19,.32)}.energy-node.ev{top:150px;left:2%;border-color:var(--purple);box-shadow:0 0 36px rgba(217,78,232,.3)}.energy-node.home{top:150px;right:2%;border-color:var(--cyan);box-shadow:0 0 36px rgba(24,186,242,.32)}.energy-node.battery{top:310px;left:20%;border-color:var(--green);box-shadow:0 0 36px rgba(37,208,111,.3)}.energy-node.grid{top:310px;right:20%;border-color:var(--pink);box-shadow:0 0 36px rgba(252,113,136,.3)}
.live-details{display:grid;align-content:center;gap:15px}.today-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:18px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.115),rgba(255,255,255,.045))}.today-grid>div{display:grid;gap:5px;padding:5px}.today-grid span,.control-grid span{color:var(--muted);font-size:11px;font-weight:850;letter-spacing:.045em;text-transform:uppercase}.today-grid strong{font-size:clamp(22px,2vw,29px);letter-spacing:-.04em}.energy-state{padding:16px 18px;color:#d9ffea;border:1px solid rgba(37,208,111,.24);border-radius:17px;background:linear-gradient(135deg,rgba(21,128,72,.24),rgba(3,105,64,.13));font-weight:850;line-height:1.35}.control-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.control-grid>.control-card{min-height:112px;padding:13px 10px;display:grid;place-content:center;text-align:center;border:1px solid var(--line);border-radius:18px;background:var(--soft)}.control-grid strong{display:block;margin-top:11px;font-size:18px;overflow-wrap:anywhere}
.panel{padding:22px;margin-top:20px}.panel h2{margin:7px 0 14px;font-size:23px}.panel-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.panel-heading p{margin:0;color:var(--muted)}.support-grid,.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.support-grid .panel{margin-top:20px}dl{margin:0}dl>div,.data-row{padding:13px 0;display:flex;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.075)}dt,.data-label{color:var(--muted)}dd{margin:0;font-weight:800;text-align:right}.chart-bars,.tariff-bars{height:180px;padding-top:18px;display:grid;grid-template-columns:repeat(48,1fr);gap:3px;align-items:end;border-top:1px solid rgba(255,255,255,.075)}.chart-bar,.tariff-bar{min-height:3px;border-radius:4px 4px 0 0;background:var(--blue);opacity:.9}.chart-bar.solar{background:var(--yellow)}.chart-bar.battery{background:var(--green)}.chart-bar.ev{background:var(--purple)}.tariff-bar.current{background:var(--yellow)}
.stack{display:grid;gap:12px}.list-card{padding:17px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:15px}.list-card strong{display:block}.list-card small{display:block;margin-top:5px;color:var(--muted);line-height:1.45}.clickable{cursor:pointer}.clickable:hover{border-color:rgba(41,147,255,.42);background:linear-gradient(145deg,rgba(31,73,120,.72),rgba(5,12,22,.84))}.badge{display:inline-flex;padding:6px 10px;border-radius:999px;color:#cbe2ff;background:rgba(41,147,255,.14);font-size:11px;font-weight:850}.badge.success{color:#92f1ba;background:rgba(37,208,111,.14)}.badge.paused{color:#ffe08a;background:rgba(246,189,19,.14)}.badge.failed,.badge.error,.badge.blocked{color:#ffc2ce;background:rgba(252,113,136,.14)}.empty{padding:32px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:20px}.slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.slot-grid>div{padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--soft)}.slot-grid span{display:block;color:var(--muted);font-size:11px;font-weight:800}.slot-grid strong{display:block;margin-top:6px;font-size:18px}.portal-footer{width:min(1480px,calc(100% - 52px));margin:32px auto 0;padding:20px 0 30px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
@media(max-width:1120px){.app-layout{grid-template-columns:1fr}.sidebar{position:static}.account-card{display:none}.portal-nav{grid-template-columns:repeat(5,1fr)}.nav-button{justify-content:center}.live-card{grid-template-columns:minmax(400px,1.05fr) minmax(280px,.95fr)}}
@media(max-width:820px){.site-header,.shell,.portal-footer{width:min(100% - 24px,700px)}.site-header{height:76px}.login-layout{grid-template-columns:1fr;gap:24px;padding:3vh 0 7vh}.login-intro{text-align:center;margin:auto}.login-intro h1{font-size:clamp(38px,10vw,60px)}.login-intro>p{margin-inline:auto}.login-feature-grid{display:none}.app-layout{gap:14px}.sidebar{padding:7px;border-radius:18px;overflow-x:auto}.portal-nav{min-width:520px}.nav-button{display:grid;justify-items:center;gap:2px;padding:5px;font-size:10px}.nav-button span{width:28px;height:28px}.nav-button b{font-size:10px}.sidebar-foot{display:none}.workspace-header{align-items:stretch;flex-direction:column;padding-top:12px}.site-picker select{width:100%}.live-card{min-height:0;display:block;padding:16px;border-radius:22px}.flow-board{min-height:420px;max-width:390px;margin-top:8px}.flow-line.solar{width:132px;left:50%;top:124px}.flow-line.home{width:154px;left:28%;top:236px}.flow-line.battery{width:122px;left:31%;top:286px}.flow-line.grid{width:108px;left:59%;top:294px}.energy-node{width:94px;height:94px}.energy-node.solar{left:calc(50% - 47px)}.energy-node.ev{top:132px;left:0}.energy-node.home{top:132px;right:0}.energy-node.battery{top:270px;left:16%}.energy-node.grid{top:270px;right:16%}.live-details{gap:12px}.support-grid,.content-grid{grid-template-columns:1fr}.slot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.site-header,.shell,.portal-footer{width:calc(100% - 16px)}.site-header .brand small{display:none}.brand strong{font-size:17px}.brand img{width:40px;height:40px;border-radius:12px}.button-quiet{min-height:38px;padding:7px 10px}.login-card{padding:22px}.login-intro{padding:16px 8px 0}.login-intro h1{font-size:39px}.portal-nav{min-width:450px}.live-card-head{align-items:flex-start}.site-chips{display:grid;justify-items:end}.flow-board{transform:scale(.9);transform-origin:top center;margin-bottom:-35px}.today-grid{padding:12px}.control-grid{grid-template-columns:1fr}.control-grid>.control-card{min-height:78px}.list-card{grid-template-columns:1fr}.portal-footer{display:grid;gap:6px;text-align:center}.chart-bars,.tariff-bars{gap:2px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* App-aligned live experience */
body.portal-active{background:#020711 url("/map-energy/assets/map-energy-docs-bg.PNG") center/cover fixed no-repeat}
body.portal-active:before{opacity:1;background:linear-gradient(180deg,rgba(1,7,18,.1),rgba(1,7,18,.3) 48%,rgba(1,7,18,.82));mask-image:none}
body.portal-active .glass{background:linear-gradient(145deg,rgba(8,18,31,.62),rgba(2,8,17,.7));border-color:rgba(255,255,255,.16);box-shadow:0 20px 55px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.07)}
body.portal-active .sidebar{background:rgba(3,12,24,.66)}
body.portal-active .site-header{height:92px}
body.portal-active .brand small{color:rgba(255,255,255,.65)}
body.portal-active .sidebar{padding:12px 12px 10px}
body.portal-active .portal-nav{margin-top:0}
body.portal-active .workspace-header{min-height:115px;padding:15px 3px 0;align-items:center}
body.portal-active .site-picker{display:flex;flex-direction:row;align-items:center;gap:15px;white-space:nowrap}
body.portal-active .site-picker>span{color:var(--muted);font-size:13px;letter-spacing:0;text-transform:none}
body.portal-active .site-picker select{min-width:285px;min-height:54px;font-size:16px;font-weight:800}
body.portal-active .nav-button{min-height:55px}
body.portal-active .nav-button b{font-size:16px}
body.portal-active .nav-icon{width:22px;height:22px;display:block;color:#fff}
@media(min-width:1121px){
body.portal-active .brand{gap:15px}
body.portal-active .site-header{height:115px;padding-top:15px}
body.portal-active .brand img{width:75px;height:75px;object-fit:contain;border-radius:0;box-shadow:0 8px 24px rgba(41,147,255,.16)}
body.portal-active .brand strong{font-size:32px}
body.portal-active .brand small{font-size:18px}
body.portal-active .app-layout{grid-template-columns:258px minmax(0,1fr);grid-template-rows:115px auto;column-gap:28px;row-gap:40px;margin-top:-115px}
body.portal-active .workspace-header{grid-column:2;grid-row:1;padding:15px 140px 0 3px}
body.portal-active .site-picker{align-self:center}
body.portal-active .sidebar{grid-column:1;grid-row:2;top:18px;margin-top:0}
body.portal-active .workspace{grid-column:2;grid-row:2}
}
.live-card{min-height:680px;grid-template-columns:minmax(530px,1.15fr) minmax(330px,.85fr);background:linear-gradient(180deg,rgba(2,10,24,.08),rgba(2,9,20,.38));border-color:rgba(255,255,255,.2)}
.flow-board{width:min(100%,620px);min-height:0;aspect-ratio:1/1;margin:auto;isolation:isolate}
.flow-network{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
.flow-network g{opacity:0;transition:opacity .25s ease}
.flow-network g.active{opacity:1}
.flow-network line{vector-effect:non-scaling-stroke;stroke-linecap:round}
.flow-network .flow-base{stroke:rgba(205,216,229,.32);stroke-width:2}
.flow-network .flow-pulse{stroke:rgba(237,244,252,.94);stroke-width:6;stroke-dasharray:2 7 3 88;filter:drop-shadow(0 0 5px currentColor);animation:app-flow 1.15s linear infinite}
.flow-network g[data-from="solar"] line{stroke:#f6bd13}
.flow-network g[data-from="solar"] .flow-base{stroke-opacity:.35}
.flow-network g[data-from="battery"] line{stroke:#25d06f}
.flow-network g[data-from="battery"] .flow-base{stroke-opacity:.35}
.flow-network g[data-from="grid"] line{stroke:#c7d0db}
.flow-network g[data-from="grid"] .flow-base{stroke-opacity:.3}
@keyframes app-flow{to{stroke-dashoffset:-100}}
.energy-node{--node-glow:41,147,255;z-index:2;width:112px;height:112px;border-width:4px;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 24%,#243142 0,#07101c 55%,#01050b 100%);box-shadow:0 0 0 7px rgba(255,255,255,.04),0 0 22px rgba(var(--node-glow),.24);color:#fff}
.energy-node:hover{transform:translate(-50%,calc(-50% - 3px))}
.energy-node .node-icon{width:43px;height:43px;display:block;margin:0 auto 5px;color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.48))}
.node-reading{display:flex;align-items:baseline;justify-content:center;gap:3px;white-space:nowrap}
.energy-node strong{font-size:17px;font-weight:650;color:rgba(255,255,255,.76)}
.energy-node small{font-size:11px;color:rgba(255,255,255,.6)}
.energy-node.solar{--node-glow:246,189,19;top:14%;left:50%;color:var(--yellow)}
.energy-node.home{--node-glow:41,147,255;top:39%;left:83%;right:auto;color:var(--blue);border-color:var(--blue)}
.energy-node.grid{--node-glow:52,211,153;top:82%;left:70%;right:auto;bottom:auto;color:#34d399;border-color:#34d399}
.energy-node.battery{--node-glow:37,208,111;top:82%;left:30%;bottom:auto;color:var(--green)}
.energy-node.ev{--node-glow:217,78,232;top:39%;left:17%;color:var(--purple)}
.energy-node.is-active{box-shadow:0 0 0 8px rgba(var(--node-glow),.12),0 0 36px rgba(var(--node-glow),.52);animation:node-charge-pulse 1.55s ease-in-out infinite}
@keyframes node-charge-pulse{0%,100%{box-shadow:0 0 0 6px rgba(var(--node-glow),.09),0 0 24px rgba(var(--node-glow),.34)}50%{box-shadow:0 0 0 11px rgba(var(--node-glow),.15),0 0 46px rgba(var(--node-glow),.68)}}
.today-grid{background:rgba(3,11,23,.68);backdrop-filter:blur(22px);border-color:rgba(255,255,255,.2)}
.today-grid span,.control-grid span{color:rgba(237,243,251,.72)}
.today-grid strong{display:flex;align-items:baseline;gap:4px;color:#fff}
.today-grid strong b{font:inherit;font-size:inherit;letter-spacing:inherit}
.today-grid strong small{color:rgba(255,255,255,.72);font-size:12px;font-weight:750;letter-spacing:0;text-transform:none}
.summary-metric{display:flex!important;align-items:flex-start;gap:11px;text-align:left}
.summary-metric>svg{width:25px;height:25px;flex:0 0 auto;margin-top:1px}
.summary-metric>div{display:grid;gap:5px;min-width:0}
.summary-metric.solar>svg{color:#ffad21}.summary-metric.battery>svg{color:#2bd16f}.summary-metric.import>svg{color:#e4e9ef}.summary-metric.export>svg{color:#318fff}
.energy-state{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:70px;color:#fff;text-align:left;background:linear-gradient(135deg,rgba(var(--insight-rgb,41,147,255),.16),rgba(2,8,17,.64));border-color:rgba(var(--insight-rgb,41,147,255),.38)}
.energy-state svg{width:28px;height:28px;flex:0 0 auto;color:rgb(var(--insight-rgb,41,147,255))}
.energy-state span{font-size:15px}
.energy-state.blue{--insight-rgb:41,147,255}.energy-state.yellow{--insight-rgb:246,189,19}.energy-state.green{--insight-rgb:37,208,111}.energy-state.neutral{--insight-rgb:220,228,238}
.control-card{--card-rgb:145,161,181;background:linear-gradient(145deg,rgba(var(--card-rgb),.18),rgba(2,8,17,.67))!important;border-color:rgba(var(--card-rgb),.42)!important;box-shadow:0 8px 24px rgba(var(--card-rgb),.08)}
.control-card.green{--card-rgb:37,208,111}.control-card.blue{--card-rgb:41,147,255}.control-card.yellow{--card-rgb:246,189,19}.control-card.red{--card-rgb:252,113,136}.control-card.grey{--card-rgb:145,161,181}
.control-card span{display:flex;align-items:center;justify-content:center;gap:6px;color:rgba(255,255,255,.72);font-size:11px;text-transform:none}
.control-card span svg{width:17px;height:17px;color:rgb(var(--card-rgb))}
.control-card strong{color:#fff}

@media(max-width:1180px){.live-card{grid-template-columns:minmax(460px,1fr) minmax(300px,.82fr)}}
@media(max-width:820px){body.portal-active{background-position:center top}.sidebar{overflow:visible}.portal-nav{width:100%;min-width:0;grid-template-columns:repeat(5,minmax(0,1fr))}.nav-button{min-width:0}.live-card{display:block;min-height:0}.flow-board{width:min(100%,540px)}.energy-node{width:96px;height:96px}}
@media(max-width:1120px){body.portal-active .app-layout{grid-template-columns:1fr;grid-template-rows:auto auto auto}body.portal-active .workspace-header{grid-column:1;grid-row:1}body.portal-active .sidebar{grid-column:1;grid-row:2}body.portal-active .workspace{grid-column:1;grid-row:3}}
@media(max-width:480px){.portal-nav{min-width:0}.nav-button{padding-inline:2px}.nav-button b,body.portal-active .nav-button b{font-size:9px}.flow-board{width:100%}.energy-node{width:84px;height:84px}.energy-node .node-icon{width:34px;height:34px;margin-bottom:3px}.energy-node strong{font-size:14px}.energy-node small{font-size:9px}.control-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.control-grid>.control-card{min-height:96px;padding:10px 5px}.control-card span{font-size:10px}.control-card strong{font-size:14px}}

/* Supplier cards aligned with the mobile experience */
#supplierCards{align-items:start}
.supplier-card{--tariff-accent:255,145,43;min-height:390px;padding:24px;border-radius:26px;background:linear-gradient(145deg,rgba(var(--tariff-accent),.12),rgba(2,8,17,.73))!important;border-color:rgba(var(--tariff-accent),.3)!important;box-shadow:0 18px 46px rgba(0,0,0,.24)}
.supplier-card.export{--tariff-accent:35,198,238}
.tariff-heading{display:flex;align-items:center;gap:13px}.tariff-heading h2{margin:0 0 4px;font-size:25px}.tariff-heading p{margin:0;color:rgba(255,255,255,.58);font-size:14px;font-weight:650}.tariff-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;color:rgb(var(--tariff-accent));background:rgba(var(--tariff-accent),.16)}.tariff-icon svg{width:23px;height:23px}
.tariff-chart{margin-top:25px}.tariff-bars{height:140px;padding:0 2px;display:grid;grid-template-columns:repeat(48,minmax(2px,1fr));align-items:end;gap:3px;border:0}.tariff-bar{width:100%;min-height:0;border-radius:3px 3px 1px 1px;background:#3b82f6;opacity:.96}.tariff-bar.offpeak,.tariff-bar.negative{background:#2fd59b}.tariff-bar.mid{background:#3b82f6}.tariff-bar.peak{background:#fb6f75}.tariff-bar.export{background:#3b82f6}.tariff-bar.current{background:#f5b82e;box-shadow:0 0 10px rgba(245,184,46,.38)}
.tariff-bar.h0{height:0}.tariff-bar.h1{height:6px}.tariff-bar.h2{height:12px}.tariff-bar.h3{height:18px}.tariff-bar.h4{height:24px}.tariff-bar.h5{height:30px}.tariff-bar.h6{height:36px}.tariff-bar.h7{height:42px}.tariff-bar.h8{height:48px}.tariff-bar.h9{height:54px}.tariff-bar.h10{height:60px}.tariff-bar.h11{height:66px}.tariff-bar.h12{height:72px}.tariff-bar.h13{height:78px}.tariff-bar.h14{height:84px}.tariff-bar.h15{height:90px}.tariff-bar.h16{height:96px}.tariff-bar.h17{height:102px}.tariff-bar.h18{height:108px}.tariff-bar.h19{height:114px}.tariff-bar.h20{height:120px}
.tariff-axis{position:relative;height:17px;margin-top:7px;color:rgba(255,255,255,.48);font-size:12px}.tariff-axis span{position:absolute;top:0;transform:translateX(-50%)}.tariff-axis span:first-child{left:0;transform:none}.tariff-axis span:nth-child(2){left:25%}.tariff-axis span:nth-child(3){left:50%}.tariff-axis span:nth-child(4){left:75%}.tariff-axis span:last-child{right:0;transform:none}
.tariff-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}.tariff-footer>div{display:grid;gap:4px}.tariff-footer strong{font-size:25px;line-height:1}.tariff-footer small{color:rgba(255,255,255,.5);font-size:12px;font-weight:650}.tariff-footer .current-rate{text-align:right}.tariff-footer .current-rate strong{color:rgb(var(--tariff-accent));font-size:31px}.tariff-updated{margin-top:15px;color:rgba(255,255,255,.45);font-size:11px;text-align:right}
@media(max-width:820px){.supplier-card{min-height:0;padding:18px}.tariff-bars{gap:2px}.tariff-footer .current-rate strong{font-size:26px}}

/* Seven-day web history */
#historyList{max-width:1100px}.history-day{padding:22px 24px;border-radius:24px;background:linear-gradient(145deg,rgba(24,63,121,.2),rgba(2,8,17,.72))!important}.history-day-head{display:flex;align-items:center;gap:14px}.history-day-head>div{display:grid;gap:3px}.history-day-head strong{font-size:21px}.history-day-head small{color:rgba(255,255,255,.5);font-size:13px}.history-calendar,.history-chart-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;color:#3b8cff;border-radius:14px;background:rgba(41,125,255,.16)}.history-calendar svg{width:23px;height:23px}.history-chevron{margin-left:auto;color:rgba(255,255,255,.34);font-size:34px;font-weight:300}.history-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:17px}.history-metrics>div,.history-summary-grid>div{padding:13px 15px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:rgba(1,7,15,.42)}.history-metrics span,.history-summary-grid span{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.5);font-size:12px;font-weight:700}.history-metrics svg{width:18px;height:18px}.history-metrics strong,.history-summary-grid strong{display:block;margin-top:5px;font-size:19px}.history-metrics .import strong,.history-summary-grid .import strong{color:#ff922e}.history-metrics .solar strong{color:#ffd21d}.history-metrics .export strong,.history-summary-grid .export strong{color:#32c8ef}.history-metrics .net strong{color:#fff}
.history-detail{padding:25px;border-radius:26px}.history-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.history-detail-head h2{margin:6px 0 4px;font-size:28px}.history-detail-head p{margin:0;color:rgba(255,255,255,.52)}.history-flow,.history-summary{margin-top:20px;padding:22px;border:1px solid rgba(255,145,43,.26);border-radius:24px;background:linear-gradient(145deg,rgba(255,145,43,.1),rgba(2,8,17,.6))}.history-summary{border-color:rgba(41,125,255,.24);background:linear-gradient(145deg,rgba(41,125,255,.09),rgba(2,8,17,.6))}.history-section-title{display:flex;align-items:center;gap:13px}.history-section-title>div{display:grid;gap:3px}.history-section-title strong{font-size:21px}.history-section-title small{color:rgba(255,255,255,.5)}.history-chart-icon{color:#ff922e;background:rgba(255,145,43,.16);font-size:22px}.history-flow-chart{height:170px;margin-top:24px;display:grid;grid-template-columns:repeat(48,minmax(2px,1fr));align-items:center;gap:3px;border-bottom:1px solid rgba(255,255,255,.15)}.history-flow-chart>i{position:relative;height:160px;display:block}.history-flow-chart b{position:absolute;left:0;width:100%;min-height:0;border-radius:3px}.history-flow-chart .history-import{bottom:80px;background:#397ee8}.history-flow-chart .history-export{top:80px;background:#31c4e7}.history-flow-chart b.h0{height:0}.history-flow-chart b.h1{height:4px}.history-flow-chart b.h2{height:8px}.history-flow-chart b.h3{height:12px}.history-flow-chart b.h4{height:16px}.history-flow-chart b.h5{height:20px}.history-flow-chart b.h6{height:24px}.history-flow-chart b.h7{height:28px}.history-flow-chart b.h8{height:32px}.history-flow-chart b.h9{height:36px}.history-flow-chart b.h10{height:40px}.history-flow-chart b.h11{height:44px}.history-flow-chart b.h12{height:48px}.history-flow-chart b.h13{height:52px}.history-flow-chart b.h14{height:56px}.history-flow-chart b.h15{height:60px}.history-flow-chart b.h16{height:64px}.history-flow-chart b.h17{height:68px}.history-flow-chart b.h18{height:72px}.history-flow-chart b.h19{height:76px}.history-flow-chart b.h20{height:80px}.history-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
@media(max-width:820px){.history-metrics,.history-summary-grid{grid-template-columns:1fr 1fr}.history-day,.history-detail{padding:17px}.history-flow,.history-summary{padding:17px}.history-flow-chart{gap:2px}}

/* Automation cards aligned with the mobile automation and run-log views */
#automationList{max-width:1100px;gap:22px}.automation-config{display:grid;gap:18px}.smart-scheduling-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:24px;border:1px solid rgba(211,48,232,.3);border-radius:28px;background:linear-gradient(145deg,rgba(185,32,208,.18),rgba(2,8,17,.72));box-shadow:0 18px 42px rgba(0,0,0,.22)}.smart-scheduling-card h2,.automation-empty h2,.run-log h2{margin:0;color:#fff}.smart-scheduling-card h2{font-size:23px}.smart-scheduling-card p,.automation-empty p,.run-log-heading p{margin:5px 0 0;color:rgba(255,255,255,.55);font-size:14px;font-weight:650}.smart-scheduling-icon,.run-log-heading>span{width:50px;height:50px;display:grid;place-items:center;border-radius:50%;color:#dc36eb;background:rgba(201,39,222,.18)}.smart-scheduling-icon svg{width:27px;height:27px}.readonly-toggle{width:58px;height:32px;padding:3px;display:block;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:#596173}.readonly-toggle i{display:block;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.35);transition:transform .2s}.readonly-toggle.on{background:#318fff}.readonly-toggle.on i{transform:translateX(26px)}
.automation-empty{min-height:170px;padding:30px;display:grid;place-items:center;align-content:center;text-align:center;border:1px solid rgba(255,255,255,.09);border-radius:26px;background:rgba(1,7,15,.46)}.automation-empty>span{width:58px;height:58px;display:grid;place-items:center;margin-bottom:14px;color:#3b8cff;border-radius:50%;background:rgba(41,125,255,.16)}.automation-empty>span svg{width:29px;height:29px}.automation-empty.compact{min-height:100px}.automation-rules{display:grid;gap:12px}.automation-rule-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:17px;border:1px solid rgba(255,255,255,.09);border-radius:23px;background:linear-gradient(145deg,rgba(41,125,255,.1),rgba(2,8,17,.67))}.automation-rule-icon{width:43px;height:43px;display:grid;place-items:center;color:#3b8cff;border-radius:50%;background:rgba(41,125,255,.16)}.automation-rule-icon svg{width:22px;height:22px}.automation-rule-card>div{display:grid;gap:5px}.automation-rule-card strong{font-size:17px}.automation-rule-card small{color:rgba(255,255,255,.52);font-size:12px}
.run-log{padding:24px;border:1px solid rgba(41,125,255,.24);border-radius:28px;background:linear-gradient(145deg,rgba(31,93,185,.14),rgba(2,8,17,.7))}.run-log-heading{display:flex;align-items:center;gap:14px;margin-bottom:25px}.run-log-heading>span{color:#3b8cff;background:rgba(41,125,255,.17)}.run-log-heading svg{width:25px;height:25px}.run-log-heading h2{font-size:23px}.run-day+ .run-day{margin-top:22px}.run-day>header{display:flex;align-items:center;justify-content:space-between;padding:0 5px 9px}.run-day>header h3{margin:0;color:rgba(255,255,255,.72);font-size:16px}.run-day>header span{padding:4px 9px;color:rgba(255,255,255,.62);font-size:11px;font-weight:800;border-radius:12px;background:rgba(0,0,0,.3)}.run-day>div{display:grid;gap:10px}.automation-run-card{--run-rgb:38,208,148;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;padding:17px;border:1px solid rgba(var(--run-rgb),.25);border-radius:24px;background:linear-gradient(145deg,rgba(var(--run-rgb),.12),rgba(2,8,17,.72))}.automation-run-card.partial,.automation-run-card.blocked{--run-rgb:255,151,46}.automation-run-card.skipped{--run-rgb:244,205,45}.automation-run-card.error,.automation-run-card.failed{--run-rgb:247,75,91}.run-status-icon{width:43px;height:43px;display:grid;place-items:center;color:rgb(var(--run-rgb));font-size:21px;font-weight:900;border-radius:50%;background:rgba(var(--run-rgb),.16)}.run-copy{display:grid;gap:5px}.run-copy>strong{font-size:17px}.run-copy small{color:rgba(255,255,255,.58);font-size:13px;font-weight:650}.run-copy .run-summary{color:rgba(255,255,255,.44)}.run-time{margin-top:2px;color:rgba(255,255,255,.46);font-size:12px;font-weight:700}.automation-status{align-self:start;padding:7px 11px;color:rgb(var(--status-rgb,38,208,148));font-size:11px;font-weight:850;text-transform:capitalize;border:1px solid rgba(var(--status-rgb,38,208,148),.28);border-radius:16px;background:rgba(var(--status-rgb,38,208,148),.15)}.automation-status.paused,.automation-status.partial,.automation-status.blocked{--status-rgb:255,151,46}.automation-status.skipped{--status-rgb:244,205,45}.automation-status.error,.automation-status.failed{--status-rgb:247,75,91}
@media(max-width:700px){.smart-scheduling-card,.run-log{padding:18px}.smart-scheduling-card{grid-template-columns:auto 1fr}.smart-scheduling-card .readonly-toggle{grid-column:2}.automation-run-card{grid-template-columns:auto 1fr}.automation-run-card .automation-status{grid-column:2}.automation-rule-card{grid-template-columns:auto 1fr}.automation-rule-card .automation-status{grid-column:2}.run-log{border-radius:24px}}

/* Keep the site picker within narrow screens. */
@media(max-width:480px){body.portal-active .site-picker{width:100%;min-width:0}body.portal-active .site-picker select{min-width:0;flex:1;width:0}}

/* Shared app language: compact energy cards, clear sections and a mobile dock. */
:root {
  --blue: #3b82f6;
  --yellow: #fbbf24;
  --muted: #a3b0c2;
}
body { font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
a { color: #82b6ff; }
:focus-visible { outline: 3px solid #82b6ff; outline-offset: 4px; }
.hidden { display: none !important; }
.site-header, .shell, .portal-footer { width: min(1360px, calc(100% - 56px)); }
body.portal-active .site-header { height: 100px; padding-top: 0; gap: 16px; }
body.portal-active .brand { gap: 12px; }
body.portal-active .brand img { width: 46px; height: 46px; box-shadow: none; }
body.portal-active .brand strong { font-size: 21px; }
body.portal-active .brand small { font-size: 12px; }
.portal-access { margin-left: auto; padding: 7px 11px; font-size: 11px; font-weight: 700; color: #a3c8fa; border: 1px solid #3b82f633; border-radius: 20px; background: #3b82f615; }
body.portal-active .app-layout { display: grid; grid-template-columns: 196px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 24px 30px; margin-top: 4px; }
body.portal-active .workspace-header { grid-column: 2; grid-row: 1; min-height: 0; padding: 0; align-items: center; gap: 20px; }
.workspace-header h1 { font-size: clamp(28px, 2.7vw, 36px); margin: 7px 0; }
.workspace-header p { font-size: 13px; line-height: 1.5; max-width: 440px; }
.workspace-header h1:focus { outline: none; }
.header-meta { gap: 12px; font-size: 10px; flex-wrap: wrap; }
.workspace-tools { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
body.portal-active .site-picker { display: grid; gap: 6px; align-self: auto; min-width: 0; }
body.portal-active .site-picker > span { font-size: 10px; font-weight: 700; }
body.portal-active .site-picker select { width: 190px; min-width: 0; min-height: 42px; font-size: 13px; padding: 9px 28px 9px 12px; border-radius: 12px; }
.refresh-button { display: flex; align-items: center; gap: 6px; min-height: 42px; font-size: 12px; }
.refresh-button svg { width: 17px; height: 17px; }
body.portal-active .sidebar { grid-column: 1; grid-row: 1 / span 2; margin-top: 0; position: sticky; top: 20px; padding: 9px; border-radius: 24px; }
body.portal-active .workspace { grid-column: 2; grid-row: 2; }
.portal-nav { gap: 5px; }
body.portal-active .nav-button { min-height: 54px; padding: 9px 10px; border-radius: 16px; }
body.portal-active .nav-button b { font-size: 13px; }
.nav-button.active { background: #3b82f629; border-color: #3b82f644; color: #a3c8ff; }
.nav-button span { background: transparent; }
.live-card { min-height: 0; padding: 24px; grid-template-columns: minmax(0, 1.12fr) minmax(300px, 1fr); grid-template-rows: auto 1fr; gap: 18px 24px; border-radius: 28px; }
.live-title { margin: 5px 0 0; font-size: 20px; letter-spacing: -.03em; }
.live-card-head { margin: 0; }
.live-pill { font-size: 11px; padding: 6px 10px; }
.live-pill.offline { color: #ffcd84; background: #d3902020; border-color: #d3902055; }
.live-pill.offline i { background: #ffcd84; box-shadow: none; }
.flow-board { width: 100%; max-width: 510px; aspect-ratio: 1 / 1; min-height: 0; margin: auto; transform: none; }
.energy-node { width: clamp(76px, 7.2vw, 108px); height: clamp(76px, 7.2vw, 108px); padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.energy-node.solar { top: 14%; left: 50%; right: auto; transform: translate(-50%, -50%); }
.energy-node.ev { top: 39%; left: 17%; right: auto; transform: translate(-50%, -50%); }
.energy-node.home { top: 39%; left: 83%; right: auto; transform: translate(-50%, -50%); }
.energy-node.battery { top: 82%; left: 30%; right: auto; transform: translate(-50%, -50%); }
.energy-node.grid { top: 82%; left: 70%; right: auto; transform: translate(-50%, -50%); }
.energy-node:hover { filter: brightness(1.22); }
.energy-node .node-icon { width: 28px; height: 28px; margin: 0; }
.energy-node .node-reading { font-size: 15px; display: flex; align-items: baseline; gap: 3px; }
.energy-node strong { font-size: 15px; margin: 0; font-variant-numeric: tabular-nums; }
.energy-node .node-label { font-size: 10px; color: #fff; font-weight: 650; }
.energy-node small { font-size: 9px; }
.energy-node.grid.exporting { border-color: #25d094; box-shadow: 0 0 25px #25d09433; }
.flow-hint { color: var(--muted); font-size: 11px; text-align: center; margin: 12px 0 0; }
.section-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 750; }
.section-caption span:last-child { font-size: 10px; font-weight: 500; color: var(--muted); text-align: right; }
.live-details { gap: 12px; }
.today-grid { padding: 20px; gap: 24px 14px; border-radius: 25px; }
.today-grid .summary-metric { padding: 0; gap: 8px; }
.today-grid .summary-metric span { font-size: 11px; color: #d6e0ee; text-transform: none; letter-spacing: 0; }
.today-grid .summary-metric strong { font-size: 25px; }
.today-grid .summary-metric small { font-size: 11px; }
.energy-state { min-height: 58px; padding: 15px; font-size: 12px; line-height: 1.5; border-radius: 20px; }
.control-grid { gap: 8px; }
.control-grid > .control-card { min-height: 90px; border-radius: 20px; padding: 12px 6px; }
.control-card span { font-size: 11px; text-transform: none; letter-spacing: 0; }
.control-card strong { font-size: 15px; margin-top: 8px; }
.view-description, .view-note { margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.view-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.content-grid { gap: 18px; }
.panel { margin-top: 0; border-radius: 24px; }
.panel h2 { font-size: 20px; }
dl { font-size: 13px; }
dd { max-width: 65%; overflow-wrap: anywhere; }
.empty-state { padding: 38px 24px; text-align: center; }
.empty-state p { color: var(--muted); line-height: 1.6; }
.loading-state { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: #bad5ff; font-size: 12px; }
.loading-dot { width: 7px; height: 7px; border-radius: 50%; background: #60a5fa; animation: breathe 1s ease-in-out infinite alternate; }
@keyframes breathe { to { opacity: .3; } }
.notice-error { margin-bottom: 16px; font-size: 13px; }
.supplier-card { min-height: 0; border-radius: 25px; }
.tariff-heading h2 { font-size: 22px; }
.tariff-heading p { font-size: 12px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-size: 10px; color: var(--muted); }
.chart-legend span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #2fd59b; }
.chart-legend .legend-high::before { background: #fb6f75; }
.chart-legend .legend-now::before { background: #f5b82e; }
.tariff-bar.missing { background: transparent; }
.history-day { display: block; width: 100%; text-align: left; color: var(--text); font: inherit; }
.history-day-head strong { font-size: 19px; }
.history-metrics strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.history-metrics > div { padding: 12px; }
.history-detail .panel-heading { align-items: start; }
.automation-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.automation-overview > div { padding: 18px; display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 20px; background: #061226aa; }
.automation-overview strong { font-size: 26px; }
.automation-overview span { font-size: 11px; color: var(--muted); }
.smart-scheduling-card h2, .run-log-heading h2 { font-size: 20px; }
.automation-rule-card strong, .run-copy > strong { font-size: 15px; }
.automation-run-card { border-radius: 20px; }
.segmented { display: inline-flex; padding: 4px; gap: 4px; border-radius: 14px; background: #01081399; border: 1px solid var(--line); margin-bottom: 22px; }
.segmented button { border: 0; padding: 10px 14px; border-radius: 10px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; }
.segmented button[aria-pressed="true"] { background: #3b82f636; color: #fff; }
.chart-dialog { width: min(760px, calc(100% - 32px)); max-height: 85dvh; overflow: auto; padding: 26px; color: var(--text); background: #081322; border-radius: 26px; }
.chart-dialog::backdrop { background: #000a; backdrop-filter: blur(7px); }
.chart-dialog .panel-heading { align-items: start; }
.chart-dialog h2 { font-size: 24px; margin: 5px 0 10px; }
.chart-dialog p { font-size: 12px; line-height: 1.5; }
.node-timeline { margin-top: 28px; }
.timeline-svg { display: block; width: 100%; margin-block: 10px; }
.timeline-bar { fill: #3b82f6; }
.timeline-bar.solar { fill: #fbbf24; }
.timeline-bar.battery { fill: #25d094; }
.timeline-bar.ev { fill: #cc68ee; }
.timeline-bar.home { fill: #38c7e8; }
.chart-baseline { stroke: #ffffff30; stroke-width: 1; }
.chart-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.portal-footer nav { display: flex; gap: 20px; }
.portal-footer a { color: var(--muted); text-decoration: none; }
.portal-footer a:hover { color: #fff; }
@media(max-width: 1180px) {
  body.portal-active .app-layout { grid-template-columns: 160px minmax(0, 1fr); gap: 22px; }
  body.portal-active .workspace-header { align-items: flex-start; flex-direction: column; }
  .workspace-tools { width: 100%; }
  .live-card { grid-template-columns: minmax(0, 1fr); }
  .flow-board { max-width: 380px; }
  .energy-node { width: 86px; height: 86px; }
  .live-details { max-width: 560px; width: 100%; margin-inline: auto; }
}
@media(max-width: 760px) {
  .site-header, .shell, .portal-footer { width: calc(100% - 28px); }
  body.portal-active .site-header { height: 78px; gap: 10px; }
  .portal-access { display: none; }
  #headerSignOut { margin-left: auto; font-size: 12px; }
  body.portal-active .app-layout { display: block; margin-top: 8px; }
  body.portal-active .workspace-header { display: flex; padding: 0; margin-bottom: 20px; gap: 16px; }
  .workspace-header h1 { font-size: 28px; }
  .workspace-header .eyebrow { font-size: 9px; }
  .workspace-header p { font-size: 12px; }
  .workspace-tools { display: flex; }
  body.portal-active .site-picker { flex: 1; width: auto; }
  body.portal-active .site-picker select { width: 100%; flex: auto; }
  .refresh-button { min-height: 42px; }
  body.portal-active .sidebar { position: fixed; top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 20; width: min(540px, calc(100% - 24px)); padding: 5px; border-radius: 28px; background: #061226f2; box-shadow: 0 12px 40px #0009; backdrop-filter: blur(24px); }
  .portal-nav { display: grid; min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  body.portal-active .nav-button { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 58px; padding: 4px 1px; border-radius: 22px; }
  body.portal-active .nav-button b { font-size: 9px; }
  .nav-button span { width: 26px; height: 26px; }
  body.portal-active .nav-icon { width: 20px; height: 20px; }
  .nav-button.active { color: #8dbdff; background: #ffffff15; }
  .live-card { padding: 18px 14px; display: block; border-radius: 26px; }
  .live-card-head { margin-bottom: 14px; }
  .live-title { font-size: 18px; }
  .flow-board { width: 100%; max-width: 360px; margin: 0 auto 12px; }
  .energy-node { width: 76px; height: 76px; border-width: 3px; }
  .energy-node .node-icon { width: 23px; height: 23px; }
  .energy-node strong { font-size: 13px; }
  .energy-node .node-label { font-size: 9px; }
  .live-details { gap: 12px; }
  .today-grid { gap: 22px 12px; padding: 18px 14px; }
  .today-grid .summary-metric strong { font-size: 24px; }
  .control-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .control-grid > .control-card { min-height: 84px; }
  .content-grid { grid-template-columns: 1fr; }
  .portal-footer { margin-top: 24px; padding-bottom: calc(106px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; font-size: 11px; }
  body:not(.portal-active) .portal-footer { padding-bottom: 28px; }
  .automation-overview { gap: 8px; }
  .automation-overview > div { padding: 14px 11px; }
  .automation-overview strong { font-size: 23px; }
  .smart-scheduling-card .automation-status { grid-column: 2; justify-self: start; }
  .chart-dialog { margin: auto 0 0; width: 100%; max-width: none; max-height: 85dvh; border-radius: 26px 26px 0 0; padding: 24px 18px calc(28px + env(safe-area-inset-bottom)); }
  .chart-dialog::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 3px; background: #ffffff40; margin: -10px auto 20px; }
}
@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.portal-footer { position: relative; z-index: 1; }
.energy-node.grid { --node-glow: 252,113,136; border-color: #fc7188; }
.energy-node.grid.exporting { --node-glow: 37,208,148; border-color: #25d094; }
.energy-state span { font-size: 13px; line-height: 1.45; }
.automation-status { justify-self: start; }
html { scroll-padding-bottom: 110px; }
@media(max-width: 760px) {
  .flow-board { max-width: 310px; }
  .workspace-header > div > .eyebrow { display: none; }
}

.chart-legend .legend-rate::before { background: #3b82f6; }
/* Keep the mobile dock above the footer's safe-area padding. */
.shell { z-index: 2; }

.history-day-head > span:nth-child(2) { display: grid; gap: 3px; }
.history-metrics > span { padding: 12px; border: 1px solid #ffffff14; border-radius: 17px; background: #01070f6b; display: block; }

.control-card:focus-visible,.setting-option:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.control-card:not(:disabled):hover { filter: brightness(1.2); }
.control-card:disabled { cursor: default; }
.settings-status { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
.setting-dialog { width: min(520px, calc(100% - 32px)); }
.setting-dialog form { display: grid; gap: 18px; }
.setting-dialog .panel-heading,.setting-dialog p { margin: 0; }
.setting-dialog #settingDescription { font-size: 14px; color: var(--muted); }
.setting-options { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.setting-option { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--soft); cursor: pointer; }
.setting-option:has(input:checked) { border-color: var(--option-color); background: color-mix(in srgb, var(--option-color) 14%, transparent); }
.setting-option.green { --option-color: var(--green); }.setting-option.blue { --option-color: var(--blue); }.setting-option.yellow { --option-color: var(--yellow); }.setting-option.red { --option-color: var(--pink); }
.setting-option input { accent-color: var(--option-color); width: 18px; height: 18px; flex-shrink: 0; }
.setting-option strong { display: block; font-size: 16px; color: var(--option-color); }
.setting-option small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.reserve-editor { display: grid; gap: 20px; padding: 24px 18px; border: 1px solid #25d06f55; background: #25d06f0d; border-radius: 22px; }
.reserve-editor label { text-align: center; color: var(--muted); font-size: 13px; }
.reserve-editor output { display: block; font-size: 56px; font-weight: 800; color: var(--green); }
.reserve-editor input { width: 100%; accent-color: var(--green); min-height: 36px; }
.reserve-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
@media(max-width:480px) { .setting-dialog { width: 100%; } }

.live-header-actions { display: flex; gap: 10px; align-items: center; }
.power-perks-button { padding: 0; border: 1px solid #ffffff4d; width: 38px; height: 38px; border-radius: 9px; overflow: hidden; background: #081322; flex-shrink: 0; }
.power-perks-button img { width: 100%; height: 100%; object-fit: cover; }
.power-perks-button:focus-visible,.perks-event:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.perks-dialog { background: linear-gradient(140deg,#06132b,#17051f); }
.perks-banner { width: 100%; display: block; border: 1px solid #ff980059; border-radius: 22px; margin: 18px 0; }
.perks-totals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
.perks-totals>div { padding: 14px; border-radius: 18px; text-align: center; background: #0004; border: 1px solid var(--line); }
.perks-totals span { display: block; color: #ff9800; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.perks-totals strong { display: block; font-size: 20px; margin-top: 6px; }
.perks-section h3 { color: #48ddf2; font-size: 12px; letter-spacing: 1px; margin: 22px 0 10px; }
.perks-event { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; padding: 14px; margin: 10px 0; border: 1px solid var(--line); background: #0004; border-radius: 18px; color: var(--text); }
.perks-event img { width: 32px; height: 32px; object-fit: contain; }
.perks-event-label { flex: 1; font-size: 15px; font-weight: 650; }
.perks-badge { border-radius: 99px; font-size: 11px; font-weight: 800; padding: 6px 9px; color: var(--muted); background: #ffffff0b; }
.perks-badge.green { color: #38d996; background: #38d99620; }.perks-badge.red { color: #ff453a; background: #ff453a20; }
.perks-dialog #refreshPowerPerks { margin-top: 18px; }
.perks-confirm { border: 1px solid #ff980066; padding: 20px; border-radius: 18px; margin-top: 16px; background: #1d1724; }
.perks-confirm p { color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.perks-confirm-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Native-style energy detail sheets. */
.detail-periods,.detail-navigation,.detail-actions,.detail-summary,.detail-legend{display:flex;gap:12px;align-items:center;justify-content:space-between}
.detail-periods{justify-content:center;margin:16px 0}.detail-periods button[aria-pressed="true"]{background:#224a65;color:#fff;border-color:#58b8f2}.detail-navigation strong{text-align:center;font-size:1rem}.detail-navigation button{font-size:1.5rem;min-width:44px}.detail-actions{justify-content:center;margin:12px 0 18px}.detail-summary{align-items:stretch;flex-wrap:wrap;margin:14px 0}.detail-summary>div{flex:1;min-width:90px;background:#ffffff08;border:1px solid #ffffff12;border-radius:16px;padding:14px}.detail-summary span,.detail-estimate>span{display:block;color:#a9bacb;font-size:.8rem}.detail-summary strong{display:block;font-size:1.3rem;margin-top:7px}.detail-status{color:#b8d8ed;text-align:center}.detail-legend{flex-wrap:wrap;justify-content:flex-start;font-size:.75rem;color:#b1c2d2}.detail-svg{width:100%;height:auto;touch-action:pan-y;margin-top:12px}.detail-svg text{fill:#adbed1;font-size:11px}.detail-gridline{stroke:#ffffff12;stroke-width:1}.detail-line{fill:none!important;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.detail-solar{fill:#ffd566;stroke:#ffd566}.detail-home{fill:#62b4ff;stroke:#62b4ff}.detail-grid{fill:#d3d3d3;stroke:#d3d3d3}.detail-battery{fill:#55dfa2;stroke:#55dfa2}.detail-ev{fill:#bf5af2;stroke:#bf5af2}.detail-positive{fill:#69a9ff}.detail-negative{fill:#55dfa2}.detail-forecast{stroke:#78a8ff;stroke-dasharray:6 5}.detail-forecast-key{color:#8db6ff}.detail-reserve{stroke:#f2ae63;stroke-width:1.5;stroke-dasharray:6 5}.detail-cursor{stroke:#ffffff88;stroke-width:1;pointer-events:none}.detail-selector{display:block;color:#a9bacb;font-size:.8rem}.detail-selector input{display:block;width:100%;margin:12px 0;accent-color:#69b9ef}.detail-selection{min-height:48px;padding:12px;background:#ffffff08;border-radius:12px;font-size:.85rem}.detail-estimate{padding:16px;margin-top:18px;border:1px solid #55dfa233;border-radius:16px}.detail-estimate strong{display:block;font-size:1.3rem;margin:8px 0}.detail-estimate p,.detail-note{font-size:.8rem;color:#a9bacb;line-height:1.5}.detail-note{margin:14px 0}.detail-dot{stroke:none}
@media(max-width:480px){.detail-summary{gap:6px}.detail-summary>div{padding:10px;min-width:70px}.detail-summary strong{font-size:1rem}.detail-navigation strong{font-size:.85rem}.detail-periods,.detail-actions{gap:6px}.detail-periods .button,.detail-actions .button{padding:9px 14px}}

/* Supplier rates: native-style cards, pointer/touch selection, and signed prices. */
.supplier-page-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px}.supplier-page-heading h2{font-size:21px;margin:0 0 6px}.supplier-page-heading p{color:var(--muted);font-size:.85rem;margin:0}.supplier-rate-chart{position:relative;margin-top:26px;padding-top:20px}.supplier-svg{display:block;width:100%;touch-action:pan-y}.supplier-svg text{font-size:14px;fill:#a7b9ca}.supplier-zero{stroke:#ffffff44;stroke-width:1}.supplier-price{fill:#398ef4}.supplier-price.offpeak{fill:#2fd59b}.supplier-price.low{fill:#43bdc3}.supplier-price.peak{fill:#fb6f75}.supplier-slot.current .supplier-price,.supplier-slot.selected .supplier-price{fill:#f5c34e}.supplier-hit{fill:transparent;cursor:crosshair}.supplier-hover{position:absolute;top:0;left:0;right:0;text-align:center;font-size:.8rem;color:#ffe191}.supplier-legend{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:.7rem}.supplier-card .tariff-footer{align-items:flex-start}.supplier-card .tariff-footer .current-rate{max-width:60%}.supplier-card .tariff-footer small{line-height:1.5}.supplier-range{font-size:.8rem;color:var(--muted);margin-bottom:16px}.supplier-data-info{font-size:.78rem;color:var(--muted)}.supplier-data-info summary{cursor:pointer}.supplier-data-info p{line-height:1.5}.supplier-referral{grid-column:1/-1;padding:24px;border-color:#e7a14255}.supplier-referral h2{margin:0;font-size:24px}.supplier-referral p{color:var(--muted)}.supplier-referral-reward{display:flex;align-items:center;gap:14px;color:#ffb552;font-size:1.2rem}.supplier-referral-reward img{width:52px;height:52px;border-radius:12px}.supplier-referral .button{background:#ba651f;border-color:#e49048}.supplier-card{min-height:0}
@media(max-width:480px){.supplier-page-heading{align-items:flex-start}.supplier-page-heading h2{font-size:18px}.supplier-page-heading .chip{font-size:10px;white-space:normal;text-align:center}.supplier-card .tariff-footer strong{font-size:18px}.supplier-card .tariff-footer .current-rate strong{font-size:24px}.supplier-referral{padding:18px}.supplier-referral-reward{font-size:1.05rem}.supplier-legend{flex-wrap:wrap}}

.supplier-agile-results{display:grid;gap:16px}.supplier-rate-list{overflow-x:auto}.supplier-rate-list table{width:100%;border-collapse:collapse;font-size:.85rem}.supplier-rate-list th,.supplier-rate-list td{padding:10px 6px;border-bottom:1px solid #ffffff16;text-align:right}.supplier-rate-list th:first-child{text-align:left}.supplier-rate-list tbody th{font-weight:400;color:var(--muted)}

.detail-grid-import{fill:#d3d3d3}.detail-grid-export{fill:#3b82f6}.detail-area{opacity:.24;stroke:none}.detail-selected-point{fill:#fff;stroke:#0d1825;stroke-width:2;pointer-events:none}.detail-svg .detail-point-value{fill:#fff;font-size:16px;font-weight:700;paint-order:stroke;stroke:#0d1825;stroke-width:4px;stroke-linejoin:round;pointer-events:none}.detail-selected-time{display:block;text-align:center;color:var(--muted);font-size:.8rem;margin-bottom:8px}.detail-selected-metrics{display:flex;justify-content:space-between;gap:12px}.detail-selected-metrics>div{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px}.detail-selected-metrics span{color:var(--muted)}.detail-selected-metrics strong{font-size:1.1rem;white-space:nowrap}.detail-selector input{touch-action:pan-y}.detail-selection{margin-top:12px}
@media(max-width:480px){.detail-selected-metrics{flex-wrap:wrap}.detail-selected-metrics>div{flex-basis:100%}.reserve-scale{gap:8px;font-size:.75rem}}

@media(min-width:821px){#supplierCards>.supplier-card.import{grid-column:1}#supplierCards>.supplier-card.export{grid-column:2}}

/* History: native usage split and bidirectional half-hour bars. */
.history-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.history-controls label{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.history-controls input{color-scheme:dark;max-width:160px;padding:8px;border:1px solid #ffffff26;border-radius:10px;background:#ffffff08;color:inherit}
.history-split{display:block;text-align:left;margin-top:20px;padding-top:16px;border-top:1px solid #ffffff14}
.history-split-content{display:flex;align-items:center;gap:22px;margin-top:10px}
.history-split svg{width:120px;height:120px;flex-shrink:0}
.history-ring-track{fill:none;stroke:#ffffff14;stroke-width:14}
.history-ring-total{fill:#fff;font-size:21px;font-weight:700}
.history-ring-unit{fill:#aab2c1;font-size:12px}
.history-split-legend{display:grid;gap:9px;flex:1;max-width:420px}
.history-slice{display:grid;grid-template-columns:1fr auto 42px;gap:10px;align-items:center;font-size:12px}
.history-slice>span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff9f0a;margin-right:8px}
.history-slice.free>span::before{background:#30d158}.history-slice.smart>span::before{background:#af52de}.history-slice.offpeak>span::before{background:#32ade6}
.history-slice>b{color:#aab2c1;text-align:right}
.history-bars{display:block;width:100%;height:auto;min-height:150px;overflow:visible}
.history-bars text{fill:#aab2c1;font-size:20px}.history-zero{stroke:#ffffff30;stroke-width:1}
.history-hit{fill:transparent;stroke:transparent}.history-bars g{outline:none;cursor:crosshair}
.history-bars g.selected .history-hit,.history-bars g:focus-visible .history-hit{stroke:#fff;stroke-width:1.5;fill:#ffffff08}
.history-bars g rect:not(.history-hit){pointer-events:none}
.history-chart-legend{display:flex;flex-wrap:wrap;gap:8px 18px;color:#aab2c1;font-size:11px}
.history-slot-panel{border:1px solid #32ade635;background:#32ade609;border-radius:22px;padding:16px;margin-top:16px}
.history-slot-panel p{color:#aab2c1;font-size:12px}.history-footnote{font-size:12px;line-height:1.6}
.history-detail .history-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.history-summary-grid>div{min-width:0}
@media(max-width:480px){.history-split-content{gap:8px}.history-split svg{width:96px;height:96px}.history-slice{font-size:11px;gap:5px;grid-template-columns:1fr auto 30px}.history-controls{gap:8px}.history-controls .button{font-size:11px;padding:9px}.history-controls label{order:3;flex-basis:100%}.history-detail .history-summary-grid strong{font-size:17px}}

@media(max-width:480px){.history-bars text{font-size:25px}}

/* Automation editor shares the app's grouped trigger and action layout. */
.automation-toolbar,.automation-controls,.auto-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.automation-toolbar{margin-bottom:20px}.automation-toolbar p{margin:0}.automation-controls{grid-column:2/-1;justify-content:flex-end}
.auto-dialog{width:min(680px,calc(100vw - 24px));max-height:90dvh;padding:24px;border:1px solid #344354;border-radius:24px;color:var(--text);background:#111b28;overflow:auto}
.auto-dialog::backdrop{background:#020811bb;backdrop-filter:blur(6px)}
.auto-dialog form{display:grid;gap:20px}.auto-dialog fieldset{margin:0;padding:16px;border:1px solid #344354;border-radius:16px;min-width:0}
.auto-dialog legend{padding:0 8px;font-weight:700}.auto-dialog label{display:grid;gap:8px;margin:10px 0;font-size:.9rem;color:#c5cfda}
.auto-dialog input:not([type=checkbox]):not([type=range]),.auto-dialog select{box-sizing:border-box;width:100%;min-width:0;background:#0a1421;color:#f4f7fc;border:1px solid #3b4d62;border-radius:10px;padding:12px;font:inherit;color-scheme:dark}
.auto-dialog input[type=range]{width:100%;accent-color:#55aaff}.auto-dialog .auto-check{display:flex;align-items:center;gap:10px}.auto-check input{width:18px;height:18px;accent-color:#55aaff}
.auto-fields{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}.auto-fields>.auto-days,.auto-fields>.auto-check,.auto-fields>.muted{grid-column:1/-1}
.portal-switch{position:relative;display:inline-block;width:58px;height:32px}.portal-switch input{position:absolute;opacity:0;pointer-events:none}.portal-switch span{display:block;width:58px;height:32px;padding:3px;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:#596173;cursor:pointer;transition:background .2s}.portal-switch span:after{content:"";display:block;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.35);transition:transform .2s}.portal-switch input:checked+span{background:#318fff}.portal-switch input:checked+span:after{transform:translateX(26px)}.portal-switch input:focus-visible+span{outline:2px solid #7cc4ff;outline-offset:3px}.portal-switch input:disabled+span{opacity:.55;cursor:wait}.power-perks-automation-card{border-color:rgba(36,202,235,.3);background:linear-gradient(145deg,rgba(19,143,185,.18),rgba(2,8,17,.72))}.power-perks-automation-card .smart-scheduling-icon{color:#43d7ef;background:rgba(36,202,235,.16)}.power-perks-options{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}.power-perks-options label{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.68);font-size:13px;font-weight:700}.power-perks-options select{padding:7px 30px 7px 10px;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#071423}.power-perks-automation-card #powerPerksStatus{display:block;margin-top:8px}
.auto-dialog .auto-days{display:flex;flex-wrap:wrap;gap:10px}.auto-dialog .auto-days label{margin:4px 0}.auto-actions{display:grid;gap:16px}.auto-dialog output{font-size:1.3rem;font-weight:700}
.auto-dialog .muted{color:#a7b4c4;font-size:.85rem;line-height:1.5}.auto-footer{justify-content:flex-end}.auto-dialog button:disabled{opacity:.5}
@media(max-width:500px){.auto-dialog{padding:16px}.auto-fields{grid-template-columns:1fr}.automation-toolbar{align-items:stretch}.automation-toolbar>.button{width:100%}.automation-controls .button{flex:1}.auto-dialog .panel-heading{align-items:flex-start}.auto-dialog h2{font-size:1.25rem}}

.automation-rule-card>.automation-controls{display:flex}
.smart-scheduling-card #smartSchedulingStatus{display:block;margin-top:8px}
.automation-reuse-button{width:max-content;min-height:32px;margin-top:5px;padding:6px 12px;border-radius:10px;font-size:12px;box-shadow:none}
@media(max-width:700px){.smart-scheduling-card .portal-switch{grid-column:2}}

/* Keep the sidebar's navigation in one column until the mobile bottom bar takes over. */
@media (min-width: 761px) {
  body.portal-active .portal-nav { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; width: 100%; }
  body.portal-active .nav-button { display: flex; flex-direction: row; justify-content: flex-start; gap: 8px; padding-inline: 8px; text-align: left; }
  body.portal-active .nav-button span { flex-shrink: 0; width: 24px; height: 24px; }
  body.portal-active .nav-button b { overflow-wrap: anywhere; }
}
/* Size circles from the diagram, including narrow in-car browser windows. */
.flow-board .energy-node { width: clamp(76px, 23%, 108px); height: clamp(76px, 23%, 108px); }
@media (min-width: 761px) and (max-width: 1180px) {
  .flow-board { max-width: clamp(280px, 46vh, 380px); }
  .flow-board .energy-node { border-width: 3px; gap: 2px; }
  .flow-board .energy-node .node-icon { width: 23px; height: 23px; }
  .flow-board .energy-node strong { font-size: 13px; }
  .flow-board .energy-node .node-label { font-size: 9px; }
}
@media (max-width: 760px) {
  body.portal-active .nav-button b { max-width: 100%; overflow-wrap: anywhere; }
}

/* Explicit Home Assistant embed only. Shared flow markup and rendering stay intact. */
body.ha-embed { min-height: 0; background: transparent; }
body.ha-embed::before, .ha-embed .ambient, .ha-embed .site-header,
.ha-embed .portal-footer, .ha-embed .sidebar, .ha-embed .workspace-header,
.ha-embed .login-intro, .ha-embed .flow-hint,
.ha-embed .live-card-head > div:first-child:not(.workspace-tools),
.ha-embed .live-card-head > div:has(.live-title),
.ha-embed .control-grid, .ha-embed .control-grid + .settings-status,
.ha-embed .section-caption:has(+ .control-grid), .ha-embed #powerPerksButton { display: none !important; }
body.ha-embed .shell { width: 100%; min-height: 0; margin: 0; }
body.ha-embed .app-layout { display: block; margin: 0; }
.ha-embed .login-layout { display: block; min-height: 0; padding: 8px; }
.ha-embed .login-card { max-width: 440px; margin: auto; padding: 24px; }
.ha-embed .live-card { display: grid; grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 12px; border-radius: 20px; box-shadow: none; }
.ha-embed .live-card-head { flex-wrap: wrap; margin: 0; gap: 8px; }
.ha-embed .workspace-tools { width: auto; flex: 1; align-items: center; }
body.ha-embed .site-picker { flex: 1; width: auto; }
.ha-embed .site-picker > span, .ha-embed .refresh-button > span { display: none; }
body.ha-embed .site-picker select { width: 100%; min-width: 0; max-width: 280px; font-size: 12px; }
.ha-embed #updatedAt { width: 100%; color: var(--muted); font-size: 10px; }
.ha-embed .flow-board { width: 100%; max-width: 420px; min-height: 0; aspect-ratio: 1; margin: auto; }
.ha-embed .flow-board .energy-node { width: clamp(64px, 24%, 108px); height: clamp(64px, 24%, 108px); gap: 2px; }
.ha-embed .live-details { width: 100%; max-width: none; margin: 0; gap: 10px; min-width: 0; }
.ha-embed .today-grid { padding: 14px 10px; gap: 18px 8px; }
.ha-embed .summary-metric strong { font-size: 22px; }
.ha-embed .energy-state { padding: 12px; }
@media(min-width: 700px) {
  .ha-embed .live-card { grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); gap: 12px 24px; padding: 18px; }
  .ha-embed .flow-board { max-width: 480px; }
  .ha-embed .live-details { align-self: center; }
  .ha-embed #updatedAt { width: auto; }
}

/* Mappy hub shared by production and staging. */
body.portal-active .nav-button.mappy-nav{margin-top:20px;display:flex;flex-direction:column;gap:4px;width:100%;text-align:center;padding:16px;border-radius:24px;background:radial-gradient(circle at center,#163b70aa,transparent 75%)}
.mappy-nav img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 0 12px #3488ff77)}
.mappy-nav small{font-size:11px;color:var(--muted,#a3b3c9)}
.mappy-hero{text-align:center;margin:0 auto 24px}.mappy-hero img{width:210px;max-width:60%;height:auto}.mappy-hero h2{font-size:32px;margin:4px}.mappy-hero p{color:#a3b3c9}
.mappy-content{max-width:780px;margin:auto;display:grid;gap:18px}.mappy-content .panel{border-radius:26px;padding:24px}.mappy-content p{line-height:1.65}.mappy-setup{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}.mappy-badge{display:flex;align-items:center;flex-direction:column;gap:10px;text-align:center}.mappy-badge>span{font-size:28px;color:#66baff}.mappy-badge strong{text-transform:capitalize}.mappy-badge small{font-size:11px}.mappy-ok{color:#4bddaa}.mappy-no{color:#ff727d}.mappy-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.mappy-actions .button{flex:1}.mappy-content details{margin-top:20px}.mappy-content summary{cursor:pointer;color:#6bd8ff}
#mappyExportDialog{width:min(560px,calc(100% - 32px));border:1px solid #416394;border-radius:26px;background:#101c31;color:white;padding:12px}#mappyExportDialog::backdrop{background:#000b}#mappyExportDialog input{display:block;width:100%;margin-top:10px;padding:14px;border-radius:14px;background:#081323;color:white;border:1px solid #416394}
@media(max-width:700px){body.portal-active .nav-button.mappy-nav{margin-top:10px;padding:8px;flex-direction:row;justify-content:center}.mappy-nav img{width:52px;height:52px}.mappy-nav small{display:none}.mappy-setup{grid-template-columns:repeat(2,1fr)}.mappy-hero img{width:160px}}

/* Match the app's separate grid connection and battery grid-charging markers. */
.energy-node .grid-status-marker { position:absolute; top:-6px; left:-6px; width:29px; height:29px; display:grid; place-items:center; border:2px solid #fff; border-radius:50%; color:#fff; background:#ef4444; box-shadow:0 0 12px #ef444480; z-index:4; }
.energy-node .grid-status-marker[hidden] { display:none; }
.energy-node .grid-status-marker svg { width:20px; height:20px; }