#mpf-app{max-width:1100px;margin:0 auto;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.mpf-step{opacity:0;transform:translateY(12px);transition:all .35s cubic-bezier(.4,0,.2,1);pointer-events:none;display:none}
.mpf-step.active{opacity:1;transform:translateY(0);pointer-events:auto;display:block}
.mpf-actions{display:flex;gap:12px;margin-top:16px}
.mpf-actions button{padding:12px 14px;border:1px solid #ddd;background:#fff;border-radius:12px;cursor:pointer}
.mpf-actions button:disabled{opacity:.5;cursor:not-allowed}
.mpf-plans{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.mpf-plan{padding:14px 14px}
.mpf-toolbar{display:flex;gap:10px;align-items:center;margin:10px 0 12px;flex-wrap:wrap}
.mpf-toolbar input{flex:1;min-width:220px;padding:12px;border:1px solid #ddd;border-radius:12px}
.mpf-filters{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 16px}
.mpf-filters label{display:flex;gap:6px;align-items:center;border:1px solid #eee;padding:8px 10px;border-radius:999px}
.mpf-date-block{margin:18px 0;padding:12px;border:1px solid #eee;border-radius:14px}
.mpf-grid{display:grid;grid-template-columns:repeat(3, 1fr); /* max 3 per row */);gap:24px}
.mpf-card{border:1px solid #ddd;border-radius:14px;text-align:left;overflow:hidden;background:#fff;padding:0;cursor:pointer}
.mpf-card img{width:100%;height:140px;object-fit:cover;display:block}
.mpf-card-body{padding:10px}
.mpf-card-title{font-weight:600;font-size:14px;line-height:1.2}
.mpf-card.is-selected{outline:3px solid #111}
.mpf-review-date{border:1px solid #eee;padding:12px;border-radius:14px;margin:12px 0}
#mpf-status{margin-top:10px}

/* Progress bar */
.mpf-progress{margin:0 0 20px}
.mpf-progress-track{height:6px;background:#eee;border-radius:6px;overflow:hidden}
.mpf-progress-fill{height:100%;width:0%;background:#111;transition:width .4s ease}
.mpf-progress-steps{display:flex;justify-content:space-between;margin-top:8px;font-size:13px}
.mpf-progress-steps span.active{font-weight:700}

.mpf-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.5);
  z-index: 9999;
}

.mpf-modal.active { display: flex; }

.mpf-modal-content {
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  max-width: 400px;
  width: 90%;
}