@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

:root {
    --green:        #1a6b3c;
    --green-mid:    #2d9b5f;
    --green-light:  #e8f5ed;
    --green-pale:   #f4fbf7;
    --purple:       #7c3aed;
    --purple-light: #f5f3ff;
    --yellow:       #f9c22e;
    --blue:         #1d4ed8;
    --blue-light:   #eff6ff;
    --cream:        #fdf8f2;
    --white:        #ffffff;
    --grey:         #374151;
    --grey-mid:     #6b7280;
    --grey-light:   #f3f4f6;
    --border:       #e5e7eb;
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:    0 12px 40px rgba(0,0,0,0.13);
    --radius:       14px;
    --radius-sm:    8px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'DM Sans',sans-serif; background:var(--cream); color:var(--grey); min-height:100vh; overflow-x:hidden; }

/* ── Nav ── */
nav { position:fixed; top:0; left:0; right:0; z-index:200; background:rgba(255,255,255,0.95); backdrop-filter:blur(16px); border-bottom:1.5px solid var(--border); box-shadow:var(--shadow-sm); height:62px; display:flex; align-items:center; padding:0 2rem; gap:1rem; }
.nav-logo { font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.25rem; color:var(--green); display:flex; align-items:center; gap:0.4rem; white-space:nowrap; flex-shrink:0; }
.nav-links { display:flex; gap:0.25rem; list-style:none; }
.nav-links a { font-size:0.82rem; font-weight:500; color:var(--grey-mid); text-decoration:none; padding:0.42rem 0.9rem; border-radius:20px; cursor:pointer; transition:all 0.18s; white-space:nowrap; }
.nav-links a:hover  { background:var(--green-light); color:var(--green); }
.nav-links a.active { background:var(--green); color:#fff; font-weight:600; }
.demo-tab-link { background:var(--purple-light) !important; color:var(--purple) !important; font-weight:700 !important; }
.demo-tab-link:hover  { background:var(--purple) !important; color:#fff !important; }
.demo-tab-link.active { background:var(--purple) !important; color:#fff !important; }
#nav-logout { font-size:0.8rem; font-weight:600; color:var(--grey-mid); background:var(--grey-light); border:none; padding:0.38rem 0.9rem; border-radius:20px; cursor:pointer; transition:all 0.18s; display:none; }
#nav-logout:hover { background:var(--blue-light); color:var(--blue); }

/* ── Pages ── */
.page { display:none; min-height:100vh; padding-top:62px; }
.page.active { display:block; animation:fadeUp 0.3s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── Hero ── */
.hero { background:linear-gradient(145deg,var(--green) 0%,#1d8c4e 55%,#25a660 100%); position:relative; overflow:hidden; padding:4.5rem 2rem 5rem; text-align:center; }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 10% 80%,rgba(249,194,46,0.18) 0%,transparent 40%),radial-gradient(circle at 90% 20%,rgba(255,255,255,0.10) 0%,transparent 35%); pointer-events:none; }
.hero-produce-row { font-size:2rem; margin-bottom:1.25rem; display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; animation:bounce 3s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.hero-tag { display:inline-flex; align-items:center; gap:0.4rem; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); color:rgba(255,255,255,0.92); font-size:0.75rem; font-weight:500; letter-spacing:0.06em; padding:0.3rem 0.9rem; border-radius:20px; margin-bottom:1.25rem; }
.hero-title { font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(2.4rem,7vw,4.2rem); color:#fff; line-height:1.1; margin-bottom:0.5rem; text-shadow:0 2px 20px rgba(0,0,0,0.2); }
.hero-title em { font-style:normal; color:var(--yellow); }
.hero-subtitle { font-size:clamp(0.95rem,2vw,1.1rem); color:rgba(255,255,255,0.85); max-width:580px; margin:0 auto 2.5rem; line-height:1.7; font-weight:400; }
.hero-btns { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; }

/* ── Buttons ── */
.btn { font-family:'DM Sans',sans-serif; font-size:0.9rem; font-weight:600; padding:0.72rem 1.6rem; border:none; cursor:pointer; border-radius:100px; transition:all 0.18s; display:inline-flex; align-items:center; gap:0.4rem; text-decoration:none; }
.btn-sm { font-size:0.8rem; padding:0.5rem 1.1rem; }
.btn:disabled { opacity:0.45; cursor:not-allowed; transform:none !important; }
.btn-white        { background:#fff; color:var(--green); box-shadow:var(--shadow-md); }
.btn-white:hover  { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-green        { background:var(--green); color:#fff; box-shadow:var(--shadow-md); }
.btn-green:hover  { background:#155c33; transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-purple       { background:var(--purple); color:#fff; box-shadow:var(--shadow-md); }
.btn-purple:hover { background:#6d28d9; transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-yellow       { background:var(--yellow); color:#2c1800; box-shadow:var(--shadow-md); }
.btn-yellow:hover { background:#f0b81a; transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-outline-white       { background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.6); }
.btn-outline-white:hover { background:rgba(255,255,255,0.12); border-color:#fff; }
.btn-outline-green       { background:transparent; color:var(--green); border:2px solid var(--green); }
.btn-outline-green:hover { background:var(--green-light); }

/* ── Info strip ── */
.info-strip { background:var(--green); padding:3rem 2rem; position:relative; overflow:hidden; }
.info-strip::before { content:'🥦 🍋 🍎 🥕 🫑 🍅 🧅 🥬'; position:absolute; font-size:3rem; opacity:0.07; top:-10px; left:-20px; right:-20px; letter-spacing:0.5rem; line-height:1.2; white-space:nowrap; overflow:hidden; }
.info-strip-inner { max-width:920px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; position:relative; }
.info-tile { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:var(--radius); padding:1.25rem; text-align:center; }
.info-tile-num { font-family:'Fredoka',sans-serif; font-weight:700; font-size:2.2rem; color:var(--yellow); line-height:1; margin-bottom:0.25rem; }
.info-tile-label { font-size:0.82rem; color:rgba(255,255,255,0.8); line-height:1.4; }

/* ── Sections ── */
.section { max-width:920px; margin:0 auto; padding:3.5rem 1.5rem; }
.section-tag { font-size:0.7rem; font-weight:700; letter-spacing:0.12em; color:var(--green-mid); text-transform:uppercase; margin-bottom:0.6rem; display:flex; align-items:center; gap:0.5rem; }
.section-tag::before { content:''; display:inline-block; width:18px; height:2px; background:var(--green-mid); border-radius:2px; }
.section-title { font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(1.5rem,3.5vw,2rem); color:var(--green); margin-bottom:0.5rem; }
.section-desc { font-size:1rem; color:var(--grey-mid); line-height:1.7; max-width:600px; margin-bottom:2rem; }
.steps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-top:1.5rem; }
.step-card { background:var(--white); border-radius:var(--radius); padding:1.5rem 1.25rem; box-shadow:var(--shadow-sm); border:1.5px solid var(--border); transition:transform 0.2s,box-shadow 0.2s; }
.step-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.step-num   { font-family:'Fredoka',sans-serif; font-size:2rem; font-weight:700; color:var(--green-light); margin-bottom:0.5rem; }
.step-icon  { font-size:1.6rem; margin-bottom:0.5rem; display:block; }
.step-title { font-family:'Fredoka',sans-serif; font-weight:600; font-size:1rem; color:var(--green); margin-bottom:0.4rem; }
.step-desc  { font-size:0.85rem; color:var(--grey-mid); line-height:1.55; }
.abstract-card { background:var(--white); border-radius:var(--radius); padding:2rem; border-left:5px solid var(--green-mid); box-shadow:var(--shadow-sm); font-size:0.95rem; line-height:1.75; color:var(--grey); }

/* ── PDF banner ── */
.pdf-banner { background:linear-gradient(135deg,#f0f9ff,#f5f3ff); border:1.5px solid #a5b4fc; border-radius:var(--radius); padding:1.25rem 1.5rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:space-between; margin-bottom:1.25rem; }
.pdf-banner-text { font-size:0.88rem; color:var(--grey); line-height:1.5; }
.pdf-banner-text strong { color:#3730a3; }

/* ── Inner pages ── */
.inner-wrap { max-width:760px; margin:0 auto; padding:3rem 1.5rem 4rem; }
.page-header { margin-bottom:2.5rem; padding-bottom:1.5rem; border-bottom:1.5px solid var(--border); }
.step-indicator { font-size:0.72rem; font-weight:700; letter-spacing:0.12em; color:var(--green-mid); text-transform:uppercase; margin-bottom:0.6rem; }
.page-title { font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(1.6rem,4vw,2.2rem); color:var(--green); margin-bottom:0.5rem; }
.page-desc { font-size:0.95rem; color:var(--grey-mid); line-height:1.7; max-width:580px; }
.card { background:var(--white); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm); border:1.5px solid var(--border); margin-bottom:1.25rem; }
.card-title { font-family:'Fredoka',sans-serif; font-weight:600; font-size:1rem; color:var(--green); margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem; }
.status-row { display:flex; align-items:center; gap:0.65rem; font-size:0.88rem; color:var(--grey-mid); }
.dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.dot.green { background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,0.15); }
.dot.amber { background:var(--yellow); box-shadow:0 0 0 3px rgba(249,194,46,0.2); animation:pulse 1.4s ease-in-out infinite; }
.dot.blue  { background:var(--blue);  box-shadow:0 0 0 3px rgba(29,78,216,0.15); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── Code inputs ── */
.code-wrap { display:flex; gap:0.75rem; align-items:flex-start; flex-wrap:wrap; margin:1.25rem 0; }
.code-input { font-family:'Fredoka',sans-serif; font-size:1.6rem; font-weight:700; letter-spacing:0.25em; background:var(--grey-light); border:2px solid var(--border); color:var(--green); padding:0.5rem 1rem; width:200px; text-align:center; border-radius:var(--radius-sm); outline:none; transition:all 0.18s; }
.code-input:focus { border-color:var(--green-mid); background:var(--green-pale); box-shadow:0 0 0 3px rgba(45,155,95,0.15); }
.code-input.error { border-color:var(--blue); background:var(--blue-light); animation:shake 0.3s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.code-hint { font-size:0.78rem; color:var(--grey-mid); margin-top:0.35rem; }
.msg { font-size:0.85rem; margin-top:0.6rem; font-weight:500; }
.msg.ok  { color:#16a34a; }
.msg.err { color:var(--blue); }

/* ── Game frame ── */
#game-frame-wrap { width:100%; aspect-ratio:16/9; background:#111; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); border:2px solid var(--border); position:relative; }
#game-frame-wrap iframe { width:100%; height:100%; border:none; display:block; }
#fullscreen-btn { position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.55); color:#fff; border:none; border-radius:8px; padding:0.45rem 0.85rem; font-family:'DM Sans',sans-serif; font-size:0.8rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:0.4rem; backdrop-filter:blur(4px); z-index:10; transition:background 0.18s; }
#fullscreen-btn:hover { background:rgba(0,0,0,0.8); }
.timer-pill { display:inline-flex; align-items:center; gap:0.5rem; background:var(--green-light); border:1.5px solid #a7d7b8; padding:0.35rem 0.9rem; border-radius:20px; font-family:'Fredoka',sans-serif; font-size:1rem; font-weight:600; color:var(--green); }

/* ── Locked states ── */
.locked-body { display:flex; flex-direction:column; align-items:center; padding:3.5rem 2rem; text-align:center; gap:1.25rem; }
.lock-icon { font-size:3rem; opacity:0.35; }
.locked-title { font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.3rem; color:var(--grey); }
.locked-desc { font-size:0.9rem; color:var(--grey-mid); line-height:1.6; max-width:340px; }
.divider { height:1.5px; background:var(--border); margin:1.5rem 0; }

/* ── Finish banner ── */
.finish-banner { background:var(--purple-light); border:1.5px solid #a5b4fc; border-radius:var(--radius); padding:1.25rem 1.5rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:space-between; margin-top:1.25rem; }
.finish-banner-text { font-size:0.9rem; color:var(--grey); line-height:1.5; }
.finish-banner-text strong { color:var(--purple); }
.code-verify-box { background:var(--green-pale); border:1.5px solid #a7d7b8; border-radius:var(--radius); padding:1.5rem; margin-top:1.5rem; }
.code-verify-box .box-title { font-family:'Fredoka',sans-serif; font-weight:600; font-size:1rem; color:var(--green); margin-bottom:0.5rem; }
.code-verify-box .box-desc { font-size:0.85rem; color:var(--grey-mid); line-height:1.6; margin-bottom:1rem; }

/* ── Modals ── */
.modal-bd { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(6px); z-index:1000; align-items:center; justify-content:center; padding:1rem; }
.modal-bd.open { display:flex; }
.modal { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-lg); width:100%; max-width:700px; max-height:90vh; display:flex; flex-direction:column; animation:mopen 0.25s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes mopen { from{opacity:0;transform:scale(0.93)} to{opacity:1;transform:scale(1)} }
.modal-hdr { padding:1rem 1.25rem; border-bottom:1.5px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.modal-title { font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.05rem; color:var(--green); display:flex; align-items:center; gap:0.4rem; }
.modal-close { background:var(--grey-light); border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:1rem; color:var(--grey-mid); display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.modal-close:hover { background:var(--blue-light); color:var(--blue); }
.modal-body { flex:1; overflow:hidden; min-height:500px; }
.modal-body iframe { width:100%; height:100%; min-height:500px; border:none; display:block; }

/* ── Produce strip / footer ── */
.produce-strip { background:var(--yellow); padding:0.6rem; text-align:center; font-size:1.3rem; letter-spacing:0.2rem; overflow:hidden; white-space:nowrap; animation:marquee 20s linear infinite; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
footer { background:var(--green); color:rgba(255,255,255,0.75); text-align:center; padding:2rem; font-size:0.82rem; line-height:1.8; }
footer strong { color:#fff; }

/* ── Demo page ── */
.demo-hero { background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 55%,#a78bfa 100%); padding:3rem 2rem 3.5rem; text-align:center; position:relative; overflow:hidden; }
.demo-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 80%,rgba(255,255,255,0.15) 0%,transparent 40%); pointer-events:none; }
.demo-hero-eyebrow { display:inline-flex; align-items:center; gap:0.4rem; background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.4); color:rgba(255,255,255,0.95); font-size:0.75rem; font-weight:600; letter-spacing:0.08em; padding:0.3rem 0.9rem; border-radius:20px; margin-bottom:1rem; }
.demo-hero-title { font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(2rem,6vw,3.5rem); color:#fff; text-shadow:0 2px 16px rgba(0,0,0,0.15); margin-bottom:0.4rem; }
.demo-hero-sub { font-size:1rem; color:rgba(255,255,255,0.9); }
.demo-wrap { max-width:900px; margin:0 auto; padding:0 1.5rem 4rem; }
.demo-panel { margin-top:2.5rem; }
.demo-panel-hdr { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.25rem; padding-bottom:1rem; border-bottom:1.5px solid var(--border); }
.demo-panel-icon { font-size:2rem; line-height:1; flex-shrink:0; margin-top:2px; }
.demo-panel-title { font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.4rem; color:var(--green); margin-bottom:0.2rem; }
.demo-panel-desc { font-size:0.88rem; color:var(--grey-mid); line-height:1.5; }
.demo-game-wrap { width:100%; aspect-ratio:16/9; background:#111; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); border:2px solid var(--border); position:relative; }
.demo-game-wrap iframe { width:100%; height:100%; border:none; display:block; }
.demo-game-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.6); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; transition:opacity 0.3s; }
.demo-game-overlay.gone { opacity:0; pointer-events:none; }
.demo-play-btn { background:var(--yellow); color:#2c1800; font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.3rem; padding:0.85rem 2.5rem; border:none; border-radius:100px; cursor:pointer; box-shadow:0 4px 20px rgba(0,0,0,0.3); transition:transform 0.18s; }
.demo-play-btn:hover { transform:scale(1.06); }
.demo-play-sub { color:rgba(255,255,255,0.8); font-size:0.88rem; }
#demo-fs-btn { position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.55); color:#fff; border:none; border-radius:8px; padding:0.45rem 0.85rem; font-family:'DM Sans',sans-serif; font-size:0.8rem; font-weight:600; cursor:pointer; backdrop-filter:blur(4px); z-index:10; transition:background 0.18s; display:none; }
#demo-fs-btn:hover { background:rgba(0,0,0,0.8); }

/* ── Quiz ── */
.allergen-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:0.65rem; margin-bottom:1.25rem; }
.a-item { display:flex; align-items:center; gap:0.7rem; background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:0.65rem 0.9rem; cursor:pointer; transition:all 0.15s; user-select:none; }
.a-item:hover { border-color:var(--green-mid); background:var(--green-pale); }
.a-item.sel { border-color:var(--green); background:var(--green-light); }
.a-item.sel .a-chk { background:var(--green); border-color:var(--green); color:#fff; }
.a-item.r-correct { border-color:#16a34a !important; background:#dcfce7 !important; pointer-events:none; }
.a-item.r-wrong   { border-color:#0369a1 !important; background:#e0f2fe !important; pointer-events:none; }
.a-item.r-missed  { border-color:var(--purple) !important; background:var(--purple-light) !important; pointer-events:none; }
.a-chk { width:20px; height:20px; border-radius:5px; border:2px solid var(--border); background:var(--grey-light); display:flex; align-items:center; justify-content:center; font-size:0.72rem; flex-shrink:0; transition:all 0.15s; }
.a-label { font-size:0.9rem; font-weight:500; color:var(--grey); flex:1; }
.quiz-foot { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.quiz-count { font-size:0.85rem; color:var(--grey-mid); }

/* ── Quiz results ── */
#quiz-results { display:none; margin-top:1.5rem; }
.score-row { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.big-score { font-family:'Fredoka',sans-serif; font-weight:700; font-size:3.5rem; color:var(--green); line-height:1; }
.score-meta { font-size:0.9rem; color:var(--grey-mid); line-height:1.6; }
.score-meta strong { color:var(--grey); }
.chart-wrap { margin:1.25rem 0; }
.chart-title { font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey-mid); margin-bottom:0.75rem; }
.legend-row { display:flex; gap:1.25rem; font-size:0.78rem; color:var(--grey-mid); margin-bottom:0.75rem; }
.l-dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:0.3rem; }
.bar-row { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.55rem; }
.bar-label { font-size:0.82rem; color:var(--grey); width:110px; flex-shrink:0; text-align:right; }
.bar-track { flex:1; background:var(--grey-light); border-radius:20px; height:24px; overflow:hidden; }
.bar-fill { height:100%; border-radius:20px; transition:width 1.1s cubic-bezier(0.4,0,0.2,1); display:flex; align-items:center; padding-left:10px; font-size:0.75rem; font-weight:700; color:#fff; }
.bar-fill.you { background:var(--green); }
.bar-fill.avg { background:var(--purple); }
.bar-pct { font-size:0.82rem; font-weight:700; color:var(--grey); width:36px; }
#result-msg { border-radius:var(--radius); padding:1.25rem 1.5rem; margin-top:1rem; font-size:0.95rem; line-height:1.6; }

/* ── Effects ── */
#celeb-canvas { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9999; display:none; }
#unicorn-stage { position:fixed; bottom:0; left:0; width:100%; pointer-events:none; z-index:9998; display:none; overflow:hidden; height:150px; }
.u-uni  { position:absolute; bottom:0;    left:-220px; font-size:5rem;   animation:urun 5.5s linear forwards; }
.u-cart { position:absolute; bottom:5px;  left:-145px; font-size:3.5rem; animation:urun 5.5s linear 0.2s forwards; }
.u-flag { position:absolute; bottom:65px; left:-105px; font-size:2rem;   animation:urun 5.5s linear 0.08s forwards; }
@keyframes urun { 0%{left:-220px} 100%{left:110vw} }
#unicorn-msg { position:fixed; bottom:160px; left:50%; transform:translateX(-50%); background:var(--white); border:2px solid var(--purple); border-radius:var(--radius); padding:1rem 1.75rem; box-shadow:var(--shadow-lg); font-family:'Fredoka',sans-serif; font-size:1.1rem; color:var(--purple); text-align:center; z-index:9999; display:none; white-space:nowrap; animation:msgpop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes msgpop { from{opacity:0;transform:translateX(-50%) scale(0.7)} to{opacity:1;transform:translateX(-50%) scale(1)} }

/* ── Responsive ── */
@media(max-width:640px) {
    .nav-links { display:none; }
    .steps-grid { grid-template-columns:1fr; }
    .info-strip-inner { grid-template-columns:1fr 1fr; }
    .allergen-grid { grid-template-columns:1fr 1fr; }
    .bar-label { width:70px; font-size:0.75rem; }
}