/* Four soft compartments, sharing the same quiet surface as the machine. */
.section-label{font-size:10px;letter-spacing:.8px;color:#87917a;margin:0 0 12px}
.section-label>span:first-child{font-size:12px;letter-spacing:1.5px;color:#657457}
#ingredientCount{font-variant-numeric:tabular-nums;letter-spacing:2px}
#ingredients{gap:12px 14px}
#ingredients .ingredient{min-height:178px;gap:0;padding:12px 10px 10px;border:1px solid transparent;border-radius:15px;background:#f0f1e8;box-shadow:none;transition:background .2s,border-color .2s,opacity .2s}
#ingredients .ingredient .icon{width:104px;height:94px;margin:0 0 7px}
#ingredients .ingredient .icon img{width:104px;height:94px;filter:none;transition:transform .25s ease}
.ingredient-render{display:block;object-fit:contain;pointer-events:none;user-select:none}
.ingredient .slot-number{display:none}
#ingredients .ingredient .info{gap:4px}
#ingredients .ingredient strong{font:400 13px/1.4 'Segoe UI','Microsoft YaHei',sans-serif;letter-spacing:.3px;color:#4f5f43}
#ingredients .ingredient small{font-size:10px;color:#89937e;font-variant-numeric:tabular-nums}
#ingredients .ingredient .slot-status{font-size:9px;line-height:1.4;letter-spacing:0;color:#849573;margin-top:9px}
#ingredients .ingredient:not(:disabled):hover{background:#e8eddf;border-color:#c5d0b4;transform:none;filter:none}
#ingredients .ingredient:not(:disabled):hover .icon img{transform:translateY(-3px) rotate(-3deg)}
#ingredients .ingredient:focus-visible{outline:2px solid #899d71;outline-offset:3px}
#ingredients .ingredient.added{opacity:1;background:#e9ede1;border-color:transparent}
#ingredients .ingredient.added .icon{opacity:.42}
#ingredients .ingredient.added .slot-status{color:#6c8057}
#ingredients .ingredient.dragging{opacity:.45;border:1px dashed #9cae84;background:#e8eddf}
body[data-tutorial='active'] #ingredients .ingredient{min-height:147px;padding:10px 8px}
body[data-tutorial='active'] #ingredients .ingredient .icon{width:82px;height:72px;margin-bottom:5px}
body[data-tutorial='active'] #ingredients .ingredient .icon img{width:82px;height:72px}
body[data-tutorial='active'] #ingredients .ingredient:not(.added) .slot-status{display:none}
body[data-tutorial='active'] #ingredients .ingredient.guide-item{background:#e9eddd;border-color:#a7b78c;box-shadow:none;animation:none}
#extras{margin-top:14px}
#extras .ingredient{background:#f0f1e8;border:1px solid transparent;border-radius:13px;padding:10px 15px;gap:13px}
#extras .ingredient .icon,#extras .ingredient .icon img{width:60px;height:55px;filter:none}
#extras .ingredient .slot-status{margin-left:auto;font-size:9px}
#extras .ingredient:not(:disabled):hover,#extras .ingredient.guide-item{background:#e9eddd;border-color:#a7b78c;box-shadow:none;animation:none}
.inventory-ghost{filter:drop-shadow(0 5px 5px #34432615)}
.inventory-ghost .ingredient-render{width:70px;height:80px;object-fit:contain}
@media(max-width:760px){#ingredients{gap:10px}#ingredients .ingredient{min-height:167px;padding:14px 8px}body[data-tutorial='active'] #ingredients .ingredient{min-height:150px}}