:root { --ink:#28322c; --muted:#697169; --cream:#f4eee3; --paper:#fffdf8; --sage:#728b71; --sage-dark:#4f6951; --coral:#c96f54; --line:#ded6c8; --shadow:0 14px 40px rgba(50,45,35,.10); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font:16px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.login-screen { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:1rem; background:linear-gradient(140deg,#f4eee3,#d9e5d4); }
.login-screen.hidden { display:none; }
.login-card { width:min(440px,100%); padding:2rem; border:1px solid var(--line); border-radius:1rem; text-align:center; background:var(--paper); box-shadow:var(--shadow); }
.login-card h1 { margin-bottom:1rem; font-size:3.3rem; }
.error { color:#9a4938; }
.hero { display:flex; justify-content:space-between; align-items:end; gap:2rem; padding:3rem clamp(1.2rem,5vw,5rem) 2.3rem; background:linear-gradient(120deg,#f7f0e5,#dbe4d5); border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 .3rem; color:var(--sage-dark); font-size:.76rem; font-weight:800; letter-spacing:.16em; }
h1 { margin:0; font:700 clamp(2.7rem,7vw,5.2rem)/.95 Georgia,serif; letter-spacing:-.04em; }
.lede { margin:.9rem 0 0; color:var(--muted); font-size:1.05rem; }
.primary { border:0; border-radius:999px; padding:.85rem 1.1rem; color:white; background:var(--sage-dark); font-weight:750; white-space:nowrap; }
.primary span { display:inline-grid; place-items:center; min-width:1.5rem; height:1.5rem; margin-left:.35rem; border-radius:50%; background:#fff3; }
.hero-actions { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.hero-actions > button:not(.primary) { border:1px solid #aebba9; border-radius:999px; padding:.72rem .9rem; color:var(--sage-dark); background:#ffffff80; font-weight:750; }
main { max-width:1500px; margin:auto; padding:1.7rem clamp(1rem,4vw,4rem) 4rem; }
.hidden { display:none !important; }
.toolbar { display:grid; grid-template-columns:minmax(250px,1fr) minmax(170px,230px); gap:1rem; align-items:end; }
label span { display:block; margin:0 0 .35rem; color:var(--muted); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
input,select,textarea { width:100%; border:1px solid var(--line); border-radius:.65rem; padding:.75rem .8rem; color:var(--ink); background:var(--paper); }
.tags { display:flex; gap:.45rem; overflow:auto; padding:1rem 0 .3rem; scrollbar-width:none; }
.tag { border:1px solid var(--line); border-radius:999px; padding:.4rem .72rem; background:#fff8; white-space:nowrap; }
.tag.active { color:white; border-color:var(--sage-dark); background:var(--sage-dark); }
.summary { color:var(--muted); font-size:.9rem; }
.recipe-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.card { display:flex; flex-direction:column; min-height:270px; overflow:hidden; border:1px solid var(--line); border-radius:1rem; background:var(--paper); box-shadow:0 2px 0 #fff inset; transition:.18s transform,.18s box-shadow; }
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.card button.open { flex:1; border:0; padding:1.15rem; text-align:left; color:inherit; background:transparent; }
.card h2 { margin:.25rem 0 .45rem; font:700 1.45rem/1.15 Georgia,serif; }
.meta { display:flex; flex-wrap:wrap; gap:.45rem .8rem; color:var(--muted); font-size:.84rem; }
.stars { color:#dc9034; letter-spacing:.05em; }
.card-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:1rem; }
.card-tags span { border-radius:999px; padding:.2rem .48rem; color:var(--sage-dark); background:#e7eee3; font-size:.74rem; font-weight:700; }
.add-plan { border:0; border-top:1px solid var(--line); padding:.7rem 1rem; color:var(--sage-dark); background:#f6f4ec; font-weight:800; }
dialog { width:min(760px,calc(100% - 1.2rem)); max-height:92vh; overflow:auto; border:0; border-radius:1rem; padding:clamp(1.1rem,4vw,2rem); color:var(--ink); background:var(--paper); box-shadow:0 24px 90px #18221daa; }
dialog::backdrop { background:#202720b8; backdrop-filter:blur(3px); }
.close { position:sticky; float:right; top:0; z-index:2; width:2.2rem; height:2.2rem; border:0; border-radius:50%; font-size:1.5rem; background:var(--cream); }
.detail h2 { margin:.2rem 2.5rem .4rem 0; font:700 clamp(2rem,6vw,3.3rem)/1 Georgia,serif; }
.detail h3 { margin-top:1.7rem; font:700 1.25rem Georgia,serif; }
.detail li { margin:.38rem 0; }
.source-note { border-left:4px solid var(--coral); padding:.7rem 1rem; background:#f9eee9; }
.source-links ul { padding-left:1.2rem; }
.source-links a { color:#8a3f2d; font-weight:700; }
.review-box,.note-box,.cook-box { margin-top:1rem; padding:1rem; border-radius:.8rem; background:#f2f3eb; }
.star-button { border:0; padding:.1rem; color:#c3b9a8; background:transparent; font-size:1.8rem; }
.star-button.selected { color:#dc9034; }
.inline { display:flex; gap:.6rem; align-items:end; }
.inline > * { flex:1; }
.inline button,.save { flex:0 0 auto; border:0; border-radius:.6rem; padding:.75rem 1rem; color:white; background:var(--sage-dark); font-weight:800; }
.note { margin:.7rem 0; padding:.7rem; border-left:3px solid var(--sage); background:white; }
.plan-item { display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.plan-item button { border:0; color:#9a4938; background:transparent; }
.upcoming-head { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1.2rem; }
.upcoming-head h2 { margin:.1rem 0; font:700 clamp(2rem,5vw,3.2rem)/1 Georgia,serif; }
.meal-list { display:grid; gap:.85rem; }
.meal-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:var(--paper); }
.meal-card h3 { margin:.1rem 0 .35rem; font:700 1.35rem Georgia,serif; }
.meal-controls { display:flex; flex-wrap:wrap; gap:.5rem; align-items:end; }
.meal-controls label { min-width:135px; }
.meal-controls select,.meal-controls input { padding:.55rem; }
.meal-actions { display:flex; flex-direction:column; justify-content:center; gap:.45rem; }
.meal-actions button { border:1px solid var(--line); border-radius:.55rem; padding:.55rem .7rem; background:#f6f4ec; }
.meal-actions .cooked { color:white; border-color:var(--sage-dark); background:var(--sage-dark); }
.shopping-panel { margin-top:1.5rem; padding:1rem 1.2rem; border-radius:1rem; background:#eef1e8; }
.shopping-panel h3 { margin-top:0; font:700 1.3rem Georgia,serif; }
#toast { position:fixed; right:1rem; bottom:1rem; z-index:10; max-width:320px; padding:.8rem 1rem; border-radius:.7rem; color:white; background:var(--ink); opacity:0; transform:translateY(12px); pointer-events:none; transition:.2s; }
#toast.show { opacity:1; transform:none; }
@media (max-width:680px) { .hero { align-items:start; flex-direction:column; padding-top:2rem; } .toolbar { grid-template-columns:1fr; } .recipe-grid { grid-template-columns:1fr; } .inline { align-items:stretch; flex-direction:column; } .upcoming-head { align-items:start; flex-direction:column; } .meal-card { grid-template-columns:1fr; } .meal-actions { flex-direction:row; } }
.site-footer { padding: 1.5rem; text-align: center; }
.site-footer a, .policy-content a { color: #6d3f2b; }
.policy-page { background: #f4eee3; color: #2e241f; }
.policy-hero { max-width: 860px; margin: 0 auto; padding: 3rem 1.5rem 1rem; }
.policy-hero h1 { margin: .25rem 0; }
.policy-effective { color: #6d625c; }
.policy-content { max-width: 860px; margin: 0 auto; padding: 0 1.5rem 4rem; line-height: 1.65; }
.policy-content h2 { margin-top: 2rem; }
.policy-content li + li { margin-top: .6rem; }
.policy-links { margin-top: 2rem; }