/* ==========================================================================
   PROMURA, Logged-in app shell
   Layout: 3 columns (sidebar / main / right rail), responsive.
   Brand: cream background, hot pink accent, Inter UI + Fraunces display.
   ========================================================================== */

:root {
  --white: #ffffff;
  --cream: #faf4eb;
  --cream-deep: #f4ece0;
  --cream-rule: #ece3d0;
  --ink: #0a0a0a;
  --ink-soft: #1a1a1a;
  --text: #141414;
  --text-muted: #5a5a5a;
  --text-faint: #8a8a8a;
  --pink: #ff3daa;
  --pink-hover: #e91e92;
  --pink-soft: #ffe5f2;
  --pink-tint: rgba(255, 61, 170, 0.08);
  --rule: #e8e0d1;
  --rule-strong: #d4c8b0;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.08);
  --radius-sm: 0.5rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--text);
  font: 400 15px/1.55 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 1rem 0; }

.pink { color: var(--pink); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.serif { font-family: 'Fraunces', 'Inter', serif; }
.eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   3-COLUMN APP LAYOUT
   --------------------------------------------------------------------------*/
.app {
  display: grid;
  grid-template-columns: 248px minmax(0, 720px) 320px;
  gap: 1.75rem;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 1.5rem;
  min-height: 100vh;
}

@media (max-width: 1180px) {
  .app { grid-template-columns: 220px minmax(0, 1fr); }
  .app-rail { display: none; }
}

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; padding: 0 0 5rem; gap: 0; }
  .app-sidebar { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; z-index: 50; }
}

/* --------------------------------------------------------------------------
   SIDEBAR (left rail)
   --------------------------------------------------------------------------*/
.app-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0.5rem 1rem 0;
  border-right: 1px solid var(--rule);
}

.app-brand {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-size: 2.4rem;
  line-height: 1;
  padding: 0.5rem 0.75rem 1.25rem;
  display: inline-flex;
  align-items: baseline;
  color: var(--ink);
}
.app-brand .pink { color: var(--pink); margin-left: -2px; }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
}

.sidebar-nav .item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-md);
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  position: relative;
}
.sidebar-nav .item:hover { background: var(--cream-deep); }
.sidebar-nav .item.active { background: var(--pink-tint); color: var(--pink); }
.sidebar-nav .item .icon { width: 22px; height: 22px; flex-shrink: 0; opacity: 0.85; }
.sidebar-nav .item.active .icon { opacity: 1; }

.sidebar-nav .badge {
  margin-left: auto;
  background: var(--pink);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  min-width: 1.25rem;
  text-align: center;
}

.sidebar-creator-action {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--pink);
  color: white;
  border: 0;
  border-radius: var(--radius-pill);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s;
  width: calc(100% - 0.5rem);
  margin-left: 0.25rem;
}
.sidebar-creator-action:hover { background: var(--pink-hover); }

.sidebar-account {
  margin-top: auto;
  padding: 1rem 0.5rem 0;
  border-top: 1px solid var(--rule);
  margin-right: 0.5rem;
}
.sidebar-account .me {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
}
.sidebar-account .me:hover { background: var(--cream-deep); }
.sidebar-account .avatar {
  /* Keep the chip avatar a perfect circle even when the display name is
     long. Without flex-shrink:0 flexbox squeezes it horizontally and the
     border-radius:50% renders as an oval. background-size:cover keeps any
     uploaded photo proportional. */
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pink) linear-gradient(135deg, var(--pink), #ff7ec7);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 0.875rem;
  overflow: hidden;
}
.sidebar-account .who { display: flex; flex-direction: column; min-width: 0; }
.sidebar-account .who .name { font-weight: 700; font-size: 0.875rem; }
.sidebar-account .who .handle { color: var(--text-muted); font-size: 0.78rem; }

/* --------------------------------------------------------------------------
   MAIN COLUMN
   --------------------------------------------------------------------------*/
.app-main {
  padding: 1.5rem 0;
  min-width: 0;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  gap: 0.45rem;
}
/* On phones, stack the title and any subtitle / right-side text under each
   other so we don't crowd the page name (Saved, Live now, Insights, etc.). */
@media (max-width: 600px) {
  .main-header { flex-direction: column; align-items: flex-start; }
  .main-header > * { width: 100%; }
  .main-header .tabs { gap: 1.1rem; }
}
.main-header h1 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.main-header .tabs {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}
.main-header .tab {
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.main-header .tab.active { color: var(--ink); border-bottom-color: var(--pink); }

/* Composer (creator-only "What's new" panel at top of feed) */
.composer {
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.85rem;
}
.composer .avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--pink) linear-gradient(135deg, var(--pink), #ff7ec7);
}
.composer textarea {
  flex: 1;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  font-size: 1rem;
  min-height: 60px;
}
.composer .actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.composer button.post {
  background: var(--pink);
  color: white;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.5rem;
  font-weight: 800;
  cursor: pointer;
  margin-left: auto;
}
.composer button.post:hover { background: var(--pink-hover); }
.composer button.post:disabled { opacity: 0.45; cursor: default; }

/* Feed */
.feed { display: flex; flex-direction: column; gap: 1rem; }

.post-card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.post-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.1rem 0.75rem;
}
.post-head .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cream-deep) center/cover no-repeat;
  flex-shrink: 0;
}
.post-head .who { line-height: 1.2; }
.post-head .name { font-weight: 700; font-size: 0.95rem; }
.post-head .meta { color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; }
.post-head .more { margin-left: auto; padding: 0.5rem; color: var(--text-muted); cursor: pointer; }

.post-body { padding: 0 1.1rem 0.85rem; line-height: 1.55; }
.post-body p { margin: 0; }

.post-media {
  position: relative;
  background: var(--ink);
  aspect-ratio: 4/5;
  overflow: hidden;
}
.post-media img, .post-media video, .post-media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.post-media.locked img { filter: blur(36px) brightness(0.6); transform: scale(1.1); }

.post-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.85rem;
  text-align: center;
  color: white;
  cursor: pointer;
}
.post-lock .pill {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 1rem;
}
.post-lock .hint {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--rule);
}
.post-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.25rem 0;
  transition: color 0.15s;
}
.post-action:hover, .post-action.active { color: var(--pink); }
.post-action .icon { width: 20px; height: 20px; }
.post-tip { margin-left: auto; }

/* --------------------------------------------------------------------------
   RIGHT RAIL
   --------------------------------------------------------------------------*/
.app-rail {
  padding: 1.5rem 0;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
}

.rail-search {
  position: relative;
  margin-bottom: 1.5rem;
}
.rail-search input {
  width: 100%;
  background: var(--cream-deep);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.75rem 1rem 0.75rem 2.4rem;
  outline: none;
  font-size: 0.92rem;
  transition: border-color 0.15s, background 0.15s;
}
.rail-search input:focus { background: white; border-color: var(--pink); }
.rail-search .icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

.rail-search-results {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 10;
  max-height: 380px;
  overflow-y: auto;
  display: none;
}
.rail-search-results.open { display: block; }
.rail-search-results .group { padding: 0.5rem 0; }
.rail-search-results .group + .group { border-top: 1px solid var(--rule); }
.rail-search-results .group h6 { padding: 0.4rem 1rem; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.rail-search-results a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.rail-search-results a:hover { background: var(--cream-deep); }

.rail-card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.rail-card .title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 1rem 1.1rem 0.5rem;
  letter-spacing: -0.01em;
}
.rail-card .subtitle { color: var(--text-muted); font-size: 0.82rem; padding: 0 1.1rem 0.85rem; }

.suggestion {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  transition: background 0.15s;
}
.suggestion:hover { background: var(--cream-deep); }
.suggestion .avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--cream-deep) center/cover no-repeat;
  flex-shrink: 0;
}
.suggestion .who { flex: 1; min-width: 0; line-height: 1.25; }
.suggestion .name { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggestion .handle { color: var(--text-muted); font-size: 0.78rem; }
.suggestion .price {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pink);
  white-space: nowrap;
}

.rail-footer {
  padding: 1rem 0.5rem;
  font-size: 0.78rem;
  color: var(--text-faint);
  line-height: 1.6;
}
.rail-footer a { margin-right: 0.85rem; }

/* --------------------------------------------------------------------------
   EMPTY STATES
   --------------------------------------------------------------------------*/
.empty {
  text-align: center;
  padding: 4rem 1.5rem;
  color: var(--text-muted);
}
.empty h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.5rem; color: var(--ink); margin-bottom: 0.5rem; }
.empty p { max-width: 360px; margin: 0 auto 1.5rem; }
.empty .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--pink);
  color: white;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.75rem;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}
.empty .btn:hover { background: var(--pink-hover); }

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--cream-deep), #f0e6cf, var(--cream-deep));
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   DARK THEME (subscription area)
   Scoped to body.app-page, every authenticated page automatically inherits.
   Strategy: dark canvas + dark sidebar/rail/header chrome + cream-coloured
   cards stay bright. The cream-on-dark contrast keeps the editorial through-
   line from the public marketing pages while making the customer feel like
   they crossed into a private suite.
   ========================================================================== */

body.app-page {
  /* Canvas + chrome */
  --canvas: #0d0d10;          /* deep ink with the slightest warm bias */
  --canvas-raised: #16161b;   /* sidebar / rail / hover lift */
  --canvas-rule: rgba(255, 255, 255, 0.08);
  --canvas-rule-strong: rgba(255, 255, 255, 0.18);
  /* Text on the dark canvas */
  --on-canvas: #f5efe2;       /* warm off-white */
  --on-canvas-muted: #a39e92;
  --on-canvas-faint: #6f6c64;

  background: var(--canvas);
  color: var(--on-canvas);
}

/* Sidebar: dark with pink accent on active item */
body.app-page .app-sidebar {
  background: var(--canvas);
  border-right-color: var(--canvas-rule);
}
body.app-page .app-brand { color: var(--on-canvas); }
body.app-page .sidebar-nav .item { color: var(--on-canvas); }
body.app-page .sidebar-nav .item:hover { background: var(--canvas-raised); }
body.app-page .sidebar-nav .item.active {
  background: var(--pink-tint);
  color: var(--pink);
}
body.app-page .sidebar-account { border-top-color: var(--canvas-rule); }
body.app-page .sidebar-account .me:hover { background: var(--canvas-raised); }
body.app-page .sidebar-account .who .name { color: var(--on-canvas); }
body.app-page .sidebar-account .who .handle { color: var(--on-canvas-muted); }

/* Right rail */
body.app-page .app-rail { color: var(--on-canvas); }
body.app-page .rail-search input {
  background: var(--canvas-raised);
  color: var(--on-canvas);
}
body.app-page .rail-search input::placeholder { color: var(--on-canvas-faint); }
body.app-page .rail-search input:focus {
  background: var(--canvas-raised);
  border-color: var(--pink);
}
body.app-page .rail-search .icon { color: var(--on-canvas-muted); }
body.app-page .rail-footer { color: var(--on-canvas-faint); }

/* Main column header */
body.app-page .main-header { border-bottom-color: var(--canvas-rule); }
body.app-page .main-header h1 { color: var(--on-canvas); }
body.app-page .main-header .tab { color: var(--on-canvas-muted); }
body.app-page .main-header .tab.active {
  color: var(--on-canvas);
  border-bottom-color: var(--pink);
}
body.app-page .main-header .muted,
body.app-page p.muted { color: var(--on-canvas-muted); }

/* Cards keep cream so the editorial palette survives. Composer + post-card +
   rail-card + rail-search-results all use the white-on-cream treatment from
   the original tokens. We only need to flip a couple of states (hover, search
   results dropdown background) so they read on the dark canvas. */
body.app-page .rail-search-results {
  background: var(--cream);
  border-color: var(--cream-rule);
}
body.app-page .rail-search-results a:hover { background: var(--cream-deep); }
body.app-page .suggestion:hover { background: var(--cream-deep); }

/* Skeleton on dark canvas needs to use dark tones, not cream */
body.app-page .skeleton {
  background: linear-gradient(90deg, var(--canvas-raised), #1f1f26, var(--canvas-raised));
  background-size: 200% 100%;
}

/* Empty states sitting on the dark canvas (between cards) */
body.app-page .empty { color: var(--on-canvas-muted); }
body.app-page .empty h3 { color: var(--on-canvas); }

/* Mobile: when the sidebar collapses to a fixed bottom bar, give it a dark
   surface with a top border instead of leaning on the previous cream. */
@media (max-width: 760px) {
  body.app-page .app-sidebar {
    background: var(--canvas-raised);
    border-top: 1px solid var(--canvas-rule);
    border-right: 0;
  }
}

/* Hero gradient utility, ink → pink. Use sparingly on featured banners and
   "you just unlocked" moments. */
body.app-page .hero-gradient {
  background: linear-gradient(135deg, #0d0d10 0%, #2a0e1f 55%, var(--pink) 100%);
  color: white;
}

/* Mobile header (injected by app-shell.js) — dark variant.
   The base styles live in mobile.css; here we just flip surfaces and text. */
@media (max-width: 880px) {
  body.app-page .app-mobile-header {
    background-color: rgba(13, 13, 16, 0.92) !important;
    border-bottom-color: var(--canvas-rule) !important;
  }
  body.app-page .app-mobile-header .brand { color: var(--on-canvas) !important; }
  body.app-page .app-mobile-header .hamburger,
  body.app-page .app-mobile-header .header-icon { color: var(--on-canvas) !important; }
  body.app-page .app-mobile-header .hamburger:hover,
  body.app-page .app-mobile-header .header-icon:hover { background: var(--canvas-raised) !important; }

  /* Drawer sidebar background flips dark */
  body.app-page .app-sidebar {
    background: var(--canvas) !important;
    border-right-color: var(--canvas-rule) !important;
  }
}

/* ==========================================================================
   DARK THEME — contrast fixes for content cards.
   The dark canvas changes body color to a warm off-white. Anything inside a
   light card must reassert dark text or it disappears against the cream.
   ========================================================================== */

body.app-page .post-card,
body.app-page .composer,
body.app-page .rail-card,
body.app-page .rail-search-results,
body.app-page .suggestion,
body.app-page .section,
body.app-page .empty {
  color: var(--text);
}

/* Headings inside cards anchor on the dark ink token. */
body.app-page .rail-card .title,
body.app-page .post-card .post-head .name,
body.app-page .post-card .post-body,
body.app-page .post-body p,
body.app-page .suggestion .name,
body.app-page .composer textarea,
body.app-page .empty h3 {
  color: var(--text);
}

/* Active main-header tab on the dark canvas should highlight in cream, not
   pure ink — pure ink disappears. */
body.app-page .main-header .tab.active { color: var(--on-canvas); }

/* Composer textarea placeholder on the cream card */
body.app-page .composer textarea::placeholder { color: var(--text-faint); }

/* Section headers / cards that live directly on the dark canvas (admin,
   insights, studio all use .section as the primary container). The original
   styles weren't given an explicit background, but they end up white via
   .section { background: white } in some pages' inline styles. Force a
   cream surface so the dark canvas shows through where intended. */
body.app-page .section { background: white; color: var(--text); }
body.app-page .section .head h3,
body.app-page .section h3,
body.app-page .section h4 { color: var(--text); }

/* Tables inside dark-theme pages: rows + headers anchor on dark ink. */
body.app-page .table { color: var(--text); }
body.app-page .table th { color: var(--text-muted); }

/* Buttons that were styled as "white card with dark text" stay readable. */
body.app-page .btn-mini {
  background: white;
  color: var(--text);
  border-color: var(--rule);
}

/* Modal panels (top-up modal, others injected by app-shell.js) sit on top
   of the dim overlay and need their own contrast. They already hardcode
   white background inline, so the only fix is forcing dark text inside. */
body.app-page [data-credits-modal],
body.app-page [data-promura-modal] { color: var(--text); }

/* ==========================================================================
   Override-of-the-override fixes.
   The first card-text fix forced .empty + .rail-footer to var(--text). But
   empty states and the rail footer sit DIRECTLY on the dark canvas (no
   surrounding card), so they need the on-canvas tokens to stay legible.
   ========================================================================== */

/* Empty state on the dark canvas — restore light text */
body.app-page .empty {
  color: var(--on-canvas-muted) !important;
}
body.app-page .empty h3 {
  color: var(--on-canvas) !important;
}
body.app-page .empty p {
  color: var(--on-canvas-muted) !important;
}

/* Right-rail footer links sit on dark canvas — bump contrast */
body.app-page .rail-footer { color: var(--on-canvas-muted); }
body.app-page .rail-footer a { color: var(--on-canvas-muted); }
body.app-page .rail-footer a:hover { color: var(--on-canvas); }

/* But if .empty is INSIDE a card (admin tab panes use .section > .empty),
   restore dark text via the more-specific selector. */
body.app-page .section .empty,
body.app-page .post-card .empty {
  color: var(--text-muted) !important;
}
body.app-page .section .empty h3,
body.app-page .post-card .empty h3 {
  color: var(--ink) !important;
}

/* ==========================================================================
   DARK THEME — broad card-text override.
   The previous fix only targeted .section. Many pages use their own card
   class (.account-section, .studio-section, .ins-card, .top-fans-card,
   .vault-card, .stat-card, .lead-card, .panel, .live-panel). Force dark
   text + dark headings inside any of them.
   ========================================================================== */

body.app-page .account-section,
body.app-page .studio-section,
body.app-page .ins-card,
body.app-page .stat-card,
body.app-page .top-fans-card,
body.app-page .vault-card,
body.app-page .lead-card,
body.app-page .panel,
body.app-page .live-panel,
body.app-page .lock-card,
body.app-page .reset-card,
body.app-page .verify-card {
  color: var(--text);
}

/* Headings inside any card-like container — explicit dark ink so the cream
   surface stays readable. Catches inline <h3>/<h4> in account.html, studio,
   admin pages that don't set their own color. */
body.app-page .account-section h2,
body.app-page .account-section h3,
body.app-page .account-section h4,
body.app-page .account-section .head h3,
body.app-page .studio-section h2,
body.app-page .studio-section h3,
body.app-page .studio-section h4,
body.app-page .ins-card h3,
body.app-page .ins-card h4,
body.app-page .top-fans-card h3,
body.app-page .top-fans-card h4,
body.app-page .vault-card h3,
body.app-page .vault-card h4,
body.app-page .panel h3,
body.app-page .panel h4,
body.app-page .live-panel h3,
body.app-page .live-panel h4,
body.app-page .stat-card h3,
body.app-page .stat-card h4,
body.app-page .lead-card h3,
body.app-page .lead-card h4 { color: var(--text); }

/* Pack tile numbers (account.html buy-credits + the modal injected by
   app-shell.js). Both render Fraunces serif numbers without an explicit
   color — anchor them to dark ink. */
body.app-page [data-pack-list] button > div:first-child,
body.app-page [data-credits-modal-packs] button > div:first-child {
  color: var(--text);
}

/* Messages page — threads list + thread pane have white backgrounds but
   inherit body color (which is warm cream on the dark theme). Force dark
   text + dark headings so the conversation list and pane are readable. */
body.app-page .threads,
body.app-page .thread-pane,
body.app-page .messages-list { color: var(--text); }
body.app-page .threads .head,
body.app-page .thread-pane .head .who .name { color: var(--text); }
body.app-page .thread-pane .head .who .handle { color: var(--text-muted); }
body.app-page .thread-pane .back-link { color: var(--text-muted); }

/* Notifications page + leaderboards + insights all use card-like containers
   we may have missed. Add a catch-all: any element with white/cream background
   inside body.app-page should anchor on dark text. We can't easily target by
   computed style, but we can target common wrapper classes. */
body.app-page .notif-list,
body.app-page .leaderboard-card,
body.app-page .leader-row,
body.app-page .insight-panel,
body.app-page .messages-shell { color: var(--text); }
body.app-page .notif-list h3,
body.app-page .notif-list h4,
body.app-page .leaderboard-card h3,
body.app-page .leaderboard-card h4,
body.app-page .insight-panel h3,
body.app-page .insight-panel h4 { color: var(--text); }

/* Admin tabs sit on the dark canvas. Active state uses var(--ink) which
   disappears against the dark — flip to on-canvas. Inactive stays muted. */
body.app-page .admin-tabs { border-bottom-color: var(--canvas-rule); }
body.app-page .admin-tab { color: var(--on-canvas-muted); }
body.app-page .admin-tab.active { color: var(--on-canvas); }

/* Admin search box on the dark canvas — its `<input>` uses cream-soft from
   the page-local style. Override to a dark surface that matches the rest
   of the dark chrome so it doesn't pop as a giant cream pill. */
body.app-page .admin-search input {
  background: var(--canvas-raised);
  color: var(--on-canvas);
  border-color: var(--canvas-rule);
}
body.app-page .admin-search input:focus {
  background: var(--canvas-raised);
  border-color: var(--pink);
}
body.app-page .admin-search input::placeholder { color: var(--on-canvas-faint); }
body.app-page .admin-search-status { color: var(--on-canvas-muted); }
body.app-page .admin-search-results {
  background: var(--cream);
  border-color: var(--cream-rule);
  color: var(--text);
}

/* The leaderboards "tier amount" pills inside the cream pill render their
   amount label using muted color, which on a cream background is fine in
   light mode but the cream-on-cream looks faded with our extra bright pill
   palette. Raise the contrast on dark. */
body.app-page .tier-pill .amount,
body.app-page .leader-row .meta { color: var(--text-muted); }

/* Empty-state used on live-now.html sits on the dark canvas. The h2 hardcodes
   var(--ink) which is invisible on dark — flip to on-canvas. */
body.app-page .empty-state { color: var(--on-canvas-muted); }
body.app-page .empty-state h2,
body.app-page .empty-state h3 { color: var(--on-canvas); }
body.app-page .empty-state p { color: var(--on-canvas-muted); }

/* Insights header inline labels ("Platform-wide", "Bucket", "Range") are very
   faint on dark — promote to on-canvas-muted. */
body.app-page .main-header .muted,
body.app-page .main-header label,
body.app-page .main-header span:not([class]) { color: var(--on-canvas-muted); }

/* Studio admin "posting as" banner is a light pink card. Inner texts inherit
   the warm-cream body color — flip them to dark ink. */
body.app-page [data-admin-as-bar] { color: var(--text); }
body.app-page [data-admin-as-name] { color: var(--text); }

/* The .main-header > p.muted under the H1 (used on studio + insights) sits
   on dark canvas — bump from text-muted (#5a5a5a) to on-canvas-muted. */
body.app-page .main-header p.muted { color: var(--on-canvas-muted); }

/* "Mark all as read" and any button that hardcodes background:white inline
   but doesn't set color — they inherit body's warm cream. Force dark text. */
body.app-page .notif-actions button { color: var(--text); }

/* Catch-all for inline-styled white buttons across the app. Anything inside
   the auth-area body that uses background:white needs explicit dark text
   to stay readable. We can't reach inline `style="background:white"` selectors
   directly but most use a recognizable wrapper. */
body.app-page button[style*="background:white"],
body.app-page button[style*="background: white"],
body.app-page a[style*="background:white"] { color: var(--text); }

/* Studio "Switch creator" button uses background:var(--ink) — the dark ink
   is still ink, but its text "Switch creator" is white. That works. The
   "Clear" button next to it uses background:white + color:var(--ink) which
   already declares its color, so it survives. No fix needed for those.   */

/* Creator profile (creator.html) — bio card is white but text inherits warm
   cream from body. Force dark text. */
body.app-page .creator-bio { color: var(--text); }
body.app-page .creator-bio .tagline { color: var(--text); }

/* Creator profile CTA buttons (Message / Tip) use .btn.ghost which sets
   color: var(--ink) — invisible on dark canvas with transparent bg. Use
   on-canvas text instead. */
body.app-page .creator-cta-row .btn.ghost {
  color: var(--on-canvas);
  border-color: var(--canvas-rule-strong);
}
body.app-page .creator-cta-row .btn.ghost:hover { background: var(--canvas-raised); }

/* Creator tabs sit on dark canvas — the active state uses var(--ink). */
body.app-page .creator-tabs { border-bottom-color: var(--canvas-rule); }
body.app-page .creator-tabs li { color: var(--on-canvas-muted); }
body.app-page .creator-tabs li.active { color: var(--on-canvas); }

/* Manager-schedule page: .sched-tab.active uses var(--ink) — invisible on
   dark canvas. Flip to on-canvas. */
body.app-page .sched-tab { color: var(--on-canvas-muted); }
body.app-page .sched-tab.active { color: var(--on-canvas); }

/* Leaderboards: tier pills + row items have white backgrounds but inherit
   warm cream from body. Force dark text. */
body.app-page .lb-tier-row .pill { color: var(--text); }
body.app-page .lb-row { color: var(--text); }
body.app-page .lb-row .who .name { color: var(--text); }
body.app-page .lb-sub { color: var(--on-canvas-muted); }

/* ==========================================================================
   Round 2 contrast fixes from user feedback.
   ========================================================================== */

/* Studio tabs (Compose / Posts / Go live / Vault / Promo / Automations / Insights /
   Profile) sit on dark canvas. Active state hardcodes var(--ink) — invisible.
   Mirror the admin-tab treatment: muted on dark, on-canvas when active. */
body.app-page .studio-tabs { border-bottom-color: var(--canvas-rule); }
body.app-page .studio-tab { color: var(--on-canvas-muted); }
body.app-page .studio-tab.active { color: var(--on-canvas); }

/* Pro-Hub vault row meta (the @handle + title under each video card) sits
   directly on the dark canvas. handle uses var(--ink) → invisible. */
body.app-page .vault-meta .who-text .handle { color: var(--on-canvas); }
body.app-page .vault-meta .who-text .title { color: var(--on-canvas-muted); }

/* Manager-schedule + studio modals: both render a white card on a dim
   overlay. Inner text inherits warm cream from body — force dark. The
   blanket selector covers the schedule .modal AND the inline pick-creator
   modal injected by studio.html. */
body.app-page .modal,
body.app-page .modal h3,
body.app-page .modal h4,
body.app-page .modal label,
body.app-page .modal input,
body.app-page .modal select,
body.app-page .modal textarea {
  color: var(--text);
}
body.app-page .modal input::placeholder,
body.app-page .modal textarea::placeholder { color: var(--text-faint); }

/* Studio's inline pick-creator + scheduler modals (studio.html lines 641,
   831) inject overlay > white card directly. They aren't inside a class
   we can target generically. Use a position-fixed white card heuristic
   via inline-style attribute selectors. */
body.app-page div[style*="background:white"][style*="border-radius:14px"] {
  color: var(--text);
}
body.app-page div[style*="background:white"][style*="border-radius:14px"] h3 {
  color: var(--text);
}

/* Leaderboard top1 row (gold gradient) — the gradient washes out the
   "5 contributions" subtext. Anchor it on a darker grey for stronger
   contrast against the gold gradient. */
body.app-page .lb-row.top1 .who .meta { color: #5a3a00; }
body.app-page .lb-row.top2 .who .meta { color: #44464a; }
body.app-page .lb-row.top3 .who .meta { color: #5a3a1a; }

/* Studio inline modals: browsers normalize the style attr to "background: white"
   with a space — adjust the selector. */
body.app-page div[style*="background: white"][style*="border-radius: 14px"],
body.app-page div[style*="background: white"][style*="border-radius:14px"] {
  color: var(--text);
}
body.app-page div[style*="background: white"][style*="border-radius: 14px"] h3,
body.app-page div[style*="background: white"][style*="border-radius:14px"] h3,
body.app-page div[style*="background: white"][style*="border-radius: 14px"] button {
  color: var(--text);
}

/* Leaderboard top-3 meta: deep brown was still too washed against the gold
   gradient. Bump to pure ink for max contrast on the light tints. */
body.app-page .lb-row.top1 .who .meta,
body.app-page .lb-row.top2 .who .meta,
body.app-page .lb-row.top3 .who .meta { color: #2b2010 !important; font-weight: 600; }

/* Leaderboard rows on dark theme: ditch the white-gradient fill for a solid
   dark surface with a metal-coloured stroke. Text reads in light tones so
   contrast holds no matter how many entries come in. */
body.app-page .lb-row {
  background: var(--canvas-raised) !important;
  color: var(--on-canvas) !important;
  border-color: var(--canvas-rule) !important;
}
body.app-page .lb-row .rank { color: var(--on-canvas-muted); }
body.app-page .lb-row .who .name { color: var(--on-canvas) !important; }
body.app-page .lb-row .who .meta {
  color: var(--on-canvas-muted) !important;
  font-weight: 500;
}
body.app-page .lb-row .total { color: var(--on-canvas) !important; }

/* Top-3 rows: keep the metal accent as a thicker stroke instead of a fill.
   #1 = gold, #2 = silver, #3 = bronze. */
body.app-page .lb-row.top1 {
  border: 2px solid #fbcf32 !important;
  box-shadow: 0 0 0 1px rgba(251, 207, 50, 0.25);
}
body.app-page .lb-row.top1 .rank { color: #fbcf32; }
body.app-page .lb-row.top2 {
  border: 2px solid #c8c8c8 !important;
  box-shadow: 0 0 0 1px rgba(200, 200, 200, 0.25);
}
body.app-page .lb-row.top2 .rank { color: #d8d8d8; }
body.app-page .lb-row.top3 {
  border: 2px solid #cd853f !important;
  box-shadow: 0 0 0 1px rgba(205, 133, 63, 0.25);
}
body.app-page .lb-row.top3 .rank { color: #e29a55; }

/* The earlier round-14 brown for top-3 .who .meta was more specific
   (.top1 .who .meta beats .lb-row .who .meta) and won via !important.
   Override at equal specificity, source-order wins. */
body.app-page .lb-row.top1 .who .meta,
body.app-page .lb-row.top2 .who .meta,
body.app-page .lb-row.top3 .who .meta {
  color: var(--on-canvas-muted) !important;
}

/* Rank cell: white circle with brand-pink digits. Same treatment for every
   row, not just the top-3, so the leaderboard stays consistent as more
   entries roll in. Override the leftover gradient on top-1/2/3 .rank. */
body.app-page .lb-row .rank {
  background: white !important;
  color: var(--pink) !important;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  margin: 0 auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
body.app-page .lb-row.top1 .rank,
body.app-page .lb-row.top2 .rank,
body.app-page .lb-row.top3 .rank {
  background: white !important;
  color: var(--pink) !important;
}