@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato&display=swap');
:root {
  --mf-font-heading: 'Playfair Display', serif;
  --mf-font-body: 'Lato', sans-serif;
  --mf-blush: #F4B6C2;
  --mf-blush-2: #FADADD;
  --mf-text: #000000;
  --mf-bg: #FFFFFF;
  --mf-card-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.mf-affirmation-card {
  font-family: var(--mf-font-body);
  max-width: 760px;
  margin: 28px auto;
  padding: 28px;
  border-radius: 16px;
  background: var(--mf-bg);
  box-shadow: var(--mf-card-shadow);
  border: 1px solid rgba(0,0,0,0.04);
  color: var(--mf-text);
  text-align: center;
}
.mf-affirmation-card h2{
  margin: 0 0 12px;
  font-size: 28px;
  color: var(--mf-text);
  font-family: var(--mf-font-heading);
}
.mf-affirmation-card .star { color: var(--mf-text); }
.mf-affirmation-card p.subtitle {
  margin: 0 0 18px;
  color: var(--mf-text);
  font-size: 16px;
}
.mf-form { display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:center; }
.mf-form input[type="text"]{
  flex:1;
  min-width:200px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.08);
  font-size:16px;
  color: var(--mf-text);
}
.mf-button {
  background: var(--mf-blush);
  color: var(--mf-text);
  padding:12px 18px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:600;
  box-shadow: 0 6px 18px rgba(244,182,194,0.18);
  transition: all 0.22s ease-in-out;
}
.mf-button:hover {
  box-shadow: 0 10px 24px rgba(244,182,194,0.35);
  transform: translateY(-2px);
}
.mf-result {
  margin-top:18px;
  padding:16px;
  border-radius:10px;
  background: rgba(244,182,194,0.06);
  border:1px solid rgba(244,182,194,0.12);
  font-size:18px;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-left:18px;
  padding-right:18px;
  color: var(--mf-text);
}
@media (max-width:520px){
  .mf-affirmation-card{ padding:20px }
  .mf-affirmation-card h2{ font-size:22px }
  .mf-result{ font-size:16px }
}