/* ─── Base / reset ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }

/* The HTML `hidden` attribute is `display: none`, but any later class rule
   with `display: flex|grid|block` wins on specificity — which shipped the
   modal open on page load. Lock it down. */
[hidden] { display: none !important; }

/* Historical outfit cards — when botpower has resolved an outfit_hash to its
   product list, we render a wider card with a category-flat product grid so
   the user can see exactly what the avatar was wearing at the snapshot. */
.outfits-grid li.outfit-historical {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.outfit-historical .outfit-head { display: flex; gap: 10px; align-items: center; }
.outfit-historical .outfit-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.outfit-historical .outfit-meta { flex: 1; min-width: 0; }
.outfit-historical .outfit-name { font-weight: 600; }
.outfit-historical .outfit-id { color: var(--muted); font-size: 12px; }
.outfit-historical .outfit-hash { color: var(--muted); font-size: 11px; margin-top: 2px; }
.outfit-historical .outfit-hash code { background: rgba(255,255,255,.04); padding: 1px 4px; border-radius: 3px; }
.outfit-historical .outfit-grid-items {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.outfit-historical .outfit-item {
  aspect-ratio: 1 / 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.outfit-historical .outfit-item img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.outfit-historical .outfit-more {
  align-self: center;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  grid-column: span 6;
}

/* Auto-refresh status card: drop-in container shown in Settings. */
.refresh-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.refresh-card .row .muted { color: var(--muted); }
textarea#f-cookie-import {
  width: 100%;
  min-width: 0;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  resize: vertical;
}
:root {
  --bg: #0e0e10;
  --panel: #17171a;
  --panel-2: #1d1d21;
  --border: #26262c;
  --text: #e6e6ea;
  --muted: #8c8c97;
  --accent: #e14b4b;        /* botpower-style red */
  --accent-2: #ff6b6b;
  --good: #43b581;
  --warn: #f7b955;
  --bad: #ed4245;
}
html, body { height: 100%; overflow-x: hidden; overflow-y: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
button { cursor: pointer; font: inherit; color: inherit; border: 0; background: transparent; }
input { font: inherit; }

/* ─── Layout ───────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; width: 100%; max-width: 100vw; overflow-x: hidden; }

.sidebar {
  background: #0a0a0c;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 18px 12px;
  position: sticky; top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.brand-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(225,75,75,.6);
}
.brand-text { font-weight: 700; font-size: 15px; letter-spacing: .3px; }
.brand-text span { color: var(--accent); }
.sidebar-close {
  display: none;
  margin-left: auto;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: 22px;
  line-height: 1;
}
.sidebar-close:hover { color: var(--text); border-color: #3a3a44; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; }
.nav-spacer { flex: 1 1 auto; min-height: 18px; }
.nav-item {
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nav-item:hover { background: var(--panel); color: var(--text); }
.nav-item.active { background: var(--panel); color: var(--text); }
.nav-soon {
  flex: 0 0 auto;
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #ffd2d2;
  background: rgba(225,75,75,.16);
  border: 1px solid rgba(225,75,75,.28);
  border-radius: 999px;
  padding: 4px 6px;
}

/* "VIP Music Bot" full row in cyan/blue — matches the music bot's
 * brand accent and signals "premium" without competing with the
 * gold Radar Bot row right below it. */
.nav-item-vip {
  color: #62d9ff;
}
.nav-item-vip:hover,
.nav-item-vip.active {
  background: linear-gradient(135deg, rgba(98,217,255,.14), rgba(98,217,255,.04));
  color: #a8ecff;
}

/* Remove the unused gold helper class so the inline gold doesn't
 * accidentally re-appear if the markup changes. */
.nav-gold { display: none; }

/* Premium gold treatment for the whole Radar Bot row. */
.nav-item-radar {
  color: #f4c542;
  background: linear-gradient(135deg, rgba(244,197,66,.07), rgba(244,197,66,.02));
}
.nav-item-radar:hover,
.nav-item-radar.active {
  background: linear-gradient(135deg, rgba(244,197,66,.16), rgba(244,197,66,.06));
  color: #ffe09a;
}
.nav-item-radar .nav-soon {
  color: #1a1303;
  background: linear-gradient(135deg, #ffd86a, #f4c542);
  border-color: rgba(244,197,66,.45);
  font-weight: 900;
}

/* "LIVE" pill on the Live Watch row — pulsing red dot like a news ticker. */
.nav-live-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #ffe5e5;
  background: rgba(225,75,75,.15);
  border: 1px solid rgba(225,75,75,.40);
  border-radius: 999px;
  padding: 3px 7px 3px 5px;
}
.nav-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4747;
  box-shadow: 0 0 0 0 rgba(255,71,71,.55);
  animation: nav-live-pulse 1.4s ease-out infinite;
}
@keyframes nav-live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(255,71,71,.65); }
  70%  { box-shadow: 0 0 0 8px rgba(255,71,71,0);   }
  100% { box-shadow: 0 0 0 0   rgba(255,71,71,0);   }
}
@media (prefers-reduced-motion: reduce) {
  .nav-live-dot { animation: none; }
}

/* "How to" tag on the Help nav item — small neutral pill. */
.nav-help-tag {
  flex: 0 0 auto;
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #d6dbe8;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 4px 7px;
  font-weight: 800;
}

/* ── Help / How-to view ─────────────────────────────────────────── */
.help-page {
  width: min(960px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 16px;
}
.help-guide {
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: clamp(18px, 3vw, 28px);
  background:
    radial-gradient(circle at 0% 0%, rgba(98,217,255,.08), transparent 40%),
    var(--panel);
}
.help-guide-head {
  margin-bottom: 18px;
}
.help-guide-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #bfe0ff;
  background: rgba(55,138,221,.16);
  border: 1px solid rgba(55,138,221,.36);
  border-radius: 999px;
  padding: 4px 9px;
  margin-bottom: 8px;
}
.help-guide-head h2 {
  margin: 4px 0 4px;
  color: #fff;
  font-size: clamp(20px, 3.6vw, 28px);
  letter-spacing: -.02em;
  line-height: 1.18;
}
.help-guide-head p { margin: 0; }

.help-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: help-step;
}
.help-step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
}
.help-step-num {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
  color: #06121a;
  background: linear-gradient(135deg, #62d9ff, #2faee5);
  box-shadow: 0 0 18px rgba(98,217,255,.30);
}
.help-step-body h3 {
  margin: 4px 0 6px;
  color: #fff;
  font-size: 16px;
  letter-spacing: -.01em;
}
.help-step-body p {
  margin: 0 0 10px;
  color: #d3d8e2;
  line-height: 1.6;
}
.help-step-body code {
  background: rgba(98,217,255,.10);
  border: 1px solid rgba(98,217,255,.20);
  color: #d8f1ff;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 12.5px;
  word-break: break-all;
}
.help-step-figure {
  margin: 10px 0 0;
  display: block;
}
.help-step-figure img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: #06070b;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.help-step-figure figcaption {
  margin-top: 8px;
  color: #9ca5b6;
  font-size: 12px;
  line-height: 1.5;
}

.help-cta-row {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.help-cta-row .pricing-cta {
  margin-top: 0;
  width: auto;
  min-width: 220px;
}
.help-cta-row p { margin: 0; }

/* Mobile (≤900px): stack the step number above the body so the
 * screenshot has full width to read. */
@media (max-width: 900px) {
  .help-step {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .help-step-num {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .help-cta-row .pricing-cta {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .help-step-figure img {
    max-width: 100%;
  }
}

.sidebar-footer { margin-top: auto; padding: 10px 4px 0; border-top: 1px solid var(--border); }
.user-auth-card {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.discord-login {
  width: 100%;
  background: #5865f2;
  color: #fff;
  border-radius: 9px;
  padding: 9px 10px;
  font-weight: 800;
}
.discord-login:hover { filter: brightness(1.08); }
.discord-login[hidden] { display: none !important; }
.discord-user {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
}
.discord-user[hidden] { display: none !important; }
.discord-user img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: #222;
}
.discord-user > div { min-width: 0; flex: 1; }
.discord-name {
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-pill {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 3px;
  color: #ffd2d2;
  background: rgba(225,75,75,.13);
  border: 1px solid rgba(225,75,75,.25);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.plan-pill.premium {
  color: #221506;
  background: linear-gradient(135deg, #ffd479, #f7b955);
  border-color: rgba(247,185,85,.55);
}
.discord-user button {
  color: var(--muted);
  font-size: 11px;
  padding: 0;
}
.discord-user button:hover { color: var(--text); }
.chain-status { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; padding-top: 10px; }
.chain-row { display: flex; align-items: center; gap: 8px; }
.chain-dot { width: 7px; height: 7px; border-radius: 50%; background: #444; }
.chain-dot.on { background: var(--good); box-shadow: 0 0 6px var(--good); }
.chain-dot.off { background: #444; }

/* ─── Main ─────────────────────────────────────────────────────────── */
.main { padding: 28px clamp(16px, 3vw, 36px); max-width: 1440px; width: 100%; min-width: 0; overflow-x: hidden; }
.view-header { text-align: center; margin-bottom: 24px; }
.view-header h1 { font-size: 34px; margin: 0 0 6px; letter-spacing: .3px; }
.view-header .sub { color: var(--muted); margin: 0; }

.soon-card {
  width: min(680px, 100%);
  margin: 0 auto;
  background:
    radial-gradient(circle at top left, rgba(225,75,75,.18), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(18px, 4vw, 30px);
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
}
.soon-card h2 { margin: 6px 0 8px; font-size: clamp(22px, 4vw, 30px); }
.soon-card p { margin: 0; color: var(--muted); line-height: 1.7; }
.soon-kicker {
  display: inline-flex;
  color: #ffd2d2;
  background: rgba(225,75,75,.14);
  border: 1px solid rgba(225,75,75,.28);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Pricing */
.pricing-page {
  width: min(1120px, 100%);
  margin: 0 auto;
}
.pricing-header h1 {
  font-size: clamp(32px, 6vw, 54px);
  letter-spacing: -.04em;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.pricing-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.06), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}
.pricing-card.featured {
  border-color: rgba(225,75,75,.62);
  box-shadow: 0 22px 72px rgba(225,75,75,.14);
}
.pricing-card.premium {
  border-color: rgba(247,185,85,.42);
}
.pricing-card.current-plan {
  border-color: rgba(67,181,129,.62);
  box-shadow: 0 22px 72px rgba(67,181,129,.10);
}
.pricing-card.current-plan::after {
  content: "Current";
  position: absolute;
  top: 14px;
  right: 14px;
  color: #bdf8d8;
  background: rgba(67,181,129,.14);
  border: 1px solid rgba(67,181,129,.34);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pricing-ribbon {
  align-self: flex-start;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pricing-ribbon.best {
  color: #221506;
  background: linear-gradient(135deg, #ffd479, #f7b955);
}
.pricing-plan {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.pricing-price {
  color: var(--text);
  font-size: clamp(30px, 5vw, 42px);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: .95;
}
.pricing-price span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}
.pricing-yearly {
  color: #ffd2d2;
  background: rgba(225,75,75,.12);
  border: 1px solid rgba(225,75,75,.22);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  align-self: flex-start;
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
  color: #c8c8cf;
  flex: 1;
}
.pricing-features li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.45;
}
.pricing-features li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 10px rgba(67,181,129,.45);
}
.pricing-features li.locked::before {
  background: var(--bad);
  box-shadow: 0 0 10px rgba(237,66,69,.38);
}
.pricing-features li.limited::before {
  background: var(--bad);
  box-shadow: 0 0 10px rgba(237,66,69,.38);
}
.pricing-features b {
  color: var(--text);
  white-space: nowrap;
}
.pricing-features li.limited b {
  color: var(--bad);
}
.pricing-cta {
  width: 100%;
  margin-top: auto;
  background: var(--accent);
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 850;
}
.pricing-cta:hover { filter: brightness(1.08); }
.pricing-cta:disabled {
  cursor: default;
  opacity: .68;
  filter: none;
}

/* Radar Bot prebook */
.radar-page {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 16px;
}
.radar-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 18px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(225,75,75,.32);
  border-radius: 26px;
  background:
    radial-gradient(circle at 12% 0%, rgba(225,75,75,.26), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(247,185,85,.18), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.014)),
    var(--panel);
  box-shadow: 0 26px 90px rgba(0,0,0,.30);
}
.radar-hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -45% 35%;
  height: 260px;
  background: radial-gradient(ellipse, rgba(225,75,75,.18), transparent 68%);
  pointer-events: none;
}
.radar-hero-copy,
.radar-preview-card {
  position: relative;
  z-index: 1;
}
.radar-hero h2 {
  max-width: 620px;
  margin: 10px 0 12px;
  color: #fff;
  /* Bigger but tighter line height + softer letter-spacing makes
   * the hook readable on both desktop and mobile. The system stack
   * pulls the cleanest UI font available on the device (San Francisco
   * on Apple, Segoe UI on Windows, Roboto on Android). */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3.6vw, 36px);
  line-height: 1.18;
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* "Catvu Radar Bot" header — premium gold treatment with a crown.
 * Uses a gold gradient text-clip so the title still looks crisp at
 * any size and renders correctly on dark backgrounds. */
.radar-brand-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.radar-brand-title .radar-brand-text {
  background: linear-gradient(135deg, #ffe28a 0%, #f4c542 45%, #d99c2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.radar-crown {
  font-size: .85em;
  filter: drop-shadow(0 0 8px rgba(244,197,66,.45));
}

/* Detective image — true-inline next to the headline, tiny and
 * transparent. WebP keeps the alpha channel so there's no black box
 * around it. Sized in `em` so it scales with the headline font. */
.radar-hook {
  display: block;
}
.radar-hook h2 {
  margin: 10px 0;
}
.radar-hook-img {
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  object-fit: contain;
  background: transparent;
  vertical-align: -0.35em;
  margin: 0 0.15em;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
@media (prefers-reduced-motion: no-preference) {
  .radar-hook-img {
    transition: transform .25s ease;
  }
  .radar-hero:hover .radar-hook-img {
    transform: rotate(-6deg) scale(1.06);
  }
}
.radar-hero p {
  max-width: 650px;
  margin: 0;
  color: #c3cad8;
  font-size: 15px;
  line-height: 1.7;
}
.radar-price-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 20px 0 16px;
}
.radar-price-line strong {
  color: #fff;
  font-size: clamp(38px, 8vw, 62px);
  line-height: .9;
  letter-spacing: -.06em;
}
.radar-price-line span {
  color: #aeb6c6;
  font-weight: 800;
}
.radar-price-line em {
  margin-left: 6px;
  color: #ffd8d8;
  background: rgba(225,75,75,.14);
  border: 1px solid rgba(225,75,75,.30);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.radar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.radar-actions .pricing-cta {
  width: auto;
  min-width: 190px;
  margin-top: 0;
}
.radar-preview-card {
  align-self: start;
  display: grid;
  grid-auto-rows: max-content;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(6,7,11,.68), rgba(6,7,11,.42)),
    rgba(0,0,0,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.radar-preview-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #f2f4f8;
  font-size: 13px;
}
.radar-preview-top span {
  color: #f5c26f;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.radar-alert {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}
.radar-alert b {
  display: block;
  color: #f3f5fa;
  font-size: 14px;
  margin-bottom: 3px;
}
.radar-alert small {
  color: #9ea7b8;
  line-height: 1.45;
}
.radar-dot {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: #61d394;
  box-shadow: 0 0 16px rgba(97,211,148,.55);
}
.radar-dot.outfit {
  background: #f7b955;
  box-shadow: 0 0 16px rgba(247,185,85,.55);
}
.radar-dot.follow {
  background: #e14b4b;
  box-shadow: 0 0 16px rgba(225,75,75,.55);
}
.radar-feature-panel,
.radar-bottom-cta {
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.055), transparent 34%),
    var(--panel);
  padding: clamp(18px, 3vw, 24px);
}
.radar-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.radar-panel-head h2,
.radar-bottom-cta h2 {
  margin: 0;
  color: #f5f6fa;
  font-size: clamp(22px, 4vw, 32px);
  letter-spacing: -.03em;
}
.radar-panel-head p,
.radar-bottom-cta p {
  margin: 6px 0 0;
  color: #9ca5b6;
  line-height: 1.6;
}
.radar-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.radar-feature-grid article {
  min-height: 120px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.028);
}
.radar-feature-grid b {
  display: block;
  color: #fff;
  margin-bottom: 8px;
}
.radar-feature-grid span {
  color: #9ea7b8;
  font-size: 13px;
  line-height: 1.55;
}
.radar-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.radar-bottom-cta .pricing-cta {
  width: min(300px, 100%);
  margin-top: 0;
  flex: 0 0 auto;
}

/* ── Radar landing-page additions (2026-05-23) ───────────────────────
 * Hero bullets, scarcity, value-stack, guarantee, FAQ, final CTA.
 * All scoped to `.radar-page` so they don't leak into other views. */
.radar-kicker {
  background: linear-gradient(135deg, rgba(247,185,85,.20), rgba(225,75,75,.18));
  border: 1px solid rgba(247,185,85,.35);
  color: #ffe4a8;
}
.radar-bullets {
  list-style: none;
  margin: 18px 0 6px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.radar-bullets li {
  position: relative;
  padding: 10px 12px 10px 38px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  color: #d6dbe8;
  line-height: 1.5;
  font-size: 14px;
}
.radar-bullets li::before {
  content: "✓";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #4ad991, #2faee5);
  color: #06151c;
  font-weight: 900;
  border-radius: 50%;
  font-size: 12px;
}
.radar-bullets b { color: #fff; }

.radar-trust-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: #9ca5b6;
  font-size: 12px;
}
.radar-trust-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ad991;
  box-shadow: 0 0 8px rgba(74,217,145,.6);
}

.radar-dot.pair {
  background: #b885ff;
  box-shadow: 0 0 16px rgba(184,133,255,.55);
}
.radar-dot.chat {
  background: #62d9ff;
  box-shadow: 0 0 16px rgba(98,217,255,.55);
}

/* Feature card upgrade — emoji + title + body. The original
 * `.radar-feature-grid article` rules still apply, this just layers
 * extras on top of articles that have the new `.radar-feature` class. */
.radar-feature {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.radar-feature-emoji {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 4px;
}

/* Use cases */
.radar-usecases {
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(circle at 80% 0%, rgba(184,133,255,.12), transparent 40%),
    var(--panel);
  padding: clamp(18px, 3vw, 26px);
}
.radar-usecase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.radar-usecase-grid article {
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.028);
}
.radar-usecase-grid h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: #fff;
  letter-spacing: -.01em;
}
.radar-usecase-grid p {
  margin: 0;
  color: #9ea7b8;
  font-size: 13px;
  line-height: 1.55;
}

/* Value stack */
.radar-stack {
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 100%, rgba(225,75,75,.10), transparent 40%),
    var(--panel);
  padding: clamp(18px, 3vw, 26px);
}
.radar-stack-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.radar-stack-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  color: #c8cedc;
  font-size: 14px;
  flex-wrap: wrap;
}
.radar-stack-row > span:last-child {
  color: #9ca5b6;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.radar-stack-row.radar-stack-total {
  margin-top: 6px;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: #fff;
  font-weight: 700;
}
.radar-stack-row.radar-stack-total > span:first-child {
  color: #aeb6c6;
  font-weight: 600;
}
.radar-stack-row.radar-stack-total > span:last-child {
  color: #ffb3b3;
  text-decoration: line-through;
  text-decoration-color: rgba(225,75,75,.75);
  text-decoration-thickness: 2px;
  font-weight: 800;
}
.radar-stack-row.radar-stack-pay {
  background: linear-gradient(135deg, rgba(225,75,75,.16), rgba(247,185,85,.10));
  border-color: rgba(225,75,75,.35);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}
.radar-stack-row.radar-stack-pay > span:last-child {
  color: #ffd1d1;
  font-size: 18px;
}
.radar-stack-note {
  margin: 12px 0 0;
  color: #9ca5b6;
  font-size: 12px;
  text-align: center;
}

/* Guarantee — full-width banner */
.radar-guarantee {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(74,217,145,.30);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 50%, rgba(74,217,145,.16), transparent 38%),
    var(--panel);
}
.radar-guarantee-num {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid rgba(74,217,145,.55);
  color: #4ad991;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -.04em;
  background: rgba(74,217,145,.08);
}
.radar-guarantee-body h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 22px;
  letter-spacing: -.02em;
}
.radar-guarantee-body p {
  margin: 0;
  color: #c3cad8;
  line-height: 1.6;
}

/* Scarcity card */
.radar-scarcity {
  display: grid;
  place-items: center;
}
.radar-scarcity-card {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(247,185,85,.32);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(247,185,85,.16), transparent 60%),
    var(--panel);
  text-align: center;
}
.radar-scarcity-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(247,185,85,.16);
  border: 1px solid rgba(247,185,85,.40);
  color: #ffd58a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.radar-scarcity-card h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(20px, 4vw, 28px);
  letter-spacing: -.02em;
}
.radar-scarcity-card p {
  margin: 0;
  color: #c3cad8;
  line-height: 1.6;
}
.radar-scarcity-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  margin: 16px auto 6px;
  max-width: 420px;
}
.radar-scarcity-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f7b955, #e14b4b);
  border-radius: 999px;
}
.radar-scarcity-meta {
  font-size: 12px;
  color: #9ca5b6;
  margin: 4px 0 0;
}

/* FAQ */
.radar-faq {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--panel);
  padding: clamp(18px, 3vw, 26px);
}
.radar-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.radar-faq-grid details {
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  cursor: pointer;
}
.radar-faq-grid summary {
  list-style: none;
  font-weight: 700;
  color: #fff;
  font-size: 14px;
  position: relative;
  padding-right: 22px;
}
.radar-faq-grid summary::-webkit-details-marker { display: none; }
.radar-faq-grid summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 20px;
  color: #9ca5b6;
  transition: transform .15s ease;
}
.radar-faq-grid details[open] summary::after { transform: rotate(45deg); }
.radar-faq-grid p {
  margin: 8px 0 0;
  color: #c3cad8;
  font-size: 13px;
  line-height: 1.6;
}

/* Final CTA — same shape as radar-bottom-cta but louder */
.radar-final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(225,75,75,.45);
  border-radius: 22px;
  background:
    radial-gradient(circle at 80% 0%, rgba(225,75,75,.18), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(247,185,85,.10), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
    var(--panel);
}
.radar-final-cta h2 {
  margin: 4px 0 6px;
  color: #fff;
  font-size: clamp(24px, 5vw, 36px);
  letter-spacing: -.03em;
  line-height: 1.05;
}
.radar-final-cta p {
  margin: 0;
  color: #c3cad8;
  line-height: 1.6;
}
.radar-final-cta .pricing-cta {
  width: min(320px, 100%);
  margin-top: 0;
  flex: 0 0 auto;
}

/* ── Mobile responsive (≤900px) for radar landing additions ─────── */
@media (max-width: 900px) {
  .radar-usecase-grid,
  .radar-faq-grid {
    grid-template-columns: 1fr;
  }
  .radar-final-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .radar-final-cta .pricing-cta {
    width: 100%;
  }
  .radar-stack-row {
    font-size: 13px;
    padding: 11px 13px;
  }
  .radar-stack-row.radar-stack-pay {
    font-size: 15px;
  }
  .radar-stack-row.radar-stack-pay > span:last-child {
    font-size: 17px;
  }
}

@media (max-width: 600px) {
  .radar-guarantee {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    gap: 12px;
  }
  .radar-guarantee-num {
    width: 78px;
    height: 78px;
    font-size: 30px;
    border-width: 2px;
  }
  .radar-bullets li {
    font-size: 13px;
    padding: 10px 12px 10px 36px;
  }
  /* Inline detective stays inline on mobile too — the `em` sizing
   * keeps it proportional to the (smaller) mobile headline. */
  .radar-brand-title {
    font-size: clamp(22px, 6vw, 28px);
    gap: 8px;
  }
}
.pricing-cta.ghost {
  color: var(--muted);
  background: #121216 !important;
  border: 1px solid var(--border);
}
.pricing-cta.danger {
  background: linear-gradient(135deg, #e84d55, #c72935);
  border: 1px solid rgba(255,255,255,.08);
}
.vip-music-page {
  /* Let the page expand with the iframe content; the iframe's auto-
   * resize JS sets the height to fit, so we don't need to enforce a
   * viewport-minimum here. Keep a small floor so the area isn't
   * empty before the iframe loads. */
  min-height: 480px;
}
.vip-music-gate {
  min-height: min(720px, calc(100vh - 52px));
  display: grid;
  place-items: center;
  padding: clamp(18px, 5vw, 56px);
  background:
    radial-gradient(circle at 20% 10%, rgba(239, 68, 68, .18), transparent 35%),
    radial-gradient(circle at 88% 12%, rgba(245, 158, 11, .12), transparent 32%),
    #09090c;
}
.vip-music-gate-card {
  width: min(720px, 100%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  padding: clamp(22px, 5vw, 46px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    rgba(16, 16, 20, .96);
  box-shadow: 0 28px 80px rgba(0,0,0,.38);
}
.vip-music-gate-card h1 {
  margin: 10px 0 10px;
  font-size: clamp(34px, 7vw, 64px);
  letter-spacing: -0.06em;
  line-height: .92;
}
.vip-music-gate-card p {
  max-width: 560px;
  color: var(--muted);
  line-height: 1.6;
}
.vip-music-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 10px;
}
.vip-music-gate-actions .pricing-cta {
  min-width: 190px;
  margin-top: 0;
}
.vip-music-frame {
  width: 100%;
  /* Initial height before the child posts its real size. The
   * postMessage listener in app.js overrides this on first paint. */
  min-height: 480px;
  border: 0;
  border-radius: 0;
  background: #09090c;
  /* No internal scrollbar — the parent page is the single source
   * of scroll. The auto-resize message handler keeps height in sync
   * with the child's content height. */
  overflow: hidden;
  display: block;
}

/* ── Edge-to-edge integration of the music-bot iframe ─────────────────
 * When the .main view is `vip-music`, drop ALL .main padding so the
 * iframe sits flush against the sidebar with no border around it.
 * Doing it via a body-level data attribute would be cleaner but app.js
 * already toggles `[hidden]` on the section itself, and we can target
 * via :has — falls back gracefully on older browsers (which keep the
 * default padding, which is what they have now anyway).
 */
.main:has(> .view[data-view="vip-music"]:not([hidden])) {
  padding: 0;
  max-width: none;
}
.main:has(> .view[data-view="vip-music"]:not([hidden])) .view[data-view="vip-music"] {
  /* The view container itself wraps the iframe — strip any margins
   * so the iframe really hits the sidebar edge. */
  margin: 0;
  padding: 0;
}

/* Mobile vip-music overrides are in the main responsive blocks below
 * (lines ~3180 and ~3240) so they win the cascade over the base
 * .main { padding-top: 52px } rules. */

/* ── Make the sidebar truly stay-in-place on desktop when viewing the
 *     music-bot iframe. The default `position: sticky` set on .sidebar
 *     can fail when the iframe makes the page very tall (sticky has
 *     subtle issues with overflow:auto ancestors). `position: fixed`
 *     pins it definitively. Scoped to vip-music view only so other
 *     views keep their existing behavior. */
@media (min-width: 901px) {
  .app:has(> main > .view[data-view="vip-music"]:not([hidden])) > .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    z-index: 50;
  }
  /* When the sidebar is taken out of grid flow with `position: fixed`,
   * CSS Grid auto-placement promotes `.main` into the now-empty first
   * cell — which is the 220px-wide sidebar column. The iframe collapses
   * to ~220px wide and looks like a narrow black strip behind the
   * sidebar. Pin `.main` to column 2 so it stays where it belongs. */
  .app:has(> main > .view[data-view="vip-music"]:not([hidden])) > .main {
    grid-column: 2;
  }
}
.paypal-button-slot { min-height: 0; }
.paypal-button-slot.active {
  margin-top: -4px;
  min-height: 48px;
}
.billing-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.account-page {
  width: min(880px, 100%);
  margin: 0 auto;
}
.account-card {
  position: relative;
  background:
    radial-gradient(ellipse 700px 220px at 50% -120px, rgba(108, 130, 255, .14), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 28px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 18px 50px rgba(0,0,0,.30);
  overflow: hidden;
}
.account-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(147,184,255,.5), transparent);
  opacity: .65;
  pointer-events: none;
}
.account-card h2 {
  margin: 0;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -.02em;
  font-weight: 750;
  color: #f1f3f8;
}
.account-kicker {
  display: inline-block;
  color: #9fb1d6;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(147,184,255,.08);
  border: 1px solid rgba(147,184,255,.18);
}
.account-locked-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}
.account-locked-glyph {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(147,184,255,.16), rgba(147,184,255,.04));
  border: 1px solid rgba(147,184,255,.28);
  color: #c9d6f0;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 6px 18px rgba(40, 70, 140, .25);
}
.account-locked-copy h2 {
  margin-top: 4px;
  font-size: clamp(20px, 2.6vw, 24px);
}
.account-locked-copy p { margin: 6px 0 0; line-height: 1.5; }

.account-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
}
.account-identity {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.account-identity-avatar {
  position: relative;
  flex: 0 0 auto;
}
.account-identity img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background: #222;
  border: 2px solid rgba(255,255,255,.08);
  flex: 0 0 60px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
/* When premium, give the avatar a soft warm glow ring */
.account-card[data-plan="premium"] .account-identity img {
  border-color: rgba(255, 209, 102, .45);
  box-shadow:
    0 0 0 1px rgba(255, 209, 102, .25),
    0 6px 20px rgba(255, 175, 60, .22);
}
.account-card[data-plan="pro"] .account-identity img {
  border-color: rgba(147, 184, 255, .45);
  box-shadow:
    0 0 0 1px rgba(147, 184, 255, .25),
    0 6px 20px rgba(60, 100, 200, .22);
}
.account-identity-text { min-width: 0; }
.account-identity-text p { margin: 4px 0 0; line-height: 1.5; color: #aab1bf; }
.account-summary-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.account-plan-pill {
  align-self: center;
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #d6dde8;
  position: relative;
  overflow: hidden;
}
.account-plan-pill.premium {
  color: #2a1d05;
  background: linear-gradient(135deg, #ffd166 0%, #f6b53b 100%);
  border-color: rgba(246, 181, 59, .55);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 4px 14px rgba(246, 181, 59, .30);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .01em;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--muted);
}
.status-chip .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  position: relative;
}
.status-chip[data-status="active"] {
  color: #6ee7a3;
  background: rgba(110,231,163,.10);
  border-color: rgba(110,231,163,.30);
}
.status-chip[data-status="active"] .status-dot {
  box-shadow: 0 0 0 3px rgba(110,231,163,.18);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(110,231,163,.18); }
  50%      { box-shadow: 0 0 0 5px rgba(110,231,163,.10); }
}
.status-chip[data-status="cancelled"] {
  color: #f5b66e;
  background: rgba(245,182,110,.10);
  border-color: rgba(245,182,110,.30);
}
.status-chip[data-status="payment_failed"],
.status-chip[data-status="suspended"],
.status-chip[data-status="expired"] {
  color: #ee7a8a;
  background: rgba(238,122,138,.10);
  border-color: rgba(238,122,138,.30);
}
.status-chip[data-status="pending"] {
  color: #9bb6e8;
  background: rgba(155,182,232,.10);
  border-color: rgba(155,182,232,.25);
}

.account-divider {
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.10) 30%, rgba(255,255,255,.10) 70%, transparent);
  margin: 22px 0;
}

.account-detail-rows {
  display: grid;
  gap: 0;
  background: rgba(255,255,255,.018);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 4px 14px;
}
.account-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  position: relative;
}
.account-detail-row:last-child { border-bottom: none; }
.account-detail-row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(147,184,255,.0), rgba(147,184,255,.6) 40%, rgba(147,184,255,.0));
  transition: width .35s ease;
}
.account-detail-row:hover::after { width: 100%; }
.account-detail-label {
  color: #8d94a3;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.account-detail-value {
  color: #f0f2f7;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}
.account-detail-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-feature-settings: "tnum" 1, "ss01" 1;
  letter-spacing: -.01em;
  font-weight: 700;
  color: #cfdbf2;
}

.account-hidden-panel {
  position: relative;
  background:
    radial-gradient(140% 140% at 0% 0%, rgba(147,184,255,.10), transparent 50%),
    rgba(255,255,255,.025);
  border: 1px solid rgba(147,184,255,.22);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 4px 0 4px;
  overflow: hidden;
}
.account-hidden-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.account-hidden-head small { font-size: 11px; color: #99a3b5; }
.account-hidden-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f0f2f7;
  font-size: 15px;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 700;
}
.account-hidden-value[data-has-name="true"] {
  padding: 6px 10px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
}
.account-hidden-value[data-has-name="true"]::before {
  content: "🔒";
  font-size: 11px;
  opacity: .6;
}

.account-addon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.account-addon-card {
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(225,75,75,.10), transparent 52%),
    rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  padding: 14px;
  min-width: 0;
}
.account-addon-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.account-addon-head h3 {
  margin: 4px 0 0;
  font-size: 16px;
  color: #f1f3f8;
}
.account-addon-detail {
  color: #aab1bf;
  font-size: 12.5px;
  line-height: 1.45;
  min-height: 36px;
}
.account-addon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.account-addon-actions .pricing-cta {
  margin: 0;
  width: auto;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12px;
}
@media (max-width: 720px) {
  .account-addon-grid {
    grid-template-columns: 1fr;
  }
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.account-actions .pricing-cta {
  margin-top: 0;
  width: auto;
  flex: 0 0 auto;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  letter-spacing: -.005em;
  transition: transform .08s, box-shadow .15s, filter .15s;
}
.account-actions .pricing-cta:not(.ghost):not(.danger-ghost) {
  background: linear-gradient(180deg, var(--accent) 0%, #c93a45 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 6px 18px rgba(225,75,75,.30);
}
.account-actions .pricing-cta:not(.ghost):not(.danger-ghost):hover {
  filter: brightness(1.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 8px 22px rgba(225,75,75,.42);
}
.account-actions .pricing-cta:active { transform: translateY(1px); }
.account-action-status { display: block; margin-top: 12px; font-size: 12px; }

.pricing-cta.danger-ghost {
  color: #ee7a8a;
  background: transparent !important;
  border: 1px solid rgba(238,122,138,.32);
}
.pricing-cta.danger-ghost:hover {
  background: rgba(238,122,138,.08) !important;
  filter: none;
}
.billing-checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 18px;
}
.billing-checkout-modal[hidden] { display: none; }
.billing-checkout-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 12, .76);
  backdrop-filter: blur(8px);
}
.billing-checkout-card {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  max-height: min(94vh, 760px);
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    #15161b;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 22px 22px 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 30px 90px rgba(0,0,0,.55);
}
.billing-checkout-card h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.02em;
  font-weight: 750;
  color: #f1f3f8;
}
.billing-confirm-card {
  width: min(390px, 100%);
  overflow: visible;
}
.billing-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.billing-confirm-actions .pricing-cta { margin-top: 0; }

/* ── Header with PayPal-secured kicker ───────────────────────── */
.checkout-head {
  margin-bottom: 16px;
}
.checkout-head .checkout-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.checkout-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #93b8ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(147,184,255,.08);
  border: 1px solid rgba(147,184,255,.22);
}
.checkout-kicker svg { color: #93b8ff; }
.billing-checkout-card .muted { font-size: 13px; line-height: 1.5; margin: 6px 0 0; }

/* ── Cart line items ─────────────────────────────────────────── */
.checkout-cart {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.checkout-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  transition: opacity .15s, background .15s, border-color .15s;
}
.checkout-item.removed {
  opacity: .55;
  background: rgba(255,255,255,.012);
}
.checkout-item.removed .checkout-item-price { text-decoration: line-through; }
.checkout-item-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  color: #c8d0db;
}
.checkout-item.addon .checkout-item-icon {
  color: #f6c97e;
  background: rgba(246,201,126,.08);
  border-color: rgba(246,201,126,.20);
}
.checkout-item-body { min-width: 0; }
.checkout-item-name {
  color: #f0f2f7;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.005em;
  line-height: 1.3;
}
.checkout-item-meta {
  display: block;
  margin-top: 3px;
  color: #8d94a3;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.checkout-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}
.checkout-item-price {
  color: #f0f2f7;
  font-weight: 700;
  font-size: 14px;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.checkout-qty.included {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8d94a3;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
}

/* ── Stepper (+/−) — quantity-style add/remove control ───────── */
.checkout-stepper {
  display: inline-flex;
  align-items: stretch;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  overflow: hidden;
}
.stepper-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: #f0f2f7;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s;
  font-family: ui-sans-serif, system-ui;
}
.stepper-btn:hover:not(:disabled) {
  background: rgba(147,184,255,.12);
  color: #cfdbf2;
}
.stepper-btn:active:not(:disabled) { background: rgba(147,184,255,.2); }
.stepper-btn:disabled {
  color: #4a5060;
  cursor: not-allowed;
}
.stepper-value {
  min-width: 28px;
  display: grid;
  place-items: center;
  color: #f0f2f7;
  font-weight: 700;
  font-size: 13px;
  font-feature-settings: "tnum" 1;
  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

/* ── Summary block (Subtotal + Total) ────────────────────────── */
.checkout-summary {
  margin: 14px 0 16px;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
}
.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
}
.checkout-summary-row span {
  color: #8d94a3;
  font-size: 13px;
  font-weight: 500;
}
.checkout-summary-row span small {
  display: inline-block;
  margin-left: 4px;
  color: #6e7484;
  font-size: 11px;
  font-weight: 500;
}
.checkout-summary-row b {
  color: #f0f2f7;
  font-weight: 700;
  font-size: 14px;
  font-feature-settings: "tnum" 1;
}
.checkout-total-row {
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 4px;
  padding-top: 10px;
}
.checkout-total-row span { color: #e3e7ee; font-size: 14px; font-weight: 600; }
.checkout-total-row b {
  font-size: 19px;
  letter-spacing: -.01em;
  color: #ffffff;
}

/* ── Primary CTA: Amazon-style yellow with subtle game gradient ─ */
.checkout-cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px;
  border-radius: 11px;
  border: 1px solid rgba(255, 200, 80, .55);
  background: linear-gradient(180deg, #ffd166 0%, #f6b53b 100%);
  color: #1a1410;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: -.005em;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 0 0 1px rgba(255, 200, 80, .15),
    0 8px 22px rgba(246, 181, 59, .25);
  transition: transform .08s, box-shadow .12s, filter .12s;
}
.checkout-cta:hover {
  filter: brightness(1.03) saturate(1.05);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 0 0 1px rgba(255, 200, 80, .25),
    0 12px 28px rgba(246, 181, 59, .32);
}
.checkout-cta:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 4px 12px rgba(246, 181, 59, .25);
}
.checkout-cta-label { font-weight: 800; }
.checkout-cta-amount {
  padding: 4px 9px;
  background: rgba(26, 20, 16, .14);
  border: 1px solid rgba(26, 20, 16, .25);
  border-radius: 7px;
  font-weight: 800;
  font-size: 13px;
  font-feature-settings: "tnum" 1;
}

/* ── Trust row — Amazon-style reassurance icons ──────────────── */
.checkout-trust {
  list-style: none;
  margin: 14px 0 6px;
  padding: 12px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  border-top: 1px solid rgba(255,255,255,.05);
}
.checkout-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8d94a3;
  font-size: 11.5px;
  font-weight: 500;
}
.checkout-trust li svg { color: #6ad196; flex: 0 0 auto; }

/* Hide the legacy toggle button — stepper replaces it. */
.checkout-remove[hidden] { display: none !important; }
.hide-page {
  width: min(880px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

/* Refined status card — replaces hide-credit-card + hide-manage-card */
.hide-status-card {
  position: relative;
  background:
    radial-gradient(ellipse 700px 220px at 50% -120px, rgba(108, 200, 255, .12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 28px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 18px 50px rgba(0,0,0,.30);
  overflow: hidden;
}
.hide-status-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(108,200,255,.55), transparent);
  opacity: .65;
  pointer-events: none;
}
.hide-status-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hide-status-title {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
}
.hide-status-title h2 {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 24px);
  letter-spacing: -.02em;
  font-weight: 750;
  color: #f1f3f8;
}
.hide-status-title p {
  margin: 5px 0 0;
  color: #99a3b5;
  line-height: 1.55;
  font-size: 13px;
}
.hide-shield {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #cfe7ff;
  background: linear-gradient(135deg, rgba(108,200,255,.18), rgba(108,200,255,.04));
  border: 1px solid rgba(108,200,255,.28);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 6px 18px rgba(40, 110, 180, .20);
}
.hide-shield::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  border: 1px solid rgba(108,200,255,.18);
  opacity: 0;
  animation: shield-pulse 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shield-pulse {
  0%, 100% { transform: scale(1); opacity: .0; }
  50%      { transform: scale(1.08); opacity: .55; }
}
.hide-status-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: #aab1bf;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s, border-color .15s;
}
.icon-btn:hover {
  color: #cfe7ff;
  background: rgba(108,200,255,.08);
  border-color: rgba(108,200,255,.30);
}
.icon-btn:active { transform: rotate(180deg) scale(.96); }

.hide-divider {
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.10) 30%, rgba(255,255,255,.10) 70%, transparent);
  margin: 22px 0;
}
.hide-detail-rows {
  display: grid;
  gap: 0;
  margin: 0;
  background: rgba(255,255,255,.018);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 4px 14px;
}
.hide-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  position: relative;
}
.hide-detail-row:last-child { border-bottom: none; }
.hide-detail-row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(108,200,255,.0), rgba(108,200,255,.55) 40%, rgba(108,200,255,.0));
  transition: width .35s ease;
}
.hide-detail-row:hover::after { width: 100%; }
.hide-detail-row dt {
  color: #8d94a3;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
}
.hide-detail-row dd {
  margin: 0;
  color: #f0f2f7;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
  font-feature-settings: "tnum" 1;
}

.hide-claim-section, .hide-plan-section { display: grid; gap: 12px; }
.hide-claim-head { margin: 0; }
.hide-claim-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.01em;
  color: #f1f3f8;
}
.hide-claim-head small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #99a3b5;
}

.hide-hidden-list {
  margin: 0;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(108,200,255,.10), transparent 50%),
    rgba(255,255,255,.025);
  border: 1px solid rgba(108,200,255,.20);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hide-hidden-list span {
  display: inline-block;
  color: #99a3b5;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hide-hidden-list b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f0f2f7;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 700;
}
/* Real hidden username — show the boxed chip with lock icon */
.hide-hidden-list b[data-has-name="true"] {
  padding: 4px 9px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 7px;
}
.hide-hidden-list b[data-has-name="true"]::before {
  content: "🔒";
  font-size: 11px;
  opacity: .6;
}

.hide-input-field {
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
}
.hide-input-field > span {
  color: #99a3b5;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hide-input-row {
  display: flex;
  align-items: stretch;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  overflow: hidden;
  transition: border-color .15s, background .15s, box-shadow .2s;
}
.hide-input-row:focus-within {
  border-color: rgba(108,200,255,.55);
  background: rgba(108,200,255,.04);
  box-shadow: 0 0 0 3px rgba(108,200,255,.12);
}
.hide-input-prefix {
  display: grid;
  place-items: center;
  padding: 0 12px;
  color: #99a3b5;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  border-right: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.hide-input-row:focus-within .hide-input-prefix {
  color: #cfe7ff;
  background: rgba(108,200,255,.06);
}
.hide-input-row input {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 12px 12px;
  color: #f0f2f7;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  letter-spacing: -.01em;
}
.hide-input-row input::placeholder { color: rgba(255,255,255,.28); }
.hide-input-row input:disabled { opacity: .6; cursor: not-allowed; }

.hide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
}
.hide-actions .pricing-cta {
  margin-top: 0;
  width: auto;
  flex: 0 0 auto;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  letter-spacing: -.005em;
  transition: transform .08s, box-shadow .15s, filter .15s;
}
.hide-actions .pricing-cta:not(.ghost):not(.danger-ghost) {
  background: linear-gradient(180deg, var(--accent) 0%, #c93a45 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 6px 18px rgba(225,75,75,.30);
}
.hide-actions .pricing-cta:not(.ghost):not(.danger-ghost):hover {
  filter: brightness(1.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 8px 22px rgba(225,75,75,.42);
}
.hide-actions .pricing-cta:active { transform: translateY(1px); }
/* Use Hide Me credit primary button — make it pop a little more */
#hide-claim-btn {
  background: linear-gradient(180deg, #6cc8ff 0%, #3b95e0 100%) !important;
  border-color: rgba(108,200,255,.55) !important;
  color: #06192c !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.30) inset,
    0 6px 18px rgba(60, 140, 220, .28) !important;
}
#hide-claim-btn:hover {
  filter: brightness(1.05);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 8px 22px rgba(60, 140, 220, .42) !important;
}
/* Legacy fallback for the bare button rule that used to exist */
.hide-actions button:not(.pricing-cta) {
  background: var(--accent);
  color: #fff;
  padding: 9px 16px;
  border-radius: 9px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
}
.hide-action-status { display: block; margin-top: 4px; font-size: 12px; }

/* Collapsible help footer — calmer than a giant intro card */
.hide-help {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}
.hide-help summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.hide-help summary::-webkit-details-marker { display: none; }
.hide-help summary:hover { background: rgba(255,255,255,.025); }
.hide-help-chevron {
  color: var(--muted);
  transition: transform .2s;
}
.hide-help[open] .hide-help-chevron { transform: rotate(180deg); }
.hide-help-body {
  padding: 0 16px 18px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 13px;
  border-top: 1px solid var(--border);
}
.hide-help-body p { margin: 14px 0; }
.hide-help-body .hide-credit-grid { margin-top: 12px; }
.hide-help-body .hide-credit-note {
  font-size: 12.5px;
  margin-top: 12px;
}

/* Keep the credit grid inside the help section visually subtle */
.hide-credit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.hide-credit-grid div {
  text-align: center;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
}
.hide-credit-grid span,
.hide-credit-grid small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.hide-credit-grid b {
  display: block;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0 2px;
}
.hide-credit-grid .locked-text {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,.2);
}
.hide-credit-note {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 12.5px;
}

/* Free Radio guide */
.radio-guide {
  width: min(1040px, 100%);
  margin: 0 auto;
}
.radio-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(55,138,221,.28), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(99,153,34,.28), transparent 28%),
    linear-gradient(145deg, #18191d 0%, #111216 54%, #151817 100%);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: clamp(20px, 5vw, 36px);
  margin-bottom: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.radio-hero::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -72px;
  bottom: -72px;
  border-radius: 50%;
  border: 36px solid rgba(255,255,255,.04);
}
.radio-hero > div { position: relative; z-index: 1; max-width: 660px; }
.radio-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  color: #d8edff;
  background: rgba(55,138,221,.16);
  border: 1px solid rgba(55,138,221,.32);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.radio-hero h2 {
  margin: 0 0 10px;
  font-size: clamp(25px, 6vw, 44px);
  line-height: 1.04;
  letter-spacing: -.04em;
}
.radio-hero p {
  margin: 0;
  color: #b4b7c3;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.65;
}
.radio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 16px;
}
.radio-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(16px, 3vw, 24px);
}
.radio-card.playlist {
  border-color: rgba(55,138,221,.28);
  background:
    linear-gradient(180deg, rgba(55,138,221,.08), transparent 42%),
    var(--panel);
}
.radio-card.single {
  border-color: rgba(99,153,34,.32);
  background:
    linear-gradient(180deg, rgba(99,153,34,.09), transparent 42%),
    var(--panel);
}
.radio-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.radio-section-title span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #378add;
  box-shadow: 0 0 16px rgba(55,138,221,.62);
}
.radio-card.single .radio-section-title span {
  background: #639922;
  box-shadow: 0 0 16px rgba(99,153,34,.62);
}
.radio-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 16px;
}
.radio-step:last-child { margin-bottom: 0; }
.radio-step-num {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  background: rgba(55,138,221,.18);
  color: #bfe0ff;
  border: 1px solid rgba(55,138,221,.36);
}
.radio-card.single .radio-step-num {
  background: rgba(99,153,34,.18);
  color: #d4f0b5;
  border-color: rgba(99,153,34,.38);
}
.radio-step-body p {
  margin: 0 0 9px;
  color: var(--text);
  line-height: 1.65;
}
.radio-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #d8edff;
  background: rgba(55,138,221,.14);
  border: 1px solid rgba(55,138,221,.35);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.radio-card.single .radio-link {
  color: #e0f4c9;
  background: rgba(99,153,34,.15);
  border-color: rgba(99,153,34,.38);
}
.radio-link:hover { filter: brightness(1.16); }
.radio-note {
  margin-top: 18px;
  color: #b4b7c3;
  background: rgba(255,255,255,.035);
  border-left: 3px solid rgba(55,138,221,.68);
  border-radius: 0 12px 12px 0;
  padding: 12px 13px;
  line-height: 1.65;
}
.radio-note.calm { border-left-color: rgba(99,153,34,.72); }
.radio-note .radio-link { margin-top: 9px; }
.ghost-link {
  color: var(--text);
  background: rgba(255,255,255,.045);
  border-color: var(--border);
}

/* ─── Search bar ───────────────────────────────────────────────────── */
.search-bar {
  display: flex; gap: 10px;
  background: var(--panel);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  max-width: 780px;
  margin: 0 auto 18px;
  flex-wrap: wrap;
}
.search-bar input {
  flex: 1 1 140px;
  min-width: 0;
  background: #0f0f12;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
}
.search-bar input:focus { border-color: var(--accent); }
.search-bar button, .settings button, #live-start {
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
}
.search-bar button:hover { background: var(--accent-2); }
.ghost { background: transparent !important; border: 1px solid var(--border); color: var(--muted) !important; }
.ghost:disabled { opacity: .4; cursor: not-allowed; }

.zoom-btn {
  opacity: 0;
  transition: opacity 0.2s;
}

.avatar-wrap:hover .zoom-btn {
  opacity: 1;
}

.loading-blur {
  filter: blur(4px) brightness(0.6);
  transition: filter 0.3s ease;
}

.outfit-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.outfit-spinner i {
  font-size: 1.5rem;
}

/* ──────────────────── Avatar Lightbox ──────────────────── */
/* ─── Profile card ─────────────────────────────────────────────────── */
.profile-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 20px;
  max-width: 1200px;
  margin: 0 auto 18px;
  flex-wrap: wrap;
}
.avatar { width: 56px; height: 56px; border-radius: 50%; background: #222; object-fit: cover; }
.profile-info { flex: 1; }
.profile-name { font-size: 17px; font-weight: 600; }
.profile-sub { color: var(--muted); font-size: 13px; }
.profile-meta { display: flex; gap: 28px; }
.stat { text-align: right; }
.stat .num { font-size: 22px; font-weight: 700; color: var(--accent); }
.stat .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }

/* ─── Room grid ────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .12s ease, border-color .12s ease;
  cursor: pointer;
}
.card:hover { transform: translateY(-2px); border-color: #3a3a44; }
.card-img {
  width: 100%; aspect-ratio: 16 / 9;
  background: #0a0a0d center/cover no-repeat;
  position: relative;
}
.card-img-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 10px; font-size: 13px; font-weight: 600;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-body { padding: 8px 10px 10px; }
.card-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-bottom-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.card-avatars { display: flex; align-items: center; }
.card-avatars img {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--card); margin-left: -6px; background: #222;
}
.card-avatars img:first-child { margin-left: 0; }
.card-avatar-more {
  font-size: 10px; color: var(--muted); margin-left: 4px; white-space: nowrap;
}
.card-occ {
  font-size: 11px; color: var(--muted); white-space: nowrap;
}
.card-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 2px; }
.card-badges { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #222; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.badge.vip { background: rgba(247,185,85,.15); color: var(--warn); }
.badge.ap { background: rgba(237,66,69,.15); color: var(--bad); }
.badge.private { background: rgba(140,140,151,.15); }

.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.privacy-hidden-empty { padding: 28px 0; }

/* Searching state: cat gif + animated label.
   Tenor-hosted asset so our server bandwidth stays at zero. */
.search-loading-state { padding: 32px 16px 40px; }
.search-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.search-loading-gif {
  /* `contain` so the whole cat (paws and all) stays visible; `cover` was
     cropping the hands off on the sides. Keep a small frame around it. */
  width: 140px;
  height: 140px;
  border-radius: 16px;
  object-fit: contain;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  padding: 6px;
  animation: search-loading-bob 2.4s ease-in-out infinite;
}
@keyframes search-loading-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.search-loading-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.search-loading-label {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  color: #f0f2f7;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.01em;
}
.search-loading-dots {
  display: inline-flex;
  gap: 3px;
  margin-left: 6px;
  align-items: baseline;
}
.search-loading-dots i {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cfdbf2;
  animation: search-loading-dot 1.2s ease-in-out infinite;
}
.search-loading-dots i:nth-child(2) { animation-delay: .15s; }
.search-loading-dots i:nth-child(3) { animation-delay: .30s; }
@keyframes search-loading-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30%           { transform: translateY(-3px); opacity: 1; }
}
.search-loading-text small {
  font-size: 12.5px;
  color: var(--muted);
}
@media (max-width: 600px) {
  .search-loading-gif { width: 116px; height: 116px; }
  .search-loading-label { font-size: 16px; }
}
.privacy-hidden-card {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
  padding: 18px 20px;
  border-radius: 16px;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,77,107,.22), transparent 42%),
    rgba(20, 20, 26, .88);
  border: 1px solid rgba(255,77,107,.28);
  box-shadow: 0 16px 50px rgba(0,0,0,.28);
}
.privacy-hidden-card b {
  color: var(--accent);
  font-size: 18px;
}
.privacy-hidden-card span {
  color: var(--muted);
  line-height: 1.55;
}

/* ─── Modal ────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.modal-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(720px, 94vw);
  max-height: 88vh;
  overflow: hidden; display: flex; flex-direction: column;
}
.modal-close { position: absolute; top: 10px; right: 14px; font-size: 28px; color: var(--muted); z-index: 2; }
.modal-banner {
  position: relative;
  overflow: hidden;
  height: 140px;
  background: #0a0a0d center/cover no-repeat;
}
.modal-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 54px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(23,23,26,0) 0%,
    rgba(23,23,26,.55) 58%,
    var(--panel) 100%
  );
}
.modal-body { padding: 20px 24px 24px; overflow-y: auto; }
.modal-body h2 { margin: 0 0 4px; font-size: 22px; }
.modal-meta { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.modal-stats { display: flex; gap: 24px; padding: 10px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }

.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.tab { padding: 8px 12px; color: var(--muted); font-weight: 500; position: relative; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.tab-count { background: var(--panel-2); color: var(--accent); border-radius: 10px; padding: 0 6px; font-size: 11px; margin-left: 4px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.user-list, .furniture-list, .chats-list { list-style: none; padding: 0; margin: 0; }
.user-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.user-list img { width: 36px; height: 36px; border-radius: 50%; background: #222; object-fit: cover; }
.user-list .u-name { font-weight: 600; }
.user-list .u-id { color: var(--muted); font-size: 12px; }
.user-list .u-badge { margin-left: auto; background: rgba(67,181,129,.15); color: var(--good); padding: 2px 8px; border-radius: 4px; font-size: 11px; }
.chats-list li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.chats-list .c-user { color: var(--accent); font-weight: 600; margin-right: 6px; }
.chats-list .c-time { color: var(--muted); font-size: 11px; margin-left: 8px; }
.furniture-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.furniture-list img { width: 36px; height: 36px; border-radius: 4px; background: #222; object-fit: cover; }
.rating-badge {
  margin-left: auto;
  background: rgba(67,181,129,.15);
  color: var(--good);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 10px;
  text-transform: uppercase;
}

/* Outfits grid — best-effort avatar renders from IMVU's public user API.
   Tall cards since avatar_image is portrait/full-body, not a headshot. */
.outfits-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.outfits-grid li {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
}
.outfits-grid li.outfit-missing { opacity: 0.55; }
.outfits-grid .outfit-img {
  width: 100%; aspect-ratio: 3 / 4; background: #1a1a1f;
  display: flex; align-items: center; justify-content: center;
}
.outfits-grid .outfit-img img { width: 100%; height: 100%; object-fit: cover; }
.outfits-grid .outfit-meta { padding: 8px 10px; }
.outfits-grid .outfit-name { font-weight: 600; font-size: 13px; line-height: 1.25; }
.outfits-grid .outfit-id { color: var(--muted); font-size: 11px; }
.outfits-grid .outfit-warn { color: var(--muted); font-size: 10px; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }

.modal-footer { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.primary { background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 600; }
.primary:hover { background: var(--accent-2); }
.source-badge {
  margin-left: auto; font-size: 11px; color: var(--muted);
  background: var(--panel-2); padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border);
}

/* ─── Settings ─────────────────────────────────────────────────────── */
/* Analytics tab */
.analytics-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.analytics-control-group {
  display: grid;
  gap: 5px;
}
.analytics-control-label {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}
.analytics-range-buttons,
.analytics-scope-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.analytics-range-buttons button,
.analytics-scope-buttons button {
  color: var(--muted);
  background: #121216;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}
.analytics-range-buttons button.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.analytics-scope-buttons button.active {
  color: #0ff4d2;
  background: rgba(15, 244, 210, .10);
  border-color: rgba(15, 244, 210, .42);
}
.analytics-toolbar-hint,
.analytics-note,
.analytics-footnote { color: var(--muted); font-size: 11px; }
.analytics-note { margin: -4px 0 12px; }
.analytics-loading,
.analytics-empty {
  color: var(--muted);
  background: var(--panel-2);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 16px;
  line-height: 1.55;
}
.analytics-loading b,
.analytics-loading span { display: block; }
.analytics-loading b { color: var(--text); margin-bottom: 4px; }
.analytics-empty.compact { padding: 10px 12px; }
.analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.analytics-summary-grid div,
.analytics-spicy-card,
.analytics-person,
.analytics-room {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.analytics-summary-grid div { padding: 11px 12px; }
.analytics-summary-grid b {
  display: block;
  color: var(--accent);
  font-size: 17px;
  line-height: 1.15;
}
.analytics-summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 4px;
}
.analytics-section { margin: 16px 0 0; }
.analytics-section h3 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.analytics-spicy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.analytics-spicy-card {
  padding: 12px;
  background:
    radial-gradient(circle at top right, rgba(201,77,107,.18), transparent 45%),
    var(--panel-2);
}
.analytics-kicker {
  color: #ff8aa5;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 5px;
}
.analytics-spicy-card p { margin: 0; line-height: 1.45; }
.analytics-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.analytics-chart-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.analytics-chart-card > b {
  display: block;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 12px;
}
.analytics-bar-row { display: grid; gap: 5px; margin-top: 9px; }
.analytics-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.analytics-bar-head span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.analytics-bar-head em {
  color: var(--muted);
  font-style: normal;
  white-space: nowrap;
}
.analytics-bar-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}
.analytics-bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #0ff4d2);
}
.analytics-people-list,
.analytics-room-list { display: grid; gap: 8px; }
.analytics-person,
.analytics-room {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
}
.analytics-person img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: #222;
}
.analytics-person div,
.analytics-room div:nth-child(2) { min-width: 0; flex: 1; }
.analytics-person b,
.analytics-room b {
  display: block;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analytics-person span,
.analytics-room span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analytics-person em,
.analytics-room em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}
.analytics-room-img {
  width: 42px;
  height: 32px;
  border-radius: 8px;
  background: #101014 center/cover no-repeat;
  border: 1px solid var(--border);
}
.analytics-hour-list { display: flex; gap: 8px; flex-wrap: wrap; }
.analytics-hour-list span {
  color: var(--muted);
  background: #121216;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
}
.analytics-hour-list b { color: var(--accent); }
.analytics-footnote { margin: 14px 0 0; line-height: 1.5; }

.settings, .settings-auth { width: 100%; max-width: 860px; min-width: 0; margin: 0 auto; background: var(--panel); padding: clamp(14px, 2.2vw, 24px); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
.settings-auth-card { max-width: 460px; }
.settings-auth-card h2 { margin: 0 0 6px; font-size: 20px; }
.settings-auth-card p { margin: 0 0 14px; line-height: 1.5; }
.settings-admin-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.settings-admin-row small { display: block; margin-top: 3px; }
.toggle { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.toggle input[type="checkbox"] { width: 40px; min-width: 40px; max-width: 40px; height: 22px; flex-shrink: 0; appearance: none; background: #2a2a31; border-radius: 12px; position: relative; outline: none; transition: background .18s; }
.toggle input[type="checkbox"]:checked { background: var(--accent); }
.toggle input[type="checkbox"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s; }
.toggle input[type="checkbox"]:checked::before { transform: translateX(18px); }
.toggle-name { min-width: 0; word-wrap: break-word; }
.toggle-name em { color: var(--muted); font-size: 12px; font-style: normal; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.field span { font-weight: 600; font-size: 13px; }
.field input:not([type="checkbox"]) { width: 100%; min-width: 0; background: #0f0f12; border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 8px; outline: none; }
.field input:focus { border-color: var(--accent); }
.field small { color: var(--muted); font-size: 11px; }
.save-flash { color: var(--good); margin-top: 8px; font-size: 12px; min-height: 16px; }
.hidden-users-box {
  background: rgba(255, 77, 107, .06);
  border: 1px solid rgba(255, 77, 107, .18);
  border-radius: 12px;
  padding: 12px;
}
.hidden-user-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.hidden-user-form input { flex: 1 1 220px; }
.hidden-users-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.hidden-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  border: 1px solid rgba(255, 77, 107, .28);
  background: rgba(10, 10, 14, .62);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 9px 7px 11px;
  font-size: 12px;
}
.hidden-user-chip b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hidden-user-chip button {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(255,255,255,.06);
  color: var(--muted);
}

/* ─── Live view ────────────────────────────────────────────────────── */
.live-panel {
  max-width: 980px;
  margin: 18px auto 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 22px;
}
.live-feature-toggle {
  max-width: 980px;
  margin: 12px auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(239,68,68,.28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(239,68,68,.11), rgba(255,255,255,.035));
  cursor: pointer;
}
.live-feature-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.live-feature-toggle span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.live-feature-toggle b { color: var(--text); font-size: 13px; }
.live-feature-toggle small { color: var(--muted); font-size: 11px; }
.live-feature-toggle em {
  margin-left: auto;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 4px 9px;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.live-status { color: var(--muted); margin-bottom: 8px; font-size: 12px; }
.live-roster-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.live-roster-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.live-roster-title { font-weight: 700; }
.live-roster-count { color: var(--muted); font-size: 12px; }
.live-roster {
  list-style: none;
  padding: 0;
  margin: 0 0 2px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.live-roster li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #121216;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 10px 12px;
  text-align: center;
  transition: border-color .15s;
}
.live-roster li:hover { border-color: var(--accent); }
.live-roster img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: #222;
}
.live-roster .name { font-weight: 600; font-size: 13px; }
.live-roster .meta { color: var(--muted); font-size: 11px; }
.live-roster .empty {
  grid-column: 1 / -1;
  justify-content: center;
  color: var(--muted);
  background: transparent;
  border-style: dashed;
  flex-direction: row;
}
.live-log { list-style: none; padding: 0; margin: 0; max-height: 60vh; overflow-y: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.live-log li { padding: 6px 0; border-bottom: 1px solid var(--border); display: flex; gap: 10px; }
.live-log .t { color: var(--muted); min-width: 80px; }
.live-log .joined { color: var(--good); }
.live-log .left { color: var(--bad); }
.live-log .chat { color: var(--accent-2); }
.live-log .snapshot { color: var(--warn); }
.live-log .moved { color: #5eead4; }      /* teal — motion */
.live-log .outfit { color: #f0abfc; }     /* pink — wardrobe */
.live-log .follow { color: #f9a8d4; }
.live-log .system { color: var(--muted); font-style: italic; }
.live-log .u {                            /* highlighted username */
  color: #fbbf24;
  font-weight: 600;
}

/* ─── Session list (botpower-style per-visit blocks) ──────────────── */
.session-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.session {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.session.active { border-color: rgba(67,181,129,.4); }
.session-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.session-num { font-weight: 700; color: var(--accent); font-size: 13px; }
.session-time { color: var(--muted); font-size: 12px; }
.session-dur { margin-left: auto; color: var(--text); font-size: 12px; font-weight: 600; }
.session-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); }
.session-peak { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.session-peak b { color: var(--text); font-size: 13px; }
.session-avatars { display: flex; flex-wrap: wrap; gap: 6px; }
.session-chip {
  display: flex; align-items: center; gap: 6px;
  background: #121216;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 3px 10px 3px 3px;
  font-size: 11px;
}
.session-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: #222; }
.snapshot-row { background: #0f0f12; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 12px; }
.snapshot-row summary { cursor: pointer; color: var(--muted); list-style: none; }
.snapshot-row summary::-webkit-details-marker { display: none; }
.snapshot-row summary b { color: var(--text); }
.snapshot-row[open] { background: #141418; }
.snapshot-tab-btn.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* ─── Search view tabs: Rooms | Snapshots toggle ─────────────────── */
.search-view-tabs {
  display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid var(--border);
}
.svt-btn {
  padding: 8px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
  background: none; border: none; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.svt-btn:hover { color: var(--text); }
.svt-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ─── Snapshot groups (rooms as rows with horizontal cards) ──────── */
.snap-group { margin-bottom: 20px; }
.snap-group-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; padding: 0 2px;
}
.snap-group-name { font-size: 15px; font-weight: 700; }
.snap-group-count { font-size: 12px; color: var(--muted); margin-right: auto; }
.snap-group-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.snap-expand-btn,
.snap-history-btn {
  font-size: 11px; padding: 3px 10px; border-radius: 6px;
  background: #222; color: var(--accent); border: 1px solid var(--border);
  cursor: pointer; white-space: nowrap; transition: background .15s;
}
.snap-history-btn { background: rgba(201,77,107,.14); color: #ff8aa5; border-color: rgba(201,77,107,.35); }
.snap-expand-btn:hover,
.snap-history-btn:hover { background: #2a2a34; }
.snap-group-scroll {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: thin; scrollbar-color: #333 transparent;
}
.snap-group-scroll.expanded {
  flex-wrap: wrap; overflow-x: visible;
}
.snap-group-scroll::-webkit-scrollbar { height: 6px; }
.snap-group-scroll::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* Individual snapshot card */
.snap-card {
  flex: 0 0 160px; min-width: 160px; border-radius: 10px;
  overflow: hidden; background: var(--card); border: 1px solid var(--border);
  cursor: pointer; transition: border-color .15s, transform .1s;
}
.snap-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.snap-card-img {
  height: 80px; background-size: cover; background-position: center;
  position: relative;
}
.snap-card-img .snap-card-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 3px 6px; font-size: 11px; font-weight: 600;
  background: linear-gradient(transparent, rgba(0,0,0,.8));
  color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snap-card-body { padding: 6px 8px; }
.snap-card-avatars { display: flex; align-items: center; gap: 0; margin-bottom: 4px; }
.snap-card-avatars img {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--card); margin-left: -6px; background: #222;
}
.snap-card-avatars img:first-child { margin-left: 0; }
.snap-card-avatars .snap-more {
  font-size: 10px; color: var(--muted); margin-left: 4px; white-space: nowrap;
}
.snap-card-occ { font-size: 11px; color: var(--muted); }
.snap-card-time { font-size: 10px; color: var(--muted); margin-top: 2px; }
.snap-card-ago { font-size: 10px; color: var(--accent); }

/* Deep snapshot room history */
.snapshot-history {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.snapshot-history-hero {
  position: relative;
  min-height: 190px;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.snapshot-history-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,9,13,.18), rgba(8,9,13,.88)),
    linear-gradient(90deg, rgba(8,9,13,.84), rgba(8,9,13,.25));
}
.snapshot-history-hero > *:not(.snapshot-history-hero-shade) { position: relative; z-index: 1; }
.snapshot-history-hero h2 { margin: 0 0 4px; font-size: clamp(26px, 4vw, 42px); }
.snapshot-history-hero p { margin: 0; color: var(--muted); font-size: 13px; }
.snapshot-history-back { align-self: flex-start; }
.snapshot-history-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 16px;
}
.snapshot-history-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  min-width: 0;
}
.snapshot-history-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.snapshot-history-panel h3 { margin: 0 0 4px; }
.snapshot-history-panel p { margin: 0; }
.snapshot-history-sessions,
.snapshot-history-events {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.snapshot-date-divider {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.snapshot-history-session { margin: 0; }
.snapshot-event {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #111116;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}
.snapshot-event img {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  background: #222;
}
.snapshot-event-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.snapshot-event-main b { margin-right: 4px; }
.snapshot-event-main small { color: var(--muted); }
.snapshot-history-more {
  width: 100%;
  margin-top: 12px;
}

/* ─── Snapshot detail modal ──────────────────────────────────────── */
.snap-detail-stats {
  display: flex; gap: 24px; margin: 12px 0;
}
.snap-detail-stats .sd-stat .sd-val { font-size: 20px; font-weight: 700; }
.snap-detail-stats .sd-stat .sd-lbl { font-size: 11px; color: var(--muted); }
.sd-stat .sd-val.seated { color: var(--good); }
.sd-stat .sd-val.standing { color: var(--warn); }

/* ─── Chain-status dots: four states ──────────────────────────────── */
.chain-dot.skipped { background: var(--warn); box-shadow: 0 0 5px rgba(247,185,85,.4); }
.chain-dot.failed  { background: var(--bad); box-shadow: 0 0 5px rgba(237,66,69,.4); }
.chain-dot.disabled { background: #333; }
.chain-row { cursor: help; }

/* ─── Misc ─────────────────────────────────────────────────────────── */
.muted { color: var(--muted); }

/* ─── Auto-refresh "live" indicator next to the search bar ─────────── */
.refresh-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2a2a30;
  align-self: center;
  margin-left: 4px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.refresh-dot.pulse {
  background: var(--good);
  box-shadow: 0 0 8px var(--good);
}

/* ─── Modal Users tab: Seated / Next / Standing groups ─────────────── */
.user-section h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  margin: 12px 0 6px;
  padding: 0 4px;
}
.user-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.user-row img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #1b1b20; }
.user-row .u-seat {
  margin-left: auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-radius: 999px;
  padding: 2px 10px;
  background: #1f1f25;
  color: var(--muted);
  border: 1px solid var(--border);
}
.user-row .u-seat.seated   { background: rgba(67,181,129,.12); color: var(--good); border-color: rgba(67,181,129,.4); }
.user-row .u-seat.standing { background: rgba(247,185,85,.10); color: var(--warn); border-color: rgba(247,185,85,.35); }
.user-row .u-seat.next     { background: rgba(150,150,200,.10); color: #b6b6cc; border-color: rgba(150,150,200,.35); }
.user-row .u-seat.unknown  { background: rgba(150,150,200,.08); color: var(--muted); border-color: var(--border); }
.seat-loading-note { margin: 4px 0 8px; font-size: 12px; }

/* ─── Modal Outfits tab: full-body 2D portrait grid (botpower-style) ─ */
#outfits-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.outfit-tile {
  display: flex; flex-direction: column;
  background: #121216;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  gap: 8px;
}
.outfit-portrait {
  position: relative;
  height: 220px;
  background: #0c0c0f;
  border-radius: 8px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* Shimmer while the outfit PNG is still downloading from VuArchive.
   Each PNG is 2-5s so without this users see black boxes. Same pattern as
   the live-avatar skeleton; the img starts hidden and fades in over the
   gradient once onload fires in app.js. */
@keyframes outfit-portrait-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.outfit-portrait.loading {
  background:
    linear-gradient(110deg, #141418 25%, #23232c 50%, #141418 75%);
  background-size: 200% 100%;
  animation: outfit-portrait-skeleton 1.4s ease-in-out infinite;
}
.outfit-portrait.failed::before {
  content: "image unavailable";
  color: var(--muted);
  font-size: 11px;
  opacity: .7;
}
.outfit-portrait[data-img-url] { cursor: zoom-in; }
.outfit-portrait[data-img-url]::after {
  content: "Tap to zoom";
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.48);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 3px 7px;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.outfit-portrait[data-img-url]:hover::after,
.outfit-portrait[data-img-url]:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}
.outfit-portrait img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  /* Start invisible; fade in over the shimmer when onload fires. */
  opacity: 0;
  transition: opacity 0.18s ease-in;
}
.outfit-portrait img.loaded { opacity: 1; }
.outfit-portrait img.placeholder { width: 64px; height: 64px; border-radius: 50%; opacity: .5; }
.outfit-portrait .outfit-warn {
  position: absolute; bottom: 8px; left: 0; right: 0;
  text-align: center; font-size: 10px; color: var(--muted);
}
.outfit-meta .outfit-name { font-weight: 600; font-size: 13px; }
.outfit-meta .outfit-id { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.outfit-products summary {
  cursor: pointer; font-size: 11px; color: var(--muted);
  list-style: none; padding: 4px 0;
}
.outfit-products summary::-webkit-details-marker { display: none; }
.outfit-products[open] summary { color: var(--accent); }
.outfit-grid-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.outfit-grid-items .outfit-item { aspect-ratio: 1; background: #1b1b20; border-radius: 4px; overflow: hidden; }
.outfit-grid-items .outfit-item img { width: 100%; height: 100%; object-fit: cover; }
.outfit-more { grid-column: span 4; font-size: 10px; color: var(--muted); text-align: center; padding: 4px; }

/* ─── Live participant tile additions: 2D avatar + seat badge ─────── */
/* Skeleton-shimmer placeholder shown UNDER the avatar img while it loads.
   The img starts transparent (no .loaded class), letting the gradient
   show through. When the onload handler in app.js adds .loaded, the img
   fades in over the shimmer. Eliminates the "all dark on first load"
   feel when 6+ avatars fetch in parallel. */
@keyframes live-avatar-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.live-roster .avatar-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background:
    linear-gradient(110deg, #1a1a20 25%, #2a2a35 50%, #1a1a20 75%);
  background-size: 200% 100%;
  animation: live-avatar-skeleton 1.4s ease-in-out infinite;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.live-roster .avatar-2d {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  /* Start transparent so the parent's shimmer shows through during fetch.
     onload="this.classList.add('loaded')" in the markup adds .loaded once
     the image is ready, fading it in over the skeleton. */
  opacity: 0;
  transition: opacity 0.18s ease-in;
}
.live-roster .avatar-2d.loaded { opacity: 1; }
.live-roster .zoom-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
  cursor: pointer;
}
.live-roster .avatar-wrap:hover .zoom-btn { opacity: 1; }
.live-roster .seat-badge {
  display: inline-block;
  background: #1f1f25;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 8px;
  margin-top: 2px;
}
.live-roster .seat-badge.seated { background: rgba(67,181,129,.12); color: var(--good); border-color: rgba(67,181,129,.4); }
.live-roster .seat-badge.standing { background: rgba(247,185,85,.10); color: var(--warn); border-color: rgba(247,185,85,.35); }

/* ─── Avatar zoom lightbox ────────────────────────────────────────── */
.avatar-lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.8); backdrop-filter: blur(8px);
  animation: lb-fade-in .2s ease;
}
@keyframes lb-fade-in { from { opacity: 0; } to { opacity: 1; } }
.avatar-lightbox img {
  max-width: 90vw; max-height: 85vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  animation: lb-scale-in .2s ease;
}
@keyframes lb-scale-in { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.avatar-lightbox .lb-close {
  position: absolute; top: 16px; right: 20px;
  font-size: 28px; color: #fff; cursor: pointer;
  background: rgba(0,0,0,.4); border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.avatar-lightbox .lb-name {
  position: absolute; bottom: 20px;
  color: #fff; font-size: 14px; font-weight: 600;
  background: rgba(0,0,0,.5); padding: 6px 16px; border-radius: 8px;
}

/* ─── Hamburger + sidebar scrim (hidden on desktop) ───────────────── */
.hamburger {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 201;
  font-size: 22px; padding: 6px 10px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
}
.sidebar-scrim {
  display: none; position: fixed; inset: 0; z-index: 199;
  background: rgba(0,0,0,.5);
}

/* ─── Responsive ──────────────────────────────────────────────────── */

/* ── Tablet / narrow window (≤ 900px) ──────────────────────────── */
@media (max-width: 900px) {
  /* Layout: collapse sidebar into off-canvas drawer */
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; z-index: 202; left: -260px;
    width: 240px; transition: left .25s ease;
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 24px rgba(0,0,0,.7);
    /* Use dvh so mobile browser chrome (address bar shrinking on
     * scroll) and the gesture bar don't clip the footer. Fall back
     * to 100vh on browsers without dvh support. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Safe-area padding so the bottom auth card / Login button
     * isn't covered by iOS home indicator or Android gesture bar. */
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .sidebar.open { left: 0; }
  .sidebar-close { display: inline-flex; }
  .hamburger { display: block; }
  .main { padding: 18px 16px; padding-top: 52px; }
  .main:has(> .view[data-view="vip-music"]:not([hidden])) { padding: 0; }

  /* Header */
  .view-header h1 { font-size: 24px; }
  .view-header .sub { font-size: 13px; }

  /* Search bar: wrap to 2 rows */
  .search-bar { flex-wrap: wrap; max-width: 100%; }
  .search-bar input { flex: 1 1 40%; min-width: 120px; }
  .search-bar button { flex: 0 0 auto; }

  /* Profile card: compact */
  .profile-card { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .profile-meta { gap: 16px; }

  /* Room grid: auto-fill compact like botpower */
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

  /* Modal: nearly full screen */
  .modal-card { width: 98vw; max-height: 95vh; border-radius: 10px; }
  .modal-body { padding: 14px 16px 18px; }
  .modal-banner { height: 110px; }
  .modal-stats { gap: 14px; flex-wrap: wrap; }

  /* Snapshot cards: slightly smaller */
  .snap-card { flex: 0 0 150px; min-width: 150px; }
  .snapshot-history-layout { grid-template-columns: 1fr; }

  /* Live view */
  .live-panel { padding: 12px 14px; }

  /* Settings */
  .settings { padding: 14px; }

  /* Free Radio */
  .radio-grid { grid-template-columns: 1fr; }
  .radio-hero { border-radius: 18px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card { padding: 18px; }
  .hide-credit-grid { grid-template-columns: 1fr; }

  /* Account: keep the avatar + status chip on the same row when possible.
     Only stack into column at the phone breakpoint below. */
  .account-summary-row { gap: 12px; }
  .account-summary-side { flex-shrink: 1; flex-wrap: wrap; }
  .account-locked-inner {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .account-locked-inner > button { grid-column: 1 / -1; justify-self: stretch; }
  .account-actions { gap: 8px; }
  .account-actions .pricing-cta { flex: 1 1 calc(50% - 4px); }

  /* Hide Me: wrap the head row gracefully, don't column it yet. */
  .hide-status-head { gap: 12px; }
  .hide-status-actions { flex: 1 0 auto; justify-content: flex-end; }
  .hide-actions .pricing-cta { flex: 1 1 calc(50% - 4px); }
}

/* ── Phone (≤ 600px) ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .main { padding: 10px 10px 20px; padding-top: 48px; }
  .main:has(> .view[data-view="vip-music"]:not([hidden])) { padding: 0; }

  /* Header: compact */
  .view-header h1 { font-size: 20px; }
  .view-header .sub { font-size: 12px; }
  .view-header { margin-bottom: 12px; }

  /* Search bar: full stack */
  .search-bar {
    flex-direction: column; gap: 8px; padding: 10px;
    max-width: 100%;
  }
  .search-bar input { width: 100%; flex: none; padding: 10px 12px; }
  .search-bar button { width: 100%; padding: 12px 12px; font-size: 14px; }
  .refresh-dot { display: none; }

  /* Profile card: botpower-style stacked */
  .profile-card {
    flex-direction: column; align-items: flex-start;
    padding: 12px 14px; gap: 10px;
  }
  .profile-card > .avatar { width: 48px; height: 48px; }
  .profile-info { width: 100%; }
  .profile-name { font-size: 16px; }
  .profile-sub { font-size: 12px; }
  .profile-meta { width: 100%; justify-content: flex-start; gap: 20px; }
  .stat { text-align: left; }
  .stat .num { font-size: 18px; }
  .stat .lbl { font-size: 10px; }

  /* Room grid: 2-col on phone like botpower mobile */
  .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .snap-group-head { align-items: flex-start; flex-wrap: wrap; }
  .snap-group-count { margin-right: 0; }
  .snap-group-actions { width: 100%; }
  .snap-group-actions button { flex: 1 1 auto; }
  .snapshot-history-hero { min-height: 150px; padding: 14px; border-radius: 14px; }
  .snapshot-history-panel { padding: 10px; border-radius: 12px; }
  .snapshot-history-panel-head { align-items: flex-start; }
  .snapshot-event { padding: 8px; }
  .card-body { padding: 6px 8px 8px; }
  .card-title { font-size: 12px; }
  .card-meta { font-size: 10px; }
  .card-avatars img { width: 20px; height: 20px; }
  .card-img { aspect-ratio: 16 / 10; }

  /* Search view tabs: pill-style like botpower */
  .search-view-tabs { gap: 0; justify-content: flex-start; }
  .svt-btn { padding: 7px 16px; font-size: 13px; }

  /* Snapshot groups: 2-col grid instead of horizontal scroll */
  .snap-group-scroll {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    overflow-x: visible;
    padding-bottom: 0;
  }
  /* ── Account / My Subscription page ───────────────────────── */
  .account-page { padding: 0; }
  .account-card {
    padding: 16px 14px;
    border-radius: 16px;
  }
  .account-card h2 { font-size: 19px; }
  .account-locked-inner {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 12px;
  }
  .account-locked-inner > button { width: 100%; }
  .account-summary-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .account-identity { gap: 12px; }
  .account-identity img {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-width: 2px;
  }
  .account-identity-text h2 { font-size: 18px; }
  .account-identity-text p { font-size: 12.5px; }
  .account-summary-side {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }
  .account-divider { margin: 16px 0; }
  .account-detail-rows { padding: 2px 12px; }
  .account-detail-row { padding: 11px 0; gap: 10px; }
  .account-detail-label { font-size: 11px; letter-spacing: .04em; }
  .account-detail-value { font-size: 14px; }
  /* Disable the hover underline on touch — there's no hover state. */
  .account-detail-row:hover::after { width: 0; }
  .account-hidden-panel { padding: 12px 13px; }
  .account-hidden-head { flex-direction: column; gap: 4px; align-items: flex-start; }
  .account-hidden-head small { font-size: 10.5px; }
  .account-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
  }
  .account-actions .pricing-cta {
    width: 100%;
    flex: 1 1 auto;
    padding: 11px 14px;
    font-size: 13.5px;
  }

  /* ── Hide Me page ──────────────────────────────────────────── */
  .hide-page { gap: 12px; padding: 0; }
  .hide-status-card {
    padding: 16px 14px;
    border-radius: 16px;
  }
  .hide-status-head {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .hide-status-title { gap: 12px; }
  .hide-status-title h2 { font-size: 18px; }
  .hide-status-title p { font-size: 12.5px; }
  .hide-shield {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .hide-status-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }
  .hide-divider { margin: 16px 0; }
  .hide-detail-rows { padding: 2px 12px; }
  .hide-detail-row { padding: 11px 0; gap: 10px; }
  .hide-detail-row dt { font-size: 11px; letter-spacing: .04em; }
  .hide-detail-row dd { font-size: 14px; }
  .hide-detail-row:hover::after { width: 0; }
  .hide-claim-head h3 { font-size: 15px; }
  .hide-claim-head small { font-size: 11.5px; }
  .hide-hidden-list {
    padding: 11px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .hide-hidden-list span { font-size: 11px; }
  .hide-hidden-list b { font-size: 13.5px; }
  .hide-input-field > span { font-size: 11px; }
  .hide-input-prefix { padding: 0 11px; font-size: 13.5px; }
  .hide-input-row input { font-size: 14px; padding: 11px 11px; }
  .hide-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .hide-actions .pricing-cta {
    width: 100%;
    flex: 1 1 auto;
    padding: 11px 14px;
    font-size: 13.5px;
  }

  /* Status chip — slightly compact on phone. */
  .status-chip {
    padding: 4px 10px;
    font-size: 11.5px;
  }

  /* Help disclosure on Hide Me page — keep it tight. */
  .hide-help summary {
    padding: 12px 14px;
    font-size: 13px;
  }
  .hide-help-body { padding: 0 14px 14px; }
  .hide-help-body p { font-size: 12.5px; line-height: 1.55; }
  .hide-credit-grid { grid-template-columns: 1fr; }
  .hide-credit-grid div { padding: 11px; }

  .snap-card {
    flex: none; min-width: 0; width: 100%;
  }
  .snap-card-img { height: 90px; }
  .snap-card-body { padding: 6px 8px; }
  .snap-group-head { flex-wrap: wrap; gap: 6px; }
  .snap-group-name { font-size: 14px; }
  .snap-group-count { font-size: 11px; }

  /* ── Checkout modal ─────────────────────────────────────── */
  .billing-checkout-modal { padding: 12px; }
  .billing-checkout-card {
    padding: 16px 14px 14px;
    border-radius: 18px;
    max-height: 94vh;
  }
  .billing-checkout-card h2 { font-size: 19px; }
  .checkout-head { margin-bottom: 12px; }
  .checkout-cart { margin-top: 12px; gap: 6px; }
  .checkout-item {
    padding: 12px;
    gap: 10px;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .checkout-item-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    grid-row: 1 / 3;
  }
  .checkout-item-body { grid-column: 2; grid-row: 1; }
  .checkout-item-side {
    grid-column: 2;
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
  }
  .checkout-item-name { font-size: 14px; }
  .checkout-item-meta { font-size: 11.5px; }
  .checkout-summary { padding: 12px 13px; margin: 12px 0 14px; }
  .checkout-summary-row { padding: 5px 0; }
  .checkout-total-row b { font-size: 17px; }
  .checkout-cta {
    padding: 12px 14px;
    font-size: 14px;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  .checkout-cta-amount { font-size: 12.5px; padding: 3px 8px; }
  .checkout-trust {
    gap: 10px 14px;
    padding: 10px 4px;
    margin-top: 12px;
  }
  .checkout-trust li { font-size: 11px; }

  /* Modal: full-screen on phone like botpower */
  .modal { align-items: stretch; }
  .modal-card {
    width: 100vw; max-height: 100vh; height: 100vh;
    border-radius: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .modal-close { top: 8px; right: 12px; font-size: 26px; padding: 4px 8px; }
  .modal-banner { height: 120px; flex: 0 0 120px; }
  .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 14px 0;
    overflow: hidden;
  }
  .modal-body h2 { flex: 0 0 auto; font-size: 18px; }
  .modal-meta { flex: 0 0 auto; font-size: 11px; }
  .modal-stats {
    flex: 0 0 auto;
    gap: 12px;
    margin-bottom: 8px;
    padding-bottom: 10px;
  }

  /* Sticky footer for Watch Live button */
  .modal-footer {
    flex: 0 0 auto;
    position: static;
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    margin: 8px -14px 0;
    z-index: 5;
  }
  .modal-footer .primary { width: 100%; text-align: center; padding: 12px; font-size: 15px; }

  /* Tabs in modal: horizontally scrollable with better touch targets */
  .tabs {
    flex: 0 0 auto;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 8px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 10px 12px; font-size: 13px; white-space: nowrap; }
  .tab-panel.active {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 10px;
  }

  /* Users tab */
  .user-row img { width: 36px; height: 36px; }
  .user-row .u-seat { font-size: 10px; padding: 2px 8px; }

  /* Outfits grid: 2-col on phone */
  #outfits-list { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .outfit-portrait { height: 180px; }
  .outfit-tile { padding: 6px; gap: 6px; }

  /* Furniture list */
  .furniture-list li { gap: 8px; padding: 8px 0; }
  .furniture-list img { width: 40px; height: 40px; }
  .rating-badge { font-size: 10px; }
  .analytics-toolbar { align-items: stretch; }
  .analytics-control-group { width: 100%; }
  .analytics-range-buttons,
  .analytics-scope-buttons { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); }
  .analytics-toolbar-hint { display: none; }
  .analytics-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .analytics-spicy-grid { grid-template-columns: 1fr; }
  .analytics-chart-grid { grid-template-columns: 1fr; }
  .analytics-person,
  .analytics-room { padding: 8px; }
  .analytics-person em,
  .analytics-room em { display: none; }

  /* Live view */
  .live-panel { padding: 10px 12px; margin-top: 10px; }
  /* Phones: 3 avatar tiles per row instead of stacking. Tighten gap and
     tile padding so three 3:4 portraits fit comfortably even at ~360px. */
  .live-roster { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .live-roster li { padding: 8px 6px 10px; gap: 6px; }
  .live-roster .name { font-size: 12px; }
  .live-roster .meta { font-size: 10px; }
  .live-log { font-size: 11px; }

  /* Settings: tighter */
  .settings { padding: 12px; border-radius: 10px; }
  .toggle { gap: 10px; }
  .toggle-name { font-size: 13px; }
  .field span { font-size: 12px; }
  .divider { margin: 12px 0; }

  /* Coming soon + Free Radio */
  .nav-item { align-items: flex-start; }
  .nav-soon { font-size: 8px; padding: 3px 5px; margin-top: 1px; }
  .soon-card { border-radius: 14px; }
  .pricing-card { border-radius: 16px; }
  .pricing-features li { font-size: 13px; }
  .hide-status-title { flex-direction: column; }
  .radio-hero, .radio-card { border-radius: 16px; }
  .radio-step { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
  .radio-step-num { width: 26px; height: 26px; font-size: 11px; }
  .radio-link { width: 100%; }
  .radio-note .radio-link { width: auto; }
}

/* ── Very small phones (≤ 400px) ─────────────────────────────────── */
@media (max-width: 400px) {
  .grid { grid-template-columns: 1fr; gap: 10px; }
  .card-img { aspect-ratio: 16 / 9; }
  .snap-group-scroll { grid-template-columns: 1fr !important; }
  .profile-meta { gap: 14px; }
  .stat .num { font-size: 16px; }
  .modal-stats { gap: 8px; }
  .modal-stats > div { min-width: 0; }
  #outfits-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .outfit-tile { padding: 6px; }
  .outfit-portrait { height: 145px; }
  .outfit-meta .outfit-name { font-size: 12px; }
  .outfit-meta .outfit-id { font-size: 10px; }
  /* Tiny phones: drop to 2 columns so each tile stays readable instead
     of being squeezed below ~95px wide at 3 cols. */
  .live-roster { grid-template-columns: repeat(2, 1fr); }
  .radio-step { grid-template-columns: 1fr; }
  .radio-step-num { margin-bottom: -2px; }

  /* Account / Hide Me — squeeze for tiny screens. */
  .account-card, .hide-status-card { padding: 14px 12px; }
  .account-detail-rows, .hide-detail-rows { padding: 2px 10px; }
  .account-detail-row, .hide-detail-row { padding: 10px 0; }
  .account-detail-label, .hide-detail-row dt { font-size: 10.5px; letter-spacing: .05em; }
  .account-detail-value, .hide-detail-row dd { font-size: 13.5px; }
  .account-identity img { width: 44px; height: 44px; flex-basis: 44px; }
  .hide-shield { width: 34px; height: 34px; flex-basis: 34px; }
  .checkout-cta-amount { display: none; }
  .checkout-cta { justify-content: center; }
}

/* ─── Per-session Outfits + Seating subgrids (Bug C wiring) ──────── */
/* The session card already shows summary rows; these collapsible    */
/* details give the per-visit historical outfit / seat detail.       */
.session-outfits-wrap, .session-seating-wrap {
  background: rgba(255,255,255,.02);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 6px 10px;
}
.session-outfits-wrap[open], .session-seating-wrap[open] {
  background: rgba(255,255,255,.04);
}

.session-outfits-grid {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.session-outfit-tile {
  background: #121216;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}
.session-outfit-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.session-outfit-head img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #222; }
.session-outfit-name { font-weight: 600; font-size: 12px; }
.session-outfit-when { font-size: 10px; color: var(--muted); }

.session-seating-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.session-seat-row {
  display: flex; align-items: center; gap: 10px;
  background: #121216;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}
.session-seat-row.standing { opacity: .65; }
.session-seat-row.seated { border-color: rgba(67,181,129,.3); }
.session-seat-row .user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #222; }
.session-seat-row .seat-meta { flex: 1; min-width: 0; }
.session-seat-row .seat-user { font-weight: 600; font-size: 12px; }
.session-seat-row .seat-detail { font-size: 11px; color: var(--text); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.session-seat-row .furni-thumb { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; background: #222; vertical-align: middle; }

/* ─── Big assembled-outfit render inside session outfit tiles ────── */
/* Replaces the old product-thumbnail-only layout. The render is the */
/* hero image; thumbs collapsed under "Show items" for drill-down.   */
.session-outfits-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
}
.session-outfit-tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px !important;
}
.session-outfit-render {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #0a0a0c;
  border-radius: 6px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.session-outfit-render img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.session-outfit-render.failed { display: none; }
.session-outfit-head { padding: 0 2px; }
.session-outfit-pfp { width: 28px !important; height: 28px !important; }

/* Fallback outfit tiles (when vuarchive has no historical data for a user). */
.session-outfit-tile.fallback {
  border-style: dashed !important;
  opacity: 0.85;
}
.session-outfit-tile.fallback .session-outfit-render {
  background: #1a1a20;
}

.local-scanner-box {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
  min-width: 0;
  overflow: hidden;
}
.local-scanner-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.local-scanner-title { font-weight: 700; font-size: 13px; }
.local-scanner-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.local-scanner-stats div {
  background: #101014;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}
.local-scanner-stats span { display: block; font-size: 18px; font-weight: 700; color: var(--accent); }
.local-scanner-stats small { display: block; margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }
.local-scanner-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.local-scanner-inputs label { display: flex; flex-direction: column; gap: 5px; }
.local-scanner-inputs input {
  width: 100%;
  background: #0f0f12;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
}
.local-scanner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.local-scanner-actions button {
  flex: 1 1 135px;
  min-width: 0;
  white-space: normal;
}
.local-scanner-actions button, #local-scanner-refresh { padding: 8px 10px; font-size: 12px; }
.local-scanner-help, .local-action-help {
  display: grid;
  gap: 6px;
  margin: 10px 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.local-scanner-help {
  border-left: 3px solid var(--accent);
  padding: 8px 10px;
  background: #101014;
  border-radius: 0 10px 10px 0;
}
.local-action-help {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.local-action-help div {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 9px;
  background: #101014;
}
.local-scanner-main-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.local-scanner-main-actions button {
  width: 100%;
  justify-content: center;
  padding: 10px 12px;
}
@media (max-width: 520px) {
  .local-scanner-head { align-items: stretch; flex-direction: column; }
  .local-scanner-stats, .local-scanner-inputs, .local-scanner-main-actions, .local-action-help { grid-template-columns: 1fr; }
  .local-scanner-actions button { flex-basis: 100%; }
}

/* Phone adjustments for session grids inside modal */
@media (max-width: 600px) {
  .session-outfits-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .session-outfit-render { aspect-ratio: 3 / 4; }
  .session-seating-list { gap: 4px; }
  .session-seat-row { padding: 6px; gap: 6px; }
  .session-seat-row .user-avatar { width: 24px; height: 24px; }
  .session { padding: 10px; }
  .session-head { gap: 6px; }
  .session-avatars { gap: 4px; }
  .session-chip { font-size: 10px; padding: 2px 8px 2px 2px; }
  .session-chip img { width: 18px; height: 18px; }
}

@media (max-width: 900px) {
  .radar-hero {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }
  .radar-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .radar-panel-head,
  .radar-bottom-cta {
    align-items: flex-start;
    flex-direction: column;
  }
  .radar-bottom-cta .pricing-cta {
    width: 100%;
  }
  .vip-music-gate-actions,
  .vip-music-gate-actions .pricing-cta {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .radar-hero {
    padding: 18px;
  }
  .radar-hero h2 {
    font-size: 34px;
  }
  .radar-feature-grid {
    grid-template-columns: 1fr;
  }
  .radar-actions .pricing-cta {
    width: 100%;
  }
  .radar-price-line em {
    margin-left: 0;
  }
  .vip-music-frame {
    /* Mobile fallback floor before the child posts its size. */
    min-height: 480px;
  }
}