:root {
  color-scheme: dark;
  --bg: #0b1118;
  --bg-soft: #101923;
  --surface: #141d28;
  --surface-2: #1b2734;
  --surface-3: #223243;
  --brand-ink: #f3f8ff;
  --brand-mint: #35d19a;
  --brand-sky: #67a7ff;
  --brand-indigo: #8ea3ff;
  --brand-gold: #f6bd58;
  --brand-coral: #f2767c;
  --ink: #f3f8ff;
  --muted: #aebbc9;
  --line: #314154;
  --primary: #35d19a;
  --primary-dark: #1fa879;
  --accent: #67a7ff;
  --violet: #a78bfa;
  --amber: #f6bd58;
  --red: #f2767c;
  --shadow: 0 20px 52px rgba(0, 0, 0, 0.24);
  --soft-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  --radius: 8px;
  --fx-border-standard: rgb(255 255 255 / 0.096);
  --fx-border-major: rgb(255 255 255 / 0.145);
  --fx-border-reward: color-mix(in srgb, var(--primary) 70%, var(--accent));
  --fx-glass-standard:
    linear-gradient(145deg, rgb(255 255 255 / 0.058), rgb(255 255 255 / 0.018)),
    color-mix(in srgb, var(--surface) 78%, transparent);
  --fx-glass-major:
    radial-gradient(ellipse at 14% -2%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 43%),
    radial-gradient(ellipse at 92% 6%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 48%),
    linear-gradient(145deg, rgb(255 255 255 / 0.092), rgb(255 255 255 / 0.034)),
    color-mix(in srgb, var(--surface) 70%, transparent);
  --fx-glass-reward:
    radial-gradient(circle at 10% 16%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 44%),
    radial-gradient(ellipse at 92% 18%, color-mix(in srgb, var(--brand-gold) 16%, transparent), transparent 48%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, var(--surface-2)), color-mix(in srgb, var(--accent) 16%, var(--surface-2)));
  --fx-inner-highlight:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    inset 0 -1px 0 rgb(255 255 255 / 0.032);
  --fx-shadow-standard: 0 15px 36px rgb(0 0 0 / 0.18);
  --fx-shadow-major:
    0 24px 58px rgb(0 0 0 / 0.25),
    0 0 36px color-mix(in srgb, var(--primary) 8%, transparent),
    0 0 76px color-mix(in srgb, var(--accent) 3.6%, transparent);
  --fx-shadow-hover:
    0 0 0 1px color-mix(in srgb, var(--primary) 17%, transparent) inset,
    0 17px 42px rgb(0 0 0 / 0.2),
    0 0 36px color-mix(in srgb, var(--primary) 14%, transparent),
    0 0 64px color-mix(in srgb, var(--accent) 4%, transparent);
  --fx-shadow-reward:
    0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent) inset,
    0 0 36px color-mix(in srgb, var(--primary) 30%, transparent),
    0 0 72px color-mix(in srgb, var(--brand-gold) 8%, transparent),
    0 16px 36px rgb(0 0 0 / 0.18);
  --fx-atmosphere-green: rgb(53 209 154 / 0.16);
  --fx-atmosphere-blue: rgb(103 167 255 / 0.16);
  --fx-atmosphere-gold: rgb(246 189 88 / 0.1);
  --fx-hover-transform: translateY(-2px) scale(1.006);
  --fx-major-cycle: 10.5s;
  --fx-reward-cycle: 8.8s;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

/* Admin advertiser QA runs in a credentialless, sandboxed frame. */
.admin-qa-test-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 8, 19, 0.92);
  backdrop-filter: none;
}

body.admin-qa-modal-open {
  overflow: hidden;
}

body.admin-qa-modal-open > :where(.bg-glow-container, #adminShell, #adminDrawerBackdrop, #adminDrawer, #adminToast) {
  visibility: hidden !important;
  content-visibility: hidden;
  pointer-events: none !important;
}

.admin-qa-test-modal-panel {
  width: min(1500px, 100%);
  height: min(94vh, 1050px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(84, 220, 134, 0.42);
  border-radius: 20px;
  background: #07111f;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

.admin-qa-test-modal-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.admin-qa-test-modal-panel > header h2,
.admin-qa-test-modal-panel > header p {
  margin: 4px 0 0;
}

.admin-qa-test-modal-panel > header p {
  max-width: 920px;
  color: var(--muted);
}

.admin-qa-test-frame {
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  background: #030712;
}

.admin-qa-preset-selector {
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 64px);
}

.admin-qa-preset-selector form {
  width: min(820px, 100%);
  display: grid;
  gap: 22px;
  padding: clamp(20px, 4vw, 38px);
  border: 1px solid rgba(74, 222, 128, 0.32);
  border-radius: 20px;
  background: rgba(5, 28, 23, 0.88);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.admin-qa-preset-selector h3,
.admin-qa-preset-selector p {
  margin: 5px 0 0;
}

.admin-qa-preset-selector p {
  color: var(--muted);
}

.admin-qa-simulated-warning {
  padding: 12px 16px;
  border: 1px solid rgba(134, 239, 172, 0.72);
  border-radius: 12px;
  background: #07552f;
  color: #f0fdf4;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-align: center;
  text-wrap: balance;
}

.admin-qa-preset-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-qa-preset-options label {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 16px;
  background: rgba(2, 14, 26, 0.72);
  cursor: pointer;
}

.admin-qa-preset-options label:has(input:checked) {
  border-color: rgba(74, 222, 128, 0.86);
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.16);
}

.admin-qa-preset-options input {
  flex: 0 0 auto;
  margin-top: 4px;
}

.admin-qa-preset-options span,
.admin-qa-preset-options strong,
.admin-qa-preset-options small {
  min-width: 0;
  display: block;
}

.admin-qa-preset-options small {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.45;
}

.admin-qa-test-viewer-stage {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.admin-qa-launch-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(74, 222, 128, 0.28);
  background: rgba(5, 46, 30, 0.82);
  color: #dcfce7;
}

.admin-qa-launch-summary span {
  color: #bbf7d0;
  font-size: 0.78rem;
  text-align: right;
}

.admin-qa-viewer-page {
  padding-top: 54px;
}

/* Viewer performance mode keeps the premium static glass treatment while
   reserving motion for small compositor layers and completion celebrations. */
body.viewer-runtime-performance-mode::before {
  animation: none !important;
}

body.viewer-runtime-performance-mode .bg-glow-container {
  display: none !important;
}

body.viewer-runtime-performance-mode :where(.viewer-panel, .ad-frame-shell, .reward-complete-shell) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  filter: none !important;
}

body.viewer-runtime-performance-mode .is-hidden :where(*, *::before, *::after),
body.viewer-performance-paused :where(*, *::before, *::after),
.viewer-effects-paused :where(*, *::before, *::after) {
  animation-play-state: paused !important;
}

body.viewer-runtime-performance-mode .viewer-timer-progress > span {
  width: 100%;
  transform: translateZ(0) scaleX(0);
  transform-origin: left center;
  transition: box-shadow 180ms linear;
  will-change: transform;
}

body.viewer-runtime-performance-mode .viewer-timer-progress.is-filling > span,
body.viewer-runtime-performance-mode .viewer-timer-progress.is-progress-pulse > span {
  animation: none;
}

body.viewer-runtime-performance-mode .viewer-timer-progress > span::before,
body.viewer-runtime-performance-mode .viewer-timer-progress > span::after {
  content: none !important;
  animation: none !important;
}

body.viewer-runtime-performance-mode :where(#viewerXpProgressBar, #rewardCelebrationXpProgress) {
  width: 100%;
  transform: translateZ(0) scaleX(0);
  transform-origin: left center;
  transition:
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 220ms ease,
    box-shadow 320ms ease;
  will-change: transform;
}

.admin-qa-viewer-page .viewer-global-nav,
.admin-qa-viewer-page .viewer-brand-link,
.admin-qa-viewer-page .viewer-safety-strip,
.admin-qa-viewer-page .reward-next-actions {
  display: none !important;
}

.admin-qa-permanent-banner {
  position: fixed;
  inset: 0 0 auto;
  z-index: 11000;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(134, 239, 172, 0.72);
  background: #07552f;
  color: #f0fdf4;
  font-size: clamp(0.76rem, 1.25vw, 0.95rem);
  font-weight: 900;
  letter-spacing: 0.035em;
  text-align: center;
  text-wrap: balance;
  box-shadow: 0 8px 32px rgba(3, 84, 46, 0.42);
}

.admin-qa-viewer-page .reward-celebration.is-admin-qa-simulated {
  padding-top: max(64px, env(safe-area-inset-top));
}

body.admin-qa-viewer-page.reward-overlay-open > .reward-celebration.is-admin-qa-simulated {
  padding-top: max(58px, env(safe-area-inset-top));
}

body.admin-qa-viewer-page.reward-overlay-open > .reward-celebration.is-admin-qa-simulated .reward-complete-shell {
  max-height: calc(100dvh - 66px);
}

.admin-qa-viewer-page .reward-celebration.is-admin-qa-simulated .reward-next-actions {
  display: grid !important;
}

.admin-qa-viewer-page .reward-celebration.is-admin-qa-simulated .reward-action-grid > a {
  display: none;
}

.admin-qa-viewer-page .reward-celebration.is-admin-qa-simulated .admin-qa-reward-action {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

.admin-qa-test-controls,
.admin-qa-post-test-report {
  width: min(1180px, calc(100% - 32px));
  margin: 18px auto;
  padding: 18px;
  border: 1px solid rgba(74, 222, 128, 0.34);
  border-radius: 16px;
  background: rgba(5, 46, 30, 0.82);
}

.admin-qa-test-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.admin-qa-test-controls strong,
.admin-qa-test-controls small {
  display: block;
}

.admin-qa-test-controls small {
  margin-top: 4px;
  color: #bbf7d0;
}

.admin-qa-test-control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-qa-post-test-report h2,
.admin-qa-post-test-report p {
  margin: 5px 0 0;
}

.admin-qa-post-test-report dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}

.admin-qa-post-test-report dl > div {
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
  background: rgba(2, 20, 13, 0.72);
}

.admin-qa-post-test-report dt,
.admin-qa-post-test-report dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-qa-post-test-report dt {
  color: #86efac;
  font-size: 0.78rem;
}

.admin-qa-post-test-report dd {
  margin-top: 5px;
  font-weight: 800;
}

.admin-qa-stage-report {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.admin-qa-stage-report article {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 11px 13px;
  border-left: 3px solid #94a3b8;
  border-radius: 10px;
  background: rgba(2, 20, 13, 0.72);
}

.admin-qa-stage-report article.is-passed {
  border-left-color: #4ade80;
}

.admin-qa-stage-report article.is-failed {
  border-left-color: #fb7185;
}

.admin-qa-stage-report strong,
.admin-qa-stage-report small {
  display: block;
}

.admin-qa-stage-report small {
  margin-top: 3px;
  color: #bbf7d0;
}

.admin-qa-stage-report span {
  flex: 0 0 auto;
  color: #dcfce7;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-member-eligibility-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
}

.admin-member-eligibility-card h3,
.admin-member-eligibility-card p {
  margin: 4px 0 0;
}

.admin-member-eligibility-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.admin-member-eligibility-form label,
.admin-member-eligibility-form label span {
  display: block;
  min-width: 0;
}

.admin-member-eligibility-form label span {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.admin-member-eligibility-form input {
  width: 100%;
  min-width: 0;
}

.admin-member-eligibility-result {
  min-width: 0;
}

.admin-member-eligibility-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--amber) 10%, var(--surface));
}

.admin-member-eligibility-result-head.is-included {
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
}

.admin-member-eligibility-result-head strong,
.admin-member-eligibility-result-head small {
  display: block;
  overflow-wrap: anywhere;
}

.admin-member-eligibility-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.admin-member-eligibility-facts span {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-wrap: anywhere;
}

.admin-member-eligibility-facts b {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.74rem;
}

.admin-member-eligibility-reasons {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.admin-member-eligibility-reasons article {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
}

.admin-member-eligibility-reasons strong,
.admin-member-eligibility-reasons small {
  display: block;
}

.admin-member-eligibility-reasons small {
  margin-top: 3px;
  color: var(--muted);
}

.admin-member-eligibility-reasons code {
  max-width: 45%;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.7rem;
}

@media (max-width: 800px) {
  .admin-qa-test-modal {
    padding: 0;
  }

  .admin-qa-test-modal-panel {
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .admin-qa-test-modal-panel > header {
    gap: 12px;
    padding: 12px;
  }

  .admin-qa-test-modal-panel > header p {
    display: none;
  }

  .admin-qa-preset-selector {
    place-items: start stretch;
    padding: 14px;
  }

  .admin-qa-preset-selector form {
    padding: 18px;
  }

  .admin-qa-preset-options {
    grid-template-columns: 1fr;
  }

  .admin-qa-launch-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 9px 12px;
  }

  .admin-qa-launch-summary span {
    text-align: left;
  }

  .admin-qa-test-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-qa-test-control-actions > * {
    flex: 1 1 140px;
  }

  .admin-qa-post-test-report dl {
    grid-template-columns: 1fr;
  }

  .admin-qa-stage-report article {
    flex-direction: column;
  }

  .admin-member-eligibility-form,
  .admin-member-eligibility-facts {
    grid-template-columns: 1fr;
  }

  .admin-member-eligibility-form button {
    width: 100%;
  }

  .admin-member-eligibility-reasons article {
    flex-direction: column;
  }

  .admin-member-eligibility-reasons code {
    max-width: 100%;
  }
}

body[data-theme="light"] {
  color-scheme: light;
  --bg: #eef3f8;
  --bg-soft: #e5edf6;
  --surface: #ffffff;
  --surface-2: #f7fafd;
  --surface-3: #eaf1f8;
  --ink: #111c28;
  --muted: #536377;
  --line: #ccd8e5;
  --brand-ink: #16202d;
  --brand-mint: #1f9d68;
  --brand-sky: #2563a8;
  --brand-indigo: #5767c7;
  --brand-gold: #b7791f;
  --brand-coral: #c44949;
  --primary: #1f9d68;
  --primary-dark: #14724c;
  --accent: #2563a8;
  --amber: #b7791f;
  --red: #c44949;
  --shadow: 0 18px 44px rgba(22, 32, 45, 0.12);
  --soft-shadow: 0 8px 22px rgba(22, 32, 45, 0.09);
  --fx-border-standard: rgb(15 23 42 / 0.1);
  --fx-border-major: rgb(15 23 42 / 0.14);
  --fx-glass-standard:
    linear-gradient(145deg, rgb(255 255 255 / 0.72), rgb(255 255 255 / 0.46)),
    color-mix(in srgb, var(--surface) 88%, transparent);
  --fx-glass-major:
    radial-gradient(ellipse at 14% 0%, rgb(34 197 94 / 0.09), transparent 42%),
    radial-gradient(ellipse at 94% 8%, rgb(37 99 235 / 0.055), transparent 48%),
    linear-gradient(145deg, rgb(255 255 255 / 0.84), rgb(255 255 255 / 0.58));
  --fx-inner-highlight:
    inset 0 1px 0 rgb(255 255 255 / 0.7),
    inset 0 -1px 0 rgb(15 23 42 / 0.025);
  --fx-shadow-standard: 0 11px 26px rgb(15 23 42 / 0.09);
  --fx-shadow-major:
    0 20px 44px rgb(15 23 42 / 0.12),
    0 0 24px color-mix(in srgb, var(--primary) 4%, transparent);
  --fx-shadow-hover:
    0 0 0 1px color-mix(in srgb, var(--primary) 11%, transparent) inset,
    0 14px 30px rgb(15 23 42 / 0.1),
    0 0 22px color-mix(in srgb, var(--primary) 7%, transparent);
  --fx-atmosphere-green: rgb(31 157 104 / 0.08);
  --fx-atmosphere-blue: rgb(37 99 168 / 0.075);
  --fx-atmosphere-gold: rgb(183 121 31 / 0.06);
}

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
  scrollbar-gutter: stable;
}

body {
  min-width: 320px;
  margin: 0;
  background:
    linear-gradient(135deg, rgba(53, 209, 154, 0.1), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 42%, var(--bg)), var(--bg) 34rem),
    var(--bg);
  color: var(--ink);
}

body[data-theme="light"] {
  background:
    linear-gradient(180deg, #f8fbfe 0, var(--bg) 26rem),
    var(--bg);
}

.test-mode-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 9px 14px;
  background: #f5b84b;
  color: #1d1300;
  font-size: 0.88rem;
  font-weight: 900;
  text-align: center;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

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

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 78%, #ffffff);
  outline-offset: 3px;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

.is-hidden {
  display: none !important;
}

body.is-booting .auth-screen,
body.is-booting .app-shell,
body.is-booting .member-status-bar {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.auth-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 28px;
  align-items: start;
  width: min(1480px, calc(100vw - 36px));
  min-height: calc(100vh - 34px);
  margin: 0 auto;
  padding: 32px;
}

.auth-copy h1 {
  max-width: 780px;
  margin: 0 0 16px;
  font-size: clamp(2.4rem, 5.6vw, 5rem);
  line-height: 1.06;
  letter-spacing: 0;
}

.auth-lede {
  max-width: 680px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

.auth-brand {
  margin-bottom: 44px;
}

.landing-home-copy .auth-brand {
  margin-bottom: 22px;
}

.development-notice {
  display: inline-flex;
  max-width: 680px;
  margin: 0 0 24px;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 42%, var(--line));
  border-radius: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--brand-gold) 11%, var(--surface));
  color: color-mix(in srgb, var(--ink) 86%, var(--brand-gold));
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.45;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  margin: 22px 0;
}

.standalone-audience-grid {
  margin-top: 28px;
}

.audience-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: var(--radius);
  padding: 20px;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--brand-sky) 8%, var(--surface))),
    var(--surface);
  box-shadow: var(--shadow);
}

.audience-card::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 26%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 30%);
  content: "";
  opacity: 0.84;
}

.audience-card > * {
  position: relative;
  z-index: 1;
}

.audience-card h2,
.platform-proof h2,
.landing-workflow h2 {
  margin: 6px 0 8px;
}

.audience-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.audience-card .audience-note {
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  padding-top: 12px;
  color: color-mix(in srgb, var(--muted) 86%, var(--ink));
  font-size: 0.88rem;
  line-height: 1.45;
}

.audience-card-users {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
}

.audience-card-advertisers {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

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

.benefit-list li {
  position: relative;
  padding-left: 28px;
  color: color-mix(in srgb, var(--ink) 88%, var(--muted));
  line-height: 1.45;
}

.benefit-list li::before {
  position: absolute;
  left: 0;
  top: 0.08rem;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  color: var(--primary);
  content: "+";
  font-size: 0.74rem;
  font-weight: 1000;
}

.audience-card-footer {
  display: grid;
  gap: 9px;
  margin-top: auto;
}

.audience-card-footer .primary-button {
  width: 100%;
  min-height: 46px;
}

.audience-card-footer small {
  color: var(--muted);
  line-height: 1.45;
}

.landing-workflow,
.platform-proof {
  margin: 22px 0;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: var(--radius);
  padding: 18px;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow: var(--soft-shadow);
}

.compact-section-header {
  margin-bottom: 14px;
}

.compact-benefits {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.auth-facts,
.metric-grid,
.content-grid,
.ad-grid,
.tier-grid,
.admin-grid {
  display: grid;
  gap: 16px;
}

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

.auth-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.auth-path div,
.onboarding-grid div,
.flow-steps div {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: var(--soft-shadow);
}

.auth-path span,
.onboarding-grid span,
.flow-steps span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 900;
}

.auth-path small,
.onboarding-grid small,
.flow-steps small {
  color: var(--muted);
  line-height: 1.45;
}

.auth-facts div,
.auth-panel,
.panel,
.metric-card,
.ad-card,
.timer-card,
.reward-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}

.auth-panel,
.panel,
.metric-card,
.ad-card {
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.panel:hover,
.metric-card:hover,
.ad-card:hover {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

.auth-facts div {
  padding: 16px;
}

.testing-credentials-card {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--line));
  border-radius: var(--radius);
  padding: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--amber) 10%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface) 94%, transparent);
}

.testing-credentials-card > span,
.testing-credentials-card dt {
  color: var(--muted);
}

.testing-credentials-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.testing-credentials-card dl div {
  display: grid;
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.testing-credentials-card dt {
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.testing-credentials-card dd {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
}

.testing-credentials-card code {
  display: block;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 8px;
  padding: 5px 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.auth-facts strong,
.auth-facts span,
.brand strong,
.brand span,
.account-chip strong,
.account-chip span {
  display: block;
}

.auth-facts span,
.demo-note,
.panel p,
.metric-card small,
.ad-card p,
.ledger small,
.referral-row span,
.campaign-row span,
.payout-row span,
.admin-row span,
.viewer-note {
  color: var(--muted);
  line-height: 1.5;
}

.auth-panel {
  position: sticky;
  top: 56px;
  padding: 20px;
}

.auth-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.auth-panel-heading {
  margin-bottom: 18px;
}

.auth-panel-heading h2 {
  margin: 5px 0 8px;
  font-size: 1.8rem;
}

.auth-panel-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.create-account-link {
  width: 100%;
  margin-top: 14px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.auth-tabs button {
  min-height: 44px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.auth-tabs button:last-child {
  border-right: 0;
}

.auth-tabs button.is-active {
  background: var(--primary);
  color: #07130f;
}

.auth-form {
  display: none;
  gap: 14px;
}

.auth-form.is-visible {
  display: grid;
}

.auth-form-guided {
  position: relative;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 54%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
  box-shadow:
    0 22px 48px color-mix(in srgb, var(--primary) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  animation: guidedFormPulse 1.2s ease-out 1;
}

.advertiser-auth-upgrade #advertiserRegisterForm button[type="submit"] {
  display: none;
}

@keyframes guidedFormPulse {
  0% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 26%, transparent);
  }
  45% {
    transform: translateY(-2px);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--primary) 8%, transparent);
  }
  100% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-form-guided {
    animation: none;
    transform: none;
  }
}

#authMessage {
  min-height: 24px;
  margin: 14px 0 0;
  font-weight: 800;
}

.demo-note {
  margin: 8px 0 0;
  font-size: 0.9rem;
}

.policy-links {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.policy-links a,
.sidebar-link {
  color: var(--primary);
  font-weight: 800;
}

.signup-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.52fr);
  gap: 28px;
  align-items: start;
  width: min(1180px, calc(100vw - 48px));
  min-height: calc(100vh - 36px);
  margin: 0 auto;
  padding: 36px 0 48px;
}

.signup-hero {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.signup-hero .auth-brand {
  margin-bottom: 10px;
}

.signup-hero h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.35rem, 5vw, 4.8rem);
  line-height: 0.98;
}

.signup-hero > p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.signup-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.signup-benefit-grid div {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 160px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: var(--radius);
  padding: 14px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--brand-sky) 7%, var(--surface))),
    var(--surface);
  box-shadow: var(--soft-shadow);
}

.signup-benefit-grid span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 17%, var(--surface-2));
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 900;
}

.signup-benefit-grid strong {
  display: block;
}

.signup-benefit-grid small {
  color: var(--muted);
  line-height: 1.45;
}

.signup-referral-program {
  margin-top: 4px;
}

.signup-card {
  position: sticky;
  top: 58px;
  display: grid;
  gap: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
  border-radius: var(--radius);
  padding: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-2) 62%, var(--surface))),
    var(--surface);
  box-shadow: var(--shadow);
}

.signup-card h2 {
  margin: 5px 0 8px;
  font-size: 1.65rem;
}

.signup-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.signup-method-tabs {
  display: grid;
  grid-template-columns: minmax(92px, 0.72fr) minmax(0, 1.28fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.018)),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
  box-shadow: var(--fx-inner-highlight), 0 12px 26px rgb(0 0 0 / 0.16);
}

.signup-method-tab {
  min-height: 46px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  padding: 10px 12px;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 90%, var(--ink));
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1.2;
}

.signup-method-tab:last-child {
  border-right: 0;
}

.signup-method-tab.is-active {
  background:
    radial-gradient(circle at 22% 10%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 48%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 28%, var(--surface-2)), color-mix(in srgb, var(--accent) 16%, var(--surface-2)));
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 0 24px color-mix(in srgb, var(--primary) 15%, transparent);
}

.google-signin-panel {
  display: grid;
  gap: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius);
  padding: 14px;
  background:
    radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 40%),
    color-mix(in srgb, var(--surface-2) 84%, transparent);
  box-shadow: var(--fx-inner-highlight), var(--soft-shadow);
}

.google-signin-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  width: 100%;
  border: 1px solid color-mix(in srgb, #ffffff 18%, var(--line));
  border-radius: var(--radius);
  padding: 10px 14px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.13), rgb(255 255 255 / 0.045)),
    color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--ink);
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.13),
    0 14px 30px rgb(0 0 0 / 0.18);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.google-signin-button:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: var(--fx-shadow-hover);
  transform: translateY(-1px);
}

.google-g-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  color: #4285f4;
  font-weight: 1000;
  box-shadow: 0 0 18px rgb(103 167 255 / 0.2);
}

.google-signin-panel small {
  color: var(--muted);
  line-height: 1.45;
}

#signupForm {
  display: grid;
  gap: 13px;
}

.optional-profile-fields,
.profile-form {
  display: grid;
  gap: 14px;
}

.optional-profile-fields {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--radius);
  padding: 16px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}

.optional-profile-fields h3,
.profile-form h2,
.profile-summary-card h2 {
  margin: 5px 0 8px;
}

.optional-profile-fields p,
.profile-form p,
.profile-summary-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.privacy-note {
  border: 1px dashed color-mix(in srgb, var(--primary) 44%, var(--line));
  border-radius: var(--radius);
  padding: 10px 12px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

#signupForm .primary-button {
  width: 100%;
  margin-top: 4px;
}

.eligibility-note {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line));
  border-radius: var(--radius);
  padding: 12px;
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-2));
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.45;
}

.turnstile-panel {
  display: grid;
  gap: 8px;
  justify-items: start;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 16px;
  padding: 12px;
  background:
    radial-gradient(circle at 16% 20%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 92%, var(--accent) 8%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
}

.turnstile-panel.is-hidden {
  display: none;
}

.turnstile-panel iframe {
  max-width: 100%;
}

.field-message {
  min-height: 18px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
}

.field-message[data-state="error"],
#signupMessage[data-state="error"],
#authMessage[data-state="error"] {
  color: var(--red);
}

.field-message[data-state="success"],
#signupMessage[data-state="success"],
#authMessage[data-state="success"] {
  color: var(--primary);
}

#signupMessage[data-state="info"] {
  color: var(--accent);
}

#signupMessage {
  min-height: 22px;
  color: var(--muted);
  font-weight: 800;
}

.auth-warning-card,
#signupMessage[data-state="success"] {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 46%, var(--line));
  border-radius: 18px;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 36%),
    color-mix(in srgb, var(--surface) 92%, var(--gold) 8%);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--gold) 10%, transparent);
}

.auth-warning-card strong,
#signupMessage[data-state="success"] strong {
  color: var(--text);
  font-size: 1rem;
}

.auth-warning-card span,
#signupMessage[data-state="success"] span {
  color: var(--muted);
  line-height: 1.45;
}

.success-text {
  color: var(--primary);
  font-weight: 900;
}

.auth-signup-guidance-card,
.auth-success-card {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  background:
    radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface) 90%, var(--primary) 10%);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--primary) 12%, transparent);
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.member-status-bar {
  position: sticky;
  top: 36px;
  z-index: 18;
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(300px, 1.2fr) auto;
  gap: 14px;
  align-items: center;
  padding: 9px 24px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 44%),
    radial-gradient(ellipse at 82% 10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface) 94%, var(--bg));
  background-size: 150% 150%, 150% 150%, auto;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.055),
    var(--soft-shadow);
  animation: status-bar-aura 18s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.member-status-account,
.member-status-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.member-status-account strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-avatar {
  width: 36px;
  height: 36px;
}

.member-status-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.member-status-metrics div,
.member-status-metric-button {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 10px;
  background: var(--surface-2);
}

.member-status-metric-button,
.member-status-account-button,
.metric-card-button,
.level-badge-button {
  color: inherit;
  text-align: left;
  appearance: none;
}

.member-status-metric-button,
.member-status-account-button,
.metric-card-button {
  width: 100%;
}

.member-status-account-button,
.member-status-metric-button {
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.member-status-account-button:hover,
.member-status-account-button:focus-visible,
.member-status-metric-button:hover,
.member-status-metric-button:focus-visible,
.level-badge-button:hover,
.level-badge-button:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 12%, transparent);
  transform: translateY(-1px);
}

.member-status-metrics span,
.status-test-copy {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.member-status-metrics strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#statusXp {
  overflow: visible;
  font-size: clamp(0.82rem, 0.94vw, 1rem);
  line-height: 1.12;
  text-overflow: clip;
  white-space: normal;
}

.member-status-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

#openAdminConsoleLink {
  text-align: center;
}

.status-test-copy {
  color: var(--amber);
  white-space: nowrap;
}

.level-badge,
.perk-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line));
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 900;
}

.level-badge-button {
  justify-content: center;
}

.perk-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.88rem;
}

.progress-label strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100vh;
  padding: 24px;
  background: #0b141d;
  color: #f5fbff;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-theme="light"] .sidebar {
  background: #11242a;
}

.brand,
.account-chip,
.topbar,
.account-tools,
.panel-heading,
.section-header,
.status-row,
.inline-actions,
.viewer-topbar,
.viewer-meta,
.viewer-actions {
  display: flex;
  align-items: center;
}

.brand {
  gap: 12px;
}

.brand-home-button {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.brand-home-button:hover .brand-mark,
.brand-home-button:focus-visible .brand-mark {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-mint) 24%, transparent);
}

.brand-mark,
.avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-mint) 92%, #ffffff), color-mix(in srgb, var(--brand-sky) 86%, #ffffff)),
    var(--brand-mint);
  color: #07130f;
  font-weight: 900;
  isolation: isolate;
  overflow: hidden;
}

.brand-mark::before {
  position: absolute;
  inset: 8px 9px auto auto;
  width: 20px;
  height: 20px;
  border-top: 3px solid rgba(7, 19, 15, 0.78);
  border-right: 3px solid rgba(7, 19, 15, 0.78);
  border-radius: 3px;
  content: "";
  transform: rotate(16deg);
}

.brand-mark::after {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 18px;
  height: 6px;
  border-radius: 999px;
  background: rgba(7, 19, 15, 0.26);
  content: "";
}

.brand-mark {
  font-size: 0.78rem;
  letter-spacing: 0;
}

.brand strong {
  font-size: 1.03rem;
  letter-spacing: 0;
}

.brand strong::after {
  color: var(--brand-mint);
  content: ".";
}

.brand span,
.sidebar-panel p {
  color: rgba(245, 251, 255, 0.72);
}

.sidebar .nav-list {
  display: grid;
  gap: 8px;
}

.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius);
  padding: 10px 12px;
  background: transparent;
  color: rgba(245, 251, 255, 0.78);
  text-align: left;
}

.nav-item span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

.nav-item.is-active,
.nav-item:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.nav-item.is-active {
  box-shadow: inset 3px 0 0 var(--primary);
}

.sidebar-panel {
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 16px;
  background: rgba(255, 255, 255, 0.07);
}

.sidebar-panel strong {
  display: block;
  margin-top: 6px;
  font-size: 1.1rem;
}

.sidebar-links {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.sidebar-link {
  display: inline-block;
}

.main-content {
  min-width: 0;
  padding: 30px;
}

.topbar {
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  scroll-margin-top: 72px;
}

.topbar h1 {
  max-width: 780px;
  margin: 6px 0 0;
  font-size: clamp(1.8rem, 2.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.section-subtitle {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.eyebrow {
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-tools {
  gap: 10px;
}

.account-chip {
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface);
}

.account-chip span {
  color: var(--muted);
  font-size: 0.85rem;
}

.avatar {
  width: 36px;
  height: 36px;
  background: var(--surface-2);
  color: var(--primary);
}

.view-section {
  display: none;
}

.view-section.is-visible {
  display: block;
  animation: section-fade 160ms ease both;
}

#admin.view-section.is-visible {
  animation: none;
  transform: none;
}

@keyframes section-fade {
  from {
    opacity: 0.86;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.dashboard-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.72fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}

.account-snapshot-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}

.account-snapshot-grid {
  margin-bottom: 0;
}

.metric-card,
.panel {
  padding: 20px;
}

.metric-card {
  position: relative;
  min-height: 132px;
  border-top: 3px solid var(--primary);
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 54%, var(--surface)), var(--surface)),
    var(--surface);
}

.account-snapshot-grid .metric-card {
  min-height: 118px;
  border-top: 0;
  padding: 15px;
  box-shadow: var(--soft-shadow);
}

.account-snapshot-grid .metric-card strong {
  margin: 6px 0;
  font-size: 1.45rem;
}

.account-snapshot-grid .metric-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-2));
  color: var(--primary);
}

.snapshot-progress-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.snapshot-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.compact-perks .perk-pill {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--muted);
}

.compact-email-button {
  width: fit-content;
}

.metric-card span,
.wallet-summary span,
.tier-grid span,
.estimate-breakdown span,
.ad-meta span,
.timer-card span {
  color: var(--muted);
  font-size: 0.9rem;
}

.metric-card strong {
  display: block;
  margin: 8px 0;
  font-size: 1.85rem;
}

.metric-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
}

.welcome-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: var(--radius);
  padding: 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, var(--surface)), color-mix(in srgb, var(--accent) 10%, var(--surface))),
    var(--surface);
  box-shadow: var(--shadow);
}

.welcome-panel h2 {
  margin: 5px 0 0;
  font-size: 1.3rem;
}

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

.content-grid {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
}

.panel-heading,
.section-header {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.referral-subheading {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.panel h2,
.section-header h2 {
  margin: 5px 0 0;
  font-size: 1.35rem;
}

.text-button,
.primary-button,
.theme-toggle,
.row-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: var(--radius);
  padding: 0 14px;
  font-weight: 800;
}

.primary-button {
  border: 0;
  background: var(--primary);
  color: #07130f;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 18%, transparent);
  text-transform: none;
  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.primary-button:hover {
  background: var(--primary-dark);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 22%, transparent);
}

.primary-button:disabled,
.ad-card.is-complete .primary-button {
  background: #6c7887;
  color: #ffffff;
}

.text-button,
.theme-toggle,
.row-actions button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.text-button:hover,
.theme-toggle:hover,
.row-actions button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--surface-2);
  transform: translateY(-1px);
}

button[aria-busy="true"] {
  position: relative;
  gap: 8px;
}

button[aria-busy="true"]::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  animation: spin 720ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.small-button {
  min-width: 92px;
}

.action-list,
.ledger,
.referral-list,
.payout-list,
.campaign-list,
.admin-list {
  display: grid;
  gap: 12px;
}

.compact-action-list {
  gap: 10px;
}

.compact-action-list .action-card {
  padding: 12px;
}

.compact-action-list .action-icon {
  width: 30px;
  height: 30px;
}

.compact-empty-state {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-2);
}

.compact-empty-state p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.form-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.form-status-row small {
  color: var(--muted);
  font-weight: 800;
}

.action-card,
.ledger-row,
.referral-row,
.payout-row,
.campaign-row,
.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-2);
}

.ledger-row,
.referral-row,
.payout-row,
.campaign-row,
.admin-row,
.action-card,
.goal-row,
.activity-row {
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.ledger-row:hover,
.referral-row:hover,
.payout-row:hover,
.campaign-row:hover,
.admin-row:hover,
.action-card:hover,
.goal-row:hover,
.activity-row:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: var(--surface-3);
  transform: translateY(-1px);
}

.action-card {
  justify-content: flex-start;
}

.action-card .primary-button {
  margin-left: auto;
}

.action-icon,
.ad-logo,
.empty-icon,
.activity-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 20%, var(--surface));
  color: var(--primary);
  font-weight: 900;
}

.action-icon,
.activity-icon {
  width: 36px;
  height: 36px;
  font-size: 0.76rem;
}

.action-card strong,
.ledger-row strong,
.referral-row strong,
.payout-row strong,
.campaign-row strong,
.admin-row strong {
  display: block;
}

.onboarding-checklist-panel,
.next-action-card,
.safety-strip {
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}

.onboarding-checklist-panel {
  padding: 20px;
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 62%),
    var(--surface);
}

.onboarding-progress-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.28fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.onboarding-checklist {
  display: grid;
  gap: 10px;
}

.onboarding-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-2);
}

.onboarding-step.is-done {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-2));
}

.onboarding-step-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
}

.onboarding-step.is-done .onboarding-step-mark {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  color: var(--primary);
}

.onboarding-step strong,
.next-action strong {
  display: block;
}

.onboarding-step small,
.next-action small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.45;
}

.next-action-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
  padding: 18px;
  margin-bottom: 0;
}

.next-action-card h2 {
  margin: 5px 0 8px;
  font-size: 1.35rem;
}

.next-action-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.next-action-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.next-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-2);
}

.next-action .primary-button,
.next-action .text-button {
  min-width: 86px;
}

.next-action.is-recommended {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-2));
}

.dashboard-quick-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.quick-action-button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 900;
  text-align: left;
  box-shadow: var(--soft-shadow);
}

.quick-action-button:hover,
.quick-action-button:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
}

.quick-action-button span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-2));
  color: var(--accent);
  font-size: 0.76rem;
}

.section-link-row,
.section-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.hero-link-row {
  justify-content: flex-start;
  margin-top: 14px;
}

.safety-strip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--amber) 9%, var(--surface));
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.safety-strip strong {
  color: var(--amber);
  white-space: nowrap;
}

.owner-test-account-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  border: 1px solid color-mix(in srgb, var(--amber) 52%, var(--line));
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: color-mix(in srgb, var(--amber) 12%, var(--surface));
  box-shadow: var(--soft-shadow);
}

.owner-test-account-notice.is-hidden {
  display: none;
}

.owner-test-account-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--amber) 20%, var(--surface-2));
  color: var(--amber);
  font-weight: 950;
  letter-spacing: 0.04em;
}

.owner-test-account-notice strong {
  display: block;
  color: var(--ink);
}

.owner-test-account-notice p {
  margin: 3px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 620px) {
  .owner-test-account-notice {
    align-items: flex-start;
    margin-bottom: 14px;
    padding: 12px;
  }
}

.help-tooltip {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  vertical-align: middle;
}

.help-tooltip::after {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  width: min(280px, 72vw);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  content: attr(data-help);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.help-tooltip:hover::after,
.help-tooltip:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.dashboard-secondary {
  margin-top: 16px;
}

.daily-goals,
.activity-feed {
  display: grid;
  gap: 12px;
}

.streak-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.streak-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 18px;
  padding: 12px;
  background:
    radial-gradient(circle at 18% 8%, rgb(33 244 177 / 0.14), transparent 42%),
    linear-gradient(145deg, rgb(255 255 255 / 0.065), rgb(255 255 255 / 0.02)),
    color-mix(in srgb, var(--surface-2) 90%, #0af0aa 10%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.09),
    0 12px 26px rgb(0 0 0 / 0.16);
}

.streak-card::before {
  position: absolute;
  inset: -30% -18%;
  pointer-events: none;
  content: "";
  background: conic-gradient(from 90deg, transparent, rgb(51 246 190 / 0.18), transparent 34%);
  opacity: 0;
  transform: rotate(0deg);
}

.streak-card.is-active-today::before {
  opacity: 0.85;
  animation: streak-aura-turn 9s linear infinite;
}

.streak-card.is-warm,
.streak-card.is-hot,
.streak-card.is-legendary {
  border-color: color-mix(in srgb, var(--gold) 36%, var(--primary));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    0 0 22px color-mix(in srgb, var(--primary) 18%, transparent),
    0 16px 32px rgb(0 0 0 / 0.18);
}

.streak-card.is-hot,
.streak-card.is-legendary {
  background:
    radial-gradient(circle at 18% 8%, rgb(255 214 88 / 0.18), transparent 40%),
    radial-gradient(circle at 100% 0%, rgb(44 221 255 / 0.14), transparent 34%),
    linear-gradient(145deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.02)),
    color-mix(in srgb, var(--surface-2) 88%, #16e4b7 12%);
}

.streak-card-top,
.streak-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.streak-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #06140f;
  font-weight: 1000;
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 28%, transparent);
}

.streak-card strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 12px;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1;
}

.streak-card > span,
.streak-card small,
.streak-milestone,
.streak-freeze-note {
  position: relative;
  z-index: 1;
}

.streak-card > span {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-weight: 900;
}

.streak-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.streak-meta {
  margin-top: 10px;
}

.streak-meta span {
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 999px;
  padding: 4px 8px;
  background: rgb(255 255 255 / 0.045);
  color: var(--text);
  font-size: 0.73rem;
  font-weight: 900;
}

.streak-milestone {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.streak-freeze-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px dashed color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  color: var(--muted);
}

.streak-freeze-note strong {
  color: var(--text);
}

@keyframes streak-aura-turn {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 860px) {
  .streak-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Cinematic premium pass for the homepage and member dashboard. */
:root {
  --ambient-mouse-x: 50%;
  --ambient-mouse-y: 48%;
  --ambient-parallax-x: 0px;
  --ambient-parallax-y: 0px;
  --premium-focus-mint: rgb(33 244 177 / 0.28);
  --premium-focus-sky: rgb(56 189 248 / 0.2);
  --premium-focus-gold: rgb(250 204 21 / 0.18);
  --premium-glass-border: color-mix(in srgb, var(--brand-sky) 28%, var(--line));
  --premium-card-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.11),
    inset 0 -1px 0 rgb(255 255 255 / 0.035),
    0 18px 44px rgb(0 0 0 / 0.2);
}

.auth-screen:not(.is-hidden) {
  isolation: isolate;
  perspective: none;
}

.landing-home-copy {
  position: relative;
  z-index: 1;
}

.cinematic-spotlight {
  background:
    radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgb(103 232 249 / 0.13), transparent min(34vw, 440px)),
    radial-gradient(circle at calc(var(--mouse-x) + 8%) calc(var(--mouse-y) + 10%), rgb(34 197 94 / 0.07), transparent min(26vw, 320px));
  opacity: 0.62;
}

.landing-live-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 28px;
}

.landing-live-stats article {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--premium-glass-border);
  border-radius: 18px;
  padding: 14px 16px;
  background:
    radial-gradient(circle at 18% 0%, rgb(34 197 94 / 0.13), transparent 46%),
    linear-gradient(145deg, rgb(255 255 255 / 0.074), rgb(255 255 255 / 0.022)),
    rgb(6 13 24 / 0.62);
  box-shadow: var(--premium-card-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  backdrop-filter: blur(10px) saturate(1.08);
}

.landing-live-stats article::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 8%, rgb(255 255 255 / 0.11) 46%, transparent 72%);
  content: "";
  opacity: 0.24;
  transform: translateX(-120%);
  animation: premium-live-scan 10s ease-in-out infinite;
}

.landing-live-stats span,
.campaign-rarity-pill {
  display: inline-flex;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--brand-mint) 30%, var(--line));
  border-radius: 999px;
  padding: 3px 8px;
  background: rgb(34 197 94 / 0.09);
  color: color-mix(in srgb, var(--brand-mint) 88%, white);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.2;
}

.landing-live-stats strong {
  display: block;
  margin-top: 10px;
  color: var(--ink);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.08;
}

.landing-live-stats small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.4;
}

.landing-live-stats article,
.audience-card,
.preview-dashboard-grid article,
.growth-card-grid article,
.trust-command-console,
.platform-proof,
.marketplace-preview,
.landing-workflow,
.referral-growth-section {
  transform-style: flat;
}

.auth-screen:not(.is-hidden)::after {
  position: fixed;
  inset: -26vh -32vw;
  z-index: 8;
  background:
    linear-gradient(108deg, transparent 0 41%, rgb(103 232 249 / 0.06) 47%, rgb(34 197 94 / 0.105) 50%, rgb(255 255 255 / 0.06) 53%, transparent 60% 100%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-42vw, 8vh, 0) rotate(-5deg);
  animation: homepage-soft-scan 1180ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
  mix-blend-mode: screen;
}

.landing-home-copy > h1 {
  overflow: visible;
  padding-block: 0.04em;
}

.landing-home-copy > h1 .hero-line {
  display: block;
  transform-origin: 0 70%;
}

.auth-screen:not(.is-hidden) :where(
  .landing-topnav,
  .landing-home-copy > .eyebrow,
  .auth-lede,
  .development-notice,
  .landing-live-stats,
  .audience-card,
  .marketplace-preview,
  .landing-workflow,
  .trust-command-console,
  .referral-growth-section,
  .platform-proof,
  .auth-panel
) {
  animation: premium-page-rise 860ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-screen:not(.is-hidden) .landing-topnav {
  animation-delay: 20ms;
}

.auth-screen:not(.is-hidden) .landing-home-copy > .eyebrow {
  animation-delay: 80ms;
}

.auth-screen:not(.is-hidden) .landing-home-copy > h1 .hero-line {
  animation: homepage-hero-line-reveal 860ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-screen:not(.is-hidden) .landing-home-copy > h1 .hero-line:nth-child(1) {
  animation-delay: 160ms;
}

.auth-screen:not(.is-hidden) .landing-home-copy > h1 .hero-line:nth-child(2) {
  animation-delay: 280ms;
}

.auth-screen:not(.is-hidden) .auth-lede {
  animation-delay: 420ms;
}

.auth-screen:not(.is-hidden) .development-notice {
  animation-delay: 500ms;
}

.auth-screen:not(.is-hidden) .landing-live-stats {
  animation-delay: 560ms;
}

.auth-screen:not(.is-hidden) .audience-card:nth-child(1) {
  animation-delay: 680ms;
}

.auth-screen:not(.is-hidden) .audience-card:nth-child(2) {
  animation-delay: 760ms;
}

.auth-screen:not(.is-hidden) .marketplace-preview {
  animation-delay: 820ms;
}

.auth-screen:not(.is-hidden) .trust-command-console {
  animation-delay: 900ms;
}

.auth-screen:not(.is-hidden) .auth-path div,
.auth-screen:not(.is-hidden) .preview-dashboard-grid article,
.auth-screen:not(.is-hidden) .growth-card-grid article,
.auth-screen:not(.is-hidden) .trust-signal-grid article,
.auth-screen:not(.is-hidden) .compact-benefits li {
  animation: premium-page-rise 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-screen:not(.is-hidden) .preview-dashboard-grid article:nth-child(1),
.auth-screen:not(.is-hidden) .auth-path div:nth-child(1),
.auth-screen:not(.is-hidden) .trust-signal-grid article:nth-child(1) {
  animation-delay: 940ms;
}

.auth-screen:not(.is-hidden) .preview-dashboard-grid article:nth-child(2),
.auth-screen:not(.is-hidden) .auth-path div:nth-child(2),
.auth-screen:not(.is-hidden) .trust-signal-grid article:nth-child(2) {
  animation-delay: 1000ms;
}

.auth-screen:not(.is-hidden) .preview-dashboard-grid article:nth-child(3),
.auth-screen:not(.is-hidden) .auth-path div:nth-child(3),
.auth-screen:not(.is-hidden) .trust-signal-grid article:nth-child(3) {
  animation-delay: 1060ms;
}

.auth-screen:not(.is-hidden) .auth-panel {
  animation: homepage-card-lift 920ms cubic-bezier(0.22, 1, 0.36, 1) 340ms both;
}

.auth-screen:not(.is-hidden) :where(.landing-nav-cta, .audience-card-footer .primary-button, #loginPanel .primary-button) {
  animation: homepage-cta-illuminate 980ms cubic-bezier(0.22, 1, 0.36, 1) 880ms both;
}

.auth-screen #loginPanel {
  position: sticky;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--brand-sky) 32%, var(--line));
  background:
    radial-gradient(circle at 14% 0%, rgb(34 197 94 / 0.18), transparent 36%),
    radial-gradient(circle at 92% 16%, rgb(56 189 248 / 0.17), transparent 40%),
    linear-gradient(145deg, rgb(255 255 255 / 0.105), rgb(255 255 255 / 0.024)),
    rgb(6 13 24 / 0.72);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    inset 0 -1px 0 rgb(255 255 255 / 0.035),
    0 28px 80px rgb(0 0 0 / 0.34),
    0 0 54px rgb(56 189 248 / 0.11);
  transform: translate3d(calc(var(--ambient-parallax-x) * 0.08), calc(var(--ambient-parallax-y) * 0.06), 0);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 420ms ease-out;
}

.auth-screen #loginPanel::before {
  position: absolute;
  content: "";
  pointer-events: none;
}

.auth-screen #loginPanel::before {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 0 12%, rgb(103 232 249 / 0.12) 50%, transparent 88%),
    linear-gradient(180deg, rgb(255 255 255 / 0.12), transparent 26%);
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(180deg, black 0 18%, transparent 62%);
  mask-image: linear-gradient(180deg, black 0 18%, transparent 62%);
}

.auth-screen #loginPanel:hover,
.auth-screen #loginPanel:focus-within {
  border-color: color-mix(in srgb, var(--brand-mint) 38%, var(--brand-sky) 22%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    inset 0 -1px 0 rgb(255 255 255 / 0.04),
    0 34px 92px rgb(0 0 0 / 0.36),
    0 0 70px rgb(34 197 94 / 0.12),
    0 0 52px rgb(56 189 248 / 0.1);
}

.landing-nav .landing-nav-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--brand-mint) 52%, var(--brand-sky) 28%);
  background:
    radial-gradient(circle at 18% 0%, rgb(255 255 255 / 0.22), transparent 34%),
    linear-gradient(135deg, rgb(49 233 129 / 0.98), rgb(34 197 94 / 0.9) 48%, rgb(56 189 248 / 0.84));
  color: #03110c;
  box-shadow:
    0 0 0 1px rgb(34 197 94 / 0.12),
    0 0 28px rgb(34 197 94 / 0.18),
    0 14px 34px rgb(0 0 0 / 0.22);
}

.landing-nav .landing-nav-cta::before {
  position: absolute;
  inset: -60% -42%;
  z-index: -1;
  background:
    conic-gradient(from 110deg, transparent, rgb(255 255 255 / 0.3), transparent 28%, rgb(56 189 248 / 0.22), transparent 56%);
  content: "";
  opacity: 0.4;
  animation: homepage-cta-field-turn 9s linear infinite;
}

.landing-nav .landing-nav-cta:hover {
  color: #03110c;
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 0 0 1px rgb(34 197 94 / 0.18),
    0 0 34px rgb(34 197 94 / 0.25),
    0 0 42px rgb(56 189 248 / 0.16),
    0 16px 38px rgb(0 0 0 / 0.24);
}

.marketplace-preview,
.landing-workflow,
.referral-growth-section,
.platform-proof,
.trust-command-console {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--brand-sky) 24%, var(--line));
  background:
    radial-gradient(circle at 8% 0%, rgb(34 197 94 / 0.11), transparent 34%),
    radial-gradient(circle at 92% 12%, rgb(56 189 248 / 0.1), transparent 36%),
    linear-gradient(145deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.018)),
    rgb(7 13 24 / 0.62);
}

.marketplace-preview::before,
.landing-workflow::before,
.referral-growth-section::before,
.platform-proof::before,
.trust-command-console::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 28%, rgb(255 255 255 / 0.055) 48%, transparent 68%),
    radial-gradient(circle at var(--ambient-mouse-x) var(--ambient-mouse-y), rgb(103 232 249 / 0.075), transparent 30%);
  content: "";
  opacity: 0.34;
  transform: translate3d(calc(var(--ambient-parallax-x) * 0.06), calc(var(--ambient-parallax-y) * 0.04), 0);
  transition: transform 420ms ease-out;
  pointer-events: none;
}

.marketplace-preview > *,
.landing-workflow > *,
.referral-growth-section > *,
.platform-proof > *,
.trust-command-console > * {
  position: relative;
  z-index: 1;
}

.trust-command-console {
  margin-top: 26px;
  padding: clamp(22px, 3vw, 32px);
}

.trust-console-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.trust-console-header h2 {
  margin: 4px 0 0;
  letter-spacing: -0.035em;
}

.console-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 34%, var(--line));
  border-radius: 999px;
  padding: 0 11px;
  background: rgb(250 204 21 / 0.09);
  color: color-mix(in srgb, var(--brand-gold) 88%, white);
  font-size: 0.72rem;
  font-weight: 950;
  white-space: nowrap;
}

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

.trust-signal-grid article {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 20%, var(--line));
  border-radius: 18px;
  padding: 16px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.018)),
    rgb(8 15 28 / 0.58);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 12px 28px rgb(0 0 0 / 0.16);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.trust-signal-grid article:hover {
  border-color: color-mix(in srgb, var(--brand-mint) 36%, var(--brand-sky));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.11),
    0 16px 34px rgb(0 0 0 / 0.18),
    0 0 30px rgb(34 197 94 / 0.1);
  transform: translateY(-2px) scale(1.006);
}

.trust-signal-grid span {
  color: var(--brand-mint);
  font-size: 0.72rem;
  font-weight: 1000;
}

.trust-signal-grid strong {
  display: block;
  margin-top: 8px;
  font-size: 1.08rem;
}

.trust-signal-grid small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.5;
}

:where(
  .audience-card,
  .preview-dashboard-grid article,
  .growth-card-grid article,
  #dashboard .panel,
  #dashboard .next-action-card,
  .metric-card,
  .next-action,
  .action-card,
  .activity-row,
  .ptc-ad-row
) {
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease,
    transform 220ms ease;
}

:where(
  .audience-card,
  .preview-dashboard-grid article,
  .growth-card-grid article,
  #dashboard .panel,
  #dashboard .next-action-card,
  .metric-card,
  .next-action,
  .action-card,
  .activity-row,
  .ptc-ad-row
):hover {
  border-color: color-mix(in srgb, var(--brand-sky) 36%, var(--brand-mint) 18%);
  box-shadow:
    var(--premium-card-shadow),
    0 0 28px var(--premium-focus-sky),
    0 0 64px rgb(34 197 94 / 0.08);
  filter: brightness(1.035) saturate(1.04);
  transform: translateY(-2px) scale(1.006);
}

.primary-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.primary-button:not(:disabled)::after {
  position: absolute;
  inset: -45% -30%;
  z-index: 0;
  background:
    linear-gradient(105deg, transparent 18%, rgb(255 255 255 / 0.32) 46%, transparent 72%);
  content: "";
  opacity: 0.34;
  transform: translateX(-118%) rotate(4deg);
  animation: premium-button-energy 6.8s ease-in-out infinite;
  pointer-events: none;
}

.primary-button > * {
  position: relative;
  z-index: 1;
}

.primary-button:not(:disabled):hover::after,
.next-action.is-primary-action .primary-button::after {
  opacity: 0.56;
  animation-duration: 4.8s;
}

#xpProgressBar {
  box-shadow:
    0 0 18px color-mix(in srgb, var(--brand-mint) 34%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.32);
}

#xpProgressBar::before {
  opacity: 0.5;
  animation: progress-sheen-drift 2400ms ease-in-out infinite;
}

#xpProgressBar::after {
  opacity: 0.22;
  animation: progress-particle-drift 3400ms linear infinite;
}

.rank-movement-pill {
  border-color: color-mix(in srgb, var(--brand-gold) 42%, var(--brand-sky));
  background:
    radial-gradient(circle at 12% 18%, rgb(250 204 21 / 0.18), transparent 44%),
    rgb(56 189 248 / 0.07);
  color: color-mix(in srgb, var(--brand-gold) 88%, white);
  box-shadow: 0 0 18px rgb(250 204 21 / 0.08);
}

.activity-row.is-live-event {
  position: relative;
  overflow: hidden;
}

.activity-row.is-live-event::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(34 197 94 / 0.055), transparent 42%),
    radial-gradient(circle at 96% 18%, rgb(56 189 248 / 0.08), transparent 32%);
  content: "";
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.activity-row.is-live-event:hover::after {
  opacity: 1;
}

.activity-live-pulse {
  width: 8px;
  height: 8px;
  align-self: center;
  border-radius: 999px;
  background: var(--brand-mint);
  box-shadow: 0 0 0 0 rgb(34 197 94 / 0.4);
  animation: activity-live-pulse 2.8s ease-in-out infinite;
}

.dashboard-campaign-pick {
  grid-template-columns: auto minmax(0, 1fr) auto;
  background:
    radial-gradient(circle at 6% 0%, rgb(34 197 94 / 0.14), transparent 40%),
    linear-gradient(145deg, rgb(255 255 255 / 0.064), rgb(255 255 255 / 0.018)),
    color-mix(in srgb, var(--surface-2) 88%, #0f766e 12%);
}

.dashboard-campaign-pick .campaign-rarity-pill {
  margin-bottom: 5px;
}

.ptc-ad-row.is-rarity-boosted {
  border-color: color-mix(in srgb, var(--brand-sky) 44%, var(--line));
  box-shadow:
    0 12px 30px rgb(0 0 0 / 0.24),
    0 0 26px rgb(56 189 248 / 0.11),
    inset 0 1px 0 rgb(255 255 255 / 0.1);
}

.ptc-ad-row.is-rarity-premium,
.ptc-ad-row.is-rarity-legendary,
.ptc-ad-row.is-rarity-mythic {
  border-color: color-mix(in srgb, var(--brand-gold) 48%, var(--brand-sky) 22%);
  box-shadow:
    0 14px 34px rgb(0 0 0 / 0.27),
    0 0 34px rgb(250 204 21 / 0.12),
    0 0 54px rgb(56 189 248 / 0.07),
    inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.ptc-ad-row.is-rarity-mythic {
  background:
    radial-gradient(circle at 85% 6%, rgb(250 204 21 / 0.18), transparent 34%),
    radial-gradient(circle at 12% 100%, rgb(56 189 248 / 0.16), transparent 38%),
    linear-gradient(135deg, rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.026) 44%, rgb(34 197 94 / 0.08)),
    linear-gradient(180deg, rgb(15 23 42 / 0.97), rgb(8 13 24 / 0.98));
}

.ptc-scarcity-meter {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 20%, var(--line));
  border-radius: 999px;
  padding: 5px 8px;
  background: rgb(2 6 23 / 0.3);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.ptc-scarcity-meter i {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(15 23 42 / 0.82);
}

.ptc-scarcity-meter i::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: max(10px, var(--scarcity-percent));
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-mint), var(--brand-sky), var(--brand-gold));
  box-shadow: 0 0 12px rgb(34 197 94 / 0.24);
  content: "";
}

.ptc-scarcity-meter.is-scarce {
  border-color: color-mix(in srgb, var(--brand-gold) 42%, var(--line));
  color: color-mix(in srgb, var(--brand-gold) 88%, white);
}

:where(input, textarea, select):focus-visible,
:where(input, textarea, select):focus {
  border-color: color-mix(in srgb, var(--brand-sky) 54%, var(--brand-mint));
  box-shadow:
    0 0 0 3px rgb(56 189 248 / 0.1),
    0 0 26px rgb(34 197 94 / 0.1),
    inset 0 1px 0 rgb(255 255 255 / 0.08);
  outline: none;
}

label:focus-within {
  color: color-mix(in srgb, var(--brand-mint) 88%, white);
}

.metric-card strong,
.preview-dashboard-grid strong,
.landing-live-stats strong {
  text-shadow:
    0 0 18px rgb(34 197 94 / 0.11),
    0 0 34px rgb(56 189 248 / 0.08);
}

@keyframes premium-page-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes homepage-hero-line-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 36px, 0) scale(0.985);
  }

  70% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes homepage-card-lift {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.99);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.06),
      0 12px 28px rgb(0 0 0 / 0.18);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes homepage-soft-scan {
  0% {
    opacity: 0;
    transform: translate3d(-48vw, 10vh, 0) rotate(-5deg);
  }

  28% {
    opacity: 0.78;
  }

  78% {
    opacity: 0.42;
  }

  100% {
    opacity: 0;
    transform: translate3d(62vw, -4vh, 0) rotate(-5deg);
  }
}

@keyframes homepage-cta-illuminate {
  from {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.12),
      0 10px 22px rgb(0 0 0 / 0.14);
  }

  55% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.32),
      0 0 22px rgb(34 197 94 / 0.2),
      0 0 34px rgb(56 189 248 / 0.14),
      0 14px 30px rgb(0 0 0 / 0.18);
  }

  to {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.18),
      0 14px 32px rgb(34 197 94 / 0.2);
  }
}

@keyframes homepage-starfield-drift {
  from {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0;
  }

  to {
    background-position:
      190px 170px,
      -270px 230px,
      330px -290px,
      0 0;
  }
}

@keyframes homepage-cta-field-turn {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes premium-live-scan {
  0%,
  58%,
  100% {
    transform: translateX(-120%);
  }

  76% {
    transform: translateX(118%);
  }
}

@keyframes premium-button-energy {
  0%,
  56%,
  100% {
    transform: translateX(-118%) rotate(4deg);
  }

  74% {
    transform: translateX(118%) rotate(4deg);
  }
}

@keyframes activity-live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(34 197 94 / 0.34);
    opacity: 0.72;
  }

  50% {
    box-shadow: 0 0 0 8px rgb(34 197 94 / 0);
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .landing-live-stats {
    grid-template-columns: 1fr;
  }

  .trust-console-header,
  .trust-signal-grid {
    grid-template-columns: 1fr;
  }

  .trust-console-header {
    display: grid;
  }

  .ptc-scarcity-meter {
    grid-template-columns: 1fr;
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .streak-card.is-active-today::before {
    animation: none;
  }
}

.earn-more-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.32fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: var(--radius);
  padding: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface) 94%, var(--bg));
  box-shadow: var(--shadow);
}

.earn-more-hero h2 {
  margin: 6px 0 8px;
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  line-height: 1.05;
}

.earn-more-hero p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.earn-more-score {
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-2));
}

.earn-more-score span,
.earn-more-score small {
  color: var(--muted);
}

.earn-more-score strong {
  font-size: 1.75rem;
}

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

.earn-module {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 270px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.earn-module::before {
  display: block;
  width: 54px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  content: "";
}

.earn-module h3 {
  margin: 0;
  font-size: 1.25rem;
}

.earn-module p,
.earn-module small {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.module-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  color: var(--ink);
  font-weight: 900;
}

.module-referral-link {
  overflow-wrap: anywhere;
  border: 1px dashed var(--primary);
  border-radius: var(--radius);
  padding: 10px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-2));
  font-weight: 800;
}

.module-offerwall {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent),
    var(--surface);
}

.module-tasks {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent),
    var(--surface);
}

.module-feedback {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--amber) 10%, transparent), transparent),
    var(--surface);
}

.survey-wall-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.3fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: var(--radius);
  padding: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), transparent 58%),
    var(--surface);
  box-shadow: var(--shadow);
}

.survey-wall-hero h2 {
  margin: 6px 0 8px;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.05;
}

.survey-wall-hero p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.survey-provider-card {
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}

.survey-provider-card span,
.survey-provider-card small {
  color: var(--muted);
}

.survey-provider-card strong {
  font-size: 1.55rem;
}

.survey-wall-layout {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
}

.survey-offer-grid,
.survey-completion-list {
  display: grid;
  gap: 12px;
}

.survey-offer-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface-2);
}

.survey-offer-card.is-disabled {
  opacity: 0.74;
}

.survey-offer-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.survey-offer-head h3 {
  margin: 4px 0 0;
}

.survey-offer-card p,
.survey-offer-card small {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.survey-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.survey-meta-grid div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
}

.survey-meta-grid span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.survey-meta-grid strong {
  overflow-wrap: anywhere;
}

.survey-offer-actions {
  display: grid;
  gap: 8px;
}

.survey-safety-note {
  margin-top: 12px;
}

.goal-row,
.activity-row {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-2);
}

.goal-row {
  grid-template-columns: minmax(0, 0.7fr) minmax(120px, 1fr);
  align-items: center;
}

.goal-row.is-complete {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 11%, var(--surface-2));
}

.goal-row span,
.activity-row small {
  color: var(--muted);
}

.goal-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.goal-row strong,
.activity-row strong {
  display: block;
  margin-top: 3px;
}

.mini-progress {
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
}

.mini-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 260ms ease;
}

.campaign-progress,
.referral-progress,
.payout-progress {
  width: min(260px, 100%);
  margin-top: 10px;
}

.achievement-grid,
.milestone-list {
  display: grid;
  gap: 12px;
}

.compact-progress-panel {
  align-content: start;
}

.compact-progress-panel .achievement-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-progress-panel .milestone-list {
  margin-top: 12px;
}

.achievement-card {
  --badge-a: var(--primary);
  --badge-b: var(--accent);
  --badge-c: var(--gold);
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--badge-b) 24%, var(--line));
  border-radius: 22px;
  padding: 14px;
  background:
    radial-gradient(circle at 10% 4%, color-mix(in srgb, var(--badge-a) 14%, transparent), transparent 38%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--badge-b) 13%, transparent), transparent 34%),
    linear-gradient(145deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.018)),
    color-mix(in srgb, var(--surface-2) 90%, var(--badge-a) 10%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.09),
    inset 0 -1px 0 rgb(255 255 255 / 0.03),
    0 14px 34px rgb(0 0 0 / 0.16);
}

.achievement-card::before,
.achievement-card::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.achievement-card::before {
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.13), transparent 28%, transparent 70%, color-mix(in srgb, var(--badge-b) 12%, transparent)),
    repeating-linear-gradient(115deg, transparent 0 18px, rgb(255 255 255 / 0.025) 18px 19px);
  opacity: 0.76;
}

.achievement-card::after {
  inset: -45% -18%;
  z-index: -1;
  background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 0.12) 47%, transparent 60%);
  opacity: 0;
  transform: translate3d(-44%, 0, 0) rotate(8deg);
  transition: opacity 220ms ease;
}

.achievement-card:hover::after,
.achievement-card:focus-within::after {
  opacity: 1;
  animation: achievement-sheen-pass 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.achievement-card.is-unlocked {
  border-color: color-mix(in srgb, var(--badge-a) 48%, var(--badge-b));
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--badge-a) 22%, transparent), transparent 40%),
    radial-gradient(circle at 96% 12%, color-mix(in srgb, var(--badge-c) 18%, transparent), transparent 36%),
    linear-gradient(145deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.02)),
    color-mix(in srgb, var(--surface-2) 80%, var(--badge-a) 20%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 0 0 1px color-mix(in srgb, var(--badge-a) 12%, transparent),
    0 16px 38px color-mix(in srgb, var(--badge-a) 13%, transparent),
    0 14px 34px rgb(0 0 0 / 0.17);
}

.achievement-card.is-rare {
  --badge-a: #f5c542;
  --badge-b: #67e8f9;
  --badge-c: #f97316;
}

.achievement-first_ad_viewed {
  --badge-a: #35f3c5;
  --badge-b: #38bdf8;
  --badge-c: #facc15;
}

.achievement-ad_view_10 {
  --badge-a: #22c55e;
  --badge-b: #67e8f9;
  --badge-c: #a3e635;
}

.achievement-ad_view_50 {
  --badge-a: #14b8a6;
  --badge-b: #38bdf8;
  --badge-c: #f5c542;
}

.achievement-ad_view_250 {
  --badge-a: #0891b2;
  --badge-b: #a78bfa;
  --badge-c: #facc15;
}

.achievement-captcha_25 {
  --badge-a: #38bdf8;
  --badge-b: #2dd4bf;
  --badge-c: #facc15;
}

.achievement-seven_day_streak {
  --badge-a: #60a5fa;
  --badge-b: #a78bfa;
  --badge-c: #f5c542;
}

.achievement-fourteen_day_streak {
  --badge-a: #818cf8;
  --badge-b: #22d3ee;
  --badge-c: #facc15;
}

.achievement-thirty_day_streak {
  --badge-a: #a855f7;
  --badge-b: #06b6d4;
  --badge-c: #f97316;
}

.achievement-earning_streak_7,
.achievement-ad_completion_streak_7,
.achievement-ad_completion_streak_30 {
  --badge-a: #34f5b8;
  --badge-b: #6ee7ff;
  --badge-c: #ffe66d;
}

.achievement-first_referral {
  --badge-a: #22c55e;
  --badge-b: #34d399;
  --badge-c: #67e8f9;
}

.achievement-active_referral_5 {
  --badge-a: #16a34a;
  --badge-b: #22d3ee;
  --badge-c: #facc15;
}

.achievement-referral_network_10 {
  --badge-a: #84cc16;
  --badge-b: #14b8a6;
  --badge-c: #f97316;
}

.achievement-first_payout_request {
  --badge-a: #facc15;
  --badge-b: #fb923c;
  --badge-c: #35f3c5;
}

.achievement-first_check_paid {
  --badge-a: #fbbf24;
  --badge-b: #22c55e;
  --badge-c: #67e8f9;
}

.achievement-captcha_100 {
  --badge-a: #f97316;
  --badge-b: #facc15;
  --badge-c: #67e8f9;
}

.achievement-trusted_member {
  --badge-a: #2dd4bf;
  --badge-b: #22c55e;
  --badge-c: #f5c542;
}

.achievement-high_trust_member {
  --badge-a: #10b981;
  --badge-b: #67e8f9;
  --badge-c: #facc15;
}

.achievement-level_10 {
  --badge-a: #38bdf8;
  --badge-b: #2dd4bf;
  --badge-c: #a3e635;
}

.achievement-level_25 {
  --badge-a: #cd7f32;
  --badge-b: #38bdf8;
  --badge-c: #facc15;
}

.achievement-level_50 {
  --badge-a: #facc15;
  --badge-b: #fb923c;
  --badge-c: #67e8f9;
}

.achievement-level_75 {
  --badge-a: #a78bfa;
  --badge-b: #22d3ee;
  --badge-c: #facc15;
}

.achievement-level_99 {
  --badge-a: #f5c542;
  --badge-b: #67e8f9;
  --badge-c: #f97316;
}

.achievement-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 35% 22%, rgb(255 255 255 / 0.88), transparent 0 5px, transparent 13px),
    conic-gradient(from 140deg, var(--badge-a), var(--badge-b), var(--badge-c), var(--badge-a));
  color: #041016;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    inset 0 -10px 18px rgb(0 0 0 / 0.22),
    0 0 24px color-mix(in srgb, var(--badge-a) 28%, transparent);
}

.achievement-orbit {
  position: absolute;
  inset: -5px;
  border: 1px solid color-mix(in srgb, var(--badge-b) 38%, transparent);
  border-top-color: color-mix(in srgb, var(--badge-c) 78%, transparent);
  border-radius: 23px;
  opacity: 0.72;
  animation: achievement-orbit-turn 8.5s linear infinite;
}

.achievement-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.13)),
    rgb(255 255 255 / 0.18);
  color: #061116;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.36);
}

.achievement-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.86);
  box-shadow: 0 0 12px color-mix(in srgb, var(--badge-c) 78%, transparent);
  opacity: 0;
}

.achievement-spark-a {
  top: 5px;
  right: 10px;
  animation: achievement-spark-twinkle 3.8s ease-in-out infinite;
}

.achievement-spark-b {
  bottom: 9px;
  left: 8px;
  animation: achievement-spark-twinkle 4.6s ease-in-out 1.1s infinite;
}

.achievement-body,
.achievement-card strong,
.achievement-card small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.achievement-kicker {
  display: block;
  margin-bottom: 3px;
  color: color-mix(in srgb, var(--badge-b) 78%, var(--muted));
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: normal;
}

.achievement-card strong {
  font-size: 0.98rem;
  line-height: 1.12;
}

.achievement-card small {
  margin: 4px 0 9px;
  color: var(--muted);
  line-height: 1.35;
}

.achievement-progress {
  height: 8px;
  border-color: color-mix(in srgb, var(--badge-b) 24%, var(--line));
  background: rgb(0 0 0 / 0.22);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.35);
}

.achievement-progress span {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--badge-a), var(--badge-b), var(--badge-c));
  box-shadow: 0 0 14px color-mix(in srgb, var(--badge-a) 34%, transparent);
}

.achievement-progress span::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.48), transparent);
  content: "";
  opacity: 0.65;
  animation: achievement-progress-shine 2.9s linear infinite;
}

.achievement-state {
  justify-self: end;
  border-color: color-mix(in srgb, var(--badge-c) 34%, var(--line));
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--badge-c) 24%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface) 74%, transparent);
  color: color-mix(in srgb, var(--badge-c) 78%, var(--text));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.achievement-card.is-locked {
  filter: saturate(0.86);
}

.achievement-card.is-locked .achievement-art {
  opacity: 0.78;
  filter: grayscale(0.16);
}

.achievement-card.is-locked .achievement-orbit,
.achievement-card.is-locked .achievement-spark {
  animation-play-state: paused;
}

.achievement-card.is-locked .achievement-spark {
  display: none;
}

.compact-progress-panel .achievement-card {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 11px;
  padding: 12px;
}

.compact-progress-panel .achievement-art {
  width: 44px;
  height: 44px;
  border-radius: 17px;
}

.compact-progress-panel .achievement-orbit {
  border-radius: 20px;
}

.compact-progress-panel .achievement-icon {
  width: 32px;
  height: 32px;
  border-radius: 13px;
  font-size: 0.68rem;
}

.compact-progress-panel .achievement-card .achievement-state {
  grid-column: 1 / -1;
  justify-self: start;
  width: fit-content;
}

@keyframes achievement-orbit-turn {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes achievement-spark-twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.45);
  }

  42% {
    opacity: 0.88;
    transform: scale(1);
  }

  58% {
    opacity: 0.28;
    transform: scale(0.72);
  }
}

@keyframes achievement-progress-shine {
  from {
    transform: translateX(-115%);
  }

  to {
    transform: translateX(180%);
  }
}

@keyframes achievement-sheen-pass {
  from {
    transform: translate3d(-54%, 0, 0) rotate(8deg);
  }

  to {
    transform: translate3d(62%, 0, 0) rotate(8deg);
  }
}

.levels-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: calc(var(--radius-lg) + 4px);
  padding: clamp(22px, 4vw, 38px);
  background:
    radial-gradient(circle at 82% 26%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 34%),
    radial-gradient(circle at 14% 84%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, var(--accent) 10%), color-mix(in srgb, var(--surface-2) 92%, var(--primary) 8%));
  box-shadow: var(--soft-shadow), 0 24px 80px color-mix(in srgb, var(--accent) 10%, transparent);
}

.levels-hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 80%;
  background:
    linear-gradient(110deg, transparent 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 42%),
    repeating-linear-gradient(90deg, transparent 0 36px, color-mix(in srgb, var(--primary) 9%, transparent) 37px 38px);
  transform: rotate(-4deg);
  opacity: 0.62;
  pointer-events: none;
}

.levels-hero-copy,
.level-core-card {
  position: relative;
  z-index: 1;
}

.levels-hero h2 {
  max-width: 680px;
  margin: 6px 0 10px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.levels-hero p {
  max-width: 680px;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.65;
}

.levels-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.level-core-card {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--line));
  border-radius: 28px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--primary) 30%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 78%, transparent), color-mix(in srgb, var(--bg) 72%, transparent));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 0 42px color-mix(in srgb, var(--primary) 15%, transparent);
}

.level-orbit {
  position: absolute;
  width: 190px;
  height: 190px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 42px color-mix(in srgb, var(--accent) 24%, transparent),
    inset 0 0 30px color-mix(in srgb, var(--primary) 16%, transparent);
  animation: level-orbit-spin 11s linear infinite;
}

.level-orbit::before,
.level-orbit::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 80%, transparent);
}

.level-orbit::before {
  top: 10px;
  left: 34px;
}

.level-orbit::after {
  right: 18px;
  bottom: 34px;
  background: var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 80%, transparent);
}

.level-core-card strong {
  position: relative;
  z-index: 1;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1;
  color: var(--text);
  text-shadow: 0 0 28px color-mix(in srgb, var(--primary) 40%, transparent);
}

.level-core-label {
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 48%, transparent);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

#levelsXpToNext {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-weight: 900;
}

.levels-meter-panel {
  margin-bottom: 20px;
}

.levels-meter-panel,
.cosmetic-roadmap-panel,
.levels-grid > .panel,
.levels-community-grid > .panel {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 88%, transparent)),
    color-mix(in srgb, var(--bg) 90%, var(--surface));
}

.levels-meter {
  position: relative;
  height: 30px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.06), transparent),
    color-mix(in srgb, var(--bg) 72%, var(--surface));
  box-shadow: inset 0 1px 6px rgb(0 0 0 / 0.3);
}

.levels-meter span {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 85% 50%, rgb(255 255 255 / 0.85), transparent 0 4px, transparent 8px),
    linear-gradient(90deg, var(--primary), var(--accent) 72%, var(--gold));
  box-shadow:
    0 0 24px color-mix(in srgb, var(--primary) 42%, transparent),
    0 0 46px color-mix(in srgb, var(--accent) 24%, transparent);
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.levels-meter span::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 0.86) 0 1px, transparent 2px),
    radial-gradient(circle, color-mix(in srgb, var(--gold) 75%, transparent) 0 1px, transparent 2px);
  background-size: 34px 100%, 54px 100%;
  animation: level-meter-particles 2.2s linear infinite;
  opacity: 0.62;
}

.levels-meter-stats,
.badge-vault-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.levels-meter-stats article,
.badge-vault-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 92%, var(--accent) 8%);
}

.levels-meter-stats span,
.badge-vault-stat span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.levels-meter-stats strong,
.badge-vault-stat strong {
  display: block;
  margin-top: 5px;
  font-size: 1.02rem;
}

.cosmetic-roadmap-panel {
  margin-bottom: 20px;
  overflow: hidden;
}

.cosmetic-roadmap-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.cosmetic-next-card {
  min-width: 0;
}

.cosmetic-next-inner {
  position: relative;
  display: grid;
  gap: 14px;
  height: auto;
  align-self: start;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));
  border-radius: 22px;
  padding: 18px;
  background:
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--gold) 24%, transparent), transparent 34%),
    radial-gradient(circle at 8% 100%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 88%, var(--gold) 12%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.cosmetic-next-inner strong {
  display: block;
  margin-top: 4px;
  font-size: 1.35rem;
  line-height: 1.1;
}

.cosmetic-next-inner > div:first-child {
  padding-right: 82px;
}

.cosmetic-next-inner p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.cosmetic-next-inner.is-complete {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--gold));
}

.cosmetic-next-orb {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(circle at 35% 24%, rgb(255 255 255 / 0.86), transparent 0 7px, transparent 13px),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #ffffff), color-mix(in srgb, var(--accent) 84%, #ffffff));
  color: #031318;
  font-weight: 950;
  box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 32%, transparent);
}

.cosmetic-next-progress {
  margin-top: auto;
}

.cosmetic-milestone-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  min-width: 0;
}

.cosmetic-milestone-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 13px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.04), transparent),
    color-mix(in srgb, var(--surface-2) 92%, var(--bg));
}

.cosmetic-milestone-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: color-mix(in srgb, var(--muted) 30%, transparent);
}

.cosmetic-milestone-card.is-unlocked {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 40%),
    color-mix(in srgb, var(--surface-2) 88%, var(--primary) 12%);
}

.cosmetic-milestone-card.is-current,
.cosmetic-milestone-card.is-next {
  border-color: color-mix(in srgb, var(--gold) 48%, var(--line));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--gold) 10%, transparent);
}

.cosmetic-milestone-card.is-legend {
  border-color: color-mix(in srgb, var(--gold) 56%, var(--accent));
}

.cosmetic-milestone-card.is-unlocked::before {
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--gold));
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 48%, transparent);
}

.cosmetic-milestone-topline {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.cosmetic-milestone-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 950;
}

.cosmetic-milestone-card strong,
.cosmetic-milestone-card small,
.cosmetic-milestone-card p,
.cosmetic-next-inner strong,
.cosmetic-next-inner p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cosmetic-milestone-card strong {
  font-size: 1rem;
  line-height: 1.16;
}

.cosmetic-milestone-card small,
.cosmetic-milestone-card p {
  color: var(--muted);
  line-height: 1.35;
}

.cosmetic-milestone-card p {
  margin: 0;
  font-size: 0.84rem;
}

.cosmetic-mini-progress {
  margin-top: 2px;
}

.levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: 18px;
  align-items: start;
}

.level-ladder {
  display: grid;
  gap: 12px;
}

.level-ladder-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 94%, var(--bg));
  min-width: 0;
}

.level-ladder-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: color-mix(in srgb, var(--muted) 34%, transparent);
}

.level-ladder-card.is-unlocked {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background:
    radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 32%),
    color-mix(in srgb, var(--surface-2) 90%, var(--primary) 10%);
}

.level-ladder-card.is-unlocked::before {
  background: linear-gradient(180deg, var(--primary), var(--accent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 60%, transparent);
}

.level-ladder-card.is-current {
  box-shadow: 0 16px 42px color-mix(in srgb, var(--accent) 13%, transparent);
}

.level-ladder-rank {
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg) 42%, transparent);
}

.level-ladder-rank span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.level-ladder-rank strong {
  font-size: 1.8rem;
  line-height: 1;
}

.level-ladder-heading {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}

.level-ladder-heading > strong,
.leaderboard-row strong,
.leaderboard-row small,
.xp-history-row strong,
.milestone-notification strong,
.public-profile-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.level-ladder-body p {
  margin: 7px 0 10px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.level-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.level-tool-row span {
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.badge-vault-grid {
  margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.badge-vault-panel .achievement-card {
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 150px;
  align-items: start;
  padding: 16px;
}

.badge-vault-panel .achievement-art {
  width: 56px;
  height: 56px;
}

.badge-vault-panel .achievement-icon {
  width: 40px;
  height: 40px;
}

.badge-vault-panel .achievement-state {
  grid-column: 2;
  justify-self: start;
  width: fit-content;
}

.levels-community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

.leaderboard-list,
.xp-history-list,
.milestone-notification-list {
  display: grid;
  gap: 10px;
}

.leaderboard-row,
.xp-history-row,
.milestone-notification,
.public-profile-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px;
  background: color-mix(in srgb, var(--surface-2) 92%, var(--bg));
}

.leaderboard-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.leaderboard-row-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.leaderboard-row.is-current,
.xp-history-row.is-level-up {
  border-color: color-mix(in srgb, var(--gold) 48%, var(--line));
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-2) 88%, var(--gold) 12%);
}

.leaderboard-rank {
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 48px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--accent);
  font-weight: 950;
}

.leaderboard-row.prestige-rank-one .leaderboard-rank,
.leaderboard-podium-card.rank-1 .leaderboard-podium-medal {
  background:
    radial-gradient(circle at 35% 20%, rgb(255 255 255 / 0.9), transparent 0 4px, transparent 12px),
    conic-gradient(from 150deg, #facc15, #67e8f9, #34f5b8, #facc15);
  color: #081018;
  box-shadow:
    0 0 0 1px rgb(250 204 21 / 0.38) inset,
    0 0 28px rgb(250 204 21 / 0.24),
    0 0 46px rgb(103 232 249 / 0.12);
}

.leaderboard-row.prestige-rank-two .leaderboard-rank,
.leaderboard-podium-card.rank-2 .leaderboard-podium-medal {
  background: linear-gradient(135deg, #e2e8f0, #94a3b8, #67e8f9);
  color: #071018;
  box-shadow: 0 0 24px rgb(226 232 240 / 0.18);
}

.leaderboard-row.prestige-rank-three .leaderboard-rank,
.leaderboard-podium-card.rank-3 .leaderboard-podium-medal {
  background: linear-gradient(135deg, #f59e0b, #cd7f32, #67e8f9);
  color: #100804;
  box-shadow: 0 0 24px rgb(245 158 11 / 0.18);
}

.leaderboard-row strong {
  color: var(--member-rank-color, var(--text));
}

.rank-movement {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.rank-movement b {
  color: var(--accent);
  font-size: 0.8rem;
  line-height: 1;
}

.rank-movement.rank-up {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  color: color-mix(in srgb, var(--primary) 78%, var(--text));
}

.rank-movement.rank-down {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
  color: color-mix(in srgb, var(--warning) 76%, var(--text));
}

.leaderboard-profile-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.leaderboard-profile-chip-row span {
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.leaderboard-profile-chip-row span.is-rare {
  border-color: color-mix(in srgb, var(--brand-gold) 36%, var(--line));
  color: color-mix(in srgb, var(--brand-gold) 78%, var(--text));
}

.leaderboard-profile-chip-row span.is-streak {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  color: color-mix(in srgb, var(--primary) 78%, var(--text));
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 52%),
    color-mix(in srgb, var(--surface) 78%, transparent);
}

.leaderboard-profile-chip-row span.is-active-streak {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--primary));
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
  box-shadow: 0 0 16px color-mix(in srgb, var(--primary) 10%, transparent);
}

.leaderboard-pass-line {
  display: block;
  margin-top: 6px;
  color: color-mix(in srgb, var(--accent) 72%, var(--muted)) !important;
  font-weight: 850;
}

.leaderboard-xp-history-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.leaderboard-xp-history-mini span {
  color: var(--muted);
  font-size: 0.68rem;
}

.leaderboard-xp-history-mini b {
  color: var(--accent);
}

.leaderboard-row small,
.xp-history-row small,
.milestone-notification small,
.public-profile-card small,
.public-profile-card p {
  color: var(--muted);
  line-height: 1.4;
}

.xp-history-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.xp-history-row > span {
  color: var(--accent);
  font-weight: 950;
}

.leaderboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 28px;
  padding: 24px;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--primary) 17%, transparent), transparent 38%),
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 40%),
    linear-gradient(145deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.024)),
    color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow:
    var(--fx-inner-highlight),
    var(--fx-shadow-major);
  -webkit-backdrop-filter: blur(18px) saturate(1.14);
  backdrop-filter: blur(18px) saturate(1.14);
  isolation: isolate;
}

.leaderboard-hero::before {
  position: absolute;
  inset: -40% -18%;
  z-index: -1;
  background:
    conic-gradient(from 160deg at 50% 50%, transparent, color-mix(in srgb, var(--primary) 12%, transparent), transparent 38%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 74%),
    radial-gradient(ellipse at 70% 35%, color-mix(in srgb, var(--brand-gold) 10%, transparent), transparent 50%);
  content: "";
  opacity: 0.62;
  animation: panel-soft-shine 16s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
}

.leaderboard-hero h2 {
  max-width: 820px;
  margin: 0 0 10px;
  font-size: clamp(2.1rem, 4.2vw, 4.25rem);
  line-height: 0.98;
}

.leaderboard-hero p {
  max-width: 720px;
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.6;
}

.leaderboard-network-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.leaderboard-network-stats span {
  display: grid;
  gap: 2px;
  min-width: 118px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 14px;
  padding: 8px 10px;
  background: rgb(15 23 42 / 0.34);
}

.leaderboard-network-stats small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.leaderboard-network-stats strong {
  color: var(--brand-ink);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.leaderboard-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(min(190px, 100%), 1fr));
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.leaderboard-stat-card {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 114px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 20px;
  padding: 16px;
  background:
    radial-gradient(circle at 50% 112%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 56%),
    rgb(15 23 42 / 0.36);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.09),
    var(--fx-shadow-standard);
}

.leaderboard-stat-card span,
.leaderboard-stat-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.leaderboard-stat-card strong {
  color: var(--brand-ink);
  max-width: 100%;
  overflow-wrap: normal;
  font-size: clamp(1.48rem, 2.4vw, 2.55rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1.02;
  white-space: nowrap;
  text-shadow:
    0 0 18px color-mix(in srgb, var(--primary) 20%, transparent),
    0 0 36px color-mix(in srgb, var(--accent) 9%, transparent);
}

.leaderboard-xp-stat {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
  background:
    radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 58%),
    linear-gradient(145deg, color-mix(in srgb, var(--brand-sky) 8%, transparent), rgb(15 23 42 / 0.36));
}

.leaderboard-xp-stat strong {
  font-size: clamp(1.6rem, 3.2vw, 2.9rem);
}

.leaderboard-percentile-stat {
  border-color: color-mix(in srgb, var(--brand-gold) 30%, var(--line));
  background:
    radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--brand-gold) 18%, transparent), transparent 58%),
    rgb(15 23 42 / 0.36);
}

.leaderboard-next-target-panel {
  margin-bottom: 18px;
}

.leaderboard-next-target {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.38fr);
  gap: 14px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 20px;
  padding: 14px;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 90%, var(--primary) 10%);
}

.leaderboard-next-target strong {
  display: block;
  margin: 4px 0;
  color: var(--brand-ink);
  font-size: clamp(1.15rem, 2vw, 1.65rem);
}

.leaderboard-target-meter {
  display: grid;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 16px;
  padding: 12px;
  background: rgb(15 23 42 / 0.32);
}

.leaderboard-target-meter span,
.leaderboard-target-meter small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.leaderboard-target-meter strong {
  margin: 0;
  color: var(--accent);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
}

.leaderboard-page-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
  gap: 18px;
  align-items: start;
  max-width: 100%;
}

.leaderboard-full-panel {
  grid-column: 1 / -1;
}

.leaderboard-podium {
  display: grid;
  gap: 12px;
}

.leaderboard-podium-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 22px;
  padding: 16px;
  background:
    radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 38%),
    linear-gradient(145deg, rgb(255 255 255 / 0.068), rgb(255 255 255 / 0.018)),
    color-mix(in srgb, var(--surface-2) 90%, var(--bg));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    var(--fx-shadow-standard);
}

.leaderboard-podium-card.rank-1 {
  border-color: color-mix(in srgb, var(--brand-gold) 48%, var(--line));
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--brand-gold) 22%, transparent), transparent 42%),
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface-2) 84%, var(--brand-gold) 16%);
}

.leaderboard-podium-card.rank-2 {
  border-color: color-mix(in srgb, #cbd5e1 44%, var(--line));
}

.leaderboard-podium-card.rank-3 {
  border-color: color-mix(in srgb, #cd7f32 42%, var(--line));
}

.leaderboard-podium-card.is-current {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent) inset,
    0 0 34px color-mix(in srgb, var(--primary) 16%, transparent),
    var(--fx-shadow-standard);
}

.leaderboard-podium-medal {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, var(--surface)), color-mix(in srgb, var(--accent) 20%, var(--surface)));
  color: var(--brand-ink);
  font-size: 1.02rem;
  font-weight: 1000;
  box-shadow: 0 0 22px color-mix(in srgb, var(--primary) 18%, transparent);
}

.leaderboard-podium-card strong,
.leaderboard-podium-card small,
.leaderboard-podium-card span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.leaderboard-podium-xp {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  padding-top: 10px;
}

.leaderboard-podium-xp strong {
  color: var(--accent);
}

.leaderboard-hall-list {
  display: grid;
  gap: 10px;
}

.leaderboard-hall-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 18px;
  padding: 12px;
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 90%, var(--bg));
}

.leaderboard-hall-card.is-legend {
  border-color: color-mix(in srgb, var(--brand-gold) 42%, var(--line));
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--brand-gold) 18%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface-2) 86%, var(--brand-gold) 14%);
}

.leaderboard-hall-card.is-streak-leader {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 44%),
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface-2) 87%, var(--primary) 13%);
}

.leaderboard-hall-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  color: var(--accent);
  font-weight: 1000;
}

.leaderboard-hall-card.is-legend .leaderboard-hall-mark {
  background: conic-gradient(from 150deg, #facc15, #67e8f9, #34f5b8, #facc15);
  color: #061116;
}

.leaderboard-hall-card.is-streak-leader .leaderboard-hall-mark {
  background: conic-gradient(from 120deg, var(--primary), var(--accent), #67e8f9, var(--primary));
  color: #03130d;
  box-shadow: 0 0 22px color-mix(in srgb, var(--primary) 18%, transparent);
}

.leaderboard-page-list .leaderboard-row {
  border-radius: 18px;
}

.leaderboard-page-list .leaderboard-row small {
  overflow-wrap: anywhere;
}

.leaderboard-page-list .leaderboard-row:nth-child(1) .leaderboard-rank {
  background: color-mix(in srgb, var(--brand-gold) 22%, var(--surface));
  color: var(--brand-gold);
}

@media (max-width: 1320px) {
  .leaderboard-hero {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px;
  }

  .leaderboard-page-grid {
    grid-template-columns: 1fr;
  }

  .leaderboard-hero-grid {
    grid-template-columns: repeat(2, minmax(min(190px, 100%), 1fr));
    gap: 10px;
    align-content: center;
  }

  .leaderboard-stat-card {
    min-height: 106px;
    padding: 12px 14px;
    gap: 4px;
  }

  .leaderboard-stat-card span,
  .leaderboard-stat-card small {
    font-size: 0.72rem;
  }

  .leaderboard-stat-card strong {
    font-size: clamp(1.34rem, 2.35vw, 2.2rem);
  }

  .leaderboard-xp-stat strong {
    font-size: clamp(1.52rem, 3.2vw, 2.7rem);
  }
}

@media (max-width: 920px) {
  .leaderboard-page-list .leaderboard-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .leaderboard-page-list .leaderboard-row .status-badge {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  .leaderboard-hero {
    grid-template-columns: 1fr;
    border-radius: 22px;
    padding: 18px;
  }

  .leaderboard-hero-grid {
    grid-template-columns: 1fr;
  }

  .leaderboard-next-target {
    grid-template-columns: 1fr;
  }

  .leaderboard-stat-card {
    min-height: 88px;
  }

  .leaderboard-podium-xp {
    flex-direction: column;
  }
}

.milestone-notification {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.public-profile-frame {
  display: flex;
  gap: 12px;
  align-items: center;
}

.profile-public-box {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius);
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 90%, var(--accent) 10%);
}

.profile-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line));
  border-radius: var(--radius);
  padding: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 13%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface) 96%, var(--bg));
  box-shadow: var(--shadow);
}

.profile-hero::before {
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--profile-accent, var(--primary)) 22%, transparent), transparent 34%),
    linear-gradient(115deg, transparent 8%, color-mix(in srgb, var(--profile-accent, var(--primary)) 13%, transparent) 48%, transparent 78%);
  content: "";
  opacity: 0.65;
}

.profile-hero.has-animated-profile-border {
  border-color: color-mix(in srgb, var(--profile-accent, var(--primary)) 54%, var(--line));
  box-shadow:
    var(--shadow),
    0 0 34px color-mix(in srgb, var(--profile-accent, var(--primary)) 18%, transparent);
  animation: profile-border-breathe 9s ease-in-out infinite;
}

.profile-hero > * {
  position: relative;
  z-index: 1;
}

.profile-identity-block {
  display: flex;
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.profile-hero-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line));
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, #ffffff), color-mix(in srgb, var(--accent) 78%, #ffffff)),
    var(--primary);
  color: #041315;
  font-size: 1.65rem;
  font-weight: 1000;
  box-shadow: var(--soft-shadow);
}

.profile-hero h2 {
  margin: 4px 0 6px;
  color: var(--profile-accent, var(--text));
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.05;
}

.profile-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.profile-status-row,
.profile-level-card,
.profile-stat-grid,
.profile-layout,
.profile-form-grid,
.profile-detail-list,
.profile-activity-list {
  display: grid;
  gap: 12px;
}

.profile-status-row {
  grid-template-columns: repeat(3, max-content);
  align-items: center;
  margin-top: 12px;
}

.profile-level-card {
  align-content: center;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));
  border-radius: var(--radius);
  padding: 16px;
  background:
    radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface-2) 92%, var(--gold) 8%);
}

.profile-level-card strong {
  font-size: 2rem;
  line-height: 1;
}

.profile-level-card span:not(.eyebrow),
.profile-level-card small {
  color: var(--muted);
  font-weight: 850;
  line-height: 1.35;
}

.profile-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  margin-bottom: 16px;
}

.profile-customization-board {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: var(--radius);
  padding: 16px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 32%),
    radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--fx-shadow-major);
}

.profile-customization-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.48fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.profile-cosmetic-preview,
.profile-cosmetic-panel {
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.022)),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
  box-shadow: var(--soft-shadow);
}

.profile-cosmetic-preview {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
}

.profile-cosmetic-stack {
  display: grid;
  gap: 12px;
}

.profile-cosmetic-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.panel-mini-heading h3 {
  margin: 4px 0 0;
  font-size: 1rem;
}

.profile-cosmetic-banner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 172px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--profile-accent, var(--primary)) 42%, var(--line));
  border-radius: var(--radius);
  padding: 16px;
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--profile-accent, var(--primary)) 24%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 74%, transparent), color-mix(in srgb, var(--accent) 12%, var(--surface-2)));
}

.profile-cosmetic-banner.border-border_gold_aura,
.profile-cosmetic-banner.border-border_elite_orbit,
.profile-cosmetic-banner.border-border_legend_hall {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 0 30px color-mix(in srgb, var(--profile-accent, var(--primary)) 24%, transparent);
  animation: profile-border-breathe 8s ease-in-out infinite;
}

.profile-cosmetic-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--profile-accent, var(--primary)) 70%, #ffffff);
  color: #061016;
  font-size: 1.35rem;
  font-weight: 1000;
  box-shadow: 0 0 22px color-mix(in srgb, var(--profile-accent, var(--primary)) 24%, transparent);
}

.profile-cosmetic-banner strong {
  display: block;
  color: var(--profile-accent, var(--text));
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1;
}

.profile-cosmetic-banner small {
  color: var(--muted);
  line-height: 1.4;
}

.profile-cosmetic-crown {
  grid-column: 1 / -1;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 38%, var(--line));
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
  color: var(--brand-gold);
  font-size: 0.72rem;
  font-weight: 950;
}

.profile-cosmetic-statline,
.profile-seasonal-badges,
.profile-rare-cosmetics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-cosmetic-statline span,
.profile-seasonal-badges span,
.profile-rare-cosmetics span {
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
}

.profile-cosmetic-inventory {
  display: grid;
  gap: 10px;
}

.profile-cosmetic-category {
  display: grid;
  gap: 8px;
}

.profile-cosmetic-category-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.profile-cosmetic-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-cosmetic-option {
  display: grid;
  gap: 4px;
  min-height: 72px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: var(--radius);
  padding: 9px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--ink);
  text-align: left;
}

.profile-cosmetic-option.is-equipped {
  border-color: color-mix(in srgb, var(--primary) 56%, var(--line));
  background:
    radial-gradient(circle at 10% 4%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.profile-cosmetic-option.is-locked {
  opacity: 0.62;
}

.profile-cosmetic-option span,
.profile-cosmetic-option strong,
.profile-cosmetic-option small {
  overflow-wrap: anywhere;
}

.profile-cosmetic-option span {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
}

.profile-cosmetic-option strong,
.profile-cosmetic-option small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.profile-achievement-showcase,
.profile-seasonal-showcase {
  display: grid;
  gap: 9px;
}

.profile-showcase-badge,
.profile-placement-history article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--radius);
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.profile-showcase-badge > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 1000;
}

.profile-showcase-badge.is-rare {
  border-color: color-mix(in srgb, var(--brand-gold) 38%, var(--line));
}

.profile-showcase-badge strong,
.profile-placement-history strong {
  display: block;
  color: var(--ink);
}

.profile-showcase-badge small,
.profile-placement-history small,
.profile-seasonal-topline small {
  color: var(--muted);
  line-height: 1.4;
}

.profile-seasonal-topline {
  display: grid;
  gap: 5px;
}

.profile-placement-history {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-placement-history article {
  grid-template-columns: 1fr auto;
}

.profile-rare-cosmetics .is-unlocked {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  color: var(--primary);
}

.profile-rare-cosmetics .is-locked {
  opacity: 0.72;
}

@keyframes profile-border-breathe {
  0%,
  100% {
    box-shadow:
      var(--shadow),
      0 0 22px color-mix(in srgb, var(--profile-accent, var(--primary)) 14%, transparent);
  }
  50% {
    box-shadow:
      var(--shadow),
      0 0 38px color-mix(in srgb, var(--profile-accent, var(--primary)) 27%, transparent);
  }
}

.profile-stat-grid article,
.profile-detail-row,
.profile-activity-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 90%, var(--bg));
  box-shadow: var(--soft-shadow);
}

.profile-stat-grid article {
  display: grid;
  gap: 5px;
  min-height: 118px;
}

.profile-stat-grid span,
.profile-detail-row span:not(.status-badge),
.profile-activity-row span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.35;
}

.profile-stat-grid strong {
  color: var(--text);
  font-size: 1.28rem;
  line-height: 1.1;
}

.profile-stat-grid small,
.profile-detail-row small,
.profile-activity-row small {
  color: var(--muted);
  line-height: 1.4;
}

.profile-layout,
.profile-form-grid {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
  align-items: start;
  margin-bottom: 16px;
}

.profile-layout > :only-child,
.profile-form-grid > :only-child {
  grid-column: 1 / -1;
}

.profile-overview-panel,
.profile-showcase-panel {
  align-self: stretch;
}

.profile-detail-row,
.profile-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  box-shadow: none;
}

.profile-detail-row strong,
.profile-activity-row strong {
  display: block;
  margin: 3px 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.profile-progress-block {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.profile-check-card {
  margin-bottom: 12px;
}

.profile-public-preview-card {
  min-height: 100%;
}

.profile-public-preview-card .avatar {
  width: 46px;
  height: 46px;
}

@keyframes level-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes level-meter-particles {
  to {
    background-position: 88px 0, 124px 0;
  }
}

@media (max-width: 980px) {
  .levels-hero,
  .cosmetic-roadmap-layout,
  .levels-grid,
  .levels-community-grid,
  .profile-hero,
  .profile-customization-grid,
  .profile-layout,
  .profile-form-grid {
    grid-template-columns: 1fr;
  }

  .levels-meter-stats,
  .badge-vault-summary,
  .badge-vault-grid,
  .profile-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .levels-hero {
    padding: 20px;
  }

  .cosmetic-next-orb {
    position: static;
    width: 54px;
    height: 54px;
    border-radius: 18px;
  }

  .cosmetic-next-inner > div:first-child {
    padding-right: 0;
  }

  .cosmetic-milestone-track {
    grid-template-columns: 1fr;
  }

  .levels-meter-stats,
  .badge-vault-summary,
  .badge-vault-grid,
  .level-ladder-card,
  .achievement-card.achievement-badge-button,
  .profile-stat-grid,
  .profile-status-row,
  .profile-detail-row,
  .profile-activity-row,
  .profile-cosmetic-option-grid,
  .profile-placement-history {
    grid-template-columns: 1fr;
  }

  .achievement-card.achievement-badge-button {
    justify-items: start;
  }

  .achievement-card.achievement-badge-button .achievement-state {
    justify-self: start;
  }

  .level-ladder-rank {
    width: 76px;
    min-height: 70px;
  }

  .profile-identity-block {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .level-orbit,
  .levels-meter span::before,
  .achievement-orbit,
  .achievement-spark,
  .achievement-progress span::after,
  .achievement-card::after,
  .profile-hero.has-animated-profile-border,
  .profile-cosmetic-banner {
    animation: none !important;
  }
}

.activity-row {
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
}

.progress-track {
  position: relative;
  width: 100%;
  height: 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 34%, transparent), transparent 55%),
    var(--bg-soft);
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 0.22),
    0 0 0 rgb(54 211 153 / 0);
  isolation: isolate;
}

.progress-track::before,
.progress-track::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}

.progress-track span {
  position: relative;
  z-index: 1;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 50%, rgb(255 255 255 / 0.62), transparent 0.85rem),
    linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 45%, var(--accent)), var(--accent));
  box-shadow:
    0 0 14px color-mix(in srgb, var(--accent) 36%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.32);
  transition:
    width 520ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 220ms ease,
    box-shadow 220ms ease;
  will-change: width;
}

.progress-track.has-progress-label {
  height: 18px;
}

.progress-track.has-progress-label::after {
  content: attr(data-progress-label);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  inset: 0 8px;
  color: color-mix(in srgb, var(--ink) 86%, #ffffff);
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0.01em;
  line-height: 1;
  opacity: 0.9;
  text-shadow:
    0 1px 2px rgb(0 0 0 / 0.65),
    0 0 10px color-mix(in srgb, var(--accent) 22%, transparent);
}

.progress-track.is-empty.has-progress-label::after {
  color: var(--muted);
  opacity: 0.72;
  text-shadow: none;
}

.progress-track span::before,
.mini-progress-track span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 18%, rgb(255 255 255 / 0.54) 46%, transparent 72%);
  opacity: 0;
  transform: translateX(-115%);
  pointer-events: none;
}

.progress-track span::after,
.mini-progress-track span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 0.7) 0 1px, transparent 1.6px),
    radial-gradient(circle, color-mix(in srgb, var(--accent) 86%, white) 0 1px, transparent 1.7px);
  background-size: 34px 100%, 52px 100%;
  background-position: 0 50%, 16px 50%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.progress-track.is-filling,
.mini-progress-track.is-filling,
.progress-track.is-progress-pulse,
.mini-progress-track.is-progress-pulse {
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 0.24),
    0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

.progress-track.is-filling span,
.mini-progress-track.is-filling span,
.progress-track.is-progress-pulse span,
.mini-progress-track.is-progress-pulse span {
  filter: saturate(1.1) brightness(1.04);
}

.progress-track.is-filling span::before,
.mini-progress-track.is-filling span::before,
.progress-track.is-progress-pulse span::before,
.mini-progress-track.is-progress-pulse span::before {
  opacity: 0.52;
  animation: progress-sheen-drift 1700ms ease-in-out infinite;
}

.progress-track.is-filling span::after,
.mini-progress-track.is-filling span::after,
.progress-track.is-progress-pulse span::after,
.mini-progress-track.is-progress-pulse span::after {
  opacity: 0.32;
  animation: progress-particle-drift 2200ms linear infinite;
}

.progress-track.is-complete span {
  box-shadow:
    0 0 20px color-mix(in srgb, var(--accent) 44%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.38);
}

.xp-panel {
  display: grid;
  gap: 16px;
}

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

.referral-box {
  overflow-wrap: anywhere;
  border: 1px dashed var(--primary);
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--ink);
  font-weight: 900;
}

.affiliate-count-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.affiliate-count-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.affiliate-count-grid span,
.affiliate-count-grid small {
  color: var(--muted);
}

.affiliate-count-grid span {
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.affiliate-count-grid strong {
  color: var(--ink);
  font-size: 1.15rem;
}

.referral-marketing {
  margin-top: 24px;
  display: grid;
  gap: 22px;
}

.toolkit-intro {
  max-width: 900px;
  margin: -8px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.promo-link-grid,
.qr-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.promo-link-card,
.promo-asset-card,
.social-template-card,
.qr-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 88%, transparent));
  box-shadow: var(--shadow-soft);
}

.promo-link-card h3,
.promo-asset-card h3,
.social-template-card h3,
.qr-card strong {
  margin: 0;
}

.promo-link-card p,
.social-template-card p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.social-template-card {
  position: relative;
  grid-template-rows: auto auto minmax(136px, 1fr) auto;
  overflow: hidden;
}

.social-template-card::before {
  position: absolute;
  top: 14px;
  right: 16px;
  color: color-mix(in srgb, var(--accent) 28%, transparent);
  content: "POST";
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.12em;
  pointer-events: none;
}

.social-template-card p {
  display: block;
  min-height: 132px;
  margin: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 36%),
    color-mix(in srgb, var(--surface-2) 70%, transparent);
  color: color-mix(in srgb, var(--ink) 82%, var(--muted));
  font-size: 0.9rem;
  line-height: 1.52;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.social-template-card .promo-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.social-template-card .promo-actions .small-button {
  width: 100%;
  min-width: 0;
  padding-inline: 10px;
  white-space: nowrap;
}

.social-template-card .promo-actions .small-button:first-child {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--surface)), color-mix(in srgb, var(--accent) 10%, var(--surface)));
  color: color-mix(in srgb, var(--primary) 82%, var(--ink));
}

.promo-url {
  max-width: 100%;
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  color: var(--ink);
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.promo-actions .small-button {
  min-width: 0;
  justify-content: center;
}

.promo-actions .is-copied {
  border-color: color-mix(in srgb, var(--accent) 72%, white);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  color: var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 20%, transparent);
}

.toolkit-subsection {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}

.toolkit-subheader {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}

.toolkit-subheader h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.toolkit-subheader p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.promo-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.promo-tab {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.promo-tab.is-active {
  border-color: color-mix(in srgb, var(--accent) 70%, white);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 14%, transparent);
}

.promo-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: stretch;
  gap: 14px;
}

.promo-asset-card {
  grid-template-rows: auto minmax(76px, auto) auto;
  overflow: hidden;
}

.promo-asset-preview {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  min-height: 118px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-2) 26%, var(--border));
  border-radius: 14px;
  background:
    radial-gradient(circle at 70% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 74%, transparent);
}

.promo-banner-preview {
  aspect-ratio: var(--asset-ratio, 728 / 90);
  min-height: 96px;
  padding: 10px;
}

.promo-banner-preview svg {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  filter: drop-shadow(0 16px 26px rgb(0 0 0 / 0.24));
}

.promo-asset-meta {
  display: grid;
  gap: 5px;
}

.promo-asset-meta strong {
  color: var(--ink);
}

.promo-asset-meta small {
  color: var(--muted);
  line-height: 1.45;
}

.promo-badge-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.promo-badge-preview {
  min-height: 96px;
}

.promo-badge-preview svg {
  max-width: 100%;
  height: auto;
}

.social-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: stretch;
  gap: 14px;
}

.qr-card {
  justify-items: start;
}

.qr-card.is-muted {
  opacity: 0.72;
}

.qr-preview {
  display: grid;
  place-items: center;
  width: min(100%, 310px);
  padding: 10px;
  border-radius: 18px;
  background: #eafffb;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.07);
}

.qr-preview svg {
  width: min(100%, 280px);
  height: auto;
}

.qr-card span {
  color: var(--muted);
  font-size: 0.82rem;
  word-break: break-all;
}

.referral-disclosure {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
  color: var(--ink);
}

.referral-disclosure-top {
  margin: 0 0 18px;
}

.referral-disclosure span,
.referral-disclosure small {
  color: var(--muted);
  line-height: 1.45;
}

.section-note {
  margin-top: 0;
}

.ad-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.ad-card {
  min-height: auto;
  overflow: hidden;
}

.ptc-ad-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(260px, 0.7fr) minmax(150px, 0.38fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 88%, transparent), var(--surface)),
    var(--surface);
}

.ptc-ad-id {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.ptc-ad-id > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #07130f;
  font-weight: 900;
}

.ptc-ad-main h3 {
  margin: 0 0 5px;
  font-size: 1.05rem;
}

.ptc-ad-main p {
  margin: 0 0 4px;
}

.ptc-ad-main small {
  color: var(--muted);
  font-weight: 800;
}

.ptc-ad-meta {
  margin-top: 0;
}

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

.blocked-ad-note {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.4;
}

.ad-visual {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-height: 112px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(53, 209, 154, 0.92), rgba(103, 167, 255, 0.78)),
    var(--surface-2);
  color: #06110d;
}

.ad-visual small {
  align-self: flex-start;
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(6, 17, 13, 0.16);
  font-weight: 900;
}

.ad-logo {
  width: 50px;
  height: 50px;
  background: rgba(6, 17, 13, 0.16);
  color: #06110d;
}

.ad-visual strong {
  max-width: 240px;
  font-size: 1.2rem;
  line-height: 1.2;
}

.ad-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

.ad-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: auto;
}

.ad-meta div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 82%, var(--surface));
}

.ad-meta strong {
  display: block;
  margin-top: 4px;
}

.ad-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.wallet-layout,
.advertiser-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.4fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  isolation: isolate;
}

.wallet-layout > .panel,
.advertiser-layout > .panel {
  min-width: 0;
  position: relative;
}

.wallet-summary,
.campaign-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-self: start;
}

.wallet-summary > strong,
.campaign-estimate > strong {
  font-size: 2.4rem;
}

.payout-minimum-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-2));
}

.payout-minimum-card strong {
  font-size: 1.55rem;
}

.payout-minimum-card small {
  color: var(--muted);
  line-height: 1.5;
}

.payout-provider-card {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(56, 189, 248, 0.24);
  border-radius: 20px;
  padding: 14px;
  background:
    radial-gradient(circle at 95% 0%, rgba(56, 189, 248, 0.18), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(34, 197, 94, 0.12), transparent 34%),
    color-mix(in srgb, var(--surface-2) 88%, var(--surface));
  box-shadow: 0 18px 38px rgba(8, 47, 73, 0.16);
}

.provider-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.provider-card-heading strong {
  display: block;
  margin-top: 2px;
  font-size: 1.08rem;
  overflow-wrap: anywhere;
}

.provider-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.provider-card-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, rgba(56, 189, 248, 0.26) 70%, var(--line));
  border-radius: 14px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.42);
}

.provider-card-grid span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.provider-card-grid strong {
  font-size: 1rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.payout-provider-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.tipalti-provider-card {
  border-color: rgba(56, 189, 248, 0.32);
}

.wallet-balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wallet-balance-grid > div,
.cashout-method-fields {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-2);
}

.wallet-balance-grid span,
.cashout-method-fields small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.wallet-balance-grid strong {
  font-size: 1rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cashout-address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cashout-address-grid label {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.cashout-address-grid label:first-child {
  grid-column: 1 / -1;
}

.cashout-address-grid input {
  width: 100%;
}

.payout-list .empty-state-block {
  padding: 14px;
}

.payout-list .empty-state-block::after {
  display: none;
}

.payout-list .empty-state-block .text-button {
  justify-self: start;
  min-width: 0;
}

#wallet .admin-inline-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  border-radius: 16px;
  padding: 10px 11px;
  line-height: 1.35;
  white-space: normal;
}

#wallet .admin-inline-check input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 1px 0 0;
  padding: 0;
  appearance: auto;
  accent-color: var(--primary);
  cursor: pointer;
}

@media (max-width: 1120px) {
  .wallet-layout {
    grid-template-columns: 1fr;
  }

  .wallet-layout > .panel {
    width: 100%;
  }

  .wallet-summary {
    max-width: none;
  }
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

legend {
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 800;
}

.choice-fieldset {
  display: grid;
  gap: 8px;
}

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

.compact-choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.choice-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 10px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.9rem;
}

.choice-chip input {
  width: 18px;
  min-height: 18px;
  padding: 0;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-2);
  color: var(--ink);
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  background: var(--surface-2);
  color: var(--ink);
}

textarea {
  padding-top: 12px;
}

.checkbox-line > input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  margin: 0;
  padding: 0;
}

.campaign-compliance-acknowledgement,
.campaign-terms-lock-acknowledgement {
  align-items: flex-start;
}

.campaign-compliance-acknowledgement > span,
.campaign-terms-lock-acknowledgement > span {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.campaign-compliance-acknowledgement label,
.campaign-terms-lock-acknowledgement label {
  overflow-wrap: anywhere;
}

.campaign-compliance-acknowledgement a {
  color: var(--primary);
  font-weight: 950;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.campaign-compliance-acknowledgement small,
.campaign-terms-lock-acknowledgement small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.campaign-terms-lock-notice,
.campaign-locked-term-list {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  color: var(--ink);
}

.campaign-locked-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.campaign-locked-detail {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}

.campaign-locked-detail span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
}

.campaign-locked-detail strong {
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.campaign-terms-lock-notice.compact {
  margin-top: 10px;
}

.campaign-terms-lock-notice p,
.campaign-locked-term-list strong {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.campaign-lock-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.campaign-locked-field small,
.campaign-locked-field-grid small,
.campaign-locked-term-list span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.campaign-locked-field input:disabled,
.campaign-locked-field-grid input:disabled,
.campaign-locked-field-grid select:disabled {
  opacity: 0.82;
  cursor: not-allowed;
}

.admin-campaign-policy-evidence {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.admin-campaign-policy-evidence.is-ready {
  border-color: rgba(46, 213, 115, 0.42);
}

.admin-campaign-policy-evidence.is-review {
  border-color: rgba(250, 204, 21, 0.38);
}

.admin-campaign-policy-evidence.is-blocked {
  border-color: rgba(248, 113, 113, 0.5);
}

.admin-campaign-policy-evidence h4,
.admin-campaign-policy-evidence p {
  margin: 0;
}

.admin-campaign-policy-evidence p {
  color: var(--muted);
  font-weight: 750;
}

.admin-campaign-policy-evidence dl,
.admin-campaign-policy-evidence ul {
  display: grid;
  gap: 8px;
  margin: 0;
}

.admin-campaign-policy-evidence ul {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding: 0;
  list-style: none;
}

.admin-campaign-policy-evidence dt,
.admin-campaign-policy-evidence li span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-campaign-policy-evidence dd,
.admin-campaign-policy-evidence li small {
  display: block;
  margin: 2px 0 0;
  color: var(--ink);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.estimate-breakdown,
.tier-grid,
.flow-steps {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

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

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

.estimate-breakdown div,
.tier-grid div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-2);
}

.tier-grid strong {
  display: block;
  margin: 8px 0;
  font-size: 1.55rem;
}

.tier-grid div {
  position: relative;
  overflow: hidden;
}

.tier-grid div::before {
  display: block;
  width: 42px;
  height: 4px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  content: "";
}

.owned-campaigns {
  margin-top: 16px;
}

.ledger-amount {
  color: var(--primary);
  font-weight: 900;
}

.ledger-amount.is-positive {
  color: var(--green);
}

.ledger-amount.is-negative {
  color: var(--red);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: capitalize;
}

.status-active,
.status-approved,
.status-completed,
.status-passed,
.status-ready,
.status-production_ready {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  color: var(--primary);
}

.status-pending,
.status-pending_payment,
.status-pending_review,
.status-warning,
.status-manual_review,
.status-simulated,
.status-requires_staging,
.status-requires_production,
.status-external_provider_required {
  background: color-mix(in srgb, var(--amber) 16%, var(--surface));
  color: var(--amber);
}

.status-paused,
.status-blocked,
.status-risky,
.status-rejected,
.status-failed,
.status-payment_problem,
.status-returned_check,
.status-advertisement_blocked,
.status-high,
.status-critical {
  background: color-mix(in srgb, var(--red) 16%, var(--surface));
  color: var(--red);
}

.status-medium,
.status-low,
.status-info {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--muted);
}

.status-not_applicable {
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
  color: var(--muted);
}

.empty-state {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.empty-state-block {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 88%, transparent), color-mix(in srgb, var(--accent) 7%, var(--surface))),
    var(--surface-2);
  overflow: hidden;
}

.empty-state-block::after {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 74px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, transparent 20%, color-mix(in srgb, var(--primary) 36%, transparent) 21%, transparent 22%),
    linear-gradient(0deg, color-mix(in srgb, var(--accent) 20%, transparent) 26%, transparent 27%);
  opacity: 0.58;
  content: "";
}

.empty-state-block strong {
  display: block;
}

.empty-state-block p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.empty-icon {
  width: 46px;
  height: 46px;
  background: color-mix(in srgb, var(--violet) 18%, var(--surface));
  color: var(--violet);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 28%, transparent);
}

.skeleton-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-2);
}

.skeleton-card span,
.skeleton-card strong,
.skeleton-card small {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--muted) 18%, var(--surface)), var(--surface-2));
  background-size: 220% 100%;
  animation: skeleton-pulse 1.25s ease-in-out infinite;
}

.skeleton-card span {
  width: 34%;
}

.skeleton-card strong {
  width: 62%;
  height: 18px;
}

.skeleton-card small {
  width: 78%;
}

@keyframes skeleton-pulse {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -220% 0;
  }
}

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

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

.admin-toolbar {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

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

.row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.row-actions button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.9rem;
}

.row-actions .action-approve {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  color: var(--primary);
}

.row-actions .action-warn {
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
  color: var(--amber);
}

.row-actions .action-danger {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  color: var(--red);
}

.country-actions {
  align-items: center;
}

.country-minimum-input {
  width: 120px;
  min-height: 34px;
}

.review-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px 12px;
  margin-top: 10px;
}

.review-checklist .checkbox-line {
  margin: 0;
  padding: 8px 10px;
  background: var(--surface);
}

.quiz-review-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius);
  padding: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.quiz-review-panel textarea {
  min-height: 82px;
}

.admin-note-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.admin-note-controls input {
  min-width: min(260px, 100%);
  min-height: 34px;
  flex: 1;
}

.help-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  align-items: stretch;
  justify-items: end;
  background: rgba(3, 8, 13, 0.68);
  backdrop-filter: blur(5px);
}

.help-drawer-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  width: min(700px, 100vw);
  height: 100dvh;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-left: 1px solid var(--line);
  padding: 18px;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 78%, var(--surface)), var(--surface) 48%),
    var(--surface);
  box-shadow: -28px 0 70px rgba(0, 0, 0, 0.36);
}

.help-hero {
  display: grid;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: var(--radius);
  padding: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, transparent), transparent 68%),
    color-mix(in srgb, var(--surface) 84%, var(--bg));
}

.help-hero .panel-heading {
  margin: 0;
}

.help-hero p {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.help-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.help-status-card {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: var(--radius);
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}

.help-status-card span,
.help-status-card strong,
.help-status-card small {
  display: block;
}

.help-status-card span {
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.help-status-card strong {
  margin-top: 3px;
  font-size: 0.93rem;
}

.help-status-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.help-section-grid {
  display: grid;
  gap: 10px;
}

.help-topic-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.help-topic-card:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--surface-2) 90%, var(--primary) 5%);
}

.help-topic-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
  color: var(--primary);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.help-topic-card h3 {
  margin: 3px 0 5px;
  font-size: 1.05rem;
}

.help-topic-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.help-topic-card ul {
  margin: 9px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.45;
}

.help-topic-card li + li {
  margin-top: 4px;
}

.help-drawer-panel .safety-strip {
  margin-bottom: 0;
  box-shadow: none;
}

.help-page-shell {
  display: grid;
  gap: 18px;
}

.help-page-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.help-actions {
  margin-top: 2px;
}

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

.help-grid div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-2);
}

.help-grid strong,
.help-grid span {
  display: block;
}

.help-grid span {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.45;
}

.toast {
  position: fixed;
  left: clamp(14px, 2.5vw, 28px);
  right: auto;
  bottom: clamp(18px, 3vw, 34px);
  z-index: 240;
  display: grid;
  align-items: center;
  min-height: 58px;
  max-width: min(480px, calc(100vw - 34px));
  transform: translate3d(-16px, 14px, 0) scale(0.98);
  border: 1px solid color-mix(in srgb, var(--line) 70%, #fff 10%);
  border-radius: 20px;
  padding: 16px 18px 16px 20px;
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 92%, #020617 8%);
  color: var(--text);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.38),
    0 0 0 1px color-mix(in srgb, #fff 7%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.toast-success {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--line));
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface)));
  box-shadow:
    0 26px 76px color-mix(in srgb, var(--primary) 22%, rgba(0, 0, 0, 0.36)),
    0 0 0 1px color-mix(in srgb, var(--primary) 32%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}

.toast-error {
  border-color: color-mix(in srgb, var(--red) 65%, var(--line));
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--red) 24%, transparent), transparent 38%),
    color-mix(in srgb, var(--red) 18%, var(--surface));
  box-shadow:
    0 26px 76px color-mix(in srgb, var(--red) 18%, rgba(0, 0, 0, 0.36)),
    0 0 0 1px color-mix(in srgb, var(--red) 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

.toast.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

.level-up-popup {
  position: fixed;
  inset: 0;
  z-index: 145;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 30px);
  pointer-events: none;
  overflow: hidden;
}

.level-up-popup.is-hidden {
  display: none;
}

.level-up-popup.level-up-reward-intermission {
  z-index: 10020;
}

.level-up-popup.level-up-reward-intermission .level-up-celebration-backdrop {
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgb(20 255 184 / 0.2), transparent 28%),
    radial-gradient(circle at 52% 48%, rgb(255 221 72 / 0.16), transparent 24%),
    rgb(0 0 0 / 0.58);
}

.level-up-popup.level-up-reward-intermission .level-up-skip {
  display: none;
}

.level-up-popup.level-up-reward-intermission .level-up-card {
  padding-bottom: clamp(68px, 8vh, 88px);
}

.level-up-continue[hidden] {
  display: none;
}

.level-up-continue {
  position: absolute;
  right: clamp(18px, 3vw, 30px);
  bottom: clamp(16px, 2.5vh, 24px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: calc(100% - 36px);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 48%, var(--primary));
  border-radius: 999px;
  padding: 11px 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, var(--brand-gold)), color-mix(in srgb, var(--brand-gold) 76%, var(--primary)));
  color: #03120f;
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.18) inset,
    0 0 26px color-mix(in srgb, var(--primary) 26%, transparent),
    0 16px 36px rgb(0 0 0 / 0.34);
  opacity: 0;
  pointer-events: auto;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 240ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms ease,
    filter 220ms ease;
}

.level-up-popup.level-up-reward-intermission.is-continue-ready .level-up-continue {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.level-up-continue:hover,
.level-up-continue:focus-visible {
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.26) inset,
    0 0 34px color-mix(in srgb, var(--brand-gold) 34%, transparent),
    0 18px 40px rgb(0 0 0 / 0.36);
  filter: brightness(1.06);
}

.level-up-continue:disabled {
  cursor: default;
  filter: saturate(0.82);
}

.level-up-popup-pop.level-up-reward-intermission .level-up-card {
  animation-duration: 940ms;
}

.level-up-popup-pop.level-up-reward-intermission .level-up-card::before {
  animation-duration: 2100ms;
}

.level-up-popup-pop.level-up-reward-intermission .level-up-card::after {
  animation-duration: 1700ms;
}

.level-up-popup.level-up-reward-intermission.is-exiting .level-up-celebration-backdrop {
  opacity: 0;
  transition-duration: 320ms;
}

.level-up-popup.level-up-reward-intermission.is-exiting .level-up-card {
  animation: level-up-intermission-exit 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.level-up-celebration-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgb(20 255 184 / 0.16), transparent 28%),
    radial-gradient(circle at 52% 48%, rgb(255 221 72 / 0.12), transparent 24%),
    rgb(0 0 0 / 0.44);
  opacity: 0;
  transition: opacity 440ms ease;
  pointer-events: auto;
}

.level-up-popup-pop .level-up-celebration-backdrop {
  opacity: 1;
}

.level-up-particle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.level-up-particle-field i {
  position: absolute;
  top: 48%;
  left: 50%;
  width: var(--spark-size, 3px);
  height: var(--spark-size, 3px);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-gold) 58%, var(--primary));
  box-shadow:
    0 0 12px color-mix(in srgb, var(--brand-gold) 62%, transparent),
    0 0 26px color-mix(in srgb, var(--primary) 34%, transparent);
  opacity: 0;
  animation: level-up-particle-burst 3600ms cubic-bezier(0.16, 0.9, 0.2, 1) var(--spark-delay, 0ms) both;
}

.level-up-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(172px, 230px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 28px);
  width: min(780px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 44%, var(--primary));
  border-radius: 22px;
  padding: clamp(18px, 3vw, 30px);
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--brand-gold) 18%, transparent), transparent 42%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 45%),
    radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 48%),
    linear-gradient(145deg, rgb(255 255 255 / 0.15), rgb(255 255 255 / 0.045)),
    color-mix(in srgb, var(--surface) 86%, #05080d);
  backdrop-filter: none;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.10) inset,
    0 0 45px color-mix(in srgb, var(--brand-gold) 22%, transparent),
    0 0 120px color-mix(in srgb, var(--primary) 18%, transparent),
    0 30px 100px rgb(0 0 0 / 0.58);
  pointer-events: auto;
  transform-origin: center;
}

.level-up-card::before,
.level-up-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
}

.level-up-card::before {
  background:
    conic-gradient(from 0deg at 28% 50%, transparent, color-mix(in srgb, var(--brand-gold) 26%, transparent), transparent 32%),
    radial-gradient(circle at 28% 50%, color-mix(in srgb, var(--brand-gold) 22%, transparent), transparent 42%),
    radial-gradient(circle at 60% 44%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 38%);
  opacity: 0;
  transform: scale(0.82);
}

.level-up-card::after {
  border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 8%, rgb(255 255 255 / 0.18) 20%, transparent 32%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 18px),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-gold) 13%, transparent), transparent);
  opacity: 0.26;
  mix-blend-mode: screen;
  transform: translateX(-38%);
}

.level-up-popup-pop .level-up-card {
  animation: level-up-card-arrive 1280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.level-up-popup-pop .level-up-card::before {
  animation: reward-level-up-card-bloom 3200ms cubic-bezier(0.16, 0.86, 0.24, 1) 180ms both;
}

.level-up-popup-pop .level-up-card::after {
  animation: level-up-card-sheen 4200ms cubic-bezier(0.16, 0.9, 0.2, 1) 420ms both;
}

.level-up-shockwave {
  position: absolute;
  top: 50%;
  left: 29%;
  z-index: 0;
  width: clamp(170px, 28vw, 310px);
  height: clamp(170px, 28vw, 310px);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 46%, transparent);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.52);
  box-shadow:
    0 0 0 18px color-mix(in srgb, var(--primary) 4%, transparent),
    0 0 55px color-mix(in srgb, var(--brand-gold) 18%, transparent);
}

.level-up-popup-pop .level-up-shockwave {
  animation: level-up-single-shockwave 3200ms cubic-bezier(0.16, 0.86, 0.24, 1) 650ms both;
}

.level-up-celebration--milestone .level-up-card {
  border-color: color-mix(in srgb, var(--brand-gold) 58%, var(--primary));
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.12) inset,
    0 0 62px color-mix(in srgb, var(--brand-gold) 28%, transparent),
    0 0 150px color-mix(in srgb, var(--primary) 22%, transparent),
    0 34px 110px rgb(0 0 0 / 0.62);
}

.level-up-celebration--legendary .level-up-card {
  border-color: color-mix(in srgb, var(--brand-gold) 74%, #fff0b0);
  background:
    radial-gradient(circle at 18% 12%, rgb(255 225 95 / 0.24), transparent 42%),
    radial-gradient(circle at 85% 18%, rgb(50 255 190 / 0.20), transparent 44%),
    radial-gradient(circle at 50% 110%, rgb(69 142 255 / 0.18), transparent 48%),
    linear-gradient(145deg, rgb(255 255 255 / 0.17), rgb(255 255 255 / 0.05)),
    color-mix(in srgb, var(--surface) 82%, #070907);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.14) inset,
    0 0 86px rgb(255 218 79 / 0.32),
    0 0 180px rgb(30 255 190 / 0.24),
    0 38px 128px rgb(0 0 0 / 0.66);
}

.level-up-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgb(5 8 13 / 0.62);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  opacity: 0.72;
}

.level-up-close:hover,
.level-up-close:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--primary) 50%, var(--line));
  opacity: 1;
}

.level-up-orbit {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--brand-gold) 28%, transparent), transparent 42%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 64%),
    color-mix(in srgb, var(--surface-2) 74%, transparent);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.1),
    inset 0 0 34px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 44px color-mix(in srgb, var(--brand-gold) 22%, transparent),
    0 0 92px color-mix(in srgb, var(--primary) 14%, transparent);
}

.level-up-popup-pop .level-up-orbit {
  animation: level-up-energy-build 2200ms cubic-bezier(0.16, 0.86, 0.24, 1) 160ms both;
}

.level-up-orbit::before,
.level-up-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.level-up-orbit::before {
  inset: -14px;
  background:
    conic-gradient(from 40deg, transparent 0 10%, rgb(255 226 100 / 0.62) 15%, transparent 24% 54%, rgb(34 255 189 / 0.56) 62%, transparent 72%),
    radial-gradient(circle, transparent 58%, rgb(255 255 255 / 0.08) 59%, transparent 62%);
  filter: drop-shadow(0 0 22px rgb(44 255 188 / 0.28));
  animation: level-up-orbit-spin 8200ms linear infinite;
}

.level-up-orbit::after {
  inset: 10px;
  border: 1px solid rgb(255 255 255 / 0.10);
  background:
    radial-gradient(circle, transparent 52%, color-mix(in srgb, var(--brand-gold) 10%, transparent) 54%, transparent 60%);
  box-shadow:
    0 0 30px color-mix(in srgb, var(--primary) 22%, transparent) inset,
    0 0 26px color-mix(in srgb, var(--brand-gold) 10%, transparent);
}

.level-up-orbit-ring {
  position: absolute;
  inset: 18px;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 58%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 20px color-mix(in srgb, var(--brand-gold) 22%, transparent);
}

.level-up-orbit-ring-a {
  --ring-angle: 18deg;
  transform: rotateX(64deg) rotateZ(18deg);
  animation: level-up-ring-expand 3200ms cubic-bezier(0.16, 0.9, 0.2, 1) both;
}

.level-up-orbit-ring-b {
  --ring-angle: 108deg;
  border-color: color-mix(in srgb, var(--accent) 56%, transparent);
  transform: rotateX(64deg) rotateZ(108deg);
  animation: level-up-ring-expand 3500ms cubic-bezier(0.16, 0.9, 0.2, 1) 220ms both;
}

.level-up-orbit-sweep {
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background:
    conic-gradient(from 0deg, transparent 0 76%, rgb(255 245 174 / 0.34) 82%, rgb(35 255 191 / 0.18) 88%, transparent 94%);
  mix-blend-mode: screen;
  opacity: 0.78;
  animation: level-up-radar-sweep 6200ms linear infinite;
}

.level-up-surge-sparks {
  position: absolute;
  inset: 8px;
  z-index: 2;
  border-radius: 50%;
  contain: strict;
  pointer-events: none;
}

.level-up-surge-sparks i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-gold) 72%, white);
  box-shadow: 0 0 7px color-mix(in srgb, var(--primary) 52%, transparent);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.66);
  will-change: opacity, transform;
}

.level-up-surge-sparks i:nth-child(1) { top: 13%; left: 31%; }
.level-up-surge-sparks i:nth-child(2) { top: 23%; right: 18%; }
.level-up-surge-sparks i:nth-child(3) { top: 49%; right: 7%; }
.level-up-surge-sparks i:nth-child(4) { right: 24%; bottom: 14%; }
.level-up-surge-sparks i:nth-child(5) { bottom: 11%; left: 27%; }
.level-up-surge-sparks i:nth-child(6) { top: 42%; left: 8%; }

.level-up-achievement {
  position: absolute;
  bottom: 13px;
  left: 50%;
  z-index: 4;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 12px;
  width: min(650px, calc(100% - 34px));
  min-height: 50px;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 46%, var(--primary));
  border-radius: 14px;
  padding: 8px 14px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--brand-gold) 10%, transparent), transparent 36%),
    color-mix(in srgb, var(--surface) 94%, #07120e);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.06) inset,
    0 8px 22px rgb(0 0 0 / 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 6px, 0) scale(0.98);
  contain: layout paint style;
  will-change: opacity, transform;
}

.level-up-achievement-name,
.level-up-achievement-delta,
.level-up-achievement-result,
.level-up-achievement-lock {
  white-space: nowrap;
}

.level-up-achievement-name {
  color: color-mix(in srgb, var(--primary) 78%, white);
  font-size: 0.76rem;
  font-weight: 1000;
  letter-spacing: 0.12em;
}

.level-up-achievement-delta {
  color: #fff4ae;
  font-size: 1.02rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--brand-gold) 30%, transparent);
}

.level-up-achievement-result {
  min-width: 0;
  color: color-mix(in srgb, var(--ink) 92%, white);
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
}

.level-up-achievement-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: color-mix(in srgb, var(--primary) 82%, white);
  font-size: 0.74rem;
  font-weight: 950;
  opacity: 0;
  transform: translate3d(0, 3px, 0) scale(0.96);
  will-change: opacity, transform;
}

.level-up-achievement-lock b {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 58%, white);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  font-size: 0.66rem;
}

.level-up-achievement-mode {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--muted) 80%, var(--primary));
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.level-up-orbital-pulse.is-level-surge-active .level-up-threshold-route span,
.level-up-orbital-pulse.is-level-surge-active .level-up-orbit-sweep,
.level-up-orbital-pulse.is-level-surge-active .level-up-orbit-pulse,
.level-up-orbital-pulse.is-level-surge-complete .level-up-orbit-sweep {
  animation: none !important;
  transition: none !important;
}

.level-up-orbital-pulse.is-level-surge-complete .level-up-achievement {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}

.level-up-orbital-pulse.is-level-surge-complete .level-up-achievement-lock {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.level-up-orbit strong {
  position: relative;
  z-index: 1;
  color: #fff7d1;
  font-size: clamp(3.8rem, 12vw, 6.8rem);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 0 24px color-mix(in srgb, var(--brand-gold) 58%, transparent),
    0 0 52px color-mix(in srgb, var(--primary) 22%, transparent),
    0 4px 18px rgb(0 0 0 / 0.48);
  animation: level-up-number-pop 1480ms cubic-bezier(0.16, 1, 0.3, 1) 520ms both;
}

.level-up-orbit strong.is-counting {
  animation:
    level-up-number-pop 1480ms cubic-bezier(0.16, 1, 0.3, 1) 520ms both,
    level-up-number-flip 560ms cubic-bezier(0.16, 0.86, 0.24, 1) infinite;
}

.level-up-orbit strong.is-settled {
  animation: level-up-number-settle 920ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.level-up-copy {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  padding-right: 30px;
}

.level-up-copy h2 {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 3.25rem);
  line-height: 0.98;
  letter-spacing: 0;
  text-shadow: 0 0 22px rgb(255 255 255 / 0.12);
}

.level-up-copy p {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 82%, var(--muted));
  font-weight: 800;
  line-height: 1.42;
}

.level-up-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.level-up-threshold-route {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  overflow: hidden;
  color: color-mix(in srgb, var(--muted) 78%, var(--primary));
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.level-up-threshold-route.is-hidden {
  display: none;
}

.level-up-threshold-route span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  opacity: 0.38;
  transform: translate3d(0, 3px, 0) scale(0.96);
  transition:
    opacity 180ms ease,
    color 180ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    text-shadow 180ms ease;
}

.level-up-threshold-route span + span::before {
  content: "\2192";
  margin-right: 2px;
  color: color-mix(in srgb, var(--muted) 60%, transparent);
}

.level-up-threshold-route i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--primary) 46%, white);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, black);
  box-shadow: 0 0 0 transparent;
}

.level-up-threshold-route span.is-crossed {
  color: #fff5bd;
  opacity: 1;
  text-shadow: 0 0 12px color-mix(in srgb, var(--brand-gold) 38%, transparent);
  transform: translate3d(0, 0, 0) scale(1);
}

.level-up-threshold-route span.is-crossed i {
  border-color: #fff4a8;
  background: linear-gradient(135deg, var(--primary), var(--brand-gold));
  box-shadow:
    0 0 8px color-mix(in srgb, var(--primary) 54%, transparent),
    0 0 15px color-mix(in srgb, var(--brand-gold) 34%, transparent);
}

.level-up-route,
.level-up-delta,
.level-up-xp {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 999px;
  padding: 5px 10px;
  background: rgb(6 12 24 / 0.44);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.level-up-delta {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
}

.level-up-xp {
  order: -1;
  color: var(--brand-gold);
  font-size: 1rem;
  border-color: color-mix(in srgb, var(--brand-gold) 40%, var(--line));
  text-shadow: 0 0 16px color-mix(in srgb, var(--brand-gold) 42%, transparent);
}

.level-up-popup-pop .level-up-xp,
.level-up-popup-pop .level-up-route,
.level-up-popup-pop .level-up-delta,
.level-up-popup-pop .level-up-orbit,
.level-up-popup-pop .level-up-summary,
.level-up-popup-pop .level-up-progress-note,
.level-up-popup-pop .level-up-rank {
  animation: level-up-stage-reveal 760ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.level-up-popup-pop .level-up-xp {
  animation-delay: 120ms;
}

.level-up-popup-pop .level-up-orbit {
  animation:
    level-up-energy-build 2200ms cubic-bezier(0.16, 0.86, 0.24, 1) 160ms both,
    level-up-stage-reveal 860ms cubic-bezier(0.16, 0.86, 0.24, 1) 560ms both;
}

.level-up-popup-pop .level-up-route {
  animation-delay: 760ms;
}

.level-up-popup-pop .level-up-delta {
  animation-delay: 900ms;
}

.level-up-popup-pop .level-up-summary,
.level-up-popup-pop .level-up-progress-note {
  animation-delay: 1460ms;
}

.level-up-popup-pop .level-up-rank {
  animation-delay: 2120ms;
}

.level-up-progress-track {
  position: relative;
  height: 11px;
  margin-top: 4px;
  background: rgb(2 7 12 / 0.5);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.06),
    0 0 22px color-mix(in srgb, var(--primary) 12%, transparent);
}

.level-up-progress-track span {
  position: relative;
  width: 100%;
  transform: translateZ(0) scaleX(0);
  transform-origin: left center;
  transition: transform var(--level-progress-duration, 1320ms) cubic-bezier(0.13, 0.88, 0.22, 1);
  background:
    linear-gradient(90deg, var(--primary), #8ef7d4, var(--brand-gold)),
    var(--primary);
  box-shadow: 0 0 18px color-mix(in srgb, var(--brand-gold) 34%, transparent);
  will-change: transform;
}

.level-up-progress-resetting .level-up-progress-track span {
  transition: none !important;
}

.level-up-progress-overflowing .level-up-progress-track {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.07),
    0 0 24px color-mix(in srgb, var(--primary) 18%, transparent),
    0 0 38px color-mix(in srgb, var(--brand-gold) 14%, transparent);
}

.level-up-progress-track span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.78), transparent);
  transform: translateX(-100%);
  animation: level-up-progress-flash 1900ms cubic-bezier(0.16, 0.9, 0.2, 1) 360ms both;
}

.level-up-progress-note {
  color: color-mix(in srgb, var(--muted) 90%, var(--primary));
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.level-up-unlocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.level-up-unlocks.is-empty {
  display: none;
}

.level-up-unlock-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 14px;
  padding: 10px 11px;
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 44%),
    rgb(8 15 29 / 0.56);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.07),
    0 12px 34px rgb(0 0 0 / 0.20);
  opacity: 0;
  transform: translateY(10px);
  animation: level-up-unlock-arrive 960ms cubic-bezier(0.16, 1, 0.3, 1) 2400ms both;
}

.level-up-unlock-card:nth-child(2) {
  animation-delay: 2600ms;
}

.level-up-unlock-card:nth-child(3) {
  animation-delay: 2800ms;
}

.level-up-unlock-card:nth-child(4) {
  animation-delay: 3000ms;
}

.level-up-unlock-card span {
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
}

.level-up-unlock-card strong {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.08;
}

.level-up-unlock-card small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.25;
}

.level-up-rank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 34%, var(--line));
  border-radius: 999px;
  padding: 8px 10px;
  background: rgb(255 224 91 / 0.08);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.level-up-rank strong,
.level-up-rank em {
  color: var(--brand-gold);
  font-style: normal;
}

.level-up-celebration--normal .level-up-skip {
  opacity: 0;
  pointer-events: none;
}

.level-up-celebration--milestone .level-up-unlocks,
.level-up-celebration--legendary .level-up-unlocks {
  margin-top: 8px;
}

.level-up-celebration--legendary .level-up-orbit strong {
  color: #fff5a6;
  text-shadow:
    0 0 30px rgb(255 225 88 / 0.74),
    0 0 74px rgb(39 255 187 / 0.34),
    0 6px 22px rgb(0 0 0 / 0.62);
}

.level-up-celebration--legendary .level-up-eyebrow {
  color: #fff2a7;
}

@media (max-width: 640px) {
  .level-up-popup {
    align-items: center;
    padding: 16px;
  }

  .level-up-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    overflow-y: auto;
  }

  .level-up-orbit {
    width: min(184px, 58vw);
    margin: 0 auto;
  }

  .level-up-copy {
    padding-right: 0;
    text-align: center;
  }

  .level-up-meta {
    justify-content: center;
  }

  .level-up-unlocks {
    grid-template-columns: 1fr;
  }

  .level-up-threshold-route {
    flex-wrap: wrap;
    justify-content: center;
  }

  .level-up-popup.level-up-reward-intermission .level-up-card {
    padding-bottom: 78px;
  }

  .level-up-achievement {
    grid-template-columns: auto auto;
    gap: 3px 9px;
    width: calc(100% - 20px);
    min-height: 58px;
    bottom: 9px;
    border-radius: 12px;
    padding: 6px 9px;
  }

  .level-up-achievement-result,
  .level-up-achievement-lock {
    justify-self: start;
  }

  .level-up-achievement-mode {
    grid-column: 1 / -1;
  }
}

@keyframes level-up-particle-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--spark-angle, 0deg)) translateX(0) scale(0.35);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--spark-angle, 0deg)) translateX(var(--spark-distance, 92px)) scale(0.9);
  }
}

@keyframes level-up-stage-reveal {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.975);
    filter: blur(7px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes level-up-energy-build {
  0% {
    filter: saturate(0.9) brightness(0.86);
    transform: scale(0.93);
  }

  44% {
    filter: saturate(1.28) brightness(1.18);
    transform: scale(1.035);
  }

  100% {
    filter: saturate(1.05) brightness(1);
    transform: scale(1);
  }
}

@keyframes level-up-single-shockwave {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.42);
  }

  18% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.54);
  }
}

@keyframes level-up-radar-sweep {
  to {
    transform: rotate(360deg);
  }
}

@keyframes level-up-ring-expand {
  0% {
    opacity: 0;
    transform: rotateX(64deg) rotateZ(var(--ring-angle, 18deg)) scale(0.54);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0.82;
    transform: rotateX(64deg) rotateZ(var(--ring-angle, 18deg)) scale(1.18);
  }
}

@keyframes level-up-number-pop {
  0% {
    opacity: 0;
    transform: scale(0.68);
  }
  52% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes level-up-number-flip {
  0%,
  100% {
    transform: translateY(0) rotateX(0deg) scale(1);
  }

  45% {
    transform: translateY(-3px) rotateX(14deg) scale(1.035);
  }
}

@keyframes level-up-number-settle {
  0% {
    filter: brightness(1.38);
    transform: scale(1.07);
  }

  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}

@keyframes level-up-progress-flash {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes level-up-unlock-arrive {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.viewer-shell {
  display: grid;
  grid-template-rows: auto auto auto minmax(520px, 1fr) auto auto;
  gap: 10px;
  min-height: calc(100vh - 28px);
  padding: 10px clamp(10px, 2vw, 18px) 14px;
}

.viewer-shell:has(.ad-frame-shell.is-rewarded) {
  grid-template-rows: auto auto auto auto auto auto;
}

.viewer-test-banner {
  padding: 5px 12px;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

.viewer-topbar {
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 2px 0;
}

.viewer-topbar .brand {
  gap: 9px;
}

.viewer-brand-link {
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius);
}

.viewer-brand-link:hover .brand-mark,
.viewer-brand-link:focus-visible .brand-mark {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand-mint) 24%, transparent),
    0 0 18px color-mix(in srgb, var(--brand-sky) 22%, transparent);
}

.viewer-topbar .brand-mark {
  width: 34px;
  height: 34px;
  font-size: 0.72rem;
}

.viewer-topbar .brand strong {
  line-height: 1.1;
}

.viewer-topbar .brand span {
  font-size: 0.76rem;
  line-height: 1.2;
}

.viewer-global-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.viewer-global-nav .text-button {
  padding: 7px 9px;
  font-size: 0.78rem;
}

.viewer-panel {
  position: relative;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), color-mix(in srgb, var(--accent) 7%, var(--surface))),
    var(--surface);
  box-shadow: var(--shadow);
}

.viewer-panel > * {
  position: relative;
  z-index: 1;
}

.viewer-panel.meter-burst-active {
  overflow: hidden;
}

.viewer-panel::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(100deg, transparent 0%, color-mix(in srgb, #ffffff 18%, transparent) 46%, transparent 70%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-115%);
}

.viewer-panel.is-rewarded {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--line));
  box-shadow:
    0 24px 70px color-mix(in srgb, var(--primary) 18%, transparent),
    var(--shadow);
}

.viewer-panel.is-rewarded::after {
  animation: viewer-panel-sheen 1150ms ease-out;
}

.viewer-panel.reward-burst-active {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent),
    0 0 34px color-mix(in srgb, var(--primary) 18%, transparent),
    var(--shadow);
}

.viewer-panel.reward-burst-active .reward-card {
  animation: reward-card-glow-pop 1300ms ease-out both;
}

.viewer-meta {
  display: grid;
  grid-template-columns: minmax(230px, 0.95fr) minmax(520px, 1.4fr);
  align-items: center;
  justify-content: stretch;
  gap: 12px;
}

.viewer-title-block {
  min-width: 0;
}

.viewer-meta h1 {
  margin: 2px 0 3px;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  line-height: 1.1;
}

.viewer-meta p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.viewer-reward-stack {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 8px;
}

.reward-card,
.timer-card,
.viewer-mini-stat {
  min-width: 0;
  padding: 8px 10px;
  text-align: left;
}

.reward-card strong,
.timer-card strong,
.viewer-mini-stat strong {
  display: block;
  margin: 3px 0 2px;
  font-size: clamp(1.05rem, 1.45vw, 1.48rem);
  line-height: 1.05;
}

.reward-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
}

.reward-card.is-rewarded {
  border-color: color-mix(in srgb, var(--primary) 72%, var(--line));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 30%, transparent), transparent 48%),
    color-mix(in srgb, var(--primary) 18%, var(--surface));
}

.reward-card.is-rewarded::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 12%, color-mix(in srgb, #ffffff 34%, transparent) 46%, transparent 72%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-110%);
  animation: reward-card-sheen 1200ms ease-out;
}

.reward-card span,
.reward-card small,
.timer-card span,
.timer-card small,
.viewer-mini-stat span,
.viewer-mini-stat small {
  color: var(--muted);
}

.reward-card span,
.timer-card span,
.viewer-mini-stat span {
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reward-card small,
.timer-card small,
.viewer-mini-stat small {
  display: block;
  font-size: 0.72rem;
  line-height: 1.25;
}

.viewer-mini-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow);
}

.viewer-checkpoint-stat {
  position: relative;
  overflow: hidden;
}

.viewer-checkpoint-stat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0 34%, rgb(255 255 255 / 0.14) 48%, transparent 62%);
  opacity: 0;
  transform: translateX(-115%);
  pointer-events: none;
}

.viewer-checkpoint-stat.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 14%, transparent);
}

.viewer-checkpoint-stat.is-active::after {
  opacity: 1;
  animation: checkpoint-card-scan 1850ms ease-in-out infinite;
}

.viewer-checkpoint-stat.is-missed {
  border-color: color-mix(in srgb, var(--amber) 66%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--amber) 14%, transparent), transparent 70%),
    var(--surface);
  box-shadow: 0 0 22px color-mix(in srgb, var(--amber) 16%, transparent);
}

.viewer-checkpoint-stat.is-complete {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  box-shadow: 0 0 22px color-mix(in srgb, var(--primary) 13%, transparent);
}

.viewer-xp-stat {
  display: grid;
  align-content: center;
}

.mini-progress-track {
  position: relative;
  height: 5px;
  margin-top: 6px;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.05), transparent),
    color-mix(in srgb, var(--bg-soft) 78%, var(--surface));
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 0.18),
    0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
  isolation: isolate;
}

.mini-progress-track span {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 50%, rgb(255 255 255 / 0.58), transparent 0.55rem),
    linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow:
    0 0 12px color-mix(in srgb, var(--accent) 30%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.28);
  transition:
    width 760ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 220ms ease;
  will-change: width;
}

.viewer-status-strip {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: start;
  gap: 6px;
}

.viewer-status-strip span {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}

.viewer-status-strip span.is-active {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  color: var(--accent);
}

.viewer-status-strip span.is-done {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--line));
  color: var(--primary);
}

.viewer-panel .progress-track {
  height: 6px;
}

.viewer-panel .viewer-timer-progress {
  --meter-intensity: 0.35;
  --meter-glow-alpha: 0.1;
  --meter-glow-size: 13px;
  --meter-border-alpha: 0.2;
  --meter-border-soft-alpha: 0.09;
  --meter-border-size: 4px;
  --meter-edge-alpha: 0.22;
  --meter-edge-soft-alpha: 0.14;
  --meter-edge-size: 14px;
  --meter-edge-soft-size: 8px;
  --meter-leading-size: 16px;
  --meter-sheen-opacity: 0.16;
  --meter-stream-opacity: 0.15;
  --meter-particle-opacity: 0.16;
  --meter-particle-opacity-low: 0.12;
  --meter-particle-opacity-mid: 0.14;
  --meter-particle-opacity-high: 0.18;
  --meter-aura-alpha: 0;
  --meter-aura-soft-alpha: 0;
  --meter-aura-hot-alpha: 0;
  --meter-aura-sky-alpha: 0;
  --meter-aura-sheen-alpha: 0;
  --meter-aura-size: 10px;
  --meter-aura-soft-size: 18px;
  --meter-bolt-opacity: 0;
  --meter-bolt-hot-alpha: 0;
  --meter-bolt-gold-alpha: 0;
  --meter-bolt-sky-alpha: 0;
  --meter-bolt-soft-alpha: 0;
  --meter-bolt-teal-alpha: 0;
  --meter-yellow-bolt-opacity: 0;
  --meter-fill-start: rgb(59 130 246);
  --meter-fill-mid: rgb(56 189 248);
  --meter-fill-end: rgb(34 211 238);
  --meter-leading-color: rgb(255 255 255);
  --meter-particle-primary: rgb(56 189 248);
  --meter-particle-secondary: rgb(34 211 238);
  --meter-particle-speed: 1600ms;
  --meter-stream-speed: 1500ms;
  --meter-fill-speed: 1850ms;
  --meter-flicker-speed: 900ms;
  --meter-aura-speed: 1500ms;
  --meter-pulse-scale: 1;
  height: 20px;
  border-radius: 999px;
  overflow: hidden;
  contain: layout paint style;
  transform: translateZ(0);
  transform-origin: center;
  backface-visibility: hidden;
  border-color: rgb(96 165 250 / var(--meter-border-alpha));
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.1), transparent 54%),
    radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 24%),
    color-mix(in srgb, var(--bg-soft) 88%, black);
  box-shadow:
    inset 0 1px 3px rgb(0 0 0 / 0.34),
    0 0 0 1px rgb(255 255 255 / 0.03),
    0 0 var(--meter-border-size) rgb(56 189 248 / var(--meter-border-soft-alpha)),
    0 0 var(--meter-glow-size) rgb(45 212 191 / var(--meter-glow-alpha)),
    0 0 var(--meter-aura-size) rgb(250 204 21 / var(--meter-aura-alpha)),
    0 0 var(--meter-aura-soft-size) rgb(56 189 248 / var(--meter-aura-soft-alpha)),
    0 8px 24px rgb(0 0 0 / 0.18);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
  will-change: transform, box-shadow;
}

.viewer-progress-markers {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  pointer-events: none;
}

.viewer-progress-markers .viewer-progress-marker {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 4;
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 999px;
  background:
    radial-gradient(circle, rgb(255 255 255 / 0.85) 0 1.5px, transparent 2px),
    color-mix(in srgb, var(--surface-2) 82%, black);
  box-shadow:
    0 0 0 2px rgb(2 6 23 / 0.66),
    0 0 10px rgb(56 189 248 / 0.12);
  opacity: 0.82;
  transform: translate(-50%, -50%);
  transition:
    opacity 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.viewer-progress-markers .viewer-progress-marker::before,
.viewer-progress-markers .viewer-progress-marker::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.viewer-progress-markers .viewer-progress-marker.complete {
  border-color: color-mix(in srgb, var(--primary) 70%, white);
  background:
    radial-gradient(circle, #ffffff 0 1.5px, transparent 2px),
    linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow:
    0 0 0 2px rgb(2 6 23 / 0.58),
    0 0 16px color-mix(in srgb, var(--primary) 42%, transparent);
  opacity: 1;
}

.viewer-progress-markers .viewer-progress-marker.current {
  width: 16px;
  height: 16px;
  border-color: color-mix(in srgb, var(--accent) 82%, white);
  background:
    radial-gradient(circle, #ffffff 0 2px, transparent 2.5px),
    linear-gradient(135deg, var(--accent), var(--primary));
  box-shadow:
    0 0 0 3px rgb(2 6 23 / 0.62),
    0 0 18px color-mix(in srgb, var(--accent) 54%, transparent),
    0 0 30px color-mix(in srgb, var(--primary) 26%, transparent);
  animation: checkpoint-marker-pulse 1600ms ease-in-out infinite;
}

.viewer-progress-markers .viewer-progress-marker.missed {
  border-color: color-mix(in srgb, var(--amber) 78%, white);
  background:
    radial-gradient(circle, #fff7ed 0 1.6px, transparent 2.2px),
    linear-gradient(135deg, var(--amber), color-mix(in srgb, var(--amber) 48%, var(--surface)));
  box-shadow:
    0 0 0 2px rgb(2 6 23 / 0.62),
    0 0 18px color-mix(in srgb, var(--amber) 42%, transparent);
  opacity: 1;
}

.viewer-progress-markers .viewer-progress-marker.quiz {
  border-radius: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.viewer-panel .viewer-timer-progress.is-meter-burst {
  z-index: 5;
  overflow: visible;
  box-shadow:
    inset 0 1px 3px rgb(0 0 0 / 0.26),
    0 0 0 1px rgb(255 255 255 / 0.08),
    0 0 18px rgb(250 204 21 / 0.34),
    0 0 48px rgb(56 189 248 / 0.38),
    0 0 78px rgb(45 212 191 / 0.26);
}

.viewer-panel .viewer-timer-progress span {
  width: 0;
  background:
    radial-gradient(circle at 100% 50%, color-mix(in srgb, var(--meter-leading-color) 82%, white), transparent var(--meter-leading-size)),
    linear-gradient(90deg, var(--meter-fill-start), var(--meter-fill-mid) 62%, var(--meter-fill-end));
  box-shadow:
    0 0 var(--meter-edge-size) rgb(56 189 248 / var(--meter-edge-alpha)),
    0 0 var(--meter-edge-soft-size) rgb(45 212 191 / var(--meter-edge-soft-alpha)),
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    inset 0 -1px 0 rgb(0 0 0 / 0.18);
  transition:
    width 280ms linear,
    box-shadow 180ms linear;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  transform: translateZ(0);
  transform-origin: left center;
  backface-visibility: hidden;
  contain: paint;
  will-change: width, transform;
}

.viewer-panel .viewer-timer-progress .viewer-progress-head,
.viewer-panel .viewer-timer-progress .viewer-progress-spark-trail {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.viewer-panel .viewer-timer-progress.has-progress .viewer-progress-head,
.viewer-panel .viewer-timer-progress.has-progress .viewer-progress-spark-trail {
  opacity: 1;
}

.viewer-panel .viewer-timer-progress .viewer-progress-head {
  z-index: 3;
  width: 15px;
  height: 15px;
  border: 1px solid color-mix(in srgb, var(--meter-leading-color) 84%, white);
  border-radius: 999px;
  background:
    radial-gradient(circle, white 0 14%, color-mix(in srgb, var(--meter-leading-color) 92%, white) 22% 48%, color-mix(in srgb, var(--meter-fill-end) 82%, transparent) 58%, transparent 76%);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--meter-leading-color) 88%, transparent),
    0 0 14px color-mix(in srgb, var(--meter-fill-end) 58%, transparent),
    0 0 24px color-mix(in srgb, var(--meter-particle-primary) 34%, transparent);
  contain: strict;
  transition: opacity 120ms linear;
}

.viewer-panel .viewer-timer-progress .viewer-progress-head::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid color-mix(in srgb, var(--meter-leading-color) 34%, transparent);
  border-radius: inherit;
  opacity: 0.66;
  animation: viewer-progress-head-breathe 1380ms ease-in-out infinite;
}

.viewer-panel .viewer-timer-progress .viewer-progress-spark-trail {
  z-index: 2;
  width: 96px;
  height: 18px;
  overflow: hidden;
  contain: strict;
  mix-blend-mode: screen;
  transition: opacity 160ms linear;
}

.viewer-panel .viewer-timer-progress .viewer-progress-spark-trail::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 92% 50%, rgb(255 255 255 / 0.96) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 78% 25%, color-mix(in srgb, var(--meter-particle-primary) 88%, white) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 76%, color-mix(in srgb, var(--meter-particle-secondary) 84%, white) 0 0.9px, transparent 1.9px),
    radial-gradient(circle at 54% 42%, rgb(255 255 255 / 0.72) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 38% 72%, color-mix(in srgb, var(--meter-particle-primary) 68%, white) 0 0.75px, transparent 1.5px),
    radial-gradient(circle at 20% 28%, color-mix(in srgb, var(--meter-particle-secondary) 60%, white) 0 0.65px, transparent 1.4px),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--meter-fill-end) 12%, transparent) 64%, color-mix(in srgb, var(--meter-leading-color) 30%, transparent));
  opacity: var(--meter-particle-opacity-high);
  transform: translate3d(-10px, 0, 0);
  animation: viewer-progress-spark-drift var(--meter-particle-speed) linear infinite;
}

.viewer-timer-progress.is-progress-paused .viewer-progress-head::after,
.viewer-timer-progress.is-progress-paused .viewer-progress-spark-trail::before {
  animation-play-state: paused;
}

.viewer-timer-progress.is-filling span,
.viewer-timer-progress.is-progress-pulse span {
  animation: progress-fill-energy var(--meter-fill-speed) linear infinite;
}

.viewer-timer-progress.is-progress-paused span,
.viewer-timer-progress.is-progress-paused span::before,
.viewer-timer-progress.is-progress-paused span::after {
  animation-play-state: paused;
}

.viewer-panel .viewer-timer-progress span::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  display: block;
  width: clamp(28px, 42%, 64px);
  border-radius: inherit;
  background-image:
    radial-gradient(circle at 99% 50%, rgb(255 255 255 / 1) 0 1.35px, color-mix(in srgb, var(--meter-particle-primary) 76%, white) 1.45px 3.25px, transparent 5px),
    radial-gradient(circle at 94% 50%, color-mix(in srgb, var(--meter-particle-secondary) 90%, white) 0 0.85px, color-mix(in srgb, var(--meter-particle-primary) 38%, transparent) 1px 2.4px, transparent 4px),
    radial-gradient(circle at 82% 28%, color-mix(in srgb, var(--meter-fill-end) 68%, #facc15) 0 0.9px, rgb(250 204 21 / 0.36) 1px 2.8px, transparent 4.8px),
    radial-gradient(circle at 78% 74%, color-mix(in srgb, var(--meter-particle-secondary) 86%, white) 0 0.85px, color-mix(in srgb, var(--meter-particle-secondary) 42%, transparent) 1px 2.6px, transparent 4.4px),
    radial-gradient(circle at 96% 18%, rgb(255 255 255 / 0.74) 0 0.65px, color-mix(in srgb, var(--meter-particle-primary) 34%, transparent) 0.8px 2.2px, transparent 3.8px),
    radial-gradient(circle at 96% 84%, rgb(255 255 255 / 0.7) 0 0.6px, color-mix(in srgb, var(--meter-particle-secondary) 32%, transparent) 0.7px 2px, transparent 3.5px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.viewer-panel .viewer-timer-progress.is-filling span::before,
.viewer-panel .viewer-timer-progress.is-progress-pulse span::before {
  display: block !important;
  content: "";
  opacity: var(--meter-particle-opacity-low);
  animation: progress-tip-impact-sparks 1120ms ease-in-out infinite;
}

.viewer-panel .viewer-timer-progress span::after {
  inset: 0 auto 0 0;
  width: 260%;
  background-image:
    radial-gradient(circle at 4% 46%, rgb(255 255 255 / 0.98) 0 1.35px, transparent 2.15px),
    radial-gradient(circle at 9% 62%, color-mix(in srgb, var(--meter-particle-primary) 94%, white) 0 1.18px, transparent 2px),
    radial-gradient(circle at 15% 34%, color-mix(in srgb, var(--meter-particle-secondary) 90%, white) 0 1.05px, transparent 1.9px),
    radial-gradient(circle at 22% 76%, rgb(255 255 255 / 0.78) 0 0.95px, transparent 1.72px),
    radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--meter-particle-primary) 90%, white) 0 0.9px, transparent 1.65px),
    radial-gradient(circle at 34% 88%, color-mix(in srgb, var(--meter-particle-secondary) 84%, white) 0 0.86px, transparent 1.58px),
    radial-gradient(circle at 41% 52%, rgb(255 255 255 / 0.82) 0 0.82px, transparent 1.5px),
    radial-gradient(circle at 48% 28%, color-mix(in srgb, var(--meter-fill-end) 70%, #facc15) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 54% 70%, color-mix(in srgb, var(--meter-particle-primary) 86%, white) 0 0.86px, transparent 1.55px),
    radial-gradient(circle at 61% 40%, rgb(255 255 255 / 0.96) 0 1.16px, transparent 1.92px),
    radial-gradient(circle at 68% 18%, color-mix(in srgb, var(--meter-particle-secondary) 92%, white) 0 1px, transparent 1.78px),
    radial-gradient(circle at 74% 82%, color-mix(in srgb, var(--meter-particle-primary) 90%, white) 0 0.9px, transparent 1.62px),
    radial-gradient(circle at 82% 54%, rgb(255 255 255 / 0.84) 0 0.84px, transparent 1.5px),
    radial-gradient(circle at 90% 30%, color-mix(in srgb, var(--meter-particle-secondary) 86%, white) 0 0.82px, transparent 1.5px),
    radial-gradient(circle at 97% 66%, color-mix(in srgb, var(--meter-particle-primary) 92%, white) 0 0.88px, transparent 1.58px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  background-clip: padding-box;
  transform: translate3d(-62%, 0, 0);
  will-change: transform, opacity;
}

.viewer-timer-progress.is-filling span::after,
.viewer-timer-progress.is-progress-pulse span::after {
  opacity: var(--meter-particle-opacity);
  animation:
    progress-smooth-particle-flow var(--meter-particle-speed) linear infinite,
    progress-quantum-flicker var(--meter-flicker-speed) ease-in-out infinite;
}

.viewer-timer-progress.is-progress-active[data-meter-phase="charged"],
.viewer-timer-progress.is-progress-active[data-meter-phase="overcharged"],
.viewer-timer-progress.is-progress-active[data-meter-phase="surging"],
.viewer-timer-progress.is-complete {
  animation: meter-frame-breathe var(--meter-aura-speed) ease-in-out infinite;
}

.viewer-timer-progress[data-meter-phase="charged"]::before,
.viewer-timer-progress[data-meter-phase="overcharged"]::before,
.viewer-timer-progress[data-meter-phase="surging"]::before {
  display: none;
  content: none;
  animation: none;
}

.viewer-timer-progress[data-meter-phase="charged"] span {
  box-shadow:
    0 0 var(--meter-edge-size) rgb(56 189 248 / calc(var(--meter-edge-alpha) + 0.04)),
    0 0 var(--meter-edge-soft-size) rgb(45 212 191 / calc(var(--meter-edge-soft-alpha) + 0.03)),
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    inset 0 -1px 0 rgb(0 0 0 / 0.18);
}

.viewer-timer-progress[data-meter-phase="charged"] span::before,
.viewer-timer-progress[data-meter-phase="overcharged"] span::before,
.viewer-timer-progress[data-meter-phase="surging"] span::before {
  opacity: var(--meter-particle-opacity-mid);
}

.viewer-timer-progress[data-meter-phase="charged"] span::after,
.viewer-timer-progress[data-meter-phase="overcharged"] span::after,
.viewer-timer-progress[data-meter-phase="surging"] span::after {
  opacity: var(--meter-particle-opacity-high);
}

.viewer-timer-progress[data-meter-phase="overcharged"] span,
.viewer-timer-progress[data-meter-phase="surging"] span {
  box-shadow:
    0 0 var(--meter-edge-size) rgb(56 189 248 / calc(var(--meter-edge-alpha) + 0.08)),
    0 0 var(--meter-edge-soft-size) rgb(45 212 191 / calc(var(--meter-edge-soft-alpha) + 0.06)),
    inset 0 1px 0 rgb(255 255 255 / 0.48),
    inset 0 -1px 0 rgb(0 0 0 / 0.16);
}

.viewer-timer-progress[data-meter-phase="ready"] span {
  box-shadow:
    0 0 var(--meter-edge-size) rgb(56 189 248 / calc(var(--meter-edge-alpha) + 0.06)),
    0 0 var(--meter-edge-soft-size) rgb(45 212 191 / calc(var(--meter-edge-soft-alpha) + 0.05)),
    inset 0 1px 0 rgb(255 255 255 / 0.46),
    inset 0 -1px 0 rgb(0 0 0 / 0.16);
}

.viewer-timer-progress.is-complete {
  box-shadow:
    inset 0 1px 3px rgb(0 0 0 / 0.28),
    0 0 0 1px rgb(255 255 255 / 0.05),
    0 0 12px rgb(250 204 21 / 0.18),
    0 0 28px rgb(56 189 248 / 0.34),
    0 0 44px rgb(45 212 191 / 0.24);
}

.viewer-timer-progress.is-meter-burst::before {
  z-index: 2;
  inset: auto;
  top: 50%;
  right: -1px;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  transform-origin: 100% 50%;
  background:
    radial-gradient(circle, rgb(255 255 255 / 1) 0 2px, rgb(250 204 21 / 0.98) 2px 4px, rgb(45 212 191 / 0.58) 4px 6px, transparent 7px);
  box-shadow:
    0 0 20px 9px rgb(45 212 191 / 0.5),
    0 0 34px 16px rgb(56 189 248 / 0.3),
    0 0 48px 22px rgb(250 204 21 / 0.14),
    -10px -10px 0 -2px rgb(250 204 21 / 0.92),
    -14px 9px 0 -2px rgb(34 211 238 / 0.88),
    -21px -3px 0 -2px rgb(255 255 255 / 0.92),
    7px -14px 0 -2px rgb(250 204 21 / 0.8),
    9px 13px 0 -2px rgb(45 212 191 / 0.82),
    19px -7px 0 -2px rgb(56 189 248 / 0.74),
    23px 10px 0 -2px rgb(255 255 255 / 0.7),
    -5px -21px 0 -3px rgb(255 255 255 / 0.58),
    -6px 22px 0 -3px rgb(250 204 21 / 0.56);
  opacity: 0;
  animation: meter-completion-burst 1050ms cubic-bezier(0.12, 0.85, 0.18, 1) both;
  mix-blend-mode: screen;
}

.viewer-timer-progress.is-meter-burst::after {
  z-index: 3;
  inset: auto auto calc(100% + 8px) 50%;
  width: max-content;
  max-width: min(420px, calc(100vw - 40px));
  padding: 5px 9px;
  color: #04110d;
  font-size: clamp(0.72rem, 1.4vw, 0.86rem);
  font-weight: 1000;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  content: attr(data-reward-text) "  |  " attr(data-xp-text) " unlocked";
  background: linear-gradient(135deg, #facc15, #2dd4bf 72%, #38bdf8);
  border: 1px solid rgb(255 255 255 / 0.42);
  box-shadow:
    0 0 18px rgb(250 204 21 / 0.3),
    0 0 30px rgb(45 212 191 / 0.22);
  opacity: 0;
  transform: translateX(-50%) translateY(8px) scale(0.96);
  animation: meter-completion-label 2350ms cubic-bezier(0.2, 0.9, 0.22, 1) both;
}

.primary-button.is-claim-ready {
  border-color: color-mix(in srgb, var(--accent) 78%, var(--primary));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 90%, #ffffff), color-mix(in srgb, var(--accent) 88%, var(--primary)));
  color: #06120e;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.18) inset,
    0 0 22px color-mix(in srgb, var(--accent) 34%, transparent);
  animation: claim-ready-glow 1350ms ease-in-out infinite;
}

.captcha-panel,
.engagement-panel,
.verified-click-through-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.36fr);
  gap: 10px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--line));
  border-radius: var(--radius);
  padding: 10px 12px;
  background: color-mix(in srgb, var(--amber) 9%, var(--surface));
}

.captcha-panel.captcha-reveal-pop,
.verified-click-through-panel.captcha-reveal-pop {
  animation: captcha-reveal-pop 520ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.verified-click-through-panel {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, var(--surface)), color-mix(in srgb, var(--primary) 8%, var(--surface))),
    var(--surface);
}

.verified-click-through-panel .primary-button {
  min-width: 154px;
  justify-self: end;
  text-align: center;
}

.verified-click-through-status {
  grid-column: 1 / -1;
  margin-top: 0;
  color: var(--muted);
}

.engagement-panel {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  background:
    radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, var(--surface)), color-mix(in srgb, var(--accent) 10%, var(--surface))),
    var(--surface);
  box-shadow: 0 16px 44px color-mix(in srgb, var(--primary) 15%, transparent);
}

.viewer-panel.has-engagement {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--line));
}

.viewer-focus-overlay {
  position: absolute;
  inset: 8px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 50%, var(--line));
  border-radius: 10px;
  padding: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #03100d), color-mix(in srgb, var(--surface-2) 88%, #0f2c25)),
    var(--surface);
  box-shadow: 0 22px 70px color-mix(in srgb, #000000 42%, transparent);
}

.viewer-focus-overlay.is-hidden {
  display: none;
}

.viewer-focus-overlay strong,
.viewer-focus-overlay span {
  display: block;
}

.viewer-focus-overlay strong {
  margin-bottom: 4px;
  color: var(--text);
  font-size: 1.02rem;
}

.viewer-focus-overlay span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.viewer-panel.has-focus-pause .viewer-timer-progress,
.viewer-panel.has-focus-pause .viewer-status-strip,
.viewer-panel.has-focus-pause .engagement-panel {
  filter: saturate(0.72);
}

@media (max-width: 640px) {
  .viewer-focus-overlay {
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
  }
}

.engagement-panel::after {
  content: "";
  position: absolute;
  inset: -40% auto auto 52%;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  pointer-events: none;
}

.engagement-panel.is-quiz {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.engagement-panel.is-attention {
  outline: 3px solid color-mix(in srgb, var(--primary) 20%, transparent);
}

.engagement-attention-pop {
  animation: engagement-attention-pop 780ms ease both;
}

.engagement-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.engagement-orb {
  display: inline-grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 60%, var(--line));
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, #ffffff 32%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 85%, var(--accent)), var(--accent));
  color: #06120f;
  font-size: 0.74rem;
  font-weight: 1000;
  text-transform: uppercase;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--primary) 10%, transparent);
}

.engagement-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}

.engagement-progress-chip,
.engagement-xp-chip {
  display: inline-block;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--line));
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 1000;
}

.engagement-xp-chip {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--line));
  background:
    radial-gradient(circle at 25% 18%, rgb(255 255 255 / 0.34), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--amber) 22%, var(--surface-2)), color-mix(in srgb, var(--primary) 16%, var(--surface-2)));
  color: var(--amber);
  box-shadow: 0 0 18px color-mix(in srgb, var(--amber) 14%, transparent);
}

.engagement-timer-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
  border-radius: 999px;
  padding: 4px 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) calc(var(--checkpoint-progress, 1) * 28%), var(--surface-2)), var(--surface-2)),
    var(--surface-2);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 1000;
  white-space: nowrap;
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 16%, transparent);
}

.engagement-timer-chip.is-hidden {
  display: none;
}

.engagement-timer-chip.is-paused {
  border-color: color-mix(in srgb, var(--amber) 46%, var(--line));
  color: var(--amber);
}

.engagement-timer-chip.is-warning {
  border-color: color-mix(in srgb, var(--amber) 72%, var(--line));
  background: color-mix(in srgb, var(--amber) 15%, var(--surface-2));
  color: #fde68a;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.08) inset,
    0 0 22px color-mix(in srgb, var(--amber) 24%, transparent);
}

.captcha-panel strong,
.captcha-panel small,
.verified-click-through-panel strong,
.verified-click-through-panel small,
.engagement-panel strong,
.engagement-panel small {
  display: block;
}

.captcha-panel small,
.verified-click-through-panel small,
.engagement-panel small {
  margin-top: 5px;
  color: var(--muted);
}

.quiz-choice-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.quiz-choice {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.quiz-choice:hover,
.quiz-choice:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 68%, var(--line));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  transform: translateY(-1px);
}

.quiz-choice b {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent);
  font-size: 0.78rem;
}

.quiz-choice input {
  accent-color: var(--primary);
}

.quiz-feedback {
  color: var(--amber);
  font-weight: 900;
}

.quiz-shake {
  animation: quiz-shake 280ms ease both;
}

.engagement-panel:not(.is-hidden) {
  position: relative;
  z-index: 8;
  grid-template-columns: minmax(0, 1fr) minmax(156px, 0.36fr);
  width: 100%;
  margin-top: 12px;
  padding: 16px;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--primary));
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 34%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.08) inset,
    0 18px 52px rgb(0 0 0 / 0.34),
    0 0 56px color-mix(in srgb, var(--accent) 22%, transparent);
  backdrop-filter: blur(18px);
}

.engagement-panel:not(.is-hidden)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(105deg, transparent 0 18%, rgb(255 255 255 / 0.18) 42%, transparent 58%),
    radial-gradient(circle at 12% 92%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 30%);
  opacity: 0.72;
  transform: translateX(-120%);
  animation: checkpoint-scanner 2400ms ease-in-out infinite;
  pointer-events: none;
}

.engagement-panel:not(.is-hidden)::after {
  inset: auto 18px 18px auto;
  width: 118px;
  height: 118px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
  opacity: 0.9;
}

.engagement-panel.is-checkpoint:not(.is-hidden) {
  animation: checkpoint-float-glow 2600ms ease-in-out infinite;
}

.engagement-panel.is-missed:not(.is-hidden) {
  border-color: color-mix(in srgb, var(--amber) 70%, var(--line));
  background:
    radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--amber) 28%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.08) inset,
    0 18px 52px rgb(0 0 0 / 0.36),
    0 0 48px color-mix(in srgb, var(--amber) 24%, transparent);
}

.engagement-panel.is-missed .engagement-progress-chip {
  border-color: color-mix(in srgb, var(--amber) 60%, var(--line));
  color: var(--amber);
}

.engagement-panel.is-missed .engagement-orb {
  border-color: color-mix(in srgb, var(--amber) 68%, var(--line));
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, #ffffff 30%, transparent), transparent 38%),
    linear-gradient(135deg, var(--amber), color-mix(in srgb, var(--amber) 48%, var(--accent)));
}

.engagement-panel .action-neutral {
  position: relative;
  min-height: 58px;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.22) 0 21%, transparent 22%),
    conic-gradient(from -90deg, var(--accent) calc(var(--checkpoint-progress, 1) * 1turn), rgb(255 255 255 / 0.14) 0),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 76%, var(--accent)), var(--accent));
  color: #04110d;
  font-weight: 1000;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.18) inset,
    0 0 26px color-mix(in srgb, var(--accent) 28%, transparent);
}

.engagement-panel .action-neutral::after {
  display: none;
  content: "";
}

.engagement-panel .action-neutral:disabled {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
  background:
    linear-gradient(135deg, rgb(15 23 42 / 0.92), rgb(2 6 23 / 0.86)),
    color-mix(in srgb, var(--surface) 92%, transparent);
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  cursor: default;
  opacity: 1;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 0 18px color-mix(in srgb, var(--primary) 10%, transparent);
}

.engagement-panel .action-neutral:disabled::after {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
}

.engagement-panel.is-missed .action-neutral {
  border-color: color-mix(in srgb, var(--amber) 70%, var(--line));
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.22) 0 21%, transparent 22%),
    linear-gradient(135deg, var(--amber), color-mix(in srgb, var(--amber) 60%, var(--primary)));
}

.engagement-panel.has-object-task:not(.is-hidden) {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.engagement-panel.has-object-task .action-neutral {
  display: none;
}

.engagement-panel.has-object-task .engagement-heading {
  margin-bottom: 8px;
}

.checkpoint-object-stage {
  position: relative;
  margin-top: 14px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 32%, rgb(255 255 255 / 0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 18%, rgb(255 255 255 / 0.1) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 62%, color-mix(in srgb, var(--accent) 18%, transparent) 0 1px, transparent 2px),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 8%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 34%),
    radial-gradient(circle at 82% 74%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 38%),
    linear-gradient(135deg, rgb(2 6 23 / 0.56), rgb(15 23 42 / 0.74));
  background-size: 126px 92px, 168px 112px, 140px 120px, 34px 34px, 34px 34px, auto, auto, auto;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    inset 0 -1px 0 color-mix(in srgb, var(--primary) 10%, transparent),
    0 0 30px color-mix(in srgb, var(--primary) 10%, transparent);
}

.checkpoint-object-stage::before,
.checkpoint-object-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.checkpoint-object-stage::before {
  inset: -45% -10%;
  background:
    conic-gradient(from 90deg at 50% 50%, transparent 0 24%, color-mix(in srgb, var(--primary) 15%, transparent) 25% 26%, transparent 27% 100%);
  opacity: 0.34;
  animation: checkpoint-scan-rotate 18s linear infinite;
}

.checkpoint-object-stage::after {
  inset: 0;
  background:
    linear-gradient(20deg, transparent 0 32%, color-mix(in srgb, var(--primary) 7%, transparent) 33% 34%, transparent 35% 100%),
    linear-gradient(148deg, transparent 0 58%, color-mix(in srgb, var(--accent) 7%, transparent) 59% 60%, transparent 61% 100%),
    linear-gradient(115deg, transparent 0 40%, rgb(255 255 255 / 0.06) 48%, transparent 56% 100%),
    radial-gradient(circle at 92% 72%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 24%);
  opacity: 0.85;
  pointer-events: none;
}

.checkpoint-scan-header {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 13px;
  background:
    radial-gradient(circle at 8% 50%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%),
    linear-gradient(135deg, rgb(15 23 42 / 0.52), rgb(2 6 23 / 0.44));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.07),
    0 12px 28px rgb(0 0 0 / 0.16);
}

.checkpoint-scan-kicker {
  color: var(--primary);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.checkpoint-scan-header strong {
  color: var(--text);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.05;
}

.checkpoint-scan-header small {
  max-width: 68ch;
  color: color-mix(in srgb, var(--text) 76%, var(--muted));
  font-size: 0.78rem;
  line-height: 1.35;
}

.checkpoint-object-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.checkpoint-scan-loading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.checkpoint-scan-loading span {
  min-height: 88px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, rgb(255 255 255 / 0.06));
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 34%),
    linear-gradient(135deg, rgb(15 23 42 / 0.56), rgb(2 6 23 / 0.58));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 10px 22px rgb(0 0 0 / 0.14);
}

.checkpoint-scan-loading span::before {
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  margin: 22px auto 0;
  border: 1px solid color-mix(in srgb, var(--primary) 46%, transparent);
  border-radius: 999px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--primary) 42%, transparent), transparent 58%),
    rgb(2 6 23 / 0.72);
  animation: checkpoint-object-pulse 1600ms ease-in-out infinite;
}

.checkpoint-object-stage.is-preparing {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
}

.checkpoint-object {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  min-height: 136px;
  border: 1px solid color-mix(in srgb, var(--checkpoint-color, var(--primary)) 28%, rgb(255 255 255 / 0.08));
  border-radius: 14px;
  padding: 12px 10px 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 24%, rgb(255 255 255 / 0.08) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 34%, color-mix(in srgb, var(--checkpoint-color, var(--primary)) 18%, transparent) 0 1px, transparent 2px),
    linear-gradient(110deg, transparent 0 46%, color-mix(in srgb, var(--checkpoint-color, var(--primary)) 7%, transparent) 48%, transparent 55% 100%),
    radial-gradient(circle at var(--object-x, 50%) var(--object-y, 50%), color-mix(in srgb, var(--checkpoint-color, var(--primary)) 16%, transparent), transparent 38%),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.035), transparent 62%),
    linear-gradient(155deg, rgb(15 23 42 / 0.7), rgb(2 6 23 / 0.62));
  background-size: 72px 54px, 92px 68px, auto, auto, auto, auto;
  color: var(--text);
  cursor: pointer;
  isolation: isolate;
  transform: translateY(0) scale(1);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}

.checkpoint-object::before,
.checkpoint-object::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.checkpoint-object::before {
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--checkpoint-color, var(--primary)) 18%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--checkpoint-color, var(--primary)) 10%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--checkpoint-color, var(--primary)) 8%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.72;
}

.checkpoint-object::after {
  inset: -28% auto -28% -44%;
  width: 48%;
  height: auto;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--checkpoint-color, var(--primary)) 28%, transparent), transparent);
  opacity: 0.42;
  transform: rotate(16deg);
  animation: checkpoint-tile-sweep 7200ms ease-in-out infinite;
}

.checkpoint-object:hover,
.checkpoint-object:focus-visible,
.checkpoint-object.is-selected {
  border-color: color-mix(in srgb, var(--checkpoint-color, var(--primary)) 62%, #ffffff);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    0 0 0 1px color-mix(in srgb, var(--checkpoint-color, var(--primary)) 16%, transparent),
    0 16px 34px rgb(0 0 0 / 0.22),
    0 0 28px color-mix(in srgb, var(--checkpoint-color, var(--primary)) 22%, transparent);
  filter: brightness(1.12) saturate(1.13);
  outline: none;
  transform: translateY(-2px) scale(1.01);
}

.checkpoint-object.is-verifying {
  animation: checkpoint-verification-pop 520ms ease-out both;
}

.checkpoint-object.is-verifying::before {
  animation: checkpoint-verification-ripple 620ms ease-out both;
}

.checkpoint-object:focus-visible .checkpoint-object-core {
  box-shadow:
    0 0 0 3px rgb(255 255 255 / 0.22),
    0 0 30px color-mix(in srgb, var(--primary) 35%, transparent);
}

.checkpoint-object-core {
  position: relative;
  display: grid;
  width: clamp(54px, var(--object-size, 60px), 78px);
  height: clamp(54px, var(--object-size, 60px), 78px);
  place-items: center;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--checkpoint-color, var(--primary)) 46%, rgb(255 255 255 / 0.12));
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--checkpoint-color, var(--primary)) 11%, transparent), transparent 58%),
    radial-gradient(circle at 30% 22%, rgb(255 255 255 / 0.32), transparent 32%),
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--checkpoint-color, var(--accent)) 24%, transparent), transparent 62%),
    linear-gradient(145deg, rgb(15 23 42 / 0.9), rgb(2 6 23 / 0.92));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    inset 0 -12px 24px rgb(0 0 0 / 0.18),
    0 0 0 5px color-mix(in srgb, var(--checkpoint-color, var(--accent)) 7%, transparent),
    0 0 22px color-mix(in srgb, var(--checkpoint-color, var(--accent)) 18%, transparent);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
  animation: checkpoint-core-drift 5200ms ease-in-out infinite;
}

.checkpoint-object-core::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid color-mix(in srgb, var(--checkpoint-color, var(--accent)) 24%, transparent);
  border-radius: inherit;
  opacity: 0.8;
  box-shadow:
    inset 0 0 14px color-mix(in srgb, var(--checkpoint-color, var(--accent)) 8%, transparent),
    0 0 16px color-mix(in srgb, var(--checkpoint-color, var(--accent)) 8%, transparent);
}

.checkpoint-object.is-selected .checkpoint-object-core {
  border-color: color-mix(in srgb, var(--checkpoint-color, var(--accent)) 78%, #ffffff);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.2),
    0 0 0 6px color-mix(in srgb, var(--checkpoint-color, var(--accent)) 14%, transparent),
    0 0 34px color-mix(in srgb, var(--checkpoint-color, var(--accent)) 36%, transparent);
}

.checkpoint-object-glow {
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle, color-mix(in srgb, var(--checkpoint-color, var(--accent)) 28%, transparent), transparent 68%);
  opacity: 0.85;
  animation: checkpoint-artifact-glow 3600ms ease-in-out infinite;
}

.checkpoint-object-orbit {
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background:
    conic-gradient(from 0deg, transparent 0 18%, color-mix(in srgb, var(--checkpoint-color, var(--primary)) 54%, transparent) 19% 21%, transparent 22% 64%, color-mix(in srgb, #ffffff 34%, transparent) 65% 66%, transparent 67% 100%);
  opacity: 0.52;
  -webkit-mask: radial-gradient(circle, transparent 0 61%, #000 62% 66%, transparent 67%);
  mask: radial-gradient(circle, transparent 0 61%, #000 62% 66%, transparent 67%);
  animation: checkpoint-orbit-spin 9000ms linear infinite;
}

.checkpoint-object-spark {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--checkpoint-color, var(--primary)) 78%, #ffffff);
  box-shadow: 0 0 10px color-mix(in srgb, var(--checkpoint-color, var(--primary)) 70%, transparent);
  opacity: 0.8;
  pointer-events: none;
}

.checkpoint-object-spark--one {
  top: 15%;
  right: 18%;
  animation: checkpoint-spark-drift 4800ms ease-in-out infinite;
}

.checkpoint-object-spark--two {
  bottom: 18%;
  left: 17%;
  width: 3px;
  height: 3px;
  opacity: 0.58;
  animation: checkpoint-spark-drift 5600ms ease-in-out -1600ms infinite reverse;
}

.checkpoint-object-glyph {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  color: var(--checkpoint-color, var(--accent));
  filter:
    drop-shadow(0 0 8px color-mix(in srgb, var(--checkpoint-color, var(--accent)) 42%, transparent))
    drop-shadow(0 8px 10px rgb(0 0 0 / 0.24));
  animation: checkpoint-glyph-float 4400ms ease-in-out infinite;
}

.checkpoint-object-glyph::before,
.checkpoint-object-glyph::after {
  content: "";
  position: absolute;
  display: block;
}

.checkpoint-object-label {
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--checkpoint-color, var(--primary)) 24%, transparent);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgb(2 6 23 / 0.72);
  color: color-mix(in srgb, var(--text) 88%, var(--checkpoint-color, var(--primary)));
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
}

.checkpoint-object-meta {
  color: color-mix(in srgb, var(--text) 56%, var(--muted));
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.checkpoint-color--green {
  --checkpoint-color: #22f08a;
}

.checkpoint-color--cyan {
  --checkpoint-color: #22d3ee;
}

.checkpoint-color--blue {
  --checkpoint-color: #60a5fa;
}

.checkpoint-color--violet {
  --checkpoint-color: #a78bfa;
}

.checkpoint-color--amber {
  --checkpoint-color: #facc15;
}

.checkpoint-object--satellite .checkpoint-object-glyph {
  width: 42px;
  height: 28px;
}

.checkpoint-object--satellite .checkpoint-object-glyph {
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 45%, rgb(255 255 255 / 0.78), transparent 13%),
    linear-gradient(90deg, transparent 0 20%, currentColor 20% 80%, transparent 80%),
    linear-gradient(180deg, color-mix(in srgb, currentColor 92%, #ffffff), color-mix(in srgb, currentColor 48%, #020617));
  background-size: 100% 2px, 18px 18px, 18px 18px;
  background-position: center, center;
  background-repeat: no-repeat;
}

.checkpoint-object--satellite .checkpoint-object-glyph::before,
.checkpoint-object--satellite .checkpoint-object-glyph::after {
  top: 50%;
  width: 22px;
  height: 14px;
  border: 1px solid color-mix(in srgb, currentColor 70%, transparent);
  border-radius: 5px;
  background:
    radial-gradient(circle at 24% 50%, rgb(255 255 255 / 0.26), transparent 16%),
    linear-gradient(90deg, transparent 32%, color-mix(in srgb, currentColor 52%, transparent) 33% 37%, transparent 38% 62%, color-mix(in srgb, currentColor 52%, transparent) 63% 67%, transparent 68%),
    linear-gradient(135deg, color-mix(in srgb, currentColor 34%, rgb(2 6 23 / 0.42)), rgb(2 6 23 / 0.58));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    0 0 12px color-mix(in srgb, currentColor 22%, transparent);
  transform: translateY(-50%);
}

.checkpoint-object--satellite .checkpoint-object-glyph::before {
  right: calc(100% - 4px);
}

.checkpoint-object--satellite .checkpoint-object-glyph::after {
  left: calc(100% - 4px);
}

.checkpoint-object--star .checkpoint-object-glyph {
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 8%, transparent 9% 100%),
    currentColor;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 69%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  filter:
    drop-shadow(0 0 6px color-mix(in srgb, currentColor 80%, transparent))
    drop-shadow(0 0 18px color-mix(in srgb, currentColor 48%, transparent))
    drop-shadow(0 8px 10px rgb(0 0 0 / 0.24));
}

.checkpoint-object--star .checkpoint-object-glyph::after {
  inset: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, rgb(255 255 255 / 0.88), color-mix(in srgb, currentColor 54%, transparent) 58%, transparent 64%);
}

.checkpoint-object--star .checkpoint-object-glyph::before {
  inset: -9px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, currentColor 24%, transparent), transparent 64%);
  filter: blur(1px);
}

.checkpoint-object--planet .checkpoint-object-glyph {
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 22%, rgb(255 255 255 / 0.66), transparent 18%),
    linear-gradient(160deg, transparent 0 28%, color-mix(in srgb, #ffffff 18%, transparent) 29% 33%, transparent 34% 58%, color-mix(in srgb, currentColor 32%, #020617) 59% 64%, transparent 65%),
    radial-gradient(circle at 64% 70%, color-mix(in srgb, currentColor 40%, #020617), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, currentColor 96%, #ffffff), color-mix(in srgb, currentColor 46%, #020617));
  box-shadow:
    inset -8px -10px 16px rgb(0 0 0 / 0.32),
    inset 7px 7px 12px rgb(255 255 255 / 0.08);
}

.checkpoint-object--planet .checkpoint-object-glyph::after {
  inset: 6px;
  border-radius: 999px;
  background:
    linear-gradient(160deg, transparent 0 38%, color-mix(in srgb, #ffffff 18%, transparent) 39% 41%, transparent 42% 100%);
  opacity: 0.72;
}

.checkpoint-object.has-rings .checkpoint-object-glyph::before {
  inset: 9px -13px;
  border: 2px solid color-mix(in srgb, currentColor 62%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 10px color-mix(in srgb, currentColor 28%, transparent),
    inset 0 0 8px color-mix(in srgb, currentColor 16%, transparent);
  transform: rotate(-18deg);
}

.checkpoint-object--orbital_marker .checkpoint-object-glyph {
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, currentColor 76%, transparent);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, #ffffff 72%, currentColor) 0 7%, transparent 8%),
    linear-gradient(135deg, transparent 0 40%, color-mix(in srgb, currentColor 42%, transparent) 41% 48%, transparent 49% 100%),
    linear-gradient(45deg, transparent 0 40%, color-mix(in srgb, currentColor 52%, transparent) 41% 48%, transparent 49% 100%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, currentColor 20%, transparent), transparent 62%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    0 0 14px color-mix(in srgb, currentColor 24%, transparent);
  transform: rotate(45deg);
}

.checkpoint-object--orbital_marker .checkpoint-object-glyph::before {
  inset: 11px;
  border-radius: 4px;
  background:
    radial-gradient(circle, #ffffff 0 20%, currentColor 21% 100%);
  box-shadow:
    0 0 0 5px color-mix(in srgb, currentColor 10%, transparent),
    0 0 16px color-mix(in srgb, currentColor 44%, transparent);
}

.checkpoint-object--orbital_marker .checkpoint-object-glyph::after {
  top: 50%;
  left: 50%;
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 72%, transparent), transparent);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.checkpoint-object--orbital_marker.has-rings .checkpoint-object-glyph::before {
  inset: 8px -8px;
  border: 2px solid color-mix(in srgb, currentColor 62%, transparent);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: rotate(-58deg);
}

.checkpoint-object--beacon .checkpoint-object-glyph {
  width: 30px;
  height: 38px;
  border-radius: 15px 15px 8px 8px;
  background:
    radial-gradient(circle at 50% 22%, rgb(255 255 255 / 0.82), transparent 22%),
    linear-gradient(90deg, transparent 0 38%, rgb(255 255 255 / 0.18) 39% 43%, transparent 44% 100%),
    linear-gradient(180deg, color-mix(in srgb, currentColor 96%, #ffffff), color-mix(in srgb, currentColor 48%, #020617));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.2),
    inset 0 -8px 14px rgb(0 0 0 / 0.22);
}

.checkpoint-object--beacon .checkpoint-object-glyph::before {
  top: -7px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    0 0 0 8px color-mix(in srgb, currentColor 12%, transparent),
    0 0 20px color-mix(in srgb, currentColor 54%, transparent),
    0 0 44px color-mix(in srgb, currentColor 28%, transparent);
  transform: translateX(-50%);
  animation: checkpoint-beacon-flare 2200ms ease-in-out infinite;
}

.checkpoint-object--beacon .checkpoint-object-glyph::after {
  bottom: -10px;
  left: 50%;
  width: 56%;
  height: 12px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse, color-mix(in srgb, currentColor 58%, transparent), transparent 68%);
  transform: translateX(-50%);
}

.checkpoint-object.is-glowing .checkpoint-object-core {
  animation: checkpoint-object-pulse 1900ms ease-in-out infinite;
}

@media (max-width: 760px) {
  .engagement-panel.has-object-task:not(.is-hidden) {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .checkpoint-object-stage {
    padding: 12px;
  }

  .checkpoint-object-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .checkpoint-object {
    min-height: 124px;
    padding: 10px 7px;
  }

  .checkpoint-object-label {
    font-size: 0.64rem;
  }
}

@media (max-width: 430px) {
  .checkpoint-object-grid {
    grid-template-columns: 1fr;
  }
}

/* Orbital QA polish: retain the production meter palette while keeping the
   timer beam contained and the completion handoff compositor-only. */
.viewer-panel .viewer-timer-progress .viewer-progress-start-cap {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid color-mix(in srgb, var(--meter-fill-start) 78%, white);
  border-radius: 999px;
  background:
    radial-gradient(circle at 64% 42%, rgb(255 255 255 / 0.62), transparent 28%),
    linear-gradient(90deg, var(--meter-fill-start), var(--meter-fill-mid));
  box-shadow:
    0 0 6px color-mix(in srgb, var(--meter-fill-start) 56%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(2.5px, -50%, 0);
  transition: opacity 100ms linear;
  contain: strict;
  will-change: opacity;
}

.viewer-panel .viewer-timer-progress.has-progress .viewer-progress-start-cap {
  opacity: 1;
}

.viewer-panel .viewer-timer-progress .viewer-progress-head {
  box-shadow:
    0 0 5px color-mix(in srgb, var(--meter-leading-color) 76%, transparent),
    0 0 11px color-mix(in srgb, var(--meter-fill-end) 44%, transparent),
    0 0 18px color-mix(in srgb, var(--meter-particle-primary) 22%, transparent);
}

.viewer-panel .viewer-timer-progress .viewer-progress-spark-trail {
  width: 64px;
  height: 14px;
}

.viewer-panel .viewer-timer-progress .viewer-progress-spark-trail::before {
  background:
    radial-gradient(circle at 90% 50%, rgb(255 255 255 / 0.88) 0 1px, transparent 1.9px),
    radial-gradient(circle at 72% 28%, color-mix(in srgb, var(--meter-particle-primary) 82%, white) 0 0.8px, transparent 1.65px),
    radial-gradient(circle at 58% 72%, color-mix(in srgb, var(--meter-particle-secondary) 76%, white) 0 0.75px, transparent 1.55px),
    radial-gradient(circle at 34% 44%, rgb(255 255 255 / 0.58) 0 0.65px, transparent 1.35px),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--meter-fill-end) 9%, transparent) 68%, color-mix(in srgb, var(--meter-leading-color) 20%, transparent));
  opacity: min(0.62, var(--meter-particle-opacity-high));
}

.viewer-panel .viewer-timer-progress.is-meter-burst {
  overflow: hidden;
  box-shadow:
    inset 0 1px 3px rgb(0 0 0 / 0.26),
    0 0 0 1px rgb(255 255 255 / 0.08),
    0 0 18px color-mix(in srgb, var(--meter-fill-end) 24%, transparent);
}

.viewer-panel .viewer-timer-progress.is-meter-burst::before,
.viewer-panel .viewer-timer-progress.is-meter-burst::after {
  display: none !important;
  content: none !important;
}

.level-up-orbital-pulse .level-up-shockwave {
  display: none;
}

.level-up-orbital-pulse .level-up-particle-field i {
  top: 50%;
  left: calc(50% - min(20vw, 170px));
  box-shadow: 0 0 7px color-mix(in srgb, var(--brand-gold) 42%, transparent);
  animation-name: level-up-contained-particle-drift;
  animation-duration: 1800ms;
}

.level-up-xp-energy-stream {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.level-up-xp-energy-stream i {
  position: absolute;
  top: calc(50% + var(--energy-y, 0px));
  left: 67%;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-gold) 72%, white);
  box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 54%, transparent);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.65);
  will-change: transform, opacity;
}

.level-up-xp-energy-stream i:nth-child(1) { --energy-y: -14px; --energy-delay: 0ms; }
.level-up-xp-energy-stream i:nth-child(2) { --energy-y: 10px; --energy-delay: 55ms; }
.level-up-xp-energy-stream i:nth-child(3) { --energy-y: -3px; --energy-delay: 110ms; }
.level-up-xp-energy-stream i:nth-child(4) { --energy-y: 16px; --energy-delay: 165ms; }
.level-up-xp-energy-stream i:nth-child(5) { --energy-y: -9px; --energy-delay: 220ms; }
.level-up-xp-energy-stream i:nth-child(6) { --energy-y: 4px; --energy-delay: 275ms; }

.level-up-orbital-pulse.is-energy-flowing .level-up-xp-energy-stream i {
  animation: level-up-xp-to-orb 500ms cubic-bezier(0.32, 0.76, 0.32, 1) var(--energy-delay) both;
}

.level-up-orbit-pulse {
  position: absolute;
  inset: -9px;
  border: 1px solid color-mix(in srgb, var(--primary) 58%, var(--brand-gold));
  border-radius: 50%;
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 22%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0) scale(0.82);
  will-change: transform, opacity;
}

.level-up-orbital-pulse .level-up-orbit-ring {
  animation: none;
  opacity: 0.36;
}

.level-up-orbital-pulse.is-threshold-pulsing .level-up-orbit-pulse {
  animation: level-up-compact-threshold-pulse 230ms ease-out both;
}

.level-up-orbital-pulse.is-threshold-pulsing .level-up-number {
  animation: level-up-compact-number-step 230ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.level-up-orbital-pulse.is-final-pulsing .level-up-orbit-pulse {
  border-color: color-mix(in srgb, var(--brand-gold) 78%, white);
  animation: level-up-final-hero-pulse 1450ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.level-up-orbital-pulse.is-final-pulsing .level-up-orbit-ring-a {
  animation: level-up-final-ring-expand 1450ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.level-up-title {
  position: relative;
  overflow: hidden;
}

.level-up-title::after {
  position: absolute;
  inset: -20% auto -20% -36%;
  width: 28%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.76), transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: skewX(-16deg);
}

.level-up-orbital-pulse.is-final-pulsing .level-up-title::after {
  animation: level-up-title-light-sweep 1100ms ease-out 120ms both;
}

.level-up-orbital-pulse .level-up-delta,
.level-up-orbital-pulse .level-up-progress-note,
.level-up-orbital-pulse .level-up-unlocks {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, 6px, 0) !important;
}

.level-up-orbital-pulse.is-results-locked .level-up-delta,
.level-up-orbital-pulse.is-results-locked .level-up-progress-note,
.level-up-orbital-pulse.is-results-locked .level-up-unlocks {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.level-up-orbital-pulse.is-results-locked .level-up-progress-track {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    0 0 20px color-mix(in srgb, var(--primary) 18%, transparent);
}

.level-up-orbital-pulse.is-orb-handoff .level-up-orbit {
  animation: level-up-orb-to-badge 500ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

.level-up-orbital-pulse.is-orb-handoff .level-up-copy {
  opacity: 0.36;
  transform: translate3d(0, 3px, 0);
  transition: opacity 300ms ease, transform 300ms ease;
}

body.admin-qa-viewer-page .reward-wallet-updated .celebration-stats > div:nth-child(1) small::after {
  color: color-mix(in srgb, var(--primary) 78%, #ffffff);
  content: "Simulated";
}

/* Sponsored View Complete achievement choreography. The progress beam and
   standalone Level Up presentation are intentionally outside this scope. */
body.viewer-page.reward-overlay-open > #rewardCelebration.reward-completion-stage-focused {
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 31%),
    radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 28%),
    linear-gradient(180deg, rgb(2 7 13 / 0.985), rgb(2 6 12 / 0.995));
}

#rewardCelebration.reward-completion-stage-focused .reward-complete-shell {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 31%),
    radial-gradient(circle at 12% 28%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 32%),
    linear-gradient(145deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.012)),
    rgb(8 15 28 / 0.985);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    inset 0 -1px 0 color-mix(in srgb, var(--primary) 14%, transparent),
    0 26px 88px rgb(0 0 0 / 0.46),
    0 0 68px color-mix(in srgb, var(--primary) 12%, transparent);
}

#rewardCelebration.reward-completion-stage-focused .reward-complete-header h2 {
  color: #f5fff9;
  font-size: clamp(2rem, 4.6vw, 3.55rem);
  font-weight: 1000;
  letter-spacing: 0.045em;
  line-height: 0.98;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgb(255 255 255 / 0.14),
    0 0 24px color-mix(in srgb, var(--primary) 24%, transparent),
    0 0 54px color-mix(in srgb, var(--accent) 10%, transparent);
}

.reward-perfect-completion {
  display: grid;
  grid-template-columns: 24px auto;
  grid-template-areas:
    "seal title"
    "seal detail";
  gap: 0 8px;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin-top: 3px;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 48%, var(--primary));
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  background:
    radial-gradient(circle at 12% 12%, rgb(255 255 255 / 0.16), transparent 28%),
    linear-gradient(105deg, color-mix(in srgb, var(--brand-gold) 13%, transparent), color-mix(in srgb, var(--primary) 13%, transparent));
  color: #faffea;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    0 0 24px color-mix(in srgb, var(--brand-gold) 10%, transparent);
}

.reward-perfect-completion > span {
  grid-area: seal;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--primary) 72%, #ffffff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 27%, #04190f);
  color: #eafff3;
  font-size: 0.8rem;
  font-weight: 1000;
  box-shadow: 0 0 14px color-mix(in srgb, var(--primary) 22%, transparent);
}

.reward-perfect-completion strong {
  grid-area: title;
  font-size: 0.66rem;
  font-weight: 1000;
  letter-spacing: 0.105em;
  line-height: 1.05;
  text-transform: uppercase;
}

.reward-perfect-completion small {
  grid-area: detail;
  color: color-mix(in srgb, var(--muted) 74%, #ffffff);
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1.25;
}

#rewardCelebration.reward-completion-stage-focused .reward-verification-row {
  gap: 7px;
  margin-top: 7px;
}

#rewardCelebration.reward-completion-stage-focused .reward-verification-row > span {
  position: relative;
  min-height: 25px;
  border-color: color-mix(in srgb, var(--line) 72%, var(--primary));
  padding: 5px 10px 5px 30px;
  background: rgb(7 18 29 / 0.88);
  color: color-mix(in srgb, var(--muted) 80%, #ffffff);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 7px 18px rgb(0 0 0 / 0.14);
}

#rewardCelebration.reward-completion-stage-focused .reward-verification-row > span::before {
  position: absolute;
  left: 8px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--primary));
  border-radius: 999px;
  background: rgb(255 255 255 / 0.035);
  color: #effff7;
  content: "";
  opacity: 1;
  transform: translateY(-50%);
}

#rewardCelebration.reward-completion-stage-focused .reward-verification-row > span::after {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 4px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  opacity: 0;
  transform: translateY(-66%) rotate(42deg) scale(0.74);
}

#rewardCelebration.reward-completion-stage-focused .reward-verification-row > span.is-passed {
  border-color: color-mix(in srgb, var(--primary) 48%, transparent);
  background:
    radial-gradient(circle at 10% 30%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 38%),
    rgb(5 24 26 / 0.9);
  color: color-mix(in srgb, var(--primary) 72%, #ffffff);
}

#rewardCelebration.reward-completion-stage-focused .reward-verification-row > span.is-passed::before {
  border-color: color-mix(in srgb, var(--primary) 72%, #ffffff);
  background: color-mix(in srgb, var(--primary) 28%, #041d12);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 24%, transparent);
}

#rewardCelebration.reward-completion-stage-focused .reward-verification-row > span.is-passed::after {
  opacity: 1;
}

#rewardCelebration.reward-completion-stage-focused .reward-verification-row > span.is-not-required {
  opacity: 0.72;
}

#rewardCelebration.reward-completion-stage-focused .reward-verification-row > span.is-not-required::before {
  content: "–";
}

.reward-completion-energy {
  position: absolute;
  top: 48%;
  left: 50%;
  z-index: 5;
  width: 1px;
  height: 1px;
  contain: strict;
  pointer-events: none;
}

.reward-completion-energy > span {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: radial-gradient(circle, #ffffff 0 14%, color-mix(in srgb, var(--primary) 72%, var(--brand-gold)) 34% 56%, transparent 74%);
  box-shadow:
    0 0 9px color-mix(in srgb, var(--primary) 62%, transparent),
    0 0 18px color-mix(in srgb, var(--brand-gold) 20%, transparent);
  opacity: 0;
  will-change: opacity, transform;
}

#rewardCelebration.reward-completion-stage-focused .celebration-copy {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--brand-gold));
  background:
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 34%),
    radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--brand-gold) 7%, transparent), transparent 30%),
    linear-gradient(145deg, rgb(255 255 255 / 0.065), rgb(255 255 255 / 0.016)),
    rgb(2 8 18 / 0.78);
}

#rewardCelebration.reward-completion-stage-focused #rewardCelebrationAmount {
  font-size: clamp(4rem, 9vw, 7.4rem);
  font-weight: 1000;
  line-height: 0.92;
  text-shadow:
    0 2px 0 rgb(255 255 255 / 0.08),
    0 0 26px color-mix(in srgb, var(--primary) 30%, transparent),
    0 0 58px color-mix(in srgb, var(--primary) 15%, transparent);
}

#rewardCelebration.reward-completion-stage-focused .reward-level-up-card {
  width: min(190px, 74%);
  min-height: 66px;
  padding: 8px 12px;
  border-color: color-mix(in srgb, var(--brand-gold) 38%, var(--primary));
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-gold) 10%, transparent), color-mix(in srgb, var(--primary) 11%, transparent));
  box-shadow: 0 0 22px color-mix(in srgb, var(--brand-gold) 9%, transparent);
}

#rewardCelebration.reward-completion-stage-focused .reward-level-up-card strong {
  font-size: clamp(1rem, 2vw, 1.32rem);
}

#rewardCelebration.reward-completion-stage-focused .celebration-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#rewardCelebration.reward-completion-stage-focused .celebration-stats > div {
  min-height: 96px;
}

#rewardCelebration.reward-completion-stage-focused .reward-verification-stat::before {
  content: "✓";
}

#rewardCelebration.reward-completion-stage-focused .reward-verification-stat strong {
  color: color-mix(in srgb, var(--primary) 76%, #ffffff);
}

#rewardCelebration.reward-completion-stage-focused .reward-next-actions {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 34%),
    linear-gradient(145deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.018)),
    rgb(6 14 27 / 0.88);
}

#rewardCelebration.reward-completion-stage-focused.reward-impact-settled .celebration-copy {
  border-color: color-mix(in srgb, var(--primary) 66%, var(--brand-gold));
}

#rewardCelebration.reward-completion-unified-raf .reward-complete-header h2,
#rewardCelebration.reward-completion-unified-raf .reward-perfect-completion,
#rewardCelebration.reward-completion-unified-raf .reward-verification-row > span,
#rewardCelebration.reward-completion-unified-raf .reward-verification-row > span::before,
#rewardCelebration.reward-completion-unified-raf .reward-verification-row > span::after,
#rewardCelebration.reward-completion-unified-raf .reward-completion-energy > span,
#rewardCelebration.reward-completion-unified-raf .reward-orbital-ring {
  animation: none !important;
  transition: none !important;
}

#rewardCelebration.reward-completion-static .reward-completion-energy,
#rewardCelebration.reward-completion-static .reward-static-fx-layer {
  display: none;
}

#rewardCelebration.reward-completion-static .reward-perfect-completion,
#rewardCelebration.reward-completion-static .reward-verification-row > span,
#rewardCelebration.reward-completion-static .celebration-stats > div,
#rewardCelebration.reward-completion-static .reward-next-actions > * {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
}

@media (max-width: 900px) {
  #rewardCelebration.reward-completion-stage-focused .celebration-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #rewardCelebration.reward-completion-stage-focused .reward-verification-stat {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  #rewardCelebration.reward-completion-stage-focused .reward-complete-header h2 {
    font-size: clamp(1.7rem, 10.5vw, 2.55rem);
  }

  .reward-perfect-completion {
    width: min(100%, 360px);
    border-radius: 18px;
  }

  #rewardCelebration.reward-completion-stage-focused .reward-verification-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #rewardCelebration.reward-completion-stage-focused .reward-verification-row > span:last-child {
    grid-column: 1 / -1;
  }

  #rewardCelebration.reward-completion-stage-focused #rewardCelebrationAmount {
    font-size: clamp(3.3rem, 18vw, 5.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  #rewardCelebration.reward-completion-stage-focused .reward-complete-header h2,
  #rewardCelebration.reward-completion-stage-focused .reward-perfect-completion,
  #rewardCelebration.reward-completion-stage-focused .reward-verification-row > span,
  #rewardCelebration.reward-completion-stage-focused .celebration-stats > div,
  #rewardCelebration.reward-completion-stage-focused .reward-next-actions > * {
    opacity: 1 !important;
    transform: none !important;
  }

  #rewardCelebration.reward-completion-stage-focused .reward-completion-energy {
    display: none;
  }
}

/* Keep the full-screen handoff opaque and cheap to composite. The advertiser
   document is no longer painted underneath the completion dashboard. */
body.viewer-page.reward-overlay-open:has(> #rewardCelebration.reward-completion-performance) .ad-frame-shell.is-rewarded .ad-frame,
body.viewer-page.reward-overlay-open:has(> #rewardCelebration.reward-completion-performance) .ad-frame-shell.is-rewarded .ad-browser-bar {
  visibility: hidden !important;
}

body.viewer-page.reward-overlay-open > #rewardCelebration.reward-completion-performance {
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 34%),
    radial-gradient(circle at 78% 38%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 36%),
    radial-gradient(circle at 20% 72%, color-mix(in srgb, var(--amber) 8%, transparent), transparent 34%),
    rgb(3 8 12 / 0.96);
  backdrop-filter: none !important;
}

#rewardCelebration.reward-completion-performance .reward-complete-shell {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 38%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 34%),
    linear-gradient(145deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.018)),
    rgb(15 23 42 / 0.96);
  backdrop-filter: none !important;
}

#rewardCelebration.reward-completion-performance .reward-rarity-badge,
#rewardCelebration.reward-completion-performance .reward-level-up-card::after,
#rewardCelebration.reward-completion-performance .reward-level-up-card > *,
#rewardCelebration.reward-completion-performance .reward-unlock-reveal,
#rewardCelebration.reward-completion-performance .reward-unlock-reveal::before,
#rewardCelebration.reward-completion-performance .reward-unlock-reveal::after,
#rewardCelebration.reward-completion-performance .reward-progression-panel::before,
#rewardCelebration.reward-completion-performance .reward-complete-header,
#rewardCelebration.reward-completion-performance .reward-credit-trail,
#rewardCelebration.reward-completion-performance .reward-credit-trail > *,
#rewardCelebration.reward-completion-performance .reward-progress-track span {
  animation: none !important;
  filter: none !important;
}

#rewardCelebration.reward-completion-performance .reward-rarity-badge,
#rewardCelebration.reward-completion-performance .reward-level-up-card > *,
#rewardCelebration.reward-completion-performance .reward-unlock-reveal {
  opacity: 1;
  transform: none;
}

#rewardCelebration.reward-completion-performance.reward-money-focus #rewardCelebrationAmount::before,
#rewardCelebration.reward-completion-performance.reward-money-focus #rewardCelebrationAmount::after,
#rewardCelebration.reward-completion-performance.reward-money-docking #rewardCelebrationAmount {
  animation: none !important;
}

#rewardCelebration.reward-completion-performance.reward-money-landed #rewardCelebrationAmount::before {
  animation: reward-performance-amount-pulse 620ms ease-out both !important;
}

#rewardCelebration.reward-completion-performance.reward-money-landed #rewardCelebrationAmount::after {
  animation: reward-performance-amount-sweep 540ms ease-out both !important;
}

#rewardCelebration.reward-completion-performance.reward-completion-confirmed.reward-completion-static .reward-complete-header h2::after,
#rewardCelebration.reward-completion-performance.reward-completion-confirmed.reward-completion-static .reward-complete-shell {
  animation: none !important;
  will-change: auto !important;
}

/* Final QA presentation polish: state sequencing and contained settlement only. */
.level-up-orbital-pulse.is-final-title-revealed .level-up-title {
  animation: level-up-final-title-reveal 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reward-celebration.reward-transition-underlay .reward-complete-shell {
  opacity: 0.72;
  transform: translate3d(0, 8px, 0) scale(0.992);
  transition:
    opacity 320ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reward-celebration:not(.reward-transition-underlay) .reward-complete-shell {
  opacity: 1;
  transform: none;
}

.reward-celebration.reward-transition-continuous.reward-celebration-pop {
  animation: none;
  opacity: 1;
  transform: none;
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="prelude"],
  [data-reward-stage="complete"],
  [data-reward-stage="verify"],
  [data-reward-stage="anticipatePayout"]
) .reward-next-actions > * {
  opacity: 0.28;
  visibility: visible !important;
  filter: saturate(0.68) !important;
  transform: none;
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="payoutCount"],
  [data-reward-stage="payoutLand"]
) .reward-next-actions > * {
  opacity: 0.44;
  visibility: visible;
  filter: saturate(0.76);
  transform: none;
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="walletCredit"],
  [data-reward-stage="levelBonus"]
) .reward-next-actions > * {
  opacity: 0.64;
  visibility: visible;
  filter: saturate(0.86);
  transform: none;
}

.reward-celebration.reward-stage-controlled[data-reward-stage="xpProgress"] .reward-next-actions > * {
  opacity: 0.82;
  visibility: visible;
  filter: none;
  transform: none;
}

.reward-celebration.reward-stage-controlled .reward-next-actions::after {
  opacity: 0;
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="prelude"],
  [data-reward-stage="complete"],
  [data-reward-stage="verify"],
  [data-reward-stage="anticipatePayout"],
  [data-reward-stage="payoutCount"],
  [data-reward-stage="payoutLand"]
) .celebration-stats > div,
.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="prelude"],
  [data-reward-stage="complete"],
  [data-reward-stage="verify"],
  [data-reward-stage="anticipatePayout"],
  [data-reward-stage="payoutCount"],
  [data-reward-stage="payoutLand"]
) .reward-progression-panel,
.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="prelude"],
  [data-reward-stage="complete"],
  [data-reward-stage="verify"],
  [data-reward-stage="anticipatePayout"],
  [data-reward-stage="payoutCount"],
  [data-reward-stage="payoutLand"]
) .reward-daily-strip {
  opacity: 0.18;
  visibility: visible !important;
  pointer-events: none;
  filter: saturate(0.62) brightness(0.8) !important;
  transform: none;
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="walletCredit"],
  [data-reward-stage="levelBonus"]
) .celebration-stats > div,
.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="walletCredit"],
  [data-reward-stage="levelBonus"]
) .reward-progression-panel,
.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="walletCredit"],
  [data-reward-stage="levelBonus"]
) .reward-daily-strip {
  opacity: 0.24;
  visibility: visible;
  pointer-events: none;
  filter: saturate(0.7) brightness(0.84);
  transform: none;
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="walletCredit"],
  [data-reward-stage="levelBonus"]
) .celebration-stats > div:nth-child(1),
.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="walletCredit"],
  [data-reward-stage="levelBonus"]
) .celebration-stats > div:nth-child(2) {
  opacity: 1;
  filter: none;
}

.reward-celebration.reward-stage-controlled.reward-money-landed .celebration-copy::before {
  animation: none !important;
}

.reward-celebration.reward-stage-controlled.reward-amount-settled .celebration-copy > #rewardCelebrationAmount::before {
  inset: -34% -22%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--primary) 24%, transparent), transparent 54%),
    radial-gradient(ellipse at 56% 52%, color-mix(in srgb, var(--brand-gold) 13%, transparent), transparent 38%);
  animation: reward-contained-credit-pulse 720ms ease-out both !important;
}

.reward-celebration.reward-stage-controlled.reward-amount-settled .celebration-copy > #rewardCelebrationAmount::after {
  inset: 4% -5%;
  border-radius: 0;
  background: linear-gradient(104deg, transparent 38%, rgb(255 255 255 / 0.46) 49%, color-mix(in srgb, var(--brand-gold) 32%, transparent) 53%, transparent 64%);
  box-shadow: none;
  transform: translate3d(-112%, 0, 0);
  animation: reward-amount-light-sweep 620ms ease-out 80ms both !important;
}

.reward-static-fx-halo,
.reward-static-fx-ripple {
  width: clamp(170px, 27vw, 300px);
}

.reward-static-fx-halo {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--primary) 28%, transparent), transparent 62%),
    radial-gradient(circle at 42% 44%, color-mix(in srgb, var(--brand-gold) 16%, transparent), transparent 36%);
  filter: blur(4px);
}

.reward-static-fx-ripple {
  display: none !important;
}

.reward-static-fx-credit {
  width: clamp(64px, 7vw, 96px);
  height: 2px !important;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 42%, transparent), color-mix(in srgb, var(--brand-gold) 44%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 22%, transparent);
}

.reward-static-fx-token {
  width: 6px !important;
  height: 6px !important;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-gold) 68%, var(--primary));
  box-shadow: 0 0 9px color-mix(in srgb, var(--primary) 32%, transparent);
}

.reward-static-fx-spark {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 8px currentColor;
}

.reward-credit-trail {
  gap: 5px;
  border-color: color-mix(in srgb, var(--primary) 38%, var(--brand-gold));
  padding: 4px 8px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 14%, transparent);
  font-size: 0.56rem;
}

.reward-credit-trail::before {
  height: 1px;
  opacity: 0.46;
}

.reward-complete-header h2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.reward-complete-header h2::after {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 62%, white);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  color: #ecfff8;
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 24%, transparent);
  content: "✓";
  font-size: 0.62em;
  opacity: 0;
  transform: scale(0.62);
}

.reward-completion-confirmed .reward-complete-header h2::after {
  animation: reward-completion-seal 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reward-completion-confirmed .reward-complete-shell {
  animation: reward-final-border-confirm 780ms ease-out both !important;
}

.reward-sequence-settled .reward-idle-fx-layer {
  opacity: 0 !important;
}

.reward-sequence-settled .reward-idle-fx-layer *,
.reward-sequence-settled .reward-complete-shell::after,
.reward-sequence-settled .reward-orbital-ring,
.reward-sequence-settled .reward-rarity-badge,
.reward-sequence-settled .reward-action-primary,
.reward-sequence-settled .reward-action-primary::after,
.reward-sequence-settled .celebration-stats > div:nth-child(1)::before,
.reward-sequence-settled .celebration-stats > div:nth-child(1)::after,
.reward-sequence-settled .reward-progress-track span::before,
.reward-sequence-settled .reward-progress-track span::after,
.reward-sequence-settled .reward-daily-strip::after {
  animation: none !important;
}

@keyframes level-up-final-title-reveal {
  0% { opacity: 0.62; filter: blur(2px); transform: translate3d(0, 5px, 0) scale(0.96); }
  58% { opacity: 1; filter: none; transform: translate3d(0, -1px, 0) scale(1.035); }
  100% { opacity: 1; filter: none; transform: none; }
}

@keyframes reward-contained-credit-pulse {
  0% { opacity: 0; transform: scale(0.82); }
  42% { opacity: 0.56; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12); }
}

@keyframes reward-amount-light-sweep {
  0% { opacity: 0; transform: translate3d(-112%, 0, 0); }
  34% { opacity: 0.42; }
  100% { opacity: 0; transform: translate3d(112%, 0, 0); }
}

@keyframes reward-completion-seal {
  0% { opacity: 0; transform: scale(0.62); }
  68% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes reward-final-border-confirm {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.1),
      0 26px 84px rgb(0 0 0 / 0.36),
      0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent);
  }
  48% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.14),
      0 26px 84px rgb(0 0 0 / 0.36),
      0 0 0 1px color-mix(in srgb, var(--primary) 48%, transparent),
      0 0 42px color-mix(in srgb, var(--primary) 24%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .level-up-orbital-pulse.is-final-title-revealed .level-up-title,
  .reward-completion-confirmed .reward-complete-header h2::after,
  .reward-completion-confirmed .reward-complete-shell {
    animation: none !important;
    opacity: 1;
    filter: none;
    transform: none;
  }

  .reward-celebration.reward-stage-controlled.reward-amount-settled .celebration-copy > #rewardCelebrationAmount::before,
  .reward-celebration.reward-stage-controlled.reward-amount-settled .celebration-copy > #rewardCelebrationAmount::after {
    animation: none !important;
    opacity: 0;
    filter: none;
    transform: none;
  }
}

@keyframes level-up-contained-particle-drift {
  0% { opacity: 0; transform: rotate(var(--spark-angle)) translate3d(8px, 0, 0) scale(0.6); }
  34% { opacity: 0.52; }
  100% { opacity: 0; transform: rotate(var(--spark-angle)) translate3d(var(--spark-distance), 0, 0) scale(0.28); }
}

@keyframes level-up-xp-to-orb {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.55); }
  24% { opacity: 0.82; }
  100% { opacity: 0; transform: translate3d(clamp(-330px, -38vw, -170px), calc(var(--energy-y) * -0.28), 0) scale(0.2); }
}

@keyframes level-up-compact-threshold-pulse {
  0% { opacity: 0; transform: translateZ(0) scale(0.84); }
  42% { opacity: 0.62; }
  100% { opacity: 0; transform: translateZ(0) scale(1.16); }
}

@keyframes level-up-compact-number-step {
  0% { opacity: 0.56; transform: translate3d(0, 5px, 0) scale(0.9); }
  70% { opacity: 1; transform: translate3d(0, -1px, 0) scale(1.05); }
  100% { opacity: 1; transform: none; }
}

@keyframes level-up-final-hero-pulse {
  0% { opacity: 0; transform: translateZ(0) scale(0.82); }
  32% { opacity: 0.9; }
  100% { opacity: 0; transform: translateZ(0) scale(1.42); }
}

@keyframes level-up-final-ring-expand {
  0% { opacity: 0.7; transform: rotateX(64deg) rotateZ(18deg) scale(0.86); }
  100% { opacity: 0; transform: rotateX(64deg) rotateZ(18deg) scale(1.56); }
}

@keyframes level-up-title-light-sweep {
  0% { left: -36%; opacity: 0; }
  30% { opacity: 0.8; }
  100% { left: 112%; opacity: 0; }
}

@keyframes level-up-orb-to-badge {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(84px, 62px, 0) scale(0.24); }
}

@media (max-width: 640px) {
  .level-up-xp-energy-stream i { left: 74%; }
  .level-up-orbital-pulse .level-up-particle-field i { left: 50%; top: 37%; }
}

@media (prefers-reduced-motion: reduce) {
  .level-up-xp-energy-stream,
  .level-up-orbit-pulse,
  .level-up-title::after {
    display: none !important;
  }

  .level-up-orbital-pulse .level-up-delta,
  .level-up-orbital-pulse .level-up-progress-note {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

.timer-card.is-paused {
  border-color: color-mix(in srgb, var(--amber) 60%, var(--line));
  background: color-mix(in srgb, var(--amber) 12%, var(--surface));
}

.reward-pop {
  animation: reward-pop 520ms ease both;
}

.checkpoint-pop {
  animation: checkpoint-pop 520ms ease both;
}

.primary-button.is-success {
  border-color: color-mix(in srgb, var(--primary) 72%, var(--line));
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--accent) 78%, var(--primary)));
  color: #07130f;
}

@keyframes engagement-attention-pop {
  0% {
    transform: scale(0.985);
    box-shadow: 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent);
  }

  45% {
    transform: scale(1.01);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 12%, transparent);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes checkpoint-card-scan {
  0% {
    transform: translateX(-115%);
  }

  55%,
  100% {
    transform: translateX(115%);
  }
}

@keyframes checkpoint-scanner {
  0% {
    transform: translateX(-125%);
    opacity: 0;
  }

  18% {
    opacity: 0.66;
  }

  62%,
  100% {
    transform: translateX(125%);
    opacity: 0;
  }
}

@keyframes checkpoint-float-glow {
  0%,
  100% {
    filter: saturate(1) brightness(1);
  }

  50% {
    filter: saturate(1.08) brightness(1.05);
  }
}

@keyframes checkpoint-tile-sweep {
  0%,
  38% {
    transform: translateX(0) rotate(16deg);
    opacity: 0;
  }

  52% {
    opacity: 0.42;
  }

  78%,
  100% {
    transform: translateX(360%) rotate(16deg);
    opacity: 0;
  }
}

@keyframes checkpoint-scan-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes checkpoint-core-drift {
  0%,
  100% {
    scale: 1;
  }

  50% {
    scale: 1.025;
  }
}

@keyframes checkpoint-artifact-glow {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}

@keyframes checkpoint-orbit-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes checkpoint-spark-drift {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.45;
  }

  40% {
    opacity: 0.9;
  }

  55% {
    transform: translate(-7px, 5px);
    opacity: 0.72;
  }
}

@keyframes checkpoint-glyph-float {
  0%,
  100% {
    scale: 1;
  }

  50% {
    scale: 1.035;
  }
}

@keyframes checkpoint-beacon-flare {
  0%,
  100% {
    opacity: 0.82;
    scale: 1;
  }

  50% {
    opacity: 1;
    scale: 1.18;
  }
}

@keyframes checkpoint-verification-pop {
  0% {
    filter: brightness(1.1) saturate(1.15);
  }

  45% {
    filter: brightness(1.38) saturate(1.3);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.18),
      0 0 0 2px color-mix(in srgb, var(--checkpoint-color, var(--primary)) 42%, transparent),
      0 0 38px color-mix(in srgb, var(--checkpoint-color, var(--primary)) 34%, transparent);
  }

  100% {
    filter: brightness(1.12) saturate(1.13);
  }
}

@keyframes checkpoint-verification-ripple {
  0% {
    transform: scale(0.98);
    opacity: 0.96;
  }

  100% {
    transform: scale(1.16);
    opacity: 0;
  }
}

@keyframes checkpoint-object-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.18),
      0 0 18px color-mix(in srgb, var(--checkpoint-color, var(--accent)) 28%, transparent);
  }

  50% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.22),
      0 0 34px color-mix(in srgb, var(--checkpoint-color, var(--accent)) 46%, transparent),
      0 0 0 7px color-mix(in srgb, var(--checkpoint-color, var(--accent)) 10%, transparent);
  }
}

@keyframes checkpoint-marker-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.16);
  }
}

@keyframes reward-pop {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes checkpoint-pop {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.035);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes quiz-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  35% {
    transform: translateX(-5px);
  }

  70% {
    transform: translateX(5px);
  }
}

.viewer-actions {
  flex-wrap: wrap;
  gap: 8px;
}

.viewer-claim-form {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.viewer-actions .primary-button,
.viewer-actions .text-button {
  padding: 9px 12px;
}

.viewer-sound-toggle {
  margin-left: auto;
}

.viewer-sound-toggle.is-active {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}

.viewer-note {
  min-height: 0;
  border-left: 3px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  padding: 5px 0 5px 10px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.35;
}

.engagement-celebration {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 52%, var(--line));
  border-radius: var(--radius);
  padding: 12px 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), transparent 68%),
    var(--surface);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--primary) 12%, transparent);
}

.engagement-celebration::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, #ffffff 16%, transparent), transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-110%);
}

.engagement-celebration.has-xp-gain {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
    0 16px 42px color-mix(in srgb, var(--primary) 16%, transparent);
}

.engagement-celebration.engagement-xp-burst-active {
  border-color: color-mix(in srgb, var(--amber) 58%, var(--accent));
  background:
    radial-gradient(circle at 18% 50%, rgb(250 204 21 / 0.16), transparent 34%),
    radial-gradient(circle at 86% 24%, rgb(56 189 248 / 0.18), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), transparent 68%),
    var(--surface);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.06),
    0 0 0 1px rgb(45 212 191 / 0.16),
    0 0 34px rgb(56 189 248 / 0.18),
    0 18px 48px rgb(34 197 94 / 0.18);
}

.engagement-xp-float {
  position: absolute;
  top: -28px;
  right: 18px;
  z-index: 5;
  display: inline-grid;
  min-width: 92px;
  min-height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, white);
  border-radius: 999px;
  padding: 7px 14px;
  background:
    radial-gradient(circle at 26% 18%, rgb(255 255 255 / 0.64), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, var(--primary)), color-mix(in srgb, var(--primary) 72%, var(--amber)));
  color: #03110d;
  font-size: clamp(1rem, 2.2vw, 1.32rem);
  font-weight: 1000;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.22);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent),
    0 0 24px color-mix(in srgb, var(--accent) 34%, transparent),
    0 14px 34px rgb(0 0 0 / 0.3);
  pointer-events: none;
}

.engagement-xp-jump {
  animation:
    engagement-xp-jump 3000ms cubic-bezier(0.16, 0.92, 0.18, 1) both,
    reward-number-shimmer 1550ms ease-out both;
}

.engagement-celebration.is-quiz-pass {
  border-color: color-mix(in srgb, var(--amber) 50%, var(--primary));
}

.engagement-celebration strong,
.engagement-celebration p {
  display: block;
}

.engagement-celebration p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.engagement-burst {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
}

.engagement-burst::before,
.engagement-burst::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #facc15;
  box-shadow:
    -18px -10px 0 -2px rgb(45 212 191 / 0.82),
    17px -8px 0 -2px rgb(56 189 248 / 0.82),
    -15px 16px 0 -2px rgb(255 255 255 / 0.7),
    20px 13px 0 -2px rgb(250 204 21 / 0.76);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.45);
}

.engagement-celebration.engagement-xp-burst-active .engagement-burst {
  background:
    radial-gradient(circle, rgb(255 255 255 / 0.9) 0 11%, rgb(250 204 21 / 0.74) 12% 24%, transparent 25%),
    color-mix(in srgb, var(--primary) 22%, var(--surface));
  box-shadow:
    0 0 18px rgb(45 212 191 / 0.28),
    0 0 30px rgb(250 204 21 / 0.16);
  animation: engagement-core-pop 980ms ease-out both;
}

.engagement-celebration.engagement-xp-burst-active .engagement-burst::before {
  animation: engagement-quantum-spark 1100ms cubic-bezier(0.12, 0.85, 0.18, 1) both;
}

.engagement-celebration.engagement-xp-burst-active .engagement-burst::after {
  animation: engagement-quantum-spark-alt 1300ms cubic-bezier(0.12, 0.85, 0.18, 1) 80ms both;
}

.engagement-burst span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  animation: engagement-dot 680ms ease-out both;
}

.engagement-burst span:nth-child(1) {
  top: 8px;
  left: 15px;
}

.engagement-burst span:nth-child(2) {
  right: 8px;
  bottom: 11px;
  background: var(--accent);
  animation-delay: 80ms;
}

.engagement-burst span:nth-child(3) {
  bottom: 7px;
  left: 8px;
  background: var(--amber);
  animation-delay: 140ms;
}

.engagement-burst span:nth-child(4) {
  top: 3px;
  right: 13px;
  width: 7px;
  height: 7px;
  background: #f8fafc;
  animation-delay: 190ms;
}

.engagement-burst span:nth-child(5) {
  right: 2px;
  top: 18px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  animation-delay: 240ms;
}

.engagement-burst span:nth-child(6) {
  left: 18px;
  bottom: 2px;
  width: 7px;
  height: 7px;
  background: var(--primary);
  animation-delay: 300ms;
}

.engagement-celebration-pop {
  animation: engagement-celebration-pop 560ms ease both;
}

.engagement-celebration-pop::before {
  animation: reward-shine 880ms ease-out;
}

.reward-celebration {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  gap: clamp(8px, 1.4vh, 14px);
  width: 100%;
  min-height: 100%;
  border: 1px solid color-mix(in srgb, var(--primary) 62%, var(--line));
  border-radius: inherit;
  padding: clamp(26px, 4.2vh, 54px) clamp(18px, 6vw, 76px) clamp(22px, 6vh, 72px);
  overflow: hidden;
  text-align: center;
  translate: none;
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--primary) 34%, transparent), transparent 28%),
    radial-gradient(circle at 32% 34%, color-mix(in srgb, var(--amber) 11%, transparent), transparent 32%),
    radial-gradient(circle at 72% 34%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 33%),
    linear-gradient(135deg, rgb(2 6 23 / 0.18), transparent 42%, rgb(2 6 23 / 0.26)),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 78%, transparent), color-mix(in srgb, var(--bg) 91%, transparent)),
    color-mix(in srgb, var(--surface) 93%, #000000);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #ffffff 7%, transparent),
    inset 0 0 96px color-mix(in srgb, var(--primary) 15%, transparent),
    0 20px 64px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(10px) saturate(1.12);
}

.reward-celebration.has-xp-gain {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--primary));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
    inset 0 0 105px color-mix(in srgb, var(--primary) 20%, transparent),
    0 22px 76px color-mix(in srgb, var(--primary) 22%, transparent);
}

.reward-celebration.has-level-up {
  border-color: color-mix(in srgb, var(--amber) 65%, var(--primary));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--amber) 24%, transparent),
    inset 0 0 125px color-mix(in srgb, var(--amber) 14%, transparent),
    0 28px 88px color-mix(in srgb, var(--amber) 18%, transparent),
    0 22px 70px color-mix(in srgb, var(--primary) 18%, transparent);
}

.reward-celebration::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 12%, color-mix(in srgb, #ffffff 28%, transparent) 46%, transparent 72%);
  content: "";
  opacity: 0;
  transform: translateX(-110%);
}

.reward-celebration::after {
  position: absolute;
  inset: -26%;
  z-index: 0;
  background:
    conic-gradient(
      from 0deg,
      transparent,
      color-mix(in srgb, var(--primary) 12%, transparent),
      transparent,
      color-mix(in srgb, var(--amber) 10%, transparent),
      transparent,
      color-mix(in srgb, var(--accent) 10%, transparent),
      transparent
    );
  content: "";
  opacity: 0;
  pointer-events: none;
}

.reward-celebration-pop::before {
  animation: reward-shine 2200ms ease-out;
}

.reward-celebration.level-up-fireworks-active.reward-celebration-pop::before {
  background:
    radial-gradient(circle at 39% 52%, color-mix(in srgb, var(--brand-gold) 34%, transparent), transparent 28%),
    radial-gradient(circle at 53% 32%, color-mix(in srgb, var(--primary) 25%, transparent), transparent 24%),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.1), transparent 34%);
  opacity: 0;
  transform: none;
  animation: reward-level-up-aura-wash 3400ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.reward-celebration-pop::after {
  animation: reward-prize-aura 3300ms ease-out both;
}

.reward-celebration-pop {
  animation: reward-overlay-arrive 980ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.reward-burst-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: clamp(180px, 31vw, 390px);
  height: clamp(180px, 31vw, 390px);
  border: 2px solid color-mix(in srgb, var(--primary) 58%, transparent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72);
  box-shadow:
    0 0 0 12px color-mix(in srgb, var(--primary) 5%, transparent),
    0 0 46px color-mix(in srgb, var(--primary) 20%, transparent);
}

.reward-celebration-pop .reward-burst-ring {
  animation: reward-ring-burst 2300ms ease-out both;
}

.reward-burst-ring::before,
.reward-burst-ring::after {
  position: absolute;
  inset: -14px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: inherit;
  box-shadow:
    0 0 34px color-mix(in srgb, var(--primary) 18%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--accent) 10%, transparent);
  content: "";
  opacity: 0;
  transform: scale(0.86);
}

.reward-burst-ring::after {
  inset: -28px;
  border-color: color-mix(in srgb, var(--amber) 32%, transparent);
}

.reward-celebration-pop .reward-burst-ring::before {
  animation: reward-ring-echo 1450ms ease-out 180ms both;
}

.reward-celebration-pop .reward-burst-ring::after {
  animation: none;
  opacity: 0;
}

.reward-rarity-boosted .reward-burst-ring {
  border-color: color-mix(in srgb, var(--primary) 68%, var(--accent));
  box-shadow:
    0 0 0 12px color-mix(in srgb, var(--primary) 7%, transparent),
    0 0 54px color-mix(in srgb, var(--primary) 24%, transparent);
}

.reward-rarity-premium .reward-burst-ring {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--primary));
  box-shadow:
    0 0 0 14px color-mix(in srgb, var(--accent) 7%, transparent),
    0 0 64px color-mix(in srgb, var(--accent) 28%, transparent),
    0 0 92px color-mix(in srgb, var(--primary) 12%, transparent);
}

.reward-rarity-legendary .reward-burst-ring {
  border-color: color-mix(in srgb, var(--brand-gold) 78%, var(--primary));
  box-shadow:
    0 0 0 16px color-mix(in srgb, var(--brand-gold) 8%, transparent),
    0 0 72px color-mix(in srgb, var(--brand-gold) 28%, transparent),
    0 0 110px color-mix(in srgb, var(--primary) 15%, transparent);
}

.reward-sparkle-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.reward-sparkle-field span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 22px color-mix(in srgb, var(--primary) 72%, transparent);
  opacity: 0;
}

.reward-celebration-pop .reward-sparkle-field span {
  animation:
    reward-sparkle 2250ms ease-out both,
    reward-sparkle-drift 3200ms ease-out both;
}

.reward-quantum-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.reward-quantum-field span {
  --beam-x: 50%;
  --beam-y: 24%;
  --beam-dx: 0px;
  --beam-dy: 0px;
  --beam-rotation: 0deg;
  position: absolute;
  top: var(--beam-y);
  left: var(--beam-x);
  width: clamp(42px, 8vw, 112px);
  height: 2px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 9%, transparent 12%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 78%, #ffffff), #ffffff, color-mix(in srgb, var(--accent) 70%, transparent), transparent);
  box-shadow:
    0 0 10px color-mix(in srgb, var(--primary) 76%, transparent),
    0 0 24px color-mix(in srgb, var(--accent) 40%, transparent);
  opacity: 0;
  transform:
    translate3d(calc(var(--beam-dx) * -1), calc(var(--beam-dy) * -1), 0)
    rotate(var(--beam-rotation))
    scaleX(0.08);
  transform-origin: center;
}

.reward-quantum-field span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 12px color-mix(in srgb, #ffffff 88%, transparent),
    0 0 24px color-mix(in srgb, var(--primary) 70%, transparent);
  content: "";
  opacity: 0.9;
  transform: translate(-50%, -50%);
}

.reward-celebration-pop .reward-quantum-field span {
  animation: reward-quantum-beam 3300ms cubic-bezier(0.18, 0.78, 0.18, 1) both;
}

.reward-quantum-field span:nth-child(1) {
  --beam-x: 16%;
  --beam-y: 18%;
  --beam-dx: 52px;
  --beam-dy: 20px;
  --beam-rotation: 12deg;
}

.reward-quantum-field span:nth-child(2) {
  --beam-x: 30%;
  --beam-y: 12%;
  --beam-dx: 72px;
  --beam-dy: 44px;
  --beam-rotation: 24deg;
  animation-delay: 60ms;
}

.reward-quantum-field span:nth-child(3) {
  --beam-x: 76%;
  --beam-y: 16%;
  --beam-dx: -82px;
  --beam-dy: 38px;
  --beam-rotation: -18deg;
  animation-delay: 100ms;
}

.reward-quantum-field span:nth-child(4) {
  --beam-x: 88%;
  --beam-y: 30%;
  --beam-dx: -118px;
  --beam-dy: 4px;
  --beam-rotation: -4deg;
  animation-delay: 160ms;
}

.reward-quantum-field span:nth-child(5) {
  --beam-x: 18%;
  --beam-y: 42%;
  --beam-dx: 104px;
  --beam-dy: -26px;
  --beam-rotation: -12deg;
  animation-delay: 220ms;
}

.reward-quantum-field span:nth-child(6) {
  --beam-x: 82%;
  --beam-y: 47%;
  --beam-dx: -98px;
  --beam-dy: -28px;
  --beam-rotation: 14deg;
  animation-delay: 280ms;
}

.reward-quantum-field span:nth-child(7) {
  --beam-x: 43%;
  --beam-y: 7%;
  --beam-dx: 20px;
  --beam-dy: 84px;
  --beam-rotation: 74deg;
  animation-delay: 340ms;
}

.reward-quantum-field span:nth-child(8) {
  --beam-x: 58%;
  --beam-y: 8%;
  --beam-dx: -18px;
  --beam-dy: 92px;
  --beam-rotation: 108deg;
  animation-delay: 400ms;
}

.reward-quantum-field span:nth-child(9) {
  --beam-x: 23%;
  --beam-y: 67%;
  --beam-dx: 94px;
  --beam-dy: -72px;
  --beam-rotation: -34deg;
  animation-delay: 480ms;
}

.reward-quantum-field span:nth-child(10) {
  --beam-x: 75%;
  --beam-y: 68%;
  --beam-dx: -92px;
  --beam-dy: -70px;
  --beam-rotation: 30deg;
  animation-delay: 540ms;
}

.reward-quantum-field span:nth-child(11) {
  --beam-x: 10%;
  --beam-y: 76%;
  --beam-dx: 128px;
  --beam-dy: -92px;
  --beam-rotation: -28deg;
  animation-delay: 610ms;
}

.reward-quantum-field span:nth-child(12) {
  --beam-x: 90%;
  --beam-y: 78%;
  --beam-dx: -132px;
  --beam-dy: -94px;
  --beam-rotation: 32deg;
  animation-delay: 680ms;
}

.reward-quantum-field span:nth-child(13) {
  --beam-x: 38%;
  --beam-y: 82%;
  --beam-dx: 34px;
  --beam-dy: -112px;
  --beam-rotation: -76deg;
  animation-delay: 760ms;
}

.reward-quantum-field span:nth-child(14) {
  --beam-x: 62%;
  --beam-y: 84%;
  --beam-dx: -38px;
  --beam-dy: -116px;
  --beam-rotation: 76deg;
  animation-delay: 820ms;
}

.reward-quantum-field span:nth-child(15) {
  --beam-x: 49%;
  --beam-y: 32%;
  --beam-dx: -54px;
  --beam-dy: -18px;
  --beam-rotation: 196deg;
  animation-delay: 900ms;
}

.reward-quantum-field span:nth-child(16) {
  --beam-x: 54%;
  --beam-y: 40%;
  --beam-dx: 58px;
  --beam-dy: -22px;
  --beam-rotation: -14deg;
  animation-delay: 960ms;
}

.reward-quantum-field span:nth-child(17) {
  --beam-x: 36%;
  --beam-y: 53%;
  --beam-dx: 78px;
  --beam-dy: -54px;
  --beam-rotation: -28deg;
  animation-delay: 1020ms;
}

.reward-quantum-field span:nth-child(18) {
  --beam-x: 67%;
  --beam-y: 54%;
  --beam-dx: -82px;
  --beam-dy: -56px;
  --beam-rotation: 28deg;
  animation-delay: 1080ms;
}

.reward-sparkle-field span:nth-child(1) {
  left: 9%;
  top: 28%;
}

.reward-sparkle-field span:nth-child(2) {
  left: 18%;
  top: 67%;
  background: var(--accent);
  animation-delay: 70ms;
}

.reward-sparkle-field span:nth-child(3) {
  left: 38%;
  top: 16%;
  animation-delay: 140ms;
}

.reward-sparkle-field span:nth-child(4) {
  left: 52%;
  top: 78%;
  background: var(--amber);
  animation-delay: 190ms;
}

.reward-sparkle-field span:nth-child(5) {
  right: 25%;
  top: 30%;
  background: var(--accent);
  animation-delay: 230ms;
}

.reward-sparkle-field span:nth-child(6) {
  right: 13%;
  top: 62%;
  animation-delay: 280ms;
}

.reward-sparkle-field span:nth-child(7) {
  right: 7%;
  top: 22%;
  background: var(--amber);
  animation-delay: 340ms;
}

.reward-sparkle-field span:nth-child(8) {
  left: 70%;
  bottom: 14%;
  animation-delay: 390ms;
}

.reward-sparkle-field span:nth-child(9) {
  left: 5%;
  bottom: 18%;
  background: var(--amber);
  animation-delay: 110ms;
}

.reward-sparkle-field span:nth-child(10) {
  left: 30%;
  bottom: 24%;
  animation-delay: 260ms;
}

.reward-sparkle-field span:nth-child(11) {
  left: 46%;
  top: 54%;
  background: var(--accent);
  animation-delay: 330ms;
}

.reward-sparkle-field span:nth-child(12) {
  right: 31%;
  bottom: 25%;
  background: var(--primary);
  animation-delay: 420ms;
}

.reward-sparkle-field span:nth-child(13) {
  right: 18%;
  top: 12%;
  background: var(--amber);
  animation-delay: 500ms;
}

.reward-sparkle-field span:nth-child(14) {
  right: 4%;
  bottom: 20%;
  animation-delay: 560ms;
}

.reward-sparkle-field span:nth-child(15) {
  left: 58%;
  top: 11%;
  background: var(--accent);
  animation-delay: 610ms;
}

.reward-sparkle-field span:nth-child(16) {
  left: 78%;
  top: 72%;
  background: var(--amber);
  animation-delay: 680ms;
}

.reward-celebration > .celebration-copy,
.reward-celebration > .celebration-stats {
  position: relative;
  z-index: 1;
}

.reward-celebration > .reward-burst-ring {
  z-index: 0;
}

.reward-celebration-pop .celebration-burst {
  animation: reward-medallion-drop 980ms cubic-bezier(0.18, 0.9, 0.2, 1.08) both;
}

.reward-celebration-pop .celebration-copy {
  animation: reward-copy-rise 1160ms cubic-bezier(0.16, 0.95, 0.2, 1) 80ms both;
}

.celebration-burst {
  position: absolute;
  top: clamp(22px, 3.6vh, 40px);
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(54px, 6vw, 76px);
  height: clamp(54px, 6vw, 76px);
  border: 1px solid color-mix(in srgb, var(--amber) 38%, var(--primary));
  border-radius: 18px;
  opacity: 0.98;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 20%, rgb(255 255 255 / 0.36), transparent 35%),
    radial-gradient(circle at 70% 76%, color-mix(in srgb, var(--amber) 22%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 42%, var(--surface-2)), color-mix(in srgb, var(--accent) 20%, var(--surface-2)));
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--primary) 8%, transparent),
    0 0 34px color-mix(in srgb, var(--primary) 28%, transparent),
    0 15px 36px color-mix(in srgb, var(--accent) 15%, transparent);
  transform: translateX(-50%);
}

.celebration-burst::before {
  width: clamp(24px, 3vw, 34px);
  height: clamp(24px, 3vw, 34px);
  border: 3px solid var(--primary);
  border-top-color: var(--accent);
  border-right-color: var(--amber);
  border-radius: 50%;
  content: "";
}

.reward-celebration-pop .celebration-burst::before {
  animation: reward-core-spin 1680ms ease-out both;
}

.celebration-burst span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  animation: celebration-dot 760ms ease-out both;
}

.celebration-burst span:nth-child(1) {
  top: 6px;
  left: 16px;
}

.celebration-burst span:nth-child(2) {
  top: 19px;
  right: 6px;
  background: var(--primary);
  animation-delay: 80ms;
}

.celebration-burst span:nth-child(3) {
  bottom: 7px;
  left: 19px;
  background: var(--amber);
  animation-delay: 130ms;
}

.celebration-burst span:nth-child(4) {
  top: 20px;
  left: 6px;
  animation-delay: 180ms;
}

.celebration-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(760px, 100%);
  margin-top: clamp(56px, 8.2vh, 78px);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--amber));
  border-radius: clamp(18px, 2.2vw, 26px);
  padding: clamp(14px, 2.1vh, 22px) clamp(18px, 4vw, 42px) clamp(16px, 2.3vh, 24px);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--amber) 9%, transparent) 18%, transparent 34%),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 45%),
    linear-gradient(135deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.022)),
    rgb(2 6 23 / 0.22);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    inset 0 -1px 0 color-mix(in srgb, var(--amber) 12%, transparent),
    0 16px 46px rgb(0 0 0 / 0.18),
    0 0 38px color-mix(in srgb, var(--primary) 12%, transparent);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.celebration-copy::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(105deg, transparent 18%, rgb(255 255 255 / 0.18) 46%, transparent 70%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-120%);
}

.celebration-copy::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(58%, 360px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 30%, transparent);
  border-radius: 999px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--primary) 14%, transparent), transparent 58%),
    conic-gradient(from 28deg, transparent, color-mix(in srgb, var(--brand-gold) 28%, transparent), transparent 22%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 54%);
  box-shadow:
    0 0 36px color-mix(in srgb, var(--primary) 12%, transparent),
    inset 0 0 42px color-mix(in srgb, var(--brand-gold) 8%, transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72);
}

.reward-celebration-pop .celebration-copy::before {
  animation: reward-card-sheen 1780ms ease-out 160ms both;
}

.reward-payout-building .celebration-copy::after {
  animation: reward-payout-halo-build 520ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.reward-celebration.level-up-fireworks-active.reward-celebration-pop .celebration-copy::before {
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--brand-gold) 30%, transparent), transparent 38%),
    radial-gradient(circle at 50% 30%, color-mix(in srgb, #ffffff 14%, transparent), transparent 28%);
  opacity: 0;
  transform: none;
  animation: reward-level-up-card-bloom 1250ms cubic-bezier(0.16, 0.86, 0.24, 1) 120ms both;
}

.celebration-copy > * {
  position: relative;
  z-index: 1;
}

.celebration-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  border-radius: 999px;
  padding: 4px 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--amber) 10%, transparent));
  box-shadow: 0 0 24px color-mix(in srgb, var(--primary) 16%, transparent);
  color: color-mix(in srgb, var(--primary) 78%, #ffffff);
  font-size: 0.68rem;
}

.celebration-copy strong {
  display: block;
  margin: 7px 0 6px;
  color: transparent;
  background:
    linear-gradient(180deg, #fef9c3 0%, #86efac 22%, var(--primary) 48%, #22d3ee 88%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(2.9rem, 6.8vw, 5.45rem);
  line-height: 0.9;
  text-shadow:
    0 0 24px color-mix(in srgb, var(--primary) 44%, transparent),
    0 6px 24px rgb(0 0 0 / 0.28);
}

.celebration-copy > #rewardCelebrationAmount {
  margin: 8px 0 7px;
  font-size: clamp(3.65rem, 8.4vw, 6.65rem);
  letter-spacing: -0.055em;
  line-height: 0.92;
  text-shadow:
    0 0 18px color-mix(in srgb, var(--primary) 52%, transparent),
    0 0 46px color-mix(in srgb, var(--accent) 20%, transparent),
    0 10px 28px rgb(0 0 0 / 0.34);
}

.reward-number-pop {
  animation:
    reward-number-pop 1280ms ease-out both,
    reward-number-shimmer 1900ms ease-out both;
}

.level-up-ribbon {
  display: inline-flex;
  justify-self: center;
  width: fit-content;
  margin: 8px auto 4px;
  border: 1px solid color-mix(in srgb, var(--amber) 72%, var(--line));
  border-radius: 999px;
  padding: 6px 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--amber) 25%, var(--surface)), color-mix(in srgb, var(--primary) 14%, var(--surface))),
    var(--surface);
  color: var(--amber);
  font-size: 0.86rem;
  font-weight: 1000;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.reward-celebration.has-level-up .level-up-ribbon {
  animation: level-up-ribbon-pop 1450ms ease-out both;
}

.reward-level-up-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  width: min(280px, 100%);
  margin: 10px auto 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 62%, var(--primary));
  border-radius: 14px;
  padding: 12px 14px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand-gold) 24%, transparent), transparent 52%),
    linear-gradient(145deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04)),
    color-mix(in srgb, var(--surface) 78%, #03070d);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    0 0 28px color-mix(in srgb, var(--brand-gold) 30%, transparent),
    0 0 52px color-mix(in srgb, var(--primary) 18%, transparent);
}

.reward-level-up-card::before {
  content: "";
  position: absolute;
  inset: -40% -70%;
  background:
    linear-gradient(115deg, transparent 18%, rgb(255 255 255 / 0.16) 46%, transparent 70%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--brand-gold) 18%, transparent), transparent 52%);
  animation: reward-level-card-scan 6.8s ease-in-out infinite;
}

.reward-level-up-card::after {
  position: absolute;
  inset: -18px;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 44%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--brand-gold) 24%, transparent), transparent 56%),
    conic-gradient(from 45deg, transparent, color-mix(in srgb, var(--brand-gold) 34%, transparent), transparent 18%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 42%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(0.84);
}

.reward-level-up-card > * {
  position: relative;
  z-index: 1;
}

.reward-level-up-card strong {
  color: #fff7d1;
  font-size: clamp(1.7rem, 5vw, 2.75rem);
  line-height: 0.95;
  text-shadow:
    0 0 20px color-mix(in srgb, var(--brand-gold) 56%, transparent),
    0 5px 18px rgb(0 0 0 / 0.42);
}

.reward-level-up-card small {
  color: var(--brand-gold);
  font-size: 0.94rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.reward-celebration.has-level-up .reward-level-up-card {
  animation: reward-level-up-card-pop 1480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reward-celebration.has-level-up .reward-level-up-card::after {
  animation: reward-level-up-card-bloom 3200ms cubic-bezier(0.16, 0.86, 0.24, 1) 200ms both;
}

.reward-celebration.has-level-up .reward-level-up-card strong {
  animation: reward-level-up-number-glow 3400ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.reward-staged-sequence .level-up-ribbon,
.reward-staged-sequence .reward-level-up-card,
.reward-staged-sequence #rewardCelebrationAmount,
.reward-staged-sequence .reward-verification-row,
.reward-staged-sequence .reward-balance-route,
.reward-staged-sequence .reward-next-goal,
.reward-staged-sequence .celebration-copy p,
.reward-staged-sequence .celebration-stats > div,
.reward-staged-sequence .reward-rarity-badge,
.reward-staged-sequence .reward-progression-panel,
.reward-staged-sequence .reward-unlock-reveal,
.reward-staged-sequence .reward-daily-strip {
  opacity: 0;
}

.reward-staged-sequence .reward-rarity-badge {
  animation: reward-stage-reveal 620ms cubic-bezier(0.16, 0.86, 0.24, 1) 80ms both;
}

.reward-staged-sequence .reward-verification-row {
  animation: reward-stage-reveal 660ms cubic-bezier(0.16, 0.86, 0.24, 1) 130ms both;
}

.reward-staged-sequence .level-up-ribbon {
  animation: reward-stage-reveal 680ms cubic-bezier(0.16, 0.86, 0.24, 1) 920ms both;
}

.reward-staged-sequence .reward-level-up-card {
  animation:
    reward-level-up-card-pop 1260ms cubic-bezier(0.16, 1, 0.3, 1) 1050ms both,
    reward-stage-reveal 720ms cubic-bezier(0.16, 0.86, 0.24, 1) 1050ms both;
}

.reward-staged-sequence .reward-level-up-card .eyebrow,
.reward-staged-sequence .reward-level-up-card strong,
.reward-staged-sequence .reward-level-up-card small {
  opacity: 0;
  animation: reward-stage-reveal 520ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.reward-staged-sequence .reward-level-up-card small {
  animation-delay: 1420ms;
}

.reward-staged-sequence .reward-level-up-card .eyebrow {
  animation-delay: 1120ms;
}

.reward-staged-sequence .reward-level-up-card strong {
  animation:
    reward-stage-reveal 680ms cubic-bezier(0.16, 0.86, 0.24, 1) 1280ms both,
    reward-level-up-number-glow 2400ms cubic-bezier(0.16, 0.86, 0.24, 1) 1280ms both;
}

.reward-celebration.reward-staged-sequence .reward-level-up-card strong {
  animation:
    reward-stage-reveal 680ms cubic-bezier(0.16, 0.86, 0.24, 1) 1280ms both,
    reward-level-up-number-glow 2400ms cubic-bezier(0.16, 0.86, 0.24, 1) 1280ms both;
}

.reward-staged-sequence #rewardCelebrationAmount {
  animation:
    reward-stage-reveal 820ms cubic-bezier(0.16, 0.86, 0.24, 1) 520ms both,
    reward-number-pop 1250ms ease-out 520ms both,
    reward-number-shimmer 1900ms ease-out 520ms both;
}

.reward-staged-sequence .reward-balance-route {
  animation:
    reward-stage-reveal 760ms cubic-bezier(0.16, 0.86, 0.24, 1) 820ms both,
    reward-number-pop 1120ms ease-out 820ms both;
}

.reward-staged-sequence .celebration-copy p {
  animation: reward-stage-reveal 720ms cubic-bezier(0.16, 0.86, 0.24, 1) 1040ms both;
}

.reward-staged-sequence .reward-next-goal {
  animation: reward-stage-reveal 700ms cubic-bezier(0.16, 0.86, 0.24, 1) 1160ms both;
}

.reward-staged-sequence .celebration-stats > div {
  animation: reward-stat-pop 960ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.reward-staged-sequence .celebration-stats > div:nth-child(1) {
  animation-delay: 1600ms;
}

.reward-staged-sequence .celebration-stats > div:nth-child(2) {
  animation-delay: 1710ms;
}

.reward-staged-sequence .celebration-stats > div:nth-child(3) {
  animation-delay: 1820ms;
}

.reward-staged-sequence .celebration-stats > div:nth-child(4) {
  animation-delay: 1930ms;
}

.reward-staged-sequence .reward-progression-panel {
  animation: reward-stage-reveal 720ms cubic-bezier(0.16, 0.86, 0.24, 1) 2180ms both;
}

.reward-staged-sequence .reward-unlock-reveal {
  animation: reward-stage-reveal 640ms cubic-bezier(0.16, 0.86, 0.24, 1) 2320ms both;
}

.reward-staged-sequence .reward-unlock-reveal:nth-child(2) {
  animation-delay: 2420ms;
}

.reward-staged-sequence .reward-unlock-reveal:nth-child(3) {
  animation-delay: 2520ms;
}

.reward-staged-sequence .reward-daily-strip {
  animation: reward-stage-reveal 720ms cubic-bezier(0.16, 0.86, 0.24, 1) 2680ms both;
}

.reward-celebration.is-milestone-level-up .reward-level-up-card {
  border-color: color-mix(in srgb, var(--brand-gold) 78%, var(--primary));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.1),
    0 0 36px color-mix(in srgb, var(--brand-gold) 38%, transparent),
    0 0 74px color-mix(in srgb, var(--primary) 20%, transparent);
}

.reward-celebration.is-legendary-level-up .reward-level-up-card {
  border-color: color-mix(in srgb, #fff4a8 82%, var(--brand-gold));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.13),
    0 0 46px rgb(255 231 112 / 0.42),
    0 0 92px rgb(36 255 190 / 0.24);
}

.reward-level-number.is-counting {
  animation: reward-level-number-flip 380ms cubic-bezier(0.16, 0.86, 0.24, 1) infinite;
}

.reward-level-number.is-settled {
  animation: reward-level-up-number-glow 1500ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.mini-progress-track.is-xp-overflowing {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--brand-gold) 22%, transparent),
    0 0 18px color-mix(in srgb, var(--primary) 18%, transparent),
    0 0 34px color-mix(in srgb, var(--brand-gold) 12%, transparent);
}

.mini-progress-track.is-xp-resetting span {
  transition: none !important;
}

.celebration-copy p {
  width: min(650px, 100%);
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 84%, var(--muted));
  font-size: clamp(0.9rem, 1.45vw, 1.04rem);
  font-weight: 800;
  line-height: 1.42;
}

.celebration-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(7px, 1vw, 10px);
  width: min(720px, 100%);
  margin-top: clamp(6px, 1.1vh, 10px);
}

.celebration-stats > div {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "icon label"
    "icon value"
    "progress progress";
  align-items: center;
  gap: 1px 10px;
  min-height: 68px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 15px;
  padding: 10px 12px;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 38%),
    radial-gradient(circle at 98% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 40%),
    linear-gradient(145deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.018)),
    color-mix(in srgb, var(--surface-2) 78%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    inset 0 -1px 0 color-mix(in srgb, var(--primary) 10%, transparent),
    0 12px 24px rgb(0 0 0 / 0.14),
    0 0 24px color-mix(in srgb, var(--primary) 7%, transparent);
  backdrop-filter: blur(8px);
}

.celebration-stats > div::before {
  grid-area: icon;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, transparent);
  border-radius: 12px;
  background:
    radial-gradient(circle at 28% 18%, rgb(255 255 255 / 0.32), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 58%, var(--surface-2)), color-mix(in srgb, var(--accent) 32%, var(--surface-2)));
  color: #ecfeff;
  font-size: 0.72rem;
  font-weight: 1000;
  letter-spacing: 0.035em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    0 0 18px color-mix(in srgb, var(--primary) 18%, transparent);
  content: "$";
}

.celebration-stats > div:nth-child(2)::before {
  border-color: color-mix(in srgb, var(--amber) 42%, transparent);
  background:
    radial-gradient(circle at 28% 18%, rgb(255 255 255 / 0.32), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--amber) 48%, var(--surface-2)), color-mix(in srgb, var(--primary) 44%, var(--surface-2)));
  content: "XP";
}

.celebration-stats > div:nth-child(3)::before {
  background:
    radial-gradient(circle at 28% 18%, rgb(255 255 255 / 0.32), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 52%, var(--surface-2)), color-mix(in srgb, var(--primary) 40%, var(--surface-2)));
  content: "LV";
}

.celebration-stats > div::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(110deg, transparent 8%, rgb(255 255 255 / 0.09) 42%, transparent 65%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-120%);
}

.celebration-stats > div::before,
.celebration-stats > div > * {
  position: relative;
  z-index: 1;
}

.reward-celebration-pop .celebration-stats > div::after {
  animation: reward-card-sheen 1050ms ease-out both;
}

.reward-celebration-pop .celebration-stats > div {
  animation: reward-stat-pop 820ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.reward-celebration-pop .celebration-stats > div:nth-child(1) {
  animation-delay: 120ms;
}

.reward-celebration-pop .celebration-stats > div:nth-child(2) {
  animation-delay: 220ms;
}

.reward-celebration-pop .celebration-stats > div:nth-child(3) {
  animation-delay: 320ms;
}

.celebration-stats > div > span {
  grid-area: label;
  display: block;
  overflow: hidden;
  color: color-mix(in srgb, var(--muted) 88%, var(--ink));
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.celebration-stats > div > strong {
  grid-area: value;
  display: block;
  min-width: 0;
  margin-top: 1px;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(1.06rem, 1.65vw, 1.42rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-progress-track {
  grid-area: progress;
  width: 100%;
  height: 7px;
  margin-top: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.04), transparent),
    color-mix(in srgb, var(--surface) 66%, transparent);
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 0.2),
    0 0 14px color-mix(in srgb, var(--accent) 9%, transparent);
}

.reward-progress-track span {
  background:
    radial-gradient(circle at 100% 50%, rgb(255 255 255 / 0.6), transparent 0.52rem),
    linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 42%, var(--accent)), var(--accent));
}

.reward-progression-panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) minmax(0, 1.85fr);
  gap: clamp(8px, 1vw, 12px);
  width: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 18px;
  padding: 10px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 34%),
    linear-gradient(135deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.018)),
    rgb(15 23 42 / 0.42);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.07),
    0 12px 30px rgb(0 0 0 / 0.12);
}

.reward-progression-panel::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 8%, rgb(255 255 255 / 0.09) 44%, transparent 68%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-115%);
}

.reward-celebration-pop .reward-progression-panel::before {
  animation: reward-progression-scan 1500ms ease-out 1350ms both;
}

.reward-progression-chip,
.reward-unlock-reveal {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 14px;
  padding: 9px 10px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 36%),
    rgb(2 6 23 / 0.28);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.055);
  text-align: left;
}

.reward-progression-chip span,
.reward-unlock-reveal span {
  display: block;
  overflow: hidden;
  color: color-mix(in srgb, var(--primary) 76%, #ffffff);
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.07em;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.reward-progression-chip strong,
.reward-unlock-reveal strong {
  display: block;
  min-width: 0;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-unlock-reveals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.reward-unlock-reveal {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

.reward-unlock-reveal small {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: color-mix(in srgb, var(--muted) 88%, var(--ink));
  font-size: 0.66rem;
  font-weight: 750;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.reward-unlock-reveal.reward-unlock-rare,
.reward-unlock-reveal.reward-unlock-epic,
.reward-unlock-reveal.reward-unlock-mythic {
  border-color: color-mix(in srgb, var(--brand-gold) 30%, var(--primary));
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--brand-gold) 13%, transparent), transparent 36%),
    rgb(2 6 23 / 0.3);
}

.reward-unlock-reveal.reward-unlock-legendary {
  border-color: color-mix(in srgb, var(--brand-gold) 46%, var(--primary));
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--brand-gold) 18%, transparent), transparent 36%),
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 38%),
    rgb(2 6 23 / 0.34);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 0 24px color-mix(in srgb, var(--brand-gold) 10%, transparent);
}

.reward-unlock-reveal.is-placeholder {
  grid-column: 1 / -1;
  opacity: 0.82;
}

.metric-count-pop {
  animation: metric-count-pop 620ms ease both;
}

@keyframes progress-sheen-drift {
  0% {
    transform: translateX(-120%);
  }

  52%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes progress-particle-drift {
  0% {
    background-position: 0 50%, 16px 50%;
  }

  100% {
    background-position: 86px 50%, 120px 50%;
  }
}

@keyframes progress-dense-particle-drift {
  0% {
    background-position: -34px 46%, -20px 62%, -6px 38%, 8px 70%, -18px 28%, -2px 82%, -28px 18%, 20px 54%, -12px 12%, 32px 88%, 42px 46%, 16px 24%, 54px 76%, -40px 34%, 62px 20%, 78px 68%, 92px 42%, 58px 90%, 102px 16%, 118px 60%, 84px 78%, 128px 30%;
  }

  100% {
    background-position: 178px 46%, 192px 62%, 206px 38%, 220px 70%, 194px 28%, 210px 82%, 184px 18%, 232px 54%, 200px 12%, 244px 88%, 254px 46%, 228px 24%, 266px 76%, 172px 34%, 274px 20%, 290px 68%, 304px 42%, 270px 90%, 314px 16%, 330px 60%, 296px 78%, 340px 30%;
  }
}

@keyframes progress-smooth-particle-flow {
  0% {
    transform: translate3d(-62%, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes progress-tip-impact-sparks {
  0%,
  100% {
    opacity: var(--meter-particle-opacity-low);
    transform: translateZ(0) scale(0.92);
  }

  42% {
    opacity: var(--meter-particle-opacity-high);
    transform: translateZ(0) scale(1.08);
  }
}

@keyframes progress-quantum-streams {
  0% {
    background-position: 0 44%, 14px 72%, 28px 24%, 8px 58%;
  }

  56% {
    background-position: 46px 22%, 74px 86%, 96px 36%, 62px 74%;
  }

  100% {
    background-position: 128px 62%, 176px 28%, 232px 82%, 158px 34%;
  }
}

@keyframes progress-fill-energy {
  0% {
    transform: translateZ(0) scaleY(0.985);
  }

  50% {
    transform: translateZ(0) scaleY(1.018);
  }

  100% {
    transform: translateZ(0) scaleY(0.985);
  }
}

@keyframes viewer-progress-head-breathe {
  0%,
  100% {
    opacity: 0.42;
    transform: translateZ(0) scale(0.86);
  }

  50% {
    opacity: 0.82;
    transform: translateZ(0) scale(1.08);
  }
}

@keyframes viewer-progress-spark-drift {
  0% {
    opacity: 0.42;
    transform: translate3d(-14px, 0, 0);
  }

  46% {
    opacity: 0.9;
  }

  100% {
    opacity: 0.56;
    transform: translate3d(16px, 0, 0);
  }
}

@keyframes progress-quantum-flicker {
  0%,
  100% {
    opacity: var(--meter-particle-opacity-mid);
  }

  35% {
    opacity: var(--meter-particle-opacity-high);
  }

  70% {
    opacity: var(--meter-particle-opacity-low);
  }
}

@keyframes meter-frame-breathe {
  0%,
  100% {
    transform: translateZ(0) scaleY(1);
  }

  50% {
    transform: translateZ(0) scaleY(1.025);
  }
}

@keyframes meter-energy-aura {
  0%,
  100% {
    opacity: 0.72;
    transform: scaleX(0.985) scaleY(1);
    filter: saturate(1.05) blur(0);
  }

  38% {
    opacity: 1;
    transform: scaleX(1.012) scaleY(1.35);
    filter: saturate(1.35) blur(0.4px);
  }

  68% {
    opacity: 0.82;
    transform: scaleX(1.004) scaleY(1.12);
    filter: saturate(1.18) blur(0.15px);
  }
}

@keyframes meter-completion-burst {
  0% {
    opacity: 0;
    filter: blur(1px) saturate(1.08) brightness(1);
    transform: translateY(-50%) scale(0.32);
  }

  12% {
    opacity: 1;
    filter: blur(0) saturate(1.85) brightness(1.35);
    transform: translateY(-50%) scale(1.55);
    box-shadow:
      0 0 28px 12px rgb(45 212 191 / 0.64),
      0 0 52px 24px rgb(56 189 248 / 0.32),
      0 0 72px 32px rgb(250 204 21 / 0.16),
      -16px -18px 0 -1px rgb(250 204 21 / 0.98),
      -23px 16px 0 -1px rgb(34 211 238 / 0.96),
      -35px -5px 0 -1px rgb(255 255 255 / 0.98),
      15px -26px 0 -1px rgb(250 204 21 / 0.88),
      19px 25px 0 -1px rgb(45 212 191 / 0.86),
      36px -13px 0 -1px rgb(56 189 248 / 0.82),
      43px 20px 0 -1px rgb(255 255 255 / 0.76),
      -8px -38px 0 -2px rgb(255 255 255 / 0.72),
      -11px 40px 0 -2px rgb(250 204 21 / 0.7),
      -46px -22px 0 -3px rgb(45 212 191 / 0.54),
      52px 2px 0 -3px rgb(34 211 238 / 0.52);
  }

  38% {
    opacity: 0.9;
    filter: blur(0.1px) saturate(1.66) brightness(1.18);
    transform: translateY(-50%) scale(1.72);
    box-shadow:
      0 0 18px 6px rgb(45 212 191 / 0.42),
      0 0 42px 16px rgb(56 189 248 / 0.22),
      -34px -37px 0 -2px rgb(250 204 21 / 0.82),
      -45px 34px 0 -2px rgb(34 211 238 / 0.78),
      -72px -9px 0 -2px rgb(255 255 255 / 0.76),
      30px -50px 0 -2px rgb(250 204 21 / 0.7),
      36px 48px 0 -2px rgb(45 212 191 / 0.68),
      70px -27px 0 -2px rgb(56 189 248 / 0.64),
      84px 38px 0 -2px rgb(255 255 255 / 0.6),
      -16px -70px 0 -3px rgb(255 255 255 / 0.56),
      -22px 74px 0 -3px rgb(250 204 21 / 0.54),
      -90px -42px 0 -3px rgb(45 212 191 / 0.5),
      102px 5px 0 -3px rgb(34 211 238 / 0.48);
  }

  68% {
    opacity: 0.42;
    filter: blur(0.9px) saturate(1.24) brightness(1.04);
    transform: translateY(-50%) scale(1.18);
    box-shadow:
      0 0 8px 3px rgb(45 212 191 / 0.18),
      -48px -54px 0 -4px rgb(250 204 21 / 0.44),
      -65px 52px 0 -4px rgb(34 211 238 / 0.4),
      -104px -12px 0 -4px rgb(255 255 255 / 0.38),
      43px -72px 0 -4px rgb(250 204 21 / 0.36),
      52px 70px 0 -4px rgb(45 212 191 / 0.34),
      102px -40px 0 -4px rgb(56 189 248 / 0.32),
      124px 56px 0 -4px rgb(255 255 255 / 0.28),
      -27px -102px 0 -5px rgb(255 255 255 / 0.26),
      -33px 108px 0 -5px rgb(250 204 21 / 0.24),
      -132px -58px 0 -5px rgb(45 212 191 / 0.22),
      144px 9px 0 -5px rgb(34 211 238 / 0.22);
  }

  100% {
    opacity: 0;
    filter: blur(2.6px) saturate(1.05);
    transform: translateY(-50%) scale(0.98);
    box-shadow:
      0 0 0 0 rgb(45 212 191 / 0),
      -56px -64px 0 -6px rgb(250 204 21 / 0),
      -74px 64px 0 -6px rgb(34 211 238 / 0),
      -120px -14px 0 -6px rgb(255 255 255 / 0),
      52px -84px 0 -6px rgb(250 204 21 / 0),
      60px 82px 0 -6px rgb(45 212 191 / 0),
      118px -48px 0 -6px rgb(56 189 248 / 0),
      140px 64px 0 -6px rgb(255 255 255 / 0),
      -34px -120px 0 -7px rgb(255 255 255 / 0),
      -42px 126px 0 -7px rgb(250 204 21 / 0),
      -152px -70px 0 -7px rgb(45 212 191 / 0),
      166px 12px 0 -7px rgb(34 211 238 / 0);
  }
}

@keyframes meter-completion-label {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.94);
    filter: blur(4px);
  }

  18%,
  64% {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px) scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-18px) scale(0.98);
    filter: blur(3px);
  }
}

@keyframes claim-ready-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.16) inset,
      0 0 18px color-mix(in srgb, var(--accent) 28%, transparent);
  }

  50% {
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.24) inset,
      0 0 28px color-mix(in srgb, var(--accent) 44%, transparent),
      0 0 42px color-mix(in srgb, var(--primary) 18%, transparent);
  }
}

@keyframes captcha-reveal-pop {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
    box-shadow: 0 0 0 rgb(250 204 21 / 0);
  }

  58% {
    opacity: 1;
    transform: translateY(0) scale(1.012);
    box-shadow: 0 0 24px rgb(250 204 21 / 0.2);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes engagement-celebration-pop {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes engagement-xp-jump {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.72);
    filter: blur(2px) brightness(1);
  }

  12% {
    opacity: 1;
    transform: translateY(-12px) scale(1.2);
    filter: blur(0) brightness(1.42);
  }

  28% {
    opacity: 1;
    transform: translateY(-22px) scale(1.04);
    filter: blur(0) brightness(1.16);
  }

  74% {
    opacity: 1;
    transform: translateY(-26px) scale(1);
    filter: blur(0) brightness(1.04);
  }

  100% {
    opacity: 0;
    transform: translateY(-48px) scale(0.96);
    filter: blur(1px) brightness(1);
  }
}

@keyframes engagement-core-pop {
  0% {
    transform: scale(0.88);
    filter: brightness(1);
  }

  42% {
    transform: scale(1.14);
    filter: brightness(1.35);
  }

  100% {
    transform: scale(1);
    filter: brightness(1.06);
  }
}

@keyframes engagement-quantum-spark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45) rotate(0deg);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.95) rotate(38deg);
  }
}

@keyframes engagement-quantum-spark-alt {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  }

  20% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.2) rotate(-46deg);
  }
}

@keyframes engagement-dot {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.55);
  }

  55% {
    opacity: 1;
    transform: translate(4px, -7px) scale(1.22);
  }

  100% {
    opacity: 0.82;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes reward-shine {
  0% {
    opacity: 0;
    transform: translateX(-110%);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(110%);
  }
}

@keyframes advertiser-overlay-glow {
  0% {
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes reward-overlay-arrive {
  0% {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.982);
  }

  64% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scale(1.006);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes viewer-panel-sheen {
  0% {
    opacity: 0;
    transform: translateX(-115%);
  }

  28% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    transform: translateX(115%);
  }
}

@keyframes reward-card-glow-pop {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent);
  }

  38% {
    transform: scale(1.018);
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--primary) 16%, transparent),
      0 0 30px color-mix(in srgb, var(--primary) 24%, transparent);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent);
  }
}

@keyframes reward-medallion-drop {
  0% {
    opacity: 0;
    transform: translateY(-16px) scale(0.82) rotate(-8deg);
  }

  54% {
    opacity: 1;
    transform: translateY(2px) scale(1.08) rotate(2deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes reward-copy-rise {
  0% {
    opacity: 0;
    transform: translateY(min(18vh, 180px)) scale(0.985);
    filter: blur(2px);
  }

  58% {
    opacity: 1;
    transform: translateY(-8px) scale(1.012);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes reward-card-sheen {
  0% {
    opacity: 0;
    transform: translateX(-110%);
  }

  30% {
    opacity: 0.86;
  }

  100% {
    opacity: 0;
    transform: translateX(112%);
  }
}

@keyframes reward-ring-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }

  32% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.54);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.65);
  }
}

@keyframes reward-ring-echo {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }

  18% {
    opacity: 0.62;
    transform: scale(1.04);
  }

  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}

@keyframes reward-orbital-ring-spin {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

@keyframes reward-xp-converge {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  18% {
    opacity: 1;
  }

  72% {
    opacity: 0.84;
  }

  100% {
    top: 49%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.22);
  }
}

@keyframes reward-rarity-breathe {
  0%,
  100% {
    filter: saturate(1);
    transform: translateZ(0);
  }

  50% {
    filter: saturate(1.16);
    transform: translateZ(0) scale(1.015);
  }
}

@keyframes reward-progression-scan {
  0% {
    opacity: 0;
    transform: translateX(-115%);
  }

  36% {
    opacity: 0.74;
  }

  100% {
    opacity: 0;
    transform: translateX(115%);
  }
}

@keyframes reward-prize-aura {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.96);
  }

  26% {
    opacity: 0.82;
    transform: rotate(18deg) scale(1.02);
  }

  100% {
    opacity: 0;
    transform: rotate(44deg) scale(1.08);
  }
}

@keyframes reward-core-spin {
  0% {
    transform: rotate(0deg) scale(0.92);
  }

  42% {
    transform: rotate(220deg) scale(1.14);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes reward-title-ignite {
  0% {
    opacity: 0;
    text-shadow: 0 0 0 transparent;
    transform: translateY(8px) scale(0.985);
  }

  34% {
    opacity: 1;
    text-shadow:
      0 0 24px color-mix(in srgb, var(--primary) 30%, transparent),
      0 0 48px color-mix(in srgb, var(--accent) 16%, transparent);
    transform: translateY(-1px) scale(1.012);
  }

  100% {
    opacity: 1;
    text-shadow: 0 0 16px color-mix(in srgb, var(--primary) 14%, transparent);
    transform: translateY(0) scale(1);
  }
}

@keyframes reward-badge-spark {
  0% {
    opacity: 0;
    filter: brightness(0.95);
    transform: translateY(5px) scale(0.95);
  }

  36% {
    opacity: 1;
    filter: brightness(1.5);
    transform: translateY(-1px) scale(1.08);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
    transform: translateY(0) scale(1);
  }
}

@keyframes reward-sparkle {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.4);
  }

  42% {
    opacity: 0.95;
    transform: translateY(-8px) scale(1.15);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.72);
  }
}

@keyframes reward-sparkle-drift {
  0% {
    filter: blur(0);
  }

  45% {
    filter: blur(0);
  }

  100% {
    filter: blur(0.5px);
  }
}

@keyframes reward-quantum-beam {
  0% {
    opacity: 0;
    filter: blur(2px) brightness(0.85);
    transform:
      translate3d(calc(var(--beam-dx) * -1), calc(var(--beam-dy) * -1), 0)
      rotate(var(--beam-rotation))
      scaleX(0.05)
      scaleY(0.7);
  }

  14% {
    opacity: 0.95;
    filter: blur(0) brightness(1.35);
    transform:
      translate3d(calc(var(--beam-dx) * -0.46), calc(var(--beam-dy) * -0.46), 0)
      rotate(var(--beam-rotation))
      scaleX(1.08)
      scaleY(1);
  }

  34% {
    opacity: 0.34;
    filter: blur(0.4px) brightness(1.18);
    transform:
      translate3d(calc(var(--beam-dx) * -0.16), calc(var(--beam-dy) * -0.16), 0)
      rotate(var(--beam-rotation))
      scaleX(0.28)
      scaleY(0.85);
  }

  46% {
    opacity: 0;
    filter: blur(1.5px) brightness(0.95);
    transform:
      translate3d(0, 0, 0)
      rotate(var(--beam-rotation))
      scaleX(0.02)
      scaleY(0.7);
  }

  60% {
    opacity: 0.82;
    filter: blur(0) brightness(1.28);
    transform:
      translate3d(calc(var(--beam-dx) * 0.22), calc(var(--beam-dy) * 0.22), 0)
      rotate(var(--beam-rotation))
      scaleX(0.88)
      scaleY(1);
  }

  100% {
    opacity: 0;
    filter: blur(2.2px) brightness(0.82);
    transform:
      translate3d(var(--beam-dx), var(--beam-dy), 0)
      rotate(var(--beam-rotation))
      scaleX(0.05)
      scaleY(0.7);
  }
}

@keyframes reward-number-pop {
  0% {
    transform: translateY(0) scale(1);
    text-shadow: none;
  }

  42% {
    transform: translateY(-1px) scale(1.025);
    text-shadow:
      0 0 22px color-mix(in srgb, var(--primary) 42%, transparent),
      0 0 44px color-mix(in srgb, var(--brand-gold) 18%, transparent);
  }

  100% {
    transform: translateY(0) scale(1);
    text-shadow: none;
  }
}

@keyframes reward-number-shimmer {
  0% {
    filter: brightness(1);
  }

  26% {
    filter: brightness(1.35);
  }

  100% {
    filter: brightness(1);
  }
}

@keyframes reward-stage-reveal {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes reward-stat-pop {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }

  62% {
    opacity: 1;
    transform: translateY(0) scale(1.012);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes reward-level-number-flip {
  0%,
  100% {
    transform: translateY(0) rotateX(0deg) scale(1);
  }

  48% {
    transform: translateY(0) rotateX(6deg) scale(1.012);
  }
}

@keyframes level-up-ribbon-pop {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.94);
  }

  28% {
    opacity: 1;
    transform: translateY(0) scale(1.01);
    box-shadow: 0 0 22px color-mix(in srgb, var(--amber) 24%, transparent);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes level-up-card-arrive {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }

  68% {
    opacity: 1;
    transform: translateY(0) scale(1.012);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes level-up-intermission-exit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
    filter: blur(2px);
  }
}

@keyframes level-up-card-sheen {
  0% {
    opacity: 0;
    transform: translateX(-115%);
  }

  24% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translateX(115%);
  }
}

@keyframes level-up-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes reward-level-card-scan {
  0%,
  100% {
    opacity: 0.26;
    transform: translateX(-42%) rotate(0deg);
  }

  46% {
    opacity: 0.52;
    transform: translateX(42%) rotate(0deg);
  }
}

@keyframes reward-level-up-card-pop {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.985);
  }

  64% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.012);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes reward-firework-burst {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.18);
  }

  18% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }

  62% {
    opacity: 0.84;
    transform: translate3d(-50%, -50%, 0) scale(1.08);
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(1.45);
  }
}

@keyframes reward-firework-star-pop {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(0deg);
  }

  20% {
    opacity: 0.72;
    transform: scale(1.12) rotate(18deg);
  }

  100% {
    opacity: 0;
    transform: scale(1.55) rotate(48deg);
  }
}

@keyframes reward-firework-trail {
  0% {
    opacity: 0;
    transform: translateY(-50%) rotate(calc(var(--firework-angle, 0deg) + 180deg)) scaleX(0.08);
  }

  18% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    transform: translateY(-50%) rotate(calc(var(--firework-angle, 0deg) + 180deg)) scaleX(1);
  }
}

@keyframes reward-firework-halo {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.34);
  }

  20% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(1.18);
  }
}

@keyframes reward-level-up-field-pop {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }

  14% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.018);
  }
}

@keyframes reward-level-up-aura-wash {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }

  24% {
    opacity: 0.72;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes reward-level-up-card-bloom {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }

  22% {
    opacity: 0.96;
    transform: scale(1.08);
  }

  100% {
    opacity: 0;
    transform: scale(1.42);
  }
}

@keyframes reward-level-up-number-glow {
  0% {
    text-shadow:
      0 0 14px color-mix(in srgb, var(--brand-gold) 36%, transparent),
      0 5px 18px rgb(0 0 0 / 0.42);
    transform: scale(0.98);
  }

  28% {
    text-shadow:
      0 0 20px color-mix(in srgb, #ffffff 70%, transparent),
      0 0 52px color-mix(in srgb, var(--brand-gold) 76%, transparent),
      0 0 92px color-mix(in srgb, var(--primary) 38%, transparent);
    transform: scale(1.07);
  }

  100% {
    text-shadow:
      0 0 20px color-mix(in srgb, var(--brand-gold) 56%, transparent),
      0 5px 18px rgb(0 0 0 / 0.42);
    transform: scale(1);
  }
}

@keyframes metric-count-pop {
  0% {
    transform: translateY(0) scale(1);
  }

  45% {
    transform: translateY(-1px) scale(1.045);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes celebration-dot {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  45% {
    opacity: 1;
    transform: scale(1.35);
  }

  100% {
    opacity: 0.7;
    transform: scale(1);
  }
}

.viewer-next-links {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--line));
  border-radius: var(--radius);
  padding: 12px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.viewer-next-links > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.embed-fallback-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--amber) 50%, var(--line));
  border-radius: var(--radius);
  padding: 10px 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--amber) 13%, transparent), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow);
}

.embed-fallback-panel strong,
.embed-fallback-panel p {
  display: block;
}

.embed-fallback-panel p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.hosted-ad-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--line));
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--surface)), color-mix(in srgb, var(--accent) 8%, var(--surface))),
    var(--surface);
  box-shadow: var(--shadow);
}

.hosted-ad-media {
  min-height: 260px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 25% 25%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 32%, var(--surface-2)), color-mix(in srgb, var(--primary) 28%, var(--surface-2)));
  background-position: center;
  background-size: cover;
  color: color-mix(in srgb, var(--primary) 72%, #ffffff);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 1000;
}

.hosted-ad-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 22px;
}

.hosted-ad-copy h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
}

.hosted-ad-copy p {
  margin: 0;
  max-width: 68ch;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.55;
}

.hosted-ad-copy small {
  color: var(--muted);
}

.ad-frame-shell {
  position: relative;
  min-height: 1100px;
  overflow: hidden;
  border-radius: var(--radius);
}

.ad-frame-shell::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(circle at 50% 92px, color-mix(in srgb, var(--primary) 24%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 42%);
  content: "";
  opacity: 0;
  pointer-events: none;
}

.ad-frame-shell.reward-overlay-active::after {
  animation: advertiser-overlay-glow 1800ms ease-out both;
}

.ad-frame {
  width: 100%;
  height: max(1100px, calc(100vh - 80px));
  min-height: 1100px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.ad-frame.is-frame-unavailable {
  min-height: 900px;
  border-style: dashed;
  opacity: 0.82;
}

.viewer-safety-strip {
  margin-bottom: 0;
  padding: 7px 10px;
  font-size: 0.78rem;
}

.viewer-debug-panel {
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: var(--radius);
  padding: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font-size: 0.78rem;
}

.viewer-debug-panel > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.viewer-debug-panel dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.viewer-debug-panel dl div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface-2);
}

.viewer-debug-panel dt {
  color: var(--muted);
  font-weight: 800;
}

.viewer-debug-panel dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-family: "Consolas", "SFMono-Regular", monospace;
  color: var(--text);
}

.viewer-note {
  margin: 0;
}

.landing-shell {
  width: min(1120px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

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

.landing-hero {
  padding: 34px 0 18px;
}

.landing-hero h1 {
  max-width: 960px;
  margin: 8px 0 14px;
  font-size: clamp(2.4rem, 6vw, 5.6rem);
  line-height: 0.98;
}

.landing-hero p,
.landing-steps p,
.trust-card-grid p {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.65;
}

.brand-hero {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.hero-tagline {
  margin: 0 0 20px;
  font-size: 1.15rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 22px;
}

.hero-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.hero-preview div,
.trust-card-grid article {
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: var(--radius);
  padding: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--brand-sky) 7%, var(--surface))),
    var(--surface);
  box-shadow: var(--soft-shadow);
}

.hero-preview strong,
.hero-preview small,
.trust-card-grid strong {
  display: block;
}

.hero-preview small {
  margin-top: 4px;
  color: var(--muted);
}

.preview-icon,
.trust-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand-mint) 17%, var(--surface));
  color: var(--brand-mint);
  font-size: 0.78rem;
  font-weight: 900;
}

.trust-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 16px;
}

.trust-card-grid p {
  margin-bottom: 0;
}

.landing-steps,
.landing-grid {
  display: grid;
  gap: 16px;
}

.landing-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 24px 0 16px;
}

.landing-steps article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.landing-steps strong {
  display: block;
  margin-bottom: 8px;
}

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

.marketplace-statistics {
  margin: clamp(34px, 5vw, 58px) 0;
}

.marketplace-statistics-header {
  align-items: end;
  margin-bottom: 16px;
}

.marketplace-statistics-header p {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

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

.marketplace-stats-grid .marketplace-stat-card {
  display: flex;
  min-width: 0;
  min-height: 152px;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.marketplace-stats-grid .marketplace-stat-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.marketplace-stats-grid .marketplace-stat-card strong {
  font-size: clamp(1.9rem, 4vw, 3.3rem);
  line-height: 1;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.marketplace-stats-grid .marketplace-stat-card small {
  max-width: 28ch;
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .marketplace-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  color: var(--muted);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.site-footer a {
  color: var(--primary);
  font-weight: 900;
}

.site-footer p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}

.compact-public-footer {
  align-items: start;
}

.compact-public-footer .footer-contact-line {
  grid-column: auto;
  color: var(--text);
  font-weight: 800;
}

.compact-public-footer nav {
  align-self: start;
}

.auth-screen > .site-footer,
.signup-shell > .site-footer,
.advertiser-public-shell > .site-footer,
.advertiser-console > .site-footer {
  grid-column: 1 / -1;
  width: 100%;
}

.beta-notice {
  border-color: rgba(250, 204, 21, 0.28);
  background: rgba(250, 204, 21, 0.08);
}

.beta-note {
  color: var(--muted);
}

.compact-brand .brand-mark {
  width: 36px;
  height: 36px;
}

.legal-shell {
  width: min(1040px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.legal-hero {
  margin-bottom: 16px;
}

.legal-hero h1 {
  max-width: 900px;
  margin: 8px 0 12px;
  font-size: clamp(2.1rem, 4vw, 4.2rem);
  line-height: 1.02;
}

.legal-hero p,
.legal-section p,
.legal-section li {
  color: var(--muted);
  line-height: 1.65;
}

.legal-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.legal-meta-row span {
  border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--line));
  border-radius: 999px;
  padding: 8px 11px;
  background: color-mix(in srgb, var(--amber) 10%, var(--surface));
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}

.legal-nav a {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
}

.app-shortcuts {
  margin-top: 12px;
}

.mobile-bottom-nav {
  display: none;
}

.legal-section {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.legal-section h2 {
  margin: 6px 0 10px;
  font-size: 1.45rem;
}

.legal-section ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.legal-document {
  position: relative;
  overflow: hidden;
}

.legal-document::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}

.legal-document h3 {
  margin: 16px 0 8px;
  color: var(--ink);
  font-size: 1rem;
}

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

.legal-callout {
  margin-top: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line));
  border-radius: var(--radius);
  padding: 14px 16px;
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-2));
}

.legal-callout strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.legal-callout p {
  margin: 0;
}

.legal-callout-muted {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.legal-contact-card {
  display: grid;
  gap: 16px;
}

.legal-contact-card h2 {
  margin: 0;
}

.legal-contact-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.legal-contact-card dl > div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.legal-contact-card dt {
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-contact-card dd {
  margin: 6px 0 0;
  color: var(--text);
  font-weight: 800;
}

.legal-address-lines {
  display: grid;
  gap: 3px;
}

@media (max-width: 700px) {
  .legal-contact-card dl {
    grid-template-columns: 1fr;
  }
}

.support-shell {
  width: min(1120px, calc(100vw - 36px));
}

.support-hero {
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 28px;
  padding: clamp(22px, 4vw, 36px);
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 36%),
    radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: var(--shadow);
}

.support-hero h1 {
  max-width: 780px;
  font-size: clamp(2.3rem, 5vw, 4.15rem);
}

.support-hero p {
  max-width: 820px;
  margin: 0 0 10px;
}

.support-beta-note {
  margin: 18px 0 0;
}

.support-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.support-contact-card,
.support-help-card,
.support-panel,
.support-provider-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.support-contact-card,
.support-help-card {
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 24px;
  padding: 20px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 78%, transparent)),
    var(--surface);
  box-shadow: var(--shadow);
}

.support-contact-card::before,
.support-help-card::before,
.support-provider-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), transparent 42%);
  opacity: 0.72;
}

.support-card-primary {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  box-shadow:
    0 22px 52px color-mix(in srgb, var(--primary) 12%, transparent),
    var(--shadow);
}

.support-contact-card > *,
.support-help-card > *,
.support-provider-panel > * {
  position: relative;
  z-index: 1;
}

.support-contact-card h2,
.support-help-card h3,
.support-panel h2,
.support-provider-panel h2 {
  margin: 0;
}

.support-contact-card p,
.support-help-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.support-contact-value {
  color: var(--text);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 950;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.support-card-action {
  justify-self: start;
  margin-top: 4px;
}

.support-address-lines {
  margin: 2px 0 10px;
  color: var(--text);
  font-weight: 900;
  line-height: 1.4;
}

.support-address-guidance,
.support-sensitive-warning {
  border: 1px solid color-mix(in srgb, var(--amber) 26%, var(--line));
  border-radius: 16px;
  padding: 12px;
  background: color-mix(in srgb, var(--amber) 8%, var(--surface-2));
  color: var(--muted);
}

.support-section {
  padding: clamp(18px, 3vw, 26px);
}

.support-help-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.support-card-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--line));
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--accent) 16%, transparent));
  color: var(--primary);
  font-weight: 950;
}

.support-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 16px;
  margin-top: 16px;
}

.support-panel ul {
  padding-left: 18px;
}

.support-summary-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.support-summary-list div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
}

.support-summary-list strong {
  color: var(--text);
}

.support-summary-list span {
  color: var(--muted);
  line-height: 1.45;
}

.support-policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.support-policy-links a {
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 999px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--primary);
  font-weight: 900;
}

.support-provider-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.support-provider-grid span {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  color: var(--text);
  font-weight: 850;
  overflow-wrap: anywhere;
}

body[data-theme="light"] .support-hero,
body[data-theme="light"] .support-contact-card,
body[data-theme="light"] .support-help-card,
body[data-theme="light"] .support-summary-list div,
body[data-theme="light"] .support-provider-grid span {
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.94), rgb(241 245 249 / 0.8)),
    #ffffff;
}

.faq-shell {
  width: min(1120px, calc(100vw - 36px));
}

.faq-hero {
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 28px;
  padding: clamp(22px, 4vw, 34px);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%),
    radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: var(--shadow);
}

.faq-hero h1 {
  max-width: 790px;
  font-size: clamp(2.25rem, 5vw, 4rem);
}

.faq-hero p {
  max-width: 830px;
  margin-bottom: 0;
}

.faq-beta-note {
  margin-top: 18px;
}

.faq-toolbar,
.faq-featured,
.faq-category-panel,
.faq-results-panel,
.faq-support-cta {
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 24px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 76%, transparent)),
    var(--surface);
  box-shadow: var(--shadow);
}

.faq-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin: 16px 0;
  padding: 18px;
}

.faq-search-card {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.faq-search-card label {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.faq-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.faq-search-row input {
  min-height: 50px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 16px;
  padding: 0 15px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--ink);
  font-weight: 850;
  outline: none;
}

.faq-search-row input:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 64%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);
}

.faq-search-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 800;
}

.faq-action-row,
.faq-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.faq-action-row {
  justify-content: flex-end;
}

.faq-featured {
  display: grid;
  grid-template-columns: minmax(170px, 0.28fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
  padding: 20px;
  border-color: color-mix(in srgb, var(--amber) 22%, var(--line));
}

.faq-featured h2,
.faq-results-header h2,
.faq-support-cta h2 {
  margin: 4px 0 0;
}

.faq-featured-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.faq-featured-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 999px;
  padding: 9px 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)),
    color-mix(in srgb, var(--surface-2) 86%, transparent);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.2;
}

.faq-featured-link:hover {
  border-color: color-mix(in srgb, var(--primary) 54%, var(--line));
  color: var(--primary);
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.faq-category-panel {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 12px;
  padding: 18px;
}

.faq-category-list {
  display: grid;
  gap: 8px;
}

.faq-category-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 15px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  color: color-mix(in srgb, var(--muted) 88%, var(--ink));
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.faq-category-button::after {
  content: attr(data-count);
  display: inline-grid;
  min-width: 28px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 950;
}

.faq-category-button:hover,
.faq-category-button:focus-visible,
.faq-category-button.is-active {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--ink);
}

.faq-category-button:hover {
  transform: translateX(3px);
}

.faq-category-button:focus-visible,
.faq-question-button:focus-visible,
.faq-copy-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent);
  outline-offset: 3px;
}

.faq-results-panel {
  min-width: 0;
  padding: 18px;
}

.faq-results-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-item {
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 76%, transparent), color-mix(in srgb, var(--surface) 86%, transparent)),
    var(--surface);
}

.faq-item.is-open {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  box-shadow: 0 18px 38px color-mix(in srgb, var(--primary) 9%, transparent);
}

.faq-question-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 62px;
  width: 100%;
  border: 0;
  padding: 16px 18px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.faq-question-text {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.faq-question-text strong {
  font-size: 1.03rem;
  line-height: 1.28;
}

.faq-question-text span {
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.faq-question-indicator {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
  font-size: 1.2rem;
  font-weight: 950;
}

.faq-answer {
  display: none;
  gap: 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  padding: 0 18px 18px;
}

.faq-item.is-open .faq-answer {
  display: grid;
}

.faq-answer p,
.faq-answer li {
  color: var(--muted);
  line-height: 1.62;
}

.faq-answer p,
.faq-answer ul {
  margin: 0;
}

.faq-answer ul {
  padding-left: 18px;
}

.faq-inline-callout {
  border: 1px solid color-mix(in srgb, var(--amber) 26%, var(--line));
  border-radius: 16px;
  padding: 12px;
  background: color-mix(in srgb, var(--amber) 8%, var(--surface-2));
}

.faq-inline-callout strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
}

.faq-answer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-answer-links a,
.faq-copy-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 999px;
  padding: 8px 11px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--primary);
  font-weight: 900;
}

.faq-copy-link {
  justify-self: start;
  cursor: pointer;
}

.faq-pricing-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.faq-pricing-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.faq-pricing-table th,
.faq-pricing-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  padding: 12px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.38;
  text-align: left;
  vertical-align: top;
}

.faq-pricing-table th {
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.faq-pricing-table td:first-child,
.faq-pricing-table td:nth-child(2),
.faq-pricing-table td:nth-child(3),
.faq-pricing-table td:nth-child(4) {
  color: var(--ink);
  font-weight: 900;
}

.faq-pricing-table tr:last-child td {
  border-bottom: 0;
}

.faq-no-results {
  border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--line));
  border-radius: 18px;
  padding: 18px;
  background: color-mix(in srgb, var(--amber) 8%, var(--surface-2));
}

.faq-no-results h3,
.faq-no-results p {
  margin: 0 0 10px;
}

.faq-support-cta {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 22px;
  border-color: color-mix(in srgb, var(--primary) 25%, var(--line));
}

.faq-support-cta p {
  max-width: 840px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.faq-sensitive-note {
  border: 1px solid color-mix(in srgb, var(--amber) 24%, var(--line));
  border-radius: 16px;
  padding: 12px;
  background: color-mix(in srgb, var(--amber) 7%, var(--surface-2));
}

.faq-phone-line a {
  color: var(--primary);
  font-weight: 900;
}

body[data-theme="light"] .faq-hero,
body[data-theme="light"] .faq-toolbar,
body[data-theme="light"] .faq-featured,
body[data-theme="light"] .faq-category-panel,
body[data-theme="light"] .faq-results-panel,
body[data-theme="light"] .faq-support-cta,
body[data-theme="light"] .faq-item,
body[data-theme="light"] .faq-pricing-table-wrap {
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.94), rgb(241 245 249 / 0.8)),
    #ffffff;
}

@media (max-width: 980px) {
  .support-contact-grid,
  .support-two-column {
    grid-template-columns: 1fr;
  }

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

  .faq-toolbar,
  .faq-featured,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .faq-action-row {
    justify-content: flex-start;
  }

  .faq-category-panel {
    position: static;
  }

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

@media (max-width: 560px) {
  .support-shell,
  .faq-shell {
    width: min(100% - 24px, 1120px);
    padding-top: 18px;
  }

  .support-hero,
  .support-contact-card,
  .support-help-card,
  .support-section,
  .support-panel,
  .support-provider-panel,
  .faq-hero,
  .faq-toolbar,
  .faq-featured,
  .faq-category-panel,
  .faq-results-panel,
  .faq-support-cta,
  .faq-item {
    border-radius: 20px;
  }

  .support-contact-grid,
  .support-help-grid,
  .support-provider-grid,
  .faq-category-list,
  .faq-search-row {
    grid-template-columns: 1fr;
  }

  .support-card-action,
  .support-policy-links a,
  .faq-action-row .text-button,
  .faq-cta-actions a,
  .faq-search-row .text-button {
    width: 100%;
    justify-content: center;
  }

  .faq-toolbar,
  .faq-featured,
  .faq-category-panel,
  .faq-results-panel,
  .faq-support-cta {
    padding: 14px;
  }

  .faq-question-button {
    min-height: 58px;
    padding: 14px;
  }

  .faq-answer {
    padding: 0 14px 14px;
  }

  .faq-featured-list {
    display: grid;
    grid-template-columns: 1fr;
  }

  .faq-featured-link {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-category-button,
  .faq-featured-link,
  .faq-item {
    transition: none;
  }

  .faq-category-button:hover {
    transform: none;
  }
}

.legal-anchor {
  display: block;
  position: relative;
  top: -72px;
  height: 0;
  overflow: hidden;
}

.advertiser-public-shell,
.advertiser-console {
  width: min(1180px, calc(100vw - 36px));
  margin: 0 auto;
}

.admin-login-shell,
.admin-shell {
  width: min(1280px, calc(100vw - 36px));
  margin: 0 auto;
}

.admin-login-shell {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 0.74fr);
  gap: 24px;
  align-items: center;
  min-height: calc(100vh - 42px);
  padding: 32px 0 52px;
}

.admin-login-copy h1 {
  max-width: 720px;
  margin: 10px 0 14px;
  font-size: 3.6rem;
  line-height: 1;
}

.admin-login-copy p {
  max-width: 680px;
  color: var(--muted);
  line-height: 1.65;
}

.admin-test-credentials,
.admin-mode-card,
.admin-settings-note {
  display: grid;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--amber) 38%, var(--line));
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--amber) 9%, var(--surface));
}

.admin-test-credentials span,
.admin-test-credentials small,
.admin-mode-card span,
.admin-settings-note span,
.admin-settings-note small {
  color: var(--muted);
  line-height: 1.45;
}

.admin-login-card form,
.admin-settings-form {
  display: grid;
  gap: 14px;
}

.admin-shell {
  display: grid;
  gap: 16px;
  padding: 22px 0 56px;
}

.admin-topbar,
.admin-top-actions,
.admin-section-heading,
.admin-card-head,
.admin-row-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-topbar,
.admin-section-heading,
.admin-card-head {
  justify-content: space-between;
}

.admin-top-actions,
.admin-row-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-top-actions > span:not(.status-badge) {
  color: var(--muted);
  font-weight: 800;
}

.admin-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--soft-shadow);
}

.admin-nav-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.admin-nav-item:hover,
.admin-nav-item.is-active {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-2));
  color: var(--ink);
}

.admin-panel {
  display: grid;
  gap: 16px;
}

.admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: 16px;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
  border-radius: var(--radius);
  padding: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 58%),
    var(--surface);
  box-shadow: var(--shadow);
}

.admin-hero h1,
.admin-section-heading h1 {
  margin: 4px 0 6px;
  line-height: 1.05;
}

.admin-hero h1 {
  font-size: 2.6rem;
}

.admin-hero p {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.6;
}

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

.admin-stat-card small,
.admin-table span,
.admin-management-card small,
.admin-management-card p,
.admin-risk-row span,
.admin-queue-row span {
  color: var(--muted);
  line-height: 1.45;
}

.admin-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
}

.admin-queue-row {
  display: grid;
  width: 100%;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--soft-shadow);
}

.admin-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
}

.admin-table thead th {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.admin-table th span,
.admin-table td span {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.admin-scanner-regression-wrap {
  max-height: 520px;
  overflow: auto;
}

.admin-table-scanner-regression {
  min-width: 1320px;
}

.admin-table-scanner-regression td {
  vertical-align: top;
}

.admin-table-scanner-regression small,
.admin-scanner-regression-url {
  display: block;
  max-width: 360px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-table-scanner-regression code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.admin-table input,
.admin-section-heading input,
.admin-section-heading select {
  min-width: min(100%, 280px);
}

.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-management-card,
.admin-risk-row {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface);
  box-shadow: var(--soft-shadow);
}

.admin-management-card a {
  display: block;
  margin-top: 3px;
  color: var(--primary);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.admin-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-mini-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--surface-2);
}

.admin-mini-grid dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-mini-grid dd {
  margin: 3px 0 0;
  font-weight: 900;
}

.admin-risk-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.admin-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-inline-check input {
  width: 16px;
  min-height: 16px;
  padding: 0;
}

.advertiser-public-shell {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  gap: 24px;
  align-items: center;
  min-height: 100vh;
  padding: 30px 0 48px;
}

.advertiser-auth-copy h1 {
  margin: 34px 0 14px;
  font-size: 3.8rem;
  line-height: 0.98;
}

.advertiser-auth-copy p,
.advertiser-hero p {
  color: var(--muted);
  line-height: 1.65;
}

.advertiser-console {
  display: grid;
  gap: 16px;
  padding: 24px 0 52px;
}

.advertiser-console-header,
.advertiser-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.advertiser-console-header {
  justify-content: space-between;
}

.advertiser-header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.advertiser-header-actions .text-button {
  white-space: nowrap;
}

#advertiserLogoutButton {
  min-width: 96px;
}

#advertiserLogoutButton[aria-busy="true"] {
  min-width: 132px;
}

.advertiser-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.36fr);
  gap: 16px;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--line));
  border-radius: var(--radius);
  padding: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), transparent 58%),
    var(--surface);
  box-shadow: var(--shadow);
}

.advertiser-hero h1 {
  max-width: 760px;
  margin: 6px 0 10px;
  font-size: 3rem;
  line-height: 1.02;
}

.privacy-card {
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}

.privacy-card span,
.advertiser-campaign-card small,
.budget-row small,
.anonymous-record-row small {
  color: var(--muted);
  line-height: 1.45;
}

.advertiser-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.advertiser-workbench {
  grid-template-columns: minmax(320px, 0.8fr) minmax(320px, 1fr);
}

.budget-table,
.advertiser-campaign-grid,
.anonymous-record-list,
.demographic-summary {
  display: grid;
  gap: 10px;
}

.anonymous-record-row,
.demo-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-2);
}

.budget-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) minmax(110px, 0.8fr) repeat(4, minmax(120px, 1fr));
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-2);
}

.budget-row strong,
.budget-row small,
.anonymous-record-row strong,
.anonymous-record-row span,
.anonymous-record-row small,
.demo-breakdown strong {
  display: block;
}

.budget-row > span {
  align-self: center;
  color: var(--primary);
  font-weight: 900;
  text-align: right;
}

.budget-row b {
  color: var(--text);
  font-weight: 900;
}

.advertiser-warning-panel {
  display: grid;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, #d7b56d 48%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, #d7b56d 8%, var(--surface));
  color: var(--text);
}

.advertiser-warning-panel p {
  margin: 0;
  line-height: 1.45;
}

.compact-delivery-notice {
  margin: 8px 0;
  border-color: color-mix(in srgb, var(--accent-2) 30%, var(--line));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.compact-delivery-ack {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 28%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
  color: var(--text);
  line-height: 1.35;
}

.compact-delivery-ack input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent-2);
  flex: 0 0 auto;
}

.estimator-delivery-warning[data-level="warning"],
.estimator-delivery-warning[data-level="strong-warning"] {
  border-color: color-mix(in srgb, var(--amber) 62%, var(--line));
  background: color-mix(in srgb, var(--amber) 12%, var(--surface-2));
}

.campaign-delivery-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.campaign-delivery-note.is-slow {
  color: color-mix(in srgb, var(--amber) 86%, var(--text));
}

.advertiser-billing-summary,
.advertiser-payment-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

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

.advertiser-payment-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface-2);
}

.advertiser-payment-card.is-recommended {
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
}

.advertiser-payment-card h3 {
  margin: 4px 0 8px;
}

.advertiser-payment-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.billing-page {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.billing-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  min-width: 0;
}

.billing-summary-cards .metric-card {
  min-height: 112px;
  min-width: 0;
}

.billing-wallet-flow {
  display: grid;
  grid-template-columns: repeat(7, auto);
  gap: 10px;
  align-items: center;
  justify-content: start;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line));
  border-radius: 8px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--ink);
  font-weight: 950;
}

.billing-wallet-flow b {
  color: var(--muted);
  font-weight: 900;
}

.billing-summary-card {
  display: grid;
  gap: 12px;
  align-content: space-between;
  min-width: 0;
  min-height: 138px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  box-shadow: var(--shadow-soft);
}

.billing-summary-card div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.billing-summary-card span,
.billing-summary-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.35;
}

.billing-summary-card span {
  color: var(--primary);
  text-transform: uppercase;
}

.billing-summary-card strong {
  color: var(--ink);
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  line-height: 1.05;
}

.billing-trust-note {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--green) 38%, var(--line));
  border-radius: 8px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--green) 9%, var(--surface));
  color: var(--muted);
  font-weight: 850;
  line-height: 1.45;
}

.billing-trust-note strong {
  flex: 0 0 auto;
  color: var(--ink);
}

.billing-alerts {
  display: grid;
  gap: 10px;
}

.billing-alerts article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.billing-alerts strong,
.billing-alerts span {
  display: block;
}

.billing-alerts span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.billing-alerts div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.billing-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 14px;
  min-width: 0;
}

.billing-main-grid {
  align-items: start;
}

.billing-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--primary));
  border-radius: var(--radius);
  padding: 16px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.add-funds-card {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  box-shadow: var(--shadow);
}

.billing-card-heading {
  display: grid;
  gap: 4px;
}

.billing-card-heading.inline-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.billing-card-heading h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.15rem;
}

.billing-card-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.campaign-first-billing-page {
  gap: 18px;
}

.campaign-payment-page {
  display: grid;
  gap: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line));
  border-radius: var(--radius-lg);
  padding: clamp(16px, 2.8vw, 24px);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 32%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
  min-width: 0;
}

.campaign-payment-page.checkout-page {
  gap: 18px;
  padding: clamp(18px, 3vw, 30px);
}

.campaign-payment-page.checkout-preview-page {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--green) 28%);
  background:
    radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--green) 18%, transparent), transparent 34%),
    radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 32%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-2) 90%, transparent));
}

.campaign-payment-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.32fr);
  gap: 16px;
  align-items: stretch;
}

.checkout-hero {
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

.campaign-payment-hero h3 {
  margin: 4px 0 8px;
  color: var(--ink);
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  line-height: 1.03;
}

.campaign-payment-hero p {
  margin: 0;
  max-width: 780px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
}

.campaign-payment-due {
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--green) 42%, var(--line));
  border-radius: 18px;
  padding: 16px;
  background: color-mix(in srgb, var(--green) 10%, var(--surface-2));
}

.campaign-payment-due span,
.campaign-payment-summary-grid article span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.campaign-payment-due strong {
  color: var(--primary);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1;
}

.checkout-progress-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.checkout-progress-steps span {
  position: relative;
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 14px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 950;
  text-align: center;
  line-height: 1.2;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.checkout-progress-steps span.is-complete {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, var(--surface-2));
}

.checkout-progress-steps span.is-current {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--green));
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    color-mix(in srgb, var(--green) 11%, var(--surface-2));
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 12%, transparent);
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(310px, 0.72fr);
  gap: 16px;
  align-items: start;
}

.checkout-order-card,
.checkout-pay-card {
  display: grid;
  gap: 16px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--primary));
  border-radius: 22px;
  padding: clamp(16px, 2.2vw, 22px);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 92%, transparent), color-mix(in srgb, var(--surface) 86%, transparent));
  box-shadow: 0 20px 45px color-mix(in srgb, #000 24%, transparent);
}

.checkout-pay-card {
  border-color: color-mix(in srgb, var(--green) 32%, var(--line));
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--green) 13%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-2) 90%, transparent);
}

.checkout-card-heading h4,
.checkout-pay-card h4 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.1;
}

.checkout-card-heading p {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.checkout-method-intro {
  margin: -6px 0 0;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.45;
}

.checkout-summary-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.checkout-summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 66%, transparent);
}

.checkout-summary-list div:last-child {
  border-bottom: 0;
}

.checkout-summary-list span,
.checkout-policy-note span,
.checkout-method span,
.checkout-total span,
.checkout-invoice-strip span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.35;
}

.checkout-summary-list strong {
  color: var(--ink);
  font-size: 0.94rem;
  text-align: right;
  overflow-wrap: anywhere;
}

.checkout-summary-invoice-row {
  background: color-mix(in srgb, var(--cyan) 7%, transparent);
}

.checkout-summary-list strong.checkout-summary-copy-value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.checkout-summary-copy-button {
  width: auto;
  min-width: 58px;
  min-height: 28px;
  padding: 5px 10px;
  font-size: 0.72rem;
}

.checkout-policy-note {
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--amber) 34%, var(--line));
  border-radius: 16px;
  padding: 13px 14px;
  background: color-mix(in srgb, var(--amber) 8%, var(--surface-2));
}

.checkout-policy-note strong {
  color: var(--ink);
}

.checkout-missing-value {
  color: var(--amber) !important;
}

.checkout-preview-issues {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--line));
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--amber) 9%, transparent);
}

.checkout-preview-issues strong {
  color: var(--ink);
}

.checkout-preview-issues ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.checkout-preview-issues li::marker {
  color: var(--amber);
}

.checkout-method-list {
  display: grid;
  gap: 12px;
}

.checkout-method {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 16px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}

.checkout-method-featured {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--green));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--accent) 9%, transparent);
}

.checkout-method strong {
  display: block;
  color: var(--ink);
  font-size: 0.98rem;
  margin-bottom: 3px;
}

.checkout-method .primary-button,
.checkout-method .small-button,
.check-payment-actions .small-button {
  min-height: 36px;
}

.checkout-method.is-disabled {
  opacity: 0.9;
}

.checkout-method.is-selected {
  border-color: color-mix(in srgb, var(--green) 60%, var(--line));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--green) 13%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 12%, transparent);
}

.check-payment-instructions {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--green) 34%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.check-payment-instructions.is-selected {
  border-color: color-mix(in srgb, var(--green) 58%, var(--line));
}

.check-payment-instructions p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.45;
}

.check-payment-instructions.is-unavailable {
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
  background: color-mix(in srgb, var(--amber) 8%, var(--surface-2));
}

.checkout-confirmation {
  margin: 0;
  color: var(--green);
  font-weight: 900;
  line-height: 1.4;
}

.check-payment-instructions dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.check-payment-instructions dl div {
  display: grid;
  grid-template-columns: minmax(92px, 0.4fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.check-payment-instructions dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.check-payment-instructions dd {
  margin: 0;
  color: var(--ink);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.check-payment-instructions ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.4;
}

.check-payment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.check-payment-actions span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.checkout-preview-nudge {
  animation: checkoutPreviewNudge 1.15s ease both;
}

@keyframes checkoutPreviewNudge {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: none;
  }
  35% {
    transform: translateY(-2px);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent), 0 14px 34px color-mix(in srgb, var(--green) 18%, transparent);
  }
}

.checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--green) 18%, var(--surface-2)), color-mix(in srgb, var(--primary) 10%, var(--surface-2)));
  border: 1px solid color-mix(in srgb, var(--green) 42%, var(--line));
}

.checkout-total strong {
  color: var(--primary);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1;
}

.checkout-invoice-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

.checkout-invoice-strip div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.campaign-payment-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.campaign-payment-summary-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.campaign-payment-summary-grid article {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 82px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--primary));
  border-radius: 14px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.campaign-payment-summary-grid article strong {
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.campaign-payment-notice {
  align-items: flex-start;
}

.payment-method-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.payment-method-card,
.invoice-record-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 84%, var(--primary));
  border-radius: 18px;
  padding: 16px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.payment-method-card h4,
.invoice-record-card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1.08rem;
}

.payment-method-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.5;
}

.payment-method-card.is-disabled {
  opacity: 0.82;
}

.local-test-payment-card {
  border-color: color-mix(in srgb, var(--amber) 46%, var(--line));
  background: color-mix(in srgb, var(--amber) 9%, var(--surface-2));
}

.campaign-payment-empty .campaign-payment-hero {
  align-items: center;
}

.billing-amount-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.billing-amount-button,
.billing-custom-amount {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  color: var(--ink);
  font-weight: 950;
}

.billing-amount-button {
  display: grid;
  place-items: center;
  gap: 2px;
  cursor: pointer;
  padding: 8px;
  text-align: center;
}

.billing-amount-button.is-active {
  border-color: color-mix(in srgb, var(--primary) 64%, var(--line));
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
}

.billing-amount-button strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.billing-amount-button small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.billing-custom-amount {
  display: grid;
  gap: 4px;
  padding: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.billing-custom-amount input {
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
}

.billing-estimate-box {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
}

.billing-estimate-box strong {
  color: var(--ink);
}

.billing-estimate-box span,
.billing-shortfall {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.billing-shortfall {
  margin: 0;
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
}

.billing-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.billing-method-option {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
  cursor: pointer;
}

.billing-method-option.is-active {
  border-color: color-mix(in srgb, var(--green) 46%, var(--line));
}

.billing-method-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.billing-method-option span {
  color: var(--ink);
  font-weight: 950;
}

.billing-method-option small {
  color: var(--muted);
  font-weight: 800;
}

.billing-primary-actions,
.billing-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.billing-guided-steps {
  display: grid;
  gap: 10px;
}

.billing-step {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.billing-step > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.billing-mini-amounts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.billing-mini-amounts .billing-amount-button {
  min-height: 50px;
  padding: 6px;
}

.billing-next-steps {
  border-color: color-mix(in srgb, var(--green) 44%, var(--line));
  background: color-mix(in srgb, var(--green) 6%, var(--surface));
}

.billing-success-note,
.billing-budget-assignment {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--green) 36%, var(--line));
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--green) 7%, var(--surface));
}

.billing-success-note strong {
  color: var(--green);
}

.billing-success-note span,
.billing-budget-assignment small,
.billing-secondary-stat p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

.billing-budget-assignment {
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.42fr) auto;
  align-items: end;
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.billing-budget-assignment small {
  grid-column: 1 / -1;
}

.billing-page label:not(.billing-method-option):not(.billing-custom-amount) {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.billing-page select,
.billing-page input {
  min-width: 0;
  width: 100%;
}

.billing-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.billing-invoice-table {
  min-width: 920px;
}

.billing-activity-table {
  min-width: 760px;
}

.billing-budget-table {
  min-width: 980px;
}

.billing-budget-table th small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.billing-history-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  width: fit-content;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.billing-history-tabs button {
  border: 0;
  border-radius: 6px;
  padding: 8px 11px;
  background: transparent;
  color: var(--muted);
  font-weight: 950;
  cursor: pointer;
}

.billing-history-tabs button.is-active {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
  color: var(--ink);
}

.billing-secondary-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.billing-secondary-stat {
  align-content: start;
}

.billing-secondary-stat strong {
  color: var(--ink);
  font-size: 1.55rem;
}

.billing-table-actions .small-button {
  min-width: 0;
  padding-right: 10px;
  padding-left: 10px;
  white-space: nowrap;
}

.campaign-invoice-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.campaign-invoice-facts.compact {
  grid-template-columns: 1fr;
  gap: 6px;
}

.campaign-invoice-facts div,
.campaign-invoice-facts small {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 8px;
  background: color-mix(in srgb, var(--surface-2) 66%, transparent);
}

.campaign-invoice-facts span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.campaign-invoice-facts strong {
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.campaign-invoice-facts .campaign-invoice-reconciliation {
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}

.billing-instruction-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 800;
}

.compact-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 12px;
  min-height: 0;
}

.compact-empty::after {
  display: none;
}

.compact-empty .empty-icon {
  grid-row: span 2;
  width: 36px;
  height: 36px;
}

.compact-empty strong,
.compact-empty p {
  margin: 0;
}

.compact-empty .primary-button,
.compact-empty .text-button {
  grid-row: span 2;
}

@media (max-width: 980px) {
  .billing-action-grid,
  .billing-secondary-grid {
    grid-template-columns: 1fr;
  }

  .campaign-payment-hero,
  .checkout-layout,
  .payment-method-cards {
    grid-template-columns: 1fr;
  }

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

  .campaign-payment-summary-grid,
  .campaign-payment-summary-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .billing-budget-assignment {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .billing-summary-cards,
  .billing-amount-grid,
  .billing-method-grid,
  .billing-mini-amounts {
    grid-template-columns: 1fr;
  }

  .billing-alerts article,
  .billing-card-heading.inline-heading,
  .checkout-method,
  .checkout-invoice-strip,
  .billing-trust-note,
  .billing-wallet-flow {
    display: grid;
  }

  .checkout-method .primary-button,
  .checkout-method .small-button,
  .checkout-invoice-strip .small-button {
    width: 100%;
  }

  .checkout-method,
  .check-payment-instructions dl div {
    grid-template-columns: 1fr;
  }

  .checkout-invoice-strip div {
    justify-content: stretch;
  }

  .checkout-summary-list .checkout-summary-invoice-row {
    align-items: flex-start;
  }

  .checkout-summary-list strong.checkout-summary-copy-value {
    justify-content: flex-start;
    text-align: left;
  }

  .checkout-summary-copy-button {
    flex: 0 0 auto;
    width: auto;
  }

  .campaign-payment-summary-grid,
  .campaign-payment-summary-grid.compact {
    grid-template-columns: 1fr;
  }

  .billing-wallet-flow {
    grid-template-columns: 1fr;
  }

  .billing-wallet-flow b {
    display: none;
  }
}

.advertiser-campaign-grid {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
}

.advertiser-campaign-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.advertiser-campaign-card h3 {
  margin: 4px 0 0;
  font-size: 1.2rem;
}

.advertiser-campaign-card p {
  color: var(--muted);
  line-height: 1.5;
}

.advertiser-campaign-card a {
  display: block;
  overflow-wrap: anywhere;
  color: var(--primary);
  font-weight: 900;
}

.advertiser-analytics-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.anonymous-record-row {
  align-items: center;
}

.anonymous-record-row > div:last-child {
  display: grid;
  justify-items: end;
  gap: 6px;
  text-align: right;
}

.demo-breakdown {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface);
}

.demo-breakdown div {
  padding: 8px 10px;
}

.demo-breakdown b {
  color: var(--primary);
}

.survey-analytics-panel {
  overflow: hidden;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 16%, transparent), transparent 38%),
    var(--surface);
}

.survey-filter-row {
  align-items: end;
}

.audience-intelligence-panel {
  display: grid;
  gap: 16px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%),
    radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--brand-gold) 14%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #071d1a), color-mix(in srgb, var(--surface-2) 88%, #0d2134));
}

.audience-intelligence-heading {
  align-items: center;
}

.attention-score-card {
  display: grid;
  justify-items: center;
  min-width: 142px;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 42%, var(--primary));
  border-radius: 8px;
  padding: 12px 16px;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--brand-gold) 22%, transparent), transparent 52%),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.06) inset,
    0 18px 42px rgb(0 0 0 / 0.22);
}

.attention-score-card span,
.attention-score-card small,
.audience-intel-card span,
.audience-intel-card small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.attention-score-card strong {
  color: var(--brand-gold);
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  line-height: 0.95;
  text-shadow: 0 0 22px color-mix(in srgb, var(--brand-gold) 34%, transparent);
}

.audience-summary-card,
.audience-intel-card,
.audience-intel-section {
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.16);
}

.audience-summary-card {
  padding: 16px;
}

.audience-summary-card p {
  max-width: 980px;
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.55;
}

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

.audience-intel-card {
  display: grid;
  gap: 8px;
  min-height: 128px;
  padding: 14px;
}

.audience-intel-card strong {
  color: var(--ink);
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  line-height: 1.08;
}

.audience-intel-card small {
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.45;
}

.audience-intelligence-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.audience-intel-section {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
}

.audience-intel-section h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 1.02rem;
}

.audience-funnel,
.survey-heat-ranking,
.audience-insight-list,
.audience-recommendation-list {
  display: grid;
  gap: 9px;
}

.audience-funnel-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.audience-funnel-step::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--funnel-width);
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--brand-gold) 14%, transparent));
  pointer-events: none;
}

.audience-funnel-step span,
.audience-funnel-step strong,
.audience-funnel-step small {
  position: relative;
  z-index: 1;
}

.audience-funnel-step span {
  color: var(--ink);
  font-weight: 900;
}

.audience-funnel-step strong {
  color: var(--primary);
  font-size: 1.05rem;
}

.audience-funnel-step small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-weight: 800;
}

.survey-heat-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 14%, var(--line));
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.survey-heat-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--heat-width);
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-gold) 20%, transparent), color-mix(in srgb, var(--primary) 12%, transparent));
}

.survey-heat-row > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-2));
  color: var(--primary);
  font-weight: 950;
}

.survey-heat-row div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.survey-heat-row strong {
  color: var(--ink);
}

.survey-heat-row small {
  color: var(--muted);
  font-weight: 800;
}

.audience-insight-list,
.audience-recommendation-list {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  line-height: 1.5;
}

.audience-insight-list li,
.audience-recommendation-list li {
  padding: 3px 0;
}

.survey-analytics-grid {
  align-items: start;
}

.survey-question-block,
.survey-crosstab {
  display: grid;
  gap: 10px;
}

.survey-question-block + .survey-question-block,
.survey-crosstab + .survey-crosstab {
  margin-top: 16px;
}

.survey-question-block > strong,
.survey-crosstab > strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.survey-table {
  min-width: 680px;
}

.survey-records-table {
  min-width: 1020px;
}

.survey-demo-breakdown small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.advertiser-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow);
}

.advertiser-tab {
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.advertiser-tab:hover,
.advertiser-tab.is-active {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-2));
  color: var(--ink);
}

.advertiser-tab-panel {
  display: grid;
  gap: 16px;
}

.advertiser-overview-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: var(--radius);
  padding: 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow);
}

.advertiser-overview-intro h1 {
  margin: 4px 0 6px;
  font-size: 2rem;
}

.advertiser-overview-intro p,
.advertiser-guideline-card p,
.campaign-detail-panel p,
.advertiser-guidelines-panel p {
  color: var(--muted);
  line-height: 1.55;
}

.advertiser-quick-actions,
.record-toggle-button {
  justify-self: end;
}

.advertiser-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.advertiser-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.advertiser-overview-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.advertiser-protection-section,
.advertiser-verification-flow,
.overview-link-panel {
  min-width: 0;
}

.advertiser-protection-section {
  display: grid;
  gap: 16px;
}

.advertiser-protection-section .panel-heading {
  margin-bottom: 0;
}

.advertiser-protection-section .panel-heading p,
.advertiser-verification-flow p,
.advertiser-guideline-card small,
.advertiser-protection-disclaimer,
.overview-check-list,
.workflow-steps span {
  color: var(--muted);
  line-height: 1.5;
}

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

.protection-card,
.verified-flow-list li {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 88%, transparent), color-mix(in srgb, var(--surface) 92%, transparent));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.protection-card {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.protection-card-icon,
.verified-flow-list span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--primary) 44%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-2));
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 1000;
}

.protection-card strong,
.verified-flow-list strong,
.workflow-steps strong,
.overview-check-list li {
  color: var(--ink);
}

.protection-card p,
.advertiser-guideline-card small,
.verified-flow-list p {
  margin: 0;
}

.advertiser-protection-disclaimer {
  border: 1px solid color-mix(in srgb, var(--amber) 34%, var(--line));
  border-radius: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--amber) 8%, var(--surface-2));
  font-size: 0.92rem;
}

.advertiser-verification-flow {
  display: grid;
  gap: 10px;
}

.advertiser-verification-flow h2 {
  margin: 0;
}

.verified-flow-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.verified-flow-list li {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 13px;
}

.advertiser-protection-details {
  align-items: stretch;
}

.advertiser-guideline-card {
  display: grid;
  align-content: start;
  gap: 8px;
}

.inline-overview-link {
  justify-self: start;
  margin-top: 2px;
}

.advertiser-member-quality {
  display: grid;
  gap: 10px;
}

.overview-check-list,
.workflow-steps {
  display: grid;
  gap: 9px;
  margin: 0;
}

.overview-check-list {
  padding-left: 18px;
}

.workflow-steps {
  padding-left: 0;
  list-style: none;
}

.workflow-steps li {
  display: grid;
  gap: 3px;
}

.overview-link-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: var(--radius);
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: var(--soft-shadow);
}

.overview-link-panel .text-button {
  min-height: 38px;
}

.compact-steps {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--muted);
}

.advertiser-guided-form {
  gap: 16px;
}

.reuse-campaign-panel {
  display: grid;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 18px;
  padding: 16px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 92%, transparent), color-mix(in srgb, var(--surface) 82%, transparent));
  box-shadow: 0 18px 42px rgb(0 0 0 / 0.14);
}

.reuse-campaign-list {
  display: grid;
  gap: 10px;
}

.reuse-campaign-card {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(120px, 0.8fr) minmax(110px, 0.7fr) minmax(110px, 0.7fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 84%, var(--primary) 16%);
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface) 86%, transparent);
}

.reuse-campaign-card > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reuse-campaign-card strong,
.reuse-campaign-card b {
  color: var(--ink);
}

.reuse-campaign-card span {
  color: var(--muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.campaign-fieldset {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.campaign-fieldset legend {
  padding: 0 8px;
  color: var(--ink);
  font-weight: 900;
}

.campaign-classification-fieldset,
.audience-fieldset,
.verification-frequency-fieldset,
.compliance-fieldset {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
}

.classification-row label,
.frequency-rule-card {
  min-width: 0;
}

.inline-policy-question {
  display: grid;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line));
  border-radius: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--amber) 10%, var(--surface-2));
}

.inline-policy-question strong {
  color: var(--ink);
}

.inline-policy-question span {
  color: var(--muted);
  line-height: 1.45;
}

.verification-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.verification-card-grid strong {
  display: block;
  color: var(--ink);
}

.verification-card-grid article,
.frequency-rule-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.verification-card-grid p,
.frequency-rule-card small {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.frequency-rule-card select {
  margin-top: 2px;
}

.form-helper,
.campaign-fieldset small {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.form-helper.is-ready {
  color: var(--primary);
  font-weight: 800;
}

.form-helper.is-error {
  color: var(--danger);
  font-weight: 800;
}

.url-prefix-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  min-width: 0;
  margin-top: 6px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.url-prefix-control:focus-within {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.url-prefix-control__prefix {
  display: inline-grid;
  align-items: center;
  padding: 0 0 0 12px;
  min-height: 44px;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.url-prefix-control input {
  min-width: 0;
  width: 100%;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding-left: 2px;
}

.url-prefix-control input:focus {
  outline: 0;
  box-shadow: none;
}

.viewer-preview-control {
  display: grid;
  gap: 6px;
  align-items: start;
}

.viewer-preview-control .text-button {
  width: fit-content;
}

.viewer-preview-control small {
  overflow-wrap: anywhere;
}

.single-length-estimate {
  display: grid;
  gap: 10px;
}

.single-length-estimate-card {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line));
  border-radius: 16px;
  padding: 12px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%),
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 14px 30px rgb(0 0 0 / 0.12);
}

.single-length-estimate-card div {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 12px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
}

.single-length-estimate-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.single-length-estimate-card strong {
  color: var(--ink);
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.audience-cost-impact {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--line));
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 45%),
    color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.audience-cost-impact-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.audience-cost-impact h3 {
  margin: 3px 0 0;
}

.audience-cost-impact-head > strong {
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line));
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--primary);
  white-space: nowrap;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.audience-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.audience-impact-grid div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.audience-impact-grid span,
.audience-impact-breakdown span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.audience-impact-grid strong {
  color: var(--ink);
}

.audience-impact-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.audience-impact-breakdown strong,
.audience-impact-breakdown span {
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 999px;
  padding: 6px 9px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.audience-impact-helper {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.audience-impact-helper summary {
  color: var(--primary);
  cursor: pointer;
  font-weight: 900;
}

.audience-impact-helper p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.audience-warning[data-level="warning"],
.audience-warning[data-level="strong-warning"],
.audience-cost-impact [data-level="warning"],
.audience-cost-impact [data-level="strong-warning"] {
  color: var(--amber);
  font-weight: 900;
}

.audience-warning[data-level="error"],
.audience-cost-impact [data-level="error"] {
  color: var(--danger);
  font-weight: 900;
}

.tiny-audience-ack {
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line));
  border-radius: 8px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}

.ad-length-allocation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.allocation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.28fr);
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
}

.allocation-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.allocation-row strong {
  color: var(--ink);
}

.allocation-row small {
  font-size: 0.76rem;
}

.allocation-row input {
  min-width: 0;
}

.form-message {
  min-height: 22px;
  margin: 0;
  color: var(--primary);
  font-weight: 800;
  line-height: 1.45;
}

.form-debug-panel {
  display: grid;
  gap: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.form-debug-panel strong {
  display: block;
  margin-top: 4px;
}

.form-debug-panel dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.form-debug-panel div {
  min-width: 0;
}

.form-debug-panel dl div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
}

.form-debug-panel dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.form-debug-panel dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.quiz-setup {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 16%, transparent), transparent 36%),
    color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.survey-builder-intro,
.survey-builder-steps,
.survey-template-row,
.survey-choice-builder {
  display: grid;
  gap: 10px;
}

.survey-builder-intro {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-bottom: 12px;
}

.survey-builder-intro strong {
  display: block;
  margin: 3px 0 6px;
  font-size: 1.05rem;
}

.survey-builder-intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.survey-builder-rule {
  min-width: 132px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 16px;
  padding: 12px 14px;
  text-align: center;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.survey-builder-rule strong {
  margin: 0;
  color: var(--accent);
  font-size: 1.25rem;
}

.survey-builder-rule span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.survey-builder-rule.is-ready {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 12%, transparent);
}

.survey-builder-rule.needs-choices strong {
  color: var(--amber);
}

.survey-builder-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 8px 0 12px;
}

.survey-builder-steps span {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 14px;
  padding: 9px 10px;
  color: var(--muted);
  font-weight: 850;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.survey-builder-steps strong {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 9px;
  color: var(--ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 32%, transparent), color-mix(in srgb, var(--accent) 24%, transparent));
}

.survey-template-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}

.survey-template-button {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 16px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)),
    color-mix(in srgb, var(--surface-2) 86%, transparent);
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.survey-template-button:hover,
.survey-template-button:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--accent));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(-2px);
}

.survey-template-button span,
.survey-template-button small {
  display: block;
}

.survey-template-button span {
  font-weight: 950;
}

.survey-template-button small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.survey-template-clear {
  border-color: color-mix(in srgb, var(--amber) 24%, var(--line));
}

.survey-question-field small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.4;
}

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

.survey-choice-builder label {
  position: relative;
  display: grid;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  border-radius: 16px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 68%, transparent);
}

.survey-choice-builder label > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.survey-choice-input {
  min-height: 44px;
}

.survey-answer-note {
  border-left: 3px solid color-mix(in srgb, var(--primary) 60%, var(--accent));
  padding-left: 10px;
}

@media (max-width: 760px) {
  .audience-intelligence-heading,
  .audience-intelligence-grid,
  .audience-intelligence-split {
    grid-template-columns: 1fr;
  }

  .audience-intelligence-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .attention-score-card {
    justify-items: start;
    width: 100%;
  }

  .survey-builder-intro,
  .survey-builder-steps,
  .survey-template-row,
  .survey-choice-builder,
  .verification-card-grid {
    grid-template-columns: 1fr;
  }

  .ad-length-allocation,
  .allocation-row {
    grid-template-columns: 1fr;
  }

  .audience-cost-impact-head,
  .audience-impact-grid {
    grid-template-columns: 1fr;
  }

  .audience-cost-impact-head {
    display: grid;
  }

  .audience-cost-impact-head > strong {
    justify-self: start;
    white-space: normal;
  }

  .survey-builder-rule {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .signup-method-tabs {
    grid-template-columns: 1fr;
  }

  .signup-method-tab {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  }

  .signup-method-tab:last-child {
    border-bottom: 0;
  }
}

.campaign-review-summary {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: var(--radius);
  padding: 16px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.campaign-review-summary h3 {
  margin: 4px 0 0;
}

.buying-summary-quote {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 14%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 84%, transparent);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--primary) 9%, transparent);
}

.buying-summary-quote > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.buying-summary-quote span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.buying-summary-quote strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(0.95rem, 1vw, 1.12rem);
  line-height: 1.15;
}

.buying-summary-quote div:nth-child(2) strong {
  color: var(--accent);
}

.buying-summary-quote div:nth-child(3) strong {
  color: var(--primary);
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
}

.buying-summary-money-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.buying-summary-column {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 74%, transparent);
}

.advertiser-cost-column {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 72%, transparent);
}

.member-reward-column {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 72%, transparent);
}

.summary-column-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

.summary-column-title span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.summary-column-title strong {
  color: var(--ink);
  font-size: 0.84rem;
  text-align: right;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
  color: var(--muted);
}

.buying-summary-column .summary-row {
  gap: 10px;
  padding-bottom: 8px;
  font-size: 0.88rem;
}

.summary-row strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.summary-addon {
  color: var(--ink);
}

.summary-addon strong {
  color: var(--primary);
}

.summary-total {
  border-bottom: 0;
  border-top: 1px solid var(--line);
  padding-top: 11px;
  padding-bottom: 0;
}

.summary-total strong {
  color: var(--primary);
  font-size: 1.25rem;
}

.summary-column-total {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-bottom: 0;
  color: var(--ink);
}

.summary-column-total strong {
  font-size: 1.18rem;
}

.advertiser-cost-column .summary-column-total strong {
  color: var(--accent);
}

.member-reward-column .summary-column-total strong {
  color: var(--primary);
}

@media (max-width: 860px) {
  .buying-summary-quote {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .buying-summary-money-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .buying-summary-quote {
    grid-template-columns: 1fr;
  }
}

.budget-input-row {
  max-width: 320px;
}

.estimator-planner-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
  margin: 18px 0 14px;
}

.estimator-context-grid,
.budget-planner-summary-grid,
.selected-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.budget-planner-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 18px 0;
}

.estimator-context-grid article,
.estimator-context-grid .budget-input-row,
.budget-planner-summary-grid article,
.selected-plan-grid article {
  min-width: 0;
  max-width: none;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
}

.estimator-context-grid span,
.budget-planner-summary-grid span,
.selected-plan-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.estimator-context-grid strong,
.budget-planner-summary-grid strong,
.selected-plan-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 1.02rem;
  overflow-wrap: anywhere;
}

.estimator-context-grid .budget-input-row select {
  margin-top: 8px;
}

.budget-planner-summary-grid strong {
  font-size: 1.3rem;
}

.estimator-context-grid small,
.budget-planner-summary-grid small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.budget-addon-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 14px;
}

.budget-addon-option {
  align-items: flex-start;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 12%, transparent), transparent 42%),
    var(--surface-2);
}

.budget-addon-option span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.budget-addon-option small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.45;
}

.responsive-table {
  width: 100%;
  overflow-x: auto;
}

.advertiser-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.advertiser-table th,
.advertiser-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
}

.advertiser-table thead th {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.advertiser-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.budget-estimator-pricing-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.budget-estimator-pricing-table th,
.budget-estimator-pricing-table td {
  height: 58px;
  overflow: hidden;
}

.budget-estimator-pricing-table thead th {
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
  white-space: normal;
}

.budget-estimator-pricing-table tbody th,
.budget-estimator-pricing-table tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-estimator-pricing-table th span {
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-estimator-pricing-table tbody th span {
  display: inline;
  margin: 0 0 0 4px;
}

.budget-estimator-pricing-table .budget-col-length {
  width: 9%;
}

.budget-estimator-pricing-table .budget-col-budget {
  width: 10%;
}

.budget-estimator-pricing-table .budget-col-cost {
  width: 16%;
}

.budget-estimator-pricing-table .budget-col-completions {
  width: 12%;
}

.budget-estimator-pricing-table .budget-col-xp {
  width: 8%;
}

.budget-estimator-pricing-table .budget-col-window {
  width: 14%;
}

.budget-estimator-pricing-table .budget-col-spend {
  width: 16%;
}

.budget-estimator-pricing-table .budget-col-cycle-spend {
  width: 14%;
}

.budget-estimator-pricing-table .budget-col-queued {
  width: 13%;
}

.budget-estimator-pricing-table .budget-col-package {
  width: 12%;
}

.budget-package-cell span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-planner-table {
  min-width: 940px;
  table-layout: auto;
}

.budget-planner-table th,
.budget-planner-table td {
  height: auto;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.budget-planner-table tbody tr.is-selected {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 14%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
}

.budget-plan-select {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  width: 100%;
  border: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.budget-plan-select strong {
  font-size: 1.02rem;
}

.budget-plan-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  border-radius: 999px;
  padding: 3px 7px;
  color: color-mix(in srgb, var(--primary) 82%, white);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-size: 0.68rem;
  font-weight: 900;
}

.budget-planner-table td strong {
  display: block;
  color: var(--ink);
  font-size: 1.02rem;
}

.budget-planner-table td small,
.budget-note-text {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

.selected-plan-preview,
.advanced-delivery-details {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 24px;
  padding: 18px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 34%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.selected-plan-preview h3 {
  margin: 4px 0 6px;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
}

.selected-plan-preview p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.selected-plan-preview .primary-button {
  justify-self: start;
}

.beta-audience-inventory {
  margin-top: 18px;
}

.advanced-delivery-details {
  display: block;
}

.advanced-delivery-details summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 900;
}

.advanced-delivery-details .selected-plan-grid {
  margin-top: 14px;
}

.advertiser-table th span,
.pricing-table th span,
.campaign-summary-row th span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.campaign-table {
  min-width: 980px;
}

.campaign-detail-row td {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.campaign-detail-panel {
  display: grid;
  gap: 12px;
}

.campaign-action-stack,
.campaign-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.campaign-action-stack {
  justify-content: flex-start;
}

.campaign-inline-edit {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 14px;
  padding: 14px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 88%, transparent);
}

.campaign-inline-edit textarea {
  min-height: 92px;
}

.campaign-edit-note,
.campaign-inline-edit small {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.compact-heading {
  margin: 0;
}

.compact-heading h3 {
  margin: 3px 0 0;
}

.campaign-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.campaign-detail-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
}

.campaign-detail-grid dt {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.campaign-detail-grid dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-weight: 900;
}

.campaign-length-breakdown {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.campaign-length-breakdown > strong {
  color: var(--ink);
}

.campaign-length-breakdown > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.allocation-breakdown-table {
  min-width: 920px;
}

.campaign-manager-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  min-width: 0;
  margin-bottom: 14px;
}

.campaign-manager-kpis .metric-card {
  min-width: 0;
  min-height: 112px;
}

.campaign-manager-controls {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.campaign-filter-tabs,
.campaign-filter-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.campaign-filter-fields label {
  flex: 1 1 210px;
  min-width: 0;
}

.campaign-filter-fields input,
.campaign-filter-fields select {
  min-width: 0;
  width: 100%;
}

.campaigns-list-card,
.campaign-action-panel {
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--primary));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.campaigns-list-card {
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.campaigns-table-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.campaign-manager-table {
  width: 100%;
  min-width: 1120px;
  table-layout: fixed;
}

.campaign-manager-table th,
.campaign-manager-table td {
  vertical-align: middle;
  min-width: 0;
}

.campaign-manager-table th:nth-child(1) {
  width: 30%;
}

.campaign-manager-table th:nth-child(2),
.campaign-manager-table th:nth-child(4),
.campaign-manager-table th:nth-child(5),
.campaign-manager-table th:nth-child(7) {
  width: 11%;
}

.campaign-manager-table th:nth-child(3),
.campaign-manager-table th:nth-child(8) {
  width: 8%;
}

.campaign-manager-table th:nth-child(6) {
  width: 9%;
}

.campaign-manager-table th:nth-child(9) {
  width: 290px;
}

.campaign-group-summary-row td {
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.campaign-group-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.campaign-group-line > div {
  min-width: 0;
}

.campaign-group-line strong,
.campaign-group-line span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-group-line strong {
  color: var(--ink);
}

.campaign-group-line span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.campaign-ad-cell {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 100%;
  min-width: 0;
}

.campaign-preview-tile {
  display: grid;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 44%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, transparent), transparent),
    color-mix(in srgb, var(--surface-2) 84%, transparent);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.campaign-ad-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.campaign-ad-cell strong,
.campaign-card-top strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-ad-copy span {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-ad-cell span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-ad-cell small {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  color: var(--muted);
}

.campaign-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.campaign-pill.is-survey {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line));
  color: var(--ink);
}

.campaign-progress-cell {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.campaign-progress-cell small {
  color: var(--muted);
  font-weight: 850;
}

.primary-mini-button {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--line));
  color: var(--ink);
}

.campaign-action-stack {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.campaign-action-stack > .small-button {
  flex: 0 0 auto;
  min-width: 0;
  padding-right: 10px;
  padding-left: 10px;
  white-space: nowrap;
}

.campaign-action-menu {
  position: relative;
  flex: 0 0 auto;
}

.campaign-action-menu summary {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  color: var(--ink);
  cursor: pointer;
  font-weight: 950;
  list-style: none;
}

.campaign-action-menu summary::-webkit-details-marker {
  display: none;
}

.campaign-action-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 6px;
  min-width: 154px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.campaign-action-menu-list .small-button {
  width: 100%;
  justify-content: flex-start;
  white-space: nowrap;
}

.campaign-action-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px;
}

.campaign-action-panel p {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.campaign-budget-options,
.campaign-duplicate-options,
.campaign-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.campaign-budget-options label {
  display: grid;
  gap: 4px;
  min-width: 160px;
}

.campaign-budget-options > strong {
  color: var(--ink);
}

.campaign-budget-options .is-active {
  border-color: color-mix(in srgb, var(--primary) 64%, var(--line));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-2));
  color: var(--ink);
}

.campaign-refill-summary,
.campaign-refill-confirmation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  min-width: 0;
}

.campaign-refill-summary > div,
.campaign-refill-confirmation-grid > div,
.campaign-refill-confirmation-grid > label {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.campaign-refill-summary span,
.campaign-refill-confirmation-grid span,
.campaign-refill-confirmation-grid label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.campaign-refill-summary strong,
.campaign-refill-confirmation-grid strong {
  min-width: 0;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-refill-confirmation {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.campaign-final-sale-copy {
  border: 1px solid color-mix(in srgb, var(--amber) 52%, var(--line));
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--amber) 10%, var(--surface-2));
  color: var(--ink);
  font-weight: 850;
}

.campaign-final-sale-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.campaign-final-sale-check input {
  margin-top: 3px;
}

.campaign-edit-drawer {
  display: grid;
  gap: 12px;
  margin: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
}

.campaigns-mobile-list {
  display: none;
}

.campaign-mobile-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
}

.campaign-mobile-variants {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.campaign-variant-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.campaign-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}

.campaign-card-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.campaign-card-metrics div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.campaign-card-metrics span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.campaign-card-metrics strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
}

.campaign-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .campaign-manager-kpis {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }

  .single-length-estimate-card,
  .reuse-campaign-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reuse-campaign-card .small-button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .campaign-manager-kpis,
  .campaign-card-metrics,
  .single-length-estimate-card,
  .reuse-campaign-card {
    grid-template-columns: 1fr;
  }

  .campaigns-table-scroll {
    display: none;
  }

  .campaigns-mobile-list {
    display: grid;
    gap: 12px;
    padding: 12px;
  }

  .campaign-card-top {
    display: grid;
  }

  .campaign-group-line {
    align-items: flex-start;
  }

  .campaign-action-stack {
    flex-wrap: wrap;
  }

  .campaign-action-stack .small-button {
    flex: 1 1 130px;
  }
}

.guideline-section {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.guideline-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.15rem;
}

.guideline-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: guideline-step;
}

.guideline-flow li {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 16px 16px 52px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 66%),
    var(--surface-2);
}

.guideline-flow li::before {
  counter-increment: guideline-step;
  content: counter(guideline-step);
  position: absolute;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
  color: var(--primary);
  font-weight: 950;
}

.guideline-flow strong,
.package-note-grid strong {
  color: var(--ink);
}

.guideline-flow span,
.package-note-grid span {
  color: var(--muted);
  line-height: 1.45;
}

.survey-guideline-highlight {
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: var(--radius);
  padding: 18px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.guideline-pricing-table {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}

.package-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.package-note-grid div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.compact-privacy-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
}

.compact-privacy-card span {
  max-width: 760px;
}

.advertiser-analytics-grid {
  grid-template-columns: minmax(0, 1fr);
}

.anonymous-record-list {
  max-height: 520px;
  overflow: auto;
  padding-right: 2px;
}

.record-toggle-button {
  width: fit-content;
}

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

.guideline-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-2);
}

@media (max-width: 1120px) {
  .auth-screen,
  .signup-shell,
  .app-shell,
  .advertiser-public-shell,
  .admin-login-shell,
  .advertiser-hero,
  .admin-hero,
  .advertiser-overview-intro,
  .advertiser-overview-grid,
  .admin-dashboard-grid,
  .advertiser-workbench,
  .advertiser-analytics-grid {
    grid-template-columns: 1fr;
  }

  .signup-card {
    position: static;
  }

  .auth-panel {
    position: static;
  }

  .member-status-bar {
    grid-template-columns: 1fr;
    top: 34px;
  }

  .sidebar {
    position: static;
    height: auto;
  }

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

  .metric-grid,
  .ad-grid,
  .earn-more-grid,
  .survey-wall-layout,
  .advertiser-metrics,
  .protection-card-grid,
  .verified-flow-list,
  .admin-stat-grid,
  .admin-card-grid,
  .dashboard-quick-actions,
  .signup-benefit-grid,
  .onboarding-grid,
  .trust-card-grid,
  .hero-preview,
  .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-grid,
  .admin-mini-grid,
  .dashboard-primary-grid,
  .content-grid,
  .earn-more-hero,
  .survey-wall-hero,
  .next-action-card,
  .welcome-panel,
  .auth-path,
  .trust-card-grid,
  .hero-preview,
  .landing-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .protection-card-grid,
  .verified-flow-list {
    grid-template-columns: 1fr;
  }

  .help-drawer-panel {
    width: 100vw;
    padding: 14px;
  }

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

  .help-actions {
    margin-top: 2px;
  }

  .wallet-balance-grid,
  .provider-card-grid,
  .estimator-planner-controls,
  .estimator-context-grid,
  .budget-planner-summary-grid,
  .selected-plan-grid,
  .cashout-address-grid {
    grid-template-columns: 1fr;
  }

  .auth-screen,
  .signup-shell,
  .admin-login-shell,
  .main-content,
  .sidebar,
  .viewer-shell {
    padding: 18px;
  }

  .main-content {
    padding-bottom: 104px;
  }

  .signup-shell {
    width: 100%;
    gap: 18px;
  }

  .auth-facts,
  .auth-path,
  .audience-grid,
  .compact-benefits,
  .auth-split,
  .signup-benefit-grid,
  .dashboard-quick-actions,
  .next-action-list,
  .onboarding-progress-row,
  .onboarding-step,
  .help-grid,
  .help-page-grid,
  .member-status-metrics,
  .trust-card-grid,
  .hero-preview,
  .metric-grid,
  .snapshot-progress-grid,
  .ad-grid,
  .earn-more-grid,
  .survey-wall-layout,
  .survey-wall-hero,
  .survey-meta-grid,
  .admin-stat-grid,
  .admin-card-grid,
  .wallet-layout,
  .advertiser-layout,
  .tier-grid,
  .flow-steps,
  .onboarding-grid,
  .form-row,
  .budget-addon-options,
  .choice-grid,
  .compact-choice-grid,
  .goal-row,
  .campaign-detail-grid,
  .admin-mini-grid,
  .admin-risk-row,
  .guideline-grid,
  .guideline-flow,
  .package-note-grid,
  .achievement-card,
  .viewer-reward-stack,
  .viewer-status-strip,
  .engagement-celebration,
  .reward-celebration,
  .ad-frame-shell,
  .captcha-panel,
  .engagement-panel,
  .verified-click-through-panel,
  .embed-fallback-panel,
  .hosted-ad-panel,
  .review-checklist,
  .viewer-debug-panel dl,
  .form-debug-panel dl,
  .ptc-ad-row,
  .budget-row,
  .admin-filter-grid,
  .admin-metrics,
  .landing-grid,
  .promo-link-grid,
  .qr-card-grid,
  .affiliate-count-grid {
    grid-template-columns: 1fr;
  }

  .budget-planner-table {
    min-width: 0;
  }

  .budget-planner-table,
  .budget-planner-table thead,
  .budget-planner-table tbody,
  .budget-planner-table tr,
  .budget-planner-table th,
  .budget-planner-table td {
    display: block;
  }

  .budget-planner-table thead {
    display: none;
  }

  .budget-planner-table tr {
    border: 1px solid var(--line);
    border-radius: 18px;
    margin-bottom: 12px;
    padding: 12px;
    background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  }

  .budget-planner-table th,
  .budget-planner-table td {
    border: 0;
    padding: 8px 0;
  }

  .budget-planner-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .legal-grid,
  .legal-list-grid {
    grid-template-columns: 1fr;
  }

  .member-status-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .member-status-metrics div {
    padding: 7px 8px;
  }

  .member-status-metrics span {
    font-size: 0.66rem;
  }

  .topbar,
  .advertiser-console-header,
  .admin-topbar,
  .admin-top-actions,
  .admin-section-heading,
  .admin-card-head,
  .advertiser-header-actions,
  .advertiser-quick-actions,
  .member-status-account,
  .member-status-actions,
  .admin-row-actions,
  .account-tools,
  .panel-heading,
  .section-header,
  .section-header-actions,
  .section-link-row,
  .action-card,
  .ledger-row,
  .referral-row,
  .payout-row,
  .campaign-row,
  .admin-row,
  .anonymous-record-row,
  .viewer-topbar,
  .viewer-meta,
  .ad-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .member-status-bar {
    position: static;
    padding: 12px 18px;
  }

  .member-status-account,
  .member-status-actions,
  .admin-top-actions,
  .admin-row-actions,
  .advertiser-quick-actions,
  .advertiser-quick-actions .text-button,
  .advertiser-quick-actions .primary-button,
  .member-status-actions .text-button {
    width: 100%;
  }

  .member-status-actions {
    align-items: stretch;
  }

  .ad-actions {
    display: flex;
  }

  .section-header-actions,
  .section-link-row {
    align-items: stretch;
    width: 100%;
  }

  .section-header-actions .text-button,
  .section-header-actions .primary-button,
  .section-link-row .text-button,
  .overview-link-panel .text-button {
    width: 100%;
  }

  .toolkit-subheader {
    align-items: stretch;
    flex-direction: column;
  }

  .promo-tab-row,
  .promo-actions {
    width: 100%;
  }

  .social-template-card {
    grid-template-rows: auto auto auto auto;
  }

  .social-template-card p {
    min-height: 0;
  }

  .social-template-card .promo-actions {
    grid-template-columns: 1fr;
  }

  .promo-url {
    white-space: normal;
    word-break: break-all;
  }

  .quick-action-button {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .celebration-copy strong {
    font-size: 2.1rem;
  }

  .ptc-ad-id {
    justify-items: start;
  }

  .ptc-ad-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .action-card .primary-button,
  .small-button {
    width: 100%;
    margin-left: 0;
  }

  .topbar h1,
  .auth-copy h1 {
    font-size: 2rem;
  }

  .metric-card,
  .panel,
  .welcome-panel,
  .onboarding-checklist-panel,
  .next-action-card,
  .signup-card,
  .auth-panel {
    padding: 16px;
  }

  .account-tools,
  .account-chip,
  .theme-toggle,
  .next-action .text-button,
  .next-action .primary-button,
  .onboarding-step .text-button,
  #statusLogoutButton,
  #statusHelpButton,
  #logoutButton {
    width: 100%;
  }

  .next-action {
    grid-template-columns: 1fr;
  }

  .safety-strip {
    display: grid;
  }

  .viewer-test-banner {
    padding: 4px 8px;
    font-size: 0.67rem;
  }

  .viewer-shell {
    grid-template-rows: auto auto auto minmax(420px, auto) auto auto;
    gap: 8px;
    padding: 10px;
  }

  .viewer-panel {
    padding: 10px;
  }

  .viewer-meta {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .viewer-meta h1 {
    font-size: 1.18rem;
  }

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

  .viewer-status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .viewer-status-strip span {
    padding: 6px 5px;
    font-size: 0.65rem;
  }

  .viewer-actions .primary-button,
  .viewer-actions .text-button {
    flex: 1 1 140px;
  }

  .ad-frame {
    height: max(860px, 86vh);
    min-height: 860px;
  }

  .ad-frame-shell {
    min-height: 860px;
  }

  .reward-celebration {
    inset: 0;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 12px 18px;
  }

  .celebration-copy {
    margin-top: 52px;
    border-radius: 18px;
    padding: 14px 12px 15px;
  }

  .celebration-copy p {
    font-size: 0.86rem;
  }

  .celebration-stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .celebration-burst {
    top: 12px;
    left: 50%;
    width: 54px;
    height: 54px;
  }

  .celebration-stats > div {
    min-height: 64px;
  }

  .help-drawer {
    justify-items: stretch;
  }

  .help-drawer-panel {
    width: 100%;
    padding: 18px;
  }

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

  .nav-item {
    min-width: 0;
  }

  .mobile-bottom-nav {
    position: fixed;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 35;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 6px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
  }

  .mobile-nav-item {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-height: 58px;
    border-radius: 8px;
    padding: 6px 4px;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 900;
    text-align: center;
  }

  .mobile-nav-item span {
    width: 24px;
    height: 24px;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
    color: var(--accent);
    font-size: 0.68rem;
  }

  .mobile-nav-item.is-active {
    background: color-mix(in srgb, var(--primary) 13%, var(--surface-2));
    color: var(--ink);
    box-shadow: inset 0 3px 0 var(--primary);
  }

  .mobile-nav-item.is-active span {
    background: color-mix(in srgb, var(--primary) 18%, var(--surface));
    color: var(--primary);
  }

  .row-actions {
    justify-content: flex-start;
  }

  .legal-header {
    align-items: stretch;
    flex-direction: column;
  }

  .landing-actions {
    flex-direction: column;
  }

  .landing-actions a,
  .hero-actions a {
    width: 100%;
  }

  .marketplace-stats-grid {
    grid-template-columns: 1fr;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .site-footer nav {
    justify-content: flex-start;
  }

  .advertiser-auth-copy h1,
  .advertiser-hero h1 {
    font-size: 2.2rem;
  }
}

/* Admin control center redesign */
.admin-shell {
  width: min(1640px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px 0 56px;
}

.admin-sidebar {
  position: sticky;
  top: 52px;
  display: grid;
  gap: 16px;
  max-height: calc(100vh - 70px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--soft-shadow);
}

.admin-brand-lockup {
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.admin-brand-lockup strong,
.admin-topbar strong {
  display: block;
}

.admin-sidebar-note {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--amber) 36%, var(--line));
  border-radius: var(--radius);
  padding: 12px;
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}

.admin-sidebar-note span,
.admin-table-helper,
.admin-table-footer,
.admin-muted,
.admin-note-list span,
.admin-choice-list span {
  color: var(--muted);
}

.admin-workspace {
  display: grid;
  min-width: 0;
  gap: 16px;
}

.admin-menu-button {
  display: none;
}

.admin-topbar {
  position: sticky;
  top: 42px;
  z-index: 12;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(14px);
}

.admin-nav {
  display: grid;
  gap: 6px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.admin-nav-item {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  border-radius: var(--radius);
  padding: 11px 12px;
  text-align: left;
}

.admin-hero {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.32fr);
  padding: 18px;
}

.admin-hero h1 {
  font-size: 2.1rem;
}

.admin-stat-grid {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.admin-stat-card {
  min-height: 104px;
}

.admin-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.62fr);
}

.admin-sticky-heading {
  position: sticky;
  top: 112px;
  z-index: 9;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(14px);
}

.admin-filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.admin-filter-row input,
.admin-filter-row select {
  min-width: min(270px, 100%);
}

.admin-table-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.admin-table-helper {
  margin: 0;
  font-weight: 800;
}

.admin-table-wrap {
  border-radius: var(--radius);
}

.admin-table {
  min-width: 1060px;
  font-size: 0.86rem;
}

.admin-table th,
.admin-table td {
  padding: 10px 11px;
}

.admin-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.admin-table th {
  width: auto;
}

.admin-table input {
  min-width: 108px;
  padding: 9px 10px;
}

.admin-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface);
}

.admin-accounting-filter-row,
.admin-accounting-export-actions {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.admin-accounting-filter-row input,
.admin-accounting-filter-row select,
.admin-accounting-export-actions input {
  min-width: min(260px, 100%);
}

.admin-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 11px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

.admin-inline-check input {
  min-width: 0;
}

.admin-accounting-ledger-card {
  gap: 12px;
}

.admin-accounting-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.admin-table-accountingLedger,
.admin-table-accountingExports,
.admin-table-accountingDrawer {
  min-width: 1380px;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-table-accountingLedger th,
.admin-table-accountingLedger td,
.admin-table-accountingExports th,
.admin-table-accountingExports td,
.admin-table-accountingDrawer th,
.admin-table-accountingDrawer td {
  padding: 13px 14px;
  vertical-align: top;
  line-height: 1.35;
}

.admin-table-accountingLedger tbody tr,
.admin-table-accountingExports tbody tr,
.admin-table-accountingDrawer tbody tr {
  min-height: 68px;
}

.admin-table-accountingLedger th:nth-child(1) {
  min-width: 160px;
}

.admin-table-accountingLedger th:nth-child(2) {
  min-width: 180px;
}

.admin-table-accountingLedger th:nth-child(3) {
  min-width: 230px;
}

.admin-table-accountingLedger th:nth-child(4) {
  min-width: 230px;
}

.admin-table-accountingLedger th:nth-child(5) {
  min-width: 280px;
}

.admin-table-accountingLedger th:nth-child(6),
.admin-table-accountingLedger th:nth-child(7) {
  min-width: 130px;
}

.admin-table-accountingLedger th:nth-child(8),
.admin-table-accountingLedger th:nth-child(9) {
  min-width: 130px;
}

.admin-table-accountingLedger th:nth-child(10) {
  min-width: 180px;
}

.admin-table-accountingLedger th:nth-child(11) {
  min-width: 96px;
}

.admin-accounting-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-accounting-stack strong {
  color: var(--ink);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.admin-accounting-stack span {
  color: var(--text);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.admin-accounting-stack small,
.admin-accounting-description small {
  color: var(--muted);
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

.admin-accounting-description {
  display: grid;
  gap: 4px;
  min-width: 0;
  max-width: 340px;
  overflow-wrap: anywhere;
}

.admin-money-cell {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.admin-accounting-pagination {
  flex-wrap: wrap;
}

.admin-accounting-pagination label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.admin-accounting-pagination select {
  min-width: 88px;
}

.admin-row-actions {
  gap: 7px;
}

.admin-row-actions .text-button,
.admin-row-actions .primary-button {
  min-width: auto;
  padding: 8px 10px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.admin-subtabs {
  display: inline-flex;
  width: fit-content;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px;
  background: var(--surface);
}

.admin-subtab {
  border: 0;
  border-radius: 7px;
  padding: 9px 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.admin-subtab.is-active {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-2));
  color: var(--ink);
}

.admin-queue-list,
.admin-compact-list,
.admin-note-list,
.admin-check-list,
.admin-choice-list {
  display: grid;
  gap: 8px;
}

.admin-review-mini-check {
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 8px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.admin-review-mini-check small {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  font-size: 0.76rem;
  line-height: 1.35;
}

.admin-review-mini-check.is-warning,
.admin-review-mini-check.is-manual_review,
.admin-review-mini-check.is-requires_staging,
.admin-review-mini-check.is-requires_production,
.admin-review-mini-check.is-external_provider_required {
  border-color: color-mix(in srgb, var(--amber) 38%, var(--line));
}

.admin-review-mini-check.is-failed {
  border-color: color-mix(in srgb, var(--red) 44%, var(--line));
}

.admin-review-mini-check.is-passed {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
}

.admin-campaign-review-panel,
.admin-review-finding-list {
  display: grid;
  gap: 10px;
}

.admin-simple-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  line-height: 1.45;
}

.admin-review-finding {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.admin-review-finding summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.admin-review-finding summary::-webkit-details-marker {
  display: none;
}

.admin-review-finding p {
  margin: 0;
  color: var(--text);
  line-height: 1.35;
}

.admin-review-finding small {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  font-size: 0.76rem;
  line-height: 1.35;
}

.admin-review-finding.is-warning,
.admin-review-finding.is-needs_review,
.admin-review-finding.is-simulated,
.admin-review-finding.is-limited_pass,
.admin-review-finding.is-scan_error {
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
}

.admin-review-finding.is-failed {
  border-color: color-mix(in srgb, var(--red) 46%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
}

.admin-review-finding.is-passed,
.admin-review-finding.is-verified_pass {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
}

.admin-review-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}

.admin-review-hero h3 {
  margin: 2px 0 4px;
  font-size: 1rem;
}

.admin-review-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.admin-local-test-banner {
  border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--line));
  border-radius: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--amber) 10%, var(--surface-2));
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.35;
}

.admin-review-top-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.admin-review-top-summary article {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.admin-review-top-summary span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-review-top-summary strong {
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.admin-review-cockpit-summary {
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 96%, rgba(8, 12, 20, 0.36));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.admin-review-cockpit-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.admin-review-cockpit-title h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.2;
}

.admin-review-cockpit-title p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.admin-review-cockpit-section,
.admin-review-decision-panel {
  display: grid;
  gap: 10px;
}

details.admin-review-cockpit-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

details.admin-review-cockpit-section > summary::-webkit-details-marker {
  display: none;
}

.admin-review-attention-list,
.admin-review-finding-groups {
  display: grid;
  gap: 8px;
}

.admin-review-attention-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.admin-review-attention-item strong,
.admin-review-attention-item small {
  display: block;
  overflow-wrap: anywhere;
}

.admin-review-attention-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.admin-review-attention-item.is-blocked,
.admin-review-attention-item.is-failed,
.admin-review-cockpit-section.is-danger {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line));
}

.admin-review-attention-item.is-warning,
.admin-review-attention-item.is-manual_review {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
}

.admin-review-attention-item.is-passed {
  border-color: color-mix(in srgb, var(--success) 38%, var(--line));
}

.admin-review-report-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 12px;
  align-items: start;
  padding-bottom: 18px;
}

.admin-review-report-layout.is-owner-cockpit {
  grid-template-columns: minmax(0, min(100%, 1040px));
  justify-content: center;
}

.admin-review-report-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-review-report-rail {
  position: sticky;
  top: 10px;
  z-index: 4;
  min-width: 0;
}

.admin-review-report-header,
.admin-review-report-section,
.admin-review-report-details,
.admin-review-decision-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 94%, rgba(8, 12, 20, 0.22));
}

.admin-review-report-header {
  display: grid;
  gap: 9px;
}

.admin-review-report-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.admin-review-report-title h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.2;
}

.admin-review-report-title p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.admin-review-report-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 6px;
}

.admin-review-report-metrics span {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 6px;
  padding: 6px 7px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.admin-review-report-metrics strong {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-review-report-metrics em {
  color: var(--ink);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.admin-review-report-table-wrap {
  margin: 0;
}

.admin-review-report-table {
  min-width: 780px;
  font-size: 0.78rem;
}

.admin-review-report-table th,
.admin-review-report-table td {
  padding: 7px 8px;
  vertical-align: top;
}

.admin-review-report-table td:nth-child(5) {
  display: grid;
  gap: 4px;
  min-width: 190px;
}

.admin-review-report-table td:nth-child(5) span {
  line-height: 1.28;
}

.admin-review-report-table tr.is-blocked td:first-child {
  border-left: 3px solid var(--danger);
}

.admin-review-report-table tr.is-warning td:first-child,
.admin-review-report-table tr.is-needs_admin_review td:first-child {
  border-left: 3px solid var(--warning);
}

.admin-review-report-table tr.is-passed td:first-child {
  border-left: 3px solid var(--success);
}

.admin-review-evidence-link {
  width: max-content;
  padding: 3px 7px;
  font-size: 0.72rem;
}

.admin-review-scanner-compact,
.admin-review-report-details {
  display: grid;
  gap: 8px;
}

.admin-review-scanner-compact {
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.admin-review-scanner-compact > summary,
.admin-review-report-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.admin-review-scanner-compact > summary::-webkit-details-marker,
.admin-review-report-details > summary::-webkit-details-marker {
  display: none;
}

.admin-review-scanner-compact > summary strong,
.admin-review-report-details > summary strong {
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.25;
}

.admin-review-scanner-compact > summary span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.admin-review-scanner-compact .admin-review-scan-progress {
  margin-top: 0;
}

.admin-review-finding-list-compact {
  gap: 6px;
}

.admin-review-decision-panel {
  position: static;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 96%, rgba(8, 12, 20, 0.28));
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.14);
}

.admin-review-decision-panel .admin-section-title-row {
  gap: 8px;
}

.admin-review-decision-panel .admin-row-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.admin-review-decision-panel .admin-row-actions > * {
  justify-content: center;
  width: 100%;
}

.admin-review-action-message {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(15, 23, 42, 0.5);
  font-size: 0.9rem;
  font-weight: 800;
}

.admin-review-action-message.is-success {
  border-color: rgba(45, 212, 128, 0.45);
  color: #b7f7cf;
  background: rgba(16, 185, 129, 0.12);
}

.admin-review-action-message.is-info {
  border-color: rgba(56, 189, 248, 0.45);
  color: #bae6fd;
  background: rgba(14, 165, 233, 0.12);
}

.admin-review-action-message.is-error {
  border-color: rgba(251, 113, 133, 0.48);
  color: #fecdd3;
  background: rgba(244, 63, 94, 0.12);
}

.admin-owner-summary-card,
.admin-owner-cockpit-section {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 95%, rgba(8, 12, 20, 0.22));
  min-width: 0;
}

.admin-owner-summary-card.is-blocked {
  border-color: color-mix(in srgb, var(--danger) 56%, var(--line));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--danger) 86%, transparent);
}

.admin-owner-summary-card.is-ready {
  border-color: color-mix(in srgb, var(--success) 48%, var(--line));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--success) 72%, transparent);
}

.admin-owner-review-pause-banner {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--warning) 58%, var(--line));
  border-radius: 10px;
  padding: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--warning) 12%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--warning) 86%, transparent);
}

.admin-owner-review-pause-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.admin-owner-review-pause-head h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: normal;
}

.admin-owner-review-pause-head p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.42;
}

.admin-owner-review-pause-facts {
  display: grid;
  grid-template-columns: minmax(210px, 1.6fr) repeat(4, minmax(105px, 1fr));
  gap: 8px;
  min-width: 0;
}

.admin-owner-review-pause-facts article {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 8px;
  padding: 9px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.admin-owner-review-pause-facts span,
.admin-owner-review-finding dt {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.admin-owner-review-pause-facts strong,
.admin-owner-review-pause-facts small {
  overflow-wrap: anywhere;
  word-break: normal;
}

.admin-owner-review-findings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 9px;
  min-width: 0;
}

.admin-owner-review-finding {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--line));
  border-radius: 8px;
  padding: 11px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}

.admin-owner-review-finding.is-blocked {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--line));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--danger) 78%, transparent);
}

.admin-owner-review-finding strong,
.admin-owner-review-finding p,
.admin-owner-review-finding dd {
  overflow-wrap: anywhere;
  word-break: normal;
}

.admin-owner-review-finding p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.admin-owner-review-finding dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-owner-review-finding dl > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-owner-review-finding dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.35;
}

.admin-owner-review-decision-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 8, 19, 0.9);
  backdrop-filter: blur(12px);
}

.admin-owner-review-decision-panel {
  width: min(620px, 100%);
  display: grid;
  gap: 20px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--primary) 46%, var(--line));
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--fx-shadow-major);
}

.admin-owner-review-decision-panel h2,
.admin-owner-review-decision-panel p {
  margin: 6px 0 0;
}

.admin-owner-review-decision-panel p,
.admin-owner-review-decision-reason small {
  color: var(--muted);
}

.admin-owner-review-decision-reason {
  display: grid;
  gap: 8px;
  font-weight: 700;
}

.admin-owner-review-decision-reason textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
}

.admin-owner-review-decision-confirm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  line-height: 1.5;
}

.admin-owner-review-decision-confirm input {
  margin-top: 4px;
}

.admin-owner-review-decision-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.admin-owner-summary-head,
.admin-owner-finding-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.admin-owner-summary-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1.15;
}

.admin-owner-summary-head p,
.admin-owner-finding-head small {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.38;
}

.admin-owner-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.admin-owner-summary-grid article {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.admin-owner-summary-grid article:nth-child(2),
.admin-owner-summary-grid article:nth-child(9) {
  grid-column: span 2;
}

.admin-owner-summary-grid span,
.admin-owner-evidence-preview em {
  color: var(--muted);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-owner-summary-grid strong,
.admin-owner-evidence-preview b {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.admin-review-cta-summary-card {
  display: grid;
  gap: 5px;
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 8px;
  padding: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 11%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)),
    color-mix(in srgb, var(--surface-2) 80%, transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-review-cta-summary-card:hover,
.admin-review-cta-summary-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 2px;
}

.admin-review-cta-summary-card strong {
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.2;
}

.admin-review-cta-summary-card small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-review-cta-summary-card.is-warning {
  border-color: color-mix(in srgb, var(--warning) 52%, var(--line));
}

.admin-review-cta-summary-card.is-blocked {
  border-color: color-mix(in srgb, var(--danger) 56%, var(--line));
}

.admin-review-decision-grid,
.admin-review-attention-groups,
.admin-screenshot-proof-grid {
  display: grid;
  gap: 9px;
  min-width: 0;
}

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

.admin-review-decision-grid article {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 8px;
  padding: 11px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.admin-review-decision-grid article.is-ready {
  border-color: color-mix(in srgb, var(--success) 46%, var(--line));
}

.admin-review-decision-grid article.is-review {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
}

.admin-review-decision-grid article.is-blocked {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--line));
}

.admin-review-decision-grid span,
.admin-review-attention-bucket .admin-section-title-row span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-review-decision-grid strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.18;
}

.admin-review-decision-grid small {
  color: var(--muted);
  line-height: 1.35;
}

.admin-review-attention-groups {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-review-attention-bucket {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 8px;
  padding: 9px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.admin-review-attention-actions {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.admin-screenshot-proof-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-screenshot-proof-card,
.admin-screenshot-proof-card > .admin-screenshot-card {
  min-width: 0;
  height: 100%;
}

.admin-screenshot-proof-card > .admin-screenshot-card {
  margin: 0;
}

.admin-screenshot-card.is-missing,
.admin-screenshot-proof-card.is-missing {
  display: grid;
  gap: 8px;
  border: 1px dashed color-mix(in srgb, var(--warning) 54%, var(--line));
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--warning) 8%, var(--surface-2));
}

.admin-screenshot-missing-thumb {
  display: grid;
  min-height: 112px;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.admin-review-sticky-actions {
  position: sticky;
  top: 8px;
  z-index: 7;
}

.admin-owner-summary-actions .admin-row-actions {
  align-items: center;
  justify-content: flex-start;
}

.admin-owner-inline-scan {
  display: grid;
  gap: 3px;
  flex: 1 1 240px;
  max-width: 360px;
  min-width: 190px;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 8px;
  padding: 5px 7px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.admin-owner-inline-scan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.admin-owner-inline-scan-head strong,
.admin-owner-inline-scan-head span {
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
}

.admin-owner-inline-scan-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-owner-inline-scan-head span {
  color: var(--muted);
}

.admin-owner-inline-scan-bar {
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--line) 58%, transparent);
}

.admin-owner-inline-scan-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--primary) 72%, var(--success)));
}

.admin-owner-inline-scan.is-running .admin-owner-inline-scan-bar span {
  background: linear-gradient(90deg, var(--success), var(--primary), var(--success));
  background-size: 180% 100%;
  animation: admin-owner-inline-scan-flow 1.5s linear infinite;
}

.admin-owner-inline-scan small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes admin-owner-inline-scan-flow {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 180% 0;
  }
}

.admin-owner-why,
.admin-owner-evidence-drawer {
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 8px;
  padding: 9px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.admin-owner-why > summary,
.admin-owner-evidence-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.admin-owner-why > summary::-webkit-details-marker,
.admin-owner-evidence-drawer > summary::-webkit-details-marker {
  display: none;
}

.admin-owner-why p {
  margin: 8px 0;
  color: var(--muted);
  line-height: 1.42;
}

.admin-owner-card-group,
.admin-owner-evidence-drawers {
  display: grid;
  gap: 9px;
}

.admin-owner-finding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 9px;
  min-width: 0;
}

.admin-owner-finding-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.admin-owner-finding-card.is-blocked {
  border-color: color-mix(in srgb, var(--danger) 52%, var(--line));
}

.admin-owner-finding-card.is-warning,
.admin-owner-finding-card.is-needs_admin_review {
  border-color: color-mix(in srgb, var(--warning) 48%, var(--line));
}

.admin-owner-finding-card.is-passed {
  border-color: color-mix(in srgb, var(--success) 42%, var(--line));
}

.admin-owner-finding-head strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.admin-owner-evidence-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.admin-owner-evidence-preview span {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 6px;
  padding: 6px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.admin-owner-proof-button {
  width: max-content;
}

.admin-owner-event-table {
  min-width: 900px;
}

@media (max-width: 1100px) {
  .admin-review-report-layout {
    grid-template-columns: 1fr;
  }

  .admin-review-report-rail {
    position: static;
  }
}

@media (max-width: 760px) {
  .admin-review-cockpit-summary,
  .admin-review-decision-panel {
    position: static;
  }

  .admin-review-cockpit-title,
  .admin-review-report-title,
  .admin-review-attention-item,
  .admin-owner-summary-head,
  .admin-owner-finding-head {
    display: grid;
  }

  .admin-review-report-metrics,
  .admin-owner-summary-grid,
  .admin-owner-evidence-preview,
  .admin-review-decision-grid,
  .admin-review-attention-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .admin-owner-inline-scan {
    flex-basis: 100%;
    max-width: 100%;
  }

  .admin-owner-summary-grid article:nth-child(2),
  .admin-owner-summary-grid article:nth-child(9) {
    grid-column: 1 / -1;
  }

  .admin-owner-review-pause-head {
    display: grid;
  }

  .admin-owner-review-pause-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-owner-review-pause-facts article:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .admin-owner-summary-grid,
  .admin-owner-evidence-preview,
  .admin-owner-finding-grid,
  .admin-review-decision-grid,
  .admin-review-attention-groups,
  .admin-screenshot-proof-grid {
    grid-template-columns: 1fr;
  }

  .admin-review-sticky-actions {
    position: static;
  }

  .admin-owner-review-pause-facts,
  .admin-owner-review-findings,
  .admin-owner-review-finding dl {
    grid-template-columns: 1fr;
  }

  .admin-owner-review-pause-facts article:first-child {
    grid-column: auto;
  }

  .admin-owner-review-decision-panel {
    padding: 18px;
  }

  .admin-owner-review-decision-actions {
    display: grid;
  }

  .admin-screenshot-lightbox {
    padding: 8px;
  }

  .admin-screenshot-lightbox-panel {
    width: 100%;
    max-height: 98vh;
    padding: 9px;
  }

  .admin-screenshot-lightbox-header,
  .admin-screenshot-group-heading {
    display: grid;
  }

  .admin-screenshot-lightbox-actions {
    justify-content: flex-start;
  }

  .admin-screenshot-lightbox-stage {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 6px;
  }

  .admin-screenshot-lightbox-stage img {
    max-height: calc(98vh - 250px);
  }

  .admin-screenshot-lightbox-arrow {
    font-size: 1.9rem;
  }
}

.admin-alert-inline {
  border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--line));
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}

.admin-alert-inline.is-danger {
  border-color: color-mix(in srgb, var(--red) 48%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
}

.admin-alert-inline p {
  margin: 4px 0 0;
  color: var(--text);
}

.admin-compact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
}

button.admin-compact-row:hover,
.admin-queue-row:hover {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
}

.admin-compact-row span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-compact-row small {
  display: block;
  margin-top: 4px;
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  font-size: 0.76rem;
  line-height: 1.35;
}

.admin-launch-status-card,
.admin-launch-check-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 8px;
  padding: 18px;
  background: color-mix(in srgb, var(--surface) 92%, #080d14);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

.admin-launch-status-card h3,
.admin-launch-check-card h3 {
  margin: 10px 0 8px;
  font-size: 1.1rem;
}

.admin-launch-status-card p {
  max-width: 68ch;
  margin: 0 0 12px;
  color: var(--text);
  line-height: 1.55;
}

.admin-launch-status-card small {
  display: block;
  color: var(--muted);
}

.admin-launch-check-card p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.5;
}

.admin-launch-readiness-group .admin-compact-row,
.admin-launch-final-card .admin-compact-row {
  align-items: flex-start;
}

.admin-launch-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong, #111827) 82%, #000);
}

.admin-launch-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #35c2a1, #d7b56d);
}

.admin-launch-section-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 12px;
  align-items: end;
  margin: 12px 0;
}

.admin-launch-section-toolbar label,
.admin-launch-section-toolbar small {
  color: var(--muted);
}

.admin-launch-section-toolbar select {
  width: 100%;
  margin-top: 6px;
}

.admin-launch-item-grid {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.admin-launch-check-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.admin-launch-check-item span {
  line-height: 1.35;
}

#adminLaunchChecklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 820px) {
  #adminLaunchChecklist {
    grid-template-columns: 1fr;
  }

  .admin-launch-section-toolbar {
    grid-template-columns: 1fr;
  }
}

.admin-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 38;
  background: rgba(3, 8, 13, 0.54);
  backdrop-filter: blur(3px);
}

.admin-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 39;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(560px, 94vw);
  border-left: 1px solid var(--line);
  background: var(--surface);
  box-shadow: -28px 0 60px rgba(0, 0, 0, 0.28);
}

.admin-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 18px;
}

.admin-drawer-header h2 {
  margin: 4px 0 0;
}

.admin-drawer-content {
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: auto;
  padding: 18px;
}

.admin-drawer-section {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-2);
}

.admin-drawer-section h3 {
  margin: 0;
}

.admin-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-detail-list div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px;
  background: var(--surface);
}

.admin-detail-list dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-detail-list dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 850;
}

.admin-detail-list a {
  color: var(--primary);
}

.admin-note-list article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface);
}

.admin-note-list p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.admin-check-list span,
.admin-choice-list span {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  background: var(--surface);
}

.admin-settings-form {
  gap: 16px;
}

.admin-settings-section {
  display: grid;
  grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr);
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-2);
}

.admin-settings-section h2 {
  margin: 4px 0 0;
}

.admin-email-preview-block {
  display: grid;
  gap: 10px;
}

.admin-email-preview-block div {
  display: grid;
  gap: 4px;
}

.admin-email-preview-block small {
  color: var(--muted);
}

.admin-email-preview-block pre {
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 82%, #000);
  color: var(--text);
  font: 0.88rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.admin-email-command-panel {
  display: grid;
  gap: 14px;
}

.admin-email-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px;
}

.admin-email-status-item {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 22%, var(--line));
  border-radius: 8px;
  padding: 12px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-sky) 9%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface) 88%, transparent);
}

.admin-email-status-item span,
.admin-email-status-item small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.45;
}

.admin-email-status-item > span {
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.admin-email-status-item strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 0.98rem;
  line-height: 1.35;
}

.admin-email-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 34%, var(--line));
  border-radius: 999px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--brand-gold) 10%, transparent);
  color: color-mix(in srgb, var(--brand-gold) 88%, white);
  font-size: 0.76rem;
  font-weight: 950;
}

.admin-email-pill.is-ready {
  border-color: color-mix(in srgb, var(--brand-mint) 42%, var(--line));
  background: color-mix(in srgb, var(--brand-mint) 12%, transparent);
  color: color-mix(in srgb, var(--brand-mint) 88%, white);
}

.admin-email-pill.is-blocked {
  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: color-mix(in srgb, var(--red) 86%, white);
}

.admin-email-test-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(260px, 1fr);
  gap: 14px;
  align-items: end;
  border: 1px solid color-mix(in srgb, var(--brand-mint) 24%, var(--line));
  border-radius: 8px;
  padding: 14px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--brand-mint) 10%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-2) 90%, transparent);
}

.admin-email-test-panel h3 {
  margin: 4px 0 6px;
}

.admin-email-test-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.admin-email-test-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.admin-email-test-form label {
  margin: 0;
}

.admin-email-frequency-panel {
  display: grid;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--brand-mint) 24%, var(--line));
  border-radius: 8px;
  padding: 14px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-mint) 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 90%, transparent);
}

.admin-email-frequency-heading h2,
.admin-email-frequency-card h3,
.admin-email-frequency-activity h3 {
  margin: 4px 0 6px;
}

.admin-email-frequency-heading p,
.admin-email-frequency-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.admin-email-frequency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 12px;
}

.admin-email-frequency-card,
.admin-email-frequency-activity,
.admin-email-frequency-notice {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 22%, var(--line));
  border-radius: 8px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.admin-email-frequency-notice {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.admin-email-frequency-notice.is-synced {
  border-color: color-mix(in srgb, var(--brand-green) 42%, var(--line));
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--brand-green) 16%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface) 90%, transparent);
}

.admin-email-frequency-notice.is-error {
  border-color: color-mix(in srgb, var(--danger) 46%, var(--line));
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--danger) 12%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface) 90%, transparent);
}

.admin-email-frequency-notice strong,
.admin-email-frequency-notice span {
  display: block;
}

.admin-email-frequency-notice span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.admin-email-frequency-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.admin-email-frequency-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 10px;
}

.admin-email-frequency-fields label,
.admin-email-frequency-card .checkbox-line {
  margin: 0;
}

.admin-email-frequency-preview {
  display: grid;
  gap: 10px;
}

.admin-email-frequency-preview:empty {
  display: none;
}

.admin-email-frequency-preview-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--brand-mint) 25%, var(--line));
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--brand-mint) 8%, transparent);
}

.admin-email-frequency-preview-summary span {
  color: var(--muted);
  font-weight: 800;
}

.admin-email-log-panel {
  display: grid;
  gap: 14px;
}

.admin-email-log-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.admin-email-log-tabs button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--muted);
  font-weight: 900;
}

.admin-email-log-tabs button.is-active {
  border-color: color-mix(in srgb, var(--brand-mint) 44%, var(--line));
  background: color-mix(in srgb, var(--brand-mint) 14%, transparent);
  color: color-mix(in srgb, var(--brand-mint) 88%, white);
}

.admin-email-log-summary .stat-card,
.admin-email-log-card {
  min-height: 112px;
}

.admin-email-webhook-debug {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 22%, var(--line));
  border-radius: 8px;
  padding: 14px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-sky) 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 88%, transparent);
}

.admin-email-webhook-debug h3,
.admin-email-webhook-debug p {
  margin: 4px 0 0;
}

.admin-email-webhook-debug p {
  color: var(--muted);
  line-height: 1.45;
}

.admin-email-log-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(7, minmax(130px, 1fr));
  gap: 10px;
  align-items: end;
}

.admin-email-log-search,
.admin-email-log-filter-actions {
  grid-column: span 2;
}

.admin-email-log-filters label {
  margin: 0;
}

.admin-email-log-filter-actions {
  align-self: end;
  justify-content: flex-start;
}

.admin-email-log-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-email-log-table {
  min-width: 980px;
}

.admin-email-log-table th,
.admin-email-log-table td {
  font-size: 0.86rem;
  vertical-align: top;
}

.admin-email-log-table td:nth-child(2),
.admin-email-log-table td:nth-child(4) {
  max-width: 260px;
  overflow-wrap: anywhere;
}

.admin-email-status-cell {
  display: grid;
  gap: 5px;
}

.admin-email-status-cell > span {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-email-status-cell small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.admin-email-log-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.admin-email-log-pagination div:first-child {
  display: grid;
  gap: 3px;
}

.admin-email-log-pagination span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.admin-email-log-pagination label {
  max-width: 150px;
  margin: 0;
}

.admin-email-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

.admin-email-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.admin-email-log-timeline {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-email-log-timeline li {
  display: grid;
  gap: 3px;
  border-left: 3px solid color-mix(in srgb, var(--brand-mint) 50%, var(--line));
  padding: 8px 0 8px 12px;
}

.admin-email-log-timeline span,
.admin-email-log-timeline small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-email-drawer-pre {
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 82%, #000);
  white-space: pre-wrap;
  font: 0.78rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.admin-email-raw-history summary {
  cursor: pointer;
  color: var(--brand-mint);
  font-weight: 900;
}

.admin-email-raw-history pre {
  max-width: 420px;
  max-height: 240px;
  overflow: auto;
  margin: 8px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 82%, #000);
  color: var(--text);
  white-space: pre-wrap;
  font: 0.74rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.admin-email-details,
.admin-email-toggle-group {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.admin-email-details summary,
.admin-email-toggle-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.admin-email-details summary::-webkit-details-marker,
.admin-email-toggle-group summary::-webkit-details-marker {
  display: none;
}

.admin-email-details summary span,
.admin-email-toggle-group summary span {
  font-weight: 950;
}

.admin-email-details summary small,
.admin-email-toggle-group summary small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: right;
}

.admin-email-details[open],
.admin-email-toggle-group[open] {
  border-color: color-mix(in srgb, var(--brand-sky) 30%, var(--line));
}

.admin-email-details .admin-detail-list {
  padding: 0 12px 12px;
}

.admin-email-automation-panel {
  grid-template-columns: 1fr;
}

.admin-email-automation-intro p,
.admin-email-automation-review-heading p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.admin-email-automation-review {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 24%, var(--line));
  border-radius: 8px;
  padding: 14px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-sky) 10%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface) 88%, transparent);
}

.admin-email-automation-review-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-email-automation-review-heading h3 {
  margin: 4px 0 0;
}

.admin-email-automation-review-heading > strong {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--brand-mint) 34%, var(--line));
  border-radius: 999px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--brand-mint) 10%, transparent);
  color: color-mix(in srgb, var(--brand-mint) 86%, white);
  font-size: 0.8rem;
}

.admin-email-automation-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 12px;
}

.admin-email-audience-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-email-audience-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.admin-email-audience-panel h4 {
  margin: 4px 0 0;
}

.admin-email-audience-panel > header small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: right;
}

.admin-email-automation-list {
  display: grid;
  gap: 8px;
}

.admin-email-automation-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.admin-email-automation-card.is-enabled {
  border-color: color-mix(in srgb, var(--brand-mint) 28%, var(--line));
}

.admin-email-automation-card.is-paused {
  border-color: color-mix(in srgb, var(--brand-gold) 30%, var(--line));
}

.admin-email-automation-card.is-required {
  border-color: color-mix(in srgb, var(--brand-sky) 30%, var(--line));
}

.admin-email-automation-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-email-automation-card h5 {
  margin: 3px 0 0;
  font-size: 0.98rem;
}

.admin-email-automation-card p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.admin-email-automation-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-email-automation-card dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-email-automation-card dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}

.admin-email-automation-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-email-automation-lock {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.status-required {
  border-color: color-mix(in srgb, var(--brand-sky) 36%, var(--line));
  background: color-mix(in srgb, var(--brand-sky) 12%, transparent);
  color: color-mix(in srgb, var(--brand-sky) 84%, white);
}

.status-enabled {
  border-color: color-mix(in srgb, var(--brand-mint) 38%, var(--line));
  background: color-mix(in srgb, var(--brand-mint) 12%, transparent);
  color: color-mix(in srgb, var(--brand-mint) 84%, white);
}

.status-paused {
  border-color: color-mix(in srgb, var(--brand-gold) 38%, var(--line));
  background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
  color: color-mix(in srgb, var(--brand-gold) 86%, white);
}

.admin-email-switch-groups {
  display: grid;
  gap: 10px;
}

.admin-email-automation-panel .admin-email-preview-block {
  grid-column: 1 / -1;
  border-top: 1px solid color-mix(in srgb, var(--brand-sky) 18%, var(--line));
  padding-top: 12px;
}

.admin-email-center-panel {
  display: grid;
  gap: 14px;
}

.admin-email-automation-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.6fr) auto;
  gap: 12px;
  align-items: end;
}

.admin-email-automation-toolbar label {
  margin: 0;
}

.admin-email-automation-center {
  display: grid;
  gap: 10px;
}

.admin-email-all-section {
  display: grid;
  gap: 10px;
}

.admin-email-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-email-automation-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
}

.admin-email-automation-table th,
.admin-email-automation-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.admin-email-automation-table th {
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-email-automation-table td strong,
.admin-email-automation-table td small {
  display: block;
}

.admin-email-automation-table td small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.admin-email-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 260px;
}

.admin-email-center-row {
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.admin-email-center-row.is-enabled {
  border-color: color-mix(in srgb, var(--brand-mint) 28%, var(--line));
}

.admin-email-center-row.is-paused {
  border-color: color-mix(in srgb, var(--brand-gold) 30%, var(--line));
}

.admin-email-center-row.is-required {
  border-color: color-mix(in srgb, var(--brand-sky) 30%, var(--line));
}

.admin-email-center-row header,
.admin-email-center-row footer,
.admin-email-center-status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-email-center-row footer {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.admin-email-center-row h3 {
  margin: 3px 0 4px;
}

.admin-email-center-row p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.admin-email-center-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.admin-email-center-metrics span {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-email-center-metrics strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.82rem;
}

.admin-email-automation-editor {
  display: grid;
  gap: 14px;
}

.admin-email-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-email-editor-grid .is-wide {
  grid-column: 1 / -1;
}

.admin-email-variable-row,
.admin-email-schedule-grid,
.admin-email-chip-add {
  display: grid;
  gap: 10px;
}

.admin-email-variable-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  margin-top: 10px;
}

.admin-email-chip-editor {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.admin-email-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-email-chip {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 28%, var(--line));
  border-radius: 999px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--brand-sky) 10%, transparent);
  color: var(--text);
  font-weight: 850;
}

.admin-email-chip-add {
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-email-preview-output,
.admin-email-preview-result {
  display: grid;
  gap: 10px;
}

.admin-email-preview-result pre {
  max-height: 340px;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 82%, #000);
  color: var(--text);
  font: 0.84rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.admin-email-validation {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 34%, var(--line));
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--brand-gold) 10%, transparent);
  color: color-mix(in srgb, var(--brand-gold) 88%, white);
  font-weight: 850;
}

.admin-email-validation.is-error {
  border-color: color-mix(in srgb, var(--red) 38%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: color-mix(in srgb, var(--red) 86%, white);
}

.admin-email-toggle-group .checkbox-line,
.admin-email-toggle-group label:not(.checkbox-line) {
  margin: 0 12px 8px;
}

.admin-email-toggle-group .checkbox-line:last-child,
.admin-email-toggle-group label:last-child {
  margin-bottom: 12px;
}

.admin-email-toggle-group label:not(.checkbox-line) {
  display: grid;
  gap: 6px;
}

.admin-empty-state {
  min-height: 140px;
}

@media (max-width: 1120px) {
  .admin-shell {
    grid-template-columns: 224px minmax(0, 1fr);
  }

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

  .admin-dashboard-grid,
  .admin-hero,
  .admin-settings-section,
  .admin-email-test-panel,
  .admin-email-automation-panel,
  .admin-email-log-filters {
    grid-template-columns: 1fr;
  }

  .admin-email-log-search,
  .admin-email-log-filter-actions {
    grid-column: auto;
  }
}

@media (max-width: 880px) {
  .admin-email-log-table {
    min-width: 720px;
  }

  .admin-email-log-table th:nth-child(3),
  .admin-email-log-table td:nth-child(3),
  .admin-email-log-table th:nth-child(6),
  .admin-email-log-table td:nth-child(6) {
    display: none;
  }

  .admin-shell {
    display: block;
    width: min(100%, calc(100vw - 24px));
    padding: 12px 0 48px;
  }

  .admin-menu-button {
    display: inline-flex;
  }

  .admin-sidebar {
    position: fixed;
    top: 42px;
    left: 10px;
    z-index: 35;
    width: min(300px, calc(100vw - 20px));
    max-height: calc(100vh - 56px);
    transform: translateX(calc(-100% - 18px));
    transition: transform 160ms ease;
  }

  .admin-shell.is-nav-open .admin-sidebar {
    transform: translateX(0);
  }

  .admin-workspace {
    gap: 12px;
  }

  .admin-topbar {
    top: 38px;
    align-items: stretch;
    flex-direction: column;
  }

  .admin-top-actions,
  .admin-filter-row {
    justify-content: flex-start;
    width: 100%;
  }

  .admin-stat-grid,
  .admin-detail-list {
    grid-template-columns: 1fr;
  }

  .admin-email-test-form {
    grid-template-columns: 1fr;
  }

  .admin-email-details summary,
  .admin-email-toggle-group summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-email-automation-review-heading,
  .admin-email-audience-panel > header,
  .admin-email-automation-card footer {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-email-automation-review-heading > strong,
  .admin-email-audience-panel > header small {
    align-self: flex-start;
    text-align: left;
  }

  .admin-email-automation-card dl {
    grid-template-columns: 1fr;
  }

  .admin-email-details summary small,
  .admin-email-toggle-group summary small {
    text-align: left;
  }

  .admin-sticky-heading {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .admin-filter-row input,
  .admin-filter-row select,
  .admin-top-actions .text-button,
  .admin-top-actions .primary-button {
    width: 100%;
  }

  .admin-table {
    min-width: 920px;
  }

  .admin-table-footer,
  .admin-compact-row {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-drawer {
    width: 100vw;
  }
}

/* Premium marketplace redesign layer */
:root {
  color-scheme: dark;
  --bg: #060a12;
  --bg-soft: #070b16;
  --surface: rgba(17, 24, 39, 0.86);
  --surface-2: rgba(15, 23, 42, 0.92);
  --surface-3: #111827;
  --brand-ink: #f8fafc;
  --brand-mint: #22c55e;
  --brand-sky: #38bdf8;
  --brand-indigo: #7c8cff;
  --brand-gold: #facc15;
  --brand-coral: #fb7185;
  --ink: #f8fafc;
  --muted: #cbd5e1;
  --muted-2: #94a3b8;
  --line: rgba(255, 255, 255, 0.08);
  --strong-line: rgba(56, 189, 248, 0.28);
  --primary: #22c55e;
  --primary-dark: #16a34a;
  --accent: #38bdf8;
  --violet: #8b5cf6;
  --amber: #facc15;
  --red: #fb7185;
  --radius: 22px;
  --radius-lg: 28px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --soft-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  --premium-gradient: linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(56, 189, 248, 0.12));
}

body[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fb;
  --bg-soft: #eaf1f8;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-2: #ffffff;
  --surface-3: #f8fafc;
  --brand-ink: #0f172a;
  --ink: #0f172a;
  --muted: #475569;
  --muted-2: #64748b;
  --line: #d8e2ef;
  --strong-line: rgba(14, 116, 144, 0.26);
  --shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
  --soft-shadow: 0 12px 32px rgba(15, 23, 42, 0.09);
  --premium-gradient: linear-gradient(135deg, rgba(34, 197, 94, 0.11), rgba(14, 165, 233, 0.1));
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% -10%, rgba(34, 197, 94, 0.14), transparent 34rem),
    radial-gradient(circle at 82% 8%, rgba(56, 189, 248, 0.16), transparent 32rem),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  color: var(--ink);
  font-feature-settings: "cv02", "cv03", "cv04";
}

body[data-theme="light"] {
  background:
    radial-gradient(circle at 12% -6%, rgba(34, 197, 94, 0.16), transparent 34rem),
    radial-gradient(circle at 84% 6%, rgba(56, 189, 248, 0.14), transparent 30rem),
    linear-gradient(180deg, #f8fafc 0%, #eaf1f8 100%);
}

.test-mode-banner {
  min-height: 30px;
  padding: 7px 16px;
  border-bottom: 1px solid rgba(250, 204, 21, 0.28);
  background:
    linear-gradient(90deg, rgba(250, 204, 21, 0.92), rgba(245, 158, 11, 0.9)),
    #facc15;
  color: #1f1300;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.025em;
  box-shadow: 0 8px 22px rgba(250, 204, 21, 0.12);
}

.brand {
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(56, 189, 248, 0.38);
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.65), transparent 22%),
    linear-gradient(135deg, var(--brand-mint), var(--brand-sky));
  color: #03131a;
  box-shadow:
    0 16px 32px rgba(34, 197, 94, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font-weight: 950;
}

.eyebrow {
  color: var(--brand-mint);
  letter-spacing: 0.09em;
}

.auth-screen {
  position: relative;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 430px);
  gap: clamp(28px, 4vw, 56px);
  width: min(1280px, calc(100% - 40px));
  padding: 34px 0 64px;
}

.auth-screen::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 24%, rgb(103 232 249 / 0.5) 0 1px, transparent 1.7px),
    radial-gradient(circle at 74% 38%, rgb(34 197 94 / 0.42) 0 1px, transparent 1.8px),
    radial-gradient(circle at 42% 78%, rgb(255 255 255 / 0.34) 0 1px, transparent 1.7px),
    linear-gradient(126deg, transparent 0 18%, rgb(56 189 248 / 0.055) 34%, transparent 54%, rgb(34 197 94 / 0.04) 72%, transparent 100%);
  background-size:
    190px 170px,
    270px 230px,
    330px 290px,
    100% 100%;
  content: "";
  filter: none;
  opacity: 0.52;
  pointer-events: none;
  transform: translate3d(calc(var(--ambient-parallax-x) * -0.18), calc(var(--ambient-parallax-y) * -0.12), 0);
  animation: homepage-starfield-drift 46s linear infinite;
}

.landing-topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(34px, 5vw, 70px);
}

.landing-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.landing-nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 13px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.landing-nav a:hover {
  border-color: var(--strong-line);
  background: rgba(56, 189, 248, 0.08);
  color: var(--ink);
  transform: translateY(-1px);
}

.landing-nav .landing-nav-cta {
  border-color: rgba(34, 197, 94, 0.38);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(56, 189, 248, 0.14));
  color: var(--ink);
}

.auth-copy h1 {
  max-width: 920px;
  margin: 14px 0 18px;
  font-size: clamp(3rem, 7vw, 6.6rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.auth-lede {
  max-width: 800px;
  color: var(--muted);
  font-size: clamp(1.08rem, 1.8vw, 1.34rem);
  line-height: 1.7;
}

.development-notice {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgba(250, 204, 21, 0.24);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(250, 204, 21, 0.09);
  color: color-mix(in srgb, var(--amber) 88%, var(--ink));
  font-weight: 800;
}

.auth-panel,
.panel,
.metric-card,
.next-action-card,
.audience-card,
.marketplace-preview,
.referral-growth-section,
.platform-proof,
.landing-workflow,
.earn-module,
.ad-card,
.survey-offer-card,
.wallet-summary,
.advertiser-tab-panel > .panel,
.advertiser-overview-intro,
.advertiser-public-shell .auth-panel,
.admin-card,
.admin-panel,
.admin-drawer-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
    var(--surface);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px);
}

body[data-theme="light"] .auth-panel,
body[data-theme="light"] .panel,
body[data-theme="light"] .metric-card,
body[data-theme="light"] .next-action-card,
body[data-theme="light"] .audience-card,
body[data-theme="light"] .marketplace-preview,
body[data-theme="light"] .referral-growth-section,
body[data-theme="light"] .platform-proof,
body[data-theme="light"] .landing-workflow,
body[data-theme="light"] .earn-module,
body[data-theme="light"] .ad-card,
body[data-theme="light"] .survey-offer-card,
body[data-theme="light"] .wallet-summary {
  background: rgba(255, 255, 255, 0.95);
}

.auth-panel {
  top: 70px;
  align-self: start;
  padding: 30px;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.09),
    0 34px 90px rgba(0, 0, 0, 0.36);
}

.auth-panel-heading h2,
.section-header h2,
.panel-heading h2,
.marketplace-preview h2,
.referral-growth-section h2 {
  letter-spacing: -0.03em;
}

input,
textarea,
select {
  border-radius: 15px;
  border-color: var(--line);
  background: rgba(15, 23, 42, 0.66);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body[data-theme="light"] input,
body[data-theme="light"] textarea,
body[data-theme="light"] select {
  background: #f8fafc;
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(56, 189, 248, 0.28);
  outline-offset: 2px;
}

.primary-button,
.text-button,
.action-neutral,
.theme-toggle,
.row-actions button {
  min-height: 44px;
  border-radius: 14px;
  padding: 0 18px;
  gap: 8px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.primary-button {
  border: 1px solid rgba(34, 197, 94, 0.34);
  background:
    linear-gradient(135deg, #31e981, #22c55e 52%, #14b8a6),
    var(--primary);
  color: #02140b;
  box-shadow:
    0 14px 32px rgba(34, 197, 94, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.primary-button:hover {
  color: #02140b;
  background: linear-gradient(135deg, #49f49a, #22c55e 54%, #38bdf8);
  box-shadow:
    0 18px 42px rgba(34, 197, 94, 0.34),
    0 0 0 4px rgba(34, 197, 94, 0.08);
  transform: translateY(-2px) scale(1.004);
}

.text-button,
.action-neutral,
.theme-toggle,
.row-actions button {
  background: rgba(15, 23, 42, 0.66);
  color: var(--ink);
  border-color: var(--line);
}

body[data-theme="light"] .text-button,
body[data-theme="light"] .action-neutral,
body[data-theme="light"] .theme-toggle,
body[data-theme="light"] .row-actions button {
  background: #ffffff;
}

.text-button:hover,
.action-neutral:hover,
.theme-toggle:hover,
.row-actions button:hover {
  border-color: var(--strong-line);
  background: rgba(56, 189, 248, 0.1);
  box-shadow: 0 12px 24px rgba(56, 189, 248, 0.12);
}

.create-account-link {
  width: 100%;
}

.audience-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: clamp(34px, 5vw, 58px);
}

.audience-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding: clamp(24px, 3vw, 36px);
  overflow: hidden;
}

.audience-card::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 0%, rgba(34, 197, 94, 0.18), transparent 44%),
    linear-gradient(135deg, rgba(34, 197, 94, 0.08), transparent 42%);
  content: "";
}

.audience-card-advertisers::before {
  background:
    radial-gradient(circle at 22% 0%, rgba(56, 189, 248, 0.2), transparent 44%),
    linear-gradient(135deg, rgba(56, 189, 248, 0.1), transparent 42%);
}

.audience-card h2 {
  margin: 14px 0 10px;
  font-size: clamp(2rem, 3vw, 3rem);
}

.audience-card p {
  color: var(--muted);
  line-height: 1.65;
}

.audience-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 14px;
  border: 1px solid rgba(250, 204, 21, 0.28);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(250, 204, 21, 0.1);
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 900;
}

.preview-icon,
.metric-icon,
.action-icon,
.module-icon,
.activity-icon,
.empty-icon {
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(56, 189, 248, 0.16)),
    rgba(255, 255, 255, 0.04);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.benefit-list {
  gap: 10px;
}

.benefit-list li {
  position: relative;
  padding-left: 28px;
  color: var(--muted);
  line-height: 1.5;
}

.benefit-list li::before {
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-mint), var(--brand-sky));
  color: #03131a;
  content: "+";
  font-size: 0.72rem;
  font-weight: 950;
}

.audience-card-footer {
  margin-top: auto;
}

.audience-card-advertisers .primary-button,
.advertiser-auth-panel .primary-button,
.advertiser-quick-actions .primary-button {
  border-color: rgba(56, 189, 248, 0.34);
  background: linear-gradient(135deg, #60d7ff, #38bdf8 54%, #3b82f6);
  box-shadow: 0 14px 32px rgba(56, 189, 248, 0.24);
}

.marketplace-preview,
.referral-growth-section,
.landing-workflow,
.platform-proof {
  margin-top: 26px;
  padding: clamp(24px, 3vw, 34px);
}

.preview-dashboard-grid,
.growth-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.preview-dashboard-grid article,
.growth-card-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(15, 23, 42, 0.56);
}

body[data-theme="light"] .preview-dashboard-grid article,
body[data-theme="light"] .growth-card-grid article {
  background: #ffffff;
}

.preview-dashboard-grid article::after {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-mint), var(--brand-sky), var(--brand-gold));
  content: "";
  opacity: 0.86;
}

.preview-dashboard-grid span,
.growth-card-grid span {
  color: var(--muted-2);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.preview-dashboard-grid strong,
.growth-card-grid strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(1.6rem, 2vw, 2.3rem);
  letter-spacing: -0.04em;
}

.preview-dashboard-grid small,
.growth-card-grid p {
  color: var(--muted);
  line-height: 1.5;
}

.app-shell {
  grid-template-columns: 284px minmax(0, 1fr);
  gap: 22px;
  width: min(1420px, calc(100% - 30px));
  padding-top: 22px;
}

.member-status-bar {
  top: 30px;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 10, 18, 0.82);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

body[data-theme="light"] .member-status-bar {
  background: rgba(248, 250, 252, 0.88);
}

.member-status-metrics div,
.member-status-metric-button,
.member-status-actions .level-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 13px;
  background: rgba(255, 255, 255, 0.045);
}

.member-status-metrics span {
  color: var(--muted-2);
}

.member-status-metrics strong {
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.sidebar {
  top: 90px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(7, 17, 26, 0.96), rgba(6, 10, 18, 0.92));
  box-shadow: var(--soft-shadow);
}

body[data-theme="light"] .sidebar {
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.12), transparent 34%),
    #ffffff;
}

.brand-home-button {
  border-radius: 20px;
}

.sidebar .nav-item {
  min-height: 46px;
  border-radius: 14px;
  color: var(--muted);
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    border-color 160ms ease;
}

.nav-item:hover {
  background: rgba(56, 189, 248, 0.08);
  color: var(--ink);
  transform: translateX(2px);
}

.nav-item.is-active {
  border-color: rgba(34, 197, 94, 0.28);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(56, 189, 248, 0.1));
  color: var(--ink);
  box-shadow: inset 4px 0 0 var(--brand-mint);
}

.main-content {
  gap: 22px;
}

.topbar {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 0%, rgba(34, 197, 94, 0.14), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    var(--surface);
  box-shadow: var(--soft-shadow);
  isolation: isolate;
  transition:
    border-color 260ms ease,
    box-shadow 260ms ease,
    filter 260ms ease;
}

.topbar > * {
  position: relative;
  z-index: 1;
}

.topbar.is-dashboard-topbar {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  background:
    radial-gradient(ellipse at 16% 0%, color-mix(in srgb, var(--primary) 21%, transparent), transparent 42%),
    radial-gradient(ellipse at 84% 12%, color-mix(in srgb, var(--brand-sky) 15%, transparent), transparent 42%),
    radial-gradient(ellipse at 52% 120%, color-mix(in srgb, var(--brand-gold) 7%, transparent), transparent 50%),
    linear-gradient(145deg, rgb(15 23 42 / 0.72), rgb(15 23 42 / 0.42));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.105),
    0 0 24px color-mix(in srgb, var(--primary) 9%, transparent),
    0 0 68px color-mix(in srgb, var(--accent) 5%, transparent),
    var(--soft-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(1.16);
  backdrop-filter: blur(20px) saturate(1.16);
  animation: dashboard-hero-breathe 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.topbar.is-dashboard-topbar::before,
.topbar.is-dashboard-topbar::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.topbar.is-dashboard-topbar::before {
  inset: -70% -45%;
  background:
    radial-gradient(ellipse at 24% 32%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 42%),
    radial-gradient(ellipse at 78% 24%, color-mix(in srgb, var(--brand-sky) 17%, transparent), transparent 46%),
    conic-gradient(from 160deg at 55% 48%, transparent 0deg, rgb(255 255 255 / 0.055) 52deg, transparent 108deg, color-mix(in srgb, var(--primary) 9%, transparent) 196deg, transparent 270deg);
  opacity: 0.58;
  filter: blur(14px);
  transform: scale(1);
  animation: dashboard-aura-drift 16s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.topbar.is-dashboard-topbar::after {
  inset: -45% -20%;
  background:
    radial-gradient(ellipse at 20% 50%, rgb(255 255 255 / 0.14), transparent 44%),
    radial-gradient(ellipse at 75% 38%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 48%),
    linear-gradient(105deg, transparent 18%, rgb(255 255 255 / 0.055) 46%, transparent 74%);
  opacity: 0.24;
  filter: blur(10px);
  transform: scale(0.98);
  animation: dashboard-sheen-pass 13s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.topbar h1 {
  margin: 4px 0 6px;
  font-size: clamp(2.1rem, 4vw, 4rem);
  letter-spacing: -0.055em;
}

.topbar.is-dashboard-topbar h1 {
  color: var(--ink);
  text-shadow:
    0 0 22px color-mix(in srgb, var(--primary) 24%, transparent),
    0 0 48px color-mix(in srgb, var(--accent) 9%, transparent),
    0 8px 28px rgb(0 0 0 / 0.24);
}

.topbar.is-dashboard-topbar .eyebrow,
#dashboard .panel-heading .eyebrow,
.next-action-card .eyebrow {
  text-shadow: 0 0 12px color-mix(in srgb, var(--primary) 28%, transparent);
  animation: accent-text-breathe 10s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.section-subtitle {
  max-width: 780px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.dashboard-primary-grid {
  gap: 20px;
}

#dashboard .panel,
#dashboard .next-action-card,
#dashboard .safety-strip {
  border-color: var(--fx-border-major);
  outline: 1px solid color-mix(in srgb, var(--primary) 7%, transparent);
  outline-offset: -2px;
  background: var(--fx-glass-major);
  box-shadow:
    var(--fx-inner-highlight),
    var(--fx-shadow-major);
  background-position: 0% 0%, 100% 0%, 0 0, 0 0;
  background-size: 150% 150%, 150% 150%, 100% 100%, auto;
  -webkit-backdrop-filter: blur(18px) saturate(1.14);
  backdrop-filter: blur(18px) saturate(1.14);
  animation:
    effect-major-border-shimmer var(--fx-major-cycle) cubic-bezier(0.45, 0, 0.55, 1) infinite,
    major-glass-flow 18s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

#dashboard .account-snapshot-panel {
  background:
    radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 42%),
    radial-gradient(ellipse at 92% 2%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 46%),
    linear-gradient(145deg, rgb(255 255 255 / 0.088), rgb(255 255 255 / 0.036)),
    color-mix(in srgb, var(--surface) 72%, transparent);
  background-position: 0% 0%, 100% 0%, 0 0, 0 0;
  background-size: 160% 160%, 150% 150%, 100% 100%, auto;
}

#dashboard .next-action:not(.is-primary-action),
#dashboard .action-card,
#dashboard .achievement-card,
#dashboard .milestone-list > * {
  border-color: var(--fx-border-standard);
  outline: 1px solid rgb(255 255 255 / 0.014);
  outline-offset: -2px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.048), rgb(255 255 255 / 0.014)),
    rgb(15 23 42 / 0.34);
  box-shadow:
    var(--fx-inner-highlight),
    var(--fx-shadow-standard);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  animation: none;
}

#dashboard .next-action-card,
#dashboard .dashboard-secondary .panel:nth-child(2n) {
  animation-delay: -5s;
}

#dashboard .account-snapshot-grid .metric-card:nth-child(2),
#dashboard .next-action-list .next-action:nth-child(2) {
  animation-delay: -3s;
}

#dashboard .account-snapshot-grid .metric-card:nth-child(3),
#dashboard .next-action-list .next-action:nth-child(3) {
  animation-delay: -6s;
}

#dashboard .account-snapshot-grid .metric-card:nth-child(4),
#dashboard .next-action-list .next-action:nth-child(4) {
  animation-delay: -9s;
}

body[data-theme="light"] .topbar.is-dashboard-topbar,
body[data-theme="light"] #dashboard .panel,
body[data-theme="light"] #dashboard .next-action-card,
body[data-theme="light"] #dashboard .safety-strip {
  border-color: rgb(15 23 42 / 0.1);
  background:
    radial-gradient(ellipse at 14% 0%, rgb(34 197 94 / 0.08), transparent 42%),
    linear-gradient(145deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.5));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.74),
    0 20px 44px rgb(15 23 42 / 0.1);
}

body[data-theme="light"] #dashboard .account-snapshot-grid .metric-card,
body[data-theme="light"] #dashboard .next-action:not(.is-primary-action),
body[data-theme="light"] #dashboard .action-card,
body[data-theme="light"] #dashboard .achievement-card,
body[data-theme="light"] #dashboard .milestone-list > * {
  border-color: rgb(15 23 42 / 0.09);
  background:
    radial-gradient(ellipse at 50% 115%, rgb(34 197 94 / 0.07), transparent 58%),
    linear-gradient(145deg, rgb(255 255 255 / 0.72), rgb(255 255 255 / 0.44));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.72),
    0 12px 28px rgb(15 23 42 / 0.08);
}

.auth-panel,
.app-shell .view-section .panel,
.app-shell .view-section .next-action-card,
.app-shell .view-section .safety-strip,
.app-shell .view-section .levels-hero,
.app-shell .view-section .world-chat-hero,
.app-shell .view-section .profile-hero,
.app-shell .view-section .earn-more-hero,
.app-shell .view-section .survey-wall-hero,
.marketplace-preview,
.platform-proof,
.landing-workflow,
.legal-hero,
.signup-card,
.advertiser-auth-copy,
.advertiser-overview-intro,
.admin-login-copy,
.viewer-panel,
.ad-frame-shell,
.reward-complete-shell,
.fx-major-panel {
  border-color: var(--fx-border-major);
  outline: 1px solid color-mix(in srgb, var(--primary) 7%, transparent);
  outline-offset: -2px;
  background: var(--fx-glass-major);
  box-shadow:
    var(--fx-inner-highlight),
    var(--fx-shadow-major);
  background-position: 0% 0%, 100% 0%, 0 0, 0 0;
  background-size: 150% 150%, 150% 150%, 100% 100%, auto;
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  backdrop-filter: blur(16px) saturate(1.08);
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
  animation:
    effect-major-border-shimmer var(--fx-major-cycle) cubic-bezier(0.45, 0, 0.55, 1) infinite,
    major-glass-flow 18s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.landing-shell .landing-hero {
  position: relative;
  border: 0;
  outline: 0;
  padding: clamp(68px, 10vw, 132px) 0 clamp(54px, 8vw, 92px);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
}

.landing-shell .landing-hero h1 {
  text-shadow:
    0 0 34px rgb(103 232 249 / 0.12),
    0 18px 48px rgb(0 0 0 / 0.36);
}

.landing-shell .landing-hero .hero-tagline {
  color: color-mix(in srgb, var(--muted) 88%, white);
  text-shadow: 0 12px 34px rgb(0 0 0 / 0.34);
}

.app-shell .view-section .metric-card,
.app-shell .view-section .ad-card,
.app-shell .view-section .next-action:not(.is-primary-action),
.app-shell .view-section .action-card,
.app-shell .view-section .activity-row,
.app-shell .view-section .ledger-row,
.app-shell .view-section .payout-row,
.app-shell .view-section .referral-row,
.app-shell .view-section .campaign-row,
.app-shell .view-section .admin-row,
.app-shell .view-section .goal-row,
.app-shell .view-section .achievement-card,
.app-shell .view-section .earn-module,
.app-shell .view-section .survey-provider-card,
.app-shell .view-section .survey-offer-card,
.app-shell .view-section .wallet-summary,
.app-shell .view-section .payout-minimum-card,
.app-shell .view-section .level-core-card,
.app-shell .view-section .cosmetic-next-card,
.app-shell .view-section .cosmetic-milestone-card,
.app-shell .view-section .leaderboard-row,
.app-shell .view-section .xp-history-row,
.app-shell .view-section .profile-level-card,
.app-shell .view-section .profile-stat-card,
.app-shell .view-section .profile-detail-list > *,
.app-shell .view-section .world-chat-status-grid article,
.app-shell .view-section .chat-identity-card,
.app-shell .view-section .chat-rules-card,
.app-shell .view-section .help-topic-card,
.app-shell .view-section .help-status-card,
.promo-link-card,
.promo-asset-card,
.social-template-card,
.qr-card,
.audience-card,
.referral-growth-section,
.legal-nav,
.legal-section,
.signup-referral-program,
.optional-profile-fields,
.admin-card,
.admin-panel,
.admin-drawer-section,
.viewer-topbar,
.embed-fallback-panel,
.viewer-debug-panel,
.preview-dashboard-grid article,
.growth-card-grid article,
.auth-path div,
.trust-card-grid article,
.signup-benefit-grid div,
.tier-grid div,
.auth-facts div,
.legal-grid > div,
.legal-callout,
.responsive-table,
.admin-test-credentials,
.reward-card,
.timer-card,
.viewer-mini-stat,
.viewer-status-strip span,
.captcha-panel,
.engagement-panel,
.verified-click-through-panel,
.viewer-next-links a,
.sidebar .nav-item,
.mobile-nav-item,
.primary-button,
.text-button,
.action-neutral,
.theme-toggle,
.row-actions button,
.member-status-metric-button,
.member-status-account-button,
.fx-standard-surface {
  border-color: var(--fx-border-standard);
  outline: 1px solid rgb(255 255 255 / 0.014);
  outline-offset: -2px;
  box-shadow:
    var(--fx-inner-highlight),
    var(--fx-shadow-standard);
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
  backdrop-filter: blur(10px) saturate(1.04);
  transition:
    transform 210ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 210ms ease,
    box-shadow 210ms ease,
    filter 210ms ease,
    background 210ms ease;
  animation: none;
}

.app-shell .view-section :where(
  .panel,
  .next-action-card,
  .safety-strip,
  .levels-hero,
  .world-chat-hero,
  .profile-hero,
  .earn-more-hero,
  .survey-wall-hero,
  .metric-card,
  .ad-card,
  .action-card,
  .activity-row,
  .ledger-row,
  .payout-row,
  .referral-row,
  .campaign-row,
  .admin-row,
  .goal-row,
  .achievement-card,
  .earn-module,
  .survey-provider-card,
  .survey-offer-card,
  .wallet-summary,
  .payout-minimum-card,
  .level-core-card,
  .cosmetic-next-card,
  .cosmetic-milestone-card,
  .leaderboard-row,
  .xp-history-row,
  .profile-level-card,
  .profile-stat-card,
  .chat-identity-card,
  .chat-rules-card,
  .help-topic-card,
  .help-status-card
):nth-child(2n),
.auth-screen :where(.audience-card, .auth-path div, .growth-card-grid article):nth-child(2n) {
  animation-delay: -5s;
}

:where(
  .landing-hero,
  .legal-hero,
  .legal-nav,
  .legal-section,
  .signup-card,
  .signup-referral-program,
  .optional-profile-fields,
  .advertiser-auth-copy,
  .admin-login-copy,
  .viewer-topbar,
  .viewer-panel,
  .embed-fallback-panel,
  .ad-frame-shell,
  .viewer-debug-panel,
  .reward-complete-shell,
  .trust-card-grid article,
  .signup-benefit-grid div,
  .tier-grid div,
  .auth-facts div,
  .legal-grid > div,
  .legal-callout,
  .responsive-table,
  .admin-test-credentials,
  .reward-card,
  .timer-card,
  .viewer-mini-stat,
  .viewer-status-strip span,
  .captcha-panel,
  .engagement-panel,
  .verified-click-through-panel,
  .viewer-next-links a
):nth-child(2n) {
  animation-delay: -5s;
}

.app-shell .view-section :where(
  .panel,
  .metric-card,
  .ad-card,
  .action-card,
  .ledger-row,
  .payout-row,
  .referral-row,
  .campaign-row,
  .admin-row,
  .goal-row,
  .achievement-card,
  .survey-offer-card,
  .payout-minimum-card,
  .cosmetic-milestone-card,
  .leaderboard-row,
  .xp-history-row,
  .profile-stat-card,
  .help-topic-card
):nth-child(3n),
.auth-screen :where(.preview-dashboard-grid article, .growth-card-grid article):nth-child(3n) {
  animation-delay: -8s;
}

:where(
  .legal-section,
  .signup-benefit-grid div,
  .tier-grid div,
  .auth-facts div,
  .legal-grid > div,
  .reward-card,
  .timer-card,
  .viewer-mini-stat,
  .viewer-status-strip span
):nth-child(3n) {
  animation-delay: -8s;
}

.panel,
.next-action-card {
  padding: 24px;
}

.metric-grid {
  gap: 16px;
}

.metric-card {
  position: relative;
  min-height: 150px;
  padding: 20px;
  overflow: hidden;
  transition:
    transform 210ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 210ms ease,
    background 210ms ease,
    box-shadow 210ms ease,
    filter 210ms ease;
}

.account-snapshot-grid .metric-card::before {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  border-radius: 999px;
  padding: 3px 7px 3px 16px;
  background:
    radial-gradient(circle at 8px 50%, var(--primary) 0 2.5px, transparent 3px),
    color-mix(in srgb, var(--surface-2) 76%, transparent);
  color: var(--primary);
  content: "live";
  font-size: 0.6rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0.78;
  animation: live-counter-breathe 4.2s ease-in-out infinite;
}

.account-snapshot-grid .metric-card {
  background:
    radial-gradient(ellipse at 50% 115%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 58%),
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 42%),
    linear-gradient(145deg, rgb(255 255 255 / 0.076), rgb(255 255 255 / 0.026)),
    rgb(15 23 42 / 0.38);
  border-color: var(--fx-border-standard);
  outline: 1px solid rgb(255 255 255 / 0.014);
  outline-offset: -2px;
  box-shadow:
    var(--fx-inner-highlight),
    var(--fx-shadow-standard);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  backdrop-filter: blur(12px) saturate(1.12);
  animation: none;
}

.metric-card::after {
  position: absolute;
  inset: auto 18px 0 18px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--brand-mint), var(--brand-sky));
  content: "";
  opacity: 0.72;
  transform-origin: center;
}

.account-snapshot-grid .metric-card::after {
  background: linear-gradient(90deg, var(--brand-mint), var(--brand-sky), var(--brand-gold), var(--brand-mint));
  background-size: 260% 100%;
  opacity: 0.74;
  animation: metric-edge-shine 8.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.metric-card:hover,
.action-card:hover,
.next-action:hover,
.ad-card:hover,
.earn-module:hover,
.promo-asset-card:hover,
.promo-link-card:hover {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--fx-border-standard));
  box-shadow: var(--fx-shadow-hover);
  filter: brightness(1.025);
  transform: var(--fx-hover-transform);
}

.metric-card strong {
  font-size: clamp(1.65rem, 2.3vw, 2.45rem);
  letter-spacing: -0.04em;
}

.account-snapshot-grid .metric-card strong {
  text-shadow:
    0 0 16px color-mix(in srgb, var(--primary) 22%, transparent),
    0 0 34px color-mix(in srgb, var(--accent) 7%, transparent),
    0 4px 14px rgb(0 0 0 / 0.22);
  animation: none;
}

.next-action.is-primary-action strong {
  color: color-mix(in srgb, #ffffff 92%, var(--primary));
  text-shadow:
    0 0 16px color-mix(in srgb, var(--primary) 22%, transparent),
    0 3px 12px rgb(0 0 0 / 0.2);
}

.next-action.is-primary-action small {
  color: color-mix(in srgb, var(--muted) 74%, #ffffff);
}

.metric-card small {
  color: var(--muted);
}

.progress-track,
.mini-progress,
.mini-progress-track {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.5);
}

body[data-theme="light"] .progress-track,
body[data-theme="light"] .mini-progress,
body[data-theme="light"] .mini-progress-track {
  background: #eaf1f8;
}

.progress-track:not(.viewer-timer-progress) span,
.mini-progress span,
.mini-progress-track span {
  background: linear-gradient(90deg, var(--brand-mint), var(--brand-sky), var(--brand-gold));
  background-size: 220% 100%;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.28);
  animation: progress-fill-flow 8s ease-in-out infinite;
}

#xpProgressBar {
  filter: saturate(1.2) brightness(1.08);
  animation: xp-bar-glow 9s ease-in-out infinite;
}

#xpProgressBar::before {
  opacity: 0.58;
  animation: progress-sheen-drift 5.8s ease-in-out infinite;
}

#xpProgressBar::after {
  opacity: 0.24;
  animation: progress-particle-drift 9.5s linear infinite;
}

.snapshot-progress-grid {
  gap: 18px;
}

.next-action-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 0%, rgba(250, 204, 21, 0.09), transparent 36%),
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 38%),
    var(--surface);
  isolation: isolate;
}

.next-action-card::before {
  position: absolute;
  inset: -46% -36%;
  z-index: -1;
  background:
    radial-gradient(ellipse at 78% 16%, color-mix(in srgb, var(--brand-gold) 18%, transparent), transparent 42%),
    radial-gradient(ellipse at 30% 58%, rgb(255 255 255 / 0.07), transparent 48%),
    radial-gradient(ellipse at 8% 18%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 44%);
  content: "";
  opacity: 0.62;
  filter: blur(12px);
  transform: scale(1);
  animation: panel-soft-shine 14s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.next-action-list {
  gap: 12px;
}

.next-action {
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  transition:
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-theme="light"] .next-action {
  background: #f8fafc;
}

.next-action.is-recommended {
  border-color: rgba(34, 197, 94, 0.35);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(56, 189, 248, 0.08));
}

.next-action.is-primary-action {
  position: relative;
  z-index: 1;
  margin: 1px 0 3px;
  border-color: var(--fx-border-reward);
  padding: 16px;
  background: var(--fx-glass-reward);
  box-shadow: var(--fx-shadow-reward);
  outline: 1px solid color-mix(in srgb, var(--brand-sky) 14%, transparent);
  outline-offset: -3px;
  -webkit-backdrop-filter: blur(14px) saturate(1.16);
  backdrop-filter: blur(14px) saturate(1.16);
  animation:
    primary-action-pulse 7.2s ease-in-out infinite,
    effect-reward-border-shimmer var(--fx-reward-cycle) cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.next-action.is-primary-action::before {
  position: absolute;
  inset: -12px;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 18% 20%, rgb(255 255 255 / 0.12), transparent 44%),
    radial-gradient(ellipse at 86% 54%, color-mix(in srgb, var(--brand-gold) 16%, transparent), transparent 46%),
    radial-gradient(ellipse at 56% 115%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 50%);
  content: "";
  opacity: 0.48;
  transform: scale(0.99);
  animation: primary-action-sheen 10.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
}

.next-action.is-primary-action > * {
  position: relative;
  z-index: 1;
}

.next-action.is-primary-action:hover,
.next-action.is-primary-action:focus-within {
  border-color: color-mix(in srgb, var(--primary) 86%, var(--brand-gold));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent) inset,
    0 0 26px color-mix(in srgb, var(--primary) 22%, transparent),
    var(--shadow);
}

.next-action.is-primary-action .primary-button {
  position: relative;
  overflow: hidden;
  min-width: 94px;
  min-height: 42px;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.16) inset,
    0 0 22px color-mix(in srgb, var(--primary) 30%, transparent),
    0 0 44px color-mix(in srgb, var(--brand-gold) 8%, transparent);
  animation: live-button-breathe 6.8s ease-in-out infinite;
}

.next-action.is-primary-action .primary-button::before,
#requestPayout::before,
.ptc-ad-action-panel .primary-button:not(:disabled)::before,
.reward-next-actions .primary-button::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(105deg, transparent 22%, rgb(255 255 255 / 0.34) 48%, transparent 72%);
  content: "";
  opacity: 0.64;
  transform: translateX(-135%);
  animation: reward-button-sheen 7.8s ease-in-out infinite;
  pointer-events: none;
}

.next-action.is-primary-action .primary-button > *,
#requestPayout > *,
.ptc-ad-action-panel .primary-button > *,
.reward-next-actions .primary-button > * {
  position: relative;
  z-index: 1;
}

#requestPayout,
.ptc-ad-action-panel .primary-button:not(:disabled),
.reward-next-actions .primary-button,
.fx-reward-action {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--primary) 44%, var(--accent));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent) inset,
    0 0 18px color-mix(in srgb, var(--primary) 12%, transparent),
    0 12px 28px rgb(0 0 0 / 0.14);
}

:where(
  .panel,
  .metric-card,
  .next-action-card,
  .next-action,
  .action-card,
  .activity-row,
  .ledger-row,
  .payout-row,
  .referral-row,
  .campaign-row,
  .admin-row,
  .goal-row,
  .achievement-card,
  .earn-module,
  .ad-card,
  .survey-provider-card,
  .survey-offer-card,
  .wallet-summary,
  .payout-minimum-card,
  .level-core-card,
  .cosmetic-next-card,
  .cosmetic-milestone-card,
  .leaderboard-row,
  .xp-history-row,
  .profile-level-card,
  .profile-stat-card,
  .chat-identity-card,
  .chat-rules-card,
  .help-topic-card,
  .help-status-card,
  .audience-card,
  .legal-section,
  .signup-benefit-grid div,
  .auth-facts div,
  .promo-link-card,
  .promo-asset-card,
  .social-template-card,
  .qr-card
):hover,
:where(
  .panel,
  .metric-card,
  .next-action-card,
  .next-action,
  .action-card,
  .activity-row,
  .ledger-row,
  .payout-row,
  .referral-row,
  .campaign-row,
  .admin-row,
  .goal-row,
  .achievement-card,
  .earn-module,
  .ad-card,
  .survey-provider-card,
  .survey-offer-card,
  .wallet-summary,
  .payout-minimum-card,
  .level-core-card,
  .cosmetic-next-card,
  .cosmetic-milestone-card,
  .leaderboard-row,
  .xp-history-row,
  .profile-level-card,
  .profile-stat-card,
  .chat-identity-card,
  .chat-rules-card,
  .help-topic-card,
  .help-status-card,
  .audience-card,
  .legal-section,
  .signup-benefit-grid div,
  .auth-facts div,
  .promo-link-card,
  .promo-asset-card,
  .social-template-card,
  .qr-card
):focus-within {
  border-color: color-mix(in srgb, var(--primary) 25%, var(--fx-border-standard));
  box-shadow: var(--fx-shadow-hover);
  filter: brightness(1.025);
  transform: var(--fx-hover-transform);
}

:where(.sidebar .nav-item, .mobile-nav-item, .text-button, .action-neutral, .theme-toggle, .row-actions button):hover,
:where(.sidebar .nav-item, .mobile-nav-item, .text-button, .action-neutral, .theme-toggle, .row-actions button):focus-visible {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--fx-border-standard));
  box-shadow:
    var(--fx-inner-highlight),
    0 10px 24px color-mix(in srgb, var(--accent) 8%, transparent);
  filter: brightness(1.02);
  transform: translateY(-1px) scale(1.004);
}

.action-card,
.activity-row,
.ledger-row,
.payout-row,
.referral-row,
.campaign-row,
.goal-row {
  border-radius: 18px;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.04);
}

body[data-theme="light"] .action-card,
body[data-theme="light"] .activity-row,
body[data-theme="light"] .ledger-row,
body[data-theme="light"] .payout-row,
body[data-theme="light"] .referral-row,
body[data-theme="light"] .campaign-row,
body[data-theme="light"] .goal-row {
  background: #ffffff;
}

#dashboard .achievement-card.achievement-badge-button,
.app-shell .view-section .achievement-card.achievement-badge-button {
  border-color: color-mix(in srgb, var(--badge-b) 24%, var(--line));
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 4%, color-mix(in srgb, var(--badge-a) 14%, transparent), transparent 38%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--badge-b) 13%, transparent), transparent 34%),
    linear-gradient(145deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.018)),
    color-mix(in srgb, var(--surface-2) 90%, var(--badge-a) 10%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.09),
    inset 0 -1px 0 rgb(255 255 255 / 0.03),
    0 14px 34px rgb(0 0 0 / 0.16);
}

#dashboard .achievement-card.achievement-badge-button.is-unlocked,
.app-shell .view-section .achievement-card.achievement-badge-button.is-unlocked {
  border-color: color-mix(in srgb, var(--badge-a) 48%, var(--badge-b));
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--badge-a) 22%, transparent), transparent 40%),
    radial-gradient(circle at 96% 12%, color-mix(in srgb, var(--badge-c) 18%, transparent), transparent 36%),
    linear-gradient(145deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.02)),
    color-mix(in srgb, var(--surface-2) 80%, var(--badge-a) 20%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 0 0 1px color-mix(in srgb, var(--badge-a) 12%, transparent),
    0 16px 38px color-mix(in srgb, var(--badge-a) 13%, transparent),
    0 14px 34px rgb(0 0 0 / 0.17);
}

body[data-theme="light"] #dashboard .achievement-card.achievement-badge-button,
body[data-theme="light"] .app-shell .view-section .achievement-card.achievement-badge-button {
  background:
    radial-gradient(circle at 10% 4%, color-mix(in srgb, var(--badge-a) 12%, transparent), transparent 38%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--badge-b) 10%, transparent), transparent 34%),
    linear-gradient(145deg, rgb(255 255 255 / 0.96), rgb(248 250 252 / 0.76));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.78),
    0 12px 28px rgb(15 23 42 / 0.08);
}

.ad-grid {
  gap: 16px;
}

.ad-card {
  grid-template-columns: auto minmax(0, 1.2fr) minmax(240px, 0.72fr) auto;
  align-items: center;
  border-radius: 24px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(56, 189, 248, 0.05)),
    var(--surface);
}

.ptc-ad-main h3 {
  font-size: 1.2rem;
}

.ad-meta div {
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.28);
}

body[data-theme="light"] .ad-meta div {
  background: #f1f5f9;
}

.ptc-ad-row {
  position: relative;
  width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(146px, 0.24fr) minmax(0, 1fr) minmax(206px, 0.28fr);
  grid-template-areas:
    "brand main action"
    "brand meta action";
  gap: 0;
  align-items: stretch;
  min-height: 188px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 22%, var(--line));
  border-radius: 28px;
  padding: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025) 44%, rgba(34, 197, 94, 0.06)),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(8, 13, 24, 0.98));
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  isolation: isolate;
}

.ptc-ad-row::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-mint), var(--brand-sky), var(--brand-gold));
  content: "";
  opacity: 0.9;
}

.ptc-ad-row::after {
  position: absolute;
  inset: 3px 0 0 auto;
  width: 34%;
  max-width: 320px;
  background:
    radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.16), transparent 62%),
    radial-gradient(circle at 72% 76%, rgba(34, 197, 94, 0.1), transparent 64%);
  content: "";
  pointer-events: none;
  z-index: -1;
}

.ptc-ad-row.is-ready {
  border-color: color-mix(in srgb, var(--brand-mint) 34%, var(--line));
}

.ptc-ad-row.is-cooling {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--line));
}

body[data-theme="light"] .ptc-ad-row {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.98) 52%, rgba(236, 253, 245, 0.82)),
    #ffffff;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.11);
}

.ptc-ad-brand-block {
  grid-area: brand;
  display: grid;
  align-content: space-between;
  gap: 14px;
  min-width: 0;
  border-right: 1px solid var(--line);
  padding: 22px 18px;
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.13), rgba(56, 189, 248, 0.08)),
    rgba(255, 255, 255, 0.035);
  overflow-wrap: anywhere;
}

body[data-theme="light"] .ptc-ad-brand-block {
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.12), rgba(14, 165, 233, 0.08)),
    rgba(255, 255, 255, 0.72);
}

.ptc-ad-logo {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, var(--brand-mint), var(--brand-sky)),
    var(--brand-mint);
  color: #03131a;
  font-size: 1.02rem;
  font-weight: 1000;
  box-shadow:
    0 16px 32px rgba(34, 197, 94, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.ptc-ad-logo.has-logo {
  overflow: hidden;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
}

.ptc-ad-logo.has-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.ptc-ad-brand-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ptc-ad-brand-copy span,
.ptc-ad-kicker span,
.ptc-trust-strip span,
.ptc-action-reward span,
.ptc-ad-meta small {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
}

.ptc-ad-brand-copy span,
.ptc-ad-brand-copy small,
.ptc-ad-meta span,
.ptc-ad-meta small {
  color: var(--muted-2);
}

.ptc-ad-brand-copy small {
  line-height: 1.35;
}

.ptc-ad-brand-copy strong {
  color: var(--ink);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.ptc-ad-main {
  grid-area: main;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 22px 24px 12px;
  overflow-wrap: anywhere;
}

.ptc-ad-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(116px, auto);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.ptc-ad-kicker,
.ptc-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ptc-ad-kicker span,
.ptc-trust-strip span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 24px;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 18%, var(--line));
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.ptc-ad-kicker span:first-child,
.ptc-trust-strip span:first-child {
  border-color: color-mix(in srgb, var(--brand-mint) 28%, var(--line));
  color: color-mix(in srgb, var(--brand-mint) 88%, white);
}

body[data-theme="light"] .ptc-ad-kicker span,
body[data-theme="light"] .ptc-trust-strip span {
  background: #ffffff;
  color: var(--muted);
}

body[data-theme="light"] .ptc-ad-kicker span:first-child,
body[data-theme="light"] .ptc-trust-strip span:first-child {
  color: var(--primary);
}

.ptc-ad-main h3 {
  margin: 9px 0 0;
  color: var(--ink);
  font-size: 1.28rem;
  line-height: 1.12;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.ptc-ad-main p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ptc-ad-status-stack {
  display: grid;
  justify-items: end;
  gap: 7px;
  min-width: 0;
}

.ptc-ad-status-stack .status-badge {
  max-width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

.ptc-ad-meta {
  grid-area: meta;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0 24px 22px;
}

.ptc-ad-meta div {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 76px;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 14%, var(--line));
  border-radius: 16px;
  padding: 10px 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(2, 6, 23, 0.32);
}

body[data-theme="light"] .ptc-ad-meta div {
  background:
    linear-gradient(180deg, #ffffff, #f8fafc),
    #ffffff;
}

.ptc-ad-meta strong {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.ptc-ad-meta small {
  overflow-wrap: anywhere;
}

.ptc-ad-actions {
  grid-area: action;
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  border-left: 1px solid var(--line);
  padding: 22px 18px;
  background: rgba(255, 255, 255, 0.032);
  overflow-wrap: anywhere;
}

body[data-theme="light"] .ptc-ad-actions {
  background: rgba(248, 250, 252, 0.7);
}

.ptc-action-reward {
  display: grid;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 34%, var(--line));
  border-radius: 18px;
  padding: 11px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-gold) 13%, transparent), rgba(255, 255, 255, 0.025)),
    rgba(2, 6, 23, 0.16);
}

body[data-theme="light"] .ptc-action-reward {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-gold) 11%, white), #ffffff),
    #ffffff;
}

.ptc-action-reward span,
.ptc-action-reward small {
  color: var(--muted-2);
  line-height: 1.35;
}

.ptc-action-reward strong {
  color: var(--brand-gold);
  font-size: 1.28rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.ptc-ad-action-panel .primary-button,
.ptc-ad-action-panel .text-button {
  width: 100%;
  height: auto;
  min-height: 44px;
  border-radius: 14px;
  padding: 8px 12px;
  line-height: 1.18;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ptc-ad-action-panel .text-button {
  min-height: 38px;
}

.ptc-ad-row.is-complete .primary-button {
  border-color: color-mix(in srgb, var(--muted-2) 30%, var(--line));
  background: color-mix(in srgb, var(--surface-3) 80%, black);
  color: var(--muted);
  box-shadow: none;
}

body[data-theme="light"] .ptc-ad-row.is-complete .primary-button {
  background: #e2e8f0;
  color: var(--muted);
}

.blocked-ad-note {
  color: var(--muted-2);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.earn-more-hero,
.survey-wall-hero {
  border-radius: var(--radius-lg);
  padding: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.14), transparent 35%),
    var(--surface);
}

.earn-more-grid,
.survey-offer-grid {
  gap: 18px;
}

.earn-module,
.survey-offer-card {
  padding: 22px;
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease;
}

.wallet-layout {
  gap: 20px;
}

.wallet-summary strong#walletBalance {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  letter-spacing: -0.06em;
}

.payout-minimum-card {
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.09), rgba(34, 197, 94, 0.08));
}

.promo-link-grid,
.promo-asset-grid,
.social-template-grid,
.qr-card-grid {
  gap: 18px;
}

.promo-link-card,
.promo-asset-card,
.social-template-card,
.qr-card {
  border-radius: 22px;
  border-color: var(--line);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    var(--surface);
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease;
}

body[data-theme="light"] .promo-link-card,
body[data-theme="light"] .promo-asset-card,
body[data-theme="light"] .social-template-card,
body[data-theme="light"] .qr-card {
  background: #ffffff;
}

.promo-tab {
  border-radius: 999px;
}

.promo-tab.is-active {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(56, 189, 248, 0.14));
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.26);
}

.advertiser-public-shell,
.advertiser-console,
.admin-shell {
  width: min(1360px, calc(100% - 30px));
}

.advertiser-auth-copy h1 {
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.advertiser-tabs {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.045);
}

.advertiser-tab {
  border-radius: 13px;
}

.advertiser-tab.is-active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(34, 197, 94, 0.1));
  color: var(--ink);
}

.advertiser-table,
.admin-table {
  border-radius: 18px;
  overflow: hidden;
}

.viewer-shell {
  width: min(100%, 1800px);
  gap: 10px;
  padding: 10px clamp(10px, 1.6vw, 18px) 14px;
}

.viewer-topbar {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 8px 10px;
  background: rgba(6, 10, 18, 0.72);
  backdrop-filter: blur(18px);
}

body[data-theme="light"] .viewer-topbar {
  background: rgba(255, 255, 255, 0.86);
}

.viewer-panel {
  border-radius: 22px;
  padding: 10px;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.14), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(11, 16, 32, 0.92);
}

body[data-theme="light"] .viewer-panel {
  background: #ffffff;
}

.viewer-meta {
  gap: 10px;
}

.viewer-title-block h1 {
  letter-spacing: -0.035em;
}

.viewer-reward-stack {
  gap: 8px;
}

.reward-card,
.timer-card,
.viewer-mini-stat {
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.34);
}

body[data-theme="light"] .reward-card,
body[data-theme="light"] .timer-card,
body[data-theme="light"] .viewer-mini-stat {
  background: #f8fafc;
}

.viewer-actions {
  gap: 8px;
}

.viewer-status-strip span {
  border-radius: 999px;
}

.embed-fallback-panel {
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(250, 204, 21, 0.12), rgba(15, 23, 42, 0.88)),
    var(--surface);
}

.ad-frame-shell {
  min-height: 1120px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.08), rgba(34, 197, 94, 0.035)),
    #08111d;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 24px 80px rgba(0, 0, 0, 0.34);
}

.ad-browser-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(2, 6, 23, 0.78);
}

.browser-dots {
  display: flex;
  gap: 6px;
}

.browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand-coral);
}

.browser-dots span:nth-child(2) {
  background: var(--brand-gold);
}

.browser-dots span:nth-child(3) {
  background: var(--brand-mint);
}

.browser-address {
  display: grid;
  min-width: 0;
  justify-items: start;
}

.browser-address strong {
  font-size: 0.9rem;
}

.browser-address span {
  color: var(--muted-2);
  font-size: 0.76rem;
}

.browser-status {
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(34, 197, 94, 0.1);
  color: var(--brand-mint);
  font-size: 0.74rem;
  font-weight: 900;
}

.ad-frame {
  min-height: 1068px;
  height: max(1068px, calc(100vh - 124px));
  border: 0;
  border-radius: 0 0 24px 24px;
}

.reward-celebration {
  border-radius: 24px;
}

.ad-frame-shell.is-rewarded {
  align-self: start;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow-x: clip;
  overflow-y: visible;
}

.ad-frame-shell.is-rewarded .ad-frame {
  display: none;
  min-height: 0;
  height: 0;
}

.ad-frame-shell.is-rewarded .reward-celebration {
  position: relative;
  inset: auto;
  align-content: center;
  align-items: start;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: clip;
  padding: clamp(10px, 1.8vh, 18px) clamp(10px, 2.2vw, 22px);
}

.empty-state-block,
.compact-empty-state {
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(34, 197, 94, 0.055)),
    rgba(255, 255, 255, 0.035);
}

body[data-theme="light"] .empty-state-block,
body[data-theme="light"] .compact-empty-state {
  background: #ffffff;
}

.status-badge,
.level-badge,
.perk-pill {
  border-radius: 999px;
}

.toast {
  border-radius: 16px;
  box-shadow: var(--shadow);
}

@media (max-width: 1120px) {
  .auth-screen,
  .app-shell,
  .advertiser-public-shell {
    width: min(100% - 26px, 980px);
    grid-template-columns: 1fr;
  }

  .auth-panel {
    position: static;
  }

  .audience-grid,
  .preview-dashboard-grid,
  .growth-card-grid {
    grid-template-columns: 1fr;
  }

  .app-shell {
    padding-top: 14px;
  }

  .sidebar {
    position: static;
  }

  .ad-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1320px) {
  .ptc-ad-row {
    grid-template-columns: minmax(136px, 0.24fr) minmax(0, 1fr);
    grid-template-areas:
      "brand main"
      "meta meta"
      "action action";
  }

  .ptc-ad-actions {
    grid-template-columns: minmax(160px, 1fr) minmax(130px, 0.42fr) minmax(120px, 0.38fr);
    align-items: center;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .ptc-ad-actions .blocked-ad-note {
    grid-column: 1 / -1;
  }

  .ptc-ad-action-panel .primary-button,
  .ptc-ad-action-panel .text-button {
    align-self: stretch;
  }
}

@media (max-width: 1120px) {
  .ptc-ad-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "main"
      "meta"
      "action";
  }

  .ptc-ad-brand-block,
  .ptc-ad-actions {
    border-right: 0;
    border-left: 0;
  }

  .ptc-ad-brand-block {
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    align-items: center;
    border-bottom: 1px solid var(--line);
  }

  .ptc-ad-actions {
    grid-template-columns: 1fr;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  .test-mode-banner {
    font-size: 0.7rem;
  }

  .auth-screen,
  .main-content,
  .sidebar,
  .viewer-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .landing-topnav,
  .viewer-topbar,
  .member-status-account,
  .member-status-actions,
  .section-header,
  .panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .landing-nav {
    justify-content: flex-start;
  }

  .auth-copy h1 {
    font-size: clamp(2.7rem, 13vw, 4.6rem);
  }

  .audience-card {
    gap: 12px;
    min-height: auto;
    padding: 18px;
  }

  .audience-card h2 {
    margin: 10px 0 8px;
    font-size: 1.75rem;
  }

  .audience-card p {
    line-height: 1.48;
  }

  .audience-badge {
    margin-top: 10px;
  }

  .benefit-list {
    gap: 7px;
  }

  .benefit-list li {
    line-height: 1.35;
  }

  .audience-card .audience-note {
    padding-top: 9px;
    font-size: 0.82rem;
  }

  .primary-button,
  .text-button,
  .action-neutral,
  .landing-nav a,
  .viewer-actions .primary-button,
  .viewer-actions .text-button {
    width: 100%;
  }

  .member-status-metrics {
    grid-template-columns: 1fr;
  }

  .viewer-meta,
  .viewer-reward-stack,
  .ad-browser-bar {
    grid-template-columns: 1fr;
  }

  .ptc-ad-header,
  .ptc-ad-meta {
    grid-template-columns: 1fr;
  }

  .ptc-ad-status-stack {
    justify-items: start;
  }

  .ptc-ad-main,
  .ptc-ad-meta,
  .ptc-ad-brand-block,
  .ptc-ad-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .browser-status {
    width: fit-content;
  }

  .ad-frame-shell {
    min-height: 840px;
  }

  .ad-frame {
    min-height: 790px;
    height: max(790px, calc(100vh - 160px));
  }
}

/* Premium sidebar navigation */
.sidebar {
  gap: 18px;
  padding: 18px;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.34) transparent;
  background:
    radial-gradient(circle at 16% 4%, rgba(34, 197, 94, 0.18), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(56, 189, 248, 0.13), transparent 30%),
    linear-gradient(180deg, rgba(7, 17, 26, 0.98), rgba(3, 8, 14, 0.98));
}

body[data-theme="light"] .sidebar {
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 197, 94, 0.14), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(56, 189, 248, 0.12), transparent 28%),
    linear-gradient(180deg, #ffffff, #eef5fb);
  color: #0f172a;
}

.brand-home-button {
  position: relative;
  gap: 12px;
  min-height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(56, 189, 248, 0.08)),
    rgba(255, 255, 255, 0.035);
  background-size: 180% 180%, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: brand-card-aura 13s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

body[data-theme="light"] .brand-home-button {
  border-color: rgba(15, 23, 42, 0.08);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(56, 189, 248, 0.08)),
    #ffffff;
}

.brand-home-button::after {
  position: absolute;
  right: 14px;
  bottom: -1px;
  left: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.36), rgba(34, 197, 94, 0.3), transparent);
  background-size: 220% 100%;
  content: "";
  animation: brand-underline-flow 6.5s ease-in-out infinite;
}

.brand-home-button .brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 14px 30px rgba(34, 197, 94, 0.22),
    0 0 28px rgba(56, 189, 248, 0.16);
  animation: brand-mark-aura 8s ease-in-out infinite;
}

.brand-home-button strong {
  font-size: 1.08rem;
}

.brand-home-button span:not(.brand-mark) {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.nav-list {
  display: grid;
  gap: 6px;
  padding: 2px;
}

.sidebar-section-label {
  display: block;
  margin: 12px 8px 3px;
  color: color-mix(in srgb, var(--muted-2) 86%, transparent);
  font-size: 0.67rem;
  font-weight: 950;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.sidebar-section-label:first-child {
  margin-top: 2px;
}

.nav-item {
  position: relative;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 9px 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.018);
  color: var(--muted);
  cursor: pointer;
  font-weight: 850;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

body[data-theme="light"] .sidebar .nav-item {
  background: rgba(255, 255, 255, 0.62);
  color: #475569;
}

.sidebar .nav-item::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--brand-mint), var(--brand-sky));
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.45);
  content: "";
  opacity: 0;
  transform: scaleY(0.45);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.sidebar .nav-item::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.09) 48%, transparent 76%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-120%);
  transition:
    opacity 160ms ease,
    transform 360ms ease;
}

.sidebar .nav-item > span:first-child:not(.sidebar-link-badge) {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(2, 6, 23, 0.44);
  color: color-mix(in srgb, var(--ink) 88%, var(--brand-sky));
  font-size: 0.78rem;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

body[data-theme="light"] .sidebar .nav-item > span:first-child:not(.sidebar-link-badge) {
  border-color: rgba(15, 23, 42, 0.08);
  background: linear-gradient(135deg, #ffffff, #eef5fb);
  color: #0f172a;
}

.sidebar .nav-item .sidebar-link-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 22px;
  min-width: 0;
  margin-left: auto;
  border: 1px solid rgba(250, 204, 21, 0.24);
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(250, 204, 21, 0.09);
  color: var(--brand-gold);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  box-shadow: none;
}

.sidebar .nav-item:hover,
.sidebar .nav-item:focus-visible {
  border-color: rgba(56, 189, 248, 0.26);
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(34, 197, 94, 0.055)),
    rgba(255, 255, 255, 0.045);
  color: var(--ink);
  box-shadow:
    0 12px 26px rgba(56, 189, 248, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateX(3px);
}

.sidebar .nav-item:hover::after,
.sidebar .nav-item:focus-visible::after {
  opacity: 1;
  transform: translateX(120%);
}

.sidebar .nav-item:hover > span:first-child:not(.sidebar-link-badge),
.sidebar .nav-item:focus-visible > span:first-child:not(.sidebar-link-badge) {
  border-color: rgba(56, 189, 248, 0.28);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.24), rgba(56, 189, 248, 0.2));
  color: #f8fafc;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.08),
    0 0 18px rgba(56, 189, 248, 0.18);
  transform: translateX(1px);
}

.sidebar .nav-item.is-active {
  border-color: rgba(34, 197, 94, 0.45);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(56, 189, 248, 0.12)),
    rgba(255, 255, 255, 0.05);
  color: var(--ink);
  box-shadow:
    0 14px 32px rgba(34, 197, 94, 0.12),
    0 0 0 1px rgba(34, 197, 94, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
  animation: nav-active-breathe 8.5s ease-in-out infinite;
}

.sidebar .nav-item.is-active::before {
  opacity: 1;
  transform: scaleY(1);
  animation: nav-active-rail 4.8s ease-in-out infinite;
}

.sidebar .nav-item.is-active::after {
  opacity: 0.42;
  transform: translateX(-120%);
  animation: nav-active-sheen 7.5s ease-in-out infinite;
}

.sidebar .nav-item.is-active > span:first-child:not(.sidebar-link-badge) {
  border-color: rgba(34, 197, 94, 0.34);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.56), transparent 24%),
    linear-gradient(135deg, var(--brand-mint), var(--brand-sky));
  color: #03131a;
  box-shadow:
    0 12px 24px rgba(34, 197, 94, 0.22),
    0 0 26px rgba(56, 189, 248, 0.2);
}

.sidebar .nav-item.is-active .sidebar-link-badge {
  border-color: rgba(250, 204, 21, 0.42);
  background: rgba(250, 204, 21, 0.16);
  color: #fde68a;
}

.sidebar-panel {
  position: relative;
  margin-top: auto;
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 22px;
  padding: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.14), transparent 46%),
    linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(255, 255, 255, 0.035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-theme="light"] .sidebar-panel {
  border-color: rgba(14, 116, 144, 0.14);
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.13), transparent 46%),
    #ffffff;
}

.sidebar-panel::after {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-mint), var(--brand-sky), var(--brand-gold));
  content: "";
  opacity: 0.82;
}

.sidebar-panel .eyebrow {
  color: var(--brand-mint);
}

.sidebar-panel strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 28px;
  margin-top: 8px;
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(34, 197, 94, 0.1);
  color: var(--ink);
  font-size: 0.96rem;
}

.sidebar-panel strong::before {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--brand-mint);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.72);
  content: "";
}

.sidebar-panel p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.member-status-account {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px 6px 6px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.052),
    0 0 20px color-mix(in srgb, var(--primary) 4%, transparent);
  animation: account-chip-breathe 9s ease-in-out infinite;
}

body[data-theme="light"] .member-status-account {
  background: #ffffff;
}

.compact-avatar {
  border-radius: 14px;
  box-shadow:
    0 10px 20px rgba(34, 197, 94, 0.18),
    0 0 18px rgba(56, 189, 248, 0.12);
  animation: compact-avatar-aura 8.5s ease-in-out infinite;
}

.member-status-account .eyebrow {
  color: var(--brand-mint);
  font-size: 0.64rem;
}

@media (max-width: 1120px) {
  .sidebar {
    max-height: none;
    overflow: visible;
  }

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

  .sidebar-section-label {
    grid-column: 1 / -1;
    margin-top: 10px;
  }
}

@media (max-width: 760px) {
  .nav-list {
    grid-template-columns: 1fr;
  }

  .sidebar .nav-item,
  .brand-home-button,
  .sidebar-panel {
    width: 100%;
  }

  .member-status-account {
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .progress-track span::before,
  .progress-track span::after,
  .progress-track::before,
  .progress-track::after,
  .mini-progress-track span::before,
  .mini-progress-track span::after,
  .engagement-panel::before,
  .engagement-panel::after,
  .viewer-checkpoint-stat::after {
    animation: none !important;
    opacity: 0 !important;
  }

  .viewer-progress-markers .viewer-progress-marker {
    animation: none !important;
  }
}

/* Premium reward-complete overlay */
.reward-celebration {
  align-content: start;
  gap: 0;
  padding: clamp(28px, 5.2vh, 58px) clamp(14px, 4vw, 46px) clamp(18px, 3vh, 34px);
  background:
    radial-gradient(circle at 50% 13%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 30%),
    radial-gradient(circle at 82% 42%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 36%),
    radial-gradient(circle at 18% 72%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 32%),
    linear-gradient(135deg, rgb(2 6 23 / 0.38), rgb(7 11 22 / 0.9) 54%, rgb(2 8 16 / 0.96));
}

.reward-celebration::before {
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgb(255 255 255 / 0.02) 1px, transparent 1px),
    linear-gradient(105deg, transparent 12%, color-mix(in srgb, #ffffff 20%, transparent) 46%, transparent 72%);
  background-size: 42px 42px, 42px 42px, auto;
}

.reward-celebration::after {
  opacity: 0.16;
  animation: reward-prize-aura 5200ms linear infinite;
}

.reward-complete-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: clamp(14px, 2vh, 20px);
  width: min(980px, 100%);
  min-height: min(760px, calc(100% - 8px));
  border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--line));
  border-radius: clamp(22px, 2.4vw, 30px);
  padding: clamp(24px, 3vw, 38px) clamp(18px, 2.8vw, 32px) clamp(18px, 2.6vw, 30px);
  overflow: clip;
  overscroll-behavior: auto;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 38%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
    linear-gradient(145deg, rgb(255 255 255 / 0.085), rgb(255 255 255 / 0.025)),
    rgb(15 23 42 / 0.76);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    inset 0 -1px 0 color-mix(in srgb, var(--primary) 12%, transparent),
    0 0 0 1px rgb(255 255 255 / 0.035),
    0 28px 92px rgb(0 0 0 / 0.35),
    0 0 82px color-mix(in srgb, var(--primary) 16%, transparent);
  backdrop-filter: blur(14px) saturate(1.12);
}

.reward-complete-shell::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--primary), var(--accent), var(--amber), var(--primary));
  content: "";
  opacity: 0.42;
  pointer-events: none;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 1px;
}

.reward-complete-shell::after {
  position: absolute;
  inset: -28%;
  z-index: -1;
  background:
    conic-gradient(from 110deg, transparent, color-mix(in srgb, var(--primary) 12%, transparent), transparent, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
  content: "";
  opacity: 0.62;
  pointer-events: none;
  animation: reward-prize-aura 7600ms linear infinite;
}

.reward-credit-trail {
  position: absolute;
  left: 50%;
  top: 43%;
  z-index: 6;
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 6px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 58%, var(--primary));
  border-radius: 999px;
  padding: 6px 10px;
  background:
    radial-gradient(circle at 22% 18%, rgb(255 255 255 / 0.22), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 24%, #052e1a), color-mix(in srgb, var(--brand-gold) 18%, #05202f));
  box-shadow:
    0 0 18px color-mix(in srgb, var(--primary) 20%, transparent),
    0 0 34px color-mix(in srgb, var(--brand-gold) 14%, transparent);
  color: #eafff6;
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(0.7);
  will-change: opacity, transform;
}

.reward-credit-trail i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--brand-gold);
  box-shadow:
    0 0 10px color-mix(in srgb, var(--brand-gold) 74%, transparent),
    0 0 20px color-mix(in srgb, var(--primary) 42%, transparent);
}

.reward-credit-trail::before {
  position: absolute;
  right: 100%;
  top: 50%;
  width: clamp(42px, 8vw, 94px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-gold) 54%, transparent), var(--primary));
  content: "";
  opacity: 0.82;
  transform: translateY(-50%);
}

.reward-wallet-crediting .reward-credit-trail {
  animation: reward-credit-transfer 620ms cubic-bezier(0.18, 0.82, 0.2, 1) both;
}

.reward-wallet-crediting .celebration-stats > div:nth-child(1)::before {
  animation: reward-wallet-check-pulse 620ms cubic-bezier(0.18, 0.9, 0.2, 1) 120ms both;
}

.reward-wallet-updated .celebration-stats > div:nth-child(1) {
  animation:
    reward-stat-pop 560ms cubic-bezier(0.18, 0.9, 0.2, 1) both,
    reward-wallet-card-confirm 620ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.reward-wallet-updated .celebration-stats > div:nth-child(1) small::after {
  display: inline-flex;
  margin-left: 6px;
  color: color-mix(in srgb, var(--primary) 82%, #ffffff);
  font-weight: 1000;
  content: "Credited";
  opacity: 0;
  animation: reward-wallet-credit-label 620ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.reward-level-up-fireworks {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 39% 52%, color-mix(in srgb, var(--brand-gold) 18%, transparent), transparent 20%),
    radial-gradient(circle at 53% 32%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 18%),
    linear-gradient(180deg, transparent 8%, color-mix(in srgb, var(--brand-gold) 6%, transparent) 42%, transparent 76%);
  mix-blend-mode: screen;
  transform-origin: 45% 44%;
}

.reward-level-up-fireworks::before,
.reward-level-up-fireworks::after {
  position: absolute;
  border-radius: 999px;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(0.4);
  will-change: opacity, transform;
}

.reward-level-up-fireworks::before {
  top: 50%;
  left: 39%;
  width: clamp(210px, 31vw, 390px);
  height: clamp(210px, 31vw, 390px);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 54%, transparent);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--brand-gold) 16%, transparent), transparent 58%),
    conic-gradient(from 20deg, transparent, color-mix(in srgb, var(--brand-gold) 42%, transparent), transparent 18%, color-mix(in srgb, var(--primary) 34%, transparent), transparent 38%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 62%);
  box-shadow:
    0 0 42px color-mix(in srgb, var(--brand-gold) 18%, transparent),
    inset 0 0 52px color-mix(in srgb, var(--primary) 12%, transparent);
}

.reward-level-up-fireworks::after {
  top: 32%;
  left: 53%;
  width: clamp(150px, 23vw, 300px);
  height: clamp(150px, 23vw, 300px);
  border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--primary) 13%, transparent), transparent 60%),
    conic-gradient(from 130deg, transparent, color-mix(in srgb, var(--accent) 38%, transparent), transparent 24%, color-mix(in srgb, var(--brand-gold) 30%, transparent), transparent 52%);
  box-shadow: 0 0 36px color-mix(in srgb, var(--primary) 16%, transparent);
}

.reward-level-up-fireworks span {
  --firework-origin-x: 39%;
  --firework-origin-y: 52%;
  --firework-x: 0px;
  --firework-y: 0px;
  --firework-size: 6px;
  --firework-color: var(--brand-gold);
  --firework-delay: 0ms;
  position: absolute;
  top: calc(var(--firework-origin-y) + var(--firework-y));
  left: calc(var(--firework-origin-x) + var(--firework-x));
  width: var(--firework-size);
  height: var(--firework-size);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 12%, currentColor 20% 48%, transparent 70%);
  color: var(--firework-color);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.2);
  box-shadow:
    0 0 10px currentColor,
    0 0 24px currentColor,
    0 0 46px color-mix(in srgb, var(--firework-color) 36%, transparent);
  will-change: opacity, transform;
}

.reward-level-up-fireworks span::before {
  position: absolute;
  inset: clamp(-13px, -1.6vw, -8px);
  border-radius: inherit;
  background:
    radial-gradient(circle, currentColor 0 8%, transparent 10%),
    conic-gradient(from 0deg, transparent, currentColor 9%, transparent 18%, transparent 34%, currentColor 43%, transparent 50%, transparent 66%, currentColor 74%, transparent 82%);
  content: "";
  opacity: 0.48;
}

.reward-level-up-fireworks span::after {
  position: absolute;
  top: 50%;
  right: 50%;
  width: clamp(18px, 3.6vw, 46px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 54%, transparent), currentColor);
  content: "";
  opacity: 0;
  transform: translateY(-50%) rotate(calc(var(--firework-angle, 0deg) + 180deg)) scaleX(0.1);
  transform-origin: right center;
  will-change: opacity, transform;
}

.reward-celebration.level-up-fireworks-active .reward-level-up-fireworks {
  opacity: 1;
  animation: reward-level-up-field-pop 3800ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.reward-celebration.level-up-fireworks-active .reward-level-up-fireworks::before {
  animation: reward-firework-halo 3100ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.reward-celebration.level-up-fireworks-active .reward-level-up-fireworks::after {
  animation: reward-firework-halo 2900ms cubic-bezier(0.16, 0.86, 0.24, 1) 240ms both;
}

.reward-celebration.level-up-fireworks-active .reward-level-up-fireworks span {
  animation: reward-firework-burst 3000ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
  animation-delay: var(--firework-delay);
}

.reward-celebration.level-up-fireworks-active .reward-level-up-fireworks span::after {
  animation: reward-firework-trail 1600ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
  animation-delay: var(--firework-delay);
}

.reward-celebration.level-up-fireworks-active .reward-level-up-fireworks span::before {
  animation: reward-firework-star-pop 2600ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
  animation-delay: var(--firework-delay);
}

.reward-level-up-fireworks span:nth-child(1) {
  --firework-x: -170px;
  --firework-y: -120px;
  --firework-angle: 35deg;
  --firework-color: #fff7a8;
}

.reward-level-up-fireworks span:nth-child(2) {
  --firework-x: -82px;
  --firework-y: -158px;
  --firework-angle: 64deg;
  --firework-color: #34f5c5;
  --firework-delay: 45ms;
}

.reward-level-up-fireworks span:nth-child(3) {
  --firework-x: 72px;
  --firework-y: -168px;
  --firework-angle: 112deg;
  --firework-color: #7dd3fc;
  --firework-delay: 80ms;
}

.reward-level-up-fireworks span:nth-child(4) {
  --firework-x: 176px;
  --firework-y: -114px;
  --firework-angle: 145deg;
  --firework-color: #facc15;
  --firework-delay: 120ms;
}

.reward-level-up-fireworks span:nth-child(5) {
  --firework-x: 212px;
  --firework-y: -18px;
  --firework-angle: 178deg;
  --firework-color: #22c55e;
  --firework-delay: 165ms;
}

.reward-level-up-fireworks span:nth-child(6) {
  --firework-x: 162px;
  --firework-y: 92px;
  --firework-angle: 218deg;
  --firework-color: #a7f3d0;
  --firework-delay: 205ms;
}

.reward-level-up-fireworks span:nth-child(7) {
  --firework-x: 34px;
  --firework-y: 142px;
  --firework-angle: 258deg;
  --firework-color: #fef08a;
  --firework-delay: 245ms;
}

.reward-level-up-fireworks span:nth-child(8) {
  --firework-x: -126px;
  --firework-y: 116px;
  --firework-angle: 304deg;
  --firework-color: #2dd4bf;
  --firework-delay: 285ms;
}

.reward-level-up-fireworks span:nth-child(9) {
  --firework-origin-x: 53%;
  --firework-origin-y: 32%;
  --firework-x: -142px;
  --firework-y: -88px;
  --firework-angle: 28deg;
  --firework-color: #fef3c7;
  --firework-delay: 110ms;
  --firework-size: 5px;
}

.reward-level-up-fireworks span:nth-child(10) {
  --firework-origin-x: 53%;
  --firework-origin-y: 32%;
  --firework-x: 136px;
  --firework-y: -76px;
  --firework-angle: 148deg;
  --firework-color: #67e8f9;
  --firework-delay: 155ms;
  --firework-size: 5px;
}

.reward-level-up-fireworks span:nth-child(11) {
  --firework-origin-x: 53%;
  --firework-origin-y: 32%;
  --firework-x: 184px;
  --firework-y: 54px;
  --firework-angle: 206deg;
  --firework-color: #bef264;
  --firework-delay: 215ms;
  --firework-size: 5px;
}

.reward-level-up-fireworks span:nth-child(12) {
  --firework-origin-x: 53%;
  --firework-origin-y: 32%;
  --firework-x: -184px;
  --firework-y: 58px;
  --firework-angle: 324deg;
  --firework-color: #fde68a;
  --firework-delay: 260ms;
  --firework-size: 5px;
}

.reward-level-up-fireworks span:nth-child(13) {
  --firework-origin-x: 39%;
  --firework-origin-y: 52%;
  --firework-x: -42px;
  --firework-y: -74px;
  --firework-angle: 24deg;
  --firework-color: #ffffff;
  --firework-delay: 70ms;
  --firework-size: 4px;
}

.reward-level-up-fireworks span:nth-child(14) {
  --firework-origin-x: 39%;
  --firework-origin-y: 52%;
  --firework-x: 88px;
  --firework-y: -70px;
  --firework-angle: 150deg;
  --firework-color: #bbf7d0;
  --firework-delay: 135ms;
  --firework-size: 4px;
}

.reward-level-up-fireworks span:nth-child(15) {
  --firework-origin-x: 39%;
  --firework-origin-y: 52%;
  --firework-x: 112px;
  --firework-y: 48px;
  --firework-angle: 210deg;
  --firework-color: #fef08a;
  --firework-delay: 205ms;
  --firework-size: 4px;
}

.reward-level-up-fireworks span:nth-child(16) {
  --firework-origin-x: 39%;
  --firework-origin-y: 52%;
  --firework-x: -84px;
  --firework-y: 62px;
  --firework-angle: 315deg;
  --firework-color: #99f6e4;
  --firework-delay: 250ms;
  --firework-size: 4px;
}

.reward-level-up-fireworks span:nth-child(17) {
  --firework-origin-x: 53%;
  --firework-origin-y: 32%;
  --firework-x: 18px;
  --firework-y: -118px;
  --firework-angle: 90deg;
  --firework-color: #fef3c7;
  --firework-delay: 190ms;
  --firework-size: 4px;
}

.reward-level-up-fireworks span:nth-child(18) {
  --firework-origin-x: 53%;
  --firework-origin-y: 32%;
  --firework-x: -28px;
  --firework-y: 104px;
  --firework-angle: 270deg;
  --firework-color: #67e8f9;
  --firework-delay: 300ms;
  --firework-size: 4px;
}

.reward-complete-header {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-top: clamp(2px, 0.8vh, 8px);
  text-align: center;
}

.reward-complete-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.reward-complete-header h2 {
  margin: 0;
  padding: 2px 0 4px;
  color: var(--ink);
  font-size: clamp(1.75rem, 4vw, 3.15rem);
  letter-spacing: 0;
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.reward-celebration-pop .reward-complete-header h2 {
  animation: reward-title-ignite 1800ms ease-out 120ms both;
}

.reward-complete-header p {
  width: min(620px, 100%);
  margin: 0;
  color: color-mix(in srgb, var(--muted) 84%, var(--ink));
  font-size: clamp(0.94rem, 1.35vw, 1.08rem);
  font-weight: 750;
  line-height: 1.45;
}

.reward-verification-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

.reward-verification-row span {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 76%, var(--primary));
  border-radius: 999px;
  padding: 4px 10px;
  background:
    radial-gradient(circle at 18% 12%, rgb(255 255 255 / 0.13), transparent 36%),
    color-mix(in srgb, var(--surface-2) 74%, transparent);
  color: color-mix(in srgb, var(--muted) 78%, var(--ink));
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 0 18px color-mix(in srgb, var(--primary) 5%, transparent);
}

.reward-verification-row span:nth-child(2) {
  border-color: color-mix(in srgb, var(--primary) 52%, transparent);
  color: color-mix(in srgb, var(--primary) 78%, #ffffff);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 0 24px color-mix(in srgb, var(--primary) 12%, transparent);
}

.reward-complete-badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent);
  border-radius: 999px;
  padding: 5px 12px;
  background:
    radial-gradient(circle at 20% 20%, rgb(255 255 255 / 0.16), transparent 34%),
    color-mix(in srgb, var(--primary) 16%, transparent);
  color: color-mix(in srgb, var(--primary) 76%, #ffffff);
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 28px color-mix(in srgb, var(--primary) 14%, transparent);
}

.reward-celebration-pop .reward-complete-badge {
  animation: reward-badge-spark 1850ms ease-out both;
}

.reward-rarity-badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--primary));
  border-radius: 999px;
  padding: 5px 12px;
  background:
    radial-gradient(circle at 20% 20%, rgb(255 255 255 / 0.13), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 76%, transparent), color-mix(in srgb, var(--primary) 9%, transparent));
  color: color-mix(in srgb, var(--muted) 72%, var(--ink));
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 0 20px color-mix(in srgb, var(--primary) 7%, transparent);
}

.reward-rarity-badge.reward-rarity-boosted {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--accent));
  background:
    radial-gradient(circle at 22% 18%, rgb(255 255 255 / 0.17), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
  color: color-mix(in srgb, var(--primary) 78%, #ffffff);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    0 0 24px color-mix(in srgb, var(--primary) 15%, transparent);
}

.reward-rarity-badge.reward-rarity-premium {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--primary));
  background:
    radial-gradient(circle at 22% 18%, rgb(255 255 255 / 0.18), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--primary) 16%, transparent));
  color: color-mix(in srgb, var(--accent) 74%, #ffffff);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    0 0 26px color-mix(in srgb, var(--accent) 16%, transparent);
}

.reward-rarity-badge.reward-rarity-legendary {
  border-color: color-mix(in srgb, var(--brand-gold) 68%, var(--primary));
  background:
    radial-gradient(circle at 24% 18%, rgb(255 255 255 / 0.2), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-gold) 25%, transparent), color-mix(in srgb, var(--primary) 18%, transparent));
  color: #fff4a8;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    0 0 32px color-mix(in srgb, var(--brand-gold) 20%, transparent),
    0 0 46px color-mix(in srgb, var(--primary) 10%, transparent);
  animation: reward-rarity-breathe 4200ms ease-in-out infinite;
}

.reward-complete-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(280px, 0.78fr);
  gap: clamp(12px, 1.8vw, 18px);
  align-items: stretch;
  margin-bottom: clamp(12px, 1.8vh, 20px);
}

.reward-complete-hero .celebration-copy {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 100%;
  min-height: clamp(230px, 30vh, 330px);
  margin: 0;
  border-color: color-mix(in srgb, var(--primary) 42%, var(--amber));
  padding: clamp(24px, 3.4vw, 42px);
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 38%),
    radial-gradient(circle at 22% 78%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 30%),
    linear-gradient(145deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.022)),
    rgb(2 6 23 / 0.34);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    inset 0 -1px 0 color-mix(in srgb, var(--primary) 15%, transparent),
    0 22px 58px rgb(0 0 0 / 0.22),
    0 0 58px color-mix(in srgb, var(--primary) 13%, transparent);
}

.reward-orbital-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(78%, 420px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: 999px;
  opacity: 0.5;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 56%, color-mix(in srgb, var(--primary) 9%, transparent) 58%, transparent 62%),
    conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--primary) 28%, transparent), transparent 18%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 42%, color-mix(in srgb, var(--amber) 14%, transparent), transparent 70%);
  box-shadow:
    inset 0 0 38px color-mix(in srgb, var(--primary) 6%, transparent),
    0 0 42px color-mix(in srgb, var(--primary) 8%, transparent);
  transform: translate3d(-50%, -50%, 0);
  animation: reward-orbital-ring-spin 9200ms linear infinite;
}

.reward-orbital-ring::before {
  position: absolute;
  inset: 9%;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: inherit;
  background:
    conic-gradient(from 15deg, transparent 0 76%, color-mix(in srgb, #ffffff 18%, transparent) 84%, transparent 92%),
    radial-gradient(circle, transparent 66%, color-mix(in srgb, var(--accent) 8%, transparent) 68%, transparent 71%);
  content: "";
  opacity: 0.52;
}

.reward-rarity-premium .reward-orbital-ring,
.reward-rarity-legendary .reward-orbital-ring {
  opacity: 0.7;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--primary));
  box-shadow:
    inset 0 0 42px color-mix(in srgb, var(--accent) 8%, transparent),
    0 0 54px color-mix(in srgb, var(--accent) 12%, transparent);
}

.reward-rarity-boosted .reward-orbital-ring {
  opacity: 0.62;
  border-color: color-mix(in srgb, var(--primary) 42%, var(--accent));
  box-shadow:
    inset 0 0 40px color-mix(in srgb, var(--primary) 8%, transparent),
    0 0 50px color-mix(in srgb, var(--primary) 12%, transparent);
}

.reward-rarity-legendary .reward-orbital-ring {
  border-color: color-mix(in srgb, var(--brand-gold) 46%, var(--primary));
  box-shadow:
    inset 0 0 46px color-mix(in srgb, var(--brand-gold) 8%, transparent),
    0 0 62px color-mix(in srgb, var(--brand-gold) 16%, transparent),
    0 0 90px color-mix(in srgb, var(--primary) 10%, transparent);
}

.reward-xp-energy-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.reward-xp-energy-field span {
  position: absolute;
  top: var(--xp-y, 50%);
  left: var(--xp-x, 50%);
  width: var(--xp-size, 5px);
  height: var(--xp-size, 5px);
  border-radius: 999px;
  background:
    radial-gradient(circle, #ffffff 0 15%, color-mix(in srgb, var(--accent) 72%, var(--primary)) 24% 56%, transparent 72%);
  opacity: 0;
  box-shadow:
    0 0 10px color-mix(in srgb, var(--accent) 62%, transparent),
    0 0 22px color-mix(in srgb, var(--primary) 24%, transparent);
  transform: translate(-50%, -50%) scale(0.72);
}

.reward-xp-energy-field span:nth-child(1) {
  --xp-x: 14%;
  --xp-y: 22%;
  --xp-size: 5px;
}

.reward-xp-energy-field span:nth-child(2) {
  --xp-x: 83%;
  --xp-y: 24%;
  --xp-size: 4px;
}

.reward-xp-energy-field span:nth-child(3) {
  --xp-x: 20%;
  --xp-y: 76%;
  --xp-size: 6px;
}

.reward-xp-energy-field span:nth-child(4) {
  --xp-x: 78%;
  --xp-y: 72%;
  --xp-size: 5px;
}

.reward-xp-energy-field span:nth-child(5) {
  --xp-x: 35%;
  --xp-y: 12%;
  --xp-size: 3px;
}

.reward-xp-energy-field span:nth-child(6) {
  --xp-x: 66%;
  --xp-y: 14%;
  --xp-size: 4px;
}

.reward-xp-energy-field span:nth-child(7) {
  --xp-x: 31%;
  --xp-y: 88%;
  --xp-size: 4px;
}

.reward-xp-energy-field span:nth-child(8) {
  --xp-x: 70%;
  --xp-y: 86%;
  --xp-size: 5px;
}

.reward-staged-sequence.reward-xp-active .reward-xp-energy-field span {
  animation: reward-xp-converge 1550ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
  animation-delay: calc(180ms + var(--xp-delay, 0ms));
}

.reward-staged-sequence.reward-money-hero .reward-xp-energy-field span,
.reward-staged-sequence.reward-money-landed .reward-xp-energy-field span {
  animation: none;
  opacity: 0;
}

.reward-staged-sequence .reward-xp-energy-field span:nth-child(2),
.reward-staged-sequence .reward-xp-energy-field span:nth-child(5) {
  --xp-delay: 70ms;
}

.reward-staged-sequence .reward-xp-energy-field span:nth-child(3),
.reward-staged-sequence .reward-xp-energy-field span:nth-child(6) {
  --xp-delay: 120ms;
}

.reward-staged-sequence .reward-xp-energy-field span:nth-child(4),
.reward-staged-sequence .reward-xp-energy-field span:nth-child(7) {
  --xp-delay: 170ms;
}

.reward-staged-sequence .reward-xp-energy-field span:nth-child(8) {
  --xp-delay: 220ms;
}

.celebration-copy .celebration-burst {
  top: clamp(14px, 2vw, 22px);
  left: auto;
  right: clamp(14px, 2vw, 22px);
  z-index: 0;
  width: clamp(46px, 5vw, 66px);
  height: clamp(46px, 5vw, 66px);
  transform: none;
}

.celebration-copy strong {
  margin: 10px 0 8px;
  font-size: clamp(4rem, 8.8vw, 7.2rem);
  letter-spacing: -0.07em;
}

.celebration-copy > #rewardCelebrationAmount {
  z-index: 8;
  font-size: clamp(4.2rem, 9.2vw, 7.65rem);
  letter-spacing: -0.055em;
}

.celebration-copy > .eyebrow,
.celebration-copy .level-up-ribbon,
.celebration-copy p,
.reward-balance-route,
.reward-next-goal {
  z-index: 9;
}

.celebration-copy .reward-level-up-card {
  display: grid;
  place-items: center;
  width: min(230px, 100%);
  min-height: clamp(112px, 16vh, 148px);
  margin: 8px auto 12px;
  padding: clamp(10px, 1.8vh, 14px) clamp(14px, 2vw, 18px);
  text-align: center;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    0 0 20px color-mix(in srgb, var(--brand-gold) 22%, transparent),
    0 0 36px color-mix(in srgb, var(--primary) 12%, transparent);
}

.celebration-copy .reward-level-up-card strong {
  display: grid;
  place-items: center;
  gap: 0;
  width: 100%;
  margin: 2px 0 3px;
  color: #fff7d1;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  font-size: clamp(1.8rem, 3.75vw, 3.05rem);
  letter-spacing: 0;
  line-height: 0.88;
  text-align: center;
  text-shadow:
    0 0 20px color-mix(in srgb, var(--brand-gold) 58%, transparent),
    0 5px 18px rgb(0 0 0 / 0.42);
}

.celebration-copy .reward-level-up-card strong span,
.celebration-copy .reward-level-up-card strong b {
  display: block;
  width: 100%;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: center;
}

.celebration-copy .reward-level-up-card strong b {
  display: flex;
  gap: 0.14em;
  align-items: baseline;
  justify-content: center;
  line-height: 0.94;
}

.celebration-copy .reward-level-up-card strong em,
.celebration-copy .reward-level-up-card strong i {
  color: inherit;
  font: inherit;
  font-style: normal;
}

.celebration-copy .reward-level-up-card strong em {
  font-size: 0.58em;
  opacity: 0.72;
}

.celebration-copy .reward-level-up-card small {
  font-size: clamp(0.7rem, 1.2vw, 0.86rem);
  line-height: 1.1;
}

.reward-balance-route {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border: 1px solid color-mix(in srgb, var(--primary) 44%, transparent);
  border-radius: 999px;
  padding: 5px 11px;
  background:
    radial-gradient(circle at 22% 16%, rgb(255 255 255 / 0.14), transparent 34%),
    color-mix(in srgb, var(--primary) 12%, transparent);
  color: color-mix(in srgb, var(--primary) 82%, #ffffff);
  font-size: clamp(0.72rem, 1vw, 0.84rem);
  font-weight: 1000;
  letter-spacing: 0.025em;
  text-align: center;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 0 26px color-mix(in srgb, var(--primary) 11%, transparent);
}

.reward-next-goal {
  position: relative;
  z-index: 2;
  display: block;
  max-width: min(420px, 100%);
  color: color-mix(in srgb, var(--accent) 66%, var(--ink));
  font-size: clamp(0.72rem, 1.05vw, 0.88rem);
  font-weight: 900;
  line-height: 1.28;
  text-align: center;
}

.celebration-copy p {
  width: min(560px, 100%);
  font-size: clamp(0.94rem, 1.45vw, 1.08rem);
}

.reward-next-actions {
  position: relative;
  display: grid;
  align-content: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: clamp(18px, 2vw, 24px);
  padding: clamp(18px, 2.6vw, 26px);
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 34%),
    linear-gradient(145deg, rgb(255 255 255 / 0.065), rgb(255 255 255 / 0.018)),
    rgb(15 23 42 / 0.52);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 16px 44px rgb(0 0 0 / 0.18);
}

.reward-next-actions::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 12%, rgb(255 255 255 / 0.11), transparent 54%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-120%);
}

.reward-next-actions > * {
  position: relative;
  z-index: 1;
}

.reward-celebration-pop .reward-next-actions::before {
  animation: reward-card-sheen 1780ms ease-out 300ms both;
}

.reward-celebration.level-up-fireworks-active.reward-celebration-pop .reward-next-actions::before {
  animation: none;
  opacity: 0;
  transform: none;
}

.reward-celebration.level-up-fireworks-active.reward-celebration-pop .reward-quantum-field span {
  animation: none;
  opacity: 0;
}

.reward-next-actions strong {
  color: var(--ink);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  letter-spacing: -0.035em;
}

.reward-next-actions p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.45;
}

.reward-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 4px;
}

.reward-action-button {
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
}

.reward-action-primary {
  box-shadow:
    0 0 0 1px color-mix(in srgb, #ffffff 13%, transparent) inset,
    0 0 30px color-mix(in srgb, var(--primary) 22%, transparent);
}

.celebration-stats {
  position: relative;
  z-index: 2;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.25vw, 14px);
  width: 100%;
  margin-top: clamp(10px, 1.6vh, 18px);
}

.celebration-stats > div {
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "icon label"
    "icon value"
    "micro micro"
    "progress progress";
  min-height: 132px;
  border-color: color-mix(in srgb, var(--primary) 25%, var(--line));
  border-radius: 20px;
  padding: 15px;
}

.celebration-stats > div::before {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

.celebration-stats > div:nth-child(2)::before {
  border-color: color-mix(in srgb, var(--amber) 50%, transparent);
  background:
    radial-gradient(circle at 28% 18%, rgb(255 255 255 / 0.32), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--amber) 58%, var(--surface-2)), color-mix(in srgb, var(--primary) 34%, var(--surface-2)));
  content: "+";
}

.celebration-stats > div:nth-child(3)::before {
  border-color: color-mix(in srgb, var(--amber) 42%, transparent);
  background:
    radial-gradient(circle at 28% 18%, rgb(255 255 255 / 0.32), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--amber) 48%, var(--surface-2)), color-mix(in srgb, var(--primary) 44%, var(--surface-2)));
  content: "XP";
}

.celebration-stats > div:nth-child(4)::before {
  background:
    radial-gradient(circle at 28% 18%, rgb(255 255 255 / 0.32), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 52%, var(--surface-2)), color-mix(in srgb, var(--primary) 40%, var(--surface-2)));
  content: "LV";
}

.celebration-stats > div > span {
  font-size: 0.65rem;
}

.celebration-stats > div > strong {
  font-size: clamp(1.14rem, 1.75vw, 1.55rem);
}

.celebration-stats > div > small {
  grid-area: micro;
  display: block;
  margin-top: 10px;
  color: color-mix(in srgb, var(--muted) 88%, var(--ink));
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.3;
}

.reward-celebration-pop .celebration-stats > div:nth-child(4) {
  animation-delay: 420ms;
}

.reward-progress-track {
  height: 10px;
  margin-top: 10px;
}

.reward-daily-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--line));
  border-radius: 18px;
  padding: 13px 16px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--amber) 12%, transparent), color-mix(in srgb, var(--primary) 8%, transparent)),
    rgb(15 23 42 / 0.42);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.reward-daily-strip span {
  color: var(--amber);
  font-size: 0.7rem;
  font-weight: 1000;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.reward-daily-strip strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-celebration-pop .reward-complete-shell {
  animation: reward-overlay-arrive 760ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.reward-celebration-pop .reward-complete-header,
.reward-celebration-pop .reward-next-actions,
.reward-celebration-pop .reward-daily-strip {
  animation: stat-card-enter 980ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.reward-celebration-pop .reward-next-actions {
  animation-delay: 120ms;
}

.reward-celebration-pop .reward-daily-strip {
  animation-delay: 440ms;
}

.viewer-panel.is-rewarded + .embed-fallback-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px 10px;
  opacity: 0.82;
  box-shadow: none;
}

body[data-theme="light"] .reward-celebration {
  background:
    radial-gradient(circle at 50% 13%, rgba(34, 197, 94, 0.2), transparent 30%),
    radial-gradient(circle at 82% 42%, rgba(56, 189, 248, 0.14), transparent 36%),
    linear-gradient(135deg, rgba(248, 250, 252, 0.94), rgba(226, 232, 240, 0.96));
}

body[data-theme="light"] .reward-complete-shell,
body[data-theme="light"] .reward-next-actions,
body[data-theme="light"] .reward-daily-strip,
body[data-theme="light"] .reward-complete-hero .celebration-copy,
body[data-theme="light"] .celebration-stats > div,
body[data-theme="light"] .reward-progression-panel,
body[data-theme="light"] .reward-progression-chip,
body[data-theme="light"] .reward-unlock-reveal {
  background:
    radial-gradient(circle at 12% 8%, rgba(34, 197, 94, 0.11), transparent 38%),
    #ffffff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 18px 46px rgb(15 23 42 / 0.12);
}

body[data-theme="light"] .reward-complete-header h2,
body[data-theme="light"] .reward-next-actions strong,
body[data-theme="light"] .reward-daily-strip strong {
  color: #0f172a;
}

.ad-frame-shell.is-rewarded .reward-complete-shell {
  align-self: start;
  align-content: start;
  justify-self: center;
  gap: clamp(8px, 1.1vh, 11px);
  width: min(900px, 100%);
  min-height: 0;
  max-height: none;
  padding: clamp(10px, 1.5vh, 14px) clamp(12px, 2vw, 22px) clamp(14px, 2.2vh, 22px);
  overflow: clip;
}

.ad-frame-shell.is-rewarded .reward-complete-header {
  gap: 3px;
  padding-top: 0;
}

.ad-frame-shell.is-rewarded .reward-complete-badge {
  min-height: 20px;
  padding: 4px 10px;
  font-size: 0.62rem;
}

.ad-frame-shell.is-rewarded .reward-complete-header h2 {
  font-size: clamp(1.45rem, 3.15vw, 2.35rem);
  line-height: 1.02;
}

.ad-frame-shell.is-rewarded .reward-complete-header p {
  font-size: clamp(0.78rem, 1.15vw, 0.94rem);
  line-height: 1.25;
}

.ad-frame-shell.is-rewarded .reward-verification-row {
  gap: 5px;
  margin-top: 2px;
}

.ad-frame-shell.is-rewarded .reward-verification-row span {
  min-height: 18px;
  padding: 3px 8px;
  font-size: 0.52rem;
}

.ad-frame-shell.is-rewarded .reward-complete-hero {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.62fr);
  gap: clamp(8px, 1.25vw, 12px);
  align-items: stretch;
  min-height: 0;
  margin-bottom: clamp(8px, 1.25vh, 12px);
}

.ad-frame-shell.is-rewarded .reward-complete-hero .celebration-copy {
  align-content: center;
  gap: clamp(3px, 0.55vh, 6px);
  min-height: clamp(238px, 31vh, 288px);
  padding: clamp(10px, 1.65vw, 16px);
}

.ad-frame-shell.is-rewarded .celebration-copy .celebration-burst {
  width: clamp(38px, 4vw, 52px);
  height: clamp(38px, 4vw, 52px);
}

.ad-frame-shell.is-rewarded .celebration-copy > .eyebrow:not(.level-up-ribbon) {
  min-height: 18px;
  padding: 3px 9px;
  font-size: 0.58rem;
}

.ad-frame-shell.is-rewarded .level-up-ribbon {
  margin: 3px auto 2px;
  padding: 3px 9px;
  font-size: 0.62rem;
}

.ad-frame-shell.is-rewarded .celebration-copy .reward-level-up-card {
  width: min(160px, 100%);
  min-height: clamp(68px, 8.8vh, 86px);
  margin: 2px auto 3px;
  padding: clamp(5px, 0.78vh, 7px) clamp(9px, 1.2vw, 11px);
}

.ad-frame-shell.is-rewarded .celebration-copy .reward-level-up-card strong {
  font-size: clamp(1.16rem, 2.2vw, 1.72rem);
  line-height: 1;
}

.ad-frame-shell.is-rewarded .celebration-copy .reward-level-up-card small {
  font-size: clamp(0.54rem, 0.84vw, 0.66rem);
  line-height: 1;
}

.ad-frame-shell.is-rewarded .celebration-copy > #rewardCelebrationAmount {
  margin: 3px 0 2px;
  padding-bottom: 0.08em;
  font-size: clamp(2.7rem, 5.4vw, 4.25rem);
  line-height: 1.02;
}

.ad-frame-shell.is-rewarded .reward-balance-route {
  min-height: 18px;
  padding: 3px 8px;
  font-size: clamp(0.55rem, 0.82vw, 0.68rem);
}

.ad-frame-shell.is-rewarded .reward-next-goal {
  font-size: clamp(0.62rem, 0.9vw, 0.74rem);
  line-height: 1.12;
}

.ad-frame-shell.is-rewarded .celebration-copy p {
  max-width: 34ch;
  font-size: clamp(0.68rem, 0.92vw, 0.78rem);
  line-height: 1.16;
}

.ad-frame-shell.is-rewarded .reward-next-actions {
  gap: 5px;
  padding: clamp(9px, 1.25vw, 13px);
}

.ad-frame-shell.is-rewarded .reward-next-actions strong {
  font-size: clamp(1rem, 1.68vw, 1.36rem);
  line-height: 1.02;
}

.ad-frame-shell.is-rewarded .reward-next-actions p {
  font-size: clamp(0.66rem, 0.92vw, 0.76rem);
  line-height: 1.15;
}

.ad-frame-shell.is-rewarded .reward-action-grid {
  gap: 5px;
}

.ad-frame-shell.is-rewarded .reward-action-button {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 0.72rem;
  line-height: 1.05;
}

.ad-frame-shell.is-rewarded .celebration-stats {
  gap: clamp(6px, 0.9vw, 9px);
  margin-top: clamp(7px, 1.05vh, 10px);
}

.ad-frame-shell.is-rewarded .celebration-stats > div {
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 76px;
  border-radius: 16px;
  padding: 8px 9px;
}

.ad-frame-shell.is-rewarded .celebration-stats > div::before {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  font-size: 0.58rem;
}

.ad-frame-shell.is-rewarded .celebration-stats > div > span {
  font-size: 0.56rem;
}

.ad-frame-shell.is-rewarded .celebration-stats > div > strong {
  font-size: clamp(0.95rem, 1.45vw, 1.22rem);
  letter-spacing: 0;
}

.ad-frame-shell.is-rewarded .celebration-stats > div:nth-child(4) strong {
  overflow: visible;
  font-size: clamp(0.74rem, 1.12vw, 0.98rem);
  line-height: 1.12;
  text-overflow: clip;
  white-space: normal;
}

.ad-frame-shell.is-rewarded .celebration-stats > div > small {
  margin-top: 5px;
  font-size: 0.66rem;
  line-height: 1.15;
}

.ad-frame-shell.is-rewarded .reward-progress-track {
  height: 7px;
  margin-top: 6px;
}

.ad-frame-shell.is-rewarded .reward-progression-panel {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) minmax(0, 1.65fr);
  gap: 6px;
  padding: 7px;
  border-radius: 14px;
}

.ad-frame-shell.is-rewarded .reward-progression-chip,
.ad-frame-shell.is-rewarded .reward-unlock-reveal {
  min-height: 46px;
  border-radius: 11px;
  padding: 7px 8px;
}

.ad-frame-shell.is-rewarded .reward-progression-chip span,
.ad-frame-shell.is-rewarded .reward-unlock-reveal span {
  font-size: 0.52rem;
}

.ad-frame-shell.is-rewarded .reward-progression-chip strong,
.ad-frame-shell.is-rewarded .reward-unlock-reveal strong {
  font-size: clamp(0.66rem, 0.9vw, 0.78rem);
}

.ad-frame-shell.is-rewarded .reward-unlock-reveals {
  gap: 6px;
}

.ad-frame-shell.is-rewarded .reward-unlock-reveal small {
  margin-top: 3px;
  font-size: 0.58rem;
  line-height: 1.12;
  -webkit-line-clamp: 1;
}

.ad-frame-shell.is-rewarded .reward-daily-strip {
  min-height: 0;
  padding: 7px 11px;
  border-radius: 14px;
}

.ad-frame-shell.is-rewarded .reward-daily-strip span {
  font-size: 0.6rem;
}

.ad-frame-shell.is-rewarded .reward-daily-strip strong {
  font-size: 0.78rem;
}

html.reward-overlay-open,
body.viewer-page.reward-overlay-open {
  overflow: hidden;
}

.viewer-page:has(.ad-frame-shell.is-rewarded) .viewer-shell {
  grid-template-rows: auto auto auto minmax(520px, 1fr) auto auto;
}

.viewer-page .ad-frame-shell.is-rewarded {
  min-height: clamp(520px, 62vh, 1120px);
  height: auto;
  max-height: none;
  overflow: visible;
}

.viewer-page .ad-frame-shell.is-rewarded .ad-browser-bar,
.viewer-page .ad-frame-shell.is-rewarded .ad-frame {
  pointer-events: none;
}

.viewer-page .ad-frame-shell.is-rewarded .ad-browser-bar {
  opacity: 0.36;
}

.viewer-page .ad-frame-shell.is-rewarded .ad-frame {
  display: block;
  min-height: 520px;
  height: max(520px, calc(100vh - 124px));
  opacity: 0.24;
  filter: saturate(0.76) brightness(0.5);
}

.viewer-page .ad-frame-shell.is-rewarded .reward-celebration,
body.viewer-page.reward-overlay-open > .reward-celebration {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  align-content: center;
  justify-items: center;
  width: auto;
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  border-radius: 0;
  padding: clamp(6px, 1.4vw, 14px);
  overflow: hidden;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 34%),
    radial-gradient(circle at 78% 38%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 36%),
    radial-gradient(circle at 20% 72%, color-mix(in srgb, var(--amber) 11%, transparent), transparent 34%),
    rgb(3 8 12 / 0.72);
  box-shadow: none;
  backdrop-filter: blur(8px) saturate(1.08);
}

.viewer-page .ad-frame-shell.is-rewarded .reward-complete-shell,
body.viewer-page.reward-overlay-open > .reward-celebration .reward-complete-shell {
  align-content: start;
  align-self: center;
  gap: clamp(5px, 0.78vh, 8px);
  justify-self: center;
  width: min(1040px, calc(100vw - 22px));
  min-height: 0;
  max-height: calc(100dvh - 16px);
  padding: clamp(8px, 1.2vh, 12px) clamp(10px, 1.55vw, 18px) clamp(9px, 1.25vh, 13px);
  overflow-x: clip;
  overflow-y: clip;
  overscroll-behavior: contain;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-complete-header {
  gap: 2px;
  padding-top: 0;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-complete-badge,
body.viewer-page.reward-overlay-open > .reward-celebration .reward-rarity-badge {
  min-height: 18px;
  padding: 3px 8px;
  font-size: 0.54rem;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-complete-header h2 {
  padding: 0;
  font-size: clamp(1.55rem, 2.95vw, 2.08rem);
  line-height: 1.02;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-complete-header p {
  font-size: clamp(0.72rem, 1vw, 0.86rem);
  line-height: 1.18;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-verification-row {
  gap: 4px;
  margin-top: 1px;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-verification-row span {
  min-height: 17px;
  padding: 3px 7px;
  font-size: 0.49rem;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-complete-hero {
  grid-template-columns: minmax(0, 1fr) minmax(224px, 0.62fr);
  gap: clamp(7px, 1.05vw, 10px);
  min-height: 0;
  margin-bottom: clamp(5px, 0.7vh, 7px);
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-complete-hero .celebration-copy {
  align-content: center;
  gap: clamp(2px, 0.42vh, 5px);
  container-type: inline-size;
  min-height: clamp(250px, 43vh, 306px);
  padding: clamp(8px, 1.2vw, 12px);
}

body.viewer-page.reward-overlay-open > .reward-celebration .celebration-copy .celebration-burst {
  width: clamp(34px, 3.6vw, 46px);
  height: clamp(34px, 3.6vw, 46px);
}

body.viewer-page.reward-overlay-open > .reward-celebration .celebration-copy > .eyebrow:not(.level-up-ribbon) {
  min-height: 17px;
  padding: 3px 8px;
  font-size: 0.54rem;
}

body.viewer-page.reward-overlay-open > .reward-celebration .level-up-ribbon {
  margin: 2px auto 1px;
  padding: 3px 8px;
  font-size: 0.58rem;
}

body.viewer-page.reward-overlay-open > .reward-celebration .celebration-copy .reward-level-up-card {
  width: min(148px, 100%);
  min-height: clamp(78px, 12vh, 96px);
  margin: 1px auto 2px;
  padding: clamp(5px, 0.72vh, 7px) clamp(8px, 1vw, 10px);
}

body.viewer-page.reward-overlay-open > .reward-celebration .celebration-copy .reward-level-up-card strong {
  font-size: clamp(1.18rem, 2.1vw, 1.62rem);
  line-height: 0.96;
}

body.viewer-page.reward-overlay-open > .reward-celebration .celebration-copy .reward-level-up-card small {
  font-size: clamp(0.54rem, 0.76vw, 0.64rem);
  line-height: 1;
}

body.viewer-page.reward-overlay-open > .reward-celebration .celebration-copy > #rewardCelebrationAmount {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 3px 0 2px;
  padding: 0 0.08em 0.08em;
  font-size: clamp(2.35rem, 4.75vw, 3.85rem);
  letter-spacing: 0;
  line-height: 1.02;
  overflow: visible;
  text-align: center;
  white-space: nowrap;
}

@supports (font-size: 1cqw) {
  body.viewer-page.reward-overlay-open > .reward-celebration .celebration-copy > #rewardCelebrationAmount {
    font-size: clamp(2.35rem, 14cqw, 3.85rem);
  }
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-balance-route {
  min-height: 17px;
  padding: 3px 8px;
  font-size: clamp(0.52rem, 0.74vw, 0.62rem);
}

body.viewer-page.reward-overlay-open > .reward-celebration .celebration-copy p {
  max-width: 38ch;
  font-size: clamp(0.66rem, 0.88vw, 0.76rem);
  line-height: 1.12;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-next-goal {
  font-size: clamp(0.6rem, 0.82vw, 0.7rem);
  line-height: 1.08;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-next-actions {
  gap: 5px;
  padding: clamp(9px, 1.15vw, 13px);
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-next-actions strong {
  font-size: clamp(1.02rem, 1.65vw, 1.32rem);
  line-height: 1.02;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-next-actions p {
  font-size: clamp(0.65rem, 0.9vw, 0.74rem);
  line-height: 1.14;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-action-grid {
  gap: 5px;
  margin-top: 2px;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-action-button {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 0.72rem;
  line-height: 1.05;
}

body.viewer-page.reward-overlay-open > .reward-celebration .celebration-stats {
  gap: clamp(6px, 0.8vw, 8px);
  margin-top: clamp(5px, 0.7vh, 7px);
}

body.viewer-page.reward-overlay-open > .reward-celebration .celebration-stats > div {
  grid-template-columns: 30px minmax(0, 1fr);
  min-height: 70px;
  border-radius: 14px;
  padding: 7px 8px;
}

body.viewer-page.reward-overlay-open > .reward-celebration .celebration-stats > div::before {
  width: 29px;
  height: 29px;
  border-radius: 10px;
  font-size: 0.54rem;
}

body.viewer-page.reward-overlay-open > .reward-celebration .celebration-stats > div > span {
  font-size: 0.52rem;
}

body.viewer-page.reward-overlay-open > .reward-celebration .celebration-stats > div > strong {
  font-size: clamp(0.9rem, 1.25vw, 1.08rem);
  letter-spacing: 0;
}

body.viewer-page.reward-overlay-open > .reward-celebration .celebration-stats > div:nth-child(4) strong {
  overflow: visible;
  font-size: clamp(0.68rem, 0.98vw, 0.86rem);
  line-height: 1.06;
  text-overflow: clip;
  white-space: normal;
}

body.viewer-page.reward-overlay-open > .reward-celebration .celebration-stats > div > small {
  margin-top: 4px;
  font-size: 0.6rem;
  line-height: 1.08;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-progress-track {
  height: 6px;
  margin-top: 5px;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-progression-panel {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) minmax(0, 1.5fr);
  gap: 5px;
  padding: 6px;
  border-radius: 12px;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-progression-chip,
body.viewer-page.reward-overlay-open > .reward-celebration .reward-unlock-reveal {
  min-height: 38px;
  border-radius: 10px;
  padding: 6px 7px;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-progression-chip span,
body.viewer-page.reward-overlay-open > .reward-celebration .reward-unlock-reveal span {
  font-size: 0.48rem;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-progression-chip strong,
body.viewer-page.reward-overlay-open > .reward-celebration .reward-unlock-reveal strong {
  margin-top: 3px;
  font-size: clamp(0.62rem, 0.82vw, 0.72rem);
  line-height: 1.08;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-unlock-reveals {
  gap: 5px;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-unlock-reveal small {
  margin-top: 2px;
  font-size: 0.54rem;
  line-height: 1.05;
  -webkit-line-clamp: 1;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-daily-strip {
  min-height: 0;
  padding: 6px 10px;
  border-radius: 12px;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-daily-strip span {
  font-size: 0.56rem;
}

body.viewer-page.reward-overlay-open > .reward-celebration .reward-daily-strip strong {
  font-size: 0.72rem;
}

.reward-complete-shell {
  isolation: isolate;
}

.reward-celebration::after,
.reward-complete-shell::after,
.reward-orbital-ring {
  animation: none;
}

.reward-celebration::after {
  opacity: 0.1;
}

.reward-complete-shell::after {
  opacity: 0.22;
}

.reward-rarity-badge.reward-rarity-legendary {
  animation: none;
}

.reward-claim-confirmed .reward-complete-shell {
  animation: reward-claim-confirmed-flash 320ms ease-out both;
}

.reward-level-up-hero {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  overflow: clip;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--brand-gold) 16%, transparent), transparent 32%),
    radial-gradient(circle at 52% 48%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 34%),
    rgb(2 6 23 / 0.38);
  opacity: 1;
  pointer-events: none;
  transform: scale(1);
  transition:
    opacity 360ms ease,
    transform 360ms cubic-bezier(0.16, 0.86, 0.24, 1);
}

.reward-level-up-hero.is-hidden {
  display: none;
}

.reward-celebration.reward-stage-controlled .reward-level-up-hero.is-hidden {
  display: grid !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.96);
}

.reward-level-up-hero.is-resolving {
  opacity: 0;
  transform: translateY(16px) scale(0.7);
}

.reward-level-up-hero-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 24px);
  align-items: center;
  width: min(560px, calc(100% - 32px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 54%, var(--primary));
  border-radius: 22px;
  padding: clamp(16px, 2.4vw, 26px);
  background:
    radial-gradient(circle at 20% 16%, color-mix(in srgb, var(--brand-gold) 20%, transparent), transparent 42%),
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 42%),
    linear-gradient(145deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04)),
    color-mix(in srgb, var(--surface) 84%, #05080d);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.1),
    0 0 54px color-mix(in srgb, var(--brand-gold) 20%, transparent),
    0 24px 70px rgb(0 0 0 / 0.44);
  transform-origin: center;
  animation: reward-level-hero-card-impact 1080ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reward-level-up-hero-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 12%, rgb(255 255 255 / 0.18) 34%, transparent 56%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-120%);
  animation: reward-level-hero-sweep 760ms cubic-bezier(0.16, 0.9, 0.2, 1) 180ms both;
}

.reward-level-up-hero-ring {
  position: absolute;
  left: clamp(72px, 24%, 158px);
  top: 50%;
  width: clamp(170px, 23vw, 270px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 48%, transparent);
  border-radius: 999px;
  box-shadow:
    0 0 0 10px color-mix(in srgb, var(--primary) 5%, transparent),
    0 0 48px color-mix(in srgb, var(--brand-gold) 18%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.62);
  animation: reward-level-hero-ring 1160ms cubic-bezier(0.16, 0.86, 0.24, 1) 120ms both;
}

.reward-level-up-hero-orb {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--brand-gold) 30%, transparent), transparent 42%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 64%),
    color-mix(in srgb, var(--surface-2) 76%, transparent);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.1),
    inset 0 0 34px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 46px color-mix(in srgb, var(--brand-gold) 24%, transparent),
    0 0 82px color-mix(in srgb, var(--primary) 14%, transparent);
  animation: reward-level-hero-orb-impact 1080ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reward-level-up-hero-orbit {
  position: absolute;
  inset: 14px;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 58%, transparent);
  border-radius: inherit;
  box-shadow: 0 0 22px color-mix(in srgb, var(--brand-gold) 22%, transparent);
  transform: rotateX(64deg) rotateZ(18deg);
}

.reward-level-up-hero-orb strong {
  position: relative;
  z-index: 1;
  color: #fff7d1;
  font-size: clamp(3.4rem, 8vw, 5.8rem);
  line-height: 1;
  text-shadow:
    0 0 24px color-mix(in srgb, var(--brand-gold) 58%, transparent),
    0 0 48px color-mix(in srgb, var(--primary) 22%, transparent),
    0 4px 18px rgb(0 0 0 / 0.48);
}

.reward-level-up-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  min-width: 0;
  text-align: left;
}

.reward-level-up-hero-copy span {
  color: var(--brand-gold);
  font-size: 0.72rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reward-level-up-hero-copy strong {
  color: var(--ink);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1;
}

.reward-level-up-hero-copy small {
  color: color-mix(in srgb, var(--primary) 74%, #ffffff);
  font-weight: 950;
  text-transform: uppercase;
}

.reward-level-crossings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.reward-level-up-hero-copy .reward-level-crossing,
.reward-level-up-hero-copy .reward-level-crossing-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 52%, transparent);
  border-radius: 999px;
  padding: 4px 9px;
  background: color-mix(in srgb, var(--brand-gold) 12%, rgb(3 8 21 / 0.76));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05), 0 0 18px color-mix(in srgb, var(--brand-gold) 12%, transparent);
  color: #fff7d1;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.035em;
  opacity: 0;
  transform: translateY(7px) scale(0.88);
  animation: reward-level-crossing-land 420ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--crossing-index, 0) * 105ms + 180ms) both;
}

.reward-level-up-hero-copy .reward-level-crossing:last-child {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--brand-gold));
  background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 28%, transparent), color-mix(in srgb, var(--brand-gold) 18%, transparent));
  box-shadow: 0 0 24px color-mix(in srgb, var(--primary) 24%, transparent);
}

.reward-level-up-hero-copy .reward-level-crossing-gap {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

@keyframes reward-level-crossing-land {
  0% {
    opacity: 0;
    transform: translateY(7px) scale(0.88);
  }

  65% {
    opacity: 1;
    transform: translateY(-2px) scale(1.05);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .reward-level-up-hero-card {
    grid-template-columns: 84px minmax(0, 1fr);
    width: min(94vw, 520px);
    padding: 14px;
  }

  .reward-level-up-hero-orb {
    width: 84px;
    height: 84px;
  }

  .reward-level-up-hero-orb strong {
    font-size: clamp(2.7rem, 13vw, 4rem);
  }

  .reward-level-up-hero-copy strong {
    font-size: clamp(1.28rem, 6.5vw, 2rem);
  }

  .reward-level-up-hero-copy small {
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .reward-level-up-hero-copy .reward-level-crossing,
  .reward-level-up-hero-copy .reward-level-crossing-gap {
    min-height: 24px;
    padding: 3px 7px;
    font-size: 0.58rem;
  }
}

.reward-level-up-card::before {
  animation: none;
}

.reward-celebration.reward-staged-sequence.has-level-up .reward-level-up-card::before {
  animation: level-up-card-sheen 1280ms cubic-bezier(0.16, 0.9, 0.2, 1) 1340ms both;
}

.celebration-copy > #rewardCelebrationAmount {
  position: relative;
  z-index: 8;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
  transform-origin: center;
  will-change: auto;
}

.celebration-copy > #rewardCelebrationAmount::before,
.celebration-copy > #rewardCelebrationAmount::after {
  position: absolute;
  inset: -18% -10%;
  z-index: -1;
  border-radius: 999px;
  content: "";
  opacity: 0;
  pointer-events: none;
}

.celebration-copy > #rewardCelebrationAmount::before {
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 54%),
    radial-gradient(circle at 28% 42%, color-mix(in srgb, var(--brand-gold) 20%, transparent), transparent 18%),
    radial-gradient(circle at 72% 54%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 17%);
}

.celebration-copy > #rewardCelebrationAmount::after {
  inset: 8% 18%;
  background: transparent;
  box-shadow:
    -44px -10px 0 -5px color-mix(in srgb, var(--brand-gold) 88%, transparent),
    42px 8px 0 -5px color-mix(in srgb, var(--primary) 86%, transparent),
    -18px 24px 0 -6px color-mix(in srgb, var(--accent) 80%, transparent),
    22px -26px 0 -6px rgb(255 255 255 / 0.72);
}

.reward-celebration.reward-money-focus .celebration-copy > #rewardCelebrationAmount::before {
  animation: reward-money-contained-glow 820ms ease-out both;
}

.reward-celebration.reward-money-focus .celebration-copy > #rewardCelebrationAmount::after {
  animation: reward-money-sparkle-burst 640ms cubic-bezier(0.16, 0.86, 0.24, 1) 520ms both;
}

.reward-payout-building .celebration-copy {
  animation: reward-payout-chamber-build 540ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.reward-payout-building .reward-balance-route {
  animation: reward-stage-reveal 280ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.reward-celebration.reward-money-hero .celebration-copy > #rewardCelebrationAmount {
  animation: reward-payout-hero-rise 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reward-celebration.reward-money-landed .reward-complete-shell {
  animation: reward-payout-card-hit 320ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.reward-celebration.reward-money-landed .celebration-copy::before {
  animation: reward-payout-shimmer-sweep 520ms ease-out both;
}

.reward-celebration.reward-money-landed .celebration-copy > #rewardCelebrationAmount {
  animation: reward-payout-amount-hit 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reward-celebration.reward-money-landed .celebration-copy > #rewardCelebrationAmount::before {
  animation: reward-money-impact-ripple 680ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.reward-celebration.reward-money-landed .celebration-copy > #rewardCelebrationAmount::after {
  animation: reward-money-sparkle-burst 640ms cubic-bezier(0.16, 0.86, 0.24, 1) 80ms both;
}

.reward-celebration.reward-money-docking .celebration-copy > #rewardCelebrationAmount {
  animation: reward-payout-amount-dock 420ms cubic-bezier(0.16, 0.9, 0.2, 1) both;
}

.reward-progress-track span {
  transition:
    width 680ms cubic-bezier(0.13, 0.88, 0.22, 1),
    filter 260ms ease,
    box-shadow 320ms ease;
}

.reward-progress-track.is-progress-pulse span::before {
  animation: reward-progress-leading-glow 700ms ease-out both;
}

.reward-progress-track.is-progress-pulse span::after {
  animation: none;
  opacity: 0;
}

.reward-progress-track.is-xp-landed {
  animation: reward-xp-track-land 520ms ease-out both;
}

.reward-sequence-settled .reward-sparkle-field span,
.reward-sequence-settled .reward-quantum-field span,
.reward-sequence-settled .reward-xp-energy-field span,
.reward-sequence-settled .celebration-burst,
.reward-sequence-settled .reward-burst-ring {
  animation: none;
  opacity: 0;
}

.reward-staged-sequence.reward-celebration-pop::before {
  animation: reward-verification-scan 720ms cubic-bezier(0.16, 0.9, 0.2, 1) 120ms both;
}

.reward-staged-sequence .reward-verification-row {
  opacity: 1;
  animation: none;
}

.reward-staged-sequence .reward-verification-row span {
  position: relative;
  gap: 6px;
  padding-left: 9px;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  animation: reward-verification-pill 260ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.reward-staged-sequence .reward-verification-row span::before {
  width: 14px;
  height: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 74%, #ffffff);
  border-radius: 999px;
  background:
    radial-gradient(circle at 45% 35%, #ffffff 0 12%, transparent 15%),
    color-mix(in srgb, var(--primary) 32%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--primary) 34%, transparent);
  content: "";
  opacity: 0;
  transform: scale(0.45);
  animation: reward-check-disc 260ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.reward-staged-sequence .reward-verification-row span::after {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 4px;
  height: 7px;
  border-right: 2px solid #ecfeff;
  border-bottom: 2px solid #ecfeff;
  content: "";
  opacity: 0;
  transform: translateY(-60%) rotate(42deg) scale(0.4);
  transform-origin: center;
  animation: reward-check-mark 220ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.reward-staged-sequence .reward-verification-row span:nth-child(1) {
  animation-delay: 260ms;
}

.reward-staged-sequence .reward-verification-row span:nth-child(1)::before,
.reward-staged-sequence .reward-verification-row span:nth-child(1)::after {
  animation-delay: 300ms;
}

.reward-staged-sequence .reward-verification-row span:nth-child(2) {
  animation-delay: 420ms;
}

.reward-staged-sequence .reward-verification-row span:nth-child(2)::before,
.reward-staged-sequence .reward-verification-row span:nth-child(2)::after {
  animation-delay: 460ms;
}

.reward-staged-sequence .reward-verification-row span:nth-child(3) {
  animation-delay: 580ms;
}

.reward-staged-sequence .reward-verification-row span:nth-child(3)::before,
.reward-staged-sequence .reward-verification-row span:nth-child(3)::after {
  animation-delay: 620ms;
}

.reward-staged-sequence .reward-verification-row span:nth-child(4) {
  animation-delay: 720ms;
}

.reward-staged-sequence .reward-verification-row span:nth-child(4)::before,
.reward-staged-sequence .reward-verification-row span:nth-child(4)::after {
  animation-delay: 760ms;
}

.celebration-copy > #rewardCelebrationAmount {
  isolation: isolate;
}

.reward-staged-sequence #rewardCelebrationAmount {
  animation: reward-stage-reveal 260ms cubic-bezier(0.16, 0.86, 0.24, 1) 980ms both;
}

.reward-celebration.reward-staged-sequence.has-level-up #rewardCelebrationAmount {
  animation: reward-stage-reveal 260ms cubic-bezier(0.16, 0.86, 0.24, 1) 980ms both;
}

.reward-staged-sequence .reward-balance-route {
  animation: reward-stage-reveal 320ms cubic-bezier(0.16, 0.86, 0.24, 1) 720ms both;
}

.reward-celebration.reward-staged-sequence.has-level-up .reward-balance-route {
  animation: reward-stage-reveal 320ms cubic-bezier(0.16, 0.86, 0.24, 1) 720ms both;
}

.reward-staged-sequence .celebration-copy p {
  animation: reward-stage-reveal 360ms cubic-bezier(0.16, 0.86, 0.24, 1) 560ms both;
}

.reward-staged-sequence .reward-next-goal {
  animation: reward-stage-reveal 360ms cubic-bezier(0.16, 0.86, 0.24, 1) 820ms both;
}

.reward-staged-sequence .reward-next-actions {
  opacity: 1;
  pointer-events: none;
  filter: brightness(0.72) saturate(0.78);
  transform: translateY(0) scale(0.995);
  animation: none;
}

.reward-staged-sequence .reward-next-actions > * {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 320ms ease,
    transform 320ms ease;
}

.reward-staged-sequence .reward-next-actions::after {
  position: absolute;
  inset: clamp(12px, 1.8vw, 20px);
  z-index: 0;
  border-radius: clamp(14px, 1.6vw, 18px);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 14%, transparent), transparent 58%),
    linear-gradient(color-mix(in srgb, var(--ink) 18%, transparent), color-mix(in srgb, var(--ink) 18%, transparent)) 0 18% / 58% 9px no-repeat,
    linear-gradient(color-mix(in srgb, var(--muted) 14%, transparent), color-mix(in srgb, var(--muted) 14%, transparent)) 0 36% / 76% 7px no-repeat,
    linear-gradient(color-mix(in srgb, var(--muted) 11%, transparent), color-mix(in srgb, var(--muted) 11%, transparent)) 0 49% / 68% 7px no-repeat,
    radial-gradient(circle at 22% 82%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 34%);
  content: "";
  opacity: 0.72;
  pointer-events: none;
}

.reward-staged-sequence.reward-cta-active .reward-next-actions {
  pointer-events: auto;
  filter: none;
  animation: reward-cta-activate 520ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.reward-staged-sequence.reward-cta-active .reward-next-actions > * {
  opacity: 1;
  transform: none;
}

.reward-staged-sequence.reward-cta-active .reward-next-actions::after {
  opacity: 0;
  transition: opacity 220ms ease;
}

.reward-staged-sequence.reward-cta-active .reward-next-actions::before {
  animation: reward-card-sheen 780ms ease-out 60ms both;
}

.reward-staged-sequence .celebration-stats > div {
  animation: reward-stat-pop 560ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.reward-staged-sequence .celebration-stats > div:nth-child(1) {
  animation-delay: 2400ms;
}

.reward-staged-sequence .celebration-stats > div:nth-child(2) {
  animation-delay: 2490ms;
}

.reward-staged-sequence .celebration-stats > div:nth-child(3) {
  animation-delay: 2720ms;
}

.reward-staged-sequence .celebration-stats > div:nth-child(4) {
  animation-delay: 2810ms;
}

.reward-celebration.reward-staged-sequence.has-level-up .celebration-stats > div:nth-child(1) {
  animation-delay: 2400ms;
}

.reward-celebration.reward-staged-sequence.has-level-up .celebration-stats > div:nth-child(2) {
  animation-delay: 2490ms;
}

.reward-celebration.reward-staged-sequence.has-level-up .celebration-stats > div:nth-child(3) {
  animation-delay: 3880ms;
}

.reward-celebration.reward-staged-sequence.has-level-up .celebration-stats > div:nth-child(4) {
  animation-delay: 3970ms;
}

.reward-staged-sequence .reward-progression-panel {
  animation: reward-stage-reveal 480ms cubic-bezier(0.16, 0.86, 0.24, 1) 2980ms both;
}

.reward-staged-sequence .reward-daily-strip {
  animation: reward-stage-reveal 480ms cubic-bezier(0.16, 0.86, 0.24, 1) 3080ms both;
}

.reward-celebration.reward-staged-sequence.has-level-up .reward-progression-panel {
  animation: reward-stage-reveal 480ms cubic-bezier(0.16, 0.86, 0.24, 1) 4120ms both;
}

.reward-celebration.reward-staged-sequence.has-level-up .reward-daily-strip {
  animation: reward-stage-reveal 480ms cubic-bezier(0.16, 0.86, 0.24, 1) 4220ms both;
}

.reward-celebration.reward-staged-sequence.has-level-up .reward-unlock-reveal {
  animation: reward-stage-reveal 420ms cubic-bezier(0.16, 0.86, 0.24, 1) 4300ms both;
}

.reward-celebration.reward-staged-sequence.reward-money-hero .celebration-copy > #rewardCelebrationAmount,
.reward-celebration.reward-staged-sequence.has-level-up.reward-money-hero .celebration-copy > #rewardCelebrationAmount {
  animation: reward-payout-hero-rise 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reward-celebration.reward-staged-sequence.reward-money-landed .reward-complete-shell,
.reward-celebration.reward-staged-sequence.has-level-up.reward-money-landed .reward-complete-shell {
  animation: reward-payout-card-hit 320ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.reward-celebration.reward-staged-sequence.reward-money-landed .celebration-copy::before,
.reward-celebration.reward-staged-sequence.has-level-up.reward-money-landed .celebration-copy::before {
  animation: reward-payout-shimmer-sweep 520ms ease-out both;
}

.reward-celebration.reward-staged-sequence.reward-money-landed .celebration-copy > #rewardCelebrationAmount,
.reward-celebration.reward-staged-sequence.has-level-up.reward-money-landed .celebration-copy > #rewardCelebrationAmount {
  animation: reward-payout-amount-hit 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reward-celebration.reward-staged-sequence.reward-money-landed .celebration-copy > #rewardCelebrationAmount::before,
.reward-celebration.reward-staged-sequence.has-level-up.reward-money-landed .celebration-copy > #rewardCelebrationAmount::before {
  animation: reward-money-impact-ripple 680ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.reward-celebration.reward-staged-sequence.reward-money-landed .celebration-copy > #rewardCelebrationAmount::after,
.reward-celebration.reward-staged-sequence.has-level-up.reward-money-landed .celebration-copy > #rewardCelebrationAmount::after {
  animation: reward-money-sparkle-burst 640ms cubic-bezier(0.16, 0.86, 0.24, 1) 80ms both;
}

.reward-celebration.reward-staged-sequence.reward-money-docking .celebration-copy > #rewardCelebrationAmount,
.reward-celebration.reward-staged-sequence.has-level-up.reward-money-docking .celebration-copy > #rewardCelebrationAmount {
  animation: reward-payout-amount-dock 420ms cubic-bezier(0.16, 0.9, 0.2, 1) both;
}

.reward-celebration.reward-staged-sequence.reward-sequence-settled #rewardCelebrationAmount,
.reward-celebration.reward-staged-sequence.reward-sequence-settled .reward-balance-route,
.reward-celebration.reward-staged-sequence.reward-sequence-settled .celebration-copy p,
.reward-celebration.reward-staged-sequence.reward-sequence-settled .reward-next-goal,
.reward-celebration.reward-staged-sequence.reward-sequence-settled .reward-progression-panel,
.reward-celebration.reward-staged-sequence.reward-sequence-settled .reward-daily-strip {
  opacity: 1;
  filter: none;
  transform: none;
  animation: none;
}

.reward-sequence-settled .reward-next-actions {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.reward-celebration.reward-stage-controlled #rewardCelebrationAmount,
.reward-celebration.reward-stage-controlled .reward-balance-route,
.reward-celebration.reward-stage-controlled .celebration-copy p,
.reward-celebration.reward-stage-controlled .reward-next-goal,
.reward-celebration.reward-stage-controlled .celebration-stats > div,
.reward-celebration.reward-stage-controlled .reward-progression-panel,
.reward-celebration.reward-stage-controlled .reward-daily-strip,
.reward-celebration.reward-stage-controlled .reward-next-actions,
.reward-celebration.reward-stage-controlled .reward-next-actions > * {
  transition:
    opacity 240ms ease,
    visibility 0ms linear,
    transform 340ms cubic-bezier(0.16, 0.9, 0.2, 1),
    filter 240ms ease;
}

.reward-celebration.reward-stage-controlled .celebration-stats > div,
.reward-celebration.reward-stage-controlled .reward-progression-panel,
.reward-celebration.reward-stage-controlled .reward-daily-strip,
.reward-celebration.reward-stage-controlled #rewardCelebrationAmount,
.reward-celebration.reward-stage-controlled .reward-balance-route,
.reward-celebration.reward-stage-controlled .celebration-copy p,
.reward-celebration.reward-stage-controlled .reward-next-goal,
.reward-celebration.reward-stage-controlled .level-up-ribbon,
.reward-celebration.reward-stage-controlled .reward-level-up-card,
.reward-celebration.reward-stage-controlled .reward-next-actions,
.reward-celebration.reward-stage-controlled .reward-next-actions > * {
  animation: none !important;
}

.reward-celebration.reward-stage-controlled #rewardCelebrationAmount {
  opacity: 1;
  visibility: visible;
  filter: none;
  transform: none;
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="payoutCount"],
  [data-reward-stage="payoutLand"],
  [data-reward-stage="walletCredit"],
  [data-reward-stage="levelBonus"],
  [data-reward-stage="xpProgress"],
  [data-reward-stage="ctaReveal"],
  [data-reward-stage="settled"]
) #rewardCelebrationAmount {
  opacity: 1;
  visibility: visible;
  filter: none;
  transform: none;
  transition-delay: 0ms;
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="payoutCount"],
  [data-reward-stage="payoutLand"],
  [data-reward-stage="walletCredit"]
) #rewardCelebrationAmount {
  will-change: opacity, transform, filter;
}

.reward-celebration.reward-stage-controlled .reward-balance-route,
.reward-celebration.reward-stage-controlled .celebration-copy p {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.reward-celebration.reward-stage-controlled .reward-next-goal,
.reward-celebration.reward-stage-controlled .level-up-ribbon,
.reward-celebration.reward-stage-controlled .reward-level-up-card,
.reward-celebration.reward-stage-controlled .celebration-stats > div,
.reward-celebration.reward-stage-controlled .reward-progression-panel,
.reward-celebration.reward-stage-controlled .reward-daily-strip {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 12px, 0) scale(0.985);
}

.reward-celebration.reward-stage-controlled .reward-sparkle-field span,
.reward-celebration.reward-stage-controlled .reward-quantum-field span,
.reward-celebration.reward-stage-controlled .reward-xp-energy-field span {
  animation: none;
  opacity: 0;
}

.reward-celebration.reward-stage-controlled[data-reward-stage="payoutLand"] .reward-sparkle-field span {
  animation:
    reward-sparkle 760ms ease-out both,
    reward-sparkle-drift 1080ms ease-out both;
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="xpProgress"],
  [data-reward-stage="ctaReveal"],
  [data-reward-stage="settled"]
) .reward-next-goal,
.reward-celebration.reward-stage-controlled[data-reward-stage="levelBonus"] .level-up-ribbon,
.reward-celebration.reward-stage-controlled[data-reward-stage="levelBonus"] .reward-level-up-card,
.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="xpProgress"],
  [data-reward-stage="ctaReveal"],
  [data-reward-stage="settled"]
) .level-up-ribbon:not(.is-hidden),
.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="xpProgress"],
  [data-reward-stage="ctaReveal"],
  [data-reward-stage="settled"]
) .reward-level-up-card:not(.is-hidden),
.reward-celebration.reward-stage-controlled[data-reward-stage="walletCredit"] .celebration-stats > div:nth-child(1),
.reward-celebration.reward-stage-controlled[data-reward-stage="walletCredit"] .celebration-stats > div:nth-child(2),
.reward-celebration.reward-stage-controlled[data-reward-stage="levelBonus"] .celebration-stats > div:nth-child(1),
.reward-celebration.reward-stage-controlled[data-reward-stage="levelBonus"] .celebration-stats > div:nth-child(2),
.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="xpProgress"],
  [data-reward-stage="ctaReveal"],
  [data-reward-stage="settled"]
) .celebration-stats > div,
.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="xpProgress"],
  [data-reward-stage="ctaReveal"],
  [data-reward-stage="settled"]
) .reward-progression-panel,
.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="xpProgress"],
  [data-reward-stage="ctaReveal"],
  [data-reward-stage="settled"]
) .reward-daily-strip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0ms;
}

.reward-celebration.reward-stage-controlled[data-reward-stage="walletCredit"] .celebration-stats > div:nth-child(2),
.reward-celebration.reward-stage-controlled[data-reward-stage="levelBonus"] .celebration-stats > div:nth-child(2),
.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="xpProgress"],
  [data-reward-stage="ctaReveal"],
  [data-reward-stage="settled"]
) .celebration-stats > div:nth-child(2) {
  transition-delay: 70ms;
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="xpProgress"],
  [data-reward-stage="ctaReveal"],
  [data-reward-stage="settled"]
) .celebration-stats > div:nth-child(3) {
  transition-delay: 140ms;
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="xpProgress"],
  [data-reward-stage="ctaReveal"],
  [data-reward-stage="settled"]
) .celebration-stats > div:nth-child(4) {
  transition-delay: 210ms;
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="xpProgress"],
  [data-reward-stage="ctaReveal"],
  [data-reward-stage="settled"]
) .reward-progression-panel {
  transition-delay: 260ms;
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="xpProgress"],
  [data-reward-stage="ctaReveal"],
  [data-reward-stage="settled"]
) .reward-daily-strip {
  transition-delay: 320ms;
}

.reward-celebration.reward-stage-controlled .reward-next-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  filter: brightness(0.72) saturate(0.78);
  transform: translateY(0) scale(0.995);
}

.reward-celebration.reward-stage-controlled .reward-next-actions > * {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 8px, 0);
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="ctaReveal"],
  [data-reward-stage="settled"]
) .reward-next-actions {
  pointer-events: auto;
  filter: none;
  transform: none;
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="ctaReveal"],
  [data-reward-stage="settled"]
) .reward-next-actions > * {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0ms;
}

.reward-celebration.reward-stage-controlled:is(
  [data-reward-stage="ctaReveal"],
  [data-reward-stage="settled"]
) .reward-next-actions::after {
  opacity: 0;
}

.reward-celebration.reward-stage-controlled.reward-money-hero .celebration-copy > #rewardCelebrationAmount {
  animation: reward-payout-hero-rise 560ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.reward-celebration.reward-stage-controlled.reward-money-landed .celebration-copy > #rewardCelebrationAmount {
  animation: reward-payout-amount-hit 300ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.reward-celebration.reward-stage-controlled.reward-money-docking .celebration-copy > #rewardCelebrationAmount {
  animation: reward-payout-amount-dock 360ms cubic-bezier(0.16, 0.9, 0.2, 1) both !important;
}

.reward-celebration.reward-static-stable #rewardCelebrationAmount,
.reward-celebration.reward-static-stable .reward-balance-route,
.reward-celebration.reward-static-stable .celebration-copy p,
.reward-celebration.reward-static-stable .reward-next-goal,
.reward-celebration.reward-static-stable .reward-verification-row,
.reward-celebration.reward-static-stable .reward-verification-row span,
.reward-celebration.reward-static-stable .reward-verification-row span::before,
.reward-celebration.reward-static-stable .reward-verification-row span::after,
.reward-celebration.reward-static-stable .celebration-stats,
.reward-celebration.reward-static-stable .celebration-stats > div,
.reward-celebration.reward-static-stable .reward-progression-panel,
.reward-celebration.reward-static-stable .reward-daily-strip,
.reward-celebration.reward-static-stable .reward-next-actions,
.reward-celebration.reward-static-stable .reward-next-actions > * {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

.reward-celebration.reward-static-stable .reward-next-actions {
  pointer-events: auto;
}

.reward-celebration.reward-static-stable .reward-next-actions::after,
.reward-celebration.reward-static-stable .reward-next-actions::before,
.reward-celebration.reward-static-stable .reward-sparkle-field span,
.reward-celebration.reward-static-stable .reward-quantum-field span,
.reward-celebration.reward-static-stable .reward-xp-energy-field span,
.reward-celebration.reward-static-stable .celebration-burst,
.reward-celebration.reward-static-stable .reward-burst-ring,
.reward-celebration.reward-static-stable .reward-credit-trail {
  opacity: 0 !important;
  animation: none !important;
  pointer-events: none;
}

.reward-static-fx-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: clip;
  border-radius: inherit;
  contain: paint;
  pointer-events: none;
}

.reward-static-fx-layer span {
  position: absolute;
  display: block;
  opacity: 0;
  pointer-events: none;
  will-change: auto;
}

.reward-idle-fx-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: clip;
  border-radius: inherit;
  contain: paint;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.reward-idle-fx-layer span {
  position: absolute;
  display: block;
  opacity: 0;
  pointer-events: none;
}

.reward-idle-border-energy {
  inset: -1px;
  border-radius: inherit;
  background:
    conic-gradient(from 0deg,
      transparent 0 12%,
      color-mix(in srgb, var(--primary) 36%, transparent) 16%,
      color-mix(in srgb, var(--brand-gold) 26%, transparent) 19%,
      transparent 25% 54%,
      color-mix(in srgb, var(--accent) 20%, transparent) 58%,
      transparent 64% 100%);
  content: "";
  filter: blur(0.2px);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  mix-blend-mode: screen;
  padding: 1px;
  transform: rotate(0deg);
}

.reward-idle-haze {
  width: clamp(220px, 34vw, 420px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--primary) 24%, transparent), transparent 62%),
    radial-gradient(circle at 40% 36%, color-mix(in srgb, var(--brand-gold) 12%, transparent), transparent 30%);
  filter: blur(10px);
  mix-blend-mode: screen;
}

.reward-idle-haze-1 {
  left: -7%;
  top: -12%;
}

.reward-idle-haze-2 {
  right: -9%;
  top: 24%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 64%),
    radial-gradient(circle at 62% 42%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%);
}

.reward-idle-aurora {
  width: clamp(360px, 56vw, 720px);
  height: clamp(170px, 28vh, 320px);
  border-radius: 999px;
  filter: blur(18px);
  mix-blend-mode: screen;
  transform: rotate(-12deg) translate3d(-12%, 0, 0);
}

.reward-idle-aurora-1 {
  left: -10%;
  top: 18%;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--accent) 10%, transparent), transparent);
}

.reward-idle-aurora-2 {
  right: -14%;
  top: 46%;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-gold) 10%, transparent), color-mix(in srgb, var(--primary) 14%, transparent), transparent);
  transform: rotate(-16deg) translate3d(10%, 0, 0);
}

.reward-idle-streak {
  width: clamp(170px, 28vw, 360px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 34%, transparent), color-mix(in srgb, var(--brand-gold) 18%, transparent), transparent);
  filter: blur(0.2px);
  mix-blend-mode: screen;
  transform: rotate(-19deg) translate3d(-42%, 0, 0);
}

.reward-idle-streak-1 {
  left: 8%;
  top: 22%;
}

.reward-idle-streak-2 {
  left: 54%;
  top: 18%;
  width: clamp(140px, 22vw, 300px);
  transform: rotate(-17deg) translate3d(-36%, 0, 0);
}

.reward-idle-streak-3 {
  left: 44%;
  top: 76%;
  width: clamp(150px, 25vw, 320px);
  transform: rotate(-13deg) translate3d(-34%, 0, 0);
}

.reward-idle-panel-bloom {
  left: 7%;
  top: 28%;
  width: min(58%, 560px);
  height: clamp(190px, 34vh, 330px);
  border-radius: clamp(18px, 2vw, 26px);
  background:
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 58%),
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--brand-gold) 10%, transparent), transparent 40%);
  filter: blur(4px);
  mix-blend-mode: screen;
}

.reward-idle-orbit {
  left: 34%;
  top: 47%;
  width: clamp(210px, 34vw, 390px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 999px;
  background:
    radial-gradient(circle, transparent 58%, color-mix(in srgb, var(--primary) 8%, transparent) 60%, transparent 64%),
    conic-gradient(from 0deg, transparent 0 58%, color-mix(in srgb, var(--brand-gold) 20%, transparent) 66%, transparent 76%, color-mix(in srgb, var(--accent) 15%, transparent) 84%, transparent 92%);
  box-shadow:
    inset 0 0 32px color-mix(in srgb, var(--primary) 5%, transparent),
    0 0 38px color-mix(in srgb, var(--primary) 8%, transparent);
  mix-blend-mode: screen;
  transform: translate3d(-50%, -50%, 0);
}

.reward-idle-balance-glow {
  left: 2.2%;
  bottom: 6.5%;
  width: 26%;
  height: clamp(54px, 9vh, 86px);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 40%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 46%),
    linear-gradient(90deg, color-mix(in srgb, var(--brand-gold) 9%, transparent), transparent 70%);
  filter: blur(2px);
  mix-blend-mode: screen;
}

.reward-idle-verify-sheen {
  left: 24%;
  top: 17.5%;
  width: 52%;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(100deg, transparent 12%, color-mix(in srgb, #ffffff 18%, transparent), color-mix(in srgb, var(--primary) 16%, transparent), transparent 68%);
  mix-blend-mode: screen;
  transform: translate3d(-120%, 0, 0);
}

.reward-idle-cta-glow {
  right: 2.5%;
  top: 30%;
  width: 31%;
  height: clamp(190px, 34vh, 320px);
  border-radius: clamp(18px, 2vw, 24px);
  background:
    radial-gradient(circle at 70% 18%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 42%),
    radial-gradient(circle at 20% 88%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 40%);
  filter: blur(3px);
  mix-blend-mode: screen;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-idle-fx-layer {
  opacity: 1;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-idle-border-energy {
  animation: reward-idle-border-energy 8800ms ease-in-out 900ms infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-idle-haze-1 {
  animation: reward-idle-haze-drift 16000ms ease-in-out infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-idle-haze-2 {
  animation: reward-idle-haze-drift-alt 18000ms ease-in-out 900ms infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-idle-aurora-1 {
  animation: reward-idle-aurora-drift 15000ms ease-in-out 400ms infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-idle-aurora-2 {
  animation: reward-idle-aurora-drift-alt 17500ms ease-in-out 1800ms infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-idle-streak {
  animation: reward-idle-streak-drift 8600ms ease-in-out infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-idle-streak-2 {
  animation-delay: 2100ms;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-idle-streak-3 {
  animation-delay: 4200ms;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-idle-panel-bloom {
  animation: reward-idle-panel-bloom 4800ms ease-in-out infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-idle-orbit {
  animation: reward-idle-orbit-drift 14000ms linear infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-idle-balance-glow {
  animation: reward-idle-balance-rest 6200ms ease-in-out 700ms infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-idle-verify-sheen {
  animation: reward-idle-verify-sheen 9000ms ease-in-out 1600ms infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-idle-cta-glow {
  animation: reward-idle-cta-panel-glow 5600ms ease-in-out 1200ms infinite;
}

.reward-static-fx-halo,
.reward-static-fx-ripple {
  left: 33%;
  top: 45%;
  width: clamp(210px, 38vw, 430px);
  aspect-ratio: 1;
  border-radius: 999px;
  transform: translate3d(-50%, -50%, 0) scale(0.82);
}

.reward-static-fx-halo {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--primary) 46%, transparent), transparent 60%),
    radial-gradient(circle at 38% 38%, color-mix(in srgb, var(--brand-gold) 32%, transparent), transparent 34%);
  filter: blur(1px);
  mix-blend-mode: screen;
}

.reward-static-fx-ripple {
  border: 1px solid color-mix(in srgb, var(--brand-gold) 62%, transparent);
  box-shadow:
    inset 0 0 52px color-mix(in srgb, var(--primary) 18%, transparent),
    0 0 64px color-mix(in srgb, var(--brand-gold) 18%, transparent);
}

.reward-static-fx-shimmer {
  left: 8%;
  top: 30%;
  width: min(58%, 560px);
  height: clamp(150px, 26vh, 270px);
  border-radius: clamp(18px, 2vw, 26px);
  background: linear-gradient(105deg, transparent 12%, rgb(255 255 255 / 0.2) 43%, transparent 68%);
  mix-blend-mode: screen;
  transform: translate3d(-115%, 0, 0);
}

.reward-static-fx-spark {
  left: 33%;
  top: 45%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 18%, currentColor 30% 58%, transparent 72%);
  color: color-mix(in srgb, var(--brand-gold) 82%, #ffffff);
  box-shadow:
    0 0 16px currentColor,
    0 0 34px color-mix(in srgb, var(--primary) 34%, transparent);
  transform: translate3d(-50%, -50%, 0) scale(0.58);
}

.reward-static-fx-spark-1 {
  --reward-spark-x: clamp(-118px, -10vw, -62px);
  --reward-spark-y: clamp(-64px, -7vh, -28px);
  --reward-spark-delay: 540ms;
}

.reward-static-fx-spark-2 {
  --reward-spark-x: clamp(56px, 8vw, 112px);
  --reward-spark-y: clamp(-76px, -8vh, -34px);
  --reward-spark-delay: 590ms;
  color: color-mix(in srgb, var(--primary) 82%, #ffffff);
}

.reward-static-fx-spark-3 {
  --reward-spark-x: clamp(-88px, -8vw, -46px);
  --reward-spark-y: clamp(48px, 7vh, 92px);
  --reward-spark-delay: 640ms;
  color: color-mix(in srgb, var(--accent) 78%, #ffffff);
}

.reward-static-fx-spark-4 {
  --reward-spark-x: clamp(44px, 7vw, 98px);
  --reward-spark-y: clamp(38px, 6vh, 82px);
  --reward-spark-delay: 690ms;
}

.reward-static-fx-credit {
  left: 34%;
  top: 47%;
  width: clamp(88px, 10.6vw, 148px);
  height: 14px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 86% 50%, #ffffff 0 9%, var(--brand-gold) 20% 42%, transparent 60%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 32%, transparent) 22%, color-mix(in srgb, var(--brand-gold) 68%, transparent), color-mix(in srgb, var(--primary) 80%, transparent));
  box-shadow:
    0 0 22px color-mix(in srgb, var(--brand-gold) 38%, transparent),
    0 0 46px color-mix(in srgb, var(--primary) 30%, transparent);
  transform: translate3d(-50%, -50%, 0) scaleX(0.36);
  transform-origin: right center;
}

.reward-static-fx-token {
  left: 34%;
  top: 47%;
  width: 15px;
  height: 15px;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 50%, #ffffff);
  border-radius: 5px;
  background:
    radial-gradient(circle at 30% 22%, #ffffff 0 12%, color-mix(in srgb, var(--brand-gold) 78%, #ffffff) 18% 36%, transparent 58%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, var(--brand-gold)), color-mix(in srgb, var(--brand-gold) 62%, var(--surface-2)));
  box-shadow:
    0 0 18px color-mix(in srgb, var(--brand-gold) 46%, transparent),
    0 0 36px color-mix(in srgb, var(--primary) 30%, transparent);
  transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(0.64);
}

.reward-static-fx-token-1 {
  --reward-collect-x: clamp(-88px, -8vw, -42px);
  --reward-collect-y: clamp(-52px, -6vh, -24px);
  --reward-token-delay: 0ms;
}

.reward-static-fx-token-2 {
  --reward-collect-x: clamp(48px, 6vw, 86px);
  --reward-collect-y: clamp(-64px, -7vh, -30px);
  --reward-token-delay: 70ms;
}

.reward-static-fx-token-3 {
  --reward-collect-x: clamp(-44px, -4vw, -22px);
  --reward-collect-y: clamp(42px, 6vh, 72px);
  --reward-token-delay: 140ms;
}

.reward-static-fx-token-4 {
  --reward-collect-x: clamp(70px, 8vw, 118px);
  --reward-collect-y: clamp(30px, 5vh, 58px);
  --reward-token-delay: 210ms;
}

.reward-static-fx-token-5 {
  --reward-collect-x: clamp(-118px, -10vw, -58px);
  --reward-collect-y: clamp(18px, 4vh, 52px);
  --reward-token-delay: 280ms;
}

.reward-static-fx-token-6 {
  --reward-collect-x: clamp(12px, 3vw, 42px);
  --reward-collect-y: clamp(-94px, -9vh, -48px);
  --reward-token-delay: 350ms;
}

.reward-static-fx-deposit-ring {
  left: 34%;
  top: 47%;
  width: clamp(86px, 10.8vw, 142px);
  height: clamp(42px, 5.8vw, 68px);
  border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--brand-gold));
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 62%);
  box-shadow:
    inset 0 0 30px color-mix(in srgb, var(--primary) 20%, transparent),
    0 0 46px color-mix(in srgb, var(--brand-gold) 18%, transparent);
  transform: translate3d(-50%, -50%, 0) translate3d(clamp(-245px, -20vw, -164px), clamp(150px, 25vh, 210px), 0) scale(0.72);
}

.reward-celebration.reward-fx-payout-glow .reward-static-fx-halo {
  animation: reward-static-payout-halo 1180ms cubic-bezier(0.16, 0.9, 0.2, 1) 80ms both;
}

.reward-celebration.reward-fx-payout-ripple .reward-static-fx-ripple {
  animation: reward-static-payout-ripple 840ms cubic-bezier(0.16, 0.9, 0.2, 1) 820ms both;
}

.reward-celebration.reward-fx-payout-shimmer .reward-static-fx-shimmer {
  animation: reward-static-payout-shimmer 920ms cubic-bezier(0.16, 0.86, 0.24, 1) 720ms both;
}

.reward-celebration.reward-fx-payout-sparks .reward-static-fx-spark {
  animation: reward-static-payout-spark 760ms cubic-bezier(0.16, 0.86, 0.24, 1) var(--reward-spark-delay, 560ms) both;
}

.reward-celebration.reward-fx-wallet-credit-trail .reward-static-fx-credit {
  animation: reward-static-credit-deposit 980ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.reward-celebration.reward-fx-wallet-credit-trail .reward-static-fx-token {
  animation: reward-static-token-deposit 1240ms cubic-bezier(0.16, 0.86, 0.24, 1) var(--reward-token-delay, 1080ms) both;
}

.reward-celebration.reward-fx-wallet-credit-trail .reward-static-fx-deposit-ring {
  animation: reward-static-deposit-ring 780ms cubic-bezier(0.16, 0.86, 0.24, 1) 720ms both;
}

.reward-celebration.reward-fx-balance-pulse .celebration-stats > div:nth-child(1)::after {
  animation: reward-static-wallet-sheen 720ms ease-out 180ms both;
}

.reward-celebration.reward-fx-balance-pulse #rewardCelebrationBalance {
  animation: reward-static-value-glow 760ms ease-out 220ms both;
}

.reward-celebration.reward-fx-balance-pulse .celebration-stats > div:nth-child(1) {
  animation: reward-deposit-card-confirm 1180ms ease-out both;
}

.reward-celebration.reward-fx-progress-glow .reward-progress-track {
  animation: reward-static-xp-track-glow 760ms ease-out both;
}

.reward-celebration.reward-fx-progress-glow .reward-progress-track span::before {
  animation: reward-static-progress-leading-glow 820ms ease-out both;
}

.reward-celebration.reward-fx-cta-pulse .reward-action-primary {
  animation: reward-static-cta-glow 820ms ease-out both;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-complete-hero .celebration-copy {
  animation: reward-idle-reward-panel-breathe 4800ms ease-in-out infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .celebration-copy::after {
  animation: reward-idle-panel-ring 7200ms ease-in-out 600ms infinite;
}

.reward-action-primary {
  position: relative;
  overflow: hidden;
}

.reward-action-primary::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 12%, rgb(255 255 255 / 0.2) 46%, transparent 68%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-120%);
}

.reward-action-primary > * {
  position: relative;
  z-index: 1;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-action-primary::after {
  animation: reward-idle-button-sheen 6200ms ease-in-out 1800ms infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-action-primary {
  animation: reward-idle-cta-button-glow 6200ms ease-in-out 1800ms infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .celebration-stats > div:nth-child(1)::before {
  animation: reward-idle-balance-dot 5600ms ease-in-out 1200ms infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .celebration-stats > div:nth-child(1)::after {
  animation: reward-idle-balance-sheen 7600ms ease-in-out 2000ms infinite;
}

.reward-daily-strip::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 10%, color-mix(in srgb, var(--brand-gold) 16%, transparent), color-mix(in srgb, var(--primary) 12%, transparent), transparent 62%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-120%);
}

.reward-daily-strip > * {
  position: relative;
  z-index: 1;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-progress-track span::before {
  opacity: 0.3;
  animation: reward-idle-progress-sheen 6200ms ease-in-out 2600ms infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-progress-track span::after {
  opacity: 0.14;
  animation: progress-particle-drift 9600ms linear infinite;
}

.reward-celebration.reward-fx-settled:not(.reward-fx-running) .reward-daily-strip::after {
  animation: reward-idle-daily-sheen 8200ms ease-in-out 3400ms infinite;
}

.reward-celebration.reward-static-stable.reward-fx-background-energy .reward-sparkle-field span {
  opacity: 0 !important;
  animation:
    reward-sparkle 2250ms ease-out both,
    reward-sparkle-drift 3200ms ease-out both !important;
}

.reward-celebration.reward-static-stable.reward-fx-background-energy .reward-quantum-field span {
  opacity: 0 !important;
  animation: reward-quantum-beam 3300ms cubic-bezier(0.18, 0.78, 0.18, 1) both !important;
}

.reward-celebration.reward-static-stable.reward-fx-background-energy .reward-burst-ring {
  opacity: 0;
  animation:
    reward-ring-burst 1380ms cubic-bezier(0.16, 0.86, 0.24, 1) 180ms both,
    reward-ring-echo 1800ms cubic-bezier(0.16, 0.86, 0.24, 1) 620ms both !important;
}

.reward-celebration.reward-static-stable.reward-fx-background-energy .reward-complete-header h2 {
  animation: reward-title-ignite 1500ms ease-out 70ms both;
}

.reward-celebration.reward-static-stable.reward-fx-background-energy .reward-complete-badge {
  animation: reward-badge-spark 1500ms ease-out both;
}

.reward-celebration.reward-fx-payout-glow .celebration-copy {
  animation: reward-old-payout-card-glow 1900ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.reward-celebration.reward-fx-payout-glow .celebration-copy > #rewardCelebrationAmount {
  animation: reward-old-payout-amount-focus 1260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reward-celebration.reward-fx-payout-ripple .celebration-copy > #rewardCelebrationAmount::before {
  animation: reward-money-impact-ripple 900ms cubic-bezier(0.16, 0.86, 0.24, 1) 860ms both;
}

.reward-celebration.reward-fx-payout-sparks .celebration-copy > #rewardCelebrationAmount::after {
  animation: reward-money-sparkle-burst 920ms cubic-bezier(0.16, 0.86, 0.24, 1) 940ms both;
}

.reward-celebration.reward-fx-payout-shimmer .celebration-copy::before {
  animation: reward-payout-shimmer-sweep 780ms ease-out 760ms both;
}

.reward-celebration.reward-fx-payout-shimmer .reward-next-actions::before {
  animation: reward-card-sheen 980ms ease-out 900ms both;
}

.reward-celebration.reward-fx-balance-pulse .celebration-stats > div:nth-child(2) {
  animation: reward-old-stat-glow 980ms ease-out both;
}

.reward-celebration.reward-fx-progress-glow .celebration-stats > div:nth-child(3),
.reward-celebration.reward-fx-progress-glow .celebration-stats > div:nth-child(4),
.reward-celebration.reward-fx-progress-glow .reward-daily-strip {
  animation: reward-old-stat-glow 980ms ease-out both;
}

.reward-celebration.reward-fx-cta-pulse .reward-next-actions {
  animation: reward-old-cta-panel-glow 1120ms ease-out both;
}

.reward-replay-page {
  min-height: 100vh;
  overflow-x: clip;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 36%),
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%),
    var(--bg);
}

.reward-replay-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  gap: 18px;
  align-items: start;
  width: min(1340px, 100%);
  margin: 0 auto;
  padding: 18px;
}

.reward-replay-stage {
  width: 100%;
  min-height: auto;
  height: auto;
  overflow: visible;
}

.reward-replay-stage .reward-celebration {
  position: relative;
  inset: auto;
  min-height: auto;
}

.reward-replay-controls {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 18px;
  padding: 16px;
  background:
    radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 36%),
    linear-gradient(145deg, rgb(255 255 255 / 0.065), rgb(255 255 255 / 0.018)),
    rgb(15 23 42 / 0.72);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 18px 46px rgb(0 0 0 / 0.22);
}

.reward-replay-controls strong {
  color: var(--ink);
  font-size: 1.1rem;
}

.reward-replay-toggle-grid {
  display: grid;
  gap: 8px;
}

.reward-replay-toggle-grid label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--primary));
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
}

.reward-replay-actions {
  display: grid;
  gap: 8px;
}

.reward-replay-controls pre {
  max-height: 260px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--primary));
  border-radius: 10px;
  padding: 10px;
  background: rgb(2 6 23 / 0.58);
  color: color-mix(in srgb, var(--muted) 78%, var(--ink));
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

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

  .reward-replay-controls {
    position: relative;
    top: auto;
  }
}

@keyframes reward-claim-confirmed-flash {
  0% {
    filter: brightness(1);
    transform: scale(1);
  }

  54% {
    filter: brightness(1.16) saturate(1.08);
    transform: scale(1.012);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.12),
      0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent),
      0 24px 82px color-mix(in srgb, var(--primary) 24%, transparent),
      0 0 42px color-mix(in srgb, var(--brand-gold) 12%, transparent);
  }

  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}

@keyframes reward-verification-scan {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }

  34% {
    opacity: 0.82;
  }

  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes reward-payout-halo-build {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72) rotate(0deg);
  }

  58% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1.03) rotate(18deg);
  }

  100% {
    opacity: 0.18;
    transform: translate(-50%, -50%) scale(1.12) rotate(32deg);
  }
}

@keyframes reward-payout-chamber-build {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.08),
      inset 0 -1px 0 color-mix(in srgb, var(--amber) 12%, transparent),
      0 16px 46px rgb(0 0 0 / 0.18),
      0 0 38px color-mix(in srgb, var(--primary) 12%, transparent);
  }

  48% {
    filter: brightness(1.1) saturate(1.12);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.12),
      inset 0 -1px 0 color-mix(in srgb, var(--amber) 22%, transparent),
      0 18px 52px rgb(0 0 0 / 0.2),
      0 0 54px color-mix(in srgb, var(--primary) 22%, transparent),
      0 0 38px color-mix(in srgb, var(--brand-gold) 12%, transparent);
  }
}

@keyframes reward-payout-card-hit {
  0%,
  100% {
    filter: brightness(1);
    transform: translate3d(0, 0, 0) scale(1);
  }

  44% {
    filter: brightness(1.06);
    transform: translate3d(0, 0, 0) scale(1.002);
  }
}

@keyframes reward-payout-shimmer-sweep {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }

  38% {
    opacity: 0.84;
  }

  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes reward-payout-hero-rise {
  0% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: translate3d(0, 0, 0) scale(1);
  }

  58% {
    opacity: 1;
    filter: brightness(1.08) saturate(1.05);
    transform: translate3d(0, -2px, 0) scale(1.045);
  }

  100% {
    opacity: 1;
    filter: brightness(1.04) saturate(1.03);
    transform: translate3d(0, -1px, 0) scale(1.035);
  }
}

@keyframes reward-payout-amount-hit {
  0% {
    opacity: 1;
    filter: brightness(1.04) saturate(1.03);
    transform: translate3d(0, -1px, 0) scale(1.035);
  }

  46% {
    opacity: 1;
    filter: brightness(1.14) saturate(1.08);
    transform: translate3d(0, -1px, 0) scale(1.055);
  }

  100% {
    opacity: 1;
    filter: brightness(1.04) saturate(1.03);
    transform: translate3d(0, -1px, 0) scale(1.035);
  }
}

@keyframes reward-payout-amount-dock {
  0% {
    opacity: 1;
    filter: brightness(1.04) saturate(1.03);
    transform: translate3d(0, -1px, 0) scale(1.035);
  }

  64% {
    opacity: 1;
    filter: brightness(1.02) saturate(1.01);
    transform: translate3d(0, 0, 0) scale(1.01);
  }

  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes reward-credit-transfer {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.68);
  }

  18% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) translate3d(0, -6px, 0) scale(1);
  }

  82% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) translate3d(clamp(-270px, -22vw, -150px), clamp(132px, 20vh, 198px), 0) scale(0.92);
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) translate3d(clamp(-290px, -24vw, -162px), clamp(146px, 22vh, 214px), 0) scale(0.74);
  }
}

@keyframes reward-wallet-credit-label {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.94);
  }

  48% {
    opacity: 1;
    transform: translateY(0) scale(1.012);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes reward-wallet-check-pulse {
  0%,
  100% {
    filter: brightness(1);
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.12),
      0 0 20px color-mix(in srgb, var(--primary) 18%, transparent);
  }

  52% {
    filter: brightness(1.14);
    transform: scale(1.018);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.16),
      0 0 24px color-mix(in srgb, var(--primary) 34%, transparent),
      0 0 42px color-mix(in srgb, var(--brand-gold) 16%, transparent);
  }
}

@keyframes reward-wallet-card-confirm {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.08),
      0 0 0 color-mix(in srgb, var(--primary) 0%, transparent);
  }

  50% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.14),
      0 0 0 1px color-mix(in srgb, var(--primary) 32%, transparent),
      0 0 34px color-mix(in srgb, var(--primary) 20%, transparent),
      0 0 48px color-mix(in srgb, var(--brand-gold) 10%, transparent);
  }
}

@keyframes reward-verification-pill {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }

  70% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes reward-check-disc {
  0% {
    opacity: 0;
    transform: scale(0.45);
  }

  72% {
    opacity: 1;
    transform: scale(1.04);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes reward-check-mark {
  0% {
    opacity: 0;
    transform: translateY(-60%) rotate(42deg) scale(0.4);
  }

  100% {
    opacity: 1;
    transform: translateY(-60%) rotate(42deg) scale(1);
  }
}

@keyframes reward-cta-activate {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    filter: brightness(0.92);
  }

  64% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1.05);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

@keyframes reward-level-hero-card-impact {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }

  46% {
    opacity: 1;
    transform: scale(1.02);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes reward-level-hero-orb-impact {
  0% {
    transform: scale(0.9);
  }

  48% {
    transform: scale(1.035);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes reward-level-hero-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.58);
  }

  28% {
    opacity: 0.92;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.54);
  }
}

@keyframes reward-level-hero-sweep {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }

  34% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes reward-money-contained-glow {
  0% {
    opacity: 0;
    transform: scale(0.78);
  }

  42% {
    opacity: 1;
    transform: scale(1.08);
  }

  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

@keyframes reward-money-impact-ripple {
  0% {
    opacity: 0;
    transform: scale(0.78);
  }

  28% {
    opacity: 1;
    transform: scale(1.02);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--brand-gold) 42%, transparent),
      0 0 36px color-mix(in srgb, var(--primary) 26%, transparent);
  }

  100% {
    opacity: 0;
    transform: scale(1.42);
    box-shadow:
      0 0 0 18px transparent,
      0 0 62px transparent;
  }
}

@keyframes reward-money-sparkle-burst {
  0% {
    opacity: 0;
    transform: scale(0.54);
  }

  34% {
    opacity: 0.95;
    transform: scale(1.08);
  }

  100% {
    opacity: 0;
    transform: scale(1.52);
  }
}

@keyframes reward-progress-leading-glow {
  0% {
    opacity: 0;
    transform: translateX(-105%);
  }

  30% {
    opacity: 0.82;
  }

  100% {
    opacity: 0;
    transform: translateX(105%);
  }
}

@keyframes reward-xp-track-land {
  0%,
  100% {
    box-shadow:
      inset 0 1px 2px rgb(0 0 0 / 0.2),
      0 0 14px color-mix(in srgb, var(--accent) 9%, transparent);
  }

  45% {
    box-shadow:
      inset 0 1px 2px rgb(0 0 0 / 0.2),
      0 0 26px color-mix(in srgb, var(--accent) 30%, transparent),
      0 0 46px color-mix(in srgb, var(--primary) 16%, transparent);
  }
}

@keyframes reward-static-payout-halo {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.82);
  }

  28% {
    opacity: 0.9;
    transform: translate3d(-50%, -50%, 0) scale(0.99);
  }

  62% {
    opacity: 0.52;
    transform: translate3d(-50%, -50%, 0) scale(1.1);
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(1.28);
  }
}

@keyframes reward-static-payout-ripple {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.76);
  }

  24% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(0.96);
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(1.38);
  }
}

@keyframes reward-static-payout-shimmer {
  0% {
    opacity: 0;
    transform: translate3d(-115%, 0, 0);
  }

  32% {
    opacity: 0.86;
  }

  100% {
    opacity: 0;
    transform: translate3d(130%, 0, 0);
  }
}

@keyframes reward-static-payout-spark {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) scale(0.58);
  }

  28% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) translate3d(var(--reward-spark-x, 72px), var(--reward-spark-y, -48px), 0) scale(0.96);
  }
}

@keyframes reward-static-credit-deposit {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) scaleX(0.28);
  }

  16% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) scaleX(1);
  }

  74% {
    opacity: 0.96;
    transform: translate3d(-50%, -50%, 0) translate3d(clamp(-245px, -20vw, -164px), clamp(150px, 25vh, 210px), 0) scaleX(0.9);
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) translate3d(clamp(-245px, -20vw, -164px), clamp(150px, 25vh, 210px), 0) scaleX(0.36);
  }
}

@keyframes reward-static-token-deposit {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) translate3d(var(--reward-collect-x, 0), var(--reward-collect-y, 0), 0) rotate(45deg) scale(0.5);
  }

  18% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) translate3d(var(--reward-collect-x, 0), var(--reward-collect-y, 0), 0) rotate(45deg) scale(1);
  }

  42% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) rotate(45deg) scale(0.78);
  }

  76% {
    opacity: 0.96;
    transform: translate3d(-50%, -50%, 0) translate3d(clamp(-245px, -20vw, -164px), clamp(150px, 25vh, 210px), 0) rotate(45deg) scale(0.92);
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) translate3d(clamp(-245px, -20vw, -164px), clamp(150px, 25vh, 210px), 0) rotate(45deg) scale(0.36);
  }
}

@keyframes reward-static-deposit-ring {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) translate3d(clamp(-245px, -20vw, -164px), clamp(150px, 25vh, 210px), 0) scale(0.72);
  }

  36% {
    opacity: 0.96;
    transform: translate3d(-50%, -50%, 0) translate3d(clamp(-245px, -20vw, -164px), clamp(150px, 25vh, 210px), 0) scale(1.05);
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) translate3d(clamp(-245px, -20vw, -164px), clamp(150px, 25vh, 210px), 0) scale(1.58);
  }
}

@keyframes reward-deposit-card-confirm {
  0%,
  100% {
    filter: brightness(1);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.08),
      0 16px 44px rgb(0 0 0 / 0.18),
      0 0 0 color-mix(in srgb, var(--primary) 0%, transparent);
  }

  42% {
    filter: brightness(1.14) saturate(1.1);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.16),
      0 18px 50px rgb(0 0 0 / 0.22),
      0 0 0 1px color-mix(in srgb, var(--brand-gold) 42%, transparent),
      0 0 42px color-mix(in srgb, var(--primary) 30%, transparent),
      0 0 58px color-mix(in srgb, var(--brand-gold) 18%, transparent);
  }
}

@keyframes reward-static-wallet-sheen {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }

  34% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes reward-static-value-glow {
  0%,
  100% {
    text-shadow:
      0 0 12px color-mix(in srgb, var(--primary) 24%, transparent),
      0 5px 16px rgb(0 0 0 / 0.25);
  }

  45% {
    text-shadow:
      0 0 18px color-mix(in srgb, var(--brand-gold) 34%, transparent),
      0 0 34px color-mix(in srgb, var(--primary) 32%, transparent),
      0 5px 18px rgb(0 0 0 / 0.28);
  }
}

@keyframes reward-static-xp-track-glow {
  0%,
  100% {
    box-shadow:
      inset 0 1px 2px rgb(0 0 0 / 0.2),
      0 0 14px color-mix(in srgb, var(--accent) 9%, transparent);
  }

  46% {
    box-shadow:
      inset 0 1px 2px rgb(0 0 0 / 0.2),
      0 0 26px color-mix(in srgb, var(--accent) 26%, transparent),
      0 0 42px color-mix(in srgb, var(--primary) 16%, transparent);
  }
}

@keyframes reward-static-progress-leading-glow {
  0% {
    opacity: 0;
    transform: translateX(-115%);
  }

  30% {
    opacity: 0.76;
  }

  100% {
    opacity: 0;
    transform: translateX(112%);
  }
}

@keyframes reward-static-cta-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, #ffffff 13%, transparent) inset,
      0 0 30px color-mix(in srgb, var(--primary) 22%, transparent);
  }

  42% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, #ffffff 20%, transparent) inset,
      0 0 34px color-mix(in srgb, var(--brand-gold) 20%, transparent),
      0 0 54px color-mix(in srgb, var(--primary) 28%, transparent);
  }
}

@keyframes reward-idle-haze-drift {
  0%,
  100% {
    opacity: 0.16;
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    opacity: 0.3;
    transform: translate3d(16px, 10px, 0) scale(1.08);
  }
}

@keyframes reward-idle-haze-drift-alt {
  0%,
  100% {
    opacity: 0.12;
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    opacity: 0.24;
    transform: translate3d(-18px, 14px, 0) scale(1.06);
  }
}

@keyframes reward-idle-streak-drift {
  0%,
  68%,
  100% {
    opacity: 0;
    transform: rotate(-18deg) translate3d(-48%, 0, 0);
  }

  12% {
    opacity: 0.18;
  }

  36% {
    opacity: 0.08;
    transform: rotate(-18deg) translate3d(58%, 0, 0);
  }
}

@keyframes reward-idle-panel-bloom {
  0%,
  100% {
    opacity: 0.12;
    transform: translate3d(0, 0, 0) scale(0.98);
  }

  48% {
    opacity: 0.28;
    transform: translate3d(0, -2px, 0) scale(1.02);
  }
}

@keyframes reward-idle-orbit-drift {
  0% {
    opacity: 0.12;
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
  }

  50% {
    opacity: 0.2;
    transform: translate3d(-50%, -50%, 0) rotate(180deg) scale(1.018);
  }

  100% {
    opacity: 0.12;
    transform: translate3d(-50%, -50%, 0) rotate(360deg) scale(1);
  }
}

@keyframes reward-idle-balance-rest {
  0%,
  100% {
    opacity: 0.08;
  }

  45% {
    opacity: 0.24;
  }
}

@keyframes reward-idle-verify-sheen {
  0%,
  72%,
  100% {
    opacity: 0;
    transform: translate3d(-120%, 0, 0);
  }

  80% {
    opacity: 0.34;
  }

  94% {
    opacity: 0;
    transform: translate3d(120%, 0, 0);
  }
}

@keyframes reward-idle-cta-panel-glow {
  0%,
  100% {
    opacity: 0.08;
  }

  46% {
    opacity: 0.2;
  }
}

@keyframes reward-idle-border-energy {
  0%,
  72%,
  100% {
    opacity: 0;
    transform: rotate(0deg);
  }

  78% {
    opacity: 0.38;
  }

  94% {
    opacity: 0;
    transform: rotate(360deg);
  }
}

@keyframes reward-idle-aurora-drift {
  0%,
  100% {
    opacity: 0.1;
    transform: rotate(-12deg) translate3d(-12%, 0, 0) scale(1);
  }

  50% {
    opacity: 0.22;
    transform: rotate(-10deg) translate3d(8%, 10px, 0) scale(1.04);
  }
}

@keyframes reward-idle-aurora-drift-alt {
  0%,
  100% {
    opacity: 0.08;
    transform: rotate(-16deg) translate3d(10%, 0, 0) scale(1);
  }

  50% {
    opacity: 0.18;
    transform: rotate(-14deg) translate3d(-8%, -8px, 0) scale(1.05);
  }
}

@keyframes reward-idle-reward-panel-breathe {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.1),
      inset 0 -1px 0 color-mix(in srgb, var(--primary) 15%, transparent),
      0 22px 58px rgb(0 0 0 / 0.22),
      0 0 58px color-mix(in srgb, var(--primary) 13%, transparent);
  }

  50% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.12),
      inset 0 -1px 0 color-mix(in srgb, var(--brand-gold) 14%, transparent),
      0 22px 58px rgb(0 0 0 / 0.22),
      0 0 72px color-mix(in srgb, var(--primary) 20%, transparent),
      0 0 42px color-mix(in srgb, var(--brand-gold) 8%, transparent);
  }
}

@keyframes reward-idle-panel-ring {
  0%,
  100% {
    opacity: 0.1;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.82);
  }

  50% {
    opacity: 0.22;
    transform: translate(-50%, -50%) rotate(18deg) scale(0.9);
  }
}

@keyframes reward-idle-button-sheen {
  0%,
  72%,
  100% {
    opacity: 0;
    transform: translateX(-120%);
  }

  82% {
    opacity: 0.52;
  }

  96% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes reward-idle-cta-button-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, #ffffff 13%, transparent) inset,
      0 0 30px color-mix(in srgb, var(--primary) 22%, transparent);
  }

  82% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, #ffffff 17%, transparent) inset,
      0 0 34px color-mix(in srgb, var(--primary) 30%, transparent),
      0 0 42px color-mix(in srgb, var(--brand-gold) 10%, transparent);
  }
}

@keyframes reward-idle-balance-dot {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.16),
      0 0 18px color-mix(in srgb, var(--primary) 18%, transparent);
  }

  50% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.2),
      0 0 22px color-mix(in srgb, var(--primary) 28%, transparent),
      0 0 30px color-mix(in srgb, var(--brand-gold) 10%, transparent);
  }
}

@keyframes reward-idle-balance-sheen {
  0%,
  72%,
  100% {
    opacity: 0;
    transform: translateX(-120%);
  }

  82% {
    opacity: 0.48;
  }

  96% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes reward-idle-progress-sheen {
  0%,
  70%,
  100% {
    opacity: 0;
    transform: translateX(-115%);
  }

  78% {
    opacity: 0.46;
  }

  94% {
    opacity: 0;
    transform: translateX(112%);
  }
}

@keyframes reward-idle-daily-sheen {
  0%,
  76%,
  100% {
    opacity: 0;
    transform: translateX(-120%);
  }

  86% {
    opacity: 0.34;
  }

  96% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes reward-old-payout-card-glow {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.1),
      inset 0 -1px 0 color-mix(in srgb, var(--primary) 15%, transparent),
      0 22px 58px rgb(0 0 0 / 0.22),
      0 0 58px color-mix(in srgb, var(--primary) 13%, transparent);
  }

  40% {
    filter: brightness(1.08) saturate(1.08);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.13),
      inset 0 -1px 0 color-mix(in srgb, var(--brand-gold) 18%, transparent),
      0 24px 64px rgb(0 0 0 / 0.24),
      0 0 72px color-mix(in srgb, var(--primary) 24%, transparent),
      0 0 42px color-mix(in srgb, var(--brand-gold) 14%, transparent);
  }
}

@keyframes reward-old-payout-amount-focus {
  0% {
    filter: brightness(1) saturate(1);
    transform: translate3d(0, 0, 0) scale(1);
    text-shadow:
      0 0 18px color-mix(in srgb, var(--primary) 52%, transparent),
      0 0 46px color-mix(in srgb, var(--accent) 20%, transparent),
      0 10px 28px rgb(0 0 0 / 0.34);
  }

  52% {
    filter: brightness(1.16) saturate(1.08);
    transform: translate3d(0, -1px, 0) scale(1.035);
    text-shadow:
      0 0 24px color-mix(in srgb, #ffffff 44%, transparent),
      0 0 64px color-mix(in srgb, var(--primary) 54%, transparent),
      0 0 84px color-mix(in srgb, var(--brand-gold) 22%, transparent),
      0 10px 30px rgb(0 0 0 / 0.36);
  }

  100% {
    filter: brightness(1.04) saturate(1.02);
    transform: translate3d(0, 0, 0) scale(1);
    text-shadow:
      0 0 20px color-mix(in srgb, var(--primary) 48%, transparent),
      0 0 48px color-mix(in srgb, var(--accent) 18%, transparent),
      0 10px 28px rgb(0 0 0 / 0.34);
  }
}

@keyframes reward-old-stat-glow {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.08),
      inset 0 -1px 0 color-mix(in srgb, var(--primary) 10%, transparent),
      0 12px 24px rgb(0 0 0 / 0.14),
      0 0 24px color-mix(in srgb, var(--primary) 7%, transparent);
  }

  48% {
    filter: brightness(1.08) saturate(1.07);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.12),
      inset 0 -1px 0 color-mix(in srgb, var(--brand-gold) 14%, transparent),
      0 14px 30px rgb(0 0 0 / 0.16),
      0 0 34px color-mix(in srgb, var(--primary) 18%, transparent),
      0 0 26px color-mix(in srgb, var(--brand-gold) 8%, transparent);
  }
}

@keyframes reward-old-cta-panel-glow {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.08),
      0 16px 44px rgb(0 0 0 / 0.18);
  }

  46% {
    filter: brightness(1.07) saturate(1.05);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.12),
      0 18px 48px rgb(0 0 0 / 0.2),
      0 0 36px color-mix(in srgb, var(--primary) 16%, transparent),
      0 0 26px color-mix(in srgb, var(--brand-gold) 8%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reward-claim-confirmed .reward-complete-shell,
  .reward-level-up-hero-card,
  .reward-level-up-hero-card::after,
  .reward-level-up-hero-copy .reward-level-crossing,
  .reward-level-up-hero-copy .reward-level-crossing-gap,
  .reward-level-up-hero-ring,
  .reward-level-up-hero-orb,
  .reward-celebration.reward-money-focus .celebration-copy > #rewardCelebrationAmount::before,
  .reward-celebration.reward-money-focus .celebration-copy > #rewardCelebrationAmount::after,
  .reward-celebration.reward-money-hero .celebration-copy > #rewardCelebrationAmount,
  .reward-celebration.reward-money-landed .reward-complete-shell,
  .reward-celebration.reward-money-landed .celebration-copy::before,
  .reward-celebration.reward-money-landed .celebration-copy > #rewardCelebrationAmount,
  .reward-celebration.reward-money-landed .celebration-copy > #rewardCelebrationAmount::before,
  .reward-celebration.reward-money-landed .celebration-copy > #rewardCelebrationAmount::after,
  .reward-celebration.reward-money-docking .celebration-copy > #rewardCelebrationAmount,
  .reward-progress-track.is-progress-pulse span::before,
  .reward-progress-track.is-xp-landed,
  .reward-staged-sequence.reward-celebration-pop::before,
  .reward-staged-sequence .reward-verification-row span,
  .reward-staged-sequence .reward-verification-row span::before,
  .reward-staged-sequence .reward-verification-row span::after,
  .reward-staged-sequence .celebration-stats > div,
  .reward-wallet-crediting .reward-credit-trail,
  .reward-wallet-crediting .celebration-stats > div:nth-child(1)::before,
  .reward-wallet-updated .celebration-stats > div:nth-child(1),
  .reward-wallet-updated .celebration-stats > div:nth-child(1) small::after,
  .reward-payout-building .celebration-copy::after,
  .reward-payout-building .celebration-copy,
  .reward-staged-sequence .reward-progression-panel,
  .reward-staged-sequence .reward-daily-strip,
  .reward-staged-sequence .reward-next-actions > *,
  .reward-staged-sequence .reward-next-actions::after,
  .reward-staged-sequence.reward-cta-active .reward-next-actions,
  .reward-static-fx-layer span,
  .reward-idle-fx-layer,
  .reward-idle-fx-layer span,
  .reward-celebration.reward-fx-settled .reward-complete-hero .celebration-copy,
  .reward-celebration.reward-fx-settled .celebration-copy::after,
  .reward-celebration.reward-fx-settled .reward-action-primary,
  .reward-celebration.reward-fx-settled .reward-action-primary::after,
  .reward-celebration.reward-fx-settled .celebration-stats > div:nth-child(1)::before,
  .reward-celebration.reward-fx-settled .celebration-stats > div:nth-child(1)::after,
  .reward-celebration.reward-fx-settled .reward-progress-track span::before,
  .reward-celebration.reward-fx-settled .reward-progress-track span::after,
  .reward-celebration.reward-fx-settled .reward-daily-strip::after,
  .reward-celebration.reward-fx-background-energy .reward-sparkle-field span,
  .reward-celebration.reward-fx-background-energy .reward-quantum-field span,
  .reward-celebration.reward-fx-background-energy .reward-burst-ring,
  .reward-celebration.reward-fx-background-energy .reward-complete-header h2,
  .reward-celebration.reward-fx-background-energy .reward-complete-badge,
  .reward-celebration.reward-fx-payout-glow .celebration-copy,
  .reward-celebration.reward-fx-payout-glow .celebration-copy > #rewardCelebrationAmount,
  .reward-celebration.reward-fx-payout-ripple .celebration-copy > #rewardCelebrationAmount::before,
  .reward-celebration.reward-fx-payout-sparks .celebration-copy > #rewardCelebrationAmount::after,
  .reward-celebration.reward-fx-payout-shimmer .celebration-copy::before,
  .reward-celebration.reward-fx-payout-shimmer .reward-next-actions::before,
  .reward-celebration.reward-fx-balance-pulse .celebration-stats > div:nth-child(1)::after,
  .reward-celebration.reward-fx-balance-pulse #rewardCelebrationBalance,
  .reward-celebration.reward-fx-balance-pulse .celebration-stats > div:nth-child(1),
  .reward-celebration.reward-fx-balance-pulse .celebration-stats > div:nth-child(2),
  .reward-celebration.reward-fx-progress-glow .celebration-stats > div:nth-child(3),
  .reward-celebration.reward-fx-progress-glow .celebration-stats > div:nth-child(4),
  .reward-celebration.reward-fx-progress-glow .reward-daily-strip,
  .reward-celebration.reward-fx-progress-glow .reward-progress-track,
  .reward-celebration.reward-fx-progress-glow .reward-progress-track span::before,
  .reward-celebration.reward-fx-cta-pulse .reward-next-actions,
  .reward-celebration.reward-fx-cta-pulse .reward-action-primary {
    animation: none !important;
    transition: none !important;
  }

  .reward-level-up-hero-copy .reward-level-crossing,
  .reward-level-up-hero-copy .reward-level-crossing-gap {
    opacity: 1;
    transform: none;
  }

  .reward-static-fx-layer span {
    opacity: 0 !important;
  }

  .reward-idle-fx-layer,
  .reward-idle-fx-layer span {
    opacity: 0 !important;
  }

  .reward-staged-sequence .reward-verification-row span,
  .reward-staged-sequence .celebration-stats > div,
  .reward-staged-sequence .reward-progression-panel,
  .reward-staged-sequence .reward-daily-strip,
  .reward-staged-sequence .reward-next-actions,
  .reward-staged-sequence .reward-next-actions > * {
    opacity: 1 !important;
    pointer-events: auto;
    transform: none !important;
  }

  .reward-staged-sequence .reward-next-actions::after {
    opacity: 0 !important;
  }

  .reward-level-up-hero {
    display: none !important;
  }
}

@media (max-height: 780px) and (min-width: 861px) {
  .ad-frame-shell.is-rewarded .reward-complete-shell {
    align-content: start;
    max-height: none;
    padding-bottom: 22px;
  }

  .ad-frame-shell.is-rewarded .reward-complete-hero {
    margin-bottom: 18px;
  }

  .ad-frame-shell.is-rewarded .reward-complete-hero .celebration-copy {
    min-height: 284px;
  }

  .ad-frame-shell.is-rewarded .celebration-stats {
    margin-top: 18px;
  }
}

/* Completion performance pass: one JS wall-clock timeline coordinates a small,
   compositor-only effect budget. The accepted layout and palette stay intact. */
#rewardCelebration.reward-completion-performance {
  contain: paint style;
  isolation: isolate;
}

#rewardCelebration.reward-completion-performance .reward-complete-shell,
#rewardCelebration.reward-completion-performance .celebration-copy,
#rewardCelebration.reward-completion-performance .reward-next-actions,
#rewardCelebration.reward-completion-performance .celebration-stats > div,
#rewardCelebration.reward-completion-performance .reward-progression-panel,
#rewardCelebration.reward-completion-performance .reward-daily-strip {
  contain: layout paint style;
  isolation: isolate;
}

#rewardCelebration.reward-completion-performance #rewardCelebrationAmount {
  display: inline-block;
  inline-size: 7.25ch;
  min-inline-size: 7.25ch;
  max-inline-size: 7.25ch;
  margin-inline: auto;
  contain: layout paint style;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: center;
  transform: translate3d(0, 0, 0);
  will-change: opacity, transform;
}

#rewardCelebration.reward-completion-performance .reward-sparkle-field,
#rewardCelebration.reward-completion-performance .reward-quantum-field,
#rewardCelebration.reward-completion-performance .reward-xp-energy-field,
#rewardCelebration.reward-completion-performance .celebration-burst,
#rewardCelebration.reward-completion-performance .reward-burst-ring,
#rewardCelebration.reward-completion-performance .reward-idle-fx-layer,
#rewardCelebration.reward-completion-performance .reward-static-fx-ripple,
#rewardCelebration.reward-completion-performance .reward-static-fx-shimmer,
#rewardCelebration.reward-completion-performance .reward-static-fx-spark,
#rewardCelebration.reward-completion-performance .reward-level-up-fireworks,
#rewardCelebration.reward-completion-performance .reward-static-fx-token-5,
#rewardCelebration.reward-completion-performance .reward-static-fx-token-6 {
  display: none !important;
  animation: none !important;
}

#rewardCelebration.reward-completion-performance::before,
#rewardCelebration.reward-completion-performance::after,
#rewardCelebration.reward-completion-performance .reward-complete-shell,
#rewardCelebration.reward-completion-performance .reward-complete-shell::before,
#rewardCelebration.reward-completion-performance .reward-complete-shell::after,
#rewardCelebration.reward-completion-performance .reward-complete-header h2,
#rewardCelebration.reward-completion-performance .reward-complete-badge,
#rewardCelebration.reward-completion-performance .celebration-copy,
#rewardCelebration.reward-completion-performance .celebration-copy::before,
#rewardCelebration.reward-completion-performance .celebration-copy::after,
#rewardCelebration.reward-completion-performance .reward-verification-row,
#rewardCelebration.reward-completion-performance .reward-verification-row span,
#rewardCelebration.reward-completion-performance .reward-verification-row span::before,
#rewardCelebration.reward-completion-performance .reward-verification-row span::after,
#rewardCelebration.reward-completion-performance .celebration-stats > div,
#rewardCelebration.reward-completion-performance .celebration-stats > div::before,
#rewardCelebration.reward-completion-performance .celebration-stats > div::after,
#rewardCelebration.reward-completion-performance .reward-level-up-card,
#rewardCelebration.reward-completion-performance .reward-level-up-card::before,
#rewardCelebration.reward-completion-performance .level-up-ribbon,
#rewardCelebration.reward-completion-performance .reward-progression-panel,
#rewardCelebration.reward-completion-performance .reward-daily-strip,
#rewardCelebration.reward-completion-performance .reward-daily-strip::after,
#rewardCelebration.reward-completion-performance .reward-next-actions,
#rewardCelebration.reward-completion-performance .reward-next-actions::before,
#rewardCelebration.reward-completion-performance .reward-action-primary,
#rewardCelebration.reward-completion-performance .reward-action-primary::after,
#rewardCelebration.reward-completion-performance .reward-progress-track,
#rewardCelebration.reward-completion-performance .reward-progress-track span::before,
#rewardCelebration.reward-completion-performance .reward-progress-track span::after,
#rewardCelebration.reward-completion-performance .reward-orbital-ring {
  animation: none !important;
}

#rewardCelebration.reward-completion-performance .reward-verification-row span {
  opacity: 1;
  filter: none;
  transform: none;
}

#rewardCelebration.reward-completion-performance .reward-verification-row span::before,
#rewardCelebration.reward-completion-performance .reward-verification-row span::after {
  opacity: 1;
  transform: translateY(-60%) rotate(42deg) scale(1);
}

#rewardCelebration.reward-completion-performance .reward-verification-row span::before {
  transform: scale(1);
}

#rewardCelebration.reward-completion-performance .reward-static-fx-layer {
  contain: strict;
}

#rewardCelebration.reward-completion-performance .reward-static-fx-halo {
  filter: none;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary) 24%, transparent), color-mix(in srgb, var(--brand-gold) 10%, transparent) 38%, transparent 68%);
  box-shadow: none;
  will-change: opacity, transform;
}

#rewardCelebration.reward-completion-performance.reward-fx-payout-glow .reward-static-fx-halo {
  animation: reward-performance-halo 760ms ease-out both !important;
}

#rewardCelebration.reward-completion-performance .reward-static-fx-credit,
#rewardCelebration.reward-completion-performance .reward-static-fx-token,
#rewardCelebration.reward-completion-performance .reward-static-fx-deposit-ring {
  filter: none;
  will-change: opacity, transform;
}

#rewardCelebration.reward-completion-performance.reward-fx-wallet-credit-trail .reward-static-fx-credit {
  animation: reward-performance-credit-trail 760ms cubic-bezier(0.16, 0.86, 0.24, 1) both !important;
}

#rewardCelebration.reward-completion-performance.reward-fx-wallet-credit-trail .reward-static-fx-token {
  animation: reward-performance-token-trail 720ms cubic-bezier(0.16, 0.86, 0.24, 1) var(--reward-token-delay, 0ms) both !important;
}

#rewardCelebration.reward-completion-performance.reward-fx-wallet-credit-trail .reward-static-fx-deposit-ring {
  animation: reward-performance-deposit-ring 620ms ease-out 360ms both !important;
}

#rewardCelebration.reward-completion-performance.reward-money-hero #rewardCelebrationAmount {
  animation: reward-performance-amount-enter 520ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

#rewardCelebration.reward-completion-performance #rewardCelebrationAmount::before,
#rewardCelebration.reward-completion-performance #rewardCelebrationAmount::after {
  box-shadow: none;
  will-change: opacity, transform;
}

#rewardCelebration.reward-completion-performance #rewardCelebrationAmount::after {
  inset: 12% 10%;
  background: linear-gradient(105deg, transparent 18%, rgb(255 255 255 / 0.68) 49%, transparent 72%);
  transform: translate3d(-115%, 0, 0);
}

#rewardCelebration.reward-completion-performance.reward-money-landed #rewardCelebrationAmount::before {
  animation: reward-performance-amount-pulse 620ms ease-out both !important;
}

#rewardCelebration.reward-completion-performance.reward-money-landed #rewardCelebrationAmount::after {
  animation: reward-performance-amount-sweep 540ms ease-out both !important;
}

#rewardCelebration.reward-completion-performance.reward-fx-balance-pulse .celebration-stats > div:nth-child(1),
#rewardCelebration.reward-completion-performance.reward-fx-balance-pulse #rewardCelebrationBalance,
#rewardCelebration.reward-completion-performance.reward-fx-progress-glow .reward-progress-track,
#rewardCelebration.reward-completion-performance.reward-fx-cta-pulse .reward-action-primary {
  animation: reward-performance-contained-confirm 520ms ease-out both !important;
  filter: none !important;
}

#rewardCelebration.reward-completion-performance .reward-stage-controlled #rewardCelebrationAmount,
#rewardCelebration.reward-completion-performance .reward-balance-route,
#rewardCelebration.reward-completion-performance .celebration-copy p,
#rewardCelebration.reward-completion-performance .reward-next-goal,
#rewardCelebration.reward-completion-performance .celebration-stats > div,
#rewardCelebration.reward-completion-performance .reward-progression-panel,
#rewardCelebration.reward-completion-performance .reward-daily-strip,
#rewardCelebration.reward-completion-performance .reward-next-actions,
#rewardCelebration.reward-completion-performance .reward-next-actions > * {
  filter: none !important;
  transition-property: opacity, transform !important;
  will-change: opacity, transform;
}

#rewardCelebration.reward-completion-performance.reward-completion-confirmed .reward-complete-header h2::after {
  animation: reward-completion-seal 520ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

#rewardCelebration.reward-completion-performance.reward-completion-confirmed .reward-complete-shell {
  animation: reward-final-border-confirm 600ms ease-out both !important;
}

#rewardCelebration.reward-completion-performance.reward-completion-static,
#rewardCelebration.reward-completion-performance.reward-completion-static * ,
#rewardCelebration.reward-completion-performance.reward-completion-static *::before,
#rewardCelebration.reward-completion-performance.reward-completion-static *::after {
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}

#rewardCelebration.reward-completion-performance.reward-completion-static .reward-idle-fx-layer {
  display: none !important;
}

@keyframes reward-performance-halo {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.74); }
  38% { opacity: 0.62; }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.08); }
}

@keyframes reward-performance-amount-enter {
  from { opacity: 0.58; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes reward-performance-amount-pulse {
  0% { opacity: 0; transform: scale(0.74); }
  36% { opacity: 0.64; }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes reward-performance-amount-sweep {
  0% { opacity: 0; transform: translate3d(-115%, 0, 0); }
  22% { opacity: 0.74; }
  100% { opacity: 0; transform: translate3d(115%, 0, 0); }
}

@keyframes reward-performance-credit-trail {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scaleX(0.28); }
  36% { opacity: 0.72; }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) translate3d(clamp(-245px, -20vw, -164px), clamp(150px, 25vh, 210px), 0) scaleX(0.92); }
}

@keyframes reward-performance-token-trail {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) translate3d(var(--reward-collect-x), var(--reward-collect-y), 0) rotate(45deg) scale(0.62); }
  24% { opacity: 0.78; }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) translate3d(clamp(-245px, -20vw, -164px), clamp(150px, 25vh, 210px), 0) rotate(135deg) scale(0.34); }
}

@keyframes reward-performance-deposit-ring {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) translate3d(clamp(-245px, -20vw, -164px), clamp(150px, 25vh, 210px), 0) scale(0.68); }
  38% { opacity: 0.62; }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) translate3d(clamp(-245px, -20vw, -164px), clamp(150px, 25vh, 210px), 0) scale(1.1); }
}

@keyframes reward-performance-contained-confirm {
  0% { opacity: 0.82; transform: translate3d(0, 5px, 0); }
  56% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #rewardCelebration.reward-completion-performance,
  #rewardCelebration.reward-completion-performance *,
  #rewardCelebration.reward-completion-performance *::before,
  #rewardCelebration.reward-completion-performance *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Final completion cadence: the visible handoff, amount settlement and card
   stagger are sampled from the viewer's single wall-clock rAF. These rules
   replace only competing transitions; the accepted composition is unchanged. */
.level-up-orbital-pulse[data-completion-unified-handoff="true"].is-orb-handoff .level-up-orbit,
.level-up-orbital-pulse[data-completion-unified-handoff="true"].is-orb-handoff .level-up-copy {
  animation: none !important;
  transition: none !important;
  will-change: opacity, transform;
}

#rewardCelebration.reward-completion-unified-raf .reward-complete-shell,
#rewardCelebration.reward-completion-unified-raf #rewardCelebrationAmount,
#rewardCelebration.reward-completion-unified-raf #rewardCelebrationAmount::before,
#rewardCelebration.reward-completion-unified-raf #rewardCelebrationAmount::after,
#rewardCelebration.reward-completion-unified-raf .reward-static-fx-halo,
#rewardCelebration.reward-completion-unified-raf .reward-static-fx-credit-cluster,
#rewardCelebration.reward-completion-unified-raf .reward-static-fx-credit-cluster > *,
#rewardCelebration.reward-completion-unified-raf .level-up-ribbon,
#rewardCelebration.reward-completion-unified-raf .reward-level-up-card,
#rewardCelebration.reward-completion-unified-raf .celebration-stats > div,
#rewardCelebration.reward-completion-unified-raf .reward-progression-panel,
#rewardCelebration.reward-completion-unified-raf .reward-daily-strip,
#rewardCelebration.reward-completion-unified-raf .reward-next-actions,
#rewardCelebration.reward-completion-unified-raf .reward-next-actions > * {
  animation: none !important;
  transition: none !important;
}

#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] .reward-static-fx-layer *,
#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] #rewardCelebrationAmount,
#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] #rewardCelebrationAmount::before,
#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] #rewardCelebrationAmount::after,
#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] .reward-level-up-hero,
#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] .reward-level-up-hero *,
#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] #rewardLevelUpHero,
#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] #rewardLevelUpHero *,
#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] .reward-next-goal,
#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] .celebration-stats > div,
#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] .celebration-stats > div *,
#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] #rewardCelebrationBalance,
#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] .celebration-stats > div:nth-child(1) small,
#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] .celebration-stats > div:nth-child(1) small::after,
#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] .reward-progress-track,
#rewardCelebration.reward-completion-performance.reward-completion-unified-raf[data-completion-motion-controller="single-wall-clock-raf"] .reward-progress-track * {
  animation: none !important;
  transition: none !important;
}

#rewardCelebration.reward-completion-performance.reward-completion-static.reward-money-landed #rewardCelebrationAmount::before,
#rewardCelebration.reward-completion-performance.reward-completion-static.reward-money-landed #rewardCelebrationAmount::after,
#rewardCelebration.reward-completion-performance.reward-completion-static.reward-completion-confirmed .reward-complete-shell,
#rewardCelebration.reward-completion-performance.reward-completion-static.reward-completion-confirmed .reward-complete-header h2::after {
  animation: none !important;
  transition: none !important;
}

#rewardCelebration.reward-completion-unified-raf .reward-static-fx-credit-cluster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  contain: strict;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: opacity, transform;
}

#rewardCelebration.reward-completion-unified-raf .reward-static-fx-credit-cluster > .reward-static-fx-credit {
  opacity: 0.7;
  transform: translate3d(-50%, -50%, 0) scaleX(0.72);
  will-change: auto;
}

#rewardCelebration.reward-completion-unified-raf .reward-static-fx-credit-cluster > .reward-static-fx-token {
  opacity: 0.78;
  will-change: auto;
}

#rewardCelebration.reward-completion-unified-raf .reward-static-fx-credit-cluster > .reward-static-fx-deposit-ring {
  opacity: 0.48;
  transform: translate3d(-50%, -50%, 0) scale(0.72);
  will-change: auto;
}

#rewardCelebration.reward-completion-unified-raf .reward-static-fx-token-5,
#rewardCelebration.reward-completion-unified-raf .reward-static-fx-token-6 {
  display: none !important;
}

#rewardCelebration.reward-completion-unified-raf .celebration-stats > div:nth-child(1) {
  visibility: visible !important;
  filter: none !important;
}

#rewardCelebration.reward-completion-unified-raf .celebration-stats > div:nth-child(2) {
  visibility: visible !important;
  filter: none !important;
}

#rewardCelebration.reward-completion-unified-raf .celebration-stats > div:nth-child(3) {
  visibility: visible !important;
  filter: none !important;
}

#rewardCelebration.reward-completion-unified-raf .celebration-stats > div:nth-child(4) {
  visibility: visible !important;
  filter: none !important;
}

#rewardCelebration.reward-completion-unified-raf .level-up-ribbon,
#rewardCelebration.reward-completion-unified-raf .reward-level-up-card {
  visibility: visible !important;
  filter: none !important;
}

#rewardCelebration.reward-completion-unified-raf .reward-progression-panel {
  visibility: visible !important;
  filter: none !important;
}

#rewardCelebration.reward-completion-unified-raf .reward-daily-strip {
  visibility: visible !important;
  filter: none !important;
}

#rewardCelebration.reward-completion-unified-raf .reward-next-actions > * {
  visibility: visible !important;
  filter: none !important;
}

#rewardCelebration.reward-completion-unified-raf #rewardCelebrationAmount::before {
  opacity: var(--completion-settle-pulse-opacity, 0) !important;
  transform: scale(var(--completion-settle-pulse-scale, 0.74)) !important;
}

#rewardCelebration.reward-completion-unified-raf #rewardCelebrationAmount::after {
  opacity: var(--completion-settle-sweep-opacity, 0) !important;
  transform: translate3d(var(--completion-settle-sweep-x, -115%), 0, 0) !important;
}

@keyframes stat-card-enter {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.975);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes primary-action-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent) inset,
      0 0 18px color-mix(in srgb, var(--primary) 15%, transparent),
      0 0 34px color-mix(in srgb, var(--accent) 5%, transparent),
      0 14px 32px rgb(0 0 0 / 0.16);
  }

  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent) inset,
      0 0 30px color-mix(in srgb, var(--primary) 25%, transparent),
      0 0 58px color-mix(in srgb, var(--brand-gold) 8%, transparent),
      0 16px 36px rgb(0 0 0 / 0.18);
  }
}

@keyframes dashboard-hero-breathe {
  0%,
  100% {
    filter: saturate(1.02);
  }

  50% {
    filter: saturate(1.1);
  }
}

@keyframes dashboard-aura-drift {
  0%,
  100% {
    transform: translate3d(-0.6%, -0.4%, 0) scale(1);
    opacity: 0.48;
  }

  50% {
    transform: translate3d(0.8%, 0.55%, 0) scale(1.035);
    opacity: 0.72;
  }
}

@keyframes dashboard-sheen-pass {
  0%,
  100% {
    opacity: 0.16;
    transform: scale(0.98);
  }

  50% {
    opacity: 0.36;
    transform: scale(1.035);
  }
}

@keyframes dashboard-column-border {
  0%,
  100% {
    border-color: rgb(255 255 255 / 0.12);
    outline-color: rgb(255 255 255 / 0.025);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.08),
      inset 0 -1px 0 rgb(255 255 255 / 0.025),
      0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent),
      0 18px 46px rgb(0 0 0 / 0.2);
  }

  35% {
    border-color: color-mix(in srgb, var(--primary) 30%, rgb(255 255 255 / 0.12));
    outline-color: color-mix(in srgb, var(--primary) 16%, transparent);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.1),
      inset 0 -1px 0 rgb(255 255 255 / 0.03),
      0 0 0 1px color-mix(in srgb, var(--primary) 11%, transparent),
      0 0 18px color-mix(in srgb, var(--primary) 12%, transparent),
      0 0 42px color-mix(in srgb, var(--primary) 7%, transparent),
      0 0 0 8px color-mix(in srgb, var(--primary) 3%, transparent),
      0 24px 58px rgb(0 0 0 / 0.23);
  }

  68% {
    border-color: color-mix(in srgb, var(--brand-sky) 26%, rgb(255 255 255 / 0.12));
    outline-color: color-mix(in srgb, var(--brand-sky) 14%, transparent);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.1),
      inset 0 -1px 0 rgb(255 255 255 / 0.03),
      0 0 0 1px color-mix(in srgb, var(--brand-sky) 10%, transparent),
      0 0 16px color-mix(in srgb, var(--brand-sky) 10%, transparent),
      0 0 38px color-mix(in srgb, var(--brand-sky) 6%, transparent),
      0 0 0 7px color-mix(in srgb, var(--brand-sky) 2.8%, transparent),
      0 24px 58px rgb(0 0 0 / 0.23);
  }
}

@keyframes dashboard-subcolumn-border {
  0%,
  100% {
    border-color: rgb(255 255 255 / 0.105);
    outline-color: rgb(255 255 255 / 0.018);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.065),
      0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent),
      0 12px 28px rgb(0 0 0 / 0.13);
  }

  42% {
    border-color: color-mix(in srgb, var(--primary) 24%, rgb(255 255 255 / 0.105));
    outline-color: color-mix(in srgb, var(--primary) 11%, transparent);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.075),
      0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent),
      0 0 13px color-mix(in srgb, var(--primary) 9%, transparent),
      0 0 28px color-mix(in srgb, var(--primary) 4.8%, transparent),
      0 0 0 5px color-mix(in srgb, var(--primary) 2.5%, transparent),
      0 14px 32px rgb(0 0 0 / 0.15);
  }

  72% {
    border-color: color-mix(in srgb, var(--brand-gold) 18%, rgb(255 255 255 / 0.105));
    outline-color: color-mix(in srgb, var(--brand-gold) 9%, transparent);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.075),
      0 0 0 1px color-mix(in srgb, var(--brand-gold) 7%, transparent),
      0 0 12px color-mix(in srgb, var(--brand-gold) 8%, transparent),
      0 0 26px color-mix(in srgb, var(--brand-gold) 4.4%, transparent),
      0 0 0 5px color-mix(in srgb, var(--brand-gold) 2.2%, transparent),
      0 14px 32px rgb(0 0 0 / 0.15);
  }
}

@keyframes dashboard-primary-border {
  0%,
  100% {
    border-color: color-mix(in srgb, var(--primary) 68%, var(--accent));
    outline-color: color-mix(in srgb, var(--brand-sky) 10%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent) inset,
      0 0 16px color-mix(in srgb, var(--primary) 18%, transparent),
      0 14px 32px rgb(0 0 0 / 0.16);
  }

  50% {
    border-color: color-mix(in srgb, var(--brand-gold) 24%, var(--primary));
    outline-color: color-mix(in srgb, var(--brand-gold) 18%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent) inset,
      0 0 0 1px color-mix(in srgb, var(--brand-gold) 12%, transparent),
      0 0 22px color-mix(in srgb, var(--primary) 28%, transparent),
      0 0 42px color-mix(in srgb, var(--brand-gold) 12%, transparent),
      0 0 0 9px color-mix(in srgb, var(--brand-gold) 3.5%, transparent),
      0 18px 40px rgb(0 0 0 / 0.2);
  }
}

@keyframes effect-major-border-shimmer {
  0%,
  100% {
    border-color: var(--fx-border-major);
    outline-color: color-mix(in srgb, var(--primary) 7%, transparent);
    box-shadow:
      var(--fx-inner-highlight),
      var(--fx-shadow-major);
  }

  48% {
    border-color: color-mix(in srgb, var(--primary) 34%, var(--fx-border-major));
    outline-color: color-mix(in srgb, var(--brand-sky) 17%, transparent);
    box-shadow:
      var(--fx-inner-highlight),
      0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent),
      0 0 30px color-mix(in srgb, var(--brand-sky) 13%, transparent),
      0 0 52px color-mix(in srgb, var(--primary) 9%, transparent),
      0 0 84px color-mix(in srgb, var(--brand-gold) 3.4%, transparent),
      var(--fx-shadow-major);
  }
}

@keyframes major-glass-flow {
  0%,
  100% {
    background-position: 0% 0%, 100% 0%, 0 0, 0 0;
    filter: saturate(1.02) brightness(1);
  }

  50% {
    background-position: 100% 14%, 0% 8%, 0 0, 0 0;
    filter: saturate(1.12) brightness(1.035);
  }
}

@keyframes effect-reward-border-shimmer {
  0%,
  100% {
    border-color: var(--fx-border-reward);
    outline-color: color-mix(in srgb, var(--brand-sky) 12%, transparent);
  }

  50% {
    border-color: color-mix(in srgb, var(--brand-gold) 40%, var(--primary));
    outline-color: color-mix(in srgb, var(--brand-gold) 24%, transparent);
  }
}

@keyframes reward-button-sheen {
  0%,
  62%,
  100% {
    transform: translateX(-135%);
  }

  78% {
    transform: translateX(135%);
  }
}

@keyframes accent-text-breathe {
  0%,
  100% {
    opacity: 0.9;
    text-shadow: 0 0 10px color-mix(in srgb, var(--primary) 18%, transparent);
  }

  50% {
    opacity: 1;
    text-shadow:
      0 0 16px color-mix(in srgb, var(--primary) 42%, transparent),
      0 0 28px color-mix(in srgb, var(--brand-sky) 16%, transparent);
  }
}

@keyframes metric-card-breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--primary) 3%, transparent) inset,
      0 0 12px color-mix(in srgb, var(--primary) 3%, transparent),
      var(--soft-shadow);
  }

  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--primary) 6%, transparent) inset,
      0 0 16px color-mix(in srgb, var(--primary) 5%, transparent),
      var(--soft-shadow);
  }
}

@keyframes metric-edge-shine {
  0%,
  100% {
    background-position: 0% 50%;
    opacity: 0.66;
    transform: translateZ(0);
  }

  50% {
    background-position: 100% 50%;
    opacity: 0.82;
    transform: translateZ(0);
  }
}

@keyframes progress-fill-flow {
  0%,
  100% {
    background-position: 0% 50%;
    box-shadow:
      0 0 14px rgba(56, 189, 248, 0.24),
      0 0 0 color-mix(in srgb, var(--primary) 0%, transparent);
  }

  50% {
    background-position: 100% 50%;
    box-shadow:
      0 0 20px rgba(56, 189, 248, 0.36),
      0 0 24px color-mix(in srgb, var(--primary) 14%, transparent);
  }
}

@keyframes status-bar-aura {
  0%,
  100% {
    background-position: 0% 0%, 100% 0%, 0 0;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.055),
      0 10px 28px rgb(0 0 0 / 0.16),
      0 0 20px color-mix(in srgb, var(--primary) 3%, transparent);
  }

  50% {
    background-position: 100% 18%, 0% 12%, 0 0;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.075),
      0 12px 32px rgb(0 0 0 / 0.18),
      0 0 34px color-mix(in srgb, var(--primary) 8%, transparent),
      0 0 54px color-mix(in srgb, var(--accent) 4%, transparent);
  }
}

@keyframes account-chip-breathe {
  0%,
  100% {
    border-color: color-mix(in srgb, var(--primary) 8%, var(--line));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.052),
      0 0 18px color-mix(in srgb, var(--primary) 4%, transparent);
  }

  50% {
    border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.07),
      0 0 26px color-mix(in srgb, var(--primary) 10%, transparent),
      0 0 42px color-mix(in srgb, var(--accent) 4%, transparent);
  }
}

@keyframes compact-avatar-aura {
  0%,
  100% {
    box-shadow:
      0 10px 20px rgba(34, 197, 94, 0.18),
      0 0 18px rgba(56, 189, 248, 0.12);
  }

  50% {
    box-shadow:
      0 12px 24px rgba(34, 197, 94, 0.28),
      0 0 28px rgba(56, 189, 248, 0.2),
      0 0 42px rgba(250, 204, 21, 0.07);
  }
}

@keyframes brand-card-aura {
  0%,
  100% {
    background-position: 0% 50%, 0 0;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 0 0 rgba(34, 197, 94, 0);
  }

  50% {
    background-position: 100% 50%, 0 0;
    border-color: rgba(56, 189, 248, 0.18);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.095),
      0 0 30px rgba(34, 197, 94, 0.12),
      0 0 44px rgba(56, 189, 248, 0.08);
  }
}

@keyframes brand-underline-flow {
  0%,
  100% {
    background-position: 0% 50%;
    opacity: 0.72;
  }

  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
}

@keyframes brand-mark-aura {
  0%,
  100% {
    filter: saturate(1);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.12),
      0 14px 30px rgba(34, 197, 94, 0.22),
      0 0 28px rgba(56, 189, 248, 0.16);
  }

  50% {
    filter: saturate(1.2);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.18),
      0 16px 34px rgba(34, 197, 94, 0.32),
      0 0 38px rgba(56, 189, 248, 0.28),
      0 0 54px rgba(250, 204, 21, 0.08);
  }
}

@keyframes nav-active-breathe {
  0%,
  100% {
    box-shadow:
      0 14px 32px rgba(34, 197, 94, 0.12),
      0 0 0 1px rgba(34, 197, 94, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  50% {
    box-shadow:
      0 16px 36px rgba(34, 197, 94, 0.2),
      0 0 24px rgba(56, 189, 248, 0.1),
      0 0 0 1px rgba(34, 197, 94, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.11);
  }
}

@keyframes nav-active-rail {
  0%,
  100% {
    opacity: 0.82;
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.45);
  }

  50% {
    opacity: 1;
    box-shadow:
      0 0 24px rgba(34, 197, 94, 0.7),
      0 0 34px rgba(56, 189, 248, 0.18);
  }
}

@keyframes nav-active-sheen {
  0%,
  54%,
  100% {
    opacity: 0;
    transform: translateX(-120%);
  }

  68% {
    opacity: 0.42;
  }

  86% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes dashboard-value-glow {
  0%,
  100% {
    text-shadow:
      0 0 10px color-mix(in srgb, var(--primary) 10%, transparent),
      0 4px 14px rgb(0 0 0 / 0.2);
  }

  50% {
    text-shadow:
      0 0 18px color-mix(in srgb, var(--primary) 26%, transparent),
      0 0 34px color-mix(in srgb, var(--brand-sky) 12%, transparent),
      0 4px 14px rgb(0 0 0 / 0.22);
  }
}

@keyframes panel-soft-shine {
  0%,
  100% {
    opacity: 0.34;
    transform: scale(0.99);
  }

  50% {
    opacity: 0.62;
    transform: scale(1.035);
  }
}

@keyframes primary-action-sheen {
  0%,
  100% {
    opacity: 0.26;
    transform: scale(0.99);
  }

  50% {
    opacity: 0.58;
    transform: scale(1.035);
  }
}

@keyframes live-counter-breathe {
  0%,
  100% {
    opacity: 0.62;
    filter: drop-shadow(0 0 0 color-mix(in srgb, var(--primary) 0%, transparent));
  }

  50% {
    opacity: 0.92;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--primary) 28%, transparent));
  }
}

@keyframes xp-bar-glow {
  0%,
  100% {
    background-position: 0% 50%;
    box-shadow:
      0 0 18px rgba(56, 189, 248, 0.3),
      0 0 0 color-mix(in srgb, var(--primary) 0%, transparent);
  }

  50% {
    background-position: 100% 50%;
    box-shadow:
      0 0 24px rgba(56, 189, 248, 0.38),
      0 0 30px color-mix(in srgb, var(--primary) 18%, transparent);
  }
}

@keyframes live-button-breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.16) inset,
      0 0 16px color-mix(in srgb, var(--primary) 18%, transparent);
  }

  50% {
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.24) inset,
      0 0 26px color-mix(in srgb, var(--primary) 30%, transparent);
  }
}

@media (max-width: 860px) {
  .reward-complete-shell {
    min-height: auto;
  }

  .ad-frame-shell.is-rewarded {
    height: auto;
    max-height: none;
  }

  .reward-complete-hero {
    grid-template-columns: 1fr;
  }

  .ad-frame-shell.is-rewarded .reward-complete-hero {
    grid-template-columns: 1fr;
  }

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

  .reward-progression-panel,
  .ad-frame-shell.is-rewarded .reward-progression-panel {
    grid-template-columns: 1fr;
  }

  .reward-unlock-reveals,
  .ad-frame-shell.is-rewarded .reward-unlock-reveals {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .reward-celebration {
    padding: clamp(18px, 4vh, 28px) 12px 12px;
  }

  .reward-complete-shell {
    gap: 12px;
    padding: 14px;
  }

  .reward-complete-hero .celebration-copy {
    min-height: 220px;
  }

  .reward-level-up-fireworks {
    transform: scale(0.72);
    transform-origin: 50% 44%;
  }

  .celebration-copy strong {
    font-size: clamp(3.2rem, 17vw, 4.8rem);
  }

  .celebration-stats {
    grid-template-columns: 1fr;
  }

  .celebration-stats > div {
    min-height: 102px;
  }

  .reward-daily-strip {
    grid-template-columns: 1fr;
  }

  .reward-daily-strip strong {
    white-space: normal;
  }

  .reward-orbital-ring {
    width: min(88%, 320px);
  }

  .reward-progression-chip strong,
  .reward-unlock-reveal strong {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  #xpProgressBar,
  #xpProgressBar::before,
  #xpProgressBar::after,
  .member-status-bar,
  .member-status-account,
  .compact-avatar,
  .brand-home-button,
  .brand-home-button::after,
  .brand-home-button .brand-mark,
  .sidebar .nav-item.is-active,
  .sidebar .nav-item.is-active::before,
  .sidebar .nav-item.is-active::after,
  .topbar.is-dashboard-topbar,
  .topbar.is-dashboard-topbar::before,
  .topbar.is-dashboard-topbar::after,
  #dashboard .panel,
  #dashboard .next-action-card,
  #dashboard .safety-strip,
  #dashboard .next-action,
  #dashboard .action-card,
  #dashboard .achievement-card,
  #dashboard .milestone-list > *,
  .auth-panel,
  .audience-card,
  .marketplace-preview,
  .referral-growth-section,
  .platform-proof,
  .landing-workflow,
  .landing-hero,
  .legal-hero,
  .legal-nav,
  .legal-section,
  .signup-card,
  .signup-referral-program,
  .optional-profile-fields,
  .advertiser-auth-copy,
  .advertiser-overview-intro,
  .admin-login-copy,
  .admin-card,
  .admin-panel,
  .admin-drawer-section,
  .preview-dashboard-grid article,
  .growth-card-grid article,
  .auth-path div,
  .trust-card-grid article,
  .signup-benefit-grid div,
  .tier-grid div,
  .auth-facts div,
  .legal-grid > div,
  .legal-callout,
  .responsive-table,
  .admin-test-credentials,
  .viewer-topbar,
  .viewer-panel,
  .embed-fallback-panel,
  .ad-frame-shell,
  .viewer-debug-panel,
  .reward-complete-shell,
  .reward-card,
  .timer-card,
  .viewer-mini-stat,
  .viewer-status-strip span,
  .captcha-panel,
  .engagement-panel,
  .verified-click-through-panel,
  .viewer-next-links a,
  .app-shell .view-section .panel,
  .app-shell .view-section .next-action-card,
  .app-shell .view-section .safety-strip,
  .app-shell .view-section .levels-hero,
  .app-shell .view-section .world-chat-hero,
  .app-shell .view-section .profile-hero,
  .app-shell .view-section .earn-more-hero,
  .app-shell .view-section .survey-wall-hero,
  .app-shell .view-section .metric-card,
  .app-shell .view-section .ad-card,
  .app-shell .view-section .action-card,
  .app-shell .view-section .activity-row,
  .app-shell .view-section .ledger-row,
  .app-shell .view-section .payout-row,
  .app-shell .view-section .referral-row,
  .app-shell .view-section .campaign-row,
  .app-shell .view-section .admin-row,
  .app-shell .view-section .goal-row,
  .app-shell .view-section .achievement-card,
  .app-shell .view-section .earn-module,
  .app-shell .view-section .survey-provider-card,
  .app-shell .view-section .survey-offer-card,
  .app-shell .view-section .wallet-summary,
  .app-shell .view-section .payout-minimum-card,
  .app-shell .view-section .level-core-card,
  .app-shell .view-section .cosmetic-next-card,
  .app-shell .view-section .cosmetic-milestone-card,
  .app-shell .view-section .leaderboard-row,
  .app-shell .view-section .xp-history-row,
  .app-shell .view-section .profile-level-card,
  .app-shell .view-section .profile-stat-card,
  .app-shell .view-section .profile-detail-list > *,
  .app-shell .view-section .world-chat-status-grid article,
  .app-shell .view-section .chat-identity-card,
  .app-shell .view-section .chat-rules-card,
  .app-shell .view-section .help-topic-card,
  .app-shell .view-section .help-status-card,
  .promo-link-card,
  .promo-asset-card,
  .social-template-card,
  .qr-card,
  .topbar.is-dashboard-topbar .eyebrow,
  #dashboard .panel-heading .eyebrow,
  .account-snapshot-grid .metric-card strong,
  .account-snapshot-grid .metric-card,
  .account-snapshot-grid .metric-card::after,
  .account-snapshot-grid .metric-card::before,
  .progress-track:not(.viewer-timer-progress) span,
  .mini-progress span,
  .mini-progress-track span,
  .next-action-card::before,
  .next-action.is-primary-action::before,
  .next-action.is-primary-action .primary-button,
  .next-action.is-primary-action .primary-button::before,
  #requestPayout::before,
  .ptc-ad-action-panel .primary-button::before,
  .reward-next-actions .primary-button::before,
  .reward-complete-header h2,
  .reward-complete-badge,
  .reward-verification-row,
  .reward-balance-route,
  .reward-next-goal,
  .fx-major-panel,
  .fx-reward-action {
    animation: none !important;
  }

  .next-action.is-primary-action {
    animation: none !important;
  }

  .reward-sparkle-field,
  .reward-quantum-field,
  .reward-level-up-fireworks,
  .reward-level-up-fireworks::before,
  .reward-level-up-fireworks::after,
  .reward-level-up-fireworks span,
  .reward-level-up-fireworks span::before,
  .reward-level-up-fireworks span::after,
  .reward-burst-ring,
  .reward-burst-ring::before,
  .reward-burst-ring::after,
  .reward-celebration::before,
  .reward-celebration::after,
  .reward-complete-shell::after,
  .celebration-burst {
    animation: none !important;
    opacity: 0 !important;
  }
}

.world-chat-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: var(--radius);
  padding: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--primary)), color-mix(in srgb, var(--surface-2) 88%, var(--accent))),
    var(--surface);
  box-shadow: var(--shadow);
}

.world-chat-hero h2 {
  margin: 4px 0 8px;
  font-size: clamp(2rem, 4vw, 3.8rem);
  letter-spacing: 0;
}

.world-chat-hero p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.world-chat-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.world-chat-status-grid article,
.chat-identity-card,
.chat-rules-card {
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--bg-soft) 78%, var(--surface));
}

.world-chat-status-grid span,
.chat-identity-card small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.world-chat-status-grid strong,
.chat-identity-card strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 0.98rem;
}

.world-chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.world-chat-panel {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--bg) 76%, var(--surface))),
    var(--surface);
  box-shadow: var(--shadow);
}

.world-chat-panel .panel-heading {
  padding: 16px;
}

.world-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: min(58vh, 620px);
  min-height: 420px;
  overflow-y: auto;
  border-block: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  padding: 14px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--line) 18%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--line) 10%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--bg) 88%, var(--surface));
  background-size: 28px 28px;
}

.chat-message {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: var(--radius);
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}

.chat-message:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.chat-avatar {
  display: grid;
  width: 42px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 46%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
  color: var(--primary);
  font-weight: 950;
}

.chat-message-body {
  min-width: 0;
}

.chat-message-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 5px;
}

.chat-message-meta span,
.chat-role-badge {
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.chat-role-badge {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--line));
  color: var(--primary);
}

.chat-author-name {
  color: var(--ink);
  font-weight: 950;
}

.chat-message p {
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.chat-message small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.chat-message-system {
  grid-template-columns: 18px minmax(0, 1fr);
  border-color: color-mix(in srgb, var(--brand-gold) 46%, var(--line));
  background: color-mix(in srgb, var(--brand-gold) 10%, var(--surface-2));
}

.chat-message-system strong {
  color: var(--brand-gold);
}

.chat-system-pulse {
  width: 12px;
  aspect-ratio: 1;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--brand-gold);
  box-shadow: 0 0 16px color-mix(in srgb, var(--brand-gold) 62%, transparent);
}

.chat-tier-new-viewer .chat-author-name {
  color: #d7eef3;
}

.chat-tier-active-viewer .chat-author-name {
  color: #72b8ff;
}

.chat-tier-bronze-viewer .chat-author-name {
  color: #b5beca;
}

.chat-tier-gold-viewer .chat-author-name {
  color: var(--brand-gold);
  text-shadow: 0 0 12px color-mix(in srgb, var(--brand-gold) 46%, transparent);
}

.chat-tier-elite-viewer .chat-author-name {
  color: #35f3c5;
  text-shadow: 0 0 14px color-mix(in srgb, var(--primary) 52%, transparent);
}

.chat-tier-yield-legend {
  animation: chat-prestige-border 2400ms linear infinite;
  border-color: var(--brand-gold);
}

.chat-tier-yield-legend .chat-author-name {
  color: #fff1a6;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--brand-gold) 62%, transparent),
    0 0 18px color-mix(in srgb, var(--accent) 34%, transparent);
}

.chat-veteran-icon {
  border-color: color-mix(in srgb, var(--brand-gold) 46%, var(--line)) !important;
  color: var(--brand-gold) !important;
}

.chat-message.is-deleted {
  opacity: 0.72;
}

.world-chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
}

.world-chat-composer input {
  min-width: 0;
}

.world-chat-side {
  display: grid;
  gap: 14px;
}

.chat-rules-card p {
  margin: 8px 0 12px;
  color: var(--muted);
  line-height: 1.55;
}

.chat-rules-card .perk-list span {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

.admin-chat-row.is-deleted {
  opacity: 0.75;
}

.admin-chat-log {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  padding-top: 10px;
}

.admin-chat-log small {
  color: var(--muted);
}

@keyframes chat-prestige-border {
  0% {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-gold) 45%, transparent);
  }

  50% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
      0 0 18px color-mix(in srgb, var(--brand-gold) 20%, transparent);
  }

  100% {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-gold) 45%, transparent);
  }
}

@media (max-width: 980px) {
  .world-chat-hero,
  .world-chat-layout {
    grid-template-columns: 1fr;
  }

  .world-chat-status-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .world-chat-hero {
    padding: 16px;
  }

  .world-chat-messages {
    min-height: 360px;
  }

  .world-chat-composer {
    grid-template-columns: 1fr;
  }
}

/* Compact, high-trust ad board refinement */
.ad-grid {
  gap: 11px;
}

.ptc-ad-row {
  grid-template-columns: minmax(0, 1fr) minmax(132px, 0.18fr);
  grid-template-areas:
    "brand action"
    "main action"
    "meta action";
  min-height: 0;
  border-radius: 18px;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ptc-ad-row::before {
  height: 2px;
  background-size: 220% 100%;
}

.ptc-ad-row::after {
  width: 190px;
  opacity: 0.72;
}

.ptc-ad-row.is-package-boosted {
  border-color: color-mix(in srgb, var(--brand-sky) 36%, var(--line));
}

.ptc-ad-row.is-package-premium {
  border-color: color-mix(in srgb, var(--brand-gold) 42%, var(--brand-sky) 20%);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.25),
    0 0 24px color-mix(in srgb, var(--brand-gold) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ptc-ad-row.is-rare-ad,
.ptc-ad-row.is-legendary-ad {
  background:
    radial-gradient(circle at 84% 22%, color-mix(in srgb, var(--brand-gold) 13%, transparent), transparent 30%),
    radial-gradient(circle at 14% 95%, color-mix(in srgb, var(--brand-sky) 12%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025) 44%, rgba(34, 197, 94, 0.065)),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(8, 13, 24, 0.98));
}

.ptc-ad-row.is-legendary-ad::before {
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-mint), var(--brand-sky), var(--brand-gold));
  animation: ad-board-line-sweep 7s linear infinite;
}

.ptc-ad-row.is-ready:hover::before {
  animation: ad-board-line-sweep 900ms ease both;
}

.ptc-ad-row:hover .ptc-ad-logo {
  transform: translateY(-1px) scale(1.03);
}

.ptc-ad-row:hover .ptc-ad-meta div {
  border-color: color-mix(in srgb, var(--brand-sky) 26%, var(--line));
}

.ptc-ad-brand-block {
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 10px;
  border-right: 0;
  padding: 12px 14px 6px;
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.1), transparent 58%),
    transparent;
}

.ptc-ad-logo {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 0.78rem;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.ptc-ad-brand-copy {
  gap: 2px;
}

.ptc-ad-brand-copy span {
  font-size: 0.62rem;
  text-transform: uppercase;
}

.ptc-ad-brand-copy strong {
  font-size: 0.86rem;
}

.ptc-ad-brand-copy small {
  font-size: 0.68rem;
}

.ptc-ad-main {
  gap: 7px;
  padding: 4px 14px 8px;
}

.ptc-ad-header {
  grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
  gap: 10px;
}

.ptc-ad-kicker,
.ptc-trust-strip {
  gap: 5px;
}

.ptc-ad-kicker span,
.ptc-trust-strip span {
  min-height: 20px;
  padding: 2px 7px;
  font-size: 0.64rem;
}

.ptc-ad-main h3 {
  margin: 4px 0 0;
  font-size: 1.02rem;
  line-height: 1.14;
}

.ptc-ad-main p {
  max-width: none;
  font-size: 0.84rem;
  line-height: 1.36;
}

.ptc-ad-status-stack {
  gap: 5px;
}

.ptc-ad-status-stack .status-badge {
  min-height: 21px;
  padding: 0 7px;
  font-size: 0.66rem;
}

.ptc-ad-meta {
  grid-template-columns: repeat(5, minmax(64px, 1fr));
  gap: 7px;
  padding: 0 14px 12px;
}

.ptc-ad-meta div {
  min-height: 50px;
  border-radius: 12px;
  padding: 7px 8px;
}

.ptc-ad-meta span {
  font-size: 0.65rem;
}

.ptc-ad-meta strong {
  font-size: 0.88rem;
}

.ptc-ad-meta small {
  display: none;
}

.ptc-ad-meta .ptc-xp-meta {
  border-color: color-mix(in srgb, var(--brand-gold) 40%, var(--line));
  background:
    radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--brand-gold) 18%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(2, 6, 23, 0.36);
}

.ptc-ad-meta .ptc-xp-meta strong {
  color: var(--brand-gold);
  font-size: 0.82rem;
  text-wrap: balance;
}

.ptc-ad-row.is-package-boosted .ptc-xp-meta strong {
  color: color-mix(in srgb, var(--brand-sky) 72%, white);
}

.ptc-ad-row.is-package-premium .ptc-xp-meta strong,
.ptc-ad-row.is-legendary-ad .ptc-xp-meta strong {
  color: color-mix(in srgb, var(--brand-gold) 86%, white);
  text-shadow: 0 0 14px color-mix(in srgb, var(--brand-gold) 32%, transparent);
}

.ptc-ad-actions {
  grid-template-columns: 1fr;
  align-content: center;
  gap: 7px;
  padding: 12px;
}

.ptc-action-caption {
  display: block;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 28%, var(--line));
  border-radius: 12px;
  padding: 7px 8px;
  background: color-mix(in srgb, var(--brand-gold) 9%, transparent);
  color: var(--muted-2);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.25;
}

.ptc-action-caption strong {
  display: block;
  color: var(--brand-gold);
  font-size: 1rem;
  line-height: 1.08;
}

.ptc-ad-action-panel .primary-button,
.ptc-ad-action-panel .text-button {
  min-height: 35px;
  border-radius: 11px;
  padding: 6px 9px;
  font-size: 0.78rem;
}

.ptc-ad-action-panel .text-button {
  min-height: 32px;
}

.ptc-ad-actions .blocked-ad-note {
  grid-column: auto;
}

.blocked-ad-note {
  font-size: 0.68rem;
  line-height: 1.28;
}

@keyframes ad-board-line-sweep {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

@media (max-width: 720px) {
  .ptc-ad-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "main"
      "meta"
      "action";
  }

  .ptc-ad-brand-block,
  .ptc-ad-actions {
    border-right: 0;
    border-left: 0;
  }

  .ptc-ad-brand-block {
    border-bottom: 1px solid var(--line);
  }

  .ptc-ad-actions {
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line);
  }

  .ptc-action-caption,
  .ptc-ad-actions .blocked-ad-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .help-status-grid,
  .ptc-ad-header,
  .ptc-ad-meta,
  .ptc-ad-actions {
    grid-template-columns: 1fr;
  }

  .ptc-ad-status-stack {
    justify-items: start;
  }

  .ptc-ad-main,
  .ptc-ad-meta,
  .ptc-ad-brand-block,
  .ptc-ad-actions {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Campaign browser controls and scalable ad sections */
.ad-browser-toolbar {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 24%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--brand-mint) 12%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(8, 13, 24, 0.72);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ad-browser-main-controls {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 0.28fr) auto;
  gap: 9px;
  align-items: end;
}

.ad-search-control,
.ad-sort-control {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ad-search-control span,
.ad-sort-control span {
  color: var(--muted-2);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ad-search-control input,
.ad-sort-control select {
  width: 100%;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 22%, var(--line));
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(2, 6, 23, 0.56);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  outline: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.ad-search-control input {
  padding: 0 12px;
}

.ad-sort-control select {
  padding: 0 34px 0 12px;
}

.ad-search-control input:focus,
.ad-sort-control select:focus {
  border-color: color-mix(in srgb, var(--brand-mint) 52%, var(--brand-sky));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand-mint) 12%, transparent),
    0 0 18px color-mix(in srgb, var(--brand-sky) 12%, transparent);
}

.ad-compact-toggle {
  min-height: 38px;
  white-space: nowrap;
}

.ad-filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ad-filter-chip {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 18%, var(--line));
  border-radius: 999px;
  padding: 0 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(15, 23, 42, 0.74);
  color: var(--muted-2);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.ad-filter-chip:hover,
.ad-filter-chip:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand-sky) 44%, var(--brand-mint) 16%);
  color: var(--text);
  box-shadow: 0 0 16px color-mix(in srgb, var(--brand-sky) 10%, transparent);
}

.ad-filter-chip.is-active {
  border-color: color-mix(in srgb, var(--brand-mint) 60%, var(--brand-sky));
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--brand-mint) 24%, transparent), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand-mint) 24%, transparent), rgba(15, 23, 42, 0.8));
  color: var(--text);
  box-shadow: 0 0 18px color-mix(in srgb, var(--brand-mint) 14%, transparent);
}

.ad-browser-meta {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.ad-browser-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 18%, var(--line));
  border-radius: 18px;
  padding: 12px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-sky) 9%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(8, 13, 24, 0.48);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ad-browser-section.is-featured {
  border-color: color-mix(in srgb, var(--brand-mint) 36%, var(--brand-sky) 16%);
}

.ad-browser-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.ad-browser-section-head h3 {
  margin: 2px 0 0;
  font-size: 1.1rem;
}

.ad-browser-section-head p {
  margin: 4px 0 0;
  max-width: 720px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.ad-section-count {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 24%, var(--line));
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--brand-gold) 10%, transparent);
  color: var(--brand-gold);
  font-size: 0.68rem;
  font-weight: 950;
}

.ad-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-width: 0;
}

.ad-section-empty {
  border: 1px dashed color-mix(in srgb, var(--brand-sky) 22%, var(--line));
  border-radius: 14px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.42);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
}

.ad-grid.is-compact-view .ad-section-grid {
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  align-items: start;
}

.campaign-tag-row,
.campaign-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.campaign-tag,
.campaign-signal-row span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 18%, var(--line));
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(15, 23, 42, 0.58);
  color: var(--muted-2);
  font-size: 0.62rem;
  font-weight: 950;
  white-space: nowrap;
}

.campaign-tag.is-premium,
.campaign-tag.is-reward {
  border-color: color-mix(in srgb, var(--brand-gold) 42%, var(--line));
  color: color-mix(in srgb, var(--brand-gold) 84%, white);
  background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
}

.campaign-tag.is-boosted,
.campaign-tag.is-xp {
  border-color: color-mix(in srgb, var(--brand-sky) 46%, var(--line));
  color: color-mix(in srgb, var(--brand-sky) 80%, white);
  background: color-mix(in srgb, var(--brand-sky) 12%, transparent);
}

.campaign-tag.is-fast,
.campaign-tag.is-verified,
.campaign-tag.is-new {
  border-color: color-mix(in srgb, var(--brand-mint) 42%, var(--line));
  color: color-mix(in srgb, var(--brand-mint) 84%, white);
  background: color-mix(in srgb, var(--brand-mint) 11%, transparent);
}

.campaign-tag.is-limited {
  border-color: color-mix(in srgb, var(--amber) 44%, var(--line));
  color: color-mix(in srgb, var(--amber) 82%, white);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}

.campaign-tag.is-recommended,
.campaign-tag.is-category,
.campaign-tag.is-survey {
  border-color: color-mix(in srgb, var(--brand-mint) 42%, var(--line));
  color: color-mix(in srgb, var(--brand-mint) 86%, white);
  background: color-mix(in srgb, var(--brand-mint) 12%, transparent);
}

.campaign-tag.is-survey {
  border-color: color-mix(in srgb, var(--brand-sky) 38%, var(--line));
  color: color-mix(in srgb, var(--brand-sky) 82%, white);
  background: color-mix(in srgb, var(--brand-sky) 10%, transparent);
}

.campaign-tag.is-verified-click-through,
.campaign-tag.is-strict,
.campaign-tag.is-active-attention-boost,
.campaign-tag.is-checkpoint-required {
  position: relative;
  overflow: hidden;
  gap: 5px;
  min-height: 23px;
  padding-inline: 8px;
  isolation: isolate;
}

.campaign-tag.tooltip-badge {
  appearance: none;
  margin: 0;
  font: inherit;
  cursor: help;
  text-align: left;
}

.campaign-tag.tooltip-badge:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-sky) 72%, white);
  outline-offset: 3px;
}

.campaign-tag-label {
  position: relative;
  z-index: 1;
}

.campaign-tag.is-verified-click-through::before,
.campaign-tag.is-strict::before,
.campaign-tag.is-active-attention-boost::before,
.campaign-tag.is-checkpoint-required::before {
  display: inline-grid;
  width: 17px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  font-size: 0.54rem;
  font-weight: 1000;
  line-height: 1;
  content: "VC";
}

.campaign-tag.is-verified-click-through::after,
.campaign-tag.is-strict::after,
.campaign-tag.is-active-attention-boost::after {
  position: absolute;
  inset: -40% auto -40% -45%;
  z-index: -1;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.22), transparent);
  transform: skewX(-18deg);
  animation: premium-badge-shine 5.8s ease-in-out infinite;
  content: "";
}

.campaign-tag.is-verified-click-through {
  border-color: color-mix(in srgb, var(--brand-mint) 62%, var(--brand-sky) 22%);
  background:
    radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--brand-mint) 22%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-mint) 20%, transparent), color-mix(in srgb, var(--brand-sky) 10%, transparent)),
    rgba(2, 6, 23, 0.72);
  color: color-mix(in srgb, var(--brand-mint) 88%, white);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand-mint) 10%, transparent),
    0 0 16px color-mix(in srgb, var(--brand-mint) 12%, transparent);
}

.campaign-tag.is-verified-click-through::before {
  border: 1px solid color-mix(in srgb, var(--brand-mint) 72%, white);
  background: color-mix(in srgb, var(--brand-mint) 18%, rgba(2, 6, 23, 0.85));
  color: color-mix(in srgb, var(--brand-mint) 86%, white);
}

.campaign-tag.is-strict {
  border-color: color-mix(in srgb, var(--brand-gold) 60%, var(--brand-sky) 20%);
  background:
    radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--brand-gold) 22%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-gold) 18%, transparent), color-mix(in srgb, var(--brand-sky) 10%, transparent)),
    rgba(2, 6, 23, 0.74);
  color: color-mix(in srgb, var(--brand-gold) 88%, white);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand-gold) 9%, transparent),
    0 0 16px color-mix(in srgb, var(--brand-gold) 12%, transparent);
}

.campaign-tag.is-strict::before {
  border: 1px solid color-mix(in srgb, var(--brand-gold) 76%, white);
  background: color-mix(in srgb, var(--brand-gold) 16%, rgba(2, 6, 23, 0.85));
  color: color-mix(in srgb, var(--brand-gold) 88%, white);
  content: "SA";
}

.campaign-tag.is-active-attention-boost {
  border-color: color-mix(in srgb, var(--brand-sky) 58%, var(--brand-mint) 24%);
  background:
    radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--brand-sky) 22%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-sky) 18%, transparent), color-mix(in srgb, var(--brand-mint) 12%, transparent)),
    rgba(2, 6, 23, 0.74);
  color: color-mix(in srgb, var(--brand-sky) 86%, white);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand-sky) 10%, transparent),
    0 0 16px color-mix(in srgb, var(--brand-sky) 13%, transparent);
}

.campaign-tag.is-active-attention-boost::before {
  border: 1px solid color-mix(in srgb, var(--brand-sky) 72%, white);
  background: color-mix(in srgb, var(--brand-sky) 16%, rgba(2, 6, 23, 0.85));
  color: color-mix(in srgb, var(--brand-sky) 88%, white);
  content: "AB";
}

.campaign-tag.is-checkpoint-required {
  border-color: color-mix(in srgb, var(--brand-sky) 52%, var(--brand-gold) 16%);
  background:
    radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--brand-sky) 17%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-sky) 15%, transparent), color-mix(in srgb, var(--brand-gold) 8%, transparent)),
    rgba(2, 6, 23, 0.7);
  color: color-mix(in srgb, var(--brand-sky) 78%, white);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand-sky) 8%, transparent),
    0 0 10px color-mix(in srgb, var(--brand-sky) 12%, transparent);
}

.campaign-tag.is-checkpoint-required::before {
  border: 1px solid color-mix(in srgb, var(--brand-sky) 60%, white);
  background: color-mix(in srgb, var(--brand-sky) 13%, rgba(2, 6, 23, 0.86));
  color: color-mix(in srgb, var(--brand-sky) 82%, white);
  content: "EC";
}

.premium-badge-tooltip {
  position: fixed;
  z-index: 9999;
  display: grid;
  gap: 4px;
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  border: 1px solid color-mix(in srgb, var(--brand-mint) 52%, var(--brand-sky) 24%);
  border-radius: 13px;
  padding: 10px 12px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--brand-mint) 16%, transparent), transparent 42%),
    rgba(5, 14, 24, 0.96);
  backdrop-filter: blur(12px);
  color: var(--text);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.45),
    0 0 22px color-mix(in srgb, var(--brand-mint) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px) scale(0.985);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 160ms ease;
  visibility: hidden;
}

.premium-badge-tooltip.is-positioning {
  transition: none;
}

.premium-badge-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.premium-badge-tooltip::before {
  position: absolute;
  width: 10px;
  height: 10px;
  border: inherit;
  border-right: 0;
  border-bottom: 0;
  background: rgba(5, 14, 24, 0.96);
  content: "";
}

.premium-badge-tooltip[data-placement="top"]::before {
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) rotate(225deg);
}

.premium-badge-tooltip[data-placement="bottom"]::before {
  left: 50%;
  top: -6px;
  transform: translateX(-50%) rotate(45deg);
}

.premium-badge-tooltip[data-placement="right"]::before {
  left: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.premium-badge-tooltip[data-placement="left"]::before {
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(135deg);
}

.premium-badge-tooltip-title {
  color: color-mix(in srgb, var(--brand-mint) 84%, white);
  font-size: 0.76rem;
  font-weight: 1000;
  line-height: 1.2;
}

.premium-badge-tooltip-body {
  color: color-mix(in srgb, var(--muted) 82%, white);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.42;
}

.premium-badge-tooltip--strict {
  border-color: color-mix(in srgb, var(--brand-gold) 62%, var(--brand-sky) 22%);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--brand-gold) 16%, transparent), transparent 42%),
    rgba(5, 14, 24, 0.96);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.45),
    0 0 22px color-mix(in srgb, var(--brand-gold) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.premium-badge-tooltip--strict .premium-badge-tooltip-title {
  color: color-mix(in srgb, var(--brand-gold) 86%, white);
}

.premium-badge-tooltip--boost {
  border-color: color-mix(in srgb, var(--brand-sky) 60%, var(--brand-mint) 20%);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--brand-sky) 18%, transparent), transparent 42%),
    rgba(5, 14, 24, 0.96);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.45),
    0 0 20px color-mix(in srgb, var(--brand-sky) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.premium-badge-tooltip--boost .premium-badge-tooltip-title {
  color: color-mix(in srgb, var(--brand-sky) 86%, white);
}

.premium-badge-tooltip--checkpoint {
  border-color: color-mix(in srgb, var(--brand-sky) 56%, var(--brand-gold) 18%);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--brand-sky) 16%, transparent), transparent 42%),
    rgba(5, 14, 24, 0.96);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.45),
    0 0 18px color-mix(in srgb, var(--brand-sky) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.premium-badge-tooltip--checkpoint .premium-badge-tooltip-title {
  color: color-mix(in srgb, var(--brand-sky) 84%, white);
}

.campaign-signal-row span {
  border-color: color-mix(in srgb, var(--brand-mint) 24%, var(--line));
  color: color-mix(in srgb, var(--brand-mint) 70%, white);
}

.ptc-ad-row.is-compact-card {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "brand"
    "main"
    "meta"
    "action";
  gap: 0;
}

.ptc-ad-row.is-compact-card .ptc-ad-brand-block {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.ptc-ad-row.is-compact-card .ptc-ad-brand-copy small,
.ptc-ad-row.is-compact-card .ptc-trust-strip,
.ptc-ad-row.is-compact-card .ptc-scarcity-meter,
.ptc-ad-row.is-compact-card .blocked-ad-note {
  display: none;
}

.ptc-ad-row.is-compact-card .ptc-ad-main {
  padding-top: 10px;
}

.ptc-ad-row.is-compact-card .ptc-ad-main p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ptc-ad-row.is-compact-card .ptc-ad-kicker span:nth-child(n + 4) {
  display: none;
}

.ptc-ad-row.is-compact-card .ptc-ad-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 0;
}

.ptc-ad-row.is-compact-card .ptc-ad-meta div:nth-child(n + 4) {
  display: none;
}

.ptc-ad-row.is-compact-card .ptc-ad-actions {
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}

.ptc-ad-row.is-compact-card .ptc-action-caption {
  grid-column: 1 / -1;
}

body[data-theme="light"] .ad-browser-toolbar,
body[data-theme="light"] .ad-browser-section {
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 197, 94, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.82));
}

@media (max-width: 860px) {
  .ad-browser-main-controls {
    grid-template-columns: 1fr;
  }

  .ad-compact-toggle {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .ad-browser-section-head {
    align-items: start;
    flex-direction: column;
  }

  .ad-grid.is-compact-view .ad-section-grid {
    grid-template-columns: 1fr;
  }

  .ptc-ad-row.is-compact-card .ptc-ad-meta,
  .ptc-ad-row.is-compact-card .ptc-ad-actions {
    grid-template-columns: 1fr;
  }
}

/* ClickOrbis orbital logo */
.brand-mark,
.logo-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 34%, transparent);
  border-radius: 17px;
  overflow: visible;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 55%, transparent), transparent),
    url("/assets/clickorbis-mark.svg") center / cover no-repeat;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0;
  text-indent: 0;
  isolation: isolate;
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--brand-mint) 16%, transparent),
    0 0 24px color-mix(in srgb, var(--brand-sky) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.brand-mark::before,
.brand-mark::after,
.logo-mark::before,
.logo-mark::after {
  display: none;
  content: none;
}

.brand:hover .brand-mark,
.brand:focus-visible .brand-mark,
.brand-home-button:hover .brand-mark,
.brand-home-button:focus-visible .brand-mark,
.viewer-brand-link:hover .brand-mark,
.viewer-brand-link:focus-visible .brand-mark,
.admin-brand-lockup:hover .logo-mark {
  border-color: color-mix(in srgb, var(--brand-gold) 44%, var(--brand-sky));
  box-shadow:
    0 16px 36px color-mix(in srgb, var(--brand-mint) 22%, transparent),
    0 0 34px color-mix(in srgb, var(--brand-sky) 24%, transparent),
    0 0 18px color-mix(in srgb, var(--brand-gold) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px) scale(1.025);
}

.brand strong::after {
  content: "";
}

.brand-home-button .brand-mark,
.admin-brand-lockup .logo-mark {
  width: 48px;
  height: 48px;
  border-radius: 18px;
}

.compact-brand .brand-mark,
.viewer-topbar .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 14px;
}

@media (max-width: 520px) {
  .brand-mark,
  .logo-mark {
    width: 40px;
    height: 40px;
    border-radius: 15px;
  }
}

/* Ambient glassmorphism background layer */
html {
  background: #0b0f12;
}

body {
  position: relative;
  background: transparent;
}

body[data-theme="light"] {
  background: transparent;
}

/* Background container hidden behind layout */
.bg-glow-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% -14%, rgb(103 167 255 / 0.18), transparent 34%),
    radial-gradient(circle at 8% 110%, rgb(53 209 154 / 0.16), transparent 40%),
    radial-gradient(circle at 96% 86%, rgb(246 189 88 / 0.086), transparent 34%),
    conic-gradient(from 218deg at 52% 52%, transparent 0deg, rgb(103 167 255 / 0.052) 54deg, transparent 118deg, rgb(53 209 154 / 0.052) 188deg, rgb(246 189 88 / 0.032) 250deg, transparent 318deg),
    linear-gradient(180deg, #071018 0%, #0b0f12 52%, #070a0f 100%);
  background-position: 50% 0%, 0% 100%, 100% 100%, 50% 50%, 0 0;
  background-size: 135% 135%, 140% 140%, 130% 130%, 175% 175%, auto;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  animation: ambient-field-shift 44s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.bg-glow-container::before,
.bg-glow-container::after {
  position: absolute;
  inset: -58vmax;
  content: "";
  z-index: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.bg-glow-container::before {
  background:
    radial-gradient(ellipse at 18% 24%, rgb(103 167 255 / 0.135), transparent 34%),
    radial-gradient(ellipse at 82% 18%, rgb(53 209 154 / 0.12), transparent 36%),
    conic-gradient(from 142deg at 48% 44%, transparent 0deg, rgb(103 167 255 / 0.06) 48deg, transparent 104deg, rgb(53 209 154 / 0.058) 168deg, transparent 236deg, rgb(246 189 88 / 0.04) 300deg, transparent 360deg),
    linear-gradient(104deg, transparent 7%, rgb(53 209 154 / 0.052) 24%, transparent 43%, rgb(103 167 255 / 0.048) 63%, transparent 82%),
    linear-gradient(154deg, transparent 14%, rgb(255 255 255 / 0.038) 34%, transparent 55%, rgb(246 189 88 / 0.028) 75%, transparent),
    linear-gradient(115deg, transparent 8%, rgb(255 255 255 / 0.058) 31%, transparent 56%, rgb(103 167 255 / 0.052) 79%, transparent);
  background-size: 130% 130%, 125% 125%, 160% 160%, 150% 150%, 155% 155%, 140% 140%;
  filter: blur(64px);
  opacity: 0.28;
  mix-blend-mode: screen;
  animation: ambient-haze-drift-a 52s ease-in-out infinite alternate;
}

.bg-glow-container::after {
  background:
    radial-gradient(ellipse at 65% 35%, rgb(53 209 154 / 0.108), transparent 42%),
    radial-gradient(ellipse at 12% 76%, rgb(103 167 255 / 0.105), transparent 38%),
    linear-gradient(58deg, transparent 12%, rgb(255 255 255 / 0.044) 38%, transparent 66%),
    linear-gradient(118deg, transparent 18%, rgb(53 209 154 / 0.045) 44%, transparent 74%),
    linear-gradient(162deg, transparent 16%, rgb(103 167 255 / 0.04) 50%, transparent 78%);
  background-size: 135% 135%, 135% 135%, 150% 150%, 165% 165%, 150% 150%;
  filter: blur(90px);
  opacity: 0.26;
  mix-blend-mode: screen;
  animation: ambient-haze-drift-b 66s ease-in-out infinite alternate;
}

body[data-theme="light"] .bg-glow-container {
  background:
    radial-gradient(circle at 50% -14%, rgb(37 99 168 / 0.11), transparent 34%),
    radial-gradient(circle at 8% 110%, rgb(31 157 104 / 0.09), transparent 40%),
    radial-gradient(circle at 96% 86%, rgb(183 121 31 / 0.055), transparent 34%),
    linear-gradient(180deg, #f8fbfe 0%, #eef3f8 52%, #e9f0f7 100%);
}

body[data-theme="light"] .bg-glow-container::before,
body[data-theme="light"] .bg-glow-container::after {
  opacity: 0.14;
  mix-blend-mode: multiply;
}

/* Glowing background blobs */
.blob {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  filter: blur(132px);
  opacity: 0.14;
  mix-blend-mode: screen;
  box-shadow:
    0 0 110px rgb(53 209 154 / 0.12),
    0 0 180px rgb(103 167 255 / 0.07);
  animation: ambient-orb-drift 38s infinite alternate ease-in-out;
  will-change: transform;
}

.blob::before,
.blob::after {
  position: absolute;
  content: "";
  border-radius: inherit;
  inset: -18%;
  mix-blend-mode: screen;
  pointer-events: none;
}

.blob::before {
  background:
    repeating-conic-gradient(from 0deg, transparent 0deg 22deg, rgb(255 255 255 / 0.16) 28deg, transparent 40deg),
    conic-gradient(from 0deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.58), rgb(103 167 255 / 0.54), rgb(255 255 255 / 0), rgb(53 209 154 / 0.48), rgb(246 189 88 / 0.18), rgb(255 255 255 / 0));
  opacity: 0.4;
  animation: ethereal-orb-prism 60s linear infinite;
}

.blob::after {
  inset: 16%;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.64), rgb(255 255 255 / 0.16) 34%, transparent 68%);
  opacity: 0.22;
  animation: orb-core-breathe 18s ease-in-out infinite;
}

/* Soft cinematic light sources */
.radiant-light {
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  filter: blur(122px);
  mix-blend-mode: screen;
  opacity: 0.12;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.radiant-light::before,
.radiant-light::after {
  position: absolute;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.radiant-light::before {
  inset: 20%;
  background:
    radial-gradient(ellipse at 50% 50%, rgb(255 255 255 / 0.58), rgb(255 229 150 / 0.22) 42%, transparent 72%);
  opacity: 0.46;
  animation: radiant-core-breathe 16s ease-in-out infinite;
}

.radiant-light::after {
  inset: 28% -26%;
  background:
    linear-gradient(88deg, transparent 6%, rgb(255 255 255 / 0.42) 28%, rgb(103 167 255 / 0.28) 46%, transparent 72%),
    linear-gradient(118deg, transparent 16%, rgb(53 209 154 / 0.22) 42%, transparent 76%);
  opacity: 0.34;
  transform: rotate(-10deg) translate3d(-9%, 0, 0);
  animation: radiant-ribbon-drift 22s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.radiant-light-gold {
  top: -26vmax;
  left: 15vw;
  width: 58vmax;
  height: 38vmax;
  background:
    radial-gradient(ellipse at 50% 50%, rgb(255 229 150 / 0.72), rgb(255 174 68 / 0.28) 42%, transparent 72%);
  animation: warm-light-drift-a 46s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.radiant-light-amber {
  right: -22vmax;
  bottom: 12vh;
  width: 54vmax;
  height: 44vmax;
  background:
    radial-gradient(ellipse at 50% 50%, rgb(255 149 92 / 0.48), rgb(250 204 21 / 0.2) 46%, transparent 74%);
  opacity: 0.11;
  animation: warm-light-drift-b 54s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.radiant-light-rose {
  left: -22vmax;
  bottom: -18vmax;
  width: 60vmax;
  height: 42vmax;
  background:
    radial-gradient(ellipse at 50% 50%, rgb(255 214 170 / 0.42), rgb(244 114 182 / 0.16) 48%, transparent 76%);
  opacity: 0.095;
  animation: warm-light-drift-c 62s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

/* Ethereal galaxy clouds */
.galaxy-cloud {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  filter: blur(68px) saturate(1.24);
  mix-blend-mode: screen;
  opacity: 0.13;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.galaxy-cloud::before,
.galaxy-cloud::after {
  position: absolute;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.galaxy-cloud::before {
  inset: 4%;
  background:
    radial-gradient(ellipse at 50% 50%, rgb(255 255 255 / 0.09), transparent 18%),
    conic-gradient(from 70deg at 50% 50%, transparent 0deg, rgb(255 255 255 / 0.18) 42deg, rgb(103 167 255 / 0.24) 88deg, transparent 132deg, rgb(53 209 154 / 0.2) 208deg, rgb(246 189 88 / 0.14) 264deg, transparent 338deg);
  opacity: 0.5;
  animation: galaxy-cloud-bloom 20s ease-in-out infinite;
}

.galaxy-cloud::after {
  inset: 28%;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.28), rgb(103 167 255 / 0.12) 34%, transparent 68%);
  opacity: 0.24;
  animation: orb-core-breathe 21s ease-in-out infinite reverse;
}

.galaxy-cloud-a {
  top: -38vmax;
  left: -2vw;
  width: 92vmax;
  height: 66vmax;
  background:
    radial-gradient(ellipse at 48% 50%, rgb(255 255 255 / 0.12), transparent 14%),
    conic-gradient(
      from 18deg at 50% 50%,
      transparent 0deg,
      rgb(34 197 94 / 0.17) 44deg,
      rgb(56 189 248 / 0.21) 92deg,
      transparent 142deg,
      rgb(250 204 21 / 0.13) 202deg,
      rgb(244 114 182 / 0.12) 260deg,
      transparent 330deg
    );
  animation: galaxy-rotate-a 118s linear infinite;
}

.galaxy-cloud-b {
  right: -31vmax;
  bottom: -34vmax;
  width: 98vmax;
  height: 70vmax;
  background:
    radial-gradient(ellipse at 50% 48%, rgb(255 255 255 / 0.1), transparent 16%),
    conic-gradient(
      from 210deg at 50% 50%,
      transparent 0deg,
      rgb(14 165 233 / 0.17) 54deg,
      rgb(167 139 250 / 0.19) 106deg,
      transparent 158deg,
      rgb(34 197 94 / 0.12) 224deg,
      rgb(255 214 170 / 0.13) 286deg,
      transparent 350deg
    );
  opacity: 0.12;
  animation: galaxy-rotate-b 146s linear infinite;
}

.blob-green {
  top: -10%;
  left: 10%;
  width: 500px;
  height: 500px;
  background: #35d19a;
}

.blob-blue {
  right: 10%;
  bottom: -10%;
  width: 600px;
  height: 600px;
  background: #67a7ff;
  animation-delay: -5s;
}

body[data-theme="light"] .blob {
  opacity: 0.11;
  mix-blend-mode: multiply;
}

body[data-theme="light"] .radiant-light {
  opacity: 0.08;
  mix-blend-mode: multiply;
}

body[data-theme="light"] .galaxy-cloud {
  opacity: 0.065;
  mix-blend-mode: multiply;
}

/* Subtle grain texture overlay */
body::before {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  content: "";
  opacity: 0.03;
  pointer-events: none;
}

body::after {
  position: fixed;
  inset: -24vh -24vw;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 0%, transparent 34%, rgb(0 0 0 / 0.3) 72%, rgb(0 0 0 / 0.68) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 0.24), transparent 34%, rgb(0 0 0 / 0.34)),
    linear-gradient(102deg, transparent 5%, rgb(53 209 154 / 0.038) 22%, transparent 42%, rgb(103 167 255 / 0.035) 62%, transparent 84%),
    linear-gradient(148deg, transparent 12%, rgb(255 255 255 / 0.022) 34%, transparent 60%, rgb(246 189 88 / 0.022) 78%, transparent),
    radial-gradient(ellipse at 18% 42%, rgb(53 209 154 / 0.042), transparent 32%),
    radial-gradient(ellipse at 78% 58%, rgb(103 167 255 / 0.04), transparent 36%);
  content: "";
  filter: blur(20px);
  mix-blend-mode: normal;
  opacity: 0.92;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: ambient-veil-flow 34s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

/* Organic background drifting animation */
@keyframes ambient-field-shift {
  0% {
    background-position: 50% 0%, 0% 100%, 100% 100%, 50% 50%, 0 0;
    filter: saturate(1.04) brightness(0.88) contrast(1.08);
  }

  42% {
    background-position: 58% 4%, 6% 93%, 92% 90%, 44% 52%, 0 0;
    filter: saturate(1.18) brightness(0.94) contrast(1.12);
  }

  100% {
    background-position: 46% 8%, 12% 88%, 88% 96%, 56% 46%, 0 0;
    filter: saturate(1.1) brightness(0.9) contrast(1.1);
  }
}

@keyframes ambient-orb-drift {
  0% {
    opacity: 0.16;
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    opacity: 0.25;
    transform: translate3d(8vw, 5vh, 0) scale(1.18);
  }

  100% {
    opacity: 0.19;
    transform: translate3d(-5vw, 9vh, 0) scale(0.98);
  }
}

@keyframes ambient-veil-flow {
  0% {
    opacity: 0.82;
    transform: translate3d(-4vw, -1.4vh, 0) scale(1.05) rotate(-1.2deg);
  }

  45% {
    opacity: 0.98;
    transform: translate3d(2.8vw, 1.8vh, 0) scale(1.1) rotate(1.3deg);
  }

  100% {
    opacity: 0.88;
    transform: translate3d(5vw, -2.4vh, 0) scale(1.08) rotate(-0.5deg);
  }
}

@keyframes ethereal-orb-prism {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 0.24;
  }

  50% {
    transform: rotate(180deg) scale(1.08);
    opacity: 0.4;
  }

  100% {
    transform: rotate(360deg) scale(1);
    opacity: 0.26;
  }
}

@keyframes orb-core-breathe {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.16;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.32;
  }
}

@keyframes radiant-core-breathe {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.28;
  }

  50% {
    transform: scale(1.16);
    opacity: 0.56;
  }
}

@keyframes radiant-ribbon-drift {
  0% {
    opacity: 0.24;
    transform: rotate(-13deg) translate3d(-18%, -5%, 0) scaleX(0.92);
  }

  45% {
    opacity: 0.44;
    transform: rotate(-6deg) translate3d(10%, 6%, 0) scaleX(1.14);
  }

  100% {
    opacity: 0.3;
    transform: rotate(-15deg) translate3d(22%, -3%, 0) scaleX(1.02);
  }
}

@keyframes galaxy-cloud-bloom {
  0%,
  100% {
    transform: rotate(-8deg) scale(0.96);
    opacity: 0.28;
  }

  50% {
    transform: rotate(12deg) scale(1.08);
    opacity: 0.5;
  }
}

@keyframes ambient-haze-drift-a {
  0% {
    opacity: 0.24;
    background-position: 0% 0%, 100% 0%, 50% 50%, 0% 50%, 100% 50%, 50% 50%;
    transform: translate3d(-1.8%, -1.2%, 0) scale(1.04) rotate(0deg);
  }

  50% {
    opacity: 0.4;
    background-position: 8% 4%, 92% 10%, 54% 46%, 100% 50%, 0% 50%, 58% 46%;
    transform: translate3d(2.1%, 1.1%, 0) scale(1.1) rotate(0.9deg);
  }

  100% {
    opacity: 0.3;
    background-position: 3% 8%, 96% 4%, 46% 56%, 65% 50%, 35% 50%, 42% 58%;
    transform: translate3d(-0.9%, 1.8%, 0) scale(1.06) rotate(-0.9deg);
  }
}

@keyframes ambient-haze-drift-b {
  0% {
    opacity: 0.22;
    background-position: 100% 0%, 0% 100%, 0% 50%, 100% 50%, 50% 50%;
    transform: translate3d(1.8%, 1.2%, 0) scale(1.06) rotate(1.8deg);
  }

  50% {
    opacity: 0.36;
    background-position: 92% 8%, 8% 92%, 100% 50%, 0% 50%, 58% 44%;
    transform: translate3d(-2%, -0.9%, 0) scale(1.12) rotate(-0.7deg);
  }

  100% {
    opacity: 0.27;
    background-position: 96% 3%, 4% 96%, 62% 50%, 38% 50%, 44% 58%;
    transform: translate3d(1%, -1.7%, 0) scale(1.08) rotate(1.2deg);
  }
}

@keyframes warm-light-drift-a {
  0% {
    opacity: 0.16;
    transform: translate3d(-4vmax, -1vmax, 0) scale(1.02) rotate(-4deg);
  }

  50% {
    opacity: 0.3;
    transform: translate3d(7vmax, 4vmax, 0) scale(1.12) rotate(2deg);
  }

  100% {
    opacity: 0.2;
    transform: translate3d(2vmax, 8vmax, 0) scale(1.06) rotate(5deg);
  }
}

@keyframes warm-light-drift-b {
  0% {
    opacity: 0.13;
    transform: translate3d(3vmax, 5vmax, 0) scale(1.04) rotate(5deg);
  }

  50% {
    opacity: 0.25;
    transform: translate3d(-8vmax, -2vmax, 0) scale(1.14) rotate(-2deg);
  }

  100% {
    opacity: 0.17;
    transform: translate3d(-4vmax, -7vmax, 0) scale(1.08) rotate(-5deg);
  }
}

@keyframes warm-light-drift-c {
  0% {
    opacity: 0.12;
    transform: translate3d(-2vmax, 3vmax, 0) scale(1.02) rotate(-2deg);
  }

  50% {
    opacity: 0.22;
    transform: translate3d(9vmax, -3vmax, 0) scale(1.11) rotate(3deg);
  }

  100% {
    opacity: 0.15;
    transform: translate3d(5vmax, -8vmax, 0) scale(1.06) rotate(1deg);
  }
}

@keyframes galaxy-rotate-a {
  0% {
    opacity: 0.17;
    transform: translate3d(-2vmax, -1vmax, 0) scale(1.05) rotate(0deg);
  }

  50% {
    opacity: 0.33;
    transform: translate3d(2vmax, 2vmax, 0) scale(1.11) rotate(180deg);
  }

  100% {
    opacity: 0.2;
    transform: translate3d(-2vmax, -1vmax, 0) scale(1.05) rotate(360deg);
  }
}

@keyframes galaxy-rotate-b {
  0% {
    opacity: 0.16;
    transform: translate3d(2vmax, 1vmax, 0) scale(1.06) rotate(360deg);
  }

  50% {
    opacity: 0.3;
    transform: translate3d(-2vmax, -1vmax, 0) scale(1.12) rotate(180deg);
  }

  100% {
    opacity: 0.19;
    transform: translate3d(2vmax, 1vmax, 0) scale(1.06) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .bg-glow-container,
  .blob,
  .blob::before,
  .blob::after,
  .radiant-light,
  .radiant-light::before,
  .radiant-light::after,
  .galaxy-cloud,
  .galaxy-cloud::before,
  .galaxy-cloud::after,
  .bg-glow-container::before,
  .bg-glow-container::after {
    animation: none !important;
  }
}

/* Cinematic app background system: injected once by cinematic-bg.js and reused by every page. */
body.has-cinematic-bg .bg-glow-container,
body.has-cinematic-bg::after {
  display: none;
}

.cinematic-bg {
  --mouse-x: 50%;
  --mouse-y: 48%;
  --parallax-x: 0px;
  --parallax-y: 0px;
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #03070d;
  color: #67e8f9;
  pointer-events: none;
  opacity: 0;
  isolation: isolate;
  contain: layout paint style;
  animation: cinematic-bg-boot 980ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Deep cinematic base: dark navy/black center with controlled edge contrast. */
.cinematic-base {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 42%, rgb(5 14 23 / 0.24), transparent 28%),
    radial-gradient(circle at 15% 22%, rgb(34 197 94 / 0.1), transparent 30%),
    radial-gradient(circle at 86% 20%, rgb(56 189 248 / 0.09), transparent 32%),
    radial-gradient(circle at 52% 112%, rgb(20 184 166 / 0.12), transparent 38%),
    linear-gradient(180deg, #02050a 0%, #061019 46%, #02050a 100%);
}

.cinematic-base::before,
.cinematic-base::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.cinematic-base::before {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.52), transparent 22%, transparent 78%, rgb(0 0 0 / 0.54)),
    linear-gradient(180deg, rgb(0 0 0 / 0.44), transparent 28%, transparent 68%, rgb(0 0 0 / 0.58));
}

.cinematic-base::after {
  background:
    radial-gradient(ellipse at 50% 42%, transparent 0 30%, rgb(0 0 0 / 0.38) 72%, rgb(0 0 0 / 0.78) 100%);
}

/* Animated aurora / nebula layer: a few large, slow transform-only light bodies. */
.cinematic-orbs {
  position: absolute;
  inset: -18vh -16vw;
  z-index: 1;
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0);
  transition: transform 420ms ease-out;
}

.cinematic-orb,
.cinematic-orbs::before,
.cinematic-orbs::after {
  position: absolute;
  border-radius: 44% 56% 48% 52% / 52% 42% 58% 48%;
  filter: blur(88px);
  mix-blend-mode: screen;
  content: "";
  will-change: transform, opacity;
}

.cinematic-orb-a {
  top: -10%;
  left: 8%;
  width: 42vmax;
  height: 28vmax;
  background:
    radial-gradient(ellipse at 50% 50%, rgb(34 197 94 / 0.38), rgb(20 184 166 / 0.13) 48%, transparent 72%);
  opacity: 0.28;
  animation: cinematic-orb-a 28s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.cinematic-orb-b {
  right: -12%;
  top: 16%;
  width: 46vmax;
  height: 32vmax;
  background:
    radial-gradient(ellipse at 50% 50%, rgb(56 189 248 / 0.34), rgb(99 102 241 / 0.12) 48%, transparent 74%);
  opacity: 0.23;
  animation: cinematic-orb-b 34s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.cinematic-orb-c {
  left: 20%;
  bottom: -22%;
  width: 52vmax;
  height: 30vmax;
  background:
    radial-gradient(ellipse at 50% 50%, rgb(16 185 129 / 0.28), rgb(103 232 249 / 0.11) 44%, transparent 74%);
  opacity: 0.24;
  animation: cinematic-orb-c 31s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.cinematic-orbs::before {
  inset: -4% 4% auto -8%;
  height: 64vh;
  background:
    linear-gradient(106deg, transparent 5%, rgb(34 197 94 / 0.105) 31%, rgb(103 232 249 / 0.075) 48%, transparent 72%),
    radial-gradient(ellipse at 24% 42%, rgb(20 184 166 / 0.105), transparent 48%),
    radial-gradient(ellipse at 74% 58%, rgb(59 130 246 / 0.065), transparent 52%);
  opacity: 0.28;
  animation: cinematic-nebula-sway 38s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.cinematic-orbs::after {
  right: 4%;
  bottom: 4%;
  width: 58vmax;
  height: 42vmax;
  background:
    linear-gradient(105deg, transparent 10%, rgb(255 255 255 / 0.05) 34%, transparent 58%, rgb(34 197 94 / 0.05) 78%, transparent);
  opacity: 0.28;
  animation: cinematic-aurora-current 24s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

/* Living flow layer: soft aurora currents replacing the old circular scanner. */
.cinematic-flow {
  position: absolute;
  z-index: 3;
  inset: -18vh -18vw;
  opacity: 0.38;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--parallax-x) * -0.42), calc(var(--parallax-y) * -0.34), 0);
  transition: transform 420ms ease-out;
}

.cinematic-flow::before,
.cinematic-flow::after {
  position: absolute;
  content: "";
  pointer-events: none;
  will-change: transform, opacity;
}

.cinematic-flow::before {
  top: 6%;
  right: -8%;
  left: -10%;
  height: 58vh;
  background:
    linear-gradient(102deg, transparent 10%, rgb(34 197 94 / 0.12) 34%, rgb(103 232 249 / 0.09) 48%, transparent 72%),
    linear-gradient(154deg, transparent 12%, rgb(255 255 255 / 0.045) 38%, transparent 66%);
  filter: blur(38px);
  opacity: 0.62;
  transform: rotate(-4deg) translate3d(-8%, -2%, 0);
  animation: cinematic-flow-drift 19s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.cinematic-flow::after {
  right: -4%;
  bottom: 2%;
  left: -18%;
  height: 46vh;
  background:
    linear-gradient(72deg, transparent 8%, rgb(56 189 248 / 0.095) 30%, transparent 55%, rgb(16 185 129 / 0.085) 76%, transparent),
    radial-gradient(ellipse at 72% 40%, rgb(168 85 247 / 0.055), transparent 46%);
  filter: blur(44px);
  opacity: 0.5;
  transform: rotate(5deg) translate3d(10%, 3%, 0);
  animation: cinematic-flow-drift-alt 27s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

/* Lightweight canvas particle field; dots and faint links are rendered by cinematic-bg.js. */
.cinematic-particles {
  position: absolute;
  inset: -3vh 0;
  z-index: 4;
  width: 100%;
  height: 106%;
  opacity: 0.74;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 6%, black 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 6%, black 90%, transparent 100%);
  transition: opacity 180ms ease;
  will-change: opacity;
}

body.has-cinematic-bg.cinematic-scrolling .cinematic-particles {
  opacity: 0.58;
}

body.has-cinematic-bg.cinematic-scrolling .cinematic-streaks {
  opacity: 0.42;
}

body.is-auth-home .cinematic-particles {
  opacity: 0.48;
}

body.is-auth-home .cinematic-streaks {
  opacity: 0.32;
}

body.cinematic-static-mode .cinematic-particles {
  opacity: 0.34;
}

body.cinematic-static-mode .cinematic-streaks {
  opacity: 0.2;
}

body.cinematic-static-mode .cinematic-orb,
body.cinematic-static-mode .cinematic-orbs::before,
body.cinematic-static-mode .cinematic-orbs::after,
body.cinematic-static-mode .cinematic-flow::before,
body.cinematic-static-mode .cinematic-flow::after,
body.cinematic-static-mode .cinematic-streaks::before,
body.cinematic-static-mode .cinematic-streaks::after,
body.cinematic-static-mode .auth-screen::before,
body.cinematic-static-mode .auth-screen:not(.is-hidden)::after,
body.cinematic-static-mode .landing-live-stats article::before,
body.cinematic-static-mode .landing-nav .landing-nav-cta::before,
body.cinematic-static-mode .primary-button:not(:disabled)::after,
body.cinematic-static-mode #xpProgressBar::before,
body.cinematic-static-mode #xpProgressBar::after {
  animation-play-state: paused;
}

body.is-auth-home .cinematic-orb,
body.is-auth-home .cinematic-orbs::before,
body.is-auth-home .cinematic-orbs::after,
body.is-auth-home .cinematic-flow::before,
body.is-auth-home .cinematic-flow::after,
body.is-auth-home .cinematic-streaks::before,
body.is-auth-home .cinematic-streaks::after,
body.is-auth-home .auth-screen::before,
body.is-auth-home .landing-live-stats article::before,
body.is-auth-home .landing-nav .landing-nav-cta::before,
body.is-auth-home .primary-button:not(:disabled)::after {
  animation-play-state: paused;
}

body.has-cinematic-bg.cinematic-scrolling .cinematic-orb,
body.has-cinematic-bg.cinematic-scrolling .cinematic-orbs::before,
body.has-cinematic-bg.cinematic-scrolling .cinematic-orbs::after,
body.has-cinematic-bg.cinematic-scrolling .cinematic-flow::before,
body.has-cinematic-bg.cinematic-scrolling .cinematic-flow::after,
body.has-cinematic-bg.cinematic-scrolling .cinematic-streaks::before,
body.has-cinematic-bg.cinematic-scrolling .cinematic-streaks::after,
body.has-cinematic-bg.cinematic-scrolling .auth-screen::before,
body.has-cinematic-bg.cinematic-scrolling .auth-screen:not(.is-hidden)::after,
body.has-cinematic-bg.cinematic-scrolling .landing-live-stats article::before,
body.has-cinematic-bg.cinematic-scrolling .landing-nav .landing-nav-cta::before,
body.has-cinematic-bg.cinematic-scrolling .primary-button:not(:disabled)::after,
body.has-cinematic-bg.cinematic-scrolling #xpProgressBar::before,
body.has-cinematic-bg.cinematic-scrolling #xpProgressBar::after {
  animation-play-state: paused;
}

/* Rare cinematic light streaks that pass occasionally instead of constantly. */
.cinematic-streaks {
  position: absolute;
  inset: -20%;
  z-index: 5;
  overflow: hidden;
  opacity: 0.7;
}

.cinematic-streaks::before,
.cinematic-streaks::after {
  position: absolute;
  width: 42vw;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgb(255 255 255 / 0.42), rgb(103 232 249 / 0.25), transparent);
  content: "";
  opacity: 0;
  transform: rotate(-24deg) translate3d(-40vw, 0, 0);
  filter: drop-shadow(0 0 12px rgb(103 232 249 / 0.18));
}

.cinematic-streaks::before {
  top: 24%;
  left: 6%;
  animation: cinematic-streak-pass 13s ease-in-out 2s infinite;
}

.cinematic-streaks::after {
  top: 58%;
  left: 44%;
  width: 34vw;
  animation: cinematic-streak-pass 17s ease-in-out 8s infinite;
}

/* Mouse-reactive spotlight; JavaScript updates --mouse-x and --mouse-y. */
.cinematic-spotlight {
  position: absolute;
  inset: 0;
  z-index: 6;
  background:
    radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgb(103 232 249 / 0.105), transparent min(36vw, 430px));
  opacity: 0.5;
  mix-blend-mode: screen;
  transition: background-position 300ms ease-out;
}

/* Final readability layer: deep edge vignette and a darker center under content. */
.cinematic-vignette {
  position: absolute;
  inset: 0;
  z-index: 7;
  background:
    radial-gradient(ellipse at 50% 42%, rgb(0 0 0 / 0.12) 0 28%, rgb(0 0 0 / 0.42) 72%, rgb(0 0 0 / 0.86) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 0.26), transparent 24%, transparent 62%, rgb(0 0 0 / 0.42));
}

body[data-theme="light"] .cinematic-bg {
  opacity: 0.72;
}

body[data-theme="light"] .cinematic-vignette {
  background:
    radial-gradient(ellipse at 50% 42%, rgb(255 255 255 / 0.18) 0 28%, rgb(255 255 255 / 0.42) 72%, rgb(255 255 255 / 0.78) 100%),
    linear-gradient(180deg, rgb(255 255 255 / 0.22), transparent 28%, rgb(255 255 255 / 0.36));
}

body.cinematic-booting :where(
  .topbar,
  .landing-hero,
  .viewer-panel,
  .auth-panel,
  .signup-card,
  .legal-hero,
  .admin-card,
  .admin-panel,
  .app-shell .view-section.is-visible .panel,
  .app-shell .view-section.is-visible .metric-card,
  .app-shell .view-section.is-visible .next-action-card,
  .sidebar,
  .member-status-bar
) {
  animation: cinematic-content-settle 980ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

body.cinematic-booting .auth-screen:not(.is-hidden) #loginPanel {
  animation: homepage-card-lift 920ms cubic-bezier(0.22, 1, 0.36, 1) 340ms both !important;
}

body.cinematic-static-mode.cinematic-booting :where(
  .topbar,
  .landing-hero,
  .viewer-panel,
  .auth-panel,
  .signup-card,
  .legal-hero,
  .admin-card,
  .admin-panel,
  .app-shell .view-section.is-visible .panel,
  .app-shell .view-section.is-visible .metric-card,
  .app-shell .view-section.is-visible .next-action-card,
  .sidebar,
  .member-status-bar
),
body.cinematic-static-mode.cinematic-booting .auth-screen:not(.is-hidden) #loginPanel,
body.cinematic-static-mode .auth-screen:not(.is-hidden) :where(
  .landing-topnav,
  .landing-home-copy > .eyebrow,
  .landing-home-copy > h1 .hero-line,
  .auth-lede,
  .development-notice,
  .landing-live-stats,
  .audience-card,
  .marketplace-preview,
  .landing-workflow,
  .trust-command-console,
  .referral-growth-section,
  .platform-proof,
  .auth-panel,
  .auth-path div,
  .preview-dashboard-grid article,
  .growth-card-grid article,
  .trust-signal-grid article,
  .compact-benefits li
) {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body.cinematic-reduced-motion .cinematic-bg,
body.cinematic-reduced-motion .cinematic-bg *,
body.cinematic-reduced-motion .cinematic-bg::before,
body.cinematic-reduced-motion .cinematic-bg::after {
  animation: none !important;
  transition: none !important;
}

body.cinematic-reduced-motion .cinematic-streaks,
body.cinematic-reduced-motion .cinematic-spotlight {
  display: none;
}

@keyframes cinematic-bg-boot {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes cinematic-content-settle {
  from {
    opacity: 0.82;
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes cinematic-orb-a {
  0% {
    transform: translate3d(-4vw, -2vh, 0) scale(1);
    opacity: 0.22;
  }

  50% {
    transform: translate3d(8vw, 5vh, 0) scale(1.15);
    opacity: 0.34;
  }

  100% {
    transform: translate3d(2vw, 10vh, 0) scale(1.04);
    opacity: 0.25;
  }
}

@keyframes cinematic-orb-b {
  0% {
    transform: translate3d(4vw, -3vh, 0) scale(1.04);
    opacity: 0.18;
  }

  50% {
    transform: translate3d(-8vw, 5vh, 0) scale(1.14);
    opacity: 0.3;
  }

  100% {
    transform: translate3d(-2vw, 11vh, 0) scale(0.98);
    opacity: 0.21;
  }
}

@keyframes cinematic-orb-c {
  0% {
    transform: translate3d(-3vw, 5vh, 0) scale(1);
    opacity: 0.18;
  }

  50% {
    transform: translate3d(7vw, -5vh, 0) scale(1.12);
    opacity: 0.29;
  }

  100% {
    transform: translate3d(11vw, -1vh, 0) scale(1.02);
    opacity: 0.2;
  }
}

@keyframes cinematic-aurora-current {
  0% {
    transform: translate3d(-10%, -2%, 0) rotate(-5deg) scaleX(0.94);
    opacity: 0.18;
  }

  50% {
    transform: translate3d(8%, 4%, 0) rotate(2deg) scaleX(1.1);
    opacity: 0.34;
  }

  100% {
    transform: translate3d(16%, -3%, 0) rotate(-3deg) scaleX(1);
    opacity: 0.22;
  }
}

@keyframes cinematic-nebula-sway {
  0% {
    transform: translate3d(-8%, -3%, 0) rotate(-5deg) scaleX(0.96);
    opacity: 0.2;
  }

  52% {
    transform: translate3d(5%, 4%, 0) rotate(2deg) scaleX(1.08);
    opacity: 0.34;
  }

  100% {
    transform: translate3d(13%, -2%, 0) rotate(-3deg) scaleX(1);
    opacity: 0.24;
  }
}

@keyframes cinematic-streak-pass {
  0%,
  58%,
  100% {
    opacity: 0;
    transform: rotate(-24deg) translate3d(-44vw, 0, 0);
  }

  68% {
    opacity: 0.5;
  }

  84% {
    opacity: 0;
    transform: rotate(-24deg) translate3d(120vw, 0, 0);
  }
}

@keyframes cinematic-flow-drift {
  0% {
    opacity: 0.4;
    transform: rotate(-5deg) translate3d(-12%, -4%, 0) scaleX(0.94);
  }

  48% {
    opacity: 0.68;
    transform: rotate(-2deg) translate3d(6%, 3%, 0) scaleX(1.08);
  }

  100% {
    opacity: 0.48;
    transform: rotate(-6deg) translate3d(18%, -1%, 0) scaleX(1);
  }
}

@keyframes cinematic-flow-drift-alt {
  0% {
    opacity: 0.32;
    transform: rotate(6deg) translate3d(12%, 5%, 0) scaleX(1);
  }

  52% {
    opacity: 0.56;
    transform: rotate(2deg) translate3d(-6%, -4%, 0) scaleX(1.1);
  }

  100% {
    opacity: 0.38;
    transform: rotate(7deg) translate3d(-18%, 2%, 0) scaleX(0.96);
  }
}

@media (max-width: 760px) {
  .cinematic-flow {
    opacity: 0.22;
  }

  .cinematic-particles {
    opacity: 0.38;
  }

  .cinematic-streaks {
    opacity: 0.42;
  }
}

/* Admin-first app shell: keep owner controls visible and prevent action buttons from clipping. */
:root {
  --member-shell-offset: 104px;
}

.sidebar {
  top: var(--member-shell-offset);
  height: calc(100vh - var(--member-shell-offset));
  max-height: calc(100vh - var(--member-shell-offset));
  min-height: 0;
  padding-bottom: 14px;
}

body.is-admin-user .sidebar {
  gap: 12px;
  padding: 14px;
}

body.is-admin-user .brand-home-button {
  min-height: 62px;
}

body.is-admin-user .nav-list {
  gap: 5px;
}

body.is-admin-user .sidebar-section-label {
  margin: 9px 8px 2px;
}

body.is-admin-user .sidebar .nav-item {
  min-height: 42px;
  border-radius: 13px;
  padding: 7px 9px;
}

body.is-admin-user .sidebar .nav-item > span:first-child:not(.sidebar-link-badge) {
  width: 27px;
  height: 27px;
  border-radius: 9px;
  font-size: 0.7rem;
}

body.is-admin-user .sidebar-panel {
  margin-top: 6px;
  padding: 12px;
  border-radius: 18px;
}

body.is-admin-user .sidebar-panel p {
  margin-top: 7px;
  font-size: 0.8rem;
  line-height: 1.35;
}

.admin-row {
  align-items: flex-start;
  overflow: visible;
}

.admin-row > div:first-child {
  flex: 1 1 360px;
  min-width: 0;
}

.admin-row > div:first-child span,
.admin-row > div:first-child small {
  overflow-wrap: anywhere;
}

.admin-row .row-actions {
  flex: 1 1 190px;
  max-width: 270px;
  min-width: min(100%, 170px);
  justify-content: flex-start;
}

.admin-row .row-actions button {
  flex: 1 1 92px;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  line-height: 1.1;
  white-space: normal;
}

.admin-row .country-actions {
  max-width: none;
}

.admin-row .country-actions input {
  flex: 1 1 82px;
  min-width: 78px;
}

.profile-admin-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-admin-actions .primary-button,
.profile-admin-actions .text-button {
  width: 100%;
}

.admin-profile-panel {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 42%),
    var(--surface-2);
}

.admin-action-queue-panel,
.admin-financial-command,
.admin-tab-panel {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--accent) 5%, transparent)),
    color-mix(in srgb, var(--surface) 88%, transparent);
}

.admin-action-queue-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-queue-card {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 118px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 16px;
  padding: 13px;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 45%),
    color-mix(in srgb, var(--surface-2) 86%, transparent);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.admin-queue-card::after {
  content: "";
  position: absolute;
  inset: auto 12px 10px 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent), transparent);
  opacity: 0.58;
}

.admin-queue-card:hover,
.admin-queue-card:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  transform: translateY(-2px);
}

.admin-queue-card.is-warning {
  border-color: color-mix(in srgb, var(--amber) 38%, var(--line));
}

.admin-queue-card.is-danger {
  border-color: color-mix(in srgb, var(--red) 34%, var(--line));
}

.admin-queue-card span,
.admin-queue-card small {
  color: var(--muted);
  font-weight: 900;
  line-height: 1.35;
}

.admin-queue-card strong {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 0.98;
}

.admin-financial-command .admin-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-financial-command .metric-card {
  min-height: 112px;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}

.admin-link-card {
  width: 100%;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.metric-card.admin-link-card,
button.admin-daily-summary-card.admin-link-card {
  appearance: none;
}

.admin-link-card:hover,
.admin-link-card:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent),
    0 18px 42px rgba(0, 0, 0, 0.25),
    0 0 28px color-mix(in srgb, var(--primary) 12%, transparent);
  transform: translateY(-2px);
  outline: none;
}

.admin-quick-filters,
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-tabs {
  position: sticky;
  top: calc(var(--member-shell-offset) - 1px);
  z-index: 7;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 18px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: var(--soft-shadow);
}

.admin-tab,
.admin-filter-chip {
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 999px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 950;
}

.admin-tab.is-active,
.admin-filter-chip.is-active {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, var(--surface-2)), color-mix(in srgb, var(--accent) 12%, var(--surface)));
  color: var(--ink);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 18%, transparent);
}

.admin-tab-panel.is-hidden {
  display: none;
}

.admin-bulk-toolbar {
  position: sticky;
  top: calc(var(--member-shell-offset) + 58px);
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 0.8fr) auto minmax(180px, 0.8fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 16px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: var(--soft-shadow);
}

.admin-bulk-toolbar strong {
  display: block;
  font-size: 0.92rem;
}

.admin-bulk-toolbar select,
.admin-audit-search input {
  min-height: 38px;
}

.admin-command-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 12px;
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 90%, transparent), color-mix(in srgb, var(--accent) 5%, transparent)),
    var(--surface-2);
}

.admin-clickable-row {
  cursor: pointer;
}

.admin-clickable-row:hover {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  transform: translateY(-1px);
}

.admin-select-cell {
  display: grid;
  place-items: start center;
  min-width: 28px;
  padding-top: 2px;
}

.admin-row-select {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.admin-row-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-row-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 2px 0;
}

.admin-row-metrics span {
  display: grid;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 10px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  font-size: 0.78rem;
}

.admin-row-metrics strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.admin-command-actions {
  align-content: start;
}

.admin-row-actions-compact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: none;
  width: 100%;
}

.admin-command-row .admin-row-actions-compact {
  grid-column: 2;
  max-width: none;
  min-width: 0;
}

.admin-row-actions-compact > * {
  min-width: 0;
  width: 100%;
}

.admin-row-actions-compact .primary-button,
.admin-row-actions-compact .small-button,
.admin-row-actions-compact button,
.admin-row-actions-compact .text-button {
  min-height: 34px;
  padding: 7px 8px;
  font-size: 0.72rem;
  line-height: 1.05;
}

.admin-command-row .admin-row-metrics span {
  padding: 6px;
  font-size: 0.7rem;
  line-height: 1.15;
}

.admin-command-row .admin-row-metrics strong {
  font-size: 0.78rem;
}

.admin-command-actions .text-button {
  flex: 1 1 120px;
  min-height: 36px;
  justify-content: center;
  padding: 8px 10px;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
}

.admin-assisted-orders-panel {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

.assisted-order-form {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 20px;
  padding: 16px;
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.assisted-order-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.assisted-order-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.assisted-order-form .span-2 {
  grid-column: 1 / -1;
}

.assisted-order-form textarea {
  min-height: 86px;
  resize: vertical;
}

.assisted-order-safety-note,
.assisted-order-review-note {
  border: 1px solid color-mix(in srgb, var(--amber) 24%, var(--line));
  border-radius: 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--amber) 9%, transparent);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.45;
}

.assisted-order-card {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}

.assisted-order-stage-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary), var(--accent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
}

.assisted-order-title-row,
.assisted-order-badges,
.assisted-order-review-note {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.assisted-order-title-row {
  flex-wrap: wrap;
}

.assisted-order-badges {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.assisted-order-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.assisted-order-actions {
  grid-template-columns: minmax(150px, 1.2fr) repeat(3, minmax(110px, 1fr));
}

.assisted-order-actions select {
  min-height: 36px;
}

.status-low {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  color: var(--primary);
}

.status-medium {
  background: color-mix(in srgb, var(--amber) 18%, var(--surface));
  color: var(--amber);
}

.status-high {
  background: color-mix(in srgb, var(--red) 18%, var(--surface));
  color: var(--red);
}

.admin-drawer {
  position: fixed;
  inset: 36px 0 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
  width: auto;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
}

.admin-drawer.is-hidden {
  display: none;
}

.admin-drawer-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(620px, 100vw);
  height: calc(100dvh - 36px);
  border-left: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 96%, #05070b);
  box-shadow: -30px 0 70px rgba(0, 0, 0, 0.46);
}

.admin-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 18px;
}

.admin-drawer-header h2 {
  margin: 4px 0 0;
  line-height: 1.05;
}

.admin-drawer-body {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  overflow-y: auto;
}

.admin-drawer-section,
.admin-drawer-actions,
.admin-history-table article,
.admin-mini-table article {
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 14px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}

.admin-drawer-section h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-detail-grid div {
  display: grid;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: 10px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
}

.admin-detail-grid span,
.admin-history-table span,
.admin-history-table small,
.admin-mini-table small,
.admin-mini-table span,
.admin-drawer-section p {
  color: var(--muted);
  line-height: 1.4;
}

.admin-drawer-url {
  overflow-wrap: anywhere;
}

.admin-risk-strip {
  border-radius: 12px;
  padding: 10px;
  font-weight: 900;
}

.admin-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-drawer-actions button,
.admin-drawer-actions .text-button {
  flex: 1 1 120px;
  min-height: 36px;
  justify-content: center;
}

.admin-delivery-readiness-card {
  border-color: rgba(74, 180, 255, 0.28);
}

.admin-delivery-readiness-card.is-ready {
  border-color: rgba(35, 216, 127, 0.4);
}

.admin-delivery-readiness-card.is-danger {
  border-color: rgba(255, 91, 122, 0.45);
}

.admin-campaign-row-facts {
  display: grid;
  gap: 6px;
  min-width: 210px;
}

.admin-campaign-row-facts span {
  display: grid;
  gap: 2px;
}

.admin-campaign-row-facts small {
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.66rem;
}

.admin-campaign-row-facts strong {
  overflow-wrap: anywhere;
}

.admin-campaign-row-facts .is-missing strong {
  color: var(--amber);
}

.admin-campaign-scan-controls {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.admin-campaign-scan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 7px;
}

.admin-campaign-scan-grid span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-campaign-scan-grid small {
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-campaign-scan-grid strong {
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.admin-campaign-scan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.admin-campaign-scan-running {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.admin-check-workflow-panel {
  display: grid;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: var(--radius);
  padding: 14px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.058), rgb(255 255 255 / 0.016)),
    color-mix(in srgb, var(--surface) 88%, transparent);
}

.admin-check-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.admin-check-summary-card,
.admin-check-workflow-row {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
}

.admin-check-summary-card {
  display: grid;
  gap: 6px;
  align-content: start;
}

.admin-check-summary-card span,
.admin-check-workflow-field span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-check-summary-card strong {
  font-size: 1.25rem;
  line-height: 1.05;
}

.admin-check-summary-card small {
  color: var(--muted);
  line-height: 1.35;
}

.admin-check-workflow-list {
  display: grid;
  gap: 12px;
}

.admin-check-workflow-row {
  display: grid;
  gap: 0;
  align-items: stretch;
}

.admin-check-workflow-row.is-ready {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
}

.admin-check-workflow-row.is-danger {
  border-color: color-mix(in srgb, var(--red) 48%, var(--line));
}

.admin-check-workflow-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
}

.admin-check-workflow-section:first-child {
  padding-top: 0;
}

.admin-check-workflow-section.is-identity,
.admin-check-workflow-section.is-contact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-check-workflow-section.is-payment {
  grid-template-columns: minmax(120px, 0.75fr) minmax(150px, 0.9fr) minmax(110px, 0.65fr) minmax(190px, 1.25fr);
}

.admin-check-workflow-field {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.admin-check-workflow-field strong {
  color: var(--text);
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: normal;
}

.admin-check-workflow-field.is-emphasis strong {
  color: var(--primary);
  font-size: 1.08rem;
}

.admin-check-workflow-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
  padding-top: 12px;
}

.admin-check-workflow-actions > * {
  min-height: 34px;
}

.admin-check-workflow-actions .admin-row-actions {
  min-width: 0;
}

.admin-invoice-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(1, 8, 18, 0.72);
  backdrop-filter: blur(10px);
}

.admin-invoice-preview-panel {
  width: min(720px, 100%);
  max-height: min(88vh, 820px);
  overflow: auto;
  border: 1px solid rgba(125, 154, 190, 0.32);
  border-radius: 14px;
  padding: 16px;
  background: #111a2b;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
}

.admin-invoice-preview-panel .admin-detail-list {
  margin: 12px 0;
}

@media (max-width: 430px) {
  .admin-invoice-preview-modal {
    align-items: start;
    padding: 10px;
  }

  .admin-invoice-preview-panel {
    max-height: calc(100vh - 20px);
    padding: 12px;
  }
}

.sticky-admin-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-shadow: 0 -18px 34px rgba(0, 0, 0, 0.24);
}

.admin-history-table,
.admin-mini-table {
  display: grid;
  gap: 8px;
}

.admin-history-table article,
.admin-mini-table article {
  display: grid;
  gap: 3px;
}

.admin-mini-table small,
.admin-table td small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.admin-audit-search {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.admin-audit-row small {
  max-width: 100%;
}

.admin-notification-badge {
  min-width: 22px;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  color: var(--ink);
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 24%, transparent);
}

.admin-notification-badge.is-empty {
  display: none;
}

.admin-notification-badge.is-critical {
  border-color: color-mix(in srgb, var(--red) 62%, var(--line));
  background: color-mix(in srgb, var(--red) 18%, var(--surface));
  color: var(--red);
  box-shadow: 0 0 22px color-mix(in srgb, var(--red) 28%, transparent);
}

.admin-nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  padding: 0 6px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1;
}

.admin-daily-summary-panel,
.admin-inbox-toolbar,
.admin-alerts-panel {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--primary) 6%, transparent)),
    color-mix(in srgb, var(--surface) 88%, transparent);
}

.admin-daily-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.admin-daily-summary-card {
  display: grid;
  gap: 5px;
  min-height: 94px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 14px;
  padding: 12px;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface-2) 82%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent);
}

.admin-daily-summary-card.is-warning {
  border-color: color-mix(in srgb, var(--amber) 36%, var(--line));
}

.admin-daily-summary-card.is-danger {
  border-color: color-mix(in srgb, var(--red) 36%, var(--line));
}

.admin-daily-summary-card span,
.admin-daily-summary-card small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.3;
}

.admin-daily-summary-card strong {
  font-size: clamp(1.05rem, 1.8vw, 1.55rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.admin-reconciliation-panel {
  grid-column: 1 / -1;
}

.admin-reconciliation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.admin-report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-report-card {
  display: grid;
  gap: 5px;
  min-height: 118px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 14px;
  padding: 12px;
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface-2) 82%, transparent);
  color: var(--ink);
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent),
    0 14px 32px rgba(0, 0, 0, 0.18);
}

.admin-report-card:hover,
.admin-report-card:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  transform: translateY(-2px);
  outline: none;
}

.admin-report-card span,
.admin-report-card small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.3;
}

.admin-report-card strong {
  font-size: 1.2rem;
  line-height: 1;
}

.admin-report-card b {
  align-self: end;
  color: var(--primary);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

.admin-reconciliation-stack {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.admin-reconciliation-grid {
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.15fr);
}

.admin-reconciliation-grid > article:first-child {
  grid-row: span 2;
}

.admin-mini-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.admin-mini-heading strong {
  font-size: 0.96rem;
}

.admin-ledger-check-list {
  display: grid;
  gap: 9px;
}

.admin-ledger-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 14px;
  padding: 11px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 86%, transparent), color-mix(in srgb, var(--primary) 5%, transparent)),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.admin-ledger-check.is-review {
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
}

.admin-ledger-check strong,
.admin-ledger-check small {
  display: block;
}

.admin-ledger-check small,
.admin-ledger-check li {
  color: var(--muted);
  line-height: 1.35;
}

.admin-ledger-check-count {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.admin-ledger-check-count strong {
  font-size: 1.4rem;
  line-height: 1;
}

.admin-ledger-check ul {
  grid-column: 1 / -1;
  margin: 0;
  padding-left: 18px;
}

.admin-reconciliation-list {
  display: grid;
  gap: 9px;
}

.admin-reconciliation-row .admin-row-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-reconciliation-row .row-actions {
  min-width: 118px;
}

.status-balanced {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  color: var(--primary);
}

.status-review {
  background: color-mix(in srgb, var(--amber) 18%, var(--surface));
  color: var(--amber);
}

.admin-sandbox-panel {
  grid-column: 1 / -1;
}

.admin-sandbox-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.admin-sandbox-mode article {
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 14px;
  padding: 12px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-2) 84%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent);
}

.admin-sandbox-mode small,
.admin-sandbox-controls small,
.admin-sandbox-chart > small {
  color: var(--muted);
  line-height: 1.35;
}

.admin-sandbox-controls {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.admin-sandbox-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-sandbox-control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
}

.admin-sandbox-control-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
}

.admin-sandbox-control-grid input {
  width: 100%;
  min-width: 0;
}

.admin-sandbox-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-sandbox-chart {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 82%, transparent), color-mix(in srgb, var(--primary) 5%, transparent)),
    color-mix(in srgb, var(--surface-2) 86%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent),
    0 18px 36px rgba(0, 0, 0, 0.18);
}

.admin-sandbox-bar {
  display: flex;
  height: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
}

.admin-sandbox-bar span {
  min-width: 2px;
}

.admin-sandbox-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.admin-sandbox-legend div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-sandbox-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 900;
}

.admin-sandbox-legend strong {
  overflow-wrap: anywhere;
  font-size: 0.92rem;
}

.admin-sandbox-legend small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
}

.admin-sandbox-legend i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
}

.admin-sandbox-bar .is-primary,
.admin-sandbox-legend .is-primary {
  background: var(--primary);
}

.admin-sandbox-bar .is-accent,
.admin-sandbox-legend .is-accent {
  background: var(--accent);
}

.admin-sandbox-bar .is-success,
.admin-sandbox-legend .is-success {
  background: #34d399;
}

.admin-sandbox-bar .is-warning,
.admin-sandbox-legend .is-warning {
  background: var(--amber);
}

.admin-sandbox-bar .is-muted,
.admin-sandbox-legend .is-muted {
  background: color-mix(in srgb, var(--muted) 58%, var(--line));
}

.admin-sandbox-bar .is-bronze,
.admin-sandbox-legend .is-bronze {
  background: #c78b48;
}

.admin-sandbox-bar .is-gold,
.admin-sandbox-legend .is-gold {
  background: #f5c542;
}

.admin-sandbox-bar .is-elite,
.admin-sandbox-legend .is-elite {
  background: #6ee7f9;
}

.admin-sandbox-bar .is-legend,
.admin-sandbox-legend .is-legend {
  background: linear-gradient(90deg, #f5c542, #60f7ca, #7dd3fc);
}

.admin-sandbox-details {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.admin-sandbox-risk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-support-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(270px, 0.55fr);
  align-items: start;
}

.admin-support-toolbar,
.admin-support-mini-toolbar {
  display: grid;
  gap: 12px;
}

.admin-support-toolbar .admin-filter-row,
.admin-support-mini-toolbar input {
  width: 100%;
}

.admin-support-mini-toolbar {
  margin: 12px 0;
}

.admin-support-stack {
  display: grid;
  gap: 12px;
}

.admin-support-ticket-list {
  display: grid;
  gap: 10px;
}

.admin-support-ticket-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.28fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  overflow: hidden;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 90%, transparent), color-mix(in srgb, var(--primary) 6%, transparent)),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent),
    0 14px 28px rgba(0, 0, 0, 0.16);
}

.admin-support-ticket-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.admin-support-ticket-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.admin-support-ticket-title strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-support-ticket-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-support-ticket-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 7px;
}

.admin-support-ticket-meta span {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 10px;
  padding: 7px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  color: var(--muted);
  font-size: 0.72rem;
}

.admin-support-ticket-meta strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.admin-support-ticket-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.admin-support-ticket-actions button {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 7px 8px;
  white-space: normal;
}

.admin-support-template-list {
  display: grid;
  gap: 10px;
}

.admin-support-template-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)),
    color-mix(in srgb, var(--surface-2) 86%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent),
    0 14px 30px rgba(0, 0, 0, 0.16);
}

.admin-support-template-card strong {
  display: block;
  color: var(--text);
}

.admin-support-template-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.admin-support-template-card small {
  color: color-mix(in srgb, var(--muted) 85%, transparent);
}

.admin-support-panel .admin-support-template-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.admin-quality-layout,
.admin-quality-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 14px;
  align-items: start;
}

.admin-quality-stack,
.admin-quality-campaign-list,
.admin-quality-template-list,
.admin-quality-scan-list {
  display: grid;
  gap: 9px;
}

.admin-quality-card,
.admin-quality-control-card {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 14px;
  padding: 12px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 46%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 86%, transparent), color-mix(in srgb, var(--accent) 5%, transparent)),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent),
    0 14px 32px rgba(0, 0, 0, 0.18);
}

.admin-quality-badges,
.admin-quality-card .row-actions,
.admin-quality-control-card .row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.admin-quality-campaign-list .admin-compact-row {
  width: 100%;
  text-align: left;
}

.admin-quality-check {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 10px;
  padding: 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 68%, transparent);
}

.admin-check-row-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.admin-quality-check strong {
  color: var(--ink);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.admin-quality-check p {
  margin: 0;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.35;
}

.admin-quality-check small {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  font-size: 0.76rem;
  line-height: 1.35;
}

.admin-quality-check.is-warning,
.admin-quality-check.is-manual_review,
.admin-quality-check.is-simulated,
.admin-quality-check.is-requires_staging,
.admin-quality-check.is-requires_production,
.admin-quality-check.is-external_provider_required {
  border-color: color-mix(in srgb, var(--amber) 40%, var(--line));
}

.admin-quality-check.is-critical,
.admin-quality-check.is-failed {
  border-color: color-mix(in srgb, var(--red) 48%, var(--line));
}

.admin-quality-check.is-passed {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
}

.admin-quality-template-list span {
  display: grid;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: 10px;
  padding: 9px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.admin-quality-template-list small {
  color: var(--muted);
  line-height: 1.35;
}

.admin-inbox-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.admin-inbox-toolbar strong {
  display: block;
  margin-top: 3px;
  font-size: 1rem;
}

.admin-alert-filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-alert-list {
  display: grid;
  gap: 10px;
}

.admin-alert-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 16px;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 88%, transparent), color-mix(in srgb, var(--accent) 5%, transparent)),
    color-mix(in srgb, var(--surface-2) 90%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent),
    0 16px 36px rgba(0, 0, 0, 0.18);
}

.admin-alert-row:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  transform: translateY(-1px);
}

.admin-alert-row.is-warning {
  border-color: color-mix(in srgb, var(--amber) 32%, var(--line));
}

.admin-alert-row.is-critical,
.admin-alert-row.is-escalated {
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent),
    0 0 28px color-mix(in srgb, var(--red) 12%, transparent),
    0 18px 40px rgba(0, 0, 0, 0.22);
}

.admin-alert-row.is-resolved {
  opacity: 0.72;
}

.admin-alert-main,
.admin-alert-controls,
.admin-alert-template-actions,
.admin-alert-status-actions,
.admin-alert-suggested,
.admin-alert-notes {
  min-width: 0;
}

.admin-alert-main {
  display: grid;
  gap: 8px;
}

.admin-alert-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-alert-title-row strong {
  min-width: min(100%, 240px);
  line-height: 1.15;
}

.admin-alert-severity {
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line));
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-alert-row.is-critical .admin-alert-severity,
.admin-alert-row.is-escalated .admin-alert-severity {
  border-color: color-mix(in srgb, var(--red) 52%, var(--line));
  background: color-mix(in srgb, var(--red) 14%, var(--surface));
  color: var(--red);
}

.admin-alert-row p,
.admin-alert-related,
.admin-alert-meta,
.admin-alert-suggested span,
.admin-alert-notes small,
.admin-alert-template-empty {
  color: var(--muted);
  line-height: 1.42;
}

.admin-alert-row p {
  margin: 0;
}

.admin-alert-related {
  overflow-wrap: anywhere;
}

.admin-alert-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-alert-meta span,
.admin-alert-notes small {
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: 999px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-alert-suggested {
  display: grid;
  gap: 4px;
  border-left: 2px solid color-mix(in srgb, var(--primary) 42%, transparent);
  padding-left: 10px;
}

.admin-alert-suggested strong {
  font-size: 0.78rem;
  color: var(--primary);
  text-transform: uppercase;
}

.admin-alert-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-alert-controls {
  display: grid;
  align-content: start;
  gap: 10px;
}

.admin-alert-status-actions,
.admin-alert-template-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.admin-alert-status-actions button,
.admin-alert-status-actions .text-button,
.admin-alert-template-button {
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  font-size: 0.72rem;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
}

.admin-alert-template-actions {
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: 13px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
}

.admin-alert-template-button {
  border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-2));
  color: var(--ink);
  font-weight: 950;
}

.admin-alert-template-button:hover,
.admin-alert-template-button:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--line));
  transform: translateY(-1px);
}

.admin-alert-template-empty {
  grid-column: 1 / -1;
  font-size: 0.76rem;
}

@media (max-width: 1120px) {
  .sidebar {
    top: auto;
    height: auto;
    max-height: none;
  }

  body.is-admin-user .sidebar {
    padding: 18px;
  }

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

  .assisted-order-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .admin-daily-summary-grid,
  .admin-reconciliation-summary,
  .admin-report-grid,
  .admin-sandbox-control-grid,
  .admin-sandbox-risk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-alert-row,
  .admin-inbox-toolbar,
  .admin-reconciliation-grid,
  .admin-sandbox-mode,
  .admin-sandbox-chart-grid,
  .admin-support-grid {
    grid-template-columns: 1fr;
  }

  .admin-reconciliation-grid > article:first-child {
    grid-row: auto;
  }

  .admin-alert-filter-row {
    justify-content: flex-start;
  }

  .admin-tabs {
    position: static;
  }

  .admin-bulk-toolbar,
  .admin-financial-command .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-support-template-list {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
}

@media (max-width: 760px) {
  .profile-admin-actions {
    grid-template-columns: 1fr;
  }

  .admin-command-row {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .admin-command-row .row-actions {
    grid-column: 1 / -1;
  }

  .admin-row-actions-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-check-summary-grid,
  .admin-check-workflow-section.is-identity,
  .admin-check-workflow-section.is-contact,
  .admin-check-workflow-section.is-payment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-check-workflow-section.is-payment {
    order: 2;
  }

  .admin-check-workflow-actions {
    order: 3;
    justify-content: stretch;
  }

  .admin-check-workflow-section.is-contact {
    order: 4;
  }

  .admin-check-workflow-actions > * {
    flex: 1 1 180px;
    justify-content: center;
  }

  .assisted-order-form-grid,
  .assisted-order-metrics,
  .assisted-order-actions,
  .assisted-order-title-row,
  .assisted-order-review-note {
    grid-template-columns: 1fr;
  }

  .assisted-order-title-row,
  .assisted-order-review-note {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-row .row-actions {
    max-width: none;
    width: 100%;
  }

  .admin-support-ticket-card {
    grid-template-columns: 1fr;
  }

  .admin-support-ticket-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-action-queue-grid,
  .admin-daily-summary-grid,
  .admin-reconciliation-summary,
  .admin-report-grid,
  .admin-sandbox-control-grid,
  .admin-sandbox-risk-grid,
  .admin-sandbox-legend,
  .admin-row-metrics,
  .admin-reconciliation-row .admin-row-metrics,
  .admin-detail-grid,
  .admin-alert-status-actions,
  .admin-alert-template-actions,
  .admin-bulk-toolbar,
  .admin-financial-command .admin-metrics {
    grid-template-columns: 1fr;
  }

  .admin-drawer-panel {
    width: 100vw;
  }
}

/* Compact console density pass: tighter daily-use surfaces without losing the premium glass feel. */
:root {
  --compact-panel-pad: clamp(14px, 1.15vw, 18px);
  --compact-card-pad: clamp(10px, 0.9vw, 13px);
  --compact-gap: clamp(8px, 0.8vw, 12px);
  --compact-radius: 16px;
}

.app-shell {
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 16px;
  width: min(1500px, calc(100% - 20px));
  padding-top: 14px;
}

.main-content {
  padding: 18px 18px 28px;
}

.member-status-bar {
  gap: 8px;
  padding: 6px 16px;
}

.member-status-account,
.member-status-actions {
  gap: 8px;
}

.member-status-metrics {
  gap: 6px;
}

.member-status-metrics div,
.member-status-metric-button,
.member-status-actions .level-badge {
  min-height: 34px;
  padding: 5px 10px;
}

.member-status-actions .text-button,
.member-status-actions .theme-toggle {
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  white-space: normal;
}

.compact-avatar {
  width: 32px;
  height: 32px;
}

.sidebar {
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
}

.sidebar .brand {
  gap: 9px;
}

.sidebar .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 14px;
}

.sidebar .brand strong {
  font-size: 0.92rem;
}

.sidebar .brand span {
  font-size: 0.76rem;
  line-height: 1.2;
}

.sidebar .nav-list {
  gap: 5px;
}

.sidebar .nav-item {
  min-height: 38px;
  gap: 9px;
  border-radius: 12px;
  padding: 7px 9px;
  font-size: 0.88rem;
}

.sidebar .nav-item > span:first-child:not(.sidebar-link-badge) {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 0.68rem;
}

.sidebar-link-badge {
  min-height: 18px;
  padding: 2px 6px;
  font-size: 0.58rem;
}

.sidebar-section-label {
  margin: 9px 8px 2px;
  font-size: 0.64rem;
}

.sidebar-panel {
  padding: 12px;
  border-radius: 16px;
}

.topbar {
  margin-bottom: 12px;
  border-radius: 20px;
  padding: 18px 22px;
}

.topbar h1 {
  font-size: clamp(1.65rem, 2.35vw, 2.5rem);
}

.section-subtitle {
  max-width: 720px;
  font-size: 0.96rem;
  line-height: 1.45;
}

.dashboard-primary-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.68fr);
  gap: 12px;
  margin-bottom: 12px;
}

.content-grid,
.content-grid.dashboard-secondary {
  grid-template-columns: minmax(0, 1.06fr) minmax(300px, 0.72fr);
  gap: 12px;
}

.panel,
.next-action-card,
.onboarding-checklist-panel,
.app-shell .view-section .panel,
.app-shell .view-section .next-action-card {
  border-radius: 18px;
  padding: var(--compact-panel-pad);
}

.panel-heading,
.section-header {
  gap: 10px;
  margin-bottom: 10px;
}

.panel h2,
.section-header h2,
.next-action-card h2 {
  margin: 2px 0 4px;
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.16;
}

.eyebrow,
.panel-heading .eyebrow,
.next-action-card .eyebrow {
  font-size: 0.66rem;
}

.safety-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  border-radius: 16px;
  padding: 9px 12px;
  font-size: 0.86rem;
  line-height: 1.32;
}

.account-snapshot-panel {
  gap: 10px;
}

.metric-grid,
.account-snapshot-grid,
.streak-card-grid,
.daily-goals,
.achievement-grid,
.milestone-list,
.next-action-list,
.compact-action-list {
  gap: var(--compact-gap);
}

.metric-card {
  min-height: 112px;
  border-radius: var(--compact-radius);
  padding: var(--compact-card-pad);
}

.account-snapshot-grid .metric-card {
  min-height: 94px;
  padding: 10px;
}

.account-snapshot-grid .metric-card::before {
  top: 8px;
  right: 8px;
  padding: 2px 6px 2px 13px;
  font-size: 0.52rem;
}

.metric-icon,
.account-snapshot-grid .metric-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  border-radius: 9px;
  font-size: 0.66rem;
}

.metric-card span,
.metric-card small,
.wallet-summary span,
.tier-grid span,
.estimate-breakdown span,
.ad-meta span,
.timer-card span {
  font-size: 0.78rem;
}

.metric-card strong,
.account-snapshot-grid .metric-card strong {
  margin: 3px 0;
  font-size: clamp(1.14rem, 1.7vw, 1.42rem);
  line-height: 1.04;
}

.metric-card small,
.snapshot-note,
.next-action small,
.activity-row small,
.goal-row small {
  line-height: 1.28;
}

.snapshot-progress-grid {
  gap: 10px;
}

.progress-label {
  gap: 8px;
  font-size: 0.78rem;
}

.progress-label strong {
  font-size: 0.78rem;
}

.progress-track,
.progress-track.has-progress-label {
  height: 12px;
}

.snapshot-note {
  margin: 0;
  font-size: 0.8rem;
}

.perk-list {
  gap: 5px;
}

.perk-pill,
.status-badge,
.level-badge {
  min-height: 22px;
  padding: 3px 7px;
  font-size: 0.68rem;
}

.compact-email-button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.78rem;
}

.next-action-card {
  gap: 12px;
}

.next-action-card p {
  font-size: 0.9rem;
  line-height: 1.35;
}

.next-action {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  border-radius: 14px;
  padding: 10px 11px;
}

.next-action.is-primary-action {
  padding: 12px;
}

.next-action .primary-button,
.next-action .text-button,
.next-action.is-primary-action .primary-button {
  min-width: 78px;
  min-height: 36px;
  padding: 0 12px;
}

.action-card,
.activity-row,
.goal-row,
.ledger-row,
.payout-row,
.referral-row,
.campaign-row,
.admin-row {
  gap: 8px;
  border-radius: 14px;
  padding: 10px;
}

.activity-row,
.activity-row.is-live-event {
  grid-template-columns: 8px 28px minmax(0, 1fr);
  align-items: center;
}

.activity-live-pulse {
  width: 7px;
  height: 7px;
}

.action-icon,
.activity-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-size: 0.66rem;
}

.activity-row strong,
.goal-row strong {
  margin-top: 0;
  font-size: 0.88rem;
  line-height: 1.18;
}

.activity-row small,
.goal-row small {
  margin-top: 2px;
  font-size: 0.76rem;
}

.goal-row {
  grid-template-columns: minmax(0, 0.75fr) minmax(96px, 0.7fr);
}

.mini-progress {
  height: 7px;
}

.streak-card {
  min-height: auto;
  border-radius: 16px;
  padding: 10px;
}

.streak-card-top {
  gap: 8px;
}

.streak-card strong {
  font-size: 1rem;
}

.compact-progress-panel .achievement-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#dashboard .achievement-card.achievement-badge-button,
.app-shell .view-section .achievement-card.achievement-badge-button,
.achievement-card {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 9px;
  border-radius: 16px;
  padding: 10px;
}

.achievement-art,
.compact-progress-panel .achievement-art {
  width: 38px;
  height: 38px;
  border-radius: 14px;
}

.achievement-orbit,
.compact-progress-panel .achievement-orbit {
  border-radius: 17px;
}

.achievement-icon,
.compact-progress-panel .achievement-icon {
  width: 28px;
  height: 28px;
  border-radius: 11px;
  font-size: 0.62rem;
}

.achievement-kicker {
  margin-bottom: 2px;
  font-size: 0.58rem;
}

.achievement-card strong {
  font-size: 0.84rem;
}

.achievement-card small {
  display: -webkit-box;
  margin: 3px 0 7px;
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.24;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.achievement-progress {
  height: 6px;
}

.compact-progress-panel .achievement-card .achievement-state,
.achievement-state {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: -2px;
  font-size: 0.58rem;
}

/* Badge vault cards need a dedicated icon lane so dense medallions never overlap copy. */
#levels .badge-vault-panel .badge-vault-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  align-items: stretch;
}

#levels .badge-vault-panel .achievement-card.achievement-badge-button {
  grid-template-columns: 50px minmax(0, 1fr);
  grid-template-rows: auto min-content;
  align-items: start;
  gap: 8px 11px;
  min-height: 128px;
  padding: 12px;
}

#levels .badge-vault-panel .achievement-art {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 46px;
  height: 46px;
  border-radius: 16px;
}

#levels .badge-vault-panel .achievement-orbit {
  border-radius: 19px;
}

#levels .badge-vault-panel .achievement-icon {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  font-size: 0.64rem;
}

#levels .badge-vault-panel .achievement-body {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  align-content: start;
  min-width: 0;
}

#levels .badge-vault-panel .achievement-kicker {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#levels .badge-vault-panel .achievement-card strong {
  font-size: 0.86rem;
  line-height: 1.12;
}

#levels .badge-vault-panel .achievement-card small {
  margin-bottom: 7px;
}

#levels .badge-vault-panel .achievement-progress {
  width: 100%;
  margin-top: 1px;
}

#levels .badge-vault-panel .achievement-state {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  align-self: end;
  max-width: 100%;
  margin-top: 0;
}

.dashboard-campaign-pick,
.action-list .action-card {
  min-height: auto;
}

#dashboard .empty-state-block {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
  border-radius: 14px;
  padding: 10px;
}

#dashboard .empty-state-block::after {
  display: none;
}

#dashboard .empty-state-block .empty-icon {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 0.7rem;
}

#dashboard .empty-state-block strong {
  font-size: 0.92rem;
  line-height: 1.12;
}

#dashboard .empty-state-block p {
  font-size: 0.8rem;
  line-height: 1.3;
}

#dashboard .streak-card-grid {
  margin-bottom: 8px;
}

#dashboard .daily-goals .goal-row {
  grid-template-columns: minmax(0, 0.78fr) minmax(118px, 0.45fr);
  min-height: 58px;
  padding: 9px 10px;
}

#dashboard .daily-goals .goal-row span {
  font-size: 0.86rem;
}

#dashboard .daily-goals .goal-row strong {
  font-size: 0.92rem;
}

#dashboard .daily-goals .goal-row small {
  font-size: 0.72rem;
}

.dashboard-campaign-pick {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
}

.dashboard-campaign-pick > div {
  min-width: 0;
}

.dashboard-campaign-pick strong {
  display: block;
  line-height: 1.15;
}

.dashboard-campaign-pick small {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dashboard-campaign-pick .small-button {
  min-width: 86px;
  white-space: nowrap;
}

.ad-grid {
  gap: 12px;
}

.ad-card {
  border-radius: 18px;
  padding: 14px;
}

/* True compact campaign cards. Kept late in the file so it wins over global ad-card refinements. */
.ad-grid.is-compact-view {
  gap: 9px;
}

.ad-grid.is-compact-view .ad-browser-section {
  gap: 8px;
  padding: 10px;
}

.ad-grid.is-compact-view .ad-section-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.campaign-compact-card.ad-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  gap: 10px;
  align-items: stretch;
  min-height: 190px;
  padding: 14px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--brand-sky) 9%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(8, 13, 24, 0.7);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.campaign-compact-card::before {
  height: 2px;
}

.campaign-compact-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.campaign-compact-main {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.campaign-compact-card .ptc-ad-logo {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 0.72rem;
}

.campaign-compact-copy {
  min-width: 0;
}

.campaign-compact-sponsor-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 5px;
  min-width: 0;
}

.campaign-compact-sponsor-row strong {
  color: color-mix(in srgb, var(--text) 88%, var(--brand-sky));
  font-size: 0.72rem;
  font-weight: 1000;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-compact-sponsor-row .campaign-rarity-pill {
  min-height: 18px;
  padding: 1px 7px;
  font-size: 0.56rem;
}

.campaign-compact-status-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  max-width: 140px;
}

.campaign-compact-status-stack .status-badge,
.campaign-compact-premium-label {
  min-height: 22px;
  white-space: nowrap;
}

.campaign-compact-premium-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--premium-accent-a, var(--brand-sky)) 36%, var(--line));
  border-radius: 999px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--premium-accent-a, var(--brand-sky)) 10%, transparent);
  color: color-mix(in srgb, var(--premium-accent-a, var(--brand-sky)) 78%, white);
  font-size: 0.56rem;
  font-weight: 1000;
  line-height: 1.1;
  text-transform: uppercase;
}

.campaign-compact-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 3px;
}

.campaign-compact-kicker span {
  max-width: 100%;
  min-height: 18px;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 18%, var(--line));
  border-radius: 999px;
  padding: 1px 6px;
  color: var(--muted-2);
  font-size: 0.58rem;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-compact-copy h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.campaign-compact-copy p {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.24;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.campaign-compact-requirements,
.campaign-compact-secondary-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

.campaign-compact-requirements {
  gap: 6px;
  margin-top: 1px;
}

.campaign-compact-secondary-tags {
  gap: 5px;
  opacity: 0.94;
}

.campaign-compact-requirements .campaign-tag {
  min-height: 24px;
  padding: 2px 8px;
  font-size: 0.62rem;
}

.campaign-compact-secondary-tags .campaign-tag {
  max-width: 100%;
  min-height: 19px;
  padding: 1px 7px;
  font-size: 0.58rem;
}

.campaign-compact-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.campaign-compact-metrics span {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 17%, var(--line));
  border-radius: 10px;
  padding: 6px 7px;
  background: rgba(15, 23, 42, 0.45);
}

.campaign-compact-metrics small {
  display: block;
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 900;
  text-transform: uppercase;
}

.campaign-compact-metrics strong {
  display: block;
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-compact-card .campaign-compact-metrics span:first-child {
  border-color: color-mix(in srgb, var(--brand-gold) 32%, var(--line));
}

.campaign-compact-card .campaign-compact-metrics span:first-child strong {
  color: var(--brand-gold);
}

.campaign-compact-card .campaign-compact-metrics span:nth-child(4) {
  border-color: color-mix(in srgb, var(--brand-sky) 30%, var(--line));
}

.campaign-compact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 20px;
}

.campaign-compact-tags .campaign-tag {
  min-height: 18px;
  padding: 1px 6px;
  font-size: 0.58rem;
}

.campaign-tag.is-signal {
  border-color: color-mix(in srgb, var(--brand-mint) 24%, var(--line));
  color: color-mix(in srgb, var(--brand-mint) 72%, white);
}

.campaign-compact-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  margin-top: 1px;
}

.campaign-compact-action .primary-button,
.campaign-compact-action .text-button {
  min-height: 31px;
  border-radius: 10px;
  padding: 5px 9px;
  font-size: 0.72rem;
}

.campaign-compact-action .text-button {
  min-width: 68px;
}

.ad-card.card--featured {
  --premium-accent-a: var(--brand-mint);
  --premium-accent-b: var(--brand-sky);
  --premium-accent-c: var(--brand-gold);
  --premium-accent-soft: color-mix(in srgb, var(--brand-mint) 17%, transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--premium-accent-a) 48%, var(--premium-accent-b) 18%);
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--premium-accent-a) 16%, transparent), transparent 36%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--premium-accent-b) 13%, transparent), transparent 34%),
    linear-gradient(135deg, rgb(255 255 255 / 0.105), rgb(255 255 255 / 0.026) 46%, var(--premium-accent-soft)),
    linear-gradient(180deg, rgb(15 23 42 / 0.98), rgb(5 10 21 / 0.99));
  box-shadow:
    0 16px 38px rgb(0 0 0 / 0.3),
    0 0 0 1px color-mix(in srgb, var(--premium-accent-a) 10%, transparent),
    0 0 34px color-mix(in srgb, var(--premium-accent-a) 14%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.11);
}

.ad-card.card--verified {
  --premium-accent-a: var(--brand-mint);
  --premium-accent-b: var(--brand-sky);
  --premium-accent-c: color-mix(in srgb, var(--brand-mint) 64%, white);
  --premium-accent-soft: color-mix(in srgb, var(--brand-mint) 16%, transparent);
}

.ad-card.card--strict-attention {
  --premium-accent-a: var(--brand-gold);
  --premium-accent-b: var(--brand-sky);
  --premium-accent-c: color-mix(in srgb, var(--brand-gold) 70%, white);
  --premium-accent-soft: color-mix(in srgb, var(--brand-gold) 16%, transparent);
}

.ad-card.card--premium-combo {
  --premium-accent-a: var(--brand-gold);
  --premium-accent-b: var(--brand-mint);
  --premium-accent-c: var(--brand-sky);
  --premium-accent-soft: color-mix(in srgb, var(--brand-sky) 14%, transparent);
  border-color: color-mix(in srgb, var(--brand-gold) 48%, var(--brand-mint) 26%);
  box-shadow:
    0 18px 42px rgb(0 0 0 / 0.32),
    0 0 0 1px color-mix(in srgb, var(--brand-gold) 12%, transparent),
    0 0 42px color-mix(in srgb, var(--brand-mint) 14%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.ad-card.card--featured > * {
  position: relative;
  z-index: 1;
}

.ad-card.card--featured::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 3px;
  background: linear-gradient(90deg, var(--premium-accent-a), var(--premium-accent-b), var(--premium-accent-c), var(--premium-accent-a));
  background-size: 240% 100%;
  box-shadow: 0 0 18px color-mix(in srgb, var(--premium-accent-a) 35%, transparent);
  animation: premium-card-accent-sweep 8s linear infinite;
  content: "";
}

.ad-card.card--featured::after {
  position: absolute;
  inset: 3px 0 0 auto;
  z-index: 0;
  width: min(46%, 360px);
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--premium-accent-b) 20%, transparent), transparent 58%),
    radial-gradient(circle at 58% 82%, color-mix(in srgb, var(--premium-accent-a) 12%, transparent), transparent 62%);
  opacity: 0.82;
  pointer-events: none;
  animation: premium-card-aura 9s ease-in-out infinite;
  content: "";
}

.ad-card.card--featured:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--premium-accent-a) 64%, var(--premium-accent-b) 24%);
  box-shadow:
    0 20px 48px rgb(0 0 0 / 0.34),
    0 0 0 1px color-mix(in srgb, var(--premium-accent-a) 15%, transparent),
    0 0 46px color-mix(in srgb, var(--premium-accent-a) 18%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.13);
}

.campaign-featured-ribbon {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 24px);
  min-height: 27px;
  border: 1px solid color-mix(in srgb, var(--premium-accent-a) 50%, var(--line));
  border-radius: 999px;
  padding: 4px 10px 4px 5px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--premium-accent-a) 20%, rgba(2, 6, 23, 0.92)), rgba(2, 6, 23, 0.9)),
    rgba(2, 6, 23, 0.92);
  color: color-mix(in srgb, var(--premium-accent-a) 82%, white);
  box-shadow:
    0 10px 24px rgb(0 0 0 / 0.28),
    0 0 18px color-mix(in srgb, var(--premium-accent-a) 16%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.16);
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
  overflow: hidden;
}

.campaign-featured-ribbon::after {
  position: absolute;
  inset: -45% auto -45% -42%;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.24), transparent);
  transform: skewX(-18deg);
  animation: premium-ribbon-shine 6.5s ease-in-out infinite;
  content: "";
}

.campaign-featured-ribbon strong,
.campaign-featured-ribbon-icon {
  position: relative;
  z-index: 1;
}

.campaign-featured-ribbon-icon {
  display: inline-grid;
  width: 19px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--premium-accent-a) 64%, white);
  border-radius: 50%;
  background: color-mix(in srgb, var(--premium-accent-a) 18%, rgb(2 6 23 / 0.9));
  color: color-mix(in srgb, var(--premium-accent-a) 80%, white);
  font-size: 0.5rem;
  font-weight: 1000;
  box-shadow: 0 0 14px color-mix(in srgb, var(--premium-accent-a) 18%, transparent);
}

.campaign-compact-card .campaign-featured-ribbon {
  position: relative;
  top: auto;
  left: auto;
  z-index: 1;
  justify-self: start;
  align-self: start;
  max-width: 100%;
  margin: 0 0 -2px;
}

.ptc-ad-row.card--featured .ptc-ad-brand-block {
  padding-top: 42px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--premium-accent-a) 13%, transparent), transparent 64%),
    transparent;
}

.campaign-compact-card.card--featured {
  gap: 8px;
  padding-top: 14px;
}

.ad-card.card--featured .ptc-ad-logo {
  box-shadow:
    0 14px 28px color-mix(in srgb, var(--premium-accent-a) 18%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.44);
}

.ad-card.card--featured .ptc-ad-main h3,
.campaign-compact-card.card--featured .campaign-compact-copy h3 {
  color: color-mix(in srgb, var(--text) 90%, var(--premium-accent-c));
  text-shadow: 0 0 18px color-mix(in srgb, var(--premium-accent-a) 15%, transparent);
}

.ad-card.card--featured .ptc-ad-kicker span:first-child,
.ad-card.card--featured .ptc-trust-strip span:first-child,
.ad-card.card--featured .campaign-compact-kicker span:first-child {
  border-color: color-mix(in srgb, var(--premium-accent-a) 42%, var(--line));
  background: color-mix(in srgb, var(--premium-accent-a) 10%, transparent);
  color: color-mix(in srgb, var(--premium-accent-a) 82%, white);
}

.ad-card.card--featured .ptc-ad-meta div,
.campaign-compact-card.card--featured .campaign-compact-metrics span {
  border-color: color-mix(in srgb, var(--premium-accent-a) 28%, var(--line));
  background:
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--premium-accent-a) 12%, transparent), transparent 44%),
    linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.024)),
    rgb(2 6 23 / 0.34);
}

.ad-card.card--featured .ptc-ad-meta .ptc-xp-meta,
.campaign-compact-card.card--featured .campaign-compact-metrics span:first-child {
  border-color: color-mix(in srgb, var(--premium-accent-c) 48%, var(--line));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.ptc-action-caption.is-premium-caption {
  border-color: color-mix(in srgb, var(--premium-accent-a) 42%, var(--line));
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--premium-accent-a) 16%, transparent), transparent 46%),
    linear-gradient(135deg, color-mix(in srgb, var(--premium-accent-a) 12%, transparent), color-mix(in srgb, var(--brand-gold) 8%, transparent));
  color: color-mix(in srgb, var(--text) 78%, var(--premium-accent-a));
}

.ptc-action-caption.is-premium-caption em {
  display: block;
  margin-bottom: 4px;
  color: color-mix(in srgb, var(--premium-accent-a) 76%, white);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.ptc-premium-view-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  min-height: 22px;
  border: 1px solid color-mix(in srgb, var(--premium-accent-a) 38%, var(--line));
  border-radius: 999px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--premium-accent-a) 11%, transparent);
  color: color-mix(in srgb, var(--premium-accent-a) 82%, white);
  font-size: 0.58rem;
  font-weight: 1000;
  line-height: 1.1;
  text-transform: uppercase;
}

.campaign-compact-action .ptc-premium-view-label {
  grid-column: 1 / -1;
}

.ad-card.card--featured .ptc-ad-action-panel,
.ad-card.card--featured .campaign-compact-action {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--premium-accent-a) 12%, transparent), transparent 54%),
    rgb(255 255 255 / 0.035);
}

.ad-card.card--featured:not(.is-complete) .primary-button {
  border-color: color-mix(in srgb, var(--premium-accent-a) 58%, var(--brand-mint));
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--premium-accent-a) 18%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.24);
}

.ad-card.card--featured:not(.is-complete) .primary-button:hover {
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--premium-accent-a) 26%, transparent),
    0 0 18px color-mix(in srgb, var(--premium-accent-a) 18%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.28);
}

@keyframes premium-card-accent-sweep {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

@keyframes premium-card-aura {
  0%,
  100% {
    opacity: 0.68;
    transform: translateX(0);
  }

  50% {
    opacity: 0.94;
    transform: translateX(-8px);
  }
}

@keyframes premium-badge-shine {
  0%,
  62% {
    transform: translateX(0) skewX(-18deg);
  }

  100% {
    transform: translateX(350%) skewX(-18deg);
  }
}

@keyframes premium-ribbon-shine {
  0%,
  58% {
    transform: translateX(0) skewX(-18deg);
  }

  100% {
    transform: translateX(420%) skewX(-18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ad-card.card--featured::before,
  .ad-card.card--featured::after,
  .campaign-featured-ribbon::after,
  .campaign-tag.is-verified-click-through::after,
  .campaign-tag.is-strict::after {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .ad-grid.is-compact-view .ad-section-grid {
    grid-template-columns: 1fr;
  }

  .campaign-compact-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .campaign-compact-status-stack {
    justify-content: flex-start;
    max-width: none;
  }

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

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 224px minmax(0, 1fr);
  }

  .dashboard-primary-grid,
  .content-grid,
  .content-grid.dashboard-secondary {
    grid-template-columns: 1fr;
  }
}

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

  .main-content {
    min-width: 0;
  }
}

@media (max-width: 620px) {
  #levels .badge-vault-panel .achievement-card.achievement-badge-button {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  #levels .badge-vault-panel .achievement-art {
    width: 40px;
    height: 40px;
    border-radius: 15px;
  }

  #levels .badge-vault-panel .achievement-icon {
    width: 29px;
    height: 29px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .level-up-popup-pop .level-up-card,
  .level-up-popup-pop .level-up-card::before,
  .level-up-popup-pop .level-up-card::after,
  .level-up-celebration-backdrop,
  .level-up-particle-field i,
  .level-up-shockwave,
  .level-up-orbit::before,
  .level-up-orbit-sweep,
  .level-up-orbit-ring,
  .level-up-orbit strong,
  .level-up-orbit strong.is-counting,
  .level-up-progress-track span,
  .level-up-progress-track span::after,
  .level-up-threshold-route span,
  .viewer-progress-head::after,
  .viewer-progress-spark-trail::before,
  .level-up-unlock-card,
  .reward-staged-sequence .level-up-ribbon,
  .reward-staged-sequence .reward-level-up-card,
  .reward-staged-sequence #rewardCelebrationAmount,
  .reward-staged-sequence .reward-verification-row,
  .reward-staged-sequence .reward-balance-route,
  .reward-staged-sequence .reward-next-goal,
  .reward-staged-sequence .celebration-copy p,
  .reward-staged-sequence .celebration-stats > div,
  .reward-staged-sequence .reward-rarity-badge,
  .reward-staged-sequence .reward-progression-panel,
  .reward-staged-sequence .reward-unlock-reveal,
  .reward-staged-sequence .reward-daily-strip,
  .reward-staged-sequence .reward-next-actions,
  .reward-staged-sequence .reward-next-actions > *,
  .reward-staged-sequence .reward-next-actions::after,
  .reward-orbital-ring,
  .reward-orbital-ring::before,
  .reward-xp-energy-field span,
  .reward-progression-panel::before,
  .reward-rarity-badge.reward-rarity-legendary,
  .reward-level-up-card,
  .reward-level-up-card::before,
  .reward-level-up-card::after,
  .reward-level-up-card strong,
  .reward-level-number.is-counting,
  .reward-level-up-fireworks,
  .reward-level-up-fireworks::before,
  .reward-level-up-fireworks::after,
  .reward-level-up-fireworks span,
  .reward-level-up-fireworks span::before,
  .reward-level-up-fireworks span::after,
  .auth-screen::before,
  .auth-screen:not(.is-hidden)::after,
  .auth-screen:not(.is-hidden) .landing-home-copy > h1 .hero-line,
  .auth-screen:not(.is-hidden) .landing-nav-cta,
  .auth-screen:not(.is-hidden) .audience-card-footer .primary-button,
  .auth-screen:not(.is-hidden) #loginPanel .primary-button,
  .landing-nav .landing-nav-cta::before,
  .landing-live-stats article::before,
  .primary-button::after,
  .activity-live-pulse,
  .auth-screen:not(.is-hidden) .landing-topnav,
  .auth-screen:not(.is-hidden) .landing-home-copy > .eyebrow,
  .auth-screen:not(.is-hidden) .landing-home-copy > h1,
  .auth-screen:not(.is-hidden) .auth-lede,
  .auth-screen:not(.is-hidden) .development-notice,
  .auth-screen:not(.is-hidden) .landing-live-stats,
  .auth-screen:not(.is-hidden) .audience-card,
  .auth-screen:not(.is-hidden) .marketplace-preview,
  .auth-screen:not(.is-hidden) .landing-workflow,
  .auth-screen:not(.is-hidden) .referral-growth-section,
  .auth-screen:not(.is-hidden) .platform-proof,
  .auth-screen:not(.is-hidden) .auth-panel {
    animation: none !important;
    transition: none !important;
  }

  .viewer-panel .viewer-timer-progress .viewer-progress-spark-trail {
    opacity: 0 !important;
  }

  .level-up-celebration--reduced .level-up-celebration-backdrop {
    opacity: 0.84;
  }

  .level-up-celebration--reduced .level-up-unlock-card {
    opacity: 1;
    transform: none;
  }

  .reward-staged-sequence .level-up-ribbon,
  .reward-staged-sequence .reward-level-up-card,
  .reward-staged-sequence #rewardCelebrationAmount,
  .reward-staged-sequence .celebration-copy p,
  .reward-staged-sequence .celebration-stats > div,
  .reward-staged-sequence .reward-rarity-badge,
  .reward-staged-sequence .reward-progression-panel,
  .reward-staged-sequence .reward-unlock-reveal,
  .reward-staged-sequence .reward-daily-strip,
  .reward-staged-sequence .reward-next-actions,
  .reward-staged-sequence .reward-next-actions > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .reward-staged-sequence .reward-next-actions::after {
    opacity: 0 !important;
  }

  .reward-xp-energy-field span {
    display: none;
  }

  .cinematic-bg,
  .cinematic-bg *,
  .cinematic-bg::before,
  .cinematic-bg::after {
    animation: none !important;
    transition: none !important;
  }

  .cinematic-streaks,
  .cinematic-spotlight {
    display: none;
  }
}

.ai-campaign-advisor-panel {
  display: grid;
  gap: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  border-color: color-mix(in srgb, var(--primary) 20%, var(--line));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.advisor-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.advisor-kpi-grid article {
  display: grid;
  gap: 5px;
  min-height: 92px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: var(--radius);
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.advisor-kpi-grid span,
.ai-summary-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.advisor-kpi-grid strong {
  color: var(--ink);
  font-size: clamp(1.08rem, 1.8vw, 1.38rem);
  line-height: 1.05;
}

.ai-summary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr);
  gap: 12px;
}

.ai-summary-card {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--primary));
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.ai-summary-card p {
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
}

.advisor-section {
  display: grid;
  gap: 10px;
  align-content: start;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--primary));
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.advisor-section p {
  margin: 0;
}

.advisor-insight-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  line-height: 1.45;
}

.advisor-insight-list li {
  padding: 2px 0;
}

.advisor-next-action {
  border: 1px solid color-mix(in srgb, var(--brand-gold) 34%, var(--primary));
  border-radius: var(--radius);
  padding: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--brand-gold) 10%, transparent)),
    color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.advisor-next-action strong {
  display: block;
  margin: 3px 0 5px;
  color: var(--ink);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.advisor-next-action p {
  max-width: 860px;
  margin: 0;
}

.advisor-empty-state {
  margin: 0;
}

.analytics-studio-shell {
  display: grid;
  gap: 14px;
}

.analytics-studio-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.analytics-studio-header h2 {
  margin: 2px 0 4px;
}

.analytics-studio-header p {
  margin: 0;
  color: var(--muted);
}

.analytics-range-controls,
.analytics-studio-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.analytics-range-button,
.analytics-studio-tab {
  border: 1px solid color-mix(in srgb, var(--line) 85%, var(--primary));
  border-radius: 999px;
  padding: 8px 11px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
}

.analytics-range-button.is-active,
.analytics-studio-tab.is-active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-2));
  color: var(--ink);
}

.analytics-custom-range {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.analytics-custom-range label {
  min-width: 170px;
}

.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.analytics-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.7fr);
  gap: 14px;
}

.analytics-chart-card,
.analytics-realtime-card,
.analytics-ai-summary-card,
.analytics-table-panel,
.analytics-question-panel,
.analytics-survey-controls,
.analytics-breakdown-card {
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--primary));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.analytics-chart-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.analytics-chart-header,
.analytics-chart-axis,
.analytics-top-list div,
.analytics-bar-row,
.analytics-answer-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.analytics-chart-header span,
.analytics-chart-axis,
.analytics-top-list p {
  color: var(--muted);
}

.analytics-line-chart {
  width: 100%;
  min-height: 220px;
  color: var(--primary);
}

.analytics-line-chart line {
  stroke: color-mix(in srgb, var(--line) 76%, transparent);
  stroke-width: 1;
}

.analytics-line-chart polyline {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.analytics-mini-bars {
  display: grid;
  grid-template-columns: repeat(48, minmax(2px, 1fr));
  align-items: end;
  gap: 3px;
  min-height: 96px;
  padding: 8px 0;
}

.analytics-mini-bars span {
  display: block;
  height: var(--bar-height);
  min-height: 3px;
  border-radius: 999px 999px 0 0;
  background: color-mix(in srgb, var(--primary) 72%, var(--brand-gold));
}

.analytics-realtime-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.analytics-realtime-card .panel-heading {
  margin: 0;
}

.analytics-realtime-card .panel-heading > strong {
  color: var(--ink);
  font-size: 1.25rem;
}

.analytics-top-list {
  display: grid;
  gap: 8px;
}

.analytics-top-list div {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.analytics-top-list span {
  color: var(--ink);
}

.analytics-top-list b {
  white-space: nowrap;
}

.analytics-ranked-list {
  display: grid;
  gap: 8px;
}

.analytics-ranked-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.analytics-ranked-list span {
  min-width: 0;
  color: var(--ink);
  font-weight: 800;
}

.analytics-ranked-list b {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

.analytics-ai-summary-card {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.analytics-ai-summary-card p,
.analytics-ai-summary-card ul {
  margin: 0;
}

.analytics-ai-summary-card h3 {
  margin: 6px 0 0;
  font-size: 0.92rem;
}

.analytics-table-panel,
.analytics-question-panel,
.analytics-breakdown-card {
  padding: 14px;
}

.survey-dashboard-notice {
  margin: 0;
}

.survey-export-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.selected-survey-ad-summary {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--primary));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.selected-survey-ad-summary .panel-heading {
  margin: 0;
}

.selected-survey-ad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.selected-survey-ad-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.selected-survey-ad-grid span,
.selected-survey-ad-note {
  color: var(--muted);
}

.selected-survey-ad-grid strong {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-survey-ad-note {
  margin: 0;
  font-weight: 800;
}

.analytics-link-button {
  border: 0;
  padding: 0;
  background: none;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-align: left;
}

.analytics-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.survey-audience-insights {
  display: grid;
  gap: 12px;
}

.survey-audience-insights .panel-heading {
  margin: 0;
}

.analytics-breakdown-card {
  display: grid;
  gap: 12px;
}

.analytics-breakdown-card h3,
.analytics-question-card h3 {
  margin: 0;
}

.analytics-question-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.analytics-bar-list,
.analytics-answer-list {
  display: grid;
  gap: 10px;
}

.analytics-bar-row,
.analytics-answer-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(110px, 1fr) 54px;
  gap: 10px;
}

.analytics-answer-row {
  grid-template-columns: minmax(130px, 0.85fr) minmax(120px, 1fr) 54px 52px;
}

.analytics-bar-row span,
.analytics-answer-row span {
  color: var(--ink);
  font-weight: 800;
}

.analytics-bar-row div,
.analytics-answer-row div {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
}

.analytics-bar-row i,
.analytics-answer-row i {
  display: block;
  width: var(--bar-width);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--brand-gold));
}

.analytics-answer-row small {
  color: var(--muted);
}

.analytics-question-card {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.analytics-question-card + .analytics-question-card {
  margin-top: 14px;
}

.analytics-survey-top-ads-table th span,
.analytics-recent-survey-table td {
  min-width: 0;
}

.analytics-survey-top-ads-table th span,
.analytics-survey-top-ads-table th small {
  display: block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-survey-top-ads-table th small {
  color: var(--muted);
  font-weight: 700;
}

.analytics-detail-header {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.analytics-detail-header h3 {
  margin: 2px 0;
}

.analytics-detail-header p {
  margin: 0;
  color: var(--muted);
}

.compact-empty {
  margin: 0;
}

@media (max-width: 1180px) {
  .advisor-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ai-summary-layout {
    grid-template-columns: 1fr;
  }

  .analytics-studio-header,
  .analytics-overview-grid {
    grid-template-columns: 1fr;
  }

  .analytics-range-controls {
    justify-content: flex-start;
  }

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

@media (max-width: 760px) {
  .advisor-kpi-grid,
  .ai-summary-layout,
  .analytics-kpi-grid,
  .analytics-breakdown-grid {
    grid-template-columns: 1fr;
  }

  .analytics-studio-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .analytics-studio-tab {
    white-space: nowrap;
  }

  .analytics-bar-row,
  .analytics-answer-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .analytics-mini-bars {
    grid-template-columns: repeat(24, minmax(3px, 1fr));
  }
}

/* Launch reliability: keep core shells bright, clickable, and inside the viewport after boot settles. */
body:not(.cinematic-booting) :where(.advertiser-public-shell, .advertiser-console, .app-shell, .admin-login-shell) {
  filter: none;
  opacity: 1;
}

.advertiser-public-shell,
.advertiser-console,
.advertiser-console > *,
.advertiser-tab-panel,
.advertiser-tabs,
.advertiser-metrics,
.advertiser-overview-grid,
.panel,
.metric-card {
  min-width: 0;
}

.advertiser-public-shell,
.advertiser-console {
  width: min(1360px, calc(100% - 30px));
}

.advertiser-metrics {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.advertiser-overview-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.advertiser-auth-panel .auth-split {
  grid-template-columns: 1fr;
  align-items: start;
}

.advertiser-auth-panel {
  position: static;
}

.advertiser-auth-panel .auth-form {
  align-content: start;
}

.advertiser-auth-panel .auth-form + .auth-form {
  margin-top: 2px;
  border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  padding-top: 16px;
}

.advertiser-auth-panel :where(label, input, select, button) {
  min-width: 0;
}

@media (max-width: 760px) {
  .advertiser-public-shell,
  .advertiser-console {
    width: min(100% - 20px, 1360px);
  }

  .advertiser-overview-intro {
    grid-template-columns: 1fr;
  }

  .advertiser-overview-intro h1 {
    font-size: clamp(1.55rem, 9vw, 2rem);
  }
}

/* Admin owner polish pass */
.admin-workspace {
  gap: 18px;
}

.admin-topbar {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) minmax(180px, 320px) auto;
  gap: 12px;
  align-items: center;
}

.admin-global-search-button {
  min-height: 40px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 999px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  color: var(--muted);
  font-weight: 900;
  text-align: left;
}

.admin-global-search-button:hover,
.admin-global-search-button:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  color: var(--ink);
  outline: none;
}

.admin-panel > .panel,
.admin-panel > .content-grid,
.admin-panel > .admin-stat-grid,
.admin-panel > .admin-hero {
  margin-bottom: 18px;
}

.admin-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.admin-stat-card {
  min-height: 108px;
  border-radius: 14px;
}

.admin-stat-card strong {
  letter-spacing: 0;
}

.admin-quick-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.admin-quick-action {
  display: grid;
  gap: 6px;
  min-height: 78px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 14px;
  padding: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 92%, transparent), color-mix(in srgb, var(--primary) 5%, transparent)),
    var(--surface-2);
  color: var(--ink);
  text-align: left;
  font: inherit;
}

.admin-quick-action span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.admin-quick-action:hover,
.admin-quick-action:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--line));
  transform: translateY(-1px);
  outline: none;
}

.admin-quick-action.is-primary {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
}

.admin-priority-badge {
  border-radius: 999px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-priority-badge.is-urgent {
  border-color: color-mix(in srgb, var(--red) 48%, var(--line));
  color: color-mix(in srgb, var(--red) 78%, var(--ink));
}

.admin-priority-badge.is-high {
  border-color: color-mix(in srgb, var(--amber) 48%, var(--line));
  color: color-mix(in srgb, var(--amber) 78%, var(--ink));
}

.admin-priority-badge.is-medium {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  color: var(--ink);
}

.admin-priority-badge.is-low {
  color: var(--muted);
}

.admin-monthly-close {
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 16px;
  padding: 14px;
  margin: 12px 0;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.admin-contact-basics {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.admin-table th,
.admin-table td {
  vertical-align: top;
}

.admin-table th strong {
  line-height: 1.25;
}

.admin-filter-row input,
.admin-filter-row select {
  min-width: 0;
}

@media (max-width: 980px) {
  .admin-topbar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .admin-global-search-button,
  .admin-top-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .admin-stat-grid,
  .admin-quick-action-grid {
    grid-template-columns: 1fr;
  }

  .admin-alert-filter-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  #adminUserFilterTabs {
    overflow: visible;
    flex-wrap: wrap;
  }
}

/* Simplified owner admin shell */
.admin-sidebar .admin-nav {
  gap: 8px;
}

.admin-sidebar-settings-link {
  justify-self: start;
  margin-top: 10px;
  padding-inline: 0;
}

.admin-topbar {
  gap: 14px;
  background-color: #0d1424;
  background-image: linear-gradient(135deg, rgba(19, 31, 52, 0.96), rgba(11, 17, 31, 0.98));
}

.admin-top-actions {
  min-width: 0;
}

.admin-panel[data-admin-panel="dashboard"] > .admin-stat-grid,
.admin-panel[data-admin-panel="money"] .admin-stat-grid,
.admin-panel[data-admin-panel="users"] > .admin-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.admin-panel[data-admin-panel="dashboard"] .admin-stat-card,
.admin-panel[data-admin-panel="money"] .admin-stat-card,
.admin-panel[data-admin-panel="users"] .admin-stat-card {
  min-height: 92px;
  padding: 14px;
}

.admin-panel[data-admin-panel="dashboard"] .panel,
.admin-panel[data-admin-panel="money"] .panel,
.admin-panel[data-admin-panel="ads"] .panel,
.admin-panel[data-admin-panel="users"] .panel {
  margin-top: 16px;
}

.admin-daily-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.admin-panel[data-admin-panel="settings"] .admin-inbox-toolbar,
.admin-panel[data-admin-panel="settings"] .admin-settings-form {
  display: none;
}

.admin-simple-settings-panel {
  display: block;
}

.admin-owner-kill-switch-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.admin-owner-kill-switch-form h3 {
  margin: 2px 0 4px;
  font-size: 1rem;
}

.admin-owner-kill-switch-form p {
  margin: 0;
  color: #94a3b8;
  font-size: 0.9rem;
}

.admin-owner-kill-switch-form .checkbox-line {
  justify-content: flex-start;
  gap: 10px;
  width: fit-content;
}

.admin-report-grid-secondary {
  margin-top: 14px;
}

.admin-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.admin-table th,
.admin-table td {
  white-space: normal;
}

.admin-table th span,
.admin-table td span,
.admin-table th small,
.admin-table td small {
  white-space: normal;
}

.admin-table {
  min-width: 820px;
  font-size: 0.84rem;
}

.admin-table-users,
.admin-table-campaigns,
.admin-table-billing,
.admin-table-payouts,
.admin-table-moneyLedger {
  min-width: 1120px;
}

.admin-table-moneyLedger {
  min-width: 1480px;
}

.admin-users-command-row {
  align-items: center;
  gap: 10px;
}

.admin-users-command-row input {
  flex: 1 1 380px;
  min-width: min(100%, 360px);
}

#adminUserFilterTabs {
  justify-content: flex-start;
  gap: 10px;
  overflow: visible;
}

#adminUserFilterTabs .admin-filter-chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding-inline: 12px;
  white-space: nowrap;
}

.admin-users-table-card {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.admin-users-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}

.admin-users-pagination label,
.admin-users-page-controls {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.admin-users-pagination select,
.admin-users-pagination input {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  background: var(--surface);
  color: var(--ink);
}

.admin-users-pagination input {
  width: 72px;
}

.admin-users-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 2px;
}

.admin-table-users {
  width: 100%;
  min-width: 1380px;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-table-users thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.admin-table-users th,
.admin-table-users td {
  min-height: 58px;
  padding: 14px 16px;
  vertical-align: top;
}

.admin-table-users tbody tr {
  min-height: 64px;
}

.admin-table-users .admin-user-main-cell {
  width: 230px;
  min-width: 230px;
  max-width: 270px;
}

.admin-table-users .admin-user-email-cell {
  width: 260px;
  min-width: 260px;
  max-width: 320px;
}

.admin-table-users .admin-date-cell {
  width: 138px;
  min-width: 138px;
  white-space: nowrap;
}

.admin-table-users .admin-money-cell {
  width: 140px;
  min-width: 140px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-table-users .admin-status-cell {
  width: 146px;
  min-width: 146px;
}

.admin-table-users .admin-actions-cell {
  width: 154px;
  min-width: 154px;
  white-space: nowrap;
}

.admin-sort-header {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.admin-sort-header.is-active {
  color: var(--brand-mint);
}

.admin-user-main-cell strong,
.admin-user-main-cell span,
.admin-user-main-cell small,
.admin-user-email-cell strong,
.admin-user-email-cell small {
  display: block;
}

.admin-user-main-cell strong,
.admin-user-email-cell strong {
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.admin-user-main-cell span,
.admin-user-main-cell small,
.admin-user-email-cell small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.3;
}

.admin-user-main-cell small,
.admin-user-email-cell strong {
  overflow-wrap: anywhere;
}

.admin-table-users .admin-status-group {
  justify-content: flex-start;
}

.admin-table-users .status-badge {
  max-width: 132px;
}

.admin-table-users .admin-table-actions {
  justify-content: flex-start;
}

.admin-table-users .admin-action-menu summary,
.admin-table-users .admin-table-actions > .text-button {
  min-height: 34px;
  padding: 7px 10px;
}

.admin-drawer-actions {
  margin-top: 10px;
}

.admin-drawer-form {
  display: grid;
  gap: 14px;
}

.admin-drawer-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.admin-drawer-form input,
.admin-drawer-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--ink);
}

.admin-drawer-form textarea {
  min-height: 140px;
  line-height: 1.45;
}

.admin-drawer-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.admin-table th,
.admin-table td {
  padding: 9px 10px;
  line-height: 1.35;
}

.admin-table tbody tr {
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.admin-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.admin-table th strong,
.admin-table td strong {
  display: inline-block;
  max-width: 100%;
}

.admin-table th span,
.admin-table td span,
.admin-table th small,
.admin-table td small {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-table.admin-table-users th,
.admin-table.admin-table-users td {
  padding: 14px 16px;
  vertical-align: top;
}

.admin-table.admin-table-users th span,
.admin-table.admin-table-users td span,
.admin-table.admin-table-users th small,
.admin-table.admin-table-users td small {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

.admin-table.admin-table-users .admin-user-main-cell strong,
.admin-table.admin-table-users .admin-user-main-cell span,
.admin-table.admin-table-users .admin-user-main-cell small,
.admin-table.admin-table-users .admin-user-email-cell strong,
.admin-table.admin-table-users .admin-user-email-cell small {
  white-space: normal;
  overflow-wrap: anywhere;
}

.admin-status-group {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.admin-status-group .status-badge {
  max-width: 160px;
}

.admin-status-group .status-badge,
.admin-table .status-badge {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-table-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.admin-action-menu {
  position: relative;
  min-width: 0;
}

.admin-action-menu summary {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
  list-style: none;
}

.admin-action-menu summary::-webkit-details-marker {
  display: none;
}

.admin-action-menu summary::after {
  content: "...";
  margin-left: 5px;
  color: var(--muted);
}

.admin-action-menu[open] summary {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.admin-action-menu-panel {
  display: grid;
  gap: 5px;
  min-width: 150px;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px;
  background: var(--surface);
  box-shadow: var(--soft-shadow);
}

.admin-action-menu-panel .text-button,
.admin-action-menu-panel .primary-button {
  width: 100%;
  justify-content: flex-start;
  min-height: 30px;
  padding: 5px 8px;
  font-size: 0.76rem;
}

.admin-table-actions > .text-button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 0.78rem;
}

.admin-ad-command-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 10px;
  margin: 14px 0;
  min-width: 0;
}

.admin-ad-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
  min-height: 74px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 12px;
  padding: 11px 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 92%, transparent), color-mix(in srgb, var(--primary) 5%, transparent)),
    var(--surface-2);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.admin-ad-command-card span,
.admin-ad-command-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-ad-command-card span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.18;
  white-space: normal;
}

.admin-ad-command-card strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--primary);
  font-size: 1.28rem;
  line-height: 1;
}

.admin-ad-command-action {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface-2)), color-mix(in srgb, var(--primary) 8%, var(--surface))),
    var(--surface-2);
}

.admin-ad-command-action strong {
  max-width: 120px;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
  text-align: right;
}

.admin-ad-command-card small {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.admin-ad-command-card:hover,
.admin-ad-command-card:focus-visible,
.admin-ad-command-card.is-active {
  border-color: color-mix(in srgb, var(--primary) 54%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--surface-2)), color-mix(in srgb, var(--accent) 9%, var(--surface))),
    var(--surface-2);
  outline: none;
}

.admin-ad-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 10px;
  min-width: 0;
}

.admin-approval-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.admin-approval-actions > .text-button,
.admin-approval-actions > .primary-button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 0.78rem;
}

.admin-approval-actions .admin-table-actions {
  justify-content: flex-start;
}

.admin-review-automation-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--surface-2)), color-mix(in srgb, var(--accent) 7%, var(--surface))),
    var(--surface-2);
}

.admin-review-automation-toolbar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-review-automation-toolbar > div:first-child {
  display: grid;
  gap: 4px;
  min-width: min(100%, 320px);
}

.admin-review-automation-toolbar strong {
  font-size: 1rem;
}

.admin-review-automation-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.admin-review-recommendation {
  display: grid;
  gap: 8px;
}

.admin-review-recommendation > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-review-recommendation p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.admin-review-check-list,
.admin-review-email-list,
.admin-review-warning-list {
  display: grid;
  gap: 8px;
}

.admin-review-check,
.admin-review-email-list article,
.admin-review-warning-list p {
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
}

.admin-review-check {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.admin-review-check p,
.admin-review-email-list p,
.admin-review-warning-list p {
  margin: 0;
}

.admin-review-check p {
  grid-column: 1 / -1;
  color: var(--muted);
  line-height: 1.35;
}

.admin-review-check small {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  font-size: 0.76rem;
  line-height: 1.35;
}

.admin-review-check.is-warning,
.admin-review-check.is-manual_review,
.admin-review-check.is-simulated,
.admin-review-check.is-requires_staging,
.admin-review-check.is-requires_production,
.admin-review-check.is-external_provider_required,
.admin-review-warning-list .is-warning {
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
  background: color-mix(in srgb, var(--amber) 9%, var(--surface));
}

.admin-review-check.is-critical,
.admin-review-check.is-blocked,
.admin-review-check.is-failed,
.admin-review-warning-list .is-critical {
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
  background: color-mix(in srgb, var(--red) 9%, var(--surface));
}

.admin-review-check.is-passed {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
}

.admin-review-warning-list p {
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: start;
  color: var(--ink);
  line-height: 1.35;
}

.admin-review-email-list article small,
.admin-review-email-list article p {
  color: var(--muted);
  line-height: 1.35;
}

.admin-review-ledger-wrap {
  margin-top: 10px;
}

.admin-table-automation-ledger {
  min-width: 760px;
}

.admin-table-automation-ledger th,
.admin-table-automation-ledger td {
  padding: 10px 12px;
  white-space: nowrap;
}

.admin-table-automation-ledger th span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
}

.admin-review-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.admin-review-progress-copy {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}

.admin-review-scan-progress {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 76%, var(--surface));
}

.admin-review-scan-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-review-scan-progress-head strong,
.admin-review-scan-progress-head span {
  display: block;
}

.admin-review-scan-progress-head > span {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-review-progress-meter {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 74%, #111827);
}

.admin-review-progress-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 260ms ease;
}

.admin-review-progress-meter.is-running span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.42), transparent);
  animation: admin-review-progress-sheen 1.8s ease-in-out infinite;
}

.admin-review-scan-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.admin-review-scan-progress-grid span {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-review-scan-progress-grid .admin-review-scan-message {
  grid-column: 1 / -1;
}

.admin-review-scan-progress-grid strong {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-review-scan-progress p,
.admin-review-scan-progress small {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.admin-review-scan-progress p {
  font-weight: 800;
}

.admin-review-live-update {
  color: rgba(226, 232, 240, 0.82);
}

.admin-review-stale-progress,
.admin-review-poll-warning,
.admin-scanner-validation-active {
  color: #facc15;
  font-weight: 800;
}

.admin-scanner-validation-actions {
  align-items: center;
  gap: 0.5rem;
}

.admin-review-step-list-wrap {
  display: grid;
  gap: 8px;
  max-height: min(620px, 58vh);
  overflow: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.admin-review-step-list-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 6px 0;
  background: color-mix(in srgb, var(--surface-2) 82%, var(--surface));
}

.admin-review-step-list-toolbar span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-review-step-list {
  display: grid;
  gap: 7px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.admin-review-step-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.admin-review-step-marker,
.admin-review-step-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-review-step-marker {
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.admin-review-step-status {
  min-width: 64px;
  padding: 0 8px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
}

.admin-review-step-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-review-step-copy strong,
.admin-review-step-copy small {
  overflow-wrap: anywhere;
}

.admin-review-step-copy strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.admin-review-step-copy small {
  color: var(--muted);
  line-height: 1.35;
}

.admin-review-step-item.is-complete {
  border-color: color-mix(in srgb, var(--success) 34%, var(--line));
}

.admin-review-step-item.is-complete .admin-review-step-marker,
.admin-review-step-item.is-complete .admin-review-step-status {
  color: color-mix(in srgb, var(--success) 88%, var(--ink));
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
}

.admin-review-step-item.is-current {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 70%, transparent);
}

.admin-review-step-item.is-current .admin-review-step-marker,
.admin-review-step-item.is-current .admin-review-step-status {
  color: color-mix(in srgb, var(--primary) 86%, var(--ink));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

.admin-review-step-item.is-current .admin-review-step-marker::after {
  display: block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  animation: admin-review-current-pulse 1.6s ease-in-out infinite;
}

.admin-review-step-item.is-failed {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.admin-review-step-item.is-failed .admin-review-step-marker,
.admin-review-step-item.is-failed .admin-review-step-status {
  color: color-mix(in srgb, var(--danger) 88%, var(--ink));
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
}

.admin-review-main-scan-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 220px) auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 82%, var(--primary) 7%);
}

.admin-review-main-scan-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-review-main-scan-copy strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.2;
}

.admin-review-main-scan-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-review-main-scan-meter {
  position: relative;
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, #111827);
}

.admin-review-main-scan-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 260ms ease;
}

.admin-review-subsection {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.admin-review-subsection h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.2;
}

.admin-review-subsection.is-danger {
  border-top-color: color-mix(in srgb, var(--red) 52%, var(--line));
}

.admin-section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.admin-section-title-row p {
  margin: 4px 0 0;
}

.admin-review-google-card {
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.admin-review-subsection.is-danger .admin-review-google-card,
.admin-table tr.is-danger td {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
}

.admin-url-cell {
  display: inline-block;
  max-width: min(520px, 70vw);
  overflow-wrap: anywhere;
}

.admin-review-history-row {
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 8px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.admin-review-history-row summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.admin-review-history-row summary::-webkit-details-marker {
  display: none;
}

.admin-review-history-row summary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-review-history-row p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-campaign-review-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  max-width: 100%;
}

.admin-campaign-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 6px;
  padding: 3px 6px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: normal;
}

.admin-campaign-review-badge strong {
  display: inline;
  color: var(--ink);
  font-size: inherit;
  line-height: inherit;
}

.admin-campaign-review-badge.is_passed,
.admin-campaign-review-badge.is_no_known_threat,
.admin-campaign-review-badge.is_yes {
  border-color: color-mix(in srgb, var(--success) 38%, var(--line));
  color: color-mix(in srgb, var(--success) 78%, var(--ink));
}

.admin-campaign-review-badge.is_needs_review,
.admin-campaign-review-badge.is_request_changes,
.admin-campaign-review-badge.is_scanner_blocked,
.admin-campaign-review-badge.is_unavailable,
.admin-campaign-review-badge.is_medium {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
  color: color-mix(in srgb, var(--warning) 78%, var(--ink));
}

.admin-campaign-review-badge.is_failed,
.admin-campaign-review-badge.is_known_malicious,
.admin-campaign-review-badge.is_high,
.admin-campaign-review-badge.is_critical,
.admin-campaign-review-badge.is_no {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
  color: color-mix(in srgb, var(--danger) 82%, var(--ink));
}

.admin-campaign-review-badge.is_running,
.admin-campaign-review-badge.is_queued,
.admin-campaign-review-badge.is_pending_scan {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  color: color-mix(in srgb, var(--primary) 80%, var(--ink));
}

@media (max-width: 760px) {
  .admin-review-main-scan-strip {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-review-main-scan-meter {
    grid-column: 1 / -1;
    order: 3;
  }

  .admin-review-step-item {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .admin-review-step-status {
    grid-column: 2;
    justify-self: start;
  }
}

@keyframes admin-review-progress-sheen {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes admin-review-current-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.88);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-review-step-list-wrap {
    scroll-behavior: auto;
  }

  .admin-review-progress-meter.is-running span::after,
  .admin-review-step-item.is-current .admin-review-step-marker::after {
    animation: none;
  }
}

.admin-campaign-command-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.admin-campaign-command-card {
  display: grid;
  gap: 6px;
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.admin-campaign-command-card strong {
  font-size: 1.35rem;
  line-height: 1;
}

.admin-campaign-command-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.25;
}

.admin-campaign-command-card.is-success {
  border-color: color-mix(in srgb, var(--success) 42%, var(--line));
}

.admin-campaign-command-card.is-warning {
  border-color: color-mix(in srgb, var(--warning) 46%, var(--line));
}

.admin-campaign-command-card.is-danger {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line));
}

.admin-campaign-command-filters,
.admin-campaign-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}

.admin-campaign-command-filters label {
  display: grid;
  gap: 5px;
  min-width: 138px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-campaign-command-filters select {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  background: var(--surface);
  color: var(--ink);
}

.admin-campaign-bulk-toolbar {
  justify-content: space-between;
  align-items: center;
}

.admin-campaign-bulk-toolbar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-campaign-bulk-toolbar span {
  color: var(--muted);
  font-size: 0.78rem;
}

.admin-ad-select-cell {
  width: 64px;
  min-width: 64px;
  text-align: center;
}

.admin-campaign-next-cell {
  width: 220px;
  min-width: 220px;
}

.admin-campaign-next-cell strong,
.admin-campaign-next-cell small {
  display: block;
  overflow-wrap: anywhere;
}

.admin-campaign-command-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 96%, rgba(8, 12, 20, 0.42));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.admin-campaign-command-header h3,
.admin-next-action-panel h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.admin-campaign-command-header p,
.admin-next-action-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.admin-campaign-command-metrics,
.admin-next-action-grid,
.admin-safety-pillar-grid,
.admin-command-two-column {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.admin-overview-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 12px;
  align-items: start;
}

.admin-overview-scan-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-overview-scan-panel .admin-review-scan-progress {
  margin-top: 0;
}

.admin-overview-scan-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@media (max-width: 900px) {
  .admin-overview-command-grid {
    grid-template-columns: 1fr;
  }
}

.admin-campaign-command-metrics span,
.admin-next-action-grid article,
.admin-command-info-card,
.admin-automation-status-card,
.admin-safety-pillar,
.admin-advertiser-message-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.admin-campaign-command-metrics strong,
.admin-campaign-command-metrics small,
.admin-next-action-grid strong,
.admin-next-action-grid span {
  display: block;
}

.admin-campaign-command-metrics small,
.admin-next-action-grid span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
}

.admin-campaign-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-command-blocked-reason {
  border-left: 3px solid var(--warning);
  padding-left: 10px;
}

.admin-campaign-detail-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.admin-campaign-detail-tabs a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
}

.admin-campaign-detail-tabs a:hover,
.admin-campaign-detail-tabs a:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--line));
  color: var(--ink);
}

.admin-next-action-panel,
.admin-campaign-command-section {
  display: grid;
  gap: 12px;
}

.admin-alert-inline.is-danger {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line));
}

.admin-command-task-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.admin-message-draft {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-message-draft textarea {
  width: 100%;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}

.admin-safety-pillar {
  display: grid;
  gap: 10px;
  align-content: start;
}

.admin-safety-pillar h4,
.admin-command-info-card h4 {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.25;
}

.admin-safety-pillar p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.admin-command-checklist {
  display: grid;
  gap: 8px;
}

.admin-command-checklist label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--ink);
  font-size: 0.82rem;
}

.admin-evidence-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 20;
  pointer-events: auto;
}

.admin-evidence-toolbar .is-active {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
  color: var(--ink);
}

.admin-evidence-toolbar button {
  flex: 0 1 auto;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.admin-evidence-review {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.admin-evidence-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.admin-evidence-card {
  display: grid;
  gap: 8px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.admin-evidence-card[hidden] {
  display: none !important;
}

.admin-evidence-empty {
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--muted);
  font-weight: 800;
}

.admin-evidence-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--surface);
}

.admin-evidence-card figcaption {
  display: grid;
  gap: 4px;
  padding: 10px;
}

.admin-screenshot-experience {
  gap: 14px;
}

.admin-screenshot-note {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--line));
  border-radius: 8px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.admin-screenshot-groups {
  display: grid;
  gap: 14px;
}

.admin-screenshot-group {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.admin-screenshot-collapsible-group {
  border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--line));
  border-radius: 8px;
  padding: 9px;
  background: color-mix(in srgb, var(--warning) 6%, var(--surface));
}

.admin-screenshot-collapsible-group > summary {
  cursor: pointer;
  list-style: none;
}

.admin-screenshot-collapsible-group > summary::-webkit-details-marker {
  display: none;
}

.admin-screenshot-collapsible-group[open] > summary {
  margin-bottom: 9px;
}

.admin-screenshot-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-screenshot-group-heading h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.2;
}

.admin-screenshot-group-heading span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
}

.admin-screenshot-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.admin-screenshot-card {
  position: relative;
}

.admin-screenshot-card.is-blocked {
  border-color: color-mix(in srgb, var(--danger) 56%, var(--line));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--danger) 76%, transparent);
}

.admin-screenshot-card.is-suspicious {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--line));
}

.admin-screenshot-thumb {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
  text-align: left;
}

.admin-screenshot-thumb:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.admin-screenshot-blocker-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  border-radius: 999px;
  padding: 4px 7px;
  background: color-mix(in srgb, var(--danger) 86%, #000 14%);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-screenshot-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.admin-screenshot-card-title strong {
  color: var(--ink);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.admin-screenshot-related-button {
  width: max-content;
  margin-top: 2px;
}

.admin-evidence-card small,
.admin-evidence-card span {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-evidence-technical-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.admin-evidence-technical-groups article {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}

.admin-evidence-technical-groups span {
  color: var(--muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.admin-review-cta-evidence-section {
  scroll-margin-top: 18px;
}

.is-admin-evidence-focus {
  animation: adminEvidenceFocusPulse 1.4s ease-out;
}

@keyframes adminEvidenceFocusPulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 42%, transparent);
  }
  100% {
    box-shadow: 0 0 0 12px transparent;
  }
}

.admin-review-cta-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.admin-review-cta-stat-grid article {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.admin-review-cta-stat-grid span,
.admin-review-cta-path-details dt {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-review-cta-stat-grid strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.admin-review-cta-path-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-review-cta-path-card {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.85fr);
  gap: 12px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  scroll-margin-top: 16px;
}

.admin-review-cta-path-card.is-warning,
.admin-review-cta-path-card.is-needs_admin_review {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--line));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warning) 62%, transparent);
}

.admin-review-cta-path-card.is-blocked {
  border-color: color-mix(in srgb, var(--danger) 56%, var(--line));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--danger) 72%, transparent);
}

.admin-review-cta-path-main,
.admin-review-cta-path-head,
.admin-review-cta-path-details,
.admin-review-cta-url-stack {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-review-cta-path-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.admin-review-cta-path-head h4 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.admin-review-cta-path-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.admin-review-cta-path-details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-review-cta-path-details div,
.admin-review-cta-url-stack div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-review-cta-path-details dd {
  margin: 0;
  min-width: 0;
}

.admin-review-url-inspector {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
}

.admin-review-url-value {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-review-url-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: max-content;
}

.admin-review-url-disabled {
  align-self: center;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-review-cta-warning,
.admin-review-cta-missing-screenshot {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--line));
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.35;
}

.admin-review-cta-missing-screenshot {
  border-color: color-mix(in srgb, var(--line) 86%, transparent);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  color: var(--muted);
  font-weight: 800;
}

.admin-review-cta-mini-details {
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.admin-review-cta-mini-details > summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.admin-review-cta-mini-details > summary::-webkit-details-marker {
  display: none;
}

.admin-review-cta-mini-details[open] > summary {
  margin-bottom: 8px;
}

.admin-review-cta-mini-details span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-review-cta-screenshot {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-review-cta-screenshot-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-review-cta-screenshot .admin-screenshot-card {
  height: 100%;
}

.admin-screenshot-lightbox {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 6, 14, 0.86);
  backdrop-filter: blur(8px);
}

.admin-screenshot-lightbox.is-hidden {
  display: none;
}

.admin-screenshot-lightbox-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  width: min(1600px, 98vw);
  max-height: 96vh;
  border: 1px solid color-mix(in srgb, var(--line) 80%, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 94%, #02060e 18%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.48);
}

.admin-screenshot-lightbox-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.admin-screenshot-lightbox-header h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.admin-screenshot-lightbox-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-screenshot-lightbox-stage {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 10px;
  min-height: 0;
}

.admin-screenshot-lightbox-stage figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.admin-screenshot-lightbox-stage img {
  display: block;
  align-self: center;
  justify-self: center;
  max-width: 100%;
  max-height: calc(96vh - 220px);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 6px;
  background: var(--surface);
  object-fit: contain;
}

.admin-screenshot-lightbox-stage figcaption {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.admin-screenshot-lightbox-stage figcaption strong {
  color: var(--ink);
}

.admin-screenshot-lightbox-stage figcaption span,
.admin-screenshot-lightbox-stage figcaption small {
  overflow-wrap: anywhere;
}

.admin-screenshot-lightbox-arrow {
  align-self: stretch;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  color: var(--ink);
  font-size: 2.5rem;
  font-weight: 500;
  cursor: pointer;
}

.admin-screenshot-lightbox-arrow:hover,
.admin-screenshot-lightbox-arrow:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

.admin-screenshot-lightbox-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.admin-screenshot-lightbox-strip button {
  position: relative;
  flex: 0 0 74px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 7px;
  padding: 0;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
}

.admin-screenshot-lightbox-strip button.is-active {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

.admin-screenshot-lightbox-strip img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.admin-screenshot-lightbox-strip span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  border-radius: 999px;
  padding: 2px 5px;
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-drawer[data-drawer-view="campaign"] .admin-drawer-panel {
  width: min(1500px, calc(100vw - 20px));
  max-width: 100vw;
}

.admin-drawer[data-drawer-view="campaign"] :where(.admin-drawer-body, .admin-drawer-content) {
  overflow-x: hidden;
}

.admin-drawer[data-drawer-view="campaign"] :where(
  .admin-review-report-layout,
  .admin-review-report-main,
  .admin-review-report-section,
  .admin-review-report-details,
  .admin-owner-summary-card,
  .admin-owner-cockpit-section,
  .admin-owner-finding-card,
  .admin-review-cockpit-section,
  .admin-evidence-review,
  .admin-evidence-toolbar,
  .admin-evidence-gallery,
  .admin-screenshot-experience,
  .admin-screenshot-groups,
  .admin-screenshot-group,
  .admin-screenshot-card
) {
  min-width: 0;
  max-width: 100%;
}

.admin-drawer[data-drawer-view="campaign"] :where(
  .admin-review-report-details,
  .admin-owner-summary-card,
  .admin-owner-cockpit-section,
  .admin-owner-evidence-drawer,
  .admin-review-cockpit-section,
  .admin-evidence-review,
  .admin-screenshot-experience,
  .admin-screenshot-group
) {
  grid-template-columns: minmax(0, 1fr);
}

.admin-drawer[data-drawer-view="campaign"] :where(
  .admin-review-report-details > *,
  .admin-owner-summary-card > *,
  .admin-owner-cockpit-section > *,
  .admin-owner-evidence-drawer > *,
  .admin-review-cockpit-section > *,
  .admin-evidence-review > *,
  .admin-screenshot-experience > *,
  .admin-screenshot-group > *
) {
  min-width: 0;
  max-width: 100%;
}

.admin-drawer[data-drawer-view="campaign"] .admin-review-report-rail {
  z-index: 60;
  isolation: isolate;
  pointer-events: auto;
}

.admin-drawer[data-drawer-view="campaign"] .admin-review-decision-panel {
  position: relative;
  z-index: 61;
  pointer-events: auto;
}

.admin-drawer[data-drawer-view="campaign"] .admin-review-decision-panel :where(button, .admin-row-actions) {
  pointer-events: auto;
}

.admin-drawer[data-drawer-view="campaign"] .admin-review-report-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.admin-scan-history-list .admin-review-history-row {
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.admin-table-adsApprovals {
  min-width: 1160px;
}

#adminAdsTabs {
  justify-content: flex-start;
  gap: 10px;
  overflow: visible;
}

#adminAdsTabs .admin-filter-chip,
.admin-ad-filter-row .admin-filter-chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding-inline: 12px;
  white-space: nowrap;
}

#adminAdsSearchRow {
  justify-content: stretch;
}

#adminAdsSearchRow input {
  flex: 1 1 540px;
  min-width: min(100%, 320px);
}

.admin-ad-filter-row {
  gap: 9px 10px;
  margin-bottom: 14px;
}

.admin-ad-directory-card {
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.admin-ad-directory-toolbar,
.admin-ad-directory-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}

.admin-ad-directory-toolbar > div {
  display: grid;
  gap: 3px;
  min-width: min(100%, 320px);
}

.admin-ad-directory-toolbar strong {
  font-size: 0.96rem;
}

.admin-ad-directory-toolbar span,
.admin-ad-directory-footer span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.admin-ad-directory-toolbar label,
.admin-ad-page-controls {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-ad-directory-toolbar label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-ad-directory-toolbar select {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  background: var(--surface);
  color: var(--ink);
}

.admin-ad-page-controls {
  justify-content: flex-end;
}

.admin-ad-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
}

.admin-table-advertiser-directory,
.admin-table-campaign-directory,
.admin-table-advertiser-campaigns {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-table-advertiser-directory {
  min-width: 980px;
}

.admin-table-campaign-directory {
  min-width: 1120px;
}

.admin-table-advertiser-campaigns {
  min-width: 1120px;
}

.admin-table-advertiser-directory thead th,
.admin-table-campaign-directory thead th,
.admin-table-advertiser-campaigns thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.admin-table-advertiser-directory th,
.admin-table-advertiser-directory td,
.admin-table-campaign-directory th,
.admin-table-campaign-directory td,
.admin-table-advertiser-campaigns th,
.admin-table-advertiser-campaigns td {
  min-height: 64px;
  padding: 14px 16px;
  vertical-align: top;
}

.admin-table-advertiser-directory th span,
.admin-table-advertiser-directory td span,
.admin-table-advertiser-directory th small,
.admin-table-advertiser-directory td small,
.admin-table-campaign-directory th span,
.admin-table-campaign-directory td span,
.admin-table-campaign-directory th small,
.admin-table-campaign-directory td small,
.admin-table-advertiser-campaigns th span,
.admin-table-advertiser-campaigns td span,
.admin-table-advertiser-campaigns th small,
.admin-table-advertiser-campaigns td small {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

.admin-advertiser-main-cell,
.admin-campaign-main-cell {
  width: 240px;
  min-width: 240px;
  max-width: 310px;
}

.admin-advertiser-email-cell {
  width: 270px;
  min-width: 270px;
  max-width: 340px;
}

.admin-campaign-url-cell {
  width: 250px;
  min-width: 250px;
  max-width: 330px;
}

.admin-ad-date-cell {
  width: 142px;
  min-width: 142px;
  white-space: nowrap;
}

.admin-ad-count-cell {
  width: 116px;
  min-width: 116px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-ad-money-cell {
  width: 150px;
  min-width: 150px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-ad-status-cell {
  width: 150px;
  min-width: 150px;
}

.admin-ad-actions-cell {
  width: 190px;
  min-width: 190px;
  white-space: nowrap;
}

.admin-advertiser-main-cell strong,
.admin-advertiser-main-cell span,
.admin-advertiser-main-cell small,
.admin-advertiser-email-cell strong,
.admin-advertiser-email-cell small,
.admin-campaign-main-cell strong,
.admin-campaign-main-cell span,
.admin-campaign-main-cell small,
.admin-campaign-url-cell strong,
.admin-campaign-url-cell small,
.admin-ad-count-cell strong,
.admin-ad-count-cell small,
.admin-ad-money-cell strong,
.admin-ad-money-cell small {
  display: block;
}

.admin-advertiser-main-cell strong,
.admin-advertiser-email-cell strong,
.admin-campaign-main-cell strong,
.admin-campaign-url-cell strong {
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.admin-cell-link {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-cell-link:hover strong,
.admin-cell-link:focus-visible strong {
  color: var(--primary);
}

.admin-cell-link:focus-visible {
  border-radius: 6px;
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 3px;
}

.admin-advertiser-main-cell span,
.admin-advertiser-main-cell small,
.admin-advertiser-email-cell small,
.admin-campaign-main-cell span,
.admin-campaign-main-cell small,
.admin-campaign-url-cell small,
.admin-ad-count-cell small,
.admin-ad-money-cell small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
}

.admin-table-advertiser-directory .admin-status-group,
.admin-table-campaign-directory .admin-status-group,
.admin-table-advertiser-campaigns .admin-status-group {
  justify-content: flex-start;
}

.admin-table-advertiser-directory .status-badge,
.admin-table-campaign-directory .status-badge,
.admin-table-advertiser-campaigns .status-badge {
  max-width: 142px;
}

.admin-table-advertiser-directory .admin-table-actions,
.admin-table-campaign-directory .admin-table-actions,
.admin-table-advertiser-campaigns .admin-table-actions {
  justify-content: flex-start;
}

.admin-table-advertiser-directory .admin-action-menu summary,
.admin-table-advertiser-directory .admin-table-actions > .text-button,
.admin-table-campaign-directory .admin-action-menu summary,
.admin-table-campaign-directory .admin-table-actions > .text-button,
.admin-table-advertiser-campaigns .admin-action-menu summary,
.admin-table-advertiser-campaigns .admin-table-actions > .text-button {
  min-height: 34px;
  padding: 7px 10px;
}

.admin-ad-drawer-table-wrap {
  margin-top: 8px;
}

.admin-ops-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.admin-ops-layout:not(.has-detail) .admin-ops-detail-pane.is-empty {
  display: none;
}

.admin-ops-list-pane,
.admin-ops-detail-pane {
  min-width: 0;
}

.admin-ops-detail-pane {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.admin-ops-detail-pane.is-empty {
  color: var(--muted);
  box-shadow: none;
}

.admin-ops-detail-pane.is-empty strong,
.admin-ops-detail-pane.is-empty span {
  display: block;
}

.admin-ops-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.admin-ops-detail-header h3 {
  margin: 2px 0 4px;
  font-size: 1.1rem;
  line-height: 1.2;
}

.admin-ops-detail-header p {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.admin-ops-detail-actions,
.admin-ops-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.admin-ops-detail-tabs {
  justify-content: flex-start;
  padding-bottom: 4px;
}

.admin-ops-detail-tabs button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 11px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.admin-ops-detail-tabs button.is-active,
.admin-ops-detail-tabs button:focus-visible,
.admin-ops-detail-tabs button:hover {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--line));
  color: var(--ink);
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-2));
}

.admin-ops-detail-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.admin-directory-updating {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line));
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-table-ops-dense th,
.admin-table-ops-dense td {
  min-height: 46px;
  padding: 9px 10px;
  vertical-align: top;
}

.admin-table-users.admin-table-ops-dense {
  min-width: 1180px;
}

.admin-table-ops-dense tbody tr.is-selected {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 72%, transparent);
}

.admin-table-ops-dense tbody tr:focus-within {
  outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  outline-offset: -2px;
}

.admin-ops-main-cell {
  width: 260px;
  min-width: 220px;
  max-width: 330px;
}

.admin-ops-contact-cell {
  width: 220px;
  min-width: 180px;
  max-width: 300px;
}

.admin-ops-status-cell {
  width: 150px;
  min-width: 130px;
}

.admin-ops-scan-cell {
  width: 190px;
  min-width: 170px;
}

.admin-ops-money-cell,
.admin-ops-count-cell {
  width: 120px;
  min-width: 110px;
  font-variant-numeric: tabular-nums;
}

.admin-ops-date-cell {
  width: 150px;
  min-width: 132px;
}

.admin-ops-actions-cell {
  width: 150px;
  min-width: 142px;
}

.admin-ops-main-cell strong,
.admin-ops-main-cell span,
.admin-ops-main-cell small,
.admin-ops-contact-cell strong,
.admin-ops-contact-cell small,
.admin-ops-status-cell small,
.admin-ops-scan-cell small,
.admin-ops-money-cell strong,
.admin-ops-money-cell small,
.admin-ops-count-cell strong,
.admin-ops-count-cell small,
.admin-ops-date-cell strong,
.admin-ops-date-cell small {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.admin-ops-main-cell strong,
.admin-ops-contact-cell strong,
.admin-ops-money-cell strong,
.admin-ops-count-cell strong,
.admin-ops-date-cell strong {
  line-height: 1.22;
}

.admin-ops-main-cell span,
.admin-ops-main-cell small,
.admin-ops-contact-cell small,
.admin-ops-status-cell small,
.admin-ops-scan-cell small,
.admin-ops-money-cell small,
.admin-ops-count-cell small,
.admin-ops-date-cell small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

@media (min-width: 1180px) {
  .admin-ops-layout.has-detail {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  }

  .admin-ops-detail-pane {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 28px);
    overflow: auto;
  }
}

@media (max-width: 780px) {
  .admin-ops-detail-header {
    grid-template-columns: 1fr;
  }

  .admin-ops-detail-actions {
    justify-content: flex-start;
  }

  .admin-table-campaign-directory,
  .admin-table-advertiser-directory,
  .admin-table-users {
    min-width: 860px;
  }
}

.admin-empty-state {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

@media (max-width: 980px) {
  .admin-topbar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .admin-top-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .admin-panel[data-admin-panel="dashboard"] > .admin-stat-grid,
  .admin-panel[data-admin-panel="money"] .admin-stat-grid,
  .admin-panel[data-admin-panel="users"] > .admin-stat-grid,
  .admin-daily-summary-grid {
    grid-template-columns: 1fr;
  }

  .admin-ad-command-strip {
    grid-template-columns: 1fr;
  }

  .admin-approval-actions,
  .admin-table-actions {
    justify-content: flex-start;
  }
}
.strict-attention-setup {
  border-color: rgba(250, 204, 21, 0.32);
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.08), rgba(56, 189, 248, 0.05));
}

.strict-attention-toggle span {
  display: grid;
  gap: 0.25rem;
}

.campaign-pill.is-strict,
.campaign-tag.is-strict {
  border-color: rgba(250, 204, 21, 0.45);
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
}

.campaign-strict-stats {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  line-height: 1.35;
}

.engagement-panel.is-strict {
  border-color: rgba(250, 204, 21, 0.5);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.16), 0 18px 48px rgba(15, 23, 42, 0.3);
}

.engagement-panel.is-strict #engagementEyebrow,
.engagement-panel.is-strict #engagementProgressChip,
.engagement-panel.is-strict #engagementTimerChip {
  color: #fde68a;
}

.engagement-panel.is-strict #engagementTimerChip {
  border-color: rgba(250, 204, 21, 0.55);
  background:
    linear-gradient(90deg, rgba(250, 204, 21, calc(0.12 + (var(--checkpoint-progress, 1) * 0.18))), rgba(15, 23, 42, 0.82)),
    rgba(15, 23, 42, 0.82);
  box-shadow: 0 0 22px rgba(250, 204, 21, 0.18);
}

.engagement-panel.is-strict #engagementButton {
  border-color: rgba(250, 204, 21, 0.55);
}

.passive-ops-grid {
  align-items: stretch;
}

.billing-refill-grid,
.billing-plan-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.billing-refill-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.billing-refill-grid label,
.billing-plan-option {
  min-width: 0;
}

.billing-plan-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.billing-plan-option.is-active {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.billing-plan-option div,
.campaign-health-line {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.billing-plan-option span,
.billing-plan-option small,
.campaign-health-line small {
  color: var(--muted);
}

.campaign-card-status-stack {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 0;
}

.campaign-group-summary-row > th,
.campaign-group-summary-row > td {
  vertical-align: middle;
}

.campaign-group-summary-row .campaign-progress-cell {
  min-width: 110px;
}

.campaign-summary-value,
.campaign-summary-funding strong,
.campaign-summary-funding span {
  display: block;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.campaign-summary-funding {
  display: grid;
  gap: 3px;
  min-width: 120px;
}

.campaign-summary-funding strong {
  color: var(--ink);
  font-size: 0.84rem;
  white-space: nowrap;
}

.campaign-summary-funding span,
.campaign-group-line .campaign-summary-funding {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
}

.campaign-state-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.campaign-state-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

.campaign-state-pill.is-success {
  border-color: color-mix(in srgb, #16a34a 55%, var(--line));
  background: color-mix(in srgb, #16a34a 13%, var(--surface));
  color: color-mix(in srgb, #16a34a 84%, var(--ink));
}

.campaign-state-pill.is-warning {
  border-color: color-mix(in srgb, var(--amber) 58%, var(--line));
  background: color-mix(in srgb, var(--amber) 12%, var(--surface));
  color: var(--ink);
}

.campaign-expanded-row > td {
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}

.campaign-expanded-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.campaign-variant-card.is-live {
  border-color: color-mix(in srgb, #16a34a 48%, var(--line));
  box-shadow: 0 18px 42px color-mix(in srgb, #16a34a 11%, transparent);
}

.campaign-live-banner {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  border: 1px solid color-mix(in srgb, #16a34a 62%, var(--line));
  border-radius: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, color-mix(in srgb, #16a34a 19%, var(--surface)), color-mix(in srgb, #22c55e 8%, var(--surface)));
  color: color-mix(in srgb, #15803d 82%, var(--ink));
}

.campaign-live-banner > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.campaign-live-banner strong {
  color: inherit;
  font-size: 1rem;
  font-weight: 1000;
  letter-spacing: 0.055em;
  line-height: 1.2;
}

.campaign-live-banner span:not(.campaign-live-indicator) {
  color: color-mix(in srgb, #166534 74%, var(--ink));
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.4;
}

.campaign-live-indicator {
  width: 11px;
  height: 11px;
  border: 2px solid color-mix(in srgb, #dcfce7 88%, white);
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 4px color-mix(in srgb, #16a34a 20%, transparent);
}

.campaign-approved-icon {
  width: 26px;
  height: 26px;
  fill: color-mix(in srgb, #16a34a 14%, transparent);
  stroke: #15803d;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.campaign-detail-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  min-width: 0;
}

.campaign-detail-group {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.campaign-detail-group h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 950;
  letter-spacing: 0.025em;
  line-height: 1.25;
  white-space: nowrap;
}

.campaign-detail-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 8px;
  min-width: 0;
}

.campaign-detail-fact {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.campaign-detail-fact span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.3;
}

.campaign-detail-fact strong {
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
}

.campaign-detail-fact.is-success strong,
.campaign-funding-detail {
  color: color-mix(in srgb, #15803d 82%, var(--ink));
}

.campaign-detail-fact.is-warning strong {
  color: color-mix(in srgb, var(--amber) 80%, var(--ink));
}

.campaign-owner-review-monitoring-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, #15803d 28%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, #dcfce7 48%, var(--surface));
  color: color-mix(in srgb, #166534 82%, var(--ink));
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1.45;
}

.campaign-funding-detail {
  font-size: 0.78rem;
  line-height: 1.35;
}

.campaign-actions-group {
  grid-column: 1 / -1;
}

.campaign-action-stack.is-live {
  display: grid;
  grid-template-columns: repeat(5, max-content) auto;
  align-items: center;
  overflow: visible;
}

.campaign-action-stack.is-live .campaign-live-action {
  border-color: color-mix(in srgb, #16a34a 62%, var(--line));
  background: color-mix(in srgb, #16a34a 13%, var(--surface));
  color: color-mix(in srgb, #15803d 84%, var(--ink));
  font-weight: 950;
}

.campaign-expand-button {
  white-space: nowrap;
}

.campaign-group-line .campaign-state-pills,
.campaign-group-line .campaign-summary-funding {
  margin-top: 7px;
}

@media (max-width: 1180px) {
  .campaign-action-stack.is-live {
    grid-template-columns: repeat(3, max-content);
  }
}

@media (max-width: 760px) {
  .campaign-live-banner {
    grid-template-columns: auto auto minmax(0, 1fr);
    padding: 12px;
  }

  .campaign-detail-groups,
  .campaign-detail-facts,
  .campaign-action-stack.is-live {
    grid-template-columns: 1fr;
  }

  .campaign-actions-group {
    grid-column: auto;
  }

  .campaign-action-stack.is-live > .small-button,
  .campaign-action-stack.is-live > .campaign-action-menu {
    width: 100%;
  }

  .campaign-action-stack.is-live .small-button,
  .campaign-action-stack.is-live .campaign-action-menu summary {
    width: 100%;
    justify-content: center;
  }

  .campaign-action-stack.is-live .campaign-action-menu-list {
    right: auto;
    left: 0;
    width: 100%;
  }

  .campaign-group-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.campaign-health-line {
  margin-top: 6px;
}

.admin-today-work {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.admin-today-work-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.admin-today-work-row {
  display: grid;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.admin-today-work-row strong {
  font-size: 1.25rem;
}

.admin-today-work-row small,
.admin-monthly-close-checklist span {
  color: var(--muted);
}

.admin-today-work-row.is-critical {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--line));
}

.admin-today-work-row.is-high {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--line));
}

.admin-monthly-close-checklist {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.admin-monthly-close-checklist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

/* App performance mode: keep the premium static art direction, but remove
   fixed blur fields, backdrop filters, and constant shimmer that cause scroll
   wheel/click jank on normal dashboard pages. The ad viewer reward effects are
   untouched because viewer.html does not opt into this body class. */
body.cinematic-low-power-mode {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 8% -10%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 30rem),
    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 32rem),
    radial-gradient(circle at 62% 110%, color-mix(in srgb, var(--brand-gold) 7%, transparent), transparent 28rem),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 44%, var(--bg)) 0, var(--bg) 34rem),
    var(--bg);
}

body[data-theme="light"].cinematic-low-power-mode {
  background:
    radial-gradient(circle at 8% -10%, rgb(31 157 104 / 0.09), transparent 30rem),
    radial-gradient(circle at 94% 12%, rgb(37 99 168 / 0.08), transparent 32rem),
    radial-gradient(circle at 62% 110%, rgb(183 121 31 / 0.045), transparent 28rem),
    linear-gradient(180deg, #f8fbfe 0, var(--bg) 30rem),
    var(--bg);
}

body.cinematic-low-power-mode::before {
  position: fixed;
  inset: -8vmax;
  z-index: 0;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(circle at 8% 22%, rgb(248 250 252 / 0.86) 0 1.15px, transparent 1.9px),
    radial-gradient(circle at 64% 14%, rgb(103 232 249 / 0.7) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 82% 76%, rgb(187 247 208 / 0.62) 0 1px, transparent 1.75px),
    radial-gradient(circle at 24% 72%, rgb(250 204 21 / 0.48) 0 1px, transparent 1.8px),
    radial-gradient(circle at 48% 46%, rgb(255 255 255 / 0.44) 0 0.9px, transparent 1.45px);
  background-position:
    0 0,
    104px 36px,
    42px 128px,
    220px 74px,
    18px 18px;
  background-size:
    340px 260px,
    460px 340px,
    620px 430px,
    540px 390px,
    190px 150px;
  mix-blend-mode: screen;
  opacity: 0.58;
  transform: translate3d(-2.1%, -1.3%, 0) scale(1.06);
  transform-origin: 50% 50%;
  will-change: transform;
  animation: low-power-star-drift 88s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

body[data-theme="light"].cinematic-low-power-mode::before {
  mix-blend-mode: normal;
  opacity: 0.2;
}

body.cinematic-low-power-mode.cinematic-scrolling::before,
body.cinematic-low-power-mode.cinematic-page-hidden::before,
body.cinematic-low-power-mode.cinematic-reduced-motion::before {
  animation-play-state: paused;
}

body.cinematic-low-power-mode :where(
  .test-mode-banner,
  .auth-screen,
  .member-status-bar,
  .app-shell,
  .help-drawer,
  .toast
) {
  position: relative;
  z-index: 1;
}

body.cinematic-low-power-mode .level-up-popup {
  position: fixed;
  inset: 0;
  z-index: 10020;
}

body.cinematic-low-power-mode .cinematic-bg,
body.cinematic-low-power-mode .bg-glow-container {
  display: none !important;
}

body.cinematic-low-power-mode :where(
  .app-shell .view-section .panel,
  .app-shell .view-section .next-action-card,
  .app-shell .view-section .safety-strip,
  .app-shell .view-section .levels-hero,
  .app-shell .view-section .world-chat-hero,
  .app-shell .view-section .profile-hero,
  .app-shell .view-section .earn-more-hero,
  .app-shell .view-section .survey-wall-hero,
  .app-shell .view-section .metric-card,
  .app-shell .view-section .ad-card,
  .app-shell .view-section .next-action,
  .app-shell .view-section .action-card,
  .app-shell .view-section .activity-row,
  .app-shell .view-section .ledger-row,
  .app-shell .view-section .payout-row,
  .app-shell .view-section .referral-row,
  .app-shell .view-section .campaign-row,
  .app-shell .view-section .admin-row,
  .app-shell .view-section .goal-row,
  .app-shell .view-section .achievement-card,
  .app-shell .view-section .earn-module,
  .app-shell .view-section .survey-provider-card,
  .app-shell .view-section .survey-offer-card,
  .app-shell .view-section .wallet-summary,
  .app-shell .view-section .payout-minimum-card,
  .app-shell .view-section .level-core-card,
  .app-shell .view-section .cosmetic-next-card,
  .app-shell .view-section .cosmetic-milestone-card,
  .app-shell .view-section .leaderboard-row,
  .app-shell .view-section .xp-history-row,
  .app-shell .view-section .profile-level-card,
  .app-shell .view-section .profile-stat-card,
  .app-shell .view-section .profile-detail-list > *,
  .app-shell .view-section .world-chat-status-grid article,
  .app-shell .view-section .chat-identity-card,
  .app-shell .view-section .chat-rules-card,
  .app-shell .view-section .help-topic-card,
  .app-shell .view-section .help-status-card,
  .member-status-bar,
  .member-status-account,
  .compact-avatar,
  .sidebar,
  .topbar,
  .topbar.is-dashboard-topbar,
  .sidebar .nav-item,
  .mobile-nav-item,
  .primary-button,
  .text-button,
  .action-neutral,
  .theme-toggle,
  .row-actions button,
  .member-status-metric-button,
  .member-status-account-button
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.cinematic-low-power-mode :where(
  .app-shell .view-section.is-visible,
  .app-shell .view-section .panel,
  .app-shell .view-section .next-action-card,
  .app-shell .view-section .metric-card,
  .member-status-bar,
  .topbar.is-dashboard-topbar,
  .member-status-account,
  .compact-avatar
) {
  animation: none !important;
}

@keyframes low-power-star-drift {
  0% {
    transform: translate3d(-2.1%, -1.3%, 0) scale(1.06);
  }

  14% {
    transform: translate3d(-0.35%, 1.35%, 0) scale(1.06);
  }

  29% {
    transform: translate3d(1.95%, -0.5%, 0) scale(1.06);
  }

  47% {
    transform: translate3d(0.48%, 2.1%, 0) scale(1.06);
  }

  63% {
    transform: translate3d(-1.85%, 0.58%, 0) scale(1.06);
  }

  81% {
    transform: translate3d(1.3%, -1.8%, 0) scale(1.06);
  }

  100% {
    transform: translate3d(-2.1%, -1.3%, 0) scale(1.06);
  }
}

/* Signed-out landing containment: keep the auth card and footer from
   colliding when the page is scrolled near the bottom. */
.auth-screen:not(.is-hidden) {
  grid-template-areas:
    "landing auth"
    "footer footer";
  align-items: start;
}

.auth-screen:not(.is-hidden) > .auth-copy {
  grid-area: landing;
  min-width: 0;
}

.auth-screen:not(.is-hidden) > #loginPanel {
  grid-area: auth;
  position: sticky;
  top: clamp(58px, 7vh, 78px);
  align-self: start;
  width: 100%;
  min-width: 0;
  max-width: 430px;
  max-height: min(calc(100vh - 96px), var(--auth-panel-clamp-height, calc(100vh - 96px)));
  overflow-y: auto;
  overscroll-behavior: contain;
  justify-self: end;
  scrollbar-gutter: stable;
}

.auth-screen:not(.is-hidden) > .site-footer {
  grid-area: footer;
  display: grid;
  grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1fr);
  gap: 14px 20px;
  align-items: start;
  width: 100%;
  min-width: 0;
  margin-top: 14px;
}

.auth-screen:not(.is-hidden) > .site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
  min-width: 0;
  line-height: 1.45;
}

.auth-screen:not(.is-hidden) > .site-footer p {
  grid-column: 1 / -1;
  max-width: 104ch;
}

.auth-screen #loginPanel .policy-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 9px;
  min-width: 0;
  line-height: 1.45;
  text-align: center;
}

.auth-screen #loginPanel .policy-links span {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}

@media (max-width: 1120px) {
  .auth-screen:not(.is-hidden) {
    grid-template-areas:
      "landing"
      "auth"
      "footer";
  }

  .auth-screen:not(.is-hidden) > #loginPanel {
    position: static;
    max-width: none;
    max-height: none;
    overflow: hidden;
    justify-self: stretch;
  }

  .auth-screen:not(.is-hidden) > .site-footer {
    grid-template-columns: 1fr;
  }

  .auth-screen:not(.is-hidden) > .site-footer nav {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .auth-screen:not(.is-hidden) > .site-footer,
  .auth-screen #loginPanel .policy-links {
    text-align: left;
  }
}

/* Dedicated mobile member console. Desktop layout remains active from 1024px up. */
.mobile-member-header,
.mobile-account-summary,
.mobile-member-menu {
  display: none;
}

body.mobile-menu-open {
  overflow: hidden;
}

@media (max-width: 1023px) {
  body:not(.is-admin-user) {
    overflow-x: clip;
  }

  body:not(.is-admin-user) .member-status-bar,
  body:not(.is-admin-user) .sidebar {
    display: none !important;
  }

  body:not(.is-admin-user) .app-shell {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow-x: clip;
  }

  body:not(.is-admin-user) .mobile-member-header {
    position: sticky;
    top: 0;
    z-index: 32;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    background:
      radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 38%),
      color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: 0 14px 28px rgb(0 0 0 / 0.2);
  }

  body[data-theme="light"]:not(.is-admin-user) .mobile-member-header {
    background:
      radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 38%),
      color-mix(in srgb, #ffffff 94%, transparent);
  }

  body:not(.is-admin-user) .mobile-brand-button,
  body:not(.is-admin-user) .mobile-menu-button {
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    background: color-mix(in srgb, var(--surface-2) 84%, transparent);
    color: var(--ink);
    box-shadow: 0 10px 22px rgb(0 0 0 / 0.12);
  }

  body:not(.is-admin-user) .mobile-brand-button {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: calc(100vw - 112px);
    border-radius: 18px;
    padding: 8px 10px;
    text-align: left;
  }

  body:not(.is-admin-user) .mobile-brand-button .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  body:not(.is-admin-user) .mobile-brand-button strong,
  body:not(.is-admin-user) .mobile-brand-button small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.is-admin-user) .mobile-brand-button strong {
    font-size: 0.98rem;
    line-height: 1.05;
  }

  body:not(.is-admin-user) .mobile-brand-button small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 900;
  }

  body:not(.is-admin-user) .mobile-menu-button {
    display: inline-grid;
    grid-template-columns: 22px auto;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    border-radius: 15px;
    padding: 0 11px;
    font-weight: 950;
  }

  body:not(.is-admin-user) .mobile-menu-button span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 17%, var(--surface));
    color: var(--primary);
    font-size: 0.72rem;
  }

  body:not(.is-admin-user) .mobile-account-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: calc(100% - 28px);
    min-width: 0;
    margin: 12px auto 0;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
    border-radius: 22px;
    padding: 12px;
    background:
      radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 34%),
      radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 36%),
      color-mix(in srgb, var(--surface) 90%, transparent);
    box-shadow: 0 16px 34px rgb(0 0 0 / 0.18);
  }

  body:not(.is-admin-user) .mobile-summary-tile,
  body:not(.is-admin-user) .mobile-summary-progress {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 16px;
    padding: 10px;
    background: color-mix(in srgb, var(--surface-2) 74%, transparent);
  }

  body:not(.is-admin-user) .mobile-summary-progress {
    grid-column: 1 / -1;
  }

  body:not(.is-admin-user) .mobile-summary-progress > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }

  body:not(.is-admin-user) .mobile-account-summary span {
    display: block;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  body:not(.is-admin-user) .mobile-account-summary strong {
    display: block;
    min-width: 0;
    margin-top: 3px;
    overflow: hidden;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.is-admin-user) .mobile-summary-progress .progress-track {
    height: 11px;
    margin-top: 9px;
  }

  body:not(.is-admin-user) .main-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 12px 14px calc(104px + env(safe-area-inset-bottom));
  }

  body:not(.is-admin-user) .topbar {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0 0 12px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 22px;
    padding: 18px 16px;
  }

  body:not(.is-admin-user) .topbar h1 {
    max-width: 100%;
    font-size: clamp(1.75rem, 8vw, 2.35rem);
    line-height: 1.08;
    overflow-wrap: normal;
    word-break: normal;
  }

  body:not(.is-admin-user) .section-subtitle {
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body:not(.is-admin-user) .safety-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px;
  }

  body:not(.is-admin-user) .view-section,
  body:not(.is-admin-user) .view-section.is-visible {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body:not(.is-admin-user) .app-shell :where(
    .dashboard-primary-grid,
    .content-grid,
    .dashboard-secondary,
    .metric-grid,
    .account-snapshot-grid,
    .snapshot-progress-grid,
    .streak-card-grid,
    .daily-goals,
    .achievement-grid,
    .milestone-list,
    .next-action-list,
    .compact-action-list,
    .ad-grid,
    .earn-more-grid,
    .wallet-layout,
    .wallet-balance-grid,
    .provider-card-grid,
    .cashout-address-grid,
    .profile-grid,
    .profile-stat-grid,
    .profile-detail-grid,
    .profile-showcase-grid,
    .leaderboard-layout,
    .leaderboard-grid,
    .levels-grid,
    .levels-hero,
    .level-core-grid,
    .referral-dashboard-grid,
    .referral-link-grid,
    .promo-link-grid,
    .qr-card-grid,
    .affiliate-count-grid,
    .help-page-grid,
    .help-grid,
    .help-status-grid,
    .form-row,
    .section-header,
    .section-link-row,
    .section-header-actions,
    .panel-heading
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:not(.is-admin-user) .app-shell :where(
    .dashboard-primary-grid,
    .content-grid,
    .dashboard-secondary,
    .metric-grid,
    .account-snapshot-grid,
    .snapshot-progress-grid,
    .streak-card-grid,
    .daily-goals,
    .achievement-grid,
    .milestone-list,
    .next-action-list,
    .compact-action-list,
    .ad-grid,
    .earn-more-grid,
    .wallet-layout,
    .profile-grid,
    .leaderboard-layout,
    .levels-grid,
    .referral-dashboard-grid,
    .help-page-grid
  ) {
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body:not(.is-admin-user) .app-shell :where(
    .panel,
    .next-action-card,
    .onboarding-checklist-panel,
    .metric-card,
    .action-card,
    .activity-row,
    .goal-row,
    .ledger-row,
    .payout-row,
    .referral-row,
    .campaign-row,
    .ad-card,
    .earn-module,
    .wallet-summary,
    .payout-minimum-card,
    .profile-hero,
    .profile-level-card,
    .profile-stat-card,
    .levels-hero,
    .level-core-card,
    .cosmetic-next-card,
    .cosmetic-milestone-card,
    .leaderboard-hero,
    .leaderboard-row,
    .xp-history-row,
    .help-hero,
    .help-topic-card,
    .help-status-card,
    .referral-marketing,
    .promo-card,
    .tool-card,
    .social-template-card,
    .qr-card
  ) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    padding: clamp(14px, 4vw, 18px);
  }

  body:not(.is-admin-user) .app-shell :where(
    .section-header,
    .section-link-row,
    .section-header-actions,
    .panel-heading,
    .next-action,
    .ledger-row,
    .payout-row,
    .referral-row,
    .campaign-row,
    .action-card
  ) {
    align-items: stretch;
    flex-direction: column;
  }

  body:not(.is-admin-user) .app-shell :where(input, select, textarea) {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  body:not(.is-admin-user) .app-shell :where(.primary-button, .text-button, .action-neutral) {
    min-height: 44px;
  }

  body:not(.is-admin-user) .app-shell :where(img, canvas, svg) {
    max-width: 100%;
  }

  body:not(.is-admin-user) .app-shell :where(.promo-url, .referral-url, code) {
    overflow-wrap: anywhere;
  }

  body:not(.is-admin-user) .mobile-bottom-nav {
    position: fixed;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
    z-index: 35;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 24px;
    padding: 8px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: 0 18px 42px rgb(0 0 0 / 0.28);
  }

  body[data-theme="light"]:not(.is-admin-user) .mobile-bottom-nav {
    background: color-mix(in srgb, #ffffff 94%, transparent);
  }

  body:not(.is-admin-user) .mobile-nav-item {
    display: grid;
    place-items: center;
    gap: 5px;
    min-width: 0;
    min-height: 58px;
    border: 1px solid transparent;
    border-radius: 18px;
    padding: 7px 2px;
    background: transparent;
    color: var(--muted);
    font-size: clamp(0.62rem, 2.6vw, 0.74rem);
    font-weight: 950;
    line-height: 1.05;
    text-align: center;
  }

  body:not(.is-admin-user) .mobile-nav-item span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
    color: var(--accent);
    font-size: 0.7rem;
  }

  body:not(.is-admin-user) .mobile-nav-item.is-active {
    border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--accent) 9%, transparent)),
      color-mix(in srgb, var(--surface-2) 88%, transparent);
    color: var(--ink);
    box-shadow:
      inset 4px 0 0 var(--primary),
      0 10px 24px color-mix(in srgb, var(--primary) 13%, transparent);
  }

  body:not(.is-admin-user) .mobile-nav-item.is-active span {
    background: color-mix(in srgb, var(--primary) 24%, var(--surface));
    color: var(--primary);
  }

  body:not(.is-admin-user) .mobile-member-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    align-items: end;
    padding: 12px;
    background: rgb(2 6 12 / 0.72);
  }

  body:not(.is-admin-user) .mobile-member-menu.is-hidden {
    display: none !important;
  }

  body:not(.is-admin-user) .mobile-member-menu-panel {
    display: grid;
    gap: 14px;
    width: min(100%, 520px);
    max-height: min(82dvh, 720px);
    margin: 0 auto;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
    border-radius: 26px;
    padding: 16px;
    background:
      radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 34%),
      color-mix(in srgb, var(--surface) 96%, #050a14 4%);
    box-shadow: 0 26px 70px rgb(0 0 0 / 0.36);
  }

  body:not(.is-admin-user) .mobile-menu-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  body:not(.is-admin-user) .mobile-menu-heading h2 {
    margin: 2px 0 0;
    font-size: 1.35rem;
  }

  body:not(.is-admin-user) .mobile-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body:not(.is-admin-user) .mobile-menu-link {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px 10px;
    min-width: 0;
    min-height: 74px;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 18px;
    padding: 11px;
    background: color-mix(in srgb, var(--surface-2) 78%, transparent);
    color: var(--ink);
    text-align: left;
  }

  body:not(.is-admin-user) .mobile-menu-link > span {
    display: grid;
    grid-row: 1 / span 2;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--primary) 16%, var(--surface));
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 950;
  }

  body:not(.is-admin-user) .mobile-menu-link strong,
  body:not(.is-admin-user) .mobile-menu-link small {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body:not(.is-admin-user) .mobile-menu-link strong {
    font-size: 0.92rem;
    line-height: 1.15;
  }

  body:not(.is-admin-user) .mobile-menu-link small {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.28;
  }

  body:not(.is-admin-user) .mobile-menu-signout {
    width: 100%;
  }
}

@media (max-width: 430px) {
  body:not(.is-admin-user) .mobile-account-summary {
    width: calc(100% - 20px);
    gap: 8px;
    padding: 10px;
  }

  body:not(.is-admin-user) .main-content {
    padding-right: 10px;
    padding-left: 10px;
  }

  body:not(.is-admin-user) .mobile-bottom-nav {
    right: 8px;
    left: 8px;
    gap: 4px;
    padding: 7px;
  }

  body:not(.is-admin-user) .mobile-nav-item {
    min-height: 56px;
    border-radius: 16px;
    font-size: 0.62rem;
  }

  body:not(.is-admin-user) .mobile-nav-item span {
    width: 26px;
    height: 26px;
  }

  body:not(.is-admin-user) .mobile-menu-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mobile dashboard stability: real phones were repainting the Dashboard tab
   because high-specificity dashboard shimmer rules overrode low-power mode.
   Keep the same glass styling, but make Dashboard-only motion static on mobile. */
@media (max-width: 1023px) {
  body:not(.is-admin-user).cinematic-low-power-mode .view-section.is-visible {
    animation: none !important;
  }

  body:not(.is-admin-user).cinematic-low-power-mode .mobile-member-header,
  body:not(.is-admin-user).cinematic-low-power-mode .mobile-account-summary,
  body:not(.is-admin-user).cinematic-low-power-mode .mobile-bottom-nav,
  body:not(.is-admin-user).cinematic-low-power-mode .mobile-nav-item,
  body:not(.is-admin-user).cinematic-low-power-mode .mobile-menu-button,
  body:not(.is-admin-user).cinematic-low-power-mode .mobile-brand-button,
  body:not(.is-admin-user).cinematic-low-power-mode .topbar.is-dashboard-topbar,
  body:not(.is-admin-user).cinematic-low-power-mode #dashboard.view-section.is-visible :where(
    .panel,
    .next-action-card,
    .safety-strip,
    .metric-card,
    .next-action,
    .action-card,
    .activity-row,
    .goal-row,
    .achievement-card,
    .milestone-list > *,
    .dashboard-campaign-pick,
    .empty-state-block
  ) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
    transition-property: background-color, border-color, box-shadow, color, filter, transform;
    transition-duration: 160ms;
    transition-timing-function: ease;
  }

  body:not(.is-admin-user).cinematic-low-power-mode .topbar.is-dashboard-topbar::before,
  body:not(.is-admin-user).cinematic-low-power-mode .topbar.is-dashboard-topbar::after,
  body:not(.is-admin-user).cinematic-low-power-mode #dashboard.view-section.is-visible :where(
    .panel,
    .next-action-card,
    .safety-strip,
    .metric-card,
    .next-action,
    .action-card,
    .achievement-card,
    .dashboard-campaign-pick,
    .empty-state-block,
    .primary-button,
    .text-button,
    .action-neutral
  )::before,
  body:not(.is-admin-user).cinematic-low-power-mode #dashboard.view-section.is-visible :where(
    .panel,
    .next-action-card,
    .safety-strip,
    .metric-card,
    .next-action,
    .action-card,
    .achievement-card,
    .dashboard-campaign-pick,
    .empty-state-block,
    .primary-button,
    .text-button,
    .action-neutral
  )::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  body:not(.is-admin-user).cinematic-low-power-mode #dashboard.view-section.is-visible :where(
    .eyebrow,
    .activity-live-pulse,
    .streak-card,
    .achievement-orbit,
    .achievement-spark,
    .primary-button,
    .text-button,
    .action-neutral,
    .mobile-summary-progress .progress-track span,
    .progress-track > span,
    .mini-progress > span,
    .mini-progress-track > span
  ) {
    animation: none !important;
  }

  body:not(.is-admin-user).cinematic-low-power-mode #mobileSummaryXpBar,
  body:not(.is-admin-user).cinematic-low-power-mode #currentSectionLabel,
  body:not(.is-admin-user).cinematic-low-power-mode .topbar .primary-button.small-button,
  body:not(.is-admin-user).cinematic-low-power-mode .topbar .text-button.small-button {
    animation: none !important;
  }

  body:not(.is-admin-user).cinematic-low-power-mode #dashboard.view-section.is-visible .streak-card::before,
  body:not(.is-admin-user).cinematic-low-power-mode #dashboard.view-section.is-visible .streak-card::after,
  body:not(.is-admin-user).cinematic-low-power-mode #dashboard.view-section.is-visible .progress-track > span::before,
  body:not(.is-admin-user).cinematic-low-power-mode #dashboard.view-section.is-visible .progress-track > span::after,
  body:not(.is-admin-user).cinematic-low-power-mode #dashboard.view-section.is-visible .mini-progress > span::before,
  body:not(.is-admin-user).cinematic-low-power-mode #dashboard.view-section.is-visible .mini-progress > span::after,
  body:not(.is-admin-user).cinematic-low-power-mode #dashboard.view-section.is-visible .mini-progress-track > span::before,
  body:not(.is-admin-user).cinematic-low-power-mode #dashboard.view-section.is-visible .mini-progress-track > span::after,
  body:not(.is-admin-user).cinematic-low-power-mode #dashboard.view-section.is-visible #xpProgressBar::before,
  body:not(.is-admin-user).cinematic-low-power-mode #dashboard.view-section.is-visible #xpProgressBar::after,
  body:not(.is-admin-user).cinematic-low-power-mode #dashboard.view-section.is-visible .achievement-card .progress-track span::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.is-admin-user).cinematic-low-power-mode::before {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .protection-card-grid,
  .verified-flow-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .admin-check-workflow-panel {
    padding: 12px;
  }

  .admin-check-summary-grid,
  .admin-check-workflow-section.is-identity,
  .admin-check-workflow-section.is-contact,
  .admin-check-workflow-section.is-payment {
    grid-template-columns: 1fr;
  }

  .admin-check-workflow-section {
    gap: 10px;
  }

  .admin-check-workflow-actions > * {
    flex-basis: 100%;
  }
}

.admin-campaign-directory-mode {
  display: block;
}

.admin-campaign-directory-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(120px, 0.75fr)) auto auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(118, 255, 189, 0.16);
  border-radius: 8px;
  background: rgba(13, 23, 38, 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.admin-campaign-directory-toolbar label,
.admin-directory-search-control {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-campaign-directory-toolbar input,
.admin-campaign-directory-toolbar select {
  width: 100%;
  min-width: 0;
}

.admin-campaign-more-filters {
  align-self: stretch;
  min-width: 132px;
}

.admin-campaign-more-filters > summary {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(15, 27, 47, 0.9);
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
}

.admin-campaign-more-filters[open] > summary {
  border-color: rgba(48, 221, 132, 0.5);
}

.admin-campaign-more-filters .admin-campaign-command-filters {
  position: absolute;
  right: 12px;
  left: 12px;
  z-index: 7;
  margin-top: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.admin-directory-count {
  align-self: center;
  justify-self: end;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-table-campaign-directory {
  min-width: 980px;
}

.admin-table-campaign-directory.admin-table-ops-dense th,
.admin-table-campaign-directory.admin-table-ops-dense td {
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: top;
}

.admin-campaign-compact-row {
  min-height: 52px;
}

.admin-campaign-compact-row .admin-cell-link strong,
.admin-campaign-compact-row td strong {
  font-size: 0.88rem;
}

.admin-campaign-compact-row .admin-cell-link span,
.admin-campaign-compact-row td small {
  max-width: 220px;
  overflow-wrap: anywhere;
}

.admin-campaign-row-facts {
  color: color-mix(in srgb, var(--muted) 88%, var(--primary));
}

@media (max-width: 1120px) and (min-width: 881px) {
  .admin-shell {
    grid-template-columns: 208px minmax(0, 1fr);
    gap: 14px;
    width: min(1360px, calc(100vw - 48px));
  }
}

.admin-panel[data-admin-panel="ads"],
.admin-panel[data-admin-panel="ads"] > .panel,
#adminAdsContent {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (min-width: 1024px) {
  .admin-table-campaign-directory.admin-table-ops-dense {
    table-layout: fixed;
  }

  .admin-table-campaign-directory.admin-table-ops-dense th,
  .admin-table-campaign-directory.admin-table-ops-dense td {
    min-height: 48px;
    padding: 6px 8px;
    vertical-align: middle;
  }

  .admin-table-campaign-directory .admin-ops-main-cell {
    width: 19%;
    min-width: 0;
  }

  .admin-table-campaign-directory .admin-ops-contact-cell {
    width: 15%;
    min-width: 0;
  }

  .admin-table-campaign-directory .admin-ops-status-cell {
    width: 12%;
    min-width: 0;
  }

  .admin-table-campaign-directory .admin-ops-scan-cell {
    width: 15%;
    min-width: 0;
  }

  .admin-table-campaign-directory .admin-ops-date-cell {
    width: 11%;
    min-width: 0;
  }

  .admin-table-campaign-directory .admin-ops-actions-cell {
    width: 14%;
    min-width: 0;
  }

  .admin-table-campaign-directory .admin-cell-link {
    gap: 2px;
    line-height: 1.12;
  }

  .admin-campaign-compact-row .admin-cell-link strong,
  .admin-campaign-compact-row td strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 0.82rem;
    line-height: 1.16;
  }

  .admin-campaign-compact-row .admin-cell-link span,
  .admin-campaign-compact-row td small {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 0.68rem;
    line-height: 1.16;
  }

  .admin-table-campaign-directory .admin-status-group {
    gap: 3px;
    flex-wrap: nowrap;
  }

  .admin-table-campaign-directory .status-badge {
    max-width: 96px;
    min-height: 18px;
    padding: 2px 6px;
    font-size: 0.62rem;
    line-height: 1;
  }

  .admin-table-campaign-directory .admin-table-actions {
    gap: 4px;
    align-items: center;
    flex-wrap: nowrap;
  }

  .admin-table-campaign-directory .admin-action-menu summary,
  .admin-table-campaign-directory .admin-table-actions > .text-button,
  .admin-table-campaign-directory .admin-table-actions > .primary-button {
    min-height: 28px;
    padding: 4px 7px;
    font-size: 0.68rem;
  }
}

.admin-table-campaign-directory .admin-ops-actions-cell {
  position: sticky;
  right: 0;
  z-index: 3;
  width: 166px;
  min-width: 166px;
  max-width: 166px;
  overflow: visible;
  background:
    linear-gradient(90deg, rgba(2, 6, 14, 0), color-mix(in srgb, var(--surface) 96%, #020617) 18px),
    color-mix(in srgb, var(--surface) 96%, #020617);
  box-shadow: -12px 0 18px rgba(0, 0, 0, 0.26);
}

.admin-table-campaign-directory thead .admin-ops-actions-cell {
  z-index: 6;
}

.admin-table-campaign-directory tbody tr:hover .admin-ops-actions-cell,
.admin-table-campaign-directory tbody tr:focus-within .admin-ops-actions-cell,
.admin-table-campaign-directory tbody tr.is-selected .admin-ops-actions-cell {
  background:
    linear-gradient(90deg, rgba(2, 6, 14, 0), color-mix(in srgb, var(--primary) 9%, var(--surface)) 18px),
    color-mix(in srgb, var(--primary) 9%, var(--surface));
}

.admin-table-campaign-directory .admin-ops-actions-cell .admin-table-actions {
  position: sticky;
  right: 8px;
  z-index: 7;
  width: min-content;
  max-width: 100%;
  margin-left: auto;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 5px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 96%, #020617);
  box-shadow: -10px 0 18px rgba(0, 0, 0, 0.2);
}

.admin-table-campaign-directory .admin-ops-actions-cell .admin-action-menu {
  display: grid;
  justify-items: end;
}

.admin-table-campaign-directory .admin-ops-actions-cell .admin-action-menu[open] {
  z-index: 12;
}

.admin-table-campaign-directory .admin-ops-actions-cell .admin-action-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  justify-self: end;
  min-width: 176px;
  max-width: min(240px, calc(100vw - 32px));
}

.admin-table-campaign-directory .admin-table-actions > .text-button {
  min-width: 64px;
  white-space: nowrap;
}

.admin-table-campaign-directory .admin-table-actions > .primary-button {
  min-width: 86px;
  max-width: 112px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.05;
}

.admin-table-campaign-directory .admin-ops-actions-cell .text-button:focus-visible,
.admin-table-campaign-directory .admin-ops-actions-cell .primary-button:focus-visible,
.admin-table-campaign-directory .admin-ops-actions-cell summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 70%, transparent);
  outline-offset: 2px;
}

@media (max-width: 1366px) and (min-width: 781px) {
  .admin-table-campaign-directory {
    min-width: 100%;
  }

  .admin-table-campaign-directory .admin-ops-main-cell,
  .admin-table-campaign-directory .admin-ops-contact-cell,
  .admin-table-campaign-directory .admin-ops-status-cell,
  .admin-table-campaign-directory .admin-ops-scan-cell,
  .admin-table-campaign-directory .admin-ops-payment-cell,
  .admin-table-campaign-directory .admin-ops-delivery-cell,
  .admin-table-campaign-directory .admin-ops-date-cell {
    min-width: 0;
    max-width: none;
  }

  .admin-table-campaign-directory .admin-ops-delivery-cell,
  .admin-table-campaign-directory .admin-ops-date-cell {
    display: none;
  }

  .admin-table-campaign-directory .admin-ops-main-cell {
    width: 23%;
  }

  .admin-table-campaign-directory .admin-ops-contact-cell {
    width: 16%;
  }

  .admin-table-campaign-directory .admin-ops-status-cell {
    width: 13%;
  }

  .admin-table-campaign-directory .admin-ops-scan-cell {
    width: 18%;
  }

}

@media (max-width: 980px) and (min-width: 781px) {
  .admin-table-campaign-directory .admin-ops-payment-cell {
    display: none;
  }

  .admin-table-campaign-directory .admin-ops-main-cell {
    width: 28%;
  }

  .admin-table-campaign-directory .admin-ops-contact-cell {
    width: 17%;
  }

  .admin-table-campaign-directory .admin-ops-status-cell {
    width: 15%;
  }

  .admin-table-campaign-directory .admin-ops-scan-cell {
    width: 18%;
  }

  .admin-table-campaign-directory .admin-ops-actions-cell {
    width: 136px;
    min-width: 136px;
    max-width: 136px;
    right: 56px;
  }

  .admin-table-campaign-directory .admin-ops-actions-cell .admin-table-actions {
    right: 6px;
    gap: 4px;
  }

  .admin-table-campaign-directory .admin-action-menu summary,
  .admin-table-campaign-directory .admin-table-actions > .text-button,
  .admin-table-campaign-directory .admin-table-actions > .primary-button {
    padding-inline: 6px;
    font-size: 0.64rem;
  }

  .admin-table-campaign-directory .admin-table-actions > .text-button {
    min-width: 56px;
  }

  .admin-table-campaign-directory .admin-table-actions > .primary-button {
    min-width: 74px;
    max-width: 76px;
  }

  .admin-table-campaign-directory .status-badge {
    max-width: 84px;
  }
}

@media (max-width: 780px) {
  .admin-table-campaign-directory {
    min-width: 100%;
  }

  .admin-table-campaign-directory .admin-ops-main-cell,
  .admin-table-campaign-directory .admin-ops-contact-cell,
  .admin-table-campaign-directory .admin-ops-status-cell,
  .admin-table-campaign-directory .admin-ops-scan-cell,
  .admin-table-campaign-directory .admin-ops-payment-cell,
  .admin-table-campaign-directory .admin-ops-delivery-cell,
  .admin-table-campaign-directory .admin-ops-date-cell {
    min-width: 0;
    max-width: none;
  }

  .admin-table-campaign-directory .admin-ops-contact-cell,
  .admin-table-campaign-directory .admin-ops-payment-cell,
  .admin-table-campaign-directory .admin-ops-delivery-cell,
  .admin-table-campaign-directory .admin-ops-date-cell {
    display: none;
  }

  .admin-table-campaign-directory .admin-ops-main-cell {
    width: 42%;
  }

  .admin-table-campaign-directory .admin-ops-status-cell,
  .admin-table-campaign-directory .admin-ops-scan-cell {
    width: 20%;
  }

  .admin-table-campaign-directory .admin-ops-actions-cell {
    width: 138px;
    min-width: 138px;
    max-width: 138px;
    right: 16px;
  }

  .admin-table-campaign-directory .admin-table-actions > .text-button {
    min-width: 54px;
  }

  .admin-table-campaign-directory .admin-table-actions > .primary-button {
    min-width: 74px;
    max-width: 76px;
  }
}

@media (max-width: 430px) {
  .admin-table-campaign-directory .admin-ops-status-cell,
  .admin-table-campaign-directory .admin-ops-scan-cell {
    display: none;
  }

  .admin-table-campaign-directory .admin-ops-main-cell {
    width: 68%;
  }

  .admin-table-campaign-directory .admin-ops-actions-cell {
    width: 86px;
    min-width: 86px;
    max-width: 86px;
    right: 18px;
  }

  .admin-table-campaign-directory .admin-ops-actions-cell .admin-table-actions {
    display: grid;
    justify-items: end;
    width: auto;
    gap: 4px;
  }

  .admin-table-campaign-directory .admin-action-menu summary,
  .admin-table-campaign-directory .admin-table-actions > .text-button,
  .admin-table-campaign-directory .admin-table-actions > .primary-button {
    padding-inline: 5px;
    font-size: 0.6rem;
  }

  .admin-table-campaign-directory .admin-table-actions > .text-button {
    min-width: 50px;
  }

  .admin-table-campaign-directory .admin-table-actions > .primary-button {
    min-width: 68px;
    max-width: 78px;
  }
}

body.is-campaign-actions-open {
  overflow: hidden;
}

.admin-campaign-facts-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  max-width: 100%;
  margin-top: 7px;
  min-width: 0;
}

.admin-campaign-fact-pill {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  min-height: 24px;
  border: 1px solid rgba(118, 255, 189, 0.2);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(48, 221, 132, 0.08);
  color: color-mix(in srgb, var(--text) 88%, var(--primary));
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

button.admin-campaign-fact-pill {
  cursor: pointer;
  font: inherit;
}

.admin-campaign-fact-pill.is-link {
  color: var(--primary);
}

.admin-review-next-step-card {
  border-color: rgba(48, 221, 132, 0.36);
  background:
    linear-gradient(135deg, rgba(48, 221, 132, 0.1), rgba(56, 189, 248, 0.06)),
    rgba(13, 23, 38, 0.94);
}

.admin-review-next-step-card.is-blocked {
  border-color: rgba(248, 113, 113, 0.36);
  background:
    linear-gradient(135deg, rgba(248, 113, 113, 0.11), rgba(250, 204, 21, 0.06)),
    rgba(13, 23, 38, 0.94);
}

.admin-campaign-actions-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 18px;
}

.admin-campaign-actions-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 6, 14, 0.72);
  cursor: default;
}

.admin-campaign-actions-sheet {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(680px, calc(100vw - 28px));
  max-height: min(760px, calc(100dvh - 28px));
  gap: 14px;
  min-width: 0;
  overflow: auto;
  border: 1px solid rgba(118, 255, 189, 0.24);
  border-radius: 10px;
  padding: 18px;
  background:
    radial-gradient(circle at top right, rgba(48, 221, 132, 0.12), transparent 30%),
    color-mix(in srgb, var(--surface) 96%, #020617);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
  color: var(--text);
}

.admin-campaign-actions-sheet:focus {
  outline: 2px solid rgba(48, 221, 132, 0.38);
  outline-offset: 3px;
}

.admin-campaign-actions-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.admin-campaign-actions-header h2 {
  margin: 2px 0 3px;
  font-size: 1.14rem;
  line-height: 1.18;
}

.admin-campaign-actions-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.admin-campaign-actions-sections {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.admin-campaign-actions-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-campaign-actions-group h3 {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-campaign-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  min-width: 0;
}

.admin-campaign-actions-grid > * {
  justify-content: center;
  width: 100%;
  min-height: 38px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

@media (max-width: 640px) {
  .admin-campaign-actions-overlay {
    align-items: end;
    padding: 10px;
  }

  .admin-campaign-actions-sheet {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 14px;
    border-radius: 10px;
  }

  .admin-campaign-actions-grid {
    grid-template-columns: 1fr;
  }
}

body.is-admin-review-mode {
  overflow-x: hidden;
}

.admin-shell.is-review-mode {
  display: block;
  width: min(1920px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  padding: 8px 0 18px;
}

.admin-shell.is-review-mode .admin-sidebar,
.admin-shell.is-review-mode .admin-topbar,
.admin-shell.is-review-mode [data-admin-panel="ads"] > .admin-section-heading,
.admin-shell.is-review-mode [data-admin-panel="ads"] > .admin-inbox-toolbar,
.admin-shell.is-review-mode #adminAdsCommandStrip,
.admin-shell.is-review-mode #adminAdsSearchRow {
  display: none !important;
}

.admin-shell.is-review-mode .admin-workspace,
.admin-shell.is-review-mode [data-admin-panel="ads"],
.admin-shell.is-review-mode [data-admin-panel="ads"] > .panel,
.admin-shell.is-review-mode #adminAdsContent {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.admin-shell.is-review-mode .admin-workspace {
  gap: 0;
}

.admin-shell.is-review-mode [data-admin-panel="ads"] > .panel {
  margin: 0;
  border: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.admin-review-workspace-fullscreen {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(220px, 260px);
  align-items: start;
  gap: 12px;
  min-height: calc(100dvh - 20px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.admin-review-workspace-fullscreen.is-queue-collapsed {
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, 260px);
}

.admin-review-queue-restore {
  position: sticky;
  top: 12px;
  align-self: start;
  min-height: 40px;
  border-color: rgba(48, 221, 132, 0.26);
  background: rgba(12, 22, 36, 0.9);
  writing-mode: vertical-rl;
}

.admin-review-workspace-fullscreen.is-empty {
  display: grid;
  place-items: center;
  min-height: 360px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(13, 23, 38, 0.78);
  color: var(--muted);
  text-align: center;
}

.admin-review-queue-rail,
.admin-review-decision-rail,
.admin-review-main {
  min-width: 0;
}

.admin-review-queue-rail,
.admin-review-decision-rail {
  position: sticky;
  top: 12px;
  align-self: start;
  max-height: calc(100vh - 96px);
  overflow: auto;
}

.admin-review-main {
  display: grid;
  gap: 12px;
}

.admin-review-workspace-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(118, 255, 189, 0.18);
  border-radius: 8px;
  background: rgba(14, 24, 40, 0.97);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

.admin-review-title-block,
.admin-review-header-actions,
.admin-review-decision-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-review-title-block {
  justify-content: flex-start;
  align-items: flex-start;
}

.admin-review-title-block > div {
  min-width: 0;
  flex: 1;
}

.admin-review-title-block h2 {
  margin: 2px 0;
  font-size: clamp(1.12rem, 1.5vw, 1.52rem);
  line-height: 1.05;
}

.admin-review-header-meta {
  display: flex;
  min-width: 0;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--muted);
}

.admin-review-header-meta span {
  max-width: min(280px, 48vw);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 3px 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.72rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-review-header-actions {
  justify-content: flex-end;
}

.admin-review-status-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}

.admin-review-status-strip span,
.admin-review-decision-card,
.admin-review-queue-title,
.admin-review-queue-lane {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(10, 20, 36, 0.82);
}

.admin-review-status-strip span {
  display: grid;
  gap: 3px;
  padding: 8px;
}

.admin-review-status-strip small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-review-status-strip strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
}

.admin-review-tabs {
  position: sticky;
  top: 128px;
  z-index: 4;
  display: flex;
  gap: 6px;
  background: rgba(10, 18, 32, 0.96);
  border-radius: 8px;
  padding: 6px;
  overflow-x: auto;
}

.admin-review-tab-body {
  display: grid;
  gap: 12px;
}

.admin-review-queue-title,
.admin-review-queue-lane,
.admin-review-decision-card {
  padding: 12px;
}

.admin-review-queue-title {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.admin-review-queue-lane {
  margin-bottom: 10px;
}

.admin-review-lane-title,
.admin-review-queue-items button {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-review-lane-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 0 8px;
  color: var(--muted);
  font-weight: 900;
}

.admin-review-queue-items {
  display: grid;
  gap: 6px;
}

.admin-review-queue-items button {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.admin-review-queue-items button.is-active,
.admin-review-queue-items button:focus-visible,
.admin-review-queue-items button:hover {
  outline: 2px solid rgba(48, 221, 132, 0.45);
  background: rgba(48, 221, 132, 0.12);
}

.admin-review-queue-items span,
.admin-review-decision-card span,
.admin-review-decision-card small {
  color: var(--muted);
  font-size: 0.75rem;
}

.admin-review-queue-lane.is-green {
  border-color: rgba(48, 221, 132, 0.22);
}

.admin-review-queue-lane.is-yellow {
  border-color: rgba(255, 214, 102, 0.22);
}

.admin-review-queue-lane.is-red {
  border-color: rgba(255, 110, 138, 0.24);
}

.admin-review-decision-card {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.admin-review-rail-section.is-decision {
  border-color: rgba(56, 189, 248, 0.22);
}

.admin-review-rail-section.is-utilities {
  border-color: rgba(148, 163, 184, 0.18);
}

.admin-review-approval-blocked {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 214, 102, 0.24);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 214, 102, 0.08);
}

.admin-review-approval-blocked strong {
  color: var(--ink);
}

.admin-review-decision-actions {
  align-items: stretch;
}

.admin-review-decision-actions > * {
  width: 100%;
  justify-content: center;
}

.admin-review-decision-card.is-muted {
  background: rgba(255, 255, 255, 0.04);
}

.admin-review-ack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-review-issue-matrix .admin-review-history-row {
  margin-top: 10px;
}

.admin-review-no-issues {
  margin: 0;
  border: 1px solid rgba(48, 221, 132, 0.18);
  border-radius: 8px;
  padding: 12px;
  background: rgba(48, 221, 132, 0.08);
}

.admin-owner-summary-grid article.is-primary {
  border-color: rgba(48, 221, 132, 0.3);
  background:
    linear-gradient(135deg, rgba(48, 221, 132, 0.14), rgba(56, 189, 248, 0.08)),
    rgba(10, 20, 36, 0.88);
}

.admin-review-evidence-preview-section .admin-screenshot-proof-grid,
.admin-screenshot-contact-sheet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-review-evidence-preview-section .admin-screenshot-proof-card,
.admin-review-evidence-preview-section .admin-screenshot-card {
  min-width: 0;
}

.admin-review-evidence-preview-section .admin-screenshot-thumb,
.admin-review-evidence-preview-section .admin-screenshot-thumb-placeholder {
  min-height: 148px;
}

.admin-screenshot-thumb-placeholder {
  display: grid;
  place-items: center;
  gap: 4px;
  width: 100%;
  min-height: 118px;
  padding: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.42);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
  color: var(--text);
  text-align: center;
}

.admin-screenshot-thumb-placeholder small {
  color: var(--muted);
  font-size: 0.76rem;
}

.admin-review-evidence-preview-section .admin-screenshot-card {
  height: 100%;
}

@media (max-width: 1180px) {
  .admin-campaign-directory-toolbar {
    grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(120px, 1fr));
  }

  .admin-directory-count {
    justify-self: start;
  }

  .admin-review-workspace-fullscreen {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
  }

  .admin-review-workspace-fullscreen.is-queue-collapsed {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
  }

  .admin-review-queue-rail,
  .admin-review-queue-restore {
    display: none;
  }

  .admin-review-status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .admin-campaign-directory-toolbar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-campaign-directory-toolbar .admin-directory-search-control,
  .admin-campaign-more-filters,
  .admin-directory-count {
    grid-column: 1 / -1;
  }

  .admin-campaign-more-filters .admin-campaign-command-filters {
    position: static;
  }

  .admin-review-workspace-fullscreen {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .admin-review-workspace-header,
  .admin-review-tabs {
    position: static;
    max-height: none;
  }

  .admin-review-decision-rail {
    position: sticky;
    bottom: 0;
    top: auto;
    z-index: 6;
    max-height: min(54vh, 440px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 8px;
    background: linear-gradient(180deg, rgba(2, 6, 14, 0), rgba(2, 6, 14, 0.96) 14px);
  }

  .admin-review-header-actions,
  .admin-review-title-block {
    justify-content: flex-start;
  }

  .admin-review-status-strip,
  .admin-review-ack-grid,
  .admin-review-cta-stat-grid,
  .admin-review-cta-path-card,
  .admin-review-cta-path-details,
  .admin-review-evidence-preview-section .admin-screenshot-proof-grid,
  .admin-screenshot-contact-sheet {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-review-url-inspector {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-review-url-actions {
    flex-wrap: wrap;
    min-width: 0;
  }

  .admin-review-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

@media (max-width: 430px) {
  .admin-campaign-directory-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-review-workspace-header,
  .admin-review-decision-card,
  .admin-review-tab-body > .admin-drawer-section,
  .admin-review-cockpit-section {
    padding: 10px;
  }
}

body.admin-qa-viewer-page .reward-wallet-updated .celebration-stats > div:nth-child(1) small::after {
  color: color-mix(in srgb, var(--primary) 78%, #ffffff);
  content: "Simulated";
}