/* ═══════════════════════════════════════════════════════════════════
   PLAYBOOKI — PREMIER DESIGN SYSTEM
   Source of truth: "Playbooki Standalone" Claude design (v12)
   - Background: #080808  Brand: #00C800
   - Liquid glass + chamfered clip-path corners
   - Barlow Condensed italic (display) + Plus Jakarta Sans (body)
   - Aggressive Bootstrap overrides for sitewide application
   Loaded last so it wins the cascade. Safe non-destructive overrides.
   ═══════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --pb-bg:        #080808;
  --pb-s1:        #0e0e0e;
  --pb-s2:        #141414;
  --pb-s3:        #1c1c1c;
  --pb-s4:        #232323;
  --pb-s5:        #2a2a2a;

  /* Lines */
  --pb-border:    rgba(255,255,255,0.07);
  --pb-border-2:  rgba(255,255,255,0.13);
  --pb-border-g:  rgba(0,200,0,0.20);

  /* Brand */
  --pb-green:     #00C800;
  --pb-green-2:   #00d966;
  --pb-green-3:   #00b020;
  --pb-green-lo:  rgba(0,200,0,0.07);
  --pb-green-md:  rgba(0,200,0,0.14);
  --pb-green-hi:  rgba(0,200,0,0.32);

  /* Text */
  --pb-text:      #f0f0f0;
  --pb-text-2:    #c8c8c8;
  --pb-t2:        #888888;
  --pb-t3:        #3e3e3e;

  /* Status */
  --pb-red:       #e05252;
  --pb-gold:      #ffcc00;
  --pb-blue:      #38bdf8;

  /* Radii — design uses chamfered clip-paths,
     but kept for elements that can't accept clip-path */
  --pb-r:         8px;
  --pb-r-sm:      5px;
  --pb-r-md:      10px;
  --pb-r-lg:      14px;
  --pb-r-pill:    999px;

  /* Glass */
  --pb-glass-bg:    rgba(14,14,14,0.52);
  --pb-glass-bg-2:  rgba(14,14,14,0.72);
  --pb-glass-blur:  blur(22px) saturate(1.15);
  --pb-glass-blur-l:blur(32px) saturate(1.2);
  --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-glass-depth-l: 0 24px 64px rgba(0,0,0,0.7);

  /* Display type */
  --pb-fh:        'Barlow Condensed', system-ui, -apple-system, sans-serif;
  --pb-fb:        'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Chamfer sizes (used in clip-paths) */
  --pb-cut-xs:    4px;
  --pb-cut-sm:    6px;
  --pb-cut:       8px;
  --pb-cut-md:    10px;
  --pb-cut-lg:    14px;
  --pb-cut-xl:    18px;

  /* Motion */
  --pb-ease:      cubic-bezier(.22,1,.36,1);
  --pb-fast:      .15s;
  --pb-mid:       .25s;

  /* Bootstrap variable overrides — sitewide */
  --bs-body-bg:           #080808;
  --bs-body-color:        #f0f0f0;
  --bs-primary:           #00C800;
  --bs-primary-rgb:       0,200,0;
  --bs-success:           #00C800;
  --bs-success-rgb:       0,200,0;
  --bs-link-color:        #00C800;
  --bs-link-color-rgb:    0,200,0;
  --bs-link-hover-color:  #00d966;
  --bs-border-color:      rgba(255,255,255,0.07);
  --bs-secondary-bg:      #141414;
  --bs-tertiary-bg:       #1c1c1c;
  --bs-emphasis-color:    #f0f0f0;
  --bs-secondary-color:   #888;
  --bs-tertiary-color:    #555;

  /* Noise — subtle grain texture for display headers */
  --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");
}

[data-bs-theme="light"] {
  /* This site forces dark premier look even in light mode for brand consistency */
  --bs-body-bg:#080808; --bs-body-color:#f0f0f0;
}

/* ── BASE ──────────────────────────────────────────────────────── */
html, body {
  background: var(--pb-bg) !important;
  color: var(--pb-text) !important;
  font-family: var(--pb-fb) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
body { overflow-x: hidden; }
* { -webkit-tap-highlight-color: transparent; }

::-webkit-scrollbar          { width: 8px; height: 8px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: #1c1c1c; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2a2a2a; }
* { scrollbar-color: #1c1c1c transparent; scrollbar-width: thin; }

::selection { background: rgba(0,200,0,0.32); color: #fff; }

a { color: var(--pb-green); text-decoration: none; transition: color var(--pb-fast) var(--pb-ease); }
a:hover { color: var(--pb-green-2); }

hr, .border-top, .border-bottom, .border, .border-start, .border-end {
  border-color: var(--pb-border) !important;
}

/* Generic text colour helpers */
.text-muted, small.text-muted { color: var(--pb-t2) !important; }
.text-light { color: var(--pb-text) !important; }
.text-dark  { color: var(--pb-text) !important; }

/* ── DISPLAY TYPE ─────────────────────────────────────────────── */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--pb-fh);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1.05;
  color: var(--pb-text);
}
h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--pb-fh);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .005em;
  color: var(--pb-text);
}

/* Noise + soft gradient on big display headings */
h1, .h1, .display-1, .display-2, .display-3 {
  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 !important;
  background-blend-mode: soft-light, normal;
}

p, .lead, blockquote {
  font-family: var(--pb-fb);
  color: var(--pb-text-2);
  line-height: 1.7;
}
.lead { color: var(--pb-t2); font-size: clamp(14.5px,1.6vw,17px); text-wrap: pretty; }

/* Eyebrow label */
.eyebrow,
.pb-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--pb-fb);
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pb-green);
  margin-bottom: 14px;
}
.eyebrow::before, .pb-eyebrow::before { content: '//'; font-size: 13px; letter-spacing: -.05em; opacity: .7; }

/* ── BACKGROUND CANVAS / PARTICLES ────────────────────────────── */
#bg, #page-particles, #playbooki-bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: .55;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: 0;
}

body::before {
  top: -18vh;
  right: -12vw;
  width: min(56vw, 760px);
  height: min(56vw, 760px);
  background:
    radial-gradient(circle at 38% 36%, rgba(0,200,0,.22), transparent 30%),
    radial-gradient(circle at 68% 62%, rgba(255,255,255,.06), transparent 26%);
  filter: blur(42px);
  opacity: .62;
  animation: pb-blob-drift 18s ease-in-out infinite alternate;
}

body::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(0,200,0,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 24%, rgba(255,255,255,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 76%, rgba(0,200,0,.07) 0 1px, transparent 2px);
  background-size: 120px 120px, 170px 170px, 220px 220px;
  opacity: .36;
  animation: pb-particle-drift 34s linear infinite;
  mask-image: linear-gradient(to bottom, black 0%, black 46%, transparent 82%);
}

body > * {
  position: relative;
  z-index: 1;
}

/* ── LIQUID GLASS UTILITIES ───────────────────────────────────── */
.pb-glass, .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-glass-strong, .glass-strong {
  background: var(--pb-glass-bg-2);
  backdrop-filter: var(--pb-glass-blur-l);
  -webkit-backdrop-filter: var(--pb-glass-blur-l);
  border: 1px solid var(--pb-glass-edge);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine), var(--pb-glass-depth-l);
}

/* Chamfered clip-path corners (use on rectangles only) */
.pb-clip-xs { clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px)); }
.pb-clip-sm { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.pb-clip    { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.pb-clip-md { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.pb-clip-lg { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.pb-clip-xl { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }

/* Top-right green corner ribbon (used on cards) */
.pb-ribbon { position: relative; }
.pb-ribbon::before {
  content: ''; position: absolute; top: -1px; right: -1px;
  width: 0; height: 0; border-style: solid;
  border-width: 0 16px 16px 0;
  border-color: transparent rgba(0,200,0,.28) transparent transparent;
  transition: border-color var(--pb-mid) var(--pb-ease);
  pointer-events: none;
}
.pb-ribbon:hover::before { border-color: transparent rgba(0,200,0,.5) transparent transparent; }

/* Subtle top specular line */
.pb-shine { position: relative; }
.pb-shine::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  pointer-events: none;
}

/* ── NAVIGATION (premier) ─────────────────────────────────────── */
nav.playbooki-nav,
.pb-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; height: 62px;
  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 var(--pb-ease);
}
nav.playbooki-nav.solid, .pb-nav.solid { background: rgba(8,8,8,0.86); }
nav.playbooki-nav .nav-logo, .pb-nav .nav-logo { height: 21px; max-height: 21px; opacity: 1; cursor: pointer; }
nav.playbooki-nav .nav-right, .pb-nav .nav-right { display: flex; align-items: center; gap: 10px; }

@media (max-width: 720px) {
  nav.playbooki-nav, .pb-nav { padding: 0 14px; }
  nav.playbooki-nav .nav-logo, .pb-nav .nav-logo { height: 19px; max-height: 19px; }
}

/* ── BUTTONS ──────────────────────────────────────────────────── */
.btn-g, .pb-btn-g, .btn-cta, .btn-solid {
  position: relative; overflow: hidden;
  background: var(--pb-green); color: #000 !important;
  font-family: var(--pb-fb); font-weight: 700; font-size: 13px;
  padding: 9px 20px; border: none; cursor: pointer;
  letter-spacing: .01em;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  transition: opacity var(--pb-fast), transform var(--pb-fast);
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-g:hover, .pb-btn-g:hover, .btn-cta:hover, .btn-solid:hover {
  opacity: .9; transform: translateY(-1px); color: #000 !important;
}
.btn-g::after, .pb-btn-g::after, .btn-cta::after, .btn-solid::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 .4s ease; pointer-events: none;
}
.btn-g:hover::after, .pb-btn-g:hover::after, .btn-cta:hover::after, .btn-solid:hover::after { background-position: -200% 0; }

.btn-g-lg, .pb-btn-g-lg {
  position: relative; overflow: hidden;
  background: var(--pb-green); color: #000 !important;
  font-family: var(--pb-fb); font-weight: 700; font-size: 15px;
  padding: 13px 32px; border: none; cursor: pointer;
  letter-spacing: .01em;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: opacity var(--pb-fast), transform var(--pb-fast);
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-g-lg:hover, .pb-btn-g-lg:hover { opacity: .9; transform: translateY(-1px); }

.btn-ghost, .pb-btn-ghost, .btn-line {
  background: var(--pb-glass-bg);
  color: var(--pb-t2); font-family: var(--pb-fb); font-size: 13px; font-weight: 500;
  padding: 9px 16px;
  border: 1px solid var(--pb-glass-edge);
  border-radius: var(--pb-r-sm);
  cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine);
  transition: color var(--pb-fast), border-color var(--pb-fast), background var(--pb-fast);
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-ghost:hover, .pb-btn-ghost:hover, .btn-line:hover {
  color: var(--pb-text); border-color: rgba(255,255,255,.16); background: rgba(24,24,24,0.7);
}

.btn-ol-lg, .pb-btn-ol-lg {
  background: var(--pb-glass-bg);
  color: var(--pb-t2); font-family: var(--pb-fb); font-size: 15px; font-weight: 500;
  padding: 13px 32px;
  border: 1px solid var(--pb-glass-edge);
  border-radius: var(--pb-r-sm);
  cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine);
  transition: color var(--pb-fast), border-color var(--pb-fast);
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-ol-lg:hover, .pb-btn-ol-lg:hover { color: var(--pb-text); border-color: rgba(255,255,255,.22); }

/* ── BOOTSTRAP BUTTON OVERRIDES (sitewide aggressive) ─────────── */
.btn {
  font-family: var(--pb-fb);
  font-weight: 600;
  letter-spacing: .005em;
  border-radius: var(--pb-r-sm);
  padding: 9px 18px;
  border-width: 1px;
  transition: opacity var(--pb-fast), transform var(--pb-fast),
              background var(--pb-fast), border-color var(--pb-fast),
              color var(--pb-fast), box-shadow var(--pb-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:focus, .btn:focus-visible { outline: 2px solid rgba(0,200,0,.4); outline-offset: 2px; box-shadow: none !important; }

.btn-primary,
.btn-success,
button.btn-primary,
input.btn-primary {
  background: var(--pb-green) !important;
  border-color: var(--pb-green) !important;
  color: #000 !important;
  font-weight: 700;
  position: relative; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.btn-primary:hover, .btn-success:hover {
  background: var(--pb-green-2) !important; border-color: var(--pb-green-2) !important;
  color: #000 !important; opacity: .96;
}
.btn-primary:active, .btn-success:active {
  background: var(--pb-green-3) !important; border-color: var(--pb-green-3) !important; color: #000 !important;
}
.btn-primary:disabled, .btn-success:disabled, .btn-primary.disabled, .btn-success.disabled {
  background: rgba(0,200,0,.4) !important; border-color: transparent !important; color: #000 !important;
}

.btn-secondary, .btn-light, .btn-default {
  background: var(--pb-glass-bg) !important;
  border-color: var(--pb-glass-edge) !important;
  color: var(--pb-text) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-default:hover {
  background: rgba(24,24,24,0.85) !important; border-color: rgba(255,255,255,.16) !important; color: var(--pb-text) !important;
}

.btn-dark { background: #0e0e0e !important; border-color: var(--pb-glass-edge) !important; color: var(--pb-text) !important; }
.btn-dark:hover { background: #141414 !important; }

.btn-info { background: #0e1a22 !important; border-color: rgba(56,189,248,.3) !important; color: var(--pb-blue) !important; }
.btn-warning { background: #1d1808 !important; border-color: rgba(255,204,0,.32) !important; color: var(--pb-gold) !important; }
.btn-danger { background: #1c0e0e !important; border-color: rgba(224,82,82,.32) !important; color: var(--pb-red) !important; }
.btn-danger:hover { background: #251010 !important; }

.btn-outline-primary, .btn-outline-success {
  background: transparent !important; color: var(--pb-green) !important;
  border-color: var(--pb-border-g) !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover {
  background: rgba(0,200,0,.10) !important; color: var(--pb-green-2) !important; border-color: rgba(0,200,0,.4) !important;
}
.btn-outline-secondary, .btn-outline-light, .btn-outline-dark {
  background: transparent !important; color: var(--pb-text-2) !important;
  border-color: var(--pb-glass-edge) !important;
}
.btn-outline-secondary:hover, .btn-outline-light:hover, .btn-outline-dark:hover {
  background: rgba(255,255,255,.04) !important; color: var(--pb-text) !important; border-color: var(--pb-border-2) !important;
}
.btn-outline-danger { color: var(--pb-red) !important; border-color: rgba(224,82,82,.32) !important; }
.btn-outline-danger:hover { background: rgba(224,82,82,.10) !important; color: #ff6e6e !important; }

.btn-link { color: var(--pb-green) !important; text-decoration: none; }
.btn-link:hover { color: var(--pb-green-2) !important; text-decoration: underline; }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 13px 26px; font-size: 15px; }

/* ── CARDS ────────────────────────────────────────────────────── */
.card,
.profile-card,
.profile-block,
.box-shop {
  background: var(--pb-glass-bg) !important;
  color: var(--pb-text) !important;
  backdrop-filter: var(--pb-glass-blur);
  -webkit-backdrop-filter: var(--pb-glass-blur);
  border: 1px solid var(--pb-glass-edge) !important;
  border-radius: var(--pb-r) !important;
  box-shadow: inset 0 1px 0 var(--pb-glass-shine), var(--pb-glass-depth) !important;
}
.card .card-body { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.card-header, .card-footer {
  background: rgba(255,255,255,.02) !important;
  border-color: var(--pb-border) !important;
  color: var(--pb-text);
}
.card-title { font-family: var(--pb-fh); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .005em; }
.card-text { color: var(--pb-text-2); }
.card-img-overlay { color: var(--pb-text); }

.card:not(.rounded-circle),
.modal-content,
.dropdown-menu,
.toast,
.list-group,
.alert {
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

/* Premier card variants */
.cc, .pb-card, .step, .testi, .post {
  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);
  position: relative; overflow: hidden;
  transition: border-color var(--pb-mid) var(--pb-ease),
              transform .2s var(--pb-ease), box-shadow var(--pb-mid) var(--pb-ease);
}
.cc, .pb-card { padding: 17px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); cursor: pointer; }
.step { padding: 28px 24px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.testi { padding: 24px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.post { padding: 20px; margin-bottom: 10px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.cc:hover, .pb-card:hover { border-color: rgba(0,200,0,.20); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(0,200,0,.06); }
.step:hover { border-color: rgba(0,200,0,.20); transform: translateY(-3px); 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); }
.post:hover { border-color: rgba(255,255,255,.10); }

/* Card top-right ribbon */
.cc::before, .pb-card::before, .step::before, .post::before, .auth-card::before {
  content: ''; position: absolute; top: -1px; right: -1px;
  width: 0; height: 0; border-style: solid;
  border-width: 0 16px 16px 0;
  border-color: transparent rgba(0,200,0,.28) transparent transparent;
  transition: border-color var(--pb-mid) var(--pb-ease);
  pointer-events: none;
}
.cc:hover::before, .pb-card:hover::before { border-color: transparent rgba(0,200,0,.5) transparent transparent; }

/* Halo card backwards-compat */
.halo-card {
  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);
  position: relative; overflow: hidden;
  border-radius: var(--pb-r);
}
.halo-card::before {
  content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  width: 240px; height: 180px;
  background: radial-gradient(ellipse, rgba(0,200,0,0.12) 0%, transparent 70%);
  filter: blur(18px); opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.halo-card:hover::before { opacity: 1; }

/* ── FORMS ────────────────────────────────────────────────────── */
.form-control,
.form-select,
input.form-control,
textarea.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--pb-glass-edge) !important;
  color: var(--pb-text) !important;
  border-radius: var(--pb-r-sm) !important;
  padding: 11px 14px !important;
  font-family: var(--pb-fb) !important;
  font-size: 14px !important;
  transition: border-color var(--pb-fast) var(--pb-ease),
              background var(--pb-fast) var(--pb-ease),
              box-shadow var(--pb-fast) var(--pb-ease);
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(0,200,0,.40) !important;
  background: rgba(0,0,0,0.55) !important;
  box-shadow: 0 0 0 3px rgba(0,200,0,.10) !important;
  outline: none !important;
  color: var(--pb-text) !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--pb-t3) !important; }

.form-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 34px !important;
  color-scheme: dark;
}

.form-label, label {
  font-family: var(--pb-fb);
  font-size: 11px;
  font-weight: 700;
  color: var(--pb-t2);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.form-text, .form-hint { color: var(--pb-t3) !important; font-size: 12px; }

.input-group-text {
  background: rgba(0,0,0,0.45) !important;
  border: 1px solid var(--pb-glass-edge) !important;
  color: var(--pb-t2) !important;
  border-radius: var(--pb-r-sm) !important;
}

.form-check-input {
  /* v2.1.2 ROOT-CAUSE FIX: this was the `background:` SHORTHAND, which also
     reset background-repeat -> repeat, background-position -> 0% 0% and
     background-size -> auto. Bootstrap 5.3 sets no-repeat / contain on
     .form-check-input at the SAME specificity but EARLIER in the cascade, so
     playbooki.css won: every switch knob tiled across its 44px track and the
     knob never appeared to move. Longhand only from here. */
  background-color: rgba(0,0,0,.45);
  border: 1px solid var(--pb-glass-edge);
}
.form-check-input:checked {
  background-color: var(--pb-green) !important;
  border-color: var(--pb-green) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(0,200,0,.10) !important; border-color: rgba(0,200,0,.4) !important; }
.form-check-label { color: var(--pb-text-2); }

.form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23888'/%3E%3C/svg%3E");
}
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23000'/%3E%3C/svg%3E");
}

/* ── NAVIGATION TABS / PILLS ──────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--pb-border) !important;
}
.nav-tabs .nav-link {
  color: var(--pb-t3) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  font-family: var(--pb-fb); font-weight: 600;
  background: transparent !important;
  padding: 11px 18px;
}
.nav-tabs .nav-link:hover { color: var(--pb-t2) !important; }
.nav-tabs .nav-link.active {
  color: var(--pb-text) !important;
  border-bottom-color: var(--pb-green) !important;
  background: transparent !important;
}

.nav-pills .nav-link {
  color: var(--pb-t2) !important;
  background: var(--pb-glass-bg) !important;
  border: 1px solid var(--pb-glass-edge) !important;
  border-radius: var(--pb-r-sm) !important;
  margin: 0 4px 4px 0;
  backdrop-filter: blur(10px);
  font-family: var(--pb-fb); font-weight: 500;
}
.nav-pills .nav-link:hover { color: var(--pb-text) !important; border-color: rgba(255,255,255,.14) !important; }
.nav-pills .nav-link.active {
  background: rgba(0,200,0,.10) !important;
  color: var(--pb-green) !important;
  border-color: var(--pb-border-g) !important;
}

/* ── DROPDOWNS ────────────────────────────────────────────────── */
.dropdown-menu {
  background: rgba(10,10,10,0.92) !important;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid var(--pb-glass-edge) !important;
  border-radius: var(--pb-r) !important;
  box-shadow: inset 0 1px 0 var(--pb-glass-shine), 0 16px 48px rgba(0,0,0,.7) !important;
  padding: 6px;
}
.dropdown-item {
  color: var(--pb-text-2) !important;
  border-radius: var(--pb-r-sm);
  padding: 8px 12px;
  font-size: 13.5px;
  background: transparent !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(255,255,255,.05) !important; color: var(--pb-text) !important;
}
.dropdown-item.active, .dropdown-item:active {
  background: rgba(0,200,0,.14) !important; color: var(--pb-green) !important;
}
.dropdown-divider, .dropdown-header {
  border-color: var(--pb-border) !important;
  color: var(--pb-t3) !important;
}

/* ── MODALS ───────────────────────────────────────────────────── */
.modal-content {
  background: rgba(10,10,10,0.92) !important;
  backdrop-filter: blur(32px) saturate(1.2);
  -webkit-backdrop-filter: blur(32px) saturate(1.2);
  border: 1px solid var(--pb-glass-edge) !important;
  border-radius: var(--pb-r-lg) !important;
  box-shadow: inset 0 1px 0 var(--pb-glass-shine), 0 24px 64px rgba(0,0,0,.7) !important;
  color: var(--pb-text) !important;
  position: relative;
}
.modal-content::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  pointer-events: none;
}
.modal-header, .modal-footer {
  border-color: var(--pb-border) !important;
}
.modal-title { font-family: var(--pb-fh); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.modal-backdrop { background: #000 !important; }
.modal-backdrop.show { opacity: .58 !important; }

/* ── MODAL LAYERING FIX (global) ──────────────────────────────────
   `body > * { position:relative; z-index:1 }` above turns <main>
   into a stacking context at z-index 1. Any Bootstrap modal living
   inside <main> gets trapped BELOW the .modal-backdrop appended to
   <body>, blacking out the whole page (e.g. #newMessageForm on the
   messages pages). While a modal is open, drop <main>'s stacking
   context so the dialog paints above the backdrop and stays
   clickable. Mirrors the per-page fix in playbooki-redesign.css,
   applied here globally since this file caused it. */
body.modal-open main {
  z-index: auto !important;
}
body.modal-open .modal { z-index: 2050 !important; }
body.modal-open .modal-backdrop { z-index: 2040 !important; }
/* Never let a leftover backdrop linger after close. */
body:not(.modal-open) > .modal-backdrop { display: none !important; }
.btn-close {
  filter: invert(1) brightness(.8);
  opacity: .6;
}
.btn-close:hover { opacity: 1; }

/* ── BADGES / TAGS ────────────────────────────────────────────── */
.badge {
  font-family: var(--pb-fb);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: var(--pb-r-sm) !important;
  background: rgba(255,255,255,.06);
  color: var(--pb-t2);
}
.badge.bg-primary, .badge.bg-success { background: rgba(0,200,0,.16) !important; color: var(--pb-green) !important; }
.badge.bg-secondary, .badge.bg-light { background: rgba(255,255,255,.06) !important; color: var(--pb-t2) !important; }
.badge.bg-danger { background: rgba(224,82,82,.18) !important; color: var(--pb-red) !important; }
.badge.bg-warning { background: rgba(255,204,0,.16) !important; color: var(--pb-gold) !important; }
.badge.bg-info { background: rgba(56,189,248,.16) !important; color: var(--pb-blue) !important; }
.badge.bg-dark { background: #0e0e0e !important; color: var(--pb-text) !important; }

/* Premier tag (used in design — chamfered) */
.cat, .ptag, .pb-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; font-size: 11.5px; font-weight: 700;
  background: var(--pb-glass-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--pb-border);
  color: var(--pb-t2);
  cursor: pointer; font-family: var(--pb-fb);
  border-radius: 3px;
  letter-spacing: .03em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: all var(--pb-fast) var(--pb-ease);
}
.cat:hover, .ptag:hover, .pb-tag:hover { border-color: rgba(255,255,255,.14); color: var(--pb-text); }
.cat.on, .pb-tag.on, .pb-tag.active {
  background: rgba(0,200,0,.10);
  border-color: var(--pb-border-g);
  color: var(--pb-green);
  box-shadow: inset 0 1px 0 rgba(0,200,0,.10);
}

/* ── ALERTS ───────────────────────────────────────────────────── */
.alert {
  background: var(--pb-glass-bg) !important;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--pb-glass-edge) !important;
  color: var(--pb-text) !important;
  border-radius: var(--pb-r) !important;
  box-shadow: inset 0 1px 0 var(--pb-glass-shine);
  padding: 14px 18px;
}
.alert-success, .alert-primary {
  background: rgba(0,200,0,.07) !important; border-color: var(--pb-border-g) !important; color: var(--pb-green-2) !important;
}
.alert-danger {
  background: rgba(224,82,82,.07) !important; border-color: rgba(224,82,82,.25) !important; color: #ff8b8b !important;
}
.alert-warning {
  background: rgba(255,204,0,.06) !important; border-color: rgba(255,204,0,.25) !important; color: var(--pb-gold) !important;
}
.alert-info {
  background: rgba(56,189,248,.07) !important; border-color: rgba(56,189,248,.25) !important; color: var(--pb-blue) !important;
}

/* ── TABLES ───────────────────────────────────────────────────── */
.table, .table-bordered {
  --bs-table-bg: transparent;
  --bs-table-color: var(--pb-text);
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(0,200,0,.04);
  --bs-table-border-color: var(--pb-border);
  color: var(--pb-text-2) !important;
}
.table thead { background: rgba(255,255,255,.03); }
.table thead th {
  color: var(--pb-t2) !important;
  font-family: var(--pb-fb);
  font-weight: 700; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  border-color: var(--pb-border) !important;
  padding: 12px 14px;
}
.table tbody td {
  border-color: var(--pb-border) !important;
  padding: 12px 14px;
  color: var(--pb-text-2);
}

/* ── PAGINATION ───────────────────────────────────────────────── */
.pagination .page-link {
  background: var(--pb-glass-bg) !important;
  border: 1px solid var(--pb-glass-edge) !important;
  color: var(--pb-t2) !important;
  font-family: var(--pb-fb); font-weight: 600; font-size: 13px;
  border-radius: var(--pb-r-sm) !important;
  margin: 0 3px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pagination .page-link:hover { color: var(--pb-text) !important; background: rgba(255,255,255,.06) !important; border-color: var(--pb-border-2) !important; }
.pagination .page-item.active .page-link {
  background: var(--pb-green) !important; border-color: var(--pb-green) !important; color: #000 !important;
}
.pagination .page-item.disabled .page-link {
  background: transparent !important; color: var(--pb-t3) !important; border-color: var(--pb-border) !important;
}

/* ── BREADCRUMB ───────────────────────────────────────────────── */
.breadcrumb { background: transparent !important; padding: 0; font-size: 12px; }
.breadcrumb-item, .breadcrumb-item a { color: var(--pb-t2) !important; text-decoration: none; }
.breadcrumb-item.active { color: var(--pb-text) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--pb-t3) !important; content: "/"; }

/* ── LIST GROUPS ──────────────────────────────────────────────── */
.list-group {
  background: transparent;
  border-radius: var(--pb-r);
}
.list-group-item {
  background: var(--pb-glass-bg) !important;
  border-color: var(--pb-border) !important;
  color: var(--pb-text-2) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.list-group-item:hover { background: rgba(255,255,255,.04) !important; color: var(--pb-text) !important; }
.list-group-item.active { background: rgba(0,200,0,.12) !important; color: var(--pb-green) !important; border-color: var(--pb-border-g) !important; }

/* ── PROGRESS / TOAST / TOOLTIP / POPOVER ─────────────────────── */
.progress { background: rgba(255,255,255,.05) !important; border-radius: var(--pb-r-pill) !important; height: 8px; overflow: hidden; }
.progress-bar { background: var(--pb-green) !important; }

.toast {
  background: rgba(10,10,10,0.92) !important;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--pb-glass-edge) !important;
  color: var(--pb-text) !important;
  border-radius: var(--pb-r) !important;
  box-shadow: inset 0 1px 0 var(--pb-glass-shine), 0 16px 48px rgba(0,0,0,.6) !important;
}
.toast-header { background: rgba(255,255,255,.03) !important; color: var(--pb-text) !important; border-color: var(--pb-border) !important; }

.tooltip-inner {
  background: rgba(10,10,10,0.95) !important;
  border: 1px solid var(--pb-glass-edge);
  color: var(--pb-text) !important;
  border-radius: var(--pb-r-sm) !important;
  font-family: var(--pb-fb); font-size: 12px;
  padding: 6px 10px;
}
.tooltip-arrow::before { border-color: rgba(10,10,10,0.95) !important; }

.popover {
  background: rgba(10,10,10,0.92) !important;
  border: 1px solid var(--pb-glass-edge) !important;
  border-radius: var(--pb-r) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.6) !important;
}
.popover-body { color: var(--pb-text-2) !important; }
.popover-header { background: rgba(255,255,255,.04) !important; color: var(--pb-text) !important; border-color: var(--pb-border) !important; font-family: var(--pb-fh); font-weight: 800; font-style: italic; text-transform: uppercase; }

/* ── ACCORDIONS ───────────────────────────────────────────────── */
.accordion-item {
  background: var(--pb-glass-bg) !important;
  border-color: var(--pb-glass-edge) !important;
  color: var(--pb-text) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.accordion-button {
  background: transparent !important;
  color: var(--pb-text) !important;
  font-family: var(--pb-fh);
  font-style: italic; font-weight: 800;
  text-transform: uppercase;
}
.accordion-button:not(.collapsed) { background: rgba(0,200,0,.06) !important; color: var(--pb-green) !important; box-shadow: none !important; }
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(0,200,0,.10) !important; }
.accordion-body { color: var(--pb-text-2); background: transparent; }

/* ── NAV / NAVBAR (Bootstrap) ─────────────────────────────────── */
.navbar {
  background: rgba(8,8,8,0.62) !important;
  backdrop-filter: blur(32px) saturate(1.2); -webkit-backdrop-filter: blur(32px) saturate(1.2);
  border-bottom: 1px solid var(--pb-glass-edge) !important;
  padding: 10px 5%;
}
.navbar-brand, .navbar-brand:hover { color: var(--pb-text) !important; font-family: var(--pb-fh); font-style: italic; font-weight: 900; }
.navbar-nav .nav-link, .navbar .nav-link {
  color: var(--pb-t2) !important;
  font-family: var(--pb-fb); font-weight: 500; font-size: 13.5px;
  padding: 9px 14px;
  transition: color var(--pb-fast);
}
.navbar-nav .nav-link:hover, .navbar .nav-link:hover { color: var(--pb-text) !important; }
.navbar-nav .nav-link.active, .navbar .nav-link.active { color: var(--pb-green) !important; }
.navbar-toggler {
  background: var(--pb-glass-bg) !important;
  border: 1px solid var(--pb-glass-edge) !important;
  border-radius: var(--pb-r-sm) !important;
  color: var(--pb-text) !important;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* ── OFFCANVAS ────────────────────────────────────────────────── */
.offcanvas {
  background: rgba(10,10,10,0.92) !important;
  backdrop-filter: blur(32px) saturate(1.2);
  -webkit-backdrop-filter: blur(32px) saturate(1.2);
  border-color: var(--pb-glass-edge) !important;
  color: var(--pb-text) !important;
}
.offcanvas-header { border-bottom: 1px solid var(--pb-border); }
.offcanvas-title { font-family: var(--pb-fh); font-style: italic; font-weight: 800; text-transform: uppercase; }

/* ── HERO / SECTIONS / DIVIDERS ───────────────────────────────── */
.pb-hero,
.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, .hero::before {
  content:'';
  position:absolute;
  top:10%;
  left:8%;
  width:min(42vw,520px);
  height:min(42vw,520px);
  background:
    radial-gradient(circle at 42% 42%, rgba(0,200,0,.24), transparent 28%),
    radial-gradient(circle at 66% 58%, rgba(255,255,255,.07), transparent 24%);
  filter: blur(34px);
  opacity:.72;
  animation: pb-hero-blob-a 14s ease-in-out infinite alternate;
}
.pb-hero::after, .hero::after {
  content:'';
  position:absolute;
  right:5%;
  bottom:10%;
  width:min(34vw,420px);
  height:min(34vw,420px);
  background:
    radial-gradient(circle at 45% 45%, rgba(0,200,0,.16), transparent 28%),
    radial-gradient(circle at 62% 68%, rgba(255,255,255,.05), transparent 26%);
  filter: blur(30px);
  opacity:.58;
  animation: pb-hero-blob-b 16s ease-in-out infinite alternate;
}
.pb-hero > *, .hero > * { position: relative; z-index: 2; }

@keyframes pb-hero-blob-a {
  0% { transform: translate3d(-6%, -3%, 0) scale(.95); }
  50% { transform: translate3d(8%, 7%, 0) scale(1.08); }
  100% { transform: translate3d(0, 13%, 0) scale(1); }
}
@keyframes pb-hero-blob-b {
  0% { transform: translate3d(5%, 8%, 0) scale(1); }
  100% { transform: translate3d(-10%, -8%, 0) scale(1.12); }
}

.hero-h1, .pb-hero-h1 {
  position: relative; z-index: 2;
  font-family: var(--pb-fh);
  font-size: clamp(36px,6vw,68px);
  font-weight: 900; font-style: italic; line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  max-width: 860px; margin-bottom: 28px;
  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 !important;
  background-blend-mode: soft-light, normal;
}
.hero-h1 .ac, .pb-hero-h1 .ac {
  display: block;
  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 !important;
  background-blend-mode: soft-light, normal;
}
.hero-sub, .pb-hero-sub {
  position: relative; z-index: 2;
  font-size: clamp(14.5px,1.6vw,17px);
  color: var(--pb-t2);
  max-width: 480px; line-height: 1.7; margin: 0 auto 40px; text-wrap: pretty;
}
.hero-btns, .pb-hero-btns {
  position: relative; z-index: 2;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center;
}
.hero-badge, .pb-hero-badge {
  position: relative; z-index: 2;
  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; font-size: 12px; color: var(--pb-t2);
  margin-bottom: 24px; letter-spacing: .03em;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
  animation: pb-badge-glow 3s ease-in-out infinite;
}
.bdot, .pb-bdot { 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; } }
@keyframes pb-badge-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(0,200,0,0); } 50% { box-shadow: 0 0 16px 2px rgba(0,200,0,0.12); } }

.sec, .pb-sec { padding: 72px 5%; max-width: 1120px; margin: 0 auto; }
.sec-title, .pb-sec-title {
  font-family: var(--pb-fh);
  font-size: clamp(36px,5vw,62px);
  font-weight: 900; font-style: italic;
  text-transform: uppercase;
  line-height: .96; letter-spacing: -.01em;
  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 !important;
  background-blend-mode: soft-light, normal;
}
.sec-sub, .pb-sec-sub {
  font-size: 15.5px; color: var(--pb-t2); line-height: 1.7;
  max-width: 480px; margin-bottom: 44px; text-wrap: pretty;
}

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

/* ── STATS BAR ────────────────────────────────────────────────── */
.stats-wrap, .pb-stats-wrap { padding: 0 5% 72px; }
.stats-bar, .pb-stats-bar {
  display: flex; max-width: 680px; margin: 0 auto;
  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);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.stat, .pb-stat { flex: 1; padding: 26px 16px; text-align: center; border-right: 1px solid var(--pb-border); }
.stat:last-child, .pb-stat:last-child { border-right: none; }
.stat-n, .pb-stat-n {
  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 !important;
  background-blend-mode: soft-light, normal;
  text-shadow: 0 0 20px rgba(0,200,0,0.15);
}
.stat-l, .pb-stat-l { font-size: 10.5px; color: var(--pb-t3); margin-top: 5px; letter-spacing: .08em; text-transform: uppercase; }

/* ── TICKER ───────────────────────────────────────────────────── */
.ticker, .pb-ticker {
  height: 34px; background: rgba(10,10,10,0.8);
  border-bottom: 1px solid var(--pb-border);
  overflow: hidden; display: flex; align-items: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.ticker-track, .pb-ticker-track { display: flex; gap: 52px; white-space: nowrap; animation: pb-tick 38s linear infinite; padding-left: 100%; }
.ticker-track:hover { animation-play-state: paused; }
@keyframes pb-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.t-item, .pb-t-item { font-size: 11.5px; color: var(--pb-t2); display: flex; align-items: center; gap: 7px; }
.t-item b { color: var(--pb-text); font-weight: 600; }
.t-up { color: var(--pb-green); } .t-dn { color: #e05252; }

/* ── AUTH CARD ────────────────────────────────────────────────── */
.auth-wrap, .pb-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 100px 20px 60px; }
.auth-card, .pb-auth-card {
  width: 100%; max-width: 400px;
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(32px) saturate(1.2);
  -webkit-backdrop-filter: blur(32px) saturate(1.2);
  border: 1px solid var(--pb-glass-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 64px rgba(0,0,0,.7);
  padding: 38px 34px; position: relative;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.auth-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); }
.auth-tabs {
  display: flex;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  padding: 3px; margin-bottom: 24px;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
  border: 1px solid var(--pb-glass-edge);
}
.auth-tab { flex: 1; padding: 9px; text-align: center; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--pb-t3); transition: background .18s, color .18s; }
.auth-tab.on, .auth-tab.active { background: rgba(30,30,30,.9); color: var(--pb-text); }
.auth-submit {
  width: 100%; background: var(--pb-green); color: #000;
  font-weight: 700; font-size: 14.5px;
  padding: 13px; border: none; cursor: pointer;
  font-family: var(--pb-fb); margin-top: 6px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: opacity .15s;
}
.auth-submit:hover { opacity: .9; }

/* ── FOOTER ───────────────────────────────────────────────────── */
.footer, .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;
  background: var(--pb-bg);
}
.footer-logo, .pb-footer-logo { height: 17px; opacity: .4; }
.footer-link, .pb-footer-link { font-size: 12px; color: var(--pb-t3); cursor: pointer; text-decoration: none; transition: color .15s; }
.footer-link:hover { color: var(--pb-t2); }

/* ── PROFILE ──────────────────────────────────────────────────── */
.profile-banner, .pb-profile-banner {
  height: 165px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0b180b, #0f0f0f 50%, #0a130a);
  border: 1px solid var(--pb-glass-edge);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.profile-av, .pb-profile-av {
  width: 76px; height: 76px; flex-shrink: 0;
  background: var(--pb-green);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pb-fh); font-size: 30px; font-weight: 900; font-style: italic; color: #000;
  border: 3px solid var(--pb-bg);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.profile-name { font-family: var(--pb-fh); font-size: 26px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; }
.profile-handle { font-size: 12.5px; color: var(--pb-t3); margin-top: 3px; }

/* ── REVEAL ANIMATIONS ────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s var(--pb-ease), transform .65s var(--pb-ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

@keyframes pb-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes pb-blob-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-8vw, 8vh, 0) scale(1.08); }
  100% { transform: translate3d(-2vw, 14vh, 0) scale(.96); }
}
@keyframes pb-particle-drift {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 120px 240px, -170px 170px, 220px -220px; }
}
.glass-shimmer { position: relative; overflow: hidden; }
.glass-shimmer::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.04) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: pb-shimmer 4s ease-in-out infinite;
}

@keyframes pb-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pb-rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.pb-fade-up { animation: pb-fade-up .65s var(--pb-ease) both; }

/* Floating accent line */
@keyframes pb-float-line { 0%,100% { transform: scaleX(1) translateY(0); } 50% { transform: scaleX(0.85) translateY(-2px); } }
.eyebrow::before, .pb-eyebrow::before { display: inline-block; animation: pb-float-line 3s ease-in-out infinite; }

/* ── MEDIA / IMAGE / AVATAR ───────────────────────────────────── */
img.rounded, .rounded { border-radius: var(--pb-r) !important; }
.rounded-circle { border-radius: 50% !important; }
.avatar, .user-avatar { border-radius: 50%; }

/* ── MISC ─────────────────────────────────────────────────────── */
.shadow, .shadow-sm, .shadow-lg {
  box-shadow: var(--pb-glass-depth) !important;
}
.bg-light, .bg-white { background: var(--pb-glass-bg) !important; color: var(--pb-text) !important; }
.bg-dark { background: var(--pb-s2) !important; }
.bg-primary, .bg-success { background: var(--pb-green) !important; color: #000 !important; }

.text-primary, .text-success { color: var(--pb-green) !important; }
.text-warning { color: var(--pb-gold) !important; }
.text-danger { color: var(--pb-red) !important; }
.text-info { color: var(--pb-blue) !important; }

.border-primary { border-color: var(--pb-green) !important; }
.border-success { border-color: var(--pb-green) !important; }

/* Spinners and skeletons */
.spinner-border, .spinner-grow { color: var(--pb-green) !important; }

/* Forms in horizontal layout */
.input-group .form-control, .input-group .form-select { border-radius: var(--pb-r-sm) !important; }
.input-group > :not(:first-child) { margin-left: -1px; }

/* Disable Bootstrap focus default inset shadow */
.btn:focus, .form-control:focus, .form-select:focus, .form-check-input:focus,
.page-link:focus, .nav-link:focus, .dropdown-item:focus {
  box-shadow: 0 0 0 3px rgba(0,200,0,.10) !important;
}

/* ── EXPLORE / SEARCH ROW ─────────────────────────────────────── */
.explore-input, .pb-search-input {
  flex: 1;
  background: var(--pb-glass-bg);
  backdrop-filter: var(--pb-glass-blur);
  border: 1px solid var(--pb-glass-edge);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine);
  padding: 12px 18px;
  color: var(--pb-text);
  font-family: var(--pb-fb); font-size: 14px;
  outline: none;
  border-radius: var(--pb-r-sm);
  transition: border-color var(--pb-fast);
}
.explore-input:focus, .pb-search-input:focus { border-color: rgba(255,255,255,.16); }

/* ── BLOG / POSTS GENERIC ─────────────────────────────────────── */
.blog-card, .post-card, article.post {
  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);
  border-radius: var(--pb-r);
  overflow: hidden;
  transition: transform .2s var(--pb-ease), border-color var(--pb-mid) var(--pb-ease);
}
.blog-card:hover, .post-card:hover, article.post:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.13); }

/* ── KEYBOARD-FOCUS RING ──────────────────────────────────────── */
:focus-visible { outline: 2px solid rgba(0,200,0,.5); outline-offset: 2px; }

/* ── REDUCED MOTION ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── RESPONSIVE TWEAKS ────────────────────────────────────────── */
@media (max-width: 720px) {
  .sec, .pb-sec { padding: 56px 5%; }
  .pb-hero, .hero { min-height: calc(100vh - 110px); padding: 60px 5% 90px; }
  .stats-bar, .pb-stats-bar { flex-direction: column; }
  .stat, .pb-stat { border-right: 0; border-bottom: 1px solid var(--pb-border); }
  .stat:last-child, .pb-stat:last-child { border-bottom: 0; }
  .footer, .pb-footer { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   STANDALONE MATCH LAYER
   These selectors map the Laravel Blade homepage to the Claude standalone
   composition: compact fixed nav, canvas behind hero content, centered mark,
   52px display type, slash divider, glass stat bar, and sharp creator cards.
   ========================================================================== */

body.playbooki-public {
  background: #080808 !important;
}

nav.playbooki-nav {
  height: 62px !important;
  padding: 0 5% !important;
  background: rgba(8,8,8,0.62) !important;
  backdrop-filter: blur(32px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.2) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 1px 0 rgba(0,0,0,.3) !important;
}

nav.playbooki-nav .nav-logo {
  height: 21px !important;
  width: auto !important;
  opacity: 1 !important;
}

/* PHASE 30 / NAV-01 -------------------------------------------------
   `display:flex !important` here used to beat Bootstrap's
   `.d-none{display:none!important}` on <div class="nav-right d-none d-lg-flex">,
   so the DESKTOP nav row rendered on phones (547px inside a 390px viewport)
   and was merely clipped by `body{overflow-x:hidden}`.
   The forced display is now scoped to >=992px. Layout props stay unscoped so
   the GUEST .nav-right (which has no .d-none) is unaffected at every width. */
nav.playbooki-nav .nav-right {
  align-items: center !important;
  gap: 10px !important;
}
@media (min-width: 992px) {
  nav.playbooki-nav .nav-right {
    display: flex !important;
  }
}

.ticker-outer {
  height: 34px !important;
  min-height: 34px !important;
  margin-top: 0 !important;
  background: rgba(10,10,10,0.8) !important;
  border-bottom: 1px solid var(--pb-border) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.ticker-outer .ticker-track {
  display: flex !important;
  gap: 52px !important;
  white-space: nowrap !important;
  animation: pb-tick 38s linear infinite !important;
  padding-left: 100% !important;
}

.ticker-outer .ticker-track:hover {
  animation-play-state: paused !important;
}

.ticker-outer .t-item {
  font-size: 11.5px !important;
  color: var(--pb-t2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.ticker-outer .t-item b {
  color: var(--pb-text) !important;
  font-weight: 600 !important;
}

.playbooki-public .showBanner {
  display: none !important;
}

.ticker-loading {
  width: 100%;
  justify-content: center;
  gap: 8px;
  color: var(--pb-t2);
  font-size: 11.5px;
}

.t-spin {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(0,200,0,.25);
  border-top-color: var(--pb-green);
  border-radius: 50%;
  animation: pb-spin .8s linear infinite;
}

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

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

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

.halo-macro {
  position: absolute !important;
  inset: 12% 12% auto auto !important;
  width: min(42vw, 520px) !important;
  height: min(42vw, 520px) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 38% 38%, rgba(0,200,0,.20), transparent 34%),
    radial-gradient(circle at 62% 62%, rgba(255,255,255,.055), transparent 28%) !important;
  filter: blur(44px) !important;
  opacity: .58 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.logo-wrap,
.hero-badge,
.hero-h1,
.hero-slash,
.hero-sub,
.hero-btns,
.scroll-cue {
  position: relative !important;
  z-index: 2 !important;
}

.logo-wrap {
  display: none !important;
}

.logo-img {
  height: 30px !important;
  width: auto !important;
  display: block !important;
}

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

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

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

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

.hero-h1 .line1,
.hero-h1 .ac {
  display: block !important;
  font-family: var(--pb-fh) !important;
  font-size: 52px !important;
  font-weight: 900 !important;
  font-style: italic !important;
  line-height: 1.05 !important;
}

.hero-slash {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 0 24px !important;
}

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

.hero-slash-line.r {
  background: linear-gradient(90deg, var(--pb-green), transparent) !important;
}

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

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

.hero-btns {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

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

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

.btn-solid {
  background: var(--pb-green) !important;
  color: #000 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 13px 32px !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--pb-fb) !important;
  letter-spacing: .01em !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
  border-radius: 0 !important;
}

.btn-line {
  background: var(--pb-glass-bg) !important;
  color: var(--pb-t2) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 13px 32px !important;
  border: 1px solid var(--pb-glass-edge) !important;
  border-radius: var(--pb-r-sm) !important;
  cursor: pointer !important;
  font-family: var(--pb-fb) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: inset 0 1px 0 var(--pb-glass-shine) !important;
}

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

.sl,
.stat-l {
  font-size: 10.5px !important;
  color: var(--pb-t3) !important;
  margin-top: 5px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

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

.eye::before {
  content: '//' !important;
  font-size: 13px !important;
  letter-spacing: -.05em !important;
  opacity: .7 !important;
}

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

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

.grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

.ctop {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

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

.av img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.cn {
  font-family: var(--pb-fh) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: .01em !important;
}

.cp {
  font-size: 11.5px !important;
  color: var(--pb-t3) !important;
  margin-top: 2px !important;
}

.cb {
  font-size: 12px !important;
  color: var(--pb-t2) !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
}

.ctags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}

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

.tag-signal,
.bview {
  color: var(--pb-green) !important;
}

.bview {
  display: inline-flex !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

.cta-wrap { padding: 0 0 72px !important; }
.cta-box {
  margin: 0 5% !important;
  padding: 64px 5% !important;
  text-align: center !important;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)) !important;
  border-radius: 0 !important;
}

.cta-box h2 {
  font-family: var(--pb-fh) !important;
  font-size: clamp(30px,4vw,52px) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: -.01em !important;
  margin-bottom: 12px !important;
}

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

@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 720px) {
  .hero { min-height: calc(100vh - 96px) !important; padding: 58px 5% 96px !important; }
  .logo-img { height: 24px !important; }
  .hero-h1,
  .hero-h1 .line1,
  .hero-h1 .ac { font-size: 42px !important; }
  .grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   PHASE 10 RESTORE — Feed + Creator Profile post action polish
   ------------------------------------------------------------
   These live in playbooki.css (loaded globally on every logged-in
   page) so they apply on BOTH the home feed AND the creator
   profile page. The profile page does not load
   playbooki-redesign.css, so post-action polish placed only there
   never reached it — this block fixes that.

   All rules are scoped to body.pb-authenticated so guests and old
   Bootstrap pages are unaffected. Only colour + text-shadow
   animate — no size, spacing, or position changes.
   ============================================================ */

/* --- 1) Navbar icon green hover ---------------------------------
   Icons (home / explore / messages / bell = .icon-navbar) stay soft
   white-gray at rest and turn Playbooki green on hover/focus with a
   subtle glow. :has() limits the <a> rule to icon links so the
   profile-dropdown toggle and search are untouched. */
body.pb-authenticated .playbooki-nav .nav-link .icon-navbar {
  transition: color .2s ease, text-shadow .2s ease;
}
body.pb-authenticated .playbooki-nav .nav-link:hover .icon-navbar,
body.pb-authenticated .playbooki-nav .nav-link:focus .icon-navbar {
  color: var(--pb-green) !important;
  text-shadow: 0 0 10px rgba(0, 200, 0, .35);
}
body.pb-authenticated .playbooki-nav .nav-link:has(.icon-navbar):hover,
body.pb-authenticated .playbooki-nav .nav-link:has(.icon-navbar):focus {
  color: var(--pb-green) !important;
}

/* --- 2) Post action buttons (heart / comment / share / tip /
   bookmark) -------------------------------------------------------
   They share class .pulse-btn and sit in each post's <h4> action
   row. Polished soft-white default + Playbooki green on hover.
   Active/liked (.active) and bookmarked (.text-primary) keep their
   own colour. Covers feed, profile, and any page rendering the
   post action row. */
body.pb-authenticated .wrap-post .pulse-btn,
body.pb-authenticated .pb-profile .pulse-btn {
  transition: color .2s ease, text-shadow .2s ease;
}
body.pb-authenticated .wrap-post .pulse-btn:not(.active):not(.text-primary),
body.pb-authenticated .wrap-post .pulse-btn:not(.active):not(.text-primary) > i,
body.pb-authenticated .wrap-post .pulse-btn:not(.active):not(.text-primary) > svg,
body.pb-authenticated .pb-profile .pulse-btn:not(.active):not(.text-primary),
body.pb-authenticated .pb-profile .pulse-btn:not(.active):not(.text-primary) > i,
body.pb-authenticated .pb-profile .pulse-btn:not(.active):not(.text-primary) > svg {
  color: var(--pb-text) !important;
}
/* Hover selectors repeat the :not(.active):not(.text-primary) chain so
   their specificity exceeds the soft-white default rule above (which
   also matches during hover). Without this, the default would win and
   the icon would never turn green. */
body.pb-authenticated .wrap-post .pulse-btn:not(.active):not(.text-primary):hover,
body.pb-authenticated .wrap-post .pulse-btn:not(.active):not(.text-primary):hover > i,
body.pb-authenticated .wrap-post .pulse-btn:not(.active):not(.text-primary):hover > svg,
body.pb-authenticated .pb-profile .pulse-btn:not(.active):not(.text-primary):hover,
body.pb-authenticated .pb-profile .pulse-btn:not(.active):not(.text-primary):hover > i,
body.pb-authenticated .pb-profile .pulse-btn:not(.active):not(.text-primary):hover > svg {
  color: var(--pb-green) !important;
  text-shadow: 0 0 9px rgba(0, 200, 0, .30);
}

/* --- 3) Creator / post name hover -------------------------------
   Post-card name links (the <a> inside .media-body h5) are soft
   white at rest and turn Playbooki green on hover, with NO
   underline. Scoped to .wrap-post post cards so it covers the feed
   AND creator-profile post cards, but NOT the profile hero header
   name (which lives in .pb-profile-hero, untouched), footer/legal/
   dropdown/old-Bootstrap links, or any other link on the app.
   Specificity (33 default / 43 hover) beats the dark-mode
   body a:not(...) !important rules (22 / 32) that were forcing the
   name to stay white. */
body.pb-authenticated .wrap-post .media-body h5 a {
  color: var(--pb-text) !important;
  text-decoration: none !important;
  transition: color .2s ease, text-shadow .2s ease;
}
body.pb-authenticated .wrap-post .media-body h5 a:hover,
body.pb-authenticated .wrap-post .media-body h5 a:focus {
  color: var(--pb-green) !important;
  text-decoration: none !important;
  text-shadow: 0 0 9px rgba(0, 200, 0, .25);
}

/* ==================================================================
   PHASE 30 — MOBILE HEADER (search icon + PFP menu)   [< 992px only]
   Header markup: resources/views/includes/navbar.blade.php
   Everything here is scoped to .pb-mhead / .pb-mmenu / .pb-msearch,
   which exist only in the mobile header, so desktop is untouched.
   ================================================================== */

.pb-mhead { display: flex; align-items: center; gap: 4px; }

/* Hit area stays 44x44 and fully transparent; all visible feedback is drawn
   small and centred, so the control reads as an icon, not a Bootstrap box. */
.pb-mhead-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;              /* 44px tap target (Part 20) */
  padding: 0; border: 0; background: none; cursor: pointer;
  color: #f0f0f0; font-size: 1.15rem; line-height: 1;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease;
}
.pb-mhead-btn:hover, .pb-mhead-btn:focus-visible { background: none; }
.pb-mhead-btn:focus-visible { outline: 2px solid rgba(0,255,0,.55); outline-offset: -3px; }

/* --- search icon: tight circular tint, never a square ------------------ */
.pb-mhead-btn:not(.pb-mhead-avatar)::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 34px; height: 34px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.55);
  background: rgba(0,255,0,.10);
  box-shadow: 0 0 0 1px rgba(0,255,0,0), 0 0 10px rgba(0,255,0,0);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pb-mhead-btn:not(.pb-mhead-avatar):hover::before,
.pb-mhead-btn:not(.pb-mhead-avatar):focus-visible::before {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
.pb-mhead-btn:not(.pb-mhead-avatar):hover,
.pb-mhead-btn:not(.pb-mhead-avatar):focus-visible { color: #00ff00; }
/* search panel open */
.pb-mhead-btn:not(.pb-mhead-avatar)[aria-expanded="true"] { color: #00ff00; }
.pb-mhead-btn:not(.pb-mhead-avatar)[aria-expanded="true"]::before {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  background: rgba(0,255,0,.13);
  box-shadow: 0 0 0 1px rgba(0,255,0,.30), 0 0 10px rgba(0,255,0,.18);
}

/* --- avatar: ring + glow on the avatar itself, no block behind it ------ */
.pb-mhead-avatar img {
  width: 30px; height: 30px; object-fit: cover; display: block;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 0 0 rgba(0,255,0,0);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pb-mhead-avatar:hover img,
.pb-mhead-avatar:focus-visible img {
  border-color: rgba(0,255,0,.55);
  box-shadow: 0 0 0 3px rgba(0,255,0,.10);
}
.pb-mhead-avatar[aria-expanded="true"] img {
  border-color: #00ff00;
  box-shadow: 0 0 0 3px rgba(0,255,0,.14), 0 0 10px rgba(0,255,0,.22);
}

/* ---- shared panel shell (account menu + search) ---- */
.pb-mmenu, .pb-msearch {
  position: fixed; top: 62px; z-index: 3090;
  background: rgba(14,14,14,.94);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(0,255,0,.24);
  border-radius: 16px;
  box-shadow: 0 18px 52px rgba(0,0,0,.62), 0 0 26px rgba(0,255,0,.10);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  overflow: hidden;
}
.pb-mmenu.is-open, .pb-msearch.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .pb-mmenu, .pb-msearch { transition: none; transform: none; }
}

/* ---- account menu ---- */
.pb-mmenu {
  right: 10px; left: auto;
  width: min(320px, calc(100vw - 20px));   /* never off-screen */
  /* 62px header + 55px .menuMobile bottom nav + breathing room, so the panel
     never paints over the bottom navigation. */
  max-height: calc(100vh - 132px);
  display: flex; flex-direction: column;
}
.pb-mmenu-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex: none;
}
.pb-mmenu-avatar {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid rgba(0,255,0,.42);
}
.pb-mmenu-id { min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.pb-mmenu-id strong {
  display: block; color: #f5f5f5; font-size: .92rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;   /* long usernames */
}
.pb-mmenu-id span {
  display: block; color: #00ff00; font-size: .76rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pb-mmenu-close {
  width: 34px; height: 34px; flex: none; border: 0; background: none; cursor: pointer;
  color: #9a9a9a; border-radius: 9px; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.pb-mmenu-close:hover, .pb-mmenu-close:focus-visible { background: rgba(255,255,255,.08); color: #f0f0f0; }

.pb-mmenu-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px; flex: 1 1 auto; }

/* the original .link-menu-mobile anchors, restyled in place */
.pb-mmenu .link-menu-mobile {
  display: flex; align-items: center;
  min-height: 46px; padding: 10px 12px !important;
  color: #e6e6e6 !important; font-size: .93rem; text-decoration: none;
  border-radius: 10px; border-bottom: 0 !important;
}
.pb-mmenu .link-menu-mobile i,
.pb-mmenu .link-menu-mobile img { flex: none; }
.pb-mmenu .link-menu-mobile i { width: 22px; font-size: 1rem; color: #9a9a9a; }
.pb-mmenu .link-menu-mobile:hover,
.pb-mmenu .link-menu-mobile:focus-visible { background: rgba(0,255,0,.11); color: #00ff00 !important; }
.pb-mmenu .link-menu-mobile:hover i,
.pb-mmenu .link-menu-mobile:focus-visible i { color: #00ff00; }
.pb-mmenu .link-menu-mobile.balance { cursor: default; }
.pb-mmenu .link-menu-mobile.border-bottom {
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 10px 10px 0 0; margin-bottom: 4px; padding-bottom: 14px !important;
}
.pb-mmenu .badge { margin-left: auto; }

/* ---- search panel ---- */
.pb-msearch {
  left: 10px; right: 10px;
  max-height: calc(100vh - 132px);
  display: flex; flex-direction: column;
}
.pb-msearch-form {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; flex: none;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.pb-msearch-icon { color: #00ff00; font-size: 1rem; flex: none; }
.pb-msearch-input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none;
  color: #f0f0f0; font-size: 1rem; padding: 8px 0;   /* >=16px: no iOS zoom-on-focus */
}
.pb-msearch-input::placeholder { color: #7d7d7d; }
.pb-msearch-clear {
  width: 34px; height: 34px; flex: none; border: 0; background: none; cursor: pointer;
  color: #9a9a9a; border-radius: 9px; font-size: .8rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.pb-msearch-clear:hover, .pb-msearch-clear:focus-visible { background: rgba(255,255,255,.08); color: #f0f0f0; }

.pb-msearch-results { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px; }
.pb-msearch-results:empty { display: none; }
.pb-msearch-results .list-group,
.pb-msearch-results .list-group-item,
.pb-msearch-results .card { background: transparent !important; border: 0 !important; margin: 0; }
.pb-msearch-results .list-group-item {
  color: #f0f0f0 !important; border-radius: 10px !important;
  padding: .6rem !important; min-height: 46px;
}
.pb-msearch-results .list-group-item:hover { background: rgba(0,255,0,.11) !important; color: #00ff00 !important; }
.pb-msearch-results .media-heading { color: #f5f5f5 !important; font-weight: 600; }
.pb-msearch-results .list-group-item:hover .media-heading { color: #00ff00 !important; }
.pb-msearch-results small { color: #9a9a9a !important; }
.pb-msearch-results img.rounded-circle { border: 1px solid rgba(0,255,0,.28); }
.pb-msearch-empty, .pb-msearch-loading { display: block; padding: 14px; text-align: center; color: #9a9a9a; font-size: .88rem; }
.pb-msearch-all {
  display: block; padding: .6rem; text-align: center;
  color: #00ff00; font-weight: 600; font-size: .82rem; text-decoration: none;
  border-top: 1px solid rgba(0,255,0,.18); border-radius: 0 0 10px 10px;
}
.pb-msearch-all:hover { background: rgba(0,255,0,.10); color: #00ff00; }

/* Safety: these panels are mobile-only. */
@media (min-width: 992px) {
  .pb-mhead, .pb-mmenu, .pb-msearch { display: none !important; }
}

/* PHASE 30 / Step 4 — .menuMobile safe-area.
   Defect found during bottom-nav regression: the fixed bottom bar had no
   env(safe-area-inset-bottom), so on notched iPhones it sits under the home
   indicator. Additive only; no layout change on devices with a 0 inset. */
.menuMobile {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* PHASE 30b — mobile PFP chevron.
   Mirrors the desktop `.pb-profile-chevron` treatment (same feather icon, same
   .2s rotate). State comes from the button's own aria-expanded attribute, which
   the single toggle already maintains on every open/close path — so there is no
   separate JS state that could drift out of sync. */
.pb-mhead-avatar {
  width: auto;            /* was a fixed 44px square; grow for the chevron */
  min-width: 44px;        /* tap target preserved */
  gap: 3px;               /* tight — header must not feel cramped */
  padding: 0 3px 0 1px;
}
.pb-mhead-chevron {
  font-size: .72rem;      /* ~15px box, in the 14-18px range */
  line-height: 1;
  color: rgba(240,240,240,.62);
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform .2s ease, color .2s ease;
  flex: none;
  margin: 0;
}
.pb-mhead-avatar[aria-expanded="true"] .pb-mhead-chevron {
  transform: rotate(180deg);
  color: #00ff00;
}
@media (prefers-reduced-motion: reduce) {
  .pb-mhead-chevron { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PLAYBOOKI v2.1.5 — mobile account / search panel: viewport-safe height
   --------------------------------------------------------------------------
   The panels were capped at `calc(100vh - 132px)` (62px header + ~55px
   .menuMobile + breathing room). On iOS Safari `100vh` is the LARGE viewport —
   the height the page would have if the browser toolbar were hidden — so while
   the toolbar is on screen the panel is taller than the area the user can
   actually see, and its last row (Logout) sits below the visible edge. The
   panel scrolls internally, but scrolling cannot bring back a row that is
   outside the panel's own painted box.

   `100dvh` is the DYNAMIC viewport, which shrinks and grows with the Safari
   toolbar, so the panel now always ends at the real bottom of what is visible.
   The `100vh` line is kept first as the fallback for engines without dvh; a
   browser that understands dvh simply takes the later declaration.

   The safe-area inset is subtracted ONCE and only here: .menuMobile already
   carries `padding-bottom: calc(1rem + env(safe-area-inset-bottom))`, so on a
   notched iPhone the bottom bar is exactly that much taller than the 55px this
   budget assumed. Subtracting it from the panel's ceiling keeps the same gap
   above the bottom nav instead of double-counting it. No hardcoded device
   pixel heights are used.

   `overscroll-behavior: contain` stops a flick inside the menu from chaining
   into the page behind it once the list hits its end.
   ══════════════════════════════════════════════════════════════════════════ */
.pb-mmenu,
.pb-msearch {
  max-height: calc(100vh - 132px);
  max-height: calc(100dvh - 132px - env(safe-area-inset-bottom, 0px));
}

.pb-mmenu-scroll,
.pb-msearch-results {
  overscroll-behavior: contain;
}