/* stars.php — matched literally against the project owner's star-directory
   mockup (see feedback_css_token_matching memory): same 480px narrow-column
   structure and per-section padding pattern used on discovery-detail.php,
   same :root token family as discovery.css/discovery-detail.css so all
   three pages read as one system. Redeclared at :root (loads after
   base.css, so intentionally wins on this page). */
:root{
  --purple:#6C5CE7; --purple-light:#A29BFE;
  --blue:#4C7EF3; --blue-dark:#3D63D9;
  --gold:#F5A623; --gold-dark:#DC8F14;
  --green:#00B894; --green-dark:#04976F;
  --pink:#FD79A8;
  --chip-blue-bg:#E8EEFE; --peach-bg:#FDF1DC;
  --ink:#1D2333; --muted:#8A93AD; --line:#EFEFF5; --bg-soft:#F6F7FB;
  --error:#E5484D;
}

.stars-shell{max-width:640px; margin:0 auto; padding-bottom:calc(var(--nav-height, 78px) + 24px);}

/* HEADER — same full-bleed gradient technique as discovery.php's db-header */
.db-header{
  background:linear-gradient(120deg,var(--purple) 0%, #5847D0 60%, var(--blue) 130%);
  color:#fff; padding:22px 20px 20px; border-radius:0 0 28px 28px; margin:0 -28px 16px;
  position:relative; overflow:hidden;
}
.db-header::after{content:''; position:absolute; width:180px; height:180px; border-radius:50%; background:var(--gold); opacity:.16; filter:blur(30px); top:-70px; right:-40px;}
.db-header .top-row{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2;}
.db-header h1{font-size:1.35rem; font-weight:900; margin:0;}
.db-header .sub{font-size:.78rem; color:rgba(255,255,255,.8); margin:2px 0 0;}
.search-btn{width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; cursor:pointer;}

.stars-search-box{
  display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.15); border-radius:12px;
  padding:10px 14px; margin-top:14px; position:relative; z-index:2;
}
.stars-search-box i{color:rgba(255,255,255,.7);}
.stars-search-box input{
  flex:1; background:none; border:none; outline:none; color:#fff; font-family:'Poppins',sans-serif; font-size:.84rem;
}
.stars-search-box input::placeholder{color:rgba(255,255,255,.6);}

@media(min-width:1160px){
  .db-header{margin:0 0 16px; border-radius:26px;}
}
@media(max-width:991px){
  .db-header{margin:0 -0.7rem 16px;}
}

/* TABS */
.tab-bar{display:flex; gap:8px; margin-top:18px; position:relative; z-index:2;}
.tab-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:12px 4px; border-radius:14px; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.16);
  cursor:pointer; transition:.2s;
}
.tab-btn i{font-size:1rem; color:rgba(255,255,255,.75);}
.tab-btn span{font-size:.72rem; font-weight:700; color:rgba(255,255,255,.8); text-align:center; line-height:1.15;}
.tab-btn.active{background:#fff; border-color:#fff;}
.tab-btn.active i{color:var(--gold-dark);}
.tab-btn.active span{color:var(--ink);}

/* FILTER */
.filter-bar{display:flex; gap:10px; padding:0 0 4px; position:relative;}
.filter-pill{flex:1; background:#fff; border-radius:14px; padding:11px 14px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 4px 14px rgba(29,35,51,.05); cursor:pointer;}
.filter-pill .fp-left{display:flex; align-items:center; gap:8px; min-width:0;}
.filter-pill .fp-icon{width:24px; height:24px; border-radius:7px; background:var(--chip-blue-bg); color:var(--purple); display:flex; align-items:center; justify-content:center; font-size:.64rem; flex-shrink:0;}
.filter-pill span.fp-text{font-weight:700; font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.filter-pill i.chev{color:var(--muted); font-size:.68rem; flex-shrink:0; margin-left:6px;}
.cat-menu{position:absolute; top:58px; left:0; width:190px; background:#fff; border-radius:14px; box-shadow:0 16px 36px rgba(29,35,51,.16); overflow:hidden; z-index:15; display:none;}
.cat-menu.open{display:block;}
.sort-item{display:flex; align-items:center; gap:10px; padding:12px 15px; font-size:.8rem; font-weight:600; cursor:pointer;}
.sort-item i{width:14px; color:var(--purple); font-size:.78rem;}
.sort-item.active{background:var(--chip-blue-bg); color:var(--blue-dark);}
.sort-item.active i{color:var(--blue-dark);}

/* LOCATION BANNER */
.location-banner{margin:16px 0 0; background:#fff; border-radius:14px; padding:12px 16px; display:flex; align-items:center; gap:10px; box-shadow:0 6px 16px rgba(29,35,51,.06);}
.location-banner i{color:var(--blue); font-size:1rem;}
.location-banner span{font-size:.84rem; font-weight:700;}
.location-banner a{margin-left:auto; font-size:.74rem; color:var(--blue); font-weight:700; text-decoration:none;}

/* SECTION LABEL */
.section-label{display:flex; align-items:center; justify-content:space-between; padding:20px 0 12px;}
.section-label h6{font-size:.86rem; font-weight:800; margin:0; display:flex; align-items:center; gap:6px; color:var(--ink);}
.section-label a{font-size:.72rem; color:var(--blue); font-weight:700; text-decoration:none;}
.section-label span.count{font-size:.72rem; color:var(--muted);}

/* FEATURED HERO CARD */
.hero-slot:empty{display:none;}
.hero-card{background:linear-gradient(160deg,#2A2153,#4E3FC7 55%,var(--purple)); border-radius:22px; padding:24px 20px; color:#fff; position:relative; overflow:hidden;}
.hero-card::after{content:''; position:absolute; width:200px; height:200px; border-radius:50%; background:var(--gold); opacity:.18; filter:blur(40px); bottom:-90px; right:-60px;}
.hero-crown{display:inline-flex; align-items:center; gap:6px; background:rgba(245,166,35,.2); color:var(--gold); font-size:.7rem; font-weight:800; padding:5px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; position:relative; z-index:2;}
.hero-avatar-row{display:flex; align-items:center; gap:14px; margin-top:16px; position:relative; z-index:2;}
.hero-avatar{width:66px; height:66px; border-radius:50%; background-color:var(--gold); background-size:cover; background-position:center; border:3px solid rgba(255,255,255,.25); flex-shrink:0;}
.hero-name{font-size:1.15rem; font-weight:800;}
.hero-cat{font-size:.76rem; color:rgba(255,255,255,.7); margin-top:2px;}
.hero-stats{display:flex; gap:20px; margin-top:18px; position:relative; z-index:2; flex-wrap:wrap;}
.hero-stat .num{font-size:1.15rem; font-weight:800;}
.hero-stat .lbl{font-size:.64rem; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.03em; margin-top:2px;}
.hero-cta{
  margin-top:20px; width:100%; background:var(--gold); color:#fff; border:none; border-radius:13px; padding:13px 0;
  font-weight:800; font-size:.86rem; position:relative; z-index:2; display:flex; align-items:center; justify-content:center;
  gap:8px; text-decoration:none;
}
.hero-cta:hover{color:#fff;}

/* NEW THIS WEEK RAIL */
.new-rail{display:flex; gap:14px; overflow-x:auto; padding:0 0 4px; scrollbar-width:none;}
.new-rail::-webkit-scrollbar{display:none;}
.new-item{flex-shrink:0; width:72px; text-align:center; text-decoration:none;}
.new-avatar{
  width:54px; height:54px; border-radius:50%; margin:0 auto; background-color:var(--purple);
  background-size:cover; background-position:center; position:relative;
}
.new-tag{position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); background:var(--blue-dark); color:#fff; font-size:.5rem; font-weight:800; padding:2px 7px; border-radius:999px; white-space:nowrap; border:2px solid #fff;}
.new-name{font-size:.68rem; font-weight:600; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink);}

/* SINGLE-COLUMN PROFILE ROWS */
.row-list{}
.star-row{
  display:flex; align-items:center; gap:14px; background:#fff; border-radius:16px; padding:13px 15px;
  box-shadow:0 6px 16px rgba(29,35,51,.05); margin-bottom:12px; border-left:4px solid transparent; cursor:pointer;
}
.star-row.spotlight{border-left-color:var(--green);}
.row-avatar{width:50px; height:50px; border-radius:50%; background-color:var(--purple); background-size:cover; background-position:center; flex-shrink:0;}
.row-info{flex:1; min-width:0;}
.row-name{font-size:.9rem; font-weight:700; display:flex; align-items:center; gap:6px; color:var(--ink);}
.row-name i.fa-circle-check{color:var(--gold); font-size:.75rem;}
.row-sub{font-size:.72rem; color:var(--muted); margin-top:2px;}
.row-found{font-size:.74rem; color:var(--purple); font-weight:700; margin-top:4px;}
.spotlight-chip{
  display:inline-flex; align-items:center; gap:4px; background:#E6F9F1; color:var(--green-dark);
  font-size:.6rem; font-weight:800; padding:2px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.02em; margin-bottom:3px;
}
.row-cta{
  width:38px; height:38px; border-radius:50%; background:var(--chip-blue-bg); color:var(--blue-dark);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.8rem;
}

.list-loader{display:flex; justify-content:center; padding:14px 0;}
.mini-spinner{width:24px; height:24px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--purple); animation:starsSpin .7s linear infinite;}
@keyframes starsSpin{to{transform:rotate(360deg);}}
.list-empty{padding:16px 0; text-align:center; color:var(--muted); font-size:.84rem;}

/* BECOME A STAR */
.become-banner{margin:24px 0 0; background:linear-gradient(120deg,var(--gold),var(--pink)); border-radius:18px; padding:20px 18px; color:#fff; display:flex; align-items:center; gap:14px;}
.become-banner i.big{font-size:1.6rem; opacity:.9;}
.become-banner h6{margin:0 0 3px; font-size:.9rem; font-weight:800;}
.become-banner p{margin:0; font-size:.74rem; opacity:.92;}
.become-banner a{flex-shrink:0; background:#fff; color:var(--gold-dark); font-weight:800; font-size:.74rem; padding:9px 16px; border-radius:10px; text-decoration:none;}

.tab-pane{display:none;}
.tab-pane.active{display:block;}

@media(max-width:576px){
  .db-header{padding:20px 16px 18px;}
}

.info-hero-learn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  border-bottom: 1.5px solid rgba(255,255,255,.5);
  padding-bottom: 2px;
  position: relative;
  z-index: 2;
  text-decoration: none;
}