/* ==========================================================================
   EnergyNexus — Web-Oberflaeche des PowerDot, Gestaltung

   Gehoert zu stil/webui.js. Zwei Welten in einer Datei, streng getrennt:

   1. DER RAHMEN (.webui, .wui-fenster ...) ist unser Bedienelement. Er folgt
      dem Gestaltungssystem der Website: eine Akzentfarbe (--hot), Haarlinien,
      keine Flaechen, Farben nur ueber die CSS-Variablen.

   2. DAS DOKUMENT (.wui-doc und alles darin) ist der Nachbau der Seite, die
      das Geraet ausliefert. Jede Regel darin ist aus der Firmware
      uebernommen — PowerDotCore/src/pd_web_css.cpp (Grundaussehen),
      pd_web_live.cpp (Startseite), pd_web_hist.cpp (Erweiterte Ansicht),
      pd_web_pages.cpp (Knopfleiste). Deshalb stehen dort Hexwerte und keine
      Variablen: es sind Geraetefarben.

   Der einzige Zusatz im Dokument ist ein sichtbarer Tastaturfokus. Das Geraet
   hat keinen — eine Seite ohne sichtbaren Fokus waere hier aber nicht
   bedienbar. Er nimmt #3fc1f3, die Akzentfarbe der Firmware.
   ========================================================================== */

/* ── 1. Rahmen ───────────────────────────────────────────────────────────── */

.webui{
  margin:0;
  display:flex;flex-direction:column;align-items:stretch;gap:14px;
}

.wui-fenster{
  width:100%;max-width:var(--wui-breite,900px);
  border:1px solid var(--umriss,rgba(235,234,231,.38));
  border-radius:12px;overflow:hidden;
  background:#0d0d0d;
}

/* Fensterkopf: Punkte, Adresszeile. Haarlinie darunter, keine Flaeche. */
.wui-kopf{
  display:flex;align-items:center;gap:12px;
  padding:9px 12px;
  border-bottom:1px solid var(--umriss,rgba(235,234,231,.38));
  background:transparent;
}
.wui-ampel{display:flex;gap:6px;flex-shrink:0;}
.wui-ampel i{
  display:block;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--umriss,rgba(235,234,231,.38));
}
.wui-adresse{
  flex:1;min-width:0;
  font-family:var(--mono,ui-monospace,monospace);font-size:12px;line-height:1.6;
  color:var(--faint,rgba(235,234,231,.50));
  border:1px solid var(--umriss,rgba(235,234,231,.38));
  border-radius:999px;padding:4px 12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wui-adresse b{color:var(--bone,#ebeae7);font-weight:500;}

/* Die Scheibe, in der das Dokument liegt. Innen rollt es, aussen nie. */
.wui-scheibe{
  height:var(--wui-hoehe,620px);
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  position:relative;
}
.wui-scheibe:focus-visible{outline:2px solid var(--hot,#ff5a1f);outline-offset:-2px;}

/* Leiste daneben: eigene Bedienelemente, also Gestaltungssystem der Seite. */
.wui-leiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.wui-schalter{
  font:inherit;font-size:13px;line-height:1;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 14px;border-radius:999px;cursor:pointer;
  color:var(--bone,#ebeae7);background:transparent;
  border:1px solid var(--umriss,rgba(235,234,231,.38));
}
.wui-schalter::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--umriss,rgba(235,234,231,.38));
}
.wui-schalter[aria-pressed="true"]::before{background:var(--gut,#5bd08a);}
.wui-schalter:hover{border-color:var(--bone,#ebeae7);}
.wui-schalter:focus-visible{outline:2px solid var(--hot,#ff5a1f);outline-offset:2px;}
.wui-schalter[disabled]{opacity:.45;cursor:default;}

.wui-marke{
  font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint,rgba(235,234,231,.50));
}

.wui-hinweis{
  font-size:13px;line-height:1.6;max-width:60ch;
  color:var(--faint,rgba(235,234,231,.50));
}

.wui-nurton{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

@media (max-width:640px){
  .wui-scheibe{height:min(var(--wui-hoehe,620px),74vh);}
  .wui-kopf{padding:8px 10px;gap:8px;}
}

/* ── 2. Dokument — aus der Firmware ──────────────────────────────────────── */
/* pd_web_css.h, PD_CSS_RUMPF */

.wui-doc *{box-sizing:border-box;margin:0;padding:0;}
.wui-doc{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#0d0d0d;color:#eee;
  min-height:100%;
}
.wui-doc header h1{font-size:20px;font-weight:700;letter-spacing:.5px;}

/* pd_web_css.cpp: body{max-width:480px;padding:16px 12px 40px} */
.wui-body{max-width:480px;padding:16px 12px 40px;margin:0 auto;}
/* pd_web_hist.cpp: body{max-width:760px;padding:16px 12px 32px} */
.wui-body.wui-breit{max-width:760px;padding:16px 12px 32px;}

.wui-doc header{display:flex;align-items:center;justify-content:space-between;padding:12px 0 18px;}
.wui-doc header h1{color:#00d4ff;margin-right:auto;}

.wui-doc .hback{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin-right:10px;flex-shrink:0;border-radius:10px;
  background:#141414;border:1px solid #222;color:#8aa;text-decoration:none;
  font-size:17px;line-height:1;
}
.wui-doc .hback:active{opacity:.6;}

.wui-doc .badge{
  font-size:11px;padding:3px 8px;border-radius:20px;border:1px solid #333;
  color:#555;transition:color .3s,border-color .3s;
}
.wui-doc .badge.live{color:#00ff88;border-color:#00ff88;}
.wui-doc .badge.off{color:#ff4444;border-color:#ff4444;}

.wui-doc .card{background:#141414;border:1px solid #1e1e1e;border-radius:14px;padding:18px 16px;margin-bottom:12px;}
.wui-doc .card-title{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#333;margin-bottom:16px;}
.wui-doc .srow{margin-bottom:16px;}
.wui-doc .srow:last-child{margin-bottom:0;}
.wui-doc .slabel{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.wui-doc .slabel span{font-size:13px;color:#666;}
.wui-doc .sval{font-size:20px;font-weight:700;color:#fff;min-width:64px;text-align:right;}

.wui-doc input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;
  background:#1e1e1e;border-radius:3px;outline:none;cursor:pointer;
}
.wui-doc input[type=range]::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;border-radius:50%;background:#00d4ff;cursor:pointer;box-shadow:0 0 0 3px #0d0d0d;
}
.wui-doc input[type=range].green::-webkit-slider-thumb{background:#00ff88;}
.wui-doc input[type=range].yellow::-webkit-slider-thumb{background:#ffd000;}
.wui-doc input[type=range].orange::-webkit-slider-thumb{background:#ffb14e;}
.wui-doc input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border:none;
  border-radius:50%;background:#00d4ff;cursor:pointer;box-shadow:0 0 0 3px #0d0d0d;
}
.wui-doc input[type=range].green::-moz-range-thumb{background:#00ff88;}
.wui-doc input[type=range].yellow::-moz-range-thumb{background:#ffd000;}
.wui-doc input[type=range].orange::-moz-range-thumb{background:#ffb14e;}
/* Die Firmware kennt .cyan nicht als eigene Regel — der Regler traegt dort die
   Vorgabefarbe #00d4ff. Die Klasse steht im HTML des 146 (s_wechsel), also
   steht sie auch hier, damit die Beschriftung stimmt; sie faerbt nichts. */

.wui-doc input[type=text],.wui-doc input[type=password]{
  width:100%;padding:11px 12px;
  background:#1e1e1e;color:#fff;border:1px solid #2a2a2a;border-radius:10px;
  font-size:14px;font-family:inherit;outline:none;
}
.wui-doc input[type=text]:focus,.wui-doc input[type=password]:focus{border-color:#3fc1f3;background:#252525;}
.wui-doc input[type=number]{
  width:100%;padding:11px 12px;background:#1e1e1e;color:#fff;
  border:1px solid #2a2a2a;border-radius:10px;font-size:14px;font-family:inherit;outline:none;
}
.wui-doc input::placeholder{color:#555;}

.wui-doc .tcard{background:#141414;border:1px solid #1e1e1e;border-radius:14px;padding:6px 16px;margin-bottom:12px;}
.wui-doc .trow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #1a1a1a;}
.wui-doc .trow:last-child{border-bottom:none;}
.wui-doc .tname{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wui-doc .mdesc{font-size:11.5px;color:#77808a;padding:0 4px 6px;line-height:1.4;}
.wui-doc .tdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle;}

.wui-doc .switch{position:relative;display:inline-block;width:48px;height:26px;flex-shrink:0;}
.wui-doc .switch input{opacity:0;width:0;height:0;position:absolute;}
.wui-doc .slider{position:absolute;cursor:pointer;inset:0;background:#222;border-radius:26px;transition:.2s;border:1px solid #333;}
.wui-doc .slider:before{position:absolute;content:'';height:20px;width:20px;left:2px;bottom:2px;background:#555;border-radius:50%;transition:.2s;}
.wui-doc input:checked+.slider{background:#1a3a2a;border-color:#00ff88;}
.wui-doc input:checked+.slider:before{transform:translateX(22px);background:#00ff88;}

.wui-doc .saved{
  position:absolute;top:14px;right:14px;background:#1a3a1a;color:#00ff88;
  border:1px solid #1a4a1a;border-radius:20px;padding:4px 12px;font-size:12px;
  opacity:0;transition:opacity .3s;pointer-events:none;z-index:20;
}

.wui-doc a{color:inherit;text-decoration:none;}
.wui-doc .btn{
  display:block;width:100%;padding:14px;border-radius:10px;text-align:center;
  font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;margin-top:10px;
  background:#141414;color:#aaa;border:1px solid #1e1e1e;transition:opacity .15s;
}
.wui-doc .btn:active{opacity:.7;}
.wui-doc .btn-back{background:#161616;color:#888;border:1px solid #262626;}
.wui-doc .btn-save{background:#00c853;color:#04160c;font-weight:800;border-color:#00c853;}
.wui-doc .btn-save:active{background:#00b34a;}
.wui-doc .btn-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;}

.wui-doc .seg{display:flex;gap:6px;}
.wui-doc .seg button{
  flex:1 1 0;min-width:0;padding:9px 2px;font-family:inherit;background:#1a1a1a;color:#888;
  border:1px solid #2a2a2a;border-radius:9px;font-size:12px;font-weight:600;
  cursor:pointer;transition:.15s;white-space:nowrap;
}
.wui-doc .seg button.on{background:#06222b;color:#00d4ff;border-color:#0a5a6a;}

/* Reiterleiste — pd_web_hist.cpp pd_web_hist_tabs(), dort inline gestylt. */
.wui-doc .wui-tabs{display:flex;gap:6px;margin:0 0 14px;}
.wui-doc .wui-tab{
  flex:1 1 0;min-width:0;text-align:center;padding:9px 5px;border-radius:10px;
  font-size:13.5px;font-weight:600;text-decoration:none;font-family:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  color:#888;background:#141414;border:1px solid #1e1e1e;
}
.wui-doc .wui-tab.on{color:#0d0d0d;background:#3fc1f3;border:1px solid #3fc1f3;}

/* ── Startseite — pd_web_live.cpp kopf() ─────────────────────────────────── */

.wui-doc .sub{font-size:11.5px;color:#4a5560;margin-top:2px;}
.wui-doc .egrid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px;}
.wui-doc .etile{
  background:#141414;border:1px solid #1e1e1e;border-radius:12px;
  padding:14px 12px;position:relative;overflow:hidden;
}
.wui-doc .etile-label{
  font-size:10px;text-transform:uppercase;letter-spacing:1px;
  color:#888;margin-bottom:6px;position:relative;z-index:1;
}
.wui-doc .etile-val{
  font-size:22px;font-weight:700;color:#fff;position:relative;z-index:1;letter-spacing:-.5px;
}
.wui-doc .etile-val small{font-size:12px;font-weight:600;color:#77808a;margin-left:4px;letter-spacing:0;}
.wui-doc .etile-val.na{color:#3a3a3a;}
.wui-doc .etile-arr{margin-left:7px;font-size:11px;font-weight:700;letter-spacing:0;}
.wui-doc .etile-mx,.wui-doc .etile-mn{
  position:absolute;right:10px;z-index:1;font-size:9px;
  color:#4a5058;letter-spacing:0;pointer-events:none;
}
.wui-doc .etile-mx{top:8px;}
.wui-doc .etile-mn{bottom:8px;}

.wui-doc .tlbl{font-size:13px;color:#666;}
.wui-doc .tval{font-size:13px;color:#ccc;font-weight:600;}
.wui-doc .ticks{display:flex;justify-content:space-between;margin-top:5px;font-size:10px;color:#4a5058;}

.wui-doc .sptip{
  position:fixed;transform:translate(-50%,-115%);background:#1c1c1c;
  border:1px solid #2e2e2e;border-radius:7px;padding:4px 8px;font-size:12px;
  color:#eee;pointer-events:none;display:none;z-index:9;white-space:nowrap;
}
.wui-doc .spkcur{stroke:#556;stroke-width:1;vector-effect:non-scaling-stroke;}

.wui-doc .tilebg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.wui-doc .bgln{
  fill:none;stroke-width:2;opacity:.24;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round;
}
.wui-doc .bgfl{stroke:none;opacity:.07;}

.wui-doc .scard{background:#141414;border:1px solid #1e1e1e;border-radius:14px;overflow:hidden;margin-bottom:14px;}
.wui-doc .scard-title{
  font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#333;padding:14px 16px 0;
}
.wui-doc summary.scard-title{
  padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;list-style:none;
}
.wui-doc summary.scard-title::-webkit-details-marker{display:none;}
.wui-doc .scard[open] summary.scard-title{padding-bottom:4px;}
.wui-doc .scaret{font-size:11px;color:#444;transition:transform .15s;}
.wui-doc .scard[open] .scaret{transform:rotate(180deg);}
.wui-doc .sdot{
  display:none;width:7px;height:7px;border-radius:50%;margin-left:7px;
  background:#ff4444;box-shadow:0 0 6px #ff444488;vertical-align:middle;
}
.wui-doc .scard .srow{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px;border-bottom:1px solid #191919;margin:0;
}
.wui-doc .scard .srow:last-child{border-bottom:none;}
.wui-doc .skey{color:#555;font-size:13px;display:flex;align-items:center;gap:8px;min-width:0;}
.wui-doc .skey svg{opacity:.35;flex-shrink:0;}
.wui-doc .sv,.wui-doc #wui-syscard .sval{
  color:#ccc;font-weight:600;font-size:13px;text-align:right;
  max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.wui-doc .dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:6px;vertical-align:middle;flex-shrink:0;
}
.wui-doc .dot.green{background:#00ff88;box-shadow:0 0 6px #00ff8866;}
.wui-doc .dot.red{background:#ff4444;box-shadow:0 0 6px #ff444466;}
.wui-doc .dot.grey{background:#444;}

/* Grosse Kachel des 146 — PowerDot_146/wifi.cpp pd146_css() */
.wui-doc .soc-hero{
  background:linear-gradient(135deg,#0a2a1a,#0a1a2a);border:1px solid #1a3a2a;
  border-radius:14px;padding:20px 16px;margin-bottom:12px;text-align:center;
  position:relative;overflow:hidden;
}
.wui-doc .soc-num{font-size:64px;font-weight:800;color:#00ff88;line-height:1;letter-spacing:-2px;}
.wui-doc .soc-label{font-size:12px;color:#2a6a4a;text-transform:uppercase;letter-spacing:2px;margin-top:4px;}
.wui-doc .soc-batt{display:flex;justify-content:center;gap:8px;margin-top:12px;}
.wui-doc .soc-batt span{
  font-size:12px;color:#3a8a5a;background:#0a1f14;padding:3px 9px;border-radius:6px;font-weight:600;
}
.wui-doc .etile-label,.wui-doc .etile-val,.wui-doc .etile-sub,
.wui-doc .soc-num,.wui-doc .soc-label,.wui-doc .soc-batt{position:relative;z-index:1;}
.wui-doc .etile-sub{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;}
.wui-doc .etile-sub span{font-size:11px;color:#555;background:#1a1a1a;padding:2px 6px;border-radius:4px;}
.wui-doc .srow.conn-ok{background:#0a1a0a;}
.wui-doc .srow.conn-err{background:#1a0a0a;}

/* Grosse Kachel des Air — PowerDot_Air/wifi.cpp air_hero(). Das Produkt
   schickt sein CSS im Rumpf mit: pd_web_live hat keinen Haken dafuer. Das
   Wort selbst und die Kurve dahinter bekommen ihre Farbe aus der Guetestufe
   und stehen deshalb im Skript, nicht hier. */
.wui-doc .hero{
  position:relative;overflow:hidden;border-radius:14px;padding:22px 16px;
  margin-bottom:12px;text-align:center;background:#141414;border:1px solid #1e1e1e;
}
.wui-doc .herospark{
  position:absolute;left:0;right:0;bottom:0;width:100%;height:72%;
  opacity:.4;pointer-events:none;
}
.wui-doc .hero-word{
  position:relative;z-index:1;font-size:40px;font-weight:800;line-height:1;color:#555;
}
.wui-doc .hero-label{
  position:relative;z-index:1;display:inline-block;font-size:12px;color:#555;
  text-transform:uppercase;letter-spacing:2px;margin:0 0 6px;
  background:#141414;padding:1px 8px;border-radius:6px;
}
.wui-doc .hero-cfg{
  position:relative;z-index:1;display:inline-block;margin-top:12px;font-size:12px;
  color:#22cbb6;text-decoration:none;background:#141414;border:1px solid #2a4a45;
  border-radius:8px;padding:6px 12px;
}
/* Zwei Chips nebeneinander — im Geraet trennt sie der Zeilenumbruch des
   Quelltextes, hier braucht es eine Luecke. */
.wui-doc .hero-cfg + .hero-cfg{margin-left:8px;}

/* Knopfleiste — pd_web_pages.cpp pd_web_actions() */
.wui-doc .pdact{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
.wui-doc .pdb{
  display:flex;align-items:center;gap:9px;padding:13px 14px;border-radius:12px;
  background:#141414;border:1px solid #212121;color:#9aa4b2;text-decoration:none;
  font-size:14px;font-weight:600;line-height:1.2;font-family:inherit;cursor:pointer;text-align:left;
}
.wui-doc .pdb:active{background:#1a1a1a;}
.wui-doc .pdw{grid-column:1/-1;}
.wui-doc .pdd{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* ── Erweiterte Ansicht — pd_web_hist.cpp handle_desktop_page() ──────────── */

.wui-doc .wui-breit header{padding:12px 0 14px;}
.wui-doc .wui-breit header h1{color:#3fc1f3;}
.wui-doc .rc{background:#141414;border:1px solid #1e1e1e;border-radius:12px;padding:14px 14px;margin-bottom:8px;}
.wui-doc .rr{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;}
.wui-doc .fld{display:flex;flex-direction:column;gap:4px;}
.wui-doc .fld label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#666;}
.wui-doc input[type=datetime-local]{
  background:#1a1a1a;color:#eee;border:1px solid #2a2a2a;border-radius:8px;
  padding:8px;font-size:13px;font-family:inherit;
}
.wui-doc .go{
  background:#3fc1f3;color:#0d0d0d;border:none;border-radius:8px;padding:9px 16px;
  font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;
}
.wui-doc .pre{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.wui-doc .prel{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#666;margin-top:12px;}
.wui-doc .pb{
  background:#1a1a1a;color:#9aa4b2;border:1px solid #2a2a2a;border-radius:8px;
  padding:6px 11px;font-size:12px;cursor:pointer;font-family:inherit;
}
.wui-doc .pb.on{background:#3fc1f3;color:#0d0d0d;border-color:#3fc1f3;font-weight:700;}
.wui-doc .ri{font-size:11px;color:#777;margin:10px 2px 14px;}
.wui-doc .dc{background:#141414;border:1px solid #1e1e1e;border-radius:12px;padding:12px 14px;margin-bottom:10px;}
.wui-doc .dch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.wui-doc .dt{font-size:13px;font-weight:700;color:#ccc;}
.wui-doc .dt small{color:#666;font-weight:400;margin-left:5px;}
.wui-doc .dv{font-size:15px;font-weight:700;color:#888;}
.wui-doc .dg{position:relative;}
.wui-doc .dg svg{width:100%;height:96px;display:block;overflow:visible;touch-action:none;}
.wui-doc .ymx,.wui-doc .ymn{
  position:absolute;right:3px;font-size:10px;color:#6a7480;
  background:rgba(20,20,20,.85);padding:0 3px;border-radius:3px;pointer-events:none;
}
.wui-doc .ymx{top:-2px;}
.wui-doc .ymn{bottom:-2px;}
.wui-doc .dgx{
  position:relative;height:15px;margin-top:3px;font-size:10px;line-height:1;
  color:#7f8996;pointer-events:none;
}
.wui-doc .dgx i{position:absolute;top:-3px;width:1px;height:4px;background:#333;}
.wui-doc .dgx span{position:absolute;top:4px;white-space:nowrap;transform:translateX(-50%);}
.wui-doc .dgx span.f{transform:none;left:0;}
.wui-doc .dgx span.l{transform:translateX(-100%);}
.wui-doc .dgx span.d{color:#c9d3df;font-weight:700;}
.wui-doc .dcur{stroke:#9aa4b2;stroke-width:1;}
.wui-doc .dval{
  position:absolute;background:#000;border:1px solid #333;border-radius:5px;
  padding:1px 6px;font-size:11px;font-weight:700;color:#eee;white-space:nowrap;
  pointer-events:none;display:none;z-index:5;transform:translate(-50%,-135%);
}
.wui-doc .wui-breit .btn{
  padding:12px;font-size:14px;font-weight:600;color:#9aa4b2;
  background:#141414;border:1px solid #212121;margin-top:12px;
}
/* Die Erweiterte Ansicht bringt ihre EIGENE Ablesehilfe mit (pd_web_hist.cpp
   Z. 227) — dunkler, kleiner, fett und weiter oben als die der Startseite
   (pd_web_live.cpp Z. 79). Zwei Regeln, zwei Seiten. */
.wui-doc .wui-breit .sptip{
  transform:translate(-50%,-135%);background:#000;border:1px solid #333;
  border-radius:6px;padding:3px 7px;font-size:11px;font-weight:600;z-index:60;
}

/* ── Einstellungen, Reiter "Anzeige" — PowerDot_146/wifi.cpp settings_css() ─ */
/* Die drei Knoepfe der Seitenliste (Startseite, Web, Verlaufs-Graph) und der
   Griff zum Verschieben. Im Geraet sind es <span>, hier <button> — sonst waeren
   sie mit der Tastatur nicht erreichbar. Aussehen unveraendert. */

.wui-doc .wbtn,.wui-doc .gbtn,.wui-doc .hbtn{
  cursor:pointer;margin-right:6px;display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;min-height:34px;padding:6px 7px;border-radius:9px;
  background:#242424;border:1px solid #3a3a3a;color:#8a8a8a;
  user-select:none;line-height:0;transition:.15s;flex:none;
}
.wui-doc .wbtn.on{background:#06222b;color:#33bbff;border-color:#164055;}
.wui-doc .hbtn.on{background:#2a2408;color:#ffc400;border-color:#5a4a10;}
/* Der Graph-Knopf traegt aktiv die Farbe SEINER Seite (paintG in wifi.cpp:
   Grund c+'22', Rand und Schrift c). Deshalb steht er im Skript, nicht hier. */
.wui-doc .drag{
  cursor:grab;color:#555;font-size:19px;padding:0 8px 0 0;
  user-select:none;flex-shrink:0;align-self:stretch;display:flex;align-items:center;
}

/* ── Zusatz: sichtbarer Tastaturfokus ────────────────────────────────────── */
/* Die Firmware braucht ihn nicht (Fingerbedienung), diese Seite schon. */
.wui-doc a:focus-visible,
.wui-doc button:focus-visible,
.wui-doc summary:focus-visible,
.wui-doc input:focus-visible,
.wui-doc .switch input:focus-visible+.slider{
  outline:2px solid #3fc1f3;outline-offset:2px;
}

/* ── Ruhige Darstellung ──────────────────────────────────────────────────── */
/* Ohne Bewegung: keine Uebergaenge. Dass die Werte stehenbleiben, entscheidet
   das Skript, nicht diese Datei. */
@media (prefers-reduced-motion:reduce){
  .wui-doc *,.webui *{transition:none !important;animation:none !important;}
}