/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* home/client_235_1/groovepulse/apps/admin/app/globals.css */

:root {
  --bg: #e2e9f0;
  --panel: #ffffff;
  --panel-alt: #f4f7fa;
  --panel-muted: #edf2f6;
  --line: #cdd8e3;
  --line-strong: #bfcbda;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #475569;
  --text-inverse-primary: #f8fafc;
  --text-inverse-secondary: #dbe5f2;
  --text-inverse-tertiary: #b8c6d8;
  --creator-bg: radial-gradient(66rem 38rem at 8% -8%, rgba(124, 58, 237, 0.28), transparent 64%),
    radial-gradient(74rem 42rem at 100% 0%, rgba(14, 165, 233, 0.2), transparent 68%),
    linear-gradient(180deg, #070a15 0%, #0c1223 44%, #0a1020 100%);
  --creator-surface: linear-gradient(180deg, rgba(22, 30, 50, 0.88), rgba(16, 23, 40, 0.9));
  --creator-surface-alt: rgba(17, 24, 41, 0.74);
  --creator-line: rgba(148, 163, 184, 0.24);
  --creator-line-strong: rgba(167, 139, 250, 0.38);
  --creator-text-primary: #f8fbff;
  --creator-text-secondary: #d8e2f5;
  --creator-text-tertiary: #afc0df;
  --creator-accent: #a855f7;
  --creator-accent-strong: #c084fc;
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --muted-soft: var(--text-tertiary);
  --accent: #22c55e;
  --accent-strong: #16a34a;
  --accent-soft: rgba(34, 197, 94, 0.12);
  --danger: #dc2626;
  --danger-soft: rgba(239, 68, 68, 0.1);
  --warning: #d97706;
  --warning-soft: rgba(245, 158, 11, 0.14);
  --success: #16a34a;
  --success-soft: rgba(34, 197, 94, 0.12);
  --shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
  --shadow-soft: 0 2px 8px rgba(15, 23, 42, 0.03);
  --radius-lg: 6px;
  --radius-md: 6px;
  --radius-sm: 5px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: 105%;
}

body {
  min-height: 100vh;
}

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

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

button {
  cursor: pointer;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

input,
select,
textarea {
  color: var(--text);
}

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

.creator-shell {
  --panel: var(--creator-surface);
  --panel-alt: rgba(20, 29, 49, 0.8);
  --panel-muted: var(--creator-surface-alt);
  --line: var(--creator-line);
  --line-strong: var(--creator-line-strong);
  --text: var(--creator-text-primary);
  --muted: var(--creator-text-secondary);
  --muted-soft: var(--creator-text-tertiary);
  --shadow-soft: 0 22px 50px rgba(2, 6, 23, 0.38);
  --shadow: 0 28px 64px rgba(2, 6, 23, 0.46);
  background: var(--creator-bg);
  /* Body uses :root dark text; without this, main content inherits low-contrast text on the dark workspace. */
  color: var(--creator-text-primary);
}

.creator-shell .sidebar {
  background:
    linear-gradient(180deg, rgba(20, 16, 46, 0.94), rgba(13, 20, 37, 0.96)),
    linear-gradient(145deg, rgba(168, 85, 247, 0.12), rgba(255, 255, 255, 0));
  color: var(--creator-text-secondary);
  border-right: 1px solid rgba(168, 85, 247, 0.22);
}

.creator-shell .brand-mark {
  background: linear-gradient(135deg, #a855f7 0%, #22d3ee 100%);
  box-shadow: 0 14px 28px rgba(124, 58, 237, 0.34);
}

.creator-shell .brand-subtitle {
  color: var(--creator-text-tertiary);
}

.creator-shell .nav-link {
  color: var(--creator-text-secondary);
}

.creator-shell .nav-link.active,
.creator-shell .nav-link:hover {
  background: rgba(167, 139, 250, 0.14);
  border-color: rgba(167, 139, 250, 0.3);
  color: var(--creator-text-primary);
}

.creator-shell .nav-link.active {
  background: rgba(168, 85, 247, 0.24);
  border-color: rgba(192, 132, 252, 0.36);
  box-shadow:
    inset 0 0 0 1px rgba(216, 180, 254, 0.14),
    0 14px 28px rgba(7, 10, 21, 0.42);
}

.creator-shell .sidebar-user {
  background: rgba(8, 13, 25, 0.46);
  border-color: rgba(168, 85, 247, 0.3);
}

.creator-shell .sidebar-user-label,
.creator-shell .sidebar-user-metadata {
  color: var(--creator-text-tertiary);
}

.creator-shell .sidebar-user-email {
  color: var(--creator-text-primary);
}

.creator-shell .content {
  background: transparent;
}

.creator-shell .panel,
.creator-shell .summary-card,
.creator-shell .section-well {
  background: var(--creator-surface);
  border-color: var(--creator-line);
  box-shadow: var(--shadow-soft);
}

.creator-shell .section-well {
  background: var(--creator-surface-alt);
}

.creator-shell h1,
.creator-shell h2,
.creator-shell h3,
.creator-shell strong,
.creator-shell .summary-value,
.creator-shell .table-title {
  color: var(--creator-text-primary);
  line-height: 1.24;
  letter-spacing: -0.015em;
}

.creator-shell .summary-label,
.creator-shell .member-page-eyebrow,
.creator-shell .field > span:first-child {
  color: var(--creator-text-tertiary);
  letter-spacing: 0.11em;
}

.creator-shell .summary-helper,
.creator-shell .muted,
.creator-shell .table-meta,
.creator-shell .table-timestamp,
.creator-shell .small {
  color: var(--creator-text-secondary);
  line-height: 1.62;
}

.creator-shell .field input,
.creator-shell .field select,
.creator-shell .field textarea,
.creator-shell .toolbar input,
.creator-shell .toolbar select {
  color: var(--creator-text-primary);
  background: rgba(7, 12, 24, 0.72);
  border-color: rgba(148, 163, 184, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.creator-shell .field {
  gap: 10px;
  margin-bottom: 12px;
}

.creator-shell .field-row {
  gap: 12px;
}

.creator-shell .creator-onboarding-form {
  gap: 14px;
}

.creator-shell .creator-profile-form {
  gap: 22px;
}

.creator-shell .creator-profile-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creator-shell .creator-profile-field-full {
  grid-column: 1 / -1;
}

.creator-shell .creator-profile-form .field {
  gap: 5px;
  margin-bottom: 4px;
}

.creator-shell .creator-profile-form .field > span:first-child {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.creator-shell .creator-profile-form .field input,
.creator-shell .creator-profile-form .field select,
.creator-shell .creator-profile-form .field textarea {
  min-height: 38px;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 0.94rem;
  line-height: 1.28;
}

.creator-shell .creator-profile-form .field textarea {
  min-height: 82px;
  padding: 8px 10px;
}

.creator-shell .creator-profile-form .field input::-moz-placeholder, .creator-shell .creator-profile-form .field textarea::-moz-placeholder {
  color: rgba(171, 188, 212, 0.7);
  font-size: 0.9rem;
}

.creator-shell .creator-profile-form .field input::placeholder,
.creator-shell .creator-profile-form .field textarea::placeholder {
  color: rgba(171, 188, 212, 0.7);
  font-size: 0.9rem;
}

.creator-shell .creator-profile-form .field-row {
  gap: 10px;
}

.creator-shell .creator-profile-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.creator-shell .creator-profile-actions .primary-button {
  width: auto;
  min-width: 178px;
  min-height: 40px;
  border-radius: 11px;
  padding: 0 20px;
}

.creator-shell .member-profile-summary-grid {
  gap: 18px;
}

.creator-shell .member-shell-user-label {
  color: var(--creator-text-tertiary);
  letter-spacing: 0.09em;
}

.creator-shell .field input::-moz-placeholder, .creator-shell .field textarea::-moz-placeholder {
  color: var(--creator-text-tertiary);
}

.creator-shell .field input::placeholder,
.creator-shell .field textarea::placeholder {
  color: var(--creator-text-tertiary);
}

.creator-shell .field input:focus,
.creator-shell .field select:focus,
.creator-shell .field textarea:focus {
  border-color: rgba(192, 132, 252, 0.58);
  box-shadow:
    0 0 0 4px rgba(168, 85, 247, 0.16),
    0 10px 22px rgba(15, 23, 42, 0.24);
}

/* File inputs keep a light native “choose file” chrome unless styled — match creator panels. */
.creator-shell .field input[type="file"] {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: rgba(7, 12, 24, 0.72);
  color: var(--creator-text-secondary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.creator-shell .field input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.38);
  background: rgba(30, 41, 59, 0.92);
  color: var(--creator-text-primary);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.creator-shell .field input[type="file"]::file-selector-button:hover {
  background: rgba(51, 65, 85, 0.95);
  border-color: rgba(192, 132, 252, 0.5);
}

.creator-shell .primary-button {
  background: linear-gradient(135deg, #9333ea 0%, #a855f7 54%, #22d3ee 100%);
  border-color: rgba(217, 70, 239, 0.22);
  color: #fff;
}

.creator-shell .primary-button:hover,
.creator-shell .primary-button:focus-visible {
  background: linear-gradient(135deg, #a855f7 0%, #c084fc 50%, #67e8f9 100%);
}

.creator-shell .secondary-button {
  color: var(--creator-text-primary);
  border-color: rgba(168, 85, 247, 0.28);
  background: rgba(14, 21, 36, 0.56);
}

.creator-shell .secondary-button:hover,
.creator-shell .secondary-button:focus-visible {
  background: rgba(30, 41, 59, 0.74);
  border-color: rgba(192, 132, 252, 0.4);
}

.creator-shell .creator-shell-logout {
  border-color: rgba(192, 132, 252, 0.36);
  background: rgba(30, 41, 59, 0.62);
  color: var(--creator-text-primary);
}

.creator-shell .badge {
  color: var(--creator-text-primary);
  background: rgba(14, 21, 36, 0.66);
  border-color: rgba(148, 163, 184, 0.32);
}

.creator-shell .creator-onboarding-badge {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(192, 132, 252, 0.34);
  color: #e9d5ff;
}

.creator-shell .creator-home-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

/* Creator artist home: cover + overlapping identity header */
.creator-shell .creator-home-shell.stack {
  gap: 18px;
}

.creator-shell .creator-home-identity-panel {
  padding: 0;
  overflow: visible;
}

.creator-home-cover-wrap {
  position: relative;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

.creator-home-cover {
  min-height: 232px;
  max-height: 272px;
  height: clamp(232px, 24vw, 272px);
  border-radius: 14px 14px 0 0;
}

.creator-home-cover-wrap.creator-home-cover--noir_pulse .creator-home-cover {
  background:
    radial-gradient(ellipse 120% 85% at 10% -5%, rgba(124, 58, 237, 0.42), transparent 58%),
    radial-gradient(ellipse 95% 70% at 92% 12%, rgba(34, 211, 238, 0.16), transparent 52%),
    radial-gradient(ellipse 80% 55% at 48% 100%, rgba(99, 102, 241, 0.28), transparent 58%),
    linear-gradient(168deg, rgba(22, 30, 50, 0.97) 0%, rgba(16, 23, 40, 0.94) 42%, rgba(11, 18, 32, 0.98) 100%);
}

.creator-home-cover-wrap.creator-home-cover--aurora_lane .creator-home-cover {
  background:
    radial-gradient(ellipse 110% 75% at 78% -8%, rgba(34, 211, 238, 0.22), transparent 55%),
    radial-gradient(ellipse 90% 65% at 8% 20%, rgba(99, 102, 241, 0.32), transparent 52%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(124, 58, 237, 0.2), transparent 58%),
    linear-gradient(172deg, rgba(16, 24, 42, 0.98) 0%, rgba(11, 18, 32, 0.96) 100%);
}

.creator-home-cover-wrap.creator-home-cover--midnight_step .creator-home-cover {
  background:
    radial-gradient(ellipse 100% 80% at 50% -10%, rgba(67, 56, 202, 0.35), transparent 55%),
    radial-gradient(ellipse 85% 60% at 15% 85%, rgba(168, 85, 247, 0.14), transparent 52%),
    linear-gradient(185deg, rgba(11, 18, 32, 0.99) 0%, rgba(22, 30, 50, 0.92) 48%, rgba(7, 12, 24, 0.98) 100%);
}

.creator-home-cover-wrap.creator-home-cover--plum_orchid .creator-home-cover {
  background:
    radial-gradient(ellipse 95% 70% at 20% 15%, rgba(192, 132, 252, 0.26), transparent 54%),
    radial-gradient(ellipse 100% 75% at 88% 60%, rgba(124, 58, 237, 0.2), transparent 56%),
    linear-gradient(160deg, rgba(22, 30, 50, 0.96) 0%, rgba(16, 23, 40, 0.95) 55%, rgba(11, 18, 32, 0.98) 100%);
}

.creator-home-cover-wrap.creator-home-cover--ember_dusk .creator-home-cover {
  background:
    radial-gradient(ellipse 105% 72% at 70% 8%, rgba(217, 70, 239, 0.12), transparent 50%),
    radial-gradient(ellipse 90% 65% at 12% 70%, rgba(168, 85, 247, 0.22), transparent 54%),
    radial-gradient(ellipse 75% 50% at 50% 100%, rgba(99, 102, 241, 0.16), transparent 58%),
    linear-gradient(175deg, rgba(16, 23, 40, 0.97) 0%, rgba(11, 18, 32, 0.98) 100%);
}

.creator-home-cover-art {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.creator-home-cover-wrap.creator-home-cover--noir_pulse .creator-home-cover-art {
  background:
    linear-gradient(108deg, transparent 0%, rgba(168, 85, 247, 0.09) 42%, transparent 68%),
    linear-gradient(-22deg, transparent 35%, rgba(34, 211, 238, 0.07) 62%, transparent 88%),
    repeating-linear-gradient(
      -18deg,
      transparent,
      transparent 2px,
      rgba(148, 163, 184, 0.03) 2px,
      rgba(148, 163, 184, 0.03) 3px
    );
}

.creator-home-cover-wrap.creator-home-cover--aurora_lane .creator-home-cover-art {
  background:
    linear-gradient(95deg, transparent 0%, rgba(34, 211, 238, 0.08) 45%, transparent 70%),
    linear-gradient(-35deg, transparent 40%, rgba(129, 140, 248, 0.08) 65%, transparent 92%),
    repeating-linear-gradient(12deg, transparent, transparent 3px, rgba(148, 163, 184, 0.025) 3px, rgba(148, 163, 184, 0.025) 4px);
}

.creator-home-cover-wrap.creator-home-cover--midnight_step .creator-home-cover-art {
  background:
    linear-gradient(118deg, rgba(99, 102, 241, 0.06) 0%, transparent 55%),
    linear-gradient(-15deg, transparent 50%, rgba(148, 163, 184, 0.04) 78%, transparent 100%);
}

.creator-home-cover-wrap.creator-home-cover--plum_orchid .creator-home-cover-art {
  background:
    linear-gradient(125deg, transparent 10%, rgba(192, 132, 252, 0.07) 48%, transparent 72%),
    repeating-linear-gradient(
      -22deg,
      transparent,
      transparent 2px,
      rgba(148, 163, 184, 0.028) 2px,
      rgba(148, 163, 184, 0.028) 3px
    );
}

.creator-home-cover-wrap.creator-home-cover--ember_dusk .creator-home-cover-art {
  background:
    linear-gradient(88deg, transparent 0%, rgba(168, 85, 247, 0.07) 40%, transparent 68%),
    linear-gradient(-28deg, transparent 38%, rgba(217, 70, 239, 0.05) 62%, transparent 88%);
}

.creator-home-cover-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(7, 12, 24, 0.08) 0%,
    transparent 38%,
    rgba(11, 18, 32, 0.5) 68%,
    rgba(7, 12, 24, 0.88) 100%
  );
  pointer-events: none;
}

.creator-home-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0 24px 26px;
}

.creator-home-header-main {
  display: flex;
  align-items: flex-end;
  gap: 16px 22px;
  flex: 1;
  min-width: min(100%, 280px);
}

.creator-home-avatar-wrap {
  flex-shrink: 0;
  margin-top: -72px;
  position: relative;
  z-index: 2;
}

.creator-home-avatar-ring {
  position: relative;
  padding: 4px;
  border-radius: 28px;
  background: linear-gradient(152deg, rgba(192, 132, 252, 0.55), rgba(99, 102, 241, 0.28) 48%, rgba(34, 211, 238, 0.18));
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.22),
    0 12px 32px rgba(2, 6, 23, 0.55),
    0 28px 56px rgba(2, 6, 23, 0.35),
    0 0 48px rgba(168, 85, 247, 0.14);
}

.creator-home-avatar {
  width: 144px;
  height: 144px;
  border-radius: 23px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.creator-home-avatar-placeholder {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.12), transparent 42%),
    linear-gradient(152deg, rgba(129, 140, 248, 0.55), rgba(168, 85, 247, 0.35) 52%, rgba(34, 211, 238, 0.12));
}

.creator-home-identity {
  flex: 1;
  min-width: 0;
  padding-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.creator-home-name {
  margin: 0 0 6px;
  font-size: clamp(1.58rem, 2.65vw, 2.12rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--creator-text-primary);
}

.creator-home-meta {
  margin: 0 0 8px;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.015em;
  color: var(--creator-text-tertiary);
}

.creator-home-meta-sep {
  opacity: 0.42;
  padding: 0 5px;
  font-weight: 400;
}

.creator-home-bio {
  margin: 4px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--creator-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 52rem;
}

.creator-home-header-actions {
  flex-shrink: 0;
  padding-bottom: 6px;
}

.creator-home-header--identity-edit {
  align-items: flex-start;
}

.creator-home-header-editor {
  flex: 1;
  min-width: min(100%, 240px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.creator-home-header-notice {
  width: 100%;
}

.creator-home-header-main-edit {
  align-items: flex-start;
}

.creator-home-avatar-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.creator-home-avatar-upload {
  max-width: 200px;
}

.creator-home-avatar-upload input[type="file"] {
  font-size: 0.82rem;
}

.creator-home-identity-edit-fields {
  flex: 1;
  min-width: 0;
}

.creator-home-identity-field-row {
  display: grid;
  gap: 10px 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creator-home-identity-location-grid {
  display: grid;
  gap: 10px 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creator-home-banner-presets {
  margin: 4px 0 0;
  padding: 0;
  border: none;
}

.creator-home-banner-presets-legend {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--creator-text-tertiary);
  margin-bottom: 6px;
}

.creator-home-banner-presets-help {
  margin: 0 0 12px;
  max-width: 36rem;
}

.creator-home-banner-preset-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.creator-home-banner-preset-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(14, 21, 36, 0.45);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.creator-home-banner-preset-tile:hover {
  border-color: rgba(192, 132, 252, 0.35);
}

.creator-home-banner-preset-tile.is-selected {
  border-color: rgba(192, 132, 252, 0.55);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.2);
}

.creator-home-banner-preset-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.creator-home-banner-preset-swatch {
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(11, 18, 32, 0.65);
}

.creator-home-banner-preset-tile:has(input[value="noir_pulse"]:checked) .creator-home-banner-preset-swatch {
  background:
    radial-gradient(ellipse 100% 90% at 20% 20%, rgba(124, 58, 237, 0.5), transparent 62%),
    linear-gradient(155deg, rgba(22, 30, 50, 0.95), rgba(11, 18, 32, 0.98));
}

.creator-home-banner-preset-tile:has(input[value="aurora_lane"]:checked) .creator-home-banner-preset-swatch {
  background:
    radial-gradient(ellipse 90% 80% at 75% 15%, rgba(34, 211, 238, 0.35), transparent 58%),
    linear-gradient(165deg, rgba(16, 24, 42, 0.95), rgba(11, 18, 32, 0.98));
}

.creator-home-banner-preset-tile:has(input[value="midnight_step"]:checked) .creator-home-banner-preset-swatch {
  background:
    radial-gradient(ellipse 95% 85% at 45% -5%, rgba(67, 56, 202, 0.45), transparent 58%),
    linear-gradient(180deg, rgba(11, 18, 32, 0.98), rgba(22, 30, 50, 0.88));
}

.creator-home-banner-preset-tile:has(input[value="plum_orchid"]:checked) .creator-home-banner-preset-swatch {
  background:
    radial-gradient(ellipse 100% 80% at 25% 25%, rgba(192, 132, 252, 0.35), transparent 58%),
    linear-gradient(160deg, rgba(22, 30, 50, 0.96), rgba(11, 18, 32, 0.98));
}

.creator-home-banner-preset-tile:has(input[value="ember_dusk"]:checked) .creator-home-banner-preset-swatch {
  background:
    radial-gradient(ellipse 90% 75% at 65% 10%, rgba(217, 70, 239, 0.18), transparent 52%),
    radial-gradient(ellipse 80% 70% at 15% 75%, rgba(168, 85, 247, 0.28), transparent 55%),
    linear-gradient(175deg, rgba(16, 23, 40, 0.96), rgba(11, 18, 32, 0.98));
}

.creator-home-banner-preset-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--creator-text-primary);
}

.creator-home-banner-preset-hint {
  line-height: 1.35;
}

.creator-profile-heading-plain {
  margin: 0 0 8px;
  font-size: 1.28rem;
}

.creator-profile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.creator-profile-header-copy {
  flex: 1;
  min-width: min(100%, 240px);
}

.creator-profile-heading {
  margin: 4px 0 6px;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}

.creator-profile-edit-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.creator-profile-form-root {
  margin-top: 8px;
}

.creator-profile-view {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.creator-profile-group {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.creator-profile-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.creator-profile-group-title {
  margin: 0 0 14px;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--creator-text-tertiary);
}

.creator-profile-group-grid {
  display: grid;
  gap: 12px 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creator-profile-contact-grid {
  display: grid;
  gap: 12px 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creator-profile-contact-phone-full {
  grid-column: 1 / -1;
}

.creator-profile-readonly-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.creator-profile-readonly-row-full {
  margin-top: 4px;
  gap: 6px;
}

.creator-profile-readonly-label {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--creator-text-tertiary);
}

.creator-profile-value {
  font-size: 0.95rem;
  line-height: 1.48;
  color: var(--creator-text-primary);
  word-break: break-word;
}

.creator-profile-bio-readonly {
  font-size: 0.98rem;
  line-height: 1.58;
  white-space: pre-wrap;
  color: var(--creator-text-secondary);
}

.creator-profile-link {
  color: var(--creator-accent-strong);
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 132, 252, 0.32);
}

.creator-profile-link:hover,
.creator-profile-link:focus-visible {
  color: #f5e9ff;
  border-bottom-color: rgba(232, 213, 255, 0.55);
}

.creator-profile-social-grid {
  display: grid;
  gap: 12px 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creator-profile-social-grid-edit {
  display: grid;
  gap: 10px 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creator-profile-media-preview {
  width: 120px;
  height: 120px;
}

@media (max-width: 720px) {
  .creator-profile-group-grid,
  .creator-profile-contact-grid,
  .creator-profile-social-grid,
  .creator-profile-social-grid-edit {
    grid-template-columns: 1fr;
  }

  .creator-home-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .creator-home-header-main {
    width: 100%;
  }

  .creator-home-header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .creator-home-avatar {
    width: 126px;
    height: 126px;
  }

  .creator-home-avatar-wrap {
    margin-top: -63px;
  }

  .creator-home-avatar-ring {
    padding: 3px;
    border-radius: 24px;
  }

  .creator-home-identity-field-row,
  .creator-home-identity-location-grid {
    grid-template-columns: 1fr;
  }
}

.creator-profile-image {
  width: 120px;
  height: 120px;
  border-radius: 18px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(192, 132, 252, 0.34);
  box-shadow: 0 20px 40px rgba(2, 6, 23, 0.36);
}

.creator-profile-image-hero {
  width: 132px;
  height: 132px;
}

.creator-shell .creator-social-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.creator-onboarding-theme {
  --text: var(--creator-text-primary);
  --muted: var(--creator-text-secondary);
  --muted-soft: var(--creator-text-tertiary);
  background: var(--creator-bg);
}

.creator-onboarding-theme .creator-onboarding-panel {
  background:
    linear-gradient(180deg, rgba(22, 30, 50, 0.94), rgba(11, 18, 32, 0.95)),
    linear-gradient(145deg, rgba(168, 85, 247, 0.1), rgba(255, 255, 255, 0));
  border-color: rgba(168, 85, 247, 0.28);
  box-shadow: 0 36px 88px rgba(2, 6, 23, 0.5);
}

.creator-onboarding-theme .creator-onboarding-eyebrow {
  color: #c4b5fd;
}

.creator-onboarding-theme .creator-onboarding-header p,
.creator-onboarding-theme .creator-onboarding-complete-copy p {
  color: var(--creator-text-secondary);
  line-height: 1.52;
}

.creator-onboarding-theme .creator-onboarding-form {
  gap: 12px;
}

.creator-onboarding-theme .field {
  gap: 6px;
  margin-bottom: 8px;
}

.creator-onboarding-theme .field-row {
  gap: 8px;
}

.creator-onboarding-theme h1,
.creator-onboarding-theme h2 {
  line-height: 1.24;
  letter-spacing: -0.015em;
}

.creator-onboarding-theme .primary-button {
  border-color: rgba(147, 197, 253, 0.22);
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 52%, #38bdf8 100%);
  color: #f8faff;
  box-shadow:
    0 18px 34px rgba(67, 56, 202, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.creator-onboarding-theme .primary-button:hover,
.creator-onboarding-theme .primary-button:focus-visible {
  background: linear-gradient(135deg, #a78bfa 0%, #818cf8 55%, #60a5fa 100%);
  box-shadow:
    0 20px 36px rgba(99, 102, 241, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.creator-onboarding-theme .secondary-button {
  color: #eef2ff;
  border-color: rgba(196, 181, 253, 0.26);
  background: rgba(30, 41, 59, 0.62);
}

.creator-onboarding-theme .secondary-button:hover,
.creator-onboarding-theme .secondary-button:focus-visible {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(167, 139, 250, 0.34);
  transform: translateY(-1px);
}

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 24px 18px 20px;
  background:
    linear-gradient(180deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0)),
    linear-gradient(180deg, #0f172a 0%, #111827 100%);
  color: var(--text-inverse-secondary);
  border-right: 1px solid rgba(148, 163, 184, 0.16);
}

.sidebar-main {
  display: grid;
  gap: 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 12px 24px rgba(34, 197, 94, 0.24);
}

.brand-copy {
  display: grid;
  gap: 2px;
}

.brand-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand-subtitle {
  color: var(--text-inverse-tertiary);
  font-size: 0.82rem;
}

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

.nav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0);
  border-radius: 8px;
  color: var(--text-inverse-secondary);
}

.nav-link.active,
.nav-link:hover {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.16);
  color: #f8fafc;
}

.nav-link.active {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.26);
  box-shadow:
    inset 0 0 0 1px rgba(34, 197, 94, 0.08),
    0 10px 24px rgba(2, 6, 23, 0.2);
}

.nav-link-label {
  font-size: 0.95rem;
  font-weight: 700;
}

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

.sidebar-user {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
}

.creator-shell-logout {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}

.creator-shell-logout:hover,
.creator-shell-logout:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(148, 163, 184, 0.28);
}

.sidebar-user-label {
  color: var(--text-inverse-tertiary);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sidebar-user-email {
  color: var(--text-inverse-primary);
  font-size: 0.9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sidebar-user-metadata {
  color: var(--text-inverse-tertiary);
}

.content {
  padding: 20px 24px 24px;
}

.content-inner {
  width: min(1480px, 100%);
  margin: 0 auto;
}

.page-header-shell {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: none;
}

.page-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 0;
}

.page-header-copy {
  display: grid;
  gap: 6px;
  max-width: 860px;
}

.page-eyebrow {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-title {
  margin: 0;
  font-size: clamp(2.15rem, 2.5vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 700;
}

.page-description {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.45;
}

.page-actions {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.page-actions .toolbar {
  justify-content: flex-end;
  align-items: flex-end;
}

.page-actions .field {
  margin-bottom: 0;
}

.dashboard-grid,
.summary-grid,
.form-grid,
.two-column {
  display: grid;
  gap: 14px;
}

.summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.dashboard-grid,
.two-column {
  grid-template-columns: 1.1fr 1.4fr;
}

.panel,
.summary-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.panel {
  padding: 16px;
}

.summary-card {
  padding: 16px;
  display: grid;
  gap: 6px;
  min-height: 136px;
}

.summary-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.summary-label,
.summary-helper,
.muted {
  color: var(--muted);
}

.small {
  color: var(--muted-soft);
}

.summary-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.summary-value {
  font-size: clamp(2.15rem, 2.6vw, 2.55rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.summary-helper {
  font-size: 0.88rem;
  line-height: 1.45;
}

.toolbar,
.inline-actions,
.field-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.field,
.field-row .field {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
  flex: 1 1 160px;
}

.field > span:first-child {
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.field input::-moz-placeholder, .toolbar input::-moz-placeholder {
  color: var(--muted-soft);
}

.field input::placeholder,
.toolbar input::placeholder {
  color: var(--muted-soft);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.toolbar input:focus,
.toolbar select:focus {
  outline: none;
  border-color: rgba(34, 197, 94, 0.48);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

.field textarea {
  min-height: 112px;
  resize: vertical;
}

.primary-button,
.secondary-button,
.danger-button {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 13px;
  font-size: 0.96rem;
  font-weight: 700;
  box-shadow: none;
}

.primary-button {
  background: var(--accent);
  color: #fff;
}

.primary-button:hover,
.primary-button:focus-visible {
  background: var(--accent-strong);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.03);
  outline: none;
}

.secondary-button {
  background: #fff;
  color: var(--text);
  border-color: var(--line-strong);
}

.secondary-button:hover,
.secondary-button:focus-visible {
  background: var(--panel-alt);
  border-color: var(--line-strong);
  outline: none;
}

.danger-button {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.22);
}

.danger-button:hover,
.danger-button:focus-visible {
  background: rgba(239, 68, 68, 0.16);
  outline: none;
}

.primary-button:disabled,
.secondary-button:disabled,
.danger-button:disabled {
  opacity: 0.6;
  box-shadow: none;
}

.full-width {
  width: 100%;
}

.notice {
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  line-height: 1.45;
  font-weight: 500;
}

.notice-error {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.16);
}

.notice-success {
  background: var(--success-soft);
  color: var(--success);
  border-color: rgba(34, 197, 94, 0.16);
}

.inline-hint {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

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

.status-grid {
  display: grid;
  gap: 10px;
}

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: #fff;
}

.table-scroll-region {
  overflow: auto;
  scroll-behavior: smooth;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  color: var(--text-tertiary);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.table-title {
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.35;
  font-size: 0.98rem;
}

.table-meta {
  color: var(--text-secondary);
  font-size: 0.81rem;
  line-height: 1.4;
}

.table-timestamp {
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  min-height: 30px;
  padding: 5px 10px;
  background: var(--panel-muted);
  color: #334155;
  border: 1px solid var(--line-strong);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge-success {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: rgba(34, 197, 94, 0.18);
}

.badge-pending {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: rgba(245, 158, 11, 0.18);
}

.badge-error {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.18);
}

.stack {
  display: grid;
  gap: 14px;
}

.comms-trust-page.stack {
  gap: 16px;
}

/* Do not set display:block on the base class — it overrides [hidden] in some engines and shows every tab panel at once. */
.comms-trust-tab-panel:not([hidden]) {
  display: block;
  padding-top: 2px;
}

.comms-trust-tab-panel[hidden] {
  display: none !important;
}

.comms-trust-tabs-bar {
  min-width: 0;
}

/* Narrow viewports: allow horizontal scroll instead of clipping tab labels */
.comms-trust-tabs-bar .tab-strip {
  display: flex;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.section-well {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(217, 226, 236, 0.95);
  border-radius: var(--radius-lg);
  background: var(--panel-muted);
}

.creator-media-group-list {
  display: grid;
  gap: 12px;
}

.creator-media-group {
  display: grid;
  gap: 10px;
}

.creator-media-card-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.creator-media-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  /* Follow shell tokens so creator workspace cards stay on-brand (avoid hardcoded white). */
  background: var(--panel);
  color: var(--text);
}

.creator-shell .creator-media-card {
  background: var(--creator-surface-alt);
  border-color: var(--creator-line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.creator-shell .creator-media-card .table-title {
  color: var(--creator-text-primary);
}

.creator-shell .creator-media-card .table-meta {
  color: var(--creator-text-secondary);
}

.creator-media-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.creator-media-card-meta {
  display: grid;
  gap: 4px;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.invite-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.public-home {
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(64rem 34rem at 0% 0%, rgba(15, 118, 110, 0.16), transparent 60%),
    radial-gradient(56rem 30rem at 100% 0%, rgba(59, 130, 246, 0.14), transparent 58%),
    linear-gradient(180deg, #08111a 0%, #0c1824 48%, #101d2b 100%);
}

.public-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
}

.public-home-listening {
  margin-top: 16px;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.public-home-wordmark,
.public-home-wordmark:visited {
  color: #f4fbff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-home-join,
.public-home-primary,
.join-choice-button {
  min-height: 46px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  text-decoration: none;
  font-weight: 700;
  transition: transform 120ms ease, opacity 120ms ease;
}

.public-home-join,
.join-choice-button {
  border: 1px solid rgba(179, 230, 255, 0.24);
  background: rgba(255, 255, 255, 0.04);
  color: #f1fbff;
}

.public-home-primary,
.join-choice-button-creator {
  border: 0;
  color: #f8fffe;
  background: linear-gradient(90deg, #0f766e 0%, #14b8a6 52%, #22c55e 100%);
}

.public-home-hero {
  max-width: 1120px;
  margin: 72px auto 0;
  padding: 56px;
  border-radius: 36px;
  border: 1px solid rgba(166, 227, 255, 0.14);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(14, 30, 43, 0.96), rgba(10, 22, 33, 0.94));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.public-home-kicker,
.join-page-eyebrow {
  display: inline-flex;
  margin-bottom: 16px;
  font-size: 0.8rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7dd3fc;
}

.public-home-hero h1 {
  margin: 0;
  max-width: 10ch;
  font-size: clamp(3rem, 6vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: -0.06em;
  color: #f2fbff;
}

.public-home-hero p {
  margin: 20px 0 0;
  max-width: 40rem;
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(224, 244, 255, 0.82);
}

.public-home-actions {
  margin-top: 28px;
}

.join-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(54rem 28rem at 50% 0%, rgba(34, 197, 94, 0.12), transparent 56%),
    linear-gradient(180deg, #071117 0%, #0b1620 52%, #0f1d29 100%);
}

.join-page-shell {
  width: min(1080px, 100%);
  display: grid;
  gap: 28px;
}

.join-page-heading {
  display: grid;
  gap: 10px;
  text-align: center;
}

.join-page-heading h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: #f4fbff;
}

.join-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.join-choice-card {
  display: grid;
  gap: 16px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(18, 29, 41, 0.96), rgba(13, 22, 31, 0.94));
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.24);
}

.join-choice-card-creator {
  border-color: rgba(45, 212, 191, 0.22);
  background:
    radial-gradient(circle at top left, rgba(20, 184, 166, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(12, 37, 41, 0.96), rgba(11, 28, 31, 0.94));
}

.join-choice-card h2 {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #f6fbff;
}

.join-choice-card p,
.join-choice-helper {
  margin: 0;
  line-height: 1.65;
  color: rgba(225, 237, 247, 0.82);
}

.join-choice-helper {
  font-size: 0.92rem;
  color: #99f6e4;
}

.member-auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 460px) minmax(360px, 430px);
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 24px;
  background:
    radial-gradient(56rem 32rem at 36% 0%, rgba(91, 33, 182, 0.1), transparent 70%),
    linear-gradient(180deg, #05060a 0%, #090a11 42%, #0d1018 100%);
}

.creator-auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(380px, 480px);
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 24px;
  background:
    radial-gradient(58rem 34rem at 24% 0%, rgba(13, 148, 136, 0.16), transparent 62%),
    linear-gradient(180deg, #041514 0%, #061b1a 44%, #08211f 100%);
}

.member-auth-hero,
.member-auth-card {
  align-self: center;
}

.member-auth-hero {
  border: 1px solid rgba(154, 166, 255, 0.16);
  background:
    radial-gradient(circle at top left, rgba(138, 92, 246, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(25, 31, 56, 0.94), rgba(14, 18, 34, 0.94));
  border-radius: 28px;
  padding: 34px 32px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.member-auth-hero h1,
.member-hero-copy h1,
.member-shell-content h1 {
  margin: 0 0 14px;
  font-family: var(--font-member-display), var(--font-member), "Segoe UI", sans-serif;
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: #f7f8ff;
  max-width: 9ch;
}

.member-auth-hero p,
.member-hero-copy p {
  margin: 0;
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(231, 235, 255, 0.82);
}

.member-auth-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c5a9ff;
}

.member-auth-wordmark-link {
  text-decoration: none;
  color: inherit;
  width: -moz-fit-content;
  width: fit-content;
}

.member-auth-wordmark-link:hover {
  color: #e4d4ff;
}

.member-auth-join-link {
  margin: 16px 0 0;
  max-width: 34ch;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.member-auth-join-link a {
  color: rgba(231, 235, 255, 0.55);
  text-decoration: none;
  font-weight: 500;
}

.member-auth-join-link a:hover {
  color: rgba(231, 235, 255, 0.88);
}

.member-auth-card {
  display: grid;
  align-items: center;
}

.creator-auth-card {
  display: grid;
  align-items: center;
}

.member-surface {
  --text-primary: #f8fafc;
  --text-secondary: #dbe5f2;
  --text-tertiary: #bcc9db;
  min-height: 100vh;
  font-family: var(--font-member), "Segoe UI", sans-serif;
  color: var(--text-primary);
  background:
    radial-gradient(58rem 32rem at 36% 0%, rgba(91, 33, 182, 0.08), transparent 72%),
    linear-gradient(180deg, #04050a 0%, #090b11 42%, #0e1219 100%);
}

.member-auth-panel {
  --text-primary: #f8fafc;
  --text-secondary: #dbe5f2;
  --text-tertiary: #bcc9db;
  font-family: var(--font-member), "Segoe UI", sans-serif;
  color: var(--text-primary);
}

.member-auth-card-shell {
  width: 100%;
  border: 1px solid rgba(154, 166, 255, 0.18);
  background: linear-gradient(180deg, rgba(33, 39, 63, 0.96), rgba(25, 29, 48, 0.96));
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.member-auth-route {
  position: relative;
  min-height: 100vh;
  padding: 24px;
  box-sizing: border-box;
  background:
    radial-gradient(56rem 32rem at 36% 0%, rgba(91, 33, 182, 0.1), transparent 70%),
    linear-gradient(180deg, #05060a 0%, #090a11 42%, #0d1018 100%);
}

.member-auth-route-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 100vh;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 16px 40px;
  box-sizing: border-box;
}

.member-auth-route-card {
  width: min(480px, 100%);
}

.member-auth-route .member-auth-card-shell {
  padding: 22px;
}

.member-auth-route-back {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.member-auth-route-back a {
  color: rgba(231, 235, 255, 0.55);
  text-decoration: none;
  font-weight: 500;
}

.member-auth-route-back a:hover {
  color: rgba(231, 235, 255, 0.88);
}

@media (max-width: 520px) {
  .member-auth-route-body {
    padding: 28px 12px 32px;
  }
}

.creator-auth-card-shell {
  width: 100%;
  border: 1px solid rgba(94, 234, 212, 0.2);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(11, 44, 46, 0.96), rgba(10, 32, 34, 0.96));
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.creator-auth-hero {
  border: 1px solid rgba(94, 234, 212, 0.18);
  background:
    radial-gradient(circle at top left, rgba(20, 184, 166, 0.2), transparent 38%),
    linear-gradient(180deg, rgba(10, 46, 48, 0.94), rgba(7, 30, 32, 0.94));
  border-radius: 28px;
  padding: 34px 32px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.creator-auth-wordmark-link {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ccfbf1;
}

.creator-auth-wordmark-link:hover {
  color: #f0fdfa;
}

.creator-auth-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #99f6e4;
}

.creator-auth-join-link {
  margin: 16px 0 0;
  max-width: 28ch;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.creator-auth-join-link a {
  color: rgba(167, 243, 208, 0.55);
  text-decoration: none;
  font-weight: 500;
}

.creator-auth-join-link a:hover {
  color: rgba(204, 251, 241, 0.92);
}

.creator-auth-hero .creator-auth-eyebrow {
  display: block;
  margin-top: 4px;
}

.creator-auth-hero h1 {
  margin: 14px 0 14px;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: #f0fdfa;
  max-width: 10ch;
}

.creator-auth-hero p {
  margin: 0;
  max-width: 28ch;
  line-height: 1.65;
  color: rgba(219, 245, 241, 0.82);
}

.member-auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.member-auth-form-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.member-auth-form-heading h1 {
  margin: 0;
  font-family: var(--font-member-display), var(--font-member), "Segoe UI", sans-serif;
  font-size: clamp(1.75rem, 2.2vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #f7f8ff;
}

.member-auth-form-heading p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.48;
  color: rgba(224, 229, 255, 0.78);
}

.member-auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.member-auth-field span {
  font-size: 0.76rem;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(237, 240, 255, 0.9);
}

.member-auth-field input {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(155, 170, 255, 0.18);
  background: rgba(8, 14, 28, 0.9);
  color: #f7f8ff;
  padding: 0 12px;
  font-size: 0.96rem;
  line-height: 1.32;
  outline: none;
}

.member-auth-field input:focus {
  border-color: rgba(145, 108, 255, 0.78);
  box-shadow: 0 0 0 3px rgba(145, 108, 255, 0.16);
}

.member-auth-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.member-auth-primary-button,
.member-auth-secondary-button,
.member-auth-artist-button {
  min-height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font-size: 0.94rem;
  line-height: 1.2;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.member-auth-primary-button {
  border: 0;
  color: white;
  background: linear-gradient(90deg, #7c3aed 0%, #a855f7 55%, #8b5cf6 100%);
}

.member-auth-secondary-button {
  border: 1px solid rgba(155, 170, 255, 0.2);
  color: #eef1ff;
  background: rgba(255, 255, 255, 0.02);
}

.member-auth-artist-button {
  border: 1px solid rgba(124, 58, 237, 0.45);
  color: #f5f3ff;
  background: rgba(124, 58, 237, 0.12);
}

.member-auth-artist-button.is-active {
  border-color: rgba(167, 139, 250, 0.7);
  background: rgba(124, 58, 237, 0.22);
  color: #ffffff;
}

.member-auth-primary-button:hover,
.member-auth-secondary-button:hover,
.member-auth-artist-button:hover {
  transform: translateY(-1px);
}

.member-auth-primary-button:disabled,
.member-auth-secondary-button:disabled,
.member-auth-artist-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.member-surface .panel,
.member-auth-panel {
  border: 1px solid rgba(196, 181, 253, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(40, 44, 57, 0.97), rgba(26, 31, 42, 0.96)),
    linear-gradient(145deg, rgba(124, 58, 237, 0.04), rgba(255, 255, 255, 0));
  box-shadow:
    0 20px 44px rgba(2, 6, 23, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.member-surface .notice,
.member-auth-panel .notice {
  border-radius: 12px;
}

.member-surface .field,
.member-surface .field-row .field,
.member-auth-panel .field,
.member-auth-panel .field-row .field {
  gap: 8px;
  margin-bottom: 0;
}

.member-surface .field > span:first-child,
.member-auth-panel .field > span:first-child {
  color: rgba(237, 240, 255, 0.9);
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  line-height: 1.2;
}

.member-surface .field input,
.member-surface .field select,
.member-surface .field textarea,
.member-auth-panel .field input,
.member-auth-panel .field select,
.member-auth-panel .field textarea {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(155, 170, 255, 0.2);
  background: rgba(8, 14, 28, 0.9);
  color: #f7f8ff;
  box-shadow: none;
  padding: 0 12px;
}

.member-surface .field textarea,
.member-auth-panel .field textarea {
  min-height: 102px;
  padding: 10px 12px;
}

.member-surface .field input:focus,
.member-surface .field select:focus,
.member-surface .field textarea:focus,
.member-auth-panel .field input:focus,
.member-auth-panel .field select:focus,
.member-auth-panel .field textarea:focus {
  border-color: rgba(145, 108, 255, 0.78);
  box-shadow: 0 0 0 3px rgba(145, 108, 255, 0.16);
}

.member-surface .primary-button,
.member-auth-panel .primary-button {
  min-height: 44px;
  border-radius: 12px;
  border: 0;
  color: #fff;
  background: linear-gradient(90deg, #7c3aed 0%, #a855f7 55%, #8b5cf6 100%);
}

.member-surface .primary-button:hover,
.member-surface .primary-button:focus-visible,
.member-auth-panel .primary-button:hover,
.member-auth-panel .primary-button:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(90deg, #8f4bff 0%, #b66bff 55%, #9f75ff 100%);
}

.member-surface .secondary-button,
.member-auth-panel .secondary-button {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(155, 170, 255, 0.2);
  color: #eef1ff;
  background: rgba(255, 255, 255, 0.02);
}

.member-surface .secondary-button:hover,
.member-surface .secondary-button:focus-visible,
.member-auth-panel .secondary-button:hover,
.member-auth-panel .secondary-button:focus-visible {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(155, 170, 255, 0.34);
}

.member-surface .checkbox-row span,
.member-auth-panel .checkbox-row span {
  color: rgba(225, 230, 255, 0.86);
}

.member-surface .checkbox-row input[type="checkbox"],
.member-auth-panel .checkbox-row input[type="checkbox"] {
  accent-color: #8b5cf6;
}

.member-surface .member-auth-link-group,
.member-auth-panel .member-auth-link-group {
  margin-top: 2px;
}

.member-surface .member-auth-link-group p,
.member-auth-panel .member-auth-link-group p {
  margin: 0;
}

.member-surface .notice-success,
.member-auth-panel .notice-success {
  background: rgba(22, 163, 74, 0.14);
  color: #b5f5c5;
  border-color: rgba(34, 197, 94, 0.2);
}

.member-surface .notice-error,
.member-auth-panel .notice-error {
  background: rgba(127, 29, 29, 0.24);
  color: #ffb5b5;
  border-color: rgba(248, 113, 113, 0.22);
}

.member-surface .muted,
.member-auth-panel .muted {
  color: var(--text-secondary);
}

.member-surface .small,
.member-auth-panel .small {
  color: var(--text-tertiary);
}

.member-surface a,
.member-auth-panel a {
  color: #ece4ff;
}

.member-surface a:hover,
.member-auth-panel a:hover {
  color: #f5efff;
}

.member-auth-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.member-auth-panel-shell {
  display: grid;
  gap: 14px;
}

.creator-auth-panel {
  --text-primary: #ecfeff;
  --text-secondary: #c8f4ee;
  --text-tertiary: #9fcbc6;
  display: grid;
  gap: 16px;
  border: 1px solid rgba(94, 234, 212, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(34, 211, 238, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(8, 31, 33, 0.96), rgba(9, 24, 26, 0.96));
}

.creator-auth-form-heading {
  display: grid;
  gap: 8px;
}

.creator-auth-form-heading h1 {
  margin: 0;
  font-size: clamp(1.75rem, 2.2vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #f0fdfa;
}

.creator-auth-form-heading p {
  margin: 0;
  line-height: 1.55;
  color: rgba(216, 243, 239, 0.82);
}

.creator-role-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(94, 234, 212, 0.18);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.1), transparent 38%),
    rgba(7, 23, 24, 0.76);
}

.creator-role-copy {
  display: grid;
  gap: 6px;
}

.creator-role-copy span {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #99f6e4;
}

.creator-role-copy p {
  margin: 0;
  color: rgba(216, 243, 239, 0.82);
  line-height: 1.55;
}

.creator-role-card {
  display: grid;
  align-content: start;
  text-align: left;
  color: #ecfeff;
}

.creator-role-card-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #f0fdfa;
}

.creator-role-card-desc {
  display: block;
  color: rgba(200, 244, 238, 0.78);
  font-size: 0.875rem;
  line-height: 1.4;
}

.creator-access-entry {
  width: 100%;
}

.creator-access-entry--roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  -moz-column-gap: 20px;
       column-gap: 20px;
  row-gap: 18px;
  align-items: stretch;
}

.creator-access-entry--roles .creator-access-entry-heading {
  grid-column: 1 / -1;
}

.creator-access-entry--roles .creator-role-card-title {
  font-size: 1.12rem;
}

.creator-access-entry--roles .creator-role-card {
  min-height: 168px;
  gap: 12px;
  padding: 20px 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(94, 234, 212, 0.24);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: none;
  transform: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.creator-access-entry--roles .creator-role-card:hover:not(.is-active) {
  transform: none;
  border-color: rgba(94, 234, 212, 0.44);
  background: rgba(94, 234, 212, 0.07);
  box-shadow: none;
}

.creator-access-entry--roles .creator-role-card.is-active {
  border-color: rgba(94, 234, 212, 0.88);
  background: rgba(45, 212, 191, 0.12);
  box-shadow:
    0 0 0 1px rgba(94, 234, 212, 0.45),
    0 0 0 4px rgba(45, 212, 191, 0.16),
    0 0 28px rgba(45, 212, 191, 0.22);
  transform: none;
}

.creator-access-entry--roles .creator-role-card.is-active .creator-role-card-desc {
  color: rgba(236, 254, 255, 0.95);
}

.creator-access-entry--roles .creator-role-card.is-active::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #5eead4;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.4);
}

/* /creator/access: slightly larger role tiles on the bare page surface */
.creator-access-route .creator-access-entry--roles .creator-role-card {
  min-height: 176px;
  padding: 22px 18px 20px;
}

.creator-access-entry--actions {
  display: grid;
  gap: 18px;
}

.creator-access-entry-heading {
  display: grid;
  gap: 8px;
}

.creator-access-entry-heading h1 {
  margin: 0;
  font-size: clamp(1.75rem, 2.2vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #f0fdfa;
}

.creator-access-entry-lede {
  margin: 0;
  line-height: 1.55;
  color: rgba(216, 243, 239, 0.82);
}

.creator-access-continue-as {
  margin: 0;
  text-align: center;
  font-size: 0.98rem;
  color: rgba(216, 243, 239, 0.9);
}

.creator-access-continue-as strong {
  color: #f0fdfa;
  font-weight: 700;
}

.creator-access-route {
  position: relative;
  min-height: 100vh;
  padding: 24px;
  box-sizing: border-box;
  background:
    radial-gradient(58rem 34rem at 24% 0%, rgba(13, 148, 136, 0.16), transparent 62%),
    linear-gradient(180deg, #041514 0%, #061b1a 44%, #08211f 100%);
}

.creator-access-route-wordmark {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 1;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ccfbf1;
}

.creator-access-route-wordmark:hover {
  color: #f0fdfa;
}

.creator-access-route-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 16px 40px;
  box-sizing: border-box;
}

/* /creator/access: centered column on page surface only — no outer auth card shell */
.creator-access-route-content {
  width: min(800px, 100%);
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.creator-access-route .creator-access-entry-heading {
  text-align: center;
  justify-items: stretch;
}

.creator-access-route .creator-access-entry-lede {
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
}

.creator-access-route .creator-access-actions {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.creator-access-route-back {
  margin: 22px 0 0;
  width: 100%;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.creator-access-route-back a {
  color: rgba(167, 243, 208, 0.55);
  text-decoration: none;
  font-weight: 500;
}

.creator-access-route-back a:hover {
  color: rgba(204, 251, 241, 0.92);
}

@media (max-width: 520px) {
  .creator-access-route-body {
    padding: 72px 12px 36px;
  }

  .creator-access-route-wordmark {
    left: 16px;
    top: 20px;
  }
}

.creator-access-role-label {
  cursor: pointer;
  position: relative;
}

.creator-access-role-label:focus-within {
  outline: 2px solid rgba(45, 212, 191, 0.45);
  outline-offset: 2px;
  border-radius: 16px;
}

.creator-access-entry--roles .creator-role-card.is-active:focus-within {
  outline-color: rgba(236, 253, 245, 0.65);
}

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

.creator-access-actions {
  display: grid;
  gap: 12px;
}

.creator-access-actions .muted {
  margin: 0;
  text-align: center;
}

.creator-access-actions .secondary-button {
  text-align: center;
  justify-content: center;
}

.creator-primary-button {
  background: linear-gradient(90deg, #0f766e 0%, #14b8a6 52%, #22c55e 100%);
}

.member-auth-panel-shell.creator-intent .member-auth-form-heading h1,
.member-auth-panel-shell.creator-intent .member-auth-form-heading p,
.member-auth-panel-shell.creator-intent .member-auth-eyebrow {
  color: #f4fbff;
}

.member-auth-panel-shell.creator-intent .member-auth-form-heading p {
  color: rgba(226, 245, 255, 0.82);
}

.member-auth-panel-shell.creator-intent {
  position: relative;
}

.member-auth-panel-shell.creator-intent::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  pointer-events: none;
  border: 1px solid rgba(83, 214, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.08);
}

.member-auth-panel-shell.creator-intent .member-auth-panel,
.member-auth-panel-shell.creator-intent.member-auth-panel {
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.1), transparent 36%),
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(18, 34, 52, 0.97), rgba(16, 25, 42, 0.96));
  border-color: rgba(89, 193, 255, 0.2);
}

.shared-auth-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.shared-auth-mode-chip {
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(155, 170, 255, 0.22);
  background: rgba(255, 255, 255, 0.02);
  color: #eef1ff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0 14px;
}

.shared-auth-mode-chip.is-active {
  border-color: rgba(168, 85, 247, 0.5);
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.28), rgba(168, 85, 247, 0.22));
  color: #ffffff;
}

.member-auth-panel-shell.creator-intent .shared-auth-mode-chip.is-active,
.member-auth-panel-shell.creator-intent.member-auth-panel .shared-auth-mode-chip.is-active {
  border-color: rgba(61, 223, 255, 0.48);
  background: linear-gradient(90deg, rgba(8, 145, 178, 0.28), rgba(14, 165, 233, 0.18) 42%, rgba(147, 51, 234, 0.2) 100%);
}

.shared-auth-intent-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(10, 18, 30, 0.72), rgba(10, 16, 28, 0.8));
}

.shared-auth-intent-copy {
  display: grid;
  gap: 6px;
}

.shared-auth-intent-copy h2 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #f4fbff;
}

.shared-auth-intent-copy p {
  margin: 0;
  color: rgba(214, 234, 248, 0.8);
  line-height: 1.55;
  font-size: 0.94rem;
}

.shared-auth-role-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shared-auth-role-card {
  min-height: 132px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  text-align: left;
  border-radius: 16px;
  border: 1px solid rgba(83, 214, 255, 0.16);
  background: rgba(9, 17, 29, 0.56);
  color: #eef8ff;
}

.shared-auth-role-card strong {
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.shared-auth-role-card span {
  color: rgba(214, 234, 248, 0.76);
  font-size: 0.84rem;
  line-height: 1.45;
}

.shared-auth-role-card:hover {
  transform: translateY(-1px);
  border-color: rgba(83, 214, 255, 0.36);
  background: rgba(11, 24, 39, 0.74);
}

.shared-auth-role-card.is-active {
  border-color: rgba(103, 232, 249, 0.64);
  background:
    linear-gradient(180deg, rgba(8, 145, 178, 0.28), rgba(15, 23, 42, 0.62)),
    rgba(11, 24, 39, 0.82);
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.28);
}

.member-auth-panel-shell.creator-intent .member-auth-primary-button,
.member-auth-panel-shell.creator-intent.member-auth-panel .member-auth-primary-button {
  background: linear-gradient(90deg, #0891b2 0%, #0ea5e9 48%, #9333ea 100%);
}

.member-auth-panel-shell.creator-intent .member-auth-primary-button:hover,
.member-auth-panel-shell.creator-intent .member-auth-primary-button:focus-visible,
.member-auth-panel-shell.creator-intent.member-auth-panel .member-auth-primary-button:hover,
.member-auth-panel-shell.creator-intent.member-auth-panel .member-auth-primary-button:focus-visible {
  background: linear-gradient(90deg, #06b6d4 0%, #38bdf8 48%, #a855f7 100%);
}

.secondary-button.is-disabled,
.member-auth-secondary-button.is-disabled {
  pointer-events: none;
  opacity: 0.65;
}

.member-auth-links a {
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(225, 230, 255, 0.84);
  text-decoration: none;
}

.member-auth-links a:hover {
  color: #ffffff;
}

.member-auth-error {
  border: 1px solid rgba(255, 120, 120, 0.34);
  background: rgba(120, 24, 24, 0.26);
  color: #ffe0e0;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.94rem;
  line-height: 1.5;
}

.member-auth-success {
  border: 1px solid rgba(34, 197, 94, 0.32);
  background: rgba(22, 101, 52, 0.28);
  color: #dcfce7;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.94rem;
  line-height: 1.5;
}

.member-shell {
  min-height: 100vh;
  background:
    radial-gradient(62rem 34rem at 36% 0%, rgba(91, 33, 182, 0.06), transparent 74%),
    linear-gradient(180deg, #04050a 0%, #090b11 38%, #0e1219 100%);
}

.member-shell-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px 24px 16px;
  border-bottom: 1px solid rgba(196, 181, 253, 0.08);
  background: rgba(9, 12, 18, 0.78);
  backdrop-filter: blur(16px);
}

.member-shell-header-main {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.member-shell-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.member-shell-brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 45%, #c084fc 100%);
  color: #f8fafc;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 14px 28px rgba(91, 33, 182, 0.28);
}

.member-shell-brand-copy,
.member-shell-user-copy,
.member-section-header,
.member-page-stack {
  display: grid;
}

.member-shell-brand-title {
  font-family: var(--font-member-display), var(--font-member), "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -0.05em;
  font-size: 1.06rem;
}

.member-shell-brand-subtitle,
.member-shell-user-label {
  color: #c1c9da;
  font-size: 0.82rem;
}

.member-shell-nav {
  display: inline-flex;
  gap: 8px;
  padding: 5px;
  border: 1px solid rgba(196, 181, 253, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

.member-shell-nav-link {
  padding: 9px 14px;
  border-radius: 999px;
  color: #d0d7e5;
  font-size: 0.94rem;
  font-weight: 700;
}

.member-shell-nav-link:hover,
.member-shell-nav-link.active {
  background: linear-gradient(135deg, rgba(91, 33, 182, 0.48), rgba(124, 58, 237, 0.18));
  color: #fbf9ff;
  box-shadow: inset 0 0 0 1px rgba(216, 180, 254, 0.08);
}

.member-shell-user {
  display: flex;
  align-items: center;
  gap: 14px;
}

.member-shell-user-value {
  font-weight: 600;
  overflow-wrap: anywhere;
  color: #f8f4ff;
}

.member-shell-main {
  padding: 24px 20px 32px;
}

.member-shell-content {
  width: min(1320px, 100%);
  margin: 0 auto;
}

.member-page-stack {
  gap: 16px;
}

.member-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: start;
}

.member-dashboard-main {
  min-width: 0;
}

.member-hero-panel {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.member-hero-copy {
  display: grid;
  gap: 8px;
}

.member-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.member-updates-preview h2,
.member-update-card h2,
.member-update-card h3 {
  margin: 0;
  font-family: var(--font-member-display), var(--font-member), "Segoe UI", sans-serif;
  letter-spacing: -0.05em;
  font-size: 1.2rem;
  color: #fbfcff;
}

.member-update-card p,
.member-update-summary,
.member-hero-copy p {
  max-width: 68ch;
}

.member-hero-copy p,
.member-surface .muted,
.member-surface .small,
.member-auth-panel .muted,
.member-auth-panel .small {
  line-height: 1.55;
}

.member-form-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 18px;
}

.member-form-header h2 {
  margin: 0;
  color: #fbfcff;
}

.member-form-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.member-form-actions-status {
  color: #dbe2ee;
  font-size: 0.88rem;
  text-align: right;
}

.member-form-actions-status strong {
  color: #f5f7fc;
}

.member-form-actions-status.error strong {
  color: #ffb5b5;
}

.member-form-actions-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.member-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.member-updates-preview {
  display: grid;
  gap: 12px;
  padding: 18px 18px;
  align-self: start;
}

.member-section-header {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.member-update-list {
  display: grid;
  gap: 10px;
}

.member-update-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(196, 181, 253, 0.16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(48, 52, 66, 0.96), rgba(31, 36, 48, 0.94));
}

.member-update-card p,
.member-update-summary {
  margin: 0;
  color: #d8deea;
  line-height: 1.72;
}

.member-update-summary {
  font-weight: 500;
}

.member-update-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #d0d7e4;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.member-surface .muted-list,
.member-auth-panel .muted-list {
  color: #dce2ed;
  line-height: 1.7;
}

.member-surface .checkbox-row,
.member-auth-panel .checkbox-row {
  color: #e8e1fb;
}

.member-surface .auth-form,
.member-auth-panel.auth-form {
  width: min(100%, 100%);
  gap: 12px;
}

.member-artist-access-card {
  width: min(100%, 100%);
}

.member-account-form {
  width: 100%;
  max-width: none;
  gap: 12px;
  padding: 20px 22px 22px;
}

.member-form-section {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(196, 181, 253, 0.12);
}

.member-form-section-heading {
  display: grid;
  gap: 2px;
}

.member-form-section-heading h3 {
  margin: 0;
  color: #f3f6fd;
  font-size: 0.98rem;
}

.member-status-banner {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(196, 181, 253, 0.18);
  border-radius: 12px;
  background: rgba(17, 21, 30, 0.64);
}

.member-status-banner strong {
  color: #f7f8fd;
  font-size: 0.95rem;
}

.member-status-banner span {
  color: #dde4ef;
  font-size: 0.86rem;
}

.member-status-progress {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(120, 130, 153, 0.28);
}

.member-status-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6ee7b7, #93c5fd);
}

.member-genre-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.member-inline-actions {
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  gap: 8px;
}

.member-genre-chip {
  padding: 7px 10px;
  border: 1px solid rgba(196, 181, 253, 0.18);
  border-radius: 10px;
  background: rgba(29, 34, 46, 0.72);
  color: #eef2f8;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.member-genre-chip:hover,
.member-genre-chip:focus-visible {
  border-color: rgba(147, 197, 253, 0.62);
  background: rgba(46, 56, 74, 0.86);
  transform: translateY(-1px);
}

.member-genre-chip.selected {
  border-color: rgba(110, 231, 183, 0.72);
  background: rgba(38, 76, 67, 0.9);
}

.member-genre-chip:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.member-update-card-full {
  padding: 24px;
}

@media (max-width: 920px) {
  .member-auth-layout,
  .creator-auth-layout,
  .member-dashboard-grid,
  .member-section-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .member-shell-header,
  .member-shell-header-main,
  .member-shell-user {
    flex-direction: column;
    align-items: stretch;
  }

  .member-shell-nav {
    overflow-x: auto;
  }

  .member-form-header,
  .member-form-actions {
    justify-items: start;
  }

  .member-form-actions-status {
    text-align: left;
  }

  .member-inline-actions {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 980px) {
  .member-auth-layout,
  .creator-auth-layout {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
  }

  .member-auth-hero,
  .creator-auth-hero {
    order: 2;
    padding: 24px 22px;
  }

  .member-auth-card-shell,
  .creator-auth-card-shell {
    order: 1;
    padding: 18px;
  }

  .member-auth-hero h1 {
    max-width: none;
    font-size: clamp(1.8rem, 7vw, 2.5rem);
  }

  .shared-auth-role-grid,
  .creator-access-entry--roles,
  .join-choice-grid {
    grid-template-columns: 1fr;
  }
}

.auth-form {
  width: min(420px, 100%);
  display: grid;
  gap: 12px;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.45;
}

.checkbox-row input {
  margin-top: 3px;
}

.invite-card {
  width: min(560px, 100%);
  display: grid;
  gap: 18px;
}

.invite-eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.invite-description {
  margin-top: -8px;
}

.empty-state {
  text-align: center;
  min-height: 164px;
  display: grid;
  place-items: center;
}

.empty-state-copy {
  max-width: 420px;
  display: grid;
  gap: 8px;
}

.empty-state h3 {
  margin: 0;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}

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

.creator-shell .empty-state h3 {
  color: var(--creator-text-primary);
}

.creator-shell .empty-state p {
  color: var(--creator-text-secondary);
}

.loading-state {
  display: flex;
  align-items: center;
  min-height: 88px;
}

.muted-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.55;
}

.toolbar input,
.toolbar select {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}

.compact-field {
  margin-bottom: 0;
}

.upload-mode-field {
  min-width: 280px;
}

.library-toolbar-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  align-items: flex-start;
}

.library-toolbar-header p,
.status-row p,
.page-header p {
  margin: 2px 0 0;
}

.tab-strip {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: #f4f7fa;
  box-shadow: none;
}

.tab-button {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 7px 12px;
  background: transparent;
  color: #334155;
  font-weight: 700;
  font-size: 0.95rem;
}

.tab-button.active {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.42);
  color: #15803d;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.18);
}

.audience-access-subtabs {
  width: 100%;
  max-width: 28rem;
}

.audience-access-intro .audience-access-heading {
  margin: 0 0 8px;
  font-size: 1.22rem;
  letter-spacing: -0.03em;
}

.audience-access-intro p {
  margin: 0;
}

.users-section-toolbar {
  display: flex;
  justify-content: flex-end;
}

.playlist-manager-layout {
  align-items: start;
}

.library-toolbar-header h2,
.manual-tools-summary h2,
.modal-header h2 {
  margin: 0 0 6px;
  font-size: 1.22rem;
  letter-spacing: -0.03em;
  color: var(--text);
}

.row-action-cell {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.icon-button {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 7px 8px;
  min-width: 40px;
  background: #fff;
  color: var(--text);
  font-weight: 700;
  line-height: 1;
}

.icon-button-kebab {
  min-width: auto;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.12rem;
  letter-spacing: 0;
}

.icon-button:hover,
.icon-button:focus-visible {
  background: var(--panel-alt);
  border-color: var(--line-strong);
  outline: none;
}

.icon-button-kebab:hover,
.icon-button-kebab:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  border-color: transparent;
  outline: none;
}

.icon-button-kebab:active {
  background: rgba(0, 0, 0, 0.07);
}

.icon-button:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.track-cell {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 240px;
}

.track-artwork-thumb,
.track-artwork-placeholder {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 8px;
}

.track-artwork-thumb {
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--line);
  background: var(--panel-alt);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.track-artwork-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e2e8f0 0%, #f8fafc 100%);
  color: var(--accent-strong);
  font-weight: 700;
}

.diagnostic-pre {
  margin: 10px 0 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f8fafc;
  color: var(--text);
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.row-action-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  min-width: 220px;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.row-action-menu-fixed {
  position: fixed;
  top: 0;
  right: auto;
}

.menu-button {
  border: 0;
  border-radius: 5px;
  padding: 8px 11px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-weight: 600;
}

.menu-button:hover,
.menu-button:focus-visible {
  background: var(--panel-alt);
  outline: none;
}

.menu-button:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.menu-button-danger {
  color: var(--danger);
}

.playlist-list-row {
  cursor: pointer;
}

.playlist-list-row.active {
  background: rgba(34, 197, 94, 0.1);
}

.playlist-artwork-preview {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-alt);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.playlist-artwork-empty {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-alt);
}

.broadcast-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(320px, 0.9fr);
  gap: 12px;
  align-items: start;
}

.broadcast-composer-panel,
.broadcast-side-stack {
  display: grid;
  gap: 12px;
}

.broadcast-main-panel {
  padding: 14px;
}

.broadcast-side-panel,
.broadcast-history-panel,
.contacts-panel {
  padding: 12px;
}

.broadcast-guidance {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0)),
    var(--panel-alt);
}

.broadcast-guidance-heading {
  display: grid;
  gap: 3px;
}

.broadcast-audience-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-alt);
}

.broadcast-audience-row {
  align-items: end;
}

.broadcast-audience-target {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.65);
}

.broadcast-audience-target-label {
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.broadcast-audience-target-count {
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
}

.broadcast-audience-target-unit {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.broadcast-info-strip {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(59, 130, 246, 0.22);
  background: rgba(59, 130, 246, 0.06);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.45;
}

.broadcast-info-strip strong {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1d4ed8;
}

.field-inline-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.field-inline-check input {
  width: auto;
  margin: 0;
}

.broadcast-delivery-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.02);
}

.broadcast-delivery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

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

.broadcast-delivery-group {
  display: grid;
  gap: 8px;
}

.broadcast-delivery-group-label {
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.broadcast-delivery-footnote {
  margin: 0;
}

.broadcast-artwork-field .broadcast-artwork-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.broadcast-artwork-field .broadcast-artwork-row select {
  flex: 1;
  min-width: 200px;
}

.broadcast-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.broadcast-type-card {
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 82px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  text-align: left;
}

.broadcast-type-card:hover,
.broadcast-type-card:focus-visible {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
  outline: none;
}

.broadcast-type-card.active {
  border-color: rgba(34, 197, 94, 0.46);
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.08)),
    #fff;
  box-shadow:
    inset 0 0 0 1px rgba(34, 197, 94, 0.12),
    0 10px 22px rgba(15, 23, 42, 0.04);
}

.broadcast-type-card.active .broadcast-type-title {
  color: #0b5f28;
}

.broadcast-type-title {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.broadcast-type-description {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.28;
}

.broadcast-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.broadcast-preview-panel {
  display: grid;
  gap: 10px;
}

.broadcast-preview-image,
.broadcast-preview-empty {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
}

.broadcast-preview-image {
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--line);
  background: var(--panel-alt);
}

.broadcast-preview-empty {
  display: grid;
  gap: 5px;
  place-items: center;
  align-content: center;
  padding: 14px;
  border: 1px dashed var(--line);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.03), rgba(15, 23, 42, 0)),
    var(--panel-alt);
  color: var(--muted);
  text-align: center;
}

.broadcast-preview-empty strong {
  color: var(--text);
  font-size: 0.98rem;
}

.broadcast-preview-empty span {
  max-width: 28ch;
  font-size: 0.9rem;
}

.broadcast-preview-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0)),
    #fff;
}

.broadcast-preview-eyebrow {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.broadcast-preview-card h3 {
  margin: 0;
  font-size: 1.42rem;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.broadcast-preview-kicker {
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.broadcast-preview-summary,
.broadcast-preview-body,
.broadcast-preview-meta,
.broadcast-preview-cta {
  margin: 0;
}

.broadcast-preview-summary {
  color: #1e293b;
  font-weight: 600;
  line-height: 1.45;
}

.broadcast-preview-body {
  color: var(--text);
  line-height: 1.5;
}

.broadcast-preview-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.broadcast-preview-meta {
  color: var(--muted);
  font-size: 0.92rem;
  padding: 7px 9px;
  border-radius: 999px;
  background: var(--panel-alt);
  border: 1px solid var(--line);
}

.broadcast-preview-cta {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-alt);
  border: 1px solid var(--line);
  font-weight: 700;
}

.table-scroll-region {
  overflow: auto;
}

.contacts-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.contacts-search-field {
  flex: 1;
  margin-bottom: 0;
  max-width: 520px;
}

.contacts-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.contacts-table-scroll {
  max-height: min(60vh, 580px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.contacts-table-scroll table {
  min-width: 100%;
}

.contacts-table-scroll th,
.contacts-table-scroll td {
  padding-top: 8px;
  padding-bottom: 8px;
}

.contacts-no-results {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--panel-alt);
}

.people-directory-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.9fr);
  gap: 12px;
  align-items: start;
}

.people-search-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.people-search-toolbar .field {
  flex: 1;
  margin-bottom: 0;
}

.people-search-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.people-table-provider-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.people-table-provider-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-alt);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}

.people-directory-row {
  cursor: pointer;
}

.people-directory-row.selected td {
  background: rgba(34, 197, 94, 0.08);
}

.people-directory-row:hover td {
  background: rgba(15, 23, 42, 0.03);
}

.people-directory-row.selected:hover td {
  background: rgba(34, 197, 94, 0.1);
}

.people-table-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.people-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.people-detail-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-alt);
}

.people-detail-card p {
  margin: 0;
}

.people-detail-list {
  display: grid;
  gap: 6px;
}

.people-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.section-issue-panel {
  display: grid;
  gap: 14px;
}

.section-issue-list {
  display: grid;
  gap: 10px;
}

.section-issue-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--warning-soft);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.03)),
    #fff;
}

.section-issue-card strong {
  color: #7c2d12;
}

.section-issue-card p {
  margin: 0;
}

.broadcast-history-panel table td,
.broadcast-history-panel table th {
  padding-top: 9px;
  padding-bottom: 9px;
}

.playlist-track-row.drag-over {
  background: rgba(34, 197, 94, 0.1);
}

.drag-handle {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: grab;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.1em;
}

.drag-handle:active {
  cursor: grabbing;
}

.manual-tools-panel summary,
.nested-panel summary {
  cursor: pointer;
  list-style: none;
}

.manual-tools-panel summary::-webkit-details-marker,
.nested-panel summary::-webkit-details-marker {
  display: none;
}

.manual-tools-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.manual-tools-form {
  margin-top: 16px;
}

.nested-panel {
  box-shadow: none;
  background: var(--panel-alt);
  border-radius: var(--radius-md);
  border-color: var(--line);
}

.nested-panel-summary {
  font-weight: 600;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(8px);
}

.modal-card {
  width: min(760px, 100%);
  max-height: min(85vh, 900px);
  overflow: auto;
  padding: 16px;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
  border-radius: 8px;
}

.modal-header {
  margin-bottom: 10px;
}

.modal-body {
  display: grid;
  gap: 12px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.upload-progress-track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbe4ee;
}

.upload-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
  transition: width 180ms ease;
}

.field-error {
  color: var(--danger);
  font-weight: 600;
}

.panel h2,
.panel h3 {
  margin: 0;
  letter-spacing: -0.03em;
}

.panel p {
  color: var(--muted);
  line-height: 1.45;
}

.panel .muted {
  color: var(--muted);
}

.panel > .page-header {
  margin-bottom: 10px;
}

.panel > .page-header .page-title,
.panel > .page-header h2 {
  font-size: 1.18rem;
  font-weight: 700;
}

.panel > .page-header .page-description,
.panel > .page-header p {
  font-size: 0.9rem;
  color: var(--muted);
}

tbody tr:hover {
  background: #f8fafc;
}

audio {
  border-radius: 8px;
}

tbody tr:last-child td {
  border-bottom: 0;
}

td .small + .small,
td .badge + .small {
  margin-top: 4px;
}

.table-wrap table {
  min-width: 100%;
}

.table-wrap thead {
  background: rgba(238, 242, 246, 0.9);
}

.table-wrap thead th {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  z-index: 1;
}

.panel.loading-state,
.empty-state,
.nested-panel,
.sidebar-user {
  box-shadow: var(--shadow-soft);
}

.utility-stat-row {
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}

.utility-stat {
  display: inline-grid;
  gap: 2px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  line-height: 1.1;
}

.utility-stat-value {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.utility-stat-label {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status-row h2,
.library-toolbar-header h2,
.page-header h2 {
  color: var(--text);
}

@media (max-width: 980px) {
  .shell,
  .dashboard-grid,
  .two-column,
  .broadcast-workspace,
  .broadcast-detail-grid,
  .broadcast-type-grid,
  .broadcast-delivery-columns {
    grid-template-columns: 1fr;
  }

  .sidebar {
    gap: 24px;
  }

  .creator-shell .creator-home-hero {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .creator-shell .creator-profile-actions {
    justify-content: flex-start;
  }

  .content {
    padding: 18px;
  }

  .page-header {
    flex-direction: column;
  }

  .page-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .library-toolbar-header {
    flex-direction: column;
  }

  .toolbar,
  .inline-actions,
  .field-row,
  .contacts-toolbar,
  .people-search-toolbar {
    align-items: stretch;
  }

  .toolbar > *,
  .inline-actions > *,
  .contacts-toolbar > *,
  .people-search-toolbar > * {
    width: 100%;
  }

  .people-directory-layout,
  .people-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal-backdrop {
    padding: 12px;
  }
}

@media (min-width: 981px) {
  .table-scroll-library {
    max-height: min(68vh, 960px);
    overscroll-behavior: contain;
  }
}

.member-setup-layout {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 20px;
}

.member-setup-panel {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(3, 7, 18, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(2, 6, 23, 0.45);
  max-width: 520px;
  padding: 32px;
  width: min(100%, 520px);
}

.member-setup-header {
  display: grid;
  gap: 14px;
  margin-bottom: 26px;
}

.member-setup-header h1 {
  color: #f8fafc;
  font-family: var(--font-member-display), sans-serif;
  font-size: clamp(2rem, 4vw, 2.65rem);
  letter-spacing: -0.04em;
  margin: 0;
}

.member-setup-header p,
.member-legal-copy p {
  color: #cbd5e1;
  line-height: 1.65;
  margin: 0;
}

.member-setup-eyebrow {
  color: #38bdf8;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

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

.member-setup-progress span {
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  height: 4px;
}

.member-setup-progress span.active {
  background: linear-gradient(90deg, #38bdf8, #f97316);
}

.member-setup-form {
  display: grid;
  gap: 18px;
}

.creator-onboarding-layout {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 18px;
}

.creator-onboarding-panel {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(3, 7, 18, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(2, 6, 23, 0.45);
  max-width: 560px;
  padding: 24px;
  width: min(100%, 560px);
}

.creator-onboarding-header {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.creator-onboarding-header-top {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.creator-onboarding-header h1 {
  color: #f8fafc;
  font-family: var(--font-member-display), sans-serif;
  font-size: clamp(1.8rem, 3.3vw, 2.35rem);
  letter-spacing: -0.04em;
  margin: 0;
}

.creator-onboarding-header p,
.creator-onboarding-complete-copy p {
  color: #cbd5e1;
  line-height: 1.5;
  margin: 0;
}

.creator-onboarding-eyebrow {
  color: #67e8f9;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.creator-onboarding-progress {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creator-onboarding-progress span {
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  height: 4px;
}

.creator-onboarding-progress span.active {
  background: linear-gradient(90deg, #22c55e, #38bdf8);
}

.creator-onboarding-form {
  display: grid;
  gap: 12px;
}

.creator-onboarding-logout-button {
  min-height: 34px;
  padding: 6px 10px;
}

.creator-onboarding-check {
  align-items: flex-start;
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 16px 18px;
}

.creator-onboarding-badge {
  align-self: start;
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.34);
  border-radius: 999px;
  color: #86efac;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 5px 8px;
  text-transform: uppercase;
}

.member-legal-check {
  align-items: flex-start;
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 16px 18px;
}

.member-shell {
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 30%),
    radial-gradient(circle at top right, rgba(249, 115, 22, 0.12), transparent 28%),
    linear-gradient(180deg, #020617, #0f172a 46%, #020617);
  min-height: 100vh;
}

.member-shell-header {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(2, 6, 23, 0.78);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  display: flex;
  justify-content: space-between;
  padding: 22px 28px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.member-shell-header-main {
  align-items: center;
  display: flex;
  gap: 28px;
}

.member-shell-brand {
  align-items: center;
  display: inline-flex;
  gap: 14px;
  text-decoration: none;
}

.member-shell-brand-mark {
  align-items: center;
  background: linear-gradient(135deg, #38bdf8, #f97316);
  border-radius: 16px;
  color: #020617;
  display: inline-flex;
  font-family: var(--font-member-display), sans-serif;
  font-size: 1rem;
  font-weight: 800;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.member-shell-brand-copy,
.member-shell-user-copy {
  display: grid;
  gap: 4px;
}

.member-shell-brand-title,
.member-shell-user-value {
  color: #f8fafc;
  font-weight: 700;
}

.member-shell-brand-subtitle,
.member-shell-user-label {
  color: var(--text-inverse-tertiary);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.member-shell-nav {
  display: inline-flex;
  gap: 10px;
}

.member-shell-nav-link {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  color: var(--text-inverse-secondary);
  font-size: 0.92rem;
  padding: 10px 14px;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.member-shell-nav-link:hover {
  background: rgba(30, 41, 59, 0.84);
  border-color: rgba(56, 189, 248, 0.4);
  color: #fff;
}

.member-shell-user {
  align-items: center;
  display: flex;
  gap: 14px;
}

.member-account-root {
  position: relative;
}

.member-account-button {
  align-items: center;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  color: #e2e8f0;
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}

.member-account-avatar {
  align-items: center;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(249, 115, 22, 0.22));
  border-radius: 999px;
  color: #f8fafc;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  letter-spacing: 0.06em;
  width: 32px;
}

.member-account-panel {
  background: rgba(2, 6, 23, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 20px;
  box-shadow: 0 26px 50px rgba(2, 6, 23, 0.45);
  min-width: 220px;
  padding: 12px;
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
}

.member-account-panel-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  padding: 4px 6px 12px;
}

.member-account-panel-header strong {
  color: #f8fafc;
}

.member-account-panel-header span {
  color: var(--text-inverse-tertiary);
  font-size: 0.82rem;
}

.member-account-menu-link {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 14px;
  color: #e2e8f0;
  cursor: pointer;
  display: flex;
  font: inherit;
  justify-content: flex-start;
  padding: 11px 12px;
  text-decoration: none;
  width: 100%;
}

.member-account-menu-link:hover {
  background: rgba(15, 23, 42, 0.9);
}

.member-account-menu-link-danger {
  color: #fda4af;
}

.member-shell-main {
  padding: 32px 28px 42px;
}

.member-shell-content {
  margin: 0 auto;
  max-width: 1240px;
}

.member-notification-root {
  position: relative;
}

.member-notification-button {
  align-items: center;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  color: #e2e8f0;
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  position: relative;
  width: 44px;
}

.member-notification-button svg {
  height: 20px;
  width: 20px;
}

.member-notification-dot {
  background: #f97316;
  border: 2px solid #0f172a;
  border-radius: 999px;
  height: 10px;
  position: absolute;
  right: 9px;
  top: 9px;
  width: 10px;
}

.member-notification-panel {
  background: rgba(2, 6, 23, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 20px;
  box-shadow: 0 26px 50px rgba(2, 6, 23, 0.45);
  padding: 18px;
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: min(360px, calc(100vw - 32px));
}

.member-notification-panel-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  margin-bottom: 14px;
  padding-bottom: 14px;
}

.member-notification-panel-header strong,
.member-notification-item strong,
.member-playlist-copy h3,
.member-track-card h3,
.member-section-header h2,
.member-listening-spotlight h2 {
  color: #f8fafc;
}

.member-notification-list {
  display: grid;
  gap: 12px;
}

.member-notification-item {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 16px;
  padding: 14px;
}

.member-notification-item p,
.member-track-card p,
.member-playlist-copy p,
.member-listening-spotlight p,
.member-listening-hero p {
  color: #cbd5e1;
  margin: 0;
}

.member-notification-item-topline {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.member-notification-item-topline span,
.member-notification-empty {
  color: var(--text-inverse-tertiary);
  font-size: 0.84rem;
}

.member-listening-page {
  display: grid;
  gap: 28px;
}

.member-listening-hero,
.member-listening-spotlight {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 28px;
  padding: 28px;
}

.member-listening-hero {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 360px);
}

.member-listening-hero h1 {
  color: #fff;
  font-family: var(--font-member-display), sans-serif;
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  letter-spacing: -0.05em;
  line-height: 0.95;
  margin: 10px 0 14px;
}

.member-listening-search {
  align-self: end;
  display: grid;
  gap: 10px;
}

.member-listening-search span,
.member-page-eyebrow {
  color: var(--text-inverse-tertiary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.member-listening-search input {
  background: rgba(2, 6, 23, 0.76);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  color: #f8fafc;
  min-height: 54px;
  padding: 0 16px;
}

.member-content-section {
  display: grid;
  gap: 18px;
}

.member-section-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.member-playlist-row {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.member-playlist-card,
.member-track-card {
  background: rgba(15, 23, 42, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 24px;
  padding: 18px;
}

.member-playlist-art {
  align-items: flex-end;
  border-radius: 20px;
  display: flex;
  font-family: var(--font-member-display), sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  height: 180px;
  justify-content: flex-start;
  margin-bottom: 16px;
  padding: 18px;
}

.member-playlist-art span {
  color: #fff;
}

.member-playlist-art-1 {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.85), rgba(15, 23, 42, 0.95));
}

.member-playlist-art-2 {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.82), rgba(88, 28, 135, 0.75));
}

.member-playlist-art-3 {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.5), rgba(34, 197, 94, 0.8));
}

.member-playlist-art-4 {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.7), rgba(15, 23, 42, 0.95));
}

.member-playlist-copy {
  display: grid;
  gap: 8px;
}

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

.member-track-pill {
  color: #38bdf8;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
  text-transform: uppercase;
}

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

.member-profile-page {
  display: grid;
  gap: 24px;
}

.member-profile-hero,
.member-profile-details,
.member-profile-checklist {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 24px;
  padding: 24px;
}

.member-profile-hero {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.member-profile-hero h1 {
  color: #f8fafc;
  font-family: var(--font-member-display), sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  letter-spacing: -0.04em;
  margin: 8px 0 12px;
}

.member-profile-hero p {
  color: #cbd5e1;
  margin: 0;
  max-width: 620px;
}

.member-profile-checklist-items {
  display: grid;
  gap: 12px;
}

.member-profile-checklist-row {
  align-items: center;
  background: rgba(2, 6, 23, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 18px;
  color: #e2e8f0;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
}

.member-profile-checklist-status {
  color: #fda4af;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.member-profile-checklist-status.complete {
  color: #67e8f9;
}

@media (max-width: 980px) {
  .member-shell-header,
  .member-shell-header-main,
  .member-shell-user,
  .member-listening-hero,
  .member-profile-summary-grid {
    grid-template-columns: 1fr;
  }

  .member-shell-header,
  .member-shell-header-main,
  .member-shell-user {
    align-items: flex-start;
    display: grid;
  }

  .member-playlist-row,
  .member-track-grid {
    grid-template-columns: 1fr;
  }

  .member-shell-main {
    padding-inline: 18px;
  }

  .member-setup-panel,
  .member-profile-hero,
  .member-profile-details,
  .member-profile-checklist,
  .member-listening-hero,
  .member-listening-spotlight {
    padding: 22px;
  }

  .member-profile-hero,
  .member-profile-checklist-row {
    align-items: flex-start;
    display: grid;
  }
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-\[-10\%\] {
  left: -10%;
  right: -10%;
}

.bottom-3 {
  bottom: 0.75rem;
}

.left-3 {
  left: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.top-0 {
  top: 0px;
}

.top-24 {
  top: 6rem;
}

.top-3 {
  top: 0.75rem;
}

.top-4 {
  top: 1rem;
}

.top-\[-8rem\] {
  top: -8rem;
}

.isolate {
  isolation: isolate;
}

.z-40 {
  z-index: 40;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

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

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.aspect-\[1\.25\/1\] {
  aspect-ratio: 1.25/1;
}

.aspect-\[1\/1\] {
  aspect-ratio: 1/1;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-4 {
  height: 1rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[24rem\] {
  height: 24rem;
}

.min-h-screen {
  min-height: 100vh;
}

.w-14 {
  width: 3.5rem;
}

.w-4 {
  width: 1rem;
}

.w-9 {
  width: 2.25rem;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.max-w-\[12ch\] {
  max-width: 12ch;
}

.max-w-\[1760px\] {
  max-width: 1760px;
}

.max-w-\[38rem\] {
  max-width: 38rem;
}

.max-w-\[42rem\] {
  max-width: 42rem;
}

.max-w-full {
  max-width: 100%;
}

.max-w-sm {
  max-width: 24rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.shrink-0 {
  flex-shrink: 0;
}

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

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-8 {
  gap: 2rem;
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.overflow-hidden {
  overflow: hidden;
}

.rounded-\[10px\] {
  border-radius: 10px;
}

.rounded-\[14px\] {
  border-radius: 14px;
}

.rounded-\[6px\] {
  border-radius: 6px;
}

.rounded-\[8px\] {
  border-radius: 8px;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-\[\#7C4DFF\]\/40 {
  border-color: rgb(124 77 255 / 0.4);
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/\[0\.06\] {
  border-color: rgb(255 255 255 / 0.06);
}

.border-white\/\[0\.08\] {
  border-color: rgb(255 255 255 / 0.08);
}

.bg-\[\#050816\]\/70 {
  background-color: rgb(5 8 22 / 0.7);
}

.bg-\[\#07101f\]\/80 {
  background-color: rgb(7 16 31 / 0.8);
}

.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}

.bg-transparent {
  background-color: transparent;
}

.bg-white\/\[0\.02\] {
  background-color: rgb(255 255 255 / 0.02);
}

.bg-white\/\[0\.03\] {
  background-color: rgb(255 255 255 / 0.03);
}

.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}

.bg-white\/\[0\.05\] {
  background-color: rgb(255 255 255 / 0.05);
}

.bg-white\/\[0\.06\] {
  background-color: rgb(255 255 255 / 0.06);
}

.bg-\[linear-gradient\(135deg\2c \#0E7490_0\%\2c \#22C55E_100\%\)\] {
  background-image: linear-gradient(135deg,#0E7490 0%,#22C55E 100%);
}

.bg-\[linear-gradient\(135deg\2c \#0E7490_0\%\2c \#4338CA_100\%\)\] {
  background-image: linear-gradient(135deg,#0E7490 0%,#4338CA 100%);
}

.bg-\[linear-gradient\(135deg\2c \#0E7490_0\%\2c \#4F46E5_100\%\)\] {
  background-image: linear-gradient(135deg,#0E7490 0%,#4F46E5 100%);
}

.bg-\[linear-gradient\(135deg\2c \#1D4ED8_0\%\2c \#7C3AED_100\%\)\] {
  background-image: linear-gradient(135deg,#1D4ED8 0%,#7C3AED 100%);
}

.bg-\[linear-gradient\(135deg\2c \#1E293B_0\%\2c \#3B0764_100\%\)\] {
  background-image: linear-gradient(135deg,#1E293B 0%,#3B0764 100%);
}

.bg-\[linear-gradient\(135deg\2c \#37B6F6_0\%\2c \#1C446F_100\%\)\] {
  background-image: linear-gradient(135deg,#37B6F6 0%,#1C446F 100%);
}

.bg-\[linear-gradient\(135deg\2c \#4F46E5_0\%\2c \#1E1B4B_100\%\)\] {
  background-image: linear-gradient(135deg,#4F46E5 0%,#1E1B4B 100%);
}

.bg-\[linear-gradient\(135deg\2c \#4F46E5_0\%\2c \#7C3AED_100\%\)\] {
  background-image: linear-gradient(135deg,#4F46E5 0%,#7C3AED 100%);
}

.bg-\[linear-gradient\(135deg\2c \#6D5DFC_0\%\2c \#7C4DFF_55\%\2c \#9B8CFF_100\%\)\] {
  background-image: linear-gradient(135deg,#6D5DFC 0%,#7C4DFF 55%,#9B8CFF 100%);
}

.bg-\[linear-gradient\(135deg\2c \#7C3AED_0\%\2c \#DB2777_100\%\)\] {
  background-image: linear-gradient(135deg,#7C3AED 0%,#DB2777 100%);
}

.bg-\[linear-gradient\(135deg\2c \#B45309_0\%\2c \#7C2D12_100\%\)\] {
  background-image: linear-gradient(135deg,#B45309 0%,#7C2D12 100%);
}

.bg-\[linear-gradient\(135deg\2c \#B45309_0\%\2c \#BE185D_100\%\)\] {
  background-image: linear-gradient(135deg,#B45309 0%,#BE185D 100%);
}

.bg-\[linear-gradient\(135deg\2c \#FF7A18_0\%\2c \#8F3B9D_100\%\)\] {
  background-image: linear-gradient(135deg,#FF7A18 0%,#8F3B9D 100%);
}

.bg-\[linear-gradient\(180deg\2c rgba\(10\2c 16\2c 32\2c 0\.92\)\2c rgba\(5\2c 8\2c 18\2c 0\.96\)\)\] {
  background-image: linear-gradient(180deg,rgba(10,16,32,0.92),rgba(5,8,18,0.96));
}

.bg-\[linear-gradient\(180deg\2c rgba\(11\2c 16\2c 31\2c 0\.92\)\2c rgba\(6\2c 9\2c 18\2c 0\.96\)\)\] {
  background-image: linear-gradient(180deg,rgba(11,16,31,0.92),rgba(6,9,18,0.96));
}

.bg-\[linear-gradient\(180deg\2c rgba\(124\2c 77\2c 255\2c 0\.18\)\2c rgba\(124\2c 77\2c 255\2c 0\.08\)\)\] {
  background-image: linear-gradient(180deg,rgba(124,77,255,0.18),rgba(124,77,255,0.08));
}

.bg-\[linear-gradient\(180deg\2c rgba\(16\2c 24\2c 48\2c 0\.92\)\2c rgba\(7\2c 11\2c 22\2c 0\.96\)\)\] {
  background-image: linear-gradient(180deg,rgba(16,24,48,0.92),rgba(7,11,22,0.96));
}

.bg-\[linear-gradient\(180deg\2c rgba\(255\2c 255\2c 255\2c 0\.02\)\2c rgba\(255\2c 255\2c 255\2c 0\.00\)\)\] {
  background-image: linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.00));
}

.bg-\[linear-gradient\(180deg\2c rgba\(255\2c 255\2c 255\2c 0\.06\)\2c rgba\(255\2c 255\2c 255\2c 0\.03\)\)\] {
  background-image: linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.03));
}

.bg-\[linear-gradient\(180deg\2c transparent_0\%\2c rgba\(3\2c 7\2c 18\2c 0\.12\)_58\%\2c rgba\(3\2c 7\2c 18\2c 0\.42\)_100\%\)\] {
  background-image: linear-gradient(180deg,transparent 0%,rgba(3,7,18,0.12) 58%,rgba(3,7,18,0.42) 100%);
}

.bg-\[radial-gradient\(circle_at_center\2c rgba\(109\2c 93\2c 252\2c 0\.20\)\2c transparent_42\%\)\] {
  background-image: radial-gradient(circle at center,rgba(109,93,252,0.20),transparent 42%);
}

.bg-\[radial-gradient\(circle_at_top\2c _rgba\(124\2c 77\2c 255\2c 0\.16\)\2c _transparent_28\%\)\2c radial-gradient\(circle_at_20\%_20\%\2c _rgba\(34\2c 211\2c 238\2c 0\.08\)\2c _transparent_22\%\)\2c linear-gradient\(180deg\2c _\#050816_0\%\2c _\#030712_100\%\)\] {
  background-image: radial-gradient(circle at top, rgba(124,77,255,0.16), transparent 28%),radial-gradient(circle at 20% 20%, rgba(34,211,238,0.08), transparent 22%),linear-gradient(180deg, #050816 0%, #030712 100%);
}

.bg-\[radial-gradient\(circle_at_top_right\2c rgba\(124\2c 77\2c 255\2c 0\.18\)\2c transparent_32\%\)\] {
  background-image: radial-gradient(circle at top right,rgba(124,77,255,0.18),transparent 32%);
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.text-left {
  text-align: left;
}

.font-\[family-name\:var\(--font-member-display\)\] {
  font-family: var(--font-member-display);
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[17px\] {
  font-size: 17px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-7 {
  line-height: 1.75rem;
}

.leading-\[0\.96\] {
  line-height: 0.96;
}

.leading-snug {
  line-height: 1.375;
}

.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}

.tracking-\[-0\.03em\] {
  letter-spacing: -0.03em;
}

.tracking-\[-0\.04em\] {
  letter-spacing: -0.04em;
}

.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}

.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}

.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}

.tracking-\[0\.24em\] {
  letter-spacing: 0.24em;
}

.tracking-\[0\.26em\] {
  letter-spacing: 0.26em;
}

.tracking-\[0\.28em\] {
  letter-spacing: 0.28em;
}

.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}

.text-\[\#7dd3fc\] {
  --tw-text-opacity: 1;
  color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}

.text-\[\#8f9fff\] {
  --tw-text-opacity: 1;
  color: rgb(143 159 255 / var(--tw-text-opacity, 1));
}

.text-\[\#9fb0ff\] {
  --tw-text-opacity: 1;
  color: rgb(159 176 255 / var(--tw-text-opacity, 1));
}

.text-\[\#9fb0ff\]\/90 {
  color: rgb(159 176 255 / 0.9);
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}

.text-white\/\[0\.35\] {
  color: rgb(255 255 255 / 0.35);
}

.text-white\/\[0\.38\] {
  color: rgb(255 255 255 / 0.38);
}

.text-white\/\[0\.42\] {
  color: rgb(255 255 255 / 0.42);
}

.text-white\/\[0\.48\] {
  color: rgb(255 255 255 / 0.48);
}

.text-white\/\[0\.52\] {
  color: rgb(255 255 255 / 0.52);
}

.text-white\/\[0\.54\] {
  color: rgb(255 255 255 / 0.54);
}

.text-white\/\[0\.55\] {
  color: rgb(255 255 255 / 0.55);
}

.text-white\/\[0\.56\] {
  color: rgb(255 255 255 / 0.56);
}

.text-white\/\[0\.58\] {
  color: rgb(255 255 255 / 0.58);
}

.text-white\/\[0\.64\] {
  color: rgb(255 255 255 / 0.64);
}

.text-white\/\[0\.68\] {
  color: rgb(255 255 255 / 0.68);
}

.text-white\/\[0\.70\] {
  color: rgb(255 255 255 / 0.70);
}

.text-white\/\[0\.72\] {
  color: rgb(255 255 255 / 0.72);
}

.text-white\/\[0\.78\] {
  color: rgb(255 255 255 / 0.78);
}

.text-white\/\[0\.84\] {
  color: rgb(255 255 255 / 0.84);
}

.text-white\/\[0\.85\] {
  color: rgb(255 255 255 / 0.85);
}

.text-white\/\[0\.88\] {
  color: rgb(255 255 255 / 0.88);
}

.opacity-0 {
  opacity: 0;
}

.shadow-\[0_10px_30px_rgba\(109\2c 93\2c 252\2c 0\.28\)\] {
  --tw-shadow: 0 10px 30px rgba(109,93,252,0.28);
  --tw-shadow-colored: 0 10px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_12px_32px_rgba\(109\2c 93\2c 252\2c 0\.30\)\] {
  --tw-shadow: 0 12px 32px rgba(109,93,252,0.30);
  --tw-shadow-colored: 0 12px 32px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_12px_44px_rgba\(0\2c 0\2c 0\2c 0\.30\)\] {
  --tw-shadow: 0 12px 44px rgba(0,0,0,0.30);
  --tw-shadow-colored: 0 12px 44px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_24px_rgba\(0\2c 0\2c 0\2c 0\.18\)\] {
  --tw-shadow: 0 6px 24px rgba(0,0,0,0.18);
  --tw-shadow-colored: 0 6px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_8px_28px_rgba\(0\2c 0\2c 0\2c 0\.22\)\] {
  --tw-shadow: 0 8px 28px rgba(0,0,0,0.22);
  --tw-shadow-colored: 0 8px 28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-black\/20 {
  --tw-shadow-color: rgb(0 0 0 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.\[font-family\:var\(--font-member\)\2c ui-sans-serif\2c system-ui\2c sans-serif\] {
  font-family: var(--font-member),ui-sans-serif,system-ui,sans-serif;
}

.placeholder\:text-white\/\[0\.32\]::-moz-placeholder {
  color: rgb(255 255 255 / 0.32);
}

.placeholder\:text-white\/\[0\.32\]::placeholder {
  color: rgb(255 255 255 / 0.32);
}

.hover\:translate-y-\[-1px\]:hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:translate-y-\[-2px\]:hover {
  --tw-translate-y: -2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-white\/\[0\.12\]:hover {
  border-color: rgb(255 255 255 / 0.12);
}

.hover\:border-white\/\[0\.14\]:hover {
  border-color: rgb(255 255 255 / 0.14);
}

.hover\:border-white\/\[0\.16\]:hover {
  border-color: rgb(255 255 255 / 0.16);
}

.hover\:bg-white\/\[0\.04\]:hover {
  background-color: rgb(255 255 255 / 0.04);
}

.hover\:bg-white\/\[0\.05\]:hover {
  background-color: rgb(255 255 255 / 0.05);
}

.hover\:bg-white\/\[0\.06\]:hover {
  background-color: rgb(255 255 255 / 0.06);
}

.hover\:bg-white\/\[0\.08\]:hover {
  background-color: rgb(255 255 255 / 0.08);
}

.hover\:bg-\[linear-gradient\(180deg\2c rgba\(14\2c 22\2c 40\2c 0\.96\)\2c rgba\(7\2c 10\2c 22\2c 0\.98\)\)\]:hover {
  background-image: linear-gradient(180deg,rgba(14,22,40,0.96),rgba(7,10,22,0.98));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:shadow-\[0_12px_36px_rgba\(0\2c 0\2c 0\2c 0\.28\)\]:hover {
  --tw-shadow: 0 12px 36px rgba(0,0,0,0.28);
  --tw-shadow-colored: 0 12px 36px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_14px_34px_rgba\(109\2c 93\2c 252\2c 0\.34\)\]:hover {
  --tw-shadow: 0 14px 34px rgba(109,93,252,0.34);
  --tw-shadow-colored: 0 14px 34px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_14px_40px_rgba\(0\2c 0\2c 0\2c 0\.28\)\]:hover {
  --tw-shadow: 0 14px 40px rgba(0,0,0,0.28);
  --tw-shadow-colored: 0 14px 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_18px_48px_rgba\(0\2c 0\2c 0\2c 0\.34\)\]:hover {
  --tw-shadow: 0 18px 48px rgba(0,0,0,0.34);
  --tw-shadow-colored: 0 18px 48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

@media (min-width: 640px) {

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

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 768px) {

  .md\:mt-14 {
    margin-top: 3.5rem;
  }

  .md\:mt-16 {
    margin-top: 4rem;
  }

  .md\:mt-5 {
    margin-top: 1.25rem;
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:pt-14 {
    padding-top: 3.5rem;
  }

  .md\:text-\[30px\] {
    font-size: 30px;
  }
}

@media (min-width: 1024px) {

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.15fr_0\.85fr\] {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .lg\:grid-cols-\[1\.2fr_0\.8fr_0\.8fr_0\.8fr\] {
    grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
}

@media (min-width: 1280px) {

  .xl\:block {
    display: block;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-\[280px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 280px minmax(0,1fr);
  }

  .xl\:justify-end {
    justify-content: flex-end;
  }

  .xl\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (min-width: 1536px) {

  .\32xl\:inset-x-\[-14\%\] {
    left: -14%;
    right: -14%;
  }

  .\32xl\:top-\[-9rem\] {
    top: -9rem;
  }

  .\32xl\:h-\[28rem\] {
    height: 28rem;
  }

  .\32xl\:max-w-\[18ch\] {
    max-width: 18ch;
  }

  .\32xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .\32xl\:gap-10 {
    gap: 2.5rem;
  }

  .\32xl\:gap-5 {
    gap: 1.25rem;
  }

  .\32xl\:gap-6 {
    gap: 1.5rem;
  }

  .\32xl\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .\32xl\:pt-16 {
    padding-top: 4rem;
  }

  .\32xl\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }
}