/* -- THEMES ------------------------------------------------------------------- */
[data-theme="night"] {
  --bg:        #070c18;
  --bg2:       #0d1424;
  --card:      rgba(13,20,40,0.92);
  --card-b:    rgba(99,102,241,0.12);
  --txt:       #e2e8f0;
  --txt2:      #7b8db0;
  --border:    rgba(80,100,180,0.22);
  --node-bg:   rgba(10,16,36,0.95);
  --line-idle: #1a2540;
  --shadow:    rgba(0,0,0,0.6);
  --ev:        #22d3ee;
}
[data-theme="day"] {
  --bg:        #dbeafe;
  --bg2:       #eff6ff;
  --card:      rgba(255,255,255,0.92);
  --card-b:    rgba(59,130,246,0.08);
  --txt:       #0f172a;
  --txt2:      #4b6080;
  --border:    rgba(59,130,246,0.2);
  --node-bg:   rgba(248,252,255,0.97);
  --line-idle: #c7d8f0;
  --shadow:    rgba(0,50,120,0.12);
  --ev:        #22d3ee;
}
/* -- COLOURS ------------------------------------------------------------------ */
:root {
  --solar:    #fbbf24;
  --grid-in:  #60a5fa;
  --grid-out: #34d399;
  --bat-chg:  #4ade80;   /* groen = laden */
  --bat-dis:  #fb923c;   /* oranje = ontladen (zelfde als huis) */
  --house:    #fb923c;
  --offline:  #475569;
  --danger:   #ef4444;
  --house-lo: #86efac;   /* groen = laag verbruik */
  --house-hi: #f87171;   /* rood  = hoog verbruik */
}
/* -- BASE --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--txt);min-height:100vh;transition:background .4s,color .4s;overflow-x:hidden}