/* ═══════════════════════════════════════════════════════════
   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 }
}

/* ── 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 · Community · 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 }
.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, .community-send {
  background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
}
.load-more:hover, .btn-primary:hover, .sb2.active:hover, .community-send: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 }

/* 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 }
.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 }
.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: 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(.community-send):not(.not-found-action):not(.ct):not(.card-actress):not(.side-title-row):not(.profile-community-btn):not(.actress-btn):not(.category-card):not(.community-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) {
  .layout, .profile-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 + community entry point */
.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 }
.profile-community-btn {
  display: block; text-align: center; margin: 0 0 14px; padding: 11px 16px;
  background: var(--accent); color: #fff !important; border-radius: var(--pill);
  text-decoration: none; font-size: 15px;
}
.profile-community-btn:hover { background: var(--accent-hover) }

/* ═══════════ COMMUNITY ═══════════ */
.community-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px }
.community-card {
  display: flex; gap: 14px; align-items: center; padding: 14px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm);
  text-decoration: none; color: var(--plum);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.community-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--plum) }
.community-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: 0 0 56px; overflow: hidden;
  display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 20px;
}
.community-avatar img { width: 100%; height: 100%; object-fit: cover }
.community-meta { min-width: 0; flex: 1 }
.community-name { font-size: 16px; color: var(--plum) }
.community-stats { font-size: 12px; color: var(--accent); margin-top: 2px }
.community-preview { font-size: 13px; color: var(--plum-75); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

.community-page { max-width: 860px; margin: 0 auto; padding: 24px 0 }
.community-head {
  display: flex; align-items: center; gap: 16px; padding: 18px; margin-bottom: 18px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.community-head .community-avatar { width: 72px; height: 72px; flex-basis: 72px; font-size: 26px }
.community-head h1 { font-size: 24px; margin: 0 }
.community-head p { margin: 4px 0 0; color: var(--plum-75); font-size: 14px }
.community-head a { color: var(--accent); text-decoration: none }
.community-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.community-cats a { background: var(--accent-soft); color: var(--accent-active) !important; border-radius: var(--pill); padding: 3px 10px; font-size: 12px; text-decoration: none }

.community-composer {
  display: grid; gap: 10px; padding: 16px; margin-bottom: 18px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.community-composer .community-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.community-composer input { flex: 1 1 200px; border-radius: var(--pill) !important; padding: 10px 16px !important; font: inherit }
.community-composer textarea { width: 100%; min-height: 80px; resize: vertical; border-radius: var(--radius) !important; padding: 12px 14px !important; font: inherit; box-sizing: border-box }
.community-send { border: 0; border-radius: var(--pill) !important; padding: 11px 24px !important; cursor: pointer; font: inherit; font-size: 15px }
.community-send:disabled { opacity: .6; cursor: default }
.community-hint { font-size: 12px; color: var(--plum-50) }
.community-status { font-size: 13px; color: var(--accent-active); min-height: 1em }

.community-feed { display: grid; gap: 10px }
.community-post { padding: 12px 16px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm) }
.community-post-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px }
.community-author { color: var(--accent-active); font-size: 14px }
.community-time { color: var(--plum-50); font-size: 12px }
.community-body { color: var(--plum); font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere }
.community-empty { text-align: center; padding: 40px 16px; color: var(--plum-75) }
.community-more { justify-self: center; margin-top: 6px }
