/* HELIO - panel domu z energia (demo, dane przykladowe). Motyw: sand + graphite + lime / amber */
:root{
  --bg:#F2ECE0; --bg2:#E9E0CF; --card:#FFFCF5; --card2:#FBF6EB; --line:#E3D8C3;
  --ink:#1B1D1A; --ink2:#3A3D37; --muted:#68635A; --faint:#A39C8E;
  --graph:#1E211E; --graph2:#2B2F2B; --on-graph:#F2ECE0; --on-graph-m:#B9B3A6;
  --lime:#C4F23A; --lime-d:#9CCB12; --lime-ink:#3F5700;
  --amber:#F4A11C; --amber-l:#FFE3A8; --amber-ink:#7A4800;
  --coral:#EC6A4A; --coral-ink:#A93A20; --red:#C8432B; --red-l:#FBD9CF;
  --violet:#7E62F2; --violet-ink:#5A3FD0; --grid:#3A3D37;
  --r:22px; --r-s:14px;
  --sh:0 1px 0 rgba(255,255,255,.8) inset, 0 14px 30px -22px rgba(70,45,10,.45), 0 2px 6px -3px rgba(70,45,10,.12);
  --fd:"Space Grotesk","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --fb:"Manrope","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:14.5px;line-height:1.35;-webkit-font-smoothing:antialiased;overflow:hidden;
  background-image:radial-gradient(1200px 500px at 85% -10%,#FBE6BC 0%,transparent 60%),radial-gradient(900px 500px at -10% 110%,#E6EFC9 0%,transparent 55%)}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-radius:10px}
.num{font-family:var(--fd);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
svg{display:block}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:78px 1fr;grid-template-rows:66px minmax(0,1fr);height:100vh;height:100dvh}
.rail{grid-row:1/3;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 0;background:var(--graph);color:var(--on-graph-m);z-index:5;overflow-y:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.logo{width:46px;height:46px;border-radius:15px;background:var(--lime);display:grid;place-items:center;margin-bottom:6px;color:var(--graph);flex:none}
.logo svg{width:26px;height:26px}
.nav{width:66px;min-height:56px;flex:none;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:700;position:relative;transition:background .2s var(--ease),color .2s var(--ease)}
.nav .ic{width:20px;height:20px}
.nav:hover{background:var(--graph2);color:var(--on-graph)}
.nav.on{background:var(--lime);color:var(--graph)}
.nav .dot{position:absolute;top:6px;right:11px;width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 2px var(--graph)}
.nav.on .dot{box-shadow:0 0 0 2px var(--lime)}

.top{display:flex;align-items:center;gap:10px;padding:0 18px 0 20px;min-width:0}
.brand{display:flex;flex-direction:column;min-width:0}
.brand b{font-family:var(--fd);font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.brand span{font-size:12px;color:var(--muted);white-space:nowrap}
.live{flex:1;display:flex;gap:8px;justify-content:center;min-width:0}
.top>.live{margin:0 auto}
.chip{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--card);box-shadow:var(--sh);white-space:nowrap;min-height:44px;flex:none;text-align:left}
.chip i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.chip i .ic{width:16px;height:16px}
.chip small{display:block;font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;line-height:1}
.chip b{font-family:var(--fd);font-size:15px;font-variant-numeric:tabular-nums;line-height:1.15}
.c-pv i{background:var(--amber);color:var(--graph)} .c-home i{background:var(--graph);color:var(--lime)}
.c-bat i{background:var(--lime);color:var(--graph)} .c-grid i{background:var(--bg2);color:var(--ink)}
.c-open i,.c-alarm i{background:var(--graph);color:var(--lime)}
.chip.ok{background:#DDF3A6;color:var(--lime-ink)} .chip.warn{background:var(--amber-l);color:var(--amber-ink)} .chip.bad{background:var(--red);color:#fff}
.chip.ok small,.chip.warn small,.chip.bad small{color:inherit;opacity:.85}
.badge{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:var(--graph);color:var(--lime);white-space:nowrap}
.clock{font-family:var(--fd);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;line-height:1;white-space:nowrap}
.clock small{display:block;font-family:var(--fb);font-size:11px;color:var(--muted);font-weight:600}
.btn-reset{min-height:44px;padding:0 14px;border-radius:14px;background:var(--graph);color:var(--on-graph);font-weight:700;display:flex;align-items:center;gap:8px;flex:none}
.btn-reset:active{transform:scale(.96)}
.btn-reset .ic{width:18px;height:18px;color:var(--lime)}

.main{padding:4px 18px 18px 14px;min-height:0;overflow:auto;display:flex;flex-direction:column}
.view{display:none;gap:14px;min-height:0}
.view.on{display:grid;flex:1 1 0;min-height:600px;animation:vin .28s var(--ease)}
.view.pg.on{display:block;flex:none;min-height:0}
@keyframes vin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.banner-wrap{display:grid;gap:8px;padding:0 0 10px;flex:none}
.banner-wrap:empty{display:none}

/* ---------- komponenty domu (swiatla, rolety, ogrzewanie, czujniki) ---------- */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;align-items:start}
.span12{grid-column:span 12}.span7{grid-column:span 7}.span5{grid-column:span 5}.span6{grid-column:span 6}
.sec{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px 16px;min-width:0}
.sh{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-family:var(--fd);font-size:17px;font-weight:700;letter-spacing:-.01em}
.sh .ic{color:var(--lime-ink)}
.sh .r{margin-left:auto;font-family:var(--fb);font-size:13px;font-weight:700;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.tiles.w{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.tiles.s{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tile{background:var(--bg);border-radius:var(--r-s);padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.tile.on{background:#EEF8C8}
.tile.warn{background:var(--amber-l)}
.tile.bad{background:var(--red-l)}
.tn{font-weight:800;font-size:15px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.tn small{font-weight:600;color:var(--muted);font-size:12px}
.row{display:flex;gap:8px;align-items:stretch}
.row>*{flex:1}

.b{min-height:48px;min-width:48px;padding:0 12px;border-radius:14px;background:var(--card);border:2px solid var(--line);font-weight:800;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;line-height:1.1}
.b:hover{border-color:var(--faint)}
.b.sel,.b[aria-pressed=true]{background:var(--graph);border-color:var(--graph);color:var(--lime)}
.b.lg{min-height:56px;font-size:16px}
.b.dark{background:var(--graph);border-color:var(--graph);color:var(--on-graph)}
.b.lime{background:var(--lime);border-color:var(--lime);color:var(--graph)}
.b.red{background:var(--red);border-color:var(--red);color:#fff}
.b.pm{flex:0 0 52px;font-size:22px;font-family:var(--fd)}
.val{flex:1.2;display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;min-width:64px;text-align:center}
.val small{font-family:var(--fb);font-size:11px;color:var(--muted);font-weight:700;display:block}
.bar{height:8px;border-radius:99px;background:var(--bg2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--lime-d);border-radius:99px}
.bar.low i{background:var(--coral)}
.tag{display:inline-block;padding:3px 9px;border-radius:99px;font-size:12px;font-weight:800;background:var(--bg2);color:var(--muted)}
.tag.ok{background:#DDF3A6;color:var(--lime-ink)}
.tag.open{background:var(--amber);color:var(--graph)}
.tag.bad{background:var(--red);color:#fff}
.st{font-size:12.5px;font-weight:700;color:var(--muted)}
.st.warn{color:var(--amber-ink)}.st.bad{color:var(--red)}

.banner{display:flex;align-items:center;gap:12px;padding:6px 6px 6px 16px;border-radius:var(--r-s);font-weight:800;background:var(--amber-l);color:var(--amber-ink);min-height:52px}
.banner.bad{background:var(--red);color:#fff}
.banner span{flex:1}
.banner .b{min-height:44px}

.list{display:grid;gap:8px}
.li{display:flex;gap:10px;align-items:center;background:var(--bg);border-radius:var(--r-s);padding:8px 12px;min-height:44px}
.li .t{font-family:var(--fd);font-weight:600;color:var(--muted);font-size:13px;min-width:44px}
.li.warn{background:var(--amber-l)}.li.alert{background:var(--red-l)}
.li span.x{flex:1}
.logbox{max-height:520px;overflow:auto;padding-right:2px}
.rule{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:var(--r-s);padding:8px 8px 8px 12px}
.rule>span{flex:1;font-weight:700}
.rule small{display:block;color:var(--muted);font-weight:600}
.rule .b{flex:0 0 96px}

/* ---------- karty energii ---------- */
/* ---------- tiles ---------- */
.ecard{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;position:relative}
.ecard.dark{background:var(--graph);color:var(--on-graph)}
.ecard.dark .tt,.ecard.dark .mut{color:var(--on-graph-m)}
.ecard.limey{background:var(--lime);color:var(--graph)}
.ecard.limey .tt,.ecard.limey .mut{color:#3B4A10}
.th{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;min-height:24px}
.tt{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px}
.tt .ic{width:16px;height:16px}
.mut{color:var(--muted)}
.pill{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--bg2);color:var(--ink2);white-space:nowrap}
.pill.lime{background:var(--lime);color:var(--graph)} .pill.amber{background:var(--amber);color:var(--graph)}
.pill.coral{background:#FBD9CF;color:var(--coral-ink)} .pill.dk{background:var(--graph2);color:var(--lime)}
.hero{font-family:var(--fd);font-weight:600;font-size:46px;line-height:.95;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.hero small{font-size:.42em;font-weight:500;letter-spacing:0;margin-left:3px}
.mid{font-family:var(--fd);font-weight:600;font-size:26px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mid small{font-size:.5em;font-weight:500;margin-left:2px}
.lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.erow{display:flex;align-items:center;gap:10px}
.grow{flex:1;min-height:0;min-width:0}
.chart{flex:1;min-height:0;position:relative}
.chart svg{position:absolute;inset:0;width:100%;height:100%}
.stats{display:grid;gap:8px}
.stat{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-s);padding:9px 11px;min-width:0}
.ecard.dark .stat{background:var(--graph2);border-color:#3A3F3A}
.stat .lbl{font-size:10px}
.stat .v{font-family:var(--fd);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.stat .v small{font-size:12px;font-weight:500;margin-left:2px;color:var(--muted)}
.ecard.dark .stat .v small{color:var(--on-graph-m)}
.ex{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--amber-ink);background:#FCE7C2;border-radius:6px;padding:2px 6px}
.ecard.dark .ex{background:#3B3020;color:var(--amber-l)}
/* controls */
.seg{display:inline-flex;background:var(--bg2);border-radius:14px;padding:3px;gap:2px}
.seg button{min-height:38px;padding:0 12px;border-radius:11px;font-weight:700;font-size:12.5px;color:var(--ink2);transition:background .18s var(--ease),color .18s var(--ease)}
.seg button.on{background:var(--graph);color:var(--lime)}
.ecard.dark .seg{background:var(--graph2)} .ecard.dark .seg button{color:var(--on-graph-m)} .ecard.dark .seg button.on{background:var(--lime);color:var(--graph)}
.seg.full{display:flex} .seg.full button{flex:1;padding:0 6px}
.rb{width:44px;height:44px;border-radius:14px;background:var(--bg2);display:grid;place-items:center;font-size:22px;font-weight:600;transition:transform .12s var(--ease),background .15s}
.rb:active{transform:scale(.92)}
.ecard.dark .rb{background:var(--graph2);color:var(--on-graph)}
.sw{position:relative;width:52px;height:30px;border-radius:999px;background:#D6CCB8;flex:none;transition:background .2s var(--ease)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:transform .2s var(--ease)}
.sw.on{background:var(--graph)} .sw.on::after{transform:translateX(22px);background:var(--lime)}
.swrow{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;width:100%;text-align:left;padding:4px 0}
.swrow+.swrow{border-top:1px solid var(--line)}
.swrow .t{font-weight:700} .swrow .d{font-size:12px;color:var(--muted)}
/* ---------- flow diagram ---------- */
.flowbox{flex:1;min-height:0;position:relative}
.flowbox svg{position:absolute;inset:0;width:100%;height:100%}
.fl-base{fill:none;stroke:#E6DCC8;stroke-width:12;stroke-linecap:round}
.fl{fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:1 15;animation:dash var(--d,2s) linear infinite;transition:opacity .3s, stroke-width .3s}
.fl.off{opacity:0}
.fl.rev{animation-direction:reverse}
@keyframes dash{to{stroke-dashoffset:-32}}
.nd circle.bg{fill:var(--card);stroke:var(--line);stroke-width:2}
.nd text{font-family:var(--fd);font-variant-numeric:tabular-nums}
.nd .v{font-size:19px;font-weight:600;fill:var(--ink)}
.nd .l{font-size:11px;font-weight:700;fill:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-family:var(--fb)}
.hub circle{fill:var(--graph)}
.ring-pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.5}to{transform:scale(1.5);opacity:0}}
/* ---------- overview ---------- */
#v-overview{grid-template-columns:1.12fr 1.12fr 1fr 1fr;grid-template-rows:1.05fr 1fr .9fr;
  grid-template-areas:"flow flow pv pv" "flow flow hp bat" "price bill home ev"}
.a-flow{grid-area:flow}.a-pv{grid-area:pv}.a-hp{grid-area:hp}.a-bat{grid-area:bat}.a-price{grid-area:price}.a-bill{grid-area:bill}.a-home{grid-area:home}.a-ev{grid-area:ev}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1;min-height:0}
.qb{border-radius:16px;background:var(--card2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:9px 10px;min-height:44px;text-align:left;transition:background .2s var(--ease),transform .12s var(--ease),color .2s}
.qb:active{transform:scale(.97)}
.qb .ic{width:20px;height:20px}
.qb b{font-size:12.5px;line-height:1.1} .qb span{font-size:11px;color:var(--muted)}
.qb.on{background:var(--graph);color:var(--lime);border-color:var(--graph)} .qb.on span{color:var(--on-graph-m)}
.socbar{height:14px;border-radius:99px;background:var(--bg2);overflow:hidden;position:relative}
.socbar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--lime-d),var(--lime));border-radius:99px;transition:width .6s var(--ease)}
.socbar em{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--graph)}
/* ---------- views grids ---------- */
#v-pv{grid-template-columns:1.55fr 1fr;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"kpi kpi" "chart cmp"}
#v-hp{grid-template-columns:1fr 1.1fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"main hyd curve" "main use rec"}
#v-bat{grid-template-columns:1fr 1.55fr;grid-template-rows:1.1fr 1fr;grid-template-areas:"main chart" "main stats"}
#v-price{grid-template-columns:1.5fr 1fr;grid-template-rows:1.12fr 1fr;grid-template-areas:"chart side" "cmp side"}
#v-ev{grid-template-columns:1fr 1.45fr;grid-template-rows:1.1fr 1fr;grid-template-areas:"main chart" "main stats"}
.g-flow{grid-area:flow}.g-chart{grid-area:chart}.g-kpi{grid-area:kpi}.g-cmp{grid-area:cmp}.g-main{grid-area:main}.g-hyd{grid-area:hyd}.g-curve{grid-area:curve}.g-use{grid-area:use}.g-rec{grid-area:rec}.g-stats{grid-area:stats}.g-side{grid-area:side}.g-rooms{grid-area:rooms}.g-cam{grid-area:cam}.g-lights{grid-area:lights}.g-blinds{grid-area:blinds}.g-gate{grid-area:gate}.g-list{grid-area:list}.g-feed{grid-area:feed}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.kpis .ecard{padding:12px 16px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;font-weight:600;color:var(--ink2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.cmpcol{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.arr{border-radius:16px;padding:10px 12px;background:var(--card2);border:1px solid var(--line)}
.arr h4{margin:0;font-family:var(--fd);font-size:16px}
.arr p{margin:2px 0 0;font-size:11.5px;color:var(--muted)}
.bars{display:flex;flex-direction:column;gap:9px}
.cbar .erow{justify-content:space-between;font-size:12px;font-weight:700}
.cbar .tr{height:10px;border-radius:99px;background:var(--bg2);display:flex;gap:2px;overflow:hidden;margin-top:4px}
.cbar .tr i{display:block;height:100%;border-radius:99px;transition:width .6s var(--ease)}
.dual{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px}
.dual .tr{margin-top:0}

.modes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.modes button{min-height:52px;border-radius:14px;background:var(--graph2);color:var(--on-graph-m);font-size:11px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:background .18s,color .18s}
.modes button .ic{width:18px;height:18px}
.modes button.on{background:var(--lime);color:var(--graph)}
.ecard:not(.dark) .modes button{background:var(--bg2);color:var(--ink2)}
.ecard:not(.dark) .modes button.on{background:var(--graph);color:var(--lime)}
.alist{overflow:auto;flex:1;min-height:0;padding-right:4px}
.alist .swrow{padding:8px 0}
.alist .ico{width:40px;height:40px;border-radius:12px;background:var(--bg2);display:grid;place-items:center;flex:none}
.alist .swrow.act .ico{background:var(--lime)}
.alist .tx{flex:1;min-width:0}
.alist .st{font-size:11px;font-weight:700;color:var(--lime-ink)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--graph);color:var(--on-graph);padding:12px 18px;border-radius:14px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:opacity .25s var(--ease),transform .25s var(--ease);pointer-events:none;z-index:50;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast b{color:var(--lime)}
/* chart helpers */
.ax{font:600 10px var(--fb);fill:var(--muted)}
.ecard.dark .ax{fill:var(--on-graph-m)}
.gl{stroke:#E8DFCD;stroke-width:1}
.ecard.dark .gl{stroke:#343834}
.draw{stroke-dasharray:3000;stroke-dashoffset:3000;animation:draw 1.1s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.fi{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.spin{transform-box:fill-box;transform-origin:center;animation:spin 1.1s linear infinite}
.spin.stop{animation-play-state:paused}
@keyframes spin{to{transform:rotate(360deg)}}
.sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 4s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@keyframes grow{from{transform:scaleY(0)}}
.stats.fill .stat{display:flex;flex-direction:column;justify-content:space-between}
.stats.fill .stat .v{font-size:26px}

/* ---------- uzupelnienia ---------- */
.seg button{min-height:44px}
.stp{display:flex;align-items:center;gap:8px;margin-top:8px}
.stp .lbl{flex:1;min-width:0}
.stp .sv{font-family:var(--fd);font-size:18px;min-width:76px;text-align:center;font-variant-numeric:tabular-nums}
.ecard.dark .stp .sv{color:var(--on-graph)}
.mbar{height:6px;border-radius:99px;background:var(--bg2);overflow:hidden;margin-top:6px}
.mbar i{display:block;height:100%;background:var(--lime-d);border-radius:99px}
.ltiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
#v-energy{grid-template-columns:1.15fr 1fr;grid-template-rows:minmax(300px,1.1fr) minmax(220px,1fr) auto;grid-template-areas:"flow chart" "flow kpi" "loads loads"}
#v-energy.on{min-height:720px}
.g-loads{grid-area:loads}
.alist .swrow{padding:8px 0}
.sec .alist{max-height:none}
.logbox{max-height:420px}
.banner{min-height:46px}

@media (max-width:1400px){.brand{display:none}.top{gap:8px}.live{gap:6px}.chip{padding:4px 10px 4px 6px;gap:6px}.badge{font-size:10px;padding:7px 9px}.btn-reset{padding:0 12px}}
@media (max-width:1100px){
  .span7,.span5,.span6{grid-column:span 12}
  .brand,.badge{display:none}
  .view.on:not(.pg){display:flex;flex-direction:column;flex:none;min-height:0;height:auto}
  .view.on:not(.pg)>.ecard,.view.on:not(.pg)>.kpis{flex:none}
  #v-energy.on{min-height:0}
  .ecard{overflow:visible}
  .chart{flex:none;height:220px}
  .flowbox{flex:none;height:320px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpis .ecard:last-child{grid-column:1/3}
  .qgrid{min-height:150px}
  .modes{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hero{font-size:40px}
  .alist{overflow:visible}
  .tiles,.tiles.w{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
@media (max-width:760px){
  body{font-size:14px}
  .app{grid-template-columns:1fr;grid-template-rows:60px minmax(0,1fr) auto}
  .rail{grid-row:3;grid-column:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:4px 4px calc(4px + env(safe-area-inset-bottom));overflow:visible}
  .logo{display:none}
  .nav{width:auto;min-height:48px;font-size:10.5px}
  .nav .dot{right:calc(50% - 22px)}
  .top{padding:0 10px;gap:6px}
  .live,.btn-reset .t,.chip small,.c-open i,.c-alarm i{display:none}
  .top .chip{padding:0 12px}
  .chip b{font-size:13px}
  .clock{font-size:18px;margin-left:auto}
  .clock small{font-size:9.5px}
  .btn-reset{padding:0 12px}
  .main{padding:2px 10px 12px}
  .grid{gap:10px}
  .tiles,.tiles.w{grid-template-columns:1fr}
  .tiles.s{grid-template-columns:1fr 1fr}
  .toast{bottom:120px}
}
@media (max-width:420px){.cmpcol{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .draw{stroke-dashoffset:0}
}