#onboardingFlow {
  /* Gebruik app-kleuren via CSS vars — onboarding past bij het app-thema */
  --ob-bg:      var(--bg, #f8f8f6);
  --ob-panel:   var(--panel, #fff);
  --ob-border:  var(--border2, rgba(0,0,0,.09));
  --ob-border2: var(--border, rgba(0,0,0,.06));

  --hi:       var(--text, #1a1a1a);
  --mid:      var(--sub,  #6b7280);
  --lo:       var(--bg2,  #ebebea);

  /* App-groen als primaire kleur in plaats van terracotta */
  --gold:     var(--accent,  #52b82e);
  --gold2:    var(--accent2, #42a020);
  --gold3:    #d4f5c0;
  --gold-dim: var(--accent,  #52b82e);

  --green:    var(--accent,  #52b82e);
  --blue:     #7ab0d8;
  --rose:     #c87a8a;
  --amber:    var(--warm2, #d4884a);

  --E1: cubic-bezier(0.16,1.0,0.30,1.0);
  --E2: cubic-bezier(0.40,0.0,0.20,1.0);
  --E3: cubic-bezier(0.22,1.2,0.36,1.0);
}

#onboardingFlow{
  min-height:100dvh;
  background:var(--ob-bg);
  font-family:var(--font,'DM Sans',sans-serif);
  -webkit-font-smoothing:antialiased;
  color:var(--hi);
  overflow-x:hidden;
}

/* Atmosfeer-effecten verwijderd — passen niet bij app-thema */
.atm    { position:fixed; inset:0; pointer-events:none; z-index:0; }
.grain  { display:none; }
.vignette { position:fixed; inset:0; pointer-events:none; z-index:0; }

/* --------------- LAYOUT --------------- */
.viewport{
  position:relative;z-index:1;
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(24px,5vw,44px) clamp(16px,4vw,24px) clamp(28px,5vw,44px);
  gap:0;
}

.slides{
  position:relative;width:100%;max-width:440px;
  flex:1;display:flex;flex-direction:column;
}

.slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transform:translateX(44px);
  transition:opacity .5s var(--E2),transform .5s var(--E1);
}
.slide.active{opacity:1;pointer-events:all;transform:translateX(0);position:relative;inset:auto;}
.slide.exit-left{opacity:0;pointer-events:none;transform:translateX(-44px);
  transition:opacity .38s var(--E2),transform .38s var(--E2);}

/* --------------- STEP BAR --------------- */
.step-bar{
  display:flex;align-items:center;gap:8px;
  width:100%;max-width:440px;
  margin-bottom:clamp(24px,5vw,36px);
}
.step-pip{
  height:3px;border-radius:2px;background:var(--ob-border);
  flex:1;transition:background .5s var(--E2);overflow:hidden;position:relative;
}
.step-pip.done{background:var(--gold-dim);}
.step-pip.active::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold));
  animation:pipFill .6s var(--E2) forwards;
}
@keyframes pipFill{from{width:0}to{width:100%}}

.step-back{
  width:30px;height:30px;border-radius:50%;
  background:var(--ob-panel);border:1px solid var(--ob-border);
  color:var(--mid);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;line-height:1;
}
.step-back:hover{background:var(--lo);color:var(--hi);}
.step-back.hidden{opacity:0;pointer-events:none;}

.step-label{
  font-size:10px;color:var(--mid);letter-spacing:.14em;
  text-transform:uppercase;font-weight:300;white-space:nowrap;
}

/* --------------- SLIDE 1: WELKOM --------------- */
.welcome-visual{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,28px) 0;
}
.kitchen-svg{width:min(270px,70vw);height:auto;overflow:visible;}

.k-shelf  {animation:kUp .8s var(--E1) .10s both;}
.k-j1     {animation:kUp .7s var(--E3) .28s both;}
.k-j2     {animation:kUp .7s var(--E3) .42s both;}
.k-j3     {animation:kUp .7s var(--E3) .56s both;}
.k-pan    {animation:kUp .8s var(--E1) .46s both;}
.k-glow   {animation:kGlow 2.4s ease-in-out .9s infinite both;}
@keyframes kUp  {from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@keyframes kGlow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.9;transform:scale(1.14)}}

.w-copy{text-align:center;}
.w-title{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(28px,7.5vw,38px);letter-spacing:-.025em;line-height:1.05;
}
.w-title b{
  font-style:normal;font-weight:400;
  background:linear-gradient(88deg,var(--accent2),var(--accent),var(--warm),var(--warm2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.w-sub{font-size:clamp(12.5px,3vw,14px);color:var(--mid);font-weight:300;line-height:1.65;margin-top:9px;}

.w-cta{margin-top:clamp(24px,5vw,36px);}

/* --------------- SLIDE 2: VOORRAAD --------------- */
.s-head{margin-bottom:clamp(16px,4vw,24px);}
.s-title{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(22px,6vw,30px);letter-spacing:-.02em;line-height:1.1;
}
.s-title b{
  font-style:normal;font-weight:400;
  background:linear-gradient(88deg,var(--gold-dim),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.s-sub{font-size:12.5px;color:var(--mid);font-weight:300;margin-top:5px;line-height:1.6;}

.methods{display:flex;flex-direction:column;gap:9px;}

.mc{
  background:var(--ob-panel);
  border:1px solid var(--ob-border);border-radius:16px;
  padding:14px 16px;display:flex;align-items:center;gap:13px;
  cursor:pointer;transition:all .22s var(--E2);position:relative;overflow:hidden;
}
.mc::before{content:'';position:absolute;inset:0;border-radius:16px;
  background:linear-gradient(135deg,rgba(82,184,46,.08),transparent);
  opacity:0;transition:opacity .22s;}
.mc:hover{border-color:rgba(82,184,46,.30);transform:translateY(-1px);}
.mc:hover::before,.mc.sel::before{opacity:1;}
.mc.sel{border-color:rgba(82,184,46,.40);
  background:linear-gradient(148deg,rgba(82,184,46,.07) 0%,var(--ob-panel) 100%);}

.mc-ico{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:var(--lo);border:1px solid var(--ob-border);
  display:flex;align-items:center;justify-content:center;transition:all .22s;
}
.mc.sel .mc-ico{background:rgba(82,184,46,.12);border-color:rgba(82,184,46,.28);}
.mc-txt{flex:1;}
.mc-lbl{font-size:13.5px;font-weight:400;color:var(--hi);letter-spacing:.005em;}
.mc-desc{font-size:11px;color:var(--mid);font-weight:300;margin-top:1px;}
.mc-arr{color:var(--mid);font-size:15px;transition:all .22s;}
.mc:hover .mc-arr,.mc.sel .mc-arr{color:var(--gold);transform:translateX(3px);}

.expand{display:none;margin-top:6px;}
.expand.open{display:block;animation:fadeUp .32s var(--E1) both;}
.mc-sub{margin-left:12px;}
.scan-group{display:flex;flex-direction:column;gap:9px;margin-top:2px;animation:fadeUp .28s var(--E1) both;}

.uz{
  background:var(--lo);border:1.5px dashed var(--ob-border);
  border-radius:12px;padding:18px;text-align:center;cursor:pointer;transition:all .22s;
}
.uz:hover{border-color:rgba(82,184,46,.40);background:rgba(82,184,46,.04);}
.uz-txt{font-size:11.5px;color:var(--mid);font-weight:300;}
.uz-txt span{color:var(--gold);font-weight:400;}
input[type=file]{display:none;}

.pg{display:none;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:6px;}
.pg.vis{display:grid;animation:fadeUp .32s var(--E1) both;}
.pt{aspect-ratio:1;border-radius:9px;overflow:hidden;background:var(--lo);
  animation:tPop .32s var(--E3) both;}
.pt img{width:100%;height:100%;object-fit:cover;}
@keyframes tPop{from{transform:scale(.68);opacity:0}to{transform:scale(1);opacity:1}}

/* tag input */
.ti-wrap{background:var(--ob-panel);border:1px solid var(--ob-border);
  border-radius:11px;padding:10px 14px;
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;cursor:text;min-height:46px;}
.ti-wrap input{background:none;border:none;outline:none;color:var(--hi);
  font-family:var(--font,'DM Sans',sans-serif);font-size:13px;font-weight:300;flex:1;min-width:70px;}
.ti-wrap input::placeholder{color:var(--mid);}
.tag{background:rgba(82,184,46,.10);border:1px solid rgba(82,184,46,.24);
  border-radius:7px;padding:3px 9px;font-size:11.5px;color:var(--gold2);font-weight:400;
  display:flex;align-items:center;gap:4px;cursor:pointer;
  animation:tPop .22s var(--E3) both;}
.tag:hover{background:rgba(82,184,46,.18);}
.tag-x{opacity:.5;font-size:10px;}
.ti-hint{font-size:10.5px;color:var(--lo);margin-top:5px;letter-spacing:.04em;}

/* inv bar */
.inv{
  margin-top:clamp(14px,3.5vw,20px);
  background:var(--ob-panel);border:1px solid var(--ob-border);
  border-radius:13px;padding:12px 15px;
  display:flex;align-items:center;gap:12px;transition:all .4s var(--E2);
}
.inv.has{border-color:rgba(82,184,46,.28);background:rgba(82,184,46,.05);}
.inv-ico{width:34px;height:34px;border-radius:9px;
  background:var(--lo);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s;}
.inv.has .inv-ico{background:rgba(82,184,46,.14);}
.inv-body{flex:1;}
.inv-lbl{font-size:9.5px;color:var(--mid);letter-spacing:.12em;text-transform:uppercase;font-weight:300;}
.inv-n{font-size:20px;font-weight:300;color:var(--hi);letter-spacing:-.02em;transition:all .3s var(--E1);}
.inv-n .u{font-size:12px;color:var(--mid);margin-left:2px;}
.inv-dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;}
.id{width:5px;height:5px;border-radius:50%;background:var(--gold);
  opacity:0;transform:scale(0);transition:all .3s var(--E3);}
.id.lit{opacity:.75;transform:scale(1);}

/* --------------- SLIDE 2b: KIES DOEL --------------- */
/* What does user want — shown as a choice inside the flow */
.goal-section{margin-top:clamp(18px,4vw,26px);}
.goal-label{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mid);font-weight:300;margin-bottom:10px;
}

.goals{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

.goal-card{
  background:var(--ob-panel);
  border:1px solid var(--ob-border);border-radius:14px;
  padding:14px 14px 13px;cursor:pointer;
  display:flex;flex-direction:column;gap:8px;
  transition:all .24s var(--E2);position:relative;overflow:hidden;
}
.goal-card::before{content:'';position:absolute;inset:0;border-radius:14px;
  background:var(--goal-glow,transparent);opacity:0;transition:opacity .24s;}
.goal-card:hover::before,.goal-card.sel::before{opacity:1;}
.goal-card:hover{transform:translateY(-2px);}
.goal-card.sel{transform:translateY(-2px);}

/* colour variants */
.goal-card[data-goal="tonight"] {--goal-color:#d4884a;--goal-glow:linear-gradient(135deg,rgba(212,136,74,.13),transparent);}
.goal-card[data-goal="cook"]    {--goal-color:#c8906a;--goal-glow:linear-gradient(135deg,rgba(200,144,106,.12),transparent);}
.goal-card[data-goal="week"]    {--goal-color:#7ab0d8;--goal-glow:linear-gradient(135deg,rgba(122,176,216,.12),transparent);}
.goal-card[data-goal="explore"] {--goal-color:#72b87a;--goal-glow:linear-gradient(135deg,rgba(114,184,122,.12),transparent);}

.goal-card.sel{border-color:rgba(var(--goal-color-rgb,200,144,106),.40);}
.goal-card[data-goal="tonight"].sel{border-color:rgba(212,136,74,.38);}
.goal-card[data-goal="cook"].sel   {border-color:rgba(200,144,106,.38);}
.goal-card[data-goal="week"].sel   {border-color:rgba(122,176,216,.38);}
.goal-card[data-goal="explore"].sel{border-color:rgba(114,184,122,.38);}

.gc-icon{
  width:32px;height:32px;border-radius:9px;
  background:var(--lo);border:1px solid var(--ob-border);
  display:flex;align-items:center;justify-content:center;
  transition:all .24s;
}
.goal-card[data-goal="tonight"].sel .gc-icon{background:rgba(212,136,74,.14);border-color:rgba(212,136,74,.26);}
.goal-card[data-goal="cook"].sel    .gc-icon{background:rgba(200,144,106,.14);border-color:rgba(200,144,106,.26);}
.goal-card[data-goal="week"].sel    .gc-icon{background:rgba(122,176,216,.14);border-color:rgba(122,176,216,.26);}
.goal-card[data-goal="explore"].sel .gc-icon{background:rgba(114,184,122,.14);border-color:rgba(114,184,122,.26);}

.gc-label{font-size:12.5px;font-weight:400;color:var(--hi);letter-spacing:.005em;line-height:1.25;}
.gc-sub  {font-size:10.5px;color:var(--mid);font-weight:300;line-height:1.45;}

/* time badge */
.time-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(212,136,74,.10);border:1px solid rgba(212,136,74,.20);
  border-radius:100px;padding:3px 9px;
  font-size:9.5px;color:var(--amber);letter-spacing:.06em;
  font-weight:300;margin-bottom:10px;
}
.time-dot{width:5px;height:5px;border-radius:50%;background:var(--amber);
  animation:tdPulse 2s ease-in-out infinite;}
@keyframes tdPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}

/* meal moment chips (shown when "vanavond" or "koken" selected) */
.moment-row{
  display:none;margin-top:8px;
  flex-wrap:wrap;gap:6px;
  animation:fadeUp .32s var(--E1) both;
}
.moment-row.vis{display:flex;}
.mchip{
  padding:5px 12px;border-radius:100px;
  background:rgba(255,255,255,.030);border:1px solid var(--border2);
  font-size:11.5px;color:var(--mid);font-weight:300;cursor:pointer;
  transition:all .22s;display:flex;align-items:center;gap:5px;
}
.mchip:hover{border-color:rgba(200,120,60,.28);color:var(--hi);}
.mchip.sel{
  background:rgba(200,120,60,.12);border-color:rgba(200,120,60,.34);
  color:var(--gold2);
}
.mchip-now{
  background:rgba(212,136,74,.10);border-color:rgba(212,136,74,.28);
  color:var(--amber);font-weight:400;
}
.mchip-now.sel{background:rgba(212,136,74,.18);border-color:rgba(212,136,74,.44);}

/* --------------- SLIDE 3: PAN REWARD --------------- */
.reward{display:flex;flex-direction:column;align-items:center;text-align:center;}

.r-head{margin-bottom:clamp(18px,4.5vw,26px);animation:fadeUp .7s var(--E1) .1s both;}
.r-eye{font-size:9.5px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--gold);font-weight:400;margin-bottom:7px;}
.r-title{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(26px,7vw,36px);letter-spacing:-.025em;line-height:1.05;
}
.r-title b{
  font-style:normal;font-weight:400;
  background:linear-gradient(88deg,var(--gold-dim),var(--gold),var(--gold2),#f8e0b0);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* pan scene */
.ps{
  position:relative;width:min(330px,84vw);
  height:clamp(196px,50vw,234px);
  display:flex;align-items:flex-end;justify-content:center;
  margin:0 auto clamp(18px,4.5vw,26px);
}
.ps-heat{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:190px;}
.ps-hr{position:absolute;bottom:0;left:50%;transform:translateX(-50%);border-radius:50%;}
.ps-hr:nth-child(1){width:190px;height:25px;background:radial-gradient(ellipse,rgba(170,68,12,.24) 0%,transparent 70%);animation:hPulse 3s ease-in-out infinite 0s;}
.ps-hr:nth-child(2){width:132px;height:16px;background:radial-gradient(ellipse,rgba(210,100,28,.34) 0%,transparent 70%);animation:hPulse 3s ease-in-out infinite .4s;}
.ps-hr:nth-child(3){width:74px; height:9px; background:radial-gradient(ellipse,rgba(255,160,55,.46) 0%,transparent 70%);animation:hPulse 3s ease-in-out infinite .8s;}
@keyframes hPulse{0%,100%{opacity:.6;transform:translateX(-50%) scaleX(1) scaleY(1)}50%{opacity:1;transform:translateX(-50%) scaleX(1.07) scaleY(1.4)}}

.ps-pan-el{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);
  width:clamp(222px,58vw,268px);
  filter:drop-shadow(0 14px 38px rgba(0,0,0,.84)) drop-shadow(0 3px 7px rgba(0,0,0,.55));
  animation:panIn .72s var(--E1) .2s both;}
@keyframes panIn{from{opacity:0;transform:translateX(-50%) translateY(15px) scale(.93)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

.ps-ings{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);
  width:clamp(140px,38vw,168px);height:54px;
  display:flex;align-items:center;justify-content:center;gap:3px;pointer-events:none;}
.pi{opacity:0;transform:translateY(-78px) rotate(-22deg) scale(.32);will-change:transform,opacity;}
.pi:nth-child(1){animation:ingD .58s var(--E3) .55s both;}
.pi:nth-child(2){animation:ingD .58s var(--E3) .96s both;}
.pi:nth-child(3){animation:ingD .58s var(--E3) 1.34s both;}
.pi:nth-child(4){animation:ingD .58s var(--E3) 1.68s both;}
@keyframes ingD{0%{opacity:0;transform:translateY(-78px) rotate(-22deg) scale(.32);}52%{opacity:1;transform:translateY(6px) rotate(6deg) scale(1.12);}70%{transform:translateY(-3px) rotate(-3deg) scale(.95);}85%{transform:translateY(2px) rotate(1deg) scale(1.03);}100%{opacity:1;transform:translateY(0) rotate(0) scale(1);}}

.ps-spoon{position:absolute;bottom:clamp(30px,8vw,38px);right:clamp(6px,2vw,12px);
  width:clamp(34px,8.5vw,44px);height:clamp(92px,24vw,112px);
  transform-origin:50% 100%;opacity:0;
  filter:drop-shadow(1px 3px 9px rgba(0,0,0,.70));
  animation:sIn .46s var(--E1) 2.25s both,sS1 .75s var(--E2) 2.76s,sS2 .75s var(--E2) 3.56s,sOut .40s var(--E2) 4.36s forwards;}
@keyframes sIn {from{opacity:0;transform:rotate(40deg) translateY(20px) scale(.78);}to{opacity:1;transform:rotate(20deg) translateY(0) scale(1);}}
@keyframes sS1 {0%{transform:rotate(20deg);}44%{transform:rotate(-30deg);}100%{transform:rotate(20deg);}}
@keyframes sS2 {0%{transform:rotate(20deg);}44%{transform:rotate(-30deg);}100%{transform:rotate(20deg);}}
@keyframes sOut{to{opacity:0;transform:rotate(42deg) translateY(24px) scale(.80);}}

.ps-steam{position:absolute;bottom:clamp(96px,25vw,114px);left:50%;transform:translateX(-50%);
  display:flex;gap:clamp(9px,2.5vw,14px);opacity:0;pointer-events:none;
  animation:stIn .5s ease 3.5s both;}
@keyframes stIn{to{opacity:1}}
.ps-sl{border-radius:2px;background:linear-gradient(to top,rgba(255,255,255,.12) 0%,rgba(255,255,255,.05) 45%,transparent 100%);transform-origin:bottom;}
.ps-sl:nth-child(1){width:2.5px;height:32px;animation:stUp 2.3s ease-in-out 3.60s infinite;}
.ps-sl:nth-child(2){width:2px;  height:23px;animation:stUp 2.3s ease-in-out 3.90s infinite;}
.ps-sl:nth-child(3){width:2.5px;height:28px;animation:stUp 2.3s ease-in-out 3.75s infinite;}
.ps-sl:nth-child(4){width:2px;  height:19px;animation:stUp 2.3s ease-in-out 4.05s infinite;}
@keyframes stUp{0%{opacity:0;transform:translateY(0) scaleX(1) skewX(0)}18%{opacity:.7}62%{opacity:.32;transform:translateY(-19px) scaleX(1.9) skewX(9deg)}100%{opacity:0;transform:translateY(-34px) scaleX(.44) skewX(-5deg)}}

.ps-glow{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  width:clamp(104px,28vw,132px);height:clamp(18px,4.5vw,24px);border-radius:50%;
  background:radial-gradient(ellipse,rgba(210,120,40,.6) 0%,rgba(180,80,20,.22) 50%,transparent 100%);
  opacity:0;pointer-events:none;filter:blur(3px);
  animation:glB 1.4s ease 2.7s forwards,glP 2.2s ease-in-out 4.1s infinite;}
@keyframes glB{0%{opacity:0}60%{opacity:.9}100%{opacity:.65}}
@keyframes glP{0%,100%{opacity:.55;transform:translateX(-50%) scaleX(1)}50%{opacity:.85;transform:translateX(-50%) scaleX(1.10)}}

/* recipe card */
.ps-rcp{
  position:absolute;bottom:-9px;left:50%;
  width:min(298px,87vw);
  transform:translateX(-50%) translateY(58px);
  opacity:0;z-index:20;
  background:linear-gradient(148deg,rgba(14,12,10,.97),rgba(9,8,7,.97));
  border:1px solid rgba(200,130,58,.24);border-radius:19px;
  padding:16px 19px;display:flex;align-items:center;gap:14px;
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 20px 52px rgba(0,0,0,.62),0 5px 14px rgba(0,0,0,.36),0 0 32px rgba(180,90,30,.07);
  animation:rcpUp .72s var(--E1) 5.1s both;}
@keyframes rcpUp{to{opacity:1;transform:translateX(-50%) translateY(0)}}

.ri{width:44px;height:44px;border-radius:13px;flex-shrink:0;
  background:rgba(200,120,50,.10);border:1px solid rgba(200,120,50,.18);
  display:flex;align-items:center;justify-content:center;
  animation:iPop .5s var(--E1) 5.35s both;}
@keyframes iPop{from{transform:scale(.3) rotate(-22deg)}to{transform:scale(1) rotate(0)}}
.rb{flex:1;min-width:0;}
.rn{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
  font-size:clamp(15px,4vw,18px);color:var(--hi);letter-spacing:-.01em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rm{font-size:10px;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;font-weight:300;margin-top:4px;}
.rbtn{flex-shrink:0;width:32px;height:32px;border-radius:50%;
  background:rgba(200,120,50,.10);border:1px solid rgba(200,120,50,.22);
  color:var(--gold2);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .22s;animation:fadeIn .4s ease 5.5s both;}
.rbtn:hover{background:rgba(200,120,50,.20);border-color:rgba(200,120,50,.44);transform:scale(1.1);}

/* earned chips */
.earned{
  margin-top:clamp(18px,4.5vw,24px);
  display:flex;gap:7px;justify-content:center;flex-wrap:wrap;
  animation:fadeUp .6s var(--E1) 5.5s both;
}
.ec{background:rgba(114,184,122,.09);border:1px solid rgba(114,184,122,.20);
  border-radius:100px;padding:5px 12px;
  font-size:10.5px;color:var(--green);font-weight:300;letter-spacing:.04em;
  animation:ePop .4s var(--E3) both;}
.ec:nth-child(1){animation-delay:5.55s;}
.ec:nth-child(2){animation-delay:5.72s;}
.ec:nth-child(3){animation-delay:5.89s;}
@keyframes ePop{from{opacity:0;transform:translateY(7px) scale(.86)}to{opacity:1;transform:translateY(0) scale(1)}}

/* --------------- CONTROLS --------------- */
.controls{width:100%;max-width:440px;margin-top:clamp(16px,4vw,24px);display:flex;flex-direction:column;gap:8px;}

.btn-p{
  width:100%;padding:clamp(13px,3.3vw,16px) 22px;
  background:var(--accent, #52b82e);
  border:none;border-radius:15px;
  color:#fff;font-family:var(--font,'DM Sans',sans-serif);
  font-size:clamp(13px,3vw,15px);font-weight:700;letter-spacing:.01em;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;
  transition:all .22s var(--E2);box-shadow:0 4px 16px rgba(82,184,46,.22);
  min-height:48px;
}
.btn-p:hover{background:var(--accent2, #42a020);transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(82,184,46,.30);}
.btn-p:disabled{opacity:.45;cursor:not-allowed;transform:none;}

.btn-g{
  width:100%;padding:10px 22px;
  background:transparent;border:1.5px solid var(--ob-border);border-radius:13px;
  color:var(--mid);font-family:var(--font,'DM Sans',sans-serif);
  font-size:12px;font-weight:400;letter-spacing:.02em;
  cursor:pointer;transition:all .22s;
}
.btn-g:hover{background:var(--lo);color:var(--hi);border-color:var(--ob-border2);}


/* --------------- SMART NAV EINDE --------------- */
.smart-nav{
  width:100%;max-width:440px;
  margin-top:clamp(16px,4vw,22px);
  display:flex;flex-direction:column;gap:8px;
  animation:fadeUp .5s var(--E1) 5.9s both;
}
.btn-primary-nav{
  width:100%;padding:clamp(13px,3.3vw,16px) 22px;
  background:var(--accent, #52b82e);
  border:none;border-radius:15px;
  color:#fff;font-family:var(--font,'DM Sans',sans-serif);
  font-size:clamp(13px,3vw,15px);font-weight:700;letter-spacing:.01em;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;
  transition:all .22s var(--E2);box-shadow:0 4px 16px rgba(82,184,46,.22);
  min-height:48px;
}
.btn-primary-nav:hover{
  background:var(--accent2, #42a020);transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(82,184,46,.30);
}
.btn-overview-nav{
  width:100%;padding:clamp(11px,2.8vw,13px) 22px;
  background:var(--ob-panel);
  border:1.5px solid var(--ob-border);border-radius:13px;
  color:var(--mid);font-family:var(--font,'DM Sans',sans-serif);
  font-size:clamp(12px,2.8vw,13.5px);font-weight:400;letter-spacing:.02em;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .22s;
}
.btn-overview-nav:hover{
  background:var(--lo);border-color:var(--ob-border2);transform:translateY(-1px);
}
.alt-meal-row{
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:2px;
}
.btn-meal-alt{
  padding:6px 13px;border-radius:100px;
  background:rgba(255,255,255,.028);border:1px solid var(--border2);
  color:var(--mid);font-family:'DM Sans',sans-serif;
  font-size:11.5px;font-weight:300;cursor:pointer;transition:all .22s;
}
.btn-meal-alt:hover{background:rgba(255,255,255,.06);border-color:var(--border);color:var(--hi);}
.btn-meal-alt.current-meal{
  background:rgba(212,136,74,.10);border-color:rgba(212,136,74,.28);
  color:var(--amber);font-weight:400;
}

/* --------------- SCAN BEVESTIGING --------------- */
.scan-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(7,8,10,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 16px clamp(24px,6vw,44px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--E2);
}
.scan-overlay.open{opacity:1;pointer-events:all;}
.scan-card{
  width:100%;max-width:440px;
  background:linear-gradient(148deg,rgba(16,14,11,.98),rgba(10,9,7,.98));
  border:1px solid rgba(200,130,58,.20);border-radius:22px;
  padding:20px 18px 18px;
  box-shadow:0 24px 64px rgba(0,0,0,.70),0 0 40px rgba(180,90,30,.05);
  transform:translateY(28px);transition:transform .4s var(--E1);
}
.scan-overlay.open .scan-card{transform:translateY(0);}
.scan-head{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.scan-check{width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:rgba(114,184,122,.11);border:1px solid rgba(114,184,122,.22);
  display:flex;align-items:center;justify-content:center;}
.scan-title{font-size:13.5px;font-weight:400;color:var(--hi);}
.scan-sub{font-size:11px;color:var(--mid);font-weight:300;margin-top:1px;}
.scan-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px;}
.scan-tag{
  background:rgba(200,120,60,.09);border:1px solid rgba(200,120,60,.20);
  border-radius:8px;padding:4px 10px;
  font-size:11.5px;color:var(--gold2);font-weight:300;
  animation:tPop .26s var(--E3) both;
}
.scan-actions{display:flex;gap:8px;}
.scan-ok{
  flex:1;padding:11px;border-radius:11px;
  background:linear-gradient(148deg,rgba(114,184,122,.16),rgba(114,184,122,.07));
  border:1px solid rgba(114,184,122,.26);
  color:var(--green);font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:400;cursor:pointer;transition:all .22s;
}
.scan-ok:hover{background:linear-gradient(148deg,rgba(114,184,122,.24),rgba(114,184,122,.10));}
.scan-edit{
  padding:11px 15px;border-radius:11px;
  background:rgba(255,255,255,.038);border:1px solid var(--border2);
  color:var(--mid);font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:300;cursor:pointer;transition:all .22s;
}
.scan-edit:hover{color:var(--hi);}

@keyframes fadeUp{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}