:root {
  --bg: #0f1115;
  --bg-alt: #121722;
  --surface: rgba(23, 27, 34, 0.88);
  --surface-2: rgba(30, 36, 48, 0.92);
  --border: #2a3140;
  --border-strong: #394355;
  --text: #f6f7fb;
  --text-2: #a7b0c0;
  --text-3: #7f899b;
  --pink: #e24f94;
  --purple: #9d4aa8;
  --orange: #ff9a3d;
  --yellow: #ffd31a;
  --live: #ff4d57;
  --success: #79e84a;
  --gradient: linear-gradient(135deg, #9d4aa8 0%, #e24f94 38%, #ff9a3d 72%, #ffd31a 100%);
  --gradient-soft: linear-gradient(180deg, rgba(226, 79, 148, 0.18), rgba(157, 74, 168, 0.04));
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  --radius: 24px;
  --radius-lg: 32px;
  --pill: 999px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  background:
    radial-gradient(circle at top, rgba(226, 79, 148, 0.16), transparent 24%),
    radial-gradient(circle at right, rgba(255, 154, 61, 0.12), transparent 22%),
    linear-gradient(180deg, #0b0d12 0%, #10131a 100%);
  color: var(--text);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  border: 0;
  background: none;
  color: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.card {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  transform: perspective(1200px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transition: transform 240ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 320px;
  gap: 24px;
  padding: 20px;
  min-height: 100vh;
}

.mobile-dock {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 30;
  padding: 10px;
  border-radius: 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  background: rgba(16, 19, 26, 0.92);
}

.mobile-dock-item {
  min-width: 0;
  padding: 11px 10px;
  border-radius: 18px;
  text-align: center;
  color: var(--text-2);
  font-size: 0.84rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
}

.mobile-dock-item.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
}

.sidebar,
.right-rail,
.main-content,
.chat-column,
.player-column {
  min-width: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  border-radius: var(--radius-lg);
  position: sticky;
  top: 24px;
  height: calc(100vh - 48px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 10px 25px rgba(226, 79, 148, 0.25));
}

.brand strong,
.section-heading h2,
.hero-card h1,
.player-overlay h1,
.creator-strip h2,
.page-title {
  letter-spacing: -0.03em;
}

.page-title {
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.98;
}

.brand span,
.section-kicker,
.meta-bottom,
.stream-meta p,
.signal-pill,
.eyebrow-row,
.hero-card p,
.info-card p,
.event-card p,
.presence-item span,
.chat-msg span,
.creator-strip p,
.discover-card p,
.ledger-item span,
.profile-card p,
.timeline-item span,
.social-button,
.viewers {
  color: var(--text-2);
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  padding: 14px 16px;
  border-radius: 18px;
  color: var(--text-2);
  transition: 0.2s ease;
}

.nav-item:hover,
.nav-item.active,
.interactive-row:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.sidebar-footer {
  display: grid;
  gap: 14px;
}

.relay-chip,
.chip,
.badge,
.signal-pill,
.ghost-pill,
.tab,
.chat-input,
.social-button {
  border-radius: var(--pill);
}

.relay-chip,
.signal-pill,
.chat-input,
.chip,
.social-button {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-2);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--pill);
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, opacity 180ms ease, border-color 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  background: var(--gradient);
  color: #101114;
}

.button-secondary {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}

.gift-cta-row {
  margin-top: 14px;
}

.surface-journey-board {
  display: grid;
  gap: 14px;
}

.surface-journey-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.surface-journey-step {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.surface-journey-step:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.16);
}

.surface-journey-step.is-active {
  background: rgba(226, 79, 148, 0.12);
  border-color: rgba(226, 79, 148, 0.35);
}

.surface-journey-step.is-page {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.surface-journey-step__top {
  font-weight: 700;
  color: var(--text);
}

.surface-journey-step__meta {
  color: var(--text-2);
  font-size: 0.82rem;
}

.surface-journey-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.live-balance-card,
.gift-confirm-card,
.live-queue-card,
.wallet-live-sync,
.wallet-live-actions,
.live-chat-runtime-strip,
.live-chat-actions,
.creator-runtime-readiness {
  display: grid;
  gap: 14px;
}

.live-balance-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.live-balance-card strong,
.gift-confirm-card strong {
  display: block;
}

.live-gift-picker .gift-item.is-interactive {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.live-gift-picker .gift-item.active,
.live-gift-picker .gift-item:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
}

.gift-confirm-card,
.live-queue-card,
.wallet-live-sync {
  margin-top: 14px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.gift-confirm-actions,
.wallet-live-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gifts-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 18px;
}

.gift-store-grid,
.hook-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gift-store-card,
.hook-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 10px;
}

.gift-store-card {
  min-height: 210px;
}

.gift-store-glow {
  position: absolute;
  inset: auto -10% -22% auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(226, 79, 148, 0.18);
  filter: blur(38px);
}

.gift-store-top,
.hook-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.gift-store-card strong,
.hook-card strong {
  font-size: 1.15rem;
}

.gift-store-card p,
.hook-card p,
.gift-store-card small,
.hook-card small {
  color: var(--text-2);
}

.progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gradient);
}

.palette-pink .gift-store-glow { background: rgba(226, 79, 148, 0.22); }
.palette-orange .gift-store-glow { background: rgba(255, 154, 61, 0.24); }
.palette-purple .gift-store-glow { background: rgba(157, 74, 168, 0.24); }
.palette-gold .gift-store-glow { background: rgba(255, 211, 26, 0.22); }
.palette-blue .gift-store-glow { background: rgba(116, 169, 255, 0.22); }

.gift-upload-form {
  display: grid;
  gap: 14px;
}

.gift-upload-form label {
  display: grid;
  gap: 8px;
}

.gift-upload-form input,
.gift-upload-form select {
  width: 100%;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.auth-runtime-forms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.auth-runtime-forms-rich {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auth-pane {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-pane-tertiary {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
}

.auth-check-row {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-check-row span {
  color: var(--text-2);
  font-size: 0.92rem;
}

.auth-continuity-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.auth-runtime-feedback,
.runtime-feedback {
  margin-top: 16px;
  color: var(--text-2);
}

.runtime-feedback:empty {
  display: none;
}

.live-runtime-handoff,
#wallet-runtime-handoff,
#auth-return-banner,
#auth-form-feedback,
#creator-runtime-handoff {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-runtime-log {
  margin: 16px 0 0;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}

.runtime-signal-card {
  margin-top: 14px;
}

.creator-preview-shell {
  margin-top: 16px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  min-height: 240px;
  position: relative;
}

.creator-preview-shell video {
  display: block;
  width: 100%;
  min-height: 240px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.08), rgba(0,0,0,0.4));
  object-fit: cover;
}

.creator-preview-overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(10, 12, 18, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

.creator-preview-overlay strong {
  font-size: 1rem;
}

.creator-preview-overlay span:last-child {
  color: var(--text-2);
}

.creator-go-live-strip,
.creator-go-live-plan,
.creator-publish-strip,
.live-runtime-bridge-strip,
.creator-preview-health,
.creator-readiness-board,
.creator-continuity-panel {
  margin-top: 16px;
}

.creator-readiness-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.creator-readiness-item {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.creator-readiness-item.is-ready {
  border-color: rgba(110, 231, 183, 0.4);
  background: rgba(110, 231, 183, 0.08);
}

.creator-readiness-item.is-blocked {
  border-color: rgba(255, 174, 0, 0.42);
  background: rgba(255, 174, 0, 0.08);
}

.creator-go-live-plan {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-subpanel {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.creator-preview-health-grid,
.live-runtime-bridge-strip {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creator-go-live-step {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 8px;
}

.creator-go-live-step.is-ready {
  border-color: rgba(110, 231, 183, 0.4);
  background: rgba(110, 231, 183, 0.08);
}

.creator-go-live-step.is-live {
  border-color: rgba(255, 77, 87, 0.42);
  background: rgba(255, 77, 87, 0.1);
}

.creator-go-live-step.is-blocker {
  border-color: rgba(255, 174, 0, 0.48);
  background: rgba(255, 174, 0, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 174, 0, 0.18) inset;
}

.creator-go-live-step.is-blocker::before {
  content: "⚠ blocker";
  font-size: 11px;
  color: #ffcc66;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.creator-go-live-step p {
  margin: 0;
  color: var(--text-2);
}

.checkbox-row {
  grid-template-columns: 20px 1fr;
  align-items: center;
}

.checkbox-row input {
  width: 16px;
  height: 16px;
}

.gifts-admin-side-stack,
.gift-admin-table {
  display: grid;
  gap: 12px;
}

.gift-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 0.8fr 0.8fr 0.9fr 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-2);
}

.gift-admin-row.head {
  color: var(--text);
  font-weight: 700;
}

.main-content {
  display: grid;
  gap: 20px;
}

.page-stack {
  align-content: start;
}

.topbar {
  padding: 14px 16px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 24px;
  z-index: 10;
}

.search-box {
  flex: 1;
  min-height: 50px;
  border-radius: var(--pill);
  padding: 14px 18px;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar-actions,
.page-nav,
.topbar-signal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.topbar-signal-row {
  width: 100%;
  padding-top: 4px;
}

.topbar-signal-row .signal-pill {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.035);
}

.hero-grid,
.dual-panels,
.auth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 20px;
}

.hero-card,
.panel,
.rail-card,
.player-card,
.creator-strip,
.tabs-panel,
.chat-card,
.side-module,
.feature-link,
.discover-card,
.feature-banner {
  border-radius: var(--radius-lg);
}

.hero-primary {
  padding: clamp(24px, 3vw, 34px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at top left, rgba(255, 211, 26, 0.14), transparent 28%),
    var(--gradient-soft),
    var(--surface);
}

.hero-primary h1 {
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 0.94;
  margin: 12px 0 14px;
  max-width: 10.5ch;
  text-wrap: balance;
}

.hero-primary p {
  max-width: 52ch;
  font-size: 1.02rem;
  line-height: 1.68;
}

.eyebrow-row,
.hero-actions,
.hero-stats,
.chip-row,
.section-heading,
.section-heading.compact,
.meta-top,
.meta-bottom,
.tabs-row,
.creator-main,
.creator-actions,
.chat-header,
.chat-input-row,
.gift-item,
.presence-item,
.event-card,
.creator-title-row,
.player-overlay,
.live-topbar,
.ledger-item,
.timeline-item,
.feature-inline-grid {
  display: flex;
  align-items: center;
}

.eyebrow-row,
.hero-actions,
.chip-row,
.tabs-row,
.creator-actions,
.chat-input-row,
.feature-inline-grid {
  gap: 12px;
  flex-wrap: wrap;
}

.hero-stats {
  gap: 18px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.hero-stats div {
  display: grid;
  gap: 4px;
  min-width: 110px;
}

.hero-stats strong,
.info-card strong,
.event-card strong,
.gift-item strong,
.ledger-item strong,
.timeline-item strong {
  font-size: 1.15rem;
}

.hero-side {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.38));
}

.live-preview,
.stream-thumb,
.player-stage,
.clip-card,
.discover-card {
  position: relative;
  overflow: hidden;
}

.live-preview {
  min-height: 100%;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(16, 18, 24, 0.12), rgba(16, 18, 24, 0.72)),
    radial-gradient(circle at top, rgba(255, 154, 61, 0.22), transparent 30%),
    linear-gradient(135deg, #5b2249 0%, #251724 45%, #181e2a 100%);
}

.preview-overlay,
.preview-copy,
.section-heading,
.meta-top,
.meta-bottom,
.event-card,
.presence-item,
.chat-msg,
.gift-item,
.ledger-item,
.timeline-item {
  justify-content: space-between;
}

.preview-copy {
  display: grid;
  gap: 12px;
}

.badge {
  padding: 8px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.badge-live {
  background: rgba(255, 77, 87, 0.16);
  color: #ff9ca2;
  border: 1px solid rgba(255, 77, 87, 0.28);
}

.badge-premium {
  background: rgba(201, 139, 255, 0.14);
  color: #ddb9ff;
  border: 1px solid rgba(201, 139, 255, 0.24);
}

.section-block,
.panel,
.rail-card,
.tabs-panel,
.side-module,
.chat-card,
.feature-banner {
  padding: 22px;
}

.section-kicker {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.72rem;
  margin-bottom: 6px;
}

.live-grid,
.info-grid,
.metric-grid,
.quick-links-grid,
.discover-grid,
.role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.role-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stream-card {
  overflow: hidden;
}

.stream-thumb {
  min-height: 220px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  background-size: cover;
  background-position: center;
}

.thumb-1 {
  background: linear-gradient(180deg, rgba(24, 28, 38, 0.02), rgba(24, 28, 38, 0.74)), linear-gradient(135deg, #843d77, #2c1c33 48%, #1b2130);
}

.thumb-2 {
  background: linear-gradient(180deg, rgba(24, 28, 38, 0.02), rgba(24, 28, 38, 0.74)), linear-gradient(135deg, #31506f, #1e2a3a 48%, #141a22);
}

.thumb-3 {
  background: linear-gradient(180deg, rgba(24, 28, 38, 0.02), rgba(24, 28, 38, 0.74)), linear-gradient(135deg, #9f4e3e, #422238 48%, #171a25);
}

.stream-meta {
  padding: 16px 18px 18px;
  display: grid;
  gap: 14px;
}

.stream-card,
.feature-link,
.rail-card,
.panel,
.hero-card {
  position: relative;
  isolation: isolate;
}

.stream-card::after,
.feature-link::after,
.rail-card::after,
.panel::after,
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity 220ms ease;
}

.stream-card:hover::after,
.feature-link:hover::after,
.rail-card:hover::after,
.panel:hover::after,
.hero-card:hover::after {
  opacity: 1;
}

.avatar-ring {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #101114;
  background: var(--gradient);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

.avatar-ring.small {
  width: 34px;
  height: 34px;
  font-size: 0.8rem;
}

.avatar-ring.xl {
  width: 64px;
  height: 64px;
  font-size: 1.35rem;
}

.clip-row,
.premium-stack,
.presence-list,
.gift-list,
.chat-messages,
.category-list,
.ledger-list,
.timeline-list,
.metric-stack,
.auth-option-list {
  display: grid;
  gap: 12px;
}

.premium-item,
.info-card,
.feature-link,
.event-card,
.ledger-item,
.timeline-item,
.presence-item,
.gift-item,
.social-button {
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.premium-item:hover,
.info-card:hover,
.feature-link:hover,
.event-card:hover,
.ledger-item:hover,
.timeline-item:hover,
.presence-item:hover,
.gift-item:hover,
.social-button:hover {
  transform: translateY(-1px);
}

.clip-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.clip-card,
.discover-card {
  min-height: 180px;
  padding: 18px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-weight: 700;
}

.clip-1 { background: linear-gradient(135deg, #4b2551, #191b29); }
.clip-2 { background: linear-gradient(135deg, #6d3b48, #1d1c29); }
.clip-3 { background: linear-gradient(135deg, #5a4923, #1d1b25); }

.premium-item,
.info-card,
.profile-card {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.premium-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.quick-links-grid .feature-link,
.discover-card,
.feature-banner {
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.02);
}

.feature-link h3,
.discover-card h3,
.profile-card h3 {
  margin-bottom: 8px;
}

.right-rail {
  display: grid;
  gap: 24px;
}

.presence-item,
.interactive-row {
  display: flex;
  gap: 12px;
  border-radius: 18px;
  padding: 8px;
  transition: 0.2s ease;
}

.presence-item div,
.chat-msg,
.profile-card {
  display: grid;
  gap: 4px;
}

.ranking-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.ranking-list li {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.event-card,
.profile-card,
.auth-card {
  display: grid;
  gap: 12px;
}

.live-shell {
  min-height: 100vh;
  padding: 24px;
}

.live-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.84fr);
  gap: 24px;
  margin-top: 24px;
}

.player-column,
.chat-column {
  display: grid;
  gap: 24px;
}

.player-stage {
  min-height: 560px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(10, 12, 15, 0.08), rgba(10, 12, 15, 0.75)),
    radial-gradient(circle at center, rgba(255, 154, 61, 0.16), transparent 22%),
    linear-gradient(135deg, #40203f 0%, #161a24 50%, #111522 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}

.player-stage--runtime {
  gap: 18px;
}

.player-shell-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.player-video-shell {
  position: relative;
  display: grid;
  gap: 14px;
}

.player-video-shell__glow {
  position: absolute;
  inset: 10% 8% auto;
  height: 55%;
  border-radius: 28px;
  background: radial-gradient(circle, rgba(226, 79, 148, 0.2), transparent 66%);
  filter: blur(42px);
  pointer-events: none;
}

.player-video-shell__frame {
  position: relative;
  min-height: 300px;
  border-radius: 28px;
  padding: 14px;
  background: rgba(7, 10, 17, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.player-video-shell__poster {
  position: relative;
  min-height: 272px;
  height: 100%;
  border-radius: 22px;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(8, 12, 20, 0.1), rgba(8, 12, 20, 0.82)),
    radial-gradient(circle at top, rgba(255, 154, 61, 0.2), transparent 30%),
    linear-gradient(135deg, #5b2249 0%, #20192d 46%, #131926 100%);
}

.player-video-shell__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 180ms ease;
}

.player-video-shell__poster.has-live-media .player-video-shell__media {
  opacity: 1;
}

.player-video-shell__poster.has-live-media .player-video-shell__scan {
  opacity: 0.18;
}

.player-video-shell__scan {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 18%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  box-shadow: 0 0 20px rgba(255,255,255,0.32);
  animation: kyc-scan 4s infinite ease-in-out;
}

.player-video-shell__copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  max-width: 44ch;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(9, 12, 18, 0.72);
  border: 1px solid rgba(255,255,255,0.08);
}

.player-video-shell__copy p {
  margin: 0;
  color: var(--text-2);
}

.player-video-shell__meta {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.player-overlay {
  justify-content: space-between;
  gap: 16px;
}

.player-overlay.bottom {
  align-items: flex-end;
}

.player-overlay h1 {
  font-size: clamp(2rem, 3vw, 3.2rem);
  margin: 0 0 10px;
}

.quick-actions {
  display: flex;
  gap: 10px;
}

.ghost-pill,
.tab {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tab.active,
.chip.active {
  background: var(--gradient);
  color: #101114;
  border-color: transparent;
}

.creator-strip {
  padding: 22px 24px;
  justify-content: space-between;
  gap: 20px;
}

.live-context-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.live-runtime-indicator-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.runtime-indicator-card,
.live-runtime-recovery-card {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.runtime-indicator-card {
  display: grid;
  gap: 8px;
}

.runtime-indicator-card p,
.live-runtime-recovery-card p,
.live-balance-meta {
  margin: 0;
  color: var(--text-2);
}

.live-runtime-recovery-card {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.live-chat-header-signals {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.live-balance-meta {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
}

.info-grid,
.metric-grid {
  margin-top: 18px;
}

.tab-panel {
  display: none;
}

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

.chat-card {
  display: grid;
  gap: 18px;
}

.live-chat-runtime-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.live-chat-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creator-runtime-readiness {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chat-messages {
  max-height: 460px;
  overflow: auto;
}

.chat-msg {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
}

.chat-msg.system {
  background: rgba(226, 79, 148, 0.1);
  border: 1px solid rgba(226, 79, 148, 0.18);
}

.gift-item,
.chat-input-row,
.chat-header {
  justify-content: space-between;
}

.text-link {
  color: #ffd98a;
}

.tag-cloud {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.timeline-item,
.ledger-item {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 16px;
}

.timeline-item:last-child,
.ledger-item:last-child {
  border-bottom: 0;
}

.wallet-hero h1,
.studio-hero h1 {
  max-width: 14ch;
}

.auth-option-list {
  margin: 18px 0 8px;
}

.auth-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.social-button {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.social-button-strong {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text);
}

.auth-lane-strip,
.kyc-state-strip,
.wallet-kyc-grid,
.creator-ops-grid {
  display: grid;
  gap: 12px;
}

.auth-lane-strip,
.kyc-state-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-lane-strip {
  margin: 18px 0 4px;
}

.compact-pill {
  padding: 12px 14px;
}

.profile-spotlight {
  min-height: 100%;
  justify-content: space-between;
}

.kyc-experience,
.kyc-stage,
.kyc-control-panel,
.kyc-manual-panel,
.kyc-upload-card {
  position: relative;
  overflow: hidden;
}

.kyc-hero-grid,
.kyc-upload-grid,
.kyc-stepper {
  display: grid;
  gap: 18px;
}

.kyc-hero-grid {
  grid-template-columns: 1.2fr 0.9fr;
  margin-top: 18px;
}

.kyc-stage {
  min-height: 460px;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(255, 211, 26, 0.12), transparent 28%),
    radial-gradient(circle at right, rgba(226, 79, 148, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

.kyc-stage-glow {
  position: absolute;
  inset: 12% auto auto 8%;
  width: 180px;
  height: 180px;
  background: rgba(226, 79, 148, 0.16);
  filter: blur(48px);
}

.kyc-stage-copy,
.kyc-live-shell,
.kyc-control-panel,
.kyc-manual-panel {
  position: relative;
  z-index: 1;
}

.kyc-live-shell {
  margin-top: 22px;
  display: grid;
  gap: 14px;
}

.kyc-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.kyc-signal-card {
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: grid;
  gap: 4px;
}

.kyc-camera-frame {
  min-height: 280px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(180deg, rgba(10, 12, 15, 0.2), rgba(10, 12, 15, 0.75));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 18px;
}

.kyc-camera-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.kyc-orbit,
.kyc-face-guide,
.kyc-scanline {
  position: absolute;
}

.kyc-orbit {
  inset: 18% auto auto 50%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  transform: translateX(-50%);
  box-shadow: 0 0 0 24px rgba(255,255,255,0.03);
}

.kyc-face-guide {
  inset: 17% auto auto 50%;
  width: 128px;
  height: 168px;
  border-radius: 999px;
  border: 2px solid rgba(123, 228, 149, 0.7);
  transform: translateX(-50%);
}

.kyc-scanline {
  left: 12%;
  right: 12%;
  top: 24%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  box-shadow: 0 0 18px rgba(255,255,255,0.42);
  animation: kyc-scan 3.2s infinite ease-in-out;
}

.kyc-camera-copy,
.kyc-status-pill {
  position: relative;
  z-index: 1;
}

.kyc-camera-copy {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(12, 14, 20, 0.68);
  border: 1px solid rgba(255,255,255,0.08);
}

.kyc-status-pill {
  display: inline-flex;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}

.kyc-orbital-meter {
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.kyc-orbital-core {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: radial-gradient(circle at center, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  box-shadow: inset 0 0 0 14px rgba(255,255,255,0.03), 0 0 0 1px rgba(255,255,255,0.03);
  display: grid;
  place-items: center;
  text-align: center;
}

.kyc-orbital-core span {
  font-size: 0.72rem;
  color: var(--text-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kyc-mini-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.kyc-mini-stop {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--text-3);
}

.kyc-mini-stop span {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  transition: background 220ms ease, box-shadow 220ms ease;
}

.kyc-mini-stop.active {
  color: var(--text);
}

.kyc-mini-stop.active span {
  background: rgba(255,255,255,0.28);
  box-shadow: 0 0 18px rgba(255,255,255,0.12);
}

.kyc-stepper {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kyc-state-strip {
  margin-top: 18px;
}

.kyc-state-card {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  display: grid;
  gap: 4px;
}

.kyc-state-card.active {
  background: linear-gradient(135deg, rgba(157, 74, 168, 0.28), rgba(255,255,255,0.04));
  border-color: rgba(255,255,255,0.14);
}

.kyc-step {
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  display: grid;
  gap: 6px;
}

.kyc-step.active {
  background: linear-gradient(135deg, rgba(157, 74, 168, 0.28), rgba(226, 79, 148, 0.16));
  border-color: rgba(255,255,255,0.14);
}

.kyc-feedback {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-2);
}

.kyc-manual-panel {
  margin-top: 18px;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

.kyc-upload-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0;
}

.kyc-upload-card {
  min-height: 164px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  display: grid;
  gap: 10px;
  cursor: pointer;
}

.kyc-upload-card input {
  display: none;
}

.pulse {
  animation: pulse 1.4s infinite ease-in-out;
}

.wallet-kyc-grid,
.wallet-trust-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.wallet-kyc-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.wallet-kyc-progress {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.wallet-progress-dot {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}

.wallet-progress-dot.active {
  background: rgba(255,255,255,0.28);
  box-shadow: 0 0 18px rgba(255,255,255,0.12);
}

.wallet-economy-grid,
.wallet-economy-actions,
.wallet-economy-form,
.wallet-topup-pack-list,
.wallet-ops-overview,
.wallet-form-hint-list {
  display: grid;
  gap: 12px;
}

.wallet-ops-overview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.wallet-ops-card {
  min-height: 100%;
}

.wallet-form-hint-list {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.wallet-economy-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.wallet-economy-card {
  gap: 14px;
}

.wallet-economy-feedback {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-2);
}

.wallet-economy-feedback--error {
  margin-top: 10px;
  border-color: rgba(255, 77, 87, 0.45);
  background: rgba(255, 77, 87, 0.08);
  color: #ffb4ba;
}

.runtime-feedback.is-error {
  border-color: rgba(255, 77, 87, 0.45);
  background: rgba(255, 77, 87, 0.08);
  color: #ffb4ba;
}

.runtime-feedback.is-success {
  border-color: rgba(110, 231, 183, 0.4);
  background: rgba(110, 231, 183, 0.08);
  color: #c2f2d8;
}

.wallet-topup-pack {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.wallet-topup-pack small,
.wallet-payout-row small {
  color: var(--text-3);
}

.wallet-topup-pack.is-selected {
  border-color: rgba(255, 211, 26, 0.34);
  background: rgba(255, 211, 26, 0.09);
}

.wallet-topup-pack strong,
.wallet-payout-row strong {
  display: block;
}

.wallet-economy-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wallet-economy-form label {
  display: grid;
  gap: 8px;
}

.wallet-economy-form label span {
  font-size: 0.82rem;
  color: var(--text-2);
}

.wallet-economy-form input,
.wallet-economy-form select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font: inherit;
}

.wallet-economy-form button {
  align-self: end;
}

.wallet-payout-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.compact-list {
  gap: 10px;
}

.compact-list .timeline-item strong {
  font-size: 0.94rem;
}

.trust-pill {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: grid;
  gap: 4px;
}

.kyc-bottom-bar {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
}

.kyc-bottom-bar strong {
  display: block;
  margin-bottom: 4px;
}

.kyc-bottom-bar p {
  margin-bottom: 0;
  color: var(--text-2);
}

.creator-ops-hub {
  display: grid;
  gap: 18px;
}

.creator-ops-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.creator-ops-card {
  height: 100%;
}

.creator-ops-highlight {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)),
    radial-gradient(circle at top right, rgba(255, 211, 26, 0.12), transparent 30%),
    rgba(255,255,255,0.03);
}

.creator-ops-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.creator-ops-metrics div {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: grid;
  gap: 4px;
}

.creator-ops-metrics small {
  color: var(--text-2);
}

@keyframes pulse {
  0%,
  100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 0.82; }
}

@keyframes kyc-scan {
  0%, 100% { transform: translateY(-14px); opacity: 0.35; }
  50% { transform: translateY(118px); opacity: 0.9; }
}

@media (max-width: 1180px) {
  .app-shell,
  .live-layout,
  .hero-grid,
  .dual-panels,
  .auth-grid {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    gap: 18px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .nav-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sidebar-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  .right-rail {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .right-rail,
  .quick-links-grid,
  .discover-grid,
  .metric-grid,
  .live-grid,
  .info-grid,
  .clip-row,
  .gift-store-grid,
  .hook-grid,
  .role-grid,
  .auth-option-grid,
  .auth-lane-strip,
  .auth-continuity-strip,
  .kyc-state-strip,
  .wallet-kyc-grid,
  .creator-ops-grid,
  .creator-ops-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kyc-bottom-bar {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 820px) {
  body {
    overflow-x: hidden;
  }

  .app-shell,
  .live-shell {
    padding: 12px 12px 96px;
  }

  .topbar,
  .creator-strip,
  .player-overlay,
  .chat-input-row,
  .chat-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .live-grid,
  .clip-row,
  .info-grid,
  .gift-store-grid,
  .hook-grid,
  .right-rail,
  .quick-links-grid,
  .discover-grid,
  .metric-grid,
  .hero-grid,
  .dual-panels,
  .role-grid,
  .auth-grid,
  .kyc-hero-grid,
  .kyc-upload-grid,
  .kyc-stepper {
    grid-template-columns: 1fr;
  }

  .topbar {
    position: static;
    padding: 18px;
  }

  .sidebar {
    display: none;
  }

  .mobile-dock {
    display: grid;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 8px;
    gap: 6px;
    grid-auto-flow: column;
    grid-auto-columns: minmax(84px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .mobile-dock::-webkit-scrollbar {
    display: none;
  }

  .mobile-dock-item {
    min-width: 0;
    min-height: 48px;
    padding: 9px 8px;
    font-size: 0.76rem;
    line-height: 1.15;
    white-space: normal;
    word-break: break-word;
  }

  .mobile-dock-item:nth-child(n + 5) {
    display: none;
  }

  .page-nav {
    display: none;
  }

  .hero-primary h1,
  .page-title {
    max-width: 100%;
  }

  .wallet-trust-strip,
  .wallet-kyc-grid,
  .kyc-signal-grid,
  .right-rail,
  .nav-list,
  .sidebar-footer,
  .auth-option-grid,
  .auth-lane-strip,
  .auth-continuity-strip,
  .kyc-state-strip,
  .creator-ops-grid,
  .creator-ops-metrics,
  .creator-readiness-grid,
  .live-chat-runtime-strip,
  .live-chat-actions,
  .creator-runtime-readiness,
  .creator-go-live-plan,
  .creator-preview-health-grid,
  .live-runtime-bridge-strip,
  .player-video-shell__meta,
  .live-runtime-indicator-grid {
    grid-template-columns: 1fr;
  }

  .kyc-orbital-core {
    width: 110px;
    height: 110px;
  }

  .player-stage {
    min-height: 380px;
  }

  .page-nav,
  .topbar-actions,
  .topbar-signal-row {
    width: 100%;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .page-title,
  .hero-primary h1,
  .player-overlay h1,
  .creator-strip h2,
  .section-heading h2 {
    max-width: 100%;
    font-size: clamp(1.55rem, 7vw, 2.2rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-wrap: pretty;
  }

  .topbar-actions > *,
  .page-nav > * {
    width: 100%;
    min-width: 0;
  }

  .hero-actions,
  .creator-actions,
  .gift-confirm-actions,
  .paywall-toggle-row,
  .surface-command-center__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .button,
  .social-button,
  .chip,
  .ghost-pill,
  .signal-pill,
  .relay-chip,
  .badge {
    max-width: 100%;
    min-width: 0;
    padding: 10px 12px;
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
    text-align: center;
  }

  .hero-actions .button,
  .kyc-bottom-bar .button,
  .creator-ops-card .button,
  .creator-actions .button,
  .gift-confirm-actions .button,
  .paywall-toggle-row .button,
  .paywall-toggle-row a,
  .social-button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .feature-inline-grid,
  .surface-journey-summary {
    gap: 8px;
  }

  .player-overlay,
  .creator-main,
  .creator-title-row,
  .surface-state-actions {
    gap: 10px;
  }

  .player-shell-badges,
  .quick-actions,
  .live-context-ribbon,
  .player-video-shell__meta {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .player-overlay.bottom h1,
  .player-video-shell__copy strong,
  .creator-title-row h2 {
    font-size: clamp(1.3rem, 6vw, 1.8rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .surface-state-badge,
  .chip,
  .signal-pill,
  .ghost-pill,
  .relay-chip,
  .badge,
  .mobile-dock-item {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .feature-inline-grid,
  .surface-journey-summary,
  .creator-strip-meta,
  .wallet-trust-strip,
  .surface-state-actions,
  .live-inline-status {
    grid-template-columns: 1fr;
  }

  .surface-command-center {
    display: none !important;
  }

  .kyc-stage,
  .kyc-manual-panel,
  .section-block,
  .panel,
  .rail-card,
  .feature-banner,
  .creator-strip {
    padding: 18px;
  }

  .kyc-camera-frame,
  .player-stage {
    min-height: 240px;
  }
}

.launch-shell {
  grid-template-columns: 260px minmax(0, 1fr) 300px;
}

.launch-main {
  display: grid;
  gap: 22px;
  align-content: start;
}

.launch-topbar {
  background: linear-gradient(180deg, rgba(21, 25, 34, 0.88), rgba(16, 19, 26, 0.92));
}

.launch-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  gap: 24px;
  padding: 34px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top left, rgba(226, 79, 148, 0.22), transparent 34%),
    radial-gradient(circle at bottom right, rgba(255, 154, 61, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(16, 18, 25, 0.98), rgba(24, 28, 40, 0.94));
}

.launch-hero::before {
  content: "";
  position: absolute;
  inset: auto -10% -25% auto;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(157, 74, 168, 0.2), transparent 70%);
  pointer-events: none;
}

.launch-hero-copy {
  position: relative;
  z-index: 1;
}

.launch-logo-mark {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin: 12px 0 18px;
  filter: drop-shadow(0 14px 32px rgba(226, 79, 148, 0.35));
}

.launch-hero h1,
.launch-pillar h3,
.launch-showcase-card h2,
.launch-rail-card h3 {
  letter-spacing: -0.03em;
}

.launch-hero h1 {
  margin-bottom: 14px;
  font-size: clamp(2.7rem, 5vw, 4.9rem);
  line-height: 0.95;
  max-width: 11ch;
}

.launch-hero p,
.launch-pillar p,
.preview-band span,
.roadmap-step span,
.countdown-caption,
.launch-rail-card p,
.launch-micro-proof span,
.countdown-unit small {
  color: var(--text-2);
}

.launch-hero p {
  max-width: 62ch;
  margin-bottom: 20px;
  font-size: 1.02rem;
}

.launch-micro-proof {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.launch-micro-proof > div {
  min-width: 160px;
  flex: 1;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.launch-micro-proof strong,
.preview-band strong,
.roadmap-step strong,
.countdown-head strong {
  display: block;
}

.launch-countdown-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.launch-countdown-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 34%);
  pointer-events: none;
}

.countdown-head {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  position: relative;
  z-index: 1;
}

.countdown-unit {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.flip-card {
  width: 100%;
  min-height: 108px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(157, 74, 168, 0.22), rgba(255, 154, 61, 0.16));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 40px rgba(0,0,0,0.28);
  position: relative;
  overflow: hidden;
}

.flip-card::before,
.flip-card::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(255,255,255,0.12);
}

.flip-card::before {
  top: 50%;
}

.flip-card::after {
  top: calc(50% + 1px);
  opacity: 0.4;
}

.flip-card span {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--text);
  text-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.launch-signal-stack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.signal-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
}

.signal-line span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 0 20px rgba(226, 79, 148, 0.45);
}

.launch-banner {
  padding: 24px 26px;
}

.launch-pillars-grid,
.launch-showcase-grid {
  display: grid;
  gap: 18px;
}

.launch-pillars-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.launch-showcase-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.launch-pillar,
.launch-showcase-card,
.launch-rail-card {
  padding: 24px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.025));
}

.launch-pillar.featured {
  border-color: rgba(255, 154, 61, 0.22);
  background:
    radial-gradient(circle at top left, rgba(226, 79, 148, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.03));
}

.launch-preview-stack,
.launch-roadmap-list {
  display: grid;
  gap: 12px;
}

.preview-band,
.roadmap-step {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.preview-band-primary,
.roadmap-step.active {
  border-color: rgba(226, 79, 148, 0.24);
  background: linear-gradient(135deg, rgba(226, 79, 148, 0.12), rgba(255, 154, 61, 0.08));
}

.launch-rail {
  position: sticky;
  top: 20px;
  align-self: start;
}

.launch-rail-card h3 {
  margin-bottom: 8px;
}

@media (max-width: 1280px) {
  .launch-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .launch-rail {
    grid-column: 1 / -1;
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .launch-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .launch-shell,
  .launch-hero,
  .launch-showcase-grid,
  .launch-pillars-grid,
  .launch-rail {
    grid-template-columns: 1fr;
  }

  .countdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .launch-rail {
    position: static;
  }
}

@media (max-width: 760px) {
  .launch-hero,
  .launch-pillar,
  .launch-showcase-card,
  .launch-countdown-card {
    padding: 18px;
  }

  .launch-hero h1 {
    font-size: clamp(2.3rem, 10vw, 3.4rem);
    max-width: none;
  }

  .countdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flip-card {
    min-height: 92px;
  }
}

.launch-page-body {
  min-height: 100vh;
}

.launch-page {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 72px;
  display: grid;
  gap: 28px;
}

.launch-page-hero,
.launch-page-section,
.launch-feature-card,
.launch-countdown-card-solo {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(17, 21, 29, 0.82);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(18px);
}

.launch-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 28px;
  align-items: center;
  border-radius: 36px;
  padding: 42px;
}

.launch-page-copy h1,
.launch-section-heading h2 {
  letter-spacing: -0.04em;
}

.launch-page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--pill);
  margin-bottom: 22px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.launch-page-logo {
  width: clamp(82px, 10vw, 116px);
  display: block;
  margin-bottom: 22px;
  filter: drop-shadow(0 18px 36px rgba(226, 79, 148, 0.25));
}

.launch-page-copy h1 {
  margin-bottom: 16px;
  font-size: clamp(3.2rem, 7vw, 5.8rem);
  line-height: 0.9;
}

.launch-page-copy p,
.launch-section-heading p,
.launch-feature-card p,
.launch-subscribe-feedback {
  color: var(--text-2);
}

.launch-page-copy p {
  max-width: 60ch;
  font-size: clamp(1.02rem, 2vw, 1.2rem);
}

.launch-countdown-card-solo {
  border-radius: 32px;
  padding: 28px;
  background:
    radial-gradient(circle at top, rgba(226, 79, 148, 0.16), transparent 38%),
    rgba(17, 21, 29, 0.88);
}

.launch-countdown-card-solo .countdown-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.launch-page-section {
  border-radius: 32px;
  padding: 32px;
}

.launch-section-heading {
  margin-bottom: 22px;
}

.launch-section-heading h2 {
  margin-bottom: 10px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.launch-features-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.launch-feature-card {
  border-radius: 24px;
  padding: 22px;
}

.launch-feature-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.launch-subscribe-section {
  display: grid;
  gap: 18px;
}

.launch-subscribe-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
}

.launch-subscribe-field input {
  width: 100%;
  min-height: 58px;
  padding: 0 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  outline: 0;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
}

.launch-subscribe-field input::placeholder {
  color: var(--text-3);
}

.launch-subscribe-field input:focus {
  border-color: rgba(226, 79, 148, 0.5);
  box-shadow: 0 0 0 4px rgba(226, 79, 148, 0.12);
}

.launch-subscribe-feedback {
  margin: 0;
  font-size: 0.95rem;
}

.launch-subscribe-feedback.is-success {
  color: #ffdca2;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.surface-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.surface-link-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  min-height: 100%;
}

.surface-link-card__eyebrow {
  color: var(--text-3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.surface-link-card p {
  margin-bottom: 0;
  color: var(--text-2);
}

.surface-command-center {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.surface-command-center__intro,
.surface-command-center__actions,
.surface-command-center__grid,
.surface-command-meta,
.surface-command-center__pills {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.surface-command-center__intro {
  justify-content: space-between;
  align-items: flex-start;
}

.surface-command-center__intro h2,
.surface-command-card strong {
  margin: 0;
}

.surface-command-center__intro p,
.surface-command-card p {
  margin: 0.35rem 0 0;
  color: var(--text-2);
}

.surface-command-center__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.surface-command-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025));
  display: grid;
  gap: 0.75rem;
}

.surface-command-center__pills {
  justify-content: flex-end;
}

.surface-command-center__actions {
  align-items: center;
}

.ar-effect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.ar-effect-card {
  display: grid;
  gap: 10px;
  min-height: 160px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025));
}

.ar-effect-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ar-effect-card p,
.ar-effect-card small {
  margin-bottom: 0;
  color: var(--text-2);
}

.ar-effect-card__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.surface-state-panel {
  display: grid;
  gap: 14px;
}

.surface-state-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.surface-state-strip--panel {
  margin-top: 0;
}

.surface-state-copy {
  display: grid;
  gap: 4px;
  max-width: 52ch;
}

.surface-state-copy p {
  margin-bottom: 0;
  color: var(--text-2);
}

.surface-state-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.surface-state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.surface-state-badge.palette-pink { background: rgba(226, 79, 148, 0.18); }
.surface-state-badge.palette-purple { background: rgba(157, 74, 168, 0.18); }
.surface-state-badge.palette-orange { background: rgba(255, 154, 61, 0.18); }
.surface-state-badge.palette-gold { background: rgba(255, 211, 26, 0.16); color: #fff4c7; }
.surface-state-badge.palette-blue { background: rgba(116, 169, 255, 0.18); }

.paywall-state-card,
.paywall-inline-card {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
}

.paywall-state-card--compact,
.paywall-state-card--launch {
  margin-top: 0;
}

.paywall-state-meta,
.paywall-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.paywall-inline-card p,
.paywall-state-card p {
  margin-bottom: 0;
  color: var(--text-2);
}

.paywall-toggle-row .button.active {
  background: var(--gradient);
  color: #101114;
  border-color: transparent;
}

.gift-store-card__footer,
.gift-admin-actions,
.gift-tier-strip,
.live-gift-burst-layer {
  display: flex;
}

.gift-store-card__footer {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.gift-tier-strip {
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.gift-tier-card {
  flex: 1 1 180px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
}

.gift-tier-chip,
.gift-ar-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gift-tier-chip.tier-low { background: rgba(255, 153, 102, 0.16); color: #ffb27f; }
.gift-tier-chip.tier-premium { background: rgba(181, 124, 255, 0.16); color: #d0a9ff; }
.gift-tier-chip.tier-hero { background: rgba(255, 89, 170, 0.16); color: #ff95cc; }
.gift-ar-badge { background: rgba(92, 246, 199, 0.14); color: #8affde; }

.gift-admin-actions {
  gap: 10px;
  flex-wrap: wrap;
}

.live-gift-tier-strip {
  margin-bottom: 14px;
}

.live-gift-burst-layer {
  position: absolute;
  inset: 24px 24px auto;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  z-index: 3;
}

.live-gift-burst {
  align-self: flex-end;
  min-width: 240px;
  max-width: min(320px, 80%);
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(11, 15, 28, 0.9);
  box-shadow: 0 20px 48px rgba(0,0,0,0.28);
  opacity: 0;
  transform: translateY(-10px) scale(0.96);
  transition: opacity 220ms ease, transform 220ms ease;
}

.live-gift-burst.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.live-gift-burst p,
.live-gift-burst small,
.gift-tier-card p {
  margin: 0;
}

@media (max-width: 960px) {
  .wallet-ops-overview,
  .wallet-economy-grid,
  .wallet-economy-form {
    grid-template-columns: 1fr;
  }

  .auth-runtime-forms {
    grid-template-columns: 1fr;
  }

  .launch-page-hero,
  .launch-features-grid,
  .launch-subscribe-form,
  .launch-countdown-card-solo .countdown-grid {
    grid-template-columns: 1fr;
  }

  .launch-page {
    width: min(1120px, calc(100% - 20px));
    padding: 22px 0 48px;
  }

  .launch-page-hero,
  .launch-page-section,
  .launch-countdown-card-solo {
    padding: 22px;
    border-radius: 24px;
  }

  .launch-page-copy h1 {
    font-size: clamp(2.5rem, 11vw, 4.2rem);
  }
}

/* Gifts storefront V1 - selection, filter, recovery and sticky bar */
.gift-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 6px 0 18px;
}

.gift-filter-chip {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit;
  font: inherit;
  padding: 7px 14px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.gift-filter-chip:hover,
.gift-filter-chip:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.22);
  outline: none;
}

.gift-filter-chip.active {
  background: var(--gradient);
  color: #101114;
  border-color: transparent;
  font-weight: 700;
}

.gift-filter-summary {
  color: var(--text-2);
  font-size: 0.85rem;
  margin-left: auto;
}

.gift-store-card[data-gift-id] {
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.gift-store-card[data-gift-id]:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
}

.gift-store-card[data-gift-id]:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

.gift-store-card.is-selected {
  border-color: rgba(255, 211, 26, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 211, 26, 0.22), 0 20px 40px -24px rgba(226, 79, 148, 0.45);
  background: linear-gradient(180deg, rgba(255, 211, 26, 0.06), rgba(255, 255, 255, 0.04));
}

.gift-store-card__select-label {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.gift-store-card.is-selected .gift-store-card__select-label {
  color: #ffe27a;
  font-weight: 700;
}

.gifts-selection-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(960px, calc(100% - 32px));
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(22, 24, 32, 0.94), rgba(14, 16, 22, 0.97));
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.7);
  z-index: 40;
}

body[data-page="gifts"] {
  padding-bottom: 140px;
}

.gifts-selection-bar[hidden] {
  display: none;
}

.gifts-selection-bar__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
}

.gifts-selection-bar__copy {
  display: grid;
  gap: 4px;
}

.gifts-selection-bar__copy strong {
  font-size: 1.05rem;
}

.gifts-selection-bar__copy span:last-child {
  color: var(--text-2);
  font-size: 0.9rem;
}

.gifts-selection-bar__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.gifts-selection-bar.has-shortfall {
  border-color: rgba(255, 154, 61, 0.4);
}

.gifts-selection-bar.is-ready {
  border-color: rgba(92, 246, 199, 0.35);
}

#gifts-recovery-banner:not([hidden]) {
  margin-bottom: 8px;
}

@media (max-width: 820px) {
  .gifts-selection-bar__inner {
    grid-template-columns: 1fr;
  }
  .gifts-selection-bar__actions {
    justify-content: stretch;
  }
  .gifts-selection-bar__actions .button {
    flex: 1 1 140px;
  }
  .gift-filter-summary {
    margin-left: 0;
    width: 100%;
  }
}

/* Camera capture button overlaid on the live video feed */
.kyc-capture-btn {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--gradient);
  color: #101114;
  border: none;
  border-radius: var(--pill, 999px);
  padding: 12px 28px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: transform 180ms ease, opacity 180ms ease;
}

.kyc-capture-btn:hover:not(:disabled) {
  transform: translateX(-50%) translateY(-2px);
}

.kyc-capture-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kyc-camera-frame {
  position: relative;
}

/* Public production cleanup */
body[data-page="auth"] .app-shell,
body[data-page="creator"] .app-shell {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1180px;
  margin: 0 auto;
}

body[data-page="auth"] .sidebar,
body[data-page="creator"] .sidebar {
  display: none;
}

body[data-page="auth"] .main-content,
body[data-page="creator"] .main-content,
body[data-page="live"] .live-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

body[data-page="auth"] .topbar,
body[data-page="creator"] .topbar,
body[data-page="live"] .topbar {
  position: static;
}

body[data-page="auth"] .hero-grid,
body[data-page="auth"] .auth-grid,
body[data-page="auth"] .auth-runtime-section,
body[data-page="creator"] .hero-grid,
body[data-page="live"] .live-layout {
  grid-template-columns: 1fr;
}

body[data-page="auth"] #kyc-experience,
body[data-page="auth"] .page-stack > section.dual-panels:not(.auth-runtime-section),
body[data-page="auth"] .page-stack > section.rail-card,
body[data-page="auth"] .auth-lane-strip,
body[data-page="auth"] .auth-card .feature-inline-grid,
body[data-page="auth"] .hero-grid > .panel,
body[data-page="auth"] .auth-runtime-section > .panel:last-child,
body[data-page="auth"] .auth-continuity-strip,
body[data-page="auth"] .auth-runtime-log,
body[data-page="creator"] .creator-ops-hub,
body[data-page="creator"] .page-stack > section.dual-panels,
body[data-page="creator"] .page-stack > section.section-block,
body[data-page="creator"] .page-stack > section.rail-card,
body[data-page="creator"] .creator-runtime-readiness,
body[data-page="creator"] .creator-go-live-plan,
body[data-page="creator"] .creator-readiness-board,
body[data-page="creator"] .hero-grid > .panel,
body[data-page="creator"] .creator-runtime-panel .creator-preview-health,
body[data-page="creator"] .creator-runtime-panel .creator-continuity-panel,
body[data-page="creator"] .creator-runtime-panel .dual-panels,
body[data-page="creator"] .creator-runtime-panel .feature-inline-grid,
body[data-page="creator"] .creator-runtime-panel .creator-preview-overlay .badge,
body[data-page="live"] .page-nav,
body[data-page="live"] .live-context-ribbon,
body[data-page="live"] .live-runtime-indicator-grid,
body[data-page="live"] .live-runtime-bridge-strip,
body[data-page="live"] .live-runtime-panel,
body[data-page="live"] .creator-strip,
body[data-page="live"] .player-column > article:nth-child(n + 4),
body[data-page="live"] .chat-column > .side-module,
body[data-page="live"] .player-shell-badges .signal-pill:first-of-type,
body[data-page="live"] .player-video-shell__meta .premium-item:nth-child(n + 2),
body[data-page="live"] .quick-actions .ghost-pill:nth-child(3),
body[data-page="live"] .live-runtime-panel > .feature-inline-grid:last-of-type,
body[data-page="live"] .live-runtime-panel .gift-confirm-actions,
body[data-page="live"] .live-runtime-panel .runtime-signal-card,
body[data-page="live"] .live-runtime-panel .live-runtime-recovery-card {
  display: none;
}

body[data-page="live"] .chat-column {
  display: grid;
  gap: 20px;
}

body[data-page="auth"] .panel,
body[data-page="creator"] .panel,
body[data-page="live"] .panel,
body[data-page="live"] .chat-card,
body[data-page="live"] .player-card,
body[data-page="live"] .creator-strip {
  border-radius: 28px;
}

body[data-page="auth"] .auth-runtime-section > .panel,
body[data-page="creator"] .creator-runtime-panel,
body[data-page="live"] .live-runtime-panel,
body[data-page="live"] .chat-card {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

body[data-page="creator"] .hero-primary .eyebrow-row,
body[data-page="creator"] .creator-runtime-panel .section-kicker,
body[data-page="live"] .player-video-shell__copy .section-kicker {
  display: none;
}

body[data-page="auth"] .page-title,
body[data-page="creator"] .page-title,
body[data-page="live"] .player-overlay h1 {
  max-width: 18ch;
}

body[data-page="auth"] .hero-primary h1,
body[data-page="creator"] .hero-primary h1,
body[data-page="live"] .player-overlay h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
}

body[data-page="auth"] .hero-primary,
body[data-page="creator"] .hero-primary,
body[data-page="live"] .player-stage,
body[data-page="live"] .live-runtime-panel,
body[data-page="auth"] .auth-runtime-section > .panel,
body[data-page="creator"] .creator-runtime-panel {
  padding: 28px;
}

body[data-page="auth"] .topbar-actions,
body[data-page="creator"] .topbar-actions,
body[data-page="live"] .topbar-actions {
  justify-content: flex-end;
}

body[data-page="live"] .player-column,
body[data-page="creator"] .page-stack {
  gap: 18px;
}

body[data-page="live"] .player-stage,
body[data-page="creator"] .creator-runtime-panel {
  min-height: auto;
}

body[data-page="creator"] .creator-preview-shell {
  max-width: 920px;
  margin: 6px auto 0;
}

body[data-page="creator"] .creator-preview-overlay {
  padding: 18px;
}

body[data-page="creator"] .creator-runtime-panel .hero-actions {
  margin-bottom: 10px;
}

body[data-page="live"] .chat-column {
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}

body[data-page="live"] .player-video-shell__meta {
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="live"] .live-runtime-panel > .feature-inline-grid:first-of-type {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="live"] .live-runtime-panel > .feature-inline-grid:first-of-type .premium-item:nth-child(n + 4),
body[data-page="creator"] .creator-runtime-panel .feature-inline-grid .premium-item:nth-child(n + 4) {
  display: none;
}

body[data-page="creator"] .creator-runtime-panel .feature-inline-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="creator"] .creator-runtime-panel .hero-actions,
body[data-page="live"] .quick-actions,
body[data-page="auth"] .hero-actions {
  gap: 12px;
}

body[data-page="creator"] .creator-runtime-panel .hero-actions .button,
body[data-page="live"] .quick-actions .ghost-pill,
body[data-page="auth"] .hero-actions .button {
  flex: 1 1 180px;
}

body[data-page="home"] .neon-sign__meta,
body[data-page="home"] .neon-sign__countdown {
  display: none;
}

body[data-page="home"] .neon-sign {
  max-width: 860px;
}

@media (max-width: 820px) {
  body[data-page="auth"] .main-content,
  body[data-page="creator"] .main-content,
  body[data-page="live"] .live-shell {
    max-width: 100%;
  }
}

/* Final public product reset */
body[data-page="auth"] .sidebar,
body[data-page="creator"] .sidebar,
body[data-page="creator"] .right-rail,
body[data-page="auth"] .auth-grid > article:last-child,
body[data-page="auth"] .auth-runtime-section > article:last-child,
body[data-page="auth"] #kyc-experience,
body[data-page="live"] .page-nav,
body[data-page="live"] .player-column > article:nth-of-type(n + 4),
body[data-page="creator"] .main-content > section:nth-of-type(n + 3) {
  display: none !important;
}

body[data-page="auth"] .app-shell,
body[data-page="creator"] .app-shell {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px 72px;
}

body[data-page="auth"] .topbar,
body[data-page="creator"] .topbar,
body[data-page="live"] .live-topbar {
  position: static;
  padding: 24px 28px;
  border-radius: 28px;
}

body[data-page="auth"] .hero-grid,
body[data-page="creator"] .hero-grid,
body[data-page="auth"] .auth-runtime-section {
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="auth"] .hero-grid,
body[data-page="creator"] .hero-grid,
body[data-page="auth"] .auth-runtime-section,
body[data-page="live"] .live-layout {
  gap: 20px;
}

body[data-page="auth"] .hero-primary,
body[data-page="auth"] .auth-runtime-section > article:first-child,
body[data-page="creator"] .studio-hero,
body[data-page="creator"] .creator-runtime-panel {
  max-width: 980px;
  margin: 0 auto;
}

body[data-page="auth"] .auth-card,
body[data-page="auth"] .auth-runtime-section > article:first-child,
body[data-page="creator"] .studio-hero,
body[data-page="creator"] .creator-runtime-panel,
body[data-page="live"] .player-card,
body[data-page="live"] .creator-strip,
body[data-page="live"] .live-runtime-panel,
body[data-page="live"] .chat-card,
body[data-page="live"] .chat-column > section:nth-of-type(2) {
  border-radius: 28px;
}

body[data-page="auth"] .auth-option-grid,
body[data-page="live"] .live-runtime-panel .hero-actions,
body[data-page="live"] .chat-input-row.gift-cta-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="creator"] .creator-runtime-panel .hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="auth"] .auth-continuity-strip,
body[data-page="auth"] .auth-lane-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="auth"] .auth-runtime-forms-rich {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="auth"] .auth-pane-tertiary {
  grid-column: 1 / -1;
}

body[data-page="live"] .live-shell {
  max-width: 1380px;
  margin: 0 auto;
  padding: 28px 20px 72px;
}

body[data-page="live"] .live-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 420px);
  align-items: start;
}

body[data-page="live"] .chat-column {
  display: grid;
  gap: 20px;
  align-self: start;
}

body[data-page="live"] .chat-column > section:nth-of-type(3),
body[data-page="live"] .chat-column > section:nth-of-type(4) {
  display: block !important;
}

body[data-page="live"] .player-overlay.bottom {
  align-items: end;
}

body[data-page="live"] .player-overlay.bottom p,
body[data-page="creator"] .studio-hero p,
body[data-page="auth"] .auth-card p {
  max-width: 62ch;
}

body[data-page="live"] .chat-card .chat-messages {
  min-height: 280px;
}

@media (max-width: 980px) {
  body[data-page="auth"] .auth-option-grid,
  body[data-page="auth"] .auth-runtime-forms-rich,
  body[data-page="auth"] .auth-continuity-strip,
  body[data-page="auth"] .auth-lane-strip,
  body[data-page="creator"] .creator-runtime-panel .hero-actions,
  body[data-page="live"] .live-runtime-panel .hero-actions,
  body[data-page="live"] .chat-input-row.gift-cta-row,
  body[data-page="live"] .live-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}