/* OnlySearch — single stylesheet, no external dependencies.
   Dark-first, mobile-first, system font stack so there is no webfont request
   blocking first paint (matters for an ad-monetised SEO site). */

:root {
  --bg: #0d0f14;
  --bg-elev: #151922;
  --bg-elev-2: #1c222e;
  --border: #262e3d;
  --text: #e8ecf3;
  --text-dim: #9aa7bd;
  --text-faint: #6b7789;
  --accent: #00aff0;
  --accent-dim: #0086b8;
  --female: #ec4899;
  --male: #3b82f6;
  --free: #10b981;
  --paid: #f59e0b;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 20px rgba(0, 0, 0, .35);
  --wrap: 1240px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
.muted { color: var(--text-dim); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

/* ------------------------------------------------------------------ header */
.site-header {
  background: rgba(13, 15, 20, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; gap: 18px;
  min-height: 62px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .5px;
}
.brand-text { font-size: 17px; letter-spacing: -.2px; }

.header-search { flex: 1 1 300px; display: flex; gap: 8px; min-width: 200px; }
.header-search input {
  flex: 1; min-width: 0;
  background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm);
  padding: 9px 13px; font-size: 14px;
}
.header-search input:focus { outline: 2px solid var(--accent-dim); outline-offset: -1px; }
.header-search button {
  background: var(--accent); color: #fff; border: 0;
  border-radius: var(--radius-sm); padding: 9px 18px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.header-search button:hover { background: var(--accent-dim); }

.site-nav { display: flex; gap: 16px; font-size: 14px; }
.site-nav a { color: var(--text-dim); }
.site-nav a:hover { color: var(--text); text-decoration: none; }

/* -------------------------------------------------------------------- hero */
main { flex: 1; padding: 26px 0 60px; }

.hero { text-align: center; padding: 34px 0 26px; }
.hero h1 {
  font-size: clamp(28px, 5vw, 44px); margin: 0 0 12px;
  letter-spacing: -1px; line-height: 1.12;
}
.hero-sub { color: var(--text-dim); max-width: 620px; margin: 0 auto 22px; font-size: 16px; }
.hero-search { display: flex; gap: 10px; max-width: 560px; margin: 0 auto; }
.hero-search input {
  flex: 1; min-width: 0;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 14px 17px; font-size: 16px;
}
.hero-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.hero-search button {
  background: var(--accent); color: #fff; border: 0; border-radius: 10px;
  padding: 14px 26px; font-size: 16px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.hero-search button:hover { background: var(--accent-dim); }

.hero-chips { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.chip {
  background: var(--bg-elev); border: 1px solid var(--border);
  padding: 7px 15px; border-radius: 999px; font-size: 13px; color: var(--text-dim);
}
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ------------------------------------------------------------------- stats */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin: 8px 0 28px;
}
.stat {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; text-align: center;
}
.stat-num { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
.stat-label { display: block; color: var(--text-faint); font-size: 12px;
  text-transform: uppercase; letter-spacing: .8px; margin-top: 3px; }

/* ------------------------------------------------------------------- cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .12s ease, border-color .12s ease;
}
.card:hover { transform: translateY(-2px); border-color: #38445a; }
.card-media {
  position: relative; display: block;
  aspect-ratio: 3 / 4; background: var(--bg-elev-2); overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 36px; font-weight: 700; color: var(--text-faint);
  background: linear-gradient(135deg, #1c222e, #262e3d);
}
.badge {
  position: absolute; top: 9px; padding: 3px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  background: rgba(0, 0, 0, .68); backdrop-filter: blur(4px);
  color: #fff;
}
.badge-female { left: 9px; background: rgba(236, 72, 153, .9); }
.badge-male { left: 9px; background: rgba(59, 130, 246, .9); }
.badge-free { right: 9px; background: rgba(16, 185, 129, .9); }
.badge-paid { right: 9px; background: rgba(245, 158, 11, .9); }

.card-body { padding: 11px 13px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card-name { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
.card-name a { color: var(--text); }
.card-name a:hover { color: var(--accent); text-decoration: none; }
.card-title { margin: 0; color: var(--text-dim); font-size: 13px; }
.card-meta {
  display: flex; gap: 11px; flex-wrap: wrap;
  color: var(--text-faint); font-size: 12px; margin-top: auto; padding-top: 6px;
}

/* -------------------------------------------------------------- search page */
.search-layout { display: grid; grid-template-columns: 258px 1fr; gap: 26px; align-items: start; }

.filters {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 17px; position: sticky; top: 78px;
}
.filter-group { margin-bottom: 17px; }
.filter-group h3 {
  margin: 0 0 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .9px; color: var(--text-faint); font-weight: 700;
}
.filter-group input[type="search"],
.filter-group input[type="text"],
.filter-group select {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm);
  padding: 8px 11px; font-size: 14px;
}
.radio {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-dim); padding: 3px 0; cursor: pointer;
}
.radio input { accent-color: var(--accent); }
.radio .count { margin-left: auto; color: var(--text-faint); font-size: 12px; }
.quick-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.mini-chip {
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; font-size: 12px; color: var(--text-dim);
}
.mini-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.filter-actions { display: flex; gap: 9px; margin-top: 20px; }

.btn-primary {
  display: inline-block; background: var(--accent); color: #fff; border: 0;
  border-radius: var(--radius-sm); padding: 10px 17px;
  font-size: 14px; font-weight: 600; cursor: pointer; text-align: center;
}
.btn-primary:hover { background: var(--accent-dim); text-decoration: none; color: #fff; }
.btn-ghost {
  display: inline-block; background: transparent; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 17px; font-size: 14px; cursor: pointer; text-align: center;
}
.btn-ghost:hover { border-color: var(--text-dim); color: var(--text); text-decoration: none; }
.btn-lg { padding: 12px 22px; font-size: 15px; }

.results-head { margin-bottom: 17px; }
.results-head h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.4px; }
.results-count { margin: 0; color: var(--text-dim); font-size: 14px; }

.pagination {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: center; margin: 30px 0 10px;
}
.page-link {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 13px;
  font-size: 14px; color: var(--text-dim); min-width: 38px; text-align: center;
}
.page-link:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.page-current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.page-gap { color: var(--text-faint); padding: 7px 3px; }

.more-row { text-align: center; margin: 30px 0; }
.empty {
  text-align: center; padding: 60px 20px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
}
.empty-lg { padding: 80px 20px; }
.empty h1, .empty h2 { margin: 0 0 10px; }
.empty .hero-search { margin-top: 22px; }

/* ----------------------------------------------------------------- profile */
.breadcrumb { color: var(--text-faint); font-size: 13px; margin-bottom: 18px; }
.breadcrumb a { color: var(--text-dim); }
.breadcrumb span { margin: 0 3px; }

.profile {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px; margin-bottom: 30px;
}
.profile-head { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.profile-pic-wrap { position: relative; width: 210px; flex: 0 0 auto; }
.profile-pic {
  width: 210px; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius); display: block; background: var(--bg-elev-2);
}
.profile-fallback {
  display: grid; place-items: center; width: 210px; aspect-ratio: 3 / 4;
  border-radius: var(--radius); font-size: 56px; font-weight: 700;
  color: var(--text-faint); background: linear-gradient(135deg, #1c222e, #262e3d);
}
.profile-info { flex: 1 1 340px; min-width: 0; }
.profile-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 11px; }
.badge-lg {
  position: static; background: var(--bg-elev-2); color: var(--text-dim);
  padding: 4px 11px; font-size: 11px;
}
.badge-lg.badge-female { background: rgba(236, 72, 153, .18); color: var(--female); }
.badge-lg.badge-male { background: rgba(59, 130, 246, .18); color: var(--male); }
.badge-neutral { background: var(--bg-elev-2); color: var(--text-dim); }
.profile-name { margin: 0 0 5px; font-size: clamp(24px, 4vw, 32px); letter-spacing: -.8px; }
.profile-handle { margin: 0 0 18px; color: var(--text-dim); font-size: 15px; }
.profile-handle .dot { margin: 0 6px; color: var(--text-faint); }
.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.profile-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 14px; margin: 0; padding-top: 18px; border-top: 1px solid var(--border);
}
.profile-stats dt {
  color: var(--text-faint); font-size: 11px; text-transform: uppercase;
  letter-spacing: .8px; margin-bottom: 3px;
}
.profile-stats dd { margin: 0; font-size: 18px; font-weight: 650; }

.profile-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.profile-section h2 { font-size: 15px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-faint); margin: 0 0 12px; }
.profile-bio { margin: 0; white-space: pre-wrap; color: var(--text); font-size: 15px; }
.link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.link-list a {
  display: inline-block; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 13px; font-size: 13px;
}
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 12px; }
.kv div { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px; }
.kv dt { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 3px; }
.kv dd { margin: 0; font-size: 14px; }
.index-data { background: var(--bg-elev-2); border-radius: var(--radius); padding: 20px; border-top: 0; }

.related h2 { font-size: 19px; margin: 0 0 16px; letter-spacing: -.3px; }

/* -------------------------------------------------------------------- pages */
.page { max-width: 780px; }
.page-narrow { max-width: 560px; }
.page h1 { font-size: clamp(26px, 4vw, 34px); letter-spacing: -.8px; margin: 0 0 16px; }
.page h2 { font-size: 20px; margin: 32px 0 10px; letter-spacing: -.3px; }
.page p { color: var(--text-dim); margin: 0 0 14px; }
.page .lede { color: var(--text); font-size: 17px; margin-bottom: 26px; }
.seo-block { max-width: 780px; margin: 40px auto 0; }
.seo-block h2 { font-size: 20px; margin: 0 0 10px; }
.seo-block p { color: var(--text-dim); }

.form { display: flex; flex-direction: column; gap: 15px; margin-top: 22px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); }
.form input, .form textarea {
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 11px 13px; font-size: 15px;
  font-family: inherit; resize: vertical;
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--accent-dim); outline-offset: -1px; }
.form button { align-self: flex-start; }

.alert { border-radius: var(--radius-sm); padding: 14px 17px; margin: 20px 0; font-size: 14px; }
.alert-ok { background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .35); color: #6ee7b7; }
.alert-err { background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .35); color: #fca5a5; }

/* ---------------------------------------------------------------- ad slots */
.ad-slot { margin: 20px auto; min-height: 0; text-align: center; }
.ad-slot ins { background: var(--bg-elev); }

/* The 300x500 in-grid banner must occupy exactly one card cell.

   Cards are `aspect-ratio: 3/4` in a `minmax(190px, 1fr)` track, so a card cell is
   roughly 190-230px wide and 253-307px tall. A raw 300x500 creative is taller and
   would stretch its entire grid row, making the neighbouring cards look broken.

   So the ad container mimics the card footprint exactly (same background, border,
   radius, 3/4 aspect ratio) and the creative is sized to fit INSIDE it. The sold
   300x500 dimensions are recorded on the element but do not drive layout — the cell
   does. That is what keeps every grid row even. */
.ad-card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
}
/* Fill the cell. `max-width`/`max-height` on the unit keep the network's rendered
   creative inside the container without forcing the container to the sold size. */
.ad-card-inner {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ad-card ins {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.ad-label {
  position: absolute;
  top: 9px;
  right: 9px;
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 3px 8px;
  border-radius: 999px;
  pointer-events: none;
}

/* Native units render inline in the page flow. */
.ad-native {
  margin: 22px 0;
  text-align: center;
  min-height: 0;
}
.ad-native ins { display: block; }

/* ------------------------------------------------------ SEO blocks / FAQ */
.page-h1 {
  font-size: clamp(22px, 3.4vw, 30px);
  letter-spacing: -.6px;
  margin: 0 0 20px;
}
.filter-heading {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--text-faint);
  margin: 0 0 14px;
  font-weight: 700;
}
.filter-group label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 7px;
}
.faq {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 9px;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "\25B8  "; color: var(--accent); }
.faq[open] summary::before { content: "\25BE  "; }
.faq p { margin: 9px 0 2px; color: var(--text-dim); font-size: 14px; }
.seo-block h2 { margin-top: 34px; }
.seo-block .quick-list { margin-top: 12px; }

/* ------------------------------------------------------------------- footer */
.site-footer {
  border-top: 1px solid var(--border); background: var(--bg-elev);
  margin-top: auto; padding: 34px 0 26px;
}
.footer-inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px;
}
.footer-col { display: flex; flex-direction: column; gap: 7px; }
.footer-col strong { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-faint); }
.footer-col a { color: var(--text-dim); font-size: 14px; }
.footer-col p { color: var(--text-faint); font-size: 13px; margin: 0; max-width: 380px; }
.footer-legal { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.footer-legal p { color: var(--text-faint); font-size: 12px; margin: 0; max-width: 900px; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .search-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .header-inner { padding: 10px 0; gap: 11px; }
  .header-search { order: 3; flex-basis: 100%; }
  .site-nav { margin-left: auto; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .profile { padding: 19px; }
  .profile-pic-wrap, .profile-pic, .profile-fallback { width: 100%; max-width: 260px; }
  .footer-inner { grid-template-columns: 1fr; gap: 22px; }
  .hero { padding: 20px 0 16px; }
}