:root{
  --bg:#FFF3F1; --surface:#FFFFFF; --surface-2:#FBE9E8; --ink:#3B2D4A; --muted:#85769A; --line:#F3DEDD;
  --peach:#FFC98B; --peach-deep:#E8A25A; --peach-soft:#FFEAD3;
  --lilac:#CDBAF6; --lilac-deep:#A68BE1; --lilac-soft:#EFE8FD;
  --pink:#F9B4C4; --pink-soft:#FDE3EA;
  --mint:#A6DDC9; --mint-soft:#DDF3EA;
  --late:#DA4D45; --late-soft:#FBDCD8;
  --track:#F6E0DF; --star:#F5B83D; --on-pastel:#3B2D4A;
  --sun:#FFE08A; --sun-deep:#E2B848; --sun-soft:#FFF4CC;
  --sky:none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1C1733; --surface:#272043; --surface-2:#332B54; --ink:#FCEFE6; --muted:#ADA0C8; --line:#383060;
    --peach-deep:#C98945; --peach-soft:#47352A;
    --lilac-deep:#8C73C8; --lilac-soft:#3A3162;
    --pink-soft:#4A2E4B; --mint-soft:#22433F;
    --late:#FF8C7E; --late-soft:#4C2632;
    --track:#332B54; --star:#FFD36E;
    --sun-deep:#C99E35; --sun-soft:#463D24;
    --sky:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='18' cy='30' r='1.1' opacity='.5'/%3E%3Ccircle cx='96' cy='12' r='.8' opacity='.4'/%3E%3Ccircle cx='170' cy='48' r='1.3' opacity='.45'/%3E%3Ccircle cx='60' cy='104' r='.9' opacity='.35'/%3E%3Ccircle cx='140' cy='132' r='1' opacity='.5'/%3E%3Ccircle cx='205' cy='170' r='.8' opacity='.35'/%3E%3Ccircle cx='30' cy='190' r='1.2' opacity='.4'/%3E%3Ccircle cx='110' cy='200' r='.7' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1C1733; --surface:#272043; --surface-2:#332B54; --ink:#FCEFE6; --muted:#ADA0C8; --line:#383060;
  --peach-deep:#C98945; --peach-soft:#47352A;
  --lilac-deep:#8C73C8; --lilac-soft:#3A3162;
  --pink-soft:#4A2E4B; --mint-soft:#22433F;
  --late:#FF8C7E; --late-soft:#4C2632;
  --track:#332B54; --star:#FFD36E;
  --sun-deep:#C99E35; --sun-soft:#463D24;
  --sky:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='18' cy='30' r='1.1' opacity='.5'/%3E%3Ccircle cx='96' cy='12' r='.8' opacity='.4'/%3E%3Ccircle cx='170' cy='48' r='1.3' opacity='.45'/%3E%3Ccircle cx='60' cy='104' r='.9' opacity='.35'/%3E%3Ccircle cx='140' cy='132' r='1' opacity='.5'/%3E%3Ccircle cx='205' cy='170' r='.8' opacity='.35'/%3E%3Ccircle cx='30' cy='190' r='1.2' opacity='.4'/%3E%3Ccircle cx='110' cy='200' r='.7' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}
:root[data-mode="dag"]{
  --bg:#FFF3F1; --surface:#FFFFFF; --surface-2:#FBE9E8; --ink:#3B2D4A; --muted:#85769A; --line:#F3DEDD;
  --peach:#FFC98B; --peach-deep:#E8A25A; --peach-soft:#FFEAD3;
  --lilac:#CDBAF6; --lilac-deep:#A68BE1; --lilac-soft:#EFE8FD;
  --pink:#F9B4C4; --pink-soft:#FDE3EA;
  --mint:#A6DDC9; --mint-soft:#DDF3EA;
  --late:#DA4D45; --late-soft:#FBDCD8;
  --track:#F6E0DF; --star:#F5B83D; --on-pastel:#3B2D4A;
  --sun:#FFE08A; --sun-deep:#E2B848; --sun-soft:#FFF4CC;
  --sky:none;
  color-scheme: light;
}
:root[data-mode="nacht"]{
  --bg:#1C1733; --surface:#272043; --surface-2:#332B54; --ink:#FCEFE6; --muted:#ADA0C8; --line:#383060;
  --peach-deep:#C98945; --peach-soft:#47352A;
  --lilac-deep:#8C73C8; --lilac-soft:#3A3162;
  --pink-soft:#4A2E4B; --mint-soft:#22433F;
  --late:#FF8C7E; --late-soft:#4C2632;
  --track:#332B54; --star:#FFD36E;
  --sun-deep:#C99E35; --sun-soft:#463D24;
  --sky:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='18' cy='30' r='1.1' opacity='.5'/%3E%3Ccircle cx='96' cy='12' r='.8' opacity='.4'/%3E%3Ccircle cx='170' cy='48' r='1.3' opacity='.45'/%3E%3Ccircle cx='60' cy='104' r='.9' opacity='.35'/%3E%3Ccircle cx='140' cy='132' r='1' opacity='.5'/%3E%3Ccircle cx='205' cy='170' r='.8' opacity='.35'/%3E%3Ccircle cx='30' cy='190' r='1.2' opacity='.4'/%3E%3Ccircle cx='110' cy='200' r='.7' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}
:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
*,*::before,*::after{ box-sizing:inherit; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); background:var(--bg); }
body{
  margin:0; color:var(--ink);
  background-color:var(--bg);
  background-image:var(--sky), radial-gradient(circle at 0% 0%, var(--pink-soft) 0, transparent 45%), radial-gradient(circle at 100% 22%, var(--mint-soft) 0, transparent 38%);
  background-repeat:repeat, no-repeat, no-repeat;
  font-family:"Nunito", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:1rem; line-height:1.45; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
.display, h1, h2, .dial-big, .big-btn .lbl, .row .t{ font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; }
button{ font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:3px solid var(--lilac-deep); outline-offset:2px; }
svg.ic{ width:20px; height:20px; flex:none; }

.app{ max-width:520px; margin:0 auto; padding:16px 18px 120px; }

/* Header */
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ width:48px; height:48px; border-radius:50%; background:var(--peach); color:var(--on-pastel); display:grid; place-items:center; box-shadow:0 3px 0 var(--peach-deep); flex:none; }
.logo svg{ width:32px; height:32px; }
.brand h1{ margin:0; font-size:1.45rem; font-weight:800; line-height:1.05; letter-spacing:-0.01em; }
.sync{ margin:2px 0 0; font-size:.82rem; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:6px; }
.sync::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--muted); }
.sync[data-mode="shared"]::before{ background:var(--mint); box-shadow:0 0 0 3px var(--mint-soft); }

/* Hero dial */
.hero{ display:flex; flex-direction:column; align-items:center; padding:18px 0 4px; }
.dial{ position:relative; width:min(76vw, 280px); aspect-ratio:1; }
.dial svg.ring{ width:100%; height:100%; display:block; overflow:visible; }
.dial .disc{ fill:var(--surface); }
.dial .track{ fill:none; stroke:var(--track); stroke-width:16; }
.dial .prog{ fill:none; stroke:url(#ringGrad); stroke-width:16; stroke-linecap:round; transition:stroke-dashoffset .6s ease; }
.dial .tick{ color:var(--star); }
.dial .marker circle{ fill:var(--surface); stroke:var(--peach-deep); stroke-width:3; }
.dial .marker use{ color:var(--star); }
.dial-text{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 12%; }
.dial-top{ font-size:1rem; color:var(--muted); font-weight:800; min-height:1.3em; }
.dial-big{ font-size:clamp(2.2rem, 10.5vw, 3.1rem); white-space:nowrap; font-weight:800; letter-spacing:-0.02em; line-height:1; margin-top:2px; }
.dial-bottom{ font-size:.92rem; color:var(--muted); font-weight:700; margin-top:6px; }
.dial-moon{ width:30px; height:30px; color:var(--lilac-deep); margin-bottom:4px; }
.hero:not([data-state="empty"]):not([data-state="loading"]) .dial-moon{ display:none; }
.hero[data-state="soon"] .dial-bottom{ color:var(--peach-deep); }
.hero[data-state="late"] .prog{ stroke:var(--late); }
.hero[data-state="late"] .marker circle{ stroke:var(--late); }
.hero[data-state="late"] .dial-big, .hero[data-state="late"] .dial-top, .hero[data-state="late"] .dial-bottom{ color:var(--late); }
.hero[data-state="late"] .dial{ animation:breathe 2.4s ease-in-out infinite; }
@keyframes breathe{ 50%{ transform:scale(1.025); } }
@media (prefers-reduced-motion: reduce){ .hero[data-state="late"] .dial{ animation:none; } .dial .prog{ transition:none; } }

.hero-lines{ margin:14px 0 0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.hl{ margin:0; display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; color:var(--muted); text-align:left; }
.hl .ic{ width:26px; height:26px; padding:4px; border-radius:50%; color:var(--on-pastel); }
.hl.feed .ic{ background:var(--peach); }
.hl.kolf .ic{ background:var(--lilac); }
.hl.avg .ic{ background:var(--mint); }
.hl.beurt .ic{ background:var(--sun); }
.hl.beurt .wd{ display:none; }
.hl.beurt[data-ik="true"]{ color:var(--ink); }
.hl{ max-width:100%; }
.hl span{ min-width:0; }
/* Naam en leeftijd */
.baby-tag{ display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; padding:6px 16px 6px 12px; border-radius:999px; background:var(--surface); border:2px solid var(--line); box-shadow:0 2px 0 var(--line); }
.baby-tag svg{ width:18px; height:18px; flex:none; }
.bt-name{ font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:1.3rem; font-weight:800; line-height:1.1; color:var(--ink); }
.bt-age{ font-size:.95rem; font-weight:700; color:var(--muted); }
/* Profiel */
button.logo{ border:0; padding:0; cursor:pointer; }
button.logo:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--peach-deep); }
button.baby-tag{ font:inherit; color:inherit; cursor:pointer; }
button.baby-tag:active{ transform:translateY(2px); box-shadow:none; }
.pf-hero{ display:flex; align-items:center; gap:14px; margin:2px 0 4px; }
.pf-hero .logo{ width:64px; height:64px; }
.pf-hero .logo svg{ width:42px; height:42px; }
.pf-name{ font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:1.6rem; font-weight:800; line-height:1.1; overflow-wrap:anywhere; }
.pf-age{ font-weight:700; color:var(--muted); }
.pf-row{ display:grid; grid-template-columns:1.35fr 1fr; gap:10px; }
.pf-row .fld{ min-width:0; }
/* Schema */
.sc-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.sc-list > .empty{ background:var(--surface); border-radius:20px; box-shadow:0 3px 0 var(--line); }
.sc-day{ margin:8px 6px 0; font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.sc-row{ width:100%; display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:20px; border:2px solid var(--line); background:var(--surface); color:var(--ink); text-align:left; box-shadow:0 2px 0 var(--line); }
.sc-row:active{ transform:translateY(2px); box-shadow:none; }
.sc-item[data-auto="true"] .sc-row{ border-style:dashed; box-shadow:none; background:transparent; }
.sc-item[data-late="true"] .sc-row{ border-style:solid; border-color:var(--late); background:var(--late-soft); }
.sc-time{ display:flex; flex-direction:column; min-width:5.6em; flex:none; }
.sc-time b{ font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:1.35rem; line-height:1; }
.sc-time small{ margin-top:3px; font-size:.75rem; font-weight:700; color:var(--muted); white-space:nowrap; }
.sc-item[data-late="true"] .sc-time small{ color:var(--late); }
.sc-ic{ width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:12px; color:var(--on-pastel); }
.sc-ic svg.ic{ width:22px; height:22px; }
.sc-item[data-kind="voeding"] .sc-ic{ background:var(--peach); }
.sc-item[data-kind="kolf"] .sc-ic{ background:var(--lilac); }
.sc-main{ display:flex; flex-direction:column; min-width:0; }
.sc-what{ font-weight:800; }
.sc-meta{ font-size:.82rem; font-weight:700; color:var(--muted); overflow-wrap:anywhere; }
.sc-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.sc-add{ display:flex; align-items:center; justify-content:center; gap:6px; padding:14px 8px; border:0; border-radius:20px; font-weight:800; color:var(--on-pastel); }
.sc-add.feed{ background:var(--peach); box-shadow:0 4px 0 var(--peach-deep); }
.sc-add.kolf{ background:var(--lilac); box-shadow:0 4px 0 var(--lilac-deep); }
.sc-add:active{ transform:translateY(3px); box-shadow:none; }
.sc-add:disabled{ opacity:.5; }
.sc-set{ margin-top:22px; }
/* Diensten */
.sc-what{ display:flex; align-items:center; flex-wrap:wrap; gap:3px 8px; }
.sc-who{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px 2px 7px; border-radius:999px; background:var(--surface-2); font-size:.8rem; font-weight:800; }
.sc-item[data-late="true"] .sc-who{ background:var(--surface); }
.wd{ display:inline-block; width:10px; height:10px; border-radius:50%; flex:none; background:var(--track); }
.wd.papa{ background:var(--mint); }
.wd.mama{ background:var(--pink); }
.wd.samen{ background:linear-gradient(90deg, var(--mint) 50%, var(--pink) 50%); }
.dn-now{ display:flex; align-items:center; gap:8px; margin:0 2px 12px; font-weight:700; line-height:1.35; }
.dn-now .wd{ width:12px; height:12px; }
.dn-strip{ position:relative; height:38px; border-radius:12px; background:var(--surface-2); overflow:hidden; }
.dn-night{ position:absolute; top:0; bottom:0; background:var(--lilac-soft); }
.dn-seg{ position:absolute; top:5px; bottom:5px; border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--on-pastel); font-size:.72rem; font-weight:800; white-space:nowrap; }
.dn-seg.papa{ background:var(--mint); }
.dn-seg.mama{ background:var(--pink); }
.dn-seg.samen{ background:repeating-linear-gradient(135deg, var(--mint) 0 7px, var(--pink) 7px 14px); }
.dn-mk{ position:absolute; top:0; bottom:0; width:3px; margin-left:-1.5px; border-radius:2px; background:var(--ink); }
.dn-ax{ position:relative; height:16px; margin-top:6px; }
.dn-ax span{ position:absolute; top:0; transform:translateX(-50%); font-size:.72rem; font-weight:700; color:var(--muted); }
.dn-ax span:first-child{ transform:none; }
.dn-ax span:last-child{ transform:translateX(-100%); }
.dn-list{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px; }
.dn-list:empty{ display:none; }
.dn-row{ width:100%; display:flex; align-items:center; gap:14px; padding:10px 14px; border-radius:18px; border:2px solid var(--line); background:var(--bg); color:var(--ink); text-align:left; }
.dn-row:active{ transform:translateY(2px); }
.dn-row:disabled{ cursor:default; transform:none; }
.dn-row[data-now="true"]{ border-color:var(--sun-deep); background:var(--sun-soft); }
.dn-time{ font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:1.2rem; font-weight:800; line-height:1; white-space:nowrap; }
.dn-main{ display:flex; flex-direction:column; min-width:0; }
.dn-who{ display:inline-flex; align-items:center; gap:6px; font-weight:800; }
.dn-meta{ font-size:.8rem; font-weight:700; color:var(--muted); }
.sc-add.dn{ width:100%; margin-top:14px; background:var(--sun); box-shadow:0 4px 0 var(--sun-deep); }
.dn-times{ grid-template-columns:1fr 1fr; }
.dn-whoseg button[data-wie="papa"][aria-pressed="true"]{ background:var(--mint); color:var(--on-pastel); }
.dn-whoseg button[data-wie="mama"][aria-pressed="true"]{ background:var(--pink); color:var(--on-pastel); }
.dn-whoseg button[data-wie="samen"][aria-pressed="true"]{ background:linear-gradient(90deg, var(--mint) 50%, var(--pink) 50%); color:var(--on-pastel); }
.sheet[data-type="dienst"] .chips button[aria-pressed="true"]{ background:var(--sun-soft); border-color:var(--sun-deep); }
.sheet[data-type="dienst"] .btn-primary{ background:var(--sun); box-shadow:0 4px 0 var(--sun-deep); }
#plWho button{ display:inline-flex; align-items:center; }
#plSeg{ grid-template-columns:1fr 1fr; }
.tile.wide{ grid-column:1 / -1; }
.c-gap{ background:var(--mint); }
.hl span:empty{ display:none; }
.alarm-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:9px 16px 9px 10px; border-radius:999px; background:var(--peach-soft); border:2px solid var(--peach); color:var(--ink); font-weight:800; font-size:.95rem; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.alarm-btn .ic{ width:28px; height:28px; padding:4px; border-radius:50%; background:var(--peach); color:var(--on-pastel); }
.alarm-btn:active{ transform:translateY(2px); }

/* Actions */
.actions{ display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; margin-top:22px; }
.qb{ width:clamp(62px, 21vw, 92px); transform-origin:50% 100%; pointer-events:none; }
.qb svg{ width:100%; height:auto; display:block; overflow:visible; }
.qb.hop{ animation:qbHop .6s ease; }
@keyframes qbHop{ 30%{ transform:translateY(-10px) rotate(-4deg); } 55%{ transform:translateY(0) rotate(3deg); } 75%{ transform:rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce){ .qb.hop{ animation:none; } }
.big-btn{
  border:0; border-radius:28px; padding:14px 10px 12px; min-height:118px; color:var(--on-pastel);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  transition:transform .1s ease, box-shadow .1s ease, opacity .2s;
}
.big-btn .btn-ic{ width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.55); display:grid; place-items:center; margin-bottom:4px; }
.big-btn .btn-ic svg{ width:32px; height:32px; }
.big-btn .lbl{ font-size:clamp(1.15rem, 5.6vw, 1.45rem); font-weight:800; line-height:1.1; }
.big-btn .when{ font-size:.85rem; font-weight:700; opacity:.75; }
.big-btn.feed{ background:var(--peach); box-shadow:0 6px 0 var(--peach-deep); }
.big-btn.kolf{ background:var(--lilac); box-shadow:0 6px 0 var(--lilac-deep); }
.big-btn:active{ transform:translateY(5px); }
.big-btn.feed:active{ box-shadow:0 1px 0 var(--peach-deep); }
.big-btn.kolf:active{ box-shadow:0 1px 0 var(--lilac-deep); }
.big-btn[disabled]{ opacity:.5; cursor:default; }
.manual{ display:flex; align-items:center; gap:6px; margin:18px auto 0; background:none; border:0; color:var(--muted); font-weight:800; font-size:.95rem; padding:8px 12px; border-radius:999px; }
.manual:active{ background:var(--surface-2); }
.notice{ margin:16px 0 0; padding:12px 14px; border-radius:16px; background:var(--late-soft); font-size:.9rem; font-weight:600; }

/* Log */
.log{ margin-top:30px; }
.day{ margin-top:24px; }
.day-head{ padding:0 4px 10px; }
.day-head h2{ margin:0; font-size:1.35rem; font-weight:800; line-height:1.1; text-transform:capitalize; }
.day-head .tags{ margin-top:6px; }
.day-list{ background:var(--surface); border-radius:26px; overflow:hidden; box-shadow:0 3px 0 var(--line); }
.row{ display:grid; grid-template-columns:44px 1fr; gap:12px; width:100%; text-align:left; background:none; border:0; border-top:2px dashed var(--line); padding:14px 16px 14px 14px; }
.day-list .row:first-child{ border-top:0; }
.row:active{ background:var(--surface-2); }
.ric{ width:44px; height:44px; border-radius:16px; display:grid; place-items:center; background:var(--peach); color:var(--on-pastel); }
.row[data-type="kolf"] .ric{ background:var(--lilac); }
.ric svg{ width:26px; height:26px; }
.rmain{ min-width:0; }
.rtop{ display:flex; align-items:baseline; gap:8px; }
.row .t{ font-weight:800; font-size:1.25rem; line-height:1.2; }
.row .what{ font-weight:700; color:var(--muted); }
.gap{ margin-left:auto; font-size:.8rem; font-weight:800; padding:2px 9px; border-radius:999px; background:var(--surface-2); color:var(--muted); white-space:nowrap; }
.gap.late{ background:var(--late-soft); color:var(--late); }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.tag{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px 3px 7px; border-radius:999px; font-size:.82rem; font-weight:700; background:var(--surface-2); color:var(--ink); }
.tag.plain{ padding-left:10px; }
.tag .ic{ width:15px; height:15px; }
.tag.pink{ background:var(--pink-soft); } .tag.mint{ background:var(--mint-soft); }
.tag.lilac{ background:var(--lilac-soft); } .tag.peach{ background:var(--peach-soft); }
.note{ display:flex; gap:6px; margin-top:7px; color:var(--muted); font-size:.92rem; }
.note .ic{ width:16px; height:16px; margin-top:3px; }
.note span{ white-space:pre-wrap; overflow-wrap:anywhere; }
.empty{ text-align:center; color:var(--muted); padding:20px 16px; font-weight:600; }
.empty .ic{ width:40px; height:40px; color:var(--lilac-deep); display:block; margin:0 auto 8px; }

/* Sheet */
.scrim{ position:fixed; inset:0; background:rgba(20,14,36,.5); z-index:20; }
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:21; margin:0 auto; max-width:560px;
  background:var(--surface); border-radius:30px 30px 0 0;
  padding:10px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  max-height:92%; overflow-y:auto; box-shadow:0 -10px 40px rgba(0,0,0,.25);
}
.grab{ width:44px; height:5px; border-radius:3px; background:var(--line); margin:0 auto 12px; }
.sheet-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.sheet-head h2{ margin:0; font-size:1.4rem; font-weight:800; }
.sheet-head h2:focus{ outline:none; }
.icon{ background:var(--surface-2); border:0; width:38px; height:38px; border-radius:50%; font-size:1.3rem; line-height:1; }
.seg{ display:grid; grid-template-columns:repeat(3, 1fr); background:var(--surface-2); border-radius:18px; padding:5px; gap:5px; }
.seg button{ white-space:nowrap; border:0; background:none; border-radius:14px; padding:10px 4px; font-size:.95rem; font-weight:800; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:6px; }
.seg button[data-type="voeding"][aria-pressed="true"]{ background:var(--peach); color:var(--on-pastel); }
.seg button[data-type="kolf"][aria-pressed="true"]{ background:var(--lilac); color:var(--on-pastel); }
.fld{ display:block; margin-top:16px; }
.fld > span, .flbl{ display:block; font-size:.85rem; font-weight:800; color:var(--muted); margin-bottom:6px; }
.fld em, .flbl em{ font-style:normal; font-weight:600; }
.fld input, .fld textarea{ width:100%; font:inherit; font-size:1rem; color:var(--ink); background:var(--bg); border:2px solid var(--line); border-radius:16px; padding:12px 14px; min-height:50px; }
.fld textarea{ resize:vertical; min-height:72px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chips button{ border:2px solid var(--line); background:var(--bg); border-radius:999px; padding:7px 14px; font-size:.9rem; font-weight:700; }
.chips button[aria-pressed="true"]{ background:var(--peach-soft); border-color:var(--peach-deep); }
.sheet[data-type="kolf"] .chips button[aria-pressed="true"]{ background:var(--lilac-soft); border-color:var(--lilac-deep); }
.side-wrap{ margin-top:16px; }
.counts{ display:grid; gap:10px; margin-top:16px; }
.count{ display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; background:var(--bg); border:2px solid var(--line); border-radius:20px; padding:6px 6px 6px 8px; transition:background .2s, border-color .2s; }
.count-lbl{ display:flex; align-items:center; gap:8px; font-weight:800; }
.cic{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:var(--on-pastel); }
.cic svg{ width:22px; height:22px; }
.cic.pink{ background:var(--pink); } .cic.mint{ background:var(--mint); }
.count.has[data-c="pink"]{ background:var(--pink-soft); border-color:var(--pink); }
.count.has[data-c="mint"]{ background:var(--mint-soft); border-color:var(--mint); }
.stepper{ display:flex; align-items:center; gap:3px; flex:none; }
.stepper button{ width:40px; height:40px; flex:none; border:0; border-radius:14px; background:var(--surface); font-size:1.4rem; font-weight:800; line-height:1; box-shadow:0 2px 0 var(--line); }
.stepper label{ display:flex; align-items:baseline; gap:3px; padding:0 2px; }
.stepper input{ width:3.4ch; border:0; background:none; color:var(--ink); font:inherit; font-weight:800; font-size:1.2rem; text-align:right; padding:8px 0; -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stepper .unit{ font-size:.85rem; font-weight:800; color:var(--muted); }
.sheet-actions{ display:flex; gap:10px; margin-top:22px; }
.btn-primary{ flex:1; border:0; border-radius:20px; padding:15px; font-weight:800; font-size:1.1rem; background:var(--peach); color:var(--on-pastel); box-shadow:0 4px 0 var(--peach-deep); }
.sheet[data-type="kolf"] .btn-primary{ background:var(--lilac); box-shadow:0 4px 0 var(--lilac-deep); }
.btn-primary:active{ transform:translateY(3px); box-shadow:none !important; }
.btn-danger{ border:2px solid var(--line); background:none; border-radius:20px; padding:13px 16px; font-weight:800; color:var(--late); }
.btn-danger.confirm{ background:var(--late); color:#fff; border-color:var(--late); }

/* Toast */
.toast{
  position:fixed; left:12px; right:12px; bottom:0; z-index:30; margin:0 auto; max-width:500px;
  transform:translateY(calc(-14px - env(safe-area-inset-bottom, 0px)));
  background:var(--ink); color:var(--bg); border-radius:22px; padding:10px 10px 10px 14px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; box-shadow:0 8px 30px rgba(0,0,0,.3);
}
.toast .ic{ width:22px; height:22px; color:var(--star); }
.toast .msg{ flex:1 1 140px; font-weight:700; font-size:.95rem; }
.toast button{ border:0; background:rgba(255,255,255,.14); color:var(--bg); font-weight:800; padding:8px 12px; border-radius:999px; }
:root[data-theme="light"] .toast button{ background:rgba(255,255,255,.14); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .toast button{ background:rgba(0,0,0,.08); } }
:root[data-mode="dag"] .toast button{ background:rgba(255,255,255,.14); }
:root[data-mode="nacht"] .toast button{ background:rgba(0,0,0,.08); }
.mode-btn{ margin-left:auto; width:42px; height:42px; flex:none; border-radius:50%; border:2px solid var(--line); background:var(--surface); color:var(--muted); display:grid; place-items:center; }
.mode-btn svg{ width:22px; height:22px; }
.mode-btn:active{ transform:scale(.94); }
[hidden]{ display:none !important; }
/* Drinkcalculator */
.calc{ margin-top:30px; }
.calc-head{ padding:0 4px 10px; }
.calc-head h2{ margin:0; font-size:1.35rem; font-weight:800; line-height:1.1; }
.calc-card{ background:var(--surface); border-radius:26px; overflow:hidden; box-shadow:0 3px 0 var(--line); }
.calc table{ width:100%; border-collapse:collapse; }
.calc th, .calc td{ padding:12px 16px; border-top:2px dashed var(--line); vertical-align:middle; }
.calc tr:first-child th, .calc tr:first-child td{ border-top:0; }
.calc th{ text-align:left; font-weight:800; color:var(--muted); font-size:.95rem; }
.calc td{ text-align:right; }
.calc-in{ display:inline-flex; align-items:baseline; gap:4px; background:var(--bg); border:2px solid var(--line); border-radius:14px; padding:6px 10px; }
.calc-in:focus-within{ border-color:var(--lilac-deep); }
.calc-in input{ width:5.5ch; border:0; background:none; color:var(--ink); font:inherit; font-weight:800; font-size:1.15rem; text-align:right; padding:2px 0; -moz-appearance:textfield; }
.calc-in input:focus-visible{ outline:none; }
.calc-in input::-webkit-outer-spin-button, .calc-in input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.calc .unit{ font-size:.85rem; font-weight:800; color:var(--muted); }
.calc tr.res th, .calc tr.res td{ background:var(--mint-soft); }
.calc tr.res th{ color:var(--ink); }
.calc-out{ font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:2rem; font-weight:800; line-height:1; }
.calc-day{ font-weight:800; }
.calc-note{ margin:10px 4px 0; font-size:.85rem; font-weight:600; color:var(--muted); }
.calc-more{ margin:12px 4px 0; }
.calc-more summary{ display:inline-flex; align-items:center; gap:5px; list-style:none; cursor:pointer; padding:4px 10px 4px 8px; border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:.82rem; font-weight:800; -webkit-tap-highlight-color:transparent; }
.calc-more summary::-webkit-details-marker{ display:none; }
.calc-more summary .ic{ width:15px; height:15px; }
.calc-more[open] summary .ic:last-child{ transform:rotate(180deg); }
.calc-more summary:focus-visible{ outline:3px solid var(--lilac-deep); outline-offset:2px; }
.calc-more .calc-note{ margin-left:0; margin-right:0; }

/* Tabs */
.tabs{ display:grid; grid-template-columns:repeat(4, 1fr); gap:5px; padding:5px; margin-top:16px; background:var(--surface-2); border-radius:18px; }
.tabs button{ white-space:nowrap; min-width:0; border:0; background:none; border-radius:14px; padding:10px 4px; font-weight:800; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:5px; }
.tabs button[aria-selected="true"]{ color:var(--on-pastel); }
#tabVoeden[aria-selected="true"]{ background:var(--peach); }
#tabStats[aria-selected="true"]{ background:var(--pink); }
#tabCalc[aria-selected="true"]{ background:var(--mint); }
#pageCalc .calc{ margin-top:22px; }
@media (max-width:480px){ .tabs button svg.ic{ display:none; } .tabs button{ font-size:.92rem; padding:10px 2px; } }
#tabSchema[aria-selected="true"]{ background:var(--sun); }

/* Overzicht */
.st-sec{ margin-top:26px; }
.st-sec:first-child{ margin-top:22px; }
.st-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; padding:0 4px 10px; }
.st-head h2{ margin:0; font-size:1.35rem; font-weight:800; line-height:1.1; }
.st-sub{ margin:4px 0 0; font-size:.85rem; font-weight:700; color:var(--muted); }
.st-card{ background:var(--surface); border-radius:26px; box-shadow:0 3px 0 var(--line); padding:16px 14px 14px; }
.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tile{ background:var(--surface); border-radius:22px; box-shadow:0 3px 0 var(--line); padding:12px 14px; min-width:0; }
.tile .k{ display:flex; align-items:center; gap:6px; font-size:.82rem; font-weight:800; color:var(--muted); }
.tile .k i{ width:10px; height:10px; border-radius:3px; flex:none; }
.tile .v{ font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:2rem; font-weight:800; line-height:1.1; }
.tile .v small{ font-size:1rem; font-weight:700; color:var(--muted); margin-left:2px; }
.tile .s{ font-size:.82rem; font-weight:700; color:var(--muted); }
.range{ display:inline-grid; grid-auto-flow:column; gap:4px; padding:4px; background:var(--surface-2); border-radius:14px; }
.range button{ border:0; background:none; border-radius:10px; padding:6px 10px; font-weight:800; font-size:.85rem; color:var(--muted); }
.range button[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 2px 0 var(--line); }
.chart{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; border-bottom:2px solid var(--line); }
.chart .col{ display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:150px; min-width:0; }
.chart .val{ font-size:.78rem; font-weight:800; line-height:1; margin-bottom:4px; color:var(--ink); }
.chart .stack{ width:min(100%, 26px); display:flex; flex-direction:column; }
.chart .stack span{ display:block; border-top:2px solid var(--surface); }
.chart .stack span:first-child{ border-top:0; border-radius:7px 7px 0 0; }
.chart .pair{ display:flex; align-items:flex-end; justify-content:center; gap:2px; width:100%; }
.chart .pair > div{ display:flex; flex-direction:column; align-items:center; width:min(46%, 13px); }
.chart .pair span{ display:block; width:100%; border-radius:5px 5px 0 0; }
.chart .pair .val{ font-size:.7rem; }
.chart.dense .val{ display:none; }
.xaxis{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; margin-top:6px; }
.xaxis div{ text-align:center; font-size:.72rem; font-weight:700; color:var(--muted); line-height:1.25; white-space:nowrap; overflow:hidden; }
.xaxis b{ display:block; color:var(--ink); font-weight:800; }
.xaxis .today{ color:var(--ink); }
.legend{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; font-size:.82rem; font-weight:700; color:var(--muted); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:12px; height:12px; border-radius:4px; flex:none; }
.c-mm{ background:var(--pink); } .c-nu{ background:var(--mint); } .c-unk{ background:var(--track); }
.c-mix{ background:linear-gradient(135deg, var(--pink) 50%, var(--mint) 50%); }
.c-nat{ background:var(--lilac); } .c-poep{ background:var(--peach-deep); }
.c-night{ background:var(--lilac-soft); border:1px solid var(--line); }
.tl{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px 8px; align-items:center; }
.tl .dl{ font-size:.75rem; font-weight:800; color:var(--muted); white-space:nowrap; }
.tl .dl.today{ color:var(--ink); }
.tl .gh{ font-size:.7rem; font-weight:800; color:var(--muted); text-align:right; line-height:1.1; }
.tl .tr{ position:relative; height:20px; border-radius:8px;
  background:linear-gradient(90deg, var(--lilac-soft) 0 29.17%, var(--surface-2) 29.17% 91.67%, var(--lilac-soft) 91.67%); }
.tl .dot{ position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; border:2px solid var(--surface); }
.tl .gp{ font-size:.75rem; font-weight:800; text-align:right; white-space:nowrap; }
.tl .ax{ position:relative; height:14px; }
.tl .ax span{ position:absolute; top:0; transform:translateX(-50%); font-size:.7rem; font-weight:700; color:var(--muted); }
.tl .ax span:first-child{ transform:none; }
.tl .ax span:last-child{ transform:translateX(-100%); }
.tl.dense{ gap:3px 8px; }
.tl.dense .tr{ height:12px; border-radius:5px; }
.tl.dense .dot{ width:8px; height:8px; margin:-4px 0 0 -4px; border-width:1px; }
.tl.dense .dl, .tl.dense .gp{ font-size:.68rem; }
.hist{ display:grid; grid-template-columns:repeat(24, minmax(0,1fr)); gap:2px; align-items:end; height:90px; border-bottom:2px solid var(--line); }
.hist span{ display:block; background:var(--peach); border-radius:4px 4px 0 0; }
.hist span.top{ background:var(--peach-deep); }
.hax{ display:grid; grid-template-columns:repeat(24, minmax(0,1fr)); gap:2px; margin-top:5px; }
.hax div{ font-size:.7rem; font-weight:700; color:var(--muted); white-space:nowrap; overflow:visible; }
.c-top{ background:var(--peach-deep); } .c-hour{ background:var(--peach); }
.st-card h3{ margin:0 0 10px; font-size:.95rem; font-weight:800; }
.st-card h3 + .tl{ margin-top:0; }
.st-card .split{ margin-top:20px; padding-top:16px; border-top:2px dashed var(--line); }
.c-kolf{ background:var(--lilac); }
.need{ margin-top:10px; }
.meter{ height:16px; border-radius:999px; background:var(--track); overflow:hidden; }
.meter span{ display:block; height:100%; border-radius:999px; background:var(--lilac); }
.meter.full span{ background:var(--mint); }
.need-line{ margin:10px 0 0; font-weight:700; }
.need-line b{ font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:1.3rem; font-weight:800; }
.need-sub{ margin:6px 0 0; font-size:.9rem; font-weight:600; color:var(--muted); }
.need-sub b{ color:var(--ink); }
.st-note{ margin:10px 4px 0; font-size:.82rem; font-weight:600; color:var(--muted); }
.signals{ display:grid; gap:8px; }
.sig{ display:grid; grid-template-columns:36px 1fr; gap:10px; align-items:center; padding:10px 12px; border-radius:18px; background:var(--surface-2); font-weight:700; font-size:.92rem; }
.sig .si{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:var(--surface); color:var(--muted); }
.sig .si svg{ width:22px; height:22px; }
.sig small{ display:block; font-weight:600; color:var(--muted); font-size:.82rem; }
.sig[data-s="ok"]{ background:var(--mint-soft); }
.sig[data-s="ok"] .si{ background:var(--mint); color:var(--on-pastel); }
.sig[data-s="warn"]{ background:var(--sun-soft); }
.sig[data-s="warn"] .si{ background:var(--sun); color:var(--on-pastel); }
.sig[data-s="late"]{ background:var(--late-soft); }
.sig[data-s="late"] .si{ background:var(--late); color:#fff; }
.wk{ overflow-x:auto; }
.wk table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.wk th, .wk td{ padding:9px 8px; text-align:right; white-space:nowrap; border-top:2px dashed var(--line); }
.wk thead th{ border-top:0; font-size:.78rem; font-weight:800; color:var(--muted); vertical-align:bottom; white-space:normal; }
.wk th:first-child, .wk td:first-child{ text-align:left; padding-left:4px; }
.wk td{ font-weight:800; }
.wk td:first-child{ font-weight:700; color:var(--muted); }

/* Vitamines */
.vit-btn{ display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center; width:100%; margin-top:22px; padding:12px 16px 12px 12px; text-align:left; border:2px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:0 3px 0 var(--line); transition:transform .1s ease; }
.vit-btn:active{ transform:translateY(2px); }
.vit-btn[disabled]{ opacity:.5; cursor:default; }
.vit-ic{ width:48px; height:48px; border-radius:16px; background:var(--sun); color:var(--on-pastel); display:grid; place-items:center; }
.vit-ic svg{ width:28px; height:28px; }
.vit-lbl{ display:block; font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:1.2rem; font-weight:800; line-height:1.15; }
.vit-sub{ display:block; font-size:.9rem; font-weight:700; color:var(--muted); }
.vit-btn[data-state="due"]{ background:var(--sun-soft); border-color:var(--sun-deep); box-shadow:0 3px 0 var(--sun-deep); }
.vit-btn[data-state="due"] .vit-sub{ color:var(--ink); }
.vit-btn[data-state="late"]{ background:var(--late-soft); border-color:var(--late); box-shadow:0 3px 0 var(--late); }
.vit-btn[data-state="late"] .vit-sub{ color:var(--late); }
.row[data-type="vitamine"] .ric{ background:var(--sun); }
.tag.sun{ background:var(--sun-soft); }
.seg button[data-type="vitamine"][aria-pressed="true"]{ background:var(--sun); color:var(--on-pastel); }
.sheet[data-type="vitamine"] .btn-primary{ background:var(--sun); box-shadow:0 4px 0 var(--sun-deep); }
.seg button{ min-width:0; gap:4px; }
@media (max-width:400px){ .seg button svg.ic{ display:none; } }

/* Archief */
.archive-btn{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin-top:24px; padding:14px 16px; border:2px dashed var(--line); border-radius:22px; background:none; color:var(--muted); font-weight:800; font-size:1rem; text-align:left; }
.archive-btn:active{ background:var(--surface-2); }
.archive-lbl, .archive-n{ display:flex; align-items:center; gap:8px; }
.archive-n{ font-size:.9rem; }
.archive-n .ic{ width:18px; height:18px; }
.archive-btn[aria-expanded="true"] .archive-n .ic{ transform:rotate(180deg); }

/* Uitklapbare opmerking */
.item{ border-top:2px dashed var(--line); }
.day-list .item:first-child{ border-top:0; }
.item > .row{ border-top:0; }
.item > .row:has(+ .note-d){ padding-bottom:6px; }
.note-d{ margin:0 16px 0 70px; padding-bottom:12px; }
.note-d summary{ display:inline-flex; align-items:center; gap:5px; list-style:none; cursor:pointer; padding:4px 10px 4px 8px; border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:.82rem; font-weight:800; -webkit-tap-highlight-color:transparent; }
.note-d summary::-webkit-details-marker{ display:none; }
.note-d summary .ic{ width:15px; height:15px; }
.note-d[open] summary .ic:last-child{ transform:rotate(180deg); }
.note-d summary:focus-visible{ outline:3px solid var(--lilac-deep); outline-offset:2px; }
.note-t{ margin:8px 0 0; color:var(--muted); font-size:.92rem; white-space:pre-wrap; overflow-wrap:anywhere; }

/* Wie en slaap */
.tag.who{ background:none; padding-left:2px; gap:5px; color:var(--muted); }
.tag.who i, .pn i, .sheet-by i, .tile .k i.dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.sleep-btn{ margin-top:12px; }
.sl-ic{ background:var(--lilac-soft); color:var(--lilac-deep); }
.sheet-by{ display:flex; align-items:center; gap:6px; margin:-4px 2px 12px; font-size:.85rem; font-weight:700; color:var(--muted); }
.sheet[data-type="slaap"] .chips button[aria-pressed="true"]{ background:var(--lilac-soft); border-color:var(--lilac-deep); }
.sheet[data-type="slaap"] .btn-primary{ background:var(--lilac); box-shadow:0 4px 0 var(--lilac-deep); }
.sl-night{ margin:8px 2px 0; font-size:.9rem; font-weight:700; color:var(--muted); }
.sl-lbl{ margin-top:18px; }
.sl-hours{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg); border:2px solid var(--line); border-radius:22px; padding:8px; }
.sl-hours:focus-within{ border-color:var(--lilac-deep); }
.sl-hours button{ width:52px; height:52px; flex:none; border:0; border-radius:16px; background:var(--surface); font-size:1.6rem; font-weight:800; line-height:1; box-shadow:0 2px 0 var(--line); }
.sl-hours button:active{ transform:translateY(2px); box-shadow:none; }
.sl-hours label{ display:flex; align-items:baseline; justify-content:center; gap:6px; min-width:0; }
.sl-hours input{ width:4.2ch; border:0; background:none; color:var(--ink); font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:2.3rem; font-weight:800; line-height:1.1; text-align:right; padding:0; }
.sl-hours input:focus-visible{ outline:none; }
.sl-hours .unit{ font-size:1rem; font-weight:800; color:var(--muted); }
.sl-hint{ margin:10px 2px 0; font-size:.85rem; font-weight:600; color:var(--muted); }
.sl-card{ margin-top:10px; }
.tiles > .empty{ grid-column:1 / -1; background:var(--surface); border-radius:22px; box-shadow:0 3px 0 var(--line); }
.pn{ display:inline-flex; align-items:center; gap:5px; }
.wk thead th .pn{ color:var(--ink); }
.assign-btn{ margin-top:12px; }
/* Dagadvies */
.day-card{ display:block; width:100%; margin-top:22px; padding:14px 16px; text-align:left; border:2px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:0 3px 0 var(--line); color:var(--ink); }
.dc-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.dc-lbl{ font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:1.2rem; font-weight:800; }
.dc-val{ font-weight:800; color:var(--muted); white-space:nowrap; }
.dc-val b{ font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:1.35rem; color:var(--ink); }
/* één neutrale kleur: de indicatie is geen doel, dus geen "gehaald" of "te veel" */
.day-card .meter span{ background:var(--peach-deep); }
.dc-sub{ display:block; margin-top:8px; font-size:.9rem; font-weight:700; color:var(--muted); }
.dc-sub b{ color:var(--ink); }
.dc-note{ display:block; margin-top:6px; font-size:.8rem; font-weight:600; color:var(--muted); }
.dc-note[hidden]{ display:none; }
/* Vitamines als grote knop */
.big-btn.vit{ background:var(--sun); box-shadow:0 6px 0 var(--sun-deep); }
.big-btn.vit:active{ box-shadow:0 1px 0 var(--sun-deep); }
.big-btn.wide{ width:100%; margin-top:18px; min-height:0; flex-direction:row; justify-content:flex-start; gap:14px; padding:12px 16px; text-align:left; }
.big-btn.wide .btn-ic{ margin-bottom:0; flex:none; }
.vit-txt{ display:flex; flex-direction:column; min-width:0; }
.vit-stat{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:3px; font-size:.95rem; font-weight:800; }
.vit-stat .t{ font-weight:700; opacity:.75; }
.vit-stat .mk{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none; color:#FFFFFF; }
.vit-stat .mk svg{ width:15px; height:15px; }
.vit-stat .mk.ok{ background:#2E9E6B; }
.vit-stat .mk.no{ background:#D9443C; }
.big-btn.wide + .day-card{ margin-top:18px; }
/* Ouders */
.brand > div{ min-width:0; }
.ou-btn{ margin-left:auto; position:relative; display:inline-flex; align-items:center; gap:6px; height:42px; flex:none; padding:0 14px 0 11px; border-radius:999px; border:2px solid var(--line); background:var(--surface); color:var(--ink); font-weight:800; font-size:.95rem; }
.ou-btn svg{ width:20px; height:20px; color:var(--lilac-deep); }
.ou-btn:active{ transform:scale(.96); }
.ou-btn[data-todo="true"]::after{ content:""; position:absolute; top:-2px; right:-2px; width:12px; height:12px; border-radius:50%; background:var(--late); border:2px solid var(--bg); }
.ou-btn + .mode-btn{ margin-left:8px; }
@media (max-width:360px){ .ou-btn .lbl{ display:none; } .ou-btn{ padding:0 10px; } }
#ouSheet .tiles{ margin-top:2px; }
#ouSheet .tile{ background:var(--surface-2); box-shadow:none; }
#ouSheet .sleep-btn{ margin-top:14px; }
.ou-note{ margin:12px 2px 0; font-size:.85rem; font-weight:600; color:var(--muted); }
.as-plan{ display:grid; gap:8px; margin-top:18px; }
#byChips button, #asChips button, #asHits button{ display:inline-flex; align-items:center; }

/* Taken */
.tabs{ grid-template-columns:repeat(5, auto); }
.tabs button svg.ic{ display:none; }
.tabs button{ overflow:hidden; text-overflow:ellipsis; font-size:.95rem; }
#tabTaken{ position:relative; }
#tabTaken[aria-selected="true"]{ background:var(--lilac); }
#tabTaken[data-late="true"]::after{ content:""; position:absolute; top:4px; right:4px; width:9px; height:9px; border-radius:50%; background:var(--late); border:2px solid var(--surface-2); }
@media (max-width:480px){ .tabs{ gap:3px; } .tabs button{ font-size:.86rem; padding:10px 1px; } }
@media (max-width:400px){ .tabs button{ font-size:.8rem; } }
@media (max-width:350px){ .tabs button{ font-size:.74rem; } }

.tk-sec{ margin-top:22px; }
.tk-balance{ display:flex; gap:10px; }
.tk-side{ flex:1 1 0; min-width:7.5rem; border:0; border-radius:24px; padding:12px 14px 14px; display:grid; text-align:left; color:var(--ink); box-shadow:0 3px 0 var(--line); transition:flex-grow .5s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.tk-side.papa{ background:var(--mint-soft); --c:var(--mint); }
.tk-side.mama{ background:var(--pink-soft); --c:var(--pink); }
.tk-side[aria-pressed="true"]{ box-shadow:inset 0 0 0 3px var(--c), 0 3px 0 var(--line); }
.tk-balance.filtering .tk-side[aria-pressed="false"]{ opacity:.45; }
.tk-side:active{ transform:translateY(2px); }
.tk-name{ display:flex; align-items:center; gap:7px; font-weight:800; }
.tk-name i, .tk-pill i{ flex:none; width:11px; height:11px; border-radius:50%; background:var(--c); }
.tk-count{ font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-weight:800; font-size:2.6rem; line-height:1; margin-top:6px; }
.tk-open{ font-size:.85rem; font-weight:700; color:var(--muted); }
.tk-open.late{ color:var(--late); }
.tk-hint{ margin:10px 4px 0; font-size:.9rem; font-weight:700; color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.tk-hint button{ border:0; background:none; padding:4px 0; font-weight:800; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.tk-add{ margin-top:16px; }
.tk-add .fld:first-child{ margin-top:0; }
.tk-add .flbl{ margin-top:16px; }
.tk-whoseg{ grid-template-columns:1fr 1fr; }
.tk-whoseg button[data-who="papa"][aria-pressed="true"]{ background:var(--mint); color:var(--on-pastel); }
.tk-whoseg button[data-who="mama"][aria-pressed="true"]{ background:var(--pink); color:var(--on-pastel); }
#tkChips{ margin:0 0 10px; }
#tkChips button[aria-pressed="true"]{ background:var(--lilac-soft); border-color:var(--lilac-deep); }
.tk-add .fld.tk-due{ margin-top:0; }
.tk-err{ margin:12px 2px 0; color:var(--late); font-weight:700; font-size:.92rem; }
.tk-add .btn-primary{ display:block; width:100%; margin-top:18px; background:var(--lilac); box-shadow:0 4px 0 var(--lilac-deep); }
.tk-add .btn-primary:disabled{ opacity:.5; cursor:default; }
.tk-group{ margin-top:24px; }
.tk-group.late .day-head h2{ color:var(--late); }
.tk-list{ list-style:none; margin:0; padding:0; background:var(--surface); border-radius:26px; overflow:hidden; box-shadow:0 3px 0 var(--line); }
.tk-row{ display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; padding:12px 12px 12px 14px; border-top:2px dashed var(--line); }
.tk-row:first-child{ border-top:0; }
.tk-row[data-who="papa"]{ --c:var(--mint); --c-soft:var(--mint-soft); }
.tk-row[data-who="mama"]{ --c:var(--pink); --c-soft:var(--pink-soft); }
.tk-check{ width:44px; height:44px; padding:0; border-radius:16px; border:2.5px solid var(--c); background:none; display:grid; place-items:center; color:var(--ink); }
.tk-check svg{ width:24px; height:24px; opacity:0; transition:opacity .15s; }
.tk-check:not(:disabled):hover svg{ opacity:.3; }
.tk-row.done .tk-check{ background:var(--c); color:var(--on-pastel); }
.tk-row.done .tk-check svg{ opacity:1; }
.tk-main{ min-width:0; }
.tk-t{ display:block; font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-weight:700; font-size:1.15rem; line-height:1.2; overflow-wrap:anywhere; }
.tk-row.done .tk-t{ text-decoration:line-through; color:var(--muted); }
.tk-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:5px; font-size:.85rem; font-weight:700; color:var(--muted); }
.tk-pill{ display:inline-flex; align-items:center; gap:5px; border:0; border-radius:999px; padding:3px 10px 3px 7px; font-size:.82rem; font-weight:800; background:var(--c-soft); color:var(--ink); }
.tk-pill:disabled{ cursor:default; }
.tk-group.late .tk-due{ color:var(--late); }
.tk-del{ min-width:38px; height:38px; border-radius:999px; border:0; background:var(--surface-2); color:var(--muted); font-size:1.3rem; line-height:1; display:grid; place-items:center; padding:0; }
.tk-del.armed{ padding:0 12px; background:var(--late); color:#fff; font-size:.85rem; font-weight:800; }
.tk-empty{ margin-top:24px; background:var(--surface); border-radius:20px; box-shadow:0 3px 0 var(--line); }
.tk-done{ margin-top:26px; }
.tk-done > summary{ cursor:pointer; padding:0 4px 10px; font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:1.35rem; font-weight:800; }
.tk-clear{ margin-top:12px; }
@media (prefers-reduced-motion: reduce){ .tk-side, .tk-check svg{ transition:none; } }

/* voorstel om het ritme aan te passen (Schema) */
.rs-card{ margin:0 0 22px; padding:16px 18px; border-radius:20px; background:var(--peach-soft); border:2px solid var(--peach-deep); }
.rs-text{ margin:0; font-weight:700; }
.rs-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; align-items:center; }
.rs-btns .btn-primary{ flex:none; width:auto; margin:0; padding:10px 18px; font-size:1rem; }
.rs-no{ border:0; background:none; font:inherit; font-weight:800; color:var(--muted); padding:10px 6px; cursor:pointer; }
.rs-note{ margin:10px 0 0; font-size:.8rem; font-weight:600; color:var(--muted); }
[role="tab"][data-todo="true"]{ position:relative; }
[role="tab"][data-todo="true"]::after{ content:""; position:absolute; top:4px; right:4px; width:9px; height:9px; border-radius:50%; background:var(--peach-deep); border:2px solid var(--surface-2); }
.bt-age{ color:var(--ink); font-size:1rem; }
/* Gewichtsverloop (Overzicht) */
.gw-chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.gw-chart polyline{ fill:none; stroke:var(--peach-deep); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.gw-chart circle{ fill:var(--peach-deep); }
.gw-chart text{ fill:var(--muted); font-size:10px; font-weight:700; }
.gw-chart + .gw-list{ margin-top:12px; }
.gw-list table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.gw-list th, .gw-list td{ text-align:right; padding:6px 4px; border-bottom:1px dashed var(--line); white-space:nowrap; }
.gw-list th:first-child, .gw-list td:first-child{ text-align:left; }
.gw-list th{ font-size:.78rem; font-weight:800; color:var(--muted); }
.gw-list td.gw-x{ width:1%; padding:0; }
.gw-del{ border:0; background:none; color:var(--muted); font-weight:800; font-size:.85rem; padding:6px 8px; border-radius:999px; }
.gw-del.confirm{ color:var(--late); }
.gw-add{ display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
.gw-add .gw-btn{ grid-column:1 / -1; margin-top:14px; width:100%; }

/* taalkeuze (js/i18n.js, [data-taalknop]) */
.taal{ display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--surface); border:2px solid var(--line); flex:none; }
.taal button{ display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; border-radius:999px; padding:4px 7px;
  font:inherit; font-size:.75rem; font-weight:800; color:var(--muted); cursor:pointer; opacity:.6; }
.taal button[aria-pressed="true"]{ opacity:1; background:var(--surface-2); color:var(--ink); }
.taal svg{ width:20px; height:13px; border-radius:3px; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.taal-kort{ margin-left:8px; }
.taal-kort span{ display:none; }
.taal-kort button{ padding:5px 6px; }
.taal-kort button[aria-pressed="false"]{ display:none; }
.taal-kort button[aria-pressed="true"]{ background:transparent; }
.taal-kort + .mode-btn{ margin-left:8px; }
.gate-brand .taal{ margin-left:auto; }
.pv-back{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
/* kop op smalle schermen: met de taalknop erbij iets minder ruimte tussen de knoppen */
@media (max-width:430px){ header.brand{ gap:6px; } header.brand .ou-btn{ padding:0 9px; } .taal-kort, .taal-kort + .mode-btn{ margin-left:0; } .taal-kort button{ padding:5px 4px; } .sync{ white-space:nowrap; font-size:.76rem; } }