/* ═══════════════════════════════════════════════════════════════
   MEMBER PROFILE REDESIGN
   ═══════════════════════════════════════════════════════════════ */

/* --- Banner --- */
.mp-banner {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: linear-gradient(135deg, #0f1620 0%, #162030 50%, #0f1620 100%);
}
.mp-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.mp-banner__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, var(--main-background) 0%, transparent 100%);
  z-index: 1;
}

.mp-banner {
position: relative;
width: 100%;
height: 260px;
overflow: hidden;
background: linear-gradient(135deg,#1a1510 0%,#2a1f12 50%,#1a1510 100%);
}
/* Toolbar now lives inside .mp-hero, positioned into banner area on desktop */
.mp-hero__toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
@media (min-width: 769px) {
  .mp-hero__toolbar {
    position: absolute;
    top: -44px;
    right: 0;
    margin-bottom: 0;
  }
}
.mp-banner__btn {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: .2s;
  white-space: nowrap;
}
.mp-banner__btn svg { width: 14px; height: 14px; stroke: #fff; fill: none; flex-shrink: 0; }
.mp-banner__btn:hover {
  background: rgba(0,0,0,0.8);
  border-color: rgba(60,191,240,0.5);
  color: #3cbff0;
}
.mp-banner__btn:hover svg { stroke: #3cbff0; }
.mp-banner__btn--danger { padding: 7px 10px; }
.mp-banner__btn--danger:hover {
  border-color: rgba(229,57,53,0.5);
  color: #e53935;
}
.mp-banner__btn--danger:hover svg { stroke: #e53935; }
/* Primary (Subscribe) */
.mp-banner__btn--primary {
  background: linear-gradient(135deg, rgba(60,191,240,0.85), rgba(0,152,200,0.85));
  border-color: rgba(60,191,240,0.6);
  color: #000;
  font-weight: 700;
}
.mp-banner__btn--primary svg { stroke: #000; }
.mp-banner__btn--primary:hover {
  background: linear-gradient(135deg, rgba(60,191,240,1), rgba(0,152,200,1));
  border-color: #3cbff0;
  color: #000;
}
.mp-banner__btn--primary:hover svg { stroke: #000; }
/* Subscribed state */
.mp-banner__btn--subscribed {
  background: rgba(255,255,255,0.12);
  border-color: rgba(60,191,240,0.4);
}
.mp-banner__count {
  background: rgba(0,0,0,0.25);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.mp-banner__btn--primary .mp-banner__count { background: rgba(0,0,0,0.2); }

/* Subscribe done state — visual feedback after clicking */
.mp-banner__btn--primary.done {
  background: rgba(255,255,255,0.12);
  border-color: rgba(60,191,240,0.4);
  color: #3cbff0;
  font-weight: 500;
  pointer-events: none;
}
.mp-banner__btn--primary.done svg { stroke: #3cbff0; }
.mp-banner__btn--subscribed.done {
  opacity: 0.6;
  pointer-events: none;
}

/* --- Hero card --- */
.mp-hero {
  position: relative;
  z-index: 2;
  margin-top: -60px;
  padding: 0 20px;
}
.mp-hero__top {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 16px;
}

/* Avatar */
.mp-hero__avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 4px solid var(--main-background);
  box-shadow: 0 0 0 3px #3cbff0;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--img-placeholder-bg);
  position: relative;
}
.mp-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-hero__avatar .no-thumb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--profile-color2);
}
.mp-hero__online {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  background: #4caf50;
  border: 3px solid var(--main-background);
  border-radius: 50%;
  z-index: 1;
}

/* Name + badge + handle */
.mp-hero__identity {
  flex: 1;
  min-width: 0;
  padding-bottom: 8px;
}
.mp-hero__name {
  font-size: 28px;
  font-weight: 800;
  color: var(--profile-color);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}
.mp-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #3cbff0, #0098c8);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}
.mp-hero__badge svg { width: 12px; height: 12px; fill: #000; }
.mp-hero__handle {
  font-size: 15px;
  color: var(--profile-color2);
  margin-top: 2px;
}

/* Bio */
.mp-hero__bio {
  font-size: 14px;
  color: var(--profile-color2);
  line-height: 1.5;
  margin-bottom: 16px;
  max-width: 700px;
}

/* Stats row */
.mp-hero__stats {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.mp-hero__stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.mp-hero__stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--profile-color);
}
.mp-hero__stat-label {
  font-size: 13px;
  color: var(--profile-color2);
}

/* Pills (info tags) */
.mp-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.mp-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--btn-tags-bg);
  border: 1px solid var(--btn-tags-border);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--profile-color2);
}
.mp-hero__pill svg {
  width: 14px;
  height: 14px;
  fill: #3cbff0;
  flex-shrink: 0;
}
.mp-hero__pill strong {
  color: var(--profile-color);
  font-weight: 600;
}

/* Social links (X / OnlyFans) */
.mp-hero__socials {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.mp-hero__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: filter .2s, transform .1s;
  cursor: pointer;
}
.mp-hero__social:active { transform: scale(0.96); }
.mp-hero__social--x {
  background: var(--btn-tags-bg);
  border: 1px solid var(--btn-tags-border);
  color: var(--profile-color);
}
.mp-hero__social--x svg { fill: var(--profile-color); }
.mp-hero__social--x:hover { border-color: #444; }
.mp-hero__social--of {
  background: #00aff0;
  color: #fff;
  border: none;
}
.mp-hero__social--of svg { fill: #fff; }
.mp-hero__social--of:hover { filter: brightness(1.1); }

/* --- Completion bar --- */
.mp-completion {
  margin: 20px 0 8px;
  padding: 16px 20px;
  background: var(--btn-tags-bg);
  border: 1px solid var(--btn-tags-border);
  border-radius: 12px;
}
.mp-completion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}
.mp-completion__label {
  color: var(--profile-color);
  font-weight: 600;
}
.mp-completion__pct {
  color: #3cbff0;
  font-weight: 700;
}
.mp-completion__bar {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.mp-completion__fill {
  height: 100%;
  background: linear-gradient(90deg, #3cbff0, #f0c060);
  border-radius: 3px;
  transition: width 0.6s ease;
}
.mp-completion__hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--profile-color2);
}
.mp-completion__hint a {
  color: #3cbff0;
  text-decoration: underline;
}

/* --- Profile container override --- */
.main .mp-container { padding-bottom: 0; }

/* --- Tabs container --- */
/* ---- Profile Navigation — horizontal scrollable strip ---- */
.mp-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--btn-tags-border);
}
.mp-nav::-webkit-scrollbar { display: none; }

/* Separator between groups */
.mp-nav-sep {
  width: 1px;
  height: 20px;
  background: var(--btn-tags-border);
  flex-shrink: 0;
  margin: 0 4px;
}

/* Tab items */
.mp-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--profile-color2) !important;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .2s;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.mp-nav-item:hover {
  color: var(--profile-color) !important;
  background: rgba(255,255,255,0.05);
}
.mp-nav-item--active {
  color: #3cbff0 !important;
  font-weight: 600;
  background: rgba(60,191,240,0.1);
  border-color: rgba(60,191,240,0.2);
}

/* Count badges */
.mp-nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  color: var(--profile-color2);
}
.mp-nav-item--active .mp-nav-count {
  background: rgba(60,191,240,0.2);
  color: #3cbff0;
}
.mp-nav-count--alert {
  background: #3cbff0 !important;
  color: #000 !important;
}

/* ---- Segment control (Videos | Albums) ---- */
.mp-segment {
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  border: 1px solid var(--btn-tags-border);
  background: rgba(255,255,255,0.03);
  overflow: hidden;
  flex-shrink: 0;
}
.mp-segment__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--profile-color2) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all .2s;
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
  position: relative;
}
.mp-segment__item + .mp-segment__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--btn-tags-border);
}
.mp-segment__item:hover {
  color: var(--profile-color) !important;
  background: rgba(255,255,255,0.05);
}
.mp-segment__item--active {
  color: #3cbff0 !important;
  font-weight: 600;
  background: rgba(60,191,240,0.12);
}
.mp-segment__item--active::before { display: none; }
.mp-segment__item--active + .mp-segment__item::before { display: none; }
.mp-segment__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  color: var(--profile-color2);
}
.mp-segment__item--active .mp-segment__count {
  background: rgba(60,191,240,0.2);
  color: #3cbff0;
}

/* ---- Segment panel (overview toggle content) ---- */
.mp-segment-panel .heading { display: none; }

/* --- Friend invitation banner --- */
.mp-friend-invite {
  padding: 12px 20px;
  background: rgba(60,191,240,0.1);
  border: 1px solid rgba(60,191,240,0.3);
  border-radius: 10px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--profile-color);
}
.mp-friend-invite .btn {
  background: #3cbff0;
  color: #000;
  border: none;
  padding: 6px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.mp-friend-invite .btn-reject {
  background: var(--btn-tags-bg);
  border: 1px solid var(--btn-tags-border);
  color: var(--profile-color);
}

/* --- Compact mode (sub-pages: videos, albums, playlists, etc.) --- */
.mp-compact .mp-banner { height: 140px; }
.mp-compact .mp-hero__bio,
.mp-compact .mp-hero__pills,
.mp-compact .mp-hero__stats,
.mp-compact .mp-completion,
.mp-compact .mp-friend-invite,
.mp-compact .popup-send-message,
.mp-compact .popup-add-to-friends { display: none !important; }
.mp-compact .mp-hero { padding-bottom: 8px; }
.mp-compact .mp-hero__toolbar { margin-top: 4px; }

/* --- Responsive --- */
@media (max-width: 768px) {
  .mp-compact .mp-banner { height: 100px; }
  .mp-banner { height: 180px; }
  .mp-hero__toolbar { justify-content: center; gap: 6px; }
  .mp-banner__btn { padding: 10px 18px; font-size: 14px; border-radius: 20px; }
  .mp-banner__btn svg { width: 16px; height: 16px; }
  .mp-hero__top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .mp-hero__avatar { width: 100px; height: 100px; }
  .mp-hero__name { font-size: 24px; justify-content: center; }
  .mp-hero__identity { padding-bottom: 0; }
  .mp-hero__handle { text-align: center; font-size: 14px; }
  .mp-hero__bio { text-align: center; margin-left: auto; margin-right: auto; font-size: 14px; }
  .mp-hero__stats { justify-content: center; }
  .mp-hero__pills { justify-content: center; }
  .mp-hero__pill { font-size: 13px; padding: 6px 12px; }
  .mp-nav { padding: 10px 0; gap: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .mp-nav-item { padding: 8px 14px; font-size: 14px; }
  .mp-nav-count { min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }
  .mp-nav-sep { height: 18px; margin: 0 3px; }
  .mp-segment__item { padding: 8px 14px; font-size: 14px; }
  .mp-segment__count { min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
}

/* --- Light theme overrides --- */
html.light .mp-banner {
  background: linear-gradient(135deg, #e8f2f8 0%, #d0e6f2 50%, #e8f2f8 100%);
}
html.light .mp-hero__badge {
  background: linear-gradient(135deg, #3cbff0, #0098c8);
}
html.light .mp-completion__bar {
  background: rgba(0,0,0,0.08);
}
html.light .mp-friend-invite {
  background: rgba(0,152,200,0.08);
  border-color: rgba(0,152,200,0.2);
}
html.light .mp-banner__btn {
  background: rgba(255,255,255,0.7);
  border-color: rgba(0,0,0,0.1);
  color: #333;
}
html.light .mp-banner__btn svg { stroke: #333; }
html.light .mp-banner__btn:hover {
  background: rgba(255,255,255,0.9);
  color: #0098c8;
}
html.light .mp-banner__btn:hover svg { stroke: #0098c8; }
html.light .mp-banner__btn--primary {
  background: linear-gradient(135deg, rgba(0,152,200,0.9), rgba(150,110,8,0.9));
  border-color: rgba(0,152,200,0.5);
  color: #fff;
}
html.light .mp-banner__btn--primary svg { stroke: #fff; }
html.light .mp-banner__btn--primary:hover { color: #fff; }
html.light .mp-banner__btn--primary:hover svg { stroke: #fff; }
html.light .mp-banner__btn--subscribed {
  background: rgba(0,0,0,0.12);
  border-color: rgba(0,152,200,0.3);
}
html.light .mp-banner__count { background: rgba(0,0,0,0.15); }
html.light .mp-banner__btn--primary.done {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,152,200,0.3);
  color: #0098c8;
}
html.light .mp-banner__btn--primary.done svg { stroke: #0098c8; }
html.light .mp-nav-item {
  color: #666 !important;
}
html.light .mp-nav-item:hover {
  color: #333 !important;
  background: rgba(0,0,0,0.04);
}
html.light .mp-nav-item--active {
  color: #0098c8 !important;
  background: rgba(0,152,200,0.08);
  border-color: rgba(0,152,200,0.15);
}
html.light .mp-nav-count {
  background: rgba(0,0,0,0.06);
  color: #666;
}
html.light .mp-nav-item--active .mp-nav-count {
  background: rgba(0,152,200,0.12);
  color: #0098c8;
}
html.light .mp-segment {
  border-color: #ddd;
  background: rgba(0,0,0,0.02);
}
html.light .mp-segment__item {
  color: #666 !important;
}
html.light .mp-segment__item + .mp-segment__item::before {
  background: #ddd;
}
html.light .mp-segment__item:hover {
  color: #333 !important;
  background: rgba(0,0,0,0.04);
}
html.light .mp-segment__item--active {
  color: #0098c8 !important;
  background: rgba(0,152,200,0.1);
}
html.light .mp-segment__count {
  background: rgba(0,0,0,0.06);
  color: #666;
}
html.light .mp-segment__item--active .mp-segment__count {
  background: rgba(0,152,200,0.12);
  color: #0098c8;
}

/* ═══════════════════════════════════════════════════════════════
   MODEL PROFILE PAGE (.mv-*)
   ═══════════════════════════════════════════════════════════════ */
/* Remove container padding when model layout is present */
.container:has(.mv-layout) { padding-top: 0 !important; }
.mv-banner { position: relative; width: 100vw; margin-left: calc(-50vw + 50%); height: clamp(220px, 28vw, 360px); overflow: hidden; border-radius: 0; }
.mv-banner__bg { position: absolute; inset: -10px; background-size: cover; background-position: center 20%; filter: blur(8px) brightness(.5) saturate(1.3); transform: scale(1.06); }
.mv-banner__bg--empty { background: linear-gradient(135deg, #0a1018, #040a10, #0a1018); filter: none; transform: none; inset: 0; }
/* Mosaic fallback: video thumbnails side by side */
.mv-banner__bg--mosaic {
  inset: 0;
  display: flex;
  filter: blur(4px) brightness(.4) saturate(1.4);
  transform: scale(1.08);
}
.mv-banner__bg--mosaic::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(10,10,10,.6) 70%, var(--main-background, #0a0a0a) 100%);
  z-index: 1;
  pointer-events: none;
}
.mv-mosaic-img {
  flex: 1 1 0%;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
/* If JS hasn't loaded yet or no thumbs found, keep dark fallback */
.mv-banner__bg--mosaic:empty {
  background: linear-gradient(135deg, #0a1018, #040a10, #0a1018);
  filter: none;
  transform: none;
}
.mv-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 10, .15) 40%, rgb(21 21 21) 80%, rgb(24 24 24) 100%); z-index: 1; }
.mv-hero { display: flex; gap: 24px; padding: 0 32px; margin-top: -200px; position: relative; z-index: 2; }
.mv-hero__photo { width: 150px; height: 200px; border-radius: 14px; border: 4px solid #080808; overflow: hidden; flex-shrink: 0; box-shadow: 0 12px 40px rgba(0,0,0,.6); background: var(--img-placeholder-bg); }
.mv-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.mv-hero__photo .no-thumb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 11px; color: #666; }
.mv-hero__info { flex: 1; min-width: 0; padding-top: 78px; }
.mv-hero__name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mv-hero__name { font-size: 28px; font-weight: 800; color: var(--profile-color); letter-spacing: -0.3px; line-height: 1.2; }
.mv-hero__rank { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; background: rgba(60,191,240,.10); border: 1px solid rgba(60,191,240,.2); font-size: 11px; font-weight: 800; color: #3cbff0; }
.mv-hero__rank svg { width: 13px; height: 13px; fill: #3cbff0; }
.mv-hero__sub { display: flex; align-items: center; gap: 16px; font-size: 12px; color: #666; margin-top: 6px; }
.mv-hero__sub-dot { width: 3px; height: 3px; border-radius: 50%; background: #444; flex-shrink: 0; }
.mv-hero__sub-link { color: #3cbff0; text-decoration: none; transition: color .2s; }
.mv-hero__sub-link:hover { color: #5dd0ff; text-decoration: underline; }
.mv-hero__stats { display: flex; gap: 28px; margin-top: 14px; flex-wrap: wrap; }
.mv-hero__stat { display: flex; flex-direction: column; align-items: flex-start; }
.mv-hero__stat-value { font-size: 18px; font-weight: 800; color: #f0f0f0; }
.mv-hero__stat-value--gold {
  color: #3cbff0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 8px;
  background: rgba(60,191,240,.10); border: 1px solid rgba(60,191,240,.2);
  font-size: 16px;
}
.mv-hero__stat-label { font-size: 9px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.mv-hero__rating { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.mv-hero__rate-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 10px; background: #1c1c1c; border: 1px solid #2a2a2a; font-size: 12px; font-weight: 600; color: #aaa; cursor: pointer; text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.mv-hero__rate-btn svg { width: 15px; height: 15px; fill: currentColor; }
.mv-hero__rate-btn:hover { border-color: #444; color: #ccc; }
.mv-hero__rate-btn.disabled { opacity: 0.4; pointer-events: none; }
.mv-hero__rate-btn.rate-like.voted { background: rgba(60,191,240,.10); border-color: rgba(60,191,240,.3); color: #3cbff0; }
.mv-hero__rate-btn.rate-dislike.voted { background: rgba(230,57,70,.08); border-color: rgba(230,57,70,.2); color: #e63946; }
.mv-hero__rate-bar { display: flex; flex-direction: column; gap: 4px; flex: 1; max-width: 140px; }
.mv-hero__rate-track { height: 4px; background: #222; border-radius: 2px; overflow: hidden; }
.mv-hero__rate-fill { height: 100%; background: #3cbff0; border-radius: 2px; transition: width .3s; }
.mv-hero__rate-pct { font-size: 10px; color: #666; font-weight: 600; }
.mv-hero__actions { display: flex; flex-direction: column; gap: 8px; padding-top: 78px; flex-shrink: 0; }
.mv-hero__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 26px; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; transition: filter .2s, transform .1s; border: none; white-space: nowrap; }
.mv-hero__btn:active { transform: scale(0.96); }
.mv-hero__btn svg { width: 16px; height: 16px; }
.mv-hero__btn--follow {
  background: #3cbff0; color: #000; font-weight: 700;
  box-shadow: 0 2px 12px rgba(60,191,240,.35);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.mv-hero__btn--follow svg { stroke: #000; fill: none; stroke-width: 2.5; }
.mv-hero__btn--follow:hover {
  background: #2da8d8; transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(60,191,240,.5);
}
.mv-hero__btn--follow.done { background: #1c1c1c; border: 1px solid #2a2a2a; color: #f0f0f0; }
.mv-hero__btn--follow.done svg { stroke: #f0f0f0; }
.mv-hero__btn--follow em.button-info { font-style: normal; font-size: 11px; opacity: 0.7; margin-left: 2px; }
.mv-hero__btn--share { background: #1c1c1c; border: 1px solid #2a2a2a; color: #f0f0f0; }
.mv-hero__btn--share svg { stroke: #f0f0f0; fill: none; stroke-width: 2; }
.mv-hero__btn--share:hover { border-color: #444; }
.mv-hero__socials { display: flex; gap: 8px; margin-top: 4px; }
.mv-hero__social { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; transition: filter .2s, transform .1s; cursor: pointer; }
.mv-hero__social:active { transform: scale(0.96); }
.mv-hero__social--x { background: #1c1c1c; border: 1px solid #2a2a2a; color: #f0f0f0; }
.mv-hero__social--x svg { fill: #f0f0f0; }
.mv-hero__social--x:hover { border-color: #444; }
.mv-hero__social--of { background: #00aff0; color: #fff; border: none; }
.mv-hero__social--of svg { fill: #fff; }
.mv-hero__social--of:hover { filter: brightness(1.1); }
/* Country flag inline with name */
.mv-hero__flag { width: 24px; height: 17px; border-radius: 3px; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* Details: inline pill strip */
.mv-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 16px 32px 0;
}
.mv-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  font-size: 12px; font-weight: 600; color: #ccc;
  white-space: nowrap; text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
a.mv-pill:hover { background: rgba(60,191,240,.12); border-color: rgba(60,191,240,.3); color: #3cbff0; }
.mv-pill__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mv-pill__dot.role-top { background: #e05555; }
.mv-pill__dot.role-versa { background: #a67edb; }
.mv-pill__dot.role-bottom { background: #4a9ede; }
html.light .mv-pill { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); color: #555; }
html.light a.mv-pill:hover { background: rgba(60,191,240,.08); border-color: rgba(60,191,240,.25); color: #0098c8; }
@media (max-width: 1024px) { .mv-pills { padding: 14px 20px 0; } }
@media (max-width: 768px) { .mv-pills { padding: 12px 16px 0; gap: 5px; } .mv-pill { font-size: 11px; padding: 4px 10px; } }
@media (max-width: 480px) { .mv-pills { padding: 10px 12px 0; } }

.mv-desc { padding: 18px 32px; border-top: 1px solid #1a1a1a; margin-top: 24px; }
.mv-desc__body { position: relative; transition: max-height .4s ease; }
.mv-desc--overflow .mv-desc__body { max-height: 48px; overflow: hidden; }
.mv-desc--overflow .mv-desc__body::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30px; background: linear-gradient(transparent, #181818); transition: opacity .3s; pointer-events: none; }
.mv-desc--overflow .mv-desc__body.expanded { max-height: 800px; }
.mv-desc--overflow .mv-desc__body.expanded::after { opacity: 0; }
.mv-desc__text { font-size: 13px; color: #aaa; line-height: 1.7; }
.mv-desc__toggle { display: none; margin-top: 6px; font-size: 11px; font-weight: 600; color: #3cbff0; cursor: pointer; background: none; border: none; padding: 0; }
.mv-desc--overflow .mv-desc__toggle { display: inline-block; }
.mv-desc__toggle:hover { text-decoration: underline; }
.mv-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 32px; border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; gap: 16px; flex-wrap: wrap; }
.mv-toolbar__tabs { display: flex; background: #1c1c1c; border: 1px solid #2a2a2a; border-radius: 12px; overflow: hidden; }
.mv-toolbar__tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; font-size: 13px; font-weight: 600; color: #666; background: transparent; border: none; cursor: pointer; position: relative; transition: background .2s, color .2s; white-space: nowrap; }
.mv-toolbar__tab svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mv-toolbar__tab::after { content: ''; position: absolute; right: 0; top: 20%; bottom: 20%; width: 1px; background: #2a2a2a; }
.mv-toolbar__tab:last-child::after { display: none; }
.mv-toolbar__tab--active { background: #3cbff0; color: #000; }
.mv-toolbar__tab--active::after, .mv-toolbar__tab--active + .mv-toolbar__tab::after { background: transparent; }
.mv-toolbar__tab--active svg { stroke: #000; }
.mv-toolbar__tab-count { padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.mv-toolbar__tab:not(.mv-toolbar__tab--active) .mv-toolbar__tab-count { background: rgba(255,255,255,.08); color: #444; }
.mv-toolbar__tab--active .mv-toolbar__tab-count { background: rgba(0,0,0,.15); color: rgba(0,0,0,.7); }
.mv-panel { display: none; }
.mv-panel--active { display: block; }
.mv-toolbar__sort { position: relative; flex-shrink: 0; }
.mv-toolbar__sort .sort { margin: 0; }
.mv-toolbar__sort .filters-row { display: flex; gap: 10px; }
.mv-toolbar ~ .mv-panel .box-content > .heading { display: none !important; }
.mv-layout .box-content > .heading { display: flex !important; padding: 0 32px; margin-top: 8px; }
.mv-layout .box-content > .heading .title { display: none; }
.mv-layout .box-content > .heading .more-title { display: none; }
.mv-layout .box-content > .heading .sub-titles { display: none; }
.mv-layout .box-content > .heading .sort-tabs { display: none; }
.mv-layout .heading .filters-row { display: none !important; }
.mv-panel { padding: 0 32px; }
.mv-panel .box-content > .heading { padding: 0; }
.mv-desc + .mv-panel, .mv-hero + .mv-panel { margin-top: 24px; }
.mv-panel,
.mv-comments { overflow-x: clip; }
.mv-layout .content-models { width: 100%; }
/* --- Model comments section --- */
.mv-comments {
  padding: 0 32px; margin-top: 48px;
}
.mv-comments__inner {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 24px;
}
.mv-comments__header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 20px; margin-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mv-comments__icon {
  width: 22px; height: 22px; color: #3cbff0; flex-shrink: 0;
}
.mv-comments__title {
  font-size: 18px; font-weight: 700; color: #fff; margin: 0;
}
.mv-comments__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 8px;
  background: rgba(60,191,240,.12); color: #3cbff0;
  font-size: 12px; font-weight: 700; border-radius: 12px;
}

/* Comment form */
.mv-comments__form { margin-bottom: 28px; }
.mv-comments__form-row {
  display: flex; gap: 12px; align-items: flex-start;
}
.mv-comments__avatar {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  flex-shrink: 0; background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
}
.mv-comments__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mv-comments__avatar svg { width: 22px; height: 22px; color: rgba(255,255,255,.3); }
.mv-comments__input-wrap { flex: 1; min-width: 0; }
.mv-comments__textarea {
  width: 100%; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  padding: 12px 16px; color: #fff; font-size: 14px; line-height: 1.5;
  resize: none; transition: border-color .2s, box-shadow .2s;
  min-height: 44px;
}
.mv-comments__textarea:focus {
  outline: none; border-color: #3cbff0;
  box-shadow: 0 0 0 3px rgba(60,191,240,.1);
  min-height: 80px; resize: vertical;
}
.mv-comments__textarea::placeholder { color: rgba(255,255,255,.25); }

/* Actions row */
.mv-comments__actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; justify-content: flex-end;
}
.mv-comments__submit {
  background: #3cbff0; color: #000; font-weight: 700; font-size: 14px;
  border: none; padding: 10px 28px; border-radius: 24px;
  cursor: pointer; transition: background .2s, transform .15s;
}
.mv-comments__submit:hover { background: #2da8d8; transform: scale(1.03); }

/* Login prompt */
.mv-comments__login {
  text-align: center; padding: 20px;
  background: rgba(255,255,255,.03); border-radius: 12px;
  margin-bottom: 24px;
}
.mv-comments__login a {
  color: #3cbff0; font-weight: 600; font-size: 14px; text-decoration: none;
}
.mv-comments__login a:hover { text-decoration: underline; }

/* Legacy KVS comment blocks inside mv-comments */
.mv-comments .block-new-comment { background: none; border: none; border-radius: 0; padding: 0; margin-bottom: 0; }
.mv-comments .block-new-comment .row { margin-bottom: 14px; }
.mv-comments .block-new-comment label.field-label { display: none; }
.mv-comments .block-new-comment textarea { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 12px 16px; color: #fff; font-size: 14px; line-height: 1.5; resize: vertical; transition: border-color .2s; }
.mv-comments .block-new-comment textarea:focus { outline: none; border-color: #3cbff0; box-shadow: 0 0 0 3px rgba(60,191,240,.1); }
.mv-comments .block-new-comment textarea::placeholder { color: rgba(255,255,255,.25); }
.mv-comments .block-new-comment input[type="text"] { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 10px 16px; color: #fff; font-size: 14px; }
.mv-comments .block-new-comment input[type="text"]:focus { outline: none; border-color: #3cbff0; }
.mv-comments .block-new-comment .buttons { margin-top: 16px; }
.mv-comments .block-new-comment input[type="submit"],
.mv-comments .block-new-comment .submit {
  background: #3cbff0; color: #000; font-weight: 700; font-size: 14px;
  border: none; padding: 10px 28px; border-radius: 24px; cursor: pointer; transition: background .2s, transform .15s;
}
.mv-comments .block-new-comment input[type="submit"]:hover,
.mv-comments .block-new-comment .submit:hover { background: #2da8d8; transform: scale(1.03); }
.mv-comments .block-new-comment .success:not(.hidden) { padding: 14px 16px; color: #4caf50; font-size: 14px; margin-bottom: 16px; background: rgba(76,175,80,.08); border-radius: 10px; }
.mv-comments .block-new-comment .notice { font-size: 14px; color: rgba(255,255,255,.5); padding: 4px 0; }

/* Comments list */
.mv-comments .list-comments { margin-top: 8px; }
.mv-comments .list-comments .item {
  border-bottom: 1px solid rgba(255,255,255,.06); padding: 16px 0;
}
.mv-comments .list-comments .item:last-child { border-bottom: none; }
.mv-comments .list-comments .item .avatar { width: 36px; height: 36px; border-radius: 50%; }
.mv-comments .list-comments .item .username { color: #3cbff0; font-weight: 600; }
.mv-comments .list-comments .item .comment-date { color: rgba(255,255,255,.35); font-size: 12px; }
.mv-comments .list-comments .item .comment-text { color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.6; }
.mv-comments .comments > div:first-child { display: none; }
.mv-comments .pagination-holder { margin-top: 16px; }

/* Model profile responsive */
@media (max-width: 1024px) {
  .mv-hero { padding: 0 20px; gap: 20px; }
  .mv-hero__photo { width: 130px; height: 173px; }
  .mv-hero__name { font-size: 24px; }
  .mv-hero__info { padding-top: 70px; }
  .mv-hero__actions { padding-top: 70px; }
  .mv-desc { padding: 16px 20px; }
  .mv-toolbar { padding: 12px 20px; }
  .mv-panel { padding: 0 20px; }
  .mv-comments { padding: 0 20px; }
  .mv-layout .box-content > .heading { padding: 0 20px; }
}
@media (max-width: 768px) {
  .mv-banner { height: clamp(180px, 30vw, 260px); }
  .mv-hero { flex-direction: column; align-items: center; text-align: center; margin-top: -100px; padding: 0 16px; gap: 12px; }
  .mv-hero__photo { width: 110px; height: 146px; border-width: 3px; }
  .mv-hero__info { padding-top: 0; }
  .mv-hero__name-row { justify-content: center; }
  .mv-hero__name { font-size: 24px; }
  .mv-hero__sub { justify-content: center; flex-wrap: wrap; gap: 8px; }
  .mv-hero__stats { justify-content: center; gap: 20px; }
  .mv-hero__stat { align-items: center; }
  .mv-hero__rating { justify-content: center; }
  .mv-hero__actions { flex-direction: row; padding-top: 0; justify-content: center; }
  .mv-hero__btn { padding: 12px 22px; font-size: 14px; }
  .mv-desc { padding: 16px; margin-top: 16px; }
  .mv-toolbar { padding: 12px 16px; }
  .mv-panel { padding: 0 16px; }
  .mv-comments { padding: 0 16px; }
  .mv-comments__inner { padding: 0; padding-top: 20px; }
  .mv-comments__form-row { gap: 10px; }
  .mv-comments__avatar { width: 34px; height: 34px; }
  .mv-layout .box-content > .heading { padding: 0 16px; }
}
@media (max-width: 480px) {
  .mv-banner { height: clamp(150px, 38vw, 200px); }
  .mv-hero { margin-top: -40px; padding: 0 12px; }
  .mv-hero__photo { width: 90px; height: 120px; }
  .mv-hero__name { font-size: 20px; }
  .mv-hero__stats { gap: 16px; }
  .mv-hero__stat-value { font-size: 16px; }
  .mv-hero__rating { flex-wrap: wrap; gap: 8px; }
  .mv-hero__rate-bar { max-width: 100%; min-width: 120px; }
  .mv-hero__actions { flex-wrap: wrap; }
  .mv-hero__btn { padding: 8px 16px; font-size: 12px; }
  .mv-desc { padding: 12px; margin-top: 12px; }
  .mv-toolbar { padding: 10px 12px; }
  .mv-toolbar__tab { padding: 6px 14px; font-size: 12px; }
  .mv-panel { padding: 0 12px; }
  .mv-comments { padding: 0 12px; }
  .mv-comments__inner { padding: 0; padding-top: 16px; }
  .mv-comments__title { font-size: 16px; }
  .mv-comments__submit { padding: 8px 20px; font-size: 13px; }
  .mv-layout .box-content > .heading { padding: 0 12px; }
}

/* Light theme — Model profile */
html.light .mv-banner__bg { filter: blur(8px) brightness(.7) saturate(1.2); }
html.light .mv-banner__bg--empty { background: linear-gradient(135deg, #f0f5f8, #e0eaf0, #f0f5f8); filter: none; }
html.light .mv-banner__bg--mosaic { filter: blur(4px) brightness(.65) saturate(1.2); }
html.light .mv-banner__bg--mosaic:empty { background: linear-gradient(135deg, #f0f5f8, #e0eaf0, #f0f5f8); filter: none; }
html.light .mv-banner::after { background: linear-gradient(180deg, transparent 0%, rgba(242,242,242,.15) 40%, rgba(242,242,242,.85) 80%, rgba(242,242,242,.98) 100%); }
html.light .mv-hero__photo { border-color: #fff; }
html.light .mv-hero__rank { background: rgba(60,191,240,.08); border-color: rgba(60,191,240,.15); color: #0098c8; }
html.light .mv-hero__rank svg { fill: #0098c8; }
html.light .mv-hero__sub { color: #999; }
html.light .mv-hero__sub-dot { background: #ccc; }
html.light .mv-hero__stat-value { color: #222; }
html.light .mv-hero__stat-value--gold { color: #0098c8; background: rgba(60,191,240,.08); border-color: rgba(60,191,240,.15); }
html.light .mv-hero__stat-label { color: #999; }
html.light .mv-hero__rate-btn { background: #f5f5f5; border-color: #e0e0e0; color: #666; }
html.light .mv-hero__rate-btn:hover { border-color: #ccc; color: #444; }
html.light .mv-hero__rate-btn.rate-like.voted { background: rgba(60,191,240,.08); border-color: rgba(60,191,240,.2); color: #0098c8; }
html.light .mv-hero__rate-track { background: #e0e0e0; }
html.light .mv-hero__rate-fill { background: #0098c8; }
html.light .mv-hero__btn--follow { background: #3cbff0; }
html.light .mv-hero__btn--follow.done { background: #f5f5f5; border-color: #e0e0e0; color: #333; }
html.light .mv-hero__btn--share { background: #f5f5f5; border-color: #e0e0e0; color: #333; }
html.light .mv-hero__btn--share svg { stroke: #333; }
html.light .mv-hero__social--x { background: #f5f5f5; border-color: #e0e0e0; color: #333; }
html.light .mv-hero__social--x svg { fill: #333; }
html.light .mv-desc { border-color: #eee; }
html.light .mv-desc--overflow .mv-desc__body::after { background: linear-gradient(transparent, #fff); }
html.light .mv-desc__text { color: #555; }
html.light .mv-desc__toggle { color: #0098c8; }
html.light .mv-toolbar { border-color: #eee; }
html.light .mv-toolbar__tabs { background: #f5f5f5; border-color: #e0e0e0; }
html.light .mv-toolbar__tab { color: #999; }
html.light .mv-toolbar__tab::after { background: #e0e0e0; }
html.light .mv-toolbar__tab--active { background: #3cbff0; color: #fff; }
html.light .mv-hero__sub-link { color: #0098c8; }
html.light .mv-comments__inner { border-top-color: rgba(0,0,0,.08); }
html.light .mv-comments__header { border-bottom-color: rgba(0,0,0,.08); }
html.light .mv-comments__title { color: #1a1a2e; }
html.light .mv-comments__count { background: rgba(60,191,240,.08); color: #0098c8; }
html.light .mv-comments__avatar { background: rgba(0,0,0,.06); }
html.light .mv-comments__avatar svg { color: rgba(0,0,0,.25); }
html.light .mv-comments__textarea { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.12); color: #1a1a2e; }
html.light .mv-comments__textarea:focus { border-color: #3cbff0; box-shadow: 0 0 0 3px rgba(60,191,240,.08); }
html.light .mv-comments__textarea::placeholder { color: rgba(0,0,0,.3); }
html.light .mv-comments__login { background: rgba(0,0,0,.02); }
html.light .mv-comments__login a { color: #0098c8; }
html.light .mv-comments .block-new-comment textarea { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.12); color: #1a1a2e; }
html.light .mv-comments .block-new-comment textarea:focus { border-color: #3cbff0; box-shadow: 0 0 0 3px rgba(60,191,240,.08); }
html.light .mv-comments .block-new-comment input[type="text"] { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.12); color: #1a1a2e; }
html.light .mv-comments .list-comments .item { border-bottom-color: rgba(0,0,0,.06); }
html.light .mv-comments .list-comments .item .username { color: #0098c8; }
html.light .mv-comments .list-comments .item .comment-date { color: rgba(0,0,0,.4); }
html.light .mv-comments .list-comments .item .comment-text { color: rgba(0,0,0,.75); }

/* ═══════════════════════════════════════════════════════════════
   MODELS PAGE: Country strip + Filters + Grid + Bottom sheet
   ═══════════════════════════════════════════════════════════════ */

/* Country strip */
.country-strip {
  display: flex; align-items: center; gap: 5px; padding: 10px 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid #1a1a1a;
}
.country-strip::-webkit-scrollbar { display: none; }
.cp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; background: #1c1c1c;
  border: 1px solid #2a2a2a; font-size: 13px; font-weight: 500;
  color: #aaa; cursor: pointer; transition: .15s; white-space: nowrap;
  flex-shrink: 0; text-decoration: none;
}
.cp:hover { border-color: #444; color: #f0f0f0; }
.cp.act { background: #3cbff0; border-color: #3cbff0; color: #000; font-weight: 700; }
.cp .flag { font-size: 15px; line-height: 1; }
.cp .cnt { font-size: 10px; font-weight: 700; color: #555; padding: 1px 5px; border-radius: 3px; background: rgba(255,255,255,.06); }
.cp.act .cnt { color: rgba(0,0,0,.5); background: rgba(0,0,0,.1); }

/* Filter toolbar (desktop) */
.filter-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 12px 0;
  border-bottom: 1px solid #1a1a1a; flex-wrap: wrap;
}
.fd { position: relative; }
.fd-trigger {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 8px; background: #1c1c1c; border: 1px solid #2a2a2a;
  font-size: 13px; font-weight: 600; color: #888; cursor: pointer;
  transition: .15s; white-space: nowrap;
}
.fd-trigger:hover { border-color: #444; color: #aaa; }
.fd-trigger.has-value { border-color: rgba(60,191,240,.25); color: #3cbff0; background: rgba(60,191,240,.10); }
.fd-trigger svg { width: 12px; height: 12px; stroke: currentColor; fill: none; flex-shrink: 0; transition: transform .2s; }
.fd.open .fd-trigger svg { transform: rotate(180deg); }
.fd-panel {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 180px;
  background: #111; border: 1px solid #2a2a2a; border-radius: 10px;
  padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.5); z-index: 100; display: none;
}
.fd.open .fd-panel { display: block; }
.fd-opt {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: 7px; font-size: 13px; color: #aaa; cursor: pointer;
  transition: .1s; text-decoration: none;
}
.fd-opt:hover { background: rgba(255,255,255,.04); color: #f0f0f0; }
.fd-opt.act { background: rgba(60,191,240,.10); color: #3cbff0; font-weight: 600; }
.fd-opt .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid #444; }
.fd-opt.act .dot { background: #3cbff0; border-color: #3cbff0; }
.dot.role-top { background: #e05555; border-color: #e05555; }
.dot.role-versa { background: #a67edb; border-color: #a67edb; }
.dot.role-bottom { background: #4a9ede; border-color: #4a9ede; }
.fd-section-label { padding: 8px 12px 4px; font-size: 10px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .5px; }
.f-sep { width: 1px; height: 20px; background: #2a2a2a; flex-shrink: 0; }

/* Model search */
.model-search {
  display: flex; align-items: center; background: #1c1c1c;
  border: 1px solid #2a2a2a; border-radius: 8px; overflow: hidden;
  width: 180px; margin-left: auto; flex-shrink: 0;
}
.model-search:focus-within { border-color: #3cbff0; }
.model-search svg { width: 15px; height: 15px; stroke: #555; margin: 0 10px; flex-shrink: 0; }
.model-search input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: inherit; font-size: 13px; color: #f0f0f0; padding: 8px 10px 8px 0;
}
.model-search input::placeholder { color: #444; }

/* Active filter chips */
.active-filters { display: flex; align-items: center; gap: 5px; padding: 8px 0 0; flex-wrap: wrap; }
.af-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px;
  border-radius: 6px; background: rgba(60,191,240,.10); border: 1px solid rgba(60,191,240,.15);
  font-size: 12px; font-weight: 600; color: #3cbff0; cursor: pointer; text-decoration: none; transition: .15s;
}
.af-chip:hover { background: rgba(60,191,240,.18); }
.af-chip svg { width: 11px; height: 11px; stroke: #3cbff0; opacity: .5; flex-shrink: 0; }
.af-chip:hover svg { opacity: 1; }
.af-clear { font-size: 12px; font-weight: 600; color: #666; cursor: pointer; margin-left: 4px; text-decoration: none; }
.af-clear:hover { color: #3cbff0; }

/* Model grid */
.model-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 15px 0; }

/* No image placeholder */
.mc-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1c1c1c, #222); }
.mc-initials { font-size: 26px; font-weight: 800; color: #444; opacity: .25; }

/* Bottom sheet (mobile filters) */
.sheet-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1060;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.sheet-overlay.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; bottom: 0; left: 0; right: 0; background: #111;
  border-top-left-radius: 20px; border-top-right-radius: 20px;
  z-index: 1061; max-height: 75vh; overflow-y: auto;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.sheet-overlay.open .sheet { transform: translateY(0); }
.sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: #444; margin: 10px auto 0; }
.sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 10px; }
.sheet-title { font-size: 15px; font-weight: 800; color: #f0f0f0; }
.sheet-clear { font-size: 11px; font-weight: 600; color: #3cbff0; cursor: pointer; background: none; border: none; padding: 0; }
.sheet-section { padding: 0 20px 16px; }
.sheet-label { font-size: 9px; font-weight: 700; color: #444; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.sheet-options { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet-opt {
  padding: 7px 14px; border-radius: 8px; background: #1c1c1c;
  border: 1px solid #2a2a2a; font-size: 12px; font-weight: 500;
  color: #aaa; cursor: pointer; transition: .12s; display: flex; align-items: center; gap: 5px;
}
.sheet-opt.act { background: rgba(60,191,240,.10); border-color: rgba(60,191,240,.25); color: #3cbff0; font-weight: 600; }
.sheet-opt .sdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sheet-footer {
  padding: 12px 20px 24px; display: flex; gap: 8px;
  border-top: 1px solid #1a1a1a; position: sticky; bottom: 0; background: #111;
}
.sheet-btn-reset {
  flex: 1; padding: 11px; border-radius: 10px; background: #1c1c1c;
  border: 1px solid #2a2a2a; font-size: 12px; font-weight: 600; color: #aaa; text-align: center; cursor: pointer;
}
.sheet-btn-apply {
  flex: 2; padding: 11px; border-radius: 10px; background: #3cbff0;
  border: none; font-size: 12px; font-weight: 700; color: #000; text-align: center; cursor: pointer;
}

/* Mobile filter bar */
.mobile-filter-bar { display: none; }
.mobile-filter-bar .model-search { flex: 1; width: auto; margin: 0; }
.m-filter-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 8px; background: #1c1c1c; border: 1px solid #2a2a2a;
  font-size: 13px; font-weight: 600; color: #888; cursor: pointer; flex-shrink: 0; position: relative;
}
.m-filter-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
.m-filter-btn.has-filters { border-color: rgba(60,191,240,.25); color: #3cbff0; background: rgba(60,191,240,.10); }
.m-filter-badge {
  position: absolute; top: -4px; right: -4px; width: 16px; height: 16px;
  border-radius: 50%; background: #3cbff0; color: #000; font-size: 8px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* Model grid responsive */
@media (max-width: 1024px) { .model-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) {
  .model-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .filter-toolbar { display: none !important; }
  .mobile-filter-bar { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #1a1a1a; }
}
@media (max-width: 480px) {
  .model-grid { grid-template-columns: repeat(2, 1fr); }
  .mc-detail { display: none; }
}

/* Light theme — Models */
html.light .country-strip { border-bottom-color: #e0e0e0; }
html.light .cp { background: #f5f5f5; border-color: #ddd; color: #777; }
html.light .cp:hover { border-color: #bbb; color: #333; }
html.light .cp.act { background: #3cbff0; border-color: #3cbff0; color: #fff; }
html.light .filter-toolbar { border-bottom-color: #e0e0e0; }
html.light .fd-trigger { background: #f5f5f5; border-color: #ddd; color: #777; }
html.light .fd-trigger:hover { border-color: #bbb; color: #333; }
html.light .fd-trigger.has-value { border-color: rgba(60,191,240,.3); color: #0098c8; background: rgba(60,191,240,.08); }
html.light .fd-panel { background: #fff; border-color: #e0e0e0; box-shadow: 0 12px 32px rgba(0,0,0,.12); }
html.light .fd-opt { color: #666; }
html.light .fd-opt:hover { background: rgba(0,0,0,.03); color: #222; }
html.light .fd-opt.act { background: rgba(60,191,240,.08); color: #0098c8; }
html.light .model-search { background: #f5f5f5; border-color: #ddd; }
html.light .model-search:focus-within { border-color: #3cbff0; }
html.light .model-search input { color: #333; }
html.light .model-search input::placeholder { color: #bbb; }
html.light .af-chip { background: rgba(60,191,240,.06); border-color: rgba(60,191,240,.12); color: #0098c8; }
html.light .sheet { background: #fff; }
html.light .sheet-title { color: #222; }
html.light .sheet-opt { background: #f5f5f5; border-color: #ddd; color: #666; }
html.light .sheet-opt.act { background: rgba(60,191,240,.08); border-color: rgba(60,191,240,.2); color: #0098c8; }
html.light .sheet-footer { background: #fff; border-top-color: #e0e0e0; }
html.light .sheet-btn-reset { background: #f5f5f5; border-color: #ddd; color: #666; }
html.light .sheet-btn-apply { background: #3cbff0; color: #fff; }
html.light .mobile-filter-bar { border-bottom-color: #e0e0e0; }
html.light .m-filter-btn { background: #f5f5f5; border-color: #ddd; color: #777; }
html.light .m-filter-btn.has-filters { border-color: rgba(60,191,240,.3); color: #0098c8; background: rgba(60,191,240,.06); }