/* Overgenomen uit het instelscherm op het blokje (firmware/src/webui.h), zodat
   het klantdashboard er hetzelfde uitziet als slimblokje.local. Wat alleen de
   website nodig heeft staat onderaan. */
:root{
  --page:#070a12;--blob-1:#14b37c;--blob-2:#2b5ede;--blob-3:#7a35c9;--blob-alpha:.5;
  --glass:rgba(255,255,255,.07);--glass-strong:rgba(255,255,255,.105);
  --glass-line:rgba(255,255,255,.11);--glass-line-strong:rgba(255,255,255,.2);
  --glass-highlight:rgba(255,255,255,.14);
  --shadow:0 1px 2px rgb(0 0 0/.3),0 24px 48px -24px rgb(0 0 0/.7);
  --text:#f2f5fb;--text-mid:#b9c3d6;--text-dim:#8592a8;
  --green:#37d693;--yellow:#ffc75a;--red:#ff6b78;--blue:#6aa6ff;
  --tint-green:rgba(55,214,147,.13);--tint-yellow:rgba(255,199,90,.13);--tint-red:rgba(255,107,120,.13);
  --grid:rgba(255,255,255,.07);
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root{
  color-scheme:light;
  --page:#eef1f8;--blob-1:#7fd9b8;--blob-2:#a5c0f8;--blob-3:#d3b6f3;--blob-alpha:.85;
  --glass:rgba(255,255,255,.55);--glass-strong:rgba(255,255,255,.72);
  --glass-line:rgba(255,255,255,.7);--glass-line-strong:rgba(16,22,37,.14);
  --glass-highlight:rgba(255,255,255,.9);
  --shadow:0 1px 2px rgb(16 22 37/.05),0 22px 44px -26px rgb(16 22 37/.35);
  --text:#101625;--text-mid:#3f4c66;--text-dim:#6b7893;
  --green:#0f9663;--yellow:#a9700a;--red:#d23b4a;
  --grid:rgba(16,22,37,.08);
}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--page);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:-20vh -10vw;z-index:-1;pointer-events:none;
  opacity:var(--blob-alpha);filter:blur(40px) saturate(120%);
  background:radial-gradient(46vw 42vw at 12% 10%,var(--blob-1) 0,transparent 58%),
    radial-gradient(50vw 46vw at 82% 22%,var(--blob-2) 0,transparent 60%),
    radial-gradient(54vw 48vw at 46% 96%,var(--blob-3) 0,transparent 62%)}
h1,h2{margin:0;font-weight:620;letter-spacing:-.022em}
dl{margin:0}
.mono{font-family:var(--mono);font-size:12.5px}
code{font-family:var(--mono);font-size:.92em;padding:2px 6px;border-radius:6px;
  background:var(--glass-strong);border:1px solid var(--glass-line)}
.topbar{position:sticky;top:0;z-index:9;display:flex;align-items:center;gap:16px;
  padding:13px clamp(16px,4vw,32px);background:var(--glass);
  border-bottom:1px solid var(--glass-line);backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);box-shadow:inset 0 1px 0 var(--glass-highlight)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:660;font-size:16px;letter-spacing:-.024em}
.brand svg{width:27px;height:27px}
.brand small{font-weight:500;color:var(--text-dim);font-size:12.5px;letter-spacing:0;
  border-left:1px solid var(--glass-line-strong);padding-left:10px}
.topbar nav{margin-left:auto;display:flex;gap:8px}
main{max-width:940px;margin:0 auto;padding:clamp(16px,3vw,26px) clamp(16px,4vw,32px) 50px;
  display:grid;gap:16px}
.card,.hero{background:var(--glass);border:1px solid var(--glass-line);border-radius:18px;
  box-shadow:var(--shadow),inset 0 1px 0 var(--glass-highlight);padding:clamp(18px,2vw,24px);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}
.card>header{display:flex;align-items:center;gap:12px;margin:0 0 16px;flex-wrap:wrap}
.card h2{font-size:15px}
.spacer{margin-left:auto;color:var(--text-dim);font-size:13px}
.eyebrow{margin:0 0 8px;font-size:11px;font-weight:650;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim)}
.hero{position:relative;overflow:hidden;display:grid;gap:22px;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);border-radius:24px}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 0 0,var(--hero-tint,transparent) 0,transparent 68%)}
.hero>*{position:relative;min-width:0}
.hero[data-color=green]{--hero-color:var(--green);--hero-tint:var(--tint-green)}
.hero[data-color=yellow]{--hero-color:var(--yellow);--hero-tint:var(--tint-yellow)}
.hero[data-color=red]{--hero-color:var(--red);--hero-tint:var(--tint-red)}
.verdict{display:flex;align-items:flex-start;gap:14px;font-size:clamp(22px,3.4vw,31px);
  line-height:1.12;letter-spacing:-.03em;color:var(--hero-color,var(--text))}
.verdict .dot{margin-top:.45em}
.dot{width:13px;height:13px;border-radius:50%;flex:none;background:var(--hero-color,var(--text-dim));
  box-shadow:0 0 0 6px color-mix(in oklab,var(--hero-color,var(--text-dim)) 18%,transparent),
    0 0 22px 2px color-mix(in oklab,var(--hero-color,var(--text-dim)) 55%,transparent)}
.hero .reason{margin:12px 0 0;color:var(--text-mid);font-size:14px;max-width:44ch}
.hero .note{margin:10px 0 0;font-size:13px;color:var(--hero-color,var(--text-dim))}
.hero .coming{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:13px;color:var(--text-mid)}
.coming i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;
  animation:soft 9s ease-in-out infinite}
@keyframes soft{0%,100%{opacity:.15}50%{opacity:.9}}
.pair-intro{margin:0 0 14px;color:var(--text-mid);font-size:13.5px}
.pair-code{font-family:var(--mono);font-size:clamp(26px,7vw,34px);font-weight:700;letter-spacing:.14em;
  text-align:center;padding:16px 10px;margin-bottom:14px;border-radius:14px;user-select:all;
  background:var(--glass-strong);border:1px dashed var(--glass-line-strong)}
.pair-done{margin:0;color:var(--text-mid);font-size:13.5px}
a.btn-primary{text-decoration:none}
.price-panel{display:flex;flex-direction:column;justify-content:center;gap:14px}
.price-now{font-size:clamp(26px,4.4vw,36px);font-weight:640;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.price-now span{font-size:15px;font-weight:500;color:var(--text-dim);letter-spacing:0}
.price-now sup{font-size:.5em;font-weight:600;color:var(--text-dim);margin-left:1px}
.price-sub{display:flex;align-items:center;gap:8px;margin-top:-6px;font-size:12.5px;
  color:var(--text-dim);font-variant-numeric:tabular-nums}
/* Het informatiebolletje achter de prijs: klein, maar wel aanklikbaar groot
   genoeg voor een duim. */
.bubble{flex:none;width:19px;height:19px;padding:0;border-radius:50%;cursor:pointer;
  background:var(--glass-strong);border:1px solid var(--glass-line-strong);
  color:var(--text-mid);font:inherit;font-size:11.5px;font-weight:700;line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.bubble:hover{color:var(--text);border-color:var(--text-dim)}
.note-box{margin:0;padding:11px 13px;border-radius:12px;font-size:12.5px;line-height:1.5;
  color:var(--text-mid);background:var(--glass-strong);border:1px solid var(--glass-line)}
.note-box b{color:var(--text)}
.disclaimer{margin:0;font-size:12px;line-height:1.5;color:var(--text-dim)}
.disclaimer b{color:var(--text-mid);font-weight:620}
.pins{display:flex;flex-direction:column;gap:7px}
.pin{display:flex;align-items:center;gap:10px;padding:8px 13px;border-radius:12px;
  background:var(--glass-strong);border:1px solid var(--glass-line);font-size:13px;
  color:var(--text-dim);transition:all .25s var(--ease)}
.pin b{font-size:12.5px;color:var(--text-mid);font-weight:600}
.pin::after{content:"";width:9px;height:9px;border-radius:50%;margin-left:auto;
  background:var(--glass-line-strong)}
.pin[data-on=true]{color:var(--text);border-color:color-mix(in oklab,var(--c) 45%,transparent);
  background:color-mix(in oklab,var(--c) 13%,transparent)}
.pin[data-on=true]::after{background:var(--c);box-shadow:0 0 10px 1px var(--c)}
.pin[data-pin=green]{--c:var(--green)}
.pin[data-pin=yellow]{--c:var(--yellow)}
.pin[data-pin=red]{--c:var(--red)}
.stat{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0}
.stat+.stat{border-top:1px solid var(--grid)}
.stat dt{color:var(--text-dim);font-size:13px}
.stat dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  cursor:pointer;background:var(--glass-strong);border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-highlight);color:var(--text-mid);font:inherit;
  font-size:13px;font-weight:560;transition:all .18s var(--ease)}
.btn:hover{color:var(--text);border-color:var(--glass-line-strong);transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:progress;transform:none}
.btn.danger{color:var(--red);border-color:color-mix(in oklab,var(--red) 35%,transparent)}
.btn-primary{width:100%;justify-content:center;padding:12px 18px;border-radius:12px;
  background:var(--text);color:var(--page);border-color:transparent;font-size:14.5px;font-weight:650}
.btn-primary:hover{color:var(--page);opacity:.92}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hint{font-size:12px;color:var(--text-dim);margin-top:5px}
.row .hint{margin:0}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--text-mid);margin-bottom:6px}
.field input,.field select{width:100%;padding:11px 13px;border-radius:12px;color:var(--text);
  font:inherit;font-size:14.5px;background:var(--glass-strong);border:1px solid var(--glass-line-strong)}
.field input:focus,.field select:focus,input:focus-visible{outline:2px solid var(--blue);
  outline-offset:1px;border-color:transparent}
.two{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.switch{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--grid);
  cursor:pointer;font-size:13.5px}
.switch input{margin-top:3px;accent-color:var(--green);width:17px;height:17px;flex:none}
.switch b{display:block;font-weight:600}
.switch small{color:var(--text-dim);font-size:12.5px}

/* -- keuzekaarten: minder technisch dan een keuzelijst, en je ziet meteen wat
      het verschil is -------------------------------------------------------- */
.choices{display:grid;gap:9px;margin-bottom:4px}
.choice{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-radius:14px;
  background:var(--glass-strong);border:1px solid var(--glass-line);cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.choice:hover{border-color:var(--glass-line-strong)}
.choice input{margin-top:2px;accent-color:var(--green);width:17px;height:17px;flex:none}
.choice b{display:block;font-weight:620;font-size:14px}
.choice small{color:var(--text-dim);font-size:12.5px;display:block;margin-top:2px}
.choice:has(input:checked){border-color:color-mix(in oklab,var(--green) 55%,transparent);
  background:var(--tint-green)}
.inset{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px;
  color:var(--text-mid);padding:2px 0 12px 29px}
.inset label{font-size:13.5px;font-weight:500;color:var(--text-mid);margin:0}
.inset input[type=number]{width:5.5em;padding:8px 10px;border-radius:10px;color:var(--text);
  font:inherit;background:var(--glass-strong);border:1px solid var(--glass-line-strong)}
.inset select{padding:8px 10px;border-radius:10px;color:var(--text);font:inherit;
  background:var(--glass-strong);border:1px solid var(--glass-line-strong)}
.field.slider{border-top:1px solid var(--grid);padding-top:16px;margin-top:4px}
.slider-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:11px}
.slider-head label{margin:0}
.slider-head output{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
.field.slider input[type=range]{display:block;width:100%;padding:0;margin:0;
  accent-color:var(--green);background:none;border:0}

/* -- grafiek -------------------------------------------------------------- */
.seg{margin-left:auto;display:inline-flex;padding:3px;gap:3px;border-radius:999px;
  background:var(--glass-strong);border:1px solid var(--glass-line)}
.seg button{padding:6px 13px;border-radius:999px;border:0;background:none;cursor:pointer;
  color:var(--text-dim);font:inherit;font-size:12.5px;font-weight:560;
  transition:background .18s var(--ease),color .18s var(--ease)}
.seg button.on{background:var(--glass-line-strong);color:var(--text)}
.strip-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.strip-head b{font-size:15px;font-variant-numeric:tabular-nums}
.strip-head span{color:var(--text-dim);font-size:13.5px;font-variant-numeric:tabular-nums}
.strip-head .hint{margin:0;margin-left:auto}
.strip-wrap{margin-bottom:6px}
#strip{width:100%;height:34px;display:block;overflow:visible}
.axis{display:flex;justify-content:space-between;margin-top:7px;font-size:11.5px;
  color:var(--text-dim);font-variant-numeric:tabular-nums}
#bars-wrap{margin-top:16px;position:relative}
/* Vaste hoogte in plaats van meeschalen met de breedte: anders is de grafiek
   op een telefoon nog maar een centimeter hoog. De staven rekken daardoor
   verticaal mee, wat voor rechthoeken niet uitmaakt; de lijnen houden hun
   dikte via vector-effect. */
#bars{width:100%;height:124px;display:block}
/* Het aantal cent bij de hulplijnen, als HTML erboven: tekst in de SVG zou
   meerekken met de staven. Hoogte gelijk aan #bars. */
.bars-grid{position:absolute;left:0;right:0;top:0;height:124px;pointer-events:none;z-index:1}
.bars-grid span{position:absolute;left:0;transform:translateY(-50%);padding:0 5px;border-radius:5px;
  font-size:10.5px;line-height:15px;color:var(--text-dim);background:var(--page);
  font-variant-numeric:tabular-nums}
/* Het goedkoopste (en duurste) uur van vandaag in cijfers erbij: de grafiek
   laat het zien, maar wie er even langsloopt wil gewoon een tijdstip lezen. */
.facts{display:grid;gap:9px;grid-template-columns:1fr 1fr;margin-bottom:16px}
.fact{padding:10px 13px;border-radius:12px;background:var(--glass-strong);
  border:1px solid var(--glass-line)}
.fact span{display:block;font-size:11.5px;color:var(--text-dim)}
.fact b{display:block;margin-top:2px;font-size:14px;font-variant-numeric:tabular-nums}
.fact small{font-weight:500;color:var(--text-dim)}
.bars-foot{display:flex;justify-content:flex-end;font-size:11.5px;color:var(--text-dim);
  font-variant-numeric:tabular-nums;margin-top:4px}
.legend{display:flex;gap:15px;flex-wrap:wrap;font-size:12.5px;color:var(--text-dim);margin-top:14px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .push{margin-left:auto}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.legend i.g{background:var(--green)}
.legend i.y{background:var(--yellow)}
.legend i.r{background:var(--red)}

/* -- eerst verbinden, dan de rest ----------------------------------------- */
.setup-intro{margin-bottom:16px;padding:14px 16px;border-radius:14px;
  background:var(--tint-yellow);border:1px solid color-mix(in oklab,var(--yellow) 32%,transparent)}
.setup-intro p{margin:0 0 8px}
.setup-intro .steps{margin:0;padding-left:20px;font-size:13.5px;color:var(--text-mid)}
.setup-intro .steps li{margin:3px 0}
.lamp-legend{margin:12px 0 0!important;font-size:13px;color:var(--text-mid);line-height:1.9}
.lamp{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}
.lamp.r{background:var(--red);box-shadow:0 0 9px 1px var(--red)}
.lamp.g{background:var(--green);box-shadow:0 0 9px 1px var(--green)}
/* Zonder netwerk blijft alleen de wifi-kaart staan; de rest gaat over prijzen
   die er dan toch niet zijn. De tabbalk en meldingen blijven wel. */
body[data-view=setup] main>:not(#wifi-card):not(#toast):not(#tabs){display:none}

.networks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;
  max-height:230px;overflow-y:auto}
.networks li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;
  background:var(--glass-strong);border:1px solid var(--glass-line);cursor:pointer;font-size:13.5px;
  transition:border-color .15s}
.networks li:hover{border-color:var(--glass-line-strong)}
.networks li .lock{color:var(--text-dim);font-size:12px}
.networks li .sig{margin-left:auto;display:flex;align-items:flex-end;gap:2px;height:13px}
.networks li .sig i{width:3px;border-radius:1px;background:var(--glass-line-strong)}
.networks li .sig i.on{background:var(--green)}

.tabs{display:flex;gap:6px;flex-wrap:wrap;padding:5px;border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-highlight);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
  text-decoration:none;color:var(--text-dim);font-size:13.5px;font-weight:560;
  transition:background .18s var(--ease),color .18s var(--ease)}
.tabs a:hover{color:var(--text);background:var(--glass-strong)}
.tabs a[aria-current=page]{color:var(--text);background:var(--glass-line-strong)}
.tabs a small{color:var(--text-dim);font-size:11.5px;font-weight:500}
.tabs a[aria-current=page] small{color:var(--text-mid)}
.toast{padding:12px 15px;border-radius:12px;font-size:13.5px;background:var(--glass-strong);
  border:1px solid var(--glass-line)}
.toast[data-kind=ok]{color:var(--green);background:var(--tint-green);
  border-color:color-mix(in oklab,var(--green) 38%,transparent)}
.toast[data-kind=fout]{color:var(--red);background:var(--tint-red);
  border-color:color-mix(in oklab,var(--red) 38%,transparent)}
footer.page{color:var(--text-dim);font-size:12.5px;padding:4px 2px}
[hidden]{display:none!important}
@media (max-width:700px){.hero{grid-template-columns:1fr}.two{grid-template-columns:1fr}
  .card>header .seg{margin-left:0;width:100%}.seg button{flex:1}
  .legend .push{margin-left:0;width:100%}
  .strip-head .hint{margin-left:0;width:100%}}
@media (max-width:700px){.facts{grid-template-columns:1fr}}
@media (max-width:560px){
  main{padding-left:14px;padding-right:14px;gap:13px}
  .topbar{padding:11px 14px;gap:10px}
  .topbar nav{gap:6px}
  /* Liever een kortere merknaam dan knoppen die op een tweede regel vallen. */
  .brand{min-width:0;font-size:15px}
  .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .btn{padding:8px 12px;font-size:12.5px;white-space:nowrap}
  .card,.hero{padding:16px;border-radius:16px}
  #bars,.bars-grid{height:108px}
  .inset{padding-left:0}
  .choice{padding:12px 13px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important}}

/* ------------------------------------------------------------------------ */
/* Alleen op de website: navigatie, inloggen, de lijst blokjes.             */
/* ------------------------------------------------------------------------ */
a{color:inherit}
.topbar .brand{text-decoration:none;color:var(--text)}
.topbar nav{align-items:center}
.topbar nav form{margin:0}
a.btn{text-decoration:none}
.btn[aria-current=page]{color:var(--text);border-color:var(--glass-line-strong)}
.btn-secondary{width:auto}
.page-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:4px 2px 0}
.page-head h1{font-size:clamp(22px,3.4vw,28px)}
.page-head p{margin:4px 0 0;color:var(--text-dim);font-size:13.5px}
.page-head .push{margin-left:auto}
.back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-dim);text-decoration:none}
.back:hover{color:var(--text)}

/* -- inloggen en registreren ---------------------------------------------- */
.auth{max-width:440px;width:100%;margin:clamp(20px,6vh,60px) auto 0}
.auth h1{font-size:22px;margin-bottom:6px}
.auth .sub{margin:0 0 20px;color:var(--text-mid);font-size:13.5px}
.auth .links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;font-size:13px}
.auth .links a{color:var(--text-mid)}
.check{display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--text-mid);margin:2px 0 16px}
.check input{accent-color:var(--green);width:16px;height:16px}
.field-error{display:block;margin-top:6px;font-size:12.5px;color:var(--red)}
.field input[aria-invalid=true]{border-color:color-mix(in oklab,var(--red) 60%,transparent)}
.alert{padding:12px 15px;border-radius:12px;font-size:13.5px;background:var(--glass-strong);
  border:1px solid var(--glass-line)}
.alert.ok{color:var(--green);background:var(--tint-green);border-color:color-mix(in oklab,var(--green) 38%,transparent)}
.alert.bad{color:var(--red);background:var(--tint-red);border-color:color-mix(in oklab,var(--red) 38%,transparent)}

/* -- de lijst blokjes ------------------------------------------------------ */
.devices{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.device{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--text);
  transition:border-color .18s var(--ease),transform .18s var(--ease)}
.device:hover{border-color:var(--glass-line-strong);transform:translateY(-1px)}
.device .top{display:flex;align-items:center;gap:12px}
.device .top h2{font-size:16px}
.device .top small{display:block;color:var(--text-dim);font-size:12px;margin-top:2px;font-family:var(--mono)}
.device .lampjes{display:flex;gap:6px;margin-left:auto}
.device .lampjes i{width:12px;height:12px;border-radius:50%;background:var(--glass-line-strong)}
.device .lampjes i.on.g{background:var(--green);box-shadow:0 0 10px 1px var(--green)}
.device .lampjes i.on.y{background:var(--yellow);box-shadow:0 0 10px 1px var(--yellow)}
.device .lampjes i.on.r{background:var(--red);box-shadow:0 0 10px 1px var(--red)}
.device .meta{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--text-dim)}
.state{display:inline-flex;align-items:center;gap:6px}
.state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-dim)}
.state.online::before{background:var(--green)}
.state.offline::before{background:var(--red)}
.empty{text-align:center;padding:30px 18px}
.empty p{color:var(--text-mid);max-width:46ch;margin:8px auto 18px}
.pair-form .field{margin:0}
/* Een veld met de knop ernaast: het label staat boven de rij, zodat de knop
   precies even hoog is als het veld en een foutmelding eronder niets verschuift.
   Op een smal scherm komt de knop onder het veld, over de volle breedte. */
.field-row{display:flex;gap:10px;align-items:stretch}
.field-row input{flex:1;min-width:0}
.field-row .btn{flex:none;width:auto;justify-content:center;border-radius:12px;padding:0 22px;margin:0}
.field input.code{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;font-size:17px}
@media (max-width:480px){.field-row{flex-direction:column}.field-row .btn{padding:12px 22px}}
.how{margin:14px 0 0;padding-left:20px;font-size:13px;color:var(--text-mid)}
.how li{margin:3px 0}
.danger-zone{border-color:color-mix(in oklab,var(--red) 30%,transparent)}
.inline-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.muted{color:var(--text-dim)}

/* -- Apparaten ------------------------------------------------------------ */
.appliance>header{margin-bottom:10px}
.appliance-icon{font-size:26px;line-height:1;width:44px;height:44px;display:grid;place-items:center;flex:none;
  border-radius:14px;background:var(--glass-strong);border:1px solid var(--glass-line)}
.card>header small{display:block;font-size:12.5px;margin-top:2px}
.spacer-btn{margin-left:auto}
.plan-text{margin:0 0 10px;font-size:15.5px;font-weight:560;letter-spacing:-.01em}
.plan-blocks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.plan-blocks li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:9px 12px;border-radius:12px;
  background:var(--glass);border:1px solid var(--glass-line);font-size:13.5px;color:var(--text-mid)}
.plan-blocks li.first{background:var(--tint-green);border-color:transparent}
.plan-blocks li b{color:var(--text);font-weight:620}
.plan-blocks li.draft{opacity:.75}
.plan-blocks .saving{color:var(--green);font-weight:600}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.preset{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;border-radius:14px;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:560;color:var(--text);background:var(--glass);border:1px solid var(--glass-line);
  transition:background .15s var(--ease),border-color .15s var(--ease)}
.preset:hover{background:var(--glass-strong);border-color:var(--glass-line-strong)}
.preset span{font-size:26px;line-height:1}
.field-row.duration{align-items:center}
.field-row.duration input{flex:none;width:5.5em}
.field-row.duration span{color:var(--text-mid);font-size:13.5px}
.inline-actions .push{margin-left:auto}
.hc{margin-top:12px;padding:12px 14px;border-radius:14px;border:1px dashed var(--glass-line-strong);display:grid;gap:10px}
.hc-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;font-weight:620}
.hc-head .link-btn{margin-left:auto}
.hc p{margin:0;font-size:13.5px;color:var(--text-mid)}
.hc p.hc-plan{color:var(--text);font-weight:560}
.hc .alert{margin:0}
.hc ol{margin:0;padding-left:20px;font-size:13px;color:var(--text-mid)}
.experimental{font-size:10.5px;font-weight:680;text-transform:uppercase;letter-spacing:.07em;padding:2px 8px;border-radius:999px;
  color:var(--yellow);background:var(--tint-yellow)}
.link-btn{font:inherit;font-size:12.5px;color:var(--text-dim);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.link-btn:hover{color:var(--text)}

/* -- Lopende tekst (privacy) ---------------------------------------------- */
.prose h1{font-size:24px;margin-bottom:4px}
.prose h2{font-size:16px;margin:22px 0 6px}
.prose p,.prose li{color:var(--text-mid)}
.prose ul{padding-left:20px;margin:0}
.prose li+li{margin-top:6px}
.prose a{color:var(--blue)}

/* -- Dashboard: wisselen tussen blokjes ------------------------------------ */
.switcher{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.switcher .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:13.5px;
  font-weight:540;color:var(--text-mid);text-decoration:none;background:var(--glass);border:1px solid var(--glass-line)}
.switcher .pill:hover{color:var(--text);border-color:var(--glass-line-strong)}
.switcher .pill[aria-current=page]{color:var(--text);font-weight:620;background:var(--glass-strong);border-color:var(--glass-line-strong)}
.switcher .pill i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.switcher .push{margin-left:auto}

/* -- Inklapbaar blok (instellingen) --------------------------------------- */
[x-cloak]{display:none!important}
.fold-head{display:flex;align-items:center;gap:12px;width:100%;padding:0;margin:0;border:0;background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer}
.fold-head>span{flex:1;min-width:0}
.fold-title{display:block;font-size:15px;font-weight:620;letter-spacing:-.022em}
.fold-head small{display:block;margin-top:3px;font-size:13px;color:var(--text-dim)}
.fold-head svg{flex:none;color:var(--text-mid);transition:transform .2s var(--ease)}
.fold.open .fold-head svg{transform:rotate(180deg)}
.fold.open form{margin-top:16px}
.fold-sub{margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--text-mid)}

/* -- Webshop (/bestellen) --------------------------------------------------- */
.shop{width:100%;max-width:960px;margin:clamp(12px,4vh,40px) auto 0}
.shop-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:820px){.shop-grid{grid-template-columns:1fr}}
.shop h1{font-size:22px;margin-bottom:6px}
.shop .sub{margin:0 0 18px;font-size:13.5px}
.shop-h{font-size:14px;margin:20px 0 12px}
.shop-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px}
.shop-row .field{margin-bottom:14px}
.shop-fine{font-size:12.5px;margin:8px 0 0}
.shop-fine a{color:var(--text-mid)}
.shop-summary{position:sticky;top:16px}
.shop-summary dl{margin:0 0 4px;display:grid;gap:8px;font-size:14px}
.shop-summary dl div{display:flex;justify-content:space-between;gap:12px}
.shop-summary dt{color:var(--text-mid)}
.shop-summary dd{margin:0;font-variant-numeric:tabular-nums}
.shop-summary .total{border-top:1px solid var(--glass-line);padding-top:10px;font-weight:650;font-size:16px}
.shop-summary .total dt{color:var(--text)}
.shop-summary .btn-primary{margin-top:14px}

/* Keuzelijsten: de uitklaplijst zelf kleurt anders niet mee (wit vlak met lichte tekst in donker). */
select option,select optgroup{background-color:var(--page);color:var(--text)}
.shop-lookup{margin:-4px 0 14px}
/* -- Bestellingen ------------------------------------------------------------ */
.order-status{margin-left:auto;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;color:var(--yellow);background:var(--tint-yellow)}
.order-status-shipped{color:var(--green);background:var(--tint-green)}
.order-status-cancelled{color:var(--red);background:var(--tint-red)}