/* Modern, clean UI */
.fccp-wrap{max-width:1000px;margin:20px auto;padding:18px;border:1px solid #eee;border-radius:18px;box-shadow:0 6px 24px rgba(0,0,0,0.06);background:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.fccp-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.fccp-header h2{margin:0;font-size:22px;color:#0f172a}
.fccp-actions{display:flex;gap:8px;align-items:center}
.fccp-servings{display:flex;align-items:center;gap:6px;font-weight:600}
.fccp-servings input{width:90px;padding:8px;border:1px solid #d1d5db;border-radius:10px}

.btn{padding:8px 12px;border:0;border-radius:10px;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,0.04)}
.btn.add{background:#16a34a;color:#fff}
.btn.del{background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0}
.btn.export{background:#2563eb;color:#fff;margin-right:6px}

.fccp-tablewrap{overflow:auto;margin-top:10px}
.fccp-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.fccp-table thead th{background:#f8fafc;padding:10px;border:1px solid #e5e7eb;border-bottom:2px solid #e5e7eb}
.fccp-table td{background:#fff;border-bottom:1px solid #f1f5f9;padding:8px}
.fccp-table input,.fccp-table select{width:100%;padding:8px;border:1px solid #d1d5db;border-radius:8px}

.fccp-table tfoot th{background:#fafafa;border:1px solid #e5e7eb;padding:10px;font-size:15px}
.fccp-note{font-size:12px;opacity:.7;margin-top:8px}

@media (max-width:640px){
  .fccp-servings{width:100%;justify-content:space-between}
  .btn.export{width:100%;margin-top:6px}
}