/* Refined pantry menu: warm cream, chocolate brown and matte gold accents. */
:root{--cream:#faf5ec;--pink:#ede0c5;--rose:#87671f;--brown:#3d2b23;--sub:#786553;--line:#e1d2ba;--mint:#f0e5cf;--cafe-ink:#3d2b23;--cafe-gold:#87671f}
html{background:#e9e0d2;color-scheme:light}body{background:#e9e0d2;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--brown)}
.app{background:var(--cream);box-shadow:0 0 40px #3d2b2308}
.app .hero{position:relative;min-height:0;padding:36px 24px 25px;background:#faf5ec;border-radius:0;border-bottom:1px solid var(--line);color:var(--brown)}
.app .hero:before,.app .hero:after{display:none}
.app .hero .eyebrow{color:#87671f;font-size:10px;letter-spacing:2px;font-weight:650}
.app .hero h1{font-family:inherit;font-size:39px;font-weight:650;line-height:1.08;letter-spacing:-1.8px;max-width:400px;margin:15px 0 14px;color:#3d2b23;text-shadow:none}
.app .hero p{max-width:360px;color:#786553;font-size:14px;line-height:1.6;margin-bottom:12px}
.app .hero-badge{background:transparent;color:#87671f;border:0;border-left:2px solid #b49450;border-radius:0;padding:3px 0 3px 10px;font-size:11px;font-weight:500;letter-spacing:0;margin-top:2px}
.app .tabs{background:#faf5ec;border-color:var(--line);padding:12px 18px;gap:7px}
.app .tabs .chip{background:transparent;color:#786553;border:1px solid #d8c7aa;border-radius:7px;padding:9px 13px;font-size:12px;font-weight:550}
.app .tabs .chip.active{background:#3d2b23;color:#fff;border-color:#3d2b23}
.app main{padding-top:20px}
.app h2,.app .recipeTitle{font-family:inherit;color:#3d2b23;font-weight:620;letter-spacing:-.7px}
.app h2{font-size:25px;line-height:1.25}
.app h3{font-weight:600;letter-spacing:-.2px}
.app .subtitle{color:#87671f;font-size:10px;letter-spacing:1.5px;font-weight:600}
.app .hint{color:var(--sub)}
.app .meal-nav{background:transparent;border:0;border-bottom:1px solid #dfcdaa;padding:0;gap:12px;border-radius:0;margin-bottom:25px}
.app .meal-button{background:transparent;color:#786553;border-radius:0;padding:12px 4px;font-size:14px;font-weight:550;box-shadow:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.app .meal-button.active{background:transparent;color:#3d2b23;box-shadow:none;border-bottom-color:#87671f;font-weight:650}
.app .item{background:transparent;border:0;border-bottom:1px solid #e1d2ba;border-radius:0;box-shadow:none;margin:0;padding:20px 0;gap:14px}
.app .pic,.app .food-photo img{border-radius:11px;background:#eee3d3}
.app .details strong{font-size:15px;line-height:1.45;color:#3d2b23;font-weight:650}
.app .details p{font-size:12px;line-height:1.55;color:#786553}
.app .meta{font-weight:550;font-size:11px}
.app .tiny{color:#786553}
.app .add{background:#3d2b23;color:white;border-radius:9px;width:36px;height:36px;box-shadow:none;font-weight:500}
.app .fave{color:#87671f}
.app .stock{background:#efe4cb;color:#76591d;border:0;border-radius:5px;font-weight:500}
.app .stock.partial{background:#f3e4db;color:#814637}
.app .primary{background:#3d2b23;color:white;border-radius:10px;font-size:14px;font-weight:600;box-shadow:none}
.app .secondary,.app .ing button,.app .qty button{background:#eee0c6;color:#4d3829;border-radius:9px;font-weight:550}
.app .field button{background:#3d2b23;color:white;border-radius:9px}
.app .chip,.app .mode button{background:#eee0c6;color:#624b32;border-radius:8px;font-weight:550}
.app .chip.active,.app .mode button.active{background:#87671f;color:white}
.app .surface,.app .panel{background:#fff;border:1px solid #e1d2ba;border-radius:12px;box-shadow:none}
.app .search,.app .field input,.app select{background:#fff;border-color:#d8c7aa;color:#3d2b23;border-radius:9px}
.app input::placeholder{color:#7d6958;opacity:1}
.app .search{padding:13px 14px;font-size:14px}
.app .notice{color:#76591d;border-radius:9px}
.app .category{color:#87671f;letter-spacing:.3px;font-weight:550}
.app .confirmation-mark{background:#efe4cb;color:#87671f;box-shadow:none}
.app .instruction-tick{background:#faf6ef;border-color:#e1d2ba;border-radius:10px}
.app .instruction-tick.checked{background:#efe4cb}
.app .instruction-tick input,.app .toggle input{accent-color:#87671f}
.app .timer-form:not([hidden]){background:#efe3cc;border-radius:10px}
.app .cooking-timer-tray{background:#fff;border:1px solid #b89b60;border-radius:12px}
.app .cooking-timer-row{border-color:#e1d2ba}
.app .cooking-timer-row small{display:block;color:#786553;font-size:11px;line-height:1.5;margin-top:3px}
.app #customRecipeForm input,.app #customRecipeForm textarea,.app #customRecipeForm select{background:#fff;border-color:#d8c7aa;color:#3d2b23;border-radius:9px}
.app .receipt-row{background:#faf6ef;border-color:#e1d2ba;border-radius:10px}
.app .receipt-row input,.app .receipt-row select,.app .receipt-import textarea{background:#fff;border-color:#d8c7aa;color:#3d2b23;border-radius:9px}
.app .bottom{background:#fffffffa;border-top:1px solid #e1d2ba;box-shadow:none;padding-top:12px;gap:0}
.app .bottom button{color:#7c6757;font-size:10px;font-weight:550;gap:6px;min-height:44px}
.app .bottom button.active{color:#76591d}
.app .bottom button b{font-size:0;line-height:0}
.app .bottom svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;display:block}
.app .bottom button.active svg{stroke-width:2}
.app .footer{color:#7c6757;font-size:10px;line-height:1.6;margin-top:28px}
.app button:focus-visible,.app input:focus-visible,.app select:focus-visible,.app textarea:focus-visible{outline:3px solid #bd9955;outline-offset:3px}
@media(max-width:370px){.app .hero{padding:30px 20px 23px}.app .hero h1{font-size:35px}.app h2{font-size:23px}.app .item{padding:17px 0;gap:10px}.app .details strong{font-size:14px}}
@media(min-width:600px){.app .hero{padding:40px 28px 28px}.app .hero h1{font-size:43px}.app main{padding-left:24px;padding-right:24px}.app .tabs{padding-left:24px;padding-right:24px}}
@media(prefers-reduced-motion:no-preference){.app button{transition:background-color .15s,color .15s}.app .primary:hover,.app .add:hover{background:#594033}.app .secondary:hover{background:#e4d1ac}}

/* Brown and gold framing, with the refined layout retained. */
.app .hero{background:#35251f;color:#f6ecd9;border-bottom:1px solid #b49450}
.app .hero h1{color:#e4c582}
.app .hero .eyebrow{color:#d6b770}
.app .hero p{color:#e6d7bc}
.app .hero-badge{color:#e4c582;border-left-color:#b49450}
.app .tabs .chip.active{background:#3d2b23;color:#f1dca8;border-color:#3d2b23}
.app .primary,.app .add,.app .field button{color:#f8ecd5}
.app .bottom{background:#35251ffb;border-top-color:#b49450}
.app .bottom button{color:#dfd1be}
.app .bottom button.active{color:#e4c582}

.app .meal-nav{gap:8px}.app .meal-button{min-width:0;font-size:13px;padding:12px 2px}@media(max-width:360px){.app .meal-nav{gap:5px}.app .meal-button{font-size:12px}}