@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Manrope:wght@400;500;600;700&display=swap');

:root { --ink:#18342b; --muted:#718177; --paper:#faf8f1; --card:#fffefa; --line:#e5e4db; --accent:#d85b3e; --accent-dark:#b9472d; --sage:#dce9dc; --shadow:0 14px 40px rgba(28,53,43,.07); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 10% 0%, #e4eee0 0, transparent 30%), var(--paper); font-family:Manrope, sans-serif; }
button, input, select { font:inherit; }
button { cursor:pointer; }
.shell { max-width:1220px; margin:0 auto; padding:76px 28px 52px; }
.hero { display:grid; grid-template-columns:1.25fr .75fr; column-gap:80px; align-items:end; padding:0 8px 49px; }
.eyebrow { margin:0 0 10px; color:#62806b; font:500 11px/1.2 "DM Mono", monospace; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,h3 { margin:0; font-family:Fraunces, Georgia, serif; font-weight:500; }
h1 { font-size:clamp(42px,6vw,74px); line-height:.98; letter-spacing:-.055em; }
h1 em { color:var(--accent); font-style:italic; white-space:nowrap; }
.intro { max-width:420px; margin:21px 0 0; color:#52655a; font-size:15px; line-height:1.7; }
.stats { display:flex; justify-content:space-between; gap:18px; padding:20px 0; border-top:1px solid #cbd7c8; }
.stats div { display:grid; gap:3px; }
.stats strong { font:500 27px/1 Fraunces, serif; }
.stats span { color:var(--muted); font-size:11px; }
.workspace { display:grid; grid-template-columns:minmax(0,1.32fr) minmax(310px,.68fr); gap:24px; align-items:start; }
.card { background:rgba(255,254,250,.85); border:1px solid rgba(225,225,215,.9); border-radius:18px; box-shadow:var(--shadow); }
.dishes-card { padding:30px; min-height:480px; }
.shopping-card { padding:30px; position:sticky; top:22px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:27px; }
h2 { font-size:28px; letter-spacing:-.035em; }
.button { border:0; border-radius:8px; padding:10px 14px; font-size:12px; font-weight:700; transition:.18s ease; }
.button:hover { transform:translateY(-1px); }
.primary { background:var(--accent); color:white; box-shadow:0 4px 10px rgba(216,91,62,.2); }
.primary:hover { background:var(--accent-dark); }
.secondary { border:1px solid #d9ddd3; background:#fffefa; color:var(--ink); }
.text-button { border:0; background:transparent; color:#718177; font-size:11px; padding:5px 0; }
.text-button:hover { color:var(--accent); }
.dishes { display:grid; gap:16px; }
.dish { border:1px solid var(--line); border-radius:12px; padding:20px; background:white; animation:appear .25s ease both; }
@keyframes appear { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }
.dish-top { display:flex; align-items:center; gap:10px; margin-bottom:15px; }
.dish-name { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--ink); font:500 23px Fraunces, serif; }
.dish-name::placeholder { color:#a6afa6; }
.icon-button,.remove-ingredient { width:27px; height:27px; border:0; border-radius:50%; color:#9aa59b; background:transparent; font-size:22px; line-height:1; }
.icon-button:hover,.remove-ingredient:hover { color:var(--accent); background:#fff0eb; }
.dish-meta { display:flex; gap:20px; padding-bottom:17px; border-bottom:1px solid #eef0ea; color:#647268; font-size:11px; }
.dish-meta label { display:flex; align-items:center; gap:6px; }
.dish-meta input,.dish-meta select { width:42px; border:0; border-bottom:1px solid #d4dbd2; background:transparent; outline:0; color:var(--ink); font-size:12px; }
.dish-meta select { width:82px; }
.ingredients-head,.ingredient-row { display:grid; grid-template-columns:minmax(0,1fr) 130px 30px; gap:10px; align-items:center; }
.ingredients-head { padding:16px 0 7px; color:#839087; font:500 10px "DM Mono", monospace; text-transform:uppercase; letter-spacing:.08em; }
.ingredient-row { margin:4px 0; }
.ingredient-row input { width:100%; border:1px solid transparent; border-radius:5px; padding:7px 8px; outline:0; background:#f7f8f3; color:var(--ink); font-size:12px; }
.ingredient-row input:focus { border-color:#abc3ae; background:white; }
.add-ingredient { padding:10px 4px 0; border:0; background:transparent; color:#5b8966; font-size:11px; font-weight:700; }
.add-ingredient:hover { color:var(--accent); }
.empty-state { display:grid; justify-items:center; text-align:center; padding:76px 10px 45px; }
.empty-state h3 { margin:15px 0 8px; font-size:25px; }
.empty-state p { max-width:305px; margin:0 0 22px; color:var(--muted); font-size:13px; line-height:1.7; }
.empty-icon { display:grid; place-items:center; width:45px; height:45px; border-radius:50%; color:var(--accent); background:#ffece6; }
.progress-wrap { padding:0 0 21px; border-bottom:1px solid var(--line); }
.progress { height:5px; overflow:hidden; border-radius:9px; background:#e6ebe4; }.progress span { display:block; width:0; height:100%; border-radius:inherit; background:#759d77; transition:width .25s ease; }
#progress-text { margin:8px 0 0; color:#78877d; font-size:11px; }
.shopping-list { display:grid; gap:2px; margin:19px 0; padding:0; list-style:none; max-height:420px; overflow:auto; }
.shopping-list li { display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid #f0f1eb; font-size:12px; }
.shopping-list label { display:flex; flex:1; align-items:center; gap:10px; cursor:pointer; }.shopping-list input { appearance:none; width:16px; height:16px; margin:0; border:1px solid #b7c6b7; border-radius:4px; }.shopping-list input:checked { border-color:#729b76; background:#729b76 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat; }.shopping-list li:has(input:checked) span { color:#9ca79f; text-decoration:line-through; }.amount { color:#718177; font:500 10px "DM Mono", monospace; white-space:nowrap; }
.empty-shopping { color:#849087; font-size:12px; line-height:1.6; }.list-actions { display:flex; gap:9px; margin-top:22px; }.list-actions .button { flex:1; }
@media (max-width:800px) { .shell{padding:45px 16px}.hero{display:block;padding-bottom:31px}.stats{margin-top:35px;max-width:460px}.workspace{grid-template-columns:1fr}.shopping-card{position:static}.dishes-card,.shopping-card{padding:22px}.ingredients-head,.ingredient-row{grid-template-columns:minmax(0,1fr) 104px 26px} }
@media print { body{background:white}.shell{padding:0}.hero,.dishes-card,.list-actions,.text-button{display:none}.workspace{display:block}.shopping-card{border:0;box-shadow:none;padding:0}.shopping-list{max-height:none}.shopping-list input{display:none} }