body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #0f0f1a, #1a1a2e);
  color: white;
  overflow: hidden;
}

/* Pages */
.page {
  display: none;
  height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 20px;
}

.active {
  display: flex;
  animation: fade 0.7s;
}

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

/* Text */
h1 {
  color: #ff4d88;
  text-shadow: 0 0 20px rgba(255,77,136,0.6);
}

button {
  margin-top: 20px;
  padding: 12px 25px;
  border-radius: 25px;
  border: none;
  background: linear-gradient(45deg, #ff4d88, #a18cd1);
  color: white;
}

/* Chat */
.chat {
  width: 90%;
  max-width: 300px;
}

.msg {
  padding: 10px;
  margin: 8px;
  border-radius: 15px;
  max-width: 70%;
}

.left {
  background: #333;
  align-self: flex-start;
}

.right {
  background: #ff4d88;
  align-self: flex-end;
}

/* Cards */
.cards div {
  background: rgba(255,255,255,0.05);
  margin: 5px;
  padding: 10px;
  border-radius: 10px;
}

/* Gallery */
.gallery img {
  width: 90px;
  margin: 5px;
  border-radius: 10px;
}

/* Floating Hearts */
.hearts::before,
.hearts::after {
  content: "💖 💕 💗 💓 💞";
  position: absolute;
  width: 100%;
  animation: float 10s linear infinite;
}

@keyframes float {
  from {transform: translateY(100vh);}
  to {transform: translateY(-100vh);}
}