:root{
  --bg:#0f0b1a;
  --card:#1b1530;
  --accent:#ff5da2;
  --muted:rgba(255,255,255,0.75);
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.04);
  --radius:14px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(255,93,162,0.06), transparent),
              radial-gradient(900px 500px at 90% 90%, rgba(255,170,200,0.03), transparent),
              var(--bg);
  color: #fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* center helpers */
.center-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}

/* landing */
.landing-card{
  width:100%;
  max-width:520px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border-radius:20px;
  padding:2.4rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  text-align:center;
  position:relative;
  border: 1px solid rgba(255,255,255,0.04);
}

.landing-card h1{
  font-size:1.8rem;
  letter-spacing:1px;
  margin-bottom:.4rem;
  text-transform:capitalize;
  color:var(--accent);
  text-shadow:0 4px 20px rgba(255,93,162,0.14);
}

/* glow text */
.glow{
  animation: glow 2.5s ease-in-out infinite;
}
@keyframes glow{
  0%,100%{text-shadow:0 6px 20px rgba(255,93,162,0.12)}
  50%{text-shadow:0 12px 40px rgba(255,93,162,0.28)}
}

.sub{color:var(--muted); margin-bottom:1rem}
input[type="text"]{
  width:100%;
  padding:0.9rem 1rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
  background:transparent;
  color:#fff;
  margin-bottom:.8rem;
  font-size:1rem;
  outline:none;
  transition:transform .18s ease, box-shadow .18s;
}
input[type="text"]:focus{ transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,0.6) }

.btn{
  padding:0.65rem 1rem;
  border-radius:10px;
  border: 1px solid rgba(255,255,255,0.06);
  background:var(--glass);
  color:#fff;
  cursor:pointer;
  font-weight:600;
  transition:transform .18s ease, box-shadow .18s;
}
.btn:active{ transform:translateY(1px) }
.btn-primary{
  background:linear-gradient(90deg,var(--accent), #ff8fb7);
  color:#1b0020;
  box-shadow:0 8px 30px rgba(255,93,162,0.12);
  border: none;
}

/* hint */
.hint{ color:rgba(255,255,255,0.45); margin-top:.6rem; font-size:.9rem }

/* hearts background animation */
.hearts{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.hearts::before, .hearts::after{
  content:'';
  position:absolute;
  width:200vmax; height:200vmax;
  left:-50vmax; top:-50vmax;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,100,160,0.08) 0 2%, transparent 3%),
    radial-gradient(circle at 80% 70%, rgba(255,170,200,0.05) 0 2%, transparent 3%);
  animation: floaty 18s linear infinite;
  opacity:.7;
}
@keyframes floaty{
  0%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-8%) rotate(10deg)}
  100%{transform:translateY(0) rotate(0deg)}
}

/* modal */
.modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.5); z-index:40;
}
.modal-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  padding:1.6rem; border-radius:14px; width:320px; text-align:center;
  border:1px solid rgba(255,255,255,0.04);
}
.hidden{display:none}

/* welcome */
.welcome-card{
  background:linear-gradient(90deg, rgba(255,93,162,0.06), rgba(255,140,180,0.03));
  padding:2rem; border-radius:14px; text-align:center; max-width:520px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.welcome-card h1{ font-size:2rem; color:var(--accent); margin-bottom:.4rem }
.welcome-card p{ color:var(--muted); margin-bottom:1rem }

/* App layout */
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 2rem; border-bottom:1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px); position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, rgba(11,6,20,0.6), rgba(11,6,20,0.4));
}
.brand{ font-weight:700; letter-spacing:2px; color:var(--accent) }
.navlinks{ display:flex; gap:1rem; list-style:none; align-items:center }
.navlink{ cursor:pointer; padding:.4rem .6rem; border-radius:8px; color:rgba(255,255,255,0.85) }
.navlink:hover{ transform:translateY(-3px) }
.navlink.active{ background:linear-gradient(90deg, rgba(255,93,162,0.12), rgba(255,140,180,0.06)); color:var(--accent) }

/* container */
.container{ padding:2rem; min-height:70vh; max-width:1100px; margin:0 auto; }

/* panels */
.panel{ display:none; animation: fadeIn .6s ease both; }
.panel.active-panel{ display:block }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

.panel-title{ font-size:1.6rem; color:var(--accent); margin-bottom:.4rem }
.panel-sub{ color:var(--muted); margin-bottom:1rem }

/* songs */
.songs{ display:flex; flex-direction:column; gap:1rem }
.song{ background:var(--card); padding:1rem; border-radius:12px; display:flex; align-items:center; gap:1rem; border:1px solid rgba(255,255,255,0.03) }
.song-meta{ flex:1 }

/* gallery */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:1rem;
}
.photo{
  border-radius:12px; overflow:hidden; cursor:pointer; transform-origin:center;
  transition: transform .25s cubic-bezier(.2,.9,.2,1), box-shadow .25s;
  border: 1px solid rgba(255,255,255,0.03);
}
.photo img{ width:100%; height:100%; display:block; object-fit:cover; transition: transform .35s ease; }
.photo:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 20px 40px rgba(0,0,0,0.6) }

/* clicked/enlarged photo */
.photo.active{
  position:relative;
  z-index:30;
  transform: translateY(-20px) scale(1.06);
  box-shadow:0 40px 80px rgba(0,0,0,0.6);
}
.photo.active img{ transform:scale(1.06) }

/* letter */
.letter-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px; padding:1.4rem; border:1px solid rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.95); line-height:1.6;
}
.letter-sign{ margin-top:1rem; font-weight:700; color:var(--accent); text-align:right }

/* love */
.love-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; margin-top:1rem }
.love-card{ padding:1rem; border-radius:12px; background:var(--card); border:1px solid rgba(255,255,255,0.03) }

/* footer */
.footer{ text-align:center; padding:1rem; color:rgba(255,255,255,0.6) }

/* Responsive */
@media (max-width:800px){
  .navlinks{ display:none }
  .container{ padding:1rem }
  .love-grid{ grid-template-columns: 1fr }
}