@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');
:root { --ink:#2f2924; --muted:#756c63; --cream:#f8f3e9; --paper:#fffdf8; --line:#e7ddd0; --terracotta:#a95b42; --terracotta-dark:#7f4632; --sage:#687d68; --mustard:#d49a50; --shadow:0 20px 60px rgba(67,42,25,.10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:'DM Sans',system-ui,sans-serif; font-size:16px; line-height:1.55; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.18; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); }
button,input,textarea,select { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid rgba(212,154,80,.55); outline-offset:2px; }
.site-header { position:sticky; top:0; z-index:5; background:rgba(248,243,233,.88); backdrop-filter:blur(16px); border-bottom:1px solid rgba(231,221,208,.75); }
.header-inner,.page-shell { width:min(1160px,calc(100% - 48px)); margin:auto; }
.header-inner { height:78px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }.brand-mark { width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--terracotta);color:#fff8ed;font-size:22px; }.brand strong,.brand small { display:block; }.brand strong { font:600 17px/1 'Fraunces',serif; }.brand small { margin-top:5px;color:var(--muted);font-size:11px;letter-spacing:.04em; }.header-actions{display:flex;align-items:center;gap:18px}.ghost-button,.text-button,.secondary-button,.icon-button { background:none;border:0;color:var(--terracotta-dark);font-weight:600; }.ghost-button { color:var(--muted);font-size:14px; }.avatar-button{width:40px;height:40px;border:1px solid var(--line);background:var(--paper);border-radius:50%;color:var(--terracotta-dark);font-weight:700;}.page-shell{padding:65px 0 100px}.welcome-row{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:38px}.eyebrow{margin:0 0 8px;color:var(--terracotta);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.welcome-row h1,.login-card h1{font:500 clamp(34px,4.5vw,58px)/1.05 'Fraunces',serif;margin:0;letter-spacing:-.035em}.welcome-row h1 em,.login-card h1 em{font-style:italic;color:var(--terracotta)}h2,h3{font-family:'Fraunces',serif;font-weight:500;letter-spacing:-.02em;margin:0}h2{font-size:30px}.primary-button,.secondary-button,.light-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:99px;padding:13px 20px;border:1px solid transparent;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s}.primary-button{background:var(--terracotta);color:#fffaf1;box-shadow:0 8px 22px rgba(169,91,66,.22)}.primary-button:hover,.secondary-button:hover,.light-button:hover{transform:translateY(-2px)}.primary-button span,.light-button span{font-size:20px;line-height:0}.primary-button.compact{padding:11px 17px;font-size:14px}.secondary-button{border-color:var(--line);background:var(--paper);color:var(--ink)}.hero-card{min-height:278px;display:grid;grid-template-columns:1.1fr .9fr;overflow:hidden;border-radius:25px;background:var(--terracotta-dark);color:#fff9ef;box-shadow:var(--shadow);position:relative}.hero-copy{padding:42px 48px;position:relative;z-index:1}.recipe-ribbon{display:inline-block;background:#d49a50;color:#fffaf1;padding:5px 12px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.06em}.hero-copy h2{font-size:46px;line-height:1.05;margin:18px 0 10px}.hero-copy p{max-width:390px;color:#f7dac4;margin:0 0 26px}.light-button{background:#fff8eb;color:var(--terracotta-dark);padding:11px 17px;font-size:14px}.hero-illustration{position:relative;display:grid;place-items:center;background:radial-gradient(circle at 40% 40%,#bc7452 0 16%,transparent 17%),linear-gradient(135deg,#a95b42,#713d2d)}.hero-illustration:after{content:'';position:absolute;width:250px;height:250px;border:1px solid rgba(255,246,226,.2);border-radius:50%;transform:rotate(17deg)}.sun{position:absolute;top:30px;right:55px;font-size:54px;color:#efc77d}.cake{font-size:110px;filter:drop-shadow(0 15px 15px rgba(47,25,14,.22));z-index:1}.steam{position:absolute;font:60px/1 'Fraunces',serif;color:#f9d5b9;transform:rotate(18deg);opacity:.7}.steam-a{top:45px;left:34%}.steam-b{top:20px;left:48%;transform:rotate(-10deg)}.search-row{display:flex;gap:12px;margin:34px 0 14px}.search-box{height:58px;display:flex;align-items:center;gap:12px;flex:1;background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:0 18px;box-shadow:0 5px 18px rgba(67,42,25,.03)}.search-box>span{font-size:28px;color:var(--terracotta)}.search-box input{border:0;background:none;outline:0;min-width:0;width:100%;font-size:17px;color:var(--ink)}.search-box input::placeholder{color:#a59b90}.search-box kbd{color:#a59b90;border:1px solid var(--line);border-radius:5px;padding:2px 6px;font-size:11px}.filter-button{border:1px solid var(--line);background:transparent;border-radius:15px;padding:0 18px;color:var(--ink);font-weight:600}.filters{display:flex;align-items:end;justify-content:space-between;padding:15px 18px;background:#f1eadd;border-radius:14px;margin-bottom:34px}.filter-label{display:block;color:var(--muted);font-size:12px;margin-bottom:9px}.chip-row{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:var(--paper);color:var(--muted);border-radius:99px;padding:6px 12px;font-size:13px}.chip.active{background:var(--terracotta);border-color:var(--terracotta);color:white}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:45px 0 18px}.count-badge{background:#e9dfd0;color:var(--muted);border-radius:99px;padding:5px 11px;font-size:12px}.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.recipe-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;min-height:265px;transition:transform .2s,box-shadow .2s}.recipe-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.card-top{height:90px;padding:18px 20px;position:relative;background:var(--card-color,#e7c5a2);}.card-emoji{font-size:37px;filter:drop-shadow(0 4px 4px rgba(48,28,13,.13))}.card-category{position:absolute;right:16px;top:17px;border-radius:99px;background:rgba(255,255,255,.6);padding:4px 9px;color:#704f3d;font-size:10px;font-weight:700}.recipe-card-body{padding:18px 20px 16px;display:flex;flex-direction:column;flex:1}.recipe-card h3{font-size:22px;line-height:1.1;margin-bottom:8px}.recipe-card p{font-size:14px;color:var(--muted);margin:0}.card-meta{display:flex;gap:16px;margin-top:auto;padding-top:18px;color:#8c8177;font-size:12px}.empty-state{text-align:center;padding:60px;color:var(--muted)}.empty-state span{font-size:40px}.empty-state h3{font-size:25px;color:var(--ink)}.empty-state p{margin:4px 0}.modal-backdrop{position:fixed;inset:0;background:rgba(45,33,26,.48);z-index:20;padding:30px;overflow:auto}.recipe-modal{background:var(--paper);max-width:720px;margin:auto;border-radius:24px;padding:38px 44px;position:relative;box-shadow:0 30px 90px rgba(27,15,9,.22)}.modal-close,.icon-button{position:absolute;right:22px;top:18px;border:0;background:none;font-size:30px;color:var(--muted)}.modal-hero{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:24px}.modal-hero h2{font-size:43px;line-height:1.03;margin:6px 0 10px}.modal-hero p{color:var(--muted);margin:0}.modal-stats{display:flex;gap:16px;color:var(--muted);font-size:13px;white-space:nowrap}.modal-columns{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px}.modal-columns h3{font-size:23px;margin-bottom:13px}.ingredient-list,.step-list{padding:0;margin:0;list-style:none}.ingredient-list li{padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px}.step-list{counter-reset:steps}.step-list li{counter-increment:steps;display:grid;grid-template-columns:29px 1fr;gap:10px;margin-bottom:15px;font-size:14px}.step-list li:before{content:counter(steps);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eed9be;color:var(--terracotta-dark);font-size:12px;font-weight:700}.modal-notes{margin-top:28px;background:#f1eadd;padding:16px;border-radius:12px;font-size:14px;color:var(--muted)}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:26px}.login-screen,.invite-screen{min-height:70vh;display:grid;grid-template-columns:1fr 300px;align-items:center;gap:80px;max-width:850px;margin:auto}.login-card{max-width:480px}.lead{font-size:18px;color:var(--muted);max-width:480px;margin:20px 0 28px}.stack-form{display:grid;gap:15px}.stack-form label,.mini-form label{display:grid;gap:6px;font-size:13px;color:var(--muted);font-weight:600}.stack-form input,.mini-form input,.mini-form select,.import-panel textarea{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:12px 13px;color:var(--ink);outline:0}.stack-form input:focus,.mini-form input:focus,.mini-form select:focus,.import-panel textarea:focus{border-color:var(--terracotta)}.form-error{color:#a33e34;font-size:13px;margin:0;min-height:18px}.demo-login{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:17px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.text-button{padding:0;color:var(--terracotta);font-size:13px}.login-note{background:#eadcc7;padding:28px;border-radius:20px;transform:rotate(2deg);color:#684b3a}.login-note strong{display:block;font-family:'Fraunces',serif;font-size:23px;margin-top:10px}.login-note p{font-size:14px;margin-bottom:0}.note-icon{font-size:34px}.manage-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}.manage-card,.import-panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:28px}.card-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}.card-title h2{font-size:27px}.soft-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#f0e4d2;color:var(--terracotta);font-size:24px}.user-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:15px 0;border-bottom:1px solid var(--line)}.user-row strong{display:block}.user-row small{display:block;color:var(--muted);font-size:12px}.user-controls{display:flex;align-items:center;gap:10px}.role-pill{font-size:11px;color:var(--terracotta-dark);background:#f2e5d4;border-radius:99px;padding:4px 8px}.contribute-check{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px}.invite-form-wrap{margin-top:28px;padding-top:23px;border-top:1px solid var(--line)}.mini-form{display:grid;gap:13px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.check-label{align-self:end;display:flex!important;align-items:center;gap:7px;height:44px}.check-label input{width:auto}.maintenance-list{display:grid;gap:2px}.maintenance-item{display:flex;align-items:center;gap:13px;padding:14px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:var(--ink);width:100%}.maintenance-item>span:nth-child(2){flex:1}.maintenance-item strong,.maintenance-item small{display:block}.maintenance-item strong{font-size:14px}.maintenance-item small{color:var(--muted);font-size:12px}.maintenance-item b{color:var(--terracotta);font-size:18px}.maintenance-item.static{cursor:default}.item-icon{width:30px;height:30px;display:grid;place-items:center;background:#f0e4d2;color:var(--terracotta);border-radius:50%;font-weight:700}.share-links-panel{border-top:1px solid var(--line);margin-top:24px;padding-top:22px}.share-link-row{padding:8px 0;font-size:12px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:8px}.share-link-row small{display:block;color:var(--muted)}.import-panel{margin-top:20px;position:relative}.import-panel .card-title{margin-bottom:8px}.muted{color:var(--muted);font-size:14px}.import-panel textarea{margin-top:12px;min-height:180px;resize:vertical}.import-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}.import-preview{margin-top:18px}.preview-row{padding:12px;border:1px solid var(--line);border-radius:10px;margin-top:7px;font-size:13px}.preview-row.ok{border-color:#a8bea2;background:#f3f8f0}.preview-row.bad{border-color:#e4a9a1;background:#fff4f1}.success-note{color:var(--sage);font-size:12px;overflow-wrap:anywhere}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,120px);background:#302821;color:#fff7ec;padding:12px 18px;border-radius:99px;z-index:30;font-size:13px;transition:transform .25s}.toast.show{transform:translate(-50%,0)}
@media(max-width:800px){.header-inner,.page-shell{width:min(100% - 30px,600px)}.page-shell{padding-top:38px}.header-inner{height:68px}.ghost-button{display:none}.welcome-row{display:block}.welcome-row .primary-button,.welcome-row .secondary-button{margin-top:20px}.hero-card{grid-template-columns:1fr;min-height:420px}.hero-copy{padding:32px}.hero-copy h2{font-size:39px}.hero-illustration{min-height:150px}.recipe-grid{grid-template-columns:repeat(2,1fr)}.login-screen,.invite-screen{display:block;min-height:auto;padding-top:38px}.login-note{margin:45px 10px 0}.manage-grid{grid-template-columns:1fr}.modal-backdrop{padding:10px}.recipe-modal{padding:32px 22px}.modal-hero{display:block}.modal-stats{margin-top:14px}.modal-columns{grid-template-columns:1fr;gap:26px}.form-grid{grid-template-columns:1fr}.import-actions{display:grid}.share-link-row{display:block}.share-link-row button{margin-top:6px}}
@media(max-width:480px){.recipe-grid{grid-template-columns:1fr}.search-row{gap:8px}.filter-button{padding:0 12px}.filter-button span{display:none}.section-heading{margin-top:34px}.hero-copy h2{font-size:35px}.header-actions{gap:0}.brand strong{font-size:15px}.brand small{font-size:10px}.brand-mark{width:34px;height:34px}.login-card h1{font-size:42px}}
@media print{.site-header,.search-row,.filters,.welcome-row,.hero-card,.section-heading,.recipe-card:not(.print-target),.modal-actions{display:none!important}.page-shell{width:100%;padding:0}.modal-backdrop{position:static;background:none;padding:0}.recipe-modal{box-shadow:none;max-width:none;padding:0}.modal-close{display:none}}
@media print{body.printing-recipe> :not(#recipe-modal){display:none!important}body.printing-recipe #recipe-modal{display:block!important;position:static;background:none;padding:0;overflow:visible}body.printing-recipe #recipe-modal .recipe-modal{display:block!important;box-shadow:none;max-width:none;padding:0;margin:0}body.printing-recipe #recipe-modal .modal-close,body.printing-recipe #recipe-modal .modal-actions{display:none!important}}

/* Oma's lievelingskleuren: helder diep blauw en fris, rustig groen. */
:root { --ink:#17263a; --muted:#5d6f7f; --line:#d7e2e5; --terracotta:#0757c9; --terracotta-dark:#063575; --sage:#2f8b55; --mustard:#7fc96c; --shadow:0 20px 60px rgba(6,53,117,.13); }
.site-header { background:rgba(246,250,249,.90); border-bottom-color:rgba(190,211,219,.8); }
.hero-card { background:var(--terracotta-dark); }
.recipe-ribbon { background:var(--mustard); color:#103d29; }
.hero-copy p { color:#d8e9ff; }
.hero-illustration { background:radial-gradient(circle at 40% 40%,#44a764 0 16%,transparent 17%),linear-gradient(135deg,#0757c9,#063575); }
.sun { color:#a9e28f; }
.steam { color:#cbeed5; }
.filters { background:#e7f1ff; }
.chip.active { background:var(--terracotta); border-color:var(--terracotta); }
.card-category { color:var(--terracotta-dark); }
.step-list li:before { background:#d9f0dc; color:#24613d; }
.modal-notes { background:#e7f4e8; }
.login-note { background:#dff1e2; color:#245b3d; }
.soft-icon,.item-icon { background:#e1f1e5; color:var(--sage); }
.role-pill { color:var(--terracotta-dark); background:#e3edff; }
.toast { background:var(--terracotta-dark); }
.advanced-filter-controls { display:flex; align-items:end; gap:14px; flex-wrap:wrap; margin-left:18px; }
.advanced-filter-controls label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:600; }
.advanced-filter-controls select { min-width:132px; border:1px solid var(--line); background:var(--paper); border-radius:9px; padding:7px 9px; color:var(--ink); font-size:13px; }
.advanced-filter-controls > div { min-width:180px; }
@media(max-width:800px){.advanced-filter-controls{margin:16px 0 0; width:100%;}.filters{display:block}.advanced-filter-controls select{min-width:140px;}}
@media(max-width:480px){.advanced-filter-controls{display:grid;grid-template-columns:1fr 1fr}.advanced-filter-controls > div{grid-column:1/-1}.advanced-filter-controls select{min-width:0;width:100%;}}
.planner-actions { display:flex; gap:10px; margin-right:10px; }
.planner-modal { background:var(--paper); max-width:850px; margin:auto; border-radius:24px; padding:40px 46px; position:relative; box-shadow:0 30px 90px rgba(6,53,117,.22); }
.planner-heading { border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:22px; }.planner-heading h2 { font-size:42px; line-height:1.05; margin:4px 0 9px; }.planner-heading h2 em { color:var(--terracotta); font-style:italic; }.planner-heading p { margin-bottom:0; }
.planner-list,.festive-list { display:grid; gap:10px; }.planner-row,.festive-row { display:grid; grid-template-columns:190px 1fr; align-items:center; gap:18px; padding:12px 0; border-bottom:1px solid var(--line); }.planner-day,.course-copy { font-weight:700; }.planner-day small,.course-copy small { display:block; color:var(--muted); font-size:12px; font-weight:400; }.planner-row select,.festive-row select { width:100%; border:1px solid var(--line); background:#f7fbff; border-radius:10px; padding:12px; color:var(--ink); }.course-mark { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#e1f1e5; color:var(--sage); }.festive-row { grid-template-columns:36px 175px 1fr; }.planner-actions-bottom { display:flex; justify-content:flex-end; gap:10px; margin-top:26px; }.printing-planner .site-header,.printing-planner .page-shell,.printing-planner .modal-backdrop:not(#planner-modal) { visibility:hidden!important; }.printing-planner #planner-modal { visibility:visible!important; position:static; background:none; padding:0; overflow:visible; }.printing-planner #planner-modal .planner-modal,.printing-planner #planner-modal .planner-modal * { visibility:visible!important; }.printing-planner #planner-modal .planner-modal { box-shadow:none; max-width:none; padding:0; }.printing-planner #planner-modal .modal-close,.printing-planner #planner-modal .planner-actions-bottom { display:none; }
@media(max-width:800px){.planner-actions{margin:18px 0 0}.welcome-row .planner-actions{display:flex}.planner-modal{padding:32px 22px}.planner-heading h2{font-size:34px}.planner-row,.festive-row{grid-template-columns:1fr;gap:8px}.festive-row{grid-template-columns:36px 1fr}.festive-row select{grid-column:1/-1}.planner-actions-bottom{display:grid}.planner-actions-bottom .primary-button,.planner-actions-bottom .secondary-button{width:100%;}}
.recipe-credit,.modal-credit { display:block; color:var(--muted); font-size:11px; margin-top:8px; }
.modal-credit { margin-top:10px; }
.week-preferences { display:grid; gap:20px; padding-bottom:24px; border-bottom:1px solid var(--line); }.preference-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.week-preferences label { display:grid; gap:7px; color:var(--muted); font-size:13px; font-weight:600; }.week-preferences textarea,.week-preferences input,.week-preferences select { width:100%; border:1px solid var(--line); border-radius:10px; background:#f7fbff; color:var(--ink); padding:11px 12px; resize:vertical; }.field-help { color:var(--muted); font-size:12px; font-weight:400; }.time-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }.time-grid label { display:grid; gap:4px; font-size:10px; text-align:center; }.time-grid label span { color:var(--muted); }.time-grid select { min-width:0; padding:8px 4px; font-size:11px; }.compose-button { justify-self:start; }.generated-menu { margin-top:22px; }.generated-menu-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:10px; }.generated-menu-heading h3 { font-size:25px; }.planner-empty { display:grid; justify-items:center; gap:5px; padding:26px; margin-top:22px; background:#e7f4e8; border-radius:14px; color:var(--sage); text-align:center; }.planner-empty span { font-size:28px; }.planner-empty strong { color:var(--ink); font-family:'Fraunces',serif; font-size:18px; }.planner-empty small { color:var(--muted); }
.serving-adjuster { display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-weight:700; }.serving-adjuster input { width:70px; border:1px solid var(--line); border-radius:8px; padding:5px 7px; color:var(--ink); background:var(--paper); }.recipe-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 205px; gap:24px; align-items:start; }.tip-sidebar { background:#e7f4e8; border:1px solid #c9e5ce; border-radius:15px; padding:16px; }.tip-sidebar .eyebrow { color:var(--sage); margin-bottom:12px; }.tip-card + .tip-card { border-top:1px solid #c9e5ce; margin-top:14px; padding-top:14px; }.tip-card h3 { font-size:18px; line-height:1.1; color:var(--ink); }.tip-card p { color:var(--muted); font-size:13px; margin:7px 0; }.tip-card small { color:var(--sage); font-size:11px; font-weight:700; }.grocery-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; }.grocery-list li { border-bottom:1px dashed var(--line); padding:8px 0; }.grocery-list label { display:flex; gap:10px; align-items:flex-start; color:var(--ink); font-size:14px; }.grocery-list input { width:18px; height:18px; accent-color:var(--sage); flex:0 0 auto; }.grocery-list input:checked + span { color:var(--muted); text-decoration:line-through; }
@media(max-width:800px){.preference-grid{grid-template-columns:1fr}.time-grid{grid-template-columns:repeat(4,1fr);gap:9px}.compose-button{width:100%;}}
@media(max-width:800px){.recipe-detail-layout{grid-template-columns:1fr;}.tip-sidebar{order:-1;}}
@media(max-width:600px){.grocery-list{grid-template-columns:1fr;}.modal-stats{white-space:normal; flex-wrap:wrap;}}

/* Sfeervolle afwerking: helder blauw, fris groen en een vleugje keukentafel. */
body {
  background:
    radial-gradient(circle at 8% -5%, rgba(127, 201, 108, .25), transparent 27rem),
    radial-gradient(circle at 96% 18%, rgba(7, 87, 201, .13), transparent 25rem),
    linear-gradient(135deg, #f7fbff 0%, #eef8f0 52%, #f8fcff 100%);
}
.site-header {
  background:rgba(255,255,255,.84);
  box-shadow:0 8px 30px rgba(6,53,117,.06);
}
.brand-mark {
  background:linear-gradient(145deg, var(--terracotta), var(--sage));
  box-shadow:0 7px 16px rgba(7,87,201,.22);
  transform:rotate(-7deg);
}
.welcome-row { margin-bottom:32px; }
.welcome-row h1 { color:var(--terracotta-dark); }
.eyebrow { color:var(--sage); }
.hero-card {
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 24px 60px rgba(6,53,117,.18);
}
.hero-card::before {
  content:'✦  ✧  ✦';
  position:absolute;
  right:34%;
  top:18px;
  color:rgba(255,255,255,.28);
  letter-spacing:18px;
  font-size:17px;
  z-index:2;
}
.hero-copy h2 { text-shadow:0 3px 18px rgba(0,0,0,.12); }
.search-box {
  border:2px solid rgba(7,87,201,.18);
  box-shadow:0 12px 28px rgba(6,53,117,.08);
}
.search-box:focus-within { border-color:var(--terracotta); box-shadow:0 12px 30px rgba(7,87,201,.14); }
.filters {
  border:1px solid #d3e8d8;
  box-shadow:0 10px 24px rgba(47,139,85,.07);
}
.chip { transition:transform .18s, border-color .18s, background .18s; }
.chip:hover { transform:translateY(-2px); border-color:var(--sage); }
.recipe-grid { gap:22px; }
.recipe-card {
  border-color:#d6e4e7;
  box-shadow:0 10px 26px rgba(6,53,117,.06);
}
.recipe-card:hover { box-shadow:0 18px 36px rgba(6,53,117,.15); }
.card-top { background:linear-gradient(135deg, var(--card-color,#dff1e2), #f7fbff); }
.card-category { box-shadow:0 3px 10px rgba(6,53,117,.08); }
.section-heading { margin-bottom:22px; }
.count-badge { background:#dff1e2; color:#24613d; }
.modal-backdrop { background:rgba(6,31,63,.62); }
.recipe-modal {
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 30px 90px rgba(6,53,117,.28);
  overflow:hidden;
}
.recipe-modal::before {
  content:'';
  display:block;
  height:7px;
  margin:-38px -44px 30px;
  background:linear-gradient(90deg, var(--terracotta), var(--sage), var(--mustard));
}
.modal-hero {
  background:linear-gradient(135deg, #f3f8ff, #edf8ef);
  border:1px solid #d7e8e2;
  border-radius:18px;
  padding:22px;
  margin-bottom:26px;
}
.modal-hero h2 { color:var(--terracotta-dark); }
.modal-columns > div {
  background:rgba(247,251,255,.72);
  border:1px solid #dce9ed;
  border-radius:16px;
  padding:18px;
}
.modal-columns > div + div { background:rgba(239,249,241,.72); border-color:#d6ebda; }
.modal-columns h3 { color:var(--terracotta-dark); }
.tip-sidebar { box-shadow:0 8px 20px rgba(47,139,85,.09); }
.modal-actions { border-top:1px dashed #cbdde0; padding-top:20px; }
.modal-close { z-index:2; }
@media(max-width:800px){
  .hero-card::before { right:12%; }
  .recipe-modal::before { margin:-32px -22px 24px; }
  .modal-columns > div { padding:15px; }
}
@media print {
  body { background:white; }
  .recipe-modal::before { display:none; }
  .modal-hero,.modal-columns > div { background:white; box-shadow:none; }
}