:root{
  --bordeaux:#6b0f1a;
  --baby:#ffcbe3;
  --noir:#0f0f10;
  --muted:#bdbdbd;
}
*{box-sizing:border-box;font-family:'Poppins',sans-serif;margin:0;padding:0;}
body{
  min-height:100vh;
  color:var(--baby);
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow-x:hidden;
  position:relative;
}

/* Animated gradient background */
body::before{
  content:'';
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(-45deg, var(--bordeaux), #330000, #1a0000, var(--noir));
  background-size:400% 400%;
  animation:gradientBG 15s ease infinite;
  z-index:-2;
}
@keyframes gradientBG{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

header{
  width:100%;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.1);
  position:sticky;
  top:0;
  z-index:100;
}
.brand{display:flex;align-items:center;gap:12px;position:relative;z-index:101;}
.brand .logo{
  width:60px;height:60px;border-radius:12px;
  background:var(--baby);
  display:flex;align-items:center;justify-content:center;
  color:var(--bordeaux);
  font-weight:700;font-size:22px;
  animation:logoPulse 2s infinite ease-in-out;
}
@keyframes logoPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,203,227,0.6);} 
  50%{transform:scale(1.1);box-shadow:0 0 20px 5px rgba(255,203,227,0.6);} 
}
.brand h1{color:var(--baby);font-size:22px;margin:0;}
nav{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:101;}
nav button{
  background:transparent;border:0;color:#fff;padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:600;
  transition:all 0.3s ease;
  pointer-events:auto;
}
nav button.active{background:var(--baby);color:var(--bordeaux);transform:scale(1.05);} 

main{width:100%;max-width:1000px;padding:28px;position:relative;z-index:5;}

/* Hero */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  margin-bottom:30px;
}
.photo{
  width:200px;height:200px;
  border-radius:16px;
  overflow:hidden;
  border:4px solid var(--baby);
  box-shadow:0 0 25px rgba(255,203,227,0.5);
  display:flex;align-items:center;justify-content:center;
  transition: all 0.8s ease;
  background:rgba(255,203,227,0.05);
}
.photo img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  transition:all 1s ease;
}
.photo:hover img{
  transform:scale(1.05);
  filter:brightness(1.1);
}
.hero .title h2{color:var(--baby);font-size:26px;text-align:center;}
.hero .title p{color:var(--muted);margin-top:6px;text-align:center;}

.countbox{
  margin-top:20px;
  padding:20px 30px;
  border-radius:12px;
  background:rgba(0,0,0,0.4);
  text-align:center;
  backdrop-filter:blur(5px);
}
.countbox h3{color:var(--baby);margin-bottom:10px;}
.countbox .count{color:var(--muted);font-size:22px;font-weight:700;letter-spacing:0.5px;}

/* Celebration pulse for birthday */
.countbox.happy{
  animation:happyPulse 0.9s ease-in-out 3;
  box-shadow:0 0 30px rgba(255,203,227,0.25), inset 0 0 20px rgba(255,203,227,0.03);
}
@keyframes happyPulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.04);}
  100%{transform:scale(1);}
}

.tab-music {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
}
/* Tabs */
.tabs-area{width:100%;margin-top:30px;}
.tab{display:none;animation:fadeIn 0.7s ease;}
.tab.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(15px);}to{opacity:1;transform:translateY(0);}}

.single-wish{
  font-size:18px;
  color:#fff;
  background:rgba(255,203,227,0.1);
  padding:20px;
  border-radius:12px;
  border:1px solid rgba(255,203,227,0.2);
  animation:fadeIn 1s ease;
  line-height:1.5;
  backdrop-filter:blur(3px);
}

/* Wish Generator */
.generator{display:flex;flex-direction:column;align-items:center;gap:16px;padding:12px 0;width:100%;}
.control{display:flex;justify-content:center;width:100%;}
.wish-list{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:8px;}
.wish-card{
  width:100%;padding:14px;border-radius:12px;background:rgba(255,203,227,0.05);margin-bottom:0;
  animation:slideIn 0.6s ease;box-sizing:border-box;
}
@keyframes slideIn{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:translateX(0);}}
.control{min-width:220px;}
.big-wish{
  font-size:18px;padding:18px;border-radius:12px;background:var(--baby);
  color:var(--bordeaux);font-weight:700;text-align:center;
  animation:popIn 0.5s ease;
  cursor:pointer;
}
@keyframes popIn{0%{transform:scale(0.9);opacity:0;}100%{transform:scale(1);opacity:1;}}

/* Floating hearts */
.hearts span{
  position:fixed;bottom:-10px;width:15px;height:15px;background:var(--baby);
  opacity:0.8;
  clip-path:polygon(50% 0%, 61% 19%, 82% 19%, 68% 34%, 72% 54%, 50% 45%, 28% 54%, 32% 34%, 18% 19%, 39% 19%);
  animation:floatUp linear infinite;
  z-index:0;
}
@keyframes floatUp{
  0%{transform:translateY(0) scale(1);} 
  100%{transform:translateY(-110vh) scale(0.6);opacity:0;} 
}

footer{margin:28px 0;color:var(--muted);font-size:13px;}
@media(max-width:780px){
  .hero{flex-direction:column;}
  .photo{width:160px;height:160px;}
  nav{overflow:auto;}
}