.costGate{display:flex;align-items:center;gap:18px;padding:24px;background:#fffdf8;border:1px solid #cfe2d7;border-radius:16px}.costGate img{width:58px;height:58px;object-fit:contain}.costGate div{flex:1}.costGate h2{margin:0 0 4px;font-size:19px;color:#07343b}.costGate p{margin:0;color:#627b74;font-size:13px}.costGate button,.costToolbar button,.costActions button,.costAdd{border:1px solid #b9d9cd;border-radius:9px;background:#eaf6f0;color:#07545a;padding:10px 14px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}.costGate button:hover,.costToolbar button:hover,.costActions button:hover,.costAdd:hover{filter:brightness(.96)}.costToolbar{display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(180px,1fr) auto;gap:13px;align-items:end;background:#fffdf8;border:1px solid #d4e5de;border-radius:16px;padding:18px}.costToolbar label,.costFields label{display:grid;gap:7px;font-size:12px;font-weight:800;color:#43665e}.costToolbar input,.costToolbar select,.costFields input,.costItems input,.costItems select{min-width:0;width:100%;height:42px;padding:0 11px;border:1px solid #c5dcd2;border-radius:9px;background:#fff;color:#07343b;font:inherit;font-size:14px;outline:none}.costToolbar input:focus,.costToolbar select:focus,.costFields input:focus,.costItems input:focus,.costItems select:focus{border-color:#07847f;box-shadow:0 0 0 3px #07847f22}.costToolbarActions{display:flex;gap:7px;flex-wrap:wrap}.costToolbar .costPrimary{background:#00666a;border-color:#00666a;color:#fff}.costToolbar button:disabled{opacity:.45;cursor:not-allowed}.costStatus{min-height:20px;margin:9px 2px 13px;font-size:12px;color:#176653}.costStatus.error{color:#a53427}.costLayout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);gap:17px;align-items:start}.costInputs{display:grid;gap:15px}.costCard,.costResults{background:#fffdf8;border:1px solid #d4e5de;border-radius:16px;padding:22px;box-shadow:0 10px 22px #113f3b0b}.costCardHead{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}.costCardHead>span{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:#e7f3ec;border:1px solid #bddbd0;color:#a9652e;font:800 11px Georgia,serif}.costCardHead h2{margin:1px 0 4px;font-size:18px;color:#07343b}.costCardHead p{margin:0;color:#6b827a;font-size:12px;line-height:1.5}.costFields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.costFields.three{grid-template-columns:repeat(3,minmax(0,1fr))}.costItemHead,.costItem{display:grid;grid-template-columns:minmax(190px,1.6fr) minmax(160px,1.2fr) 90px 100px 85px 28px;gap:7px;align-items:center}.costItemHead{padding:0 0 8px;color:#648077;font-size:11px;font-weight:800}.costItems{display:grid;gap:9px}.costItem{padding:10px;border:1px solid #dae9e0;border-radius:11px;background:#f9fcf9}.costItem .itemIdentity,.costItem .itemMeta{display:grid;grid-template-columns:1fr;gap:5px}.costItem .itemMeta{grid-template-columns:1fr 68px}.costItem input{height:35px;font-size:12px}.costItem select{height:35px;padding:0 5px;font-size:11px}.costItem .itemTotal{text-align:right;font-weight:800;font-size:12px;color:#07565c;font-variant-numeric:tabular-nums}.costItem .removeItem{width:26px;height:30px;border:0;background:transparent;color:#ad5540;font-size:20px;cursor:pointer}.costAdd{margin-top:13px}.costHint{margin:11px 0 0;color:#81958e;font-size:11px}.costResults{position:sticky;top:20px;background:linear-gradient(160deg,#073f46,#052c34);border-color:#0e6267;color:#fff}.costResultTop{display:flex;justify-content:space-between;gap:10px;align-items:center;padding-bottom:15px;border-bottom:1px solid #ffffff30}.costResultTop span{font-size:13px;color:#e9bb71;font-weight:800}.costResultTop strong{font-size:13px;color:#ddf0e9}.costKpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:15px 0}.costKpis>div{padding:12px;border:1px solid #ffffff20;border-radius:10px;background:#ffffff0c;min-width:0}.costKpis>div.highlight{background:#f2ad5a18;border-color:#e7b45b77}.costKpis small{display:block;min-height:31px;color:#b9d5cf;font-size:11px;line-height:1.35}.costKpis strong{display:block;margin-top:5px;color:#fff9eb;font-size:20px;line-height:1.2;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.costKpis .highlight strong{color:#ffca83}.costKpis strong.negative{color:#ff9a86}.costActions{display:flex;gap:8px;flex-wrap:wrap}.costActions button{flex:1;background:#ffb56b;border-color:#ffb56b;color:#142c2d}.costActions button+button{background:transparent;border-color:#a7cfbf;color:#e7f7ee}.costFormula,.costCaution{font-size:11px;line-height:1.65;margin:15px 0 0;color:#bbd8d0}.costCaution{padding-top:12px;border-top:1px solid #ffffff25;color:#d7c4a9}.costItem .itemTotal:before{content:"฿";margin-right:2px}
.costInputs,.costCard{min-width:0}.costItemHead,.costItem{grid-template-columns:minmax(120px,1.5fr) minmax(110px,1fr) 70px 80px 70px 24px}
.recipeSummary{display:flex;flex-wrap:wrap;align-content:center;gap:6px 18px;color:#43665e;font-size:12px}.recipeSummary strong{color:#07545a;font-variant-numeric:tabular-nums}.recipeSummary strong.recipeInvalid{color:#af3f2e}.recipeHead,.recipeRow{display:grid;grid-template-columns:minmax(140px,1.5fr) 90px 90px 75px 85px 100px 26px;gap:7px;align-items:center}.recipeHead{margin-top:20px;padding-bottom:7px;color:#648077;font-size:11px;font-weight:800}.recipeRows{display:grid;gap:8px}.recipeRow{padding:9px;border:1px solid #dae9e0;border-radius:10px;background:#f9fcf9}.recipeRow input{width:100%;min-width:0;height:36px;padding:0 8px;border:1px solid #c5dcd2;border-radius:8px;background:#fff;color:#07343b;font:inherit;font-size:12px}.recipeRow output{font-size:12px;font-variant-numeric:tabular-nums;text-align:right;color:#07565c;overflow-wrap:anywhere}.recipeRow .removeRecipe{border:0;background:transparent;color:#ad5540;font-size:20px;cursor:pointer}.recipeButtons{display:flex;flex-wrap:wrap;gap:8px}.recipeButtons .secondary{background:#fffdf8;color:#556d64}
@media(max-width:1180px){.costLayout{grid-template-columns:1fr}.costResults{position:static}.costItemHead,.costItem{grid-template-columns:minmax(170px,1.5fr) minmax(140px,1fr) 80px 90px 80px 24px}}
@media(max-width:1180px){.recipeHead,.recipeRow{grid-template-columns:minmax(140px,1.5fr) 90px 90px 75px 85px 100px 26px}}
@media(max-width:760px){.costToolbar{grid-template-columns:1fr 1fr}.costToolbarActions{grid-column:1/-1}.costFields.three{grid-template-columns:repeat(2,minmax(0,1fr))}.costItemHead{display:none}.costItem{grid-template-columns:repeat(2,minmax(0,1fr)) 28px}.costItem .itemIdentity{grid-column:1/-1}.costItem .itemMeta{grid-column:1/-1}.costItem .itemTotal{grid-column:1/3;text-align:left}.costItem .removeItem{grid-column:3}.costGate{flex-wrap:wrap}.costGate button{width:100%}}
@media(max-width:520px){.costToolbar{grid-template-columns:1fr}.costToolbarActions{grid-column:1}.costToolbarActions button{flex:1}.costFields,.costFields.three{grid-template-columns:1fr 1fr}.costCard,.costResults{padding:17px}.costKpis strong{font-size:17px}}
@media(max-width:760px){.recipeHead{display:none}.recipeRow{grid-template-columns:repeat(2,minmax(0,1fr)) 26px}.recipeRow .recipeName{grid-column:1/-1}.recipeRow output{text-align:left}.recipeRow .removeRecipe{grid-column:3;grid-row:2}.recipeRow .recipeCost{grid-column:1/-1;font-weight:800}.recipeRow .recipeUnitMl:before{content:'ml/ชิ้น: ';color:#78918b}.recipeRow .recipeBatchMl:before{content:'ml/ล็อต: ';color:#78918b}.recipeRow .recipeCost:before{content:'ต้นทุน: ';color:#78918b}}
@media print{.sidebar,.workspaceHeader,.costToolbar,.costActions,.costAdd,.costItem .removeItem,#costStatus{display:none!important}.appShell{display:block}.workspaceMain{padding:0}.viewPanel:not([data-panel="costing"]),.costInputs{display:none!important}.costLayout{display:block}.costResults{position:static;color:#07343b;background:#fff;border-color:#aaa}.costKpis>div{background:#fff;border-color:#bbb}.costKpis small,.costKpis strong,.costFormula,.costCaution{color:#07343b!important}}