:root{
  --bg:#fedbff;
  --card:#fff;
  --accent:#f3a2cc; /* soft pink */
  --accent-dark:#ea5ea7;
  --text:#3b2a2f;
  --muted:#7a6b6f;
  --shadow: 0 6px 20px rgba(59,42,47,0.08);
  --radius:14px;
  --font-sans: "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background: linear-gradient(180deg, #fedbff 0%, #fffafc 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:32px;
  display:block;
}

/* Container */
.container{
  width:100%;
  max-width:920px;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  padding:28px;
}

/* Hero */
.hero{
  display:flex;
  gap:22px;
  align-items:center;
  border-radius:12px;
  padding:10px;
  background:
    radial-gradient(circle at 10% 20%, rgba(246,184,217,0.14), transparent 60%),
    linear-gradient(90deg, rgba(246,184,217,0.06), rgba(232,139,183,0.04));
}

.hero-photo{
  width:160px;
  height:160px;
  object-fit:cover;
  border-radius:12px;
  border:6px solid rgba(246,184,217,0.18);
  box-shadow:0 8px 24px rgba(232,139,183,0.12);
  flex-shrink:0;
}

/* Hero text */
.hero-text h1{
  margin:0 0 6px 0;
  font-size:1.6rem;
  letter-spacing:0.2px;
}
.subtitle{margin:0;color:var(--muted)}
.due{
  margin-top:8px;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:700;
}

/* Info card */
.info-card{
  margin-top:20px;
  padding:18px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(246,184,217,0.03), rgba(246,184,217,0.01));
  border:1px solid rgba(232,139,183,0.06);
}
.info-card h2{margin:0 0 8px 0}

/* Actions (buttons) */
.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  padding:12px 16px;
  border-radius:10px;
  background:linear-gradient(180deg, #fff, #fff9fb);
  border:1px solid rgba(232,139,183,0.12);
  color:var(--text);
  box-shadow:0 6px 18px rgba(232,139,183,0.06);
  transition:transform .12s ease, box-shadow .12s ease;
  font-weight:600;
}
.btn i{color:var(--accent-dark); font-size:1.05rem}
.btn:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(232,139,183,0.10)}
.btn:active{transform:translateY(0)}

/* Footer */
.footer{
  margin-top:22px;
  text-align:center;
  color:var(--muted);
  font-size:0.95rem;
}

/* Responsive */
@media (max-width:700px){
  .hero{flex-direction:row; gap:16px}
  .hero-photo{width:120px;height:120px}
  .container{padding:20px}
}

/* Desktop centering */
@media (min-width: 768px){
  body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
  }

  .container{
    margin: auto 0; /* prevents clipping if content grows */
  }
}