@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@300;400&family=Noto+Kufi+Arabic:wght@400;600&family=Noto+Naskh+Arabic:wght@400;600&display=swap");*,:after,:before{margin:0;padding:0;box-sizing:border-box}:root{--bg:#080c0a;--surface:#0f1512;--surface2:#151d19;--border:#1e2a24;--border-light:#151d19;--text:#e8ede9;--text-dim:#6b7e72;--text-muted:#3a4d42;--accent:#7bcea0;--accent-dim:rgba(123,206,160,.08);--accent-glow:rgba(123,206,160,.15);--active-bg:rgba(123,206,160,.06);--shadow:rgba(0,0,0,.5);--error:#dc2626;--error-bg:rgba(220,38,38,.1);--font-ar:"Noto Kufi Arabic","Noto Naskh Arabic",serif;--font-body:"DM Sans","Noto Sans",sans-serif;--font-mono:"DM Mono",monospace;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--transition:0.25s ease}[data-theme=light]{--bg:#f4f1ec;--surface:#fff;--surface2:#ede9e3;--border:#d5cfc6;--border-light:#ede9e3;--text:#1a1a1a;--text-dim:#5c5c5c;--text-muted:#9a9488;--accent:#2d8b5e;--accent-dim:rgba(45,139,94,.07);--accent-glow:rgba(45,139,94,.15);--active-bg:rgba(45,139,94,.06);--shadow:rgba(0,0,0,.08);--error:#d32f2f;--error-bg:rgba(211,47,47,.08)}html{font-size:16px}@media(min-width:768px){html{font-size:18px}}@media(min-width:1024px){html{font-size:18px}}@media(min-width:1920px){html{font-size:22px}}body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .35s,color .35s;display:flex;flex-direction:column}body:before{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:-1}.fade-up{opacity:0;animation:fadeUp .6s ease forwards}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pillIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes spin{to{transform:rotate(1turn)}}.app-main{flex:1 1;width:100%;max-width:1600px;margin:0 auto;display:flex;flex-direction:column}.top-bar{justify-content:space-between;padding:16px 24px;position:relative;z-index:100}.top-actions,.top-bar{display:flex;align-items:center}.top-actions{gap:12px}.lang-wrap{position:relative}.lang-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-body);font-size:.7rem;padding:6px 12px;border-radius:100px;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:5px;white-space:nowrap}.lang-btn:hover{border-color:var(--accent);color:var(--accent)}.lang-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5}.lang-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px;min-width:230px;max-height:350px;overflow-y:auto;display:none;box-shadow:0 16px 48px var(--shadow);z-index:200}html[dir=rtl] .lang-dropdown{left:auto;right:0}.lang-dropdown.open{display:block}.lang-dropdown::-webkit-scrollbar{width:4px}.lang-dropdown::-webkit-scrollbar-track{background:transparent}.lang-dropdown::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.lang-option{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:8px;cursor:pointer;transition:background .2s;font-size:.8rem;color:var(--text-dim)}.lang-option:hover{background:var(--surface2)}.lang-option.active{color:var(--accent);background:var(--accent-dim)}.lang-option .native{font-size:.75rem;opacity:.6}@media (max-width:600px){.lang-dropdown{position:fixed;top:60px;width:auto}.lang-dropdown,html[dir=rtl] .lang-dropdown{left:20px;right:20px}}.icon-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);width:38px;height:38px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.icon-btn:hover{border-color:var(--accent);color:var(--accent)}.icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}.hero{padding:2rem 1.5rem;text-align:center;opacity:0;animation:fadeUp .6s ease forwards}.hero-badge{display:inline-block;background:var(--active-bg);color:var(--accent);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.35rem 1rem;border-radius:99px;margin-bottom:1rem;border:1px solid var(--accent-glow)}.hero-title{font-size:clamp(2rem,5vw,3rem);font-weight:600;color:var(--text);letter-spacing:-.02em;line-height:1.2;margin-bottom:.75rem}.hero-accent{color:var(--accent);font-weight:500}.hero-subtitle{color:var(--text-dim);font-size:clamp(.9rem,2vw,1rem);max-width:500px;margin:0 auto;line-height:1.6}.split-layout{display:grid;grid-template-columns:1fr;grid-gap:1.5rem;gap:1.5rem;padding:1.5rem;flex:1 1}@media (min-width:1024px){.split-layout{grid-template-columns:460px 1fr;align-items:start;padding:2rem 40px;gap:3rem}.input-pane{position:-webkit-sticky;position:sticky;top:2rem}}@media (min-width:1920px){.split-layout{grid-template-columns:500px 1fr;max-width:1400px;margin:0 auto;padding:2rem 60px}}.canvas-pane,.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.5rem;box-shadow:0 8px 30px var(--shadow);opacity:0;animation:fadeUp .6s ease .2s forwards}.section-heading{font-size:1.1rem;font-weight:500;letter-spacing:.05em;color:var(--text);text-transform:uppercase;border-bottom:1px solid var(--border);padding-bottom:10px}.field,.field-row,.section-heading{margin-bottom:1.5rem}.field-row{display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;gap:1rem}label{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.5rem}.optional{opacity:.6;text-transform:lowercase}.field-hint{display:block;font-size:.75rem;color:var(--text-muted);margin-top:.4rem}input[type=number],input[type=text],select{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:.9rem;padding:.75rem 1rem;border-radius:var(--radius-sm);outline:none;transition:border-color .2s;-webkit-appearance:none;-moz-appearance:none;appearance:none}select{background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7E72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}.ingredient-input-container:focus-within,input:focus,select:focus{border-color:var(--accent)}.ingredient-input-container{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem .8rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);min-height:48px;cursor:text;transition:var(--transition)}.ingredient-input-container input{border:none;background:transparent;padding:.2rem 0;width:auto;flex:1 1;min-width:100px;font-size:.9rem;outline:none}.ingredient-pill{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface2);color:var(--text);border:1px solid var(--border);padding:.3rem .6rem;border-radius:100px;font-size:.8rem;animation:pillIn .2s ease-out}.pill-remove{width:16px;height:16px;border-radius:50%;background:var(--text-muted);color:var(--bg);border:none;font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.pill-remove:hover{background:var(--error);color:#fff}.upload-zone{border:1px dashed var(--border);border-radius:var(--radius-sm);padding:1.5rem 1rem;text-align:center;cursor:pointer;background:var(--bg);transition:var(--transition)}.upload-zone:hover{border-color:var(--accent);background:var(--active-bg)}.upload-zone input[type=file]{display:none}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:.4rem}.upload-icon{font-size:1.5rem}.photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));grid-gap:.5rem;gap:.5rem;margin-bottom:.75rem}.photo-thumb{position:relative;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);animation:pillIn .25s ease-out}.photo-thumb img{width:100%;height:100%;object-fit:cover}.photo-remove{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:var(--error);color:#fff;border:none;font-size:.9rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}.difficulty-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:.5rem;gap:.5rem}.difficulty-card{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.8rem .4rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);color:var(--text-dim)}.difficulty-card.active,.difficulty-card:hover{border-color:var(--accent)}.difficulty-card.active{background:var(--active-bg);color:var(--accent)}.difficulty-icon{font-size:1.2rem}.difficulty-card strong{font-size:.8rem;font-weight:500;color:var(--text)}.difficulty-card .difficulty-desc{font-size:.65rem;color:var(--text-muted)}.difficulty-card.active strong{color:var(--accent)}.halal-convert-explain{background:var(--active-bg);border:1px solid var(--accent-glow);padding:1rem;border-radius:var(--radius-sm);margin-bottom:1.5rem;font-size:.85rem;color:var(--text-dim);line-height:1.5;display:flex;gap:.75rem;align-items:flex-start}.halal-convert-explain .icon{font-size:1.2rem}.halal-convert-explain h4{color:var(--text);font-weight:600;font-size:.9rem;margin-bottom:.2rem}.halal-convert-explain strong.halal-highlight{color:var(--accent)}.halal-convert-toggle{width:100%;display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);text-align:left}.halal-convert-toggle:hover{border-color:var(--accent)}.halal-convert-toggle.active{border-color:var(--accent);background:var(--active-bg)}.convert-icon{font-size:1.3rem;flex-shrink:0}.convert-text{flex:1 1;display:flex;flex-direction:column;gap:.1rem}.convert-text strong{font-size:.85rem;color:var(--text)}.convert-desc{font-size:.75rem;color:var(--text-muted);line-height:1.4}.convert-switch{width:40px;height:22px;background:var(--border);border-radius:100px;position:relative;flex-shrink:0;transition:var(--transition)}.convert-switch:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--text);border-radius:50%;transition:var(--transition)}.convert-switch.on{background:var(--accent)}.convert-switch.on:after{transform:translateX(18px);background:var(--bg)}.btn-generate{width:100%;padding:1rem;background:var(--accent);color:var(--bg);border:none;border-radius:100px;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:.6rem;letter-spacing:.05em}.btn-generate:hover:not(:disabled){background:#68bd8e;transform:translateY(-1px)}[data-theme=light] .btn-generate:hover:not(:disabled){background:#236c49}.btn-generate:disabled{opacity:.7;cursor:not-allowed}.btn-retry{background:var(--error);color:#fff;border:none;padding:.3rem .8rem;border-radius:100px;cursor:pointer;font-size:.8rem;margin-top:.5rem}.history-section{border-top:1px solid var(--border);padding-top:1.5rem;margin-top:1.5rem}.btn-history-toggle{width:100%;background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:.75rem;border-radius:100px;cursor:pointer}.btn-history-toggle:hover{border-color:var(--accent);color:var(--accent)}.history-list{list-style:none;padding:0;margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.history-item{width:100%;display:flex;justify-content:space-between;padding:.8rem 1rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--text);text-align:left}.history-item:hover{border-color:var(--accent)}.history-meta{font-size:.75rem;color:var(--text-dim)}.empty-state{margin:auto;text-align:center;padding:3rem 1rem;max-width:320px;color:var(--text-dim);opacity:0;animation:fadeUp .6s ease .4s forwards}.empty-illustration{font-size:3rem;margin-bottom:1rem;color:var(--border)}.empty-state h3{font-size:1.1rem;color:var(--text);margin-bottom:.5rem;font-weight:500}.empty-state p{font-size:.9rem;line-height:1.5}.skeleton-loader{display:flex;flex-direction:column;gap:.8rem}.skel-badge{height:28px;width:100px;background:var(--border);border-radius:100px}.skel-title{height:36px;width:70%}.skel-meta,.skel-title{background:var(--border);border-radius:var(--radius-sm)}.skel-meta{height:24px;width:55%}.skel-text{height:14px;background:var(--border);border-radius:4px;width:100%}.skel-text.short{width:75%}.skeleton-loader>*{animation:shimmer 1.5s ease-in-out infinite}@keyframes shimmer{0%,to{opacity:.4}50%{opacity:.8}}.recipe-result{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}.recipe-result.visible{opacity:1;transform:translateY(0)}.recipe-header{margin-bottom:2rem;border-bottom:1px solid var(--border);padding-bottom:1.5rem}.halal-badge{display:inline-block;background:var(--active-bg);color:var(--accent);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .8rem;border-radius:100px;margin-bottom:.75rem;border:1px solid var(--accent-glow)}.recipe-title{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--text);margin-bottom:.75rem}.recipe-meta{display:flex;flex-wrap:wrap;gap:.5rem}.meta-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--bg);border:1px solid var(--border);padding:.35rem .8rem;border-radius:100px;font-size:.82rem;color:var(--text-dim);font-family:var(--font-body)}.health-callout{display:flex;align-items:flex-start;gap:.75rem;background:var(--active-bg);border-radius:var(--radius-sm);padding:1rem 1.2rem;margin-bottom:2rem;border:1px solid var(--accent-glow)}.health-callout p{font-size:.9rem;color:var(--text);line-height:1.5}.recipe-section{margin-bottom:2rem}.recipe-section h3{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1rem}.ingredients-list{list-style:none}.ingredients-list li{display:flex;align-items:baseline;gap:.7rem;padding:.5rem 0;font-size:.95rem;color:var(--text);border-bottom:1px solid var(--border-light)}.ingredients-list li:last-child{border-bottom:none}.bullet{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}.instructions-list{list-style:none;counter-reset:null}.instructions-list li{display:flex;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--border-light);align-items:flex-start}.instructions-list li:last-child{border-bottom:none}.step-number{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--bg);border:1px solid var(--accent);color:var(--accent);font-family:var(--font-mono);font-size:.8rem;display:flex;align-items:center;justify-content:center}.instructions-list p{font-size:.95rem;color:var(--text);line-height:1.6}.swaps-list{list-style:none}.swaps-list li{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:.8rem 0;border-bottom:1px solid var(--border-light)}.swap-original{background:var(--error-bg);color:var(--error);padding:.2rem .6rem;border-radius:100px;font-size:.82rem;font-family:var(--font-mono)}.swap-arrow{color:var(--text-muted);font-size:.9rem}.swap-halal{background:var(--active-bg);color:var(--accent);border:1px solid var(--accent-glow);padding:.2rem .6rem;border-radius:100px;font-size:.82rem}.swap-reason{width:100%;font-size:.8rem;color:var(--text-dim);line-height:1.4;padding-left:.2rem}.nutrition-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));grid-gap:.8rem;gap:.8rem}.nutrition-card{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm)}.nutrition-value{font-family:var(--font-mono);font-size:1.1rem;color:var(--text)}.nutrition-calories .nutrition-value{color:var(--accent)}.nutrition-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.recipe-actions{display:flex;gap:1rem;margin-top:2.5rem}.btn-new,.btn-share{flex:1 1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem;border-radius:100px;font-family:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:var(--transition)}.btn-share{background:transparent;color:var(--text);border:1px solid var(--border)}.btn-share:hover{border-color:var(--accent);color:var(--accent)}.btn-new{background:var(--active-bg);color:var(--accent);border:1px solid var(--accent-glow)}.btn-new:hover{background:var(--accent);color:var(--bg)}.error-msg{background:var(--error-bg);color:var(--error);padding:.85rem 1rem;border-radius:var(--radius-sm);font-size:.875rem;margin-bottom:1.5rem;display:flex;justify-content:space-between;align-items:center}.spinner{width:18px;height:18px;border:2px solid rgba(0,0,0,.2);border-top-color:currentcolor;border-radius:50%;animation:spin .6s linear infinite}.seo-content{margin-top:auto;padding:4rem 1.5rem 2rem;text-align:center}.seo-inner{max-width:900px;margin:0 auto}.seo-content h2{font-size:1.3rem;font-weight:500;color:var(--text);margin-bottom:2rem;letter-spacing:.02em}.seo-grid{display:grid;grid-template-columns:1fr;grid-gap:1.5rem;gap:1.5rem;text-align:left}@media (min-width:640px){.seo-grid{grid-template-columns:1fr 1fr}}.seo-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.5rem;transition:var(--transition)}.seo-card:hover{border-color:var(--accent)}.seo-card h3{font-size:1rem;color:var(--text);margin-bottom:.5rem;font-weight:500}.seo-card p{font-size:.85rem;color:var(--text-dim);line-height:1.6}.app-footer{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border-light);font-size:.75rem;color:var(--text-muted);text-align:center}.app-footer a{color:var(--text-dim);text-decoration:none;transition:var(--transition)}.app-footer a:hover{color:var(--accent)}