*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --pb-bg: #080808;
  --pb-s1: #0e0e0e;
  --pb-s2: #141414;
  --pb-green: #00C800;
  --pb-text: #f0f0f0;
  --pb-t2: #888;
  --pb-t3: #8a9199; /* PHASE C quick win (a11y audit): was #3e3e3e (~1.9:1, unreadable); now ≥4.5:1 on the dark bg while staying clearly muted */
  --pb-border: rgba(255,255,255,0.07);
  --pb-border-green: rgba(0,200,0,0.2);
  --pb-glass-bg: rgba(14,14,14,0.52);
  --pb-glass-blur: blur(22px) saturate(1.15);
  --pb-glass-shine: rgba(255,255,255,0.055);
  --pb-glass-edge: rgba(255,255,255,0.07);
  --pb-glass-depth: 0 8px 32px rgba(0,0,0,0.45);
  --pb-fh: "Barlow Condensed", sans-serif;
  --pb-fb: "Plus Jakarta Sans", sans-serif;
  --pb-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
}

html {
  background: var(--pb-bg);
  color: var(--pb-text);
  font-family: var(--pb-fb);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--pb-bg);
  color: var(--pb-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1c1c1c; border-radius: 4px; }

a {
  color: inherit;
  text-decoration: none;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

#pb-page-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}

.pb-page {
  min-height: 100vh;
  padding-top: 62px;
  position: relative;
  z-index: 1;
}

.pb-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  background: rgba(8,8,8,0.62);
  backdrop-filter: blur(32px) saturate(1.2);
  -webkit-backdrop-filter: blur(32px) saturate(1.2);
  border-bottom: 1px solid var(--pb-glass-edge);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine), 0 1px 0 rgba(0,0,0,.3);
  transition: background .3s ease;
}

.pb-nav.is-solid {
  background: rgba(8,8,8,0.82);
}

.pb-nav-logo img {
  height: 21px;
  width: auto;
  display: block;
}

.pb-nav-right {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.pb-nav .pb-nav-btn {
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 19px;
  border-radius: 0;
  font-family: var(--pb-fb);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}

.pb-nav .pb-nav-btn.login-btn {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.pb-nav .pb-nav-btn:hover {
  text-decoration: none;
}

.pb-nav .pb-nav-btn-outline {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.095);
  color: rgba(240,240,240,.55);
}

.pb-nav .pb-nav-btn-outline:hover {
  color: #f0f0f0;
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.13);
}

.pb-nav .pb-nav-btn-primary {
  padding: 0 25px;
  background: var(--pb-green);
  border: 0;
  color: #0a0a0a;
  font-weight: 800;
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.pb-nav .pb-nav-btn-primary:hover {
  color: #0a0a0a;
  opacity: .85;
}

.pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-family: var(--pb-fb);
  line-height: 1;
  transition: opacity .15s ease, transform .15s ease, color .15s ease, border-color .15s ease, background .15s ease;
}

.pb-btn:hover {
  transform: translateY(-1px);
}

.pb-btn-green {
  background: var(--pb-green);
  color: #000;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 20px;
  letter-spacing: .01em;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.pb-btn-green:hover {
  opacity: .85;
}

.pb-btn-ghost {
  background: var(--pb-glass-bg);
  color: var(--pb-t2);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  border: 1px solid var(--pb-glass-edge);
  border-radius: 5px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine);
}

.pb-btn-ghost:hover {
  color: var(--pb-text);
  border-color: rgba(255,255,255,.14);
  background: rgba(24,24,24,0.7);
}

.pb-btn-outline {
  background: var(--pb-glass-bg);
  color: var(--pb-t2);
  font-size: 15px;
  font-weight: 500;
  padding: 13px 32px;
  border: 1px solid var(--pb-glass-edge);
  border-radius: 5px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine);
}

.pb-btn-outline:hover {
  color: var(--pb-text);
  border-color: rgba(255,255,255,.22);
}

.pb-btn-lg {
  min-height: 45px;
  font-size: 15px;
  padding: 13px 32px;
}

.pb-btn-lg.pb-btn-green {
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

/* ─────────────────────────────────────────────────────────────
   Phase 13 — live stat ticker (seamless drag-scroll marquee).
   Motion is a JS-driven translateX on .pb-ticker-track, whose content
   is duplicated, so the loop is perfectly seamless (no choppy restart)
   and still grab/drag-able with mouse + touch.
   Dark-glass strip · green up · red down · neutral gray.
   ───────────────────────────────────────────────────────────── */
.pb-ticker {
  position: relative;
  display: flex;                       /* v2.1.6: ‹ viewport › on one row */
  align-items: center;
  height: 38px;
  background: linear-gradient(180deg, rgba(15,17,15,0.94), rgba(7,8,7,0.94));
  border-bottom: 1px solid var(--pb-border);
  box-shadow: inset 0 1px 0 rgba(0,200,90,0.05), inset 0 -1px 0 rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;          /* clips the track — never widens the page */
  max-width: 100vw;
}

/* soft edge fades so items melt into the strip on both sides */
.pb-ticker::before,
.pb-ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  z-index: 2;
  pointer-events: none;      /* never block drag */
}
.pb-ticker::before { left: 0;  background: linear-gradient(90deg,  rgba(7,8,7,0.97), rgba(7,8,7,0)); }
.pb-ticker::after  { right: 0; background: linear-gradient(270deg, rgba(7,8,7,0.97), rgba(7,8,7,0)); }

/* v2.1.6 — the strip is a REAL horizontal scroller now.
   Native overflow-x gives us touch swipe, iOS momentum, trackpad gestures and
   keyboard scrolling for free; JS only nudges scrollLeft for the slow drift and
   for mouse drag. The scrollbar is hidden visually but scrolling stays enabled
   (never `overflow: hidden`, which is what made the old strip feel locked). */
.pb-ticker-viewport {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;   /* iOS momentum */
  overscroll-behavior-x: contain;      /* no back-swipe navigation from the strip */
  scroll-behavior: auto;               /* JS opts into smooth per gesture */
  cursor: grab;
  touch-action: pan-x pan-y;           /* swipe the strip OR scroll the page */
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: none;               /* Firefox */
  -ms-overflow-style: none;            /* old Edge */
}
.pb-ticker-viewport::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pb-ticker-viewport:focus-visible {
  outline: 2px solid var(--pb-green);
  outline-offset: -2px;
}
.pb-ticker.is-dragging .pb-ticker-viewport { cursor: grabbing; }

/* the scrolling row */
.pb-ticker-track {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: max-content;
  flex: 0 0 auto;            /* never let the flex viewport shrink the row */
}

/* v2.1.6 — neutralise the ORIGINAL v1 marquee, which is still declared in
   playbooki.css as `.ticker-track, .pb-ticker-track { animation: 38s pb-tick;
   padding-left: 100% }`. Until now the old ticker JS happened to mask it by
   writing an inline transform on every frame. The native scroller does not,
   so both of these were live:
     • the CSS keyframe animation translated the row on top of our scrolling;
     • the 100% left padding put a full viewport of blank space at the start
       AND broke the seamless loop, because it is added once to the whole
       track rather than once per repeated set.
   `gap` is deliberately left alone — 52px is the spacing the strip has today. */
.pb-ticker .pb-ticker-track {
  padding-left: 0;
  animation: none;
  transform: none;
}

/* one item; thin divider + small type-accent dot */
.pb-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 15px;
  font-size: 12px;
  line-height: 1;
  color: var(--pb-t2);
  text-decoration: none;
}

/* soft "| LABEL" section divider — so the category isn't repeated per item */
.pb-ticker-sep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 16px 0 22px;
}
.pb-sep-bar {
  width: 2px;
  height: 13px;
  border-radius: 1px;
  background: var(--pb-green);
  opacity: 0.9;
  box-shadow: 0 0 7px rgba(0,200,90,0.55);
}
.pb-sep-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(233,238,233,0.72);
  white-space: nowrap;
}

/* middot between the label and its value, market-ticker style */
.pb-ti-value::before {
  content: "·";
  margin: 0 6px 0 2px;
  color: var(--pb-t2);
  opacity: 0.7;
  font-weight: 400;
}

.pb-ti-label {
  color: var(--pb-t2);
  font-weight: 500;
  letter-spacing: 0.2px;
}

.pb-ti-value,
.pb-ticker-item b {
  color: var(--pb-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pb-ti-change,
.pb-ticker-item em {
  font-style: normal;
  font-weight: 700;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* direction colors */
.pb-ticker-up      { color: var(--pb-green); }
.pb-ticker-down    { color: #e05252; }
.pb-ticker-neutral { color: var(--pb-t2); }

/* clickable items (rendered as <a> only when a safe URL exists) */
.pb-ti-link { cursor: pointer; transition: color .15s ease; }
.pb-ticker-item.pb-ti-link:hover .pb-ti-label { color: var(--pb-text); }
.pb-ticker.is-dragging .pb-ti-link { cursor: grabbing; }

/* subtle fade while the static fallback is on screen before live data swaps in */
.pb-ticker.is-loading .pb-ticker-item { opacity: 0.6; }

/* v2.1.6 — ‹ › page controls. Desktop/pointer only: touch users swipe, and an
   always-on pair of chevrons would just eat width on a 360px screen. */
.pb-ticker-nav {
  position: relative;
  z-index: 3;                          /* above the edge fades */
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 2px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: rgba(233,238,233,0.55);
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.pb-ticker-nav svg { width: 15px; height: 15px; display: block; }
.pb-ticker-nav:hover {
  color: var(--pb-green);
  background: rgba(0,200,90,0.08);
  border-color: rgba(0,200,90,0.28);
}
.pb-ticker-nav:focus-visible {
  outline: none;
  color: var(--pb-green);
  border-color: var(--pb-green);
  box-shadow: 0 0 0 2px rgba(0,200,90,0.28);
}
@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
  .pb-ticker-nav { display: inline-flex; }
}

@media (max-width: 640px) {
  .pb-ticker { height: 34px; }
  .pb-ticker-item { padding: 0 15px; font-size: 11.5px; }
  .pb-ticker::before,
  .pb-ticker::after { width: 30px; }
}

.pb-hero {
  position: relative;
  min-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 5% 120px;
  overflow: hidden;
  isolation: isolate;
}

.pb-hero::before,
.pb-hero::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 2px;
  z-index: 2;
  pointer-events: none;
}

.pb-hero::before {
  top: 32px;
  left: 5%;
  background: linear-gradient(90deg, var(--pb-green), transparent);
}

.pb-hero::after {
  right: 5%;
  bottom: 48px;
  background: linear-gradient(270deg, var(--pb-green), transparent);
}

.pb-hero-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.pb-glass {
  background: var(--pb-glass-bg);
  backdrop-filter: var(--pb-glass-blur);
  -webkit-backdrop-filter: var(--pb-glass-blur);
  border: 1px solid var(--pb-glass-edge);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine), var(--pb-glass-depth);
}

.pb-hero-badge,
.pb-hero-title,
.pb-slash,
.pb-hero-copy,
.pb-hero-actions,
.pb-scroll-cue {
  position: relative;
  z-index: 2;
}

.pb-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14,14,14,0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--pb-glass-edge);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine);
  padding: 6px 14px;
  color: var(--pb-t2);
  font-size: 12px;
  letter-spacing: .03em;
  margin-bottom: 24px;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}

.pb-hero-badge span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pb-green);
  box-shadow: 0 0 8px rgba(0,200,0,.9);
  animation: pb-bpulse 2s infinite;
}

@keyframes pb-bpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .2; }
}

.pb-hero-title {
  max-width: 860px;
  margin-bottom: 34px;
  font-family: var(--pb-fh);
  font-size: 52px;
  font-weight: 900;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.pb-hero-title span,
.pb-hero-title strong {
  display: block;
  font: inherit;
}

.pb-hero-title span {
  background-image: var(--pb-noise), linear-gradient(160deg, #f5f5f5 0%, #f0f0f0 40%, #d8d8d8 70%, #ebebeb 100%);
  background-size: 220px 220px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-blend-mode: soft-light, normal;
}

.pb-hero-title strong {
  background-image: var(--pb-noise), linear-gradient(160deg, #00d966 0%, #00C800 45%, #00b020 70%, #00d044 100%);
  background-size: 220px 220px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-blend-mode: soft-light, normal;
}

.pb-slash {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.pb-slash i {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pb-green));
}

.pb-slash i:last-child {
  background: linear-gradient(90deg, var(--pb-green), transparent);
}

.pb-slash b {
  color: var(--pb-green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
}

.pb-hero-copy {
  max-width: 480px;
  margin-bottom: 40px;
  color: var(--pb-t2);
  font-size: clamp(14.5px,1.6vw,17px);
  line-height: 1.7;
  text-wrap: pretty;
}

.pb-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pb-scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--pb-t3);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pb-scroll-cue span {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--pb-t3), transparent);
}

.pb-scroll-cue em {
  font-style: normal;
}

.pb-proof {
  padding: 0 5% 72px;
}

.pb-proof-bar {
  display: flex;
  max-width: 680px;
  margin: 0 auto;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.pb-stat {
  flex: 1;
  padding: 26px 16px;
  text-align: center;
  border-right: 1px solid var(--pb-border);
}

.pb-stat:last-child {
  border-right: 0;
}

.pb-stat strong {
  display: block;
  font-family: var(--pb-fh);
  font-size: 38px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.01em;
  background-image: var(--pb-noise), linear-gradient(160deg, #00d966 0%, #00C800 45%, #00b020 70%, #00d044 100%);
  background-size: 200px 200px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pb-stat span {
  display: block;
  margin-top: 5px;
  color: var(--pb-t3);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pb-divider {
  height: 1px;
  margin: 0 5%;
  background: var(--pb-border);
}

.pb-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 5%;
}

.pb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pb-green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.pb-eyebrow::before {
  content: "//";
  opacity: .7;
  font-size: 13px;
  letter-spacing: -.05em;
}

.pb-section-title,
.pb-cta-box h2 {
  font-family: var(--pb-fh);
  font-size: clamp(36px,5vw,62px);
  font-weight: 900;
  font-style: italic;
  line-height: .96;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-bottom: 14px;
  background-image: var(--pb-noise), linear-gradient(155deg, #f5f5f5 0%, #efefef 40%, #d6d6d6 70%, #e8e8e8 100%);
  background-size: 220px 220px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-blend-mode: soft-light, normal;
}

.pb-section-sub {
  max-width: 480px;
  margin-bottom: 44px;
  color: var(--pb-t2);
  font-size: 15.5px;
  line-height: 1.7;
}

.pb-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pb-card {
  position: relative;
  overflow: hidden;
  transition: border-color .22s ease, transform .2s ease, box-shadow .22s ease;
}

.pb-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,200,0,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(0,200,0,.06);
}

.pb-card::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent rgba(0,200,0,.35) transparent transparent;
}

.pb-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255,255,255,.03), transparent);
  pointer-events: none;
}

.pb-step {
  padding: 28px 24px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

/* Whole-tile clickable link (stretched over the card). Keeps card markup and
   styling intact; the ".pb-shimmer > *" rule would force position:relative, so
   this scoped rule restores absolute so the link covers the full card. */
.pb-step .pb-step-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  font-size: 0;
  cursor: pointer;
}

.pb-step .pb-step-link:focus-visible {
  outline: 2px solid var(--pb-green);
  outline-offset: -3px;
}

.pb-step span {
  display: block;
  margin-bottom: 12px;
  color: var(--pb-green);
  opacity: .18;
  font-family: var(--pb-fh);
  font-size: 48px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}

.pb-step h3 {
  margin-bottom: 10px;
  font-family: var(--pb-fh);
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.pb-step p,
.pb-creator-bio {
  color: var(--pb-t2);
  font-size: 13px;
  line-height: 1.65;
}

.pb-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 28px;
}

.pb-filter {
  padding: 6px 16px;
  background: var(--pb-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--pb-border);
  border-radius: 3px;
  color: var(--pb-t2);
  cursor: pointer;
  font-family: var(--pb-fb);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: all .15s ease;
}

.pb-filter:hover {
  border-color: rgba(255,255,255,.14);
  color: var(--pb-text);
}

.pb-filter.is-active {
  background: rgba(0,200,0,.1);
  border-color: var(--pb-border-green);
  color: var(--pb-green);
  box-shadow: inset 0 1px 0 rgba(0,200,0,.1);
}

.pb-creator-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  transition: opacity .16s ease;
}

.pb-creator-grid.is-loading {
  opacity: .45;
  pointer-events: none;
}

.pb-filter.is-loading {
  cursor: wait;
}

.pb-creator {
  width: 100%;
  min-height: 226px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.pb-creator::before {
  border-width: 0 16px 16px 0;
  border-color: transparent rgba(0,200,0,.28) transparent transparent;
}

.pb-creator:hover::before {
  border-color: transparent rgba(0,200,0,.5) transparent transparent;
}

.pb-creator-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.pb-creator-top > div:last-child {
  min-width: 0;
}

.pb-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 14px;
  font-weight: 800;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}

.pb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pb-creator h3 {
  font-family: var(--pb-fh);
  font-size: 17px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: .01em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-creator-top p {
  margin-top: 2px;
  color: var(--pb-t3);
  font-size: 11.5px;
}

.pb-creator-bio {
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.6;
}

.pb-home-booki-bio {
  min-height: calc(12px * 1.6 * 3);
  max-height: calc(12px * 1.6 * 3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.pb-creator-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pb-creator-foot span {
  padding: 2px 9px;
  background: rgba(255,255,255,.04);
  color: var(--pb-t3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  clip-path: polygon(4px 0,100% 0,100% 100%,0 100%,0 4px);
}

.pb-creator-foot b {
  color: var(--pb-green);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.pb-featured-empty {
  margin: 18px 0 0;
  padding: 18px;
  border: 1px solid rgba(0,200,0,.18);
  background: rgba(255,255,255,.035);
  color: var(--pb-t2);
  font-size: 13px;
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.pb-center {
  margin-top: 28px;
  text-align: center;
}

.pb-cta {
  padding: 0 0 72px;
}

.pb-cta-box {
  margin: 0 5%;
  padding: 44px 5%;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

/* Keep the decorative glow out of layout flow. The global ".pb-shimmer > *"
   rule was forcing it to position:relative, so it occupied ~220px of real
   vertical space at the top of the box and pushed the content down. Scoped
   override restores its intended absolute (decorative) positioning. */
.pb-cta-box .pb-cta-glow {
  position: absolute;
}

.pb-cta-glow {
  position: absolute;
  top: -80px;
  left: 50%;
  width: 480px;
  height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at top, rgba(0,200,0,.09), transparent 70%);
  pointer-events: none;
}

.pb-cta-box::before {
  border-width: 0 40px 40px 0;
  border-color: transparent rgba(0,200,0,.18) transparent transparent;
}

.pb-cta-box h2 {
  font-size: clamp(30px,4vw,52px);
  margin-bottom: 28px;
}

.pb-cta-box p {
  max-width: 440px;
  margin: 0 auto 32px;
  color: var(--pb-t2);
  font-size: 15.5px;
  line-height: 1.7;
}

.pb-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px;
}

.pb-trust-row span {
  color: var(--pb-t3);
  font-size: 12px;
  letter-spacing: .03em;
}

.pb-footer {
  padding: 34px 5%;
  border-top: 1px solid var(--pb-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.pb-footer img {
  height: 17px;
  opacity: .4;
}

.pb-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.pb-footer a,
.pb-footer p {
  color: var(--pb-t3);
  font-size: 12px;
  transition: color .15s ease;
}

.pb-footer a:hover {
  color: var(--pb-t2);
}

.pb-auth-page {
  min-height: calc(100vh - 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 5%;
  background:
    radial-gradient(circle at 22% 18%, rgba(0,200,0,.09), transparent 28%),
    radial-gradient(circle at 78% 80%, rgba(0,200,0,.06), transparent 26%),
    var(--pb-bg);
  color: var(--pb-text);
  font-family: var(--pb-fb);
}

.pb-auth-shell {
  width: min(100%, 480px);
  position: relative;
}

.pb-auth-brand {
  margin-bottom: 26px;
  text-align: center;
}

.pb-auth-brand .pb-section-title {
  margin-bottom: 10px;
  font-size: clamp(42px, 7vw, 66px);
}

.pb-auth-brand .pb-section-sub {
  margin: 0 auto;
  max-width: 360px;
}

.pb-auth-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.pb-auth-page .pb-auth-card,
.pb-auth-modal .pb-auth-card {
  width: 100% !important;
  max-width: none !important;
}

.pb-auth-card::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 34px 34px 0;
  border-color: transparent rgba(0,200,0,.34) transparent transparent;
  z-index: 2;
}

.pb-auth-card-inner {
  position: relative;
  z-index: 1;
  padding: 30px;
}

.pb-auth-form,
.pb-social-stack {
  display: grid;
  gap: 12px;
}

.pb-social-stack {
  margin-bottom: 12px;
}

.pb-social-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--pb-border);
  color: rgba(240,240,240,.78);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.pb-social-btn:hover {
  color: var(--pb-text);
  background: rgba(255,255,255,.055);
  border-color: rgba(0,200,0,.22);
}

.pb-social-btn img {
  display: block;
}

.pb-auth-or {
  display: block;
  margin: 15px 0;
  color: rgba(240,240,240,.34);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

.pb-auth-field {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 16px;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pb-auth-field:focus-within {
  border-color: rgba(0,200,0,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px rgba(0,200,0,.08), 0 0 22px rgba(0,200,0,.055);
}

.pb-auth-field span,
.pb-password-toggle {
  color: rgba(240,240,240,.42);
  flex: 0 0 auto;
}

.pb-auth-field input {
  width: 100%;
  min-height: 44px;
  min-width: 0;
  flex: 1;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--pb-text) !important;
  font-family: var(--pb-fb) !important;
  font-size: 14px !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
}

.pb-auth-field input::placeholder {
  color: rgba(240,240,240,.28);
}

.pb-auth-field input:-webkit-autofill,
.pb-auth-field input:-webkit-autofill:hover,
.pb-auth-field input:-webkit-autofill:focus,
.pb-auth-field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--pb-text);
  caret-color: var(--pb-text);
  transition: background-color 99999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
}

.pb-password-toggle {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.pb-auth-check {
  margin: 2px 0 4px;
  color: rgba(240,240,240,.62);
  font-size: 12px;
  line-height: 1.5;
}

/* Sponzy styles.css forces .custom-control-label to .875rem (14px) via
   `.custom-checkbox .custom-control-input ~ .custom-control-label`;
   scoped down so auth checkbox labels (Remember me / GDPR) read smaller */
.pb-auth-check.custom-checkbox .custom-control-input ~ .custom-control-label,
.pb-auth-check .custom-control-label {
  font-size: 13px;
}

.pb-auth-check a,
.pb-auth-recaptcha a,
.pb-auth-links a {
  color: var(--pb-green);
  text-decoration: none;
}

.pb-auth-check a:hover,
.pb-auth-recaptcha a:hover,
.pb-auth-links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pb-auth-submit {
  width: 100%;
  margin-top: 8px;
}

.pb-auth-inline-links {
  margin-top: -2px;
}

.pb-auth-inline-links a {
  color: rgba(240,240,240,.58);
  font-size: 12px;
  text-decoration: none;
}

.pb-auth-inline-links a:hover {
  color: var(--pb-green);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pb-auth-alert {
  background: rgba(220,53,69,.12);
  border: 1px solid rgba(220,53,69,.28);
  color: #f4c8ce;
  font-size: 13px;
}

.pb-auth-card .alert-success {
  background: rgba(0,200,0,.10);
  border-color: rgba(0,200,0,.24);
  color: #a7f5a7;
}

.pb-auth-card .alert ul,
.pb-auth-card .alert ol {
  margin-bottom: 0;
}

.pb-auth-recaptcha {
  display: block;
  margin-top: 16px;
  color: rgba(240,240,240,.42);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

.pb-auth-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.pb-auth-links.is-centered {
  justify-content: center;
}

.pb-auth-links a {
  color: rgba(240,240,240,.62);
  font-size: 12px;
}

.pb-auth-cancel {
  width: max-content;
  margin: 2px auto 0;
  padding: 4px 10px;
  border: 0;
  background: transparent;
  color: rgba(240,240,240,.52);
  font-family: var(--pb-fb);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pb-auth-cancel:hover {
  color: var(--pb-green);
}

.pb-auth-modal {
  z-index: 2050;
}

.pb-auth-modal .modal-dialog {
  width: min(calc(100% - 28px), 460px);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.pb-auth-modal .pb-auth-modal-content,
.pb-auth-modal .modal-body {
  overflow: visible;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}

.pb-auth-modal .pb-auth-modal-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(10,10,10,.92);
  border: 1px solid rgba(0,200,0,.18);
  box-shadow: 0 24px 80px rgba(0,0,0,.62), 0 0 38px rgba(0,200,0,.08);
  opacity: 1;
}

.pb-auth-modal .pb-auth-card-inner {
  padding: 28px;
}

.pb-auth-modal-brand {
  margin-bottom: 18px;
}

.pb-auth-modal-title {
  margin: 0;
  color: var(--pb-text);
  font-family: var(--pb-fh);
  font-size: 34px;
  font-style: italic;
  font-weight: 900;
  line-height: .92;
  text-transform: uppercase;
}

.pb-auth-switch {
  margin-top: 16px;
}

.pb-auth-modal .pb-auth-links a {
  color: var(--pb-green);
}

.pb-auth-modal .display-none {
  display: none;
}

body.modal-open .modal-backdrop {
  background-color: #000;
  opacity: .58 !important;
}

body:has(.pb-auth-page) {
  background: var(--pb-bg) !important;
}

body:has(.pb-auth-page) .playbooki-footer,
body:has(.pb-auth-page) main > .text-center.py-3.px-3 {
  display: none !important;
}

.pb-directory-page,
.pb-explore-page {
  background:
    radial-gradient(circle at 18% 14%, rgba(0,200,0,.08), transparent 28%),
    radial-gradient(circle at 84% 22%, rgba(0,200,0,.055), transparent 24%),
    var(--pb-bg);
  color: var(--pb-text);
  font-family: var(--pb-fb);
}

.pb-directory-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 46px 5% 84px;
}

.pb-directory-head {
  max-width: 780px;
  margin-bottom: 42px;
}

.pb-directory-head .pb-section-title {
  margin-bottom: 10px;
}

.pb-directory-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.pb-search-form {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 5px 5px 16px;
  flex: 1 1 320px;
  max-width: 520px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.pb-search-form i {
  color: var(--pb-green);
  opacity: .85;
}

.pb-search-form input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent !important;
  color: var(--pb-text) !important;
  font-family: var(--pb-fb);
  font-size: 14px;
  box-shadow: none !important;
}

.pb-search-form input::placeholder {
  color: var(--pb-t3);
}

.pb-search-form .pb-btn {
  min-height: 36px;
}

.pb-directory-grid {
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.pb-directory-sidebar {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 14px;
}

.pb-directory-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pb-side-panel {
  padding: 16px;
  display: grid;
  gap: 8px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.pb-side-title {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  color: var(--pb-green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pb-filter-link {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--pb-border);
  color: var(--pb-t2);
  font-size: 12px;
  font-weight: 700;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.pb-filter-link:hover,
.pb-filter-link.is-active {
  color: var(--pb-green);
  border-color: var(--pb-border-green);
  background: rgba(0,200,0,.075);
}

.pb-filter-icon,
.pb-title-icon {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 3px;
}

.pb-title-icon {
  width: 34px;
  height: 34px;
  vertical-align: .05em;
  margin-right: 8px;
}

.pb-filter-toggle {
  width: 100%;
  min-height: 42px;
  margin-bottom: 12px;
}

.pb-modal-glass {
  background: transparent;
  border: 0;
}

.pb-field,
.pb-select {
  min-height: 42px;
  background: rgba(14,14,14,.72) !important;
  border: 1px solid var(--pb-border) !important;
  color: var(--pb-text) !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.pb-field:focus,
.pb-select:focus {
  border-color: var(--pb-border-green) !important;
  box-shadow: 0 0 0 1px rgba(0,200,0,.12) !important;
}

.pb-creator {
  color: inherit;
  text-decoration: none !important;
}

.pb-creator:hover {
  color: inherit;
}

.pb-verified,
.pb-featured {
  color: var(--pb-green);
  font-size: 12px;
  vertical-align: .08em;
}

.pb-featured {
  color: #d6d6d6;
}

.pb-creator-tags {
  min-height: 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.pb-creator-tags span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(255,255,255,.035);
  color: var(--pb-t3);
  font-size: 10.5px;
  font-weight: 700;
  clip-path: polygon(4px 0,100% 0,100% 100%,0 100%,0 4px);
}

.pb-empty-state {
  padding: 64px 24px;
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.pb-empty-state span {
  color: var(--pb-green);
  font-size: 30px;
  opacity: .7;
}

.pb-empty-state h2 {
  margin-top: 14px;
  font-family: var(--pb-fh);
  font-size: 34px;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
}

.pb-explore-page {
  padding-bottom: 56px;
}

.pb-explore-toolbar {
  padding: 0 !important;
  gap: 12px;
}

.pb-explore-sticky {
  top: 86px;
  z-index: 10 !important;
}

.pb-explore-toolbar .pb-search-form {
  max-width: none;
}

.pb-explore-toolbar .pb-search-form .btn-search {
  position: static !important;
  width: auto;
  height: auto;
  pointer-events: none;
}

.pb-explore-creators {
  padding: 16px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.pb-explore-creators-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pb-explore-creators-head h6 {
  margin: 0;
  color: var(--pb-green);
  font-family: var(--pb-fh);
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
}

.pb-explore-creators-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pb-explore-creators-actions a {
  color: var(--pb-t2);
  font-size: 14px;
}

.pb-explore-creators-actions a:hover {
  color: var(--pb-green);
}

.pb-mini-creator-list {
  display: grid;
  gap: 8px;
}

.pb-mini-creator-empty {
  padding: 14px 12px;
  color: rgba(240,240,240,.48);
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(88,255,72,.08);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.pb-mini-creator {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--pb-border);
  color: inherit;
  text-decoration: none !important;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}

.pb-mini-creator .pb-avatar {
  width: 38px;
  height: 38px;
}

.pb-mini-creator-copy {
  min-width: 0;
  flex: 1;
}

.pb-mini-creator-copy h6 {
  margin: 0;
  color: var(--pb-text);
  font-family: var(--pb-fh);
  font-size: 17px;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-mini-creator-copy span {
  display: block;
  color: var(--pb-t3);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-mini-creator em {
  color: var(--pb-green);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.pb-directory-main,
.pb-directory-results {
  min-width: 0;
  overflow: visible;
}

.pb-directory-results {
  align-items: stretch;
  grid-auto-flow: row;
  grid-auto-rows: auto;
  gap: 14px;
  width: 100%;
}

.pb-directory-results .pb-creator {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 258px;
  padding: 18px;
  overflow: visible;
  clip-path: none;
  border-color: rgba(255,255,255,.085);
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.01) 38%, rgba(0,200,0,.025)),
    rgba(14,14,14,.62);
  transform: none;
  will-change: auto;
  isolation: isolate;
}

.pb-directory-results .pb-creator:hover {
  transform: none;
  border-color: rgba(0,200,0,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 42px rgba(0,0,0,.48), 0 0 0 1px rgba(0,200,0,.08), 0 0 28px rgba(0,200,0,.06);
}

.pb-directory-results .pb-creator::before {
  top: -1px;
  right: -1px;
  border-width: 0 26px 26px 0;
  border-color: transparent rgba(0,200,0,.48) transparent transparent;
  z-index: 2;
  filter: drop-shadow(0 0 10px rgba(0,200,0,.18));
}

.pb-directory-results .pb-creator::after {
  height: 58%;
  border-top: 1px solid rgba(255,255,255,.03);
  background: linear-gradient(150deg, rgba(255,255,255,.045), transparent 56%);
  z-index: 0;
}

.pb-directory-results .pb-creator > * {
  position: relative;
  z-index: 1;
}

.pb-directory-results .pb-creator-top {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-right: 14px;
}

.pb-directory-results .pb-avatar {
  width: 46px;
  height: 46px;
  font-size: 16px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.28);
}

.pb-creator-identity {
  min-width: 0;
}

.pb-directory-results .pb-creator h3 {
  max-width: 100%;
  margin: 0;
  color: var(--pb-text);
  font-size: 19px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-directory-results .pb-creator-top p {
  margin: 5px 0 0;
  color: rgba(240,240,240,.38);
  font-size: 12px;
}

.pb-directory-results .pb-creator-bio {
  flex: 1 1 auto;
  min-height: 64px;
  margin-bottom: 14px;
  color: rgba(240,240,240,.58);
  font-size: 12.5px;
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.pb-creator-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
  width: 100%;
}

.pb-creator-stats span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 32px;
  padding: 6px 5px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.055);
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.pb-creator-stats strong {
  color: var(--pb-green);
  font-family: var(--pb-fb);
  font-size: 13.5px;
  font-weight: 750;
  font-style: normal;
  letter-spacing: .01em;
  line-height: 1;
  flex: 0 1 auto;
  min-width: max-content;
}

.pb-creator-stats i {
  color: rgba(240,240,240,.36);
  font-size: 10.5px;
  line-height: 1;
  flex: 0 0 auto;
}

.pb-directory-results .pb-creator-foot {
  margin-top: auto;
  align-items: center;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
}

.pb-price-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px !important;
  color: #050505 !important;
  background: var(--pb-green) !important;
  border: 1px solid rgba(0,200,0,.6);
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  white-space: nowrap;
  clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px) !important;
}

.pb-price-pill.is-paid {
  color: var(--pb-text) !important;
  background: rgba(0,200,0,.13) !important;
  border-color: rgba(0,200,0,.34);
}

.pb-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding: 0;
  color: var(--pb-green) !important;
  background: transparent;
  border: 0;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  letter-spacing: .02em;
  white-space: nowrap;
  clip-path: none;
  text-align: right;
  text-shadow: 0 0 10px rgba(0,200,0,.18);
}

.pb-directory-results .pb-creator:hover .pb-card-cta {
  color: #27ff27 !important;
  text-shadow: 0 0 14px rgba(0,200,0,.28);
}

.pb-explore-creators .pb-mini-creator {
  overflow: visible;
  transform: none;
}

.pb-explore-creators .pb-mini-creator:hover {
  transform: none;
  border-color: rgba(0,200,0,.24);
  box-shadow: 0 10px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(0,200,0,.06);
}

.pb-mini-creator-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.pb-mini-creator-stats small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  background: rgba(255,255,255,.035);
  color: rgba(240,240,240,.45);
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}

.pb-directory-results.pb-creator-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.pb-directory-results > .col-md-6,
.pb-directory-results > .col-md-4,
.pb-directory-results > .col-lg-4 {
  display: contents;
}

.pb-directory-results > .btn-block,
.pb-directory-results > .loadMoreMsgSpinner {
  grid-column: 1 / -1;
}

.pb-directory-results .pb-creator {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 236px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: 18px;
  overflow: hidden;
  clip-path: none;
}

.pb-directory-results .pb-creator-identity,
.pb-directory-results .pb-creator-top,
.pb-directory-results .pb-creator-bio,
.pb-directory-results .pb-creator-foot {
  min-width: 0;
}

.pb-directory-results .pb-creator-bio {
  min-height: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.pb-directory-results .pb-creator-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pb-directory-results .pb-price-pill {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-directory-results .pb-card-cta {
  flex: 0 0 auto;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}

.pb-directory-results.pb-creator-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 16px;
  width: 100%;
  min-width: 0;
  align-items: stretch;
}

.pb-directory-results .pb-creator {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 262px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: 18px;
  overflow: hidden;
  clip-path: none;
  border-color: rgba(255,255,255,.08);
  background:
    linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.015) 45%, rgba(0,200,0,.028)),
    rgba(12,12,12,.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 12px 34px rgba(0,0,0,.36);
}

.pb-directory-results .pb-creator:hover {
  border-color: rgba(0,200,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 16px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(0,200,0,.06), 0 0 24px rgba(0,200,0,.055);
}

.pb-directory-results .pb-creator::before {
  border-width: 0 26px 26px 0;
  border-color: transparent rgba(0,200,0,.48) transparent transparent;
}

.pb-directory-results .pb-creator-top {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
  padding-right: 16px;
}

.pb-directory-results .pb-avatar {
  width: 56px;
  height: 56px;
  font-size: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.32);
}

.pb-directory-results .pb-creator-identity {
  min-width: 0;
}

.pb-directory-results .pb-creator h3 {
  max-width: 100%;
  margin: 0;
  color: var(--pb-text);
  font-size: 20px;
  line-height: 1.02;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-directory-results .pb-creator-top p {
  max-width: 100%;
  margin: 5px 0 0;
  color: rgba(240,240,240,.42);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-directory-results .pb-creator-bio {
  --pb-bio-lines: 3;
  --pb-bio-line-height: 1.6;
  flex: 0 0 auto;
  min-height: calc(12.5px * var(--pb-bio-line-height) * var(--pb-bio-lines));
  max-height: calc(12.5px * var(--pb-bio-line-height) * var(--pb-bio-lines));
  margin: 0 0 15px;
  color: rgba(240,240,240,.62);
  font-size: 12.5px;
  line-height: var(--pb-bio-line-height);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--pb-bio-lines);
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.pb-directory-results .pb-creator-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  margin: 0 0 16px;
}

.pb-directory-results .pb-creator-stats span {
  height: 40px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 7px;
  background: rgba(255,255,255,.032);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}

.pb-directory-results .pb-creator-stats strong {
  color: var(--pb-green);
  font-family: var(--pb-fb);
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
  min-width: 0;
}

.pb-directory-results .pb-creator-stats i {
  color: rgba(240,240,240,.34);
  font-size: 12px;
  line-height: 1;
  flex: 0 0 auto;
}

.pb-directory-results .pb-creator-foot {
  margin-top: auto;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pb-directory-results .pb-price-pill {
  min-height: 29px;
  max-width: 60%;
  flex: 0 1 auto;
  padding: 6px 10px !important;
  color: rgba(245,255,245,.94) !important;
  background: rgba(0,200,0,.12) !important;
  border: 1px solid rgba(0,200,0,.34);
  font-family: var(--pb-fb);
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-directory-results .pb-price-pill.is-free {
  color: #041004 !important;
  background: var(--pb-green) !important;
  border-color: rgba(0,200,0,.7);
}

.pb-directory-results .pb-card-cta {
  flex: 0 0 auto;
  padding: 0;
  color: var(--pb-green) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(0,200,0,.16);
}

.pb-directory-results .pb-creator:hover .pb-card-cta {
  color: #25ff25 !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

@media (max-width: 720px) {
  .pb-directory-results .pb-creator {
    min-height: 258px;
  }

  .pb-directory-results .pb-creator-bio {
    --pb-bio-lines: 2;
  }
}

.pb-shimmer {
  position: relative;
}

.pb-shimmer > * {
  position: relative;
  z-index: 1;
}

.pb-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.04) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: pb-shimmer 4s ease-in-out infinite;
}

@keyframes pb-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@media (max-width: 1024px) {
  .pb-creator-grid { grid-template-columns: repeat(2, 1fr); }
  .pb-directory-results,
  .pb-directory-results.pb-creator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-directory-grid { grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .pb-nav { padding: 0 14px; }
  .pb-nav-logo img { height: 19px; }
  .pb-nav-right { gap: .55rem; }
  .pb-nav .pb-nav-btn-outline { display: none; }
  .pb-nav .pb-nav-btn-primary { height: 34px; min-height: 34px; padding: 0 16px; font-size: 13px; }
  .pb-nav .pb-btn-ghost:first-child { display: none; }
  .pb-btn { white-space: nowrap; }
  .pb-hero { padding: 64px 5% 96px; }
  .pb-hero-title { font-size: 42px; }
  .pb-proof-bar,
  .pb-steps {
    grid-template-columns: 1fr;
  }
  .pb-proof-bar {
    display: block;
  }
  .pb-stat {
    border-right: 0;
    border-bottom: 1px solid var(--pb-border);
  }
  .pb-stat:last-child { border-bottom: 0; }
  .pb-creator-grid { grid-template-columns: 1fr; }
  .pb-directory-shell { padding: 48px 16px 64px; }
  .pb-directory-grid { grid-template-columns: 1fr; }
  .pb-directory-sidebar { position: static; }
  .pb-directory-results,
  .pb-directory-results.pb-creator-grid { grid-template-columns: 1fr; }
  .pb-search-form {
    flex-basis: 100%;
    max-width: none;
  }
  .pb-directory-actions .pb-btn-outline {
    width: 100%;
  }
  .pb-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .pb-auth-page {
    padding: 48px 16px;
  }
  .pb-auth-card-inner {
    padding: 24px 18px;
  }
  .pb-auth-links {
    align-items: flex-start;
    flex-direction: column;
  }
  .pb-auth-links.is-centered {
    align-items: center;
  }
}

body:has(.pb-home-live) {
  padding-top: 0 !important;
  background: var(--pb-bg) !important;
  color: var(--pb-text) !important;
}

body:has(.pb-home-live) > header,
body:has(.pb-home-live) .playbooki-nav,
body:has(.pb-home-live) .playbooki-footer {
  display: none !important;
}

body:has(.pb-home-live) main {
  background: var(--pb-bg);
}

/* Logged-in Sponzey feed shell: visual-only styles for original markup. */
/* Calmer background: two large, soft, blurred green glow blobs over a dark
   base. background-attachment: fixed keeps it smooth across the whole
   scrollable page. A background paint never blocks clicks. */
body.pb-authenticated {
  /* Near-true-black base with only a whisper of green undertone, so the
     glow blobs (not a green wash) provide the color and pop against it. */
  background-color: #030303 !important;
  background-image:
    radial-gradient(68% 58% at 20% 12%, rgba(0, 220, 0, .15), rgba(0, 220, 0, 0) 58%),
    radial-gradient(62% 54% at 88% 88%, rgba(0, 210, 0, .10), rgba(0, 210, 0, 0) 58%),
    linear-gradient(180deg, #040504 0%, #050605 55%, #030303 100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed, fixed, fixed !important;
  background-size: cover, cover, cover !important;
  color: var(--pb-text) !important;
}

/* Remove the leftover inert particle canvas: no dots, and it can't catch clicks. */
body.pb-authenticated .pb-app-particles,
body.pb-authenticated #pb-app-particles {
  display: none !important;
}

body.pb-authenticated .section.section-sm {
  background: transparent !important;
  color: var(--pb-text);
}

body.pb-authenticated .container-lg-3 {
  position: relative;
  z-index: 1;
}

body.pb-authenticated > header {
  pointer-events: auto !important;
  overflow: visible !important;
  height: auto !important;
  z-index: 1200 !important;
}

body.pb-authenticated .navbar.navbar-inverse.fixed-top.p-nav {
  background: rgba(8, 8, 8, .68) !important;
  border-bottom: 1px solid rgba(88, 255, 72, .10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 12px 32px rgba(0, 0, 0, .42) !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  z-index: 1200;
}

body.pb-authenticated .navbar.navbar-inverse.fixed-top.p-nav .dropdown-menu {
  z-index: 1300;
}

/* PHASE 10 RESTORE — Navbar icon green hover + post action buttons
   moved to public/css/playbooki.css so they also load on the creator
   profile page (which does NOT include playbooki-redesign.css). */

body.pb-authenticated .menu-left-home {
  top: 86px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.pb-authenticated .menu-left-home li + li {
  margin-top: 8px;
}

body.pb-authenticated .menu-left-home a {
  min-height: 40px;
  display: flex;
  align-items: center;
  color: var(--pb-t2);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  background: rgba(8, 14, 10, .48);
  border: 1px solid rgba(88, 255, 72, .07);
  border-radius: 14px;
  backdrop-filter: blur(12px) saturate(1.18);
  -webkit-backdrop-filter: blur(12px) saturate(1.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 26px rgba(0, 0, 0, .20);
}

body.pb-authenticated .menu-left-home a:hover,
body.pb-authenticated .menu-left-home a.active {
  color: var(--pb-green);
  background: rgba(0, 200, 0, .09);
  border-color: rgba(0, 200, 0, .24);
}

body.pb-authenticated .menu-left-home i,
body.pb-authenticated .menu-left-home svg {
  color: var(--pb-green);
}

body.pb-authenticated .wrap-post,
body.pb-authenticated .wrap-post .grid-updates {
  position: relative;
  z-index: 1;
  overflow: visible;
}

body.pb-authenticated .wrap-post .card,
body.pb-authenticated .wrap-post .card-updates,
body.pb-authenticated .wrap-post .panel,
body.pb-authenticated .wrap-post .panel-default,
body.pb-authenticated .wrap-post #stories,
body.pb-authenticated .wrap-post #formUpdateCreate > .card {
  background: rgba(8, 14, 10, .68) !important;
  color: var(--pb-text) !important;
  border: 1px solid rgba(88, 255, 72, .08) !important;
  border-radius: 22px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 16px 42px rgba(0, 0, 0, .38), 0 0 20px rgba(0, 200, 0, .025) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  clip-path: none !important;
}

body.pb-authenticated .wrap-post .card-footer.bg-white,
body.pb-authenticated .wrap-post .card-footer.rounded-large,
body.pb-authenticated .wrap-post #formUpdateCreate .card-footer {
  background: rgba(4, 7, 5, .46) !important;
  color: var(--pb-t2) !important;
  border-top: 1px solid rgba(88, 255, 72, .075) !important;
  border-radius: 0 0 22px 22px !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

body.pb-authenticated .wrap-post .text-muted,
body.pb-authenticated .wrap-post small,
body.pb-authenticated .wrap-post .small {
  color: var(--pb-t3) !important;
}


/* v2.1.6: was a hard-coded 86px. Now driven by the same token as the rails, so
   the sticky offset can never disagree with the page's top spacing. The 86px
   fallback keeps the old behaviour if the token is ever absent. */
body.pb-authenticated .col-md-4 > .sticky-top,
body.pb-authenticated .col-md-4 .navbar-collapse.sticky-top {
  top: var(--pb-rail-top, 86px);
}

@media (min-width: 992px) {
  /* Center the whole logged-in app and give it breathing room on both edges. */
  body.pb-authenticated .container-lg-3 {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* 3-column row: clean gaps instead of Bootstrap gutters.
     v2.1.6: `align-items` was `flex-start`, which is what stopped the sticky
     rails from ever sticking. A sticky element can only travel inside its own
     parent's box; with flex-start the rail COLUMNS shrank to their content
     height (786px right, 344px left) instead of spanning the 2,950px row, so
     there was no travel to give and both rails scrolled away with the feed.
     `stretch` makes each column as tall as the row, which is the real fix —
     the sticky wrappers inside them then hold position for the whole page.
     The columns are transparent, so stretching them paints nothing new. */
  body.pb-authenticated .container-lg-3 > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 28px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Left sidebar: fixed width. */
  body.pb-authenticated .container-lg-3 > .row > .col-md-2 {
    display: block !important;
    flex: 0 0 200px !important;
    max-width: 200px !important;
    width: 200px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    order: 1 !important;
  }

  /* Center feed: takes the remaining space. */
  body.pb-authenticated .container-lg-3 > .row > .col-md-6.wrap-post {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    order: 2 !important;
  }

  /* Right Explore Bookis sidebar: fixed width, always visible on desktop. */
  body.pb-authenticated .container-lg-3 > .row > .col-md-4.d-lg-block.d-none {
    display: block !important;
    flex: 0 0 330px !important;
    max-width: 330px !important;
    width: 330px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    order: 3 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body.pb-authenticated .container-lg-3 > .row > .col-md-4 .navbar-collapse.collapse.d-lg-block {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
}

body.pb-authenticated .col-md-4 > .sticky-top > .mb-2,
body.pb-authenticated .col-md-4 .navbar-collapse.sticky-top > .mb-2 {
  padding: 16px;
  background: rgba(8, 14, 10, .62);
  border: 1px solid rgba(88, 255, 72, .08);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 16px 38px rgba(0, 0, 0, .30);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
}

/* ============================================================
   PHASE 10 — Explore Bookis right-rail widget (logged-in home)
   Scoped to .pb-explore-bookis-widget inside the right column.
   Premium Playbooki 2.0 liquid-glass recommendation module.
   ============================================================ */

/* --- Outer widget panel: add a subtle branded green glow --- */
body.pb-authenticated .pb-explore-bookis-widget.mb-2 {
  border-color: rgba(0, 200, 0, .14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 0 0 1px rgba(0, 200, 0, .05),
    0 18px 40px rgba(0, 0, 0, .40),
    0 0 30px rgba(0, 200, 0, .05) !important;
}

/* --- Title row: branded condensed heading --- */
body.pb-authenticated .pb-explore-bookis-widget .filter-explorer {
  color: var(--pb-green) !important;
  font-family: 'Barlow Condensed', var(--pb-fb), sans-serif;
  font-weight: 800 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 1.05rem;
  margin-bottom: 14px !important;
}

/* --- Refresh / tag icons: muted, hover Playbooki green --- */
body.pb-authenticated .pb-explore-bookis-widget .filter-explorer a.refresh_creators {
  color: rgba(235, 235, 235, .50) !important;
  font-size: .95rem !important;
  text-decoration: none !important;
  transition: color .2s ease, transform .2s ease;
}
body.pb-authenticated .pb-explore-bookis-widget .filter-explorer a.refresh_creators:hover {
  color: var(--pb-green) !important;
  transform: translateY(-1px);
}

/* --- Reset old per-row overrides so the card alone owns its look --- */
body.pb-authenticated .pb-explore-bookis-widget .containerRefreshCreators .list-group-item {
  background: transparent !important;
  border: 0 !important;
}

/* Spacing between the three cards (cards never resize the widget). */
body.pb-authenticated .pb-explore-bookis-widget .containerRefreshCreators > a {
  display: block;
  margin-bottom: 12px;
}
body.pb-authenticated .pb-explore-bookis-widget .containerRefreshCreators > a:last-child {
  margin-bottom: 0;
}
body.pb-authenticated .pb-explore-bookis-widget .containerRefreshCreators > a,
body.pb-authenticated .pb-explore-bookis-widget .containerRefreshCreators > a:hover,
body.pb-authenticated .pb-explore-bookis-widget .containerRefreshCreators > a:focus {
  text-decoration: none !important;
}

/* --- Booki card: rounded tinted-glass cover card --- */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 138px;
  border-radius: 14px !important;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  will-change: transform;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 6px 18px rgba(0, 0, 0, .35);
  transition: box-shadow .3s ease, transform .3s ease;
}

body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card > * {
  position: relative;
  z-index: 1;
}

/* Two-layer overlay: a flat dark veil normalizes every cover to the SAME
   resting darkness, plus a bottom gradient for text readability.
   This is what keeps all 3 cards visually consistent regardless of how
   bright/dark the underlying cover image is. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      transparent 28%,
      rgba(2, 4, 3, .55) 68%,
      rgba(1, 3, 2, .94) 100%
    ),
    rgba(4, 8, 5, .46);
}

/* Cover region flexes to fill the top so info pins to the bottom. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-cover {
  height: auto !important;
  flex: 1 1 auto;
  min-height: 56px;
}

/* FREE / price pill — small premium glass pill, parked inside the info
   band and vertically centred so it reads with the name/username. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-badge.badge-free {
  top: 50%;
  right: 12px;
  bottom: auto;
  left: auto;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(0, 200, 0, .16) !important;
  color: #b6ffac !important;
  border: 1px solid rgba(0, 200, 0, .45);
  border-radius: 999px !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  padding: 3px 9px !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* Reserve space on the right so long names never slide under the pill. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-info:has(.badge-free) .media-body {
  padding-right: 54px;
}

/* Info row — transparent, sits over the gradient; relative so the FREE
   pill anchors to this band rather than the top of the cover. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-info {
  position: relative;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 10px 12px 12px !important;
}
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-info .media {
  align-items: center;
}
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-info .media-heading {
  font-size: 1rem;
  line-height: 1.15;
  margin-bottom: 2px !important;
}

/* Avatar — slightly larger, polished ring. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-avatar {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .85) !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .5);
  transition: border-color .3s ease, box-shadow .3s ease;
}

/* Creator name — strong white, green on hover, never underlined. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-name,
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-name:hover,
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-name:focus {
  color: #f4f4f4 !important;
  text-decoration: none !important;
  transition: color .22s ease, text-shadow .22s ease;
}
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-name strong {
  font-weight: 800;
  letter-spacing: .01em;
}

/* Username — readable but secondary. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-username {
  color: rgba(235, 235, 235, .60) !important;
  font-size: .78rem;
  font-weight: 500;
  transition: color .22s ease;
}

/* Subtle shimmer sweep on hover (gentler than the CTA button). */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, .10) 50%,
    transparent 65%
  );
  background-size: 220% 100%;
  background-position: 200% 0;
  opacity: 0;
  transition: background-position .6s ease, opacity .25s ease;
}

/* --- Hover / focus: subtle lift/pop + green glow. NO brightness change,
   so the base tint stays identical resting vs hovered. Transform only,
   so there is no reflow, resize or content jump. --- */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:hover,
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:focus-within {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 200, 0, .55),
    0 0 26px rgba(0, 200, 0, .20),
    0 14px 30px rgba(0, 0, 0, .48);
}
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:hover::after,
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:focus-within::after {
  background-position: -120% 0;
  opacity: .7;
}
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:hover .pb-explore-booki-name,
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:focus-within .pb-explore-booki-name {
  color: var(--pb-green) !important;
  text-shadow: 0 0 12px rgba(0, 200, 0, .25);
}
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:hover .pb-explore-booki-username,
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:focus-within .pb-explore-booki-username {
  color: rgba(120, 230, 110, .80) !important;
}
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:hover .pb-explore-booki-avatar,
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:focus-within .pb-explore-booki-avatar {
  border-color: rgba(0, 200, 0, .90) !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), 0 0 14px rgba(0, 200, 0, .40);
}

@media (prefers-reduced-motion: reduce) {
  body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card,
  body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card::after,
  body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-avatar {
    transition: none;
  }
}

body.pb-authenticated .col-md-4 .card.bg-transparent {
  padding: 12px;
  background: rgba(8, 14, 10, .36) !important;
  border: 1px solid rgba(88, 255, 72, .06) !important;
  border-radius: 16px;
}

body.pb-authenticated .footer-tiny {
  color: rgba(240, 240, 240, .48) !important;
}

body.pb-authenticated .footer-tiny:hover {
  color: var(--pb-green) !important;
}

/* ------------------------------------------------------------------
   Modal / backdrop layering fix (logged-in feed)
   playbooki.css sets `body > * { position: relative; z-index: 1; }`,
   which turns <main> into a stacking context at z-index 1. The feed
   modals (schedule, livestream, share, tip) live inside <main>, so
   their z-index (2050) was trapped below the modal-backdrop (2040)
   that Bootstrap appends to <body>. While a modal is open, drop
   <main>'s stacking context so the modal layers above the backdrop,
   the dialog is clickable, and closing removes the overlay normally.
   ------------------------------------------------------------------ */
body.pb-authenticated.modal-open main {
  z-index: auto !important;
}

body.pb-authenticated .modal {
  z-index: 2050 !important;
}

body.pb-authenticated .modal-backdrop {
  z-index: 2040 !important;
}

/* Never let a leftover/duplicate backdrop linger above page content. */
body.pb-authenticated:not(.modal-open) .modal-backdrop {
  display: none !important;
}

/* ------------------------------------------------------------------
   Composer dropdown layering (logged-in feed)
   The composer card uses backdrop-filter, which makes it a stacking
   context. The post cards below are later sibling stacking contexts,
   so the composer's dropdowns (emoji, GIF, more-options / upload /
   zip / epub) were painted UNDER the posts. Raise the composer's
   stacking context above the posts so its dropdowns/popovers appear
   on top and stay clickable. Scoped to the composer only, so post
   markup, sidebar, and layout are untouched.
   ------------------------------------------------------------------ */
body.pb-authenticated .wrap-post #formUpdateCreate {
  position: relative;
  z-index: 30;
}

body.pb-authenticated .wrap-post #formUpdateCreate .dropdown-menu {
  z-index: 1090 !important;
}

/* Keep the dropdown menus from being clipped by any rounded card overflow. */
body.pb-authenticated .wrap-post #formUpdateCreate,
body.pb-authenticated .wrap-post #formUpdateCreate .card {
  overflow: visible !important;
}

/* ------------------------------------------------------------------
   Post comment form (logged-in feed) — surgical fix
   The original Sponzy markup overlays the GIF/sticker/emoji icons
   (absolutely positioned) on the right of the comment input. Two
   global redesign rules broke it:
   1) playbooki.css forces `.form-control { padding: 11px 14px !important }`,
      which overrode the inline `padding-right:95px`, so the input filled
      the whole pill (text overlapping the icons and covering them).
   2) The input then sat on top of the icons, so clicks never reached
      the GIF/sticker/emoji buttons.
   Fix is CSS-only and scoped to the comment form: restore room for the
   icons, lift the icon rail above the input so the buttons are clickable,
   and raise the GIF/emoji/sticker popups above the post cards. No markup,
   JS hooks, IDs, classes, data-attributes, or backend touched.
   ------------------------------------------------------------------ */
/* Reserve room on the right of the pill for the 3 tool buttons so typed
   text never runs under them. */
body.pb-authenticated .wrap-post .comments-form .inputComment {
  padding-right: 104px !important;
}

/* Turn the (originally absolutely-positioned) icon group into a clean, evenly
   spaced rail, vertically centered inside the pill and lifted above the input.
   We override the inline absolute positioning but keep the markup/JS hooks. */
body.pb-authenticated .wrap-post .comments-form > .position-absolute {
  top: auto !important;
  bottom: 8px !important;
  right: 10px !important;
  left: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center;
  gap: 2px;
  z-index: 6;
}

body.pb-authenticated .wrap-post .comments-form > .position-absolute > .dropdown {
  position: relative !important;   /* keep as the dropdown-menu's positioning context */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Fixed 30px slot so opening the menu (absolute) can't collapse the wrapper. */
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 7;
}

/* Each tool button: reset inline absolute positioning, make a 30px circular,
   centered, clickable target. Default soft gray. */
body.pb-authenticated .wrap-post .comments-form .triggerGif,
body.pb-authenticated .wrap-post .comments-form .triggerSticker,
body.pb-authenticated .wrap-post .comments-form .triggerEmoji {
  /* Layout is fully locked with !important so NO state (hover/focus/active/open)
     can change size, position, spacing, or display and shift the rail. Only
     color / background / box-shadow change for feedback. */
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  flex: 0 0 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  border: 1px solid transparent !important; /* reserve border space; never resizes */
  border-radius: 50% !important;
  transform: none !important;
  outline: none !important;
  color: var(--pb-t2);
  cursor: pointer;
  pointer-events: auto;
  z-index: 7;
  transition: background-color .2s ease, box-shadow .2s ease;
}

body.pb-authenticated .wrap-post .comments-form .triggerGif > i,
body.pb-authenticated .wrap-post .comments-form .triggerSticker > i,
body.pb-authenticated .wrap-post .comments-form .triggerEmoji > i {
  font-size: 17px !important;
  line-height: 1;
}

/* Hover: fade to Playbooki green with a subtle circular glow. */
body.pb-authenticated .wrap-post .comments-form .triggerGif:hover,
body.pb-authenticated .wrap-post .comments-form .triggerSticker:hover,
body.pb-authenticated .wrap-post .comments-form .triggerEmoji:hover {
  color: var(--pb-green);
  background-color: rgba(0, 200, 0, .10);
  box-shadow: 0 0 0 1px rgba(0, 200, 0, .18), 0 0 10px rgba(0, 200, 0, .12);
}

/* Active / open: while the picker dropdown is open, Bootstrap sets
   aria-expanded="true" on the trigger — keep it Playbooki green. */
body.pb-authenticated .wrap-post .comments-form .triggerGif[aria-expanded="true"],
body.pb-authenticated .wrap-post .comments-form .triggerSticker[aria-expanded="true"],
body.pb-authenticated .wrap-post .comments-form .triggerEmoji[aria-expanded="true"] {
  color: var(--pb-green) !important;
  background-color: rgba(0, 200, 0, .14) !important;
}

/* Same green active state via the parent .dropdown.show, as a robust fallback. */
body.pb-authenticated .wrap-post .comments-form .dropdown.show > .triggerGif,
body.pb-authenticated .wrap-post .comments-form .dropdown.show > .triggerSticker,
body.pb-authenticated .wrap-post .comments-form .dropdown.show > .triggerEmoji {
  color: var(--pb-green) !important;
  background-color: rgba(0, 200, 0, .14) !important;
}

/* GIF / emoji / sticker popups: above the post/comment area, not clipped. */
body.pb-authenticated .wrap-post .comments-form .dropdown-menu {
  z-index: 1400 !important;
}

/* Each post card is its own backdrop-filter stacking context, so a popup that
   opens downward would be painted under the NEXT post. While a comment popup is
   open, give ONLY that post card a small positive z-index (still within the
   1-10 "posts" band) so it paints above the following cards and the popup shows.
   Reverts the moment the popup closes. */
body.pb-authenticated .wrap-post .grid-updates .card-updates:has(.comments-form .dropdown-menu.show) {
  position: relative;
  z-index: 5;
}

/* ==================================================================
   PLAYBOOKI ACCOUNT / MY PAGE / SETTINGS PAGES
   Scoped to pages that render the settings menu (.card-settings) only,
   so the feed, explore, home, login, and modals are never affected.
   CSS-only: no markup, form, hook, route, or backend changes.
   ================================================================== */

/* Page shell — let the app's dark liquid background show through, tidy the
   oversized centred title block. */
body.pb-authenticated .section:has(.card-settings) {
  background: transparent !important;
  color: var(--pb-text);
}
body.pb-authenticated .section:has(.card-settings) > .container {
  max-width: 1100px;
}
body.pb-authenticated .section:has(.card-settings) .row.justify-content-center .col-lg-8.py-5 {
  padding-top: 1.6rem !important;
  padding-bottom: 1.1rem !important;
}
body.pb-authenticated .section:has(.card-settings) h2 {
  color: var(--pb-text);
  font-weight: 800;
  letter-spacing: .2px;
}
body.pb-authenticated .section:has(.card-settings) h2 i { color: var(--pb-green); }
body.pb-authenticated .section:has(.card-settings) .lead.text-muted { color: var(--pb-t2) !important; }

/* ---- Left settings menu (glass) ---- */
body.pb-authenticated .card-settings {
  background: rgba(8, 14, 10, .62) !important;
  border: 1px solid rgba(88, 255, 72, .08) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 16px 38px rgba(0, 0, 0, .30) !important;
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  overflow: hidden;
}
body.pb-authenticated .card-settings .list-group,
body.pb-authenticated .card-settings .list-group-item {
  background: transparent !important;
  border-color: rgba(88, 255, 72, .07) !important;
  color: var(--pb-t2) !important;
}
body.pb-authenticated .card-settings small.text-muted { color: var(--pb-t3) !important; }
body.pb-authenticated .card-settings .list-group-item i,
body.pb-authenticated .card-settings .list-group-item svg { color: var(--pb-green); opacity: .85; }
body.pb-authenticated .card-settings .list-group-item:hover {
  background: rgba(0, 200, 0, .07) !important;
  color: var(--pb-text) !important;
}
body.pb-authenticated .card-settings .list-group-item.active {
  background: rgba(0, 200, 0, .12) !important;
  color: #fff !important;
  border-color: rgba(0, 200, 0, .22) !important;
}
body.pb-authenticated .card-settings .list-group-item.active i { opacity: 1; }

/* ---- Content cards / panels (glass) ---- */
body.pb-authenticated .section:has(.card-settings) .col-lg-9 .card,
body.pb-authenticated .section:has(.card-settings) .col-md-6.col-lg-9 .card {
  background: rgba(8, 14, 10, .62) !important;
  border: 1px solid rgba(88, 255, 72, .08) !important;
  border-radius: 22px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 16px 42px rgba(0, 0, 0, .38) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  color: var(--pb-text) !important;
}
body.pb-authenticated .section:has(.card-settings) .card-header,
body.pb-authenticated .section:has(.card-settings) .card-footer {
  background: transparent !important;
  border-color: rgba(88, 255, 72, .08) !important;
  color: var(--pb-text) !important;
}

/* ---- Labels & help text ---- */
body.pb-authenticated .section:has(.card-settings) label,
body.pb-authenticated .section:has(.card-settings) .control-label {
  color: var(--pb-text) !important;
}

/* =========================================================================
   PHASE 12 — Logged-out Password Reset page (scoped)
   Reuses the pb-auth-* system from the login/register redesign and adds a
   few reset-specific refinements. All selectors are scoped to
   .pb-auth-reset-* so logged-in pages are never affected.
   ========================================================================= */

/* Tighten the brand block spacing for the single-field reset form */
.pb-auth-reset-page .pb-auth-brand {
  margin-bottom: 22px;
}

.pb-auth-reset-page .pb-auth-brand .pb-section-sub {
  max-width: 340px;
}

/* Reset card: a touch more breathing room around the lone email field */
.pb-auth-reset-card .pb-auth-card-inner {
  padding: 32px 30px;
}

.pb-auth-reset-form {
  gap: 14px;
}

/* Invalid email state mirrors the focus accent in red */
.pb-auth-reset-input.is-invalid {
  border-color: rgba(220, 53, 69, .45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 0 1px rgba(220,53,69,.12) !important;
}

/* "Go back" rendered as an integrated secondary glass link, not plain text */
.pb-auth-reset-actions {
  margin-top: 20px;
}

.pb-auth-reset-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--pb-border);
  color: rgba(240,240,240,.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none !important;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.pb-auth-reset-actions a:hover {
  color: var(--pb-text);
  background: rgba(255,255,255,.06);
  border-color: rgba(0,200,0,.28);
}

.pb-auth-reset-actions a i {
  font-size: 11px;
  color: var(--pb-green);
}

@media (max-width: 575.98px) {
  .pb-auth-reset-card .pb-auth-card-inner {
    padding: 24px 20px;
  }
}--pb-text);
  font-weight: 600;
}
body.pb-authenticated .section:has(.card-settings) .form-text,
body.pb-authenticated .section:has(.card-settings) .col-lg-9 .text-muted,
body.pb-authenticated .section:has(.card-settings) .col-lg-9 small {
  color: var(--pb-t3) !important;
}

/* ---- Inputs ---- */
body.pb-authenticated .section:has(.card-settings) .form-control,
body.pb-authenticated .section:has(.card-settings) .custom-select,
body.pb-authenticated .section:has(.card-settings) textarea,
body.pb-authenticated .section:has(.card-settings) select {
  background: rgba(4, 7, 5, .55) !important;
  border: 1px solid rgba(88, 255, 72, .14) !important;
  color: var(--pb-text) !important;
  border-radius: 12px !important;
}
body.pb-authenticated .section:has(.card-settings) .form-control::placeholder { color: rgba(240, 240, 240, .40) !important; }
body.pb-authenticated .section:has(.card-settings) .form-control:focus,
body.pb-authenticated .section:has(.card-settings) .custom-select:focus,
body.pb-authenticated .section:has(.card-settings) textarea:focus {
  border-color: rgba(0, 200, 0, .45) !important;
  box-shadow: 0 0 0 1px rgba(0, 200, 0, .12) !important;
  outline: none !important;
}

/* =========================================================================
   PHASE 16 — Logged-out LEGAL PAGES (Privacy / Terms / Cookies)
   Shared template: resources/views/pages/show.blade.php (CMS-driven content).
   All selectors are scoped under .pb-legal-page so the feed, profiles, admin,
   settings, and other CMS pages are never affected. CSS-only, no backend.
   ========================================================================= */

.pb-legal-page {
  position: relative;
  background:
    radial-gradient(900px 460px at 50% -120px, rgba(0, 200, 0, .14), transparent 70%),
    radial-gradient(700px 520px at 85% 6%, rgba(0, 200, 0, .06), transparent 65%),
    #0a0d0a;
  padding: clamp(72px, 9vw, 116px) 18px clamp(72px, 10vw, 130px);
  overflow: hidden;
}

/* faint grid/vignette under the glow, matching the homepage's depth */
.pb-legal-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Hero / title ---- */
.pb-legal-hero {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto clamp(26px, 4vw, 44px);
  text-align: center;
}
.pb-legal-eyebrow {
  display: inline-block;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--pb-green, #00C800);
  margin-bottom: 14px;
  opacity: .9;
}
.pb-legal-title {
  margin: 0;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.08;
  font-size: clamp(30px, 5.2vw, 50px);
  text-shadow: 0 2px 26px rgba(0, 200, 0, .12);
}

/* ---- Glass content card ---- */
.pb-legal-wrap {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
}
.pb-legal-card {
  display: block;
  background: rgba(8, 14, 10, .60);
  border: 1px solid rgba(88, 255, 72, .10);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 24px 60px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(0, 0, 0, .15);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  padding: clamp(26px, 4.4vw, 56px) clamp(22px, 4.4vw, 60px);
}

/* ---- Legal document body (raw CMS HTML) ---- */
.pb-legal-content {
  color: rgba(238, 240, 238, .82);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .005em;
  word-break: break-word;
}
.pb-legal-content > *:first-child { margin-top: 0; }
.pb-legal-content > *:last-child { margin-bottom: 0; }

.pb-legal-content h1,
.pb-legal-content h2,
.pb-legal-content h3,
.pb-legal-content h4,
.pb-legal-content h5,
.pb-legal-content h6 {
  color: #fff;
  font-weight: 700;
  line-height: 1.3;
  margin: 2em 0 .7em;
  letter-spacing: -.005em;
}
.pb-legal-content h1 { font-size: clamp(22px, 3.2vw, 28px); }
.pb-legal-content h2 {
  font-size: clamp(19px, 2.6vw, 23px);
  padding-bottom: .45em;
  border-bottom: 1px solid rgba(88, 255, 72, .12);
}
.pb-legal-content h3 { font-size: clamp(17px, 2.1vw, 19px); color: rgba(255, 255, 255, .94); }
.pb-legal-content h4,
.pb-legal-content h5,
.pb-legal-content h6 { font-size: 16px; color: rgba(255, 255, 255, .90); }

.pb-legal-content p { margin: 0 0 1.1em; }

.pb-legal-content a {
  color: var(--pb-green, #00C800);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 200, 0, .28);
  transition: color .15s ease, border-color .15s ease;
}
.pb-legal-content a:hover {
  color: #5dff48;
  border-bottom-color: #5dff48;
}

.pb-legal-content strong,
.pb-legal-content b { color: #fff; font-weight: 700; }

.pb-legal-content ul,
.pb-legal-content ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}
.pb-legal-content li { margin: 0 0 .55em; padding-left: .2em; }
.pb-legal-content ul li::marker { color: var(--pb-green, #00C800); }
.pb-legal-content ol li::marker { color: rgba(0, 200, 0, .85); font-weight: 700; }

.pb-legal-content hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(88, 255, 72, .22), transparent);
  margin: 2em 0;
}

.pb-legal-content blockquote {
  margin: 1.4em 0;
  padding: .6em 1.2em;
  border-left: 3px solid var(--pb-green, #00C800);
  background: rgba(0, 200, 0, .05);
  border-radius: 0 10px 10px 0;
  color: rgba(238, 240, 238, .9);
}

.pb-legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 15px;
}
.pb-legal-content th,
.pb-legal-content td {
  border: 1px solid rgba(88, 255, 72, .12);
  padding: .6em .8em;
  text-align: left;
}
.pb-legal-content th { color: #fff; background: rgba(0, 200, 0, .07); font-weight: 700; }

.pb-legal-content img { max-width: 100%; height: auto; border-radius: 12px; }

/* ---- Responsive ---- */
@media (max-width: 575.98px) {
  .pb-legal-content { font-size: 15px; line-height: 1.75; }
  .pb-legal-card { border-radius: 18px; }
}

/* =========================================================================
   PHASE 16b — Logged-out LEGAL PAGES: navbar layering + footer fix
   The shared .playbooki-footer has NO active styling on these pages (its
   polished styles are scoped to home/auth, which both HIDE it), so it fell
   back to a raw stacked list with a full-resolution 2032x603 logo. These
   rules are scoped with body:has(.pb-legal-page) so ONLY the 3 legal pages
   are affected — homepage, auth, logged-in and admin are untouched.
   ========================================================================= */

/* ---- Navbar safety: keep the fixed logged-out nav above everything ---- */
body:has(.pb-legal-page) { overflow-x: hidden; }            /* kill any sideways scroll from stray wide children */
body:has(.pb-legal-page) .playbooki-nav { z-index: 99990 !important; }  /* stays on top of page graphics */
/* The legal hero/glow must never paint over the fixed navbar */
body:has(.pb-legal-page) .pb-legal-page,
body:has(.pb-legal-page) .pb-legal-page::before { z-index: 0; }
body:has(.pb-legal-page) .pb-legal-hero,
body:has(.pb-legal-page) .pb-legal-wrap { z-index: 1; }

/* ===================== Legal-page footer (polished) ===================== */
body:has(.pb-legal-page) .playbooki-footer {
  position: relative;
  z-index: 2;
  margin-top: 0;
  padding: clamp(40px, 5vw, 60px) 20px clamp(28px, 3.5vw, 40px);
  background:
    radial-gradient(700px 220px at 50% 0%, rgba(0, 200, 0, .06), transparent 70%),
    rgba(6, 10, 7, .92);
  border-top: 1px solid rgba(88, 255, 72, .12);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  text-align: center;
  overflow: hidden;
}

/* Logo + tagline */
body:has(.pb-legal-page) .playbooki-footer .flogo-wrap {
  margin: 0 auto 22px;
}
body:has(.pb-legal-page) .playbooki-footer .flogo {
  width: auto !important;
  height: 30px !important;
  max-width: 180px;
  object-fit: contain;
  opacity: .95;
}
body:has(.pb-legal-page) .playbooki-footer .ftag {
  margin-top: 8px;
  color: var(--pb-t3, rgba(170, 175, 170, .75));
  font-size: 13px;
  letter-spacing: .01em;
}

/* Social row */
body:has(.pb-legal-page) .playbooki-footer .fsocial {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 28px;
}
body:has(.pb-legal-page) .playbooki-footer .fsoc-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(88, 255, 72, .10);
  color: rgba(225, 228, 225, .8);
  font-size: 15px;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
body:has(.pb-legal-page) .playbooki-footer .fsoc-link:hover {
  color: var(--pb-green, #00C800);
  border-color: rgba(0, 200, 0, .38);
  background: rgba(0, 200, 0, .08);
}

/* Link columns */
body:has(.pb-legal-page) .playbooki-footer .fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px 24px;
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
body:has(.pb-legal-page) .playbooki-footer .fcol { min-width: 0; }
body:has(.pb-legal-page) .playbooki-footer .fhead {
  color: var(--pb-green, #00C800);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
body:has(.pb-legal-page) .playbooki-footer .fcol ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
body:has(.pb-legal-page) .playbooki-footer .fcol li { margin: 0 0 9px; }
body:has(.pb-legal-page) .playbooki-footer .fcol a,
body:has(.pb-legal-page) .playbooki-footer .flan-toggle {
  color: rgba(190, 195, 190, .78);
  font-size: 14px;
  text-decoration: none;
  transition: color .15s ease;
}
body:has(.pb-legal-page) .playbooki-footer .fcol a:hover,
body:has(.pb-legal-page) .playbooki-footer .flan-toggle:hover {
  color: var(--pb-green, #00C800);
}

/* Install button (if shown) */
body:has(.pb-legal-page) .playbooki-footer .btn-ghost {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(88, 255, 72, .12);
  color: rgba(220, 224, 220, .82);
  font-size: 13px;
  font-weight: 700;
}
body:has(.pb-legal-page) .playbooki-footer .btn-ghost:hover {
  color: var(--pb-green, #00C800);
  border-color: rgba(0, 200, 0, .3);
}

/* Copyright bar */
body:has(.pb-legal-page) .playbooki-footer .fcopy {
  max-width: 880px;
  margin: clamp(28px, 4vw, 40px) auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: var(--pb-t3, rgba(160, 165, 160, .7));
  font-size: 13px;
  text-align: center;
}

/* Dropdown menu (language) on dark footer */
body:has(.pb-legal-page) .playbooki-footer .dropdown-menu {
  background: rgba(10, 14, 11, .98);
  border: 1px solid rgba(88, 255, 72, .14);
}
body:has(.pb-legal-page) .playbooki-footer .dropdown-item {
  color: rgba(200, 205, 200, .82);
}
body:has(.pb-legal-page) .playbooki-footer .dropdown-item:hover,
body:has(.pb-legal-page) .playbooki-footer .dropdown-item.active {
  background: rgba(0, 200, 0, .12);
  color: #fff;
}

/* ---- Footer responsive ---- */
@media (max-width: 575.98px) {
  body:has(.pb-legal-page) .playbooki-footer .fgrid {
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: center;
    max-width: 360px;
  }
}

/* ─────────────────────────────────────────────────────────────
   PHASE 15b — Logged-out homepage CTA button polish.
   Scoped to .pb-hero-actions only (hero + bottom CTA box).
   Fixes: Bootstrap a:hover underline/blue-green text bleed,
   green-button opacity fade on hover. Adds the navbar .btn-cta
   shimmer sweep (same 105deg gradient) to all 4 CTA buttons.
   No size/shape/layout changes — hover uses existing translateY
   transform only.
   ───────────────────────────────────────────────────────────── */
.pb-hero-actions .pb-btn,
.pb-hero-actions .pb-btn:hover,
.pb-hero-actions .pb-btn:focus,
.pb-hero-actions .pb-btn:active {
  text-decoration: none !important;
}

.pb-hero-actions .pb-btn {
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep — mirrors navbar .btn-cta::after in playbooki.css */
.pb-hero-actions .pb-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
  transition: background-position .5s ease;
  pointer-events: none;
}

.pb-hero-actions .pb-btn:hover::after,
.pb-hero-actions .pb-btn:focus-visible::after {
  background-position: -200% 0;
}

/* Green CTAs — no opacity fade, white text on hover, deeper green
   under it so the white pops, soft green glow */
.pb-hero-actions .pb-btn-green:hover,
.pb-hero-actions .pb-btn-green:focus {
  opacity: 1;
  color: #fff;
  background: #00a800;
  box-shadow: 0 0 26px rgba(0, 200, 0, .35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* Outline CTAs — soft gray by default (existing), brighten to white
   on hover with a crisper glass edge and faint green underglow */
.pb-hero-actions .pb-btn-outline:hover,
.pb-hero-actions .pb-btn-outline:focus {
  color: #fff;
  border-color: rgba(255, 255, 255, .32);
  background: rgba(26, 28, 26, .78);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine), 0 0 18px rgba(0, 200, 0, .10);
}

/* ─────────────────────────────────────────────────────────────
   PHASE 16 — Logged-out /creators hover polish.
   Scoped to .pb-directory-actions (Join now button) and
   .pb-directory-results (Booki tiles) only. Mirrors the
   PHASE 15b CTA shimmer sweep. No size/layout changes.
   ───────────────────────────────────────────────────────────── */

/* Join now — kill Bootstrap a:hover underline */
.pb-directory-actions .pb-btn-outline,
.pb-directory-actions .pb-btn-outline:hover,
.pb-directory-actions .pb-btn-outline:focus,
.pb-directory-actions .pb-btn-outline:active {
  text-decoration: none !important;
}

.pb-directory-actions .pb-btn-outline {
  position: relative;
  overflow: hidden;
  transition: color .25s ease, border-color .25s ease,
              background .25s ease, box-shadow .25s ease;
}

/* Shimmer sweep — same 105deg gradient as PHASE 15b CTAs */
.pb-directory-actions .pb-btn-outline::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
  transition: background-position .5s ease;
  pointer-events: none;
}

.pb-directory-actions .pb-btn-outline:hover::after,
.pb-directory-actions .pb-btn-outline:focus-visible::after {
  background-position: -200% 0;
}

/* Premium hover — white text, crisper glass edge, faint green
   underglow (mirrors .pb-hero-actions .pb-btn-outline:hover) */
.pb-directory-actions .pb-btn-outline:hover,
.pb-directory-actions .pb-btn-outline:focus {
  color: #fff;
  border-color: rgba(255, 255, 255, .32);
  background: rgba(26, 28, 26, .78);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine), 0 0 18px rgba(0, 200, 0, .10);
}

/* Booki tiles — no underline anywhere in the card, clickable cursor */
.pb-directory-results .pb-creator,
.pb-directory-results .pb-creator:hover,
.pb-directory-results .pb-creator *,
.pb-directory-results .pb-creator:hover * {
  text-decoration: none !important;
}

.pb-directory-results .pb-creator {
  cursor: pointer;
}

/* Tile shimmer: retask the ambient .pb-shimmer::after into a
   hover-triggered, green-tinted sweep — directory tiles only.
   ::before stays the corner triangle; no layout impact. */
.pb-directory-results .pb-creator.pb-shimmer::after {
  background: linear-gradient(105deg, transparent 30%, rgba(140,255,140,.05) 45%, rgba(255,255,255,.06) 52%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
  animation: none;
  transition: background-position .8s ease;
}

.pb-directory-results .pb-creator.pb-shimmer:hover::after {
  background-position: -200% 0;
}

/* Slightly richer (still soft) border glow on hover */
.pb-directory-results .pb-creator:hover {
  border-color: rgba(0, 200, 0, .32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 16px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(0,200,0,.09), 0 0 26px rgba(0,200,0,.09);
}

/* ─────────────────────────────────────────────────────────────
   PHASE 16b — /creators tile bevel + stats row polish.
   Scoped to .pb-directory-results only.

   Bevel: restore the .pb-step "How it works" clipped top-right
   corner (the directory block had reset clip-path to none, so
   the green ::before triangle sat on a square corner). clip-path
   clips outer box-shadows, so depth + hover glow move to
   drop-shadow filters, which follow the clipped shape.
   ───────────────────────────────────────────────────────────── */
.pb-directory-results .pb-creator {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .30));
  transition: border-color .25s ease, filter .25s ease;
}

.pb-directory-results .pb-creator:hover {
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .38)) drop-shadow(0 0 10px rgba(0, 200, 0, .14));
}

/* Green accent tucked into the clipped corner — mirrors .pb-step::before */
.pb-directory-results .pb-creator::before {
  top: -1px;
  right: -1px;
  border-width: 0 20px 20px 0;
  border-color: transparent rgba(0, 200, 0, .35) transparent transparent;
  filter: none;
}

/* ─────────────────────────────────────────────────────────────
   Stats row — echo the homepage .pb-proof-bar language: dark
   glass mini-panels, green number on top, muted icon below,
   centered, evenly spaced. Same 40px box height (no card
   growth); stacking frees the width that cramped "53.4k ♥".
   ───────────────────────────────────────────────────────────── */
.pb-directory-results .pb-creator-stats {
  gap: 8px;
}

.pb-directory-results .pb-creator-stats span {
  height: 40px;
  flex-direction: column;
  gap: 3px;
  padding: 5px 4px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.018) 60%),
    rgba(10, 10, 10, .45);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.pb-directory-results .pb-creator-stats strong {
  font-size: 14px;
  font-weight: 750;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-directory-results .pb-creator-stats i {
  font-size: 10px;
  color: rgba(240, 240, 240, .30);
}

/* ─────────────────────────────────────────────────────────────
   PHASE 16c — /creators stats: one continuous bar.
   Replaces the 3 detached mini boxes with a single glass panel
   split into 3 cells by vertical dividers — the homepage
   .pb-proof-bar language scaled down into the tile. Same 40px
   height and data; scoped to .pb-directory-results only.
   ───────────────────────────────────────────────────────────── */
.pb-directory-results .pb-creator-stats {
  display: flex;
  gap: 0;
  background:
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.018) 60%),
    rgba(10, 10, 10, .45);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  border-radius: 6px;
  clip-path: none; /* 16d: soft rounded rectangle, no bevel on the bar */
  overflow: hidden; /* keep dividers/cells inside the rounded corners */
}

.pb-directory-results .pb-creator-stats span {
  flex: 1 1 0;
  height: 38px; /* + bar borders ≈ 40px total, same as before */
  padding: 4px;
  flex-direction: column-reverse; /* 16d: markup is number-then-icon → icon renders on top */
  background: none;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .07);
  box-shadow: none;
  clip-path: none;
}

.pb-directory-results .pb-creator-stats span:last-child {
  border-right: 0;
}

/* ─────────────────────────────────────────────────────────────
   PHASE 16e — /creators price badges + circular avatars.
   Scoped to .pb-directory-results only.
   ───────────────────────────────────────────────────────────── */

/* Price badges: base .pb-price-pill clips corners with !important —
   neutralize it here and use a soft rounded rectangle instead. */
.pb-directory-results .pb-price-pill {
  clip-path: none !important;
  border-radius: 6px;
}

/* Avatars: keep the base .pb-avatar clipped-square look (16e
   briefly made these circles; reverted by user request). */

/* ─────────────────────────────────────────────────────────────
   PHASE 16f — /creators sidebar: Filter by + Categories widgets.
   Scoped to .pb-directory-sidebar only (both widgets live in it).
   ───────────────────────────────────────────────────────────── */

/* No underline on hover/focus/active (Bootstrap a:hover adds it) */
.pb-directory-sidebar .pb-filter-link,
.pb-directory-sidebar .pb-filter-link:hover,
.pb-directory-sidebar .pb-filter-link:focus,
.pb-directory-sidebar .pb-filter-link:active,
.pb-directory-sidebar .pb-filter-link.is-active {
  text-decoration: none !important;
}

/* Item boxes: sharp angular rectangles — drop the diagonal clip */
.pb-directory-sidebar .pb-filter-link {
  clip-path: none;
  border-radius: 0;
}

/* Category icons: muted by default, Playbooki green on hover.
   Icons are <img>, so the green is a filter tint (brightness(0)
   flattens the art, then the chain dials in ~#00c800). */
.pb-directory-sidebar .pb-filter-icon {
  transition: filter .15s ease, opacity .15s ease;
}

.pb-directory-sidebar .pb-filter-link:hover .pb-filter-icon,
.pb-directory-sidebar .pb-filter-link.is-active .pb-filter-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(97%) saturate(2700%) hue-rotate(95deg) brightness(103%) contrast(102%);
}

/* ─────────────────────────────────────────────────────────────
   PHASE 16h — /creators + /category/*: fixed navbar buried.
   playbooki.css sets `body > * { position: relative; z-index: 1 }`,
   so <header> (which contains the fixed .playbooki-nav) and <main>
   share z:1 and the later <main> paints on top of the nav. Raise
   the header on directory pages only: above main (1), below
   Bootstrap modals (1040+) and the body-level login modal.
   ───────────────────────────────────────────────────────────── */
body:has(.pb-directory-page) > header {
  z-index: 1030;
}

/* ─────────────────────────────────────────────────────────────
   PHASE 18 — Logged-in compact footer (settings pages).
   includes/footer.blade.php renders <footer class="playbooki-footer
   pb-compact-footer"> on every authenticated page, but its polished
   styles were only ever scoped to the legal pages (PHASE 16b), so on
   /settings/subscription (and every other settings page) it fell back
   to a raw stacked list with the full-resolution 2032x603 logo.
   These rules mirror the PHASE 16b legal footer, scoped to
   body.pb-authenticated .pb-compact-footer only — logged-out pages,
   home, auth and legal pages are untouched. CSS only: no Blade,
   markup, form or payment logic changed.
   ───────────────────────────────────────────────────────────── */
body.pb-authenticated .playbooki-footer.pb-compact-footer {
  position: relative;
  z-index: 2;
  margin-top: clamp(36px, 5vw, 64px);
  padding: clamp(34px, 4.5vw, 52px) 20px clamp(24px, 3vw, 36px);
  background:
    radial-gradient(700px 220px at 50% 0%, rgba(0, 200, 0, .06), transparent 70%),
    rgba(6, 10, 7, .92);
  border-top: 1px solid rgba(88, 255, 72, .12);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  text-align: center;
  overflow: hidden;
}

/* Logo + tagline */
body.pb-authenticated .playbooki-footer.pb-compact-footer .flogo-wrap {
  margin: 0 auto 20px;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .flogo {
  width: auto !important;
  height: 28px !important;
  max-width: 180px;
  object-fit: contain;
  opacity: .95;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .ftag {
  margin-top: 8px;
  color: var(--pb-t3, rgba(170, 175, 170, .75));
  font-size: 13px;
  letter-spacing: .01em;
}

/* Social row */
body.pb-authenticated .playbooki-footer.pb-compact-footer .fsocial {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 26px;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .fsoc-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(88, 255, 72, .10);
  color: rgba(225, 228, 225, .8);
  font-size: 15px;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .fsoc-link:hover {
  color: var(--pb-green, #00C800);
  border-color: rgba(0, 200, 0, .38);
  background: rgba(0, 200, 0, .08);
}

/* Link columns */
body.pb-authenticated .playbooki-footer.pb-compact-footer .fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px 24px;
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .fcol { min-width: 0; }
body.pb-authenticated .playbooki-footer.pb-compact-footer .fhead {
  color: var(--pb-green, #00C800);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .fcol ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .fcol li { margin: 0 0 9px; }
body.pb-authenticated .playbooki-footer.pb-compact-footer .fcol a,
body.pb-authenticated .playbooki-footer.pb-compact-footer .flan-toggle {
  color: rgba(190, 195, 190, .78);
  font-size: 14px;
  text-decoration: none;
  transition: color .15s ease;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .fcol a:hover,
body.pb-authenticated .playbooki-footer.pb-compact-footer .flan-toggle:hover {
  color: var(--pb-green, #00C800);
  text-decoration: none;
}

/* Install button (if shown) */
body.pb-authenticated .playbooki-footer.pb-compact-footer .btn-ghost {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(88, 255, 72, .12);
  color: rgba(220, 224, 220, .82);
  font-size: 13px;
  font-weight: 700;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .btn-ghost:hover {
  color: var(--pb-green, #00C800);
  border-color: rgba(0, 200, 0, .3);
}

/* Copyright bar */
body.pb-authenticated .playbooki-footer.pb-compact-footer .fcopy {
  max-width: 880px;
  margin: clamp(24px, 3.5vw, 36px) auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: var(--pb-t3, rgba(160, 165, 160, .7));
  font-size: 13px;
  text-align: center;
}

/* Language dropdown on dark footer (rare when logged in, but safe) */
body.pb-authenticated .playbooki-footer.pb-compact-footer .dropdown-menu {
  background: rgba(10, 14, 11, .98);
  border: 1px solid rgba(88, 255, 72, .14);
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .dropdown-item {
  color: rgba(200, 205, 200, .82);
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .dropdown-item:hover,
body.pb-authenticated .playbooki-footer.pb-compact-footer .dropdown-item.active {
  background: rgba(0, 200, 0, .12);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────
   PHASE 18B — Marketing & Promotions settings block.
   Scoped to .pb-promotions on /settings/subscription only.
   The glass cards themselves inherit the existing
   `.section:has(.card-settings) .col-lg-9 .card` styling;
   these rules only add headings/notes/disabled polish.
   ───────────────────────────────────────────────────────────── */
.pb-promotions .pb-promo-title {
  color: #f0f0f0;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.pb-promotions .pb-promo-title i { color: var(--pb-green, #00C800); }

.pb-promotions .pb-promo-head {
  color: var(--pb-green, #00C800);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.pb-promotions .pb-promo-note {
  color: rgba(170, 175, 170, .75);
  font-size: 13px;
  line-height: 1.5;
}

.pb-promotions .pb-promo-optional {
  color: rgba(170, 175, 170, .6);
  font-weight: 400;
  text-transform: none;
}

/* % suffix chip on discount inputs — match the $ prefix chips */
.pb-promotions .input-group-text {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(240, 240, 240, .7);
}

/* Native date picker indicator is invisible on dark glass */
.pb-promotions input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.6);
  cursor: pointer;
}

/* Locked (Free account / no paid plan): dim the whole block */
.pb-promotions fieldset:disabled {
  opacity: .45;
  pointer-events: none;
}
/* ============================================================
   PHASE 18C.6 — "Subs on Trial" private creator management page
   Scoped to .pb-trials-page only. Dark glass + green accents.
   ============================================================ */
.pb-trials-page .pb-trials-help {
  color: #9aa4ad;
  font-size: .9rem;
  margin-bottom: 1rem;
}

.pb-trials-page .pb-trials-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.pb-trials-page .pb-trials-filter {
  display: inline-block;
  padding: .38rem .85rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: #c7ced4;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  text-decoration: none;
  transition: all .15s ease;
}
.pb-trials-page .pb-trials-filter:hover {
  border-color: rgba(0, 200, 0, .5);
  color: #fff;
}
.pb-trials-page .pb-trials-filter.is-active {
  color: #00c800;
  border-color: rgba(0, 200, 0, .65);
  background: rgba(0, 200, 0, .10);
  box-shadow: 0 0 10px rgba(0, 200, 0, .12);
}

.pb-trials-page .pb-trials-list {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.pb-trials-page .pb-trial-card {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 24, 22, .85), rgba(12, 15, 14, .9));
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .15s ease, transform .15s ease;
}
.pb-trials-page .pb-trial-card:hover {
  border-color: rgba(0, 200, 0, .35);
}

.pb-trials-page .pb-trial-user {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
}
.pb-trials-page .pb-trial-userlink {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: #fff;
  min-width: 0;
}
.pb-trials-page .pb-trial-avatar {
  object-fit: cover;
  border: 1px solid rgba(0, 200, 0, .35);
  flex: 0 0 auto;
}
.pb-trials-page .pb-trial-name {
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-trials-page .pb-trial-userlink:hover .pb-trial-name { color: #00c800; }

.pb-trials-page .pb-trial-status {
  margin-left: auto;
  flex: 0 0 auto;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.pb-trials-page .pb-trial-status.is-trialing {
  color: #00c800;
  background: rgba(0, 200, 0, .12);
  border: 1px solid rgba(0, 200, 0, .4);
}
.pb-trials-page .pb-trial-status.is-ending {
  color: #ffb020;
  background: rgba(255, 176, 32, .12);
  border: 1px solid rgba(255, 176, 32, .45);
}

.pb-trials-page .pb-trial-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .85rem;
}
.pb-trials-page .pb-trial-chip {
  display: inline-flex;
  align-items: center;
  padding: .28rem .65rem;
  border-radius: 8px;
  font-size: .78rem;
  color: #c7ced4;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
}
.pb-trials-page .pb-trial-gw-stripe { color: #a5b4ff; border-color: rgba(120, 130, 255, .3); }
.pb-trials-page .pb-trial-gw-wallet { color: #66d9a0; border-color: rgba(0, 200, 0, .3); }
.pb-trials-page .pb-trial-code {
  color: #00c800;
  font-weight: 700;
  letter-spacing: .04em;
  background: rgba(0, 200, 0, .08);
  border-color: rgba(0, 200, 0, .35);
}

.pb-trials-page .pb-trial-dates {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.pb-trials-page .pb-trial-date { display: flex; flex-direction: column; }
.pb-trials-page .pb-trial-date-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #7d868e;
}
.pb-trials-page .pb-trial-date-val { font-size: .88rem; color: #e6eaed; font-weight: 600; }
.pb-trials-page .pb-trial-daysleft {
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}
.pb-trials-page .pb-trial-days-num {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  color: #00c800;
}
.pb-trials-page .pb-trial-days-lbl {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #7d868e;
}

/* Empty state */
.pb-trials-page .pb-trials-empty {
  text-align: center;
  padding: 3.5rem 1rem;
  background: linear-gradient(180deg, rgba(20, 24, 22, .6), rgba(12, 15, 14, .7));
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 16px;
}
.pb-trials-page .pb-trials-empty-icon {
  font-size: 2.6rem;
  color: rgba(0, 200, 0, .55);
  margin-bottom: .75rem;
}
.pb-trials-page .pb-trials-empty-title { color: #fff; font-weight: 700; margin-bottom: .35rem; }
.pb-trials-page .pb-trials-empty-sub { color: #9aa4ad; font-size: .9rem; margin: 0; }

/* Mobile */
@media (max-width: 575.98px) {
  .pb-trials-page .pb-trial-status { margin-left: 0; }
  .pb-trials-page .pb-trial-user { flex-wrap: wrap; }
  .pb-trials-page .pb-trial-dates { gap: .85rem 1.1rem; }
  .pb-trials-page .pb-trial-daysleft { margin-left: 0; }
}

/* ============================================================
   PHASE 18D — Public promo display: profile banner, card badges,
   crossed-out pricing, countdown, and /creators offer filters.
   ============================================================ */

/* --- Profile public offer banner --- */
.pb-public-offer {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  margin: 0 auto .85rem;
  padding: .7rem 1.1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,200,0,.10), rgba(0,200,0,.03));
  border: 1px solid rgba(0,200,0,.35);
  box-shadow: 0 0 18px rgba(0,200,0,.10);
  max-width: 420px;
}
.pb-public-offer--trial {
  background: linear-gradient(180deg, rgba(0,200,0,.12), rgba(0,120,255,.04));
}
.pb-public-offer-top { display: flex; align-items: center; gap: .55rem; }
.pb-public-offer .pb-promo-price {
  display: flex; align-items: baseline; gap: .5rem; justify-content: center;
}
.pb-public-offer .pb-promo-original {
  color: #8a929a; text-decoration: line-through; font-size: 1rem;
}
.pb-public-offer .pb-promo-discounted {
  color: #00e000; font-weight: 800; font-size: 1.5rem; letter-spacing: -.01em;
}
.pb-public-offer .pb-promo-per { color: #aab2b9; font-size: .85rem; }
.pb-public-offer .pb-promo-card-note {
  color: #b8c0c7; font-size: .78rem; text-align: center; line-height: 1.35;
}

/* --- Shared badge --- */
.pb-promo-badge {
  display: inline-block;
  padding: .28rem .6rem;
  border-radius: 8px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #001a00;
  background: linear-gradient(180deg,#00ff5a,#00c800);
  box-shadow: 0 0 12px rgba(0,200,0,.35);
  white-space: nowrap;
}
/* PHASE 18D.X.2 — trial badges join the green family (blue removed sitewide). */
.pb-promo-badge--trial {
  color: #001a00;
  background: linear-gradient(180deg,#00ff5a,#00c800);
  box-shadow: 0 0 12px rgba(0,200,0,.35);
}
.pb-promo-countdown {
  display: inline-flex; align-items: center;
  padding: .24rem .55rem;
  border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  color: #ffb020;
  background: rgba(255,176,32,.12);
  border: 1px solid rgba(255,176,32,.4);
  white-space: nowrap;
}

/* --- Creator card badge (listing-creators) ---
   PHASE 22B ROOT CAUSE: the rule below intends `position: absolute`, but two
   earlier stacking rules also match this element and BEAT it on specificity:
     .pb-directory-results .pb-creator > *   (0,2,0)
     .pb-shimmer > *                         (0,1,0 + later source order)
   both declaring `position: relative; z-index: 1`. So the badge silently
   stayed in normal flow as the first child of the card column, pushing the
   avatar/name/bio/stats down ~24px on badged cards only — which is why one
   card's badge appeared to knock the whole row out of alignment. The
   `top/right` values then applied as *relative* nudges, which is what made it
   look randomly placed next to the name.
   The card markup no longer renders .pb-card-promo (the offer moved into the
   footer), but the specificity is corrected here so the class behaves as
   intended if it is ever reused. */
.pb-creator { position: relative; }
.pb-directory-results .pb-creator > .pb-card-promo,
.pb-creator.pb-card > .pb-card-promo,
.pb-card-promo {
  position: absolute; top: 10px; right: 10px;
  display: flex; flex-direction: column; align-items: flex-end; gap: .3rem;
  z-index: 2;
}
/* PHASE 18D.X.2 — on cards the badge is a premium dark-glass tag, not a
   solid "coupon sticker". Applies to BOTH discount and trial variants. */
.pb-card-promo .pb-promo-badge,
.pb-card-promo .pb-promo-badge--trial {
  font-size: .64rem; padding: .22rem .55rem;
  color: #9dffa0;
  background: rgba(6, 20, 8, .72);
  border: 1px solid rgba(0, 200, 0, .45);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 10px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 0 8px rgba(0,200,0,.25);
}
.pb-card-promo .pb-promo-badge-ends {
  font-size: .6rem; font-weight: 700; color: #ffb020;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,176,32,.5);
  padding: .12rem .4rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}

/* --- Crossed price pill on cards --- */
.pb-price-pill.pb-price-offer {
  display: inline-flex; align-items: baseline; gap: .35rem;
}
.pb-price-pill.pb-price-offer .pb-promo-original {
  color: #8a929a; text-decoration: line-through; font-size: .78rem; font-weight: 600;
}
.pb-price-pill.pb-price-offer .pb-promo-discounted { color: #00e000; font-weight: 800; }
.pb-price-pill.pb-price-offer .pb-promo-original-sm { color: #aab2b9; font-size: .72rem; }

/* --- Explore right-rail widget badge --- */
.pb-explore-promo-badge {
  top: 6px; right: 6px; left: auto;
  font-size: .58rem; font-weight: 800; letter-spacing: .03em;
  color: #001a00; background: linear-gradient(180deg,#00ff5a,#00c800);
  box-shadow: 0 0 8px rgba(0,200,0,.4); z-index: 3;
}
.pb-explore-promo-badge--trial { color:#001a00; background: linear-gradient(180deg,#00ff5a,#00c800); } /* 18D.X.2: green, not blue */

/* --- Offer filters in the /creators sidebar --- */
.pb-filter-sublabel {
  display: block; margin: .6rem 0 .2rem; padding-left: .1rem;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #7d868e;
}
.pb-creator-filter-promo.is-active { color:#00c800; }

/* PHASE 18D — card offer pill: stack so trial/discount text never truncates */
.pb-creator-foot .pb-price-pill.pb-price-offer {
  flex-direction: column; align-items: flex-start; gap: .05rem;
  white-space: nowrap; max-width: none; overflow: visible;
  line-height: 1.15; padding: .28rem .55rem;
}
.pb-price-pill.pb-price-offer .pb-promo-original-sm { font-size: .66rem; }

/* ============================================================
   PHASE 18D.X — Explore offer polish (display only)
   1) /creators offer cards: boxed pill replaced by a clean
      typographic price block + offer-focused CTA.
   2) Logged-in Explore Bookis widget: offer pills restyled into
      the FREE-pill glass family.
   No pricing/promo/checkout logic involved.
   ============================================================ */

/* Neutralize the legacy `.pb-creator-foot span` banding (the faint strip
   that painted behind each price line — the "glitch"). */
.pb-creator-foot .pb-offer-price,
.pb-creator-foot .pb-offer-price span,
.pb-creator-foot .pb-offer-price s {
  background: none;
  padding: 0;
  clip-path: none;
}

/* Offer price block — transparent, typographic, no box fighting the CTA. */
.pb-creator-foot .pb-offer-price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  line-height: 1.15;
  white-space: nowrap;
}
.pb-creator-foot .pb-offer-price--discount {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}
.pb-offer-price .pb-offer-old {
  color: #78818a;
  font-size: 11px;
  font-weight: 600;
  text-decoration: line-through;
}
.pb-offer-price .pb-offer-new {
  color: #00e000;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 0 12px rgba(0,200,0,.22);
}
.pb-offer-price .pb-offer-then {
  color: #9aa4ad;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* PHASE 22B — countdown moved out of the removed top-right pill and into the
   footer offer stack, so no offer information was lost. Amber keeps it read
   as urgency rather than price. It sits on its own line in both variants. */
/* The discount block is a baseline row ("$26.99  $21.59/mo"). At the 239px
   card width real two-price strings don't fit beside the CTA and were
   overrunning "Claim Offer →". Allow it to wrap: short prices still share one
   baseline, longer ones stack instead of colliding, and the countdown always
   takes its own line. */
.pb-creator-foot .pb-offer-price--discount {
  flex-wrap: wrap;
}
.pb-offer-price .pb-offer-ends {
  flex: 0 0 100%;
  margin-top: 1px;
  color: #ffb020;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Offer CTA replaces "Go to Page →" on offer cards. Same family as
   .pb-card-cta, so the existing card-hover brighten applies unchanged. */
.pb-creator-foot .pb-card-cta.pb-offer-cta {
  text-transform: uppercase;
  font-size: 10.5px !important;
  letter-spacing: .05em;
}

/* --- Logged-in Explore Bookis widget: offer pills in the FREE-pill family
   (glass pill, vertically centred in the info band, no loud gradient/glow). */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-promo-badge {
  top: 50%;
  right: 12px;
  bottom: auto;
  left: auto;
  transform: translateY(-50%);
  z-index: 3;
  color: #b6ffac;
  background: rgba(0, 200, 0, .16);
  border: 1px solid rgba(0, 200, 0, .45);
  border-radius: 999px !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: none;
  white-space: nowrap;
}
/* 18D.X.2 — trial pill uses the SAME green glass as FREE/discount; the
   label text is the differentiator (no blue anywhere). */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-promo-badge--trial {
  color: #b6ffac;
  background: rgba(0, 200, 0, .16);
  border-color: rgba(0, 200, 0, .45);
}
/* Reserve room so names never slide under the pill (mirrors the FREE rule). */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-info:has(.pb-explore-promo-badge) .media-body {
  padding-right: 84px;
}

/* ==================================================================
   PHASE 23 — INDIVIDUAL POST DETAIL PAGE  (/{username}/post/{id})
   ------------------------------------------------------------------
   The detail page renders the SAME partial as the feed
   (resources/views/includes/updates.blade.php), but its Blade view
   (users/post-detail.blade.php) never loaded this stylesheet, so every
   Playbooki 2.0 rule above — which is scoped to
   `body.pb-authenticated .wrap-post ...` — was missing and the page fell
   back to raw Bootstrap/Sponzy. Loading the stylesheet fixes ~90% of it
   (card glass, header, media, action row, comment composer, GIF/emoji
   rail). This block only handles what is specific to a single-post page:
   page shell, back link, centred column, popup stacking, and mobile.

   CSS-only. No markup/JS hooks, no payment/subscription/promo/tip code.
   ================================================================== */

/* Page shell — same soft green radial wash used by the explore/feed pages,
   so the detail page sits on the identical near-black background. */
.pb-post-detail-page {
  background:
    radial-gradient(circle at 18% 14%, rgba(0,200,0,.08), transparent 28%),
    radial-gradient(circle at 84% 22%, rgba(0,200,0,.055), transparent 24%),
    var(--pb-bg);
  color: var(--pb-text);
  font-family: var(--pb-fb);
  padding-bottom: 56px;
}

/* Give the page room at the bottom so a GIF/emoji popup opening downward
   from the comment composer is never cut off by the end of the document. */
body.pb-authenticated .pb-post-detail-page {
  min-height: calc(100vh - 62px);
}

/* ---- Back-to-creator breadcrumb -------------------------------- */
body.pb-authenticated .pb-post-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 7px 14px 7px 11px;
  color: var(--pb-t2);
  background: rgba(8, 14, 10, .58);
  border: 1px solid rgba(88, 255, 72, .10);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none !important;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

body.pb-authenticated .pb-post-detail-back i {
  font-size: 14px;
  line-height: 1;
  color: var(--pb-green);
  transition: transform .2s ease;
}

body.pb-authenticated .pb-post-detail-back:hover {
  color: var(--pb-text);
  background: rgba(0, 200, 0, .10);
  border-color: rgba(0, 200, 0, .26);
}

body.pb-authenticated .pb-post-detail-back:hover i {
  transform: translateX(-2px);
}

body.pb-authenticated .pb-post-detail-back:focus-visible {
  outline: 2px solid var(--pb-green);
  outline-offset: 2px;
}

/* ---- Single-post column ---------------------------------------- */
/* The feed column is col-md-6 inside a 3-column grid; the detail page has
   no left rail, so cap the reading width to keep the card the same size
   as a feed card instead of stretching it across col-md-8. */
body.pb-authenticated .pb-post-detail-main {
  max-width: 640px;
}

/* The single card carries the page's whole weight — drop the feed's
   inter-card bottom margin and keep overflow visible so the comment
   composer popups are never clipped by the rounded card. */
body.pb-authenticated .pb-post-detail-single > .card:last-child,
body.pb-authenticated .pb-post-detail-single > .card-updates:last-child {
  margin-bottom: 0 !important;
}

body.pb-authenticated .pb-post-detail-single,
body.pb-authenticated .pb-post-detail-single .card,
body.pb-authenticated .pb-post-detail-single .card-updates,
body.pb-authenticated .pb-post-detail-single .card-footer {
  overflow: visible !important;
}

/* Feed parity: the feed raises the card that owns an open comment popup so
   it paints above the following cards. That rule is keyed on `.grid-updates`,
   which the single-post page does not render — mirror it here. */
body.pb-authenticated .pb-post-detail-single:has(.comments-form .dropdown-menu.show) {
  position: relative;
  z-index: 5;
}

body.pb-authenticated .pb-post-detail-single .card-updates:has(.comments-form .dropdown-menu.show),
body.pb-authenticated .pb-post-detail-single .card:has(.comments-form .dropdown-menu.show) {
  position: relative;
  z-index: 5;
}

/* ---- GIF / sticker / emoji buttons ----------------------------- */
/* app-functions.js removes the .triggerGif / .triggerSticker class from the
   button after its first successful fetch (so the list is only loaded once).
   The feed's button styling above is keyed on those classes, so after one use
   the button lost its 30px circular target. Re-apply the same treatment via
   the structural selector, which never changes. Layout only — the JS hooks,
   ids, data-attributes and the Bootstrap toggle are untouched. */
body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute > .dropdown > span {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  flex: 0 0 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  transform: none !important;
  outline: none !important;
  color: var(--pb-t2);
  cursor: pointer;
  pointer-events: auto;
  z-index: 7;
  transition: background-color .2s ease, box-shadow .2s ease;
}

body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute > .dropdown > span > i {
  font-size: 17px !important;
  line-height: 1;
}

body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute > .dropdown > span:hover {
  color: var(--pb-green);
  background-color: rgba(0, 200, 0, .10);
  box-shadow: 0 0 0 1px rgba(0, 200, 0, .18), 0 0 10px rgba(0, 200, 0, .12);
}

body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute > .dropdown.show > span,
body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute > .dropdown > span[aria-expanded="true"] {
  color: var(--pb-green) !important;
  background-color: rgba(0, 200, 0, .14) !important;
}

/* ---- GIF / sticker / emoji pickers ----------------------------- */
/* On a single-post page the composer is the LAST thing in the document, so
   Popper had nowhere to flip to and the picker hung past the bottom of the
   viewport. Pin all three pickers above the composer pill, right-aligned to
   their button, with their own scroll. Scoped to .pb-post-detail-main so the
   feed's (already working) picker placement is untouched. */
body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute .dropdown-menu {
  position: absolute !important;
  inset: auto 0 calc(100% + 14px) auto !important;   /* above the icon rail */
  transform: none !important;
  margin: 0 !important;
  max-height: min(300px, 44vh) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Hidden "load more posts" skeleton from the shared partial: never on a
   single-post page (it can add a stray empty card / extra scroll). */
body.pb-authenticated .pb-post-detail-single .loadMoreSpin {
  display: none !important;
}

body.pb-authenticated .pb-post-detail-empty {
  padding: 34px 22px;
  color: var(--pb-t2);
  text-align: center;
  background: rgba(8, 14, 10, .62);
  border: 1px solid rgba(88, 255, 72, .08);
  border-radius: 22px;
}

/* ---- Right rail ------------------------------------------------ */
/* Match the feed: sticky under the fixed navbar, never overlapping the
   footer, and hidden below the lg breakpoint (mobile gets the post only). */
body.pb-authenticated .pb-post-detail-aside .pb-explore-sticky {
  top: 86px;
  z-index: 10 !important;
}

/* ---- Mobile ---------------------------------------------------- */
@media (max-width: 991.98px) {
  body.pb-authenticated .pb-post-detail-main {
    max-width: 100%;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.pb-authenticated .pb-post-detail-page,
  body.pb-authenticated .pb-post-detail-page .container {
    overflow-x: clip;           /* no horizontal scroll from the glass cards */
  }

  body.pb-authenticated .pb-post-detail-aside {
    padding-top: 8px;
  }

  body.pb-authenticated .pb-post-detail-aside .pb-explore-sticky {
    position: static !important;  /* stop the rail sticking over the footer */
  }

  body.pb-authenticated .pb-post-detail-back {
    margin-top: 4px;
  }
}

/* Comment tool rail: on touch screens give the GIF / sticker / emoji
   buttons a 34px target and keep them centred in the composer pill. */
@media (max-width: 575.98px) {
  body.pb-authenticated .pb-post-detail-main .comments-form .inputComment {
    padding-right: 112px !important;
  }

  body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute {
    gap: 4px;
  }

  /* Popups are a fixed 350px, right-anchored to their own 30px button, so on a
     narrow viewport the GIF/sticker popups ran off the LEFT edge (the GIF
     button is ~64px further left than the emoji one). Drop the per-button
     positioning context so all three popups anchor to the icon RAIL — i.e. the
     right edge of the composer pill — and clamp the width to fit the screen.
     Layout of the buttons themselves is untouched (they stay flex 30px slots). */
  body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute > .dropdown {
    position: static !important;
  }

  body.pb-authenticated .pb-post-detail-main .comments-form .dropdown-menu {
    max-width: calc(100vw - 60px) !important;
    min-width: 0 !important;
  }
}

/* ==================================================================
   PHASE 23B — LOCKED / PAYWALLED CONTENT PANEL  (universal)
   ------------------------------------------------------------------
   The locked placeholder is ONE shared block in
   resources/views/includes/updates.blade.php (~line 377), rendered
   with `.content-locked`. Its only styling came from old Sponzy CSS:
     public/css/styles.css            -> .content-locked { background:#ececec }
     includes/css_general.blade.php   -> .content-locked { background:#444444 }
   i.e. a flat white (or flat dark-grey) rectangle with a 60px grey lock
   and a full-width green slab button. The creator profile page already
   had a Playbooki treatment (playbooki-profile.css `.pb-profile-content
   .content-locked`) but the feed, explore, bookmarks and the individual
   post page had nothing.

   These rules are UNSCOPED to any single page on purpose: this stylesheet
   only loads on redesigned pages, so styling `.content-locked` here fixes
   the locked state everywhere it appears at once — feed, explore,
   bookmarks and post detail — from the same shared markup.

   Presentation ONLY. No paywall condition, price, PPV modal hook,
   subscription check, or hidden content is touched.
   ================================================================== */

/* ---- PHASE 23C: root layout fix ------------------------------------
   The panel looked "off-centre" because `.card-updates` is a Bootstrap
   `.card`, i.e. `display:flex; flex-direction:column`, and the panel
   carries Bootstrap's `.btn-block { width:100% }`. In a flex column,
   `width:100%` resolves against the card's FULL content box and the
   horizontal margins are then added OUTSIDE that width — so the panel
   measured 608px inside a 610px card plus 14px margins each side, and
   overflowed the card's right edge by ~14px. That overflow is what read
   as a left/right imbalance.
   Root fix: drop the 100% width and let flex stretch size it, so the
   panel is exactly card-width minus its own margins. No negative
   margins, no transforms.
   The panel is also its own flex column so the lock, title, body, CTA
   and chips share one centre axis instead of relying on `w-100` /
   auto side-margins to fake centring.                                  */
.content-locked,
.pb-locked-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;

  width: auto !important;      /* kill .btn-block width:100% (the overflow) */
  max-width: none !important;
  align-self: stretch;         /* fill the flex card minus our own margins */
  flex: 0 0 auto;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin: 2px 14px 14px !important;          /* inset from the card edges */
  padding: 30px 20px 26px !important;        /* was 96px 16px (pt-lg/pb-lg) */
  background-color: rgba(6, 11, 8, .88) !important;
  color: var(--pb-text) !important;
  border: 1px solid rgba(0, 200, 0, .13) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 14px 34px rgba(0, 0, 0, .34),
    0 0 18px rgba(0, 200, 0, .035) !important;
  background-size: cover;
  background-position: center;
}

/* Green wash + a very subtle diagonal shimmer, so it reads as "premium
   content behind a wall" rather than an empty grey box. */
.content-locked::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(0, 200, 0, .085), rgba(0, 200, 0, 0) 58%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, .014) 0px,
      rgba(255, 255, 255, .014) 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 14px
    );
}

/* Locked MEDIA posts get a blurred teaser image as an inline background.
   Keep the teaser, but lay a dark veil over it so the lock, copy and CTA
   stay readable and the panel still matches the un-teased variant. */
.content-locked[style*="url"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 8, 5, .58) 0%, rgba(3, 8, 5, .80) 100%);
}

/* Every direct child is a centred flex item on one axis. Their own widths
   are content-sized so nothing can drift left or right. */
.content-locked > * {
  position: relative;
  z-index: 1;
  width: auto !important;      /* neutralise .btn-block / .w-100 children */
  max-width: 100%;
  margin: 0 !important;        /* spacing comes from the panel's gap */
  flex: 0 0 auto;
}

/* ---- Lock mark: green-glass ring ----------------------------------- */
.content-locked > .pb-locked-icon,
.content-locked > span.btn-block:first-of-type {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 58px !important;
  height: 58px;
  border-radius: 50%;
  background: rgba(0, 200, 0, .075);
  border: 1px solid rgba(0, 200, 0, .26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 0 7px rgba(0, 200, 0, .032),
    0 0 18px rgba(0, 200, 0, .12);
}

/* styles.css sizes .ico-no-result as its own 150x150 bordered circle with
   line-height:150px !important — that box spilled out of our 66px mark and
   pushed the glyph above it. Collapse it back to a plain 26px glyph. */
.content-locked .ico-no-result {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  font-size: 26px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--pb-green) !important;
  opacity: 1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

/* ---- Copy ---------------------------------------------------------- */
/* The title/sub pair is one tight block, so the gap reads as
   icon → copy → CTA → chips rather than five loose rows. */
.content-locked .pb-locked-title {
  margin: 2px 0 0 !important;
  font-family: var(--pb-fh, "Barlow Condensed"), var(--pb-fb), sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: .045em;      /* opens up the uppercase so it isn't crowded */
  text-transform: uppercase;
  text-align: center;
  color: #ffffff !important;
  text-shadow: 0 1px 12px rgba(0, 200, 0, .14);
}

.content-locked .pb-locked-sub {
  max-width: 290px;
  margin: -4px 0 2px !important;   /* pulls the helper line up under the title */
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--pb-t2) !important;
}

/* ---- CTA: a real action button, content-sized ---------------------- */
/* Was `.w-100` + max-width:300px, which still rendered as a 300px green
   slab. Now it hugs its label (with a sane min/max) so it reads as a
   button, not a warning banner. */
.content-locked .btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  min-width: 168px;
  max-width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 11px 26px !important;
  background: linear-gradient(180deg, #12de12 0%, var(--pb-green) 100%) !important;
  border: none !important;
  border-radius: 999px !important;
  color: #05140a !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  line-height: 1.2 !important;
  letter-spacing: .015em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 6px 18px rgba(0, 200, 0, .22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.content-locked .btn-primary i {
  font-size: 14px;
  line-height: 1;
}

/* Premium sheen that sweeps across on hover. Decorative only. */
.content-locked .btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .42) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg);
  opacity: 0;
}

.content-locked .btn-primary:hover:not(.disabled) {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 10px 24px rgba(0, 200, 0, .30);
}

.content-locked .btn-primary:hover:not(.disabled)::after {
  opacity: 1;
  animation: pbLockedSheen .75s ease-out;
}

@keyframes pbLockedSheen {
  from { left: -60%; }
  to   { left: 115%; }
}

@media (prefers-reduced-motion: reduce) {
  .content-locked .btn-primary,
  .content-locked .btn-primary::after {
    transition: none;
    animation: none !important;
  }
  .content-locked .btn-primary:hover:not(.disabled) { transform: none; }
}

.content-locked .btn-primary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* "Subscription not available" — same shape, muted so it doesn't shout. */
.content-locked .btn-primary.disabled {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--pb-t2) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: none;
  cursor: not-allowed;
}

.content-locked .btn-primary.disabled::after { display: none; }

/* ---- "what's inside" chips (Text / 3 images / 1 video / file size) --- */
.content-locked .list-inline {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 2px 0 0 !important;
  padding: 0;
  list-style: none;
}

.content-locked .list-inline-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 !important;
  padding: 3px 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  color: var(--pb-t3) !important;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.6;
}

.content-locked .list-inline-item i,
.content-locked .list-inline-item svg {
  color: var(--pb-green);
  opacity: .85;
  font-size: 11px;
}

.content-locked .list-inline-item .quality-video {
  color: var(--pb-green);
  font-weight: 700;
}

/* The old CSS forced white text when a teaser image is present; our veil
   already guarantees contrast, so keep the type on the Playbooki scale. */
.content-locked.text-white .pb-locked-sub,
.content-locked.text-white .list-inline-item {
  color: var(--pb-t2) !important;
}

/* ---- Mobile -------------------------------------------------------- */
@media (max-width: 575.98px) {
  .content-locked {
    margin: 2px 10px 10px !important;
    padding: 26px 14px 22px !important;
    border-radius: 16px !important;
    gap: 10px;
  }

  .content-locked > .pb-locked-icon,
  .content-locked > span.btn-block:first-of-type {
    width: 52px !important;
    height: 52px;
  }

  .content-locked .ico-no-result { font-size: 23px !important; }
  .content-locked .pb-locked-title { font-size: 19px; }
  .content-locked .pb-locked-sub { font-size: 12.5px; max-width: 250px; }

  /* Stay a button, never a full-bleed bar — cap it well inside the panel. */
  .content-locked .btn-primary {
    min-width: 0;
    max-width: 100% !important;
    padding: 10px 22px !important;
    font-size: 13px !important;
    white-space: normal;
  }
}

/* ==================================================================
   PHASE 24 — Report modal (.modalReport)
   Layering is handled in playbooki-redesign.js (the modal node is moved
   to <body> on open, escaping the post card's backdrop-filter trap).
   Everything below is presentation only, scoped to .modalReport so no
   other modal — subscribe, tip, message, share — is affected.
   ================================================================== */

/* Belt-and-braces: keep the report modal above the backdrop even on
   pages that don't carry the .pb-authenticated body class. */
.modal.modalReport {
  z-index: 2060 !important;
}

/* Centre the dialog in the viewport instead of hugging the top. */
.modalReport .modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
  max-width: 420px;
  margin: 1.75rem auto;
}

.modalReport .modal-content {
  width: 100%;
  background: linear-gradient(180deg, rgba(20, 24, 20, .96), rgba(10, 12, 10, .98));
  border: 1px solid rgba(0, 200, 0, .28);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  overflow: hidden;
  color: #e9efe9;
}

.modalReport .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 16px 20px;
  align-items: center;
}

.modalReport .modal-header .modal-title {
  font-weight: 700 !important;
  letter-spacing: .3px;
  font-size: 15px;
  color: #fff;
  margin: 0;
}

.modalReport .modal-header .modal-title i {
  color: var(--pb-green, #00c800);
}

/* Close button — visible on dark, not a faint grey blob. */
.modalReport .modal-header .close {
  opacity: 1;
  color: #b9c4b9;
  text-shadow: none;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 0;
  line-height: 28px;
  font-size: 13px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.modalReport .modal-header .close:hover,
.modalReport .modal-header .close:focus {
  color: var(--pb-green, #00c800);
  border-color: rgba(0, 200, 0, .5);
  background: rgba(0, 200, 0, .1);
  opacity: 1;
}

.modalReport .modal-body {
  padding: 18px 20px 6px;
}

.modalReport .modal-body label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #9fb09f;
  margin-bottom: 8px;
}

.modalReport .modal-body .form-control,
.modalReport .modal-body select.custom-select {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 10px !important;
  color: #eaf2ea !important;
  font-size: 14px;
  padding: 10px 12px;
  height: auto;
  box-shadow: none !important;
}

.modalReport .modal-body .form-control::placeholder {
  color: #7f8c7f;
}

.modalReport .modal-body .form-control:focus,
.modalReport .modal-body select.custom-select:focus {
  border-color: rgba(0, 200, 0, .55) !important;
  box-shadow: 0 0 0 3px rgba(0, 200, 0, .14) !important;
  outline: none;
}

.modalReport .modal-body select.custom-select option {
  background: #101410;
  color: #eaf2ea;
}

.modalReport .modal-body textarea.form-control {
  min-height: 84px;
  resize: vertical;
}

.modalReport .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 14px 20px 18px;
  gap: 10px;
}

/* Cancel — quiet ghost button. */
.modalReport .modal-footer .btn[data-dismiss="modal"] {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: #d3ddd3 !important;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 600;
}

.modalReport .modal-footer .btn[data-dismiss="modal"]:hover {
  border-color: rgba(255, 255, 255, .35) !important;
  color: #fff !important;
}

/* Submit — Playbooki green. */
.modalReport .modal-footer .sendReport {
  background: var(--pb-green, #00c800) !important;
  border: 1px solid var(--pb-green, #00c800) !important;
  color: #06180a !important;
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 6px 18px rgba(0, 200, 0, .22);
  transition: filter .15s ease, box-shadow .15s ease;
}

.modalReport .modal-footer .sendReport:hover,
.modalReport .modal-footer .sendReport:focus {
  filter: brightness(1.08);
  box-shadow: 0 8px 22px rgba(0, 200, 0, .3);
}

/* Mobile */
@media (max-width: 575.98px) {
  .modalReport .modal-dialog {
    max-width: none;
    margin: 1rem;
    min-height: calc(100% - 2rem);
  }

  .modalReport .modal-footer {
    flex-wrap: nowrap;
  }

  .modalReport .modal-footer .btn {
    flex: 1 1 auto;
  }
}

/* ==================================================================
   PHASE 30 / CTA-01 — logged-out homepage navbar, MOBILE ONLY.
   Desktop is deliberately untouched: it keeps Explore / Login / Get Started.
   At <=720px `.pb-nav-btn-outline` is already hidden (line ~2320), which left
   only the green "Get Started" — duplicating the hero's "Get Started Free".
   On phones we instead show LOGIN wearing the green primary treatment, so the
   hierarchy reads: navbar = returning users, hero = new users.
   Presentation only. No markup, route, modal or JS behaviour is changed;
   both links keep their existing hrefs and data-toggle attributes.
   ================================================================== */
@media (max-width: 720px) {
  /* signup CTA steps aside on phones (hero already carries it) */
  nav.pb-site-nav .pb-nav-btn-primary.toggleRegister { display: none !important; }

  /* Login takes its place, restyled to the primary green treatment
     (mirrors .pb-nav .pb-nav-btn-primary at line 147 + its 720px sizing) */
  nav.pb-site-nav .pb-nav-btn-outline.login-btn {
    display: inline-flex !important;
    height: 34px;
    min-height: 34px;
    padding: 0 16px;
    font-size: 13px;
    background: var(--pb-green);
    border: 0;
    color: #0a0a0a;
    font-weight: 800;
    box-shadow: none;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  }
  nav.pb-site-nav .pb-nav-btn-outline.login-btn:hover {
    color: #0a0a0a;
    opacity: .85;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PLAYBOOKI v2.1.3 — LOGGED-OUT HOMEPAGE POLISH
   Every rule below is scoped to `.pb-home-live` (the wrapper that only
   `index/home.blade.php` renders), so no logged-in page, admin screen or
   other guest page is affected.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. The clipped "?" in "Why sit on the sidelines?" ─────────────────────
   Cause (measured, not guessed): `.pb-cta-box h2` and `.pb-hero-title` paint
   their text with `-webkit-background-clip: text`, so the gradient is only
   painted inside the element's own border box. Both sit in a centring flex
   column (`.pb-cta-box` / `.pb-hero` are `display:flex; align-items:center`),
   which makes the heading shrink-wrap to the width of its widest line. Italic
   Barlow Condensed glyphs overhang their advance width, so at 1440px the "?"
   ink ended 1.83px past the box — that sliver got no gradient and, because the
   text colour is `transparent`, it simply vanished.
   Fix: widen the *painting area* with a small symmetric inline padding. Font
   size, weight, line-height, letter-spacing and centring are all untouched. */
.pb-home-live .pb-cta-box h2,
.pb-home-live .pb-hero-title > span,
.pb-home-live .pb-hero-title > strong {
  padding-inline: .16em;
}
/* (The hero lines only had ~1.9px of clearance, so they get the same guard.
   The two full-width `.pb-section-title` headings were measured at every test
   width and never overhang their box, so they are deliberately left alone.) */

/* ── 2. One continuous ambient background for the whole page ───────────────
   Previously the only green in the page came from `#pb-hero-canvas`, which is
   sized to `.pb-hero` and clipped by its `overflow:hidden`. The drifting glow
   blobs were therefore sliced off in a dead-straight horizontal line right
   above the stats bar. This single page-level layer spans the full document
   instead of any one section, so there is no seam to see, and it carries the
   CTA/hero colour language from the top of the page to the bottom.
   One element, one static paint, no animation, no repeat — cheap on mobile.
   `rgba(0,200,0,0)` (not `transparent`) is used for the stops so the fade does
   not run through premultiplied black and grey out. */
.pb-home-live::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;              /* behind every child of .pb-page, above <body> */
  pointer-events: none;
  background:
    /* hero — strongest */
    radial-gradient(60% 22% at 16% 2%,  rgba(0,200,0,.070), rgba(0,200,0,0) 70%),
    radial-gradient(50% 18% at 86% 10%, rgba(0,200,0,.052), rgba(0,200,0,0) 72%),
    /* hand-off under the fold, so the hero glow bleeds past the stats bar */
    radial-gradient(86% 14% at 46% 25%, rgba(0,200,0,.062), rgba(0,200,0,0) 76%),
    /* mid page — deliberately calmer */
    radial-gradient(58% 13% at 22% 45%, rgba(0,200,0,.036), rgba(0,200,0,0) 78%),
    radial-gradient(58% 13% at 80% 61%, rgba(0,200,0,.032), rgba(0,200,0,0) 78%),
    /* CTA — second peak */
    radial-gradient(76% 16% at 50% 87%, rgba(0,200,0,.105), rgba(0,200,0,0) 72%),
    radial-gradient(48% 11% at 20% 95%, rgba(0,200,0,.05),  rgba(0,200,0,0) 76%);
}

/* Fade the hero canvas out before it reaches the hero's bottom edge, so the
   drifting orbs dissolve into the page wash instead of being guillotined by
   the section boundary. Static mask = no extra animation work. */
.pb-home-live .pb-hero-canvas {
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,.45) 82%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom,
      rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,.45) 82%, rgba(0,0,0,0) 100%);
}

/* The full-bleed hairlines read as hard section rules against a continuous
   background. Same 1px, but faded at both ends so nothing draws a rectangle. */
.pb-home-live .pb-divider {
  background: linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.045) 16%,
      rgba(0,200,0,.15) 50%,
      rgba(255,255,255,.045) 84%,
      rgba(255,255,255,0) 100%);
}

/* ── 3. Passive card shimmer, ~50% slower ─────────────────────────────────
   Base sweep is `pb-shimmer 4s` (playbooki-redesign.css). 4s → 6s on every
   public-home card that already uses the treatment: the stats bar, the three
   How-It-Works steps, the featured Booki cards and the CTA box. Scoped so the
   logged-in feed and the /creators tiles keep their own timing. */
.pb-home-live .pb-shimmer::after {
  animation-duration: 6s;
}

@media (prefers-reduced-motion: reduce) {
  .pb-home-live .pb-shimmer::after {
    animation: none;
    background-image: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   PLAYBOOKI v2.1.6 — LIVE PULSE (logged-in right rail + mobile feed)

   A compact rotating card carrying the same sports / stock / crypto
   feed as the public ticker. Deliberately SHORTER than the Explore
   Bookis widget above it: fixed stage height, one item at a time.

   Scoped to .pb-live-pulse so nothing here can reach the feed, the
   Explore Bookis widget or the footer.
   ════════════════════════════════════════════════════════════════ */

.pb-live-pulse {
  position: relative;
  margin: 0 0 18px;
  padding: 13px 15px 9px;
  border: 1px solid rgba(0, 200, 0, .14);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(18, 21, 18, .92), rgba(9, 11, 9, .92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 0 0 1px rgba(0, 200, 0, .05),
    0 18px 40px rgba(0, 0, 0, .40),
    0 0 30px rgba(0, 200, 0, .05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

/* ---- header row ---- */

.pb-live-pulse .pb-pulse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.pb-live-pulse .pb-pulse-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Barlow Condensed', var(--pb-fb), sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pb-green);
  line-height: 1;
}

/* the small pulsing indicator beside the title */
.pb-live-pulse .pb-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pb-green);
  box-shadow: 0 0 8px rgba(0, 200, 90, .75);
  animation: pb-pulse-beat 2.4s ease-in-out infinite;
}

@keyframes pb-pulse-beat {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

.pb-live-pulse .pb-pulse-head-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* "Live" / "Updated 4m ago" — only ever written from the payload's own
   generated_at, so it can never claim freshness the data doesn't have. */
.pb-live-pulse .pb-pulse-fresh {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(233, 238, 233, .42);
  white-space: nowrap;
}
.pb-live-pulse .pb-pulse-fresh.is-live {
  color: var(--pb-green);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.pb-live-pulse .pb-pulse-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(235, 235, 235, .45);
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}
.pb-live-pulse .pb-pulse-refresh svg { width: 13px; height: 13px; display: block; }
.pb-live-pulse .pb-pulse-refresh:hover { color: var(--pb-green); transform: translateY(-1px); }
.pb-live-pulse .pb-pulse-refresh:focus-visible {
  outline: none;
  color: var(--pb-green);
  box-shadow: 0 0 0 2px rgba(0, 200, 90, .3);
}
.pb-live-pulse.is-refreshing .pb-pulse-refresh svg { animation: pb-pulse-spin .8s linear infinite; }

@keyframes pb-pulse-spin { to { transform: rotate(360deg); } }

/* ---- the rotating stage ---- */

.pb-live-pulse .pb-pulse-stage {
  position: relative;
  min-height: 62px;                  /* fixed so the card never jumps height */
  display: flex;
  align-items: center;
  border-radius: 11px;
  outline: none;
}
.pb-live-pulse .pb-pulse-stage:focus-visible {
  box-shadow: 0 0 0 2px rgba(0, 200, 90, .35);
}

.pb-live-pulse .pb-pulse-slide {
  display: block;
  width: 100%;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .24s ease, transform .24s ease;
}
.pb-live-pulse .pb-pulse-slide.is-out {
  opacity: 0;
  transform: translateY(-3px);
}

/* category chip: NFL / CRYPTO / STOCK MARKET WINNERS … */
.pb-live-pulse .pb-pulse-cat {
  display: inline-block;
  margin-bottom: 5px;
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(233, 238, 233, .62);
  background: rgba(255, 255, 255, .03);
  line-height: 1.5;
}
.pb-live-pulse .pb-pulse-cat.is-live {
  color: var(--pb-green);
  border-color: rgba(0, 200, 90, .35);
  background: rgba(0, 200, 90, .09);
}
.pb-live-pulse .pb-pulse-cat.is-final {
  color: rgba(233, 238, 233, .8);
  border-color: rgba(255, 255, 255, .16);
}

.pb-live-pulse .pb-pulse-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--pb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-live-pulse .pb-pulse-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 3px;
  min-height: 15px;
}

.pb-live-pulse .pb-pulse-value {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(233, 238, 233, .74);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Positive uses Playbooki green; negative uses a restrained, accessible
   red-clay rather than a full alarm red, so the card never lights up. */
.pb-live-pulse .pb-pulse-change {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pb-live-pulse .pb-pulse-up      { color: var(--pb-green); }
.pb-live-pulse .pb-pulse-down    { color: #e0685f; }
.pb-live-pulse .pb-pulse-neutral { color: rgba(233, 238, 233, .5); }

/* ---- footer controls ---- */

.pb-live-pulse .pb-pulse-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.pb-live-pulse .pb-pulse-foot[hidden] { display: none; }

.pb-live-pulse .pb-pulse-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(235, 235, 235, .40);
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.pb-live-pulse .pb-pulse-nav svg { width: 13px; height: 13px; display: block; }
.pb-live-pulse .pb-pulse-nav:hover { color: var(--pb-green); background: rgba(0, 200, 90, .08); }
.pb-live-pulse .pb-pulse-nav:focus-visible {
  outline: none;
  color: var(--pb-green);
  box-shadow: 0 0 0 2px rgba(0, 200, 90, .3);
}

.pb-live-pulse .pb-pulse-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pb-live-pulse .pb-pulse-dotmark {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transition: background .2s ease, transform .2s ease;
}
.pb-live-pulse .pb-pulse-dotmark.is-on {
  background: var(--pb-green);
  transform: scale(1.25);
  box-shadow: 0 0 6px rgba(0, 200, 90, .5);
}

/* ---- mobile placement: in the feed column, under the composer ---- */

.pb-live-pulse-mobile {
  margin-bottom: 14px;
}
.pb-live-pulse-mobile .pb-live-pulse {
  margin-bottom: 0;
  border-radius: 14px;
}

/* ---- reduced motion: no beat, no crossfade, no spin ---- */

@media (prefers-reduced-motion: reduce) {
  .pb-live-pulse .pb-pulse-dot,
  .pb-live-pulse.is-refreshing .pb-pulse-refresh svg { animation: none; }
  .pb-live-pulse .pb-pulse-slide { transition: none; }
  .pb-live-pulse .pb-pulse-slide.is-out { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   PLAYBOOKI v2.1.6 — STICKY THREE-COLUMN APP SHELL + FITTED RIGHT RAIL

   Two connected changes, desktop only (>= 992px, the breakpoint that
   already creates the three-column layout):

   1. The left and right rails stay put while the centre feed scrolls.
      This is pure CSS `position: sticky` on normal document scrolling —
      no fixed positioning, no nested scroll containers, no JS scroll
      listeners. The one genuine blocker was `align-items: flex-start`
      on the row (fixed above); both rails already carried sticky
      wrappers that simply had no room to travel.

   2. The right rail is sized to finish inside the viewport, because a
      sticky rail can no longer rely on the user scrolling down to reach
      what sits at its bottom. The tiny footer now lives INSIDE the Live
      Pulse card, and the Explore Bookis cards step down through a few
      viewport-HEIGHT tiers so all three still fit on short laptops.

   Nothing here applies below 992px — mobile keeps the v2.1.x layout.
   ════════════════════════════════════════════════════════════════ */

/* ── THE ACTUAL REASON STICKY NEVER WORKED ────────────────────────
   Both playbooki.css and playbooki-redesign.css set `body { overflow-x: hidden }`,
   and an inline rule forces `html, body { overflow-y: auto !important }`.

   A box with ANY non-visible overflow is a scroll container, and a sticky element
   positions itself against its nearest scroll container — not necessarily the
   viewport. So every sticky descendant on the site was measuring against <body>,
   and <body> never scrolls: its scrollHeight equals its clientHeight (2825 = 2825
   when measured), because <html> is what actually scrolls. The rails had
   `position: sticky` and a correct `top`, and still travelled with the page,
   because there was no scrollport for them to stick to.

   `overflow-x: clip` clips horizontal overflow exactly like `hidden` but does NOT
   create a scroll container. That keeps the horizontal clamp the Phase 30 mobile
   audit depends on, while letting sticky descendants fall through to the viewport
   as intended. `overflow-y` must go back to `visible`, or one clipping axis forces
   the other into a scrolling value again.

   Scoped with :has() to the logged-in home feed alone — no other page's overflow
   behaviour changes. Both :has() and overflow:clip degrade safely: on a browser
   without either, the rule is dropped and the rails simply behave as they did in
   v2.1.5 rather than breaking.
   ───────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  body.pb-authenticated:has(.pb-home-session-page) {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
}

/* Layout tokens live outside the media query so every rule that consumes them —
   including the older `.col-md-4 > .sticky-top` offset further up this file —
   resolves to the same numbers at any width.

   All measured on the running app, not guessed: .playbooki-nav is 62px tall
   inside a fixed, zero-height <header>, and <body> already carries
   `padding-top: 62px` to clear it.

   --pb-rail-top is DERIVED so it can never drift out of step with the page's
   own top spacing. The rails' resting position and their sticky threshold are
   the same number by construction, which is what stops them sliding upward
   before they lock. Change --pb-feed-gap and both move together. */
body.pb-authenticated {
  --pb-nav-h: 62px;
  --pb-feed-gap: 32px;
  --pb-rail-top: calc(var(--pb-nav-h) + var(--pb-feed-gap));   /* 94px */
  --pb-rail-bottom: 16px;
  /* Breathing room between Explore Bookis and Live Pulse. Steps down with the
     height tiers below, so it never competes with fitting the rail. */
  --pb-rail-gap: 16px;
}

@media (min-width: 992px) {

  body.pb-authenticated {
    /* Explore Bookis card sizing, stepped by viewport height below. */
    --pb-booki-card-h: 118px;
    --pb-booki-gap: 9px;
    --pb-booki-pad: 14px;
    --pb-booki-title-mb: 10px;
  }

  /* Roomy screens keep the original v2.1.5 proportions exactly. */
  @media (min-height: 950px) {
    body.pb-authenticated {
      --pb-booki-card-h: 138px;
      --pb-booki-gap: 12px;
      --pb-booki-pad: 16px;
      --pb-booki-title-mb: 14px;
    }
  }

  /* The 731-820px band is the tightest one: the tier below it has not kicked
     in yet, and the rail is at its tallest for the space available. Trimmed a
     further 6px per card so this band keeps a comfortable margin now that the
     sticky threshold sits 8px lower down the page. */
  @media (max-height: 820px) {
    body.pb-authenticated {
      --pb-booki-card-h: 96px;
      --pb-booki-gap: 8px;
      --pb-booki-pad: 11px;
      --pb-booki-title-mb: 8px;
      /* 731-820px is the tightest band - the tier below has not kicked in yet
         and the rail is at its tallest for the space available. The inter-widget
         gap and the bottom margin both come in here so the rail keeps a real
         margin rather than a couple of pixels. */
      --pb-rail-gap: 12px;
      --pb-rail-bottom: 12px;
    }
  }

  @media (max-height: 730px) {
    body.pb-authenticated {
      --pb-booki-card-h: 94px;
      --pb-booki-gap: 6px;
      --pb-booki-pad: 10px;
      --pb-booki-title-mb: 4px;
      /* less breathing room under the rail buys back real pixels where they
         are scarcest — a 1366×768 laptop lands here once browser chrome and
         the OS taskbar are taken off. */
      --pb-rail-bottom: 12px;
    }
  }

  /* ---- THE TOP SPACING, AND WHY THE RAILS USED TO SLIDE ----
     The navbar was being cleared THREE times over:
        62px  <body> padding-top          - the real navbar clearance, correct
      + 62px  .pb-page padding-top        - clears the same 62px navbar again
      + 48px  Bootstrap .pt-lg-5          - decorative padding on the container
       ----
        172px before the rails began, i.e. 110px of empty space below a navbar
        that had already been cleared.

     That gap is also the whole reason the rails drifted. A sticky element sits
     in normal flow until the scroll position reaches its threshold. The rails
     rested at 172px (later 140px) but their threshold was 86px, so the first
     ~54-86px of scrolling slid them upward before they locked — exactly the
     "travels then sticks" symptom.

     Fixed at the cause: <body> keeps the one clearance that is real, the two
     redundant layers collapse to a single deliberate --pb-feed-gap, and the
     sticky threshold is DERIVED from that same gap. Resting position and
     threshold are now the same number, so there is nothing to drift through.
     The composer and both rails also start on one line as a result.

     Scoped to the logged-in home feed at desktop widths; .pb-page is shared
     with other pages (the logged-out homepage among them) and keeps its own
     62px everywhere else. */
  body.pb-authenticated .pb-home-session-page.pb-page {
    padding-top: var(--pb-feed-gap) !important;
  }
  body.pb-authenticated .pb-home-session-page .container-lg-3.pt-lg-5 {
    padding-top: 0 !important;
  }

  /* ---- LEFT RAIL ----
     .menu-left-home already carries Bootstrap's .sticky-top and an 86px
     offset; with the column now stretched it finally has travel. The
     max-height is a safety net for very short windows only — at any normal
     laptop height the menu is ~330px and never comes near it. */
  body.pb-authenticated .container-lg-3 > .row > .col-md-2 > .menu-left-home,
  body.pb-authenticated .container-lg-3 > .row > .col-md-2 .menu-left-home {
    position: sticky !important;
    top: var(--pb-rail-top) !important;
    max-height: calc(100dvh - var(--pb-rail-top) - var(--pb-rail-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body.pb-authenticated .menu-left-home::-webkit-scrollbar { width: 0; height: 0; display: none; }

  /* The aside carries Bootstrap's `mb-4`, which made its column 24px shorter
     than the row and therefore ended the right rail's sticky travel 24px early
     — the rail visibly lifted in the last stretch of the page while the left
     one held. Harmless spacing on a content-height column; pointless on a
     stretched one. */
  body.pb-authenticated .container-lg-3 > .row > .col-md-4.pb-explore-aside {
    margin-bottom: 0 !important;
  }

  /* ---- RIGHT RAIL ----
     A sticky flex column: Explore Bookis on top, Live Pulse (with the
     footer folded into it) pinned underneath. Live Pulse never shrinks;
     Explore is the flexible one, so if a window is short enough to run out
     of room it is the cards that give, never the live data. */
  /* `display: flex` needs !important here. The rail markup carries Bootstrap's
     `.d-lg-block`, which is `display: block !important` at this breakpoint, so a
     plain `display: flex` silently lost — the rail was never a flex container and
     the `gap` below did nothing, leaving Explore Bookis and Live Pulse touching
     edge to edge. */
  body.pb-authenticated .container-lg-3 > .row > .col-md-4 > .pb-explore-sticky {
    position: sticky !important;
    top: var(--pb-rail-top) !important;
    display: flex !important;
    flex-direction: column;
    gap: var(--pb-rail-gap);
    max-height: calc(100dvh - var(--pb-rail-top) - var(--pb-rail-bottom));
  }

  /* `0 0 auto`, deliberately: an earlier cut used `0 1 auto` so the widget could
     absorb a short viewport, and flex-shrink duly squeezed the box below its own
     content — silently slicing the third creator card in half at 700px tall.
     Nothing in this rail is allowed to shrink below its content. The fit comes
     from the height tiers above instead, which reduce what the content actually
     measures rather than cropping it. */
  body.pb-authenticated .pb-explore-sticky > .pb-explore-bookis-widget {
    flex: 0 0 auto;
    margin-bottom: 0 !important;
    padding: var(--pb-booki-pad) !important;
  }

  body.pb-authenticated .pb-explore-sticky > .pb-live-pulse {
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  /* Explore Bookis: same design, tighter geometry on shorter screens.
     Only spacing and cover height move — name, username, avatar and the
     FREE pill keep their sizes, so nothing becomes hard to read. */
  body.pb-authenticated .pb-explore-bookis-widget .filter-explorer {
    margin-bottom: var(--pb-booki-title-mb) !important;
  }
  body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card {
    min-height: var(--pb-booki-card-h);
  }
  body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-cover {
    /* Low floor so the card's min-height alone decides the height —
       the cover is flex: 1 and simply fills whatever is left above the
       name band, instead of forcing the card taller than the tier allows. */
    min-height: var(--pb-booki-cover-min, 30px);
  }
  body.pb-authenticated .pb-explore-bookis-widget .containerRefreshCreators > a {
    margin-bottom: var(--pb-booki-gap);
  }

  /* A card can never be shorter than cover-floor + name band, so on short
     screens the name band's own padding has to come in too — otherwise the
     tier asks for 94px and the content insists on 112px, and the difference
     is exactly what used to get cropped. Avatar, name and username keep
     their sizes; only the padding around them tightens. */
  @media (max-height: 820px) {
    body.pb-authenticated { --pb-booki-cover-min: 26px; }
    body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-info {
      padding: 7px 11px 9px !important;
    }
  }
  @media (max-height: 730px) {
    body.pb-authenticated { --pb-booki-cover-min: 22px; }
    body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-info {
      padding: 5px 10px 7px !important;
    }
    body.pb-authenticated .pb-explore-sticky .pb-live-pulse { padding: 10px 13px 7px; }
    body.pb-authenticated .pb-explore-sticky .pb-pulse-head { margin-bottom: 6px; }
    body.pb-authenticated .pb-explore-sticky .pb-pulse-stage { min-height: 54px; }
    body.pb-authenticated .pb-explore-sticky .pb-pulse-foot { margin-top: 4px; padding-top: 4px; }
    body.pb-authenticated .pb-explore-sticky .pb-pulse-nav { height: 21px; }
  }

  /* Last resort, and only for a genuinely tiny desktop window. The tiers above
     are sized so the rail fits outright down to roughly 650px of viewport
     height — which covers a 1366×768 laptop after browser chrome and the OS
     taskbar. Below that a subtle internal scroll takes over, because scrolling
     to reach something is still far better than cropping it. */
  @media (max-height: 650px) {
    body.pb-authenticated .container-lg-3 > .row > .col-md-4 > .pb-explore-sticky {
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    body.pb-authenticated .pb-explore-sticky::-webkit-scrollbar { width: 0; height: 0; display: none; }
  }
}

/* ════════════════════════════════════════════════════════════════
   v2.1.6 — FOOTER / INFO FOLDED INTO THE LIVE PULSE CARD

   This is the EXISTING includes.footer-tiny partial, re-parented into the
   bottom of the Live Pulse card and restyled. It is deliberately the same
   partial rather than hand-written links, so the CMS-driven pages (Terms,
   Privacy, Cookies, plus contact/blog/language when enabled) and the PWA
   install button keep their real routes and behaviour — including the
   #installContainer / #butInstall ids that public/js/install-app.js binds
   to. It is rendered only for the desktop rail, so those ids stay unique.

   Scoped to .pb-live-pulse .pb-pulse-info: every other page that includes
   footer-tiny is untouched.
   ════════════════════════════════════════════════════════════════ */

.pb-live-pulse .pb-pulse-info {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

/* Strip the partial's card chrome.
   The selectors are this long on purpose: the rail already carries
   `body.pb-authenticated .col-md-4 .card.bg-transparent { background: … !important;
   border: 1px … !important; border-radius: 16px }`, which used to style the footer
   as its own card. That rule is (0,4,1) with !important, so a shorter reset loses
   to it and leaves a ghost rounded box floating inside the Live Pulse card. These
   are (0,5,1) and win cleanly. `border-radius` needs its own reset — the `border`
   shorthand does not clear it. */
body.pb-authenticated .pb-live-pulse .pb-pulse-info .card,
body.pb-authenticated .pb-live-pulse .pb-pulse-info .card.bg-transparent,
body.pb-authenticated .pb-live-pulse .pb-pulse-info .card-body,
.pb-live-pulse .pb-pulse-info .card,
.pb-live-pulse .pb-pulse-info .card-body {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* © line — the lowest-priority text in the whole card */
.pb-live-pulse .pb-pulse-info small,
.pb-live-pulse .pb-pulse-info .text-muted {
  display: block;
  font-size: 10px !important;
  line-height: 1.45;
  color: rgba(233, 238, 233, .34) !important;
  margin-bottom: 3px;
}

/* legal links on one compact line, wrapping to a second only if needed */
.pb-live-pulse .pb-pulse-info ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.pb-live-pulse .pb-pulse-info li {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
}

.pb-live-pulse .pb-pulse-info a,
.pb-live-pulse .pb-pulse-info a.link-footer,
.pb-live-pulse .pb-pulse-info a.footer-tiny {
  font-size: 10.5px !important;
  line-height: 1.6;
  font-weight: 500;
  color: rgba(233, 238, 233, .46) !important;
  text-decoration: none !important;
  transition: color .15s ease;
  white-space: nowrap;
}
.pb-live-pulse .pb-pulse-info a:hover,
.pb-live-pulse .pb-pulse-info a:focus-visible {
  color: var(--pb-green) !important;
}
.pb-live-pulse .pb-pulse-info a:focus-visible {
  outline: none;
  text-decoration: underline !important;
}

/* the PWA install row keeps its own line and its tiny phone glyph */
.pb-live-pulse .pb-pulse-info #installContainer a i,
.pb-live-pulse .pb-pulse-info a i {
  font-size: 10px;
  margin-right: 3px;
}

/* language dropdown, when the site has more than one language */
.pb-live-pulse .pb-pulse-info .dropdown-menu {
  font-size: 12px;
  min-width: 140px;
}

/* On short screens the info block gives up its breathing room first. */
@media (min-width: 992px) and (max-height: 730px) {
  .pb-live-pulse .pb-pulse-info { margin-top: 6px; padding-top: 6px; }
  .pb-live-pulse .pb-pulse-info small { font-size: 9.5px !important; margin-bottom: 1px; }
  .pb-live-pulse .pb-pulse-stage { min-height: 56px; }
}