body {
  margin:0;
  font-family:Segoe UI,sans-serif;
  background:linear-gradient(135deg,#2b0f3b,#0f172a);
  color:#ffe6f0;
  overflow-x:hidden;
}

.app {
  max-width:450px;
  margin:auto;
  padding:20px;
  text-align:center;
}

h1 { font-size:28px; margin-bottom:5px; }
.tagline { font-size:14px; opacity:0.8; }

input, button {
  width:100%;
  padding:12px;
  margin:8px 0;
  border-radius:12px;
  border:none;
  font-size:16px;
}

button {
  background:linear-gradient(90deg,#ff3cac,#784ba0);
  color:white;
  cursor:pointer;
  font-weight:bold;
  transition:0.3s;
}
button:hover { transform:scale(1.05); }

.cards {
  margin-top:20px;
  display:grid;
  gap:15px;
}

.card {
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
  padding:15px;
  border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
  opacity:0;
  animation: fadeIn 1s forwards;
}

.premium { border:1px solid #ff3cac; }

.hidden { display:none; }
#loading { margin-top:15px; font-style:italic; opacity:0.8; }

@keyframes fadeIn {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}

/* Floating Heart Animation */
body::after {
  content:"💖";
  position:fixed;
  font-size:50px;
  opacity:0.1;
  animation: floatHeart 8s infinite;
}
@keyframes floatHeart {
  0% {transform:translate(0,0) rotate(0deg);}
  50% {transform:translate(200px,-400px) rotate(360deg);}
  100% {transform:translate(-100px,-800px) rotate(720deg);}
}