/* Touch-friendly styling */
#cupping-app *{box-sizing:border-box;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
#cupping-app{margin:0;padding:0;line-height:1.45}
#cupping-app header{padding:16px 20px;border:1px solid #ddd;border-radius:8px;background:#fafafa;margin-bottom:12px}
#cupping-app .controls{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:12px 20px;border:1px solid #eee;border-radius:8px;margin-bottom:12px;align-items:start}
#cupping-app label{font-weight:600;margin-bottom:6px;display:block}
#cupping-app main{padding:0 0 16px 0;max-width:1100px}
#cupping-app .meta{margin-bottom:12px;padding:10px;border:1px solid #e5e5e5;border-radius:8px;background:#fff}
#cupping-app footer{padding:12px 0;color:#555}
#cupping-app select{padding:10px 12px;border-radius:10px;border:1px solid #ccc;width:100%}
#cupping-app .coffee-list{display:flex;flex-wrap:wrap;gap:8px}
#cupping-app .coffee-pill{padding:10px 12px;border-radius:20px;border:1.5px solid #ccc;background:#fff;cursor:pointer;user-select:none}
#cupping-app .coffee-pill.selected{border-color:#222;background:#f0f0f0}
#cupping-app .coffee-pill.disabled{opacity:.45;pointer-events:none}
#cupping-app .actions{display:flex;gap:10px;flex-wrap:wrap}
#cupping-app button{padding:10px 14px;border-radius:10px;border:1px solid #ccc;background:#f5f5f5;cursor:pointer}
#cupping-app button:hover{background:#efefef}
#cupping-app input[type="search"]{padding:10px 12px;border-radius:10px;border:1px solid #ccc;width:100%}
#cupping-app canvas{max-width:100%;height:auto}
.hint{font-size:12px;color:#666;margin-top:4px}
@media (max-width:760px){
  #cupping-app .controls{grid-template-columns:1fr}
}