:root{--cream:#f7f2e7;--cream-deep:#efe6d2;--ink:#2c3620;--green-deep:#33421f;--green:#4a5f2e;--gold:#b8975a;--white:#fffdf8;--shadow:0 10px 30px rgba(44,54,32,.12);--serif:'Playfair Display',Georgia,serif;--sans:'Jost','Segoe UI',system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.6}
a{color:var(--green)}
.site-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 24px;background:var(--white);border-bottom:1px solid var(--cream-deep)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--green-deep)}
.brand img{width:48px;height:48px;object-fit:contain}
.brand span{display:flex;flex-direction:column;line-height:1.15}
.brand small{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.brand b{font-family:var(--serif);font-size:1.3rem}
.site-header nav{display:flex;gap:18px;flex-wrap:wrap}
.site-header nav a{text-decoration:none;font-weight:500;color:var(--green-deep)}
main{max-width:860px;margin:0 auto;padding:0 16px 40px}
.hero{text-align:center;padding:44px 0 18px}
.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
h1{font-family:var(--serif);color:var(--green-deep);font-size:clamp(2rem,6vw,3rem);margin:8px 0 12px;line-height:1.15}
h1 em{color:var(--gold)}
.hero>p{max-width:560px;margin:0 auto 24px;color:#4a5340}
.panel{background:var(--white);border-radius:18px;box-shadow:var(--shadow);padding:22px;text-align:left}
label{display:block;font-weight:600;font-size:.9rem;margin:0 0 4px;color:var(--green-deep)}
input{width:100%;padding:12px 14px;border:1px solid var(--gold);border-radius:10px;font:inherit;background:#fff;margin-bottom:14px}
input:focus{outline:2px solid var(--green);outline-offset:1px}
.row{display:grid;grid-template-columns:120px 1fr;gap:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chips button{border:1px solid var(--gold);background:var(--cream);color:var(--green-deep);padding:6px 12px;border-radius:999px;font:inherit;font-size:.85rem;cursor:pointer}
.chips button:hover{background:var(--cream-deep)}
.btn{background:var(--green);color:#fff;border:0;border-radius:999px;padding:12px 26px;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:var(--green-deep)}
.btn:disabled{opacity:.6;cursor:wait}
.btn.ghost{background:transparent;color:var(--green-deep);border:1px solid var(--green);padding:9px 18px}
.btn.ghost:hover{background:var(--cream-deep)}
#go{width:100%}
.status{min-height:1.4em;margin-top:14px;color:var(--green-deep);font-weight:500}
.status.err{color:#a3341f}
.recipe,.saved{background:var(--white);border-radius:18px;box-shadow:var(--shadow);padding:28px;margin-top:20px}
.photo{margin:-8px -8px 18px}
.photo img{width:100%;max-height:440px;object-fit:cover;border-radius:14px;display:block}
.recipe h2{font-family:var(--serif);color:var(--green-deep);font-size:2rem;margin:0 0 6px}
.intro{color:#4a5340;font-style:italic;margin:0 0 6px}
.meta{color:var(--gold);font-weight:600;margin:0 0 18px}
.cols{display:grid;grid-template-columns:1fr 1.5fr;gap:28px}
h3{font-family:var(--serif);color:var(--green-deep);margin:0 0 8px}
ul,ol{padding-left:20px;margin:0}
li{margin-bottom:8px}
.tips{background:var(--cream);border-radius:12px;padding:16px 18px;margin-top:22px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.saved h3 small{font:400 .8rem var(--sans);color:#6b7560}
.saved li{display:flex;justify-content:space-between;gap:10px;align-items:center;list-style:none;margin-left:-20px}
.saved li button{background:none;border:0;color:var(--green);cursor:pointer;font:inherit;text-decoration:underline;text-align:left}
.saved li .del{color:#a3341f;text-decoration:none}
footer{text-align:center;padding:20px 16px 40px;font-size:.85rem;color:#6b7560}
@media(max-width:640px){.cols{grid-template-columns:1fr}.row{grid-template-columns:1fr}.recipe{padding:20px}.site-header{justify-content:center}}
@media print{.site-header,.hero,.actions,.saved,footer{display:none}.recipe{box-shadow:none;margin:0}}

.moods{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.moods button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border:1px solid var(--gold);background:var(--cream);color:var(--green-deep);border-radius:14px;font:inherit;font-weight:600;cursor:pointer;transition:transform .1s}
.moods button i{font-style:normal;font-size:1.6rem;line-height:1.2}
.moods button:hover{background:var(--cream-deep);transform:translateY(-2px)}
.moods button.on{background:var(--green);color:#fff;border-color:var(--green)}
@media(max-width:640px){.moods{grid-template-columns:repeat(2,1fr)}}