/* EbonyBay V3 skin — dragonfruit pink #FF4696 on #121414, dark-first.
   Mirrors ClipBucket cb_28: 4-col grid, leaderboard + sidebar ad rails. */
:root {
  --eb-pink: #FF4696;
  --eb-bg: #121414;
  --eb-bg2: #1b1e1e;
  --eb-fg: #f5f0f2;
}
body { background: var(--eb-bg); color: var(--eb-fg); }
a { color: var(--eb-pink); }
/* Browse grids: 4 cols desktop */
.eb-grid, .videos-list, .miniatures-list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
}
@media (max-width: 1100px) {
  .eb-grid, .videos-list, .miniatures-list { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767px) {
  .eb-grid, .videos-list, .miniatures-list { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}
/* Cards: rounded thumbs, pink hover ring */
.eb-card { background: var(--eb-bg2); border-radius: 10px; overflow: hidden; }
.eb-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.eb-card:hover img { outline: 2px solid var(--eb-pink); outline-offset: -2px; }
/* Ad slots (filled by ebonybay_ads placement HTML) */
.eb-ad-desktop { text-align: center; margin: 12px auto; max-width: 728px; }
.eb-ad-mobile { text-align: center; margin: 8px auto; }
.eb-rail { display: flex; flex-direction: column; gap: 12px; }
/* Header: big bold logo + avatar + buttons on all devices */
.page-header-left .logo img { height: clamp(40px, 4.5vw, 56px) !important; width: auto !important; max-width: 44vw !important; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.page-header-right .circle-icon-button { width: 48px !important; height: 48px !important; }
.page-header-right .circle-icon-button .material-icons { font-size: 28px !important; }
.page-header-right .user-thumb .thumbnail.small-thumb {
  width: 64px !important;
  height: 64px !important;
  background-color: #141414 !important;
}
.page-header-right .user-thumb .thumbnail.small-thumb img {
  width: 38px !important;
  height: 38px !important;
  object-fit: cover;
}
.page-header-right .user-thumb .thumbnail.small-thumb .material-icons {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #d8d8d8;
  color: #171717;
  font-size: 27px;
  line-height: 38px;
}
.page-header-right .user-thumb .thumbnail.small-thumb:focus-visible {
  outline: 2px solid var(--eb-pink);
  outline-offset: 2px;
}
@media (max-width: 767px) {
  .page-header-left .logo img { height: 38px !important; max-width: 52vw !important; }
  .page-header-right .circle-icon-button { width: 44px !important; height: 44px !important; }
}

/* ============ MEMBER PROFILE — Pornhub-style ============ */
/* Banner always renders: uploaded image, or branded pink/dark gradient */
.profile-page-header .profile-banner-placeholder {
  background: linear-gradient(120deg, #2a0d1c 0%, #4a1130 38%, #121414 100%) !important;
  position: relative;
}
.profile-page-header .profile-banner-placeholder:after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 18% 120%, rgba(255, 70, 150, 0.45), transparent 55%),
    radial-gradient(circle at 82% -20%, rgba(255, 70, 150, 0.28), transparent 50%);
}
.profile-page-header .profile-banner-wrap { padding-bottom: 20%; }
@media screen and (min-width: 492px) {
  .profile-page-header .profile-banner-wrap { padding-bottom: calc(100% / 5.4); }
}

/* Info row sits on a dark bar, avatar overlaps the banner */
.profile-page-header .profile-info-nav-wrap {
  background: var(--eb-bg);
  border-bottom: 3px solid var(--eb-pink);
}
.profile-page-header .profile-info-nav-wrap:before { background: var(--eb-bg) !important; }

.profile-page-header .profile-info { padding: 0 0 14px; }
.profile-page-header .profile-info-inner {
  display: flex !important;
  align-items: flex-end;
  gap: 20px;
  width: 100%;
}
.profile-page-header .profile-avatar-cell {
  display: block !important;
  width: auto !important;
  flex: 0 0 auto;
  margin-top: -60px;
}
.profile-page-header .profile-info img,
.profile-page-header .profile-avatar-cell img {
  width: 160px !important;
  height: 160px !important;
  min-width: 160px;
  border-radius: 50% !important;
  border: 5px solid var(--eb-pink);
  background: var(--eb-bg2);
  object-fit: cover;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}
.profile-page-header .profile-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 5px solid var(--eb-pink);
  background: linear-gradient(140deg, var(--eb-pink), #7d1140);
  color: #121414;
  font-family: Arial Black, Arial, sans-serif;
  font-size: 54px;
  font-weight: 900;
}
.profile-page-header .profile-identity { flex: 1 1 auto; min-width: 0; padding-top: 14px; }
.profile-page-header .profile-info h1 {
  font-family: Arial Black, Arial, sans-serif !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--eb-fg);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  word-break: break-word;
}
.profile-page-header .profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: rgba(245, 240, 242, 0.72);
}
.profile-page-header .profile-stats b { color: var(--eb-pink); font-weight: 700; }
.profile-page-header .profile-bio {
  margin: 10px 0 0;
  max-width: 820px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(245, 240, 242, 0.82);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.profile-page-header .profile-nav {
  background: var(--eb-bg) !important;
  border-bottom: 1px solid rgba(255, 70, 150, 0.25) !important;
}
.profile-page-header .profile-nav .items-list-wrap li a {
  font-family: Arial Black, Arial, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.profile-page-header .profile-nav .items-list-wrap li.active a { color: var(--eb-pink) !important; }

/* Tablet / phone */
@media screen and (max-width: 900px) {
  .profile-page-header .profile-info h1 { font-size: 27px !important; }
  .profile-page-header .profile-info img,
  .profile-page-header .profile-avatar-cell img,
  .profile-page-header .profile-avatar-fallback { width: 120px !important; height: 120px !important; min-width: 120px; }
  .profile-page-header .profile-avatar-cell { margin-top: -44px; }
  .profile-page-header .profile-avatar-fallback { font-size: 40px; }
}
@media screen and (max-width: 560px) {
  .profile-page-header .profile-info-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .profile-page-header .profile-avatar-cell { margin-top: -50px; padding-left: 4px; }
  .profile-page-header .profile-info img,
  .profile-page-header .profile-avatar-cell img,
  .profile-page-header .profile-avatar-fallback { width: 96px !important; height: 96px !important; min-width: 96px; border-width: 4px; }
  .profile-page-header .profile-avatar-fallback { font-size: 32px; }
  .profile-page-header .profile-identity { padding-top: 0; }
  .profile-page-header .profile-info h1 { font-size: 22px !important; }
  .profile-page-header .profile-stats { gap: 12px; font-size: 13px; margin-top: 8px; }
}