/* ================================
   Base Theme
=================================== */
:root {
  --gold: #C9A227;
  --gold-light: #f5c518;
  --bg: #111;
  --bg2: #1a1a1a;
  --panel: #151517;
  --ink: #fff;
  --muted: #c7c7c7;
  --stroke: rgba(201,162,39,0.18);
  --glow: 0 0 18px rgba(201,162,39,.65);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

a { text-decoration: none; color: inherit; }

/* ================================
   Layout
=================================== */
.container { padding: 2rem; max-width: 1200px; margin: auto; }
.page-title { color: var(--gold-light); margin: 0 0 10px; }
.muted { color: var(--muted); }

/* ================================
   Buttons
=================================== */
.btn {
  padding: 10px 16px; border: none; cursor: pointer; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; transition: 0.2s;
}
.btn.ghost { border: 1px solid rgba(201,162,39,.45); background: transparent; color: var(--gold-light); }
.btn.ghost:hover { background: rgba(201,162,39,.12); box-shadow: var(--glow); }
.btn.solid {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: #14110a; border: 0; box-shadow: 0 4px 12px rgba(201,162,39,.15);
}
.btn.solid:hover { filter: brightness(1.05); box-shadow: var(--glow); }

/* ================================
   Search Bar
=================================== */
.search-bar { margin-top: 1rem; display: flex; gap: 10px; }
.search-bar input { flex: 1; padding: 10px; border: none; border-radius: 8px; background: #191919; color: #fff; outline: none; }
.search-bar input:focus { box-shadow: 0 0 0 2px rgba(201,162,39,.3); }

/* ================================
   Grid - Premium Cards
=================================== */
.profiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; margin-top: 1.5rem;
}
.card {
  background: var(--panel); padding: 1rem; border-radius: 14px;
  box-shadow: 0 0 0 1px var(--stroke); transition: 0.25s transform, 0.25s box-shadow, 0.25s border-color;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); border-color: rgba(201,162,39,0.45); box-shadow: var(--glow); }

/* Top Row: Avatar + Name + Rating */
.card-top { display: flex; align-items: center; gap: 14px; margin-bottom: 0.75rem; }
.avatar {
  width: 54px; height: 54px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: #0f0f12; border: 1px solid var(--stroke); display: grid; place-items: center;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar .init { color: var(--gold-light); font-weight: 900; }
.top .name { font-weight: 800; color: var(--gold-light); font-size: 1.05rem; }
.top .role { color: var(--muted); font-size: 0.9rem; }

.rating { margin-left: auto; display: flex; gap: 6px; align-items: center; font-weight: 700; color: #ffb547; }
.rating .rv { color: var(--muted); font-weight: 600; font-size: 0.85rem; }

.stats { font-size: 0.9rem; color: #e7e7ea; margin-top: 6px; }
.stats .dim { color: var(--muted); }

/* ================================
   Detailed View
=================================== */
.detailed {
  background: var(--bg2); border-radius: 14px; padding: 1rem;
  box-shadow: 0 0 0 1px rgba(201,162,39,.15); margin-top: 1.5rem; width: 100%;
}

/* ===== Bullet-proof hero layout ===== */
.hero {
  display: grid;
  grid-template-columns: clamp(96px, 12vw, 132px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 18px);
  align-items: start;
}
.profile-pic {
  width: clamp(96px, 12vw, 132px);
  height: clamp(96px, 12vw, 132px);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-light);
}

/* .hero-meta used in HTML */
.hero .hero-meta { display: contents; }
.hero > :not(img):not(.profile-pic):not(#bio) { grid-column: 2; }

#bio.dp-bio {
  grid-column: 1 / -1;
  display: block;
  background: #121212;
  border: 1px solid rgba(201,162,39,.18);
  border-radius: 12px;
  padding: 12px 14px;
  margin: .35rem 0 .6rem;
  color: #e6e6e6;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.6;
}

.dp-role { color: var(--gold-light); margin: .15rem 0 .35rem; }

/* Fee badge + chips */
.fee-badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  background:#121212; color:var(--gold-light); border:1px solid rgba(201,162,39,.28);
  font-weight:800; letter-spacing:.2px; box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: .6rem 0; }
.badge { border: 1px solid rgba(201,162,39,.35); color: var(--gold-light); border-radius: 999px; padding: 6px 10px; font-weight: 600; font-size: .92rem; }

/* Platforms & followers */
.platforms .section-subtitle{ margin:.6rem 0 .35rem; color:#e7e7ea; opacity:.9; }
.platform-list{ display:grid; gap:10px; }
.platform-row{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  background:#121212; border:1px solid rgba(201,162,39,.18); border-radius:12px; padding:10px 12px;
}
.pf-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.pf-name{ font-weight:800; color:#f0f0f0; }
.pf-link{ color:var(--gold-light); opacity:.9; font-weight:700; }
.pf-link:hover{ text-decoration:underline; }
.pf-right{ display:flex; gap:12px; align-items:center; color:#d9d9da; }
.pf-followers{ font-weight:900; color:#fff; }
.pf-avgviews{ color:#bbb; font-size:.92rem; }

/* Stats grid blocks */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: .6rem; }
.stat { background:#121212; border:1px solid rgba(201,162,39,.18); border-radius:12px; padding:10px; text-align:center; }
.stat strong{ display:block; font-size:1.05rem; color:#fff; }
.stat span{ color:#bbb; }

/* Ratings + histogram */
.rates{
  display:grid;
  grid-template-columns: minmax(160px, 30%) 1fr;
  gap: clamp(12px, 2.4vw, 20px);
  align-items:center; margin-top:.6rem;
}
.big-rating{
  background:#121212; border:1px solid rgba(201,162,39,.18);
  border-radius:12px; padding:12px; text-align:center;
}
.big-rating #score{ font-size:2.2rem; font-weight:900; display:block; }
.stars{ display:flex; gap:4px; justify-content:center; margin:4px 0 }
.star{ font-size:18px; color:#ffb547 }
.rate-line{ margin-top:6px; color:#ccc }

/* Histogram */
.breakdown .row{ display:grid; grid-template-columns:28px 1fr 36px; align-items:center; gap:8px; margin:6px 0; }
.breakdown .bar{ background:#0e0e0e; border-radius:999px; height:8px; overflow:hidden }
.breakdown .bar span{ display:block; height:8px; background:linear-gradient(180deg,var(--gold-light),var(--gold)); width:0%; }
.breakdown em{ font-style:normal; color:#bbb; font-size:.9rem; text-align:right }

/* Packages */
.packages{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:10px; margin-top:.4rem; }
.pkg{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  background:#121212; border:1px solid rgba(201,162,39,.18); border-radius:12px; padding:10px 12px;
}
.pname{ font-weight:700; color:#eee }
.pprice{ font-weight:900; color:#fff }

/* Actions */
.dp-actions{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap }

/* Gallery */
.section-title{ margin:1rem 0 .5rem }
.gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:10px; }
.gallery .shot{ border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#0f0f0f }
.gallery img{ display:block; width:100%; height:150px; object-fit:cover }

/* Reviews */
.reviews{ display:grid; gap:10px }
.review{ background:#121212; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px; }
.r-meta{ display:flex; gap:8px; align-items:center; margin-bottom:6px; color:#ddd }
.r-name{ font-weight:700 }
.r-stars{ color:#ffb547; font-size:14px }
.r-text{ color:#ccc }

/* ================================
   Modal
=================================== */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal.hidden{ display:none !important }
.modal-card{ width:min(640px,95%); background:#141414; color:#fff; border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.6); border:1px solid rgba(255,215,0,.18); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; border-bottom:1px solid rgba(255,215,0,.12); }
.icon-btn{ background:transparent; border:none; color:var(--gold-light); font-size:22px; line-height:1; cursor:pointer }
.modal-body{ padding:14px 16px 16px }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:10px }
.msg{ font-size:.95rem; margin-top:6px }

/* Form grid & fields */
.grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.field{ display:flex; flex-direction:column; gap:6px }
.field input,.field textarea,.field select{ padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,.12); background:#0f0f0f; color:#fff; outline:none; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:rgba(201,162,39,.45); box-shadow:0 0 0 2px rgba(201,162,39,.25), var(--glow); }
.span2{ grid-column:1 / -1 }
.stars-input{ display:flex; gap:6px; font-size:22px; color:#777 }
.stars-input button{ background:transparent; border:0; cursor:pointer; line-height:1; color:#777; transition:transform .06s ease, color .2s ease; }
.stars-input button.active, .stars-input button:hover, .stars-input button:focus{ color:#ffb547 }
.stars-input button:active{ transform:translateY(1px) }

/* ================================
   Utility & Footer
=================================== */
.hidden{ display:none !important }
.not-found{ text-align:center; padding:1rem; background:#151515; border-radius:12px; box-shadow:0 0 0 1px rgba(255,215,0,.12); }
.footer{ padding:1rem; text-align:center; background:#000; color:#777; border-top:1px solid rgba(201,162,39,.18); }

/* ================================
   Responsive
=================================== */
@media (max-width: 1024px){
  .rates { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: clamp(88px, 16vw, 120px) minmax(0,1fr); }
  .profile-pic { width: clamp(88px, 16vw, 120px); height: clamp(88px, 16vw, 120px); }
}
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .card-actions { flex-direction: column; }
}

/* ===== Hard guards & safety rails ===== */
.profiles > #detail,
.profiles > #notfound { grid-column: 1 / -1; width: 100%; }
#detail { grid-column: 1 / -1; width: 100%; }

.hero .hero-meta img,
.hero .hero-meta video { max-width: 100%; height: auto; }

.container { padding-inline: clamp(12px, 3vw, 32px); }

.detail-host.hidden { display: none !important; }
.detail-host { display: block; width: 100%; background: var(--bg); }
.detail-host .detailed { max-width: 1200px; margin: 2rem auto 0; width: 100%; }

/* Additions: Actions row, Toast, Focus states, Chips */
.card-actions{ display:flex; gap:10px; margin-top:10px; align-items:center; flex-wrap:wrap; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: #121212;
  color: #fff;
  border: 1px solid rgba(201,162,39,.28);
  box-shadow: 0 8px 28px rgba(0,0,0,.45), var(--glow);
  padding: 10px 14px;
  border-radius: 10px;
  z-index: 3000;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); pointer-events: auto; }

:focus-visible { outline: 2px solid rgba(201,162,39,.55); outline-offset: 2px; border-radius: 8px; }
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { box-shadow: 0 0 0 2px rgba(201,162,39,.35), var(--glow); }

.profile-pic.hidden { display: none; }

/* Chips */
.chip { padding:6px 12px; border-radius:999px; border:1px solid rgba(201,162,39,.35); background:#121212; color:#ddd; cursor:pointer; font-weight:700; }
.chip.active { border-color:#5b8cff; background:#1e2a44; color:#fff; }