:root{
  --accent:#ff3366;
  --accent-2:#ff4b2b;
  --muted:#f7f7f9;
  --text:#b3002d;
  --glass: rgba(255,255,255,0.95);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #fff;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  min-height:100vh;
}
.container{max-width:1000px;margin:0 auto;padding:18px;}
.header{
  display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid #ffe7ee;position:sticky;top:0;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);z-index:60;
}
.logo{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);
}
.logo svg{width:42px;height:42px;animation:pulse 2200ms infinite}
@keyframes pulse{
  0%{filter:drop-shadow(0 0 0 rgba(255,51,102,0));transform:scale(1)}
  50%{filter:drop-shadow(0 0 14px rgba(255,51,102,0.55));transform:scale(1.03)}
  100%{filter:drop-shadow(0 0 0 rgba(255,51,102,0));transform:scale(1)}
}
.nav{margin-left:auto;display:flex;gap:10px;align-items:center}
.nav a{color:var(--text);text-decoration:none;font-weight:600;padding:8px 12px;border-radius:8px}
.nav a:hover{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;box-shadow:0 6px 18px rgba(255,77,110,0.12)}
.site-title{font-weight:700;font-size:1rem}
.card{
  background:var(--glass);
  border-radius:16px;
  padding:26px;
  margin:28px auto;
  max-width:720px;
  box-shadow:0 8px 30px rgba(255,0,76,0.08);
  border:1px solid #ffe6ee;
  position:relative;
  z-index:20;
}
.input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:2px solid #ffdfe8;
  outline:none;
  font-size:1rem;
  margin:8px 0;
  color:var(--text);
  background:white;
}
.btn{
  display:inline-block;padding:10px 18px;border-radius:24px;border:none;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;font-weight:700;cursor:pointer;margin:6px;
  box-shadow:0 8px 20px rgba(255,50,100,0.12);
}
.btn.alt{background:#fff;border:2px solid #ffdfe8;color:var(--text)}
.controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.result{margin-top:18px;font-size:1.25rem;font-weight:700;color:var(--text);min-height:44px;display:flex;align-items:center;justify-content:center;gap:10px}
.love-meter{height:14px;background:#fff0f3;border-radius:999px;overflow:hidden;margin-top:14px;border:1px solid #ffe6ee}
.love-meter-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#ff99b8);transition:width 1.8s ease}
.bg-heart{position:fixed;bottom:-40px;font-size:20px;pointer-events:none;opacity:0.9;z-index:5;animation:floatUp linear forwards}
@keyframes floatUp{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-120vh) scale(1.4);opacity:0}}
.footer{padding:18px;text-align:center;color:#999;font-size:0.9rem;border-top:1px solid #f5f5f5;margin-top:28px}

.find-yours-btn {
  margin-top: 15px;
  padding: 12px 22px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(135deg, #ff4d6d, #ff0000);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.find-yours-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.8);
}



/* Share popup */
.share-popup{display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:100;animation:fadeIn .25s}
.share-popup.active{display:flex}
.share-card{background:white;padding:18px;border-radius:12px;max-width:340px;width:90%;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,0.12)}
.share-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.share-btn{padding:10px 14px;border-radius:12px;border:none;cursor:pointer;font-weight:700}
.share-whatsapp{background:#25D366;color:white}
.share-fb{background:#1877F2;color:white}
.share-insta{background:#E4405F;color:white}
.share-copy{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white}

/* Cookie consent */
.cookie-banner{position:fixed;left:12px;right:12px;bottom:12px;background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 8px 30px rgba(0,0,0,0.12);display:flex;align-items:center;gap:12px;justify-content:space-between;z-index:200}
@media (max-width:600px){.cookie-banner{flex-direction:column;align-items:flex-start}}
.notice{font-size:0.95rem;color:#333}
.accept-btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;padding:8px 12px;border-radius:8px;border:none;font-weight:700}
@media (max-width:720px){.header{padding:10px}.logo svg{width:36px;height:36px}.card{padding:18px;margin:16px}}