@font-face { font-family: 'Quicksand'; src: url('fonts/quicksand.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('fonts/nunito-sans.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; }

:root {
  --water: #4ea8de; --water-d: #006590; --water-l: #e7f6ff; --water-ll: #f4faff;
  --amber: #ffd166; --amber-l: #fff6dc; --koraal: #ff8a65; --koraal-l: #ffe9e1;
  --munt: #52b788; --munt-l: #e3f6ec; --plas: #ffd98a;
  --tekst: #2f4450; --tekst-2: #5c6b73; --lijn: rgba(92, 107, 115, .1);
  --kaart: #fff; --schaduw: 0 8px 24px -6px rgba(78, 168, 222, .18);
  --r: 32px; --r-s: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Nunito Sans', system-ui, sans-serif; color: var(--tekst);
  background: var(--water-ll); -webkit-tap-highlight-color: transparent;
  transition: background .6s;
}
body.rust { background: #f1f3fa; }
h1, h2, h3, .knop, .tab, b { font-family: 'Quicksand', system-ui, sans-serif; }
h2 { font-size: 1.25rem; margin: 0 0 .75rem; display: flex; align-items: center; gap: .5rem; }
h2 svg { width: 1.4em; height: 1.4em; color: var(--amber); }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; }
a { color: inherit; text-decoration: none; }

#app { max-width: 1180px; margin: 0 auto; padding: 0 20px 100px; }

/* header */
.kop { display: flex; align-items: center; gap: 16px; padding: 14px 0; position: sticky; top: var(--fb-balk-hoogte, 0px); z-index: 5; background: inherit; }
body .kop { background: var(--water-ll); }
body.rust .kop { background: #f1f3fa; }
.merk { display: flex; align-items: center; gap: 8px; }
.merk b { display: block; font-size: 1.2rem; color: var(--water-d); }
.merk small { color: var(--tekst-2); font-size: .85rem; }
.tabs { display: flex; gap: 4px; background: #fff; padding: 6px; border-radius: 999px; box-shadow: var(--schaduw); margin: 0 auto; }
.tab { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-weight: 600; color: var(--tekst-2); min-height: 48px; }
.tab svg { width: 24px; height: 24px; }
.tab.actief { background: var(--water); color: #fff; }
.instelknop { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--tekst-2); box-shadow: var(--schaduw); }
.instelknop svg { width: 24px; height: 24px; }
.instelknop.actief { background: var(--tekst); color: #fff; }

/* generic */
.kaart { background: var(--kaart); border-radius: var(--r); box-shadow: var(--schaduw); padding: 24px; }
.scherm { display: grid; gap: 20px; padding-top: 8px; }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; padding: 14px 24px; font-weight: 700; font-size: 1.05rem; background: var(--water-l); color: var(--water-d); min-height: 56px; transition: transform .1s; }
.knop:active { transform: translateY(2px); }
.knop:disabled { opacity: .4; }
.knop svg { width: 26px; height: 26px; }
.knop.klein { min-height: 44px; padding: 8px 16px; font-size: .95rem; }
.knop.klein svg { width: 20px; height: 20px; }
.knop.water-k { background: var(--water); color: #fff; }
.knop.bevestig-k { background: var(--munt); color: #fff; }
.rond { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--water-l); color: var(--water-d); }
.rond svg { width: 30px; height: 30px; }
.rond.klein { width: 44px; height: 44px; }
.rond.klein svg { width: 22px; height: 22px; }
.rond:disabled { opacity: .35; }
.tag { font-style: normal; font-size: .72rem; font-weight: 700; background: var(--water-l); color: var(--water-d); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.uitleg { color: var(--tekst-2); margin: -.25rem 0 1rem; }
.moment-icoon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--amber-l); color: #b07d00; }
.moment-icoon svg { width: 26px; height: 26px; }
.moment-icoon.klein { width: 36px; height: 36px; }
.moment-icoon.klein svg { width: 22px; height: 22px; }

/* timeline home */
.held { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 28px; }
.held-midden { display: grid; gap: 12px; justify-items: center; }
.beloning { display: flex; align-items: center; gap: 10px; }
.beloning .pijl svg { width: 28px; height: 28px; color: #c3cdd4; }
.kado { width: 84px; height: 84px; border-radius: 50%; background: var(--koraal-l); color: var(--koraal); display: grid; place-items: center; }
.kado svg { width: 44px; height: 44px; }
.kado.aan { background: var(--amber-l); animation: pop .5s; }
.sticker.groot { font-size: 3.2rem; }
.sticker.reuze { font-size: 7rem; line-height: 1; animation: pop .6s; }
.teller { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; max-width: 220px; }
.teller .mini { width: 22px; height: 22px; border-width: 2px; }
.plus-glazen { font-family: 'Quicksand'; font-weight: 700; color: var(--koraal); margin-left: 4px; }
.held-figuur .figuur { animation: wiebel 4s ease-in-out infinite; }
@keyframes wiebel { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-2deg); } }
.held-fles { position: relative; display: flex; align-items: flex-end; gap: 8px; }
.fles { width: 70px; height: 124px; }
.fles-tel { font-family: 'Quicksand'; color: var(--tekst-2); font-size: 1.1rem; }
.fles-tel b { font-size: 2rem; color: var(--water-d); }
.held-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; justify-self: end; width: min(100%, 460px); }
.knop.groot { flex-direction: column; min-height: 120px; border-radius: 28px; font-size: 1.15rem; }
.knop.groot svg { width: 48px; height: 48px; }
.knop.water { background: var(--water); color: #fff; }
.knop.plas { background: var(--amber); color: #6b4c00; }
.knop.ander { background: var(--koraal-l); color: #8a3a1e; grid-column: 1 / -1; }

.momenten { display: flex; gap: 14px; align-items: stretch; }
.moment { flex: 1 1 0; background: #fff; border-radius: var(--r-s); padding: 14px 10px; box-shadow: var(--schaduw); display: flex; flex-direction: column; gap: 10px; transition: flex .3s; min-width: 0; }
.moment.nu { flex: 2.2 1 0; background: var(--amber-l); outline: 3px solid var(--amber); }
.moment.straks { background: #f6f8fa; box-shadow: none; }
.moment.straks .moment-icoon { background: #e9edf1; color: #9aa7b0; }
.moment.voorbij { opacity: .92; }
.moment-kop { display: flex; align-items: center; gap: 6px; position: relative; }
.moment-naam { font-family: 'Quicksand'; font-weight: 700; font-size: .85rem; color: var(--tekst-2); min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.moment.nu .moment-naam { color: var(--tekst); font-size: 1.1rem; }
.plas-rij { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; padding-top: 8px; border-top: 1.5px dashed #f1e2b8; }
.plas-stip { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff3d1; color: #d9a200; }
.plas-stip svg { width: 16px; height: 16px; fill: #ffd98a; }
.ster-badge { margin-left: auto; color: #e0a800; }
.ster-badge svg { width: 30px; height: 30px; fill: var(--amber); animation: pop .5s; }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }
.glazen { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; flex: 1; align-items: center; }
.glas-knop { border: 0; background: none; padding: 4px; border-radius: 16px; width: 64px; }
.moment.nu .glas-knop { width: 96px; }
.glas-knop:disabled { cursor: default; }
.glas-knop.nog { background: var(--water-l); outline: 2px dashed #9fd0ee; }
.glas-svg { width: 100%; height: auto; }
.glas-svg rect.water { transition: y .55s ease-in, height .55s ease-in; }
.plons { animation: plons .45s; }
@keyframes plons { 30% { transform: scale(.94); } 70% { transform: scale(1.04); } }
.moment.rust { flex: .9 1 0; background: #eceffa; box-shadow: none; }
.moment.rust .moment-icoon { background: #dfe3f5; color: #5b64a8; }
.moment.rust.nu { outline: 3px solid #b9c0ea; flex: 1.6 1 0; }
.rust-tekst { flex: 1; display: grid; place-items: center; }
.zzz { font-family: 'Quicksand'; font-weight: 700; font-size: 2rem; color: #9aa3d6; }
.zzz span { font-size: .75em; margin-left: 2px; }
.zzz span + span { font-size: .55em; }
/* evening rest time: logging stays possible, but nothing invites to drink */
body.rust .knop.water { background: #dfe3f5; color: #4a548f; }
body.rust .glas-knop.nog { outline: none; background: none; }
body.rust .tik-hint { display: none; }
.melding { display: flex; gap: 10px; align-items: center; margin: 0; }
.melding svg { width: 24px; height: 24px; }

.undo { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--tekst); color: #fff; min-height: 64px; padding: 12px 28px; font-size: 1.2rem; z-index: 20; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); animation: opkomen .25s; }
@keyframes opkomen { from { opacity: 0; transform: translate(-50%, 20px); } }

/* drinken */
.drinken { grid-template-columns: 1fr 300px; align-items: start; }
.drink-midden { display: grid; place-items: center; gap: 12px; min-height: 520px; position: relative; }
.groot-glas { border: 0; background: none; padding: 10px; width: min(300px, 70vw); position: relative; border-radius: 40px; }
.groot-glas.rustig { filter: saturate(.6); }
.glas-onder { display: flex; align-items: center; gap: 12px; }
.tik-hint { display: inline-flex; align-items: center; gap: 6px; font-family: 'Quicksand'; font-weight: 700; color: var(--water-d); font-size: 1.2rem; animation: puls 2s infinite; }
.tik-hint svg { width: 22px; height: 22px; }
@keyframes puls { 50% { opacity: .5; } }
.alles-op { display: grid; place-items: center; gap: 12px; }
.straks-tekst { display: flex; align-items: center; gap: 8px; font-family: 'Quicksand'; font-size: 1.3rem; font-weight: 700; color: var(--tekst-2); }
.straks-tekst > svg { width: 30px; height: 30px; color: var(--munt); }
.drink-zij { display: grid; gap: 20px; justify-items: center; }
.mini-glazen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mini { width: 34px; height: 34px; border-radius: 50%; background: #e9eef2; border: 3px solid #fff; box-shadow: 0 0 0 2px #dbe7ee; }
.mini.half { background: linear-gradient(to top, var(--water) 50%, #e9eef2 50%); }
.mini.vol { background: var(--water); }
.held-fles.klein .fles { width: 56px; height: 100px; }
.knop.groot2 { width: 100%; min-height: 72px; }
.drink-midden .undo { position: absolute; bottom: auto; top: 20px; left: 20px; transform: none; animation: none; }
.rust-drinken { display: grid; justify-items: center; gap: 24px; color: #8c95cf; }
.rust-drinken > svg { width: 140px; height: 140px; }
.extra-label { display: inline-flex; align-items: center; gap: 4px; font-family: 'Quicksand'; font-weight: 700; color: var(--koraal); }
.extra-label svg { width: 20px; height: 20px; }
.vandaag-sticker { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.export-blok h2 svg { color: var(--water); }
.rapport { display: none; }

/* plassen */
.plassen { grid-template-columns: 1fr auto; align-items: center; }
.beker-kaart { display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: center; gap: 12px; }
.beker-wrap { display: grid; justify-items: center; }
.maatbeker { width: min(380px, 62vw); height: auto; touch-action: none; cursor: ns-resize; }
.maatbeker:focus { outline: none; }
.maatbeker:focus-visible { outline: 3px solid var(--water); border-radius: 20px; }
.beker-label { font-family: 'Quicksand'; font-size: 15px; font-weight: 700; fill: #5c6b73; }
.ml-klein { color: var(--tekst-2); font-size: .95rem; margin: 4px 0 0; }
.knop.bevestig { background: var(--munt); color: #fff; width: 180px; height: 180px; border-radius: 50%; padding: 0; box-shadow: 0 12px 30px -8px rgba(82, 183, 136, .6); }
.knop.bevestig svg { width: 90px; height: 90px; stroke-width: 2.6; }

/* trofeeen */
.vandaag-sterren { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.sterren-rij { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ster-plek { display: grid; justify-items: center; gap: 6px; }
.ster-groot svg { width: 56px; height: 56px; color: #d5dde3; }
.ster-plek.aan .ster-groot svg { fill: var(--amber); color: #e0a800; }
.ster-plek.pijl svg { width: 28px; height: 28px; color: #c3cdd4; }
.ster-plek.kado { width: 84px; height: 84px; border-radius: 50%; background: var(--koraal-l); color: var(--koraal); place-items: center; }
.ster-plek.kado svg { width: 44px; height: 44px; }
.ster-plek.kado.aan { background: var(--amber-l); }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; }
.album-item { aspect-ratio: 1; border-radius: 24px; background: #f3f6f8; display: grid; place-items: center; align-content: center; gap: 4px; }
.album-item.aan { background: var(--amber-l); }
.sticker { font-size: 3rem; line-height: 1; }
.album-item small { color: var(--tekst-2); font-size: .75rem; }
.vraag svg { width: 36px; height: 36px; color: #c6d0d7; }

/* grafiek */
.dag-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dag-nav b { font-size: 1.15rem; min-width: 14ch; text-align: center; display: inline-block; }
.dag-nav b::first-letter, .rapport-dag h3::first-letter, .sectie-kop h2::first-letter { text-transform: uppercase; }
.schakel { margin-left: auto; background: #fff; border-radius: 999px; padding: 4px; box-shadow: var(--schaduw); display: flex; }
.schakel button { border: 0; background: none; padding: 8px 18px; border-radius: 999px; font-family: 'Quicksand'; font-weight: 700; color: var(--tekst-2); min-height: 40px; }
.schakel button.aan { background: var(--water); color: #fff; }
.totalen { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.tegel { background: #fff; border-radius: var(--r-s); padding: 14px; box-shadow: var(--schaduw); display: grid; gap: 2px; }
.tegel svg { width: 22px; height: 22px; color: var(--tekst-2); }
.tegel.water svg { color: var(--water); }
.tegel.ander svg { color: var(--koraal); }
.tegel.plas svg { color: #d9a200; }
.tegel b { font-size: 1.6rem; }
.tegel small { color: var(--tekst-2); font-size: .8rem; }
.grafiek-svg { width: 100%; height: auto; }
.grafiek-svg .as { font-family: 'Nunito Sans'; font-size: 13px; fill: #8a99a3; text-anchor: middle; }
.grafiek-svg .as.links { text-anchor: start; }
.legende { display: flex; gap: 8px; align-items: center; color: var(--tekst-2); font-size: .85rem; margin-bottom: 8px; }
.legende .l { width: 14px; height: 14px; border-radius: 4px; display: inline-block; margin-left: 10px; }
.l.water { background: var(--water); } .l.ander { background: var(--koraal); } .l.plas { background: var(--plas); }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.log li { display: grid; grid-template-columns: 60px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 16px; background: var(--water-ll); }
.log li.ander { background: #fff6f2; }
.log li.plas { background: #fffaf0; }
.log li.leeg { display: block; color: var(--tekst-2); }
.log time { font-family: 'Quicksand'; font-weight: 700; color: var(--tekst-2); }
.log small { color: var(--tekst-2); display: block; }
.ouder-link { justify-self: start; }
.tabel-wrap { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabel th { text-align: left; font-family: 'Quicksand'; color: var(--tekst-2); font-weight: 700; padding: 8px 10px; border-bottom: 2px solid var(--water-l); }
.tabel td { padding: 8px 10px; border-bottom: 1px solid var(--lijn); }
.tabel tfoot td { font-weight: 700; border-top: 2px solid var(--water-l); }

/* parents */
.slot { place-items: center; }
.slot-kaart { text-align: center; display: grid; justify-items: center; gap: 8px; width: min(420px, 100%); }
.slot-icoon svg { width: 44px; height: 44px; color: var(--tekst-2); }
.slot h1 { margin: 0; font-size: 1.4rem; }
.som { font-family: 'Quicksand'; font-size: 2rem; font-weight: 700; margin: 4px 0 12px; }
.som .invoer { color: var(--water-d); display: inline-block; min-width: 2.5ch; border-bottom: 3px solid var(--water-l); }
.toetsen { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px; }
.toetsen button { height: 64px; border: 0; border-radius: 20px; background: var(--water-ll); font-family: 'Quicksand'; font-size: 1.5rem; font-weight: 700; display: grid; place-items: center; }
.toetsen button svg { width: 26px; height: 26px; }
.toetsen .ok { background: var(--munt); color: #fff; }
.terug-link { display: inline-flex; align-items: center; gap: 4px; color: var(--tekst-2); margin-top: 8px; }
.terug-link svg { width: 18px; height: 18px; }

.ouder-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.ouder-nav a, .ouder-nav button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: var(--schaduw); border: 0; font-family: 'Quicksand'; font-weight: 700; color: var(--tekst-2); min-height: 44px; }
.ouder-nav svg { width: 20px; height: 20px; }
.ouder-nav .aan { background: var(--tekst); color: #fff; }
.ouder-nav .sluit { margin-left: auto; }
.sectie-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sectie-kop h2 { margin: 0; text-transform: none; }
.ouder-log li { grid-template-columns: 60px 1fr auto auto; }
.acties { display: flex; gap: 6px; }
.rond.mini-k { width: 40px; height: 40px; background: #fff; }
.rond.mini-k svg { width: 18px; height: 18px; }
.ouder-log li.bewerk { display: block; background: var(--amber-l); }
.ouder-log form, .nieuw-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.nieuw-form { margin-bottom: 12px; background: var(--water-ll); box-shadow: none; padding: 16px; }
label { display: grid; gap: 4px; font-size: .85rem; color: var(--tekst-2); font-weight: 600; }
label.breed { flex: 1 1 220px; }
input, select { font: inherit; font-size: 1rem; padding: 10px 12px; border-radius: 14px; border: 1.5px solid #d5e5ee; background: #fff; color: var(--tekst); min-height: 44px; }
input:focus, select:focus { outline: 2.5px solid var(--water); border-color: transparent; }
input[type="number"] { width: 110px; }
.tabel.invul input { width: 90px; }
.tabel.invul .ic svg { width: 26px; height: 26px; color: #b07d00; }
.velden { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.ster-beheer { display: flex; gap: 10px; flex-wrap: wrap; }
.ster-toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: #f3f6f8; border-radius: 999px; padding: 8px 14px; min-height: 48px; font-family: 'Quicksand'; font-weight: 700; color: var(--tekst-2); }
.ster-toggle svg { width: 22px; height: 22px; }
.ster-toggle.aan { background: var(--amber-l); color: #7a5900; }
.ster-toggle.aan svg:last-child { fill: var(--amber); }
.ster-toggle:disabled { cursor: default; }
.export-keuze { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pil { border: 0; background: var(--water-ll); border-radius: 999px; padding: 8px 18px; font-family: 'Quicksand'; font-weight: 700; min-height: 44px; }
.pil.aan { background: var(--water); color: #fff; }
.export-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.rapport-kop h2 { display: block; margin-bottom: 0; }
.rapport-kop p { color: var(--tekst-2); margin-top: 4px; }
.rapport-dag h3 { margin: 20px 0 6px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--koraal-l); border-radius: 999px; padding: 6px 6px 6px 12px; font-weight: 600; }
.chip svg { width: 20px; height: 20px; }
.chip button { border: 0; background: #fff; border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; }
.chip button svg { width: 14px; height: 14px; }
.rij-form { display: flex; gap: 8px; flex-wrap: wrap; }
.schakelaar { display: flex; align-items: center; gap: 12px; font-size: 1rem; color: var(--tekst); font-weight: 400; margin: 10px 0; cursor: pointer; }
.schakelaar input { position: absolute; opacity: 0; }
.schakelaar span { flex: none; width: 52px; height: 30px; border-radius: 999px; background: #cfd9e0; position: relative; transition: background .2s; }
.schakelaar span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.schakelaar input:checked + span { background: var(--munt); }
.schakelaar input:checked + span::after { transform: translateX(22px); }
.schakelaar input:focus-visible + span { outline: 2.5px solid var(--water); outline-offset: 2px; }
.figuur-keuze { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.figuur-keuze button { border: 3px solid transparent; background: var(--water-ll); border-radius: 24px; padding: 8px 14px; display: grid; justify-items: center; font-family: 'Quicksand'; font-weight: 700; }
.figuur-keuze button.aan { border-color: var(--water); background: #fff; }
.koppel { display: flex; align-items: center; gap: 20px; }
.qr { width: 120px; height: 120px; background: #fff; padding: 6px; border-radius: 12px; border: 1.5px solid #d5e5ee; }
.code { font-size: 1.8rem; letter-spacing: .08em; }
.toestellen { list-style: none; padding: 0; display: grid; gap: 8px; }
.toestellen li { display: flex; align-items: center; gap: 10px; }
.demo-kaart { background: #fffbe9; }
.demo-tijd { display: flex; align-items: center; gap: 16px; }
.demo-tijd input { flex: 1; accent-color: var(--water); }
.demo-tijd b { font-size: 1.6rem; }
.link { display: inline-flex; align-items: center; gap: 4px; color: var(--water-d); font-weight: 700; margin-top: 12px; }
.link svg { width: 18px; height: 18px; }

/* dialog */
.dialoog-achter { position: fixed; inset: 0; background: rgba(47, 68, 80, .35); z-index: 30; animation: fade .2s; }
.dialoog { position: fixed; z-index: 31; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 36px; padding: 32px; width: min(560px, 92vw); max-height: 92vh; overflow: auto; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sluit-x { position: absolute; top: 14px; right: 14px; width: 52px; height: 52px; }
.soort-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.soort { border: 0; background: var(--koraal-l); border-radius: 28px; padding: 20px; display: grid; justify-items: center; gap: 8px; font-family: 'Quicksand'; font-weight: 700; font-size: 1.1rem; color: #8a3a1e; min-height: 140px; }
.soort svg { width: 64px; height: 64px; }
.ander-glas { display: grid; justify-items: center; gap: 12px; }
.soort-icoon svg { width: 52px; height: 52px; color: var(--koraal); }
.ander-glas .groot-glas { width: 200px; }
.ander-kleur .water { fill: #ffc1a8; }
.ander-knoppen { display: flex; gap: 16px; align-items: center; }
.knop.bevestig.klein-b { width: 96px; height: 96px; }
.knop.bevestig.klein-b svg { width: 52px; height: 52px; }

/* toast */
#toast { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.8); background: #fff; border-radius: 28px; padding: 18px 26px; box-shadow: 0 20px 50px rgba(47, 68, 80, .25); font-family: 'Quicksand'; font-weight: 700; font-size: 1.2rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; display: flex; align-items: center; gap: 10px; }
#toast.zichtbaar { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#toast svg { width: 28px; height: 28px; }
.toast-ster svg { width: 110px !important; height: 110px !important; fill: var(--amber); color: #e0a800; animation: pop .5s; }
.toast-ok { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--munt); color: #fff; }
.toast-ok svg { width: 60px !important; height: 60px !important; }

/* tablet portrait */
@media (max-width: 1000px) {
  .tab span { display: none; }
  .tab { padding: 10px 14px; }
  .held { grid-template-columns: auto auto; }
  .held-knoppen { grid-column: 1 / -1; justify-self: stretch; width: 100%; grid-template-columns: 1fr 1fr 1fr; }
  .knop.ander { grid-column: auto; flex-direction: column; min-height: 120px; border-radius: 28px; }
  .knop.ander svg { width: 40px; height: 40px; }
  .momenten { flex-wrap: wrap; }
  .moment { flex: 1 1 28%; }
  .moment.nu, .moment.rust.nu { flex: 1 1 100%; order: -1; }
  .moment.rust.nu { flex-direction: row; align-items: center; }
  .drinken { grid-template-columns: 1fr; }
  .drink-zij { grid-template-columns: auto auto 1fr; align-items: center; }
  .totalen { grid-template-columns: repeat(3, 1fr); }
}

/* phone */
@media (max-width: 640px) {
  #app { padding: 0 12px 110px; }
  .kop { gap: 8px; }
  .merk span { display: none; }
  .tabs { position: fixed; bottom: 10px; left: 10px; right: 10px; justify-content: space-around; z-index: 10; }
  .tab { flex-direction: column; gap: 2px; padding: 6px 8px; font-size: .7rem; min-height: 56px; }
  .tab span { display: block; }
  .instelknop { margin-left: auto; }
  .fb-knop { bottom: 92px !important; }
  .kaart { padding: 18px; border-radius: 26px; }
  .held { grid-template-columns: 1fr auto; gap: 12px; }
  .held-figuur .figuur { width: 110px; height: 110px; }
  .held-knoppen { grid-template-columns: 1fr 1fr; }
  .knop.ander { grid-column: 1 / -1; flex-direction: row; min-height: 64px; }
  .moment { flex: 1 1 40%; }
  .glas-knop { width: 56px; }
  .moment.nu .glas-knop { width: 84px; }
  .undo { bottom: 96px; }
  .plassen { grid-template-columns: 1fr; justify-items: center; }
  .beker-kaart { width: 100%; padding: 12px; }
  .rond { width: 52px; height: 52px; }
  .maatbeker { width: 60vw; }
  .knop.bevestig { width: 120px; height: 120px; }
  .knop.bevestig svg { width: 64px; height: 64px; }
  .drink-zij { grid-template-columns: 1fr; }
  .totalen { grid-template-columns: repeat(2, 1fr); }
  .log li, .ouder-log li { grid-template-columns: 50px 1fr auto; }
  .ouder-log .acties { grid-column: 1 / -1; justify-content: flex-end; }
  .ouder-nav .sluit { margin-left: 0; }
  .ster-groot svg { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  body { background: #fff; }
  .kop, #toast, .undo, .fb-knop, .fb-balk, .fb-pin { display: none !important; }
  .scherm.grafiek > :not(.rapport) { display: none !important; }
  .rapport { display: block; }
  #app { padding: 0; max-width: none; }
  .kaart { box-shadow: none; padding: 0; }
  .rapport-dag { break-inside: avoid; }
}

/* drinking in three steps: pick a glass, drink, confirm when empty */
.stap { display: grid; justify-items: center; gap: 18px; width: 100%; }
.kies-glazen { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.kies-glas { border: 3px solid transparent; background: var(--water-ll); border-radius: 32px; padding: 18px 18px 12px; width: 170px; display: grid; justify-items: center; gap: 10px; transition: transform .15s; }
.kies-glas.nu { border-color: var(--amber); background: var(--amber-l); }
.kies-glas:active { transform: scale(.96); }
.kies-hint { font-size: 2.6rem; margin: 0; animation: wijs 1.6s ease-in-out infinite; }
@keyframes wijs { 50% { transform: translateY(-10px); } }
.kwarten { display: flex; gap: 10px; }
.kwarten span { color: #cfe3ef; }
.kwarten span svg { width: 34px; height: 34px; }
.kwarten span.aan { color: var(--water); }
.kwarten span.aan svg { fill: #bfe2f7; }
.stap-knoppen { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.leeg-glas { width: 200px; animation: pop .5s; }
.drink-midden { align-content: center; }

/* night diaper */
.plas-zij { display: grid; justify-items: center; gap: 20px; }
.pamper-knop { background: #eceffa; color: #4a548f; }
.plas-stip.pamper { background: #eceffa; color: #6a73b5; }
.plas-stip.pamper svg { fill: none; }
.tegel.pamper svg { color: #6a73b5; }
.l.pamper { background: #b9c0ea; }
.kop-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.pamper-form { display: grid; justify-items: center; gap: 12px; text-align: center; }
.pamper-form h2 { margin: 0; }
.pamper-form input { font-size: 1.6rem; width: 180px; text-align: center; }
.pamper-ic svg { color: #6a73b5; }
.pamper-som { color: var(--tekst-2); margin: 0; }
.pamper-som b { color: var(--tekst); font-size: 1.3rem; }
.uitleg.klein { font-size: .85rem; margin: 8px 0 0; }
.totalen { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }

@media (max-width: 640px) {
  .kies-glas { width: 130px; padding: 12px 12px 8px; }
  .plas-zij { grid-auto-flow: column; align-items: center; }
}

/* round 3: schema places on the timeline are an overview, not buttons */
.plaats { display: block; width: 64px; padding: 4px; border-radius: 16px; }
.moment.nu .plaats { width: 96px; }
.plaats.nog { background: var(--water-l); outline: 2px dashed #9fd0ee; }
body.rust .plaats.nog { outline: none; background: none; }
.held-knoppen .knop.ander, .held-knoppen .pamper-knop { grid-column: auto; }
.pamper-scherm { font-family: 'Quicksand'; font-size: 1.4rem; margin: 0; color: var(--tekst-2); }
.pamper-scherm b { font-size: 3rem; color: var(--tekst); }
.pamper-form .toetsen button:disabled { opacity: .35; }
@media (max-width: 640px) {
  .plaats { width: 56px; }
  .moment.nu .plaats { width: 84px; }
  .held-knoppen .knop.ander, .held-knoppen .pamper-knop { grid-column: auto; flex-direction: column; min-height: 72px; }
}

/* round 4: take a glass, sip with - and +, night and rest cards */
.neem-glas { position: relative; border: 3px dashed #9fd0ee; background: var(--water-ll); border-radius: 40px; padding: 28px 40px; width: 240px; }
.neem-glas .glas-svg { opacity: .9; }
.plus-badge { position: absolute; right: 18px; top: 18px; width: 64px; height: 64px; border-radius: 50%; background: var(--water); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px -6px rgba(78, 168, 222, .6); }
.plus-badge svg { width: 36px; height: 36px; stroke-width: 3; }
.glas-rij { display: flex; align-items: center; gap: 18px; }
.glas-rij .groot-glas { width: min(260px, 52vw); }
.moment.nacht { flex: .8 1 0; background: #eceffa; box-shadow: none; }
.moment.nacht .moment-icoon { background: #dfe3f5; color: #5b64a8; }
.moment-naam small { display: block; font-weight: 600; font-size: .75rem; color: var(--tekst-2); }
.pamper-plek { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: #6a73b5; }
.pamper-plek svg { width: 40px; height: 40px; }
.rust-info { flex-direction: column; gap: 10px; }
.geen-drinken { position: relative; color: #b7bfe6; }
.geen-drinken svg { width: 40px; height: 40px; }
.geen-drinken::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 3px; background: #9aa3d6; transform: rotate(-35deg); border-radius: 2px; }
.bedtijd { display: inline-flex; align-items: center; gap: 6px; color: #5b64a8; font-family: 'Quicksand'; font-weight: 700; }
.bedtijd svg { width: 30px; height: 30px; }
.held-knoppen { grid-template-columns: 1fr 1fr; }
@media (max-width: 1000px) {
  .held-knoppen { grid-template-columns: 1fr 1fr !important; }
  .moment.nacht { flex: 1 1 28%; }
}
@media (max-width: 640px) {
  .glas-rij { gap: 8px; }
  .neem-glas { width: 200px; padding: 20px 30px; }
}
.moment-kop { flex-direction: column; text-align: center; gap: 4px; }
.moment-naam { white-space: nowrap; overflow-wrap: normal; font-size: .82rem; }
.moment.nu .moment-naam { font-size: 1rem; }

/* round 5: one-tap drinking, compact progress, timeline as one line on phone and tablet portrait */
.glazen-tal { margin: 0; font-family: 'Quicksand'; font-weight: 700; color: var(--tekst-2); font-size: 1.1rem; }
.glazen-tal b { font-size: 1.7rem; color: var(--water-d); }
.zij-vooruitgang { display: grid; justify-items: center; gap: 8px; }
.knop.licht { background: transparent; color: var(--tekst-2); }
.knop.alles-op-k { min-height: 76px; padding: 16px 44px; font-size: 1.35rem; box-shadow: 0 12px 30px -10px rgba(82, 183, 136, .7); }
.knop.alles-op-k svg { width: 34px; height: 34px; stroke-width: 2.6; }
.drink-midden .tik-hint { margin: -6px 0 0; font-size: 1.05rem; }
.neem-tekst { margin: 0; font-family: 'Quicksand'; font-weight: 700; font-size: 1.5rem; color: var(--water-d); }
.drink-midden .groot-glas { width: min(260px, 60vw); }

@media (max-width: 1000px) {
  .momenten { flex-direction: column; flex-wrap: nowrap; gap: 2px; background: #fff; border-radius: var(--r); box-shadow: var(--schaduw); padding: 10px; }
  .moment, .moment.nu, .moment.nacht, .moment.rust, .moment.rust.nu, .moment.straks {
    order: 0; flex: none; flex-direction: row; align-items: center; gap: 12px;
    background: none; box-shadow: none; outline: none; opacity: 1;
    border-radius: 22px; padding: 10px 12px; position: relative;
  }
  /* the line that connects the moments of the day */
  .moment::before { content: ''; position: absolute; left: 33px; top: 0; bottom: 0; width: 3px; background: var(--water-l); }
  .moment:first-child::before { top: 50%; }
  .moment:last-child::before { bottom: 50%; }
  .moment-kop { flex-direction: row; text-align: left; gap: 12px; width: 170px; flex: none; }
  .moment-icoon { position: relative; z-index: 1; }
  .moment-naam, .moment.nu .moment-naam { font-size: 1rem; color: var(--tekst); }
  .moment.straks .moment-naam { color: var(--tekst-2); }
  .moment-naam small { display: inline; margin-left: 6px; }
  .moment.nu { background: var(--amber-l); outline: 3px solid var(--amber); }
  .moment.rust.nu { background: #eceffa; outline: 3px solid #b9c0ea; }
  .glazen, .rust-info { flex-direction: row; justify-content: flex-start; flex: 1; gap: 8px; }
  .plaats, .moment.nu .plaats { width: 48px; padding: 2px; }
  .pamper-plek { width: 44px; height: 44px; }
  .pamper-plek svg { width: 30px; height: 30px; }
  .geen-drinken svg, .bedtijd svg { width: 28px; height: 28px; }
  .moment .bedtijd { color: #5b64a8; }
  .plas-rij { border-top: 0; padding-top: 0; justify-content: flex-end; max-width: 90px; }
  .drink-midden { min-height: 0; padding-block: 32px; }
  .drink-zij { grid-template-columns: auto 1fr; }
  .zij-vooruitgang { grid-auto-flow: column; align-items: center; gap: 14px; }
}

@media (max-width: 640px) {
  .moment, .moment.nu, .moment.nacht, .moment.rust, .moment.rust.nu, .moment.straks { padding: 8px 8px; gap: 8px; }
  .moment::before { left: 25px; }
  .moment-icoon { width: 36px; height: 36px; }
  .moment-icoon svg { width: 22px; height: 22px; }
  .moment-kop { width: 132px; gap: 8px; }
  .moment-naam, .moment.nu .moment-naam { font-size: .9rem; }
  .moment-naam small { display: block; margin: 0; }
  .plaats, .moment.nu .plaats { width: 38px; }
  .plas-stip { width: 22px; height: 22px; }
  .plas-rij { max-width: 52px; }
  .held { grid-template-columns: auto 1fr; }
  .held-midden { justify-items: start; }
  .drink-midden { padding-block: 20px; gap: 14px; }
  .drink-midden .groot-glas { width: min(190px, 48vw); padding: 0; }
  .neem-glas { width: 180px; padding: 18px 26px; }
  .knop.alles-op-k { min-height: 64px; font-size: 1.2rem; }
  .drink-zij { grid-template-columns: 1fr; padding: 14px; gap: 12px; }
  .zij-vooruitgang { justify-content: center; }
  .zij-vooruitgang .fles { width: 48px; height: 86px; }
  .zij-vooruitgang .kado { width: 64px; height: 64px; }
  .zij-vooruitgang .kado svg { width: 34px; height: 34px; }
  .drink-zij .knop.ander { min-height: 56px; }
}
.drink-midden .undo { position: static; transform: none; min-height: 48px; padding: 8px 20px; font-size: 1rem; box-shadow: none; }
@media (max-width: 640px) { .zij-vooruitgang .sticker.groot { font-size: 2.2rem; } }
/* touch targets: never squeeze small round buttons below 40px */
.rond.mini-k, .chip button { flex: none; min-width: 40px; min-height: 40px; }
.acties { flex: none; }
/* wide content (schema table) scrolls inside its card instead of widening the page */
.scherm > * { min-width: 0; }
/* plush stickers (own SVG drawings); size follows the font-size of .sticker */
.sticker .knuffel { width: 1.35em; height: 1.35em; display: block; overflow: visible; }
.sticker { display: inline-grid; place-items: center; }
.album-item.aan .sticker { font-size: 3.4rem; }
.kado .sticker .knuffel, #toast .sticker .knuffel { width: 1.35em; height: 1.35em; }
#toast .sticker.reuze { font-size: 8rem; }
.verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bestand-knop:focus-within { outline: 3px solid var(--water); outline-offset: 2px; }

/* header: name, date and time (also on phone) */
.merk-tekst { display: grid; line-height: 1.15; }
.merk-tekst .datum { color: var(--tekst-2); font-size: .85rem; }
.merk-tekst .datum::first-letter { text-transform: uppercase; }
.merk-tekst .uur { font-family: 'Quicksand'; font-weight: 700; color: var(--tekst); font-size: 1rem; }
@media (max-width: 640px) {
  .merk span.merk-tekst { display: grid; }
  .merk-tekst b { font-size: 1rem; }
}
/* glasses drunk after the evening hour, in the play card */
.plaats.laat { width: 40px; padding: 2px; }

/* real app: login, sync status, backup, danger zone */
.scherm.login { min-height: 85vh; place-items: center; padding-top: 24px; }
.login-kaart { display: grid; justify-items: center; gap: 12px; width: min(420px, 100%); text-align: center; padding: 32px 24px; }
.login-kaart h1 { margin: 0; font-size: 1.6rem; color: var(--water-d); }
.login-kaart .uitleg { margin: 0 0 8px; }
.login-form { display: grid; gap: 14px; width: 100%; text-align: left; }
.login-form input { width: 100%; }
.login-form .knop { width: 100%; margin-top: 6px; }
.fout { margin: 0; color: #a1351b; background: var(--koraal-l); padding: 10px 14px; border-radius: 14px; }
.sync-status { display: inline-flex; align-items: center; gap: 2px; color: #8a99a3; margin-left: auto; }
.sync-status svg { width: 26px; height: 26px; }
.sync-status small { font-weight: 700; font-size: .8rem; }
.sync-status + .instelknop { margin-left: 0; }
#sync-plek { display: contents; }
.kaart.gevaar { border: 2px solid var(--koraal-l); }
.knop.gevaar-k { background: #c2412d; color: #fff; }
.melding .knop { margin-left: auto; }
.grafiek > .melding { flex-wrap: wrap; }

/* Grafiek on a phone: compact tiles, one line per registration, readable chart */
@media (max-width: 640px) {
  .totalen { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .tegel { padding: 10px 12px; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; border-radius: 16px; }
  .tegel svg { grid-row: span 2; width: 22px; height: 22px; }
  .tegel b { font-size: 1.2rem; line-height: 1.1; }
  .tegel small { font-size: .74rem; line-height: 1.2; }
  .log li { grid-template-columns: 46px 1fr auto auto; gap: 8px; padding: 8px 10px; }
  .log .acties { grid-column: auto; gap: 4px; }
  .legende { flex-wrap: wrap; font-size: .8rem; gap: 4px 6px; }
  .legende .l { margin-left: 6px; }
  .grafiek-svg .as { font-size: 12px; }
  .dag-nav { gap: 8px; }
  .dag-nav b { min-width: 0; flex: 1; font-size: 1rem; }
  .schakel { margin-left: 0; }
}
/* week on a phone: one compact block per day */
.week-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.week-lijst li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; border-radius: 16px; background: var(--water-ll); }
.week-lijst b::first-letter { text-transform: uppercase; }
.week-lijst span { display: flex; align-items: center; gap: 6px; font-size: .9rem; grid-column: 1; }
.week-lijst span svg { width: 18px; height: 18px; color: var(--tekst-2); }
.week-lijst small { color: var(--tekst-2); }
.week-lijst .week-sticker { grid-column: 2; grid-row: 1; color: var(--munt); }
.week-lijst .week-glazen { grid-column: 2; grid-row: 2 / span 2; align-self: center; font-family: 'Quicksand'; font-weight: 700; color: var(--water-d); }