/* verborgen onderdelen blijven verborgen, ook als een klasse display zet (vensters, tabbladen, stappen) */
[hidden]:not([hidden=until-found i]){display:none!important}
/* Layout: one-screen phone app; sticky header, scrolling content, bottom tab bar. Warmth comes from one amber "glow" reserved for rewards. */
:root{
  --bg:#f4f6f5; --fg:#1c2429; --muted:#5f6b70; --surface:#ffffff; --line:#d8dedc;
  --accent:#2a9d64; --accent-ink:#ffffff; --glow:#f2c230; --glow-soft:#fff6d1; --danger:#e03b2f;
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141a1f; --fg:#e8ecec; --muted:#9aa6ad; --surface:#1d252b; --line:#2e3840;
  --accent:#5fcf96; --accent-ink:#0f1a14; --glow:#f5cf4a; --glow-soft:#3a3214; --danger:#ff6b5e; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#141a1f; --fg:#e8ecec; --muted:#9aa6ad; --surface:#1d252b; --line:#2e3840;
  --accent:#5fcf96; --accent-ink:#0f1a14; --glow:#f5cf4a; --glow-soft:#3a3214; --danger:#ff6b5e; color-scheme:dark }
/* signaalkleuren: pijlen, bolletjes, tussenstanden, gevoelens en de stem. Vijf stappen omhoog en vijf omlaag; kiesbaar in het profiel */
:root{--sig-red:#e03b2f;--sig-orange:#f07a2a;--sig-yellow:#f2c230;--sig-lime:#9ccf4a;--sig-green:#2fa36b;--sig-up1:#c5df62;--sig-up3:#5fbf6a;--sig-up5:#1f8f57;--sig-down1:#f0a04a;--sig-down3:#e8602c;--sig-down5:#b8231c}
:root[data-signaal="palet"]{--sig-red:color-mix(in srgb, var(--muted) 62%, var(--surface));--sig-orange:color-mix(in srgb, var(--glow) 55%, var(--muted));--sig-yellow:var(--glow);--sig-lime:color-mix(in srgb, var(--accent) 55%, var(--surface));--sig-green:var(--accent);--sig-up1:color-mix(in srgb, var(--accent) 40%, var(--surface));--sig-up3:color-mix(in srgb, var(--accent) 75%, var(--surface));--sig-up5:color-mix(in srgb, var(--accent) 78%, var(--fg));--sig-down1:color-mix(in srgb, var(--glow) 50%, var(--surface));--sig-down3:color-mix(in srgb, var(--glow) 65%, var(--muted));--sig-down5:var(--muted);}
:root[data-signaal="zacht"]{--sig-red:#d98c84;--sig-orange:#e8a87c;--sig-yellow:#e9d48a;--sig-lime:#bcd39a;--sig-green:#7fb58a;--sig-up1:#d3dfb0;--sig-up3:#9cc492;--sig-up5:#6aa37a;--sig-down1:#efc49a;--sig-down3:#e09a7e;--sig-down5:#c97a74}
:root[data-signaal="aards"]{--sig-red:#a9553f;--sig-orange:#c27a3c;--sig-yellow:#c9a84a;--sig-lime:#8f9f4f;--sig-green:#5f7f53;--sig-up1:#b9b97a;--sig-up3:#788f51;--sig-up5:#4e6b46;--sig-down1:#d2a56e;--sig-down3:#b4683f;--sig-down5:#8f4636}
:root[data-signaal="blauworanje"]{--sig-red:#d55e00;--sig-orange:#e69f00;--sig-yellow:#f0e442;--sig-lime:#56b4e9;--sig-green:#0072b2;--sig-up1:#9fd1f0;--sig-up3:#2f93d2;--sig-up5:#005a8e;--sig-down1:#f3c78a;--sig-down3:#de7f00;--sig-down5:#b24d00}
/* kleurpaletten: de hoofdkleur en de beloningskleur */
:root[data-palet="zee"]{--accent:#1f7f8f;--glow:#e6b85c;--glow-soft:#f8f0dc}
:root[data-palet="blauw"]{--accent:#2f6db5;--glow:#e9b84f;--glow-soft:#fbf2d9}
:root[data-palet="lavendel"],:root[data-palet="paars"]{--accent:#6b5fbf;--glow:#e7b65a;--glow-soft:#faf1dc}
:root[data-palet="mokka"]{--accent:#7a5a44;--glow:#e2b25a;--glow-soft:#f8efdc}
:root[data-palet="rustig"]{--accent:#4e6b5c;--glow:#d9b25c;--glow-soft:#f5efdf}
:root[data-palet="terracotta"]{--accent:#b65c3a;--glow:#e9b949;--glow-soft:#fdf1d2}
:root[data-theme="dark"][data-palet="zee"]{--accent:#5fbfcf;--glow:#f0c86a;--glow-soft:#3a3214}
:root[data-theme="dark"][data-palet="blauw"]{--accent:#74a9ea;--glow:#f2c45c;--glow-soft:#3a3214}
:root[data-theme="dark"][data-palet="lavendel"],:root[data-theme="dark"][data-palet="paars"]{--accent:#a79ee8;--glow:#f0c66a;--glow-soft:#3a3214}
:root[data-theme="dark"][data-palet="mokka"]{--accent:#c9a58c;--glow:#eec46c;--glow-soft:#3a3214}
:root[data-theme="dark"][data-palet="rustig"]{--accent:#8fb3a2;--glow:#e0c178;--glow-soft:#3a3214}
:root[data-theme="dark"][data-palet="terracotta"]{--accent:#e3885e;--glow:#f0c65c;--glow-soft:#3a3214}
.paletten{display:flex;flex-wrap:wrap;gap:8px}
.palet{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13px}
.palet.on{border-color:var(--fg);font-weight:700}
.palet i{display:inline-block;width:14px;height:14px;border-radius:50%}
.kleur{display:flex;align-items:center;gap:8px;font-size:13px}
.kleur input[type=color]{width:38px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:transparent}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.5}
*{box-sizing:border-box}
.app{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
header{position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);padding:14px 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:2;border-bottom:0}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--sig-red),var(--sig-orange),var(--sig-yellow),var(--sig-lime),var(--sig-green))}
.voice .scale span:nth-child(2){font-family:var(--display);font-weight:700;font-size:16px}
header h1{font-family:var(--display);font-size:22px;margin:0;font-weight:700;letter-spacing:-.01em}
.sparks{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.sparks b{color:var(--glow);font-size:18px}
main{flex:1;padding:16px 16px 96px;display:flex;flex-direction:column;gap:18px}
h2{font-family:var(--display);font-size:24px;line-height:1.15;margin:0;text-wrap:balance;font-weight:700}
h3{font-family:var(--display);font-size:18px;margin:0;font-weight:700;text-wrap:balance}
p{margin:0;max-width:62ch}
.muted{color:var(--muted);font-size:14px}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--muted);font-weight:700}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
button{font:inherit;cursor:pointer;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:10px 14px}
button:focus-visible,input:focus-visible,textarea:focus-visible,[role=tab]:focus-visible{outline:3px solid var(--glow);outline-offset:2px}
.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.primary:disabled{opacity:.5;cursor:default}
.ghost{background:transparent}
.warn{border-color:var(--danger);color:var(--danger);font-weight:700}
input,textarea{font:inherit;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg)}
textarea{min-height:90px;resize:vertical}
label{font-size:14px;font-weight:700}
.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.moment{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;text-align:left;border-radius:12px}
.moment small{color:var(--muted);font-size:12px}
.moment.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.moment.on small{color:inherit;opacity:.85}
.voice{display:flex;flex-direction:column;gap:6px}
.voice input[type=range]{width:100%;accent-color:var(--accent);padding:0;background:none;border:0}
.voice .scale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.lights{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.light{aspect-ratio:1;border-radius:50%;background:var(--line);max-width:100%}
.light.on{background:var(--glow);box-shadow:0 0 10px var(--glow)}
nav{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));z-index:3}
nav .inner{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
nav button{border:0;background:transparent;border-radius:10px;padding:8px 2px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px}
nav button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav button[aria-selected=true]{color:var(--accent);font-weight:700;background:var(--bg)}
.module{cursor:pointer}
.module summary{list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center;font-family:var(--display);font-weight:700;font-size:17px}
.module summary::-webkit-details-marker{display:none}
.module .body{display:flex;flex-direction:column;gap:10px;padding-top:12px;cursor:auto}
.done-tag{font-size:12px;color:var(--accent);font-weight:700;white-space:nowrap}
.fact{border-left:3px solid var(--accent);padding-left:12px;color:var(--muted);font-size:14px}
.cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.cmp>span{display:flex;flex-direction:column;gap:2px;background:var(--bg);border-radius:10px;padding:10px 12px;min-width:0}
.cmp b{font-family:var(--display);font-size:17px;color:var(--accent)}
.cmp small{color:var(--muted);font-size:12px}
.quiz{background:var(--bg);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}
.quiz button{text-align:left}
.quiz button.right{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.quiz button.wrong{border-color:var(--danger)}
.num{font-family:var(--display);font-size:28px;font-weight:700;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.numgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.numgrid div{display:flex;flex-direction:column;gap:4px}
.numgrid small{color:var(--muted);font-size:13px}
.chart svg{width:100%;height:auto;display:block}
.chart text{font-family:var(--body);font-size:11px;fill:var(--muted)}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .line{stroke:var(--accent);stroke-width:2.5;fill:none}
.chart .area{fill:var(--accent);opacity:.12}
.chart .dot{fill:var(--accent)}
.chart .end{fill:var(--glow);stroke:var(--surface);stroke-width:2}
.buddy{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.buddy:first-of-type{border-top:0}
.buddy b{display:block}
.buddy .row{gap:6px;justify-content:flex-end}
.buddy .row button{font-size:13px;padding:6px 10px}
.msg{background:var(--bg);border-radius:10px;padding:12px;font-style:italic}
.help{display:grid;gap:8px}
.help div{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:8px}
.help div:first-child{border-top:0;padding-top:0}
.help code{font-family:var(--body);font-weight:700;font-size:15px}
.help a{color:var(--accent);font-weight:700}
.overlay{position:fixed;inset:0;background:rgba(10,20,18,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}
.reward{background:var(--surface);border-radius:20px;padding:26px 22px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:14px;text-align:center;position:relative;overflow:hidden}
.reward::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 50% 30%,var(--glow-soft),transparent 55%);animation:breathe 4s ease-in-out infinite;pointer-events:none}
.reward>*{position:relative}
.reward p{max-width:none}
.reward .sun{width:72px;height:72px;border-radius:50%;background:var(--glow);box-shadow:0 0 30px var(--glow);margin:0 auto;animation:grow .9s ease-out}
.reward h2{font-size:26px}
.reward .why{font-style:italic;color:var(--muted)}
@keyframes breathe{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes grow{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.reward::before,.reward .sun{animation:none}}
.milestone{display:flex;gap:12px;align-items:flex-start}
.milestone .n{min-width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;background:var(--line);color:var(--muted);font-variant-numeric:tabular-nums}
.milestone.open .n{background:var(--glow);color:#1d2726}
.milestone.open .note{color:var(--fg)}
.milestone .note{color:var(--muted);font-size:14px}
.notice{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:999px;font-size:14px;z-index:20} /* boven de vensters, anders zie je "Je hebt de nieuwste versie" niet vanuit het profiel */
@media (max-width:380px){.moments{grid-template-columns:repeat(2,1fr)}}
/* doelen en reis */
.goals{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.goal{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;padding:12px;border-radius:14px;min-width:0}
.goal svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.goal b{font-family:var(--display);font-size:15px;line-height:1.2}
.goal small{color:var(--muted);font-size:12px}
.goal.on{background:var(--glow-soft);border-color:var(--glow);color:var(--fg)}
.goal.on svg{stroke:var(--glow)}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{background:var(--glow-soft);color:var(--fg);border:1px solid var(--glow);border-radius:999px;padding:4px 10px;font-size:13px}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font-weight:700;font-size:13px;text-decoration:underline}
.onb{background:var(--surface);border-radius:20px;padding:24px 20px;max-width:440px;width:100%;display:flex;flex-direction:column;gap:14px;max-height:90vh;overflow:auto}
.onb h2{font-size:26px}
.onb .step{display:flex;gap:4px}
.keus{display:block;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--fg)}
.keus b{display:block;font-family:var(--display);font-size:17px}
.keus span{display:block;color:var(--muted);font-size:13px;margin-top:3px;font-weight:400}
.keus:hover{border-color:var(--accent)}
.onb .step i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.onb .step i.on{background:var(--glow)}
.journey svg{width:100%;height:auto;display:block}
.journey text{font-family:var(--body);font-size:12px;fill:var(--fg)}
.journey text.day{font-family:var(--display);font-weight:700;font-size:13px}
.journey text.dim{fill:var(--muted)}
.journey .seg{stroke:var(--line);stroke-width:6;fill:none;stroke-linecap:round}
.journey .seg.on{stroke:var(--accent)}
.journey .stop{fill:var(--surface);stroke:var(--line);stroke-width:3}
.journey .stop.on{fill:var(--accent);stroke:var(--accent)}
.journey .me{fill:var(--glow);stroke:var(--surface);stroke-width:3}
.journey .star{fill:var(--glow)}
.weetje{display:flex;gap:12px;align-items:flex-start;background:var(--glow-soft);border-radius:14px;padding:12px 14px}
.weetje svg{width:22px;height:22px;flex:none;stroke:var(--glow);fill:none;stroke-width:1.8;stroke-linecap:round}
.weetje p{font-size:14px;max-width:none}
.goalcard{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.goalcard:first-child{border-top:0;padding-top:0}
.goalcard svg{width:26px;height:26px;flex:none;stroke:var(--glow);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.goalcard b{font-family:var(--display)}
.goalcard .when{font-size:12px;color:var(--muted)}
/* vergelijker, mythen, menu's */
.cmpsel{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cmpsel div{display:flex;flex-direction:column;gap:4px;min-width:0}
select{font:inherit;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg)}
.bars{display:flex;flex-direction:column;gap:10px}
.bar{display:flex;flex-direction:column;gap:4px}
.bar .lbl{display:flex;justify-content:space-between;font-size:13px;gap:8px}
.bar .lbl b{font-family:var(--display)}
.bar .track{height:18px;background:var(--bg);border-radius:9px;overflow:hidden}
.bar .fill{height:100%;border-radius:9px;background:var(--line);transition:width .5s ease}
.bar.fuel .fill{background:var(--glow)}
.verdict{font-family:var(--display);font-size:18px;font-weight:700;text-wrap:balance}
.myth summary{list-style:none;display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-weight:700}
.myth summary::-webkit-details-marker{display:none}
.myth summary::before{content:"“";font-family:var(--display);font-size:26px;line-height:.8;color:var(--line)}
.myth .sci{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--glow-soft);font-size:14px;display:flex;gap:8px}
.myth .sci::before{content:"";flex:none;width:3px;border-radius:2px;background:var(--glow)}
.menu h3{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.menu h3 small{font-family:var(--body);font-weight:400;font-size:12px;color:var(--muted);white-space:nowrap}
.menu table{width:100%;border-collapse:collapse;font-size:14px}
.menu td{padding:6px 0;border-top:1px solid var(--line);vertical-align:top}
.menu td:first-child{color:var(--muted);width:34%;padding-right:8px}
.menu tr:first-child td{border-top:0}
@media (max-width:380px){.cmpsel{grid-template-columns:1fr}}
/* sub-tabs en menubouwer */
.seg{display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.seg button{border:0;background:transparent;padding:8px 2px;font-size:12px;color:var(--muted);border-radius:9px}
.customform{background:var(--surface);border-radius:10px;padding:10px}
.ingadd{display:grid;grid-template-columns:1fr 70px 90px 44px;gap:6px;align-items:center}
.ingadd input,.ingadd select{padding:8px 10px}
.ingadd button{padding:8px 0;font-weight:700}
.ing{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:14px}
.ing:first-child{border-top:0}
.ing small{color:var(--muted);font-size:12px;display:block}
.ing button{border:0;background:transparent;color:var(--muted);font-size:18px;padding:0 6px}
.macros{display:flex;flex-direction:column;gap:8px}
.macro{display:grid;grid-template-columns:80px 1fr 44px;gap:8px;align-items:center;font-size:13px}
.macro .mtrack{position:relative;height:14px;background:var(--bg);border-radius:7px;overflow:hidden}
.macro .band{position:absolute;top:0;bottom:0;background:var(--glow-soft)}
.macro .mfill{position:absolute;top:3px;bottom:3px;left:0;border-radius:4px;background:var(--accent)}
.macro .mval{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.fb{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--bg);font-size:14px}
.fb::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--line)}
.fb.bad::before{background:var(--danger)}
.fb.tip::before{background:var(--glow)}
.fb.good::before{background:var(--accent)}
.fb b{display:block}
.fb .linkbtn{margin-top:4px}
.expl{background:var(--bg);border-radius:12px;padding:12px 14px}
.expl summary{list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center;cursor:pointer;font-family:var(--display);font-weight:700;font-size:16px}
.expl summary::-webkit-details-marker{display:none}
.expl summary::after{content:"+";font-size:20px;color:var(--muted)}
.expl[open] summary::after{content:"–"}
.expl .ebody{display:flex;flex-direction:column;gap:10px;padding-top:10px;font-size:14px}
.expl .ebody h4{margin:0;font-family:var(--display);font-size:14px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.expl ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.expl .fact{font-size:13px}
/* zin in, vergelijking, test */
.wish{display:flex;flex-direction:column;gap:10px}
.wish table{width:100%;border-collapse:collapse;font-size:14px}
.wish td{padding:6px 0;border-top:1px solid var(--line);vertical-align:top}
.wish td:first-child{width:46%;padding-right:8px}
.wish td:first-child small{display:block;color:var(--muted);font-size:12px}
.wish td:last-child{color:var(--muted);font-size:13px}
.wish tr:first-child td{border-top:0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cols>div{display:flex;flex-direction:column;gap:6px;min-width:0;background:var(--bg);border-radius:10px;padding:10px}
.cols h4{margin:0;font-family:var(--display);font-size:14px}
.cols .big{font-family:var(--display);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.cols ul{margin:0;padding-left:16px;font-size:13px;color:var(--muted)}
.cols .yours h4{color:var(--fg)}.cols .bal h4{color:var(--accent)}
.diff{display:flex;flex-direction:column;gap:6px}
.testgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.testgrid button{text-align:left;padding:10px 12px;border-radius:12px;font-size:14px}
.testgrid button.on{background:var(--glow-soft);border-color:var(--glow)}
.vd{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:2px 9px;margin-bottom:4px}
.vd.goed{background:var(--accent);color:var(--accent-ink)}
.vd.erbij{background:var(--line);color:var(--fg)}
.vd.combi{background:var(--glow);color:#1d2726}
.vd.wissel{background:var(--danger);color:#fff}
.tcard b{font-family:var(--display)}
.tcard .combo{background:var(--bg);border-radius:10px;padding:8px 10px;font-size:14px}
.tcard .combo span{color:var(--muted);font-size:12px;display:block}
@media (max-width:380px){.cols{grid-template-columns:1fr}.testgrid{grid-template-columns:1fr}}
/* wizard behoefte */
.opts{display:flex;gap:6px;flex-wrap:wrap}
.opts.col{flex-direction:column}
.opts button{text-align:left;display:flex;flex-direction:column;gap:2px;border-radius:12px}
.opts button small{color:var(--muted);font-size:12px}
.opts button.on{background:var(--glow-soft);border-color:var(--glow)}
.opts button.on small{color:var(--fg);opacity:.8}
.chk{display:flex;align-items:center;gap:6px;font-weight:400;font-size:14px}
.chk input{width:auto}
.sportrow{display:grid;grid-template-columns:1fr 80px 40px;gap:8px;align-items:center;font-size:14px}
.sportrow small{display:block;color:var(--muted);font-size:12px}
.sportrow input{padding:8px 10px;text-align:right}
.sportrow span:last-child{color:var(--muted);font-size:12px}
.stack5{display:flex;height:22px;border-radius:11px;overflow:hidden}
.stack5 i{display:block;height:100%}
.stack5 .s0{background:var(--line)}.stack5 .s1{background:var(--muted)}.stack5 .s2{background:var(--accent)}.stack5 .s3{background:var(--sig-orange)}.stack5 .s4{background:var(--glow)}
.legend{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:14px;font-variant-numeric:tabular-nums}
.legend div{display:flex;align-items:center;gap:8px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}
.legend .tot{font-family:var(--display);font-weight:700;border-top:1px solid var(--line);padding-top:6px;margin-top:2px}
.legend .tot+ .tot{text-align:right}
.legend b.r{text-align:right}
.need .big{font-family:var(--display);font-size:40px;font-weight:700;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.hardtip{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.hardtip:first-child{border-top:0}
.hardtip b{display:block;font-family:var(--display)}
.hardtip svg{width:22px;height:22px;flex:none;stroke:var(--glow);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* uitstraling: lichaam, pijlers, tekeningen */
.tagline{font-size:11px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:700;margin-top:-2px}
.brand{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:0;text-align:left;color:inherit;cursor:pointer;border-radius:12px}
.brand:focus-visible{outline:3px solid var(--glow);outline-offset:4px}
.brand svg{width:34px;height:34px;flex:none}
.brand h1{letter-spacing:-.03em}
.hero{flex-direction:row;gap:14px;align-items:stretch;background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--glow) 16%,var(--surface)));border-color:var(--glow)}
.herofig{flex:0 0 112px;display:flex;align-items:center}
.herofig svg{width:100%;height:auto;display:block}
.herotxt{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.herotxt h3{font-size:17px}
.lit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:13px}
.lit li{display:flex;align-items:center;gap:8px}
.lit li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);flex:none}
.lit li.off{color:var(--muted)}
.lit li.off::before{background:transparent;border:2px solid var(--line);box-shadow:none;width:8px;height:8px}
.wiseg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px}
.wiseg button{border:0;background:transparent;border-radius:9px;padding:8px 4px;font-size:13px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:1px}
.wiseg button small{font-size:10px;opacity:.8}
.wiseg button.on{color:#fff;font-weight:700}
.wiseg button.on[data-wi="tekort"]{background:var(--sig-red)}
.wiseg button.on[data-wi="net"]{background:var(--sig-yellow);color:#1c2429}
.wiseg button.on[data-wi="bouw"]{background:var(--sig-green)}
.wislider{display:flex;flex-direction:column;gap:6px}
.wislider input{width:100%;padding:0;border:0;background:none}
.wislider .scale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.wislider .scale span:nth-child(2){font-family:var(--display);font-weight:700;font-size:16px;color:var(--fg)}
.wichips button{font-size:12px;padding:4px 10px;border-radius:999px}
.wichips button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.wi{display:grid;grid-template-columns:92px 64px 1fr;gap:12px;align-items:center}
.wifig svg,.wimark svg{width:100%;height:auto;display:block}
.witxt{display:flex;flex-direction:column;gap:4px;min-width:0}
.witxt b{font-family:var(--display);font-size:17px;line-height:1.15}
.wilist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.wilist li{display:flex;gap:8px;align-items:flex-start}
.wilist li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;margin-top:7px;background:var(--wic,var(--line))}
.wilist b{font-family:var(--display)}
.wilist li.off{color:var(--muted)}
.wilist li.off::before{background:transparent;border:2px solid var(--line);width:7px;height:7px}
.wilist li.legend{font-size:12px;color:var(--muted);padding-top:4px}
.wilist li.legend::before{display:none}
@media (max-width:380px){.wi{grid-template-columns:76px 52px 1fr}}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pillars>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 6px;min-width:0}
.pillars svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pillars b{font-family:var(--display);font-size:14px}
.pillars span{font-size:11px;color:var(--muted);line-height:1.3}
.onb-p>div{background:var(--bg);border:0}
.onbfig{display:flex;justify-content:center}
.onbfig svg{width:110px;height:auto}
.diag{background:var(--bg);border-radius:12px;padding:10px;margin-top:4px}
.diag svg{width:100%;height:auto;display:block}
.diag text{font-family:var(--body);font-size:11px;fill:var(--fg)}
.diag text.dim{fill:var(--muted);font-size:10px}
.diag text.b{font-family:var(--display);font-weight:700;font-size:12px}
.diag .cap{font-size:12px;color:var(--muted);margin:6px 0 0}
@media (max-width:380px){.pillars{grid-template-columns:repeat(2,1fr)}.herofig{flex-basis:90px}}
@media (max-width:380px){.ingadd{grid-template-columns:1fr 60px 80px 40px}.macro{grid-template-columns:70px 1fr 40px}}
.seg button[aria-selected=true]{background:var(--accent);color:var(--accent-ink);font-weight:700}
.gauge{display:flex;flex-direction:column;gap:6px}
.gtrack{position:relative;display:flex;height:14px}
.gtrack i{display:block;height:100%}
.gtrack .z1{flex:17;background:var(--sig-red);border-radius:7px 0 0 7px}
.gtrack .z2{flex:8;background:var(--sig-yellow)}
.gtrack .z3{flex:10;background:var(--sig-green)}
.gtrack .z4{flex:5;background:var(--sig-lime);border-radius:0 7px 7px 0}
.gtrack b{position:absolute;top:-4px;left:0;width:22px;height:22px;border-radius:50%;background:var(--fg);border:3px solid var(--surface);transform:translateX(-50%);transition:left .4s ease}
.glbl{display:flex;font-size:11px;color:var(--muted)}
.glbl span:nth-child(1){flex:17}.glbl span:nth-child(2){flex:8}.glbl span:nth-child(3){flex:10}.glbl span:nth-child(4){flex:5;text-align:right}
.mmoment{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.mmoment:first-child{border-top:0;padding-top:0}
.mmoment .hd{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mmoment .hd b{font-family:var(--display)}
.mmoment .hd small{color:var(--muted);font-variant-numeric:tabular-nums}
.mchips{display:flex;flex-wrap:wrap;gap:6px}
.mchip{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 10px;font-size:13px}
.mchip button{border:0;background:transparent;padding:0 4px;font-size:16px;line-height:1;color:var(--muted)}
.addbtn{align-self:flex-start;font-size:13px;padding:6px 10px}
.picker{background:var(--bg);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.plist{display:flex;flex-direction:column;max-height:260px;overflow:auto;border-top:1px solid var(--line)}
.pitem{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.pitem small{display:block;color:var(--muted);font-size:12px}
.pitem button{padding:4px 12px;font-size:14px;flex:none}
.chip.cat{cursor:pointer;background:var(--surface);border-color:var(--line);color:var(--muted)}
.chip.cat.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.dmicon{position:relative;overflow:hidden}
.dmicon img{width:100%;height:100%;object-fit:cover;display:block}
.fotobtn{position:absolute;right:2px;bottom:2px;border:0;background:rgba(10,20,18,.55);color:#fff;border-radius:7px;font-size:10px;padding:2px 6px;cursor:pointer}
.mrow img.th{width:44px;height:44px;object-fit:cover;border-radius:8px;flex:none}
.mrow .lft{display:flex;align-items:center;gap:10px;min-width:0}
.planfoto{width:100%;max-height:170px;object-fit:cover;border-radius:10px;display:block}
.dag{display:flex;flex-direction:column}
.dm2{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.dm2:first-child{border-top:0;padding-top:0}
.dmicon{width:56px;height:56px;border-radius:12px;background:var(--glow-soft);display:grid;place-items:center}
.dmicon svg{width:30px;height:30px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dm2 b{font-family:var(--display);font-size:16px;display:block}
.dm2 b small{font-family:var(--body);font-weight:400;color:var(--muted);font-size:12px;margin-left:6px}
.dm2 .ex{color:var(--accent);font-weight:700}
.dm2 small.k{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.momrow{display:grid;grid-template-columns:1fr 96px 92px 28px;gap:6px;align-items:center}
.momrow input,.momrow select{padding:8px 10px}
.momrow button{padding:0 4px;color:var(--muted);border:0;background:transparent;font-size:18px}
@media (max-width:380px){.momrow{grid-template-columns:1fr 88px 80px 24px}}
.fill{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.chip.trede{background:var(--surface);border-style:dashed}
.chip small{font-size:10px;color:var(--muted);margin-left:3px}
.pitem.own{background:var(--glow-soft);margin:0 -4px;padding-left:4px;padding-right:4px;border-radius:8px}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.mrow:first-child{border-top:0;padding-top:0}
.mrow b{font-family:var(--display)}
.mrow small{display:block;color:var(--muted);font-size:12px}
.mrow .row{flex:none}
.mrow .row button{font-size:13px;padding:6px 10px}
.tag{font-size:11px;background:var(--glow-soft);border:1px solid var(--glow);border-radius:999px;padding:1px 8px;margin-left:6px;font-family:var(--body);font-weight:400}
.plan{background:var(--glow-soft);border-radius:12px;padding:10px 12px;font-size:13px;display:flex;flex-direction:column;gap:4px}
.plan b{font-family:var(--display)}
.plan span{color:var(--muted)}
.menu .row button{font-size:13px;padding:6px 10px}
/* opgeruimd: begroeting, banners, buddy-code */
.banner{border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;background:var(--glow-soft);border:1px solid var(--glow);font-size:14px}
.banner b{font-family:var(--display)}
.banner small{color:var(--muted);font-size:12px}
.banner.zwaar{background:var(--surface);border-color:var(--danger)}
.banner.zwaar b{color:var(--danger)}
.codebox{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:12px;padding:10px 12px}
.codebox b{font-family:var(--display);font-size:22px;letter-spacing:.12em;flex:1}
.codebox button{font-size:13px;padding:6px 10px}
#lichtPresets .chip{cursor:pointer;text-align:left}
.moment small{font-variant-numeric:tabular-nums}
.organs{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.organ{display:grid;grid-template-columns:1fr;gap:2px;background:var(--bg);border-radius:10px;padding:8px 10px;font-size:14px}
.organ b{font-family:var(--display)}
.organ small{color:var(--accent);font-weight:700;font-size:12px}
/* eetmomenten met inhoud */
.moment.sel{outline:3px solid var(--glow);outline-offset:1px}
.mpanel{background:var(--bg);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.mpanel b{font-family:var(--display)}
.mpanel .chip{cursor:pointer;font-size:13px}
.dm{display:flex;gap:12px;align-items:center}
.dmmark{flex:0 0 52px}
.dmmark svg{width:52px;height:52px;display:block}
.dm b{font-family:var(--display);display:block}
.dm span{font-size:13px;display:block}
/* vandaag als overzicht */
.dm.big{padding-bottom:12px;border-bottom:1px solid var(--line)}
.dm.big .dmmark{flex:0 0 72px}
.dm.big .dmmark svg{width:72px;height:72px}
.dm.big b{font-size:20px;line-height:1.1}
.mlist{display:flex;flex-direction:column}
.mrow2{display:grid;grid-template-columns:52px 1fr 28px;gap:10px;align-items:center;text-align:left;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:10px 4px}
.mrow2:first-child{border-top:0}
.mrow2 .t{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.mrow2 .n{display:flex;flex-direction:column;gap:1px;min-width:0}
.mrow2 .n b{font-family:var(--display)}
.mrow2 .n small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow2 .n small i{font-style:italic}
.mrow2 .st{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);font-weight:700}
.mrow2.on .st{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.mrow2.had .st{background:transparent;border:2px solid var(--line);color:var(--muted)}
.mrow2.had .n small{color:var(--muted)}
.mrow2.late .t{color:color-mix(in srgb, var(--glow) 55%, var(--fg))} /* amber in plaats van rood: alleen de zwaar-balk is nog rood */
.mrow2.sel{background:var(--bg);border-radius:10px}
.mrow2.sel+.mrow2{border-top-color:transparent}
.mlist>.mpanel{margin:2px 0 10px}
.mlist>.mpanel+.mrow2{border-top:0}
.dots{display:flex;gap:5px;margin:4px 0 2px}
.dots i{width:12px;height:12px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.06)}
/* tussenstand per moment */
.ms{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:6px;vertical-align:middle}
.mstat{border-left:3px solid var(--line);padding:6px 10px;display:flex;flex-direction:column;gap:2px;font-size:14px;background:var(--surface);border-radius:0 10px 10px 0}
.mstat b{font-family:var(--display)}
.dm .adv{display:block;margin-top:6px;font-size:13px;color:var(--fg);background:var(--glow-soft);border-radius:8px;padding:6px 8px}
.lit li[style]::before{background:var(--wic);box-shadow:0 0 8px var(--wic)}
/* honger */
.hunger{align-self:flex-start;border-color:var(--glow);background:var(--glow-soft);font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px}
.hungertxt{display:flex;flex-direction:column;gap:6px;font-size:14px}
.mrow2.extra .t{color:var(--glow);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.04em}
/* gevoel per moment en per dag */
.feels{display:flex;flex-wrap:wrap;gap:6px}
.feel{border-radius:999px;padding:5px 11px;font-size:13px;border:1px solid var(--line);background:var(--surface)}
.feel.on{background:var(--fc);border-color:var(--fc);color:#fff;font-weight:700}
.feel.on.donkertekst{color:#1c2429}
.mrow2 .fl{font-style:normal;font-size:12px;font-weight:700;margin-left:6px}
/* afronden en jouw woorden */
.confirm{border-color:var(--glow);background:var(--glow-soft);gap:8px}
.confirm b{font-family:var(--display)}
.confirm span{font-size:14px}
.wday{border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.wday:first-child{border-top:0;padding-top:0}
.wday .wh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wday .wh b{font-family:var(--display)}
.wday ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:2px}
.wday em{font-style:normal;font-weight:700}
/* stem vastleggen */
.vchip{display:inline-flex;align-items:center;gap:4px;font-size:12px;border:1px solid var(--vc);border-radius:999px;padding:2px 8px;color:var(--muted)}
.vchip b{color:var(--vc);font-family:var(--display)}
.chart text.b{font-family:var(--display);font-weight:700;fill:var(--fg)}
.chart text.dim{fill:var(--muted);font-size:10px}
/* gevoelslogboek */
.flog{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.fentry{display:grid;grid-template-columns:48px auto 1fr auto;gap:8px;align-items:baseline;font-size:14px;padding:4px 0;border-top:1px solid var(--line)}
.fentry:first-child{border-top:0}
.fentry .t{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
.fentry em{font-style:normal;font-weight:700;font-size:13px}
.fentry .sv{font-family:var(--display);font-size:13px;margin-right:6px}
.tijd{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.tijd input{width:auto;padding:6px 8px;font-size:14px}
.fentry .x{min-width:0;overflow-wrap:anywhere}
.fentry button{padding:0 6px;color:var(--muted);border:0}
/* eigen check: meerdere items */
.ownlist{display:flex;flex-direction:column;gap:4px;font-size:14px}
.ownlist>div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:4px 0}
.ownlist b{font-family:var(--display);font-variant-numeric:tabular-nums}
/* wat zit erin */
details.inside{background:var(--bg);border-radius:10px;padding:8px 10px}
details.inside summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--accent);list-style:none}
details.inside summary::-webkit-details-marker{display:none}
details.inside summary::before{content:"+ "}
details.inside[open] summary::before{content:"– "}
details.inside .macros{margin-top:8px}
.ownlist details.inside{border-bottom:1px solid var(--line);border-radius:0;margin-bottom:4px}
/* kennisbank */
.kbbox{max-width:560px}
.kbitem{background:var(--bg);border-radius:12px;padding:10px 12px}
.kbitem summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.kbitem summary::-webkit-details-marker{display:none}
.kbitem summary b{font-family:var(--display);font-size:15px}
.kbitem .kbbody{padding-top:8px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.kbitem .kbbody ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.kbitem .kbbody p{max-width:none}
/* mijn eten: lekker, altijd, match, groeilijst */
.match{display:flex;flex-direction:column}
.mg{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:start;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.mg:first-child{border-top:0}
.mg .mdot{display:block;width:14px;height:14px;border-radius:50%;margin-top:4px;box-shadow:0 0 8px currentColor}
.mg b{font-family:var(--display);display:block}
.mg b small{font-family:var(--body);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-left:4px}
.mg span{display:block}
.mg small.al{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.upg div{padding:6px 0;border-top:1px solid var(--line);font-size:14px}
.upg div:first-child{border-top:0}
.upg b{font-family:var(--display)}
.upg span{color:var(--muted);display:block;font-size:13px}
.eitem{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:14px}
.eitem:first-child{border-top:0}
.eitem>div:first-child{min-width:0;flex:1}
.eitem small{display:block;color:var(--muted);font-size:12px}
.eitem em{font-style:normal;font-size:12px;font-weight:700;margin-left:4px}
.eitem .row{flex:none}
.eitem .row button{font-size:13px;padding:6px 10px}
.gchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.gchip{font-size:11px;padding:2px 8px;border-radius:999px;color:var(--muted);background:transparent}
.gchip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.durf{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:none}
.durf button{border:0;border-radius:0;padding:5px 9px;font-size:12px;background:transparent;color:var(--muted)}
.durf button.on{background:var(--dc);color:#fff;font-weight:700}
.durf button.on[data-d="soms"]{color:#1c2429}
#etPaste{min-height:110px}
.howto{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.howto b{font-family:var(--display)}
/* stand van de verbinding in de kop: grijs offline, geel online zonder account, groen gesynchroniseerd, rood niet gelukt */
.netstate{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);margin-right:6px;vertical-align:middle;cursor:pointer}
.netstate svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.netstate .b2,.netstate .b3,.netstate .b4{opacity:.25}
.netstate .x,.netstate .p{display:none}
.netstate.online{color:var(--glow)}.netstate.online .b2,.netstate.online .b3{opacity:1}
.netstate.sync{color:var(--accent)}.netstate.sync .b2,.netstate.sync .b3,.netstate.sync .b4{opacity:1}
.netstate.fout{color:var(--danger)}.netstate.fout .b2{opacity:1}
.netstate.fout .x,.netstate.off .x{display:block}
.netstate.pauze .p{display:block}.netstate.pauze .b1,.netstate.pauze .b2,.netstate.pauze .b3,.netstate.pauze .b4{display:none}
.avatar{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);background:var(--glow-soft);color:var(--fg);font-family:var(--display);font-weight:700;font-size:14px;padding:0;margin-left:10px;vertical-align:middle;overflow:hidden;display:inline-grid;place-items:center;cursor:pointer}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* het update-balletje: rechtsboven op de avatar, pulseert zacht tot er is bijgewerkt */
.sparks{position:relative}
.updatebol{position:absolute;right:-7px;top:-7px;width:22px;height:22px;padding:0;border-radius:50%;background:var(--accent);color:#fff;font:700 14px/1 var(--display);display:grid;place-items:center;border:2px solid var(--bg);cursor:pointer;animation:bolpuls 1.8s ease-in-out infinite;box-shadow:0 0 0 0 var(--accent)}
.updatebol::before{content:"!"}
@keyframes bolpuls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.updatebol{animation:none}}
.pf{display:flex;gap:14px;align-items:center}
.pf .avatar{width:72px;height:72px;font-size:28px;margin:0;flex:none}
.pf .stack{flex:1;min-width:0;gap:6px}
.psec{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.psec h3{font-size:16px}
.psec .links{display:flex;flex-wrap:wrap;gap:6px}
.psec .links button{font-size:13px;padding:6px 10px}
.keuze{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;align-self:flex-start}
.keuze button{border:0;border-radius:0;padding:8px 16px;background:transparent;color:var(--muted);font-weight:700}
.keuze button.on{background:var(--accent);color:var(--accent-ink)}
.stand{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.stand i{display:block;width:12px;height:12px;border-radius:50%;margin-top:5px;flex:none}
.stand b{font-family:var(--display);display:block}
.stand small{color:var(--muted);font-size:12px}
.sw{display:flex;align-items:center;gap:10px;font-size:14px}
.sw input{width:auto}
.netpop{position:fixed;top:60px;right:16px;z-index:6;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;max-width:320px;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 24px rgba(10,20,18,.15);font-size:14px}
.netpop b{font-family:var(--display)}
.netpop .row button{font-size:13px;padding:6px 10px}
@media (min-width:900px){.netpop{right:auto;left:calc(50% + 110px);transform:translateX(-50%);max-width:360px}}
/* desktop: navigatie links, inhoud in twee kolommen */
@media (min-width:900px){
  .app{max-width:none;margin:0;padding-left:220px;min-height:100vh}
  header{max-width:1000px;margin:0 auto;width:100%;padding:18px 24px 12px}
  main{max-width:1000px;margin:0 auto;width:100%;padding:24px 24px 60px}
  nav{top:0;bottom:0;right:auto;left:0;width:220px;border-top:0;border-right:1px solid var(--line);padding:24px 12px}
  nav .inner{display:flex;flex-direction:column;gap:6px;max-width:none}
  nav button{flex-direction:row;justify-content:flex-start;gap:12px;font-size:15px;padding:10px 12px}
  nav button svg{width:22px;height:22px}
  #tab-vandaag,#tab-stem,#tab-buddy,#tab-licht,.stack[id^="sub-"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
  #tab-vandaag>:not(.card),#tab-stem>:not(.card),#tab-buddy>:not(.card),#tab-licht>:not(.card),.stack[id^="sub-"]>:not(.card){grid-column:1/-1}
  #tab-vandaag>#dayCard,#tab-licht>#etenCard,#tab-licht>#acctCard,.stack[id^="sub-"]>#dagCard,.stack[id^="sub-"]>#menuEditor,.stack[id^="sub-"]>#dishOut{grid-column:1/-1}
  .onb{max-width:640px}
  .toast{bottom:40px}
  .moments{grid-template-columns:repeat(6,1fr)}
}
/* buddystand: alleen de buddy-tab; wat bij een deelnemer hoort gaat weg */
[data-modus="buddy"] nav button:not([data-tab="buddy"]){display:none}
[data-modus="buddy"] .bouw,[data-modus="buddy"] .eigen,[data-modus="buddy"] #heavyBtn,[data-modus="buddy"] #heavyCard,[data-modus="buddy"] .deelnemer{display:none!important}
.banner .bbrij{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-top:1px solid var(--line)}
.banner .bbrij[role="button"]{cursor:pointer}
.banner .bbrij:first-child{border-top:0;padding-top:0}
.banner .bbrij:last-child{padding-bottom:0}
.banner .bbrij.zwaar b{color:var(--danger)}
.banner .bbrij .row{gap:6px}
.banner .bbrij .row button{font-size:13px;padding:6px 10px}
:root:not([data-modus="buddy"]) .buddyonly{display:none!important}
.chk{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin-top:6px}
.chk input{width:auto;margin:0}
main>.banner{margin-bottom:12px}
/* gesprek tussen deelnemer en buddy */
.onb.gesprek{gap:10px}
.glijst{display:flex;flex-direction:column;gap:6px;overflow:auto;max-height:52vh;min-height:120px;padding:4px 2px}
.glijst .bub{max-width:82%;padding:8px 12px;border-radius:14px;background:var(--bg);border:1px solid var(--line);font-size:14px;align-self:flex-start;overflow-wrap:anywhere}
.glijst .bub.mijn{align-self:flex-end;background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff)}
.glijst .bub small{display:block;font-size:11px;opacity:.7;margin-top:2px}
.glijst .sys{align-self:center;font-size:12px;color:var(--muted);text-align:center;padding:2px 10px}
.glijst .sys.zwaar{color:var(--danger);font-weight:700}
.glijst .leeg{color:var(--muted);font-size:13px;text-align:center;padding:20px 10px}
.glijst.klein{max-height:38vh;min-height:70px;background:var(--bg);border-radius:12px;padding:8px}
.gkaart .chips{margin:4px 0}
.linkje{border:0;background:none;padding:0;color:var(--accent);text-decoration:underline;font-size:12px;cursor:pointer}
/* eerste start: het keuzescherm en de aanmelding bedekken de app helemaal; de updatebalk wacht tot daarna */
.overlay.vol{background:var(--bg)}
body:has(#onboarding:not([hidden])) #updateBanner,body:has(#acctWall:not([hidden])) #updateBanner{display:none!important}

/* ===== look en feel: warmer en met wat diepte, maar rustig ===== */
:root{--schaduw:0 1px 2px rgba(28,36,41,.05),0 12px 32px -20px rgba(28,36,41,.35);--schaduw-knop:0 3px 8px -3px rgba(28,36,41,.4);--tint-accent:color-mix(in srgb,var(--accent) 12%,transparent);--tint-glow:color-mix(in srgb,var(--glow) 18%,transparent)}
:root[data-theme="dark"]{--schaduw:0 1px 2px rgba(0,0,0,.4),0 14px 34px -20px rgba(0,0,0,.9);--schaduw-knop:0 3px 8px -3px rgba(0,0,0,.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--schaduw:0 1px 2px rgba(0,0,0,.4),0 14px 34px -20px rgba(0,0,0,.9);--schaduw-knop:0 3px 8px -3px rgba(0,0,0,.7)}}
body{background:radial-gradient(900px 520px at 8% -12%,var(--tint-accent),transparent 62%),radial-gradient(760px 420px at 104% -4%,var(--tint-glow),transparent 58%),var(--bg);background-attachment:fixed}
header{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand svg{filter:drop-shadow(0 2px 4px rgba(28,36,41,.18))}
.card{border-radius:18px;box-shadow:var(--schaduw);border-color:color-mix(in srgb,var(--line) 75%,transparent)}
button{transition:transform .12s ease,box-shadow .12s ease,filter .12s ease,border-color .12s ease}
button:active{transform:translateY(1px)}
.primary{box-shadow:var(--schaduw-knop);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,white),var(--accent))}
.primary:hover{filter:brightness(1.06)}
.warn{background:color-mix(in srgb,var(--danger) 7%,var(--surface))}
input,textarea,select{background:color-mix(in srgb,var(--surface) 65%,var(--bg))}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
nav{background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -8px 24px -18px rgba(28,36,41,.35)}
nav button[aria-selected=true]{background:var(--tint-accent)}
.overlay{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.onb{border-radius:24px;box-shadow:0 30px 80px -30px rgba(0,0,0,.45)}
.avatar{box-shadow:var(--schaduw-knop)}
.banner{box-shadow:var(--schaduw)}
.codebox b{color:var(--accent)}
.eyebrow{color:color-mix(in srgb,var(--accent) 70%,var(--muted))}
/* het startscherm: logo, naam, drie keuzes met icoon */
.overlay.vol{background:radial-gradient(900px 560px at 10% -10%,var(--tint-accent),transparent 62%),radial-gradient(760px 460px at 100% 0%,var(--tint-glow),transparent 58%),var(--bg)}
#onboarding.vol .onb{box-shadow:var(--schaduw);padding-top:28px}
.startkop{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:6px}
.startlogo svg{width:84px;height:84px;filter:drop-shadow(0 8px 18px rgba(42,157,100,.28))}
.startlogo.klein{display:flex;justify-content:center;margin-bottom:4px}
.startlogo.klein svg{width:56px;height:56px}
#acctWall:not(.vol) .startlogo{display:none}
.startnaam{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.03em;line-height:1;margin-top:8px}
.starttag{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700;color:var(--accent)}
.startzin{color:var(--muted);font-size:15px;margin-top:10px;max-width:34ch;text-wrap:balance}
.startvraag{font-size:20px;text-align:center;margin-top:6px}
.keus{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:16px;box-shadow:var(--schaduw);border-color:color-mix(in srgb,var(--line) 75%,transparent)}
.keus:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 14px 30px -18px rgba(28,36,41,.45)}
.keus .ki{flex:none;width:44px;height:44px;border-radius:50%;background:var(--tint-accent);display:grid;place-items:center}
.keus .ki svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.keus b{font-size:16px}
.startlink{display:block;text-align:center;font-size:13px;color:var(--muted);margin-top:4px}
/* installatiehulp */
.iosdeel{width:18px;height:18px;vertical-align:-4px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin:0 2px}
.iosstappen{margin:6px 0 0;padding-left:20px;font-size:14px;display:flex;flex-direction:column;gap:4px}
/* donkere stand: het poppetje iets lichter dan de kaart, zodat het leesbaar blijft */
:root[data-theme="dark"] svg .bf{fill:#2b353c;stroke:#5c6b74}
:root[data-theme="dark"] svg .bo{stroke:#5c6b74}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) svg .bf{fill:#2b353c;stroke:#5c6b74}:root:not([data-theme="light"]) svg .bo{stroke:#5c6b74}}
/* zonder account: een bescheiden regel in plaats van een balk */
.acctnote{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding:0 2px}
.acctnote .linkje{font-size:13px}

/* ===== strak (voorstel van 26 oktober): egale ondergrond, dunne randen, compacte kop, minder tekst ===== */
:root{--bg:#f6f7f6;--line:#e3e7e5}
body{background:var(--bg)}
header{height:56px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
header::after{display:none}
.brand{gap:8px}
.brand svg{width:26px;height:26px;filter:none}
header h1{font-size:18px;letter-spacing:-.02em}
.tagline{display:none}
.sparks{gap:12px}
.bouw{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--muted)}
.bouw svg{width:16px;height:16px}
.bouw b{font-size:14px;color:var(--fg)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.avatar{box-shadow:none;margin-left:0;width:30px;height:30px;border-color:transparent;background:var(--tint-accent);color:var(--accent)}
.pf .avatar{width:72px;height:72px}
main{padding-top:20px}
.card{border-radius:16px;box-shadow:none;border-color:var(--line)}
button{box-shadow:none}
.primary{background:var(--accent);box-shadow:none}
.primary:hover{filter:none}
input,textarea,select{background:var(--surface)}
nav{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;background:var(--surface)}
nav button[aria-selected=true]{background:transparent;box-shadow:inset 0 2px 0 var(--accent);border-radius:0}
.eyebrow{color:var(--muted);font-size:11px}
h2{font-size:26px;letter-spacing:-.01em}
.hero{background:var(--surface);border-color:var(--line);align-items:center;gap:12px}
.herofig{flex:0 0 52px}
.hero .lit,.hero #bodyNext{display:none}
.hero.open .lit{display:flex;flex-direction:column}
.hero.open #bodyNext{display:block}
.hero .linkje{align-self:flex-start;font-size:13px;text-decoration:none;font-weight:700}
.dm.big .dmmark{flex:0 0 44px}
.dm.big .dmmark svg{width:44px;height:44px}
.dm.big b{font-size:17px}
.dots{margin:4px 0}
.mrow2{min-height:56px;grid-template-columns:40px 1fr 32px;padding:6px 4px}
.mrow2 .st{width:26px;height:26px;font-size:14px}
.mrow2.sel{background:var(--bg)}
.hunger{background:var(--surface);border-color:var(--line);font-size:13px;padding:7px 12px}
.banner{background:var(--surface);border-color:var(--line);box-shadow:none}
.banner.zwaar{border-color:var(--danger)}
#updateBanner,#installBanner{border-color:var(--accent)}
.acctnote{padding:0}
.onb{border-radius:20px;box-shadow:0 20px 50px -30px rgba(0,0,0,.35)}
.overlay{backdrop-filter:none;-webkit-backdrop-filter:none}
.overlay.vol{background:var(--bg)}
#onboarding.vol .onb{box-shadow:none;border:1px solid var(--line)}
.startlogo svg{width:64px;height:64px;filter:none}
.startnaam{font-size:30px}
.startvraag{font-size:18px}
.keus{box-shadow:none;border-color:var(--line);padding:14px 16px}
.keus:hover{transform:none;box-shadow:none;border-color:var(--accent)}
.keus .ki{width:40px;height:40px;border-radius:12px}
.updatebol{box-shadow:none}
.chip{box-shadow:none}
.gkaart .glijst.klein{background:var(--bg)}
@media (min-width:900px){header{height:auto;padding:12px 24px}}
@media (min-width:900px){nav button[aria-selected=true]{box-shadow:inset 3px 0 0 var(--accent);border-radius:10px}}
/* naar de schets: overdag geen pijltegel, het vinkje los in de accentkleur */
.dm.tussen .dmmark{display:none}
.mrow2.on .st{background:transparent;border:0;color:var(--accent);font-size:18px}
.mrow2 .st{border-color:var(--line)}
/* naar de schets: statuskaart, stip vóór de naam, Invullen-knop, tikbare lichaamskaart */
.tussen{display:flex;flex-direction:column;gap:6px}
.tussen .tk{font-family:var(--display);font-size:17px;font-weight:700}
.tussen .dots{margin:0;flex:none}
#statusCard{gap:0}
.mrow2{grid-template-columns:40px 12px 1fr auto;gap:10px}
.md{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line);display:block;box-sizing:border-box}
.md.vol{border:0}
.mrow2 .ms{display:none}
.st.inv{width:auto;height:auto;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;border:1px solid var(--line);color:var(--muted);background:var(--surface)}
.st.inv.nu{border-color:var(--accent);color:var(--accent)}
.mrow2.nu{background:color-mix(in srgb,var(--accent) 5%,var(--surface));border-radius:10px}
.mrow2.nu+.mrow2{border-top-color:transparent}
#hungerRow{gap:10px;align-items:center}
#hungerRow p{margin:0;font-size:12px}
.hero{cursor:pointer}
.hero .chev{border:0;background:none;padding:4px;color:var(--muted);flex:none;align-self:center}
.hero .chev svg{width:18px;height:18px;transition:transform .15s}
.hero.open .chev svg{transform:rotate(90deg)}
.hero .lit{margin-top:4px}
@media (min-width:900px){#tab-vandaag>#statusCard{grid-column:1/-1}}
/* profiel: lucht tussen de uitklapblokken */
.psec .expl+.expl{margin-top:10px}
.psec .expl{margin-top:6px}
/* smileys in het gesprek */
.emoji{display:flex;gap:4px;flex-wrap:wrap}
.emoji .em{font-size:18px;line-height:1;padding:6px 7px;border-radius:10px;border:1px solid transparent;background:transparent}
.emoji .em:hover{background:var(--bg);border-color:var(--line)}
/* pijlen terug in de tussenstand, groter poppetje */
.tussen{flex-direction:row;align-items:center;gap:14px}
.tussen .tmark{flex:0 0 44px}
.tussen .tmark svg{width:44px;height:44px;display:block}
.tussen .tbody{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.herofig{flex:0 0 96px}
@media (max-width:380px){.herofig{flex-basis:80px}}
/* startscherm: twee links netjes naast elkaar, zelfde maat en kleur */
.startlinks{display:flex;justify-content:center;align-items:baseline;gap:20px;margin-top:4px;font-size:13px}
.startlinks a,.startlinks .linkje{font:inherit;font-size:13px;line-height:1.4;padding:0;margin:0;border:0;background:none;color:var(--accent);text-decoration:underline;cursor:pointer}
.startlinks .linkje{color:var(--muted)}