/* Layout: schriftkaft — een balpenblauwe kopband met logo, begroeting en tabs over ruitjespapier; daaronder witte kaarten. Weekweergave als agenda met 7 kolommen. */
:root{
  --bg:#f3f5fb; --grid:rgba(35,71,197,.075); --surface:#ffffff; --surface-2:#f4f6fb; --ink:#131d36; --muted:#5b6682; --line:#e0e5ef;
  --accent:#2347c5; --accent-soft:#e8edfd; --accent-ink:#ffffff;
  --band:#2144bd; --band-2:#17318f; --band-ink:#ffffff; --band-muted:rgba(255,255,255,.74); --band-line:rgba(255,255,255,.16);
  --mark:#ffd84a; --mark-ink:#3b2f00; --logo-ink:#17318f;
  --good:#138a55; --good-bg:#e2f5eb; --warn:#a36200; --warn-bg:#fff3da; --bad:#c9353d; --bad-bg:#fde8e9;
  --chip-s:72%; --chip-l:93%; --chip-ink:30%; --stripe-l:56%;
  --shadow:0 1px 2px rgba(19,29,54,.06),0 10px 28px -16px rgba(19,29,54,.28);
  --font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --font-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --font-hand:"Caveat","Segoe Print","Comic Sans MS",cursive;
  --r:16px; --r-sm:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0c1120; --grid:rgba(142,166,255,.055); --surface:#141b2d; --surface-2:#1a2238; --ink:#e8ecf8; --muted:#98a3bf; --line:#263050;
  --accent:#8ea6ff; --accent-soft:#1e2950; --accent-ink:#0b1430;
  --band:#18307f; --band-2:#0f1f57; --band-ink:#ffffff; --band-muted:rgba(255,255,255,.7); --band-line:rgba(255,255,255,.14);
  --mark:#f3cd45; --mark-ink:#2a2100;
  --good:#5ad393; --good-bg:#11301f; --warn:#f1b552; --warn-bg:#33270f; --bad:#ff8f94; --bad-bg:#3a1a1d;
  --chip-s:42%; --chip-l:23%; --chip-ink:86%; --stripe-l:62%;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0c1120; --grid:rgba(142,166,255,.055); --surface:#141b2d; --surface-2:#1a2238; --ink:#e8ecf8; --muted:#98a3bf; --line:#263050;
  --accent:#8ea6ff; --accent-soft:#1e2950; --accent-ink:#0b1430;
  --band:#18307f; --band-2:#0f1f57; --band-ink:#ffffff; --band-muted:rgba(255,255,255,.7); --band-line:rgba(255,255,255,.14);
  --mark:#f3cd45; --mark-ink:#2a2100;
  --good:#5ad393; --good-bg:#11301f; --warn:#f1b552; --warn-bg:#33270f; --bad:#ff8f94; --bad-bg:#3a1a1d;
  --chip-s:42%; --chip-l:23%; --chip-ink:86%; --stripe-l:62%;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:26px 26px;color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5;min-height:100vh}
.inner{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- kopband ---------- */
.band{background:linear-gradient(160deg,var(--band) 0%,var(--band-2) 100%);color:var(--band-ink);position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--band-line) 1px,transparent 1px),linear-gradient(90deg,var(--band-line) 1px,transparent 1px);background-size:26px 26px;opacity:.45;pointer-events:none;mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
.band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--mark)}
.band .inner{position:relative;padding-block:22px 0}
.topline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo svg{width:52px;height:52px;flex:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.wordmark{font-family:var(--font-display);font-weight:800;font-size:1.75rem;letter-spacing:-.03em;line-height:1}
.wordmark em{font-style:normal;font-family:var(--font-hand);font-weight:700;font-size:2.2rem;color:var(--mark);letter-spacing:0;margin-left:1px;position:relative;top:2px}
.status{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:700;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.12);color:var(--band-ink);border:1px solid var(--band-line)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--band-muted)}
.status.ok::before{background:#5ee39d;box-shadow:0 0 0 3px rgba(94,227,157,.25)}
.status.local::before{background:var(--mark)}
.greet{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;margin:26px 0 22px}
.greet .hello{font-family:var(--font-hand);font-size:1.7rem;color:var(--mark);line-height:1;margin:0 0 4px}
.greet h1{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.3rem);letter-spacing:-.025em;line-height:1.12;margin:0;max-width:30ch;text-wrap:balance}
.greet .date{color:var(--band-muted);font-size:.95rem;text-align:right}
.greet .date b{display:block;color:var(--band-ink);font-family:var(--font-display);font-size:1.15rem;text-transform:capitalize}
nav.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:0 4px}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:.98rem;text-decoration:none;color:var(--band-muted);padding:11px 16px 14px;border-radius:12px 12px 0 0;white-space:nowrap}
nav.tabs a svg{width:18px;height:18px;flex:none}
nav.tabs a:hover{color:var(--band-ink);background:rgba(255,255,255,.08)}
nav.tabs a[aria-current="page"]{background:var(--bg);color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.band :focus-visible{outline-color:var(--mark)}

/* ---------- basis ---------- */
main.inner{padding-block:26px 70px}
h2{font-family:var(--font-display);font-weight:800;font-size:1.4rem;margin:0;text-wrap:balance;letter-spacing:-.02em}
h3{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin:0;letter-spacing:-.01em}
.eyebrow{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.muted{color:var(--muted)}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.sechead > div{display:flex;flex-direction:column;gap:2px}
.layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:26px;align-items:start}
@media (max-width:860px){.layout{grid-template-columns:minmax(0,1fr)}}
.stack{display:flex;flex-direction:column;gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.card > h3{margin-bottom:12px}
.notice{border-radius:var(--r);padding:14px 16px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px;border:1px solid}
.notice p{margin:0;flex:1;min-width:220px}
.notice.mark{background:var(--mark);color:var(--mark-ink);border-color:transparent}
.notice.warn{background:var(--warn-bg);border-color:var(--warn)}
.notice.bad{background:var(--bad-bg);border-color:var(--bad)}
.hand{font-family:var(--font-hand);font-size:1.35rem;line-height:1.1}
button,.btn{font:inherit;font-weight:700;font-size:.95rem;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:9px 16px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;line-height:1.2}
button:hover,.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary,button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 6px 16px -8px var(--accent)}
.btn.primary:hover,button.primary:hover{filter:brightness(1.08);color:var(--accent-ink)}
.btn.ink{background:var(--mark-ink);border-color:var(--mark-ink);color:var(--mark)}
.btn.ink:hover{color:var(--mark)}
button.danger{color:var(--bad);border-color:var(--bad)}
button.ghost{background:transparent;border-color:transparent;color:var(--muted)}
button.ghost:hover{color:var(--ink);border-color:var(--line)}
button.small{padding:5px 11px;font-size:.84rem;border-radius:8px}
button:disabled{opacity:.3;cursor:not-allowed}
button:disabled:hover{border-color:var(--line);color:inherit}
.chip{display:inline-flex;align-items:center;font-size:.76rem;font-weight:700;padding:3px 10px;border-radius:99px;background:hsl(var(--h) var(--chip-s) var(--chip-l));color:hsl(var(--h) 62% var(--chip-ink));white-space:nowrap;letter-spacing:.01em}
.mins{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.soon{color:var(--bad);font-weight:700}
.bar{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--good);border-radius:99px}
.empty{padding:34px 22px;text-align:center;color:var(--muted);border:2px dashed var(--line);border-radius:var(--r);background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:12px}
.empty svg{width:74px;height:74px}

/* ---------- vandaag ---------- */
.summary{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ring{width:112px;height:112px;flex:none;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .track{stroke:var(--surface-2)}
.ring .val{stroke:var(--good);transition:stroke-dashoffset .6s ease}
.ring .lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ring .lbl b{font-family:var(--font-display);font-size:1.7rem;font-variant-numeric:tabular-nums}
.ring .lbl span{font-size:.72rem;color:var(--muted);margin-top:3px}
.summary .txt{flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px}
.summary .txt h2{font-size:1.55rem}
.tasklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.item{display:flex;gap:16px;align-items:center;padding:16px 18px 16px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:hsl(var(--h) 65% var(--stripe-l))}
.item.done{background:var(--surface-2);box-shadow:none}
.item.done .what{text-decoration:line-through;text-decoration-thickness:2px;color:var(--muted)}
.item .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.item .what{font-weight:700;font-size:1.06rem;overflow-wrap:anywhere;line-height:1.3}
.item .meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:.86rem;color:var(--muted)}
.item .side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.item .side .mins{font-size:1.05rem}
.check{appearance:none;width:32px;height:32px;border:2.5px solid var(--line);border-radius:50%;flex:none;cursor:pointer;display:grid;place-items:center;margin:0;background:var(--surface);transition:background .15s,border-color .15s,transform .15s}
.check:hover{border-color:var(--good)}
.check:checked{background:var(--good);border-color:var(--good)}
.check:checked::after{content:"";width:8px;height:15px;border:solid #fff;border-width:0 3.5px 3.5px 0;transform:rotate(45deg) translate(-1px,-2px)}
@media (prefers-reduced-motion:no-preference){.check:active{transform:scale(.88)}}
.dl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dl li{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}
.dl li:first-child{border-top:0;padding-top:0}
.dl li > span:first-child{display:flex;gap:8px;align-items:center;min-width:0;flex-wrap:wrap}
.datebadge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:50px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);flex:none;line-height:1}
.datebadge b{font-family:var(--font-display);font-size:1.2rem}
.datebadge span{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:2px}
.datebadge.hot{background:var(--mark);border-color:var(--mark);color:var(--mark-ink)}
.datebadge.hot span{color:var(--mark-ink)}
.dlrow{display:flex;gap:12px;align-items:center}
.dlrow .t{display:flex;flex-direction:column;gap:3px;min-width:0}
.dlrow .t b{overflow-wrap:anywhere;font-size:.95rem}
.celebrate{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:14px;background:var(--good-bg);border:1px solid var(--good);margin-top:12px}
.celebrate svg{width:56px;height:56px;flex:none}
@media (prefers-reduced-motion:no-preference){.celebrate svg{animation:hop 1.4s ease-in-out 2}}
@keyframes hop{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-8px) rotate(-6deg)}60%{transform:translateY(0) rotate(4deg)}}

/* ---------- week ---------- */
.weekbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.weeknav{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;box-shadow:var(--shadow)}
.weeknav button{border:0;padding:6px 12px;font-size:1.1rem}
.weeknav h2{font-size:1.15rem;padding:0 8px;min-width:88px;text-align:center}
.weekbar .hint{margin-left:auto;font-size:.86rem;color:var(--muted)}
.weekscroll{overflow-x:auto;padding:2px 2px 10px}
.week{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:12px;min-width:1100px}
.day{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-height:320px;box-shadow:var(--shadow);overflow:hidden}
.day.free{background:transparent;box-shadow:none;border-style:dashed}
.day.past{opacity:.6}
.day.drop{outline:3px dashed var(--accent);outline-offset:-3px}
.dayhead{padding:12px 12px 10px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.dayhead .num{font-family:var(--font-display);font-weight:800;font-size:1.6rem;line-height:1;font-variant-numeric:tabular-nums}
.dayhead .nm{display:flex;flex-direction:column;line-height:1.15}
.dayhead .nm b{font-size:.92rem;text-transform:capitalize}
.dayhead .nm span{font-size:.75rem;color:var(--muted)}
.day.today .dayhead{background:var(--accent);color:var(--accent-ink);border-bottom-color:var(--accent)}
.day.today .dayhead .nm span{color:var(--accent-ink);opacity:.8}
.daybody{padding:10px;display:flex;flex-direction:column;gap:8px;flex:1}
.load{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.load .bar{flex:1;height:6px}
.load .bar i{background:var(--accent)}
.day.over .load{color:var(--bad);font-weight:700}
.day.over .load .bar i{background:var(--bad)}
.deadline{font-size:.78rem;font-weight:700;padding:5px 9px;border-radius:8px;background:var(--mark);color:var(--mark-ink);display:flex;align-items:center;gap:6px}
.deadline svg{width:14px;height:14px;flex:none}
.blk{border-radius:10px;padding:9px 10px;background:hsl(var(--h) var(--chip-s) var(--chip-l));color:var(--ink);display:flex;flex-direction:column;gap:5px;cursor:grab;font-size:.86rem;border:1px solid transparent}
.blk:hover{border-color:hsl(var(--h) 60% var(--stripe-l))}
.blk[draggable="false"]{cursor:default}
.blk.done{opacity:.5}
.blk.done .w{text-decoration:line-through}
.blk .top{display:flex;align-items:center;justify-content:space-between;gap:4px}
.blk .vak{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:hsl(var(--h) 62% var(--chip-ink))}
.blk .w{font-weight:700;overflow-wrap:anywhere;line-height:1.25}
.blk .sub{font-size:.75rem;color:var(--muted)}
.blk .row{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:2px}
.blk .row button{padding:2px 9px;font-size:.9rem;background:var(--surface);border-color:transparent}
.blk .check{width:24px;height:24px}
.blk .check:checked::after{width:6px;height:11px;border-width:0 3px 3px 0}
.freetag{font-family:var(--font-hand);font-size:1.25rem;color:var(--muted);text-align:center;margin-top:auto;margin-bottom:auto}

/* ---------- formulier ---------- */
form.add{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
form.add .full{grid-column:1 / -1}
@media (max-width:600px){form.add{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:6px}
.field > label,.field > .lbl{font-weight:700;font-size:.95rem}
.field .hint{font-size:.82rem;color:var(--muted)}
input[type=text],input[type=date],select{font:inherit;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);width:100%;transition:border-color .15s,background .15s}
input[type=text]:focus,input[type=date]:focus,select:focus{border-color:var(--accent);background:var(--surface);outline:none;box-shadow:0 0 0 4px var(--accent-soft)}
.seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:700px){.seg{grid-template-columns:repeat(2,minmax(0,1fr))}}
.seg label{border:1.5px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:6px;background:var(--surface-2);transition:border-color .15s,background .15s}
.seg label svg{width:22px;height:22px;color:var(--muted)}
.seg label b{font-size:.9rem;line-height:1.2}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.seg label:has(input:checked) svg{color:var(--accent)}
.seg label:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.preview{background:var(--surface-2);border-radius:14px;padding:14px 16px;border:1px solid var(--line)}
.preview .hand{color:var(--accent);margin-bottom:8px}
.pv{display:flex;flex-wrap:wrap;gap:8px}
.pv > div{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px 12px 6px 6px}
.pv .datebadge{width:40px;height:44px}
.pv small{display:block;color:var(--muted);font-size:.78rem}
.pv .busy{border-color:var(--bad)}
.formfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* ---------- overzicht ---------- */
.ov{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;align-items:center}
.ov .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.ov{grid-template-columns:minmax(0,1fr)}.ov .acts{justify-content:flex-start}}
.dots{display:flex;flex-wrap:wrap;gap:6px}
.dot{font-size:.76rem;padding:3px 9px;border-radius:99px;border:1.5px solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums}
.dot.ok{background:var(--good-bg);border-color:var(--good);color:var(--good);font-weight:700}
.dot.late{border-color:var(--bad);color:var(--bad);font-weight:700}
details summary{cursor:pointer;font-weight:700;color:var(--muted);font-family:var(--font-display)}

/* ---------- instellingen ---------- */
.days{display:flex;flex-wrap:wrap;gap:8px}
.days label{display:flex;gap:8px;align-items:center;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer;background:var(--surface-2);text-transform:capitalize}
.days label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.days input{accent-color:var(--accent);width:16px;height:16px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(22px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:13px 20px;border-radius:14px;font-weight:700;max-width:min(560px,calc(100% - 32px));box-shadow:0 14px 34px rgba(0,0,0,.3);z-index:20;display:flex;gap:10px;align-items:center}
.toast::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--mark);flex:none}
@media (prefers-reduced-motion:no-preference){.toast:not([hidden]){animation:up .25s ease-out}@keyframes up{from{transform:translate(-50%,12px);opacity:0}to{transform:translate(-50%,0);opacity:1}}}

/* ---------- toevoegingen voor de online versie ---------- */
html{background:var(--bg)}
body{margin:0}
.userbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.userbox .who{font-weight:700;font-size:.9rem;color:var(--band-ink)}
.userbox .who small{display:block;font-weight:400;color:var(--band-muted);font-size:.76rem}
.bandbtn{background:rgba(255,255,255,.12);border:1px solid var(--band-line);color:var(--band-ink);padding:7px 13px;border-radius:10px;font-size:.86rem}
.bandbtn:hover{background:rgba(255,255,255,.2);color:var(--band-ink);border-color:var(--band-line)}
.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--mark);font-weight:700;text-decoration:none;font-size:.92rem;margin-bottom:6px}
.backlink:hover{text-decoration:underline}
.band.compact .greet{margin:18px 0 26px}

/* inloggen */
.authwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px;align-items:center;max-width:980px;margin:10px auto 0}
@media (max-width:820px){.authwrap{grid-template-columns:minmax(0,1fr)}.authwrap .pitch{display:none}}
.pitch{display:flex;flex-direction:column;gap:18px}
.pitch h2{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15}
.pitch ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pitch li{display:flex;gap:12px;align-items:flex-start}
.pitch li svg{width:22px;height:22px;flex:none;color:var(--accent);margin-top:2px}
.authcard{padding:26px}
.authcard .mascot-lg{width:64px;height:64px;margin-bottom:6px}
.switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:4px;margin:16px 0 20px}
.switch button{border:0;background:transparent;color:var(--muted);padding:9px 10px;border-radius:9px}
.switch button[aria-pressed="true"]{background:var(--surface);color:var(--accent);box-shadow:var(--shadow)}
.formstack{display:flex;flex-direction:column;gap:14px}
.formstack .primary{justify-content:center;padding:12px 16px;font-size:1rem}
.err{background:var(--bad-bg);border:1px solid var(--bad);color:var(--ink);padding:10px 12px;border-radius:10px;font-size:.9rem}
.okmsg{background:var(--good-bg);border:1px solid var(--good);color:var(--ink);padding:10px 12px;border-radius:10px;font-size:.9rem}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font-weight:700;cursor:pointer;text-decoration:underline;font-size:.92rem}
.linkbtn:hover{color:var(--accent)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--muted)}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent);flex:none}
input[type=email],input[type=password]{font:inherit;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);width:100%}
input[type=email]:focus,input[type=password]:focus{border-color:var(--accent);background:var(--surface);outline:none;box-shadow:0 0 0 4px var(--accent-soft)}

/* gezin */
.kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.kid{display:flex;flex-direction:column;gap:14px}
.kid .head{display:flex;align-items:center;gap:14px}
.avatar{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.4rem;background:hsl(var(--h) var(--chip-s) var(--chip-l));color:hsl(var(--h) 62% var(--chip-ink));flex:none}
.kid .head h3{margin:0;font-size:1.2rem}
.kid .head small{color:var(--muted)}
.kid .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kid .stat{background:var(--surface-2);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:2px}
.kid .stat b{font-family:var(--font-display);font-size:1.25rem;font-variant-numeric:tabular-nums}
.kid .stat span{font-size:.74rem;color:var(--muted)}
.kid .stat.bad b{color:var(--bad)}
.kid .stat.good b{color:var(--good)}
.kid .acts{display:flex;gap:8px;flex-wrap:wrap}
.kid .next{font-size:.88rem;color:var(--muted)}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--surface-2);padding:10px;border-radius:12px}
.inline-form input{flex:1;min-width:160px}
.addkid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}
@media (max-width:760px){.addkid{grid-template-columns:minmax(0,1fr)}}
.danger-zone{margin-top:34px;border:1px dashed var(--line);border-radius:var(--r);padding:16px 18px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:60px 0;color:var(--muted)}
.loading svg{width:48px;height:48px}
@media (prefers-reduced-motion:no-preference){.loading svg{animation:hop 1.2s ease-in-out infinite}}
footer.foot{text-align:center;color:var(--muted);font-size:.82rem;padding:0 16px 30px}
footer.foot a{color:var(--muted)}

/* icoontjes in knoppen en links */
button svg,.btn svg,.backlink svg{width:18px;height:18px;flex:none}
button.small svg{width:15px;height:15px}
[hidden]{display:none!important}

/* delen */
.parts{display:flex;flex-direction:column;gap:8px}
.partrow{display:flex;align-items:center;gap:10px}
.partnum{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;font-family:var(--font-display);font-weight:800;background:var(--accent-soft);color:var(--accent)}
.holiday{font-size:.76rem;font-weight:700;padding:5px 9px;border-radius:8px;background:var(--good-bg);color:var(--good);text-align:center}

/* ---------- mobiel ---------- */
@media (max-width:760px){
  body{font-size:15.5px}
  .band .inner{padding-block:14px 0}
  .logo svg{width:42px;height:42px}
  .wordmark{font-size:1.4rem}
  .wordmark em{font-size:1.8rem}
  .userbox .who{display:none}
  .greet{margin:16px 0 14px;gap:6px}
  .greet .hello{font-size:1.4rem}
  .greet .date{text-align:left;font-size:.85rem}
  .greet .date b{display:inline;font-size:.95rem;margin-right:6px}
  nav.tabs a{padding:10px 12px 12px;font-size:.92rem}
  main.inner{padding-block:18px 60px}
  .card{padding:16px}
  .summary{gap:16px}
  .ring{width:88px;height:88px}
  .ring .lbl b{font-size:1.3rem}
  .summary .txt h2{font-size:1.25rem}
  .item{padding:14px 14px 14px 18px;gap:12px;flex-wrap:wrap}
  .item .body{flex:1 1 60%}
  .item .side{flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:4px 12px;width:100%;padding-left:44px;text-align:left}
  .item > .body.ov{padding-left:0}
  .notice{padding:12px 14px}
  /* week: dagen onder elkaar */
  .weekscroll{overflow:visible;padding:0}
  .week{grid-template-columns:minmax(0,1fr);min-width:0;gap:10px}
  .day{min-height:0}
  .day.free{display:none}
  .day.free.today{display:flex}
  .dayhead{padding:10px 12px}
  .weekbar .hint{display:none}
  .blk .row button{padding:6px 14px;font-size:1rem}
  .blk .check{width:30px;height:30px}
  .blk .check:checked::after{width:8px;height:14px}
  .seg label{padding:10px}
  .formfoot .primary{width:100%;justify-content:center;padding:13px}
  .pv > div{flex:1 1 100%}
  .kid .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .danger-zone{flex-direction:column;align-items:flex-start}
  .toast{left:16px;right:16px;transform:none;max-width:none}
  @media (prefers-reduced-motion:no-preference){.toast:not([hidden]){animation:none}}
}
.weekfree{display:none}
@media (max-width:760px){.weekfree{display:block;font-size:.85rem;color:var(--muted);margin-top:6px}}

/* ---------- uitlegfilmpje ---------- */
.iv{position:fixed;inset:0;z-index:50;background:rgba(8,14,32,.72);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.iv:focus{outline:none}
.iv-box{width:min(680px,100%);background:var(--surface);border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.iv-stage{aspect-ratio:16/10;background:linear-gradient(160deg,var(--band) 0%,var(--band-2) 100%);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff}
.iv-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:26px 26px}
.iv-scene{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:18px;animation:ivIn .5s ease-out both}
.iv-cap{padding:14px 18px;font-weight:700;font-size:1.02rem;min-height:4.6em;display:flex;align-items:center;line-height:1.35;color:var(--ink)}
.iv-ctrl{display:flex;align-items:center;gap:10px;padding:0 14px 14px}
.iv-ctrl button{padding:6px 12px;font-size:.9rem}
.iv-play{width:44px;justify-content:center}
.iv-bar{flex:1;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.iv-bar i{display:block;height:100%;width:0;background:var(--accent)}
.iv-time{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.iv.paused *{animation-play-state:paused!important}
.iv [style*="--d"]{animation-delay:var(--d)}
@keyframes ivIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ivPop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes ivType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ivDrop{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}
@keyframes ivBounce{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-14px) rotate(-6deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-6px) rotate(5deg)}}
@keyframes ivRing{from{stroke-dashoffset:289}to{stroke-dashoffset:0}}
@keyframes ivCheck{to{background:var(--good);border-color:var(--good)}}
.iv-hero{display:flex;flex-direction:column;align-items:center;gap:14px}
.iv-mascot{width:min(120px,26vw);height:auto;aspect-ratio:1;animation:ivBounce 1.6s ease-in-out .3s 2 both,ivPop .6s ease-out both;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.iv-wave{animation:ivBounce 1s ease-in-out infinite}
.iv-word{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,5vw,2.4rem);letter-spacing:-.03em;animation:ivIn .6s ease-out .5s both}
.iv-word em{font-style:normal;font-family:var(--font-hand);color:var(--mark);font-size:1.25em}
.iv-hand{font-family:var(--font-hand);font-size:clamp(1.8rem,6vw,2.6rem);color:var(--mark);animation:ivIn .6s ease-out .4s both}
.iv-form{background:#fff;color:#131d36;border-radius:14px;padding:14px 16px;width:min(380px,92%);display:flex;flex-direction:column;gap:8px;box-shadow:0 14px 34px rgba(0,0,0,.3)}
.iv-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #e0e5ef;padding-bottom:6px;font-size:clamp(.8rem,2.6vw,.95rem)}
.iv-row span{color:#5b6682}
.iv-type{animation:ivType .7s steps(14) both;white-space:nowrap}
.iv-btn{align-self:flex-end;background:#2347c5;color:#fff;font-weight:700;padding:6px 14px;border-radius:9px;font-size:.88rem;animation:ivPop .5s ease-out both}
.iv-week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:min(520px,96%)}
.iv-day{background:rgba(255,255,255,.95);border-radius:10px;min-height:clamp(110px,26vw,170px);padding:6px;display:flex;flex-direction:column;gap:5px;color:#131d36}
.iv-day > span{font-weight:800;font-size:.8rem;text-transform:uppercase;text-align:center;color:#5b6682}
.iv-free{background:rgba(255,255,255,.55)}
.iv-day i{font-style:normal;font-size:clamp(.62rem,2vw,.78rem);font-weight:700;border-radius:6px;padding:4px 5px;text-align:center;animation:ivDrop .5s ease-out both}
.iv-blk{background:#dfe8ff;color:#17318f}
.iv-rep{background:#ffd84a;color:#3b2f00}
.iv-hol{background:#e2f5eb;color:#138a55}
.iv-dl{background:#ffd84a;color:#3b2f00}
.iv-today{display:flex;align-items:center;gap:clamp(12px,4vw,26px)}
.iv-ring{position:relative;width:clamp(80px,20vw,120px);aspect-ratio:1}
.iv-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.iv-ring circle{fill:none;stroke-width:12}
.iv-track{stroke:rgba(255,255,255,.2)}
.iv-val{stroke:#5ee39d;stroke-linecap:round;stroke-dasharray:289;animation:ivRing 3.2s ease-in-out .5s both}
.iv-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.8rem;animation:ivPop .4s ease-out 3.7s both}
.iv-list{display:flex;flex-direction:column;gap:8px}
.iv-item{background:#fff;color:#131d36;border-radius:10px;padding:8px 12px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:clamp(.78rem,2.6vw,.95rem);animation:ivIn .4s ease-out both}
.iv-check{width:20px;height:20px;border-radius:50%;border:2.5px solid #c9d1e0;flex:none;animation:ivCheck .3s ease-out both;animation-delay:calc(var(--d) + .8s)}
.iv-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(460px,94%)}
.iv-chip{background:#fff;color:#131d36;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;animation:ivPop .5s ease-out both}
.iv-chip span{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:#5b6682;font-weight:700}
.iv-chip b{font-size:clamp(.85rem,2.8vw,1rem)}
@media (max-width:560px){.iv-stage{aspect-ratio:4/5}.iv-cap{font-size:.95rem}.iv-today{flex-direction:column}}
@media (prefers-reduced-motion:reduce){.iv *{animation-duration:.01s!important;animation-iteration-count:1!important}}
.bandbtn.play{font-weight:700}
.iv-snd{width:44px;justify-content:center;font-size:1rem}