:root {
  --bg: #0a0418;
  --bg-2: #120829;
  --surface: #1a0f33;
  --surface-2: #20143d;
  --line: #2a1d4a;
  --line-2: #3a2a60;
  --text: #f5f1ff;
  --text-soft: #b9aed8;
  --text-mute: #8a7fb0;
  --violet: #a78bfa;
  --violet-2: #8b5cf6;
  --violet-deep: #7c3aed;
  --violet-glow: rgba(167, 139, 250, .35);
  --pink: #ec4899;
  --shadow: 0 20px 60px -20px rgba(124, 58, 237, .4);
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulseGlow {
  0%, 100% { filter: drop-shadow(0 0 24px rgba(167, 139, 250, .5)); }
  50%      { filter: drop-shadow(0 0 48px rgba(167, 139, 250, .9)); }
}
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-3%, 2%) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(167, 139, 250, .7); }
  70%  { box-shadow: 0 0 0 10px rgba(167, 139, 250, 0); }
  100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
@keyframes navSlide {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 110px; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 58, 237, .25), transparent),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(167, 139, 250, .12), transparent),
    linear-gradient(180deg, #0a0418 0%, #0a0418 100%);
  background-attachment: fixed;
  position: relative;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(167, 139, 250, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, .04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
}
body::after {
  content: ""; position: fixed; inset: -10%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle 400px at 20% 30%, rgba(124, 58, 237, .18), transparent),
    radial-gradient(circle 500px at 80% 60%, rgba(236, 72, 153, .12), transparent),
    radial-gradient(circle 350px at 50% 90%, rgba(167, 139, 250, .14), transparent);
  animation: drift 22s ease-in-out infinite;
}
body > * { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 .4em;
  color: var(--text);
}
h1 {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}
h1 em {
  font-style: normal;
  background: linear-gradient(180deg, #d8c8ff 0%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px var(--violet-glow);
  filter: drop-shadow(0 0 24px rgba(167, 139, 250, .5));
  animation: pulseGlow 3.4s ease-in-out infinite;
  display: inline-block;
}
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700; }
h2 em {
  font-style: normal;
  background: linear-gradient(180deg, #d8c8ff 0%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 20px rgba(167, 139, 250, .4));
}
h3 { font-size: 1.15rem; font-weight: 600; }
p { color: var(--text-soft); margin: 0 0 1em; }

/* Nav — pill-shaped capsule */
.nav-wrap {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 50;
  padding: 0 clamp(16px, 4vw, 40px);
  display: flex; justify-content: center;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
  will-change: transform;
}
.nav-wrap.hidden {
  transform: translateY(calc(-100% - 24px));
  opacity: 0;
  pointer-events: none;
}
body { padding-top: 80px; }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  padding: 10px 12px 10px 24px;
  background: rgba(20, 8, 41, .7);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
  width: 100%; max-width: 1100px;
  animation: navSlide .6s ease-out;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nav.scrolled {
  background: rgba(14, 6, 30, .92);
  border-color: var(--line-2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}
.nav-links a { position: relative; transition: color .2s; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--pink));
  border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; line-height: 1; }
.brand-mark { display: inline-flex; align-items: center; line-height: 0; }
.brand-mark svg { display: block; }
.brand-name {
  font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1;
}
.brand-name::after { content: "."; color: var(--violet); }
.nav-links {
  display: flex; gap: 32px; flex: 1; justify-content: center;
  font-weight: 500; font-size: .92rem; color: var(--text-soft);
}
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; gap: 4px; align-items: center; }
.nav-actions .btn-ghost { color: var(--text-soft); border: none; padding: 10px 18px; }
.nav-actions .btn-ghost:hover { color: var(--text); background: transparent; transform: none; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  padding: 0; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  color: var(--text);
}
.nav-toggle span {
  display: block; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
  transform-origin: center;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; top: 0; left: 0; right: 0;
  background: rgba(10, 4, 24, .96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 90px 24px 32px;
  z-index: 49;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
  display: flex; flex-direction: column; gap: 6px;
  border-bottom: 1px solid var(--line-2);
}
.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu a {
  padding: 16px 18px; border-radius: 14px;
  font-size: 1.05rem; font-weight: 500;
  color: var(--text-soft);
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.mobile-menu a:hover, .mobile-menu a:active {
  background: rgba(167, 139, 250, .08);
  color: var(--text); border-color: var(--line);
}
.mobile-menu .mm-divider {
  height: 1px; background: var(--line); margin: 12px 4px;
}
.mobile-menu .mm-cta {
  text-align: center; padding: 16px;
  border-radius: 14px; font-weight: 600;
}
.mobile-menu .mm-cta.primary {
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff; border: none;
}
.mobile-menu .mm-cta.primary:hover { background: var(--violet-deep); }
.mobile-menu .mm-cta.ghost {
  border: 1px solid var(--line-2); color: var(--text);
}

@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav { padding: 8px 8px 8px 18px; gap: 12px; }
  .nav-actions .btn-violet { padding: 9px 14px; font-size: .85rem; }
  .nav-actions .btn-ghost { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 480px) {
  .nav-actions .btn-violet { display: none; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  font-weight: 600; font-size: .92rem;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, background .15s, color .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
  font-family: inherit;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: #fff; color: #0a0418;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .3), 0 8px 24px rgba(167, 139, 250, .15);
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(167, 139, 250, .35) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
  pointer-events: none;
}
.btn-primary:hover {
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .6), 0 12px 32px rgba(167, 139, 250, .35);
}
.btn-violet {
  background: linear-gradient(180deg, var(--violet-2) 0%, var(--violet-deep) 100%);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .4), 0 8px 24px rgba(124, 58, 237, .35);
}
.btn-violet:hover {
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .8), 0 12px 36px rgba(124, 58, 237, .55);
}
.btn-ghost { color: var(--text-soft); border-color: var(--line-2); background: transparent; }
.btn-ghost:hover { color: var(--text); border-color: var(--violet); background: rgba(167, 139, 250, .08); }
.btn-lg { padding: 15px 28px; font-size: 1rem; }

/* Hero */
.hero {
  text-align: center;
  padding: clamp(60px, 10vw, 120px) clamp(20px, 5vw, 56px) 60px;
  max-width: 1100px; margin: 0 auto;
}
.hero > * {
  animation: fadeUp .8s ease-out backwards;
}
.hero > .eyebrow { animation-delay: .05s; }
.hero > h1 { animation-delay: .15s; }
.hero > .lede { animation-delay: .3s; }
.hero > .hero-meta { animation-delay: .45s; }
.hero > .hero-cta { animation-delay: .55s; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(167, 139, 250, .1);
  border: 1px solid var(--line-2);
  color: var(--text-soft);
  padding: 7px 16px; border-radius: 999px;
  font-size: .85rem; font-weight: 500;
  margin-bottom: 28px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--violet);
  box-shadow: 0 0 8px var(--violet);
  animation: ping 2s ease-out infinite;
}
.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  max-width: 620px; margin: 0 auto 32px;
  color: var(--text-soft);
}
.hero-meta {
  display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
  font-size: .9rem; color: var(--text-mute); margin-bottom: 36px;
}
.hero-meta span::before { content: "● "; color: var(--violet); margin-right: 4px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Stats / problem cards */
.stats {
  max-width: 1280px; margin: 0 auto;
  padding: 40px clamp(20px, 5vw, 56px) 80px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.stat-card {
  background: linear-gradient(180deg, rgba(26, 15, 51, .8) 0%, rgba(20, 12, 41, .8) 100%);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(167, 139, 250, .08), transparent 60%);
  pointer-events: none;
  transition: background .35s ease;
}
.stat-card { transition: transform .3s ease, border-color .3s ease; }
.stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--violet);
}
.stat-card:hover::before {
  background: radial-gradient(circle at 0% 0%, rgba(167, 139, 250, .22), transparent 65%);
}
.stat-icon { animation: float 3.6s ease-in-out infinite; }
.stat-card:nth-child(2) .stat-icon { animation-delay: .4s; }
.stat-card:nth-child(3) .stat-icon { animation-delay: .8s; }
.stat-card:nth-child(4) .stat-icon { animation-delay: 1.2s; }
.stat-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.stat-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(167, 139, 250, .12);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--violet); font-size: 1rem;
}
.stat-num {
  font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em;
  background: linear-gradient(180deg, #fff 0%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-align: right; line-height: 1;
}
.stat-label {
  font-size: .65rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); margin-top: 4px; text-align: right;
}
.stat-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.stat-sub { color: var(--violet); font-size: .88rem; font-weight: 500; margin-bottom: 10px; }
.stat-card p { font-size: .88rem; color: var(--text-mute); margin: 0; }

@media (max-width: 1000px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .stats { grid-template-columns: 1fr; } }

/* Section transition / pivot */
.pivot { text-align: center; padding: 20px 20px 80px; }
.pivot p { color: var(--text); font-size: 1.05rem; margin-bottom: 22px; }

/* Sections */
.section-head { max-width: 760px; margin: 0 auto 60px; text-align: center; }
.kicker {
  display: inline-block; font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--violet); margin-bottom: 18px;
}
.section-head p { color: var(--text-soft); font-size: 1.05rem; }

.features {
  padding: clamp(60px, 8vw, 110px) clamp(20px, 5vw, 56px);
  max-width: 1280px; margin: 0 auto;
}
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
}
.feature {
  background: linear-gradient(180deg, rgba(26, 15, 51, .8) 0%, rgba(20, 12, 41, .8) 100%);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  transition: border-color .2s, transform .2s;
  position: relative; overflow: hidden;
}
.feature::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 0%, rgba(167, 139, 250, .08), transparent 60%);
  pointer-events: none;
}
.feature:hover {
  border-color: var(--violet);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px -12px var(--violet-glow);
}
.feature:hover .feature-ico {
  transform: scale(1.08) rotate(-4deg);
  background: rgba(167, 139, 250, .25);
}
.feature-ico { transition: transform .3s ease, background .3s ease; }
.feature-ico {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(167, 139, 250, .12);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 18px;
  position: relative; z-index: 1;
}
.feature h3 { position: relative; z-index: 1; }
.feature p { margin: 0; font-size: .92rem; color: var(--text-mute); position: relative; z-index: 1; }

/* AI section */
.ai-section {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
  padding: clamp(60px, 8vw, 110px) clamp(20px, 5vw, 56px);
  max-width: 1280px; margin: 0 auto;
}
.ai-copy .lede { text-align: left; margin-left: 0; }
.check-list { list-style: none; padding: 0; margin: 0 0 32px; }
.check-list li {
  padding: 12px 0 12px 36px; position: relative;
  border-bottom: 1px solid var(--line); color: var(--text-soft);
  font-size: .98rem;
}
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 11px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(167, 139, 250, .15);
  border: 1px solid var(--line-2);
  color: var(--violet);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
}

.chat {
  background: linear-gradient(180deg, rgba(26, 15, 51, .9) 0%, rgba(20, 12, 41, .9) 100%);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
  animation: float 6s ease-in-out infinite;
}
.msg {
  padding: 11px 16px; border-radius: 18px; max-width: 85%; font-size: .95rem;
  opacity: 0;
}
.chat.play .msg { animation: msgIn .4s ease-out forwards; }
.chat.play .msg:nth-child(1) { animation-delay: .1s; }
.chat.play .msg:nth-child(2) { animation-delay: 1.0s; }
.chat.play .msg:nth-child(3) { animation-delay: 2.0s; }
.chat.play .msg:nth-child(4) { animation-delay: 2.9s; }
.chat.play .msg:nth-child(5) { animation-delay: 3.8s; }
.chat.play .meta { animation: fadeIn .5s ease-out 4.4s forwards; opacity: 0; }
.typing { display: inline-flex; gap: 3px; align-items: center; }
.typing i {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  animation: typing 1.2s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
.msg.fan {
  background: var(--surface-2); color: var(--text-soft);
  align-self: flex-start; border-bottom-left-radius: 6px;
}
.msg.me {
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff;
  align-self: flex-end; border-bottom-right-radius: 6px;
  box-shadow: 0 4px 20px rgba(124, 58, 237, .3);
}
.chat .meta {
  font-size: .8rem; color: var(--text-mute); text-align: center;
  margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line);
}

@media (max-width: 880px) {
  .ai-section { grid-template-columns: 1fr; }
}

/* Pricing */
.pricing {
  padding: clamp(60px, 8vw, 110px) clamp(20px, 5vw, 56px);
  max-width: 1280px; margin: 0 auto;
}
.plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.plan {
  background: linear-gradient(180deg, rgba(26, 15, 51, .8) 0%, rgba(20, 12, 41, .8) 100%);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  display: flex; flex-direction: column;
}
.plan { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.plan:hover {
  transform: translateY(-6px);
  border-color: var(--violet);
  box-shadow: 0 16px 50px -16px var(--violet-glow);
}
.plan-featured {
  border-color: var(--violet);
  background: linear-gradient(180deg, rgba(124, 58, 237, .15) 0%, rgba(20, 12, 41, .9) 100%);
  box-shadow: 0 0 60px -20px var(--violet-glow);
  transform: translateY(-8px);
}
.plan-featured:hover { transform: translateY(-14px); }
.plan-featured .tag {
  position: absolute; top: -12px; left: 32px;
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff;
  padding: 5px 14px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(124, 58, 237, .5);
}
.plan h3 { font-size: 1.3rem; }
.plan-sub { font-size: .9rem; margin-bottom: 22px; color: var(--text-mute); }
.price { margin-bottom: 26px; color: var(--text-mute); font-size: .95rem; }
.price span {
  font-size: 2.6rem; font-weight: 800; color: var(--text);
  letter-spacing: -0.03em; margin-right: 4px;
}
.plan ul { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.plan ul li {
  padding: 9px 0 9px 26px; position: relative;
  font-size: .93rem; color: var(--text-soft);
}
.plan ul li::before {
  content: "✓"; position: absolute; left: 0; color: var(--violet); font-weight: 700;
}

/* FAQ */
.faq {
  padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 56px);
  max-width: 880px; margin: 0 auto;
}
.faq-grid { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: linear-gradient(180deg, rgba(26, 15, 51, .6) 0%, rgba(20, 12, 41, .6) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: background .3s ease, border-color .3s ease;
}
.faq-item:has(.faq-q[aria-expanded="true"]) {
  background: linear-gradient(180deg, rgba(124, 58, 237, .12) 0%, rgba(20, 12, 41, .85) 100%);
  border-color: var(--line-2);
}
.faq-q {
  width: 100%;
  background: transparent;
  border: none;
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600; font-size: 1rem;
  color: var(--text);
  text-align: left;
}
.faq-q:hover { color: var(--text); }
.faq-q > span:first-child { flex: 1; }
.faq-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  overflow: visible;
}
.faq-icon line {
  stroke: var(--violet);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.faq-icon-v {
  transform-origin: 12px 12px;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.faq-q[aria-expanded="true"] .faq-icon-v {
  transform: scaleY(0);
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1);
}
.faq-q[aria-expanded="true"] + .faq-a {
  grid-template-rows: 1fr;
}
.faq-a-inner {
  min-height: 0;
  overflow: hidden;
}
.faq-a-inner p {
  margin: 0;
  padding: 0 22px 18px;
  font-size: .93rem;
  color: var(--text-soft);
}

/* CTA */
.cta {
  text-align: center;
  padding: clamp(60px, 8vw, 110px) 24px;
  margin: 60px clamp(20px, 5vw, 56px);
  background: linear-gradient(180deg, rgba(124, 58, 237, .15) 0%, rgba(26, 15, 51, .8) 100%);
  border: 1px solid var(--line-2);
  border-radius: 32px;
  position: relative; overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(167, 139, 250, .25), transparent 60%);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta p { max-width: 560px; margin: 0 auto 28px; color: var(--text-soft); }

/* Download section */
.download {
  position: relative;
  padding: clamp(60px, 8vw, 110px) clamp(20px, 5vw, 56px);
  max-width: 1280px; margin: 0 auto;
  overflow: hidden;
  border-radius: 36px;
}
.download-page {
  padding-top: clamp(80px, 10vw, 140px);
  margin-top: 20px;
}
.dl-headline {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  margin: 0 0 .35em;
}
.dl-headline em {
  font-style: normal;
  background: linear-gradient(180deg, #d8c8ff 0%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(167, 139, 250, .5));
}

.dl-extras {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  position: relative;
}
.dl-extra {
  background: rgba(20, 12, 41, .5);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 24px;
  transition: border-color .2s ease, transform .2s ease;
}
.dl-extra:hover { border-color: var(--violet); transform: translateY(-2px); }
.dl-extra h3 {
  font-size: 1rem; font-weight: 700;
  color: var(--violet);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.dl-extra ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dl-extra li {
  font-size: .88rem; color: var(--text-soft);
  padding-left: 22px; position: relative;
  line-height: 1.5;
}
.dl-extra li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  color: var(--violet); font-weight: 700;
}
.dl-extra strong { color: var(--text); font-weight: 600; }

@media (max-width: 880px) {
  .dl-extras { grid-template-columns: 1fr; }
}
.download-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.dl-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .4;
}
.dl-orb-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, #7c3aed, transparent 70%);
  top: -120px; left: -120px;
  animation: dlOrb1 14s ease-in-out infinite;
}
.dl-orb-2 {
  width: 540px; height: 540px;
  background: radial-gradient(circle, #ec4899, transparent 70%);
  bottom: -160px; right: -160px;
  animation: dlOrb2 17s ease-in-out infinite;
}
@keyframes dlOrb1 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(80px, 60px); }
}
@keyframes dlOrb2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-60px, -40px); }
}
.dl-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(167, 139, 250, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, .06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
}

.dl-meta {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
  font-size: .9rem;
  color: var(--text-mute);
  position: relative;
}
.dl-meta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(167, 139, 250, .1);
  border: 1px solid rgba(167, 139, 250, .25);
  color: var(--text);
}
.dl-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: ping 2s ease-out infinite;
}
.dl-meta-sep { opacity: .5; }

.dl-grid-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  position: relative;
  margin-bottom: 36px;
}
.dl-card {
  position: relative;
  padding: 36px 32px 32px;
  background: linear-gradient(180deg, rgba(26, 15, 51, .8) 0%, rgba(20, 12, 41, .9) 100%);
  border: 1px solid var(--line);
  border-radius: 28px;
  text-align: center;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), border-color .35s ease;
  overflow: hidden;
}
.dl-card::before {
  content: ""; position: absolute; inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--angle, 0deg),
    transparent 0deg,
    var(--gradient-color-1, #a78bfa) 60deg,
    var(--gradient-color-2, #ec4899) 120deg,
    transparent 180deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.dl-card:hover { transform: translateY(-6px); }
.dl-card:hover::before { opacity: 1; animation: dlSpin 4s linear infinite; }
.dl-card-intel { --gradient-color-1: #67e8f9; --gradient-color-2: #3b82f6; }
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes dlSpin {
  to { --angle: 360deg; }
}
/* Fallback for browsers without @property */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .dl-card::before { display: none; }
}

.dl-card-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, .04) 50%, transparent 70%);
  background-size: 250% 250%;
  background-position: -50% -50%;
  pointer-events: none;
  transition: background-position .8s ease;
  border-radius: inherit;
}
.dl-card:hover .dl-card-shimmer { background-position: 150% 150%; }

.dl-card-recommended {
  position: absolute; top: 16px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff;
  padding: 5px 14px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .4);
}
.dl-card.is-recommended .dl-card-recommended {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.dl-card.is-recommended { transform: translateY(-6px); }

.dl-icon {
  display: flex; justify-content: center;
  margin: 18px auto 24px;
  position: relative;
  z-index: 1;
}
.dl-icon svg { filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .5)); transition: filter .3s ease, transform .4s cubic-bezier(.4, 0, .2, 1); }
.dl-card:hover .dl-icon svg {
  transform: scale(1.04) rotate(-2deg);
  filter: drop-shadow(0 16px 36px rgba(167, 139, 250, .35));
}
.dl-card-intel:hover .dl-icon svg {
  filter: drop-shadow(0 16px 36px rgba(34, 211, 238, .3));
}
.dl-chip-pins line { animation: dlPinsPulse 2.4s ease-in-out infinite; }
@keyframes dlPinsPulse {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}

.dl-info { position: relative; z-index: 1; }
.dl-title {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.8rem; font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff 0%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 6px;
}
.dl-card-intel .dl-title {
  background: linear-gradient(180deg, #fff 0%, #67e8f9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dl-desc {
  font-size: .92rem;
  color: var(--text-soft);
  margin: 0 0 22px;
}
.dl-stats {
  display: flex; justify-content: center; gap: 20px;
  margin-bottom: 22px;
  padding: 14px 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.dl-stats span { display: flex; flex-direction: column; gap: 2px; }
.dl-stats strong {
  font-size: 1rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dl-stats em {
  font-style: normal;
  font-size: .68rem; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .1em;
}

.dl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 14px 22px; border-radius: 14px;
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff; font-weight: 700; font-size: .95rem;
  border: 1px solid rgba(167, 139, 250, .4);
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform .15s ease, box-shadow .25s ease;
  box-shadow: 0 8px 24px rgba(124, 58, 237, .35);
}
.dl-btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .25) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: -100% 0;
  transition: background-position .8s ease;
}
.dl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(124, 58, 237, .5);
}
.dl-btn:hover::after { background-position: 200% 0; }
.dl-btn-intel {
  background: linear-gradient(180deg, #06b6d4, #0e7490);
  border-color: rgba(34, 211, 238, .4);
  box-shadow: 0 8px 24px rgba(6, 182, 212, .3);
}
.dl-btn-intel:hover { box-shadow: 0 14px 36px rgba(6, 182, 212, .5); }

.dl-foot {
  text-align: center;
  position: relative;
}
.dl-platforms {
  display: inline-flex; gap: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 16px;
}
.dl-plat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  font-size: .8rem; font-weight: 600;
  color: var(--text-mute);
}
.dl-plat-active {
  background: rgba(167, 139, 250, .18);
  color: var(--text);
}
.dl-plat-soon em {
  font-style: normal;
  font-size: .65rem;
  background: rgba(255, 255, 255, .08);
  padding: 1px 6px; border-radius: 4px;
}
.dl-hint {
  font-size: .85rem;
  color: var(--text-mute);
  max-width: 540px; margin: 0 auto;
}
.dl-detect-link {
  background: none; border: none;
  color: var(--violet); cursor: pointer;
  font-family: inherit; font-size: inherit;
  text-decoration: underline; text-underline-offset: 3px;
  padding: 0;
}
.dl-detect-link:hover { color: var(--text); }

@media (max-width: 760px) {
  .dl-grid-cards { grid-template-columns: 1fr; }
  .dl-meta { font-size: .82rem; gap: 10px; }
  .dl-meta-sep { display: none; }
  .dl-stats { gap: 14px; }
  .dl-platforms { flex-wrap: wrap; }
}

/* Footer */
footer {
  border-top: 1px solid var(--line);
  padding: 60px clamp(20px, 5vw, 56px) 30px;
  background: rgba(10, 4, 24, .6);
}
.foot-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 2fr; gap: 40px;
}
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.foot-cols h4 {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-mute); margin-bottom: 14px; font-weight: 600;
}
.foot-cols a {
  display: block; padding: 5px 0; font-size: .9rem; color: var(--text-soft);
}
.foot-cols a:hover { color: var(--violet); }
.copy {
  max-width: 1280px; margin: 40px auto 0;
  font-size: .85rem; color: var(--text-mute); text-align: center;
  padding-top: 30px; border-top: 1px solid var(--line);
}

@media (max-width: 720px) {
  .foot-inner { grid-template-columns: 1fr; }
}

/* Sign-in page */
.auth-wrap {
  min-height: calc(100vh - 100px);
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 30px clamp(16px, 4vw, 40px);
  gap: 30px;
}
.auth-side {
  background: linear-gradient(160deg, rgba(124, 58, 237, .25) 0%, rgba(26, 15, 51, .9) 50%, rgba(236, 72, 153, .15) 100%);
  border: 1px solid var(--line-2);
  border-radius: 28px;
  padding: clamp(30px, 5vw, 60px);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-side::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 100%, rgba(167, 139, 250, .25), transparent 50%);
  pointer-events: none;
}
.auth-side > * { position: relative; }
.auth-side h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.auth-quote {
  background: rgba(20, 12, 41, .6);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 22px;
  backdrop-filter: blur(8px);
}
.auth-quote p { color: var(--text); font-style: italic; margin-bottom: 10px; }
.auth-quote cite { font-size: .88rem; color: var(--text-mute); font-style: normal; }
.auth-form-wrap {
  padding: clamp(20px, 4vw, 60px) clamp(20px, 5vw, 80px);
  display: flex; align-items: center;
}
.auth-form { width: 100%; max-width: 400px; margin: 0 auto; }
.auth-form h1 {
  font-size: 2rem; margin-bottom: 8px;
  background: linear-gradient(180deg, #fff 0%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-form .sub { color: var(--text-soft); margin-bottom: 28px; font-size: .95rem; }
.auth-form label {
  display: block; font-size: .82rem; font-weight: 600;
  margin-bottom: 8px; color: var(--text-soft);
}
.auth-form input {
  width: 100%; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--line-2);
  font-size: .98rem; font-family: inherit;
  background: rgba(20, 12, 41, .6);
  color: var(--text);
  margin-bottom: 16px;
  transition: border-color .15s, background .15s;
}
.auth-form input::placeholder { color: var(--text-mute); }
.auth-form input:focus {
  outline: none; border-color: var(--violet);
  background: rgba(20, 12, 41, .9);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .15);
}
.auth-form .btn { width: 100%; }
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 22px 0;
  color: var(--text-mute); font-size: .82rem;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.oauth-btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: rgba(20, 12, 41, .6);
  color: var(--text);
  font-weight: 600; font-size: .92rem; cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
.oauth-btn:hover { border-color: var(--violet); background: rgba(124, 58, 237, .15); }
.oauth-btn svg { background: #fff; border-radius: 50%; padding: 2px; }
.auth-foot { font-size: .9rem; color: var(--text-mute); text-align: center; }
.auth-foot a { color: var(--violet); font-weight: 600; }
.auth-foot a:hover { color: var(--text); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row-2 > div > input { margin-bottom: 16px; }

/* Invitation banner on signin.html — shown when ?invite=TOKEN is valid. */
.invite-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  margin-bottom: 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .18), rgba(167, 139, 250, .08));
  border: 1px solid rgba(167, 139, 250, .35);
}
/* Class-level display:flex above was overriding the HTML hidden attribute,
   so the banner showed the default markup text on every visit — including
   for users with no invite, or after the token in localStorage was already
   redeemed. Restore the hidden attribute's effect explicitly. */
.invite-banner[hidden] { display: none; }

/* Defense-in-depth: anything tagged .fc-admin-only must NEVER render
   unless the body has been explicitly flipped to .is-admin by the
   isAdmin() check in dashboard's bootstrap. The previous setup relied
   only on the HTML `hidden` attribute being removed by JS — if that
   JS failed or was skipped, non-admin users could see the sidebar
   link. Now the CSS hides it as long as body lacks .is-admin. */
body:not(.is-admin) .fc-admin-only { display: none !important; }

/* Admin password gate. The whole admin section is blurred + locked
   until the admin enters the password once per session. */
.admin-locked .admin-content { filter: blur(10px) saturate(.5); pointer-events: none; user-select: none; }
.admin-locked .admin-gate { display: flex; }
.admin-gate { display: none; position: absolute; inset: 0; z-index: 30; align-items: center; justify-content: center; padding: 24px; background: rgba(6, 7, 12, .55); backdrop-filter: blur(2px); }
.admin-gate-panel {
  position: relative;
  width: min(380px, calc(100vw - 32px));
  background: linear-gradient(180deg, rgba(28, 16, 52, .98) 0%, rgba(20, 12, 36, .98) 100%);
  border: 1px solid rgba(167, 139, 250, .35);
  border-radius: 18px;
  padding: 26px 24px;
  text-align: center;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .7);
}
.admin-gate-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(167, 139, 250, .14); color: #c4b5fd; margin-bottom: 12px; }
.admin-gate-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; color: #fff; }
.admin-gate-sub { font-size: .82rem; color: var(--text-mute); margin: 0 0 18px; }
/* The admin section needs position:relative so the gate's inset:0
   anchors to it rather than the viewport. */
section.account-page[data-account-page="admin"] { position: relative; }

/* Dismissed state — admin clicked X on the gate. Keep the section
   blurred (workspace stays locked) but swap the gate panel for a
   compact centered card styled to match the gate itself (same
   gradient, same violet border, same padding rhythm) so the two
   locked states feel like one component. Click anywhere on the card
   to re-open the password gate. */
.admin-locked.admin-gate-dismissed .admin-gate { display: none; }
.admin-relock-hint {
  display: none;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 31;
  flex-direction: column; align-items: center;
  gap: 0;
  width: min(320px, calc(100vw - 32px));
  padding: 26px 24px;
  text-align: center;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(28, 16, 52, .98) 0%, rgba(20, 12, 36, .98) 100%);
  border: 1px solid rgba(167, 139, 250, .35);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .7);
  cursor: pointer;
  outline: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.admin-relock-hint:hover,
.admin-relock-hint:focus-visible {
  transform: translate(-50%, -50%) translateY(-2px);
  border-color: rgba(167, 139, 250, .6);
  box-shadow: 0 26px 70px -22px rgba(124, 58, 237, .45);
}
.admin-relock-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(167, 139, 250, .14);
  color: #c4b5fd;
  margin-bottom: 12px;
}
.admin-relock-title { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 4px; }
.admin-relock-sub { font-size: .8rem; color: var(--text-mute); margin: 0 0 18px; line-height: 1.4; }
.admin-relock-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff;
  font-size: .88rem; font-weight: 700;
  box-shadow: 0 8px 22px rgba(124, 58, 237, .35);
  transition: filter .15s ease;
}
.admin-relock-hint:hover .admin-relock-cta { filter: brightness(1.08); }
.admin-locked.admin-gate-dismissed .admin-relock-hint { display: inline-flex; }
.invite-banner-ic { color: #c4b5fd; flex-shrink: 0; }
.invite-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.invite-banner-text strong {
  font-size: .92rem; color: #fff; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.invite-banner-text span {
  font-size: .82rem; color: var(--text-soft);
}
.invite-banner.invite-banner-error {
  background: rgba(251, 113, 133, .1);
  border-color: rgba(251, 113, 133, .35);
}
.invite-banner.invite-banner-error .invite-banner-ic { color: #fb7185; }

@media (max-width: 880px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { min-height: 220px; }
}

/* ===== Dashboard ===== */
.app {
  display: grid;
  grid-template-columns: 240px 220px 1fr;
  min-height: 100vh;
  background: var(--bg);
  transition: grid-template-columns .35s cubic-bezier(.4, 0, .2, 1);
}
.app.collapsed { grid-template-columns: 72px 220px 1fr; }
/* Agency + Account tabs: collapse the middle Panel column smoothly (the
   grid transition on .app handles the width animation). Their menu items
   live in side-1 instead. The per-creator main workspace (.dash) is hidden
   so the right side stays a blank canvas until those screens are built. */
.app[data-side-tab="agency"],
.app[data-side-tab="personal"]            { grid-template-columns: 240px 0 1fr; }
.app.collapsed[data-side-tab="agency"],
.app.collapsed[data-side-tab="personal"]  { grid-template-columns: 72px 0 1fr; }
.side-2 {
  overflow: hidden;                      /* clip contents while column collapses */
  transition: opacity .25s ease;
}
.app[data-side-tab="agency"] .side-2,
.app[data-side-tab="personal"] .side-2 {
  opacity: 0;                            /* fade out as the column shrinks */
  pointer-events: none;
}
/* On Agency/Account tab (or side-2 swap to those views), hide the per-creator
   page sections but KEEP the top action bar (.dash-top) visible. We also
   never hide .agency-page sections — they're the Agency tab's own content.
   `!important` is required because .page-messages.active uses it too. */
.app[data-side-tab="agency"]   .dash > :not(.dash-top):not(.agency-page):not(.account-page),
.app[data-side-tab="personal"] .dash > :not(.dash-top):not(.agency-page):not(.account-page),
.app[data-side-2-view="agency"]  .dash > :not(.dash-top):not(.agency-page):not(.account-page),
.app[data-side-2-view="account"] .dash > :not(.dash-top):not(.agency-page):not(.account-page),
.app[data-side-2-view="admin"]   .dash > :not(.dash-top):not(.agency-page):not(.account-page) { display: none !important; }
/* Account-page sections behave like agency-page: hidden by default,
   shown only when their data-account-page matches the active link. */
.account-page { display: none; padding: 22px 28px 36px; }
.app[data-side-tab="personal"]  .account-page.active,
.app[data-side-2-view="account"] .account-page.active { display: block; }
.app[data-side-2-view="admin"]   .account-page.active { display: block; }
/* Agency pages are hidden by default and only shown on the Agency tab when
   the matching side-1 menu item is active. */
.agency-page { display: none; padding: 22px 28px 36px; }
/* Show on the Agency top tab AND on the All-view side-2 swap to agency
   (data-side-2-view="agency"). The hide-other-pages rule above uses
   !important so the regular .page sections stay hidden in both cases. */
.app[data-side-tab="agency"]    .agency-page.active,
.app[data-side-2-view="agency"] .agency-page.active { display: block; }
/* Smooth fade + slide-up when an account/agency page becomes active —
   animation only fires on the active element so it doesn't run on the
   initial render of the page underneath. */
@keyframes fcPageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.account-page.active,
.agency-page.active {
  animation: fcPageIn .28s cubic-bezier(.34, 1.12, .64, 1);
}
@media (prefers-reduced-motion: reduce) {
  .account-page.active,
  .agency-page.active { animation: none; }
}

/* ═══ Agency Dashboard layout ═══ */
.agency-dash-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  margin: 4px 0 22px;
}
.agency-dash-title { font-size: 1.4rem; font-weight: 700; color: var(--text-strong, #f3f4f6); margin: 0; }
.agency-dash-controls { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.agency-dash-range {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px; border-radius: 14px;
  background: rgba(20, 8, 41, .6);
  border: 1px solid var(--line);
}
.agency-range-pill {
  padding: 8px 16px; border-radius: 10px;
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-family: inherit;
  font-size: .85rem; font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.agency-range-pill:hover { color: var(--text); }
.agency-range-pill.active {
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff; box-shadow: 0 4px 12px rgba(124, 58, 237, .3);
}
.agency-refresh {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  color: var(--text-soft);
  font-size: .8rem; font-weight: 600;
  cursor: pointer;
  margin-left: auto;
}
.agency-refresh:hover { background: rgba(124, 58, 237, .12); color: #c4b5fd; }

/* ── Agency → Payouts page ────────────────────────────────────────────── */
.payouts-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}
@media (max-width: 800px) {
  .payouts-totals { grid-template-columns: 1fr; }
}
.payouts-total-card {
  padding: 20px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(26, 30, 41, .65) 0%, rgba(20, 23, 32, .55) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
}
.payouts-total-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.payouts-total-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(74, 222, 128, .12);
  color: #4ade80;
}
.payouts-total-pending .payouts-total-icon {
  background: rgba(251, 191, 36, .12);
  color: #fbbf24;
}
.payouts-total-label {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 700;
}
.payouts-total-value {
  font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em;
  color: #fff;
}
.payouts-total-pending .payouts-total-value { color: #fbbf24; }
.payouts-total-balance .payouts-total-value { color: #4ade80; }
.payouts-total-sub {
  margin-top: 4px;
  font-size: .78rem; color: var(--text-mute);
}
.payouts-table-wrap {
  background: linear-gradient(180deg, rgba(26, 30, 41, .55) 0%, rgba(20, 23, 32, .55) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  overflow: hidden;
}
.payouts-table { display: flex; flex-direction: column; }
.payouts-row {
  display: grid;
  grid-template-columns: minmax(220px, 2.2fr) 160px 160px;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  transition: background .12s;
}
.payouts-rows .payouts-row:hover { background: rgba(124, 58, 237, .06); }
.payouts-row:last-child { border-bottom: none; }
.payouts-row-head {
  padding-top: 16px;
  padding-bottom: 12px;
}
.payouts-row-head .cell {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: #6b6b9a;
  text-transform: uppercase;
}
.payouts-row .cell-account {
  display: flex; align-items: center; gap: 14px; min-width: 0;
}
.payouts-av {
  width: 42px; height: 42px;
  border-radius: 50%;
  background-color: rgba(124, 58, 237, .35);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: .95rem; font-weight: 700;
  flex-shrink: 0;
}
.payouts-name { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.payouts-name strong {
  font-size: .92rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.payouts-name span {
  font-size: .76rem; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.payouts-row .cell-balance { color: #4ade80; font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.payouts-row .cell-pending { color: #fbbf24; font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.payouts-row-head .cell-balance,
.payouts-row-head .cell-pending {
  color: #6b6b9a; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.payouts-empty {
  padding: 28px 22px; text-align: center;
  color: var(--text-mute); font-size: .9rem;
}
/* Locked (RENEW) rows: the model's balance/pending are excluded from the
   totals strip, so we make that obvious without hiding the row. The dollar
   columns are blurred + dimmed so they read as "present but not counted";
   hover lifts the blur briefly so the user can still see what's locked
   behind renewal (matches the censor-mode hover-reveal idiom). */
.payouts-row-locked .payouts-av { opacity: .55; }
.payouts-row-locked .payouts-name strong,
.payouts-row-locked .payouts-name span { color: var(--text-mute); }
.payouts-row-locked .cell-balance,
.payouts-row-locked .cell-pending {
  filter: blur(6px) saturate(.5);
  color: var(--text-mute);
  user-select: none;
}
.payouts-renew-badge {
  display: inline-flex; align-items: center;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(251, 113, 133, .14);
  border: 1px solid rgba(251, 113, 133, .35);
  color: #fb7185;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ── Agency → Invitations page ───────────────────────────────────────── */
.invites-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 22px;
}
.invites-title { font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: -.01em; margin: 0; }
.invites-sub   { margin: 4px 0 0; font-size: .85rem; color: var(--text-mute); }
.invites-create-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: #8b5cf6; color: #fff;
  border: none; border-radius: 8px;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; transition: background .14s, transform .04s;
  white-space: nowrap;
}
.invites-create-btn:hover { background: #7c3aed; }
.invites-create-btn:active { transform: translateY(1px); }
.invites-create-btn[disabled] { opacity: .55; cursor: default; }

.invites-new-callout {
  background: rgba(139, 92, 246, .07);
  border: 1px solid rgba(139, 92, 246, .28);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.invites-new-head {
  display: flex; align-items: center; gap: 8px;
  color: #c4b5fd; font-size: .78rem; font-weight: 600;
  margin-bottom: 10px;
}
.invites-new-row { display: flex; align-items: center; gap: 10px; }
.invites-new-url {
  flex: 1;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  padding: 10px 12px;
  color: #cbd5e1; font-size: .78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.invites-copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px;
  background: rgba(139, 92, 246, .14);
  border: 1px solid rgba(139, 92, 246, .35);
  color: #c4b5fd;
  border-radius: 8px;
  font-size: .76rem; font-weight: 600;
  cursor: pointer; transition: background .12s, color .12s;
  flex-shrink: 0;
}
.invites-copy-btn:hover { background: rgba(139, 92, 246, .22); color: #fff; }
.invites-copy-btn.copied { color: #4ade80; border-color: rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .12); }

.invites-table-wrap {
  background: linear-gradient(180deg, rgba(26, 30, 41, .55) 0%, rgba(20, 23, 32, .55) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  overflow: hidden;
}
.invites-table-head {
  padding: 14px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.invites-table-title { margin: 0; font-size: .92rem; font-weight: 700; color: #e2e8f0; }
.invites-table-count {
  margin-left: 6px;
  font-size: .72rem; color: var(--text-mute); font-weight: 600;
}
.invites-table { display: flex; flex-direction: column; }
.invites-row {
  display: grid;
  grid-template-columns: minmax(240px, 2.4fr) 120px 130px 90px;
  align-items: center;
  gap: 18px;
  padding: 13px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  transition: background .12s;
}
/* Members table — 4 columns: member / role / joined / actions. */
.invites-row.members-row-head,
#membersRows .invites-row {
  grid-template-columns: minmax(200px, 2fr) 160px 130px 90px;
}
.invites-rows .invites-row:hover { background: rgba(124, 58, 237, .05); }
.invites-row:last-child { border-bottom: none; }
.invites-row-head {
  padding-top: 14px; padding-bottom: 11px;
}
.invites-row-head .cell {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  color: #6b6b9a; text-transform: uppercase;
}
.invites-row .cell-link {
  display: flex; flex-direction: column; min-width: 0; gap: 3px;
}
.invites-link-label {
  font-size: .82rem; font-weight: 600; color: #e2e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.invites-link-url {
  font-size: .72rem; color: var(--text-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.invites-status-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
}
.invites-status-active   { background: rgba(74, 222, 128, .12); color: #4ade80; }
.invites-status-used     { background: rgba(96, 165, 250, .12); color: #60a5fa; }
.invites-status-revoked  { background: rgba(148, 163, 184, .14); color: #94a3b8; }
.invites-status-expired  { background: rgba(251, 191, 36, .12); color: #fbbf24; }
.invites-row .cell-created { color: var(--text-mute); font-size: .8rem; font-variant-numeric: tabular-nums; }
.invites-row .cell-actions {
  display: flex; justify-content: flex-end; gap: 6px;
}
.invites-row-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px;
  color: #94a3b8; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.invites-row-btn:hover { background: rgba(139, 92, 246, .12); color: #c4b5fd; border-color: rgba(139, 92, 246, .3); }
.invites-row-btn.copied { color: #4ade80; border-color: rgba(74, 222, 128, .4); }
.invites-row-btn.invites-row-revoke:hover { background: rgba(251, 113, 133, .12); color: #fb7185; border-color: rgba(251, 113, 133, .35); }
.invites-row-btn[disabled] { opacity: .35; cursor: default; }
.invites-empty {
  padding: 28px 22px; text-align: center;
  color: var(--text-mute); font-size: .9rem;
}

/* ── Agency → Roles page ─────────────────────────────────────────────── */
.roles-list-toolbar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; margin-bottom: 16px;
}
.roles-search-wrap {
  position: relative; display: flex; align-items: center;
  width: 280px;
}
.roles-search-wrap svg {
  position: absolute; left: 10px; color: var(--text-mute);
  pointer-events: none;
}
.roles-search-input {
  width: 100%;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  padding: 9px 12px 9px 32px;
  font-size: .82rem; color: #e2e8f0;
  font-family: inherit;
  transition: border-color .12s, background .12s;
}
.roles-search-input:focus {
  outline: none; border-color: rgba(139, 92, 246, .45);
  background: rgba(0, 0, 0, .5);
}
.roles-search-input::placeholder { color: var(--text-mute); }

/* Roles table — reuses .invites-row look but has 5 columns. */
.invites-row.roles-row-head,
#rolesRows .invites-row {
  grid-template-columns: minmax(140px, 1.2fr) minmax(180px, 2fr) 130px 140px 110px;
}
.roles-name-pill {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  color: #fff;
  background: #6366f1;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.roles-meta-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .05);
  color: #e2e8f0;
  font-size: .76rem; font-weight: 600;
}
.roles-meta-pill svg { color: var(--text-mute); }
.roles-meta-pill strong { font-weight: 700; }
.roles-row-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px;
}
.roles-row-action {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 6px;
  background: transparent; border: none;
  color: #94a3b8; font-size: .8rem; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: color .12s;
}
.roles-row-action:hover { color: #c4b5fd; }
.roles-row-action.roles-row-action-danger { color: #fb7185; }
.roles-row-action.roles-row-action-danger:hover { color: #fda4af; }
.roles-row-desc {
  color: var(--text-mute); font-size: .82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Editor view */
.roles-editor-breadcrumb {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
  font-size: .82rem; color: var(--text-mute);
}
.roles-breadcrumb-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  color: #c4b5fd; font-size: .8rem; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: background .12s, color .12s;
}
.roles-breadcrumb-back:hover { background: rgba(139, 92, 246, .12); color: #fff; }
.roles-breadcrumb-current { color: #c4b5fd; font-weight: 600; }

.roles-editor-card {
  background: linear-gradient(180deg, rgba(26, 30, 41, .55) 0%, rgba(20, 23, 32, .55) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 18px;
}
.roles-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;
  margin-bottom: 18px;
}
@media (max-width: 980px) {
  .roles-editor-grid { grid-template-columns: 1fr; }
}
.roles-editor-field { display: flex; flex-direction: column; gap: 8px; }
.roles-field-label {
  font-size: .82rem; font-weight: 600;
  color: #e2e8f0;
}
.roles-field-input {
  width: 100%;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: 10px 14px;
  color: #f1f1f5; font-size: .92rem;
  font-family: inherit;
  transition: border-color .12s, background .12s;
}
.roles-field-input:focus {
  outline: none; border-color: rgba(139, 92, 246, .45);
  background: rgba(0, 0, 0, .5);
}
.roles-field-input::placeholder { color: var(--text-mute); }

.roles-editor-settings { gap: 10px; }
.roles-toggle {
  display: flex; align-items: center; gap: 10px;
  font-size: .85rem; color: #e2e8f0;
  cursor: pointer;
}
.roles-toggle input { display: none; }
.roles-toggle-track {
  position: relative; width: 36px; height: 20px;
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
  transition: background .15s;
  flex-shrink: 0;
}
.roles-toggle-track::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff; border-radius: 50%;
  transition: transform .15s;
}
.roles-toggle input:checked + .roles-toggle-track { background: #8b5cf6; }
.roles-toggle input:checked + .roles-toggle-track::after { transform: translateX(16px); }

.roles-editor-color-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.roles-color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.roles-color-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .12s, transform .08s;
  padding: 0;
}
.roles-color-dot:hover { transform: scale(1.08); }
.roles-color-dot.active { border-color: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }

.roles-editor-actions {
  display: flex; align-items: center; gap: 12px;
}
.roles-save-status {
  font-size: .8rem; color: #4ade80;
}
.roles-save-status.error { color: #fb7185; }

.roles-perms-card { padding: 0; overflow: hidden; }
.roles-perms-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  gap: 14px; flex-wrap: wrap;
}
.roles-platform-tabs { display: flex; gap: 6px; }
.roles-platform-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  color: #cbd5e1;
  font-size: .82rem; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.roles-platform-tab.active {
  background: rgba(139, 92, 246, .14);
  border-color: rgba(139, 92, 246, .35);
  color: #fff;
}
.roles-platform-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 800;
}
.roles-search-wrap-perms { width: 220px; }

.roles-perm-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 900px) {
  .roles-perm-grid { grid-template-columns: 1fr; }
  .roles-perm-column + .roles-perm-column { border-left: 0; border-top: 1px solid rgba(255,255,255,.05); }
}
.roles-perm-column + .roles-perm-column { border-left: 1px solid rgba(255, 255, 255, .05); }
.roles-perm-column-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.roles-perm-column-head strong {
  font-size: .92rem; font-weight: 700; color: #e2e8f0;
}
.roles-perm-column-actions { display: flex; gap: 6px; }
.roles-perm-action {
  background: transparent; border: 1px solid transparent;
  padding: 5px 12px;
  border-radius: 8px;
  color: #94a3b8; font-size: .76rem; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.roles-perm-action:hover { color: #c4b5fd; }
.roles-perm-action.roles-perm-action-primary {
  background: rgba(139, 92, 246, .14);
  border-color: rgba(139, 92, 246, .35);
  color: #c4b5fd;
}
.roles-perm-action.roles-perm-action-primary:hover { background: rgba(139, 92, 246, .22); color: #fff; }

.roles-perm-list {
  padding: 8px 22px 18px;
  display: flex; flex-direction: column; gap: 2px;
}
.roles-perm-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  cursor: pointer;
}
.roles-perm-item.is-hidden { display: none; }
.roles-perm-checkbox {
  width: 18px; height: 18px;
  border: 1.5px solid rgba(255, 255, 255, .25);
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .12s, border-color .12s;
  background: transparent;
}
.roles-perm-checkbox svg { opacity: 0; }
.roles-perm-item.checked .roles-perm-checkbox {
  background: #8b5cf6; border-color: #8b5cf6;
}
.roles-perm-item.checked .roles-perm-checkbox svg { opacity: 1; color: #fff; }
.roles-perm-item-label {
  font-size: .88rem; color: #e2e8f0;
}

/* ── No-permission overlay shown when a member opens a gated page ──────── */
.fc-noperm-overlay {
  display: none;
  position: absolute; inset: 0;
  background: rgba(10, 4, 24, .72);
  backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
  z-index: 5; padding: 24px;
  border-radius: 12px;
}
.fc-noperm-overlay.is-active { display: flex; }
.fc-noperm-card {
  background: rgba(20, 14, 36, .96);
  border: 1px solid rgba(139, 92, 246, .3);
  border-radius: 14px;
  padding: 24px 28px;
  max-width: 360px; text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.fc-noperm-card svg { color: #fbbf24; margin-bottom: 8px; }
.fc-noperm-card h3 { font-size: 1.05rem; color: #fff; margin: 4px 0 6px; }
.fc-noperm-card p  { font-size: .85rem; color: var(--text-soft); margin: 0; }
.agency-page, .account-page, .page { position: relative; }

/* Role pill / dropdown in Members table */
.invites-role-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  white-space: nowrap;
}
.invites-role-select {
  width: 100%;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 7px;
  padding: 6px 26px 6px 10px;
  color: #e2e8f0; font-size: .78rem;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.invites-role-select:focus {
  outline: none; border-color: rgba(139, 92, 246, .45);
}
.invites-role-select option { background: #1a1024; color: #e2e8f0; }

.members-role-cta {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  background: rgba(139, 92, 246, .12);
  border: 1px dashed rgba(139, 92, 246, .35);
  border-radius: 7px;
  color: #c4b5fd; font-size: .76rem; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: background .12s, color .12s;
}
.members-role-cta:hover { background: rgba(139, 92, 246, .2); color: #fff; }

/* ── Renewal lock UI ──────────────────────────────────────────────────── */
/* Sidebar "Renew" badge on past-due model cards */
.creator-renew-badge {
  display: inline-flex; align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(251, 113, 133, .14);
  border: 1px solid rgba(251, 113, 133, .35);
  color: #fb7185;
  font-size: .6rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
/* Locked / RENEW models — drain the avatar to black-and-white instead
   of using a red ring or red dot. As soon as the subscription flips
   back to active the .creator-locked class drops off the card and the
   filter reverts to the normal desaturated-color treatment, so the
   photo returns to its usual color automatically. !important beats
   the .creator-av.has-photo saturate(.78) brightness(.88) default. */
.creator.creator-locked .creator-av.has-photo {
  filter: grayscale(1) brightness(.85) !important;
}
.creator.creator-locked .creator-av { opacity: .75; }
.app.collapsed .creator.creator-locked .creator-renew-badge { display: none; }

/* When the active model is locked, blur every per-model surface and let
   the centered modal float over the top. Sidebar + dash-top stay sharp
   so the user can switch models or top up. */
body.app-body.model-locked .dash > .page {
  filter: blur(8px) saturate(.7);
  pointer-events: none;
  user-select: none;
  transition: filter .2s ease;
}
body.app-body.model-locked .dash > .page.active {
  filter: blur(8px) saturate(.7);
}
/* Account section + agency pages stay sharp (Account is where billing
   lives; Agency works at the aggregate level). */
body.app-body.model-locked .dash > .agency-page,
body.app-body.model-locked .dash > .account-page {
  filter: none;
  pointer-events: auto;
}
/* The lock overlay is invisible by default; visible only when body class
   is set. aria-hidden mirrors that state. */
.lock-overlay {
  position: fixed; inset: 0; z-index: 240;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(6, 7, 12, .76);
  backdrop-filter: blur(2px);
  padding: 24px;
}
body.app-body.model-locked .lock-overlay {
  display: flex;
  animation: lockFadeIn .25s ease-out;
}
/* When X is clicked the lock modal hides (.dismissed class) but the
   workspace stays blurred — body.lock-dismissed is set in JS so this
   compact card can take its place. Click the card → re-open the modal;
   click "Go to subscriptions" → navigate directly. */
body.app-body.model-locked .lock-overlay.dismissed { display: none; }
.renew-relock-hint {
  display: none;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 230;
  width: min(420px, calc(100% - 32px));
  padding: 36px 34px;
  flex-direction: column; align-items: center; text-align: center;
  /* Same dual-layer gradient as the Renew subscription modal
     (.lock-panel) — pink radial halo over a deep violet base so the
     two locked states feel like one component in two sizes. */
  background:
    radial-gradient(circle at 50% 0%, rgba(251, 113, 133, .14) 0%, transparent 70%),
    linear-gradient(180deg, rgba(28, 16, 52, .96) 0%, rgba(20, 12, 36, .96) 100%);
  border: 1px solid rgba(251, 113, 133, .25);
  border-radius: 20px;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .65);
  cursor: pointer;
  outline: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.app-body.model-locked.lock-dismissed .renew-relock-hint { display: inline-flex; }
/* Only show the card while the user is on a genuinely blurred per-creator
   page. data-side-2-view tracks the currently-visible view: "personal"
   shows per-creator pages (blurred when locked → want the card), while
   "agency", "account", and "admin" show non-blurred pages (don't want
   the card blocking them). Using the attribute instead of :has() on
   .active classes because some sections (e.g. billing) are .active in
   markup by default — :has() always matched and silently hid the card. */
.app[data-side-2-view="agency"]  .renew-relock-hint,
.app[data-side-2-view="account"] .renew-relock-hint,
.app[data-side-2-view="admin"]   .renew-relock-hint { display: none !important; }
.renew-relock-hint:hover,
.renew-relock-hint:focus-visible {
  transform: translate(-50%, -50%) translateY(-2px);
  border-color: rgba(251, 113, 133, .45);
  box-shadow: 0 32px 84px -22px rgba(0, 0, 0, .8);
}
.renew-relock-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(251, 113, 133, .14); color: #fb7185;
  margin-bottom: 18px;
}
.renew-relock-title { font-size: 1.18rem; font-weight: 700; color: #fff; margin: 0 0 8px; letter-spacing: -.01em; }
.renew-relock-sub   { font-size: .88rem; color: var(--text-mute); margin: 0 0 24px; line-height: 1.5; max-width: 320px; }
.renew-relock-sub strong { color: #fff; font-weight: 700; }
.renew-relock-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  border: none;
  color: #fff;
  font-family: inherit; font-size: .92rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(124, 58, 237, .4);
  transition: filter .15s ease, transform .15s ease;
}
.renew-relock-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* .dash needs position:relative so the absolutely-positioned relock
   card anchors to it (centering within the content area, not the
   viewport, so it doesn't sit behind the sidebars). */
.dash { position: relative; }
/* Dismissed via the close button — keep body.model-locked (workspace
   stays blurred + uninteractive so paid features remain gated) but
   hide the modal itself so the user can use the sidebar. */
body.app-body.model-locked .lock-overlay.dismissed { display: none; }
.lock-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
  z-index: 5;
}
.lock-close:hover {
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .3);
  color: #f87171;
}
@keyframes lockFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lock-panel {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  text-align: center;
  padding: 32px 30px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(251, 113, 133, .14) 0%, transparent 70%),
    linear-gradient(180deg, rgba(28, 16, 52, .96) 0%, rgba(20, 12, 36, .96) 100%);
  border: 1px solid rgba(251, 113, 133, .25);
  box-shadow: 0 28px 72px rgba(0, 0, 0, .65);
}
.lock-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(251, 113, 133, .15);
  color: #fb7185;
  margin-bottom: 14px;
}
.lock-title {
  margin: 0; font-size: 1.25rem; font-weight: 800; color: #fff;
  letter-spacing: -.01em;
}
.lock-sub {
  margin: 8px 0 22px; font-size: .9rem; color: var(--text-soft);
  line-height: 1.45;
}
.lock-sub strong { color: #fff; font-weight: 700; }
.lock-actions {
  display: flex; flex-direction: column; gap: 8px;
}
.lock-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-family: inherit; font-size: .9rem; font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
.lock-btn-primary {
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff;
  box-shadow: 0 8px 22px rgba(124, 58, 237, .35);
}
.lock-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.lock-btn-ghost {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .08);
  color: var(--text-soft);
}
.lock-btn-ghost:hover { background: rgba(167, 139, 250, .1); border-color: rgba(167, 139, 250, .35); color: #c4b5fd; }
.lock-foot {
  margin: 18px 0 0;
  font-size: .76rem; color: var(--text-mute); line-height: 1.5;
}

/* ── Tier picker modal ────────────────────────────────────────────────── */
.tier-overlay {
  position: fixed; inset: 0; z-index: 260;
  display: flex; align-items: center; justify-content: center;
  animation: tierFadeIn .18s ease-out;
}
.tier-overlay[hidden] { display: none; }
@keyframes tierFadeIn { from { opacity: 0; } to { opacity: 1; } }
.tier-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 7, 12, .82);
  backdrop-filter: blur(10px);
}
.tier-panel {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 58, 237, .14) 0%, transparent 55%),
    linear-gradient(180deg, rgba(28, 16, 52, .96) 0%, rgba(20, 12, 36, .96) 100%);
  border: 1px solid rgba(167, 139, 250, .25);
  border-radius: 20px;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .55);
  animation: tierPanelIn .28s cubic-bezier(.34, 1.12, .64, 1);
}
@keyframes tierPanelIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tier-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 14px;
}
.tier-title {
  margin: 0; font-size: 1.15rem; font-weight: 800; color: #fff;
  letter-spacing: -.01em;
}
.tier-sub { margin: 4px 0 0; font-size: .82rem; color: var(--text-mute); }
.tier-sub strong { color: #fff; }
.tier-close {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-soft);
  width: 32px; height: 32px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tier-close:hover { background: rgba(167, 139, 250, .14); color: #c4b5fd; border-color: rgba(167, 139, 250, .35); }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 6px 24px 16px;
}
@media (max-width: 720px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-loading {
  padding: 32px 8px;
  text-align: center;
  color: var(--text-mute);
  font-size: .9rem;
  grid-column: 1 / -1;
}
.tier-card {
  position: relative;
  padding: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1.5px solid rgba(255, 255, 255, .08);
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .15s;
}
.tier-card:hover { border-color: rgba(167, 139, 250, .35); background: rgba(124, 58, 237, .06); }
.tier-card.is-selected {
  border-color: var(--violet);
  background: rgba(124, 58, 237, .12);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .4), 0 12px 32px -16px rgba(124, 58, 237, .55);
}
.tier-card-featured { border-color: rgba(167, 139, 250, .45); }
.tier-badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ec4899, #7c3aed);
  color: #fff;
  font-size: .6rem; font-weight: 800; letter-spacing: .12em;
  box-shadow: 0 6px 14px rgba(236, 72, 153, .35);
  text-transform: uppercase;
  flex-shrink: 0;
}
.tier-card-head { display: flex; align-items: center; justify-content: space-between; }
.tier-card-name {
  font-size: .82rem; font-weight: 700;
  color: #c4b5fd;
  letter-spacing: .02em;
}
.tier-card-price {
  display: flex; align-items: baseline; gap: 2px;
  color: #fff;
}
.tier-card-currency { font-size: .9rem; color: var(--text-mute); }
.tier-card-value    { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.tier-card-period   { font-size: .78rem; color: var(--text-mute); font-weight: 600; margin-left: 3px; }
.tier-card-features {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.tier-card-features li {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--text-soft);
}
.tier-card-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(167, 139, 250, .7);
  box-shadow: 0 0 6px rgba(167, 139, 250, .5);
  flex-shrink: 0;
}
.tier-card-pick {
  padding: 8px 14px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text-soft);
  font-family: inherit; font-size: .82rem; font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tier-card:hover .tier-card-pick { background: rgba(167, 139, 250, .1); color: #c4b5fd; border-color: rgba(167, 139, 250, .3); }
.tier-card.is-selected .tier-card-pick {
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff;
  border-color: rgba(167, 139, 250, .5);
}

.tier-warn {
  display: flex; align-items: center; gap: 10px;
  margin: 0 24px 14px;
  padding: 10px 14px;
  border-radius: 11px;
  background: rgba(251, 113, 133, .1);
  border: 1px solid rgba(251, 113, 133, .3);
  color: #fb7185;
  font-size: .82rem;
  animation: tierWarnIn .22s ease-out;
}
/* Beat the display: flex above when the hidden attribute is set. */
.tier-warn[hidden] { display: none; }
@keyframes tierWarnIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tier-warn-text { flex: 1; }
.tier-warn-btn {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(251, 113, 133, .45);
  color: #fff;
  font-family: inherit; font-size: .78rem; font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.tier-warn-btn:hover { background: rgba(251, 113, 133, .15); }
.tier-warn-btn:active { transform: scale(.94); }

.tier-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.tier-foot-balance { font-size: .82rem; color: var(--text-mute); }
.tier-foot-balance strong {
  color: #fff; font-weight: 800; margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.tier-foot-actions { display: flex; align-items: center; gap: 8px; }
.tier-btn {
  padding: 10px 18px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-family: inherit; font-size: .88rem; font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
.tier-btn-ghost {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .08);
  color: var(--text-soft);
}
.tier-btn-ghost:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.tier-btn-primary {
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff;
  box-shadow: 0 8px 22px rgba(124, 58, 237, .35);
  min-width: 180px;
}
.tier-btn-primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.tier-btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.tier-btn-primary.is-short {
  background: rgba(251, 113, 133, .2);
  border-color: rgba(251, 113, 133, .35);
  box-shadow: none;
}
.tier-btn-primary.is-ok {
  background: linear-gradient(180deg, #4ade80, #16a34a);
  box-shadow: 0 8px 22px rgba(74, 222, 128, .35);
  opacity: 1;
}

/* ── Top-up modal ─────────────────────────────────────────────────────── */
.topup-overlay {
  position: fixed; inset: 0; z-index: 250;
  display: flex; align-items: center; justify-content: center;
  animation: topupFadeIn .18s ease-out;
}
.topup-overlay[hidden] { display: none; }
@keyframes topupFadeIn { from { opacity: 0; } to { opacity: 1; } }
.topup-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 7, 12, .82);
  backdrop-filter: blur(10px);
}
.topup-panel {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 58, 237, .14) 0%, transparent 55%),
    linear-gradient(180deg, rgba(28, 16, 52, .96) 0%, rgba(20, 12, 36, .96) 100%);
  border: 1px solid rgba(167, 139, 250, .25);
  border-radius: 20px;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .55);
}
.topup-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 14px;
}
.topup-title {
  margin: 0; font-size: 1.15rem; font-weight: 800; color: #fff;
  letter-spacing: -.01em;
}
.topup-sub {
  margin: 4px 0 0; font-size: .82rem; color: var(--text-mute);
  max-width: 360px;
}
.topup-close {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-soft);
  width: 32px; height: 32px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.topup-close:hover { background: rgba(167, 139, 250, .14); color: #c4b5fd; border-color: rgba(167, 139, 250, .35); }

.topup-pending {
  display: flex; align-items: center; gap: 10px;
  margin: 0 24px 14px;
  padding: 10px 14px;
  border-radius: 11px;
  background: rgba(167, 139, 250, .1);
  border: 1px solid rgba(167, 139, 250, .25);
  color: var(--text);
  font-size: .82rem;
}
.topup-pending[hidden] { display: none; }
.topup-pending svg { color: #c4b5fd; flex-shrink: 0; }
.topup-pending-text { flex: 1; }
.topup-pending.topup-pending-ok {
  background: rgba(74, 222, 128, .12);
  border-color: rgba(74, 222, 128, .35);
}

.topup-amount-wrap,
.topup-coins-wrap {
  padding: 0 24px 14px;
}
.topup-amount-label,
.topup-coins-label {
  display: block;
  font-size: .92rem; font-weight: 700; color: #f4f4ff;
  margin-bottom: 2px;
}
.topup-amount-req { color: #fb7185; margin-left: 2px; }
.topup-amount-hint {
  margin: 0 0 10px;
  font-size: .78rem; color: var(--text-mute);
}
.topup-amount-input-wrap {
  display: flex; align-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .15s, background .15s;
}
.topup-amount-input-wrap:focus-within {
  border-color: rgba(167, 139, 250, .45);
  background: rgba(124, 58, 237, .06);
}
.topup-amount-prefix {
  padding: 12px 4px 12px 14px;
  color: var(--text-mute); font-size: 1.02rem; font-weight: 600;
}
.topup-amount-input {
  flex: 1; min-width: 0;
  padding: 12px 14px 12px 6px;
  background: transparent; border: none; outline: none;
  color: #fff; font-family: inherit; font-size: 1.02rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* hide native spinner — controls are the preset chips */
  -moz-appearance: textfield;
  appearance: textfield;
}
.topup-amount-input::-webkit-outer-spin-button,
.topup-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.topup-amount-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
@media (max-width: 520px) { .topup-amount-presets { grid-template-columns: repeat(2, 1fr); } }
.topup-preset {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-soft);
  font-family: inherit; font-size: .88rem; font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.topup-preset:hover { background: rgba(167, 139, 250, .1); border-color: rgba(167, 139, 250, .25); color: #c4b5fd; }
.topup-preset:active { transform: scale(.96); }
.topup-preset.active {
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  border-color: rgba(167, 139, 250, .55);
  color: #fff;
  box-shadow: 0 6px 14px rgba(124, 58, 237, .35);
}

.topup-tabs {
  display: flex; align-items: center; gap: 6px;
  padding: 0;
  flex-wrap: wrap;
}
.topup-tab {
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-soft);
  font-family: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer;
  transition:
    background .22s cubic-bezier(.4, 0, .2, 1),
    color .22s ease,
    border-color .22s ease,
    box-shadow .25s ease,
    transform .15s cubic-bezier(.34, 1.56, .64, 1);
}
.topup-tab:hover { background: rgba(167, 139, 250, .1); border-color: rgba(167, 139, 250, .25); color: #c4b5fd; }
.topup-tab:active { transform: scale(.94); }
.topup-tab.active {
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  border-color: rgba(167, 139, 250, .55);
  color: #fff;
  box-shadow: 0 6px 16px rgba(124, 58, 237, .35);
  transform: scale(1.04);
}

.topup-body {
  padding: 6px 24px 18px;
  min-height: 220px;
}
.topup-loading,
.topup-empty {
  padding: 32px 8px;
  text-align: center;
  color: var(--text-mute);
  font-size: .9rem;
}
.topup-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  align-items: flex-start;
  animation: topupCardIn .28s cubic-bezier(.34, 1.12, .64, 1);
}
@keyframes topupCardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 580px) {
  .topup-card { grid-template-columns: 1fr; }
}
.topup-qr-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.topup-qr {
  width: 160px; height: 160px;
  border-radius: 14px;
  background: #fff;
  padding: 8px;
  box-sizing: border-box;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .35);
  animation: topupQrIn .48s cubic-bezier(.34, 1.56, .64, 1);
  animation-delay: .04s;
  animation-fill-mode: backwards;
}
@keyframes topupQrIn {
  0%   { opacity: 0; transform: scale(.7) rotate(-4deg); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}
.topup-coin-label {
  animation: topupFadeIn .24s ease-out;
  animation-delay: .22s;
  animation-fill-mode: backwards;
}
@keyframes topupFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.topup-qr-fallback {
  width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-mute); font-size: .8rem;
  background: rgba(255, 255, 255, .04);
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, .1);
}
.topup-coin-label {
  font-size: .78rem; font-weight: 700; color: #c4b5fd;
  letter-spacing: .04em;
}
.topup-meta {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  animation: topupMetaIn .36s cubic-bezier(.4, 0, .2, 1);
  animation-delay: .1s;
  animation-fill-mode: backwards;
}
@keyframes topupMetaIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Each meta row gets a tiny stagger so the address, waiting indicator,
   and notes "ladder in" instead of all at once. */
.topup-meta > * {
  animation: topupRowIn .32s cubic-bezier(.4, 0, .2, 1);
  animation-fill-mode: backwards;
}
.topup-meta > *:nth-child(1) { animation-delay: .14s; }
.topup-meta > *:nth-child(2) { animation-delay: .19s; }
.topup-meta > *:nth-child(3) { animation-delay: .24s; }
.topup-meta > *:nth-child(4) { animation-delay: .29s; }
@keyframes topupRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .topup-card, .topup-qr, .topup-coin-label, .topup-meta, .topup-meta > * { animation: none; }
}
.topup-meta-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  color: var(--text-mute); text-transform: uppercase;
}
.topup-amount-hint {
  padding: 10px 12px;
  background: rgba(124, 58, 237, .1);
  border: 1px solid rgba(167, 139, 250, .25);
  border-radius: 10px;
  font-size: .82rem;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.topup-amount-hint strong { color: #c4b5fd; font-weight: 700; }
.topup-addr-wrap {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 4px;
}
.topup-addr {
  flex: 1; min-width: 0;
  padding: 8px 10px;
  background: transparent; border: none; outline: none;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  letter-spacing: .01em;
}
.topup-copy {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(167, 139, 250, .12);
  border: 1px solid rgba(167, 139, 250, .25);
  color: #c4b5fd;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.topup-copy:hover { background: rgba(167, 139, 250, .2); }
.topup-copy:active { transform: scale(.94); }
.topup-copy.is-copied {
  background: rgba(74, 222, 128, .15);
  border-color: rgba(74, 222, 128, .4);
  color: #4ade80;
}
.topup-waiting {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(251, 191, 36, .07);
  border: 1px solid rgba(251, 191, 36, .22);
  color: #fbbf24;
  font-size: .78rem; font-weight: 600;
}
.topup-waiting-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 8px #fbbf24;
  animation: securityDotPulse 1.8s ease-in-out infinite;
}
.topup-notes {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.topup-notes li {
  font-size: .74rem; color: var(--text-mute);
  padding-left: 14px;
  position: relative;
}
.topup-notes li::before {
  content: '·';
  position: absolute;
  left: 4px; top: -2px;
  font-size: 1rem;
  color: rgba(167, 139, 250, .5);
}

.topup-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 24px 22px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.topup-foot-balance { font-size: .82rem; color: var(--text-mute); }
.topup-foot-balance strong {
  color: #fff; font-weight: 800; margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.topup-foot-hint { font-size: .72rem; color: var(--text-mute); }

/* ── Account → Subscriptions page ───────────────────────────────────── */
.subs-header { margin-bottom: 22px; }
.subs-title {
  margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff 0%, #d2b8ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.subs-sub { margin: 6px 0 0; font-size: .9rem; color: var(--text-mute); }

.subs-card {
  padding: 22px 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(26, 30, 41, .6) 0%, rgba(20, 23, 32, .6) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  margin-bottom: 16px;
}
.subs-card-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.subs-card-title {
  margin: 0; font-size: 1rem; font-weight: 700; color: #f4f4ff;
  letter-spacing: -.005em;
}
.subs-card-sub {
  margin: 4px 0 0; font-size: .8rem; color: var(--text-mute);
}

.subs-plan {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.subs-plan-meta { min-width: 0; }
.subs-plan-tagrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.subs-plan-tier {
  font-size: .68rem; font-weight: 800; letter-spacing: .14em;
  color: #c4b5fd;
  background: rgba(167, 139, 250, .12);
  border: 1px solid rgba(167, 139, 250, .25);
  border-radius: 999px;
  padding: 4px 10px;
}
.subs-plan-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700;
  color: #4ade80;
  background: rgba(74, 222, 128, .1);
  border: 1px solid rgba(74, 222, 128, .22);
  border-radius: 999px;
  padding: 3px 9px;
}
.subs-plan-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  animation: securityDotPulse 1.8s ease-in-out infinite;
}
.subs-plan-name {
  font-size: 1.35rem; font-weight: 800; color: #fff;
  letter-spacing: -.02em;
}
.subs-plan-hint {
  margin-top: 4px;
  font-size: .82rem; color: var(--text-mute);
}
.subs-plan-price { text-align: right; }
.subs-plan-amount { color: #fff; }
.subs-plan-currency { font-size: .92rem; color: var(--text-mute); margin-right: 1px; }
.subs-plan-value    { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.subs-plan-period   { font-size: .82rem; color: var(--text-mute); font-weight: 600; margin-left: 3px; }
.subs-plan-renews {
  margin-top: 2px;
  font-size: .76rem; color: var(--text-mute);
}

.subs-plan-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
@media (max-width: 720px) { .subs-plan-stats { grid-template-columns: 1fr; } }
.subs-plan-stat { display: flex; flex-direction: column; gap: 3px; }
.subs-plan-stat-label {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 700;
}
.subs-plan-stat-value {
  font-size: 1rem; font-weight: 700; color: #f4f4ff;
  font-variant-numeric: tabular-nums;
}
.subs-plan-stat-of { color: var(--text-mute); font-weight: 500; font-size: .82rem; }

.subs-plan-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.subs-plan-action-note {
  font-size: .78rem; color: var(--text-mute);
}
/* Tier-mix chips below the hero hint */
.subs-tier-mix {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.subs-tier-mix-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(167, 139, 250, .08);
  border: 1px solid rgba(167, 139, 250, .2);
  color: #c4b5fd;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.subs-plan-status.subs-plan-status-warn {
  color: #fb7185;
  background: rgba(251, 113, 133, .1);
  border-color: rgba(251, 113, 133, .25);
}
.subs-plan-status.subs-plan-status-warn .subs-plan-dot {
  background: #fb7185;
  box-shadow: 0 0 6px #fb7185;
}
.subs-action {
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, filter .15s ease;
}
.subs-action-primary {
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff;
  box-shadow: 0 6px 16px rgba(124, 58, 237, .3);
}
.subs-action-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.subs-action-ghost {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .08);
  color: var(--text);
}
.subs-action-ghost:hover { background: rgba(167, 139, 250, .1); border-color: rgba(167, 139, 250, .3); color: #c4b5fd; }
.subs-action-quiet {
  background: transparent;
  color: var(--text-mute);
  margin-left: auto;
}
.subs-action-quiet:hover { color: #fb7185; }

.subs-mini-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-soft);
  font-family: inherit; font-size: .78rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.subs-mini-btn:hover { background: rgba(124, 58, 237, .12); border-color: rgba(167, 139, 250, .3); color: #c4b5fd; }

.subs-list { display: flex; flex-direction: column; }
.subs-list-head {
  display: grid;
  grid-template-columns: 32px minmax(140px, 1fr) 110px 100px 130px 90px 90px;
  gap: 14px;
  padding: 6px 4px 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.subs-list-head > span {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.subs-list-row {
  display: grid;
  grid-template-columns: 32px minmax(140px, 1fr) 110px 100px 130px 90px 90px;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.subs-list-renew { display: flex; align-items: center; }
.subs-list-renew-empty {
  color: var(--text-mute); font-size: .82rem; font-weight: 500;
}
.subs-list-row:first-child { border-top: none; }
.subs-list-av {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: .82rem; font-weight: 700;
  flex-shrink: 0;
}
.subs-list-name { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.subs-list-name strong {
  font-size: .88rem; font-weight: 600; color: #f4f4ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.subs-list-name span {
  font-size: .72rem; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.subs-list-tier {
  display: inline-flex; align-items: center; align-self: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(167, 139, 250, .08);
  border: 1px solid rgba(167, 139, 250, .18);
  font-size: .74rem; font-weight: 600;
  color: var(--text-soft);
  letter-spacing: .01em;
  width: max-content;
}
.subs-list-tier-expired {
  background: rgba(251, 113, 133, .1);
  border-color: rgba(251, 113, 133, .3);
  color: #fb7185;
}
.subs-list-price {
  font-size: .88rem; font-weight: 600; color: #f4f4ff;
  font-variant-numeric: tabular-nums;
}
.subs-list-price span { color: var(--text-mute); font-weight: 500; font-size: .76rem; }
.subs-list-price-muted { color: var(--text-mute); font-weight: 500; }
.subs-list-when {
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.subs-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; user-select: none;
  font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.subs-toggle:disabled { cursor: default; opacity: .5; }
.subs-toggle-track {
  position: relative;
  width: 30px; height: 17px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .18s ease, border-color .18s ease;
}
.subs-toggle-thumb {
  position: absolute; top: 1px; left: 1px;
  width: 13px; height: 13px;
  background: #cfcfd9;
  border-radius: 50%;
  transition: transform .18s ease, background .18s ease;
}
.subs-toggle[aria-checked="true"] .subs-toggle-track {
  background: rgba(124, 58, 237, .65);
  border-color: rgba(167, 139, 250, .55);
}
.subs-toggle[aria-checked="true"] .subs-toggle-thumb {
  transform: translateX(13px);
  background: #fff;
}
.subs-toggle:focus-visible .subs-toggle-track {
  outline: 2px solid rgba(167, 139, 250, .6);
  outline-offset: 2px;
}
.subs-toggle-label {
  font-size: .76rem; font-weight: 500;
  color: var(--text-mute);
  letter-spacing: .01em;
}
.subs-toggle[aria-checked="true"] .subs-toggle-label { color: #c4b5fd; }
.subs-list-link {
  justify-self: end; align-self: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  cursor: pointer;
  color: var(--text-soft);
  font-family: inherit; font-size: .78rem; font-weight: 600;
  padding: 6px 14px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.subs-list-link:hover {
  background: rgba(124, 58, 237, .12);
  border-color: rgba(167, 139, 250, .3);
  color: #c4b5fd;
}

@media (max-width: 820px) {
  .subs-list-head { display: none; }
  .subs-list-row {
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
  }
  .subs-list-tier,
  .subs-list-price,
  .subs-list-when,
  .subs-list-renew { display: none; }
}

.subs-features {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 22px;
}
@media (max-width: 720px) { .subs-features { grid-template-columns: 1fr; } }
.subs-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: .86rem; color: var(--text);
}
.subs-feat-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(167, 139, 250, .7);
  box-shadow: 0 0 8px rgba(167, 139, 250, .5);
  flex-shrink: 0;
}

body.app-body.censored .subs-list-av {
  filter: blur(7px) saturate(.85) !important;
  clip-path: circle(50%);
}

/* ── Account → Security page ────────────────────────────────────────── */
.security-header { margin-bottom: 22px; }
.security-title {
  margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff 0%, #d2b8ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.security-sub {
  margin: 6px 0 0; font-size: .9rem; color: var(--text-mute);
}
.security-card {
  padding: 22px 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(26, 30, 41, .6) 0%, rgba(20, 23, 32, .6) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  margin-bottom: 18px;
}
.security-card-head { margin-bottom: 16px; }
.security-card-head-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.security-card-title {
  margin: 0; font-size: 1.05rem; font-weight: 700; color: #f4f4ff;
  letter-spacing: -.01em;
}
.security-card-sub {
  margin: 4px 0 0; font-size: .82rem; color: var(--text-mute);
}

.security-form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.security-field { display: flex; flex-direction: column; gap: 6px; }
.security-field-label {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 700;
}
.security-input-wrap {
  display: flex; align-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .15s ease, background .15s ease;
}
.security-input-wrap:focus-within {
  border-color: rgba(167, 139, 250, .45);
  background: rgba(124, 58, 237, .05);
}
.security-input {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  background: transparent; border: none; outline: none;
  color: #f4f4ff; font-family: inherit; font-size: .95rem;
  letter-spacing: .02em;
}
.security-eye {
  background: transparent; border: none;
  color: var(--text-mute); cursor: pointer;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  transition: color .15s ease, background .15s ease;
}
.security-eye:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.security-eye.is-on { color: #c4b5fd; }

.security-pw-strength {
  display: flex; align-items: center; gap: 10px;
  margin-top: 2px;
}
.security-pw-bar {
  flex: 1; height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  overflow: hidden;
}
.security-pw-bar span {
  display: block; height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width .25s ease, background .25s ease;
}
.security-pw-bar span.weak   { background: linear-gradient(90deg, #fb7185, #f43f5e); }
.security-pw-bar span.fair   { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.security-pw-bar span.good   { background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.security-pw-bar span.strong { background: linear-gradient(90deg, #4ade80, #10b981); }
.security-pw-label {
  font-size: .76rem; font-weight: 600; color: var(--text-mute);
  min-width: 60px; text-align: right;
}

.security-actions {
  display: flex; align-items: center; gap: 14px;
  margin-top: 4px;
}
.security-save-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border-radius: 11px;
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff; border: none; cursor: pointer;
  font-family: inherit; font-size: .9rem; font-weight: 700;
  box-shadow: 0 8px 22px rgba(124, 58, 237, .35);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.security-save-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 12px 28px rgba(124, 58, 237, .45);
}
.security-save-btn:active { transform: translateY(0); }
.security-save-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.security-save-status { font-size: .82rem; color: #4ade80; font-weight: 600; }
.security-save-status.is-error { color: #fb7185; }

.security-signout-others {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(251, 113, 133, .08);
  border: 1px solid rgba(251, 113, 133, .25);
  color: #fb7185;
  font-family: inherit; font-size: .8rem; font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.security-signout-others:hover {
  background: rgba(251, 113, 133, .15);
  border-color: rgba(251, 113, 133, .45);
  color: #ff8898;
}
.security-signout-others:disabled { opacity: .6; cursor: not-allowed; }

.security-sessions { display: flex; flex-direction: column; gap: 10px; }
.security-session {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .05);
}
.security-session-current {
  background: rgba(124, 58, 237, .08);
  border-color: rgba(167, 139, 250, .25);
}
.security-session-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(167, 139, 250, .15);
  color: #c4b5fd;
}
.security-session-title {
  display: flex; align-items: center; gap: 10px;
  font-size: .95rem; font-weight: 700; color: #f4f4ff;
}
.security-session-badge {
  font-size: .65rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  color: #4ade80;
  background: rgba(74, 222, 128, .12);
  border: 1px solid rgba(74, 222, 128, .25);
  border-radius: 999px;
  padding: 3px 8px;
}
.security-session-sub {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
  font-size: .8rem; color: var(--text-mute);
}
.security-session-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: securityDotPulse 1.8s ease-in-out infinite;
}
@keyframes securityDotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}
.security-sessions-note {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .015);
  border: 1px dashed rgba(255, 255, 255, .1);
  color: var(--text-mute);
  font-size: .8rem;
}

/* ── Account → Profile page ─────────────────────────────────────────── */
.profile-header { margin-bottom: 22px; }
.profile-title {
  margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff 0%, #d2b8ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.profile-sub {
  margin: 6px 0 0; font-size: .9rem; color: var(--text-mute);
}
.profile-card {
  padding: 28px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 0%, rgba(124, 58, 237, .12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(26, 30, 41, .65) 0%, rgba(20, 23, 32, .65) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
}
.profile-card-body {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 820px) {
  .profile-card-body { grid-template-columns: 1fr; gap: 22px; }
}
.profile-avatar-wrap {
  display: flex; flex-direction: column; align-items: center;
  position: relative;
  gap: 12px;
}
.profile-avatar {
  width: 132px; height: 132px;
  border-radius: 50%;
  background-color: rgba(124, 58, 237, .35);
  background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid rgba(167, 139, 250, .35);
  box-shadow: 0 18px 38px rgba(124, 58, 237, .35);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.profile-avatar:hover { transform: translateY(-1px); box-shadow: 0 22px 44px rgba(124, 58, 237, .45); }
.profile-avatar-initial {
  color: #fff; font-size: 3rem; font-weight: 800; letter-spacing: -.02em;
}
.profile-avatar.has-photo .profile-avatar-initial { display: none; }
.profile-avatar-edit {
  position: absolute;
  bottom: 32px; right: 8px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .55);
  border: 3px solid #15101e;
  transition: transform .15s ease, filter .15s ease;
}
.profile-avatar-edit:hover { transform: scale(1.05); filter: brightness(1.08); }
.profile-avatar-edit:active { transform: scale(.94); }
.profile-since {
  font-size: .8rem; color: var(--text-mute);
  text-align: center;
  background: rgba(167, 139, 250, .1);
  border: 1px solid rgba(167, 139, 250, .22);
  border-radius: 999px;
  padding: 5px 12px;
  margin-top: 2px;
  white-space: nowrap;
}

.profile-fields {
  display: flex; flex-direction: column; gap: 18px;
  min-width: 0;
}
.profile-field { display: flex; flex-direction: column; gap: 6px; }
.profile-field-label {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 700;
}
.profile-field-readonly {
  padding: 12px 14px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .05);
  color: #f4f4ff; font-size: .95rem; font-weight: 600;
}
.profile-field-email {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-soft);
}
.profile-field-email span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f4f4ff; }
.profile-field-email svg { color: var(--text-mute); flex-shrink: 0; }
.profile-verified { color: #4ade80; flex-shrink: 0; display: inline-flex; }
.profile-field-input-wrap {
  display: flex; align-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .15s, background .15s;
}
.profile-field-input-wrap:focus-within {
  border-color: rgba(167, 139, 250, .45);
  background: rgba(124, 58, 237, .05);
}
.profile-input-prefix {
  padding: 12px 6px 12px 14px;
  color: var(--text-mute); font-size: .95rem; font-weight: 600;
}
.profile-field-input {
  flex: 1; min-width: 0;
  padding: 12px 14px 12px 4px;
  background: transparent; border: none; outline: none;
  color: #f4f4ff; font-family: inherit; font-size: .95rem;
}
.profile-field-input::placeholder { color: var(--text-mute); }
.profile-field-hint {
  margin: 0; font-size: .76rem; color: var(--text-mute);
}
.profile-actions {
  display: flex; align-items: center; gap: 14px;
  margin-top: 8px;
}
.profile-save-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border-radius: 11px;
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff; border: none; cursor: pointer;
  font-family: inherit; font-size: .9rem; font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 8px 22px rgba(124, 58, 237, .35);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.profile-save-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 12px 28px rgba(124, 58, 237, .45);
}
.profile-save-btn:active { transform: translateY(0); }
.profile-save-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.profile-save-status {
  font-size: .82rem; color: #4ade80; font-weight: 600;
  transition: opacity .15s ease;
}
.profile-save-status.is-error { color: #fb7185; }

/* "Admin" badge above the profile avatar — visible only when the
   signed-in email is in FANCORE_ADMIN_EMAILS (the body class .is-admin
   + the .fc-admin-only [hidden] removal is set in dashboard.html). */
.profile-admin-badge {
  position: absolute;
  top: -6px; left: -2px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  font-size: .65rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%);
  border: 1px solid rgba(196, 181, 253, .35);
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 6px 14px rgba(124, 58, 237, .35);
}
.profile-avatar-wrap { position: relative; }

/* Censor mode blurs the profile avatar too. */
body.app-body.censored .profile-avatar {
  filter: blur(10px) saturate(.85) !important;
}

/* ── Account → Referrals page ───────────────────────────────────────── */
.referrals-header { margin-bottom: 22px; }
.referrals-title {
  margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em;
  color: #fff;
  background: linear-gradient(180deg, #fff 0%, #d2b8ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.referrals-sub {
  margin: 6px 0 0; font-size: .9rem; color: var(--text-mute);
}

.referrals-top-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .referrals-top-row { grid-template-columns: 1fr; } }

.referrals-stat-card {
  padding: 20px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(26, 30, 41, .6) 0%, rgba(20, 23, 32, .6) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
}
.referrals-stat-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.referrals-stat-label {
  font-size: .92rem; font-weight: 700; color: #f4f4ff;
  letter-spacing: -.005em;
}
.referrals-stat-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(167, 139, 250, .14);
  color: #c4b5fd;
  display: inline-flex; align-items: center; justify-content: center;
}
.referrals-stat-card-credits .referrals-stat-icon {
  background: rgba(74, 222, 128, .12); color: #4ade80;
}
.referrals-stat-card-credited .referrals-stat-icon {
  background: rgba(251, 191, 36, .12); color: #fbbf24;
}
.referrals-stat-value {
  font-size: 2.4rem; font-weight: 800; color: #fff; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 8px;
}
.referrals-stat-card-credits .referrals-stat-value { color: #4ade80; }
.referrals-stat-foot {
  font-size: .8rem; color: var(--text-mute);
}

.referrals-link-card {
  padding: 22px 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(26, 30, 41, .55) 0%, rgba(20, 23, 32, .55) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  margin-bottom: 18px;
}
.referrals-link-head { margin-bottom: 18px; }
.referrals-link-title {
  margin: 0; font-size: 1.05rem; font-weight: 700; color: #f4f4ff;
  letter-spacing: -.01em;
}
.referrals-link-sub {
  margin: 4px 0 0; font-size: .82rem; color: var(--text-mute);
}
.referrals-link-label {
  display: block;
  font-size: .82rem; font-weight: 600; color: #f4f4ff;
  margin-bottom: 8px;
}
.referrals-link-row {
  display: flex; align-items: center; gap: 8px;
}
.referrals-link-input {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #f4f4ff;
  font-family: inherit; font-size: .92rem;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color .15s, background .15s;
}
.referrals-link-input:focus,
.referrals-link-input:hover {
  border-color: rgba(167, 139, 250, .35);
  background: rgba(124, 58, 237, .06);
}
.referrals-icon-btn {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  flex-shrink: 0;
}
.referrals-icon-btn:hover {
  background: rgba(124, 58, 237, .14);
  border-color: rgba(167, 139, 250, .35);
  color: #c4b5fd;
}
.referrals-icon-btn:active { transform: scale(.94); }
.referrals-icon-btn.is-copied {
  background: rgba(74, 222, 128, .14);
  border-color: rgba(74, 222, 128, .35);
  color: #4ade80;
}

.referrals-list-card {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(26, 30, 41, .55) 0%, rgba(20, 23, 32, .55) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  overflow: hidden;
}
.referrals-list-head { padding: 22px 24px 8px; }
.referrals-list-title {
  margin: 0; font-size: 1.05rem; font-weight: 700; color: #f4f4ff;
  letter-spacing: -.01em;
}
.referrals-list-sub {
  margin: 4px 0 0; font-size: .82rem; color: var(--text-mute);
}
.referrals-empty {
  padding: 56px 22px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.referrals-empty-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(124, 58, 237, .1);
  color: rgba(167, 139, 250, .6);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.referrals-empty-title {
  font-size: 1rem; font-weight: 700; color: #f4f4ff;
}
.referrals-empty-sub {
  font-size: .85rem; color: var(--text-mute);
}

/* ── Account → Billing page ──────────────────────────────────────────── */
.billing-top-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}
@media (max-width: 900px) {
  .billing-top-row { grid-template-columns: 1fr; }
}
.billing-balance-card {
  padding: 22px 24px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% -20%, rgba(124, 58, 237, .22) 0%, transparent 60%),
    linear-gradient(180deg, rgba(26, 30, 41, .75) 0%, rgba(20, 23, 32, .75) 100%);
  border: 1px solid rgba(167, 139, 250, .18);
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 40px -18px rgba(124, 58, 237, .35);
}
.billing-balance-head {
  display: flex; align-items: center; gap: 10px;
}
.billing-balance-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(124, 58, 237, .2);
  color: #c4b5fd;
  display: inline-flex; align-items: center; justify-content: center;
}
.billing-balance-label {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 700;
}
.billing-balance-value {
  font-size: 2.6rem; font-weight: 800; letter-spacing: -.025em;
  color: #fff;
  background: linear-gradient(180deg, #fff 0%, #d2b8ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.billing-balance-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.billing-balance-hint {
  font-size: .82rem; color: var(--text-mute); max-width: 320px;
}
.billing-topup-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 11px;
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff; border: none; cursor: pointer;
  font-family: inherit; font-size: .9rem; font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 8px 22px rgba(124, 58, 237, .4);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.billing-topup-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 12px 28px rgba(124, 58, 237, .5);
}
.billing-topup-btn:active { transform: translateY(0); }

.billing-stat-card {
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(26, 30, 41, .55) 0%, rgba(20, 23, 32, .55) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  display: flex; flex-direction: column; gap: 10px;
}
.billing-stat-head {
  display: flex; align-items: center; gap: 10px;
}
.billing-stat-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.billing-stat-icon-spend { background: rgba(74, 222, 128, .12); color: #4ade80; }
.billing-stat-icon-next  { background: rgba(167, 139, 250, .14); color: #c4b5fd; }
.billing-stat-label {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 700;
}
.billing-stat-value {
  font-size: 1.8rem; font-weight: 800; color: #fff; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.billing-stat-foot {
  font-size: .8rem; color: var(--text-mute);
}

.billing-tx-card {
  background: linear-gradient(180deg, rgba(26, 30, 41, .55) 0%, rgba(20, 23, 32, .55) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  overflow: hidden;
}
.billing-tx-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 8px;
}
.billing-tx-title {
  margin: 0; font-size: 1.05rem; font-weight: 700; color: #f4f4ff;
  letter-spacing: -.01em;
}
.billing-tx-sub {
  margin: 4px 0 0; font-size: .8rem; color: var(--text-mute);
}
.billing-export-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-soft);
  font-family: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.billing-export-btn:hover {
  background: rgba(124, 58, 237, .12);
  border-color: rgba(167, 139, 250, .35);
  color: #c4b5fd;
}

.billing-tx-table { display: flex; flex-direction: column; }
.billing-tx-row {
  display: grid;
  grid-template-columns: 140px minmax(260px, 2.6fr) 150px 110px 130px;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-top: 1px solid rgba(255, 255, 255, .04);
  transition: background .12s;
}
.billing-tx-rows .billing-tx-row:hover { background: rgba(124, 58, 237, .05); }
.billing-tx-row-head {
  padding-top: 14px; padding-bottom: 12px;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.billing-tx-row-head .cell {
  font-size: .68rem; letter-spacing: .12em;
  color: #6b6b9a; font-weight: 700; text-transform: uppercase;
}
.billing-tx-row .cell-date .d {
  color: #f4f4ff; font-weight: 600; font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.billing-tx-row .cell-date .t {
  font-size: .72rem; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.billing-tx-row .cell-desc {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.billing-tx-av {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: .92rem; font-weight: 700;
  flex-shrink: 0;
}
.billing-tx-av-topup {
  background: rgba(74, 222, 128, .15) !important;
  color: #4ade80;
}
.billing-tx-desc-text {
  display: flex; flex-direction: column; min-width: 0;
}
.billing-tx-desc-text strong {
  font-size: .92rem; font-weight: 700; color: #f4f4ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.billing-tx-desc-text span {
  font-size: .76rem; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.billing-method {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem;
}
.billing-method-brand {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  color: #c4b5fd;
  background: rgba(124, 58, 237, .14);
  border: 1px solid rgba(167, 139, 250, .25);
  border-radius: 5px;
  padding: 2px 6px;
}
.billing-method-last4 {
  color: var(--text-soft); font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.billing-status {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.billing-status-paid {
  background: rgba(74, 222, 128, .12);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, .22);
}
.billing-tx-row .cell-amount {
  font-size: .98rem; font-weight: 700; color: #fb7185;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.billing-tx-row .cell-amount.billing-amount-credit { color: #4ade80; }
.billing-tx-empty {
  padding: 28px 22px; text-align: center;
  color: var(--text-mute); font-size: .88rem;
}
.subs-list-empty {
  padding: 24px 6px; text-align: center;
  color: var(--text-mute); font-size: .86rem;
}

@media (max-width: 1000px) {
  .billing-tx-row {
    grid-template-columns: 100px minmax(180px, 2fr) 120px 90px 100px;
    gap: 10px; padding: 12px 14px;
  }
}

/* ── Agency revenue distribution: donut + ranked legend ──────────────── */
.agency-pie {
  margin-top: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 58, 237, .12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(26, 30, 41, .65) 0%, rgba(20, 23, 32, .65) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 20px;
  padding: 22px 26px;
}
.agency-pie-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.agency-pie-title {
  margin: 0; font-size: 1.05rem; font-weight: 700; color: #f4f4ff;
  letter-spacing: -.01em;
}
.agency-pie-sub {
  margin: 4px 0 0; font-size: .8rem; color: var(--text-mute);
}
.agency-pie-total {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.agency-pie-total-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  color: var(--text-mute); text-transform: uppercase;
}
.agency-pie-total-value {
  font-size: 1.15rem; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums;
}
.agency-pie-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 980px) {
  .agency-pie-body { grid-template-columns: 1fr; gap: 24px; }
}
.agency-pie-chart {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.agency-pie-tooltip { pointer-events: none; }
.agency-pie-svg {
  width: 260px; height: 260px;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55));
}
.agency-pie-svg path,
.agency-pie-svg circle[data-cid] {
  cursor: pointer;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), filter .22s ease;
  transform-origin: 0 0;
  transform-box: fill-box;
}
.agency-pie-svg path:hover,
.agency-pie-svg circle[data-cid]:hover {
  filter: brightness(1.18);
  transform: scale(1.04);
}
.agency-pie-center-label {
  fill: #fff; font-size: 26px; font-weight: 800; letter-spacing: -.02em;
  font-family: inherit;
}
.agency-pie-center-sub {
  fill: var(--text-mute); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  font-family: inherit;
}
.agency-pie-center-count {
  fill: #c4b5fd; font-size: 10px; font-weight: 700;
  letter-spacing: .06em;
  font-family: inherit;
}

/* Legend — clean rows with a left color stripe + rank + avatar + name +
   % + dollars. No card boxes around individual rows — divider-only. */
.agency-pie-legend {
  display: flex; flex-direction: column;
  max-height: 300px; overflow-y: auto;
  padding-right: 4px;
}
.agency-pie-legend-row {
  display: grid;
  grid-template-columns: 28px 4px 30px minmax(110px, 1fr) 60px 100px;
  align-items: center;
  gap: 12px;
  padding: 11px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  transition: background .12s;
}
.agency-pie-legend-row:last-child { border-bottom: none; }
.agency-pie-legend-row:hover { background: rgba(255, 255, 255, .025); }
.agency-pie-legend-rank {
  color: #4b4d6f; font-size: .78rem; font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: center;
}
.agency-pie-legend-bar {
  width: 4px; height: 28px; border-radius: 2px;
  background: var(--legend-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--legend-color) 60%, transparent);
}
.agency-pie-legend-av {
  width: 30px; height: 30px; border-radius: 50%;
  background-color: rgba(124, 58, 237, .35);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: .8rem; font-weight: 700;
  flex-shrink: 0;
}
.agency-pie-legend-name {
  color: #f4f4ff; font-weight: 600; font-size: .92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.agency-pie-legend-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: #c4b5fd; font-size: .98rem;
  text-align: right;
}
.agency-pie-legend-val {
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: #fff; font-size: .92rem;
  text-align: right;
}
.agency-pie-empty {
  padding: 28px 8px; text-align: center;
  color: var(--text-mute); font-size: .9rem;
}

/* Censor mode keeps the donut visible (slices are abstract revenue
   shares, no model faces in them) — only the legend avatars get
   blurred so model identity is hidden. */
body.app-body.censored .agency-pie-legend-av {
  filter: blur(8px) saturate(.85) !important;
  clip-path: circle(50%);
}

/* ── Agency "All Models" breakdown table ──────────────────────────────── */
.agency-models-table-wrap {
  margin-top: 22px;
  background: linear-gradient(180deg, rgba(26, 30, 41, .55) 0%, rgba(20, 23, 32, .55) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  overflow: hidden;
}
.agency-models-table-head {
  padding: 18px 22px 6px;
}
.agency-models-table-title {
  margin: 0; font-size: 1.05rem; font-weight: 700; color: #f4f4ff;
  letter-spacing: -.01em;
}
.agency-models-table-count {
  margin-left: 8px;
  font-size: .82rem; font-weight: 500; color: var(--text-mute);
}
.agency-models-table { display: flex; flex-direction: column; }
.agency-models-row {
  display: grid;
  grid-template-columns: 50px minmax(180px, 2fr) 140px 110px 110px 110px 110px 130px;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-top: 1px solid rgba(255, 255, 255, .04);
  transition: background .12s;
}
.agency-models-rows .agency-models-row:hover { background: rgba(124, 58, 237, .06); }
.agency-models-row-head {
  padding-top: 14px; padding-bottom: 12px;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.agency-models-row-head .cell {
  font-size: .68rem; letter-spacing: .12em; color: #6b6b9a;
  font-weight: 700; text-transform: uppercase;
}
.agency-models-row-head .cell-sortable {
  cursor: pointer; user-select: none;
  transition: color .12s;
}
.agency-models-row-head .cell-sortable:hover { color: #c4b5fd; }
.agency-models-row-head .cell-sortable.is-sorted { color: #c4b5fd; }
.agency-models-row-head .sort-ind { color: #c4b5fd; }
.agency-models-row .cell-rank {
  color: #4b4d6f; font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.agency-models-row .cell-creator {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.agency-models-av {
  width: 36px; height: 36px;
  border-radius: 10px;
  background-color: rgba(124, 58, 237, .35);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: .9rem; font-weight: 700;
  flex-shrink: 0;
}
.agency-models-name {
  font-size: .95rem; font-weight: 600; color: #f4f4ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agency-models-row .cell-money,
.agency-models-row .cell-subs {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: .9rem;
}
.agency-models-row .cell-money-strong {
  font-weight: 700; font-size: 1rem; color: #fff;
  display: flex; flex-direction: column; gap: 2px;
}
.cell-money-sub {
  font-size: .7rem; font-weight: 500; color: var(--text-mute);
  letter-spacing: 0;
}
.agency-models-row .cell-subs strong {
  display: block; font-size: 1rem; color: #fff; font-weight: 700;
}
.cell-subs-sub {
  font-size: .7rem; color: var(--text-mute);
}
.agency-models-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.agency-models-trend.up   { color: #4ade80; }
.agency-models-trend.down { color: #fb7185; }
.agency-models-trend.flat { color: var(--text-mute); }
.agency-models-empty {
  padding: 28px 22px; text-align: center;
  color: var(--text-mute); font-size: .9rem;
}
@media (max-width: 1100px) {
  .agency-models-row {
    grid-template-columns: 36px minmax(140px, 2fr) 110px 90px 90px 100px 90px 110px;
    gap: 8px; padding: 12px 16px;
  }
}

/* Agency time-series charts — two-up grid below the stats cards.
   Total/Subs share row 1, Tips/PPV share row 2, Sales spans the full
   width on row 3 since it's the combined view. */
.agency-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 22px;
}
.agency-charts-row .agency-chart-wide { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .agency-charts-row { grid-template-columns: 1fr; }
  .agency-charts-row .agency-chart-wide { grid-column: auto; }
}

/* ── Agency models filter (multi-select dropdown) ───────────────────────── */
.agency-models-filter { position: relative; }
.agency-models-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(20, 8, 41, .6);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text-soft);
  font-family: inherit;
  font-size: .85rem; font-weight: 500;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.agency-models-trigger:hover {
  color: var(--text);
  border-color: var(--line-2);
}
/* Stay the same color when the menu is open — just hold the hover state
   so the trigger doesn't visually flip into a different control. */
.agency-models-trigger.is-open {
  color: var(--text);
  border-color: var(--line-2);
}
.agency-models-avatars {
  display: inline-flex;
  align-items: center;
}
.agency-models-avatars .av {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #14081f;
  background-position: center;
  background-size: cover;
  background-color: rgba(124, 58, 237, .4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  margin-left: -7px;
}
.agency-models-avatars .av:first-child { margin-left: 0; }
.agency-models-avatars .av.more {
  background: rgba(124, 58, 237, .35);
  color: #c4b5fd;
}
.agency-models-label { white-space: nowrap; }

.agency-models-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  min-width: 260px;
  max-width: 320px;
  background: #14161e;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .65);
  overflow: hidden;
  animation: agencyModelsMenuIn .14s ease-out;
}
@keyframes agencyModelsMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}
.agency-models-menu-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.agency-models-search {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  padding: 6px 10px;
  color: #f4f4ff;
  font-size: .8rem;
  outline: none;
}
.agency-models-search:focus { border-color: rgba(255, 255, 255, .18); }
.agency-models-action {
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.agency-models-action:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.agency-models-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}
.agency-models-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s;
}
.agency-models-item:hover { background: rgba(255, 255, 255, .04); }
.agency-models-item .av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-color: rgba(124, 58, 237, .4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.agency-models-item .name {
  flex: 1;
  min-width: 0;
  font-size: .85rem;
  font-weight: 600;
  color: #f4f4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agency-models-item .handle {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  color: #8a8db1;
  margin-top: 1px;
}
.agency-models-item .check {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, .25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s, border-color .12s;
}
.agency-models-item.selected .check {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}
.agency-models-item.selected .check svg { display: block; }
.agency-models-item .check svg { display: none; width: 12px; height: 12px; }
.agency-models-empty { padding: 14px; text-align: center; color: #8a8db1; font-size: .8rem; }

/* ── Creators table (Agency → Creators page) ────────────────────────────── */
.creators-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #f4f4ff;
  margin: 0 0 18px;
  letter-spacing: -.01em;
}
.creators-table-wrap {
  background: linear-gradient(180deg, rgba(26, 30, 41, .55) 0%, rgba(20, 23, 32, .55) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  overflow: hidden;
}
.creators-table {
  display: flex;
  flex-direction: column;
}
.creators-row {
  display: grid;
  grid-template-columns: minmax(220px, 2.2fr) 130px 80px 160px 90px 110px;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  transition: background .12s;
}
.creators-rows .creators-row:hover {
  background: rgba(124, 58, 237, .06);
}
.creators-row:last-child { border-bottom: none; }
.creators-row-head {
  padding-top: 16px;
  padding-bottom: 12px;
}
.creators-row-head .cell {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: #6b6b9a;
  text-transform: uppercase;
}
.cell-account {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.creators-row:not(.creators-row-head) .cell-account .av {
  width: 42px; height: 42px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(124, 58, 237, .35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  flex-shrink: 0;
}
.creators-row:not(.creators-row-head) .cell-account .name {
  font-size: .95rem;
  font-weight: 700;
  color: #f4f4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-platform {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: #f4f4ff;
}
.cell-platform .platform-ico {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.creators-row:not(.creators-row-head) .cell-proxy {
  font-size: .85rem;
  font-weight: 500;
  color: #6b6b9a;
}
.creators-row:not(.creators-row-head) .cell-expires {
  font-size: .85rem;
  font-weight: 500;
  color: #cbd0e8;
}
.plan-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  background: rgba(124, 58, 237, .18);
  border: 1px solid rgba(124, 58, 237, .45);
  border-radius: 999px;
  color: #c4b5fd;
  font-size: .75rem;
  font-weight: 700;
}
.plan-pill.free {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
  color: #cbd0e8;
}
.creators-row:not(.creators-row-head) .cell-actions {
  display: flex;
  justify-content: flex-end;
}
.creator-manage-btn {
  padding: 7px 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  color: #cbd0e8;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.creator-manage-btn:hover {
  background: rgba(124, 58, 237, .18);
  color: #fff;
  border-color: rgba(124, 58, 237, .55);
}
.creators-empty {
  padding: 36px 22px;
  text-align: center;
  color: #8a8db1;
  font-size: .9rem;
}

/* Agency stat cards — match the per-creator .kpi dashboard cards (same
   gradient, radius, padding, hover glow) so the agency page feels native. */
.agency-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
/* Per-model Dashboard grid: 4 cols on wide screens with the final
   (11th) card spanning 2 cols so 4+4+(1+1+2) = 4 full rows of 4 cells,
   no awkward 1-card row left over. Scales down on narrower viewports. */
#dashStatsGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Inter-card gap inherits the 14px from .agency-stats-grid above */
  margin-bottom: 36px;
}
#dashStatsGrid > .agency-stat-card:last-child {
  grid-column: span 2;
}
@media (max-width: 1180px) {
  #dashStatsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #dashStatsGrid > .agency-stat-card:last-child { grid-column: span 1; }
}
@media (max-width: 760px) {
  #dashStatsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.agency-stat-card {
  background: linear-gradient(180deg, rgba(26, 15, 51, .8) 0%, rgba(20, 12, 41, .8) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  position: relative; overflow: hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  /* Staggered fade-up like the FYP "reveal" cards */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp .55s cubic-bezier(.22, 1, .36, 1) forwards;
}
.agency-stat-card:nth-child(1)  { animation-delay: 0.00s; }
.agency-stat-card:nth-child(2)  { animation-delay: 0.05s; }
.agency-stat-card:nth-child(3)  { animation-delay: 0.10s; }
.agency-stat-card:nth-child(4)  { animation-delay: 0.15s; }
.agency-stat-card:nth-child(5)  { animation-delay: 0.20s; }
.agency-stat-card:nth-child(6)  { animation-delay: 0.25s; }
.agency-stat-card:nth-child(7)  { animation-delay: 0.30s; }
.agency-stat-card:nth-child(8)  { animation-delay: 0.35s; }
.agency-stat-card:nth-child(9)  { animation-delay: 0.40s; }
.agency-stat-card:nth-child(10) { animation-delay: 0.45s; }
.agency-stat-card:nth-child(11) { animation-delay: 0.50s; }
.agency-stat-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(167, 139, 250, .08), transparent 60%);
  pointer-events: none; transition: background .3s;
}
.agency-stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--violet);
  box-shadow: 0 12px 32px -10px var(--violet-glow);
}
.agency-stat-card:hover::before {
  background: radial-gradient(circle at 0% 0%, rgba(167, 139, 250, .2), transparent 65%);
}
.agency-stat-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.agency-stat-icon {
  width: 32px; height: 32px; border-radius: 10px;
  background: rgba(167, 139, 250, .14);
  display: flex; align-items: center; justify-content: center;
  color: var(--violet);
  flex-shrink: 0;
}
.agency-stat-icon svg { width: 16px; height: 16px; stroke-width: 2.2; }
.agency-stat-label {
  font-size: .8rem; color: var(--text-soft); font-weight: 500;
}
.agency-stat-value {
  font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* "Net $X" line below the gross value — Fansly takes 20% so the
   creator's actual take-home is gross × 0.80. Subtle styling so the
   gross figure stays the headline number. */
.agency-stat-net {
  font-size: .76rem;
  font-weight: 600;
  color: #fff;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.agency-stat-foot {
  font-size: .78rem;
  color: var(--text-mute);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  min-height: 1.1em;
}
.agency-stat-delta {
  display: inline-flex; align-items: center; gap: 6px;
}
.agency-stat-delta.up   { color: #4ade80; }
.agency-stat-delta.down { color: #fb7185; }
.agency-stat-delta-pct  { font-weight: 600; }
.agency-stat-loading {
  grid-column: 1 / -1;
  padding: 40px 0;
  text-align: center;
  color: var(--text-mute);
  font-size: .9rem;
}

/* Skeleton placeholders — render the same card layout with shimmering bars so
   the grid doesn't jump in when real data arrives. */
@keyframes agencySkelShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.agency-stat-card-skel {
  pointer-events: none;
  /* Skip the fade-up stagger on skeletons — they should appear instantly so
     only the real-data cards get the reveal animation. */
  animation: none;
  opacity: 1;
  transform: none;
}
.agency-stat-card-skel .agency-stat-icon {
  background: rgba(124, 58, 237, .14);
  color: rgba(196, 181, 253, .35);
}
.agency-skel-bar {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: agencySkelShimmer 1.4s linear infinite;
}
.agency-skel-label { width: 60%;  height: 12px; }
.agency-skel-value { width: 78%;  height: 28px; margin-top: 2px; }
.agency-skel-foot  { width: 45%;  height: 11px; }

/* Live chat launcher (bottom-right floating button) is only relevant on the
   Account tab. Animate in/out with a soft pop/fade so the appearance feels
   intentional rather than abrupt. */
.lc-launcher {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1),
              opacity .25s ease,
              box-shadow .2s;
}
body:has(.app:not([data-side-tab="personal"])) .lc-launcher {
  opacity: 0;
  transform: scale(.4) translateY(28px);
  pointer-events: none;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1),
              opacity .18s ease;
}
body:has(.app:not([data-side-tab="personal"])) .lc-window { display: none !important; }
body:has(.app[data-side-tab="agency"]) .collapse-btn,
body:has(.app[data-side-tab="personal"]) .collapse-btn { display: none; }
/* side-2-group wrappers participate in the existing flex column via display:contents */
.side-2-group { display: contents; }

/* Team section rows in the Agency sidebar — two-line layout with a rounded
   icon tile on the left, title on top, subtitle muted below. */
.side-team-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease;
}
.side-team-item:hover { background: rgba(124, 58, 237, .08); }
.side-team-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .04);
  color: var(--text-soft, #cbd5e1);
}
.side-team-item:hover .side-team-icon {
  background: rgba(124, 58, 237, .14);
  color: #c4b5fd;
}
.side-team-text {
  display: flex; flex-direction: column; min-width: 0; gap: 2px;
}
.side-team-text strong {
  font-size: .9rem; font-weight: 600;
  color: var(--text-strong, #f3f4f6);
  line-height: 1.2;
}
.side-team-text span {
  font-size: .72rem; color: var(--text-mute);
  line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* When data-side-2-view is set on .app, only the matching side-2 group is
   visible. Default (no attribute) = show personal group only. */
.app[data-side-2-view="personal"] .side-2-group:not([data-side-2-view="personal"]) { display: none; }
.app[data-side-2-view="agency"]   .side-2-group:not([data-side-2-view="agency"])   { display: none; }
.app[data-side-2-view="account"]  .side-2-group:not([data-side-2-view="account"])  { display: none; }
.app[data-side-2-view="admin"]    .side-2-group:not([data-side-2-view="admin"])    { display: none; }
.app:not([data-side-2-view]) .side-2-group:not([data-side-2-view="personal"])      { display: none; }
.side-1 {
  transition: padding .35s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
/* In the Electron desktop shell, push the brand logo below the
   macOS traffic-light dots (close/min/max sit at y:16 per main.js). */
body.is-electron .side-1 .brand { margin-top: 16px; }

/* Desktop update banner — fixed to the bottom-right of the window,
   only visible after main.js detects a newer GitHub Release. The web
   build never shows this (no preload bridge → handler bails). */
.fc-update-banner {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 14px;
  background: linear-gradient(180deg, rgba(38, 30, 64, .96) 0%, rgba(28, 22, 48, .96) 100%);
  border: 1px solid rgba(167, 139, 250, .35);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(167, 139, 250, .08);
  color: #f4f4ff;
  font-size: .82rem;
  backdrop-filter: blur(10px);
  animation: fcUpdateIn .35s cubic-bezier(.4, 0, .2, 1);
}
/* HTML hidden attribute must beat the class's display:flex. Without this
   the banner shows on web (where JS doesn't unhide it) and Dismiss does
   nothing because banner.hidden = true gets visually ignored. */
.fc-update-banner[hidden] { display: none; }
@keyframes fcUpdateIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fc-update-banner-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #c4b5fd;
  box-shadow: 0 0 0 0 rgba(196, 181, 253, .6);
  animation: fcUpdatePulse 1.8s ease-out infinite;
  flex-shrink: 0;
}
@keyframes fcUpdatePulse {
  0%   { box-shadow: 0 0 0 0 rgba(196, 181, 253, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(196, 181, 253, 0); }
  100% { box-shadow: 0 0 0 0 rgba(196, 181, 253, 0); }
}
.fc-update-banner-text { display: flex; flex-direction: column; line-height: 1.25; }
.fc-update-banner-text strong { font-weight: 700; color: #fff; }
.fc-update-banner-text span { font-size: .72rem; color: var(--text-mute); }
.fc-update-banner-body {
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 200px;
}
.fc-update-banner-head {
  display: flex; align-items: baseline; gap: 6px;
  line-height: 1.25;
}
.fc-update-banner-head strong { font-weight: 700; color: #fff; }
.fc-update-banner-head span { font-size: .72rem; color: var(--text-mute); }
.fc-update-banner-status {
  font-size: .7rem;
  color: var(--text-soft);
  line-height: 1.3;
}
.fc-update-banner-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.fc-update-banner-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #a78bfa 0%, #7c3aed 100%);
  transition: width .2s ease;
}
.fc-update-banner-btn {
  padding: 6px 12px;
  background: linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%);
  border: 1px solid rgba(167, 139, 250, .45);
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: .78rem;
  text-decoration: none;
  transition: filter .15s ease;
}
.fc-update-banner-btn:hover { filter: brightness(1.12); }
.fc-update-banner-dismiss {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-mute);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.fc-update-banner-dismiss:hover { background: rgba(255, 255, 255, .06); color: #fff; }

/* Collapsed sidebar — icon rail.
   Text labels animate via max-width + opacity so the collapse feels
   continuous instead of snapping. display:none can't be transitioned,
   which is what made the old collapse pop. */
.side-1 .brand .brand-name,
.side-1 .brand .beta-tag,
.side-1 .side-link span,
.side-1 .creator-name,
.side-1 .creator .badge,
.side-1 .side-foot button span {
  display: inline-block;
  max-width: 200px;
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width .32s cubic-bezier(.4, 0, .2, 1),
    opacity .2s ease,
    margin .32s cubic-bezier(.4, 0, .2, 1);
  will-change: max-width, opacity;
}
.side-1 .creator-name { display: flex; }
.side-1 .side-label,
.side-1 .agency-card,
.side-1 .creator-empty-hint {
  overflow: hidden;
  transition:
    max-height .32s cubic-bezier(.4, 0, .2, 1),
    opacity .2s ease,
    margin .32s cubic-bezier(.4, 0, .2, 1);
  max-height: 200px; opacity: 1;
}

.app.collapsed .side-1 { padding: 22px 0; align-items: center; }
.app.collapsed .side-1 .brand .brand-name,
.app.collapsed .side-1 .brand .beta-tag,
.app.collapsed .side-1 .side-link span,
.app.collapsed .side-1 .creator-name,
.app.collapsed .side-1 .creator .badge,
.app.collapsed .side-1 .side-foot button span {
  max-width: 0;
  opacity: 0;
  margin: 0 !important;          /* kill any auto margins (e.g. .beta-tag margin-left:auto) that would push the visible icon off-center */
  padding: 0;
  pointer-events: none;
}
.app.collapsed .side-1 .side-label,
.app.collapsed .side-1 .agency-card,
.app.collapsed .side-1 .creator-empty-hint {
  max-height: 0; opacity: 0;
  margin-top: 0; margin-bottom: 0;
  pointer-events: none;
}
/* Status dot in the collapsed rail — also hidden per product call.
   Uncomment to restore alongside .creator-av.online::after below. */
/*
.app.collapsed .side-1 .creator-av.online::after {
  top: -2px; left: -2px;
  right: auto; bottom: auto;
  width: 7px; height: 7px;
  border: 1.5px solid #0e061e;
  box-shadow: none;
  animation: none;
}
*/
.app.collapsed .side-1 .brand {
  width: 44px;                  /* match other icon-rail slots so the orb centers identically */
  justify-content: center; padding: 6px 0 18px;
  gap: 0;                       /* hidden brand-name + beta-tag inject flex gaps → orb drifts left without this */
}
.app.collapsed .side-1 .brand .brand-mark { margin: 0 auto; }
.side-1 .side-link {
  transition:
    width .32s cubic-bezier(.4, 0, .2, 1),
    padding .32s cubic-bezier(.4, 0, .2, 1),
    margin .32s cubic-bezier(.4, 0, .2, 1),
    background .2s ease, color .2s ease;
}
.side-1 .creator {
  transition:
    width .32s cubic-bezier(.4, 0, .2, 1),
    height .32s cubic-bezier(.4, 0, .2, 1),
    padding .32s cubic-bezier(.4, 0, .2, 1),
    border-radius .32s cubic-bezier(.4, 0, .2, 1),
    gap .32s cubic-bezier(.4, 0, .2, 1),
    background .2s ease;
}
.app.collapsed .side-1 .side-link {
  width: 44px; height: 44px;
  padding: 0; margin: 4px auto;
  justify-content: center;
  gap: 0;
}
.app.collapsed .side-1 .side-foot button { gap: 0; }
.app.collapsed .side-1 .side-link svg { width: 20px; height: 20px; }
.app.collapsed .side-1 .creator-list {
  align-items: center; gap: 8px;
  padding: 8px 0 4px;
  border-top: 1px solid var(--line);
  margin: 8px 0 0; width: 44px; align-self: center;
}
.app.collapsed .side-1 .creator {
  padding: 0; width: 44px; height: 44px;
  justify-content: center;
  border-radius: 50%;
  gap: 0;                       /* hidden .creator-name still injects a flex gap → avatar drifts left without this */
  background: transparent;
  box-shadow: none;
}
.app.collapsed .side-1 .creator:hover { background: transparent; box-shadow: none; }
.app.collapsed .side-1 .creator { position: relative; }
.app.collapsed .side-1 .creator .creator-av {
  width: 38px; height: 38px;
  border: 2px solid transparent;
  opacity: .55;
  transform: scale(.94);
  transition:
    opacity .28s cubic-bezier(.4, 0, .2, 1),
    transform .42s cubic-bezier(.34, 1.56, .64, 1),
    border-color .28s ease,
    box-shadow .35s ease;
  will-change: transform, opacity;
}
.app.collapsed .side-1 .creator:hover .creator-av {
  opacity: 1;
  transform: scale(1);
}
.app.collapsed .side-1 .creator:active .creator-av {
  transform: scale(.9);
  transition: transform .12s ease;
}
.app.collapsed .side-1 .creator.active { background: transparent; }
.app.collapsed .side-1 .creator.active .creator-av {
  border-color: var(--pink);
  opacity: 1;
  transform: scale(1.08);
  box-shadow: 0 0 0 0 rgba(236, 72, 153, 0);
}
.app.collapsed .side-1 .creator.just-activated .creator-av {
  animation: fc-creator-pulse .48s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes fc-creator-pulse {
  0%   { transform: scale(.94); box-shadow: 0 0 0 0 rgba(236, 72, 153, .55); }
  55%  { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(236, 72, 153, .18); }
  100% { transform: scale(1.08); box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
}
.app.collapsed .side-1 .creator::before {
  inset: auto;
  left: -8px; top: 50%; right: auto; bottom: auto;
  width: 3px; height: 26px;
  margin-top: -13px;
  border: none;
  border-radius: 0 3px 3px 0;
  background: var(--violet);
  opacity: 1;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1) .04s;
}
.app.collapsed .side-1 .creator.active::before { transform: scaleY(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .app.collapsed .side-1 .creator .creator-av,
  .app.collapsed .side-1 .creator::before { transition-duration: .08s; animation: none; }
}
.app.collapsed .side-1 .side-foot {
  margin-top: 14px; padding: 14px 0 0;
  width: 44px; align-self: center;
}
.app.collapsed .side-1 .side-foot button {
  width: 44px; height: 44px;
  font-size: 1.2rem; padding: 0;
  border-radius: 12px;
}

/* Collapse toggle button */
.collapse-btn {
  position: fixed; top: 80px;
  left: 232px;
  z-index: 30;
  width: 30px; height: 34px;
  border-radius: 11px;
  background: rgba(20, 8, 41, .92);
  border: 1px solid var(--line-2);
  color: var(--text-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  /* Springy easing for both the position shift and the press/hover feel. */
  transition:
    left .45s cubic-bezier(.65, -0.05, .25, 1.25),
    transform .25s cubic-bezier(.65, -0.05, .25, 1.4),
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .25s ease;
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.collapse-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(124,58,237,.35), transparent 65%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.collapse-btn:hover {
  background: rgba(124, 58, 237, .25);
  color: #fff;
  border-color: var(--violet);
  transform: scale(1.08);
  box-shadow: 0 6px 18px -4px rgba(124,58,237,.55);
}
.collapse-btn:hover::before { opacity: 1; }
.collapse-btn:active {
  transform: scale(0.92);
  transition-duration: .12s;
}
.collapse-btn svg {
  position: relative;
  transition: transform .55s cubic-bezier(.65, -0.05, .25, 1.4);
}
.app.collapsed ~ .collapse-btn { left: 64px; }
.app.collapsed ~ .collapse-btn svg { transform: rotate(180deg); }

@media (max-width: 1100px) {
  .collapse-btn { display: none; }
}
body.app-body { padding-top: 0; }
body.app-body::before, body.app-body::after { display: none; }
body.app-body {
  --bg: #0a0d14;
  --line: #1f242f;
  --line-2: #2a2f3c;
  background: #0a0d14 !important;
  background-image: none !important;
}
body.app-body .app { background: #0a0d14; }
body.app-body .side-1 { background: #14171f; border-color: #1c1f29; }
body.app-body .side-2 { background: #11141b; border-color: #1c1f29; }
body.app-body .dash-top {
  background: linear-gradient(180deg, #0a0d14 60%, transparent);
}
body.app-body .kpi,
body.app-body .panel,
body.app-body .stat-card,
body.app-body .feature,
body.app-body .agency-stat-card {
  background: linear-gradient(180deg, rgba(26, 30, 41, .8) 0%, rgba(20, 23, 32, .8) 100%);
  border-color: #1f242f;
}
body.app-body .kpi:hover,
body.app-body .panel:hover,
body.app-body .feature:hover,
body.app-body .agency-stat-card:hover { border-color: var(--violet); }
body.app-body .country-card,
body.app-body .tier-card {
  background: linear-gradient(180deg, rgba(26, 30, 41, .6) 0%, rgba(18, 21, 30, .5) 100%);
  border-color: #1f242f;
}
body.app-body .country-card:hover,
body.app-body .tier-card:hover { border-color: var(--violet); }
body.app-body .a-cell,
body.app-body .spender,
body.app-body .lc-input-row + .lc-chip {
  background: rgba(26, 30, 41, .6);
  border-color: #1f242f;
}
body.app-body .funds-pill,
body.app-body .icon-btn,
body.app-body .range-tabs {
  background: rgba(20, 23, 32, .6);
  border-color: #1f242f;
}
body.app-body .agency-card { background: rgba(26, 30, 41, .5); border-color: #1f242f; }
body.app-body .creator-pill { background: rgba(26, 30, 41, .5); border-color: #1f242f; }
body.app-body .balance-card {
  background: rgba(74, 222, 128, .06);
  border-color: rgba(74, 222, 128, .25);
}
body.app-body .onboard {
  background: linear-gradient(180deg, rgba(124, 58, 237, .1) 0%, rgba(18, 21, 30, .5) 100%);
  border-color: #1f242f;
}
body.app-body .chart-tabs { background: rgba(20, 23, 32, .6); border-color: #1f242f; }
body.app-body .age-bar,
body.app-body .country-bar,
body.app-body .tier-bar,
body.app-body .onboard-progress { background: #1f242f; }
body.app-body details,
body.app-body .faq-item { background: linear-gradient(180deg, rgba(26, 30, 41, .6) 0%, rgba(20, 23, 32, .6) 100%); border-color: #1f242f; }

/* Sidebar — agency / creators */
.side-1 {
  background: rgba(14, 6, 30, .85);
  border-right: 1px solid var(--line);
  padding: 22px 16px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.side-1 .brand { padding: 6px 8px 22px; }
.beta-tag {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: rgba(167, 139, 250, .15); color: var(--violet);
  font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; margin-left: auto;
}
.side-label {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); margin: 8px 8px 8px;
}

/* Sidebar tabs (All / Agency / Personal) — pill toggle that swaps the
   visible menu sections via [data-side-tab] matching. Styled to mirror the
   Spotify "Podcasts" pill the user referenced: rounded full, light active. */
.side-tabs {
  display: flex; gap: 6px;
  margin: 4px 4px 14px;
}
.side-tab {
  padding: 6px 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 999px;
  color: var(--text-soft, #cbd5e1);
  font-size: .78rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.side-tab:hover {
  background: rgba(124, 58, 237, .12);
  color: #c4b5fd;
}
.side-tab.active {
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  border-color: var(--violet-deep);
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .3);
}
/* Hide sidebar items whose data-side-tab doesn't include the active tab. */
.app[data-side-tab="agency"]   [data-side-tab]:not([data-side-tab~="agency"])   { display: none !important; }
.app[data-side-tab="personal"] [data-side-tab]:not([data-side-tab~="personal"]) { display: none !important; }
.app[data-side-tab="all"]      [data-side-tab]:not([data-side-tab~="all"])      { display: none !important; }
/* When sidebar is collapsed, hide the tabs row entirely (no room for them) */
.app.collapsed .side-1 .side-tabs { display: none; }
.agency-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(167, 139, 250, .06);
  border: 1px solid var(--line);
  margin-bottom: 18px;
}
.agency-card strong { font-size: .9rem; }
.agency-card .online {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; color: #4ade80;
}
.agency-card .online::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: ping 2s ease-out infinite;
}

.side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--text-soft); font-size: .9rem; font-weight: 500;
  margin-bottom: 2px; cursor: pointer;
  transition: background .2s ease, color .2s ease;
  position: relative;
}
.side-link::before {
  content: ""; position: absolute; left: -16px; top: 50%;
  width: 3px; height: 22px;
  margin-top: -11px;
  border-radius: 0 3px 3px 0;
  background: var(--violet);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .22s ease;
}
.side-link:hover {
  background: rgba(167, 139, 250, .06);
  color: var(--text);
}
.side-link.active {
  background: rgba(167, 139, 250, .14);
  color: var(--text);
}
.side-link.active::before { transform: scaleY(1); }
.side-link svg {
  width: 18px; height: 18px; opacity: .7;
  transition: opacity .2s ease, color .2s ease;
}
.side-link.active svg { opacity: 1; color: var(--violet); }

.creator-list {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1; min-height: 0;
  overflow-y: auto;
  margin: 0 -8px; padding: 4px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.creator-list::-webkit-scrollbar { width: 6px; }
.creator-list::-webkit-scrollbar-track { background: transparent; }
.creator-list::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 6px;
  transition: background .2s;
}
.creator-list::-webkit-scrollbar-thumb:hover { background: var(--violet); }
.creator {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px;
  cursor: pointer;
  position: relative;
  background: transparent;
  transition: background .2s ease;
}
.creator::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 12px;
  border: 1.5px solid rgba(167, 139, 250, .55);
  background: rgba(167, 139, 250, .08);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
/* Inactive state: subtle 1px ring + faint background so the card is visible
   without competing with the active violet card. */
.creator {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  background: rgba(255, 255, 255, .015);
}
.creator:hover {
  background: rgba(167, 139, 250, .05);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .12);
}
.creator.active {
  background: transparent;
  box-shadow: none;                /* let ::before's violet ring show through */
}
.creator.active::before { opacity: 1; }
/* Inactive cards: text + handle slightly muted so the active card stands out */
.creator:not(.active) .creator-name strong { opacity: .85; }
.creator:not(.active) .creator-name span   { opacity: .75; }
.creator-av {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #7c3aed);
  flex-shrink: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; color: #fff;
  background-size: cover; background-position: center;
}
/* Status dot hidden per product call — was sitting on the top-left of
   every sidebar avatar (green for online, red override for locked).
   Uncomment to restore. Same goes for the collapsed-rail override
   below and the .creator-locked color override above. */
/*
.creator-av.online::after {
  content: ""; position: absolute;
  top: -2px; left: -2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; border: 1.5px solid #0e061e;
}
*/
/* Real Fansly photos — slightly desaturated + dimmed so they don't visually
   dominate the sidebar like a lit-up portrait. Letter-only avatars are
   unaffected. */
.creator-av.has-photo {
  filter: saturate(.78) brightness(.88);
  transition: filter .2s;
}
.creator.active .creator-av.has-photo,
.creator-av.has-photo:hover { filter: saturate(.95) brightness(1); }

.creator-name { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 3px; }
.creator-name strong {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .005em;
  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 55%, #f0abfc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  line-height: 1.15;
}
.creator-name span { font-size: .72rem; color: var(--text-mute); line-height: 1.15; }
.creator .badge {
  background: #ef4444; color: #fff;
  font-size: .65rem; font-weight: 700;
  padding: 2px 6px; border-radius: 999px;
  min-width: 22px; text-align: center;
}

/* Creator actions — 3-dot menu */
.creator-actions { position: relative; flex-shrink: 0; }
.activity-dots {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 8px 6px;
  background: transparent; border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease;
}
.activity-dots:hover { background: rgba(167, 139, 250, .12); }
.activity-dots i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-mute);
  display: block;
  transition: background .15s ease;
}
.activity-dots:hover i,
.activity-dots[aria-expanded="true"] i {
  background: var(--violet);
}
.creator.active .activity-dots i { background: var(--pink); }
.app.collapsed .side-1 .creator-actions { display: none; }

.creator-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: rgba(20, 23, 32, .98);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  backdrop-filter: blur(12px);
  z-index: 30;
  opacity: 0;
  transform: translateY(-6px) scale(.96);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s cubic-bezier(.34, 1.4, .64, 1);
}
.creator-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.creator-menu-item {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: transparent; border: none;
  border-radius: 7px;
  color: var(--text-soft);
  font-family: inherit;
  font-size: .88rem; font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: left;
}
.creator-menu-item:hover {
  background: rgba(167, 139, 250, .12);
  color: var(--text);
}
.creator-menu-item.danger { color: #f87171; }
.creator-menu-item.danger:hover {
  background: rgba(239, 68, 68, .12);
  color: #fca5a5;
}

/* Account popup (Billing / Profiles / Creators) */
.account-popup {
  position: fixed;
  min-width: 200px;
  background: rgba(20, 23, 32, .98);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .55);
  backdrop-filter: blur(16px);
  z-index: 200;
  opacity: 0;
  transform: translateX(-8px) scale(.96);
  transform-origin: left center;
  pointer-events: none;
  transition: opacity .18s ease, transform .2s cubic-bezier(.34, 1.4, .64, 1);
}
.account-popup.open {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}
.account-popup-header {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 8px 10px 6px;
}
.account-popup-item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: transparent; border: none;
  border-radius: 8px;
  color: var(--text-soft);
  font-family: inherit;
  font-size: .9rem; font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: left;
}
.account-popup-item:hover {
  background: rgba(167, 139, 250, .12);
  color: var(--text);
}
.account-popup-item svg {
  width: 16px; height: 16px; opacity: .7;
  flex-shrink: 0;
}
.account-popup-item:hover svg { opacity: 1; color: var(--violet); }

/* Notifications popup (top-right) — refined */
.notif-popup {
  position: fixed;
  top: 64px;
  right: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(167, 139, 250, .12), transparent 60%),
    linear-gradient(180deg, rgba(28, 22, 48, .98), rgba(18, 17, 28, .98));
  border: 1px solid rgba(167, 139, 250, .14);
  border-radius: 18px;
  padding: 4px 4px 6px;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .65),
    0 2px 6px rgba(167, 139, 250, .08),
    inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(22px);
  z-index: 200;
  opacity: 0;
  transform: translateY(-14px) scale(.96);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .22s ease,
              transform .3s cubic-bezier(.34, 1.4, .64, 1);
  overflow: hidden;
}
.notif-popup.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.notif-popup-glow {
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(167, 139, 250, .35), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease .1s;
}
.notif-popup.open .notif-popup-glow { opacity: 1; }

.notif-popup-head {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 16px 10px;
}
.notif-popup-titlewrap { flex: 1; }
.notif-popup-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.015em;
}
.notif-popup-live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
  animation: notifPulse 2s ease-in-out infinite;
}
.notif-popup-sub {
  font-size: .74rem;
  color: var(--text-mute);
  margin-top: 4px;
}
.notif-popup-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--violet), #8b5cf6);
  color: #fff;
  font-weight: 700;
  font-size: .68rem;
  min-width: 16px; height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  vertical-align: 1px;
  box-shadow: 0 2px 8px rgba(167, 139, 250, .35);
}
.notif-popup-clear {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(167, 139, 250, .08);
  border: 1px solid rgba(167, 139, 250, .14);
  color: var(--text-soft);
  font-family: inherit;
  font-size: .73rem; font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.notif-popup-clear svg { color: var(--violet); }
.notif-popup-clear:hover {
  color: var(--text);
  background: rgba(167, 139, 250, .18);
  border-color: rgba(167, 139, 250, .3);
  transform: translateY(-1px);
}

.notif-popup-tabs {
  display: flex; gap: 4px;
  padding: 0 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.notif-tab {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none;
  color: var(--text-mute);
  font-family: inherit;
  font-size: .76rem; font-weight: 600;
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.notif-tab:hover { color: var(--text-soft); background: rgba(255, 255, 255, .03); }
.notif-tab.active {
  color: var(--text);
  background: rgba(167, 139, 250, .14);
}
.notif-tab-pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(167, 139, 250, .25);
  color: var(--text);
  font-size: .65rem;
  font-weight: 700;
  min-width: 16px; height: 16px;
  padding: 0 5px;
  border-radius: 6px;
}

.notif-popup-list {
  display: flex; flex-direction: column;
  padding: 6px 6px 4px;
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, .25) transparent;
}
.notif-popup-list::-webkit-scrollbar { width: 6px; }
.notif-popup-list::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, .25);
  border-radius: 6px;
}

.notif-section-label {
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 8px 10px 6px;
  font-weight: 600;
}

.notif-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px 11px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-soft);
  transition: background .18s ease, transform .2s ease;
  opacity: 0;
  transform: translate(0, 8px);
  animation: notifItemIn .42s cubic-bezier(.34, 1.4, .64, 1) forwards;
}
.notif-popup.open .notif-item:nth-child(2) { animation-delay: .12s; }
.notif-popup.open .notif-item:nth-child(3) { animation-delay: .2s; }
.notif-popup.open .notif-item:nth-child(4) { animation-delay: .28s; }
.notif-item::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  width: 3px; height: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--violet), #c4b5fd);
  transform: translateY(-50%);
  transition: height .25s cubic-bezier(.34, 1.4, .64, 1);
}
.notif-item.unread::before { height: 22px; }
.notif-item:hover {
  background: rgba(167, 139, 250, .08);
  transform: translateX(2px);
}

.notif-avatar {
  position: relative;
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.notif-avatar-pink {
  background: linear-gradient(135deg, #f472b6, #ec4899);
}
.notif-avatar-violet {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
}
.notif-avatar-blue {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  color: #fff;
}
.notif-avatar-badge {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #052e16;
  font-size: .7rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #14171f;
  box-shadow: 0 2px 6px rgba(34, 197, 94, .4);
}

.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
  font-size: .86rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.005em;
}
.notif-item-title strong { color: var(--text); font-weight: 700; }
.notif-item-meta {
  font-size: .73rem;
  color: var(--text-mute);
  margin-top: 5px;
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.notif-meta-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--text-mute);
  opacity: .5;
}
.notif-amount-pill {
  display: inline-flex; align-items: center;
  background: linear-gradient(135deg, rgba(34, 197, 94, .22), rgba(16, 185, 129, .14));
  color: #4ade80;
  font-weight: 700;
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: -.01em;
}
.notif-user { color: var(--text-soft); font-weight: 600; }
.notif-stat-good { color: #4ade80; font-weight: 600; }
.notif-stat-bad { color: #f87171; font-weight: 600; }

.notif-item-time {
  flex-shrink: 0;
  font-size: .7rem;
  color: var(--text-mute);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
  padding-top: 4px;
}

.notif-item.read { opacity: .6; }
.notif-item.read .notif-item-title { color: var(--text-soft); font-weight: 500; }

.notif-popup-foot {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 12px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  margin-top: 4px;
  color: var(--violet);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 14px 14px;
  transition: background .15s, gap .2s ease;
}
.notif-popup-foot:hover {
  background: rgba(167, 139, 250, .08);
  gap: 10px;
}

@keyframes notifItemIn {
  from { opacity: 0; transform: translate(0, 8px); }
  to   { opacity: 1; transform: translate(0, 0); }
}
@keyframes notifPulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.side-foot {
  border-top: 1px solid var(--line);
  padding-top: 14px; margin-top: 14px;
}

/* Onboarding checklist */
.onboard {
  margin-top: auto;
  margin-bottom: 4px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(124, 58, 237, .08) 0%, rgba(20, 12, 41, .5) 100%);
  position: relative;
  overflow: hidden;
}
.onboard-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.onboard-title {
  display: flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600;
  color: var(--violet);
}
.onboard-title svg { flex-shrink: 0; }
.onboard-count {
  font-size: .72rem; font-weight: 600;
  color: var(--text-mute);
  background: rgba(167, 139, 250, .1);
  padding: 2px 8px; border-radius: 999px;
}
.onboard-progress {
  height: 3px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.onboard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet-2), var(--pink));
  border-radius: 999px;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 0 8px rgba(167, 139, 250, .6);
}
.onboard-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.onboard-task {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 6px; border-radius: 8px;
  cursor: pointer;
  transition: background .2s ease;
}
.onboard-task:hover { background: rgba(167, 139, 250, .08); }
.onboard-check {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  background: rgba(167, 139, 250, .04);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background .25s ease, border-color .25s ease, color .15s ease, transform .25s cubic-bezier(.34, 1.6, .64, 1);
}
.onboard-task.done .onboard-check {
  background: linear-gradient(135deg, #4ade80, #16a34a);
  border-color: #16a34a;
  color: #fff;
  animation: checkPop .4s cubic-bezier(.34, 1.6, .64, 1);
}
@keyframes checkPop {
  0%   { transform: scale(.7); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.onboard-text {
  font-size: .82rem; font-weight: 500;
  color: var(--text);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.onboard-task.done .onboard-text {
  color: var(--text-mute);
  text-decoration: line-through;
  text-decoration-color: var(--text-mute);
}
.onboard.complete {
  border-color: var(--violet);
  background: linear-gradient(180deg, rgba(124, 58, 237, .25) 0%, rgba(20, 12, 41, .7) 100%);
}
.onboard.complete .onboard-title { color: #fff; }
.onboard.complete .onboard-title span::after { content: " 🎉"; }

.app.collapsed .side-1 .onboard { display: none; }

.onboard {
  transition:
    opacity .45s ease,
    transform .45s ease,
    max-height .55s cubic-bezier(.4, 0, .2, 1),
    margin .45s ease,
    padding .45s ease,
    border-color .25s ease;
  max-height: 400px;
}
.onboard.dismissing {
  opacity: 0;
  transform: scale(.92);
  max-height: 0;
  margin-top: 0; margin-bottom: 0;
  padding-top: 0; padding-bottom: 0;
  border-color: transparent;
  pointer-events: none;
}

/* Confetti */
.confetti {
  position: fixed;
  width: 8px; height: 12px;
  pointer-events: none;
  z-index: 9999;
  border-radius: 2px;
  animation: confettiFly 1.6s cubic-bezier(.2, .55, .35, 1) forwards;
  will-change: transform, opacity;
}
.confetti.round { border-radius: 50%; width: 9px; height: 9px; }
@keyframes confettiFly {
  0%   { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
  60%  {
    transform: translate(calc(var(--dx) * .85 - 50%), calc(var(--dy) - 50%)) rotate(calc(var(--rot) * .6));
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--dx) - 50%), calc(var(--dy) + 600px - 50%)) rotate(var(--rot));
    opacity: 0;
  }
}
.side-foot button {
  width: 100%; padding: 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff; border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: .88rem;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform .15s, box-shadow .15s;
}
.side-foot button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, .4);
}

/* Sidebar 2 — current creator nav */
.side-2 {
  background: rgba(20, 8, 41, .65);
  border-right: 1px solid var(--line);
  padding: 22px 16px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side-2 .side-label {
  display: flex; align-items: center; gap: 8px;
  margin: 0 8px 12px;
}
.side-2 .side-label svg {
  width: 12px; height: 12px; opacity: .55;
}
.creator-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 14px;
  background: rgba(167, 139, 250, .08);
  border: 1px solid var(--line);
  margin-bottom: 18px;
}
.creator-pill .creator-av { width: 38px; height: 38px; }

.side-2 .side-link { font-size: .92rem; }
.side-2 .side-divider {
  height: 1px;
  margin: 12px 14px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .18), transparent);
}
.side-2-foot {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; gap: 6px;
}
.side-2-foot a {
  flex: 1; padding: 9px; border-radius: 10px;
  font-size: .82rem; color: var(--text-mute);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, color .15s;
}
.side-2-foot a:hover { background: rgba(167, 139, 250, .08); color: var(--text); }
.side-2-foot a.danger:hover { color: #f87171; }

/* Main */
.dash {
  padding: 20px 32px 0;
  min-height: 100vh;
  overflow-x: hidden;
}
/* Reclaim the bottom padding inside the scroll container instead of
   outside it — otherwise the .dash {height: 100vh; overflow: hidden}
   rule below makes the bottom 60px of the viewport unreachable when
   the page content overflows. */
.dash > .page.active,
.dash > .agency-page.active,
.dash > .account-page.active {
  padding-bottom: 60px;
}
.dash-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-bottom: 28px;
  position: sticky; top: 0; z-index: 10;
  padding: 12px 0;
  background: linear-gradient(180deg, var(--bg) 60%, transparent);
}
.dash-title {
  display: flex; align-items: center; gap: 18px;
}
.dash-title h1 {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0;
  padding: 8px 16px 8px 12px;
  font-size: .95rem;
  font-weight: 600;
  color: #c4b5fd;
  background: rgba(124, 58, 237, .12);
  border: 1px solid rgba(167, 139, 250, .28);
  border-radius: 999px;
  letter-spacing: .01em;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.dash-title h1 svg { color: #a78bfa; flex-shrink: 0; }
.dash-title h1:hover {
  background: rgba(124, 58, 237, .18);
  border-color: rgba(167, 139, 250, .45);
  box-shadow: 0 0 22px -8px var(--violet-glow, rgba(124, 58, 237, .55));
}
.creator-strip { display: flex; gap: -6px; }
.creator-strip .creator-av {
  width: 38px; height: 38px; margin-left: -8px;
  border: 2px solid var(--bg); cursor: pointer;
  transition: transform .15s;
}
.creator-strip .creator-av:first-child { margin-left: 0; }
.creator-strip .creator-av:hover { transform: translateY(-3px); z-index: 2; }
.creator-strip .creator-av.active {
  outline: 2px solid var(--violet);
  box-shadow: 0 0 16px var(--violet-glow);
}

.dash-search {
  position: relative; flex: 1; max-width: 360px;
}
.dash-search input {
  width: 100%; padding: 10px 14px 10px 38px;
  background: rgba(20, 8, 41, .6);
  border: 1px solid var(--line);
  border-radius: 12px; color: var(--text);
  font-family: inherit; font-size: .9rem;
  transition: border-color .15s, background .15s;
}
.dash-search input::placeholder { color: var(--text-mute); }
.dash-search input:focus {
  outline: none; border-color: var(--violet);
  background: rgba(20, 8, 41, .9);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .15);
}
.dash-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-mute);
}
.dash-actions { display: flex; align-items: center; gap: 10px; }
.funds-pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: rgba(20, 8, 41, .6);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text); font-size: .9rem; font-weight: 600;
  transition: border-color .2s, background .2s, transform .15s;
}
.funds-pill:hover {
  border-color: var(--violet);
  background: rgba(124, 58, 237, .12);
  transform: translateY(-1px);
}
.funds-pill:hover .funds-add { color: var(--violet); }
.funds-amount {
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.funds-divider {
  width: 1px; height: 16px; background: var(--line-2);
}
.funds-add {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-mute); font-weight: 500; font-size: .85rem;
  transition: color .2s;
}
@media (max-width: 760px) {
  .funds-pill { padding: 7px 10px; gap: 8px; font-size: .82rem; }
  .funds-add span, .funds-add svg { display: none; }
  .funds-divider { display: none; }
}
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(20, 8, 41, .6); border: 1px solid var(--line);
  color: var(--text-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.icon-btn:hover { border-color: var(--violet); color: var(--text); }
.icon-btn .dot {
  position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444;
}
.user-chip {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--pink));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer;
  border: 2px solid var(--line-2);
  position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.user-chip:hover {
  transform: scale(1.06);
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, .25), 0 6px 20px rgba(248, 113, 113, .35);
}
.user-chip-letter, .user-chip-out {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease, opacity .2s ease;
}
.user-chip-out {
  opacity: 0; transform: translateY(8px);
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
}
.user-chip:hover .user-chip-letter {
  opacity: 0; transform: translateY(-8px);
}
.user-chip:hover .user-chip-out {
  opacity: 1; transform: translateY(0);
}

.welcome-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 20px; gap: 16px;
}
.welcome-row h2 {
  font-size: 2.4rem; font-weight: 800; margin: 0;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff 0%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.welcome-row .sub { color: var(--text-mute); font-size: .9rem; }
.balance-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.balance-card {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 12px;
  background: rgba(20, 8, 41, .55);
  border: 1px solid var(--line);
  color: var(--text-soft);
  font-weight: 500; font-size: .82rem;
  letter-spacing: .01em;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.balance-card:hover { transform: translateY(-1px); border-color: var(--line-2); }
.balance-card svg {
  width: 16px; height: 16px;
  padding: 6px; box-sizing: content-box;
  border-radius: 8px;
  background: rgba(74, 222, 128, .12);
  color: #4ade80;
  flex-shrink: 0;
}
.balance-card strong {
  color: #fff; font-size: .98rem; font-weight: 700;
  margin-left: 2px; letter-spacing: -0.01em;
}
.balance-card.balance-card-pending svg {
  background: rgba(251, 191, 36, .12);
  color: #fbbf24;
}
.balance-card.balance-card-pending strong { color: #fbbf24; }

.range-tabs {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px; border-radius: 14px;
  background: rgba(20, 8, 41, .6);
  border: 1px solid var(--line);
}
.range-tabs button {
  padding: 8px 16px; border-radius: 10px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-soft); font-family: inherit;
  font-size: .85rem; font-weight: 500;
  transition: background .2s, color .2s;
}
.range-tabs button:hover { color: var(--text); }
.range-tabs button.active {
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff; box-shadow: 0 4px 12px rgba(124, 58, 237, .3);
}
.range-tabs .icon { padding: 8px 12px; }

.section-eyebrow {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 12px; font-weight: 600;
}

.kpi-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  margin-bottom: 24px;
}
.kpi {
  background: linear-gradient(180deg, rgba(26, 15, 51, .8) 0%, rgba(20, 12, 41, .8) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.kpi::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(167, 139, 250, .08), transparent 60%);
  pointer-events: none; transition: background .3s;
}
.kpi:hover {
  transform: translateY(-3px);
  border-color: var(--violet);
  box-shadow: 0 12px 32px -10px var(--violet-glow);
}
.kpi:hover::before {
  background: radial-gradient(circle at 0% 0%, rgba(167, 139, 250, .2), transparent 65%);
}
.kpi.active {
  border-color: var(--violet);
  box-shadow: 0 0 0 1px var(--violet), 0 0 30px -10px var(--violet);
}
.kpi-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kpi-ico {
  width: 32px; height: 32px; border-radius: 10px;
  background: rgba(167, 139, 250, .14);
  display: flex; align-items: center; justify-content: center;
  color: var(--violet);
}
.kpi-label {
  font-size: .8rem; color: var(--text-soft); font-weight: 500;
}
.kpi-value {
  font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text);
}
.kpi-sub { font-size: .78rem; color: var(--text-mute); margin-top: 4px; }

.row-3 {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
  margin-bottom: 24px;
}
.panel {
  background: linear-gradient(180deg, rgba(26, 15, 51, .8) 0%, rgba(20, 12, 41, .8) 100%);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  transition: border-color .25s;
}
.panel:hover { border-color: var(--line-2); }
.panel h3 { font-size: 1rem; font-weight: 600; margin-bottom: 16px; }

.breakdown li {
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px dashed var(--line);
  font-size: .9rem;
}
.breakdown li:last-of-type { border-bottom: none; }
.breakdown .pill {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-soft);
}
.breakdown .pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--violet);
}
.breakdown li:nth-child(2) .pill::before { background: #fbbf24; }
.breakdown li:nth-child(3) .pill::before { background: var(--pink); }
.breakdown ul { padding: 0; margin: 0; }
.breakdown .net {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-weight: 600;
}
.breakdown .net strong { color: #4ade80; font-size: 1.1rem; }

.audience {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.audience .a-cell {
  padding: 14px; border-radius: 14px;
  background: rgba(167, 139, 250, .06);
  border: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  transition: border-color .2s, background .2s;
}
.audience .a-cell:hover { border-color: var(--violet); background: rgba(167, 139, 250, .12); }
.a-cell-ico {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(167, 139, 250, .15);
  color: var(--violet);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.a-cell .label { font-size: .72rem; color: var(--text-mute); display: block; }
.a-cell .num { font-size: 1.15rem; font-weight: 700; color: var(--text); }

.spenders { display: flex; flex-direction: column; gap: 10px; }
.spender {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 12px;
  background: rgba(167, 139, 250, .04);
  border: 1px solid var(--line);
  transition: border-color .2s;
}
.spender:hover { border-color: var(--line-2); }
.spender-rank {
  font-size: .75rem; color: var(--text-mute); font-weight: 600;
  width: 22px;
}
.spender-av {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--pink));
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: #fff;
}
.spender-name {
  flex: 1; font-size: .88rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spender-amt { color: #4ade80; font-weight: 700; font-size: .9rem; }
.spender-multi { font-size: .72rem; color: var(--text-mute); margin-left: 6px; }

/* Chart */
.chart-panel { padding: 24px; overflow: hidden; }
.chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.chart-legend { display: flex; gap: 16px; font-size: .82rem; }
.chart-legend span {
  display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft);
}
.chart-legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.chart-legend .dot.gross { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
.chart-legend .dot.net   { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.chart-legend .dot.tips  { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.chart-legend .dot.ppv   { background: #ec4899; box-shadow: 0 0 8px #ec4899; }
.chart-legend .dot.sales { background: #06b6d4; box-shadow: 0 0 8px #06b6d4; }
.chart-svg {
  width: 100%; height: 240px;
  display: block;
}
.chart-line {
  fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: drawLine 2.4s ease-out forwards;
}
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}
.chart-grid line {
  stroke: var(--line); stroke-dasharray: 4 4; stroke-width: 1;
}
.chart-axis text {
  fill: var(--text-mute); font-size: 11px;
  font-family: inherit;
}

/* Revenue chart — HTML overlay axes (avoid SVG <text> stretching) + hover dots */
.rev-chart-wrap {
  display: grid;
  grid-template-columns: 56px 1fr;
  height: 240px;
  gap: 8px;
  margin-top: 4px;
}
.rev-axis-y {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-end;
  font-size: .72rem; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 2px 0;
}
.rev-axis-y li { padding-right: 4px; }
.rev-svg-wrap { position: relative; min-width: 0; overflow: hidden; }
/* SVG elements default to overflow:visible — strokes at the viewBox
   edge actually paint past the SVG box. Clip them. */
.rev-svg-wrap .rev-chart-svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.rev-axis-x {
  list-style: none; margin: 0; padding: 0 0 0 64px;
  display: flex; justify-content: space-between;
  font-size: .72rem; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.rev-axis-x li { white-space: nowrap; }

/* Hover cursor + dots — positioned by JS in % so they don't stretch */
.rev-cursor {
  position: absolute; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(167, 139, 250, .55), rgba(167, 139, 250, 0));
  pointer-events: none;
}
.rev-dot {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #0a0a0f;
  border: 2.4px solid;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 12px currentColor;
}
.rev-dot-gross { border-color: #a78bfa; color: rgba(167, 139, 250, .55); }
.rev-dot-net   { border-color: #4ade80; color: rgba(74, 222, 128, .55); }
.rev-dot-tips  { border-color: #fbbf24; color: rgba(251, 191, 36, .55); }
.rev-dot-ppv   { border-color: #ec4899; color: rgba(236, 72, 153, .55); }
.rev-dot-sales { border-color: #06b6d4; color: rgba(6, 182, 212, .55); }
.rev-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(15, 17, 24, .98);
  border: 1px solid #1f242f;
  border-radius: 10px;
  padding: 9px 11px;
  font-size: .78rem;
  color: var(--text);
  white-space: nowrap;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .55);
  transform: translate(-50%, calc(-100% - 14px));
  z-index: 5;
  backdrop-filter: blur(6px);
}
.rev-tooltip-date { font-size: .7rem; color: var(--text-mute); margin-bottom: 5px; }
.rev-tooltip-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.rev-tooltip-row + .rev-tooltip-row { margin-top: 2px; }
.rev-tooltip-row .lbl { display: flex; align-items: center; gap: 6px; color: var(--text-mute); }
.rev-tooltip-row .lbl .swatch { width: 8px; height: 8px; border-radius: 50%; }
.rev-tooltip-row .val { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.rev-empty {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: .85rem; color: var(--text-mute);
  pointer-events: none;
}

.dash-menu-btn {
  display: none;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(20, 8, 41, .6); border: 1px solid var(--line);
  color: var(--text); cursor: pointer;
  align-items: center; justify-content: center;
}
.dash-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
  z-index: 40;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.dash-backdrop.show { opacity: 1; pointer-events: auto; }

@media (max-width: 1100px) {
  .app { grid-template-columns: 220px 1fr; }
  .side-2 { display: none; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .row-3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app, .app.collapsed { grid-template-columns: 1fr; }
  .side-1 { display: none !important; }
  .side-2 {
    display: flex !important;
    position: fixed; top: 0; left: 0; bottom: 0;
    height: 100vh;
    width: 280px; max-width: 82vw;
    z-index: 45;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    border-right: 1px solid var(--line-2);
    background: rgba(10, 4, 24, .98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 4px 0 32px rgba(0, 0, 0, .5);
  }
  .app.drawer-open .side-2 { transform: translateX(0); }
  .dash-backdrop { background: rgba(0, 0, 0, .75); }
  .collapse-btn { display: none; }
  .dash-menu-btn { display: inline-flex; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dash { padding: 12px; }
  .dash-top {
    flex-wrap: wrap; gap: 10px;
    padding: 8px 0;
  }
  .dash-title { gap: 10px; flex: 1; min-width: 0; }
  .dash-title h1 { display: none; }
  .creator-strip {
    flex: 1; overflow-x: auto; padding: 4px 0;
    scrollbar-width: none;
  }
  .creator-strip::-webkit-scrollbar { display: none; }
  .dash-search { order: 3; flex-basis: 100%; max-width: none; }
  .welcome-row h2 { font-size: 1.7rem; }
  .welcome-row { flex-wrap: wrap; }
  .panel { padding: 18px; }
  .chart-svg { height: 200px; }
  .range-tabs { overflow-x: auto; max-width: 100%; }
  .range-tabs button { white-space: nowrap; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi-value { font-size: 1.4rem; }
  .balance-card { padding: 10px 14px; font-size: .9rem; }
  .lc-launcher { width: 52px; height: 52px; }
}

/* Chart metric tabs */
.chart-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: 12px;
  background: rgba(20, 8, 41, .6);
  border: 1px solid var(--line);
}
.chart-tab {
  padding: 7px 14px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-soft); font-family: inherit;
  font-size: .82rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}
.chart-tab:hover { color: var(--text); }
.chart-tab.active {
  background: rgba(167, 139, 250, .15);
  color: var(--text);
}
.chart-tab .dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.chart-tab .dot-total {
  background: linear-gradient(135deg, #a78bfa 0% 50%, #ec4899 50% 100%);
}
@media (max-width: 760px) {
  .chart-tab { padding: 6px 10px; font-size: .78rem; }
}

/* FYP Range row */
.fyp-range-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; gap: 16px;
}
.btn-refresh {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 12px;
  background: rgba(20, 23, 32, .6);
  border: 1px solid #1f242f;
  color: var(--text); cursor: pointer;
  font-family: inherit; font-size: .88rem; font-weight: 500;
  transition: border-color .15s, background .15s;
}
.btn-refresh:hover { border-color: var(--violet); background: rgba(167, 139, 250, .08); }

/* FYP Tabs */
.fyp-tabs {
  display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid #1f242f;
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fyp-tabs::-webkit-scrollbar { display: none; }
.fyp-tab {
  background: transparent; border: none; cursor: pointer;
  padding: 12px 20px;
  font-family: inherit;
  font-size: .92rem; font-weight: 500;
  color: var(--text-mute);
  position: relative;
  transition: color .2s ease;
  white-space: nowrap;
}
.fyp-tab:hover { color: var(--text-soft); }
.fyp-tab.active { color: var(--text); font-weight: 600; }
.fyp-tab::after {
  content: ""; position: absolute;
  left: 16px; right: 16px; bottom: -1px;
  height: 2px;
  background: var(--violet);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 0 6px var(--violet);
}
.fyp-tab.active::after { transform: scaleX(1); }

.fyp-panel {
  display: none;
  animation: fadeUp .35s ease-out;
}
.fyp-panel.active { display: block; }

/* Recommendations */
.rec-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.rec-col { display: flex; flex-direction: column; gap: 12px; }
.rec-col-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 1rem; font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.rec-empty {
  border: 1.5px dashed #1f242f;
  border-radius: 14px;
  padding: 32px;
  text-align: center;
  color: var(--text-mute);
  font-size: .9rem;
}
.rec-card {
  border: 1.5px solid;
  border-radius: 14px;
  padding: 18px;
  background: rgba(20, 23, 32, .4);
  transition: transform .15s ease, background .15s ease;
}
.rec-card:hover { transform: translateY(-1px); }
.rec-card-amber { border-color: rgba(245, 158, 11, .4); }
.rec-card-amber:hover { background: rgba(245, 158, 11, .04); }
.rec-card-amber h4 { color: #fbbf24; font-size: 1rem; font-weight: 700; margin: 0 0 10px; }
.rec-card-blue { border-color: rgba(96, 165, 250, .4); }
.rec-card-blue:hover { background: rgba(96, 165, 250, .04); }
.rec-card-blue h4 { color: #60a5fa; font-size: 1rem; font-weight: 700; margin: 0 0 10px; }
.rec-card-red { border-color: rgba(248, 113, 113, .4); }
.rec-card-red:hover { background: rgba(248, 113, 113, .04); }
.rec-card-red h4 { color: #f87171; font-size: 1rem; font-weight: 700; margin: 0 0 10px; }

.sort-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: #f1f1f5;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
}
.sort-opt:hover { background: rgba(167, 139, 250, .12); }
.sort-opt.active { background: rgba(167, 139, 250, .2); color: #a78bfa; }

.top-tag-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.top-tag-row:last-child { border-bottom: none; }
.top-tag-rank { color: #a78bfa; font-weight: 700; min-width: 26px; padding-top: 2px; }
.top-tag-info { flex: 1; }
.top-tag-name-row { font-size: 14px; font-weight: 600; color: #f1f1f5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.top-tag-stats { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #8b8b9e; }
.tag-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
}
.tag-badge-high   { background: rgba(74, 222, 128, .15); color: #4ade80; }
.tag-badge-low    { background: rgba(248, 113, 113, .15); color: #f87171; }
.tag-badge-hidden { background: rgba(251, 146, 60, .15); color: #fb923c; }
.rec-card p { color: var(--text-soft); font-size: .9rem; line-height: 1.55; margin: 0; }
.rec-card .hl { color: #fbbf24; font-weight: 700; }
.rec-card .hl-blue { color: #60a5fa; font-weight: 700; }
.rec-card .hl-tag { color: var(--violet); font-weight: 600; }
.rec-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 12px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(167, 139, 250, .14);
  color: var(--violet);
  font-size: .72rem; font-weight: 600;
}

/* Content tab — Top FYP Performers */
.content-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(74, 222, 128, .06);
  border: 1px solid rgba(74, 222, 128, .35);
  color: #4ade80;
  font-size: .88rem; font-weight: 500;
  margin-bottom: 18px;
}
.content-banner strong { color: #86efac; font-weight: 700; }
.performers-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.performers-title { display: flex; align-items: center; gap: 10px; }
.performers-title h3 { margin: 0; font-size: 1.05rem; font-weight: 600; color: #60a5fa; }
.performers-toggle {
  padding: 6px 14px; border-radius: 8px;
  background: rgba(96, 165, 250, .1);
  border: 1px solid rgba(96, 165, 250, .25);
  color: #60a5fa;
  font-family: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer;
}
.performers-list { display: flex; flex-direction: column; gap: 10px; }
.performer {
  background: rgba(20, 23, 32, .6);
  border: 1px solid #1f242f;
  border-radius: 14px;
  padding: 16px;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  grid-template-rows: auto auto;
  gap: 10px 16px;
  position: relative;
  transition: border-color .15s ease;
}
.performer:hover { border-color: var(--line-2); }
.performer-thumb {
  grid-row: 1 / 3;
  width: 60px; height: 60px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ec4899, #7c3aed);
  position: relative;
  overflow: hidden;
}
.performer-thumb::before {
  content: "▶"; position: absolute;
  bottom: 4px; left: 4px;
  width: 18px; height: 18px;
  background: rgba(0,0,0,.6);
  border-radius: 4px;
  color: #fff; font-size: 9px;
  display: flex; align-items: center; justify-content: center;
}
.thumb-1 { background: linear-gradient(135deg, #c084fc, #ec4899); }
.thumb-2 { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.thumb-3 { background: linear-gradient(135deg, #f472b6, #be185d); }
.thumb-4 { background: linear-gradient(135deg, #34d399, #059669); }
.performer-meta { min-width: 0; }
.performer-id {
  font-size: .92rem; font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.performer-new {
  display: inline-block;
  background: rgba(74, 222, 128, .15);
  color: #4ade80;
  font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 5px;
  margin-left: 6px;
}
.performer-stats {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: .82rem;
}
.ps { color: var(--text-mute); }
.ps-blue { color: #60a5fa; }
.ps-green { color: #4ade80; }
.performer-rank {
  background: rgba(255, 255, 255, .06);
  color: var(--text-soft);
  width: 36px; height: 28px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700;
  align-self: start;
}
.performer-rank.rank-gold {
  background: linear-gradient(135deg, #67e8f9, #06b6d4);
  color: #0a0d14;
}
.performer-scores {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #1f242f;
  padding-top: 12px;
}
.ps-cell { text-align: center; }
.ps-cell span {
  display: block; font-size: .72rem; color: var(--text-mute);
  margin-bottom: 4px; font-weight: 500;
}
.ps-cell strong {
  font-size: 1.1rem; font-weight: 800; color: var(--text);
}

/* Media tab */
.media-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.media-count { color: var(--text-soft); font-size: .9rem; }
.media-sort { display: flex; gap: 4px; }
.media-sort button {
  padding: 6px 12px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-mute);
  font-family: inherit; font-size: .82rem; font-weight: 500;
  transition: background .15s, color .15s;
}
.media-sort button:hover { color: var(--text-soft); }
.media-sort button.active {
  background: rgba(167, 139, 250, .15);
  color: var(--text);
}
.media-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.media-card {
  background: rgba(20, 23, 32, .6);
  border: 1px solid #1f242f;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.media-card:hover { border-color: var(--violet); transform: translateY(-2px); }
.media-thumb {
  aspect-ratio: 9 / 14;
  position: relative;
  overflow: hidden;
}
.media-thumb-icon {
  position: absolute; top: 8px; left: 8px;
  width: 22px; height: 22px;
  background: rgba(0, 0, 0, .65);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.media-duration {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  font-size: .68rem; font-weight: 600;
  padding: 3px 7px; border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.media-caption {
  position: absolute; bottom: 36px; left: 8px; right: 8px;
  color: #fff;
  font-size: .82rem; font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .9);
}
.media-info {
  padding: 12px;
}
.media-info-id {
  font-size: .72rem; font-variant-numeric: tabular-nums;
  color: var(--text-mute);
  margin-bottom: 4px;
}
.media-info-date {
  font-size: .72rem; color: var(--text-mute);
  margin-bottom: 10px;
}
.media-score {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255, 255, 255, .03);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: .75rem;
  margin-bottom: 10px;
}
.media-score-label { color: var(--text-mute); }
.media-score-value { color: #fbbf24; font-weight: 700; font-size: .9rem; }
.media-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px;
  font-size: .78rem;
}
.media-stats span { display: block; color: var(--text-mute); font-size: .68rem; margin-bottom: 2px; }
.media-stats strong { color: var(--text); font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Bulk Posting page */
.bulk-panel { display: none; animation: fadeUp .35s ease-out; }
.bulk-panel.active { display: block; }
.bulk-filters { display: inline-flex; padding: 4px; background: rgba(20, 23, 32, .6); border: 1px solid #1f242f; border-radius: 12px; gap: 4px; }
.bulk-filter {
  padding: 7px 14px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-mute); font-family: inherit;
  font-size: .85rem; font-weight: 500;
  transition: background .15s, color .15s;
}
.bulk-filter:hover { color: var(--text-soft); }
.bulk-filter.active { background: rgba(167, 139, 250, .15); color: var(--text); font-weight: 600; }
.bulk-filter span { color: var(--text-mute); margin-left: 4px; font-weight: 500; }
.bulk-filter.active span { color: var(--violet); }
.bulk-sort {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 12px;
  background: rgba(20, 23, 32, .6);
  border: 1px solid #1f242f;
  color: var(--text-soft);
  font-family: inherit; font-size: .85rem; font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.bulk-sort:hover { border-color: var(--violet); color: var(--text); }

.bulk-list { display: flex; flex-direction: column; gap: 12px; }
.bulk-card {
  background: linear-gradient(180deg, rgba(26, 30, 41, .8) 0%, rgba(20, 23, 32, .8) 100%);
  border: 1px solid #1f242f;
  border-radius: 16px;
  padding: 18px;
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 18px;
  transition: border-color .2s ease, transform .15s ease;
}
.bulk-card:hover { border-color: var(--line-2); transform: translateY(-1px); }
.bulk-thumb {
  width: 90px; height: 130px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.bulk-thumb-badge {
  position: absolute; bottom: 6px; left: 6px;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: .6rem; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: .08em;
}
.bulk-info { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bulk-info-top {
  display: flex; align-items: center; gap: 10px;
}
.bulk-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 6px;
  background: rgba(167, 139, 250, .14);
  color: var(--violet);
  font-size: .65rem; font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bulk-status.sent {
  background: rgba(74, 222, 128, .12);
  color: #4ade80;
}
.bulk-status.failed {
  background: rgba(248, 113, 113, .12);
  color: #f87171;
}
.bulk-media-count { font-size: .78rem; color: var(--text-mute); }
.bulk-caption {
  font-size: 1.05rem; font-weight: 600; color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}
.bulk-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.bulk-tag {
  display: inline-block;
  padding: 3px 10px; border-radius: 6px;
  background: rgba(167, 139, 250, .12);
  color: var(--violet);
  font-size: .72rem; font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.bulk-tag:hover { background: rgba(167, 139, 250, .22); }
.bulk-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--text-mute);
  margin-top: 2px;
}
.bulk-meta-icon {
  display: inline-flex; align-items: center; gap: 5px;
}
.bulk-meta-recur {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(34, 211, 238, .1);
  color: #67e8f9;
  font-size: .72rem; font-weight: 600;
  padding: 3px 8px; border-radius: 6px;
}
.bulk-walls {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
  font-size: .8rem; color: var(--text-mute);
}
.bulk-wall-pill {
  display: inline-block;
  background: rgba(255, 255, 255, .05);
  color: var(--text-soft);
  padding: 3px 8px; border-radius: 6px;
  font-size: .72rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.bulk-actions {
  display: flex; flex-direction: column; gap: 6px;
  align-self: flex-start;
}

/* Schedule form */
.schedule-form {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 700px;
}
.schedule-form label {
  display: flex; flex-direction: column; gap: 6px;
}
.schedule-form label > span {
  font-size: .8rem; font-weight: 600;
  color: var(--text-soft);
}
.schedule-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.schedule-input {
  background: rgba(20, 23, 32, .6);
  border: 1px solid #1f242f;
  border-radius: 12px;
  padding: 11px 14px;
  color: var(--text);
  font-family: inherit; font-size: .92rem;
  transition: border-color .15s, background .15s;
  width: 100%;
}
textarea.schedule-input { resize: vertical; min-height: 90px; }
.schedule-input::placeholder { color: var(--text-mute); }
.schedule-input:focus {
  outline: none; border-color: var(--violet);
  background: rgba(20, 23, 32, .9);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .12);
}
select.schedule-input {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a7fb0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.schedule-drop-zone {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 18px;
  background: rgba(167, 139, 250, .04);
  border: 1.5px dashed var(--line-2);
  border-radius: 12px;
  color: var(--text-mute);
  font-size: .92rem;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.schedule-drop-zone:hover {
  background: rgba(167, 139, 250, .08);
  border-color: var(--violet);
  color: var(--text-soft);
}
.schedule-drop-zone strong { color: var(--text); font-weight: 600; }

/* Walls selector — click-to-open dropdown with checkboxes (mirrors friend's WallSelector) */
.schedule-walls-field { display: flex; flex-direction: column; gap: 6px; }
.schedule-walls-field > span { font-size: .8rem; font-weight: 600; color: var(--text-soft); }
.walls-selector { position: relative; }
.walls-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 12px;
  background: rgba(20, 23, 32, .6);
  border: 1px solid #1f242f;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: .9rem; color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.walls-trigger:hover { border-color: var(--line-2); }
.walls-trigger.open { border-color: var(--violet); background: rgba(20, 23, 32, .9); }
.walls-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.walls-trigger-label.empty { color: var(--text-mute); }
.walls-trigger svg { color: var(--text-mute); transition: transform .15s; flex-shrink: 0; }
.walls-trigger.open svg { transform: rotate(180deg); }
.walls-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: 30;
  background: rgba(15, 17, 24, .98);
  border: 1px solid #1f242f;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  overflow: hidden;
  max-height: 360px;
  display: flex; flex-direction: column;
  backdrop-filter: blur(8px);
}
.walls-panel-section {
  padding: 10px 14px 4px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.walls-panel-divider { height: 1px; background: #1f242f; margin: 6px 12px; }
.walls-panel-list { overflow-y: auto; flex: 1; padding-bottom: 4px; }
/* .schedule-form label { flex-direction: column } would otherwise stack our row,
   so we scope under .walls-panel to win on specificity. */
.walls-panel .walls-checkbox {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 9px 14px;
  margin: 0;
  cursor: pointer;
  transition: background .12s;
  font-size: .88rem;
  color: var(--text);
}
.walls-panel .walls-checkbox:hover { background: rgba(167, 139, 250, .08); }
.walls-panel .walls-checkbox input[type="checkbox"] { accent-color: var(--violet); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; margin: 0; }
.walls-panel .walls-checkbox > .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text); }
.walls-panel .walls-checkbox > .badge {
  font-size: .62rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; flex-shrink: 0;
  background: rgba(167, 139, 250, .14); color: var(--violet);
}
.walls-panel .walls-checkbox > .badge.followers { background: rgba(34, 211, 238, .14); color: #22d3ee; }
.walls-panel-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  border-top: 1px solid #1f242f;
  font-size: .75rem; color: var(--text-mute);
}
.walls-panel-footer .done {
  background: none; border: none; cursor: pointer;
  color: var(--violet); font-weight: 600; font-size: .82rem;
}
.walls-panel-footer .done:hover { color: var(--text); }
.walls-panel-empty { padding: 16px 14px; color: var(--text-mute); font-size: .82rem; }

/* + button — adds another schedule form below. Lives inside the Schedule Posts panel
   so it's automatically hidden when that panel isn't active (parent display:none). */
.bulk-add-row {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 28px 0 12px;
}
.bulk-fab {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--violet) 0%, #ec4899 100%);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 40px rgba(124, 58, 237, .42), 0 4px 12px rgba(0,0,0,.4);
  transition: transform .15s, box-shadow .15s;
}
.bulk-fab:hover { transform: scale(1.06); box-shadow: 0 22px 50px rgba(124, 58, 237, .55), 0 6px 14px rgba(0,0,0,.5); }
.bulk-fab:active { transform: scale(.97); }
.bulk-fab-label { font-size: .78rem; color: var(--text-mute); letter-spacing: .02em; }

/* Stacked extra forms — appear below the inline form when + is clicked */
.bulk-extra-panel {
  position: relative;
  margin-top: 18px;
  animation: bulkExtraIn .22s cubic-bezier(.2,.7,.3,1.1);
}
@keyframes bulkExtraIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bulk-extra-remove {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(251, 113, 133, .1);
  border: 1px solid rgba(251, 113, 133, .25);
  color: #fb7185;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
  transition: background .15s, border-color .15s;
}
.bulk-extra-remove:hover { background: rgba(251, 113, 133, .2); border-color: #fb7185; }

/* 2-column grid for the Schedule Posts compose area. Each card is a
   fully-independent form (own caption, media, schedule, walls, submit).
   Defaults to 4 cards (2×2) on init; the + button adds more. */
.bulk-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.bulk-schedule-grid > .panel { margin: 0; }
@media (max-width: 1100px) {
  .bulk-schedule-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .bulk-fab { width: 56px; height: 56px; }
  .bulk-add-row { margin: 22px 0 8px; }
}

/* ── Vault page ───────────────────────────────────────────────────────── */
.vault-actions { display: flex; gap: 10px; align-items: center; }
.vault-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--violet) 0%, #ec4899 100%);
  color: #fff; border: none; border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600; font-size: .85rem;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, opacity .12s;
  box-shadow: 0 12px 28px rgba(124, 58, 237, .35);
}
.vault-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(124, 58, 237, .45); }
.vault-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.vault-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.04);
  color: var(--text); border: 1px solid #1f242f; border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600; font-size: .85rem;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.vault-btn-secondary:hover { background: rgba(167, 139, 250, .1); border-color: var(--violet); color: var(--text); }

.vault-status {
  margin: 14px 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(167, 139, 250, .08);
  border: 1px solid rgba(167, 139, 250, .2);
  font-size: .85rem; color: var(--text);
}

/* Toolbar inside the media view */
.vault-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 14px;
  flex-wrap: wrap;
}
.vault-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid #1f242f;
  border-radius: 999px;
  padding: 7px 14px 7px 12px;
  color: var(--text-soft);
  font-size: .82rem; font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.vault-back:hover { background: rgba(167, 139, 250, .08); border-color: var(--violet); color: var(--text); }
.vault-album-title { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--text); }
.vault-toolbar-spacer { flex: 1; }
.vault-filter-pills { display: flex; gap: 4px; background: rgba(20, 23, 32, .5); padding: 3px; border-radius: 999px; }
.vault-filter {
  background: transparent; border: none; border-radius: 999px;
  padding: 6px 14px;
  font-size: .78rem; color: var(--text-mute);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.vault-filter:hover { color: var(--text); }
.vault-filter.active { background: rgba(167, 139, 250, .16); color: var(--violet); }
.vault-search {
  position: relative;
  display: flex; align-items: center;
}
.vault-search svg { position: absolute; left: 11px; color: var(--text-mute); pointer-events: none; }
.vault-search input {
  background: rgba(20, 23, 32, .6);
  border: 1px solid #1f242f;
  border-radius: 999px;
  padding: 7px 14px 7px 32px;
  font-size: .82rem; color: var(--text);
  width: 220px;
  transition: border-color .12s, background .12s;
}
.vault-search input:focus { outline: none; border-color: var(--violet); background: rgba(20, 23, 32, .9); }

/* Album / media grid */
.vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 4px;
}
.vault-media-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.vault-card {
  background: rgba(20, 23, 32, .55);
  border: 1px solid #1f242f;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s, opacity .15s;
  display: flex; flex-direction: column;
  position: relative;
}
.vault-card:hover { transform: translateY(-2px); border-color: var(--violet); box-shadow: 0 14px 30px rgba(0,0,0,.35); }

/* Reorder mode — cards become draggable, show grip overlay; click-to-open is suppressed.
   Wiggle animation (two phases, alternating per-card) for the classic iOS edit-mode feel. */
@keyframes vault-jiggle-1 {
  0%   { transform: rotate(-.9deg) translate(-1px, -1px); }
  50%  { transform: rotate(.9deg)  translate(1px, 1px); }
  100% { transform: rotate(-.9deg) translate(-1px, -1px); }
}
@keyframes vault-jiggle-2 {
  0%   { transform: rotate(.9deg)  translate(1px, -1px); }
  50%  { transform: rotate(-.9deg) translate(-1px, 1px); }
  100% { transform: rotate(.9deg)  translate(1px, -1px); }
}
.vault-card.is-reorder { cursor: grab; animation: vault-jiggle-1 .28s infinite ease-in-out; transform-origin: center; }
.vault-card.is-reorder:nth-child(even) { animation-name: vault-jiggle-2; animation-duration: .32s; }
.vault-card.is-reorder:active { cursor: grabbing; }
.vault-card.is-reorder:hover { box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.vault-card.dragging { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .vault-card.is-reorder { animation: none; }
}
.vault-grip {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px;
  background: rgba(0,0,0,.65);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85);
  z-index: 2;
  pointer-events: none; /* clicks pass through to the card */
}
/* Dragged card visually fades + scales; other cards slide via FLIP transitions in JS */
.vault-card.dragging { opacity: .4; border-color: var(--violet); }
.vault-btn-secondary.active {
  background: rgba(167, 139, 250, .16);
  color: var(--violet);
  border-color: var(--violet);
}
.vault-card-cover {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #1a1d27 0%, #14171f 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.vault-card-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.vault-card-cover .vault-folder-empty { color: var(--text-mute); opacity: .5; }
.vault-card-meta { padding: 10px 12px 12px; }
.vault-card-title { font-size: .85rem; font-weight: 600; color: var(--text); margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vault-card-sub { font-size: .72rem; color: var(--text-mute); }
.vault-media-card .vault-card-cover .vault-badge {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: .65rem; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  letter-spacing: .04em;
}
.vault-media-card .vault-card-cover .vault-duration {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: .68rem; font-weight: 600;
  padding: 2px 6px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.vault-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-mute);
  font-size: .9rem;
}

/* New-album modal (lightweight, separate from bulk modal) */
.vault-modal { display: none; position: fixed; inset: 0; z-index: 100; }
.vault-modal.open { display: block; }

/* ── Vault media viewer (lightbox) ─────────────────────────────────────── */
.vault-viewer {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 7, 12, .92);
  backdrop-filter: blur(14px);
  animation: vaultViewerIn .18s ease-out;
}
.vault-viewer[hidden] { display: none; }
@keyframes vaultViewerIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.vault-viewer-stage {
  width: min(92vw, 1200px);
  height: min(82vh, 900px);
  display: flex; align-items: center; justify-content: center;
}
.vault-viewer-image,
.vault-viewer-video {
  max-width: 100%; max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
  background: #000;
}
.vault-viewer-video { width: 100%; height: 100%; object-fit: contain; }
.vault-viewer-close,
.vault-viewer-nav {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(20, 22, 32, .85);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.vault-viewer-close:hover,
.vault-viewer-nav:hover {
  background: rgba(124, 58, 237, .25);
  border-color: rgba(167, 139, 250, .45);
  color: #fff;
}
.vault-viewer-nav:disabled {
  opacity: .25; cursor: not-allowed; transform: none;
}
.vault-viewer-close { top: 22px; right: 22px; }
.vault-viewer-prev  { left: 22px;  top: 50%; transform: translateY(-50%); }
.vault-viewer-next  { right: 22px; top: 50%; transform: translateY(-50%); }
.vault-viewer-prev:hover:not(:disabled),
.vault-viewer-next:hover:not(:disabled) { transform: translateY(-50%) scale(1.06); }
.vault-viewer-meta {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  text-align: center;
  max-width: min(85vw, 700px);
}
.vault-viewer-filename {
  font-size: .92rem; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vault-viewer-sub {
  margin-top: 4px;
  font-size: .76rem; color: var(--text-mute);
}
body.fc-noscroll { overflow: hidden; }
.vault-media-card { cursor: pointer; }
.vault-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 9, 14, .72);
  backdrop-filter: blur(6px);
}
.vault-modal-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  background: rgba(15, 17, 24, .98);
  border: 1px solid #1f242f;
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .6);
  padding: 22px;
}
.vault-modal-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 14px;
}

@media (max-width: 760px) {
  .vault-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .vault-media-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .vault-search input { width: 140px; }
  .vault-toolbar { gap: 8px; }
}

/* ── Messages page (live, /api/messages) ─────────────────────────────── */
.msg-conv-list { display: flex; flex-direction: column; gap: 30px; padding: 10px 6px; overflow-y: auto; flex: 1; }
.msg-conv-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .12s, transform .08s;
  align-items: center;
  position: relative;
}
/* Wrapper holds the avatar + the price pill that sits below it.
   Same height as the avatar (44px) so the wrap doesn't introduce empty
   space above the avatar inside the row. The pill overflows below. */
.msg-conv-avatar-wrap {
  position: relative;
  width: 44px; height: 44px;
  display: flex;
  align-items: center; justify-content: center;
}
.msg-conv-item:hover { background: rgba(167, 139, 250, .08); }
.msg-conv-item.active { background: rgba(167, 139, 250, .14); }
.msg-conv-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff; font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  position: relative; flex-shrink: 0;
}
.msg-conv-avatar.has-avatar { background-color: transparent; color: transparent; }
.msg-conv-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-conv-name {
  font-size: .85rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
}
/* "NEW" badge — subscribed or first-seen as a follower in the last 24h */
.msg-conv-new {
  display: inline-flex; align-items: center;
  background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
  color: #061018;
  font-size: .58rem; font-weight: 800; letter-spacing: .07em;
  padding: 2px 6px; border-radius: 999px;
  flex-shrink: 0;
  text-transform: uppercase;
  line-height: 1;
}
.msg-conv-snippet {
  font-size: .76rem; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-conv-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* Price pill — gray for $0, violet→pink gradient for spenders. Sits half-overlapping
   the bottom of the avatar so it reads as a tag attached to the fan, not floating. */
/* Online indicator — small green dot half-overlapping the TOP-LEFT edge of
   the avatar circle (10:30 position). Pulses faintly so it's noticeable. */
.msg-conv-online {
  position: absolute;
  top: 4px; left: 4px;          /* sits on the avatar perimeter at ~10:30 */
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #4ade80;
  border: 2px solid #0a0d14;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
  animation: convOnlinePulse 2s ease-in-out infinite;
  z-index: 2;
}
@keyframes convOnlinePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  50%      { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0); }
}
.msg-conv-price {
  position: absolute;
  bottom: -6px; left: 50%;     /* overflow slightly below the avatar */
  transform: translateX(-50%);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 2px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border: 2px solid #0a0d14;          /* matches msg-shell background — looks "cut into" the avatar edge */
  line-height: 1.1;
  z-index: 1;
}
.msg-conv-price.zero {
  background: rgba(120, 120, 140, .55);
  color: rgba(255, 255, 255, .85);
}
.msg-conv-price.spent {
  background: linear-gradient(135deg, var(--violet) 0%, #ec4899 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(124, 58, 237, .35);
}
/* When the row is highlighted (active conversation), match the border color */
.msg-conv-item.active .msg-conv-price { border-color: rgba(167, 139, 250, .14); }
.msg-conv-time { font-size: .7rem; color: var(--text-mute); white-space: nowrap; }
.msg-conv-unread {
  background: var(--violet); color: #fff;
  font-size: .65rem; font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.msg-conv-loading, .msg-conv-error { padding: 18px; color: var(--text-mute); font-size: .8rem; text-align: center; }

/* Conversation list skeleton — uses the same shimmer keyframe as the agency
   stat cards, sized for the conv-row layout. */
.msg-conv-skel { pointer-events: none; cursor: default; }
.msg-conv-skel:hover { background: transparent; }
.msg-skel-bar {
  display: block;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: agencySkelShimmer 1.4s linear infinite;
}
.msg-conv-error { color: #fb7185; }

/* Hover-preview popover: floats to the right of the conv list and shows the
   most recent ~6 messages without opening the conversation. Fetching messages
   does NOT mark them as read for the fan — that's a separate API call we
   never make — so this is a safe peek. */
.msg-conv-preview {
  position: fixed;
  z-index: 200;
  width: 320px;
  max-height: 360px;
  background: rgba(15, 17, 25, .98);
  border: 1px solid rgba(167, 139, 250, .22);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: none;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;             /* don't block the conv list underneath */
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .14s ease, transform .14s ease;
}
.msg-conv-preview.open {
  display: flex;
  opacity: 1;
  transform: translateX(0);
}
.msg-conv-preview-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(167, 139, 250, .14);
  background: rgba(167, 139, 250, .05);
}
.msg-conv-preview-name {
  flex: 1; min-width: 0;
  font-weight: 600; font-size: .82rem;
  color: var(--text-strong, #f3f4f6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-conv-preview-tag {
  font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(74, 222, 128, .14); color: #4ade80;
  border: 1px solid rgba(74, 222, 128, .28);
}
.msg-conv-preview-body {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 12px;
  overflow-y: auto;
}
.msg-conv-preview-loading { color: var(--text-mute); font-size: .75rem; padding: 6px 0; }
.msg-conv-preview-line {
  display: flex; max-width: 88%;
}
.msg-conv-preview-line.in  { align-self: flex-start; }
.msg-conv-preview-line.out { align-self: flex-end; }
.msg-conv-preview-bubble {
  font-size: .76rem; line-height: 1.32;
  padding: 6px 10px;
  border-radius: 12px;
  word-break: break-word;
  color: var(--text, #e5e7eb);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .04);
}
.msg-conv-preview-line.out .msg-conv-preview-bubble {
  background: linear-gradient(135deg, rgba(124, 58, 237, .55), rgba(167, 139, 250, .45));
  color: #fff;
  border-color: transparent;
}

/* Main pane: header + messages list + composer */
.msg-thread { display: flex; flex-direction: column; height: 100%; }
.msg-thread-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #1a1d27;
  flex-shrink: 0;
}
.msg-thread-id { min-width: 0; flex: 1; }
/* Back/close button — small ghost icon to the left of the avatar in the chat header */
.msg-thread-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid #1f242f;
  background: rgba(255, 255, 255, .03);
  color: var(--text-mute);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.msg-thread-back:hover { background: rgba(167, 139, 250, .12); color: var(--text); border-color: var(--violet); }
.msg-thread-name {
  font-size: .92rem; font-weight: 600; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
}
.msg-thread-name.editable {
  cursor: text;
  padding: 2px 6px;
  margin-left: -6px;
  border-radius: 6px;
  transition: background .12s;
  outline: none;
}
.msg-thread-name.editable:hover,
.msg-thread-name.editable:focus { background: rgba(167, 139, 250, .12); }
.msg-thread-name-pencil {
  color: var(--violet);
  opacity: .55;
  transition: opacity .12s, transform .12s;
  flex-shrink: 0;
  margin-left: 2px;
}
.msg-thread-name.editable:hover .msg-thread-name-pencil,
.msg-thread-name.editable:focus .msg-thread-name-pencil { opacity: 1; transform: scale(1.1); }
.msg-thread-name-input {
  background: rgba(20, 23, 32, .9);
  border: 1px solid var(--violet);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  font-family: inherit;
  width: 240px;
  max-width: 100%;
  outline: none;
}
.msg-thread-handle {
  font-size: .76rem; color: var(--text-mute);
  display: flex; align-items: center; gap: 8px;
}
/* Small pill button under the @username — opens the Gallery view. */
.msg-thread-action {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: rgba(124, 58, 237, .12);
  border: 1px solid rgba(167, 139, 250, .25);
  border-radius: 999px;
  color: #c4b5fd;
  font-size: .7rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.msg-thread-action:hover {
  background: rgba(124, 58, 237, .22);
  border-color: rgba(167, 139, 250, .45);
}
.msg-thread-action svg { color: currentColor; }

/* Gallery view (replaces the chat list + composer when active) */
.msg-gallery {
  display: flex; flex-direction: column;
  height: 100%;
}
.msg-gallery-filters {
  display: flex; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #1a1d27;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.msg-gallery-filters::-webkit-scrollbar { display: none; }
.msg-gallery-filter {
  padding: 6px 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: .8rem; font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.msg-gallery-filter:hover { background: rgba(124, 58, 237, .12); color: #c4b5fd; }
.msg-gallery-filter.active {
  background: rgba(124, 58, 237, .2);
  border-color: rgba(167, 139, 250, .4);
  color: #c4b5fd;
}
.msg-gallery-grid {
  flex: 1; overflow-y: auto;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  align-content: start;            /* don't stretch rows when grid is short */
}
.msg-gallery-item {
  position: relative;
  aspect-ratio: 1;
  background: #0f1119;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}
.msg-gallery-item img,
.msg-gallery-item video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.msg-gallery-item.audio {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-mute);
}
.msg-gallery-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  background: rgba(0, 0, 0, .6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  pointer-events: none;
}
.msg-gallery-price {
  position: absolute;
  top: 6px; right: 6px;
  display: inline-flex; align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: .68rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  letter-spacing: .01em;
}
.msg-gallery-price.paid {
  background: rgba(34, 197, 94, .92);
}
.msg-gallery-price.locked {
  background: rgba(0, 0, 0, .65);
  border: 1px solid rgba(255, 255, 255, .14);
}
.msg-gallery-empty {
  grid-column: 1 / -1;
  padding: 36px 12px;
  text-align: center;
  color: var(--text-mute);
  font-size: .85rem;
}
.msg-thread-list {
  flex: 1; overflow-y: auto;
  padding: 14px 16px 8px;
  display: flex; flex-direction: column;
  gap: 1px;          /* tight default; .msg-row.tail bumps it for end-of-group breaks */
}
/* Each message is a row that holds the bubble + (optional) time below.
   Time only shows on the last bubble of a sender-group — Telegram/iMessage style. */
.msg-row { display: flex; flex-direction: column; }
.msg-row.in  { align-items: flex-start; }
.msg-row.out { align-items: flex-end; }
.msg-row.tail { margin-bottom: 10px; }
/* Bubble — iMessage-style: very rounded pill shape, tight padding, shrink to text.
   Tail-cut at the bottom corner of the LAST bubble in a sender-group. */
.msg-bubble {
  max-width: 65%;
  padding: 7px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  width: fit-content;
}
.msg-bubble.in {
  background: rgba(255, 255, 255, .07);
  color: var(--text);
}
.msg-bubble.out {
  background: #7c3aed;
  color: #fff;
}
/* Tail at bottom-corner of the LAST bubble in a group (iMessage style).
   Mid-group bubbles stay fully rounded so the stack reads as one balloon. */
.msg-row.tail .msg-bubble.in  { border-bottom-left-radius: 4px; }
.msg-row.tail .msg-bubble.out { border-bottom-right-radius: 4px; }

/* Per-message action row (Reply | Like | Delete) — sits as an absolute overlay
   anchored to the ROW (not the bubble), so it can never push bubble height. */
.msg-row { position: relative; }
.msg-actions {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 2px;
  padding: 2px;
  background: rgba(15, 17, 24, .96);
  border: 1px solid #1f242f;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  white-space: nowrap;
  z-index: 2;
}
.msg-row.out .msg-actions { right: 73%; }   /* sit just left of typical bubble width (max 65%) */
.msg-row.in  .msg-actions { left:  73%; }
.msg-row:hover .msg-actions { opacity: 1; pointer-events: auto; }
.msg-act {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: none; background: transparent;
  color: var(--text-mute);
  border-radius: 50%;
  cursor: pointer;
  transition: background .12s, color .12s, transform .08s;
}
.msg-act:hover           { background: rgba(167, 139, 250, .14); color: var(--text); }
.msg-act-like.liked      { color: #fb7185; }
.msg-act-like:hover      { color: #fb7185; background: rgba(251, 113, 133, .12); }
.msg-act-delete:hover    { color: #fb7185; background: rgba(251, 113, 133, .12); }
.msg-act:active          { transform: scale(.92); }

/* Reply banner — shows above the composer when user clicks Reply on a message */
.msg-reply-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: rgba(167, 139, 250, .07);
  border-top: 1px solid #1a1d27;
  font-size: .82rem;
  animation: replyBannerIn .15s ease-out;
}
@keyframes replyBannerIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.msg-reply-bar { width: 3px; height: 30px; background: var(--violet); border-radius: 2px; flex-shrink: 0; }
.msg-reply-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-reply-name { font-size: .72rem; font-weight: 600; color: var(--violet); }
.msg-reply-snippet { font-size: .8rem; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-reply-cancel {
  background: transparent; border: none; color: var(--text-mute); cursor: pointer;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: background .12s, color .12s;
}
.msg-reply-cancel:hover { background: rgba(255,255,255,.05); color: var(--text); }
.msg-time {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px;
  color: var(--text-mute);
  margin: 2px 4px 0;
  font-variant-numeric: tabular-nums;
}
/* Read-receipt ticks — single = sent, double = read (cyan, like WhatsApp) */
.msg-tick { color: var(--text-mute); flex-shrink: 0; }
.msg-tick.read { color: #22d3ee; }

/* PPV price label — green pill if paid, amber if waiting on payment.
   Sits inline with the time line below the bubble; free messages get no pill. */
.msg-price {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-right: 6px;
}
.msg-price.paid {
  background: rgba(74, 222, 128, .14);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, .28);
}
.msg-price.unpaid {
  background: rgba(251, 191, 36, .14);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, .28);
}

/* Media block — sits as a SIBLING of the text bubble inside the row, not
   wrapped inside it. No purple bubble frame around the image. */
.msg-media-block {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.msg-media-block:empty { display: none; }
.msg-media-block img,
.msg-media-block video {
  max-width: 240px;
  max-height: 280px;
  border-radius: 14px;
  display: block;
  object-fit: cover;
  cursor: pointer;
}
.msg-media-block video { width: 240px; height: auto; min-height: 0; }
/* Small breathing room between media and the caption bubble below it */
.msg-media-block + .msg-bubble { margin-top: 4px; }
.msg-thread-empty { padding: 60px 20px; color: var(--text-mute); text-align: center; font-size: .85rem; }
.msg-thread-loading { padding: 30px; color: var(--text-mute); text-align: center; font-size: .82rem; }

.msg-composer {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 12px 14px;
  border-top: 1px solid #1a1d27;
  flex-shrink: 0;
}
.msg-composer textarea {
  flex: 1;
  min-height: 38px; max-height: 140px;
  background: rgba(20, 23, 32, .6);
  border: 1px solid #1f242f;
  border-radius: 14px;
  padding: 9px 14px;
  font-size: .88rem; color: var(--text);
  resize: none;
  font-family: inherit;
  transition: border-color .12s, background .12s;
}
.msg-composer textarea:focus { outline: none; border-color: var(--violet); background: rgba(20, 23, 32, .9); }
.msg-composer-send {
  background: linear-gradient(135deg, var(--violet) 0%, #ec4899 100%);
  color: #fff;
  border: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .35);
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.msg-composer-send:hover { transform: scale(1.05); }
.msg-composer-send:disabled { opacity: .55; cursor: not-allowed; transform: none; }

@media (max-width: 760px) {
  .bulk-card { grid-template-columns: 70px 1fr; }
  .bulk-thumb { width: 70px; height: 100px; }
  .bulk-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  .schedule-row { grid-template-columns: 1fr; }
  .bulk-filters { flex-wrap: wrap; }
}

/* Auto Messages page */
.auto-pulse {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 12px;
  background: rgba(74, 222, 128, .08);
  border: 1px solid rgba(74, 222, 128, .25);
  color: var(--text-soft);
  font-size: .9rem;
}
.auto-pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 12px #4ade80;
  animation: ping 1.8s ease-out infinite;
}
.auto-pulse-text strong { color: #4ade80; font-weight: 800; font-variant-numeric: tabular-nums; }

.auto-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 18px;
}
.auto-stat {
  background: linear-gradient(180deg, rgba(26, 30, 41, .8) 0%, rgba(20, 23, 32, .8) 100%);
  border: 1px solid #1f242f;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  transition: border-color .2s, transform .2s;
}
.auto-stat:hover { border-color: var(--violet); transform: translateY(-2px); }
.auto-stat-ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(167, 139, 250, .1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.auto-stat-info { display: flex; flex-direction: column; gap: 2px; }
.auto-stat-label { font-size: .78rem; color: var(--text-mute); }
.auto-stat-value {
  font-size: 1.4rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text);
}
.auto-stat-sub { font-size: .72rem; color: var(--text-mute); }

.auto-panel { display: none; animation: fadeUp .35s ease-out; }
.auto-panel.active { display: block; }
.chatter-panel { display: none; animation: fadeUp .35s ease-out; }
.chatter-panel.active { display: block; }

.auto-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; gap: 16px; flex-wrap: wrap;
}
.auto-panel-actions { display: flex; gap: 10px; align-items: center; }
.auto-search {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(20, 23, 32, .6);
  border: 1px solid #1f242f;
  border-radius: 12px;
  color: var(--text-mute);
  transition: border-color .15s;
}
.auto-search:focus-within { border-color: var(--violet); color: var(--text); }
.auto-search input {
  background: transparent; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: .85rem;
  width: 180px;
}
.auto-search input::placeholder { color: var(--text-mute); }
.auto-new-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 12px;
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff;
  border: none; cursor: pointer;
  font-family: inherit; font-size: .88rem; font-weight: 600;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .3);
  transition: transform .15s, box-shadow .15s;
}
.auto-new-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(124, 58, 237, .45);
}

/* Campaigns table */
.campaigns-table {
  background: linear-gradient(180deg, rgba(26, 30, 41, .6) 0%, rgba(20, 23, 32, .6) 100%);
  border: 1px solid #1f242f;
  border-radius: 16px;
  overflow: hidden;
}
.ct-head, .ct-row {
  display: grid;
  grid-template-columns: 90px minmax(180px, 1.4fr) 70px 80px 70px 70px 80px 100px 110px 110px;
  gap: 14px;
  padding: 12px 18px;
  align-items: center;
  font-size: .85rem;
}
.ct-head {
  background: rgba(167, 139, 250, .04);
  border-bottom: 1px solid #1f242f;
  color: var(--text-mute);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ct-head .num, .ct-row .num { text-align: right; }
.ct-row {
  border-bottom: 1px solid #1f242f;
  transition: background .15s;
  color: var(--text-soft);
}
.ct-row:last-child { border-bottom: none; }
.ct-row:hover { background: rgba(167, 139, 250, .04); }
.ct-date {
  display: flex; flex-direction: column;
}
.ct-date strong { font-weight: 600; color: var(--text); font-size: .85rem; }
.ct-date span { font-size: .72rem; color: var(--text-mute); }
.ct-text {
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: .85rem; line-height: 1.35;
}
.ct-num { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; text-align: right; }
.ct-num-empty { text-align: right; color: var(--text-mute); }
.ct-num-fail { color: #f87171; font-weight: 700; }
.ct-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 600;
  background: rgba(255, 255, 255, .06);
  color: var(--text-mute);
  width: fit-content;
}
.ct-status.unsent {
  background: rgba(255, 255, 255, .04);
  color: var(--text-mute);
  border: 1px solid #2a2f3c;
}
.ct-status.sent {
  background: rgba(74, 222, 128, .12);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, .25);
}
.ct-status.failed {
  background: rgba(248, 113, 113, .12);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, .25);
}
.ct-status.sending {
  background: rgba(167, 139, 250, .14);
  color: var(--violet);
  border: 1px solid rgba(167, 139, 250, .3);
}
.ct-status.sending::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--violet);
  animation: ping 1.4s ease-out infinite;
}
.ct-attach {
  display: inline-flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
}

/* Triggers list */
.trigger-list { display: flex; flex-direction: column; gap: 12px; }
.trigger-card {
  background: linear-gradient(180deg, rgba(26, 30, 41, .8) 0%, rgba(20, 23, 32, .8) 100%);
  border: 1px solid #1f242f;
  border-radius: 16px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px 18px;
  transition: border-color .2s;
}
.trigger-card:hover { border-color: var(--line-2); }
.trigger-card.is-on { border-color: rgba(74, 222, 128, .35); }
.trigger-bolt {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(74, 222, 128, .12);
  border: 1px solid rgba(74, 222, 128, .25);
  display: flex; align-items: center; justify-content: center;
  color: #4ade80;
  flex-shrink: 0;
}
.trigger-card.is-on .trigger-bolt {
  animation: triggerPulse 2s ease-in-out infinite;
}
@keyframes triggerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
  50%      { box-shadow: 0 0 0 8px rgba(74, 222, 128, .15); }
}
.trigger-info { min-width: 0; }
.trigger-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.1rem; font-weight: 700; color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.trigger-variants {
  background: rgba(255, 255, 255, .06);
  color: var(--text-soft);
  font-size: .68rem; font-weight: 600;
  padding: 3px 8px; border-radius: 5px;
}
.trigger-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: .82rem; color: var(--text-mute);
  margin-bottom: 10px;
}
.trigger-meta-icon { display: inline-flex; align-items: center; gap: 4px; }
.trigger-meta-next { color: #fbbf24; font-weight: 600; }
.trigger-meta a {
  color: var(--violet);
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
}
.trigger-meta a:hover { color: var(--text); }
.trigger-meta .sep { color: #2a2f3c; padding: 0 4px; }
.trigger-msg {
  color: var(--text);
  font-size: .9rem; font-style: italic;
  padding: 10px 14px;
  background: rgba(167, 139, 250, .04);
  border-left: 3px solid var(--violet);
  border-radius: 4px 8px 8px 4px;
  line-height: 1.5;
}
.trigger-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.trigger-toggle { display: inline-block; cursor: pointer; }
.trigger-toggle input { display: none; }
.trigger-toggle .tt-track {
  display: block; width: 44px; height: 24px;
  background: #1f242f; border-radius: 999px;
  position: relative;
  transition: background .25s;
}
.trigger-toggle .tt-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #6b7280;
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), background .2s;
}
.trigger-toggle input:checked + .tt-track { background: var(--violet-2); }
.trigger-toggle input:checked + .tt-track .tt-thumb {
  transform: translateX(20px);
  background: #fff;
}
.trigger-icon-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-mute);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.trigger-icon-btn:hover {
  background: rgba(167, 139, 250, .1);
  color: var(--text);
  border-color: var(--line-2);
}
.trigger-icon-btn.danger:hover {
  background: rgba(239, 68, 68, .1);
  color: #f87171;
  border-color: rgba(239, 68, 68, .3);
}

@media (max-width: 1100px) {
  .auto-stats { grid-template-columns: repeat(2, 1fr); }
  .ct-head, .ct-row {
    grid-template-columns: 80px minmax(140px, 1fr) 60px 70px 60px 60px 80px 100px;
  }
  .ct-head span:nth-child(7),
  .ct-head span:nth-child(8),
  .ct-row > *:nth-child(7),
  .ct-row > *:nth-child(8) { display: none; }
}
@media (max-width: 760px) {
  .auto-stats { grid-template-columns: 1fr 1fr; }
  .auto-search input { width: 120px; }
  .campaigns-table { overflow-x: auto; }
  .ct-head, .ct-row {
    grid-template-columns: 70px minmax(140px, 1fr) 50px 70px 70px 80px;
  }
  .ct-head span:nth-child(3),
  .ct-head span:nth-child(7),
  .ct-head span:nth-child(8),
  .ct-row > *:nth-child(3),
  .ct-row > *:nth-child(7),
  .ct-row > *:nth-child(8) { display: none; }
  .trigger-card { grid-template-columns: auto 1fr; }
  .trigger-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Trends tab — Optimal Posting Days */
.opt-days { display: flex; flex-direction: column; gap: 10px; }
.opt-day {
  background: rgba(20, 23, 32, .5);
  border: 1px solid #1f242f;
  border-radius: 14px;
  padding: 14px 18px 14px 14px;
  display: grid;
  grid-template-columns: 28px 1fr 50px;
  align-items: center;
  gap: 12px;
}
.opt-day-ico {
  width: 28px; height: 28px; border-radius: 7px;
  background: rgba(167, 139, 250, .12);
  color: var(--violet);
  display: flex; align-items: center; justify-content: center;
}
.opt-day-info {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.opt-day-name {
  font-size: 1.1rem; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em;
}
.opt-day-bar {
  height: 5px; background: #1f242f; border-radius: 999px;
  overflow: hidden; max-width: 100%;
}
.opt-day-fill {
  height: 100%; width: 0;
  background: var(--violet);
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(167, 139, 250, .55);
  animation: countryBarFill 1s cubic-bezier(.4, 0, .2, 1) .25s forwards;
}
.opt-day-meta { font-size: .75rem; color: var(--text-mute); }
.opt-day-rank {
  background: rgba(255, 255, 255, .06);
  color: var(--text-soft);
  width: 38px; padding: 5px 0;
  text-align: center; border-radius: 999px;
  font-size: .82rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.opt-day-rank.rank-top {
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .3);
}

/* Posting Patterns cards */
.pattern-list { display: flex; flex-direction: column; gap: 10px; }
.pattern-card {
  background: rgba(20, 23, 32, .5);
  border: 1px solid #1f242f;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.pattern-card.pattern-green { border-color: rgba(74, 222, 128, .35); }
.pattern-label { font-size: .82rem; color: var(--text-mute); font-weight: 500; }
.pattern-value {
  font-size: 1.4rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text);
  margin: 2px 0;
}
.pattern-meta { font-size: .82rem; color: var(--text-mute); }

/* Trends line charts */
.trends-chart {
  position: relative;
  height: 280px;
  width: 100%;
}
.trends-chart svg { width: 100%; height: 100%; display: block; }
.trends-chart-axis text { fill: var(--text-mute); font-size: 10px; font-family: inherit; }
.trends-chart-axis line { stroke: #1f242f; stroke-dasharray: 4 4; stroke-width: 1; }
.trends-chart-weekend { fill: rgba(255, 255, 255, .025); }
.trends-line {
  fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: drawLine 1.6s ease-out forwards;
}
.trends-line-direct { stroke: #67e8f9; filter: drop-shadow(0 0 6px rgba(103, 232, 249, .5)); }
.trends-line-fyp { stroke: #4ade80; filter: drop-shadow(0 0 6px rgba(74, 222, 128, .5)); animation-delay: .15s; }
.trends-dot {
  cursor: pointer;
  transition: r .15s ease;
}
.trends-dot:hover { r: 5; }
.trends-dot-direct { fill: #67e8f9; }
.trends-dot-fyp { fill: #4ade80; }
.trends-legend {
  display: flex; justify-content: center; gap: 28px;
  margin-top: 14px;
  font-size: .8rem; color: var(--text-soft);
}
.trends-legend span {
  display: inline-flex; align-items: center; gap: 8px;
}
.trends-legend .dot {
  width: 12px; height: 2px; border-radius: 0;
  position: relative;
}
.trends-legend .dot::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: inherit;
}
.trends-legend .dot-direct { background: #67e8f9; }
.trends-legend .dot-direct::before { background: #67e8f9; }
.trends-legend .dot-fyp { background: #4ade80; }
.trends-legend .dot-fyp::before { background: #4ade80; }
.trends-foot {
  margin-top: 8px;
  font-size: .7rem; color: var(--text-mute);
}

/* HTML axis label overlay — labels live outside the SVG so they don't
   stretch when the chart's viewBox scales to fit a wider container. */
.trends-axis-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: inherit;
}
.trends-axis-y-label {
  position: absolute;
  transform: translate(-100%, -50%);
  padding-right: 6px;
  font-size: 10px;
  color: var(--text-mute);
  white-space: nowrap;
}
.trends-axis-x-label {
  position: absolute;
  bottom: 6px;
  transform: translateX(-50%) rotate(-30deg);
  transform-origin: center center;
  font-size: 10px;
  color: var(--text-mute);
  white-space: nowrap;
}

/* Hover tooltip on Trends charts (matches FBuddy's date+values popup) */
.trends-tip {
  position: absolute;
  background: rgba(15, 18, 26, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .78rem;
  color: var(--text-soft);
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 5;
  min-width: 180px;
}
.trends-tip-date {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  font-size: .82rem;
}
.trends-tip-row {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0;
}
.trends-tip-row .dot {
  width: 10px; height: 10px; border-radius: 2px;
  flex-shrink: 0;
}
.trends-tip-row .dot-direct { background: #67e8f9; }
.trends-tip-row .dot-fyp { background: #4ade80; }
.trends-tip-row strong { color: var(--text); }

/* Peak Breakdown */
.peak-list { display: flex; flex-direction: column; gap: 10px; }
.peak-row {
  background: rgba(20, 23, 32, .4);
  border: 1px solid #1f242f;
  border-radius: 14px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 50px 1fr auto auto;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.peak-row:hover { border-color: var(--line-2); background: rgba(167, 139, 250, .04); }
.peak-rank {
  background: rgba(255, 255, 255, .06);
  color: var(--text-soft);
  width: 38px; padding: 5px 0;
  text-align: center; border-radius: 999px;
  font-size: .82rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.peak-rank.rank-top {
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff;
}
.peak-info { display: flex; flex-direction: column; gap: 4px; }
.peak-date { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.peak-stats { font-size: .82rem; color: var(--text-mute); }
.peak-stats .peak-fyp { color: #4ade80; font-weight: 600; }
.peak-stats .peak-direct { color: #67e8f9; font-weight: 600; }
.peak-stats .sep { color: #2a2f3c; margin: 0 6px; }
.peak-attr { text-align: right; }
.peak-videos { font-size: .85rem; color: var(--text); font-weight: 600; }
.peak-pct { font-size: .78rem; color: #4ade80; font-weight: 500; }
.peak-chevron { color: var(--text-mute); transition: transform .2s; }
.peak-row.open .peak-chevron { transform: rotate(180deg); }

/* Tags tab — Insights cards */
.insights-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.insight-card {
  background: rgba(20, 23, 32, .5);
  border: 1.5px solid;
  border-radius: 14px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .15s ease;
}
.insight-card:hover { transform: translateY(-2px); }
.insight-label {
  font-size: .82rem; color: var(--text-mute);
  font-weight: 500;
}
.insight-tag {
  font-size: 1.5rem; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  display: inline-flex; align-items: baseline; gap: 4px;
}
.insight-hash { color: var(--text-mute); font-weight: 400; }
.insight-stat {
  font-size: .85rem; color: var(--text-mute);
}
.insight-cyan   { border-color: rgba(34, 211, 238, .35); background: linear-gradient(180deg, rgba(34, 211, 238, .04) 0%, rgba(20, 23, 32, .5) 100%); }
.insight-amber  { border-color: rgba(251, 191, 36, .35); background: linear-gradient(180deg, rgba(251, 191, 36, .04) 0%, rgba(20, 23, 32, .5) 100%); }
.insight-red    { border-color: rgba(248, 113, 113, .35); background: linear-gradient(180deg, rgba(248, 113, 113, .04) 0%, rgba(20, 23, 32, .5) 100%); }
.insight-violet { border-color: rgba(167, 139, 250, .35); background: linear-gradient(180deg, rgba(167, 139, 250, .04) 0%, rgba(20, 23, 32, .5) 100%); }

/* Popular tag pills */
.tag-count-badge {
  background: rgba(255, 255, 255, .06);
  color: var(--text-soft);
  padding: 4px 12px; border-radius: 999px;
  font-size: .82rem; font-weight: 600;
}
.popular-tags {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
.tag-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 12px;
  background: rgba(20, 23, 32, .6);
  border: 1px solid #1f242f;
  font-size: .85rem; font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  white-space: nowrap;
  min-width: 0;
}
.tag-chip:hover {
  border-color: var(--violet);
  background: rgba(167, 139, 250, .06);
}
.chip-fire { font-size: .8rem; }
.chip-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.chip-count {
  background: rgba(34, 211, 238, .15);
  color: #67e8f9;
  font-size: .72rem; font-weight: 700;
  padding: 2px 8px; border-radius: 5px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.chip-pct {
  font-size: .72rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.chip-pct-good {
  background: rgba(74, 222, 128, .18);
  color: #86efac;
  padding: 2px 8px; border-radius: 5px;
}
.chip-pct-bad {
  background: rgba(248, 113, 113, .2);
  color: #fca5a5;
  padding: 2px 8px; border-radius: 5px;
}
.chip-pct-neutral {
  color: var(--text-mute);
}

/* Top performing tags list */
.sort-dropdown {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: rgba(20, 23, 32, .6);
  border: 1px solid #1f242f;
  color: var(--text-soft);
  font-family: inherit; font-size: .82rem; font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.sort-dropdown:hover { border-color: var(--violet); color: var(--text); }
.top-tags-list { display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.top-tags-list::-webkit-scrollbar { width: 6px; }
.top-tags-list::-webkit-scrollbar-thumb { background: #1f242f; border-radius: 6px; }
.top-tag {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid #1f242f;
}
.top-tag:last-child { border-bottom: none; }
.top-tag-rank {
  font-size: 1.05rem; font-weight: 800;
  color: var(--violet);
  width: 32px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.top-tag-info { flex: 1; min-width: 0; }
.top-tag-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 1rem; font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.top-tag-name .hash { color: var(--text-mute); font-weight: 400; }
.engagement-pill {
  background: rgba(74, 222, 128, .15);
  color: #4ade80;
  font-size: .68rem; font-weight: 700;
  padding: 3px 8px; border-radius: 5px;
}
.top-tag-stats {
  font-size: .82rem; color: var(--text-mute);
}
.top-tag-stats .sep { color: #2a2f3c; margin: 0 6px; }

/* Tag performance chart */
.tag-chart-wrap {
  height: 360px;
  display: flex; flex-direction: column;
}
.tag-chart-svg {
  flex: 1;
  width: 100%;
}
.tag-chart-bar {
  transform-origin: bottom center;
  transform-box: fill-box;
  animation: barGrow .7s cubic-bezier(.34, 1.4, .64, 1) backwards;
  cursor: pointer;
  transition: filter .15s;
}
.tag-chart-bar:hover { filter: brightness(1.3); }
.tag-chart-label {
  fill: var(--text-mute);
  font-size: 11px;
  font-family: inherit;
}
.tag-chart-axis line { stroke: #1f242f; stroke-dasharray: 4 4; }

/* Global sort bar at the top of the Tags tab */
.tags-sort-bar {
  display: flex; justify-content: flex-end;
  margin-bottom: 14px;
}

@media (max-width: 1100px) {
  .insights-grid { grid-template-columns: repeat(2, 1fr); }
  .popular-tags { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .insights-grid { grid-template-columns: 1fr; }
  .popular-tags { grid-template-columns: repeat(2, 1fr); }
}

/* Best Times tab */
.traffic-toggle-wrap {
  display: flex; justify-content: flex-end;
  margin-bottom: 14px;
}
.traffic-toggle {
  display: inline-flex; padding: 4px;
  background: rgba(20, 23, 32, .6);
  border: 1px solid #1f242f;
  border-radius: 12px;
  gap: 4px;
}
.traffic-toggle button {
  padding: 7px 16px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-mute); font-family: inherit;
  font-size: .85rem; font-weight: 500;
  transition: background .2s, color .2s;
}
.traffic-toggle button:hover { color: var(--text-soft); }
.traffic-toggle button.active {
  background: rgba(167, 139, 250, .15);
  color: var(--text);
  font-weight: 600;
}

.best-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.best-list { display: flex; flex-direction: column; gap: 10px; }
.best-time {
  background: rgba(20, 23, 32, .5);
  border: 1px solid #1f242f;
  border-radius: 14px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 10px 14px;
  transition: border-color .15s;
}
.best-time:hover { border-color: var(--line-2); }
.best-rank {
  grid-row: 1 / 3;
  background: rgba(255, 255, 255, .06);
  color: var(--text-soft);
  width: 38px; padding: 5px 0;
  text-align: center; border-radius: 999px;
  font-size: .82rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  align-self: center;
}
.best-rank.rank-top {
  background: linear-gradient(135deg, #67e8f9, #06b6d4);
  color: #0a0d14;
  box-shadow: 0 4px 12px rgba(34, 211, 238, .25);
}
.best-info {
  grid-row: 1 / 2; grid-column: 2 / 3;
  display: flex; flex-direction: column; gap: 2px;
}
.best-when { font-size: 1rem; font-weight: 700; color: var(--text); }
.best-samples { font-size: .78rem; color: var(--text-mute); }
.best-views {
  grid-row: 1 / 2; grid-column: 3 / 4;
  font-size: .95rem; font-weight: 700; color: var(--text);
  text-align: right;
  white-space: nowrap;
}
.best-badges {
  grid-row: 2 / 3; grid-column: 2 / 4;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.best-badge {
  font-size: .72rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.best-badge.fyp {
  background: rgba(34, 211, 238, .12);
  color: #67e8f9;
  border: 1px solid rgba(34, 211, 238, .25);
}
.best-badge.direct {
  background: rgba(74, 222, 128, .1);
  color: #86efac;
  border: 1px solid rgba(74, 222, 128, .25);
}

/* Weekly heat map */
.heatmap-grid {
  display: grid;
  grid-template-columns: 28px repeat(7, 1fr);
  gap: 3px 6px;
  align-items: center;
  margin-top: 8px;
}
.hm-day {
  font-size: .82rem; font-weight: 600;
  color: var(--text-soft);
  text-align: center;
  padding-bottom: 10px;
}
.hm-hour {
  font-size: .7rem;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 4px;
}
.hm-pill {
  height: 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.hm-pill:hover {
  transform: scaleY(1.4);
  filter: brightness(1.4);
  z-index: 2;
}
.hm-l0 { background: rgba(167, 139, 250, .08); }
.hm-l1 { background: rgba(167, 139, 250, .22); }
.hm-l2 { background: rgba(167, 139, 250, .4); }
.hm-l3 { background: rgba(167, 139, 250, .55); }
.hm-l4 { background: rgba(167, 139, 250, .75); }
.hm-l5 { background: rgba(167, 139, 250, .92); }

.heatmap-legend-pills {
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; color: var(--text-mute);
  margin-top: 14px;
  justify-content: flex-start;
}
.hm-leg {
  width: 16px; height: 12px; border-radius: 999px;
}

@media (max-width: 1100px) {
  .best-grid { grid-template-columns: 1fr; }
}

/* Old simple heatmap (kept for any leftover usage) */
.heatmap {
  display: grid;
  grid-template-columns: 28px repeat(24, 1fr);
  gap: 3px;
  margin: 18px 0;
}
.heatmap .hm-day {
  display: flex; align-items: center;
  font-size: .7rem; color: var(--text-mute);
  font-weight: 600;
}
.heatmap .hm-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(167, 139, 250, .04);
  border: 1px solid rgba(167, 139, 250, .04);
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.heatmap .hm-cell:hover {
  transform: scale(1.4);
  z-index: 2;
  border-color: #fff;
}
.heatmap .hm-0 { background: rgba(167, 139, 250, .04); }
.heatmap .hm-1 { background: rgba(167, 139, 250, .2); }
.heatmap .hm-2 { background: rgba(167, 139, 250, .4); }
.heatmap .hm-3 { background: rgba(167, 139, 250, .65); }
.heatmap .hm-4 { background: rgba(167, 139, 250, .9); }
.heatmap-legend {
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; color: var(--text-mute);
  margin-top: 8px;
}
.hl-cell {
  width: 14px; height: 14px; border-radius: 3px;
}
.hl-0 { background: rgba(167, 139, 250, .04); }
.hl-1 { background: rgba(167, 139, 250, .2); }
.hl-2 { background: rgba(167, 139, 250, .4); }
.hl-3 { background: rgba(167, 139, 250, .65); }
.hl-4 { background: rgba(167, 139, 250, .9); }

@media (max-width: 1100px) {
  .rec-grid { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: repeat(3, 1fr); }
  .performer { grid-template-columns: 50px 1fr; }
  .performer-rank { position: absolute; top: 16px; right: 16px; }
}
@media (max-width: 760px) {
  .media-grid { grid-template-columns: repeat(2, 1fr); }
  .performer-stats { font-size: .75rem; gap: 8px; }
  .performer-scores { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* FYP Performance page */
.fyp-tag-free {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .06em;
  background: linear-gradient(180deg, #b45309, #78350f);
  color: #fde68a;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid #d97706;
  margin-left: 12px;
  vertical-align: middle;
  -webkit-text-fill-color: #fde68a;
  background-clip: border-box;
  text-transform: uppercase;
}
.fyp-tools { display: flex; gap: 8px; }
.fyp-grid {
  display: grid; gap: 14px;
  margin-bottom: 14px;
  /* Cap the whole grid at ~4 × 320px + 3 gaps so cards stay compact on wide
     screens. Inner columns use 1fr so the 3-col row visually matches the
     width of the 4-col row above (no awkward gap on the right). */
  max-width: calc(4 * 320px + 3 * 14px);
}
.fyp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fyp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fyp-card {
  background: linear-gradient(180deg, rgba(26, 30, 41, .8) 0%, rgba(20, 23, 32, .8) 100%);
  border: 1px solid #1f242f;
  border-radius: 16px;
  padding: 18px;
  position: relative;
  transition: border-color .2s ease, transform .2s ease;
}
.fyp-card:hover { border-color: var(--violet); transform: translateY(-2px); }
.fyp-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px; gap: 8px;
}
.fyp-label {
  font-size: .82rem; color: var(--text-soft);
  font-weight: 500;
}
.fyp-ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fyp-ico-blue   { background: rgba(59, 130, 246, .15);  color: #60a5fa; }
.fyp-ico-pink   { background: rgba(236, 72, 153, .15);  color: #f472b6; }
.fyp-ico-red    { background: rgba(239, 68, 68, .15);   color: #f87171; }
.fyp-ico-green  { background: rgba(74, 222, 128, .15);  color: #4ade80; }
.fyp-ico-gold   { background: rgba(251, 191, 36, .15);  color: #fbbf24; }
.fyp-ico-violet { background: rgba(167, 139, 250, .15); color: var(--violet); }
.fyp-value {
  font-size: 1.9rem; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1;
  color: var(--text);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.fyp-card-highlight {
  border-color: var(--violet);
  background: linear-gradient(180deg, rgba(124, 58, 237, .12) 0%, rgba(20, 23, 32, .8) 100%);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .2), 0 12px 32px -10px rgba(167, 139, 250, .25);
}

.trend {
  font-size: .85rem; font-weight: 600;
  letter-spacing: 0;
}
.trend-up { color: #4ade80; }
.trend-down { color: #f87171; }
.trend-flat { color: #4ade80; opacity: .85; }

/* Tag pills */
.tag-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tag-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font-size: .88rem; font-weight: 600;
  background: rgba(20, 23, 32, .5);
  border: 1.5px solid #1f242f;
  color: var(--text);
  transition: transform .15s ease, border-color .15s ease;
  cursor: pointer;
}
.tag-pill:hover { transform: translateY(-1px); }
.tag-pill .tag-count, .tag-pill .tag-pct {
  font-size: .72rem; font-weight: 600;
  background: rgba(255, 255, 255, .06);
  padding: 2px 7px; border-radius: 999px;
  color: var(--text-soft);
}
.tag-pill .tag-pct { color: var(--text); background: rgba(255,255,255,.1); }
.tag-pill.tag-blue   { border-color: #2563eb; }
.tag-pill.tag-violet { border-color: var(--violet); }
.tag-pill.tag-green  { border-color: #16a34a; }
.tag-pill.tag-gray   { border-color: #3f4754; }
.tag-pill.tag-orange { border-color: #ea580c; }
.tag-pill.tag-blue:hover   { background: rgba(37, 99, 235, .12); }
.tag-pill.tag-violet:hover { background: rgba(124, 58, 237, .12); }
.tag-pill.tag-green:hover  { background: rgba(22, 163, 74, .12); }
.tag-pill.tag-gray:hover   { background: rgba(63, 71, 84, .2); }
.tag-pill.tag-orange:hover { background: rgba(234, 88, 12, .12); }

/* Share toggle */
.fyp-share {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-top: 18px; padding: 18px 22px;
  border-top: 1px solid #1f242f;
}
.fyp-share strong {
  display: block; font-size: .95rem; font-weight: 600;
  color: var(--text); margin-bottom: 4px;
}
.fyp-share p {
  font-size: .82rem; color: var(--text-mute); margin: 0;
}
.toggle { display: inline-block; cursor: pointer; flex-shrink: 0; }
.toggle input { display: none; }
.toggle-track {
  display: block; width: 42px; height: 24px;
  background: #1f242f; border-radius: 999px;
  position: relative;
  transition: background .2s ease;
}
.toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-mute);
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), background .2s;
}
.toggle input:checked + .toggle-track { background: var(--violet-2); }
.toggle input:checked + .toggle-track .toggle-thumb {
  transform: translateX(18px);
  background: #fff;
}

@media (max-width: 1100px) {
  .fyp-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .fyp-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .fyp-grid-4 { grid-template-columns: 1fr 1fr; }
  .fyp-value { font-size: 1.5rem; }
}

/* Messages — embedded Fansly webview */
.dash {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}
.dash > .dash-top { flex-shrink: 0; }
.dash > .page,
.dash > .agency-page,
.dash > .account-page { flex: 1; min-height: 0; }
.dash > .page:not(.active) { display: none; }
.dash > .page.active,
.dash > .agency-page.active,
.dash > .account-page.active { overflow-y: auto; overflow-x: hidden; }
.page-messages {
  margin: -20px -32px -60px;
  display: flex; flex-direction: column;
  background: #0a0d14;
}
.page-messages.active { display: flex !important; overflow: hidden !important; }

/* Messages — 3-pane shell: convo list | thread | fan profile */
.msg-shell {
  flex: 1;
  display: grid;
  grid-template-columns: 300px 1fr 320px;
  min-height: 0;
  background: #0a0d14;
}
/* The fan profile pane gets hidden until a conversation is selected (JS toggles .open) */
.msg-shell:not(:has(.msg-profile.open)) { grid-template-columns: 300px 1fr 0; }
.msg-shell:not(:has(.msg-profile.open)) .msg-profile { display: none; }
.msg-sidebar {
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 16px 14px;
  border-right: 1px solid var(--line);
  min-height: 0;
  overflow-y: auto;
}
.msg-search {
  position: relative;
  display: flex; align-items: center; gap: 8px;
}
.msg-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-mute); pointer-events: none;
}
.msg-search input {
  flex: 1;
  width: 100%;
  background: rgba(20, 16, 32, .55);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px 9px 36px;
  color: var(--text);
  font-size: .88rem;
  outline: none;
  transition: border-color .2s, background .2s;
}
.msg-search input::placeholder { color: var(--text-mute); }
.msg-search input:focus {
  border-color: rgba(167, 139, 250, .45);
  background: rgba(26, 15, 51, .65);
}
.msg-search-filter {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 16, 32, .55);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  flex-shrink: 0;
}
.msg-search-filter:hover {
  background: rgba(124, 58, 237, .12);
  border-color: rgba(167, 139, 250, .35);
  color: #c4b5fd;
}
.msg-tabs {
  display: flex; align-items: center;
  gap: 8px;
  position: relative;             /* anchor for the manage-lists dropdown */
}
/* Horizontally scrollable tab strip — Inbox + Online + pinned Fansly lists.
   Hides the scrollbar; pinned tabs never wrap and the pencil stays sticky on the right. */
.msg-tabs-scroll {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 2px 2px 0;
  scroll-behavior: smooth;
}
.msg-tabs-scroll::-webkit-scrollbar { display: none; }
.msg-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 999px;
  color: var(--text-soft, #cbd5e1);
  font-size: .82rem; font-weight: 600;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  flex-shrink: 0;                 /* don't compress when row scrolls */
  white-space: nowrap;
}
.msg-tab:hover {
  background: rgba(124, 58, 237, .1);
  border-color: rgba(167, 139, 250, .18);
  color: #c4b5fd;
}
.msg-tab.active {
  background: rgba(124, 58, 237, .12);
  border-color: rgba(167, 139, 250, .28);
  color: #c4b5fd;
  box-shadow: 0 0 18px -8px var(--violet-glow, rgba(124, 58, 237, .55));
}
.msg-tab svg { color: currentColor; opacity: .9; }
.msg-tab-count {
  font-size: .78rem;
  color: currentColor;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}
/* Pinned Fansly-list tabs can have long names — truncate with ellipsis and
   show the full label via the title tooltip. */
.msg-tab[data-list-id] {
  max-width: 140px;
}
.msg-tab[data-list-id] > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Small green dot for the Online tab (pulses when active to mirror live state) */
.msg-tab-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .55);
  animation: convOnlinePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.msg-tab-settings,
.msg-tabs-edit {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-soft);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  flex-shrink: 0;
}
.msg-tab-settings:hover,
.msg-tabs-edit:hover {
  background: rgba(124, 58, 237, .12);
  border-color: rgba(167, 139, 250, .35);
  color: #c4b5fd;
}
.msg-tabs-edit.active {
  background: rgba(124, 58, 237, .18);
  border-color: rgba(167, 139, 250, .45);
  color: #c4b5fd;
}

/* Manage Lists dropdown — fixed-positioned and anchored by JS so it can't be
   clipped by the narrow conv sidebar. Width tuned to fit comfortably inside
   the sidebar with a few px breathing room on either side. */
.msg-tabs-edit-panel {
  position: fixed;
  width: 280px; max-height: 440px;
  background: rgba(15, 17, 25, .98);
  border: 1px solid rgba(167, 139, 250, .22);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 200;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease;
}
.msg-tabs-edit-panel.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.msg-tabs-edit-head {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(167, 139, 250, .14);
  display: flex; align-items: center; justify-content: space-between;
}
.msg-tabs-edit-head strong {
  font-size: .85rem; color: var(--text-strong, #f3f4f6);
}
.msg-tabs-edit-close {
  background: none; border: none;
  color: var(--text-mute);
  cursor: pointer;
  font-size: 18px; line-height: 1;
  padding: 0 4px;
}
.msg-tabs-edit-close:hover { color: var(--text-strong); }
.msg-tabs-edit-body {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
}
.msg-tabs-edit-hint {
  font-size: .75rem; color: var(--text-mute);
  margin-bottom: 2px;
}
.msg-tabs-edit-action {
  padding: 8px 12px;
  background: rgba(124, 58, 237, .15);
  border: 1px solid rgba(167, 139, 250, .35);
  border-radius: 8px;
  color: #c4b5fd;
  font-size: .82rem; font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.msg-tabs-edit-action:hover { background: rgba(124, 58, 237, .25); }
.msg-tabs-edit-action:disabled { opacity: .5; cursor: not-allowed; }
.msg-tabs-edit-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 4px;
}
.msg-tabs-edit-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  cursor: pointer;
  font-size: .82rem;
  color: var(--text, #e5e7eb);
  user-select: none;
}
.msg-tabs-edit-item:hover { background: rgba(124, 58, 237, .08); }
.msg-tabs-edit-item > span:not(.msg-tabs-edit-item-count) {
  flex: 1; min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-tabs-edit-item input[type="checkbox"] {
  width: 16px; height: 16px;
  flex-shrink: 0;
  accent-color: var(--violet);
  cursor: pointer;
  margin: 0;
}
.msg-tabs-edit-item-count {
  margin-left: auto;
  font-size: .72rem;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.msg-tabs-edit-empty {
  padding: 18px 8px;
  text-align: center;
  color: var(--text-mute);
  font-size: .8rem;
}
.msg-empty-list {
  padding: 22px 14px;
  text-align: center;
  font-size: .85rem;
  color: var(--text-mute);
  background: rgba(20, 16, 32, .4);
  border: 1px solid var(--line);
  border-radius: 14px;
}
/* ── Fan profile pane (right sidebar in Messages) ─────────────────────── */
.msg-profile {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--line);
  background: #0a0d14;
  overflow-y: auto;
  min-height: 0;
}
.msg-profile-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid #1a1d27;
}
.msg-profile-name { font-size: .92rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.msg-profile-handle { font-size: .72rem; color: var(--text-mute); margin-top: 2px; }
.msg-profile-badge {
  display: inline-flex; align-items: center;
  background: rgba(34, 211, 238, .14); color: #22d3ee;
  font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
}
.msg-profile-badge.sub { background: rgba(167, 139, 250, .16); color: var(--violet); }
.msg-profile-section { padding: 12px 16px 14px; border-bottom: 1px solid #1a1d27; }
.msg-profile-section:last-child { border-bottom: none; }
.msg-profile-section-head {
  display: flex; align-items: center; gap: 8px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.msg-profile-section-head .ico { width: 16px; display: flex; align-items: center; justify-content: center; color: var(--violet); }
.msg-profile-section-head.financial .ico { color: #4ade80; }
.msg-profile-section-head.info     .ico { color: #c4b5fd; }
.msg-profile-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0;
  font-size: .82rem;
}
.msg-profile-row .lbl { color: var(--text-mute); }
.msg-profile-row .val { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.msg-profile-row .val.green { color: #4ade80; }
.msg-profile-row .val.violet { color: var(--violet); }
.msg-profile-info-row {
  display: grid;
  grid-template-columns: 18px 90px 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  font-size: .82rem;
}
.msg-profile-info-row .ico { color: var(--text-mute); display: flex; align-items: center; justify-content: center; }
.msg-profile-info-row .lbl { color: var(--text-mute); }
.msg-profile-info-row input,
.msg-profile-info-row select {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--text);
  font-size: .82rem;
  font-family: inherit;
  width: 100%;
  transition: border-color .12s, background .12s;
}
.msg-profile-info-row input::placeholder { color: var(--text-mute); }
.msg-profile-info-row input:hover,
.msg-profile-info-row select:hover { background: rgba(255,255,255,.03); }
.msg-profile-info-row input:focus,
.msg-profile-info-row select:focus { outline: none; border-color: var(--violet); background: rgba(20,23,32,.6); }
.msg-profile-notes {
  width: 100%;
  background: rgba(20, 23, 32, .6);
  border: 1px solid #1f242f;
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-size: .82rem;
  font-family: inherit;
  resize: vertical;
  min-height: 90px;
}
.msg-profile-notes:focus { outline: none; border-color: var(--violet); }

/* msg-main is a column flex container. The empty-state placeholder centers
   itself via `margin: auto`; the thread takes the full pane via `flex: 1`. */
.msg-main {
  display: flex; flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.msg-main > .msg-empty-state { margin: auto; padding: 32px; }
.msg-main > .msg-thread { flex: 1; min-height: 0; min-width: 0; }
.msg-empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  max-width: 420px;
  gap: 14px;
}
.msg-empty-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(167, 139, 250, .35), rgba(124, 58, 237, .15) 70%);
  border: 1px solid rgba(167, 139, 250, .3);
  color: #c4b5fd;
  box-shadow: 0 0 60px -10px rgba(124, 58, 237, .55);
  margin-bottom: 4px;
}
.msg-empty-state h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.msg-empty-state p {
  margin: 0;
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .msg-shell { grid-template-columns: 1fr; }
  .msg-sidebar { border-right: none; border-bottom: 1px solid var(--line); }
}
.webview-shell {
  flex: 1;
  display: flex; flex-direction: column;
  background: #0a0d14;
  overflow: hidden;
}
.webview-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: #14171f;
  border-bottom: 1px solid #1f242f;
  flex-shrink: 0;
}
.webview-controls { display: flex; gap: 4px; }
.webview-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.webview-btn:hover {
  background: rgba(167, 139, 250, .1);
  color: var(--text);
  border-color: var(--line-2);
}
.webview-btn:disabled { opacity: .35; cursor: not-allowed; }
.webview-btn:disabled:hover { background: transparent; color: var(--text-soft); border-color: transparent; }
.webview-url {
  flex: 1;
  font-size: .82rem;
  color: var(--text-mute);
  background: rgba(20, 23, 32, .6);
  border: 1px solid #1f242f;
  border-radius: 8px;
  padding: 7px 12px;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.webview-stage {
  flex: 1;
  position: relative;
  background: #0a0d14;
  min-height: 0;
  display: flex;
}
#fanslyWebview {
  flex: 1;
  width: 100%;
  height: 100%;
  display: inline-flex !important;
  border: none;
}
.webview-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 40px;
  gap: 12px;
  background: #0a0d14;
  z-index: 2;
}
.webview-fallback h2 {
  font-size: 1.4rem; font-weight: 700;
  margin: 0;
  background: linear-gradient(180deg, #fff 0%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.webview-fallback p {
  max-width: 460px;
  color: var(--text-soft);
  margin: 0 0 12px;
}

/* Page switching */
.page { display: none; }
.page.active { display: block; animation: fadeUp .35s ease-out; }
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Fans bar chart */
.fans-chart-wrap { position: relative; }
.chart-frame {
  display: flex; gap: 10px;
  align-items: stretch;
}
.chart-y {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: .72rem; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 28px;
  padding: 2px 0 2px;
  height: 220px;
}
.chart-y li { line-height: 1; }
.chart-svg-wrap { flex: 1; height: 220px; min-width: 0; }
.chart-svg-wrap .chart-svg { width: 100%; height: 100%; display: block; }
.chart-x {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  padding-left: 38px; padding-right: 4px;
  font-size: .72rem; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.fans-bar {
  transform-origin: bottom center;
  transform-box: fill-box;
  animation: barGrow .7s cubic-bezier(.34, 1.4, .64, 1) backwards;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
}
.fans-bar:hover {
  filter: brightness(1.3) drop-shadow(0 0 10px rgba(167, 139, 250, .8));
}
.fans-chart-wrap:has(.fans-bar:hover) .fans-bar:not(:hover) { opacity: .35; }
@keyframes barGrow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}
.fans-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(20, 8, 41, .96);
  border: 1px solid var(--violet);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .82rem;
  color: var(--text);
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity .15s ease;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 20px rgba(167, 139, 250, .3);
}
.fans-tooltip.show { opacity: 1; }
.fans-tooltip strong {
  color: var(--violet); font-size: 1.05rem; display: block;
  font-weight: 700;
}
.fans-tooltip span { color: var(--text-mute); }

/* Two-column row layout */
.row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 880px) { .row-2 { grid-template-columns: 1fr; } }

/* Age distribution */
.age-panel { display: flex; flex-direction: column; }
.age-list {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 18px;
}
.age-row {
  display: grid;
  grid-template-columns: 56px 1fr 38px 48px;
  align-items: center;
  gap: 12px;
}
.age-label {
  font-size: .85rem; font-weight: 600;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.age-row.top .age-label { color: var(--text); }
.age-bar {
  height: 8px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.age-bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--violet-2), var(--violet));
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(167, 139, 250, .4);
  animation: countryBarFill 1s cubic-bezier(.4, 0, .2, 1) .25s forwards;
}
.age-row.top .age-bar-fill {
  background: linear-gradient(90deg, var(--violet-2), var(--pink));
  box-shadow: 0 0 8px rgba(236, 72, 153, .5);
}
.age-count {
  font-size: .9rem; font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.age-pct {
  font-size: .75rem; font-weight: 600;
  color: var(--violet);
  background: rgba(167, 139, 250, .1);
  padding: 3px 8px; border-radius: 999px;
  text-align: center;
}
.panel-foot-stat {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: space-between;
  font-size: .85rem; color: var(--text-mute);
}
.panel-foot-stat strong {
  font-size: 1.4rem; color: var(--text);
  font-weight: 800; letter-spacing: -0.02em;
}

/* Activity / peak hours */
.activity-panel { display: flex; flex-direction: column; }
.peak-stat {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 18px;
}
.peak-time {
  font-size: 2.2rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(180deg, #fff 0%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.peak-meta { font-size: .85rem; color: var(--text-mute); }
.peak-meta strong { color: var(--text); font-weight: 700; }

.hours-chart {
  display: grid; grid-template-columns: repeat(24, 1fr);
  gap: 3px;
  align-items: end;
  height: 110px;
  margin-bottom: 8px;
}
.hour {
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  border-radius: 3px;
  height: var(--h);
  min-height: 3px;
  transform-origin: bottom center;
  animation: barGrow .6s cubic-bezier(.34, 1.4, .64, 1) backwards;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
  position: relative;
}
.hour:hover { filter: brightness(1.4); }
.hours-chart:has(.hour:hover) .hour:not(:hover) { opacity: .35; }
.hour.peak {
  background: linear-gradient(180deg, #fda4af, #ec4899);
  box-shadow: 0 0 10px rgba(236, 72, 153, .55);
}
.hour-labels {
  display: flex; justify-content: space-between;
  font-size: .72rem; color: var(--text-mute);
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  font-variant-numeric: tabular-nums;
}

/* Spending tiers */
.tier-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.tier-card {
  background: linear-gradient(180deg, rgba(167, 139, 250, .06) 0%, rgba(20, 12, 41, .4) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  animation: fadeUp .5s ease-out backwards;
}
.tier-grid .tier-card:nth-child(1) { animation-delay: .05s; }
.tier-grid .tier-card:nth-child(2) { animation-delay: .10s; }
.tier-grid .tier-card:nth-child(3) { animation-delay: .15s; }
.tier-grid .tier-card:nth-child(4) { animation-delay: .20s; }
.tier-grid .tier-card:nth-child(5) { animation-delay: .25s; }
.tier-grid .tier-card:nth-child(6) { animation-delay: .30s; }
.tier-card:hover {
  transform: translateY(-3px);
  border-color: var(--violet);
}
.tier-card::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, var(--tier-glow, rgba(167, 139, 250, .2)) 0%, transparent 70%);
  pointer-events: none;
  transition: background .3s;
}
.tier-card:hover::after { background: radial-gradient(circle, var(--tier-glow-strong, rgba(167, 139, 250, .35)) 0%, transparent 70%); }

.tier-top {
  display: flex; align-items: center; gap: 10px;
}
.tier-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(167, 139, 250, .12);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.tier-range {
  font-size: .82rem; font-weight: 600;
  color: var(--text);
}
.tier-count {
  font-size: 2.1rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  color: var(--text);
}
.tier-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .8rem; color: var(--text-mute);
}
.tier-pct {
  background: rgba(167, 139, 250, .1);
  color: var(--violet);
  padding: 2px 8px; border-radius: 999px;
  font-weight: 600;
}
.tier-bar {
  height: 4px; background: var(--line);
  border-radius: 999px; overflow: hidden;
}
.tier-bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--violet-2), var(--violet));
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(167, 139, 250, .5);
  animation: countryBarFill 1s cubic-bezier(.4, 0, .2, 1) .3s forwards;
}

/* Tier-specific theming */
.tier-card.tier-waste {
  --tier-glow: rgba(120, 113, 140, .18);
  --tier-glow-strong: rgba(120, 113, 140, .3);
}
.tier-card.tier-waste .tier-ico {
  background: rgba(120, 113, 140, .12);
  filter: grayscale(.6);
}
.tier-card.tier-waste .tier-bar-fill {
  background: linear-gradient(90deg, #6b6480, #4a4560);
  box-shadow: none;
}
.tier-card.tier-waste .tier-pct {
  background: rgba(120, 113, 140, .15);
  color: var(--text-mute);
}
.tier-card.tier-3 .tier-bar-fill,
.tier-card.tier-4 .tier-bar-fill {
  background: linear-gradient(90deg, var(--violet-2), var(--pink));
  box-shadow: 0 0 8px rgba(236, 72, 153, .5);
}
.tier-card.tier-whale {
  background: linear-gradient(180deg, rgba(251, 191, 36, .08) 0%, rgba(20, 12, 41, .5) 100%);
  border-color: rgba(251, 191, 36, .3);
  --tier-glow: rgba(251, 191, 36, .25);
  --tier-glow-strong: rgba(251, 191, 36, .4);
}
.tier-card.tier-whale:hover { border-color: #fbbf24; }
.tier-card.tier-whale .tier-ico {
  background: rgba(251, 191, 36, .15);
  border-color: rgba(251, 191, 36, .35);
}
.tier-card.tier-whale .tier-pct {
  background: rgba(251, 191, 36, .15);
  color: #fbbf24;
}
.tier-card.tier-whale .tier-count {
  background: linear-gradient(180deg, #fef3c7, #fbbf24);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tier-card.tier-whale .tier-bar-fill {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  box-shadow: 0 0 8px rgba(251, 191, 36, .6);
}

@media (max-width: 1100px) {
  .tier-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .tier-grid { grid-template-columns: 1fr; }
}

/* Country grid */
.panel-head { margin-bottom: 18px; }
.panel-head-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.panel-sub { display: block; font-size: .85rem; color: var(--text-mute); margin-top: 4px; }
.country-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.country-card {
  background: linear-gradient(180deg, rgba(167, 139, 250, .06) 0%, rgba(20, 12, 41, .4) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  cursor: pointer;
  position: relative; overflow: hidden;
  animation: fadeUp .5s ease-out backwards;
}
.country-grid .country-card:nth-child(1) { animation-delay: .05s; }
.country-grid .country-card:nth-child(2) { animation-delay: .10s; }
.country-grid .country-card:nth-child(3) { animation-delay: .15s; }
.country-grid .country-card:nth-child(4) { animation-delay: .20s; }
.country-grid .country-card:nth-child(5) { animation-delay: .25s; }
.country-grid .country-card:nth-child(6) { animation-delay: .30s; }
.country-grid .country-card:nth-child(7) { animation-delay: .35s; }
.country-grid .country-card:nth-child(8) { animation-delay: .40s; }
.country-card:hover {
  transform: translateY(-3px);
  border-color: var(--violet);
  background: linear-gradient(180deg, rgba(167, 139, 250, .14) 0%, rgba(20, 12, 41, .5) 100%);
}
.country-flag {
  font-size: 1.8rem; line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
}
.country-name {
  font-size: .88rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.country-stats {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 2px;
}
.country-count {
  font-size: 1.3rem; font-weight: 800; color: var(--text);
  letter-spacing: -0.02em;
}
.country-pct {
  font-size: .75rem; color: var(--text-mute);
  font-weight: 600;
  background: rgba(167, 139, 250, .1);
  padding: 2px 8px; border-radius: 999px;
}
.country-bar {
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}
.country-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--violet-2), var(--violet));
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(167, 139, 250, .5);
  animation: countryBarFill 1s cubic-bezier(.4, 0, .2, 1) .3s forwards;
}
.country-bar-fill[data-metric="subscribers"] {
  background: linear-gradient(90deg, #ec4899, #be185d);
  box-shadow: 0 0 6px rgba(236, 72, 153, .5);
}
@keyframes countryBarFill {
  to { width: var(--p); }
}

@media (max-width: 1100px) {
  .country-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .country-grid { grid-template-columns: repeat(2, 1fr); }
  .country-card { padding: 14px; }
  .country-flag { font-size: 1.5rem; }
}

/* Recent fans */
.recent-fans { display: flex; flex-direction: column; }
.recent-fan {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.recent-fan:last-child { border-bottom: none; padding-bottom: 4px; }
.recent-fan:first-child { padding-top: 4px; }
.recent-fan-av {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .85rem;
  flex-shrink: 0;
}
.recent-fan-name { flex: 1; min-width: 0; }
.recent-fan-name strong {
  display: block; color: var(--text);
  font-size: .92rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recent-fan-name span {
  font-size: .78rem; color: var(--text-mute);
}
.recent-fan-time {
  font-size: .8rem; color: var(--text-mute);
  flex-shrink: 0;
}
.recent-fan-action {
  padding: 7px 14px; border-radius: 999px;
  background: rgba(167, 139, 250, .12);
  border: 1px solid var(--line-2);
  color: var(--text); cursor: pointer;
  font-family: inherit; font-size: .82rem; font-weight: 500;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.recent-fan-action:hover {
  background: var(--violet-2);
  border-color: var(--violet);
}
@media (max-width: 760px) {
  .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .recent-fan-time { display: none; }
  .recent-fan-name span { font-size: .72rem; }
}

/* Skeleton loading state */
.is-loading { pointer-events: none; position: relative; }
.is-loading > * { opacity: 0 !important; transition: opacity .35s ease .05s; }
.is-loading::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(110deg,
      transparent 30%,
      rgba(167, 139, 250, .16) 50%,
      transparent 70%) 0 0 / 220% 100% no-repeat,
    rgba(167, 139, 250, .04);
  animation: shimmerSweep 1.3s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes shimmerSweep {
  0%   { background-position: -110% 0; }
  100% { background-position: 210% 0; }
}

/* Floating model-switch toast */
.model-toast-stack {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.model-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  background: linear-gradient(180deg, rgba(26, 15, 51, .92) 0%, rgba(20, 12, 41, .92) 100%);
  border: 1px solid rgba(167, 139, 250, .35);
  border-radius: 999px;
  box-shadow: 0 12px 36px -8px rgba(0, 0, 0, .55), 0 0 28px -6px var(--violet-glow, rgba(124, 58, 237, .45));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #f4f1ff;
  font-size: .88rem;
  opacity: 0;
  transform: translateY(-10px) scale(.96);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
  pointer-events: auto;
  position: relative;
  overflow: hidden;
}
.model-toast::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(167, 139, 250, .18), transparent 60%);
  pointer-events: none;
}
.model-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Snappy upward exit — accelerates upward like a flicked card */
.model-toast.dismissing {
  opacity: 0;
  transform: translateY(-44px) scale(.9);
  transition:
    opacity .14s cubic-bezier(.55, 0, 1, .45),
    transform .26s cubic-bezier(.55, 0, .85, .25);
}
.model-toast-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .78rem;
  color: #fff;
  flex-shrink: 0;
  position: relative; z-index: 1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .06);
}
.model-toast-title {
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
  position: relative; z-index: 1;
  white-space: nowrap;
}
.model-toast-title b {
  background: linear-gradient(90deg, #c4b5fd, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  margin-left: 4px;
}

/* Modal — Add Model */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.modal-overlay.show {
  opacity: 1; pointer-events: auto;
}
.modal {
  width: 100%; max-width: 520px;
  background: linear-gradient(180deg, #1a1e29 0%, #14171f 100%);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  padding: 36px 32px 28px;
  position: relative;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(167, 139, 250, .08);
  transform: scale(.92) translateY(20px);
  opacity: 0;
  transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), opacity .25s ease;
  overflow: hidden;
}
.modal-overlay.show .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.modal-close,
.modal-back {
  position: absolute; top: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  color: var(--text-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s, opacity .2s ease, transform .2s ease;
  z-index: 5;
}
.modal-close { right: 16px; }
.modal-back { left: 16px; opacity: 0; transform: translateX(-6px); pointer-events: none; }
.modal-back.show { opacity: 1; transform: translateX(0); pointer-events: auto; }
.modal-close:hover {
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .3);
  color: #f87171;
}
.modal-back:hover {
  background: rgba(167, 139, 250, .12);
  border-color: var(--violet);
  color: var(--text);
}
.modal-title {
  font-size: 1.7rem; font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  background: linear-gradient(180deg, #fff 0%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-align: center;
}
.modal-sub {
  color: var(--text-mute); font-size: .92rem;
  margin: 0 0 24px;
  text-align: center;
}

/* Modal views */
.modal-view {
  display: none;
  animation: viewIn .35s ease-out;
}
.modal-view.active { display: block; }
@keyframes viewIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Choice grid */
/* Two cards now (token-paste option commented out) — split the row
   50/50 instead of leaving an empty third column on the right. */
.choice-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.choice-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px;
  padding: 24px 18px;
  background: rgba(167, 139, 250, .04);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  position: relative;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.choice-card:hover {
  transform: translateY(-3px);
  border-color: var(--violet);
  background: rgba(167, 139, 250, .1);
}
.choice-emoji {
  font-size: 2.4rem; line-height: 1; margin-bottom: 4px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4));
  transition: transform .25s cubic-bezier(.34, 1.6, .64, 1);
}
.choice-card:hover .choice-emoji { transform: scale(1.1) rotate(-4deg); }
.choice-card strong {
  font-size: 1rem; font-weight: 700; color: var(--text);
}
.choice-card span:not(.choice-emoji):not(.choice-tag) {
  font-size: .82rem; color: var(--text-mute); line-height: 1.4;
}
.choice-card.recommended {
  border-color: var(--violet);
  background: linear-gradient(180deg, rgba(124, 58, 237, .14) 0%, rgba(20, 12, 41, .4) 100%);
}
/* WIP variant — the guided onboard flow isn't built yet. Card stays
   visible (the "Recommended" branding sets the expectation) but is
   clearly not interactive. Re-enable by removing .choice-card-wip
   + the `disabled` attribute on the button. */
.choice-card-wip,
.choice-card-wip:hover {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
  filter: saturate(.75);
}
.choice-card-wip:hover .choice-emoji { transform: none; }
.choice-card-wip-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--text-mute);
  font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.choice-tag {
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #fff;
  padding: 3px 10px; border-radius: 999px;
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Quick add — single-step Connect Fansly */
.quick-step {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  margin-bottom: 24px;
}
.quick-step .step-body { width: 100%; }

/* Wizard */
.wizard-stage {
  position: relative;
  min-height: 320px;
  margin-bottom: 20px;
}
.wizard-step {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  opacity: 0; pointer-events: none;
  transform: translateX(40px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.4, 0, .2, 1);
}
.wizard-step.active {
  opacity: 1; pointer-events: auto;
  transform: translateX(0);
}
.wizard-step.left { transform: translateX(-40px); }
.step-emoji {
  font-size: 2.4rem; line-height: 1; margin-bottom: 12px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5));
  animation: emojiBounce .6s cubic-bezier(.34, 1.6, .64, 1);
}
@keyframes emojiBounce {
  0%   { transform: scale(.5); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.step-q {
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--text);
}
.step-body {
  width: 100%;
  display: flex; flex-direction: column;
  text-align: left;
}
.step-body label {
  font-size: .8rem; font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.step-body input {
  width: 100%; padding: 11px 14px;
  background: rgba(20, 23, 32, .6);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit; font-size: .95rem;
  margin-bottom: 14px;
  transition: border-color .15s, background .15s;
}
.step-body input::placeholder { color: var(--text-mute); }
.step-body select {
  width: 100%; padding: 11px 14px;
  background: rgba(20, 23, 32, .6);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit; font-size: .95rem;
  margin-bottom: 14px;
}
/* Proxy section — collapsible <details> block at the bottom of the login form */
.fc-proxy-details {
  margin: 6px 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(20, 23, 32, .35);
}
.fc-proxy-summary {
  display: flex; align-items: center; justify-content: space-between;
  list-style: none;
  padding: 12px 14px;
  cursor: pointer;
  color: var(--text-soft);
  font-weight: 600; font-size: .88rem;
}
.fc-proxy-summary::-webkit-details-marker { display: none; }
.fc-proxy-summary-row {
  display: inline-flex; align-items: center; gap: 8px;
  color: #c4b5fd;
}
.fc-proxy-summary-caret {
  transition: transform .2s ease;
  color: var(--text-mute);
}
.fc-proxy-details[open] .fc-proxy-summary-caret { transform: rotate(180deg); }
.fc-proxy-body {
  padding: 4px 14px 12px;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.fc-proxy-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  cursor: pointer;
  color: var(--text);
  font-size: .9rem;
  margin: 0 0 6px;
}
.fc-proxy-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.fc-proxy-switch {
  position: relative;
  width: 36px; height: 20px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .18s ease, border-color .18s ease;
}
.fc-proxy-switch-thumb {
  position: absolute; top: 1px; left: 1px;
  width: 16px; height: 16px;
  background: #cfcfd9;
  border-radius: 50%;
  transition: transform .18s ease, background .18s ease;
}
.fc-proxy-toggle input:checked + .fc-proxy-switch {
  background: rgba(124, 58, 237, .55);
  border-color: rgba(167, 139, 250, .5);
}
.fc-proxy-toggle input:checked + .fc-proxy-switch .fc-proxy-switch-thumb {
  transform: translateX(16px);
  background: #fff;
}
.fc-proxy-row {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  gap: 8px;
  margin-bottom: 8px;
}
.fc-proxy-row:has(input:nth-child(2)) {
  grid-template-columns: 1fr 1fr;
}
.fc-proxy-row > * { margin-bottom: 0 !important; }
.step-body input:focus {
  outline: none; border-color: var(--violet);
  background: rgba(20, 23, 32, .9);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .12);
}

/* ── Edit proxy modal ───────────────────────────────────────────────────── */
.fc-px-overlay .fc-px-panel {
  max-width: 480px;
  width: calc(100% - 32px);
}
.fc-px-overlay .topup-head {
  align-items: flex-start;
  padding: 20px 22px 14px;
}
.fc-px-overlay .topup-close {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: var(--text-mute);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.fc-px-overlay .topup-close:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-color: rgba(255,255,255,.14);
}
.fc-px-body {
  padding: 0 22px 22px;
}
.fc-px-toggle {
  padding: 12px 14px;
  background: rgba(20, 23, 32, .45);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  margin-bottom: 16px;
}
.fc-px-grid {
  display: grid;
  grid-template-columns: 120px 1fr 100px;
  grid-template-areas:
    "type host port"
    "user user user"
    "pass pass pass";
  gap: 12px 10px;
}
.fc-px-field { display: flex; flex-direction: column; min-width: 0; }
.fc-px-field-type { grid-area: type; }
.fc-px-field-host { grid-area: host; }
.fc-px-field-port { grid-area: port; }
.fc-px-field-user { grid-area: user; }
.fc-px-field-pass { grid-area: pass; }
@media (max-width: 520px) {
  .fc-px-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "type type"
      "host port"
      "user user"
      "pass pass";
  }
}
.fc-px-field > label {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text-mute);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.fc-px-optional {
  text-transform: none;
  font-weight: 400;
  opacity: .7;
  letter-spacing: 0;
}
/* In-modal Test connection row — small ghost button to the right with
   the status line on the left. Sits below the proxy grid. */
.fc-proxy-test-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.fc-proxy-test-row .fc-px-status {
  margin: 0;
  font-size: .8rem;
  flex: 1;
  min-width: 0;
}
.fc-proxy-test-row .fc-px-btn { white-space: nowrap; }
.fc-px-field input,
.fc-px-field select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(20, 23, 32, .6);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.fc-px-field input::placeholder { color: var(--text-mute); }
.fc-px-field input:focus,
.fc-px-field select:focus {
  outline: none;
  border-color: var(--violet);
  background: rgba(20, 23, 32, .9);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .12);
}
.fc-px-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.fc-px-status {
  margin: 14px 0 0;
  font-size: .82rem;
  color: var(--text-mute);
  padding: 8px 12px;
  background: rgba(20, 23, 32, .45);
  border: 1px solid var(--line-2);
  border-radius: 10px;
}
.fc-px-status[hidden] { display: none; }
.fc-px-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}
.fc-px-actions-spacer { flex: 1; }
.fc-px-btn {
  padding: 10px 18px;
  border-radius: 10px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
  border: 1px solid transparent;
}
.fc-px-btn:active { transform: translateY(1px); }
.fc-px-btn-ghost {
  background: transparent;
  color: var(--text-mute);
  border-color: var(--line-2);
}
.fc-px-btn-ghost:hover {
  background: rgba(248, 113, 113, .08);
  color: #fb7185;
  border-color: rgba(248, 113, 113, .25);
}
.fc-px-btn-secondary {
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  border-color: rgba(255, 255, 255, .08);
}
.fc-px-btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(167, 139, 250, .35);
  color: #c4b5fd;
}
.fc-px-btn-secondary:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.fc-px-btn-primary {
  background: linear-gradient(135deg, var(--violet) 0%, #a78bfa 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(124, 58, 237, .25);
}
.fc-px-btn-primary:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #b8a4ff 100%);
  box-shadow: 0 6px 20px rgba(124, 58, 237, .35);
}
.fc-px-btn-primary:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Edit scheduled post modal — same input visuals as the proxy modal */
.fc-ep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
}
.fc-ep-field-caption, .fc-ep-field-tags, .fc-ep-field-walls {
  grid-column: span 2 / span 2;
}
.fc-px-field textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(20, 23, 32, .6);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  resize: vertical;
  min-height: 80px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.fc-px-field textarea::placeholder { color: var(--text-mute); }
.fc-px-field textarea:focus {
  outline: none;
  border-color: var(--violet);
  background: rgba(20, 23, 32, .9);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .12);
}
.fc-ep-walls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
  padding: 6px;
  background: rgba(20, 23, 32, .45);
  border: 1px solid var(--line-2);
  border-radius: 10px;
}
.fc-ep-walls-empty {
  font-size: .82rem;
  color: var(--text-mute);
  padding: 12px;
  text-align: center;
}
.fc-ep-wall-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
  color: var(--text);
  font-size: .88rem;
}
.fc-ep-wall-row:hover { background: rgba(255, 255, 255, .04); }
.fc-ep-wall-row input { accent-color: var(--violet); }
.fc-ep-wall-name { flex: 1; }
.fc-ep-wall-tag {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--violet);
  background: rgba(124, 58, 237, .12);
  padding: 2px 7px;
  border-radius: 999px;
}
@media (max-width: 520px) {
  .fc-ep-grid { grid-template-columns: 1fr; }
  .fc-ep-field-caption, .fc-ep-field-tags,
  .fc-ep-field-walls, .fc-ep-field-when, .fc-ep-field-expires {
    grid-column: span 1 / span 1;
  }
}
.step-hint {
  font-size: .78rem; color: var(--text-mute);
  margin: 4px 0 0;
}

/* Color grid */
.color-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  justify-items: center;
}
.color-swatch {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .2s cubic-bezier(.34, 1.6, .64, 1), border-color .2s;
  position: relative;
}
.color-swatch:hover { transform: scale(1.08); }
.color-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .4);
  transform: scale(1.05);
}

/* Vibe grid */
.vibe-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.vibe-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 16px;
  background: rgba(167, 139, 250, .04);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit; color: var(--text);
  transition: border-color .2s, background .2s, transform .15s;
}
.vibe-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-2);
}
.vibe-card.active {
  border-color: var(--violet);
  background: linear-gradient(180deg, rgba(124, 58, 237, .15) 0%, rgba(20, 12, 41, .4) 100%);
}
.vibe-emoji { font-size: 1.5rem; }
.vibe-card strong { font-size: .9rem; font-weight: 700; }
.vibe-card em {
  font-size: .72rem; color: var(--text-mute); font-style: normal;
}

/* Wizard CTA */
.wizard-cta {
  width: 100%;
  padding: 13px;
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  border: none;
  border-radius: 14px;
  color: #fff;
  font-family: inherit;
  font-weight: 600; font-size: .95rem;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 6px 20px rgba(124, 58, 237, .35);
}
.wizard-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(124, 58, 237, .5);
}

/* Wizard footer nav */
.wizard-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px;
}
.wizard-nav-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-2);
  color: var(--text-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.wizard-nav-btn:hover {
  background: rgba(167, 139, 250, .12);
  color: var(--text); border-color: var(--violet);
}
.wizard-nav-btn:disabled {
  opacity: .35; cursor: not-allowed;
}
.wizard-nav-btn:disabled:hover {
  background: rgba(255, 255, 255, .04); color: var(--text-soft);
  border-color: var(--line-2);
}
.wizard-progress {
  display: flex; align-items: center; gap: 6px;
}
.wizard-progress .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--line-2);
  transition: width .3s cubic-bezier(.4, 0, .2, 1), background .3s ease;
}
.wizard-progress .dot.active {
  width: 26px;
  background: var(--violet);
}
.wizard-progress .dot.done {
  background: var(--violet);
  opacity: .5;
}

@media (max-width: 540px) {
  .choice-grid { grid-template-columns: 1fr; }
  .modal { padding: 28px 22px 22px; }
  .step-q { font-size: 1.2rem; }
}

/* Live chat widget */
.lc-launcher {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(180deg, var(--violet-2) 0%, var(--violet-deep) 100%);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(124, 58, 237, .55), 0 0 0 1px rgba(167, 139, 250, .4);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s;
  color: #fff;
}
.lc-launcher:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 40px rgba(124, 58, 237, .7), 0 0 0 1px rgba(167, 139, 250, .6);
}
.lc-launcher::before {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%;
  background: var(--violet);
  opacity: .35; filter: blur(8px); z-index: -1;
  animation: pulseGlow 2.4s ease-in-out infinite;
}
.lc-launcher .ic-open, .lc-launcher .ic-close {
  position: absolute; transition: transform .3s ease, opacity .25s ease;
}
.lc-launcher .ic-close { transform: rotate(-90deg) scale(.6); opacity: 0; }
.lc-launcher.open .ic-open { transform: rotate(90deg) scale(.6); opacity: 0; }
.lc-launcher.open .ic-close { transform: rotate(0) scale(1); opacity: 1; }
.lc-launcher .badge {
  position: absolute; top: 4px; right: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #ef4444; border: 2px solid #0a0418;
  font-size: .6rem; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
}

.lc-panel {
  position: fixed; right: 24px; bottom: 100px; z-index: 89;
  width: 380px; max-width: calc(100vw - 32px);
  height: min(620px, calc(100vh - 140px));
  background: linear-gradient(180deg, #1f1245 0%, #160a32 100%);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(167, 139, 250, .15);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  transform: translateY(20px) scale(.92);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.4, .64, 1);
}
.lc-panel.open {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}

.lc-header {
  background: linear-gradient(160deg, var(--violet-2) 0%, var(--violet-deep) 60%, #5b21b6 100%);
  padding: 22px 22px 22px;
  position: relative;
  flex-shrink: 0;
}
.lc-header::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(236, 72, 153, .25), transparent 60%);
}
.lc-header > * { position: relative; }
.lc-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.lc-logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
}
.lc-x {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.18); border: none; cursor: pointer;
  color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.lc-x:hover { background: rgba(0,0,0,.32); transform: rotate(90deg); }

.lc-avatars { display: flex; margin-bottom: 12px; }
.lc-avatars .av {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: #fff;
  border: 2px solid #2a1d4a;
  margin-left: -8px;
}
.lc-avatars .av:first-child { margin-left: 0; }
.lc-avatars .av:nth-child(1) { background: #b3d340; color: #1f3300; }
.lc-avatars .av:nth-child(2) { background: #4a8a99; }
.lc-avatars .av:nth-child(3) { background: #7c3aed; }

.lc-greet {
  color: #fff; font-size: 1.35rem; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2;
}
.lc-greet small { display: block; font-size: 1.2rem; margin-bottom: 4px; font-weight: 700; }

.lc-body {
  flex: 1; overflow-y: auto;
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  background: #160a32;
}
.lc-input-row {
  background: #fff; border-radius: 999px;
  display: flex; align-items: center;
  padding: 4px 4px 4px 18px;
  position: relative; z-index: 2;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.lc-input-row input {
  flex: 1; border: none; background: transparent; outline: none;
  font-family: inherit; font-size: .95rem; color: #1f1410;
  padding: 10px 8px;
}
.lc-input-row input::placeholder { color: #8a7fb0; }
.lc-send {
  width: 36px; height: 36px; border-radius: 50%;
  background: #f0eaf9; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #5a4a8a; transition: background .15s, color .15s, transform .15s;
}
.lc-send:hover { background: var(--violet-2); color: #fff; transform: scale(1.08); }

.lc-chip {
  align-self: flex-start;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line-2);
  color: var(--text);
  padding: 8px 14px; border-radius: 999px;
  font-size: .88rem; font-weight: 500; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.lc-chip:hover { background: rgba(167, 139, 250, .15); border-color: var(--violet); }

.lc-card {
  background: linear-gradient(180deg, rgba(124, 58, 237, .14) 0%, rgba(26, 15, 51, .9) 100%);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: 18px;
  margin-top: 4px;
}
.lc-card-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(167, 139, 250, .15);
  color: var(--violet);
  font-size: .72rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  margin-bottom: 12px;
}
.lc-card h4 {
  font-size: 1.05rem; line-height: 1.3; margin-bottom: 10px;
  background: linear-gradient(180deg, #fff 0%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lc-card p { font-size: .85rem; color: var(--text-mute); margin: 0; }
.lc-card-tags {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px;
}
.lc-card-tags span {
  font-size: .7rem; color: var(--text-mute);
  padding: 3px 8px; border-radius: 6px;
  background: rgba(167, 139, 250, .08);
}

.lc-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #1a0f33;
  border-top: 1px solid var(--line);
  padding: 8px 8px 10px;
  flex-shrink: 0;
}
.lc-tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  color: var(--text-mute); font-family: inherit;
  padding: 8px 4px; border-radius: 12px;
  font-size: .72rem; font-weight: 500;
  transition: color .15s, background .15s;
}
.lc-tab:hover { color: var(--text-soft); }
.lc-tab.active { color: var(--text); background: rgba(167, 139, 250, .1); }
.lc-tab svg { opacity: .8; }
.lc-tab.active svg { opacity: 1; color: var(--violet); }

@media (max-width: 480px) {
  .lc-panel {
    right: 12px; left: 12px; bottom: 90px;
    width: auto; height: min(560px, calc(100vh - 120px));
  }
  .lc-launcher { right: 16px; bottom: 16px; }
}

/* ==================== Model Setup form ==================== */
.ms-actions { display: flex; gap: 10px; }
.ms-btn-ghost {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-soft);
  font-family: inherit;
  font-size: .85rem; font-weight: 600;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ms-btn-ghost:hover {
  background: rgba(167, 139, 250, .08);
  border-color: var(--violet);
  color: var(--text);
}
.ms-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--violet), #7c3aed);
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: .85rem; font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .4);
  transition: transform .15s, box-shadow .15s;
}
.ms-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(124, 58, 237, .55); }

.ms-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 22px;
  margin-top: 18px;
}
@media (max-width: 900px) { .ms-shell { grid-template-columns: 1fr; } }

.ms-side {
  position: sticky;
  top: 80px;
  align-self: start;
  display: flex; flex-direction: column;
  gap: 2px;
  background: linear-gradient(180deg, rgba(26, 30, 41, .8) 0%, rgba(20, 23, 32, .8) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
}
.ms-side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--text-soft);
  text-decoration: none;
  font-size: .88rem; font-weight: 500;
  transition: background .15s, color .15s, transform .15s;
}
.ms-side-link:hover { background: rgba(167, 139, 250, .06); color: var(--text); }
.ms-side-link.active {
  background: rgba(167, 139, 250, .14);
  color: var(--text);
  font-weight: 600;
}
.ms-side-emoji { font-size: 1rem; width: 22px; text-align: center; }

.ms-main { display: flex; flex-direction: column; gap: 18px; }
.ms-panel { display: none; flex-direction: column; gap: 18px; animation: fadeUp .35s ease-out; }
.ms-panel.active { display: flex; }

/* ─── Fansly Profile page ─────────────────────────────────────────────── */
/* Mini browser bar + Electron <webview>. The webview's partition is
   rebuilt per creator (persist:fansly-{creatorId}) so each model keeps
   its own logged-in Fansly session. Browser fallback when not Electron. */
.fp-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(26, 30, 41, .85) 0%, rgba(20, 23, 32, .85) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.fp-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
}
.fp-tb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  color: var(--text-soft);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease;
}
.fp-tb-btn:hover:not(:disabled) {
  background: rgba(124, 58, 237, .12);
  border-color: rgba(167, 139, 250, .3);
  color: #c4b5fd;
}
.fp-tb-btn:disabled { opacity: .35; cursor: default; }
.fp-url {
  flex: 1;
  font-size: .82rem;
  color: var(--text-soft);
  padding: 0 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.fp-model {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 4px 12px;
  background: rgba(124, 58, 237, .1);
  border: 1px solid rgba(167, 139, 250, .2);
  border-radius: 999px;
}
.fp-model:empty { display: none; }
.fp-slot {
  display: flex;
  min-height: 600px;
  height: calc(100vh - 220px);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06);
}
.fp-webview {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
}
.fp-empty {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .02);
  color: var(--text-mute);
  font-size: .9rem;
  text-align: center;
  padding: 40px 20px;
}
.fp-fallback {
  padding: 50px 30px;
  text-align: center;
  background: rgba(124, 58, 237, .06);
  border: 1px dashed rgba(167, 139, 250, .22);
  border-radius: 12px;
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.5;
}
.fp-fallback-title {
  font-size: 1rem; font-weight: 700;
  color: #f4f4ff;
  margin-bottom: 6px;
}
.fp-fallback a {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 16px;
  background: rgba(124, 58, 237, .15);
  border: 1px solid rgba(167, 139, 250, .35);
  border-radius: 10px;
  color: #c4b5fd;
  text-decoration: none;
  font-weight: 600;
  font-size: .82rem;
}
.fp-fallback a:hover {
  background: rgba(124, 58, 237, .25);
  color: #ddd6fe;
}

.ms-card {
  background: linear-gradient(180deg, rgba(26, 30, 41, .85) 0%, rgba(20, 23, 32, .85) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
}
.ms-card-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.ms-card-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(167, 139, 250, .18), rgba(124, 58, 237, .12));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.ms-card-head h3 { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.ms-card-head p { margin: 3px 0 0; font-size: .8rem; color: var(--text-mute); }
.ms-hint { font-size: .76rem; color: var(--text-mute); margin: 6px 0 0; }

.ms-grid { display: grid; gap: 14px; }
.ms-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ms-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .ms-grid-2, .ms-grid-3 { grid-template-columns: 1fr; } }

.ms-field { display: flex; flex-direction: column; gap: 6px; }
.ms-field > span {
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: .01em;
}
.ms-field-full { grid-column: 1 / -1; }

.ms-input, .ms-textarea {
  width: 100%;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .9rem;
  color: var(--text);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ms-input:hover, .ms-textarea:hover { border-color: rgba(167, 139, 250, .35); }
.ms-input:focus, .ms-textarea:focus {
  outline: none;
  border-color: var(--violet);
  background: rgba(167, 139, 250, .04);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .12);
}
.ms-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.ms-input-sm { max-width: 220px; }
select.ms-input {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.ms-input[type="color"] {
  width: 44px; height: 38px; padding: 3px;
  cursor: pointer;
}
.ms-color-input { display: flex; gap: 8px; align-items: stretch; }
.ms-color-input input[type="color"] {
  width: 44px; height: 38px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: rgba(0,0,0,.25);
  cursor: pointer;
  padding: 3px;
}

.ms-photo-upload { display: flex; align-items: center; gap: 18px; }
.ms-photo-circle {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(167, 139, 250, .14), rgba(124, 58, 237, .08));
  border: 1.5px dashed rgba(167, 139, 250, .35);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  color: var(--violet);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.ms-photo-circle:hover {
  border-color: var(--violet);
  background: linear-gradient(135deg, rgba(167, 139, 250, .2), rgba(124, 58, 237, .12));
  transform: scale(1.02);
}

/* Tag input */
.ms-tag-input {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  min-height: 42px;
  transition: border-color .15s;
}
.ms-tag-input:focus-within {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .12);
}
.ms-tag-input-stack { flex-direction: column; align-items: stretch; }
.ms-tag-input-stack .ms-tag { width: fit-content; }
.ms-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(167, 139, 250, .14);
  color: var(--text);
  font-size: .82rem; font-weight: 500;
  padding: 4px 4px 4px 10px;
  border-radius: 7px;
  border: 1px solid rgba(167, 139, 250, .2);
  animation: tagIn .25s ease-out;
}
@keyframes tagIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.ms-tag button {
  width: 18px; height: 18px;
  background: rgba(0, 0, 0, .25);
  border: none;
  color: var(--text-soft);
  border-radius: 5px;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.ms-tag button:hover { background: rgba(248, 113, 113, .35); color: #fff; }
.ms-tag-add {
  flex: 1; min-width: 120px;
  background: transparent; border: none;
  color: var(--text);
  font-family: inherit; font-size: .88rem;
  padding: 4px 6px;
  outline: none;
}
.ms-tag-add::placeholder { color: var(--text-mute); }

/* Personality chips */
.ms-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.ms-chip {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 14px 14px 44px;
  background: rgba(0, 0, 0, .2);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .15s;
}
.ms-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ms-chip::before {
  content: "";
  position: absolute;
  top: 14px; left: 14px;
  width: 18px; height: 18px;
  border-radius: 6px;
  border: 1.5px solid var(--line-2);
  background: rgba(0, 0, 0, .3);
  transition: background .15s, border-color .15s;
}
.ms-chip::after {
  content: "";
  position: absolute;
  top: 18px; left: 19px;
  width: 8px; height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform .15s cubic-bezier(.34, 1.4, .64, 1);
}
.ms-chip:hover { border-color: rgba(167, 139, 250, .3); background: rgba(167, 139, 250, .04); }
.ms-chip.active {
  background: linear-gradient(180deg, rgba(167, 139, 250, .12), rgba(124, 58, 237, .06));
  border-color: rgba(167, 139, 250, .35);
}
.ms-chip.active::before {
  background: linear-gradient(135deg, var(--violet), #7c3aed);
  border-color: var(--violet);
}
.ms-chip.active::after { transform: rotate(-45deg) scale(1); }
.ms-chip-emoji { font-size: 1.1rem; }
.ms-chip-name { font-size: .92rem; font-weight: 700; color: var(--text); letter-spacing: -.005em; }
.ms-chip-desc { font-size: .75rem; color: var(--text-mute); line-height: 1.4; }

/* Slider */
.ms-slider-row { padding: 14px 0; }
.ms-slider-row + .ms-slider-row { border-top: 1px solid rgba(255, 255, 255, .04); }
.ms-slider-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.ms-slider-head > span:first-child {
  font-size: .82rem; font-weight: 600; color: var(--text-soft);
}
.ms-slider-val {
  font-size: .9rem; font-weight: 700; color: var(--violet);
  font-variant-numeric: tabular-nums;
  background: rgba(167, 139, 250, .12);
  padding: 3px 10px;
  border-radius: 7px;
}
.ms-slider {
  width: 100%; height: 6px;
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, var(--violet) var(--p, 50%), rgba(255, 255, 255, .08) var(--p, 50%));
  border-radius: 4px;
  outline: none;
}
.ms-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), #7c3aed);
  cursor: grab;
  border: 3px solid #14171f;
  box-shadow: 0 0 0 1px var(--violet), 0 4px 12px rgba(124, 58, 237, .5);
  transition: transform .15s;
}
.ms-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.ms-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), #7c3aed);
  cursor: grab;
  border: 3px solid #14171f;
  box-shadow: 0 0 0 1px var(--violet), 0 4px 12px rgba(124, 58, 237, .5);
}
.ms-slider-axis {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-size: .68rem; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

/* Segmented control */
.ms-segment {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 4px;
}
.ms-segment button {
  background: transparent; border: none;
  color: var(--text-soft);
  font-family: inherit; font-size: .82rem; font-weight: 600;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ms-segment button:hover { color: var(--text); background: rgba(167, 139, 250, .06); }
.ms-segment button.active {
  background: linear-gradient(135deg, var(--violet), #7c3aed);
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .35);
}

/* Lists (symbols, songs, references) */
.ms-list { display: flex; flex-direction: column; gap: 8px; }
.ms-list-row {
  display: grid;
  grid-template-columns: 220px 1fr 32px;
  gap: 8px; align-items: center;
}
.ms-list-row-1 { grid-template-columns: 1fr 32px; }
.ms-list-narrow .ms-list-row { grid-template-columns: 1fr 32px; }
.ms-row-remove {
  width: 32px; height: 32px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--line-2);
  color: var(--text-mute);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.ms-row-remove:hover { background: rgba(248, 113, 113, .15); color: #f87171; border-color: rgba(248, 113, 113, .4); }

.ms-color-list { display: flex; flex-direction: column; gap: 8px; }
.ms-color-row {
  display: grid;
  grid-template-columns: 50px 200px 1fr 32px;
  gap: 8px; align-items: center;
}
.ms-color-row input[type="color"] {
  width: 100%; height: 38px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: rgba(0,0,0,.25);
  cursor: pointer;
  padding: 3px;
}

.ms-ref-list { display: flex; flex-direction: column; gap: 14px; }
.ms-ref-row {
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 10px;
  background: rgba(0, 0, 0, .15);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 14px;
}
.ms-ref-row > input,
.ms-ref-row > textarea { grid-column: 1; }
.ms-ref-row > .ms-row-remove { grid-column: 2; grid-row: 1 / -1; align-self: start; }

.ms-btn-add {
  margin-top: 12px;
  background: transparent;
  border: 1.5px dashed var(--line-2);
  color: var(--text-mute);
  font-family: inherit; font-size: .82rem; font-weight: 600;
  padding: 9px 14px;
  border-radius: 9px;
  cursor: pointer;
  width: 100%;
  transition: border-color .15s, color .15s, background .15s;
}
.ms-btn-add:hover {
  border-color: var(--violet);
  color: var(--violet);
  background: rgba(167, 139, 250, .04);
}

/* Rules columns */
.ms-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .ms-rules { grid-template-columns: 1fr; } }
.ms-rule-col { display: flex; flex-direction: column; gap: 8px; }
.ms-rule-head {
  font-size: .72rem; font-weight: 800;
  letter-spacing: .12em;
  padding: 8px 12px;
  border-radius: 8px;
}
.ms-rule-always { background: rgba(34, 197, 94, .14); color: #4ade80; border: 1px solid rgba(34, 197, 94, .25); }
.ms-rule-often { background: rgba(167, 139, 250, .14); color: #c4b5fd; border: 1px solid rgba(167, 139, 250, .25); }
.ms-rule-never { background: rgba(248, 113, 113, .14); color: #f87171; border: 1px solid rgba(248, 113, 113, .3); }

/* ==================== Privacy / censorship toggle ==================== */
.censor-btn { position: relative; overflow: hidden; }
.censor-btn .censor-ic-eye,
.censor-btn .censor-ic-eye-off {
  transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), opacity .25s ease;
}
.censor-btn .censor-ic-eye-off {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transform: scale(.5) rotate(-15deg);
}
body.app-body.censored .censor-btn .censor-ic-eye {
  opacity: 0;
  transform: scale(.5) rotate(15deg);
}
body.app-body.censored .censor-btn .censor-ic-eye-off {
  opacity: 1;
  transform: scale(1) rotate(0);
}
body.app-body.censored .censor-btn {
  background: rgba(124, 58, 237, .18);
  border-color: rgba(124, 58, 237, .4);
  color: var(--violet);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .08);
}

/* === Censor mode: blur sensitive content (hover to reveal) ===
   `!important` is intentional — these are user-controlled privacy overrides
   that must beat any per-component filter (e.g. the active model card has its
   own brightness/saturation filter that would otherwise win on specificity). */
body.app-body.censored .creator-av,
body.app-body.censored .creator-av.has-photo,
body.app-body.censored .creator.active .creator-av.has-photo,
body.app-body.censored .creator-strip .creator-av,
body.app-body.censored .recent-fan-av,
body.app-body.censored .fan-av,
body.app-body.censored .user-chip-letter,
body.app-body.censored .notif-avatar,
body.app-body.censored .ms-photo-circle,
body.app-body.censored .agency-models-avatars .av,
body.app-body.censored .agency-models-item .av,
body.app-body.censored .agency-models-av,
body.app-body.censored .payouts-av,
body.app-body.censored .creators-row .cell-account .av,
body.app-body.censored .msg-conv-avatar,
body.app-body.censored .model-toast-av,
body.app-body.censored .user-chip {
  filter: blur(8px) saturate(.85) !important;
  clip-path: circle(50%);
  transition: filter .25s ease;
  will-change: filter;
}
/* Colored ring around sidebar model avatars when blurred — so users
   can still tell models apart by ring color even when the photo is
   hidden. The --av-color custom property is set inline per model in
   loadModels() based on a hash of the creator_id, so it's stable.
   !important here beats the .app.collapsed override that resets
   box-shadow on the active avatar. */
body.app-body.censored #fcModelList .creator .creator-av {
  box-shadow:
    0 0 0 3px var(--av-color, #a78bfa),
    0 0 0 5px rgba(0, 0, 0, .55) !important;
}
body.app-body.censored.app .creator.active .creator-av,
body.app-body.censored #fcModelList .creator.active .creator-av {
  box-shadow:
    0 0 0 3px var(--av-color, #c4b5fd),
    0 0 0 6px rgba(255, 255, 255, .25),
    0 0 0 8px rgba(167, 139, 250, .35) !important;
}
/* Hover-reveal: pass the cursor over a blurred avatar (e.g. on the
   collapsed sidebar where model names aren't visible) to temporarily
   un-blur it so the user can identify which model is which.
   The `.creator.active .creator-av.has-photo` blur selector has 4
   classes of specificity, so the hover rule for the active model has
   to match that specificity to override it. */
body.app-body.censored .creator-av:hover,
body.app-body.censored .creator-av.has-photo:hover,
body.app-body.censored .creator.active .creator-av:hover,
body.app-body.censored .creator.active .creator-av.has-photo:hover,
body.app-body.censored .creator-strip .creator-av:hover,
body.app-body.censored .recent-fan-av:hover,
body.app-body.censored .fan-av:hover,
body.app-body.censored .agency-models-avatars .av:hover,
body.app-body.censored .agency-models-item .av:hover,
body.app-body.censored .agency-models-av:hover,
body.app-body.censored .payouts-av:hover,
body.app-body.censored .creators-row .cell-account .av:hover,
body.app-body.censored .msg-conv-avatar:hover,
body.app-body.censored .model-toast-av:hover {
  filter: none !important;
}
/* Brief delay before revealing so accidental cursor flyovers don't
   flash every avatar. */
body.app-body.censored .creator-av { transition: filter .12s ease .25s; }
body.app-body.censored .bulk-thumb,
body.app-body.censored .vault-item,
body.app-body.censored .vault-thumb,
body.app-body.censored .vault-card-cover,
body.app-body.censored .vault-card-cover img,
body.app-body.censored .vault-card-cover video,
body.app-body.censored .msg-media-block img,
body.app-body.censored .msg-media-block video,
body.app-body.censored img,
body.app-body.censored video,
body.app-body.censored webview,
body.app-body.censored #fanslyWebview {
  filter: blur(10px) saturate(.85);
  clip-path: inset(0 round 12px);
  transition: filter .3s ease;
  will-change: filter;
}

/* Hover (or focus) on the avatar/photo itself reveals it instantly */
body.app-body.censored .creator-av:hover,
body.app-body.censored .creator-strip .creator-av:hover,
body.app-body.censored .recent-fan-av:hover,
body.app-body.censored .fan-av:hover,
body.app-body.censored .user-chip-letter:hover,
body.app-body.censored .notif-avatar:hover,
body.app-body.censored .ms-photo-circle:hover,
body.app-body.censored .bulk-thumb:hover,
body.app-body.censored .vault-item:hover .vault-thumb,
body.app-body.censored .vault-card:hover .vault-card-cover,
body.app-body.censored .vault-card:hover .vault-card-cover img,
body.app-body.censored .vault-card:hover .vault-card-cover video,
body.app-body.censored .msg-media-block:hover img,
body.app-body.censored .msg-media-block:hover video,
body.app-body.censored img:hover,
body.app-body.censored video:hover,
body.app-body.censored webview:hover {
  filter: blur(0);
}

/* Hover the parent row also reveals (so you can see avatar + name together when reading a row) */
body.app-body.censored .creator:hover .creator-av,
body.app-body.censored .recent-fan:hover .recent-fan-av,
body.app-body.censored .notif-item:hover .notif-avatar { filter: blur(0); }

/* (Text is intentionally NOT blurred — only visual media gets blurred) */

/* Subtle "privacy active" indicator strip at top */
body.app-body.censored::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .55), transparent);
  z-index: 1000;
  pointer-events: none;
  animation: privacyShimmer 3s ease-in-out infinite;
}
@keyframes privacyShimmer {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}

/* ==================== Theme toggle ==================== */
.theme-btn { position: relative; overflow: hidden; }
.theme-btn .theme-ic-sun,
.theme-btn .theme-ic-moon {
  transition: transform .45s cubic-bezier(.34, 1.4, .64, 1), opacity .25s ease;
}
.theme-btn .theme-ic-moon {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transform: rotate(-90deg) scale(.5);
}
.theme-btn .theme-ic-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}
body.app-body.light-theme .theme-btn .theme-ic-sun {
  opacity: 0;
  transform: rotate(90deg) scale(.5);
}
body.app-body.light-theme .theme-btn .theme-ic-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* ==================== Light theme — refined elegant ==================== */
body.app-body.light-theme {
  /* Apple-inspired off-white palette + warm violet accent */
  --bg: #f5f5f7;
  --text: #1d1d1f;
  --text-soft: #424245;
  --text-mute: #86868b;
  --line: #e5e5ea;
  --line-2: #d2d2d7;
  --violet: #7c3aed;
  --pink: #ec4899;
  background: #f5f5f7 !important;
  background-image:
    radial-gradient(60% 60% at 8% 0%, rgba(167, 139, 250, .06), transparent 70%),
    radial-gradient(50% 50% at 100% 100%, rgba(236, 72, 153, .04), transparent 70%) !important;
  background-attachment: fixed !important;
  color: var(--text);
}
body.app-body.light-theme .app { background: transparent; }

/* Sidebars — clean white with very subtle separation */
body.app-body.light-theme .side-1 {
  background: rgba(255, 255, 255, .85);
  border-right: 1px solid #e7e7ec;
  backdrop-filter: blur(20px);
}
body.app-body.light-theme .side-2 {
  background: rgba(252, 252, 254, .8);
  border-right: 1px solid #e7e7ec;
  backdrop-filter: blur(20px);
}
body.app-body.light-theme .dash-top {
  background: linear-gradient(180deg, rgba(245, 245, 247, .92) 70%, rgba(245, 245, 247, 0));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, .04);
}

/* Cards — soft shadow depth, no flat borders */
body.app-body.light-theme .kpi,
body.app-body.light-theme .panel,
body.app-body.light-theme .stat-card,
body.app-body.light-theme .feature {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, .04);
  box-shadow:
    0 1px 2px rgba(15, 22, 45, .04),
    0 4px 12px rgba(15, 22, 45, .04);
}
body.app-body.light-theme .kpi:hover,
body.app-body.light-theme .panel:hover,
body.app-body.light-theme .feature:hover {
  border-color: rgba(124, 58, 237, .25);
  box-shadow:
    0 1px 2px rgba(124, 58, 237, .06),
    0 8px 22px rgba(15, 22, 45, .07);
}

/* Inner cells: Audience grid, Spenders, etc — subtle inset */
body.app-body.light-theme .a-cell,
body.app-body.light-theme .spender,
body.app-body.light-theme .country-card,
body.app-body.light-theme .tier-card {
  background: #f9f9fb;
  border: 1px solid #ececf0;
  color: var(--text);
}
body.app-body.light-theme .a-cell:hover,
body.app-body.light-theme .country-card:hover,
body.app-body.light-theme .tier-card:hover {
  background: #ffffff;
  border-color: rgba(124, 58, 237, .25);
  box-shadow: 0 4px 12px rgba(124, 58, 237, .08);
}
body.app-body.light-theme .a-cell .label { color: var(--text-mute); }
body.app-body.light-theme .a-cell .num { color: var(--text); }
body.app-body.light-theme .a-cell-ico {
  background: rgba(124, 58, 237, .08);
  color: var(--violet);
}
body.app-body.light-theme .age-bar,
body.app-body.light-theme .country-bar,
body.app-body.light-theme .tier-bar,
body.app-body.light-theme .onboard-progress { background: #ececf0; }

/* Model Setup */
body.app-body.light-theme .ms-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, .04);
  box-shadow:
    0 1px 2px rgba(15, 22, 45, .03),
    0 4px 12px rgba(15, 22, 45, .04);
}
body.app-body.light-theme .ms-side {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, .04);
  box-shadow: 0 1px 3px rgba(15, 22, 45, .03);
}
body.app-body.light-theme .ms-card-head { border-bottom-color: rgba(0, 0, 0, .05); }
body.app-body.light-theme .ms-card-icon {
  background: linear-gradient(135deg, rgba(124, 58, 237, .1), rgba(124, 58, 237, .04));
}

/* Agency card / creator pill — subtle distinction */
body.app-body.light-theme .agency-card,
body.app-body.light-theme .creator-pill {
  background: #f9f9fb;
  border: 1px solid #ececf0;
}

/* Side nav links */
body.app-body.light-theme .side-link { color: var(--text-soft); }
body.app-body.light-theme .side-link:hover {
  background: rgba(124, 58, 237, .06);
  color: var(--text);
}
body.app-body.light-theme .side-link.active {
  background: rgba(124, 58, 237, .1);
  color: var(--text);
}
body.app-body.light-theme .ms-side-link { color: var(--text-soft); }
body.app-body.light-theme .ms-side-link:hover {
  background: rgba(124, 58, 237, .05);
  color: var(--text);
}
body.app-body.light-theme .ms-side-link.active {
  background: rgba(124, 58, 237, .1);
  color: var(--text);
}
body.app-body.light-theme .side-divider {
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .22), transparent);
}

/* Form inputs */
body.app-body.light-theme .ms-input,
body.app-body.light-theme .ms-textarea,
body.app-body.light-theme .ms-tag-input {
  background: #ffffff;
  border: 1px solid #d2d2d7;
  color: var(--text);
}
body.app-body.light-theme .ms-input:hover,
body.app-body.light-theme .ms-textarea:hover {
  border-color: rgba(124, 58, 237, .35);
}
body.app-body.light-theme .ms-input:focus,
body.app-body.light-theme .ms-textarea:focus {
  background: #ffffff;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}
body.app-body.light-theme .ms-input::placeholder,
body.app-body.light-theme .ms-textarea::placeholder,
body.app-body.light-theme .ms-tag-add::placeholder { color: #a1a1a8; }
body.app-body.light-theme .ms-tag {
  background: rgba(124, 58, 237, .08);
  border: 1px solid rgba(124, 58, 237, .18);
  color: var(--text);
}
body.app-body.light-theme .ms-tag button {
  background: rgba(0, 0, 0, .06);
  color: var(--text-soft);
}
body.app-body.light-theme .ms-tag button:hover { background: rgba(248, 113, 113, .35); color: #fff; }
body.app-body.light-theme .ms-segment {
  background: #f9f9fb;
  border: 1px solid #ececf0;
}
body.app-body.light-theme .ms-segment button { color: var(--text-soft); }
body.app-body.light-theme .ms-segment button:hover { background: rgba(124, 58, 237, .06); color: var(--text); }
body.app-body.light-theme .ms-chip {
  background: #ffffff;
  border: 1px solid #ececf0;
}
body.app-body.light-theme .ms-chip:hover {
  background: #fafafc;
  border-color: rgba(124, 58, 237, .25);
}
body.app-body.light-theme .ms-chip.active {
  background: linear-gradient(180deg, rgba(124, 58, 237, .07), rgba(124, 58, 237, .02));
  border-color: rgba(124, 58, 237, .3);
  box-shadow: 0 4px 12px rgba(124, 58, 237, .08);
}
body.app-body.light-theme .ms-chip::before {
  background: #ffffff;
  border: 1.5px solid #d2d2d7;
}
body.app-body.light-theme .ms-chip-name { color: var(--text); }
body.app-body.light-theme .ms-chip-desc { color: var(--text-mute); }
body.app-body.light-theme .ms-row-remove {
  background: #f9f9fb;
  border: 1px solid #ececf0;
  color: var(--text-mute);
}
body.app-body.light-theme .ms-btn-add {
  border: 1.5px dashed #d2d2d7;
  color: var(--text-mute);
}
body.app-body.light-theme .ms-btn-add:hover {
  border-color: var(--violet);
  color: var(--violet);
  background: rgba(124, 58, 237, .03);
}
body.app-body.light-theme .ms-slider-row + .ms-slider-row { border-top-color: rgba(0, 0, 0, .05); }
body.app-body.light-theme .ms-slider {
  background: linear-gradient(90deg, var(--violet) var(--p, 50%), #ececf0 var(--p, 50%));
}
body.app-body.light-theme .ms-slider::-webkit-slider-thumb {
  border-color: #ffffff;
}
body.app-body.light-theme .ms-slider::-moz-range-thumb {
  border-color: #ffffff;
}
body.app-body.light-theme .ms-ref-row {
  background: #f9f9fb;
  border: 1px solid #ececf0;
}

/* Top bar pills */
body.app-body.light-theme .icon-btn,
body.app-body.light-theme .funds-pill {
  background: #ffffff;
  border: 1px solid #ececf0;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 22, 45, .04);
}
body.app-body.light-theme .icon-btn:hover {
  background: #fafafc;
  border-color: rgba(124, 58, 237, .25);
}
body.app-body.light-theme .user-chip {
  background: #ffffff;
  border: 1px solid #ececf0;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 22, 45, .04);
}
body.app-body.light-theme .balance-card {
  background: #ffffff;
  border: 1px solid #ececf0;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 22, 45, .04);
}

/* Funds pill divider line */
body.app-body.light-theme .funds-divider { background: #ececf0; }

/* Buttons */
body.app-body.light-theme .ms-btn-ghost {
  background: #ffffff;
  border: 1px solid #d2d2d7;
  color: var(--text-soft);
  box-shadow: 0 1px 2px rgba(15, 22, 45, .03);
}
body.app-body.light-theme .ms-btn-ghost:hover {
  background: #fafafc;
  border-color: rgba(124, 58, 237, .35);
  color: var(--text);
}

/* Popups: account, notifications, creator menus */
body.app-body.light-theme .account-popup,
body.app-body.light-theme .creator-menu {
  background: rgba(255, 255, 255, .98);
  border: 1px solid #ececf0;
  box-shadow:
    0 30px 60px rgba(15, 22, 45, .15),
    0 4px 12px rgba(15, 22, 45, .05);
  color: var(--text);
}
body.app-body.light-theme .notif-popup {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(167, 139, 250, .08), transparent 60%),
    linear-gradient(180deg, #ffffff, #fafafc);
  border: 1px solid #ececf0;
  box-shadow:
    0 30px 70px rgba(15, 22, 45, .15),
    0 4px 16px rgba(124, 58, 237, .06);
}
body.app-body.light-theme .notif-item-title,
body.app-body.light-theme .notif-popup-title,
body.app-body.light-theme .account-popup-header { color: var(--text); }
body.app-body.light-theme .notif-popup-sub,
body.app-body.light-theme .notif-item-meta,
body.app-body.light-theme .notif-item-time { color: var(--text-mute); }
body.app-body.light-theme .account-popup-item { color: var(--text-soft); }
body.app-body.light-theme .account-popup-item:hover {
  background: rgba(124, 58, 237, .06);
  color: var(--text);
}
body.app-body.light-theme .notif-item:hover { background: rgba(124, 58, 237, .05); }
body.app-body.light-theme .notif-popup-clear {
  background: rgba(124, 58, 237, .06);
  border-color: rgba(124, 58, 237, .14);
  color: var(--text-soft);
}
body.app-body.light-theme .notif-popup-clear:hover {
  background: rgba(124, 58, 237, .12);
  color: var(--text);
}
body.app-body.light-theme .notif-popup-tabs { border-bottom-color: rgba(0, 0, 0, .05); }
body.app-body.light-theme .notif-popup-foot {
  border-top-color: rgba(0, 0, 0, .05);
  background: #fafafc;
}
body.app-body.light-theme .notif-popup-foot:hover { background: rgba(124, 58, 237, .04); }
body.app-body.light-theme .notif-tab { color: var(--text-mute); }
body.app-body.light-theme .notif-tab:hover { background: rgba(0, 0, 0, .03); color: var(--text-soft); }
body.app-body.light-theme .notif-tab.active {
  background: rgba(124, 58, 237, .1);
  color: var(--text);
}
body.app-body.light-theme .notif-tab-pill { background: rgba(124, 58, 237, .18); color: var(--text); }
body.app-body.light-theme .notif-section-label { color: var(--text-mute); }
body.app-body.light-theme .notif-avatar-badge { border-color: #ffffff; }
body.app-body.light-theme .notif-amount-pill {
  background: linear-gradient(135deg, rgba(34, 197, 94, .14), rgba(16, 185, 129, .08));
  color: #16a34a;
}
body.app-body.light-theme .notif-stat-good { color: #16a34a; }

/* Headings & helper text */
body.app-body.light-theme .welcome-row h2,
body.app-body.light-theme .dash-title h1,
body.app-body.light-theme .ms-card-head h3,
body.app-body.light-theme .panel h3,
body.app-body.light-theme .stat-card h3 { color: var(--text); }
body.app-body.light-theme .welcome-row .sub,
body.app-body.light-theme .ms-card-head p,
body.app-body.light-theme .ms-hint,
body.app-body.light-theme .section-eyebrow { color: var(--text-mute); }
body.app-body.light-theme .creator-name strong {
  background: linear-gradient(135deg, #1d1d1f 0%, #7c3aed 60%, #d946ef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
body.app-body.light-theme .creator-name span { color: var(--text-mute); }
body.app-body.light-theme .brand-name { color: var(--text); }
body.app-body.light-theme .side-label { color: var(--text-mute); }
body.app-body.light-theme .ms-field > span { color: var(--text-soft); }

/* Sub-tabs */
body.app-body.light-theme .range-tabs,
body.app-body.light-theme .fyp-tabs,
body.app-body.light-theme .chart-tabs {
  background: #ffffff;
  border: 1px solid #ececf0;
  box-shadow: 0 1px 2px rgba(15, 22, 45, .03);
}
body.app-body.light-theme .range-tabs button,
body.app-body.light-theme .fyp-tab { color: var(--text-soft); }
body.app-body.light-theme .range-tabs button:hover,
body.app-body.light-theme .fyp-tab:hover { background: rgba(124, 58, 237, .06); color: var(--text); }

/* FAQs / details / onboard */
body.app-body.light-theme details,
body.app-body.light-theme .faq-item {
  background: #ffffff;
  border: 1px solid #ececf0;
  box-shadow: 0 1px 2px rgba(15, 22, 45, .03);
}
body.app-body.light-theme .onboard {
  background: linear-gradient(180deg, #ffffff, #fafafc);
  border: 1px solid #ececf0;
}

/* Photo upload dashed */
body.app-body.light-theme .ms-photo-circle {
  background: linear-gradient(135deg, rgba(124, 58, 237, .06), rgba(124, 58, 237, .02));
  border-color: rgba(124, 58, 237, .35);
  color: var(--violet);
}

/* Skeleton — soft violet wash on light */
body.app-body.light-theme .is-loading::after {
  background:
    linear-gradient(110deg,
      transparent 30%,
      rgba(124, 58, 237, .14) 50%,
      transparent 70%) 0 0 / 220% 100% no-repeat,
    rgba(124, 58, 237, .03);
}

/* Live chat launcher */
body.app-body.light-theme .lc-panel {
  background: #ffffff;
  border: 1px solid #ececf0;
  box-shadow: 0 30px 60px rgba(15, 22, 45, .15);
}
body.app-body.light-theme .lc-input-row + .lc-chip,
body.app-body.light-theme .lc-chip {
  background: #f9f9fb;
  border: 1px solid #ececf0;
  color: var(--text-soft);
}

/* Scrollbar */
body.app-body.light-theme ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .12);
}
body.app-body.light-theme ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, .2);
}

/* Smooth theme switch transition */
body.app-body, body.app-body * {
  transition: background-color .35s ease, border-color .35s ease, color .25s ease, box-shadow .35s ease;
}
body.app-body svg, body.app-body img, body.app-body video, body.app-body .ms-photo-circle { transition: none; }

/* ── "All Models" pseudo-card ──────────────────────────────────────────────
   Prepended to #fcModelList so users can opt into aggregate revenue across
   every connected model. Visually mirrors a regular .creator card but with
   a violet gradient avatar, no menu, and a "N connected" sub-label. */
.creator.creator-all { cursor: pointer; }
.creator.creator-all .creator-av.all-av {
  background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%) !important;
  background-image: none !important;
  color: #fff;
  display: grid; place-items: center;
}
.creator.creator-all .creator-av.all-av svg { color: #fff; }
.creator.creator-all .creator-name span {
  color: var(--text-mute);
  font-size: 0.75rem;
}
.creator.creator-all.active {
  background: rgba(167, 139, 250, .14);
}
.creator.creator-all.active .creator-av.all-av {
  box-shadow: 0 0 0 2px rgba(167, 139, 250, .35);
}
.creator.creator-all .creator-actions { display: none; }

/* ============================================================================
   MOBILE PWA REDESIGN
   ----------------------------------------------------------------------------
   All rules below apply ONLY at ≤760px so desktop stays untouched. Rules use
   the existing :has() selector to drive an Inbox drill-in pattern without
   needing new JS state. Tab-bar markup lives in dashboard.html.
   ========================================================================= */

/* Desktop default: hide the bottom tab bar (markup is always present). */
.mobile-tabbar { display: none; }

@media (max-width: 760px) {

  /* ── Side-2 drawer legibility ────────────────────────────────────────
     The base .side-link uses --text-soft + 0.7 svg opacity, which washes
     out against backdrop-blur in iOS PWA standalone mode. We also lose
     a specificity fight against `body.app-body.light-theme .side-link`,
     which is why our first attempt at this fix didn't visibly land.
     The block below uses literal colors (not CSS vars) so the drawer
     stays readable regardless of which theme is active, and bodyscopes
     each selector to win the cascade. */

  /* iOS PWA renders the .dash-backdrop's backdrop-filter: blur(4px) over
     the drawer's stacking context, so everything inside the drawer reads
     as soft-focus. Drop the blur on mobile — the rgba(0,0,0,.75)
     darkening is enough to communicate "tap-outside to close" without
     making the drawer contents themselves look blurry. */
  body.app-body .dash-backdrop,
  body.app-body.light-theme .dash-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.app-body .side-2,
  body.app-body.light-theme .side-2 {
    background: #0a0418 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: 1px solid rgba(167, 139, 250, .18) !important;
    /* Force a fresh stacking context + GPU layer so the backdrop's
       filter chain (or any neighbor's filter) can't leak in. */
    isolation: isolate;
    will-change: transform;
  }
  body.app-body .side-2 .side-link,
  body.app-body.light-theme .side-2 .side-link {
    color: #f5f1ff !important;
    font-size: 0.96rem;
    padding: 12px 14px;
    background: transparent;
  }
  body.app-body .side-2 .side-link svg,
  body.app-body.light-theme .side-2 .side-link svg {
    opacity: 1 !important;
    color: #f5f1ff !important;
    width: 20px;
    height: 20px;
  }
  body.app-body .side-2 .side-link:hover,
  body.app-body.light-theme .side-2 .side-link:hover {
    background: rgba(167, 139, 250, .10) !important;
    color: #ffffff !important;
  }
  body.app-body .side-2 .side-link.active,
  body.app-body.light-theme .side-2 .side-link.active {
    background: rgba(167, 139, 250, .20) !important;
    color: #ffffff !important;
  }
  body.app-body .side-2 .side-link.active svg,
  body.app-body.light-theme .side-2 .side-link.active svg {
    color: #c4b5fd !important;
  }
  body.app-body .side-2 .side-label,
  body.app-body.light-theme .side-2 .side-label {
    color: rgba(245, 241, 255, .55) !important;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  body.app-body .side-2 .side-divider,
  body.app-body.light-theme .side-2 .side-divider {
    background: rgba(167, 139, 250, .12) !important;
  }

  /* ── Bottom tab bar ──────────────────────────────────────────────────── */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    background: rgba(10, 4, 24, 0.92);
    border-top: 1px solid var(--line-2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-tabbar .mtb-tab {
    position: relative;
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    padding: 8px 4px 6px;
    background: transparent;
    border: none;
    color: var(--text-mute);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s, transform .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-tabbar .mtb-tab svg {
    width: 22px; height: 22px;
    flex-shrink: 0;
  }
  .mobile-tabbar .mtb-tab.active { color: var(--violet); }
  .mobile-tabbar .mtb-tab.active svg {
    filter: drop-shadow(0 0 6px rgba(167, 139, 250, .5));
  }
  .mobile-tabbar .mtb-tab:active { transform: scale(0.94); }
  .mobile-tabbar .mtb-badge {
    position: absolute;
    top: 4px; right: 28%;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ec4899, #be185d);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    display: grid; place-items: center;
    line-height: 1;
  }

  /* Push dashboard content above the tab bar — height of bar ~58px plus
     safe-area. Use !important to override the existing 12px mobile padding. */
  .dash {
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }

  /* ── Mobile Inbox: drill-in ─────────────────────────────────────────── */
  /* The .msg-shell already collapses to grid-template-columns: 1fr at this
     breakpoint (see line ~9132). We layer on top: show ONLY one pane at a
     time using :has() detection of an open .msg-thread. */
  .msg-shell {
    height: calc(100vh - 64px - env(safe-area-inset-bottom));
    min-height: 0;
    gap: 0 !important;
  }

  /* Default: no open thread → list view full-width */
  .msg-shell:not(:has(.msg-thread)) .msg-sidebar {
    display: flex; flex-direction: column;
    width: 100%; max-width: 100%;
    border-right: none;
    border-bottom: none;
  }
  .msg-shell:not(:has(.msg-thread)) .msg-main { display: none; }

  /* Thread open → list hidden, thread takes the whole shell */
  .msg-shell:has(.msg-thread) .msg-sidebar { display: none; }
  .msg-shell:has(.msg-thread) .msg-main {
    display: flex;
    width: 100%;
  }

  /* While a thread is open, hide the bottom tab bar so the sticky composer
     can sit flush against the bottom (more screen for messages). */
  body:has(.page-messages.active .msg-thread) .mobile-tabbar {
    display: none;
  }
  /* And remove the tab-bar-sized padding under the dash so the thread
     truly fills the viewport in that mode. */
  body:has(.page-messages.active .msg-thread) .dash {
    padding-bottom: 0 !important;
  }

  /* ── Mobile-friendly conversation rows ─────────────────────────────── */
  .msg-conv-list {
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .msg-conv-item {
    padding: 10px 14px !important;
    min-height: 60px;
  }
  .msg-conv-avatar { width: 44px; height: 44px; }
  .msg-conv-name { font-size: .95rem; }
  .msg-conv-snippet { font-size: .82rem; }

  /* ── Sticky composer + scrolling thread ──────────────────────────── */
  .msg-thread {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .msg-thread-head {
    flex-shrink: 0;
    position: sticky; top: 0;
    z-index: 4;
    background: rgba(10, 4, 24, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .msg-thread-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  .msg-composer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    padding: 10px 12px;
    padding-bottom: max(env(safe-area-inset-bottom), 10px);
    background: rgba(14, 6, 30, 0.98);
    border-top: 1px solid var(--line-2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 5;
  }

  /* Slightly bigger tap target for the back button on mobile */
  .msg-thread-back {
    width: 38px !important; height: 38px !important;
  }

  /* ── Fan profile as a bottom sheet ─────────────────────────────────── */
  .msg-profile {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: auto !important;
    width: 100% !important; max-width: 100% !important;
    max-height: 82vh;
    border-radius: 20px 20px 0 0;
    border-left: none !important;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 60;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -16px 48px rgba(0, 0, 0, .55);
  }
  .msg-shell .msg-profile.open {
    display: block !important;
    transform: translateY(0);
  }
  /* Grip handle at the top of the sheet so it reads as a bottom sheet */
  .msg-shell .msg-profile.open::before {
    content: '';
    position: sticky; top: 0; left: 0; right: 0;
    display: block;
    height: 22px;
    background:
      linear-gradient(180deg, rgba(10, 4, 24, .98) 0%, rgba(10, 4, 24, .98) 60%, transparent 100%);
    z-index: 1;
  }
  .msg-shell .msg-profile.open::after {
    content: '';
    position: absolute;
    top: 8px; left: 50%;
    width: 44px; height: 4px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .25);
    border-radius: 2px;
    z-index: 2;
    pointer-events: none;
  }
}