:root{
  --bg:#0F1420; --card:#182032; --card2:#222B3F; --seg:#11182A; --segon:#2A3550;
  --music:#1C2A4A; --music2:#2E4170;
  --text:#F2F4F8; --text2:#C9CFDB; --muted:#8E97AA; --muted2:#A3ABBC; --dim:#3A4560;
  --amber:#F5B455; --amberink:#2A1D06;
  --zon:#F5C04A; --net:#7FA6F0; --wp:#E08A3C; --rest:#8B95AE; --cool:#6FC3E0;
  --green:#5BC48A; --red:#FF5A5F; --blue:#8FB0FF;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;padding:0}
button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
a{color:inherit;text-decoration:none}
svg{display:block}
.hidden{display:none!important}

/* ---------- page ---------- */
.page{max-width:430px;margin:0 auto;padding:calc(var(--safe-t) + 14px) 16px calc(var(--safe-b) + 20px);display:flex;flex-direction:column;gap:12px;min-height:100vh}
.top{display:flex;justify-content:space-between;align-items:center;min-height:28px;padding:0 4px}
.top .date{font-size:15px;font-weight:600;text-align:left}
.top .right{display:flex;align-items:center;gap:10px}
.wx{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--text2)}
.pill{display:flex;align-items:center;gap:4px;background:#1F2940;color:#E8D9B5;border-radius:999px;padding:5px 10px 5px 8px;font-size:13px;font-weight:600}
.badge{font-size:11px;font-weight:600;letter-spacing:.05em;color:#9FB4E8;background:var(--music);border-radius:999px;padding:5px 10px}
.back{display:flex;align-items:center;gap:4px;color:var(--text2);font-size:15px;font-weight:500}
.card{background:var(--card);border-radius:24px}
.label{font-size:13px;color:var(--muted);font-weight:600}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--seg);border-radius:12px;padding:3px}
.seg button{border-radius:10px;padding:7px 0;font-size:13px;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--segon);color:var(--text)}
.seg.small{display:flex;gap:2px;border-radius:10px;padding:2px}
.seg.small button{border-radius:8px;padding:5px 12px;font-size:12px}
.offline{font-size:12px;color:#F3A6A8;text-align:center;padding:2px 0}

/* ---------- licht ---------- */
.licht{padding:12px;display:flex;flex-direction:column;gap:12px}
.lamps{display:flex;justify-content:center;align-items:flex-end;gap:22px}
.lampwrap{display:flex;flex-direction:column;align-items:center;gap:7px;width:64px}
.lamp{width:54px;height:92px;border-radius:27px;background:var(--card2);position:relative;overflow:hidden;touch-action:none;display:block}
.lamp.lit{box-shadow:0 0 20px rgba(245,180,85,.18)}
.lamp .fill{position:absolute;left:0;right:0;bottom:0;background:var(--amber);transition:height .35s ease}
.lamp.dragging .fill{transition:none}
.lamp.na{opacity:.4}
.lampname{font-size:12px;color:var(--muted2);font-weight:500}
.scenes{display:flex;gap:6px}
.scenes button{flex:1;border-radius:12px;background:#252E44;padding:10px 0;font-size:13px;font-weight:600}
.scenes button.on{background:var(--amber);color:var(--amberink)}
.extra{display:flex;justify-content:space-around;padding-top:12px;border-top:1px solid var(--card2)}
.xbtn{display:flex;flex-direction:column;align-items:center;gap:5px;width:58px}
.xbtn .bulb{width:40px;height:40px;border-radius:20px;background:var(--card2);display:flex;align-items:center;justify-content:center;transition:background .2s,box-shadow .2s}
.xbtn .bulb svg{stroke:var(--muted)}
.xbtn.on .bulb{background:var(--amber);box-shadow:0 0 16px rgba(245,180,85,.35)}
.xbtn.on .bulb svg{stroke:var(--amberink)}
.xbtn.na{opacity:.4;pointer-events:none}
.xbtn span{font-size:11px;color:var(--muted2);white-space:nowrap}

/* ---------- muziek ---------- */
.muziek{background:var(--music);border-radius:24px;padding:14px;display:flex;flex-direction:column;gap:12px}
.np{display:flex;align-items:center;justify-content:space-between;gap:10px}
.np .t{font-size:19px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np .a{font-size:12px;color:#A9B8D9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np .txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.playbtn{width:42px;height:42px;border-radius:21px;background:var(--text);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stations{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
.stations::-webkit-scrollbar{display:none}
.st{display:flex;flex-direction:column;gap:5px;align-items:flex-start;flex-shrink:0}
.st .cover{width:52px;height:52px;border-radius:14px;display:flex;align-items:flex-end;padding:6px;font-size:11px;font-weight:700;line-height:1.1;transition:transform .15s}
.st:active .cover{transform:scale(.94)}
.st .nm{font-size:11px;color:#A9B8D9;width:52px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.speakers{display:flex;gap:6px;flex-wrap:wrap}
.spk{border-radius:999px;background:var(--music2);padding:6px 10px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px;color:#A9B8D9}
.spk i{width:6px;height:6px;border-radius:3px;background:#4A5F94}
.spk.on{color:var(--text)}
.spk.on i{background:var(--blue)}
.vol{display:flex;align-items:center;gap:12px}
.vol input{flex:1;accent-color:var(--text)}

/* ---------- camera's ---------- */
.cams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cam{border-radius:20px;overflow:hidden;height:96px;background:linear-gradient(160deg,#2A3247,#141A28);position:relative;display:flex;align-items:flex-end}
.cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55))}
.cam .rec{position:absolute;top:10px;left:10px;width:7px;height:7px;border-radius:4px;background:var(--red);z-index:1}
.cam .nm{position:relative;z-index:1;font-size:13px;font-weight:600;padding:8px 12px}

/* ---------- afval ---------- */
.afval{padding:9px 12px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.day{display:flex;flex-direction:column;align-items:center;gap:4px}
.day .wd{font-size:11px;color:var(--muted);font-weight:500}
.day .n{width:28px;height:28px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.day.today .n{background:var(--segon)}
.day .what{font-size:9px;color:var(--muted2);height:11px;font-weight:600;letter-spacing:.02em}

/* ---------- apparaten ---------- */
.apps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:0 4px}
.app{display:flex;flex-direction:column;align-items:center;gap:5px}
.app .ring{width:32px;height:32px;border-radius:16px;border:2px solid #2E3850;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--text2)}
.app.run .ring{border-color:var(--blue)}
.app.klaar .ring{border-color:var(--green)}
.app.warm .ring{border-color:var(--wp)}
.app.fout .ring,.app.alarm .ring{border-color:var(--red)}
.app.alarm .ring{background:rgba(255,90,95,.25)}
.app .nm{font-size:10px;color:#8B94A7}

/* ---------- pro ---------- */
.flowcard{padding:12px 12px 14px;display:flex;flex-direction:column;gap:4px}
.flowhead{display:flex;justify-content:space-between;align-items:center}
.flowbox{position:relative;width:358px;height:268px;margin:0 auto;transform-origin:0 0}
.flowbox>svg{position:absolute;left:0;top:0}
.node{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px}
.node .c{border-radius:50%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1.5px solid}
.node .v{font-size:13px;font-weight:600}
.node .l{font-size:11px;color:var(--muted)}
.huis .ring{width:96px;height:96px;border-radius:48px;display:flex;align-items:center;justify-content:center}
.huis .inner{width:90px;height:90px;border-radius:45px;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.huis .big{font-size:20px;font-weight:700;line-height:1.15}
.huis .eigen{font-size:11px;color:var(--zon);font-weight:500}
@keyframes flow{to{stroke-dashoffset:-40}}
.dots{stroke-dasharray:.01 20;animation:flow 1.6s linear infinite}
@media (prefers-reduced-motion:reduce){.dots{animation:none}}
.prijs{padding:12px 16px 10px;display:flex;flex-direction:column;gap:8px}
.bars{position:relative;height:72px;display:flex;align-items:flex-end;gap:5px}
.bars .avg{position:absolute;left:0;right:0;border-top:1px dashed #4A5570}
.bars .b{flex:1;border-radius:4px 4px 2px 2px}
.bars .b.now{box-shadow:0 0 0 2px var(--text)}
.blabels{display:flex;gap:5px}
.blabels span{flex:1;text-align:center;font-size:10px;color:var(--muted)}
.blabels span.now{color:var(--text);font-weight:600}
.kosten{padding:12px 16px 10px;display:flex;flex-direction:column;gap:8px}
.wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;align-items:end;height:50px}
.wk .d{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%}
.wk .d span{font-size:10px;color:#6F7889}
.wk .d i{width:100%;border-radius:4px 4px 2px 2px;background:#33405C;display:block}
.wk .d.today span{color:var(--text2)} .wk .d.today i{background:#5B6A8C}
.wkl{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.wkl span{text-align:center;font-size:10px;color:var(--muted)} .wkl span.today{color:var(--text)}

.wpcard{padding:20px 14px 18px;display:flex;flex-direction:column;gap:18px}
.wptitle{display:flex;align-items:center;gap:10px;padding:0 4px}
.wptitle i{width:10px;height:10px;border-radius:5px}
.wptitle span{font-size:24px;font-weight:700;letter-spacing:-.01em}
.wpbox{position:relative;width:362px;height:210px;margin:0 auto;transform-origin:50% 0}
.wpbox>svg{position:absolute;left:0;top:0}
.warn{display:flex;align-items:center;gap:10px;background:rgba(255,90,95,.12);border:1px solid rgba(255,90,95,.4);border-radius:16px;padding:12px 14px;font-size:14px;font-weight:600;color:#FFC2C4}
.bigbtn{height:52px;border-radius:16px;background:var(--card2);display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600;width:100%}

/* ---------- sheets ---------- */
.scrim{position:fixed;inset:0;background:rgba(5,8,14,.6);z-index:20;display:flex;flex-direction:column;justify-content:flex-end;animation:fade .2s}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.sheet{background:var(--card);border-radius:28px 28px 0 0;padding:10px 16px calc(var(--safe-b) + 24px);display:flex;flex-direction:column;gap:14px;max-width:560px;width:100%;margin:0 auto;animation:up .25s ease}
.sheet .grab{align-self:center;width:40px;height:5px;border-radius:3px;background:var(--dim)}
.sheet .head{display:flex;justify-content:space-between;align-items:center;padding:2px 2px 0}
.sheet .head span{font-size:20px;font-weight:700}
.sheet .head button{font-size:15px;font-weight:600;color:var(--blue)}
.row{background:var(--card2);border-radius:18px;padding:14px;text-align:left;width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px}
.row.col{flex-direction:column;align-items:stretch;gap:12px}
.row .k{font-size:15px;font-weight:600}
.row .sub{font-size:12px;color:var(--muted);font-weight:500;margin-top:2px}
.toggle{width:50px;height:30px;border-radius:15px;background:var(--dim);position:relative;flex-shrink:0;transition:background .2s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:12px;background:var(--text);transition:left .2s}
.toggle.on{background:var(--amber)} .toggle.on::after{left:23px}
.row .seg{background:#1A2234}
.textbtn{font-size:14px;font-weight:500;color:var(--muted);padding:10px 0}
.camview{position:fixed;inset:0;z-index:30;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fade .2s}
.camview img{max-width:100%;max-height:85vh;object-fit:contain}
.camview .close{position:absolute;top:calc(var(--safe-t) + 14px);right:16px;width:40px;height:40px;border-radius:20px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center}
.camview .cn{position:absolute;top:calc(var(--safe-t) + 22px);left:20px;font-weight:600}

/* ---------- login ---------- */
.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px}
.login h1{font-size:30px;margin:0}
.login input{width:240px;height:52px;border-radius:16px;border:none;background:var(--card);color:var(--text);font:inherit;font-size:20px;text-align:center;letter-spacing:.2em}
.login input:focus{outline:2px solid var(--blue)}
.login .go{width:240px;height:52px;border-radius:16px;background:var(--amber);color:var(--amberink);font-weight:700;font-size:16px}
.login .err{color:#F3A6A8;font-size:14px;min-height:18px}
.who{display:flex;gap:12px}
.who button{width:116px;height:116px;border-radius:24px;background:var(--card);font-size:16px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.who button i{width:44px;height:44px;border-radius:22px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:18px;color:var(--amber)}

/* ---------- verloop vandaag ---------- */
.dag{padding:12px 14px 10px;display:flex;flex-direction:column;gap:8px;min-height:0}
.dag .legend{display:flex;gap:14px;font-size:12px;color:var(--muted2);flex-wrap:wrap}
.dag .legend span{display:flex;align-items:center;gap:6px}
.dag .legend b{color:var(--text);font-weight:600}
.dag .legend i{width:8px;height:8px;border-radius:4px;display:block}
.dag .legend i.ln{width:12px;height:3px;border-radius:2px}
.dag .plot{position:relative;flex:1;min-height:90px}
.dag .plot svg{position:absolute;inset:0;width:100%;height:100%}
.dag .yl,.dag .yr{position:absolute;top:-2px;font-size:10px;color:var(--muted);z-index:1}
.dag .yl{left:0} .dag .yr{right:0;color:#C9874B} .dag .yr.lo{top:auto;bottom:-2px}
.dag .xl{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}

/* ---------- telefoon: alles op één scherm, niet scrollen ---------- */
@media (max-width:899px){
  html,body{height:100%;overflow:hidden}
  .page{height:100dvh;min-height:0;overflow:hidden;gap:10px;padding:calc(var(--safe-t) + 8px) 14px calc(var(--safe-b) + 10px)}
  .page>*{flex-shrink:0}
  .licht{gap:10px;padding:11px}
  .seg button{padding:7px 0}
  .lamp{height:76px}
  .lampwrap{gap:5px}
  .scenes button{padding:9px 0}
  .extra{padding-top:10px}
  .xbtn{gap:4px}
  .xbtn .bulb{width:36px;height:36px;border-radius:18px}
  .muziek{padding:12px 14px;gap:10px}
  .np .t{font-size:18px}
  .playbtn{width:40px;height:40px}
  .st .cover{width:48px;height:48px;border-radius:13px}
  .st .nm{width:48px}
  .cams{flex:1 1 0;flex-shrink:1;min-height:64px}
  .cam{height:auto}
  .afval{padding:7px 10px}
  .day{gap:3px}
  .day .n{width:26px;height:26px;border-radius:13px;font-size:12px}
  .app .ring{width:30px;height:30px}
  .flowcard{padding:10px 10px 8px}
  .dag{flex:1 1 0;flex-shrink:1}
  .kosten{padding:10px 14px 8px;gap:6px}
  .wk{height:40px}
  .wpcard{padding:16px 12px 14px;gap:12px}
}

/* kleine telefoons (bv. iPhone SE) */
@media (max-width:899px) and (max-height:720px){
  .page{gap:8px}
  .licht{gap:8px;padding:10px}
  .lamp{height:56px}
  .lampname{font-size:11px}
  .scenes button{padding:8px 0}
  .extra{padding-top:8px}
  .xbtn .bulb{width:32px;height:32px}
  .xbtn span{font-size:10px}
  .muziek{gap:8px;padding:10px 12px}
  .np .t{font-size:16px}
  .playbtn{width:36px;height:36px}
  .st .cover{width:42px;height:42px;font-size:10px;padding:5px}
  .st .nm{display:none}
  .cams{min-height:44px}
  .day .what{display:none}
  .day .n{width:24px;height:24px}
  .app .ring{width:26px;height:26px}
  .app .nm{font-size:9px}
  .kosten .wk{height:30px}
  .dag .plot{min-height:50px}
  .dag{gap:5px;padding:10px 12px 8px}
}

/* ---------- iPad / breed ---------- */
@media (min-width:900px){
  .page{max-width:1240px;padding:calc(var(--safe-t) + 24px) 32px calc(var(--safe-b) + 28px);gap:18px;height:100vh;min-height:0}
  .top{min-height:34px}
  .top .date{font-size:18px}
  .wx{font-size:16px}
  .pill{font-size:14px;padding:7px 13px 7px 10px}
  .cols{display:flex;gap:20px;flex:1;min-height:0}
  .col1{width:460px;display:flex;flex-direction:column;gap:16px}
  .col2{width:360px;display:flex}
  .col3{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
  .licht{flex:1;min-height:0;padding:18px 18px 16px;gap:16px;border-radius:26px}
  .floors{display:flex;gap:18px;flex:1;min-height:0}
  .floor{display:flex;flex-direction:column;gap:12px;min-width:0}
  .floor .lamps{flex:1;min-height:0;justify-content:space-around;gap:0}
  .floor .lampwrap{height:100%;justify-content:flex-end;width:auto}
  .floor .lamp{width:48px;height:auto;flex:1}
  .floor .lampname{font-size:13px}
  .floor .scenes button{padding:11px 0;font-size:14px}
  .extra{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));padding-top:14px}
  .xbtn{width:auto}
  .xbtn .bulb{width:42px;height:42px;border-radius:21px}
  .afval{padding:12px 16px;border-radius:22px}
  .day .n{width:34px;height:34px;border-radius:17px;font-size:14px}
  .day .wd{font-size:12px}
  .muziek{flex:1;border-radius:26px;padding:22px;gap:18px}
  .np{align-items:flex-start}
  .np .t{font-size:26px;white-space:normal}
  .np .a{font-size:15px}
  .playbtn{width:52px;height:52px;border-radius:26px}
  .stations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:auto 0 0;padding:0;overflow:visible}
  .st{align-items:stretch;gap:7px}
  .st .cover{width:auto;height:auto;aspect-ratio:1/1;border-radius:18px;padding:10px;font-size:15px}
  .st .nm{width:auto;font-size:13px}
  .cams{display:flex;flex-direction:column;flex:1;gap:16px}
  .cam{flex:1;height:auto;border-radius:22px}
  .cam .nm{font-size:15px;padding:12px 16px}
  .apps{background:var(--card);border-radius:22px;padding:14px 6px 12px}
  .app .ring{width:36px;height:36px;border-radius:18px;font-size:12px}
  .app .nm{font-size:11px}

  .procols{display:flex;gap:20px;height:470px}
  .procols .flowcard{width:560px;padding:16px 18px;border-radius:26px}
  .procols .flowbox{transform:scale(1.46);margin:6px 0 0 0}
  .procols .flowwrap{width:523px;height:392px;margin:0 auto}
  .procols .right{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
  .procols .wpcard{flex:1;padding:18px 18px 14px;gap:10px;border-radius:26px}
  .procols .wptitle span{font-size:22px}
  .procols .wpbox{transform:scale(1.18);margin-top:16px}
  .probottom{display:flex;gap:20px;flex:1;min-height:0}
  .probottom .prijs,.probottom .dag{flex:1.6;border-radius:22px;padding:16px 20px 12px}
  .probottom .prijs .bars{flex:1;height:auto}
  .probottom .kosten{flex:1;border-radius:22px;padding:16px 20px 12px}
  .probottom .kosten .wk{flex:1;height:auto}
  .tabs-phone{display:none}
  .bigbtn{height:56px;border-radius:18px;font-size:16px}
}
@media (max-width:899px){ .wide-only{display:none!important} }
@media (min-width:900px){ .phone-only{display:none!important} }