:root{
  --cream:#FFF8F0; --pink:#FF8FAB; --pink-deep:#E85D75; --blue:#8ECAE6; --blue-deep:#5FA8CC;
  --gold:#F5B942; --gold-deep:#B5790E; --plum:#3A2E39; --muted:#8B7E89; --white:#FFFFFF;
  --line:#F0E3E7; --good:#4FA37B; --bad:#E85D75;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{ font-family:'Quicksand', sans-serif; color:var(--plum); background:var(--cream); min-height:100vh; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; }

/* ================= HEADER (shared) ================= */
header{ background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.header-top{ max-width:1200px; margin:0 auto; padding:16px 24px 14px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; }
.cube-logo{ width:38px; height:38px; flex-shrink:0; }
.brand-name{ font-family:'Fredoka', sans-serif; font-weight:700; font-size:20px; color:var(--plum); }
.brand-name span{ color:var(--pink-deep); }
.header-search{ flex:1; max-width:420px; position:relative; display:none; }
.header-search input{ width:100%; padding:10px 16px 10px 40px; border-radius:999px; border:2px solid var(--line); background:var(--cream); font-family:'Quicksand', sans-serif; font-size:14px; font-weight:500; color:var(--plum); outline:none; }
.header-search input:focus{ border-color:var(--pink); background:var(--white); }
.header-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted); }
.header-actions{ display:flex; align-items:center; gap:16px; }
.icon-btn{ width:38px; height:38px; border-radius:50%; border:none; background:var(--cream); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); position:relative; }
.icon-btn:hover{ background:#FFEFE9; color:var(--pink-deep); }
.icon-btn svg{ width:18px; height:18px; }
.badge-dot{ position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%; background:var(--pink-deep); border:2px solid var(--white); }
.user-chip{ display:flex; align-items:center; gap:9px; cursor:pointer; padding:5px 12px 5px 6px; border-radius:999px; border:1px solid var(--line); position:relative; }
.user-chip:hover{ background:var(--cream); }
.avatar{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg, var(--pink), var(--blue)); display:flex; align-items:center; justify-content:center; color:var(--white); font-family:'Fredoka', sans-serif; font-weight:600; font-size:13px; }
.user-chip span{ font-size:14px; font-weight:600; }
.user-chip svg{ width:13px; height:13px; color:var(--muted); }
.user-menu{ position:absolute; top:calc(100% + 10px); right:0; background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 32px rgba(58,46,57,0.14); width:190px; padding:8px; display:none; }
.user-chip.open .user-menu{ display:block; }
.user-menu a{ display:block; padding:9px 12px; border-radius:9px; font-size:14px; font-weight:600; color:var(--plum); }
.user-menu a:hover{ background:var(--cream); }
.user-menu a.danger{ color:var(--pink-deep); }
.user-menu hr{ border:none; border-top:1px solid var(--line); margin:6px 0; }
nav.mainnav{ border-top:1px solid var(--line); }
.nav-inner{ max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.nav-item{ position:relative; }
.nav-link{ display:flex; align-items:center; gap:5px; padding:14px 14px; font-size:14px; font-weight:600; color:var(--plum); white-space:nowrap; border-bottom:2.5px solid transparent; }
.nav-link .chev{ transition:transform .15s ease; }
.nav-item.open .nav-link .chev{ transform:rotate(180deg); }
.nav-link svg{ width:11px; height:11px; margin-top:1px; }
.nav-item:hover .nav-link, .nav-link.active, .nav-item.open .nav-link{ color:var(--pink-deep); border-bottom-color:var(--pink-deep); }
.dropdown{ position:absolute; top:100%; left:0; background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 36px rgba(58,46,57,0.14); padding:10px; min-width:220px; display:none; grid-template-columns:1fr 1fr; gap:2px; z-index:60; }
.nav-item:hover .dropdown, .nav-item.open .dropdown{ display:grid; }
.dropdown a{ padding:8px 10px; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--plum); }
.dropdown a:hover{ background:var(--cream); color:var(--pink-deep); }
@media (min-width:640px){ .header-search{ display:block; } }

/* ================= HERO ================= */
.gen-hero{
  position:relative; overflow:hidden;
  padding:48px 24px 40px;
  background:linear-gradient(155deg, var(--pink) 0%, #FFB3C6 45%, var(--blue) 100%);
  text-align:center;
}
.gen-hero-inner{ position:relative; z-index:1; max-width:940px; margin:0 auto; }
.gen-badge{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,0.24); color:var(--white);
  font-size:12px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
  padding:7px 14px; border-radius:999px; margin-bottom:16px;
}
.gen-badge svg{ width:13px; height:13px; }
.gen-hero h1{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:clamp(26px,4vw,36px); color:var(--white); margin-bottom:10px; }
.gen-hero p{ color:rgba(255,255,255,0.92); font-size:14.5px; line-height:1.6; max-width:840px; margin:0 auto; }
.gen-hero-tools{
  position:relative; overflow:hidden;
  padding:48px 24px 40px;
  max-width:940px; margin:0 auto;
  /*background:linear-gradient(155deg, var(--pink) 0%, #FFB3C6 45%, var(--blue) 100%);
  text-align:center;*/
}
.gen-hero-tools h2{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:clamp(20px,4vw,30px); margin-top: 20px;margin-bottom:10px; }
.gen-hero-tools p{  font-size:14.5px; line-height:1.6; max-width:840px; margin:0 auto; }
.gen-hero-tools ul li{
  font-size:14.5px; line-height:1.6; max-width:840px; margin-left:30px;list-style: disc;
}
/* ================= MAIN ================= */
main{ max-width:1000px; margin:0 auto; padding:0 24px 90px; }

.gen-card{
  background:var(--white); border:1px solid var(--line); border-radius:22px;
  padding:28px; margin-top:-34px; position:relative; z-index:2;
  box-shadow:0 20px 40px rgba(58,46,57,0.1);
}

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:8px; }
.field .hint-sm{ font-size:12px; color:var(--muted); font-weight:500; margin-top:6px; }

.segmented{ display:flex; background:var(--cream); border-radius:13px; padding:4px; gap:4px; }
.segmented button{
  flex:1; padding:10px 8px; border:none; border-radius:10px; background:none;
  font-size:13.5px; font-weight:700; color:var(--muted); cursor:pointer;
}
.segmented button.active{ background:var(--white); color:var(--pink-deep); box-shadow:0 4px 10px rgba(58,46,57,0.08); }

.chip-group{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-option{
  padding:9px 15px; border-radius:999px; border:1.5px solid var(--line); background:var(--white);
  font-size:13px; font-weight:700; color:var(--plum); cursor:pointer;
}
.chip-option:hover{ border-color:var(--pink); }
.chip-option.active{ background:var(--plum); border-color:var(--plum); color:var(--white); }

.field input[type="text"]{
  width:100%; padding:12px 15px; border-radius:12px; border:2px solid var(--line); background:#FFFCF9;
  font-family:'Quicksand', sans-serif; font-size:14.5px; font-weight:500; color:var(--plum); outline:none;
}
.field input[type="text"]:focus{ border-color:var(--pink); background:var(--white); }

.field.letter input{ width:64px; text-align:center; text-transform:uppercase; font-weight:700; }

.row-3{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }

.gen-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:24px; gap:14px; flex-wrap:wrap; }
.count-select{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--muted); }
.count-select select{
  padding:8px 30px 8px 12px; border-radius:10px; border:1.5px solid var(--line); background:var(--white);
  font-family:'Quicksand', sans-serif; font-size:13.5px; font-weight:700; color:var(--plum);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B7E89' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:13px;
  cursor:pointer;
}

.btn-generate{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 26px; border:none; border-radius:14px;
  background:linear-gradient(120deg, var(--pink-deep), var(--pink)); color:var(--white);
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:15px; cursor:pointer;
  box-shadow:0 10px 20px rgba(232,93,117,0.28);
}
.btn-generate:hover:not(:disabled){ transform:translateY(-1px); }
.btn-generate:disabled{ opacity:0.75; cursor:default; transform:none; }
.btn-generate svg{ width:17px; height:17px; }
.btn-generate .spinner{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.4); border-top-color:var(--white);
  display:none; animation:spin .7s linear infinite;
}
.btn-generate.loading svg.wand{ display:none; }
.btn-generate.loading .spinner{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- Results ---- */
.results-section{ margin-top:36px; }
.results-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.results-head h2{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:19px; }
.results-head .regen-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:1.5px solid var(--line); border-radius:999px;
  padding:8px 15px; font-size:13px; font-weight:700; color:var(--plum); cursor:pointer;
}
.results-head .regen-btn:hover{ border-color:var(--pink); color:var(--pink-deep); }
.results-head .regen-btn svg{ width:13px; height:13px; }

.results-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:16px; }

.name-card{
  background:var(--white); border:1px solid var(--line); border-radius:18px; padding:20px;
  position:relative; opacity:0; transform:translateY(8px);
  animation:cardIn .4s ease forwards;
}
@keyframes cardIn{ to{ opacity:1; transform:translateY(0); } }

.heart-save{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  border:none; background:var(--cream); color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.heart-save:hover{ background:#FFEFF2; color:var(--pink-deep); }
.heart-save svg{ width:15px; height:15px; }
.heart-save.liked{ background:#FDE2E1; color:#E63946; }
.heart-save.liked svg{ fill:#E63946; stroke:#E63946; }

.gender-tag{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:12px; }
.tag-boy{ background:#E8F2FA; color:var(--blue-deep); }
.tag-girl{ background:#FFEFF2; color:var(--pink-deep); }
.tag-unisex{ background:#FFF6E3; color:var(--gold-deep); }

.name-card h3{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:22px; margin-bottom:6px; padding-right:26px; }
.name-card .meaning{ font-size:13px; color:var(--plum); line-height:1.5; margin-bottom:12px; min-height:38px; }
.name-card .meaning strong{ color:var(--muted); font-weight:700; }
.name-card .origin-row{ display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); font-weight:600; }

/* Skeleton loading cards */
.skeleton-card{ background:var(--white); border:1px solid var(--line); border-radius:18px; padding:20px; }
.sk-line{ background:linear-gradient(90deg, var(--line) 25%, #F7ECEF 37%, var(--line) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:8px; }
@keyframes shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
.sk-tag{ width:64px; height:18px; margin-bottom:14px; }
.sk-title{ width:70%; height:24px; margin-bottom:10px; }
.sk-text{ width:100%; height:14px; margin-bottom:8px; }
.sk-text.short{ width:60%; }

/* Error state */
.gen-error{
  display:none; align-items:center; gap:12px;
  background:#FFF6F7; border:1.5px solid #F6C6CD; color:var(--bad);
  padding:16px 18px; border-radius:14px; margin-top:24px; font-size:13.5px; font-weight:600;
}
.gen-error.show{ display:flex; }
.gen-error svg{ width:20px; height:20px; flex-shrink:0; }
.gen-error .retry-btn{
  margin-left:auto; flex-shrink:0; background:var(--white); border:1.5px solid #F6C6CD; color:var(--bad);
  border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:700; cursor:pointer;
}

.empty-hint{ text-align:center; color:var(--muted); font-size:13.5px; padding:30px 10px; }

@media (max-width:640px){
  .form-row, .row-3{ grid-template-columns:1fr; }
  .gen-actions{ flex-direction:column; align-items:stretch; }
  .btn-generate{ justify-content:center; }
}