.container{
    background-color: #f5f5f7;
    border-radius: 12px;
    max-width: 900px;
    margin: auto;
    padding: 25px;
}

/* HEADER */

.hero-header{
  display:flex;
  align-items:center;
  gap:18px;
  background:#fff;
  border-radius:20px;
  padding:30px;
  margin-bottom:20px;
  box-shadow:var(--shadow-md);
}

.flag-icon{
  font-size:58px;
  line-height:1;
}

.header-title{
  font-size:34px;
  font-weight:700;
  color:var(--text-primary);
  margin:0;
}

.header-subtitle{
    font-size: 42px !important;
    font-weight: 800 !important;
    line-height: 1;
    margin-top: 4px;
    background: linear-gradient(219deg, #FB0E76 0%, #910694 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* DESCRIPTION */

.description-card{
  background:#fff;
  border-radius:20px;
  padding:22px 25px;
  margin-bottom:20px;
  box-shadow:var(--shadow-sm);
}

.description-main{
  font-size:15px;
  color:var(--text-primary);
  margin-bottom:6px;
  line-height:1.7;
}

.description-sub{
  color:var(--text-secondary);
  font-size:13px;
}

/* CATEGORY */

.category-section{
  margin-bottom:20px;
}

.category-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.category-btn{
    color: #59595a;
    background-color: #a6a6a9 !important;
    border-color: #c7c7c9 !important;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 10px 18px;
    border-radius: 100px !important;
    font-size: 13px;
    font-weight: 600;
    transition: .25s;
}

.category-btn:hover{
  transform:translateY(-2px);
}

.category-btn.active{
    background: linear-gradient(219deg, #FB0E76 0%, #910694 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 12px rgba(251, 14, 118, .25);
}

/* GENERATE BUTTON */

.generate-btn{
  width:100%;
  border:none;
  border-radius:50px !important;
  padding:16px;
  margin-bottom:18px;
  background:var(--primary-gradient);
  color:#fff;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:.25s;
  box-shadow:0 6px 18px rgba(251,14,118,.3);
}

.generate-btn:hover{
  transform:translateY(-2px);
}

.generate-btn:active{
  transform:translateY(0);
}

/* PREFECTURE */

.prefecture-box{
  background:#fff;
  border-radius:15px;
  padding:14px 18px;
  margin-bottom:18px;
  text-align:center;
  font-weight:600;
  color:var(--secondary-color);
  box-shadow:var(--shadow-sm);
}

/* SEARCH */

.search-section{
  margin-bottom:18px;
}

.search-input{
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #f3c6cf !important;
    border-radius: 12px !important;
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

.search-input:focus{
  border-color:var(--primary-color);
}

/* TOOLBAR */

.toolbar-section{
  display:flex;
  gap:10px;
  margin-bottom:18px;
}

.toolbar-btn{
    flex: 1;
    border: none;
    cursor: pointer;
    padding: 13px 18px;
    border-radius: 15px !important;
    background: linear-gradient(219deg, #FB0E76 0%, #910694 100%) !important;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    transition: .25s;
}

.toolbar-btn:hover{
  transform:translateY(-2px);
}

/* COUNTER */

.results-counter{
  text-align:center;
  margin-bottom:15px;
  font-weight:700;
  color:var(--secondary-color);
}

/* RESULTS */

.results-section{
  margin-bottom:25px;
}

.results-placeholder{
  background:#fff;
  border:2px dashed #ddd;
  border-radius:20px;
  padding:60px 20px;
  text-align:center;
}

.placeholder-flag{
  font-size:60px;
  display:block;
  margin-bottom:10px;
}

.placeholder-text{
  color:var(--text-light);
}

.results-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.results-grid:empty{
  display:none;
}

/* NAME CARD */

.name-card{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  padding:14px;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  border:1px solid #eee;
  transition:.25s;
}

.name-card:hover{
  transform:translateY(-2px);
}

.name-card.hidden{
  display:none;
}

.star-btn{
    border-radius: 15px !important;
    border: none;
    background: linear-gradient(219deg, #FB0E76 0%, #910694 100%) !important;
    cursor: pointer;
    padding: 6px !important;
    font-size: 19px !important;
    flex-shrink: 0;
}

.star-btn.active{
  color:#facc15;
}

.name-content{
  flex:1;
}

.name-text{
  display:block;
  font-size:14px;
  font-weight:700;
  color:var(--text-primary);
}

.name-tag{
  display:inline-block;
  margin-top:4px;
  padding:3px 8px;
  border-radius:50px;
  font-size:11px;
  background:#fdf2f8;
  color:#be185d;
}

.copy-btn{
     border: 1px solid var(--border);
    background: linear-gradient(219deg, #FB0E76 0%, #910694 100%) !important;
    cursor: pointer;
    padding: 8px !important;
    border-radius: 8px !important;
    font-size: 13px;
    transition: .2s;
}

/* FAVORITES */

.favorites-section{
  background:#fff;
  border-radius:20px;
  padding:24px;
  box-shadow:var(--shadow-sm);
}

.favorites-title{
  margin-bottom:15px;
  color:var(--text-primary);
}

.favorites-container{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.favorite-chip{
  padding:7px 12px;
  border-radius:100px;
  background:#fdf2f8;
  color:#be185d;
  font-size:13px;
  font-weight:600;
}

.favorites-empty{
  color:var(--text-light);
}

/* ANIMATIONS */

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.name-card{
  animation:fadeIn .3s ease;
}

/* RESPONSIVE */

@media(max-width:768px){

  .hero-header{
    padding:22px;
  }

  .header-title{
    font-size:26px;
  }

  .header-subtitle{
    font-size:26px !important;
  }

  .results-grid{
    grid-template-columns:1fr;
  }

  .toolbar-section{
    flex-direction:column;
  }
}

@media(max-width:480px){

  .hero-header{
    flex-direction:column;
    text-align:center;
  }

  .flag-icon{
    font-size:52px;
  }

  .category-buttons{
    justify-content:center;
  }

  .category-btn{
    flex:1 1 calc(50% - 10px);
    text-align:center;
  }
}