/*
 * Spaidz Creators web — aligns with iOS Creative shell (black + silver “spaidz” accents).
 * Brand: spaidzGreen #A6AEAA, spaidzGreenLight #C8CFCC, spaidzGreenDark #7E8682
 */

[hidden] {
  display: none !important;
}

:root {
  --spaidz-bg: #000000;
  --spaidz-fg: #f5f5f7;
  --spaidz-muted: #a1a1a6;
  --spaidz-accent: #a6aeaa;
  --spaidz-accent-light: #c8cfcc;
  --spaidz-accent-dark: #7e8682;
  --spaidz-glass: rgba(255, 255, 255, 0.045);
  --spaidz-glass-border: rgba(255, 255, 255, 0.1);
  --spaidz-danger: #ff6b6b;
  /* Media ingest steps — match iOS SpaidzMediaIngestStepCard accents */
  --spaidz-step-master: #a6aeaa;
  --spaidz-step-trailer: #ff9f0a;
  --spaidz-step-thumb: #0a84ff;
  --spaidz-step-audio: #bf5af2;
  --spaidz-step-master-bg: rgba(166, 174, 170, 0.16);
  --spaidz-step-master-border: rgba(166, 174, 170, 0.42);
  --spaidz-step-trailer-bg: rgba(255, 159, 10, 0.16);
  --spaidz-step-trailer-border: rgba(255, 159, 10, 0.45);
  --spaidz-step-thumb-bg: rgba(10, 132, 255, 0.16);
  --spaidz-step-thumb-border: rgba(10, 132, 255, 0.45);
  --spaidz-step-audio-bg: rgba(191, 90, 242, 0.16);
  --spaidz-step-audio-border: rgba(191, 90, 242, 0.45);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--spaidz-bg);
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--spaidz-fg);
  background: radial-gradient(120% 80% at 50% -20%, rgba(255, 255, 255, 0.06), transparent 55%),
    var(--spaidz-bg);
  -webkit-font-smoothing: antialiased;
}

/* Layout */
.spaidz-root {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 2.5rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.spaidz-header {
  text-align: center;
  padding: 1.5rem 0 1.25rem;
  flex-shrink: 0;
}

.spaidz-logo-img {
  display: block;
  margin: 0 auto;
  max-width: min(220px, 72vw);
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.spaidz-brand-with-beta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.spaidz-brand-with-beta .spaidz-logo-img {
  margin: 0;
}

.spaidz-beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(192, 192, 192, 0.55);
  background: rgba(192, 192, 192, 0.12);
  color: var(--spaidz-accent, #c0c0c0);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}

.spaidz-beta-badge-fixed {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 40;
}

.spaidz-tagline {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--spaidz-accent);
  opacity: 0.95;
}

.spaidz-main {
  flex: 1;
}

/* Glass card */
.spaidz-card {
  background: var(--spaidz-glass);
  border: 1px solid var(--spaidz-glass-border);
  border-radius: 16px;
  padding: 1.35rem 1.25rem;
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.spaidz-card h1 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
}

/* Prominent upload result — under title, separate from technical log */
.spaidz-outcome-banner {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(166, 174, 170, 0.55);
  background: rgba(166, 174, 170, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.spaidz-outcome-banner.spaidz-outcome-caution {
  border-color: rgba(255, 200, 100, 0.55);
  background: rgba(255, 200, 100, 0.12);
}

.spaidz-outcome-banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.spaidz-outcome-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: var(--spaidz-accent-light);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 2rem;
  text-align: center;
}

.spaidz-outcome-caution .spaidz-outcome-icon {
  color: #ffd27f;
}

.spaidz-outcome-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.spaidz-outcome-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--spaidz-muted);
  line-height: 1.45;
}

.spaidz-outcome-caution .spaidz-outcome-subtitle {
  color: #e8dcc8;
}

.spaidz-card p {
  margin: 0 0 0.75rem;
  color: var(--spaidz-muted);
  font-size: 0.9375rem;
}

.spaidz-card p:last-child {
  margin-bottom: 0;
}

/* Links */
a {
  color: var(--spaidz-accent-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 207, 204, 0.45);
}
a:hover {
  color: #fff;
  border-bottom-color: var(--spaidz-accent-light);
}

/* Form controls (upload page) */
.spaidz-field {
  margin-top: 1.1rem;
}

.spaidz-field label {
  display: block;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--spaidz-fg);
  margin-bottom: 0.35rem;
}

.spaidz-field input[type="text"],
.spaidz-field input[type="file"] {
  width: 100%;
  max-width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--spaidz-glass-border);
  background: rgba(0, 0, 0, 0.35);
  color: var(--spaidz-fg);
  font-size: 0.9375rem;
}

.spaidz-field input[type="file"] {
  padding: 0.5rem;
}

.spaidz-field input::placeholder {
  color: rgba(161, 161, 166, 0.8);
}

.spaidz-btn {
  margin-top: 1.25rem;
  padding: 0.65rem 1.25rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #000;
  background: linear-gradient(180deg, var(--spaidz-accent-light), var(--spaidz-accent));
  box-shadow: 0 4px 14px rgba(166, 174, 170, 0.25);
}
.spaidz-btn:hover {
  filter: brightness(1.06);
}
.spaidz-btn:active {
  transform: scale(0.99);
}

.spaidz-btn[disabled],
.spaidz-btn.spaidz-btn-disabled-hint {
  opacity: 0.55;
  cursor: not-allowed;
}

.spaidz-btn-secondary {
  display: inline-block;
  margin-top: 0.75rem;
  background: transparent;
  color: var(--spaidz-accent-light);
  border: 1px solid rgba(200, 207, 204, 0.45);
  box-shadow: none;
}
.spaidz-btn-secondary:hover {
  filter: brightness(1.1);
  border-color: var(--spaidz-accent-light);
}

/* After web upload: return to iOS via QR */
.spaidz-desktop-return {
  margin: 1.25rem 0 0;
  padding: 1.15rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(166, 174, 170, 0.45);
  background: rgba(166, 174, 170, 0.1);
}
.spaidz-desktop-return-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
}
.spaidz-desktop-return-lead {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--spaidz-muted);
}
.spaidz-qr-wrap {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0 0.75rem;
}
.spaidz-qr-wrap img {
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  max-width: 100%;
  height: auto;
}
.spaidz-desktop-return-url {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  line-height: 1.4;
  word-break: break-all;
  color: var(--spaidz-accent-light);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.spaidz-desktop-return-foot {
  margin: 0.85rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}

progress {
  width: 100%;
  max-width: 100%;
  height: 0.65rem;
  margin-top: 0.75rem;
  border-radius: 999px;
  overflow: hidden;
}
progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}
progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--spaidz-accent-dark), var(--spaidz-accent-light));
  border-radius: 999px;
}

#log {
  margin-top: 1rem;
  white-space: pre-wrap;
  font-size: 0.8125rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--spaidz-glass-border);
  color: var(--spaidz-muted);
  padding: 0.85rem;
  border-radius: 10px;
  max-height: 20rem;
  overflow: auto;
}

#log.spaidz-log-ok {
  border-color: rgba(166, 174, 170, 0.45);
  color: var(--spaidz-accent-light);
}

#log.spaidz-log-caution {
  border-color: rgba(255, 200, 100, 0.4);
  color: #f0e6c8;
}

.err {
  color: var(--spaidz-danger);
  font-size: 0.9375rem;
}

/* Index list */
.spaidz-list {
  margin: 0.5rem 0 0;
  padding-left: 1.15rem;
  color: var(--spaidz-muted);
  font-size: 0.9375rem;
}
.spaidz-list li {
  margin-bottom: 0.5rem;
}

/* Status pulse on handoff */
.spaidz-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--spaidz-muted);
  font-size: 0.9375rem;
}
.spaidz-status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--spaidz-accent);
  animation: spaidz-pulse 1.2s ease-in-out infinite;
}
@keyframes spaidz-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.92);
  }
}

/* Sequential upload wizard */
.spaidz-wizard-hint {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  background: rgba(166, 174, 170, 0.08);
  border: 1px solid rgba(166, 174, 170, 0.2);
  font-size: 0.8125rem;
  color: var(--spaidz-muted);
  line-height: 1.45;
}

.spaidz-wizard-step {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.spaidz-wizard-step:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.spaidz-wizard-step-summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  background: rgba(46, 125, 50, 0.15);
  border: 1px solid rgba(129, 199, 132, 0.45);
  margin-bottom: 0.5rem;
}

.spaidz-wizard-step-summary-label {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}

.spaidz-step-check {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(76, 175, 80, 0.95);
  color: #0d1f0f;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.75rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.35);
}

.spaidz-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.75rem;
}

.spaidz-wizard-actions .spaidz-btn {
  margin-top: 0;
}

.spaidz-btn-skip {
  background: transparent !important;
  color: var(--spaidz-muted) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
}

.spaidz-btn-skip:hover {
  color: var(--spaidz-accent-light) !important;
  border-color: rgba(200, 207, 204, 0.45) !important;
}

.spaidz-step-progress-wrap {
  margin-top: 0.75rem;
}

.spaidz-step-progress-wrap progress {
  margin-top: 0;
}

.spaidz-wizard-step-body[hidden] {
  display: none !important;
}

/* Per-step accents (aligned with iOS Upload Media step cards) */
.spaidz-wizard-step-accent {
  --step-accent: var(--spaidz-accent);
  --step-accent-bg: rgba(166, 174, 170, 0.16);
  --step-accent-border: rgba(166, 174, 170, 0.42);
  --step-accent-summary-bg: rgba(166, 174, 170, 0.2);
  --step-accent-summary-border: rgba(166, 174, 170, 0.5);
  margin-top: 1.25rem;
  padding: 1rem 1rem 1.15rem;
  border-radius: 16px;
  background: var(--step-accent-bg);
  border: 1px solid var(--step-accent-border);
}

.spaidz-wizard-step-accent:first-of-type {
  margin-top: 0;
}

.spaidz-wizard-step-accent.spaidz-wizard-step {
  border-top: none;
  padding-top: 1rem;
}

.spaidz-wizard-step-accent-master {
  --step-accent: var(--spaidz-step-master);
  --step-accent-bg: var(--spaidz-step-master-bg);
  --step-accent-border: var(--spaidz-step-master-border);
  --step-accent-summary-bg: rgba(166, 174, 170, 0.22);
  --step-accent-summary-border: rgba(166, 174, 170, 0.55);
}

.spaidz-wizard-step-accent-trailer {
  --step-accent: var(--spaidz-step-trailer);
  --step-accent-bg: var(--spaidz-step-trailer-bg);
  --step-accent-border: var(--spaidz-step-trailer-border);
  --step-accent-summary-bg: rgba(255, 159, 10, 0.22);
  --step-accent-summary-border: rgba(255, 159, 10, 0.58);
}

.spaidz-wizard-step-accent-thumb {
  --step-accent: var(--spaidz-step-thumb);
  --step-accent-bg: var(--spaidz-step-thumb-bg);
  --step-accent-border: var(--spaidz-step-thumb-border);
  --step-accent-summary-bg: rgba(10, 132, 255, 0.22);
  --step-accent-summary-border: rgba(10, 132, 255, 0.58);
}

.spaidz-wizard-step-accent-audio {
  --step-accent: var(--spaidz-step-audio);
  --step-accent-bg: var(--spaidz-step-audio-bg);
  --step-accent-border: var(--spaidz-step-audio-border);
  --step-accent-summary-bg: rgba(191, 90, 242, 0.22);
  --step-accent-summary-border: rgba(191, 90, 242, 0.58);
}

.spaidz-wizard-step-accent .spaidz-wizard-step-heading {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--step-accent);
}

.spaidz-wizard-step-accent .spaidz-wizard-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--step-accent);
  color: #000;
  font-size: 0.75rem;
  font-weight: 800;
  vertical-align: middle;
}

.spaidz-wizard-step-accent .spaidz-wizard-step-title-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
}

.spaidz-wizard-step-accent .spaidz-wizard-step-subtitle {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  color: var(--step-accent);
  opacity: 0.95;
}

.spaidz-wizard-step-accent .spaidz-btn:not(.spaidz-btn-skip) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--step-accent) 75%, #fff), var(--step-accent));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.spaidz-wizard-step-accent .spaidz-wizard-step-summary {
  background: var(--step-accent-summary-bg) !important;
  border-color: var(--step-accent-summary-border) !important;
}

.spaidz-wizard-step-accent .spaidz-step-check {
  background: var(--step-accent) !important;
  color: #000 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.spaidz-wizard-step-accent progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--step-accent), color-mix(in srgb, var(--step-accent) 65%, #fff));
}

/* Thumbnail 16:9 crop (handoff upload.html) */
.spaidz-thumb-crop-panel {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--spaidz-glass);
  border: 1px solid var(--spaidz-glass-border);
  border-radius: 12px;
}

.spaidz-thumb-crop-title {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--spaidz-accent-light);
}

.spaidz-thumb-crop-help {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

.spaidz-thumb-crop-viewport {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(48vh, 420px);
  border-radius: 8px;
  overflow: hidden;
  background: #141414;
  border: 1px solid var(--spaidz-glass-border);
  position: relative;
  /* Allow flex parents to shrink; keeps 16:9 box from exploding past card width */
  min-height: 0;
  min-width: 0;
}

.spaidz-thumb-crop-viewport canvas {
  display: block;
  /* Intrinsic bitmap size is set in JS; pin CSS size so layout never follows huge backing store */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  cursor: grab;
  touch-action: none;
}

.spaidz-thumb-crop-viewport canvas:active {
  cursor: grabbing;
}

.spaidz-thumb-crop-zoom {
  margin-top: 0.75rem;
}

.spaidz-thumb-crop-zoom input[type="range"] {
  width: 100%;
  margin-top: 0.35rem;
}

.spaidz-thumb-crop-actions {
  margin-top: 0.75rem;
}

.spaidz-creative-guidance {
  margin: 0 0 1rem;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--spaidz-accent-light);
  background: rgba(166, 174, 170, 0.1);
  border: 1px solid rgba(166, 174, 170, 0.28);
  border-radius: 12px;
}

.spaidz-encode-panel {
  margin: 0.75rem 0 1rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(166, 174, 170, 0.35);
  border-radius: 12px;
}

.spaidz-encode-label {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--spaidz-fg);
}

.spaidz-encode-progress {
  width: 100%;
  height: 0.5rem;
  margin: 0;
}

.spaidz-encode-hint {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--spaidz-muted);
  line-height: 1.45;
}

/* ——— Creative portal (W1 auth + dashboard) ——— */
.spaidz-root-wide {
  max-width: 40rem;
}

.spaidz-root-portal,
.spaidz-upload-app.spaidz-root-wide {
  max-width: min(72rem, 96vw);
}

body.spaidz-has-tab-bar {
  padding-top: calc(3.75rem + env(safe-area-inset-top, 0px));
}

body.spaidz-has-tab-bar .spaidz-root,
body.spaidz-has-tab-bar .spaidz-root-wide,
body.spaidz-has-tab-bar .spaidz-root-portal {
  padding-top: 0.5rem;
}

.spaidz-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  gap: 1rem;
}

.spaidz-logo-sm {
  max-width: 160px;
}

.spaidz-auth-card h1,
.spaidz-auth-card-title {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
}

/* ——— Creators login landing (index.html) ——— */
body.spaidz-auth-landing {
  min-height: 100vh;
  overflow-x: hidden;
}

.spaidz-poster-wall {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #050505;
}

.spaidz-poster-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(22vh, 1fr));
  width: 110%;
  height: 110%;
  margin: -5% 0 0 -5%;
  gap: 3px;
  transform: scale(1.02);
  filter: saturate(0.85) contrast(1.05);
}

@media (min-width: 900px) {
  .spaidz-poster-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, minmax(34vh, 1fr));
  }
}

.spaidz-poster-tile {
  background-color: #1a1a1a;
  background-image: var(--poster);
  background-size: cover;
  background-position: center;
  min-height: 0;
}

.spaidz-poster-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.88) 100%);
  pointer-events: none;
}

.spaidz-auth-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.25rem 2.5rem;
}

.spaidz-auth-layout {
  width: 100%;
  max-width: 72rem;
  display: grid;
  gap: 1.75rem;
  align-items: start;
}

@media (min-width: 900px) {
  .spaidz-auth-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 22rem);
    gap: 2.5rem;
    align-items: center;
  }
}

.spaidz-auth-hero {
  color: var(--spaidz-fg);
  padding: 0.25rem 0;
}

.spaidz-auth-hero-logo {
  margin: 0 0 0.75rem;
  max-width: min(200px, 56vw);
}

.spaidz-auth-hero .spaidz-brand-with-beta {
  margin: 0 0 0.75rem;
}

.spaidz-auth-hero .spaidz-brand-with-beta .spaidz-auth-hero-logo {
  margin: 0;
}

.spaidz-auth-hero-kicker {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spaidz-accent);
}

.spaidz-auth-hero-title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.85rem, 4.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.spaidz-auth-hero-slogan {
  margin: 0 0 1rem;
  font-size: clamp(1.05rem, 2.8vw, 1.35rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--spaidz-accent-light);
}

.spaidz-auth-hero-slogan em {
  font-style: normal;
  font-weight: 700;
  color: #fff;
}

.spaidz-auth-hero-lead {
  margin: 0 0 1.35rem;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(245, 245, 247, 0.88);
  max-width: 36rem;
}

.spaidz-auth-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 34rem;
}

.spaidz-auth-benefits li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.45;
}

.spaidz-auth-benefit-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(166, 174, 170, 0.18);
  color: var(--spaidz-accent-light);
  font-size: 0.55rem;
  margin-top: 0.15rem;
}

.spaidz-auth-benefits strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.15rem;
}

.spaidz-auth-benefits span {
  color: var(--spaidz-muted);
}

.spaidz-auth-hero-foot {
  margin: 1.25rem 0 0;
  font-size: 0.7rem;
  opacity: 0.55;
}

.spaidz-auth-main {
  width: 100%;
}

body.spaidz-auth-landing .spaidz-auth-card {
  background: rgba(12, 12, 12, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

@media (max-width: 899px) {
  .spaidz-auth-hero-title br {
    display: none;
  }

  .spaidz-auth-hero-foot {
    display: none;
  }

  .spaidz-poster-vignette {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.92) 45%, rgba(0, 0, 0, 0.96) 100%);
  }
}

.spaidz-btn-block {
  width: 100%;
  margin-top: 0.25rem;
}

.spaidz-btn-ghost {
  background: transparent;
  border: 1px solid var(--spaidz-glass-border);
  color: var(--spaidz-muted);
}

.spaidz-auth-links {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--spaidz-muted);
  text-align: center;
}

.spaidz-link-btn {
  background: none;
  border: none;
  color: var(--spaidz-accent-light);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.spaidz-dash-note {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.spaidz-dash-grid {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

@media (min-width: 520px) {
  .spaidz-dash-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.spaidz-dash-tile {
  display: block;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--spaidz-glass-border);
  background: var(--spaidz-glass);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}

.spaidz-dash-tile:hover {
  border-color: var(--spaidz-accent);
}

.spaidz-dash-tile-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.spaidz-dash-tile-title {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.spaidz-dash-tile-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--spaidz-muted);
  line-height: 1.4;
}

.spaidz-spec-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--spaidz-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.ok {
  color: #4ade80;
  font-size: 0.875rem;
  margin-top: 0.75rem;
}

/* W2 — onboarding checklist + vetting wizard */
.spaidz-onboard-banner {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.08);
  color: var(--spaidz-accent-light);
  font-size: 0.875rem;
  line-height: 1.45;
}

.spaidz-onboard-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.spaidz-onboard-step {
  border: 1px solid var(--spaidz-glass-border);
  border-radius: 12px;
  background: var(--spaidz-glass);
  padding: 0.85rem 1rem;
}

.spaidz-onboard-step-done {
  border-color: rgba(74, 222, 128, 0.35);
}

.spaidz-onboard-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.65rem 0.75rem;
}

.spaidz-onboard-step-num {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  color: var(--spaidz-muted);
}

.spaidz-onboard-step-done .spaidz-onboard-step-num {
  background: rgba(74, 222, 128, 0.15);
  color: var(--spaidz-accent-light);
}

.spaidz-onboard-step-head > div {
  flex: 1 1 12rem;
  min-width: 0;
}

.spaidz-onboard-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(255, 255, 255, 0.08);
  color: var(--spaidz-muted);
  vertical-align: middle;
}

.spaidz-onboard-step-done .spaidz-onboard-badge {
  background: rgba(74, 222, 128, 0.12);
  color: var(--spaidz-accent-light);
}

.spaidz-onboard-step-desc {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
}

.spaidz-onboard-action {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
}

.spaidz-onboard-check {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--spaidz-accent-light);
  font-size: 1.1rem;
  line-height: 1;
}

.spaidz-onboard-info {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  font-size: 0.8rem;
  max-width: 10rem;
  text-align: right;
}

.spaidz-vetting-card h1 {
  margin-top: 0.5rem;
}

.spaidz-vetting-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.spaidz-vetting-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 0.85rem;
  margin-top: 0;
  line-height: 1.2;
}

.spaidz-vetting-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.spaidz-vetting-progress-bar {
  height: 100%;
  width: 20%;
  background: var(--spaidz-accent);
  border-radius: 999px;
  transition: width 0.2s ease;
}

.spaidz-vetting-q {
  font-size: 0.95rem;
  margin: 1.25rem 0 0.65rem;
}

.spaidz-vetting-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--spaidz-glass-border);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.spaidz-vetting-row-selected {
  border-color: var(--spaidz-accent);
  background: rgba(74, 222, 128, 0.08);
}

.spaidz-vetting-row-icon {
  flex: 0 0 auto;
  width: 1.25rem;
  color: var(--spaidz-accent-light);
}

.spaidz-vetting-info {
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.25);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--spaidz-muted);
}

.spaidz-vetting-info-warn {
  background: rgba(255, 180, 80, 0.08);
  border-color: rgba(255, 180, 80, 0.35);
}

.spaidz-vetting-actions {
  margin-top: 1.25rem;
}

.spaidz-upload-start-status {
  margin-top: 0.75rem;
  min-height: 1.25rem;
}

.spaidz-draft-id-note {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--spaidz-glass-border);
  background: var(--spaidz-glass);
  font-size: 0.85rem;
  color: var(--spaidz-muted);
  word-break: break-all;
}

.spaidz-draft-id-note span {
  color: var(--spaidz-accent-light);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
}

/* Upload Content wizard (iOS parity) */
.spaidz-upload-app .spaidz-main {
  max-width: none;
}

.spaidz-upload-app .spaidz-upload-card {
  max-width: none;
}

.spaidz-upload-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0 1rem;
}

.spaidz-upload-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
}

.spaidz-upload-topbtn {
  justify-self: start;
  font-size: 0.85rem;
}

.spaidz-upload-topbtn-right {
  justify-self: end;
}

.spaidz-upload-card {
  padding-bottom: 1.25rem;
}

.spaidz-upload-progress-inner {
  margin-bottom: 1.25rem;
}

.spaidz-upload-progress-label {
  display: block;
  font-size: 0.8rem;
  color: var(--spaidz-muted);
  margin-bottom: 0.5rem;
}

.spaidz-upload-progress-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.spaidz-upload-progress-step {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--spaidz-glass-border);
  font-size: 0.72rem;
  color: var(--spaidz-muted);
  background: rgba(255, 255, 255, 0.04);
  font: inherit;
  cursor: pointer;
}

.spaidz-upload-progress-step:hover {
  background: rgba(255, 255, 255, 0.08);
}

.spaidz-upload-progress-step.is-current {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.spaidz-upload-progress-step.is-done {
  color: var(--spaidz-accent-light);
  border-color: rgba(166, 174, 170, 0.35);
}

.spaidz-upload-progress-step.is-done.is-current {
  color: #fff;
}

.spaidz-upload-progress-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.spaidz-upload-progress-step.is-done .spaidz-upload-progress-badge {
  background: var(--spaidz-accent);
  color: #111;
}

.spaidz-upload-progress-step.is-current:not(.is-done) .spaidz-upload-progress-badge {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.spaidz-upload-progress-check {
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
}

.spaidz-upload-progress-label-text {
  line-height: 1.2;
}

.spaidz-upload-progress-num {
  font-weight: 600;
}

.spaidz-upload-fee-callout {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(166, 174, 170, 0.35);
  background: rgba(166, 174, 170, 0.12);
}

.spaidz-upload-fee-callout p {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--spaidz-muted);
  line-height: 1.45;
}

.spaidz-upload-fee-callout strong {
  color: #fff;
}

.spaidz-upload-step-title {
  margin: 0 0 1rem;
  font-size: 1.15rem;
}

.spaidz-upload-field-title {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.95rem;
}

.spaidz-qc-card {
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid var(--spaidz-glass-border);
  background: rgba(255, 255, 255, 0.06);
}

.spaidz-qc-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.spaidz-qc-card-head span {
  font-size: 0.82rem;
  color: var(--spaidz-muted);
}

.spaidz-qc-open {
  width: 100%;
  margin-bottom: 0.85rem;
}

.spaidz-qc-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.82rem;
  line-height: 1.45;
  cursor: pointer;
}

.spaidz-type-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.spaidz-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 4.5rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--spaidz-glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--spaidz-muted);
  font: inherit;
  cursor: pointer;
}

.spaidz-type-btn .spaidz-type-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.spaidz-type-btn.is-selected {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.spaidz-format-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.spaidz-format-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--spaidz-glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.spaidz-format-card strong {
  display: block;
  margin-bottom: 0.2rem;
}

.spaidz-format-card span {
  font-size: 0.8rem;
  color: var(--spaidz-muted);
}

.spaidz-format-card.is-selected {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
}

.spaidz-format-check {
  color: var(--spaidz-fg);
}

.spaidz-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.spaidz-chip {
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--spaidz-glass-border);
  background: transparent;
  color: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.spaidz-chip.is-selected {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.spaidz-input {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--spaidz-glass-border);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
}

.spaidz-upload-nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.65rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--spaidz-glass-border);
}

.spaidz-upload-nav .spaidz-btn {
  margin-top: 0;
}

.spaidz-btn-save {
  background: #0a84ff;
  color: #fff;
  box-shadow: 0 4px 14px rgba(10, 132, 255, 0.35);
}

.spaidz-btn-save:hover {
  filter: brightness(1.08);
}

.spaidz-upload-nav #nextBtn {
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  box-shadow: none;
}

.spaidz-upload-nav #nextBtn:disabled {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.35);
}

@media (min-width: 720px) {
  .spaidz-upload-progress-steps {
    gap: 0.5rem;
  }
  .spaidz-upload-progress-step {
    font-size: 0.78rem;
  }
}

.spaidz-upload-section-card {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.spaidz-upload-section-card h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.spaidz-field-block {
  margin-bottom: 1rem;
}

.spaidz-textarea {
  min-height: 6rem;
  resize: vertical;
}

.spaidz-picker-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}

.spaidz-option-list {
  margin-top: 0.5rem;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.spaidz-option-list-scroll {
  max-height: 240px;
  overflow-y: auto;
}

.spaidz-option-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.65rem 1rem;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.spaidz-option-item.is-selected,
.spaidz-option-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.spaidz-runtime-row {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
}

.spaidz-runtime-row select {
  width: 100%;
  padding: 0.5rem;
  border-radius: 8px;
  background: #1a1a1a;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.spaidz-keyword-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.spaidz-keyword-row .spaidz-input {
  flex: 1;
}

.spaidz-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.spaidz-link-btn {
  background: none;
  border: 0;
  color: var(--spaidz-accent-light);
  cursor: pointer;
  font-size: 0.9rem;
}

.spaidz-link-danger {
  color: #ff6b6b;
}

.spaidz-cast-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.spaidz-cast-row-main {
  flex: 1;
  min-width: 0;
}

.spaidz-cast-headshot-thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.spaidz-cast-headshot-field {
  margin-bottom: 1rem;
}

.spaidz-cast-headshot-row {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.spaidz-cast-headshot-preview,
.spaidz-cast-headshot-placeholder {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.spaidz-cast-headshot-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  font-size: 2rem;
  color: #666;
}

.spaidz-cast-headshot-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: flex-start;
}

.spaidz-cast-headshot-actions input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.spaidz-cast-row span {
  display: block;
  font-size: 0.85rem;
  color: #999;
}

.spaidz-cast-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-shrink: 0;
}

.spaidz-inline-modal {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
}

.spaidz-inline-modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.spaidz-doc-row {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.spaidz-doc-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.spaidz-doc-status.is-done {
  color: var(--spaidz-accent-light);
}

.spaidz-info-box {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.9rem;
}

.spaidz-info-box ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.spaidz-info-warn {
  background: rgba(255, 165, 0, 0.12);
}

.spaidz-fee-page .spaidz-fee-price-card {
  margin: 1rem 0;
  padding: 1.1rem 1rem;
  text-align: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--spaidz-glass-border);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.spaidz-fee-price {
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

.spaidz-fee-disclosure {
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 180, 120, 0.95);
  background: rgba(255, 159, 10, 0.12);
  border: 1px solid rgba(255, 159, 10, 0.28);
}

.spaidz-fee-ack-row {
  margin: 0.75rem 0 1rem;
  align-items: flex-start;
}

.spaidz-fee-ack-row span {
  line-height: 1.4;
}

.spaidz-fee-footnote {
  margin: 1rem 0 0.75rem;
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
}

.spaidz-warn {
  color: #ffb347;
  font-size: 0.9rem;
}

.spaidz-ok {
  color: var(--spaidz-accent-light);
}

.spaidz-media-status {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.spaidz-media-status li {
  padding: 0.35rem 0;
  color: #bbb;
}

.spaidz-media-status li.is-done {
  color: var(--spaidz-accent-light);
}

.spaidz-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.65rem 0;
  cursor: pointer;
}

.spaidz-money-input {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.spaidz-cpi-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.75rem 0;
}

.spaidz-cpi-deposit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.spaidz-cpi-mandatory-note {
  margin-bottom: 0.85rem;
}

.spaidz-cpi-mandatory-lead {
  margin: 0;
  line-height: 1.45;
}

.spaidz-cpi-tip-body {
  margin: 0.65rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.spaidz-exclusive-lead {
  margin: 0 0 0.75rem;
  line-height: 1.45;
}

.spaidz-exclusive-benefits {
  margin: 0;
  padding-left: 1.15rem;
  line-height: 1.5;
}

.spaidz-exclusive-benefits li {
  margin-bottom: 0.35rem;
}

.spaidz-exclusive-choice-card.is-selected,
.spaidz-exclusive-optout-card.is-selected {
  border-color: var(--spaidz-accent);
  box-shadow: 0 0 0 1px rgba(0, 200, 120, 0.35);
}

.spaidz-exclusive-attest {
  margin: 0.75rem 0 1rem;
  align-items: flex-start;
}

.spaidz-help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(166, 174, 170, 0.55);
  background: rgba(255, 255, 255, 0.08);
  color: var(--spaidz-accent);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
}

.spaidz-check-list {
  display: grid;
  gap: 0.35rem;
}

.spaidz-check-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.spaidz-checklist {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0;
}

.spaidz-checklist-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 165, 0, 0.35);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
}

.spaidz-checklist-row.is-complete {
  border-color: rgba(255, 255, 255, 0.22);
}

.spaidz-checklist-row div {
  flex: 1;
}

.spaidz-checklist-row span {
  display: block;
  font-size: 0.85rem;
  color: #999;
}

.spaidz-checklist-icon {
  font-size: 1.1rem;
  width: 1.5rem;
  text-align: center;
}

.spaidz-fix-pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: 8px;
  background: #ffb347;
  color: #111;
}

.spaidz-review-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.spaidz-disclaimer {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #aaa;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.85rem 1rem;
  border-radius: 10px;
  margin: 1rem 0;
}

.spaidz-btn-submit {
  width: 100%;
  margin-top: 0.75rem;
}

.req {
  color: #ff6b6b;
}

.spaidz-drafts-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.spaidz-drafts-item {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.spaidz-drafts-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font: inherit;
}

.spaidz-drafts-row:hover {
  background: rgba(255, 255, 255, 0.1);
}

.spaidz-drafts-row-text strong {
  display: block;
}

.spaidz-drafts-delete {
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 107, 107, 0.35);
  background: transparent;
  color: #ff6b6b;
  cursor: pointer;
  font-size: 0.8rem;
}

.spaidz-drafts-empty {
  text-align: center;
  padding: 2rem 1rem;
}

.spaidz-drafts-empty h2 {
  margin-bottom: 0.5rem;
}

.spaidz-chevron {
  color: #888;
  font-size: 1.25rem;
}

.spaidz-stripe-element {
  margin: 1rem 0;
  padding: 0.75rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.spaidz-outcome-card .spaidz-wizard-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Top tab bar — iOS CreativeHomeView (desktop-friendly) */
.spaidz-tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding: calc(0.45rem + env(safe-area-inset-top, 0px)) max(0.75rem, 2vw) 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(18, 18, 18, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.spaidz-tab-bar-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
  width: 100%;
  max-width: min(72rem, 96vw);
}

.spaidz-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.4rem 0.35rem;
  color: var(--spaidz-muted);
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 500;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.spaidz-tab-item:hover {
  color: var(--spaidz-fg);
  background: rgba(255, 255, 255, 0.06);
}

.spaidz-tab-item.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.spaidz-tab-icon {
  display: flex;
  width: 1.35rem;
  height: 1.35rem;
}

.spaidz-tab-icon svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 720px) {
  body.spaidz-has-tab-bar {
    padding-top: calc(3.25rem + env(safe-area-inset-top, 0px));
  }

  .spaidz-tab-bar-inner {
    gap: 0.5rem;
  }

  .spaidz-tab-item {
    flex-direction: row;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.8125rem;
  }

  .spaidz-tab-icon {
    width: 1.15rem;
    height: 1.15rem;
  }
}

.spaidz-portal-header {
  padding: 0.75rem 0 1rem;
}

.spaidz-portal-header h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
}

  @media (min-width: 900px) {
  .spaidz-upload-app.spaidz-root-wide {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .spaidz-format-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .spaidz-chip-grid {
    gap: 0.5rem;
  }
}

/* Portal — stats, content list, status badges */
.spaidz-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .spaidz-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.spaidz-stat-card {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.spaidz-stat-card span {
  display: block;
  font-size: 0.78rem;
  color: var(--spaidz-muted);
  margin-bottom: 0.25rem;
}

.spaidz-stat-card strong {
  font-size: 1.15rem;
  font-weight: 600;
}

.spaidz-content-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.spaidz-content-item {
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.spaidz-content-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.spaidz-content-item-head strong {
  display: block;
  margin-bottom: 0.2rem;
}

.spaidz-content-item-head .spaidz-muted {
  font-size: 0.82rem;
}

.spaidz-status-badge {
  flex-shrink: 0;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.spaidz-status-active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.spaidz-status-review,
.spaidz-status-pending {
  background: rgba(255, 159, 10, 0.18);
  color: #ffb347;
}

.spaidz-status-rejected {
  background: rgba(255, 107, 107, 0.18);
  color: #ff8a8a;
}

.spaidz-status-expired,
.spaidz-status-muted,
.spaidz-status-draft {
  background: rgba(255, 255, 255, 0.08);
  color: var(--spaidz-muted);
}

.spaidz-content-rejection {
  margin-top: 0.65rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: rgba(255, 107, 107, 0.08);
  font-size: 0.88rem;
}

.spaidz-content-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  align-items: center;
}

.spaidz-content-action {
  font-size: 0.85rem;
  padding: 0.45rem 0.85rem;
}

.spaidz-content-note {
  font-size: 0.85rem;
}

.spaidz-stripe-element {
  margin: 1rem 0;
  padding: 0.75rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.spaidz-lang-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.spaidz-lang-row strong {
  min-width: 6rem;
}

.spaidz-episode-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.spaidz-episode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.spaidz-episode-row span {
  display: block;
  font-size: 0.82rem;
  color: var(--spaidz-muted);
}

.spaidz-episode-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.spaidz-portal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.spaidz-portal-header-row h1 {
  text-align: left;
}

.spaidz-legal-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.spaidz-legal-links a {
  color: var(--spaidz-accent-light);
  text-decoration: none;
  font-size: 0.92rem;
}

.spaidz-legal-links a:hover {
  text-decoration: underline;
}

.spaidz-chip-hint {
  font-size: 0.82rem;
  margin: 0.35rem 0 0.5rem;
}

.spaidz-header-compact {
  padding: 0.75rem 0 0.5rem;
}

.spaidz-header-compact .spaidz-logo-sm {
  max-width: 140px;
}

.spaidz-media-web-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.spaidz-media-web-nav .spaidz-btn {
  margin-top: 0;
}

.spaidz-resubmit-banner {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: rgba(255, 159, 10, 0.12);
  border: 1px solid rgba(255, 159, 10, 0.25);
  font-size: 0.9rem;
}

/* CPI marketing comparison popup */
body.spaidz-cpi-compare-open {
  overflow: hidden;
}

.spaidz-cpi-compare-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}

.spaidz-cpi-compare-backdrop[hidden] {
  display: none !important;
}

.spaidz-cpi-compare-modal {
  position: relative;
  width: min(680px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
  padding: 1.25rem 1.25rem 1rem;
  border-radius: 14px;
  background: #111;
  border: 1px solid var(--spaidz-glass-border, rgba(255, 255, 255, 0.12));
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.spaidz-cpi-compare-modal h2 {
  margin: 0 2rem 0.5rem 0;
  font-size: 1.15rem;
  line-height: 1.3;
}

.spaidz-cpi-compare-close {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  border: 0;
  background: none;
  color: #aaa;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.spaidz-cpi-compare-sub {
  margin: 0 0 1rem;
  font-size: 0.92rem;
}

.spaidz-cpi-compare-table-wrap {
  overflow-x: auto;
  margin-bottom: 0.85rem;
}

.spaidz-cpi-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.spaidz-cpi-compare-table th,
.spaidz-cpi-compare-table td {
  padding: 0.55rem 0.5rem;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.spaidz-cpi-compare-table thead th {
  color: #999;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.spaidz-cpi-compare-table thead .is-spaidz-head {
  color: var(--spaidz-accent-light, #4ade80);
}

.spaidz-cpi-compare-table tbody th {
  color: #fff;
  font-weight: 600;
  width: 28%;
  min-width: 5.5rem;
}

.spaidz-cpi-compare-table td.is-traditional {
  color: #aaa;
  width: 36%;
}

.spaidz-cpi-compare-table td.is-spaidz {
  color: #fff;
  font-weight: 500;
  width: 36%;
}

.spaidz-cpi-compare-foot {
  margin: 0 0 1rem;
  font-size: 0.82rem;
}

.spaidz-cpi-compare-gotit {
  width: 100%;
  margin-top: 0.25rem;
}

.spaidz-cpi-compare-info {
  margin: 0.85rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.spaidz-cpi-compare-info h3 {
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.spaidz-cpi-compare-info.is-up {
  border-color: rgba(74, 222, 128, 0.28);
  background: rgba(74, 222, 128, 0.08);
}

.spaidz-cpi-compare-info.is-up h3 {
  color: var(--spaidz-accent-light, #4ade80);
}

.spaidz-cpi-compare-info.is-avod {
  border-color: rgba(255, 159, 10, 0.28);
  background: rgba(255, 159, 10, 0.08);
}

.spaidz-cpi-compare-info.is-avod h3 {
  color: #ffb340;
}

.spaidz-cpi-compare-info.is-platform {
  border-color: rgba(255, 159, 10, 0.28);
  background: rgba(255, 159, 10, 0.08);
}

.spaidz-cpi-compare-info.is-platform h3 {
  color: #ffb340;
}

.spaidz-cpi-compare-info.is-spaidz-scenarios {
  border-color: rgba(74, 222, 128, 0.28);
  background: rgba(74, 222, 128, 0.08);
}

.spaidz-cpi-compare-info.is-spaidz-scenarios h3 {
  color: var(--spaidz-accent-light, #4ade80);
}

.spaidz-cpi-compare-disclaimer {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #bbb;
  font-style: italic;
}

.spaidz-cpi-platform-list,
.spaidz-cpi-scenario-list {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

.spaidz-cpi-platform-header {
  display: grid;
  grid-template-columns: 1fr 5.5rem 5.5rem;
  gap: 0.35rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #888;
  background: rgba(255, 255, 255, 0.04);
  text-align: right;
}

.spaidz-cpi-platform-header span:first-child {
  text-align: left;
}

.spaidz-cpi-platform-marketing-note {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #ccc;
}

.spaidz-cpi-platform-row {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.spaidz-cpi-platform-row.is-spaidz-row {
  background: rgba(74, 222, 128, 0.06);
}

.spaidz-cpi-platform-row.is-spaidz-row strong,
.spaidz-cpi-platform-row.is-spaidz-row .spaidz-cpi-platform-est,
.spaidz-cpi-platform-row.is-spaidz-row .spaidz-cpi-platform-mkt {
  color: var(--spaidz-accent-light, #4ade80);
}

.spaidz-cpi-platform-row:last-child {
  border-bottom: 0;
}

.spaidz-cpi-platform-head {
  display: grid;
  grid-template-columns: 1fr 5.5rem 5.5rem;
  gap: 0.35rem;
  align-items: baseline;
  font-size: 0.84rem;
  text-align: right;
}

.spaidz-cpi-platform-head strong {
  text-align: left;
}

.spaidz-cpi-platform-mkt {
  color: #ddd;
  font-size: 0.78rem;
  font-weight: 600;
}

.spaidz-cpi-platform-est {
  color: #ffb340;
  font-weight: 700;
  font-size: 0.78rem;
}

.spaidz-cpi-platform-route,
.spaidz-cpi-platform-note {
  font-size: 0.78rem;
  color: #999;
  line-height: 1.35;
  margin-top: 0.2rem;
}

.spaidz-cpi-marketing-budget-note {
  margin: 0.45rem 0 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

.spaidz-cpi-scenario-header {
  display: flex;
  justify-content: space-between;
  padding: 0.45rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #888;
  background: rgba(255, 255, 255, 0.04);
}

.spaidz-cpi-scenario-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.spaidz-cpi-scenario-row:last-child {
  border-bottom: 0;
}

.spaidz-cpi-scenario-label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.82rem;
}

.spaidz-cpi-scenario-label span {
  font-size: 0.75rem;
  color: #999;
}

.spaidz-cpi-scenario-up {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--spaidz-accent-light, #4ade80);
  white-space: nowrap;
}

.spaidz-cpi-scenario-foot {
  margin: 0.55rem 0 0;
  font-size: 0.75rem;
  color: #888;
  line-height: 1.35;
}

.spaidz-cpi-compare-info.is-passive {
  border-color: rgba(96, 165, 250, 0.28);
  background: rgba(96, 165, 250, 0.08);
}

.spaidz-cpi-compare-info.is-passive h3 {
  color: #60a5fa;
}

.spaidz-cpi-passive-note {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #ccc;
}

.spaidz-cpi-passive-min-deposit {
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--spaidz-accent-light, #4ade80);
  background: rgba(74, 222, 128, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.spaidz-cpi-passive-list {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

.spaidz-cpi-passive-header {
  display: grid;
  grid-template-columns: 1fr 4.25rem 4.25rem 4.25rem;
  gap: 0.25rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #888;
  background: rgba(255, 255, 255, 0.04);
  text-align: right;
}

.spaidz-cpi-passive-header span:first-child {
  text-align: left;
}

.spaidz-cpi-passive-row {
  padding: 0.55rem 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.spaidz-cpi-passive-row:last-child {
  border-bottom: 0;
}

.spaidz-cpi-passive-head {
  display: grid;
  grid-template-columns: 1fr 4.25rem 4.25rem 4.25rem;
  gap: 0.25rem;
  align-items: baseline;
  font-size: 0.8rem;
  text-align: right;
}

.spaidz-cpi-passive-head strong {
  text-align: left;
  font-size: 0.82rem;
}

.spaidz-cpi-passive-mkt {
  color: #ddd;
  font-size: 0.72rem;
  font-weight: 600;
}

.spaidz-cpi-passive-time {
  color: #999;
  font-size: 0.68rem;
  line-height: 1.2;
}

.spaidz-cpi-passive-earn {
  color: #60a5fa;
  font-size: 0.72rem;
  font-weight: 700;
}

.spaidz-cpi-passive-row.is-spaidz-row {
  background: rgba(74, 222, 128, 0.06);
}

.spaidz-cpi-passive-row.is-spaidz-row strong,
.spaidz-cpi-passive-row.is-spaidz-row .spaidz-cpi-passive-earn {
  color: var(--spaidz-accent-light, #4ade80);
}

.spaidz-cpi-compare-info p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
}

.spaidz-cpi-compare-separation {
  margin: 0.85rem 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

.spaidz-cpi-mandatory-note .spaidz-cpi-compare-link {
  margin-top: 0.35rem;
  padding: 0;
  font-size: 0.88rem;
}

.spaidz-cpi-compare-trigger {
  margin-top: 0.5rem;
}

.spaidz-cpi-table-viewership-disc {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

.spaidz-coupon-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.spaidz-coupon-row input {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
}

.spaidz-fee-strike {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85em;
  margin-right: 0.35rem;
}

.spaidz-fee-page .ok {
  color: #4ade80;
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

/* Discrete V1 help + report (creators portal) */
.spaidz-support-chip {
  position: fixed;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 1200;
  display: flex;
  gap: 0.35rem;
  pointer-events: none;
}

.spaidz-support-chip a,
.spaidz-support-chip button {
  pointer-events: auto;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}

.spaidz-support-chip-report {
  font-size: 0.85rem;
}

.spaidz-support-chip a:hover,
.spaidz-support-chip button:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}

.spaidz-help-item {
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.5rem;
}

.spaidz-help-item summary {
  cursor: pointer;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.35rem;
}

.spaidz-help-item p {
  margin: 0.35rem 0 0;
  color: #aaa;
  font-size: 0.92rem;
  line-height: 1.45;
}

.spaidz-cpi-deposit-note {
  margin-top: 0.35rem;
}

/* CPI per-completion genre guide */
.spaidz-cpi-perview-inline {
  margin: 0.85rem 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.spaidz-cpi-perview-inline-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.spaidz-cpi-perview-inline-hint {
  margin: 0.5rem 0;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: rgba(166, 174, 170, 0.12);
  font-size: 0.9rem;
  color: #ddd;
}

.spaidz-cpi-perview-link {
  margin-top: 0.35rem;
}

.spaidz-cpi-perview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.25rem 1rem 2rem;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.spaidz-cpi-perview-backdrop[hidden] {
  display: none !important;
}

body.spaidz-cpi-perview-open {
  overflow: hidden;
}

.spaidz-cpi-perview-modal {
  position: relative;
  width: min(42rem, 100%);
  margin: auto;
  padding: 1.35rem 1.25rem 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #111;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}

.spaidz-cpi-perview-close {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  border: 0;
  background: transparent;
  color: #aaa;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.spaidz-cpi-perview-modal h2 {
  margin: 0 2rem 0.75rem 0;
  font-size: 1.2rem;
}

.spaidz-cpi-perview-disclaimer {
  margin: 0.75rem 0;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 159, 10, 0.12);
  border: 1px solid rgba(255, 159, 10, 0.35);
  color: #f5c26b;
  font-size: 0.85rem;
}

.spaidz-cpi-perview-table-wrap {
  overflow-x: auto;
  margin: 1rem 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.spaidz-cpi-perview-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.spaidz-cpi-perview-table th,
.spaidz-cpi-perview-table td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
  vertical-align: top;
}

.spaidz-cpi-perview-table thead th {
  font-size: 0.72rem;
  color: #999;
  background: rgba(255, 255, 255, 0.04);
}

.spaidz-cpi-perview-table .is-neutral-head,
.spaidz-cpi-perview-table .is-neutral {
  color: var(--spaidz-accent-light);
}

.spaidz-cpi-history-card {
  margin-top: 1.25rem;
}

.spaidz-cpi-history-title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.spaidz-cpi-history-table-wrap {
  overflow-x: auto;
  margin-top: 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.spaidz-cpi-history-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.spaidz-cpi-history-table th,
.spaidz-cpi-history-table td {
  padding: 0.6rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
}

.spaidz-cpi-history-table thead th {
  font-size: 0.72rem;
  color: #999;
  background: rgba(255, 255, 255, 0.04);
}

.spaidz-cpi-history-table tbody tr:last-child td {
  border-bottom: none;
}

.spaidz-cpi-perview-row.is-highlighted {
  background: rgba(166, 174, 170, 0.1);
}

.spaidz-cpi-perview-row.is-highlighted th {
  color: var(--spaidz-accent);
}

.spaidz-cpi-perview-row.is-highlighted .is-neutral {
  font-weight: 600;
  color: var(--spaidz-accent);
}

.spaidz-cpi-perview-tag {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--spaidz-accent);
}

.spaidz-cpi-perview-section {
  margin-top: 1rem;
}

.spaidz-cpi-perview-section h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: var(--spaidz-accent);
}

.spaidz-cpi-perview-gotit {
  margin-top: 1.25rem;
  width: 100%;
}

/* ——— Site footer (all creators pages) ——— */
body.spaidz-has-site-footer {
  padding-bottom: 0;
}

.spaidz-site-footer {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 1.75rem 1.25rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.55);
}

body.spaidz-auth-landing .spaidz-site-footer {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}

body.spaidz-has-tab-bar .spaidz-site-footer {
  margin-bottom: 0;
}

.spaidz-site-footer-inner {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.spaidz-blog-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin-bottom: 1.15rem;
}

.spaidz-blog-btn {
  min-width: 10.5rem;
  text-decoration: none;
  font-size: 0.9rem;
}

.spaidz-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: center;
  margin-bottom: 0.85rem;
}

.spaidz-footer-legal a {
  color: var(--spaidz-muted);
  text-decoration: none;
  font-size: 0.82rem;
}

.spaidz-footer-legal a:hover {
  color: var(--spaidz-accent-light);
  text-decoration: underline;
}

.spaidz-footer-disclaimer {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  color: rgba(161, 161, 166, 0.85);
}

.spaidz-footer-copy {
  margin: 0;
  font-size: 0.72rem;
  color: rgba(161, 161, 166, 0.65);
}

.spaidz-signup-legal {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
}

.spaidz-signup-bridge {
  margin: 0.65rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
}

.spaidz-signup-legal a {
  color: var(--spaidz-accent-light);
  text-decoration: none;
}

.spaidz-signup-legal a:hover {
  text-decoration: underline;
}

.spaidz-auth-blog-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.15rem 0 0;
  max-width: 34rem;
}

.spaidz-blog-buttons-inline {
  justify-content: flex-start;
  margin-bottom: 0;
}

.spaidz-inline-link {
  color: var(--spaidz-accent-light);
  text-decoration: underline;
}

.spaidz-vetting-row .spaidz-inline-link {
  font-weight: 500;
}