:root {
  color-scheme: dark;
  --bg: #0c0a12;
  --sidebar: #0f0c15;
  --surface: #15111b;
  --surface-2: #1a1521;
  --elevated: #241b2c;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #f4f6fb;
  --text-soft: #c7cedb;
  --muted: #9399a8;
  --muted-2: #737989;
  --brand-soft: #ff6fc1;
  --brand-hot: #ff3da6;
  --brand-primary: #b02de0;
  --brand-violet: #6d28e8;
  --brand-primary-hover: #8621ad;
  --brand-primary-rgb: 176 45 224;
  --brand-gradient: linear-gradient(135deg, #ff3da6, #b02de0 55%, #6d28e8);
  --brand-action-gradient: linear-gradient(135deg, #a42576, #8621ad 55%, #5020b8);
  --brand-action-gradient-hover: linear-gradient(135deg, #8f1e65, #731c96 55%, #42199a);
  --brand-selected: rgb(var(--brand-primary-rgb) / 0.16);
  --brand-selected-strong: rgb(var(--brand-primary-rgb) / 0.24);
  --brand-border: rgb(var(--brand-primary-rgb) / 0.46);
  --brand-focus: rgba(255, 111, 193, 0.74);
  --accent: var(--brand-primary);
  --accent-soft: var(--brand-soft);
  --live: #ff3b5c;
  --warning: #f5b342;
  --info: #5cd6ef;
  --success: #3fe0bb;
  --danger: #ff6b7a;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display: 800;
  --btn-h-sm: 44px;
  --btn-h-md: 44px;
  --btn-h-lg: 52px;
  --btn-pad-inline-sm: 14px;
  --btn-pad-inline-md: 18px;
  --btn-radius: 12px;
  --btn-icon-size: 18px;
  --btn-icon-gap: 8px;
  --focus-ring-width: 2px;
  --focus-ring-color: #ff7ab7;
  --tab-underline: 2px;
  --chip-h-mobile: 44px;
  --chip-h-desktop: 36px;
  --control-size: 20px;
  --control-tap: 44px;
  --switch-width: 44px;
  --switch-height: 24px;
  --switch-knob: 18px;
  --disabled-opacity: 0.45;
  --transition-control: 140ms ease;
  --nav-selected-tint: rgba(139, 92, 246, 0.14);
  --sidebar-width: 248px;
  --topbar-height: 68px;
  --mobile-nav-height: 72px;
  --radius-sm: 8px;
  --radius-control: 11px;
  --radius-card: 15px;
  --radius-modal: 18px;
  --shadow-card: 0 16px 50px rgba(0, 0, 0, 0.3);
  --cs-ft-surface: #0b0810;
  --cs-ft-hairline: rgba(255, 255, 255, 0.08);
  --cs-ft-divider: rgba(255, 255, 255, 0.07);
  --cs-ft-heading: #e7e1f0;
  --cs-ft-link: #ada4bd;
  --cs-ft-link-hover: #f2eef8;
  --cs-ft-mini: #b3aac2;
  --cs-ft-meta: #8f86a0;
  --cs-ft-a-platform: #ff5aa8;
  --cs-ft-a-legal: #e0409f;
  --cs-ft-a-safety: #a855f7;
  --cs-ft-a-transparency: #c05cf6;
  --cs-ft-focus: #ff5aa8;
  --cs-ft-age-border: rgba(224, 64, 159, 0.4);
  --cs-ft-col-gap: 40px;
  --cs-ft-link-gap: 9px;
  --cs-ft-tap: 44px;
  --cs-ft-header-h: 52px;
  --cs-ft-radius-pill: 999px;
  --cs-ft-motion: 180ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select {
  font-family: var(--font-body);
  font-style: normal;
  font-variant: normal;
}
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
h1, h2, h3, p { margin: 0; }
img, svg { display: block; }
input::placeholder { color: var(--muted); }
input[type="checkbox"] { accent-color: var(--accent); }
::selection { background: rgba(255, 61, 166, 0.38); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #33283c; border-radius: 999px; }

.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 9999;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--brand-action-gradient);
  color: #fff;
  font-weight: var(--fw-semibold);
  transition: transform 150ms ease;
}
.skip-link:focus { transform: none; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.icon { width: 1.2em; height: 1.2em; flex: 0 0 auto; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
  background: var(--sidebar);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.brand {
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 4px 4px 14px;
}
.brand__lockup { width: min(100%, 202px); height: auto; object-fit: contain; }
.brand__symbol { display: none; width: 46px; height: 46px; object-fit: contain; }
.sidebar__nav { display: flex; flex-direction: column; gap: 3px; }
.nav-link, .settings-link {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #8b93a5;
  font-size: 14px;
  font-weight: var(--fw-medium);
  transition: background 150ms ease, color 150ms ease;
}
.nav-link:hover, .settings-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link--active, .settings-link--active { background: rgb(var(--brand-primary-rgb) / 0.16); color: #fff; }
.sidebar__divider { height: 1px; margin: 14px 8px; background: rgba(255, 255, 255, 0.07); }
.sidebar__primary,
.sidebar__bottom { flex: 0 0 auto; min-width: 0; }
.sidebar__live {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 17px;
  overflow: hidden;
}
.sidebar-group--following { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sidebar-group--recommended { flex: 0 0 auto; min-width: 0; }
.sidebar__followed-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #65506f transparent;
}
.sidebar__followed-scroll::-webkit-scrollbar { width: 7px; }
.sidebar__followed-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar__followed-scroll::-webkit-scrollbar-thumb { background: #65506f; border-radius: 999px; }
.sidebar__followed-scroll:focus-visible { border-radius: 8px; outline: 2px solid var(--brand-focus); outline-offset: -2px; }
.sidebar-group__heading {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 0 8px;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.sidebar-group__heading > span { display: flex; align-items: center; gap: 6px; flex: 1; }
.sidebar-group__heading a { color: var(--accent-soft); font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0; text-transform: none; }
.sidebar-empty { padding: 4px 8px; color: var(--muted-2); font-size: 11.5px; }
.creator-row { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 9px; }
.creator-row:hover { background: var(--surface-2); }
.creator-row,
.creator-row > * { min-width: 0; }
.creator-row__main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.creator-row__name { display: flex; align-items: center; gap: 4px; color: var(--text-soft); font-size: 12.5px; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creator-row__meta { color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__bottom { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.balance-link, .creator-tools-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
}
.balance-link__copy { min-width: 0; display: flex; align-items: center; gap: 9px; }
.balance-link__copy > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.balance-link__label { color: var(--text-soft); font-size: 12.5px; font-weight: var(--fw-medium); }
.balance-link__copy small { color: var(--accent-soft); font-size: 9.5px; font-weight: var(--fw-medium); }
.balance-link__amount { flex: 0 0 auto; color: #fff; font-family: var(--font-mono); font-size: 10.5px; white-space: nowrap; }
.balance-link--active { border-color: rgb(var(--brand-primary-rgb) / 0.5); background: rgb(var(--brand-primary-rgb) / 0.12); }
.creator-tools-link { justify-content: flex-start; background: rgb(var(--brand-primary-rgb) / 0.12); border-color: rgb(var(--brand-primary-rgb) / 0.28); color: var(--accent-soft); }

.app-main-column { width: calc(100% - var(--sidebar-width)); min-width: 0; margin-left: var(--sidebar-width); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 150;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 24px;
  background: rgba(12, 10, 18, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mobile-brand { display: none; align-items: center; justify-content: flex-start; width: 96px; height: 44px; flex: 0 0 96px; }
.mobile-brand__lockup { display: block; width: 92px; max-width: 100%; height: 34px; object-fit: contain; object-position: left center; }
.topbar__spacer { flex: 1; }
.search-box {
  position: relative;
  width: min(100%, 470px);
  display: flex;
  align-items: center;
}
.search-box > .icon { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.search-box input {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px 9px 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  outline: none;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13.5px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.search-box input:focus { border-color: rgb(var(--brand-primary-rgb) / 0.72); box-shadow: 0 0 0 3px rgb(var(--brand-primary-rgb) / 0.13); }
.search-box--large { width: 100%; }
.search-box--large input { min-height: 48px; font-size: 14px; }
.desktop-creator-button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 11px;
  border: 1px solid rgba(255, 61, 166, 0.56);
  background: rgba(255, 61, 166, 0.1);
  color: var(--brand-soft);
  font-size: 14px;
  font-weight: var(--fw-medium);
}
.icon-button {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text-soft);
  cursor: pointer;
}
.icon-button:hover { border-color: var(--border-strong); color: #fff; }
.icon-button--primary { background: var(--brand-action-gradient); border-color: var(--brand-border); color: #fff; }
.notification-dot { position: absolute; right: 8px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.viewer-avatar {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.main-content { min-height: calc(100vh - var(--topbar-height)); outline: none; }
.page { width: 100%; max-width: 960px; margin: 0 auto; padding: 24px 24px 72px; }
.page--wide { max-width: 1500px; }
.page--medium { max-width: 940px; }
.page--narrow { max-width: 720px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.page-heading h1 { font-family: var(--font-display); font-size: 34px; font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: -0.02em; }
.page-heading p { max-width: 720px; margin-top: 7px; color: var(--muted); font-size: 16px; font-weight: var(--fw-regular); line-height: 1.55; }
.creator-account-page { padding-top: 48px; }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.page-intro--stacked { display: block; }
.page-intro h1 { font-family: var(--font-display); font-size: 34px; font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: -0.02em; }
.page-intro p { max-width: 720px; margin-top: 7px; color: var(--muted); font-size: 16px; font-weight: var(--fw-regular); line-height: 1.55; }
.eyebrow { margin-bottom: 6px; color: var(--muted); font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; }

.content-section { margin-top: 30px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-heading h2 { font-family: var(--font-display); font-size: 20px; font-weight: var(--fw-semibold); line-height: 1.2; letter-spacing: -0.01em; }
.text-action { min-height: 44px; display: inline-flex; align-items: center; gap: 5px; color: var(--accent-soft); font-size: 13.5px; font-weight: var(--fw-medium); }
.text-action .icon { width: 15px; height: 15px; }
.button {
  min-height: var(--btn-h-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-icon-gap);
  padding: 9px var(--btn-pad-inline-md);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1;
  transition: background var(--transition-control), border-color var(--transition-control), color var(--transition-control), filter var(--transition-control), transform var(--transition-control);
  cursor: pointer;
}
.button--small { min-height: var(--btn-h-sm); padding: 7px var(--btn-pad-inline-sm); font-size: 13px; }
.button--compact { min-height: var(--btn-h-sm); padding: 6px var(--btn-pad-inline-sm); font-size: 13px; }
.button--primary { background: var(--brand-action-gradient); border-color: var(--brand-border); color: #fff; font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: .005em; box-shadow: 0 8px 24px rgb(var(--brand-primary-rgb) / .18); }
.button--primary:hover, .desktop-creator-button:hover, .icon-button--primary:hover { background: var(--brand-action-gradient-hover); }
.button--ghost { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-soft); font-size: 14px; font-weight: var(--fw-medium); }
.button--live { background: var(--live); color: #fff; font-size: 14px; font-weight: var(--fw-semibold); }
.button--warning { background: rgba(245, 179, 66, 0.08); border-color: rgba(245, 179, 66, 0.56); color: var(--warning); font-size: 14px; font-weight: var(--fw-semibold); }

.stream-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.stream-grid--featured { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.live-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.live-card:hover { transform: translateY(-3px); border-color: rgb(var(--brand-primary-rgb) / 0.38); box-shadow: var(--shadow-card); }
.live-card__media { position: relative; aspect-ratio: 16 / 9; display: block; overflow: hidden; }
.live-card__media::after, .reel-card__media::after, .profile-cover::after, .live-player::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(115deg, transparent 0 50%, rgba(255,255,255,0.025) 50% 53%, transparent 53% 100%);
  background-size: 26px 26px;
  pointer-events: none;
}
.tone-violet { background: radial-gradient(circle at 75% 18%, rgb(var(--brand-primary-rgb) / .42), transparent 34%), linear-gradient(135deg, #20233b, #11151e 62%); }
.tone-rose { background: radial-gradient(circle at 78% 14%, rgba(246,65,125,.38), transparent 35%), linear-gradient(135deg, #34202c, #11151e 65%); }
.tone-cyan { background: radial-gradient(circle at 75% 16%, rgba(92,214,239,.36), transparent 35%), linear-gradient(135deg, #17313a, #11151e 65%); }
.tone-amber { background: radial-gradient(circle at 75% 16%, rgba(245,179,66,.38), transparent 35%), linear-gradient(135deg, #372c1a, #11151e 65%); }
.tone-teal { background: radial-gradient(circle at 75% 16%, rgba(63,224,187,.34), transparent 35%), linear-gradient(135deg, #17342f, #11151e 65%); }
.tone-indigo { background: radial-gradient(circle at 75% 16%, rgba(90,86,220,.42), transparent 35%), linear-gradient(135deg, #222348, #11151e 65%); }
.live-badge, .viewer-badge, .placement-badge, .rank-badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 9.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.live-badge { left: 9px; top: 9px; background: var(--live); color: #fff; }
.viewer-badge { right: 9px; top: 9px; background: rgba(0,0,0,.56); color: #fff; font-family: var(--font-mono); }
.viewer-badge .icon { width: 13px; height: 13px; }
.placement-badge { bottom: 9px; right: 9px; }
.placement-badge--featured { background: var(--brand-primary-hover); color: #fff; }
.placement-badge--promoted { background: var(--warning); color: #1a1200; }
.rank-badge { left: 9px; top: 9px; background: var(--brand-primary-hover); color: #fff; }
.media-watermark { position: absolute; z-index: 1; left: 10px; bottom: 9px; padding: 3px 7px; border-radius: 6px; background: rgba(0,0,0,.36); color: rgba(255,255,255,.62); font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.media-play { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.82); opacity: 0; transform: scale(.92); transition: opacity 160ms ease, transform 160ms ease; }
.media-play .icon { width: 46px; height: 46px; padding: 12px; border-radius: 50%; background: rgba(0,0,0,.45); }
.live-card:hover .media-play, .reel-card:hover .media-play { opacity: 1; transform: scale(1); }
.live-card__body { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px 12px; }
.live-card__copy { min-width: 0; flex: 1; }
.live-card__title { display: block; color: var(--text); font-size: 13px; font-weight: var(--fw-semibold); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creator-link { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin-top: 4px; color: var(--text-soft); font-size: 12px; font-weight: var(--fw-semibold); }
.live-card__meta { margin-top: 3px; color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, #2a3346, #1a2130); color: var(--text-soft); font-weight: var(--fw-semibold); }
.avatar--xxs { width: 24px; height: 24px; font-size: 8px; }
.avatar--xs { width: 32px; height: 32px; font-size: 10px; }
.avatar--sm { width: 34px; height: 34px; font-size: 11px; }
.avatar--lg { width: 64px; height: 64px; margin: 0 auto; font-size: 18px; }
.avatar--xl { width: 76px; height: 76px; font-size: 22px; }
.avatar--profile { width: 110px; height: 110px; border: 4px solid var(--bg); font-size: 30px; box-shadow: 0 12px 36px rgba(0,0,0,.48); }
.avatar--live { box-shadow: 0 0 0 2px var(--live); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: live-pulse 1.6s ease infinite; }
.verified-badge { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--brand-primary-hover); color: #fff; }
.verified-badge .icon { width: 10px; height: 10px; stroke-width: 2.7; }

.reel-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.reel-grid--large { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.reel-card { min-width: 0; }
.reel-card__media { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; }
.media-play--portrait .icon { width: 48px; height: 48px; }
.reel-card__caption { position: absolute; z-index: 2; left: 9px; right: 9px; bottom: 10px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: #fff; font-size: 10.5px; font-weight: var(--fw-medium); line-height: 1.35; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.reel-card__creator { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--text-soft); font-size: 11px; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.soon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.soon-card { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.soon-card__icon, .notification-row__icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: rgb(var(--brand-primary-rgb) / .12); color: var(--accent-soft); }
.soon-card__copy { min-width: 0; flex: 1; }
.soon-card h3 { margin-top: 7px; color: var(--text); font-size: 13px; line-height: 1.35; }
.soon-card a { display: inline-block; margin-top: 4px; color: var(--accent-soft); font-size: 11.5px; font-weight: var(--fw-semibold); }
.soon-card p { margin-top: 3px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }

.challenge-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.challenge-card { padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.challenge-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.challenge-card h3 { min-height: 58px; font-size: 14px; line-height: 1.4; }
.challenge-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10.5px; }
.challenge-card__footer > span { display: inline-flex; align-items: center; gap: 5px; }
.status-chip { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; border-radius: 7px; font-size: 9.5px; font-weight: var(--fw-semibold); letter-spacing: .03em; text-transform: uppercase; }
.status-chip--violet { background: rgb(var(--brand-primary-rgb) / .15); color: var(--accent-soft); }
.status-chip--muted { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.status-chip--info { background: rgba(92,214,239,.12); color: var(--info); }
.status-chip--warning { background: rgba(245,179,66,.14); color: var(--warning); }

.creator-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.creator-card { min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); text-align: center; }
.creator-card__name { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 10px; font-size: 13px; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creator-card__meta { min-height: 34px; margin: 4px 0 10px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.creator-card .button { width: 100%; }

.discovery-panel { padding: 17px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.filter-group { margin-top: 15px; }
.filter-group__label { margin-bottom: 7px; color: var(--muted); font-family: var(--font-mono); font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; }
.filter-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-pill { flex: 0 0 auto; min-height: 36px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: #8b93a5; font-size: 13px; font-weight: var(--fw-medium); cursor: pointer; }
.filter-pill--active { border-color: var(--accent); background: rgb(var(--brand-primary-rgb) / .17); color: #fff; }
.filter-summary { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-top: 14px; color: var(--text-soft); font-size: 12px; }
.filter-summary > span { display: inline-flex; align-items: center; gap: 6px; }
.filter-summary .text-action { margin-left: auto; border: 0; background: transparent; cursor: pointer; }
.filter-note { margin-top: 7px; color: var(--muted-2); font-size: 10.5px; line-height: 1.45; }
.chip-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.niche-chip { min-height: 36px; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-soft); font-size: 13px; font-weight: var(--fw-medium); cursor: pointer; }
.niche-chip:hover { border-color: rgb(var(--brand-primary-rgb) / .52); color: #fff; }
.niche-chip--static { cursor: default; }

.empty-state { display: grid; place-items: center; min-height: 250px; padding: 32px 20px; border: 1px dashed var(--border-strong); border-radius: 16px; color: var(--muted); text-align: center; }
.empty-state > div:first-child { margin-bottom: 8px; color: var(--accent-soft); }
.empty-state > div:first-child .icon { width: 34px; height: 34px; }
.empty-state h3 { color: var(--text); font-size: 16px; }
.empty-state p { margin: 6px 0 14px; font-size: 12.5px; }
.empty-state--compact { min-height: 120px; }

.notice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; margin: 15px 0; border: 1px solid var(--border); border-radius: 12px; color: var(--text-soft); font-size: 12px; line-height: 1.5; }
.notice--warning { background: rgba(245,179,66,.08); border-color: rgba(245,179,66,.22); }
.notice--warning > .icon { color: var(--warning); }
.notice--info { background: rgba(92,214,239,.07); border-color: rgba(92,214,239,.2); }
.notice--info > .icon { color: var(--info); }

.profile-cover { position: relative; height: 215px; overflow: hidden; }
.profile-cover > span { position: absolute; left: 22px; top: 18px; z-index: 2; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.35); color: rgba(255,255,255,.55); font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.profile-container { max-width: 1180px; margin: 0 auto; padding: 0 24px 80px; }
.profile-header { position: relative; display: flex; align-items: flex-end; gap: 17px; margin-top: -55px; }
.profile-header__identity { min-width: 0; flex: 1; padding-bottom: 6px; }
.profile-header__name { display: flex; align-items: center; gap: 8px; }
.profile-header__name h1 { font-family: var(--font-display); font-size: 28px; }
.profile-header__identity p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.profile-header__actions { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }
.profile-stats { display: flex; align-items: baseline; gap: 6px; margin-top: 19px; color: var(--muted); font-size: 12px; }
.profile-stats strong { color: var(--text); font-family: var(--font-mono); font-size: 15px; }
.profile-stat-separator { width: 1px; height: 16px; margin: 0 10px; background: var(--border); }
.profile-bio { max-width: 720px; margin: 14px 0 12px; color: var(--text-soft); font-size: 13.5px; line-height: 1.65; }
.profile-tabs { display: flex; gap: 3px; overflow-x: auto; margin-top: 22px; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab { flex: 0 0 auto; padding: 12px 15px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #8b93a5; font-size: 14px; font-weight: var(--fw-medium); cursor: pointer; }
.profile-tab--active { border-color: var(--accent); color: #fff; }
.profile-home-content { padding-top: 2px; }
.supporter-wall-preview { padding: 17px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.top-contributor-card { display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px solid rgba(245,179,66,.24); border-radius: 13px; background: linear-gradient(120deg, rgba(245,179,66,.13), rgb(var(--brand-primary-rgb) / .05)); }
.top-contributor-card__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: rgba(245,179,66,.14); color: var(--warning); }
.top-contributor-card h3 { font-size: 14px; }
.top-contributor-card p { margin-top: 2px; color: var(--muted); font-size: 11px; }
.top-contributor-card > .status-chip { margin-left: auto; }
.wall-message { display: flex; gap: 11px; padding: 14px; margin-top: 10px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.wall-message--pinned { border-color: rgb(var(--brand-primary-rgb) / .25); background: rgb(var(--brand-primary-rgb) / .07); }
.wall-message__header { display: flex; align-items: center; gap: 7px; }
.wall-message__header time { margin-left: auto; color: var(--muted-2); font-size: 10px; }
.wall-message p { margin-top: 5px; color: var(--text-soft); font-size: 12.5px; line-height: 1.5; }
.wall-message__ack { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; color: var(--live); font-size: 10.5px; }
.supporter-wall-preview__actions { display: flex; gap: 9px; margin-top: 12px; }

.notification-list { display: flex; flex-direction: column; gap: 8px; }
.notification-row { display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.notification-row > div:nth-child(2) { min-width: 0; flex: 1; }
.notification-row h3 { font-size: 13px; }
.notification-row p { margin-top: 3px; color: var(--text-soft); font-size: 12px; }
.notification-row time { color: var(--muted-2); font-size: 10.5px; }

.balance-card { display: flex; align-items: center; justify-content: space-between; padding: 20px; border: 1px solid rgb(var(--brand-primary-rgb) / .28); border-radius: 17px; background: linear-gradient(135deg, rgb(var(--brand-primary-rgb) / .17), rgb(var(--brand-primary-rgb) / .04)); }
.balance-card strong { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 38px; }
.balance-card p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.balance-card__icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: rgb(var(--brand-primary-rgb) / .17); color: var(--accent-soft); }
.balance-card__icon .icon { width: 28px; height: 28px; }
.funding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.funding-card { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.funding-card > div { flex: 1; }
.funding-card h3 { font-size: 13px; }
.funding-card p { margin-top: 3px; color: var(--muted); font-size: 11px; }
.funding-card__mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(245,179,66,.13); color: var(--warning); font-family: var(--font-mono); font-size: 19px; font-weight: var(--fw-semibold); }
.transaction-list { display: flex; flex-direction: column; gap: 8px; }
.transaction-list article { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.transaction-list article > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgb(var(--brand-primary-rgb) / .1); color: var(--accent-soft); }
.transaction-list article > div { min-width: 0; flex: 1; }
.transaction-list h3 { font-size: 12.5px; }
.transaction-list p { margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.transaction-list strong { font-family: var(--font-mono); font-size: 13px; }

.settings-list { display: flex; flex-direction: column; gap: 8px; }
.settings-list label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.settings-list label > span { display: flex; align-items: center; gap: 12px; }
.settings-list strong { display: block; font-size: 13px; }
.settings-list small { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.creator-access-card { display: flex; align-items: center; gap: 14px; padding: 17px; margin-top: 18px; border: 1px solid rgb(var(--brand-primary-rgb) / .3); border-radius: 15px; background: rgb(var(--brand-primary-rgb) / .08); }
.creator-access-card__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: rgb(var(--brand-primary-rgb) / .15); color: var(--accent-soft); }
.creator-access-card > div:nth-child(2) { min-width: 0; flex: 1; }
.creator-access-card h2 { font-size: 16px; }
.creator-access-card p { margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }

.creator-tools-summary { display: flex; align-items: center; gap: 15px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.creator-tools-summary > div:nth-child(2) { min-width: 0; flex: 1; }
.creator-tools-summary h2 { font-size: 18px; }
.creator-tools-summary p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.creator-tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.creator-tool-card { display: flex; align-items: flex-start; gap: 13px; min-height: 126px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.creator-tool-card > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: rgb(var(--brand-primary-rgb) / .11); color: var(--accent-soft); }
.creator-tool-card > div { min-width: 0; flex: 1; }
.creator-tool-card h3 { font-size: 13.5px; }
.creator-tool-card p { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.creator-tool-card > .icon:last-child { margin-top: 9px; color: var(--muted-2); }

.live-room { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: calc(100vh - var(--topbar-height)); }
.live-room__stage { min-width: 0; padding: 16px; overflow-y: auto; }
.live-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; }
.live-player__center { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 9px; color: rgba(255,255,255,.62); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.live-player__center .icon { width: 56px; height: 56px; padding: 16px; border-radius: 50%; background: rgba(0,0,0,.4); }
.live-room__details { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; }
.live-room__details h1 { font-family: var(--font-display); font-size: 20px; }
.live-room__details a { display: inline-block; margin-top: 5px; color: var(--accent-soft); font-size: 12px; font-weight: var(--fw-semibold); }
.live-room__actions { display: flex; gap: 8px; }
.chat-panel { min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--sidebar); }
.chat-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 14px; border-bottom: 1px solid var(--border); }
.chat-panel__header h2 { font-size: 16px; }
.chat-messages { flex: 1; padding: 14px; overflow-y: auto; }
.chat-messages p { margin-bottom: 11px; color: var(--text-soft); font-size: 12.5px; line-height: 1.45; }
.chat-user { color: var(--accent-soft); }
.chat-user--mod { color: var(--success); }
.chat-user--supporter { color: var(--warning); }
.chat-composer { display: flex; gap: 8px; padding: 11px; border-top: 1px solid var(--border); }
.chat-composer input { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; outline: none; background: var(--surface-2); color: var(--text); }

.mobile-nav, .mobile-brand { display: none; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 600; display: flex; align-items: flex-end; background: rgba(5,7,11,.72); backdrop-filter: blur(5px); }
.mobile-sheet { width: 100%; padding: 10px 14px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-strong); border-radius: 20px 20px 0 0; background: var(--surface); box-shadow: 0 -22px 60px rgba(0,0,0,.5); }
.mobile-sheet__handle { width: 38px; height: 4px; margin: 4px auto 13px; border-radius: 999px; background: rgba(255,255,255,.18); }
.mobile-sheet__header { display: flex; align-items: center; justify-content: space-between; }
.mobile-sheet__header h2 { font-size: 18px; }
.mobile-sheet__nav { display: flex; flex-direction: column; margin-top: 8px; }
.mobile-sheet__nav a { display: grid; grid-template-columns: 24px 1fr 20px; align-items: center; gap: 12px; min-height: 52px; padding: 10px; border-radius: 12px; color: var(--text-soft); font-size: 14px; font-weight: var(--fw-medium); }
.mobile-sheet__nav a:hover { background: var(--elevated); }
.mobile-sheet__nav a > .icon:first-child { color: var(--accent-soft); }
.mobile-sheet__nav a > .icon:last-child { color: var(--muted-2); }
.toast-region { position: fixed; z-index: 900; left: 50%; bottom: 26px; transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 9px; max-width: min(90vw, 480px); padding: 11px 15px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--elevated); box-shadow: 0 16px 44px rgba(0,0,0,.5); color: var(--text); font-size: 12.5px; font-weight: var(--fw-semibold); animation: toast-in 180ms ease both; }
.toast > span:first-child { color: var(--success); }

:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 2px; }
@keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .32; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (min-width: 1540px) {
  .stream-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .reel-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
  .stream-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reel-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .reel-grid--large { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .soon-grid, .challenge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .creator-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  :root { --sidebar-width: 74px; }
  .sidebar { align-items: center; padding-inline: 10px; }
  .sidebar__primary { width: 100%; }
  .brand { justify-content: center; padding-inline: 0; }
  .brand__lockup, .nav-link span, .sidebar__live, .balance-link span, .balance-link strong, .creator-tools-link span, .settings-link span { display: none; }
  .brand__symbol { display: block; }
  .sidebar__nav { width: 100%; }
  .nav-link, .settings-link { justify-content: center; min-height: 48px; padding: 0; }
  .nav-link .icon, .settings-link .icon { width: 22px; height: 22px; }
  .sidebar__divider { width: 42px; }
  .sidebar__bottom { width: 100%; margin-top: auto; }
  .balance-link, .creator-tools-link { justify-content: center; min-height: 48px; padding: 0; }
  .stream-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reel-grid, .reel-grid--large { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .soon-grid, .challenge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .creator-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-room { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 767px) {
  :root { --topbar-height: 62px; }
  .sidebar { display: none; }
  .app-main-column { width: 100%; margin-left: 0; }
  .topbar { height: var(--topbar-height); padding: 10px 14px; }
  .mobile-brand { display: flex; }
  .topbar > .search-box, .desktop-creator-button, .viewer-avatar { display: none; }
  .topbar__spacer { flex: 1; }
  .main-content { padding-bottom: var(--mobile-nav-height); }
  .page { padding: 19px 15px 48px; }
  .profile-container { padding-inline: 15px; padding-bottom: 55px; }
  .page-intro { align-items: flex-start; flex-direction: column; margin-bottom: 20px; }
  .page-intro h1 { font-size: 26px; }
  .content-section { margin-top: 25px; }
  .section-heading { align-items: center; }
  .section-heading h2 { font-size: 17px; }
  .stream-grid, .stream-grid--featured { grid-template-columns: 1fr; gap: 12px; }
  .live-card__title { font-size: 13.5px; }
  .reel-grid, .reel-grid--large { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .soon-grid, .challenge-grid, .funding-grid, .creator-tools-grid { grid-template-columns: 1fr; }
  .creator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-summary { align-items: flex-start; flex-direction: column; gap: 7px; }
  .filter-summary .text-action { margin-left: 0; }
  .discovery-panel { padding: 14px; }
  .profile-cover { height: 160px; }
  .profile-header { align-items: flex-start; flex-wrap: wrap; margin-top: -42px; }
  .avatar--profile { width: 86px; height: 86px; font-size: 24px; }
  .profile-header__identity { padding-top: 45px; }
  .profile-header__name h1 { font-size: 22px; }
  .profile-header__actions { width: 100%; padding: 0; }
  .profile-header__actions .button { flex: 1; }
  .profile-stats { flex-wrap: wrap; }
  .supporter-wall-preview__actions { flex-direction: column; }
  .creator-tools-summary { align-items: flex-start; flex-wrap: wrap; }
  .creator-tools-summary .button { width: 100%; }
  .live-room { display: block; }
  .live-room__stage { padding: 0 0 14px; }
  .live-player { border-radius: 0; border-inline: 0; }
  .live-room__details { align-items: flex-start; flex-direction: column; padding: 13px 15px; }
  .live-room__actions { width: 100%; }
  .live-room__actions .button { flex: 1; }
  .live-room__stage > .notice { margin-inline: 15px; }
  .chat-panel { min-height: 430px; border-top: 1px solid var(--border); border-left: 0; }
  .mobile-nav {
    position: fixed;
    z-index: 500;
    inset: auto 0 0;
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: start;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: rgba(15,12,21,.96);
    backdrop-filter: blur(16px);
  }
  .mobile-nav__link { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 3px 1px; border: 0; background: transparent; color: #727c90; font-size: 11px; font-weight: var(--fw-medium); cursor: pointer; }
  .mobile-nav__link .icon { width: 21px; height: 21px; }
  .mobile-nav__link--active { color: var(--accent-soft); }
  .toast-region { bottom: calc(var(--mobile-nav-height) + 18px); }
}

@media (max-width: 420px) {
  .reel-grid, .reel-grid--large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-card { padding: 12px 9px; }
  .avatar--lg { width: 56px; height: 56px; }
  .challenge-card__footer { align-items: flex-start; flex-direction: column; }
  .top-contributor-card { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

/* Frontend R2 complete-page extensions */
button { border: 0; background: none; cursor: pointer; }
textarea, select, input { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: var(--radius-control); outline: none; }
textarea:focus, select:focus, input:focus { border-color: rgb(var(--brand-primary-rgb) / .72); box-shadow: 0 0 0 3px rgb(var(--brand-primary-rgb) / .13); }
textarea { resize: vertical; }
select { color-scheme: dark; }
hr { width: 100%; height: 1px; margin: 20px 0; border: 0; background: var(--border); }

.button--wide, .button--full { width: 100%; }
.button--large { min-height: 56px; font-size: 15px; }
.button--danger { border-color: rgba(255,122,162,.3); background: rgba(246,65,125,.11); color: var(--danger); }
.button--disabled { border-color: transparent; background: #242c39; color: #657084; cursor: not-allowed; }
.text-button { min-height: 40px; color: var(--text-soft); font-weight: var(--fw-medium); }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.panel { padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.panel > h2 { margin-bottom: 10px; font-family: var(--font-display); font-size: 18px; }
.panel > h3 { margin: 18px 0 8px; font-size: 14px; }
.panel > p { color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.panel-heading > div:first-child { display: flex; align-items: center; gap: 10px; }
.panel-heading h2 { font-family: var(--font-display); font-size: 18px; }
.notice--success { border-color: rgba(63,224,187,.25); background: rgba(63,224,187,.09); color: var(--text-soft); }
.notice--danger { border-color: rgba(246,65,125,.28); background: rgba(246,65,125,.1); color: #ffd6e3; }
.notice--muted { border-color: var(--border); background: var(--surface-2); color: var(--muted); }
.notice button { margin-left: auto; color: var(--accent-soft); font-weight: var(--fw-semibold); }
.status-chip--success { background: rgba(63,224,187,.13); color: var(--success); }
.status-chip--danger { background: rgba(246,65,125,.13); color: var(--danger); }
.status-chip .icon { width: 13px; height: 13px; }
.small-copy, .fine-print, .legal-note { color: var(--muted-2); font-size: 11px; line-height: 1.55; }
.legal-note { margin-top: 12px; text-align: center; }

.hero-strip { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; padding: 24px; border: 1px solid rgb(var(--brand-primary-rgb) / .24); border-radius: 18px; background: radial-gradient(circle at 100% 0, rgb(var(--brand-primary-rgb) / .22), transparent 42%), var(--surface); }
.hero-strip h1 { max-width: 760px; font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 42px); line-height: 1.05; letter-spacing: -.035em; }
.hero-strip p { max-width: 780px; margin-top: 9px; color: var(--text-soft); font-size: 14px; line-height: 1.6; }
.hero-strip__actions { display: flex; flex: 0 0 auto; gap: 9px; }
.empty-inline { display: flex; align-items: center; gap: 14px; padding: 17px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.empty-inline > .icon { width: 24px; height: 24px; color: var(--accent-soft); }
.empty-inline > div { flex: 1; }
.empty-inline strong, .empty-inline span { display: block; }
.empty-inline span { margin-top: 3px; color: var(--muted); font-size: 12px; }

.live-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.live-grid--featured { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.live-grid--directory { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.live-card--compact .live-card__body { padding: 9px 10px 10px; }
.challenge-badge { position: absolute; left: 9px; bottom: 9px; z-index: 3; padding: 3px 7px; border: 1px solid rgba(63,224,187,.35); border-radius: 6px; background: rgba(6,24,21,.85); color: var(--success); font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: .035em; text-transform: uppercase; }
.soon-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.soon-card > .icon-button { width: 38px; height: 38px; }
.load-more { display: flex; justify-content: center; margin-top: 18px; }
.challenge-grid--directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.challenge-card p { margin-top: 7px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.challenge-card .creator-link { margin-top: 10px; }

.filter-panel { margin-top: 16px; padding: 17px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.filter-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 12px; }
.filter-row__label { color: var(--muted); font-family: var(--font-mono); font-size: 9.5px; font-weight: var(--fw-semibold); letter-spacing: .11em; text-transform: uppercase; }
.segmented-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.segmented-row::-webkit-scrollbar { display: none; }
.segmented-row--wrap { flex-wrap: wrap; }
.segment { flex: 0 0 auto; min-height: 37px; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: #929bad; font-size: 12px; font-weight: var(--fw-semibold); }
.segment:hover { color: var(--text); border-color: var(--border-strong); }
.segment--active { border-color: var(--accent); background: rgb(var(--brand-primary-rgb) / .18); color: #fff; }
.filter-summary { display: flex; align-items: center; gap: 9px; margin-top: 8px; color: var(--text-soft); font-size: 12px; }
.filter-summary span { display: inline-flex; align-items: center; gap: 6px; }
.filter-summary button { color: var(--accent-soft); font-size: 12px; font-weight: var(--fw-semibold); }
.filter-note { margin-top: 8px; color: var(--muted-2); font-size: 10.5px; line-height: 1.55; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-soft); font-size: 13px; font-weight: var(--fw-medium); }
.filter-chip--active { border-color: var(--accent); background: rgb(var(--brand-primary-rgb) / .17); color: var(--accent-soft); }

.account-menu { position: absolute; right: 22px; top: 58px; z-index: 450; width: 260px; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.account-menu__identity { display: flex; align-items: center; gap: 10px; padding: 15px; border-bottom: 1px solid var(--border); }
.account-menu__identity strong, .account-menu__identity span { display: block; }
.account-menu__identity span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.account-menu a, .account-menu button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; color: var(--text-soft); font-size: 12.5px; font-weight: var(--fw-semibold); text-align: left; }
.account-menu a:hover, .account-menu button:hover { background: var(--surface-2); color: #fff; }
.creator-tools-link--active { border-color: rgb(var(--brand-primary-rgb) / .55); background: rgb(var(--brand-primary-rgb) / .22); }

/* Profile */
.profile-page { min-height: calc(100vh - var(--topbar-height)); }
.profile-cover { height: 230px; }
.profile-cover__label { position: absolute; left: 24px; top: 18px; z-index: 2; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.38); color: rgba(255,255,255,.63); font-family: var(--font-mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.profile-live-badge { position: absolute; right: 22px; top: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 7px; background: var(--live); color: #fff; font-size: 10.5px; font-weight: var(--fw-semibold); }
.profile-wrap { width: min(1120px, calc(100% - 42px)); margin: 0 auto; padding-bottom: 68px; }
.profile-header { align-items: flex-end; }
.profile-header__identity { min-width: 220px; }
.profile-title { display: flex; align-items: center; gap: 8px; }
.profile-title h1 { font-family: var(--font-display); font-size: 28px; }
.profile-header__actions { flex-wrap: wrap; }
.avatar--md { width: 44px; height: 44px; }
.profile-stats { display: flex; gap: 22px; margin-top: 17px; color: var(--muted); font-size: 12px; }
.profile-stats strong { margin-right: 4px; color: var(--text); font-family: var(--font-mono); font-size: 14px; }
.profile-bio { max-width: 720px; margin-top: 12px; color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.tag { padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-soft); font-size: 10.5px; font-weight: var(--fw-medium); }
.tag--primary { border-color: rgb(var(--brand-primary-rgb) / .38); background: rgb(var(--brand-primary-rgb) / .13); color: var(--accent-soft); }
.profile-content { padding-top: 22px; }
.profile-live-feature { display: grid; grid-template-columns: 220px 1fr 26px; gap: 18px; align-items: center; padding: 14px; border: 1px solid rgba(246,65,125,.28); border-radius: 15px; background: linear-gradient(100deg, rgba(246,65,125,.13), rgba(246,65,125,.025)); }
.profile-live-feature h2 { margin: 9px 0 5px; font-family: var(--font-display); font-size: 18px; }
.profile-live-feature p { color: var(--muted); font-size: 12px; }
.media-panel { aspect-ratio: 16/9; display: grid; place-items: center; align-content: center; gap: 6px; border-radius: 11px; color: rgba(255,255,255,.7); font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; }
.media-panel .icon { width: 28px; height: 28px; }
.profile-section { margin-top: 26px; }
.about-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr); gap: 16px; }
.social-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.social-list button { display: grid; grid-template-columns: 22px 1fr 18px; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); text-align: left; }
.social-list button span strong, .social-list button span small { display: block; }
.social-list button span small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.media-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.media-tile { overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.media-tile__visual { aspect-ratio: 1/1; display: grid; place-items: center; align-content: center; gap: 7px; color: rgba(255,255,255,.65); font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
.media-tile > div:last-child { padding: 12px; }
.media-tile h3 { font-size: 13px; }
.media-tile p { margin: 4px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.media-tile span { color: var(--muted-2); font-size: 10px; }
.wall-preview { padding: 17px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.wall-page-section { max-width: 860px; }
.page-intro--compact { margin-bottom: 16px; }
.top-contributor { margin-bottom: 15px; padding: 17px; border: 1px solid rgba(245,179,66,.28); border-radius: 15px; background: linear-gradient(120deg, rgba(245,179,66,.12), rgb(var(--brand-primary-rgb) / .035)); }
.top-contributor h3 { font-family: var(--font-display); font-size: 17px; }
.top-contributor > p { margin-top: 10px; color: var(--muted); font-size: 10.5px; }
.contributor-list { display: flex; flex-direction: column; gap: 7px; }
.contributor-row { display: grid; grid-template-columns: 24px 34px 1fr auto; align-items: center; gap: 10px; }
.contributor-row > span:last-child { color: var(--warning); font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold); text-align:right; }
.contributor-row > span:last-child small { display:block; margin-top:2px; color:var(--muted); font-size:8.5px; }
.rank-medal { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #9b7440; color: #160f05; font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-semibold); }
.rank-medal--1 { background: var(--warning); }
.rank-medal--2 { background: #c7cedb; }
.wall-feed { display: flex; flex-direction: column; gap: 9px; }
.wall-message { margin: 0; }
.wall-message__body { flex: 1; min-width: 0; }
.wall-message__header strong { font-size: 12.5px; }
.wall-message__amount { color: var(--warning); font-family: var(--font-mono); font-size: 10.5px; font-weight: var(--fw-semibold); }
.wall-message__footer { display: flex; align-items: center; gap: 14px; margin-top: 8px; color: var(--muted); font-size: 10.5px; }
.wall-message__footer span, .wall-message__footer button { display: inline-flex; align-items: center; gap: 5px; color: inherit; font-size: inherit; }
.mini-label { display: inline-flex; align-items: center; gap: 3px; color: var(--accent-soft); font-size: 9px; font-weight: var(--fw-semibold); text-transform: uppercase; }

/* Reels */
.reels-page { position: relative; width: min(100%, 980px); min-height: calc(100vh - var(--topbar-height)); margin: 0 auto; padding: 18px 24px 76px; display: grid; place-items: center; align-content: start; }
.reel-stage { position: relative; width: min(100%, 410px); aspect-ratio: 9/16; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 26px 78px rgba(0,0,0,.5); }
.reel-stage::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.018) 18px 36px); pointer-events: none; }
.reel-stage__progress { position: absolute; z-index: 5; left: 12px; right: 12px; top: 10px; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.2); }
.reel-stage__progress span { display: block; height: 100%; border-radius: inherit; background: #fff; }
.reel-stage__play { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; color: #fff; }
.reel-stage__play .icon { width: 70px; height: 70px; padding: 18px; border-radius: 50%; background: rgba(0,0,0,.38); }
.reel-mute { position: absolute; z-index: 7; right: 13px; top: 19px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.48); }
.reel-stage__meta { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; padding: 80px 76px 18px 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.88)); }
.reel-creator-row { display: flex; align-items: center; gap: 8px; }
.reel-creator-row > a:nth-child(2) { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.reel-stage__meta > p { margin-top: 9px; color: #f1f3f8; font-size: 12.5px; line-height: 1.45; }
.reel-stage__meta > span { display: block; margin-top: 5px; color: rgba(255,255,255,.64); font-size: 10.5px; }
.reel-actions { position: absolute; z-index: 7; right: 12px; bottom: 110px; display: flex; flex-direction: column; gap: 13px; }
.reel-actions button { width: 56px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; font-size: 9.5px; font-weight: var(--fw-semibold); }
.reel-actions button .icon { width: 27px; height: 27px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.45)); }
.reel-actions button.is-active { color: var(--warning); }
.reel-nav { position: absolute; left: calc(50% + 230px); top: 42%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.reel-nav span { color: var(--muted); font-family: var(--font-mono); font-size: 10px; }
.reel-keyboard-hint { margin-top: 13px; color: var(--muted-2); font-size: 10.5px; }

/* Stream room */
.live-room__stage { padding-bottom: 70px; }
.live-player__controls { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 9px; padding: 12px 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.62)); }
.live-player__controls button { min-height: 34px; padding: 7px 9px; border-radius: 8px; background: rgba(0,0,0,.45); color: #fff; font-size: 10.5px; font-weight: var(--fw-semibold); }
.live-player__controls button .icon { width: 17px; height: 17px; }
.live-player__controls > div { flex: 1; }
.stream-ended { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; align-content: center; gap: 9px; padding: 20px; text-align: center; }
.stream-ended > .icon { width: 44px; height: 44px; color: var(--muted); }
.stream-ended h2 { font-family: var(--font-display); }
.stream-ended p { max-width: 420px; color: var(--muted); font-size: 12px; }
.live-room__details { display: block; padding: 14px 0 0; }
.live-room__title h1 { margin-top: 4px; font-family: var(--font-display); font-size: 20px; }
.live-room__title p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.live-room__creator { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border); }
.live-room__creator > a:nth-child(2) { min-width: 0; flex: 1; }
.live-room__creator strong, .live-room__creator span { display: flex; align-items: center; gap: 5px; }
.live-room__creator span { margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.chat-controls { display: flex; gap: 7px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.chat-badge { display: inline-block; margin-right: 5px; padding: 1px 5px; border-radius: 4px; font-size: 8px; font-weight: var(--fw-semibold); }
.chat-badge--moderator { background: rgba(63,224,187,.15); color: var(--success); }
.chat-badge--supporter { background: rgba(245,179,66,.15); color: var(--warning); }
.chat-badge--viewer { background: rgb(var(--brand-primary-rgb) / .17); color: var(--accent-soft); }
.live-challenge-panel { margin-top: 15px; padding: 16px; border: 1px solid rgb(var(--brand-primary-rgb) / .28); border-radius: 15px; background: linear-gradient(100deg, rgb(var(--brand-primary-rgb) / .13), rgb(var(--brand-primary-rgb) / .025)); }
.live-challenge-panel__head, .live-challenge-panel__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.live-challenge-panel__head > span:last-child, .live-challenge-panel__footer > span { color: var(--muted); font-size: 10.5px; }
.live-challenge-panel h2 { margin-top: 9px; font-size: 15px; }
.live-challenge-panel p { margin: 5px 0 12px; color: var(--muted); font-size: 11.5px; }
.live-mobile-tabs, .live-mobile-panel { display: none; }

/* Challenge detail */
.page--detail { max-width: 1220px; }
.challenge-preview-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; padding: 11px 13px; border: 1px dashed var(--border-strong); border-radius: 12px; }
.challenge-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.challenge-main { min-width: 0; }
.challenge-titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.challenge-titlebar h1 { margin-top: 8px; font-family: var(--font-display); font-size: clamp(25px, 3vw, 36px); line-height: 1.08; }
.challenge-titlebar > span { color: var(--muted); font-size: 10.5px; }
.challenge-creator { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; }
.challenge-creator > span:last-child strong, .challenge-creator > span:last-child small { display: flex; align-items: center; gap: 5px; }
.challenge-creator small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.challenge-lead { margin-top: 13px; color: var(--text-soft); font-size: 13.5px; line-height: 1.6; }
.challenge-timing { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.challenge-timing > * { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text-soft); font-size: 10.5px; font-weight: var(--fw-semibold); }
.rules-panel { margin-top: 17px; }
.rules-panel ul { padding-left: 19px; color: var(--text-soft); font-size: 12px; line-height: 1.65; }
.mode-card { margin-top: 17px; padding: 18px; border-radius: 17px; }
.mode-card--community { border: 1px solid rgb(var(--brand-primary-rgb) / .28); background: var(--surface); }
.mode-card--provider { border: 1px dashed rgba(255,255,255,.17); background: #0f131b; }
.mode-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mode-card__head h2 { margin-top: 7px; font-family: var(--font-display); font-size: 18px; }
.mode-card__head > span { color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; }
.mode-card > p { margin: 8px 0 15px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.challenge-options { display: flex; flex-direction: column; gap: 9px; }
.challenge-option { position: relative; overflow: hidden; width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); text-align: left; }
.challenge-option:disabled { cursor: default; }
.challenge-option__fill { position: absolute; inset: 0 auto 0 0; background: rgb(var(--brand-primary-rgb) / .1); }
.challenge-option > span:nth-child(2), .challenge-option > strong { position: relative; z-index: 2; }
.challenge-option > span:nth-child(2) { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: var(--fw-semibold); }
.challenge-option > strong { color: var(--accent-soft); font-family: var(--font-mono); font-size: 12px; }
.challenge-option--selected { border-color: var(--accent); background: rgb(var(--brand-primary-rgb) / .1); }
.challenge-option--winner { border-color: var(--success); }
.range-control { padding: 8px 3px 16px; }
.range-control > strong { display: block; margin-bottom: 13px; text-align: center; color: var(--accent-soft); font-family: var(--font-mono); font-size: 32px; }
.range-control input { width: 100%; accent-color: var(--accent); }
.range-control > div { display: flex; justify-content: space-between; color: var(--muted-2); font-family: var(--font-mono); font-size: 9px; }
.provider-preview { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.provider-preview > div { padding: 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.provider-preview span, .provider-preview strong { display: block; }
.provider-preview span { color: var(--muted); font-size: 9.5px; text-transform: uppercase; }
.provider-preview strong { margin-top: 4px; font-size: 11px; }
.challenge-sidebar { display: flex; flex-direction: column; gap: 12px; }
.creator-mini-card { text-align: center; }
.creator-mini-card .avatar { margin: 0 auto 8px; }
.creator-mini-card p { margin-bottom: 12px; }
.leaderboard { display: flex; flex-direction: column; gap: 4px; }
.leaderboard-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; }
.leaderboard-row--you { background: rgb(var(--brand-primary-rgb) / .12); }
.leaderboard-row span, .leaderboard-row em { color: var(--muted); font-family: var(--font-mono); font-size: 10px; font-style: normal; }
.leaderboard-row strong { font-size: 11.5px; }
.leaderboard-row em { color: var(--accent-soft); font-weight: var(--fw-semibold); }
.related-list { display: flex; flex-direction: column; gap: 7px; }
.related-list a { display: grid; grid-template-columns: 1fr 18px; gap: 3px 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.related-list a strong { font-size: 11.5px; }
.related-list a span { color: var(--muted); font-size: 9.5px; }
.related-list a .icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted-2); }
.challenge-state-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; color: var(--muted); font-size: 10.5px; }

/* Accounts */
.notification-list { gap: 9px; }
.notification-item { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.notification-item--unread { border-color: rgb(var(--brand-primary-rgb) / .3); background: rgb(var(--brand-primary-rgb) / .055); }
.notification-item__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: rgb(var(--brand-primary-rgb) / .12); color: var(--accent-soft); }
.notification-item strong { font-size: 12.5px; }
.notification-item p { margin-top: 3px; color: var(--muted); font-size: 11px; }
.notification-item time { color: var(--muted-2); font-size: 9.5px; }
.balance-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.balance-card { display: block; min-height: 245px; }
.balance-card > span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 12px; }
.balance-card > strong { font-size: 34px; }
.balance-card > p { min-height: 50px; line-height: 1.55; }
.balance-card--tokens { border-color: rgb(var(--brand-primary-rgb) / .36); }
.provider-balance { margin-top: 13px; }
.provider-balance .panel-heading > div { display: flex; align-items: center; gap: 10px; }
.future-methods { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 13px; }
.future-methods button { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); text-align: left; opacity: .8; }
.future-methods span strong, .future-methods span small { display: block; }
.future-methods span small { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.future-methods em { color: var(--muted); font-size: 9px; font-style: normal; font-weight: var(--fw-semibold); text-transform: uppercase; }
.transactions-section { margin-top: 24px; }
.mini-tabs { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.mini-tabs--scroll { overflow-x: auto; width: fit-content; max-width: 100%; margin-bottom: 15px; }
.mini-tab { flex: 0 0 auto; min-height: 31px; padding: 5px 10px; border-radius: 7px; color: var(--muted); font-size: 10.5px; font-weight: var(--fw-semibold); }
.mini-tab--active { background: rgb(var(--brand-primary-rgb) / .18); color: #fff; }
.transaction-list { gap: 7px; }
.transaction-row { width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr) auto 18px; align-items: center; gap: 11px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: left; }
.transaction-row--static { cursor: default; }
.transaction-row__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgb(var(--brand-primary-rgb) / .12); color: var(--accent-soft); }
.transaction-row > div:nth-child(2) strong, .transaction-row > div:nth-child(2) span { display: block; }
.transaction-row > div:nth-child(2) strong { font-size: 12px; }
.transaction-row > div:nth-child(2) span { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.transaction-row__amount { text-align: right; font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold); }
.transaction-row__amount small { display: block; margin-top: 2px; color: var(--muted-2); font-family: var(--font-body); font-size: 8.5px; }
.transaction-row__amount.is-positive { color: var(--success); }
.settings-section { margin-bottom: 22px; }
.settings-section > h2 { margin-bottom: 9px; font-family: var(--font-display); font-size: 16px; }
.settings-list > label, .settings-list > button, .settings-list > a { width: 100%; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: left; }
.settings-list > label > span, .settings-list > button > span, .settings-list > a > span { display: block; }
.settings-list strong, .settings-list small { display: block; }
.settings-list small { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.settings-list > label > input { width: 17px; height: 17px; }
.settings-list--compact > label { padding: 11px 12px; }
.danger-row { color: var(--danger); }
.creator-application-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding: 17px; border: 1px solid rgba(245,179,66,.27); border-radius: 15px; background: linear-gradient(100deg, rgba(245,179,66,.12), rgba(245,179,66,.025)); }
.creator-application-card > div { display: flex; align-items: center; gap: 13px; }
.creator-application-card > div > .icon { width: 27px; height: 27px; color: var(--warning); }
.creator-application-card h2 { font-size: 15px; }
.creator-application-card p { margin-top: 3px; color: var(--muted); font-size: 10.5px; }

/* Creator tools */
.creator-tools-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.creator-tools-header h1 { font-family: var(--font-display); font-size: 30px; }
.creator-tools-header p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.creator-tools-header__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.creator-identity-strip { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.creator-identity-strip > div:nth-child(2) { flex: 1; }
.creator-identity-strip h2 { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.creator-identity-strip p { margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.creator-tools-tabs { display: flex; gap: 3px; overflow-x: auto; margin-top: 15px; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.creator-tools-tabs::-webkit-scrollbar { display: none; }
.creator-tools-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 11px 13px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: var(--fw-medium); }
.creator-tools-tab .icon { width: 16px; height: 16px; }
.creator-tools-tab--active { border-color: var(--accent); color: #fff; }
.creator-tools-content { padding-top: 18px; }
.creator-dashboard-grid, .analytics-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.stat-card { min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.stat-card > .icon { width: 20px; height: 20px; color: var(--accent-soft); }
.stat-card strong, .stat-card span, .stat-card small { display: block; }
.stat-card strong { margin-top: 8px; font-family: var(--font-mono); font-size: 21px; }
.stat-card span { margin-top: 2px; color: var(--text-soft); font-size: 11.5px; }
.stat-card small { margin-top: 4px; color: var(--muted-2); font-size: 9.5px; }
.creator-overview-layout, .analytics-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.health-list, .activity-list, .verification-list { display: flex; flex-direction: column; gap: 9px; }
.health-list span, .activity-list > div, .verification-list > div { display: flex; align-items: center; gap: 9px; color: var(--text-soft); font-size: 11.5px; }
.health-list .icon, .activity-list .icon, .verification-list .icon { width: 18px; height: 18px; color: var(--success); }
.creator-tools-section-heading { margin-bottom: 13px; }
.creator-form-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,.8fr); gap: 13px; align-items: start; }
.profile-upload-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; margin-bottom: 16px; }
.profile-upload { min-height: 105px; display: grid; place-items: center; align-content: center; gap: 6px; border: 1px dashed rgb(var(--brand-primary-rgb) / .38); border-radius: 12px; background: rgb(var(--brand-primary-rgb) / .045); color: var(--accent-soft); font-size: 10.5px; font-weight: var(--fw-medium); }
.profile-upload--avatar { border-radius: 50%; aspect-ratio: 1/1; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.form-grid > label, .stacked-field { display: flex; flex-direction: column; gap: 6px; }
.form-grid label > span, .stacked-field > span { color: #929bad; font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; }
.form-grid input, .form-grid textarea, .form-grid select, .stacked-field input, .stacked-field textarea, .stacked-field select { width: 100%; min-height: 42px; padding: 9px 11px; }
.form-grid textarea { min-height: 80px; }
.form-field--full { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.check-row { flex-direction: row !important; align-items: flex-start; gap: 9px !important; }
.check-row input { width: 17px !important; min-height: 17px !important; margin-top: 1px; }
.check-row span { color: var(--text-soft) !important; font-size: 11px !important; font-weight: var(--fw-semibold) !important; letter-spacing: 0 !important; text-transform: none !important; }
.tag-editor { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-editor > span, .tag-editor > button { display: inline-flex; align-items: center; gap: 5px; min-height: 31px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-soft); font-size: 10px; font-weight: var(--fw-medium); }
.tag-editor span button { color: var(--muted); }
.social-editor { display: flex; flex-direction: column; gap: 7px; margin: 11px 0; }
.social-editor > div { display: grid; grid-template-columns: 78px 1fr 32px; align-items: center; gap: 8px; }
.social-editor > div > span { color: var(--muted); font-size: 10px; }
.social-editor input { min-height: 37px; padding: 7px 9px; }
.social-editor button { color: var(--muted); }
.media-library-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.upload-tile { min-height: 290px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1.5px dashed rgb(var(--brand-primary-rgb) / .42); border-radius: 13px; color: var(--accent-soft); }
.upload-tile span { color: var(--muted); font-size: 10px; }
.media-library-card { overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.media-library-card__visual { position: relative; aspect-ratio: 9/13; display: grid; place-items: center; align-content: center; gap: 7px; color: rgba(255,255,255,.6); font-size: 9px; text-transform: uppercase; }
.media-library-card__visual > em { position: absolute; left: 8px; top: 8px; font-style: normal; }
.media-library-card > div:last-child { padding: 11px; }
.media-library-card h3 { font-size: 12px; }
.media-library-card p { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.media-library-card > div:last-child > span { color: var(--muted-2); font-size: 9px; }
.media-card-actions { display: flex; gap: 5px; margin-top: 8px; }
.media-card-actions button { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 7px; background: var(--surface-2); color: var(--muted); font-size: 9px; }
.manager-list { display: flex; flex-direction: column; gap: 8px; }
.manager-row { display: grid; grid-template-columns: 44px minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.manager-row__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: rgb(var(--brand-primary-rgb) / .11); color: var(--accent-soft); }
.manager-row h3 { font-size: 12px; }
.manager-row p { margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.file-drop { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: 10px; color: var(--muted); }
.file-drop--large { min-height: 170px; flex-direction: column; }
.file-drop--large strong, .file-drop--large span { display: block; }
.file-drop--large span { color: var(--muted); font-size: 10px; }
.schedule-preview { aspect-ratio: 16/9; display: grid; place-items: center; align-content: center; gap: 7px; margin: 12px 0; border-radius: 12px; color: rgba(255,255,255,.64); font-size: 10px; text-transform: uppercase; }
.moderation-card { padding: 13px; margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.moderation-card > div:first-child { display: flex; align-items: center; gap: 8px; }
.moderation-card > div:first-child strong { flex: 1; font-size: 11.5px; }
.moderation-card > div:first-child em { color: var(--warning); font-family: var(--font-mono); font-size: 9.5px; font-style: normal; }
.moderation-card p { margin: 9px 0; color: var(--text-soft); font-size: 11.5px; line-height: 1.45; }
.published-message-list { display: flex; flex-direction: column; gap: 7px; }
.published-message-list > div { display: grid; grid-template-columns: 34px minmax(0,1fr) 30px 30px 30px; align-items: center; gap: 7px; padding: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.published-message-list span strong, .published-message-list span small { display: block; }
.published-message-list span strong { font-size: 10.5px; }
.published-message-list span small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 9px; }
.published-message-list button { color: var(--muted); }
.follower-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.follower-list article { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.follower-list article > div:nth-child(2) { flex: 1; }
.follower-list strong, .follower-list span { display: block; }
.follower-list strong { font-size: 11.5px; }
.follower-list span { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.search-box--inline { width: 260px; }
.bar-chart { height: 230px; display: flex; align-items: flex-end; justify-content: space-between; gap: 9px; padding-top: 18px; }
.bar-chart > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; }
.bar-chart > div > span { width: min(38px,100%); min-height: 20px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg,var(--info),#3a9ec2); }
.bar-chart--violet > div > span { background: linear-gradient(180deg,var(--accent),var(--brand-violet)); }
.bar-chart small { color: var(--muted); font-size: 9px; }
.ranked-content-list, .breakdown-list, .detail-list { display: flex; flex-direction: column; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; }
.ranked-content-list > div { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; padding: 10px 11px; background: var(--surface-2); }
.ranked-content-list span, .ranked-content-list em { color: var(--muted); font-size: 9.5px; font-style: normal; }
.ranked-content-list strong { font-size: 10.5px; }
.earnings-summary-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.earnings-card { padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.earnings-card--available { border-color: rgba(245,179,66,.35); background: rgba(245,179,66,.08); }
.earnings-card span, .earnings-card strong, .earnings-card small { display: block; }
.earnings-card span { color: var(--muted); font-size: 10px; }
.earnings-card strong { margin-top: 8px; font-family: var(--font-mono); font-size: 16px; }
.earnings-card small { margin-top: 5px; color: var(--muted-2); font-size: 9px; }
.breakdown-list > div, .detail-list > div { display: flex; justify-content: space-between; gap: 15px; padding: 11px 12px; background: var(--surface-2); }
.breakdown-list span, .detail-list span { color: var(--muted); font-size: 10.5px; }
.breakdown-list strong, .detail-list strong { font-size: 10.5px; text-align: right; }
.payout-hero { background: linear-gradient(135deg,rgba(245,179,66,.13),rgba(245,179,66,.02)); border-color: rgba(245,179,66,.28); }
.payout-hero > strong { display: block; margin: 11px 0 5px; font-family: var(--font-mono); font-size: 34px; }
.health-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.health-hero { grid-column: 1 / -1; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 13px; }
.health-hero > .icon { width: 34px; height: 34px; color: var(--success); }
.health-hero h2 { margin: 2px 0 3px; }
.settings-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }

/* Entry, dialogs, drawers */
.entry-gate { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: radial-gradient(1100px 760px at 50% -12%, #35113a 0%, var(--bg) 58%); }
.entry-card { width: min(100%, 500px); padding: 28px; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.entry-card--center { text-align: center; }
.entry-card--center > .icon { width: 48px; height: 48px; margin: 0 auto 13px; color: var(--warning); }
.entry-brand { display: flex; align-items: center; margin-bottom: 18px; }
.entry-brand--centered { justify-content: center; }
.entry-brand__lockup { width: min(100%, 320px); height: auto; object-fit: contain; }
.entry-card h1 { margin-top: 14px; font-family: var(--font-display); font-size: 25px; }
.entry-card > p { margin-top: 8px; color: var(--text-soft); font-size: 12.5px; line-height: 1.6; }
.entry-portals { display: flex; flex-direction: column; gap: 11px; margin-top: 17px; }
.entry-portals > div { padding: 13px; border: 1px solid var(--border); border-radius: 13px; }
.entry-portals > div:last-child { border-color: rgba(245,179,66,.27); }
.entry-portals h2 { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; font-size: 13px; }
.entry-portals h2 span { color: var(--muted); font-size: 9.5px; font-weight: var(--fw-medium); }
.entry-portals button + button { margin-top: 7px; }
.entry-portals p { margin-top: 7px; color: var(--muted); font-size: 9.5px; text-align: center; }
.dev-link { display: block; margin: 16px auto 0; color: var(--muted-2); font-family: var(--font-mono); font-size: 9px; }
.modal-backdrop, .drawer-backdrop { position: fixed; z-index: 1500; inset: 0; display: flex; background: rgba(5,7,11,.75); backdrop-filter: blur(5px); }
.modal-backdrop { align-items: center; justify-content: center; padding: 18px; }
.modal { width: min(100%, 430px); max-height: min(90vh, 820px); overflow-y: auto; padding: 20px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface); box-shadow: 0 28px 80px rgba(0,0,0,.62); }
.modal--wide { width: min(100%, 650px); }
.modal__header, .drawer__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.modal__header h2, .drawer__header h2 { font-family: var(--font-display); font-size: 18px; }
.modal-lead { margin-bottom: 14px; color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 3px auto 14px; border-radius: 13px; background: rgb(var(--brand-primary-rgb) / .13); color: var(--accent-soft); }
.modal-icon--warning { background: rgba(245,179,66,.13); color: var(--warning); }
.amount-group { min-width: 0; }
.amount-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin: 10px 0 14px; }
.amount-grid--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.amount-button {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 90ms ease;
}
.amount-button--selected {
  border-color: var(--brand-border);
  background: rgb(var(--brand-primary-rgb) / 0.22);
  color: #fff;
}
.amount-button:active { transform: scale(0.97); }
.amount-button:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 3px;
}
.choice-list { display: flex; flex-direction: column; gap: 7px; }
.choice-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text-soft); font-size: 11.5px; font-weight: var(--fw-medium); text-align: left; }
.external-url { display: block; padding: 10px; margin-top: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--sidebar); color: var(--accent-soft); font-family: var(--font-mono); font-size: 10px; word-break: break-all; }
.drawer-backdrop { justify-content: flex-end; }
.drawer { width: min(100%, 420px); height: 100%; display: flex; flex-direction: column; border-left: 1px solid var(--border-strong); background: var(--sidebar); box-shadow: -22px 0 60px rgba(0,0,0,.55); }
.drawer__header { flex: 0 0 auto; margin: 0; padding: 14px; border-bottom: 1px solid var(--border); }
.comment-list { flex: 1; overflow-y: auto; padding: 14px; }
.comment-list article { display: flex; gap: 10px; margin-bottom: 14px; }
.comment-list article > div:last-child { flex: 1; }
.comment-list strong { font-size: 11px; }
.comment-list time { margin-left: 5px; color: var(--muted-2); font-size: 9px; font-weight: var(--fw-medium); }
.comment-list p { margin-top: 3px; color: var(--text-soft); font-size: 11.5px; line-height: 1.45; }
.comment-list span { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; color: var(--muted); font-size: 9px; }
.drawer-composer { display: flex; gap: 8px; padding: 11px; border-top: 1px solid var(--border); }
.drawer-composer input { min-width: 0; flex: 1; padding: 9px 11px; }
.transaction-detail { padding: 20px 16px; }
.transaction-detail__hero { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-bottom: 18px; text-align: center; }
.transaction-detail__hero > .icon { width: 48px; height: 48px; padding: 12px; border-radius: 13px; background: rgb(var(--brand-primary-rgb) / .13); color: var(--accent-soft); }
.transaction-detail__hero strong { font-family: var(--font-mono); font-size: 24px; }
.transaction-detail__hero span { font-size: 12px; }
.transaction-detail > p { margin-top: 14px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.fund-pack-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.fund-pack-grid button { position: relative; min-height: 115px; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); text-align: left; }
.fund-pack-grid button em { position: absolute; right: 8px; top: 8px; padding: 2px 6px; border-radius: 5px; background: rgb(var(--brand-primary-rgb) / .18); color: var(--accent-soft); font-size: 8px; font-style: normal; font-weight: var(--fw-semibold); }
.fund-pack-grid button strong, .fund-pack-grid button span, .fund-pack-grid button small { display: block; }
.fund-pack-grid button strong { font-family: var(--font-mono); font-size: 20px; }
.fund-pack-grid button span { color: var(--muted); font-size: 9.5px; }
.fund-pack-grid button small { margin-top: 13px; color: var(--success); font-size: 11px; font-weight: var(--fw-semibold); }

/* System and prototype states */
.dev-tools { position: fixed; z-index: 850; left: 18px; bottom: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dev-tools__button { padding: 9px 13px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--elevated); color: var(--text-soft); font-size: 10px; font-weight: var(--fw-semibold); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.dev-tools__button em { margin-left: 6px; padding: 2px 5px; border-radius: 4px; background: rgba(245,179,66,.15); color: var(--warning); font-size: 7px; font-style: normal; }
.dev-tools__menu { width: 200px; padding: 8px; border: 1px solid var(--border-strong); border-radius: 13px; background: var(--surface); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.dev-tools__menu strong { display: block; padding: 6px 7px; color: var(--muted); font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; }
.dev-tools__menu button { width: 100%; padding: 8px; border-radius: 8px; color: var(--text-soft); font-size: 10.5px; text-align: left; }
.dev-tools__menu button:hover { background: var(--surface-2); }
.offline-banner { position: fixed; z-index: 1700; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; background: var(--warning); color: #1a1200; font-size: 11.5px; }
.offline-banner button { padding: 5px 10px; border-radius: 7px; background: rgba(0,0,0,.12); color: inherit; font-weight: var(--fw-semibold); }
.system-takeover { position: fixed; z-index: 1650; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(6,8,12,.9); backdrop-filter: blur(10px); }
.system-takeover > section { width: min(100%, 430px); text-align: center; }
.system-takeover > section > span { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 13px; border-radius: 50%; background: rgba(245,179,66,.12); color: var(--warning); font-size: 26px; font-weight: var(--fw-semibold); }
.system-takeover h1 { font-family: var(--font-display); }
.system-takeover p { margin: 8px 0 19px; color: var(--text-soft); font-size: 12px; line-height: 1.6; }
.system-takeover > section > div { display: flex; justify-content: center; gap: 8px; }
.system-takeover--danger { background: radial-gradient(900px 640px at 50% -10%, #3a1420 0%, var(--bg) 60%); }
.system-takeover--danger > section > span { background: rgba(246,65,125,.14); color: var(--danger); }

@media (min-width: 1540px) {
  .live-grid, .live-grid--directory { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .media-library-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

@media (max-width: 1280px) {
  .live-grid, .live-grid--directory { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .challenge-grid--directory { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .creator-dashboard-grid, .analytics-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .earnings-summary-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .media-library-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 1023px) {
  .live-grid, .live-grid--directory { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .soon-list { grid-template-columns: 1fr; }
  .challenge-layout { grid-template-columns: 1fr; }
  .challenge-sidebar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .creator-form-layout, .about-layout { grid-template-columns: 1fr; }
  .creator-dashboard-grid, .analytics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .media-library-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .earnings-summary-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .health-overview, .settings-columns { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .hero-strip { align-items: flex-start; flex-direction: column; padding: 18px; }
  .hero-strip__actions { width: 100%; }
  .hero-strip__actions .button { flex: 1; }
  .live-grid, .live-grid--featured, .live-grid--directory { grid-template-columns: 1fr; }
  .challenge-grid--directory { grid-template-columns: 1fr; }
  .filter-row { grid-template-columns: 1fr; gap: 6px; }
  .filter-panel { padding: 13px; }
  .account-menu { display: none; }
  .profile-cover { height: 165px; }
  .profile-wrap { width: calc(100% - 28px); }
  .profile-header { align-items: flex-start; flex-wrap: wrap; margin-top: -43px; }
  .profile-title h1 { font-size: 22px; }
  .profile-header__identity { padding-top: 43px; }
  .profile-header__actions { width: 100%; }
  .profile-header__actions .button { flex: 1; }
  .profile-live-feature { grid-template-columns: 1fr; }
  .profile-live-feature > .icon:last-child { display: none; }
  .about-layout { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-intro--compact { flex-direction: column; }
  .reels-page { min-height: calc(100vh - var(--topbar-height) - var(--mobile-nav-height)); padding: 0 0 var(--mobile-nav-height); }
  .reel-stage { width: 100%; min-height: calc(100vh - var(--topbar-height) - var(--mobile-nav-height)); aspect-ratio: auto; border: 0; border-radius: 0; }
  .reel-nav, .reel-keyboard-hint { display: none; }
  .live-room { display: block; }
  .live-room > .chat-panel { display: none; }
  .live-room__stage { padding: 0 0 10px; }
  .live-room__creator { flex-wrap: wrap; padding-inline: 14px; }
  .live-room__title { padding-inline: 14px; }
  .live-room__actions { width: 100%; }
  .live-challenge-panel { margin-inline: 14px; }
  .live-room__stage > .live-challenge-panel { display: none; }
  .live-mobile-tabs { display: flex; gap: 4px; padding: 0 14px; border-bottom: 1px solid var(--border); }
  .live-mobile-tabs button { padding: 10px 12px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 12px; font-weight: var(--fw-semibold); }
  .live-mobile-tabs button.is-active { border-color: var(--accent); color: #fff; }
  .live-mobile-panel { display: block; min-height: 330px; }
  .live-mobile-panel .chat-messages { min-height: 260px; }
  .challenge-preview-controls { align-items: flex-start; flex-direction: column; }
  .challenge-titlebar { flex-direction: column; }
  .challenge-sidebar { display: flex; }
  .provider-preview { grid-template-columns: 1fr; }
  .balance-grid, .future-methods { grid-template-columns: 1fr; }
  .transaction-row { grid-template-columns: 38px minmax(0,1fr) auto; }
  .transaction-row > .icon:last-child { display: none; }
  .creator-application-card { align-items: flex-start; flex-direction: column; }
  .creator-tools-header { align-items: flex-start; flex-direction: column; }
  .creator-tools-header__actions { width: 100%; }
  .creator-tools-header__actions .button { flex: 1; }
  .creator-dashboard-grid, .analytics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .creator-overview-layout, .analytics-layout { grid-template-columns: 1fr; }
  .creator-form-layout { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field--full { grid-column: auto; }
  .profile-upload-row { grid-template-columns: 96px 1fr; }
  .media-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .manager-row { grid-template-columns: 40px minmax(0,1fr) auto; }
  .manager-row > .button { grid-column: 2 / -1; width: 100%; }
  .follower-list { grid-template-columns: 1fr; }
  .search-box--inline { width: 100%; }
  .earnings-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .health-overview, .settings-columns { grid-template-columns: 1fr; }
  .health-hero { grid-template-columns: 38px 1fr; }
  .health-hero > .status-chip { grid-column: 2; justify-self: start; }
  .modal { padding: 17px; }
  .modal__actions { flex-wrap: wrap; }
  .modal__actions .button { flex: 1; }
  .dev-tools { display: none; }
}

@media (max-width: 430px) {
  .media-grid, .media-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .creator-dashboard-grid, .analytics-grid, .earnings-summary-grid { grid-template-columns: 1fr 1fr; }
  .amount-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contributor-row { grid-template-columns: 22px 32px minmax(0,1fr); }
  .contributor-row > span:last-child { grid-column: 3; }
}

/* ========================================================================== */
/* Complete-screen styles                                           */
/* These selectors cover the full Opus-derived page set and normalize newer   */
/* semantic component names onto the production token system above.           */
/* ========================================================================== */

/* Shared text controls and cards */
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.text-button:hover { color: var(--accent-soft); }
.text-button--center { width: 100%; text-align: center; }
.icon-button--sm { width: 34px; height: 34px; border-radius: 9px; }
.button--full { width: 100%; }
.button--large { min-height: 54px; padding: 14px 18px; font-size: 15px; }
.button--danger { background: rgba(246,65,125,.14); border-color: rgba(246,65,125,.34); color: var(--danger); }
.button--disabled, .button:disabled { cursor: not-allowed; opacity: .52; box-shadow: none; transform: none; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.panel-card,
.form-card,
.sidebar-card,
.about-card,
.profile-settings-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.panel-card__header,
.form-card__header,
.wall-moderation-list__header,
.top-contributor-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 15px;
}
.panel-card__header h2,
.form-card__header h2,
.wall-moderation-list__header h2 { margin-top: 3px; font-family: var(--font-display); font-size: 18px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.panel-heading h2 { margin-top: 2px; font-family: var(--font-display); font-size: 20px; }
.panel-heading p { max-width: 680px; margin-top: 5px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.sidebar-card h2 { margin-bottom: 12px; font-family: var(--font-display); font-size: 15px; }
.content-section--first { margin-top: 22px; }

/* Form system */
.creator-form { display: flex; flex-direction: column; gap: 14px; }
.creator-form--narrow { max-width: 760px; }
.form-grid--two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-grid--three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.form-card > label,
.creator-form > label,
.modal-form > label,
.form-grid > label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #929bad;
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
}
.form-card input,
.form-card textarea,
.form-card select,
.creator-form input,
.creator-form textarea,
.creator-form select,
.modal-form input,
.modal-form textarea,
.modal-form select,
.select-control,
.chip-input {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  outline: none;
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
}
.form-card textarea,
.creator-form textarea,
.modal-form textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus,
.creator-form input:focus,
.creator-form textarea:focus,
.creator-form select:focus,
.modal-form input:focus,
.modal-form textarea:focus,
.modal-form select:focus,
.select-control:focus { border-color: rgb(var(--brand-primary-rgb) / .75); box-shadow: 0 0 0 3px rgb(var(--brand-primary-rgb) / .12); }
.form-card label > small,
.creator-form label > small,
.modal-form label > small { color: var(--muted-2); font-size: 12.5px; font-weight: var(--fw-regular); line-height: 1.5; letter-spacing: 0; text-transform: none; }
.field-label { display: block; margin-bottom: 7px; color: #929bad; font-size: 13px; font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; }
.input-prefix { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); }
.input-prefix > span { padding-left: 12px; color: var(--muted); font-family: var(--font-mono); }
.input-prefix input { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.select-control { width: auto; min-width: 170px; }
.form-actions { margin-top: 2px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.checkbox-grid > span,
.checkbox-line,
.visibility-check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
}
.checkbox-grid input,
.checkbox-line input,
.visibility-check input { width: 17px; height: 17px; min-height: 17px; margin: 0; }
.chip-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px; }
.chip-input span,
.chip-input button { min-height: var(--chip-h-desktop); display: inline-flex; align-items: center; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--elevated); color: var(--text-soft); font-size: 13px; font-weight: var(--fw-medium); }
.chip-input button { color: var(--accent-soft); cursor: pointer; }
.segmented-control { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.segmented-control--full { width: 100%; }
.segmented-control > * { flex: 1; min-height: 38px; padding: 8px 12px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: var(--fw-medium); text-align: center; }
.segmented-control > .is-active { background: rgb(var(--brand-primary-rgb) / .18); color: #fff; }
.toggle-list { display: flex; flex-direction: column; gap: 8px; }
.toggle-list > label { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.toggle-list strong, .toggle-list small { display: block; }
.toggle-list strong { color: var(--text); font-size: 12.5px; }
.toggle-list small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.toggle-list input { width: 18px; height: 18px; }

/* Entry experience */
.entry-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  background: radial-gradient(1100px 760px at 50% -12%, #35113a 0%, var(--bg) 58%);
}
.entry-card { width: min(100%, 510px); }
.entry-card--centered { text-align: center; }
.entry-card--centered > .entry-icon { margin-inline: auto; }
.entry-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 14px; background: rgb(var(--brand-primary-rgb) / .14); color: var(--accent-soft); }
.entry-icon .icon { width: 27px; height: 27px; }
.entry-icon--warning { background: rgba(245,179,66,.14); color: var(--warning); }
.entry-lead { margin: 9px 0 20px; color: var(--text-soft); font-size: 13.5px; line-height: 1.62; }
.entry-option { padding: 14px; margin-top: 11px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.012); }
.entry-option--viewer { border-color: rgb(var(--brand-primary-rgb) / .3); background: rgb(var(--brand-primary-rgb) / .055); }
.entry-option--creator { border-color: rgba(245,179,66,.27); background: rgba(245,179,66,.035); }
.entry-option__heading { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.entry-option__heading strong { font-size: 14px; }
.entry-option__heading small { color: var(--muted); font-size: 10.5px; }
.entry-visitor { width: 100%; margin-top: 10px; padding: 10px; color: var(--text-soft); font-size: 13px; font-weight: var(--fw-semibold); }
.entry-legal { margin-top: 16px; color: var(--muted-2); font-size: 10.5px; line-height: 1.55; text-align: center; }
.entry-demo { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-strong); color: var(--muted-2); font-family: var(--font-mono); font-size: 9px; }

/* Discovery card additions */
.live-card__description { margin-top: 7px; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.challenge-card__objective { margin: 8px 0 11px; color: var(--text-soft); font-size: 11.5px; line-height: 1.45; }
.challenge-card__stats { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }
.challenge-card__stats span { display: inline-flex; align-items: center; gap: 5px; }
.media-management-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.media-card { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.media-card__preview { position: relative; aspect-ratio: 4/3; display: grid; place-items: center; align-content: center; gap: 7px; overflow: hidden; }
.media-card__preview .icon { width: 30px; height: 30px; color: rgba(255,255,255,.58); }
.media-card__body { padding: 12px; }
.media-card__body h3 { font-size: 13px; }
.media-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; color: var(--muted); font-size: 9.5px; }
.media-card__actions { display: flex; gap: 6px; margin-top: 10px; }
.reel-grid--compact { grid-template-columns: repeat(6,minmax(0,1fr)); }

/* Profile additions */
.profile-tab-panel { padding-top: 1px; }
.wall-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.wall-heading h2 { font-family: var(--font-display); font-size: 20px; }
.wall-heading p { margin-top: 4px; color: var(--muted); font-size: 11.5px; }
.wall-disclaimer { margin-top: 13px; color: var(--muted-2); font-size: 10px; line-height: 1.55; text-align: center; }
.wall-message__content { min-width: 0; flex: 1; }
.social-link-list { display: flex; flex-direction: column; gap: 8px; }
.social-link-row { display: grid; grid-template-columns: 22px minmax(0,1fr) 18px; align-items: center; gap: 10px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.social-link-row > span:nth-child(2) { min-width: 0; }
.social-link-row strong, .social-link-row small { display: block; }
.social-link-row strong { font-size: 12.5px; }
.social-link-row small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.about-card h2 { margin-bottom: 9px; font-family: var(--font-display); font-size: 18px; }
.about-card p { color: var(--text-soft); font-size: 13px; line-height: 1.65; }
.about-details { display: flex; flex-direction: column; gap: 1px; overflow: hidden; margin-top: 13px; border: 1px solid var(--border); border-radius: 10px; }
.about-details > div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 12px; background: var(--surface-2); }
.about-details span { color: var(--muted); font-size: 10.5px; }
.about-details strong { font-size: 10.5px; text-align: right; }
.top-contributor-card--full { display: block; padding: 17px; }
.top-contributor-card--full .top-contributor-card__header { margin-bottom: 12px; }
.contributor-rank { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--warning); color: #1a1200; font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-semibold); }

/* Reels complete stage */
.reels-stage-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
.reel-progress { position: absolute; z-index: 8; left: 12px; right: 12px; top: 10px; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.2); }
.reel-progress span { display: block; height: 100%; background: #fff; }
.reel-stage__gradient { position: absolute; z-index: 3; inset: auto 0 0; height: 48%; background: linear-gradient(180deg,transparent,rgba(0,0,0,.9)); pointer-events: none; }
.reel-stage__info { position: absolute; z-index: 6; left: 14px; right: 74px; bottom: 17px; }
.reel-stage__info p { margin-top: 8px; color: #f1f3f8; font-size: 12.5px; line-height: 1.48; }
.reel-stage__info small { display: block; margin-top: 5px; color: rgba(255,255,255,.64); font-size: 10.5px; }
.reel-action-rail { position: absolute; z-index: 8; right: 10px; bottom: 106px; display: flex; flex-direction: column; gap: 13px; }
.reel-action-rail button { width: 58px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; font-size: 9px; font-weight: var(--fw-semibold); }
.reel-action-rail button .icon { width: 27px; height: 27px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
.reel-action-rail button.is-active { color: var(--warning); }
.reel-audio { position: absolute; z-index: 8; right: 13px; top: 18px; }

/* Live room additions */
.live-player__ended { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; padding: 24px; background: rgba(11,14,20,.86); text-align: center; }
.live-player__ended h2 { font-family: var(--font-display); }
.live-player__ended p { max-width: 440px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.live-creator-bar { display: flex; align-items: center; gap: 11px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border); }
.live-creator-bar__identity { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; }
.live-creator-bar__identity > div { min-width: 0; }
.live-creator-bar__identity strong { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.live-creator-bar__identity span { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.live-creator-bar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.live-challenge { margin-top: 15px; padding: 16px; border: 1px solid rgb(var(--brand-primary-rgb) / .28); border-radius: 15px; background: linear-gradient(100deg,rgb(var(--brand-primary-rgb) / .14),rgb(var(--brand-primary-rgb) / .025)); }
.live-challenge__top,
.live-challenge__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.live-challenge h2 { margin-top: 9px; font-size: 15px; }
.live-challenge p { margin: 5px 0 12px; color: var(--muted); font-size: 11.5px; }
.live-challenge__footer > span { color: var(--muted); font-size: 10.5px; }
.chat-panel__moderation { display: flex; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.chat-toggle { flex: 1; min-height: 34px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--muted); font-size: 10.5px; font-weight: var(--fw-semibold); }
.chat-toggle.is-active { border-color: rgb(var(--brand-primary-rgb) / .42); background: rgb(var(--brand-primary-rgb) / .17); color: var(--accent-soft); }

/* Challenge details and licensed-provider boundary */
.challenge-detail-page { max-width: 1230px; }
.challenge-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; align-items: start; }
.challenge-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.challenge-main > h1 { font-family: var(--font-display); font-size: clamp(27px,3.2vw,39px); line-height: 1.08; letter-spacing: -.025em; }
.challenge-creator-row { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.challenge-creator-row > a:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.challenge-creator-row strong { font-size: 13px; }
.challenge-creator-row > a:nth-child(2) span { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.challenge-participants { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.challenge-time-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.challenge-time-row > * { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text-soft); font-size: 10.5px; font-weight: var(--fw-semibold); }
.challenge-time-row button { cursor: pointer; color: var(--accent-soft); }
.challenge-rules-card { margin-top: 18px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.challenge-rules-card h2 { font-family: var(--font-display); font-size: 18px; }
.challenge-rules-card h3 { margin-top: 16px; font-size: 13px; }
.challenge-rules-card p { margin-top: 7px; color: var(--text-soft); font-size: 12.5px; line-height: 1.6; }
.challenge-rules-card ol { margin: 7px 0 0; padding-left: 20px; color: var(--text-soft); font-size: 12px; line-height: 1.65; }
.prediction-card,
.mode-b-card,
.how-it-works { margin-top: 18px; padding: 18px; border-radius: 17px; }
.prediction-card { border: 1px solid rgb(var(--brand-primary-rgb) / .28); background: var(--surface); }
.prediction-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.prediction-card__heading h2 { margin-top: 3px; font-family: var(--font-display); font-size: 20px; }
.prediction-card > p,
.mode-b-card > p { margin: 8px 0 15px; color: var(--muted); font-size: 12px; line-height: 1.58; }
.prediction-options { display: flex; flex-direction: column; gap: 9px; }
.prediction-option { position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); text-align: left; cursor: pointer; }
.prediction-option:disabled { cursor: default; }
.prediction-option__bar { position: absolute; z-index: -1; inset: 0 auto 0 0; background: rgb(var(--brand-primary-rgb) / .1); }
.prediction-option > span:nth-child(2) { font-size: 12.5px; font-weight: var(--fw-semibold); }
.prediction-option > strong { color: var(--accent-soft); font-family: var(--font-mono); font-size: 12px; }
.prediction-option.is-selected { border-color: var(--accent); background: rgb(var(--brand-primary-rgb) / .11); }
.prediction-option.is-result { border-color: var(--success); }
.range-prediction { padding: 7px 3px 14px; }
.range-prediction > div:first-child { display: flex; justify-content: center; align-items: baseline; gap: 7px; margin-bottom: 14px; }
.range-prediction > div:first-child strong { color: var(--accent-soft); font-family: var(--font-mono); font-size: 34px; }
.range-prediction > div:first-child span { color: var(--muted); }
.range-prediction input { width: 100%; accent-color: var(--accent); }
.range-prediction > div:last-child { display: flex; justify-content: space-between; color: var(--muted-2); font-family: var(--font-mono); font-size: 9px; }
.state-banner { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); color: var(--text-soft); font-size: 12px; line-height: 1.45; }
.state-banner button { margin-left: auto; color: var(--accent-soft); font-size: 11px; font-weight: var(--fw-semibold); }
.state-banner--success { border-color: rgba(63,224,187,.28); background: rgba(63,224,187,.09); }
.state-banner--warning { border-color: rgba(245,179,66,.28); background: rgba(245,179,66,.08); }
.state-banner--info { border-color: rgba(92,214,239,.25); background: rgba(92,214,239,.075); }
.mode-b-card { border: 1px dashed rgba(255,255,255,.18); background: #0f131b; }
.mode-b-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mode-b-card__top > div { display: flex; align-items: center; gap: 8px; color: var(--text-soft); }
.how-it-works { border: 1px solid var(--border); background: var(--surface); }
.how-it-works h2 { margin-bottom: 12px; font-family: var(--font-display); font-size: 16px; }
.how-it-works > div { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: start; margin-top: 8px; }
.how-it-works > div > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgb(var(--brand-primary-rgb) / .14); color: var(--accent-soft); font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-semibold); }
.how-it-works p { color: var(--text-soft); font-size: 11.5px; line-height: 1.48; }
.creator-mini { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.creator-mini > div { min-width: 0; display: flex; flex-direction: column; }
.creator-mini strong { font-size: 12.5px; }
.creator-mini span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.leader-row { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; }
.leader-row span, .leader-row small { color: var(--muted); font-family: var(--font-mono); font-size: 10px; }
.leader-row strong { font-size: 11.5px; }
.leader-row small { color: var(--accent-soft); font-weight: var(--fw-semibold); }
.related-challenge { display: block; padding: 10px; margin-top: 7px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.related-challenge strong, .related-challenge span { display: block; }
.related-challenge strong { font-size: 11.5px; }
.related-challenge span { margin-top: 4px; color: var(--muted); font-size: 9.5px; }
.demo-state-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 11px; }
.demo-state-row > span { margin-right: 5px; color: var(--muted); font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; }
.demo-state-row button { padding: 6px 9px; border-radius: 7px; background: var(--surface-2); color: var(--muted); font-size: 10px; font-weight: var(--fw-semibold); }
.demo-state-row button.is-active { background: rgb(var(--brand-primary-rgb) / .18); color: var(--accent-soft); }

/* Add Funds and balances */
.balance-card--points { border-color: var(--border); background: var(--surface); }
.balance-card--points .balance-card__icon { background: rgba(63,224,187,.1); color: var(--success); }
.mode-b-balance { margin-top: 13px; padding: 18px; border: 1px dashed rgba(255,255,255,.18); border-radius: 16px; background: #0f131b; }
.mode-b-balance__value { margin: 11px 0; color: var(--muted-2); font-family: var(--font-mono); font-size: 32px; font-weight: var(--fw-semibold); }
.funding-grid--compact { margin-top: 12px; }
.fund-pack { position: relative; min-height: 120px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); text-align: left; }
.fund-pack strong, .fund-pack span, .fund-pack small { display: block; }
.fund-pack strong { font-family: var(--font-mono); font-size: 21px; }
.fund-pack span { color: var(--muted); font-size: 10px; }
.fund-pack small { margin-top: 13px; color: var(--success); font-size: 11px; font-weight: var(--fw-semibold); }
.transaction-row__copy { min-width: 0; flex: 1; }
.transaction-row__copy strong, .transaction-row__copy small { display: block; }
.transaction-row__copy strong { font-size: 12px; }
.transaction-row__copy small { margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.transaction-detail__icon { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 15px; background: rgb(var(--brand-primary-rgb) / .13); color: var(--accent-soft); }

/* Creator tools */
.creator-tools-page { max-width: 1510px; }
.creator-tools-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.creator-tools-header h1 { font-family: var(--font-display); font-size: clamp(26px,3vw,35px); }
.creator-tools-header p { max-width: 760px; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.creator-tools-header__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.creator-identity-strip { display: grid; grid-template-columns: auto minmax(0,1fr) auto minmax(190px,280px); align-items: center; gap: 14px; padding: 15px 17px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.creator-identity-strip > div:nth-child(2) strong, .creator-identity-strip > div:nth-child(2) small { display: block; }
.creator-identity-strip > div:nth-child(2) strong { font-size: 15px; }
.creator-identity-strip > div:nth-child(2) small { margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.profile-completion { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; }
.profile-completion > span { color: var(--muted); font-size: 9.5px; }
.profile-completion > div { height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.profile-completion i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--accent),var(--info)); }
.profile-completion strong { grid-column: 2; grid-row: 1 / span 2; color: var(--accent-soft); font-family: var(--font-mono); font-size: 11px; }
.creator-tools-tabs { display: flex; gap: 3px; overflow-x: auto; margin-top: 17px; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.creator-tools-tabs::-webkit-scrollbar { display: none; }
.creator-tools-tabs a { flex: 0 0 auto; padding: 12px 14px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: var(--fw-medium); }
.creator-tools-tabs a.is-active { border-color: var(--accent); color: #fff; }
.creator-tools-panel { padding-top: 18px; }
.creator-overview { display: flex; flex-direction: column; gap: 14px; }
.stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.stat-card { padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.stat-card > span { color: var(--accent-soft); }
.stat-card > strong { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 22px; }
.stat-card h3 { margin-top: 3px; font-size: 11.5px; }
.stat-card p { margin-top: 5px; color: var(--muted); font-size: 9.5px; }
.creator-overview-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.quick-action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.quick-action-grid > * { min-height: 80px; display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); text-align: left; }
.quick-action-grid > * > .icon { color: var(--accent-soft); }
.quick-action-grid strong, .quick-action-grid small { display: block; }
.quick-action-grid strong { font-size: 11.5px; }
.quick-action-grid small { margin-top: 3px; color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.profile-image-editor { position: relative; padding-bottom: 52px; }
.cover-editor { min-height: 200px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 13px; border-radius: 13px; }
.cover-editor button,
.avatar-editor button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 9px; background: rgba(0,0,0,.52); color: #fff; font-size: 10.5px; font-weight: var(--fw-semibold); }
.avatar-editor { position: absolute; left: 20px; bottom: 0; display: flex; align-items: flex-end; gap: 9px; }
.social-manager { display: flex; flex-direction: column; gap: 8px; }
.social-manager__row { display: grid; grid-template-columns: 26px 120px minmax(0,1fr) auto 34px; align-items: center; gap: 8px; }
.visibility-check { min-height: 36px; padding: 7px 9px; }
.stream-management-list,
.wall-moderation-list { display: flex; flex-direction: column; gap: 9px; }
.stream-management-list > article { display: grid; grid-template-columns: 44px minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.stream-management-list > article > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: rgb(var(--brand-primary-rgb) / .12); color: var(--accent-soft); }
.stream-management-list strong, .stream-management-list small { display: block; }
.stream-management-list strong { font-size: 12px; }
.stream-management-list small { margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.challenge-lifecycle { display: flex; flex-wrap: wrap; gap: 5px; }
.challenge-lifecycle span { padding: 4px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 9px; font-weight: var(--fw-medium); }
.wall-management-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.75fr); gap: 14px; align-items: start; }
.wall-management-grid__wide { grid-column: 1 / -1; }
.wall-moderation-list__header { align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.wall-moderation-list > article { padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.wall-moderation-list > article > header { display: flex; align-items: center; gap: 10px; }
.wall-moderation-list > article > header > div { min-width: 0; flex: 1; }
.wall-moderation-list > article strong, .wall-moderation-list > article small { display: block; }
.wall-moderation-list > article small { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.wall-moderation-list > article p { margin: 10px 0; color: var(--text-soft); font-size: 11.5px; line-height: 1.48; }
.finance-stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.finance-stat-grid > article { padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.finance-stat-grid > article.is-available { border-color: rgba(245,179,66,.35); background: rgba(245,179,66,.07); }
.finance-stat-grid span, .finance-stat-grid strong, .finance-stat-grid small { display: block; }
.finance-stat-grid span { color: var(--muted); font-size: 10px; }
.finance-stat-grid strong { margin-top: 8px; font-family: var(--font-mono); font-size: 16px; }
.finance-stat-grid small { margin-top: 5px; color: var(--muted-2); font-size: 9px; line-height: 1.4; }
.earnings-breakdown { display: flex; flex-direction: column; gap: 11px; }
.earnings-breakdown > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; }
.earnings-breakdown span, .earnings-breakdown strong { font-size: 10.5px; }
.earnings-breakdown strong { color: var(--accent-soft); font-family: var(--font-mono); }
.earnings-breakdown i { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg,var(--accent),var(--info)); }
.payout-hero { padding: 20px; border: 1px solid rgba(245,179,66,.28); border-radius: 16px; }
.payout-method-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; }
.payout-method-row > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: rgb(var(--brand-primary-rgb) / .12); color: var(--accent-soft); }
.payout-method-row strong, .payout-method-row small { display: block; }
.payout-method-row small { margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.performance-table { display: flex; flex-direction: column; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; }
.performance-table > div { display: grid; grid-template-columns: minmax(0,1fr) repeat(3,auto); gap: 12px; padding: 11px 12px; background: var(--surface-2); }
.performance-table strong { font-size: 11px; }
.performance-table span { color: var(--muted); font-size: 9.5px; }
.settings-navigation { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 14px; }
.settings-navigation a { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--muted); font-size: 10.5px; font-weight: var(--fw-semibold); }

/* Dialogs, drawers, and overlay workflows */
.overlay-backdrop { position: fixed; z-index: 1500; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(6,8,12,.76); backdrop-filter: blur(5px); animation: toast-in 170ms ease both; }
.overlay-backdrop--drawer { display: flex; justify-content: flex-end; padding: 0; }
.dialog { width: min(100%, 460px); max-height: min(90vh,780px); overflow-y: auto; padding: 22px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.62); }
.dialog--large { width: min(100%, 620px); }
.dialog__header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.dialog__header > div { min-width: 0; flex: 1; }
.dialog__header h2 { font-family: var(--font-display); font-size: 19px; }
.dialog__header p { margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.dialog__icon { width: 45px; height: 45px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 12px; background: rgb(var(--brand-primary-rgb) / .14); color: var(--accent-soft); }
.dialog__body { color: var(--text-soft); font-size: 12.5px; line-height: 1.58; }
.dialog-actions { display: flex; gap: 9px; margin-top: 17px; }
.dialog-actions > * { flex: 1; }
.dialog-list { display: flex; flex-direction: column; gap: 7px; }
.dialog-list button { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text-soft); font-size: 12px; font-weight: var(--fw-medium); text-align: left; }
.drawer { width: min(100%,420px); height: 100%; display: flex; flex-direction: column; border-left: 1px solid var(--border-strong); background: var(--sidebar); box-shadow: -20px 0 60px rgba(0,0,0,.55); }
.drawer__header { display: flex; align-items: center; gap: 10px; padding: 15px 16px; border-bottom: 1px solid var(--border); }
.drawer__header h2 { flex: 1; font-family: var(--font-display); font-size: 17px; }
.drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 15px 16px; }
.drawer-context { padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 10.5px; }
.modal-form { display: flex; flex-direction: column; gap: 12px; }
.upload-dropzone { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 20px; border: 1.5px dashed rgb(var(--brand-primary-rgb) / .45); border-radius: 13px; background: rgb(var(--brand-primary-rgb) / .04); color: var(--accent-soft); text-align: center; }
.upload-dropzone small { color: var(--muted); font-size: 10px; }
.insufficient-state { text-align: center; }
.insufficient-state > .icon { width: 48px; height: 48px; margin: 0 auto 12px; padding: 12px; border-radius: 13px; background: rgba(245,179,66,.14); color: var(--warning); }
.wall-composer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.wall-composer-head > div { min-width: 0; flex: 1; }
.wall-composer-head strong, .wall-composer-head small { display: block; }
.wall-composer-head small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.application-states { display: flex; flex-wrap: wrap; gap: 5px; }
.application-states span { padding: 4px 7px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 9px; font-weight: var(--fw-semibold); }
.demo-launcher { display: inline-flex; align-items: center; gap: 7px; }
.system-banner { position: fixed; z-index: 1700; inset: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; background: var(--warning); color: #1a1200; font-size: 11.5px; font-weight: var(--fw-semibold); }

@media (max-width: 1280px) {
  .media-management-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .finance-stat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .creator-identity-strip { grid-template-columns: auto minmax(0,1fr) auto; }
  .profile-completion { grid-column: 2 / -1; }
}

@media (max-width: 1023px) {
  .challenge-detail-grid { grid-template-columns: 1fr; }
  .challenge-sidebar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .wall-management-grid { grid-template-columns: 1fr; }
  .wall-management-grid__wide { grid-column: auto; }
  .social-manager__row { grid-template-columns: 26px 100px minmax(0,1fr) auto 34px; }
  .media-management-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .performance-table > div { grid-template-columns: minmax(0,1fr) repeat(2,auto); }
  .performance-table > div span:last-child { display: none; }
}

@media (max-width: 767px) {
  .entry-screen { padding: 14px; }
  .entry-card { padding: 20px; }
  .form-grid--two, .form-grid--three, .checkbox-grid { grid-template-columns: 1fr; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions > * { min-width: 120px; }
  .overlay-backdrop { padding: 12px; }
  .overlay-backdrop--drawer { padding: 0; }
  .drawer { max-width: none; }
  .reels-stage-wrap { min-height: calc(100vh - var(--topbar-height) - var(--mobile-nav-height)); }
  .reel-action-rail { right: 7px; }
  .live-creator-bar { align-items: flex-start; flex-wrap: wrap; padding-inline: 14px; }
  .live-creator-bar__actions { width: 100%; }
  .live-creator-bar__actions .button { flex: 1; }
  .live-challenge { margin-inline: 14px; }
  .challenge-detail-page { padding-inline: 15px; }
  .challenge-title-row { align-items: flex-start; flex-direction: column; }
  .challenge-creator-row { flex-wrap: wrap; }
  .challenge-participants { width: 100%; margin-left: 0; }
  .challenge-sidebar { display: flex; }
  .creator-tools-header { flex-direction: column; }
  .creator-tools-header__actions { width: 100%; }
  .creator-tools-header__actions .button { flex: 1; }
  .creator-identity-strip { grid-template-columns: auto minmax(0,1fr); }
  .creator-identity-strip > .status-chip { grid-column: 2; justify-self: start; }
  .profile-completion { grid-column: 1 / -1; }
  .creator-overview-grid, .quick-action-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .social-manager__row { grid-template-columns: 24px minmax(0,1fr) 34px; }
  .social-manager__row select { grid-column: 2; }
  .social-manager__row input { grid-column: 2; }
  .social-manager__row .visibility-check { grid-column: 2; }
  .social-manager__row > .icon-button { grid-column: 3; grid-row: 1; }
  .media-management-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stream-management-list > article { grid-template-columns: 40px minmax(0,1fr) auto; }
  .stream-management-list > article .button { grid-column: 2 / -1; width: 100%; }
  .finance-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .performance-table > div { grid-template-columns: 1fr auto; }
  .performance-table > div span:nth-of-type(n+2) { display: none; }
  .payout-method-row { grid-template-columns: 42px minmax(0,1fr); }
  .payout-method-row .button { grid-column: 1 / -1; width: 100%; }
  .reel-grid--compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 430px) {
  .stat-grid, .finance-stat-grid { grid-template-columns: 1fr; }
  .media-management-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Explicit state and tab hooks used by the generated templates. */
.sidebar-group { display: block; }
.sidebar-group--following { display: flex; }
.content-tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 15px; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.content-tabs::-webkit-scrollbar { display: none; }
.content-tab { flex: 0 0 auto; padding: 10px 13px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 13px; font-weight: var(--fw-medium); cursor: pointer; }
.content-tab--active { border-color: var(--accent); color: #fff; }
.is-positive { color: var(--success) !important; }
.is-available { border-color: rgba(245,179,66,.35) !important; background: rgba(245,179,66,.07) !important; }

/* ========================================================================== 
   R2 CURRENT RENDERER COMPATIBILITY LAYER
   These selectors map the current TypeScript page/overlay templates to the
   approved visual system. They intentionally sit last so the complete-page
   implementation wins over earlier scaffold aliases.
   ========================================================================== */

/* Shared states and modifiers */
.content-section--first { margin-top: 0; }
.is-disabled { opacity: .38; pointer-events: none; cursor: not-allowed !important; }
.is-selected { border-color: var(--accent) !important; background: rgb(var(--brand-primary-rgb) / .16) !important; }
.is-result { border-color: rgba(63,224,187,.65) !important; background: rgba(63,224,187,.11) !important; }
.is-available { border-color: rgba(63,224,187,.32) !important; }
.notification-row--unread { border-color: rgb(var(--brand-primary-rgb) / .35); background: linear-gradient(100deg, rgb(var(--brand-primary-rgb) / .09), var(--surface)); }
.status-chip--muted { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.text-button--center { width: 100%; justify-content: center; text-align: center; }
.icon-button--sm { width: 32px; height: 32px; border-radius: 8px; }
.reel-grid--compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.soon-card--management { align-items: center; }
.live-card__description, .challenge-card__objective { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.48; }
.challenge-card__stats { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10.5px; }
.challenge-card__stats span { display: inline-flex; align-items: center; gap: 5px; }
.challenge-card__stats .icon { width: 14px; height: 14px; }

/* Entry */
.entry-screen { min-height: 100vh; display: grid; place-items: center; padding: 22px; overflow-y: auto; background: radial-gradient(1050px 720px at 50% -8%, #35113a 0%, var(--bg) 58%); }
.entry-card--centered { text-align: center; }
.entry-icon { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 14px; background: rgb(var(--brand-primary-rgb) / .14); color: var(--accent-soft); }
.entry-icon .icon { width: 28px; height: 28px; }
.entry-icon--warning { background: rgba(245,179,66,.14); color: var(--warning); }
.entry-lead { margin: 9px 0 18px !important; }
.entry-option { padding: 14px; margin-top: 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(15,12,21,.55); }
.entry-option--viewer { border-color: rgb(var(--brand-primary-rgb) / .3); background: rgb(var(--brand-primary-rgb) / .055); }
.entry-option--creator { border-color: rgba(245,179,66,.27); }
.entry-option__heading { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; text-align: left; }
.entry-option__heading > .icon { width: 21px; height: 21px; color: var(--accent-soft); }
.entry-option--creator .entry-option__heading > .icon { color: var(--warning); }
.entry-option__heading strong, .entry-option__heading span { display: block; }
.entry-option__heading strong { font-size: 13px; }
.entry-option__heading span { margin-top: 1px; color: var(--muted); font-size: 10.5px; }
.entry-option .button { width: 100%; }
.entry-option .button + .button { margin-top: 7px; }
.entry-option small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.5; text-align: center; }
.entry-visitor { width: 100%; min-height: 42px; margin-top: 11px; color: var(--text-soft); font-size: 12.5px; font-weight: var(--fw-medium); }
.entry-legal { margin-top: 15px !important; color: var(--muted-2) !important; font-size: 10px !important; text-align: center; }
.entry-demo { display: flex; align-items: center; gap: 6px; margin: 16px auto 0; color: var(--muted-2); font-family: var(--font-mono); font-size: 9px; }
.entry-demo .icon { width: 14px; height: 14px; }

/* Dialogs, drawers, and forms */
.overlay-backdrop { position: fixed; z-index: 1500; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(5,7,11,.76); backdrop-filter: blur(5px); animation: toast-in 160ms ease both; }
.overlay-backdrop--drawer { justify-content: flex-end; padding: 0; }
.dialog { width: min(100%, 460px); max-height: min(91vh, 860px); overflow-y: auto; padding: 21px; border: 1px solid var(--border-strong); border-radius: var(--radius-modal); background: var(--surface); box-shadow: 0 30px 85px rgba(0,0,0,.64); }
.dialog--small { max-width: 410px; }
.dialog--medium { max-width: 520px; }
.dialog--large { max-width: 720px; }
.dialog__header { display: grid; grid-template-columns: 42px minmax(0,1fr) 42px; align-items: center; gap: 10px; margin-bottom: 15px; }
.dialog__header h2 { font-family: var(--font-display); font-size: 18px; }
.dialog__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: rgb(var(--brand-primary-rgb) / .14); color: var(--accent-soft); }
.dialog__icon .icon { width: 21px; height: 21px; }
.dialog__body > p { color: var(--text-soft); font-size: 12px; line-height: 1.6; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 17px; }
.dialog-list { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.dialog-list button { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text-soft); font-size: 11.5px; font-weight: var(--fw-medium); text-align: left; }
.dialog-list button:hover { border-color: rgb(var(--brand-primary-rgb) / .4); color: #fff; }
.drawer__body { flex: 1; min-height: 0; overflow-y: auto; }
.drawer-context { display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; border-bottom: 1px solid var(--border); }
.drawer-context strong { font-size: 11.5px; }
.drawer-context span { color: var(--muted); font-size: 9.5px; }
.field-label, .modal-form > label { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; color: #929bad; font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; }
.field-label input, .field-label textarea, .field-label select, .modal-form input, .modal-form textarea, .modal-form select { width: 100%; min-height: 42px; padding: 9px 11px; color: var(--text); font-size: 12px; font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; }
.field-label textarea, .modal-form textarea { min-height: 80px; }
.field-label small, .modal-form label > small { color: var(--muted-2); font-size: 9.5px; font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; }
.modal-form { display: flex; flex-direction: column; gap: 1px; }
.input-prefix { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-2); }
.input-prefix > span { display: grid; place-items: center; height: 100%; color: var(--muted); border-right: 1px solid var(--border); }
.input-prefix input { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.checkbox-line { flex-direction: row !important; align-items: flex-start; gap: 9px !important; color: var(--text-soft) !important; font-size: 11px !important; font-weight: var(--fw-semibold) !important; letter-spacing: 0 !important; line-height: 1.45; text-transform: none !important; }
.checkbox-line input { width: 17px !important; min-height: 17px !important; margin-top: 1px; flex: 0 0 auto; }
.application-states, .challenge-lifecycle { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
.application-states span, .challenge-lifecycle span { padding: 4px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--muted); font-size: 9px; font-weight: var(--fw-semibold); }
.upload-dropzone { width: 100%; min-height: 155px; display: grid; place-items: center; align-content: center; gap: 6px; margin-bottom: 8px; border: 1.5px dashed rgb(var(--brand-primary-rgb) / .42); border-radius: 13px; background: rgb(var(--brand-primary-rgb) / .035); color: var(--accent-soft); }
.upload-dropzone .icon { width: 28px; height: 28px; }
.upload-dropzone strong, .upload-dropzone span { display: block; }
.upload-dropzone span { color: var(--muted); font-size: 10px; }
.insufficient-state { text-align: center; }
.insufficient-state > .icon { width: 50px; height: 50px; margin: 0 auto 12px; padding: 13px; border-radius: 14px; background: rgba(245,179,66,.13); color: var(--warning); }
.insufficient-state h3 { font-family: var(--font-display); font-size: 19px; }
.insufficient-state > p { margin-top: 5px; color: var(--muted); font-size: 11.5px; }
.fund-pack { position: relative; }
.fund-pack > span { position: absolute; right: 8px; top: 8px; padding: 2px 6px; border-radius: 5px; background: rgb(var(--brand-primary-rgb) / .18); color: var(--accent-soft) !important; font-size: 8px !important; font-weight: var(--fw-semibold); }
.transaction-detail__icon { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 11px; border-radius: 15px; background: rgb(var(--brand-primary-rgb) / .13); color: var(--accent-soft); }
.transaction-detail__icon .icon { width: 27px; height: 27px; }
.wall-composer-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.wall-composer-head > div { min-width: 0; flex: 1; }
.wall-composer-head strong, .wall-composer-head small { display: block; }
.wall-composer-head small { margin-top: 3px; color: var(--muted); font-size: 9.5px; }

/* Reels current renderer */
.reels-stage-wrap { position: relative; display: flex; align-items: center; justify-content: center; gap: 22px; width: 100%; }
.reel-progress { position: absolute; z-index: 8; left: 12px; right: 12px; top: 10px; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.2); }
.reel-progress span { display: block; height: 100%; border-radius: inherit; background: #fff; }
.reel-audio { position: absolute; z-index: 8; top: 18px; right: 13px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.48); color: #fff; }
.reel-stage__gradient { position: absolute; z-index: 3; inset: 35% 0 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.9)); pointer-events: none; }
.reel-stage__info { position: absolute; z-index: 7; left: 14px; right: 72px; bottom: 18px; }
.reel-stage__info > p { margin-top: 9px; color: #f1f3f8; font-size: 12.5px; line-height: 1.45; }
.reel-stage__info > small { display: block; margin-top: 5px; color: rgba(255,255,255,.65); font-size: 10px; line-height: 1.4; }
.reel-creator-row > a:nth-child(2) { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.reel-creator-row > a:nth-child(2) strong, .reel-creator-row > a:nth-child(2) span { max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-creator-row > a:nth-child(2) span { color: rgba(255,255,255,.65); font-size: 9.5px; }
.reel-action-rail { position: absolute; z-index: 8; right: 11px; bottom: 112px; display: flex; flex-direction: column; gap: 12px; }
.reel-action-rail button { width: 58px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; font-size: 9px; font-weight: var(--fw-semibold); text-shadow: 0 2px 5px rgba(0,0,0,.75); }
.reel-action-rail button .icon { width: 27px; height: 27px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
.reel-action-rail button.is-active { color: var(--warning); }

/* Livestream current renderer */
.live-player__ended { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; padding: 24px; text-align: center; }
.live-player__ended > .icon { width: 42px; height: 42px; color: var(--muted); }
.live-player__ended h2 { font-family: var(--font-display); }
.live-player__ended p { color: var(--muted); font-size: 11.5px; }
.live-creator-bar { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border); }
.live-creator-bar__identity { min-width: 0; display: flex; align-items: center; gap: 10px; }
.live-creator-bar__identity > span:last-child { min-width: 0; }
.live-creator-bar__identity strong, .live-creator-bar__identity small { display: block; }
.live-creator-bar__identity strong { font-size: 12.5px; }
.live-creator-bar__identity small { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.live-creator-bar__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.live-challenge { margin-top: 15px; padding: 16px; border: 1px solid rgb(var(--brand-primary-rgb) / .27); border-radius: 15px; background: linear-gradient(100deg, rgb(var(--brand-primary-rgb) / .13), rgb(var(--brand-primary-rgb) / .025)); }
.live-challenge__top, .live-challenge__footer { display: flex; align-items: center; justify-content: space-between; gap: 11px; }
.live-challenge__top > span:last-child { color: var(--muted); font-family: var(--font-mono); font-size: 9.5px; text-transform: capitalize; }
.live-challenge h2 { margin-top: 10px; font-family: var(--font-display); font-size: 16px; }
.live-challenge > p { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.live-challenge__footer { margin-top: 12px; }
.live-challenge__footer > span { display: inline-flex; align-items: center; gap: 5px; color: var(--text-soft); font-size: 10.5px; }
.live-challenge__footer .icon { width: 14px; height: 14px; }
.live-challenge--mobile { margin: 14px; }
.live-mobile-panel--chat { min-height: 330px; display: flex; flex-direction: column; }
.chat-panel__moderation { display: flex; gap: 6px; }
.chat-toggle { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 9.5px; font-weight: var(--fw-semibold); }
.chat-toggle .icon { width: 14px; height: 14px; }
.chat-toggle.is-active { background: rgb(var(--brand-primary-rgb) / .18); color: var(--accent-soft); }
.chat-messages--mobile { min-height: 260px; }
.chat-user--viewer { color: #aeb6c6; }
.chat-user--moderator { color: var(--success); }
.chat-user--creator { color: var(--accent-soft); }

/* Challenge detail and Mode A/B */
.challenge-detail-page { max-width: 1180px; }
.demo-state-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 15px; }
.demo-state-row > span { margin-right: 3px; color: var(--muted-2); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; }
.demo-state-row button { padding: 5px 9px; border-radius: 7px; background: var(--surface-2); color: var(--muted); font-size: 9.5px; font-weight: var(--fw-semibold); text-transform: capitalize; }
.demo-state-row button.is-active { background: rgb(var(--brand-primary-rgb) / .18); color: var(--accent-soft); }
.challenge-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 22px; align-items: start; }
.challenge-main { min-width: 0; }
.challenge-main > h1 { margin: 11px 0 12px; font-family: var(--font-display); font-size: clamp(25px,3vw,36px); line-height: 1.08; letter-spacing: -.025em; }
.challenge-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.challenge-creator-row { display: flex; align-items: center; gap: 9px; }
.challenge-creator-row > a:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.challenge-creator-row > a:nth-child(2) strong { font-size: 12.5px; }
.challenge-creator-row > a:nth-child(2) span { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.challenge-participants { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10.5px; }
.challenge-participants .icon { width: 14px; height: 14px; }
.challenge-time-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0 18px; }
.challenge-time-row span, .challenge-time-row a, .challenge-time-row button { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text-soft); font-size: 10.5px; font-weight: var(--fw-semibold); }
.challenge-time-row .icon { width: 14px; height: 14px; color: var(--accent-soft); }
.challenge-rules-card, .prediction-card, .mode-b-card, .how-it-works, .sidebar-card { padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.challenge-rules-card h2, .prediction-card h2, .mode-b-card h2, .how-it-works h2, .sidebar-card h2 { font-family: var(--font-display); font-size: 17px; }
.challenge-rules-card h3 { margin: 16px 0 6px; font-size: 12px; }
.challenge-rules-card p, .challenge-rules-card li { color: var(--text-soft); font-size: 11.5px; line-height: 1.55; }
.challenge-rules-card ol { padding-left: 19px; }
.prediction-card, .mode-b-card, .how-it-works { margin-top: 15px; }
.prediction-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.prediction-card > p, .mode-b-card > p { margin: 7px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.prediction-options { display: flex; flex-direction: column; gap: 9px; }
.prediction-option { position: relative; min-height: 52px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); text-align: left; }
.prediction-option__bar { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; background: rgb(var(--brand-primary-rgb) / .1); }
.prediction-option > span:not(.prediction-option__bar), .prediction-option > strong { position: relative; z-index: 1; }
.prediction-option > span:not(.prediction-option__bar) { font-size: 12px; font-weight: var(--fw-medium); }
.prediction-option > strong { color: var(--accent-soft); font-family: var(--font-mono); font-size: 11.5px; }
.range-prediction { margin: 5px 0 14px; }
.range-prediction > div:first-child { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 10px; }
.range-prediction > div:first-child strong { color: var(--accent-soft); font-family: var(--font-mono); font-size: 34px; }
.range-prediction > div:first-child span { color: var(--muted); }
.range-prediction input { width: 100%; accent-color: var(--accent); }
.range-prediction > div:last-child { display: flex; justify-content: space-between; margin-top: 5px; color: var(--muted-2); font-family: var(--font-mono); font-size: 9px; }
.state-banner { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); color: var(--text-soft); font-size: 11px; }
.state-banner .icon { width: 19px; height: 19px; }
.state-banner button { margin-left: auto; color: var(--accent-soft); font-weight: var(--fw-semibold); }
.state-banner--warning { border-color: rgba(245,179,66,.28); background: rgba(245,179,66,.09); }
.state-banner--info { border-color: rgba(92,214,239,.25); background: rgba(92,214,239,.08); }
.state-banner--success { border-color: rgba(63,224,187,.27); background: rgba(63,224,187,.09); }
.mode-b-card { border-style: dashed; background: #0f131b; }
.mode-b-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mode-b-card__top > div { display: flex; align-items: center; gap: 8px; color: var(--text-soft); }
.mode-b-card__top .icon { width: 18px; height: 18px; color: var(--muted); }
.how-it-works { display: flex; flex-direction: column; gap: 9px; }
.how-it-works > h2 { margin-bottom: 2px; }
.how-it-works > div { display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: 9px; }
.how-it-works > div > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgb(var(--brand-primary-rgb) / .14); color: var(--accent-soft); font-family: var(--font-mono); font-size: 9px; font-weight: var(--fw-semibold); }
.how-it-works p { color: var(--muted); font-size: 11px; line-height: 1.45; }
.challenge-sidebar { display: flex; flex-direction: column; gap: 12px; }
.creator-mini { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.creator-mini > div { min-width: 0; }
.creator-mini strong, .creator-mini span { display: block; }
.creator-mini strong { font-size: 12px; }
.creator-mini span { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.leader-row { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 7px; border-radius: 8px; }
.leader-row:hover { background: var(--surface-2); }
.leader-row > span { color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
.leader-row > strong { font-size: 10.5px; }
.leader-row > small { color: var(--accent-soft); font-family: var(--font-mono); font-size: 9.5px; }
.related-challenge { display: block; padding: 10px; margin-top: 7px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.related-challenge strong, .related-challenge span { display: block; }
.related-challenge strong { font-size: 10.5px; line-height: 1.4; }
.related-challenge span { margin-top: 4px; color: var(--muted); font-size: 9px; }

/* Finance */
.balance-card--points { border-color: var(--border); background: var(--surface); }
.balance-card--points .balance-card__icon { background: rgba(63,224,187,.12); color: var(--success); }
.mode-b-balance { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; margin-top: 14px; padding: 18px; border: 1px dashed var(--border-strong); border-radius: 16px; background: #0f131b; }
.mode-b-balance h2 { margin-top: 2px; font-family: var(--font-display); font-size: 17px; }
.mode-b-balance p { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.mode-b-balance__value { grid-column: 1 / -1; color: var(--muted-2); font-family: var(--font-mono); font-size: 32px; font-weight: var(--fw-semibold); }
.funding-grid--compact { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); }
.transaction-row__copy { min-width: 0; }
.transaction-row__copy strong, .transaction-row__copy small { display: block; }
.transaction-row__copy strong { font-size: 11.5px; }
.transaction-row__copy small { margin-top: 2px; color: var(--muted); font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Creator profile */
.profile-tab-panel { padding-top: 22px; }
.about-card { padding: 18px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.about-card h2 { font-family: var(--font-display); font-size: 18px; }
.about-card h3 { margin-top: 19px; font-size: 12px; }
.about-card > p { margin-top: 9px; color: var(--text-soft); font-size: 12px; line-height: 1.65; }
.about-details { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.about-details span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text-soft); font-size: 10px; }
.about-details .icon { width: 14px; height: 14px; color: var(--accent-soft); }
.social-link-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.social-link-row { width: 100%; display: grid; grid-template-columns: 32px minmax(0,1fr) 18px; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); text-align: left; }
.social-link-row > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgb(var(--brand-primary-rgb) / .12); color: var(--accent-soft); }
.social-link-row > div { min-width: 0; }
.social-link-row strong, .social-link-row small { display: block; }
.social-link-row strong { font-size: 11px; }
.social-link-row small { margin-top: 2px; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wall-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.wall-heading h2 { font-family: var(--font-display); font-size: 20px; }
.wall-heading p { margin-top: 5px; color: var(--muted); font-size: 11px; }
.top-contributor-card--full { display: block; margin-bottom: 14px; padding: 16px; }
.top-contributor-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.top-contributor-card__header h3 { margin-top: 2px; font-family: var(--font-display); font-size: 15px; }
.top-contributor-card__header > .icon { width: 24px; height: 24px; color: var(--warning); }
.contributor-rank { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #a2763b; color: #1a1105; font-family: var(--font-mono); font-size: 9px; font-weight: var(--fw-semibold); }
.contributor-row:first-child .contributor-rank { background: var(--warning); }
.wall-message__content { min-width: 0; flex: 1; }
.wall-disclaimer { margin-top: 12px; text-align: center; }

/* Creator tools current renderer */
.creator-tools-page { max-width: 1280px; }
.creator-tools-panel { padding-top: 18px; }
.creator-tools-tabs a { flex: 0 0 auto; padding: 11px 13px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: var(--fw-medium); }
.creator-tools-tabs a.is-active { border-color: var(--accent); color: #fff; }
.creator-identity-strip > div:nth-child(2) strong, .creator-identity-strip > div:nth-child(2) small { display: block; }
.creator-identity-strip > div:nth-child(2) strong { font-size: 13px; }
.creator-identity-strip > div:nth-child(2) small { margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.profile-completion { width: min(260px, 32vw); display: grid; grid-template-columns: auto minmax(80px,1fr) auto; align-items: center; gap: 8px; }
.profile-completion span, .profile-completion strong { color: var(--muted); font-size: 9px; }
.profile-completion > div { height: 5px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.profile-completion i { display: block; height: 100%; border-radius: inherit; background: var(--success); }
.creator-overview { display: flex; flex-direction: column; gap: 13px; }
.stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.stat-card > span:first-child { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgb(var(--brand-primary-rgb) / .11); color: var(--accent-soft); }
.stat-card > span:first-child .icon { width: 19px; height: 19px; }
.stat-card h3 { margin-top: 4px; font-size: 11px; }
.stat-card p { margin-top: 4px; color: var(--muted); font-size: 9px; }
.creator-overview-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.panel-card, .form-card, .profile-settings-card { padding: 17px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.panel-card__header, .form-card__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.panel-card__header h2, .form-card__header h2 { font-family: var(--font-display); font-size: 16px; }
.panel-card__header > span { color: var(--muted); font-size: 9.5px; }
.quick-action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.quick-action-grid button, .quick-action-grid a { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 9px; min-height: 66px; padding: 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); text-align: left; }
.quick-action-grid > * > .icon { width: 34px; height: 34px; padding: 8px; border-radius: 9px; background: rgb(var(--brand-primary-rgb) / .12); color: var(--accent-soft); }
.quick-action-grid strong, .quick-action-grid small { display: block; }
.quick-action-grid strong { font-size: 10.5px; }
.quick-action-grid small { margin-top: 2px; color: var(--muted); font-size: 8.5px; }
.activity-list p { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.activity-list p:last-child { border-bottom: 0; }
.activity-list p > .icon { width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: rgb(var(--brand-primary-rgb) / .1); color: var(--accent-soft); }
.activity-list p strong, .activity-list p small { display: block; }
.activity-list p strong { font-size: 10.5px; }
.activity-list p small { margin-top: 2px; color: var(--muted); font-size: 8.5px; }
.creator-form { display: flex; flex-direction: column; gap: 12px; }
.creator-form--narrow { max-width: 720px; }
.form-card label { display: flex; flex-direction: column; gap: 6px; margin-top: 11px; color: #929bad; font-size: 13px; font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; }
.form-card input, .form-card select, .form-card textarea { width: 100%; min-height: 42px; padding: 9px 11px; color: var(--text); font-size: 11.5px; font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; }
.form-card textarea { min-height: 84px; }
.form-card label > small { color: var(--muted-2); font-size: 8.5px; font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; }
.form-grid--two { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.form-grid--three { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.profile-image-editor { position: relative; margin-bottom: 5px; }
.cover-editor { min-height: 150px; position: relative; overflow: hidden; border-radius: 13px; }
.cover-editor > button { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; background: rgba(0,0,0,.52); color: #fff; font-size: 9.5px; font-weight: var(--fw-semibold); }
.avatar-editor { display: flex; align-items: flex-end; gap: 10px; margin: -44px 0 0 18px; position: relative; z-index: 3; }
.avatar-editor > button { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 7px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text-soft); font-size: 9.5px; font-weight: var(--fw-medium); }
.chip-input { min-height: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.chip-input > span, .chip-input > button { padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--sidebar); color: var(--text-soft); font-size: 13px; font-weight: var(--fw-medium); }
.checkbox-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.checkbox-grid span { display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text-soft); font-size: 9.5px; }
.social-manager { display: flex; flex-direction: column; gap: 7px; }
.social-manager__row { display: grid; grid-template-columns: 28px 100px minmax(0,1fr) 75px 32px; align-items: center; gap: 7px; }
.social-manager__row > span { color: var(--accent-soft); }
.social-manager__row select, .social-manager__row input { min-height: 38px; padding: 7px 8px; }
.visibility-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 5px !important; margin: 0 !important; color: var(--muted) !important; font-size: 9px !important; text-transform: none !important; }
.visibility-check input { width: 15px !important; min-height: 15px !important; }
.media-management-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.media-card { overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.media-card__preview { position: relative; aspect-ratio: 9/13; display: grid; place-items: center; align-content: center; gap: 5px; color: rgba(255,255,255,.64); font-size: 9px; text-transform: uppercase; }
.media-card__preview > .icon { width: 28px; height: 28px; }
.media-card__meta { position: absolute; left: 8px; top: 8px; padding: 3px 7px; border-radius: 6px; background: rgba(0,0,0,.46); color: #fff; font-size: 8px; font-weight: var(--fw-semibold); }
.media-card__body { padding: 11px; }
.media-card__body h3 { font-size: 11px; }
.media-card__body > p { margin-top: 4px; color: var(--muted); font-size: 9.5px; line-height: 1.4; }
.media-card__body > small { display: block; margin-top: 5px; color: var(--muted-2); font-size: 8.5px; }
.media-card__actions { display: flex; gap: 5px; margin-top: 8px; }
.media-card__actions .button { flex: 1; min-height: 31px; padding: 5px 7px; font-size: 8.5px; }
.stream-management-list { display: flex; flex-direction: column; gap: 8px; }
.toggle-list { display: flex; flex-direction: column; gap: 7px; }
.toggle-list label { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); cursor: pointer; }
.toggle-list input { width: 16px; height: 16px; margin-top: 1px; flex: 0 0 auto; }
.toggle-list strong, .toggle-list small { display: block; }
.toggle-list strong { font-size: 10px; }
.toggle-list small { margin-top: 2px; color: var(--muted); font-size: 8.5px; }
.select-control { min-height: 36px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text-soft); font-size: 10px; }
.wall-management-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.wall-management-grid__wide { grid-column: 1 / -1; }
.wall-moderation-list { display: flex; flex-direction: column; gap: 8px; }
.wall-moderation-list > article { padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.wall-moderation-list__header { display: flex; align-items: center; gap: 9px; }
.wall-moderation-list__header > div { flex: 1; }
.wall-moderation-list__header strong, .wall-moderation-list__header small { display: block; }
.wall-moderation-list__header strong { font-size: 10.5px; }
.wall-moderation-list__header small { margin-top: 2px; color: var(--muted); font-size: 8.5px; }
.wall-moderation-list > article > p { margin: 9px 0; color: var(--text-soft); font-size: 10.5px; line-height: 1.45; }
.finance-stat-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.earnings-breakdown { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.performance-table { width: 100%; border-collapse: collapse; }
.performance-table th, .performance-table td { padding: 9px 7px; border-bottom: 1px solid var(--border); text-align: left; font-size: 9.5px; }
.performance-table th { color: var(--muted); font-size: 8.5px; text-transform: uppercase; }
.performance-table td:last-child { color: var(--success); }
.payout-method-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.payout-method-row strong, .payout-method-row small { display: block; }
.payout-method-row strong { font-size: 10.5px; }
.payout-method-row small { margin-top: 2px; color: var(--muted); font-size: 8.5px; }
.profile-settings-card { display: flex; flex-direction: column; gap: 8px; }
.settings-navigation { display: flex; flex-direction: column; gap: 7px; }
.settings-navigation button { display: flex; align-items: center; justify-content: space-between; min-height: 43px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text-soft); font-size: 10.5px; text-align: left; }
.settings-navigation button .icon { width: 16px; height: 16px; color: var(--accent-soft); }

/* Demo launcher and system aliases */
.demo-launcher { position: fixed; z-index: 850; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--elevated); color: var(--text-soft); font-size: 10.5px; font-weight: var(--fw-semibold); box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.demo-launcher > span { padding: 2px 5px; border-radius: 5px; background: rgba(245,179,66,.15); color: var(--warning); font-family: var(--font-mono); font-size: 7px; }
.system-banner { position: fixed; z-index: 1700; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; background: var(--warning); color: #1a1200; font-size: 11.5px; font-weight: var(--fw-medium); }
.system-banner button { margin-left: 8px; padding: 5px 10px; border-radius: 7px; background: rgba(0,0,0,.13); color: inherit; font-weight: var(--fw-semibold); }

@media (max-width: 1180px) {
  .challenge-detail-grid { grid-template-columns: 1fr; }
  .challenge-sidebar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .finance-stat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .media-management-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 1023px) {
  .reel-grid--compact { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .social-manager__row { grid-template-columns: 28px 90px minmax(0,1fr) 70px 32px; }
  .finance-stat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .wall-management-grid { grid-template-columns: 1fr; }
  .wall-management-grid__wide { grid-column: auto; }
}

@media (max-width: 767px) {
  .entry-screen { align-items: start; padding: 14px; }
  .entry-card { padding: 20px; }
  .overlay-backdrop { align-items: flex-end; padding: 0; }
  .overlay-backdrop:not(.overlay-backdrop--drawer) .dialog { width: 100%; max-width: none; max-height: 92vh; border-radius: 20px 20px 0 0; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions .button { flex: 1; }
  .reels-stage-wrap { display: block; }
  .reel-stage__info { right: 67px; }
  .reel-grid--compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .live-creator-bar { align-items: flex-start; flex-direction: column; padding-inline: 14px; }
  .live-creator-bar__actions { width: 100%; justify-content: flex-start; }
  .live-creator-bar__actions .button { flex: 1; }
  .live-challenge__footer { align-items: flex-start; flex-direction: column; }
  .challenge-sidebar { display: flex; }
  .challenge-time-row { flex-direction: column; align-items: stretch; }
  .challenge-time-row > * { width: 100%; }
  .prediction-card__heading, .mode-b-card__top { align-items: flex-start; flex-direction: column; }
  .funding-grid--compact { grid-template-columns: 1fr; }
  .wall-heading { align-items: flex-start; flex-direction: column; }
  .wall-heading .button { width: 100%; }
  .creator-identity-strip { align-items: flex-start; flex-wrap: wrap; }
  .profile-completion { width: 100%; }
  .creator-overview-grid, .earnings-breakdown { grid-template-columns: 1fr; }
  .form-grid--two, .form-grid--three { grid-template-columns: 1fr; }
  .checkbox-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .social-manager__row { grid-template-columns: 25px minmax(0,1fr) 32px; }
  .social-manager__row select { grid-column: 2; }
  .social-manager__row input { grid-column: 1 / -1; }
  .social-manager__row .visibility-check { grid-column: 1 / 3; }
  .media-management-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .finance-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .demo-launcher { display: none; }
  .mobile-sheet__nav button { width: 100%; display: grid; grid-template-columns: 24px 1fr 20px; align-items: center; gap: 12px; min-height: 52px; padding: 10px; border-radius: 12px; color: var(--text-soft); font-size: 14px; font-weight: var(--fw-medium); text-align: left; }
}

@media (max-width: 430px) {
  .dialog__header { grid-template-columns: 36px minmax(0,1fr) 36px; }
  .dialog__icon { width: 36px; height: 36px; }
  .stat-grid, .finance-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .media-management-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .checkbox-grid { grid-template-columns: 1fr 1fr; }
}

/* Niche library */
.page-heading--stack { align-items: flex-start; }
.page-heading--stack > div { max-width: 760px; }
.niches-page { max-width: 1400px; }
.niche-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 22px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: rgba(18, 22, 31, .76);
}
.niche-tag-cloud a {
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  transition: border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.niche-tag-cloud a:hover,
.niche-tag-cloud a:focus-visible { border-color: rgb(var(--brand-primary-rgb) / .62); color: #fff; transform: translateY(-1px); }
.niche-masonry {
  columns: 4 250px;
  column-gap: 12px;
}
.niche-card {
  position: relative;
  display: block;
  break-inside: avoid;
  min-height: 250px;
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .24);
  isolation: isolate;
}
.niche-card--tall { min-height: 390px; }
.niche-card--wide { min-height: 310px; }
.niche-card__preview { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.niche-card__preview::before,
.niche-reel__media::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,.24), transparent 22%),
    radial-gradient(circle at 78% 62%, rgba(255,255,255,.15), transparent 24%),
    linear-gradient(135deg, rgb(var(--brand-primary-rgb) / .62), rgba(246,65,125,.25) 48%, rgba(92,214,239,.35));
  transform: scale(1.06) rotate(-4deg);
}
.niche-card__motion,
.niche-reel__motion {
  position: absolute;
  inset: -30%;
  opacity: .62;
  background: repeating-linear-gradient(118deg, rgba(255,255,255,.14) 0 2px, transparent 2px 30px);
  animation: nichePreviewMotion 3.8s linear infinite paused;
}
.niche-card:hover .niche-card__motion,
.niche-card:focus-visible .niche-card__motion { animation-play-state: running; }
.niche-card__preview > .icon { position: relative; z-index: 2; width: 42px; height: 42px; color: rgba(255,255,255,.88); filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
.niche-card__preview .media-watermark { z-index: 2; }
.niche-card__overlay {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 42px 15px 15px;
  background: linear-gradient(180deg, transparent, rgba(4,6,10,.93));
}
.niche-card__overlay h2 { font-family: var(--font-display); font-size: 18px; }
.niche-card__overlay p { max-width: 260px; margin-top: 4px; color: #c4cad6; font-size: 10.5px; line-height: 1.4; }
.niche-card__overlay > span { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: var(--accent-soft); font-size: 10px; font-weight: var(--fw-semibold); }
.niche-load-sentinel {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  border: 1px dashed var(--border-strong);
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--fw-semibold);
}
.niche-end { padding: 26px 0; text-align: center; color: var(--muted); font-size: 11px; }

.niche-feed-page { height: calc(100vh - var(--topbar-height)); overflow: hidden; background: #07090d; }
.niche-feed-header {
  position: absolute;
  z-index: 15;
  top: calc(var(--topbar-height) + 12px);
  left: calc(var(--sidebar-width) + 22px);
  right: 24px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  max-width: 980px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(9,12,18,.78);
  backdrop-filter: blur(15px);
  box-shadow: 0 16px 44px rgba(0,0,0,.38);
}
.niche-feed-header h1 { font-family: var(--font-display); font-size: 17px; }
.niche-feed-header p { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.niche-feed-header .eyebrow { font-size: 8px; }
.niche-feed {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
}
.niche-reel {
  position: relative;
  min-height: calc(100vh - var(--topbar-height));
  display: grid;
  place-items: center;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #080a0f;
}
.niche-reel__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.niche-reel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4,6,10,.78), transparent 35%, transparent 70%, rgba(4,6,10,.58)), linear-gradient(180deg, transparent 50%, rgba(3,4,7,.95));
}
.niche-reel__motion { animation-play-state: running; animation-duration: 5.5s; }
.niche-reel__top {
  position: absolute;
  z-index: 4;
  left: 30px;
  bottom: 120px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.niche-reel__creator { display: flex; align-items: center; gap: 10px; min-width: 0; }
.niche-reel__creator > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.niche-reel__creator strong { display: flex; align-items: center; gap: 5px; font-size: 14px; }
.niche-reel__creator strong .icon { width: 16px; height: 16px; color: var(--accent-soft); }
.niche-reel__creator small { color: var(--muted); font-size: 10px; }
.niche-reel__copy {
  position: absolute;
  z-index: 4;
  left: 30px;
  right: 110px;
  bottom: 28px;
  max-width: 720px;
}
.niche-reel__copy > p { color: #eef1f6; font-size: 12.5px; line-height: 1.45; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.tag-row a { color: var(--brand-soft); font-size: 10.5px; font-weight: var(--fw-medium); }
.niche-reel__progress { height: 4px; margin-top: 13px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.24); }
.niche-reel__progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.niche-reel__actions {
  position: absolute;
  z-index: 5;
  right: 28px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.niche-reel__actions button,
.niche-action-stat {
  min-width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 9.5px;
  font-weight: var(--fw-semibold);
  text-shadow: 0 2px 8px rgba(0,0,0,.75);
}
.niche-reel__actions .icon,
.niche-action-stat .icon { width: 28px; height: 28px; filter: drop-shadow(0 3px 7px rgba(0,0,0,.62)); }
.niche-reel__actions button.is-liked { color: var(--live); }
.niche-reel__actions small { font-size: 8.5px; }

/* Creator verification */
.verification-page { max-width: 1040px; }
.verification-progress {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
}
.verification-progress li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
}
.verification-progress li > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-family: var(--font-mono); font-size: 10px; }
.verification-progress li strong { font-size: 11px; }
.verification-progress li.is-current { border-color: rgb(var(--brand-primary-rgb) / .55); color: #fff; background: rgb(var(--brand-primary-rgb) / .11); }
.verification-progress li.is-current > span { background: var(--brand-primary-hover); color: #fff; }
.verification-progress li.is-complete { color: var(--success); }
.verification-progress li.is-complete > span { background: rgba(63,224,187,.14); }
.verification-progress .icon { width: 15px; height: 15px; }
.verification-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.account-brand { display: flex; justify-content: center; margin: -4px auto 20px; }
.account-brand img { width: min(100%, 280px); height: auto; object-fit: contain; }
.verification-card__heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; }
.verification-card__heading h2 { font-family: var(--font-display); font-size: 20px; }
.verification-card__heading p { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.step-badge { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: rgb(var(--brand-primary-rgb) / .16); color: var(--accent-soft); font-family: var(--font-mono); font-size: 9px; font-weight: var(--fw-semibold); }
.verification-card > h3 { margin: 20px 0 8px; font-family: var(--font-display); font-size: 14px; }
.verification-link-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.verification-link-summary > * { padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 9.5px; }
.verification-link-summary strong.is-valid { color: var(--success); border-color: rgba(63,224,187,.28); }
.verification-link-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.verification-link-list--compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
.verification-link-row {
  display: grid;
  grid-template-columns: 20px minmax(110px,.65fr) minmax(150px,1.35fr);
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
}
.verification-link-row.is-selected { border-color: rgb(var(--brand-primary-rgb) / .42); background: rgb(var(--brand-primary-rgb) / .07); }
.verification-link-row > input[type="checkbox"] { width: 16px; height: 16px; }
.verification-link-row > input[type="url"] { min-width: 0; min-height: 36px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--sidebar); color: var(--text); font-size: 10px; outline: 0; }
.verification-link-row > input[type="url"]:focus { border-color: rgb(var(--brand-primary-rgb) / .64); }
.verification-link-row > input[type="url"]:disabled { opacity: .42; }
.verification-link-row__site strong, .verification-link-row__site small { display: block; }
.verification-link-row__site strong { font-size: 10.5px; }
.verification-link-row__site small { margin-top: 2px; color: var(--muted); font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-link-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 11px; }
.custom-link-card strong { font-size: 11px; }
.custom-link-card p { margin-top: 2px; color: var(--muted); font-size: 9px; }
.verification-requirements { margin: 12px 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.verification-requirements h3 { font-size: 13px; }
.verification-requirements p, .verification-requirements li { color: var(--text-soft); font-size: 10px; line-height: 1.55; }
.verification-requirements ul { margin: 8px 0 0; padding-left: 18px; }
.verification-upload-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin: 14px 0; }
.verification-upload { position: relative; min-height: 185px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 18px; border: 1.5px dashed rgb(var(--brand-primary-rgb) / .45); border-radius: 14px; background: rgb(var(--brand-primary-rgb) / .05); text-align: center; cursor: pointer; }
.verification-upload.has-file { border-style: solid; border-color: rgba(63,224,187,.36); background: rgba(63,224,187,.05); }
.verification-upload > input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.verification-upload__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--surface-2); color: var(--accent-soft); }
.verification-upload__icon .icon { width: 24px; height: 24px; }
.verification-upload strong { font-size: 12px; }
.verification-upload small { max-width: 250px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.verification-consent { margin: 14px 0 !important; }
.verification-review { display: flex; flex-direction: column; gap: 1px; overflow: hidden; margin: 15px 0; border: 1px solid var(--border); border-radius: 12px; }
.verification-review > div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface-2); }
.verification-review span { color: var(--muted); font-size: 10px; }
.verification-review strong { display: flex; align-items: center; gap: 5px; font-size: 10.5px; }
.verification-review .icon { width: 15px; height: 15px; color: var(--success); }
.verification-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.verification-actions .button:disabled { opacity: .42; cursor: not-allowed; }
.verification-complete { max-width: 650px; margin: 0 auto; text-align: center; }
.verification-complete__icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 13px; border-radius: 50%; background: rgba(63,224,187,.13); color: var(--success); }
.verification-complete__icon .icon { width: 32px; height: 32px; }
.verification-complete h2 { font-family: var(--font-display); font-size: 22px; }
.verification-complete > p { margin: 7px 0 15px; color: var(--muted); font-size: 11px; }
.verification-complete .button { margin-top: 14px; }
.button--light { background: #fff; color: #11141b; border-color: #fff; }

@keyframes nichePreviewMotion {
  from { transform: translate3d(-6%, -3%, 0) rotate(0deg); }
  to { transform: translate3d(6%, 3%, 0) rotate(3deg); }
}

@media (max-width: 1023px) {
  .niche-feed-header { left: 92px; }
  .verification-link-list { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .niche-masonry { columns: 2 145px; column-gap: 8px; }
  .niche-card { min-height: 220px; margin-bottom: 8px; }
  .niche-card--tall { min-height: 310px; }
  .niche-card--wide { min-height: 245px; }
  .niche-card__overlay { padding: 36px 11px 11px; }
  .niche-card__overlay h2 { font-size: 14px; }
  .niche-card__overlay p { display: none; }
  .niche-card__overlay > span { font-size: 8.5px; }
  .niche-feed-page { height: calc(100vh - var(--topbar-height) - var(--mobile-nav-height)); }
  .niche-feed-header { position: fixed; top: 76px; left: 12px; right: 12px; grid-template-columns: auto 1fr; padding: 9px; }
  .niche-feed-header > .button:last-child { grid-column: 1 / -1; width: 100%; }
  .niche-feed-header p { display: none; }
  .niche-reel { min-height: calc(100vh - var(--topbar-height) - var(--mobile-nav-height)); }
  .niche-reel__top { left: 15px; right: 15px; bottom: 115px; }
  .niche-reel__copy { left: 15px; right: 82px; bottom: 20px; }
  .niche-reel__actions { right: 12px; bottom: 20px; gap: 11px; }
  .niche-reel__actions .icon, .niche-action-stat .icon { width: 25px; height: 25px; }
  .verification-progress { grid-template-columns: 1fr; }
  .verification-progress li { min-height: 44px; }
  .verification-link-row { grid-template-columns: 20px 1fr; }
  .verification-link-row > input[type="url"] { grid-column: 1 / -1; }
  .verification-upload-grid { grid-template-columns: 1fr; }
  .verification-actions { flex-direction: column-reverse; }
  .verification-actions .button { width: 100%; }
}

@media (max-width: 430px) {
  .niche-masonry { columns: 2 130px; }
  .niche-tag-cloud { gap: 6px; padding: 10px; }
  .niche-tag-cloud a { padding: 7px 10px; font-size: 9.5px; }
  .niche-reel__creator strong { font-size: 12px; }
  .niche-reel__copy > p { font-size: 11px; }
}

/* Creator public details and preferences */
.profile-detail-highlights {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
}
.profile-detail-highlights > span,
.profile-detail-highlights__link {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid rgb(var(--brand-primary-rgb) / .23);
  border-radius: 999px;
  background: rgb(var(--brand-primary-rgb) / .08);
  color: var(--brand-soft);
  font-size: 10.5px;
  font-weight: var(--fw-medium);
}
.profile-detail-highlights__link { color: var(--accent-soft); border-color: rgb(var(--brand-primary-rgb) / .38); }
.public-details-page { display: flex; flex-direction: column; gap: 14px; }
.public-details-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 2px;
}
.public-details-heading h2 { margin-top: 3px; font-family: var(--font-display); font-size: 21px; }
.public-details-heading p { max-width: 660px; margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.public-details-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.public-details-card {
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.public-details-card__header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 13px; }
.public-details-card__header > .icon { width: 21px; height: 21px; color: var(--accent-soft); }
.public-details-card__header h3 { font-family: var(--font-display); font-size: 15px; }
.public-details-card__header p { margin-top: 3px; color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.public-detail-list { display: flex; flex-direction: column; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; }
.public-detail-row { display: grid; grid-template-columns: minmax(110px,.65fr) minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; background: var(--surface-2); }
.public-detail-row + .public-detail-row { border-top: 1px solid var(--border); }
.public-detail-row > span:first-child { color: var(--muted); font-size: 10px; }
.public-detail-row strong { font-size: 11px; line-height: 1.35; text-align: right; }
.visibility-badge { display: inline-flex; align-items: center; justify-content: center; padding: 3px 7px; border-radius: 999px; font-size: 8px; font-weight: var(--fw-semibold); letter-spacing: .03em; text-transform: uppercase; }
.visibility-badge--followers { background: rgba(92,214,239,.12); color: var(--info); border: 1px solid rgba(92,214,239,.22); }
.preference-block + .preference-block { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border); }
.preference-block__heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.preference-block__heading h4 { font-size: 11px; }
.preference-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.preference-tags > span { padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-soft); font-size: 9.5px; font-weight: var(--fw-semibold); }
.preference-tags--tag > span { border-color: rgb(var(--brand-primary-rgb) / .25); background: rgb(var(--brand-primary-rgb) / .08); color: var(--brand-soft); }
.preference-tags--positive > span { border-color: rgba(63,224,187,.23); background: rgba(63,224,187,.07); color: #8ff1d7; }
.preference-tags--negative > span { border-color: rgba(245,179,66,.23); background: rgba(245,179,66,.07); color: #ffd28a; }
.preference-tags--boundary > span { border-color: rgba(246,65,125,.24); background: rgba(246,65,125,.07); color: #ff9abb; }
.details-consent-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid rgb(var(--brand-primary-rgb) / .24);
  border-radius: 12px;
  background: rgb(var(--brand-primary-rgb) / .07);
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.55;
}
.details-consent-notice .icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent-soft); }
.muted-copy { color: var(--muted); font-size: 10px; }
.public-details-editor .form-card__header p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.public-field-editor-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 13px; }
.public-field-editor {
  display: grid;
  grid-template-columns: minmax(0,1fr) 132px;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.public-field-editor__main,
.public-field-editor__main > label,
.public-field-editor__visibility,
.public-wide-field > div,
.public-wide-field > div > label { display: flex; flex-direction: column; gap: 6px; }
.public-field-editor__main > label,
.public-field-editor__visibility,
.public-wide-field label { color: #929bad; font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; }
.public-field-editor input,
.public-field-editor select,
.public-wide-field textarea,
.public-wide-field select {
  width: 100%;
  min-height: 39px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--sidebar);
  color: var(--text);
  font: inherit;
  font-size: 10.5px;
  outline: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-semibold);
}
.public-field-editor input:focus,
.public-field-editor select:focus,
.public-wide-field textarea:focus,
.public-wide-field select:focus { border-color: rgb(var(--brand-primary-rgb) / .64); box-shadow: 0 0 0 3px rgb(var(--brand-primary-rgb) / .1); }
.public-field-editor__main > small,
.public-wide-field small { color: var(--muted); font-size: 8.5px; line-height: 1.45; }
.measurement-input { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; }
.measurement-input > span { min-width: 30px; color: var(--muted); font-size: 10px; text-transform: lowercase; }
.sensitive-preferences-editor { margin-top: 13px; padding: 14px; border: 1px solid rgba(246,65,125,.17); border-radius: 13px; background: rgba(246,65,125,.025); }
.sensitive-preferences-editor__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.sensitive-preferences-editor__heading h3 { margin-top: 3px; font-family: var(--font-display); font-size: 14px; }
.public-wide-field { display: grid; grid-template-columns: minmax(0,1fr) 132px; gap: 10px; align-items: start; padding: 11px 0; }
.public-wide-field + .public-wide-field { border-top: 1px solid var(--border); }
.public-wide-field textarea { min-height: 58px; resize: vertical; }

@media (max-width: 900px) {
  .public-details-layout { grid-template-columns: 1fr; }
  .public-field-editor-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .public-details-heading { flex-direction: column; }
  .public-detail-row { grid-template-columns: minmax(90px,.7fr) minmax(0,1fr); }
  .public-detail-row .visibility-badge { grid-column: 2; justify-self: end; }
  .public-field-editor,
  .public-wide-field { grid-template-columns: 1fr; }
  .public-field-editor__visibility { max-width: none; }
}

/* Release 6: creator subscriptions and subscriber-only content */
.button--subscriber { background: var(--brand-action-gradient); border-color: var(--brand-border); color: #fff; box-shadow: 0 8px 24px rgb(var(--brand-primary-rgb) / .22); }
.button--subscriber:hover { filter: brightness(1.07); transform: translateY(-1px); }
.button--subscriber-active { background: rgba(63,224,187,.12); border-color: rgba(63,224,187,.32); color: #3FE0BB; }
.status-chip--subscriber { background: rgb(var(--brand-primary-rgb) / .14); border: 1px solid rgb(var(--brand-primary-rgb) / .28); color: var(--brand-soft); }
.subscriber-preview { border: 1px solid rgb(var(--brand-primary-rgb) / .18); border-radius: 18px; padding: 18px; background: linear-gradient(145deg, rgb(var(--brand-primary-rgb) / .07), rgba(21,17,27,.86)); }
.subscriber-preview__head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }
.subscriber-preview__head p { max-width:720px; margin:9px 0 0; color:var(--muted); font-size:12.5px; line-height:1.55; }
.subscriber-content-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.subscriber-content-grid--full { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.subscriber-content-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:15px; background:var(--surface); }
.subscriber-content-card__media { position:relative; min-height:150px; display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:34px; color:rgba(255,255,255,.74); }
.subscriber-content-card.is-locked .subscriber-content-card__media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,10,16,.18),rgba(8,10,16,.7)); backdrop-filter:blur(5px); }
.subscriber-content-card.is-locked .subscriber-content-card__media svg { position:relative; z-index:2; }
.subscriber-content-card__status { position:absolute; z-index:3; left:10px; bottom:10px; padding:4px 8px; border-radius:999px; background:rgba(11,14,20,.76); border:1px solid rgba(255,255,255,.13); color:#fff; font-size:9.5px; font-weight: var(--fw-semibold); text-transform:uppercase; letter-spacing:.05em; }
.subscriber-content-card__body { padding:13px; }
.subscriber-content-card__body h3 { margin:4px 0 6px; font-size:14px; }
.subscriber-content-card__body p { min-height:38px; margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.subscriber-content-card__meta { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:11px; color:#8b93a5; font-size:10.5px; font-weight: var(--fw-semibold); text-transform:capitalize; }
.subscriber-content-card__meta span { display:inline-flex; align-items:center; gap:4px; }
.subscriber-content-card__meta svg { width:13px; height:13px; }
.subscriber-hub { display:flex; flex-direction:column; gap:16px; }
.subscriber-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:22px; border:1px solid rgb(var(--brand-primary-rgb) / .28); border-radius:18px; background:radial-gradient(650px 260px at 0% 0%,rgb(var(--brand-primary-rgb) / .2),transparent 66%),var(--surface); }
.subscriber-hero h2 { margin:4px 0 8px; font-family:var(--font-display); font-size:24px; }
.subscriber-hero p { max-width:700px; margin:0; color:var(--muted); line-height:1.6; }
.subscriber-hero__price { flex:0 0 auto; min-width:170px; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.subscriber-hero__price strong { font-family:var(--font-mono); font-size:24px; }
.subscriber-hero__price span { color:var(--muted); font-size:11px; margin-bottom:9px; }
.subscriber-benefits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.subscriber-benefits span { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); color:#DDE2EC; font-size:12px; }
.subscriber-benefits svg { width:16px; height:16px; color:#3FE0BB; }
.subscriber-benefits--dialog { grid-template-columns:1fr; margin:14px 0; }
.subscriber-filter-row { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; }
.subscriber-filter-row button { flex:0 0 auto; padding:7px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:11px; font-weight: var(--fw-semibold); }
.subscriber-filter-row button.is-active { border-color:rgb(var(--brand-primary-rgb) / .45); background:rgb(var(--brand-primary-rgb) / .16); color:#fff; }
.subscriber-disclaimer { display:flex; align-items:flex-start; gap:9px; padding:13px 14px; border:1px solid rgba(92,214,239,.18); border-radius:12px; background:rgba(92,214,239,.06); color:#AEB6C6; font-size:11.5px; line-height:1.55; }
.subscription-dialog-head { display:flex; align-items:flex-start; gap:13px; }
.subscription-dialog-head h3 { margin:6px 0 3px; font-size:18px; }
.subscription-dialog-head p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.subscription-price-panel { display:flex; align-items:baseline; gap:9px; margin:16px 0; padding:15px; border:1px solid rgb(var(--brand-primary-rgb) / .24); border-radius:13px; background:rgb(var(--brand-primary-rgb) / .09); }
.subscription-price-panel strong { font-family:var(--font-mono); font-size:27px; }
.subscription-price-panel span { color:var(--muted); font-size:12px; }
.creator-subscriptions { display:flex; flex-direction:column; gap:16px; }
.subscription-admin-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:14px; }
.subscription-settings-card .toggle-row { margin-bottom:12px; }
.subscription-benefit-editor { display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.subscription-benefit-editor > label { display:flex; align-items:center; gap:7px; }
.subscription-benefit-editor input { flex:1; }
.finance-stat-grid--subscription { grid-template-columns:repeat(2,minmax(0,1fr)); }
.subscriber-library-manager { margin-top:0; }
.subscriber-management-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:11px; }
.subscriber-management-card { display:grid; grid-template-columns:96px 1fr; gap:12px; padding:11px; border:1px solid var(--border); border-radius:13px; background:var(--surface-2); }
.subscriber-management-card__media { min-height:105px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border-radius:10px; color:#fff; font-size:26px; text-align:center; }
.subscriber-management-card__media span { max-width:80px; font-size:9px; font-weight: var(--fw-semibold); text-transform:uppercase; letter-spacing:.05em; }
.subscriber-management-card h3 { margin:7px 0 4px; font-size:13px; }
.subscriber-management-card p { margin:0 0 7px; color:var(--muted); font-size:11px; line-height:1.45; }
.subscriber-management-card small { color:#727C90; font-size:10px; }
.viewer-subscription-list { display:flex; flex-direction:column; gap:8px; }
.viewer-subscription-row { display:flex; align-items:center; gap:11px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.viewer-subscription-row > div { flex:1; min-width:0; }
.viewer-subscription-row strong,.viewer-subscription-row small { display:block; }
.viewer-subscription-row small { margin-top:3px; color:var(--muted); font-size:11px; }

@media (max-width: 900px) {
  .subscriber-content-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .subscription-admin-grid { grid-template-columns:1fr; }
  .subscriber-benefits { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .subscriber-preview__head,.subscriber-hero { flex-direction:column; }
  .subscriber-preview__head .button { width:100%; }
  .subscriber-content-grid,.subscriber-content-grid--full { grid-template-columns:1fr; }
  .subscriber-hero__price { width:100%; align-items:flex-start; }
  .subscriber-hero__price .button { width:100%; }
  .subscriber-management-card { grid-template-columns:78px 1fr; }
  .viewer-subscription-row { align-items:flex-start; flex-wrap:wrap; }
  .viewer-subscription-row .button { width:100%; }
}
.subscriber-content-card.is-unlocked { border-color: rgb(var(--brand-primary-rgb) / .18); }

.public-media-card__totals { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); color:var(--muted); font-size:10px; padding-top:4px; }
.public-media-card__totals span { display:inline-flex; align-items:center; gap:4px; }
.public-media-card__totals .icon { width:13px; height:13px; }
.media-warning { position:absolute; top:42px; left:10px; max-width:calc(100% - 20px); z-index:2; }
.reel-content-warning { position:absolute; top:56px; left:16px; right:80px; z-index:4; display:flex; align-items:center; gap:9px; width:fit-content; max-width:calc(100% - 96px); padding:10px 13px; border:1px solid rgb(245 158 11 / .45); border-radius:var(--radius); background:rgb(17 18 25 / .92); color:var(--text); font-size:12px; }
.reel-content-warning span { color:var(--muted); }
.reel-action-stat { display:inline-flex; flex-direction:column; align-items:center; gap:4px; color:var(--text); font-size:10px; }
@media (max-width:700px) {
  .reel-content-warning { right:68px; max-width:calc(100% - 84px); flex-wrap:wrap; }
}

/* ==========================================================================
   UX remediation batch 1: shared responsive foundations
   ========================================================================== */

.icon-button {
  min-width: 44px;
  min-height: 44px;
}
.icon-button--sm {
  width: 44px;
  height: 44px;
}
.mobile-nav__link {
  min-height: 44px;
}
.profile-tab,
.content-tab,
.creator-tools-tabs a,
.mini-tab,
.live-mobile-tabs button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.niche-chip:not(.niche-chip--static),
button.filter-chip,
.chip-input button {
  min-height: 44px;
}

.preference-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.settings-list > .preference-toggle-row,
.preference-toggle-list > .preference-toggle-row,
.form-card > .preference-toggle-row {
  width: 100%;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}
.settings-list > .preference-toggle-row {
  background: var(--surface);
}
.preference-toggle-row__icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--accent-soft);
}
.preference-toggle-row__icon .icon {
  width: 20px;
  height: 20px;
}
.preference-toggle-row__text {
  min-width: 0;
}
.preference-toggle-row__text strong,
.preference-toggle-row__text small {
  display: block;
}
.preference-toggle-row__text strong {
  color: var(--text);
  font-size: 12.5px;
}
.preference-toggle-row__text small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: normal;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-transform: none;
}
.preference-toggle-row > .preference-toggle-row__control {
  appearance: none;
  width: 44px;
  min-width: 44px;
  height: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  justify-self: end;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--elevated);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.preference-toggle-row > .preference-toggle-row__control::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 2px;
  border-radius: 50%;
  background: var(--text-soft);
  transition: transform 140ms ease, background-color 140ms ease;
}
.preference-toggle-row > .preference-toggle-row__control:checked {
  border-color: var(--brand-border);
  background: var(--brand-primary);
}
.preference-toggle-row > .preference-toggle-row__control:checked::after {
  transform: translateX(20px);
  background: #fff;
}
.preference-toggle-row > .preference-toggle-row__control:focus-visible {
  outline: 3px solid var(--brand-focus);
  outline-offset: 3px;
}

.creator-tools-section-header__copy {
  flex: 1;
  min-width: 0;
}
.creator-tools-section-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}
.creator-tools-page,
.creator-tools-panel,
.creator-tools-panel > * {
  min-width: 0;
  max-width: 100%;
}
.creator-tools-tabs {
  max-width: 100%;
}

.external-url {
  max-height: 4.35em;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  line-height: 1.45;
}

.upload-dialog__form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

@media (max-width: 640px) {
  .creator-tools-panel .panel-heading,
  .creator-tools-section-header {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .creator-tools-panel .panel-heading > :first-child,
  .creator-tools-section-header__copy {
    width: 100%;
    min-width: 0;
  }
  .creator-tools-panel .panel-heading > .creator-tools-section-header__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .creator-tools-section-header__copy > * {
    width: 100%;
  }
  .creator-tools-panel .panel-heading > :not(:first-child),
  .creator-tools-section-header__actions {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
  }
  .creator-tools-section-header__actions {
    justify-content: flex-start;
  }
  .creator-tools-section-header__actions > * {
    max-width: 100%;
  }
  .creator-tools-section-header__actions > .button:only-child,
  .creator-tools-panel .panel-heading > .button,
  .creator-tools-panel .panel-heading > select,
  .creator-tools-panel .panel-heading > .search-box {
    width: 100%;
  }
}

/* One-sweep Explore · compact, content-first controls */
.explore-page .page-intro--compact {
  margin-bottom: 12px;
}
.explore-command {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 9px;
  align-items: center;
}
.explore-command__search {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}
.explore-command__search input {
  min-width: 0;
}
.explore-sort .select-control {
  min-width: 132px;
  min-height: 44px;
}
.explore-command__filters {
  position: relative;
  min-height: 44px;
  white-space: nowrap;
}
.explore-filter-count {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgb(var(--brand-primary-rgb) / .23);
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-semibold);
}
.explore-tabs {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  margin-top: 12px;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.explore-tabs::-webkit-scrollbar {
  display: none;
}
.explore-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 1px 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--fw-medium);
}
.explore-tabs button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 999px 999px 0 0;
  background: transparent;
}
.explore-tabs button.is-active {
  color: #fff;
  font-weight: var(--fw-semibold);
}
.explore-tabs button.is-active::after {
  background: var(--brand-gradient);
}
.explore-active-filters {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin-top: 10px;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.explore-active-filters::-webkit-scrollbar {
  display: none;
}
.explore-active-filters .filter-chip {
  flex: 0 0 auto;
}
.explore-active-filters .icon {
  width: 14px;
  height: 14px;
}
.explore-content {
  margin-top: 14px;
}
.explore-filter-drawer {
  width: min(100%, 410px);
}
.explore-filter-drawer__body {
  padding: 18px;
}
.explore-filter-fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}
.explore-filter-fieldset + .explore-filter-fieldset {
  margin-top: 22px;
}
.explore-filter-fieldset legend {
  margin-bottom: 9px;
  color: var(--text);
  font-size: 13px;
  font-weight: var(--fw-semibold);
}
.explore-filter-options {
  display: grid;
  gap: 8px;
}
.explore-filter-option {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: var(--fw-medium);
  text-align: left;
}
.explore-filter-option:hover {
  border-color: rgb(var(--brand-primary-rgb) / .42);
}
.explore-filter-option.is-active {
  border-color: rgb(var(--brand-primary-rgb) / .72);
  background: rgb(var(--brand-primary-rgb) / .13);
  color: #fff;
}
.explore-filter-option__indicator {
  width: 17px;
  height: 17px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
}
.explore-filter-option.is-active .explore-filter-option__indicator {
  border: 5px solid var(--accent);
}
.explore-filter-option > .icon {
  width: 17px;
  height: 17px;
  color: var(--accent-soft);
}
.explore-filter-drawer__actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 13px 16px calc(13px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--sidebar);
}

@media (max-width: 767px) {
  .explore-page .page-intro--compact {
    margin-bottom: 10px;
  }
  .explore-page .page-intro--compact p {
    display: none;
  }
  .explore-command {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .explore-command__search {
    grid-column: 1 / -1;
  }
  .explore-sort {
    min-width: 0;
  }
  .explore-sort .select-control {
    width: 100%;
    min-width: 0;
  }
  .explore-tabs {
    gap: 20px;
    margin-top: 9px;
  }
  .explore-content {
    margin-top: 12px;
  }
  .explore-filter-backdrop {
    align-items: flex-end;
    justify-content: center;
  }
  .explore-filter-drawer {
    width: 100%;
    height: min(82dvh, 680px);
    border-top: 1px solid var(--border-strong);
    border-left: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 60px rgba(0,0,0,.58);
  }
  .explore-filter-drawer .drawer__header {
    position: sticky;
    z-index: 2;
    top: 0;
    background: var(--sidebar);
  }
  .explore-filter-drawer__body {
    padding: 16px;
    overscroll-behavior: contain;
  }
}

@media (max-width: 340px) {
  .explore-filter-drawer__actions {
    grid-template-columns: 1fr;
  }
  .explore-tabs {
    gap: 17px;
  }
}

/* Payment P1B · native card-to-crypto sandbox flow */
.funding-page {
  --funding-btc: #f7931a;
  --funding-pol: #8247e5;
  --funding-usdc: #2775ca;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.funding-header,
.funding-buy-hero,
.funding-account-card,
.funding-provider-card__head,
.funding-selection-summary,
.funding-review__headline,
.funding-estimate__asset,
.funding-form-actions {
  display: flex;
  align-items: center;
}
.funding-header {
  justify-content: space-between;
  gap: 18px;
}
.funding-header > div { min-width: 0; flex: 1; }
.funding-header > a,
.funding-recent .section-heading a,
.funding-selection-summary > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.funding-header h1 {
  margin-top: 5px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
}
.funding-header p {
  max-width: 670px;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.55;
}
.funding-preview-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-color: rgba(255, 111, 193, 0.3);
  background: linear-gradient(135deg, rgba(255, 61, 166, 0.1), rgba(109, 40, 232, 0.08));
}
.funding-preview-banner > .icon {
  flex: 0 0 auto;
  color: var(--brand-soft);
}
.funding-preview-banner > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.funding-preview-banner strong { font-weight: var(--fw-semibold); }
.funding-preview-banner small {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.5;
}
.funding-preview-label {
  width: fit-content;
  max-width: 100%;
  color: var(--brand-soft);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}
.funding-action-note {
  max-width: 600px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.funding-provider-card--preview {
  border-style: dashed;
  background: linear-gradient(180deg, rgba(176, 45, 224, 0.04), var(--surface) 34%);
}
.funding-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: var(--fw-medium);
}
.funding-back:hover { color: var(--brand-soft); }
.funding-landing { display: grid; gap: 20px; }
.funding-buy-hero {
  position: relative;
  gap: 22px;
  min-height: 216px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-modal);
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 61, 166, 0.2), transparent 40%),
    linear-gradient(135deg, rgba(176, 45, 224, 0.18), rgba(21, 17, 27, 0.94) 54%);
  box-shadow: var(--shadow-card);
}
.funding-buy-hero::after {
  position: absolute;
  right: -70px;
  bottom: -120px;
  width: 280px;
  height: 280px;
  border: 42px solid rgba(255, 255, 255, 0.025);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.funding-buy-hero__mark,
.funding-checkout-boundary__icon,
.funding-status-card__icon {
  display: grid;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 16px;
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 12px 30px rgba(176, 45, 224, 0.28);
}
.funding-buy-hero__mark .icon,
.funding-checkout-boundary__icon .icon,
.funding-status-card__icon .icon { width: 28px; height: 28px; }
.funding-buy-hero > div:nth-child(2) { flex: 1; min-width: 0; }
.funding-buy-hero h2 {
  margin-top: 5px;
  font-size: 28px;
  font-weight: var(--fw-bold);
}
.funding-buy-hero p {
  max-width: 580px;
  margin-top: 9px;
  color: var(--text-soft);
  line-height: 1.55;
}
.funding-buy-hero > .button { position: relative; z-index: 1; flex: 0 0 auto; }
.button--large { min-height: var(--btn-h-lg); padding-inline: 22px; }
.funding-asset-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.funding-asset-pills > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: var(--fw-medium);
}
.funding-coin {
  display: inline-grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.funding-asset-pills .funding-coin { width: 24px; height: 24px; font-size: 12px; }
.funding-coin--btc { background: var(--funding-btc); }
.funding-coin--pol { background: var(--funding-pol); }
.funding-coin--usdc { background: var(--funding-usdc); }
.funding-coin--xmr { background: #ff6600; }
.funding-account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.funding-account-card {
  gap: 12px;
  min-width: 0;
  min-height: 104px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.funding-account-card > div:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.funding-account-card span, .funding-account-card small { color: var(--muted); font-size: 12px; }
.funding-account-card strong { overflow-wrap: anywhere; font-size: 14px; font-weight: var(--fw-semibold); }
.funding-account-card .button {
  flex: 0 0 auto;
  min-height: 44px;
}
.funding-recent { margin-top: 0; }
.funding-recent .section-heading a { color: var(--brand-soft); font-size: 14px; font-weight: var(--fw-medium); }
.funding-order-list { display: grid; gap: 2px; }
.funding-order-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 11px 12px;
  border-radius: 12px;
  transition: background var(--transition-control);
}
.funding-order-row:hover { background: var(--surface-2); }
.funding-order-row__copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.funding-order-row__copy strong { font-size: 14px; font-weight: var(--fw-semibold); }
.funding-order-row__copy small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.funding-buy-layout,
.funding-review-layout,
.funding-status-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  align-items: start;
  gap: 18px;
}
.funding-form,
.funding-estimate,
.funding-review,
.funding-safety-card,
.funding-checkout-boundary,
.funding-status-card,
.funding-timeline,
.funding-deposit > .panel {
  padding: 24px;
}
.funding-form { display: grid; gap: 22px; }
.funding-form .panel-heading { margin: 0; }
.funding-choice-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.funding-choice-group legend,
.funding-field > span {
  display: block;
  margin-bottom: 9px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: var(--fw-medium);
}
.funding-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.funding-asset-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 74px;
  padding: 13px;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color var(--transition-control), background var(--transition-control);
}
.funding-asset-choice:hover,
.funding-asset-choice.is-selected { border-color: var(--brand-border); background: var(--brand-selected); }
.funding-asset-choice input { position: absolute; opacity: 0; pointer-events: none; }
.funding-asset-choice > span:nth-of-type(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.funding-asset-choice strong { font-size: 14px; font-weight: var(--fw-semibold); }
.funding-asset-choice small { color: var(--muted); font-size: 12px; }
.funding-asset-choice > .icon { color: transparent; }
.funding-asset-choice.is-selected > .icon { color: var(--brand-soft); }
.funding-asset-choice:has(input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}
.funding-field { display: block; }
.funding-field input,
.funding-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  outline: 0;
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
}
.funding-field input:focus,
.funding-field select:focus {
  border-color: var(--focus-ring-color);
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 1px;
}
.funding-field small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.funding-field .field-error { color: var(--danger); }
.funding-quick-amounts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: -14px;
}
.funding-quick-amounts button {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.funding-quick-amounts button:hover { border-color: var(--brand-border); color: var(--brand-soft); }
.funding-region-control {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.funding-region-control > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.funding-region-control span,
.funding-region-control small { color: var(--muted); font-size: 11px; }
.funding-region-control strong { font-size: 14px; font-weight: var(--fw-semibold); }
.funding-region-control label { display: grid; gap: 3px; }
.funding-region-control input {
  width: 74px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  text-transform: uppercase;
}
.funding-region-control input:focus {
  border-color: var(--focus-ring-color);
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 1px;
}
.funding-region-control .field-error { max-width: 130px; color: var(--danger); }
.funding-amount-control { position: relative; }
.funding-amount-control > span {
  position: absolute;
  top: 50%;
  left: 15px;
  z-index: 1;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-weight: var(--fw-semibold);
}
.funding-amount-control input {
  height: 58px;
  padding-left: 42px;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: var(--fw-medium);
}
.funding-form-actions { justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.funding-estimate { position: sticky; top: calc(var(--topbar-height) + 20px); display: grid; gap: 18px; }
.funding-estimate__asset { gap: 12px; }
.funding-estimate__asset > div { display: flex; flex-direction: column; gap: 3px; }
.funding-estimate__asset strong { font-weight: var(--fw-semibold); }
.funding-estimate__asset small { color: var(--muted); }
.funding-estimate dl,
.funding-provider-card dl,
.funding-fee-list { display: grid; gap: 0; margin: 0; }
.funding-estimate dl > div,
.funding-provider-card dl > div,
.funding-fee-list > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.funding-estimate dt,
.funding-provider-card dt,
.funding-fee-list dt { color: var(--muted); font-size: 13px; }
.funding-estimate dd,
.funding-provider-card dd,
.funding-fee-list dd { margin: 0; text-align: right; font-size: 13px; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.funding-fine-print,
.funding-disclosure,
.funding-last-updated { color: var(--muted); font-size: 12px; line-height: 1.5; }
.funding-selection-summary {
  gap: 10px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
.funding-selection-summary > span { color: var(--brand-soft); font-family: var(--font-mono); font-size: 15px; font-weight: var(--fw-semibold); }
.funding-selection-summary > strong { flex: 1; font-size: 14px; font-weight: var(--fw-medium); }
.funding-selection-summary > a { color: var(--brand-soft); font-size: 13px; font-weight: var(--fw-medium); }
.funding-providers { display: grid; gap: 16px; }
.funding-sort {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.funding-sort button {
  min-height: 44px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
}
.funding-sort button.is-active { background: var(--brand-selected); color: var(--text); }
.funding-provider-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.funding-provider-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 17px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.funding-provider-card:has(.status-chip--brand) { border-color: var(--brand-border); box-shadow: 0 10px 35px rgba(176, 45, 224, 0.12); }
.funding-provider-card__head { gap: 10px; min-height: 44px; }
.funding-provider-card__head > div:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.funding-provider-card__head h3 { font-size: 15px; font-weight: var(--fw-semibold); }
.funding-provider-card__head span:not(.status-chip) { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.funding-provider-mark {
  display: grid;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  background: var(--brand-selected);
  color: var(--brand-soft);
  font-weight: var(--fw-semibold);
}
.status-chip--brand { border-color: var(--brand-border); background: var(--brand-selected); color: var(--brand-soft); }
.funding-provider-card__amount { display: flex; flex-direction: column; gap: 5px; padding: 13px; border-radius: 11px; background: var(--surface-2); }
.funding-provider-card__amount small { color: var(--muted); font-size: 11px; }
.funding-provider-card__amount strong { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 15px; font-weight: var(--fw-medium); }
.funding-provider-card .button { margin-top: auto; }
.funding-disclosure { display: flex; align-items: flex-start; gap: 7px; }
.funding-review { display: grid; gap: 20px; }
.funding-review__headline {
  gap: 15px;
  padding: 18px;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  background: var(--brand-selected);
}
.funding-review__headline > div { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.funding-review__headline small,
.funding-review__headline span { color: var(--text-soft); font-size: 12px; }
.funding-review__headline strong { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 20px; font-weight: var(--fw-medium); }
.funding-fee-list__total { color: var(--text); }
.funding-fee-list__total dt,
.funding-fee-list__total dd { font-weight: var(--fw-semibold); }
.funding-safety-card { display: grid; gap: 14px; }
.funding-safety-card h3 { font-size: 18px; font-weight: var(--fw-semibold); }
.funding-safety-card ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.funding-safety-card li { display: flex; align-items: flex-start; gap: 8px; color: var(--text-soft); font-size: 13px; line-height: 1.5; }
.funding-safety-card li .icon { color: var(--success); }
.funding-safety-card p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.funding-checkout-boundary {
  display: grid;
  justify-items: center;
  max-width: 680px;
  gap: 14px;
  margin: 0 auto;
  text-align: center;
}
.funding-checkout-boundary > p { max-width: 560px; color: var(--text-soft); line-height: 1.55; }
.funding-destination {
  display: grid;
  width: 100%;
  gap: 5px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  text-align: left;
}
.funding-destination span,
.funding-destination small { color: var(--muted); font-size: 12px; }
.funding-destination strong { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 14px; font-weight: var(--fw-medium); }
.funding-modal-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 4, 8, 0.78);
  backdrop-filter: blur(7px);
}
.funding-external-dialog { width: min(100%, 520px); max-height: calc(100dvh - 40px); overflow-y: auto; text-align: left; }
.funding-external-dialog .dialog__header {
  display: flex;
  grid-template-columns: none;
  align-items: flex-start;
}
.funding-external-dialog .dialog__header > .icon-button { flex: 0 0 44px; }
.funding-external-dialog .dialog__body { display: grid; gap: 15px; }
.funding-external-dialog .dialog-actions { flex-wrap: wrap; }
.funding-state-panel {
  display: grid;
  justify-items: center;
  max-width: 680px;
  gap: 13px;
  margin: 10px auto 0;
  padding: 40px 28px;
  text-align: center;
}
.funding-state-panel > .icon { width: 36px; height: 36px; color: var(--brand-soft); }
.funding-state-panel--error > .icon { color: var(--danger); }
.funding-state-panel--disabled > .icon { color: var(--muted); }
.funding-state-panel--progress > .icon { color: var(--brand-soft); }
.funding-state-panel p { max-width: 510px; color: var(--muted); line-height: 1.55; }
.funding-state-panel--expanded { min-height: 320px; }
.funding-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--brand-soft);
  border-radius: 50%;
  animation: funding-spin 800ms linear infinite;
}
.funding-skeleton { display: grid; width: min(100%, 420px); gap: 8px; margin-top: 10px; }
.funding-skeleton span { height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--surface-2), var(--elevated), var(--surface-2)); background-size: 200% 100%; animation: funding-shimmer 1.5s ease infinite; }
.funding-skeleton span:nth-child(2) { width: 82%; }
.funding-skeleton span:nth-child(3) { width: 66%; }
.funding-return-reference { display: grid; gap: 5px; padding: 13px 18px; border-radius: 11px; background: var(--surface-2); }
.funding-return-reference span { color: var(--muted); font-size: 12px; }
.funding-return-reference strong { font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.funding-status-card { display: grid; justify-items: center; gap: 14px; text-align: center; }
.funding-status-card--success .funding-status-card__icon { background: var(--success); color: #071b16; }
.funding-status-card--danger .funding-status-card__icon { background: var(--danger); color: #24090d; }
.funding-status-card--warning .funding-status-card__icon { background: var(--warning); color: #251805; }
.funding-status-card > p { max-width: 530px; color: var(--text-soft); line-height: 1.55; }
.funding-status-card .funding-fee-list { width: 100%; text-align: left; }
.funding-status-card .funding-fee-list dd { min-width: 0; max-width: 62%; }
.funding-confirmations { width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.funding-confirmations > span { display: block; width: var(--confirmation-progress); height: 100%; border-radius: inherit; background: var(--brand-gradient); transition: width 300ms ease; }
.funding-status-card > small { color: var(--muted); font-size: 12px; }
.funding-last-updated { display: flex; align-items: center; gap: 6px; }
.funding-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(63, 224, 187, 0.12); }
.funding-timeline { display: grid; gap: 12px; }
.funding-timeline-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.funding-timeline-list li { position: relative; display: flex; gap: 10px; min-height: 56px; padding-bottom: 12px; }
.funding-timeline-list li:not(:last-child)::before { position: absolute; top: 26px; bottom: 0; left: 12px; width: 1px; background: var(--border-strong); content: ""; }
.funding-timeline-list li > span { position: relative; z-index: 1; display: grid; flex: 0 0 auto; width: 25px; height: 25px; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--muted); }
.funding-timeline-list li > span .icon { width: 13px; height: 13px; }
.funding-timeline-list li.is-current > span { border-color: var(--brand-border); background: var(--brand-selected); color: var(--brand-soft); }
.funding-timeline-list li > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding-top: 3px; }
.funding-timeline-list strong { font-size: 13px; font-weight: var(--fw-medium); }
.funding-timeline-list small { color: var(--muted); font-size: 11px; }
.funding-history { margin-top: 0; }
.funding-history .section-heading { align-items: flex-start; }
.funding-deposit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.funding-deposit > .notice { grid-column: 1 / -1; }
.funding-deposit .panel { display: grid; align-content: start; gap: 13px; }
.funding-deposit .panel > p { color: var(--muted); line-height: 1.5; }
.funding-deposit-secondary { opacity: 0.86; }
.funding-direct-address { display: grid; gap: 7px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.funding-direct-address span,
.funding-direct-address small { color: var(--muted); font-size: 12px; }
.funding-direct-address strong { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-medium); }
.notice--danger { border-color: rgba(255, 107, 122, 0.28); background: rgba(255, 107, 122, 0.08); color: var(--danger); }
.notice--danger > span { display: flex; flex-direction: column; gap: 3px; }
.notice--danger small { color: var(--muted); font-size: 11px; }

@keyframes funding-spin { to { transform: rotate(360deg); } }
@keyframes funding-shimmer { to { background-position: -200% 0; } }

@media (max-width: 1050px) {
  .funding-buy-layout,
  .funding-review-layout,
  .funding-status-layout { grid-template-columns: minmax(0, 1fr) minmax(250px, 0.7fr); }
  .funding-provider-list { grid-template-columns: 1fr; }
  .funding-provider-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr); align-items: center; }
  .funding-provider-card__head,
  .funding-provider-card__amount { grid-column: 1; }
  .funding-provider-card dl,
  .funding-provider-card .button { grid-column: 2; }
  .funding-provider-card dl { grid-row: 1 / span 2; }
}

@media (max-width: 767px) {
  .funding-page { gap: 18px; }
  .funding-header { align-items: flex-start; }
  .funding-header > .button { min-width: 44px; padding-inline: 12px; font-size: 0; }
  .funding-header > .button .icon { width: 18px; height: 18px; }
  .funding-buy-hero { align-items: flex-start; min-height: 0; padding: 21px; flex-wrap: wrap; }
  .funding-buy-hero__mark { width: 48px; height: 48px; border-radius: 14px; }
  .funding-buy-hero > div:nth-child(2) { flex-basis: calc(100% - 70px); }
  .funding-buy-hero > .button { width: 100%; }
  .funding-account-grid { grid-template-columns: 1fr; }
  .funding-account-card { min-height: 84px; }
  .funding-buy-layout,
  .funding-review-layout,
  .funding-status-layout,
  .funding-deposit { grid-template-columns: minmax(0, 1fr); }
  .funding-estimate { position: static; grid-row: 1; }
  .funding-form,
  .funding-estimate,
  .funding-review,
  .funding-safety-card,
  .funding-checkout-boundary,
  .funding-status-card,
  .funding-timeline,
  .funding-deposit > .panel { padding: 18px; }
  .funding-provider-card { display: flex; }
  .funding-selection-summary { align-items: flex-start; flex-wrap: wrap; }
  .funding-selection-summary > strong { order: 3; flex-basis: 100%; }
  .funding-sort { width: 100%; }
  .funding-sort button { min-height: 44px; flex: 1 0 auto; }
  .funding-review__headline { align-items: flex-start; }
  .funding-checkout-boundary { margin: 0; }
  .funding-external-dialog .dialog-actions .button { width: 100%; }
  .funding-order-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .funding-order-row > .status-chip { grid-column: 2; width: fit-content; }
  .funding-order-row > .icon:last-child { grid-column: 3; grid-row: 1 / span 2; }
  .funding-history .section-heading { gap: 14px; }
  .funding-history .section-heading > .button { width: 100%; }
}

@media (max-width: 420px) {
  .funding-header h1 { font-size: 27px; }
  .funding-buy-hero { gap: 15px; padding: 18px; }
  .funding-buy-hero > div:nth-child(2) { flex-basis: 100%; }
  .funding-buy-hero h2 { font-size: 24px; }
  .funding-choice-grid { grid-template-columns: 1fr; }
  .funding-quick-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funding-quick-amounts button { min-height: 44px; }
  .funding-region-control { align-items: flex-start; flex-wrap: wrap; }
  .funding-region-control > div { flex-basis: calc(100% - 90px); }
  .funding-region-control label { order: 3; flex: 1 1 100%; }
  .funding-region-control input { width: 100%; }
  .funding-form-actions .button { width: 100%; }
  .funding-status-card .funding-form-actions { width: 100%; }
  .funding-status-card .funding-form-actions .button { width: 100%; }
  .funding-provider-card__head { flex-wrap: wrap; }
  .funding-provider-card__head .status-chip { margin-left: 50px; }
  .funding-modal-backdrop { align-items: end; padding: 0 5px; overflow-x: hidden; }
  .funding-external-dialog { width: 100%; max-height: calc(100dvh - var(--mobile-nav-height)); border-radius: var(--radius-modal) var(--radius-modal) 0 0; }
  .funding-external-dialog .dialog-actions .button { flex-basis: 100%; }
  .funding-order-row { gap: 9px; padding-inline: 6px; }
  .funding-order-row .funding-coin { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .funding-spinner,
  .funding-skeleton span { animation: none; }
  .funding-confirmations > span { transition: none; }
}

/* ==========================================================================
   UX remediation batch 1.5: shared typography and control calibration
   ========================================================================== */

/* Typography roles */
.page-heading h1,
.page-intro h1,
.creator-tools-header h1 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero-strip h1 {
  font-family: var(--font-display);
  font-size: 43px;
  font-weight: var(--fw-display);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.page-heading p,
.page-intro p,
.creator-tools-header p {
  color: var(--muted);
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 1.55;
}
.section-heading h2,
.panel-heading h2 {
  font-size: 20px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.panel-card__header h2,
.form-card__header h2,
.card-title {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
}
.card-body {
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
}
.helper-text,
.fine-print {
  font-size: 12.5px;
  font-weight: var(--fw-regular);
  line-height: 1.5;
}
.status-chip {
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.06em;
}
.balance-link > span,
.creator-tools-link {
  font-size: 14px;
  font-weight: var(--fw-medium);
}
.balance-link > span {
  white-space: nowrap;
}
.balance-link strong {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 1.15;
}

/* Focus, motion, and disabled semantics */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 3px;
}
.button:disabled,
.button[aria-disabled="true"],
.button--disabled {
  background: #24202c;
  border-color: var(--border);
  color: var(--muted);
  opacity: var(--disabled-opacity);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
  pointer-events: none;
}
.button:disabled:hover,
.button[aria-disabled="true"]:hover,
.button--disabled:hover {
  background: #24202c;
  filter: none;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

/* Canonical button family */
.button {
  min-height: var(--btn-h-md);
  padding-inline: var(--btn-pad-inline-md);
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1;
}
.button > .icon {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
}
.button--primary {
  background: var(--brand-action-gradient);
  border-color: var(--brand-border);
  color: #fff;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.005em;
}
.button--primary:hover {
  background: var(--brand-action-gradient-hover);
  filter: brightness(1.04);
}
.button--primary:active,
.button--live:active,
.button--approve:active {
  transform: translateY(1px);
}
.button--large {
  min-height: var(--btn-h-lg);
  padding-inline: var(--btn-pad-inline-md);
  font-size: 15px;
}
.button--secondary,
.button--ghost {
  min-height: var(--btn-h-md);
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-soft);
  font-size: 14px;
  font-weight: var(--fw-medium);
}
.button--secondary:hover,
.button--ghost:hover {
  background: var(--elevated);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--text);
}
.button--tertiary {
  background: rgba(255, 255, 255, 0.018);
  border-color: var(--border);
  color: var(--text-soft);
  font-size: 13.5px;
  font-weight: var(--fw-medium);
}
.button--compact,
.button--small.button--tertiary {
  position: relative;
  min-height: var(--btn-h-sm);
  padding-inline: var(--btn-pad-inline-sm);
  font-size: 13px;
  font-weight: var(--fw-medium);
}
.button--compact::before {
  content: "";
  position: absolute;
  inset: -4px 0;
}
.button--creator-warning,
.button--warning {
  min-height: var(--btn-h-md);
  background: rgba(245, 179, 66, 0.06);
  border-color: rgba(245, 179, 66, 0.58);
  color: var(--warning);
  font-size: 14px;
  font-weight: var(--fw-semibold);
}
.button--creator-warning:hover,
.button--warning:hover {
  background: rgba(245, 179, 66, 0.13);
}
.button--live {
  min-height: var(--btn-h-md);
  background: var(--live);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 14px;
  font-weight: var(--fw-semibold);
}
.button--approve {
  min-height: var(--btn-h-md);
  background: rgba(63, 224, 187, 0.14);
  border-color: rgba(63, 224, 187, 0.52);
  color: var(--success);
  font-size: 14px;
  font-weight: var(--fw-semibold);
}
.button--destructive-low {
  min-height: var(--btn-h-md);
  background: rgba(255, 255, 255, 0.018);
  border-color: var(--border);
  color: var(--text-soft);
  font-size: 14px;
  font-weight: var(--fw-medium);
}
.button--destructive-high,
.button--danger {
  min-height: var(--btn-h-md);
  background: rgba(255, 107, 122, 0.1);
  border-color: rgba(255, 107, 122, 0.5);
  color: var(--danger);
  font-size: 14px;
  font-weight: var(--fw-semibold);
}
.button--loading {
  position: relative;
  min-width: var(--button-loading-width, 144px);
  color: transparent;
  pointer-events: none;
}
.button--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: #fff;
  border-radius: 50%;
  animation: control-spin 700ms linear infinite;
}
@keyframes control-spin { to { transform: rotate(360deg); } }

/* Destinations are navigation, not primary buttons */
.nav-link,
.settings-link {
  position: relative;
  min-height: 44px;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #8b93a5;
  font-size: 14px;
  font-weight: var(--fw-medium);
}
.nav-link > .icon,
.settings-link > .icon {
  width: 20px;
  height: 20px;
}
.nav-link--active,
.settings-link--active {
  background: var(--nav-selected-tint);
  color: var(--text);
  font-weight: var(--fw-semibold);
}
.nav-link--active::before,
.settings-link--active::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 3px;
  border-radius: 999px;
  background: var(--brand-hot);
}
.creator-tools-link {
  min-height: 44px;
  border-color: rgba(255, 61, 166, 0.42);
  background: rgba(255, 61, 166, 0.08);
  font-weight: var(--fw-medium);
}
.desktop-creator-button {
  min-height: var(--btn-h-md);
  border: 1px solid rgba(255, 61, 166, 0.48);
  background: rgba(255, 61, 166, 0.1);
  color: var(--brand-soft);
  font-size: 14px;
  font-weight: var(--fw-medium);
}
.desktop-creator-button:hover {
  background: rgba(255, 61, 166, 0.16);
}
.mobile-nav__link {
  position: relative;
  min-height: 44px;
  font-size: 11px;
  font-weight: var(--fw-medium);
}
.mobile-nav__link .icon {
  width: 22px;
  height: 22px;
}
.mobile-nav__link--active {
  color: var(--brand-soft);
  font-weight: var(--fw-semibold);
}
.mobile-nav__link--active::before {
  content: "";
  position: absolute;
  top: -3px;
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-hot);
}
.mobile-sheet__nav a,
.mobile-sheet__nav button {
  min-height: 48px;
  font-weight: var(--fw-medium);
}
.mobile-sheet__nav .icon {
  width: 22px;
  height: 22px;
}

/* Tabs, segmented controls, and chips */
.profile-tabs,
.content-tabs,
.creator-tools-tabs {
  gap: 20px;
}
.profile-tab,
.creator-tools-tab,
.creator-tools-tabs a {
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-bottom: var(--tab-underline) solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: var(--fw-medium);
}
.profile-tab--active,
.creator-tools-tab--active,
.creator-tools-tabs a.is-active {
  border-bottom-color: var(--brand-hot);
  background: transparent;
  color: var(--brand-soft);
  font-weight: var(--fw-semibold);
}
.content-tabs {
  gap: 20px;
}
.content-tab {
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-bottom: var(--tab-underline) solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--fw-medium);
}
.content-tab--active {
  border-bottom-color: var(--brand-hot);
  background: transparent;
  color: var(--brand-soft);
  font-weight: var(--fw-semibold);
}
.segmented-control > * {
  font-size: 13px;
  font-weight: var(--fw-medium);
}
.segmented-control > .is-active {
  background: var(--nav-selected-tint);
  font-weight: var(--fw-semibold);
}
.filter-pill,
.filter-chip,
.niche-chip,
.chip-input > span,
.chip-input > button {
  min-height: var(--chip-h-desktop);
  font-size: 13px;
  font-weight: var(--fw-medium);
}
button.filter-pill,
button.filter-chip,
button.niche-chip,
.chip-input > button {
  position: relative;
}
button.filter-pill::before,
button.filter-chip::before,
button.niche-chip::before,
.chip-input > button::before {
  content: "";
  position: absolute;
  inset: -4px 0;
}
.filter-pill--active,
.filter-chip--active,
.niche-chip[aria-pressed="true"] {
  font-weight: var(--fw-semibold);
}

/* Native semantics with custom checkbox, radio, switch, and preference visuals */
.preference-fieldset {
  min-width: 0;
  margin: 11px 0 0;
  padding: 0;
  border: 0;
}
.preference-fieldset > legend {
  padding: 0;
  color: #929bad;
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
}
.preference-fieldset > small {
  display: block;
  margin-top: 7px;
  color: var(--muted-2);
  font-size: 12.5px;
  font-weight: var(--fw-regular);
  line-height: 1.5;
}
input[type="checkbox"]:not(.preference-toggle-row__control),
input[type="radio"] {
  appearance: none;
  width: var(--control-size);
  min-width: var(--control-size);
  height: var(--control-size);
  min-height: var(--control-size);
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--border-strong);
  background-color: var(--surface-2);
  cursor: pointer;
}
input[type="checkbox"]:not(.preference-toggle-row__control) {
  border-radius: 6px;
}
input[type="checkbox"]:not(.preference-toggle-row__control):checked {
  border-color: var(--brand-hot);
  background-color: var(--brand-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 10 3 3 7-7'/%3E%3C/svg%3E"), var(--brand-gradient);
}
input[type="radio"] {
  border-radius: 50%;
}
input[type="radio"]:checked {
  border-color: var(--brand-hot);
  background: radial-gradient(circle, var(--brand-hot) 0 5px, transparent 5.5px);
}
.checkbox-line,
.visibility-check,
.toggle-list > label {
  min-height: var(--control-tap);
  gap: 12px;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
}
.form-card .preference-card,
.preference-card {
  min-height: var(--control-tap);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.preference-card:has(input:checked) {
  border-color: rgba(255, 61, 166, 0.5);
  background: rgba(255, 61, 166, 0.08);
  color: var(--text);
}
.checkbox-grid .preference-card > span {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: var(--fw-medium);
}
.preference-toggle-row > .preference-toggle-row__control {
  width: var(--switch-width);
  min-width: var(--switch-width);
  height: var(--switch-height);
  min-height: var(--switch-height);
}
.preference-toggle-row > .preference-toggle-row__control::after {
  width: var(--switch-knob);
  height: var(--switch-knob);
}
.preference-toggle-row > .preference-toggle-row__control:checked {
  background: var(--brand-gradient);
}
.preference-toggle-row__text strong {
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
}
.preference-toggle-row__text small {
  font-size: 12.5px;
  font-weight: var(--fw-regular);
  line-height: 1.5;
}

/* Form family */
.form-card > label,
.creator-form > label,
.modal-form > label,
.form-grid > label,
.public-field-editor label {
  color: #aab1bf;
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
.form-card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.form-card textarea,
.form-card select,
.creator-form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.creator-form textarea,
.creator-form select,
.modal-form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.modal-form textarea,
.modal-form select,
.select-control,
.search-box input {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  outline: 0;
  background-color: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--fw-regular);
  line-height: 1.4;
}
.form-card input[type="number"],
.creator-form input[type="number"],
.modal-form input[type="number"],
.measurement-input input {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: var(--fw-medium);
}
.form-card .measurement-input input[type="number"],
.creator-form .measurement-input input[type="number"],
.form-card .public-field-editor .measurement-input input[type="number"] {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: var(--fw-medium);
}
.form-card select,
.creator-form select,
.modal-form select,
.select-control {
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select option {
  font-family: var(--font-body);
}
.form-card textarea,
.creator-form textarea,
.modal-form textarea {
  min-height: 96px;
  line-height: 1.5;
  resize: vertical;
}
.search-box > .icon {
  width: 16px;
  height: 16px;
}
.search-box input {
  padding-left: 40px;
}
.form-card input:not([type="checkbox"]):not([type="radio"]):focus,
.form-card textarea:focus,
.form-card select:focus,
.creator-form input:not([type="checkbox"]):not([type="radio"]):focus,
.creator-form textarea:focus,
.creator-form select:focus,
.modal-form input:not([type="checkbox"]):not([type="radio"]):focus,
.modal-form textarea:focus,
.modal-form select:focus,
.select-control:focus,
.search-box input:focus {
  border-color: var(--focus-ring-color);
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 0;
  box-shadow: none;
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  font-weight: var(--fw-regular);
}
input:disabled,
select:disabled,
textarea:disabled {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px var(--surface-2) inset;
  transition: background-color 9999s ease-out;
}
.form-card label > small,
.creator-form label > small,
.modal-form label > small {
  color: var(--muted-2);
  font-size: 12.5px;
  font-weight: var(--fw-regular);
  line-height: 1.5;
}

/* Approved screen hierarchy */
.entry-card h1 {
  font-size: 34px;
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.entry-option .button--primary {
  font-size: 15px;
  font-weight: var(--fw-semibold);
}
.entry-option .button--secondary {
  font-size: 14px;
  font-weight: var(--fw-medium);
}
.entry-option .button--creator-warning {
  font-size: 14px;
  font-weight: var(--fw-semibold);
}
.entry-demo {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: var(--fw-regular);
}
.verification-list .checklist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text-soft);
  font-size: 14.5px;
  font-weight: var(--fw-regular);
  line-height: 1.45;
}
.verification-list .checklist-row--complete {
  color: var(--muted);
  font-weight: var(--fw-regular);
}
.verification-list .checklist-row--complete .icon {
  color: var(--success);
}
.verification-list .checklist-row--pending {
  font-weight: var(--fw-medium);
}
.verification-list .checklist-row--pending .icon {
  color: var(--warning);
}
.button-row--moderation {
  align-items: center;
}

@media (max-width: 767px) {
  .page-heading h1,
  .page-intro h1,
  .creator-tools-header h1,
  .entry-card h1 {
    font-size: 26px;
  }
  .filter-pill,
  .filter-chip,
  .niche-chip,
  .chip-input > span,
  .chip-input > button {
    min-height: var(--chip-h-mobile);
  }
  .button-row--moderation .button--approve {
    width: 100%;
  }
  .button-row--moderation .button--destructive-low,
  .button-row--moderation .button--destructive-high {
    flex: 1 1 160px;
  }
  .creator-tools-section-header__actions .button--live {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .button-row--moderation .button {
    width: 100%;
    flex-basis: 100%;
  }
}

@media (max-width: 767px) {
  .overlay-backdrop:has(> .dialog--upload) {
    align-items: flex-start;
    padding: 8px 4px calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 8px);
  }
  .dialog--upload {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100dvh - var(--mobile-nav-height) - env(safe-area-inset-bottom) - 20px);
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .dialog--upload .dialog__header {
    position: sticky;
    z-index: 2;
    top: 0;
    flex: 0 0 auto;
    margin: 0;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .dialog--upload .upload-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .upload-dialog__actions {
    position: sticky;
    z-index: 1;
    bottom: 0;
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
  }
}

/* One-sweep funding preview completion: scoped to the existing payment surface. */
.funding-preview-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-card);
  background: var(--brand-selected);
}
.funding-preview-next > span {
  max-width: 660px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: var(--fw-regular);
  line-height: 1.5;
}
.funding-preview-next > .button { flex: 0 0 auto; }
.funding-ranking-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
}
.funding-methods {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
}
.funding-methods > span {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: var(--fw-medium);
}
.funding-methods > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.funding-methods li {
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1.45;
}
.funding-methods small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.funding-provider-card--unavailable {
  border-style: dashed;
  opacity: 0.82;
}
.funding-provider-reason {
  padding: 10px 11px;
  font-size: 12px;
  line-height: 1.45;
}
.funding-charge-guidance {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}
.funding-charge-guidance > .icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: var(--brand-soft);
}
.funding-timeline-list li.is-done > span {
  border-color: rgba(63, 224, 187, 0.5);
  background: rgba(63, 224, 187, 0.14);
  color: var(--success);
}
.funding-timeline-list li.is-done:not(:last-child)::before {
  background: rgba(63, 224, 187, 0.42);
}
.funding-timeline-list li.is-failed > span {
  border-color: rgba(255, 107, 122, 0.52);
  background: rgba(255, 107, 122, 0.12);
  color: var(--danger);
}
.funding-timeline-list li.is-pending {
  opacity: 0.66;
}
.funding-deposit {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1050px) {
  .funding-deposit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .funding-preview-next {
    align-items: stretch;
    flex-direction: column;
  }
  .funding-preview-next > .button { width: 100%; }
  .funding-deposit { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .funding-ranking-list { width: 100%; }
  .funding-provider-card__head > .status-chip { margin-left: 50px; }
  .funding-methods li { min-height: 32px; }
}

/* Global footer */
.global-footer {
  border-top: 1px solid var(--cs-ft-hairline);
  background: var(--cs-ft-surface);
  color: var(--cs-ft-link);
}
.global-footer__inner {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 44px 40px 24px;
}
.global-footer__groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cs-ft-col-gap);
}
.global-footer__group { min-width: 0; }
.global-footer__heading,
.global-footer__accordion {
  color: var(--cs-ft-heading);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
}
.global-footer__heading {
  display: flex;
  align-items: center;
  gap: 8px;
}
.global-footer__dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
}
.global-footer__group--platform .global-footer__dot { background: var(--cs-ft-a-platform); }
.global-footer__group--legal .global-footer__dot { background: var(--cs-ft-a-legal); }
.global-footer__group--safety .global-footer__dot { background: var(--cs-ft-a-safety); }
.global-footer__group--transparency .global-footer__dot { background: var(--cs-ft-a-transparency); }
.global-footer__accordion { display: none; }
.global-footer__panel { margin-top: 14px; }
.global-footer__panel ul {
  display: flex;
  flex-direction: column;
  gap: var(--cs-ft-link-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.global-footer__panel a,
.global-footer__utility a {
  color: var(--cs-ft-link);
  font-weight: var(--fw-regular);
  text-decoration: none;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.global-footer__panel a {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  font-size: 13.5px;
  line-height: 1.45;
}
.global-footer__panel a:visited,
.global-footer__utility a:visited { color: var(--cs-ft-link); }
.global-footer__panel a:hover,
.global-footer__panel a:focus-visible,
.global-footer__utility a:hover,
.global-footer__utility a:focus-visible {
  color: var(--cs-ft-link-hover);
  text-decoration: underline;
}
.global-footer__panel a:focus-visible,
.global-footer__utility a:focus-visible,
.global-footer__accordion:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--cs-ft-focus);
  outline-offset: 3px;
}
.global-footer__bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--cs-ft-divider);
}
.global-footer__meta,
.global-footer__utility {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.global-footer__meta {
  gap: 10px;
  color: var(--cs-ft-meta);
  font-size: 12.5px;
}
.global-footer__age {
  padding: 3px 10px;
  border: 1px solid var(--cs-ft-age-border);
  border-radius: var(--cs-ft-radius-pill);
  color: var(--cs-ft-heading);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}
.global-footer__utility {
  gap: 20px;
  margin-left: auto;
}
.global-footer__utility a {
  color: var(--cs-ft-mini);
  font-size: 12.5px;
  font-weight: var(--fw-medium);
}
.policy-page {
  min-height: 60vh;
  padding-top: 56px;
}
.policy-page__placeholder {
  display: grid;
  gap: 14px;
  justify-items: start;
  max-width: 680px;
}
.policy-page__placeholder h2 {
  font-size: 18px;
  font-weight: var(--fw-semibold);
}
.policy-page__placeholder p { color: var(--text-soft); }

@media (max-width: 1023px) and (min-width: 640px) {
  .global-footer__inner { padding: 38px 32px 22px; }
  .global-footer__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
    row-gap: 32px;
  }
  .global-footer__bottom {
    margin-top: 30px;
    padding-top: 18px;
    padding-inline-start: 60px;
  }
}

@media (max-width: 767px) {
  .global-footer { margin-bottom: var(--mobile-nav-height); }
}

@media (max-width: 639px) {
  .global-footer__inner { padding: 6px 16px 20px; }
  .global-footer__groups { display: block; }
  .global-footer__group { border-bottom: 1px solid var(--cs-ft-divider); }
  .global-footer__heading {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .global-footer__accordion {
    width: 100%;
    min-height: var(--cs-ft-header-h);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 4px 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
  }
  .global-footer__accordion:focus-visible {
    border-radius: 8px;
    outline-offset: -2px;
  }
  .global-footer__chevron {
    width: var(--cs-ft-tap);
    height: var(--cs-ft-tap);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .global-footer__chevron::before {
    width: 8px;
    height: 8px;
    content: "";
    border-right: 1.6px solid var(--cs-ft-meta);
    border-bottom: 1.6px solid var(--cs-ft-meta);
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--cs-ft-motion), border-color var(--cs-ft-motion);
  }
  .global-footer__accordion[aria-expanded="true"] .global-footer__chevron::before {
    border-color: var(--cs-ft-heading);
    transform: translateY(2px) rotate(-135deg);
  }
  .global-footer__panel {
    display: grid;
    max-height: 720px;
    margin-top: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      max-height var(--cs-ft-motion),
      opacity var(--cs-ft-motion),
      transform var(--cs-ft-motion),
      visibility 0s linear;
  }
  .global-footer.is-enhanced .global-footer__panel:not(.is-open) {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition:
      max-height var(--cs-ft-motion),
      opacity var(--cs-ft-motion),
      transform var(--cs-ft-motion),
      visibility 0s linear 180ms;
  }
  .global-footer__panel-inner {
    min-height: 0;
    padding: 0 4px 12px 24px;
  }
  .global-footer__panel ul { gap: 0; }
  .global-footer__panel li { min-width: 0; }
  .global-footer__panel a {
    width: 100%;
    min-height: var(--cs-ft-tap);
    display: flex;
    align-items: center;
    padding: 9px 6px;
    font-size: max(12.5px, 0.875rem);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .global-footer__panel a:focus-visible {
    border-radius: 6px;
    outline-offset: -2px;
  }
  .global-footer__bottom {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
  }
  .global-footer__utility {
    gap: 18px;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .amount-button {
    transition: none;
    transform: none;
  }
  .global-footer__panel,
  .global-footer.is-enhanced .global-footer__panel:not(.is-open),
  .global-footer__chevron::before {
    transition: none;
    transform: none;
  }
}

/*
 * xCrush Creator Services & Digital Orders staging stylesheet.
 * This file is intentionally standalone for review. It must be merged into the
 * deployed stylesheet or linked by the release integrator.
 */
:root {
  --xc-type-digital: #a855f7;
  --xc-type-interactive: #ff5aa8;
  --xc-type-physical: #7aa2ff;
  --xc-pending: #f5c344;
  --xc-active: #c05cf6;
  --xc-success: #34d399;
  --xc-danger: #ff6b6b;
  --xc-neutral: #9aa0aa;
  --xc-bg: #0a0711;
  --xc-surface: #120d1a;
  --xc-raised: #160f20;
  --xc-line: rgba(255,255,255,.08);
  --xc-heading: #f4f0fa;
  --xc-body: #a99fb8;
  --xc-primary: linear-gradient(120deg,#ff3d9a,#8b5cf6);
  --xc-link: #ff5aa8;
  --xc-focus: #ff5aa8;
  --xc-tap: 44px;
  /* Compatibility aliases keep the feature stylesheet isolated from global tokens. */
  --xc-service-pending: var(--xc-pending);
  --xc-service-active: var(--xc-active);
  --xc-service-success: var(--xc-success);
  --xc-service-danger: var(--xc-danger);
  --xc-service-neutral: var(--xc-neutral);
  --xc-service-surface: var(--xc-surface);
  --xc-service-raised: var(--xc-raised);
  --xc-service-line: var(--xc-line);
  --xc-service-heading: var(--xc-heading);
  --xc-service-body: var(--xc-body);
}

.services-page,
.service-detail-page,
.service-builder-page,
.creator-order-workspace-page {
  max-width: 1280px;
}

.services-page-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.services-page-header h1,
.service-listing h1,
.service-review-card h1 {
  margin: 4px 0 0;
  color: var(--xc-service-heading);
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.1;
}

.services-page-header p,
.service-order-panel__heading p {
  max-width: 760px;
  margin: 7px 0 0;
  color: var(--xc-service-body);
  line-height: 1.55;
}

.services-preview-notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 18px;
  padding: 13px 15px;
  border: 1px solid rgba(122,162,255,.3);
  border-radius: 13px;
  color: #cbd8ff;
  background: rgba(122,162,255,.07);
}

.services-preview-notice > .icon { flex: 0 0 auto; margin-top: 2px; }
.services-preview-notice strong { display: block; color: #e8edff; font-size: 13px; }
.services-preview-notice p { margin: 3px 0 0; color: #aebce2; font-size: 12px; line-height: 1.5; }

.creator-services-featured {
  margin-top: 24px;
}

.services-section-heading,
.manage-services-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.services-section-heading h2,
.manage-services-heading h2 {
  margin-top: 3px;
  font-size: clamp(21px, 3vw, 27px);
}

.services-section-heading p,
.manage-services-heading p {
  max-width: 680px;
  margin-top: 5px;
  color: var(--xc-service-body);
}

.services-loading,
.services-empty-state {
  display: flex;
  min-height: 220px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 30px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 16px;
  color: var(--xc-service-body);
  text-align: center;
  background: rgba(255,255,255,.015);
}

.services-loading h2,
.services-loading h3,
.services-empty-state h2,
.services-empty-state h3 { color: var(--xc-service-heading); }

.services-loading p,
.services-empty-state p { max-width: 520px; margin: 0; line-height: 1.55; }
.services-loading > .icon { animation: services-spin 1.2s linear infinite; }

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

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

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

.service-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--xc-service-line);
  border-radius: 16px;
  background: var(--xc-service-surface);
  transition: border-color .16s ease, transform .16s ease;
}

.service-card:hover {
  border-color: rgba(255,90,168,.38);
  transform: translateY(-1px);
}

.service-card.is-unavailable { opacity: .78; }

.service-card__preview {
  position: relative;
  display: flex;
  min-height: 118px;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.82);
  background: radial-gradient(circle at 78% 20%, rgba(255,61,154,.18), transparent 38%), linear-gradient(135deg,#21112d,#100b17);
}

.service-card--digital .service-card__preview,
.service-listing__preview.service-card--digital { box-shadow: inset 3px 0 var(--xc-type-digital); }
.service-card--interactive .service-card__preview,
.service-listing__preview.service-card--interactive { box-shadow: inset 3px 0 var(--xc-type-interactive); }
.service-card--physical .service-card__preview,
.service-listing__preview.service-card--physical { box-shadow: inset 3px 0 var(--xc-type-physical); }
.service-card__preview > .icon { width: 30px; height: 30px; opacity: .72; }

.service-card__badge {
  position: absolute;
  top: 11px;
  right: 11px;
  padding: 4px 8px;
  border: 1px solid rgba(255,90,168,.28);
  border-radius: 999px;
  color: #ffd8ec;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  background: rgba(255,61,154,.14);
}

.service-card__body { padding: 15px; }
.service-card__meta { display: flex; min-height: 27px; align-items: center; justify-content: space-between; gap: 8px; }
.service-card h3 { margin: 10px 0 0; color: var(--xc-service-heading); font-size: 17px; line-height: 1.25; }
.service-card p { min-height: 40px; margin: 6px 0 0; color: var(--xc-service-body); font-size: 12.5px; line-height: 1.55; }
.service-card__availability { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 12px; color: #8f86a0; font-size: 11px; }
.service-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--xc-service-line); }
.service-card__footer > strong { color: #fff; font-size: 13px; }
.service-card__action { display: inline-flex; min-height: var(--xc-tap); align-items: center; gap: 5px; color: var(--xc-link); font-size: 12px; font-weight: var(--fw-semibold); }
.service-card__action .icon { width: 15px; height: 15px; }
.service-card__reason { display: block; margin-top: 6px; color: #c8b9c2; line-height: 1.4; }

.service-type-chip,
.service-availability,
.service-status {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
}

.service-type-chip .icon,
.service-status .icon { width: 13px; height: 13px; }
.service-type-chip--digital { color: #c78cff; background: rgba(168,85,247,.1); }
.service-type-chip--interactive { color: #ff87bf; background: rgba(255,90,168,.1); }
.service-type-chip--physical { color: #9bb8ff; background: rgba(122,162,255,.1); }
.service-availability { border-color: transparent; color: var(--xc-service-body); }
.service-availability > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.service-availability--active { color: var(--xc-service-success); }
.service-availability--fully_booked { color: #ff8a3d; }
.service-availability--paused { color: var(--xc-service-pending); }
.service-availability--temporarily_unavailable,
.service-availability--archived,
.service-availability--draft { color: var(--xc-service-neutral); }

.services-catalogue-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 17px;
}

.services-catalogue-toolbar > span { flex: 0 0 auto; color: var(--xc-service-body); font-size: 12px; }
.services-filter-row { display: flex; max-width: 100%; flex-wrap: wrap; gap: 7px; }
.services-filter {
  min-height: var(--xc-tap);
  padding: 8px 13px;
  border: 1px solid var(--xc-service-line);
  border-radius: 999px;
  color: var(--xc-service-body);
  background: var(--xc-service-raised);
}
.services-filter.is-active {
  border-color: rgba(255,90,168,.52);
  color: #fff;
  background: linear-gradient(120deg,rgba(255,61,154,.2),rgba(139,92,246,.2));
}
.services-filter:focus-visible,
.service-card__action:focus-visible {
  outline: 2px solid var(--xc-focus);
  outline-offset: 3px;
}

.service-detail-back { margin-bottom: 14px; }
.service-detail-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(350px, .9fr); gap: 16px; align-items: start; }
.service-listing,
.service-order-panel,
.service-review-card,
.service-payment-card,
.service-workspace-card,
.service-builder-card,
.service-capacity-panel {
  border: 1px solid var(--xc-service-line);
  border-radius: 16px;
  background: var(--xc-service-surface);
}
.service-listing { overflow: hidden; padding: 0 20px 20px; }
.service-listing__preview { display: flex; min-height: 230px; margin: 0 -20px 18px; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: #cbb8dd; background: radial-gradient(circle at 30% 20%,rgba(255,61,154,.22),transparent 38%),linear-gradient(135deg,#281438,#100b17); }
.service-listing__preview .icon { width: 40px; height: 40px; }
.service-listing__creator { display: flex; align-items: center; gap: 9px; color: #e9e2f2; font-size: 13px; }
.service-listing__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.service-listing__description { margin: 9px 0 0; color: var(--xc-service-body); line-height: 1.65; }
.service-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 18px 0; }
.service-facts > div { padding: 12px; border: 1px solid var(--xc-service-line); border-radius: 12px; background: var(--xc-service-raised); }
.service-facts dt { color: var(--xc-service-body); font-size: 11px; }
.service-facts dd { margin: 5px 0 0; color: #fff; font-size: 13px; font-weight: var(--fw-semibold); }

.service-order-panel { position: sticky; top: 76px; padding: 19px; }
.service-order-panel__heading { margin-bottom: 17px; }
.service-order-panel__heading h2 { margin-top: 3px; font-size: 23px; }
.service-option-group,
.service-question-group,
.service-inline-question { margin: 0; padding: 15px 0; border: 0; border-top: 1px solid var(--xc-service-line); }
.service-option-group > legend,
.service-question-group > legend,
.service-inline-question > legend { padding: 0 0 9px; color: #cbb8dd; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.service-choice-grid,
.service-addon-list { display: grid; gap: 8px; }
.service-choice,
.service-addon {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--xc-service-line);
  border-radius: 11px;
  cursor: pointer;
  background: var(--xc-service-raised);
}
.service-choice.is-selected,
.service-addon.is-selected { border-color: rgba(255,90,168,.5); background: rgba(255,61,154,.08); }
.service-choice input,
.service-addon input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: #ff3d9a; }
.service-choice > span,
.service-addon > span { min-width: 0; flex: 1; }
.service-choice strong,
.service-choice small,
.service-addon strong,
.service-addon small { display: block; }
.service-choice strong,
.service-addon strong { color: #eee7f6; font-size: 12.5px; }
.service-choice small,
.service-addon small { margin-top: 2px; color: var(--xc-service-body); font-size: 10.5px; line-height: 1.4; }
.service-choice em,
.service-addon em { flex: 0 0 auto; color: #ff9dcc; font-size: 11px; font-style: normal; }
.service-question-group > label,
.service-inline-question > label { display: grid; gap: 7px; margin-top: 11px; color: #d8cfe4; font-size: 12px; }
.service-question-group textarea,
.service-question-group input[type="text"],
.service-inline-question textarea,
.service-inline-question input[type="text"] { width: 100%; }
.service-inline-question > label { display: flex; min-height: 44px; align-items: center; }
.service-reference-upload {
  position: relative;
  display: flex !important;
  min-height: 72px;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px dashed rgba(255,255,255,.2);
  border-radius: 12px;
  cursor: pointer;
}
.service-reference-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.service-reference-upload:has(input:focus-visible),
.service-order-upload:has(input:focus-visible) {
  outline: 2px solid var(--xc-focus);
  outline-offset: 3px;
  border-color: var(--xc-focus);
}
.service-reference-upload span { display: block; }
.service-reference-upload strong,
.service-reference-upload small { display: block; }
.service-reference-upload small { margin-top: 3px; color: var(--xc-service-body); }
.service-reference-list { display: grid; gap: 6px; padding: 0; list-style: none; }
.service-reference-list li { display: flex; min-width: 0; align-items: center; gap: 8px; color: #ddd3e8; font-size: 11px; }
.service-reference-list li span { margin-left: auto; color: var(--xc-service-body); }
.service-live-total {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px -5px 14px;
  padding: 13px;
  border: 1px solid rgba(255,90,168,.28);
  border-radius: 12px;
  background: #171020;
}
.service-live-total span { display: block; }
.service-live-total small,
.service-live-total strong { display: block; }
.service-live-total small { color: var(--xc-service-body); font-size: 10px; }
.service-live-total strong { margin-top: 3px; color: #fff; font-size: 17px; }

.service-review-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(330px,.85fr); gap: 16px; align-items: start; }
.service-review-card,
.service-payment-card { padding: 20px; }
.service-review-card > p { color: var(--xc-service-body); }
.service-review-lines,
.service-payment-card dl { display: grid; gap: 9px; margin: 18px 0; }
.service-review-lines > div,
.service-payment-card dl > div { display: flex; justify-content: space-between; gap: 12px; color: var(--xc-service-body); font-size: 12px; }
.service-review-lines dd,
.service-payment-card dd { margin: 0; color: #f3edf8; }
.service-review-lines .is-total { padding-top: 11px; border-top: 1px solid var(--xc-service-line); color: #fff; font-weight: var(--fw-semibold); }
.service-payment-card { position: sticky; top: 76px; }
.service-payment-card h2 { margin-top: 3px; }
.service-payment-card .is-missing dt,
.service-payment-card .is-missing dd { color: var(--xc-service-pending); font-weight: var(--fw-semibold); }
.service-payment-card .is-remaining dd { color: var(--xc-service-success); }
.service-private-summary,
.service-private-viewer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(122,162,255,.22);
  border-radius: 12px;
  color: #dbe4ff;
  background: rgba(122,162,255,.055);
}
.service-private-summary > .icon,
.service-private-viewer > .icon { flex: 0 0 auto; }
.service-private-summary p,
.service-private-viewer p { margin: 4px 0 0; color: #aeb9d4; line-height: 1.5; }
.service-private-summary small { display: block; margin-top: 6px; color: #8998bb; }

.service-context-state {
  display: grid;
  gap: 12px;
}
.service-context-state > h2,
.service-context-state > p { margin: 0; }
.service-context-state > label {
  color: var(--xc-heading);
  font-size: 12px;
  font-weight: var(--fw-medium);
}
.service-context-state textarea { width: 100%; }
.service-action-checklist,
.service-decline-reasons {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 0;
}
.service-decline-reasons legend {
  margin-bottom: 8px;
  color: var(--xc-service-body);
  font-size: 12px;
}
.service-action-checklist label,
.service-decline-reasons label {
  min-height: var(--xc-tap);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--xc-service-line);
  border-radius: 10px;
  background: var(--xc-service-raised);
  color: var(--xc-heading);
  cursor: pointer;
}
.service-action-checklist input,
.service-decline-reasons input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.service-order-upload {
  position: relative;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 12px;
  cursor: pointer;
}
.service-order-upload > span,
.service-order-upload strong,
.service-order-upload small { display: block; }
.service-order-upload small { margin-top: 3px; color: var(--xc-service-body); }
.service-order-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.service-upload-list {
  display: grid;
  gap: 9px;
  padding: 0;
  list-style: none;
}
.service-upload-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(110px,.7fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--xc-service-line);
  border-radius: 11px;
  background: var(--xc-service-raised);
}
.service-upload-item strong,
.service-upload-item small { display: block; }
.service-upload-item strong { overflow-wrap: anywhere; color: var(--xc-heading); font-size: 12px; }
.service-upload-item small { margin-top: 3px; color: var(--xc-service-body); font-size: 10.5px; }
.service-upload-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.service-upload-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--xc-primary);
}
.service-upload-item--failed .service-upload-progress > span { background: var(--xc-danger); }
.service-upload-actions { display: flex; gap: 6px; }

.services-tab-row {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--xc-service-line);
  scrollbar-width: none;
}
.services-tab-row::-webkit-scrollbar { display: none; }
.services-tab-row button {
  min-height: 44px;
  flex: 0 0 auto;
  padding: 10px 13px;
  border-bottom: 2px solid transparent;
  color: var(--xc-service-body);
  font-weight: var(--fw-medium);
}
.services-tab-row button.is-active { border-color: var(--xc-link); color: #fff; }
.service-order-list { display: grid; gap: 8px; }
.service-order-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(220px,1fr) 120px minmax(170px,.7fr) 150px;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 11px 13px;
  border: 1px solid var(--xc-service-line);
  border-radius: 13px;
  background: var(--xc-service-surface);
}
.service-order-row.is-unread { border-left: 3px solid var(--xc-link); }
.service-order-row__identity { display: flex; min-width: 0; align-items: center; gap: 9px; }
.service-order-row__identity > div { min-width: 0; }
.service-order-row__identity strong,
.service-order-row__identity small,
.service-order-row__status small { display: block; }
.service-order-row__identity strong { overflow: hidden; color: #f2edf7; text-overflow: ellipsis; white-space: nowrap; }
.service-order-row__identity small,
.service-order-row__status small { margin-top: 4px; color: var(--xc-service-body); font-size: 10.5px; }
.service-order-row__unread { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: transparent; }
.service-order-row.is-unread .service-order-row__unread { background: var(--xc-link); }
.service-order-row__amount { color: #f3edf8; font-size: 12px; }
.service-order-row__status { min-width: 0; }
.service-order-row__action { display: inline-flex; min-height: 44px; align-items: center; justify-content: flex-end; gap: 5px; color: #ff8ec4; font-size: 12px; font-weight: var(--fw-semibold); }
.service-order-row__action .icon { width: 15px; }
.service-status--pending { color: var(--xc-service-pending); background: rgba(245,195,68,.08); }
.service-status--active { color: var(--xc-service-active); background: rgba(192,92,246,.08); }
.service-status--success { color: var(--xc-service-success); background: rgba(52,211,153,.08); }
.service-status--danger { color: var(--xc-service-danger); background: rgba(255,107,107,.08); }
.service-status--neutral { color: var(--xc-service-neutral); background: rgba(154,160,170,.08); }
.service-status--physical { color: var(--xc-type-physical); background: rgba(122,162,255,.08); }
.service-status--interactive { color: var(--xc-type-interactive); background: rgba(255,90,168,.08); }

.service-order-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 16px 0;
  padding: 18px;
  border: 1px solid var(--xc-service-line);
  border-radius: 16px;
  background: var(--xc-service-surface);
}
.service-order-detail-header h1 { margin-top: 3px; font-size: clamp(24px,4vw,34px); }
.service-order-detail-header p { margin-top: 5px; color: var(--xc-service-body); }
.service-order-detail-header > div:last-child { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.service-order-detail-header > div:last-child > strong { color: #fff; font-size: 18px; }
.service-order-detail-header > div:last-child > small { color: var(--xc-service-body); }
.service-order-workspace,
.creator-workspace-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr); gap: 14px; align-items: start; }
.service-order-workspace__main,
.creator-workspace-grid main,
.creator-workspace-grid aside { display: grid; gap: 13px; }
.service-workspace-card { padding: 17px; }
.service-workspace-card h2 { margin-top: 4px; font-size: 18px; }
.service-workspace-card > p,
.service-workspace-card blockquote { margin: 8px 0 0; color: var(--xc-service-body); line-height: 1.6; }
.service-workspace-card blockquote { padding-left: 13px; border-left: 2px solid rgba(255,90,168,.5); }
.service-conversation { display: grid; gap: 8px; margin-top: 13px; }
.service-conversation p { display: grid; grid-template-columns: 100px 1fr auto; gap: 10px; margin: 0; padding: 10px; border-radius: 10px; background: var(--xc-service-raised); }
.service-conversation strong { color: #f0e9f5; }
.service-conversation span { color: #c5bcd1; }
.service-conversation small { color: #8f86a0; }
.service-disabled-composer { display: flex; gap: 8px; margin-top: 10px; }
.service-disabled-composer input { min-width: 0; flex: 1; }
.service-workspace-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.service-order-timeline { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.service-order-timeline li { position: relative; display: flex; gap: 10px; min-height: 55px; }
.service-order-timeline li::before { position: absolute; top: 22px; bottom: -2px; left: 11px; width: 1px; content: ''; background: var(--xc-service-line); }
.service-order-timeline li:last-child::before { display: none; }
.service-order-timeline li > span { z-index: 1; display: flex; width: 23px; height: 23px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid var(--xc-service-line); border-radius: 50%; color: #8f86a0; background: var(--xc-service-surface); }
.service-order-timeline li.is-complete > span { border-color: rgba(52,211,153,.45); color: var(--xc-service-success); background: #102019; }
.service-order-timeline .icon { width: 13px; height: 13px; }
.service-order-timeline strong,
.service-order-timeline small { display: block; }
.service-order-timeline strong { color: #eae4f3; font-size: 12px; }
.service-order-timeline small { margin-top: 3px; color: var(--xc-service-body); font-size: 10px; }
.service-fee-breakdown { display: grid; gap: 8px; margin: 13px 0; }
.service-fee-breakdown > div { display: flex; justify-content: space-between; gap: 10px; color: var(--xc-service-body); }
.service-fee-breakdown dd { margin: 0; color: #eae4f3; }
.service-fee-breakdown .is-share { padding-top: 10px; border-top: 1px solid var(--xc-service-line); color: var(--xc-service-success); font-weight: var(--fw-semibold); }
.service-request-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 13px 0 0; }
.service-request-facts > div { padding: 10px; border-radius: 10px; background: var(--xc-service-raised); }
.service-request-facts dt { color: var(--xc-service-body); font-size: 10px; }
.service-request-facts dd { margin: 4px 0 0; color: #eee8f5; font-size: 12px; }
.service-session-options { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.service-session-options button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--xc-service-line); border-radius: 10px; color: var(--xc-service-body); }
.creator-order-action-bar {
  position: sticky;
  z-index: 20;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255,90,168,.3);
  border-radius: 14px;
  background: rgba(18,13,26,.96);
  backdrop-filter: blur(14px);
}
.creator-order-action-bar > div { min-width: 0; margin-right: auto; }
.creator-order-action-bar strong,
.creator-order-action-bar small { display: block; }
.creator-order-action-bar strong { color: #fff; }
.creator-order-action-bar small { margin-top: 3px; color: var(--xc-service-body); }

.creator-order-summary { display: grid; grid-template-columns: repeat(7,minmax(105px,1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.service-summary-card { padding: 12px; border: 1px solid var(--xc-service-line); border-radius: 12px; background: var(--xc-service-surface); }
.service-summary-card span,
.service-summary-card strong { display: block; }
.service-summary-card span { color: var(--xc-service-body); font-size: 10px; }
.service-summary-card strong { margin-top: 6px; color: #fff; font-size: 22px; }
.service-summary-card--pending { border-top-color: var(--xc-service-pending); }
.service-summary-card--active { border-top-color: var(--xc-service-active); }
.service-summary-card--physical { border-top-color: var(--xc-type-physical); }
.service-summary-card--danger { border-top-color: var(--xc-service-danger); }
.service-summary-card--success { border-top-color: var(--xc-service-success); }
.creator-orders-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 15px 0; }
.creator-order-search { min-width: 220px; flex: 1; }
.creator-order-search small { display: block; margin-top: 3px; color: var(--xc-service-body); }
.creator-orders-toolbar > label:not(.creator-order-search) { display: grid; gap: 5px; color: var(--xc-service-body); font-size: 11px; }
.creator-order-unread { min-height: var(--xc-tap); grid-auto-flow: column; align-items: center; }
.creator-order-unread input { width: 20px; height: 20px; }

.service-capacity-panel { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 14px; align-items: center; margin-bottom: 14px; padding: 16px; }
.service-capacity-panel dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.service-capacity-panel dl > div { padding: 9px; border-radius: 10px; background: var(--xc-service-raised); }
.service-capacity-panel dt { color: var(--xc-service-body); font-size: 10px; }
.service-capacity-panel dd { margin: 4px 0 0; color: #fff; font-size: 12px; }
.service-vacation-toggle { display: flex; min-height: 56px; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--xc-service-line); border-radius: 11px; }
.service-vacation-toggle input { width: 20px; height: 20px; }
.service-vacation-toggle strong,
.service-vacation-toggle small { display: block; }
.service-vacation-toggle small { margin-top: 2px; color: var(--xc-service-body); }
.service-template-panel { margin-bottom: 14px; padding: 16px; border: 1px solid var(--xc-service-line); border-radius: 16px; background: var(--xc-service-surface); }
.service-template-panel h3 { margin-top: 4px; color: var(--xc-service-heading); }
.service-template-panel p { max-width: 720px; margin-top: 5px; color: var(--xc-service-body); line-height: 1.5; }
.service-template-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 13px; }
.service-template-grid button { display: flex; min-height: var(--xc-tap); align-items: center; gap: 7px; padding: 9px 10px; border: 1px solid var(--xc-service-line); border-radius: 10px; color: var(--xc-service-body); text-align: left; background: var(--xc-service-raised); }
.service-template-grid button .icon { width: 15px; height: 15px; }
.manage-service-list { display: grid; gap: 8px; }
.manage-service-row { display: grid; grid-template-columns: 36px 44px minmax(180px,1fr) auto minmax(260px,auto); gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--xc-service-line); border-radius: 13px; background: var(--xc-service-surface); }
.manage-service-row__drag { color: #71687f; }
.manage-service-row__icon { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 11px; }
.manage-service-row__icon--digital { color: var(--xc-type-digital); background: rgba(168,85,247,.1); }
.manage-service-row__icon--interactive { color: var(--xc-type-interactive); background: rgba(255,90,168,.1); }
.manage-service-row__icon--physical { color: var(--xc-type-physical); background: rgba(122,162,255,.1); }
.manage-service-row__copy { min-width: 0; }
.manage-service-row__copy h3 { overflow: hidden; color: #f1ebf7; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.manage-service-row__copy p { margin-top: 3px; color: var(--xc-service-body); font-size: 11px; }
.manage-service-row__actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

.service-builder { display: grid; gap: 13px; }
.service-builder-card { padding: 18px; }
.service-builder-card h2 { margin: 4px 0 15px; }
.service-builder-card > label { display: grid; gap: 7px; margin-top: 13px; color: #d8cfe4; }
.service-builder-card > label small { color: var(--xc-service-body); }
.service-builder-card textarea,
.service-builder-card input,
.service-builder-card select { width: 100%; }
.service-builder-types { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.service-builder-type { display: flex; min-height: 104px; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid var(--xc-service-line); border-radius: 12px; cursor: pointer; background: var(--xc-service-raised); }
.service-builder-type.is-selected { border-color: rgba(255,90,168,.5); background: rgba(255,61,154,.07); }
.service-builder-type input { width: 18px; height: 18px; flex: 0 0 auto; }
.service-builder-type .icon { flex: 0 0 auto; }
.service-builder-type strong,
.service-builder-type small { display: block; }
.service-builder-type small { margin-top: 4px; color: var(--xc-service-body); line-height: 1.45; }
.service-builder-cover { display: flex; min-height: 120px; align-items: center; justify-content: center; gap: 8px; border: 1px dashed rgba(255,255,255,.18); border-radius: 12px; color: var(--xc-service-body); background: var(--xc-service-raised); }
.service-builder-two { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.service-builder-two label { display: grid; gap: 7px; color: #d8cfe4; }
.service-builder-limit-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 13px 0; }
.service-builder-limit-grid article { padding: 12px; border: 1px solid var(--xc-service-line); border-radius: 11px; background: var(--xc-service-raised); }
.service-builder-limit-grid strong,
.service-builder-limit-grid span,
.service-builder-limit-grid small { display: block; }
.service-builder-limit-grid strong { color: #ff8ec4; font-size: 21px; }
.service-builder-limit-grid span { margin-top: 4px; color: #e7dfef; }
.service-builder-limit-grid small { margin-top: 3px; color: var(--xc-service-body); }
.service-builder-actions { position: sticky; z-index: 15; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 12px; border: 1px solid var(--xc-service-line); border-radius: 13px; background: rgba(18,13,26,.96); backdrop-filter: blur(14px); }

@media (max-width: 1100px) {
  .service-grid,
  .service-grid--compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-order-row { grid-template-columns: minmax(190px,1fr) 105px minmax(155px,.7fr) 130px; }
  .service-capacity-panel { grid-template-columns: 1fr; }
  .service-template-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .service-detail-layout,
  .service-review-layout,
  .service-order-workspace,
  .creator-workspace-grid { grid-template-columns: 1fr; }
  .service-order-panel,
  .service-payment-card { position: static; }
  .service-order-row { grid-template-columns: minmax(0,1fr) auto; }
  .service-order-row__status { grid-column: 1; }
  .service-order-row__action { grid-column: 2; grid-row: 2; }
  .service-capacity-panel dl { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .manage-service-row { grid-template-columns: 32px 42px minmax(0,1fr) auto; }
  .manage-service-row > .service-availability { grid-column: 3; }
  .manage-service-row__actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: 8px; border-top: 1px solid var(--xc-service-line); }
}

@media (max-width: 767px) {
  .services-section-heading,
  .manage-services-heading,
  .services-catalogue-toolbar,
  .service-order-detail-header { align-items: flex-start; flex-direction: column; }
  .service-grid,
  .service-grid--compact { grid-template-columns: 1fr; }
  .service-card p { min-height: 0; }
  .services-filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .services-filter-row::-webkit-scrollbar { display: none; }
  .service-listing__preview { min-height: 180px; }
  .service-facts,
  .service-request-facts,
  .service-builder-types,
  .service-builder-limit-grid { grid-template-columns: 1fr; }
  .service-order-detail-header > div:last-child { align-items: flex-start; }
  .service-conversation p { grid-template-columns: 1fr; gap: 4px; }
  .creator-order-action-bar { align-items: stretch; flex-direction: column; }
  .creator-order-action-bar > div { margin: 0 0 4px; }
  .creator-order-action-bar .button { width: 100%; }
  .service-capacity-panel dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-builder-two { grid-template-columns: 1fr; }
  .service-template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-builder-actions { display: grid; grid-template-columns: 1fr; }
  .manage-service-row { grid-template-columns: 42px minmax(0,1fr); }
  .manage-service-row__drag { display: none; }
  .manage-service-row > .service-availability { grid-column: 2; }
  .manage-service-row__actions { grid-column: 1 / -1; overflow-x: auto; }
  .service-upload-item { grid-template-columns: 1fr; }
  .service-upload-actions { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .service-card__footer { align-items: flex-start; flex-direction: column; }
  .service-card__action { width: 100%; justify-content: space-between; }
  .service-listing,
  .service-order-panel,
  .service-review-card,
  .service-payment-card,
  .service-workspace-card,
  .service-builder-card { padding: 14px; }
  .service-listing__preview { margin: -14px -14px 15px; }
  .service-live-total { margin-inline: -2px; }
  .service-order-row { grid-template-columns: 1fr; padding: 12px; }
  .service-order-row__amount,
  .service-order-row__status,
  .service-order-row__action { grid-column: 1; grid-row: auto; }
  .service-order-row__action { justify-content: space-between; }
  .service-disabled-composer { flex-direction: column; }
  .service-disabled-composer .button { width: 100%; }
  .service-capacity-panel dl { grid-template-columns: 1fr; }
  .service-workspace-actions { display: grid; grid-template-columns: 1fr; }
  .service-workspace-actions .button { width: 100%; }
  .service-template-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .service-card { transition: none; }
  .services-loading > .icon { animation: none; }
}