:root{
  /* Soft pink theme */
  --bg1:#fff7fb;      /* whisper pink */
  --bg2:#ffeaf5;      /* light pink */
  --card:#ffffff;     /* white card */
  --text:#4a2c41;     /* deep plum text */
  --muted:#8b617a;    /* muted pink-brown */
  --accent:#d76aa6;   /* brand pink accent */
  --accent-2:#f09ac6; /* lighter accent */
  --border:#f5cfe0;   /* subtle border */
  --shadow:0 16px 30px rgba(215,106,166,0.15);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 10% 15%, var(--bg2) 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 10%, #fff 0%, transparent 60%),
    var(--bg1);
  display:flex; align-items:center; justify-content:center;
}

.wrap{width:min(980px,94%); margin:auto;}

.brand{ text-align:center; margin-bottom:2rem; }

.logo{
  height:96px;
  width:auto;  /* keeps correct aspect ratio */
  display:block;
  margin:0 auto;
  filter: drop-shadow(0 6px 18px rgba(215,106,166,.25));
}

h1{
  font-weight:600;
  font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem);
  margin:1rem 0 .5rem;
  color:var(--text);
}

.subtitle{ color:var(--muted); margin:0 auto 1.5rem; max-width:42ch; }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.95));
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.25rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.card h2{ margin-top:0; color:var(--text); }

.countdown{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-size:1.2rem;
  margin:.5rem 0 1rem;
  color:var(--text);
}

.notify{ margin-top:.5rem; }
.notify label{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:.4rem; }

.notify-row{ display:flex; gap:.5rem; }

.notify input{
  flex:1;
  padding:.8rem 1rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  outline:none;
}
.notify input:focus{
  border-color:var(--accent-2);
  box-shadow:0 0 0 3px rgba(240,154,198,.25);
}

.notify button{
  padding:.8rem 1rem;
  border-radius:10px;
  border:0;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:white;
  font-weight:600;
  cursor:pointer;
}

.notify small{ display:block; margin-top:.4rem; color:var(--muted); }

.footer{ text-align:center; color:var(--muted); margin-top:1.25rem; }
.footer a{ color:var(--accent); text-decoration:none; }
.footer a:hover{ text-decoration:underline; }

@media (max-width:560px){
  .notify-row{ flex-direction:column; }
  .notify button{ width:100%; }
}