/* mRecipes design system and responsive layout */
:root{--ink:#20251e;--muted:#70766c;--paper:#f7f4ed;--card:#fffdf8;--green:#385b43;--lime:#d8e8b7;--line:#e7e2d7;--shadow:0 14px 40px #2633220b}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Cairo',system-ui,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}.wrap{width:min(1160px,calc(100% - 36px));margin:auto}header{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:25px;font-weight:800;letter-spacing:-1px}.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--green);color:white;font-size:23px}.brand b{color:var(--green)}nav{display:flex;align-items:center;gap:25px}nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:14px}.admin-btn,.primary{border:0;background:var(--green);color:white;border-radius:14px;padding:12px 18px;font-weight:700}.admin-btn{padding:10px 15px;font-size:13px}.hero{display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center;padding:54px 0 46px}.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#e9efdd;color:var(--green);padding:7px 13px;border-radius:99px;font-size:12px;font-weight:800}h1{font-size:clamp(36px,5vw,62px);line-height:1.28;letter-spacing:-1.7px;margin:20px 0 14px;font-weight:800}h1 em{font-style:normal;color:var(--green)}.hero p{color:var(--muted);font-size:16px;line-height:2;max-width:490px;margin:0 0 24px}.searchbox{display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--line);border-radius:16px;padding:7px;max-width:510px;box-shadow:var(--shadow)}.searchbox input{border:0;outline:0;min-width:0;flex:1;background:transparent;padding:9px}.hero-art{min-height:370px;position:relative;border-radius:32px;overflow:hidden;background:#b6cba4;display:flex;align-items:center;justify-content:center}.hero-art img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.art-note{position:absolute;bottom:20px;right:20px;left:20px;display:flex;justify-content:space-between;align-items:center;padding:15px 18px;background:#fffdf0ed;border-radius:18px}.art-note small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.rating{background:#fff;border-radius:12px;padding:9px 12px;font-size:12px;font-weight:800;color:var(--green)}.section-head{display:flex;align-items:end;justify-content:space-between;margin:24px 0 18px;gap:16px}.section-head h2{font-size:26px;margin:0 0 3px}.section-head p{color:var(--muted);margin:0;font-size:13px}.text-btn{border:0;background:none;color:var(--green);font-weight:800}.categories{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}.chip{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:99px;padding:9px 17px;font-size:13px;font-weight:700}.chip.active,.chip:hover{background:var(--green);border-color:var(--green);color:white}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.recipe{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .2s,box-shadow .2s}.recipe:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.photo{height:205px;position:relative;background:#e5e2d6;overflow:hidden}.photo img{width:100%;height:100%;object-fit:cover;display:block}.heart{position:absolute;top:12px;left:12px;width:38px;height:38px;border:0;border-radius:50%;background:#fffdf0ed;color:#52574f;font-size:19px}.heart.saved{color:#d65345}.tag{position:absolute;right:12px;top:12px;background:#fffdf0ed;border-radius:99px;padding:6px 11px;font-size:11px;font-weight:800}.recipe-body{padding:17px 18px 18px}.recipe-body h3{font-size:18px;margin:0 0 7px}.recipe-body p{font-size:12px;line-height:1.9;color:var(--muted);margin:0 0 15px;min-height:44px}.meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:13px;font-size:12px;color:var(--muted)}.meta b{color:var(--green)}.empty{padding:50px 20px;text-align:center;color:var(--muted);grid-column:1/-1;background:#fffdf8;border-radius:22px;border:1px dashed var(--line)}.banner{margin:64px 0;background:var(--green);border-radius:28px;padding:34px 38px;color:white;display:flex;align-items:center;justify-content:space-between;gap:25px}.banner h2{font-size:26px;margin:0 0 5px}.banner p{margin:0;color:#d6e0d2;font-size:13px}.banner .primary{background:var(--lime);color:var(--green)}footer{border-top:1px solid var(--line);padding:25px 0;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:15px}.modal{position:fixed;inset:0;background:#14201599;display:none;align-items:center;justify-content:center;padding:18px;z-index:10}.modal.open{display:flex}.panel{background:var(--paper);width:min(720px,100%);max-height:90vh;overflow:auto;border-radius:24px;padding:25px;box-shadow:0 25px 90px #0003}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel h2{margin:0;font-size:24px}.close{border:1px solid var(--line);background:white;border-radius:10px;width:38px;height:38px;font-size:22px}.notice{background:#fff1d8;color:#78551f;padding:12px 14px;border-radius:12px;font-size:12px;line-height:1.8;margin:18px 0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800}.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);background:white;border-radius:12px;padding:11px;outline-color:var(--green);font-size:13px}.field textarea{min-height:80px;resize:vertical}.wide{grid-column:1/-1}.form-actions{display:flex;gap:10px;align-items:center;margin-top:15px}.secondary{background:white;border:1px solid var(--line);border-radius:12px;padding:11px 15px}.manage-list{display:grid;gap:9px;margin-top:22px}.manage-item{background:white;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px}.delete{border:0;background:#fff0ec;color:#b54a3b;border-radius:9px;padding:7px 10px;font-size:12px;font-weight:800}
@media(max-width:780px){nav{gap:12px}nav a{display:none}.hero{grid-template-columns:1fr;gap:25px;padding-top:34px}.hero-art{min-height:280px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.photo{height:180px}.banner{padding:25px;align-items:flex-start;flex-direction:column}}@media(max-width:520px){.wrap{width:calc(100% - 26px)}header{height:70px}.brand{font-size:22px}.hero{padding-top:27px}.hero-art{min-height:245px}h1{font-size:38px}.grid{grid-template-columns:1fr}.photo{height:225px}.section-head h2{font-size:22px}.banner h2{font-size:23px}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}footer{flex-direction:column}.searchbox button{padding:10px 12px}}


/* Phase 2: structured recipe details */
.recipe-open{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:15px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--green);font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.recipe-open:hover{background:#f1f5ec;border-color:#cbd8c7}
.recipe-open:focus-visible,.dialog-close:focus-visible{outline:3px solid #91b69a;outline-offset:3px}
.recipe-dialog{width:min(680px,calc(100% - 28px));max-width:680px;max-height:min(88vh,900px);padding:0;border:1px solid var(--line);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:0 24px 80px #17251d40;overflow:auto}
.recipe-dialog::backdrop{background:#17251d99;backdrop-filter:blur(3px)}
.dialog-inner{position:relative;padding:clamp(18px,4vw,32px)}
.dialog-close{position:absolute;z-index:2;top:14px;left:14px;display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffffaa;border-radius:50%;background:#fff;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;box-shadow:0 3px 12px #17251d16}
.detail-image{display:block;width:100%;height:clamp(180px,32vw,300px);object-fit:cover;border-radius:15px;background:#e7e4db}
.detail-tag{position:static;display:inline-block;margin-top:18px}
.recipe-dialog h2{margin:8px 0;font-size:clamp(24px,4vw,34px);line-height:1.45}
.detail-description,.detail-muted{color:var(--muted);line-height:1.9;font-size:14px}
.detail-stats{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 24px}
.detail-stats span{padding:7px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12px;font-weight:700}
.recipe-dialog h3{margin:22px 0 10px;font-size:17px}
.ingredient-list,.step-list{margin:0;padding-right:22px;line-height:1.9}
.ingredient-list{list-style:none;padding:0}
.ingredient-list li{display:flex;justify-content:space-between;gap:14px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px}
.ingredient-list li b{color:var(--green);white-space:nowrap}
.step-list li{padding:6px 2px 8px 0;line-height:1.9}
@media(prefers-reduced-motion:reduce){.recipe-open{transition:none}}

/* Phase 3: polished motion, resilient images, and accessible interaction states */
:root{--ease-out:cubic-bezier(.2,.75,.25,1);--motion-fast:180ms;--motion-medium:320ms}
html{scroll-behavior:smooth;scroll-padding-top:24px}a,button,input{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #8aa98c;outline-offset:3px}
.primary,.chip,.heart,.recipe-open,.text-btn{transition:transform var(--motion-fast) var(--ease-out),background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
.primary:hover{transform:translateY(-2px);box-shadow:0 9px 22px #243d2b24}.primary:active,.chip:active,.recipe-open:active{transform:scale(.985)}
.hero-art{isolation:isolate;box-shadow:0 22px 60px #26332212;animation:art-enter 800ms var(--ease-out) both}
.hero-art img{transition:transform 900ms var(--ease-out)}.hero-art:hover img{transform:scale(1.035)}
.art-note{backdrop-filter:blur(12px);box-shadow:0 12px 30px #17251d14;animation:note-enter 650ms 180ms var(--ease-out) both}
.grid{align-items:stretch}.recipe{display:flex;flex-direction:column;min-width:0;box-shadow:0 5px 20px #26332206;animation:card-enter 500ms var(--ease-out) both;transition:transform 260ms var(--ease-out),box-shadow 260ms ease,border-color 260ms ease}
.recipe:hover{transform:translateY(-7px);box-shadow:0 18px 38px #26332214;border-color:#d0d9c8}.recipe:nth-child(3n+2){animation-delay:60ms}.recipe:nth-child(3n){animation-delay:120ms}
.photo{height:auto;aspect-ratio:4/3}.photo img{transition:transform 550ms var(--ease-out);background:#e9e5db}.recipe:hover .photo img{transform:scale(1.045)}
.recipe-body{display:flex;flex:1;flex-direction:column;align-items:stretch}.recipe-body p{flex:1}.heart{display:grid;place-items:center;box-shadow:0 3px 12px #17251d12}.heart:hover{transform:scale(1.08)}.heart.saved{background:#fff0ec}
.recipe-open{margin-top:16px;text-decoration:none;min-height:44px}.recipe-open:hover{transform:translateY(-1px);box-shadow:0 5px 14px #2633220c}
.searchbox:focus-within{border-color:#9aaf91;box-shadow:0 0 0 4px #385b4310,var(--shadow)}.empty{animation:fade-in 300ms ease both}
.static-page{max-width:850px;margin:48px auto 80px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,5vw,48px);line-height:2;box-shadow:0 14px 40px #26332208}
.static-page h1{font-size:clamp(28px,5vw,42px);line-height:1.5}.static-page h2{margin-top:28px}.static-page p,.static-page li{color:var(--muted)}
.page-nav{display:flex;flex-wrap:wrap;gap:14px;margin:20px 0}.page-nav a{color:var(--green);font-weight:700;text-decoration:none}
.page-footer{padding:20px 0 35px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}
.recipe-content{max-width:900px;margin:32px auto 64px}.recipe-content .recipe-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:clamp(18px,4vw,32px)}
.recipe-content .recipe-hero img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px;background:#e8e4da}
.recipe-content h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.5px}.recipe-content .lead{color:var(--muted);line-height:2}
.recipe-content .recipe-meta{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0}.recipe-content .recipe-meta span{background:#f0f3e9;border-radius:10px;padding:8px 11px;font-size:13px;font-weight:700;color:var(--green)}
.recipe-content .recipe-section{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:clamp(18px,3vw,28px)}.recipe-content .recipe-section h2{margin-top:0}
.recipe-content .ingredient-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}.recipe-content .ingredient-list li{align-items:start}.recipe-content .step-list li{padding:8px 2px 10px}
.recipe-breadcrumbs{font-size:13px;color:var(--muted);margin:0 0 18px}.recipe-breadcrumbs a,.recipe-content .recipe-back{color:var(--green);text-decoration:none;font-weight:800}.recipe-content .recipe-back{display:inline-flex;margin-top:20px}
@keyframes card-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes art-enter{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes note-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{from{opacity:0}to{opacity:1}}
@media(max-width:780px){.recipe-content .recipe-hero{grid-template-columns:1fr}.recipe-content .recipe-hero img{max-height:360px}.recipe-content{margin-top:22px}}
@media(max-width:520px){.recipe-content .ingredient-list{grid-template-columns:1fr}.recipe-content .recipe-section{border-radius:18px}.recipe-content .recipe-hero{border-radius:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}