@import url("https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Fredoka:wght@400;500;600;700&family=Germania+One&family=Nunito:wght@500;700;800;900&family=Pixelify+Sans:wght@400;500;600;700&family=Sancreek&family=Zen+Dots&display=swap");

:root {
  --primary: #0096DB;
  --primary-dark: #005E9E;
  --accent: #3CC7FF;
  --background: #081325;
  --surface: #0d2037;
  --light-surface: #EAF6FF;
  --ink: #EAF6FF;
  --muted: #9FC5DC;
  --panel: rgba(234, 246, 255, 0.08);
  --panel-strong: rgba(234, 246, 255, 0.14);
  --line: rgba(234, 246, 255, 0.16);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
  --font-body: "Nunito", "Trebuchet MS", "Segoe UI", sans-serif;
  --font-display: "Fredoka", "Nunito", "Arial Rounded MT Bold", sans-serif;
  --site-max: 1180px;
  --site-gutter: max(1rem, calc((100vw - var(--site-max)) / 4 + 1.15rem));
}

.creation-body.structure-placeholder-body,
.asset-card-body.structure-placeholder-body,
.spotlight-copy.structure-placeholder-body,
.creator-feature-small-copy.structure-placeholder-body,
.trending-creator-copy.structure-placeholder-body {
  display: grid;
  grid-template-rows: none;
  gap: 0.65rem;
  align-content: start;
}

* {
  box-sizing: border-box;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

.brand-logo,
.hero-brand-logo {
  -webkit-touch-callout: none;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding-top: 5.15rem;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(60, 199, 255, 0.14), transparent 24rem),
    radial-gradient(circle at 82% 18%, rgba(0, 150, 219, 0.18), transparent 28rem),
    linear-gradient(180deg, #0d1a30 0%, var(--background) 24rem),
    var(--background);
  font-family: var(--font-body);
}

main {
  flex: 1 0 auto;
  opacity: 1;
  animation: pageFadeIn 220ms ease both;
  transition: opacity 180ms ease;
}

main.page-loading,
main.page-leaving {
  opacity: 0;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  main {
    animation: none;
    transition: none;
  }

  .logo-hero::after,
  .page-header::after,
  .member-flag::after,
  .asset-member-flag::after,
  .creation-card.is-premium::before,
  .creation-card.is-creator::before {
    animation: none;
  }
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(0.65rem, 1.6vw, 1rem);
  align-items: center;
  padding: 1rem var(--site-gutter);
  border-bottom: 1px solid rgba(22, 32, 30, 0.1);
  background: rgba(8, 19, 37, 0.72);
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  box-shadow: 0 0.85rem 2.2rem rgba(0, 0, 0, 0.18);
}

.brand {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.brand-logo {
  display: block;
  width: clamp(8.5rem, 18vw, 13rem);
  height: auto;
}

.eyebrow,
.card-meta,
.tag-row,
.site-footer,
.chat-heading span {
  color: var(--muted);
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  min-width: 0;
}

.main-nav a,
.filter-strip button {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
}

.main-nav a {
  display: inline-flex;
  gap: 0.38rem;
  align-items: center;
  padding: 0.62rem clamp(0.62rem, 0.9vw, 0.85rem);
  font-weight: 800;
}

.nav-icon {
  width: 1.05rem;
  height: 1.05rem;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.nav-icon.fire-icon {
  color: #ff4d4f;
  stroke: #ff4d4f;
}

.nav-icon.crown-icon {
  color: #f5c451;
  stroke: #f5c451;
}

.main-nav a:hover,
.filter-strip button:hover {
  border-color: rgba(22, 32, 30, 0.14);
  background: rgba(234, 246, 255, 0.1);
}

.main-nav .active-page {
  color: #fff;
  background: var(--primary-dark);
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.45rem;
  min-width: 0;
}

.header-search {
  position: relative;
  flex: 1 1 15rem;
  min-width: min(14rem, 24vw);
  max-width: 21rem;
  z-index: 95;
}

.header-search-box {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  min-height: 2.65rem;
  border: 1px solid rgba(234, 246, 255, 0.16);
  border-radius: 999px;
  padding: 0 0.85rem;
  color: var(--muted);
  background: rgba(234, 246, 255, 0.08);
}

.header-search-box .lucide {
  width: 1rem;
  height: 1rem;
  stroke-width: 2.5;
}

.header-search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 800;
}

.header-search-box input::placeholder {
  color: #b5d9eb;
  opacity: 0.92;
}

.header-search:focus-within .header-search-box {
  border-color: rgba(60, 199, 255, 0.48);
  background: rgba(234, 246, 255, 0.12);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.2);
}

.header-search-results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 120;
  display: grid;
  gap: 0.35rem;
  max-height: min(26rem, calc(100svh - 6rem));
  overflow: auto;
  border: 1px solid rgba(130, 204, 255, 0.22);
  border-radius: 0.85rem;
  padding: 0.45rem;
  background: rgba(8, 19, 37, 0.97);
  box-shadow: 0 1.4rem 3.5rem rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.header-search-results[hidden] {
  display: none !important;
}

.header-search-result {
  display: grid;
  grid-template-columns: 2.55rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-height: 3.05rem;
  border-radius: 0.65rem;
  padding: 0.35rem;
  color: var(--ink);
  text-decoration: none;
}

.header-search-result:hover,
.header-search-result:focus-visible {
  background: rgba(60, 199, 255, 0.12);
}

.header-search-thumb {
  display: block;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 8px;
  background:
    url("assets/missing-placeholder.png") center / 62% no-repeat,
    linear-gradient(145deg, rgba(0, 150, 219, 0.62), rgba(15, 23, 34, 0.96));
}

.header-search-thumb.has-image {
  background-size: cover;
  background-position: center;
}

.header-search-result-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.header-search-result-copy strong,
.header-search-result-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-search-result-copy strong {
  font-size: 0.86rem;
  line-height: 1.1;
}

.header-search-result-copy small,
.header-search-empty {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.header-search-empty {
  padding: 0.7rem 0.8rem;
}

.mobile-menu-wrap {
  display: none;
  position: relative;
}

.mobile-menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 80;
  display: grid;
  gap: 0.6rem;
  width: min(20rem, calc(100vw - 1.5rem));
  max-height: calc(100svh - 5rem);
  overflow: auto;
  border: 1px solid rgba(130, 204, 255, 0.2);
  border-radius: 0.9rem;
  padding: 0.65rem;
  background: rgba(8, 19, 37, 0.96);
  box-shadow: 0 1.4rem 3.5rem rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.mobile-menu-section {
  display: grid;
  gap: 0.25rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(130, 204, 255, 0.12);
}

.mobile-menu-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.mobile-menu a,
.mobile-menu button {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  min-height: 2.35rem;
  border: 0;
  border-radius: 0.65rem;
  padding: 0 0.65rem;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 850;
  text-align: left;
  text-decoration: none;
}

.mobile-menu a:hover,
.mobile-menu button:hover {
  background: rgba(60, 199, 255, 0.12);
}

.mobile-menu .lucide {
  width: 1rem;
  height: 1rem;
  stroke-width: 2.4;
}

.mobile-menu-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.15rem 0.35rem 0.25rem;
}

.mobile-menu-heading strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.mobile-menu-heading a {
  display: inline-flex;
  min-height: 0;
  padding: 0;
  color: var(--accent);
  font-size: 0.72rem;
}

.ghost-button,
.solid-button,
.copy-button,
.search-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.55rem;
  border-radius: 999px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  background: rgba(234, 246, 255, 0.08);
}

.ghost-button .lucide,
.solid-button .lucide,
.copy-button .lucide,
.search-row button .lucide {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}

.solid-button,
.search-row button,
.copy-button {
  border-color: transparent;
  color: #fff;
  background: var(--primary);
}

.solid-link,
.ghost-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  border-radius: 999px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  background: rgba(234, 246, 255, 0.08);
}

.solid-link {
  border-color: transparent;
  color: #fff;
  background: var(--primary);
}

.compact-link {
  min-height: 2.35rem;
}

main {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
}

.logo-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: grid;
  justify-items: center;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.75rem);
  text-align: center;
}

.logo-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      to right,
      rgba(60, 199, 255, 0.1) 0,
      rgba(60, 199, 255, 0.1) 1px,
      transparent 1px,
      transparent 42px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(60, 199, 255, 0.08) 0,
      rgba(60, 199, 255, 0.08) 1px,
      transparent 1px,
      transparent 42px
    ),
    linear-gradient(128deg, rgba(60, 199, 255, 0.14) 0, transparent 36%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.35) 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.35) 80%, transparent 100%);
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.logo-hero::after,
.page-header::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 100vw;
  height: calc(100% + 1px);
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      to right,
      rgba(132, 224, 255, 0.34) 0,
      rgba(132, 224, 255, 0.34) 1px,
      transparent 1px,
      transparent 42px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(132, 224, 255, 0.28) 0,
      rgba(132, 224, 255, 0.28) 1px,
      transparent 1px,
      transparent 42px
    );
  opacity: 0;
  transform: translateX(-50%);
  animation: blueprint-swipe 8s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(102deg, transparent 0%, rgba(0, 0, 0, 0.18) 18%, #000 48%, rgba(0, 0, 0, 0.25) 72%, transparent 100%);
  mask-image: linear-gradient(102deg, transparent 0%, rgba(0, 0, 0, 0.18) 18%, #000 48%, rgba(0, 0, 0, 0.25) 72%, transparent 100%);
  -webkit-mask-size: 36vw 100%;
  mask-size: 36vw 100%;
  -webkit-mask-position: -42vw 0;
  mask-position: -42vw 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@keyframes blueprint-swipe {
  0%,
  28% {
    opacity: 0;
    -webkit-mask-position: -42vw 0;
    mask-position: -42vw 0;
  }
  40% {
    opacity: 0.52;
  }
  68% {
    opacity: 0.34;
    -webkit-mask-position: 106vw 0;
    mask-position: 106vw 0;
  }
  78%,
  100% {
    opacity: 0;
    -webkit-mask-position: 106vw 0;
    mask-position: 106vw 0;
  }
}

.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: start;
  min-height: 24rem;
  margin-top: -1px;
  margin-bottom: 4rem;
}

.page-header::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 100vw;
  height: calc(100% + 1px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      to right,
      rgba(60, 199, 255, 0.1) 0,
      rgba(60, 199, 255, 0.1) 1px,
      transparent 1px,
      transparent 42px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(60, 199, 255, 0.08) 0,
      rgba(60, 199, 255, 0.08) 1px,
      transparent 1px,
      transparent 42px
    ),
    linear-gradient(128deg, rgba(60, 199, 255, 0.14) 0, transparent 36%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.35) 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.35) 80%, transparent 100%);
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.page-header > * {
  position: relative;
  z-index: 2;
}

.logo-hero > * {
  position: relative;
  z-index: 2;
}

.logo-hero > *,
.page-header > * {
  position: relative;
  z-index: 2;
}

.hero-brand-logo {
  display: block;
  width: min(54rem, 100%);
  height: auto;
  filter: drop-shadow(0 28px 60px rgba(0, 150, 219, 0.28));
}

.hero-logo-shell {
  position: relative;
  display: block;
  width: min(54rem, 100%);
  margin-bottom: clamp(1rem, 3vw, 1.6rem);
}

.hero-soon-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  margin-left: 0.4rem;
  border: 1px solid rgba(245, 196, 81, 0.36);
  border-radius: 999px;
  padding: 0.06rem 0.58rem 0;
  color: #ffe6a8;
  background: rgba(245, 196, 81, 0.12);
  font-size: 0.74rem;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.logo-hero p:not(.eyebrow),
.page-header p:not(.eyebrow) {
  max-width: 42rem;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.6;
}

.premium-support-note {
  max-width: 50rem !important;
  margin-top: 0.2rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.98rem !important;
  color: #c4deef !important;
  text-align: center;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  margin-top: 1.3rem;
}

.page-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(2rem, 6vw, 4.5rem) 0 1rem;
  padding-left: clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 3vw, 2rem);
}

.page-header h1 {
  max-width: 55rem;
}

.legal-page-header h1 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.02;
}

.legal-content h2 {
  font-size: clamp(1.18rem, 2.1vw, 1.5rem);
  line-height: 1.1;
}

.fairplay-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.7rem;
  padding-top: clamp(3.5rem, 8vw, 6.5rem);
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}

.fairplay-hero h1 {
  max-width: 42rem;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
}

.fairplay-hero p {
  max-width: 38rem;
  margin: 0;
  color: #bfe9ff;
}

.fairplay-hero-icon {
  width: 4rem;
  height: 4rem;
  color: #87ffbf;
  border-color: rgba(135, 255, 191, 0.4);
  background: rgba(112, 217, 150, 0.16);
  box-shadow: 0 0 34px rgba(112, 217, 150, 0.18);
}

.fairplay-hero-icon svg {
  width: 2rem;
  height: 2rem;
}

.fairplay-content {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.4rem);
  max-width: 72rem;
}

.fairplay-intro {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  max-width: 50rem;
  margin: 0 auto;
  text-align: center;
}

.fairplay-intro h2,
.fairplay-card h2,
.fairplay-agreement h2 {
  margin: 0;
}

.fairplay-intro p,
.fairplay-card p,
.fairplay-agreement p {
  margin: 0;
  color: #c4deef;
  line-height: 1.65;
}

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

.fairplay-card,
.fairplay-agreement {
  border: 1px solid rgba(130, 204, 255, 0.16);
  border-radius: 1rem;
  background: rgba(13, 32, 55, 0.72);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}

.fairplay-card {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.9rem;
  padding: 1.25rem;
  text-align: center;
}

.fairplay-card-icon {
  color: #3cc7ff;
  border-color: rgba(60, 199, 255, 0.32);
  background: rgba(60, 199, 255, 0.12);
  box-shadow: none;
}

.fairplay-card-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.fairplay-agreement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.35rem;
}

.premium-centered.page-header {
  justify-items: center;
  text-align: center;
  gap: 0.55rem;
  padding-top: clamp(1.4rem, 4vw, 2.4rem);
}

.premium-centered.page-header h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.5rem);
  max-width: 28rem;
}

.creators-centered.page-header {
  justify-items: center;
  text-align: center;
  gap: 0.55rem;
  padding-top: clamp(1.4rem, 4vw, 2.4rem);
}

.creators-centered.page-header h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.5rem);
  max-width: 28rem;
}

.creators-hero {
  margin-top: 0;
}

.premium-hero {
  margin-top: 0;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 1rem;
  align-items: stretch;
  padding: clamp(1.25rem, 4vw, 3rem) 0 1.25rem;
}

.search-panel,
.stats-panel,
.creation-card,
.spotlight,
.news-feed,
.chat-band {
  border: 1px solid rgba(22, 32, 30, 0.1);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.search-panel {
  padding: clamp(1.25rem, 4vw, 2rem);
}

.intro {
  max-width: 50rem;
}

.eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

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

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  max-width: 48rem;
  margin-bottom: 1rem;
  font-size: clamp(2.25rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: 0;
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 0;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 0.98;
}

h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 0.55rem;
  font-size: 1.18rem;
  line-height: 1.05;
}

.page-header h1,
.logo-hero h1,
.section-heading h2,
.icon-title h2,
.plan-tier,
.plan-price,
.faq-list summary {
  font-weight: 600 !important;
}

.icon-title {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.icon-title > div {
  display: grid;
  gap: 0.05rem;
}

.icon-title .eyebrow {
  margin-bottom: 0;
  line-height: 1;
}

.icon-title h2,
.icon-title h3 {
  margin-bottom: 0;
}

.icon-badge {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border: 1px solid rgba(60, 199, 255, 0.3);
  border-radius: 999px;
  color: var(--light-surface);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 12px 30px rgba(0, 150, 219, 0.22);
}

.icon-badge.small {
  width: 2rem;
  height: 2rem;
}

.icon-badge svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.page-header > .icon-badge,
.page-header .page-kicker .icon-badge {
  width: 4rem;
  height: 4rem;
  color: #3cc7ff;
  border-color: rgba(60, 199, 255, 0.38);
  background: rgba(60, 199, 255, 0.14);
  box-shadow: 0 0 34px rgba(60, 199, 255, 0.18);
}

.page-header > .icon-badge svg,
.page-header .page-kicker .icon-badge svg {
  width: 1.9rem;
  height: 1.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.premium-hero > .icon-badge {
  color: #f5c451;
  border-color: rgba(245, 196, 81, 0.48);
  background: rgba(245, 196, 81, 0.14);
  box-shadow: 0 0 34px rgba(245, 196, 81, 0.18);
}

.fire-badge {
  border-color: rgba(255, 138, 42, 0.38);
  background: linear-gradient(135deg, #ff8a2a, #c5401b);
  box-shadow: 0 12px 30px rgba(255, 138, 42, 0.22);
}

.page-kicker {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.page-kicker .eyebrow {
  margin-bottom: 0;
}

.browse-hero {
  justify-items: center;
  text-align: center;
  gap: 0.8rem;
}

.browse-hero .page-kicker {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  margin-bottom: 0;
}

.browse-hero h1 {
  max-width: 34rem;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.browse-hero p:not(.eyebrow) {
  max-width: 48rem;
  color: #c4deef;
}

.intro p:not(.eyebrow),
.creation-body p,
.spotlight-copy p,
.news-item p {
  color: var(--muted);
  line-height: 1.55;
}

.search-box {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.search-box.flush {
  margin-top: 0;
}

.search-box label {
  display: block;
  margin-bottom: 0.45rem;
  font-weight: 750;
}

.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
}

.browse-search-wrap {
  position: relative;
  min-width: 0;
}

.search-row input {
  width: 100%;
  min-height: 3.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 1rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.1);
}

.browse-placeholder-preview {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 50%;
  overflow: hidden;
  color: rgba(234, 246, 255, 0.54);
  pointer-events: none;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  transition: opacity 180ms ease;
  white-space: nowrap;
}

.browse-search-wrap:focus-within .browse-placeholder-preview,
.browse-search-wrap:has(input:not(:placeholder-shown)) .browse-placeholder-preview {
  opacity: 0;
}

.browse-placeholder-preview.placeholder-fading {
  opacity: 0.38;
}

.assets-hero .icon-badge {
  color: var(--accent);
}

.assets-hero {
  display: grid;
  justify-items: center;
  text-align: center;
}

.assets-hero p:not(.eyebrow) {
  margin-inline: auto;
}

.assets-band {
  background: transparent;
}

.assets-info-band {
  background: transparent;
}

.assets-browser-band {
  background: transparent;
}

.assets-uploads-band {
  background: transparent;
}

.assets-browser-band,
.assets-band,
.assets-uploads-band,
.assets-info-band {
  margin-top: clamp(2.2rem, 5vw, 3.8rem);
}

.assets-hero + .assets-workspace {
  margin-top: clamp(1.4rem, 4vw, 2.6rem);
}

.news-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.8rem;
}

.news-hero h1 {
  max-width: 34rem;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.news-hero p:not(.eyebrow) {
  margin-inline: auto;
  max-width: 48rem;
  color: #c4deef;
}

.news-article-shell {
  background: transparent;
}

.news-post {
  overflow: hidden;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 18px;
  background: rgba(234, 246, 255, 0.07);
  box-shadow: var(--shadow);
}

.featured-news-post {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
  align-items: stretch;
}

.news-post-media {
  display: block;
  align-self: stretch;
  width: 100%;
  min-height: clamp(18rem, 42vw, 34rem);
  height: 100%;
}

.media-arcade-update {
  background:
    linear-gradient(180deg, rgba(4, 13, 28, 0.02), rgba(4, 13, 28, 0.24)),
    url("assets/article-arcade-update.png") center center / cover no-repeat,
    linear-gradient(145deg, #0096DB 0%, #005E9E 52%, #0F1722 100%);
}

.news-post-content {
  display: grid;
  gap: 0.95rem;
  padding: clamp(1.2rem, 4vw, 2.2rem);
  background:
    linear-gradient(135deg, rgba(13, 32, 55, 0.96), rgba(8, 19, 37, 0.94)),
    rgba(234, 246, 255, 0.08);
}

.news-post-content h2,
.news-post-content p {
  margin: 0;
}

.news-post-content h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.02;
}

.news-post-content p {
  color: #c4deef;
  font-size: 1rem;
  line-height: 1.65;
}

.news-post-content .news-editor-line,
.news-card .news-editor-line {
  color: #9edfff;
  font-size: 0.88rem;
  font-weight: 850;
}

.news-editor-line strong {
  color: #fff;
}

.news-editor-line span {
  color: var(--muted);
}

.news-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.news-post-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  border: 1px solid rgba(60, 199, 255, 0.26);
  border-radius: 999px;
  padding: 0.08rem 0.62rem 0;
  color: #9edfff;
  background: rgba(60, 199, 255, 0.1);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.news-post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.35rem;
}

.article-like-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 2.35rem;
  border: 1px solid rgba(60, 199, 255, 0.3);
  border-radius: 999px;
  padding: 0.12rem 0.82rem 0;
  color: #d7f1ff;
  background: rgba(60, 199, 255, 0.1);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 950;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, opacity 180ms ease;
}

.article-like-button svg {
  width: 1rem;
  height: 1rem;
}

.article-like-button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(60, 199, 255, 0.62);
  background: rgba(60, 199, 255, 0.18);
}

.article-like-button.is-liked {
  border-color: rgba(112, 217, 150, 0.5);
  color: #8ce6ad;
  background: rgba(112, 217, 150, 0.12);
}

.article-like-button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.news-admin-feed {
  margin-top: clamp(3rem, 7vw, 5rem);
}

.news-article-shell {
  margin-bottom: clamp(6rem, 12vw, 10rem);
}

.news-admin-composer {
  display: grid;
  gap: 1rem;
}

.news-admin-composer[hidden] {
  display: none;
}

.news-admin-form {
  display: grid;
  gap: 0.9rem;
}

.home-feature-admin-form {
  display: grid;
  gap: 0.9rem;
}

.staff-panel-intro {
  display: grid;
  gap: 0.75rem;
  border: 1px solid rgba(234, 246, 255, 0.11);
  border-radius: 8px;
  padding: 0.85rem;
  color: var(--muted);
  background: rgba(234, 246, 255, 0.045);
}

.staff-panel-intro p {
  margin: 0;
  line-height: 1.45;
}

.staff-panel-intro strong {
  color: #fff;
}

.home-feature-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.home-feature-guide span {
  display: grid;
  gap: 0.18rem;
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 8px;
  padding: 0.62rem;
  color: #afd2e7;
  background: rgba(0, 0, 0, 0.12);
  font-size: 0.82rem;
  font-weight: 800;
}

.home-feature-guide strong {
  color: var(--accent);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.home-feature-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.home-feature-slot-card {
  display: grid;
  gap: 0.72rem;
  border: 1px solid rgba(234, 246, 255, 0.13);
  border-radius: 8px;
  padding: 0.85rem;
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.075), rgba(245, 196, 81, 0.035)),
    rgba(13, 32, 55, 0.58);
}

.home-feature-slot-card h3,
.home-feature-slot-card p {
  margin: 0;
}

.home-feature-slot-card h3 {
  margin-top: 0.18rem;
  color: #fff;
}

.home-feature-slot-card p {
  color: var(--muted);
  line-height: 1.4;
}

.home-feature-slot-card > div > span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.news-admin-form label,
.home-feature-admin-form label {
  display: grid;
  gap: 0.45rem;
  color: var(--muted);
  font-weight: 850;
}

.news-admin-form input,
.news-admin-form select,
.news-admin-form textarea,
.home-feature-admin-form input,
.home-feature-admin-form select,
.home-feature-admin-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.78rem 0.9rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
  font: inherit;
}

.home-feature-admin-form textarea {
  min-height: 8rem;
  resize: vertical;
}

.feature-candidate-finder {
  display: grid;
  gap: 1rem;
  border: 1px solid rgba(158, 223, 255, 0.16);
  border-radius: 8px;
  padding: 1rem;
  background: rgba(4, 12, 22, 0.34);
}

.feature-candidate-finder h3 {
  margin: 0;
  color: #fff;
}

.feature-candidate-controls {
  display: grid;
  grid-template-columns: minmax(9rem, 0.8fr) minmax(14rem, 1.4fr) minmax(10rem, 0.9fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.feature-candidate-controls label {
  display: grid;
  gap: 0.45rem;
  color: var(--muted);
  font-weight: 850;
}

.feature-candidate-controls input,
.feature-candidate-controls select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.78rem 0.9rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
  font: inherit;
}

.feature-candidate-controls select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%) calc(100% - 1.05rem) 50% / 0.45rem 0.45rem no-repeat,
    linear-gradient(135deg, rgba(234, 246, 255, 0.12), rgba(234, 246, 255, 0.07));
}

.feature-candidate-controls select option {
  color: #0f1722;
  background: #eaf6ff;
}

.feature-candidate-results {
  display: grid;
  gap: 0.65rem;
}

.feature-candidate-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 8px;
  padding: 0.8rem;
  background: rgba(234, 246, 255, 0.055);
}

.feature-candidate-card span {
  color: #9edfff;
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.feature-candidate-card h4,
.feature-candidate-card p {
  margin: 0;
}

.feature-candidate-card h4 {
  color: #fff;
}

.feature-candidate-card code {
  display: inline-block;
  max-width: 100%;
  margin-top: 0.35rem;
  border-radius: 8px;
  padding: 0.28rem 0.45rem;
  color: #dff6ff;
  background: rgba(0, 150, 219, 0.14);
  overflow-wrap: anywhere;
}

.feature-candidate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.news-admin-form select,
.home-feature-admin-form select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%) calc(100% - 1.05rem) 50% / 0.45rem 0.45rem no-repeat,
    linear-gradient(135deg, rgba(234, 246, 255, 0.12), rgba(234, 246, 255, 0.07));
}

.news-admin-form select option,
.home-feature-admin-form select option,
.profile-mini-form select option,
.staff-comparison-table select option {
  color: #0f1722;
  background: #eaf6ff;
}

.news-admin-form textarea {
  resize: vertical;
  min-height: 12rem;
}

.news-image-preview {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.75rem;
  background: rgba(234, 246, 255, 0.06);
}

.news-image-preview img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  object-fit: cover;
}

.news-image-preview span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-upload-field input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.news-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: fit-content;
  min-height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 0.95rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
}

.news-upload-button svg {
  width: 1rem;
  height: 1rem;
}

.news-format-toolbar {
  margin-top: -0.35rem;
}

.news-markdown-preview {
  display: grid;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem;
  background: rgba(234, 246, 255, 0.045);
}

.news-markdown-preview > span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 950;
  text-transform: uppercase;
}

.trending-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.8rem;
}

.trending-hero h1 {
  max-width: 34rem;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.trending-hero p:not(.eyebrow) {
  margin-inline: auto;
  max-width: 48rem;
  color: #c4deef;
}

.trending-controls {
  display: grid;
  justify-items: center;
  padding-top: 0;
  margin: clamp(1.4rem, 4vw, 2.6rem) auto 0;
}

.trending-game-toggle {
  width: min(100%, 30rem);
  text-align: center;
}

.trending-section {
  margin-top: clamp(8rem, 14vw, 12rem);
}

.trending-creator-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.trending-creator-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(10rem, auto) minmax(0, 1fr);
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 14px;
  overflow: visible;
  background: rgba(234, 246, 255, 0.07);
  box-shadow: var(--shadow);
}

.trending-creator-card.is-verified-creator {
  border-color: rgba(112, 217, 150, 0.42);
}

.trending-creator-media {
  min-height: 10rem;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.trending-creator-card .hot-rank {
  left: 0.75rem;
  right: auto;
}

.trending-creator-copy {
  display: grid;
  gap: 0.65rem;
  align-content: start;
  padding: 1rem;
  background: rgba(8, 19, 37, 0.34);
}

.trending-creator-copy h3,
.trending-creator-copy p {
  margin: 0;
}

.trending-creator-copy h3 a {
  color: var(--ink);
  text-decoration: none;
  transition: color 180ms ease;
}

.trending-creator-copy h3 a:hover {
  color: var(--accent);
}

.trending-creator-copy p {
  color: var(--muted);
  line-height: 1.45;
}

.trending-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: auto;
}

.trending-stat-row span {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  border: 1px solid rgba(60, 199, 255, 0.18);
  border-radius: 999px;
  padding: 0 0.62rem;
  color: #9edfff;
  background: rgba(60, 199, 255, 0.1);
  font-size: 0.78rem;
  font-weight: 900;
}

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

.trending-empty {
  margin-top: clamp(2.6rem, 6vw, 4.2rem);
}

.assets-band + .assets-info-band {
  margin-top: clamp(3.6rem, 7vw, 5.6rem);
}

.assets-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: stretch;
}

.asset-info-grid article,
.asset-info-split article {
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 24px;
  background: rgba(234, 246, 255, 0.07);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.asset-upload-panel,
.asset-preview-panel {
  padding: 0;
}

.asset-preview-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(234, 246, 255, 0.06);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  padding: clamp(1rem, 4vw, 1.8rem);
}

.asset-upload-panel {
  padding-top: clamp(1rem, 4vw, 1.8rem);
  width: min(760px, 100%);
  margin-inline: auto;
}

.simple-heading {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.2rem;
  text-align: left;
}

.simple-heading h2,
.simple-heading p {
  margin: 0;
}

.simple-heading p {
  max-width: 46rem;
  color: var(--muted);
}

.section-heading.preview-heading {
  gap: 0.35rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(234, 246, 255, 0.14);
}

.asset-login-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 1rem;
  border: 1px solid rgba(60, 199, 255, 0.2);
  border-radius: 18px;
  padding: 0.9rem;
  background: rgba(0, 150, 219, 0.12);
}

.asset-login-notice[hidden] {
  display: none;
}

.asset-login-notice > .lucide {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--accent);
}

.asset-login-notice strong,
.asset-login-notice p {
  margin: 0;
}

.asset-login-notice p {
  color: var(--muted);
}

.asset-form {
  display: grid;
  gap: 1rem;
  width: min(760px, 100%);
  margin-inline: auto;
}

.asset-form label {
  display: grid;
  gap: 0.55rem;
  font-weight: 800;
}

.asset-form > label {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.asset-form > label > input:not([type="file"]),
.asset-form > label > textarea,
.asset-form > label > select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(234, 246, 255, 0.08);
  color: var(--ink);
  padding: 0.68rem 0.85rem;
}

.asset-form > label > select option {
  color: #081325;
  background: #eaf6ff;
}

.asset-form > label > textarea {
  resize: vertical;
}

.asset-file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.2rem;
  border: 1px solid rgba(60, 199, 255, 0.28);
  border-radius: 999px;
  padding: 0 1rem;
  color: #fff;
  background: rgba(234, 246, 255, 0.09);
  overflow: hidden;
}

.asset-file-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  color: transparent;
  cursor: pointer;
  font-size: 0;
}

.asset-file-button input::file-selector-button {
  display: none;
}

.asset-file-button input[disabled] {
  opacity: 0;
}

.asset-audio-rights-field {
  display: grid;
  gap: 0.65rem;
  border: 1px solid rgba(60, 199, 255, 0.18);
  border-radius: 8px;
  padding: 0.75rem;
  background: rgba(234, 246, 255, 0.055);
}

.asset-audio-rights-field[hidden] {
  display: none !important;
}

.asset-audio-rights-field input[type="text"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.72rem 0.8rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
  font: inherit;
}

.asset-rights-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 0.55rem !important;
  color: #c7e6f6;
  font-size: 0.84rem;
  line-height: 1.35;
}

.asset-rights-check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

.asset-type-rules,
.asset-choice-buttons,
.asset-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  align-items: center;
}

.asset-form-actions {
  justify-content: flex-start;
}

.asset-storage-meter {
  display: grid;
  gap: 0.45rem;
  margin-top: -0.1rem;
}

.asset-storage-meter-top {
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.asset-storage-meter-top strong {
  color: #78f2a5;
}

.asset-storage-track {
  display: block;
  width: 100%;
  height: 0.58rem;
  overflow: hidden;
  border: 1px solid rgba(120, 242, 165, 0.28);
  border-radius: 999px;
  background: rgba(8, 19, 37, 0.72);
  box-shadow: inset 0 0 0 1px rgba(234, 246, 255, 0.04);
}

.asset-storage-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #25d366, #78f2a5);
  box-shadow: 0 0 18px rgba(120, 242, 165, 0.38);
  transition: width 260ms ease;
}

.asset-type-rules span {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 999px;
  min-height: 1.65rem;
  padding: 0.28rem 0.5rem;
  color: var(--muted);
  background: rgba(8, 19, 37, 0.5);
  font-size: 0.72rem;
  font-weight: 800;
}

.asset-type-rules .lucide {
  width: 0.78rem;
  height: 0.78rem;
}

.asset-safety-card {
  display: grid;
  gap: 0.75rem;
  align-items: start;
  border: 1px solid rgba(124, 226, 176, 0.24);
  border-radius: 14px;
  padding: 0.85rem;
  background:
    linear-gradient(135deg, rgba(124, 226, 176, 0.12), rgba(60, 199, 255, 0.08)),
    rgba(234, 246, 255, 0.05);
}

.asset-safety-card .lucide {
  width: 1rem;
  height: 1rem;
}

.asset-safety-card strong,
.asset-safety-card p,
.asset-safety-card ol {
  margin: 0;
}

.asset-safety-card strong {
  color: #eaf6ff;
  font-size: 0.92rem;
}

.asset-safety-card p {
  color: #b9d8eb;
  font-size: 0.78rem;
  line-height: 1.45;
}

.asset-safety-timeline ol {
  display: grid;
  gap: 0.62rem;
  margin-top: 0.72rem;
  padding: 0;
  list-style: none;
}

.asset-safety-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
}

.asset-safety-timeline li + li::before {
  content: "";
  position: absolute;
  left: 0.94rem;
  top: -0.56rem;
  width: 1px;
  height: 0.5rem;
  background: rgba(124, 226, 176, 0.38);
}

.asset-safety-timeline li > span {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  color: #7ce2b0;
  background: rgba(124, 226, 176, 0.14);
}

.asset-safety-timeline li p {
  display: grid;
  gap: 0.08rem;
}

.asset-safety-timeline small {
  color: #b9d8eb;
  font-size: 0.74rem;
  line-height: 1.35;
}

.asset-upload-game-note {
  margin: -0.15rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.asset-upload-game-note strong {
  color: #d9f4ff;
}

.asset-choice-group {
  display: grid;
  gap: 0.7rem;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 20px;
  padding: 0.9rem;
  background: rgba(8, 19, 37, 0.38);
}

.asset-choice-group[hidden] {
  display: none;
}

.asset-choice-group p,
.asset-choice-group small {
  margin: 0;
}

.asset-choice-group small {
  color: var(--muted);
}

.asset-choice {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  min-height: 2.55rem;
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 999px;
  padding: 0 0.85rem;
  color: #fff;
  background: rgba(234, 246, 255, 0.08);
}

.asset-choice.active {
  border-color: rgba(60, 199, 255, 0.55);
  background: rgba(0, 150, 219, 0.24);
}

.asset-save-button[disabled],
.asset-form [disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.screen-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.58fr);
  gap: clamp(1rem, 4vw, 2rem);
  align-items: center;
  min-height: 25rem;
  perspective: 1100px;
}

.screen-model {
  position: relative;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.landscape-screen {
  transform: rotateX(6deg) rotateY(-12deg);
}

.portrait-screen {
  transform: rotateX(5deg) rotateY(14deg) translateY(1rem);
}

.screen-glass {
  position: relative;
  width: min(100%, 31rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 0.7rem solid rgba(234, 246, 255, 0.12);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(60, 199, 255, 0.24), rgba(0, 94, 158, 0.34)),
    rgba(8, 19, 37, 0.8);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 28px 58px rgba(0, 0, 0, 0.34);
}

.portrait-screen .screen-glass {
  width: min(100%, 14rem);
  aspect-ratio: 9 / 16;
}

.screen-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.2), transparent 24%, transparent 64%, rgba(255, 255, 255, 0.1));
  pointer-events: none;
}

.screen-glass img,
.screen-glass video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.screen-glass img {
  display: block;
}

.screen-glass[data-preview-fit="contain"] img {
  object-fit: cover;
}

.screen-glass[data-preview-fit="cover"] img {
  object-fit: cover;
}

.screen-glass.portrait-fit img {
  object-fit: cover;
}

.screen-empty {
  display: grid;
  place-items: center;
  gap: 0.45rem;
  height: 100%;
  color: rgba(234, 246, 255, 0.72);
  font-weight: 900;
}

.screen-empty .lucide {
  width: 2.3rem;
  height: 2.3rem;
  color: var(--accent);
}

.screen-stand {
  width: 28%;
  height: 4.2rem;
  margin-top: -0.1rem;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, rgba(234, 246, 255, 0.26), rgba(0, 94, 158, 0.18));
  transform: translateZ(-24px);
}

.asset-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}

.asset-info-split {
  display: grid;
  grid-template-columns: minmax(18rem, 0.85fr) minmax(20rem, 1.15fr);
  gap: clamp(1rem, 2.5vw, 1.6rem);
  align-items: stretch;
}

.asset-info-grid article,
.asset-info-split article {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1.2rem;
}

.asset-info-grid h3,
.asset-info-grid p,
.asset-info-split h3,
.asset-info-split p {
  margin: 0;
}

.asset-info-title {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.asset-info-title .lucide {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
}

.asset-info-grid p,
.asset-info-split p {
  color: var(--muted);
}

.asset-policy-card ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #c4deef;
}

.asset-policy-card li {
  position: relative;
  padding-left: 1.25rem;
}

.asset-policy-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(60, 199, 255, 0.42);
}

.asset-policy-card .ghost-link {
  justify-self: start;
  margin-top: 0.2rem;
}

.asset-allowance-table {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 14px;
  background: rgba(8, 19, 37, 0.34);
}

.asset-allowance-table div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.68rem 0.8rem;
}

.asset-allowance-table div + div {
  border-top: 1px solid rgba(234, 246, 255, 0.1);
}

.asset-allowance-table span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.asset-allowance-table strong {
  color: #fff;
  font-size: 1.05rem;
}

.muted-icon {
  color: rgba(159, 197, 220, 0.86);
  background: rgba(159, 197, 220, 0.12);
}

.asset-browser-tools {
  display: grid;
  grid-template-columns: auto minmax(18rem, 1fr) auto;
  gap: 1rem;
  align-items: end;
  margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
}

.asset-browser-tools .game-toggle-wrap {
  min-width: min(100%, 25rem);
}

.asset-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.assets-filter-top {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

@media (min-width: 681px) {
  .assets-filter-top {
    grid-template-columns: minmax(23rem, 0.9fr) minmax(18rem, 1.1fr);
  }
}

.assets-filter-top .asset-filter-row {
  align-self: end;
}

.asset-media-tags {
  margin-top: 0;
}

.asset-filter-row label,
.asset-tag-filter {
  font-weight: 850;
}

.asset-filter-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 999px;
  padding: 0 0.72rem;
  color: #c4deef;
  background: rgba(234, 246, 255, 0.06);
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

.asset-filter-row input {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-items: center;
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  border: 2px solid rgba(60, 199, 255, 0.7);
  border-radius: 50%;
  background: rgba(15, 23, 34, 0.82);
  cursor: pointer;
}

.asset-filter-row input::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  transform: scale(0);
  background: var(--accent);
  transition: transform 150ms ease;
}

.asset-filter-row input:checked::before {
  transform: scale(1);
}

.asset-filter-row label:has(input:checked) {
  border-color: rgba(60, 199, 255, 0.55);
  color: #fff;
  background: rgba(0, 150, 219, 0.18);
}

.asset-filter-row label.is-disabled {
  opacity: 0.58;
}

.asset-upload-type {
  display: grid;
  gap: 0.6rem;
}

.asset-upload-tags {
  min-height: 0;
}

.asset-upload-type p {
  margin: 0;
  font-weight: 850;
}

.asset-tag-filter {
  display: grid;
  gap: 0.45rem;
}

.asset-tag-filter input {
  min-height: 3.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 1rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.1);
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 0.8rem;
  row-gap: 1.1rem;
}

.asset-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 10.5rem;
  border: 2px solid rgba(234, 246, 255, 0.1);
  border-radius: 14px;
  background: rgba(234, 246, 255, 0.07);
  overflow: visible;
}

.asset-card.asset-premium {
  border-color: rgba(242, 171, 47, 0.38);
}

.asset-card.asset-creator {
  border-color: rgba(112, 217, 150, 0.46);
}

.asset-grid-ad {
  align-content: stretch;
  gap: 0.65rem;
  min-height: 10.5rem;
  padding: 0.72rem;
  border-color: rgba(60, 199, 255, 0.28);
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.14), rgba(245, 196, 81, 0.07)),
    rgba(234, 246, 255, 0.07);
  overflow: hidden;
}

.asset-grid-ad .ad-label {
  position: relative;
  z-index: 1;
}

.asset-grid-ad-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.4rem;
  align-content: center;
}

.asset-grid-ad h3,
.asset-grid-ad p {
  margin: 0;
}

.asset-grid-ad h3 {
  font-size: 0.86rem;
  line-height: 1.05;
}

.asset-grid-ad p {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.25;
}

.asset-grid-ad .ghost-button {
  position: relative;
  z-index: 1;
  justify-self: start;
  min-height: 2rem;
  padding-inline: 0.7rem;
  font-size: 0.72rem;
  font-weight: 900;
}

.asset-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(135deg, rgba(0, 150, 219, 0.82), rgba(0, 94, 158, 0.72)),
    #0d2440;
  overflow: hidden;
}

a.asset-thumb {
  color: inherit;
  text-decoration: none;
}

.asset-thumb::after {
  display: none;
}

.asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-card:has(.asset-audio-preview) {
  grid-column: span 2;
}

.asset-thumb:has(.asset-audio-preview),
.asset-thumb:has(video) {
  overflow: visible;
}

.asset-thumb:has(.asset-audio-preview) {
  aspect-ratio: auto;
  min-height: 5.25rem;
  border-radius: 12px 12px 0 0;
}

.asset-audio-preview {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  width: 100%;
  padding: 0.85rem;
}

.asset-audio-preview audio {
  width: min(16rem, 100%);
  height: 2.1rem;
}

.asset-thumb .lucide {
  width: 1.25rem;
  height: 1.25rem;
  color: rgba(234, 246, 255, 0.88);
}

.asset-kind-pill,
.asset-member-flag {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  overflow: hidden;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 950;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.asset-kind-pill {
  left: 0.36rem;
  top: 0.36rem;
  width: 1.38rem;
  height: 1.38rem;
  padding: 0;
  color: #eaf6ff;
  background: rgba(8, 19, 37, 0.64);
  backdrop-filter: blur(10px);
}

.asset-member-flag {
  right: -0.45rem;
  top: -0.55rem;
  min-height: 1.45rem;
  padding: 0.22rem 0.52rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #07101c;
  box-shadow: 0 0.7rem 1.4rem rgba(0, 0, 0, 0.26);
}

.asset-member-flag::after {
  content: "";
  position: absolute;
  inset: -45% auto -45% -60%;
  width: 42%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
  animation: flag-gloss 5.5s ease-in-out infinite;
}

.asset-member-flag.premium {
  border: 1px solid rgba(245, 196, 81, 0.78);
  background: linear-gradient(135deg, #ffe08a, #d79a1f);
}

.asset-member-flag.creator {
  border: 1px solid rgba(109, 255, 183, 0.78);
  background: linear-gradient(135deg, #8cffc4, #28c979);
}

.asset-card-body {
  display: grid;
  align-content: start;
  gap: 0.34rem;
  min-height: 6rem;
  padding: 0.62rem;
  border-radius: 0 0 12px 12px;
  background: rgba(8, 19, 37, 0.32);
}

.asset-card-flags {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.35rem;
}

.asset-game-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.35rem;
  border: 1px solid rgba(60, 199, 255, 0.28);
  border-radius: 999px;
  padding: 0.05rem 0.45rem 0;
  color: #d9f4ff;
  background: linear-gradient(135deg, rgba(0, 150, 219, 0.32), rgba(0, 94, 158, 0.24));
  font-size: 0.56rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.asset-card-body h3,
.asset-card-body p {
  margin: 0;
}

.asset-card-body h3 {
  display: -webkit-box;
  min-height: 1.72rem;
  overflow: hidden;
  font-size: 0.76rem;
  line-height: 1.05;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.asset-card-body h3 a {
  color: inherit;
  text-decoration: none;
}

.asset-card-body h3 a:hover {
  color: var(--accent);
}

.asset-card-body p {
  color: var(--muted);
  overflow: hidden;
  font-size: 0.66rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-card-stats,
.asset-card-actions,
.my-asset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem;
  align-items: center;
}

.asset-rating-row {
  min-height: 0.9rem;
}

.asset-rating-row .rating-stars {
  font-size: 0.68rem;
}

.asset-stat,
.asset-card-stats button,
.asset-card-actions button,
.my-asset-actions button {
  min-height: 2rem;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 999px;
  padding: 0 0.36rem;
  color: var(--ink);
  background: rgba(8, 19, 37, 0.45);
  font-size: 0.64rem;
  font-weight: 900;
}

.asset-card-stats button,
.asset-card-actions button,
.asset-stat {
  min-height: 1.62rem;
}

.asset-card-stats button,
.asset-stat {
  min-height: 1.9rem;
  padding-inline: 0.5rem;
  font-size: 0.78rem;
}

.asset-card-actions .lucide,
.asset-card-stats .lucide,
.asset-stat .lucide,
.asset-kind-pill .lucide,
.asset-member-flag .lucide {
  width: 0.78rem;
  height: 0.78rem;
}

.asset-card-stats .lucide,
.asset-stat .lucide {
  width: 0.9rem;
  height: 0.9rem;
}

.asset-stat,
.asset-card-stats button,
.asset-card-actions button {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.asset-card-actions .asset-download-button {
  position: relative;
  justify-content: center;
  min-height: 2.55rem;
  min-width: 7.8rem;
  padding-inline: 1rem;
  border-color: transparent;
  color: #fff;
  background: var(--primary);
  font-size: 1rem;
  font-weight: 900;
  transition: color 180ms ease, opacity 180ms ease;
}

.asset-card-actions .asset-download-button[disabled] {
  opacity: 0.76;
  cursor: not-allowed;
  filter: grayscale(0.12);
}

.asset-card-actions .asset-download-button[data-hover-label]::after {
  content: attr(data-hover-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: 0.42rem;
  color: #fff;
  font-size: 0.74rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 180ms ease;
  white-space: nowrap;
}

.asset-card-actions .asset-download-button[data-hover-label]:hover {
  color: transparent;
}

.asset-card-actions .asset-download-button[data-hover-label]:hover::after {
  opacity: 1;
}

.creation-card,
.asset-card,
.my-asset-card,
.profile-submission-card,
.creation-media-shell,
.creation-media,
.creation-media-fade,
.asset-preview,
.asset-preview-thumb,
.asset-card-body {
  border-radius: 18px;
}

.creation-media-shell,
.creation-media,
.creation-media-fade,
.asset-preview,
.asset-preview-thumb {
  overflow: hidden;
}

.creation-card .creation-body,
.asset-card-body {
  border-radius: 0 0 18px 18px;
}

@media (max-width: 680px) {
  .forums-page .community-panels {
    height: auto;
    min-height: 0;
  }

  .forums-page .chat-shell,
  .forums-page .forum-shell {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    overflow: visible;
  }

  .forums-page .forum-categories {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .forums-page .room-rail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: grid;
    align-content: start;
    width: min(18.5rem, 86vw);
    border-radius: 18px 0 0 18px;
    padding: 4.5rem 0.75rem 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(8, 19, 37, 0.98);
    box-shadow: -1rem 0 3rem rgba(0, 0, 0, 0.42);
    transform: translateX(105%);
    transition: transform 220ms ease;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }

  .forums-page .room-rail.channel-drawer-open {
    transform: translateX(0);
  }

  body.chat-channel-drawer-active::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(0, 0, 0, 0.46);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .forums-page .room-rail-heading,
  .forums-page .room-rail button,
  .forums-page .forum-categories button {
    flex: 0 0 auto;
  }

  .forums-page .room-rail-heading {
    margin: 0.75rem 0 0.25rem;
  }

  .forums-page .room-rail button {
    justify-content: flex-start;
    width: 100%;
    min-height: 2.4rem;
    font-size: 0.78rem;
  }

  .chat-channel-menu-button {
    display: inline-flex !important;
    width: 2.35rem;
    height: 2.35rem;
  }

  .forums-page .chat-main {
    grid-template-rows: auto minmax(20rem, 1fr) auto auto;
    min-height: 32rem;
    border-radius: 14px;
  }

  .forums-page .chat-room-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .forums-page .chat-room-header > div {
    min-width: 0;
  }

  .forums-page .member-panel {
    display: none;
  }

  .forums-page .forum-board {
    height: auto;
    min-height: 31rem;
    overflow: visible;
  }

  .forums-page .forum-board-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .forums-page .forum-game-toggle {
    width: 100%;
  }

  .forums-page .chat-composer-row {
    grid-template-columns: 2.35rem 2.35rem minmax(0, 1fr) 2.35rem;
  }

  .forums-page .chat-composer-row button,
  .forums-page .chat-image-upload {
    width: 2.35rem;
    min-width: 2.35rem;
  }

  .forums-page .chat-composer-row button span,
  .forums-page .chat-image-upload span {
    display: none;
  }

  .forums-page .chat-message-row {
    grid-template-columns: 2.05rem minmax(0, 1fr);
    gap: 0.45rem;
  }

  .forums-page .chat-message-own {
    grid-template-columns: minmax(0, 1fr) 2.05rem;
  }

  .forums-page .chat-avatar-wrap,
  .forums-page .chat-mention-avatar {
    width: 2rem;
    height: 2rem;
    max-width: 2rem;
    min-width: 2rem;
  }

  .forums-page .chat-avatar-wrap img,
  .forums-page .chat-mention-avatar img {
    width: 2rem;
    height: 2rem;
    max-width: 2rem;
    min-width: 2rem;
    border-radius: 0.55rem;
  }

  .forums-page .chat-avatar-wrap .forum-avatar-frame {
    border-radius: 0.65rem;
  }

  .gamer-card {
    width: min(23rem, 100%);
    border-radius: 16px;
  }

  .gamer-card-banner {
    height: 7.2rem;
  }

  .gamer-card-body {
    grid-template-columns: 6.25rem minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0 0.9rem 0.9rem;
    margin-top: -3.125rem;
  }

  .planco-card-topline {
    gap: 0.35rem;
  }

  .planco-card-topline .member-card-flags {
    justify-content: flex-start;
  }

  .gamer-card-avatar {
    width: 6.25rem;
    height: 6.25rem;
    max-width: 6.25rem;
    min-width: 6.25rem;
  }

  .gamer-card-avatar img {
    width: 6.25rem;
    height: 6.25rem;
    max-width: 6.25rem;
    min-width: 6.25rem;
  }

  .gamer-card-main {
    padding-top: 3.2rem;
  }

  .planco-card-details {
    grid-template-columns: minmax(4.4rem, 0.72fr) minmax(6.7rem, 1.28fr);
  }
}

@media (min-width: 681px) {
  .filter-controls.browse-filter-top:not(.assets-filter-top) {
    grid-template-columns: minmax(23rem, 1.35fr) minmax(10rem, 0.65fr) minmax(13rem, 0.9fr);
  }

  .filter-controls.assets-filter-top {
    grid-template-columns: minmax(23rem, 0.9fr) minmax(18rem, 1.1fr);
  }
}

@media (max-width: 680px) {
  body {
    padding-top: 0;
    overflow-x: hidden;
  }

  .workspace > .stats-panel {
    display: none;
  }

  main {
    padding-top: 3.9rem;
  }

  main.auth-page,
  main.forums-page,
  main[data-phase2-admin] {
    padding-top: 4.3rem !important;
  }

  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    padding: 0.62rem max(0.9rem, env(safe-area-inset-left)) 0.62rem max(0.9rem, env(safe-area-inset-right));
    background: rgba(8, 19, 37, 0.72);
    backdrop-filter: blur(24px) saturate(1.18);
    -webkit-backdrop-filter: blur(24px) saturate(1.18);
    box-shadow: 0 0.85rem 2.2rem rgba(0, 0, 0, 0.18);
  }

  .page-header {
    min-height: auto;
    padding-top: 1.35rem;
    padding-bottom: 1.1rem;
    gap: 0.55rem;
  }

  .page-header h1,
  .detail-hero h1,
  .profile-hero h1,
  .submit-hero h1,
  .staff-hero h1 {
    width: max-content;
    max-width: calc(100vw - (2 * var(--site-gutter)));
    font-size: clamp(1.35rem, 6.8vw, 2.7rem);
    line-height: 0.98;
    white-space: nowrap;
  }

  .page-header p:not(.eyebrow),
  .detail-hero p:not(.eyebrow),
  .profile-hero p:not(.eyebrow),
  .submit-hero p:not(.eyebrow),
  .staff-hero p:not(.eyebrow) {
    max-width: 21rem;
    font-size: 0.82rem;
    line-height: 1.38;
  }

  .content-band,
  .split-band,
  .chat-band,
  .workspace {
    margin-top: 0.8rem;
  }

  .search-panel,
  .stats-panel,
  .staff-panel,
  .moderation-panel,
  .profile-card,
  .auth-card,
  .auth-welcome-panel,
  .detail-summary-card,
  .detail-media-strip,
  .detail-how-to,
  .asset-detail-card,
  .news-card {
    border-radius: 14px;
    padding: 0.82rem;
  }

  .section-heading,
  .chat-heading {
    gap: 0.65rem;
    margin-bottom: 0.75rem;
  }

  .icon-title h2,
  .section-heading h2,
  .chat-heading h2,
  .profile-card h3,
  .staff-panel h2 {
    font-size: clamp(1.12rem, 6vw, 1.55rem);
    line-height: 1.05;
  }

  .eyebrow {
    font-size: 0.62rem;
  }

  .search-row input,
  .filter-controls select,
  .filter-controls input,
  .asset-tag-filter input,
  .staff-search-row input,
  .staff-comparison-table input,
  .staff-comparison-table select,
  .profile-card input,
  .auth-card input,
  .auth-card textarea,
  .auth-card select,
  .news-admin-form input,
  .news-admin-form select,
  .news-admin-form textarea {
    min-height: 2.55rem;
    border-radius: 14px;
    font-size: 0.82rem;
  }

  .search-row button,
  .solid-button,
  .ghost-button,
  .copy-button,
  .compact-link {
    min-height: 2.25rem;
    padding-inline: 0.75rem;
    font-size: 0.78rem;
  }

  .game-toggle {
    min-height: 2.65rem;
  }

  .game-toggle label > span {
    padding: 0 0.35rem;
    font-size: 0.68rem;
  }

  .filter-strip,
  .tag-row,
  .asset-filter-row,
  .type-filter {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
  }

  .filter-strip::-webkit-scrollbar,
  .tag-row::-webkit-scrollbar,
  .asset-filter-row::-webkit-scrollbar,
  .type-filter::-webkit-scrollbar {
    display: none;
  }

  .filter-strip button,
  .type-filter label,
  .asset-filter-row label {
    flex: 0 0 auto;
    width: auto;
    min-height: 2rem;
    padding: 0 0.62rem;
    font-size: 0.7rem;
  }

  .type-filter {
    border-radius: 14px;
    padding: 0.65rem;
  }

  .type-filter legend {
    width: auto;
    min-width: max-content;
    margin: 0 0.25rem 0 0;
    padding: 0;
    align-self: center;
    font-size: 0.72rem;
  }

  .creation-grid,
  .asset-grid,
  .my-assets-grid,
  .profile-assets-grid,
  .profile-followed-creators-grid,
  .trending-asset-grid,
  .creator-grid,
  .news-grid,
  .profile-showcase-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .creation-card {
    min-height: 23rem;
    border-radius: 14px;
  }

  .creation-card .creation-media,
  .creation-card .creation-media-shell {
    min-height: 9rem;
  }

  .creation-card .creation-body,
  .asset-card-body,
  .my-asset-card,
  .profile-submission-card {
    gap: 0.5rem;
    padding: 0.65rem;
  }

  .creation-card h3,
  .asset-card h3,
  .my-asset-card h3,
  .profile-submission-card h3,
  .news-card h2,
  .news-card h3 {
    font-size: 0.9rem;
    line-height: 1.08;
  }

  .creation-card p,
  .asset-card p,
  .my-asset-card p,
  .profile-submission-card p,
  .news-card p {
    font-size: 0.72rem;
    line-height: 1.32;
  }

  .asset-card,
  .asset-grid-ad {
    min-height: 9.2rem;
    border-radius: 14px;
  }

  .stats-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .stats-panel div {
    padding: 0.62rem;
  }

  .stats-panel span {
    font-size: 1.15rem;
  }

  .stats-panel small {
    font-size: 0.58rem;
    line-height: 1.1;
  }

  .detail-gallery {
    min-height: 18rem;
  }

  .detail-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .submit-hero-controls {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .submit-zoo-locked {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .detail-action-button {
    min-height: 2.1rem;
    padding-inline: 0.35rem;
    font-size: 0.66rem;
  }

  .profile-detail-list,
  .profile-settings-grid,
  .profile-submission-stats,
  .profile-showcase-selected {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

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

  .auth-shell {
    min-height: auto;
    gap: 0.8rem;
  }

  .auth-logo {
    width: min(14rem, 82%);
  }

  .auth-welcome-panel h1 {
    font-size: clamp(1.65rem, 10vw, 2.45rem);
  }

  .staff-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: -1.2rem;
  }

  .moderation-toolbar,
  .staff-search-row,
  .moderation-meta-grid,
  .staff-comparison-table,
  .staff-review-card,
  .staff-review-card.asset-review-card,
  .staff-account-head,
  .staff-report-card {
    grid-template-columns: 1fr;
  }

  .moderation-actions,
  .staff-action-row {
    justify-content: stretch;
  }

  .moderation-actions button,
  .staff-action-row button,
  .staff-search-row button,
  .moderation-toolbar button {
    width: 100%;
  }

  .staff-review-thumb,
  .asset-review-card .staff-review-thumb {
    width: 100%;
    min-height: 8rem;
    aspect-ratio: 16 / 9;
  }

  .room-rail {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
  }

  .room-rail::-webkit-scrollbar {
    display: none;
  }

  .room-rail button {
    flex: 0 0 auto;
    min-height: 2.15rem;
    padding-inline: 0.72rem;
    font-size: 0.72rem;
  }

  .chat-composer-row {
    grid-template-columns: 2.35rem 2.35rem minmax(0, 1fr) 2.35rem;
    gap: 0.35rem;
  }

  .chat-composer-row button,
  .chat-image-upload {
    min-height: 2.35rem;
    width: 2.35rem;
    padding: 0;
  }

  .plan-cards,
  .benefits-grid,
  .premium-highlights,
  .fairplay-grid,
  .creator-feature-grid,
  .trending-creator-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
}

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

  main.auth-page,
  main.forums-page,
  main[data-phase2-admin] {
    padding-top: 4.3rem !important;
  }

  .page-header {
    min-height: auto;
    padding-top: 1.35rem;
    padding-bottom: 1.1rem;
    gap: 0.55rem;
  }

  .page-header h1,
  .detail-hero h1,
  .profile-hero h1,
  .submit-hero h1,
  .staff-hero h1 {
    width: max-content;
    max-width: calc(100vw - (2 * var(--site-gutter)));
    font-size: clamp(1.35rem, 6.8vw, 2.7rem);
    line-height: 0.98;
    white-space: nowrap;
  }

  .page-header p:not(.eyebrow),
  .detail-hero p:not(.eyebrow),
  .profile-hero p:not(.eyebrow),
  .submit-hero p:not(.eyebrow),
  .staff-hero p:not(.eyebrow) {
    max-width: 21rem;
    font-size: 0.82rem;
    line-height: 1.38;
  }

  .page-header .icon-badge,
  .page-kicker .icon-badge {
    width: 2.55rem;
    height: 2.55rem;
  }

  .content-band,
  .split-band,
  .chat-band,
  .workspace,
  .search-panel,
  .stats-panel,
  .profile-card,
  .staff-panel,
  .moderation-panel,
  .news-card,
  .auth-card,
  .auth-welcome-panel {
    border-radius: 14px;
  }

  .content-band,
  .split-band,
  .chat-band,
  .workspace {
    margin-top: 0.8rem;
  }

  .section-heading,
  .chat-heading {
    gap: 0.65rem;
    margin-bottom: 0.75rem;
  }

  .icon-title {
    gap: 0.55rem;
  }

  .icon-title h2,
  .section-heading h2,
  .chat-heading h2,
  .profile-card h3,
  .staff-panel h2 {
    font-size: clamp(1.12rem, 6vw, 1.55rem);
    line-height: 1.05;
  }

  .eyebrow {
    font-size: 0.62rem;
  }

  .search-panel,
  .stats-panel,
  .staff-panel,
  .moderation-panel,
  .profile-card {
    padding: 0.82rem;
  }

  .search-box label,
  .filter-controls label,
  .game-toggle-wrap,
  .asset-tag-filter,
  .staff-search-row label,
  .profile-card label {
    font-size: 0.76rem;
  }

  .search-row {
    gap: 0.5rem;
  }

  .search-row input,
  .filter-controls select,
  .filter-controls input,
  .asset-tag-filter input,
  .staff-search-row input,
  .staff-comparison-table input,
  .staff-comparison-table select,
  .profile-card input,
  .auth-card input,
  .auth-card textarea,
  .auth-card select,
  .news-admin-form input,
  .news-admin-form select,
  .news-admin-form textarea {
    min-height: 2.55rem;
    border-radius: 14px;
    font-size: 0.82rem;
  }

  .search-row button,
  .solid-button,
  .ghost-button,
  .copy-button,
  .compact-link {
    min-height: 2.25rem;
    padding-inline: 0.75rem;
    font-size: 0.78rem;
  }

  .browse-filter-block,
  .filter-controls,
  .asset-browser-tools,
  .browse-filter-top,
  .assets-filter-top {
    gap: 0.65rem;
  }

  .game-toggle {
    min-height: 2.65rem;
  }

  .game-toggle label > span {
    padding: 0 0.35rem;
    font-size: 0.68rem;
  }

  .filter-strip,
  .tag-row,
  .asset-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
  }

  .filter-strip::-webkit-scrollbar,
  .tag-row::-webkit-scrollbar,
  .asset-filter-row::-webkit-scrollbar {
    display: none;
  }

  .filter-strip button,
  .type-filter label,
  .asset-filter-row label {
    flex: 0 0 auto;
    min-height: 2rem;
    padding: 0 0.62rem;
    font-size: 0.7rem;
  }

  .type-filter {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    border-radius: 14px;
    padding: 0.65rem;
    scrollbar-width: none;
  }

  .type-filter::-webkit-scrollbar {
    display: none;
  }

  .type-filter legend {
    float: left;
    width: 100%;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
  }

  .creation-grid {
    gap: 0.7rem;
  }

  .creation-card {
    min-height: 23rem;
    border-radius: 14px;
  }

  .creation-card .creation-media,
  .creation-card .creation-media-shell {
    min-height: 9rem;
  }

  .creation-card .creation-body {
    gap: 0.5rem;
    padding: 0.72rem;
  }

  .creation-card h3 {
    font-size: 0.96rem;
    line-height: 1.08;
  }

  .creation-card p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.76rem;
    line-height: 1.32;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .creation-card-topline,
  .card-meta,
  .creator-handle {
    min-width: 0;
    font-size: 0.64rem;
  }

  .game-flag,
  .detail-info-tags span,
  .profile-chip,
  .staff-status-pill,
  .moderation-type-pill {
    min-height: 1.55rem;
    padding: 0 0.5rem;
    font-size: 0.62rem;
  }

  .asset-grid,
  .my-assets-grid,
  .profile-assets-grid,
  .profile-followed-creators-grid,
  .trending-asset-grid,
  .creator-grid,
  .news-grid,
  .profile-showcase-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .asset-card,
  .my-asset-card,
  .profile-submission-card,
  .profile-showcase-pick-card,
  .profile-showcase-mini-card {
    border-radius: 14px;
  }

  .asset-card {
    min-height: 9.2rem;
  }

  .asset-card-body,
  .my-asset-card,
  .profile-submission-card {
    padding: 0.65rem;
  }

  .asset-card h3,
  .my-asset-card h3,
  .profile-submission-card h3,
  .news-card h2,
  .news-card h3 {
    font-size: 0.88rem;
    line-height: 1.08;
  }

  .asset-card p,
  .my-asset-card p,
  .profile-submission-card p,
  .news-card p {
    font-size: 0.72rem;
    line-height: 1.32;
  }

  .asset-grid-ad {
    min-height: 9.2rem;
    padding: 0.65rem;
  }

  .asset-grid-ad p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .stats-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .stats-panel div {
    padding: 0.62rem;
  }

  .stats-panel span {
    font-size: 1.15rem;
  }

  .stats-panel small {
    font-size: 0.58rem;
    line-height: 1.1;
  }

  .detail-layout,
  .creation-detail-shell,
  .asset-info-grid,
  .asset-info-split {
    gap: 0.8rem;
  }

  .detail-gallery {
    min-height: 18rem;
  }

  .detail-media-strip,
  .detail-summary-card,
  .detail-how-to,
  .detail-creator-card,
  .asset-detail-card {
    border-radius: 14px;
    padding: 0.78rem;
  }

  .detail-summary-card {
    gap: 0.65rem;
  }

  .detail-summary-card h2 {
    font-size: 1.35rem;
  }

  .detail-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .detail-action-button {
    min-height: 2.1rem;
    padding-inline: 0.35rem;
    font-size: 0.66rem;
  }

  .detail-step-line {
    gap: 0.45rem;
  }

  .detail-step-line article {
    padding: 0.65rem;
  }

  .detail-step-line strong {
    font-size: 0.78rem;
  }

  .profile-card-heading {
    gap: 0.65rem;
    margin-bottom: 0.75rem;
  }

  .profile-avatar {
    width: 3.15rem;
    height: 3.15rem;
    border-radius: 14px;
  }

  .profile-detail-list,
  .profile-settings-grid,
  .profile-submission-stats,
  .profile-showcase-selected {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .profile-detail-list div {
    border-radius: 13px;
    padding: 0.65rem;
  }

  .profile-detail-list dt {
    font-size: 0.62rem;
  }

  .profile-detail-list dd {
    font-size: 0.78rem;
  }

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

  .auth-page {
    width: min(100% - 1rem, 1180px);
    padding-top: 4.3rem;
  }

  .auth-shell {
    min-height: auto;
    gap: 0.8rem;
  }

  .auth-welcome-panel,
  .auth-card {
    padding: 0.9rem;
  }

  .auth-logo {
    width: min(14rem, 82%);
  }

  .auth-welcome-panel h1 {
    font-size: clamp(1.65rem, 10vw, 2.45rem);
  }

  .staff-hero {
    padding-bottom: 2.2rem;
  }

  .staff-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: -1.2rem;
  }

  .staff-overview-grid article {
    border-radius: 14px;
    padding: 0.72rem;
  }

  .staff-overview-grid strong {
    font-size: 1.35rem;
  }

  .staff-overview-grid small {
    font-size: 0.68rem;
  }

  .moderation-toolbar,
  .staff-search-row,
  .moderation-meta-grid,
  .staff-comparison-table,
  .staff-review-card,
  .staff-review-card.asset-review-card,
  .staff-account-head,
  .staff-report-card {
    grid-template-columns: 1fr;
  }

  .moderation-actions,
  .staff-action-row {
    justify-content: stretch;
  }

  .moderation-actions button,
  .staff-action-row button,
  .staff-search-row button,
  .moderation-toolbar button {
    width: 100%;
  }

  .staff-review-grid,
  .staff-account-list,
  .staff-report-list,
  .moderation-list {
    gap: 0.62rem;
  }

  .staff-review-card,
  .staff-account-card,
  .staff-report-card,
  .moderation-card {
    border-radius: 14px;
    padding: 0.72rem;
  }

  .staff-review-thumb,
  .asset-review-card .staff-review-thumb {
    width: 100%;
    min-height: 8rem;
    aspect-ratio: 16 / 9;
  }

  .staff-audio-preview audio {
    width: 100%;
  }

  .chat-shell,
  .forum-shell {
    gap: 0.7rem;
  }

  .room-rail {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
  }

  .room-rail::-webkit-scrollbar {
    display: none;
  }

  .room-rail button {
    flex: 0 0 auto;
    min-height: 2.15rem;
    padding-inline: 0.72rem;
    font-size: 0.72rem;
  }

  .chat-main,
  .forum-main {
    border-radius: 14px;
  }

  .chat-message,
  .forum-post-card,
  .forum-reply-card {
    border-radius: 14px;
    padding: 0.72rem;
  }

  .chat-composer-row {
    grid-template-columns: 2.35rem 2.35rem minmax(0, 1fr) 2.35rem;
    gap: 0.35rem;
  }

  .chat-composer-row button,
  .chat-image-upload {
    min-height: 2.35rem;
    width: 2.35rem;
    padding: 0;
  }

  .chat-composer-row input {
    min-height: 2.35rem;
    font-size: 0.78rem;
  }

  .news-admin-composer,
  .news-card,
  .featured-news-post {
    border-radius: 14px;
    padding: 0.82rem;
  }

  .news-post-meta {
    gap: 0.35rem;
  }

  .news-post-meta span {
    font-size: 0.62rem;
  }

  .plan-cards,
  .benefits-grid,
  .premium-highlights,
  .fairplay-grid,
  .creator-feature-grid,
  .trending-creator-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .plan-card,
  .benefit-card,
  .fairplay-card,
  .creator-feature-large,
  .creator-feature-small,
  .trending-creator-card {
    border-radius: 14px;
  }

  .cookie-banner {
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    padding: 0.8rem;
    border-radius: 14px;
  }
}

.asset-like-button.is-liked {
  border-color: rgba(112, 217, 150, 0.48);
  color: #8ce6ad;
}

.asset-report-button {
  margin-left: auto;
}

.my-assets-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.my-asset-card {
  display: grid;
  gap: 0.75rem;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(234, 246, 255, 0.07);
}

.my-asset-card h3,
.my-asset-card p {
  margin: 0;
}

.my-asset-card p {
  color: var(--muted);
}

.my-asset-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: start;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  color: #9edfff;
  background: rgba(0, 150, 219, 0.14);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.my-asset-status .lucide {
  width: 0.82rem;
  height: 0.82rem;
}

.my-asset-status.published {
  color: #7ce2b0;
  background: rgba(124, 226, 176, 0.14);
}

.my-asset-status.unpublished {
  color: #ffcf80;
  background: rgba(242, 171, 47, 0.14);
}

.my-asset-status.pending,
.my-asset-status.scanning {
  color: #9edfff;
  background: rgba(0, 150, 219, 0.16);
}

.my-asset-status.needs-info,
.my-asset-status.on-hold {
  color: #ffcf80;
  background: rgba(242, 171, 47, 0.14);
}

.my-asset-status.blocked,
.my-asset-status.rejected {
  color: #ff9ca8;
  background: rgba(255, 135, 150, 0.13);
}

.asset-empty-state {
  grid-column: 1 / -1;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 18px;
  padding: 1.2rem;
  color: var(--muted);
  background: rgba(234, 246, 255, 0.06);
}

.filter-strip,
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-strip {
  margin-top: 1rem;
}

.filter-strip button {
  min-height: 2.3rem;
  padding: 0 0.85rem;
  background: rgba(234, 246, 255, 0.08);
}

.filter-strip .active {
  color: #fff;
  background: var(--primary-dark);
}

.browse-filter-block {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.browse-filter-top {
  margin-top: 0;
}

@media (min-width: 681px) {
  .browse-filter-top:not(.assets-filter-top) {
    grid-template-columns: minmax(23rem, 1.35fr) minmax(10rem, 0.65fr) minmax(13rem, 0.9fr);
  }

  .assets-filter-top {
    grid-template-columns: minmax(23rem, 0.9fr) minmax(18rem, 1.1fr);
  }
}

.game-toggle-wrap {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.game-toggle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  min-height: 3.3rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.25rem;
  background: rgba(234, 246, 255, 0.08);
}

.game-toggle-slider {
  --game-toggle-slide-x: 0;
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  z-index: 0;
  width: calc(50% - 0.375rem);
  height: calc(100% - 0.5rem);
  border-radius: 6px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 18px rgba(60, 199, 255, 0.28);
  transform: translateX(var(--game-toggle-slide-x));
  transition: transform 360ms cubic-bezier(0.2, 1.45, 0.45, 1), background 180ms ease, box-shadow 180ms ease;
}

.game-toggle:has(input[value="Planet Zoo"]:checked) .game-toggle-slider,
.game-toggle:has(input[value="Planet Zoo 2"]:checked) .game-toggle-slider {
  --game-toggle-slide-x: calc(100% + 0.25rem);
  background: linear-gradient(135deg, #1f8f4d, #5ee08a);
  box-shadow: 0 0 18px rgba(94, 224, 138, 0.28);
}

.game-toggle.is-bouncing .game-toggle-slider {
  animation: game-toggle-bounce 340ms cubic-bezier(0.2, 1.35, 0.45, 1);
}

@keyframes game-toggle-bounce {
  0% {
    transform: translateX(var(--game-toggle-slide-x)) scale(0.96);
  }

  58% {
    transform: translateX(var(--game-toggle-slide-x)) scale(1.035);
  }

  100% {
    transform: translateX(var(--game-toggle-slide-x)) scale(1);
  }
}

.game-toggle label {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  border-radius: 6px;
  color: #c4deef;
  cursor: pointer;
  z-index: 1;
  transition: background 180ms ease, color 180ms ease, opacity 180ms ease;
}

.game-toggle label:has(input:disabled),
.game-toggle label.is-locked {
  cursor: not-allowed;
  opacity: 0.52;
}

.game-toggle label:has(input:disabled) > span,
.game-toggle label.is-locked > span {
  filter: grayscale(0.45);
}

.game-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.game-toggle label > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  padding: 0 0.65rem;
  text-align: center;
  white-space: nowrap;
  transition: color 180ms ease;
}

.game-toggle-icon {
  display: block;
  width: 1.45rem;
  height: 1.45rem;
  object-fit: contain;
}

.game-toggle label > span small {
  color: rgba(234, 246, 255, 0.72);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.game-toggle input:checked + span {
  color: #ffffff;
}

.game-toggle .is-jungle input:checked + span {
  color: #ffffff;
}

.type-filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  margin: 0;
  padding: 0.9rem;
  background: rgba(234, 246, 255, 0.045);
}

.type-filter[hidden] {
  display: none !important;
}

.type-filter legend {
  padding: 0 0.35rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.type-filter label {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 2.25rem;
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 999px;
  padding: 0 0.72rem;
  color: #c4deef;
  background: rgba(234, 246, 255, 0.06);
  font-size: 0.78rem;
  font-weight: 850;
}

.type-filter input {
  appearance: none;
  -webkit-appearance: none;
  width: 0.95rem;
  height: 0.95rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid rgba(60, 199, 255, 0.7);
  border-radius: 50%;
  background: rgba(15, 23, 34, 0.82);
}

.type-filter input::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  transform: scale(0);
  background: var(--accent);
  transition: transform 150ms ease;
}

.type-filter input:checked::before {
  transform: scale(1);
}

.type-filter label:has(input:checked) {
  border-color: rgba(60, 199, 255, 0.55);
  color: #ffffff;
  background: rgba(0, 150, 219, 0.18);
}

.stats-panel {
  display: grid;
  align-content: center;
  gap: 0.9rem;
  padding: 1rem;
}

.stats-panel div {
  padding: 1rem;
  border-radius: 8px;
  background: rgba(0, 150, 219, 0.12);
}

.stats-panel span {
  display: block;
  font-size: 1.8rem;
  font-weight: 850;
}

.stats-panel small {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.content-band,
.split-band,
.chat-band {
  margin-top: 1rem;
}

.logo-hero + .content-band,
.page-header + .content-band,
.page-header + .split-band,
.page-header + .chat-band {
  margin-top: 0;
}

.logo-hero + .home-featured {
  margin-top: clamp(1.4rem, 4vw, 2.6rem);
}

.premium-theme .content-band {
  margin-top: 0;
}

.home-featured {
  margin-bottom: 1rem;
}

.home-hot {
  position: relative;
  isolation: isolate;
  margin-top: clamp(1.6rem, 4vw, 2.8rem);
  padding-top: clamp(2.2rem, 5vw, 3.8rem);
  padding-bottom: clamp(2.2rem, 5vw, 3.8rem);
}

.home-hot + .home-whats-hot {
  margin-top: 0;
  padding-top: clamp(1.1rem, 2.6vw, 1.8rem);
}

.home-hot::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: rgba(12, 34, 58, 0.42);
}

.section-heading,
.chat-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
}

.section-heading.compact {
  margin-bottom: 1rem;
}

.section-subtext {
  max-width: 34rem;
  margin: 0.18rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.creation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.structure-placeholder-grid {
  pointer-events: none;
}

.structure-placeholder-grid .ad-slot,
.structure-placeholder-grid .premium-slot,
.structure-placeholder-grid .ad-slot *,
.structure-placeholder-grid .premium-slot * {
  pointer-events: auto;
}

.structure-placeholder-card {
  border: 1px solid rgba(234, 246, 255, 0.11);
  background: rgba(234, 246, 255, 0.055);
  box-shadow: none;
}

.structure-placeholder-media {
  background:
    url("assets/missing-placeholder.png") center / min(58%, 13rem) no-repeat,
    linear-gradient(145deg, rgba(0, 150, 219, 0.72), rgba(0, 94, 158, 0.58) 52%, rgba(15, 23, 34, 0.96) 100%);
  filter: saturate(0.84);
}

.structure-placeholder-body {
  display: grid;
  gap: 0.65rem;
  align-content: start;
}

.structure-placeholder-line,
.structure-placeholder-actions span {
  display: block;
  height: 0.72rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(234, 246, 255, 0.1), rgba(234, 246, 255, 0.22), rgba(234, 246, 255, 0.1));
}

.structure-placeholder-line.title {
  width: 74%;
  height: 1rem;
}

.structure-placeholder-line.short {
  width: 36%;
}

.structure-placeholder-line.medium {
  width: 58%;
}

.structure-placeholder-actions {
  display: flex;
  gap: 0.55rem;
  margin-top: auto;
}

.structure-placeholder-actions span {
  width: 4.25rem;
  height: 1.8rem;
}

.asset-structure-placeholder {
  min-height: 15.5rem;
}

.browse-loading-card,
.empty-results {
  grid-column: 1 / -1;
  min-height: 18rem;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}

.browse-loader {
  width: 3.2rem;
  height: 3.2rem;
  border: 4px solid rgba(234, 246, 255, 0.14);
  border-top-color: var(--accent);
  border-right-color: var(--primary);
  border-radius: 50%;
  animation: browse-spin 820ms linear infinite;
}

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

.browse-pagination {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.45rem;
  min-height: 2.6rem;
}

.browse-pagination button {
  width: 2.45rem;
  height: 2.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.browse-pagination button:hover,
.browse-pagination button.active {
  border-color: rgba(60, 199, 255, 0.72);
  background: rgba(0, 150, 219, 0.24);
  transform: translateY(-1px);
}

.browse-pagination button[disabled] {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}

.page-status {
  min-height: 2.45rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 0.85rem;
  color: var(--muted);
  background: rgba(234, 246, 255, 0.06);
  font-size: 0.82rem;
  font-weight: 850;
}

.submit-creation-link {
  border-color: rgba(135, 255, 191, 0.46);
  color: #ffffff;
  background: rgba(40, 201, 121, 0.24);
  animation: submit-green-pulse 2.6s ease-in-out infinite;
}

.submit-creation-link:hover {
  border-color: rgba(135, 255, 191, 0.78);
  background: rgba(40, 201, 121, 0.38);
}

@keyframes submit-green-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(40, 201, 121, 0);
  }
  50% {
    box-shadow: 0 0 18px rgba(40, 201, 121, 0.34);
  }
}

.carousel-controls {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
}

.carousel-button {
  color: var(--ink);
  background: rgba(234, 246, 255, 0.1);
}

.carousel-button:hover {
  border-color: rgba(60, 199, 255, 0.48);
  background: rgba(60, 199, 255, 0.16);
}

.hot-badge {
  color: #ff4f3f;
  border-color: rgba(255, 79, 63, 0.38);
  background: rgba(255, 79, 63, 0.14);
  box-shadow: 0 0 28px rgba(255, 79, 63, 0.18);
}

.hot-carousel {
  overflow: hidden;
  width: 100%;
}

.hot-track {
  display: flex;
  gap: 1rem;
  will-change: transform;
  transition: transform 420ms ease;
}

.hot-card {
  position: relative;
  flex: 0 0 calc((100% - 3rem) / 4);
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto auto;
  border-radius: 0.8rem;
  background: rgba(13, 32, 55, 0.72);
}

.creation-card.hot-card {
  min-height: 0;
  grid-template-rows: auto auto;
}

.hot-card .creation-media {
  min-height: 9rem;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid rgba(130, 204, 255, 0.12);
}

.hot-card .creation-body {
  position: relative;
  display: grid;
  gap: 0.42rem;
  min-height: 0;
  padding: 0.8rem;
}

.hot-card .creation-card-topline {
  justify-content: start;
  gap: 0.42rem;
}

.hot-card .creator-handle {
  flex: 0 1 auto;
  text-align: left;
}

.hot-card h3 {
  margin: 0;
  font-size: clamp(0.96rem, 1.5vw, 1.08rem);
  line-height: 1.08;
}

.hot-card h3 a {
  color: var(--ink);
  text-decoration: none;
  transition: color 180ms ease;
}

.hot-card h3 a:hover {
  color: var(--accent);
}

.hot-card p {
  margin: 0;
  color: #9edfff;
  font-size: 0.82rem;
  font-weight: 850;
}

.hot-card .game-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: auto;
  min-height: 1.62rem;
  margin-bottom: 0.05rem;
  padding: 0.08rem 0.58rem 0;
  border: 1px solid rgba(60, 199, 255, 0.34);
  border-radius: 999px;
  color: #d9f4ff;
  background: linear-gradient(135deg, rgba(0, 150, 219, 0.36), rgba(0, 94, 158, 0.28));
  overflow: hidden;
  font-size: 0.64rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.hot-card .game-icon-flag {
  width: 2rem;
  min-width: 2rem;
  height: 1.62rem;
  padding: 0.12rem 0.38rem;
}

.hot-card .game-icon-flag img {
  display: block;
  width: 1.18rem;
  height: 1.18rem;
  object-fit: contain;
}

.hot-card .asset-icon-flag {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.62rem;
  height: 1.62rem;
  border: 1px solid rgba(245, 196, 81, 0.44);
  border-radius: 999px;
  color: #ffe5a8;
  background: linear-gradient(135deg, rgba(245, 196, 81, 0.24), rgba(255, 138, 42, 0.18));
}

.hot-card .asset-icon-flag .lucide {
  width: 0.88rem;
  height: 0.88rem;
  stroke-width: 2.6;
}

.hot-rank {
  position: absolute;
  right: 0.65rem;
  top: -1.05rem;
  display: inline-grid;
  place-items: center;
  min-width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(60, 199, 255, 0.4);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 10px 26px rgba(0, 150, 219, 0.25);
  font-size: 0.84rem;
  font-weight: 950;
}

.home-chat-promo {
  display: grid;
  grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.6rem, 5vw, 3.2rem);
  align-items: center;
  margin-top: clamp(2rem, 5vw, 3.6rem);
  padding-top: clamp(2rem, 5vw, 3.6rem);
  padding-bottom: clamp(2rem, 5vw, 3.6rem);
}

.chat-promo-copy {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
}

.chat-promo-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.chat-promo-kicker .eyebrow {
  margin: 0;
}

.chat-promo-copy h2 {
  max-width: 28rem;
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
}

.chat-promo-copy > p:not(.eyebrow) {
  max-width: 34rem;
  margin: 0;
  color: #c4deef;
  line-height: 1.65;
}

.chat-promo-badge {
  color: #3cc7ff;
  border-color: rgba(60, 199, 255, 0.38);
  background: rgba(60, 199, 255, 0.14);
  box-shadow: 0 0 28px rgba(60, 199, 255, 0.18);
}

.chat-promo-actions {
  justify-content: flex-start;
  margin-top: 0.7rem;
}

.chat-3d-stage {
  perspective: 1150px;
  min-height: clamp(26rem, 38vw, 34rem);
  display: grid;
  place-items: center;
}

.chat-3d-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  width: min(100%, 42rem);
  border: 1px solid rgba(130, 204, 255, 0.22);
  border-radius: 1.15rem;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(17, 38, 68, 0.96), rgba(8, 19, 37, 0.98));
  box-shadow:
    0 2rem 5rem rgba(0, 0, 0, 0.36),
    -1.8rem 1.6rem 0 rgba(0, 150, 219, 0.08),
    1.8rem -1.2rem 0 rgba(60, 199, 255, 0.06);
  transform: rotateX(calc(8deg + var(--tilt-x))) rotateY(calc(-13deg + var(--tilt-y))) rotateZ(1deg);
  transform-style: preserve-3d;
  transition: transform 180ms ease;
}

.chat-3d-card::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 32%),
    radial-gradient(circle at 84% 20%, rgba(60, 199, 255, 0.18), transparent 30%);
}

.chat-3d-header,
.chat-3d-composer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(130, 204, 255, 0.14);
}

.chat-3d-header span,
.chat-3d-toggle {
  color: #8fdcff;
  font-size: 0.78rem;
  font-weight: 850;
}

.chat-3d-header strong {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
}

.chat-3d-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid rgba(130, 204, 255, 0.18);
  border-radius: 999px;
  padding: 0.18rem;
  background: rgba(255, 255, 255, 0.05);
  animation: togglePulsePair 5.2s ease-in-out infinite;
}

.chat-3d-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.8rem;
  border: 0;
  border-radius: 999px;
  padding: 0 0.7rem;
  color: #9edfff;
  background: transparent;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.chat-3d-toggle .active {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 0.65rem 1.6rem rgba(0, 150, 219, 0.22);
}

@keyframes togglePulsePair {
  0%,
  9%,
  100% {
    box-shadow: 0 0 0 rgba(60, 199, 255, 0);
    transform: scale(1);
  }
  3%,
  12% {
    box-shadow: 0 0 0 0.24rem rgba(60, 199, 255, 0.14);
    transform: scale(1.025);
  }
  6%,
  15% {
    box-shadow: 0 0 0 rgba(60, 199, 255, 0);
    transform: scale(1);
  }
}

.chat-3d-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr) 8.2rem;
  gap: 0.75rem;
  padding: 0.9rem;
}

.chat-3d-body[hidden] {
  display: none;
}

.chat-3d-body.active {
  animation: previewPanelIn 220ms ease both;
}

@keyframes previewPanelIn {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-3d-rooms,
.chat-3d-online {
  display: grid;
  align-content: start;
  gap: 0.55rem;
}

.chat-3d-rooms button,
.chat-3d-online span {
  border: 1px solid rgba(130, 204, 255, 0.12);
  border-radius: 0.75rem;
  padding: 0.55rem 0.6rem;
  color: #bfe9ff;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.72rem;
  font-weight: 850;
}

.chat-3d-rooms button {
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.chat-3d-rooms button:hover {
  border-color: rgba(60, 199, 255, 0.34);
  color: #fff;
  transform: translateX(0.12rem);
}

.chat-3d-rooms .active {
  color: #fff;
  background: rgba(0, 150, 219, 0.28);
}

.chat-3d-online span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  overflow: hidden;
}

.chat-online-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-3d-online img,
.chat-3d-message img {
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid rgba(60, 199, 255, 0.32);
  border-radius: 0.45rem;
  object-fit: cover;
}

.chat-3d-messages {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  min-height: 19rem;
  padding: 0.75rem;
  border: 1px solid rgba(130, 204, 255, 0.12);
  border-radius: 0.9rem;
  background: rgba(7, 18, 35, 0.62);
}

.chat-3d-message {
  display: flex;
  align-items: start;
  gap: 0.55rem;
  transform: translateZ(1.4rem);
}

.chat-3d-bubble-content {
  max-width: 16rem;
  border-radius: 1rem 1rem 1rem 0.25rem;
  padding: 0.72rem 0.85rem;
  color: #eaf6ff;
  background: rgba(35, 59, 88, 0.94);
  box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.22);
  font-weight: 750;
  line-height: 1.35;
}

.chat-3d-bubble-content p {
  margin: 0;
}

.chat-3d-preview-image {
  display: block;
  width: 100%;
  height: 5.4rem;
  margin-top: 0.55rem;
  border: 1px solid rgba(234, 246, 255, 0.18);
  border-radius: 0.7rem;
  object-fit: cover;
}

.chat-3d-message.own {
  justify-content: end;
}

.chat-3d-message.own .chat-3d-bubble-content {
  order: 1;
  border-radius: 1rem 1rem 0.25rem 1rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.chat-3d-message.own img {
  order: 2;
}

.chat-3d-message.super .chat-3d-bubble-content {
  border: 1px solid rgba(255, 217, 92, 0.56);
  background: linear-gradient(135deg, rgba(255, 191, 64, 0.86), rgba(0, 150, 219, 0.86));
  box-shadow: 0 0 30px rgba(255, 217, 92, 0.2);
}

.chat-3d-forum-list {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 19rem;
  padding: 0.75rem;
  border: 1px solid rgba(130, 204, 255, 0.12);
  border-radius: 0.9rem;
  background: rgba(7, 18, 35, 0.62);
}

.chat-3d-forum-list article {
  display: grid;
  gap: 0.35rem;
  border: 1px solid rgba(130, 204, 255, 0.12);
  border-radius: 0.85rem;
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.16);
  transform: translateZ(1.2rem);
}

.chat-3d-forum-list span {
  justify-self: start;
  border: 1px solid rgba(60, 199, 255, 0.22);
  border-radius: 999px;
  padding: 0.18rem 0.48rem;
  color: #8fdcff;
  background: rgba(60, 199, 255, 0.08);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.chat-3d-forum-list h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.15;
}

.chat-3d-forum-list p {
  margin: 0;
  color: #9ebbd3;
  font-size: 0.74rem;
  font-weight: 750;
}

.chat-3d-composer {
  border-top: 1px solid rgba(130, 204, 255, 0.14);
  border-bottom: 0;
}

.chat-3d-composer span {
  flex: 1;
  border: 1px solid rgba(130, 204, 255, 0.16);
  border-radius: 999px;
  padding: 0.72rem 0.9rem;
  color: #94b9d8;
  background: rgba(255, 255, 255, 0.05);
}

.chat-3d-composer button {
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1rem;
  color: #fff;
  background: var(--primary);
  font: inherit;
  font-weight: 850;
}

.featured-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.8fr);
  gap: 1rem;
}

.featured-main,
.mini-feature,
.news-card,
.ad-card {
  border: 1px solid rgba(22, 32, 30, 0.1);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.featured-main {
  display: grid;
  grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1fr);
  overflow: hidden;
}

.home-featured .featured-main {
  position: relative;
  min-height: clamp(26rem, 45vw, 34rem);
  grid-template-columns: 1fr;
}

.home-featured .featured-main > .creation-media {
  position: absolute;
  inset: 0;
  min-height: 100%;
}

.home-featured .featured-main > .creation-media::before,
.home-featured .featured-main > .creation-media::after {
  z-index: 1;
}

.home-featured .featured-main::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  background:
    radial-gradient(circle at 18% 12%, transparent 0 32%, rgba(15, 23, 34, 0.24) 56%),
    linear-gradient(180deg, transparent 34%, rgba(15, 23, 34, 0.42) 62%, rgba(15, 23, 34, 0.92) 100%);
  pointer-events: none;
}

.featured-copy {
  display: grid;
  align-content: center;
  padding: clamp(1rem, 3vw, 1.5rem);
}

.home-featured .featured-copy {
  position: relative;
  z-index: 3;
  align-self: end;
  align-content: end;
  width: min(34rem, 100%);
  padding: clamp(1rem, 4vw, 1.75rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.home-featured .featured-copy p {
  color: var(--ink);
}

.home-featured .featured-topline {
  justify-content: start;
  gap: 0.45rem;
}

.home-featured .featured-topline .creator-handle {
  flex: 0 1 auto;
  text-align: left;
}

.feature-stack {
  display: grid;
  gap: 1rem;
}

.mini-feature {
  padding: 1rem;
}

.mini-feature.structure-placeholder-card {
  display: grid;
  gap: 0.85rem;
  padding: 0;
  overflow: hidden;
}

.mini-feature.structure-placeholder-card > .structure-placeholder-media {
  min-height: 8rem;
}

.mini-feature.structure-placeholder-card > .structure-placeholder-body {
  padding: 1rem;
}

.mini-feature span,
.news-card span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.mini-feature p,
.news-card p {
  color: var(--muted);
  line-height: 1.55;
}

.mini-feature a {
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}

main a {
  color: #8fdcff;
}

main a:hover {
  color: #b5ecff;
}

.ad-slot {
  position: relative;
}

body.is-premium .ad-slot {
  display: none;
}

.premium-slot {
  display: none !important;
}

body.is-premium .premium-slot {
  display: grid !important;
}

.safe-ad-slot {
  overflow: hidden;
}

.safe-ad-creative {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: clamp(0.45rem, 1.4vw, 0.8rem);
  width: 100%;
  height: 100%;
  min-height: inherit;
  border-radius: inherit;
  overflow: hidden;
}

.safe-ad-creative::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.14), rgba(234, 246, 255, 0.045)),
    rgba(234, 246, 255, 0.055);
}

.safe-ad-premium .safe-ad-creative::before {
  background:
    linear-gradient(145deg, rgba(245, 196, 81, 0.18), rgba(60, 199, 255, 0.07)),
    rgba(234, 246, 255, 0.055);
}

.safe-ad-safe .safe-ad-creative::before {
  background:
    linear-gradient(145deg, rgba(112, 217, 150, 0.14), rgba(60, 199, 255, 0.06)),
    rgba(234, 246, 255, 0.055);
}

.safe-ad-hide {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 4;
  border: 1px solid rgba(234, 246, 255, 0.28);
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
  color: #eaf6ff;
  background: rgba(8, 19, 37, 0.76);
  box-shadow: 0 0.55rem 1.4rem rgba(0, 0, 0, 0.18);
  font: inherit;
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
}

.safe-ad-hide:hover,
.safe-ad-hide:focus-visible {
  border-color: rgba(60, 199, 255, 0.58);
  color: #ffffff;
}

.ad-premium-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(3, 9, 18, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ad-premium-modal[hidden] {
  display: none !important;
}

.ad-premium-card {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  width: min(28rem, 100%);
  border: 1px solid rgba(245, 196, 81, 0.36);
  border-radius: 8px;
  padding: clamp(1.2rem, 4vw, 1.65rem);
  text-align: center;
  background:
    linear-gradient(145deg, rgba(245, 196, 81, 0.1), rgba(60, 199, 255, 0.07)),
    rgba(8, 19, 37, 0.97);
  box-shadow: var(--shadow);
}

.ad-premium-card h3,
.ad-premium-card p {
  margin: 0;
}

.ad-premium-card > p:not(.eyebrow) {
  color: #c7e6f6;
  line-height: 1.5;
}

.ad-premium-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.ad-premium-eyebrow .lucide {
  width: 0.95rem;
  height: 0.95rem;
  color: #f5c451;
}

.ad-premium-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

.safe-ad-copy {
  align-self: end;
  display: grid;
  gap: 0.36rem;
  min-width: 0;
}

.safe-ad-copy .ad-label {
  margin-bottom: 0.1rem;
}

.safe-ad-eyebrow {
  color: #b5ecff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.safe-ad-copy h3,
.safe-ad-copy p {
  margin: 0;
}

.safe-ad-copy h3 {
  max-width: 16rem;
  color: #ffffff;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.05;
}

.safe-ad-copy p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.4;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.asset-grid-ad .safe-ad-creative,
.creator-page-ad-slot .safe-ad-creative,
.home-ad-slot .safe-ad-creative {
  gap: 0.42rem;
}

.asset-grid-ad .safe-ad-copy h3,
.creator-page-ad-slot .safe-ad-copy h3,
.home-ad-slot .safe-ad-copy h3 {
  font-size: 1rem;
}

.asset-grid-ad .safe-ad-copy p,
.creator-page-ad-slot .safe-ad-copy p,
.home-ad-slot .safe-ad-copy p {
  font-size: 0.88rem;
  -webkit-line-clamp: 2;
}

.home-ad-slot,
.home-premium-slot,
.home-grid-ad-slot,
.home-grid-premium-slot {
  align-content: center;
  gap: 0.75rem;
  min-height: 100%;
  border: 1px dashed rgba(60, 199, 255, 0.34);
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.11), rgba(234, 246, 255, 0.045)),
    rgba(234, 246, 255, 0.055);
  box-shadow: none;
}

.home-premium-slot,
.home-grid-premium-slot {
  border-color: rgba(245, 196, 81, 0.38);
  background:
    linear-gradient(145deg, rgba(245, 196, 81, 0.13), rgba(60, 199, 255, 0.055)),
    rgba(234, 246, 255, 0.055);
}

.home-grid-ad-slot,
.home-grid-premium-slot {
  min-height: 31rem;
  padding: 1rem;
}

.browse-grid-ad-slot,
.browse-grid-premium-slot {
  align-content: center;
  gap: 0.75rem;
  min-height: 31rem;
  border: 1px dashed rgba(60, 199, 255, 0.34);
  border-radius: 8px;
  padding: 1rem;
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.11), rgba(234, 246, 255, 0.045)),
    rgba(234, 246, 255, 0.055);
  box-shadow: none;
}

.browse-grid-premium-slot {
  border-color: rgba(245, 196, 81, 0.38);
  background:
    linear-gradient(145deg, rgba(245, 196, 81, 0.13), rgba(60, 199, 255, 0.055)),
    rgba(234, 246, 255, 0.055);
}

.browse-grid-ad-slot h3,
.browse-grid-ad-slot p,
.browse-grid-premium-slot h3,
.browse-grid-premium-slot p {
  margin: 0;
}

.browse-grid-ad-slot p,
.browse-grid-premium-slot p {
  color: var(--muted);
  line-height: 1.45;
}

.home-ad-slot h3,
.home-ad-slot p,
.home-premium-slot h3,
.home-premium-slot p,
.home-grid-ad-slot h3,
.home-grid-ad-slot p,
.home-grid-premium-slot h3,
.home-grid-premium-slot p {
  margin: 0;
}

.home-ad-slot p,
.home-premium-slot p,
.home-grid-ad-slot p,
.home-grid-premium-slot p {
  color: var(--muted);
  line-height: 1.45;
}

.home-feature-card h2,
.home-feature-card p,
.home-feature-grid-card h3,
.home-feature-grid-card p,
.home-feature-mini h3,
.home-feature-mini p {
  margin: 0;
}

.home-feature-card h2 a,
.home-feature-grid-card h3 a,
.home-feature-mini h3 a {
  color: var(--ink);
  text-decoration: none;
}

.home-feature-mini {
  display: grid;
  gap: 0.85rem;
  padding: 0;
  overflow: hidden;
}

.home-feature-mini > div {
  display: grid;
  gap: 0.45rem;
  padding: 1rem;
}

.home-feature-mini-media {
  min-height: 8rem;
  background-size: cover;
  background-position: center;
}

.home-feature-grid-card {
  overflow: hidden;
  border: 1px solid rgba(234, 246, 255, 0.11);
  border-radius: 8px;
  background: rgba(234, 246, 255, 0.06);
}

.home-feature-grid-card > .creation-media {
  border-radius: 8px 8px 0 0;
  background-size: cover;
  background-position: center;
}

.ad-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 1.7rem;
  border: 1px solid rgba(60, 199, 255, 0.25);
  border-radius: 999px;
  padding: 0.08rem 0.62rem 0;
  color: var(--accent);
  background: rgba(60, 199, 255, 0.1);
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.mini-feature .ad-label,
.news-card .ad-label,
.news-item .ad-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ad-card {
  display: grid;
  align-content: space-between;
  gap: 0.9rem;
  min-height: 100%;
  overflow: hidden;
  padding: 1rem;
  background:
    linear-gradient(135deg, rgba(60, 199, 255, 0.16), rgba(0, 94, 158, 0.1)),
    var(--panel);
}

.browse-grid-ad {
  min-height: 31rem;
  align-content: end;
  padding: 1rem;
}

.browse-grid-ad h3 {
  margin: 0;
}

.browse-grid-ad .ghost-button {
  justify-self: start;
}

.ad-card p,
.ad-mini p {
  color: var(--muted);
  line-height: 1.5;
}

.ad-mini {
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.16), rgba(245, 196, 81, 0.08)),
    var(--panel);
}

.ad-mini .ghost-button {
  justify-self: start;
  text-decoration: none;
}

.creation-card {
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 31rem;
}

.creation-card.is-premium,
.creation-card.is-creator {
  border-color: transparent;
}

.creation-card.is-premium::before,
.creation-card.is-creator::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 3;
  pointer-events: none;
  border-radius: 10px;
  padding: 2px;
  opacity: 0.92;
  background: var(--member-outline);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.creation-card.is-premium {
  --member-outline: linear-gradient(135deg, rgba(255, 224, 138, 0.86), rgba(215, 154, 31, 0.72));
}

.creation-card.is-creator {
  --member-outline: linear-gradient(135deg, rgba(140, 255, 196, 0.86), rgba(40, 201, 121, 0.72));
}

.creation-media-shell {
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.creation-media,
.spotlight-media,
.creation-media-fade {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 8.6;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background:
    url("assets/missing-placeholder.png") center / min(64%, 20rem) no-repeat,
    linear-gradient(145deg, #0096DB 0%, #005E9E 52%, #0F1722 100%);
  transition: filter 520ms ease, opacity 520ms ease, transform 520ms ease;
}

.creation-media.has-uploaded-media {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.creation-media-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  filter: blur(6px) saturate(1.08);
  transform: scale(1.012);
  transition: opacity 620ms ease, filter 620ms ease, transform 620ms ease;
}

.creation-media-fade.is-visible {
  opacity: 1;
  filter: blur(0) saturate(1);
  transform: scale(1);
}

.creation-media-fade.is-resetting {
  opacity: 0;
  transition: none;
}

.media-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(234, 246, 255, 0.24);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(15, 23, 34, 0.62);
  box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 160ms ease, transform 160ms ease;
}

.media-arrow:hover {
  background: rgba(0, 150, 219, 0.88);
  transform: translateY(-50%) scale(1.06);
}

.media-arrow-prev {
  left: 0.45rem;
}

.media-arrow-next {
  right: 0.45rem;
}

.creation-media::before,
.creation-media::after,
.spotlight-media::before,
.spotlight-media::after {
  position: absolute;
  content: "";
}

.media-coaster {
  background:
    linear-gradient(180deg, rgba(4, 13, 28, 0.02), rgba(4, 13, 28, 0.24)),
    url("assets/creation-coaster-close.png") center / cover no-repeat,
    linear-gradient(145deg, #0096DB 0%, #005E9E 52%, #0F1722 100%);
}

.media-coaster::before {
  display: none;
}

.media-coaster::after {
  display: none;
}

.media-plaza {
  background:
    linear-gradient(180deg, rgba(4, 13, 28, 0.02), rgba(4, 13, 28, 0.24)),
    url("assets/creation-coaster-wide.png") center / cover no-repeat,
    linear-gradient(145deg, #0096DB 0%, #005E9E 52%, #0F1722 100%);
}

.media-plaza::before {
  display: none;
}

.media-plaza::after {
  display: none;
}

.media-darkride {
  background:
    linear-gradient(180deg, rgba(4, 13, 28, 0.02), rgba(4, 13, 28, 0.24)),
    url("assets/creation-thrill-towers.png") center / cover no-repeat,
    linear-gradient(145deg, #0096DB 0%, #005E9E 52%, #0F1722 100%);
}

.media-darkride::before {
  display: none;
}

.media-darkride::after {
  display: none;
}

.creation-body {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
  align-content: start;
  min-width: 0;
  min-height: 15rem;
  padding: 0.9rem;
}

.creation-card-topline,
.asset-card-flags {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  align-items: center;
  min-width: 0;
  margin-bottom: 0.52rem;
}

.creation-card-topline .game-flag,
.asset-card-flags .asset-game-flag {
  margin-bottom: 0;
}

.creator-handle {
  flex: 0 1 auto;
  overflow: hidden;
  color: #bfe9ff;
  font-size: 0.74rem;
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.creation-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: start;
  margin-bottom: 0.35rem;
}

.creation-title-row h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  line-height: 1.1;
}

.creation-title-row h3 a {
  color: var(--ink);
  text-decoration: none;
  transition: color 160ms ease;
}

.creation-title-row h3 a:hover {
  color: var(--accent);
}

.creation-open-link {
  width: 1.85rem;
  height: 1.85rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(60, 199, 255, 0.28);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(234, 246, 255, 0.08);
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.creation-open-link:hover {
  border-color: rgba(60, 199, 255, 0.72);
  background: rgba(0, 150, 219, 0.24);
  transform: translateY(-1px);
}

.creation-open-link svg {
  width: 1rem;
  height: 1rem;
}

.creation-body p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.86rem;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.rating-stars {
  display: inline-flex;
  gap: 0.08rem;
  color: rgba(234, 246, 255, 0.28);
  font-size: 0.84rem;
  letter-spacing: 0;
}

.rating-stars .filled {
  color: #f5c451;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-height: 3.65rem;
  overflow: hidden;
  margin: 0.6rem 0;
}

.creation-card-footer {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: start;
  column-gap: 0.35rem;
  margin-top: auto;
  margin-bottom: 0.8rem;
}

.creation-card-footer .save-button {
  margin-left: 0.1rem;
}

.copy-counter {
  display: inline-flex;
  width: max-content;
  min-height: 1.58rem;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid rgba(60, 199, 255, 0.2);
  border-radius: 999px;
  padding: 0 0.42rem;
  color: #bfe9ff;
  background: rgba(0, 150, 219, 0.11);
  font-size: 0.7rem;
  font-weight: 900;
}

.copy-counter svg {
  width: 0.68rem;
  height: 0.68rem;
  stroke-width: 2.7;
}

.like-button {
  width: max-content;
  min-height: 1.58rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  border: 1px solid rgba(60, 199, 255, 0.3);
  border-radius: 999px;
  padding: 0 0.42rem;
  color: #d9f4ff;
  background: rgba(234, 246, 255, 0.08);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 900;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.like-button svg {
  width: 0.72rem;
  height: 0.72rem;
}

.like-button:hover,
.like-button.is-liked {
  color: #ffffff;
  border-color: rgba(60, 199, 255, 0.7);
  background: rgba(0, 150, 219, 0.22);
  transform: translateY(-1px);
}

.like-button[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.35);
  transform: none;
}

.tag-row span,
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 0.65rem;
  background: rgba(0, 150, 219, 0.14);
  font-size: 0.78rem;
  font-weight: 750;
}

.code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  margin-top: auto;
}

.code-row code {
  min-width: 0;
  overflow: hidden;
  padding: 0.72rem 0.88rem;
  border: 1px solid rgba(60, 199, 255, 0.32);
  border-radius: 12px;
  color: #eaf6ff;
  background:
    linear-gradient(135deg, rgba(0, 150, 219, 0.16), rgba(234, 246, 255, 0.055)),
    rgba(8, 19, 37, 0.72);
  box-shadow: inset 0 0 0 1px rgba(234, 246, 255, 0.04);
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.workshop-code-chip,
.workshop-code-input {
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workshop-code-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  border: 1px solid rgba(60, 199, 255, 0.3);
  border-radius: 10px;
  padding: 0.18rem 0.55rem 0.12rem;
  color: #eaf6ff;
  background: rgba(0, 150, 219, 0.13);
}

.member-flag {
  position: absolute;
  top: -0.55rem;
  right: -0.45rem;
  z-index: 5;
  display: inline-flex;
  gap: 0.35rem;
  overflow: hidden;
  min-height: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 0.75rem;
  color: #07101c;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  box-shadow: 0 0.7rem 1.4rem rgba(0, 0, 0, 0.26);
}

.member-flag::after {
  content: "";
  position: absolute;
  inset: -45% auto -45% -60%;
  width: 42%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
  animation: flag-gloss 5.5s ease-in-out infinite;
}

@keyframes flag-gloss {
  0%,
  45% {
    left: -60%;
    opacity: 0;
  }
  55% {
    opacity: 0.82;
  }
  72% {
    left: 120%;
    opacity: 0;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}

.member-flag svg {
  width: 0.9rem;
  height: 0.9rem;
  stroke-width: 3;
}

.premium-flag {
  border: 1px solid rgba(245, 196, 81, 0.78);
  background: linear-gradient(135deg, #ffe08a, #d79a1f);
}

.creator-flag {
  border: 1px solid rgba(109, 255, 183, 0.78);
  background: linear-gradient(135deg, #8cffc4, #28c979);
}

body.codes-locked .code-row code {
  filter: blur(6px);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

body.codes-wait-required .code-row.code-wait-required:not(.code-revealed) code {
  filter: blur(6px);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

body.codes-locked .copy-button[disabled] {
  position: relative;
  min-width: 7.8rem;
  opacity: 0.88;
  cursor: not-allowed;
  transition: color 180ms ease, font-size 180ms ease, opacity 180ms ease;
}

body.codes-locked .copy-button[disabled]::after {
  content: attr(data-hover-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 0.7rem;
  color: #ffffff;
  font-size: 0.68rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 180ms ease;
  white-space: nowrap;
}

body.codes-locked .copy-button[disabled]:hover {
  color: transparent;
  font-size: 0.68rem;
}

body.codes-locked .copy-button[disabled]:hover::after {
  opacity: 1;
}

.copy-button.is-counting-down,
.asset-card-actions button.is-counting-down {
  min-width: 6.8rem;
  opacity: 0.78;
  cursor: wait;
}

.wait-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(3, 9, 18, 0.68);
  backdrop-filter: blur(12px);
}

.wait-modal[hidden] {
  display: none !important;
}

.duplicate-upload-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(5, 12, 24, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.duplicate-upload-modal[hidden] {
  display: none !important;
}

.duplicate-upload-card {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  width: min(26rem, 100%);
  border: 1px solid rgba(255, 135, 150, 0.34);
  border-radius: 8px;
  padding: 1.25rem;
  text-align: center;
  background: rgba(8, 19, 37, 0.96);
  box-shadow: var(--shadow);
}

.duplicate-upload-card h3,
.duplicate-upload-card p {
  margin: 0;
}

.duplicate-upload-card p {
  color: #c7e6f6;
  line-height: 1.5;
}

.duplicate-upload-icon {
  color: #fff;
  background: rgba(204, 45, 67, 0.9);
}

.wait-modal-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  width: min(27rem, 100%);
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 18px;
  background: rgba(15, 23, 34, 0.96);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.38);
  padding: clamp(1.4rem, 5vw, 2rem);
  text-align: center;
}

.wait-modal-card h3,
.wait-modal-card p {
  margin: 0;
}

.wait-modal-card p:not(.eyebrow) {
  max-width: 21rem;
  color: var(--muted);
  line-height: 1.55;
}

.wait-modal-icon {
  color: #f2ba4d;
  background: rgba(242, 186, 77, 0.15);
}

.wait-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
  cursor: pointer;
}

.wait-modal-close .lucide {
  width: 1rem;
  height: 1rem;
}

.wait-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  place-items: center;
  gap: 0.08rem;
  width: 7.2rem;
  height: 7.2rem;
  border: 1px solid rgba(242, 186, 77, 0.34);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 186, 77, 0.18), rgba(0, 150, 219, 0.08));
  box-shadow: 0 0 34px rgba(242, 186, 77, 0.16);
}

.wait-timer span {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.82;
}

.wait-timer small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.wait-progress {
  width: min(18rem, 100%);
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(234, 246, 255, 0.1);
}

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

.wait-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0.25rem;
}

.wait-modal-actions .solid-button {
  justify-content: center;
  text-align: center;
}

body.codes-locked .save-button[disabled] {
  opacity: 0.38;
  color: rgba(234, 246, 255, 0.62);
  border-color: rgba(234, 246, 255, 0.14);
  background: rgba(234, 246, 255, 0.05);
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.split-band {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.9fr);
  gap: 1rem;
}

.spotlight,
.news-feed,
.chat-band {
  padding: 1rem;
}

.spotlight-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.spotlight-media {
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 52%, var(--accent));
}

.spotlight-media::before {
  left: 12%;
  right: 12%;
  bottom: 16%;
  height: 48%;
  border-radius: 50% 50% 0 0;
  border: 0.8rem solid rgba(234, 246, 255, 0.74);
  border-bottom: 0;
}

.spotlight-media::after {
  right: 16%;
  top: 18%;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(234, 246, 255, 0.76);
}

.creator-spotlight-image {
  background:
    linear-gradient(180deg, rgba(4, 13, 28, 0.02), rgba(4, 13, 28, 0.28)),
    url("assets/creation-coaster-close.png") center / cover no-repeat,
    linear-gradient(145deg, #0096DB 0%, #005E9E 52%, #0F1722 100%);
}

.creator-spotlight-image::before,
.creator-spotlight-image::after {
  display: none;
}

.spotlight-copy {
  display: grid;
  align-content: center;
  justify-items: start;
}

.creators-featured {
  margin-top: 1rem;
}

.creator-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.9fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.creator-feature-large {
  grid-row: 1 / 5;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(234, 246, 255, 0.06);
  box-shadow: var(--shadow);
}

.creator-feature-large .spotlight-media {
  min-height: 16rem;
}

.creator-feature-large .spotlight-copy {
  gap: 0.75rem;
  padding: 1rem;
}

.creator-feature-large .spotlight-copy h2,
.creator-feature-large .spotlight-copy p {
  margin: 0;
}

.creator-feature-large .spotlight-copy h2 a,
.creator-feature-small h3 a {
  color: inherit;
}

.creator-feature-large .spotlight-media,
.creator-feature-thumb {
  background-size: cover;
  background-position: center;
}

.creator-feature-large .spotlight-copy .status-pill {
  margin-bottom: 0.35rem;
}

.creator-feature-small {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(234, 246, 255, 0.06);
  box-shadow: var(--shadow);
  padding: 0;
  display: grid;
  grid-template-columns: 40% 60%;
  min-height: 10.25rem;
  overflow: hidden;
  align-items: stretch;
}

.creator-feature-small h3 {
  margin: 0;
}

.creator-feature-small p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.creator-feature-small-copy {
  display: grid;
  align-content: end;
  gap: 0.7rem;
  padding: 1rem;
}

.creator-feature-small-copy > div {
  display: grid;
  gap: 0.45rem;
}

.creator-feature-small-copy .ghost-button {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  justify-self: auto;
  min-height: 2.15rem;
  background: rgba(8, 19, 37, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.creator-feature-thumb {
  min-height: 100%;
  width: 100%;
  border-right: 1px solid var(--line);
}

.creator-feature-small.ad-slot {
  display: grid;
  grid-template-columns: 1fr;
  min-height: auto;
  padding: 1rem;
  gap: 0.5rem;
}

.creator-feature-small.ad-slot .ghost-button {
  position: static;
  justify-self: start;
  background: rgba(234, 246, 255, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.creator-page-ad-slot,
.creator-page-premium-slot {
  align-content: center;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  border-style: dashed;
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.11), rgba(234, 246, 255, 0.045)),
    rgba(234, 246, 255, 0.055);
  box-shadow: none;
  padding: 1rem;
}

.creator-page-premium-slot {
  border-color: rgba(245, 196, 81, 0.38);
  background:
    linear-gradient(145deg, rgba(245, 196, 81, 0.13), rgba(60, 199, 255, 0.055)),
    rgba(234, 246, 255, 0.055);
}

.creator-page-ad-slot h3,
.creator-page-ad-slot p,
.creator-page-premium-slot h3,
.creator-page-premium-slot p {
  margin: 0;
}

.creator-page-ad-slot p,
.creator-page-premium-slot p {
  color: var(--muted);
  line-height: 1.45;
}

.creator-path {
  margin-top: 6rem;
}

.creator-path .section-heading {
  justify-content: center;
  margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
  text-align: center;
}

.creator-path .icon-title {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}

.creator-path .icon-title > div {
  justify-items: center;
  gap: 0.35rem;
}

.member-flag svg {
  width: 0.9rem;
  height: 0.9rem;
  stroke-width: 3;
}

.creator-path-summary {
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  max-width: 52rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

.creator-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.creator-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.creator-timeline::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 1.25rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0096db 0%, #3cc7ff 35%, #70d996 68%, #f5c451 100%);
  box-shadow: 0 0 22px rgba(60, 199, 255, 0.16);
}

.timeline-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 0.2rem 0.5rem 0;
}

.timeline-icon {
  display: inline-grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  border: 1px solid rgba(60, 199, 255, 0.88);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(0, 150, 219, 1);
  box-shadow: 0 12px 26px rgba(0, 150, 219, 0.32);
}

.timeline-step:nth-child(1) .timeline-icon {
  border-color: rgba(0, 150, 219, 0.88);
  background: linear-gradient(135deg, #0096db, #005e9e);
}

.timeline-step:nth-child(2) .timeline-icon {
  border-color: rgba(60, 199, 255, 0.88);
  background: linear-gradient(135deg, #3cc7ff, #0096db);
}

.timeline-step:nth-child(3) .timeline-icon {
  border-color: rgba(112, 217, 150, 0.88);
  background: linear-gradient(135deg, #70d996, #0096db);
}

.timeline-step:nth-child(4) .timeline-icon {
  border-color: rgba(245, 196, 81, 0.9);
  background: linear-gradient(135deg, #f5c451, #0096db);
}

.timeline-icon .lucide {
  width: 1.38rem;
  height: 1.38rem;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.35 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.timeline-step h3 {
  margin: 0;
}

.timeline-step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.88rem;
}

.creator-path-actions {
  display: flex;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.6rem;
}

.creator-path-actions-top {
  margin-top: 0.9rem;
}

.creator-check-blue {
  border-color: rgba(60, 199, 255, 0.72);
  color: #9edfff;
  background: transparent;
}

.creator-check-blue:hover {
  background: rgba(60, 199, 255, 0.14);
}

.eligibility-modal-card.creator-rules-card {
  width: min(980px, 96vw);
  text-align: left;
}

.creator-rules-card > h3,
.creator-rules-card > p {
  text-align: center;
}

.creator-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.4rem;
}

.creator-rule-group {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(234, 246, 255, 0.05);
  padding: 0.75rem;
}

.creator-rule-group-full {
  grid-column: 1 / -1;
}

.creator-rule-group h4 {
  margin: 0 0 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.96rem;
}

.creator-rule-group h4 .lucide {
  width: 1rem;
  height: 1rem;
}

.creator-rule-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
  justify-items: start;
  text-align: left;
}

.creator-rule-group li {
  display: grid;
  grid-template-columns: 0.96rem 1fr;
  align-items: start;
  column-gap: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.35;
  width: 100%;
  text-align: left;
  text-transform: capitalize;
}

.creator-rule-group li .lucide {
  width: 0.96rem;
  height: 0.96rem;
  margin-top: 0.12rem;
  flex: 0 0 auto;
}

.rule-ok .lucide {
  color: #7ce2b0;
}

.rule-no .lucide {
  color: #ff9ca8;
}

.news-item {
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.news-item span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.news-list {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}

.news-card {
  display: grid;
  grid-template-columns: minmax(14rem, 0.55fr) minmax(0, 1fr);
  gap: 1rem;
  overflow: hidden;
  padding: 1rem;
}

.news-visual {
  overflow: hidden;
  min-height: 12rem;
  border-radius: 8px;
}

.news-visual.has-upload {
  border: 1px solid rgba(234, 246, 255, 0.12);
  background: rgba(234, 246, 255, 0.06);
}

.news-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  object-fit: cover;
}

.news-summary {
  color: #fff;
  font-weight: 850;
}

.news-card-body {
  margin-top: 0.2rem;
}

.game-flag {
  display: inline-flex;
  gap: 0.32rem;
  align-items: center;
  justify-self: start;
  margin-bottom: 0.52rem;
  min-height: 1.65rem;
  border: 1px solid rgba(60, 199, 255, 0.32);
  border-radius: 999px;
  padding: 0 0.54rem;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 0.68rem;
  font-weight: 900;
}

.game-flag img {
  width: 0.95rem;
  height: 0.95rem;
  object-fit: contain;
}

.premium-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.premium-card {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  min-height: 18rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.premium-card.featured-tier {
  background: linear-gradient(180deg, rgba(0, 150, 219, 0.22), rgba(234, 246, 255, 0.08));
}

.premium-card p,
.premium-card li,
.premium-note {
  color: var(--muted);
  line-height: 1.5;
}

.premium-card ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.1rem;
}

.premium-note {
  border: 1px solid rgba(60, 199, 255, 0.26);
  border-radius: 8px;
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(60, 199, 255, 0.08);
}

.state-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.state-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  background: var(--panel);
}

.state-card p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.state-dot {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
}

.loading-dot {
  background: var(--accent);
  box-shadow: 0 0 0 0.45rem rgba(60, 199, 255, 0.12);
}

.empty-dot {
  background: #9FC5DC;
  box-shadow: 0 0 0 0.45rem rgba(159, 197, 220, 0.12);
}

.error-dot {
  background: #ff8a2a;
  box-shadow: 0 0 0 0.45rem rgba(255, 138, 42, 0.12);
}

.chat-band {
  margin-bottom: 1rem;
}

.forums-page {
  width: min(calc(100vw - clamp(1rem, 2vw, 2rem)), 1760px);
  margin: 0 auto;
  padding-top: clamp(1rem, 3vw, 2.2rem);
  padding-bottom: clamp(1rem, 3vw, 2.2rem);
}

.forums-page .community-hub-band {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.forums-page + .footer-rich {
  margin-top: 0;
}

.community-hub-band .chat-heading {
  align-items: center;
}

.hub-mode-switch {
  display: inline-flex;
  gap: 0.45rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(234, 246, 255, 0.05);
}

.hub-mode-switch button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.2rem;
  padding: 0 0.85rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
}

.hub-mode-switch button.active {
  border-color: rgba(60, 199, 255, 0.35);
  background: rgba(0, 94, 158, 0.72);
}

.hub-mode-switch .lucide {
  width: 0.92rem;
  height: 0.92rem;
}

.community-panels {
  display: grid;
  height: clamp(38rem, calc(100svh - 13.5rem), 74rem);
  overflow: hidden;
}

.community-panel {
  grid-area: 1 / 1;
  height: 100%;
  min-height: 0;
}

.community-panel.active {
  animation: communityPanelFade 220ms ease;
}

.community-panel[hidden] {
  display: none !important;
}

@keyframes communityPanelFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-shell {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr) 15rem;
  gap: 1rem;
  height: 100%;
  min-height: 0;
}

.room-rail,
.member-panel,
.chat-main {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(234, 246, 255, 0.06);
}

.room-rail {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 0.75rem;
  overflow: auto;
}

.room-rail-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.45rem 0 0.1rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.room-rail-heading:first-of-type {
  margin-top: 0.2rem;
}

.room-rail-heading .game-toggle-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.room-rail button {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 0.8rem;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.room-rail button .lucide {
  width: 0.82rem;
  height: 0.82rem;
  margin-left: auto;
  color: rgba(234, 246, 255, 0.64);
}

.room-rail button.active {
  border-color: rgba(60, 199, 255, 0.25);
  background: var(--primary-dark);
}

.chat-channel-menu-button {
  display: none !important;
}

.room-rail span {
  color: var(--accent);
  font-weight: 900;
}

.chat-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.forum-topic-list {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 0;
}

.forum-topic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(234, 246, 255, 0.06);
  padding: 0.55rem 0.65rem;
  min-height: 4.35rem;
  min-width: 0;
}

.forum-topic-pinned {
  border-color: rgba(60, 199, 255, 0.32);
  background: rgba(0, 150, 219, 0.1);
}

.forum-topic-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.forum-topic-status span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(0, 150, 219, 0.12);
}

.forum-topic-status .lucide {
  width: 0.95rem;
  height: 0.95rem;
}

.forum-follow-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(0, 150, 219, 0.12);
}

.forum-follow-marker .lucide {
  width: 0.95rem;
  height: 0.95rem;
}

.forum-topic-search-hit {
  animation: forumSearchPulse 820ms ease-out both;
}

@keyframes forumSearchPulse {
  0% {
    border-color: rgba(60, 199, 255, 0.78);
    background: rgba(0, 150, 219, 0.24);
    box-shadow: 0 0 0 0 rgba(60, 199, 255, 0.28);
    transform: translateY(5px);
  }
  55% {
    border-color: rgba(60, 199, 255, 0.48);
    background: rgba(0, 150, 219, 0.14);
    box-shadow: 0 0 0 8px rgba(60, 199, 255, 0);
    transform: translateY(0);
  }
  100% {
    border-color: var(--line);
    background: rgba(234, 246, 255, 0.06);
    box-shadow: none;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .forum-topic-search-hit {
    animation: none;
    border-color: rgba(60, 199, 255, 0.45);
    background: rgba(0, 150, 219, 0.12);
  }

  .avatar-frame-premium-neon .forum-avatar-frame {
    animation: none;
  }

  .avatar-frame-automod-police .forum-avatar-frame {
    animation: none;
  }

  .forum-avatar-wrap[data-static-author] img {
    animation: none;
  }

  .name-style-rainbow {
    animation: none;
  }
}

.forum-topic strong {
  display: block;
  font-size: 0.95rem;
}

.forum-topic-link {
  display: inline-block;
  border: 0;
  padding: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.18;
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: color 220ms ease;
}

.forum-topic-link:hover {
  color: #8fdfff;
}

.forum-topic p {
  overflow: hidden;
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-post-view {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  padding: 0.9rem;
  overflow-y: auto;
  overflow-x: hidden;
  grid-row: 3 / 5;
  min-width: 0;
}

.forum-post-view[hidden] {
  display: none !important;
}

.forum-back-button {
  justify-self: start;
}

.forum-back-button .lucide {
  width: 0.9rem;
  height: 0.9rem;
}

.forum-post-card {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(234, 246, 255, 0.05);
  padding: 0.9rem;
  min-width: 0;
}

.forum-post-avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(0, 150, 219, 0.82), rgba(0, 94, 158, 0.7));
  object-fit: contain;
  padding: 0.18rem;
}

.forum-avatar-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: fit-content;
  border-radius: 16px;
  text-decoration: none;
}

.forum-avatar-frame {
  position: absolute;
  inset: -2px;
  z-index: 0;
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
}

.forum-avatar-frame::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.forum-avatar-wrap img {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(60, 199, 255, 0.08);
}

.forum-avatar-wrap[data-static-author] img {
  border-color: #28d7ff;
  box-shadow: 0 0 10px rgba(40, 215, 255, 0.42);
  animation: automodAvatarBorderPulse 1.25s ease-in-out infinite;
}

.forum-avatar-wrap.has-avatar-frame .forum-avatar-frame {
  opacity: 1;
}

.avatar-frame-premium-neon .forum-avatar-frame {
  background: linear-gradient(90deg, #33d6ff 0%, #8a7bff 25%, #ff4de3 50%, #8a7bff 75%, #33d6ff 100%);
  background-size: 18rem 100%;
  box-shadow: 0 0 14px rgba(60, 199, 255, 0.36), 0 0 22px rgba(245, 196, 81, 0.16);
  animation: avatarFrameNeonFlow 2.8s linear infinite;
}

.avatar-frame-blue .forum-avatar-frame {
  background: linear-gradient(135deg, #3cc7ff, #0a7fe8);
  box-shadow: 0 0 12px rgba(60, 199, 255, 0.28);
}

.avatar-frame-yellow .forum-avatar-frame {
  background: linear-gradient(135deg, #ffe071, #f5a623);
  box-shadow: 0 0 12px rgba(245, 196, 81, 0.24);
}

.avatar-frame-green .forum-avatar-frame {
  background: linear-gradient(135deg, #70d996, #129a62);
  box-shadow: 0 0 12px rgba(112, 217, 150, 0.22);
}

.avatar-frame-red .forum-avatar-frame {
  background: linear-gradient(135deg, #ff6f6f, #d92d3f);
  box-shadow: 0 0 12px rgba(255, 96, 108, 0.24);
}

.avatar-frame-pride .forum-avatar-frame {
  background: linear-gradient(90deg, #e40303 0%, #ff8c00 15%, #ffed00 30%, #008026 45%, #24408e 62%, #732982 80%, #e40303 100%);
  background-size: 24rem 100%;
  animation: avatarFrameRainbowFlow 5.2s linear infinite;
}

.avatar-frame-neon .forum-avatar-frame,
.avatar-frame-premium-neon .forum-avatar-frame {
  background: linear-gradient(90deg, #33d6ff 0%, #8a7bff 25%, #ff4de3 50%, #8a7bff 75%, #33d6ff 100%);
  background-size: 18rem 100%;
  box-shadow: 0 0 14px rgba(51, 214, 255, 0.36), 0 0 20px rgba(255, 77, 227, 0.22);
  animation: avatarFrameNeonFlow 2.8s linear infinite;
}

.avatar-frame-rustic .forum-avatar-frame {
  background:
    repeating-linear-gradient(92deg, rgba(255, 224, 151, 0.14) 0 4px, rgba(58, 27, 12, 0.18) 4px 8px),
    linear-gradient(135deg, #7b451d, #d19142 38%, #5d2f14 64%, #b56c2c);
  background-size: 180% 100%, 220% 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 229, 172, 0.22), 0 0 12px rgba(177, 102, 40, 0.22);
  animation: avatarFrameWoodFlow 7s ease-in-out infinite;
}

.avatar-frame-glitch .forum-avatar-frame {
  overflow: hidden;
  background:
    linear-gradient(90deg, #00f0ff 0 25%, #ff2bd6 25% 50%, #f5f451 50% 75%, #00f0ff 75% 100%);
  box-shadow: -2px 0 0 rgba(0, 240, 255, 0.6), 2px 0 0 rgba(255, 43, 214, 0.56);
  animation: avatarFrameGlitch 1.2s steps(2, end) infinite;
}

.avatar-frame-glitch .forum-avatar-frame::after {
  opacity: 1;
  inset: 2px;
  background: repeating-linear-gradient(180deg, rgba(8, 19, 37, 0.08) 0 2px, rgba(255, 255, 255, 0.16) 2px 3px);
  mix-blend-mode: screen;
}

.avatar-frame-creator .forum-avatar-frame {
  background: linear-gradient(135deg, rgba(112, 217, 150, 0.95), rgba(60, 199, 255, 0.82));
  box-shadow: 0 0 16px rgba(112, 217, 150, 0.24);
}

.avatar-frame-automod-police .forum-avatar-frame {
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.avatar-frame-automod-police .forum-avatar-frame::after {
  opacity: 1;
  padding: 2px;
  border-radius: inherit;
  background: #2f8cff;
  filter: none;
  mix-blend-mode: screen;
  box-shadow: inset 0 0 10px rgba(47, 140, 255, 0.95);
  animation: automodPoliceGlow 1.15s ease-in-out infinite;
}

@keyframes avatarFrameRainbowFlow {
  0% {
    background-position: 0 50%;
  }
  100% {
    background-position: 24rem 50%;
  }
}

@keyframes avatarFrameNeonFlow {
  0% {
    background-position: 0 50%;
    filter: saturate(1.08);
  }
  50% {
    background-position: 9rem 50%;
    filter: saturate(1.32);
  }
  100% {
    background-position: 18rem 50%;
    filter: saturate(1.08);
  }
}

@keyframes avatarFrameWoodFlow {
  0%,
  100% {
    background-position: 0% 50%, 0% 50%;
  }
  50% {
    background-position: 85% 50%, 120% 50%;
  }
}

@keyframes avatarFrameGlitch {
  0%,
  100% {
    transform: translate(0, 0);
    filter: saturate(1.1);
  }
  30% {
    transform: translate(1px, -1px);
    filter: saturate(1.6) hue-rotate(18deg);
  }
  62% {
    transform: translate(-1px, 1px);
    filter: saturate(1.4) hue-rotate(-16deg);
  }
}

@keyframes automodPoliceGlow {
  0%,
  100% {
    background: #2f8cff;
    box-shadow: inset 0 0 10px rgba(47, 140, 255, 0.95);
  }
  50% {
    background: #ff3d55;
    box-shadow: inset 0 0 10px rgba(255, 61, 85, 0.95);
  }
}

@keyframes automodAvatarBorderPulse {
  0%,
  100% {
    border-color: #28d7ff;
    box-shadow: 0 0 10px rgba(40, 215, 255, 0.5), 0 0 18px rgba(40, 215, 255, 0.18);
  }
  50% {
    border-color: #ff3158;
    box-shadow: 0 0 10px rgba(255, 49, 88, 0.5), 0 0 18px rgba(255, 49, 88, 0.18);
  }
}

.forum-post-content {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.forum-post-head {
  display: flex;
  gap: 1rem;
  align-items: start;
  justify-content: space-between;
  min-width: 0;
}

.forum-post-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.45rem;
  align-items: center;
}

.forum-post-head span {
  display: block;
  margin: 0 0 0.18rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 850;
}

.forum-author-link {
  display: inline-flex;
  width: fit-content;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 850;
  text-decoration: none;
  transition: color 180ms ease;
}

.forum-author-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.user-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-height: 1.25rem;
  min-width: 4.4rem;
  border: 1px solid rgba(60, 199, 255, 0.32);
  border-radius: 999px;
  padding: 0 0.55rem;
  color: #dff7ff;
  background: rgba(0, 150, 219, 0.18);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.user-flag .lucide {
  width: 0.75rem;
  height: 0.75rem;
}

.user-flag-moderator {
  border-color: rgba(60, 199, 255, 0.36);
  color: #dff7ff;
  background: rgba(0, 150, 219, 0.18);
}

.user-flag-admin {
  border-color: rgba(255, 107, 107, 0.45);
  color: #ffe1e1;
  background: rgba(255, 107, 107, 0.18);
}

.user-flag-editor {
  border-color: rgba(167, 139, 250, 0.45);
  color: #eee7ff;
  background: rgba(167, 139, 250, 0.16);
}

.user-flag-premium {
  border-color: rgba(245, 196, 81, 0.45);
  color: #ffe8a7;
  background: rgba(245, 196, 81, 0.16);
}

.user-flag-creator {
  border-color: rgba(124, 226, 176, 0.45);
  color: #d9ffe9;
  background: rgba(112, 217, 150, 0.16);
}

.forum-author-link:hover {
  color: #b7ecff;
}

.forum-author-link[data-static-author],
.forum-avatar-wrap[data-static-author] {
  cursor: default;
}

.forum-author-link[data-static-author]:hover {
  color: var(--accent);
}

.name-style-premium-gold {
  color: #f5c451;
  text-shadow: 0 0 12px rgba(245, 196, 81, 0.24);
}

.name-style-creator-green {
  color: #7ce2b0;
  text-shadow: 0 0 12px rgba(124, 226, 176, 0.22);
}

.name-style-neon-blue {
  color: #8fe5ff;
  text-shadow: 0 0 12px rgba(60, 199, 255, 0.42);
}

.name-font-bubble {
  font-family: "Cherry Bomb One", "Arial Rounded MT Bold", "Fredoka", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.name-font-arcade {
  font-family: "Sancreek", "Rockwell Extra Bold", "Copperplate", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.name-font-pixel {
  font-family: "Pixelify Sans", "Lucida Console", "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.name-font-sleek {
  font-family: "Zen Dots", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.name-font-gothic {
  font-family: "Germania One", "Old English Text MT", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.name-style-accent {
  color: #8fe5ff;
  text-shadow: 0 0 12px rgba(60, 199, 255, 0.42);
}

.name-style-gold,
.name-style-yellow {
  color: #f5c451;
  text-shadow: 0 0 12px rgba(245, 196, 81, 0.24);
}

.name-style-green {
  color: #7ce2b0;
  text-shadow: 0 0 12px rgba(124, 226, 176, 0.22);
}

.name-style-red {
  color: #ff6b6b;
  text-shadow: 0 0 12px rgba(255, 75, 85, 0.24);
}

.name-style-gradient-sky,
.name-style-sky,
.name-style-gradient-sunset,
.name-style-sunset,
.name-style-gradient-jungle,
.name-style-jungle,
.name-style-animated-rainbow,
.name-style-pride,
.name-style-animated-pulse,
.name-style-pulse,
.name-style-custom,
.name-style-animated-glitch,
.name-style-glitch {
  color: #fff;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.name-style-gradient-sky {
  background-image: linear-gradient(90deg, #6fd3ff, #ffffff, #00a2e8);
}

.name-style-sky {
  background-image: linear-gradient(90deg, #50c8ff, #eaf6ff, #0096db);
  background-size: 220% 100%;
  animation: usernameGradientDrift 4.4s ease-in-out infinite;
}

.name-style-gradient-sunset {
  background-image: linear-gradient(90deg, #ffbf47, #ff7aa2, #6fd3ff);
}

.name-style-sunset {
  background-image: linear-gradient(90deg, #ffb347, #ff6f91, #9b5cff);
  background-size: 220% 100%;
  animation: usernameGradientDrift 4.8s ease-in-out infinite;
}

.name-style-gradient-jungle {
  background-image: linear-gradient(90deg, #7ce2b0, #d8b97a, #4db6ac);
}

.name-style-jungle {
  background-image: linear-gradient(90deg, #63d471, #f5d76e, #168f5f);
  background-size: 220% 100%;
  animation: usernameGradientDrift 5.2s ease-in-out infinite;
}

.name-style-animated-rainbow,
.name-style-rainbow,
.name-style-pride {
  color: #fff;
  background: linear-gradient(90deg, #e40303 0%, #ff8c00 15%, #ffed00 30%, #008026 45%, #24408e 62%, #732982 80%, #e40303 100%);
  background-size: 24rem 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: avatarFrameRainbowFlow 5.2s linear infinite;
}

.name-style-animated-pulse,
.name-style-pulse {
  background-image: linear-gradient(90deg, #6fd3ff, #ffffff, #f5c451);
  animation: usernamePulse 1.9s ease-in-out infinite;
}

.name-style-animated-glitch,
.name-style-glitch {
  position: relative;
  background-image: linear-gradient(90deg, #ff4d8d, #6fd3ff, #f5c451);
  animation: usernameGlitch 1.4s steps(2, end) infinite;
}

.name-style-custom {
  background-image: linear-gradient(90deg, var(--username-custom-a, #3cc7ff), var(--username-custom-b, #f5c451));
}

@keyframes usernameRainbow {
  to {
    background-position: 24rem 0;
  }
}

@keyframes usernameGradientDrift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes usernamePulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(111, 211, 255, 0));
    opacity: 0.82;
  }
  50% {
    filter: drop-shadow(0 0 0.6rem rgba(111, 211, 255, 0.65));
    opacity: 1;
  }
}

@keyframes usernameGlitch {
  0%,
  100% {
    transform: translate(0, 0);
    filter: drop-shadow(0.08rem 0 #00a2e8);
  }
  45% {
    transform: translate(0.04rem, -0.02rem);
    filter: drop-shadow(-0.08rem 0 #ff4d8d);
  }
  70% {
    transform: translate(-0.03rem, 0.02rem);
    filter: drop-shadow(0.08rem 0 #f5c451);
  }
}

.forum-post-view h4 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.18;
}

.forum-post-view p {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
}

.icon-button[hidden] {
  display: none !important;
}

.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 50%;
  bottom: calc(100% + 0.45rem);
  z-index: 10;
  min-width: max-content;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(8, 19, 37, 0.96);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.has-tooltip:hover::after,
.has-tooltip:focus-visible::after {
  opacity: 1;
  transform: translate(50%, 0);
}

.icon-button .lucide {
  width: 1rem;
  height: 1rem;
}

.forum-reply-button {
  flex: 0 0 auto;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(0, 150, 219, 0.12);
}

.forum-edit-button {
  color: #f5c451;
  background: rgba(245, 196, 81, 0.12);
}

.forum-delete-button {
  color: #ff9ca8;
  background: rgba(255, 120, 130, 0.12);
}

.forum-report-button {
  color: #ffcf7a;
  background: rgba(245, 196, 81, 0.1);
}

.forum-follow-button {
  color: var(--accent);
  background: rgba(0, 150, 219, 0.12);
}

.forum-lock-button {
  color: #f5c451;
  background: rgba(245, 196, 81, 0.12);
}

.forum-lock-button.is-locked {
  color: #7ce2b0;
  border-color: rgba(124, 226, 176, 0.34);
  background: rgba(112, 217, 150, 0.12);
}

.forum-follow-button.is-following {
  color: #7ce2b0;
  border-color: rgba(124, 226, 176, 0.34);
  background: rgba(112, 217, 150, 0.12);
}

.notification-button {
  position: relative;
  flex: 0 0 auto;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
}

.notification-button:hover,
.notification-button:focus-visible {
  border-color: transparent;
  background: rgba(234, 246, 255, 0.08);
}

.notification-menu-wrap {
  position: relative;
  display: inline-flex;
}

.notification-dropdown {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  z-index: 80;
  width: min(23rem, 86vw);
  border: 1px solid rgba(60, 199, 255, 0.2);
  border-radius: 18px;
  padding: 0.75rem;
  background: rgba(9, 25, 43, 0.96);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px);
}

.notification-dropdown-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.55rem;
}

.notification-dropdown-head strong {
  color: #fff;
}

.notification-dropdown-head a {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 900;
}

.notification-preview-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  border-radius: 14px;
  padding: 0.68rem;
  color: #eaf6ff;
  text-decoration: none;
  background: rgba(234, 246, 255, 0.06);
}

.notification-preview-card + .notification-preview-card {
  margin-top: 0.45rem;
}

.notification-preview-card strong,
.notification-preview-card small {
  display: block;
}

.notification-preview-card small {
  overflow: hidden;
  color: #b9d8eb;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.notification-preview-card svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
}

.notification-preview-card:hover {
  background: rgba(0, 150, 219, 0.18);
}

.notification-empty {
  margin: 0;
  color: #b9d8eb;
  font-weight: 850;
}

.account-menu-wrap {
  position: relative;
  display: inline-flex;
}

.account-menu-button {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  width: 2.45rem;
  height: 2.45rem;
  border: 1px solid rgba(234, 246, 255, 0.18);
  border-radius: 999px;
  padding: 0;
  color: #eaf6ff;
  background: rgba(234, 246, 255, 0.08);
}

.account-identity-button {
  grid-template-columns: 2rem minmax(0, auto) auto;
  gap: 0.42rem;
  justify-content: start;
  width: auto;
  min-width: 0;
  max-width: clamp(8.5rem, 15vw, 12rem);
  border-color: transparent;
  padding: 0.2rem 0;
  background: transparent;
  text-align: left;
}

.account-menu-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-identity-button img {
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
}

.account-identity-button span {
  min-width: 0;
  overflow: hidden;
  color: #eaf6ff;
  font-size: 0.84rem;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-identity-button > svg {
  width: 0.95rem;
  height: 0.95rem;
  color: #9fc5dc;
  transition: color 160ms ease, transform 160ms ease;
}

.account-menu-button:hover {
  border-color: rgba(60, 199, 255, 0.45);
  background: rgba(0, 150, 219, 0.18);
}

.account-identity-button:hover {
  border-color: transparent;
  background: transparent;
}

.account-identity-button:hover span,
.account-identity-button:hover > svg {
  color: #ffffff;
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  z-index: 80;
  display: grid;
  gap: 0.35rem;
  min-width: 13rem;
  border: 1px solid rgba(60, 199, 255, 0.2);
  border-radius: 18px;
  padding: 0.55rem;
  background: rgba(9, 25, 43, 0.96);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px);
}

.account-dropdown-productive {
  gap: 0.45rem;
  width: min(19rem, calc(100vw - 1.5rem));
  max-height: calc(100svh - 5.8rem);
  overflow: auto;
}

.account-dropdown a,
.account-dropdown button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  min-height: 2.35rem;
  border: 0;
  border-radius: 12px;
  padding: 0 0.72rem;
  color: #eaf6ff;
  background: transparent;
  font-weight: 900;
  text-decoration: none;
}

.account-dropdown-primary {
  border: 1px solid rgba(60, 199, 255, 0.22) !important;
  background: rgba(60, 199, 255, 0.1) !important;
}

.account-dropdown-group {
  display: grid;
  gap: 0.16rem;
  border-top: 1px solid rgba(234, 246, 255, 0.1);
  padding-top: 0.45rem;
}

.account-dropdown-group p {
  margin: 0;
  padding: 0 0.72rem 0.12rem;
  color: #9fc5dc;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.account-dropdown-flat {
  padding-top: 0.35rem;
}

.account-dropdown a:hover,
.account-dropdown button:hover {
  background: rgba(0, 150, 219, 0.18);
}

.account-dropdown .account-signout-button {
  color: #ff8f8f;
}

.account-dropdown .account-signout-button svg {
  color: #ff5f5f;
}

.account-dropdown .account-signout-button:hover {
  color: #fff;
  background: rgba(255, 75, 85, 0.18);
}

.account-dropdown svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
}

.notification-dot {
  position: absolute;
  top: 0.18rem;
  right: 0.2rem;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  border: 2px solid #081325;
  border-radius: 999px;
  padding: 0 0.18rem;
  color: #081325;
  background: #7ce2b0;
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1;
}

.notification-button.has-notifications .notification-dot {
  display: inline-flex;
}

.forum-reply-button:hover {
  border-color: rgba(60, 199, 255, 0.45);
  background: rgba(0, 150, 219, 0.22);
}

.forum-post-body {
  color: var(--ink);
  line-height: 1.5;
}

.forum-rich-text,
.forum-post-body {
  display: grid;
  gap: 0.45rem;
}

.forum-rich-text p,
.forum-post-body p {
  margin: 0;
  color: var(--ink);
}

.forum-rich-text ul,
.forum-post-body ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--ink);
}

.forum-rich-text blockquote,
.forum-post-body blockquote,
.chat-bubble blockquote {
  margin: 0;
  border-left: 3px solid rgba(60, 199, 255, 0.55);
  padding: 0.12rem 0 0.12rem 0.75rem;
  color: var(--muted);
}

.forum-rich-text pre,
.forum-post-body pre,
.chat-bubble pre {
  overflow-x: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem;
  background: rgba(4, 13, 28, 0.5);
}

.forum-rich-text code,
.forum-post-body code,
.chat-bubble code {
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 6px;
  padding: 0.08rem 0.28rem;
  background: rgba(4, 13, 28, 0.5);
  color: #d9f4ff;
  font-family: "Cascadia Code", "Consolas", monospace;
  font-size: 0.92em;
}

.forum-rich-text pre code,
.forum-post-body pre code,
.chat-bubble pre code {
  border: 0;
  padding: 0;
  background: transparent;
}

.markdown-spoiler {
  border-radius: 4px;
  padding: 0 0.2rem;
  color: transparent;
  background: rgba(234, 246, 255, 0.72);
  transition: color 140ms ease, background 140ms ease;
}

.markdown-spoiler:hover,
.markdown-spoiler:focus {
  color: var(--background);
  background: rgba(234, 246, 255, 0.88);
}

.forum-edited-note {
  display: block;
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.forum-post-media {
  display: grid;
  gap: 0.7rem;
}

.forum-post-media:empty {
  display: none;
}

.forum-youtube-embed,
.forum-gallery-stage {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.forum-youtube-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.forum-image-gallery {
  display: grid;
  gap: 0.55rem;
}

.forum-gallery-stage {
  display: grid;
  place-items: center;
  min-height: 12rem;
}

.forum-gallery-track {
  display: flex;
  width: 100%;
  transition: transform 260ms ease;
}

.forum-gallery-image-button {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}

.forum-gallery-stage img,
.forum-gallery-image-button img {
  display: block;
  width: 100%;
  max-height: 22rem;
  object-fit: contain;
}

.forum-gallery-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

.forum-gallery-controls span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3, 9, 18, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.image-viewer[hidden] {
  display: none !important;
}

.image-viewer img {
  max-width: min(92vw, 72rem);
  max-height: 84vh;
  border: 1px solid rgba(234, 246, 255, 0.18);
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.image-viewer-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.1);
}

.report-modal {
  position: fixed;
  inset: 0;
  z-index: 32;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(3, 9, 18, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.report-modal[hidden] {
  display: none !important;
}

.report-dialog {
  display: grid;
  gap: 1rem;
  width: min(34rem, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d1a30;
  padding: 1rem;
  box-shadow: var(--shadow);
}

.report-dialog-head,
.report-dialog-actions {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.report-dialog h3 {
  margin: 0;
}

.report-dialog label {
  display: grid;
  gap: 0.4rem;
  color: var(--ink);
  font-weight: 800;
}

.report-dialog select,
.report-dialog textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
  font: inherit;
}

.report-dialog select option {
  color: #081325;
  background: #eaf6ff;
}

.report-dialog-actions {
  justify-content: end;
  align-items: center;
  flex-wrap: wrap;
}

.premium-channel-modal {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(3, 9, 18, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.premium-channel-modal[hidden] {
  display: none !important;
}

.gamer-card-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.gamer-card-modal[hidden] {
  display: none !important;
}

.gamer-card {
  position: relative;
  overflow: hidden;
  width: min(30rem, 100%);
  border: 1px solid rgba(234, 246, 255, 0.16);
  border-radius: 18px;
  background: #0b1728;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.45);
}

.gamer-card-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 3;
}

.gamer-card-banner {
  position: relative;
  overflow: hidden;
  height: 8.6rem;
  background-size: cover;
  background-position: center;
}

.gamer-card-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(8, 19, 37, 0.78) 0%, rgba(8, 19, 37, 0.34) 46%, rgba(8, 19, 37, 0.82) 100%),
    linear-gradient(90deg, transparent 0%, rgba(234, 246, 255, 0.12) 42%, transparent 68%);
  pointer-events: none;
}

.gamer-card-body {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 0.95rem;
  align-items: start;
  padding: 0 1.15rem 1.15rem;
  margin-top: -4rem;
}

.gamer-card-avatar {
  justify-self: start;
  width: 8rem;
  height: 8rem;
  max-width: 8rem;
  min-width: 8rem;
  margin-top: 0;
  z-index: 2;
}

.gamer-card-avatar img {
  width: 8rem;
  height: 8rem;
  max-width: 8rem;
  min-width: 8rem;
  border-radius: 1.2rem;
}

.gamer-card-avatar .forum-avatar-frame {
  border-radius: 1.3rem;
}

.gamer-card-main {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  min-width: 0;
  padding-top: 4.1rem;
  text-align: left;
}

.planco-card-topline {
  display: flex;
  width: 100%;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-start;
}

.planco-card-topline .member-card-flags {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
  overflow: auto hidden;
  scrollbar-width: none;
}

.planco-card-topline .member-card-flags:empty {
  display: none;
}

.planco-card-badge-icon {
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid rgba(60, 199, 255, 0.32);
  border-radius: 999px;
  color: #dff7ff;
  background: rgba(0, 150, 219, 0.18);
}

.planco-card-badge-icon .lucide {
  width: 0.9rem;
  height: 0.9rem;
  stroke-width: 2.5;
}

.gamer-card-main .eyebrow,
.gamer-card-main h3,
.gamer-card-main p {
  margin: 0;
}

.gamer-card-main h3 {
  overflow: hidden;
  max-width: 100%;
  font-size: 1.45rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gamer-card-main > p:not(.eyebrow) {
  min-height: 1.25rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.42;
  text-align: left;
}

.gamer-card-main > p:not(.eyebrow) a {
  color: #bfe9ff;
  font-weight: 950;
  text-decoration: none;
}

.planco-card-details {
  display: grid;
  grid-template-columns: minmax(5rem, 0.82fr) minmax(7.2rem, 1.18fr);
  width: 100%;
  gap: 0.45rem;
  margin: 0;
}

.planco-card-details div {
  min-width: 0;
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 10px;
  padding: 0.5rem 0.58rem;
  background: rgba(234, 246, 255, 0.055);
}

.planco-card-details dt {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 950;
  text-transform: uppercase;
}

.planco-card-details dd {
  overflow: hidden;
  margin: 0.1rem 0 0;
  color: var(--ink);
  font-size: clamp(0.68rem, 2.5vw, 0.82rem);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gamer-card-main .compact-link {
  justify-self: start;
}

.premium-channel-card {
  position: relative;
  display: grid;
  gap: 1.1rem;
  width: min(680px, 100%);
  border: 1px solid rgba(245, 196, 81, 0.28);
  border-radius: 18px;
  padding: clamp(1rem, 3vw, 1.55rem);
  background: rgba(15, 23, 34, 0.96);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42);
}

.premium-channel-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.premium-channel-head {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding-inline: 1.8rem;
  text-align: center;
}

.premium-channel-head h3 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.premium-channel-head p:not(.eyebrow) {
  margin: 0;
  max-width: 34rem;
  color: var(--muted);
  line-height: 1.55;
}

.premium-channel-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.premium-channel-plans[hidden],
.premium-channel-actions[hidden] {
  display: none;
}

.premium-channel-plans article {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 12px;
  padding: 0.85rem;
  background: rgba(234, 246, 255, 0.055);
  text-align: center;
}

.premium-channel-plans .plan-badge {
  justify-self: center;
  min-height: 1.35rem;
  margin-bottom: 0.1rem;
  padding: 0.12rem 0.55rem;
  font-size: 0.62rem;
  line-height: 1;
}

.premium-channel-plans .plan-badge-empty {
  visibility: hidden;
}

.premium-channel-plans article.featured {
  border-color: rgba(245, 196, 81, 0.52);
  background: rgba(245, 196, 81, 0.12);
}

.premium-channel-plans strong {
  color: var(--ink);
  font-size: 1rem;
}

.premium-channel-plans h4 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.65rem;
  line-height: 1;
}

.premium-channel-plans h4 span {
  display: inline;
  margin-left: 0.16rem;
  color: #b7ecff;
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: none;
}

.premium-channel-plans span {
  color: #ffe8a7;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.premium-channel-plans p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.premium-channel-plans ul {
  display: grid;
  gap: 0.28rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #c4deef;
  font-size: 0.72rem;
  line-height: 1.18;
  text-align: left;
}

.premium-channel-plans li {
  position: relative;
  padding-left: 0.9rem;
}

.premium-channel-plans li::before {
  position: absolute;
  left: 0;
  content: "✓";
  color: #70d996;
  font-weight: 950;
}

.premium-channel-plans .ghost-link,
.premium-channel-plans .solid-link {
  min-height: 2.15rem;
  margin-top: 0.35rem;
  font-size: 0.82rem;
}

.premium-channel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

.creator-channel-guide {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.creator-channel-guide[hidden] {
  display: none;
}

.creator-channel-guide article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  border: 1px solid rgba(112, 217, 150, 0.18);
  border-radius: 0.9rem;
  padding: 0.85rem;
  text-align: left;
  background: rgba(112, 217, 150, 0.08);
}

.creator-channel-guide article svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #70d996;
}

.creator-channel-guide strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
}

.creator-channel-guide p {
  margin: 0.22rem 0 0;
  color: #c4deef;
  font-size: 0.82rem;
  line-height: 1.45;
}

.forum-thread-replies {
  display: grid;
  gap: 0.75rem;
}

.forum-lock-notice {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid rgba(245, 196, 81, 0.32);
  border-radius: 8px;
  background: rgba(245, 196, 81, 0.08);
  padding: 0.75rem 0.85rem;
  color: #ffe7a9;
  font-weight: 800;
}

.forum-lock-notice[hidden] {
  display: none !important;
}

.forum-lock-notice .lucide {
  width: 1rem;
  height: 1rem;
}

.forum-thread-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.forum-thread-heading h5 {
  margin: 0;
  font-size: 1rem;
}

.forum-thread-heading span {
  color: var(--muted);
  font-size: 0.82rem;
}

.forum-reply-list {
  display: grid;
  gap: 0.7rem;
}

.forum-reply-card {
  display: grid;
  grid-template-columns: 3.35rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(234, 246, 255, 0.045);
  padding: 0.75rem;
  min-width: 0;
}

.forum-reply-avatar-link {
  width: 3.35rem;
  height: 3.35rem;
}

.forum-reply-avatar {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(0, 150, 219, 0.7), rgba(0, 94, 158, 0.62));
  object-fit: contain;
  padding: 0.14rem;
}

.forum-reply-content {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.forum-reply-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.forum-reply-head span {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.forum-reply-content p {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}

.forum-reply-button.small {
  width: 2rem;
  height: 2rem;
  justify-self: start;
}

.forum-reply-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.forum-reply-actions .icon-button.small {
  width: 2rem;
  height: 2rem;
}

.forum-reply-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-top: 0.1rem;
}

.forum-reply-pagination[hidden] {
  display: none !important;
}

.forum-reply-composer,
.forum-topic-composer {
  display: grid;
  gap: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(234, 246, 255, 0.045);
  padding: 0.85rem;
}

.forum-reply-composer[hidden],
.forum-topic-composer[hidden] {
  display: none !important;
}

.forum-reply-composer label,
.forum-topic-composer label {
  color: var(--ink);
  font-weight: 800;
}

.forum-format-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.forum-format-toolbar button,
.forum-emoji-picker button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
}

.forum-format-toolbar .lucide {
  width: 1rem;
  height: 1rem;
}

.forum-emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(234, 246, 255, 0.045);
  padding: 0.55rem;
}

.forum-emoji-picker[hidden] {
  display: none !important;
}

.forum-reply-composer textarea,
.forum-topic-composer textarea,
.forum-inline-editor input,
.forum-topic-composer input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
  font: inherit;
}

.forum-reply-composer textarea,
.forum-topic-composer textarea {
  min-height: 6rem;
  resize: vertical;
}

.forum-inline-editor {
  display: grid;
  gap: 0.65rem;
}

.forum-inline-delete {
  display: grid;
  gap: 0.45rem;
  border: 1px solid rgba(255, 120, 130, 0.34);
  border-radius: 8px;
  background: rgba(255, 120, 130, 0.08);
  padding: 0.85rem;
}

.forum-inline-delete strong {
  color: #ffd4d9;
}

.forum-inline-delete p {
  margin: 0;
  color: var(--muted);
}

.forum-inline-editor textarea {
  width: 100%;
  min-height: 8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem;
  resize: vertical;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
  font: inherit;
}

.forum-inline-actions {
  display: flex;
  justify-content: end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.danger-button {
  background: #d84f5f;
}

.forum-media-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.7rem;
}

.forum-media-fields label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.forum-media-fields input[type="url"] {
  width: 100%;
  min-height: 2.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 0.85rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
}

.forum-media-fields input.field-error {
  border-color: rgba(255, 120, 130, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 120, 130, 0.12);
}

.forum-file-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: 2.6rem;
}

.forum-file-picker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.forum-file-picker > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 2.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
  font-weight: 800;
  transition: border-color 180ms ease, background 180ms ease;
}

.forum-file-picker:hover > span,
.forum-file-picker:focus-within > span {
  border-color: rgba(60, 199, 255, 0.42);
  background: rgba(0, 150, 219, 0.14);
}

.forum-file-picker .lucide {
  width: 1rem;
  height: 1rem;
}

.forum-upload-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.forum-selected-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.forum-selected-images[hidden] {
  display: none !important;
}

.forum-selected-images strong,
.forum-selected-images span {
  display: inline-flex;
  min-height: 1.8rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 0.65rem;
  color: var(--muted);
  background: rgba(234, 246, 255, 0.06);
  font-size: 0.78rem;
}

.forum-selected-images strong {
  color: var(--accent);
}

.forum-reply-composer .solid-button {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.chat-room-header,
.chat-composer {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.chat-room-header span {
  display: block;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.chat-preview {
  --superchat-dock-height: 0px;
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.85rem;
  overflow: auto;
  padding: 1rem;
}

.chat-message-flow {
  display: grid;
  align-content: start;
  gap: 0.85rem;
}

.chat-preview.has-superchat-dock .chat-message-flow {
  margin-top: calc(var(--superchat-dock-height) * -1);
  padding-top: var(--superchat-dock-height);
}

.chat-message-flow > .chat-message-row,
.chat-message-flow > .chat-sponsored-card {
  transition: opacity 140ms ease;
}

.chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  align-items: stretch;
  justify-content: stretch;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  padding-inline: 0.45rem;
}

.chat-composer-row {
  display: grid;
  grid-template-columns: 2.7rem 2.7rem minmax(0, 1fr) max-content;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}

.chat-composer-row .solid-button {
  justify-self: end;
  min-width: 5.25rem;
}

.chat-composer-feedback {
  min-height: 1.1rem;
  padding: 0 0.35rem;
  font-size: 0.82rem;
}

.chat-footer-note {
  border-top: 1px solid var(--line);
  padding: 0.62rem 0.8rem;
  color: var(--muted);
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.chat-footer-note span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.chat-footer-note .lucide {
  width: 0.9rem;
  height: 0.9rem;
  color: #70d996;
}

.chat-footer-note .automod-disabled .lucide {
  color: #ff6b7c;
}

.forum-shell {
  display: grid;
  grid-template-columns: clamp(13rem, 18vw, 18rem) minmax(0, 1fr);
  gap: 1rem;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.forum-categories,
.forum-board {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(234, 246, 255, 0.06);
}

.forum-categories {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 0.75rem;
  max-height: none;
  overflow: auto;
  height: 100%;
}

.forum-categories button {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  min-height: 2.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 0.8rem;
  text-align: left;
  color: var(--ink);
  background: transparent;
}

.forum-categories button .lucide {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--accent);
}

.forum-categories button.active {
  border-color: rgba(60, 199, 255, 0.25);
  background: var(--primary-dark);
}

.forum-board {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.forum-board > * {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.forum-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.forum-board-header h3 {
  margin: 0;
  font-size: 1.02rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-board-header .solid-button {
  flex: 0 0 auto;
}

.forum-game-toggle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(11rem, 1fr));
  gap: 0.22rem;
  min-height: 2.35rem;
  border: 1px solid rgba(60, 199, 255, 0.22);
  border-radius: 999px;
  padding: 0.22rem;
  background: rgba(8, 19, 37, 0.5);
}

.forum-game-toggle label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  cursor: pointer;
}

.forum-game-toggle label:has(input:disabled),
.forum-game-toggle label.is-locked {
  cursor: not-allowed;
  opacity: 0.52;
}

.forum-game-toggle label:has(input:disabled) span,
.forum-game-toggle label.is-locked span {
  filter: grayscale(0.45);
}

.forum-game-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.forum-game-toggle span:not(.forum-game-slider) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0 0.65rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 950;
  white-space: nowrap;
}

.forum-game-toggle label:has(input:checked) span {
  color: #fff;
}

.forum-game-slider {
  position: absolute;
  inset: 0.22rem auto 0.22rem 0.22rem;
  z-index: 1;
  width: calc(50% - 0.22rem);
  border-radius: 999px;
  background: var(--primary-dark);
  transition: transform 180ms ease;
}

.forum-game-toggle:has(input[value="Planet Zoo 2"]:checked) .forum-game-slider {
  transform: translateX(calc(100% + 0.22rem));
}

.forum-search-row {
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--line);
  grid-row: 2;
}

.forum-search-row label {
  font-weight: 750;
}

.forum-search-row input {
  width: 100%;
  min-height: 2.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 1rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
}

.community-hub-band .standalone-forum-topics {
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(4.35rem, max-content);
  align-content: start;
  gap: 0.75rem;
  padding: 0.75rem;
  overflow: hidden;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  grid-row: 3;
}

.standalone-forum-topics[hidden],
.forum-pagination[hidden] {
  display: none !important;
}

.forum-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.65rem 0.75rem 0.8rem;
  border-top: 1px solid var(--line);
  grid-row: 4;
}

.forum-page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
}

.forum-page-button {
  min-width: 2rem;
  min-height: 2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(234, 246, 255, 0.05);
  color: var(--ink);
}

.forum-page-button.active {
  border-color: rgba(60, 199, 255, 0.35);
  background: rgba(0, 94, 158, 0.72);
}

.forum-pagination .ghost-button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.chat-composer label[for="chat-message"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.chat-input-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}

.chat-mention-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.45rem);
  z-index: 12;
  display: grid;
  gap: 0.28rem;
  width: min(22rem, 100%);
  border: 1px solid rgba(60, 199, 255, 0.22);
  border-radius: 14px;
  padding: 0.35rem;
  background: rgba(15, 23, 34, 0.96);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}

.chat-mention-suggestions[hidden] {
  display: none !important;
}

.chat-mention-suggestions button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  min-height: 2.45rem;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.3rem 0.45rem;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.chat-mention-suggestions button:hover,
.chat-mention-suggestions button.active {
  border-color: rgba(60, 199, 255, 0.24);
  background: rgba(0, 150, 219, 0.16);
}

.chat-mention-avatar img {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 8px;
}

.chat-mention-avatar .forum-avatar-frame {
  border-radius: 10px;
}

.chat-composer input {
  width: 100%;
  min-width: 0;
  min-height: 2.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 1rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
}

.chat-placeholder-preview {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 50%;
  overflow: hidden;
  color: rgba(234, 246, 255, 0.54);
  pointer-events: none;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  transition: opacity 180ms ease;
  white-space: nowrap;
}

.chat-input-wrap:focus-within .chat-placeholder-preview,
.chat-input-wrap:has(input:not(:placeholder-shown)) .chat-placeholder-preview {
  opacity: 0;
}

.chat-placeholder-preview.placeholder-fading {
  opacity: 0.38;
}

.chat-image-upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: auto;
  width: 2.7rem;
  min-width: 2.7rem;
  min-height: 2.7rem;
  overflow: visible;
  clip: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.07);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 850;
}

.chat-image-upload span,
.chat-superchat-button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.chat-image-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.chat-image-upload .lucide {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--accent);
}

.chat-superchat-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 2.7rem;
  min-width: 2.7rem;
  min-height: 2.7rem;
  border: 1px solid rgba(245, 196, 81, 0.34);
  border-radius: 999px;
  padding: 0;
  color: #ffe8a7;
  background: rgba(245, 196, 81, 0.11);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 850;
}

.chat-superchat-button .lucide {
  width: 0.95rem;
  height: 0.95rem;
}

.chat-superchat-button.active {
  border-color: rgba(245, 196, 81, 0.72);
  background: rgba(245, 196, 81, 0.24);
  box-shadow: 0 0 18px rgba(245, 196, 81, 0.2);
}

.chat-superchat-button:not(:disabled):hover {
  animation: superchatButtonPulse 1.1s ease-in-out infinite;
}

.chat-image-upload.disabled,
.chat-superchat-button.disabled,
.chat-superchat-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

body:not(.is-premium) .chat-superchat-button {
  border-color: rgba(60, 199, 255, 0.34);
  color: #b7ecff;
  background: rgba(60, 199, 255, 0.1);
}

@keyframes superchatButtonPulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(245, 196, 81, 0), 0 0 0 rgba(245, 196, 81, 0);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 0 0.28rem rgba(245, 196, 81, 0.1), 0 0 18px rgba(245, 196, 81, 0.28);
    transform: translateY(-1px);
  }
}

.chat-replying,
.chat-image-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
  border: 1px solid rgba(60, 199, 255, 0.22);
  border-radius: 999px;
  padding: 0.35rem 0.42rem 0.35rem 0.85rem;
  color: #c9efff;
  background: rgba(0, 150, 219, 0.12);
  font-size: 0.82rem;
}

.chat-image-chip {
  border-color: rgba(112, 217, 150, 0.24);
  background: rgba(112, 217, 150, 0.1);
}

.chat-replying[hidden],
.chat-image-chip[hidden] {
  display: none !important;
}

.chat-message-row {
  display: grid;
  grid-template-columns: 2.65rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  width: min(42rem, 100%);
  max-width: 100%;
}

.chat-superchat-dock {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  gap: 0.65rem;
  margin: -0.2rem 0 0.35rem;
  margin-bottom: 0.35rem;
  padding: 0.1rem 0 0.35rem;
  background: transparent;
  pointer-events: none;
}

.chat-superchat-dock::after {
  content: none;
}

.chat-superchat-dock .chat-message-row {
  pointer-events: auto;
}

.chat-superchat-queue {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.7rem;
  border: 1px solid rgba(245, 196, 81, 0.22);
  border-radius: 999px;
  padding: 0 0.62rem;
  color: #ffe8a7;
  background: rgba(15, 23, 34, 0.58);
  font-size: 0.76rem;
  font-weight: 850;
}

.chat-superchat-queue .lucide {
  width: 0.78rem;
  height: 0.78rem;
}

.chat-message-own {
  justify-self: end;
  grid-template-columns: minmax(0, 1fr) 2.65rem;
}

.chat-message-own .chat-avatar-wrap {
  grid-column: 2;
  grid-row: 1;
}

.chat-message-own .chat-message-stack {
  grid-column: 1;
  grid-row: 1;
  align-items: end;
  justify-self: end;
}

.chat-message-stack {
  position: relative;
  display: grid;
  gap: 0.22rem;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
}

.chat-message-row > .chat-avatar-wrap {
  margin-top: 0;
}

.chat-message-badged > .chat-avatar-wrap {
  margin-top: 0;
}

.chat-message-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.chat-message-own .chat-message-meta {
  justify-content: flex-end;
}

.chat-message-meta em {
  color: rgba(234, 246, 255, 0.66);
  font-style: normal;
}

.chat-author-link {
  font-size: 0.78rem;
}

.chat-avatar-wrap img {
  width: 2.55rem;
  height: 2.55rem;
  max-width: 2.55rem;
  min-width: 2.55rem;
  border-radius: 11px;
  object-fit: cover;
  background: linear-gradient(145deg, rgba(0, 150, 219, 0.82), rgba(0, 94, 158, 0.7));
}

.chat-member-avatar img {
  width: 2.45rem;
  height: 2.45rem;
  max-width: 2.45rem;
  min-width: 2.45rem;
  border-radius: 10px;
}

.chat-avatar-wrap,
.chat-member-avatar,
.chat-mention-avatar {
  width: 2.55rem;
  height: 2.55rem;
  max-width: 2.55rem;
  min-width: 2.55rem;
}

.chat-member-avatar {
  width: 2.9rem;
  height: 2.9rem;
  max-width: 2.9rem;
  min-width: 2.9rem;
}

.chat-avatar-wrap .forum-avatar-frame {
  border-radius: 13px;
}

.chat-member-avatar .forum-avatar-frame {
  border-radius: 14px;
}

.chat-bubble {
  position: relative;
  overflow: visible;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(234, 246, 255, 0.08);
  border-radius: 20px 20px 20px 7px;
  padding: 0.68rem 0.85rem;
  background: rgba(234, 246, 255, 0.12);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

.chat-message-own .chat-bubble {
  margin-left: auto;
  border-color: rgba(60, 199, 255, 0.28);
  border-radius: 20px 20px 7px 20px;
  background: linear-gradient(135deg, rgba(0, 150, 219, 0.86), rgba(0, 94, 158, 0.82));
}

.chat-message-superchat .chat-bubble {
  --superchat-border: rgba(245, 196, 81, 0.56);
  --superchat-glow-a: rgba(245, 196, 81, 0.22);
  --superchat-glow-b: rgba(0, 150, 219, 0.18);
  border-color: rgba(245, 196, 81, 0.56);
  background:
    linear-gradient(135deg, var(--superchat-glow-a), var(--superchat-glow-b)),
    rgba(234, 246, 255, 0.13);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--superchat-border), transparent 40%),
    0 0 22px color-mix(in srgb, var(--superchat-border), transparent 38%);
  animation: superchatPulse 1.7s ease-in-out infinite;
}

.superchat-style-1 .chat-bubble {
  --superchat-border: rgba(245, 196, 81, 0.62);
  --superchat-glow-a: rgba(245, 196, 81, 0.24);
  --superchat-glow-b: rgba(0, 150, 219, 0.18);
}

.superchat-style-2 .chat-bubble {
  --superchat-border: rgba(124, 226, 176, 0.62);
  --superchat-glow-a: rgba(112, 217, 150, 0.24);
  --superchat-glow-b: rgba(60, 199, 255, 0.18);
}

.superchat-style-3 .chat-bubble {
  --superchat-border: rgba(255, 122, 162, 0.62);
  --superchat-glow-a: rgba(255, 122, 162, 0.24);
  --superchat-glow-b: rgba(245, 196, 81, 0.16);
}

.chat-message-superchat .chat-bubble::before,
.chat-message-superchat .chat-bubble::after {
  content: "";
  position: absolute;
  inset: -1.35rem;
  z-index: -1;
  pointer-events: none;
  opacity: 0.52;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.95) 0 0.045rem, transparent 0.075rem),
    radial-gradient(circle at 34% 12%, rgba(245, 196, 81, 0.9) 0 0.04rem, transparent 0.075rem),
    radial-gradient(circle at 58% 22%, rgba(60, 199, 255, 0.9) 0 0.04rem, transparent 0.075rem),
    radial-gradient(circle at 76% 18%, rgba(255, 122, 162, 0.86) 0 0.035rem, transparent 0.07rem),
    radial-gradient(circle at 24% 48%, rgba(124, 226, 176, 0.86) 0 0.035rem, transparent 0.07rem),
    radial-gradient(circle at 48% 55%, rgba(255, 255, 255, 0.82) 0 0.035rem, transparent 0.07rem),
    radial-gradient(circle at 72% 52%, rgba(245, 196, 81, 0.76) 0 0.04rem, transparent 0.075rem),
    radial-gradient(circle at 17% 82%, rgba(60, 199, 255, 0.78) 0 0.035rem, transparent 0.07rem),
    radial-gradient(circle at 43% 86%, rgba(255, 122, 162, 0.72) 0 0.035rem, transparent 0.07rem),
    radial-gradient(circle at 84% 78%, rgba(255, 255, 255, 0.82) 0 0.04rem, transparent 0.075rem);
  transform: scale(0.92);
  transition: opacity 220ms ease, transform 320ms ease;
  animation: superchatGlitterEmit 2.4s linear infinite;
}

.chat-message-superchat .chat-bubble::after {
  inset: -1.9rem;
  opacity: 0.32;
  filter: blur(0.5px);
  transform: rotate(18deg) scale(0.86);
  animation-duration: 3.2s;
  animation-direction: reverse;
}

.chat-message-superchat .chat-bubble > * {
  position: relative;
  z-index: 1;
}

.chat-message-superchat .chat-bubble:hover::before {
  opacity: 0.74;
  transform: scale(1);
}

.chat-message-superchat .chat-bubble:hover::after {
  opacity: 0.44;
  transform: rotate(18deg) scale(0.94);
}

.chat-message-superchat.chat-message-own .chat-bubble {
  background:
    linear-gradient(135deg, var(--superchat-glow-a), rgba(0, 150, 219, 0.82)),
    rgba(0, 94, 158, 0.82);
}

.chat-superchat-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  color: #ffe8a7;
  font-size: 0.72rem;
}

.chat-superchat-timer .lucide {
  width: 0.78rem;
  height: 0.78rem;
}

@keyframes superchatPulse {
  0%,
  100% {
    border-color: var(--superchat-border);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--superchat-border), transparent 42%),
      0 0 18px color-mix(in srgb, var(--superchat-border), transparent 46%);
    filter: brightness(1);
  }
  50% {
    border-color: color-mix(in srgb, var(--superchat-border), #fff 22%);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--superchat-border), transparent 16%),
      0 0 30px color-mix(in srgb, var(--superchat-border), transparent 20%),
      0 0 46px color-mix(in srgb, var(--superchat-border), transparent 48%);
    filter: brightness(1.06);
  }
}

@keyframes superchatGlitterEmit {
  0%,
  100% {
    opacity: 0.4;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  45% {
    opacity: 0.76;
  }
  to {
    background-position: 0.35rem -0.42rem, -0.32rem 0.38rem, 0.4rem 0.46rem, -0.36rem -0.28rem, 0.28rem 0.44rem, -0.28rem 0.3rem, 0.32rem -0.26rem, -0.22rem -0.36rem, 0.34rem 0.28rem, -0.3rem 0.34rem;
  }
}

.chat-bubble p {
  margin: 0;
  color: #edfaff;
  line-height: 1.48;
  white-space: pre-line;
}

.chat-tag {
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 999px;
  padding: 0 0.28rem;
  color: #99e5ff;
  background: rgba(60, 199, 255, 0.12);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.chat-tag:hover {
  color: #dff8ff;
  background: rgba(60, 199, 255, 0.2);
}

.chat-mention {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 0.26rem;
  color: #dff8ff;
  background: rgba(0, 150, 219, 0.2);
  font-weight: 900;
  text-decoration: none;
}

.chat-mention:hover {
  background: rgba(0, 150, 219, 0.32);
}

.chat-inline-link {
  color: #9edfff;
  font-weight: 850;
  text-decoration: none;
}

.chat-inline-link:hover {
  color: #dff8ff;
  text-decoration: underline;
}

.chat-reply-quote {
  display: grid;
  gap: 0.12rem;
  margin-bottom: 0.45rem;
  border-left: 3px solid var(--accent);
  padding-left: 0.55rem;
  color: rgba(234, 246, 255, 0.78);
  font-size: 0.78rem;
}

.chat-reply-quote span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message-actions {
  display: inline-flex;
  gap: 0.28rem;
  align-items: center;
  margin-top: 0.08rem;
  justify-self: end;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.chat-message-underbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-top: -0.04rem;
}

.chat-message-own .chat-message-underbar {
  justify-self: end;
  grid-template-columns: auto minmax(0, 1fr);
}

.chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  align-items: center;
  margin-top: -0.06rem;
}

.chat-message-own .chat-reactions {
  grid-column: 2;
  justify-content: flex-end;
}

.chat-message-own .chat-message-actions {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.chat-reaction,
.chat-reaction-add,
.chat-emoji-palette button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  min-height: 1.65rem;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 999px;
  padding: 0 0.48rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.07);
  font-size: 0.78rem;
}

.chat-reaction.active {
  border-color: rgba(60, 199, 255, 0.38);
  background: rgba(0, 150, 219, 0.22);
}

.chat-reaction-add {
  width: 1.75rem;
  padding: 0;
}

.chat-reaction-add .lucide {
  width: 0.86rem;
  height: 0.86rem;
  color: var(--accent);
}

.chat-emoji-palette {
  position: absolute;
  top: calc(100% + 0.28rem);
  left: 0;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  width: min(18rem, 100%);
  border: 1px solid rgba(60, 199, 255, 0.18);
  border-radius: 14px;
  padding: 0.45rem;
  background: rgba(15, 23, 34, 0.94);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}

.chat-message-own .chat-emoji-palette {
  left: auto;
  right: 0;
}

.chat-message-row:hover .chat-message-actions,
.chat-message-row:focus-within .chat-message-actions {
  opacity: 1;
  transform: translateY(0);
}

.chat-message-image-button {
  display: block;
  overflow: hidden;
  margin-top: 0.55rem;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 14px;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}

.chat-message-image-button img {
  display: block;
  width: min(18rem, 100%);
  max-height: 14rem;
  object-fit: cover;
}

.chat-media-pending {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin-top: 0.5rem;
  border: 1px solid rgba(245, 196, 81, 0.3);
  border-radius: 8px;
  padding: 0.35rem 0.48rem;
  color: #ffe5aa;
  background: rgba(245, 196, 81, 0.09);
  font-size: 0.74rem;
  font-weight: 800;
}

.chat-media-pending svg {
  width: 0.9rem;
  height: 0.9rem;
}

.chat-inline-edit,
.chat-inline-delete {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  max-width: 100%;
}

.chat-inline-edit {
  display: grid;
  width: 100%;
  max-width: 100%;
}

.chat-inline-edit textarea {
  width: 100%;
  min-width: 0;
  min-height: 7rem;
  border: 1px solid rgba(234, 246, 255, 0.22);
  border-radius: 14px;
  padding: 0.7rem 0.8rem;
  color: var(--ink);
  background: rgba(15, 23, 34, 0.62);
  resize: vertical;
}

.chat-inline-edit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.chat-sponsored-card {
  justify-self: center;
  width: min(32rem, 100%);
  border: 1px solid rgba(255, 138, 42, 0.28);
  border-radius: 18px;
  padding: 0.85rem 1rem;
  background:
    linear-gradient(135deg, rgba(255, 138, 42, 0.13), rgba(234, 246, 255, 0.06)),
    rgba(234, 246, 255, 0.08);
}

.chat-sponsored-card p {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.message {
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: rgba(234, 246, 255, 0.08);
}

.message.mod {
  border-left-color: var(--accent);
}

.message.sponsored-message {
  border-left-color: #ff8a2a;
  background:
    linear-gradient(135deg, rgba(255, 138, 42, 0.12), rgba(234, 246, 255, 0.06)),
    rgba(234, 246, 255, 0.08);
}

.message.sponsored-message .ad-label {
  margin-bottom: 0.45rem;
}

.message p {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.member-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.65rem;
  padding: 1rem;
  min-height: 0;
}

.member-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.member-list {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  overflow: auto;
  min-height: 0;
}

.member-list > span {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.member-card {
  position: relative;
  z-index: 0;
  isolation: isolate;
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(234, 246, 255, 0.075), rgba(234, 246, 255, 0.035));
  box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.16);
}

.chat-sidebar-member-card {
  background: linear-gradient(135deg, rgba(234, 246, 255, 0.075), rgba(234, 246, 255, 0.035)) !important;
  background-image: linear-gradient(135deg, rgba(234, 246, 255, 0.075), rgba(234, 246, 255, 0.035)) !important;
}

.chat-sidebar-member-card .member-banner {
  display: none !important;
}

.member-card-body {
  position: relative;
  z-index: 2;
}

.chat-banner-automod {
  border-color: rgba(60, 199, 255, 0.38);
  background: linear-gradient(90deg, rgba(19, 141, 255, 0.34), rgba(255, 49, 88, 0.34));
}

.chat-banner-premium {
  border-color: rgba(245, 196, 81, 0.42);
  background: rgba(245, 196, 81, 0.2);
}

.chat-banner-creator {
  border-color: rgba(112, 217, 150, 0.42);
  background: rgba(112, 217, 150, 0.2);
}

.chat-banner-default {
  border-color: rgba(60, 199, 255, 0.3);
  background: rgba(60, 199, 255, 0.15);
}

.profile-image-banner,
.banner-preset {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.member-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  justify-items: start;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0;
  min-height: 3.1rem;
  padding: 0.38rem 0.5rem;
  text-align: left;
}

.member-card-identity {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-items: start;
  align-items: flex-start;
  gap: 0.22rem;
  flex: 1 1 auto;
  min-width: 0;
}

.member-card-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-start;
  width: 100%;
  margin-top: 0;
}

.member-card .user-flag {
  min-height: 1rem;
  min-width: auto;
  padding: 0 0.42rem;
  font-size: 0.62rem;
}

.member-card .user-flag .lucide {
  width: 0.65rem;
  height: 0.65rem;
}

.member-card .chat-author-flag {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 1 auto;
  width: 100%;
  min-height: 1.1rem;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

.member-card .chat-author-name {
  position: relative;
  z-index: 5;
  display: inline-flex;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: clamp(0.82rem, 9cqw, 0.95rem);
  line-height: 1.1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.member-card .chat-author-name.name-style-accent {
  color: #8fe5ff;
}

.member-card .chat-author-name.name-style-yellow {
  color: #f5c451;
}

.member-card .chat-author-name.name-style-green {
  color: #7ce2b0;
}

.member-card .chat-author-name.name-style-red {
  color: #ff6b6b;
}

.member-card .chat-author-name.name-style-gradient-sky,
.member-card .chat-author-name.name-style-sky,
.member-card .chat-author-name.name-style-gradient-sunset,
.member-card .chat-author-name.name-style-sunset,
.member-card .chat-author-name.name-style-gradient-jungle,
.member-card .chat-author-name.name-style-jungle,
.member-card .chat-author-name.name-style-animated-rainbow,
.member-card .chat-author-name.name-style-pride,
.member-card .chat-author-name.name-style-animated-pulse,
.member-card .chat-author-name.name-style-pulse,
.member-card .chat-author-name.name-style-custom,
.member-card .chat-author-name.name-style-animated-glitch,
.member-card .chat-author-name.name-style-glitch {
  color: #fff;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.member-card .chat-author-name.name-style-gradient-sky {
  background-image: linear-gradient(90deg, #6fd3ff, #ffffff, #00a2e8);
}

.member-card .chat-author-name.name-style-sky {
  background-image: linear-gradient(90deg, #50c8ff, #eaf6ff, #0096db);
  background-size: 220% 100%;
  animation: usernameGradientDrift 4.4s ease-in-out infinite;
}

.member-card .chat-author-name.name-style-gradient-sunset {
  background-image: linear-gradient(90deg, #ffbf47, #ff7aa2, #6fd3ff);
}

.member-card .chat-author-name.name-style-sunset {
  background-image: linear-gradient(90deg, #ffb347, #ff6f91, #9b5cff);
  background-size: 220% 100%;
  animation: usernameGradientDrift 4.8s ease-in-out infinite;
}

.member-card .chat-author-name.name-style-gradient-jungle {
  background-image: linear-gradient(90deg, #7ce2b0, #d8b97a, #4db6ac);
}

.member-card .chat-author-name.name-style-jungle {
  background-image: linear-gradient(90deg, #63d471, #f5d76e, #168f5f);
  background-size: 220% 100%;
  animation: usernameGradientDrift 5.2s ease-in-out infinite;
}

.member-card .chat-author-name.name-style-animated-rainbow,
.member-card .chat-author-name.name-style-pride {
  background-image: linear-gradient(90deg, #e40303 0%, #ff8c00 15%, #ffed00 30%, #008026 45%, #24408e 62%, #732982 80%, #e40303 100%);
  background-size: 24rem 100%;
  animation: avatarFrameRainbowFlow 5.2s linear infinite;
}

.member-card .chat-author-name.name-style-animated-pulse,
.member-card .chat-author-name.name-style-pulse {
  background-image: linear-gradient(90deg, #6fd3ff, #ffffff, #f5c451);
  animation: usernamePulse 1.9s ease-in-out infinite;
}

.member-card .chat-author-name.name-style-custom {
  background-image: linear-gradient(90deg, var(--username-custom-a, #3cc7ff), var(--username-custom-b, #f5c451));
}

.member-card .chat-author-name.name-style-animated-glitch,
.member-card .chat-author-name.name-style-glitch {
  background-image: linear-gradient(90deg, #ff4d8d, #6fd3ff, #f5c451);
  animation: usernameGlitch 1.4s steps(2, end) infinite;
}

.chat-author-link[data-static-author] {
  color: var(--accent);
  font-family: inherit !important;
  background: transparent !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.site-footer {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 0 var(--site-gutter) 2rem;
  font-size: 0.9rem;
}

.footer-rich {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 2.2rem 0 0;
  padding: 1.4rem var(--site-gutter) 2rem;
  border-top: 1px solid var(--line);
  background: transparent;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.footer-rich::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: rgba(46, 76, 112, 0.36);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(16rem, 1.2fr) minmax(0, 2fr);
  gap: 2rem;
  align-items: start;
}

.footer-brand {
  display: grid;
  gap: 0.75rem;
}

.footer-brand .brand-logo {
  width: clamp(8rem, 16vw, 11rem);
}

.footer-brand p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
}

.footer-links h3 {
  margin: 0 0 0.65rem;
  font-size: 0.98rem;
}

.footer-link-group {
  display: block;
}

.footer-link-group summary {
  display: block;
  margin: 0 0 0.65rem;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 900;
  list-style: none;
}

.footer-link-group summary::-webkit-details-marker {
  display: none;
}

.footer-links a {
  display: block;
  margin: 0 0 0.48rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 180ms ease;
}

.footer-links a:hover {
  color: #9edfff;
}

.footer-bottom {
  position: relative;
  margin-top: 1.4rem;
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.footer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  height: 1px;
  background: var(--line);
}

.footer-bottom p {
  margin: 0;
  color: var(--muted);
}

.filter-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.filter-controls label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.filter-controls select,
.filter-controls input {
  width: 100%;
  min-height: 3.3rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(234, 246, 255, 0.08);
  color: var(--ink);
  padding: 0.62rem 0.8rem;
}

.filter-controls select option,
.submission-form select option {
  color: #081325;
  background: #eaf6ff;
}

.filter-controls .asset-filter-row {
  align-self: end;
}

.filter-controls .asset-filter-row label {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  color: #c4deef;
  font-size: 0.78rem;
}

.filter-controls .asset-filter-row input {
  width: 0.95rem;
  height: 0.95rem;
  min-height: 0;
  padding: 0;
  border: 2px solid rgba(60, 199, 255, 0.7);
  border-radius: 50%;
  background: rgba(15, 23, 34, 0.82);
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 0.55rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(60, 199, 255, 0.32);
  background: rgba(60, 199, 255, 0.1);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  min-height: 2.15rem;
  padding: 0 0.9rem;
}

.compact-link {
  min-height: 2.15rem;
  padding: 0.42rem 0.84rem;
  font-size: 0.82rem;
}

.submission-form {
  display: grid;
  gap: 0.78rem;
  width: min(760px, 100%);
  margin-inline: auto;
}

.submission-form label {
  display: grid;
  gap: 0.38rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.submission-form input,
.submission-form textarea,
.submission-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(234, 246, 255, 0.08);
  color: var(--ink);
  padding: 0.68rem 0.85rem;
}

.submission-form input[readonly] {
  color: #c6e8f8;
  background: rgba(60, 199, 255, 0.08);
  cursor: not-allowed;
}

.submission-form textarea {
  resize: vertical;
}

.submission-helper {
  margin: -0.3rem 0 0.2rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.optional-label {
  color: #9edfff;
  font-size: 0.78rem;
  font-weight: 900;
}

.sleek-file-input {
  cursor: pointer;
}

.sleek-file-input::file-selector-button {
  margin-right: 0.8rem;
  border: 1px solid rgba(60, 199, 255, 0.3);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  color: #fff;
  background: var(--primary);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.submission-media-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tag-entry-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  min-height: 3rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.4rem;
  background: rgba(234, 246, 255, 0.08);
}

.tag-entry-box input {
  flex: 1 1 12rem;
  min-width: 8rem;
  border: 0;
  padding: 0.35rem 0.45rem;
  background: transparent;
}

.tag-entry-box input:focus {
  outline: none;
}

.tag-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tag-entry-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-height: 2rem;
  border: 1px solid rgba(60, 199, 255, 0.28);
  border-radius: 999px;
  padding: 0 0.55rem;
  color: #dff6ff;
  background: rgba(0, 150, 219, 0.16);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.tag-entry-chip svg {
  width: 0.8rem;
  height: 0.8rem;
}

.submission-media-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  min-height: 2rem;
  border: 1px solid rgba(60, 199, 255, 0.24);
  border-radius: 999px;
  padding: 0 0.65rem;
  color: #ccefff;
  background: rgba(0, 150, 219, 0.12);
  font-size: 0.78rem;
  font-weight: 850;
}

.submission-media-pill svg {
  width: 0.9rem;
  height: 0.9rem;
}

.submission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.submission-queue-result {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  border: 1px solid rgba(112, 217, 150, 0.24);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(112, 217, 150, 0.08);
}

.submission-queue-result[hidden] {
  display: none;
}

.submission-queue-result div {
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 14px;
  padding: 0.8rem;
  background: rgba(8, 19, 37, 0.34);
}

.submission-queue-result span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.submission-queue-result strong {
  display: block;
  margin-top: 0.2rem;
  color: #fff;
  font-size: 1.25rem;
}

.submission-queue-result p {
  grid-column: 1 / -1;
  margin: 0;
  color: #bfe9ff;
  line-height: 1.45;
}

.submission-sent-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(4, 12, 24, 0.72);
  backdrop-filter: blur(10px);
}

.submission-sent-modal[hidden] {
  display: none !important;
}

.submission-sent-dialog {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  width: min(24rem, 100%);
  border: 1px solid rgba(60, 199, 255, 0.28);
  border-radius: 8px;
  padding: 1.35rem;
  text-align: center;
  background: rgba(8, 19, 37, 0.96);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

.submission-sent-icon {
  display: inline-grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid rgba(60, 199, 255, 0.36);
  border-radius: 999px;
  color: var(--accent);
  background: rgba(60, 199, 255, 0.12);
}

.submission-sent-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2.5;
}

.submission-sent-dialog h2,
.submission-sent-dialog p,
.submission-sent-dialog small {
  margin: 0;
}

.submission-sent-dialog h2 {
  font-size: 1.35rem;
}

.submission-sent-dialog p {
  color: #dff7ff;
  line-height: 1.5;
}

.submission-progress-track {
  width: 100%;
  height: 0.58rem;
  overflow: hidden;
  border: 1px solid rgba(60, 199, 255, 0.24);
  border-radius: 999px;
  background: rgba(234, 246, 255, 0.08);
}

.submission-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #7ce2b0);
  transition: width 320ms ease;
}

.submission-progress-track.is-complete {
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity 420ms ease, transform 420ms ease;
}

.submission-sent-dialog small {
  color: var(--muted);
  font-weight: 800;
}

.form-feedback {
  margin: 0.25rem 0 0;
  font-weight: 700;
  color: var(--muted);
}

.form-feedback.success {
  color: #7ce2b0;
}

.form-feedback.error {
  color: #ff9ca8;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr);
  gap: 1rem;
  align-items: start;
}

.detail-hero,
.profile-hero {
  justify-items: center;
  text-align: center;
}

.detail-hero {
  gap: 0.65rem;
}

.detail-hero > .icon-badge {
  margin-bottom: 0.1rem;
}

.submit-hero {
  gap: 0.65rem;
  justify-items: center;
  text-align: center;
}

.submit-hero > .icon-badge {
  margin-bottom: 0.1rem;
}

.submit-hero h1 {
  width: min(48rem, 100%);
  max-width: 48rem;
  min-height: 1lh;
  white-space: nowrap;
}

.submit-hero-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(18rem, 1fr));
  gap: 0.8rem;
  width: min(48rem, 100%);
  margin-top: 0.9rem;
}

.submit-toggle-wrap {
  text-align: left;
}

.submit-mode-toggle .lucide {
  width: 1.05rem;
  height: 1.05rem;
  stroke-width: 2.4;
}

.submit-mode-toggle:has(input[value="asset"]:checked) .game-toggle-slider {
  transform: translateX(calc(100% + 0.25rem));
}

.submission-game-field {
  display: none !important;
}

.submit-zoo-locked {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  width: min(760px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.submit-zoo-locked h2,
.submit-zoo-locked p {
  margin: 0;
}

.submit-zoo-locked p:not(.eyebrow) {
  color: var(--muted);
}

.submit-checklist-gate {
  display: grid;
  gap: 1rem;
}

.submit-checklist-gate[hidden] {
  display: none !important;
}

.submit-checklist-gate .simple-heading {
  margin-bottom: 0;
}

.submit-checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.submit-checklist-grid article {
  display: grid;
  gap: 0.45rem;
  min-height: 10.2rem;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 8px;
  padding: 1rem;
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.08), rgba(234, 246, 255, 0.035)),
    rgba(234, 246, 255, 0.06);
}

.submit-checklist-grid .lucide {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--accent);
  stroke-width: 2.3;
}

.submit-checklist-grid h3,
.submit-checklist-grid p {
  margin: 0;
}

.submit-checklist-grid h3 {
  color: #fff;
  font-size: 1rem;
}

.submit-checklist-grid p {
  color: var(--muted);
  line-height: 1.45;
}

.submit-checklist-actions {
  justify-content: end;
  margin-top: 0.1rem;
}

.submit-checklist-continue {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 8.5rem;
}

.submit-checklist-continue::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, rgba(255, 225, 122, 0.32), rgba(60, 199, 255, 0.38));
}

.submit-checklist-continue.is-arming::before {
  transform: scaleX(1);
  transition: transform 2s linear;
}

.submit-checklist-continue span {
  position: relative;
  z-index: 1;
}

.submit-checklist-continue:disabled {
  cursor: wait;
  opacity: 0.88;
}

@media (max-width: 980px) {
  .submit-checklist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.submit-asset-guidance {
  display: grid;
  grid-template-columns: minmax(18rem, 0.82fr) minmax(24rem, 1.18fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: 1rem;
}

.detail-hero h1,
.profile-hero h1 {
  max-width: 46rem;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.submit-hero h1 {
  max-width: 46rem;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.detail-hero p:not(.eyebrow),
.profile-hero p:not(.eyebrow) {
  max-width: 44rem;
}

.detail-hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.8rem;
}

.detail-hero-pills span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  border: 1px solid rgba(60, 199, 255, 0.24);
  border-radius: 999px;
  padding: 0 0.7rem;
  color: #d9f4ff;
  background: rgba(234, 246, 255, 0.07);
  font-size: 0.76rem;
  font-weight: 950;
}

.detail-hero-pills svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--accent);
}

.submit-hero p:not(.eyebrow) {
  max-width: 38rem;
}

@media (max-width: 680px) {
  .submit-hero h1 {
    white-space: nowrap;
  }

  .submit-checklist-grid {
    grid-template-columns: 1fr;
  }

  .submit-checklist-actions {
    justify-content: stretch;
  }

  .submit-checklist-actions .solid-button {
    width: 100%;
  }
}

.page-header,
.detail-hero,
.profile-hero,
.submit-hero,
.staff-hero,
.premium-centered.page-header,
.creators-centered.page-header,
.fairplay-hero,
.assets-hero {
  justify-items: center;
  text-align: center;
  gap: 0.8rem;
  padding-top: clamp(2rem, 6vw, 4.5rem);
}

.page-header .page-kicker {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  margin-bottom: 0;
}

.page-header > .icon-badge {
  margin-bottom: 0;
}

.page-header > .eyebrow,
.page-header .page-kicker .eyebrow {
  display: none;
}

.page-header h1,
.detail-hero h1,
.profile-hero h1,
.submit-hero h1,
.staff-hero h1,
.premium-centered.page-header h1,
.creators-centered.page-header h1,
.legal-page-header h1 {
  width: max-content;
  max-width: calc(100vw - (2 * var(--site-gutter)));
  margin-bottom: 0;
  overflow: hidden;
  font-size: clamp(1.45rem, 6.8vw, 4.5rem);
  text-overflow: clip;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.page-header p:not(.eyebrow),
.detail-hero p:not(.eyebrow),
.profile-hero p:not(.eyebrow),
.submit-hero p:not(.eyebrow),
.staff-hero p:not(.eyebrow),
.assets-hero p:not(.eyebrow),
.fairplay-hero p:not(.eyebrow) {
  max-width: 48rem;
  margin: 0;
  color: #c4deef;
  font-size: 1.1rem;
  line-height: 1.6;
}

.submit-hero h1 {
  width: max-content;
  max-width: calc(100vw - (2 * var(--site-gutter)));
}

.creation-detail-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(21rem, 0.75fr);
  gap: clamp(1rem, 3vw, 1.6rem);
  align-items: start;
}

.creation-detail-shell > .detail-how-to {
  grid-column: 1 / -1;
}

.detail-primary {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(234, 246, 255, 0.06);
}

.detail-main-column {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0.92rem;
  min-width: 0;
}

.detail-member-flag {
  top: 0.9rem;
  right: 0.9rem;
}

.detail-gallery {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: clamp(22rem, 52vw, 38rem);
}

.detail-gallery-stage {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.detail-gallery-stage::before,
.detail-gallery-stage::after {
  display: none;
}

.detail-gallery::after {
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(8, 19, 37, 0.72));
  pointer-events: none;
}

.detail-gallery-arrow {
  z-index: 4;
}

.detail-media-strip {
  display: grid;
  gap: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.85rem;
  background: rgba(234, 246, 255, 0.04);
}

.detail-strip-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
}

.detail-strip-head h3 {
  margin: 0;
  line-height: 1.85rem;
  font-size: 0.95rem;
}

.detail-strip-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.detail-strip-controls .media-arrow {
  position: static;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  transform: none;
}

.detail-strip-controls .media-arrow:hover {
  transform: scale(1.06);
}

.detail-thumbs {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  overflow-x: auto;
  padding: 0 0 0.2rem;
  background: transparent;
  scrollbar-width: none;
}

.detail-thumbs::-webkit-scrollbar {
  display: none;
}

.detail-thumb-slider {
  scroll-snap-type: x mandatory;
}

.detail-thumb-slider .detail-thumb {
  flex: 0 0 clamp(9.5rem, 24vw, 12rem);
}

.detail-thumb {
  position: relative;
  overflow: hidden;
  min-height: 5rem;
  min-width: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(234, 246, 255, 0.16);
  border-radius: 12px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  scroll-snap-align: center;
}

.detail-thumb span {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.detail-thumb.active {
  border-color: rgba(60, 199, 255, 0.86);
  box-shadow: 0 0 0 2px rgba(60, 199, 255, 0.16);
}

.detail-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1rem;
  align-self: stretch;
  min-width: 0;
}

.detail-summary-card {
  display: grid;
  gap: 0.95rem;
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 18px;
  padding: clamp(1rem, 3vw, 1.25rem);
  background: rgba(13, 32, 55, 0.78);
  box-shadow: var(--shadow);
}

.detail-summary-card h2 {
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1.05;
}

.detail-card-topline {
  margin-bottom: 0;
}

.detail-type-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 950;
  text-transform: uppercase;
}

.detail-creator-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  border: 1px solid rgba(60, 199, 255, 0.18);
  border-radius: 16px;
  padding: 0.65rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.06);
  text-decoration: none;
}

.detail-creator-link small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
}

.detail-creator-link strong {
  display: block;
  color: #fff;
  font-size: 1rem;
}

.detail-avatar-frame {
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border: 1px solid rgba(60, 199, 255, 0.35);
  border-radius: 12px;
  background: rgba(60, 199, 255, 0.12);
}

.detail-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.detail-info-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border: 1px solid rgba(60, 199, 255, 0.2);
  border-radius: 999px;
  padding: 0 0.68rem;
  color: #d9f4ff;
  background: rgba(60, 199, 255, 0.1);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: capitalize;
}

.detail-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.detail-action-button {
  min-width: 0;
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding-inline: 0.72rem;
  font-size: 0.82rem;
  font-weight: 950;
}

.detail-action-button svg {
  width: 0.95rem;
  height: 0.95rem;
}

.detail-code-row {
  margin-top: 0.15rem;
}

.detail-copy {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
}

.detail-copy h1 {
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}

.detail-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.detail-meta {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(234, 246, 255, 0.06);
  padding: 1rem;
}

.detail-creator-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 0.85rem;
}

.detail-creator-card > *:not(.detail-creator-banner) {
  position: relative;
  z-index: 1;
}

.detail-creator-banner {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 58%;
  height: min(56%, 7.5rem);
  pointer-events: none;
  opacity: 0.62;
  border: 0;
  border-radius: inherit;
  -webkit-mask-image: linear-gradient(225deg, #000 0%, rgba(0, 0, 0, 0.72) 28%, rgba(0, 0, 0, 0.24) 54%, transparent 74%);
  mask-image: linear-gradient(225deg, #000 0%, rgba(0, 0, 0, 0.72) 28%, rgba(0, 0, 0, 0.24) 54%, transparent 74%);
}

.detail-creator-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.72rem;
  align-items: center;
}

.detail-creator-card-head .eyebrow,
.detail-creator-card-head h3 {
  margin: 0;
}

.detail-creator-card-head h3 {
  color: #fff;
  font-size: 1.1rem;
}

.detail-creator-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.detail-creator-stats span {
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 12px;
  background: rgba(8, 19, 37, 0.28);
}

.detail-creator-stats span {
  display: grid;
  gap: 0.2rem;
  padding: 0.62rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.detail-creator-stats strong {
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}

.detail-creator-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.detail-creator-actions .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.detail-how-to {
  display: grid;
  gap: 0.9rem;
  padding: 1rem clamp(1rem, 2.5vw, 1.25rem);
}

.detail-step-line {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: detail-step;
}

.detail-step-line li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  min-height: 3rem;
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 14px;
  padding: 0.7rem 0.78rem;
  background: rgba(8, 19, 37, 0.28);
}

.detail-step-line li:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -0.63rem;
  width: 0.55rem;
  height: 1px;
  content: "";
  background: rgba(60, 199, 255, 0.42);
}

.detail-step-line span {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  color: #fff;
  background: var(--primary);
  font-size: 0.78rem;
  font-weight: 950;
}

.detail-step-line strong {
  color: #fff;
  font-size: 0.88rem;
  line-height: 1.2;
}

.detail-related-band {
  margin-top: clamp(4rem, 9vw, 7rem);
}

.detail-related-grid {
  margin-top: 1.2rem;
}

.asset-detail-shell {
  align-items: stretch;
}

.asset-detail-primary {
  min-height: clamp(22rem, 52vw, 38rem);
}

.asset-detail-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(22rem, 52vw, 38rem);
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(60, 199, 255, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(0, 150, 219, 0.2), rgba(8, 19, 37, 0.82)),
    #081325;
}

.asset-detail-media img,
.asset-detail-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asset-detail-media video {
  background: #050b13;
}

.asset-detail-audio,
.asset-detail-empty {
  display: grid;
  gap: 1rem;
  justify-items: center;
  width: min(32rem, calc(100% - 2rem));
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 18px;
  padding: clamp(1.2rem, 4vw, 2rem);
  background: rgba(234, 246, 255, 0.07);
}

.asset-detail-audio .lucide,
.asset-detail-empty .lucide {
  width: 2.1rem;
  height: 2.1rem;
  color: var(--accent);
}

.asset-detail-audio audio {
  width: min(28rem, 100%);
}

.asset-detail-empty span {
  color: #fff;
  font-size: 1rem;
  font-weight: 950;
}

.asset-detail-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.detail-meta h3 {
  margin: 0 0 0.62rem;
}

.detail-meta p {
  margin: 0 0 0.48rem;
  color: var(--muted);
}

main[data-phase2-admin] {
  width: min(1320px, calc(100% - 2rem));
}

.staff-hero {
  position: relative;
  overflow: hidden;
  justify-items: center;
  text-align: center;
  gap: 0.8rem;
  border-color: rgba(60, 199, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(8, 19, 37, 0) 50%, rgba(8, 19, 37, 0.62) 78%, var(--bg) 100%),
    linear-gradient(135deg, rgba(0, 150, 219, 0.2), rgba(245, 196, 81, 0.06)),
    rgba(234, 246, 255, 0.055);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}

.staff-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: clamp(3rem, 7vw, 5rem);
  background:
    linear-gradient(180deg, rgba(8, 19, 37, 0), var(--bg)),
    linear-gradient(90deg, transparent, rgba(60, 199, 255, 0.16), transparent);
  pointer-events: none;
}

.moderation-panel,
.staff-panel {
  display: grid;
  gap: 1.15rem;
  margin-block: 0;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 20px;
  padding: clamp(1rem, 2vw, 1.25rem);
  background:
    linear-gradient(145deg, rgba(234, 246, 255, 0.07), rgba(234, 246, 255, 0.025)),
    rgba(8, 19, 37, 0.38);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}

.staff-workspace {
  display: grid;
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 1.4rem);
  align-items: start;
  margin-block: clamp(1.2rem, 3vw, 2.2rem);
}

.staff-sidebar {
  position: sticky;
  top: 5.8rem;
  display: grid;
  gap: 0.42rem;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 18px;
  padding: 0.62rem;
  background:
    linear-gradient(145deg, rgba(234, 246, 255, 0.075), rgba(234, 246, 255, 0.025)),
    rgba(8, 19, 37, 0.68);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18);
}

.staff-sidebar-link {
  display: grid;
  grid-template-columns: 1.05rem minmax(0, 1fr);
  gap: 0.58rem;
  align-items: center;
  min-height: 2.55rem;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.58rem 0.68rem;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.staff-sidebar-link:hover,
.staff-sidebar-link:focus-visible {
  border-color: rgba(60, 199, 255, 0.24);
  color: #ffffff;
  background: rgba(234, 246, 255, 0.06);
  outline: none;
}

.staff-sidebar-link.is-active {
  border-color: rgba(60, 199, 255, 0.38);
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(60, 199, 255, 0.18), rgba(245, 196, 81, 0.08)),
    rgba(234, 246, 255, 0.07);
}

.staff-sidebar-link svg {
  width: 1.05rem;
  height: 1.05rem;
}

.staff-workspace-content {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.35rem);
  min-width: 0;
}

.staff-workspace-content > [data-staff-section] {
  display: none;
}

.staff-workspace-content > [data-staff-section].is-active {
  display: grid;
}

@media (max-width: 980px) {
  .staff-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .staff-sidebar {
    position: static;
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    scrollbar-width: thin;
    padding: 0.55rem;
  }

  .staff-sidebar-link {
    grid-template-columns: 1rem auto;
    flex: 0 0 auto;
    min-height: 2.35rem;
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .staff-sidebar-link {
    grid-template-columns: 1rem;
    justify-items: center;
    width: 2.75rem;
    padding-inline: 0.55rem;
  }

  .staff-sidebar-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.moderation-toolbar {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto;
  gap: 0.55rem;
  align-items: end;
}

.moderation-toolbar p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.moderation-toolbar label {
  display: grid;
  gap: 0.38rem;
  min-width: min(420px, 100%);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.moderation-toolbar input {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(18, 40, 61, 0.82);
  color: var(--ink);
  padding: 0.55rem 0.75rem;
}

.moderation-list {
  display: grid;
  gap: 0.72rem;
}

.moderation-card {
  display: grid;
  gap: 0.85rem;
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.08), rgba(245, 196, 81, 0.035)),
    rgba(13, 32, 55, 0.72);
  padding: 0.95rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}

.moderation-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: start;
}

.moderation-card h3,
.moderation-card p {
  margin: 0;
}

.moderation-card-head h3 {
  margin-top: 0.42rem;
  color: #fff;
}

.moderation-card-head p,
.moderation-description,
.moderation-meta-grid span {
  color: var(--muted);
}

.moderation-type-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  border: 1px solid rgba(245, 196, 81, 0.34);
  border-radius: 999px;
  padding: 0 0.7rem;
  color: #ffe3a0;
  background: rgba(245, 196, 81, 0.11);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

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

.moderation-meta-grid div {
  display: grid;
  gap: 0.25rem;
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 14px;
  padding: 0.7rem;
  background: rgba(234, 246, 255, 0.045);
}

.moderation-meta-grid span {
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.moderation-meta-grid strong {
  color: #fff;
}

.moderation-media-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.moderation-media-strip.is-empty {
  display: flex;
  align-items: center;
  min-height: 4.4rem;
  border: 1px dashed rgba(234, 246, 255, 0.16);
  border-radius: 14px;
  padding: 0.8rem;
  color: var(--muted);
  background: rgba(234, 246, 255, 0.035);
  font-size: 0.82rem;
  font-weight: 850;
}

.moderation-media-strip.is-empty span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.moderation-media-strip.is-empty svg {
  width: 1rem;
  height: 1rem;
}

.moderation-media-thumb {
  position: relative;
  display: block;
  width: 6rem;
  height: 4rem;
  overflow: hidden;
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 12px;
  padding: 0;
  background: rgba(234, 246, 255, 0.055);
  cursor: pointer;
}

.moderation-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.moderation-card > img,
.moderation-card .submission-media-preview img {
  display: block;
  width: 6rem;
  height: 4rem;
  max-width: 6rem;
  max-height: 4rem;
  object-fit: cover;
  overflow: hidden;
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 12px;
}

.moderation-media-thumb span {
  position: absolute;
  left: 0.35rem;
  bottom: 0.35rem;
  border-radius: 999px;
  padding: 0.16rem 0.42rem;
  color: #eaf6ff;
  background: rgba(9, 24, 40, 0.76);
  font-size: 0.64rem;
  font-weight: 950;
}

.staff-decision-reason {
  display: grid;
  gap: 0.35rem;
  color: #dff5ff;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.staff-decision-reason select {
  width: min(100%, 24rem);
  border: 1px solid rgba(158, 223, 255, 0.24);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  color: #fff;
  background: rgba(4, 12, 22, 0.72);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: none;
}

.staff-media-modal {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(4, 12, 22, 0.74);
  backdrop-filter: blur(10px);
}

.staff-media-modal[hidden] {
  display: none;
}

.staff-media-dialog {
  display: grid;
  gap: 0.85rem;
  width: min(68rem, 96vw);
  max-height: 92vh;
  border: 1px solid rgba(234, 246, 255, 0.16);
  border-radius: 8px;
  padding: 1rem;
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.08), rgba(234, 246, 255, 0.035)),
    #0d2037;
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.4);
}

.staff-media-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.staff-media-head h3 {
  margin: 0;
  color: #fff;
}

.staff-media-preview {
  display: grid;
  place-items: center;
  min-height: 18rem;
  max-height: 72vh;
  overflow: auto;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 8px;
  background: rgba(4, 12, 22, 0.5);
}

.staff-media-preview img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
}

.moderation-assignee {
  display: inline-flex;
  justify-self: start;
  border: 1px solid rgba(158, 223, 255, 0.22);
  border-radius: 999px;
  padding: 0.32rem 0.62rem;
  color: #dff5ff;
  background: rgba(0, 150, 219, 0.09);
  font-size: 0.76rem;
  font-weight: 900;
}

.moderation-source-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: start;
  color: #bfe9ff;
  font-size: 0.78rem;
  font-weight: 950;
  text-decoration: none;
  text-transform: uppercase;
}

.moderation-source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.moderation-source-link svg {
  width: 0.95rem;
  height: 0.95rem;
}

.moderation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.56rem;
  justify-content: flex-end;
}

.staff-overview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
  position: relative;
  z-index: 2;
  margin-top: clamp(-4rem, -5vw, -2.25rem);
  margin-bottom: clamp(1rem, 2.6vw, 1.6rem);
}

.staff-overview-grid article {
  position: relative;
  display: grid;
  gap: 0.24rem;
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 18px;
  padding: 0.95rem;
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.11), rgba(245, 196, 81, 0.045)),
    rgba(13, 32, 55, 0.7);
  overflow: hidden;
}

.staff-overview-grid article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, rgba(60, 199, 255, 0.92), rgba(245, 196, 81, 0.7));
}

.staff-overview-grid span,
.staff-status-pill {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.staff-overview-grid strong {
  color: #ffffff;
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  line-height: 1;
}

.staff-overview-grid small {
  color: var(--muted);
  font-weight: 800;
}

.staff-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: end;
}

.staff-search-row label,
.staff-comparison-table label {
  display: grid;
  gap: 0.38rem;
  color: var(--muted);
  font-weight: 850;
}

.staff-search-row input,
.staff-comparison-table input,
.staff-comparison-table select {
  min-height: 2.35rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 0.75rem;
  color: var(--ink);
  background: rgba(18, 40, 61, 0.82);
}

.staff-comparison-table select option,
.moderation-toolbar input::placeholder,
.staff-search-row input::placeholder {
  color: #dff5ff;
  background: #12283d;
}

.staff-account-list,
.staff-report-list {
  display: grid;
  gap: 0.8rem;
}

.staff-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.staff-account-card,
.staff-report-card,
.staff-review-card {
  display: grid;
  gap: 0.65rem;
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 18px;
  padding: 0.9rem;
  background:
    linear-gradient(145deg, rgba(234, 246, 255, 0.055), rgba(234, 246, 255, 0.025)),
    rgba(13, 32, 55, 0.72);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
}

.staff-review-card {
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  align-items: center;
}

.staff-review-card.asset-review-card {
  grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr) auto;
}

.staff-review-card.asset-review-card:has(.staff-audio-preview) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.staff-review-card.is-reviewed {
  opacity: 0.72;
  border-color: rgba(112, 217, 150, 0.35);
}

.staff-review-card.is-held {
  opacity: 1;
  border-color: rgba(245, 196, 81, 0.42);
}

.staff-review-card.is-flagged {
  opacity: 1;
  border-color: rgba(255, 135, 150, 0.45);
}

.staff-review-card h3,
.staff-review-card p,
.staff-review-card small {
  margin: 0;
}

.staff-review-card p,
.staff-review-card small {
  color: var(--muted);
}

.staff-asset-safety {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
}

.staff-asset-safety li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  border: 1px solid rgba(234, 246, 255, 0.11);
  border-radius: 8px;
  padding: 0.38rem 0.45rem;
  color: var(--muted);
  background: rgba(234, 246, 255, 0.045);
  font-size: 0.74rem;
  font-weight: 800;
}

.staff-asset-safety li.is-done {
  border-color: rgba(112, 217, 150, 0.3);
  color: #d9ffe5;
  background: rgba(112, 217, 150, 0.09);
}

.staff-asset-safety li.is-warn {
  border-color: rgba(245, 196, 81, 0.35);
  color: #ffe5aa;
  background: rgba(245, 196, 81, 0.1);
}

.staff-asset-safety svg {
  width: 0.95rem;
  height: 0.95rem;
}

@media (max-width: 1100px) {
  .creator-dashboard-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .staff-asset-safety {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-feature-admin-grid,
  .home-feature-guide,
  .feature-candidate-controls,
  .feature-candidate-card {
    grid-template-columns: 1fr;
  }
}

.staff-review-thumb {
  display: grid;
  place-items: center;
  width: 4.75rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 150, 219, 0.78), rgba(0, 94, 158, 0.68));
}

.asset-review-card .staff-review-thumb {
  width: 100%;
  min-height: 6rem;
  aspect-ratio: 16 / 10;
}

.asset-review-card .staff-review-thumb:has(.staff-audio-preview) {
  grid-column: 1 / -1;
  min-height: 4.5rem;
  aspect-ratio: auto;
  overflow: visible;
}

.staff-review-thumb:has(video) {
  overflow: visible;
}

.staff-review-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-review-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-audio-preview {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  width: 100%;
  padding: 0.75rem;
}

.staff-audio-preview audio {
  width: min(26rem, 100%);
  max-width: none;
  height: 2.2rem;
}

.staff-review-thumb svg {
  width: 1.35rem;
  height: 1.35rem;
  color: #eaf6ff;
}

.staff-review-thumb.creator-thumb {
  border-radius: 999px;
}

.staff-status-pill {
  display: inline-flex;
  justify-self: start;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  color: #9edfff;
  background: rgba(0, 150, 219, 0.14);
}

.staff-account-head,
.staff-report-card {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.staff-account-head {
  display: grid;
  gap: 1rem;
}

.staff-account-head h3,
.staff-account-head p,
.staff-report-card h3,
.staff-report-card p {
  margin: 0;
}

.staff-account-head p,
.staff-report-card p,
.staff-report-card small {
  color: var(--muted);
}

.staff-comparison-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 14px;
}

.staff-comparison-table > div {
  display: grid;
  gap: 0.28rem;
  padding: 0.62rem;
  background: rgba(234, 246, 255, 0.045);
}

.staff-comparison-table > div:nth-child(even) {
  background: rgba(60, 199, 255, 0.06);
}

.staff-comparison-table span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.staff-comparison-table strong,
.staff-comparison-table small {
  color: #fff;
}

.staff-comparison-table small {
  color: #afd2e7;
  font-weight: 800;
}

.staff-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.danger-action {
  border-color: rgba(255, 135, 150, 0.36);
  color: #ffbec6;
}

.staff-audit-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(2, 10, 20, 0.72);
  backdrop-filter: blur(14px);
}

.staff-audit-modal[hidden] {
  display: none;
}

.staff-audit-dialog {
  width: min(880px, 100%);
  max-height: min(760px, calc(100vh - 2rem));
  overflow: auto;
  border: 1px solid rgba(234, 246, 255, 0.16);
  border-radius: 8px;
  padding: 1rem;
  background: #0b1f35;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.35);
}

.staff-audit-head,
.staff-audit-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.staff-audit-head h3,
.staff-audit-head p,
.staff-audit-summary h4,
.staff-audit-summary p,
.staff-audit-history h4 {
  margin: 0;
}

.staff-audit-layout {
  align-items: stretch;
  margin-top: 1rem;
}

.staff-audit-preview {
  display: grid;
  place-items: center;
  width: min(18rem, 42%);
  min-height: 10rem;
  overflow: hidden;
  border: 1px solid rgba(234, 246, 255, 0.13);
  border-radius: 8px;
  background: rgba(234, 246, 255, 0.05);
}

.staff-audit-preview img,
.staff-audit-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-audit-preview audio {
  width: min(24rem, 100%);
}

.staff-audit-summary {
  flex: 1;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 0.55rem;
}

.staff-audit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
}

.staff-audit-grid div {
  display: grid;
  gap: 0.18rem;
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 8px;
  padding: 0.65rem;
  background: rgba(234, 246, 255, 0.045);
}

.staff-audit-grid span,
.staff-audit-events small,
.staff-audit-empty {
  color: var(--muted);
}

.staff-audit-grid strong,
.staff-audit-events strong {
  color: #eaf6ff;
}

.staff-audit-keys {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.staff-audit-keys label {
  display: grid;
  gap: 0.35rem;
  color: #afd2e7;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.staff-audit-keys input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 8px;
  padding: 0.62rem;
  color: #eaf6ff;
  background: rgba(0, 0, 0, 0.18);
}

.staff-audit-history {
  margin-top: 1rem;
}

.staff-audit-events {
  display: grid;
  gap: 0.55rem;
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
}

.staff-audit-events li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 8px;
  padding: 0.65rem;
  background: rgba(234, 246, 255, 0.04);
}

.staff-audit-events li > span {
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  border-radius: 999px;
  color: #d9ffe5;
  background: rgba(112, 217, 150, 0.12);
}

.staff-audit-events p {
  margin: 0.25rem 0 0;
  color: #cfe4f3;
}

@media (max-width: 760px) {
  .staff-audit-layout {
    display: grid;
  }

  .staff-audit-preview {
    width: 100%;
  }

  .staff-audit-grid {
    grid-template-columns: 1fr;
  }
}

.auth-page {
  width: min(1180px, calc(100% - 2rem));
  padding-top: clamp(2rem, 6vw, 5rem);
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(22rem, 0.82fr);
  gap: clamp(1rem, 4vw, 2rem);
  align-items: stretch;
  min-height: clamp(32rem, 62vh, 42rem);
}

.auth-welcome-panel,
.auth-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(234, 246, 255, 0.06);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.auth-welcome-panel {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  padding: clamp(1.2rem, 4vw, 2.4rem);
  text-align: center;
  background:
    linear-gradient(145deg, rgba(0, 150, 219, 0.16), rgba(60, 199, 255, 0.06)),
    rgba(234, 246, 255, 0.05);
}

.auth-logo {
  width: min(24rem, 88%);
  -webkit-user-select: none;
  user-select: none;
}

.auth-welcome-panel h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.7rem);
  line-height: 0.95;
}

.auth-welcome-panel > p:not(.eyebrow) {
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.auth-welcome-panel > p.auth-single-line {
  max-width: none;
}

@media (min-width: 780px) {
  .auth-welcome-panel > p.auth-single-line {
    white-space: nowrap;
  }
}

.auth-perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.5rem;
}

.auth-perks span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  border: 1px solid rgba(60, 199, 255, 0.28);
  border-radius: 8px;
  padding: 0 0.82rem;
  color: #dff8ff;
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.16), rgba(112, 217, 150, 0.08)),
    rgba(234, 246, 255, 0.07);
  font-size: 0.82rem;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(234, 246, 255, 0.1);
}

.auth-perks .lucide {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--accent);
}

.auth-card {
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 1.8rem);
}

.auth-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.auth-card-head.compact {
  margin-top: 0.5rem;
}

.auth-card-head h2 {
  margin: 0;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
}

.auth-form {
  display: grid;
  gap: 0.85rem;
  width: 100%;
  max-width: none;
}

.auth-form label {
  display: grid;
  gap: 0.45rem;
  color: var(--ink);
  font-weight: 850;
}

.auth-form input {
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 1rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
}

.auth-form input:focus {
  border-color: rgba(60, 199, 255, 0.58);
  outline: 0;
  box-shadow: 0 0 0 0.22rem rgba(60, 199, 255, 0.12);
}

.username-input-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(234, 246, 255, 0.08);
  overflow: hidden;
}

.username-input-wrap > span {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  color: #9edfff;
  font-weight: 900;
}

.auth-form .username-input-wrap input {
  min-height: 2.9rem;
  border: 0;
  border-radius: 0;
  padding-left: 0;
  background: transparent;
}

.username-input-wrap:focus-within {
  border-color: rgba(60, 199, 255, 0.58);
  box-shadow: 0 0 0 0.22rem rgba(60, 199, 255, 0.12);
}

.auth-form .username-input-wrap input:focus {
  box-shadow: none;
}

.username-helper {
  margin-top: -0.45rem;
  font-size: 0.82rem;
}

.username-helper.error {
  color: #ffb4b4;
}

.auth-checkbox {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem !important;
  color: var(--muted) !important;
  font-size: 0.9rem;
  font-weight: 650 !important;
  line-height: 1.45;
}

.auth-checkbox input {
  width: 1.1rem;
  min-height: 1.1rem;
  margin-top: 0.18rem;
  accent-color: var(--accent);
}

.auth-checkbox a {
  color: #9edfff;
  font-weight: 850;
  text-decoration: none;
}

.auth-checkbox a:hover {
  color: #dff8ff;
  text-decoration: underline;
}

.auth-form-links {
  display: flex;
  justify-content: flex-end;
  margin-top: -0.25rem;
}

.auth-form-links button {
  border: 0;
  padding: 0;
  color: #9edfff;
  background: transparent;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.auth-form-links a {
  color: #9edfff;
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
}

.auth-form-links button:hover,
.auth-form-links a:hover {
  color: #dff8ff;
  text-decoration: underline;
}

.auth-reset-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(5, 12, 22, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.auth-reset-modal[hidden] {
  display: none !important;
}

.auth-reset-dialog {
  position: relative;
  width: min(28rem, 100%);
  border: 1px solid rgba(60, 199, 255, 0.2);
  border-radius: 18px;
  padding: clamp(1rem, 4vw, 1.45rem);
  background:
    linear-gradient(145deg, rgba(0, 150, 219, 0.13), rgba(234, 246, 255, 0.05)),
    #0c1726;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.35);
}

.auth-modal-copy {
  margin: 0.8rem 0 1rem;
  color: var(--muted);
  line-height: 1.55;
}

.auth-form .submission-actions {
  margin-top: 0.15rem;
}

.auth-form .submission-actions .solid-button,
.auth-form .submission-actions .ghost-link {
  min-height: 2.8rem;
}

.auth-2fa {
  border-top: 1px solid var(--line);
  margin-top: 0.4rem;
  padding-top: 1rem;
}

.auth-2fa[hidden] {
  display: none !important;
}

.auth-helper {
  margin: -0.25rem 0 0;
  color: var(--muted);
}

.auth-helper a {
  color: #9edfff;
  font-weight: 850;
  text-decoration: none;
}

.auth-helper a:hover {
  color: #dff8ff;
  text-decoration: underline;
}

.profile-hero {
  justify-items: center;
  text-align: center;
  gap: 0.75rem;
}

.profile-hero h1 {
  max-width: 34rem;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.profile-hero p:not(.eyebrow) {
  margin-inline: auto;
  max-width: 45rem;
  color: #c4deef;
}

.profile-overview {
  display: grid;
  gap: clamp(1.55rem, 4vw, 2.4rem);
  margin-top: clamp(1.8rem, 4vw, 3rem);
}

.profile-public-hero {
  width: 100%;
  margin-top: calc(-1 * clamp(1.5rem, 4vw, 2.5rem));
}

.profile-public-banner {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(22rem, 42vw, 34rem);
  margin-inline: calc(-1 * max(1rem, (100vw - 1180px) / 2));
  padding: clamp(7rem, 15vw, 13rem) max(1rem, calc((100vw - 1180px) / 2)) clamp(2rem, 5vw, 4rem);
  background:
    linear-gradient(180deg, rgba(8, 19, 37, 0.04), rgba(8, 19, 37, 0.18) 52%, rgba(8, 19, 37, 0.98) 100%),
    url("assets/profile-banner-enchanted-night.png");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.profile-public-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 9rem;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--background));
}

.profile-public-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
}

.profile-public-identity {
  display: flex;
  gap: clamp(1rem, 3vw, 1.6rem);
  align-items: end;
  min-width: 0;
}

.profile-public-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(7rem, 14vw, 11rem);
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: visible;
  background: rgba(8, 19, 37, 0.75);
  box-shadow: 0 1.4rem 3.6rem rgba(0, 0, 0, 0.38);
}

.profile-public-avatar img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(234, 246, 255, 0.8);
  border-radius: 16px;
  object-fit: cover;
}

.profile-public-avatar .forum-avatar-frame {
  inset: -4px;
  border-radius: 20px;
}

.profile-public-avatar.has-avatar-frame .forum-avatar-frame {
  opacity: 1;
}

.profile-public-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.profile-public-identity h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.65rem, 5vw, 4rem);
  line-height: 1;
  -webkit-text-stroke: 0.035em rgba(0, 0, 0, 0.55);
  paint-order: stroke fill;
  text-shadow: none;
}

.profile-public-identity h1.name-style-accent {
  color: #8fe5ff;
}

.profile-public-identity h1.name-style-yellow {
  color: #f5c451;
}

.profile-public-identity h1.name-style-green {
  color: #7ce2b0;
}

.profile-public-identity h1.name-style-red {
  color: #ff6b6b;
}

.profile-public-identity h1.name-font-bubble,
.profile-public-identity h1.name-font-arcade,
.profile-public-identity h1.name-font-pixel,
.profile-public-identity h1.name-font-sleek,
.profile-public-identity h1.name-font-gothic {
  font-size: clamp(2.65rem, 5vw, 4rem);
  line-height: 1;
}

.profile-public-staff-flags {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.profile-public-staff-flags[hidden] {
  display: none;
}

.profile-public-identity p {
  margin: 0.7rem 0 0;
  color: #c7e6f6;
  font-weight: 900;
}

.profile-public-bio {
  max-width: min(48rem, 100%);
  color: #e8f7ff;
  font-weight: 750;
  line-height: 1.35;
}

.profile-public-bio[hidden] {
  display: none;
}

.profile-public-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.profile-public-stats span {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  min-height: 2rem;
  border: 1px solid rgba(234, 246, 255, 0.2);
  border-radius: 8px;
  padding: 0.1rem 0.68rem 0;
  color: #dff5ff;
  background: rgba(8, 19, 37, 0.58);
  font-size: 0.8rem;
  font-weight: 900;
}

.profile-public-stats .lucide {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--accent);
}

.profile-public-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 0.55rem;
  align-items: center;
}

.profile-public-actions .compact-link[disabled] {
  opacity: 0.52;
  cursor: not-allowed;
}

.profile-public-showcase,
.profile-public-uploads {
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.2rem, 3vw, 2rem);
}

.profile-public-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr));
  gap: 1rem;
}

.profile-public-showcase-card,
.profile-public-upload-card {
  overflow: hidden;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 8px;
  background: rgba(234, 246, 255, 0.055);
}

.profile-public-showcase-card > div:not(.structure-placeholder-media),
.profile-public-upload-card > div:not(.structure-placeholder-media) {
  display: grid;
  gap: 0.38rem;
  padding: 0.85rem;
}

.profile-public-showcase-media,
.profile-public-upload-media {
  display: block;
  min-height: 11rem;
  background:
    url("assets/missing-placeholder.png") center / 30% no-repeat,
    linear-gradient(145deg, rgba(0, 150, 219, 0.28), rgba(8, 19, 37, 0.9));
}

.profile-public-upload-media {
  min-height: 9rem;
}

.profile-public-showcase-media.has-image,
.profile-public-upload-media.has-image {
  background-size: cover;
  background-position: center;
}

.profile-public-showcase-card span,
.profile-public-upload-card span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.profile-public-showcase-card h3,
.profile-public-showcase-card p,
.profile-public-upload-card h3,
.profile-public-upload-card p {
  margin: 0;
}

.profile-public-showcase-card h3 a,
.profile-public-upload-card h3 a {
  color: #fff;
  text-decoration: none;
}

.profile-public-showcase-card p,
.profile-public-upload-card p {
  color: var(--muted);
  line-height: 1.45;
}

.profile-upload-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
}

.profile-upload-search,
.profile-upload-sort {
  display: grid;
  align-items: center;
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 19, 37, 0.72), rgba(5, 16, 31, 0.82)),
    rgba(234, 246, 255, 0.07);
}

.profile-upload-search {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  padding: 0 0.82rem;
}

.profile-upload-search input,
.profile-upload-sort select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 2.65rem;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0;
  color: var(--ink);
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
  font-weight: 850;
}

.profile-upload-search input[type="search"]::-webkit-search-decoration,
.profile-upload-search input[type="search"]::-webkit-search-cancel-button,
.profile-upload-search input[type="search"]::-webkit-search-results-button,
.profile-upload-search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.profile-upload-search input::placeholder {
  color: rgba(196, 222, 239, 0.72);
}

.profile-upload-search input:-webkit-autofill,
.profile-upload-search input:-webkit-autofill:hover,
.profile-upload-search input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: 0 0 0 1000px #081325 inset;
  transition: background-color 9999s ease-out 0s;
}

.profile-upload-sort {
  grid-template-columns: auto minmax(10rem, 1fr);
  gap: 0.45rem;
  padding: 0 0.72rem;
  background:
    linear-gradient(45deg, transparent 50%, #9edfff 50%) calc(100% - 1rem) 52% / 0.42rem 0.42rem no-repeat,
    linear-gradient(135deg, rgba(8, 19, 37, 0.82), rgba(5, 16, 31, 0.9)),
    rgba(234, 246, 255, 0.07);
}

.profile-upload-sort span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.profile-upload-sort select {
  padding-right: 1.65rem;
  color-scheme: dark;
}

.profile-upload-sort select option {
  color: #eaf6ff;
  background: #081325;
}

.profile-upload-sort select option:checked {
  color: #081325;
  background: #9edfff;
}

.profile-upload-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.profile-upload-tabs button {
  min-height: 2.2rem;
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 8px;
  padding: 0.1rem 0.75rem 0;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.06);
  font-weight: 900;
}

.profile-upload-tabs button.active {
  border-color: rgba(60, 199, 255, 0.44);
  background: rgba(60, 199, 255, 0.16);
}

.profile-public-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.followed-page {
  display: grid;
  gap: 1.2rem;
}

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

.followed-stat-row article {
  border: 1px solid rgba(60, 199, 255, 0.18);
  border-radius: 8px;
  padding: 1rem;
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.1), rgba(234, 246, 255, 0.04)),
    rgba(234, 246, 255, 0.055);
}

.followed-stat-row span,
.followed-kind,
.followed-updated-flag {
  display: inline-flex;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.followed-stat-row strong {
  display: block;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
}

.followed-update-grid {
  display: grid;
  gap: 0.85rem;
}

.followed-update-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 8px;
  padding: 1rem;
  background: rgba(234, 246, 255, 0.06);
}

.followed-update-card h3,
.followed-update-card p {
  margin: 0;
}

.followed-update-card p {
  color: var(--muted);
}

.followed-updated-flag {
  margin-left: 0.45rem;
  color: #ffe6a1;
}

.creator-dashboard-hero {
  justify-items: center;
  text-align: center;
}

.creator-dashboard-shell {
  display: grid;
  gap: 1rem;
}

.creator-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.85rem;
}

.creator-stat-card,
.creator-dashboard-panel {
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.08), rgba(234, 246, 255, 0.035)),
    rgba(234, 246, 255, 0.06);
  box-shadow: 0 0.85rem 2.2rem rgba(0, 0, 0, 0.14);
}

.creator-stat-card {
  display: grid;
  gap: 0.36rem;
  min-height: 8.2rem;
  padding: 0.92rem;
}

.creator-stat-card span,
.creator-stat-card small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1.25;
  text-transform: uppercase;
}

.creator-stat-card strong {
  align-self: end;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  line-height: 0.95;
}

.creator-stat-card small {
  color: #91e6be;
}

.creator-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.34fr);
  gap: 1rem;
  align-items: stretch;
}

.creator-dashboard-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1rem;
  height: 100%;
}

.creator-dashboard-panel {
  padding: 1rem;
}

.creator-graph-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.compact-heading {
  align-items: center;
  margin-bottom: 0.8rem;
}

.compact-heading h2,
.compact-heading p {
  margin: 0;
}

.creator-range-toggle {
  display: inline-flex;
  gap: 0.28rem;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 8px;
  padding: 0.22rem;
  background: rgba(8, 19, 37, 0.42);
}

.creator-range-toggle button {
  min-width: 2.55rem;
  min-height: 2rem;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-weight: 950;
}

.creator-range-toggle button.active,
.creator-range-toggle button:hover {
  color: #fff;
  background: rgba(60, 199, 255, 0.2);
}

.creator-chart {
  display: flex;
  align-items: end;
  gap: clamp(0.08rem, 0.35vw, 0.28rem);
  height: 100%;
  min-height: 18rem;
  border: 1px solid rgba(234, 246, 255, 0.09);
  border-radius: 8px;
  padding: 1rem 0.9rem 0.75rem;
  background:
    linear-gradient(180deg, rgba(234, 246, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 25%,
    rgba(8, 19, 37, 0.38);
}

.creator-chart-bar {
  position: relative;
  flex: 1 1 0;
  min-width: 0.16rem;
  height: var(--bar-height);
  min-height: 0.3rem;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #6ee7ff, #0096db);
}

.creator-chart-bar small {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.36rem);
  display: none;
  border-radius: 6px;
  padding: 0.18rem 0.34rem;
  color: #06101d;
  background: #eaf6ff;
  font-size: 0.65rem;
  font-weight: 950;
  transform: translateX(-50%);
  white-space: nowrap;
}

.creator-chart-bar:hover small {
  display: block;
}

.creator-quick-actions {
  display: grid;
  gap: 0.52rem;
}

.creator-quick-actions a {
  display: inline-flex;
  gap: 0.52rem;
  align-items: center;
  min-height: 2.65rem;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 8px;
  padding: 0 0.8rem;
  color: #eaf6ff;
  background: rgba(234, 246, 255, 0.055);
  font-weight: 950;
  text-decoration: none;
}

.creator-quick-actions a:hover {
  border-color: rgba(60, 199, 255, 0.32);
  background: rgba(60, 199, 255, 0.13);
}

.creator-quick-actions svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
}

.creator-followers-panel strong {
  display: block;
  margin-bottom: 0.7rem;
  color: #fff;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 0.95;
}

.creator-table-wrap {
  overflow-x: auto;
}

.creator-dashboard-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
}

.creator-dashboard-table th,
.creator-dashboard-table td {
  border-bottom: 1px solid rgba(234, 246, 255, 0.09);
  padding: 0.78rem 0.55rem;
  text-align: left;
}

.creator-dashboard-table th {
  color: #9fc5dc;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.creator-dashboard-table td {
  color: #eaf6ff;
  font-weight: 850;
}

.creator-dashboard-table td a {
  color: #fff;
  font-weight: 950;
  text-decoration: none;
}

.creator-dashboard-table td small {
  display: block;
  margin-top: 0.16rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.creator-feedback-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.creator-feedback-card {
  display: grid;
  gap: 0.38rem;
  border: 1px solid rgba(234, 246, 255, 0.11);
  border-radius: 8px;
  padding: 0.9rem;
  background: rgba(8, 19, 37, 0.35);
}

.creator-feedback-card span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.creator-feedback-card h3,
.creator-feedback-card p {
  margin: 0;
}

.creator-feedback-card p {
  color: var(--muted);
  line-height: 1.45;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.15rem;
  align-items: start;
}

.profile-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(18, 46, 75, 0.82), rgba(10, 24, 43, 0.86)),
    rgba(234, 246, 255, 0.06);
  padding: clamp(1.15rem, 3vw, 1.45rem);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.18);
}

.profile-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(60, 199, 255, 0.15), transparent 18rem),
    linear-gradient(180deg, rgba(234, 246, 255, 0.07), transparent 45%);
}

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

.profile-card h3,
.profile-card h4 {
  margin: 0;
}

.profile-card p {
  color: var(--muted);
}

.profile-card label {
  display: grid;
  gap: 0.38rem;
  color: #d7f1ff;
  font-size: 0.86rem;
  font-weight: 850;
}

.profile-card input {
  width: 100%;
  min-height: 2.8rem;
  border: 1px solid rgba(234, 246, 255, 0.15);
  border-radius: 999px;
  padding: 0 0.9rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
}

.profile-card input:focus {
  border-color: rgba(60, 199, 255, 0.56);
  outline: 0;
  box-shadow: 0 0 0 0.22rem rgba(60, 199, 255, 0.12);
}

.profile-card-heading {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin-bottom: 1rem;
}

.profile-card-heading.compact {
  margin-bottom: 1.15rem;
}

.profile-card-heading .eyebrow {
  margin-bottom: 0.12rem;
}

.profile-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: 2px solid rgba(60, 199, 255, 0.42);
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.32), transparent 26%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 18px 40px rgba(0, 150, 219, 0.22);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  overflow: hidden;
}

.profile-avatar img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar span {
  grid-area: 1 / 1;
  z-index: 1;
}

.profile-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.profile-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.95rem;
  border: 1px solid rgba(60, 199, 255, 0.28);
  border-radius: 999px;
  padding: 0.08rem 0.7rem 0;
  color: #bfe9ff;
  background: rgba(0, 150, 219, 0.12);
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.profile-chip.is-verified {
  border-color: rgba(112, 217, 150, 0.42);
  color: #9ff0c2;
  background: rgba(112, 217, 150, 0.12);
}

.profile-chip.is-unverified {
  border-color: rgba(245, 196, 81, 0.42);
  color: #ffd98a;
  background: rgba(245, 196, 81, 0.12);
}

.plan-chip {
  border-color: rgba(60, 199, 255, 0.34);
  color: #9edfff;
}

.plan-chip.plan-free {
  color: #dff5ff;
  border-color: rgba(60, 199, 255, 0.38);
  background: rgba(0, 150, 219, 0.2);
}

.plan-chip.plan-premium {
  color: #ffe6a1;
  border-color: rgba(245, 196, 81, 0.48);
  background: rgba(245, 196, 81, 0.18);
}

.plan-chip.plan-creator {
  color: #c7ffd9;
  border-color: rgba(112, 217, 150, 0.48);
  background: rgba(112, 217, 150, 0.18);
}

.role-chip {
  color: #dff8ff;
}

.profile-detail-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
}

.profile-detail-list div {
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 16px;
  padding: 0.82rem;
  background: rgba(234, 246, 255, 0.055);
}

.profile-detail-list dt {
  margin-bottom: 0.24rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #fff;
  font-weight: 900;
}

.profile-showcase-box {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.65rem;
  border: 1px solid rgba(60, 199, 255, 0.14);
  border-radius: 18px;
  padding: 0.95rem;
  background: rgba(0, 150, 219, 0.08);
}

.profile-showcase-box h4,
.profile-showcase-box p {
  margin: 0;
}

.profile-showcase-box .eyebrow {
  margin-bottom: 0.18rem;
}

.profile-showcase-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.profile-showcase-summary,
.profile-showcase-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.profile-showcase-summary span,
.profile-showcase-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.85rem;
  border: 1px solid rgba(60, 199, 255, 0.2);
  border-radius: 999px;
  padding: 0.08rem 0.68rem 0;
  color: #dff5ff;
  background: rgba(0, 150, 219, 0.12);
  font-size: 0.76rem;
  font-weight: 900;
}

.profile-showcase-chip {
  cursor: pointer;
}

.profile-showcase-chip.media-chip {
  border-color: rgba(245, 196, 81, 0.26);
  color: #ffe6a1;
  background: rgba(245, 196, 81, 0.12);
}

.profile-showcase-chip span {
  color: #ffbec6;
}

.profile-showcase-selected p,
.profile-showcase-picker p {
  margin: 0;
  color: #b9d8eb;
}

.profile-showcase-selected > p {
  grid-column: 1 / -1;
  min-width: 0;
  white-space: nowrap;
}

.profile-showcase-selected {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.profile-showcase-picker {
  display: grid;
  gap: 0.65rem;
  max-height: 21rem;
  overflow: auto;
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 16px;
  padding: 0.55rem;
  background: rgba(5, 16, 31, 0.34);
}

.profile-showcase-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 999px;
  padding: 0 0.8rem;
  background: rgba(234, 246, 255, 0.07);
}

.profile-showcase-search svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
}

.profile-showcase-search input {
  width: 100%;
  min-height: 2.45rem;
  border: 0;
  padding: 0;
  color: #eaf6ff;
  background: transparent;
}

.profile-showcase-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
}

.profile-showcase-pick-card,
.profile-showcase-mini-card {
  position: relative;
  display: grid;
  gap: 0.42rem;
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 14px;
  padding: 0.45rem;
  color: #eaf6ff;
  text-align: left;
  background: rgba(234, 246, 255, 0.055);
}

.profile-showcase-pick-card.active {
  border-color: rgba(112, 217, 150, 0.42);
  background: rgba(112, 217, 150, 0.12);
}

.profile-showcase-pick-card:disabled {
  opacity: 0.48;
}

.profile-showcase-pick-card strong,
.profile-showcase-mini-card strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.profile-showcase-pick-card small {
  color: #a9cfe5;
  font-weight: 800;
}

.profile-showcase-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}

.profile-showcase-mini-card button {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid rgba(255, 190, 198, 0.35);
  border-radius: 999px;
  padding: 0;
  color: #ffbec6;
  background: rgba(20, 10, 18, 0.64);
}

.profile-showcase-mini-card button svg {
  width: 0.85rem;
  height: 0.85rem;
}

.profile-verification-box,
.profile-security-panel {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(5, 16, 31, 0.34);
}

.profile-verification-box.inline {
  margin-top: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.profile-email-verification {
  margin-top: 0.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(234, 246, 255, 0.12);
}

.profile-verify-feedback {
  margin-top: -0.2rem;
}

.profile-verification-box h4,
.profile-security-intro h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.profile-verification-box p,
.profile-security-intro p {
  margin: 0.28rem 0 0;
  color: #b9d8eb;
  line-height: 1.45;
}

.profile-toggle-card {
  display: flex !important;
  gap: 0.8rem !important;
  align-items: center;
  border: 1px solid rgba(245, 196, 81, 0.22);
  border-radius: 18px;
  padding: 0.9rem;
  background: rgba(245, 196, 81, 0.08);
}

.profile-toggle-card input {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 1.25rem;
  accent-color: #f5c451;
}

.profile-toggle-card strong,
.profile-toggle-card small {
  display: block;
}

.profile-toggle-card strong {
  color: #fff;
}

.profile-toggle-card small {
  margin-top: 0.1rem;
  color: #dcc991;
}

.profile-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: end;
}

.profile-field-stack {
  display: grid;
  gap: 0.72rem;
}

.profile-menu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}

.profile-menu-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 999px;
  padding: 0 0.95rem;
  color: #dff5ff;
  background: rgba(234, 246, 255, 0.07);
  font-weight: 900;
}

.profile-menu-tabs button svg {
  width: 1rem;
  height: 1rem;
}

.profile-menu-tabs button.active {
  border-color: rgba(60, 199, 255, 0.46);
  color: #fff;
  background: rgba(0, 150, 219, 0.28);
  box-shadow: 0 12px 30px rgba(0, 150, 219, 0.14);
}

.profile-tab-panels {
  display: grid;
  margin-top: 0.35rem;
}

.profile-tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.profile-tab-panel.active {
  display: grid;
  gap: 1rem;
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  .profile-tab-panel.active {
    opacity: 0;
    transform: translateY(0.35rem);
  }
}

.profile-settings-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 0.78fr) minmax(0, 1.22fr);
  gap: 1rem;
}

.profile-avatar-card {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-content: stretch;
}

.profile-banner-card {
  grid-column: auto;
  grid-row: auto;
}

.profile-storage-card {
  grid-column: auto;
  grid-row: auto;
}

.profile-username-card {
  grid-column: 1;
  grid-row: 1;
  gap: 0.6rem;
  padding-block: 0.85rem;
}

.profile-name-style-card {
  grid-column: 1;
  grid-row: 2;
}

.profile-mini-form {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(5, 16, 31, 0.34);
}

.profile-mini-form p {
  margin: -0.25rem 0 0;
  color: #b9d8eb;
  line-height: 1.45;
}

.profile-mini-form .compact-link {
  justify-self: start;
  min-height: 2.25rem;
  padding-inline: 0.78rem;
  font-size: 0.82rem;
}

.profile-account-storage-card {
  margin: -0.15rem 0 1rem;
}

.profile-image-divider {
  height: 1px;
  margin: 0.15rem 0;
  background: rgba(234, 246, 255, 0.1);
}

.profile-banner-section {
  display: grid;
  gap: 0.65rem;
}

.profile-avatar-frame-section {
  display: grid;
  gap: 0.65rem;
}

.profile-banner-section h4,
.profile-avatar-frame-section h4,
.profile-banner-section p {
  margin: 0;
}

.profile-avatar-frame-section p {
  margin: 0;
}

.profile-avatar-feedback {
  min-height: 1.25rem;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  background: rgba(234, 246, 255, 0.055);
  line-height: 1.35;
}

.profile-avatar-feedback:empty {
  display: none;
}

.avatar-upload-preview {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  width: 100%;
  border: 1px dashed rgba(60, 199, 255, 0.34);
  border-radius: 8px;
  padding: 0.7rem;
  color: #dff5ff;
  background: rgba(234, 246, 255, 0.055);
  text-align: left;
}

.avatar-upload-preview img {
  width: 5rem;
  height: 5rem;
  border-radius: 8px;
  object-fit: cover;
  background:
    url("assets/missing-placeholder.png") center / 58% no-repeat,
    rgba(234, 246, 255, 0.08);
}

.avatar-upload-preview span {
  display: inline-flex;
  gap: 0.42rem;
  align-items: center;
  font-weight: 950;
}

.avatar-frame-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.avatar-frame-option {
  display: grid;
  gap: 0.34rem;
  justify-items: center;
  min-height: 7.2rem;
  border: 1px solid rgba(60, 199, 255, 0.18);
  border-radius: 10px;
  padding: 0.55rem 0.38rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.055);
}

.avatar-frame-option.active {
  border-color: var(--accent);
  background: rgba(60, 199, 255, 0.13);
  box-shadow: 0 0 0 0.18rem rgba(60, 199, 255, 0.1);
}

.avatar-frame-option.is-locked {
  opacity: 0.58;
  cursor: not-allowed;
}

.avatar-frame-option strong {
  font-size: 0.76rem;
  line-height: 1;
}

.avatar-frame-option small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.avatar-frame-option.is-locked small {
  color: #f5c451;
}

.avatar-frame-sample {
  width: 3.15rem;
  height: 3.15rem;
}

.avatar-frame-sample img {
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 10px;
  object-fit: cover;
}

.avatar-frame-sample .forum-avatar-frame {
  inset: -3px;
  border-radius: 13px;
}

.profile-about-card textarea,
.profile-password-box input,
.profile-security-panel input {
  border-radius: 8px;
}

.profile-about-card small {
  color: var(--muted);
  font-weight: 850;
}

.profile-two-factor-card .profile-security-panel {
  margin-top: 0;
}

.profile-2fa-details {
  padding: 0;
}

.profile-2fa-details summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
  list-style: none;
}

.profile-2fa-details summary::-webkit-details-marker {
  display: none;
}

.profile-2fa-details summary strong,
.profile-2fa-details summary small {
  display: block;
}

.profile-2fa-details summary small {
  margin-top: 0.2rem;
  color: var(--muted);
  font-weight: 850;
}

.profile-2fa-details summary svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
  transition: transform 160ms ease;
}

.profile-2fa-details[open] summary svg {
  transform: rotate(180deg);
}

.profile-2fa-details > *:not(summary) {
  margin-inline: 1rem;
}

.profile-2fa-details > :last-child {
  margin-bottom: 1rem;
}

.profile-2fa-toggle {
  margin: 0;
}

.profile-password-box {
  max-width: 42rem;
}

.profile-style-label {
  display: block;
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.name-style-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.name-style-option {
  display: grid;
  gap: 0.12rem;
  place-items: center;
  min-height: 2.25rem;
  border: 1px solid rgba(60, 199, 255, 0.18);
  border-radius: 12px;
  padding: 0.35rem 0.45rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.06);
  font-size: 0.74rem;
  overflow: hidden;
}

.name-style-option.is-locked {
  opacity: 0.58;
  cursor: not-allowed;
}

.name-style-option small {
  color: #f5c451;
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.name-style-option.active {
  border-color: var(--accent);
  background: rgba(60, 199, 255, 0.13);
  box-shadow: 0 0 0 0.18rem rgba(60, 199, 255, 0.1);
}

.name-style-option span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.name-custom-colours {
  display: none;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  border: 1px solid rgba(60, 199, 255, 0.18);
  border-radius: 8px;
  padding: 0.65rem;
  background: rgba(234, 246, 255, 0.05);
}

.name-custom-colours.active {
  display: grid;
}

.name-custom-colours label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.name-custom-colours label span {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.42rem;
  align-items: center;
}

.name-custom-colours input {
  width: 100%;
  min-height: 2.4rem;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 8px;
  padding: 0.18rem;
  background: rgba(8, 19, 37, 0.5);
}

.name-custom-colours input[type="text"] {
  padding: 0 0.55rem;
  color: var(--ink);
  font-weight: 900;
  text-transform: uppercase;
}

.username-style-preview {
  display: inline-block;
  justify-self: start;
  min-height: 2.55rem;
  line-height: 2.55rem;
  border: 1px solid rgba(60, 199, 255, 0.18);
  border-radius: 999px;
  padding: 0 0.95rem;
  background: rgba(4, 13, 28, 0.4);
  font-size: 1rem;
  font-weight: 900;
}

.username-style-preview-text {
  display: inline-block;
  line-height: 1;
}

@media (max-width: 760px) {
  .creator-dashboard-stats,
  .creator-dashboard-grid,
  .creator-feedback-grid {
    grid-template-columns: 1fr;
  }

  .creator-chart {
    min-height: 13rem;
  }

  .creator-range-toggle {
    width: 100%;
  }

  .creator-range-toggle button {
    flex: 1;
  }

  .profile-public-banner {
    min-height: 31rem;
    padding-top: 7rem;
  }

  .profile-public-hero-content,
  .profile-upload-toolbar {
    grid-template-columns: 1fr;
  }

  .profile-public-actions {
    justify-content: start;
  }

  .profile-public-identity {
    align-items: start;
    flex-direction: column;
  }

  .profile-public-showcase-grid,
  .profile-public-upload-grid,
  .followed-stat-row,
  .followed-update-card {
    grid-template-columns: 1fr;
  }

  .profile-upload-sort {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block: 0.45rem;
  }

  .profile-avatar-card,
  .profile-banner-card,
  .profile-storage-card,
  .profile-username-card,
  .profile-name-style-card {
    grid-column: auto;
    grid-row: auto;
  }

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

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

  .community-media-review-summary,
  .community-media-review-card {
    grid-template-columns: 1fr;
  }

  .community-media-review-preview {
    border-right: 0;
    border-bottom: 1px solid rgba(234, 246, 255, 0.1);
  }
}

.avatar-upload-input {
  display: none;
}

.banner-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.42rem, 0.9vw, 0.6rem);
  width: 100%;
  border: 1px solid rgba(60, 199, 255, 0.18);
  border-radius: 12px;
  padding: clamp(0.55rem, 1vw, 0.72rem);
  background:
    linear-gradient(180deg, rgba(4, 13, 28, 0.42), rgba(11, 31, 55, 0.58)),
    rgba(234, 246, 255, 0.04);
}

.banner-preset {
  position: relative;
  display: grid;
  align-items: end;
  overflow: hidden;
  min-height: 4.25rem;
  aspect-ratio: 2.35 / 1;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0.45rem;
  color: #fff;
  text-align: left;
  background-size: cover, 112% auto;
  background-position: center, center;
  background-repeat: no-repeat;
  box-shadow: inset 0 -3rem 3rem rgba(8, 19, 37, 0.18);
}

.banner-preset.active {
  border-color: var(--accent);
  box-shadow:
    inset 0 -3rem 3rem rgba(8, 19, 37, 0.18),
    0 0 0 0.22rem rgba(60, 199, 255, 0.12);
}

.banner-preset span {
  position: relative;
  z-index: 1;
  font-size: 0.58rem;
  font-weight: 950;
  text-transform: uppercase;
}

.banner-upload-preset {
  align-items: center;
  justify-items: center;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(8, 19, 37, 0.1), rgba(8, 19, 37, 0.56)),
    rgba(234, 246, 255, 0.08);
}

.banner-upload-preset svg {
  position: relative;
  z-index: 1;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--accent);
  filter: drop-shadow(0 0.45rem 0.7rem rgba(0, 0, 0, 0.38));
}

.profile-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.profile-small-button {
  min-height: 2.25rem;
  padding: 0 0.78rem;
  font-size: 0.82rem;
}

.profile-small-button svg {
  width: 0.95rem;
  height: 0.95rem;
}

.profile-notification-list {
  display: grid;
  gap: 0.7rem;
}

.profile-notification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  justify-content: space-between;
}

.profile-notification-actions span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-notification-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  border: 1px solid rgba(60, 199, 255, 0.14);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.08), rgba(234, 246, 255, 0.035)),
    rgba(0, 150, 219, 0.08);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.12);
}

.profile-notification-card.is-targeted {
  border-color: rgba(60, 199, 255, 0.7);
  box-shadow: 0 0 0 0.22rem rgba(60, 199, 255, 0.14);
}

.profile-notification-card.is-read {
  border-color: rgba(234, 246, 255, 0.1);
  background:
    linear-gradient(145deg, rgba(234, 246, 255, 0.045), rgba(234, 246, 255, 0.02)),
    rgba(13, 32, 55, 0.46);
  opacity: 0.78;
}

.profile-notification-card.is-unread {
  border-color: rgba(60, 199, 255, 0.28);
}

.profile-notification-card span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.profile-notification-card h3,
.profile-notification-card p {
  margin: 0;
}

.profile-notification-card p {
  color: #c7e6f6;
}

.profile-notification-card time {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.profile-notification-side {
  display: grid;
  gap: 0.45rem;
  justify-items: end;
}

.profile-notification-side small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.community-media-review-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.community-media-review-summary article,
.community-media-review-card {
  border: 1px solid rgba(60, 199, 255, 0.14);
  border-radius: 8px;
  background: rgba(5, 16, 31, 0.34);
}

.community-media-review-summary article {
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
}

.community-media-review-summary span,
.community-media-review-head span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.community-media-review-summary strong {
  color: #fff;
  font-size: 1.35rem;
}

.community-media-review-summary small {
  color: #b9d8eb;
  line-height: 1.35;
}

.community-media-review-list {
  display: grid;
  gap: 0.9rem;
}

.community-media-review-card {
  display: grid;
  grid-template-columns: minmax(12rem, 0.36fr) minmax(0, 1fr);
  overflow: hidden;
}

.community-media-review-preview {
  display: grid;
  place-items: center;
  min-height: 13rem;
  border: 0;
  border-right: 1px solid rgba(234, 246, 255, 0.1);
  background: rgba(3, 12, 24, 0.62);
}

.community-media-review-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-media-review-preview span {
  display: inline-grid;
  justify-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-weight: 900;
}

.community-media-review-body {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1rem;
}

.community-media-review-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  justify-content: space-between;
}

.community-media-review-head > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.community-media-review-head time {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.community-media-review-body h3,
.community-media-review-body p {
  margin: 0;
}

.community-media-review-body p {
  color: #c7e6f6;
}

.community-media-review-timeline {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-media-review-timeline li {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: #b9d8eb;
  font-size: 0.86rem;
  font-weight: 850;
}

.community-media-review-timeline svg {
  width: 1rem;
  height: 1rem;
  color: #f5c451;
}

.community-media-review-timeline .done svg {
  color: #7ce2b0;
}

.profile-storage-card {
  align-self: start;
}

.profile-storage-meter {
  display: grid;
  gap: 0.55rem;
}

.profile-storage-meter > div:first-child {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

.profile-storage-meter strong {
  color: #fff;
  font-size: 1.4rem;
}

.profile-storage-meter span {
  color: #a9cfe5;
  font-weight: 850;
}

.profile-storage-track {
  overflow: hidden;
  height: 0.72rem;
  border-radius: 999px;
  background: rgba(234, 246, 255, 0.1);
}

.profile-storage-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #70d996, #3cc7ff);
  transition: width 0.45s ease;
}

.profile-library-heading {
  margin-top: clamp(2rem, 5vw, 3.2rem);
}

.profile-verified-message {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  border: 1px solid rgba(112, 217, 150, 0.28);
  border-radius: 18px;
  padding: 1rem;
  color: #aaffca;
  background: rgba(112, 217, 150, 0.1);
}

.profile-verified-message p {
  margin: 0;
  color: #d9ffe7;
  font-weight: 900;
}

.premium-account-icon {
  color: #f5c451;
  border-color: rgba(245, 196, 81, 0.48);
  background: rgba(245, 196, 81, 0.14);
}

.subscription-control {
  display: grid;
  gap: 1.2rem;
}

.subscription-dashboard,
.subscription-management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

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

.subscription-current,
.subscription-billing-card,
.subscription-management-card,
.subscription-legal {
  display: grid;
  gap: 0.3rem;
  border: 1px solid rgba(60, 199, 255, 0.2);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(0, 150, 219, 0.1);
}

.subscription-billing-card {
  border-color: rgba(245, 196, 81, 0.22);
  background: rgba(245, 196, 81, 0.08);
}

.subscription-current span,
.subscription-billing-card span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.subscription-current strong,
.subscription-billing-card strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.45rem);
  line-height: 1;
}

.subscription-billing-card strong small {
  display: block;
  margin-top: 0.32rem;
  color: #bfe9ff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 950;
  text-transform: uppercase;
}

.subscription-current p,
.subscription-billing-card p {
  margin: 0;
}

.subscription-billing-card strong {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.subscription-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.subscription-perks span {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-height: 2rem;
  border: 1px solid rgba(112, 217, 150, 0.26);
  border-radius: 999px;
  padding: 0.05rem 0.7rem 0;
  color: #d9ffe7;
  background: rgba(112, 217, 150, 0.09);
  font-weight: 900;
}

.subscription-perks svg {
  width: 0.9rem;
  height: 0.9rem;
}

.subscription-management-card {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  min-height: 13rem;
  background: rgba(5, 16, 31, 0.34);
}

.subscription-management-card.warning {
  border-color: rgba(255, 190, 198, 0.2);
}

.subscription-management-card > .lucide {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--accent);
}

.subscription-management-card.warning > .lucide {
  color: #ffbec6;
}

.subscription-management-card h4,
.subscription-management-card p,
.subscription-legal h4 {
  margin: 0;
}

.subscription-management-card p {
  color: #b9d8eb;
}

.subscription-management-card > div {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.55rem;
  height: 100%;
}

.subscription-management-card button {
  justify-self: end;
  align-self: end;
}

.subscription-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.subscription-legal {
  border-color: rgba(234, 246, 255, 0.12);
  background: rgba(5, 16, 31, 0.34);
}

.subscription-legal ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.1rem;
  color: #c7e6f6;
}

.profile-accordion {
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 18px;
  background: rgba(5, 16, 31, 0.28);
}

.profile-accordion summary {
  cursor: pointer;
  padding: 1rem;
  color: #fff;
  font-weight: 950;
}

.profile-accordion > *:not(summary) {
  margin: 0 1rem 1rem;
}

.profile-qr-setup {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.profile-qr {
  display: grid;
  place-items: center;
  width: 10rem;
  height: 10rem;
  border: 0.55rem solid #eaf6ff;
  border-radius: 16px;
  padding: 0;
  background: #eaf6ff;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
}

.profile-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.profile-qr:not(.has-qr)::before {
  content: "QR";
  color: #081325;
  font-family: var(--font-display);
  font-size: 2rem;
}

.danger-zone {
  border-color: rgba(255, 135, 150, 0.22);
  background: rgba(255, 135, 150, 0.06);
}

.danger-zone .ghost-button {
  border-color: rgba(255, 135, 150, 0.36);
  color: #ffbec6;
}

.profile-wide-feedback {
  min-height: 1.35rem;
  text-align: center;
}

.profile-submission-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.profile-submission-card {
  display: grid;
  grid-template-columns: minmax(16rem, 0.45fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(13, 32, 55, 0.82), rgba(7, 18, 34, 0.88)),
    rgba(234, 246, 255, 0.055);
  box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.18);
}

.profile-submission-card.status-pending {
  border-color: rgba(245, 196, 81, 0.24);
}

.profile-submission-card.status-approved {
  border-color: rgba(112, 217, 150, 0.24);
}

.profile-submission-card.status-rejected {
  border-color: rgba(255, 135, 150, 0.24);
}

.profile-submission-media {
  position: relative;
  min-height: 15rem;
  background-size: cover;
  background-position: center;
}

.profile-submission-media.has-uploaded-preview {
  background-color: rgba(5, 16, 31, 0.72);
}

.profile-submission-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(4, 13, 28, 0.58));
  pointer-events: none;
}

.profile-status-pill {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  border-radius: 999px;
  padding: 0 0.75rem;
  color: #07101c;
  background: #f5c451;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.status-approved .profile-status-pill {
  background: #7ce2b0;
}

.status-rejected .profile-status-pill {
  background: #ff8796;
}

.profile-submission-body {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: clamp(1rem, 3vw, 1.25rem);
}

.profile-main-image-editor {
  display: grid;
  gap: 0.7rem;
  border: 1px solid rgba(60, 199, 255, 0.14);
  border-radius: 8px;
  padding: 0.75rem;
  background: rgba(234, 246, 255, 0.045);
}

.profile-main-image-editor[hidden] {
  display: none !important;
}

.profile-submission-edit-fields {
  display: grid;
  gap: 0.65rem;
}

.profile-submission-edit-fields label {
  display: grid;
  gap: 0.35rem;
  color: #c7e6f6;
  font-size: 0.82rem;
  font-weight: 900;
}

.profile-submission-edit-fields input,
.profile-submission-edit-fields textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 0.8rem;
  color: var(--ink);
  background: rgba(234, 246, 255, 0.08);
  font: inherit;
}

.profile-submission-edit-fields textarea {
  resize: vertical;
}

.profile-editor-divider {
  height: 1px;
  background: rgba(234, 246, 255, 0.12);
}

.profile-image-option-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  gap: 0.55rem;
}

.profile-image-option-wrap {
  position: relative;
  min-width: 0;
}

.profile-image-option {
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 5.75rem;
  border: 1px solid rgba(234, 246, 255, 0.14);
  border-radius: 8px;
  padding: 0;
  color: var(--ink);
  background: rgba(5, 16, 31, 0.56);
  cursor: pointer;
}

.profile-image-option.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.18rem rgba(60, 199, 255, 0.13);
}

.profile-image-option.is-draft {
  border-color: #f5c451;
  box-shadow: 0 0 0 0.18rem rgba(245, 196, 81, 0.16);
}

.profile-image-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-image-empty {
  color: #c7e6f6;
  font-size: 0.78rem;
  font-weight: 950;
}

.profile-image-option-label {
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  bottom: 0.4rem;
  display: inline-flex;
  justify-content: center;
  min-height: 1.55rem;
  border-radius: 999px;
  padding: 0.25rem 0.5rem;
  color: #07101c;
  background: rgba(234, 246, 255, 0.88);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.profile-image-option.active .profile-image-option-label {
  background: var(--accent);
}

.profile-image-option.is-draft .profile-image-option-label {
  background: #f5c451;
}

.profile-image-delete-button {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid rgba(255, 135, 150, 0.44);
  border-radius: 999px;
  color: #fff;
  background: rgba(150, 22, 40, 0.82);
  box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.24);
}

.profile-image-delete-button .lucide {
  width: 0.95rem;
  height: 0.95rem;
}

.profile-image-delete-button:hover,
.profile-image-delete-button:focus-visible {
  border-color: rgba(255, 135, 150, 0.78);
  background: rgba(204, 45, 67, 0.94);
}

.profile-image-delete-confirm {
  position: absolute;
  inset: 0.35rem;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 0.55rem;
  border: 1px solid rgba(255, 135, 150, 0.42);
  border-radius: 8px;
  padding: 0.55rem;
  text-align: center;
  background: rgba(8, 19, 37, 0.94);
  box-shadow: 0 0.65rem 1.4rem rgba(0, 0, 0, 0.28);
}

.profile-image-delete-confirm[hidden] {
  display: none !important;
}

.profile-image-delete-confirm span {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 950;
}

.profile-image-delete-confirm div {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}

.profile-image-delete-confirm .compact-link {
  min-height: 1.9rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.72rem;
}

.profile-main-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.profile-image-upload-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font-weight: 900;
}

.profile-upload-status {
  color: #b9d8eb;
  font-size: 0.78rem;
  font-weight: 850;
}

.profile-image-help {
  margin: 0;
  color: #b9d8eb;
}

.profile-submission-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
}

.profile-submission-head h3 {
  margin: 0.55rem 0 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.profile-submission-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.profile-mini-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.profile-mini-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-height: 1.8rem;
  border: 1px solid rgba(60, 199, 255, 0.2);
  border-radius: 999px;
  padding: 0 0.62rem;
  color: #bfe9ff;
  background: rgba(0, 150, 219, 0.11);
  font-size: 0.74rem;
  font-weight: 900;
}

.profile-mini-pill svg {
  width: 0.9rem;
  height: 0.9rem;
}

.profile-submission-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.profile-submission-stats div {
  border: 1px solid rgba(234, 246, 255, 0.1);
  border-radius: 14px;
  padding: 0.75rem;
  background: rgba(234, 246, 255, 0.055);
}

.profile-submission-stats span,
.profile-submission-stats small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.profile-submission-stats strong {
  display: block;
  color: #fff;
  font-size: 1.05rem;
  text-transform: capitalize;
}

[data-profile-saves] > .state-card,
[data-profile-assets] > .state-card,
[data-profile-assets] > .asset-empty-state,
[data-profile-followed-creators] > .state-card {
  grid-column: 1 / -1;
}

.profile-library-storage {
  display: grid;
  grid-template-columns: minmax(11rem, 0.8fr) minmax(12rem, 1fr);
  gap: 0.85rem;
  align-items: center;
  margin: 0 0 1rem;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 18px;
  padding: 0.9rem;
  background: rgba(234, 246, 255, 0.06);
}

.profile-library-storage p,
.profile-library-storage strong {
  margin: 0;
}

.profile-library-storage strong {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  color: #ffffff;
  font-size: 1rem;
}

.profile-library-storage small {
  color: var(--muted);
  font-size: 0.76rem;
}

.profile-assets-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.profile-followed-creators-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.profile-asset-card {
  display: grid;
  gap: 0.7rem;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 8px;
  padding: 1rem;
  background:
    linear-gradient(145deg, rgba(60, 199, 255, 0.07), rgba(234, 246, 255, 0.035)),
    rgba(234, 246, 255, 0.07);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.12);
}

.profile-asset-card h3,
.profile-asset-card p {
  margin: 0;
}

.profile-asset-card p {
  color: var(--muted);
}

.profile-asset-card {
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
}

.profile-asset-card:has(.profile-audio-preview) {
  grid-template-columns: 1fr;
}

.profile-asset-thumb {
  display: grid;
  place-items: center;
  width: 4.5rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 150, 219, 0.82), rgba(0, 94, 158, 0.72));
}

.profile-asset-card:has(.profile-audio-preview) .profile-asset-thumb {
  width: 100%;
  min-height: 4.25rem;
  aspect-ratio: auto;
  overflow: visible;
}

.profile-asset-thumb:has(video) {
  overflow: visible;
}

.profile-asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-asset-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-audio-preview {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  width: 100%;
  padding: 0.75rem;
}

.profile-audio-preview audio {
  width: min(22rem, 100%);
  max-width: none;
  height: 2.1rem;
}

.profile-asset-thumb svg {
  width: 1.35rem;
  height: 1.35rem;
  color: #eaf6ff;
}

.profile-followed-creator-card {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  border: 1px solid rgba(234, 246, 255, 0.12);
  border-radius: 18px;
  padding: 0.9rem;
  background: rgba(234, 246, 255, 0.07);
}

.profile-followed-creator-card img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  object-fit: cover;
}

.profile-followed-creator-card h3,
.profile-followed-creator-card p {
  margin: 0;
}

.profile-followed-creator-card p {
  color: var(--muted);
}

.profile-card .form-feedback {
  min-height: 1.25rem;
}

.toggle-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.55rem;
  color: var(--ink);
}

.toggle-row input {
  width: 1rem;
  height: 1rem;
}

.save-button {
  min-height: 2.3rem;
  padding: 0 0.8rem;
}

.icon-save-button {
  width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: #ffffff;
  border-color: rgba(60, 199, 255, 0.34);
  background: rgba(234, 246, 255, 0.08);
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 800;
}

.backup-title {
  margin: 0.7rem 0 0.4rem;
  color: var(--accent);
  font-weight: 800;
}

.backup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.backup-grid code {
  display: inline-flex;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.38rem 0.5rem;
  background: rgba(234, 246, 255, 0.08);
}

.premium-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: min(980px, 100%);
  margin: 0 auto;
}

.benefit-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(234, 246, 255, 0.06);
  padding: 1rem;
  text-align: center;
}

.benefit-card h3 {
  margin: 0.55rem 0 0.25rem;
}

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

.highlight-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(234, 246, 255, 0.06);
  padding: 1rem;
}

.highlight-card h3 {
  margin: 0.65rem 0 0.35rem;
}

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

.plan-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(234, 246, 255, 0.06);
}

.plan-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
}

.plan-table th,
.plan-table td {
  padding: 0.78rem 0.84rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.plan-table thead th {
  color: var(--accent);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

.plan-table tbody tr:last-child td {
  border-bottom: 0;
}

.plan-table td {
  color: var(--muted);
}

.plan-table td strong {
  color: var(--ink);
}

.plan-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 270px));
  gap: 1rem;
  width: min(1480px, 100%);
  justify-content: center;
  margin: 0 auto;
}

.plan-card {
  display: grid;
  grid-template-rows: 1.8rem 2.4rem 3.1rem 1.2rem 1fr auto;
  gap: 0.55rem;
  border: 0;
  border-radius: 12px;
  background: rgba(234, 246, 255, 0.045);
  padding: 1rem 0.9rem;
  text-align: center;
  align-content: start;
}

.plan-tier {
  margin: 0;
  font-size: 1.03rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-plan {
  border: 4px solid rgba(255, 191, 75, 0.95);
  outline: 2px solid rgba(255, 191, 75, 0.55);
  outline-offset: 0;
  background: rgba(60, 199, 255, 0.055);
  box-shadow: 0 0 0 1px rgba(255, 191, 75, 0.35);
}

.creator-plan {
  background: rgba(112, 217, 150, 0.09);
}

.plan-price {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
}

.plan-price span {
  margin-left: 0.3rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.plan-subtext {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  min-height: 1.2rem;
}

.plan-card ul {
  margin: 1.8rem 0 0;
  padding-left: 0;
  list-style: none;
  color: var(--muted);
  line-height: 1.45;
  text-align: left;
  align-self: start;
}

.plan-card li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.38rem;
  white-space: nowrap;
  font-size: 0.82rem;
}

.plan-card li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #7ce2b0;
  font-weight: 900;
}

.plan-select {
  width: auto;
  margin-top: 0.85rem;
  min-height: 2.2rem;
  padding: 0 0.7rem;
  font-size: 0.84rem;
  justify-self: center;
  align-self: end;
}

.billing-status {
  width: min(980px, 100%);
  margin: 1rem auto 0;
  min-height: 1.25rem;
  color: var(--muted);
  text-align: center;
  font-weight: 700;
}

.billing-status.success {
  color: #7ce2b0;
}

.billing-status.error {
  color: #ff9ca8;
}

[data-billing-action][data-busy="1"] {
  opacity: 0.7;
  pointer-events: none;
}

.compare-wrap {
  width: 100%;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.compare-shell {
  width: min(980px, 100%);
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  overflow-x: auto;
  background: transparent;
}

.compare-plan-row {
  width: 100%;
  min-width: 640px;
  margin: 0;
  display: grid;
  grid-template-columns: 34% repeat(3, 22%);
  gap: 0;
  text-align: center;
  font-weight: 800;
}

.compare-plan-row span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0;
  color: var(--accent);
}

.compare-plan-row .season-col,
.compare-plan-row .creator-col {
  border-radius: 0;
}

.compare-plan-row .season-col {
  border-top-left-radius: 12px;
}

.compare-plan-row .creator-col.creator-earned-col {
  border-top-right-radius: 12px;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  table-layout: fixed;
}

.compare-table tbody tr:nth-child(odd) td.season-col {
  background: rgba(0, 150, 219, 0.13);
}

.compare-table tbody tr:nth-child(even) td.season-col {
  background: rgba(0, 150, 219, 0.07);
}

.compare-table tbody tr:nth-child(odd) td.creator-col:not(.creator-earned-col) {
  background: rgba(60, 199, 255, 0.11);
}

.compare-table tbody tr:nth-child(even) td.creator-col:not(.creator-earned-col) {
  background: rgba(60, 199, 255, 0.06);
}

.compare-table tbody tr:nth-child(odd) td.creator-earned-col {
  background: rgba(112, 217, 150, 0.13);
}

.compare-table tbody tr:nth-child(even) td.creator-earned-col {
  background: rgba(112, 217, 150, 0.07);
}

.compare-table th,
.compare-table td {
  padding: 0.72rem 0.8rem;
  border-bottom: 1px solid var(--line);
  border-left: 0;
  border-right: 0;
  text-align: center;
  font-weight: 800;
  color: #fff;
}

.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
  width: 34%;
}

.compare-table thead th {
  color: var(--accent);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.compare-table td.ok {
  color: #7ce2b0;
}

.compare-table td.no {
  color: #ff9ca8;
}

.compare-footnote {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: right;
}

.info-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin-left: 0.35rem;
  border: 1px solid rgba(234, 246, 255, 0.45);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
}

.season-col {
  background: rgba(0, 150, 219, 0.09);
}

.creator-col {
  background: rgba(60, 199, 255, 0.08);
}

.faq-list {
  width: min(900px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 0.55rem;
}

.faq-list details {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 0.5rem 0;
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  color: #fff;
  transition: color 180ms ease, transform 220ms ease;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "▾";
  color: var(--accent);
  font-size: 0.92rem;
}

.faq-list details[open] summary::after {
  content: "▴";
}

.faq-list p {
  margin: 0;
  color: var(--muted);
}

.creator-lane-copy {
  margin: 0;
  color: var(--muted);
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

.premium-centered .section-heading,
.premium-centered .icon-title {
  justify-content: center;
}

.premium-centered .icon-title {
  text-align: center;
}

.premium-centered .submission-actions {
  justify-content: center;
}

.premium-centered .section-heading {
  margin-bottom: 1.45rem;
}

.stacked-heading {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 0.65rem;
}

.faq-icon-badge {
  border-color: rgba(60, 199, 255, 0.5) !important;
  color: #dff5ff !important;
  background: rgba(0, 150, 219, 0.24) !important;
  box-shadow: 0 10px 24px rgba(0, 150, 219, 0.2) !important;
}

.support-icon-badge {
  border-color: rgba(255, 120, 130, 0.5) !important;
  color: #ffe8eb !important;
  background: rgba(220, 72, 86, 0.24) !important;
  box-shadow: 0 10px 24px rgba(220, 72, 86, 0.2) !important;
}

.compare-heading-copy {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
}

.compare-heading-copy p {
  margin: 0;
  color: var(--muted);
  text-align: center;
}

.premium-band-d .section-heading {
  margin-bottom: 3.2rem;
}

.premium-centered h2 {
  margin: 0;
  text-align: center;
}

.content-band.premium-centered {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.premium-band-a,
.premium-band-b,
.premium-band-c,
.premium-band-d,
.premium-band-e,
.premium-band-f {
  position: relative;
  isolation: isolate;
}

.premium-band-a::before,
.premium-band-b::before,
.premium-band-c::before,
.premium-band-d::before,
.premium-band-e::before,
.premium-band-f::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
}

.premium-band-a::before {
  background: rgba(46, 76, 112, 0.36);
}

.premium-band-b::before {
  background: rgba(12, 34, 58, 0.42);
}

.premium-band-c::before {
  background: rgba(112, 217, 150, 0.09);
}

.premium-band-d::before {
  background: rgba(12, 34, 58, 0.42);
}

.premium-band-e::before {
  background: rgba(46, 76, 112, 0.36);
}

.premium-band-f::before {
  background: rgba(12, 34, 58, 0.42);
}

.creator-lane .section-heading {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
}

.creator-lane .submission-actions {
  margin-top: 2.4rem;
}

.creator-lane [data-creator-eligibility-check] {
  border-color: rgba(112, 217, 150, 0.72);
  color: #8ce6ad;
  background: transparent;
}

.creator-lane [data-creator-eligibility-check]:hover {
  background: rgba(112, 217, 150, 0.12);
}

.creator-lane .icon-badge {
  border-color: rgba(112, 217, 150, 0.72);
  color: #d9ffe7;
  background: rgba(112, 217, 150, 0.22);
  box-shadow: 0 10px 24px rgba(112, 217, 150, 0.18);
}

.premium-theme .icon-badge {
  border-color: rgba(255, 191, 75, 0.45);
  background: rgba(242, 171, 47, 0.22);
  box-shadow: 0 10px 24px rgba(242, 171, 47, 0.16);
}

.premium-theme .creator-lane .icon-badge {
  border-color: rgba(112, 217, 150, 0.72);
  color: #d9ffe7;
  background: rgba(112, 217, 150, 0.22);
  box-shadow: 0 10px 24px rgba(112, 217, 150, 0.18);
}

.premium-theme .section-heading h2,
.premium-theme .premium-centered.page-header h1 {
  color: var(--ink);
}

.premium-theme .featured-plan {
  border-color: rgba(255, 191, 75, 0.86);
  background: rgba(234, 246, 255, 0.045);
}

.premium-theme .plan-card {
  border-color: transparent;
}

.premium-theme .season-col {
  background: rgba(0, 150, 219, 0.14);
}

.premium-theme .creator-col {
  background: rgba(60, 199, 255, 0.1);
}

.premium-theme .creator-earned-col {
  background: rgba(112, 217, 150, 0.14);
}

.premium-theme .faq-list summary::after {
  color: #fff;
}

.plan-badge {
  min-height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  border: 1px solid rgba(255, 191, 75, 0.46);
  border-radius: 999px;
  padding: 0.18rem 0.58rem;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: #ffcf80;
  background: rgba(242, 171, 47, 0.14);
}

.trial-badge {
  border-color: rgba(15, 23, 34, 0.72);
  color: #d7ebff;
  background: rgba(15, 23, 34, 0.66);
}

.plan-badge-empty {
  visibility: hidden;
}

.creator-badge {
  border-color: rgba(112, 217, 150, 0.55);
  color: #8ce6ad;
  background: rgba(112, 217, 150, 0.16);
}

.best-value-badge {
  border-color: rgba(60, 199, 255, 0.55);
  color: #9edfff;
  background: rgba(0, 94, 158, 0.56);
}

.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  width: min(980px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 19, 37, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.cookie-copy {
  display: grid;
  gap: 0.35rem;
}

.cookie-copy strong {
  font-family: var(--font-display);
  font-size: 1rem;
}

.cookie-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.cookie-copy a {
  color: #9edfff;
  font-weight: 700;
  text-decoration: none;
}

.cookie-copy a:hover {
  color: #c8efff;
}

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.creator-eligibility-result {
  margin-top: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(234, 246, 255, 0.06);
  padding: 0.8rem;
}

.eligibility-list {
  margin: 0.5rem 0 0;
  padding-left: 1rem;
}

.eligibility-list li {
  margin-bottom: 0.32rem;
}

.eligibility-list li.pass {
  color: #7ce2b0;
}

.eligibility-list li.fail {
  color: #ffb38d;
}

.eligibility-pass {
  margin: 0;
  color: #7ce2b0;
  font-weight: 800;
}

.eligibility-warn,
.eligibility-footnote,
.eligibility-error {
  margin: 0;
  color: var(--muted);
}

.eligibility-error {
  color: #ff9ca8;
}

.eligibility-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 13, 20, 0.72);
  z-index: 20;
  padding: 1rem;
}

.eligibility-modal[hidden] {
  display: none !important;
}

.eligibility-modal-card {
  width: min(520px, 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #132235;
  padding: 1rem;
  text-align: center;
  display: grid;
  gap: 0.55rem;
}

.eligibility-modal-card h3 {
  margin: 0;
}

.eligibility-modal-card p {
  margin: 0;
  color: var(--muted);
}

.eligibility-tip {
  color: var(--accent) !important;
  font-weight: 700;
}

/* FAQ hover and dropdown polish */
.faq-list summary:hover {
  color: #74d7ff;
}

.faq-list summary::after {
  content: "v";
  transition: transform 220ms ease, color 180ms ease;
}

.faq-list details[open] summary {
  transform: translateY(-1px);
}

.faq-list details[open] summary::after {
  content: "^";
  transform: translateY(-1px);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 260ms ease, opacity 240ms ease;
}

.faq-answer > p {
  overflow: hidden;
  margin: 0;
  padding-top: 0;
  transform: translateY(-4px);
  transition: transform 260ms ease, padding-top 260ms ease;
}

.faq-list details[open] .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-list details[open] .faq-answer > p {
  padding-top: 0.55rem;
  transform: translateY(0);
}

@media (max-width: 980px) {
  .topbar,
  .workspace,
  .split-band,
  .spotlight-layout,
  .featured-layout,
  .featured-main,
  .news-card,
  .premium-grid,
  .state-grid,
  .chat-shell,
  .forum-shell,
  .staff-overview-grid,
  .staff-review-grid {
    grid-template-columns: 1fr;
  }

  .main-nav,
  .top-actions {
    justify-content: start;
  }

  .topbar {
    position: static;
  }

  .forums-page {
    width: min(calc(100vw - 1rem), 100%);
  }

  .community-panels {
    height: clamp(44rem, calc(100svh - 6rem), 68rem);
  }

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

  .creation-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 31rem;
  }

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

  .filter-controls,
  .subscription-dashboard,
  .subscription-management-grid,
  .detail-layout,
  .creation-detail-shell,
  .profile-grid,
  .profile-submission-card,
  .premium-highlights,
  .auth-shell,
  .plan-cards,
  .benefits-grid,
  .fairplay-grid,
  .featured-news-post,
  .footer-top,
  .footer-links,
  .creator-steps,
  .assets-layout,
  .asset-info-grid,
  .asset-info-split,
  .trending-creator-grid,
  .trending-asset-grid {
    grid-template-columns: 1fr;
  }

  .detail-actions,
  .detail-creator-stats,
  .detail-creator-actions,
  .detail-step-line,
  .profile-submission-stats,
  .profile-detail-list,
  .profile-settings-grid,
  .profile-qr-setup,
  .staff-search-row,
  .moderation-toolbar,
  .moderation-card-head,
  .moderation-meta-grid,
  .staff-comparison-table,
  .staff-account-head,
  .staff-report-card,
  .staff-review-card,
  .staff-review-card.asset-review-card {
    grid-template-columns: 1fr;
  }

  .creator-timeline {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .creator-timeline::before {
    left: 1.25rem;
    right: auto;
    top: 1.25rem;
    bottom: 1.25rem;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, #0096db 0%, #3cc7ff 35%, #70d996 68%, #f5c451 100%);
  }

  .timeline-step {
    justify-items: start;
    text-align: left;
    padding-left: 2.4rem;
  }

  .timeline-icon {
    position: absolute;
    left: 0;
    top: 0;
  }

  .creator-feature-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .creator-feature-small-copy .ghost-button {
    right: 0.8rem;
    bottom: 0.8rem;
  }

  .creator-feature-large {
    grid-row: auto;
  }

  .compare-plan-row {
    grid-template-columns: 42% repeat(3, 19.33%);
  }

  .premium-channel-plans {
    grid-template-columns: 1fr;
  }

  .asset-browser-tools,
  .asset-grid,
  .my-assets-grid,
  .profile-assets-grid,
  .profile-followed-creators-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .asset-browser-tools .search-box {
    grid-column: 1 / -1;
  }

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

  .hot-card {
    flex-basis: calc((100% - 2rem) / 3);
  }

  .home-chat-promo {
    grid-template-columns: 1fr;
  }

  .chat-3d-card {
    transform: rotateX(5deg) rotateY(-6deg);
  }

  .screen-stage {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .forums-page {
    width: 100%;
    padding-inline: 0.45rem;
  }

  .community-hub-band {
    border-radius: 14px;
    padding: 0.65rem;
  }

  .community-panels {
    height: auto;
    min-height: 0;
  }

  .chat-shell,
  .forum-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
    height: auto;
    overflow: visible;
  }

  .room-rail {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    width: 100%;
    border-radius: 14px;
    padding: 0.55rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .room-rail-heading {
    flex: 0 0 auto;
    margin: 0 0.25rem 0 0.35rem;
    font-size: 0.62rem;
  }

  .room-rail-heading .game-toggle-icon {
    width: 1rem;
    height: 1rem;
  }

  .room-rail button {
    flex: 0 0 auto;
    min-height: 2.1rem;
    border-radius: 999px;
    padding: 0 0.68rem;
    font-size: 0.7rem;
    white-space: nowrap;
  }

  .chat-main {
    grid-template-rows: auto minmax(20rem, 1fr) auto auto;
    min-height: 32rem;
    border-radius: 14px;
  }

  .chat-room-header {
    padding: 0.62rem;
  }

  .chat-room-header strong {
    font-size: 0.92rem;
  }

  .chat-preview {
    min-height: 20rem;
    padding: 0.62rem;
  }

  .chat-message-row {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.45rem;
  }

  .chat-bubble {
    border-radius: 1rem 1rem 1rem 0.35rem;
    padding: 0.58rem 0.68rem;
  }

  .chat-composer {
    padding: 0.58rem;
  }

  .chat-composer-row {
    grid-template-columns: 2.35rem 2.35rem minmax(0, 1fr) 2.35rem;
    gap: 0.35rem;
  }

  .chat-composer-row button,
  .chat-image-upload {
    width: 2.35rem;
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: 0;
  }

  .chat-composer-row button span,
  .chat-image-upload span {
    display: none;
  }

  .chat-input-wrap input {
    min-height: 2.35rem;
    font-size: 0.78rem;
  }

  .chat-footer-note {
    gap: 0.35rem;
    padding: 0.5rem 0.62rem;
    font-size: 0.66rem;
  }

  .member-panel {
    display: none;
  }

  .forum-categories {
    display: flex;
    gap: 0.42rem;
    width: 100%;
    height: auto;
    border-radius: 14px;
    padding: 0.55rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .forum-categories::-webkit-scrollbar,
  .room-rail::-webkit-scrollbar {
    display: none;
  }

  .forum-categories button {
    flex: 0 0 auto;
    min-height: 2.1rem;
    border-radius: 999px;
    padding: 0 0.72rem;
    font-size: 0.7rem;
    white-space: nowrap;
  }

  .forum-board {
    height: auto;
    min-height: 31rem;
    border-radius: 14px;
    overflow: visible;
  }

  .forum-board-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.62rem;
  }

  .forum-board-header h3 {
    white-space: normal;
  }

  .forum-board-header .solid-button {
    width: 100%;
    min-height: 2.3rem;
  }

  .forum-game-toggle {
    order: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-height: 2.25rem;
  }

  .forum-board-header .solid-button {
    order: 3;
  }

  .forum-game-toggle span:not(.forum-game-slider) {
    padding: 0 0.28rem;
    font-size: 0.62rem;
  }

  .forum-game-toggle .game-toggle-icon {
    width: 1rem;
    height: 1rem;
  }

  .forum-search-row {
    padding: 0.62rem;
  }

  .forum-topic-list {
    padding: 0.62rem;
  }

  .forum-topic {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    border-radius: 12px;
    padding: 0.72rem;
  }

  .forum-topic-status {
    justify-content: flex-start;
  }

  .forum-post-view {
    padding: 0.62rem;
  }

  .forum-post-card,
  .forum-reply-card {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 14px;
    padding: 0.72rem;
  }

  .forum-post-head,
  .forum-reply-head {
    gap: 0.5rem;
    align-items: start;
  }

  .forum-post-actions {
    justify-content: flex-start;
  }

  .forum-media-fields {
    grid-template-columns: 1fr;
  }

  .forum-reply-composer {
    border-radius: 14px;
    padding: 0.72rem;
  }
}

@media (max-width: 430px) {
  .forum-game-toggle span:not(.forum-game-slider) {
    font-size: 0;
    gap: 0;
  }

  .forum-game-toggle span:not(.forum-game-slider)::after {
    content: attr(data-short-label);
    font-size: 0.66rem;
  }
}

@media (max-width: 680px) {
  main {
    width: min(100% - 1rem, 1180px);
    padding-top: 3.9rem;
  }

  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    padding: 0.62rem 0.75rem;
    background: rgba(8, 19, 37, 0.72);
    backdrop-filter: blur(24px) saturate(1.18);
    -webkit-backdrop-filter: blur(24px) saturate(1.18);
    box-shadow: 0 0.85rem 2.2rem rgba(0, 0, 0, 0.18);
  }

  .brand-logo {
    width: min(10.2rem, 58vw);
  }

  .main-nav {
    display: none;
  }

  .top-actions {
    width: auto;
    justify-content: end;
    gap: 0.35rem;
  }

  .top-actions > :not(.mobile-menu-wrap) {
    display: none !important;
  }

  .mobile-menu-wrap {
    display: block;
  }

  .top-actions .mobile-menu-button {
    width: 2.7rem;
    height: 2.7rem;
    min-height: 2.7rem;
    border-radius: 999px;
    padding: 0;
  }

  .mobile-menu .notification-preview-card {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    padding: 0.55rem 0.6rem;
  }

  .mobile-menu .notification-preview-card small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .forums-page {
    width: 100%;
    padding-top: 0.75rem;
    padding-inline: 0.5rem;
  }

  .community-panels {
    height: clamp(46rem, 82svh, 64rem);
  }

  .search-row,
  .creation-grid,
  .stats-panel,
  .section-heading,
  .chat-heading,
  .filter-controls {
    grid-template-columns: 1fr;
  }

  .creation-card {
    grid-template-columns: 1fr;
  }

  .creation-media-shell {
    border-radius: 8px 8px 0 0;
  }

  .creation-media {
    min-height: 0;
  }

  .chat-main {
    min-height: 34rem;
  }

  .hub-mode-switch {
    width: 100%;
    justify-content: center;
  }

  .forum-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    height: auto;
  }

  .forum-post-card {
    grid-template-columns: 1fr;
  }

  .forum-post-head,
  .forum-reply-head {
    align-items: start;
  }

  .forum-reply-card {
    grid-template-columns: 1fr;
  }

  .forum-media-fields {
    grid-template-columns: 1fr;
  }

  .chat-composer-row {
    grid-template-columns: 2.7rem 2.7rem minmax(0, 1fr) auto;
  }

  .forum-post-avatar {
    width: 4rem;
    height: 4rem;
  }

  .member-panel {
    display: none;
  }

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

  .section-heading,
  .chat-heading {
    display: grid;
    align-items: start;
  }

  .home-hot .section-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .home-featured {
    margin-bottom: 0.65rem;
  }

  .home-featured .featured-main {
    min-height: 23rem;
  }

  .feature-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .mini-feature {
    min-height: 9.5rem;
    padding: 0.7rem;
  }

  .mini-feature span,
  .mini-feature .ad-label {
    margin-bottom: 0.25rem;
    font-size: 0.58rem;
  }

  .mini-feature h3 {
    margin: 0 0 0.25rem;
    font-size: 0.78rem;
    line-height: 1.08;
  }

  .mini-feature p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #bcd7ea;
    font-size: 0.63rem;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .mini-feature a {
    align-self: end;
    margin-top: 0.42rem;
    font-size: 0.66rem;
  }

  .home-hot {
    margin-top: 1rem;
    padding-top: 1.35rem;
    padding-bottom: 1.45rem;
  }

  .home-hot + .home-whats-hot {
    margin-top: 0;
    padding-top: 0.85rem;
  }

  .hot-track {
    gap: 0.55rem;
  }

  .hot-card {
    flex-basis: min(44vw, 10.25rem);
    border-radius: 0.65rem;
  }

  .hot-card .creation-media {
    min-height: 4.7rem;
  }

  .hot-card .creation-body {
    gap: 0.24rem;
    padding: 0.5rem;
  }

  .hot-card .creation-card-topline {
    gap: 0.22rem;
  }

  .hot-card .game-icon-flag {
    width: 1.55rem;
    min-width: 1.55rem;
    height: 1.3rem;
    padding: 0.08rem 0.24rem;
  }

  .hot-card .game-icon-flag img {
    width: 0.92rem;
    height: 0.92rem;
  }

  .hot-card .asset-icon-flag {
    width: 1.3rem;
    height: 1.3rem;
  }

  .hot-card .asset-icon-flag .lucide {
    width: 0.72rem;
    height: 0.72rem;
  }

  .hot-card .creator-handle {
    font-size: 0.56rem;
  }

  .hot-card h3 {
    font-size: 0.72rem;
    line-height: 1.08;
  }

  .hot-card p {
    font-size: 0.6rem;
  }

  .hot-rank {
    right: 0.38rem;
    top: -0.7rem;
    min-width: 1.55rem;
    height: 1.55rem;
    font-size: 0.58rem;
  }

  .chat-promo-copy {
    justify-items: center;
    text-align: center;
  }

  .chat-promo-copy h2 {
    max-width: 22rem;
    font-size: clamp(1.55rem, 8vw, 2.05rem);
  }

  .chat-promo-copy > p:not(.eyebrow) {
    max-width: 20rem;
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .chat-promo-actions {
    justify-content: center;
    width: 100%;
  }

  .chat-promo-actions .solid-link {
    width: auto;
    min-height: 2.05rem;
    padding: 0 0.78rem;
    font-size: 0.74rem;
  }

  .home-chat-promo {
    gap: 0.95rem;
    margin-top: 1.1rem;
    padding-top: 1.35rem;
    padding-bottom: 1.6rem;
  }

  .chat-3d-stage {
    width: min(100%, 21rem);
    min-height: 16.8rem;
    margin-top: 1.35rem;
    margin-inline: auto;
    perspective: 900px;
    place-items: center;
  }

  .chat-3d-card {
    width: 100%;
    border-radius: 0.9rem;
    transform: rotateX(5deg) rotateY(-8deg) rotateZ(0.6deg) scale(0.94);
    transform-origin: center top;
  }

  .chat-3d-body {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding: 0.55rem;
  }

  .chat-3d-rooms,
  .chat-3d-online {
    display: none;
  }

  .chat-3d-header,
  .chat-3d-composer {
    gap: 0.45rem;
    padding: 0.55rem;
  }

  .chat-3d-header strong {
    font-size: 0.82rem;
  }

  .chat-3d-header span,
  .chat-3d-toggle {
    font-size: 0.62rem;
  }

  .chat-3d-toggle button {
    min-height: 1.45rem;
    padding: 0 0.45rem;
  }

  .chat-3d-messages,
  .chat-3d-forum-list {
    min-height: 9.5rem;
    gap: 0.45rem;
    padding: 0.48rem;
    border-radius: 0.7rem;
  }

  .chat-3d-message {
    gap: 0.38rem;
  }

  .chat-3d-message img {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.35rem;
  }

  .chat-3d-bubble-content {
    max-width: 12.2rem;
    border-radius: 0.75rem 0.75rem 0.75rem 0.25rem;
    padding: 0.48rem 0.55rem;
    font-size: 0.66rem;
    line-height: 1.25;
  }

  .chat-3d-preview-image {
    height: 3.4rem;
    margin-top: 0.35rem;
    border-radius: 0.5rem;
  }

  .chat-3d-composer span {
    padding: 0.48rem 0.6rem;
    font-size: 0.66rem;
  }

  .chat-3d-composer button {
    padding: 0.48rem 0.65rem;
    font-size: 0.66rem;
  }

  .type-filter {
    grid-template-columns: 1fr;
  }

  .profile-library-storage,
  .asset-browser-tools,
  .my-assets-grid,
  .profile-assets-grid,
  .profile-followed-creators-grid {
    grid-template-columns: 1fr;
  }

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

  .asset-card:has(.asset-audio-preview) {
    grid-column: span 1;
  }

  .asset-login-notice,
  .asset-form-actions,
  .asset-type-rules,
  .asset-choice-buttons,
  .banner-preset-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .asset-login-notice {
    justify-items: start;
  }

  .screen-stage {
    min-height: auto;
  }

  .landscape-screen,
  .portrait-screen {
    transform: none;
  }

  .top-actions button {
    width: auto;
  }

  .search-row button,
  .hero-actions a {
    width: 100%;
  }

  .section-actions,
  .submission-actions {
    justify-content: start;
  }

  h1 {
    font-size: clamp(2.1rem, 16vw, 3.8rem);
  }

  .hero-brand-logo {
    width: min(21rem, 92vw);
  }

  .hero-logo-shell {
    width: min(21rem, 92vw);
  }

  .logo-hero {
    padding-top: 1.25rem;
    padding-bottom: 1rem;
  }

  .logo-hero p:not(.eyebrow) {
    max-width: 20.5rem;
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .hero-soon-pill {
    min-height: 1.2rem;
    padding: 0.04rem 0.42rem 0;
    font-size: 0.58rem;
  }

  .hero-actions {
    gap: 0.42rem;
    margin-top: 0.7rem;
  }

  .logo-hero .hero-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(21rem, 100%);
  }

  .logo-hero .hero-actions a {
    width: auto;
    min-width: 0;
    min-height: 2.05rem;
    padding: 0 0.28rem;
    font-size: 0.62rem;
    white-space: nowrap;
  }

  .hero-actions a {
    min-height: 2.05rem;
    padding: 0 0.6rem;
    font-size: 0.72rem;
  }

  .fairplay-hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .fairplay-agreement {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

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

  .footer-rich {
    margin-top: 1.2rem;
    padding: 0.85rem 0.85rem 1rem;
  }

  .footer-top {
    gap: 0.75rem;
  }

  .footer-brand {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
  }

  .footer-brand .brand-logo {
    width: 7.2rem;
  }

  .footer-brand p {
    font-size: 0.74rem;
    line-height: 1.35;
  }

  .footer-links {
    gap: 0.35rem;
  }

  .footer-link-group {
    border: 1px solid rgba(130, 204, 255, 0.12);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.035);
  }

  .footer-link-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.25rem;
    margin: 0;
    padding: 0 0.72rem;
    font-size: 0.82rem;
    cursor: pointer;
  }

  .footer-link-group summary::after {
    content: "+";
    color: var(--accent);
    font-size: 1rem;
    line-height: 1;
  }

  .footer-link-group[open] summary::after {
    content: "-";
  }

  .footer-link-group a {
    margin: 0;
    padding: 0.38rem 0.72rem;
    font-size: 0.78rem;
  }

  .footer-link-group a:last-child {
    padding-bottom: 0.72rem;
  }

  .footer-bottom {
    gap: 0.35rem;
    margin-top: 0.75rem;
    padding-top: 0.7rem;
    font-size: 0.72rem;
    line-height: 1.35;
  }

  body {
    overflow-x: hidden;
  }

  main.auth-page,
  main.forums-page,
  main[data-phase2-admin] {
    padding-top: 4.3rem !important;
  }

  .workspace,
  .search-panel,
  .search-box,
  .search-row,
  .browse-filter-block,
  .filter-controls,
  .game-toggle-wrap,
  .game-toggle,
  .asset-browser-tools,
  .browse-filter-top,
  .assets-filter-top {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .filter-controls,
  .game-toggle-wrap,
  .game-toggle {
    inline-size: min(100%, calc(100vw - 2.75rem)) !important;
    max-inline-size: calc(100vw - 2.75rem) !important;
    overflow: hidden;
  }

  .game-toggle label {
    min-width: 0;
  }

  .forum-game-toggle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .forum-game-toggle span:not(.forum-game-slider) {
    padding: 0 0.35rem;
    font-size: 0.66rem;
  }

  .forum-game-toggle .game-toggle-icon {
    width: 1.1rem;
    height: 1.1rem;
  }

  .workspace,
  .filter-controls,
  .asset-browser-tools,
  .browse-filter-top,
  .assets-filter-top,
  .search-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .page-header h1,
  .detail-hero h1,
  .profile-hero h1,
  .submit-hero h1,
  .staff-hero h1 {
    width: max-content;
    max-width: calc(100vw - (2 * var(--site-gutter)));
    font-size: clamp(1.35rem, 6.8vw, 2.7rem);
    line-height: 0.98;
    white-space: nowrap;
  }

  .page-header p:not(.eyebrow),
  .detail-hero p:not(.eyebrow),
  .profile-hero p:not(.eyebrow),
  .submit-hero p:not(.eyebrow),
  .staff-hero p:not(.eyebrow) {
    max-width: 21rem;
    font-size: 0.82rem;
    line-height: 1.38;
  }

  .search-panel,
  .stats-panel,
  .staff-panel,
  .moderation-panel,
  .profile-card,
  .auth-card,
  .auth-welcome-panel,
  .detail-summary-card,
  .detail-media-strip,
  .detail-how-to,
  .asset-detail-card,
  .news-card {
    border-radius: 14px;
    padding: 0.82rem;
  }

  .game-toggle {
    min-height: 2.65rem;
  }

  .game-toggle label > span {
    padding: 0 0.35rem;
    font-size: 0.68rem;
  }

  .type-filter {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0.45rem;
    width: calc(100vw - 2.75rem) !important;
    min-inline-size: 0 !important;
    max-inline-size: calc(100vw - 2.75rem) !important;
    overflow-x: auto;
    border-radius: 14px;
    padding: 0.65rem;
    scrollbar-width: none;
  }

  .type-filter::-webkit-scrollbar {
    display: none;
  }

  .type-filter legend {
    width: auto;
    min-width: max-content;
    margin: 0 0.25rem 0 0;
    padding: 0;
    align-self: center;
    font-size: 0.72rem;
  }

  .type-filter label {
    flex: 0 0 auto;
    width: auto;
    min-height: 2rem;
    padding: 0 0.62rem;
    font-size: 0.7rem;
  }

  .filter-strip,
  .tag-row,
  .asset-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
  }

  .creation-grid,
  .asset-grid,
  .my-assets-grid,
  .profile-assets-grid,
  .profile-followed-creators-grid,
  .trending-asset-grid,
  .creator-grid,
  .news-grid,
  .profile-showcase-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .creation-card,
  .asset-card,
  .asset-grid-ad,
  .my-asset-card,
  .profile-submission-card {
    border-radius: 14px;
  }

  .creation-card {
    min-height: 23rem;
  }

  .asset-card,
  .asset-grid-ad {
    min-height: 9.2rem;
  }

  .staff-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: -1.2rem;
  }

  .moderation-toolbar,
  .staff-search-row,
  .moderation-meta-grid,
  .staff-comparison-table,
  .staff-review-card,
  .staff-review-card.asset-review-card,
  .staff-account-head,
  .staff-report-card {
    grid-template-columns: 1fr;
  }

  .cookie-banner {
    grid-template-columns: 1fr;
  }

  .cookie-actions {
    justify-content: stretch;
  }

  .cookie-actions .ghost-button,
  .cookie-actions .solid-button {
    width: 100%;
  }
}

.creation-card,
.asset-card,
.my-asset-card,
.profile-submission-card {
  border-radius: 18px;
}

.creation-media-shell,
.creation-media,
.creation-media-fade,
.asset-preview,
.asset-preview-thumb {
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}

.creation-card .creation-body,
.asset-card-body {
  border-radius: 0 0 18px 18px;
}

html:has(.coming-soon-body) {
  overflow: hidden;
}

.coming-soon-body {
  min-height: 100vh;
  margin: 0;
  width: 100vw;
  overflow: hidden;
  background: #040913;
}

.coming-soon-page {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: clamp(1.2rem, 4vw, 3rem);
  box-sizing: border-box;
}

.coming-soon-bg,
.coming-soon-bg::after,
.coming-soon-bg-frame {
  position: fixed;
  inset: 0;
}

.coming-soon-bg {
  z-index: 0;
  overflow: hidden;
  background: #040913;
}

.coming-soon-bg::after {
  content: "";
  z-index: 8;
  background:
    radial-gradient(circle at 50% 42%, rgba(4, 9, 19, 0.18), rgba(4, 9, 19, 0.78) 72%),
    linear-gradient(180deg, rgba(4, 9, 19, 0.28), rgba(4, 9, 19, 0.82));
}

.coming-soon-bg-frame {
  opacity: 0;
  background-size: cover;
  background-position: center;
  animation: comingSoonBgFlow var(--bg-cycle, 330s) linear infinite;
  animation-delay: var(--bg-delay, -18s);
  transform: scale(1.08);
}

.coming-soon-hero {
  width: min(100%, 72rem);
  color: #fff;
  text-align: center;
}

.coming-soon-stage {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(0.85rem, 2.2vw, 1.35rem);
  transform: translateY(calc(-1 * clamp(2rem, 6vh, 3.4rem)));
}

.coming-soon-logo {
  width: min(38rem, 92vw);
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
  margin-bottom: clamp(0.45rem, 2vw, 0.85rem);
  filter: drop-shadow(0 1.4rem 2.2rem rgba(0, 0, 0, 0.42));
  animation: comingSoonLogoPulse 5.8s ease-in-out infinite;
}

.coming-soon-stage.is-motto-moment .coming-soon-logo {
  animation: comingSoonMottoLogo 12s ease-in-out both;
}

.coming-soon-motto {
  grid-row: 2;
  grid-column: 1;
  justify-self: center;
  display: block;
  width: min(100%, 92rem);
  max-width: none;
  margin: calc(-1 * clamp(0.3rem, 1vw, 0.65rem)) 0 0;
  color: #ffffff;
  font-size: clamp(0.9rem, 2vw, 1.55rem);
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1.18;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 0.35rem 1.6rem rgba(0, 0, 0, 0.62);
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(0.6rem);
}

.coming-soon-stage.is-motto-moment .coming-soon-motto {
  animation: comingSoonMottoFade 12s ease-in-out both;
}

.coming-soon-message-stage {
  grid-row: 2;
  grid-column: 1;
  display: grid;
  place-items: center;
  width: min(100%, 92rem);
  min-height: clamp(2.8rem, 6vw, 4.5rem);
  overflow: hidden;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
  box-sizing: border-box;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.coming-soon-message {
  margin: 0;
  max-width: min(100%, 76rem);
  color: #ffffff;
  font-size: clamp(0.52rem, 1.45vw, 1.38rem);
  font-weight: 950;
  line-height: 1.04;
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: 0 0.3rem 1.8rem rgba(0, 0, 0, 0.62);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-85vw) scale(0.96);
}

.coming-soon-message.is-flying {
  animation: comingSoonTextFly 8.8s cubic-bezier(0.18, 0.76, 0.2, 1) both;
}

.coming-soon-stage.is-motto-moment .coming-soon-message {
  animation: none;
  opacity: 0;
}

.coming-soon-form {
  position: fixed;
  left: 50%;
  bottom: clamp(10rem, 17vh, 12rem);
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  gap: 0.48rem;
  width: min(100%, 27rem);
  margin-top: 0;
}

.coming-soon-form label {
  color: rgba(234, 246, 255, 0.92);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coming-soon-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  min-width: 0;
}

.coming-soon-input-row input {
  min-height: 2.55rem;
  border: 1px solid rgba(234, 246, 255, 0.22);
  border-radius: 14px;
  padding: 0 0.78rem;
  color: #fff;
  background: rgba(4, 9, 19, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.coming-soon-input-row input::placeholder {
  color: rgba(234, 246, 255, 0.46);
}

.coming-soon-input-row .solid-button {
  min-height: 2.55rem;
  padding: 0 0.9rem;
  font-size: 0.72rem;
  white-space: nowrap;
}

.coming-soon-smallprint {
  margin: 0;
  color: rgba(234, 246, 255, 0.64);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.35;
}

.coming-soon-form .form-feedback {
  min-height: 1.2rem;
  margin: 0;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.coming-soon-sound {
  position: static;
  z-index: 3;
  border: 1px solid rgba(234, 246, 255, 0.22);
  border-radius: 999px;
  padding: 0.54rem 0.86rem;
  color: rgba(234, 246, 255, 0.82);
  background: rgba(4, 9, 19, 0.48);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  justify-self: center;
}

.coming-soon-sound.is-playing {
  border-color: rgba(124, 226, 176, 0.42);
  color: #d9ffe9;
}

.coming-soon-legal {
  position: fixed;
  left: 50%;
  bottom: calc(clamp(0.8rem, 2vh, 1.1rem) + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  width: min(100% - 2rem, 48rem);
  margin: 0;
  box-sizing: border-box;
  color: rgba(234, 246, 255, 0.56);
  font-size: 0.66rem;
  font-weight: 750;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  transform: translateX(-50%);
}

.coming-soon-legal p {
  margin: 0;
  white-space: normal;
  overflow-wrap: break-word;
}

.coming-soon-legal p + p {
  margin-top: 0.28rem;
}

.coming-soon-copyright {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
}

.coming-soon-copyright span {
  font-size: 0.84rem;
  line-height: 1;
  opacity: 0.88;
}

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

@keyframes comingSoonLogoPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.055);
  }
}

@keyframes comingSoonMottoLogo {
  0%,
  100% {
    transform: scale(1);
  }
  18%,
  82% {
    transform: scale(1.18);
  }
}

@keyframes comingSoonMottoFade {
  0%,
  12%,
  100% {
    opacity: 0;
    transform: translateY(0.6rem);
  }
  22%,
  82% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes comingSoonBgFlow {
  0% {
    opacity: 0;
    transform: scale(1.08) translate3d(-1.5%, 0, 0);
  }
  4%,
  16% {
    opacity: 1;
  }
  20% {
    opacity: 0;
    transform: scale(1.15) translate3d(1.5%, -1%, 0);
  }
  100% {
    opacity: 0;
    transform: scale(1.08) translate3d(0, 0, 0);
  }
}

@keyframes comingSoonTextFly {
  0% {
    opacity: 0;
    transform: translateX(-85vw) scale(0.96);
  }
  18% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  76% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(85vw) scale(0.98);
  }
}

@media (max-width: 640px) {
  .coming-soon-page {
    padding: 1rem;
  }

  .coming-soon-stage {
    gap: 0.65rem;
    transform: translateY(-8vh);
  }

  .coming-soon-logo {
    width: min(24rem, 70vw);
    margin-bottom: 0.25rem;
  }

  .coming-soon-motto {
    width: min(100%, 92rem);
    max-width: none;
    font-size: clamp(0.55rem, 2.35vw, 0.86rem);
    line-height: 1.2;
  }

  .coming-soon-message {
    font-size: clamp(0.58rem, 2.55vw, 0.92rem);
    max-width: min(100%, 20rem);
    line-height: 1.18;
    white-space: normal;
  }

  .coming-soon-sound {
    padding: 0.42rem 0.68rem;
    font-size: 0.6rem;
  }

  .coming-soon-form {
    bottom: calc(clamp(9.2rem, 16vh, 10.2rem) + env(safe-area-inset-bottom, 0px));
    gap: 0.32rem;
    width: min(calc(100vw - 2rem), 19rem);
  }

  .coming-soon-input-row {
    grid-template-columns: minmax(0, 1fr) minmax(4.8rem, auto);
    gap: 0.32rem;
  }

  .coming-soon-input-row input {
    min-height: 2.15rem;
    border-radius: 11px;
    padding: 0 0.62rem;
    font-size: 0.78rem;
  }

  .coming-soon-input-row .solid-button {
    min-height: 2.15rem;
    min-width: 0;
    padding: 0 0.5rem;
    border-radius: 11px;
    font-size: 0.58rem;
  }

  .coming-soon-message-stage {
    min-height: 3.2rem;
  }

  .coming-soon-smallprint {
    font-size: 0.6rem;
    line-height: 1.35;
  }

  .coming-soon-form .form-feedback {
    min-height: 0.95rem;
    font-size: 0.62rem;
  }

  .coming-soon-legal {
    width: min(100% - 2rem, 24rem);
    font-size: 0.58rem;
    line-height: 1.35;
  }

  .coming-soon-legal p {
    max-width: 19.5rem;
    margin-inline: auto;
  }

  .coming-soon-legal p + p {
    margin-top: 0.14rem;
  }

  .coming-soon-copyright span {
    font-size: 0.72rem;
  }
}

/* Site-wide radius tuning: rounded edges without pill/circle buttons. */
.solid-button,
.ghost-button,
.copy-button,
.solid-link,
.ghost-link,
.compact-link,
.icon-button,
.search-row button,
.mobile-menu a,
.mobile-menu button,
.main-nav a,
.filter-strip button,
.game-toggle,
.game-toggle label,
.type-filter label,
.asset-filter-row label,
.profile-menu-tabs button,
.name-style-option,
.banner-preset,
.safe-ad-hide,
.safe-ad-action,
.ad-label,
.tag,
.status-pill,
.profile-chip,
.member-flag,
.asset-member-flag {
  border-radius: 8px !important;
}

input,
select,
textarea,
.header-search-box,
.header-search-results,
.account-dropdown,
.notification-dropdown,
.mobile-menu,
.cookie-banner,
.state-card,
.profile-card,
.profile-mini-form,
.creation-card,
.asset-card,
.featured-main,
.mini-feature,
.news-card,
.ad-card,
.chat-shell,
.forum-shell,
.forum-topic,
.room-rail,
.stats-panel,
.search-panel,
.search-box,
.creator-feature-large,
.creator-feature-small,
.trending-creator-card,
.wait-modal-card,
.ad-premium-card,
.duplicate-upload-card,
.eligibility-modal-card {
  border-radius: 8px !important;
}

.account-menu-button,
.profile-avatar,
.forum-avatar-wrap,
.chat-avatar-wrap,
.chat-member-avatar,
.chat-mention-avatar,
.detail-avatar-frame,
.notification-dot {
  border-radius: 999px !important;
}

.notification-button {
  border-radius: 8px !important;
}

.account-identity-button {
  border-radius: 8px !important;
}

/* Keep hero titles on one line across page variants. */
.page-header h1,
.logo-hero h1,
.detail-hero h1,
.profile-hero h1,
.submit-hero h1,
.staff-hero h1,
.premium-centered.page-header h1,
.creators-centered.page-header h1,
.legal-page-header h1,
.fairplay-hero h1,
.browse-hero h1,
.assets-hero h1,
.news-hero h1,
.trending-hero h1,
.creator-dashboard-hero h1 {
  width: max-content;
  max-width: calc(100vw - (2 * var(--site-gutter)));
  overflow: hidden;
  font-size: clamp(1.35rem, 6.8vw, 4.5rem);
  line-height: 0.95;
  text-overflow: clip;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}