#paneCost { --ink:#18352e; --green:#16654f; --muted:#64756e; color:var(--ink); font-size:14px; }
.cost-workspace-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px; background:#edf4ef; border:1px solid #d9e6dd; border-radius:18px; }
.cost-workspace-header h1 { font-size:clamp(23px,3vw,32px); font-weight:800; letter-spacing:-.6px; margin:8px 0; line-height:1.2; }
.cost-workspace-header p,.cost-help { color:#62736b; font-size:13px; line-height:1.7; }
.cost-eyebrow { display:block; font-size:10px; font-weight:800; letter-spacing:1.3px; color:#587568; text-transform:uppercase; }
.cost-primary { background:#185b47; color:white; padding:13px 18px; border-radius:10px; font-weight:700; white-space:nowrap; }
.cost-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.cost-stat { background:white; border:1px solid #dfe6e1; border-radius:12px; padding:17px 20px; text-align:left; }
.cost-stat span { display:block; font-size:12px; color:#64756e; }.cost-stat strong { display:block; font-size:27px; margin-top:6px; }
.cost-notice { padding:12px 15px; border:1px solid #dbe7dd; border-radius:10px; background:#f2f7f3; color:#3b6250; font-size:12px; line-height:1.6; }
.cost-notice-warning { background:#fff6e8; border-color:#eed8b3; color:#8d5423; }
.cost-toolbar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }.cost-toolbar input { flex:1; min-width:180px; }.cost-toolbar input,.cost-toolbar select { padding:11px 13px; border:1px solid #dce4df; border-radius:9px; background:white; }
.drink-card { background:white; border:1px solid #dfe5e0; border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:15px; box-shadow:0 2px 5px #17352604; }
.drink-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.drink-heading h3 { font-size:17px; font-weight:750; margin:5px 0; line-height:1.4; }.drink-price { font-size:14px; white-space:nowrap; padding:6px 8px; background:#eff5f0; border-radius:7px; color:#286344; }.cost-muted { color:#7a8981; font-size:11px; }
.drink-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.drink-metrics span { display:block; color:#6e7d74; font-size:11px; }.drink-metrics strong { display:block; font-size:20px; margin-top:5px; }.cost-positive { color:#1e7654; }.cost-loss { color:#b74435; }
.cost-meter { height:5px; border-radius:5px; background:#edf1ed; overflow:hidden; }.cost-meter span { display:block; background:#5f947a; height:100%; }.cost-meter .meter-high { background:#d99a47; }.cost-card-note { font-size:11px; color:#68796e; margin-top:-7px; }
.cost-card-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; border-top:1px solid #edf0eb; margin-top:auto; }.cost-card-actions button { font-size:11px; color:#29684e; font-weight:650; background:#f4f7f3; border-radius:6px; padding:7px 9px; }.cost-card-actions .cost-delete { margin-left:auto; color:#a45849; }
.cost-empty { padding:28px; border:1px dashed #cddace; border-radius:12px; color:#64756e; grid-column:1/-1; }.cost-link,.cost-inline-actions button { color:#1e6b50; font-weight:700; font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.cost-form-extra label { display:flex; flex-direction:column; gap:6px; font-weight:700; }.cost-form-extra input { border:1px solid #d2dfd5; border-radius:9px; padding:10px; }.cost-form-extra small { font-weight:400; color:#687b6c; font-size:11px; line-height:1.5; }
#paneCost button,#paneCost input,#paneCost select { min-height:36px; }#paneCost table th { text-align:left; padding-top:12px; padding-bottom:12px; }#paneCost table td { vertical-align:middle; }
#recipeModal>div,#recipeDetailModal>div,#preparedBatchModal>div,#ingredientModal>div,#conversionModal>div { max-height:92dvh; overflow-y:auto; }#recipeModal>div,#recipeDetailModal>div { max-width:850px; }#recipeItemsRowsContainer>div { flex-wrap:wrap; gap:8px; padding:12px; }#recipeItemsRowsContainer .rec-ing-id { width:calc(100% - 10px); }#recipeItemsRowsContainer .rec-ing-qty,#recipeItemsRowsContainer .rec-ing-unit { width:calc(28% - 8px); min-height:38px; }#recipeItemsRowsContainer .rec-loss { min-height:38px; }
#ingredientUsageModal th,#ingredientUsageModal td { padding:12px 8px; }#ingredientUsageModal td { line-height:1.6; }#multiPlanResult th,#multiPlanResult td { padding:10px 8px; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #82ad93; outline-offset:2px; }
@media(max-width:640px) { .cost-workspace-header { padding:20px; flex-direction:column; align-items:stretch; }.cost-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.cost-stat { padding:13px; }.drink-card { padding:16px; }.drink-heading { flex-direction:column; }.drink-price { align-self:flex-start; }#paneCost { font-size:13px; }#ingredientUsageModal { padding:8px; }#recipeModal,#ingredientModal,#preparedBatchModal { padding:8px; } }

/* App navigation stays in a single left-hand column; mobile uses the same drawer. */
#appSection { --sidebar-width:264px; background:#f5f7f4; }
#appSidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar-width); z-index:45; display:flex; flex-direction:column; padding:25px 16px 18px; background:#102d25; color:#d3e0d8; overflow-y:auto; }
#appSidebar .sidebar-brand { display:flex; align-items:center; gap:12px; padding:0 8px 25px; color:#fff; font-size:19px; font-weight:800; letter-spacing:1px; text-decoration:none; }
.sidebar-logo { width:40px; height:40px; display:grid; place-items:center; background:#dce9a8; border-radius:12px; color:#17392c; font-size:15px; }
.sidebar-brand small { display:block; margin-top:4px; color:#98b4a5; font-size:8px; letter-spacing:1.3px; }
.sidebar-label { display:block; font-size:9px; letter-spacing:1.6px; font-weight:750; color:#86a392; padding:20px 12px 10px; }
#appSidebar nav { display:flex; flex-direction:column; gap:4px; }
#appSidebar .hidden { display:none !important; }
#appSidebar nav button { width:100%; justify-content:flex-start; border:0; background:transparent; color:#b5cabe; font-size:12px; font-weight:550; padding:11px 13px; line-height:1.5; border-radius:9px; white-space:normal; text-align:left; min-height:42px; }
#appSidebar nav button:not(.hidden) { display:flex; align-items:center; gap:10px; }
#appSidebar nav button:hover { background:#1d4033; color:#fff; }
#appSidebar nav button[aria-current=page] { background:#ddebaf; color:#193e2c; font-weight:800; }
#appSidebar nav button[aria-current=page] i { color:#315a35; }
#appSidebar .sidebar-subnav { padding-left:19px; margin:1px 0 8px 15px; border-left:1px solid #315043; }
#appSidebar .sidebar-subnav button { min-height:36px; padding:8px 10px; font-size:11px; }
#appSidebar .sidebar-subnav button.bg-amber-500 { background:#234839; color:#e5f2d5; }
.sidebar-hours { margin-top:auto; padding:30px 12px 0; color:#7e9f8b; font-size:9px; letter-spacing:1px; }.sidebar-hours strong { display:block; font-size:16px; color:#d4e2d5; margin-top:7px; letter-spacing:.5px; }.sidebar-hours span { display:block; font-size:10px; letter-spacing:0; margin-top:5px; }
#appHeader,#appMain { margin-left:var(--sidebar-width); width:calc(100% - var(--sidebar-width)); max-width:none; }
#appHeader>div { max-width:1500px; }#appMain { padding:26px 32px 50px; }#appHeader { z-index:30; }#appHeader .h-16 { height:70px; }
#sidebarToggle,#sidebarBackdrop { display:none; }
.cold-whisk-example { display:flex; justify-content:space-between; align-items:center; gap:24px; background:#fff; border:1px solid #d9e1d9; border-radius:16px; padding:25px 28px; border-left:5px solid #7d9b53; }.cold-whisk-example.hidden { display:none; }.example-copy h2 { font-size:25px; font-weight:800; letter-spacing:-.5px; margin:7px 0; }.example-copy>p { color:#647569; font-size:12px; }.example-total { background:#eff4e9; border:1px solid #e2ead8; border-radius:12px; padding:22px 25px; min-width:220px; }.example-total>span { display:block; font-size:9px; font-weight:750; letter-spacing:1px; color:#617650; }.example-total strong { display:block; font-size:34px; font-weight:800; color:#355332; letter-spacing:-1px; padding:8px 0; }.example-total small { color:#738266; font-size:11px; }
.example-copy { flex:1; min-width:0; }.example-total { flex:0 0 240px; }.example-total strong { white-space:nowrap; }
#recipeDetailItemsBody .cost-category-row td { background:#f1f5ef; color:#5a6f56; font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.5px; padding:9px 12px; }
#recipeDetailModal table { font-variant-numeric:tabular-nums; }#recipeDetailModal table td:last-child { text-align:right; font-weight:750; }#recipeDetailModal table td { font-size:12px; border-bottom:1px solid #edf0e9; }
@media(min-width:1600px) { #appMain { padding-left:45px; padding-right:45px; } }
@media(max-width:1100px) and (min-width:961px) { #appSection { --sidebar-width:230px; }#appMain { padding:20px; }#recipesGrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:960px) { #appSidebar { transform:translateX(-100%); transition:transform .18s ease; width:264px; }#appHeader,#appMain { margin-left:0; width:100%; }#appMain { padding:18px 16px 35px; }#sidebarToggle { display:block; padding:8px 10px; color:#254c39; font-size:12px; font-weight:700; border:1px solid #d7e2d7; border-radius:7px; }#appSection.sidebar-open #appSidebar { transform:translateX(0); }#appSection.sidebar-open #sidebarBackdrop { display:block; position:fixed; inset:0; background:#0a211c80; z-index:44; }#appHeader .h-16 { gap:8px; }#appHeader .h-16>div:first-of-type { display:none; }.cold-whisk-example { padding:20px; flex-wrap:wrap; }.example-total { min-width:0; flex:1; }.example-total strong { font-size:29px; } }
@media(prefers-reduced-motion:reduce) { #appSidebar { transition:none; } }
@media(max-width:960px) { .example-total { flex:0 0 220px; } }
@media(max-width:640px) { .example-copy,.example-total { flex-basis:100%; }.cold-whisk-example { gap:16px; }.example-total { padding:16px 20px; } }