/* ═══════════════════════════════════════════════════════════
   CelebsEdge — shared theme (flat.css), loaded by every page
   Logo-pink header, white content pages, plum text, pink pill
   actions, soft flat shadows.
   ═══════════════════════════════════════════════════════════ */

:root {
  --brand:          #FF66C4;   /* logo background — header only */
  --accent:         #F261B8;   /* primary actions, links, active states */
  --accent-hover:   #FB17A0;
  --accent-active:  #CE3792;
  --accent-soft:    #FFE8F5;
  --plum:           #33182D;   /* text, secondary buttons, footer */
  --plum-75:        rgba(51,24,45,.75);
  --plum-50:        rgba(51,24,45,.5);
  --plum-20:        rgba(51,24,45,.2);
  --plum-10:        rgba(51,24,45,.1);
  --surface:        #FFFFFF;
  --surface-2:      #F2F2F2;
  --line:           #D4CDD3;
  --yellow:         #FECB31;
  --shadow-sm:      0 2px 10px rgba(51,24,45,.08);
  --shadow-md:      0 4px 20px rgba(0,0,0,.12);
  --shadow-lg:      0 10px 30px rgba(51,24,45,.18);
  --radius:         12px;
  --pill:           40px;
  --ease:           cubic-bezier(.22,.68,0,1);

  /* Names older stylesheets and scripts still read */
  --pink:        var(--accent);
  --pink-soft:   var(--accent-soft);
  --pink-deep:   var(--accent-active);
  --pink-panel:  var(--surface-2);
  --ink:         var(--plum);
  --ink-soft:    var(--plum-20);
  --ink-deep:    var(--plum);
  --outline:     var(--line);
  --outline-soft:var(--plum-10);
  --outline-mid: var(--plum-20);
  --bg:          var(--surface);
  --bg2:         var(--surface-2);
  --bg3:         var(--surface-2);
  --card:        var(--surface);
  --accent2:     var(--surface);
  --gold:        var(--accent);
  --text:        var(--plum);
  --text-ink:    var(--plum);
  --muted:       var(--plum-75);
  --text-muted:  var(--plum-75);
  --border:      var(--plum-10);
  --border2:     var(--plum-10);
  --focus:       0 0 0 3px rgba(242,97,184,.35);
  --success:     #2BC85A;
  --warning:     var(--yellow);
  --danger:      #E72121;
  --public-pink:        var(--accent);
  --public-pink-deep:   var(--accent-active);
  --public-ink:         var(--plum);
  --public-muted:       var(--plum-75);
  --public-text-accent: var(--accent);
  --public-canvas:      var(--surface);
  --public-soft:        var(--accent-soft);
  --public-border:      var(--plum-10);
}

/* ── STRUCTURE (pages that don't load index.css rely on these) ── */
/* Zero-specificity :where() so each page's own stylesheet still wins. */
:where(*, *::before, *::after) { box-sizing: border-box }
:where(body) { margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased }
:where(nav) { position: sticky; top: 0; z-index: 200; padding: 0 16px }
:where(.nb) { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 14px; height: 64px }
:where(nav .back-nav, nav .back, nav .nav-contact) { margin-left: auto }
:where(.page) { max-width: 1440px; margin: 0 auto; padding: 24px 16px }
:where(footer) { text-align: center; padding: 28px 16px; font-size: 13px }
:where(footer a) { text-decoration: none }
:where(.actress-grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px }
:where(.title) { font-size: 28px; margin: 0 }
:where(.mobile-bottom-nav) {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  justify-content: space-around; padding-bottom: env(safe-area-inset-bottom, 0);
}
:where(.mobile-nav-item) { flex: 1; padding: 12px 4px; text-align: center; font-size: 12px; background: none; border: 0; cursor: pointer; font-family: inherit }
@media (max-width: 900px) {
  :where(.mobile-bottom-nav) { display: flex }
  :where(body) { padding-bottom: 60px }
}

/* ── ONE CONTENT COLUMN ──
   Header, tabs and page content share the same width and side spacing, so their left edges line up on every screen. */
nav { padding-inline: 0 !important }
nav .nb, .subnav .subnav-inner, .subnav .sec-tabs {
  max-width: 1440px !important; margin-inline: auto !important; box-sizing: border-box !important;
  padding-inline: clamp(14px, 3vw, 24px) !important;
}
.page { max-width: 1440px !important; box-sizing: border-box !important }

/* ── FOOTER AT THE BOTTOM ──
   The page is at least one screen tall and the footer takes the leftover space above it,
   so short pages (an empty search, a small category) don't leave a gap under the footer. */
body:not(.not-found-page):not(.admin-shell) {
  display: flex !important; flex-direction: column !important;
  min-height: 100vh; min-height: 100dvh;
}
body:not(.not-found-page):not(.admin-shell) > * { flex-shrink: 0 }
body:not(.not-found-page):not(.admin-shell) > main:not(.page) { width: 100% }
body:not(.not-found-page):not(.admin-shell) > footer { margin-top: auto !important; width: 100% }

/* ── BASE ── */
html, body {
  background: var(--surface) !important;
  color: var(--plum) !important;
}
body::after { display: none !important }
body :where(h1,h2,h3,h4,p,li,span,a,small,strong,em,label,div,th,td) {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
a { color: var(--plum) }
a:hover { color: var(--accent-hover) }
h1, .vt, .page-title, .actress-name-big { color: var(--plum) !important }

/* ── HEADER (logo pink) ── */
nav, .topbar {
  background: var(--brand) !important;
  border: 0 !important;
  box-shadow: 0 2px 12px rgba(51,24,45,.15) !important;
  backdrop-filter: none !important;
}
nav .nb { height: 64px !important }
nav :where(a, span, div):not(.select-menu *):not(.sw *) { color: #fff }
.sw input, nav input[type="search"] {
  background: #fff !important;
  border: 2px solid transparent !important;
  border-radius: var(--pill) !important;
  color: var(--plum) !important;
  box-shadow: none !important;
}
.sw input:focus { border-color: var(--plum) !important; box-shadow: none !important }
/* Search sits at the top right; on phones it drops to its own full-width row (see 700px rule). */
@media (min-width: 701px) {
  nav .sw { margin-left: auto !important; flex: 0 1 380px !important; max-width: 380px !important }
}
nav :where(.back, .back-nav, .nav-contact, .page-nav a, .back-btn) {
  background: #fff !important; color: var(--plum) !important;
  border: 0 !important; border-radius: var(--pill) !important;
  box-shadow: none !important; padding: 9px 18px !important;
  text-transform: none !important; font-size: 14px !important;
  text-decoration: none !important;
}
nav :where(.back, .back-nav, .nav-contact, .page-nav a):hover { background: var(--plum) !important; color: #fff !important }

/* ── SUB-NAV TABS (Latest · Celebs · Category) ── */
.sec-tabs {
  display: flex !important; gap: 4px !important;
  background: var(--surface) !important;
  border: 0 !important; border-bottom: 1px solid var(--plum-10) !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 0 22px !important;
  overflow-x: auto; scrollbar-width: none;
}
.sec-tabs::-webkit-scrollbar { display: none }
.stab {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: var(--plum-75) !important; border-radius: 0 !important;
  padding: 14px 18px 12px !important; font-size: 15px !important;
  text-transform: uppercase !important; letter-spacing: .4px !important;
  border-bottom: 3px solid transparent !important; white-space: nowrap;
  transform: none !important;
}
.stab:hover { color: var(--accent) !important; background: transparent !important }
/* Full-width white bar directly under the pink header */
.subnav {
  position: relative; z-index: 150;
  background: #fff; border-bottom: 1px solid var(--plum-10);
  box-shadow: 0 2px 8px rgba(51,24,45,.05);
}
.subnav .sec-tabs, .subnav-inner {
  max-width: 1440px; margin: 0 auto !important;
  padding: 0 clamp(6px, 3vw, 24px) !important; border-bottom: 0 !important;
  display: flex; gap: 4px;
}
a.stab { text-decoration: none !important; display: inline-block }
/* One navigation per screen size: tabs on desktop, the bottom bar on phones and tablets. */
@media (max-width: 900px) {
  .subnav { display: none !important }
}
@media (min-width: 901px) {
  .mobile-bottom-nav { display: none !important }
}
.section-intro { color: var(--plum-75); margin: -4px 0 16px; font-size: 14px }
.stab.active {
  color: var(--accent) !important; background: transparent !important;
  border-bottom-color: var(--accent) !important; box-shadow: none !important;
}

/* ── SECTIONS & TITLES ── */
.section.active, .seo-link-index, .profile-layout {
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important;
}
main.page { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-block: 24px !important }
.sec-title, .videos-title, .st, .card-title {
  color: var(--plum) !important; font-size: 22px;
  border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 14px !important;
}
.sec-title::after { background: var(--plum-10) !important; height: 1px !important }
.sort-bar, .videos-header, .srv, .vi, .below-rel, .ss2, .ss3, .actress-panel, .actress-info, .modal, .lb {
  background: var(--surface) !important;
  border: 1px solid var(--plum-10) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}
.sort-bar { padding: 10px 14px !important }
/* The tab already names the section, so these bars hold only their controls. */
.sort-bar .tag-search { flex: 1 1 auto; max-width: none !important; width: 100% }
.actress-sort-bar { justify-content: flex-end !important }
.actress-sort-bar .select-ui:first-of-type { margin-left: 0 !important }
.empty, .loading, .loading-msg { color: var(--plum-75) !important }
.empty h3, .noembed { color: var(--plum) !important }

/* ── BUTTONS ── */
.btn, .login-btn, .logout-btn, .ntb, .pb, .back, .back-nav, .back-btn, .nav-contact,
.tag, .actress-tag, .filter-chip, .sb2, .action-btn, .select-trigger, .ss,
.hdt, .rh, .icon-btn, .modal-close, .qa-icon {
  background: var(--surface) !important;
  border: 2px solid var(--plum-10) !important;
  color: var(--plum) !important;
  border-radius: var(--pill) !important;
  box-shadow: none !important;
  text-shadow: none !important; -webkit-text-stroke: 0 !important;
  transform: none !important;
}
.btn:hover, .back:hover, .back-nav:hover, .back-btn:hover, .tag:hover, .actress-tag:hover,
.sb2:hover, .action-btn:hover, .select-trigger:hover, .filter-chip:hover {
  border-color: var(--accent) !important; color: var(--accent) !important;
}
/* Primary actions */
.load-more, .btn-primary, .sb2.active {
  background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
}
.load-more:hover, .btn-primary:hover, .sb2.active:hover {
  background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; color: #fff !important;
}
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  background: var(--surface) !important; color: var(--plum) !important;
  border: 2px solid var(--plum-10) !important; box-shadow: none !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px }
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus { border-color: var(--accent) !important; outline: none !important }
input::placeholder, textarea::placeholder { color: var(--plum-50) !important }
.select-menu { background: #fff !important; border: 1px solid var(--plum-10) !important; box-shadow: var(--shadow-md) !important; border-radius: var(--radius) !important }
.select-option { color: var(--plum) !important }
.select-option:hover, .select-option.active { background: var(--accent-soft) !important; color: var(--accent-active) !important }
.select-trigger::after { color: var(--accent) !important }

/* ── PAGINATION ── */
.pb {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  background: var(--surface-2) !important; border-color: transparent !important;
}
.pb:hover { background: var(--accent-soft) !important; color: var(--accent-active) !important }
.pb.active { background: var(--accent) !important; color: #fff !important }

/* ── VIDEO CARDS ── */
.card, .native-ad-card {
  background: var(--surface) !important;
  border: 0 !important; border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important; overflow: hidden !important;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease) !important;
}
.card:hover { transform: translateY(-3px) !important; box-shadow: var(--shadow-lg) !important }
.card::before, .card::after { display: none !important; content: none !important }
.card .tw {
  position: relative !important; aspect-ratio: 16 / 9 !important;
  overflow: hidden !important; background: var(--surface-2) !important; border-radius: 0 !important;
}
.card .tw::after { display: none !important }
.card .tw img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important }
.card .hb2, .rank-badge {
  position: absolute !important; top: 8px !important; right: 8px !important; z-index: 2 !important;
  background: var(--accent) !important; color: #fff !important; border: 0 !important;
  box-shadow: none !important; border-radius: var(--pill) !important;
  font-size: 10px !important; padding: 3px 9px !important; line-height: 1.3 !important;
}
.card .dbb {
  position: absolute !important; bottom: 8px !important; right: 8px !important; z-index: 2 !important;
  background: var(--plum-75) !important; color: #fff !important;
  font-size: 11px !important; padding: 2px 8px !important; border-radius: var(--pill) !important;
}
.card .cb { padding: 12px 14px 14px !important; background: transparent !important }
.card .ct, .card .ct:visited {
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important; text-decoration: none !important;
  color: var(--plum) !important; font-size: 14px !important; line-height: 1.35 !important; margin-bottom: 4px !important;
}
.card .ct:hover { color: var(--accent-hover) !important }
.card-actress, .card-actress:visited {
  display: inline-block !important; margin-top: 2px !important;
  color: var(--accent) !important; font-size: 13px !important;
  text-decoration: none !important; background: none !important; border: 0 !important;
}
.card-actress:hover { color: var(--accent-hover) !important; text-decoration: underline !important }

/* Each card is only as tall as its own thumbnail + title (no stretching to match a taller neighbour). */
#grid, #grid-trending, .vid-grid, .player-video-grid, #actress-video-grid { align-items: start !important }
/* Phones: two narrow columns, so give titles a third line instead of cutting them after a few words. */
@media (max-width: 600px) {
  .card .ct { font-size: 13px !important; line-height: 1.3 !important; -webkit-line-clamp: 3 !important; margin-bottom: 3px !important }
  .card .cb { padding: 9px 10px 11px !important }
  .card-actress, .card-actress:visited { font-size: 12px !important }
  .exclusive-card-title { font-size: 13px; line-height: 1.3 }
  .exclusive-card-body { padding: 9px 10px 11px; gap: 8px }
}

/* Player sidebar list */
.side-video-card { align-items: flex-start !important }
.side-video-thumb > div { border-radius: 8px !important; box-shadow: var(--shadow-sm) !important }
.side-title-row, .side-title-row:visited {
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important; color: var(--plum) !important; text-decoration: none !important;
  font-size: 13px !important; line-height: 1.3 !important;
}
.side-title-row:hover { color: var(--accent-hover) !important }
.side-video-card .card-actress { display: block !important; font-size: 12px !important }

/* ── CELEB TILES ── */
.actress-btn {
  padding: 0 !important; text-align: left !important; cursor: pointer !important;
  background: var(--surface) !important; border: 0 !important;
  border-radius: var(--radius) !important; overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important; transform: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease) !important;
}
.actress-btn:hover { transform: translateY(-3px) !important; box-shadow: var(--shadow-lg) !important }
.actress-cover-tile {
  position: relative !important; display: block !important; aspect-ratio: 3 / 4 !important;
  overflow: hidden !important; background: linear-gradient(160deg, var(--brand), var(--accent-active)) !important;
}
.actress-tile-img, .actress-tile-placeholder {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; transition: transform .25s var(--ease) !important;
}
.actress-tile-placeholder {
  display: grid !important; place-items: center !important;
  font-size: clamp(34px, 6vw, 52px) !important; color: #fff !important;
}
.actress-cover-tile::after, .actress-profile-cover::after {
  content: '' !important; position: absolute !important; inset: auto 0 0 0 !important;
  height: 55% !important; pointer-events: none !important;
  background: linear-gradient(180deg, transparent, rgba(51,24,45,.85)) !important;
}
.actress-tile-caption, .actress-profile-caption {
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 1 !important; padding: 10px 12px !important;
}
.actress-tile-caption .actress-name { display: block !important; color: #fff !important; font-size: 15px !important; line-height: 1.2 !important }
.actress-tile-caption .actress-count { display: block !important; margin-top: 2px !important; color: rgba(255,255,255,.85) !important; font-size: 12px !important }
.actress-tile-cats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px }
.actress-tile-cats span {
  background: rgba(255,255,255,.92); color: var(--accent-active) !important;
  border-radius: var(--pill); padding: 2px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .3px;
}
.actress-btn:hover .actress-tile-img { transform: scale(1.05) !important }
.actress-profile-cover { position: relative !important; overflow: hidden !important; border-radius: var(--radius) !important }
.actress-profile-caption .actress-name-big { color: #fff !important }
.actress-cover-placeholder { background: linear-gradient(160deg, var(--brand), var(--accent-active)) !important; color: #fff !important }
@media (max-width: 680px) { .actress-cover-placeholder { font-size: 40px !important } }
.actress-avatar, .actress-avatar-large { border: 0 !important; background: var(--brand) !important; color: #fff !important; box-shadow: none !important }
.actress-avatar-large { display: none !important }
.actress-stat-num { color: var(--accent) !important }
.actress-stat-lbl { color: var(--plum-75) !important }

/* ── CATEGORY CARDS ── */
.category-card {
  background: var(--surface) !important; border: 0 !important; border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important; transform: none;
}
.category-card:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-lg) !important }
.category-icon, .category-icon-placeholder {
  border: 0 !important; border-radius: 50% !important;
  background: var(--accent-soft) !important; color: var(--accent-active) !important;
}
.category-name { color: var(--plum) !important }
.category-count { color: var(--plum-75) !important }
body:not(.admin-shell) :where(.cat-head, .tag-head) {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  justify-content: space-between !important; gap: 12px !important; margin-bottom: 16px !important;
}
body:not(.admin-shell) :where(.cat-tools, .tag-tools) { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important }
body:not(.admin-shell) :where(.cat-tools, .tag-tools) input { border-radius: var(--pill) !important; padding: 10px 16px !important; min-width: min(260px, 100%) !important }

/* ── TAG CHIPS ── */
.tag-card, .profile-tag-card {
  background: var(--surface-2) !important; border: 0 !important; box-shadow: none !important;
  border-radius: var(--pill) !important; color: var(--plum) !important; text-decoration: none !important;
}
.tag-card :where(span, div) { color: var(--plum) !important }
.tag-card:hover { background: var(--accent-soft) !important; transform: none !important }
.tag-card .tag-count, .profile-tag-card .tag-count { color: var(--accent) !important }
.profile-tag-card { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 12px !important; font-size: 13px !important }

/* ── PLAYER ── */
body:not(.admin-shell) .pw, body:not(.admin-shell) .pw.pw-empty {
  border: 0 !important; outline: 0 !important; box-shadow: var(--shadow-md) !important;
  background: #000 !important; border-radius: var(--radius) !important;
}
body:not(.admin-shell) .pw::after { display: none !important; content: none !important }
body:not(.admin-shell) .pw iframe { border: 0 !important; background: #000 !important }
body:not(.admin-mobile-preview) .pw.pw-empty .noembed { color: #fff !important }
.pw .pw-video { position: absolute; inset: 0; display: block }
/* Thumbnail + play button shown before the video loads */
.pw-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: #000; cursor: pointer; display: block;
}
.pw-poster img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: opacity .2s var(--ease) }
.pw-poster:hover img { opacity: 1 }
.pw-play-icon {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  border-radius: 50%; background: var(--accent); border: 4px solid #fff; box-sizing: border-box;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.pw-play-icon::after {
  content: ''; position: absolute; left: 25px; top: 18px;
  border-style: solid; border-width: 16px 0 16px 26px;
  border-color: transparent transparent transparent #fff;
}
.pw-poster:hover .pw-play-icon { transform: scale(1.08); background: var(--accent-hover) }
.pw-poster:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px }
.pw-duration {
  position: absolute; right: 12px; bottom: 12px; padding: 3px 10px; border-radius: var(--pill);
  background: rgba(51,24,45,.8); color: #fff; font-size: 13px;
}
.srv { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px !important; margin-top: 12px }
.srv .srv-current { margin-right: 4px; font-size: 13px }
.video-description {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--plum-10);
  color: var(--plum); font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
.srv-current { color: var(--plum-75) !important }

/* ── FOOTER ── */
footer {
  background: var(--plum) !important; color: rgba(255,255,255,.75) !important;
  border: 0 !important; box-shadow: none !important; margin-top: 48px !important;
}
footer p, footer a, footer span { color: rgba(255,255,255,.75) !important }
footer a:hover { color: #fff !important }

/* ── MOBILE BOTTOM NAV ── */
.mobile-bottom-nav {
  background: #fff !important; border-top: 1px solid var(--plum-10) !important;
  box-shadow: 0 -2px 12px rgba(51,24,45,.08) !important;
}
.mobile-nav-item, .mobile-nav-item span { color: var(--plum-75) !important; text-decoration: none !important }
/* Bar is exactly 56px (+ iPhone home-indicator area) and the page reserves exactly that much,
   so nothing hides behind it and there's no white strip under the footer. Items are full-height tap targets. */
.mobile-bottom-nav { height: calc(56px + env(safe-area-inset-bottom, 0px)) !important; padding: 0 0 env(safe-area-inset-bottom, 0px) !important; align-items: stretch !important }
.mobile-nav-item { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 4px !important; min-height: 56px; font-size: 13px !important }
@media (max-width: 900px) {
  body:not(.admin-shell) { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important }
}
.mobile-nav-item.active, .mobile-nav-item.active span { color: var(--accent) !important }

/* ── BRAND MARK ── */
.site-logo-image { display: block !important; width: 100% !important; height: auto !important; max-width: none !important; object-fit: contain !important; filter: none !important }
.logo {
  display: inline-flex !important; align-items: center !important;
  width: clamp(96px, 10vw, 120px) !important; height: auto !important;
  flex: 0 0 auto !important; line-height: 0 !important; text-decoration: none !important;
}
.admin-shell .ll {
  width: min(240px, 74vw) !important; margin: 0 auto 6px !important; line-height: 0 !important;
  padding: 12px 16px !important; border-radius: var(--radius) !important; box-sizing: border-box !important;
  background: var(--brand) !important;
}
.admin-shell .brand { display: flex !important; align-items: center !important; width: 110px !important; flex: 0 0 110px !important; line-height: 0 !important; background: var(--brand) !important; padding: 5px 10px !important; border-radius: 10px !important; box-sizing: border-box !important }
@media (max-width: 700px) {
  .logo { width: clamp(88px, 26vw, 110px) !important }
  .admin-shell .brand { width: 96px !important; flex-basis: 96px !important }
}

/* ── ADMIN: tab bar fits all sections (wraps instead of hiding tabs off-screen) ── */
.admin-shell .nav-tabs { flex-wrap: wrap !important; overflow: visible !important; row-gap: 4px }
@media (max-width: 1500px) {
  .admin-shell .nav-tabs .ntb { padding: 8px 10px !important }
  .admin-shell .nav-tabs .ntb svg { display: none !important }
}

/* ── ADMIN: Turnstile box on the login screen ── */
.admin-shell .ts-box { display: flex; justify-content: center; min-height: 65px; margin: 10px 0 4px }

/* ── ADMIN: celeb rows ── */
.admin-shell .celeb-row-bad { border-color: var(--danger) !important; box-shadow: 0 0 0 2px rgba(231,33,33,.15) !important }
.admin-shell .celeb-row-error { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--danger) }
.admin-shell .celeb-row-error:empty { display: none }

/* ── ADMIN: video link rows ── */
.admin-shell .server-row {
  margin-bottom: 10px; padding: 12px; border-radius: 10px;
  background: var(--bg3); border: 1px solid var(--border2);
}
.admin-shell .server-row-fields { display: grid; grid-template-columns: minmax(110px, 1fr) 3fr auto; gap: 10px; align-items: end }
.admin-shell .server-row-fields label > span {
  display: block; margin-bottom: 6px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
}
.admin-shell .server-row-fields input { width: 100% }
.admin-shell .server-row-actions { display: flex; gap: 6px }
.admin-shell .server-test { margin-top: 12px }
.admin-shell .server-row-hint { margin-top: 8px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere }
.admin-shell .server-row-hint:empty { display: none }
.admin-shell .hint-ok { color: var(--success); font-weight: 600 }
.admin-shell .hint-bad { color: var(--danger); font-weight: 600 }
.admin-shell .server-test-frame {
  position: relative; width: min(100%, 560px); aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden;
}
.admin-shell .server-test-frame :where(iframe, video) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.admin-shell .server-test-msg { margin-top: 8px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere }
@media (max-width: 700px) {
  .admin-shell .server-row-fields { grid-template-columns: 1fr }
}

/* ── LEGAL PAGES (legal.css still carries the old dark palette) ── */
.legal-page h1, body:has(> .legal-page) h1, main h1 { text-shadow: none !important }
body :where(h2, h3) { color: var(--plum) !important }
main a:not(.btn):not(.stab):not(.not-found-action):not(.ct):not(.card-actress):not(.side-title-row):not(.actress-btn):not(.category-card):not(.tag-card) { color: var(--accent-active) }

/* ── 404 ── */
.not-found-page { min-height: 100vh !important; display: grid !important; place-items: center !important; margin: 0 !important; padding: 24px !important; box-sizing: border-box !important }
.not-found-card { width: min(460px, 100%) !important; text-align: center !important; padding: 0 0 32px !important; border-radius: 18px !important; background: #fff !important; box-shadow: var(--shadow-md) !important; overflow: hidden !important }
.not-found-logo { display: block !important; background: var(--brand) !important; padding: 22px !important; margin: 0 0 22px !important }
.not-found-logo img { display: block !important; width: min(200px, 70%) !important; height: auto !important; margin: 0 auto !important }
.not-found-code { margin: 0 !important; font-size: 64px !important; line-height: 1 !important; color: var(--accent) !important }
.not-found-card h1 { margin: 10px 0 8px !important; font-size: 28px !important }
.not-found-card p { margin: 0 0 20px !important; color: var(--plum-75) !important; padding: 0 20px }
.not-found-action { display: inline-block !important; padding: 12px 24px !important; border-radius: var(--pill) !important; background: var(--accent) !important; color: #fff !important; text-decoration: none !important }
.not-found-action:hover { background: var(--accent-hover) !important }

/* ── AD SLOTS ── */
.ad-slot:not(:empty) { background: var(--surface-2) !important; border: 1px dashed var(--line) !important; box-shadow: none !important; border-radius: 10px !important }
.native-ad-label { color: var(--plum-50) !important }

/* ── LAYOUT ── */
html, body { overflow-x: hidden !important }
.page { width: min(100%, 1440px) !important; padding-inline: clamp(14px, 3vw, 24px) !important }
.layout { align-items: start !important }
main, .section.active, .profile-layout, .layout > main, .layout > aside, .videos-col { min-width: 0 !important }
#grid, #grid-trending, .vid-grid, .strip-grid, .player-video-grid { gap: clamp(14px, 2vw, 20px) !important }
.actress-grid, .tag-index { gap: clamp(12px, 2vw, 18px) !important }
@media (max-width: 900px) {
  /* The celeb profile keeps its own tablet layout (photo sidebar) from actress.css. */
  .layout { display: grid !important; grid-template-columns: 1fr !important; gap: 22px !important; padding-block: 18px !important }
  .layout > main, .layout > aside, .videos-col, .profile-side { width: 100% !important; min-width: 0 !important }
  aside { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important }
  .adside, .adside-tall { display: none !important }
  .actress-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important }
}
@media (max-width: 700px) {
  nav .nb, .topbar { height: auto !important; min-height: 64px !important; padding-block: 10px !important; flex-wrap: wrap !important; gap: 10px !important }
  .sw { order: 3 !important; flex: 1 0 100% !important; width: 100% !important; max-width: none !important }
  .stab { padding: 12px 12px 10px !important; font-size: 13px !important }
}

/* Celeb profile: categories */
.profile-categories { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px }
.profile-categories a {
  background: var(--accent-soft); color: var(--accent-active) !important;
  border-radius: var(--pill); padding: 4px 12px; font-size: 13px; text-decoration: none;
}
.profile-categories a:hover { background: var(--accent); color: #fff !important }

/* ═══════════ EXCLUSIVE (Patreon) ═══════════ */
.exclusive-star { width: 1em; height: 1em; fill: currentColor; flex: 0 0 auto }
nav .nb .nav-exclusive {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  margin-left: 12px; padding: 9px 16px; border-radius: var(--pill);
  background: var(--plum); color: #fff !important; text-decoration: none; font-size: 14px;
  box-shadow: 0 2px 8px rgba(51,24,45,.25); transition: background .2s var(--ease);
}
nav .nb .nav-exclusive .exclusive-star { color: var(--yellow) }
nav .nb .nav-exclusive span { color: inherit !important }
nav .nb .nav-exclusive:hover, nav .nb .nav-exclusive.active { background: #fff; color: var(--plum) !important }
nav .nb > .logo + .nav-exclusive { margin-left: auto }
@media (max-width: 700px) {
  nav .nb .nav-exclusive { order: 2; margin-left: auto !important; padding: 8px 14px; font-size: 13px }
}

.exclusive-kicker {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--pill);
  background: var(--plum); color: #fff !important; font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
}
.exclusive-kicker .exclusive-star { color: var(--yellow) }
a.exclusive-cta, span.exclusive-cta {
  display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px;
  border-radius: var(--pill); background: var(--accent); color: #fff !important;
  text-decoration: none; font-size: 15px; white-space: nowrap; transition: background .2s var(--ease);
}
a.exclusive-cta:hover { background: var(--accent-hover) }
.exclusive-cta-small { padding: 7px 14px !important; font-size: 13px !important }
.exclusive-cta-big { padding: 14px 30px !important; font-size: 17px !important; margin-top: 8px }

/* Banner: under videos */
.exclusive-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 16px 0; padding: 16px 18px; border-radius: var(--radius);
  background: linear-gradient(120deg, #fff 0%, var(--accent-soft) 100%);
  border-left: 5px solid var(--accent); box-shadow: var(--shadow-sm);
}
.exclusive-banner-text { flex: 1 1 260px; min-width: 0 }
.exclusive-banner-text p { margin: 8px 0 0; color: var(--plum); font-size: 15px; line-height: 1.45 }
.exclusive-banner-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
a.exclusive-more { color: var(--plum) !important; font-size: 14px; text-decoration: underline }
@media (max-width: 520px) {
  .exclusive-banner-actions { width: 100% }
  .exclusive-banner-actions .exclusive-cta { flex: 1 }
}

/* Card in the Latest grid */
.card.exclusive-card { background: var(--plum) !important }
.exclusive-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: #fff }
.exclusive-card-media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(135deg, var(--brand), var(--accent-active));
}
.exclusive-card-media img { width: 100%; height: 100%; object-fit: cover; display: block }
.exclusive-card-media .exclusive-kicker { position: absolute; left: 10px; top: 10px }
.exclusive-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px 14px }
.exclusive-card-title { color: #fff; font-size: 14px; line-height: 1.35 }

/* Celeb profile */
a.exclusive-profile-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: -6px 0 14px; padding: 10px 16px;
  border-radius: var(--pill); background: var(--plum); color: #fff !important; text-decoration: none; font-size: 14px;
}
a.exclusive-profile-btn .exclusive-star { color: var(--yellow) }
a.exclusive-profile-btn:hover { background: var(--accent-active) }

/* /exclusive page */
.exclusive-page { max-width: 1000px; margin: 0 auto; padding: 8px 0 24px }
.exclusive-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; align-items: center;
  padding: 24px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-md);
}
.exclusive-hero:not(:has(.exclusive-hero-media)) { grid-template-columns: 1fr; text-align: center; justify-items: center }
.exclusive-hero-media { border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--brand), var(--accent-active)) }
.exclusive-hero-media img { width: 100%; height: auto; display: block }
.exclusive-hero-body h1 { margin: 12px 0 10px; font-size: clamp(26px, 4vw, 38px); line-height: 1.15; color: var(--plum) }
.exclusive-description { color: var(--plum-75); font-size: 16px; line-height: 1.6; white-space: pre-wrap; margin-bottom: 14px }
.exclusive-perks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; text-align: left }
.exclusive-perks li { position: relative; padding-left: 28px; color: var(--plum); font-size: 15px }
.exclusive-perks li::before {
  content: '\2713'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px; display: grid; place-items: center;
}
@media (max-width: 760px) {
  .exclusive-hero { grid-template-columns: 1fr; padding: 16px }
}

/* ── ADS (admin -> Ads) ── */
.ce-spot { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 18px auto; max-width: 100%; overflow: hidden }
.ce-spot iframe { display: block; border: 0; max-width: 100%; background: transparent }
.ce-spot-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .8 }
.ce-spot-foot { margin: 28px auto 8px; width: 100%; box-sizing: border-box; padding: 0 clamp(14px, 3vw, 24px) }
.player-sidebar [data-ce-spot="video_side"] { margin: 0 0 16px }
/* Video ad before play */
.pw.pw-starting .pw-poster { cursor: progress }
.pw.pw-starting .pw-play-icon { animation: pw-pre-pulse 1s ease-in-out infinite }
@keyframes pw-pre-pulse { 50% { opacity: .5 } }
.pw-pre { position: absolute; inset: 0; z-index: 5; background: #000 }
.pw-pre video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000 }
.pw-pre-top { position: absolute; left: 10px; top: 10px; display: flex; gap: 8px; align-items: center; font-size: 12px; color: #fff; text-shadow: 0 1px 2px #000 }
.pw-pre-badge { background: #f5c518; color: #000; font-weight: 700; padding: 2px 7px; border-radius: 4px; text-shadow: none }
.pw-pre-visit { position: absolute; left: 10px; bottom: 12px; background: rgba(0,0,0,.65); color: #fff !important; border: 1px solid rgba(255,255,255,.35); padding: 7px 12px; border-radius: 6px; font-size: 13px; text-decoration: none }
.pw-pre-skip { position: absolute; right: 0; bottom: 16px; background: rgba(0,0,0,.75); color: #fff; border: 1px solid rgba(255,255,255,.4); border-right: 0; padding: 10px 16px; font-size: 14px; border-radius: 6px 0 0 6px; cursor: pointer; font-family: inherit }
.pw-pre-skip:disabled { cursor: default; opacity: .8 }
.pw-pre-sound { position: absolute; right: 10px; top: 10px; background: rgba(0,0,0,.65); color: #fff; border: 1px solid rgba(255,255,255,.35); padding: 6px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; font-family: inherit }
@media (max-width: 600px) {
  .pw-pre-skip { padding: 8px 12px; font-size: 13px; bottom: 10px }
  .pw-pre-visit { bottom: 10px; padding: 6px 10px; font-size: 12px }
}