/* ================= Trackify · style.css ================= */
@font-face{font-family:"Inter";src:url(inter.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---- kleuren (licht) ---- */
:root{
--bg:#f7f3ec;--card:#fffdf9;--ink:#1d2a2f;--mut:#667378;--line:#e6ded2;--hdr:#fffdf9;--inp:#fffefb;
--c-kcal:#0c8c82;--s-kcal:#e2f2ed;--b-kcal:#98d0c4;--k-kcal:#0a7d74;--d-kcal:#2f7dc4;
--c-gym:#df4f36;--s-gym:#fce9e2;--b-gym:#f2b09f;--k-gym:#cf4128;--d-gym:#ee8a1f;
--c-hab:#6d45e0;--s-hab:#efe9fc;--b-hab:#c5b5f3;--k-hab:#5f35d6;--d-hab:#d443b0;
--warn:#cf4128;--ok:#178a45;--bad:#d9362b;--gold:#b7791f;--amber:#d98206;--sunny:#c98a04;--indigo:#4f46e5;--water:#1a86c7;--leaf:#178a45;--rose:#e0335a;--fire:#e8601c;
--accent:var(--c-kcal);--accent2:var(--d-kcal);--soft:var(--s-kcal);--bar:var(--b-kcal);--btn:var(--k-kcal);
--glass:rgba(255,253,249,.8);--blob:.42;--orb-op:.34;--orb-blend:multiply;
--sh:0 1px 2px rgba(80,55,20,.05),0 10px 28px -12px rgba(80,55,20,.14);
--font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--r:18px;
color-scheme:light}
/* ---- kleuren (donker) ---- */
:root[data-theme=dark]{--bg:#0b1a1f;--card:#12262d;--ink:#e4f2f3;--mut:#93b3ba;--line:#234550;--hdr:#0f2229;--inp:#0f2229;
--c-kcal:#2bc0bd;--s-kcal:#183840;--b-kcal:#3f7f84;--k-kcal:#12797a;--d-kcal:#5aa0e6;
--c-gym:#fb923c;--s-gym:#3a2a22;--b-gym:#8a4a2a;--k-gym:#b93d0c;--d-gym:#f59e0b;
--c-hab:#b39bff;--s-hab:#2a2548;--b-hab:#5d4aa3;--k-hab:#6d28d9;--d-hab:#e879f9;
--warn:#ff8a5c;--ok:#4ade80;--bad:#f87171;--gold:#f6c453;--amber:#fbbf24;--sunny:#fde047;--indigo:#a5b4fc;--water:#7dd3fc;--leaf:#86efac;--rose:#fda4af;--fire:#fb923c;--glass:rgba(18,38,45,.72);--blob:.32;--orb-op:.55;--orb-blend:screen;--sh:0 1px 2px rgba(0,0,0,.2);color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0b1a1f;--card:#12262d;--ink:#e4f2f3;--mut:#93b3ba;--line:#234550;--hdr:#0f2229;--inp:#0f2229;
--c-kcal:#2bc0bd;--s-kcal:#183840;--b-kcal:#3f7f84;--k-kcal:#12797a;--d-kcal:#5aa0e6;
--c-gym:#fb923c;--s-gym:#3a2a22;--b-gym:#8a4a2a;--k-gym:#b93d0c;--d-gym:#f59e0b;
--c-hab:#b39bff;--s-hab:#2a2548;--b-hab:#5d4aa3;--k-hab:#6d28d9;--d-hab:#e879f9;
--warn:#ff8a5c;--ok:#4ade80;--bad:#f87171;--gold:#f6c453;--amber:#fbbf24;--sunny:#fde047;--indigo:#a5b4fc;--water:#7dd3fc;--leaf:#86efac;--rose:#fda4af;--fire:#fb923c;--glass:rgba(18,38,45,.72);--blob:.32;--orb-op:.55;--orb-blend:screen;--sh:0 1px 2px rgba(0,0,0,.2);color-scheme:dark}}
/* ---- accent per onderdeel ---- */
body[data-sec=gym]{--accent:var(--c-gym);--accent2:var(--d-gym);--soft:var(--s-gym);--bar:var(--b-gym);--btn:var(--k-gym)}
body[data-sec=habits]{--accent:var(--c-hab);--accent2:var(--d-hab);--soft:var(--s-hab);--bar:var(--b-hab);--btn:var(--k-hab)}
/* ---- hoog contrast ---- */
html.hc:root{--mut:color-mix(in srgb,var(--ink) 82%,var(--bg));--line:color-mix(in srgb,var(--ink) 50%,var(--bg));--glass:var(--card)}
html.hc .card,html.hc .sec{border-width:2px;backdrop-filter:none;-webkit-backdrop-filter:none}
html.hc .bgfx{display:none}
html.hc .btn.ghost{outline:1.5px solid var(--accent);outline-offset:-1.5px}
/* ---- tekstgrootte ---- */
html{font-size:16px}html[data-size=s]{font-size:15px}html[data-size=l]{font-size:18px}html[data-size=xl]{font-size:20px}

/* ---- basis ---- */
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%;touch-action:manipulation}
body{-webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:1rem/1.5 var(--font);-webkit-font-smoothing:antialiased;padding-top:env(safe-area-inset-top,0px);transition:background-color .4s,color .4s}
main{max-width:640px;margin:0 auto;padding:12px 16px calc(100px + env(safe-area-inset-bottom,0px))}
h1{font-size:1.55rem;letter-spacing:-.02em;margin:8px 0 14px;line-height:1.2}h1 small{font-size:.82rem;color:var(--mut);font-weight:500;margin-left:8px;letter-spacing:0}
h2{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0 0 12px;padding-left:8px;border-left:3px solid var(--accent);font-weight:700}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:10px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--btn);color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;text-decoration:none}.skip:focus-visible{position:fixed;left:12px;top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- achtergrond-blobs ---- */
.bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(120% 80% at 0% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%),radial-gradient(100% 70% at 100% 100%,color-mix(in srgb,var(--accent2) 9%,transparent),transparent 60%)}
/* gloeiende orbs: buitenste element volgt een traag pad, binnenste ademt en wiebelt */
.orb{position:absolute;left:calc(var(--s)/-2);top:calc(var(--s)/-2);width:var(--s);height:var(--s);transform:translate(var(--x),var(--y));animation:var(--p) var(--d) linear var(--dl) infinite var(--dir,normal);will-change:transform}
.orb b{display:block;width:100%;height:100%;border-radius:50%;opacity:var(--orb-op);mix-blend-mode:var(--orb-blend);
background:radial-gradient(circle,color-mix(in srgb,var(--c) 42%,transparent) 0%,color-mix(in srgb,var(--c) 30%,transparent) 22%,color-mix(in srgb,var(--c) 14%,transparent) 44%,color-mix(in srgb,var(--c) 4%,transparent) 60%,transparent 70%);
animation:breathe var(--bd,11s) ease-in-out infinite alternate;will-change:transform,opacity}
.orb:nth-child(1){--s:36vmax;--c:var(--accent);--p:o1;--d:78s;--dl:-12s;--x:12vw;--y:18vh;--bd:13s}
.orb:nth-child(2){--s:28vmax;--c:var(--accent2);--p:o2;--d:62s;--dl:-30s;--x:75vw;--y:60vh;--bd:9s}
.orb:nth-child(3){--s:32vmax;--c:color-mix(in srgb,var(--accent) 55%,var(--accent2));--p:o3;--d:90s;--dl:-45s;--x:-6vw;--y:44vh;--bd:15s}
.orb:nth-child(4){--s:18vmax;--c:var(--accent);--p:o2;--d:48s;--dl:-8s;--x:85vw;--y:12vh;--dir:reverse;--bd:8s}
.orb:nth-child(5){--s:22vmax;--c:var(--accent2);--p:o3;--d:70s;--dl:-33s;--x:15vw;--y:68vh;--dir:reverse;--bd:12s}
.orb:nth-child(6){--s:13vmax;--c:color-mix(in srgb,var(--accent) 70%,#fff);--p:o1;--d:54s;--dl:-20s;--x:96vw;--y:40vh;--dir:reverse;--bd:7s}
@keyframes o1{0%{transform:translate(-4vw,8vh)}17%{transform:translate(38vw,-6vh)}33%{transform:translate(96vw,10vh)}50%{transform:translate(104vw,52vh)}67%{transform:translate(70vw,104vh)}83%{transform:translate(-6vw,78vh)}100%{transform:translate(-4vw,8vh)}}
@keyframes o2{0%{transform:translate(100vw,78vh)}20%{transform:translate(46vw,106vh)}40%{transform:translate(-8vw,64vh)}60%{transform:translate(-2vw,14vh)}80%{transform:translate(66vw,-8vh)}100%{transform:translate(100vw,78vh)}}
@keyframes o3{0%{transform:translate(-8vw,40vh)}25%{transform:translate(20vw,-6vh)}50%{transform:translate(106vw,24vh)}75%{transform:translate(84vw,100vh)}100%{transform:translate(-8vw,40vh)}}
@keyframes breathe{0%{transform:translate(-3%,2%) scale(.86);opacity:calc(var(--orb-op)*.7)}50%{transform:translate(3%,-3%) scale(1.05)}100%{transform:translate(-2%,-4%) scale(1.14);opacity:var(--orb-op)}}

/* ---- header ---- */
.site{position:relative;z-index:10;background:linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 60%,transparent 100%);animation:fd .5s both}
.site>div{max-width:1040px;margin:0 auto;padding:0 16px;min-height:58px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;min-height:44px}
.brand small{font-size:.75rem;font-weight:700;color:var(--accent);background:var(--soft);padding:3px 9px;border-radius:20px;letter-spacing:0}
.logo{width:26px;height:26px;flex:none;display:block;border-radius:8px}
.hbtn{display:flex;align-items:center;gap:8px;position:relative}
.ib{width:44px;height:44px;border:0;border-radius:50%;background:var(--soft);color:var(--accent);display:grid;place-items:center;cursor:pointer;font-size:1.1rem;line-height:1;padding:0;text-decoration:none;transition:transform .25s,background .3s}
.ib svg{width:20px;height:20px}
.ib.on{background:var(--btn);color:#fff}
@media(hover:hover){.ib:hover{transform:rotate(14deg) scale(1.08)}.ib.gear:hover{transform:rotate(60deg) scale(1.08)}}
.ib:active{transform:scale(.88)}
.tg span{display:block;animation:tgin .55s cubic-bezier(.2,.8,.2,1)}
/* wissel-menu */
.swm{position:absolute;right:0;top:calc(100% + 10px);width:min(290px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);border-radius:20px;padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.18);transform-origin:top right;opacity:0;transform:scale(.92) translateY(-6px);transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1);z-index:40}
.swm.open{opacity:1;transform:none}
.swm a{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:8px;border-radius:14px;text-decoration:none;color:var(--ink);min-height:56px}
.swm a span{grid-row:1/3;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;background:color-mix(in srgb,var(--c) 16%,transparent)}
.swm a b{font-size:.95rem}.swm a small{color:var(--mut);font-size:.78rem}
.swm a.on{background:color-mix(in srgb,var(--c) 12%,transparent)}.swm a.on b{color:var(--c)}
@media(hover:hover){.swm a:hover{background:color-mix(in srgb,var(--c) 10%,transparent)}}
.swm.open a{animation:up .35s cubic-bezier(.2,.8,.2,1) both}.swm a:nth-child(2){animation-delay:.04s!important}.swm a:nth-child(3){animation-delay:.08s!important}.swm a:nth-child(4){animation-delay:.12s!important}.swm a:nth-child(5){animation-delay:.16s!important}
.swm hr{border:0;border-top:1px solid var(--line);margin:6px 8px}

/* ---- tabbalk (mobiel onderaan, desktop bovenaan) ---- */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));background:var(--glass);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-top:1px solid var(--line)}
nav.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;border-radius:14px;color:var(--mut);text-decoration:none;font-weight:600;font-size:.72rem;position:relative;transition:color .2s,background .2s}
nav.tabs .ti{font-size:1.25rem;line-height:1;display:grid;place-items:center;width:52px;height:30px;border-radius:15px;transition:background .25s,transform .2s}
nav.tabs a.on{color:var(--accent)}
nav.tabs a.on .ti{animation:pop .35s both}
nav.tabs a:active .ti{transform:scale(.9)}
@media(min-width:760px){
nav.tabs{position:sticky;top:0;bottom:auto;max-width:1040px;margin:0 auto;padding:8px 16px;border:0;border-bottom:1px solid var(--line);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body nav.tabs{background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
nav.tabs a{flex-direction:row;gap:8px;font-size:.9rem;min-height:46px}
nav.tabs .ti{width:auto;height:auto;background:none!important;font-size:1.05rem}


@media(hover:hover){nav.tabs a:hover{background:var(--soft)}}
main{padding-bottom:40px}}

/* ---- desktop: meerdere kolommen ---- */
@media(min-width:900px){
main{max-width:1040px;display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
main>*:not(.card),main>.card.wide{grid-column:1/-1}
main.one{max-width:720px;display:block}}

/* ---- kaarten ---- */
.card{position:relative;background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px;box-shadow:var(--sh);transition:box-shadow .25s,transform .25s,opacity .6s}
@media(hover:hover){.card:hover{box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 14%,transparent)}}
/* gloeiende rand bij hover */
.glow::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 55%,var(--accent) 75%,var(--accent2) 88%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .35s;animation:spinb 3.2s linear infinite paused;pointer-events:none;z-index:1}
@media(hover:hover){.glow:hover::before{opacity:1;animation-play-state:running}}
@keyframes spinb{to{--ang:360deg}}
/* scroll-animatie */
.sr{opacity:0;transform:translateY(26px)}
.sr.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}

/* ---- knoppen & invoer ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 18px;border:0;border-radius:14px;background:var(--btn);color:#fff;font:600 .95rem/1.2 var(--font);cursor:pointer;text-decoration:none;position:relative;overflow:hidden;transition:transform .15s,background .2s,box-shadow .2s,color .2s}
.btn.ghost{background:var(--soft);color:var(--accent)}
.btn.sm{min-height:44px;padding:0 13px;font-size:.88rem}
.btn.ic{width:44px;padding:0}
.btn.danger{background:var(--bad);color:#fff}
.btn.wide{width:100%}
.btn:disabled{opacity:.5;pointer-events:none}
@media(hover:hover){.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 28%,transparent)}}
.btn:active{transform:scale(.95)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
input,select,textarea{width:100%;min-height:46px;border:1px solid var(--line);border-radius:12px;padding:0 12px;font:400 max(16px,1rem)/1.3 var(--font);color:var(--ink);background:var(--inp);transition:border-color .2s,box-shadow .2s}
textarea{padding:10px 12px;min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
input[type=checkbox]{width:24px;height:24px;min-height:24px;accent-color:var(--accent);flex:none;margin:0}
input[type=range]{padding:0;border:0;background:none;accent-color:var(--accent);min-height:44px}
label{display:block;font-size:.78rem;color:var(--mut);margin-bottom:8px;font-weight:500}
.g{display:grid;gap:8px}.g>*{min-width:0}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
.chk{display:flex;align-items:center;gap:12px;font-size:1rem;color:var(--ink);min-height:44px;margin:0;cursor:pointer}
.note{font-size:.84rem;color:var(--mut);margin:4px 0 10px}
.li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:.9rem}.li small{color:var(--mut);display:block;font-size:.8rem}
.li>div:first-child{min-width:0}
.chips{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding:2px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chips button{white-space:nowrap;min-height:44px;padding:0 15px;border:1px solid var(--line);border-radius:22px;background:var(--glass);font:600 .88rem var(--font);color:var(--mut);cursor:pointer;transition:transform .15s,background .2s,color .2s,border-color .2s}
.chips button.on{background:var(--btn);color:#fff;border-color:var(--btn);animation:pop .35s both}
@media(hover:hover){.chips button:hover{border-color:var(--accent)}}
.chips button:active{transform:scale(.95)}
.seg{display:flex;background:var(--soft);border-radius:14px;padding:4px;gap:4px;margin-bottom:10px}
.seg button{flex:1;min-height:40px;border:0;border-radius:10px;background:none;font:600 .88rem var(--font);color:var(--accent);cursor:pointer;transition:background .2s,color .2s}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.tag{display:inline-block;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--soft);color:var(--accent);vertical-align:middle}
.empty{text-align:center;padding:20px 10px;color:var(--mut)}.empty span{font-size:2.2rem;display:block;margin-bottom:6px;animation:bob 3s ease-in-out infinite}

/* ---- kcal: vandaag ---- */
.mr{margin-bottom:12px}.mr div:first-child{display:flex;justify-content:space-between;font-size:.9rem}.mr span{color:var(--mut)}
.bar{height:8px;background:var(--soft);margin-top:5px;border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width .9s cubic-bezier(.2,.8,.2,1)}
.ring{position:relative;width:170px;height:170px;margin:4px auto 18px}.ring svg{width:100%;height:100%}.rt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.rt b{font-size:2.1rem;line-height:1;letter-spacing:-.03em}.rt span{font-size:.75rem;color:var(--mut);margin-top:4px}
.rtk{stroke:var(--soft)}.rc{transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.ring.done{animation:beat 2.4s ease-in-out infinite;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 45%,transparent))}
.party{background:linear-gradient(110deg,var(--btn),var(--accent2),var(--btn));background-size:200% 100%;color:#fff;border-radius:var(--r);padding:14px 16px;margin-bottom:14px;font-weight:600;animation:pop .6s,sh 4s linear infinite}
.ph{width:100%;max-height:220px;object-fit:cover;border-radius:14px;margin-bottom:8px;animation:pop .4s both}
.chart{position:relative;height:170px;display:flex;align-items:flex-end;gap:2px;border-bottom:1px solid var(--ink);margin:14px 0 6px}
.col{flex:1;height:100%;display:flex;align-items:flex-end}.col i{display:block;width:100%;height:0;background:var(--bar);border-radius:4px 4px 0 0;transition:height .7s cubic-bezier(.2,.8,.2,1),filter .2s}.col i.hit{background:var(--accent)}
@media(hover:hover){.col:hover i{filter:brightness(.88)}}
.gl{position:absolute;left:0;right:0;border-top:2px dashed var(--accent2);transform-origin:left;animation:draw .8s .3s cubic-bezier(.2,.8,.2,1) both}
.axis{display:flex;justify-content:space-between;font-size:.75rem;color:var(--mut)}

/* ---- kcal: maaltijden (banner) ---- */
@media(min-width:900px){main.meals{grid-template-columns:minmax(320px,400px) 1fr}main.meals>.card.wide{grid-column:auto}main.meals>.card:first-of-type{position:sticky;top:80px}}
.ban{border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line);margin-top:12px}
.bimg{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--soft)}
.bimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.bimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,24,.08) 30%,rgba(8,20,24,.5));pointer-events:none}
.bph{width:100%;height:100%;display:grid;place-items:center;font-size:3rem;background:linear-gradient(135deg,var(--soft),color-mix(in srgb,var(--accent) 35%,var(--soft)))}
.bph.c-O{background:linear-gradient(135deg,#fde7c8,#f6b98a)}.bph.c-L{background:linear-gradient(135deg,#d7f2df,#8fd3a6)}.bph.c-A{background:linear-gradient(135deg,#dbe6fb,#9db6ea)}.bph.c-S{background:linear-gradient(135deg,#fbd9e0,#f19aae)}
:root[data-theme=dark] .bph{filter:brightness(.62) saturate(1.1)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .bph{filter:brightness(.62) saturate(1.1)}}
.bph span{filter:drop-shadow(0 4px 10px rgba(0,0,0,.2));animation:bob 3.5s ease-in-out infinite}
.bnm{position:absolute;left:12px;bottom:12px;right:12px;z-index:1;display:flex}
.bnm b{background:rgba(255,255,255,.2);backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:14px;padding:8px 14px;font-size:1.1rem;font-weight:700;letter-spacing:-.01em;text-shadow:0 1px 6px rgba(0,0,0,.35);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mac{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line)}
.mac span{background:var(--card);padding:10px 4px;text-align:center;font-size:.72rem;color:var(--mut)}
.mac b{display:block;font-size:1.05rem;color:var(--ink);font-weight:700}
.mac span:first-child b{color:var(--accent)}
button.ban{display:block;width:100%;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.ban.roll .bnm b{animation:flick .25s infinite}
.ban.land{animation:land .55s cubic-bezier(.2,.8,.2,1) both}
@media(hover:hover){.ban:hover .bimg img,.mc:hover .bimg img{transform:scale(1.05)}}
.dice{display:inline-block}.dice.spin{animation:spin 1.6s cubic-bezier(.3,.7,.3,1)}
.ingl .li{animation:up .35s both}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.mc{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);padding:0;text-align:left;cursor:pointer;font:inherit;color:var(--ink);transition:transform .2s,box-shadow .2s;animation:up .45s cubic-bezier(.2,.8,.2,1) both}
.mc .bnm{left:8px;right:8px;bottom:8px}.mc .bnm b{font-size:.82rem;padding:5px 9px;border-radius:10px}
.mc .bph{font-size:2rem}
.mc small{display:block;padding:8px 10px;color:var(--mut);font-size:.78rem}.mc small b{color:var(--accent)}
@media(hover:hover){.mc:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 18%,transparent)}}
.mc:active{transform:scale(.97)}
.srch{position:relative}.srch input{padding-left:40px}.srch::before{content:"";position:absolute;left:13px;top:50%;width:18px;height:18px;transform:translateY(-50%);background:var(--mut);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20.5 20.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20.5 20.5'/%3E%3C/svg%3E") center/contain no-repeat}
.th{width:64px;flex:none;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:var(--soft)}.th img{width:100%;height:100%;object-fit:cover;display:block}.th .bph{font-size:1rem}
.li .lm{display:flex;align-items:center;gap:10px;min-width:0}
.ing{border:1px solid var(--line);border-radius:14px;padding:10px;margin-bottom:8px;animation:fd .3s both}.ing label{margin:0}
/* bijsnijden */
.crop{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#111;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.crop:active{cursor:grabbing}
.crop img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;pointer-events:none}
.crop::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);pointer-events:none;background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) 33.33% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) 66.66% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) 0 33.33%/100% 1px no-repeat,linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) 0 66.66%/100% 1px no-repeat}

/* ---- gym ---- */
.exh{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
.exh b{font-size:1.05rem}.exh small{color:var(--mut);font-size:.78rem;display:block}
.prev{font-size:.82rem;color:var(--mut);background:var(--soft);border-radius:10px;padding:7px 10px;margin:6px 0 8px}
.prev b{color:var(--ink);font-weight:600}
.pr{font-size:.8rem;color:var(--gold);font-weight:700}
.srow{display:grid;grid-template-columns:28px 1fr 18px 1fr 30px 44px;gap:6px;align-items:center;margin-bottom:6px;animation:up .3s both}
.srow.c2{grid-template-columns:28px 1fr 1fr 30px 44px}
.srow .sn{width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--accent);display:grid;place-items:center;font-size:.78rem;font-weight:700}
.srow .x{text-align:center;color:var(--mut)}
.srow input{padding:0 8px;text-align:center}
.srow .trophy{font-size:1.2rem;text-align:center;opacity:0;transform:scale(.3);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.srow.isPR .trophy{opacity:1;transform:none}
.srow.isPR input[data-f=kg]{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
.srow.out{animation:outx .25s ease both}
.prban{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:60;background:linear-gradient(110deg,var(--gold),#f59e0b,var(--gold));background-size:200% 100%;color:#1f1300;font-weight:800;padding:14px 22px;border-radius:18px;box-shadow:0 14px 40px rgba(183,121,31,.4);animation:prin .6s cubic-bezier(.3,1.5,.5,1) both,sh 3s linear infinite;text-align:center;max-width:calc(100vw - 32px)}
.prban small{display:block;font-weight:600;opacity:.8}
.prban.tout{animation:prout .35s ease both}
.vol{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:.88rem;color:var(--mut)}
.vol b{font-size:1.3rem;color:var(--ink)}
.up{color:var(--ok);font-weight:700}.dn{color:var(--bad);font-weight:700}
.sess .sets{font-size:.84rem;color:var(--mut);margin:2px 0 0}
.sess .it{padding:8px 0;border-top:1px solid var(--line)}
.sess .it b{font-size:.92rem}
.sess .nt{font-style:italic;color:var(--mut);font-size:.86rem;background:var(--soft);border-radius:10px;padding:8px 10px;margin:8px 0}
.sess.out{animation:outx .3s ease both}
.lchart{width:100%;height:170px;display:block;margin:10px 0 4px;overflow:visible}
.lchart .ln{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:dash 1.2s .2s cubic-bezier(.2,.8,.2,1) forwards}
.lchart .ar{fill:url(#lg);opacity:0;animation:fd .8s .6s forwards}
.lchart circle{fill:var(--card);stroke:var(--accent);stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:pop .4s both}
.lchart text{fill:var(--mut);font-size:11px;font-family:var(--font)}
.lchart .gr{stroke:var(--line);stroke-dasharray:3 4}
.big{font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1}
/* workouts */
.chips button.wch.on{background:var(--wc);border-color:var(--wc);color:#fff}
.chips.wrap{flex-wrap:wrap;overflow:visible}
.card.wk{border-left:5px solid var(--wc)}
.wico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.6rem;background:color-mix(in srgb,var(--wc) 18%,transparent);flex:none}
.mtags{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 2px}
.mgrp{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:14px 4px 8px;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.mgrp::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--wc);flex:none}
.mgrp::after{content:"";flex:1;height:1px;background:var(--line)}
.icn{display:flex;flex-wrap:wrap;gap:6px}
.icn button{width:48px;height:48px;border-radius:14px;border:1px solid var(--line);background:var(--inp);font-size:1.4rem;cursor:pointer;transition:transform .15s,background .2s,border-color .2s}
.icn button.on{background:var(--soft);border-color:var(--accent);animation:pop .35s both}
.sws{display:flex;flex-wrap:wrap;gap:10px}
.sws button{width:44px;height:44px;border-radius:50%;border:0;background:var(--wc);cursor:pointer;transition:transform .15s,box-shadow .2s}
.sws button.on{box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--wc);transform:scale(.92)}
.icn button:active,.sws button:active{transform:scale(.88)}
/* rusttimer */
.rest{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(440px,calc(100vw - 20px));z-index:30;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.25);display:flex;gap:14px;align-items:center;animation:sheet .45s cubic-bezier(.2,.9,.25,1.1) both}
.rest.bye{animation:sheetout .3s ease both}
@media(min-width:760px){.rest{bottom:24px}}
.rest .rr{position:relative;width:118px;height:118px;flex:none}
.rest svg{width:100%;height:100%;transform:rotate(-90deg)}
.rest .rtrack{stroke:var(--soft)}
.rest .rprog{stroke:var(--accent);transition:stroke-dashoffset .25s linear,stroke .3s}
.rest .rtm{position:absolute;inset:0;display:grid;place-items:center;font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.rest .rb{flex:1;min-width:0}.rest .rb b{display:block;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rest .rb small{color:var(--mut);font-size:.78rem}
.rest .row{margin-top:8px}.rest .btn{flex:1}
.rest.paused .rtm{animation:flick 1.2s infinite}
.rest.done{border-color:var(--ok)}.rest.done .rprog{stroke:var(--ok)}.rest.done .rr{animation:beat .8s ease-in-out 3}
body.hasrest main{padding-bottom:260px}

/* ---- habits ---- */
.streak{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:center}
.streak>div{background:var(--soft);border-radius:16px;padding:14px 8px}
.streak b{display:block;font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.streak small{color:var(--mut);font-size:.78rem}
.flame{display:inline-block;font-size:1.6rem;transform-origin:50% 90%;animation:flk 1.8s ease-in-out infinite}
.flame.cold{filter:grayscale(1);opacity:.5;animation:none}
.flame.boost{animation:boost 1s cubic-bezier(.3,1.6,.5,1),flk 1.8s 1s ease-in-out infinite}
.dayok{margin-top:10px;text-align:center;font-weight:700;color:var(--ok);animation:pop .5s both}
.hb{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 10px;margin:0 0 6px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .25s,border-color .25s,transform .15s,opacity .3s}
.hb:active{transform:scale(.98)}
.hb .ck{width:28px;height:28px;flex:none;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;transition:background .25s,border-color .25s}
.hb .ck svg{width:16px;height:16px;stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s .05s ease}
.hb.done{background:var(--soft);border-color:transparent}
.hb.done .ck{background:var(--btn);border-color:var(--btn)}
.hb.done .ck svg{stroke-dashoffset:0}
.hb.done .hn{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink) 40%,transparent);color:var(--mut)}
.hb.just .ck{animation:pop .45s}
.hb .hn{flex:1;min-width:0;font-weight:600;font-size:.95rem}
.hb .hn small{display:block;font-weight:500;color:var(--mut);font-size:.76rem}
.hb .req{color:var(--gold)}
.hb .tm{font-size:.76rem;font-weight:700;color:var(--mut);background:var(--soft);padding:3px 8px;border-radius:10px;white-space:nowrap}
.hb.late{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,var(--card));animation:lpulse 2s ease-in-out infinite}
.hb.late .tm{background:var(--warn);color:#fff}
.hb.late .ck{border-color:var(--warn)}
.cnt3{display:flex;align-items:center;gap:4px}
.cnt3 .btn{width:40px;min-height:40px;padding:0;border-radius:12px}
.cnt3 b{min-width:40px;text-align:center;font-size:.9rem}
.wkd{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;margin-bottom:6px}
.wkd div{font-size:.72rem;color:var(--mut)}
.dot{width:36px;height:36px;margin:4px auto 0;border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:700;animation:pop .4s both;border:2px solid transparent}
.dot.ok{background:var(--ok);color:#fff}.dot.miss{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}.dot.none{background:var(--soft);color:var(--mut)}.dot.open{border-color:var(--accent);color:var(--accent)}
.wg{width:100%;border-collapse:separate;border-spacing:0 4px;font-size:.82rem}
.wg th{font-weight:600;color:var(--mut);font-size:.7rem;padding:0 0 4px}
.wg td{text-align:center;padding:0}
.wg td:first-child{text-align:left;padding-right:6px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.wc{width:26px;height:26px;margin:0 auto;border-radius:8px;display:grid;place-items:center;font-size:.72rem;font-weight:700;animation:pop .35s both}
.wc.y{background:var(--btn);color:#fff}.wc.n{background:var(--soft);color:var(--mut)}.wc.m{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}.wc.p{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)}.wc.x{background:none;color:var(--line)}
.days{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.days button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--inp);font:600 .82rem var(--font);color:var(--mut);cursor:pointer;transition:background .2s,color .2s,transform .15s}
.days button.on{background:var(--btn);color:#fff;border-color:var(--btn)}
.days button:active{transform:scale(.9)}

/* ---- modal / dialoog ---- */
.mdl{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:16px}
.mdl .mbg{position:absolute;inset:0;background:rgba(5,15,20,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fd .25s both}
.mdl .mbox{position:relative;width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 30px 80px rgba(0,0,0,.3);animation:min .4s cubic-bezier(.2,.9,.25,1.15) both}
.mdl.sheet{align-items:flex-end;padding:0}
.mdl.sheet .mbox{width:min(640px,100%);border-radius:24px 24px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));animation:sheet .45s cubic-bezier(.2,.9,.25,1) both;max-height:92vh}
@media(min-width:760px){.mdl.sheet{align-items:center;padding:16px}.mdl.sheet .mbox{border-radius:24px}}
.mdl .mbox h3{margin:0 0 8px;font-size:1.15rem}
.mdl .mbox p{margin:0 0 6px;color:var(--mut);white-space:pre-line}
.mdl .row{justify-content:flex-end;margin-top:16px}
.mdl.bye .mbg{animation:fdo .2s both}.mdl.bye .mbox{animation:mout .2s both}
.mdl .ico{font-size:2rem;margin-bottom:6px;display:block}
/* onboarding */
.ob{text-align:center;padding:6px 4px 0}
.ob .obi{width:92px;height:92px;margin:6px auto 14px;border-radius:28px;display:grid;place-items:center;font-size:2.8rem;background:color-mix(in srgb,var(--c) 16%,transparent);animation:land .55s both}
.ob h3{font-size:1.35rem!important}
.ob p{font-size:.95rem}
.obd{display:flex;justify-content:center;gap:6px;margin:16px 0 4px}.obd i{width:8px;height:8px;border-radius:4px;background:var(--line);transition:width .3s,background .3s}.obd i.on{width:24px;background:var(--accent)}

/* ---- toast, bubbels, confetti ---- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;font-size:.9rem;z-index:80;display:flex;gap:12px;align-items:center;max-width:calc(100vw - 32px);animation:tin .3s both;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.toast button{background:none;border:0;color:var(--bg);font:700 .9rem var(--font);text-decoration:underline;cursor:pointer;min-height:36px}
@media(min-width:760px){.toast{bottom:24px}}
.toast.tout{animation:tout .3s ease both}
.fl{position:fixed;z-index:30;pointer-events:none;font:700 .88rem var(--font);color:var(--accent);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px 10px;animation:fl .95s ease-out forwards}
.cf{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:65}.cf span{position:absolute;top:-30px;animation:fall linear forwards}
.rip{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
.btn.ghost .rip{background:color-mix(in srgb,var(--accent) 28%,transparent)}
input.ok,select.ok,textarea.ok{animation:okf .7s ease-out;border-color:var(--accent)}
.li.out,.ing.out,.hb.out{animation:outx .25s ease both}

/* ---- footer ---- */
footer{text-align:center;color:var(--mut);font-size:.75rem;padding:18px 16px calc(100px + env(safe-area-inset-bottom,0px));animation:fd .8s .4s both}
@media(min-width:760px){footer{padding-bottom:28px}}

/* ---- landingspagina ---- */
.w{max-width:1040px;margin:0 auto;padding:0 16px}
.hero{padding:52px 0 26px;position:relative}
.w{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
.hero h1{font-size:clamp(2rem,6vw,3.1rem);line-height:1.08;letter-spacing:-.035em;margin:0 0 14px;max-width:680px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--c-kcal),var(--c-gym),var(--c-hab));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sh 6s linear infinite}
.hero p{color:var(--mut);font-size:1.1rem;max-width:540px;margin:0}
.hero>*{animation:up .7s cubic-bezier(.2,.8,.2,1) both}.hero>:nth-child(2){animation-delay:.12s}
.secs{display:grid;grid-template-columns:1fr;gap:16px;padding:8px 0 30px;perspective:1000px}
@media(min-width:760px){.secs{grid-template-columns:repeat(3,1fr)}}
.sec{--rx:0deg;--ry:0deg;position:relative;display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:24px;background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--line);color:var(--ink);text-decoration:none;overflow:visible;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s;animation:secin .8s cubic-bezier(.2,.8,.2,1) both;--accent:var(--c);--accent2:var(--c2)}
.sec:nth-child(2){animation-delay:.12s}.sec:nth-child(3){animation-delay:.24s}
.sec.tjs{transition:box-shadow .3s}
.sec::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding-top:4px;background:linear-gradient(90deg,var(--c),var(--c2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.sec .ic{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;font-size:2.4rem;background:color-mix(in srgb,var(--c) 15%,transparent);margin-bottom:10px;transform:translateZ(30px)}
.sec .ic span{display:block;animation:bob 3s ease-in-out infinite}
.sec:nth-child(2) .ic span{animation-delay:.5s}.sec:nth-child(3) .ic span{animation-delay:1s}
.sec b{font-size:1.45rem;letter-spacing:-.02em}
.sec p{margin:0;color:var(--mut);font-size:.95rem;flex:1}
.sec i{font-style:normal;font-weight:700;color:var(--c);margin-top:10px;display:inline-flex;gap:6px;align-items:center}
.sec i::after{content:"→";transition:transform .25s}
@media(hover:hover){.sec:hover{box-shadow:0 22px 50px color-mix(in srgb,var(--c) 25%,transparent)}.sec:hover i::after{transform:translateX(5px)}}
.sec:active{transform:scale(.98)}
.sec.k{--c:var(--c-kcal);--c2:var(--d-kcal)}.sec.gy{--c:var(--c-gym);--c2:var(--d-gym)}.sec.h{--c:var(--c-hab);--c2:var(--d-hab)}

/* ---- algemeen ---- */
.opt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.opt:first-of-type{border-top:0}
.opt>div b{display:block;font-size:.95rem}.opt>div small{color:var(--mut);font-size:.8rem}
.sw{position:relative;width:52px;height:32px;flex:none}
.sw input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.sw i{position:absolute;inset:0;border-radius:16px;background:var(--line);transition:background .25s}
.sw i::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.sw input:checked+i{background:var(--btn)}.sw input:checked+i::after{transform:translateX(20px)}
.sw input:focus-visible+i{outline:3px solid var(--accent);outline-offset:2px}

/* ---- keyframes ---- */
@keyframes up{from{opacity:0;transform:translateY(16px)}}
@keyframes fd{from{opacity:0}}
@keyframes fdo{to{opacity:0}}
@keyframes tin{from{opacity:0;transform:translate(-50%,14px)}}
@keyframes tout{to{opacity:0;transform:translate(-50%,14px)}}
@keyframes bob{50%{transform:translateY(-5px)}}
@keyframes sh{to{background-position:-200% 0}}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg);opacity:.6}}
@keyframes pop{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@keyframes outp{to{opacity:0;transform:translateY(-10px) scale(.98)}}
@keyframes outx{to{opacity:0;transform:translateX(34px) scale(.96)}}
@keyframes draw{from{transform:scaleX(0)}}
@keyframes spin{to{transform:rotate(1080deg)}}
@keyframes flick{50%{opacity:.55}}
@keyframes land{0%{transform:scale(.7) rotate(-3deg);opacity:0}55%{transform:scale(1.05) rotate(1deg)}100%{transform:none;opacity:1}}
@keyframes rip{to{transform:scale(1);opacity:0}}
@keyframes fl{0%{opacity:0;transform:translate(-50%,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-70px) scale(1.1)}}
@keyframes beat{50%{transform:scale(1.035)}}
@keyframes okf{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
@keyframes tgin{from{transform:rotate(-120deg) scale(.2);opacity:0}}
@keyframes wig{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes min{from{opacity:0;transform:translateY(20px) scale(.94)}}
@keyframes mout{to{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes sheet{from{transform:translate(-50%,110%)}}
@keyframes sheetout{to{transform:translate(-50%,120%);opacity:0}}
.mdl.sheet .mbox{--x:0}
@keyframes secin{from{opacity:0;transform:perspective(900px) translateY(40px) rotateX(12deg)}}
@keyframes prin{from{opacity:0;transform:translate(-50%,-30px) scale(.7)}}
@keyframes prout{to{opacity:0;transform:translate(-50%,-20px) scale(.9)}}
@keyframes dash{to{stroke-dashoffset:0}}
@keyframes flk{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.08) rotate(3deg)}}
@keyframes boost{0%{transform:scale(.4)}60%{transform:scale(1.6) rotate(-8deg)}100%{transform:scale(1)}}
@keyframes lpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 35%,transparent)}50%{box-shadow:0 0 0 6px transparent}}
.mdl.sheet .mbox{animation-name:shup}
@keyframes shup{from{transform:translateY(100%)}}
@media(min-width:760px){.mdl.sheet .mbox{animation-name:min}}

/* ---- intro / overgangen ---- */
.intro>*{animation:up .55s cubic-bezier(.2,.8,.2,1) both}
.intro>:nth-child(2){animation-delay:.06s}.intro>:nth-child(3){animation-delay:.12s}.intro>:nth-child(4){animation-delay:.18s}.intro>:nth-child(5){animation-delay:.24s}.intro>:nth-child(6){animation-delay:.3s}.intro>:nth-child(n+7){animation-delay:.36s}
main.leave,.w.leave{animation:outp .2s ease both}
.rv{animation:up .35s both}
.brand:hover .logo{animation:wig .5s}

/* ---- view transitions (thema) ---- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}
::view-transition-group(root){animation-duration:.7s}
.tg span{display:inline-flex;transition:transform .6s cubic-bezier(.3,1.4,.5,1)}.tg.spin span{animation:tgs .6s cubic-bezier(.3,1.3,.5,1)}
@keyframes tgs{0%{transform:rotate(-120deg) scale(.4);opacity:0}100%{transform:none;opacity:1}}
.thx{position:fixed;inset:0;z-index:999;pointer-events:none;will-change:clip-path}

/* ---- minder beweging ---- */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.sr{opacity:1;transform:none}}
html.nomo *,html.nomo *::before,html.nomo *::after{animation:none!important;transition:none!important}
html.nomo .sr{opacity:1;transform:none}
html.nomo .lchart .ln{stroke-dashoffset:0}html.nomo .lchart .ar{opacity:1}
@media(prefers-reduced-motion:reduce){.lchart .ln{stroke-dashoffset:0}.lchart .ar{opacity:1}}

/* ---- eigen iconen ---- */
.sico{width:62%;height:62%;display:block;filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--c) 35%,transparent))}
.sec .ic span{display:grid;place-items:center;width:100%;height:100%}
.swm a span .sico{width:26px;height:26px}
.ob .obi .sico{width:56px;height:56px}

/* ---- lijn-iconen ---- */
.i{width:1.2em;height:1.2em;vertical-align:-.24em;flex:none;display:inline-block;overflow:visible}
h2 .i{width:1.35em;height:1.35em;vertical-align:-.35em;margin-right:2px}
.btn .i{width:1.25em;height:1.25em}
.i.gold,.req .i,.pr .i,.trophy .i{color:var(--gold)}
.i.water{color:var(--water)}.i.warn{color:var(--warn)}
.i.mom-o{color:var(--amber)}.i.mom-m{color:var(--sunny)}.i.mom-a{color:var(--indigo)}
.i.cat-O{color:var(--amber)}.i.cat-L{color:var(--leaf)}.i.cat-A{color:var(--water)}.i.cat-S{color:var(--rose)}
.chips button.on .i{color:#fff}
nav.tabs .ti .i{width:23px;height:23px;vertical-align:0}
@media(min-width:760px){nav.tabs .ti .i{width:20px;height:20px}}
.empty span .i{width:2.6rem;height:2.6rem;color:var(--accent)}
.mdl .ico .i{width:2.6rem;height:2.6rem;color:var(--accent)}
.flame .i{width:1.9rem;height:1.9rem;color:var(--fire)}
.flame .i.gold{color:var(--gold)}
.bph span .i{width:3.4rem;height:3.4rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.15))}
.bph .i.cat-O{color:#b45309}.bph .i.cat-L{color:#15803d}.bph .i.cat-A{color:#1d4ed8}.bph .i.cat-S{color:#be123c}
.mc .bph span .i{width:2.4rem;height:2.4rem}.th .bph span .i{width:1.1rem;height:1.1rem}
.tg span .i{width:22px;height:22px;color:var(--gold)}
:root[data-theme=dark] .tg span .i{color:var(--gold)}
.trophy .i{width:1.3em;height:1.3em}
.prban .i{color:#1f1300}
.dice .i{width:1.3em;height:1.3em}
.hb .tm .i,.hb .hn small .i{width:1.1em;height:1.1em}
.hb.late .tm .i{color:#fff}
.party .i{color:#fff}
.dayok .i{color:var(--ok)}

/* ---- illustraties + recept ---- */
.ill,.ill svg{width:100%;height:100%;display:block}
.bimg .ill+.bnm{}
.mtabs{margin:14px 0 6px}.mtabs button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.mpane{animation:fd .25s both}
.rmeta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:.85rem;color:var(--mut);margin:8px 2px 10px}
.rmeta span{display:inline-flex;align-items:center;gap:5px}
.lvl i{width:7px;height:7px;border-radius:50%;background:var(--line);display:inline-block}
.lvl.l1 i:nth-child(-n+1),.lvl.l2 i:nth-child(-n+2),.lvl.l3 i:nth-child(-n+3){background:var(--accent)}
.rprog{margin-left:auto;font-weight:600;color:var(--accent)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{margin:0 0 6px}
.steps button{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;font-size:.92rem;line-height:1.45;cursor:pointer;transition:background .2s,border-color .2s,opacity .2s}
.steps .sn{flex:none;width:26px;height:26px;border-radius:50%;background:var(--soft);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:.8rem;transition:background .2s,color .2s}
.steps .sn .i{width:16px;height:16px}
.steps button.done{background:var(--soft);border-color:transparent}
.steps button.done .stx{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink) 40%,transparent);color:var(--mut)}
.steps button.done .sn{background:var(--btn);color:#fff;animation:pop .35s}
.empty .i{width:2.4rem;height:2.4rem;color:var(--accent)}

/* ---- cardio ---- */
.modeseg{margin:0 0 14px}.modeseg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:560px){.acts{grid-template-columns:repeat(6,1fr)}}
.acts button{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:68px;justify-content:center;border:1px solid var(--line);border-radius:16px;background:var(--inp);color:var(--mut);font:600 .8rem var(--font);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}
.acts button .i{width:26px;height:26px}
.acts button.on{background:var(--soft);border-color:var(--accent);color:var(--accent);animation:pop .35s both}
.acts button:active{transform:scale(.95)}
.tin label{margin-bottom:0}
.cstats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.cstats.four{grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.cstats.four{grid-template-columns:repeat(4,1fr)}}
.cstats>div,.recs>div{background:var(--soft);border-radius:14px;padding:10px 12px}
.cstats small,.recs small{display:block;color:var(--mut);font-size:.74rem}
.cstats b,.recs b{font-size:1.2rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.recs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.recs b{font-size:1rem}
.linkb{background:none;border:0;padding:0;color:var(--accent);font:600 inherit var(--font);font-size:inherit;text-decoration:underline;cursor:pointer;min-height:32px}
.wico .i{width:26px;height:26px;color:var(--wc)}

/* ---- iPhone-fixes: datumvelden, placeholders, statusbalk ---- */
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;width:100%;height:46px;line-height:46px;padding:0 12px;text-align:left}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left;margin:0;min-height:0}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.6}
.g>label,.g>div{min-width:0}
input::placeholder,textarea::placeholder{color:var(--mut);opacity:.45}
body::before{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:60;pointer-events:none;box-shadow:0 6px 14px 4px var(--bg)}

/* ---- actieve workout ---- */
.actw{border-left:5px solid var(--wc);background:color-mix(in srgb,var(--wc) 10%,var(--glass))}
.actw .wico,.wpick .wico{font-size:1.5rem}
.albl{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wc)}
.actw b{font-size:1.15rem}
.wlist{display:grid;gap:8px;margin-top:12px}
.wpick{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--line);border-left:5px solid var(--wc);border-radius:16px;background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform .15s,box-shadow .2s}
.wpick>span:nth-child(2){flex:1;min-width:0}.wpick b{display:block}.wpick small{color:var(--mut);font-size:.78rem}
.wpick>.i{color:var(--wc);width:22px;height:22px}
@media(hover:hover){.wpick:hover{box-shadow:0 8px 20px color-mix(in srgb,var(--wc) 22%,transparent);transform:translateY(-2px)}}
.wpick:active{transform:scale(.98)}
/* ---- swipe ---- */
.swi{transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s;touch-action:pan-y}
.swi[style*="--swp"]{background:color-mix(in srgb,var(--bad) calc(var(--swp)*22%),var(--card))}
.swi.swarm{background:color-mix(in srgb,var(--bad) 30%,var(--card))}
main.slide-l{animation:sll .1s ease-in both}main.slide-r{animation:slr .1s ease-in both}
@keyframes sll{to{opacity:0;transform:translateX(-30px)}}@keyframes slr{to{opacity:0;transform:translateX(30px)}}
/* ---- planning ---- */
.wknav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;grid-column:1/-1}
.wknav>div{text-align:center}.wknav b{display:block}.wknav small{color:var(--mut);font-size:.8rem}
.wknav .btn{font-size:1.4rem}
.pday.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pday .exh small{color:var(--mut)}
.pk{font-size:.8rem;font-weight:700;color:var(--accent);background:var(--soft);padding:4px 10px;border-radius:12px;white-space:nowrap}
.pk.over{color:var(--warn)}
.pslot{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
.psl{display:flex;align-items:center;gap:6px;width:92px;flex:none;font-size:.78rem;font-weight:600;color:var(--mut);padding-top:10px}
.pitems{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.pchip{display:flex;align-items:center;gap:8px;background:var(--soft);border-radius:12px;padding:4px 4px 4px 4px;animation:pop .3s both}
.pchip .th{width:52px}
.pn{flex:1;min-width:0;font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pn small{display:block;font-weight:500;color:var(--mut);font-size:.74rem}
.pchip button{width:36px;height:36px;border:0;border-radius:10px;background:none;color:var(--mut);cursor:pointer;display:grid;place-items:center}
.padd{width:44px;height:36px;border:1.5px dashed var(--line);border-radius:12px;background:none;color:var(--accent);font:700 1.2rem var(--font);cursor:pointer;transition:border-color .2s,background .2s}
@media(hover:hover){.padd:hover{border-color:var(--accent);background:var(--soft)}}
.shop{list-style:none;margin:0 0 10px;padding:0}
.shop li{margin:0 0 6px}
.shop button{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .2s}
.shop .ck{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none;color:transparent;transition:background .2s,border-color .2s}
.shop .ck .i{width:15px;height:15px}
.shop .sn2{flex:1;text-transform:capitalize;font-weight:600}
.shop .sa{color:var(--mut);font-size:.86rem;font-variant-numeric:tabular-nums}
.shop button.done{background:var(--soft);border-color:transparent}
.shop button.done .ck{background:var(--btn);border-color:var(--btn);color:#fff;animation:pop .3s}
.shop button.done .sn2{text-decoration:line-through;color:var(--mut)}

/* ---- toestellen koppelen ---- */
.sycode{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--soft);border-radius:14px;padding:10px 12px;margin:6px 0 10px}
.sycode code{font:700 1.05rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.systat{font-size:.85rem;color:var(--mut);display:flex;align-items:center;gap:6px;margin:0}
.systat.ok .i{color:var(--ok)}.systat.error .i{color:var(--bad)}.systat.busy .i{color:var(--accent)}

/* ---- rondleiding (fullscreen) ---- */
html.touring,html.touring body{overflow:hidden}
.tour{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;justify-content:center;animation:fd .35s both}
.tour.tbye{animation:fdo .3s both}
.tour .bgfx{position:absolute;z-index:0}
.tw{position:relative;z-index:1;width:min(560px,100%);height:100%;display:flex;flex-direction:column;padding:calc(14px + env(safe-area-inset-top,0px)) 20px calc(14px + env(safe-area-inset-bottom,0px))}
.thead{flex:none}
.tbar{height:6px;border-radius:3px;background:var(--soft);overflow:hidden}.tbar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--c-kcal),var(--c-gym),var(--c-hab));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.trow{display:flex;justify-content:space-between;align-items:center;margin:8px 0 0;font-size:.8rem;color:var(--mut)}
.tbody{flex:1;overflow-y:auto;overflow-x:hidden;padding:18px 2px 20px;-webkit-overflow-scrolling:touch}
.tbody.tin-r .tv{animation:tinr .45s cubic-bezier(.2,.8,.2,1) both}.tbody.tin-l .tv{animation:tinl .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes tinr{from{opacity:0;transform:translateX(40px)}}@keyframes tinl{from{opacity:0;transform:translateX(-40px)}}
.tfoot{flex:none;display:flex;gap:10px}.tfoot .btn{flex:1;min-height:52px}.tfoot .btn .i{width:1em;height:1em}
.tv{min-height:100%;display:flex;flex-direction:column;justify-content:center}
.tv>label{margin-top:4px}
.tcenter{text-align:center;align-items:center}
.tt{font-size:clamp(1.6rem,6vw,2.1rem);letter-spacing:-.03em;line-height:1.1;margin:10px 0 10px;color:var(--ink);border:0;padding:0;text-transform:none}
h2.tt{font-size:1.55rem}
.tp{color:var(--mut);font-size:1rem;margin:0 0 16px;max-width:460px}
.tlogo .logo{width:84px;height:84px;border-radius:26px;margin:0 auto 10px;animation:land .7s both;box-shadow:0 20px 50px color-mix(in srgb,var(--c-hab) 35%,transparent)}
.tpills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0 18px}
.tpills span{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:30px;background:color-mix(in srgb,var(--c) 14%,transparent);font-weight:700;animation:up .5s both}
.tpills span:nth-child(2){animation-delay:.1s}.tpills span:nth-child(3){animation-delay:.2s}
.tpills .sico{width:30px;height:30px;filter:none}
.tbig{width:96px;height:96px;border-radius:30px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 16%,transparent);margin:0 0 6px;animation:land .6s both}
.tcenter .tbig{margin:0 auto 6px}
.tbig .sico{width:64%;height:64%}.tbig>.i{width:52%;height:52%;color:var(--c)}
.tlist{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.tlist li{display:flex;gap:12px;align-items:flex-start;background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:12px 14px;animation:up .45s both;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .35s,border-color .3s,background-color .3s;outline:none}
.tlist li:active{transform:scale(.98)}
.tlist li:focus-visible{border-color:var(--c)}
.tlist li.on{transform:scale(1.03);border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--card));box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent),0 12px 30px -10px color-mix(in srgb,var(--c) 55%,transparent);z-index:1;position:relative}
.tlist li.on .i{animation:tpop .5s cubic-bezier(.3,1.5,.5,1)}.tlist li.on span{font-weight:600}
@keyframes tpop{40%{transform:scale(1.35) rotate(-8deg)}100%{transform:none}}
.ttap{display:flex;align-items:center;gap:6px;margin:0 0 8px}.ttap .i{color:var(--c)}
.tcard{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:14px;margin:0 0 12px}.tcard>b{display:flex;align-items:center;gap:8px;margin-bottom:4px}.tcard.on{border-color:var(--ok)}.tcard.on>b .i{color:var(--ok)}
.tlist li:nth-child(2){animation-delay:.07s}.tlist li:nth-child(3){animation-delay:.14s}.tlist li:nth-child(4){animation-delay:.21s}
.tlist .i{width:24px;height:24px;color:var(--c);flex:none;margin-top:1px}
.tres{background:var(--soft);border-radius:18px;padding:14px;margin:14px 0 10px}
.tres .tk small{display:block;color:var(--mut);font-size:.78rem}.tres .tk b{font-size:2rem;letter-spacing:-.03em;color:var(--accent)}
.tm{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}.tm span{background:var(--card);border-radius:12px;padding:8px 6px;text-align:center;font-size:.72rem;color:var(--mut)}.tm b{display:block;font-size:.95rem;color:var(--ink)}
.tmom{display:flex;align-items:center;gap:8px;font-size:.85rem;margin:14px 0 8px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.thabs{display:flex;flex-wrap:wrap;gap:8px}
.thabs button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--line);background:var(--glass);color:var(--ink);font:600 .88rem var(--font);cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.thabs button .i{width:16px;height:16px;color:var(--mut)}
.thabs button.on{background:var(--btn);border-color:var(--btn);color:#fff;animation:pop .3s}.thabs button.on .i{color:#fff}
.thabs button:active{transform:scale(.95)}
.tsum{display:grid;gap:10px;width:100%;margin-top:6px}
.tsum>div{display:grid;grid-template-columns:36px 1fr;column-gap:10px;text-align:left;background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:12px 14px;animation:up .5s both}
.tsum>div:nth-child(2){animation-delay:.1s}.tsum>div:nth-child(3){animation-delay:.2s}
.tsum .i{grid-row:1/3;width:28px;height:28px;color:var(--accent);align-self:center}.tsum small{color:var(--mut);font-size:.8rem}
.greet{font-weight:700;color:var(--accent);margin:0 0 6px;font-size:1.05rem}
/* ---- barcode-scanner ---- */
.scan{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;background:rgba(6,16,20,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fin .2s ease;padding:0 0 env(safe-area-inset-bottom)}
.scan.tbye{opacity:0;transition:opacity .2s}
.scbox{width:100%;max-width:520px;max-height:92vh;overflow:auto;background:var(--card);color:var(--ink);border-radius:24px 24px 0 0;padding:16px 16px 22px;box-shadow:0 -10px 40px rgba(0,0,0,.25);animation:sup .28s cubic-bezier(.2,.8,.2,1)}
@media(min-width:560px){.scan{align-items:center}.scbox{border-radius:24px}}
.schead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.schead b{display:flex;align-items:center;gap:8px;font-size:1.05rem}
.scvid{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:4/3;margin-bottom:10px}
.scvid video{width:100%;height:100%;object-fit:cover;display:block}
.scline{position:absolute;left:12%;right:12%;top:50%;height:2px;background:var(--accent);box-shadow:0 0 12px var(--accent);border-radius:2px;animation:scl 1.8s ease-in-out infinite}
.scvid::after{content:"";position:absolute;inset:22% 10%;border:2px solid rgba(255,255,255,.75);border-radius:14px}
@keyframes scl{0%,100%{transform:translateY(-38px)}50%{transform:translateY(38px)}}
@keyframes sup{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes fin{from{opacity:0}to{opacity:1}}
.scname{margin:4px 0 6px;font-size:1.1rem}.scname small{display:block;font-weight:500;color:var(--mut);font-size:.85rem;margin-top:2px}
.scres{margin:4px 0 12px}
ol.steps{list-style:decimal;margin:6px 0 12px;padding-left:22px;color:var(--mut);font-size:.92rem;line-height:1.5}ol.steps li{margin:3px 0;display:list-item}ol.steps a{color:var(--accent);font-weight:600}
.aires{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0 6px;font-size:.92rem}.aires .i{color:var(--accent)}
.aiitems{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}.aiitems span{background:var(--soft);border-radius:999px;padding:4px 10px;font-size:.82rem}.aiitems small{color:var(--mut)}
.aibusy{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--accent);animation:aip 1.2s ease-in-out infinite}
@keyframes aip{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.scline,.aibusy{animation:none}}
.mr.sug .bar i{background:linear-gradient(90deg,var(--amber),var(--rose))}.mr.sug.over span{color:var(--bad);font-weight:700}.mr.sug.over .bar i{background:var(--bad)}
.chart .col i.over{background:var(--bad)}
.mac .su b{color:var(--rose)}

/* ---- tab-indicator die meeschuift ---- */
nav.tabs{--gap:4px}
nav.tabs a{z-index:1}
nav.tabs .tind{position:absolute;z-index:0;left:0;top:6px;height:54px;width:0;border-radius:14px;background:var(--soft);pointer-events:none;transition:transform .32s cubic-bezier(.3,1.25,.5,1),width .32s}
nav.tabs .tind::after{content:"";position:absolute;left:14px;right:14px;bottom:-3px;height:3px;border-radius:3px;background:var(--accent)}
html.nomo nav.tabs .tind{transition:none}
/* ---- pagina in laten schuiven ---- */
main.in-l{animation:inl .22s cubic-bezier(.2,.8,.2,1) both}main.in-r{animation:inr .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes inl{from{opacity:0;transform:translateX(34px)}}@keyframes inr{from{opacity:0;transform:translateX(-34px)}}
/* ---- cross-page view transitions (Safari 18.2+, Chrome) ---- */
@view-transition{navigation:auto}
.site{view-transition-name:site}nav.tabs{view-transition-name:tabs}#app main{view-transition-name:page}
html.vt-flat .site,html.vt-flat nav.tabs,html.vt-flat #app main{view-transition-name:none}
::view-transition-old(page){animation:vtol .16s ease-in both}::view-transition-new(page){animation:vtil .24s cubic-bezier(.2,.8,.2,1) both}
html[data-dir=r]::view-transition-old(page){animation-name:vtor}html[data-dir=r]::view-transition-new(page){animation-name:vtir}
::view-transition-old(tabs),::view-transition-new(tabs),::view-transition-old(site),::view-transition-new(site){animation:none}
@keyframes vtol{to{opacity:0;transform:translateX(-40px)}}@keyframes vtil{from{opacity:0;transform:translateX(40px)}}
@keyframes vtor{to{opacity:0;transform:translateX(40px)}}@keyframes vtir{from{opacity:0;transform:translateX(-40px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.icn button{display:grid;place-items:center;color:var(--mut)}.icn button .i{width:24px;height:24px}.icn button.on{color:var(--accent)}
.wch .i{width:16px;height:16px;margin-right:2px;vertical-align:-3px;color:var(--wc)}.wch.on .i{color:inherit}
/* ---- 3D-spierkaart ---- */
.b3d{position:relative;margin:6px 0 10px;padding-bottom:0;border-radius:14px;background:radial-gradient(ellipse at 50% 40%,var(--soft),transparent 70%);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
.b3d .b3dc{display:block;width:100%;height:100%;cursor:grab;outline:none}.b3d .b3dc:active{cursor:grabbing}
.b3d .b3dreset{position:absolute;top:8px;right:8px;z-index:2;width:38px;height:38px}
.b3dhint{position:absolute;left:0;right:0;bottom:4px;margin:0;opacity:.85;text-align:center;font-size:.74rem;color:var(--mut);pointer-events:none;display:flex;justify-content:center;gap:5px;align-items:center}
.b3d.b3dload::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
.b3d.b3dfail::after{content:"3D niet beschikbaar op dit toestel";position:absolute;inset:0;display:grid;place-items:center;color:var(--mut);font-size:.85rem}
@keyframes spin{to{transform:rotate(360deg)}}
.b3dleg{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--mut);margin:0 0 6px}.b3dleg i{flex:1;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--fill,var(--soft)),var(--hi,var(--accent)))}
.b3dinfo{position:relative;background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--hi,var(--accent));border-radius:12px;padding:12px 14px;margin-top:8px;animation:up .3s both}
.b3dinfo>b{display:block;font-size:1.1rem}.b3dinfo>small{color:var(--mut)}
.b3dinfo .b3dx{position:absolute;top:6px;right:6px;width:34px;height:34px}
.b3dex{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.b3dex span{display:inline-flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:.84rem}.b3dex .i{width:15px;height:15px;color:var(--accent)}
html.vt-flat::view-transition-old(root),html.vt-flat::view-transition-new(root){animation-duration:.12s}
.swm a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.swm a:focus:not(:focus-visible){outline:none}
/* ---- 3D-lichaam als achtergrond (Lichaam-tab) ---- */
.b3dfull{grid-column:1/-1;margin:-12px -16px 14px;position:relative}
.b3d.b3dbig{margin:0;border-radius:0;background:none}
.b3dtop{position:absolute;left:16px;top:8px;right:60px;z-index:2;pointer-events:none}.b3dtop h1{margin:6px 0 6px}
.b3dtop .b3dleg{max-width:220px}
.b3dbig .b3dreset{top:14px;right:16px}
.b3dbig .b3dhint{bottom:14px}
.b3dbig .b3dinfo{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;margin:0;max-height:44%;overflow:auto;background:color-mix(in srgb,var(--card) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.b3dbig .b3dex{margin:8px 0 8px}
.b3d.b3dfail[data-err]::after{content:"3D kon niet laden: " attr(data-err)}
.b3d.b3dfail[data-err=WEBGL]::after{content:"3D is even geblokkeerd door iOS. Sluit Trackify volledig af (omhoog vegen in de app-switcher) en open opnieuw.";padding:0 24px;text-align:center;line-height:1.5}
.b3d.b3dfail::after{padding:0 20px;text-align:center;word-break:break-word}
.b3dsubs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}.b3dsubs button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 11px;font:600 .8rem var(--font);cursor:pointer}.b3dsubs button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.li.plan{opacity:.72}.li.plan .th{filter:saturate(.6)}
.li .th img{width:100%;height:100%;object-fit:cover;display:block}
.logc .th{width:48px;aspect-ratio:1;border-radius:10px}.logc .th .bph{width:100%;height:100%;display:grid;place-items:center}.logc .th .bph .i{width:22px;height:22px;color:var(--accent)}.logc .th .ill svg{width:100%;height:100%;object-fit:cover}
.ping{border-top:1px solid var(--line);margin-top:10px;padding-top:4px}.pingr{display:grid;grid-template-columns:1fr 58px auto 64px auto 36px;gap:6px;align-items:center;margin-bottom:6px}.pingr input{padding:0 8px;min-height:40px}.pingr span{font-size:.75rem;color:var(--mut)}
.g.g5 input{padding:0 5px;text-align:center}