/* Gedeelde stijl voor de Libben-ontwerpen (CREST OS-tokens). Overgenomen uit 02-eten.html. */
/* CREST OS-tokens, gelijk aan 01-vandaag */
.k { --bg:#f5f6f8; --s1:#ffffff; --s2:#eff1f4; --line:rgba(10,12,16,.08); --line2:rgba(10,12,16,.14);
     --ink:#0a0c10; --ink2:rgba(10,12,16,.68); --ink3:rgba(10,12,16,.52); --fill:rgba(10,12,16,.05); --fill2:rgba(10,12,16,.08);
     --blauw:#1466ff; --link:#0b55d9; --tint:rgba(20,102,255,.07); --tint-line:rgba(20,102,255,.26);
     --groen:#1fb36b; --oranje:#f5933a; --rood:#e5484d; --geel:#e0a800;
     --groen-z:rgba(31,179,107,.12); --geel-z:rgba(224,168,0,.14); --rood-z:rgba(229,72,77,.12);
     --glas:rgba(255,255,255,.82); --schaduw:0 1px 2px rgba(10,12,16,.04),0 6px 20px rgba(10,12,16,.05);
     /* Schijf van Vijf */
     --s5-groente:#3fae49; --s5-vet:#f2c230; --s5-eiwit:#e86a9a; --s5-graan:#f28c28; --s5-drank:#5bb6e8; --s5-buiten:#9aa0aa; }
.k.dark { --bg:#0a0c10; --s1:#12151c; --s2:#191d26; --line:rgba(244,246,248,.08); --line2:rgba(244,246,248,.14);
     --ink:#f4f6f8; --ink2:rgba(244,246,248,.70); --ink3:rgba(244,246,248,.50); --fill:rgba(244,246,248,.06); --fill2:rgba(244,246,248,.10);
     --link:#6f9dff; --tint:rgba(20,102,255,.12); --tint-line:rgba(20,102,255,.36);
     --groen-z:rgba(31,179,107,.18); --geel-z:rgba(224,168,0,.18); --rood-z:rgba(229,72,77,.18);
     --glas:rgba(18,21,28,.82); --schaduw:none; }

* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.wrap { padding:4px 0 24px; }
.knoppen { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 16px; font-size:13px; }
.knoppen .label { opacity:.6; margin-right:4px; }
.knoppen button { font:inherit; border:1px solid rgba(127,127,127,.35); background:transparent; color:inherit; padding:6px 12px; border-radius:999px; cursor:pointer; }
.knoppen button.aan { background:#1466ff; border-color:#1466ff; color:#fff; }
.knoppen .noot { opacity:.55; margin-left:8px; }
.rij-tel { display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap; margin-bottom:30px; }
.onderschrift { font-size:12px; opacity:.6; margin:8px 0 0; text-align:center; max-width:390px; }

/* ---------- iPhone ---------- */
.iphone { width:390px; height:844px; border-radius:54px; padding:12px; background:#1c1d21; box-shadow:0 0 0 1.5px #3a3b40, 0 30px 60px -20px rgba(0,0,0,.45); flex:none; }
.scherm { position:relative; width:366px; height:820px; border-radius:43px; overflow:hidden; background:var(--bg); color:var(--ink); }
.statusbalk { position:absolute; top:0; left:0; right:0; height:50px; display:flex; justify-content:space-between; align-items:center; padding:6px 30px 0 34px; font-size:15px; font-weight:600; z-index:5; }
.eiland { position:absolute; top:11px; left:50%; transform:translateX(-50%); width:118px; height:34px; border-radius:20px; background:#000; z-index:6; }
.status-ic { display:flex; gap:6px; align-items:center; }
.inhoud { position:absolute; inset:0; overflow-y:auto; padding:58px 16px 100px; scrollbar-width:none; }
.inhoud::-webkit-scrollbar { display:none; }
.tabbalk { position:absolute; left:0; right:0; bottom:0; height:84px; background:var(--glas); -webkit-backdrop-filter:saturate(1.6) blur(18px); backdrop-filter:saturate(1.6) blur(18px); border-top:1px solid var(--line2); display:grid; grid-template-columns:repeat(5,1fr); padding:7px 4px 0; z-index:4; }
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; font-weight:500; color:var(--ink3); }
.tab.aan { color:var(--blauw); }
.homebalk { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:134px; height:5px; border-radius:3px; background:var(--ink); opacity:.9; z-index:9; }

/* ---------- algemene onderdelen ---------- */
.kop { display:flex; justify-content:space-between; align-items:flex-end; margin:6px 2px 12px; }
.kop h1 { margin:0; font-size:30px; line-height:1.1; font-weight:700; letter-spacing:-.02em; }
.plusknop { height:34px; padding:0 14px; border-radius:17px; background:var(--blauw); color:#fff; font-size:15px; font-weight:600; display:flex; align-items:center; gap:6px; }
.seg { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:var(--fill2); border-radius:10px; padding:2px; margin-bottom:12px; }
.seg span { text-align:center; font-size:13px; font-weight:600; padding:6px 0; border-radius:8px; color:var(--ink2); }
.seg span.aan { background:var(--s1); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.datum { display:flex; justify-content:space-between; align-items:center; margin:0 2px 12px; }
.datum b { font-size:16px; font-weight:650; }
.datum .pijl { width:30px; height:30px; border-radius:50%; background:var(--fill); display:grid; place-items:center; color:var(--ink2); font-size:16px; }
.datum .pijl.uit { opacity:.35; }
.kaart { background:var(--s1); border:1px solid var(--line); border-radius:18px; box-shadow:var(--schaduw); padding:14px 16px; margin-bottom:12px; }
.kaart-kop { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.kaart-kop h2 { margin:0; font-size:17px; font-weight:650; letter-spacing:-.01em; }
.kaart-kop .rechts { font-size:13px; color:var(--ink3); }
.sectiekop { font-size:13px; font-weight:600; color:var(--ink3); text-transform:uppercase; letter-spacing:.04em; margin:18px 4px 8px; }
.chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:2px 7px; border-radius:6px; background:var(--fill); color:var(--ink2); white-space:nowrap; }
.chip.esmee { background:rgba(138,92,246,.12); color:#7c4ddb; }
.k.dark .chip.esmee { color:#b69cff; }
.chip.scan { background:var(--tint); color:var(--link); }
.chip.schat { background:var(--geel-z); color:#a87b00; }
.k.dark .chip.schat { color:#f0c34a; }

/* samenvatting bovenaan */
.samen { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.meter-r { display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px; }
.meter-r b { font-weight:600; }
.meter-r span { color:var(--ink3); }
.balk { position:relative; height:8px; border-radius:6px; background:var(--fill2); overflow:visible; }
.balk i { display:block; height:100%; border-radius:6px; }
.balk .doel { position:absolute; top:-3px; width:2px; height:14px; border-radius:1px; background:var(--ink3); }

/* eetmoment */
.moment { padding:12px 0 2px; border-top:1px solid var(--line); }
.moment:first-of-type { border-top:0; padding-top:2px; }
.moment-kop { display:flex; align-items:baseline; gap:8px; }
.moment-kop .naam { font-size:16px; font-weight:650; }
.moment-kop .tijd { font-size:15px; font-weight:600; color:var(--ink2); font-variant-numeric:tabular-nums; }
.moment-kop .kcal { margin-left:auto; font-size:13px; color:var(--ink3); font-variant-numeric:tabular-nums; }
.items { list-style:none; margin:6px 0 0; padding:0; }
.items li { display:flex; justify-content:space-between; gap:10px; font-size:14px; padding:3px 0; }
.items li span:last-child { color:var(--ink3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:7px 0 10px; font-size:12px; color:var(--ink3); }
.honger { display:inline-flex; gap:2px; vertical-align:-1px; margin-left:2px; }
.honger i { width:6px; height:6px; border-radius:50%; background:var(--fill2); display:block; }
.honger i.v { background:var(--oranje); }
.reactie { display:flex; gap:10px; background:var(--groen-z); border-radius:12px; padding:10px 12px; margin:2px 0 10px; }
.reactie .avatar { width:26px; height:26px; border-radius:50%; background:#1fb36b; color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; flex:none; }
.reactie .van { font-size:12px; font-weight:600; }
.reactie .van span { font-weight:400; color:var(--ink3); }
.reactie .tekst { font-size:13.5px; line-height:1.38; margin-top:1px; }
.leeg-moment { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-top:1px solid var(--line); font-size:15px; color:var(--ink3); }
.leeg-moment b { color:var(--link); font-weight:600; font-size:14px; }

/* Schijf van Vijf */
.schijf-wrap { display:flex; gap:14px; align-items:center; }
.schijf-wrap svg { flex:none; }
.vakken { flex:1; display:flex; flex-direction:column; gap:7px; min-width:0; }
.vak { font-size:12.5px; }
.vak .r1 { display:flex; justify-content:space-between; gap:6px; }
.vak .r1 b { font-weight:600; display:flex; align-items:center; gap:6px; min-width:0; }
.vak .r1 b i { width:9px; height:9px; border-radius:3px; flex:none; display:block; }
.vak .r1 span { color:var(--ink3); }
.vak .r1 span:last-child { white-space:nowrap; }
.schijf-wrap.stapel { flex-direction:column; align-items:stretch; }
.schijf-wrap.stapel svg { align-self:center; }
.vak .mini { height:4px; border-radius:3px; background:var(--fill2); margin-top:3px; overflow:hidden; }
.vak .mini i { display:block; height:100%; border-radius:3px; }
.buiten { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink2); display:flex; justify-content:space-between; }

/* voedingsstoffen */
.stof { display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; padding:7px 0; border-top:1px solid var(--line); }
.stof:first-of-type { border-top:0; padding-top:0; }
.stof .nm { font-size:14px; font-weight:550; }
.stof .wd { font-size:12px; font-weight:650; padding:2px 8px; border-radius:6px; }
.stof .wd.goed { background:var(--groen-z); color:#138a52; }
.stof .wd.bijna { background:var(--geel-z); color:#9a7300; }
.stof .wd.slecht { background:var(--rood-z); color:#c8323a; }
.k.dark .stof .wd.goed { color:#4fd394; } .k.dark .stof .wd.bijna { color:#f0c34a; } .k.dark .stof .wd.slecht { color:#ff7b80; }
.stof .bl { grid-column:1 / -1; display:flex; align-items:center; gap:10px; }
.stof .bl .balk { flex:1; height:6px; }
.stof .bl small { font-size:12px; color:var(--ink3); white-space:nowrap; font-variant-numeric:tabular-nums; min-width:96px; text-align:right; }
.meer { display:flex; justify-content:space-between; align-items:center; padding:10px 0 0; margin-top:4px; border-top:1px solid var(--line); font-size:14px; }
.meer span { color:var(--ink3); font-size:13px; }

/* + Eten sheet */
.dim { position:absolute; inset:0; background:rgba(0,0,0,.36); z-index:7; }
.sheet { position:absolute; left:0; right:0; bottom:0; top:56px; background:var(--bg); border-radius:14px 14px 0 0; z-index:8; padding:8px 16px 30px; overflow:hidden; }
.k.dark .sheet { background:#15181f; }
.grijper { width:38px; height:5px; border-radius:3px; background:var(--fill2); margin:0 auto 10px; }
.sheet-kop { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.sheet-kop .x { font-size:15px; color:var(--link); }
.sheet-kop h3 { margin:0; font-size:17px; font-weight:650; }
.sheet-kop .leeg { width:56px; }
.watwanneer { display:flex; gap:8px; margin-bottom:12px; }
.pil { display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:11px; background:var(--s1); border:1px solid var(--line); font-size:14px; font-weight:600; }
.pil small { color:var(--ink3); font-weight:500; }
.zoek { display:flex; align-items:center; gap:8px; background:var(--fill2); border-radius:11px; padding:10px 12px; font-size:15px; color:var(--ink3); margin-bottom:12px; }
.zoek .mic { margin-left:auto; color:var(--link); }
.drie { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
.drie div { background:var(--s1); border:1px solid var(--line); border-radius:14px; padding:12px 6px 10px; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:13px; font-weight:600; }
.drie svg { color:var(--blauw); }
.lijst { background:var(--s1); border:1px solid var(--line); border-radius:14px; padding:0 14px; }
.lijst .r { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.lijst .r:first-child { border-top:0; }
.lijst .r .t { flex:1; min-width:0; }
.lijst .r .t b { font-size:15px; font-weight:550; display:block; }
.lijst .r .t small { font-size:12px; color:var(--ink3); }
.plusrond { width:28px; height:28px; border-radius:50%; background:var(--tint); color:var(--link); display:grid; place-items:center; font-size:20px; font-weight:500; flex:none; }
.ster { color:#f5b400; font-size:13px; }

/* hoeveel */
.product { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.product .bol { width:46px; height:46px; border-radius:12px; background:rgba(242,140,40,.16); display:grid; place-items:center; font-size:22px; flex:none; }
.product b { font-size:18px; font-weight:650; display:block; }
.product small { font-size:12.5px; color:var(--ink3); }
.veld { background:var(--s1); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px; }
.veld .lbl { font-size:12px; font-weight:600; color:var(--ink3); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.eenheden { display:flex; gap:6px; flex-wrap:wrap; }
.eenheden span { padding:7px 11px; border-radius:9px; background:var(--fill); font-size:14px; font-weight:550; }
.eenheden span.aan { background:var(--blauw); color:#fff; }
.stepper { display:flex; align-items:center; justify-content:space-between; }
.stepper .n { font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; }
.stepper .b { width:40px; height:40px; border-radius:50%; background:var(--fill2); display:grid; place-items:center; font-size:22px; color:var(--ink); }
.waarden { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; text-align:center; }
.waarden b { display:block; font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.waarden small { font-size:11px; color:var(--ink3); }
.schaal { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.schaal span { text-align:center; padding:8px 0 7px; border-radius:9px; background:var(--fill); font-size:11.5px; font-weight:600; color:var(--ink2); }
.schaal span i { display:block; margin:0 auto 4px; width:18px; height:18px; border-radius:50%; border:2px solid var(--oranje); }
.schaal span:nth-child(1) i { border-width:1px; opacity:.4; } .schaal span:nth-child(2) i { background:linear-gradient(to top, var(--oranje) 25%, transparent 25%); }
.schaal span:nth-child(3) i { background:linear-gradient(to top, var(--oranje) 50%, transparent 50%); } .schaal span:nth-child(4) i { background:linear-gradient(to top, var(--oranje) 75%, transparent 75%); }
.schaal span:nth-child(5) i { background:var(--oranje); }
.schaal span.aan { background:rgba(245,147,58,.16); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--oranje); }
.gevoelens { display:flex; flex-wrap:wrap; gap:6px; }
.gevoelens span { padding:7px 11px; border-radius:999px; background:var(--fill); font-size:13.5px; font-weight:550; }
.gevoelens span.aan { background:var(--blauw); color:#fff; }
.gevoelens span.eigen { background:transparent; box-shadow:inset 0 0 0 1px var(--line2); color:var(--ink3); }
.groteknop { position:absolute; left:16px; right:16px; bottom:34px; height:50px; border-radius:14px; background:var(--blauw); color:#fff; font-size:16px; font-weight:650; display:grid; place-items:center; z-index:9; }

/* week */
.ritme svg text { font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.legenda { display:flex; flex-wrap:wrap; gap:10px; font-size:11.5px; color:var(--ink2); margin-top:8px; }
.legenda span { display:flex; align-items:center; gap:5px; }
.legenda i { width:8px; height:8px; border-radius:50%; display:block; }
.gem { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.gem div { background:var(--fill); border-radius:12px; padding:10px; }
.gem b { display:block; font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }
.gem small { font-size:11.5px; color:var(--ink3); }

/* ---------- Mac ---------- */
.mac-houder { width:100%; }
.mac-schaal { width:100%; overflow:hidden; border-radius:14px; box-shadow:0 0 0 1px rgba(127,127,127,.25), 0 30px 60px -24px rgba(0,0,0,.4); }
.mac { width:1360px; height:1240px; transform-origin:top left; background:var(--bg); color:var(--ink); display:grid; grid-template-columns:232px 1fr; }
.mac-zij { background:var(--s2); border-right:1px solid var(--line); padding:14px 12px; display:flex; flex-direction:column; }
.verkeerslicht { display:flex; gap:8px; margin:2px 4px 22px; }
.verkeerslicht i { width:12px; height:12px; border-radius:50%; display:block; }
.merk { font-family:'Space Grotesk',-apple-system,sans-serif; font-weight:600; font-size:13px; letter-spacing:.01em; color:var(--ink2); margin:0 8px 20px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.merk-ic { width:52px; height:52px; border-radius:12px; box-shadow:0 4px 12px rgba(10,40,140,.22); display:block; }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav a { display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:9px; font-size:14px; color:var(--ink2); text-decoration:none; }
.nav a.aan { background:var(--tint); color:var(--ink); font-weight:600; }
.nav a.aan svg { color:var(--blauw); }
.mac-zij .onder { margin-top:auto; }
.mac-main { overflow:hidden; padding:24px 30px; }
.mac-kop { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:20px; }
.mac-kop h1 { margin:0; font-size:30px; font-weight:700; letter-spacing:-.02em; }
.mac-kop .midden { display:flex; align-items:center; gap:14px; }
.mac-kop .seg { margin:0; width:260px; }
.mac-kop .datum { margin:0; gap:10px; }
.mac-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:18px; align-items:start; }