:root{
  --bg:#020713;
  --text:#f3f8ff;
  --muted:#9fb6cf;
  --dim:#6d849b;
  --cyan:#18eaff;
  --cyan-soft:rgba(24,234,255,.18);
  --cyan-line:rgba(24,234,255,.30);
  --blue:#3687ff;
  --pink:#ff42da;
  --violet:#8d62ff;
  --orange:#ff9924;
  --orange2:#ff6d1d;
  --green:#55f49a;
  --red:#ff708a;
  --font:"Bahnschrift","Segoe UI Variable","Segoe UI",Inter,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  font-size:13px;
  background:
    radial-gradient(circle at 17% 20%,rgba(24,234,255,.13),transparent 25%),
    radial-gradient(circle at 82% 13%,rgba(255,66,218,.13),transparent 26%),
    linear-gradient(180deg,#050a16 0%,#020713 58%,#01040c 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(24,234,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,234,255,.024) 1px,transparent 1px);
  background-size:46px 46px;
  opacity:.42;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.40));
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 0 49%,rgba(255,255,255,.018) 50%,transparent 51% 100%);
  background-size:100% 7px;
  opacity:.08;
}
button,input,textarea,select{font:inherit}
a{text-decoration:none;color:inherit}
h1,h2,h3,p{margin:0}
.shell{
  max-width:1920px;
  margin:0 auto;
  padding:22px 26px 36px;
  position:relative;
}
.hud-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}
.hud-brand{display:flex;align-items:center;gap:13px}
.pulse-mark{
  color:var(--cyan);
  font-size:33px;
  line-height:1;
  text-shadow:0 0 20px rgba(24,234,255,.44);
}
.crumb{
  font-size:11px;
  color:#96e4ff;
  font-weight:650;
  margin-bottom:5px;
  opacity:.80;
}
h1{
  font-size:34px;
  line-height:1;
  font-weight:620;
  letter-spacing:-.04em;
  text-shadow:0 0 24px rgba(24,234,255,.13);
}
h2{font-size:18px;font-weight:620;line-height:1.1}
h3{font-size:15px;font-weight:620}
.hud-controls{
  display:grid;
  grid-template-columns:minmax(255px,1fr) 96px auto auto;
  gap:14px;
  min-width:630px;
  align-items:center;
}
.badge,.select,.input,.btn.ghost,.period-summary,.status-box,.info-grid label,.drawer-tabs a,.toast{
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.badge,.select,.input{
  min-height:46px;
  padding:11px 14px;
  border-radius:13px;
  border:1px solid var(--cyan-line);
  background:rgba(2,11,22,.18);
  color:#ecf9ff;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 18px rgba(24,234,255,.05);
}
.status-dot{
  display:inline-block;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 12px rgba(85,244,154,.7);
  margin-right:8px;
}
.badge{font-weight:620;white-space:nowrap}
.select:focus,.input:focus{
  border-color:rgba(24,234,255,.75);
  box-shadow:0 0 0 3px rgba(24,234,255,.12),0 0 20px rgba(255,66,218,.08);
}
select option{background:#071426;color:#f3f8ff}
.btn{
  min-height:46px;
  padding:11px 16px;
  border-radius:13px;
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-weight:650;
  cursor:pointer;
  color:var(--text);
  background:rgba(7,19,36,.34);
  transition:.14s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 20px rgba(24,234,255,.13)}
.btn:active{transform:translateY(0)}
.btn.ghost{border-color:var(--cyan-line);background:rgba(2,11,22,.18)}
.btn.orange{
  color:#1c0b00;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  box-shadow:0 0 22px rgba(255,109,29,.16);
}
.btn.full{width:100%}
.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
textarea.input{min-height:84px;resize:vertical}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}

/* EXACT HUD cockpit */
.cockpit{
  position:relative;
  display:grid;
  grid-template-columns:510px 1fr;
  gap:16px;
  min-height:520px;
  padding:22px;
  border:1px solid rgba(24,234,255,.20);
  border-radius:24px;
  background:rgba(2,11,22,.045);
  overflow:hidden;
  box-shadow:0 0 36px rgba(24,234,255,.045),0 0 60px rgba(255,66,218,.03);
}
.cockpit::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,var(--cyan),transparent 13%,transparent 87%,var(--cyan)) top/100% 1px no-repeat,
    linear-gradient(90deg,var(--cyan),transparent 13%,transparent 87%,var(--pink)) bottom/100% 1px no-repeat,
    linear-gradient(180deg,var(--cyan),transparent 22%,transparent 78%,var(--cyan)) left/1px 100% no-repeat,
    linear-gradient(180deg,var(--cyan),transparent 22%,transparent 78%,var(--pink)) right/1px 100% no-repeat;
  opacity:.62;
}
.cockpit::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 46%,rgba(24,234,255,.13),transparent 25%),
    linear-gradient(90deg,transparent 0 37%,rgba(24,234,255,.10) 37.12%,transparent 37.28% 100%),
    linear-gradient(90deg,transparent 0 44%,rgba(24,234,255,.055) 44.1%,transparent 44.2% 100%);
  opacity:.62;
}
.hud-corner{
  position:absolute;
  width:48px;height:48px;
  border-color:rgba(24,234,255,.55);
  pointer-events:none;
  z-index:2;
}
.hud-corner.tl{left:8px;top:8px;border-left:2px solid;border-top:2px solid}
.hud-corner.tr{right:8px;top:8px;border-right:2px solid;border-top:2px solid}
.hud-corner.bl{left:8px;bottom:8px;border-left:2px solid;border-bottom:2px solid}
.hud-corner.br{right:8px;bottom:8px;border-right:2px solid;border-bottom:2px solid}
.gauge-area,.right-panel{position:relative;z-index:3}
.gauge-area{
  display:grid;
  grid-template-rows:auto min-content 1fr;
  align-content:start;
  min-height:474px;
}
.gauge-area h2{font-size:20px;margin-bottom:8px}
.exact-gauge{
  width:318px;
  height:318px;
  margin:6px auto 10px;
  position:relative;
}
.exact-gauge::before{
  content:"";
  position:absolute;
  inset:-28px;
  border-radius:50%;
  background:
    conic-gradient(from 205deg,transparent 0 6%,rgba(24,234,255,.18) 11%,transparent 17%,transparent 55%,rgba(255,66,218,.12) 62%,rgba(255,109,29,.18) 75%,transparent 86%),
    radial-gradient(circle,transparent 50%,rgba(24,234,255,.09) 52%,transparent 54%,transparent 64%,rgba(24,234,255,.08) 66%,transparent 70%,transparent 76%,rgba(24,234,255,.04) 78%,transparent 81%);
  filter:drop-shadow(0 0 26px rgba(24,234,255,.32));
}
.exact-gauge::after{
  content:"";
  position:absolute;
  inset:19%;
  border-radius:50%;
  border:1px solid rgba(24,234,255,.22);
  box-shadow:inset 0 0 28px rgba(24,234,255,.09),0 0 18px rgba(255,66,218,.09);
}
.gauge-svg{width:100%;height:100%;display:block;overflow:visible}
.gauge-tech-ring{fill:none;transform-origin:120px 120px}
.ring-a{stroke:rgba(24,234,255,.18);stroke-width:1.7;stroke-dasharray:2 7}
.ring-b{stroke:rgba(24,234,255,.25);stroke-width:2.2;stroke-dasharray:44 12 4 13}
.ring-c{stroke:rgba(255,66,218,.20);stroke-width:1.2}
.ring-d{stroke:rgba(24,234,255,.18);stroke-width:1.1;stroke-dasharray:18 7}
.gauge-warm-arc{
  fill:none;
  stroke:url(#warmArcGrad);
  stroke-width:9.5;
  stroke-linecap:round;
  filter:drop-shadow(0 0 11px rgba(255,109,29,.52));
}
.gauge-bg{
  fill:none;
  stroke:rgba(24,234,255,.13);
  stroke-width:11;
  stroke-linecap:round;
  transform:rotate(-90deg);
  transform-origin:120px 120px;
}
.gauge-progress{
  fill:none;
  stroke:url(#gaugeGrad);
  stroke-width:11;
  stroke-linecap:round;
  stroke-dasharray:540;
  stroke-dashoffset:540;
  transform:rotate(-90deg);
  transform-origin:120px 120px;
  filter:url(#softGlow) drop-shadow(0 0 8px rgba(24,234,255,.95));
  transition:stroke-dashoffset .55s cubic-bezier(.2,.9,.18,1);
}
.gauge-inner{
  fill:rgba(1,8,17,.90);
  stroke:rgba(24,234,255,.18);
  stroke-width:1.1;
}
.gauge-ticks line{
  stroke:rgba(24,234,255,.24);
  stroke-width:1.05;
  stroke-linecap:round;
}
.gauge-ticks line.major{
  stroke:rgba(255,66,218,.62);
  stroke-width:1.9;
}
.gauge-value{
  font-size:50px;
  font-weight:520;
  letter-spacing:-.04em;
  fill:#f5fbff;
  text-anchor:middle;
  dominant-baseline:middle;
  filter:drop-shadow(0 0 8px rgba(24,234,255,.45));
}
.gauge-label{
  font-size:11.2px;
  fill:#bdddf5;
  text-anchor:middle;
  font-weight:470;
}
.gauge-scale{
  font-size:8px;
  fill:#dbeeff;
  text-anchor:middle;
  opacity:.92;
}
.gauge-scale.watt{fill:var(--cyan);font-size:7.6px}
.gauge-status{
  margin-top:8px;
  display:grid;
  gap:14px;
  max-width:390px;
}
.status-row{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:10px;
  align-items:center;
}
.mini-icon{
  width:25px;height:25px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cyan);
  border:1px solid rgba(24,234,255,.44);
  box-shadow:0 0 12px rgba(24,234,255,.15);
}
.status-row span:not(.mini-icon){
  display:block;
  color:#9fb6cf;
  font-size:12px;
}
.status-row strong{
  display:block;
  margin-top:3px;
  color:#e8f7ff;
  font-size:14px;
  font-weight:560;
}

/* right half: no blocks, just HUD stats */
.right-panel{
  display:grid;
  grid-template-rows:minmax(190px,auto) 1fr;
  gap:16px;
}
.kpi-line{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  min-height:190px;
  border-bottom:1px solid rgba(24,234,255,.16);
}
.metric-card{
  position:relative;
  padding:26px 28px 18px;
  display:grid;
  align-content:start;
  row-gap:8px;
}
.metric-card + .metric-card{
  border-left:1px solid rgba(24,234,255,.17);
}
.metric-card::before{
  content:"";
  position:absolute;
  top:18px;
  right:22px;
  width:82px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:.22;
}
.hud-icon{
  width:50px;height:50px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cyan);
  border:1px solid rgba(24,234,255,.58);
  background:rgba(1,15,28,.10);
  box-shadow:0 0 18px rgba(24,234,255,.16),inset 0 0 14px rgba(24,234,255,.08);
  font-size:24px;
  font-weight:520;
  margin-bottom:8px;
}
.metric-card h2{font-size:16px;color:#f2f8ff}
.metric-value{
  color:var(--orange);
  font-size:clamp(28px,2.25vw,42px);
  line-height:.92;
  font-weight:540;
  letter-spacing:-.04em;
  text-shadow:0 0 17px rgba(255,153,36,.25);
}
.metric-card p{
  color:var(--muted);
  font-size:13px;
  line-height:1.28;
}
.device-section{
  display:grid;
  align-content:start;
}
.section-title-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 0 10px;
}
.section-title-row h2{font-size:20px}
.section-title-row span{font-size:12px;color:#8fb6d2}
.device-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.empty-card{
  border:1px dashed rgba(24,234,255,.18);
  background:rgba(3,12,24,.06);
  color:var(--muted);
  padding:18px;
  border-radius:16px;
}
.device-card{
  position:relative;
  min-height:125px;
  padding:16px 20px;
  display:grid;
  grid-template-columns:78px minmax(260px,1fr) minmax(175px,.42fr) 26px;
  gap:18px;
  align-items:center;
  border:1px solid rgba(24,234,255,.20);
  border-radius:18px;
  background:rgba(3,12,24,.055);
  box-shadow:0 0 24px rgba(24,234,255,.045);
  overflow:hidden;
}
.device-card::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,var(--cyan),transparent 20%,transparent 80%,var(--cyan)) top/100% 1px no-repeat,
    linear-gradient(90deg,var(--cyan),transparent 20%,transparent 80%,var(--pink)) bottom/100% 1px no-repeat;
  opacity:.52;
}
.device-orb{
  width:72px;height:72px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cyan);
  font-size:32px;
  border:1px solid rgba(24,234,255,.46);
  background:radial-gradient(circle,rgba(24,234,255,.12),rgba(255,66,218,.06) 58%,transparent 62%);
  box-shadow:0 0 22px rgba(24,234,255,.16),inset 0 0 18px rgba(255,66,218,.10);
}
.device-name{font-size:23px;font-weight:620;margin-bottom:4px}
.device-watt{
  color:#6bbcff;
  font-size:34px;
  font-weight:520;
  line-height:1;
  letter-spacing:-.04em;
  text-shadow:0 0 15px rgba(24,234,255,.20);
}
.device-watt span{font-size:.62em;color:var(--cyan);margin-left:4px}
.device-meta{color:var(--muted);font-size:13px;line-height:1.4}
.muted-line{color:#7894ad}
.device-livebox{
  display:grid;
  gap:7px;
  align-content:center;
  padding-left:24px;
  border-left:1px solid rgba(24,234,255,.16);
}
.pill{
  width:max-content;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  font-size:12px;
  font-weight:700;
  background:rgba(7,20,36,.18);
}
.pill.live{color:var(--green);border-color:rgba(85,244,154,.46);box-shadow:0 0 10px rgba(85,244,154,.08)}
.pill.stale{color:var(--red);border-color:rgba(255,112,138,.48)}
.device-chevron{font-size:36px;color:#c9f4ff;opacity:.72}

/* HUD panels with clipped corners */
.hud-panel{
  position:relative;
  border:1px solid rgba(24,234,255,.18);
  border-radius:18px;
  background:rgba(2,11,22,.055);
  box-shadow:0 0 24px rgba(24,234,255,.045);
  overflow:hidden;
}
.hud-panel::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,var(--cyan),transparent 14%,transparent 86%,var(--cyan)) top/100% 1px no-repeat,
    linear-gradient(90deg,var(--cyan),transparent 14%,transparent 86%,var(--pink)) bottom/100% 1px no-repeat,
    linear-gradient(180deg,var(--cyan),transparent 24%,transparent 76%,var(--cyan)) left/1px 100% no-repeat,
    linear-gradient(180deg,var(--cyan),transparent 24%,transparent 76%,var(--pink)) right/1px 100% no-repeat;
  opacity:.48;
}
.period-panel{
  margin-top:18px;
  padding:16px 20px;
  display:grid;
  grid-template-columns:1fr minmax(280px,.55fr) auto;
  gap:18px;
  align-items:center;
}
.period-left h2{margin-bottom:12px}
.segmented{display:flex;gap:12px;flex-wrap:wrap}
.period-btn{
  min-width:86px;
  border:1px solid rgba(24,234,255,.24);
  border-radius:12px;
  padding:12px 16px;
  background:rgba(4,13,25,.16);
  color:#e8f8ff;
  font-weight:650;
  cursor:pointer;
}
.period-btn.active{
  background:linear-gradient(135deg,rgba(255,66,218,.88),rgba(24,234,255,.82));
  color:#07101c;
  box-shadow:0 0 0 3px rgba(24,234,255,.10),0 0 22px rgba(255,66,218,.22);
}
.period-summary{
  border:1px solid var(--cyan-line);
  background:rgba(3,12,24,.10);
  border-radius:15px;
  padding:13px 16px;
  display:grid;
  gap:3px;
}
.period-summary span{color:#e9fbff}
.period-summary small{color:var(--muted)}
.period-actions{display:flex;gap:14px}
.charts-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:16px;
}
.chart-card{
  min-height:262px;
  padding:18px 18px 16px;
}
.chart-card h2{font-size:16px;margin-bottom:12px}
.bar-chart,.line-chart,.horizontal-bars{
  height:192px;
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(24,234,255,.12);
  background:
    linear-gradient(180deg,rgba(3,13,25,.16),rgba(2,8,16,.05)),
    repeating-linear-gradient(90deg,rgba(24,234,255,.060) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(180deg,rgba(24,234,255,.045) 0 1px,transparent 1px 34px);
}
.bar-chart .grid-line,.line-chart .grid-line{
  position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(24,234,255,.16),rgba(255,66,218,.10),transparent);
}
.bar-wrap{
  position:absolute;
  inset:14px 12px 26px 42px;
  display:flex;
  align-items:flex-end;
  gap:5px;
}
.bar{
  flex:1;min-width:2px;border-radius:7px 7px 2px 2px;
  background:linear-gradient(180deg,var(--cyan),var(--blue) 48%,var(--pink));
  box-shadow:0 0 16px rgba(24,234,255,.20),0 0 16px rgba(255,66,218,.12);
  position:relative;
  transition:height .25s ease;
}
.bar.zero{background:rgba(255,255,255,.08);box-shadow:none}
.bar:hover::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  background:rgba(4,12,22,.95);
  border:1px solid var(--cyan-line);
  color:var(--text);
  border-radius:8px;
  padding:7px 9px;
  font-size:11px;
  z-index:4;
}
.x-labels{
  position:absolute;left:42px;right:12px;bottom:2px;
  display:flex;justify-content:space-between;
  color:#8ba9c2;font-size:11px;
}
.y-labels{
  position:absolute;left:0;top:12px;bottom:26px;width:38px;
  display:flex;flex-direction:column;justify-content:space-between;
  color:#8ba9c2;font-size:10px;text-align:right;
}
.line-svg{
  position:absolute;inset:14px 12px 26px 42px;
  overflow:visible;
}
.line-svg .chart-line,.line-svg polyline{
  fill:none;
  stroke:var(--cyan);
  stroke-width:2.7;
  stroke-linejoin:round;
  stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(24,234,255,.42));
}
.line-svg .line-point{
  fill:var(--pink);
  stroke:#fff;
  stroke-width:.8;
  filter:drop-shadow(0 0 6px rgba(255,66,218,.38));
}
.hbar-row{
  display:grid;grid-template-columns:minmax(120px,.45fr) 1fr 80px;
  gap:12px;align-items:center;margin:10px 0;
}
.hbar-name{color:#e6f5ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-track{
  height:12px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(24,234,255,.14);
  overflow:hidden;
}
.hbar-fill{
  height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--pink));
  box-shadow:0 0 14px rgba(24,234,255,.22),0 0 14px rgba(255,66,218,.14);
}
.hbar-val{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.no-data{color:var(--muted);padding:38px 20px}

/* Settings drawer */
.card{
  position:relative;
  overflow:hidden;
  background:rgba(5,17,31,.18);
  border:1px solid rgba(24,234,255,.16);
  border-radius:18px;
  box-shadow:0 0 24px rgba(24,234,255,.04);
}
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,3,8,.70);backdrop-filter:blur(5px);z-index:50}
.settings-drawer{
  position:fixed;top:0;right:0;width:min(1060px,calc(100vw - 220px));height:100vh;overflow:auto;
  background:rgba(4,11,21,.94);
  border-left:1px solid var(--cyan-line);
  box-shadow:0 18px 56px rgba(0,0,0,.45);
  transform:translateX(102%);
  transition:transform .22s ease;
  z-index:60;
  padding-bottom:28px;
}
.settings-drawer.open{transform:translateX(0)}
.drawer-head{
  position:sticky;top:0;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:14px 18px 10px;
  background:rgba(4,11,21,.94);
  border-bottom:1px solid rgba(24,234,255,.16);
  backdrop-filter:blur(14px);
}
.drawer-head h2{font-size:18px}
.icon-btn{
  width:36px;height:36px;border-radius:12px;
  border:1px solid var(--cyan-line);
  background:rgba(5,13,24,.45);
  color:var(--text);
  cursor:pointer;
  font-size:23px;line-height:1;
}
.drawer-tabs{
  position:sticky;top:61px;z-index:2;
  display:flex;flex-wrap:wrap;gap:8px;
  padding:10px 18px;
  background:rgba(4,11,21,.94);
  border-bottom:1px solid rgba(24,234,255,.12);
}
.drawer-tabs a{
  border:1px solid rgba(24,234,255,.18);
  background:rgba(10,22,38,.45);
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:650;
}
.settings-grid{
  padding:12px 18px 24px;
  display:grid;
  grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:12px;
  align-items:start;
}
.settings-card{padding:14px}
.settings-card.wide2{grid-column:span 2}
label{display:block;color:#d9f1ff;font-size:12px;font-weight:580;margin:10px 0 5px}
.checkline{display:flex;gap:9px;align-items:center;cursor:pointer;margin:10px 0}
.checkline input{width:18px;height:18px;accent-color:var(--cyan);cursor:pointer}
.auto-log{align-self:end;padding-bottom:6px}
.hint{color:var(--muted);font-size:12px;line-height:1.45;margin-top:10px}
.three-cols,.two-cols,.four-cols{display:grid;gap:10px}
.three-cols{grid-template-columns:repeat(3,1fr)}
.two-cols{grid-template-columns:repeat(2,1fr)}
.four-cols{grid-template-columns:repeat(4,1fr)}
.align-end{align-items:end}
.status-box{
  border:1px solid rgba(24,234,255,.16);
  border-radius:13px;
  padding:10px 12px;
  margin:10px 0 12px;
  background:rgba(3,12,24,.20);
  line-height:1.35;
}
.status-box.ok{border-color:rgba(85,244,154,.42);background:rgba(85,244,154,.08);color:#9af8c5}
.status-box.error{border-color:rgba(255,112,138,.48);background:rgba(255,112,138,.08);color:#ffb0bf}
.status-box.muted{color:var(--muted)}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.info-grid label{
  border:1px solid rgba(24,234,255,.16);
  border-radius:13px;
  padding:10px;
  display:flex;justify-content:space-between;gap:12px;
  background:rgba(3,12,24,.20);
  margin:0;
}
.evidence-list{margin-top:12px;color:var(--muted);font-size:12px}
.file{padding:8px 6px}
.toast-host{position:fixed;right:18px;top:18px;z-index:100;display:grid;gap:10px}
.toast{
  min-width:280px;max-width:520px;
  border-radius:14px;border:1px solid var(--cyan-line);
  background:rgba(4,12,22,.92);
  box-shadow:0 18px 46px rgba(0,0,0,.34);
  padding:12px 14px;
  animation:toastIn .18s ease;
}
.toast.ok{border-color:rgba(85,244,154,.48)}
.toast.error{border-color:rgba(255,112,138,.58)}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:1500px){
  .cockpit{grid-template-columns:440px 1fr}
  .exact-gauge{width:292px;height:292px}
  .charts-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1200px){
  .hud-topbar{display:block}
  .hud-controls{min-width:0;grid-template-columns:1fr 88px auto auto;margin-top:16px}
  .cockpit{grid-template-columns:1fr}
  .kpi-line{grid-template-columns:repeat(2,1fr)}
  .metric-card:nth-child(odd){border-left:0}
  .settings-drawer{width:100vw}
}
@media(max-width:780px){
  .shell{padding:14px}
  h1{font-size:28px}
  .hud-controls{grid-template-columns:1fr 78px}
  .kpi-line,.charts-grid,.period-panel,.device-card{grid-template-columns:1fr}
  .metric-card + .metric-card{border-left:0;border-top:1px solid rgba(24,234,255,.14)}
  .exact-gauge{width:250px;height:250px}
  .device-livebox,.device-chevron{display:none}
  .settings-grid{grid-template-columns:1fr;padding:12px}
  .settings-card.wide2{grid-column:1}
  .three-cols,.two-cols,.four-cols,.info-grid{grid-template-columns:1fr}
}


/* v0.3.8 Compact Settings HUD */
.settings-drawer{
  width:min(860px, calc(100vw - 260px)) !important;
  max-width:860px !important;
  height:86vh !important;
  max-height:86vh !important;
  top:7vh !important;
  right:28px !important;
  border:1px solid rgba(24,234,255,.24) !important;
  border-radius:22px !important;
  background:rgba(4,11,21,.91) !important;
  box-shadow:0 18px 58px rgba(0,0,0,.52),0 0 32px rgba(24,234,255,.08) !important;
  overflow:auto !important;
  padding-bottom:12px !important;
}
.drawer-head{
  padding:10px 14px 8px !important;
}
.drawer-head h2{
  font-size:16px !important;
}
.drawer-head .crumb{
  font-size:10px !important;
  margin-bottom:3px !important;
}
.icon-btn{
  width:30px !important;
  height:30px !important;
  border-radius:10px !important;
  font-size:18px !important;
}
.drawer-tabs{
  top:50px !important;
  gap:6px !important;
  padding:8px 14px !important;
}
.drawer-tabs a{
  padding:6px 10px !important;
  font-size:11px !important;
  border-radius:999px !important;
}
.settings-grid{
  padding:10px 14px 16px !important;
  grid-template-columns:repeat(2,minmax(240px,1fr)) !important;
  gap:10px !important;
}
.settings-card{
  padding:11px 12px !important;
  border-radius:16px !important;
}
.settings-card.wide2{
  grid-column:span 2 !important;
}
.settings-card h3{
  font-size:14px !important;
  margin-bottom:8px !important;
}
.settings-card label{
  font-size:10.5px !important;
  margin:7px 0 4px !important;
}
.input,.select{
  min-height:33px !important;
  padding:7px 10px !important;
  border-radius:10px !important;
  font-size:12px !important;
}
textarea.input{
  min-height:64px !important;
}
.btn{
  min-height:32px !important;
  padding:8px 11px !important;
  border-radius:10px !important;
  font-size:12px !important;
}
.btn.orange{
  min-height:34px !important;
}
.button-row{
  gap:7px !important;
  margin-top:8px !important;
}
.three-cols,.two-cols,.four-cols{
  gap:7px !important;
}
.checkline{
  gap:7px !important;
  margin:7px 0 !important;
  font-size:11px !important;
}
.checkline input{
  width:15px !important;
  height:15px !important;
}
.status-box{
  margin:7px 0 9px !important;
  padding:8px 10px !important;
  border-radius:11px !important;
  font-size:11.5px !important;
}
.hint{
  font-size:11px !important;
  line-height:1.35 !important;
  margin-top:7px !important;
}
.info-grid{
  gap:7px !important;
}
.info-grid label{
  padding:8px 10px !important;
  border-radius:11px !important;
  font-size:11px !important;
}
.evidence-list{
  font-size:11px !important;
  margin-top:8px !important;
}
.file{
  padding:5px 4px !important;
}
@media(max-width:1200px){
  .settings-drawer{
    width:min(860px, calc(100vw - 40px)) !important;
    right:20px !important;
  }
}
@media(max-width:860px){
  .settings-drawer{
    width:100vw !important;
    height:100vh !important;
    max-height:100vh !important;
    top:0 !important;
    right:0 !important;
    border-radius:0 !important;
  }
  .settings-grid{
    grid-template-columns:1fr !important;
  }
  .settings-card.wide2{
    grid-column:1 !important;
  }
}


/* v0.3.9 Settings Tabs No-Scroll Fix */
.settings-tab-hidden{
  display:none !important;
}
.drawer-tabs a.active{
  color:#041018 !important;
  background:linear-gradient(135deg, rgba(255,66,218,.88), rgba(24,234,255,.82)) !important;
  border-color:rgba(24,234,255,.62) !important;
  box-shadow:0 0 0 2px rgba(24,234,255,.08),0 0 16px rgba(255,66,218,.16) !important;
}
.settings-drawer{
  height:auto !important;
  min-height:0 !important;
  max-height:82vh !important;
  overflow:hidden !important;
}
.settings-grid{
  max-height:calc(82vh - 104px) !important;
  overflow:auto !important;
  align-items:start !important;
}
.settings-grid[data-active-tab="device"],
.settings-grid[data-active-tab="manual"],
.settings-grid[data-active-tab="costs"],
.settings-grid[data-active-tab="evidence"],
.settings-grid[data-active-tab="dossier"]{
  grid-template-columns:minmax(320px, 520px) !important;
  justify-content:center !important;
}
.settings-grid[data-active-tab="tuya"]{
  grid-template-columns:minmax(420px,1.18fr) minmax(300px,.82fr) !important;
  justify-content:stretch !important;
}
.settings-grid[data-active-tab="tuya"] #panelTuya,
.settings-grid[data-active-tab="tuya"] #panelTuyaDevice,
.settings-grid[data-active-tab="dossier"] #panelDossier{
  grid-column:auto !important;
}
.settings-grid[data-active-tab="dossier"] #panelDossier{
  width:100% !important;
}
.settings-grid[data-active-tab="tuya"] #panelTuya .button-row,
.settings-grid[data-active-tab="tuya"] #panelTuyaDevice .button-row{
  gap:6px !important;
}
.settings-grid[data-active-tab="tuya"] #panelTuya .button-row .btn,
.settings-grid[data-active-tab="tuya"] #panelTuyaDevice .button-row .btn{
  padding-left:9px !important;
  padding-right:9px !important;
}
.settings-grid[data-active-tab="manual"] .three-cols,
.settings-grid[data-active-tab="manual"] .two-cols{
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
}
.settings-grid[data-active-tab="manual"] .three-cols > div:last-child{
  grid-column:1 / -1 !important;
}
@media(max-width:980px){
  .settings-grid[data-active-tab="tuya"]{
    grid-template-columns:1fr !important;
  }
}


/* v0.4.0 HUD Cleanup + Transparency + Live Gauge + Tuya Scale Fix */
.cockpit,
.hud-panel,
.period-panel,
.chart-card,
.device-card{
  background:rgba(2,11,22,.018) !important;
  box-shadow:0 0 20px rgba(24,234,255,.035),0 0 26px rgba(255,66,218,.018) !important;
}

.cockpit{
  grid-template-columns:390px 1fr !important;
  min-height:455px !important;
  padding:18px !important;
}

.cockpit::after{
  background:
    radial-gradient(circle at 17% 46%,rgba(24,234,255,.10),transparent 24%),
    radial-gradient(circle at 79% 18%,rgba(255,66,218,.08),transparent 30%) !important;
  opacity:.42 !important;
}

.gauge-area{
  min-height:415px !important;
}

.exact-gauge,
.smooth-gauge{
  width:300px !important;
  height:300px !important;
  margin:4px auto 6px !important;
}

.gauge-marker{
  fill:#f8fbff;
  stroke:rgba(24,234,255,.95);
  stroke-width:1.6;
  filter:drop-shadow(0 0 8px rgba(24,234,255,.95)) drop-shadow(0 0 14px rgba(255,66,218,.38));
}

.gauge-progress{
  filter:url(#softGlow) drop-shadow(0 0 8px rgba(24,234,255,.85)) !important;
}

.right-panel{
  grid-template-rows:176px 1fr !important;
}

.kpi-line{
  min-height:176px !important;
}

.metric-card{
  padding:24px 24px 16px !important;
}

.metric-card + .metric-card{
  border-left:1px solid rgba(24,234,255,.11) !important;
}

.device-card{
  min-height:112px !important;
  padding:14px 18px !important;
}

.device-name{
  font-size:21px !important;
}

.device-watt{
  font-size:30px !important;
}

.bar-chart,
.line-chart,
.horizontal-bars{
  background:
    repeating-linear-gradient(90deg,rgba(24,234,255,.045) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(180deg,rgba(24,234,255,.032) 0 1px,transparent 1px 34px) !important;
  border-color:rgba(24,234,255,.10) !important;
}

.hud-panel::before,
.cockpit::before,
.device-card::before{
  opacity:.38 !important;
}

.chart-card::before{
  opacity:.34 !important;
}

.period-panel{
  grid-template-columns:1fr minmax(260px,.48fr) auto !important;
}

.charts-grid{
  gap:14px !important;
}

@media(max-width:1500px){
  .cockpit{
    grid-template-columns:360px 1fr !important;
  }
  .exact-gauge,
  .smooth-gauge{
    width:280px !important;
    height:280px !important;
  }
}

@media(max-width:1200px){
  .cockpit{
    grid-template-columns:1fr !important;
  }
}


/* v0.4.1 Tuya Raw Debug Probe */
.raw-debug-output{
  min-height:160px !important;
  max-height:260px !important;
  white-space:pre !important;
  overflow:auto !important;
  resize:vertical !important;
  font-size:10.5px !important;
  line-height:1.35 !important;
  color:#bdeeff !important;
  background:rgba(0,8,18,.34) !important;
}
.settings-grid[data-active-tab="tuya"]{
  grid-template-columns:minmax(430px,1.1fr) minmax(360px,.9fr) !important;
}
#rawTuyaProbeBtn{
  border-color:rgba(255,194,71,.45) !important;
  color:#ffe3a8 !important;
}


/* v0.4.2 Error Clamp */
.status-box{
  max-height:76px !important;
  overflow:auto !important;
  word-break:break-word !important;
  white-space:normal !important;
}
#tuyaRawDebugOutput.raw-debug-output{
  min-height:150px !important;
  max-height:260px !important;
  overflow:auto !important;
}


/* v0.4.3 Final Tuya Scale Lock + Gauge Labels */
.gauge-scale-labels text,
.gauge-ring-label{
  font-size:7.4px;
  fill:#a7dfff;
  text-anchor:middle;
  dominant-baseline:middle;
  opacity:.92;
  font-weight:620;
  filter:drop-shadow(0 0 5px rgba(24,234,255,.55));
}
.gauge-marker{
  filter:drop-shadow(0 0 9px rgba(24,234,255,.95)) drop-shadow(0 0 15px rgba(255,66,218,.34));
}
.gauge-marker-pointer{
  fill:#f5fbff;
  stroke:rgba(24,234,255,.96);
  stroke-width:1.15;
}
.gauge-marker-dot{
  fill:#14f3ff;
  stroke:#f8fcff;
  stroke-width:1.5;
}
.gauge-marker-core{
  fill:#ffffff;
}
.no-data{
  position:absolute !important;
  left:42px !important;
  right:12px !important;
  top:14px !important;
  bottom:26px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 18px !important;
  text-align:center !important;
  color:#9fb6cf !important;
  background:transparent !important;
  pointer-events:none !important;
  font-size:12px !important;
  line-height:1.35 !important;
}
#tuyaAccessId::placeholder{
  color:#7ea8c3 !important;
  opacity:.95 !important;
}


/* v0.4.4 Auto Live Logging Save Fix */
#autoLiveLogging{
  accent-color:#26e7ff;
}


/* v0.4.7 Thin Bar Charts UI Tuning */
.bar-wrap.thin-bars{
  justify-content:space-between !important;
  gap:0 !important;
  padding:0 7px 0 4px !important;
}
.bar-wrap.thin-bars .bar{
  flex:0 0 var(--bar-w, 7px) !important;
  width:var(--bar-w, 7px) !important;
  max-width:var(--bar-w, 7px) !important;
  min-width:3px !important;
  border-radius:999px 999px 4px 4px !important;
  opacity:.92 !important;
  background:linear-gradient(180deg,rgba(38,231,255,.96),rgba(67,143,255,.82) 50%,rgba(255,66,218,.86)) !important;
  box-shadow:0 0 8px rgba(24,234,255,.20),0 0 8px rgba(255,66,218,.10) !important;
}
.bar-wrap.thin-bars .bar.zero{
  height:2px !important;
  min-height:2px !important;
  background:rgba(255,255,255,.075) !important;
  box-shadow:none !important;
  border-radius:999px !important;
  opacity:.55 !important;
}
.bar-wrap.thin-bars .bar:hover{
  opacity:1 !important;
  box-shadow:0 0 12px rgba(24,234,255,.34),0 0 12px rgba(255,66,218,.18) !important;
}


/* v0.4.8 Neon Chart Polish - glow behouden, grafieken netter */
.chart-card{
  background:
    radial-gradient(circle at 18% 12%, rgba(24,234,255,.045), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(255,66,218,.035), transparent 38%),
    rgba(2,11,22,.014) !important;
  box-shadow:
    inset 0 0 0 1px rgba(24,234,255,.025),
    0 0 18px rgba(24,234,255,.045),
    0 0 30px rgba(255,66,218,.018) !important;
}

.bar-chart,
.line-chart,
.horizontal-bars{
  background:
    linear-gradient(180deg, rgba(24,234,255,.012), rgba(255,66,218,.008)),
    repeating-linear-gradient(90deg, rgba(24,234,255,.045) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(180deg, rgba(24,234,255,.035) 0 1px, transparent 1px 44px) !important;
  border-color:rgba(24,234,255,.145) !important;
  box-shadow:
    inset 0 0 18px rgba(24,234,255,.025),
    inset 0 0 42px rgba(255,66,218,.012) !important;
}

/* Dunne neon bars, maar glow mag blijven shinen */
.bar-wrap.thin-bars .bar{
  flex:0 0 var(--bar-w, 6px) !important;
  width:var(--bar-w, 6px) !important;
  max-width:var(--bar-w, 6px) !important;
  border-radius:999px 999px 5px 5px !important;
  background:
    linear-gradient(180deg,
      rgba(38,231,255,1) 0%,
      rgba(35,177,255,.94) 42%,
      rgba(120,101,255,.92) 68%,
      rgba(255,66,218,.94) 100%) !important;
  box-shadow:
    0 0 8px rgba(24,234,255,.38),
    0 0 18px rgba(24,234,255,.14),
    0 0 14px rgba(255,66,218,.16) !important;
  border:1px solid rgba(210,248,255,.16) !important;
}

.bar-wrap.thin-bars .bar:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 10px rgba(24,234,255,.54),
    0 0 24px rgba(24,234,255,.22),
    0 0 20px rgba(255,66,218,.22) !important;
}

.bar-wrap.thin-bars .bar.zero{
  background:rgba(160,190,220,.06) !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

/* Lijngrafieken iets scherper en meer HUD-glow */
.line-svg .line,
.line-chart svg path.line,
.line-chart polyline,
.line-chart path{
  filter:drop-shadow(0 0 5px rgba(24,234,255,.38)) drop-shadow(0 0 9px rgba(255,66,218,.16));
}

.line-chart circle,
.line-svg circle,
.point,
.chart-point{
  filter:drop-shadow(0 0 5px rgba(24,234,255,.55));
}

/* Labels net iets rustiger en leesbaarder */
.x-labels,
.y-labels,
.axis-labels,
.chart-axis,
.chart-labels,
.bar-chart text,
.line-chart text,
.horizontal-bars text{
  color:#9fbdd4 !important;
  fill:#9fbdd4 !important;
  opacity:.88 !important;
  text-shadow:0 0 5px rgba(24,234,255,.16) !important;
}

.chart-card h3,
.chart-title{
  color:#f3f8ff !important;
  text-shadow:0 0 8px rgba(24,234,255,.16) !important;
}

/* Verdeling per apparaat: strakker neonbalkje */
.horizontal-bars .hbar,
.horizontal-bars .bar,
.distribution-bar,
.device-distribution-bar{
  border-radius:999px !important;
  box-shadow:
    0 0 8px rgba(24,234,255,.30),
    0 0 18px rgba(255,66,218,.12) !important;
}

/* Geen-data tekst blijft netjes middenin, minder plakkerig */
.no-data{
  color:#9fb9cf !important;
  opacity:.92 !important;
  text-shadow:0 0 8px rgba(24,234,255,.12) !important;
  background:transparent !important;
}

/* Kleine HUD fade onder grafieken voor diepte zonder heipaalgevoel */
.chart-card::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:14px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(24,234,255,.20), rgba(255,66,218,.16), transparent);
  opacity:.55;
}

/* v0.5.0 True Neon HUD + kostenoverzicht + zone-meters + mini-desktop mobile */
:root{
  --rem-halo-cyan:#16f3ff;
  --rem-halo-blue:#2c7cff;
  --rem-halo-pink:#ff3de8;
  --rem-halo-white:#e9fbff;
}

/* Mobile: toon dezelfde desktopcockpit klein. Knijpen/pinch-to-zoom blijft toegestaan via viewport. */
@media (hover:none) and (pointer:coarse){
  html,body{min-width:1600px !important; overflow-x:auto !important;}
  .shell{width:1600px !important; max-width:none !important; margin:0 auto !important;}
}

/* Grote totaal-meter: buitenste neon dashboard-ring */
.exact-gauge,
.smooth-gauge{
  isolation:isolate;
}
.exact-gauge::before,
.smooth-gauge::before{
  content:"" !important;
  position:absolute !important;
  inset:-34px !important;
  border-radius:50% !important;
  padding:3px !important;
  background:
    conic-gradient(from 220deg,
      rgba(22,243,255,.08) 0deg,
      var(--rem-halo-cyan) 42deg,
      var(--rem-halo-blue) 105deg,
      rgba(233,251,255,.92) 136deg,
      var(--rem-halo-pink) 205deg,
      rgba(255,61,232,.98) 288deg,
      var(--rem-halo-cyan) 360deg) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask-composite:exclude !important;
  box-shadow:
    0 0 14px rgba(22,243,255,.72),
    0 0 36px rgba(22,243,255,.42),
    0 0 54px rgba(255,61,232,.38),
    inset 0 0 18px rgba(233,251,255,.44) !important;
  filter:drop-shadow(0 0 16px rgba(22,243,255,.78)) drop-shadow(0 0 26px rgba(255,61,232,.52)) !important;
  opacity:1 !important;
  z-index:-1 !important;
}
.exact-gauge::after,
.smooth-gauge::after{
  content:"" !important;
  position:absolute !important;
  inset:-21px !important;
  border-radius:50% !important;
  border:1.5px solid rgba(233,251,255,.72) !important;
  box-shadow:
    0 0 12px rgba(233,251,255,.35),
    0 0 24px rgba(22,243,255,.26),
    inset 0 0 24px rgba(24,234,255,.10) !important;
  background:transparent !important;
  z-index:-1 !important;
}

/* KPI rij krijgt extra kostenkaart */
.kpi-line{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}
.total-cost-card .hud-icon{
  color:#ffcf74;
  border-color:rgba(255,194,71,.45);
  box-shadow:0 0 18px rgba(255,153,36,.14), inset 0 0 18px rgba(255,194,71,.08);
}
.cost-breakdown{
  display:grid;
  gap:6px;
  margin-top:2px;
}
.cost-breakdown div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:5px 0;
  border-bottom:1px solid rgba(24,234,255,.10);
}
.cost-breakdown span{
  color:#9fb6cf;
  font-size:12px;
}
.cost-breakdown strong{
  color:#ff9924;
  font-size:16px;
  font-weight:720;
  text-shadow:0 0 12px rgba(255,153,36,.24);
}

/* Weerbericht als feitelijke context, geen airco-score */
.right-panel{
  grid-template-rows:auto auto 1fr !important;
}
.weather-strip{
  min-height:92px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:minmax(210px,.55fr) 1fr auto;
  gap:14px;
  align-items:center;
  background:
    radial-gradient(circle at 12% 30%,rgba(24,234,255,.055),transparent 38%),
    radial-gradient(circle at 94% 30%,rgba(255,66,218,.040),transparent 42%),
    rgba(2,11,22,.018) !important;
}
.weather-main{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:12px;
  align-items:center;
}
.weather-icon{
  width:52px;height:52px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:25px;
  color:#f4fbff;
  background:radial-gradient(circle,rgba(24,234,255,.18),rgba(255,66,218,.08) 57%,transparent 62%);
  border:1px solid rgba(24,234,255,.35);
  box-shadow:0 0 20px rgba(24,234,255,.14);
}
.weather-main h2{font-size:16px;margin-bottom:3px}
.weather-main strong{display:block;font-size:18px;color:#f3f8ff;margin-bottom:1px}
.weather-main span{display:block;color:#9fb6cf;font-size:12px}
.weather-metrics{
  display:grid;
  grid-template-columns:repeat(6,minmax(74px,1fr));
  gap:8px;
}
.weather-metrics div{
  padding:8px 9px;
  border:1px solid rgba(24,234,255,.12);
  border-radius:12px;
  background:rgba(3,12,24,.13);
}
.weather-metrics span{
  display:block;color:#829db5;font-size:10px;margin-bottom:3px;
}
.weather-metrics strong{
  display:block;color:#e9fbff;font-size:13px;white-space:nowrap;
}
.weather-location-btn{
  min-height:36px !important;
  white-space:nowrap;
  font-size:12px !important;
}

/* Apparaat/zone mini-meters */
.device-card.zone-meter-card{
  grid-template-columns:92px minmax(260px,1fr) minmax(150px,.33fr) minmax(165px,.35fr) 22px !important;
}
.mini-device-gauge{
  --dev-deg:calc(var(--dev-ratio, 0) * 360deg);
  width:82px;
  height:82px;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  background:
    radial-gradient(circle at 50% 50%,rgba(1,8,17,.92) 0 51%,transparent 52%),
    conic-gradient(from -90deg, var(--cyan) 0deg, var(--blue) calc(var(--dev-deg) * .62), var(--pink) var(--dev-deg), rgba(24,234,255,.07) var(--dev-deg) 360deg);
  box-shadow:
    0 0 18px rgba(24,234,255,.18),
    0 0 22px rgba(255,66,218,.10),
    inset 0 0 18px rgba(24,234,255,.08);
  border:1px solid rgba(233,251,255,.18);
}
.mini-device-gauge::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  border:1px solid rgba(24,234,255,.28);
  box-shadow:inset 0 0 12px rgba(24,234,255,.08);
}
.mini-device-value{
  position:relative;z-index:2;
  color:#f3f8ff;
  font-size:18px;
  font-weight:760;
  line-height:1;
  text-shadow:0 0 12px rgba(24,234,255,.35);
}
.mini-device-value span{
  display:block;
  margin-top:3px;
  color:var(--cyan);
  font-size:10px;
  font-weight:650;
  text-align:center;
}
.device-stats{
  display:grid;
  gap:7px;
  padding-left:18px;
  border-left:1px solid rgba(24,234,255,.14);
}
.device-stats div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
}
.device-stats span{color:#8da7bd}
.device-stats strong{color:#e9fbff;font-size:12px;text-align:right}
.section-title-row h2{font-size:21px !important}

@media(max-width:1500px){
  .kpi-line{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
  .weather-metrics{grid-template-columns:repeat(3,1fr)}
  .weather-strip{grid-template-columns:minmax(220px,.40fr) 1fr auto}
}
@media(max-width:1200px){
  .kpi-line{grid-template-columns:repeat(3,1fr) !important;}
  .weather-strip{grid-template-columns:1fr !important;}
  .device-card.zone-meter-card{grid-template-columns:92px 1fr minmax(130px,.35fr) !important;}
  .device-livebox,.device-chevron{display:none !important;}
}


/* v0.5.1 Compact HUD Balance + Extra Glow
   - Grote meter kleiner
   - Hele UI iets compacter
   - Meer subtiele neon-glow op randen/panelen
   - Geen Tuya/logging/data-logica aangepast
*/
:root{
  --rem-compact-cyan:rgba(22,243,255,.72);
  --rem-compact-pink:rgba(255,61,232,.56);
  --rem-compact-glow:0 0 18px rgba(24,234,255,.075),0 0 34px rgba(255,61,232,.040);
}

body{
  font-size:12.2px !important;
}
.shell{
  max-width:1780px !important;
  padding:18px 22px 30px !important;
}
.hud-topbar{
  gap:16px !important;
  margin-bottom:12px !important;
}
.pulse-mark{
  font-size:28px !important;
  text-shadow:0 0 18px rgba(24,234,255,.55),0 0 30px rgba(255,61,232,.12) !important;
}
.crumb{
  font-size:10px !important;
  margin-bottom:4px !important;
}
h1{
  font-size:30px !important;
}
.hud-controls{
  min-width:590px !important;
  grid-template-columns:minmax(235px,1fr) 82px auto auto !important;
  gap:10px !important;
}
.badge,.select,.input{
  min-height:39px !important;
  padding:9px 12px !important;
  border-radius:12px !important;
}
.btn{
  min-height:39px !important;
  padding:9px 13px !important;
  border-radius:12px !important;
}

.cockpit{
  grid-template-columns:340px 1fr !important;
  min-height:420px !important;
  padding:14px !important;
  gap:14px !important;
  border-color:rgba(24,234,255,.25) !important;
  box-shadow:
    inset 0 0 0 1px rgba(24,234,255,.035),
    0 0 24px rgba(24,234,255,.065),
    0 0 44px rgba(255,61,232,.040) !important;
}
.cockpit::before,
.hud-panel::before,
.device-card::before{
  opacity:.56 !important;
  filter:drop-shadow(0 0 5px rgba(24,234,255,.20)) drop-shadow(0 0 8px rgba(255,61,232,.10)) !important;
}
.cockpit::after{
  opacity:.50 !important;
}
.hud-corner{
  width:42px !important;
  height:42px !important;
  border-color:rgba(245,252,255,.78) !important;
  filter:drop-shadow(0 0 7px rgba(24,234,255,.34)) !important;
}
.gauge-area{
  min-height:380px !important;
}
.gauge-area h2{
  font-size:18px !important;
  margin-bottom:4px !important;
}
.exact-gauge,
.smooth-gauge{
  width:248px !important;
  height:248px !important;
  margin:4px auto 7px !important;
}
.exact-gauge::before,
.smooth-gauge::before{
  inset:-24px !important;
  padding:2.4px !important;
  box-shadow:
    0 0 12px rgba(22,243,255,.78),
    0 0 27px rgba(22,243,255,.42),
    0 0 42px rgba(255,61,232,.34),
    inset 0 0 14px rgba(233,251,255,.35) !important;
  filter:drop-shadow(0 0 12px rgba(22,243,255,.75)) drop-shadow(0 0 20px rgba(255,61,232,.48)) !important;
}
.exact-gauge::after,
.smooth-gauge::after{
  inset:-14px !important;
  border-width:1.2px !important;
  box-shadow:
    0 0 12px rgba(233,251,255,.32),
    0 0 22px rgba(22,243,255,.25),
    inset 0 0 20px rgba(24,234,255,.10) !important;
}
.gauge-value{
  font-size:45px !important;
}
.gauge-label{
  font-size:10px !important;
}
.gauge-scale-labels text,
.gauge-ring-label{
  font-size:6.7px !important;
}
.gauge-status{
  gap:11px !important;
  max-width:300px !important;
  margin-top:7px !important;
}
.status-row{
  grid-template-columns:28px 1fr !important;
  gap:9px !important;
}
.mini-icon{
  width:23px !important;
  height:23px !important;
  box-shadow:0 0 12px rgba(24,234,255,.22),0 0 22px rgba(255,61,232,.06) !important;
}
.status-row span:not(.mini-icon){font-size:11px !important;}
.status-row strong{font-size:12.5px !important;}

.right-panel{
  grid-template-rows:auto auto 1fr !important;
  gap:12px !important;
}
.kpi-line{
  min-height:160px !important;
}
.metric-card{
  padding:20px 22px 13px !important;
  row-gap:6px !important;
}
.metric-card::before{
  top:14px !important;
  right:18px !important;
  width:70px !important;
  opacity:.32 !important;
  filter:drop-shadow(0 0 7px rgba(24,234,255,.24)) !important;
}
.hud-icon{
  width:43px !important;
  height:43px !important;
  font-size:21px !important;
  margin-bottom:5px !important;
  box-shadow:0 0 16px rgba(24,234,255,.23),inset 0 0 14px rgba(24,234,255,.10) !important;
}
.metric-card h2{
  font-size:14px !important;
}
.metric-value{
  font-size:clamp(25px,1.85vw,36px) !important;
  text-shadow:0 0 19px rgba(255,153,36,.32) !important;
}
.metric-card p{
  font-size:12px !important;
}
.cost-breakdown{gap:4px !important;}
.cost-breakdown div{padding:4px 0 !important;}
.cost-breakdown span{font-size:11px !important;}
.cost-breakdown strong{font-size:14px !important;}

.weather-strip{
  min-height:76px !important;
  padding:11px 13px !important;
  gap:11px !important;
  box-shadow:var(--rem-compact-glow) !important;
}
.weather-main{
  grid-template-columns:44px 1fr !important;
  gap:10px !important;
}
.weather-icon{
  width:42px !important;
  height:42px !important;
  font-size:20px !important;
  box-shadow:0 0 18px rgba(24,234,255,.18),0 0 18px rgba(255,61,232,.08) !important;
}
.weather-main h2{font-size:14px !important;margin-bottom:2px !important;}
.weather-main strong{font-size:16px !important;}
.weather-main span{font-size:11px !important;}
.weather-metrics{gap:7px !important;}
.weather-metrics div{
  padding:7px 8px !important;
  border-radius:11px !important;
  box-shadow:inset 0 0 14px rgba(24,234,255,.025),0 0 10px rgba(255,61,232,.016) !important;
}
.weather-metrics span{font-size:9px !important;margin-bottom:2px !important;}
.weather-metrics strong{font-size:12px !important;}
.weather-location-btn{min-height:32px !important;font-size:11px !important;padding:7px 10px !important;}

.section-title-row{margin-bottom:7px !important;}
.section-title-row h2{font-size:18px !important;}
.section-title-row span{font-size:11px !important;}
.device-grid{gap:9px !important;}
.device-card,
.device-card.zone-meter-card{
  min-height:95px !important;
  padding:12px 16px !important;
  gap:15px !important;
  border-color:rgba(24,234,255,.24) !important;
  box-shadow:var(--rem-compact-glow) !important;
}
.device-card.zone-meter-card{
  grid-template-columns:78px minmax(235px,1fr) minmax(135px,.30fr) minmax(150px,.32fr) 18px !important;
}
.mini-device-gauge{
  width:66px !important;
  height:66px !important;
  box-shadow:0 0 16px rgba(24,234,255,.24),0 0 18px rgba(255,61,232,.12),inset 0 0 16px rgba(24,234,255,.10) !important;
}
.mini-device-value{font-size:15px !important;}
.mini-device-value span{font-size:8px !important;}
.device-name{font-size:20px !important;margin-bottom:3px !important;}
.device-watt{font-size:27px !important;text-shadow:0 0 17px rgba(24,234,255,.25) !important;}
.device-meta{font-size:12px !important;line-height:1.28 !important;}
.device-stats{gap:5px !important;padding-left:16px !important;}
.device-stats div{font-size:11px !important;}
.device-stats strong{font-size:11px !important;}
.device-livebox{gap:5px !important;padding-left:18px !important;}
.pill{padding:3px 9px !important;font-size:11px !important;}
.device-chevron{font-size:30px !important;}

.period-panel{
  margin-top:14px !important;
  padding:13px 17px !important;
  gap:14px !important;
  box-shadow:var(--rem-compact-glow) !important;
}
.period-left h2{font-size:16px !important;margin-bottom:9px !important;}
.segmented{gap:9px !important;}
.period-btn{
  min-width:76px !important;
  padding:10px 13px !important;
  border-radius:11px !important;
  box-shadow:0 0 12px rgba(24,234,255,.04) !important;
}
.period-btn.active{
  box-shadow:0 0 0 2px rgba(24,234,255,.10),0 0 22px rgba(255,66,218,.28),0 0 24px rgba(24,234,255,.18) !important;
}
.period-summary{padding:11px 14px !important;border-radius:13px !important;}
.period-actions{gap:10px !important;}

.charts-grid{
  gap:13px !important;
  margin-top:13px !important;
}
.chart-card{
  min-height:236px !important;
  padding:15px 16px 14px !important;
  box-shadow:
    inset 0 0 0 1px rgba(24,234,255,.035),
    0 0 20px rgba(24,234,255,.070),
    0 0 32px rgba(255,61,232,.035) !important;
}
.chart-card h2{
  font-size:15px !important;
  margin-bottom:10px !important;
}
.bar-chart,.line-chart,.horizontal-bars{
  height:170px !important;
  box-shadow:inset 0 0 20px rgba(24,234,255,.035),inset 0 0 46px rgba(255,61,232,.016),0 0 12px rgba(24,234,255,.045) !important;
}
.bar-wrap.thin-bars .bar{
  box-shadow:0 0 10px rgba(24,234,255,.44),0 0 22px rgba(24,234,255,.16),0 0 17px rgba(255,66,218,.18) !important;
}
.hbar-track{height:10px !important;}
.hbar-fill{box-shadow:0 0 12px rgba(24,234,255,.36),0 0 20px rgba(255,66,218,.16) !important;}

/* mini-desktop op telefoon: iets smaller basiscanvas, knijpen blijft aan */
@media (hover:none) and (pointer:coarse){
  html,body{min-width:1500px !important; overflow-x:auto !important;}
  .shell{width:1500px !important; max-width:none !important;}
}

@media(max-width:1500px){
  .cockpit{grid-template-columns:315px 1fr !important;}
  .exact-gauge,.smooth-gauge{width:232px !important;height:232px !important;}
  .charts-grid{grid-template-columns:repeat(2,1fr) !important;}
}
@media(max-width:1200px){
  .cockpit{grid-template-columns:1fr !important;}
  .kpi-line{grid-template-columns:repeat(3,1fr) !important;}
  .weather-strip{grid-template-columns:1fr !important;}
}


/* v0.5.2 meter balance patch */
.gauge-area{
  grid-template-rows:min-content min-content 1fr !important;
}
.gauge-area h2{
  order:2 !important;
  text-align:center !important;
  margin:10px 0 8px !important;
  font-size:18px !important;
  letter-spacing:.02em !important;
}
.exact-gauge,
.smooth-gauge{
  order:1 !important;
  width:220px !important;
  height:220px !important;
  margin:0 auto 4px !important;
}
.gauge-status{
  order:3 !important;
  margin-top:8px !important;
}
@media(max-width:1500px){
  .cockpit{grid-template-columns:300px 1fr !important;}
  .exact-gauge,.smooth-gauge{width:204px !important;height:204px !important;}
}
@media(max-width:1200px){
  .exact-gauge,.smooth-gauge{width:216px !important;height:216px !important;}
}
@media(max-width:780px){
  .gauge-area h2{font-size:17px !important;margin:8px 0 8px !important;}
  .exact-gauge,.smooth-gauge{width:226px !important;height:226px !important;}
}
@media (hover:none) and (pointer:coarse){
  .exact-gauge,.smooth-gauge{width:230px !important;height:230px !important;}
}


/* v0.5.3 gauge fit patch */
.gauge-area{
  justify-items:center !important;
  min-height:360px !important;
}
.gauge-area h2{
  width:100% !important;
  text-align:center !important;
  margin:6px 0 10px !important;
}
.exact-gauge,.smooth-gauge{
  width:188px !important;
  height:188px !important;
  max-width:100% !important;
  margin:2px auto 6px !important;
}
.exact-gauge::before,.smooth-gauge::before{
  inset:-18px !important;
}
.exact-gauge::after,.smooth-gauge::after{
  inset:-10px !important;
}
.gauge-status{
  width:100% !important;
  max-width:240px !important;
  margin:8px auto 0 !important;
}
.cockpit{
  grid-template-columns:270px 1fr !important;
}
@media(max-width:1500px){
  .cockpit{grid-template-columns:270px 1fr !important;}
  .exact-gauge,.smooth-gauge{width:184px !important;height:184px !important;}
}
@media(max-width:1200px){
  .cockpit{grid-template-columns:1fr !important;}
  .exact-gauge,.smooth-gauge{width:196px !important;height:196px !important;}
}
@media(max-width:780px){
  .exact-gauge,.smooth-gauge{width:210px !important;height:210px !important;}
}
@media (hover:none) and (pointer:coarse){
  .exact-gauge,.smooth-gauge{width:210px !important;height:210px !important;}
}


/* v0.5.4 meter downsize patch */
.gauge-area{
  min-height:320px !important;
}
.exact-gauge,.smooth-gauge{
  width:140px !important;
  height:140px !important;
  margin:4px auto 8px !important;
}
.exact-gauge::before,.smooth-gauge::before{
  inset:-14px !important;
}
.exact-gauge::after,.smooth-gauge::after{
  inset:-8px !important;
}
.gauge-area h2{
  margin:8px 0 8px !important;
  font-size:14px !important;
}
.gauge-status{
  max-width:210px !important;
  margin:6px auto 0 !important;
}
.cockpit{
  grid-template-columns:230px 1fr !important;
}
@media(max-width:1500px){
  .cockpit{grid-template-columns:230px 1fr !important;}
  .exact-gauge,.smooth-gauge{width:136px !important;height:136px !important;}
}
@media(max-width:1200px){
  .cockpit{grid-template-columns:1fr !important;}
  .gauge-area{min-height:unset !important;}
  .exact-gauge,.smooth-gauge{width:176px !important;height:176px !important;}
}
@media(max-width:780px){
  .exact-gauge,.smooth-gauge{width:196px !important;height:196px !important;}
}
@media (hover:none) and (pointer:coarse){
  .exact-gauge,.smooth-gauge{width:196px !important;height:196px !important;}
}


/* v0.5.5 header cleanup + final gauge containment */
.build-label{
  display:inline-block;
  margin-left:10px;
  color:rgba(160,212,238,.72);
  font-size:12px;
  font-weight:520;
  letter-spacing:.04em;
  vertical-align:middle;
  text-shadow:0 0 10px rgba(24,234,255,.20);
}
.compact-top-controls{
  grid-template-columns:auto auto !important;
  min-width:0 !important;
  justify-content:end !important;
}
.settings-nas-badge{
  width:100% !important;
  justify-content:flex-start !important;
  min-height:38px !important;
}
.settings-mini-status{
  margin-bottom:10px !important;
}
.cockpit{
  grid-template-columns:205px 1fr !important;
}
.gauge-area{
  min-height:340px !important;
  padding-top:34px !important;
  justify-items:center !important;
  align-content:start !important;
}
.exact-gauge,.smooth-gauge{
  width:105px !important;
  height:105px !important;
  max-width:105px !important;
  margin:0 auto 8px !important;
}
.exact-gauge::before,.smooth-gauge::before{
  inset:-10px !important;
}
.exact-gauge::after,.smooth-gauge::after{
  inset:-6px !important;
}
.gauge-area h2{
  order:2 !important;
  width:100% !important;
  margin:8px 0 22px !important;
  text-align:center !important;
  font-size:14px !important;
  line-height:1.1 !important;
}
.gauge-status{
  order:3 !important;
  width:100% !important;
  max-width:185px !important;
  margin:0 auto !important;
  gap:18px !important;
}
.status-row{
  grid-template-columns:25px 1fr !important;
  gap:8px !important;
}
.status-row span:not(.mini-icon){font-size:10px !important;}
.status-row strong{font-size:11px !important;}
@media(max-width:1500px){
  .cockpit{grid-template-columns:205px 1fr !important;}
  .exact-gauge,.smooth-gauge{width:105px !important;height:105px !important;max-width:105px !important;}
}
@media(max-width:1200px){
  .cockpit{grid-template-columns:1fr !important;}
  .gauge-area{padding-top:20px !important;min-height:unset !important;}
  .exact-gauge,.smooth-gauge{width:150px !important;height:150px !important;max-width:150px !important;}
}
@media(max-width:780px){
  .exact-gauge,.smooth-gauge{width:170px !important;height:170px !important;max-width:170px !important;}
}
@media (hover:none) and (pointer:coarse){
  .exact-gauge,.smooth-gauge{width:170px !important;height:170px !important;max-width:170px !important;}
}


/* v0.5.6 meter midsize balance patch */
.gauge-area{
  min-height:340px !important;
  justify-items:center !important;
  align-content:start !important;
}
.exact-gauge,.smooth-gauge{
  width:170px !important;
  height:170px !important;
  max-width:100% !important;
  margin:14px auto 8px !important;
}
.exact-gauge::before,.smooth-gauge::before{
  inset:-17px !important;
}
.exact-gauge::after,.smooth-gauge::after{
  inset:-9px !important;
}
.gauge-area h2{
  width:100% !important;
  text-align:center !important;
  margin:7px 0 10px !important;
  font-size:15px !important;
  line-height:1.1 !important;
}
.gauge-status{
  width:100% !important;
  max-width:230px !important;
  margin:18px auto 0 !important;
}
.cockpit{
  grid-template-columns:260px 1fr !important;
}
@media(max-width:1500px){
  .cockpit{grid-template-columns:260px 1fr !important;}
  .exact-gauge,.smooth-gauge{width:168px !important;height:168px !important;}
}
@media(max-width:1200px){
  .cockpit{grid-template-columns:1fr !important;}
  .gauge-area{min-height:unset !important;}
  .exact-gauge,.smooth-gauge{width:200px !important;height:200px !important;}
}
@media(max-width:780px){
  .exact-gauge,.smooth-gauge{width:210px !important;height:210px !important;}
}
@media (hover:none) and (pointer:coarse){
  .exact-gauge,.smooth-gauge{width:210px !important;height:210px !important;}
}


/* v0.5.7 gauge title spacing fix */
.gauge-area{
  min-height:352px !important;
}
.exact-gauge,.smooth-gauge{
  margin:12px auto 18px !important;
}
.gauge-area h2{
  margin:14px 0 18px !important;
  padding-top:4px !important;
  font-size:15px !important;
  line-height:1.15 !important;
}
.gauge-status{
  margin-top:18px !important;
}
@media(max-width:1500px){
  .exact-gauge,.smooth-gauge{
    margin:12px auto 20px !important;
  }
  .gauge-area h2{
    margin:16px 0 18px !important;
  }
}
@media(max-width:1200px){
  .exact-gauge,.smooth-gauge{
    margin:12px auto 18px !important;
  }
}
@media (hover:none) and (pointer:coarse){
  .exact-gauge,.smooth-gauge{
    margin:12px auto 20px !important;
  }
  .gauge-area h2{
    margin:16px 0 18px !important;
  }
}


/* v0.5.8 Compact Density + Scalable Plug Grid + Compact Weather HUD + Neon Polish
   - 100% browserzoom voelt compacter, tekst blijft leesbaar
   - Comfort / Compact / Ultra compact via instellingen
   - Zone-meters schaalbaar voor veel stekkers
*/
:root{
  --rem-glow-strong:0 0 24px rgba(24,234,255,.15),0 0 42px rgba(255,66,218,.075);
  --rem-glow-border:0 0 0 1px rgba(24,234,255,.06),0 0 22px rgba(24,234,255,.12),0 0 38px rgba(255,66,218,.055);
}
.build-label{font-size:12px;color:#88dfff;margin-left:12px;font-weight:560;letter-spacing:.01em;text-shadow:0 0 12px rgba(24,234,255,.22)}
body.density-compact .shell,
body.density-ultra .shell{padding-top:18px;padding-left:22px;padding-right:22px;}
body.density-compact .hud-topbar,
body.density-ultra .hud-topbar{margin-bottom:12px;}
body.density-compact .cockpit,
body.density-ultra .cockpit{gap:18px;}
body.density-compact .right-panel,
body.density-ultra .right-panel{gap:10px !important;}
body.density-compact .kpi-line,
body.density-ultra .kpi-line{min-height:148px !important;}
body.density-compact .metric-card,
body.density-ultra .metric-card{padding:17px 20px 12px !important;}
body.density-compact .metric-value,
body.density-ultra .metric-value{font-size:clamp(24px,1.7vw,34px) !important;}
body.density-compact .gauge-area,
body.density-ultra .gauge-area{min-height:350px !important;}
body.density-compact .exact-gauge,
body.density-compact .smooth-gauge{width:212px !important;height:212px !important;}
body.density-ultra .exact-gauge,
body.density-ultra .smooth-gauge{width:198px !important;height:198px !important;}
body.density-compact .gauge-value,
body.density-ultra .gauge-value{font-size:43px !important;}

/* compact weerblok */
.weather-strip.compact-weather,
.weather-strip{position:relative;}
body.density-compact .weather-strip,
body.density-ultra .weather-strip{
  min-height:64px !important;
  padding:9px 11px !important;
  grid-template-columns:minmax(230px,.38fr) 1fr auto !important;
  gap:10px !important;
  border-color:rgba(24,234,255,.34) !important;
  box-shadow:var(--rem-glow-border) !important;
}
body.density-compact .weather-main,
body.density-ultra .weather-main{grid-template-columns:42px 1fr !important;gap:9px !important;}
body.density-compact .weather-icon,
body.density-ultra .weather-icon{
  width:40px !important;height:40px !important;font-size:22px !important;
  background:radial-gradient(circle at 50% 48%,rgba(255,194,71,.22),rgba(24,234,255,.12) 50%,rgba(255,66,218,.08) 62%,transparent 66%) !important;
  box-shadow:0 0 16px rgba(24,234,255,.26),0 0 24px rgba(255,66,218,.10) !important;
}
.weather-datetime{display:block;color:#7fb4d7;font-size:10px;font-weight:460;margin-top:2px;letter-spacing:.01em;}
body.density-compact .weather-main h2,
body.density-ultra .weather-main h2{font-size:12px !important;opacity:.88;}
body.density-compact .weather-main strong,
body.density-ultra .weather-main strong{font-size:15px !important;}
body.density-compact .weather-main span,
body.density-ultra .weather-main span{font-size:11px !important;}
body.density-compact .weather-metrics,
body.density-ultra .weather-metrics{grid-template-columns:repeat(6,minmax(60px,1fr)) !important;gap:6px !important;}
body.density-compact .weather-metrics div,
body.density-ultra .weather-metrics div{padding:5px 7px !important;border-radius:10px !important;}
body.density-compact .weather-metrics span,
body.density-ultra .weather-metrics span{font-size:8.5px !important;font-weight:450;}
body.density-compact .weather-metrics strong,
body.density-ultra .weather-metrics strong{font-size:11.5px !important;font-weight:600;}
body.density-compact .weather-location-btn,
body.density-ultra .weather-location-btn{min-height:28px !important;padding:6px 9px !important;font-size:10px !important;border-radius:10px !important;}

/* filterbalk */
.device-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 170px 190px;gap:8px;margin:0 0 9px;align-items:center;}
.device-toolbar .input{min-height:34px;padding:7px 10px;border-radius:11px;font-size:12px;}
.device-search{font-weight:450;}

/* schaalbare stekkerkaarten */
body.density-comfort .device-grid{grid-template-columns:1fr !important;}
body.density-compact .device-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:10px !important;}
body.density-ultra .device-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:8px !important;}
body.density-compact .device-card.zone-meter-card,
body.density-ultra .device-card.zone-meter-card{
  min-height:106px !important;
  padding:11px 12px !important;
  gap:8px 10px !important;
  grid-template-columns:58px minmax(0,1fr) auto !important;
  grid-template-areas:"gauge main live" "gauge stats stats" !important;
  align-items:center !important;
  border-radius:16px !important;
  background:linear-gradient(110deg,rgba(3,13,25,.28),rgba(2,7,18,.16) 60%,rgba(255,66,218,.035)) !important;
  box-shadow:var(--rem-glow-border) !important;
}
body.density-compact .device-card.zone-meter-card:hover,
body.density-ultra .device-card.zone-meter-card:hover{transform:translateY(-1px);border-color:rgba(24,234,255,.45) !important;box-shadow:0 0 26px rgba(24,234,255,.18),0 0 46px rgba(255,66,218,.10) !important;}
body.density-compact .mini-device-gauge,
body.density-ultra .mini-device-gauge{grid-area:gauge;width:54px !important;height:54px !important;box-shadow:0 0 18px rgba(24,234,255,.30),0 0 25px rgba(255,66,218,.14),inset 0 0 13px rgba(24,234,255,.13) !important;}
body.density-compact .mini-device-gauge::after,
body.density-ultra .mini-device-gauge::after{inset:5px;}
body.density-compact .mini-device-value,
body.density-ultra .mini-device-value{font-size:13px !important;font-weight:700;}
body.density-compact .mini-device-value span,
body.density-ultra .mini-device-value span{font-size:7px !important;margin-top:2px;}
body.density-compact .device-main,
body.density-ultra .device-main{grid-area:main;min-width:0;}
body.density-compact .device-name,
body.density-ultra .device-name{font-size:16px !important;font-weight:600;margin-bottom:2px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.density-compact .device-watt,
body.density-ultra .device-watt{font-size:23px !important;font-weight:650;letter-spacing:-.025em;}
body.density-compact .device-meta,
body.density-ultra .device-meta{font-size:10.5px !important;line-height:1.22 !important;font-weight:430;color:#91aeca;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.density-compact .device-stats,
body.density-ultra .device-stats{grid-area:stats;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding-left:0 !important;border-left:0 !important;border-top:1px solid rgba(24,234,255,.11);padding-top:7px;margin-left:0;}
body.density-compact .device-stats div,
body.density-ultra .device-stats div{display:block;font-size:10px !important;min-width:0;}
body.density-compact .device-stats span,
body.density-ultra .device-stats span{display:block;font-size:8.5px;color:#7692aa;font-weight:430;}
body.density-compact .device-stats strong,
body.density-ultra .device-stats strong{display:block;text-align:left;font-size:10px !important;font-weight:600;color:#f0fbff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.density-compact .device-livebox,
body.density-ultra .device-livebox{grid-area:live;align-self:start;justify-items:end;gap:3px !important;padding-left:0 !important;border-left:0 !important;min-width:54px;}
body.density-compact .device-livebox .device-meta,
body.density-ultra .device-livebox .device-meta{font-size:9px !important;max-width:70px;text-align:right;}
body.density-compact .pill,
body.density-ultra .pill{font-size:9px !important;padding:3px 7px !important;box-shadow:0 0 14px rgba(85,244,154,.22) !important;}
body.density-compact .device-chevron,
body.density-ultra .device-chevron{display:none !important;}
body.density-compact .largest-device-card,
body.density-ultra .largest-device-card{border-color:rgba(255,66,218,.58) !important;box-shadow:0 0 28px rgba(24,234,255,.20),0 0 44px rgba(255,66,218,.17) !important;}
body.density-compact .largest-device-card::before,
body.density-ultra .largest-device-card::before{opacity:.82;}
body.density-ultra .device-card.zone-meter-card{min-height:94px !important;padding:9px 10px !important;grid-template-columns:48px minmax(0,1fr) auto !important;}
body.density-ultra .mini-device-gauge{width:46px !important;height:46px !important;}
body.density-ultra .device-name{font-size:14px !important;}
body.density-ultra .device-watt{font-size:20px !important;}
body.density-ultra .muted-line{display:none !important;}
body.density-ultra .device-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
body.density-ultra .device-stats div:nth-child(3){display:none;}

/* meer neon, maar geen tekstsoep */
.hud-panel,.metric-card,.device-card,.chart-card{border-color:rgba(24,234,255,.25);}
.pill.live{box-shadow:0 0 15px rgba(85,244,154,.25),inset 0 0 10px rgba(85,244,154,.06) !important;}
.bar-wrap.thin-bars .bar,.hbar-fill{filter:drop-shadow(0 0 4px rgba(24,234,255,.42)) drop-shadow(0 0 6px rgba(255,66,218,.20));}

@media(max-width:1500px){
  body.density-compact .device-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  body.density-ultra .device-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  body.density-compact .weather-metrics,
  body.density-ultra .weather-metrics{grid-template-columns:repeat(3,1fr) !important;}
}
@media(max-width:1200px){
  .device-toolbar{grid-template-columns:1fr;}
  body.density-compact .device-grid,
  body.density-ultra .device-grid{grid-template-columns:1fr !important;}
  body.density-compact .weather-strip,
  body.density-ultra .weather-strip{grid-template-columns:1fr !important;}
}

/* =========================================================
   v0.5.8b hotfix: zichtbare weergave-instelling, echte desktopgrid,
   compacte weather-widget en minder lange weerbalk.
   ========================================================= */
.settings-view-card{
  border-color:rgba(24,234,255,.24) !important;
  box-shadow:0 0 26px rgba(24,234,255,.08),0 0 38px rgba(255,66,218,.06) !important;
}
.settings-view-card h3{margin-bottom:8px !important;}
.settings-view-card .hint{margin:0 0 12px !important;color:#9bb7d3;max-width:760px;line-height:1.35;}

/* Compacte weather-widget: geen full-width treinwagon meer */
.weather-strip.compact-weather-card{
  width:min(520px,100%) !important;
  max-width:520px !important;
  min-height:0 !important;
  padding:14px 15px !important;
  display:grid !important;
  grid-template-columns:1fr auto !important;
  grid-template-areas:
    "date btn"
    "main main"
    "place place"
    "metrics metrics" !important;
  align-items:center !important;
  gap:8px 12px !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 14% 16%, rgba(24,234,255,.15), transparent 42%),
    radial-gradient(circle at 92% 18%, rgba(255,66,218,.12), transparent 48%),
    linear-gradient(135deg, rgba(6,32,45,.82), rgba(11,15,31,.90) 58%, rgba(41,13,44,.72)) !important;
  box-shadow:0 0 28px rgba(24,234,255,.13),0 0 36px rgba(255,66,218,.08),inset 0 0 20px rgba(24,234,255,.035) !important;
}
.weather-date-row{
  grid-area:date;
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
}
.weather-date-row span{
  color:#eaf9ff;
  font-weight:650;
  font-size:14px;
  text-transform:capitalize;
  white-space:nowrap;
}
.weather-date-row strong{
  color:#47eaff;
  font-size:20px;
  font-weight:700;
  letter-spacing:-.03em;
  text-shadow:0 0 14px rgba(24,234,255,.30);
}
.weather-strip.compact-weather-card .weather-location-btn{
  grid-area:btn;
  min-height:28px !important;
  padding:5px 9px !important;
  border-radius:11px !important;
  font-size:10px !important;
  white-space:nowrap;
}
.weather-strip.compact-weather-card .weather-main{
  grid-area:main;
  display:grid !important;
  grid-template-columns:54px minmax(0,1fr) !important;
  gap:12px !important;
  align-items:center !important;
}
.weather-strip.compact-weather-card .weather-icon{
  width:48px !important;
  height:48px !important;
  font-size:27px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:17px !important;
  background:rgba(6,20,34,.70) !important;
  box-shadow:0 0 18px rgba(24,234,255,.30),0 0 18px rgba(255,205,58,.14),inset 0 0 13px rgba(24,234,255,.10) !important;
}
.weather-temp-block strong,
.weather-strip.compact-weather-card #weatherTemp{
  display:inline-block !important;
  color:#f7fbff !important;
  font-size:35px !important;
  line-height:.94 !important;
  font-weight:720 !important;
  letter-spacing:-.055em !important;
  text-shadow:0 0 18px rgba(24,234,255,.22) !important;
  margin-right:8px;
}
.weather-temp-block span,
.weather-strip.compact-weather-card #weatherSummary{
  color:#a9c2d8 !important;
  font-size:12px !important;
  font-weight:520 !important;
  white-space:nowrap;
}
.weather-place-row{
  grid-area:place;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:#94b2ce;
}
.weather-place-row strong{
  color:#effaff;
  font-size:13px;
  font-weight:650;
  white-space:nowrap;
}
.weather-place-row small{
  color:#86a4bf;
  font-size:11px;
  font-weight:450;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.weather-strip.compact-weather-card .weather-metrics{
  grid-area:metrics;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:6px !important;
}
.weather-strip.compact-weather-card .weather-metrics div{
  padding:6px 7px !important;
  min-height:0 !important;
  border-radius:11px !important;
  background:rgba(3,13,26,.38) !important;
  border:1px solid rgba(24,234,255,.10) !important;
}
.weather-strip.compact-weather-card .weather-metrics span{
  display:block;
  font-size:8.5px !important;
  color:#7895ad !important;
  font-weight:430 !important;
  margin-bottom:2px;
}
.weather-strip.compact-weather-card .weather-metrics strong{
  display:block;
  font-size:10.5px !important;
  color:#f0fbff !important;
  font-weight:650 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

body.density-compact .weather-strip.compact-weather-card{
  width:min(455px,100%) !important;
  padding:12px 13px !important;
  gap:7px 10px !important;
}
body.density-compact .weather-date-row span{font-size:12.5px;}
body.density-compact .weather-date-row strong{font-size:18px;}
body.density-compact .weather-strip.compact-weather-card .weather-main{grid-template-columns:48px minmax(0,1fr) !important;gap:10px !important;}
body.density-compact .weather-strip.compact-weather-card .weather-icon{width:42px !important;height:42px !important;font-size:24px !important;border-radius:15px !important;}
body.density-compact .weather-strip.compact-weather-card #weatherTemp{font-size:31px !important;}
body.density-compact .weather-strip.compact-weather-card .weather-metrics{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
body.density-compact .weather-strip.compact-weather-card .weather-metrics div{padding:5px 6px !important;}
body.density-compact .weather-strip.compact-weather-card .weather-metrics strong{font-size:9.8px !important;}

body.density-ultra .weather-strip.compact-weather-card{
  width:min(380px,100%) !important;
  padding:10px 11px !important;
  border-radius:18px !important;
  gap:6px 8px !important;
}
body.density-ultra .weather-date-row span{font-size:11px;}
body.density-ultra .weather-date-row strong{font-size:16px;}
body.density-ultra .weather-strip.compact-weather-card .weather-main{grid-template-columns:40px minmax(0,1fr) !important;gap:8px !important;}
body.density-ultra .weather-strip.compact-weather-card .weather-icon{width:36px !important;height:36px !important;font-size:21px !important;border-radius:13px !important;}
body.density-ultra .weather-strip.compact-weather-card #weatherTemp{font-size:27px !important;}
body.density-ultra .weather-temp-block span{font-size:10.5px !important;}
body.density-ultra .weather-place-row small{display:none;}
body.density-ultra .weather-strip.compact-weather-card .weather-metrics{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
body.density-ultra .weather-strip.compact-weather-card .weather-metrics div:nth-child(5){display:none;}

/* Desktopgrid afdwingen. Eerdere max-width-regels maakten op Robs scherm 2 kolommen. */
@media (min-width:1200px){
  body.density-compact .device-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:9px !important;}
  body.density-ultra .device-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:8px !important;}
}
@media (max-width:1199px){
  body.density-compact .device-grid,
  body.density-ultra .device-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:780px){
  body.density-compact .device-grid,
  body.density-ultra .device-grid{grid-template-columns:1fr !important;}
  .weather-strip.compact-weather-card{width:100% !important;grid-template-columns:1fr !important;grid-template-areas:"date" "main" "place" "metrics" "btn" !important;}
  .weather-strip.compact-weather-card .weather-location-btn{justify-self:start;}
  .weather-strip.compact-weather-card .weather-metrics{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

/* Nog iets plattere stekkerkaarten */
body.density-compact .device-card.zone-meter-card{min-height:108px !important;padding:10px 11px !important;}
body.density-ultra .device-card.zone-meter-card{min-height:88px !important;padding:8px 9px !important;}


/* =========================================================
   v0.5.8c Compact Cockpit Polish
   Doel: hele dashboard compacter, weather 35% kleiner,
   stekkermeters groter, Watt volledig op kaart, grafieken lager.
   ========================================================= */

/* Algemene cockpit-density: lucht eruit, waardes leesbaar houden */
body.density-comfort .shell,
body.density-compact .shell,
body.density-ultra .shell{
  padding-top:14px !important;
  padding-left:18px !important;
  padding-right:18px !important;
  padding-bottom:22px !important;
}
body.density-comfort .hud-topbar,
body.density-compact .hud-topbar,
body.density-ultra .hud-topbar{margin-bottom:10px !important;}
body.density-comfort h1,
body.density-compact h1,
body.density-ultra h1{font-size:30px !important;}
body.density-comfort .crumb,
body.density-compact .crumb,
body.density-ultra .crumb{font-size:10px !important;margin-bottom:3px !important;}
body.density-comfort .build-label,
body.density-compact .build-label,
body.density-ultra .build-label{font-size:11px !important;}

@media (min-width:1200px){
  body.density-comfort .cockpit{grid-template-columns:255px 1fr !important;gap:14px !important;}
  body.density-compact .cockpit{grid-template-columns:230px 1fr !important;gap:12px !important;}
  body.density-ultra .cockpit{grid-template-columns:210px 1fr !important;gap:10px !important;}
}
body.density-comfort .right-panel,
body.density-compact .right-panel,
body.density-ultra .right-panel{gap:8px !important;}
body.density-comfort .kpi-line{min-height:128px !important;}
body.density-compact .kpi-line{min-height:116px !important;}
body.density-ultra .kpi-line{min-height:108px !important;}
body.density-comfort .metric-card,
body.density-compact .metric-card,
body.density-ultra .metric-card{padding:12px 15px 10px !important;}
body.density-comfort .metric-card h2,
body.density-compact .metric-card h2,
body.density-ultra .metric-card h2{font-size:13px !important;margin-top:4px !important;}
body.density-comfort .metric-card p,
body.density-compact .metric-card p,
body.density-ultra .metric-card p{font-size:11px !important;line-height:1.25 !important;}
body.density-comfort .metric-value{font-size:clamp(24px,1.55vw,31px) !important;}
body.density-compact .metric-value{font-size:clamp(22px,1.45vw,29px) !important;}
body.density-ultra .metric-value{font-size:clamp(21px,1.35vw,27px) !important;}
body.density-comfort .hud-icon,
body.density-compact .hud-icon,
body.density-ultra .hud-icon{width:40px !important;height:40px !important;font-size:17px !important;}
body.density-comfort .gauge-area{min-height:300px !important;}
body.density-compact .gauge-area{min-height:280px !important;}
body.density-ultra .gauge-area{min-height:260px !important;}
body.density-comfort .exact-gauge,
body.density-comfort .smooth-gauge{width:195px !important;height:195px !important;}
body.density-compact .exact-gauge,
body.density-compact .smooth-gauge{width:178px !important;height:178px !important;}
body.density-ultra .exact-gauge,
body.density-ultra .smooth-gauge{width:164px !important;height:164px !important;}
body.density-comfort .gauge-value{font-size:38px !important;}
body.density-compact .gauge-value{font-size:35px !important;}
body.density-ultra .gauge-value{font-size:32px !important;}
body.density-comfort .gauge-area h2,
body.density-compact .gauge-area h2,
body.density-ultra .gauge-area h2{font-size:15px !important;margin:6px 0 !important;}
body.density-comfort .gauge-status,
body.density-compact .gauge-status,
body.density-ultra .gauge-status{margin-top:4px !important;gap:8px !important;}

/* Weather-card: compact dashboard widget, niet meer een weerbalk */
.weather-strip.compact-weather-card{
  width:min(360px,100%) !important;
  min-height:unset !important;
  padding:9px 10px !important;
  border-radius:17px !important;
  gap:4px 7px !important;
  grid-template-columns:1fr auto !important;
  grid-template-areas:
    "date btn"
    "main main"
    "place place"
    "metrics metrics" !important;
}
.weather-date-row{gap:7px !important;}
.weather-date-row span{font-size:10.5px !important;font-weight:620 !important;}
.weather-date-row strong{font-size:14px !important;}
.weather-strip.compact-weather-card .weather-location-btn{
  min-height:22px !important;
  padding:3px 7px !important;
  font-size:8.5px !important;
  border-radius:9px !important;
}
.weather-strip.compact-weather-card .weather-main{
  grid-template-columns:34px minmax(0,1fr) !important;
  gap:7px !important;
  align-items:center !important;
}
.weather-strip.compact-weather-card .weather-icon{
  width:31px !important;
  height:31px !important;
  font-size:18px !important;
  border-radius:11px !important;
}
.weather-strip.compact-weather-card #weatherTemp{
  font-size:23px !important;
  line-height:.92 !important;
  margin-right:5px !important;
}
.weather-temp-block span,
.weather-strip.compact-weather-card #weatherSummary{font-size:9.5px !important;}
.weather-place-row{gap:6px !important;line-height:1 !important;}
.weather-place-row strong{font-size:10px !important;}
.weather-place-row small{font-size:9px !important;}
.weather-strip.compact-weather-card .weather-metrics{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:4px !important;
}
.weather-strip.compact-weather-card .weather-metrics div{
  padding:3px 4px !important;
  border-radius:8px !important;
}
.weather-strip.compact-weather-card .weather-metrics span{
  font-size:7px !important;
  margin-bottom:1px !important;
}
.weather-strip.compact-weather-card .weather-metrics strong{
  font-size:8.5px !important;
  font-weight:650 !important;
}
body.density-comfort .weather-strip.compact-weather-card{width:min(365px,100%) !important;}
body.density-compact .weather-strip.compact-weather-card{width:min(330px,100%) !important;padding:8px 9px !important;}
body.density-ultra .weather-strip.compact-weather-card{width:min(295px,100%) !important;padding:7px 8px !important;border-radius:15px !important;}
body.density-ultra .weather-strip.compact-weather-card #weatherTemp{font-size:21px !important;}
body.density-ultra .weather-strip.compact-weather-card .weather-icon{width:29px !important;height:29px !important;font-size:17px !important;}
body.density-ultra .weather-place-row small{display:inline-block !important;max-width:95px;overflow:hidden;text-overflow:ellipsis;}
body.density-ultra .weather-strip.compact-weather-card .weather-metrics{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
body.density-ultra .weather-strip.compact-weather-card .weather-metrics div:nth-child(5){display:block !important;}

/* Stekkergrid: comfort is ook dashboard, geen 1-koloms ladder */
@media (min-width:1200px){
  body.density-comfort .device-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px !important;}
  body.density-compact .device-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;}
  body.density-ultra .device-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:7px !important;}
}
.device-toolbar{gap:7px !important;margin-bottom:7px !important;}
.device-toolbar .input{min-height:30px !important;padding:6px 9px !important;font-size:11px !important;border-radius:10px !important;}
.section-title-row{margin-bottom:6px !important;}
.section-title-row h2{font-size:16px !important;}
.section-title-row span{font-size:10.5px !important;}
body.density-compact .device-card.zone-meter-card,
body.density-ultra .device-card.zone-meter-card{
  min-height:96px !important;
  padding:8px 9px !important;
  gap:6px 9px !important;
  grid-template-columns:64px minmax(0,1fr) auto !important;
  border-radius:15px !important;
}
body.density-compact .mini-device-gauge,
body.density-ultra .mini-device-gauge{
  width:58px !important;
  height:58px !important;
}
body.density-compact .mini-device-gauge::after,
body.density-ultra .mini-device-gauge::after{inset:5px !important;}
body.density-compact .mini-device-value,
body.density-ultra .mini-device-value{font-size:14px !important;}
body.density-compact .mini-device-value span,
body.density-ultra .mini-device-value span{font-size:7px !important;}
body.density-compact .device-name,
body.density-ultra .device-name{font-size:15px !important;line-height:1.05 !important;}
body.density-compact .device-watt,
body.density-ultra .device-watt{font-size:22px !important;line-height:1 !important;}
body.density-compact .device-watt span,
body.density-ultra .device-watt span{font-size:.50em !important;margin-left:3px !important;letter-spacing:0 !important;}
body.density-compact .device-meta,
body.density-ultra .device-meta{font-size:9.8px !important;}
body.density-compact .device-stats,
body.density-ultra .device-stats{padding-top:5px !important;gap:3px !important;}
body.density-compact .device-stats span,
body.density-ultra .device-stats span{font-size:7.6px !important;}
body.density-compact .device-stats strong,
body.density-ultra .device-stats strong{font-size:9px !important;}
body.density-ultra .device-card.zone-meter-card{
  min-height:90px !important;
  grid-template-columns:60px minmax(0,1fr) auto !important;
}
body.density-ultra .mini-device-gauge{width:54px !important;height:54px !important;}
body.density-ultra .device-name{font-size:14px !important;}
body.density-ultra .device-watt{font-size:20px !important;}
body.density-ultra .device-livebox .device-meta:nth-child(2){display:none !important;}
body.density-ultra .device-stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}

/* Grafieken: lager en in cockpitstijl. Ultra/Compact passen als tiles op brede schermen. */
.charts-grid{gap:9px !important;margin-top:10px !important;}
.chart-card{min-height:190px !important;padding:10px 11px 10px !important;border-radius:15px !important;}
.chart-card h2{font-size:13px !important;margin-bottom:7px !important;}
.bar-chart,.line-chart,.horizontal-bars{height:138px !important;border-radius:12px !important;}
.bar-wrap{inset:10px 9px 22px 36px !important;}
.hbar-track{height:8px !important;}
.hbar-row{gap:5px !important;}
.hbar-label,.hbar-value{font-size:10px !important;}
@media (min-width:1400px){
  body.density-compact .charts-grid,
  body.density-ultra .charts-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  body.density-compact .chart-card,
  body.density-ultra .chart-card{min-height:170px !important;}
  body.density-compact .bar-chart,
  body.density-compact .line-chart,
  body.density-compact .horizontal-bars,
  body.density-ultra .bar-chart,
  body.density-ultra .line-chart,
  body.density-ultra .horizontal-bars{height:122px !important;}
}
@media (max-width:1399px){
  body.density-compact .charts-grid,
  body.density-ultra .charts-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

/* Period-strip compacter */
.period-panel{padding:12px 16px !important;margin-top:10px !important;}
.period-btn{min-width:72px !important;padding:9px 12px !important;border-radius:10px !important;}
.period-summary{padding:9px 13px !important;border-radius:12px !important;}
.period-actions .btn{min-height:34px !important;padding:8px 13px !important;border-radius:11px !important;}

/* Minder witte ruimte onderaan in desktop-cockpit */
body.density-compact .cockpit,
body.density-ultra .cockpit{margin-bottom:0 !important;}

/* v0.5.9 Safe Tuya Control */
.settings-sep{
  border:0;
  border-top:1px solid rgba(24,234,255,.18);
  margin:14px 0;
}
.danger-check span{color:#ffe8f5}
.danger-check input{accent-color:var(--orange)}
.device-control-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  margin-top:5px;
  flex-wrap:wrap;
}
.mini-control-btn{
  min-height:22px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(85,244,154,.42);
  background:rgba(9,40,28,.26);
  color:#cffff0;
  font-size:10px;
  font-weight:750;
  cursor:pointer;
  line-height:1;
  box-shadow:0 0 12px rgba(85,244,154,.10);
}
.mini-control-btn:hover{transform:translateY(-1px);box-shadow:0 0 18px rgba(85,244,154,.26)}
.mini-control-btn.danger{
  border-color:rgba(255,112,138,.42);
  background:rgba(55,10,20,.25);
  color:#ffd6df;
  box-shadow:0 0 12px rgba(255,112,138,.10);
}
.mini-control-btn.danger:hover{box-shadow:0 0 18px rgba(255,112,138,.25)}
.mini-control-btn.active{
  background:linear-gradient(135deg,rgba(85,244,154,.42),rgba(24,234,255,.20));
  color:#ffffff;
}
.mini-control-btn.danger.active{
  background:linear-gradient(135deg,rgba(255,112,138,.46),rgba(255,66,218,.16));
}
.control-hint{
  margin-top:4px;
  color:var(--dim);
  font-size:9px;
  font-weight:600;
  text-align:right;
}
.critical-chip{
  border:1px solid rgba(255,153,36,.50);
  color:#ffd28d;
  border-radius:999px;
  padding:3px 6px;
  font-size:9px;
  font-weight:800;
  background:rgba(255,153,36,.08);
  box-shadow:0 0 14px rgba(255,153,36,.12);
}
body.density-compact .device-control-row,
body.density-ultra .device-control-row{gap:4px;margin-top:3px;}
body.density-compact .mini-control-btn,
body.density-ultra .mini-control-btn{min-height:19px;padding:3px 6px;font-size:9px;}
body.density-ultra .critical-chip{font-size:8px;padding:2px 5px;}


/* v0.5.9b Visible settings power buttons */
.device-power-panel{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(24,234,255,.22);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(0,211,255,.055),rgba(255,66,218,.045));
  box-shadow:inset 0 0 18px rgba(24,234,255,.04),0 0 18px rgba(24,234,255,.05);
}
.power-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.power-panel-head h4{
  margin:0 0 3px;
  font-size:13px;
  letter-spacing:.02em;
}
.device-power-panel .hint{margin:0;color:var(--muted);font-size:11px;line-height:1.35;}
.device-power-panel .hint.tiny{font-size:10px;margin-top:8px;color:var(--dim);}
.power-state-badge{
  border-radius:999px;
  border:1px solid rgba(160,190,210,.25);
  padding:5px 8px;
  white-space:nowrap;
  font-size:10px;
  font-weight:800;
  color:var(--muted);
  background:rgba(255,255,255,.03);
}
.power-state-badge.on{border-color:rgba(85,244,154,.45);color:#cffff0;background:rgba(85,244,154,.10);box-shadow:0 0 14px rgba(85,244,154,.13)}
.power-state-badge.off{border-color:rgba(255,112,138,.45);color:#ffd6df;background:rgba(255,112,138,.10);box-shadow:0 0 14px rgba(255,112,138,.13)}
.power-test-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;}
.btn.power-on{
  background:linear-gradient(135deg,rgba(85,244,154,.96),rgba(24,234,255,.62));
  color:#031712;
  border-color:rgba(85,244,154,.60);
  box-shadow:0 0 22px rgba(85,244,154,.20);
}
.btn.power-off{
  background:linear-gradient(135deg,rgba(255,103,80,.98),rgba(255,139,36,.86));
  color:#180805;
  border-color:rgba(255,139,36,.65);
  box-shadow:0 0 22px rgba(255,116,36,.22);
}
.btn.power-on:disabled,.btn.power-off:disabled{opacity:.55;filter:saturate(.75);cursor:not-allowed;}


/* v0.5.9c Control Status Polish + Neo Glow Clarity Polish
   - Alleen UI/status-polish, Tuya-control flow en logs/tuya-control.log blijven intact
   - TEST STEKKER wordt visueel/logisch niet-kritiek
*/
:root{
  --rem-sharp-cyan:rgba(31,242,255,.96);
  --rem-sharp-blue:rgba(54,135,255,.78);
  --rem-sharp-pink:rgba(255,66,218,.56);
  --rem-sharp-line:rgba(24,234,255,.42);
  --rem-panel-glow:0 0 0 1px rgba(24,234,255,.16),0 0 20px rgba(24,234,255,.18),0 0 52px rgba(54,135,255,.10),0 0 70px rgba(255,66,218,.06);
  --rem-card-glow:0 0 0 1px rgba(24,234,255,.18),0 0 18px rgba(24,234,255,.18),0 0 38px rgba(54,135,255,.10),0 0 46px rgba(255,66,218,.055);
}
body{
  background:
    radial-gradient(circle at 18% 16%,rgba(24,234,255,.18),transparent 28%),
    radial-gradient(circle at 82% 13%,rgba(54,135,255,.11),transparent 24%),
    radial-gradient(circle at 88% 72%,rgba(255,66,218,.08),transparent 30%),
    linear-gradient(180deg,#030817 0%,#020713 56%,#00040b 100%) !important;
}
body::before{
  opacity:.54 !important;
  background:
    linear-gradient(rgba(24,234,255,.046) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,234,255,.038) 1px,transparent 1px) !important;
  background-size:42px 42px !important;
}
.cockpit,.hud-panel,.metric-card,.chart-card,.device-card,.weather-strip,.period-summary,.input,.select,.badge{
  border-color:var(--rem-sharp-line) !important;
  box-shadow:var(--rem-panel-glow) !important;
}
.cockpit::before,.hud-panel::before,.device-card::before,.metric-card::before,.chart-card::before{
  opacity:.88 !important;
  filter:drop-shadow(0 0 7px rgba(24,234,255,.52)) drop-shadow(0 0 16px rgba(54,135,255,.24));
}
.device-card.zone-meter-card{
  border-color:rgba(24,234,255,.46) !important;
  background:
    linear-gradient(110deg,rgba(4,18,34,.42),rgba(2,8,20,.24) 58%,rgba(255,66,218,.050)) !important;
  box-shadow:var(--rem-card-glow) !important;
}
.device-card.zone-meter-card:hover{
  border-color:rgba(31,242,255,.72) !important;
  box-shadow:0 0 0 1px rgba(24,234,255,.24),0 0 26px rgba(24,234,255,.26),0 0 58px rgba(54,135,255,.16),0 0 68px rgba(255,66,218,.10) !important;
}
.largest-device-card{
  border-color:rgba(255,66,218,.72) !important;
  box-shadow:0 0 0 1px rgba(255,66,218,.24),0 0 24px rgba(24,234,255,.26),0 0 56px rgba(255,66,218,.17) !important;
}
.exact-gauge,.smooth-gauge{
  filter:drop-shadow(0 0 8px rgba(24,234,255,.55)) drop-shadow(0 0 22px rgba(54,135,255,.34)) drop-shadow(0 0 28px rgba(255,66,218,.14));
}
.gauge-progress{
  stroke-width:14px !important;
  filter:drop-shadow(0 0 7px rgba(24,234,255,.95)) drop-shadow(0 0 13px rgba(54,135,255,.72)) drop-shadow(0 0 16px rgba(255,66,218,.36)) !important;
}
.gauge-tech-ring{filter:drop-shadow(0 0 5px rgba(24,234,255,.36));}
.ring-a{stroke:rgba(24,234,255,.34) !important;}
.ring-b{stroke:rgba(24,234,255,.52) !important;}
.ring-c{stroke:rgba(255,66,218,.36) !important;}
.ring-d{stroke:rgba(54,135,255,.34) !important;}
.gauge-value,.device-watt,.metric-value,.cost-table strong{
  text-shadow:0 0 12px rgba(24,234,255,.28),0 0 22px rgba(54,135,255,.18) !important;
}
.mini-device-gauge{
  border-color:rgba(31,242,255,.36) !important;
  box-shadow:0 0 15px rgba(24,234,255,.42),0 0 25px rgba(54,135,255,.20),0 0 32px rgba(255,66,218,.12),inset 0 0 16px rgba(24,234,255,.16) !important;
}
.mini-device-gauge::after{
  border-color:rgba(24,234,255,.44) !important;
  box-shadow:inset 0 0 14px rgba(24,234,255,.18),0 0 10px rgba(24,234,255,.14) !important;
}
.device-livebox{gap:5px !important;}
.device-switch-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:19px;
  padding:3px 8px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  border:1px solid rgba(160,190,210,.24);
  background:rgba(255,255,255,.035);
  color:#aebfd2;
}
.device-switch-state.on{
  border-color:rgba(85,244,154,.70);
  color:#d8fff0;
  background:linear-gradient(135deg,rgba(85,244,154,.22),rgba(24,234,255,.10));
  box-shadow:0 0 13px rgba(85,244,154,.30),inset 0 0 10px rgba(85,244,154,.08);
}
.device-switch-state.off{
  border-color:rgba(255,153,36,.78);
  color:#ffe1b6;
  background:linear-gradient(135deg,rgba(255,112,60,.20),rgba(255,153,36,.13));
  box-shadow:0 0 13px rgba(255,139,36,.28),inset 0 0 10px rgba(255,139,36,.08);
}
.switch-is-on .mini-device-gauge{box-shadow:0 0 15px rgba(85,244,154,.32),0 0 26px rgba(24,234,255,.24),inset 0 0 16px rgba(85,244,154,.10) !important;}
.switch-is-off .mini-device-gauge{filter:saturate(.86) brightness(.92);}
.control-chip,.critical-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:18px;
  letter-spacing:.03em;
}
.control-chip{
  border:1px solid rgba(24,234,255,.58);
  color:#bff8ff;
  border-radius:999px;
  padding:3px 7px;
  font-size:8.5px;
  font-weight:900;
  background:rgba(24,234,255,.075);
  box-shadow:0 0 14px rgba(24,234,255,.16),inset 0 0 8px rgba(24,234,255,.055);
}
.critical-chip{
  border-color:rgba(255,153,36,.78) !important;
  color:#ffe0ad !important;
  background:rgba(255,153,36,.12) !important;
  box-shadow:0 0 16px rgba(255,153,36,.22),inset 0 0 8px rgba(255,153,36,.06) !important;
}
.mini-control-btn{
  border-color:rgba(85,244,154,.56) !important;
  background:rgba(9,40,28,.34) !important;
  box-shadow:0 0 13px rgba(85,244,154,.16),inset 0 0 8px rgba(85,244,154,.04) !important;
}
.mini-control-btn.active{
  background:linear-gradient(135deg,rgba(85,244,154,.82),rgba(24,234,255,.30)) !important;
  border-color:rgba(85,244,154,.92) !important;
  color:#ffffff !important;
  box-shadow:0 0 17px rgba(85,244,154,.44),0 0 24px rgba(24,234,255,.18) !important;
}
.mini-control-btn.danger{
  border-color:rgba(255,153,36,.62) !important;
  background:rgba(66,24,10,.32) !important;
  color:#ffe0c2 !important;
  box-shadow:0 0 13px rgba(255,139,36,.15),inset 0 0 8px rgba(255,139,36,.04) !important;
}
.mini-control-btn.danger.active{
  background:linear-gradient(135deg,rgba(255,103,80,.88),rgba(255,153,36,.54)) !important;
  border-color:rgba(255,153,36,.95) !important;
  color:#ffffff !important;
  box-shadow:0 0 17px rgba(255,139,36,.42),0 0 24px rgba(255,66,218,.14) !important;
}
.mini-control-btn:disabled,.btn.power-on:disabled,.btn.power-off:disabled{
  opacity:.38 !important;
  filter:saturate(.55) brightness(.78) !important;
  cursor:not-allowed !important;
  transform:none !important;
  box-shadow:none !important;
}
.btn.power-on.active{
  outline:1px solid rgba(255,255,255,.28);
  box-shadow:0 0 24px rgba(85,244,154,.46),0 0 36px rgba(24,234,255,.18) !important;
}
.btn.power-off.active{
  outline:1px solid rgba(255,255,255,.28);
  box-shadow:0 0 24px rgba(255,139,36,.46),0 0 36px rgba(255,66,218,.15) !important;
}
.critical-help{margin-top:-4px !important;color:#91aeca !important;}
.critical-check input:disabled + span{opacity:.55;}
body.density-compact .device-switch-state,
body.density-ultra .device-switch-state,
body.density-compact .control-chip,
body.density-ultra .control-chip{font-size:8px;padding:2px 5px;min-height:17px;}
body.density-ultra .device-switch-state{display:none;}

/* v0.5.9d Neo Glow Boost + Wave Graph Polish
   - Alleen UI/CSS + grafiekweergave polish
   - Tuya-control, logging en apparaatdata blijven intact
*/
:root{
  --rem-59d-cyan:#20f7ff;
  --rem-59d-blue:#238cff;
  --rem-59d-purple:#915cff;
  --rem-59d-pink:#ff43d9;
  --rem-59d-orange:#ff982f;
  --rem-59d-edge:rgba(32,247,255,.66);
  --rem-59d-glass:rgba(2,13,27,.58);
}
body{
  background:
    radial-gradient(circle at 18% 18%,rgba(32,247,255,.22),transparent 24%),
    radial-gradient(circle at 70% 10%,rgba(35,140,255,.17),transparent 28%),
    radial-gradient(circle at 88% 68%,rgba(255,67,217,.11),transparent 34%),
    radial-gradient(circle at 48% 92%,rgba(255,152,47,.052),transparent 30%),
    linear-gradient(180deg,#020715 0%,#020816 42%,#00030a 100%) !important;
}
.cockpit,.hud-panel,.metric-card,.chart-card,.device-card,.weather-strip,.period-summary{
  border-color:rgba(32,247,255,.52) !important;
  box-shadow:
    0 0 0 1px rgba(32,247,255,.18),
    0 0 18px rgba(32,247,255,.24),
    0 0 46px rgba(35,140,255,.15),
    0 0 70px rgba(255,67,217,.08),
    inset 0 0 22px rgba(32,247,255,.035) !important;
}
.cockpit::before,.hud-panel::before,.device-card::before,.metric-card::before,.chart-card::before{
  filter:drop-shadow(0 0 6px rgba(32,247,255,.76)) drop-shadow(0 0 17px rgba(35,140,255,.36)) !important;
  opacity:.98 !important;
}
.exact-gauge,.smooth-gauge{
  filter:drop-shadow(0 0 10px rgba(32,247,255,.72)) drop-shadow(0 0 28px rgba(35,140,255,.48)) drop-shadow(0 0 34px rgba(255,67,217,.20)) !important;
}
.gauge-progress{
  stroke-width:14.5px !important;
  filter:drop-shadow(0 0 8px rgba(32,247,255,1)) drop-shadow(0 0 17px rgba(35,140,255,.86)) drop-shadow(0 0 22px rgba(255,67,217,.38)) !important;
}
.gauge-warm-arc{
  filter:drop-shadow(0 0 6px rgba(255,152,47,.88)) drop-shadow(0 0 17px rgba(255,67,217,.34)) !important;
}
.chart-card{
  background:
    radial-gradient(circle at 16% 10%,rgba(32,247,255,.13),transparent 28%),
    radial-gradient(circle at 84% 18%,rgba(35,140,255,.09),transparent 32%),
    linear-gradient(135deg,rgba(3,17,35,.54),rgba(1,7,17,.34) 56%,rgba(40,5,48,.13)) !important;
  border-color:rgba(32,247,255,.58) !important;
}
.bar-chart,.line-chart,.horizontal-bars{
  background:
    radial-gradient(circle at 20% 8%,rgba(32,247,255,.105),transparent 30%),
    radial-gradient(circle at 82% 18%,rgba(35,140,255,.075),transparent 35%),
    linear-gradient(180deg,rgba(5,19,39,.46),rgba(0,5,15,.23)),
    repeating-linear-gradient(90deg,rgba(32,247,255,.075) 0 1px,transparent 1px 50px),
    repeating-linear-gradient(180deg,rgba(32,247,255,.060) 0 1px,transparent 1px 34px) !important;
  border-color:rgba(32,247,255,.34) !important;
  box-shadow:
    inset 0 0 0 1px rgba(32,247,255,.06),
    inset 0 0 28px rgba(32,247,255,.075),
    inset 0 0 56px rgba(35,140,255,.040),
    0 0 16px rgba(32,247,255,.10),
    0 0 26px rgba(255,67,217,.035) !important;
}
.bar-chart::before,.line-chart::before,.horizontal-bars::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(32,247,255,.9),rgba(35,140,255,.55),rgba(255,67,217,.45),transparent);
  box-shadow:0 0 12px rgba(32,247,255,.72),0 0 24px rgba(35,140,255,.32);
  opacity:.78;
}
.bar-chart .grid-line,.line-chart .grid-line{
  background:linear-gradient(90deg,transparent,rgba(32,247,255,.20),rgba(35,140,255,.14),rgba(255,67,217,.10),transparent) !important;
}
.wave-svg{
  position:absolute;
  inset:10px 9px 22px 36px;
  overflow:visible;
}
.wave-area{
  opacity:.92;
}
.wave-line{
  fill:none;
  stroke-width:4.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.wave-line-glow{
  opacity:.98;
  stroke-width:7.2;
}
.wave-line-core{
  opacity:1;
  stroke-width:2.8;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.54));
}
.wave-point{
  fill:#eaffff;
  stroke:var(--rem-59d-cyan);
  stroke-width:1.2;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px rgba(32,247,255,.95)) drop-shadow(0 0 10px rgba(35,140,255,.45));
  opacity:.86;
}
.wave-svg.tone-warm .wave-point{
  stroke:var(--rem-59d-orange);
  filter:drop-shadow(0 0 5px rgba(255,152,47,.92)) drop-shadow(0 0 12px rgba(255,67,217,.42));
}
.line-svg .chart-line,.line-svg polyline{
  stroke-width:3.6 !important;
  filter:drop-shadow(0 0 7px rgba(32,247,255,.82)) drop-shadow(0 0 17px rgba(35,140,255,.44)) !important;
}
.x-labels,.y-labels{
  color:#b4d7eb !important;
  opacity:.94 !important;
  text-shadow:0 0 6px rgba(32,247,255,.22) !important;
}
.chart-card h2{
  color:#f5fbff !important;
  text-shadow:0 0 8px rgba(32,247,255,.42),0 0 18px rgba(35,140,255,.18) !important;
}
.horizontal-bars .hbar-fill,.hbar-fill{
  background:linear-gradient(90deg,var(--rem-59d-cyan),var(--rem-59d-blue),var(--rem-59d-purple),var(--rem-59d-pink)) !important;
  box-shadow:0 0 12px rgba(32,247,255,.48),0 0 24px rgba(35,140,255,.18),0 0 20px rgba(255,67,217,.16) !important;
}
.no-data{
  z-index:3;
}
@media (min-width:1400px){
  body.density-compact .wave-svg,
  body.density-ultra .wave-svg{inset:8px 8px 20px 34px !important;}
}


/* v0.5.9e Reference-B Graph Neon Fix
   - Correctie op v0.5.9d: dunner, scherper, feller zoals voorbeeld B
   - Alleen grafiek/neon polish. Tuya-control, logging en apparaatlogica blijven intact.
*/
:root{
  --rem-59e-cyan:#00eaff;
  --rem-59e-cyan-hot:#72f8ff;
  --rem-59e-blue:#28a8ff;
  --rem-59e-deep-blue:#376dff;
  --rem-59e-purple:#b45cff;
  --rem-59e-magenta:#ff4ee8;
  --rem-59e-orange:#ff9a2f;
}
body{
  background:
    radial-gradient(circle at 18% 18%,rgba(0,234,255,.15),transparent 25%),
    radial-gradient(circle at 72% 10%,rgba(40,168,255,.10),transparent 30%),
    radial-gradient(circle at 86% 70%,rgba(180,92,255,.055),transparent 36%),
    linear-gradient(180deg,#020612 0%,#020817 46%,#00030a 100%) !important;
}
.chart-card{
  background:
    radial-gradient(circle at 15% 8%,rgba(0,234,255,.085),transparent 28%),
    radial-gradient(circle at 82% 16%,rgba(40,168,255,.052),transparent 34%),
    linear-gradient(135deg,rgba(2,13,28,.52),rgba(0,5,15,.31) 60%,rgba(28,7,40,.10)) !important;
  border-color:rgba(0,234,255,.50) !important;
  box-shadow:
    0 0 0 1px rgba(0,234,255,.13),
    0 0 12px rgba(0,234,255,.20),
    0 0 30px rgba(40,168,255,.10),
    inset 0 0 18px rgba(0,234,255,.028) !important;
}
.bar-chart,.line-chart,.horizontal-bars{
  background:
    radial-gradient(circle at 22% 8%,rgba(0,234,255,.060),transparent 28%),
    linear-gradient(180deg,rgba(3,15,32,.40),rgba(0,4,12,.22)),
    repeating-linear-gradient(90deg,rgba(0,234,255,.050) 0 1px,transparent 1px 50px),
    repeating-linear-gradient(180deg,rgba(0,234,255,.038) 0 1px,transparent 1px 34px) !important;
  border-color:rgba(0,234,255,.30) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,234,255,.045),
    inset 0 0 22px rgba(0,234,255,.050),
    0 0 10px rgba(0,234,255,.075) !important;
}
.bar-chart::before,.line-chart::before,.horizontal-bars::before{
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(114,248,255,.74),rgba(40,168,255,.42),transparent) !important;
  box-shadow:0 0 8px rgba(0,234,255,.52),0 0 18px rgba(40,168,255,.22) !important;
  opacity:.68 !important;
}
.bar-chart .grid-line,.line-chart .grid-line{
  background:linear-gradient(90deg,transparent,rgba(0,234,255,.12),rgba(40,168,255,.075),transparent) !important;
  opacity:.72 !important;
}
.wave-svg{
  inset:10px 9px 22px 36px !important;
  overflow:visible;
}
.wave-area{
  opacity:.58 !important;
}
.wave-line{
  fill:none !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  vector-effect:non-scaling-stroke !important;
}
.wave-line-glow{
  stroke-width:3.05 !important;
  opacity:.78 !important;
}
.wave-line-core{
  stroke-width:1.28 !important;
  opacity:1 !important;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.60))
    drop-shadow(0 0 5px rgba(0,234,255,.72)) !important;
}
.wave-svg.tone-warm .wave-line-core{
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.48))
    drop-shadow(0 0 5px rgba(255,78,232,.62)) !important;
}
.wave-point{
  fill:rgba(210,255,255,.92) !important;
  stroke:var(--rem-59e-cyan) !important;
  stroke-width:.7 !important;
  vector-effect:non-scaling-stroke !important;
  filter:drop-shadow(0 0 3px rgba(0,234,255,.72)) !important;
  opacity:.46 !important;
}
.wave-svg.tone-warm .wave-point{
  stroke:var(--rem-59e-magenta) !important;
  filter:drop-shadow(0 0 3px rgba(255,78,232,.58)) !important;
}
.x-labels,.y-labels{
  color:#a9cde2 !important;
  opacity:.86 !important;
  text-shadow:0 0 4px rgba(0,234,255,.15) !important;
}
.chart-card h2{
  color:#f7fbff !important;
  text-shadow:0 0 7px rgba(0,234,255,.34),0 0 14px rgba(40,168,255,.15) !important;
}
.horizontal-bars .hbar-fill,.hbar-fill{
  background:linear-gradient(90deg,var(--rem-59e-cyan),var(--rem-59e-blue),var(--rem-59e-purple),var(--rem-59e-magenta)) !important;
  box-shadow:0 0 8px rgba(0,234,255,.38),0 0 16px rgba(40,168,255,.12),0 0 14px rgba(255,78,232,.13) !important;
}
.gauge-progress{
  filter:drop-shadow(0 0 6px rgba(0,234,255,.88)) drop-shadow(0 0 14px rgba(40,168,255,.60)) drop-shadow(0 0 18px rgba(180,92,255,.18)) !important;
}
.gauge-warm-arc{
  filter:drop-shadow(0 0 5px rgba(255,154,47,.76)) drop-shadow(0 0 12px rgba(255,78,232,.22)) !important;
}
@media (min-width:1400px){
  body.density-compact .wave-svg,
  body.density-ultra .wave-svg{inset:8px 8px 20px 34px !important;}
}


/* v0.5.9f Reference-B Exact Graph Lines
   - Exactere voorbeeld-B grafieklijnen: dun, fel, strak, geen neon-slangen.
   - Alleen grafiek/neon polish. Tuya-control, logging en apparaatlogica blijven intact.
*/
:root{
  --rem-59f-cyan:#00f6ff;
  --rem-59f-blue:#009cff;
  --rem-59f-deep-blue:#238cff;
  --rem-59f-violet:#8e63ff;
  --rem-59f-magenta:#ff55f7;
  --rem-59f-orange:#ff9300;
}
.chart-card{
  background:
    radial-gradient(circle at 17% 9%,rgba(0,246,255,.050),transparent 28%),
    linear-gradient(135deg,rgba(1,10,26,.54),rgba(0,5,16,.30) 62%,rgba(12,7,31,.16)) !important;
  border-color:rgba(0,180,255,.46) !important;
  box-shadow:
    0 0 0 1px rgba(0,246,255,.10),
    0 0 10px rgba(0,156,255,.16),
    0 0 24px rgba(0,120,255,.075),
    inset 0 0 18px rgba(0,246,255,.020) !important;
}
.bar-chart,.line-chart,.horizontal-bars{
  background:
    linear-gradient(180deg,rgba(2,12,29,.55),rgba(0,5,17,.30)),
    repeating-linear-gradient(90deg,rgba(0,120,255,.105) 0 1px,transparent 1px 52px),
    repeating-linear-gradient(180deg,rgba(0,120,255,.090) 0 1px,transparent 1px 34px) !important;
  border-color:rgba(0,174,255,.30) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,246,255,.040),
    inset 0 0 20px rgba(0,130,255,.045),
    0 0 8px rgba(0,174,255,.070) !important;
}
.bar-chart::before,.line-chart::before,.horizontal-bars::before{
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(0,246,255,.72),rgba(0,156,255,.42),transparent) !important;
  box-shadow:0 0 5px rgba(0,246,255,.42),0 0 12px rgba(0,156,255,.20) !important;
  opacity:.62 !important;
}
.bar-chart .grid-line,.line-chart .grid-line{
  background:linear-gradient(90deg,transparent,rgba(0,132,255,.115),rgba(0,246,255,.060),transparent) !important;
  opacity:.62 !important;
}
.wave-svg{
  inset:11px 10px 22px 36px !important;
  shape-rendering:geometricPrecision !important;
  overflow:visible !important;
}
.wave-area{
  opacity:.44 !important;
}
.wave-line{
  fill:none !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  vector-effect:non-scaling-stroke !important;
}
.wave-line-glow{
  stroke-width:2.35 !important;
  opacity:.24 !important;
  filter:blur(.20px) !important;
}
.wave-line-core{
  stroke-width:1.08 !important;
  opacity:1 !important;
  filter:
    drop-shadow(0 0 1.1px rgba(230,255,255,.72))
    drop-shadow(0 0 3.1px rgba(0,246,255,.60))
    drop-shadow(0 0 6.5px rgba(0,156,255,.24)) !important;
}
.wave-svg.tone-warm .wave-line-glow{
  opacity:.20 !important;
}
.wave-svg.tone-warm .wave-line-core{
  stroke-width:1.05 !important;
  filter:
    drop-shadow(0 0 1.0px rgba(255,240,255,.62))
    drop-shadow(0 0 3.2px rgba(255,85,247,.55))
    drop-shadow(0 0 6.5px rgba(142,99,255,.22)) !important;
}
.wave-point{
  fill:rgba(235,255,255,.88) !important;
  stroke:var(--rem-59f-cyan) !important;
  stroke-width:.42 !important;
  vector-effect:non-scaling-stroke !important;
  filter:drop-shadow(0 0 2px rgba(0,246,255,.44)) !important;
  opacity:.18 !important;
}
.wave-svg.tone-warm .wave-point{
  stroke:var(--rem-59f-magenta) !important;
  filter:drop-shadow(0 0 2px rgba(255,85,247,.40)) !important;
  opacity:.15 !important;
}
.x-labels,.y-labels{
  color:#a9c7dc !important;
  opacity:.84 !important;
  text-shadow:0 0 3px rgba(0,156,255,.13) !important;
}
.chart-card h2{
  color:#f8fbff !important;
  text-shadow:0 0 6px rgba(0,246,255,.28),0 0 12px rgba(0,156,255,.13) !important;
}
.horizontal-bars .hbar-fill,.hbar-fill{
  background:linear-gradient(90deg,var(--rem-59f-cyan),var(--rem-59f-blue),var(--rem-59f-violet),var(--rem-59f-magenta)) !important;
  box-shadow:0 0 7px rgba(0,246,255,.34),0 0 13px rgba(0,156,255,.12),0 0 11px rgba(255,85,247,.12) !important;
}
.gauge-progress{
  filter:drop-shadow(0 0 6px rgba(0,246,255,.86)) drop-shadow(0 0 15px rgba(0,156,255,.46)) drop-shadow(0 0 18px rgba(142,99,255,.12)) !important;
}
.gauge-warm-arc{
  filter:drop-shadow(0 0 5px rgba(255,147,0,.72)) drop-shadow(0 0 11px rgba(255,85,247,.16)) !important;
}
@media (min-width:1400px){
  body.density-compact .wave-svg,
  body.density-ultra .wave-svg{inset:9px 9px 20px 34px !important;}
}


/* v0.5.9g Reference-B Exact Neon Match
   - A visueel dichter naar voorbeeld B: harder elektrisch cyaan/blauw, minder melkachtige waas.
   - Grafieken richting voorbeeld 2: dunne lijn, felle kern, subtiele aura, vloeiende cyan/blauw/violet/magenta fade.
   - 90-graden cockpit-hoekprofielen weggehaald.
   - Alleen UI/CSS + grafiek-defs. Tuya-control, aan/uit, kritiek en logging blijven intact.
*/
:root{
  --rem-b-bg:#020612;
  --rem-b-panel:#030a19;
  --rem-b-panel2:#061226;
  --rem-b-cyan:#00e7ff;
  --rem-b-cyan-hot:#64fbff;
  --rem-b-blue:#008cff;
  --rem-b-blue2:#176dff;
  --rem-b-violet:#8b5cff;
  --rem-b-magenta:#d84dff;
  --rem-b-pink:#ff42c8;
  --rem-b-orange:#ff8a00;
  --rem-b-line:rgba(0,231,255,.56);
}
body{
  background:
    radial-gradient(circle at 20% 20%,rgba(0,140,255,.105),transparent 22%),
    radial-gradient(circle at 74% 12%,rgba(0,231,255,.060),transparent 26%),
    radial-gradient(circle at 88% 72%,rgba(139,92,255,.050),transparent 32%),
    linear-gradient(180deg,#020512 0%,#020713 48%,#00030a 100%) !important;
}
body::before{
  background:
    linear-gradient(rgba(0,140,255,.033) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,140,255,.030) 1px,transparent 1px) !important;
  background-size:48px 48px !important;
  opacity:.46 !important;
}
.hud-corner{display:none !important;}
.cockpit{
  background:
    linear-gradient(135deg,rgba(2,9,24,.74),rgba(0,4,14,.50) 62%,rgba(7,8,28,.32)) !important;
  border-color:rgba(0,231,255,.52) !important;
  box-shadow:
    0 0 0 1px rgba(0,231,255,.10),
    0 0 16px rgba(0,140,255,.18),
    0 0 44px rgba(0,80,255,.09),
    inset 0 0 26px rgba(0,231,255,.025) !important;
}
.cockpit::before{
  background:
    linear-gradient(90deg,var(--rem-b-cyan),transparent 15%,transparent 88%,var(--rem-b-blue)) top/100% 1px no-repeat,
    linear-gradient(90deg,var(--rem-b-cyan),transparent 16%,transparent 88%,var(--rem-b-violet)) bottom/100% 1px no-repeat,
    linear-gradient(180deg,var(--rem-b-cyan),transparent 25%,transparent 78%,var(--rem-b-blue)) left/1px 100% no-repeat,
    linear-gradient(180deg,var(--rem-b-blue),transparent 25%,transparent 78%,var(--rem-b-violet)) right/1px 100% no-repeat !important;
  opacity:.82 !important;
  filter:drop-shadow(0 0 5px rgba(0,231,255,.58)) drop-shadow(0 0 13px rgba(0,140,255,.24)) !important;
}
.cockpit::after{
  background:
    radial-gradient(circle at 18% 45%,rgba(0,231,255,.105),transparent 23%),
    linear-gradient(90deg,transparent 0 37%,rgba(0,140,255,.085) 37.10%,transparent 37.25% 100%),
    linear-gradient(90deg,transparent 0 44%,rgba(0,231,255,.040) 44.1%,transparent 44.24% 100%) !important;
  opacity:.56 !important;
}
.metric-card,.device-card,.chart-card,.weather-strip,.period-summary,.hud-panel{
  border-color:rgba(0,231,255,.42) !important;
  box-shadow:
    0 0 0 1px rgba(0,231,255,.085),
    0 0 10px rgba(0,140,255,.15),
    0 0 28px rgba(0,90,255,.07),
    inset 0 0 18px rgba(0,231,255,.018) !important;
}
.metric-card::before,.device-card::before,.chart-card::before,.hud-panel::before{
  filter:drop-shadow(0 0 4px rgba(0,231,255,.72)) drop-shadow(0 0 10px rgba(0,140,255,.25)) !important;
  opacity:.96 !important;
}
.exact-gauge::before,.smooth-gauge::before{
  background:
    conic-gradient(from 205deg,transparent 0 5%,rgba(0,231,255,.24) 10%,rgba(0,140,255,.16) 15%,transparent 19%,transparent 54%,rgba(139,92,255,.13) 61%,rgba(255,66,200,.12) 67%,rgba(255,138,0,.26) 75%,transparent 86%),
    radial-gradient(circle,transparent 50%,rgba(0,231,255,.12) 52%,transparent 54%,transparent 64%,rgba(0,140,255,.10) 66%,transparent 70%,transparent 76%,rgba(0,231,255,.055) 78%,transparent 81%) !important;
  filter:drop-shadow(0 0 18px rgba(0,231,255,.42)) drop-shadow(0 0 34px rgba(0,140,255,.22)) !important;
}
.gauge-progress{
  filter:drop-shadow(0 0 4px rgba(100,251,255,.96)) drop-shadow(0 0 11px rgba(0,231,255,.62)) drop-shadow(0 0 22px rgba(0,140,255,.28)) !important;
}
.gauge-warm-arc{
  filter:drop-shadow(0 0 4px rgba(255,138,0,.90)) drop-shadow(0 0 12px rgba(255,66,200,.22)) !important;
}
.gauge-value{
  filter:drop-shadow(0 0 5px rgba(240,252,255,.58)) drop-shadow(0 0 14px rgba(0,140,255,.22)) !important;
}
.chart-card{
  background:
    radial-gradient(circle at 14% 8%,rgba(0,231,255,.060),transparent 24%),
    radial-gradient(circle at 92% 92%,rgba(139,92,255,.055),transparent 28%),
    linear-gradient(135deg,rgba(2,9,24,.82),rgba(0,4,14,.56) 62%,rgba(6,8,29,.42)) !important;
  border-color:rgba(0,140,255,.55) !important;
  box-shadow:
    0 0 0 1px rgba(0,231,255,.11),
    0 0 13px rgba(0,140,255,.22),
    0 0 36px rgba(0,80,255,.10),
    inset 0 0 20px rgba(0,231,255,.018) !important;
}
.chart-card::before{
  background:linear-gradient(135deg,rgba(0,231,255,.84),rgba(0,140,255,.40) 44%,transparent 44% 56%,rgba(139,92,255,.38) 56%,rgba(0,231,255,.70)) border-box !important;
}
.bar-chart,.line-chart,.horizontal-bars{
  background:
    linear-gradient(180deg,rgba(3,12,31,.74),rgba(0,5,18,.52)),
    repeating-linear-gradient(90deg,rgba(0,112,255,.135) 0 1px,transparent 1px 52px),
    repeating-linear-gradient(180deg,rgba(0,112,255,.110) 0 1px,transparent 1px 34px) !important;
  border-color:rgba(0,140,255,.34) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,231,255,.050),
    inset 0 0 22px rgba(0,120,255,.052),
    0 0 7px rgba(0,140,255,.090) !important;
}
.bar-chart::before,.line-chart::before,.horizontal-bars::before{
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(100,251,255,.72),rgba(0,140,255,.55),transparent) !important;
  box-shadow:0 0 5px rgba(0,231,255,.52),0 0 14px rgba(0,140,255,.24) !important;
  opacity:.64 !important;
}
.bar-chart .grid-line,.line-chart .grid-line{
  background:linear-gradient(90deg,transparent,rgba(0,140,255,.135),rgba(0,231,255,.075),transparent) !important;
  opacity:.58 !important;
}
.wave-svg{
  inset:12px 10px 22px 36px !important;
  overflow:visible !important;
  shape-rendering:geometricPrecision !important;
}
.wave-area{
  opacity:.88 !important;
}
.wave-line{
  fill:none !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  vector-effect:non-scaling-stroke !important;
}
.wave-line-glow{
  stroke-width:4.6 !important;
  opacity:.18 !important;
  filter:blur(.55px) !important;
}
.wave-line-core{
  stroke-width:1.45 !important;
  opacity:1 !important;
  filter:
    drop-shadow(0 0 .9px rgba(238,255,255,.82))
    drop-shadow(0 0 3.2px rgba(0,231,255,.82))
    drop-shadow(0 0 8px rgba(0,140,255,.36)) !important;
}
.wave-svg.tone-warm .wave-line-glow{
  stroke-width:4.4 !important;
  opacity:.16 !important;
  filter:blur(.50px) !important;
}
.wave-svg.tone-warm .wave-line-core{
  stroke-width:1.42 !important;
  filter:
    drop-shadow(0 0 .9px rgba(255,240,255,.76))
    drop-shadow(0 0 3.2px rgba(216,77,255,.82))
    drop-shadow(0 0 8px rgba(139,92,255,.34)) !important;
}
.wave-point{
  fill:rgba(225,255,255,.92) !important;
  stroke:var(--rem-b-cyan) !important;
  stroke-width:.36 !important;
  vector-effect:non-scaling-stroke !important;
  filter:drop-shadow(0 0 2.1px rgba(0,231,255,.56)) !important;
  opacity:.22 !important;
}
.wave-svg.tone-warm .wave-point{
  stroke:var(--rem-b-magenta) !important;
  filter:drop-shadow(0 0 2.1px rgba(216,77,255,.55)) !important;
  opacity:.20 !important;
}
.x-labels,.y-labels{
  color:#a7c6dd !important;
  opacity:.86 !important;
  text-shadow:0 0 3px rgba(0,140,255,.16) !important;
}
.chart-card h2{
  color:#f6fbff !important;
  text-shadow:0 0 6px rgba(0,231,255,.34),0 0 14px rgba(0,140,255,.16) !important;
}
.horizontal-bars .hbar-fill,.hbar-fill{
  background:linear-gradient(90deg,var(--rem-b-cyan),var(--rem-b-blue),var(--rem-b-violet),var(--rem-b-magenta),var(--rem-b-pink)) !important;
  box-shadow:0 0 7px rgba(0,231,255,.42),0 0 15px rgba(0,140,255,.15),0 0 12px rgba(216,77,255,.14) !important;
}
.device-card.primary,.metric-card:hover,.device-card:hover,.chart-card:hover{
  border-color:rgba(0,231,255,.62) !important;
  box-shadow:
    0 0 0 1px rgba(0,231,255,.16),
    0 0 18px rgba(0,140,255,.22),
    0 0 44px rgba(139,92,255,.10),
    inset 0 0 22px rgba(0,231,255,.025) !important;
}

/* v0.5.9h Reference-B Full Visual Match
   - Referentie-B als vaste visuele bron: scherp, donker, elektrisch cyaan/blauw, gecontroleerde glow.
   - Grafieken terug naar donkere HUD-panelen, zonder diagonale overlays.
   - Grafieklijnen exact richting voorbeeld 2: dunne kernlijn, subtiele aura, smooth cyan/blauw/violet/magenta fade.
   - Alleen UI/CSS + SVG gradient-defs. Tuya-control, aan/uit, kritiek en logs/tuya-control.log blijven intact.
*/
:root{
  --rb-bg0:#00030b;
  --rb-bg1:#020612;
  --rb-bg2:#061225;
  --rb-panel:#030a18;
  --rb-panel2:#06152b;
  --rb-cyan:#00f6ff;
  --rb-cyan2:#00d8ff;
  --rb-blue:#008cff;
  --rb-blue2:#176dff;
  --rb-violet:#7c52ff;
  --rb-magenta:#e04dff;
  --rb-pink:#ff35c8;
  --rb-orange:#ff8a00;
  --rb-amber:#ffb229;
  --rb-white:#f6fbff;
  --rb-muted:#a8c5dd;
  --rb-line:rgba(0,216,255,.42);
}

body{
  color:var(--rb-white) !important;
  background:
    radial-gradient(circle at 18% 20%,rgba(0,140,255,.105),transparent 23%),
    radial-gradient(circle at 64% 8%,rgba(0,246,255,.055),transparent 29%),
    radial-gradient(circle at 88% 74%,rgba(124,82,255,.042),transparent 36%),
    linear-gradient(180deg,#020511 0%,#020713 48%,#00030a 100%) !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
body::before{
  background:
    linear-gradient(rgba(0,140,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,140,255,.024) 1px,transparent 1px) !important;
  background-size:42px 42px !important;
  opacity:.34 !important;
}
body::after{opacity:.045 !important;}

/* Reference-B typography crispness */
h1,h2,h3,.metric-card h2,.chart-card h2,.device-name,.gauge-area h2{
  color:#f8fbff !important;
  text-shadow:0 0 7px rgba(0,216,255,.20),0 0 15px rgba(0,90,255,.10) !important;
}
.crumb,.build-label,.section-title-row span,.metric-card p,.x-labels,.y-labels,.hbar-val,.hbar-name{
  color:var(--rb-muted) !important;
}
.metric-value,.cost-breakdown strong,.device-watt{
  color:var(--rb-orange) !important;
  text-shadow:0 0 7px rgba(255,138,0,.28),0 0 14px rgba(255,178,41,.11) !important;
}
.device-watt small,.device-watt span,.device-card .watt-label{
  color:var(--rb-cyan) !important;
}

/* Controlled laser edge, no milky fog */
.cockpit,.hud-panel,.metric-card,.device-card,.chart-card,.weather-strip,.period-summary,.input,.select,.badge{
  border-color:rgba(0,216,255,.38) !important;
  background-color:rgba(2,9,22,.46) !important;
  box-shadow:
    0 0 0 1px rgba(0,216,255,.060),
    0 0 9px rgba(0,140,255,.120),
    0 0 24px rgba(0,70,255,.055),
    inset 0 0 18px rgba(0,216,255,.014) !important;
}
.cockpit::before,.hud-panel::before,.metric-card::before,.device-card::before,.chart-card::before{
  background:
    linear-gradient(90deg,rgba(0,246,255,.88),transparent 16%,transparent 86%,rgba(0,140,255,.70)) top/100% 1px no-repeat,
    linear-gradient(90deg,rgba(0,140,255,.50),transparent 18%,transparent 86%,rgba(124,82,255,.45)) bottom/100% 1px no-repeat,
    linear-gradient(180deg,rgba(0,246,255,.62),transparent 23%,transparent 78%,rgba(0,140,255,.40)) left/1px 100% no-repeat,
    linear-gradient(180deg,rgba(0,140,255,.46),transparent 23%,transparent 78%,rgba(124,82,255,.36)) right/1px 100% no-repeat !important;
  opacity:.82 !important;
  filter:drop-shadow(0 0 3px rgba(0,216,255,.55)) drop-shadow(0 0 8px rgba(0,100,255,.18)) !important;
}
.cockpit{
  background:
    radial-gradient(circle at 16% 45%,rgba(0,216,255,.070),transparent 25%),
    linear-gradient(135deg,rgba(3,10,24,.78),rgba(0,4,14,.54) 63%,rgba(5,7,25,.34)) !important;
}
.cockpit::after{
  background:
    linear-gradient(90deg,transparent 0 38%,rgba(0,140,255,.040) 38.08%,transparent 38.24% 100%),
    linear-gradient(90deg,transparent 0 45%,rgba(0,216,255,.025) 45.08%,transparent 45.22% 100%) !important;
  opacity:.42 !important;
}
.hud-corner{display:none !important;}

/* Gauge richting voorbeeld B: harde cyan ring, warme arc, compactere glow */
.exact-gauge,.smooth-gauge{
  filter:drop-shadow(0 0 7px rgba(0,216,255,.48)) drop-shadow(0 0 20px rgba(0,120,255,.22)) !important;
}
.exact-gauge::before,.smooth-gauge::before{
  background:
    conic-gradient(from 205deg,transparent 0 5%,rgba(0,246,255,.28) 9%,rgba(0,140,255,.17) 14%,transparent 19%,transparent 54%,rgba(124,82,255,.12) 62%,rgba(224,77,255,.11) 67%,rgba(255,138,0,.30) 76%,transparent 86%),
    radial-gradient(circle,transparent 49%,rgba(0,246,255,.14) 52%,transparent 54%,transparent 64%,rgba(0,140,255,.11) 66%,transparent 70%,transparent 76%,rgba(0,216,255,.060) 78%,transparent 81%) !important;
  filter:drop-shadow(0 0 15px rgba(0,216,255,.36)) drop-shadow(0 0 28px rgba(0,100,255,.16)) !important;
}
.gauge-progress{
  stroke-width:11.5px !important;
  filter:drop-shadow(0 0 3px rgba(100,251,255,.90)) drop-shadow(0 0 9px rgba(0,216,255,.54)) drop-shadow(0 0 17px rgba(0,120,255,.22)) !important;
}
.gauge-warm-arc{
  stroke-width:8.5px !important;
  filter:drop-shadow(0 0 3px rgba(255,138,0,.86)) drop-shadow(0 0 9px rgba(255,53,200,.16)) !important;
}
.gauge-tech-ring{filter:drop-shadow(0 0 3px rgba(0,216,255,.22)) !important;}
.ring-a{stroke:rgba(0,216,255,.22) !important;}
.ring-b{stroke:rgba(0,216,255,.36) !important;}
.ring-c{stroke:rgba(124,82,255,.20) !important;}
.ring-d{stroke:rgba(0,140,255,.23) !important;}
.gauge-value{
  fill:#f7fbff !important;
  filter:drop-shadow(0 0 4px rgba(240,252,255,.50)) drop-shadow(0 0 12px rgba(0,140,255,.18)) !important;
}

/* Icons zoals B: dun, lineair, cyan, niet chunky */
.pulse-mark,.hud-icon,.mini-icon{
  color:var(--rb-cyan) !important;
  border-color:rgba(0,216,255,.58) !important;
  text-shadow:0 0 8px rgba(0,216,255,.42),0 0 18px rgba(0,140,255,.18) !important;
  box-shadow:0 0 10px rgba(0,216,255,.14),inset 0 0 10px rgba(0,216,255,.045) !important;
}
.hud-icon{
  background:rgba(0,216,255,.035) !important;
}

/* Orange buttons: Reference-B amber outline/glow, geen lompe oranje blokken */
.btn.orange{
  color:var(--rb-orange) !important;
  background:linear-gradient(180deg,rgba(255,138,0,.095),rgba(255,138,0,.030)) !important;
  border:1px solid rgba(255,138,0,.74) !important;
  box-shadow:0 0 9px rgba(255,138,0,.22),0 0 20px rgba(255,138,0,.075),inset 0 0 12px rgba(255,138,0,.030) !important;
  text-shadow:0 0 7px rgba(255,138,0,.30) !important;
}
.btn.orange:hover{
  background:linear-gradient(180deg,rgba(255,138,0,.135),rgba(255,138,0,.045)) !important;
  box-shadow:0 0 12px rgba(255,138,0,.34),0 0 28px rgba(255,138,0,.10),inset 0 0 12px rgba(255,138,0,.055) !important;
}

/* GRAPH RESET: weg met diagonale/cyan overlay, terug naar donkere HUD-kaarten zoals voorbeeld 2 */
.chart-card{
  background:
    radial-gradient(circle at 12% 9%,rgba(0,216,255,.050),transparent 25%),
    radial-gradient(circle at 88% 90%,rgba(124,82,255,.035),transparent 30%),
    linear-gradient(135deg,rgba(2,9,24,.86),rgba(0,4,13,.62) 60%,rgba(4,7,23,.48)) !important;
  border-color:rgba(0,140,255,.52) !important;
  box-shadow:
    0 0 0 1px rgba(0,216,255,.080),
    0 0 10px rgba(0,140,255,.170),
    0 0 28px rgba(0,72,255,.070),
    inset 0 0 20px rgba(0,216,255,.012) !important;
}
.chart-card::before{
  background:
    linear-gradient(90deg,rgba(0,246,255,.82),transparent 22%,transparent 86%,rgba(0,140,255,.52)) top/100% 1px no-repeat,
    linear-gradient(90deg,rgba(0,140,255,.44),transparent 22%,transparent 86%,rgba(124,82,255,.40)) bottom/100% 1px no-repeat,
    linear-gradient(180deg,rgba(0,246,255,.48),transparent 30%,transparent 76%,rgba(0,140,255,.32)) left/1px 100% no-repeat,
    linear-gradient(180deg,rgba(0,140,255,.40),transparent 30%,transparent 76%,rgba(124,82,255,.32)) right/1px 100% no-repeat !important;
  opacity:.78 !important;
  filter:drop-shadow(0 0 3px rgba(0,216,255,.48)) drop-shadow(0 0 9px rgba(0,100,255,.16)) !important;
}
.chart-card::after{
  background:linear-gradient(90deg,transparent,rgba(0,216,255,.20),rgba(124,82,255,.12),transparent) !important;
  opacity:.34 !important;
}
.bar-chart,.line-chart,.horizontal-bars{
  background:
    linear-gradient(180deg,rgba(3,12,30,.72),rgba(0,5,17,.52)),
    repeating-linear-gradient(90deg,rgba(0,106,220,.090) 0 1px,transparent 1px 52px),
    repeating-linear-gradient(180deg,rgba(0,106,220,.080) 0 1px,transparent 1px 34px) !important;
  border-color:rgba(0,140,255,.24) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,216,255,.030),
    inset 0 0 18px rgba(0,100,255,.035),
    0 0 6px rgba(0,140,255,.055) !important;
}
.bar-chart::before,.line-chart::before,.horizontal-bars::before{
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(0,246,255,.54),rgba(0,140,255,.32),transparent) !important;
  box-shadow:0 0 4px rgba(0,216,255,.34),0 0 10px rgba(0,100,255,.12) !important;
  opacity:.48 !important;
}
.bar-chart .grid-line,.line-chart .grid-line{
  background:linear-gradient(90deg,transparent,rgba(0,140,255,.095),rgba(0,216,255,.045),transparent) !important;
  opacity:.50 !important;
}

/* Graph line exactness: dunne felle kern, glow erachter, geen neon-slang */
.wave-svg{
  inset:12px 10px 22px 36px !important;
  overflow:visible !important;
  shape-rendering:geometricPrecision !important;
}
.wave-area{
  opacity:.50 !important;
}
.wave-line{
  fill:none !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  vector-effect:non-scaling-stroke !important;
}
.wave-line-glow{
  stroke-width:2.15 !important;
  opacity:.34 !important;
  filter:blur(.20px) !important;
}
.wave-line-core{
  stroke-width:1.00 !important;
  opacity:1 !important;
  filter:
    drop-shadow(0 0 .7px rgba(238,255,255,.74))
    drop-shadow(0 0 2.4px rgba(0,246,255,.70))
    drop-shadow(0 0 6px rgba(0,140,255,.24)) !important;
}
.wave-svg.tone-warm .wave-line-glow{
  stroke-width:2.05 !important;
  opacity:.31 !important;
  filter:blur(.18px) !important;
}
.wave-svg.tone-warm .wave-line-core{
  stroke-width:1.00 !important;
  filter:
    drop-shadow(0 0 .7px rgba(255,240,255,.68))
    drop-shadow(0 0 2.4px rgba(224,77,255,.68))
    drop-shadow(0 0 6px rgba(124,82,255,.22)) !important;
}
.wave-point{
  r:.26;
  fill:rgba(238,255,255,.85) !important;
  stroke:var(--rb-cyan) !important;
  stroke-width:.24 !important;
  vector-effect:non-scaling-stroke !important;
  filter:drop-shadow(0 0 1.8px rgba(0,246,255,.45)) !important;
  opacity:.16 !important;
}
.wave-svg.tone-warm .wave-point{
  stroke:var(--rb-magenta) !important;
  filter:drop-shadow(0 0 1.8px rgba(224,77,255,.42)) !important;
  opacity:.14 !important;
}
.x-labels,.y-labels{
  color:#a8c5dd !important;
  opacity:.82 !important;
  text-shadow:0 0 3px rgba(0,140,255,.10) !important;
}

/* Distribution card keeps the smooth B cyan > blue > violet > magenta transition */
.horizontal-bars .hbar-fill,.hbar-fill{
  background:linear-gradient(90deg,#00f6ff 0%,#00c8ff 24%,#008cff 48%,#7c52ff 73%,#e04dff 100%) !important;
  box-shadow:0 0 6px rgba(0,246,255,.32),0 0 13px rgba(0,140,255,.11),0 0 10px rgba(224,77,255,.11) !important;
}
.hbar-track{
  background:rgba(8,20,38,.68) !important;
  border-color:rgba(0,140,255,.18) !important;
}

/* Active period button in B-style smooth purple > cyan fade */
.period-btn.active{
  background:linear-gradient(135deg,#e04dff 0%,#7c52ff 42%,#00c8ff 100%) !important;
  color:#f8fbff !important;
  border-color:rgba(0,246,255,.50) !important;
  box-shadow:0 0 10px rgba(224,77,255,.30),0 0 18px rgba(0,216,255,.20),inset 0 0 12px rgba(255,255,255,.08) !important;
  text-shadow:0 0 7px rgba(255,255,255,.34) !important;
}

.device-card.primary,.metric-card:hover,.device-card:hover,.chart-card:hover{
  border-color:rgba(0,216,255,.52) !important;
  box-shadow:
    0 0 0 1px rgba(0,216,255,.10),
    0 0 14px rgba(0,140,255,.18),
    0 0 34px rgba(124,82,255,.060),
    inset 0 0 18px rgba(0,216,255,.018) !important;
}


/* =========================================================
   v0.5.9i Bugfix + Readability Layout Polish
   - rustige stekkerkaarten, grotere meters, leesbare kleine tekst
   - optionele distributiekaart, Watt voluit
   ========================================================= */
body.distribution-hidden .charts-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
#distributionCard[hidden]{display:none !important;}

/* grafiekkaarten: rust houden, geen overlays terugbrengen */
.chart-card{min-height:172px !important;}
.bar-chart,.line-chart,.horizontal-bars{min-height:118px !important;}
body.distribution-hidden .chart-card{min-height:182px !important;}
body.distribution-hidden .bar-chart,
body.distribution-hidden .line-chart{min-height:128px !important;}

/* kleine tekst beter leesbaar */
.device-meta,.muted-line,.device-stats span,.device-stats strong,
.hbar-name,.hbar-val,.x-labels,.y-labels,.metric-card p,.period-summary small,
.weather-metrics span,.weather-metrics strong,.hint.tiny{
  -webkit-font-smoothing:antialiased !important;
  text-rendering:geometricPrecision !important;
}
.device-meta,.muted-line{
  color:#a9c8e3 !important;
  font-size:12.5px !important;
  line-height:1.38 !important;
  font-weight:520 !important;
}
.device-stats span{
  color:#8eb0cb !important;
  font-size:10.5px !important;
  font-weight:540 !important;
}
.device-stats strong{
  color:#f5fbff !important;
  font-size:11.5px !important;
  font-weight:700 !important;
}
.x-labels,.y-labels{
  color:#bdd7ef !important;
  font-size:10.5px !important;
  font-weight:560 !important;
  opacity:.95 !important;
}
.chart-card h2{font-size:17px !important;}
.hint-subline{color:#9fc5df;font-size:12px;font-weight:520;line-height:1.35;}

/* realtime usage meter iets groter, zonder layout te breken */
body.density-compact .gauge-area,
body.density-ultra .gauge-area{min-height:372px !important;}
body.density-compact .exact-gauge,
body.density-compact .smooth-gauge{width:232px !important;height:232px !important;}
body.density-ultra .exact-gauge,
body.density-ultra .smooth-gauge{width:218px !important;height:218px !important;}
body.density-compact .gauge-value,
body.density-ultra .gauge-value{font-size:47px !important;}
.gauge-label{font-size:9.4px !important;letter-spacing:.01em !important;}
.gauge-scale.watt{font-size:8.4px !important;text-transform:none !important;}

/* stekker mini-meters groter en Watt voluit leesbaar */
body.density-compact .device-card.zone-meter-card,
body.density-ultra .device-card.zone-meter-card{
  grid-template-columns:68px minmax(0,1fr) auto !important;
  min-height:118px !important;
  padding:13px 14px !important;
}
body.density-compact .mini-device-gauge,
body.density-ultra .mini-device-gauge{
  width:64px !important;
  height:64px !important;
}
body.density-compact .mini-device-value,
body.density-ultra .mini-device-value{
  font-size:15px !important;
  line-height:1.05 !important;
}
body.density-compact .mini-device-value span,
body.density-ultra .mini-device-value span{
  font-size:7.4px !important;
  margin-top:2px !important;
  letter-spacing:.015em !important;
}
body.density-compact .device-watt,
body.density-ultra .device-watt{
  font-size:25px !important;
  line-height:1.0 !important;
}
body.density-compact .device-watt span,
body.density-ultra .device-watt span{
  font-size:.58em !important;
  margin-left:5px !important;
}

/* stekkerkaart rechts opschonen: alleen live + eventuele echte bediening */
body.density-compact .device-livebox,
body.density-ultra .device-livebox{
  min-width:70px !important;
  align-self:start !important;
  justify-items:end !important;
  gap:5px !important;
}
.device-livebox .device-meta{display:none !important;}
.control-hint{display:none !important;}
.device-control-row{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  gap:4px !important;
  max-width:118px !important;
}
.control-chip,.critical-chip{
  font-size:9px !important;
  padding:3px 6px !important;
}
.mini-control-btn{
  font-size:10px !important;
  padding:3px 7px !important;
}
.pill.live,.pill.stale{
  font-size:10px !important;
  padding:4px 8px !important;
}

@media(max-width:1500px){
  body.distribution-hidden .charts-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:1200px){
  body.distribution-hidden .charts-grid{grid-template-columns:1fr !important;}
}


/* =========================================================
   v0.5.9j Ultra Compact Density + Gauge + Icon/Text + Graph Pulse Polish
   - Frontend-only polish: layout, meter containment, line-icons, text weight, graph pulse.
   - Tuya-control, aan/uit-flow, kritiek-waarschuwing en logging blijven onaangeraakt.
   ========================================================= */
:root{
  --j-cyan:#00f6ff;
  --j-cyan-soft:rgba(0,246,255,.16);
  --j-blue:#008cff;
  --j-blue2:#1f6fff;
  --j-violet:#8d62ff;
  --j-magenta:#ff43e6;
  --j-panel:rgba(1,8,20,.62);
  --j-panel-dark:rgba(0,5,15,.76);
  --j-line:rgba(0,216,255,.42);
  --j-text:#f4f9ff;
  --j-muted:#a8c9e3;
  --j-dim:#7899b6;
}
html{font-size:15px;}
body{
  font-size:12.5px !important;
  background:
    radial-gradient(circle at 16% 15%,rgba(0,246,255,.165),transparent 24%),
    radial-gradient(circle at 73% 12%,rgba(0,140,255,.105),transparent 28%),
    radial-gradient(circle at 88% 76%,rgba(141,98,255,.060),transparent 33%),
    linear-gradient(180deg,#010612 0%,#020817 48%,#00030a 100%) !important;
}
body::before{
  opacity:.46 !important;
  background:
    linear-gradient(rgba(0,216,255,.038) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,216,255,.032) 1px,transparent 1px) !important;
  background-size:39px 39px !important;
}
body::after{opacity:.055 !important;}
.shell{padding:14px 18px 24px !important;}
.hud-topbar{margin-bottom:10px !important;align-items:center !important;}
.hud-brand{gap:10px !important;}
.crumb{font-size:10px !important;font-weight:520 !important;letter-spacing:.035em !important;color:#92dfff !important;}
h1{font-size:29px !important;font-weight:520 !important;letter-spacing:-.036em !important;}
h2{font-weight:540 !important;}
h3{font-weight:540 !important;}
.build-label{font-weight:500 !important;color:#7eeeff !important;}
.btn,.badge,.period-btn,.pill,.mini-control-btn,.control-chip,.critical-chip{font-weight:620 !important;}
.metric-card h2,.section-title-row h2,.chart-card h2,.period-left h2,.gauge-area h2,.device-name{font-weight:560 !important;}
.metric-card p,.device-meta,.muted-line,.device-stats span,.weather-metrics span,.hint,.hint-subline{font-weight:450 !important;}
.metric-value,.device-watt,.gauge-value,.device-stats strong,.cost-breakdown strong{font-weight:560 !important;}

/* Line-icons: dun, scherp, elektrisch blauw/cyan */
.pulse-mark{
  width:34px !important;height:34px !important;display:grid !important;place-items:center !important;
  font-size:0 !important;color:var(--j-cyan) !important;
  filter:drop-shadow(0 0 6px rgba(0,246,255,.58)) drop-shadow(0 0 13px rgba(0,140,255,.25));
}
.pulse-mark svg{width:28px;height:28px;}
.line-icon svg,.pulse-mark svg{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.55 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  vector-effect:non-scaling-stroke;
}
.hud-icon,.mini-icon{
  color:var(--j-cyan) !important;
  border-color:rgba(0,216,255,.50) !important;
  background:linear-gradient(180deg,rgba(0,216,255,.045),rgba(0,80,180,.025)) !important;
  box-shadow:0 0 8px rgba(0,216,255,.16),inset 0 0 9px rgba(0,216,255,.035) !important;
  text-shadow:none !important;
}
.hud-icon{width:38px !important;height:38px !important;border-radius:14px !important;margin-bottom:5px !important;}
.hud-icon svg{width:22px;height:22px;}
.mini-icon{width:24px !important;height:24px !important;border-radius:10px !important;}
.mini-icon svg{width:15px;height:15px;}

/* HUD-panelen: donkerder, scherper, geen melkachtige waas */
.cockpit,.hud-panel,.metric-card,.device-card,.chart-card,.weather-strip,.period-summary,.input,.select,.badge{
  border-color:var(--j-line) !important;
  background-color:var(--j-panel) !important;
  box-shadow:
    0 0 0 1px rgba(0,216,255,.050),
    0 0 8px rgba(0,140,255,.120),
    0 0 22px rgba(0,70,255,.050),
    inset 0 0 16px rgba(0,216,255,.012) !important;
}
.cockpit::before,.hud-panel::before,.device-card::before,.metric-card::before,.chart-card::before{
  opacity:.74 !important;
  filter:drop-shadow(0 0 3px rgba(0,216,255,.52)) drop-shadow(0 0 8px rgba(0,100,255,.18)) !important;
}
.cockpit{
  padding:15px !important;
  gap:12px !important;
  border-radius:20px !important;
  min-height:unset !important;
  background:
    radial-gradient(circle at 15% 47%,rgba(0,216,255,.060),transparent 24%),
    linear-gradient(135deg,rgba(2,9,23,.78),rgba(0,4,13,.62) 64%,rgba(3,6,22,.44)) !important;
}
.right-panel{gap:7px !important;}
.kpi-line{min-height:104px !important;border-bottom-color:rgba(0,216,255,.14) !important;}
.metric-card{padding:10px 12px 8px !important;row-gap:5px !important;}
.metric-card::before{top:12px !important;right:12px !important;width:44px !important;opacity:.16 !important;}
.metric-card h2{font-size:12.5px !important;margin-top:1px !important;line-height:1.05 !important;}
.metric-card p{font-size:10.5px !important;line-height:1.18 !important;color:var(--j-muted) !important;}
.metric-value{font-size:clamp(20px,1.32vw,27px) !important;letter-spacing:-.034em !important;}
.cost-breakdown{gap:3px !important;}
.cost-breakdown div{min-height:16px !important;}
.cost-breakdown span{font-size:9.5px !important;font-weight:450 !important;}
.cost-breakdown strong{font-size:11px !important;}

/* Meter-container: grote meter blijft binnen eigen kolom en schuurt niet tegen KPI-panelen */
.gauge-area{
  min-width:0 !important;
  overflow:hidden !important;
  contain:paint !important;
  justify-items:center !important;
  align-content:start !important;
  padding:0 2px 4px !important;
}
.gauge-area h2{font-size:14px !important;margin:3px 0 2px !important;justify-self:start !important;}
.exact-gauge,.smooth-gauge{
  margin:2px auto 6px !important;
  max-width:calc(100% - 18px) !important;
  max-height:calc(100% - 18px) !important;
  transform-origin:center center !important;
  filter:drop-shadow(0 0 5px rgba(0,216,255,.44)) drop-shadow(0 0 14px rgba(0,120,255,.18)) !important;
}
.exact-gauge::before,.smooth-gauge::before{inset:-11px !important;filter:drop-shadow(0 0 11px rgba(0,216,255,.30)) !important;}
.exact-gauge::after,.smooth-gauge::after{inset:20.5% !important;opacity:.76 !important;}
.gauge-progress{stroke-width:10.2px !important;filter:drop-shadow(0 0 3px rgba(0,246,255,.86)) drop-shadow(0 0 8px rgba(0,140,255,.44)) !important;}
.gauge-bg{stroke-width:10px !important;}
.gauge-warm-arc{stroke-width:7.2px !important;filter:drop-shadow(0 0 3px rgba(255,138,0,.64)) !important;}
.gauge-label{font-size:8.7px !important;font-weight:450 !important;fill:#a9d2ea !important;}
.gauge-scale,.gauge-scale.watt{font-size:7.5px !important;font-weight:450 !important;}
.gauge-status{width:100% !important;max-width:215px !important;margin-top:2px !important;gap:6px !important;justify-self:center !important;}
.status-row{grid-template-columns:26px minmax(0,1fr) !important;gap:7px !important;}
.status-row span:not(.mini-icon){font-size:10.5px !important;color:#9ec2dc !important;font-weight:450 !important;}
.status-row strong{font-size:11.5px !important;font-weight:520 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Density modes: 100% Chrome voelt als oude 90%, maar tekst blijft crisp */
@media (min-width:1200px){
  body.density-comfort .cockpit{grid-template-columns:248px minmax(0,1fr) !important;}
  body.density-compact .cockpit{grid-template-columns:224px minmax(0,1fr) !important;}
  body.density-ultra .cockpit{grid-template-columns:204px minmax(0,1fr) !important;}
}
body.density-comfort .shell{padding:14px 18px 24px !important;}
body.density-compact .shell{padding:12px 16px 22px !important;}
body.density-ultra .shell{padding:10px 14px 20px !important;}
body.density-comfort .exact-gauge,body.density-comfort .smooth-gauge{width:206px !important;height:206px !important;}
body.density-compact .exact-gauge,body.density-compact .smooth-gauge{width:188px !important;height:188px !important;}
body.density-ultra .exact-gauge,body.density-ultra .smooth-gauge{width:172px !important;height:172px !important;}
body.density-comfort .gauge-value{font-size:39px !important;}
body.density-compact .gauge-value{font-size:36px !important;}
body.density-ultra .gauge-value{font-size:32px !important;}
body.density-comfort .gauge-area{min-height:275px !important;}
body.density-compact .gauge-area{min-height:255px !important;}
body.density-ultra .gauge-area{min-height:235px !important;}
body.density-comfort .kpi-line{min-height:108px !important;}
body.density-compact .kpi-line{min-height:100px !important;}
body.density-ultra .kpi-line{min-height:94px !important;}
body.density-compact .metric-card{padding:9px 11px 7px !important;}
body.density-ultra .metric-card{padding:8px 10px 6px !important;}
body.density-ultra .metric-card p{font-size:9.7px !important;}
body.density-ultra .metric-value{font-size:clamp(18px,1.18vw,24px) !important;}
body.density-ultra .hud-icon{width:34px !important;height:34px !important;border-radius:12px !important;}
body.density-ultra .hud-icon svg{width:20px;height:20px;}

/* Stekkerkaarten: lager/strakker, mini-meter groter dan vroegere ultra, maar kaart blijft compact */
.section-title-row{margin-bottom:5px !important;}
.section-title-row h2{font-size:15px !important;}
.section-title-row span{font-size:10px !important;color:#8fb8d5 !important;font-weight:430 !important;}
.device-toolbar{gap:6px !important;margin-bottom:6px !important;}
.device-toolbar .input{min-height:28px !important;padding:5px 8px !important;font-size:10.5px !important;border-radius:9px !important;}
@media (min-width:1200px){
  body.density-comfort .device-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;}
  body.density-compact .device-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:7px !important;}
  body.density-ultra .device-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:6px !important;}
}
body.density-comfort .device-card.zone-meter-card,
body.density-compact .device-card.zone-meter-card,
body.density-ultra .device-card.zone-meter-card{
  min-height:92px !important;
  padding:8px 9px !important;
  gap:5px 8px !important;
  border-radius:14px !important;
  grid-template-columns:62px minmax(0,1fr) auto !important;
  grid-template-areas:"gauge main live" "stats stats stats" !important;
  align-items:center !important;
}
body.density-comfort .device-card.zone-meter-card{min-height:98px !important;grid-template-columns:66px minmax(0,1fr) auto !important;}
body.density-ultra .device-card.zone-meter-card{min-height:82px !important;padding:7px 8px !important;grid-template-columns:58px minmax(0,1fr) auto !important;}
body.density-comfort .mini-device-gauge{width:62px !important;height:62px !important;}
body.density-compact .mini-device-gauge{width:58px !important;height:58px !important;}
body.density-ultra .mini-device-gauge{width:54px !important;height:54px !important;}
body.density-comfort .mini-device-value{font-size:14px !important;}
body.density-compact .mini-device-value{font-size:13.5px !important;}
body.density-ultra .mini-device-value{font-size:12.5px !important;}
body.density-comfort .mini-device-value span,
body.density-compact .mini-device-value span,
body.density-ultra .mini-device-value span{font-size:7px !important;font-weight:520 !important;color:var(--j-cyan) !important;}
body.density-comfort .device-name{font-size:14.5px !important;}
body.density-compact .device-name{font-size:13.5px !important;}
body.density-ultra .device-name{font-size:12.5px !important;}
body.density-comfort .device-watt{font-size:21px !important;}
body.density-compact .device-watt{font-size:19px !important;}
body.density-ultra .device-watt{font-size:17px !important;}
body.density-comfort .device-watt span,
body.density-compact .device-watt span,
body.density-ultra .device-watt span{font-size:.58em !important;margin-left:3px !important;color:var(--j-cyan) !important;}
body.density-comfort .device-meta,
body.density-compact .device-meta,
body.density-ultra .device-meta{font-size:9.7px !important;line-height:1.18 !important;font-weight:430 !important;color:#9fc1dd !important;}
body.density-ultra .muted-line{display:none !important;}
body.density-comfort .device-stats,
body.density-compact .device-stats,
body.density-ultra .device-stats{
  grid-area:stats !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:3px !important;
  padding-top:4px !important;
  margin-top:1px !important;
  border-top:1px solid rgba(0,216,255,.105) !important;
  border-left:0 !important;
  padding-left:0 !important;
}
body.density-ultra .device-stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
body.density-ultra .device-stats div:nth-child(3){display:none !important;}
.device-stats span{font-size:8.2px !important;font-weight:430 !important;color:#789bb8 !important;}
.device-stats strong{font-size:9.4px !important;font-weight:520 !important;color:#edfaff !important;}
.device-livebox{grid-area:live !important;min-width:54px !important;gap:3px !important;}
.pill.live,.pill.stale{font-size:8.7px !important;padding:3px 6px !important;font-weight:620 !important;}
.device-control-row{gap:3px !important;max-width:102px !important;}
.control-chip,.critical-chip{font-size:7.6px !important;padding:2px 5px !important;min-height:15px !important;}
.mini-control-btn{font-size:8.5px !important;min-height:17px !important;padding:2px 5px !important;}
body.density-ultra .control-chip,body.density-ultra .critical-chip{display:none !important;}
body.density-ultra .mini-control-btn{font-size:8px !important;padding:2px 4px !important;}

/* Grafiekpanelen compacter en spannender: dunne lijn, zichtbare datapuntjes, subtiele glow */
.period-panel{padding:9px 12px !important;margin-top:8px !important;border-radius:14px !important;}
.period-left h2{font-size:14px !important;margin-bottom:7px !important;}
.segmented{gap:6px !important;}
.period-btn{min-width:62px !important;padding:7px 9px !important;border-radius:9px !important;font-size:10.5px !important;}
.period-summary{padding:7px 10px !important;border-radius:10px !important;gap:1px !important;}
.period-summary strong{font-size:11px !important;font-weight:560 !important;}
.period-summary span{font-size:12px !important;}
.period-actions{gap:8px !important;}
.period-actions .btn{min-height:30px !important;padding:7px 10px !important;font-size:10.5px !important;border-radius:9px !important;}
.charts-grid{gap:8px !important;margin-top:8px !important;}
.chart-card{min-height:154px !important;padding:8px 9px 8px !important;border-radius:14px !important;}
.chart-card h2{font-size:12.5px !important;margin-bottom:5px !important;font-weight:540 !important;}
.bar-chart,.line-chart,.horizontal-bars{height:108px !important;min-height:108px !important;border-radius:10px !important;}
body.distribution-hidden .chart-card{min-height:160px !important;}
body.distribution-hidden .bar-chart,body.distribution-hidden .line-chart{height:114px !important;min-height:114px !important;}
.wave-svg{inset:8px 8px 18px 32px !important;overflow:visible !important;shape-rendering:geometricPrecision !important;}
.wave-area{opacity:.68 !important;}
.wave-line-glow{stroke-width:3.0 !important;opacity:.62 !important;filter:blur(.28px) !important;}
.wave-line-core{stroke-width:1.16 !important;opacity:1 !important;filter:drop-shadow(0 0 .8px rgba(240,255,255,.78)) drop-shadow(0 0 2.6px rgba(0,246,255,.70)) drop-shadow(0 0 7px rgba(0,140,255,.24)) !important;}
.wave-svg.tone-cumulative .wave-line-glow{opacity:.54 !important;}
.wave-svg.tone-cost .wave-line-glow,.wave-svg.tone-warm .wave-line-glow{stroke-width:2.9px !important;opacity:.56 !important;}
.wave-svg.tone-cost .wave-line-core,.wave-svg.tone-warm .wave-line-core{filter:drop-shadow(0 0 .8px rgba(255,240,255,.72)) drop-shadow(0 0 2.8px rgba(255,67,230,.70)) drop-shadow(0 0 7px rgba(141,98,255,.22)) !important;}
.wave-point{
  fill:rgba(238,255,255,.92) !important;
  stroke:var(--j-cyan) !important;
  stroke-width:.42 !important;
  vector-effect:non-scaling-stroke !important;
  filter:drop-shadow(0 0 2px rgba(0,246,255,.82)) drop-shadow(0 0 6px rgba(0,140,255,.24)) !important;
  opacity:.88 !important;
}
.wave-svg.tone-cumulative .wave-point{stroke:#00c8ff !important;filter:drop-shadow(0 0 2px rgba(0,200,255,.78)) drop-shadow(0 0 5px rgba(0,112,255,.22)) !important;}
.wave-svg.tone-cost .wave-point,.wave-svg.tone-warm .wave-point{stroke:var(--j-magenta) !important;filter:drop-shadow(0 0 2px rgba(255,67,230,.78)) drop-shadow(0 0 5px rgba(141,98,255,.24)) !important;}
.x-labels{left:32px !important;right:8px !important;font-size:9.4px !important;font-weight:450 !important;color:#abc9df !important;}
.y-labels{top:8px !important;bottom:18px !important;width:28px !important;font-size:8.8px !important;font-weight:450 !important;color:#abc9df !important;}
.bar-chart,.line-chart,.horizontal-bars{
  background:
    linear-gradient(180deg,rgba(2,11,27,.76),rgba(0,5,16,.56)),
    repeating-linear-gradient(90deg,rgba(0,106,220,.070) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(180deg,rgba(0,106,220,.060) 0 1px,transparent 1px 30px) !important;
  border-color:rgba(0,140,255,.22) !important;
  box-shadow:inset 0 0 0 1px rgba(0,216,255,.025),inset 0 0 18px rgba(0,140,255,.032),0 0 8px rgba(0,140,255,.05) !important;
}
.bar-chart::before,.line-chart::before,.horizontal-bars::before{opacity:.36 !important;}

@media (min-width:1400px){
  body.density-compact .charts-grid,body.density-ultra .charts-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  body.density-compact .chart-card,body.density-ultra .chart-card{min-height:146px !important;}
  body.density-compact .bar-chart,body.density-compact .line-chart,body.density-compact .horizontal-bars,
  body.density-ultra .bar-chart,body.density-ultra .line-chart,body.density-ultra .horizontal-bars{height:102px !important;min-height:102px !important;}
}
@media (max-width:1399px){
  body.density-comfort .charts-grid,body.density-compact .charts-grid,body.density-ultra .charts-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:900px){
  body.density-comfort .charts-grid,body.density-compact .charts-grid,body.density-ultra .charts-grid{grid-template-columns:1fr !important;}
}

/* v0.5.9j final desktop guards */
.kpi-line{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
.right-panel{grid-template-rows:auto auto 1fr !important;}
@media (max-width:1199px){.kpi-line{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}
@media (max-width:780px){.kpi-line{grid-template-columns:1fr !important;}}
.wave-point{r:3.25px !important;}


/* =========================================================
   v0.5.9k Layout Fit + Empty Fields + Readability Hotfix
   Alleen frontend-layout/leesbaarheid. Tuya-control, aan/uit,
   kritiek-waarschuwing en logging blijven onaangeraakt.
   ========================================================= */

/* Meter mag niet meer tegen de bovenrand van het cockpitpaneel schuren. */
.gauge-area{
  padding-top:18px !important;
  padding-left:4px !important;
  padding-right:4px !important;
  overflow:visible !important;
  contain:none !important;
}
.exact-gauge,.smooth-gauge{
  margin-top:9px !important;
  margin-bottom:8px !important;
}
.exact-gauge::before,.smooth-gauge::before{inset:-9px !important;}
.gauge-area h2{
  margin-top:7px !important;
  margin-bottom:7px !important;
  font-weight:500 !important;
}
body.density-comfort .gauge-area{padding-top:20px !important;}
body.density-compact .gauge-area{padding-top:18px !important;}
body.density-ultra .gauge-area{padding-top:16px !important;}

/* Weerkaart: compact blijven, maar geen gepropte lettertjes of afgeknepen velden. */
.weather-strip.compact-weather-card{
  width:min(410px,100%) !important;
  min-width:340px !important;
  padding:10px 12px !important;
  gap:5px 8px !important;
  overflow:hidden !important;
}
body.density-comfort .weather-strip.compact-weather-card{width:min(430px,100%) !important;}
body.density-compact .weather-strip.compact-weather-card{width:min(395px,100%) !important;padding:9px 11px !important;}
body.density-ultra .weather-strip.compact-weather-card{width:min(370px,100%) !important;min-width:340px !important;padding:8px 10px !important;}
.weather-date-row span{font-size:11.2px !important;font-weight:500 !important;}
.weather-date-row strong{font-size:15px !important;font-weight:520 !important;}
.weather-strip.compact-weather-card .weather-main{grid-template-columns:36px minmax(0,1fr) !important;gap:8px !important;min-width:0 !important;}
.weather-strip.compact-weather-card #weatherTemp{font-size:24px !important;line-height:.96 !important;}
.weather-temp-block{min-width:0 !important;}
.weather-temp-block span,.weather-strip.compact-weather-card #weatherSummary{
  font-size:10.3px !important;
  font-weight:430 !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.weather-place-row strong{font-size:10.8px !important;font-weight:500 !important;}
.weather-place-row small{font-size:9.8px !important;font-weight:420 !important;max-width:160px !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;}
.weather-strip.compact-weather-card .weather-metrics{grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:4px !important;}
.weather-strip.compact-weather-card .weather-metrics div{min-width:0 !important;padding:4px 5px !important;}
.weather-strip.compact-weather-card .weather-metrics span{
  font-size:7.8px !important;
  font-weight:420 !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.weather-strip.compact-weather-card .weather-metrics strong{
  font-size:9.2px !important;
  font-weight:500 !important;
  line-height:1.12 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.density-ultra .weather-strip.compact-weather-card #weatherTemp{font-size:22px !important;}
body.density-ultra .weather-strip.compact-weather-card .weather-icon{width:30px !important;height:30px !important;}

/* Grafiekpanelen: labels krijgen ademruimte zodat tekst niet in de rand bijt. */
.chart-card{
  min-height:168px !important;
  padding:10px 12px 10px !important;
}
.chart-card h2{
  font-size:13.2px !important;
  line-height:1.15 !important;
  margin-bottom:7px !important;
  font-weight:500 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.bar-chart,.line-chart,.horizontal-bars{
  height:120px !important;
  min-height:120px !important;
}
.wave-svg{inset:10px 10px 22px 44px !important;}
.x-labels{
  left:44px !important;
  right:10px !important;
  bottom:3px !important;
  font-size:9.7px !important;
  font-weight:420 !important;
  line-height:1 !important;
}
.y-labels{
  width:40px !important;
  top:9px !important;
  bottom:22px !important;
  font-size:9.2px !important;
  font-weight:420 !important;
  line-height:1.05 !important;
  padding-right:4px !important;
}
.no-data{font-size:11px !important;line-height:1.25 !important;padding:22px 16px !important;}
@media (min-width:1400px){
  body.density-compact .chart-card,
  body.density-ultra .chart-card{min-height:166px !important;}
  body.density-compact .bar-chart,
  body.density-compact .line-chart,
  body.density-compact .horizontal-bars,
  body.density-ultra .bar-chart,
  body.density-ultra .line-chart,
  body.density-ultra .horizontal-bars{height:118px !important;min-height:118px !important;}
  body.density-compact .wave-svg,
  body.density-ultra .wave-svg{inset:10px 10px 22px 44px !important;}
}

/* Kleine tekst: minder vet, iets groter, beter contrast zonder het dashboard op te blazen. */
.metric-card p,.section-title-row span,.device-meta,.muted-line,.device-stats span,.device-stats strong,
.weather-metrics span,.weather-metrics strong,.hint,.hint-subline,.checkline,.settings-card label,
.device-power-panel .hint,.status-box,.info-grid label,.period-summary small{
  font-weight:420 !important;
  color:#a9c7df !important;
  text-shadow:none !important;
}
.device-meta,.muted-line{font-size:10.6px !important;line-height:1.24 !important;}
body.density-ultra .device-meta,body.density-ultra .muted-line{font-size:10.2px !important;}
.device-stats span{font-size:8.4px !important;}
.device-stats strong{font-size:9.6px !important;font-weight:500 !important;color:#f0fbff !important;}
.metric-card p{font-size:10.9px !important;line-height:1.24 !important;}
.settings-card label,label{font-size:12.5px !important;font-weight:430 !important;}
.checkline{font-size:12px !important;line-height:1.28 !important;}
.hint,.device-power-panel .hint{font-size:12px !important;line-height:1.38 !important;}
.status-box{font-size:12px !important;line-height:1.38 !important;}

/* Ingevulde metadata tonen, lege velden zijn ook echt leeg in de UI. */
.device-main{min-width:0 !important;}
.device-meta:empty{display:none !important;}
.device-name,.device-meta,.muted-line{white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}


/* =========================================================
   v0.5.9l Cockpit Meter + 3-Column Device Grid + Pulse Graph Glow Polish
   Alleen frontend-layout/visuals. Tuya-control, aan/uit,
   kritiek-waarschuwing, config en logging blijven onaangeraakt.
   ========================================================= */

/* Cockpitgevoel: de linkermeter krijgt weer echte dashboardruimte. */
@media (min-width:1200px){
  body.density-comfort .cockpit{grid-template-columns:300px minmax(0,1fr) !important;}
  body.density-compact .cockpit{grid-template-columns:284px minmax(0,1fr) !important;}
  body.density-ultra .cockpit{grid-template-columns:268px minmax(0,1fr) !important;}
}
.gauge-area{
  padding-top:20px !important;
  padding-bottom:8px !important;
  overflow:visible !important;
  contain:none !important;
}
body.density-comfort .exact-gauge,body.density-comfort .smooth-gauge{width:238px !important;height:238px !important;}
body.density-compact .exact-gauge,body.density-compact .smooth-gauge{width:224px !important;height:224px !important;}
body.density-ultra .exact-gauge,body.density-ultra .smooth-gauge{width:208px !important;height:208px !important;}
body.density-comfort .gauge-area{min-height:330px !important;}
body.density-compact .gauge-area{min-height:315px !important;}
body.density-ultra .gauge-area{min-height:300px !important;}
body.density-comfort .gauge-value{font-size:43px !important;}
body.density-compact .gauge-value{font-size:40px !important;}
body.density-ultra .gauge-value{font-size:37px !important;}
.gauge-area h2{justify-self:center !important;font-size:15px !important;margin-top:8px !important;}
.gauge-status{max-width:240px !important;margin-top:8px !important;}

/* KPI iconen: iets groter, scherper en meer elektrisch. */
.hud-icon{width:44px !important;height:44px !important;border-radius:15px !important;margin-bottom:7px !important;}
.hud-icon svg{width:27px !important;height:27px !important;}
.kpi-pulse-icon{
  color:#45f5ff !important;
  box-shadow:0 0 12px rgba(0,246,255,.30),0 0 26px rgba(0,112,255,.16),inset 0 0 12px rgba(0,216,255,.06) !important;
}
.kpi-pulse-icon svg{stroke-width:1.72 !important;}
body.density-ultra .hud-icon{width:40px !important;height:40px !important;border-radius:14px !important;}
body.density-ultra .hud-icon svg{width:24px !important;height:24px !important;}
.metric-card h2{margin-top:3px !important;}

/* Stekkerkaarten: desktop naar 3 per rij, platter door de extra breedte. */
@media (min-width:1200px){
  body.density-comfort .device-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px !important;}
  body.density-compact .device-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;}
  body.density-ultra .device-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;}
}
body.density-compact .device-card.zone-meter-card,
body.density-ultra .device-card.zone-meter-card{
  min-height:82px !important;
  padding:7px 9px !important;
  gap:5px 9px !important;
  grid-template-columns:58px minmax(0,1fr) auto !important;
  grid-template-areas:"gauge main live" "gauge stats stats" !important;
  align-items:center !important;
}
body.density-compact .mini-device-gauge,
body.density-ultra .mini-device-gauge{width:52px !important;height:52px !important;}
body.density-compact .device-name,
body.density-ultra .device-name{font-size:14.5px !important;line-height:1.02 !important;margin-bottom:1px !important;}
body.density-compact .device-watt,
body.density-ultra .device-watt{font-size:21px !important;line-height:.98 !important;}
body.density-compact .device-meta,
body.density-ultra .device-meta{font-size:9.9px !important;line-height:1.13 !important;}
body.density-compact .device-stats,
body.density-ultra .device-stats{padding-top:4px !important;gap:3px !important;}
body.density-compact .device-stats span,
body.density-ultra .device-stats span{font-size:7.5px !important;}
body.density-compact .device-stats strong,
body.density-ultra .device-stats strong{font-size:9px !important;}
body.density-ultra .device-stats{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
body.density-ultra .device-stats div:nth-child(3){display:block !important;}
body.density-ultra .device-livebox .device-meta:nth-child(2){display:none !important;}

/* Grafieken: dunne lijn houden, maar echte HUD-aura, puntjes en witte/cyan piekglans terug. */
.chart-card{
  min-height:178px !important;
  padding:11px 13px 11px !important;
  background:
    radial-gradient(circle at 73% 24%,rgba(0,246,255,.050),transparent 36%),
    radial-gradient(circle at 36% 82%,rgba(0,112,255,.052),transparent 42%),
    linear-gradient(135deg,rgba(2,10,26,.78),rgba(0,5,17,.68) 62%,rgba(3,8,23,.55)) !important;
}
.chart-card::before{opacity:.92 !important;filter:drop-shadow(0 0 7px rgba(0,216,255,.58)) drop-shadow(0 0 16px rgba(0,100,255,.26)) !important;}
.chart-card h2{font-size:13.6px !important;font-weight:560 !important;letter-spacing:.01em !important;}
.bar-chart,.line-chart,.horizontal-bars{
  height:130px !important;
  min-height:130px !important;
  background:
    linear-gradient(180deg,rgba(2,14,34,.82),rgba(0,5,18,.62)),
    radial-gradient(circle at 82% 26%,rgba(0,246,255,.075),transparent 34%),
    repeating-linear-gradient(90deg,rgba(0,160,255,.095) 0 1px,transparent 1px 50px),
    repeating-linear-gradient(180deg,rgba(0,160,255,.080) 0 1px,transparent 1px 30px) !important;
  border-color:rgba(0,216,255,.34) !important;
  box-shadow:inset 0 0 0 1px rgba(0,216,255,.045),inset 0 0 24px rgba(0,140,255,.055),0 0 15px rgba(0,140,255,.10) !important;
}
.wave-svg{inset:10px 10px 22px 44px !important;overflow:visible !important;}
.wave-area{opacity:.82 !important;filter:drop-shadow(0 0 8px rgba(0,140,255,.10)) !important;}
.wave-line{fill:none !important;stroke-linecap:round !important;stroke-linejoin:round !important;vector-effect:non-scaling-stroke !important;}
.wave-line-aura{
  stroke-width:8.6px !important;
  opacity:.62 !important;
  mix-blend-mode:screen;
}
.wave-line-glow{
  stroke-width:4.4px !important;
  opacity:.86 !important;
  filter:none !important;
  mix-blend-mode:screen;
}
.wave-line-shine{
  stroke-width:2.15px !important;
  opacity:.72 !important;
  filter:drop-shadow(0 0 2px rgba(245,255,255,.72)) drop-shadow(0 0 7px rgba(0,246,255,.46)) !important;
  mix-blend-mode:screen;
}
.wave-line-core{
  stroke-width:1.22px !important;
  opacity:1 !important;
  filter:drop-shadow(0 0 .9px rgba(248,255,255,.90)) drop-shadow(0 0 3px rgba(0,246,255,.82)) drop-shadow(0 0 10px rgba(0,140,255,.36)) !important;
}
.wave-svg.tone-cumulative .wave-line-aura{opacity:.55 !important;}
.wave-svg.tone-cumulative .wave-line-shine{opacity:.58 !important;}
.wave-svg.tone-cost .wave-line-aura,.wave-svg.tone-warm .wave-line-aura{opacity:.58 !important;}
.wave-svg.tone-cost .wave-line-shine,.wave-svg.tone-warm .wave-line-shine{opacity:.66 !important;filter:drop-shadow(0 0 2px rgba(255,245,255,.70)) drop-shadow(0 0 7px rgba(255,67,230,.44)) !important;}
.wave-svg.tone-cost .wave-line-core,.wave-svg.tone-warm .wave-line-core{filter:drop-shadow(0 0 .9px rgba(255,245,255,.86)) drop-shadow(0 0 3.4px rgba(255,67,230,.82)) drop-shadow(0 0 10px rgba(141,98,255,.34)) !important;}
.wave-point{
  fill:#f6ffff !important;
  stroke:#00f6ff !important;
  stroke-width:.52 !important;
  opacity:.95 !important;
  filter:drop-shadow(0 0 2.4px rgba(0,246,255,.92)) drop-shadow(0 0 7px rgba(0,140,255,.34)) !important;
}
.wave-point-warm{fill:#dffbff !important;filter:drop-shadow(0 0 3px rgba(0,246,255,.96)) drop-shadow(0 0 9px rgba(0,140,255,.45)) !important;}
.wave-point-hot{fill:#ffffff !important;stroke:#bffbff !important;filter:drop-shadow(0 0 4px rgba(255,255,255,.92)) drop-shadow(0 0 12px rgba(0,246,255,.58)) drop-shadow(0 0 18px rgba(0,112,255,.30)) !important;}
.wave-svg.tone-cost .wave-point,.wave-svg.tone-warm .wave-point{stroke:#ff43e6 !important;filter:drop-shadow(0 0 2.6px rgba(255,67,230,.88)) drop-shadow(0 0 8px rgba(141,98,255,.34)) !important;}
.wave-svg.tone-cost .wave-point-hot,.wave-svg.tone-warm .wave-point-hot{fill:#fff5ff !important;stroke:#ffc9ff !important;filter:drop-shadow(0 0 4px rgba(255,245,255,.88)) drop-shadow(0 0 13px rgba(255,67,230,.58)) drop-shadow(0 0 20px rgba(141,98,255,.34)) !important;}
@media (min-width:1400px){
  body.density-compact .chart-card,body.density-ultra .chart-card{min-height:174px !important;}
  body.density-compact .bar-chart,body.density-compact .line-chart,body.density-compact .horizontal-bars,
  body.density-ultra .bar-chart,body.density-ultra .line-chart,body.density-ultra .horizontal-bars{height:126px !important;min-height:126px !important;}
}


/* v0.5.9m Thin Graph Line + Under Mist Glow + Weather Icon Polish */
body.density-comfort .gauge-area,
body.density-compact .gauge-area,
body.density-ultra .gauge-area{min-height:320px !important;}
body.density-comfort .exact-gauge,body.density-comfort .smooth-gauge{width:268px !important;height:268px !important;max-width:268px !important;margin:2px auto 10px !important;}
body.density-compact .exact-gauge,body.density-compact .smooth-gauge{width:252px !important;height:252px !important;max-width:252px !important;margin:2px auto 10px !important;}
body.density-ultra .exact-gauge,body.density-ultra .smooth-gauge{width:242px !important;height:242px !important;max-width:242px !important;margin:2px auto 10px !important;}
.gauge-value{font-size:49px !important;letter-spacing:-0.02em !important;}
body.density-compact .gauge-value{font-size:45px !important;}
body.density-ultra .gauge-value{font-size:42px !important;}
.gauge-label{font-size:12px !important;font-weight:560 !important;letter-spacing:.01em !important;}
.gauge-scale.watt{font-size:8.6px !important;}
.gauge-scale-labels text,.gauge-ring-label{font-size:7.4px !important;font-weight:560 !important;fill:#b7e8f7 !important;}
.gauge-area h2{font-size:17px !important;margin-top:8px !important;margin-bottom:2px !important;}

/* Weerwidget */
.weather-main{grid-template-columns:58px 1fr !important;gap:12px !important;}
.weather-icon{width:56px !important;height:56px !important;font-size:31px !important;line-height:1 !important;box-shadow:0 0 22px rgba(24,234,255,.20),0 0 24px rgba(255,61,232,.10) !important;}
#weatherClock{color:#ffac33 !important;text-shadow:0 0 10px rgba(255,153,36,.22) !important;}
.weather-main strong{font-size:18px !important;font-weight:680 !important;}
.weather-main h2{font-size:15px !important;font-weight:620 !important;}
.weather-main span{font-size:11.5px !important;}

/* Grafieken: dunne lijn, glow vooral als mist ONDER de lijn */
.wave-svg{inset:10px 10px 22px 44px !important;overflow:visible !important;}
.wave-area{opacity:.34 !important;filter:none !important;}
.wave-area-mist{opacity:.78 !important;mix-blend-mode:screen !important;}
.wave-line{fill:none !important;stroke-linecap:round !important;stroke-linejoin:round !important;vector-effect:non-scaling-stroke !important;}
.wave-line-aura{stroke-width:2.8px !important;opacity:.12 !important;mix-blend-mode:screen !important;}
.wave-line-glow{stroke-width:1.9px !important;opacity:.18 !important;mix-blend-mode:screen !important;filter:none !important;}
.wave-line-shine{stroke-width:1.55px !important;opacity:.44 !important;filter:drop-shadow(0 0 1.5px rgba(245,255,255,.48)) drop-shadow(0 0 5px rgba(0,246,255,.24)) !important;mix-blend-mode:screen !important;}
.wave-line-core{stroke-width:1.52px !important;opacity:1 !important;filter:drop-shadow(0 0 .5px rgba(248,255,255,.56)) !important;}
.wave-svg.tone-cost .wave-line-shine,.wave-svg.tone-warm .wave-line-shine{filter:drop-shadow(0 0 1.5px rgba(255,245,255,.48)) drop-shadow(0 0 5px rgba(255,67,230,.20)) !important;}
.wave-svg.tone-cost .wave-line-core,.wave-svg.tone-warm .wave-line-core{filter:drop-shadow(0 0 .5px rgba(255,245,255,.52)) !important;}
.wave-point{fill:#f6ffff !important;stroke:#00f6ff !important;stroke-width:.58 !important;opacity:.97 !important;filter:drop-shadow(0 0 1.9px rgba(0,246,255,.55)) drop-shadow(0 0 4px rgba(0,140,255,.18)) !important;}
.wave-point-warm{fill:#dffbff !important;filter:drop-shadow(0 0 2.1px rgba(0,246,255,.64)) drop-shadow(0 0 5px rgba(0,140,255,.22)) !important;}
.wave-point-hot{fill:#ffffff !important;stroke:#dcfdff !important;filter:drop-shadow(0 0 2.4px rgba(255,255,255,.70)) drop-shadow(0 0 7px rgba(0,246,255,.24)) !important;}
.wave-svg.tone-cost .wave-point,.wave-svg.tone-warm .wave-point{stroke:#ff43e6 !important;filter:drop-shadow(0 0 2px rgba(255,67,230,.56)) drop-shadow(0 0 5px rgba(141,98,255,.18)) !important;}
.wave-svg.tone-cost .wave-point-hot,.wave-svg.tone-warm .wave-point-hot{fill:#fff7ff !important;stroke:#ffd4ff !important;filter:drop-shadow(0 0 2.4px rgba(255,245,255,.70)) drop-shadow(0 0 7px rgba(255,67,230,.22)) !important;}

/* Iets meer lucht voor grafieken titel en inhoud */
.chart-card h2{font-size:13.8px !important;font-weight:560 !important;margin-bottom:10px !important;}


/* v0.5.9n Meter Pointer + Weather Icon + Deep Graph Mist + Period Glow + Single Power Toggle */
body.density-comfort .exact-gauge,body.density-comfort .smooth-gauge{width:276px !important;height:276px !important;max-width:276px !important;}
body.density-compact .exact-gauge,body.density-compact .smooth-gauge{width:260px !important;height:260px !important;max-width:260px !important;}
body.density-ultra .exact-gauge,body.density-ultra .smooth-gauge{width:250px !important;height:250px !important;max-width:250px !important;}
.gauge-label{font-size:13.1px !important;font-weight:580 !important;fill:#f2fbff !important;filter:drop-shadow(0 0 4px rgba(0,216,255,.32)) !important;}
.gauge-scale{font-size:8.2px !important;font-weight:620 !important;}
.gauge-scale.watt{font-size:9.7px !important;font-weight:690 !important;transform:translateY(-5px) !important;fill:#39f6ff !important;filter:drop-shadow(0 0 5px rgba(0,246,255,.50)) !important;}
.gauge-scale-labels text,.gauge-ring-label{font-size:8.2px !important;font-weight:620 !important;}
.gauge-marker-triangle{filter:drop-shadow(0 0 6px rgba(255,255,255,.65)) drop-shadow(0 0 12px rgba(0,246,255,.90)) drop-shadow(0 0 22px rgba(0,112,255,.45)) !important;}
.gauge-marker-halo{fill:rgba(0,246,255,.48) !important;stroke:rgba(255,255,255,.26) !important;stroke-width:.6 !important;filter:blur(.2px) !important;}
.gauge-marker-pointer{fill:#f8ffff !important;stroke:#5df8ff !important;stroke-width:.85 !important;}
.gauge-marker-dot,.gauge-marker-core{display:none !important;}
.weather-main{grid-template-columns:78px 1fr !important;gap:14px !important;}
.weather-icon{width:74px !important;height:74px !important;font-size:43px !important;border-width:1.2px !important;background:radial-gradient(circle,rgba(255,178,41,.22),rgba(24,234,255,.16) 48%,rgba(255,66,218,.08) 66%,transparent 72%) !important;box-shadow:0 0 25px rgba(255,153,36,.16),0 0 28px rgba(24,234,255,.24),0 0 36px rgba(255,61,232,.10) !important;}
#weatherClock{color:#ffb229 !important;text-shadow:0 0 12px rgba(255,153,36,.34),0 0 18px rgba(255,116,0,.16) !important;}
.weather-main strong{font-size:20px !important;}
.weather-main h2{font-size:15.6px !important;}
@media (max-width:1500px){.weather-main{grid-template-columns:68px 1fr !important}.weather-icon{width:64px !important;height:64px !important;font-size:37px !important;}}
.wave-area{opacity:.48 !important;}
.wave-area-mist{opacity:1 !important;mix-blend-mode:screen !important;filter:drop-shadow(0 0 15px rgba(0,180,255,.18)) !important;}
.wave-line-aura{stroke-width:2.4px !important;opacity:.10 !important;}
.wave-line-glow{stroke-width:1.65px !important;opacity:.14 !important;}
.wave-line-shine{stroke-width:1.42px !important;opacity:.42 !important;}
.wave-line-core{stroke-width:1.42px !important;}
.line-chart::after,.bar-chart::after{content:"";position:absolute;left:44px;right:10px;top:34px;bottom:18px;pointer-events:none;background:linear-gradient(180deg,rgba(0,246,255,.045),rgba(0,140,255,.050) 38%,rgba(68,85,255,.030) 70%,transparent 100%);mix-blend-mode:screen;border-radius:10px;opacity:.85;}
.chart-card:nth-child(3) .line-chart::after{background:linear-gradient(180deg,rgba(255,67,230,.050),rgba(141,98,255,.052) 42%,rgba(255,53,200,.028) 74%,transparent 100%);}
.period-btn{position:relative !important;overflow:hidden !important;border:1px solid rgba(0,216,255,.24) !important;background:linear-gradient(180deg,rgba(5,16,35,.72),rgba(0,7,20,.86)) !important;color:#eaf9ff !important;text-shadow:0 0 5px rgba(0,216,255,.12) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 0 10px rgba(0,120,255,.05) !important;}
.period-btn::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(circle at 25% 10%,rgba(255,255,255,.18),transparent 24%),linear-gradient(135deg,rgba(0,246,255,.0),rgba(255,61,232,.0));opacity:0;pointer-events:none;transition:opacity .18s ease;}
.period-btn:hover{border-color:rgba(0,216,255,.52) !important;box-shadow:0 0 14px rgba(0,216,255,.16),inset 0 0 12px rgba(0,216,255,.055) !important;}
.period-btn.active{border-color:rgba(126,238,255,.92) !important;background:linear-gradient(135deg,rgba(195,76,255,.86),rgba(36,118,255,.86) 56%,rgba(0,226,255,.72)) !important;color:#fff !important;box-shadow:0 0 0 1px rgba(255,255,255,.10),0 0 18px rgba(255,61,232,.50),0 0 28px rgba(0,216,255,.38),inset 0 0 18px rgba(255,255,255,.12) !important;text-shadow:0 0 8px rgba(255,255,255,.55) !important;}
.period-btn.active::before{opacity:1;}
.device-control-row.single-power-row{justify-content:center !important;align-items:center !important;max-width:none !important;gap:0 !important;margin-top:2px !important;}
.mini-power-toggle{width:29px;height:29px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(83,111,136,.40);background:radial-gradient(circle at 50% 45%,rgba(8,20,34,.92),rgba(0,5,15,.98) 68%);color:#44677d;cursor:pointer;box-shadow:inset 0 0 10px rgba(0,0,0,.55),0 0 4px rgba(0,0,0,.32);transition:filter .15s ease,box-shadow .15s ease,transform .15s ease,border-color .15s ease,color .15s ease;background .15s ease;}
.mini-power-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.mini-power-toggle:hover{transform:translateY(-1px);border-color:rgba(0,216,255,.55);color:#98eefe;box-shadow:0 0 12px rgba(0,216,255,.18),inset 0 0 12px rgba(0,216,255,.06);}
.mini-power-toggle.state-on{color:#efffff;border-color:rgba(90,255,238,.96);background:radial-gradient(circle at 50% 43%,rgba(95,255,242,.34),rgba(0,162,255,.18) 42%,rgba(0,8,22,.92) 72%);box-shadow:0 0 10px rgba(106,255,235,.82),0 0 24px rgba(0,216,255,.54),0 0 42px rgba(0,112,255,.30),inset 0 0 13px rgba(106,255,235,.18) !important;filter:saturate(1.18) brightness(1.14);}
.mini-power-toggle.state-off{color:#ffb56c;border-color:rgba(255,153,36,.48);background:radial-gradient(circle at 50% 45%,rgba(48,22,10,.74),rgba(0,5,15,.98) 68%);box-shadow:0 0 8px rgba(255,153,36,.16),inset 0 0 10px rgba(0,0,0,.56);}
.mini-power-toggle.unknown{color:#8cb9cf;border-color:rgba(125,170,190,.34);}
body.density-ultra .mini-power-toggle{width:26px;height:26px;}
body.density-ultra .mini-power-toggle svg{width:16px;height:16px;}
.single-power-test{justify-content:center !important;}
.settings-power-toggle{width:118px;height:118px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(83,111,136,.42);background:radial-gradient(circle at 50% 42%,rgba(11,24,40,.96),rgba(0,5,15,.99) 68%);color:#557387;cursor:pointer;box-shadow:inset 0 0 22px rgba(0,0,0,.62),0 0 10px rgba(0,0,0,.34);}
.settings-power-toggle .power-toggle-ring{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:50%;}
.settings-power-toggle svg{width:54px;height:54px;fill:none;stroke:currentColor;stroke-width:2.45;stroke-linecap:round;stroke-linejoin:round;}
.settings-power-toggle .power-toggle-text{font-size:12px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;}
.settings-power-toggle.state-on{color:#f0ffff;border-color:rgba(90,255,238,.96);background:radial-gradient(circle at 50% 42%,rgba(100,255,240,.30),rgba(0,162,255,.17) 42%,rgba(0,6,20,.96) 72%);box-shadow:0 0 18px rgba(106,255,235,.86),0 0 44px rgba(0,216,255,.56),0 0 70px rgba(0,112,255,.30),inset 0 0 24px rgba(106,255,235,.14) !important;}
.settings-power-toggle.state-off{color:#ffb56c;border-color:rgba(255,153,36,.46);background:radial-gradient(circle at 50% 42%,rgba(48,22,10,.70),rgba(0,5,15,.99) 68%);box-shadow:0 0 14px rgba(255,153,36,.15),inset 0 0 22px rgba(0,0,0,.62);}
.settings-power-toggle.unknown{color:#8cb9cf;}
.settings-power-toggle:disabled{opacity:.42 !important;filter:saturate(.55) brightness(.75) !important;cursor:not-allowed !important;box-shadow:inset 0 0 16px rgba(0,0,0,.60) !important;}


/* v0.5.9o UI Density Calibration + Arc Pointer + Device Truth Fix */
:root{
  --rem-o-cyan:#14f6ff;
  --rem-o-blue:#177dff;
  --rem-o-violet:#835cff;
  --rem-o-magenta:#ff43e6;
  --rem-o-orange:#ff9b22;
}

/* 100% browserzoom moet voelen als compacte cockpit, zonder dat tekst kabouterklein wordt. */
body.density-comfort .shell,
body.density-compact .shell,
body.density-ultra .shell{
  padding-top:12px !important;
  padding-left:18px !important;
  padding-right:18px !important;
}
.hud-topbar{
  margin-bottom:10px !important;
}
.cockpit{
  grid-template-columns:300px 1fr !important;
  min-height:560px !important;
  padding:12px !important;
  gap:12px !important;
}
.gauge-area{
  min-height:400px !important;
  padding-top:6px !important;
}
.right-panel{gap:9px !important;}
.kpi-line{
  min-height:128px !important;
}
.metric-card{
  min-height:126px !important;
  padding:14px 17px 10px !important;
}
.metric-card h2{font-size:13.4px !important;font-weight:560 !important;}
.metric-value{font-size:clamp(22px,1.42vw,30px) !important;line-height:1 !important;}
.metric-card p{font-size:10.8px !important;line-height:1.22 !important;}
.hud-icon{width:39px !important;height:39px !important;margin-bottom:4px !important;}
.hud-icon svg{width:24px !important;height:24px !important;}

/* Grote meter: labels leesbaar, niet vet. Watt hoger. */
body.density-comfort .exact-gauge,body.density-comfort .smooth-gauge{width:274px !important;height:274px !important;max-width:274px !important;}
body.density-compact .exact-gauge,body.density-compact .smooth-gauge{width:260px !important;height:260px !important;max-width:260px !important;}
body.density-ultra .exact-gauge,body.density-ultra .smooth-gauge{width:250px !important;height:250px !important;max-width:250px !important;}
.gauge-value{font-size:47px !important;font-weight:640 !important;}
body.density-compact .gauge-value{font-size:44px !important;}
body.density-ultra .gauge-value{font-size:42px !important;}
.gauge-label{
  font-size:13.2px !important;
  font-weight:520 !important;
  fill:#f3fbff !important;
}
.gauge-scale{
  font-size:9.2px !important;
  font-weight:500 !important;
  fill:#c2eefb !important;
  filter:drop-shadow(0 0 3px rgba(20,246,255,.34)) !important;
}
.gauge-scale.watt{
  font-size:11.2px !important;
  font-weight:560 !important;
  transform:translateY(-10px) !important;
  fill:#39f6ff !important;
  filter:drop-shadow(0 0 6px rgba(20,246,255,.55)) !important;
}
.gauge-scale-labels text,.gauge-ring-label{
  font-size:9.4px !important;
  font-weight:500 !important;
  fill:#bfefff !important;
  filter:drop-shadow(0 0 3px rgba(20,246,255,.34)) !important;
}

/* Arc-pointer: volgt de ring, met lichtstaart i.p.v. een losse pijl die naar rechts prikt. */
.gauge-marker-arc-arrow{
  filter:drop-shadow(0 0 7px rgba(255,255,255,.58)) drop-shadow(0 0 14px rgba(20,246,255,.80)) drop-shadow(0 0 24px rgba(23,125,255,.46)) !important;
}
.gauge-marker-tail{
  fill:none !important;
  stroke:rgba(20,246,255,.68) !important;
  stroke-width:4.2 !important;
  stroke-linecap:round !important;
  filter:blur(.35px) drop-shadow(0 0 8px rgba(20,246,255,.62)) !important;
  opacity:.82 !important;
}
.gauge-marker-halo{
  fill:rgba(20,246,255,.32) !important;
  stroke:rgba(255,255,255,.22) !important;
  stroke-width:.55 !important;
  filter:blur(.2px) !important;
}
.gauge-marker-pointer{
  fill:#f8ffff !important;
  stroke:#71faff !important;
  stroke-width:.72 !important;
}

/* Weerwidget: icoon echt groot, niet subtiel. */
.weather-strip{
  min-height:94px !important;
  padding:10px 12px !important;
  align-items:center !important;
}
.weather-main{
  grid-template-columns:102px 1fr !important;
  gap:12px !important;
}
.weather-icon{
  width:96px !important;
  height:96px !important;
  font-size:58px !important;
  line-height:1 !important;
  border-width:1.3px !important;
  background:
    radial-gradient(circle at 46% 42%,rgba(255,178,41,.25),rgba(20,246,255,.17) 47%,rgba(255,67,230,.08) 67%,transparent 74%) !important;
  box-shadow:
    0 0 26px rgba(255,153,36,.16),
    0 0 34px rgba(20,246,255,.30),
    0 0 44px rgba(255,67,230,.10) !important;
}
#weatherClock{
  color:var(--rem-o-orange) !important;
  text-shadow:0 0 12px rgba(255,153,36,.38),0 0 20px rgba(255,116,0,.16) !important;
}
.weather-main strong{font-size:20px !important;}
.weather-main h2{font-size:15px !important;font-weight:580 !important;}
.weather-main span{font-size:11px !important;}
.weather-metrics div{padding:6px 7px !important;}
.weather-metrics span{font-size:8.8px !important;}
.weather-metrics strong{font-size:11.5px !important;}

/* Device cards: compacter canvas, maar mini-meters juist sterker. */
.device-grid{
  gap:8px !important;
}
.device-card.zone-meter-card{
  min-height:78px !important;
  padding:7px 9px !important;
  gap:6px 9px !important;
  grid-template-columns:68px minmax(0,1fr) 40px !important;
  grid-template-areas:"gauge main live" "gauge stats live" !important;
}
.mini-device-gauge{
  width:62px !important;
  height:62px !important;
  box-shadow:0 0 18px rgba(20,246,255,.30),0 0 22px rgba(255,67,230,.13),inset 0 0 18px rgba(20,246,255,.11) !important;
}
.mini-device-value{font-size:16px !important;}
.mini-device-value span{font-size:8.4px !important;}
.device-name{font-size:14.8px !important;font-weight:560 !important;line-height:1.03 !important;}
.device-watt{font-size:21px !important;}
.device-watt span{font-size:11px !important;}
.device-meta{font-size:9.7px !important;font-weight:480 !important;}
.device-stats{
  grid-area:stats !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:5px !important;
  padding-top:4px !important;
}
.device-stats span{font-size:7.3px !important;}
.device-stats strong{font-size:8.8px !important;}
.device-livebox{
  grid-area:live !important;
  align-self:stretch !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding-left:4px !important;
  gap:4px !important;
}
.pill{font-size:9.2px !important;padding:3px 7px !important;}

/* Power-toggle op kaart: duidelijker, premium aan/uit gevoel. */
.device-control-row.single-power-row{
  margin-top:auto !important;
  justify-content:center !important;
}
.mini-power-toggle{
  width:35px !important;
  height:35px !important;
  border-radius:50% !important;
}
.mini-power-toggle svg{width:21px !important;height:21px !important;stroke-width:2.35 !important;}
.mini-power-toggle.state-on{
  color:#f2ffff !important;
  border-color:rgba(102,255,240,.98) !important;
  background:
    radial-gradient(circle at 50% 42%,rgba(142,255,246,.42),rgba(0,188,255,.22) 43%,rgba(0,8,22,.93) 73%) !important;
  box-shadow:
    0 0 12px rgba(106,255,235,.95),
    0 0 30px rgba(0,216,255,.62),
    0 0 52px rgba(23,125,255,.34),
    inset 0 0 16px rgba(106,255,235,.20) !important;
}
.mini-power-toggle.state-off{
  color:#5d7f94 !important;
  border-color:rgba(94,126,148,.34) !important;
  background:radial-gradient(circle at 50% 45%,rgba(10,22,36,.86),rgba(0,5,15,.99) 70%) !important;
  box-shadow:inset 0 0 12px rgba(0,0,0,.62),0 0 5px rgba(0,0,0,.34) !important;
}

/* Periodeknoppen blijven compact, maar met duidelijke glow. */
.period-panel{
  margin-top:10px !important;
  padding:10px 13px !important;
}
.period-left h2{font-size:14.2px !important;margin-bottom:7px !important;}
.period-btn{
  min-width:64px !important;
  padding:8px 11px !important;
  border-radius:10px !important;
  font-size:11.5px !important;
}
.period-btn.active{
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 0 18px rgba(255,67,230,.46),0 0 28px rgba(20,246,255,.36),inset 0 0 16px rgba(255,255,255,.12) !important;
}

/* Grafieken: layout weer strak op 100%, lijn nóg dunner, mist blijft diep. */
.charts-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:10px !important;
}
.chart-card{
  min-height:170px !important;
  padding:10px 12px 10px !important;
}
.chart-card h2{
  font-size:13.2px !important;
  font-weight:550 !important;
  margin-bottom:8px !important;
}
.bar-chart,.line-chart,.horizontal-bars{
  height:124px !important;
  min-height:124px !important;
}
.wave-svg{inset:9px 9px 20px 42px !important;overflow:visible !important;}
.wave-area{opacity:.43 !important;}
.wave-area-mist{
  opacity:1 !important;
  transform:translateY(4px) scaleY(1.18);
  transform-origin:center bottom;
  mix-blend-mode:screen !important;
}
.wave-line-aura{stroke-width:1.8px !important;opacity:.075 !important;}
.wave-line-glow{stroke-width:1.25px !important;opacity:.12 !important;}
.wave-line-shine{stroke-width:1.05px !important;opacity:.34 !important;}
.wave-line-core{
  stroke-width:1.12px !important;
  opacity:1 !important;
  filter:drop-shadow(0 0 .45px rgba(248,255,255,.54)) !important;
}
.wave-point{r:2.7px !important;filter:drop-shadow(0 0 1.8px rgba(20,246,255,.54)) drop-shadow(0 0 4px rgba(23,125,255,.18)) !important;}
.wave-point-hot{filter:drop-shadow(0 0 2.2px rgba(255,255,255,.68)) drop-shadow(0 0 7px rgba(20,246,255,.24)) !important;}
.line-chart::after,.bar-chart::after{
  top:24px !important;
  bottom:12px !important;
  background:linear-gradient(180deg,rgba(20,246,255,.055),rgba(0,140,255,.070) 42%,rgba(68,85,255,.044) 76%,transparent 100%) !important;
  opacity:.98 !important;
}
.chart-card:nth-child(3) .line-chart::after,.chart-card:nth-child(3) .bar-chart::after{
  background:linear-gradient(180deg,rgba(255,67,230,.060),rgba(141,98,255,.070) 44%,rgba(255,53,200,.044) 78%,transparent 100%) !important;
}

@media (max-width:1450px){
  .cockpit{grid-template-columns:282px 1fr !important;}
  .charts-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .weather-main{grid-template-columns:88px 1fr !important;}
  .weather-icon{width:82px !important;height:82px !important;font-size:50px !important;}
}

/* v0.5.9q Recovery HUD Polish + Long Arc Pointer + Balanced Power/Mini Meters
   Basis blijft v0.5.9o. Alleen visuele herstel/polish. */

/* Grote meter: langere boogpijl die écht met de cirkel meeloopt. */
.gauge-marker-long-arc-arrow{
  pointer-events:none !important;
  overflow:visible !important;
  filter:drop-shadow(0 0 7px rgba(247,255,255,.50)) drop-shadow(0 0 15px rgba(20,246,255,.70)) drop-shadow(0 0 26px rgba(23,125,255,.34)) !important;
}
.gauge-marker-tail{
  fill:none !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  mix-blend-mode:screen !important;
}
.gauge-marker-tail.halo-tail{
  stroke:rgba(20,246,255,.16) !important;
  stroke-width:10.5 !important;
  filter:blur(.9px) drop-shadow(0 0 12px rgba(20,246,255,.45)) !important;
}
.gauge-marker-tail.main-tail{
  stroke:rgba(20,246,255,.58) !important;
  stroke-width:4.8 !important;
  filter:drop-shadow(0 0 8px rgba(20,246,255,.65)) !important;
}
.gauge-marker-tail.core-tail{
  stroke:rgba(245,255,255,.76) !important;
  stroke-width:1.45 !important;
  opacity:.88 !important;
}
.gauge-marker-head.head-halo{
  fill:rgba(20,246,255,.30) !important;
  stroke:rgba(245,255,255,.14) !important;
  stroke-width:.7 !important;
  filter:blur(.45px) drop-shadow(0 0 11px rgba(20,246,255,.72)) !important;
}
.gauge-marker-head.head-main{
  fill:#f5ffff !important;
  stroke:#73fbff !important;
  stroke-width:.85 !important;
  filter:drop-shadow(0 0 5px rgba(245,255,255,.58)) drop-shadow(0 0 13px rgba(20,246,255,.82)) !important;
}
.gauge-marker-arc-arrow .gauge-marker-tail,
.gauge-marker-arc-arrow .gauge-marker-halo,
.gauge-marker-arc-arrow .gauge-marker-pointer{
  display:none !important;
}

/* Schaalteksten grote meter beter zichtbaar, maar niet lomp/bold. */
.gauge-scale{
  font-size:9.7px !important;
  font-weight:500 !important;
  fill:#c7eefb !important;
  opacity:.97 !important;
}
.gauge-scale.watt{
  font-size:11.4px !important;
  font-weight:540 !important;
  transform:translateY(-12px) !important;
  fill:#3cf7ff !important;
}
.gauge-scale-labels text,
.gauge-ring-label{
  font-size:9.6px !important;
  font-weight:500 !important;
  fill:#c3eefc !important;
  opacity:.96 !important;
}
.gauge-label{font-size:13.5px !important;font-weight:540 !important;}

/* Weerwidget: icoon groter maar in eigen kolom, dus geen botsing met temperatuur. */
.weather-strip.compact-weather-card{
  width:min(540px,100%) !important;
  max-width:540px !important;
  padding:12px 14px !important;
  gap:8px 12px !important;
}
.weather-strip.compact-weather-card .weather-main{
  grid-template-columns:92px minmax(0,1fr) !important;
  gap:13px !important;
  align-items:center !important;
}
.weather-strip.compact-weather-card .weather-icon{
  width:84px !important;
  height:84px !important;
  min-width:84px !important;
  font-size:54px !important;
  line-height:1 !important;
  overflow:hidden !important;
  border-width:1.2px !important;
  background:
    radial-gradient(circle at 46% 42%,rgba(255,178,41,.24),rgba(20,246,255,.16) 47%,rgba(255,67,230,.08) 67%,transparent 74%) !important;
  box-shadow:
    0 0 20px rgba(255,153,36,.14),
    0 0 28px rgba(20,246,255,.24),
    0 0 36px rgba(255,67,230,.08) !important;
}
.weather-strip.compact-weather-card .weather-temp-block{
  min-width:0 !important;
  padding-left:0 !important;
}
.weather-strip.compact-weather-card .weather-main strong,
.weather-main strong{
  font-size:21px !important;
  font-weight:660 !important;
  line-height:1.02 !important;
}
.weather-strip.compact-weather-card .weather-main span,
.weather-main span{
  font-size:12px !important;
  line-height:1.18 !important;
}
.weather-date-row span{font-size:14.5px !important;}
.weather-date-row strong{font-size:21px !important;color:var(--rem-o-orange) !important;text-shadow:0 0 12px rgba(255,153,36,.34) !important;}
.weather-place-row strong{font-size:13.4px !important;}
.weather-place-row small{font-size:11.2px !important;}
.weather-strip.compact-weather-card .weather-metrics span{font-size:9.4px !important;}
.weather-strip.compact-weather-card .weather-metrics strong{font-size:12.2px !important;}
@media (max-width:1450px){
  .weather-strip.compact-weather-card .weather-main{grid-template-columns:82px minmax(0,1fr) !important;}
  .weather-strip.compact-weather-card .weather-icon{width:76px !important;height:76px !important;min-width:76px !important;font-size:49px !important;}
}

/* Stekkerkaarten: mini-meters 1.3-1.5x sterker, powerknop kleiner dan mislukte p-versie. */
.device-card.zone-meter-card{
  min-height:92px !important;
  padding:8px 10px !important;
  gap:7px 10px !important;
  grid-template-columns:84px minmax(0,1fr) 38px !important;
  grid-template-areas:"gauge main live" "gauge stats live" !important;
  align-items:center !important;
}
.mini-device-gauge{
  width:78px !important;
  height:78px !important;
  box-shadow:
    0 0 20px rgba(20,246,255,.34),
    0 0 24px rgba(255,67,230,.14),
    inset 0 0 20px rgba(20,246,255,.12) !important;
}
.mini-device-value{font-size:18px !important;}
.mini-device-value span{font-size:9.2px !important;}
.device-name{font-size:15.6px !important;line-height:1.03 !important;}
.device-watt{font-size:22px !important;line-height:1 !important;}
.device-watt span{font-size:11.5px !important;}
.device-meta{font-size:10.1px !important;}
.device-stats{padding-top:4px !important;}
.device-stats span{font-size:7.7px !important;}
.device-stats strong{font-size:9.2px !important;}

/* Power-toggle: blauwe neon aan-state, compact en zonder label onder de knop. */
.device-control-row.single-power-row{
  justify-content:center !important;
  margin-top:auto !important;
}
.mini-power-toggle{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  border-radius:50% !important;
  overflow:visible !important;
}
.mini-power-toggle svg{
  width:19px !important;
  height:19px !important;
  stroke-width:2.45 !important;
}
.mini-power-toggle::after{display:none !important;content:none !important;}
.mini-power-toggle.state-on{
  color:#efffff !important;
  border-color:rgba(110,247,255,.98) !important;
  background:
    radial-gradient(circle at 50% 42%,rgba(132,246,255,.42),rgba(20,190,255,.24) 43%,rgba(0,7,22,.93) 74%) !important;
  box-shadow:
    0 0 10px rgba(96,242,255,.82),
    0 0 24px rgba(20,216,255,.54),
    0 0 38px rgba(23,125,255,.28),
    inset 0 0 14px rgba(96,242,255,.20) !important;
  filter:saturate(1.15) brightness(1.12) !important;
}
.mini-power-toggle.state-off{
  color:#4a6578 !important;
  border-color:rgba(86,116,138,.34) !important;
  background:radial-gradient(circle at 50% 45%,rgba(9,20,34,.86),rgba(0,5,15,.99) 70%) !important;
  box-shadow:inset 0 0 12px rgba(0,0,0,.64),0 0 5px rgba(0,0,0,.32) !important;
}
.mini-power-toggle.unknown{
  color:#7eaec5 !important;
  border-color:rgba(125,170,190,.34) !important;
}

/* Settings powerknop niet meeschalen naar lomp formaat. */
.settings-power-toggle{
  width:112px !important;
  height:112px !important;
}
.settings-power-toggle.state-on{
  color:#efffff !important;
  border-color:rgba(110,247,255,.98) !important;
  box-shadow:
    0 0 18px rgba(96,242,255,.76),
    0 0 42px rgba(20,216,255,.48),
    0 0 62px rgba(23,125,255,.26),
    inset 0 0 22px rgba(96,242,255,.14) !important;
}

/* Houd 100% layout netjes op normale desktopbreedte. */
@media (max-width:1450px){
  .device-card.zone-meter-card{
    grid-template-columns:78px minmax(0,1fr) 36px !important;
    min-height:90px !important;
  }
  .mini-device-gauge{width:72px !important;height:72px !important;}
  .mini-device-value{font-size:17px !important;}
}


/* v0.5.9r Power Toggle Truth Fix + Blue Neon State Polish + Weather Layout Fix */

/* Weerwidget: echt groter icoon, maar in eigen kolom zodat hij NIET door de temp tekst loopt. */
.weather-strip.compact-weather-card,
.weather-strip{
  min-height:104px !important;
  padding:12px 14px !important;
  overflow:hidden !important;
}
.weather-strip.compact-weather-card .weather-main,
.weather-main{
  display:grid !important;
  grid-template-columns:86px minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:14px !important;
  min-width:0 !important;
}
.weather-strip.compact-weather-card .weather-icon,
.weather-icon{
  grid-column:1 !important;
  grid-row:1 / span 3 !important;
  width:78px !important;
  height:78px !important;
  min-width:78px !important;
  font-size:52px !important;
  line-height:1 !important;
  justify-self:center !important;
  align-self:center !important;
  transform:none !important;
  margin:0 !important;
  position:relative !important;
  z-index:1 !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 48% 44%,rgba(255,184,45,.20),rgba(20,246,255,.14) 48%,rgba(255,67,230,.06) 70%,transparent 76%) !important;
  box-shadow:
    0 0 18px rgba(255,171,46,.14),
    0 0 26px rgba(20,246,255,.22),
    inset 0 0 14px rgba(20,246,255,.06) !important;
}
.weather-main > div:not(.weather-icon),
.weather-main h2,
.weather-main strong,
.weather-main span{
  grid-column:2 !important;
  min-width:0 !important;
}
#weatherClock{color:#ffad2c !important;text-shadow:0 0 10px rgba(255,153,36,.34) !important;}
.weather-main h2{font-size:16px !important;font-weight:620 !important;}
.weather-main strong{font-size:21px !important;font-weight:680 !important;line-height:1.02 !important;}
.weather-main span{font-size:12px !important;line-height:1.15 !important;}
.weather-metrics div{padding:7px 8px !important;}
.weather-metrics span{font-size:9.8px !important;}
.weather-metrics strong{font-size:12px !important;}
@media (max-width:1450px){
  .weather-strip.compact-weather-card .weather-main,
  .weather-main{grid-template-columns:78px minmax(0,1fr) !important;column-gap:12px !important;}
  .weather-strip.compact-weather-card .weather-icon,
  .weather-icon{width:70px !important;height:70px !important;min-width:70px !important;font-size:47px !important;}
}

/* Stekkerkaart-power: aan = blauwe neon, uit = donker. Geen tekstlabel onder knop. */
.mini-power-toggle{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  border-radius:50% !important;
  overflow:visible !important;
  position:relative !important;
}
.mini-power-toggle svg{width:22px !important;height:22px !important;stroke-width:2.35 !important;}
.mini-power-toggle::after{display:none !important;content:none !important;}
.mini-power-toggle.state-on{
  color:#f2ffff !important;
  border-color:rgba(126,248,255,.98) !important;
  background:
    radial-gradient(circle at 50% 42%,rgba(210,255,255,.48),rgba(20,246,255,.30) 32%,rgba(25,105,255,.18) 56%,rgba(0,7,23,.92) 76%) !important;
  box-shadow:
    0 0 0 1px rgba(220,255,255,.10),
    0 0 12px rgba(42,246,255,.88),
    0 0 26px rgba(27,140,255,.58),
    0 0 46px rgba(48,62,255,.34),
    inset 0 0 15px rgba(66,246,255,.18) !important;
  filter:saturate(1.26) brightness(1.18) !important;
}
.mini-power-toggle.state-on::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(20,246,255,.24),rgba(24,90,255,.12) 48%,transparent 72%);
  z-index:-1;
  pointer-events:none;
}
.mini-power-toggle.state-off{
  color:#3f5667 !important;
  border-color:rgba(80,104,122,.34) !important;
  background:radial-gradient(circle at 50% 45%,rgba(8,18,31,.82),rgba(0,4,13,.99) 72%) !important;
  box-shadow:inset 0 0 12px rgba(0,0,0,.72),0 0 4px rgba(0,0,0,.32) !important;
  filter:saturate(.70) brightness(.82) !important;
}
.mini-power-toggle.unknown{
  color:#82a9bc !important;
  border-color:rgba(125,170,190,.34) !important;
  background:radial-gradient(circle at 50% 45%,rgba(9,20,34,.84),rgba(0,5,15,.99) 72%) !important;
}

/* Settings powerknop zelfde blauw-neon principe. */
.settings-power-toggle.state-on{
  color:#f2ffff !important;
  border-color:rgba(126,248,255,.98) !important;
  background:
    radial-gradient(circle at 50% 42%,rgba(210,255,255,.42),rgba(20,246,255,.27) 32%,rgba(25,105,255,.17) 56%,rgba(0,7,23,.94) 76%) !important;
  box-shadow:
    0 0 0 1px rgba(220,255,255,.10),
    0 0 18px rgba(42,246,255,.82),
    0 0 44px rgba(27,140,255,.54),
    0 0 72px rgba(48,62,255,.32),
    inset 0 0 22px rgba(66,246,255,.16) !important;
}
.settings-power-toggle.state-off{
  color:#3f5667 !important;
  border-color:rgba(80,104,122,.34) !important;
  background:radial-gradient(circle at 50% 45%,rgba(8,18,31,.82),rgba(0,4,13,.99) 72%) !important;
  box-shadow:inset 0 0 18px rgba(0,0,0,.72),0 0 5px rgba(0,0,0,.32) !important;
}

/* Laat de mini-meters groot blijven, maar niet tegen de kaart knallen. */
.mini-device-gauge{
  width:70px !important;
  height:70px !important;
}
.device-card.zone-meter-card{
  grid-template-columns:74px minmax(0,1fr) 42px !important;
}
body.density-ultra .mini-device-gauge,
body.density-compact .mini-device-gauge{
  width:66px !important;
  height:66px !important;
}


/* v0.5.9s Weather Widget Rebuild + Live Clock Fix
   Doel: icoon-box L/R/hoog/laag echt groter, geen overlap met temperatuurtekst. */
.weather-strip.compact-weather-card,
.weather-strip{
  position:relative !important;
  min-height:132px !important;
  height:auto !important;
  padding:14px 16px !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns:minmax(390px, 0.48fr) 1fr auto !important;
  gap:14px !important;
  align-items:center !important;
}

.weather-strip.compact-weather-card .weather-main,
.weather-main{
  display:grid !important;
  grid-template-columns:122px minmax(0,1fr) !important;
  grid-template-rows:auto auto auto !important;
  grid-template-areas:
    "icon top"
    "icon temp"
    "icon meta" !important;
  column-gap:16px !important;
  row-gap:2px !important;
  min-width:0 !important;
  align-items:center !important;
}

.weather-strip.compact-weather-card .weather-icon,
.weather-icon,
#weatherIcon{
  grid-area:icon !important;
  width:112px !important;
  height:112px !important;
  min-width:112px !important;
  min-height:112px !important;
  max-width:112px !important;
  max-height:112px !important;
  font-size:78px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  justify-self:center !important;
  align-self:center !important;
  position:relative !important;
  margin:0 !important;
  transform:none !important;
  inset:auto !important;
  z-index:1 !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 42% 38%,rgba(255,183,45,.24),rgba(20,246,255,.16) 48%,rgba(87,96,255,.08) 66%,transparent 74%) !important;
  border:1px solid rgba(20,246,255,.24) !important;
  box-shadow:
    0 0 20px rgba(255,171,46,.13),
    0 0 32px rgba(20,246,255,.20),
    0 0 44px rgba(48,90,255,.10),
    inset 0 0 18px rgba(20,246,255,.06) !important;
}

.weather-main > div:not(.weather-icon),
.weather-main h2,
.weather-main strong,
.weather-main span{
  grid-column:2 !important;
  min-width:0 !important;
  position:relative !important;
  z-index:2 !important;
}

.weather-main h2,
#weatherDayName{
  grid-area:top !important;
  font-size:16.5px !important;
  line-height:1.05 !important;
  font-weight:620 !important;
  margin:0 !important;
}

.weather-main strong,
#weatherTemp{
  grid-area:temp !important;
  display:block !important;
  font-size:26px !important;
  line-height:1.02 !important;
  font-weight:680 !important;
  color:#f3fbff !important;
  margin:0 !important;
}

.weather-main span,
#weatherSummary{
  display:block !important;
  font-size:13px !important;
  line-height:1.12 !important;
  color:#a8c7da !important;
  margin:0 !important;
}

#weatherClock{
  color:#ffad2c !important;
  font-size:20px !important;
  line-height:1 !important;
  text-shadow:0 0 10px rgba(255,153,36,.36),0 0 18px rgba(255,116,0,.12) !important;
}

#weatherPlace,
#weatherDateTime{
  font-size:12.2px !important;
}

.weather-metrics{
  gap:8px !important;
  align-self:stretch !important;
  align-items:stretch !important;
}

.weather-metrics div{
  min-height:42px !important;
  padding:8px 9px !important;
  border-radius:11px !important;
}

.weather-metrics span{
  font-size:10.2px !important;
  line-height:1.05 !important;
}

.weather-metrics strong{
  font-size:12.8px !important;
  line-height:1.08 !important;
}

.weather-location-btn{
  align-self:start !important;
  min-height:31px !important;
  padding:7px 13px !important;
}

@media (max-width:1500px){
  .weather-strip.compact-weather-card,
  .weather-strip{
    grid-template-columns:minmax(340px, 0.52fr) 1fr !important;
    min-height:122px !important;
    padding:12px 14px !important;
  }
  .weather-strip.compact-weather-card .weather-main,
  .weather-main{
    grid-template-columns:106px minmax(0,1fr) !important;
    column-gap:14px !important;
  }
  .weather-strip.compact-weather-card .weather-icon,
  .weather-icon,
  #weatherIcon{
    width:98px !important;
    height:98px !important;
    min-width:98px !important;
    min-height:98px !important;
    max-width:98px !important;
    max-height:98px !important;
    font-size:68px !important;
  }
  .weather-main strong,
  #weatherTemp{
    font-size:24px !important;
  }
  #weatherClock{
    font-size:19px !important;
  }
  .weather-metrics div{
    min-height:39px !important;
  }
}

@media (max-width:1280px){
  .weather-strip.compact-weather-card,
  .weather-strip{
    grid-template-columns:1fr !important;
  }
}


/* v0.5.9t Weather Widget Balance Fix
   v0.5.9s was te groot; dit is de middenweg: groter dan oud, kleiner dan s, netjes uitgelijnd. */
.weather-strip.compact-weather-card,
.weather-strip{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:
    "date loc"
    "main main"
    "place place"
    "metrics metrics" !important;
  min-height:116px !important;
  height:auto !important;
  padding:12px 14px 13px !important;
  gap:6px 12px !important;
  align-items:start !important;
  overflow:hidden !important;
}

.weather-date-row{
  grid-area:date !important;
  display:flex !important;
  align-items:baseline !important;
  gap:9px !important;
  min-width:0 !important;
}
.weather-date-row span{
  font-size:15px !important;
  font-weight:650 !important;
  line-height:1 !important;
}
#weatherClock{
  font-size:18px !important;
  line-height:1 !important;
  color:#ffad2c !important;
  text-shadow:0 0 10px rgba(255,153,36,.34),0 0 18px rgba(255,116,0,.12) !important;
}

.weather-location-btn{
  grid-area:loc !important;
  justify-self:end !important;
  align-self:start !important;
  min-height:29px !important;
  padding:6px 12px !important;
  font-size:10.5px !important;
  white-space:nowrap !important;
}

.weather-strip.compact-weather-card .weather-main,
.weather-main{
  grid-area:main !important;
  display:grid !important;
  grid-template-columns:94px minmax(0,1fr) !important;
  grid-template-rows:1fr !important;
  grid-template-areas:"icon temp" !important;
  align-items:center !important;
  column-gap:13px !important;
  row-gap:0 !important;
  min-width:0 !important;
  margin-top:1px !important;
}

.weather-strip.compact-weather-card .weather-icon,
.weather-icon,
#weatherIcon{
  grid-area:icon !important;
  width:86px !important;
  height:86px !important;
  min-width:86px !important;
  min-height:86px !important;
  max-width:86px !important;
  max-height:86px !important;
  font-size:58px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  justify-self:center !important;
  align-self:center !important;
  position:relative !important;
  margin:0 !important;
  transform:none !important;
  inset:auto !important;
  z-index:1 !important;
  border-radius:20px !important;
  background:
    radial-gradient(circle at 45% 40%,rgba(255,183,45,.19),rgba(20,246,255,.13) 48%,rgba(87,96,255,.06) 68%,transparent 76%) !important;
  border:1px solid rgba(20,246,255,.20) !important;
  box-shadow:
    0 0 17px rgba(255,171,46,.10),
    0 0 25px rgba(20,246,255,.17),
    inset 0 0 15px rgba(20,246,255,.045) !important;
}

.weather-temp-block{
  grid-area:temp !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  min-width:0 !important;
  padding-top:1px !important;
}
.weather-temp-block strong,
#weatherTemp{
  display:block !important;
  font-size:23px !important;
  line-height:1.02 !important;
  font-weight:680 !important;
  color:#f3fbff !important;
  margin:0 0 1px !important;
}
.weather-temp-block span,
#weatherSummary{
  display:block !important;
  font-size:12.2px !important;
  line-height:1.08 !important;
  color:#a8c7da !important;
  margin:0 !important;
}

.weather-place-row{
  grid-area:place !important;
  display:flex !important;
  align-items:baseline !important;
  gap:9px !important;
  min-width:0 !important;
  margin-top:1px !important;
}
#weatherPlace{
  font-size:12.4px !important;
  font-weight:650 !important;
  line-height:1.05 !important;
}
#weatherDateTime{
  font-size:11.2px !important;
  line-height:1.05 !important;
  color:#91adc2 !important;
}

.weather-metrics{
  grid-area:metrics !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(54px,1fr)) !important;
  gap:7px !important;
  margin-top:2px !important;
}
.weather-metrics div{
  min-height:36px !important;
  padding:6px 8px !important;
  border-radius:10px !important;
}
.weather-metrics span{
  font-size:9.3px !important;
  line-height:1.05 !important;
}
.weather-metrics strong{
  font-size:11.7px !important;
  line-height:1.08 !important;
}

@media (max-width:1500px){
  .weather-strip.compact-weather-card,
  .weather-strip{
    min-height:110px !important;
    padding:11px 13px 12px !important;
    gap:5px 10px !important;
  }
  .weather-strip.compact-weather-card .weather-main,
  .weather-main{
    grid-template-columns:86px minmax(0,1fr) !important;
    column-gap:12px !important;
  }
  .weather-strip.compact-weather-card .weather-icon,
  .weather-icon,
  #weatherIcon{
    width:78px !important;
    height:78px !important;
    min-width:78px !important;
    min-height:78px !important;
    max-width:78px !important;
    max-height:78px !important;
    font-size:53px !important;
    border-radius:18px !important;
  }
  .weather-temp-block strong,
  #weatherTemp{
    font-size:22px !important;
  }
  #weatherClock{
    font-size:17px !important;
  }
  .weather-date-row span{
    font-size:14.4px !important;
  }
  .weather-metrics div{
    min-height:34px !important;
    padding:6px 7px !important;
  }
}

@media (max-width:1280px){
  .weather-strip.compact-weather-card,
  .weather-strip{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "date"
      "loc"
      "main"
      "place"
      "metrics" !important;
  }
  .weather-location-btn{
    justify-self:start !important;
  }
}


/* v0.5.9u Weather Widget Alignment Fix
   Alleen uitlijning: icoon in nette eigen kolom, temp/tekst strak ernaast, metrics op vaste rij. */
#weatherPanel.weather-strip.compact-weather-card,
#weatherPanel.weather-strip{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:
    "date loc"
    "main main"
    "place place"
    "metrics metrics" !important;
  width:min(420px,100%) !important;
  min-height:118px !important;
  padding:12px 15px 12px !important;
  gap:7px 12px !important;
  align-items:start !important;
  overflow:hidden !important;
}

#weatherPanel .weather-date-row{
  grid-area:date !important;
  display:flex !important;
  align-items:baseline !important;
  gap:9px !important;
  line-height:1 !important;
  min-width:0 !important;
}
#weatherPanel .weather-date-row span{
  font-size:15px !important;
  font-weight:650 !important;
  line-height:1 !important;
}
#weatherPanel #weatherClock{
  font-size:18px !important;
  font-weight:720 !important;
  line-height:1 !important;
  color:#ffad2c !important;
  text-shadow:0 0 10px rgba(255,153,36,.36),0 0 18px rgba(255,116,0,.12) !important;
}
#weatherPanel .weather-location-btn{
  grid-area:loc !important;
  justify-self:end !important;
  align-self:start !important;
  min-height:29px !important;
  padding:6px 12px !important;
  font-size:10.5px !important;
}

#weatherPanel .weather-main{
  grid-area:main !important;
  display:grid !important;
  grid-template-columns:88px minmax(0,1fr) !important;
  grid-template-areas:"icon temp" !important;
  column-gap:13px !important;
  align-items:center !important;
  min-height:72px !important;
  margin:0 0 0 4px !important;
  padding:0 !important;
}
#weatherPanel .weather-icon,
#weatherPanel #weatherIcon{
  grid-area:icon !important;
  width:76px !important;
  height:76px !important;
  min-width:76px !important;
  min-height:76px !important;
  max-width:76px !important;
  max-height:76px !important;
  font-size:50px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  justify-self:center !important;
  align-self:center !important;
  position:relative !important;
  margin:0 !important;
  transform:none !important;
  inset:auto !important;
  z-index:1 !important;
  overflow:visible !important;
  border-radius:18px !important;
  background:radial-gradient(circle at 45% 40%,rgba(255,183,45,.16),rgba(20,246,255,.10) 50%,rgba(87,96,255,.05) 68%,transparent 76%) !important;
  border:1px solid rgba(20,246,255,.18) !important;
  box-shadow:0 0 15px rgba(255,171,46,.09),0 0 22px rgba(20,246,255,.14),inset 0 0 13px rgba(20,246,255,.04) !important;
}
#weatherPanel .weather-temp-block{
  grid-area:temp !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  transform:translateY(-1px) !important;
}
#weatherPanel #weatherTemp,
#weatherPanel .weather-temp-block strong{
  display:block !important;
  font-size:22.5px !important;
  line-height:1.02 !important;
  font-weight:680 !important;
  margin:0 0 2px !important;
  color:#f3fbff !important;
}
#weatherPanel #weatherSummary,
#weatherPanel .weather-temp-block span{
  display:block !important;
  font-size:12px !important;
  line-height:1.08 !important;
  margin:0 !important;
  color:#a8c7da !important;
}

#weatherPanel .weather-place-row{
  grid-area:place !important;
  display:flex !important;
  align-items:baseline !important;
  gap:9px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}
#weatherPanel #weatherPlace{
  font-size:12.2px !important;
  font-weight:650 !important;
  line-height:1.05 !important;
}
#weatherPanel #weatherDateTime{
  font-size:11px !important;
  line-height:1.05 !important;
  color:#91adc2 !important;
}
#weatherPanel .weather-metrics{
  grid-area:metrics !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(52px,1fr)) !important;
  gap:7px !important;
  margin:0 !important;
  align-items:stretch !important;
}
#weatherPanel .weather-metrics div{
  min-height:34px !important;
  padding:6px 7px !important;
  border-radius:10px !important;
}
#weatherPanel .weather-metrics span{
  font-size:9px !important;
  line-height:1.05 !important;
}
#weatherPanel .weather-metrics strong{
  font-size:11.5px !important;
  line-height:1.08 !important;
}

@media (max-width:1500px){
  #weatherPanel.weather-strip.compact-weather-card,
  #weatherPanel.weather-strip{
    width:min(390px,100%) !important;
    min-height:114px !important;
    padding:11px 13px 11px !important;
  }
  #weatherPanel .weather-main{
    grid-template-columns:82px minmax(0,1fr) !important;
    column-gap:12px !important;
    min-height:68px !important;
  }
  #weatherPanel .weather-icon,
  #weatherPanel #weatherIcon{
    width:70px !important;
    height:70px !important;
    min-width:70px !important;
    min-height:70px !important;
    max-width:70px !important;
    max-height:70px !important;
    font-size:46px !important;
  }
  #weatherPanel #weatherTemp,
  #weatherPanel .weather-temp-block strong{font-size:21px !important;}
  #weatherPanel #weatherClock{font-size:17px !important;}
  #weatherPanel .weather-date-row span{font-size:14.4px !important;}
  #weatherPanel .weather-metrics div{min-height:32px !important;padding:5px 7px !important;}
  #weatherPanel .weather-metrics span{font-size:8.8px !important;}
  #weatherPanel .weather-metrics strong{font-size:11.2px !important;}
}


/* v0.5.9w Graph Thin Line + Right Edge Cleanup + Long Gauge Pointer Tail */

/* Rechter ghost-balk / losse verticale rand opruimen. */
html,
body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}
body{
  position:relative !important;
}
.shell,
.app-shell,
.dashboard-shell,
.hud-shell,
main,
.cockpit,
.period-panel,
.charts-grid,
.hud-panel{
  max-width:100% !important;
  box-sizing:border-box !important;
}
.shell,
.cockpit,
.right-panel,
.charts-grid,
.chart-card{
  overflow-x:hidden !important;
}
.right-panel,
.device-section,
.device-grid,
.device-toolbar,
.metric-card,
.device-card,
.chart-card,
.period-panel{
  min-width:0 !important;
}
.device-toolbar input,
.device-toolbar select{
  min-width:0 !important;
}

/* De sierlijke buitenrand mag niet buiten het paneel blijven hangen. */
.cockpit::before,
.cockpit::after,
.hud-panel::before,
.hud-panel::after,
.period-panel::before,
.period-panel::after,
.chart-card::before,
.chart-card::after{
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

/* Grote meterpointer: langere staart, meer met de cirkel mee. */
.gauge-marker-long-arc-arrow{
  overflow:visible !important;
  filter:
    drop-shadow(0 0 6px rgba(248,255,255,.64))
    drop-shadow(0 0 14px rgba(20,246,255,.76))
    drop-shadow(0 0 28px rgba(22,130,255,.38)) !important;
}
.gauge-marker-tail{
  fill:none !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  mix-blend-mode:screen !important;
}
.gauge-marker-tail.halo-tail{
  stroke:rgba(20,246,255,.17) !important;
  stroke-width:13px !important;
  filter:
    drop-shadow(0 0 12px rgba(20,246,255,.50))
    drop-shadow(0 0 28px rgba(22,130,255,.28)) !important;
}
.gauge-marker-tail.main-tail{
  stroke:rgba(44,235,255,.72) !important;
  stroke-width:5.0px !important;
  filter:drop-shadow(0 0 8px rgba(20,246,255,.70)) !important;
}
.gauge-marker-tail.core-tail{
  stroke:rgba(248,255,255,.78) !important;
  stroke-width:1.25px !important;
  opacity:.84 !important;
}
.gauge-marker-head.head-halo{
  fill:rgba(20,246,255,.32) !important;
  stroke:rgba(248,255,255,.18) !important;
  stroke-width:.65 !important;
  filter:
    blur(.25px)
    drop-shadow(0 0 11px rgba(20,246,255,.74)) !important;
}
.gauge-marker-head.head-main{
  fill:#f8ffff !important;
  stroke:#86fbff !important;
  stroke-width:.78 !important;
  filter:
    drop-shadow(0 0 5px rgba(248,255,255,.74))
    drop-shadow(0 0 14px rgba(20,246,255,.88)) !important;
}

/* Grafieken: dunnere lijn, piek helderder, mist behouden. */
.wave-svg{
  overflow:visible !important;
}
.wave-line-aura{
  stroke-width:1.15px !important;
  opacity:.052 !important;
}
.wave-line-glow{
  stroke-width:.84px !important;
  opacity:.105 !important;
}
.wave-line-shine{
  stroke-width:.74px !important;
  opacity:.50 !important;
  mix-blend-mode:screen !important;
}
.wave-line-core{
  stroke-width:.80px !important;
  opacity:1 !important;
  filter:drop-shadow(0 0 .34px rgba(248,255,255,.54)) !important;
}
.wave-area{
  opacity:.39 !important;
}
.wave-area-mist{
  opacity:1 !important;
  transform:translateY(5px) scaleY(1.28) !important;
  transform-origin:center bottom !important;
  mix-blend-mode:screen !important;
}
.wave-point{
  filter:
    drop-shadow(0 0 1.2px rgba(20,246,255,.42))
    drop-shadow(0 0 3px rgba(22,130,255,.14)) !important;
}
.wave-point-warm{
  filter:
    drop-shadow(0 0 1.6px rgba(166,244,255,.58))
    drop-shadow(0 0 4px rgba(20,246,255,.20)) !important;
}
.wave-point-hot{
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.76))
    drop-shadow(0 0 6px rgba(20,246,255,.26)) !important;
}

/* De achterliggende kaart-glow rustiger, zodat de lijn dun blijft. */
.line-chart::after,
.bar-chart::after{
  opacity:.78 !important;
  background:
    linear-gradient(180deg,
      rgba(248,255,255,.018),
      rgba(20,246,255,.048) 34%,
      rgba(22,130,255,.044) 68%,
      transparent 100%) !important;
}
.chart-card:nth-child(3) .line-chart::after,
.chart-card:nth-child(3) .bar-chart::after{
  background:
    linear-gradient(180deg,
      rgba(255,235,255,.016),
      rgba(255,67,230,.050) 36%,
      rgba(141,98,255,.050) 72%,
      transparent 100%) !important;
}


/* v0.5.9x Chart Truth + Gauge Safety + Hard Right Edge Kill */

/* Hard kill rechter ghost-balk: gesloten instellingenpaneel helemaal buiten beeld en onzichtbaar. */
.settings-drawer:not(.open){
  transform:translateX(calc(100% + 48px)) !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  border-left-color:transparent !important;
  box-shadow:none !important;
}
.settings-drawer.open{
  transform:translateX(0) !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  border-left-color:var(--cyan-line) !important;
  box-shadow:0 18px 56px rgba(0,0,0,.45) !important;
}
html,body{
  max-width:100vw !important;
  overflow-x:hidden !important;
}
.shell{
  max-width:calc(100vw - 36px) !important;
  width:auto !important;
  overflow:hidden !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.cockpit,
.period-panel,
.charts-grid,
.hud-panel{
  max-width:100% !important;
  overflow:hidden !important;
}
.cockpit::after{
  background:
    radial-gradient(circle at 18% 46%,rgba(24,234,255,.13),transparent 25%),
    linear-gradient(90deg,transparent 0 37%,rgba(24,234,255,.08) 37.12%,transparent 37.28% 100%),
    linear-gradient(90deg,transparent 0 44%,rgba(24,234,255,.045) 44.1%,transparent 44.2% 100%) !important;
}

/* Gauge schaal en veiligheidszones */
.gauge-scale:not(.watt){display:none !important;}
.gauge-safety-arc{
  fill:none !important;
  stroke-linecap:round !important;
  stroke-width:8.4px !important;
  opacity:.88 !important;
  filter:drop-shadow(0 0 5px rgba(255,120,0,.34)) !important;
}
.gauge-safety-arc.warn{stroke:rgba(255,201,45,.62) !important;}
.gauge-safety-arc.heavy{stroke:rgba(255,118,28,.72) !important;filter:drop-shadow(0 0 7px rgba(255,120,0,.48)) !important;}
.gauge-safety-arc.critical{stroke:rgba(116,0,18,.86) !important;filter:drop-shadow(0 0 8px rgba(255,0,58,.58)) drop-shadow(0 0 18px rgba(116,0,18,.40)) !important;}
.gauge-value-dot{
  fill:#0ff6ff !important;
  stroke:#f4ffff !important;
  stroke-width:.85 !important;
  filter:drop-shadow(0 0 5px rgba(0,246,255,.82)) drop-shadow(0 0 12px rgba(0,140,255,.30)) !important;
}
.gauge-value-dot.warn{fill:#ffd84a !important;filter:drop-shadow(0 0 7px rgba(255,216,74,.85)) drop-shadow(0 0 16px rgba(255,138,0,.36)) !important;}
.gauge-value-dot.heavy{fill:#ff7926 !important;filter:drop-shadow(0 0 8px rgba(255,121,38,.90)) drop-shadow(0 0 18px rgba(255,53,0,.42)) !important;}
.gauge-value-dot.critical,.gauge-value-dot.over{fill:#5b0014 !important;stroke:#ffb6c5 !important;filter:drop-shadow(0 0 8px rgba(255,0,58,.92)) drop-shadow(0 0 22px rgba(91,0,20,.62)) !important;}
.gauge-critical #gaugeProgress,.gauge-over #gaugeProgress{stroke:#ff2b59 !important;filter:drop-shadow(0 0 5px rgba(255,0,58,.70)) drop-shadow(0 0 12px rgba(91,0,20,.44)) !important;}
.gauge-heavy #gaugeProgress{stroke:#ff8a25 !important;}
.gauge-warn #gaugeProgress{stroke:#ffd84a !important;}

/* Alle grafieken: echte hairline boven de mist. */
.wave-svg{overflow:hidden !important;}
.wave-area{opacity:.26 !important;}
.wave-area-mist{
  opacity:.82 !important;
  transform:none !important;
  mix-blend-mode:screen !important;
  filter:none !important;
}
.wave-line-aura{
  stroke-width:.72px !important;
  opacity:.035 !important;
}
.wave-line-glow{
  stroke-width:.60px !important;
  opacity:.070 !important;
}
.wave-line-shine{
  stroke-width:.56px !important;
  opacity:.38 !important;
}
.wave-line-core{
  stroke-width:.58px !important;
  opacity:1 !important;
  filter:drop-shadow(0 0 .28px rgba(255,255,255,.64)) !important;
}
.wave-point{r:1.85px !important;}
.wave-point-warm{r:2.05px !important;}
.wave-point-hot{r:2.18px !important;}
.line-chart::after,.bar-chart::after{opacity:.42 !important;}

/* Stekkerkaarten tonen groepbelasting zonder het Tuya/powerdeel te raken. */
.group-safety-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:18px;
  padding:2px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:760;
  border:1px solid rgba(24,234,255,.22);
  color:#9ff9ff;
  background:rgba(3,16,30,.58);
  box-shadow:0 0 10px rgba(24,234,255,.08);
}
.group-safety-pill.warn{color:#ffe78b;border-color:rgba(255,216,74,.50);box-shadow:0 0 12px rgba(255,216,74,.18);}
.group-safety-pill.heavy{color:#ffb071;border-color:rgba(255,121,38,.56);box-shadow:0 0 14px rgba(255,121,38,.22);}
.group-safety-pill.critical,.group-safety-pill.over{color:#ffd6df;border-color:rgba(255,43,89,.62);background:rgba(63,0,16,.52);box-shadow:0 0 16px rgba(255,0,58,.25);}
.device-card.safety-warn{border-color:rgba(255,216,74,.38) !important;}
.device-card.safety-heavy{border-color:rgba(255,121,38,.48) !important;box-shadow:0 0 18px rgba(255,121,38,.10), inset 0 0 18px rgba(255,121,38,.035) !important;}
.device-card.safety-critical,.device-card.safety-over{border-color:rgba(255,43,89,.58) !important;box-shadow:0 0 20px rgba(255,0,58,.14), inset 0 0 20px rgba(91,0,20,.08) !important;}
/* v0.5.9x: oude vaste warm/rode gaugeboog uitzetten; veiligheidsbogen nemen dit over. */
.gauge-warm-arc{display:none !important;}


/* v0.5.9y Weather Scene + Gauge Label Cleanup + Optional Group Meters */

/* Grote meter schoon: alleen getal + Watt in de kern. */
.gauge-label{
  font-size:13.8px !important;
  font-weight:620 !important;
  fill:#18eaff !important;
  text-anchor:middle !important;
  filter:drop-shadow(0 0 5px rgba(24,234,255,.34)) !important;
}
.gauge-scale.watt{display:none !important;}

.gauge-profile-label{
  width:min(360px,100%);
  margin:2px auto 10px;
  padding:8px 12px 9px;
  border:1px solid rgba(24,234,255,.20);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(2,16,30,.42),rgba(3,10,24,.22));
  box-shadow:inset 0 0 18px rgba(24,234,255,.035),0 0 22px rgba(24,234,255,.045);
  text-align:center;
}
.gauge-profile-label span{
  display:block;
  color:#eaf9ff;
  font-size:12.4px;
  line-height:1.1;
  font-weight:650;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gauge-profile-label small{
  display:block;
  margin-top:3px;
  color:#93bed6;
  font-size:10.4px;
  line-height:1.15;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gauge-profile-label.warn small{color:#ffd25d}
.gauge-profile-label.heavy small{color:#ff9b39}
.gauge-profile-label.critical small,
.gauge-profile-label.over small{color:#ff6b6b;text-shadow:0 0 10px rgba(255,55,55,.35)}

/* Left-side vertical weather card */
.gauge-area{
  grid-template-rows:auto min-content auto auto 1fr !important;
}
#weatherPanel.weather-scene-panel,
#weatherPanel.weather-strip.compact-weather-card,
#weatherPanel.weather-strip{
  width:min(365px,100%) !important;
  margin:8px auto 12px !important;
  min-height:0 !important;
  padding:13px 14px 14px !important;
  display:grid !important;
  grid-template-columns:1fr auto !important;
  grid-template-areas:
    "date loc"
    "main main"
    "place place"
    "metrics metrics" !important;
  gap:8px 10px !important;
  border-radius:22px !important;
  overflow:hidden !important;
  isolation:isolate !important;
  border-color:rgba(24,234,255,.28) !important;
  background:
    radial-gradient(circle at 20% 14%,rgba(255,196,64,.16),transparent 27%),
    radial-gradient(circle at 86% 18%,rgba(107,82,255,.20),transparent 31%),
    linear-gradient(145deg,rgba(5,35,58,.58),rgba(8,12,34,.66) 53%,rgba(38,10,50,.58)) !important;
  box-shadow:
    inset 0 0 34px rgba(24,234,255,.055),
    0 0 30px rgba(24,234,255,.065),
    0 0 24px rgba(255,66,218,.035) !important;
}
#weatherPanel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),transparent 28%),
    radial-gradient(circle at 50% 112%,rgba(24,234,255,.16),transparent 44%);
  opacity:.9;
}
#weatherPanel[data-scene="storm"]{
  background:
    radial-gradient(circle at 86% 12%,rgba(77,112,255,.26),transparent 28%),
    linear-gradient(145deg,rgba(5,16,35,.78),rgba(13,13,37,.76) 55%,rgba(18,7,35,.70)) !important;
}
#weatherPanel[data-scene="rain"],
#weatherPanel[data-scene="cloudy"],
#weatherPanel[data-scene="night-cloud"]{
  background:
    radial-gradient(circle at 20% 16%,rgba(24,234,255,.10),transparent 26%),
    linear-gradient(145deg,rgba(5,28,48,.70),rgba(8,13,31,.72) 55%,rgba(14,10,36,.64)) !important;
}
#weatherPanel .weather-date-row{
  grid-area:date !important;
  align-items:baseline !important;
  gap:8px !important;
}
#weatherPanel .weather-date-row span{
  font-size:13px !important;
  font-weight:660 !important;
  color:#f2fbff !important;
}
#weatherPanel #weatherClock{
  font-size:17px !important;
  color:#ffb12d !important;
  text-shadow:0 0 12px rgba(255,161,33,.34) !important;
}
#weatherPanel .weather-location-btn{
  grid-area:loc !important;
  justify-self:end !important;
  min-height:28px !important;
  padding:6px 9px !important;
  font-size:9.6px !important;
  border-radius:10px !important;
}
#weatherPanel .weather-main{
  grid-area:main !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-areas:"icon" "temp" !important;
  row-gap:5px !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  justify-items:center !important;
}
#weatherPanel .weather-icon,
#weatherPanel #weatherIcon{
  grid-area:icon !important;
  width:100% !important;
  height:118px !important;
  max-width:315px !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  border:0 !important;
  border-radius:24px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#weatherPanel .weather-temp-block{
  grid-area:temp !important;
  align-items:center !important;
  text-align:center !important;
  padding:0 !important;
  transform:none !important;
}
#weatherPanel #weatherTemp,
#weatherPanel .weather-temp-block strong{
  font-size:32px !important;
  font-weight:690 !important;
  line-height:.95 !important;
  letter-spacing:-.04em !important;
}
#weatherPanel #weatherSummary,
#weatherPanel .weather-temp-block span{
  margin-top:3px !important;
  font-size:12.8px !important;
  color:#d3e9f4 !important;
}
#weatherPanel .weather-place-row{
  grid-area:place !important;
  justify-content:center !important;
  gap:8px !important;
  margin:1px 0 0 !important;
}
#weatherPanel #weatherPlace{
  font-size:12.8px !important;
}
#weatherPanel #weatherDateTime{
  font-size:10.5px !important;
}
#weatherPanel .weather-metrics{
  grid-area:metrics !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:7px !important;
  margin-top:2px !important;
}
#weatherPanel .weather-metrics div{
  min-height:34px !important;
  padding:6px 8px !important;
  border-radius:11px !important;
  background:rgba(3,13,30,.26) !important;
}
#weatherPanel .weather-metrics span{
  font-size:9px !important;
}
#weatherPanel .weather-metrics strong{
  font-size:11.7px !important;
}

/* SVG weather scenes */
.wx-scene{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
  filter:drop-shadow(0 0 18px rgba(24,234,255,.12));
}
.wx-bg{
  fill:rgba(7,29,54,.28);
  stroke:rgba(24,234,255,.13);
  stroke-width:1;
}
.wx-sunny .wx-bg,
.wx-partly .wx-bg{fill:rgba(4,49,76,.22)}
.wx-storm .wx-bg{fill:rgba(2,9,25,.42)}
.wx-horizon{
  fill:rgba(24,234,255,.09);
  opacity:.72;
}
.wx-sun{
  fill:url(#wxSunGrad);
  filter:drop-shadow(0 0 12px rgba(255,212,64,.72)) drop-shadow(0 0 25px rgba(255,122,0,.38));
}
.wx-sun-hot{
  fill:rgba(255,255,210,.50);
  filter:blur(1px);
}
.wx-cloud{
  fill:url(#wxCloudGrad);
  opacity:.96;
  filter:drop-shadow(0 8px 9px rgba(0,0,0,.28)) drop-shadow(0 0 14px rgba(255,255,255,.18));
}
.wx-cloud ellipse{opacity:.86}
.wx-rain path{
  stroke:#53d9ff;
  stroke-width:4;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(24,234,255,.55));
}
.wx-lightning{
  fill:#72fbff;
  stroke:#f7ffff;
  stroke-width:1.5;
  filter:drop-shadow(0 0 7px rgba(61,235,255,.95)) drop-shadow(0 0 18px rgba(63,84,255,.75));
}
.wx-storm .wx-cloud{filter:drop-shadow(0 9px 12px rgba(0,0,0,.46)) drop-shadow(0 0 13px rgba(89,129,255,.22));}
.wx-moon{
  fill:#f2f8ff;
  filter:drop-shadow(0 0 10px rgba(210,238,255,.50));
}
.wx-stars circle{
  fill:#eafaff;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.55));
}
.wx-snow text{
  fill:#f4fbff;
  font-size:26px;
  font-weight:700;
  filter:drop-shadow(0 0 5px rgba(240,250,255,.45));
}
.wx-fog path{
  stroke:rgba(210,244,255,.55);
  stroke-width:6;
  stroke-linecap:round;
  filter:blur(.2px) drop-shadow(0 0 8px rgba(24,234,255,.20));
}

/* Optional groepmeters */
.right-panel{
  grid-template-rows:minmax(190px,auto) auto 1fr !important;
}
#groupMetersPanel[hidden]{
  display:none !important;
}
.group-meters-panel{
  padding:14px 16px 16px !important;
  border-radius:20px !important;
  background:linear-gradient(145deg,rgba(2,12,24,.20),rgba(4,11,27,.12)) !important;
}
.group-meters-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.group-meters-head h2{
  font-size:16px !important;
}
.group-meters-head span{
  font-size:11px;
  color:#91b8cf;
}
.group-meter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
}
.group-meter-card{
  display:grid;
  justify-items:center;
  gap:8px;
  min-height:148px;
  padding:10px;
  border:1px solid rgba(24,234,255,.18);
  border-radius:18px;
  background:rgba(2,12,24,.18);
  box-shadow:inset 0 0 18px rgba(24,234,255,.025);
}
.group-meter-orb{
  --ring-color:rgba(24,234,255,.92);
  width:92px;
  height:92px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 50%,rgba(3,10,22,.98) 0 50%,transparent 51%),
    conic-gradient(var(--ring-color) var(--load),rgba(24,234,255,.12) 0);
  box-shadow:0 0 18px rgba(24,234,255,.15), inset 0 0 18px rgba(24,234,255,.08);
}
.group-meter-card.warn .group-meter-orb{--ring-color:#ffd15e}
.group-meter-card.heavy .group-meter-orb{--ring-color:#ff9838}
.group-meter-card.critical .group-meter-orb,
.group-meter-card.over .group-meter-orb{--ring-color:#ff4545}
.group-meter-core{
  width:66px;
  height:66px;
  border-radius:50%;
  display:grid;
  place-items:center;
  align-content:center;
  background:rgba(1,8,17,.96);
  border:1px solid rgba(24,234,255,.20);
}
.group-meter-core strong{
  display:block;
  font-size:18px;
  color:#f4fbff;
  line-height:1;
}
.group-meter-core span{
  font-size:8.5px;
  color:#18eaff;
  line-height:1;
}
.group-meter-copy{
  width:100%;
  text-align:center;
  min-width:0;
}
.group-meter-copy strong{
  display:block;
  font-size:12px;
  color:#f0fbff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.group-meter-copy span,
.group-meter-copy small{
  display:block;
  font-size:9.2px;
  line-height:1.18;
  color:#94b9ce;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.group-meter-copy small{color:#55f49a}
.group-meter-card.warn .group-meter-copy small{color:#ffd15e}
.group-meter-card.heavy .group-meter-copy small{color:#ff9838}
.group-meter-card.critical .group-meter-copy small,
.group-meter-card.over .group-meter-copy small{color:#ff6767}

/* compact fallback */
@media (max-width:1500px){
  .cockpit{grid-template-columns:450px 1fr !important;}
  #weatherPanel.weather-scene-panel,
  #weatherPanel.weather-strip.compact-weather-card,
  #weatherPanel.weather-strip{width:min(335px,100%) !important;padding:12px !important;}
  #weatherPanel .weather-icon,
  #weatherPanel #weatherIcon{height:104px !important;max-width:292px !important;}
  #weatherPanel #weatherTemp{font-size:29px !important;}
  .group-meter-grid{grid-template-columns:repeat(auto-fit,minmax(122px,1fr));}
  .group-meter-orb{width:82px;height:82px;}
  .group-meter-core{width:58px;height:58px;}
}



/* =========================================================
   v0.5.9z Layout Repair Hotfix
   Doel: total meter bovenaan links, compacte weather-widget eronder,
   groepmeters lager/compacter en links uitgelijnd.
   Tuya, powerknop en logging onaangeraakt.
   ========================================================= */

/* Linkerkolom weer een strakke verticale stack. */
.gauge-area{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  align-content:flex-start !important;
  justify-items:center !important;
  gap:0 !important;
  min-height:auto !important;
  padding:10px 8px 10px !important;
  overflow:visible !important;
  contain:none !important;
}

/* Volgorde: grote meter bovenaan, dan klein label, dan caption, dan weer, dan status. */
.gauge-area .smooth-gauge,
.gauge-area .exact-gauge,
#mainGauge{
  order:1 !important;
  width:268px !important;
  height:268px !important;
  max-width:268px !important;
  margin:0 auto 4px !important;
  flex:0 0 auto !important;
}

.gauge-area .gauge-profile-label,
#mainGaugeProfileLabel{
  order:2 !important;
  width:min(248px,100%) !important;
  margin:0 auto 5px !important;
  padding:5px 8px 6px !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,rgba(2,16,30,.30),rgba(3,10,24,.16)) !important;
  border-color:rgba(24,234,255,.16) !important;
  box-shadow:inset 0 0 12px rgba(24,234,255,.025),0 0 12px rgba(24,234,255,.025) !important;
}

.gauge-profile-label span{
  font-size:10.7px !important;
  line-height:1.05 !important;
  font-weight:620 !important;
}
.gauge-profile-label small{
  margin-top:2px !important;
  font-size:8.7px !important;
  line-height:1.05 !important;
}

.gauge-area h2{
  order:3 !important;
  width:100% !important;
  text-align:center !important;
  justify-self:center !important;
  margin:0 0 7px !important;
  padding:0 !important;
  font-size:15px !important;
  line-height:1.08 !important;
  font-weight:560 !important;
}

/* Weather onder de meter, maar compact en smaller. */
#weatherPanel.weather-scene-panel,
#weatherPanel.weather-strip.compact-weather-card,
#weatherPanel.weather-strip{
  order:4 !important;
  width:min(248px,100%) !important;
  min-width:0 !important;
  max-width:248px !important;
  min-height:0 !important;
  margin:0 auto 10px !important;
  padding:8px 9px 9px !important;
  border-radius:16px !important;
  display:grid !important;
  grid-template-columns:1fr auto !important;
  grid-template-areas:
    "date loc"
    "main main"
    "place place"
    "metrics metrics" !important;
  gap:4px 7px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 20% 10%,rgba(255,196,64,.10),transparent 26%),
    linear-gradient(145deg,rgba(5,28,48,.42),rgba(8,12,34,.44) 58%,rgba(30,10,42,.34)) !important;
  box-shadow:
    inset 0 0 18px rgba(24,234,255,.035),
    0 0 14px rgba(24,234,255,.035) !important;
}

#weatherPanel::before{
  opacity:.42 !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.026),transparent 30%),
    radial-gradient(circle at 50% 112%,rgba(24,234,255,.08),transparent 44%) !important;
}

#weatherPanel .weather-date-row{
  grid-area:date !important;
  display:flex !important;
  gap:5px !important;
  align-items:baseline !important;
}
#weatherPanel .weather-date-row span{
  font-size:10.4px !important;
  line-height:1 !important;
}
#weatherPanel #weatherClock{
  font-size:12.2px !important;
  line-height:1 !important;
  color:#ffae2b !important;
  text-shadow:0 0 8px rgba(255,161,33,.24) !important;
}
#weatherPanel .weather-location-btn{
  grid-area:loc !important;
  justify-self:end !important;
  align-self:start !important;
  min-height:20px !important;
  height:20px !important;
  padding:3px 6px !important;
  font-size:0 !important;
  line-height:1 !important;
  border-radius:8px !important;
  max-width:28px !important;
  overflow:hidden !important;
}
#weatherPanel .weather-location-btn::before{
  content:"⌖";
  font-size:11px;
}

#weatherPanel .weather-main{
  grid-area:main !important;
  display:grid !important;
  grid-template-columns:76px minmax(0,1fr) !important;
  grid-template-areas:"icon temp" !important;
  align-items:center !important;
  justify-items:start !important;
  column-gap:8px !important;
  row-gap:0 !important;
  min-height:0 !important;
  margin:1px 0 0 !important;
  padding:0 !important;
}

#weatherPanel .weather-icon,
#weatherPanel #weatherIcon{
  grid-area:icon !important;
  width:72px !important;
  height:56px !important;
  min-width:72px !important;
  min-height:56px !important;
  max-width:72px !important;
  max-height:56px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#weatherPanel .weather-temp-block{
  grid-area:temp !important;
  width:100% !important;
  min-width:0 !important;
  align-items:flex-start !important;
  text-align:left !important;
  padding:0 !important;
  margin:0 !important;
}
#weatherPanel #weatherTemp,
#weatherPanel .weather-temp-block strong{
  font-size:24px !important;
  line-height:.95 !important;
  letter-spacing:-.035em !important;
}
#weatherPanel #weatherSummary,
#weatherPanel .weather-temp-block span{
  margin-top:2px !important;
  font-size:10.6px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#weatherPanel .weather-place-row{
  grid-area:place !important;
  justify-content:flex-start !important;
  align-items:baseline !important;
  gap:6px !important;
  margin:0 !important;
  padding:0 !important;
}
#weatherPanel #weatherPlace{
  font-size:10.8px !important;
  line-height:1.05 !important;
}
#weatherPanel #weatherDateTime{
  font-size:8.8px !important;
  line-height:1.05 !important;
}

#weatherPanel .weather-metrics{
  grid-area:metrics !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:5px !important;
  margin-top:1px !important;
}
#weatherPanel .weather-metrics div{
  min-height:26px !important;
  padding:4px 6px !important;
  border-radius:9px !important;
  background:rgba(3,13,30,.22) !important;
}
#weatherPanel .weather-metrics span{
  font-size:7.8px !important;
  line-height:1.05 !important;
}
#weatherPanel .weather-metrics strong{
  font-size:9.8px !important;
  line-height:1.05 !important;
}

/* Weather icons: géén eigen rechthoekige achtergrond. Alleen het icoon zweeft. */
.wx-scene{
  width:76px !important;
  height:58px !important;
  overflow:visible !important;
  filter:drop-shadow(0 0 8px rgba(24,234,255,.10)) !important;
}
.wx-bg,
.wx-horizon{
  display:none !important;
}
.wx-sun{
  filter:drop-shadow(0 0 8px rgba(255,212,64,.58)) drop-shadow(0 0 14px rgba(255,122,0,.28)) !important;
}
.wx-cloud{
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.28)) drop-shadow(0 0 7px rgba(255,255,255,.14)) !important;
}
.wx-rain path{
  stroke-width:3 !important;
  filter:drop-shadow(0 0 4px rgba(24,234,255,.42)) !important;
}
.wx-lightning{
  filter:drop-shadow(0 0 5px rgba(61,235,255,.88)) drop-shadow(0 0 10px rgba(63,84,255,.58)) !important;
}

.gauge-area .gauge-status{
  order:5 !important;
  width:100% !important;
  max-width:225px !important;
  margin:0 auto !important;
  gap:7px !important;
  flex:0 0 auto !important;
}

/* Groepmeters: compact, links uitgelijnd, geen showroom-bak. */
#groupMetersPanel.group-meters-panel{
  padding:8px 10px 10px !important;
  border-radius:16px !important;
  margin:0 0 8px !important;
  min-height:0 !important;
  background:linear-gradient(145deg,rgba(2,12,24,.16),rgba(4,11,27,.10)) !important;
}
.group-meters-head{
  margin-bottom:7px !important;
  gap:8px !important;
}
.group-meters-head h2{
  font-size:14px !important;
  line-height:1.1 !important;
}
.group-meters-head span{
  font-size:9.5px !important;
  line-height:1.1 !important;
}

.group-meter-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  align-content:flex-start !important;
  gap:9px !important;
}

.group-meter-card{
  width:142px !important;
  min-width:142px !important;
  max-width:142px !important;
  min-height:100px !important;
  height:100px !important;
  padding:7px 7px 6px !important;
  gap:5px !important;
  border-radius:14px !important;
  display:grid !important;
  grid-template-rows:auto 1fr !important;
  justify-items:center !important;
}

.group-meter-orb{
  width:54px !important;
  height:54px !important;
  box-shadow:0 0 13px rgba(24,234,255,.12), inset 0 0 14px rgba(24,234,255,.06) !important;
}
.group-meter-core{
  width:38px !important;
  height:38px !important;
}
.group-meter-core strong{
  font-size:12.6px !important;
}
.group-meter-core span{
  font-size:6.5px !important;
}

.group-meter-copy strong{
  font-size:8.8px !important;
  line-height:1.05 !important;
}
.group-meter-copy span,
.group-meter-copy small{
  font-size:6.9px !important;
  line-height:1.05 !important;
}

/* Als er veel groepen zichtbaar zijn, mag de apparaatlijst niet wegzakken. */
.right-panel{
  grid-template-rows:minmax(142px,auto) auto 1fr !important;
}

/* Compacte maat bij kleinere schermbreedte. */
@media (max-width:1500px){
  .cockpit{grid-template-columns:330px 1fr !important;}
  .gauge-area .smooth-gauge,
  .gauge-area .exact-gauge,
  #mainGauge{
    width:250px !important;
    height:250px !important;
    max-width:250px !important;
  }
  #weatherPanel.weather-scene-panel,
  #weatherPanel.weather-strip.compact-weather-card,
  #weatherPanel.weather-strip{
    width:min(232px,100%) !important;
    max-width:232px !important;
    padding:7px 8px 8px !important;
  }
  #weatherPanel .weather-main{
    grid-template-columns:68px minmax(0,1fr) !important;
    column-gap:7px !important;
  }
  #weatherPanel .weather-icon,
  #weatherPanel #weatherIcon{
    width:64px !important;
    min-width:64px !important;
    max-width:64px !important;
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
  }
  .wx-scene{
    width:68px !important;
    height:52px !important;
  }
  #weatherPanel #weatherTemp{font-size:22px !important;}
  .group-meter-card{
    width:128px !important;
    min-width:128px !important;
    max-width:128px !important;
    height:92px !important;
    min-height:92px !important;
  }
  .group-meter-orb{width:48px !important;height:48px !important;}
  .group-meter-core{width:34px !important;height:34px !important;}
}



/* =========================================================
   v0.5.9aa Readability + Group Settings + Pointer Dot Fix
   ========================================================= */

/* Linkerkolom: meer ademruimte tussen meter, label, titel en weather. */
.gauge-area .smooth-gauge,
.gauge-area .exact-gauge,
#mainGauge{
  margin-bottom:10px !important;
}
.gauge-area .gauge-profile-label,
#mainGaugeProfileLabel{
  margin-top:2px !important;
  margin-bottom:10px !important;
}
.gauge-area h2{
  margin-top:0 !important;
  margin-bottom:9px !important;
}

/* Weather iets smaller, maar tekst beter leesbaar en icoon iets groter. */
#weatherPanel.weather-scene-panel,
#weatherPanel.weather-strip.compact-weather-card,
#weatherPanel.weather-strip{
  width:min(238px,100%) !important;
  max-width:238px !important;
  padding:8px 9px 10px !important;
}
#weatherPanel .weather-main{
  grid-template-columns:78px minmax(0,1fr) !important;
  column-gap:8px !important;
}
#weatherPanel .weather-icon,
#weatherPanel #weatherIcon{
  width:76px !important;
  height:62px !important;
  min-width:76px !important;
  min-height:62px !important;
  max-width:76px !important;
  max-height:62px !important;
}
.wx-scene{
  width:82px !important;
  height:64px !important;
}
#weatherPanel .weather-date-row span{
  font-size:11.2px !important;
}
#weatherPanel #weatherClock{
  font-size:13.2px !important;
}
#weatherPanel #weatherTemp,
#weatherPanel .weather-temp-block strong{
  font-size:25px !important;
}
#weatherPanel #weatherSummary,
#weatherPanel .weather-temp-block span{
  font-size:11.4px !important;
}
#weatherPanel #weatherPlace{
  font-size:11.6px !important;
}
#weatherPanel #weatherDateTime{
  font-size:9.4px !important;
}
#weatherPanel .weather-metrics div{
  min-height:29px !important;
  padding:5px 7px !important;
}
#weatherPanel .weather-metrics span{
  font-size:8.6px !important;
}
#weatherPanel .weather-metrics strong{
  font-size:10.8px !important;
}

/* Groepmeters: compact houden, tekst duidelijker maken. */
.group-meter-card{
  width:148px !important;
  min-width:148px !important;
  max-width:148px !important;
  min-height:106px !important;
  height:106px !important;
}
.group-meter-copy strong{
  font-size:10.0px !important;
  line-height:1.08 !important;
}
.group-meter-copy span,
.group-meter-copy small{
  font-size:7.9px !important;
  line-height:1.08 !important;
}
.group-meter-copy small{
  font-weight:720 !important;
}
.group-meter-core strong{
  font-size:13.4px !important;
}

/* Pointer-meetpunt: exacte marker op de punt van de pijl, duidelijker kleurverloop. */
.gauge-value-dot{
  fill:#18f6ff !important;
  stroke:#f7ffff !important;
  stroke-width:1.1 !important;
  filter:
    drop-shadow(0 0 5px rgba(0,246,255,.95))
    drop-shadow(0 0 13px rgba(0,140,255,.38)) !important;
}
.gauge-value-dot.safe{
  fill:#15f8ff !important;
  stroke:#f4ffff !important;
}
.gauge-value-dot.warn{
  fill:#ffe24d !important;
  stroke:#fff8c6 !important;
  filter:
    drop-shadow(0 0 7px rgba(255,226,77,.92))
    drop-shadow(0 0 16px rgba(255,138,0,.42)) !important;
}
.gauge-value-dot.heavy{
  fill:#ff812d !important;
  stroke:#ffe0c4 !important;
  filter:
    drop-shadow(0 0 8px rgba(255,129,45,.95))
    drop-shadow(0 0 18px rgba(255,53,0,.48)) !important;
}
.gauge-value-dot.critical,
.gauge-value-dot.over{
  fill:#7a001c !important;
  stroke:#ffd1db !important;
  stroke-width:1.25 !important;
  filter:
    drop-shadow(0 0 9px rgba(255,0,58,1))
    drop-shadow(0 0 24px rgba(122,0,28,.72)) !important;
}

/* Meterkast-groepen editor */
.meter-groups-editor-wrap{
  margin-top:10px;
}
.settings-subhead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:8px 0 7px;
}
.settings-subhead strong{
  color:#eefaff;
  font-size:13px;
  font-weight:650;
}
.settings-subhead span{
  color:#9abdd1;
  font-size:10.5px;
}
.meter-groups-editor{
  display:grid;
  gap:8px;
}
.meter-group-row{
  border:1px solid rgba(24,234,255,.16);
  border-radius:14px;
  padding:9px;
  background:linear-gradient(145deg,rgba(2,14,30,.34),rgba(4,10,24,.20));
}
.meter-group-row-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
}
.meter-group-row-head strong{
  color:#f0fbff;
  font-size:12.5px;
}
.meter-group-row-head span{
  color:#19eaff;
  font-size:10.5px;
}
.meter-group-fields{
  display:grid;
  grid-template-columns:2fr .8fr .8fr .8fr .8fr;
  gap:7px;
}
.meter-group-fields label{
  margin:0 !important;
  font-size:10px !important;
}
.meter-group-fields .input{
  margin-top:3px;
  min-height:34px;
}
@media (max-width:980px){
  .meter-group-fields{
    grid-template-columns:1fr 1fr;
  }
  .meter-group-fields label:first-child{
    grid-column:1 / -1;
  }
}
@media (max-width:1500px){
  #weatherPanel.weather-scene-panel,
  #weatherPanel.weather-strip.compact-weather-card,
  #weatherPanel.weather-strip{
    width:min(228px,100%) !important;
    max-width:228px !important;
  }
  #weatherPanel .weather-main{
    grid-template-columns:74px minmax(0,1fr) !important;
  }
  #weatherPanel .weather-icon,
  #weatherPanel #weatherIcon{
    width:72px !important;
    min-width:72px !important;
    max-width:72px !important;
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
  }
  .wx-scene{
    width:78px !important;
    height:62px !important;
  }
}



/* =========================================================
   v0.5.9ab Visual Polish
   - Realtime usage boven meter
   - stekkerkaarten gelijk
   - groepmeters tekst/uitlijning beter
   - pointer-dot los en donkerrood
   - grafieklijnen echte hairline
   ========================================================= */

/* Linkerkolom-volgorde: titel boven, meter, label, weer, status. */
.gauge-area h2{
  order:0 !important;
  margin:0 0 8px !important;
  padding:0 !important;
  text-align:center !important;
  align-self:center !important;
  justify-self:center !important;
  font-size:15.8px !important;
}
.gauge-area .smooth-gauge,
.gauge-area .exact-gauge,
#mainGauge{
  order:1 !important;
  margin:0 auto 11px !important;
}
.gauge-area .gauge-profile-label,
#mainGaugeProfileLabel{
  order:2 !important;
  margin:2px auto 13px !important;
}
#weatherPanel.weather-scene-panel,
#weatherPanel.weather-strip.compact-weather-card,
#weatherPanel.weather-strip{
  order:3 !important;
}
.gauge-area .gauge-status{
  order:4 !important;
}

/* Hoofdmeterlabel net iets rustiger en lager leesbaar. */
.gauge-profile-label span{
  font-size:11.0px !important;
}
.gauge-profile-label small{
  font-size:9.0px !important;
}

/* Device cards: allemaal gelijke containers en vaste interne ankers. */
.device-grid{
  align-items:stretch !important;
  grid-auto-rows:116px !important;
}
.device-card,
.zone-meter-card{
  height:116px !important;
  min-height:116px !important;
  max-height:116px !important;
  display:grid !important;
  grid-template-columns:76px minmax(0,1fr) 190px 72px !important;
  grid-template-rows:1fr !important;
  align-items:center !important;
  overflow:hidden !important;
}
.device-card .mini-device-gauge,
.zone-meter-card .mini-device-gauge{
  align-self:center !important;
  justify-self:center !important;
}
.device-main{
  align-self:center !important;
  min-width:0 !important;
}
.device-name{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;
}
.device-watt{
  line-height:1.02 !important;
}
.device-meta,
.muted-line{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;
}
.device-stats{
  align-self:end !important;
  min-width:0 !important;
}
.device-stats div{
  min-width:0 !important;
}
.device-stats strong{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;
}
.device-livebox{
  align-self:center !important;
  justify-self:end !important;
  min-width:58px !important;
}
.single-power-row{
  height:38px !important;
  margin-top:4px !important;
}
.mini-power-toggle{
  width:38px !important;
  height:38px !important;
}

/* Bij smallere schermen iets minder breed maar nog steeds gelijke hoogte. */
@media (max-width:1500px){
  .device-grid{
    grid-auto-rows:108px !important;
  }
  .device-card,
  .zone-meter-card{
    height:108px !important;
    min-height:108px !important;
    max-height:108px !important;
    grid-template-columns:68px minmax(0,1fr) 162px 62px !important;
  }
}

/* Groepmeters: tekstblok lager, groter en netjes gecentreerd. */
.group-meter-card{
  grid-template-rows:58px 1fr !important;
  align-items:start !important;
  justify-items:center !important;
  padding-top:8px !important;
}
.group-meter-orb{
  align-self:start !important;
  margin-bottom:3px !important;
}
.group-meter-copy{
  align-self:start !important;
  margin-top:4px !important;
  display:grid !important;
  gap:2px !important;
}
.group-meter-copy strong{
  font-size:10.6px !important;
  line-height:1.1 !important;
  min-height:12px !important;
}
.group-meter-copy span{
  font-size:8.25px !important;
  line-height:1.1 !important;
}
.group-meter-copy small{
  font-size:8.5px !important;
  line-height:1.1 !important;
  font-weight:760 !important;
}

/* Pointer-dot: los voor de pijl en altijd wijnrood/donkerrood als duidelijke meetmarker. */
.gauge-value-dot,
.gauge-value-dot.safe,
.gauge-value-dot.warn,
.gauge-value-dot.heavy,
.gauge-value-dot.critical,
.gauge-value-dot.over{
  fill:#6f0019 !important;
  stroke:#ffd4dd !important;
  stroke-width:1.15 !important;
  filter:
    drop-shadow(0 0 5px rgba(255,0,58,.88))
    drop-shadow(0 0 13px rgba(111,0,25,.72)) !important;
}
.gauge-value-dot.warn{
  fill:#8a2400 !important;
  stroke:#ffd9bf !important;
}
.gauge-value-dot.heavy{
  fill:#9a1600 !important;
  stroke:#ffd0c2 !important;
}
.gauge-value-dot.critical,
.gauge-value-dot.over{
  fill:#4d0012 !important;
  stroke:#ffe3ea !important;
  filter:
    drop-shadow(0 0 8px rgba(255,0,58,1))
    drop-shadow(0 0 22px rgba(77,0,18,.86)) !important;
}

/* Grafieken: alle lijnen werkelijk dun, glow niet als dikke neonbalk. */
.wave-line-aura{
  stroke-width:.50px !important;
  opacity:.040 !important;
  filter:none !important;
}
.wave-line-glow{
  stroke-width:.54px !important;
  opacity:.075 !important;
}
.wave-line-shine{
  stroke-width:.44px !important;
  opacity:.42 !important;
}
.wave-line-core{
  stroke-width:.52px !important;
  opacity:1 !important;
  filter:none !important;
}
.wave-point{
  r:1.7px !important;
}
.wave-point-warm{
  r:1.85px !important;
}
.wave-point-hot{
  r:2.0px !important;
}
.wave-area{
  opacity:.30 !important;
}
.wave-area-mist{
  opacity:.70 !important;
  transform:translateY(9px) scaleY(1.18) !important;
  filter:none !important;
}
.chart-card:nth-child(3) .wave-line-aura,
.chart-card:nth-child(3) .wave-line-glow,
.chart-card:nth-child(3) .wave-line-shine,
.chart-card:nth-child(3) .wave-line-core{
  stroke-width:.52px !important;
}
.chart-card:nth-child(3) .wave-line-glow{
  opacity:.070 !important;
}
.chart-card:nth-child(3) .wave-line-shine{
  opacity:.40 !important;
}

/* Dalende laatste segmenten niet dik laten lijken door clipping/glow. */
.wave-svg{
  overflow:hidden !important;
}
.line-chart,
.bar-chart{
  overflow:hidden !important;
}


/* =========================================================
   v0.5.9ac Left Meter Spacing + Groupmeter Text Containment
   Alleen spacing/uitlijning. Geen backend/Tuya/grafiekdata.
   ========================================================= */

/* Titel los van de ring: Realtime usage hoger, meter iets meer ademruimte. */
.gauge-area h2{
  margin:0 0 14px !important;
  padding:0 !important;
  line-height:1.05 !important;
  transform:translateY(-3px) !important;
}

.gauge-area .smooth-gauge,
.gauge-area .exact-gauge,
#mainGauge{
  margin:0 auto 18px !important;
}

/* Label onder meter lager, niet meer tegen de ring aangedrukt. */
.gauge-area .gauge-profile-label,
#mainGaugeProfileLabel{
  margin:4px auto 15px !important;
  transform:translateY(3px) !important;
}

/* Weather blijft onder het label, maar zakt niet onnodig ver mee. */
#weatherPanel.weather-scene-panel,
#weatherPanel.weather-strip.compact-weather-card,
#weatherPanel.weather-strip{
  margin-top:0 !important;
}

/* Groepmeterkaarten: tekst altijd binnen de kaart houden. */
.group-meter-card{
  height:118px !important;
  min-height:118px !important;
  max-height:118px !important;
  padding:8px 8px 9px !important;
  grid-template-rows:54px minmax(42px,1fr) !important;
  align-items:start !important;
  overflow:hidden !important;
}

.group-meter-orb{
  align-self:start !important;
  margin-bottom:0 !important;
}

.group-meter-copy{
  width:100% !important;
  min-width:0 !important;
  align-self:start !important;
  margin-top:2px !important;
  display:grid !important;
  grid-template-rows:auto auto auto !important;
  gap:1px !important;
  justify-items:center !important;
  overflow:hidden !important;
}

.group-meter-copy strong,
.group-meter-copy span,
.group-meter-copy small{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.group-meter-copy strong{
  font-size:9.6px !important;
  line-height:1.08 !important;
  min-height:11px !important;
}

.group-meter-copy span{
  font-size:7.65px !important;
  line-height:1.08 !important;
}

.group-meter-copy small{
  font-size:7.9px !important;
  line-height:1.08 !important;
  font-weight:760 !important;
}

/* De card mag iets hoger zijn, maar de rij blijft compact. */
.group-meter-grid{
  align-items:flex-start !important;
}

/* Bij kleinere schermbreedte nog steeds binnen de kaart blijven. */
@media (max-width:1500px){
  .gauge-area h2{
    margin-bottom:12px !important;
    transform:translateY(-2px) !important;
  }

  .gauge-area .smooth-gauge,
  .gauge-area .exact-gauge,
  #mainGauge{
    margin-bottom:16px !important;
  }

  .gauge-area .gauge-profile-label,
  #mainGaugeProfileLabel{
    margin-bottom:13px !important;
  }

  .group-meter-card{
    height:112px !important;
    min-height:112px !important;
    max-height:112px !important;
    grid-template-rows:50px minmax(40px,1fr) !important;
  }

  .group-meter-copy strong{
    font-size:9.2px !important;
  }

  .group-meter-copy span{
    font-size:7.35px !important;
  }

  .group-meter-copy small{
    font-size:7.55px !important;
  }
}



/* =========================================================
   v0.5.9ad Weather Icon Asset Support
   ========================================================= */

/* Realtime usage nog iets hoger, zonder de meter te verplaatsen. */
.gauge-area h2{
  transform:translateY(-9px) !important;
  margin-bottom:17px !important;
}

/* Weather-widget gebruikt nu losse transparante PNG assets. */
#weatherPanel .weather-icon.weather-asset,
#weatherIcon.weather-asset{
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.weather-asset-icon{
  display:block !important;
  width:92px !important;
  height:72px !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  background:transparent !important;
  border:0 !important;
  filter:
    drop-shadow(0 5px 7px rgba(0,0,0,.28))
    drop-shadow(0 0 10px rgba(24,234,255,.10)) !important;
  pointer-events:none !important;
}

/* Zon en storm mogen net iets meer drama krijgen. */
.weather-asset-sunny,
.weather-asset-mostly-sunny,
.weather-asset-partly-cloudy{
  filter:
    drop-shadow(0 4px 6px rgba(0,0,0,.22))
    drop-shadow(0 0 13px rgba(255,199,39,.30)) !important;
}
.weather-asset-storm{
  filter:
    drop-shadow(0 5px 7px rgba(0,0,0,.32))
    drop-shadow(0 0 14px rgba(70,200,255,.22)) !important;
}

#weatherPanel .weather-main{
  grid-template-columns:86px minmax(0,1fr) !important;
}
#weatherPanel .weather-icon,
#weatherPanel #weatherIcon{
  width:84px !important;
  min-width:84px !important;
  max-width:84px !important;
  height:66px !important;
  min-height:66px !important;
  max-height:66px !important;
}

/* Icon preview in instellingen. */
.weather-icon-preview-panel{
  margin-top:12px;
  padding:10px;
  border:1px solid rgba(24,234,255,.16);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(2,14,30,.28),rgba(4,10,24,.16));
}
.weather-icon-preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  gap:8px;
}
.weather-icon-preview-grid div{
  min-height:86px;
  display:grid;
  grid-template-rows:58px auto;
  align-items:center;
  justify-items:center;
  padding:6px;
  border:1px solid rgba(24,234,255,.12);
  border-radius:12px;
  background:rgba(1,8,18,.26);
  overflow:hidden;
}
.weather-icon-preview-grid img{
  max-width:78px;
  max-height:56px;
  object-fit:contain;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));
}
.weather-icon-preview-grid span{
  font-size:9.4px;
  color:#a7c8dc;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

@media (max-width:1500px){
  .weather-asset-icon{
    width:86px !important;
    height:68px !important;
  }
  #weatherPanel .weather-main{
    grid-template-columns:80px minmax(0,1fr) !important;
  }
  #weatherPanel .weather-icon,
  #weatherPanel #weatherIcon{
    width:78px !important;
    min-width:78px !important;
    max-width:78px !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
  }
}



/* =========================================================
   v0.5.9ae Weather Icon Balance Pass
   Doel: elke weather asset eigen maat zodat niets tekst raakt
   of te dominant/te klein oogt. Geen data/backend wijzigingen.
   ========================================================= */

#weatherPanel .weather-main{
  grid-template-columns:82px minmax(0,1fr) !important;
  column-gap:8px !important;
  align-items:center !important;
}

#weatherPanel .weather-icon,
#weatherPanel #weatherIcon{
  width:80px !important;
  min-width:80px !important;
  max-width:80px !important;
  height:66px !important;
  min-height:66px !important;
  max-height:66px !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
}

/* Algemene asset-regel: nooit buiten het icoonvak drukken. */
.weather-asset-icon{
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
  max-width:92px !important;
  max-height:74px !important;
  background:transparent !important;
  border:0 !important;
  pointer-events:none !important;
}

/* Dag-icoontjes: iets voller, maar niet tegen tekst. */
.weather-asset-sunny{
  width:72px !important;
  height:62px !important;
  transform:translateY(1px) !important;
}

.weather-asset-mostly-sunny,
.weather-asset-partly-cloudy{
  width:88px !important;
  height:64px !important;
  transform:translate(-2px,1px) !important;
}

.weather-asset-cloudy{
  width:84px !important;
  height:60px !important;
  transform:translate(-1px,2px) !important;
}

/* Regen/sneeuw/hagel: iets kleiner omdat de neerslag onder het icoon uitloopt. */
.weather-asset-rain,
.weather-asset-showers{
  width:78px !important;
  height:62px !important;
  transform:translateY(2px) !important;
}

.weather-asset-heavy-rain{
  width:75px !important;
  height:60px !important;
  transform:translateY(2px) !important;
}

.weather-asset-storm{
  width:78px !important;
  height:62px !important;
  transform:translateY(2px) !important;
}

.weather-asset-snow,
.weather-asset-sleet{
  width:74px !important;
  height:60px !important;
  transform:translateY(3px) !important;
}

/* Mist/wind/tornado zijn breed/laag of hoog, dus apart temperen. */
.weather-asset-fog{
  width:84px !important;
  height:46px !important;
  transform:translateY(6px) !important;
}

.weather-asset-wind{
  width:78px !important;
  height:50px !important;
  transform:translateY(6px) !important;
}

.weather-asset-tornado{
  width:62px !important;
  height:62px !important;
  transform:translateY(2px) !important;
}

/* Nacht-icoontjes: kleiner/rustiger, zodat de maan niet als planeet door de widget rolt. */
.weather-asset-night-clear,
.weather-asset-night-cloudy,
.weather-asset-moon{
  width:58px !important;
  height:52px !important;
  transform:translateY(3px) !important;
  filter:
    drop-shadow(0 4px 6px rgba(0,0,0,.30))
    drop-shadow(0 0 9px rgba(210,238,255,.14)) !important;
}

/* De temperatuurtekst krijgt minimale ademruimte bij brede icons. */
#weatherPanel .weather-temp-block{
  padding-left:2px !important;
  min-width:0 !important;
}

/* Preview-paneel gebruikt dezelfde balans, maar iets kleiner in tegels. */
.weather-icon-preview-grid div{
  grid-template-rows:62px auto !important;
  min-height:92px !important;
}

.weather-icon-preview-grid img{
  object-fit:contain !important;
  object-position:center center !important;
  max-width:82px !important;
  max-height:60px !important;
}

.weather-icon-preview-grid img[src*="night-clear"],
.weather-icon-preview-grid img[src*="night-cloudy"],
.weather-icon-preview-grid img[src*="moon"]{
  max-width:56px !important;
  max-height:50px !important;
}

.weather-icon-preview-grid img[src*="fog"]{
  max-width:82px !important;
  max-height:42px !important;
}

.weather-icon-preview-grid img[src*="storm"],
.weather-icon-preview-grid img[src*="rain"],
.weather-icon-preview-grid img[src*="snow"],
.weather-icon-preview-grid img[src*="sleet"]{
  max-width:74px !important;
  max-height:56px !important;
}

/* Compacte schermen: alles iets terugschalen, per type blijft de verhouding gelijk. */
@media (max-width:1500px){
  #weatherPanel .weather-main{
    grid-template-columns:78px minmax(0,1fr) !important;
  }

  #weatherPanel .weather-icon,
  #weatherPanel #weatherIcon{
    width:76px !important;
    min-width:76px !important;
    max-width:76px !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
  }

  .weather-asset-sunny{
    width:68px !important;
    height:58px !important;
  }

  .weather-asset-mostly-sunny,
  .weather-asset-partly-cloudy{
    width:82px !important;
    height:60px !important;
  }

  .weather-asset-cloudy{
    width:78px !important;
    height:56px !important;
  }

  .weather-asset-rain,
  .weather-asset-showers,
  .weather-asset-storm{
    width:72px !important;
    height:58px !important;
  }

  .weather-asset-heavy-rain,
  .weather-asset-snow,
  .weather-asset-sleet{
    width:70px !important;
    height:56px !important;
  }

  .weather-asset-fog{
    width:78px !important;
    height:42px !important;
  }

  .weather-asset-night-clear,
  .weather-asset-night-cloudy,
  .weather-asset-moon{
    width:54px !important;
    height:48px !important;
  }
}



/* =========================================================
   v0.5.9af Weather Widget Icon Room Fix
   Doel: meer ruimte voor realistische weather-assets zonder
   de linker widget weer mega te maken.
   ========================================================= */

/* Card iets ruimer naar beneden, maar breedte compact houden. */
#weatherPanel.weather-scene-panel,
#weatherPanel.weather-strip.compact-weather-card,
#weatherPanel.weather-strip{
  width:min(238px,100%) !important;
  max-width:238px !important;
  min-height:170px !important;
  padding:9px 10px 11px !important;
  gap:5px 8px !important;
}

/* Icon-vak groter, temp-blok iets naar rechts. */
#weatherPanel .weather-main{
  grid-template-columns:98px minmax(0,1fr) !important;
  column-gap:10px !important;
  align-items:center !important;
  justify-items:start !important;
  min-height:78px !important;
  margin-top:2px !important;
}

#weatherPanel .weather-icon,
#weatherPanel #weatherIcon{
  width:96px !important;
  min-width:96px !important;
  max-width:96px !important;
  height:78px !important;
  min-height:78px !important;
  max-height:78px !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
  transform:translateX(-2px) !important;
}

/* Temperatuur rechts wat lucht geven. */
#weatherPanel .weather-temp-block{
  padding-left:4px !important;
  transform:translateX(2px) !important;
}

#weatherPanel #weatherTemp,
#weatherPanel .weather-temp-block strong{
  font-size:25px !important;
  line-height:.95 !important;
}

#weatherPanel #weatherSummary,
#weatherPanel .weather-temp-block span{
  font-size:11.2px !important;
  line-height:1.1 !important;
}

/* Algemene assetruimte: groter canvas, object blijft contain. */
.weather-asset-icon{
  max-width:106px !important;
  max-height:84px !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* Dagiconen mogen vol blijven. */
.weather-asset-sunny{
  width:82px !important;
  height:72px !important;
  transform:translate(-2px,1px) !important;
}

.weather-asset-mostly-sunny,
.weather-asset-partly-cloudy{
  width:102px !important;
  height:76px !important;
  transform:translate(-4px,1px) !important;
}

.weather-asset-cloudy{
  width:96px !important;
  height:70px !important;
  transform:translate(-4px,2px) !important;
}

/* Neerslag/storm heeft nu meer verticale ruimte. */
.weather-asset-rain,
.weather-asset-showers{
  width:90px !important;
  height:76px !important;
  transform:translate(-3px,2px) !important;
}

.weather-asset-heavy-rain,
.weather-asset-storm{
  width:88px !important;
  height:76px !important;
  transform:translate(-3px,2px) !important;
}

.weather-asset-snow,
.weather-asset-sleet{
  width:86px !important;
  height:74px !important;
  transform:translate(-3px,3px) !important;
}

/* Mist/wind breed maar laag houden. */
.weather-asset-fog{
  width:96px !important;
  height:54px !important;
  transform:translate(-4px,8px) !important;
}

.weather-asset-wind{
  width:92px !important;
  height:58px !important;
  transform:translate(-4px,7px) !important;
}

.weather-asset-tornado{
  width:72px !important;
  height:76px !important;
  transform:translate(2px,2px) !important;
}

/* Nacht/maan: iets groter dan ae, maar niet meer XXL. */
.weather-asset-night-clear,
.weather-asset-night-cloudy,
.weather-asset-moon{
  width:72px !important;
  height:62px !important;
  transform:translate(4px,3px) !important;
}

/* Metrics iets lager, zodat de iconen er niet tegenaan plakken. */
#weatherPanel .weather-place-row{
  margin-top:1px !important;
}

#weatherPanel .weather-metrics{
  margin-top:3px !important;
}

/* Preview-panel volgt de nieuwe ruimte, maar blijft netjes in tegels. */
.weather-icon-preview-grid div{
  grid-template-rows:68px auto !important;
  min-height:98px !important;
}

.weather-icon-preview-grid img{
  max-width:90px !important;
  max-height:66px !important;
}

.weather-icon-preview-grid img[src*="night-clear"],
.weather-icon-preview-grid img[src*="night-cloudy"],
.weather-icon-preview-grid img[src*="moon"]{
  max-width:68px !important;
  max-height:58px !important;
}

.weather-icon-preview-grid img[src*="fog"],
.weather-icon-preview-grid img[src*="wind"]{
  max-width:88px !important;
  max-height:52px !important;
}

/* Compacte schermen: iets kleiner, maar nog steeds meer iconruimte dan ae. */
@media (max-width:1500px){
  #weatherPanel.weather-scene-panel,
  #weatherPanel.weather-strip.compact-weather-card,
  #weatherPanel.weather-strip{
    width:min(232px,100%) !important;
    max-width:232px !important;
    min-height:166px !important;
  }

  #weatherPanel .weather-main{
    grid-template-columns:92px minmax(0,1fr) !important;
    column-gap:9px !important;
    min-height:74px !important;
  }

  #weatherPanel .weather-icon,
  #weatherPanel #weatherIcon{
    width:90px !important;
    min-width:90px !important;
    max-width:90px !important;
    height:74px !important;
    min-height:74px !important;
    max-height:74px !important;
  }

  .weather-asset-sunny{
    width:78px !important;
    height:68px !important;
  }

  .weather-asset-mostly-sunny,
  .weather-asset-partly-cloudy{
    width:96px !important;
    height:72px !important;
  }

  .weather-asset-cloudy{
    width:90px !important;
    height:66px !important;
  }

  .weather-asset-rain,
  .weather-asset-showers,
  .weather-asset-heavy-rain,
  .weather-asset-storm{
    width:84px !important;
    height:72px !important;
  }

  .weather-asset-snow,
  .weather-asset-sleet{
    width:82px !important;
    height:70px !important;
  }

  .weather-asset-night-clear,
  .weather-asset-night-cloudy,
  .weather-asset-moon{
    width:68px !important;
    height:58px !important;
  }
}



/* =========================================================
   v0.5.9ag Weather Icon Container Final Fit
   Doel: realistische weather-assets meer lucht geven.
   Vooral maan/nacht mag niet in een klein raampje geplet lijken.
   Alleen CSS/UI, geen data/backend wijzigingen.
   ========================================================= */

/* Weather-card iets hoger en intern ruimer, breedte blijft compact. */
#weatherPanel.weather-scene-panel,
#weatherPanel.weather-strip.compact-weather-card,
#weatherPanel.weather-strip{
  min-height:184px !important;
  padding:10px 10px 12px !important;
  gap:5px 8px !important;
}

/* Bovenblok krijgt meer hoogte en een breder iconvak. */
#weatherPanel .weather-main{
  grid-template-columns:110px minmax(0,1fr) !important;
  column-gap:12px !important;
  min-height:92px !important;
  margin-top:3px !important;
  align-items:center !important;
}

/* Groot genoeg canvas zodat assets niet clipped/geplet lijken. */
#weatherPanel .weather-icon,
#weatherPanel #weatherIcon{
  width:108px !important;
  min-width:108px !important;
  max-width:108px !important;
  height:90px !important;
  min-height:90px !important;
  max-height:90px !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
  transform:translateX(-4px) !important;
}

/* Temperatuurblok iets verder naar rechts en verticaal gecentreerd. */
#weatherPanel .weather-temp-block{
  padding-left:6px !important;
  transform:translate(4px, 0) !important;
  align-self:center !important;
}

#weatherPanel #weatherTemp,
#weatherPanel .weather-temp-block strong{
  font-size:25px !important;
}

#weatherPanel #weatherSummary,
#weatherPanel .weather-temp-block span{
  font-size:11.2px !important;
}

/* Meer objectruimte voor alle assets. */
.weather-asset-icon{
  max-width:116px !important;
  max-height:92px !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* Dagiconen: ruim maar binnen het canvas. */
.weather-asset-sunny{
  width:88px !important;
  height:76px !important;
  transform:translate(-4px,1px) !important;
}

.weather-asset-mostly-sunny,
.weather-asset-partly-cloudy{
  width:112px !important;
  height:82px !important;
  transform:translate(-7px,1px) !important;
}

.weather-asset-cloudy{
  width:104px !important;
  height:76px !important;
  transform:translate(-6px,2px) !important;
}

/* Neerslag/storm: meer ruimte voor druppels/bliksem/sneeuw onder de wolk. */
.weather-asset-rain,
.weather-asset-showers{
  width:98px !important;
  height:86px !important;
  transform:translate(-5px,2px) !important;
}

.weather-asset-heavy-rain,
.weather-asset-storm{
  width:96px !important;
  height:86px !important;
  transform:translate(-5px,2px) !important;
}

.weather-asset-snow,
.weather-asset-sleet{
  width:94px !important;
  height:84px !important;
  transform:translate(-5px,3px) !important;
}

/* Mist/wind/tornado eigen fit. */
.weather-asset-fog{
  width:104px !important;
  height:60px !important;
  transform:translate(-6px,11px) !important;
}

.weather-asset-wind{
  width:98px !important;
  height:62px !important;
  transform:translate(-6px,10px) !important;
}

.weather-asset-tornado{
  width:78px !important;
  height:84px !important;
  transform:translate(4px,3px) !important;
}

/* Nacht/maan: meer zichtbaar, maar rustig. */
.weather-asset-night-clear,
.weather-asset-night-cloudy,
.weather-asset-moon{
  width:82px !important;
  height:72px !important;
  transform:translate(5px,4px) !important;
  filter:
    drop-shadow(0 4px 6px rgba(0,0,0,.34))
    drop-shadow(0 0 10px rgba(210,238,255,.18)) !important;
}

/* Tekst/metrics iets lager zodat het iconvak niet tegen de labels duwt. */
#weatherPanel .weather-place-row{
  margin-top:2px !important;
}

#weatherPanel .weather-metrics{
  margin-top:4px !important;
}

/* Preview in instellingen volgt dezelfde ruimere verhouding. */
.weather-icon-preview-grid div{
  grid-template-rows:74px auto !important;
  min-height:104px !important;
}

.weather-icon-preview-grid img{
  max-width:98px !important;
  max-height:72px !important;
}

.weather-icon-preview-grid img[src*="night-clear"],
.weather-icon-preview-grid img[src*="night-cloudy"],
.weather-icon-preview-grid img[src*="moon"]{
  max-width:78px !important;
  max-height:68px !important;
}

.weather-icon-preview-grid img[src*="fog"],
.weather-icon-preview-grid img[src*="wind"]{
  max-width:96px !important;
  max-height:58px !important;
}

/* Compact scherm: terugschalen, maar iconvak blijft groter dan af/ae. */
@media (max-width:1500px){
  #weatherPanel.weather-scene-panel,
  #weatherPanel.weather-strip.compact-weather-card,
  #weatherPanel.weather-strip{
    min-height:178px !important;
  }

  #weatherPanel .weather-main{
    grid-template-columns:104px minmax(0,1fr) !important;
    column-gap:10px !important;
    min-height:88px !important;
  }

  #weatherPanel .weather-icon,
  #weatherPanel #weatherIcon{
    width:102px !important;
    min-width:102px !important;
    max-width:102px !important;
    height:86px !important;
    min-height:86px !important;
    max-height:86px !important;
  }

  .weather-asset-sunny{
    width:84px !important;
    height:72px !important;
  }

  .weather-asset-mostly-sunny,
  .weather-asset-partly-cloudy{
    width:106px !important;
    height:78px !important;
  }

  .weather-asset-cloudy{
    width:98px !important;
    height:72px !important;
  }

  .weather-asset-rain,
  .weather-asset-showers,
  .weather-asset-heavy-rain,
  .weather-asset-storm{
    width:92px !important;
    height:82px !important;
  }

  .weather-asset-snow,
  .weather-asset-sleet{
    width:90px !important;
    height:80px !important;
  }

  .weather-asset-night-clear,
  .weather-asset-night-cloudy,
  .weather-asset-moon{
    width:78px !important;
    height:68px !important;
  }
}



/* =========================================================
   v0.5.9ah Weather Icon Auto-Fit Layout Fix
   Doel: niet meer per icoon pixel-pingpongen.
   Vast ruimer iconvak + img auto-fit + tempblok verder rechts.
   ========================================================= */

/* Weather-card blijft compact, maar krijgt genoeg hoogte voor realistische assets. */
#weatherPanel.weather-scene-panel,
#weatherPanel.weather-strip.compact-weather-card,
#weatherPanel.weather-strip{
  min-height:188px !important;
  padding:10px 10px 12px !important;
  gap:4px 8px !important;
}

/* Bovenste weerblok: icon-container iets omhoog, groter, temp naar rechts. */
#weatherPanel .weather-main{
  grid-template-columns:122px minmax(0,1fr) !important;
  column-gap:13px !important;
  min-height:96px !important;
  margin-top:-2px !important;
  transform:translateY(-3px) !important;
  align-items:center !important;
  justify-items:start !important;
}

/* Het vaste vitrinevak voor ALLE weather-assets. */
#weatherPanel .weather-icon,
#weatherPanel #weatherIcon{
  width:120px !important;
  min-width:120px !important;
  max-width:120px !important;
  height:96px !important;
  min-height:96px !important;
  max-height:96px !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
  transform:translate(-7px,-2px) !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}

/* Auto-fit: ieder PNG-icoon vult het vaste vak zonder vervorming. */
#weatherPanel .weather-asset-icon,
#weatherIcon .weather-asset-icon,
.weather-asset-icon{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  display:block !important;
  background:transparent !important;
  border:0 !important;
}

/* Alleen voor mist/wind: contain blijft gelden, maar ze mogen iets lager in hun vak landen. */
#weatherPanel .weather-asset-fog,
#weatherPanel .weather-asset-wind{
  object-position:center 62% !important;
}

/* Temp-blok duidelijk naar rechts. */
#weatherPanel .weather-temp-block{
  padding-left:8px !important;
  transform:translateX(10px) !important;
  align-self:center !important;
  min-width:0 !important;
}

#weatherPanel #weatherTemp,
#weatherPanel .weather-temp-block strong{
  font-size:25px !important;
  line-height:.95 !important;
}

#weatherPanel #weatherSummary,
#weatherPanel .weather-temp-block span{
  font-size:11.2px !important;
  line-height:1.1 !important;
  max-width:100% !important;
}

/* Plaats/metrics iets terug omlaag om ruimte te laten voor het grotere icoonvak. */
#weatherPanel .weather-place-row{
  margin-top:-1px !important;
}

#weatherPanel .weather-metrics{
  margin-top:3px !important;
}

/* Preview gebruikt ook gewoon auto-fit in vaste tegels. */
.weather-icon-preview-grid div{
  grid-template-rows:78px auto !important;
  min-height:108px !important;
}

.weather-icon-preview-grid img{
  width:100% !important;
  height:74px !important;
  max-width:96px !important;
  max-height:74px !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
}

/* Overschrijf oude preview uitzonderingen: auto-fit is nu leidend. */
.weather-icon-preview-grid img[src*="night-clear"],
.weather-icon-preview-grid img[src*="night-cloudy"],
.weather-icon-preview-grid img[src*="moon"],
.weather-icon-preview-grid img[src*="fog"],
.weather-icon-preview-grid img[src*="wind"],
.weather-icon-preview-grid img[src*="storm"],
.weather-icon-preview-grid img[src*="rain"],
.weather-icon-preview-grid img[src*="snow"],
.weather-icon-preview-grid img[src*="sleet"]{
  width:100% !important;
  height:74px !important;
  max-width:96px !important;
  max-height:74px !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* Compacte schermen: zelfde auto-fit, iets kleinere vitrine. */
@media (max-width:1500px){
  #weatherPanel.weather-scene-panel,
  #weatherPanel.weather-strip.compact-weather-card,
  #weatherPanel.weather-strip{
    min-height:184px !important;
  }

  #weatherPanel .weather-main{
    grid-template-columns:114px minmax(0,1fr) !important;
    column-gap:12px !important;
    min-height:92px !important;
    margin-top:-2px !important;
  }

  #weatherPanel .weather-icon,
  #weatherPanel #weatherIcon{
    width:112px !important;
    min-width:112px !important;
    max-width:112px !important;
    height:92px !important;
    min-height:92px !important;
    max-height:92px !important;
    transform:translate(-6px,-2px) !important;
  }

  #weatherPanel .weather-temp-block{
    transform:translateX(8px) !important;
    padding-left:7px !important;
  }
}



/* =========================================================
   v0.5.9ai Weather Icon Inner Scale Fix
   Container + temperatuurpositie uit v0.5.9ah blijven goed.
   Alleen de PNG-assets zelf worden kleiner in het vaste iconvak.
   ========================================================= */

/* Basis: icon vult niet meer 100% van het vitrinevak. */
#weatherPanel .weather-asset-icon,
#weatherIcon .weather-asset-icon,
.weather-asset-icon{
  width:86% !important;
  height:86% !important;
  max-width:86% !important;
  max-height:86% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
}

/* Nacht/maan iets rustiger dan dagiconen. */
#weatherPanel .weather-asset-night-clear,
#weatherPanel .weather-asset-night-cloudy,
#weatherPanel .weather-asset-moon,
.weather-asset-night-clear,
.weather-asset-night-cloudy,
.weather-asset-moon{
  width:78% !important;
  height:78% !important;
  max-width:78% !important;
  max-height:78% !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* Deels bewolkt mag iets voller blijven, maar niet tegen de temperatuur aan drukken. */
#weatherPanel .weather-asset-partly-cloudy,
#weatherPanel .weather-asset-mostly-sunny,
.weather-asset-partly-cloudy,
.weather-asset-mostly-sunny{
  width:88% !important;
  height:88% !important;
  max-width:88% !important;
  max-height:88% !important;
}

/* Regen/sneeuw/onweer iets kleiner zodat neerslagruimte netjes binnen het vak blijft. */
#weatherPanel .weather-asset-rain,
#weatherPanel .weather-asset-showers,
#weatherPanel .weather-asset-heavy-rain,
#weatherPanel .weather-asset-storm,
#weatherPanel .weather-asset-snow,
#weatherPanel .weather-asset-sleet,
.weather-asset-rain,
.weather-asset-showers,
.weather-asset-heavy-rain,
.weather-asset-storm,
.weather-asset-snow,
.weather-asset-sleet{
  width:82% !important;
  height:82% !important;
  max-width:82% !important;
  max-height:82% !important;
}

/* Mist/wind blijven laag/breed maar ook niet 100% vullen. */
#weatherPanel .weather-asset-fog,
#weatherPanel .weather-asset-wind,
.weather-asset-fog,
.weather-asset-wind{
  width:84% !important;
  height:84% !important;
  max-width:84% !important;
  max-height:84% !important;
  object-position:center 58% !important;
}

/* Preview-paneel ook terugschalen zodat de tegels representatief zijn. */
.weather-icon-preview-grid img{
  width:86% !important;
  height:86% !important;
  max-width:86% !important;
  max-height:70px !important;
  object-fit:contain !important;
  object-position:center center !important;
}

.weather-icon-preview-grid img[src*="night-clear"],
.weather-icon-preview-grid img[src*="night-cloudy"],
.weather-icon-preview-grid img[src*="moon"]{
  width:78% !important;
  height:78% !important;
  max-width:78% !important;
  max-height:62px !important;
}

.weather-icon-preview-grid img[src*="rain"],
.weather-icon-preview-grid img[src*="storm"],
.weather-icon-preview-grid img[src*="snow"],
.weather-icon-preview-grid img[src*="sleet"]{
  width:82% !important;
  height:82% !important;
  max-width:82% !important;
  max-height:66px !important;
}



/* =========================================================
   v0.5.9ak Night Icon Recovery Fix
   Basis is v0.5.9ai. Herstelt de te grote/te kleine nacht-bewolkt
   chaos door night-cloud naar de schone cloudy asset te mappen.
   Container en temperatuurpositie blijven goed.
   ========================================================= */

/* Nacht-helder/maan iets rustiger dan gewone dagiconen. */
#weatherPanel .weather-asset-night-clear,
#weatherPanel .weather-asset-moon,
#weatherIcon .weather-asset-night-clear,
#weatherIcon .weather-asset-moon,
.weather-asset-night-clear,
.weather-asset-moon{
  width:70% !important;
  height:70% !important;
  max-width:70% !important;
  max-height:70% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
}

/* Als night-cloudy toch ergens direct wordt gebruikt, niet postzegel-klein en niet XXL. */
#weatherPanel .weather-asset-night-cloudy,
#weatherIcon .weather-asset-night-cloudy,
.weather-asset-night-cloudy{
  width:70% !important;
  height:70% !important;
  max-width:70% !important;
  max-height:70% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
}

/* De schone cloudy fallback voor nacht-bewolkt mag iets rustiger dan dagbewolkt. */
#weatherPanel .weather-asset-cloudy{
  width:80% !important;
  height:80% !important;
  max-width:80% !important;
  max-height:80% !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* Preview-paneel: nachticonen weer normaal zichtbaar, geen mini-splinters. */
.weather-icon-preview-grid img[src*="night-clear"],
.weather-icon-preview-grid img[src*="moon"],
.weather-icon-preview-grid img[src*="night-cloudy"]{
  width:70% !important;
  height:70% !important;
  max-width:70% !important;
  max-height:64px !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
}



/* =========================================================
   v0.5.9al UI Polish + readable group meters
   Alleen weergave/leesbaarheid. Geen Tuya, logging, grafiekdata,
   meterkastlogica of weather-icon bestanden gewijzigd.
   ========================================================= */

/* Tablet/iPad/iPhone: desktop-cockpit blijft één geheel, pinch-to-zoom blijft bruikbaar. */
html, body{
  min-width:1500px !important;
  overflow-x:auto !important;
}
.shell{
  width:1500px !important;
  max-width:none !important;
  margin:0 auto !important;
}

/* Groepmeters beter leesbaar zonder meterkastberekening te wijzigen. */
#groupMetersPanel.group-meters-panel{
  padding:11px 12px 12px !important;
  margin:0 0 10px !important;
}
#groupMetersPanel .group-meters-head h2,
.group-meters-head h2{
  font-size:15.5px !important;
  line-height:1.15 !important;
}
#groupMetersPanel .group-meters-head span,
.group-meters-head span{
  font-size:10.5px !important;
  line-height:1.15 !important;
}
#groupMetersGrid.group-meter-grid,
.group-meter-grid{
  gap:12px !important;
  align-items:flex-start !important;
}
#groupMetersGrid .group-meter-card,
.group-meter-card{
  width:166px !important;
  min-width:166px !important;
  max-width:166px !important;
  height:128px !important;
  min-height:128px !important;
  max-height:128px !important;
  padding:9px 10px 10px !important;
  grid-template-rows:62px minmax(45px,1fr) !important;
  gap:4px !important;
  overflow:hidden !important;
}
#groupMetersGrid .group-meter-orb,
.group-meter-orb{
  width:62px !important;
  height:62px !important;
  align-self:start !important;
  margin:0 !important;
}
#groupMetersGrid .group-meter-core,
.group-meter-core{
  width:44px !important;
  height:44px !important;
}
#groupMetersGrid .group-meter-core strong,
.group-meter-core strong{
  font-size:15.5px !important;
  line-height:.98 !important;
}
#groupMetersGrid .group-meter-core span,
.group-meter-core span{
  font-size:7.4px !important;
  line-height:1 !important;
}
#groupMetersGrid .group-meter-copy,
.group-meter-copy{
  margin-top:2px !important;
  gap:2px !important;
  min-width:0 !important;
}
#groupMetersGrid .group-meter-copy strong,
.group-meter-copy strong{
  font-size:11.1px !important;
  line-height:1.08 !important;
  min-height:12px !important;
}
#groupMetersGrid .group-meter-copy span,
.group-meter-copy span{
  font-size:8.6px !important;
  line-height:1.08 !important;
}
#groupMetersGrid .group-meter-copy small,
.group-meter-copy small{
  font-size:8.9px !important;
  line-height:1.08 !important;
  font-weight:780 !important;
}

/* Device cards: verborgen chevron/overschot volledig weg, zodat TEST STEKKER onderin geen stipjes/rommel toont. */
.device-card.zone-meter-card,
.device-card{
  overflow:hidden !important;
}
.device-chevron{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  content:none !important;
}
.device-control-row.single-power-row{
  overflow:visible !important;
  max-height:42px !important;
}
.device-livebox{
  overflow:visible !important;
}

/* Kleine detailtekst net wat leesbaarder, maar layout blijft compact. */
.device-stats span{font-size:8.15px !important;line-height:1.05 !important;}
.device-stats strong{font-size:9.55px !important;line-height:1.05 !important;}
.device-meta{font-size:10.35px !important;line-height:1.15 !important;}
.pill,.group-safety-pill{font-size:9.6px !important;}

/* Weather: kanspercentage duidelijk labelen en nacht/maan niet meer postzegel-klein tonen. */
#weatherPanel .weather-metrics div span{
  line-height:1.06 !important;
}
#weatherPanel .weather-asset-night-clear,
#weatherPanel .weather-asset-moon,
#weatherIcon .weather-asset-night-clear,
#weatherIcon .weather-asset-moon,
.weather-asset-night-clear,
.weather-asset-moon{
  width:86% !important;
  height:86% !important;
  max-width:86% !important;
  max-height:86% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
}
#weatherPanel .weather-asset-night-cloudy,
#weatherIcon .weather-asset-night-cloudy,
.weather-asset-night-cloudy{
  width:82% !important;
  height:82% !important;
  max-width:82% !important;
  max-height:82% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
}
.weather-icon-preview-grid img[src*="night-clear"],
.weather-icon-preview-grid img[src*="moon"]{
  width:86% !important;
  height:86% !important;
  max-width:86% !important;
  max-height:70px !important;
}

/* Grafieken: zelfde data, alleen vloeiendere lijnweergave en nettere punten. */
.wave-svg{
  shape-rendering:geometricPrecision !important;
}
.wave-line-core{
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.wave-line-glow,
.wave-line-aura,
.wave-line-shine{
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.wave-point{
  opacity:.82 !important;
}

@media (max-width:1500px){
  html, body{min-width:1500px !important;}
  .shell{width:1500px !important;}
  #groupMetersGrid .group-meter-card,
  .group-meter-card{
    width:152px !important;
    min-width:152px !important;
    max-width:152px !important;
    height:122px !important;
    min-height:122px !important;
    max-height:122px !important;
    grid-template-rows:58px minmax(43px,1fr) !important;
  }
  #groupMetersGrid .group-meter-orb,
  .group-meter-orb{width:58px !important;height:58px !important;}
  #groupMetersGrid .group-meter-core,
  .group-meter-core{width:41px !important;height:41px !important;}
  #groupMetersGrid .group-meter-copy strong,
  .group-meter-copy strong{font-size:10.4px !important;}
  #groupMetersGrid .group-meter-copy span,
  .group-meter-copy span{font-size:8.15px !important;}
  #groupMetersGrid .group-meter-copy small,
  .group-meter-copy small{font-size:8.45px !important;}
}


/* =========================================================
   v0.5.9am Layout Fit + Testkaart + Early Weather Hotfix
   Alleen frontend-layout/rendering. Geen weather-icon bestanden,
   Tuya-control, powerknoplogica, logging, grafiekdata of
   meterkastberekening gewijzigd.
   ========================================================= */

html, body{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}
*, *::before, *::after{box-sizing:border-box;}
.shell,
body.density-comfort .shell,
body.density-compact .shell,
body.density-ultra .shell{
  width:min(1480px, calc(100vw - 24px)) !important;
  max-width:1480px !important;
  min-width:0 !important;
  margin:0 auto !important;
  padding:14px 14px 24px !important;
}
.hud-topbar{min-width:0 !important;overflow:hidden !important;}
.hud-brand{min-width:0 !important;}
.compact-top-controls,
.hud-controls.compact-top-controls{
  min-width:0 !important;
  display:flex !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex:0 0 auto !important;
}
.compact-top-controls .btn{white-space:nowrap !important;}
.cockpit,
body.density-comfort .cockpit,
body.density-compact .cockpit,
body.density-ultra .cockpit{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  grid-template-columns:minmax(255px,300px) minmax(0,1fr) !important;
  gap:10px !important;
  padding:16px !important;
  overflow:hidden !important;
}
.gauge-area,.right-panel,.device-section,.group-meters-panel,.period-panel,
.kpi-line,.device-toolbar,.device-grid,.charts-grid{
  min-width:0 !important;
  max-width:100% !important;
}
.right-panel{overflow:hidden !important;}
.kpi-line{grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:8px !important;}
.metric-card{min-width:0 !important;overflow:hidden !important;}
.metric-value{white-space:nowrap !important;}
@media (min-width:1180px){
  body.density-comfort .device-grid,
  body.density-compact .device-grid,
  body.density-ultra .device-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;}
}
@media (max-width:1179px){
  body.density-comfort .device-grid,
  body.density-compact .device-grid,
  body.density-ultra .device-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;}
  .kpi-line{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  .cockpit,
  body.density-comfort .cockpit,
  body.density-compact .cockpit,
  body.density-ultra .cockpit{grid-template-columns:minmax(245px,280px) minmax(0,1fr) !important;}
}
@media (max-width:860px){
  .shell,
  body.density-comfort .shell,
  body.density-compact .shell,
  body.density-ultra .shell{width:calc(100vw - 12px) !important;padding:8px !important;}
  .cockpit,
  body.density-comfort .cockpit,
  body.density-compact .cockpit,
  body.density-ultra .cockpit{grid-template-columns:1fr !important;padding:10px !important;}
  body.density-comfort .device-grid,
  body.density-compact .device-grid,
  body.density-ultra .device-grid{grid-template-columns:1fr !important;}
  .kpi-line{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
#groupMetersPanel.group-meters-panel{padding:9px 10px 10px !important;margin:0 0 8px !important;}
#groupMetersGrid.group-meter-grid,
.group-meter-grid{display:flex !important;flex-wrap:wrap !important;gap:9px !important;align-items:stretch !important;}
#groupMetersGrid .group-meter-card,
.group-meter-card{
  width:136px !important;min-width:136px !important;max-width:136px !important;
  height:104px !important;min-height:104px !important;max-height:104px !important;
  padding:7px 8px 8px !important;grid-template-rows:50px minmax(38px,1fr) !important;gap:3px !important;
}
#groupMetersGrid .group-meter-orb,.group-meter-orb{width:50px !important;height:50px !important;}
#groupMetersGrid .group-meter-core,.group-meter-core{width:36px !important;height:36px !important;}
#groupMetersGrid .group-meter-core strong,.group-meter-core strong{font-size:13.2px !important;line-height:.98 !important;}
#groupMetersGrid .group-meter-core span,.group-meter-core span{font-size:6.8px !important;line-height:1 !important;}
#groupMetersGrid .group-meter-copy strong,.group-meter-copy strong{font-size:9.8px !important;line-height:1.08 !important;}
#groupMetersGrid .group-meter-copy span,.group-meter-copy span{font-size:7.7px !important;line-height:1.08 !important;}
#groupMetersGrid .group-meter-copy small,.group-meter-copy small{font-size:8.0px !important;line-height:1.08 !important;}
.device-card.zone-meter-card,.device-card{overflow:hidden !important;min-width:0 !important;}
.device-card.has-power-toggle{
  min-height:104px !important;
  padding-bottom:9px !important;
  grid-template-areas:"gauge main live" "stats stats live" !important;
  align-items:center !important;
}
.device-card.has-power-toggle .device-livebox{
  align-self:center !important;display:grid !important;align-content:center !important;justify-items:center !important;gap:5px !important;
}
.device-card.has-power-toggle .device-stats{
  align-self:end !important;max-height:30px !important;overflow:hidden !important;margin-top:0 !important;padding-top:4px !important;
}
body.density-ultra .device-card.has-power-toggle .device-stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
body.density-ultra .device-card.has-power-toggle .device-stats div:nth-child(3){display:none !important;}
.device-card.has-power-toggle .device-control-row.single-power-row{max-height:none !important;overflow:visible !important;}
.charts-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:10px !important;}
@media (max-width:1179px){.charts-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media (max-width:860px){.charts-grid{grid-template-columns:1fr !important;}}
.wave-line-core,.wave-line-glow,.wave-line-aura,.wave-line-shine{stroke-linecap:round !important;stroke-linejoin:round !important;}
#weatherPanel .weather-temp-block span{line-height:1.1 !important;}

/* =========================================================
   v0.5.9an Precision Layout Repair
   Scope: fit-to-width, bigger mini meters, real TEST STEKKER
   power-toggle layout fix. No Tuya/power logic/data changes.
   ========================================================= */

/* Breedtebewaking: de app moet passen zonder horizontale browser-scrollbar. */
html, body{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}
.shell,
body.density-comfort .shell,
body.density-compact .shell,
body.density-ultra .shell{
  width:min(1460px, calc(100vw - 22px)) !important;
  max-width:1460px !important;
  min-width:0 !important;
  margin:0 auto !important;
  padding:14px 14px 24px !important;
}
.cockpit,
body.density-comfort .cockpit,
body.density-compact .cockpit,
body.density-ultra .cockpit{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  grid-template-columns:minmax(250px,292px) minmax(0,1fr) !important;
  gap:10px !important;
  overflow:hidden !important;
}
.right-panel,
.device-section,
.group-meters-panel,
.period-panel,
.kpi-line,
.device-toolbar,
.device-grid,
.charts-grid{
  min-width:0 !important;
  max-width:100% !important;
}
body.density-comfort .device-grid,
body.density-compact .device-grid,
body.density-ultra .device-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
}
@media (max-width:1180px){
  body.density-comfort .device-grid,
  body.density-compact .device-grid,
  body.density-ultra .device-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .cockpit,
  body.density-comfort .cockpit,
  body.density-compact .cockpit,
  body.density-ultra .cockpit{grid-template-columns:minmax(238px,280px) minmax(0,1fr) !important;}
}
@media (max-width:860px){
  .shell,
  body.density-comfort .shell,
  body.density-compact .shell,
  body.density-ultra .shell{width:calc(100vw - 12px) !important;padding:8px !important;}
  .cockpit,
  body.density-comfort .cockpit,
  body.density-compact .cockpit,
  body.density-ultra .cockpit{grid-template-columns:1fr !important;}
  body.density-comfort .device-grid,
  body.density-compact .device-grid,
  body.density-ultra .device-grid{grid-template-columns:1fr !important;}
}

/* Groepmeters: iets groter dan v0.5.9am, maar zonder de hele layout breed te trekken. */
#groupMetersPanel.group-meters-panel{padding:10px 11px 11px !important;margin:0 0 8px !important;}
#groupMetersGrid.group-meter-grid,
.group-meter-grid{display:flex !important;flex-wrap:wrap !important;gap:10px !important;align-items:stretch !important;}
#groupMetersGrid .group-meter-card,
.group-meter-card{
  width:150px !important;
  min-width:150px !important;
  max-width:150px !important;
  height:112px !important;
  min-height:112px !important;
  max-height:112px !important;
  padding:8px 9px 9px !important;
  grid-template-rows:56px minmax(40px,1fr) !important;
  gap:3px !important;
}
#groupMetersGrid .group-meter-orb,
.group-meter-orb{width:56px !important;height:56px !important;}
#groupMetersGrid .group-meter-core,
.group-meter-core{width:40px !important;height:40px !important;}
#groupMetersGrid .group-meter-core strong,
.group-meter-core strong{font-size:14.4px !important;line-height:.98 !important;}
#groupMetersGrid .group-meter-core span,
.group-meter-core span{font-size:7.1px !important;line-height:1 !important;}
#groupMetersGrid .group-meter-copy strong,
.group-meter-copy strong{font-size:10.4px !important;line-height:1.08 !important;}
#groupMetersGrid .group-meter-copy span,
.group-meter-copy span{font-size:8.1px !important;line-height:1.08 !important;}
#groupMetersGrid .group-meter-copy small,
.group-meter-copy small{font-size:8.45px !important;line-height:1.08 !important;}

/* Apparaat-/zonemeters: mini-gauges beter leesbaar zonder cards uit beeld te duwen. */
.device-card.zone-meter-card,
.device-card{
  position:relative !important;
  min-width:0 !important;
  overflow:hidden !important;
}
body.density-comfort .device-card.zone-meter-card,
body.density-compact .device-card.zone-meter-card,
body.density-ultra .device-card.zone-meter-card{
  min-height:108px !important;
  padding:9px 10px !important;
  gap:6px 9px !important;
  grid-template-columns:68px minmax(0,1fr) auto !important;
  grid-template-areas:"gauge main live" "gauge stats stats" !important;
}
body.density-comfort .mini-device-gauge,
body.density-compact .mini-device-gauge,
body.density-ultra .mini-device-gauge,
.device-card .mini-device-gauge,
.zone-meter-card .mini-device-gauge{
  width:62px !important;
  height:62px !important;
}
body.density-comfort .mini-device-gauge::after,
body.density-compact .mini-device-gauge::after,
body.density-ultra .mini-device-gauge::after,
.device-card .mini-device-gauge::after,
.zone-meter-card .mini-device-gauge::after{inset:5px !important;}
body.density-comfort .mini-device-value,
body.density-compact .mini-device-value,
body.density-ultra .mini-device-value,
.mini-device-value{font-size:15px !important;line-height:1 !important;}
body.density-comfort .mini-device-value span,
body.density-compact .mini-device-value span,
body.density-ultra .mini-device-value span,
.mini-device-value span{font-size:7px !important;line-height:1 !important;}

/* Echte TEST STEKKER/powerknop-fix:
   de aan/uit-knop staat buiten de tekst-flow, zodat hij stats niet naar beneden drukt. */
.device-card.has-power-toggle{
  position:relative !important;
  min-height:116px !important;
  padding-right:54px !important;
  padding-bottom:10px !important;
  grid-template-columns:68px minmax(0,1fr) auto !important;
  grid-template-areas:"gauge main live" "gauge stats stats" !important;
  align-items:center !important;
}
.device-card.has-power-toggle .device-livebox{
  grid-area:live !important;
  align-self:start !important;
  justify-self:end !important;
  display:grid !important;
  align-content:start !important;
  justify-items:end !important;
  gap:5px !important;
  min-width:42px !important;
  overflow:visible !important;
}
.device-card.has-power-toggle .device-control-row.single-power-row{
  position:absolute !important;
  right:13px !important;
  top:54px !important;
  width:36px !important;
  height:36px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  max-width:none !important;
  max-height:none !important;
  overflow:visible !important;
  z-index:5 !important;
  pointer-events:auto !important;
}
.device-card.has-power-toggle .mini-power-toggle{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
}
.device-card.has-power-toggle .mini-power-toggle svg{width:20px !important;height:20px !important;}
.device-card.has-power-toggle .device-stats{
  grid-area:stats !important;
  align-self:end !important;
  max-height:none !important;
  overflow:visible !important;
  padding-top:6px !important;
  padding-right:46px !important;
  margin-top:0 !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.device-card.has-power-toggle .device-stats div:nth-child(3){display:block !important;}
.device-card.has-power-toggle .device-stats span,
.device-card.has-power-toggle .device-stats strong{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.density-ultra .device-card.has-power-toggle .device-stats{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
body.density-ultra .device-card.has-power-toggle .device-stats div:nth-child(3){display:block !important;}

/* Kleine teksten: leesbaar, maar geen layout-opblazer. */
.device-stats span{font-size:7.9px !important;line-height:1.05 !important;}
.device-stats strong{font-size:9.2px !important;line-height:1.05 !important;}
.device-meta{font-size:10px !important;line-height:1.14 !important;}
.pill,.group-safety-pill{font-size:9.2px !important;}

/* Vroege ochtend: niet direct knalzon als de mapping clear + lage straling geeft. */
#weatherPanel[data-scene="night-clear"] #weatherSummary,
#weatherPanel[data-scene="night-cloud"] #weatherSummary{
  color:#dff7ff !important;
}


/* =========================================================
   v0.5.9ao Performance/Bugfix UI polish
   Scope: grotere mini-meters, datumtijd uit kaart via app.js,
   power-toggle layout intact, fit-to-width behouden.
   ========================================================= */
:root{
  --ao-device-gauge: 70px;
  --ao-group-gauge: 50px;
}
body.density-comfort .mini-device-gauge,
body.density-compact .mini-device-gauge,
body.density-ultra .mini-device-gauge,
.device-card .mini-device-gauge,
.zone-meter-card .mini-device-gauge{
  width:var(--ao-device-gauge) !important;
  height:var(--ao-device-gauge) !important;
  min-width:var(--ao-device-gauge) !important;
}
body.density-comfort .mini-device-value,
body.density-compact .mini-device-value,
body.density-ultra .mini-device-value,
.mini-device-value{
  font-size:17px !important;
  line-height:.98 !important;
}
body.density-comfort .mini-device-value span,
body.density-compact .mini-device-value span,
body.density-ultra .mini-device-value span,
.mini-device-value span{
  font-size:8.2px !important;
  line-height:1 !important;
}
body.density-comfort .device-card.zone-meter-card,
body.density-compact .device-card.zone-meter-card,
body.density-ultra .device-card.zone-meter-card{
  min-height:112px !important;
  grid-template-columns:76px minmax(0,1fr) auto !important;
}
.device-card.has-power-toggle{
  min-height:118px !important;
  padding-right:56px !important;
}
.device-card.has-power-toggle .device-control-row.single-power-row{
  top:56px !important;
  right:14px !important;
}
.device-card.has-power-toggle .device-stats{
  padding-right:48px !important;
}
#groupMetersGrid .group-meter-core,
.group-meter-core{
  width:var(--ao-group-gauge) !important;
  height:var(--ao-group-gauge) !important;
}
#groupMetersGrid .group-meter-core strong,
.group-meter-core strong{
  font-size:15.8px !important;
}
#groupMetersGrid .group-meter-core span,
.group-meter-core span{
  font-size:7.7px !important;
}
#groupMetersGrid .group-meter-card,
.group-meter-card{
  min-height:100px !important;
}
#groupMetersGrid .group-meter-copy strong,
.group-meter-copy strong{font-size:10.9px !important;}
#groupMetersGrid .group-meter-copy span,
.group-meter-copy span{font-size:8.3px !important;}
#groupMetersGrid .group-meter-copy small,
.group-meter-copy small{font-size:8.6px !important;}
@media (max-width:900px){
  :root{--ao-device-gauge:66px;--ao-group-gauge:46px;}
  body.density-comfort .device-card.zone-meter-card,
  body.density-compact .device-card.zone-meter-card,
  body.density-ultra .device-card.zone-meter-card{grid-template-columns:72px minmax(0,1fr) auto !important;}
}


/* =========================================================
   v0.5.9ap UI Balance / Multitask Desktop Readability
   Doel: 100% browserzoom in Robs gedeelde 43" werkvenster.
   Compacte cockpit behouden, maar kleine tekst en mini-meters
   duidelijker. Geen Tuya, logging, grafiekdata, meterkastlogica
   of weather-icon bestanden aangepast.
   ========================================================= */
:root{
  --ap-panel-gap:10px;
  --ap-card-radius:16px;
  --ap-device-gauge:72px;
  --ap-group-orb:58px;
  --ap-group-core:43px;
}
html,body{
  width:100% !important;
  min-width:0 !important;
  overflow-x:hidden !important;
}
body{font-size:14px !important;}
.shell,
body.density-comfort .shell,
body.density-compact .shell,
body.density-ultra .shell{
  width:min(1500px, calc(100vw - 18px)) !important;
  max-width:1500px !important;
  min-width:0 !important;
  padding:14px 14px 26px !important;
  margin:0 auto !important;
}
.hud-topbar,
body.density-compact .hud-topbar,
body.density-ultra .hud-topbar{margin-bottom:12px !important;}
.hud-brand{gap:11px !important;}
h1{font-size:clamp(28px,2.15vw,34px) !important;}
.crumb{font-size:11.5px !important;}
.build-label{font-size:12px !important;}
.btn{min-height:40px !important;padding:9px 14px !important;border-radius:12px !important;}

/* Cockpit: compact als 0.5.9ak, maar niet priegelig. */
.cockpit,
body.density-comfort .cockpit,
body.density-compact .cockpit,
body.density-ultra .cockpit{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  grid-template-columns:clamp(300px,25vw,390px) minmax(0,1fr) !important;
  gap:12px !important;
  padding:16px !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.gauge-area,
.right-panel,
.device-section,
.group-meters-panel,
.period-panel,
.kpi-line,
.device-toolbar,
.device-grid,
.charts-grid{min-width:0 !important;max-width:100% !important;}
.right-panel{gap:10px !important;overflow:hidden !important;}
.gauge-area{min-height:0 !important;align-content:start !important;}
.gauge-area h2{font-size:18px !important;margin-bottom:6px !important;}
.exact-gauge,
.smooth-gauge,
body.density-compact .exact-gauge,
body.density-compact .smooth-gauge,
body.density-ultra .exact-gauge,
body.density-ultra .smooth-gauge{
  width:clamp(215px,21vw,292px) !important;
  height:clamp(215px,21vw,292px) !important;
  margin:4px auto 8px !important;
}
.gauge-value,
body.density-compact .gauge-value,
body.density-ultra .gauge-value{font-size:clamp(42px,3.2vw,50px) !important;}
.gauge-label{font-size:13px !important;}
.gauge-profile-label{padding:7px 11px !important;margin:1px auto 9px !important;}
.gauge-profile-label span{font-size:12.8px !important;}
.gauge-profile-label small{font-size:10.9px !important;}
.status-row span:not(.mini-icon){font-size:12px !important;}
.status-row strong{font-size:14px !important;}

/* Top KPI: niet groter, wel leesbaarder. */
.kpi-line,
body.density-compact .kpi-line,
body.density-ultra .kpi-line{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  min-height:130px !important;
  gap:0 !important;
}
.metric-card,
body.density-compact .metric-card,
body.density-ultra .metric-card{
  padding:16px 18px 13px !important;
  row-gap:6px !important;
  min-width:0 !important;
  overflow:hidden !important;
}
.hud-icon{width:42px !important;height:42px !important;font-size:21px !important;margin-bottom:5px !important;}
.metric-card h2{font-size:15.8px !important;}
.metric-value,
body.density-compact .metric-value,
body.density-ultra .metric-value{
  font-size:clamp(26px,1.9vw,36px) !important;
  white-space:nowrap !important;
}
.metric-card p{font-size:12.8px !important;line-height:1.24 !important;}
.cost-breakdown span{font-size:11.5px !important;}
.cost-breakdown strong{font-size:13.6px !important;}

/* Weather-widget: alle kleine tekst leesbaar op 100% zoom. */
#weatherPanel.weather-scene-panel,
#weatherPanel.weather-strip.compact-weather-card,
#weatherPanel.weather-strip{
  width:min(345px,100%) !important;
  margin:7px auto 11px !important;
  padding:13px 14px 14px !important;
  border-radius:20px !important;
  gap:8px 10px !important;
}
#weatherPanel .weather-date-row span{font-size:14px !important;line-height:1.12 !important;}
#weatherPanel #weatherClock{font-size:18px !important;line-height:1.05 !important;}
#weatherPanel .weather-location-btn{font-size:10px !important;min-height:28px !important;padding:5px 8px !important;}
#weatherPanel .weather-icon,
#weatherPanel #weatherIcon{
  height:102px !important;
  max-width:295px !important;
}
#weatherPanel #weatherTemp,
#weatherPanel .weather-temp-block strong{font-size:34px !important;line-height:.96 !important;}
#weatherPanel #weatherSummary,
#weatherPanel .weather-temp-block span{font-size:13px !important;line-height:1.16 !important;}
#weatherPanel .weather-place-row strong{font-size:13px !important;}
#weatherPanel .weather-place-row small{font-size:11.5px !important;}
#weatherPanel .weather-metrics{gap:7px !important;}
#weatherPanel .weather-metrics div,
body.density-compact #weatherPanel .weather-metrics div,
body.density-ultra #weatherPanel .weather-metrics div{
  min-height:39px !important;
  padding:7px 8px !important;
  border-radius:10px !important;
}
#weatherPanel .weather-metrics span,
body.density-compact #weatherPanel .weather-metrics span,
body.density-ultra #weatherPanel .weather-metrics span{
  font-size:10.3px !important;
  line-height:1.08 !important;
  font-weight:560 !important;
  margin-bottom:3px !important;
}
#weatherPanel .weather-metrics strong,
body.density-compact #weatherPanel .weather-metrics strong,
body.density-ultra #weatherPanel .weather-metrics strong{
  font-size:13.2px !important;
  line-height:1.05 !important;
  font-weight:720 !important;
}

/* Groepmeters: compacte kaarten, grotere kerntekst. */
#groupMetersPanel.group-meters-panel,
.group-meters-panel{
  padding:9px 10px 10px !important;
  margin:0 0 8px !important;
}
#groupMetersPanel .group-meters-head h2,
.group-meters-head h2{font-size:16px !important;line-height:1.15 !important;}
#groupMetersPanel .group-meters-head span,
.group-meters-head span{font-size:11px !important;line-height:1.15 !important;}
#groupMetersGrid.group-meter-grid,
.group-meter-grid{display:flex !important;flex-wrap:wrap !important;gap:10px !important;align-items:stretch !important;}
#groupMetersGrid .group-meter-card,
.group-meter-card{
  width:142px !important;
  min-width:142px !important;
  max-width:142px !important;
  height:104px !important;
  min-height:104px !important;
  max-height:104px !important;
  padding:7px 8px 8px !important;
  grid-template-rows:56px minmax(36px,1fr) !important;
  gap:2px !important;
  overflow:hidden !important;
}
#groupMetersGrid .group-meter-orb,
.group-meter-orb{width:var(--ap-group-orb) !important;height:var(--ap-group-orb) !important;}
#groupMetersGrid .group-meter-core,
.group-meter-core{width:var(--ap-group-core) !important;height:var(--ap-group-core) !important;}
#groupMetersGrid .group-meter-core strong,
.group-meter-core strong{font-size:15.6px !important;line-height:.98 !important;}
#groupMetersGrid .group-meter-core span,
.group-meter-core span{font-size:7.6px !important;line-height:1 !important;}
#groupMetersGrid .group-meter-copy strong,
.group-meter-copy strong{font-size:10.8px !important;line-height:1.08 !important;}
#groupMetersGrid .group-meter-copy span,
.group-meter-copy span{font-size:8.65px !important;line-height:1.08 !important;}
#groupMetersGrid .group-meter-copy small,
.group-meter-copy small{font-size:9px !important;line-height:1.08 !important;font-weight:780 !important;}

/* Device cards: compact houden, maar informatie groter. */
.device-toolbar{grid-template-columns:minmax(220px,1fr) 160px 175px !important;gap:8px !important;margin:0 0 8px !important;}
.device-toolbar .input,.device-toolbar .select{min-height:32px !important;font-size:12.3px !important;padding:7px 10px !important;}
.section-title-row{margin:0 0 8px !important;}
.section-title-row h2{font-size:18px !important;}
.section-title-row span{font-size:11.5px !important;}
.device-grid,
body.density-comfort .device-grid,
body.density-compact .device-grid,
body.density-ultra .device-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:9px !important;
}
.device-card.zone-meter-card,
body.density-comfort .device-card.zone-meter-card,
body.density-compact .device-card.zone-meter-card,
body.density-ultra .device-card.zone-meter-card{
  min-height:106px !important;
  padding:9px 10px !important;
  gap:6px 9px !important;
  grid-template-columns:78px minmax(0,1fr) auto !important;
  grid-template-areas:"gauge main live" "gauge stats stats" !important;
  align-items:center !important;
  border-radius:16px !important;
  overflow:hidden !important;
}
.mini-device-gauge,
body.density-comfort .mini-device-gauge,
body.density-compact .mini-device-gauge,
body.density-ultra .mini-device-gauge,
.device-card .mini-device-gauge,
.zone-meter-card .mini-device-gauge{
  width:var(--ap-device-gauge) !important;
  height:var(--ap-device-gauge) !important;
  min-width:var(--ap-device-gauge) !important;
  grid-area:gauge !important;
}
.mini-device-gauge::after{inset:5px !important;}
.mini-device-value,
body.density-comfort .mini-device-value,
body.density-compact .mini-device-value,
body.density-ultra .mini-device-value{
  font-size:18px !important;
  line-height:.98 !important;
  font-weight:760 !important;
}
.mini-device-value span,
body.density-comfort .mini-device-value span,
body.density-compact .mini-device-value span,
body.density-ultra .mini-device-value span{
  font-size:8.5px !important;
  line-height:1 !important;
  margin-top:2px !important;
}
.device-name,
body.density-compact .device-name,
body.density-ultra .device-name{font-size:18px !important;line-height:1.05 !important;margin-bottom:2px !important;}
.device-watt,
body.density-compact .device-watt,
body.density-ultra .device-watt{font-size:25px !important;line-height:.98 !important;}
.device-watt span{font-size:.58em !important;}
.device-meta,
body.density-compact .device-meta,
body.density-ultra .device-meta{font-size:11.3px !important;line-height:1.20 !important;color:#9ab6cf !important;}
.device-stats,
body.density-compact .device-stats,
body.density-ultra .device-stats{
  grid-area:stats !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:5px !important;
  border-top:1px solid rgba(24,234,255,.12) !important;
  padding-top:6px !important;
  margin-top:0 !important;
}
.device-stats span,
body.density-compact .device-stats span,
body.density-ultra .device-stats span{font-size:9.4px !important;line-height:1.05 !important;color:#89a6bf !important;}
.device-stats strong,
body.density-compact .device-stats strong,
body.density-ultra .device-stats strong{font-size:10.7px !important;line-height:1.05 !important;}
.device-livebox,
body.density-compact .device-livebox,
body.density-ultra .device-livebox{grid-area:live !important;align-self:start !important;gap:4px !important;min-width:50px !important;}
.pill,.group-safety-pill,
body.density-compact .pill,
body.density-ultra .pill{font-size:10.2px !important;padding:3px 8px !important;}
.device-chevron{display:none !important;}

/* Powerknop blijft uit de tekst-flow. */
.device-card.has-power-toggle{position:relative !important;padding-right:54px !important;min-height:108px !important;}
.device-card.has-power-toggle .device-control-row.single-power-row{
  position:absolute !important;
  right:12px !important;
  top:56px !important;
  width:36px !important;
  height:36px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  z-index:5 !important;
}
.device-card.has-power-toggle .mini-power-toggle{width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important;}
.device-card.has-power-toggle .device-stats{padding-right:42px !important;max-height:none !important;overflow:visible !important;}
.device-card.has-power-toggle .device-stats div:nth-child(3){display:block !important;}

/* Perioden en grafieken: compact, labels iets leesbaarder. */
.period-panel{padding:12px 14px !important;margin-top:10px !important;gap:12px !important;}
.period-left h2{font-size:16px !important;}
.period-btn{min-width:72px !important;padding:9px 12px !important;}
.period-summary{font-size:12.2px !important;padding:9px 13px !important;}
.period-summary small{font-size:11.2px !important;}
.charts-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:10px !important;margin-top:10px !important;}
.chart-card{min-height:210px !important;padding:13px 14px !important;}
.chart-card h2{font-size:16px !important;margin-bottom:9px !important;}
.bar-chart,.line-chart,.horizontal-bars{height:154px !important;}
.x-labels,.y-labels,.axis-labels,.chart-axis,.chart-labels,.bar-chart text,.line-chart text,.horizontal-bars text{
  font-size:11.2px !important;
  color:#a6c6dc !important;
  fill:#a6c6dc !important;
  opacity:.94 !important;
}
.y-labels{font-size:10.8px !important;}

@media (max-width:1280px){
  .cockpit,
  body.density-comfort .cockpit,
  body.density-compact .cockpit,
  body.density-ultra .cockpit{grid-template-columns:minmax(285px,330px) minmax(0,1fr) !important;padding:12px !important;}
  .kpi-line{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  .device-grid,
  body.density-comfort .device-grid,
  body.density-compact .device-grid,
  body.density-ultra .device-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:900px){
  :root{--ap-device-gauge:68px;--ap-group-orb:54px;--ap-group-core:40px;}
  .shell,
  body.density-comfort .shell,
  body.density-compact .shell,
  body.density-ultra .shell{width:calc(100vw - 12px) !important;padding:8px !important;}
  .cockpit,
  body.density-comfort .cockpit,
  body.density-compact .cockpit,
  body.density-ultra .cockpit{grid-template-columns:1fr !important;}
  .device-grid,
  body.density-comfort .device-grid,
  body.density-compact .device-grid,
  body.density-ultra .device-grid{grid-template-columns:1fr !important;}
  .charts-grid{grid-template-columns:1fr !important;}
}

/* v0.5.9aq - status/polish zonder weather-icons aan te raken */
#weatherPanel .weather-location-btn.icon-only,
.weather-location-btn.icon-only{
  width:32px !important;
  min-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 !important;
  border-radius:11px !important;
  font-size:13px !important;
  line-height:1 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#weatherPanel .weather-location-btn.icon-only::before{content:"" !important;display:none !important;}
.settings-divider{height:1px;background:rgba(24,234,255,.14);margin:14px 0 12px;}
.settings-mini-title{margin:0 0 8px;font-size:14px;font-weight:720;color:#eafaff;}

/* Groepmeters zijn groepenkastmeters: iets prominenter dan stekker-mini-meters. */
#groupMetersGrid .group-meter-card,
.group-meter-card{
  width:158px !important;
  min-width:158px !important;
  max-width:158px !important;
  height:112px !important;
  min-height:112px !important;
  max-height:112px !important;
  grid-template-rows:64px minmax(40px,1fr) !important;
  padding:8px 9px 9px !important;
}
#groupMetersGrid .group-meter-orb,
.group-meter-orb{width:64px !important;height:64px !important;}
#groupMetersGrid .group-meter-core,
.group-meter-core{width:46px !important;height:46px !important;}
#groupMetersGrid .group-meter-core strong,
.group-meter-core strong{font-size:17px !important;line-height:.98 !important;}
#groupMetersGrid .group-meter-core span,
.group-meter-core span{font-size:7.8px !important;}
#groupMetersGrid .group-meter-copy strong,
.group-meter-copy strong{font-size:11.2px !important;}
#groupMetersGrid .group-meter-copy span,
.group-meter-copy span{font-size:8.6px !important;}
#groupMetersGrid .group-meter-copy small,
.group-meter-copy small{font-size:9.1px !important;}

/* Optionele stekkerdetails: als details verborgen zijn, kaart compact houden zonder lege stats-rij. */
.device-card.no-device-stats,
body.density-compact .device-card.no-device-stats,
body.density-ultra .device-card.no-device-stats{
  min-height:92px !important;
  grid-template-areas:"gauge main live" !important;
}
.device-card.no-device-stats.has-power-toggle{
  min-height:96px !important;
}
.device-card.no-device-stats .device-main{align-self:center !important;}
.device-stats.stat-count-1{grid-template-columns:1fr !important;}
.device-stats.stat-count-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
.device-stats.stat-count-3{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}

@media (max-width:1280px){
  #groupMetersGrid .group-meter-card,
  .group-meter-card{width:148px !important;min-width:148px !important;max-width:148px !important;height:108px !important;min-height:108px !important;}
  #groupMetersGrid .group-meter-orb,.group-meter-orb{width:60px !important;height:60px !important;}
  #groupMetersGrid .group-meter-core,.group-meter-core{width:43px !important;height:43px !important;}
}

/* =========================================================
   v0.5.9ar - groepenkastmeters echt prominenter + kleine fixes
   - Groepenkastmeters zijn hoofd-/groepniveau en mogen duidelijk groter zijn
     dan stekkermeters.
   - Geen weather-icon bestanden aangeraakt.
   ========================================================= */
#groupMetersPanel.group-meters-panel{
  padding:12px 14px 14px !important;
  margin:0 0 10px !important;
}
#groupMetersGrid.group-meter-grid,
.group-meter-grid{
  gap:14px !important;
  align-items:stretch !important;
}
#groupMetersGrid .group-meter-card,
.group-meter-card{
  width:230px !important;
  min-width:230px !important;
  max-width:230px !important;
  height:164px !important;
  min-height:164px !important;
  max-height:164px !important;
  padding:12px 14px !important;
  grid-template-rows:116px minmax(34px,1fr) !important;
  gap:5px !important;
  border-radius:18px !important;
}
#groupMetersGrid .group-meter-orb,
.group-meter-orb{
  width:118px !important;
  height:118px !important;
}
#groupMetersGrid .group-meter-core,
.group-meter-core{
  width:84px !important;
  height:84px !important;
}
#groupMetersGrid .group-meter-core strong,
.group-meter-core strong{
  font-size:28px !important;
  line-height:.95 !important;
  letter-spacing:-.9px !important;
}
#groupMetersGrid .group-meter-core span,
.group-meter-core span{
  font-size:11px !important;
  line-height:1 !important;
  margin-top:2px !important;
}
#groupMetersGrid .group-meter-copy,
.group-meter-copy{
  gap:2px !important;
  padding:0 2px !important;
}
#groupMetersGrid .group-meter-copy strong,
.group-meter-copy strong{
  font-size:14px !important;
  line-height:1.05 !important;
}
#groupMetersGrid .group-meter-copy span,
.group-meter-copy span{
  font-size:11px !important;
  line-height:1.05 !important;
}
#groupMetersGrid .group-meter-copy small,
.group-meter-copy small{
  font-size:12px !important;
  line-height:1.05 !important;
  font-weight:820 !important;
}

@media (max-width:1280px){
  #groupMetersGrid .group-meter-card,
  .group-meter-card{
    width:206px !important;
    min-width:206px !important;
    max-width:206px !important;
    height:154px !important;
    min-height:154px !important;
    max-height:154px !important;
    grid-template-rows:106px minmax(34px,1fr) !important;
  }
  #groupMetersGrid .group-meter-orb,.group-meter-orb{width:106px !important;height:106px !important;}
  #groupMetersGrid .group-meter-core,.group-meter-core{width:76px !important;height:76px !important;}
  #groupMetersGrid .group-meter-core strong,.group-meter-core strong{font-size:25px !important;}
  #groupMetersGrid .group-meter-core span,.group-meter-core span{font-size:10px !important;}
  #groupMetersGrid .group-meter-copy strong,.group-meter-copy strong{font-size:13px !important;}
  #groupMetersGrid .group-meter-copy span,.group-meter-copy span{font-size:10.2px !important;}
  #groupMetersGrid .group-meter-copy small,.group-meter-copy small{font-size:11px !important;}
}
@media (max-width:900px){
  #groupMetersGrid .group-meter-card,
  .group-meter-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
}


/* =========================================================
   v0.5.9as - Weather tekst + grafiekcontinuiteit + KPI icon polish
   Alleen UI/weergave. Weather-icons, Tuya, logging, grafiekdata en meterkastlogica blijven intact.
   ========================================================= */

/* KPI-icons bovenin iets duidelijker zonder de kaarten groter te maken. */
.kpi-line .hud-icon,
body.density-comfort .kpi-line .hud-icon,
body.density-compact .kpi-line .hud-icon,
body.density-ultra .kpi-line .hud-icon{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  border-radius:16px !important;
  margin-bottom:6px !important;
}
.kpi-line .hud-icon svg,
body.density-comfort .kpi-line .hud-icon svg,
body.density-compact .kpi-line .hud-icon svg,
body.density-ultra .kpi-line .hud-icon svg{
  width:28px !important;
  height:28px !important;
}

/* Weerwidget: status mag niet als "Licht bew..." afgekapt worden. */
#weatherPanel .weather-temp-block{
  min-width:0 !important;
  max-width:none !important;
  transform:translateX(4px) !important;
}
#weatherPanel #weatherSummary,
#weatherPanel .weather-temp-block span{
  display:block !important;
  width:100% !important;
  max-width:145px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  line-height:1.14 !important;
}

/* Windwaarde: voorkom ellipsis bij "10 km/u" en toon nooit een afgekapt "uit _". */
#weatherWind{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.10 !important;
  min-width:0 !important;
}

/* Locatieknop: echt icoon-only, geen afgekapt tekstfragment meer. */
#weatherPanel .weather-location-btn.icon-only,
.weather-location-btn.icon-only{
  font-size:0 !important;
  color:transparent !important;
  width:31px !important;
  min-width:31px !important;
  height:31px !important;
  min-height:31px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#weatherPanel .weather-location-btn.icon-only::after,
.weather-location-btn.icon-only::after{
  content:"⌖" !important;
  font-size:15px !important;
  line-height:1 !important;
  color:#dffbff !important;
  text-shadow:0 0 10px rgba(24,234,255,.65) !important;
}

/* Grafieken: 0-lijn en punten blijven zichtbaar, zodat week/jaar niet visueel breekt. */
.line-chart svg.wave-svg{
  overflow:visible !important;
}
.wave-line-core,
.wave-line-glow,
.wave-line-aura,
.wave-line-shine{
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.wave-point{
  opacity:1 !important;
}

.settings-warning{
  margin:6px 0 10px;
  padding:8px 10px;
  border:1px solid rgba(255,153,36,.45);
  border-radius:10px;
  background:rgba(255,153,36,.08);
  color:#ffd28d;
  font-size:12px;
  font-weight:700;
  box-shadow:0 0 16px rgba(255,153,36,.10);
}


/* =========================================================
   v0.5.9at - UI polish: groepmeter-ring dunner + weericon-glow
   Alleen CSS/UI. Geen weather-icon bestanden, Tuya, logging,
   grafiekdata of meterkastlogica aangepast.
   ========================================================= */

/* Groepenkastmeters blijven groot, maar de ring wordt luchtiger/dunner. */
#groupMetersGrid .group-meter-card,
.group-meter-card{
  height:160px !important;
  min-height:160px !important;
  max-height:160px !important;
  grid-template-rows:106px minmax(38px,1fr) !important;
  padding:11px 14px 12px !important;
}
#groupMetersGrid .group-meter-orb,
.group-meter-orb{
  width:110px !important;
  height:110px !important;
  background:
    radial-gradient(circle at 50% 50%,rgba(3,10,22,.98) 0 60%,transparent 61%),
    conic-gradient(var(--ring-color) var(--load),rgba(24,234,255,.105) 0) !important;
  box-shadow:0 0 16px rgba(24,234,255,.13), inset 0 0 14px rgba(24,234,255,.055) !important;
}
#groupMetersGrid .group-meter-core,
.group-meter-core{
  width:88px !important;
  height:88px !important;
  border-color:rgba(24,234,255,.16) !important;
}
#groupMetersGrid .group-meter-core strong,
.group-meter-core strong{
  font-size:27px !important;
}
#groupMetersGrid .group-meter-copy,
.group-meter-copy{
  margin-top:0 !important;
  gap:2px !important;
}
#groupMetersGrid .group-meter-copy strong,
.group-meter-copy strong{
  font-size:14px !important;
  line-height:1.08 !important;
}
#groupMetersGrid .group-meter-copy span,
.group-meter-copy span{
  font-size:10.6px !important;
  line-height:1.08 !important;
}
#groupMetersGrid .group-meter-copy small,
.group-meter-copy small{
  font-size:11.4px !important;
  line-height:1.08 !important;
}

@media (max-width:1280px){
  #groupMetersGrid .group-meter-card,
  .group-meter-card{
    height:148px !important;
    min-height:148px !important;
    max-height:148px !important;
    grid-template-rows:98px minmax(34px,1fr) !important;
  }
  #groupMetersGrid .group-meter-orb,.group-meter-orb{width:100px !important;height:100px !important;}
  #groupMetersGrid .group-meter-core,.group-meter-core{width:80px !important;height:80px !important;}
  #groupMetersGrid .group-meter-core strong,.group-meter-core strong{font-size:25px !important;}
}

/* Subtiele lichtgloed achter weather PNG-assets, zodat de schone icons meer loskomen. */
#weatherPanel .weather-icon.weather-asset,
#weatherIcon.weather-asset{
  position:relative !important;
  isolation:isolate !important;
}
#weatherPanel .weather-icon.weather-asset::before,
#weatherIcon.weather-asset::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:52% !important;
  width:76% !important;
  height:66% !important;
  transform:translate(-50%,-50%) !important;
  border-radius:999px !important;
  background:radial-gradient(circle,rgba(255,255,235,.26) 0%,rgba(24,234,255,.15) 42%,rgba(255,180,70,.08) 62%,transparent 76%) !important;
  filter:blur(10px) !important;
  opacity:.78 !important;
  z-index:-1 !important;
  pointer-events:none !important;
}
#weatherPanel .weather-asset-icon,
#weatherIcon .weather-asset-icon,
.weather-asset-icon{
  position:relative !important;
  z-index:1 !important;
}

/* Als de Veilig-badge verborgen is, LIVE netjes alleen laten staan. */
.device-livebox:has(.pill:only-child){
  align-content:center !important;
}

/* =========================================================
   v0.5.9au - hotfix: groepmetertekst binnen kaart + grafieklabels + stekkernamen subtieler
   Alleen CSS/UI + x-as label sampling in app.js. Geen weather-icons, Tuya, logging,
   grafiekdata/aggregatie of meterkastlogica aangepast.
   ========================================================= */

/* Groepenkastmeters: ring blijft dunner, maar tekst mag niet uit de kaart lekken. */
#groupMetersGrid .group-meter-card,
.group-meter-card{
  height:176px !important;
  min-height:176px !important;
  max-height:176px !important;
  grid-template-rows:112px 50px !important;
  align-items:start !important;
  justify-items:center !important;
  padding:8px 14px 10px !important;
  overflow:hidden !important;
}
#groupMetersGrid .group-meter-orb,
.group-meter-orb{
  width:104px !important;
  height:104px !important;
  align-self:center !important;
  justify-self:center !important;
  margin:0 auto !important;
}
#groupMetersGrid .group-meter-core,
.group-meter-core{
  width:82px !important;
  height:82px !important;
}
#groupMetersGrid .group-meter-core strong,
.group-meter-core strong{
  font-size:26px !important;
  line-height:.92 !important;
}
#groupMetersGrid .group-meter-core span,
.group-meter-core span{
  font-size:10px !important;
  line-height:1 !important;
}
#groupMetersGrid .group-meter-copy,
.group-meter-copy{
  width:100% !important;
  min-height:48px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:1px !important;
  margin:0 !important;
  padding:0 2px !important;
  overflow:visible !important;
}
#groupMetersGrid .group-meter-copy strong,
.group-meter-copy strong{
  max-width:100% !important;
  font-size:13.2px !important;
  line-height:1.06 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#groupMetersGrid .group-meter-copy span,
.group-meter-copy span{
  max-width:100% !important;
  font-size:10px !important;
  line-height:1.06 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#groupMetersGrid .group-meter-copy small,
.group-meter-copy small{
  display:block !important;
  max-width:100% !important;
  font-size:10.8px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  margin-top:1px !important;
}

@media (max-width:1280px){
  #groupMetersGrid .group-meter-card,
  .group-meter-card{
    height:166px !important;
    min-height:166px !important;
    max-height:166px !important;
    grid-template-rows:104px 48px !important;
    padding:8px 12px 9px !important;
  }
  #groupMetersGrid .group-meter-orb,.group-meter-orb{width:96px !important;height:96px !important;}
  #groupMetersGrid .group-meter-core,.group-meter-core{width:76px !important;height:76px !important;}
  #groupMetersGrid .group-meter-core strong,.group-meter-core strong{font-size:24px !important;}
  #groupMetersGrid .group-meter-copy strong,.group-meter-copy strong{font-size:12.4px !important;}
  #groupMetersGrid .group-meter-copy span,.group-meter-copy span{font-size:9.5px !important;}
  #groupMetersGrid .group-meter-copy small,.group-meter-copy small{font-size:10.2px !important;}
}

/* Stekkernamen een tikje rustiger: watt blijft de hoofdinfo. */
.device-name,
body.density-comfort .device-name,
body.density-compact .device-name,
body.density-ultra .device-name{
  font-size:14.4px !important;
  line-height:1.03 !important;
  font-weight:550 !important;
}
body.density-ultra .device-name{font-size:13.2px !important;}

/* Grafiek x-as: labels spreiden en nooit meer als één tekstprop tonen. */
.x-labels{
  left:42px !important;
  right:14px !important;
  bottom:3px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:10px !important;
  pointer-events:none !important;
}
.x-labels span{
  flex:0 0 auto !important;
  min-width:28px !important;
  max-width:54px !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
}
@media (max-width:1280px){
  .x-labels{gap:7px !important;}
  .x-labels span{font-size:9.7px !important;min-width:25px !important;max-width:48px !important;}
}


/* =========================================================
   v0.5.9aw - wind compact + kWh decimalen instelling + weather glow sterker
   Alleen UI/weergave. Geen weather-icon bestanden, Tuya, logging, grafiekdata
   of meterkastlogica aangepast.
   ========================================================= */

/* Weather icon glow beter zichtbaar, zonder PNG-bestanden aan te raken. */
#weatherPanel .weather-icon.weather-asset,
#weatherIcon.weather-asset{
  overflow:visible !important;
}
#weatherPanel .weather-icon.weather-asset::before,
#weatherIcon.weather-asset::before{
  z-index:0 !important;
  width:96% !important;
  height:86% !important;
  opacity:.98 !important;
  background:radial-gradient(circle,rgba(255,255,238,.34) 0%,rgba(255,214,96,.18) 34%,rgba(24,234,255,.18) 58%,transparent 78%) !important;
  filter:blur(13px) !important;
}
#weatherPanel .weather-asset-icon,
#weatherIcon .weather-asset-icon,
.weather-asset-icon{
  position:relative !important;
  z-index:1 !important;
  filter:drop-shadow(0 0 10px rgba(255,255,230,.32)) drop-shadow(0 0 18px rgba(24,234,255,.18)) !important;
}

/* Korte select in Weergave-menu voor kWh-decimalen. */
.settings-view-card #deviceCardKwhDecimals.small-select,
#deviceCardKwhDecimals{
  max-width:250px !important;
}


/* =========================================================
   v0.5.9ax - viewport debug listener overlay
   Alleen zichtbaar met ?debug=viewport / ?debug=layout / ?vpdebug=1.
   ========================================================= */
.viewport-debug-overlay{
  position:fixed;
  z-index:999999;
  right:12px;
  bottom:12px;
  width:min(620px,calc(100vw - 24px));
  max-height:min(72vh,680px);
  overflow:auto;
  border:1px solid rgba(24,234,255,.58);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(2,12,24,.96),rgba(4,8,20,.96));
  box-shadow:0 0 24px rgba(24,234,255,.24),0 0 42px rgba(0,0,0,.5);
  color:#dffbff;
  font:12px/1.35 ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;
  backdrop-filter:blur(10px);
}
.viewport-debug-head{
  position:sticky;
  top:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  background:rgba(3,17,32,.98);
  border-bottom:1px solid rgba(24,234,255,.22);
}
.viewport-debug-head strong{font:700 13px/1.2 system-ui,-apple-system,Segoe UI,sans-serif;color:#fff;}
.viewport-debug-head button{
  border:1px solid rgba(24,234,255,.35);
  border-radius:9px;
  background:rgba(4,19,35,.88);
  color:#eafcff;
  padding:5px 8px;
  font:700 11px/1 system-ui,-apple-system,Segoe UI,sans-serif;
}
.viewport-debug-head button:active{transform:translateY(1px);}
#viewportDebugPre{
  margin:0;
  padding:10px;
  white-space:pre-wrap;
  word-break:break-word;
}
.viewport-debug-hint{
  margin:0;
  padding:0 10px 10px;
  color:#8fb9c7;
  font:11px/1.35 system-ui,-apple-system,Segoe UI,sans-serif;
}
@media(max-width:700px){
  .viewport-debug-overlay{left:8px;right:8px;bottom:8px;width:auto;max-height:60vh;font-size:10.5px;}
  .viewport-debug-head{padding:7px 8px;}
  .viewport-debug-head button{padding:5px 7px;font-size:10px;}
}


/* =========================================================
   v0.5.9ay/v0.5.9az/v0.5.9ba - iPhone/Android: geforceerde desktop-canvas
   Actief via ?forceDesktop=1 / ?fd=1 / instelling Mobiel / iPhone.
   Doel: iPhone mag 414px viewport houden, maar dashboard blijft intern desktopbreed.
   Geen standaard layoutwijziging, geen Tuya/logging/grafiekdata/weather-icons.
   ========================================================= */
html.force-desktop-canvas,
html.force-desktop-canvas body,
body.force-desktop-canvas{
  width:auto !important;
  min-width:var(--desktop-canvas-width,1180px) !important;
  max-width:none !important;
  overflow-x:auto !important;
  overscroll-behavior-x:contain !important;
  touch-action:pan-x pan-y pinch-zoom !important;
}
html.force-desktop-canvas body{
  position:relative !important;
}
html.force-desktop-canvas .shell,
body.force-desktop-canvas .shell,
html.force-desktop-canvas main.shell,
body.force-desktop-canvas main.shell{
  width:var(--desktop-canvas-width,1180px) !important;
  min-width:var(--desktop-canvas-width,1180px) !important;
  max-width:none !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
html.force-desktop-canvas .hud-topbar,
body.force-desktop-canvas .hud-topbar{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
}
html.force-desktop-canvas .cockpit,
body.force-desktop-canvas .cockpit{
  display:grid !important;
  grid-template-columns:300px minmax(0,1fr) !important;
  gap:14px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  overflow:hidden !important;
}
html.force-desktop-canvas .gauge-area,
body.force-desktop-canvas .gauge-area{
  width:300px !important;
  min-width:0 !important;
  max-width:300px !important;
  display:flex !important;
}
html.force-desktop-canvas .right-panel,
body.force-desktop-canvas .right-panel{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  display:grid !important;
  grid-template-rows:auto auto 1fr !important;
  gap:9px !important;
  overflow:hidden !important;
}
html.force-desktop-canvas .kpi-line,
body.force-desktop-canvas .kpi-line{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:0 !important;
  width:100% !important;
}
html.force-desktop-canvas #groupMetersGrid,
body.force-desktop-canvas #groupMetersGrid,
html.force-desktop-canvas .group-meter-grid,
body.force-desktop-canvas .group-meter-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
}
html.force-desktop-canvas .device-section,
body.force-desktop-canvas .device-section{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  overflow:visible !important;
}
html.force-desktop-canvas .device-toolbar,
body.force-desktop-canvas .device-toolbar{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 165px 165px !important;
  gap:8px !important;
  width:100% !important;
}
html.force-desktop-canvas .device-grid,
body.force-desktop-canvas .device-grid,
html.force-desktop-canvas body.density-compact .device-grid,
html.force-desktop-canvas body.density-ultra .device-grid,
html.force-desktop-canvas body.density-comfort .device-grid,
body.force-desktop-canvas.density-compact .device-grid,
body.force-desktop-canvas.density-ultra .device-grid,
body.force-desktop-canvas.density-comfort .device-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
}
html.force-desktop-canvas .period-panel,
body.force-desktop-canvas .period-panel{
  display:grid !important;
  grid-template-columns:auto minmax(260px,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  max-width:none !important;
  overflow:hidden !important;
}
html.force-desktop-canvas .period-actions,
body.force-desktop-canvas .period-actions{
  display:flex !important;
  flex-direction:row !important;
  gap:8px !important;
  justify-content:flex-end !important;
}
html.force-desktop-canvas .charts-grid,
body.force-desktop-canvas .charts-grid,
html.force-desktop-canvas body.density-comfort .charts-grid,
html.force-desktop-canvas body.density-compact .charts-grid,
html.force-desktop-canvas body.density-ultra .charts-grid,
body.force-desktop-canvas.density-comfort .charts-grid,
body.force-desktop-canvas.density-compact .charts-grid,
body.force-desktop-canvas.density-ultra .charts-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  width:100% !important;
  max-width:none !important;
  overflow:visible !important;
}
html.force-desktop-canvas #weatherPanel.weather-strip,
body.force-desktop-canvas #weatherPanel.weather-strip{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}
html.force-desktop-canvas .viewport-debug-overlay,
body.force-desktop-canvas .viewport-debug-overlay{
  width:620px !important;
  max-width:calc(100vw - 24px) !important;
}

/* =========================================================
   v0.5.9bb - Weather-debug regel, alleen zichtbaar met ?debug=weather / viewport / layout
   ========================================================= */
.weather-debug-line {
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(125, 211, 252, .22);
  border-radius: 10px;
  background: rgba(2, 6, 23, .50);
  color: rgba(214, 244, 255, .82);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 9.5px;
  line-height: 1.35;
  word-break: break-word;
  max-height: 54px;
  overflow: auto;
}