:root {
    --bg-main: #FFF8FA;
    --card-bg: #FFFFFF;
    --primary: #FF3366;
    --primary-hover: #E02454;
    --accent: #FFB3C6;
    --blush: #FFE5EC;
    --text-main: #2D2327;
    --text-muted: #7A6B71;
    --border-color: #F3E2E7;
  }
  :root{color-scheme:light;padding-top:env(safe-area-inset-top,0px)}
  header{top:env(safe-area-inset-top,0px)}
  nav{padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px))}
  @media (max-width:640px){input,select,textarea{font-size:16px!important}}
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    overflow-x: hidden;
  }
  h1, h2, h3, .font-heading {
    font-family: 'Outfit', sans-serif;
  }
  .glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
  }
  .gradient-hero {
    background: radial-gradient(circle at top right, rgba(255, 179, 198, 0.4), transparent 50%),
                radial-gradient(circle at bottom left, rgba(255, 51, 102, 0.08), transparent 50%);
  }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .floating-badge {
    animation: float 4s ease-in-out infinite;
  }

/* ===== Theme system overrides ===== */
.theme-selector {
  background: #fff0f4;
  color: #ff3366;
  border: 1px solid #ffd0dc;
}

.theme-selector:focus {
  box-shadow: 0 0 0 2px rgba(255,51,102,.15);
}

/* Keep Tailwind-based components aligned with the selected theme. */
.theme-selector,
[data-theme] body { transition: background-color .25s ease, color .25s ease; }


/* ===== Premium Theme Picker + Gender Copy ===== */
.theme-menu-wrap{position:relative}
.theme-menu-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.42rem .62rem;border-radius:9999px;
  font-size:11px;font-weight:800;line-height:1;
  transition:all .2s ease;cursor:pointer
}
.theme-menu-icon{font-size:13px;line-height:1}
.theme-menu{
  position:absolute;right:0;top:calc(100% + .55rem);
  width:210px;padding:.4rem;border-radius:18px;
  z-index:80;box-shadow:0 18px 45px rgba(15,23,42,.18);
  backdrop-filter:blur(18px)
}
.theme-option{
  width:100%;display:grid;grid-template-columns:34px 1fr 18px;
  align-items:center;gap:.55rem;text-align:left;
  padding:.58rem .55rem;border:0;background:transparent;
  border-radius:13px;cursor:pointer;transition:all .18s ease
}
.theme-option span:nth-child(2){display:flex;flex-direction:column;gap:2px}
.theme-option b{font-size:11px;line-height:1.2}
.theme-option small{font-size:9px;line-height:1.2;opacity:.65}
.theme-option-icon{
  width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;font-size:15px
}
.theme-check{opacity:0;font-size:12px;font-weight:900}
.theme-option.active .theme-check{opacity:1}
.theme-option:hover{transform:translateY(-1px)}
.female-light-icon{background:#ffe8ef}
.female-dark-icon{background:#432434}
.male-light-icon{background:#e7f1fb}
.male-dark-icon{background:#1c3551}

@media (max-width:420px){
  .theme-menu{right:-4px;width:200px}
  .theme-menu-btn{padding:.4rem .52rem}
}


/* ===== First Visit Personalisation — V5 ===== */
.gender-welcome{
  position:fixed;inset:0;z-index:100;
  display:none;
  place-items:center;
  padding:20px;
}
.gender-welcome.is-visible{display:grid !important}
.gender-welcome.is-closing{animation:welcomeOut .22s ease forwards}
body.welcome-open{overflow:hidden !important}

.gender-welcome-backdrop{
  position:absolute;inset:0;
  background:rgba(7,12,20,.62);
  backdrop-filter:blur(12px);
}
.gender-welcome-card{
  position:relative;width:min(440px,100%);
  padding:30px 24px 22px;
  border-radius:30px;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.3);
  animation:welcomeIn .38s cubic-bezier(.2,.8,.2,1);
}
.gender-welcome-mark{
  width:52px;height:52px;margin:0 auto 13px;
  display:grid;place-items:center;border-radius:17px;
  font-family:'Outfit',sans-serif;font-size:16px;font-weight:800;
}
.gender-welcome-kicker{
  display:block;font-size:10px;font-weight:800;
  letter-spacing:.16em;margin-bottom:7px;
}
.gender-welcome-card h2{
  margin:0 0 7px;font-family:'Outfit',sans-serif;
  font-size:23px;line-height:1.15;font-weight:800;
}
.gender-welcome-card>p{margin:0 0 20px;font-size:12px;opacity:.7}
.gender-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left}
.gender-choice{
  position:relative;min-height:165px;padding:18px 15px;
  border-radius:21px;border:1px solid transparent;
  cursor:pointer;text-align:left;display:flex;flex-direction:column;
  align-items:flex-start;background:transparent;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.gender-choice:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,23,42,.12)}
.gender-choice-icon{
  width:43px;height:43px;display:grid;place-items:center;
  border-radius:14px;font-size:20px;margin-bottom:15px;
}
.gender-choice-title{font-family:'Outfit',sans-serif;font-size:18px;font-weight:800;margin-bottom:5px}
.gender-choice-desc{font-size:10px;line-height:1.5;opacity:.7;max-width:145px}
.gender-choice-arrow{position:absolute;right:15px;bottom:14px;font-size:17px;font-weight:800}
.gender-welcome-note{display:block;margin-top:17px;font-size:9px;opacity:.5}

@keyframes welcomeIn{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes welcomeOut{
  from{opacity:1;transform:scale(1)}
  to{opacity:0;transform:scale(.97)}
}

/* ===== Premium Theme Menu — V5 ===== */
.theme-menu-wrap{position:relative;z-index:90}
.theme-menu-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.42rem .62rem;border-radius:9999px;
  font-size:11px;font-weight:800;line-height:1;
  cursor:pointer;border:1px solid;
}
.theme-menu{
  position:absolute;right:0;top:calc(100% + .55rem);
  width:215px;padding:7px;border-radius:18px;
  z-index:200;
  display:none !important;
  box-shadow:0 18px 45px rgba(15,23,42,.22);
  backdrop-filter:none !important;
  opacity:1 !important;
}
.theme-menu.is-open{display:block !important}
.theme-option{
  width:100%;display:grid;grid-template-columns:34px 1fr 18px;
  align-items:center;gap:.55rem;text-align:left;
  padding:9px 8px;border:0;border-radius:13px;
  cursor:pointer;transition:background .18s ease;
}
.theme-option span:nth-child(2){display:flex;flex-direction:column;gap:2px}
.theme-option b{font-size:11px;line-height:1.2}
.theme-option small{font-size:9px;line-height:1.2}
.theme-option-icon{
  width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;font-size:15px;
}
.theme-check{opacity:0;font-size:12px;font-weight:900}
.theme-option.active .theme-check{opacity:1}

body.gender-female .female-copy{display:inline !important}
body.gender-female .male-copy{display:none !important}
body.gender-male .female-copy{display:none !important}
body.gender-male .male-copy{display:inline !important}

@media(max-width:420px){
  .gender-welcome-card{padding:26px 17px 20px;border-radius:26px}
  .gender-choice-grid{gap:8px}
  .gender-choice{min-height:155px;padding:15px 13px}
  .gender-choice-title{font-size:16px}
  .theme-menu{right:-4px;width:205px}
}

.gender-welcome-card{background:#fffafd;border:1px solid #f3dfe6;color:#2d2327}
.gender-welcome-mark{background:linear-gradient(135deg,#ff3366,#ffb3c6);color:#fff}
.gender-welcome-kicker{color:#ff3366}
.gender-choice-female{background:#fff1f5;border-color:#ffd8e3}
.gender-choice-female .gender-choice-icon{background:#ffe1eb}
.gender-choice-female .gender-choice-arrow{color:#ff3366}
.gender-choice-male{background:#f7f9fc;border-color:#e5eaf0}
.gender-choice-male .gender-choice-icon{background:#edf2f7}
.gender-choice-male .gender-choice-arrow{color:#64748b}
.theme-menu{background:#fff !important;color:#172033 !important;border:1px solid #dce5ef !important}
.theme-menu-btn{background:#fff0f4;color:#ff3366;border-color:#ffd0dc}
.theme-option{color:#172033;background:transparent}
.theme-option:hover{background:#f1f5f9}
.theme-option.active{background:#fff0f4}
.theme-option small{color:#64748b}
.theme-option .theme-check{color:#ff3366}

/* ===== FIXED HERO: full-width responsive background + left content ===== */
#utama.female-light-hero{position:relative;overflow:hidden;isolation:isolate;width:100%;max-width:1040px;margin-left:auto;margin-right:auto;background:#fff8fa!important;background-image:linear-gradient(90deg,rgba(255,248,250,.97) 0%,rgba(255,248,250,.90) 30%,rgba(255,248,250,.48) 58%,rgba(255,248,250,.08) 100%),url("../assets/female-light-hero.png")!important;background-repeat:no-repeat!important;background-size:cover!important;background-position:58% center!important;}
#utama.female-light-hero .hero-content{position:relative;z-index:3;}
@media(min-width:768px){#utama.female-light-hero{min-height:590px;display:grid;align-items:center;text-align:left!important;padding:3.5rem clamp(2rem,6vw,5.5rem)!important;}#utama.female-light-hero .hero-content{width:min(52%,520px);margin:0!important;}#utama.female-light-hero .hero-content>.relative.w-32{margin-left:0!important;margin-right:0!important;}#utama.female-light-hero .hero-content>p{margin-left:0!important;margin-right:0!important;max-width:430px!important;}#utama.female-light-hero .hero-content>.space-y-3{max-width:430px;}#utama.female-light-hero .hero-content>ul{justify-content:flex-start!important;flex-wrap:wrap;}}
@media(max-width:767px){#utama.female-light-hero{min-height:650px;background-position:68% center!important;background-image:linear-gradient(180deg,rgba(255,248,250,.42) 0%,rgba(255,248,250,.66) 43%,rgba(255,248,250,.95) 76%,rgba(255,248,250,1) 100%),url("../assets/female-light-hero.png")!important;}#utama.female-light-hero .hero-content{width:100%;}}



/* FINAL FIX: theme menu has one source of truth */
.theme-menu{display:none!important}
.theme-menu.is-open{display:block!important}