/* ═══ TWERKHUB · PH-INSPIRED THEME (HOME · 100% coverage) ═══
 * v20260505-p2
 *
 * Full PH-style adaptation scoped to body.twerkhub-ph-theme.
 * - Pure black background everywhere
 * - PornHub orange (#ff9000) as primary brand color
 * - Anton (geometric heavy display) for ALL headings
 * - Inter 800/900 for body, uppercase + bold for labels
 * - Logo lockup: TWERK (white) + HUB (black on orange chip)
 * - All pink/purple/gold gradients neutralized
 * - Cards: black surfaces, orange edge on hover
 * - Buttons: solid orange, no pink anywhere
 *
 * Zero impact on the other ~980 pages — they don't have the body class.
 */

/* ────────────────────────────────────────────────────────────────────
   1 · Token overrides
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme {
  --twk-c-bg-0:        #000000;
  --twk-c-bg-1:        #0a0a0a;
  --twk-c-bg-2:        #131313;
  --twk-c-surface:     rgba(255,255,255,.03);
  --twk-c-border:      rgba(255,255,255,.06);
  --twk-c-border-hi:   rgba(255,144,0,.32);
  --twk-c-text:        #ffffff;
  --twk-c-text-dim:    #c9c9c9;
  --twk-c-text-mute:   #6b6b6b;

  --twk-c-pink:        #ff9000;
  --twk-c-pink-soft:   #ffa530;
  --twk-c-purple:      #1f1f1f;
  --twk-c-purple-soft: #2a2a2a;
  --twk-c-gold:        #ff9000;
  --twk-c-gold-soft:   #ffb04d;

  --twk-grad-pink:     linear-gradient(135deg, #ff9000 0%, #ff6a00 100%);
  --twk-grad-gold:     linear-gradient(135deg, #ffb04d 0%, #ff9000 60%, #ff6a00 100%);
  --twk-grad-vip:      linear-gradient(135deg, #ffd596 0%, #ff9000 50%, #1f1f1f 100%);
  --twk-grad-ambient:
    radial-gradient(ellipse at 18% 12%, rgba(255,144,0,.08), transparent 48%),
    radial-gradient(ellipse at 86% 22%, rgba(255,144,0,.05), transparent 52%),
    radial-gradient(ellipse at 50% 88%, rgba(0,0,0,.4),       transparent 58%);

  --twk-elev-glow-pink: 0 14px 40px rgba(255,144,0,.32), 0 0 0 1px rgba(255,144,0,.18) inset;
  --twk-elev-glow-gold: 0 14px 40px rgba(255,144,0,.30), 0 0 0 1px rgba(255,144,0,.18) inset;

  background: #000 !important;
  color: #fff;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern","liga";
}

body.twerkhub-ph-theme::before { display: none; }
body.twerkhub-ph-theme::after { display: none; }

/* ────────────────────────────────────────────────────────────────────
   2 · Typography — Anton for ALL headings, Inter 800 for body
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme h1,
body.twerkhub-ph-theme h2,
body.twerkhub-ph-theme h3,
body.twerkhub-ph-theme h4,
body.twerkhub-ph-theme h5,
body.twerkhub-ph-theme h6,
body.twerkhub-ph-theme .twerkhub-home-hero h1,
body.twerkhub-ph-theme .twerkhub-stack-head h2,
body.twerkhub-ph-theme .twerkhub-tiers h2,
body.twerkhub-ph-theme .twerkhub-comm-hero h1,
body.twerkhub-ph-theme [class*="-head"] h2,
body.twerkhub-ph-theme [class*="-head"] h3 {
  font-family: "Anton", "Bebas Neue", "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .005em !important;
  text-transform: uppercase !important;
  color: #fff;
}

body.twerkhub-ph-theme h1 em,
body.twerkhub-ph-theme h2 em,
body.twerkhub-ph-theme h3 em {
  font-family: "Anton", "Bebas Neue", "Inter", sans-serif !important;
  font-style: normal !important;
  color: #ff9000 !important;
}

body.twerkhub-ph-theme .twerkhub-home-hero h1 {
  font-size: clamp(48px, 8vw, 120px) !important;
  line-height: 0.92 !important;
}

body.twerkhub-ph-theme h2 { font-size: clamp(34px, 5vw, 64px); line-height: 1; }
body.twerkhub-ph-theme h3 { font-size: clamp(24px, 3.2vw, 38px); line-height: 1.05; }
body.twerkhub-ph-theme h4 { font-size: clamp(18px, 2.4vw, 24px); line-height: 1.1; }

body.twerkhub-ph-theme p,
body.twerkhub-ph-theme li,
body.twerkhub-ph-theme span:not(.twk-nav-v1-live):not(.twk-nav-v1-brand span),
body.twerkhub-ph-theme div {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

body.twerkhub-ph-theme p { color: #c9c9c9; font-weight: 500; }
body.twerkhub-ph-theme strong { color: #ff9000 !important; font-weight: 800; }

body.twerkhub-ph-theme .twerkhub-kicker {
  color: #ff9000 !important;
  font-family: "Inter", monospace;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .22em;
}

/* Stat counters: Anton, big and orange */
body.twerkhub-ph-theme .twerkhub-hh-stat strong,
body.twerkhub-ph-theme [data-twk-count] {
  font-family: "Anton", "Bebas Neue", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  color: #ff9000 !important;
  letter-spacing: 0;
}
body.twerkhub-ph-theme .twerkhub-hh-stat span {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #b3b3b3;
  font-size: 11px;
}

/* ────────────────────────────────────────────────────────────────────
   3 · Sticky topbar (twk-nav-v1)
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme .twk-nav-v1 {
  position: sticky !important;
  top: 0 !important;
  background: rgba(0,0,0,.97) !important;
  border-bottom: 2px solid #ff9000 !important;
  backdrop-filter: blur(8px) !important;
  z-index: 9999 !important;
}

body.twerkhub-ph-theme .twk-nav-v1-brand {
  font-family: "Anton", "Inter", sans-serif !important;
  font-size: 13px;
  letter-spacing: .15em;
  color: #fff;
  gap: 6px;
}
body.twerkhub-ph-theme .twk-nav-v1-brand span { display: none !important; }
body.twerkhub-ph-theme .twk-nav-v1-brand img { display: none !important; }

body.twerkhub-ph-theme .twk-nav-v1-brand::before {
  content: "TWERK";
  font-family: "Anton", "Inter", sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  letter-spacing: .01em;
  line-height: 1;
}
body.twerkhub-ph-theme .twk-nav-v1-brand::after {
  content: "HUB";
  font-family: "Anton", "Inter", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  background: #ff9000;
  letter-spacing: .01em;
  padding: 5px 11px 4px;
  border-radius: 6px;
  line-height: 1;
}
@media (max-width: 880px) {
  body.twerkhub-ph-theme .twk-nav-v1-brand::before { font-size: 22px; }
  body.twerkhub-ph-theme .twk-nav-v1-brand::after { font-size: 18px; padding: 3px 8px 2px; }
}

body.twerkhub-ph-theme .twk-nav-v1-links a {
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.7) !important;
}
body.twerkhub-ph-theme .twk-nav-v1-links a:hover {
  background: rgba(255,144,0,.08) !important;
  color: #fff !important;
}
body.twerkhub-ph-theme .twk-nav-v1-links a.is-active::after {
  background: #ff9000 !important;
  box-shadow: 0 0 10px rgba(255,144,0,.55) !important;
}
body.twerkhub-ph-theme .twk-nav-v1-links a.twk-nav-v1-hot {
  background: #ff9000 !important;
  color: #000 !important;
  border: 1px solid #ff9000 !important;
  font-weight: 900 !important;
}
body.twerkhub-ph-theme .twk-nav-v1-links a.twk-nav-v1-hot:hover {
  background: #ffb04d !important;
  color: #000 !important;
  box-shadow: 0 6px 18px rgba(255,144,0,.5) !important;
}

body.twerkhub-ph-theme .twk-nav-v1-live {
  background: rgba(30,224,143,.08) !important;
  border-color: rgba(30,224,143,.4) !important;
  color: #1ee08f !important;
}

body.twerkhub-ph-theme .twk-nav-v1-lang a.is-active {
  background: rgba(255,144,0,.18) !important;
  border: 1px solid rgba(255,144,0,.35) !important;
  color: #ff9000 !important;
}

/* ────────────────────────────────────────────────────────────────────
   4 · Ticker
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme .twerkhub-ticker {
  background: #0a0a0a !important;
  border-top: 1px solid rgba(255,144,0,.2);
  border-bottom: 1px solid rgba(255,144,0,.2);
}
body.twerkhub-ph-theme .twerkhub-ticker span {
  color: #ff9000 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
}

/* ────────────────────────────────────────────────────────────────────
   5 · Hero
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme .twerkhub-home-hero {
  background: #000 !important;
}
body.twerkhub-ph-theme .twerkhub-home-hero-sub {
  color: #ff9000 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}
body.twerkhub-ph-theme .twerkhub-home-hero-body {
  color: #c9c9c9 !important;
  font-weight: 500;
}

/* "Next" button on the hero video — was pink-purple gradient */
body.twerkhub-ph-theme .twerkhub-hh-next {
  background: rgba(255,144,0,.15) !important;
  border-color: rgba(255,144,0,.45) !important;
  color: #ff9000 !important;
}
body.twerkhub-ph-theme .twerkhub-hh-next:hover {
  background: #ff9000 !important;
  border-color: #ff9000 !important;
  color: #000 !important;
}

/* Mute button — repositioned to mirror "Next" (top-right corner, same size) */
body.twerkhub-ph-theme .twerkhub-hh-mute {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 14 !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18) !important;
  color: #fff !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.4) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  transition: transform .2s cubic-bezier(.3,1.2,.4,1), background .2s, border-color .2s !important;
}
body.twerkhub-ph-theme .twerkhub-hh-mute:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, rgba(255,144,0,.22), rgba(255,144,0,.10)) !important;
  border-color: rgba(255,144,0,.45) !important;
}
/* Sound-on state → orange glow (visible cue) */
body.twerkhub-ph-theme .twerkhub-hh-mute:not(.is-muted) {
  background: rgba(255,144,0,.22) !important;
  border-color: #ff9000 !important;
  color: #ff9000 !important;
  opacity: 1 !important;
}
/* Kill the legacy "fade to .45 on parent hover" */
body.twerkhub-ph-theme .twerkhub-home-hero-media:hover .twerkhub-hh-mute { opacity: 1 !important; }
body.twerkhub-ph-theme .twerkhub-hh-mute-ico { font-size: 14px !important; }
body.twerkhub-ph-theme .twerkhub-hh-mute-label { white-space: nowrap !important; }
@media (max-width: 520px) {
  body.twerkhub-ph-theme .twerkhub-hh-mute {
    padding: 8px 12px !important;
    font-size: 10px !important;
  }
  body.twerkhub-ph-theme .twerkhub-hh-mute-ico { font-size: 13px !important; }
}

/* ────────────────────────────────────────────────────────────────────
   6 · Buttons (universal)
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme .twerkhub-btn-primary,
body.twerkhub-ph-theme .twerkhub-btn-gold,
body.twerkhub-ph-theme .twerkhub-btn[class*="primary"],
body.twerkhub-ph-theme button[class*="-primary"]:not([class*="ghost"]) {
  background: #ff9000 !important;
  background-image: none !important;
  color: #000 !important;
  border: none !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  box-shadow: 0 4px 14px rgba(255,144,0,.32) !important;
}
body.twerkhub-ph-theme .twerkhub-btn-primary:hover,
body.twerkhub-ph-theme .twerkhub-btn-gold:hover {
  background: #ffb04d !important;
  box-shadow: 0 8px 22px rgba(255,144,0,.5) !important;
}

body.twerkhub-ph-theme .twerkhub-btn-ghost,
body.twerkhub-ph-theme .twerkhub-btn[class*="ghost"] {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,144,0,.5) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}
body.twerkhub-ph-theme .twerkhub-btn-ghost:hover {
  background: rgba(255,144,0,.08) !important;
  border-color: #ff9000 !important;
}

/* ────────────────────────────────────────────────────────────────────
   7 · Cards (playlists, coming, club, threads, members, tiers)
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme .twerkhub-pl-card,
body.twerkhub-ph-theme .twerkhub-coming-card,
body.twerkhub-ph-theme .twerkhub-club-card,
body.twerkhub-ph-theme .twerkhub-tl-node,
body.twerkhub-ph-theme .twerkhub-stack-card,
body.twerkhub-ph-theme .twerkhub-thread,
body.twerkhub-ph-theme .twerkhub-member-card,
body.twerkhub-ph-theme [class*="-tier-card"] {
  background: #131313 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background-image: none !important;
}
body.twerkhub-ph-theme .twerkhub-pl-card:hover,
body.twerkhub-ph-theme .twerkhub-coming-card:hover,
body.twerkhub-ph-theme .twerkhub-club-card:hover,
body.twerkhub-ph-theme .twerkhub-stack-card:hover,
body.twerkhub-ph-theme .twerkhub-member-card:hover {
  border-color: #ff9000 !important;
  box-shadow: 0 14px 40px rgba(255,144,0,.18) !important;
  transform: translateY(-2px);
}

/* Replace legacy thumb gradient (inline style at line 137 in index.html) */
body.twerkhub-ph-theme .twerkhub-pl-thumb,
body.twerkhub-ph-theme .vthumb,
body.twerkhub-ph-theme .rk-thumb,
body.twerkhub-ph-theme .twerkhub-fp-thumb,
body.twerkhub-ph-theme .twerkhub-club-thumb {
  background: linear-gradient(135deg, #1f1f1f 0%, #0a0a0a 100%) !important;
}

/* Card titles — Anton */
body.twerkhub-ph-theme .twerkhub-pl-card h3,
body.twerkhub-ph-theme .twerkhub-coming-card h3,
body.twerkhub-ph-theme .twerkhub-club-card h3,
body.twerkhub-ph-theme .twerkhub-stack-card h3,
body.twerkhub-ph-theme [class*="-tier-card"] h3 {
  font-family: "Anton", "Bebas Neue", sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: .01em !important;
  color: #fff !important;
}

/* Number badges (rk-num, ranking) → orange */
body.twerkhub-ph-theme .rk-num,
body.twerkhub-ph-theme [class*="-rank-num"],
body.twerkhub-ph-theme [class*="-num-badge"] {
  color: #ff9000 !important;
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
}

/* Pills, chips, badges */
body.twerkhub-ph-theme .twerkhub-tag,
body.twerkhub-ph-theme [class*="-pill"],
body.twerkhub-ph-theme [class*="-chip"],
body.twerkhub-ph-theme [class*="-badge"] {
  background: rgba(255,144,0,.12) !important;
  color: #ff9000 !important;
  border: 1px solid rgba(255,144,0,.35) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

/* Tier cards: gradients → orange */
body.twerkhub-ph-theme [class*="tier-medium"] { border-color: rgba(255,144,0,.4) !important; }
body.twerkhub-ph-theme [class*="tier-premium"] { border-color: #ff9000 !important; }
body.twerkhub-ph-theme [class*="tier-vip"] {
  border-color: #ff9000 !important;
  background: linear-gradient(180deg, rgba(255,144,0,.08), #131313) !important;
}

/* ────────────────────────────────────────────────────────────────────
   8 · Section heads + dividers
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme [class*="-stack-head"]::after,
body.twerkhub-ph-theme [class*="-section-head"]::after {
  background: #ff9000 !important;
}

body.twerkhub-ph-theme hr,
body.twerkhub-ph-theme [class*="-divider"] {
  border-color: rgba(255,144,0,.2) !important;
}

/* ────────────────────────────────────────────────────────────────────
   9 · Inline links inside content
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme .twerkhub-page a:not(.twerkhub-btn):not(.twerkhub-brand):not(.twk-nav-v1-brand):not(.twk-nav-v1-links a):not(.vcard):not(.rk-item):not(.twerkhub-pl-card):not(.twerkhub-coming-card) {
  color: #ff9000 !important;
}
body.twerkhub-ph-theme .twerkhub-page a:not(.twerkhub-btn):hover {
  color: #ffb04d !important;
}

/* ────────────────────────────────────────────────────────────────────
   10 · Token HUD — keep the legacy green-T pill, KILL the orange ★ chip.
   User reverted: only the green pill should show, sticky on the right
   above the ticker without covering it. Repaint to PH orange theme.
   ──────────────────────────────────────────────────────────────────── */

/* ── 2026-05-06 · PILL POSITION — DEFINITIVE ────────────────────────────
   CSS-only positioning. NO JS relocator. NO in-nav class. NO conditional
   logic. The pill is `position: fixed` at top:14px right:14px on EVERY
   single page. Sticky behavior comes for free with position:fixed.
   This is the ONLY rule that controls position. Nothing else needed.
   ─────────────────────────────────────────────────────────────────────── */

/* Kill the orange ★ chip everywhere */
body.twerkhub-ph-theme #twk-topbar-chip { display: none !important; }

/* LIVE pill height + width lock — match TOKENS pill (28px tall, 130px wide)
   for visual symmetry. Force min-width so both pills render identically
   regardless of content / page / browser. */
body.twerkhub-ph-theme .twk-nav-v1-live,
body.twerkhub-ph-theme #twk-nav-v1-live {
  height: 28px !important;
  min-width: 130px !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
/* Hide LIVE on small screens (mobile) — same breakpoint as inline rules */
@media (max-width: 880px) {
  body.twerkhub-ph-theme .twk-nav-v1-live,
  body.twerkhub-ph-theme #twk-nav-v1-live {
    display: none !important;
  }
}

/* Pill DEFAULT (before relocator runs): sticky at top-right so it scrolls
   with content and sticks to nav. Once relocator moves it into nav,
   the .twk-tk-hud--in-nav rule makes it relative (nav provides sticky). */
body.twerkhub-ph-theme .twerkhub-tokens-hud {
  position: sticky !important;
  top: 0 !important;
  right: 14px !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 9998 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  pointer-events: none !important;
  height: 28px !important;
}

/* Pill RELOCATED into the flex row of nav-inner, right next to LIVE pill.
   Drop ALL positioning — let the flex row's align-items:center handle the
   vertical alignment automatically. Both pills are 28px tall, same flex
   parent → same vertical position. Sticky-to-viewport because nav is
   position:sticky and pill is its descendant. No math required. */
body.twerkhub-ph-theme .twerkhub-tokens-hud.twk-tk-hud--in-nav {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  margin-right: 6px !important;
  z-index: 10000 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  pointer-events: auto !important;
  height: 28px !important;
  width: auto !important;
  transform: none !important;
  flex-shrink: 0 !important;
}

/* Toast host: take it out of layout flow so toast popups don't push the
   flex row when they appear. Anchored above the badge, slides down. */
body.twerkhub-ph-theme .twerkhub-tokens-hud.twk-tk-hud--in-nav .twerkhub-tokens-toast-host {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 6px !important;
  pointer-events: none !important;
}

/* Mobile: pill floats bottom-right (away from possible mobile menu) */
@media (max-width: 540px) {
  body.twerkhub-ph-theme .twerkhub-tokens-hud,
  body.twerkhub-ph-theme .twerkhub-tokens-hud.twk-tk-hud--in-nav {
    position: fixed !important;
    top: auto !important;
    bottom: 14px !important;
    right: 14px !important;
    transform: none !important;
  }
}

/* 4. Repaint the badge in PH orange — same height profile as LIVE pill.
   Force min-width so the pill stays uniform across pages even if token
   state varies. All child elements (coin/count/unit/tier) ALWAYS visible
   with explicit display so the badge has consistent content width. */
body.twerkhub-ph-theme .twerkhub-tokens-hud .twerkhub-tokens-badge {
  background: rgba(255,144,0,.10) !important;
  background-image: none !important;
  border: 1px solid rgba(255,144,0,.55) !important;
  box-shadow: 0 4px 14px rgba(255,144,0,.18), 0 2px 6px rgba(0,0,0,.4) !important;
  height: 28px !important;
  min-width: 130px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  gap: 7px !important;
  line-height: 1 !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
/* Ensure all four parts of the badge are always rendered so width is
   consistent across pages even if a previous CSS hid one of them. */
body.twerkhub-ph-theme .twerkhub-tokens-hud .twerkhub-tokens-badge > * {
  display: inline-flex !important;
  align-items: center !important;
}
body.twerkhub-ph-theme .twerkhub-tokens-hud .twerkhub-tokens-tier {
  display: inline-flex !important;
  padding-left: 7px !important;
  margin-left: 1px !important;
  border-left: 1px solid rgba(255,144,0,.25) !important;
}
body.twerkhub-ph-theme .twerkhub-tokens-hud .twerkhub-tokens-badge:hover {
  border-color: #ff9000 !important;
  box-shadow: 0 8px 22px rgba(255,144,0,.3), 0 3px 8px rgba(0,0,0,.5) !important;
}
body.twerkhub-ph-theme .twerkhub-tokens-hud .twerkhub-tokens-coin {
  background: radial-gradient(circle at 30% 30%, #ffd596, #ff6a00) !important;
  color: #000 !important;
  box-shadow: 0 0 10px rgba(255,144,0,.7), inset 0 0 4px rgba(255,255,255,.4) !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 9px !important;
  flex-shrink: 0 !important;
}
body.twerkhub-ph-theme .twerkhub-tokens-hud .twerkhub-tokens-count {
  color: #ff9000 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
body.twerkhub-ph-theme .twerkhub-tokens-hud .twerkhub-tokens-unit {
  color: #ffd596 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .15em !important;
}
body.twerkhub-ph-theme .twerkhub-tokens-hud .twerkhub-tokens-tier {
  color: #ff9000 !important;
  border-left-color: rgba(255,144,0,.25) !important;
  font-size: 9px !important;
  letter-spacing: .18em !important;
  padding-left: 7px !important;
  margin-left: 4px !important;
}

/* ────────────────────────────────────────────────────────────────────
   11 · Footer
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme footer,
body.twerkhub-ph-theme .twerkhub-footer,
body.twerkhub-ph-theme [class*="-footer"] {
  background: #000 !important;
  border-top: 1px solid rgba(255,144,0,.2);
  color: #b3b3b3;
}
body.twerkhub-ph-theme footer a,
body.twerkhub-ph-theme .twerkhub-footer a {
  color: #c9c9c9 !important;
}
body.twerkhub-ph-theme footer a:hover,
body.twerkhub-ph-theme .twerkhub-footer a:hover {
  color: #ff9000 !important;
}

/* ────────────────────────────────────────────────────────────────────
   12 · Modals / paywall
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme [class*="modal"],
body.twerkhub-ph-theme [class*="paywall"],
body.twerkhub-ph-theme [class*="drawer"] {
  background: #0a0a0a !important;
  border-color: rgba(255,144,0,.3) !important;
}
body.twerkhub-ph-theme [class*="modal"] h2,
body.twerkhub-ph-theme [class*="paywall"] h2 {
  color: #ff9000 !important;
}

/* ────────────────────────────────────────────────────────────────────
   13 · Focus + scrollbar
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme :focus-visible {
  outline: 2px solid #ff9000 !important;
  outline-offset: 3px;
}

body.twerkhub-ph-theme ::-webkit-scrollbar { width: 10px; height: 10px; }
body.twerkhub-ph-theme ::-webkit-scrollbar-track { background: #000; }
body.twerkhub-ph-theme ::-webkit-scrollbar-thumb {
  background: #ff9000;
  border-radius: 5px;
}
body.twerkhub-ph-theme ::-webkit-scrollbar-thumb:hover { background: #ffb04d; }

/* ────────────────────────────────────────────────────────────────────
   14 · Selection
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme ::selection {
  background: #ff9000;
  color: #000;
}

/* ────────────────────────────────────────────────────────────────────
   15 · Featured playlists section (twerkhub-fp-*) — inline styles in
   index.html still have pink/purple/green gradients hardcoded. Override
   each with PH orange.
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme .twerkhub-fp-head h2 {
  font-family: "Anton", "Bebas Neue", sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  letter-spacing: .005em !important;
}
body.twerkhub-ph-theme .twerkhub-fp-head h2 em {
  font-style: normal !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #ff9000 !important;
  -webkit-text-fill-color: #ff9000 !important;
}
body.twerkhub-ph-theme .twerkhub-fp-head p {
  color: #c9c9c9 !important;
}

body.twerkhub-ph-theme .twerkhub-fp-card {
  background: #131313 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background-image: none !important;
}
body.twerkhub-ph-theme .twerkhub-fp-card:hover {
  border-color: #ff9000 !important;
  box-shadow: 0 24px 55px rgba(255,144,0,.22) !important;
}
body.twerkhub-ph-theme .twerkhub-fp-card-featured {
  background: linear-gradient(180deg, rgba(255,144,0,.06), #131313) !important;
  border-color: rgba(255,144,0,.4) !important;
}
body.twerkhub-ph-theme .twerkhub-fp-card-featured:hover {
  border-color: #ff9000 !important;
  box-shadow: 0 26px 60px rgba(255,144,0,.3) !important;
}

body.twerkhub-ph-theme .twerkhub-fp-thumb {
  background: #000 !important;
}

/* All badge variants → unified orange */
body.twerkhub-ph-theme .twerkhub-fp-badge,
body.twerkhub-ph-theme .twerkhub-fp-badge-signature,
body.twerkhub-ph-theme .twerkhub-fp-badge-pink,
body.twerkhub-ph-theme .twerkhub-fp-badge-purple,
body.twerkhub-ph-theme .twerkhub-fp-badge-gold,
body.twerkhub-ph-theme .twerkhub-fp-badge-vip {
  background: #ff9000 !important;
  background-image: none !important;
  color: #000 !important;
  box-shadow: 0 4px 12px rgba(255,144,0,.4) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 900 !important;
}

body.twerkhub-ph-theme .twerkhub-fp-live {
  background: rgba(0,0,0,.85) !important;
  border-color: rgba(30,224,143,.55) !important;
}

body.twerkhub-ph-theme .twerkhub-fp-kicker,
body.twerkhub-ph-theme .twerkhub-fp-card-featured .twerkhub-fp-kicker {
  color: #ff9000 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 900 !important;
}

body.twerkhub-ph-theme .twerkhub-fp-title {
  font-family: "Anton", "Bebas Neue", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .005em !important;
  text-transform: uppercase !important;
  color: #fff !important;
}
body.twerkhub-ph-theme .twerkhub-fp-title em,
body.twerkhub-ph-theme .twerkhub-fp-card-featured .twerkhub-fp-title em {
  font-style: normal !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #ff9000 !important;
  -webkit-text-fill-color: #ff9000 !important;
}

body.twerkhub-ph-theme .twerkhub-fp-desc {
  color: #c9c9c9 !important;
}

body.twerkhub-ph-theme .twerkhub-fp-meta span {
  background: rgba(255,144,0,.08) !important;
  border: 1px solid rgba(255,144,0,.25) !important;
  color: #ff9000 !important;
}

body.twerkhub-ph-theme .twerkhub-fp-cta,
body.twerkhub-ph-theme .twerkhub-fp-card-featured .twerkhub-fp-cta {
  background: #ff9000 !important;
  background-image: none !important;
  color: #000 !important;
  box-shadow: 0 8px 22px rgba(255,144,0,.35) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 900 !important;
}
body.twerkhub-ph-theme .twerkhub-fp-card:hover .twerkhub-fp-cta,
body.twerkhub-ph-theme .twerkhub-fp-card-featured:hover .twerkhub-fp-cta {
  box-shadow: 0 10px 28px rgba(255,144,0,.55) !important;
}

/* ────────────────────────────────────────────────────────────────────
   16 · Tiers / pricing cards (commonly use pink-purple-gold gradients)
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme [class*="-tier"] [class*="-price"],
body.twerkhub-ph-theme [class*="-tier"] [class*="-amount"] {
  color: #ff9000 !important;
  font-family: "Anton", sans-serif !important;
}

/* ────────────────────────────────────────────────────────────────────
   17 · Bio + timeline (Alexia section) — Playfair em → Anton
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme .twerkhub-bio-home h2,
body.twerkhub-ph-theme .twerkhub-bio-home h2 em {
  font-family: "Anton", "Bebas Neue", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: .005em !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #fff !important;
}
body.twerkhub-ph-theme .twerkhub-bio-home h2 em {
  color: #ff9000 !important;
  -webkit-text-fill-color: #ff9000 !important;
}
body.twerkhub-ph-theme .twerkhub-bio-flag {
  background: rgba(255,144,0,.08) !important;
  border: 1px solid rgba(255,144,0,.3) !important;
  color: #ff9000 !important;
}
body.twerkhub-ph-theme .twerkhub-tl-node {
  background: #131313 !important;
  border-color: rgba(255,255,255,.06) !important;
}
body.twerkhub-ph-theme .twerkhub-tl-active {
  border-color: #ff9000 !important;
  box-shadow: 0 14px 40px rgba(255,144,0,.18) !important;
}
body.twerkhub-ph-theme .twerkhub-tl-badge {
  background: #ff9000 !important;
  color: #000 !important;
}
body.twerkhub-ph-theme .twerkhub-tl-year {
  color: #ff9000 !important;
  font-family: "Anton", sans-serif !important;
}
body.twerkhub-ph-theme .twerkhub-tl-arrow {
  color: #ff9000 !important;
}
body.twerkhub-ph-theme .twerkhub-tl-ico {
  filter: hue-rotate(20deg) saturate(.8);
}

/* ────────────────────────────────────────────────────────────────────
   18 · Stack section
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme .twerkhub-plus {
  color: #ff9000 !important;
}
body.twerkhub-ph-theme .twerkhub-stack-card-accent,
body.twerkhub-ph-theme .twerkhub-stack-card-accent2 {
  border-color: rgba(255,144,0,.35) !important;
  background: linear-gradient(180deg, rgba(255,144,0,.05), #131313) !important;
}
body.twerkhub-ph-theme .twerkhub-stack-foot {
  color: #ff9000 !important;
}

/* ────────────────────────────────────────────────────────────────────
   19 · Hero countdown timer + status pills
   ──────────────────────────────────────────────────────────────────── */
body.twerkhub-ph-theme #twk-rotator-countdown,
body.twerkhub-ph-theme .twerkhub-hh-cd-timer {
  color: #ff9000 !important;
  font-family: "Anton", "JetBrains Mono", monospace !important;
}
body.twerkhub-ph-theme .twerkhub-hh-cd-kicker {
  color: #c9c9c9 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .15em !important;
}
body.twerkhub-ph-theme .twerkhub-hh-live {
  color: #1ee08f !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 900 !important;
}

/* TWK-CB-CARPET-BOMB-2026-05-06 */
body.twerkhub-ph-theme .twk-nav-v1-live,
body.twerkhub-ph-theme #twk-nav-v1-live {
  height: 28px !important;
  min-width: 130px !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  gap: 7px !important;
}

/* ═══ KILL ALL DECORATIVE PINK/ORANGE LINES ON KICKERS · 2026-05-07 ═══
   ph-theme.css carga DESPUES de bundle.css en el head (linea 85 > linea 72),
   asi que este override gana sobre cualquier rule que haya quedado viva.
   Mata todo ::before/::after en kickers. Las estrellas/dots/slashes (★ ● /)
   quedan porque son texto inline, no pseudo-elementos. */
body.twerkhub-ph-theme .twerkhub-kicker::before,
body.twerkhub-ph-theme .twerkhub-kicker::after,
body.twerkhub-ph-theme .twerkhub-pl-kicker::before,
body.twerkhub-ph-theme .twerkhub-pl-kicker::after,
body.twerkhub-ph-theme .twerkhub-pl-disclaimer-kicker::before,
body.twerkhub-ph-theme .twerkhub-pl-disclaimer-kicker::after,
body.twerkhub-ph-theme .twerkhub-handoff-kicker::before,
body.twerkhub-ph-theme .twerkhub-handoff-kicker::after,
body.twerkhub-ph-theme .twk-kicker::before,
body.twerkhub-ph-theme .twk-kicker::after,
body.twerkhub-ph-theme .hotrank .rk-head::before,
body.twerkhub-ph-theme .hotrank .rk-head::after,
body.twerkhub-ph-theme .twerkhub-fp-kicker::before,
body.twerkhub-ph-theme .twerkhub-fp-kicker::after,
body.twerkhub-ph-theme .twerkhub-hh-cd-kicker::before,
body.twerkhub-ph-theme .twerkhub-hh-cd-kicker::after,
.twerkhub-kicker::before,
.twerkhub-kicker::after,
.twerkhub-pl-kicker::before,
.twerkhub-pl-disclaimer-kicker::before,
.twerkhub-handoff-kicker::before,
.twk-kicker::before,
.hotrank .rk-head::before,
.twerkhub-fp-kicker::before,
.twerkhub-hh-cd-kicker::before {
  content: none !important;
  display: none !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
}