/* /public/assets/css/cs-ui.css  | v2026-02-21
   CollabMe "Creator" theme: tokens + semantic components
*/

/* -----------------------------
   DESIGN TOKENS (big-corp style)
   - neutral base + single vibrant accent
   - semantic colors for status
----------------------------- */
:root{
  /* neutrals */
  --bg: #f6f7fb;
  --surface: #ffffff;
  --border: #e6e8ee;
  --text: #0f172a;
  --muted: #64748b;

  /* creator accent (Instagram-adjacent, not copy) */
  --p1: #7c3aed; /* violet */
  --p2: #ec4899; /* pink */
  --p3: #f59e0b; /* amber */
  --primary: var(--p1);

  /* semantics */
  --ok: #16a34a;
  --warn: #f59e0b;
  --err: #ef4444;

  /* UI */
  --radius: 14px;
  --radius-sm: 12px;
  --focus-ring: rgba(236,72,153,0.22);
  --focus-border: rgba(236,72,153,0.35);
}

/* Optional dark mode (safe defaults) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --surface:#0f172a;
    --border:rgba(255,255,255,0.10);
    --text:#e5e7eb;
    --muted:#9ca3af;
    --focus-ring: rgba(236,72,153,0.25);
    --focus-border: rgba(236,72,153,0.45);
  }
}

*{ box-sizing:border-box; }
body{
  background: var(--bg);
  color: var(--text);
}
a{ color: inherit; }

/* Accessible focus */
:focus-visible{
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 10px;
}

/* -----------------------------
   CORE LAYOUT HELPERS
----------------------------- */
.cs-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cs-spacer{ flex:1 1 auto; min-width:20px; }
.cs-hr{ border:0; border-top:1px solid var(--border); margin:14px 0; }

.small{ color: var(--muted); }
.cs-title{ font-weight:900; font-size:18px; }
.cs-title-lg{ font-weight:900; font-size:40px; line-height:1.05; }

/* -----------------------------
   CARDS
----------------------------- */
.cs-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

/* -----------------------------
   BADGES (your "button badge")
----------------------------- */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 12px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background: var(--surface);
  text-decoration:none;
  cursor:pointer;
  user-select:none;
}
button.badge{ font: inherit; }
.badge:hover{ border-color: rgba(124,58,237,0.28); }

/* Primary CTA = gradient (used sparingly) */
.badge.btn-primary{
  color:#fff;
  border: none;
  background: linear-gradient(135deg, var(--p1), var(--p2), var(--p3));
}
.badge.btn-primary:hover{ filter: brightness(0.98); }

/* Warning CTA (unlock links etc.) */
.badge.btn-warn{
  color:#111;
  border:1px solid rgba(245,158,11,0.45);
  background: rgba(245,158,11,0.95);
  font-weight: 900;
}

/* -----------------------------
   PILLS (status chips)
----------------------------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(15,23,42,0.03);
  font-size: 0.92rem;
}

/* Backward compatible: pill--blue becomes "primary" */
.pill--blue{
  border-color: rgba(236,72,153,0.25);
  background: rgba(236,72,153,0.10);
  color: var(--p2);
  font-weight: 800;
}

.pill--locked{
  border-color: rgba(245,158,11,0.45);
  background: rgba(245,158,11,0.12);
  color: rgba(163,91,0,1);
  font-weight: 800;
}

/* -----------------------------
   ALERTS (ok/warn/error)
----------------------------- */
.cs-alert{
  border-radius: var(--radius);
  border:1px solid var(--border);
  padding: 12px 14px;
  background: var(--surface);
}
.cs-alert--ok{ border-color: rgba(22,163,74,0.28); background: rgba(22,163,74,0.08); color: var(--text); }
.cs-alert--warn{ border-color: rgba(245,158,11,0.40); background: rgba(245,158,11,0.12); color: var(--text); }
.cs-alert--err{ border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.10); color: var(--text); }

/* -----------------------------
   THREAD LIST + CHAT UI (Inbox)
----------------------------- */
.cs-threadlist{ display:grid; gap:10px; }
.cs-thread{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding:12px;
}
.cs-thread.is-active{
  border-color: var(--focus-border);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.cs-thread-name{ font-weight: 900; }
.cs-thread-preview{ color: var(--muted); font-size:13px; margin-top:6px; }
.cs-thread-time{ color: rgba(100,116,139,0.9); font-size:12px; margin-top:6px; }

.cs-chatlog{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.cs-msg{ display:flex; }
.cs-bubble{
  max-width: 78%;
  padding: 10px 12px;
  border-radius: var(--radius);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--border);
  background: var(--surface);
}
.cs-meta{ font-size:12px; color: var(--muted); margin-top:6px; }

.cs-msg.me{ justify-content:flex-end; }
.cs-msg.me .cs-bubble{
  background: rgba(124,58,237,0.08);
  border-color: rgba(124,58,237,0.20);
}

.cs-msg.them{ justify-content:flex-start; }
.cs-msg.them .cs-bubble{
  background: var(--surface);
}

.cs-msg.locked .cs-bubble{
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.40);
}

/* -----------------------------
   FORM CONTROLS (global)
----------------------------- */
:root{ color-scheme: light dark; }

/* Force consistent inputs in dark UI (and keep OK in light UI too) */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px !important;
}

input::placeholder,
textarea::placeholder{
  color: var(--muted) !important;
  opacity: .75;
}

input:focus,
select:focus,
textarea:focus{
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--focus-border) !important;
}

textarea{ resize: vertical; }
select{ cursor: pointer; }

/* Disabled */
input:disabled, select:disabled, textarea:disabled{
  opacity: .7;
  cursor: not-allowed;
}


/* -----------------------------
   LEGACY .btn COMPAT (bootstrap-like)
----------------------------- */
/* базов .btn да изглежда като .badge (без да чупим layout-а) */
.btn, a.btn, button.btn, input.btn {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  padding: 8px 12px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.btn:hover, a.btn:hover, button.btn:hover, input.btn:hover {
  border-color: rgba(124,58,237,0.28) !important;
}

/* primary = creator gradient */
.btn-primary, a.btn-primary, button.btn-primary, input.btn-primary {
  color: #fff !important;
  border: none !important;
  background: linear-gradient(135deg, var(--p1), var(--p2), var(--p3)) !important;
}

.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover, input.btn-primary:hover {
  filter: brightness(0.98) !important;
}

/* warning (ако някъде имаш btn-warning) */
.btn-warning, a.btn-warning, button.btn-warning, input.btn-warning {
  color:#111 !important;
  border:1px solid rgba(245,158,11,0.45) !important;
  background: rgba(245,158,11,0.95) !important;
  font-weight: 900 !important;
}

/* -----------------------------
   LEGACY .btn COMPAT (bootstrap-like)
----------------------------- */
.btn, a.btn, button.btn, input.btn {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  padding: 8px 12px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.btn:hover, a.btn:hover, button.btn:hover, input.btn:hover {
  border-color: rgba(124,58,237,0.28) !important;
}
.btn-primary, a.btn-primary, button.btn-primary, input.btn-primary {
  color: #fff !important;
  border: none !important;
  background: linear-gradient(135deg, var(--p1), var(--p2), var(--p3)) !important;
}
.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover, input.btn-primary:hover {
  filter: brightness(0.98) !important;
}
.btn-warning, a.btn-warning, button.btn-warning, input.btn-warning {
  color: #111 !important;
  border: 1px solid rgba(245,158,11,0.45) !important;
  background: rgba(245,158,11,0.95) !important;
  font-weight: 900 !important;
}


/* -----------------------------
   FORCE DARK DEFAULT (site is dark-themed)
----------------------------- */
:root{
  --bg:#0b1220;
  --surface:#0f172a;
  --border:rgba(255,255,255,0.10);
  --text:#e5e7eb;
  --muted:#9ca3af;
  --control-bg: rgba(255,255,255,0.06);
  --focus-ring: rgba(236,72,153,0.25);
  --focus-border: rgba(236,72,153,0.45);
}

/* Back-compat: ако някъде имаш class="badge primary" */
.badge.primary{
  color:#fff !important;
  border:none !important;
  background: linear-gradient(135deg, var(--p1), var(--p2), var(--p3)) !important;
}

/* =========================================================
   PURPLE GLASS V2 OVERRIDE  (global, last-wins)
   Marker: PURPLE GLASS V2 OVERRIDE
   ========================================================= */
:root{
  --p1:#7c3aed; /* violet */
  --p2:#ec4899; /* pink */
  --p3:#f59e0b; /* amber */
  --primary: var(--p2);

  --bg:
    radial-gradient(1100px 700px at 18% -10%, rgba(236,72,153,0.22), transparent 55%),
    radial-gradient(900px 600px at 82% 0%, rgba(124,58,237,0.24), transparent 55%),
    radial-gradient(800px 520px at 50% 110%, rgba(245,158,11,0.10), transparent 60%),
    linear-gradient(180deg, #070a1a 0%, #0b1026 55%, #070a1a 100%);

  --surface: rgba(15,23,42,0.72);
  --surface2: rgba(15,23,42,0.55);
  --control-bg: rgba(255,255,255,0.06);

  --border: rgba(255,255,255,0.10);
  --border2: rgba(255,255,255,0.16);

  --text:#e9eef7;
  --muted: rgba(233,238,247,0.68);

  --focus-ring: rgba(236,72,153,0.22);
  --focus-border: rgba(236,72,153,0.40);

  /* legacy aliases */
  --card: var(--surface);
  --card2: var(--surface2);
}

html, body{
  background: var(--bg) !important;
  background-attachment: fixed;
  color: var(--text);
}

/* surfaces / cards */
.cs-card, .card, .cm-card, .panel, .box, .cs-panel, .cs-box{
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: blur(10px);
}

/* sidebars / nav-ish */
.sidebar, .cs-sidebar, aside, .nav, .navbar{
  border-color: var(--border) !important;
}

/* badges / pills */
.badge, .pill, .tag{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.badge.primary, .badge--primary, .pill--primary{
  color:#fff !important;
  border:none !important;
  background: linear-gradient(135deg, var(--p1), var(--p2), var(--p3)) !important;
}

/* buttons */
.btn, button, .cs-btn{
  border-color: var(--border) !important;
}

.btn-primary, .btn.primary, .btn--primary, .cs-btn.primary{
  color:#fff !important;
  border:none !important;
  background: linear-gradient(135deg, var(--p1), var(--p2), var(--p3)) !important;
}

/* inputs */
input, select, textarea{
  background: var(--control-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: var(--focus-border) !important;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
}

/* links */
a{ color: var(--text); }
a:hover{ color: var(--primary) !important; }

/* kill teal-style “active” outlines, unify active states */
.is-active, .active, .cs-thread.is-active{
  border-color: var(--focus-border) !important;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
}

/* warning pill */
.pill--warn{
  border-color: rgba(245,158,11,0.40) !important;
  background: rgba(245,158,11,0.12) !important;
  color: #fbbf24 !important;
  font-weight: 800 !important;
}

/* =========================================================
   PURPLE GLASS COMPONENTS V2
   Marker: PURPLE GLASS COMPONENTS V2
   ========================================================= */

:root{
  --radius: 14px;
  --radius-sm: 12px;
  --shadow-glass: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-soft: 0 10px 24px rgba(0,0,0,0.28);
  --glow: 0 0 0 4px var(--focus-ring);
}

/* ---------- Buttons: system (primary / secondary / ghost) ---------- */
.btn, .cs-btn, button{
  border-radius: var(--radius) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--border2) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-soft);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, border-color .12s ease;
}
.btn:hover, .cs-btn:hover, button:hover{
  border-color: var(--focus-border) !important;
  box-shadow: var(--shadow-glass);
  transform: translateY(-1px);
}
.btn:active, .cs-btn:active, button:active{
  transform: translateY(0px);
  filter: brightness(0.98);
}

/* Primary = gradient + glow */
.btn-primary, .btn.primary, .btn--primary, .cs-btn.primary{
  background: linear-gradient(135deg, var(--p1), var(--p2), var(--p3)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(236,72,153,0.16), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.btn-primary:hover, .btn.primary:hover, .btn--primary:hover, .cs-btn.primary:hover{
  box-shadow: 0 12px 28px rgba(236,72,153,0.20), 0 0 0 1px rgba(255,255,255,0.10) inset;
}

/* Ghost / link-like buttons */
.btn-ghost, .btn--ghost{
  background: transparent !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* ---------- Pills / badges ---------- */
.badge, .pill, .tag{
  border-radius: 999px !important;
  padding: 6px 10px;
  line-height: 1;
}

/* Force old “verified” styles to match purple glass */
.badge.verified, .pill.verified, .tag.verified,
.badge--verified, .pill--verified, .tag--verified,
.ver .badge, .ver .pill{
  border-color: var(--focus-border) !important;
  background: rgba(236,72,153,0.10) !important;
  color: #fff !important;
}

/* ---------- Table: unified glass rows ---------- */
table{
  border-collapse: separate !important;
  border-spacing: 0;
}
thead th{
  color: rgba(233,238,247,0.75) !important;
  font-weight: 800;
  letter-spacing: .08em;
}
tbody tr{
  background: rgba(255,255,255,0.02) !important;
}
tbody tr:hover{
  background: rgba(255,255,255,0.04) !important;
}
td, th{
  border-color: rgba(255,255,255,0.08) !important;
}

/* ---------- Navbar pills (links inside navbar) ---------- */
.navbar a, .navbar .nav-link{
  border-radius: 999px !important;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.navbar a:hover, .navbar .nav-link:hover{
  border-color: var(--focus-border) !important;
  box-shadow: var(--glow);
  transform: translateY(-1px);
}
.navbar a.active, .navbar .nav-link.active,
.navbar a[aria-current="page"], .navbar .nav-link[aria-current="page"]{
  border-color: var(--focus-border) !important;
  box-shadow: var(--glow);
}

/* ---------- Small UI polish ---------- */
hr{ border-color: rgba(255,255,255,0.10) !important; }
::selection{ background: rgba(236,72,153,0.25); }


/* =========================================================
   INSTAGRAM TYPE V1 (system-ui, clean + consistent)
   Marker: INSTAGRAM TYPE V1
   ========================================================= */
:root{
  --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, Helvetica, Arial,
             "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

/* Global text */
html, body{
  font-family: var(--font-ui) !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Ensure controls inherit */
button, input, select, textarea{
  font-family: inherit !important;
  font-size: inherit;
}

/* Headings = Instagram-ish (bold, tight, sans) */
h1,h2,h3,h4,h5,h6,
.cs-h1,.cs-h2,.cs-h3,.cs-h4,.cs-h5,.cs-h6{
  font-family: var(--font-ui) !important;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* Nav + table headers slightly stronger */
.navbar a, .navbar .nav-link{
  font-weight: 700;
}
thead th{
  font-weight: 800 !important;
  letter-spacing: .06em; /* stays crisp */
}

/* Muted text */
.small, small, .muted, .text-muted{
  color: var(--muted) !important;
}


/* =========================================================
   PURPLE GLASS LAYOUT V1 (sections + spacing + consistent text blocks)
   Marker: PURPLE GLASS LAYOUT V1
   ========================================================= */
:root{
  --container-max: 1400px;
  --page-pad: clamp(14px, 2.2vw, 28px);
  --section-gap: clamp(18px, 2.6vw, 34px);
  --block-gap: 12px;
  --card-pad: 18px;
}

/* Keep content centered + consistent gutters everywhere */
main{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-gap) var(--page-pad) calc(var(--section-gap) * 1.6);
}

/* If a page already uses an inner wrapper, don't break it */
main > .container,
main > .wrap,
main > .page,
main > .content,
main > .cs-page,
main > .cs-container{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Section rhythm (only between sections/blocks, not everywhere) */
section + section,
.cs-section + .cs-section,
.section + .section{
  margin-top: var(--section-gap) !important;
}

/* Headings + paragraphs: clean Instagram-like rhythm */
h1{ font-size: clamp(30px, 3.0vw, 44px); margin: 0 0 10px; }
h2{ font-size: clamp(22px, 2.2vw, 30px); margin: 0 0 10px; }
h3{ font-size: clamp(18px, 1.8vw, 22px); margin: 0 0 8px; }

p{ margin: 0 0 12px; }
h1 + p, h2 + p, h3 + p{ margin-top: 6px; }
p:last-child{ margin-bottom: 0; }

/* Lists: tighter + consistent */
ul, ol{
  margin: 0;
  padding-left: 1.15rem;
}
li + li{ margin-top: 6px; }

/* Cards: consistent padding + radius + internal spacing */
.cs-card, .card, .cm-card, .panel, .box, .cs-panel, .cs-box{
  padding: var(--card-pad) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft);
}
.cs-card > *:first-child,
.card > *:first-child,
.cm-card > *:first-child{
  margin-top: 0 !important;
}
.cs-card > * + *,
.card > * + *,
.cm-card > * + *{
  margin-top: var(--block-gap);
}

/* “Three cards in a row” sections: make them align nicely if a grid exists */
.cards, .cards-grid, .cs-grid, .grid{
  gap: 16px;
}

/* Links: cleaner (no heavy underline everywhere) */
a{ text-decoration: none; }
a:hover{
  text-decoration: underline;
  text-decoration-color: rgba(236,72,153,0.55);
  text-underline-offset: 3px;
}


/* =========================================================
   SITE FOOTER V1 (Purple Glass)
   Marker: SITE FOOTER V1
   ========================================================= */
.site-footer{
  margin-top: var(--section-gap);
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
}
.site-footer__inner{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 14px var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.site-footer__left{
  color: var(--muted);
  font-weight: 700;
}
.site-footer__nav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.site-footer__nav a{
  color: rgba(233,238,247,0.78);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  padding: 6px 10px;
  border-radius: 999px;
}
.site-footer__nav a:hover{
  border-color: var(--focus-border);
  box-shadow: 0 0 0 4px var(--focus-ring);
  text-decoration: none;
}
.site-footer__sep{
  color: rgba(233,238,247,0.30);
}


/* =========================================================
   STICKY FOOTER V1
   Marker: STICKY FOOTER V1
   ========================================================= */
html, body{ min-height: 100%; }
body{ display:flex; flex-direction:column; }
main{ flex: 1 0 auto; }
.site-footer{ flex-shrink: 0; }


/* =========================================================
   SITE FOOTER SPACING V2 (better spacing + proper placement)
   Marker: SITE FOOTER SPACING V2
   ========================================================= */
.site-footer{
  margin-top: 0 !important; /* was meant when footer was inside main */
}

.site-footer__inner{
  padding: 18px var(--page-pad) !important;
  gap: 22px !important;
}

/* links not glued + scale with viewport */
.site-footer__nav{
  gap: clamp(12px, 2vw, 18px) !important;
  justify-content: flex-end;
}

.site-footer__nav a{
  padding: 8px 14px !important;
  min-width: 86px;
  text-align: center;
}

/* mobile: stack nicely */
@media (max-width: 760px){
  .site-footer__inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .site-footer__nav{
    width: 100%;
    justify-content: flex-start;
  }
}


/* =========================================================
   STICKY FOOTER V2 (force bottom-of-viewport)
   Marker: STICKY FOOTER V2
   ========================================================= */
html, body{ height: 100% !important; }
body{
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* main must consume remaining space */
main{
  flex: 1 0 auto !important;
}

/* footer pushed to bottom */
.site-footer{
  margin-top: auto !important;
  width: 100%;
}


/* =========================================================
   SITE BUTTONS V1 (Purple Glass, no IG gradient)
   Marker: SITE BUTTONS V1
   ========================================================= */
:root{
  --btn-primary-bg: rgba(124,58,237,0.18);      /* violet glass */
  --btn-primary-bg2: rgba(124,58,237,0.10);
  --btn-primary-border: rgba(236,72,153,0.38);  /* pink border accent */
  --btn-primary-glow: rgba(236,72,153,0.16);
}

/* Primary buttons: remove multi-color gradients everywhere */
.btn-primary, .btn.primary, .btn--primary, .cs-btn.primary,
.btn-gradient, .btn--gradient, .btn--ig, .btn-ig{
  background: linear-gradient(180deg, var(--btn-primary-bg), var(--btn-primary-bg2)) !important;
  border: 1px solid var(--btn-primary-border) !important;
  color: #fff !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.28),
    0 0 0 4px var(--btn-primary-glow) !important;
}

/* Hover: slightly brighter + cleaner glow */
.btn-primary:hover, .btn.primary:hover, .btn--primary:hover, .cs-btn.primary:hover,
.btn-gradient:hover, .btn--gradient:hover, .btn--ig:hover, .btn-ig:hover{
  filter: brightness(1.06);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.32),
    0 0 0 5px rgba(236,72,153,0.20) !important;
}

/* Active: reduce lift */
.btn-primary:active, .btn.primary:active, .btn--primary:active, .cs-btn.primary:active,
.btn-gradient:active, .btn--gradient:active, .btn--ig:active, .btn-ig:active{
  transform: translateY(0) !important;
  filter: brightness(1.00);
}

/* Keep secondary buttons glassy and consistent */
.btn:not(.btn-primary):not(.primary):not(.btn--primary):not(.btn-gradient):not(.btn--gradient):not(.btn--ig):not(.btn-ig),
.cs-btn:not(.primary){
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--border2) !important;
  color: var(--text) !important;
}


/* =========================================================
   SITE BUTTONS V2 (SOLID Purple Glass, zero IG vibe)
   Marker: SITE BUTTONS V2
   ========================================================= */

/* Primary: solid glass + glow (no gradient) */
.btn-primary, .btn.primary, .btn--primary, .cs-btn.primary,
.btn-gradient, .btn--gradient, .btn--ig, .btn-ig,
a.btn, a.btn-primary, a.cs-btn{
  background-image: none !important;
  background: rgba(124,58,237,0.20) !important;  /* violet glass */
  border: 1px solid rgba(236,72,153,0.34) !important;
  color: #fff !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.30),
    0 0 0 4px rgba(236,72,153,0.14) !important;
}

.btn-primary:hover, .btn.primary:hover, .btn--primary:hover, .cs-btn.primary:hover,
.btn-gradient:hover, .btn--gradient:hover, .btn--ig:hover, .btn-ig:hover,
a.btn:hover, a.btn-primary:hover, a.cs-btn:hover{
  background: rgba(124,58,237,0.26) !important;
  border-color: rgba(236,72,153,0.46) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,0.34),
    0 0 0 5px rgba(236,72,153,0.18) !important;
}


/* =========================================================
   CREATE PENDING BUTTON V1 (match site, no IG gradient)
   Marker: CREATE PENDING BUTTON V1
   ========================================================= */
.btn-create-pending{
  background-image: none !important;
  background: rgba(124,58,237,0.22) !important;   /* violet glass */
  border: 1px solid rgba(236,72,153,0.38) !important;
  color: #fff !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.30),
    0 0 0 4px rgba(236,72,153,0.14) !important;
}
.btn-create-pending:hover{
  background: rgba(124,58,237,0.28) !important;
  border-color: rgba(236,72,153,0.50) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,0.34),
    0 0 0 5px rgba(236,72,153,0.18) !important;
}


/* =========================================================
   CREATE PENDING BUTTON V3 (force site style)
   Marker: CREATE PENDING BUTTON V3
   ========================================================= */
.btn-create-pending{
  background-image: none !important;
  background: rgba(124,58,237,0.22) !important;
  border: 1px solid rgba(236,72,153,0.40) !important;
  color: #fff !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.30),
    0 0 0 4px rgba(236,72,153,0.14) !important;
}
.btn-create-pending:hover{
  background: rgba(124,58,237,0.28) !important;
  border-color: rgba(236,72,153,0.55) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,0.34),
    0 0 0 5px rgba(236,72,153,0.18) !important;
}


/* =========================================================
   GLOBAL BUTTON GRADIENT KILL V1 (no IG gradients anywhere)
   Marker: GLOBAL BUTTON GRADIENT KILL V1
   ========================================================= */

/* Any inline gradient buttons/links/submit -> force site style */
button[style*="linear-gradient"],
a[style*="linear-gradient"],
input[type="submit"][style*="linear-gradient"]{
  background-image: none !important;
  background: rgba(124,58,237,0.22) !important;
  border: 1px solid rgba(236,72,153,0.40) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.30), 0 0 0 4px rgba(236,72,153,0.14) !important;
}

/* Our Create pending class -> same site style */
.btn-create-pending{
  background-image: none !important;
  background: rgba(124,58,237,0.22) !important;
  border: 1px solid rgba(236,72,153,0.40) !important;
  color: #fff !important;
}


/* =========================================================
   SITE CTA GRADIENT V1 (violet->pink)
   Marker: SITE CTA GRADIENT V1
   ========================================================= */
:root{
  --cta-g1: rgba(124,58,237,0.98);
  --cta-g2: rgba(236,72,153,0.96);
  --cta-grad: linear-gradient(135deg, var(--cta-g1), var(--cta-g2));
  --cta-grad-hover: linear-gradient(135deg, rgba(124,58,237,1), rgba(236,72,153,1));
  --cta-border: rgba(255,255,255,0.14);
  --cta-glow: rgba(236,72,153,0.16);
}

/* any button/link with inline gradient (Apply filters etc.) */
button[style*="linear-gradient"],
a[style*="linear-gradient"],
input[type="submit"][style*="linear-gradient"]{
  background: var(--cta-grad) !important;
  background-image: var(--cta-grad) !important;
  border: 1px solid var(--cta-border) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.30), 0 0 0 4px var(--cta-glow) !important;
}

/* our Create pending class */
.btn-create-pending{
  background: var(--cta-grad) !important;
  background-image: var(--cta-grad) !important;
  border: 1px solid var(--cta-border) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.30), 0 0 0 4px var(--cta-glow) !important;
}
.btn-create-pending:hover,
button[style*="linear-gradient"]:hover,
a[style*="linear-gradient"]:hover,
input[type="submit"][style*="linear-gradient"]:hover{
  background: var(--cta-grad-hover) !important;
  background-image: var(--cta-grad-hover) !important;
}


/* =========================================================
   SITE CTA GRADIENT FINAL V1 (violet -> pink, site-only)
   Marker: SITE CTA GRADIENT FINAL V1
   ========================================================= */
:root{
  --cta1:#7c3aed; /* violet */
  --cta2:#ec4899; /* pink */
  --cta-grad: linear-gradient(135deg, var(--cta1), var(--cta2));
  --cta-grad-hover: linear-gradient(135deg, #8b5cf6, #f472b6);
  --cta-border: rgba(255,255,255,0.16);
  --cta-glow: rgba(236,72,153,0.18);
}

/* CTA targets:
   - anything that currently uses inline linear-gradient (Apply filters / Create pending etc.)
   - primary buttons
*/
button[style*="linear-gradient"],
a[style*="linear-gradient"],
input[type="submit"][style*="linear-gradient"],
.btn-primary, .btn.primary, .btn--primary, .cs-btn.primary,
.btn-create-pending{
  background: var(--cta-grad) !important;
  background-image: var(--cta-grad) !important;
  border: 1px solid var(--cta-border) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.30), 0 0 0 4px var(--cta-glow) !important;
  border-radius: 999px !important;
}

button[style*="linear-gradient"]:hover,
a[style*="linear-gradient"]:hover,
input[type="submit"][style*="linear-gradient"]:hover,
.btn-primary:hover, .btn.primary:hover, .btn--primary:hover, .cs-btn.primary:hover,
.btn-create-pending:hover{
  background: var(--cta-grad-hover) !important;
  background-image: var(--cta-grad-hover) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.34), 0 0 0 5px rgba(236,72,153,0.22) !important;
}


/* =========================================================
   SITE CTA GRADIENT V2 UNIVERSAL (all CTA buttons)
   Marker: SITE CTA GRADIENT V2 UNIVERSAL
   ========================================================= */
:root{
  --cta1:#7c3aed; /* violet */
  --cta2:#ec4899; /* pink */
  --cta-grad: linear-gradient(135deg, var(--cta1), var(--cta2));
  --cta-grad-hover: linear-gradient(135deg, #8b5cf6, #f472b6);
  --cta-border: rgba(255,255,255,0.16);
  --cta-glow: rgba(236,72,153,0.18);
}

/* Universal CTA targets */
.btn-primary, .btn.primary, .btn--primary, .cs-btn.primary,
.btn-create-pending,
button[type="submit"], input[type="submit"],
/* common “cta/gradient/apply” classes */
.btn[class*="cta"], .btn[class*="gradient"], .btn[class*="apply"],
.cs-btn[class*="cta"], .cs-btn[class*="gradient"], .cs-btn[class*="apply"],
/* inline gradients */
button[style*="linear-gradient"], a[style*="linear-gradient"], input[type="submit"][style*="linear-gradient"]{
  background: var(--cta-grad) !important;
  background-image: var(--cta-grad) !important;
  border: 1px solid var(--cta-border) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.30), 0 0 0 4px var(--cta-glow) !important;
}

.btn-primary:hover, .btn.primary:hover, .btn--primary:hover, .cs-btn.primary:hover,
.btn-create-pending:hover,
button[type="submit"]:hover, input[type="submit"]:hover,
.btn[class*="cta"]:hover, .btn[class*="gradient"]:hover, .btn[class*="apply"]:hover,
.cs-btn[class*="cta"]:hover, .cs-btn[class*="gradient"]:hover, .cs-btn[class*="apply"]:hover,
button[style*="linear-gradient"]:hover, a[style*="linear-gradient"]:hover, input[type="submit"][style*="linear-gradient"]:hover{
  background: var(--cta-grad-hover) !important;
  background-image: var(--cta-grad-hover) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.34), 0 0 0 5px rgba(236,72,153,0.22) !important;
}


/* =========================================================
   SITE CTA GRADIENT V4 (btn-cta + pending + primary)
   Marker: SITE CTA GRADIENT V4
   ========================================================= */
:root{
  --cta1:#7c3aed;
  --cta2:#ec4899;
  --cta-grad: linear-gradient(135deg, var(--cta1), var(--cta2));
  --cta-grad-hover: linear-gradient(135deg, #8b5cf6, #f472b6);
  --cta-border: rgba(255,255,255,0.16);
  --cta-glow: rgba(236,72,153,0.18);
}

.btn-cta,
.btn-create-pending,
.btn-primary, .btn.primary, .btn--primary, .cs-btn.primary{
  background: var(--cta-grad) !important;
  background-image: var(--cta-grad) !important;
  border: 1px solid var(--cta-border) !important;
  color:#fff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.30), 0 0 0 4px var(--cta-glow) !important;
}
.btn-cta:hover,
.btn-create-pending:hover,
.btn-primary:hover, .btn.primary:hover, .btn--primary:hover, .cs-btn.primary:hover{
  background: var(--cta-grad-hover) !important;
  background-image: var(--cta-grad-hover) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.34), 0 0 0 5px rgba(236,72,153,0.22) !important;
}


/* =========================================================
   CTA SIZE V1 (consistent height)
   Marker: CTA SIZE V1
   ========================================================= */
.btn-cta, .btn-create-pending, .btn-primary{
  padding: 10px 16px !important;
  font-weight: 800;
  letter-spacing: -0.01em;
}


/* =========================================================
   DASHBOARD ACTION BAR V2 (make it a card, not 2nd navbar)
   Marker: DASHBOARD ACTION BAR V2
   ========================================================= */

/* The whole actions row becomes a subtle glass card */
.cm-dashboard .cm-actions{
  padding: 12px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(10px);
  gap: 10px !important;
}

/* Points pill: glass, not cyan */
.cm-dashboard .cm-pill-top{
  border: 1px solid var(--border2) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
}

/* Featured pill: keep it “ghost” */
.cm-dashboard .cm-pill-top.feat,
.cm-dashboard a.cm-pill-top{
  border: 1px solid var(--border2) !important;
  background: rgba(255,255,255,0.05) !important;
  color: var(--text) !important;
}

/* Buttons inside action bar: ghost baseline */
.cm-dashboard .cm-btn{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--border2) !important;
  color: var(--text) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Primary CTA (Open inbox): use site gradient */
.cm-dashboard .cm-btn--primary{
  background: var(--cta-grad) !important;
  background-image: var(--cta-grad) !important;
  border: 1px solid var(--cta-border) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.30), 0 0 0 4px var(--cta-glow) !important;
}

/* Hover */
.cm-dashboard .cm-btn:hover{
  border-color: var(--focus-border) !important;
}
.cm-dashboard .cm-btn--primary:hover{
  background: var(--cta-grad-hover) !important;
  background-image: var(--cta-grad-hover) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.34), 0 0 0 5px rgba(236,72,153,0.22) !important;
}

/* Count pill: match glass */
.cm-dashboard .cm-count{
  background: rgba(0,0,0,0.20) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: #fff !important;
}


/* =========================================================
   DASH PANEL CSS V1
   Marker: DASH PANEL CSS V1
   ========================================================= */
html.dash-lock, body.dash-lock{ overflow: hidden !important; }

.dash-panel{
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: none;
}
.dash-panel.is-open{ display:block; }

.dash-panel__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}

.dash-panel__card{
  position: relative;
  width: min(1180px, calc(100% - 40px));
  height: min(780px, calc(100% - 60px));
  margin: 30px auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15,23,42,0.78);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  overflow: hidden;
}

.dash-panel__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

.dash-panel__title{
  font-weight: 900;
  color: var(--text);
}

.dash-panel__actions{
  display:flex;
  gap: 10px;
  align-items:center;
}

.dash-panel__frame{
  width: 100%;
  height: calc(100% - 52px);
  border: 0;
  background: transparent;
}


/* =========================================================
   DASH EMBED CSS V1 (inline, no modal)
   Marker: DASH EMBED CSS V1
   ========================================================= */

/* When embed is open: hide everything under header except the embed pane */
.cm-dashboard.dash-embed-open .cm-wrap > :not(.cm-header):not(#dashEmbedPane){
  display: none !important;
}

/* Embed pane */
.dash-embed{
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.dash-embed__bar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

.dash-embed__title{
  font-weight: 900;
  color: var(--text);
  flex: 1;
  text-align: center;
  opacity: .95;
}

.dash-embed__frame{
  width: 100%;
  height: min(74vh, 900px);
  border: 0;
  background: transparent;
}


/* =========================================================
   CREATOR SUBNAV V1 (persistent creator navigation)
   Marker: CREATOR SUBNAV V1
   ========================================================= */
.creator-subnav{
  margin: 14px 0 18px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;

  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
}

.csnav-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  text-decoration:none;
  font-weight: 800;
}

.csnav-pill.is-active{
  border-color: var(--focus-border);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.csnav-pill--meta{
  background: rgba(255,255,255,0.04);
}

.csnav-muted{
  color: var(--muted);
  font-weight: 800;
}

.csnav-pill--cta{
  background: var(--cta-grad) !important;
  background-image: var(--cta-grad) !important;
  border: 1px solid var(--cta-border) !important;
  color:#fff !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.30), 0 0 0 4px var(--cta-glow) !important;
}

.csnav-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.16);
  font-weight: 900;
}

@media (max-width: 860px){
  .creator-subnav{ justify-content:flex-start; }
}

/* =========================================================
   CREATOR SUBNAV STICKY V1
   Marker: CREATOR SUBNAV STICKY V1
   ========================================================= */
.creator-subnav{
  position: sticky;
  top: calc(var(--nav-h, 0px) + 12px);
  z-index: 200;
}

/* =========================================================
   CREATOR SUBNAV UNIFY WIDTH V2 (same block on ALL pages)
   Marker: CREATOR SUBNAV UNIFY WIDTH V2
   ========================================================= */
.creator-subnav{
  width: 100% !important;
  max-width: var(--container-max, 1100px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 1200px){
  .creator-subnav{ width: calc(100% - 32px) !important; }
}


/* =========================================================
   CREATOR SUBNAV SHELL V1 (always identical on all pages)
   Marker: CREATOR SUBNAV SHELL V1
   ========================================================= */
.creator-subnav-shell{
  position: sticky;
  top: calc(var(--nav-h, 0px) + 12px);
  z-index: 220;

  width: 100%;
  max-width: var(--container-max, 1100px);
  margin: 14px auto 18px;
  padding: 0 var(--page-pad, 16px);
}

/* ensure the inner bar uses full width of the shell */
.creator-subnav{
  width: 100% !important;
  margin: 0 !important;
}

/* if older sticky rules exist, neutralize them */
.creator-subnav{ position: static !important; }


/* =========================================================
   CREATOR SUBNAV MATCH CONTAINER V3 (no separate “window”)
   Marker: CREATOR SUBNAV MATCH CONTAINER V3
   ========================================================= */
.creator-subnav{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   CREATOR SUBNAV MATCH CONTAINER V4 (single unified block)
   Marker: CREATOR SUBNAV MATCH CONTAINER V4
   ========================================================= */
.creator-subnav{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   CREATOR SUBNAV IN-BLOCK V5 (match inner container)
   Marker: CREATOR SUBNAV IN-BLOCK V5
   ========================================================= */
.creator-subnav{
  width: 100% !important;
  max-width: none !important;
  margin: 12px 0 18px !important;
}

/* =========================================================
   CREATOR TAB STRIP V1 (in-block tabs)
   Marker: CREATOR TAB STRIP V1
   ========================================================= */
.creator-subnav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:12px 12px;
  margin: 10px 0 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(90deg,
      rgba(170,70,255,.18),
      rgba(255,85,190,.14),
      rgba(255,160,85,.10)
    );
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.creator-subnav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(15,18,25,.35);
  color: rgba(255,255,255,.92);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.creator-subnav a:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  background: rgba(15,18,25,.46);
}

.creator-subnav a.is-active,
.creator-subnav a[aria-current="page"]{
  border-color: rgba(255,255,255,.26);
  background:
    linear-gradient(90deg,
      rgba(170,70,255,.26),
      rgba(255,85,190,.20),
      rgba(255,160,85,.14)
    );
}

main.cm-pjax-loading{
  opacity:.72;
  pointer-events:none;
  filter: saturate(1.05);
}

/* =========================================================
   CM_CREATOR_SUBNAV_STYLE_V1 (internal creator tabs)
   ========================================================= */
.creator-subnav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:center;
  margin: 12px 0 18px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,12,18,.35);
  backdrop-filter: blur(10px);
}
.csnav-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: 13px;
}
.csnav-pill:hover{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.09);
}
.csnav-pill.is-active{
  border-color: rgba(255,85,190,.45);
  box-shadow: 0 0 0 3px rgba(255,85,190,.14);
}
.csnav-pill.is-mute{ opacity:.9; }
.csnav-badge{
  min-width: 22px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,85,190,.22);
  border: 1px solid rgba(255,85,190,.25);
}

/* =========================================================
   CM_CREATOR_SUBNAV_FORCE_VISIBLE_V1
   Makes the internal creator subnav impossible to hide.
   ========================================================= */
.creator-subnav{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:50 !important;
}
.creator-subnav *{
  visibility:visible !important;
  opacity:1 !important;
}

/* =========================================================
   CM_CREATOR_SUBNAV_STYLE_V3 (match screenshot strip)
   ========================================================= */
.creator-subnav{
  width: 100%;
  max-width: 1120px;
  margin: 18px auto 26px;
  padding: 16px 18px;

  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  align-items:center;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(135deg,
      rgba(170,70,255,.16),
      rgba(255,85,190,.12),
      rgba(10,12,18,.46)
    );
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}

.csnav-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 13px;

  border-radius: 999px;
  text-decoration:none;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12,14,22,.40);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 13px;
}

.csnav-pill:hover{
  border-color: rgba(255,255,255,.22);
  background: rgba(12,14,22,.52);
}

.csnav-pill.is-active{
  border-color: rgba(255,85,190,.55);
  box-shadow: 0 0 0 3px rgba(255,85,190,.16);
}

.csnav-pill.is-mute{ opacity:.92; }

.csnav-badge{
  min-width: 22px;
  height: 18px;
  padding: 0 7px;

  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size: 12px;
  font-weight: 800;

  background: rgba(255,85,190,.22);
  border: 1px solid rgba(255,85,190,.28);
}

/* CM_PJAX_LOADING_V2 */
main.cm-pjax-loading{
  opacity:.72;
  pointer-events:none;
}

/* CM_CREATOR_PANE_LOADING_V1 */
[data-creator-pane].cm-pane-loading{
  opacity:.72;
  pointer-events:none;
}

/* CM_TOPNAV_CREATOR_SINGLE_LINK_V1
   In the TOP navbar, keep ONLY /creator/dashboard visible (creator links move to internal tabs).
*/
header a[href^="/creator/"]:not([href="/creator/dashboard"]){
  display:none !important;
}

/* CM_CREATOR_PANE_LOADING_STABLE_V1 */
[data-creator-pane].cm-pane-loading{
  opacity:.72;
  pointer-events:none;
}

/* CM_TOPNAV_CREATOR_MINIMAL_V1
   Keep ONLY /creator/dashboard in the TOP navbar.
*/
header a[href="/creator/featured"],
header a[href="/creator/inbox"],
header a[href="/creator/profile"],
header a[href="/creator/edit"],
header nav a[href="/creator/featured"],
header nav a[href="/creator/inbox"],
nav a[href="/creator/profile"],
header nav a[href="/creator/edit"]{
  display:none !important;
}

/* =========================================================
   CM_CREATOR_SUBNAV_STYLE_FINAL_V1 (strip like screenshot)
   ========================================================= */
.creator-subnav{
  width: 100%;
  max-width: 1120px;
  margin: 18px auto 26px;
  padding: 16px 18px;

  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg,
    rgba(170,70,255,.16),
    rgba(255,85,190,.12),
    rgba(10,12,18,.46)
  );
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}

.csnav-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 9px 13px;
  border-radius: 999px;
  text-decoration: none;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12,14,22,.40);
  color: rgba(255,255,255,.92);

  font-weight: 700;
  font-size: 13px;
}

.csnav-pill:hover{
  border-color: rgba(255,255,255,.22);
  background: rgba(12,14,22,.52);
}

.csnav-pill.is-active{
  border-color: rgba(255,85,190,.55);
  box-shadow: 0 0 0 3px rgba(255,85,190,.16);
}

.csnav-pill.is-mute{ opacity:.92; }

.csnav-pill--cta{
  border-color: rgba(255,85,190,.28);
}

.csnav-badge{
  min-width: 22px;
  height: 18px;
  padding: 0 7px;

  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 800;

  background: rgba(255,85,190,.22);
  border: 1px solid rgba(255,85,190,.28);
}

/* =========================================================
   CM_CREATOR_SUBNAV_STYLE_FINAL_V2 (LOCKED final variant)
   Matches the screenshot strip.
   ========================================================= */
.creator-subnav{
  width: 100%;
  max-width: 1120px;
  margin: 18px auto 26px;
  padding: 16px 18px;

  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg,
    rgba(170,70,255,.16),
    rgba(255,85,190,.12),
    rgba(10,12,18,.46)
  );
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.csnav-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 9px 13px;
  border-radius: 999px;
  text-decoration: none;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12,14,22,.40);
  color: rgba(255,255,255,.92);

  font-weight: 700;
  font-size: 13px;
}
.csnav-pill:hover{
  border-color: rgba(255,255,255,.22);
  background: rgba(12,14,22,.52);
}
.csnav-pill.is-active{
  border-color: rgba(255,85,190,.55);
  box-shadow: 0 0 0 3px rgba(255,85,190,.16);
}
.csnav-pill.is-mute{ opacity:.92; }
.csnav-pill--cta{ border-color: rgba(255,85,190,.28); }
.csnav-badge{
  min-width: 22px;
  height: 18px;
  padding: 0 7px;

  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 800;

  background: rgba(255,85,190,.22);
  border: 1px solid rgba(255,85,190,.28);
}

/* =========================================================
   CM_CREATOR_SUBNAV_STYLE_FINAL_V2 (LOCKED final variant)
   Matches the screenshot strip.
   ========================================================= */
.creator-subnav{
  width: 100%;
  max-width: 1120px;
  margin: 18px auto 26px;
  padding: 16px 18px;

  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg,
    rgba(170,70,255,.16),
    rgba(255,85,190,.12),
    rgba(10,12,18,.46)
  );
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.csnav-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 9px 13px;
  border-radius: 999px;
  text-decoration: none;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12,14,22,.40);
  color: rgba(255,255,255,.92);

  font-weight: 700;
  font-size: 13px;
}
.csnav-pill:hover{
  border-color: rgba(255,255,255,.22);
  background: rgba(12,14,22,.52);
}
.csnav-pill.is-active{
  border-color: rgba(255,85,190,.55);
  box-shadow: 0 0 0 3px rgba(255,85,190,.16);
}
.csnav-pill.is-mute{ opacity:.92; }
.csnav-pill--cta{ border-color: rgba(255,85,190,.28); }
.csnav-badge{
  min-width: 22px;
  height: 18px;
  padding: 0 7px;

  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 800;

  background: rgba(255,85,190,.22);
  border: 1px solid rgba(255,85,190,.28);
}



/* =========================================================
   CM_CREATOR_SUBNAV_STYLE_LOCKED_V1
   Inner tabs strip — matches the screenshot.
   ========================================================= */

/* the strip */
main .creator-subnav{
  width: 100% !important;
  max-width: 1120px !important;
  margin: 18px auto 26px !important;
  padding: 16px 18px !important;

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

  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.12) !important;

  background: linear-gradient(135deg,
    rgba(170,70,255,.16),
    rgba(255,85,190,.12),
    rgba(10,12,18,.46)
  ) !important;

  backdrop-filter: blur(12px) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.35) !important;
}

/* pills */
main .creator-subnav .csnav-pill{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 9px 13px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  line-height: 1 !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(12,14,22,.40) !important;
  color: rgba(255,255,255,.92) !important;

  font-weight: 700 !important;
  font-size: 13px !important;
}

main .creator-subnav .csnav-pill:hover{
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(12,14,22,.52) !important;
}

/* active */
main .creator-subnav .csnav-pill.is-active,
main .creator-subnav .csnav-pill[aria-current="page"]{
  border-color: rgba(255,85,190,.55) !important;
  box-shadow: 0 0 0 3px rgba(255,85,190,.16) !important;
}

/* meta + CTA */
main .creator-subnav .csnav-pill.is-mute{ opacity: .92 !important; }
main .creator-subnav .csnav-pill--cta{ border-color: rgba(255,85,190,.28) !important; }

/* badge */
main .creator-subnav .csnav-badge{
  min-width: 22px !important;
  height: 18px !important;
  padding: 0 7px !important;

  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 12px !important;
  font-weight: 800 !important;

  background: rgba(255,85,190,.22) !important;
  border: 1px solid rgba(255,85,190,.28) !important;
}

/* mobile tighten */
@media (max-width: 720px){
  main .creator-subnav{
    max-width: 100% !important;
    margin: 14px 12px 18px !important;
    padding: 12px 12px !important;
    gap: 10px !important;
  }
  main .creator-subnav .csnav-pill{
    padding: 8px 11px !important;
    font-size: 12.5px !important;
  }
}

/* =========================================================
   CM_CREATOR_SUBNAV_SHELL_STYLE_V1 (match screenshot)
   ========================================================= */

.creator-subnav-shell{
  width:100% !important;
  max-width:1120px !important;
  margin:18px auto 26px !important;
  padding:16px 18px !important;

  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:linear-gradient(135deg,
    rgba(170,70,255,.16),
    rgba(255,85,190,.12),
    rgba(10,12,18,.46)
  ) !important;

  backdrop-filter:blur(12px) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.35) !important;
}

.creator-subnav{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  justify-content:center !important;
  align-items:center !important;

  /* IMPORTANT: bar itself must be transparent (strip is on shell) */
  background:transparent !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
}

.csnav-pill{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;

  padding:9px 13px !important;
  border-radius:999px !important;
  text-decoration:none !important;
  line-height:1 !important;

  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(12,14,22,.40) !important;
  color:rgba(255,255,255,.92) !important;

  font-weight:700 !important;
  font-size:13px !important;
}

.csnav-pill:hover{
  border-color:rgba(255,255,255,.22) !important;
  background:rgba(12,14,22,.52) !important;
}

.csnav-pill.is-active,
.csnav-pill[aria-current="page"]{
  border-color:rgba(255,85,190,.55) !important;
  box-shadow:0 0 0 3px rgba(255,85,190,.16) !important;
}

.csnav-pill.is-mute{ opacity:.92 !important; }
.csnav-pill--cta{ border-color:rgba(255,85,190,.28) !important; }

.csnav-badge{
  min-width:22px !important;
  height:18px !important;
  padding:0 7px !important;
  border-radius:999px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:12px !important;
  font-weight:800 !important;

  background:rgba(255,85,190,.22) !important;
  border:1px solid rgba(255,85,190,.28) !important;
}

@media (max-width:720px){
  .creator-subnav-shell{
    max-width:100% !important;
    margin:14px 12px 18px !important;
    padding:12px 12px !important;
  }
  .csnav-pill{ padding:8px 11px !important; font-size:12.5px !important; }
}

/* CM_HIDE_TOP_FEATURED_ONLY_V1
   Hide Featured in TOP nav only (do NOT touch inner tabs).
*/
/* CM_UNHIDE_FEATURED_V1: removed global hide for /creator/featured */
a[href="/featured"]:not(.csnav-pill){ display:none !important; }