:root{--bg:#faf6ea;--surface:#fffdf6;--ink:#23301f;--muted:#5b6650;--line:#d9d2b8;--green:#2f5233;--soft:#dfe6d0;--gold:#b07d1f}
@media (prefers-color-scheme:dark){:root{--bg:#171d15;--surface:#202a1d;--ink:#eef0e2;--muted:#b4bea5;--line:#3d4a37;--green:#9cc58f;--soft:#2a3826;--gold:#e6c06f}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.85 "IBM Plex Sans Arabic","Noto Naskh Arabic",system-ui,sans-serif}
a{color:var(--green)}img{max-width:100%;height:auto}
.top{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.wrap{max-width:820px;margin:0 auto;padding:0 16px}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--green);font:700 24px "Noto Naskh Arabic",serif}
.brand img{width:42px;height:42px;border-radius:11px}
.top nav{display:flex;gap:6px;flex-wrap:wrap}.top nav a{text-decoration:none;padding:7px 12px;border-radius:99px;border:1px solid var(--line);color:var(--ink);font-size:15px}
.top nav a.cta{background:var(--green);color:#fff;border-color:var(--green)}
main{padding:26px 0 40px}
h1{font:700 clamp(26px,5vw,36px)/1.35 "Noto Naskh Arabic",serif;color:var(--green);margin:.2em 0 .4em}
h2{font:700 22px/1.4 "Noto Naskh Arabic",serif;margin:1.6em 0 .4em;color:var(--ink)}
.lead{font-size:19px;color:var(--ink)}.hint{color:var(--muted);font-size:14px}
ul,ol{padding-inline-start:24px}li{margin:.25em 0}hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.cover{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:18px;margin:10px 0 18px}
.meta{color:var(--muted);font-size:14px;display:flex;gap:12px;flex-wrap:wrap}
.tag{background:var(--soft);color:var(--green);border-radius:99px;padding:2px 10px;font-size:13px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:18px}
.card{display:block;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.card div{padding:12px 14px 16px}
.card b{display:block;font:700 18px/1.45 "Noto Naskh Arabic",serif;margin:4px 0}.card small{color:var(--muted);font-size:14px;line-height:1.6;display:block}
.appbox{margin:30px 0;background:var(--soft);border-radius:18px;padding:18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.appbox img{width:64px;height:64px;border-radius:16px}.appbox div{flex:1;min-width:200px}.appbox a.btn{background:var(--green);color:#fff;text-decoration:none;border-radius:12px;padding:10px 16px;font-weight:700}
.related{margin-top:20px}.related a{display:block;padding:6px 0}
.contact-cards{display:grid;gap:12px;margin:18px 0}.ccard{display:grid;gap:2px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
.ccard b{font-size:18px}.ccard span{font-size:20px;color:var(--green);font-weight:700}.ccard small{color:var(--muted)}
.foot{border-top:1px solid var(--line);padding:22px 0 34px;color:var(--muted);font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:8px}.foot a{color:var(--muted)}
[hidden]{display:none!important}
.ad{margin:26px 0;min-height:90px;position:relative;text-align:center}.ad .adl{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.ad.demo{border:1.5px dashed var(--line);border-radius:12px;padding:28px 10px;color:var(--muted);background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(185,173,134,.12) 10px,rgba(185,173,134,.12) 20px)}
.cards .ad{grid-column:1/-1;margin:4px 0}
.rfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}.rfacts div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px}.rfacts span{display:block;color:var(--muted);font-size:13px}.rfacts b{font-size:20px}
.ing li{margin:.35em 0}.steps li{margin:.5em 0}
.nutbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:18px 0}.nutbox b{font-size:24px;color:var(--green)}
.locked{background:var(--soft);border-radius:16px;padding:14px 16px;margin:20px 0}
.cat-h{margin-top:30px}
.rcards{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}.rc{border-inline-start:5px solid var(--green)}.rc div{padding:12px}.rc b{font-size:17px}
.c-sweet{border-inline-start-color:#9b5468}.c-salty{border-inline-start-color:#8a7434}.c-bfast{border-inline-start-color:#b07d1f}.c-snack{border-inline-start-color:#a0622d}.c-fish{border-inline-start-color:#3f6f73}.c-fast{border-inline-start-color:#b07a2c}.c-drinks{border-inline-start-color:#3d7a64}.c-celiac{border-inline-start-color:#4a6b86}
@media (max-width:520px){.top nav a{padding:6px 9px;font-size:13px}.brand{font-size:20px}.brand img{width:34px;height:34px}.top .wrap{gap:8px}}