/* =====================================================================
   SMOOTH JAZZ CONNECT
   PRODUCTION STYLESHEET
   Version: 3.3.159
===================================================================== */

:root {
  color-scheme: dark;
  --bg: #02040b;
  --surface: rgba(8, 13, 30, .92);
  --surface-2: rgba(15, 25, 52, .78);
  --surface-3: rgba(5, 10, 24, .96);
  --border: rgba(76, 186, 255, .18);
  --border-strong: rgba(76, 186, 255, .36);
  --text: #f7fbff;
  --soft: #b9c6da;
  --muted: #7f8ca8;
  --blue: #00c2ff;
  --blue-2: #226dff;
  --purple: #8a43ff;
  --gold: #f6c65c;
  --danger: #ff5d75;
  --success: #31d9a1;
  --left-width: 272px;
  --right-width: 336px;
  --content-max: 860px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .4);
  --transition: 180ms cubic-bezier(.2,.8,.2,1);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #eef5ff;
  --surface: rgba(255,255,255,.94);
  --surface-2: rgba(244,248,255,.92);
  --surface-3: rgba(255,255,255,.98);
  --border: rgba(34,109,255,.13);
  --border-strong: rgba(34,109,255,.28);
  --text: #10203c;
  --soft: #435370;
  --muted: #71809a;
  --shadow: 0 24px 70px rgba(38,64,115,.16);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

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

.app-background {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(1,4,13,.86), rgba(3,7,19,.72), rgba(1,4,13,.88)),
    url("/assets/background.png") center / cover no-repeat;
}
html[data-theme="light"] .app-background {
  filter: saturate(.75) brightness(1.25);
  opacity: .48;
}

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: radial-gradient(circle at center, rgba(13,45,96,.58), rgba(1,3,10,.99) 58%);
}
.loading-logo { width: min(260px, 68vw); animation: pulse 1.8s ease-in-out infinite; }
.loading-screen p { margin: 0; color: var(--soft); font-weight: 800; }

.app-shell {
  display: grid;
  grid-template-columns: minmax(220px,var(--left-width)) minmax(0,1fr) minmax(280px,var(--right-width));
  width: min(100%, 1680px);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: rgba(2,5,15,.4);
  box-shadow: var(--shadow);
}

.sidebar {
  position: relative;
  z-index: 20;
  min-height: 0;
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface), var(--surface-3));
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}
.sidebar-left { border-right: 1px solid var(--border); }
.sidebar-right { border-left: 1px solid var(--border); }

.sidebar-scroll {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  scrollbar-width: thin;
  scrollbar-color: rgba(0,194,255,.34) transparent;
}

/* =====================================================================
   MAIN CONTENT, ROUTE STRUCTURE, SHARED COMPONENTS, AND RESPONSIVE SHELL
===================================================================== */

.main-column {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(0, 194, 255, 0.42)
    transparent;
  -webkit-overflow-scrolling: touch;
}

.route-outlet {
  display: block;
  width: min(100%, var(--content-max));
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0 auto;
  padding:
    24px
    clamp(16px, 3vw, 32px)
    24px;
}

.route-outlet > [data-partial-root],
.route-outlet > .page-stack,
.route-outlet > section {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin-top: 0;
  margin-bottom: 0;
}

.route-outlet > :first-child {
  margin-top: 0;
}

.route-outlet > :last-child {
  margin-bottom: 0;
}

.route-outlet::before,
.route-outlet::after {
  display: none;
  content: none;
}

/* =====================================================================
   BRAND
===================================================================== */

.brand-block {
  display: flex;
  justify-content: center;
}

.brand-link {
  width: min(100%, 176px);
  border-radius: var(--radius-lg);
  transition:
    transform var(--transition),
    filter var(--transition);
}

.brand-link:hover,
.brand-link:focus-visible {
  transform: translateY(-2px) scale(1.02);
  filter:
    drop-shadow(
      0 0 18px rgba(0, 194, 255, 0.26)
    );
}

.brand-logo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

/* =====================================================================
   SHARED CARDS
===================================================================== */

.identity-card,
.side-card,
.content-card,
.composer,
.post-card {
  border: 1px solid var(--border);
  background:
    linear-gradient(
      145deg,
      var(--surface-2),
      var(--surface-3)
    );
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.18);
}

.identity-card {
  padding: 14px;
  border-radius: var(--radius-md);
}

.identity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.identity-row strong,
.identity-row span {
  display: block;
}

.identity-row span {
  color: var(--muted);
  font-size: 0.8rem;
}

.identity-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  object-fit: cover;
}

.identity-avatar-text {
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      145deg,
      rgba(0, 194, 255, 0.2),
      rgba(138, 67, 255, 0.22)
    );
  color: var(--gold);
  font-weight: 900;
}

/* =====================================================================
   PRIMARY NAVIGATION
===================================================================== */

.primary-nav {
  display: grid;
  gap: 7px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--soft);
  transition: var(--transition);
}

.nav-link span {
  width: 26px;
  flex: 0 0 26px;
  color: var(--blue);
  font-size: 1.18rem;
  text-align: center;
}

.nav-link b {
  min-width: 0;
  font-size: 0.95rem;
}

.nav-link em {
  min-width: 22px;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--gold);
  color: #06101c;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.nav-link:hover,
.nav-link:focus-visible {
  transform: translateX(2px);
  border-color: var(--border);
  background: rgba(0, 194, 255, 0.08);
  color: var(--text);
}

.nav-link.is-active {
  border-color: var(--border-strong);
  background:
    linear-gradient(
      100deg,
      rgba(0, 194, 255, 0.2),
      rgba(138, 67, 255, 0.13)
    );
  box-shadow:
    inset 3px 0 0 var(--blue);
  color: #ffffff;
}

/* =====================================================================
   BUTTONS
===================================================================== */

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

.button {
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-weight: 850;
  cursor: pointer;
  transition: var(--transition);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button-primary {
  border-color: transparent;
  background:
    linear-gradient(
      110deg,
      var(--blue),
      #69deff
    );
  color: #00101a;
  box-shadow:
    0 12px 30px rgba(0, 194, 255, 0.18);
}

.button-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.button-danger {
  border-color: rgba(255, 93, 117, 0.28);
  background: rgba(255, 93, 117, 0.12);
  color: #ff91a2;
}

/* =====================================================================
   SIDEBAR FOOTER
===================================================================== */

.sidebar-footer {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.sidebar-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.sidebar-footer a,
.sidebar-footer p {
  color: var(--muted);
  font-size: 0.73rem;
}

.sidebar-footer p {
  margin: 0;
}

.sidebar-footer a:hover {
  color: var(--blue);
}

/* =====================================================================
   ICON BUTTONS
===================================================================== */

.theme-toggle,
.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--soft);
  cursor: pointer;
}

/* =====================================================================
   RIGHT SIDEBAR CARDS
===================================================================== */

.side-card {
  padding: 17px;
  border-radius: var(--radius-md);
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.section-heading h2 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.section-heading a {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 800;
}

.eyebrow,
.sponsored-label {
  display: block;
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.side-card p {
  margin: 0;
  color: var(--soft);
  font-size: 0.84rem;
}

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

/* =====================================================================
   GLOBAL SEARCH
===================================================================== */

.global-search {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.global-search input,
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  outline: none;
}

.global-search input {
  min-height: 44px;
  padding: 10px 13px;
}

.global-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: var(--blue);
  color: #00101a;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  cursor: pointer;
}

/* =====================================================================
   ADS
===================================================================== */

.ad-zone {
  width: 100%;
  min-height: 110px;
  overflow: hidden;
  border-radius: 12px;
}

.ad-zone img {
  width: 100%;
  aspect-ratio: 4 / 1;
  border-radius: inherit;
  object-fit: cover;
}

.sponsored-label {
  margin-bottom: 10px;
}

/* =====================================================================
   PLATFORM CARD
===================================================================== */

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

.platform-card img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.platform-card strong,
.platform-card span {
  display: block;
}

.platform-card strong {
  color: var(--gold);
}

.platform-card span {
  color: var(--soft);
  font-size: 0.79rem;
}

/* =====================================================================
   MOBILE HEADER
===================================================================== */

.mobile-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding:
    max(
      10px,
      env(safe-area-inset-top)
    )
    14px
    10px;
  border-bottom: 1px solid var(--border);
  background: rgba(4, 8, 21, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.mobile-brand img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.icon-button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  font-size: 1.2rem;
}

/* =====================================================================
   ROUTE PAGE STRUCTURE
===================================================================== */

.page-stack {
  display: grid;
  align-content: start;
  gap: 18px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
}

.page-stack > :first-child {
  margin-top: 0;
}

.page-stack > :last-child {
  margin-bottom: 0;
}

.page-stack::before,
.page-stack::after {
  display: none;
  content: none;
}

/* =====================================================================
   HERO
===================================================================== */

.hero-card {
  padding:
    clamp(
      22px,
      5vw,
      42px
    );
  border-radius: var(--radius-lg);
  text-align: center;
}

.hero-card h1 {
  margin: 8px 0 10px;
  font-size:
    clamp(
      2rem,
      5vw,
      3.7rem
    );
  line-height: 1.02;
}

.hero-card p {
  max-width: 680px;
  margin: 0 auto;
  color: var(--soft);
  font-size: 1.02rem;
}

.hero-logo {
  width: min(150px, 36vw);
  margin: 0 auto 12px;
  filter:
    drop-shadow(
      0 0 24px rgba(0, 194, 255, 0.25)
    );
}

/* =====================================================================
   CONTENT CARDS
===================================================================== */

.content-card,
.composer,
.post-card {
  padding: 20px;
  border-radius: var(--radius-lg);
}

.content-card h2,
.composer h2 {
  margin: 0 0 12px;
}

.content-card p {
  color: var(--soft);
}

/* =====================================================================
   COMPOSER
===================================================================== */

.composer textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  outline: none;
}

.composer textarea:focus,
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.global-search input:focus {
  border-color: var(--blue);
  box-shadow:
    0 0 0 3px rgba(0, 194, 255, 0.12);
}

.composer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.composer-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-button {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--soft);
  cursor: pointer;
}

/* =====================================================================
   FEED
===================================================================== */

.feed-list {
  display: grid;
  gap: 16px;
}

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

.post-header img {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  object-fit: cover;
}

.post-author {
  min-width: 0;
}

.post-author strong,
.post-author span {
  display: block;
}

.post-author span {
  color: var(--muted);
  font-size: 0.8rem;
}

.post-body {
  margin: 15px 0;
  color: var(--soft);
}

.post-media {
  width: 100%;
  margin-top: 14px;
  border-radius: 18px;
}

.post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.post-actions button {
  flex: 1 1 110px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--soft);
  cursor: pointer;
}

/* =====================================================================
   FORMS
===================================================================== */

.form-grid {
  display: grid;
  gap: 14px;
}

.form-field {
  display: grid;
  gap: 7px;
}

.form-field label {
  font-weight: 800;
}

.form-field input,
.form-field textarea,
.form-field select {
  padding: 12px 14px;
}

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

/* =====================================================================
   GRID HELPERS
===================================================================== */

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

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

/* =====================================================================
   PROFILE
===================================================================== */

.profile-card {
  display: flex;
  align-items: center;
  gap: 18px;
}

.profile-card img {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  object-fit: cover;
}

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

.stat {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  text-align: center;
}

.stat strong,
.stat span {
  display: block;
}

.stat span {
  color: var(--muted);
  font-size: 0.78rem;
}

/* =====================================================================
   EMPTY STATE
===================================================================== */

.empty-state {
  padding: 34px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--soft);
  text-align: center;
}

/* =====================================================================
   ROUTE PROGRESS
===================================================================== */

.route-progress {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      var(--blue),
      var(--purple),
      var(--gold)
    );
  animation:
    progress 1s linear infinite;
}

/* =====================================================================
   MOBILE BACKDROP
===================================================================== */

.mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  border: 0;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* =====================================================================
   MODALS
===================================================================== */

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

.modal-root.is-active {
  pointer-events: auto;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-card {
  width: min(100%, 520px);
  max-height: min(92dvh, 760px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-3);
  box-shadow: var(--shadow);
}

.modal-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.modal-card h2 {
  margin: 0;
}

/* =====================================================================
   TOASTS
===================================================================== */

.toast-region {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10000;
  display: grid;
  gap: 10px;
  width:
    min(
      380px,
      calc(100vw - 32px)
    );
  pointer-events: none;
}

.toast {
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-3);
  box-shadow: var(--shadow);
  color: var(--text);
}

.toast.success {
  border-color: rgba(49, 217, 161, 0.4);
}

.toast.error {
  border-color: rgba(255, 93, 117, 0.4);
}

/* =====================================================================
   NOSCRIPT
===================================================================== */

.noscript {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 30px;
  background: #050817;
  color: #ffffff;
  text-align: center;
}

/* =====================================================================
   ANIMATIONS
===================================================================== */

@keyframes pulse {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.98);
  }

  50% {
    opacity: 1;
    transform: scale(1.025);
  }
}

@keyframes progress {
  from {
    transform: translateX(-100%);
  }

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

/* =====================================================================
   COMPACT DESKTOP
===================================================================== */

@media (max-width: 1180px) {
  :root {
    --left-width: 230px;
    --right-width: 290px;
  }

  .route-outlet {
    padding-inline:
      clamp(
        16px,
        2.4vw,
        26px
      );
  }
}

/* =====================================================================
   TABLET / IPAD DRAWER LAYOUT
===================================================================== */

@media (max-width: 980px) {
  .app-shell {
    display: block;
    width: 100%;
    min-height: 100dvh;
    height: 100dvh;
  }

  .main-column {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .mobile-header {
    display: flex;
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 100;
    width: min(88vw, 340px);
    min-height: 0;
    height: 100dvh;
    transition:
      transform 240ms
      cubic-bezier(
        0.2,
        0.8,
        0.2,
        1
      );
  }

  .sidebar-left {
    left: 0;
    transform: translateX(-104%);
  }

  .sidebar-right {
    right: 0;
    transform: translateX(104%);
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .route-outlet {
    width: 100%;
    min-height: 0;
    height: auto;
    padding:
      18px
      clamp(14px, 3vw, 24px)
      max(
        22px,
        env(safe-area-inset-bottom)
      );
  }

  .route-outlet > [data-partial-root],
  .route-outlet > .page-stack,
  .route-outlet > section,
  .page-stack {
    min-height: 0;
    height: auto;
    margin-bottom: 0;
  }
}

/* =====================================================================
   MOBILE
===================================================================== */

@media (max-width: 700px) {
  .route-outlet {
    width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    padding:
      14px
      12px
      max(
        18px,
        env(safe-area-inset-bottom)
      );
  }

  .route-outlet > [data-partial-root],
  .route-outlet > .page-stack,
  .route-outlet > section,
  .page-stack {
    min-height: 0;
    height: auto;
    margin-bottom: 0;
  }

  .page-stack {
    gap: 14px;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

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

  .global-search {
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  }

  .global-search button {
    min-width: 72px;
    padding-inline: 8px;
    font-size: 0.74rem;
    white-space: nowrap;
  }

  .content-card,
  .composer,
  .post-card {
    padding: 16px;
    border-radius: 20px;
  }

  .hero-card {
    padding: 24px 18px;
  }

  .toast-region {
    right: 12px;
    bottom:
      max(
        12px,
        env(safe-area-inset-bottom)
      );
    width: calc(100vw - 24px);
  }
}

/* =====================================================================
   SMALL MOBILE
===================================================================== */

@media (max-width: 480px) {
  .route-outlet {
    padding:
      12px
      10px
      max(
        16px,
        env(safe-area-inset-bottom)
      );
  }

  .page-stack {
    gap: 12px;
  }

  .global-search {
    grid-template-columns:
      minmax(0, 1fr)
      68px;
    gap: 7px;
  }

  .global-search input {
    padding-inline: 11px;
    font-size: 0.9rem;
  }

  .global-search button {
    width: 68px;
    min-width: 68px;
    padding-inline: 5px;
    font-size: 0.7rem;
  }

  .profile-card {
    flex-direction: column;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .post-actions button {
    flex-basis: calc(50% - 4px);
  }
}

/* =====================================================================
   ONBOARDING EXCEPTION
===================================================================== */

body.onboarding-route .route-outlet,
body.onboarding-required .route-outlet {
  min-height: 100dvh;
}

/* =====================================================================
   REDUCED MOTION
===================================================================== */

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

/* =========================================================
   ABOUT PAGE — REFINED HERO STRUCTURE
   Replaces only the existing About hero CSS
   ========================================================= */

.about-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(250px, 0.88fr);
  align-items: center;
  gap: clamp(28px, 4vw, 54px);
  min-height: clamp(440px, 54vh, 590px);
  padding:
    clamp(34px, 5vw, 60px)
    clamp(26px, 5vw, 62px);
  background:
    radial-gradient(
      circle at 84% 34%,
      rgba(90, 134, 255, 0.22),
      transparent 34%
    ),
    radial-gradient(
      circle at 16% 20%,
      rgba(53, 242, 255, 0.13),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(10, 23, 51, 0.98),
      rgba(4, 10, 25, 0.97)
    ) !important;
}

.about-hero::after {
  position: absolute;
  inset: auto -10% -38% 18%;
  height: 52%;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(
      ellipse,
      rgba(53, 242, 255, 0.12),
      transparent 70%
    );
  filter: blur(20px);
}

.about-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 680px;
  min-width: 0;
  margin: 0;
  text-align: left;
}

.about-hero .eyebrow {
  align-self: flex-start;
  margin: 0 0 16px;
}

/*
   Final title layout:

   One Community.
   Every Connection.
*/

.about-hero h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 620px;
  margin: 0 0 22px;
  color: #ffffff;
  font-size: clamp(2.35rem, 4.4vw, 4.15rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-align: left;
  text-wrap: balance;
}

.about-hero h1 span {
  display: block;
  width: 100%;
  margin-top: 5px;
  background:
    linear-gradient(
      100deg,
      var(--about-cyan) 0%,
      #8ec6ff 34%,
      var(--about-violet) 68%,
      var(--about-pink) 100%
    );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-align: left;
  filter:
    drop-shadow(
      0 0 16px rgba(53, 242, 255, 0.18)
    );
}

.about-hero .page-hero-lead {
  width: 100%;
  max-width: 640px;
  margin: 0;
  color: rgba(235, 243, 255, 0.8);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.72;
  text-align: left;
}

.about-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 28px;
}

.about-hero .button {
  flex: 0 0 auto;
  min-height: 50px;
  padding-inline: 22px;
  border-radius: 15px;
  font-weight: 800;
}

.about-hero .button-primary {
  border-color: rgba(53, 242, 255, 0.52);
  background:
    linear-gradient(
      125deg,
      #1199ff,
      #6d5dff 58%,
      #bf4dff
    );
  box-shadow:
    0 15px 34px rgba(55, 112, 255, 0.28),
    0 0 24px rgba(53, 242, 255, 0.16);
}

.about-hero .button-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 40px rgba(55, 112, 255, 0.38),
    0 0 34px rgba(53, 242, 255, 0.24);
}

.about-hero-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-self: center;
  width: 100%;
  min-width: 0;
  min-height: 310px;
  margin: 0;
}

.about-logo-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: min(27vw, 320px);
  min-width: 235px;
  aspect-ratio: 1;
}


/* =========================================================
   HERO — TABLET
   ========================================================= */

@media (max-width: 980px) {
  .about-hero {
    grid-template-columns: 1fr;
    gap: 26px;
    min-height: auto;
    padding: 40px 28px;
    text-align: center;
  }

  .about-hero-content {
    align-items: center;
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
  }

  .about-hero .eyebrow {
    align-self: center;
    margin-inline: auto;
  }

  .about-hero h1 {
    align-items: center;
    max-width: 600px;
    margin-inline: auto;
    font-size: clamp(2.3rem, 7vw, 3.7rem);
    text-align: center;
  }

  .about-hero h1 span {
    text-align: center;
  }

  .about-hero .page-hero-lead {
    max-width: 670px;
    margin-inline: auto;
    text-align: center;
  }

  .about-hero .hero-actions {
    justify-content: center;
    margin-inline: auto;
  }

  .about-hero-visual {
    min-height: 265px;
  }

  .about-logo-orbit {
    width: min(64vw, 290px);
    min-width: 220px;
  }
}

/* =========================================================
   HERO — MOBILE
   ========================================================= */

@media (max-width: 720px) {
  .about-hero {
    gap: 20px;
    padding: 30px 20px;
  }

  .about-hero h1 {
    max-width: 100%;
    margin-bottom: 18px;
    font-size: clamp(2rem, 10vw, 2.95rem);
    line-height: 1;
    letter-spacing: -0.045em;
  }

  .about-hero h1 span {
    margin-top: 3px;
  }

  .about-hero .page-hero-lead {
    font-size: 1rem;
    line-height: 1.68;
  }

  .about-hero .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: min(100%, 420px);
    margin-top: 24px;
  }

  .about-hero .hero-actions .button {
    width: 100%;
  }

  .about-hero-visual {
    min-height: 225px;
  }

  .about-logo-orbit {
    width: min(70vw, 245px);
    min-width: 198px;
  }
}

/* =========================================================
   HERO — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .about-hero {
    padding: 26px 17px;
  }

  .about-hero h1 {
    font-size: clamp(1.85rem, 9.8vw, 2.5rem);
    line-height: 1.03;
  }

  .about-hero-visual {
    min-height: 200px;
  }

  .about-logo-orbit {
    width: min(70vw, 218px);
    min-width: 182px;
  }
}

/* =========================================================
   SMOOTH JAZZ CONNECT — CHAT PAGE
   12/10 SUPREME PREMIUM MESSAGING EXPERIENCE
   Paste at the bottom of styles.css
   ========================================================= */

.chat-page {
  --chat-cyan: #42efff;
  --chat-cyan-soft: rgba(66, 239, 255, 0.14);
  --chat-blue: #4f8cff;
  --chat-violet: #9468ff;
  --chat-pink: #ff5bd8;
  --chat-green: #5df2ad;
  --chat-red: #ff7180;

  --chat-text: #f7faff;
  --chat-text-soft: rgba(237, 244, 255, 0.82);
  --chat-muted: rgba(214, 226, 248, 0.62);

  --chat-panel: rgba(7, 15, 33, 0.9);
  --chat-panel-strong: rgba(5, 11, 26, 0.97);
  --chat-panel-soft: rgba(15, 29, 57, 0.76);

  --chat-border: rgba(121, 221, 255, 0.14);
  --chat-border-strong: rgba(121, 221, 255, 0.32);

  --chat-shadow:
    0 34px 90px rgba(0, 0, 0, 0.42),
    0 0 60px rgba(66, 239, 255, 0.055);

  position: relative;
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
  width: min(100%, 1360px);
  margin-inline: auto;
  padding: clamp(8px, 1.5vw, 18px);
  isolation: isolate;
}

.chat-page::before,
.chat-page::after {
  position: fixed;
  z-index: -2;
  width: min(56vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  filter: blur(110px);
  opacity: 0.13;
}

.chat-page::before {
  top: 4%;
  left: 28%;
  background:
    radial-gradient(
      circle,
      rgba(66, 239, 255, 0.7),
      rgba(79, 140, 255, 0.2) 44%,
      transparent 72%
    );
}

.chat-page::after {
  right: -14%;
  bottom: -16%;
  background:
    radial-gradient(
      circle,
      rgba(148, 104, 255, 0.62),
      rgba(255, 91, 216, 0.16) 46%,
      transparent 72%
    );
}

.chat-page > .content-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--chat-border);
  border-radius: clamp(22px, 2.5vw, 34px);
  background:
    linear-gradient(
      145deg,
      rgba(14, 28, 56, 0.95),
      rgba(5, 12, 28, 0.97)
    );
  box-shadow: var(--chat-shadow);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}

.chat-page > .content-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.07),
      transparent 25%,
      transparent 72%,
      rgba(66, 239, 255, 0.045)
    );
}

.chat-page h1,
.chat-page h2,
.chat-page h3 {
  margin-top: 0;
  color: var(--chat-text);
  text-wrap: balance;
}

.chat-page p {
  color: var(--chat-muted);
  line-height: 1.72;
}

.chat-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0 0 10px;
  color: var(--chat-cyan);
  font-size: clamp(0.69rem, 0.8vw, 0.78rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.chat-page .eyebrow::before {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--chat-cyan),
      var(--chat-violet)
    );
  content: "";
  box-shadow: 0 0 14px rgba(66, 239, 255, 0.7);
}

/* =========================================================
   HERO
   ========================================================= */

.chat-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  min-height: 220px;
  padding:
    clamp(30px, 4vw, 50px)
    clamp(24px, 5vw, 62px);
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(148, 104, 255, 0.22),
      transparent 34%
    ),
    radial-gradient(
      circle at 10% 100%,
      rgba(66, 239, 255, 0.13),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(14, 30, 63, 0.99),
      rgba(5, 12, 29, 0.98)
    ) !important;
}

.chat-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 790px;
}

.chat-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2.35rem, 4.8vw, 4.5rem);
  font-weight: 950;
  line-height: 0.96;
  letter-spacing: -0.065em;
}

.chat-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--chat-text-soft);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
}

.chat-hero-actions {
  position: relative;
  z-index: 1;
}

.chat-hero-actions .button {
  min-height: 52px;
  padding-inline: 24px;
  border-radius: 16px;
  font-weight: 850;
  box-shadow:
    0 16px 36px rgba(64, 110, 255, 0.25),
    0 0 26px rgba(66, 239, 255, 0.1);
}

/* =========================================================
   COMMAND CENTER
   ========================================================= */

.chat-command-center {
  display: grid;
  grid-template-columns:
    minmax(290px, 0.34fr)
    minmax(0, 0.66fr);
  min-height: clamp(660px, 76vh, 920px);
  overflow: hidden !important;
  padding: 0;
}

.chat-sidebar,
.chat-workspace {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.chat-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--chat-border);
  background:
    linear-gradient(
      180deg,
      rgba(12, 25, 51, 0.9),
      rgba(5, 12, 28, 0.96)
    );
}

.chat-workspace {
  display: grid;
  grid-template-rows:
    auto
    auto
    minmax(0, 1fr)
    auto;
  min-height: 0;
  background:
    radial-gradient(
      circle at 84% 16%,
      rgba(79, 140, 255, 0.085),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(6, 14, 31, 0.92),
      rgba(3, 9, 22, 0.98)
    );
}

/* =========================================================
   HEADERS
   ========================================================= */

.chat-sidebar-header,
.chat-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 96px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--chat-border);
  background: rgba(5, 13, 29, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.chat-sidebar-header h2,
.chat-workspace-header h2 {
  margin: 0;
  font-size: clamp(1.16rem, 1.7vw, 1.5rem);
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.chat-sidebar-header .eyebrow,
.chat-workspace-header .eyebrow {
  margin-bottom: 5px;
  font-size: 0.64rem;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(121, 221, 255, 0.19);
  border-radius: 14px;
  color: var(--chat-text);
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.09),
      rgba(148, 104, 255, 0.07)
    );
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.icon-button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(66, 239, 255, 0.46);
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.16),
      rgba(148, 104, 255, 0.12)
    );
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(66, 239, 255, 0.09);
}

.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

/* =========================================================
   SEARCH
   ========================================================= */

.chat-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 17px 18px 12px;
}

.chat-search-icon {
  position: absolute;
  left: 15px;
  z-index: 1;
  color: rgba(214, 226, 248, 0.48);
  pointer-events: none;
}

.chat-search input {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px 12px 43px;
  border: 1px solid rgba(121, 221, 255, 0.14);
  border-radius: 15px;
  color: var(--chat-text);
  font: inherit;
  background: rgba(3, 9, 23, 0.76);
  outline: none;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.chat-search input::placeholder {
  color: rgba(214, 226, 248, 0.38);
}

.chat-search input:focus {
  border-color: rgba(66, 239, 255, 0.52);
  background: rgba(6, 15, 34, 0.96);
  box-shadow:
    0 0 0 4px rgba(66, 239, 255, 0.08),
    0 0 24px rgba(66, 239, 255, 0.08);
}

/* =========================================================
   CONVERSATION LIST
   ========================================================= */

.chat-conversation-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 12px 18px;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(66, 239, 255, 0.3)
    transparent;
}

.chat-conversation-list::-webkit-scrollbar,
.chat-message-list::-webkit-scrollbar {
  width: 8px;
}

.chat-conversation-list::-webkit-scrollbar-track,
.chat-message-list::-webkit-scrollbar-track {
  background: transparent;
}

.chat-conversation-list::-webkit-scrollbar-thumb,
.chat-message-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(66, 239, 255, 0.36),
      rgba(148, 104, 255, 0.32)
    );
}

.chat-conversation-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 82px;
  margin-bottom: 7px;
  padding: 13px;
  border: 1px solid transparent;
  border-radius: 18px;
  color: inherit;
  text-align: left;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.chat-conversation-item:hover {
  transform: translateY(-2px);
  border-color: rgba(121, 221, 255, 0.15);
  background: rgba(66, 239, 255, 0.05);
}

.chat-conversation-item.is-active {
  border-color: rgba(66, 239, 255, 0.28);
  background:
    linear-gradient(
      135deg,
      rgba(66, 239, 255, 0.12),
      rgba(148, 104, 255, 0.085)
    );
  box-shadow:
    inset 3px 0 0 var(--chat-cyan),
    0 12px 30px rgba(0, 0, 0, 0.18);
}

.chat-conversation-avatar {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(121, 221, 255, 0.22);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.035);
}

.chat-conversation-copy {
  min-width: 0;
}

.chat-conversation-copy strong,
.chat-conversation-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-conversation-copy strong {
  margin-bottom: 5px;
  color: var(--chat-text);
  font-size: 0.95rem;
  font-weight: 800;
}

.chat-conversation-copy span {
  color: var(--chat-muted);
  font-size: 0.79rem;
}

.chat-conversation-meta {
  display: grid;
  justify-items: end;
  gap: 7px;
  color: rgba(214, 226, 248, 0.42);
  font-size: 0.68rem;
}

.chat-unread-count {
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding-inline: 6px;
  border-radius: 999px;
  color: #04121e;
  font-size: 0.68rem;
  font-weight: 950;
  background:
    linear-gradient(
      135deg,
      var(--chat-cyan),
      #9efff4
    );
  box-shadow: 0 0 18px rgba(66, 239, 255, 0.28);
}

/* =========================================================
   SIDEBAR EMPTY STATE
   ========================================================= */

.chat-sidebar-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 360px;
  padding: 32px 20px;
  text-align: center;
}

.chat-sidebar-empty h3 {
  margin-bottom: 8px;
}

.chat-sidebar-empty p {
  max-width: 275px;
  margin: 0 0 22px;
  font-size: 0.88rem;
}

.chat-empty-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border: 1px solid rgba(66, 239, 255, 0.24);
  border-radius: 19px;
  color: var(--chat-cyan);
  font-size: 1.45rem;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.12),
      rgba(148, 104, 255, 0.08)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 28px rgba(66, 239, 255, 0.08);
}

/* =========================================================
   ACTIVE CONVERSATION HEADER
   ========================================================= */

.chat-active-person {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.chat-active-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}

.chat-active-avatar {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(121, 221, 255, 0.24);
  border-radius: 50%;
  object-fit: cover;
}

.chat-presence-indicator {
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 13px;
  height: 13px;
  border: 3px solid #071127;
  border-radius: 50%;
  background: var(--chat-green);
  box-shadow: 0 0 12px rgba(93, 242, 173, 0.72);
}

.chat-active-copy {
  min-width: 0;
}

.chat-active-copy h2,
.chat-active-copy p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-conversation-subtitle {
  margin: 5px 0 0;
  color: var(--chat-muted);
  font-size: 0.8rem;
}

.chat-workspace-actions {
  display: flex;
  gap: 8px;
}

/* =========================================================
   MESSAGE AREA
   ========================================================= */

.chat-message-list {
  position: relative;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(22px, 3vw, 38px);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(66, 239, 255, 0.3)
    transparent;
}

.chat-message-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 20px;
}

.chat-message-group.is-mine {
  align-items: flex-end;
}

.chat-message-group.is-theirs {
  align-items: flex-start;
}

.chat-message-bubble {
  position: relative;
  width: fit-content;
  max-width: min(72%, 640px);
  padding: 13px 16px;
  border: 1px solid rgba(121, 221, 255, 0.12);
  border-radius: 20px 20px 20px 6px;
  color: rgba(247, 250, 255, 0.96);
  line-height: 1.58;
  overflow-wrap: anywhere;
  background:
    linear-gradient(
      145deg,
      rgba(21, 39, 74, 0.96),
      rgba(10, 23, 47, 0.98)
    );
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.chat-message-group.is-mine .chat-message-bubble {
  border-color: rgba(66, 239, 255, 0.2);
  border-radius: 20px 20px 6px 20px;
  background:
    linear-gradient(
      135deg,
      rgba(34, 145, 255, 0.96),
      rgba(102, 83, 255, 0.96)
    );
  box-shadow:
    0 15px 34px rgba(61, 103, 255, 0.22),
    0 0 24px rgba(66, 239, 255, 0.06);
}

.chat-message-bubble p {
  margin: 0;
  color: inherit;
  line-height: inherit;
}

.chat-message-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-inline: 6px;
  color: rgba(214, 226, 248, 0.4);
  font-size: 0.67rem;
}

.chat-message-attachment {
  display: block;
  max-width: 100%;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 14px;
}

.chat-message-attachment img,
.chat-message-attachment video {
  display: block;
  width: min(100%, 440px);
  max-height: 380px;
  border-radius: inherit;
  object-fit: cover;
}

.chat-message-attachment audio {
  width: min(100%, 370px);
}

.chat-date-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0;
  color: rgba(214, 226, 248, 0.42);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.chat-date-divider::before,
.chat-date-divider::after {
  flex: 1;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(121, 221, 255, 0.16),
      transparent
    );
  content: "";
}

/* =========================================================
   MAIN EMPTY STATE
   ========================================================= */

.chat-empty-state {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100%;
  padding: clamp(38px, 6vw, 78px) 22px;
  text-align: center;
}

.chat-empty-state h2 {
  margin-bottom: 10px;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.chat-empty-state p {
  max-width: 590px;
  margin: 0 0 26px;
}

.chat-empty-visual {
  margin-bottom: 20px;
}

.chat-empty-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(66, 239, 255, 0.24);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(66, 239, 255, 0.13),
      transparent 68%
    ),
    rgba(5, 13, 30, 0.8);
  box-shadow:
    0 0 36px rgba(66, 239, 255, 0.12),
    0 0 72px rgba(148, 104, 255, 0.08);
}

.chat-empty-logo::before,
.chat-empty-logo::after {
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(66, 239, 255, 0.12);
  border-radius: 50%;
  content: "";
}

.chat-empty-logo::after {
  inset: -24px;
  border-color: rgba(148, 104, 255, 0.1);
}

.chat-empty-logo img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  filter:
    drop-shadow(
      0 0 18px rgba(66, 239, 255, 0.46)
    );
}

/* =========================================================
   STATUS
   ========================================================= */

.chat-status,
#chatConversationStatus {
  margin: 12px 18px 0;
}

.chat-page .inline-status {
  padding: 11px 14px;
  border: 1px solid rgba(121, 221, 255, 0.14);
  border-radius: 13px;
  color: var(--chat-muted);
  font-size: 0.82rem;
  background: rgba(6, 15, 33, 0.76);
}

.chat-page .inline-status[data-type="error"] {
  border-color: rgba(255, 113, 128, 0.3);
  color: #ffd6dc;
  background: rgba(255, 113, 128, 0.08);
}

.chat-page .inline-status[data-type="success"] {
  border-color: rgba(93, 242, 173, 0.28);
  color: #cbffe7;
  background: rgba(93, 242, 173, 0.08);
}

/* =========================================================
   COMPOSER
   ========================================================= */

.chat-composer {
  position: relative;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--chat-border);
  background:
    linear-gradient(
      180deg,
      rgba(7, 16, 35, 0.94),
      rgba(3, 9, 22, 0.99)
    );
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.chat-composer-row {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  align-items: end;
  gap: 11px;
}

.chat-composer-action {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(121, 221, 255, 0.19);
  border-radius: 15px;
  color: var(--chat-cyan);
  font-size: 1.25rem;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.09),
      rgba(148, 104, 255, 0.05)
    );
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.chat-composer-action:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(66, 239, 255, 0.46);
  background: rgba(66, 239, 255, 0.14);
  box-shadow: 0 10px 24px rgba(66, 239, 255, 0.08);
}

.chat-composer-action:disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

.chat-message-field {
  min-width: 0;
}

.chat-message-field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  max-height: 190px;
  padding: 12px 16px;
  resize: none;
  overflow-y: auto;
  border: 1px solid rgba(121, 221, 255, 0.16);
  border-radius: 17px;
  color: var(--chat-text);
  font: inherit;
  line-height: 1.5;
  background: rgba(3, 9, 23, 0.82);
  outline: none;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.chat-message-field textarea::placeholder {
  color: rgba(214, 226, 248, 0.38);
}

.chat-message-field textarea:focus {
  border-color: rgba(66, 239, 255, 0.52);
  background: rgba(6, 15, 34, 0.98);
  box-shadow:
    0 0 0 4px rgba(66, 239, 255, 0.075),
    0 0 24px rgba(66, 239, 255, 0.07);
}

.chat-message-field textarea:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.chat-send-button {
  min-width: 108px;
  min-height: 48px;
  border-radius: 15px;
  font-weight: 850;
  box-shadow:
    0 12px 28px rgba(70, 103, 255, 0.2),
    0 0 20px rgba(66, 239, 255, 0.07);
}

.chat-send-button span:last-child {
  margin-left: 5px;
}

.chat-composer-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 9px;
  padding-inline: 60px 2px;
  color: rgba(214, 226, 248, 0.38);
  font-size: 0.68rem;
}

.chat-reply-preview,
.chat-attachment-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
  padding: 12px 14px;
  border: 1px solid rgba(121, 221, 255, 0.15);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.07),
      rgba(148, 104, 255, 0.045)
    );
}

.chat-reply-preview strong {
  display: block;
  margin-bottom: 3px;
  color: var(--chat-cyan);
  font-size: 0.71rem;
}

.chat-reply-preview p {
  max-width: 580px;
  margin: 0;
  overflow: hidden;
  color: var(--chat-muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attachment-details {
  min-width: 0;
  color: var(--chat-muted);
  font-size: 0.82rem;
}

.chat-upload-progress {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  color: var(--chat-muted);
  font-size: 0.75rem;
}

.chat-upload-progress progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.chat-upload-progress progress::-webkit-progress-bar {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.chat-upload-progress progress::-webkit-progress-value {
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--chat-cyan),
      var(--chat-violet)
    );
}

.chat-upload-progress progress::-moz-progress-bar {
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--chat-cyan),
      var(--chat-violet)
    );
}

/* =========================================================
   SAFETY CARD
   ========================================================= */

.chat-safety-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(22px, 3vw, 32px);
}

.chat-safety-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #04151f;
  font-weight: 950;
  background:
    linear-gradient(
      135deg,
      var(--chat-cyan),
      var(--chat-green)
    );
  box-shadow:
    0 0 26px rgba(66, 239, 255, 0.22),
    0 0 46px rgba(93, 242, 173, 0.08);
}

.chat-safety-card h2 {
  margin-bottom: 7px;
  font-size: clamp(1.18rem, 2vw, 1.52rem);
}

.chat-safety-card p {
  max-width: 940px;
  margin: 0;
}

/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-theme="light"] .chat-page {
  --chat-text: #10213d;
  --chat-text-soft: rgba(26, 50, 84, 0.82);
  --chat-muted: rgba(36, 58, 88, 0.68);
  --chat-border: rgba(44, 105, 164, 0.14);
  --chat-border-strong: rgba(44, 105, 164, 0.28);
  --chat-shadow:
    0 24px 62px rgba(45, 77, 116, 0.14),
    0 0 30px rgba(66, 239, 255, 0.04);
}

html[data-theme="light"] .chat-page > .content-card,
html[data-theme="light"] .chat-sidebar,
html[data-theme="light"] .chat-workspace,
html[data-theme="light"] .chat-sidebar-header,
html[data-theme="light"] .chat-workspace-header,
html[data-theme="light"] .chat-composer {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(237, 245, 255, 0.96)
    );
}

html[data-theme="light"] .chat-search input,
html[data-theme="light"] .chat-message-field textarea {
  color: #10213d;
  background: rgba(239, 247, 255, 0.96);
}

html[data-theme="light"] .chat-search input::placeholder,
html[data-theme="light"] .chat-message-field textarea::placeholder {
  color: rgba(36, 58, 88, 0.4);
}

html[data-theme="light"] .chat-message-bubble {
  color: #17304f;
  background:
    linear-gradient(
      145deg,
      rgba(239, 247, 255, 0.98),
      rgba(225, 238, 253, 0.98)
    );
}

html[data-theme="light"] .chat-message-group.is-mine .chat-message-bubble {
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #278fff,
      #6959ff
    );
}

html[data-theme="light"] .chat-presence-indicator {
  border-color: #ffffff;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {
  .chat-command-center {
    grid-template-columns:
      minmax(260px, 0.37fr)
      minmax(0, 0.63fr);
  }

  .chat-message-bubble {
    max-width: 80%;
  }
}

@media (max-width: 820px) {
  .chat-page {
    gap: 16px;
    padding: 6px;
  }

  .chat-hero {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: auto;
    padding: 30px 22px;
  }

  .chat-hero-actions,
  .chat-hero-actions .button {
    width: 100%;
  }

  .chat-command-center {
    display: block;
    min-height: auto;
  }

  .chat-sidebar {
    min-height: 300px;
    max-height: 390px;
    border-right: 0;
    border-bottom: 1px solid var(--chat-border);
  }

  .chat-workspace {
    min-height: 610px;
  }

  .chat-message-list {
    min-height: 390px;
  }
}

@media (max-width: 620px) {
  .chat-hero {
    padding: 28px 18px;
  }

  .chat-hero h1 {
    font-size: clamp(2.1rem, 11vw, 3rem);
  }

  .chat-sidebar-header,
  .chat-workspace-header {
    min-height: 84px;
    padding: 16px;
  }

  .chat-workspace-header {
    align-items: flex-start;
  }

  .chat-active-avatar {
    width: 44px;
    height: 44px;
  }

  .chat-workspace-actions {
    gap: 5px;
  }

  .chat-workspace-actions .icon-button {
    width: 38px;
    height: 38px;
  }

  .chat-message-list {
    padding: 20px 14px;
  }

  .chat-message-bubble {
    max-width: 92%;
  }

  .chat-composer {
    padding: 13px;
  }

  .chat-composer-row {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .chat-send-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .chat-composer-footer {
    padding-inline: 0;
  }

  .chat-safety-card {
    flex-direction: column;
  }
}

@media (max-width: 440px) {
  .chat-sidebar {
    max-height: 340px;
  }

  .chat-message-bubble {
    max-width: 96%;
  }

  .chat-composer-footer {
    flex-direction: column;
    gap: 3px;
  }

  .chat-empty-logo {
    width: 102px;
    height: 102px;
  }
}

/* =========================================================
   ACCESSIBILITY + REDUCED MOTION
   ========================================================= */

.chat-page button:focus-visible,
.chat-page a:focus-visible,
.chat-page input:focus-visible,
.chat-page textarea:focus-visible {
  outline: 3px solid rgba(66, 239, 255, 0.86);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .chat-page *,
  .chat-page *::before,
  .chat-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* =========================================================
   SMOOTH JAZZ CONNECT — DASHBOARD PAGE
   12/10 PREMIUM COMMAND CENTER
   Append to the bottom of styles.css
   ========================================================= */

.dashboard-page {
  --dashboard-cyan: #41efff;
  --dashboard-blue: #4c8dff;
  --dashboard-violet: #9567ff;
  --dashboard-pink: #ff56d7;
  --dashboard-green: #58f2aa;
  --dashboard-gold: #ffd46f;

  --dashboard-text: #f8fbff;
  --dashboard-text-soft: rgba(234, 242, 255, 0.82);
  --dashboard-muted: rgba(211, 225, 248, 0.65);

  --dashboard-surface: rgba(8, 17, 37, 0.92);
  --dashboard-surface-soft: rgba(14, 28, 56, 0.76);
  --dashboard-surface-strong: rgba(5, 12, 28, 0.98);

  --dashboard-border: rgba(110, 222, 255, 0.15);
  --dashboard-border-strong: rgba(110, 222, 255, 0.34);

  --dashboard-shadow:
    0 30px 86px rgba(0, 0, 0, 0.4),
    0 0 54px rgba(65, 239, 255, 0.055);

  position: relative;
  display: grid;
  gap: clamp(20px, 2.8vw, 34px);
  width: min(100%, 1320px);
  margin-inline: auto;
  padding: clamp(8px, 1.5vw, 18px);
  isolation: isolate;
}

.dashboard-page::before,
.dashboard-page::after {
  position: fixed;
  z-index: -2;
  width: min(54vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  filter: blur(110px);
  opacity: 0.13;
}

.dashboard-page::before {
  top: 5%;
  left: 30%;
  background:
    radial-gradient(
      circle,
      rgba(65, 239, 255, 0.68),
      rgba(76, 141, 255, 0.2) 44%,
      transparent 72%
    );
}

.dashboard-page::after {
  right: -12%;
  bottom: -14%;
  background:
    radial-gradient(
      circle,
      rgba(149, 103, 255, 0.58),
      rgba(255, 86, 215, 0.16) 46%,
      transparent 72%
    );
}

.dashboard-page > .content-card,
.dashboard-page .dashboard-metric-card,
.dashboard-page .dashboard-management-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--dashboard-border);
  border-radius: clamp(22px, 2.6vw, 34px);
  background:
    linear-gradient(
      145deg,
      rgba(14, 28, 56, 0.95),
      rgba(5, 12, 28, 0.97)
    );
  box-shadow: var(--dashboard-shadow);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}

.dashboard-page > .content-card::before,
.dashboard-page .dashboard-metric-card::before,
.dashboard-page .dashboard-management-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.07),
      transparent 26%,
      transparent 72%,
      rgba(65, 239, 255, 0.045)
    );
}

.dashboard-page h1,
.dashboard-page h2,
.dashboard-page h3 {
  margin-top: 0;
  color: var(--dashboard-text);
  text-wrap: balance;
}

.dashboard-page p {
  color: var(--dashboard-muted);
  line-height: 1.72;
}

.dashboard-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0 0 10px;
  color: var(--dashboard-cyan);
  font-size: clamp(0.69rem, 0.8vw, 0.78rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dashboard-page .eyebrow::before {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--dashboard-cyan),
      var(--dashboard-violet)
    );
  content: "";
  box-shadow: 0 0 14px rgba(65, 239, 255, 0.68);
}

/* =========================================================
   HERO — SMALLER + VERTICAL TITLE
   ========================================================= */

.dashboard-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(190px, 0.8fr);
  align-items: center;
  gap: clamp(20px, 3.5vw, 40px);
  min-height: clamp(300px, 40vh, 410px);
  padding:
    clamp(24px, 3.5vw, 40px)
    clamp(20px, 4vw, 46px);
  background:
    radial-gradient(
      circle at 86% 28%,
      rgba(149, 103, 255, 0.2),
      transparent 34%
    ),
    radial-gradient(
      circle at 12% 92%,
      rgba(65, 239, 255, 0.1),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(14, 30, 63, 0.99),
      rgba(5, 12, 29, 0.98)
    ) !important;
}

.dashboard-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 590px;
}

.dashboard-hero h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 560px;
  margin: 0 0 14px;
  font-size: clamp(2rem, 3.8vw, 3.35rem);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.dashboard-hero h1 > span,
.dashboard-hero h1 .hero-title-line {
  display: block;
  width: 100%;
  margin: 0;
  white-space: normal;
}

.dashboard-hero h1 span + span,
.dashboard-hero h1 .hero-title-line + .hero-title-line {
  margin-top: 5px;
}

.dashboard-hero h1 span {
  background:
    linear-gradient(
      100deg,
      var(--dashboard-cyan) 0%,
      #8fc8ff 34%,
      var(--dashboard-violet) 68%,
      var(--dashboard-pink) 100%
    );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter:
    drop-shadow(
      0 0 14px rgba(65, 239, 255, 0.16)
    );
}

.dashboard-hero p {
  max-width: 560px;
  margin: 0;
  color: var(--dashboard-text-soft);
  font-size: clamp(0.94rem, 1.15vw, 1.05rem);
  line-height: 1.65;
}

.dashboard-hero-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 210px;
}

.dashboard-logo-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: min(21vw, 230px);
  min-width: 170px;
  aspect-ratio: 1;
}

.dashboard-logo-core {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 60%;
  aspect-ratio: 1;
  border: 1px solid rgba(65, 239, 255, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.14),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(14, 29, 58, 0.94),
      rgba(4, 10, 25, 0.99)
    );
  box-shadow:
    inset 0 0 34px rgba(65, 239, 255, 0.07),
    0 0 28px rgba(65, 239, 255, 0.18),
    0 0 58px rgba(149, 103, 255, 0.12);
}

.dashboard-logo-core img {
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter:
    drop-shadow(
      0 0 16px rgba(65, 239, 255, 0.42)
    );
  animation:
    dashboardLogoFloat 5s ease-in-out infinite;
}

.dashboard-orbit {
  position: absolute;
  border: 1px solid rgba(65, 239, 255, 0.18);
  border-radius: 50%;
}

.dashboard-orbit::before {
  position: absolute;
  top: 50%;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dashboard-cyan);
  content: "";
  box-shadow:
    0 0 8px var(--dashboard-cyan),
    0 0 18px rgba(65, 239, 255, 0.72);
}

.dashboard-orbit-one {
  inset: 6%;
  animation:
    dashboardOrbitSpin 14s linear infinite;
}

.dashboard-orbit-two {
  inset: 19%;
  border-color: rgba(149, 103, 255, 0.22);
  animation:
    dashboardOrbitSpinReverse 10s linear infinite;
}

.dashboard-orbit-two::before {
  background: var(--dashboard-violet);
  box-shadow:
    0 0 8px var(--dashboard-violet),
    0 0 18px rgba(149, 103, 255, 0.7);
}

@media (max-width: 760px) {
  .dashboard-hero {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: auto;
    padding:
      26px
      20px;
  }

  .dashboard-hero-content {
    align-items: center;
    max-width: none;
    text-align: center;
  }

  .dashboard-hero h1 {
    align-items: center;
    max-width: 470px;
    font-size: clamp(1.9rem, 9vw, 2.8rem);
    text-align: center;
  }

  .dashboard-hero h1 > span,
  .dashboard-hero h1 .hero-title-line {
    text-align: center;
  }

  .dashboard-hero p {
    max-width: 500px;
  }

  .dashboard-hero-visual {
    min-height: 170px;
  }

  .dashboard-logo-orbit {
    width: 165px;
    min-width: 165px;
  }
}

/* =========================================================
   COMPOSER CARD
   ========================================================= */

.dashboard-composer-card {
  padding: clamp(26px, 4vw, 46px);
}

.dashboard-section-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(22px, 4vw, 44px);
  margin-bottom: clamp(22px, 3vw, 32px);
}

.dashboard-section-header > div:first-child {
  max-width: 720px;
}

.dashboard-section-header h2 {
  margin-bottom: 9px;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.dashboard-section-header p {
  margin: 0;
}

.dashboard-composer-identity {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  padding: 12px 15px;
  border: 1px solid rgba(110, 222, 255, 0.15);
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      rgba(65, 239, 255, 0.07),
      rgba(149, 103, 255, 0.045)
    );
}

.dashboard-composer-identity img {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(65, 239, 255, 0.24);
  border-radius: 50%;
  object-fit: cover;
}

.dashboard-composer-identity strong,
.dashboard-composer-identity span {
  display: block;
}

.dashboard-composer-identity strong {
  color: var(--dashboard-text);
  font-size: 0.92rem;
}

.dashboard-composer-identity span {
  margin-top: 3px;
  color: var(--dashboard-muted);
  font-size: 0.77rem;
}

/* =========================================================
   COMPOSER FORM
   ========================================================= */

.dashboard-composer {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
}

.dashboard-composer-field {
  padding: 6px;
  border: 1px solid rgba(110, 222, 255, 0.16);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(3, 10, 24, 0.82),
      rgba(8, 18, 38, 0.88)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 18px 42px rgba(0, 0, 0, 0.16);
}

.dashboard-composer-field textarea {
  display: block;
  width: 100%;
  min-height: 190px;
  max-height: 460px;
  padding: 20px 20px 10px;
  resize: vertical;
  border: 0;
  border-radius: 17px;
  color: var(--dashboard-text);
  font: inherit;
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.65;
  background: transparent;
  outline: none;
}

.dashboard-composer-field textarea::placeholder {
  color: rgba(211, 225, 248, 0.4);
}

.dashboard-composer-field:focus-within {
  border-color: rgba(65, 239, 255, 0.48);
  box-shadow:
    0 0 0 4px rgba(65, 239, 255, 0.07),
    0 0 30px rgba(65, 239, 255, 0.07);
}

.dashboard-composer-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 15px 11px;
  color: rgba(211, 225, 248, 0.42);
  font-size: 0.72rem;
}

.dashboard-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 3px;
}

.dashboard-composer-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-page .tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid rgba(110, 222, 255, 0.16);
  border-radius: 14px;
  color: var(--dashboard-text-soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  background:
    linear-gradient(
      145deg,
      rgba(65, 239, 255, 0.07),
      rgba(149, 103, 255, 0.045)
    );
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.dashboard-page .tool-button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(65, 239, 255, 0.4);
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      rgba(65, 239, 255, 0.13),
      rgba(149, 103, 255, 0.09)
    );
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(65, 239, 255, 0.07);
}

.dashboard-page .tool-button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.dashboard-upload-button {
  color: var(--dashboard-cyan);
}

.dashboard-publish-button {
  flex: 0 0 auto;
  min-width: 130px;
  min-height: 48px;
  border-radius: 15px;
  font-weight: 900;
  box-shadow:
    0 14px 32px rgba(65, 103, 255, 0.24),
    0 0 24px rgba(65, 239, 255, 0.08);
}

.dashboard-publish-button span:last-child {
  margin-left: 5px;
}

/* =========================================================
   FILE PREVIEW
   ========================================================= */

.dashboard-file-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid rgba(110, 222, 255, 0.17);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(65, 239, 255, 0.07),
      rgba(149, 103, 255, 0.045)
    );
}

.dashboard-file-preview-content {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.dashboard-file-preview-media {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  overflow: hidden;
  border: 1px solid rgba(110, 222, 255, 0.18);
  border-radius: 15px;
  background: rgba(3, 10, 24, 0.76);
}

.dashboard-file-preview-media img,
.dashboard-file-preview-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-file-preview-copy {
  min-width: 0;
}

.dashboard-file-preview-copy .eyebrow {
  margin-bottom: 4px;
  font-size: 0.63rem;
}

.dashboard-file-preview-copy strong,
.dashboard-file-preview-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-file-preview-copy strong {
  color: var(--dashboard-text);
}

.dashboard-file-preview-copy > span:last-child {
  margin-top: 4px;
  color: var(--dashboard-muted);
  font-size: 0.75rem;
}

/* =========================================================
   UPLOAD PROGRESS
   ========================================================= */

.dashboard-upload-progress {
  display: grid;
  gap: 9px;
  padding: 14px 16px;
  border: 1px solid rgba(110, 222, 255, 0.15);
  border-radius: 16px;
  background: rgba(6, 15, 33, 0.72);
}

.dashboard-upload-progress-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--dashboard-muted);
  font-size: 0.78rem;
}

.dashboard-upload-progress progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.dashboard-upload-progress progress::-webkit-progress-bar {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.dashboard-upload-progress progress::-webkit-progress-value {
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--dashboard-cyan),
      var(--dashboard-violet)
    );
}

.dashboard-upload-progress progress::-moz-progress-bar {
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--dashboard-cyan),
      var(--dashboard-violet)
    );
}

/* =========================================================
   SCHEDULE PANEL
   ========================================================= */

.dashboard-schedule-panel {
  padding: 18px;
  border: 1px solid rgba(110, 222, 255, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(9, 22, 46, 0.9),
      rgba(5, 13, 30, 0.94)
    );
}

.dashboard-schedule-panel .form-field {
  display: grid;
  gap: 8px;
}

.dashboard-schedule-panel label {
  color: var(--dashboard-text);
  font-size: 0.84rem;
  font-weight: 800;
}

.dashboard-schedule-panel input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid rgba(110, 222, 255, 0.16);
  border-radius: 14px;
  color: var(--dashboard-text);
  font: inherit;
  color-scheme: dark;
  background: rgba(3, 10, 24, 0.8);
  outline: none;
}

.dashboard-schedule-panel input:focus {
  border-color: rgba(65, 239, 255, 0.48);
  box-shadow:
    0 0 0 4px rgba(65, 239, 255, 0.07);
}

.dashboard-schedule-panel small {
  color: var(--dashboard-muted);
  line-height: 1.5;
}

/* =========================================================
   STATUS
   ========================================================= */

.dashboard-composer-status {
  padding: 12px 14px;
  border: 1px solid rgba(110, 222, 255, 0.14);
  border-radius: 14px;
  color: var(--dashboard-muted);
  background: rgba(6, 15, 33, 0.76);
}

.dashboard-composer-status[data-type="error"] {
  border-color: rgba(255, 107, 122, 0.3);
  color: #ffd5da;
  background: rgba(255, 107, 122, 0.08);
}

.dashboard-composer-status[data-type="success"] {
  border-color: rgba(88, 242, 170, 0.28);
  color: #caffdf;
  background: rgba(88, 242, 170, 0.08);
}

/* =========================================================
   METRICS
   ========================================================= */

.dashboard-metrics-section {
  display: grid;
  gap: 20px;
}

.dashboard-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-inline: 4px;
}

.dashboard-section-heading > div {
  max-width: 760px;
}

.dashboard-section-heading h2 {
  margin-bottom: 9px;
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.dashboard-section-heading p {
  margin: 0;
}

.dashboard-metrics-grid {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
  gap: clamp(16px, 2vw, 22px);
}

.dashboard-metric-card {
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: clamp(22px, 3vw, 30px);
  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.dashboard-metric-card:hover {
  transform: translateY(-5px);
  border-color: var(--dashboard-border-strong);
  box-shadow:
    0 30px 66px rgba(0, 0, 0, 0.34),
    0 0 32px rgba(65, 239, 255, 0.08);
}

.dashboard-metric-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  border: 1px solid rgba(65, 239, 255, 0.24);
  border-radius: 17px;
  color: var(--dashboard-cyan);
  font-size: 1.35rem;
  background:
    linear-gradient(
      145deg,
      rgba(65, 239, 255, 0.11),
      rgba(149, 103, 255, 0.07)
    );
}

.dashboard-metric-copy {
  position: relative;
  z-index: 1;
}

.dashboard-metric-copy .eyebrow {
  margin-bottom: 8px;
}

.dashboard-metric-value {
  display: block;
  margin-bottom: 5px;
  color: var(--dashboard-text);
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 950;
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.dashboard-metric-copy p {
  margin: 0;
}

.dashboard-metric-trend,
.dashboard-metric-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: auto;
  padding-top: 20px;
  color: var(--dashboard-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.dashboard-metric-link {
  color: var(--dashboard-cyan);
}

.dashboard-metric-link::after {
  content: "→";
  transition: transform 180ms ease;
}

.dashboard-metric-link:hover::after {
  transform: translateX(4px);
}

/* =========================================================
   MANAGEMENT CARDS
   ========================================================= */

.dashboard-management-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: clamp(16px, 2vw, 22px);
}

.dashboard-management-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  min-height: 270px;
  padding: clamp(24px, 4vw, 36px);
}

.dashboard-management-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(65, 239, 255, 0.24);
  border-radius: 18px;
  color: var(--dashboard-cyan);
  font-size: 1.35rem;
  background:
    linear-gradient(
      145deg,
      rgba(65, 239, 255, 0.11),
      rgba(149, 103, 255, 0.07)
    );
}

.dashboard-management-card > div:last-child {
  position: relative;
  z-index: 1;
}

.dashboard-management-card h2 {
  margin-bottom: 10px;
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.dashboard-management-card p {
  margin: 0 0 22px;
}

.dashboard-management-card .button {
  min-height: 46px;
  border-radius: 14px;
  font-weight: 800;
}

/* =========================================================
   ICON BUTTON
   ========================================================= */

.dashboard-page .icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(110, 222, 255, 0.18);
  border-radius: 13px;
  color: var(--dashboard-text);
  background:
    linear-gradient(
      145deg,
      rgba(65, 239, 255, 0.08),
      rgba(149, 103, 255, 0.06)
    );
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.dashboard-page .icon-button:hover {
  transform: translateY(-2px);
  border-color: rgba(65, 239, 255, 0.4);
  background:
    linear-gradient(
      145deg,
      rgba(65, 239, 255, 0.15),
      rgba(149, 103, 255, 0.1)
    );
}

/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-theme="light"] .dashboard-page {
  --dashboard-text: #10213d;
  --dashboard-text-soft: rgba(29, 51, 84, 0.82);
  --dashboard-muted: rgba(36, 59, 91, 0.68);
  --dashboard-border: rgba(44, 105, 164, 0.14);
  --dashboard-border-strong: rgba(44, 105, 164, 0.28);
  --dashboard-shadow:
    0 24px 62px rgba(45, 77, 116, 0.14),
    0 0 30px rgba(65, 239, 255, 0.04);
}

html[data-theme="light"] .dashboard-page > .content-card,
html[data-theme="light"] .dashboard-page .dashboard-metric-card,
html[data-theme="light"] .dashboard-page .dashboard-management-card,
html[data-theme="light"] .dashboard-composer-field,
html[data-theme="light"] .dashboard-schedule-panel {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(237, 245, 255, 0.96)
    );
}

html[data-theme="light"] .dashboard-composer-field textarea,
html[data-theme="light"] .dashboard-schedule-panel input {
  color: #10213d;
}

html[data-theme="light"] .dashboard-composer-field textarea::placeholder {
  color: rgba(36, 59, 91, 0.4);
}

html[data-theme="light"] .dashboard-schedule-panel input {
  color-scheme: light;
  background: rgba(239, 247, 255, 0.96);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1040px) {
  .dashboard-hero {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(220px, 0.68fr);
  }

  .dashboard-logo-orbit {
    width: min(29vw, 285px);
  }

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

  .dashboard-metric-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .dashboard-page {
    gap: 18px;
    padding: 6px;
  }

  .dashboard-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: auto;
    padding: 38px 26px;
    text-align: center;
  }

  .dashboard-hero-content {
    align-items: center;
    max-width: 760px;
    margin-inline: auto;
  }

  .dashboard-hero h1 {
    align-items: center;
    max-width: 650px;
    margin-inline: auto;
    text-align: center;
  }

  .dashboard-hero h1 span {
    text-align: center;
  }

  .dashboard-hero p {
    text-align: center;
  }

  .dashboard-hero-visual {
    min-height: 250px;
  }

  .dashboard-logo-orbit {
    width: min(62vw, 275px);
  }

  .dashboard-section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-composer-identity {
    width: 100%;
  }

  .dashboard-composer-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-composer-tools {
    width: 100%;
  }

  .dashboard-publish-button {
    width: 100%;
  }

  .dashboard-management-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 660px) {
  .dashboard-hero {
    padding: 30px 20px;
  }

  .dashboard-hero h1 {
    font-size: clamp(2.05rem, 10.5vw, 3.05rem);
    line-height: 1;
  }

  .dashboard-composer-card {
    padding: 22px 17px;
  }

  .dashboard-composer-field textarea {
    min-height: 170px;
    padding: 17px 15px 8px;
  }

  .dashboard-composer-meta {
    flex-direction: column;
    gap: 4px;
    padding-inline: 11px;
  }

  .dashboard-composer-tools {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .dashboard-page .tool-button {
    width: 100%;
  }

  .dashboard-metrics-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-metric-card:last-child {
    grid-column: auto;
  }

  .dashboard-file-preview {
    align-items: flex-start;
  }

  .dashboard-file-preview-content {
    align-items: flex-start;
  }

  .dashboard-management-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 440px) {
  .dashboard-hero {
    padding: 27px 17px;
  }

  .dashboard-hero h1 {
    font-size: clamp(1.9rem, 9.8vw, 2.55rem);
  }

  .dashboard-hero-visual {
    min-height: 210px;
  }

  .dashboard-logo-orbit {
    width: min(70vw, 220px);
    min-width: 180px;
  }

  .dashboard-composer-tools {
    grid-template-columns: 1fr;
  }

  .dashboard-file-preview {
    flex-direction: column;
  }

  .dashboard-file-preview-content {
    width: 100%;
  }

  .dashboard-file-preview .icon-button {
    align-self: flex-end;
  }
}

/* =========================================================
   ACCESSIBILITY + MOTION
   ========================================================= */

.dashboard-page button:focus-visible,
.dashboard-page a:focus-visible,
.dashboard-page input:focus-visible,
.dashboard-page textarea:focus-visible,
.dashboard-page label[for]:focus-visible {
  outline: 3px solid rgba(65, 239, 255, 0.86);
  outline-offset: 3px;
}

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

@keyframes dashboardOrbitSpin {
  from {
    transform: rotate(0deg);
  }

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

@keyframes dashboardOrbitSpinReverse {
  from {
    transform: rotate(360deg);
  }

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

@keyframes dashboardLogoFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.02);
  }
}
/* =========================================================
   SMOOTH JAZZ CONNECT — DISCOVER PAGE
   12/10 PREMIUM COMMUNITY DISCOVERY EXPERIENCE
   Append to the bottom of styles.css
   ========================================================= */

.discover-page {
  --discover-cyan: #41efff;
  --discover-blue: #4f8cff;
  --discover-violet: #9567ff;
  --discover-pink: #ff58d8;
  --discover-green: #5df2ad;
  --discover-gold: #ffd56f;

  --discover-text: #f8fbff;
  --discover-text-soft: rgba(235, 243, 255, 0.82);
  --discover-muted: rgba(211, 225, 248, 0.66);

  --discover-surface: rgba(8, 17, 37, 0.92);
  --discover-surface-soft: rgba(14, 28, 56, 0.76);
  --discover-surface-strong: rgba(5, 12, 28, 0.98);

  --discover-border: rgba(110, 222, 255, 0.15);
  --discover-border-strong: rgba(110, 222, 255, 0.34);

  --discover-shadow:
    0 30px 86px rgba(0, 0, 0, 0.4),
    0 0 54px rgba(65, 239, 255, 0.055);

  position: relative;
  display: grid;
  gap: clamp(20px, 2.8vw, 34px);
  width: min(100%, 1320px);
  margin-inline: auto;
  padding: clamp(8px, 1.5vw, 18px);
  isolation: isolate;
}

.discover-page::before,
.discover-page::after {
  position: fixed;
  z-index: -2;
  width: min(54vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  filter: blur(110px);
  opacity: 0.13;
}

.discover-page::before {
  top: 5%;
  left: 30%;
  background:
    radial-gradient(
      circle,
      rgba(65, 239, 255, 0.68),
      rgba(79, 140, 255, 0.2) 44%,
      transparent 72%
    );
}

.discover-page::after {
  right: -12%;
  bottom: -14%;
  background:
    radial-gradient(
      circle,
      rgba(149, 103, 255, 0.58),
      rgba(255, 88, 216, 0.16) 46%,
      transparent 72%
    );
}

.discover-page > .content-card,
.discover-page .discover-feature-card,
.discover-page .discover-empty-state,
.discover-page .discover-member-card,
.discover-page .discover-post-card,
.discover-page .discover-news-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--discover-border);
  border-radius: clamp(22px, 2.6vw, 34px);
  background:
    linear-gradient(
      145deg,
      rgba(14, 28, 56, 0.95),
      rgba(5, 12, 28, 0.97)
    );
  box-shadow: var(--discover-shadow);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}

.discover-page > .content-card::before,
.discover-page .discover-feature-card::before,
.discover-page .discover-empty-state::before,
.discover-page .discover-member-card::before,
.discover-page .discover-post-card::before,
.discover-page .discover-news-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.07),
      transparent 26%,
      transparent 72%,
      rgba(65, 239, 255, 0.045)
    );
}

.discover-page h1,
.discover-page h2,
.discover-page h3 {
  margin-top: 0;
  color: var(--discover-text);
  text-wrap: balance;
}

.discover-page p {
  color: var(--discover-muted);
  line-height: 1.72;
}

.discover-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0 0 10px;
  color: var(--discover-cyan);
  font-size: clamp(0.69rem, 0.8vw, 0.78rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-page .eyebrow::before {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--discover-cyan),
      var(--discover-violet)
    );
  content: "";
  box-shadow: 0 0 14px rgba(65, 239, 255, 0.68);
}

/* =========================================================
   HERO
   ========================================================= */

.discover-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(250px, 0.84fr);
  align-items: center;
  gap: clamp(28px, 5vw, 62px);
  min-height: clamp(420px, 53vh, 580px);
  padding:
    clamp(34px, 5vw, 60px)
    clamp(26px, 5vw, 64px);
  background:
    radial-gradient(
      circle at 86% 28%,
      rgba(149, 103, 255, 0.22),
      transparent 35%
    ),
    radial-gradient(
      circle at 12% 92%,
      rgba(65, 239, 255, 0.12),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(14, 30, 63, 0.99),
      rgba(5, 12, 29, 0.98)
    ) !important;
}

.discover-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 720px;
}

.discover-hero h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 680px;
  margin: 0 0 20px;
  font-size: clamp(2.35rem, 4.6vw, 4.25rem);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.discover-hero h1 span {
  display: block;
  margin-top: 6px;
  background:
    linear-gradient(
      100deg,
      var(--discover-cyan) 0%,
      #8fc8ff 34%,
      var(--discover-violet) 68%,
      var(--discover-pink) 100%
    );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter:
    drop-shadow(
      0 0 16px rgba(65, 239, 255, 0.18)
    );
}

.discover-hero p {
  max-width: 650px;
  margin: 0;
  color: var(--discover-text-soft);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
}

.discover-hero-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 25px;
}

.discover-hero-highlights span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(110, 222, 255, 0.16);
  border-radius: 999px;
  color: var(--discover-text-soft);
  font-size: 0.76rem;
  font-weight: 800;
  background:
    linear-gradient(
      145deg,
      rgba(65, 239, 255, 0.07),
      rgba(149, 103, 255, 0.045)
    );
}

.discover-hero-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 300px;
}

.discover-logo-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: min(27vw, 320px);
  min-width: 230px;
  aspect-ratio: 1;
}

.discover-logo-core {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid rgba(65, 239, 255, 0.3);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.15),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(14, 29, 58, 0.94),
      rgba(4, 10, 25, 0.99)
    );
  box-shadow:
    inset 0 0 45px rgba(65, 239, 255, 0.08),
    0 0 36px rgba(65, 239, 255, 0.2),
    0 0 82px rgba(149, 103, 255, 0.14);
}

.discover-logo-core img {
  width: 76%;
  height: 76%;
  object-fit: contain;
  filter:
    drop-shadow(
      0 0 20px rgba(65, 239, 255, 0.48)
    );
  animation:
    discoverLogoFloat 5s ease-in-out infinite;
}

.discover-orbit {
  position: absolute;
  border: 1px solid rgba(65, 239, 255, 0.2);
  border-radius: 50%;
}

.discover-orbit::before {
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--discover-cyan);
  content: "";
  box-shadow:
    0 0 10px var(--discover-cyan),
    0 0 24px rgba(65, 239, 255, 0.8);
}

.discover-orbit-one {
  inset: 5%;
  animation:
    discoverOrbitSpin 14s linear infinite;
}

.discover-orbit-two {
  inset: 17%;
  border-color: rgba(149, 103, 255, 0.24);
  animation:
    discoverOrbitSpinReverse 10s linear infinite;
}

.discover-orbit-two::before {
  background: var(--discover-violet);
  box-shadow:
    0 0 10px var(--discover-violet),
    0 0 24px rgba(149, 103, 255, 0.76);
}

.discover-orbit-three {
  inset: 29%;
  border-color: rgba(255, 88, 216, 0.22);
  animation:
    discoverOrbitSpin 8s linear infinite;
}

.discover-orbit-three::before {
  background: var(--discover-pink);
  box-shadow:
    0 0 10px var(--discover-pink),
    0 0 24px rgba(255, 88, 216, 0.72);
}

/* =========================================================
   SEARCH CARD
   ========================================================= */

.discover-search-card {
  padding: clamp(26px, 4vw, 46px);
}

.discover-section-header {
  position: relative;
  z-index: 1;
  margin-bottom: 24px;
}

.discover-section-header > div {
  max-width: 760px;
}

.discover-section-header h2 {
  margin-bottom: 9px;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.discover-section-header p {
  margin: 0;
}

.discover-search-form {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.discover-search-icon {
  position: absolute;
  left: 18px;
  z-index: 2;
  color: rgba(211, 225, 248, 0.48);
  font-size: 1.15rem;
  pointer-events: none;
}

.discover-search-form input {
  width: 100%;
  min-height: 56px;
  padding: 14px 18px 14px 50px;
  border: 1px solid rgba(110, 222, 255, 0.17);
  border-radius: 18px;
  color: var(--discover-text);
  font: inherit;
  font-size: 0.98rem;
  background:
    linear-gradient(
      145deg,
      rgba(3, 10, 24, 0.84),
      rgba(8, 18, 38, 0.88)
    );
  outline: none;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.discover-search-form input::placeholder {
  color: rgba(211, 225, 248, 0.4);
}

.discover-search-form input:focus {
  border-color: rgba(65, 239, 255, 0.5);
  background: rgba(6, 15, 34, 0.98);
  box-shadow:
    0 0 0 4px rgba(65, 239, 255, 0.075),
    0 0 28px rgba(65, 239, 255, 0.07);
}

.discover-search-form .button {
  min-width: 132px;
  min-height: 56px;
  border-radius: 18px;
  font-weight: 900;
  box-shadow:
    0 14px 32px rgba(65, 103, 255, 0.24),
    0 0 24px rgba(65, 239, 255, 0.08);
}

.discover-search-form .button span:last-child {
  margin-left: 5px;
}

/* =========================================================
   CATEGORY NAVIGATION
   ========================================================= */

.discover-category-nav {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 9px;
  margin-top: 19px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.discover-category-nav::-webkit-scrollbar {
  display: none;
}

.discover-category-button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(110, 222, 255, 0.14);
  border-radius: 999px;
  color: var(--discover-text-soft);
  font: inherit;
  font-size: 0.79rem;
  font-weight: 800;
  background:
    linear-gradient(
      145deg,
      rgba(65, 239, 255, 0.055),
      rgba(149, 103, 255, 0.035)
    );
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.discover-category-button:hover {
  transform: translateY(-2px);
  border-color: rgba(65, 239, 255, 0.36);
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      rgba(65, 239, 255, 0.11),
      rgba(149, 103, 255, 0.075)
    );
}

.discover-category-button.is-active,
.discover-category-button[aria-pressed="true"] {
  border-color: rgba(65, 239, 255, 0.42);
  color: #04131f;
  background:
    linear-gradient(
      135deg,
      var(--discover-cyan),
      #8affee
    );
  box-shadow:
    0 10px 24px rgba(65, 239, 255, 0.17),
    0 0 22px rgba(65, 239, 255, 0.1);
}

.discover-search-meta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 34px;
  margin-top: 15px;
}

.discover-result-count {
  margin-left: auto;
  color: var(--discover-muted);
  font-size: 0.76rem;
}

.discover-page .inline-status {
  padding: 10px 13px;
  border: 1px solid rgba(110, 222, 255, 0.14);
  border-radius: 12px;
  color: var(--discover-muted);
  font-size: 0.78rem;
  background: rgba(6, 15, 33, 0.76);
}

.discover-page .inline-status[data-type="error"] {
  border-color: rgba(255, 107, 122, 0.3);
  color: #ffd5da;
  background: rgba(255, 107, 122, 0.08);
}

.discover-page .inline-status[data-type="success"] {
  border-color: rgba(93, 242, 173, 0.28);
  color: #caffdf;
  background: rgba(93, 242, 173, 0.08);
}

/* =========================================================
   FEATURED CATEGORIES
   ========================================================= */

.discover-featured-section,
.discover-results-section {
  display: grid;
  gap: 20px;
}

.discover-section-heading,
.discover-results-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-inline: 4px;
}

.discover-section-heading > div,
.discover-results-header > div {
  max-width: 780px;
}

.discover-section-heading h2,
.discover-results-header h2 {
  margin-bottom: 9px;
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.discover-section-heading p {
  margin: 0;
}

.discover-featured-grid {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
  gap: clamp(15px, 2vw, 21px);
}

.discover-feature-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 150px;
  padding: clamp(20px, 3vw, 27px);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.discover-feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--discover-border-strong);
  box-shadow:
    0 28px 62px rgba(0, 0, 0, 0.34),
    0 0 30px rgba(65, 239, 255, 0.08);
}

.discover-feature-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(65, 239, 255, 0.23);
  border-radius: 17px;
  color: var(--discover-cyan);
  font-size: 1.34rem;
  background:
    linear-gradient(
      145deg,
      rgba(65, 239, 255, 0.11),
      rgba(149, 103, 255, 0.07)
    );
}

.discover-feature-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.discover-feature-copy strong,
.discover-feature-copy small {
  display: block;
}

.discover-feature-copy strong {
  margin-bottom: 7px;
  color: var(--discover-text);
  font-size: 1.02rem;
}

.discover-feature-copy small {
  color: var(--discover-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.discover-feature-arrow {
  position: relative;
  z-index: 1;
  color: var(--discover-cyan);
  font-size: 1.15rem;
  transition: transform 180ms ease;
}

.discover-feature-card:hover .discover-feature-arrow {
  transform: translateX(5px);
}

/* =========================================================
   RESULTS
   ========================================================= */

.discover-results {
  display: grid;
  gap: 20px;
  min-height: 320px;
}

.discover-results[aria-busy="true"] {
  opacity: 0.72;
  pointer-events: none;
}

.discover-results-grid,
.discover-member-grid,
.discover-post-grid,
.discover-news-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: clamp(15px, 2vw, 21px);
}

.discover-result-section {
  display: grid;
  gap: 16px;
}

.discover-result-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.discover-result-section-header h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
}

.discover-member-card,
.discover-post-card,
.discover-news-card {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 3vw, 28px);
  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.discover-member-card:hover,
.discover-post-card:hover,
.discover-news-card:hover {
  transform: translateY(-4px);
  border-color: var(--discover-border-strong);
  box-shadow:
    0 27px 60px rgba(0, 0, 0, 0.32),
    0 0 28px rgba(65, 239, 255, 0.07);
}

/* =========================================================
   MEMBER RESULTS
   ========================================================= */

.discover-member-card {
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

.discover-member-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.discover-member-avatar {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(65, 239, 255, 0.24);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.04);
}

.discover-member-identity {
  min-width: 0;
}

.discover-member-identity strong,
.discover-member-identity span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-member-identity strong {
  color: var(--discover-text);
  font-size: 1rem;
}

.discover-member-identity span {
  margin-top: 3px;
  color: var(--discover-muted);
  font-size: 0.78rem;
}

.discover-member-category {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  margin-bottom: 13px;
  padding: 6px 10px;
  border: 1px solid rgba(65, 239, 255, 0.15);
  border-radius: 999px;
  color: var(--discover-cyan);
  font-size: 0.69rem;
  font-weight: 800;
  background: rgba(65, 239, 255, 0.055);
}

.discover-member-card p {
  margin: 0 0 20px;
}

.discover-member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: auto;
}

.discover-member-actions .button {
  flex: 1 1 120px;
  min-height: 43px;
  border-radius: 13px;
  font-size: 0.79rem;
  font-weight: 800;
}

/* =========================================================
   POST RESULTS
   ========================================================= */

.discover-post-card {
  display: flex;
  flex-direction: column;
  min-height: 250px;
}

.discover-post-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.discover-post-author img {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(65, 239, 255, 0.2);
  border-radius: 50%;
  object-fit: cover;
}

.discover-post-author-copy {
  min-width: 0;
}

.discover-post-author-copy strong,
.discover-post-author-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-post-author-copy strong {
  color: var(--discover-text);
  font-size: 0.92rem;
}

.discover-post-author-copy span {
  margin-top: 3px;
  color: var(--discover-muted);
  font-size: 0.73rem;
}

.discover-post-text {
  margin: 0 0 18px;
  color: var(--discover-text-soft);
  line-height: 1.67;
}

.discover-post-media {
  width: 100%;
  max-height: 320px;
  margin-bottom: 18px;
  border-radius: 16px;
  object-fit: cover;
}

.discover-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: auto;
  color: var(--discover-muted);
  font-size: 0.72rem;
}

/* =========================================================
   NEWS RESULTS
   ========================================================= */

.discover-news-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 240px;
}

.discover-news-source {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 11px;
  color: var(--discover-cyan);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.discover-news-card h3 {
  margin-bottom: 10px;
  font-size: clamp(1.15rem, 2vw, 1.52rem);
  line-height: 1.2;
}

.discover-news-card p {
  margin: 0 0 19px;
}

.discover-news-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: auto;
  color: var(--discover-cyan);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

.discover-news-card a::after {
  content: "→";
  transition: transform 180ms ease;
}

.discover-news-card a:hover::after {
  transform: translateX(4px);
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.discover-empty-state {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 390px;
  padding: clamp(38px, 6vw, 76px) 22px;
  text-align: center;
}

.discover-empty-state h2 {
  margin-bottom: 10px;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.discover-empty-state p {
  max-width: 610px;
  margin: 0;
}

.discover-empty-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  margin-bottom: 22px;
  border: 1px solid rgba(65, 239, 255, 0.24);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(65, 239, 255, 0.13),
      transparent 68%
    ),
    rgba(5, 13, 30, 0.8);
  box-shadow:
    0 0 36px rgba(65, 239, 255, 0.12),
    0 0 72px rgba(149, 103, 255, 0.08);
}

.discover-empty-visual::before,
.discover-empty-visual::after {
  position: absolute;
  border: 1px solid rgba(65, 239, 255, 0.12);
  border-radius: 50%;
  content: "";
}

.discover-empty-visual::before {
  inset: -13px;
}

.discover-empty-visual::after {
  inset: -26px;
  border-color: rgba(149, 103, 255, 0.1);
}

.discover-empty-visual img {
  position: relative;
  z-index: 1;
  width: 70%;
  height: 70%;
  object-fit: contain;
  filter:
    drop-shadow(
      0 0 18px rgba(65, 239, 255, 0.46)
    );
}

/* =========================================================
   LOADING STATE
   ========================================================= */

.discover-loading-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 18px;
}

.discover-loading-card {
  min-height: 230px;
  border: 1px solid var(--discover-border);
  border-radius: 24px;
  background:
    linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.025) 8%,
      rgba(65, 239, 255, 0.08) 18%,
      rgba(255, 255, 255, 0.025) 33%
    );
  background-size: 220% 100%;
  animation:
    discoverLoadingShimmer 1.5s linear infinite;
}

/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-theme="light"] .discover-page {
  --discover-text: #10213d;
  --discover-text-soft: rgba(29, 51, 84, 0.82);
  --discover-muted: rgba(36, 59, 91, 0.68);
  --discover-border: rgba(44, 105, 164, 0.14);
  --discover-border-strong: rgba(44, 105, 164, 0.28);
  --discover-shadow:
    0 24px 62px rgba(45, 77, 116, 0.14),
    0 0 30px rgba(65, 239, 255, 0.04);
}

html[data-theme="light"] .discover-page > .content-card,
html[data-theme="light"] .discover-page .discover-feature-card,
html[data-theme="light"] .discover-page .discover-empty-state,
html[data-theme="light"] .discover-page .discover-member-card,
html[data-theme="light"] .discover-page .discover-post-card,
html[data-theme="light"] .discover-page .discover-news-card {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(237, 245, 255, 0.96)
    );
}

html[data-theme="light"] .discover-search-form input {
  color: #10213d;
  background: rgba(239, 247, 255, 0.96);
}

html[data-theme="light"] .discover-search-form input::placeholder {
  color: rgba(36, 59, 91, 0.4);
}

html[data-theme="light"] .discover-category-button.is-active,
html[data-theme="light"] .discover-category-button[aria-pressed="true"] {
  color: #062038;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1040px) {
  .discover-hero {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(220px, 0.68fr);
  }

  .discover-logo-orbit {
    width: min(29vw, 285px);
  }

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

@media (max-width: 820px) {
  .discover-page {
    gap: 18px;
    padding: 6px;
  }

  .discover-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: auto;
    padding: 38px 26px;
    text-align: center;
  }

  .discover-hero-content {
    align-items: center;
    max-width: 760px;
    margin-inline: auto;
  }

  .discover-hero h1 {
    align-items: center;
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
  }

  .discover-hero h1 span {
    text-align: center;
  }

  .discover-hero p {
    text-align: center;
  }

  .discover-hero-highlights {
    justify-content: center;
  }

  .discover-hero-visual {
    min-height: 250px;
  }

  .discover-logo-orbit {
    width: min(62vw, 275px);
  }

  .discover-results-grid,
  .discover-member-grid,
  .discover-post-grid,
  .discover-news-grid,
  .discover-loading-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 660px) {
  .discover-hero {
    padding: 30px 20px;
  }

  .discover-hero h1 {
    font-size: clamp(2.05rem, 10.5vw, 3.05rem);
    line-height: 1;
  }

  .discover-search-card {
    padding: 22px 17px;
  }

  .discover-search-form {
    grid-template-columns: 1fr;
  }

  .discover-search-form .button {
    width: 100%;
  }

  .discover-search-icon {
    top: 18px;
  }

  .discover-search-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .discover-result-count {
    margin-left: 0;
  }

  .discover-featured-grid {
    grid-template-columns: 1fr;
  }

  .discover-feature-card {
    min-height: 136px;
  }
}

@media (max-width: 440px) {
  .discover-hero {
    padding: 27px 17px;
  }

  .discover-hero h1 {
    font-size: clamp(1.9rem, 9.8vw, 2.55rem);
  }

  .discover-hero-visual {
    min-height: 210px;
  }

  .discover-logo-orbit {
    width: min(70vw, 220px);
    min-width: 180px;
  }

  .discover-feature-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .discover-feature-arrow {
    display: none;
  }

  .discover-member-actions {
    flex-direction: column;
  }

  .discover-member-actions .button {
    width: 100%;
  }
}

/* =========================================================
   ACCESSIBILITY + MOTION
   ========================================================= */

.discover-page button:focus-visible,
.discover-page a:focus-visible,
.discover-page input:focus-visible {
  outline: 3px solid rgba(65, 239, 255, 0.86);
  outline-offset: 3px;
}

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

@keyframes discoverOrbitSpin {
  from {
    transform: rotate(0deg);
  }

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

@keyframes discoverOrbitSpinReverse {
  from {
    transform: rotate(360deg);
  }

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

@keyframes discoverLogoFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.02);
  }
}

@keyframes discoverLoadingShimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -20% 0;
  }
}
/* =========================================================
   SMOOTH JAZZ CONNECT — HOME PAGE
   12/10 PREMIUM COMMUNITY EXPERIENCE
   Append to the bottom of styles.css
   ========================================================= */

.home-page {
  --home-cyan: #42efff;
  --home-blue: #4f8cff;
  --home-violet: #9567ff;
  --home-pink: #ff58d8;
  --home-green: #5df2ad;
  --home-gold: #ffd56f;

  --home-text: #f8fbff;
  --home-text-soft: rgba(235, 243, 255, 0.84);
  --home-muted: rgba(211, 225, 248, 0.66);

  --home-surface: rgba(8, 17, 37, 0.92);
  --home-surface-soft: rgba(14, 28, 56, 0.76);
  --home-surface-strong: rgba(5, 12, 28, 0.98);

  --home-border: rgba(110, 222, 255, 0.15);
  --home-border-strong: rgba(110, 222, 255, 0.34);

  --home-shadow:
    0 30px 86px rgba(0, 0, 0, 0.4),
    0 0 54px rgba(66, 239, 255, 0.055);

  position: relative;
  display: grid;
  gap: clamp(20px, 2.8vw, 34px);
  width: min(100%, 1320px);
  margin-inline: auto;
  padding: clamp(8px, 1.5vw, 18px);
  isolation: isolate;
}

.home-page::before,
.home-page::after {
  position: fixed;
  z-index: -2;
  width: min(54vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  filter: blur(110px);
  opacity: 0.13;
}

.home-page::before {
  top: 4%;
  left: 28%;
  background:
    radial-gradient(
      circle,
      rgba(66, 239, 255, 0.68),
      rgba(79, 140, 255, 0.2) 44%,
      transparent 72%
    );
}

.home-page::after {
  right: -12%;
  bottom: -14%;
  background:
    radial-gradient(
      circle,
      rgba(149, 103, 255, 0.58),
      rgba(255, 88, 216, 0.16) 46%,
      transparent 72%
    );
}

.home-page > .content-card,
.home-page .home-feed-list > .content-card,
.home-page .feed-card,
.home-page .post-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--home-border);
  border-radius: clamp(22px, 2.6vw, 34px);
  background:
    linear-gradient(
      145deg,
      rgba(14, 28, 56, 0.95),
      rgba(5, 12, 28, 0.97)
    );
  box-shadow: var(--home-shadow);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}

.home-page > .content-card::before,
.home-page .home-feed-list > .content-card::before,
.home-page .feed-card::before,
.home-page .post-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.07),
      transparent 26%,
      transparent 72%,
      rgba(66, 239, 255, 0.045)
    );
}

.home-page h1,
.home-page h2,
.home-page h3 {
  margin-top: 0;
  color: var(--home-text);
  text-wrap: balance;
}

.home-page p {
  color: var(--home-muted);
  line-height: 1.72;
}

.home-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0 0 10px;
  color: var(--home-cyan);
  font-size: clamp(0.69rem, 0.8vw, 0.78rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.home-page .eyebrow::before {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--home-cyan),
      var(--home-violet)
    );
  content: "";
  box-shadow: 0 0 14px rgba(66, 239, 255, 0.68);
}

/* =========================================================
HOME HERO — COMPACT PREMIUM VERSION
Smaller card, logo, title, spacing, and visual effects
========================================================= */

.home-hero {
position: relative;
display: grid;
place-items: center;
min-height: clamp(440px, 58vh, 590px);
padding:
clamp(32px, 5vw, 58px)
clamp(20px, 5vw, 60px);
overflow: hidden;
text-align: center;
background:
radial-gradient(
circle at 50% 0%,
rgba(66, 239, 255, 0.13),
transparent 30%
),
radial-gradient(
circle at 88% 20%,
rgba(149, 103, 255, 0.18),
transparent 32%
),
radial-gradient(
circle at 10% 94%,
rgba(66, 239, 255, 0.09),
transparent 34%
),
linear-gradient(
145deg,
rgba(14, 30, 63, 0.99),
rgba(5, 12, 29, 0.98)
) !important;
}

.home-hero-content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
width: min(100%, 800px);
margin-inline: auto;
}

.home-hero-brand {
display: grid;
place-items: center;
width: clamp(92px, 10vw, 118px);
height: clamp(92px, 10vw, 118px);
margin-bottom: clamp(16px, 2vw, 21px);
border: 1px solid rgba(66, 239, 255, 0.26);
border-radius: 50%;
background:
radial-gradient(
circle at 35% 25%,
rgba(255, 255, 255, 0.13),
transparent 28%
),
linear-gradient(
145deg,
rgba(14, 29, 58, 0.92),
rgba(4, 10, 25, 0.99)
);
box-shadow:
inset 0 0 30px rgba(66, 239, 255, 0.07),
0 0 25px rgba(66, 239, 255, 0.14),
0 0 54px rgba(149, 103, 255, 0.09);
}

.home-hero-logo {
width: 72%;
height: 72%;
object-fit: contain;
filter:
drop-shadow(
0 0 16px rgba(66, 239, 255, 0.42)
);
animation:
homeLogoFloat 5s ease-in-out infinite;
}

.home-hero .eyebrow {
justify-content: center;
margin-bottom: 13px;
text-align: center;
}

.home-hero h1 {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 760px;
margin: 0 0 17px;
font-size: clamp(2rem, 4.4vw, 3.75rem);
font-weight: 950;
line-height: 1;
letter-spacing: -0.052em;
text-align: center;
}

.home-hero h1 span {
display: block;
width: 100%;
text-align: center;
}

.home-hero h1 span:last-child {
margin-top: 5px;
background:
linear-gradient(
100deg,
var(--home-cyan) 0%,
#8fc8ff 34%,
var(--home-violet) 68%,
var(--home-pink) 100%
);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
filter:
drop-shadow(
0 0 14px rgba(66, 239, 255, 0.15)
);
}

.home-hero-lead {
max-width: 700px;
margin: 0;
color: var(--home-text-soft) !important;
font-size: clamp(0.94rem, 1.15vw, 1.08rem);
line-height: 1.68 !important;
text-align: center;
}

.home-hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 23px;
}

.home-hero-actions .button {
min-height: 46px;
padding-inline: 19px;
border-radius: 14px;
font-size: 0.82rem;
font-weight: 900;
}

.home-hero-actions .button-primary {
box-shadow:
0 12px 28px rgba(65, 103, 255, 0.22),
0 0 20px rgba(66, 239, 255, 0.08);
}

.home-hero-community {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 7px;
margin-top: 20px;
}

.home-hero-community span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 6px 10px;
border: 1px solid rgba(110, 222, 255, 0.14);
border-radius: 999px;
color: var(--home-text-soft);
font-size: 0.7rem;
font-weight: 800;
background:
linear-gradient(
145deg,
rgba(66, 239, 255, 0.06),
rgba(149, 103, 255, 0.04)
);
}

.home-hero-glow {
position: absolute;
inset: 0;
z-index: 1;
display: grid;
place-items: center;
overflow: hidden;
pointer-events: none;
}

.home-hero-ring {
position: absolute;
border: 1px solid rgba(66, 239, 255, 0.08);
border-radius: 50%;
opacity: 0.8;
}

.home-hero-ring-one {
width: min(58vw, 590px);
aspect-ratio: 1;
animation: homeOrbitSpin 34s linear infinite;
}

.home-hero-ring-two {
width: min(45vw, 460px);
aspect-ratio: 1;
border-color: rgba(149, 103, 255, 0.09);
animation: homeOrbitSpinReverse 28s linear infinite;
}

.home-hero-ring-three {
width: min(32vw, 320px);
aspect-ratio: 1;
border-color: rgba(255, 88, 216, 0.075);
animation: homeOrbitSpin 22s linear infinite;
}

/* =========================================================
COMPACT TABLET
========================================================= */

@media (max-width: 820px) {
.home-hero {
min-height: auto;
padding:
clamp(30px, 7vw, 44px)
clamp(18px, 5vw, 30px);
}

.home-hero-content {
width: min(100%, 660px);
}

.home-hero-brand {
width: 98px;
height: 98px;
margin-bottom: 17px;
}

.home-hero h1 {
max-width: 620px;
font-size: clamp(2rem, 7.5vw, 3.15rem);
line-height: 1.01;
}

.home-hero-lead {
max-width: 600px;
font-size: 0.96rem;
line-height: 1.62 !important;
}

.home-hero-ring-one {
width: min(78vw, 510px);
}

.home-hero-ring-two {
width: min(62vw, 400px);
}

.home-hero-ring-three {
width: min(45vw, 285px);
}
}

/* =========================================================
COMPACT MOBILE
========================================================= */

@media (max-width: 560px) {
.home-hero {
padding: 28px 16px;
border-radius: 24px;
}

.home-hero-brand {
width: 86px;
height: 86px;
margin-bottom: 15px;
}

.home-hero .eyebrow {
max-width: 100%;
margin-bottom: 11px;
font-size: 0.65rem;
line-height: 1.35;
letter-spacing: 0.13em;
}

.home-hero h1 {
max-width: 430px;
margin-bottom: 14px;
font-size: clamp(1.75rem, 8.8vw, 2.45rem);
line-height: 1.02;
letter-spacing: -0.045em;
}

.home-hero h1 span:last-child {
margin-top: 4px;
}

.home-hero-lead {
max-width: 440px;
font-size: 0.9rem;
line-height: 1.58 !important;
}

.home-hero-actions {
display: grid;
grid-template-columns: 1fr;
width: min(100%, 360px);
margin-top: 20px;
}

.home-hero-actions .button {
width: 100%;
min-height: 44px;
padding-inline: 16px;
font-size: 0.78rem;
}

.home-hero-community {
gap: 6px;
margin-top: 17px;
}

.home-hero-community span {
min-height: 28px;
padding: 5px 9px;
font-size: 0.66rem;
}

.home-hero-ring-one {
width: 96vw;
}

.home-hero-ring-two {
width: 74vw;
}

.home-hero-ring-three {
width: 52vw;
}
}

/* =========================================================
EXTRA-SMALL MOBILE
========================================================= */

@media (max-width: 380px) {
.home-hero {
padding: 25px 14px;
}

.home-hero-brand {
width: 78px;
height: 78px;
}

.home-hero h1 {
font-size: clamp(1.58rem, 8.5vw, 2rem);
}

.home-hero-lead {
font-size: 0.86rem;
}

.home-hero-community span {
font-size: 0.63rem;
}
}


/* =========================================================
   HOME COMPOSER
   ========================================================= */

.home-composer {
  padding: clamp(28px, 4vw, 46px);
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(149, 103, 255, 0.15),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(14, 28, 56, 0.96),
      rgba(5, 12, 28, 0.98)
    ) !important;
}

.home-composer-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(22px, 4vw, 38px);
  align-items: center;
  width: min(100%, 920px);
  margin-inline: auto;
}

.home-composer-icon {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(66, 239, 255, 0.24);
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.1),
      rgba(149, 103, 255, 0.07)
    );
  box-shadow:
    0 0 30px rgba(66, 239, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.home-composer-icon img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  filter:
    drop-shadow(
      0 0 16px rgba(66, 239, 255, 0.4)
    );
}

.home-composer-content {
  min-width: 0;
}

.home-composer h2 {
  margin-bottom: 10px;
  font-size: clamp(1.85rem, 3.3vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.home-composer p {
  max-width: 720px;
  margin: 0 0 22px;
}

.home-composer .button {
  min-height: 48px;
  padding-inline: 22px;
  border-radius: 15px;
  font-weight: 900;
}

.home-composer .button span:last-child {
  margin-left: 6px;
}

/* =========================================================
   FEED HEADER
   ========================================================= */

.home-feed-section {
  display: grid;
  gap: 20px;
}

.home-feed-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(20px, 4vw, 40px);
  padding-inline: 4px;
}

.home-feed-heading > div:first-child {
  max-width: 790px;
}

.home-feed-heading h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
  font-size: clamp(1.85rem, 3.3vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -0.048em;
}

.home-feed-heading p {
  max-width: 720px;
  margin: 0;
}

.home-feed-controls {
  flex: 0 0 auto;
}

.home-feed-controls select {
  min-width: 190px;
  min-height: 48px;
  padding: 11px 42px 11px 15px;
  border: 1px solid rgba(110, 222, 255, 0.17);
  border-radius: 15px;
  color: var(--home-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  color-scheme: dark;
  background:
    linear-gradient(
      145deg,
      rgba(8, 19, 40, 0.96),
      rgba(4, 11, 26, 0.98)
    );
  outline: none;
  cursor: pointer;
}

.home-feed-controls select:focus {
  border-color: rgba(66, 239, 255, 0.5);
  box-shadow:
    0 0 0 4px rgba(66, 239, 255, 0.075),
    0 0 24px rgba(66, 239, 255, 0.07);
}

.home-feed-status {
  padding: 12px 14px;
  border: 1px solid rgba(110, 222, 255, 0.14);
  border-radius: 14px;
  color: var(--home-muted);
  font-size: 0.82rem;
  background: rgba(6, 15, 33, 0.76);
}

.home-feed-status[data-type="error"] {
  border-color: rgba(255, 107, 122, 0.3);
  color: #ffd5da;
  background: rgba(255, 107, 122, 0.08);
}

.home-feed-status[data-type="success"] {
  border-color: rgba(93, 242, 173, 0.28);
  color: #caffdf;
  background: rgba(93, 242, 173, 0.08);
}

/* =========================================================
   FEED LIST
   ========================================================= */

.home-feed-list {
  display: grid;
  gap: 20px;
  width: 100%;
}

.home-feed-list > * {
  width: 100%;
}

.home-feed-list .feed-card,
.home-feed-list .post-card,
.home-feed-list > article {
  padding: clamp(20px, 3vw, 30px);
}

.home-feed-list .post-header,
.home-feed-list .feed-author,
.home-feed-list .post-author {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}

.home-feed-list .post-avatar,
.home-feed-list .feed-avatar,
.home-feed-list .author-avatar {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(66, 239, 255, 0.22);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.04);
}

.home-feed-list .post-author-copy,
.home-feed-list .feed-author-copy {
  min-width: 0;
}

.home-feed-list .post-author-copy strong,
.home-feed-list .post-author-copy span,
.home-feed-list .feed-author-copy strong,
.home-feed-list .feed-author-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-feed-list .post-author-copy strong,
.home-feed-list .feed-author-copy strong {
  color: var(--home-text);
  font-size: 0.94rem;
}

.home-feed-list .post-author-copy span,
.home-feed-list .feed-author-copy span {
  margin-top: 3px;
  color: var(--home-muted);
  font-size: 0.74rem;
}

.home-feed-list .post-text,
.home-feed-list .feed-text,
.home-feed-list .post-content {
  color: var(--home-text-soft);
  font-size: clamp(0.96rem, 1.15vw, 1.04rem);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.home-feed-list .post-media,
.home-feed-list .feed-media {
  width: 100%;
  max-height: 620px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(110, 222, 255, 0.12);
  border-radius: 20px;
  object-fit: cover;
  background: rgba(2, 8, 20, 0.72);
}

.home-feed-list .post-actions,
.home-feed-list .feed-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(110, 222, 255, 0.1);
}

.home-feed-list .post-action,
.home-feed-list .feed-action,
.home-feed-list .action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(110, 222, 255, 0.13);
  border-radius: 12px;
  color: var(--home-muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.05),
      rgba(149, 103, 255, 0.035)
    );
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease;
}

.home-feed-list .post-action:hover,
.home-feed-list .feed-action:hover,
.home-feed-list .action-button:hover {
  transform: translateY(-2px);
  border-color: rgba(66, 239, 255, 0.34);
  color: var(--home-text);
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.1),
      rgba(149, 103, 255, 0.07)
    );
}

/* =========================================================
   FEED LOADING
   ========================================================= */

.home-feed-loading {
  display: grid;
  gap: 14px;
  min-height: 230px;
  padding: clamp(20px, 3vw, 28px);
}

.home-feed-loading-header {
  display: flex;
  align-items: center;
  gap: 13px;
}

.home-feed-loading-header > div {
  display: grid;
  flex: 1;
  gap: 8px;
}

.home-loading-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.home-loading-avatar,
.home-loading-line {
  display: block;
  background:
    linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.035) 8%,
      rgba(66, 239, 255, 0.11) 18%,
      rgba(255, 255, 255, 0.035) 33%
    );
  background-size: 220% 100%;
  animation:
    homeLoadingShimmer 1.5s linear infinite;
}

.home-loading-line {
  width: 100%;
  height: 14px;
  border-radius: 999px;
}

.home-loading-line-short {
  width: 38%;
}

.home-loading-line-medium {
  width: 70%;
}

.home-loading-line-mini {
  width: 24%;
  height: 10px;
}

/* =========================================================
   COMMUNITY CTA
   ========================================================= */

.home-community-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 56px);
  padding: clamp(30px, 5vw, 56px);
  background:
    radial-gradient(
      circle at 88% 16%,
      rgba(255, 88, 216, 0.15),
      transparent 36%
    ),
    radial-gradient(
      circle at 10% 100%,
      rgba(66, 239, 255, 0.13),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(12, 31, 66, 0.98),
      rgba(13, 16, 44, 0.97)
    ) !important;
}

.home-community-cta > div {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.home-community-cta h2 {
  margin-bottom: 10px;
  font-size: clamp(1.85rem, 3.3vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.home-community-cta p {
  margin: 0;
}

.home-community-cta .button {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 50px;
  padding-inline: 22px;
  border-radius: 15px;
  font-weight: 900;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.home-feed-list .empty-state {
  display: grid;
  place-items: center;
  min-height: 340px;
  padding: clamp(34px, 6vw, 70px) 22px;
  text-align: center;
}

.home-feed-list .empty-state h2,
.home-feed-list .empty-state h3 {
  margin-bottom: 10px;
}

.home-feed-list .empty-state p {
  max-width: 590px;
  margin: 0;
}

/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-theme="light"] .home-page {
  --home-text: #10213d;
  --home-text-soft: rgba(29, 51, 84, 0.82);
  --home-muted: rgba(36, 59, 91, 0.68);
  --home-border: rgba(44, 105, 164, 0.14);
  --home-border-strong: rgba(44, 105, 164, 0.28);
  --home-shadow:
    0 24px 62px rgba(45, 77, 116, 0.14),
    0 0 30px rgba(66, 239, 255, 0.04);
}

html[data-theme="light"] .home-page > .content-card,
html[data-theme="light"] .home-page .home-feed-list > .content-card,
html[data-theme="light"] .home-page .feed-card,
html[data-theme="light"] .home-page .post-card {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(237, 245, 255, 0.96)
    );
}

html[data-theme="light"] .home-feed-controls select {
  color: #10213d;
  color-scheme: light;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(237, 245, 255, 0.96)
    );
}

html[data-theme="light"] .home-feed-list .post-text,
html[data-theme="light"] .home-feed-list .feed-text,
html[data-theme="light"] .home-feed-list .post-content {
  color: rgba(29, 51, 84, 0.86);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  .home-hero {
    min-height: auto;
  }

  .home-hero h1 {
    max-width: 760px;
    font-size: clamp(2.5rem, 8vw, 4.8rem);
  }

  .home-feed-heading {
    align-items: flex-start;
  }

  .home-community-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  .home-page {
    gap: 18px;
    padding: 6px;
  }

  .home-hero {
    padding: 38px 22px;
  }

  .home-hero-brand {
    width: 126px;
    height: 126px;
  }

  .home-hero h1 {
    font-size: clamp(2.2rem, 11vw, 3.5rem);
    line-height: 0.98;
  }

  .home-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 430px);
  }

  .home-hero-actions .button {
    width: 100%;
  }

  .home-hero-ring-one {
    width: 90vw;
  }

  .home-hero-ring-two {
    width: 72vw;
  }

  .home-hero-ring-three {
    width: 54vw;
  }

  .home-composer {
    padding: 24px 18px;
  }

  .home-composer-layout {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .home-composer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .home-composer p {
    text-align: center;
  }

  .home-feed-heading {
    flex-direction: column;
  }

  .home-feed-controls,
  .home-feed-controls select {
    width: 100%;
  }

  .home-community-cta {
    padding: 28px 20px;
  }

  .home-community-cta .button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .home-hero {
    padding: 32px 17px;
  }

  .home-hero-brand {
    width: 108px;
    height: 108px;
    margin-bottom: 20px;
  }

  .home-hero h1 {
    font-size: clamp(2rem, 10.5vw, 2.85rem);
    letter-spacing: -0.052em;
  }

  .home-hero-lead {
    font-size: 0.98rem;
  }

  .home-hero-community {
    gap: 7px;
  }

  .home-hero-community span {
    min-height: 32px;
    padding-inline: 10px;
    font-size: 0.71rem;
  }

  .home-composer-icon {
    width: 96px;
    height: 96px;
  }

  .home-feed-list .post-actions,
  .home-feed-list .feed-actions {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .home-feed-list .post-action,
  .home-feed-list .feed-action,
  .home-feed-list .action-button {
    width: 100%;
  }
}

/* =========================================================
   ACCESSIBILITY + MOTION
   ========================================================= */

.home-page button:focus-visible,
.home-page a:focus-visible,
.home-page select:focus-visible {
  outline: 3px solid rgba(66, 239, 255, 0.86);
  outline-offset: 3px;
}

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

@keyframes homeLogoFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.02);
  }
}

@keyframes homeOrbitSpin {
  from {
    transform: rotate(0deg);
  }

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

@keyframes homeOrbitSpinReverse {
  from {
    transform: rotate(360deg);
  }

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

@keyframes homeLoadingShimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -20% 0;
  }
}
/* =========================================================
   SMOOTH JAZZ CONNECT — NOTIFICATIONS PAGE
   12/10 PREMIUM NOTIFICATION COMMAND CENTER
   Append to the bottom of styles.css
   ========================================================= */

.notifications-page {
  --notifications-cyan: #42efff;
  --notifications-blue: #4f8cff;
  --notifications-violet: #9567ff;
  --notifications-pink: #ff58d8;
  --notifications-green: #5df2ad;
  --notifications-gold: #ffd56f;
  --notifications-red: #ff7283;

  --notifications-text: #f8fbff;
  --notifications-text-soft: rgba(235, 243, 255, 0.84);
  --notifications-muted: rgba(211, 225, 248, 0.66);

  --notifications-surface: rgba(8, 17, 37, 0.92);
  --notifications-surface-soft: rgba(14, 28, 56, 0.76);
  --notifications-surface-strong: rgba(5, 12, 28, 0.98);

  --notifications-border: rgba(110, 222, 255, 0.15);
  --notifications-border-strong: rgba(110, 222, 255, 0.34);

  --notifications-shadow:
    0 30px 86px rgba(0, 0, 0, 0.4),
    0 0 54px rgba(66, 239, 255, 0.055);

  position: relative;
  display: grid;
  gap: clamp(20px, 2.8vw, 34px);
  width: min(100%, 1280px);
  margin-inline: auto;
  padding: clamp(8px, 1.5vw, 18px);
  isolation: isolate;
}

.notifications-page::before,
.notifications-page::after {
  position: fixed;
  z-index: -2;
  width: min(54vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  filter: blur(110px);
  opacity: 0.13;
}

.notifications-page::before {
  top: 5%;
  left: 30%;
  background:
    radial-gradient(
      circle,
      rgba(66, 239, 255, 0.68),
      rgba(79, 140, 255, 0.2) 44%,
      transparent 72%
    );
}

.notifications-page::after {
  right: -12%;
  bottom: -14%;
  background:
    radial-gradient(
      circle,
      rgba(149, 103, 255, 0.58),
      rgba(255, 88, 216, 0.16) 46%,
      transparent 72%
    );
}

.notifications-page > .content-card,
.notifications-page .notification-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--notifications-border);
  border-radius: clamp(22px, 2.6vw, 34px);
  background:
    linear-gradient(
      145deg,
      rgba(14, 28, 56, 0.95),
      rgba(5, 12, 28, 0.97)
    );
  box-shadow: var(--notifications-shadow);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}

.notifications-page > .content-card::before,
.notifications-page .notification-item::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.07),
      transparent 26%,
      transparent 72%,
      rgba(66, 239, 255, 0.045)
    );
}

.notifications-page h1,
.notifications-page h2,
.notifications-page h3 {
  margin-top: 0;
  color: var(--notifications-text);
  text-wrap: balance;
}

.notifications-page p {
  color: var(--notifications-muted);
  line-height: 1.72;
}

.notifications-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0 0 10px;
  color: var(--notifications-cyan);
  font-size: clamp(0.69rem, 0.8vw, 0.78rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.notifications-page .eyebrow::before {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--notifications-cyan),
      var(--notifications-violet)
    );
  content: "";
  box-shadow:
    0 0 14px rgba(66, 239, 255, 0.68);
}

/* =========================================================
   HERO
   ========================================================= */

.notifications-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(230px, 0.85fr);
  align-items: center;
  gap: clamp(28px, 5vw, 60px);
  min-height: clamp(390px, 49vh, 540px);
  padding:
    clamp(34px, 5vw, 58px)
    clamp(26px, 5vw, 62px);
  background:
    radial-gradient(
      circle at 86% 28%,
      rgba(149, 103, 255, 0.22),
      transparent 35%
    ),
    radial-gradient(
      circle at 12% 92%,
      rgba(66, 239, 255, 0.12),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(14, 30, 63, 0.99),
      rgba(5, 12, 29, 0.98)
    ) !important;
}

.notifications-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 720px;
}

.notifications-hero h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 670px;
  margin: 0 0 20px;
  font-size: clamp(2.3rem, 4.5vw, 4.2rem);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.notifications-hero h1 span {
  display: block;
  margin-top: 6px;
  background:
    linear-gradient(
      100deg,
      var(--notifications-cyan) 0%,
      #8fc8ff 34%,
      var(--notifications-violet) 68%,
      var(--notifications-pink) 100%
    );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter:
    drop-shadow(
      0 0 16px rgba(66, 239, 255, 0.18)
    );
}

.notifications-hero p {
  max-width: 650px;
  margin: 0;
  color: var(--notifications-text-soft);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
}

.notifications-hero-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 280px;
}

.notifications-bell-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: min(26vw, 300px);
  min-width: 220px;
  aspect-ratio: 1;
}

.notifications-bell-core {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 58%;
  aspect-ratio: 1;
  border: 1px solid rgba(66, 239, 255, 0.3);
  border-radius: 50%;
  color: var(--notifications-cyan);
  font-size: clamp(3rem, 6vw, 4.8rem);
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.15),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(14, 29, 58, 0.94),
      rgba(4, 10, 25, 0.99)
    );
  box-shadow:
    inset 0 0 45px rgba(66, 239, 255, 0.08),
    0 0 36px rgba(66, 239, 255, 0.2),
    0 0 82px rgba(149, 103, 255, 0.14);
  animation:
    notificationsBellFloat 5s ease-in-out infinite;
}

.notifications-bell-core span {
  filter:
    drop-shadow(
      0 0 18px rgba(66, 239, 255, 0.52)
    );
}

.notifications-orbit {
  position: absolute;
  border: 1px solid rgba(66, 239, 255, 0.2);
  border-radius: 50%;
}

.notifications-orbit::before {
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--notifications-cyan);
  content: "";
  box-shadow:
    0 0 10px var(--notifications-cyan),
    0 0 24px rgba(66, 239, 255, 0.8);
}

.notifications-orbit-one {
  inset: 5%;
  animation:
    notificationsOrbitSpin 14s linear infinite;
}

.notifications-orbit-two {
  inset: 19%;
  border-color: rgba(149, 103, 255, 0.24);
  animation:
    notificationsOrbitSpinReverse 10s linear infinite;
}

.notifications-orbit-two::before {
  background: var(--notifications-violet);
  box-shadow:
    0 0 10px var(--notifications-violet),
    0 0 24px rgba(149, 103, 255, 0.76);
}

.notifications-pulse-dot {
  position: absolute;
  top: 23%;
  right: 22%;
  z-index: 4;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(5, 12, 28, 0.94);
  border-radius: 50%;
  background: var(--notifications-pink);
  box-shadow:
    0 0 0 0 rgba(255, 88, 216, 0.45),
    0 0 20px rgba(255, 88, 216, 0.72);
  animation:
    notificationsPulse 2s ease-out infinite;
}

/* =========================================================
   COMMAND CARD
   ========================================================= */

.notifications-command-card {
  padding: clamp(24px, 4vw, 44px);
}

.notifications-command-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(22px, 4vw, 44px);
  margin-bottom: 22px;
}

.notifications-command-header > div:first-child {
  max-width: 760px;
}

.notifications-command-header h2 {
  margin-bottom: 9px;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.notifications-command-header p {
  margin: 0;
}

.notifications-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.notifications-page .tool-button,
.notifications-page .icon-button,
.notifications-page .notification-action-button {
  font: inherit;
}

.notifications-mark-all-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid rgba(110, 222, 255, 0.17);
  border-radius: 14px;
  color: var(--notifications-text-soft);
  font-size: 0.8rem;
  font-weight: 850;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.07),
      rgba(149, 103, 255, 0.045)
    );
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.notifications-mark-all-button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(66, 239, 255, 0.4);
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.13),
      rgba(149, 103, 255, 0.09)
    );
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(66, 239, 255, 0.07);
}

.notifications-page .icon-button {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(110, 222, 255, 0.18);
  border-radius: 14px;
  color: var(--notifications-text);
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.08),
      rgba(149, 103, 255, 0.06)
    );
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.notifications-page .icon-button:hover:not(:disabled) {
  transform: translateY(-2px) rotate(4deg);
  border-color: rgba(66, 239, 255, 0.4);
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.15),
      rgba(149, 103, 255, 0.1)
    );
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(66, 239, 255, 0.07);
}

.notifications-page button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

/* =========================================================
   FILTER NAVIGATION
   ========================================================= */

.notifications-filter-nav {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 9px;
  margin-bottom: 18px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.notifications-filter-nav::-webkit-scrollbar {
  display: none;
}

.notifications-filter-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(110, 222, 255, 0.14);
  border-radius: 999px;
  color: var(--notifications-text-soft);
  font: inherit;
  font-size: 0.79rem;
  font-weight: 800;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.055),
      rgba(149, 103, 255, 0.035)
    );
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.notifications-filter-button:hover {
  transform: translateY(-2px);
  border-color: rgba(66, 239, 255, 0.36);
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.11),
      rgba(149, 103, 255, 0.075)
    );
}

.notifications-filter-button.is-active,
.notifications-filter-button[aria-pressed="true"] {
  border-color: rgba(66, 239, 255, 0.42);
  color: #04131f;
  background:
    linear-gradient(
      135deg,
      var(--notifications-cyan),
      #8affee
    );
  box-shadow:
    0 10px 24px rgba(66, 239, 255, 0.17),
    0 0 22px rgba(66, 239, 255, 0.1);
}

.notifications-filter-count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.67rem;
  font-weight: 900;
  background: rgba(4, 19, 31, 0.78);
}

/* =========================================================
   STATUS
   ========================================================= */

.notifications-status {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(110, 222, 255, 0.14);
  border-radius: 14px;
  color: var(--notifications-muted);
  font-size: 0.82rem;
  background: rgba(6, 15, 33, 0.76);
}

.notifications-status[data-type="error"] {
  border-color: rgba(255, 114, 131, 0.3);
  color: #ffd5da;
  background: rgba(255, 114, 131, 0.08);
}

.notifications-status[data-type="success"] {
  border-color: rgba(93, 242, 173, 0.28);
  color: #caffdf;
  background: rgba(93, 242, 173, 0.08);
}

/* =========================================================
   NOTIFICATION LIST
   ========================================================= */

.notifications-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.notification-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 112px;
  border-radius: 20px !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.2) !important;
  transition:
    transform 200ms ease,
    border-color 200ms ease,
    background 200ms ease,
    box-shadow 200ms ease;
}

.notification-item:hover {
  transform: translateY(-3px);
  border-color: var(--notifications-border-strong);
  box-shadow:
    0 26px 58px rgba(0, 0, 0, 0.3),
    0 0 26px rgba(66, 239, 255, 0.07) !important;
}

.notification-item.is-unread {
  border-color: rgba(66, 239, 255, 0.28);
  background:
    linear-gradient(
      135deg,
      rgba(66, 239, 255, 0.09),
      rgba(149, 103, 255, 0.055)
    );
  box-shadow:
    inset 4px 0 0 var(--notifications-cyan),
    0 18px 44px rgba(0, 0, 0, 0.22) !important;
}

.notification-main-action {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 18px 16px 18px 20px;
  border: 0;
  color: inherit;
  text-align: left;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}

.notification-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(66, 239, 255, 0.22);
  border-radius: 17px;
  color: var(--notifications-cyan);
  font-size: 1.28rem;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.11),
      rgba(149, 103, 255, 0.07)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 22px rgba(66, 239, 255, 0.07);
}

.notification-icon-profile {
  color: var(--notifications-violet);
  border-color: rgba(149, 103, 255, 0.24);
  background:
    linear-gradient(
      145deg,
      rgba(149, 103, 255, 0.13),
      rgba(255, 88, 216, 0.06)
    );
}

.notification-icon-connection {
  color: var(--notifications-green);
  border-color: rgba(93, 242, 173, 0.24);
  background:
    linear-gradient(
      145deg,
      rgba(93, 242, 173, 0.12),
      rgba(66, 239, 255, 0.05)
    );
}

.notification-icon-message {
  color: var(--notifications-blue);
  border-color: rgba(79, 140, 255, 0.25);
  background:
    linear-gradient(
      145deg,
      rgba(79, 140, 255, 0.14),
      rgba(149, 103, 255, 0.06)
    );
}

.notification-icon-engagement {
  color: var(--notifications-pink);
  border-color: rgba(255, 88, 216, 0.24);
  background:
    linear-gradient(
      145deg,
      rgba(255, 88, 216, 0.12),
      rgba(149, 103, 255, 0.06)
    );
}

.notification-content {
  min-width: 0;
}

.notification-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 7px;
}

.notification-topline strong {
  min-width: 0;
  overflow: hidden;
  color: var(--notifications-text);
  font-size: 0.96rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-topline time {
  flex: 0 0 auto;
  color: rgba(211, 225, 248, 0.45);
  font-size: 0.7rem;
  font-weight: 700;
}

.notification-message {
  display: block;
  color: var(--notifications-text-soft);
  font-size: 0.86rem;
  line-height: 1.62;
}

.notification-meta {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 8px;
  color: var(--notifications-muted);
  font-size: 0.7rem;
  font-weight: 750;
}

.notification-unread-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--notifications-cyan);
  box-shadow:
    0 0 10px rgba(66, 239, 255, 0.9),
    0 0 22px rgba(66, 239, 255, 0.56);
}

.notification-item-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px 12px 0;
}

.notification-action-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(110, 222, 255, 0.15);
  border-radius: 12px;
  color: var(--notifications-muted);
  background: rgba(5, 14, 31, 0.68);
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease;
}

.notification-action-button:hover {
  transform: translateY(-2px);
  border-color: rgba(66, 239, 255, 0.36);
  color: var(--notifications-text);
  background: rgba(66, 239, 255, 0.09);
}

.notification-action-button[data-notification-action="dismiss"]:hover {
  border-color: rgba(255, 114, 131, 0.34);
  color: #ffc4cc;
  background: rgba(255, 114, 131, 0.09);
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.notifications-empty-state {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 390px;
  padding: clamp(38px, 6vw, 76px) 22px;
  text-align: center;
}

.notifications-empty-state h2 {
  margin-bottom: 10px;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.notifications-empty-state p {
  max-width: 610px;
  margin: 0 0 24px;
}

.notifications-empty-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  margin-bottom: 22px;
  border: 1px solid rgba(66, 239, 255, 0.24);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(66, 239, 255, 0.13),
      transparent 68%
    ),
    rgba(5, 13, 30, 0.8);
  box-shadow:
    0 0 36px rgba(66, 239, 255, 0.12),
    0 0 72px rgba(149, 103, 255, 0.08);
}

.notifications-empty-visual::before,
.notifications-empty-visual::after {
  position: absolute;
  border: 1px solid rgba(66, 239, 255, 0.12);
  border-radius: 50%;
  content: "";
}

.notifications-empty-visual::before {
  inset: -13px;
}

.notifications-empty-visual::after {
  inset: -26px;
  border-color: rgba(149, 103, 255, 0.1);
}

.notifications-empty-visual img {
  position: relative;
  z-index: 1;
  width: 70%;
  height: 70%;
  object-fit: contain;
  filter:
    drop-shadow(
      0 0 18px rgba(66, 239, 255, 0.46)
    );
}

/* =========================================================
   LOADING STATE
   ========================================================= */

.notifications-loading-state {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.notification-loading-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  min-height: 112px;
  padding: 20px;
  border: 1px solid var(--notifications-border);
  border-radius: 20px;
  background:
    rgba(255, 255, 255, 0.025);
}

.notification-loading-card > div {
  display: grid;
  align-content: center;
  gap: 10px;
}

.notification-loading-icon {
  width: 54px;
  height: 54px;
  border-radius: 17px;
}

.notification-loading-line,
.notification-loading-icon {
  display: block;
  background:
    linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.035) 8%,
      rgba(66, 239, 255, 0.11) 18%,
      rgba(255, 255, 255, 0.035) 33%
    );
  background-size: 220% 100%;
  animation:
    notificationsLoadingShimmer 1.5s linear infinite;
}

.notification-loading-line {
  width: 100%;
  height: 12px;
  border-radius: 999px;
}

.notification-loading-title {
  width: 42%;
  height: 14px;
}

.notification-loading-short {
  width: 64%;
}

/* =========================================================
   COMMAND FOOTER
   ========================================================= */

.notifications-command-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(110, 222, 255, 0.1);
}

.notifications-command-footer > span {
  color: var(--notifications-muted);
  font-size: 0.76rem;
}

.notifications-command-footer .button {
  min-height: 44px;
  border-radius: 14px;
  font-weight: 800;
}

/* =========================================================
   PREFERENCES CARD
   ========================================================= */

.notifications-preferences-card {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: clamp(18px, 3vw, 28px);
  padding: clamp(24px, 4vw, 36px);
  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(149, 103, 255, 0.14),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(14, 28, 56, 0.96),
      rgba(5, 12, 28, 0.98)
    ) !important;
}

.notifications-preferences-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(66, 239, 255, 0.24);
  border-radius: 18px;
  color: var(--notifications-cyan);
  font-size: 1.4rem;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.11),
      rgba(149, 103, 255, 0.07)
    );
}

.notifications-preferences-content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.notifications-preferences-content h2 {
  margin-bottom: 9px;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.notifications-preferences-content p {
  max-width: 760px;
  margin: 0;
}

.notifications-preferences-card .button {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 48px;
  padding-inline: 20px;
  border-radius: 15px;
  font-weight: 850;
}

/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-theme="light"] .notifications-page {
  --notifications-text: #10213d;
  --notifications-text-soft: rgba(29, 51, 84, 0.82);
  --notifications-muted: rgba(36, 59, 91, 0.68);
  --notifications-border: rgba(44, 105, 164, 0.14);
  --notifications-border-strong: rgba(44, 105, 164, 0.28);
  --notifications-shadow:
    0 24px 62px rgba(45, 77, 116, 0.14),
    0 0 30px rgba(66, 239, 255, 0.04);
}

html[data-theme="light"] .notifications-page > .content-card,
html[data-theme="light"] .notifications-page .notification-item {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(237, 245, 255, 0.96)
    );
}

html[data-theme="light"] .notification-item.is-unread {
  background:
    linear-gradient(
      135deg,
      rgba(66, 239, 255, 0.11),
      rgba(149, 103, 255, 0.06)
    );
}

html[data-theme="light"] .notification-action-button {
  color: rgba(36, 59, 91, 0.68);
  background: rgba(239, 247, 255, 0.9);
}

html[data-theme="light"] .notifications-filter-button.is-active,
html[data-theme="light"]
  .notifications-filter-button[aria-pressed="true"] {
  color: #062038;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  .notifications-hero {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(210px, 0.68fr);
  }

  .notifications-bell-orbit {
    width: min(29vw, 275px);
  }
}

@media (max-width: 820px) {
  .notifications-page {
    gap: 18px;
    padding: 6px;
  }

  .notifications-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: auto;
    padding: 38px 26px;
    text-align: center;
  }

  .notifications-hero-content {
    align-items: center;
    max-width: 760px;
    margin-inline: auto;
  }

  .notifications-hero h1 {
    align-items: center;
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
  }

  .notifications-hero h1 span,
  .notifications-hero p {
    text-align: center;
  }

  .notifications-hero-visual {
    min-height: 240px;
  }

  .notifications-bell-orbit {
    width: min(62vw, 265px);
  }

  .notifications-command-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .notifications-header-actions {
    width: 100%;
  }

  .notifications-mark-all-button {
    flex: 1;
  }

  .notifications-preferences-card {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .notifications-preferences-card .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 620px) {
  .notifications-hero {
    padding: 30px 20px;
  }

  .notifications-hero h1 {
    font-size: clamp(2.05rem, 10.5vw, 3.05rem);
    line-height: 1;
  }

  .notifications-command-card {
    padding: 22px 16px;
  }

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

  .notification-main-action {
    grid-template-columns:
      auto
      minmax(0, 1fr);
    padding: 17px;
  }

  .notification-unread-dot {
    position: absolute;
    top: 18px;
    right: 18px;
  }

  .notification-item-actions {
    flex-direction: row;
    justify-content: flex-end;
    padding: 0 16px 15px;
  }

  .notification-topline {
    padding-right: 16px;
  }

  .notifications-command-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .notifications-command-footer .button {
    width: 100%;
  }
}

@media (max-width: 460px) {
  .notifications-hero {
    padding: 27px 17px;
  }

  .notifications-hero h1 {
    font-size: clamp(1.9rem, 9.8vw, 2.55rem);
  }

  .notifications-hero-visual {
    min-height: 205px;
  }

  .notifications-bell-orbit {
    width: min(70vw, 218px);
    min-width: 180px;
  }

  .notifications-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .notification-main-action {
    align-items: flex-start;
  }

  .notification-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .notification-topline {
    display: grid;
    gap: 4px;
  }

  .notification-topline strong {
    white-space: normal;
  }

  .notification-message {
    font-size: 0.82rem;
  }

  .notifications-preferences-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .notifications-preferences-icon {
    margin-inline: auto;
  }

  .notifications-preferences-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* =========================================================
   ACCESSIBILITY + MOTION
   ========================================================= */

.notifications-page button:focus-visible,
.notifications-page a:focus-visible {
  outline: 3px solid rgba(66, 239, 255, 0.86);
  outline-offset: 3px;
}

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

@keyframes notificationsOrbitSpin {
  from {
    transform: rotate(0deg);
  }

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

@keyframes notificationsOrbitSpinReverse {
  from {
    transform: rotate(360deg);
  }

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

@keyframes notificationsBellFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.025);
  }
}

@keyframes notificationsPulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(255, 88, 216, 0.45),
      0 0 20px rgba(255, 88, 216, 0.72);
  }

  70% {
    box-shadow:
      0 0 0 16px rgba(255, 88, 216, 0),
      0 0 24px rgba(255, 88, 216, 0.55);
  }

  100% {
    box-shadow:
      0 0 0 0 rgba(255, 88, 216, 0),
      0 0 20px rgba(255, 88, 216, 0.72);
  }
}

@keyframes notificationsLoadingShimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -20% 0;
  }
}
/* =========================================================
   SMOOTH JAZZ CONNECT — PRIVACY POLICY PAGE
   12/10 PREMIUM LEGAL + PRIVACY EXPERIENCE
   Append to the bottom of styles.css
   ========================================================= */

.policy-page {
  --policy-cyan: #42efff;
  --policy-blue: #4f8cff;
  --policy-violet: #9567ff;
  --policy-pink: #ff58d8;
  --policy-green: #5df2ad;
  --policy-gold: #ffd56f;
  --policy-danger: #ff7485;

  --policy-text: #f8fbff;
  --policy-text-soft: rgba(235, 243, 255, 0.84);
  --policy-muted: rgba(211, 225, 248, 0.68);

  --policy-surface: rgba(8, 17, 37, 0.92);
  --policy-surface-soft: rgba(14, 28, 56, 0.76);
  --policy-surface-strong: rgba(5, 12, 28, 0.98);

  --policy-border: rgba(110, 222, 255, 0.15);
  --policy-border-strong: rgba(110, 222, 255, 0.34);

  --policy-shadow:
    0 30px 86px rgba(0, 0, 0, 0.4),
    0 0 54px rgba(66, 239, 255, 0.055);

  position: relative;
  display: grid;
  gap: clamp(20px, 2.8vw, 34px);
  width: min(100%, 1280px);
  margin-inline: auto;
  padding: clamp(8px, 1.5vw, 18px);
  isolation: isolate;
}

.policy-page::before,
.policy-page::after {
  position: fixed;
  z-index: -2;
  width: min(54vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  filter: blur(110px);
  opacity: 0.13;
}

.policy-page::before {
  top: 4%;
  left: 30%;
  background:
    radial-gradient(
      circle,
      rgba(66, 239, 255, 0.68),
      rgba(79, 140, 255, 0.2) 44%,
      transparent 72%
    );
}

.policy-page::after {
  right: -12%;
  bottom: -14%;
  background:
    radial-gradient(
      circle,
      rgba(149, 103, 255, 0.58),
      rgba(255, 88, 216, 0.16) 46%,
      transparent 72%
    );
}

.policy-page > .content-card,
.policy-page .policy-section-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--policy-border);
  border-radius: clamp(22px, 2.6vw, 34px);
  background:
    linear-gradient(
      145deg,
      rgba(14, 28, 56, 0.95),
      rgba(5, 12, 28, 0.97)
    );
  box-shadow: var(--policy-shadow);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}

.policy-page > .content-card::before,
.policy-page .policy-section-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.07),
      transparent 26%,
      transparent 72%,
      rgba(66, 239, 255, 0.045)
    );
}

.policy-page h1,
.policy-page h2,
.policy-page h3 {
  margin-top: 0;
  color: var(--policy-text);
  text-wrap: balance;
}

.policy-page h2 {
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.policy-page h3 {
  font-size: clamp(1.02rem, 1.6vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.policy-page p,
.policy-page li {
  color: var(--policy-muted);
  line-height: 1.78;
}

.policy-page a {
  color: inherit;
}

.policy-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0 0 10px;
  color: var(--policy-cyan);
  font-size: clamp(0.69rem, 0.8vw, 0.78rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.policy-page .eyebrow::before {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--policy-cyan),
      var(--policy-violet)
    );
  content: "";
  box-shadow:
    0 0 14px rgba(66, 239, 255, 0.68);
}

/* =========================================================
   HERO
   ========================================================= */

.policy-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(230px, 0.84fr);
  align-items: center;
  gap: clamp(28px, 5vw, 62px);
  min-height: clamp(420px, 52vh, 580px);
  padding:
    clamp(34px, 5vw, 60px)
    clamp(26px, 5vw, 64px);
  background:
    radial-gradient(
      circle at 86% 26%,
      rgba(149, 103, 255, 0.22),
      transparent 35%
    ),
    radial-gradient(
      circle at 12% 92%,
      rgba(66, 239, 255, 0.12),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(14, 30, 63, 0.99),
      rgba(5, 12, 29, 0.98)
    ) !important;
}

.policy-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 720px;
}

.policy-hero h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 640px;
  margin: 0 0 20px;
  font-size: clamp(2.35rem, 4.6vw, 4.25rem);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.policy-hero h1 span {
  display: block;
  margin-top: 6px;
  background:
    linear-gradient(
      100deg,
      var(--policy-cyan) 0%,
      #8fc8ff 34%,
      var(--policy-violet) 68%,
      var(--policy-pink) 100%
    );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter:
    drop-shadow(
      0 0 16px rgba(66, 239, 255, 0.18)
    );
}

.policy-hero-lead {
  max-width: 680px;
  margin: 0;
  color: var(--policy-text-soft) !important;
  font-size: clamp(1rem, 1.35vw, 1.16rem);
}

.policy-effective-date {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  min-height: 40px;
  margin-top: 24px;
  padding: 9px 14px;
  border: 1px solid rgba(110, 222, 255, 0.17);
  border-radius: 999px;
  color: var(--policy-text-soft);
  font-size: 0.78rem;
  font-weight: 800;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.07),
      rgba(149, 103, 255, 0.045)
    );
}

.policy-effective-date span:first-child {
  color: var(--policy-cyan);
  font-size: 1rem;
}

.policy-hero-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 290px;
}

.policy-shield-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: min(27vw, 310px);
  min-width: 225px;
  aspect-ratio: 1;
}

.policy-shield-core {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 60%;
  aspect-ratio: 1;
  border: 1px solid rgba(66, 239, 255, 0.3);
  border-radius: 36% 36% 48% 48%;
  color: var(--policy-cyan);
  font-size: clamp(3rem, 6vw, 4.6rem);
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.15),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(14, 29, 58, 0.94),
      rgba(4, 10, 25, 0.99)
    );
  box-shadow:
    inset 0 0 45px rgba(66, 239, 255, 0.08),
    0 0 36px rgba(66, 239, 255, 0.2),
    0 0 82px rgba(149, 103, 255, 0.14);
  animation:
    policyShieldFloat 5s ease-in-out infinite;
}

.policy-shield-core span {
  filter:
    drop-shadow(
      0 0 18px rgba(66, 239, 255, 0.52)
    );
}

.policy-orbit {
  position: absolute;
  border: 1px solid rgba(66, 239, 255, 0.2);
  border-radius: 50%;
}

.policy-orbit::before {
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--policy-cyan);
  content: "";
  box-shadow:
    0 0 10px var(--policy-cyan),
    0 0 24px rgba(66, 239, 255, 0.8);
}

.policy-orbit-one {
  inset: 5%;
  animation:
    policyOrbitSpin 14s linear infinite;
}

.policy-orbit-two {
  inset: 18%;
  border-color: rgba(149, 103, 255, 0.24);
  animation:
    policyOrbitSpinReverse 10s linear infinite;
}

.policy-orbit-two::before {
  background: var(--policy-violet);
  box-shadow:
    0 0 10px var(--policy-violet),
    0 0 24px rgba(149, 103, 255, 0.76);
}

/* =========================================================
   INTRODUCTION
   ========================================================= */

.policy-introduction-card {
  padding: clamp(28px, 5vw, 56px);
  background:
    radial-gradient(
      circle at 90% 12%,
      rgba(149, 103, 255, 0.13),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(14, 28, 56, 0.96),
      rgba(5, 12, 28, 0.98)
    ) !important;
}

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

.policy-introduction-card h2 {
  margin-bottom: 14px;
}

.policy-introduction-card p {
  max-width: 980px;
  margin: 0;
  font-size: clamp(0.98rem, 1.15vw, 1.06rem);
}

.policy-introduction-card p + p {
  margin-top: 16px;
}

/* =========================================================
   CONTENT LAYOUT
   ========================================================= */

.policy-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 26px);
}

.policy-section-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  padding: clamp(26px, 4vw, 46px);
}

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

.policy-section-number {
  display: grid;
  place-items: center;
  align-self: flex-start;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(66, 239, 255, 0.23);
  border-radius: 18px;
  color: var(--policy-cyan);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.11),
      rgba(149, 103, 255, 0.07)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 24px rgba(66, 239, 255, 0.07);
}

.policy-section-content {
  min-width: 0;
}

.policy-section-content h2 {
  margin-bottom: 14px;
}

.policy-section-content > p {
  max-width: 980px;
  margin: 0;
}

.policy-section-content > p + p {
  margin-top: 16px;
}

/* =========================================================
   DETAIL BLOCKS
   ========================================================= */

.policy-detail-list {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 14px;
  margin-top: 24px;
}

.policy-detail-item {
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px solid rgba(110, 222, 255, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.045),
      rgba(149, 103, 255, 0.025)
    );
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.policy-detail-item:hover {
  transform: translateY(-3px);
  border-color: rgba(66, 239, 255, 0.26);
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.08),
      rgba(149, 103, 255, 0.045)
    );
}

.policy-detail-item h3 {
  margin-bottom: 8px;
}

.policy-detail-item p {
  margin: 0;
  font-size: 0.9rem;
}

/* =========================================================
   POLICY LISTS
   ========================================================= */

.policy-list {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.policy-list li {
  position: relative;
  min-height: 44px;
  padding:
    12px
    14px
    12px
    46px;
  border: 1px solid rgba(110, 222, 255, 0.11);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.04),
      rgba(149, 103, 255, 0.02)
    );
}

.policy-list li::before {
  position: absolute;
  top: 13px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #04151f;
  font-size: 0.68rem;
  font-weight: 950;
  background:
    linear-gradient(
      135deg,
      var(--policy-cyan),
      var(--policy-green)
    );
  content: "✓";
  box-shadow:
    0 0 16px rgba(66, 239, 255, 0.18);
}

/* =========================================================
   PRIVACY CHOICE ACTIONS
   ========================================================= */

.policy-choice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 24px;
}

.policy-choice-actions .button {
  min-height: 46px;
  padding-inline: 20px;
  border-radius: 14px;
  font-weight: 850;
}

/* =========================================================
   CONTACT CARD
   ========================================================= */

.policy-contact-card {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: clamp(20px, 4vw, 34px);
  padding: clamp(26px, 4vw, 42px);
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(255, 88, 216, 0.13),
      transparent 36%
    ),
    radial-gradient(
      circle at 10% 100%,
      rgba(66, 239, 255, 0.12),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(12, 31, 66, 0.98),
      rgba(13, 16, 44, 0.97)
    ) !important;
}

.policy-contact-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(66, 239, 255, 0.24);
  border-radius: 19px;
  color: var(--policy-cyan);
  font-size: 1.45rem;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.11),
      rgba(149, 103, 255, 0.07)
    );
  box-shadow:
    0 0 26px rgba(66, 239, 255, 0.08);
}

.policy-contact-content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.policy-contact-content h2 {
  margin-bottom: 10px;
  font-size: clamp(1.45rem, 2.7vw, 2.15rem);
}

.policy-contact-content p {
  max-width: 760px;
  margin: 0;
}

.policy-contact-details {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 15px;
  color: var(--policy-text-soft);
  font-size: 0.82rem;
  font-weight: 700;
}

.policy-contact-details a {
  color: var(--policy-cyan);
  text-decoration: none;
}

.policy-contact-details a:hover {
  text-decoration: underline;
}

.policy-contact-card .button {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 50px;
  padding-inline: 22px;
  border-radius: 15px;
  font-weight: 900;
  box-shadow:
    0 14px 32px rgba(65, 103, 255, 0.24),
    0 0 24px rgba(66, 239, 255, 0.08);
}

/* =========================================================
   LEGAL FOOTER
   ========================================================= */

.policy-legal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(10px, 2.4vw, 22px);
  padding: 18px 24px;
  border-radius: 20px !important;
  text-align: center;
}

.policy-legal-footer > * {
  position: relative;
  z-index: 1;
}

.policy-legal-footer a,
.policy-legal-footer span {
  color: var(--policy-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.policy-legal-footer a {
  text-decoration: none;
  transition: color 180ms ease;
}

.policy-legal-footer a:hover {
  color: var(--policy-cyan);
}

/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-theme="light"] .policy-page {
  --policy-text: #10213d;
  --policy-text-soft: rgba(29, 51, 84, 0.82);
  --policy-muted: rgba(36, 59, 91, 0.7);
  --policy-border: rgba(44, 105, 164, 0.14);
  --policy-border-strong: rgba(44, 105, 164, 0.28);
  --policy-shadow:
    0 24px 62px rgba(45, 77, 116, 0.14),
    0 0 30px rgba(66, 239, 255, 0.04);
}

html[data-theme="light"] .policy-page > .content-card,
html[data-theme="light"] .policy-page .policy-section-card {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(237, 245, 255, 0.96)
    );
}

html[data-theme="light"] .policy-detail-item,
html[data-theme="light"] .policy-list li {
  background:
    linear-gradient(
      145deg,
      rgba(234, 246, 255, 0.86),
      rgba(241, 239, 255, 0.72)
    );
}

html[data-theme="light"] .policy-effective-date {
  color: rgba(29, 51, 84, 0.82);
}

html[data-theme="light"] .policy-contact-details {
  color: rgba(29, 51, 84, 0.8);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1020px) {
  .policy-hero {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(210px, 0.7fr);
  }

  .policy-shield-orbit {
    width: min(29vw, 280px);
  }
}

@media (max-width: 820px) {
  .policy-page {
    gap: 18px;
    padding: 6px;
  }

  .policy-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: auto;
    padding: 38px 26px;
    text-align: center;
  }

  .policy-hero-content {
    align-items: center;
    max-width: 760px;
    margin-inline: auto;
  }

  .policy-hero h1 {
    align-items: center;
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
  }

  .policy-hero h1 span,
  .policy-hero-lead {
    text-align: center;
  }

  .policy-hero-visual {
    min-height: 245px;
  }

  .policy-shield-orbit {
    width: min(62vw, 270px);
  }

  .policy-detail-list {
    grid-template-columns: 1fr;
  }

  .policy-contact-card {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .policy-contact-card .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .policy-hero {
    padding: 30px 20px;
  }

  .policy-hero h1 {
    font-size: clamp(2.05rem, 10.5vw, 3.05rem);
    line-height: 1;
  }

  .policy-introduction-card,
  .policy-section-card,
  .policy-contact-card {
    padding: 22px 17px;
  }

  .policy-section-card {
    grid-template-columns: 1fr;
  }

  .policy-section-number {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .policy-choice-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .policy-choice-actions .button {
    width: 100%;
  }

  .policy-contact-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .policy-contact-icon {
    margin-inline: auto;
  }

  .policy-contact-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .policy-contact-details {
    justify-content: center;
  }
}

@media (max-width: 460px) {
  .policy-hero {
    padding: 27px 17px;
  }

  .policy-hero h1 {
    font-size: clamp(1.9rem, 9.8vw, 2.55rem);
  }

  .policy-hero-visual {
    min-height: 205px;
  }

  .policy-shield-orbit {
    width: min(70vw, 220px);
    min-width: 180px;
  }

  .policy-detail-item {
    padding: 17px;
  }

  .policy-list li {
    padding:
      12px
      12px
      12px
      43px;
  }

  .policy-contact-details {
    flex-direction: column;
    align-items: center;
  }

  .policy-contact-details span[aria-hidden="true"] {
    display: none;
  }

  .policy-legal-footer {
    flex-direction: column;
    gap: 9px;
  }

  .policy-legal-footer > span[aria-hidden="true"] {
    display: none;
  }
}

/* =========================================================
   ACCESSIBILITY + REDUCED MOTION
   ========================================================= */

.policy-page a:focus-visible,
.policy-page button:focus-visible {
  outline: 3px solid rgba(66, 239, 255, 0.86);
  outline-offset: 3px;
}

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

@keyframes policyOrbitSpin {
  from {
    transform: rotate(0deg);
  }

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

@keyframes policyOrbitSpinReverse {
  from {
    transform: rotate(360deg);
  }

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

@keyframes policyShieldFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.025);
  }
}
/* =========================================================
   SMOOTH JAZZ CONNECT — PROFILE PAGE
   12/10 PREMIUM MEMBER IDENTITY EXPERIENCE
   Append to the bottom of styles.css
   ========================================================= */

.profile-page {
  --profile-cyan: #42efff;
  --profile-blue: #4f8cff;
  --profile-violet: #9567ff;
  --profile-pink: #ff58d8;
  --profile-green: #5df2ad;
  --profile-gold: #ffd56f;
  --profile-danger: #ff7485;

  --profile-text: #f8fbff;
  --profile-text-soft: rgba(235, 243, 255, 0.84);
  --profile-muted: rgba(211, 225, 248, 0.68);

  --profile-surface: rgba(8, 17, 37, 0.92);
  --profile-surface-soft: rgba(14, 28, 56, 0.76);
  --profile-surface-strong: rgba(5, 12, 28, 0.98);

  --profile-border: rgba(110, 222, 255, 0.15);
  --profile-border-strong: rgba(110, 222, 255, 0.34);

  --profile-shadow:
    0 30px 86px rgba(0, 0, 0, 0.4),
    0 0 54px rgba(66, 239, 255, 0.055);

  position: relative;
  display: grid;
  gap: clamp(20px, 2.8vw, 34px);
  width: min(100%, 1320px);
  margin-inline: auto;
  padding: clamp(8px, 1.5vw, 18px);
  isolation: isolate;
}

.profile-page::before,
.profile-page::after {
  position: fixed;
  z-index: -2;
  width: min(54vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  filter: blur(110px);
  opacity: 0.13;
}

.profile-page::before {
  top: 4%;
  left: 28%;
  background:
    radial-gradient(
      circle,
      rgba(66, 239, 255, 0.68),
      rgba(79, 140, 255, 0.2) 44%,
      transparent 72%
    );
}

.profile-page::after {
  right: -12%;
  bottom: -14%;
  background:
    radial-gradient(
      circle,
      rgba(149, 103, 255, 0.58),
      rgba(255, 88, 216, 0.16) 46%,
      transparent 72%
    );
}

.profile-page .content-card,
.profile-page .profile-stat-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--profile-border);
  border-radius: clamp(22px, 2.6vw, 34px);
  background:
    linear-gradient(
      145deg,
      rgba(14, 28, 56, 0.95),
      rgba(5, 12, 28, 0.97)
    );
  box-shadow: var(--profile-shadow);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}

.profile-page .content-card::before,
.profile-page .profile-stat-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.07),
      transparent 26%,
      transparent 72%,
      rgba(66, 239, 255, 0.045)
    );
}

.profile-page h1,
.profile-page h2,
.profile-page h3 {
  margin-top: 0;
  color: var(--profile-text);
  text-wrap: balance;
}

.profile-page p,
.profile-page dd {
  color: var(--profile-muted);
  line-height: 1.72;
}

.profile-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0 0 10px;
  color: var(--profile-cyan);
  font-size: clamp(0.69rem, 0.8vw, 0.78rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.profile-page .eyebrow::before {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--profile-cyan),
      var(--profile-violet)
    );
  content: "";
  box-shadow:
    0 0 14px rgba(66, 239, 255, 0.68);
}

/* =========================================================
   PROFILE HERO
   ========================================================= */

.profile-hero-card {
  padding: 0;
  overflow: hidden !important;
}

.profile-cover {
  position: relative;
  min-height: clamp(190px, 24vw, 290px);
  overflow: hidden;
  border-bottom: 1px solid var(--profile-border);
  background:
    radial-gradient(
      circle at 18% 28%,
      rgba(66, 239, 255, 0.18),
      transparent 34%
    ),
    radial-gradient(
      circle at 82% 20%,
      rgba(149, 103, 255, 0.28),
      transparent 38%
    ),
    radial-gradient(
      circle at 54% 110%,
      rgba(255, 88, 216, 0.15),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(13, 34, 72, 0.99),
      rgba(6, 13, 31, 0.99)
    );
}

.profile-cover::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.06),
      transparent 30%,
      transparent 68%,
      rgba(66, 239, 255, 0.04)
    );
}

.profile-cover-glow {
  position: absolute;
  top: -60%;
  left: 22%;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(66, 239, 255, 0.22),
      transparent 70%
    );
  filter: blur(24px);
}

.profile-cover-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    );
  background-size: 44px 44px;
  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.85),
      transparent
    );
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.85),
      transparent
    );
}

.profile-hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 42px);
  align-items: start;
  padding:
    0
    clamp(24px, 5vw, 58px)
    clamp(30px, 5vw, 54px);
}

.profile-avatar-column {
  margin-top: -86px;
}

.profile-avatar-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(150px, 18vw, 190px);
  aspect-ratio: 1;
  padding: 7px;
  border: 1px solid rgba(66, 239, 255, 0.32);
  border-radius: 50%;
  background:
    linear-gradient(
      145deg,
      rgba(18, 35, 67, 0.98),
      rgba(5, 12, 28, 1)
    );
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.36),
    0 0 32px rgba(66, 239, 255, 0.16),
    0 0 64px rgba(149, 103, 255, 0.1);
}

.profile-avatar {
  width: 100%;
  height: 100%;
  border: 3px solid rgba(255, 255, 255, 0.045);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.03);
}

.profile-verification-badge {
  position: absolute;
  right: 7px;
  bottom: 17px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 4px solid #071127;
  border-radius: 50%;
  color: #03141e;
  font-size: 0.84rem;
  font-weight: 950;
  background:
    linear-gradient(
      135deg,
      var(--profile-cyan),
      #99fff3
    );
  box-shadow:
    0 0 18px rgba(66, 239, 255, 0.45);
}

.profile-presence-indicator {
  position: absolute;
  right: 17px;
  bottom: 5px;
  width: 18px;
  height: 18px;
  border: 4px solid #071127;
  border-radius: 50%;
  background: var(--profile-green);
  box-shadow:
    0 0 12px rgba(93, 242, 173, 0.72);
}

.profile-identity {
  min-width: 0;
  padding-top: clamp(24px, 3vw, 36px);
}

.profile-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.profile-name-row h1 {
  margin: 0;
  font-size: clamp(2.15rem, 4.4vw, 4rem);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.profile-category-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(66, 239, 255, 0.2);
  border-radius: 999px;
  color: var(--profile-cyan);
  font-size: 0.72rem;
  font-weight: 850;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.08),
      rgba(149, 103, 255, 0.05)
    );
}

.profile-handle-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 15px;
  color: var(--profile-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.profile-handle-line #profileUsername {
  color: var(--profile-cyan);
}

.profile-headline {
  max-width: 760px;
  margin: 0;
  color: var(--profile-text-soft) !important;
  font-size: clamp(0.98rem, 1.25vw, 1.08rem);
}

.profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 19px;
}

.profile-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(110, 222, 255, 0.13);
  border-radius: 12px;
  color: var(--profile-muted);
  font-size: 0.74rem;
  font-weight: 750;
  text-decoration: none;
  background: rgba(66, 239, 255, 0.035);
}

.profile-meta-item > span:first-child {
  color: var(--profile-cyan);
}

.profile-website-link {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease;
}

.profile-website-link:hover {
  transform: translateY(-2px);
  border-color: rgba(66, 239, 255, 0.32);
  color: var(--profile-text);
  background: rgba(66, 239, 255, 0.08);
}

.profile-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

.profile-action-row .button {
  min-height: 47px;
  padding-inline: 19px;
  border-radius: 14px;
  font-weight: 850;
}

.profile-action-row .button span:first-child {
  margin-right: 6px;
}

.profile-page .icon-button {
  display: inline-grid;
  place-items: center;
  width: 47px;
  height: 47px;
  padding: 0;
  border: 1px solid rgba(110, 222, 255, 0.17);
  border-radius: 14px;
  color: var(--profile-text);
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.08),
      rgba(149, 103, 255, 0.05)
    );
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.profile-page .icon-button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(66, 239, 255, 0.4);
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.14),
      rgba(149, 103, 255, 0.09)
    );
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(66, 239, 255, 0.07);
}

.profile-action-status {
  max-width: 760px;
  margin-top: 16px;
  padding: 11px 14px;
  border: 1px solid rgba(110, 222, 255, 0.14);
  border-radius: 13px;
  color: var(--profile-muted);
  font-size: 0.8rem;
  background: rgba(6, 15, 33, 0.76);
}

/* =========================================================
   PROFILE STATS
   ========================================================= */

.profile-stat-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
  gap: clamp(14px, 2vw, 20px);
}

.profile-stat-card {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 170px;
  padding: 22px;
  text-align: center;
  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.profile-stat-card:hover {
  transform: translateY(-5px);
  border-color: var(--profile-border-strong);
  box-shadow:
    0 28px 62px rgba(0, 0, 0, 0.34),
    0 0 30px rgba(66, 239, 255, 0.08);
}

.profile-stat-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border: 1px solid rgba(66, 239, 255, 0.22);
  border-radius: 14px;
  color: var(--profile-cyan);
  font-size: 1.05rem;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.11),
      rgba(149, 103, 255, 0.07)
    );
}

.profile-stat-card strong {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--profile-text);
  font-size: clamp(2rem, 4vw, 3.35rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.055em;
}

.profile-stat-card > span:last-child {
  position: relative;
  z-index: 1;
  margin-top: 7px;
  color: var(--profile-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* =========================================================
   MAIN PROFILE LAYOUT
   ========================================================= */

.profile-content-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.62fr)
    minmax(300px, 0.78fr);
  gap: clamp(18px, 2.4vw, 26px);
  align-items: start;
}

.profile-main-column,
.profile-side-column {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
  min-width: 0;
}

.profile-side-column {
  position: sticky;
  top: 18px;
}

.profile-about-card,
.profile-posts-card,
.profile-details-card,
.profile-links-card,
.profile-completion-card {
  padding: clamp(24px, 3.5vw, 38px);
}

.profile-section-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}

.profile-section-header > div:first-child {
  min-width: 0;
}

.profile-section-header h2 {
  margin-bottom: 8px;
  font-size: clamp(1.55rem, 2.8vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.profile-section-header p {
  max-width: 680px;
  margin: 0;
}

.profile-page .tool-button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid rgba(110, 222, 255, 0.16);
  border-radius: 13px;
  color: var(--profile-text-soft);
  font: inherit;
  font-size: 0.77rem;
  font-weight: 850;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.07),
      rgba(149, 103, 255, 0.045)
    );
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease;
}

.profile-page .tool-button:hover {
  transform: translateY(-2px);
  border-color: rgba(66, 239, 255, 0.36);
  color: var(--profile-text);
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.13),
      rgba(149, 103, 255, 0.08)
    );
}

/* =========================================================
   ABOUT
   ========================================================= */

.profile-bio {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0;
  color: var(--profile-text-soft) !important;
  font-size: clamp(0.98rem, 1.2vw, 1.06rem);
}

.profile-tag-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.profile-tag,
.profile-tag-list > span,
.profile-tag-list > a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(66, 239, 255, 0.16);
  border-radius: 999px;
  color: var(--profile-cyan);
  font-size: 0.73rem;
  font-weight: 800;
  text-decoration: none;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.07),
      rgba(149, 103, 255, 0.045)
    );
}

/* =========================================================
   PROFILE POSTS
   ========================================================= */

.profile-post-filter {
  flex: 0 0 auto;
}

.profile-post-filter select {
  min-width: 150px;
  min-height: 44px;
  padding: 10px 40px 10px 14px;
  border: 1px solid rgba(110, 222, 255, 0.16);
  border-radius: 14px;
  color: var(--profile-text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  color-scheme: dark;
  background:
    linear-gradient(
      145deg,
      rgba(8, 19, 40, 0.96),
      rgba(4, 11, 26, 0.98)
    );
  outline: none;
  cursor: pointer;
}

.profile-post-filter select:focus {
  border-color: rgba(66, 239, 255, 0.5);
  box-shadow:
    0 0 0 4px rgba(66, 239, 255, 0.075);
}

.profile-post-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
}

.profile-post-list > * {
  width: 100%;
}

.profile-posts-empty {
  display: grid;
  place-items: center;
  min-height: 380px;
  padding: clamp(34px, 6vw, 68px) 22px;
  text-align: center;
}

.profile-posts-empty h3 {
  margin-bottom: 9px;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

.profile-posts-empty p {
  max-width: 560px;
  margin: 0 0 22px;
}

.profile-empty-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  margin-bottom: 20px;
  border: 1px solid rgba(66, 239, 255, 0.23);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(66, 239, 255, 0.13),
      transparent 68%
    ),
    rgba(5, 13, 30, 0.8);
  box-shadow:
    0 0 34px rgba(66, 239, 255, 0.12),
    0 0 68px rgba(149, 103, 255, 0.08);
}

.profile-empty-visual::before,
.profile-empty-visual::after {
  position: absolute;
  border: 1px solid rgba(66, 239, 255, 0.12);
  border-radius: 50%;
  content: "";
}

.profile-empty-visual::before {
  inset: -12px;
}

.profile-empty-visual::after {
  inset: -24px;
  border-color: rgba(149, 103, 255, 0.1);
}

.profile-empty-visual img {
  position: relative;
  z-index: 1;
  width: 70%;
  height: 70%;
  object-fit: contain;
  filter:
    drop-shadow(
      0 0 18px rgba(66, 239, 255, 0.46)
    );
}

/* =========================================================
   PROFESSIONAL DETAILS
   ========================================================= */

.profile-detail-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin: 0;
}

.profile-detail-row {
  display: grid;
  grid-template-columns:
    minmax(100px, 0.42fr)
    minmax(0, 0.58fr);
  gap: 14px;
  align-items: center;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgba(110, 222, 255, 0.1);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.04),
      rgba(149, 103, 255, 0.025)
    );
}

.profile-detail-row dt {
  color: var(--profile-text-soft);
  font-size: 0.74rem;
  font-weight: 850;
}

.profile-detail-row dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
  font-size: 0.76rem;
}

/* =========================================================
   LINKS
   ========================================================= */

.profile-link-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.profile-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgba(110, 222, 255, 0.11);
  border-radius: 14px;
  color: var(--profile-text-soft);
  font-size: 0.8rem;
  font-weight: 750;
  text-decoration: none;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.04),
      rgba(149, 103, 255, 0.025)
    );
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease;
}

.profile-link-item:hover {
  transform: translateY(-2px);
  border-color: rgba(66, 239, 255, 0.28);
  color: var(--profile-cyan);
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.09),
      rgba(149, 103, 255, 0.05)
    );
}

.profile-links-empty {
  display: grid;
  gap: 16px;
}

.profile-links-empty p {
  margin: 0;
}

.profile-links-empty .button {
  width: 100%;
  min-height: 45px;
  border-radius: 14px;
  font-weight: 800;
}

/* =========================================================
   PROFILE COMPLETION
   ========================================================= */

.profile-completion-card {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(149, 103, 255, 0.16),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(14, 28, 56, 0.96),
      rgba(5, 12, 28, 0.98)
    ) !important;
}

.profile-completion-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.profile-completion-header h2 {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.72rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.profile-completion-header > strong {
  flex: 0 0 auto;
  color: var(--profile-cyan);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 950;
}

.profile-completion-track {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 10px;
  margin: 21px 0 16px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.28);
}

.profile-completion-track span {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      var(--profile-cyan),
      var(--profile-blue),
      var(--profile-violet)
    );
  box-shadow:
    0 0 18px rgba(66, 239, 255, 0.36);
  transition: width 400ms ease;
}

.profile-completion-card p {
  position: relative;
  z-index: 1;
  margin: 0 0 18px;
  font-size: 0.86rem;
}

.profile-completion-card .button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 45px;
  border-radius: 14px;
  font-weight: 850;
}

/* =========================================================
   STATUS STATES
   ========================================================= */

.profile-page .inline-status {
  padding: 11px 14px;
  border: 1px solid rgba(110, 222, 255, 0.14);
  border-radius: 13px;
  color: var(--profile-muted);
  font-size: 0.8rem;
  background: rgba(6, 15, 33, 0.76);
}

.profile-page .inline-status[data-type="error"] {
  border-color: rgba(255, 116, 133, 0.3);
  color: #ffd5da;
  background: rgba(255, 116, 133, 0.08);
}

.profile-page .inline-status[data-type="success"] {
  border-color: rgba(93, 242, 173, 0.28);
  color: #caffdf;
  background: rgba(93, 242, 173, 0.08);
}

/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-theme="light"] .profile-page {
  --profile-text: #10213d;
  --profile-text-soft: rgba(29, 51, 84, 0.82);
  --profile-muted: rgba(36, 59, 91, 0.7);
  --profile-border: rgba(44, 105, 164, 0.14);
  --profile-border-strong: rgba(44, 105, 164, 0.28);
  --profile-shadow:
    0 24px 62px rgba(45, 77, 116, 0.14),
    0 0 30px rgba(66, 239, 255, 0.04);
}

html[data-theme="light"] .profile-page .content-card,
html[data-theme="light"] .profile-page .profile-stat-card {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(237, 245, 255, 0.96)
    );
}

html[data-theme="light"] .profile-avatar-frame {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(225, 239, 253, 0.98)
    );
}

html[data-theme="light"] .profile-verification-badge,
html[data-theme="light"] .profile-presence-indicator {
  border-color: #ffffff;
}

html[data-theme="light"] .profile-detail-row,
html[data-theme="light"] .profile-link-item {
  background:
    linear-gradient(
      145deg,
      rgba(234, 246, 255, 0.86),
      rgba(241, 239, 255, 0.72)
    );
}

html[data-theme="light"] .profile-post-filter select {
  color: #10213d;
  color-scheme: light;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(237, 245, 255, 0.96)
    );
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {
  .profile-content-layout {
    grid-template-columns:
      minmax(0, 1.45fr)
      minmax(280px, 0.75fr);
  }

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

@media (max-width: 860px) {
  .profile-page {
    gap: 18px;
    padding: 6px;
  }

  .profile-content-layout {
    grid-template-columns: 1fr;
  }

  .profile-side-column {
    position: static;
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .profile-completion-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .profile-cover {
    min-height: 180px;
  }

  .profile-hero-layout {
    grid-template-columns: 1fr;
    justify-items: center;
    padding:
      0
      20px
      30px;
    text-align: center;
  }

  .profile-avatar-column {
    margin-top: -76px;
  }

  .profile-avatar-frame {
    width: 152px;
  }

  .profile-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
  }

  .profile-name-row {
    justify-content: center;
  }

  .profile-name-row h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .profile-handle-line,
  .profile-meta-row,
  .profile-action-row {
    justify-content: center;
  }

  .profile-headline {
    text-align: center;
  }

  .profile-section-header {
    flex-direction: column;
  }

  .profile-section-header .tool-button,
  .profile-post-filter,
  .profile-post-filter select {
    width: 100%;
  }

  .profile-side-column {
    grid-template-columns: 1fr;
  }

  .profile-completion-card {
    grid-column: auto;
  }
}

@media (max-width: 540px) {
  .profile-cover {
    min-height: 150px;
  }

  .profile-avatar-column {
    margin-top: -64px;
  }

  .profile-avatar-frame {
    width: 132px;
  }

  .profile-verification-badge {
    right: 3px;
    bottom: 12px;
    width: 28px;
    height: 28px;
  }

  .profile-presence-indicator {
    right: 11px;
    width: 16px;
    height: 16px;
  }

  .profile-hero-layout {
    padding-inline: 16px;
  }

  .profile-category-badge {
    width: 100%;
    justify-content: center;
  }

  .profile-action-row {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
    width: 100%;
  }

  .profile-action-row .button {
    width: 100%;
  }

  .profile-action-row .button:first-child {
    grid-column: 1 / -1;
  }

  .profile-page .icon-button {
    width: 100%;
  }

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

  .profile-stat-card {
    min-height: 145px;
    padding: 18px 12px;
  }

  .profile-about-card,
  .profile-posts-card,
  .profile-details-card,
  .profile-links-card,
  .profile-completion-card {
    padding: 22px 17px;
  }

  .profile-detail-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .profile-detail-row dd {
    text-align: left;
  }
}

@media (max-width: 400px) {
  .profile-name-row h1 {
    font-size: 1.9rem;
  }

  .profile-handle-line {
    flex-direction: column;
    gap: 3px;
  }

  .profile-handle-line span[aria-hidden="true"] {
    display: none;
  }

  .profile-meta-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .profile-meta-item {
    justify-content: center;
    width: 100%;
  }

  .profile-action-row {
    grid-template-columns: 1fr;
  }

  .profile-action-row .button:first-child {
    grid-column: auto;
  }

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

  .profile-stat-card {
    min-height: 130px;
  }
}

/* =========================================================
   ACCESSIBILITY + MOTION
   ========================================================= */

.profile-page button:focus-visible,
.profile-page a:focus-visible,
.profile-page select:focus-visible {
  outline: 3px solid rgba(66, 239, 255, 0.86);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .profile-page *,
  .profile-page *::before,
  .profile-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* =========================================================
SMOOTH JAZZ CONNECT — SETTINGS PAGE
12/10 COMPACT FUNCTIONAL CONTROL CENTER
Replace the complete previous Settings Page CSS section
========================================================= */

.settings-page {
--settings-cyan: #42efff;
--settings-blue: #4f8cff;
--settings-violet: #9567ff;
--settings-pink: #ff58d8;
--settings-green: #5df2ad;
--settings-gold: #ffd56f;
--settings-danger: #ff7183;

--settings-text: #f8fbff;
--settings-text-soft: rgba(235, 243, 255, 0.84);
--settings-muted: rgba(211, 225, 248, 0.67);
--settings-faint: rgba(211, 225, 248, 0.44);

--settings-surface: rgba(8, 17, 37, 0.94);
--settings-surface-soft: rgba(14, 28, 56, 0.77);
--settings-surface-strong: rgba(5, 12, 28, 0.98);

--settings-border: rgba(110, 222, 255, 0.15);
--settings-border-hover: rgba(110, 222, 255, 0.3);
--settings-border-strong: rgba(110, 222, 255, 0.4);

--settings-radius-sm: 14px;
--settings-radius-md: 19px;
--settings-radius-lg: 26px;
--settings-radius-xl: 32px;

--settings-shadow:
0 24px 68px rgba(0, 0, 0, 0.34),
0 0 36px rgba(66, 239, 255, 0.04);

position: relative;
display: grid;
gap: clamp(18px, 2.4vw, 28px);
width: min(100%, 1320px);
margin-inline: auto;
padding: clamp(4px, 1vw, 12px);
isolation: isolate;
}

.settings-page::before,
.settings-page::after {
position: fixed;
z-index: -2;
width: min(48vw, 680px);
aspect-ratio: 1;
border-radius: 50%;
pointer-events: none;
content: "";
filter: blur(120px);
opacity: 0.1;
}

.settings-page::before {
top: 7%;
left: 27%;
background:
radial-gradient(
circle,
rgba(66, 239, 255, 0.68),
rgba(79, 140, 255, 0.18) 45%,
transparent 72%
);
}

.settings-page::after {
right: -13%;
bottom: -15%;
background:
radial-gradient(
circle,
rgba(149, 103, 255, 0.55),
rgba(255, 88, 216, 0.14) 46%,
transparent 72%
);
}

.settings-page .content-card {
position: relative;
min-width: 0;
overflow: hidden;
border: 1px solid var(--settings-border);
border-radius: var(--settings-radius-lg);
background:
linear-gradient(
145deg,
rgba(14, 28, 56, 0.95),
rgba(5, 12, 28, 0.98)
);
box-shadow: var(--settings-shadow);
backdrop-filter: blur(24px) saturate(145%);
-webkit-backdrop-filter: blur(24px) saturate(145%);
}

.settings-page .content-card::before {
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
content: "";
background:
linear-gradient(
120deg,
rgba(255, 255, 255, 0.055),
transparent 28%,
transparent 72%,
rgba(66, 239, 255, 0.035)
);
}

.settings-page .content-card > * {
position: relative;
z-index: 1;
}

.settings-page h1,
.settings-page h2,
.settings-page h3,
.settings-page p {
text-wrap: balance;
}

.settings-page h1,
.settings-page h2,
.settings-page h3 {
margin-top: 0;
color: var(--settings-text);
}

.settings-page p,
.settings-page small {
color: var(--settings-muted);
line-height: 1.65;
}

.settings-page .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
margin: 0 0 10px;
color: var(--settings-cyan);
font-size: clamp(0.64rem, 0.72vw, 0.72rem);
font-weight: 950;
line-height: 1.2;
letter-spacing: 0.15em;
text-transform: uppercase;
}

.settings-page .eyebrow::before {
width: 18px;
height: 2px;
flex: 0 0 auto;
border-radius: 999px;
background:
linear-gradient(
90deg,
var(--settings-cyan),
var(--settings-violet)
);
box-shadow:
0 0 12px rgba(66, 239, 255, 0.56);
content: "";
}

/* =========================================================
COMPACT SETTINGS HERO
========================================================= */

.settings-hero {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(190px, 260px);
align-items: center;
gap: clamp(24px, 4vw, 48px);
min-height: clamp(300px, 38vh, 410px);
padding:
clamp(28px, 4vw, 46px)
clamp(24px, 4.5vw, 54px);
background:
radial-gradient(
circle at 87% 22%,
rgba(149, 103, 255, 0.2),
transparent 34%
),
radial-gradient(
circle at 12% 92%,
rgba(66, 239, 255, 0.1),
transparent 38%
),
linear-gradient(
145deg,
rgba(14, 30, 63, 0.99),
rgba(5, 12, 29, 0.99)
) !important;
}

.settings-hero-content {
display: flex;
flex-direction: column;
align-items: flex-start;
width: min(100%, 680px);
}

.settings-hero h1 {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
max-width: 600px;
margin: 0 0 15px;
font-size: clamp(1.9rem, 3.5vw, 3.15rem);
font-weight: 950;
line-height: 1;
letter-spacing: -0.052em;
text-align: left;
}

.settings-hero h1 > span {
display: block;
width: 100%;
text-align: left;
}

.settings-hero h1 > span + span {
margin-top: 5px;
}

.settings-hero h1 > span:last-child {
background:
linear-gradient(
100deg,
var(--settings-cyan) 0%,
#8fc8ff 34%,
var(--settings-violet) 68%,
var(--settings-pink) 100%
);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
filter:
drop-shadow(
0 0 13px rgba(66, 239, 255, 0.15)
);
}

.settings-hero p {
max-width: 630px;
margin: 0;
color: var(--settings-text-soft);
font-size: clamp(0.9rem, 1.05vw, 1.02rem);
line-height: 1.68;
}

.settings-hero-visual {
display: grid;
place-items: center;
min-height: 215px;
}

.settings-control-orbit {
position: relative;
display: grid;
place-items: center;
width: min(20vw, 230px);
min-width: 185px;
aspect-ratio: 1;
}

.settings-control-core {
position: relative;
z-index: 3;
display: grid;
place-items: center;
width: 57%;
aspect-ratio: 1;
border: 1px solid rgba(66, 239, 255, 0.3);
border-radius: 50%;
color: var(--settings-cyan);
font-size: clamp(2.3rem, 4.8vw, 3.6rem);
background:
radial-gradient(
circle at 35% 25%,
rgba(255, 255, 255, 0.14),
transparent 28%
),
linear-gradient(
145deg,
rgba(14, 29, 58, 0.94),
rgba(4, 10, 25, 0.99)
);
box-shadow:
inset 0 0 34px rgba(66, 239, 255, 0.07),
0 0 28px rgba(66, 239, 255, 0.16),
0 0 58px rgba(149, 103, 255, 0.1);
animation:
settingsControlFloat 5s ease-in-out infinite;
}

.settings-control-core span {
filter:
drop-shadow(
0 0 14px rgba(66, 239, 255, 0.46)
);
}

.settings-orbit {
position: absolute;
border: 1px solid rgba(66, 239, 255, 0.17);
border-radius: 50%;
}

.settings-orbit::before {
position: absolute;
top: 50%;
left: -4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--settings-cyan);
content: "";
box-shadow:
0 0 9px var(--settings-cyan),
0 0 19px rgba(66, 239, 255, 0.7);
}

.settings-orbit-one {
inset: 5%;
animation:
settingsOrbitSpin 17s linear infinite;
}

.settings-orbit-two {
inset: 18%;
border-color: rgba(149, 103, 255, 0.22);
animation:
settingsOrbitSpinReverse 12s linear infinite;
}

.settings-orbit-two::before {
background: var(--settings-violet);
box-shadow:
0 0 9px var(--settings-violet),
0 0 19px rgba(149, 103, 255, 0.68);
}

/* =========================================================
MAIN SETTINGS LAYOUT
========================================================= */

.settings-layout {
display: grid;
grid-template-columns:
minmax(220px, 250px)
minmax(0, 1fr);
gap: clamp(16px, 2vw, 24px);
align-items: start;
}

.settings-navigation {
position: sticky !important;
top: 16px;
z-index: 12;
display: grid;
gap: 7px;
padding: 18px;
}

.settings-navigation .eyebrow {
margin: 2px 4px 8px;
}

.settings-navigation-link {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 10px;
align-items: center;
min-height: 46px;
padding: 8px 11px;
border: 1px solid transparent;
border-radius: 13px;
color: var(--settings-muted);
font-size: 0.77rem;
font-weight: 850;
text-decoration: none;
transition:
transform 180ms ease,
border-color 180ms ease,
color 180ms ease,
background 180ms ease,
box-shadow 180ms ease;
}

.settings-navigation-link > span:first-child {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 10px;
color: var(--settings-cyan);
background: rgba(66, 239, 255, 0.06);
}

.settings-navigation-link:hover {
transform: translateX(3px);
border-color: rgba(66, 239, 255, 0.17);
color: var(--settings-text);
background:
linear-gradient(
145deg,
rgba(66, 239, 255, 0.07),
rgba(149, 103, 255, 0.04)
);
}

.settings-navigation-link.is-active,
.settings-navigation-link[aria-current="true"],
.settings-navigation-link[aria-current="page"] {
border-color: rgba(66, 239, 255, 0.3);
color: var(--settings-text);
background:
linear-gradient(
135deg,
rgba(66, 239, 255, 0.13),
rgba(149, 103, 255, 0.08)
);
box-shadow:
inset 3px 0 0 var(--settings-cyan),
0 9px 22px rgba(0, 0, 0, 0.14);
}

.settings-form {
display: grid;
gap: clamp(16px, 2vw, 22px);
min-width: 0;
}

/* =========================================================
SECTION CARDS
========================================================= */

.settings-section-card {
min-width: 0;
padding: clamp(22px, 3.2vw, 34px);
scroll-margin-top: 22px;
}

.settings-section-header {
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto;
gap: 20px;
align-items: start;
margin-bottom: 24px;
}

.settings-section-header > div:first-child {
min-width: 0;
max-width: 760px;
}

.settings-section-header h2 {
margin: 0 0 8px;
font-size: clamp(1.35rem, 2.2vw, 2rem);
font-weight: 930;
line-height: 1.08;
letter-spacing: -0.038em;
}

.settings-section-header p {
max-width: 720px;
margin: 0;
font-size: 0.82rem;
}

.settings-section-icon {
display: grid;
place-items: center;
width: 50px;
height: 50px;
border: 1px solid rgba(66, 239, 255, 0.22);
border-radius: 15px;
color: var(--settings-cyan);
font-size: 1.14rem;
background:
linear-gradient(
145deg,
rgba(66, 239, 255, 0.1),
rgba(149, 103, 255, 0.065)
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 20px rgba(66, 239, 255, 0.06);
}

/* =========================================================
FORM GRID
========================================================= */

.settings-form-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 17px;
width: 100%;
min-width: 0;
}

.settings-field-wide {
grid-column: 1 / -1;
}

.settings-page .form-field {
display: grid;
align-content: start;
gap: 8px;
min-width: 0;
}

.settings-page .form-field > label {
color: var(--settings-text);
font-size: 0.78rem;
font-weight: 850;
line-height: 1.35;
}

.settings-page .form-field small {
display: block;
margin: 0;
font-size: 0.69rem;
line-height: 1.55;
}

.settings-page input[type="text"],
.settings-page input[type="email"],
.settings-page input[type="url"],
.settings-page input[type="password"],
.settings-page input[type="search"],
.settings-page input[type="tel"],
.settings-page input[type="number"],
.settings-page select,
.settings-page textarea {
display: block;
width: 100%;
min-width: 0;
min-height: 48px;
margin: 0;
padding: 11px 13px;
border: 1px solid rgba(110, 222, 255, 0.16);
border-radius: 14px;
color: var(--settings-text);
font: inherit;
font-size: 0.86rem;
line-height: 1.4;
background:
linear-gradient(
145deg,
rgba(3, 10, 24, 0.87),
rgba(8, 18, 38, 0.91)
);
outline: none;
appearance: none;
-webkit-appearance: none;
transition:
border-color 180ms ease,
background 180ms ease,
box-shadow 180ms ease;
}

.settings-page select {
padding-right: 42px;
color-scheme: dark;
cursor: pointer;
background-image:
linear-gradient(
45deg,
transparent 50%,
var(--settings-cyan) 50%
),
linear-gradient(
135deg,
var(--settings-cyan) 50%,
transparent 50%
),
linear-gradient(
145deg,
rgba(3, 10, 24, 0.87),
rgba(8, 18, 38, 0.91)
);
background-position:
calc(100% - 18px) 51%,
calc(100% - 13px) 51%,
0 0;
background-size:
5px 5px,
5px 5px,
100% 100%;
background-repeat: no-repeat;
}

.settings-page textarea {
min-height: 132px;
max-height: 420px;
resize: vertical;
line-height: 1.58;
}

.settings-page input::placeholder,
.settings-page textarea::placeholder {
color: rgba(211, 225, 248, 0.39);
}

.settings-page input:hover,
.settings-page select:hover,
.settings-page textarea:hover {
border-color: rgba(110, 222, 255, 0.27);
}

.settings-page input:focus,
.settings-page select:focus,
.settings-page textarea:focus {
border-color: rgba(66, 239, 255, 0.52);
background-color: rgba(6, 15, 34, 0.98);
box-shadow:
0 0 0 4px rgba(66, 239, 255, 0.075),
0 0 24px rgba(66, 239, 255, 0.06);
}

.settings-page input:disabled,
.settings-page select:disabled,
.settings-page textarea:disabled {
cursor: not-allowed;
opacity: 0.56;
}

.settings-input-prefix {
display: grid;
grid-template-columns:
auto
minmax(0, 1fr);
align-items: center;
width: 100%;
min-height: 48px;
overflow: hidden;
border: 1px solid rgba(110, 222, 255, 0.16);
border-radius: 14px;
background:
linear-gradient(
145deg,
rgba(3, 10, 24, 0.87),
rgba(8, 18, 38, 0.91)
);
transition:
border-color 180ms ease,
box-shadow 180ms ease;
}

.settings-input-prefix:hover {
border-color: rgba(110, 222, 255, 0.27);
}

.settings-input-prefix:focus-within {
border-color: rgba(66, 239, 255, 0.52);
box-shadow:
0 0 0 4px rgba(66, 239, 255, 0.075),
0 0 24px rgba(66, 239, 255, 0.06);
}

.settings-input-prefix > span {
padding-left: 14px;
color: var(--settings-cyan);
font-size: 0.83rem;
font-weight: 900;
}

.settings-input-prefix input {
min-height: 46px !important;
padding-left: 7px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}

.settings-field-meta {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
min-width: 0;
}

.settings-field-meta small {
min-width: 0;
}

.settings-field-meta > span {
flex: 0 0 auto;
color: var(--settings-faint);
font-size: 0.67rem;
font-weight: 750;
}

/* =========================================================
ACCOUNT EMAIL
========================================================= */

.settings-account-email-card {
display: grid;
grid-template-columns:
50px
minmax(0, 1fr)
auto;
gap: 15px;
align-items: center;
width: 100%;
min-width: 0;
padding: 17px;
border: 1px solid rgba(110, 222, 255, 0.15);
border-radius: 18px;
background:
linear-gradient(
145deg,
rgba(66, 239, 255, 0.065),
rgba(149, 103, 255, 0.04)
);
}

.settings-account-email-icon {
display: grid;
place-items: center;
width: 50px;
height: 50px;
border: 1px solid rgba(66, 239, 255, 0.22);
border-radius: 15px;
color: var(--settings-cyan);
font-size: 1.13rem;
background:
linear-gradient(
145deg,
rgba(66, 239, 255, 0.1),
rgba(149, 103, 255, 0.065)
);
}

.settings-account-email-copy {
min-width: 0;
}

.settings-account-email-label,
.settings-account-email-copy strong {
display: block;
}

.settings-account-email-label {
margin-bottom: 4px;
color: var(--settings-muted);
font-size: 0.66rem;
font-weight: 850;
letter-spacing: 0.075em;
text-transform: uppercase;
}

.settings-account-email-copy strong {
overflow: hidden;
color: var(--settings-text);
font-size: 0.88rem;
text-overflow: ellipsis;
white-space: nowrap;
}

.settings-email-status-row {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 7px;
}

.settings-status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 27px;
padding: 5px 9px;
border: 1px solid rgba(255, 213, 111, 0.23);
border-radius: 999px;
color: var(--settings-gold);
font-size: 0.63rem;
font-weight: 850;
background: rgba(255, 213, 111, 0.065);
}

.settings-status-badge.is-verified {
border-color: rgba(93, 242, 173, 0.25);
color: var(--settings-green);
background: rgba(93, 242, 173, 0.065);
}

.settings-status-badge.is-error {
border-color: rgba(255, 113, 131, 0.28);
color: #ffc7ce;
background: rgba(255, 113, 131, 0.075);
}

.settings-verify-email-button {
align-self: center;
min-width: 128px;
min-height: 43px;
padding: 9px 15px;
border-radius: 13px;
white-space: nowrap;
font-size: 0.74rem;
font-weight: 900;
}

.settings-account-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 14px;
}

/* =========================================================
TOOL BUTTONS
========================================================= */

.settings-page .tool-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 42px;
padding: 8px 13px;
border: 1px solid rgba(110, 222, 255, 0.16);
border-radius: 12px;
color: var(--settings-text-soft);
font: inherit;
font-size: 0.73rem;
font-weight: 850;
text-decoration: none;
background:
linear-gradient(
145deg,
rgba(66, 239, 255, 0.065),
rgba(149, 103, 255, 0.04)
);
cursor: pointer;
transition:
transform 180ms ease,
border-color 180ms ease,
color 180ms ease,
background 180ms ease,
box-shadow 180ms ease;
}

.settings-page .tool-button:hover:not(:disabled) {
transform: translateY(-2px);
border-color: rgba(66, 239, 255, 0.34);
color: var(--settings-text);
background:
linear-gradient(
145deg,
rgba(66, 239, 255, 0.12),
rgba(149, 103, 255, 0.075)
);
box-shadow:
0 9px 20px rgba(0, 0, 0, 0.15),
0 0 16px rgba(66, 239, 255, 0.05);
}

/* =========================================================
TOGGLE CONTROLS
========================================================= */

.settings-toggle-list {
display: grid;
gap: 10px;
}

.settings-toggle-row {
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto;
gap: 18px;
align-items: center;
min-height: 72px;
padding: 14px 15px;
border: 1px solid rgba(110, 222, 255, 0.11);
border-radius: 16px;
background:
linear-gradient(
145deg,
rgba(66, 239, 255, 0.035),
rgba(149, 103, 255, 0.022)
);
cursor: pointer;
transition:
transform 180ms ease,
border-color 180ms ease,
background 180ms ease;
}

.settings-toggle-row:hover {
transform: translateY(-2px);
border-color: rgba(66, 239, 255, 0.23);
background:
linear-gradient(
145deg,
rgba(66, 239, 255, 0.07),
rgba(149, 103, 255, 0.042)
);
}

.settings-toggle-copy {
min-width: 0;
}

.settings-toggle-copy strong,
.settings-toggle-copy small {
display: block;
}

.settings-toggle-copy strong {
margin-bottom: 4px;
color: var(--settings-text);
font-size: 0.82rem;
line-height: 1.35;
}

.settings-toggle-copy small {
max-width: 680px;
margin: 0;
font-size: 0.69rem;
line-height: 1.55;
}

.settings-switch {
position: relative;
display: inline-flex;
flex: 0 0 auto;
width: 50px;
height: 29px;
}

.settings-switch input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}

.settings-switch > span {
position: absolute;
inset: 0;
border: 1px solid rgba(110, 222, 255, 0.18);
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
box-shadow:
inset 0 2px 5px rgba(0, 0, 0, 0.23);
transition:
border-color 180ms ease,
background 180ms ease,
box-shadow 180ms ease;
}

.settings-switch > span::before {
position: absolute;
top: 4px;
left: 4px;
width: 19px;
height: 19px;
border-radius: 50%;
background: rgba(235, 243, 255, 0.83);
box-shadow:
0 3px 8px rgba(0, 0, 0, 0.22);
content: "";
transition:
transform 200ms ease,
background 200ms ease;
}

.settings-switch input:checked + span {
border-color: rgba(66, 239, 255, 0.42);
background:
linear-gradient(
135deg,
rgba(66, 239, 255, 0.92),
rgba(149, 103, 255, 0.85)
);
box-shadow:
0 0 17px rgba(66, 239, 255, 0.13),
inset 0 2px 5px rgba(0, 0, 0, 0.11);
}

.settings-switch input:checked + span::before {
transform: translateX(21px);
background: #ffffff;
}

.settings-switch input:focus-visible + span {
outline: 3px solid rgba(66, 239, 255, 0.82);
outline-offset: 3px;
}

/* =========================================================
SECURITY + MANAGEMENT
========================================================= */

.settings-security-grid,
.settings-management-list {
display: grid;
gap: 10px;
}

.settings-security-item,
.settings-management-item {
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto;
gap: 18px;
align-items: center;
min-height: 92px;
padding: 15px 16px;
border: 1px solid rgba(110, 222, 255, 0.11);
border-radius: 16px;
background:
linear-gradient(
145deg,
rgba(66, 239, 255, 0.035),
rgba(149, 103, 255, 0.022)
);
}

.settings-security-item > div,
.settings-management-item > div {
min-width: 0;
}

.settings-security-item strong,
.settings-management-item strong {
display: block;
margin-bottom: 5px;
color: var(--settings-text);
font-size: 0.84rem;
}

.settings-security-item p,
.settings-management-item p {
max-width: 680px;
margin: 0;
font-size: 0.73rem;
line-height: 1.58;
}

/* =========================================================
DANGER ZONE
========================================================= */

.settings-danger-section {
border-color: rgba(255, 113, 131, 0.18) !important;
background:
radial-gradient(
circle at 100% 0%,
rgba(255, 113, 131, 0.09),
transparent 37%
),
linear-gradient(
145deg,
rgba(22, 23, 48, 0.97),
rgba(7, 12, 28, 0.99)
) !important;
}

.settings-danger-section .settings-section-icon {
border-color: rgba(255, 113, 131, 0.24);
color: #ff9baa;
background: rgba(255, 113, 131, 0.075);
}

.settings-management-item.is-danger {
border-color: rgba(255, 113, 131, 0.18);
background: rgba(255, 113, 131, 0.05);
}

.settings-danger-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 43px;
padding: 9px 15px;
border: 1px solid rgba(255, 113, 131, 0.42);
border-radius: 13px;
color: #ffffff;
font: inherit;
font-size: 0.73rem;
font-weight: 900;
white-space: nowrap;
background:
linear-gradient(
135deg,
#e7485e,
#bf314b
);
box-shadow:
0 11px 25px rgba(191, 49, 75, 0.18);
cursor: pointer;
transition:
transform 180ms ease,
filter 180ms ease,
box-shadow 180ms ease;
}

.settings-danger-button:hover {
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow:
0 15px 31px rgba(191, 49, 75, 0.28);
}

/* =========================================================
STATUS MESSAGES
========================================================= */

.settings-status {
padding: 11px 13px;
border: 1px solid rgba(110, 222, 255, 0.14);
border-radius: 13px;
color: var(--settings-muted);
font-size: 0.77rem;
line-height: 1.55;
background: rgba(6, 15, 33, 0.77);
}

.settings-status[data-type="error"],
.settings-status.is-error {
border-color: rgba(255, 113, 131, 0.3);
color: #ffd5da;
background: rgba(255, 113, 131, 0.075);
}

.settings-status[data-type="success"],
.settings-status.is-success {
border-color: rgba(93, 242, 173, 0.28);
color: #caffdf;
background: rgba(93, 242, 173, 0.075);
}

.settings-status[data-type="warning"],
.settings-status.is-warning {
border-color: rgba(255, 213, 111, 0.28);
color: #ffe8af;
background: rgba(255, 213, 111, 0.07);
}

/* =========================================================
SAVE BAR
========================================================= */

.settings-save-bar {
position: sticky !important;
bottom: 12px;
z-index: 30;
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto;
gap: 22px;
align-items: center;
padding: 16px 18px;
border-color: rgba(66, 239, 255, 0.23) !important;
background:
linear-gradient(
145deg,
rgba(11, 25, 51, 0.97),
rgba(5, 12, 28, 0.99)
) !important;
box-shadow:
0 21px 52px rgba(0, 0, 0, 0.38),
0 0 26px rgba(66, 239, 255, 0.07) !important;
}

.settings-save-bar > div:first-child {
min-width: 0;
}

.settings-save-bar strong {
display: block;
margin-bottom: 3px;
color: var(--settings-text);
font-size: 0.84rem;
}

.settings-save-bar p {
margin: 0;
font-size: 0.7rem;
line-height: 1.5;
}

.settings-save-actions {
display: flex;
flex: 0 0 auto;
gap: 9px;
}

.settings-save-actions .button {
min-height: 44px;
padding-inline: 16px;
border-radius: 13px;
font-size: 0.75rem;
font-weight: 900;
}

.settings-save-actions .button-primary {
min-width: 142px;
box-shadow:
0 13px 27px rgba(65, 103, 255, 0.2),
0 0 19px rgba(66, 239, 255, 0.07);
}

/* =========================================================
LIGHT THEME
========================================================= */

html[data-theme="light"] .settings-page {
--settings-text: #10213d;
--settings-text-soft: rgba(29, 51, 84, 0.82);
--settings-muted: rgba(36, 59, 91, 0.69);
--settings-faint: rgba(36, 59, 91, 0.46);
--settings-border: rgba(44, 105, 164, 0.14);
--settings-border-hover: rgba(44, 105, 164, 0.26);
--settings-shadow:
0 21px 54px rgba(45, 77, 116, 0.13),
0 0 25px rgba(66, 239, 255, 0.035);
}

html[data-theme="light"] .settings-page .content-card {
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.98),
rgba(237, 245, 255, 0.97)
);
}

html[data-theme="light"] .settings-page input[type="text"],
html[data-theme="light"] .settings-page input[type="email"],
html[data-theme="light"] .settings-page input[type="url"],
html[data-theme="light"] .settings-page input[type="password"],
html[data-theme="light"] .settings-page input[type="search"],
html[data-theme="light"] .settings-page input[type="tel"],
html[data-theme="light"] .settings-page input[type="number"],
html[data-theme="light"] .settings-page select,
html[data-theme="light"] .settings-page textarea,
html[data-theme="light"] .settings-input-prefix {
color: #10213d;
color-scheme: light;
background-color: rgba(240, 247, 255, 0.97);
}

html[data-theme="light"] .settings-page select {
background-image:
linear-gradient(
45deg,
transparent 50%,
#286da9 50%
),
linear-gradient(
135deg,
#286da9 50%,
transparent 50%
),
linear-gradient(
145deg,
rgba(242, 248, 255, 0.98),
rgba(230, 241, 253, 0.97)
);
}

html[data-theme="light"] .settings-page input::placeholder,
html[data-theme="light"] .settings-page textarea::placeholder {
color: rgba(36, 59, 91, 0.39);
}

html[data-theme="light"] .settings-toggle-row,
html[data-theme="light"] .settings-security-item,
html[data-theme="light"] .settings-management-item,
html[data-theme="light"] .settings-account-email-card {
background:
linear-gradient(
145deg,
rgba(234, 246, 255, 0.88),
rgba(241, 239, 255, 0.74)
);
}

html[data-theme="light"] .settings-switch > span {
background: rgba(36, 59, 91, 0.12);
}

html[data-theme="light"] .settings-save-bar {
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.99),
rgba(232, 243, 255, 0.99)
) !important;
}

html[data-theme="light"] .settings-danger-section {
background:
linear-gradient(
145deg,
rgba(255, 250, 251, 0.99),
rgba(253, 239, 243, 0.97)
) !important;
}

/* =========================================================
RESPONSIVE — MEDIUM DESKTOP
========================================================= */

@media (max-width: 1080px) {
.settings-layout {
grid-template-columns:
minmax(205px, 225px)
minmax(0, 1fr);
}

.settings-hero {
grid-template-columns:
minmax(0, 1fr)
minmax(175px, 220px);
}

.settings-control-orbit {
width: min(22vw, 215px);
}
}

/* =========================================================
RESPONSIVE — TABLET NAVIGATION
========================================================= */

@media (max-width: 900px) {
.settings-layout {
grid-template-columns: minmax(0, 1fr);
}

.settings-navigation {
position: static !important;
display: flex;
gap: 7px;
padding: 13px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scrollbar-width: none;
}

.settings-navigation::-webkit-scrollbar {
display: none;
}

.settings-navigation .eyebrow {
display: none;
}

.settings-navigation-link {
flex: 0 0 auto;
grid-template-columns:
auto
auto;
min-height: 40px;
padding: 7px 11px;
border-radius: 999px;
white-space: nowrap;
}

.settings-navigation-link > span:first-child {
width: 26px;
height: 26px;
border-radius: 50%;
}

.settings-navigation-link.is-active,
.settings-navigation-link[aria-current="true"],
.settings-navigation-link[aria-current="page"] {
box-shadow:
0 7px 18px rgba(0, 0, 0, 0.13);
}
}

/* =========================================================
RESPONSIVE — TABLET HERO
========================================================= */

@media (max-width: 820px) {
.settings-page {
gap: 16px;
padding: 3px;
}

.settings-hero {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
min-height: auto;
padding: 31px 23px;
text-align: center;
}

.settings-hero-content {
align-items: center;
width: min(100%, 650px);
margin-inline: auto;
}

.settings-hero .eyebrow {
justify-content: center;
}

.settings-hero h1 {
align-items: center;
max-width: 540px;
margin-inline: auto;
font-size: clamp(1.85rem, 6.8vw, 2.75rem);
text-align: center;
}

.settings-hero h1 > span,
.settings-hero p {
text-align: center;
}

.settings-hero-visual {
min-height: 180px;
}

.settings-control-orbit {
width: min(48vw, 200px);
min-width: 165px;
}

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

.settings-field-wide {
grid-column: auto;
}

.settings-account-email-card {
grid-template-columns:
50px
minmax(0, 1fr);
}

.settings-verify-email-button {
grid-column: 1 / -1;
width: 100%;
}
}

/* =========================================================
RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 680px) {
.settings-section-card {
padding: 20px 16px;
}

.settings-section-header {
grid-template-columns: minmax(0, 1fr);
gap: 13px;
}

.settings-section-icon {
grid-row: 1;
width: 45px;
height: 45px;
border-radius: 14px;
}

.settings-section-header > div:first-child {
grid-row: 2;
}

.settings-toggle-row {
gap: 13px;
}

.settings-security-item,
.settings-management-item {
grid-template-columns: minmax(0, 1fr);
gap: 13px;
}

.settings-security-item .tool-button,
.settings-management-item .button,
.settings-management-item .tool-button,
.settings-management-item .settings-danger-button {
width: 100%;
}

.settings-save-bar {
position: static !important;
grid-template-columns: minmax(0, 1fr);
gap: 15px;
}

.settings-save-actions {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
width: 100%;
}

.settings-save-actions .button {
width: 100%;
}
}

@media (max-width: 520px) {
.settings-hero {
padding: 26px 16px;
}

.settings-hero h1 {
max-width: 410px;
font-size: clamp(1.65rem, 8.4vw, 2.2rem);
line-height: 1.03;
letter-spacing: -0.045em;
}

.settings-hero p {
font-size: 0.87rem;
line-height: 1.6;
}

.settings-hero-visual {
min-height: 158px;
}

.settings-control-orbit {
width: min(54vw, 180px);
min-width: 150px;
}

.settings-account-email-card {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
text-align: center;
}

.settings-account-email-copy {
width: 100%;
}

.settings-account-email-icon {
margin-inline: auto;
}

.settings-account-email-copy strong {
white-space: normal;
overflow-wrap: anywhere;
}

.settings-email-status-row {
justify-content: center;
}

.settings-account-actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
}

.settings-account-actions .tool-button,
.settings-account-actions .button {
width: 100%;
}

.settings-toggle-row {
align-items: start;
}

.settings-switch {
margin-top: 3px;
}

.settings-field-meta {
flex-direction: column;
gap: 3px;
}

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

@media (max-width: 400px) {
.settings-navigation-link {
grid-template-columns: auto;
}

.settings-navigation-link > span:first-child {
display: none;
}

.settings-toggle-row {
padding: 13px;
}

.settings-switch {
width: 47px;
height: 28px;
}

.settings-switch > span::before {
width: 18px;
height: 18px;
}

.settings-switch input:checked + span::before {
transform: translateX(19px);
}
}

/* =========================================================
ACCESSIBILITY
========================================================= */

.settings-page button:focus-visible,
.settings-page a:focus-visible,
.settings-page input:focus-visible,
.settings-page select:focus-visible,
.settings-page textarea:focus-visible {
outline: 3px solid rgba(66, 239, 255, 0.86);
outline-offset: 3px;
}

.settings-page [aria-invalid="true"] {
border-color: rgba(255, 113, 131, 0.62) !important;
box-shadow:
0 0 0 4px rgba(255, 113, 131, 0.09) !important;
}

.settings-page button:disabled,
.settings-page .button:disabled,
.settings-page .tool-button:disabled {
cursor: not-allowed;
opacity: 0.5;
transform: none !important;
}

/* =========================================================
REDUCED MOTION
========================================================= */

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

/* =========================================================
ANIMATIONS
========================================================= */

@keyframes settingsOrbitSpin {
from {
transform: rotate(0deg);
}

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

@keyframes settingsOrbitSpinReverse {
from {
transform: rotate(360deg);
}

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

@keyframes settingsControlFloat {
0%,
100% {
transform: translateY(0) scale(1);
}

50% {
transform: translateY(-6px) scale(1.02);
}
}

/* =========================================================
   SMOOTH JAZZ CONNECT — TERMS OF SERVICE PAGE
   12/10 PREMIUM LEGAL EXPERIENCE
   Append to the bottom of styles.css
   ========================================================= */

.terms-page {
  --terms-cyan: #42efff;
  --terms-blue: #4f8cff;
  --terms-violet: #9567ff;
  --terms-pink: #ff58d8;
  --terms-green: #5df2ad;
  --terms-gold: #ffd56f;
  --terms-red: #ff7485;

  --terms-text: #f8fbff;
  --terms-text-soft: rgba(235, 243, 255, 0.85);
  --terms-muted: rgba(211, 225, 248, 0.69);

  --terms-surface: rgba(8, 17, 37, 0.92);
  --terms-surface-soft: rgba(14, 28, 56, 0.76);
  --terms-surface-strong: rgba(5, 12, 28, 0.98);

  --terms-border: rgba(110, 222, 255, 0.15);
  --terms-border-strong: rgba(110, 222, 255, 0.34);

  --terms-shadow:
    0 30px 86px rgba(0, 0, 0, 0.4),
    0 0 54px rgba(66, 239, 255, 0.055);

  position: relative;
  display: grid;
  gap: clamp(20px, 2.8vw, 34px);
  width: min(100%, 1280px);
  margin-inline: auto;
  padding: clamp(8px, 1.5vw, 18px);
  isolation: isolate;
}

.terms-page::before,
.terms-page::after {
  position: fixed;
  z-index: -2;
  width: min(54vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  filter: blur(110px);
  opacity: 0.13;
}

.terms-page::before {
  top: 4%;
  left: 30%;
  background:
    radial-gradient(
      circle,
      rgba(66, 239, 255, 0.68),
      rgba(79, 140, 255, 0.2) 44%,
      transparent 72%
    );
}

.terms-page::after {
  right: -12%;
  bottom: -14%;
  background:
    radial-gradient(
      circle,
      rgba(149, 103, 255, 0.58),
      rgba(255, 88, 216, 0.16) 46%,
      transparent 72%
    );
}

.terms-page > .content-card,
.terms-page .terms-section-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--terms-border);
  border-radius: clamp(22px, 2.6vw, 34px);
  background:
    linear-gradient(
      145deg,
      rgba(14, 28, 56, 0.95),
      rgba(5, 12, 28, 0.97)
    );
  box-shadow: var(--terms-shadow);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}

.terms-page > .content-card::before,
.terms-page .terms-section-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.07),
      transparent 26%,
      transparent 72%,
      rgba(66, 239, 255, 0.045)
    );
}

.terms-page h1,
.terms-page h2,
.terms-page h3 {
  margin-top: 0;
  color: var(--terms-text);
  text-wrap: balance;
}

.terms-page h2 {
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.terms-page h3 {
  font-size: clamp(1.02rem, 1.6vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.terms-page p,
.terms-page li {
  color: var(--terms-muted);
  line-height: 1.78;
}

.terms-page a {
  color: inherit;
}

.terms-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0 0 10px;
  color: var(--terms-cyan);
  font-size: clamp(0.69rem, 0.8vw, 0.78rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.terms-page .eyebrow::before {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--terms-cyan),
      var(--terms-violet)
    );
  content: "";
  box-shadow:
    0 0 14px rgba(66, 239, 255, 0.68);
}

/* =========================================================
   HERO
   ========================================================= */

.terms-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(230px, 0.84fr);
  align-items: center;
  gap: clamp(28px, 5vw, 62px);
  min-height: clamp(420px, 52vh, 580px);
  padding:
    clamp(34px, 5vw, 60px)
    clamp(26px, 5vw, 64px);
  background:
    radial-gradient(
      circle at 86% 26%,
      rgba(149, 103, 255, 0.22),
      transparent 35%
    ),
    radial-gradient(
      circle at 12% 92%,
      rgba(66, 239, 255, 0.12),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(14, 30, 63, 0.99),
      rgba(5, 12, 29, 0.98)
    ) !important;
}

.terms-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 720px;
}

.terms-hero h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 640px;
  margin: 0 0 20px;
  font-size: clamp(2.35rem, 4.6vw, 4.25rem);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.terms-hero h1 span {
  display: block;
  margin-top: 6px;
  background:
    linear-gradient(
      100deg,
      var(--terms-cyan) 0%,
      #8fc8ff 34%,
      var(--terms-violet) 68%,
      var(--terms-pink) 100%
    );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter:
    drop-shadow(
      0 0 16px rgba(66, 239, 255, 0.18)
    );
}

.terms-hero-lead {
  max-width: 680px;
  margin: 0;
  color: var(--terms-text-soft) !important;
  font-size: clamp(1rem, 1.35vw, 1.16rem);
}

.terms-effective-date {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  min-height: 40px;
  margin-top: 24px;
  padding: 9px 14px;
  border: 1px solid rgba(110, 222, 255, 0.17);
  border-radius: 999px;
  color: var(--terms-text-soft);
  font-size: 0.78rem;
  font-weight: 800;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.07),
      rgba(149, 103, 255, 0.045)
    );
}

.terms-effective-date span:first-child {
  color: var(--terms-cyan);
  font-size: 1rem;
}

.terms-hero-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 290px;
}

.terms-agreement-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: min(27vw, 310px);
  min-width: 225px;
  aspect-ratio: 1;
}

.terms-agreement-core {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 60%;
  aspect-ratio: 1;
  border: 1px solid rgba(66, 239, 255, 0.3);
  border-radius: 32px;
  color: var(--terms-cyan);
  font-size: clamp(3rem, 6vw, 4.6rem);
  transform: rotate(45deg);
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.15),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(14, 29, 58, 0.94),
      rgba(4, 10, 25, 0.99)
    );
  box-shadow:
    inset 0 0 45px rgba(66, 239, 255, 0.08),
    0 0 36px rgba(66, 239, 255, 0.2),
    0 0 82px rgba(149, 103, 255, 0.14);
  animation:
    termsAgreementFloat 5s ease-in-out infinite;
}

.terms-agreement-core span {
  transform: rotate(-45deg);
  filter:
    drop-shadow(
      0 0 18px rgba(66, 239, 255, 0.52)
    );
}

.terms-orbit {
  position: absolute;
  border: 1px solid rgba(66, 239, 255, 0.2);
  border-radius: 50%;
}

.terms-orbit::before {
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--terms-cyan);
  content: "";
  box-shadow:
    0 0 10px var(--terms-cyan),
    0 0 24px rgba(66, 239, 255, 0.8);
}

.terms-orbit-one {
  inset: 5%;
  animation:
    termsOrbitSpin 14s linear infinite;
}

.terms-orbit-two {
  inset: 18%;
  border-color: rgba(149, 103, 255, 0.24);
  animation:
    termsOrbitSpinReverse 10s linear infinite;
}

.terms-orbit-two::before {
  background: var(--terms-violet);
  box-shadow:
    0 0 10px var(--terms-violet),
    0 0 24px rgba(149, 103, 255, 0.76);
}

/* =========================================================
   INTRODUCTION
   ========================================================= */

.terms-introduction-card {
  padding: clamp(28px, 5vw, 56px);
  background:
    radial-gradient(
      circle at 90% 12%,
      rgba(149, 103, 255, 0.13),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(14, 28, 56, 0.96),
      rgba(5, 12, 28, 0.98)
    ) !important;
}

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

.terms-introduction-card h2 {
  margin-bottom: 14px;
}

.terms-introduction-card p {
  max-width: 980px;
  margin: 0;
  font-size: clamp(0.98rem, 1.15vw, 1.06rem);
}

.terms-introduction-card p + p {
  margin-top: 16px;
}

/* =========================================================
   CONTENT LAYOUT
   ========================================================= */

.terms-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 26px);
}

.terms-section-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  padding: clamp(26px, 4vw, 46px);
}

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

.terms-section-number {
  display: grid;
  place-items: center;
  align-self: flex-start;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(66, 239, 255, 0.23);
  border-radius: 18px;
  color: var(--terms-cyan);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.11),
      rgba(149, 103, 255, 0.07)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 24px rgba(66, 239, 255, 0.07);
}

.terms-section-content {
  min-width: 0;
}

.terms-section-content h2 {
  margin-bottom: 14px;
}

.terms-section-content > p {
  max-width: 980px;
  margin: 0;
}

.terms-section-content > p + p {
  margin-top: 16px;
}

/* =========================================================
   TERMS LISTS
   ========================================================= */

.terms-list {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.terms-list + p {
  margin-top: 22px;
}

.terms-list li {
  position: relative;
  min-height: 44px;
  padding:
    12px
    14px
    12px
    46px;
  border: 1px solid rgba(110, 222, 255, 0.11);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.04),
      rgba(149, 103, 255, 0.02)
    );
}

.terms-list li::before {
  position: absolute;
  top: 13px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #04151f;
  font-size: 0.68rem;
  font-weight: 950;
  background:
    linear-gradient(
      135deg,
      var(--terms-cyan),
      var(--terms-green)
    );
  content: "✓";
  box-shadow:
    0 0 16px rgba(66, 239, 255, 0.18);
}

.terms-prohibited-list li {
  border-color: rgba(255, 116, 133, 0.12);
  background:
    linear-gradient(
      145deg,
      rgba(255, 116, 133, 0.045),
      rgba(149, 103, 255, 0.02)
    );
}

.terms-prohibited-list li::before {
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #ff7587,
      #d7425b
    );
  content: "×";
  box-shadow:
    0 0 16px rgba(255, 116, 133, 0.2);
}

/* =========================================================
   DETAIL CARDS
   ========================================================= */

.terms-detail-list {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 14px;
  margin-top: 24px;
}

.terms-detail-item {
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px solid rgba(110, 222, 255, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.045),
      rgba(149, 103, 255, 0.025)
    );
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.terms-detail-item:hover {
  transform: translateY(-3px);
  border-color: rgba(66, 239, 255, 0.26);
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.08),
      rgba(149, 103, 255, 0.045)
    );
}

.terms-detail-item h3 {
  margin-bottom: 8px;
}

.terms-detail-item p {
  margin: 0;
  font-size: 0.9rem;
}

/* =========================================================
   CONTACT CARD
   ========================================================= */

.terms-contact-card {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: clamp(20px, 4vw, 34px);
  padding: clamp(26px, 4vw, 42px);
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(255, 88, 216, 0.13),
      transparent 36%
    ),
    radial-gradient(
      circle at 10% 100%,
      rgba(66, 239, 255, 0.12),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(12, 31, 66, 0.98),
      rgba(13, 16, 44, 0.97)
    ) !important;
}

.terms-contact-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(66, 239, 255, 0.24);
  border-radius: 19px;
  color: var(--terms-cyan);
  font-size: 1.45rem;
  background:
    linear-gradient(
      145deg,
      rgba(66, 239, 255, 0.11),
      rgba(149, 103, 255, 0.07)
    );
  box-shadow:
    0 0 26px rgba(66, 239, 255, 0.08);
}

.terms-contact-content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.terms-contact-content h2 {
  margin-bottom: 10px;
  font-size: clamp(1.45rem, 2.7vw, 2.15rem);
}

.terms-contact-content p {
  max-width: 760px;
  margin: 0;
}

.terms-contact-details {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 15px;
  color: var(--terms-text-soft);
  font-size: 0.82rem;
  font-weight: 700;
}

.terms-contact-details a {
  color: var(--terms-cyan);
  text-decoration: none;
}

.terms-contact-details a:hover {
  text-decoration: underline;
}

.terms-contact-card .button {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 50px;
  padding-inline: 22px;
  border-radius: 15px;
  font-weight: 900;
  box-shadow:
    0 14px 32px rgba(65, 103, 255, 0.24),
    0 0 24px rgba(66, 239, 255, 0.08);
}

/* =========================================================
   LEGAL FOOTER
   ========================================================= */

.terms-legal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(10px, 2.4vw, 22px);
  padding: 18px 24px;
  border-radius: 20px !important;
  text-align: center;
}

.terms-legal-footer > * {
  position: relative;
  z-index: 1;
}

.terms-legal-footer a,
.terms-legal-footer span {
  color: var(--terms-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.terms-legal-footer a {
  text-decoration: none;
  transition: color 180ms ease;
}

.terms-legal-footer a:hover {
  color: var(--terms-cyan);
}

/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-theme="light"] .terms-page {
  --terms-text: #10213d;
  --terms-text-soft: rgba(29, 51, 84, 0.82);
  --terms-muted: rgba(36, 59, 91, 0.7);
  --terms-border: rgba(44, 105, 164, 0.14);
  --terms-border-strong: rgba(44, 105, 164, 0.28);
  --terms-shadow:
    0 24px 62px rgba(45, 77, 116, 0.14),
    0 0 30px rgba(66, 239, 255, 0.04);
}

html[data-theme="light"] .terms-page > .content-card,
html[data-theme="light"] .terms-page .terms-section-card {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(237, 245, 255, 0.96)
    );
}

html[data-theme="light"] .terms-detail-item,
html[data-theme="light"] .terms-list li {
  background:
    linear-gradient(
      145deg,
      rgba(234, 246, 255, 0.86),
      rgba(241, 239, 255, 0.72)
    );
}

html[data-theme="light"] .terms-prohibited-list li {
  background:
    linear-gradient(
      145deg,
      rgba(255, 242, 245, 0.94),
      rgba(249, 239, 255, 0.78)
    );
}

html[data-theme="light"] .terms-effective-date {
  color: rgba(29, 51, 84, 0.82);
}

html[data-theme="light"] .terms-contact-details {
  color: rgba(29, 51, 84, 0.8);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1020px) {
  .terms-hero {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(210px, 0.7fr);
  }

  .terms-agreement-orbit {
    width: min(29vw, 280px);
  }
}

@media (max-width: 820px) {
  .terms-page {
    gap: 18px;
    padding: 6px;
  }

  .terms-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: auto;
    padding: 38px 26px;
    text-align: center;
  }

  .terms-hero-content {
    align-items: center;
    max-width: 760px;
    margin-inline: auto;
  }

  .terms-hero h1 {
    align-items: center;
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
  }

  .terms-hero h1 span,
  .terms-hero-lead {
    text-align: center;
  }

  .terms-hero-visual {
    min-height: 245px;
  }

  .terms-agreement-orbit {
    width: min(62vw, 270px);
  }

  .terms-detail-list {
    grid-template-columns: 1fr;
  }

  .terms-contact-card {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .terms-contact-card .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .terms-hero {
    padding: 30px 20px;
  }

  .terms-hero h1 {
    font-size: clamp(2.05rem, 10.5vw, 3.05rem);
    line-height: 1;
  }

  .terms-introduction-card,
  .terms-section-card,
  .terms-contact-card {
    padding: 22px 17px;
  }

  .terms-section-card {
    grid-template-columns: 1fr;
  }

  .terms-section-number {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .terms-contact-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .terms-contact-icon {
    margin-inline: auto;
  }

  .terms-contact-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .terms-contact-details {
    justify-content: center;
  }
}

@media (max-width: 460px) {
  .terms-hero {
    padding: 27px 17px;
  }

  .terms-hero h1 {
    font-size: clamp(1.9rem, 9.8vw, 2.55rem);
  }

  .terms-hero-visual {
    min-height: 205px;
  }

  .terms-agreement-orbit {
    width: min(70vw, 220px);
    min-width: 180px;
  }

  .terms-agreement-core {
    border-radius: 24px;
  }

  .terms-detail-item {
    padding: 17px;
  }

  .terms-list li {
    padding:
      12px
      12px
      12px
      43px;
  }

  .terms-contact-details {
    flex-direction: column;
    align-items: center;
  }

  .terms-contact-details span[aria-hidden="true"] {
    display: none;
  }

  .terms-legal-footer {
    flex-direction: column;
    gap: 9px;
  }

  .terms-legal-footer > span[aria-hidden="true"] {
    display: none;
  }
}

/* =========================================================
   ACCESSIBILITY + MOTION
   ========================================================= */

.terms-page a:focus-visible,
.terms-page button:focus-visible {
  outline: 3px solid rgba(66, 239, 255, 0.86);
  outline-offset: 3px;
}

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

@keyframes termsOrbitSpin {
  from {
    transform: rotate(0deg);
  }

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

@keyframes termsOrbitSpinReverse {
  from {
    transform: rotate(360deg);
  }

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

@keyframes termsAgreementFloat {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(45deg)
      scale(1);
  }

  50% {
    transform:
      translateY(-8px)
      rotate(45deg)
      scale(1.025);
  }
}
/* =====================================================================
SMOOTH JAZZ CONNECT
REQUIRED ONBOARDING EXPERIENCE
File target: /styles.css
Version: 3.3.150
Paste this entire section at the bottom of the existing stylesheet.
===================================================================== */

/* =====================================================================
ONBOARDING DESIGN TOKENS
===================================================================== */

:root {
--sjc-onboarding-max-width: 1080px;
--sjc-onboarding-form-width: 900px;
--sjc-onboarding-radius-xl: 32px;
--sjc-onboarding-radius-lg: 24px;
--sjc-onboarding-radius-md: 18px;
--sjc-onboarding-radius-sm: 13px;
--sjc-onboarding-border: rgba(118, 225, 255, 0.18);
--sjc-onboarding-border-strong: rgba(118, 225, 255, 0.42);
--sjc-onboarding-surface: rgba(5, 11, 29, 0.9);
--sjc-onboarding-surface-soft: rgba(12, 22, 48, 0.76);
--sjc-onboarding-surface-raised: rgba(15, 29, 59, 0.94);
--sjc-onboarding-text: #f7fbff;
--sjc-onboarding-muted: #aebbd2;
--sjc-onboarding-accent: #76e1ff;
--sjc-onboarding-accent-strong: #31c7ff;
--sjc-onboarding-secondary: #d772ff;
--sjc-onboarding-success: #45e9a8;
--sjc-onboarding-warning: #ffd166;
--sjc-onboarding-danger: #ff6d91;
--sjc-onboarding-shadow:
0 30px 90px rgba(0, 0, 0, 0.48),
0 0 60px rgba(49, 199, 255, 0.08);
}

html[data-theme="light"] {
--sjc-onboarding-border: rgba(19, 95, 142, 0.17);
--sjc-onboarding-border-strong: rgba(19, 125, 190, 0.38);
--sjc-onboarding-surface: rgba(248, 252, 255, 0.95);
--sjc-onboarding-surface-soft: rgba(235, 245, 255, 0.92);
--sjc-onboarding-surface-raised: rgba(255, 255, 255, 0.98);
--sjc-onboarding-text: #0d1830;
--sjc-onboarding-muted: #55647e;
--sjc-onboarding-shadow:
0 28px 80px rgba(41, 77, 112, 0.16),
0 0 50px rgba(49, 199, 255, 0.08);
}

/* =====================================================================
APPLICATION SHELL WHILE ONBOARDING
===================================================================== */

html.onboarding-route,
body.onboarding-route,
html.onboarding-required,
body.onboarding-required {
min-height: 100%;
}

body.onboarding-route {
overflow-x: hidden;
}

body.onboarding-route .app-shell {
display: block;
grid-template-columns: minmax(0, 1fr);
width: 100%;
max-width: none;
}

body.onboarding-route .sidebar-left,
body.onboarding-route .sidebar-right,
body.onboarding-route .mobile-header {
display: none !important;
}

body.onboarding-route .main-column {
width: 100%;
max-width: none;
min-width: 0;
min-height: 100dvh;
margin: 0;
overflow: visible;
}

body.onboarding-route .route-outlet {
width: 100%;
max-width: none;
min-height: 100dvh;
padding: 0;
}

body.onboarding-route .route-progress {
position: fixed;
inset: 0 0 auto;
z-index: 1000;
}

html.onboarding-required .onboarding-complete-only,
body.onboarding-required .onboarding-complete-only {
display: none !important;
}

html:not(.onboarding-required) .onboarding-required-only,
body:not(.onboarding-required) .onboarding-required-only {
display: none !important;
}

/* =====================================================================
ROOT ONBOARDING PAGE
===================================================================== */

.sjc-onboarding {
position: relative;
isolation: isolate;
width: 100%;
min-height: 100dvh;
color: var(--sjc-onboarding-text);
padding:
max(28px, env(safe-area-inset-top))
max(22px, env(safe-area-inset-right))
max(34px, env(safe-area-inset-bottom))
max(22px, env(safe-area-inset-left));
}

.sjc-onboarding::before,
.sjc-onboarding::after {
position: fixed;
z-index: -1;
border-radius: 999px;
pointer-events: none;
content: "";
filter: blur(14px);
}

.sjc-onboarding::before {
top: 3%;
left: 7%;
width: min(46vw, 620px);
aspect-ratio: 1;
background:
radial-gradient(
circle,
rgba(49, 199, 255, 0.14),
rgba(49, 199, 255, 0) 68%
);
}

.sjc-onboarding::after {
right: 4%;
bottom: -8%;
width: min(42vw, 560px);
aspect-ratio: 1;
background:
radial-gradient(
circle,
rgba(215, 114, 255, 0.13),
rgba(215, 114, 255, 0) 70%
);
}

.sjc-onboarding__shell {
position: relative;
width: min(100%, var(--sjc-onboarding-max-width));
min-height: calc(100dvh - 62px);
margin: 0 auto;
overflow: hidden;
border: 1px solid var(--sjc-onboarding-border);
border-radius: var(--sjc-onboarding-radius-xl);
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.055),
rgba(255, 255, 255, 0.012)
),
var(--sjc-onboarding-surface);
box-shadow: var(--sjc-onboarding-shadow);
backdrop-filter: blur(28px) saturate(135%);
-webkit-backdrop-filter: blur(28px) saturate(135%);
}

.sjc-onboarding__shell::before {
position: absolute;
inset: 0 0 auto;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(118, 225, 255, 0.76),
rgba(215, 114, 255, 0.58),
transparent
);
content: "";
}

/* =====================================================================
ONBOARDING HEADER
===================================================================== */

.sjc-onboarding__header {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(250px, 380px);
align-items: center;
gap: 36px;
padding: 26px 34px;
border-bottom: 1px solid var(--sjc-onboarding-border);
background: rgba(3, 9, 24, 0.28);
}

html[data-theme="light"] .sjc-onboarding__header {
background: rgba(255, 255, 255, 0.42);
}

.sjc-onboarding__brand {
display: inline-flex;
align-items: center;
justify-self: start;
min-width: 0;
gap: 16px;
color: inherit;
text-decoration: none;
}

.sjc-onboarding__brand:hover {
text-decoration: none;
}

.sjc-onboarding__logo {
width: 72px;
height: 72px;
flex: 0 0 auto;
border-radius: 22px;
object-fit: contain;
filter:
drop-shadow(0 0 16px rgba(49, 199, 255, 0.32))
drop-shadow(0 0 30px rgba(215, 114, 255, 0.13));
}

.sjc-onboarding__brand-copy {
display: grid;
min-width: 0;
gap: 4px;
}

.sjc-onboarding__brand-copy strong {
overflow: hidden;
color: var(--sjc-onboarding-text);
font-size: clamp(1.05rem, 2vw, 1.35rem);
line-height: 1.15;
letter-spacing: -0.025em;
text-overflow: ellipsis;
white-space: nowrap;
}

.sjc-onboarding__brand-copy span {
color: var(--sjc-onboarding-muted);
font-size: 0.88rem;
line-height: 1.4;
}

.sjc-onboarding__progress {
display: grid;
gap: 10px;
}

.sjc-onboarding__progress-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
color: var(--sjc-onboarding-muted);
font-size: 0.84rem;
}

.sjc-onboarding__progress-heading strong {
color: var(--sjc-onboarding-text);
font-weight: 800;
}

.sjc-onboarding__progress-track {
position: relative;
width: 100%;
height: 9px;
overflow: hidden;
border: 1px solid rgba(118, 225, 255, 0.12);
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
}

.sjc-onboarding__progress-fill {
display: block;
width: 50%;
height: 100%;
border-radius: inherit;
background:
linear-gradient(
90deg,
var(--sjc-onboarding-accent-strong),
var(--sjc-onboarding-secondary)
);
box-shadow:
0 0 14px rgba(49, 199, 255, 0.52);
transition:
width 300ms ease,
box-shadow 300ms ease;
}

/* =====================================================================
MAIN CONTENT
===================================================================== */

.sjc-onboarding__main {
width: 100%;
padding: clamp(34px, 6vw, 70px) clamp(22px, 5vw, 62px);
}

.sjc-onboarding__intro {
width: min(100%, 780px);
margin: 0 auto clamp(28px, 5vw, 48px);
text-align: center;
}

.sjc-onboarding__intro .sjc-eyebrow,
.sjc-onboarding__intro .eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
margin-bottom: 13px;
padding: 6px 13px;
border: 1px solid rgba(118, 225, 255, 0.2);
border-radius: 999px;
color: var(--sjc-onboarding-accent);
background: rgba(49, 199, 255, 0.075);
font-size: 0.74rem;
font-weight: 900;
line-height: 1;
letter-spacing: 0.15em;
text-transform: uppercase;
}

.sjc-onboarding__intro h1 {
max-width: 780px;
margin: 0 auto 17px;
color: var(--sjc-onboarding-text);
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 900;
line-height: 1.02;
letter-spacing: -0.055em;
text-wrap: balance;
}

.sjc-onboarding__intro p {
max-width: 680px;
margin: 0 auto;
color: var(--sjc-onboarding-muted);
font-size: clamp(1rem, 2vw, 1.13rem);
line-height: 1.75;
text-wrap: pretty;
}

/* =====================================================================
ONBOARDING FORM
===================================================================== */

.sjc-onboarding__form {
width: min(100%, var(--sjc-onboarding-form-width));
margin: 0 auto;
}

.sjc-onboarding__step {
min-width: 0;
margin: 0;
padding: clamp(24px, 4vw, 42px);
border: 1px solid var(--sjc-onboarding-border);
border-radius: var(--sjc-onboarding-radius-lg);
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.045),
rgba(255, 255, 255, 0.008)
),
var(--sjc-onboarding-surface-soft);
box-shadow:
0 18px 48px rgba(0, 0, 0, 0.18);
}

.sjc-onboarding__step[hidden] {
display: none !important;
}

.sjc-onboarding__step.is-active {
animation: sjc-onboarding-step-in 340ms ease both;
}

@keyframes sjc-onboarding-step-in {
from {
opacity: 0;
transform: translateY(13px);
}

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

.sjc-onboarding__step-heading {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 30px;
}

.sjc-onboarding__step-number {
display: inline-grid;
width: 46px;
height: 46px;
flex: 0 0 46px;
place-items: center;
border: 1px solid rgba(118, 225, 255, 0.3);
border-radius: 15px;
color: #04101e;
background:
linear-gradient(
145deg,
var(--sjc-onboarding-accent),
#ffffff
);
box-shadow:
0 8px 28px rgba(49, 199, 255, 0.22);
font-size: 1rem;
font-weight: 950;
}

.sjc-onboarding__step-heading h2 {
margin: 0 0 7px;
color: var(--sjc-onboarding-text);
font-size: clamp(1.35rem, 3vw, 2rem);
font-weight: 900;
line-height: 1.15;
letter-spacing: -0.035em;
}

.sjc-onboarding__step-heading p {
margin: 0;
color: var(--sjc-onboarding-muted);
line-height: 1.65;
}

/* =====================================================================
FORM CONTROLS
===================================================================== */

.sjc-onboarding .sjc-form-group {
display: grid;
min-width: 0;
gap: 9px;
}

.sjc-onboarding .sjc-form-group + .sjc-form-group {
margin-top: 22px;
}

.sjc-onboarding .sjc-form-group > label,
.sjc-onboarding .sjc-form-label-row label {
color: var(--sjc-onboarding-text);
font-size: 0.9rem;
font-weight: 850;
line-height: 1.35;
}

.sjc-onboarding .sjc-form-group > label span {
color: var(--sjc-onboarding-danger);
}

.sjc-onboarding input,
.sjc-onboarding select,
.sjc-onboarding textarea {
width: 100%;
min-width: 0;
border: 1px solid var(--sjc-onboarding-border);
border-radius: var(--sjc-onboarding-radius-sm);
outline: none;
color: var(--sjc-onboarding-text);
background: rgba(3, 9, 24, 0.52);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.025);
font: inherit;
transition:
border-color 180ms ease,
box-shadow 180ms ease,
background-color 180ms ease,
transform 180ms ease;
}

html[data-theme="light"] .sjc-onboarding input,
html[data-theme="light"] .sjc-onboarding select,
html[data-theme="light"] .sjc-onboarding textarea {
background: rgba(255, 255, 255, 0.78);
}

.sjc-onboarding input,
.sjc-onboarding select {
min-height: 54px;
padding: 0 16px;
}

.sjc-onboarding textarea {
min-height: 130px;
padding: 15px 16px;
line-height: 1.6;
resize: vertical;
}

.sjc-onboarding input::placeholder,
.sjc-onboarding textarea::placeholder {
color: color-mix(
in srgb,
var(--sjc-onboarding-muted) 75%,
transparent
);
}

.sjc-onboarding input:hover,
.sjc-onboarding select:hover,
.sjc-onboarding textarea:hover {
border-color: rgba(118, 225, 255, 0.32);
}

.sjc-onboarding input:focus-visible,
.sjc-onboarding select:focus-visible,
.sjc-onboarding textarea:focus-visible {
border-color: var(--sjc-onboarding-accent);
background-color: rgba(49, 199, 255, 0.045);
box-shadow:
0 0 0 4px rgba(49, 199, 255, 0.13),
0 0 24px rgba(49, 199, 255, 0.08);
}

.sjc-onboarding input[aria-invalid="true"],
.sjc-onboarding select[aria-invalid="true"],
.sjc-onboarding textarea[aria-invalid="true"] {
border-color: var(--sjc-onboarding-danger);
box-shadow:
0 0 0 4px rgba(255, 109, 145, 0.11);
}

.sjc-onboarding select {
cursor: pointer;
}

.sjc-onboarding select option {
color: #101b32;
background: #ffffff;
}

.sjc-form-label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}

.sjc-field-help,
.sjc-field-status,
.sjc-field-error {
margin: 0;
font-size: 0.8rem;
line-height: 1.55;
}

.sjc-field-help {
color: var(--sjc-onboarding-muted);
}

.sjc-field-status {
color: var(--sjc-onboarding-accent);
font-weight: 750;
}

.sjc-field-status[data-type="success"] {
color: var(--sjc-onboarding-success);
}

.sjc-field-status[data-type="error"] {
color: var(--sjc-onboarding-danger);
}

.sjc-field-status[data-type="checking"] {
color: var(--sjc-onboarding-accent);
}

.sjc-field-error {
color: var(--sjc-onboarding-danger);
font-weight: 720;
}

.sjc-character-count {
color: var(--sjc-onboarding-muted);
font-size: 0.76rem;
font-variant-numeric: tabular-nums;
}

.sjc-character-count[data-limit-reached="true"] {
color: var(--sjc-onboarding-warning);
}

/* =====================================================================
USERNAME FIELD
===================================================================== */

.sjc-username-field {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
min-height: 58px;
overflow: hidden;
border: 1px solid var(--sjc-onboarding-border);
border-radius: var(--sjc-onboarding-radius-sm);
background: rgba(3, 9, 24, 0.52);
transition:
border-color 180ms ease,
box-shadow 180ms ease,
background-color 180ms ease;
}

html[data-theme="light"] .sjc-username-field {
background: rgba(255, 255, 255, 0.8);
}

.sjc-username-field:focus-within {
border-color: var(--sjc-onboarding-accent);
background-color: rgba(49, 199, 255, 0.045);
box-shadow:
0 0 0 4px rgba(49, 199, 255, 0.13),
0 0 24px rgba(49, 199, 255, 0.08);
}

.sjc-username-field[data-username-state="available"] {
border-color: rgba(69, 233, 168, 0.65);
box-shadow:
0 0 0 4px rgba(69, 233, 168, 0.09);
}

.sjc-username-field[data-username-state="unavailable"] {
border-color: rgba(255, 109, 145, 0.72);
box-shadow:
0 0 0 4px rgba(255, 109, 145, 0.09);
}

.sjc-username-field[data-username-state="checking"] {
border-color: rgba(118, 225, 255, 0.52);
}

.sjc-username-field__prefix {
display: grid;
min-width: 50px;
min-height: 58px;
place-items: center;
border-right: 1px solid var(--sjc-onboarding-border);
color: var(--sjc-onboarding-accent);
background: rgba(49, 199, 255, 0.055);
font-size: 1.08rem;
font-weight: 900;
}

.sjc-onboarding .sjc-username-field__input {
min-height: 56px;
padding: 0 14px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}

.sjc-onboarding .sjc-username-field__input:focus-visible {
background: transparent;
box-shadow: none;
}

.sjc-username-field__icon,
.sjc-username-field__spinner {
width: 25px;
height: 25px;
margin-right: 15px;
flex: 0 0 auto;
}

.sjc-username-field__icon {
display: grid;
place-items: center;
border-radius: 999px;
color: #03180f;
background: var(--sjc-onboarding-success);
font-size: 0.78rem;
font-weight: 950;
}

.sjc-username-field[data-username-state="unavailable"]
.sjc-username-field__icon {
color: #24040d;
background: var(--sjc-onboarding-danger);
}

.sjc-username-field__spinner {
border: 3px solid rgba(118, 225, 255, 0.2);
border-top-color: var(--sjc-onboarding-accent);
border-radius: 50%;
animation: sjc-onboarding-spin 720ms linear infinite;
}

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

.sjc-onboarding__username-preview {
display: grid;
gap: 6px;
margin-top: 20px;
padding: 16px 18px;
border: 1px solid rgba(118, 225, 255, 0.16);
border-radius: 15px;
background:
linear-gradient(
135deg,
rgba(49, 199, 255, 0.07),
rgba(215, 114, 255, 0.045)
);
}

.sjc-onboarding__username-preview span {
color: var(--sjc-onboarding-muted);
font-size: 0.74rem;
font-weight: 750;
letter-spacing: 0.05em;
text-transform: uppercase;
}

.sjc-onboarding__username-preview strong {
overflow-wrap: anywhere;
color: var(--sjc-onboarding-accent);
font-size: clamp(0.84rem, 2vw, 0.98rem);
}

/* =====================================================================
PROFILE LAYOUT
===================================================================== */

.sjc-onboarding__profile-layout {
display: grid;
grid-template-columns: minmax(210px, 270px) minmax(0, 1fr);
align-items: start;
gap: clamp(24px, 5vw, 46px);
}

.sjc-onboarding__avatar-section {
position: sticky;
top: 22px;
display: grid;
gap: 22px;
min-width: 0;
padding: 22px;
border: 1px solid var(--sjc-onboarding-border);
border-radius: var(--sjc-onboarding-radius-md);
background: rgba(255, 255, 255, 0.025);
}

.sjc-onboarding__avatar-copy h3 {
margin: 0 0 7px;
color: var(--sjc-onboarding-text);
font-size: 1rem;
font-weight: 850;
}

.sjc-onboarding__avatar-copy p {
margin: 0;
color: var(--sjc-onboarding-muted);
font-size: 0.82rem;
line-height: 1.55;
}

.sjc-avatar-uploader {
display: grid;
justify-items: center;
gap: 17px;
text-align: center;
}

.sjc-avatar-uploader__preview {
position: relative;
width: min(100%, 170px);
aspect-ratio: 1;
padding: 5px;
overflow: hidden;
border: 1px solid rgba(118, 225, 255, 0.36);
border-radius: 32%;
background:
linear-gradient(
145deg,
rgba(118, 225, 255, 0.22),
rgba(215, 114, 255, 0.14)
);
box-shadow:
0 18px 38px rgba(0, 0, 0, 0.24),
0 0 28px rgba(49, 199, 255, 0.12);
}

.sjc-avatar-uploader__preview img {
width: 100%;
height: 100%;
border-radius: calc(32% - 4px);
object-fit: cover;
background: rgba(3, 9, 24, 0.72);
}

.sjc-avatar-uploader__progress {
position: absolute;
inset: 0;
display: grid;
place-items: center;
border-radius: inherit;
background: rgba(3, 9, 24, 0.72);
backdrop-filter: blur(8px);
}

.sjc-avatar-uploader__progress::after {
width: 34px;
height: 34px;
border: 4px solid rgba(255, 255, 255, 0.2);
border-top-color: var(--sjc-onboarding-accent);
border-radius: 50%;
content: "";
animation: sjc-onboarding-spin 720ms linear infinite;
}

.sjc-avatar-uploader__controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 9px;
}

.sjc-avatar-uploader .sjc-field-help,
.sjc-avatar-uploader .sjc-field-error {
text-align: center;
}

/* =====================================================================
SUMMARY CARD
===================================================================== */

.sjc-onboarding__summary {
display: flex;
align-items: center;
gap: 15px;
margin-top: 28px;
padding: 17px 19px;
border: 1px solid rgba(69, 233, 168, 0.22);
border-radius: 16px;
background: rgba(69, 233, 168, 0.055);
}

.sjc-onboarding__summary-icon {
display: grid;
width: 38px;
height: 38px;
flex: 0 0 38px;
place-items: center;
border-radius: 12px;
color: #03180f;
background: var(--sjc-onboarding-success);
box-shadow: 0 8px 22px rgba(69, 233, 168, 0.19);
font-weight: 950;
}

.sjc-onboarding__summary strong {
display: block;
margin-bottom: 3px;
color: var(--sjc-onboarding-text);
}

.sjc-onboarding__summary p {
margin: 0;
color: var(--sjc-onboarding-muted);
font-size: 0.82rem;
line-height: 1.5;
}

/* =====================================================================
ACTIONS AND BUTTONS
===================================================================== */

.sjc-onboarding__step-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 12px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--sjc-onboarding-border);
}

.sjc-onboarding .button {
min-height: 48px;
padding: 0 20px;
border-radius: 14px;
font-weight: 850;
}

.sjc-onboarding .button-primary {
border-color: transparent;
color: #04101e;
background:
linear-gradient(
135deg,
var(--sjc-onboarding-accent),
#93efff 50%,
var(--sjc-onboarding-secondary)
);
box-shadow:
0 12px 30px rgba(49, 199, 255, 0.17);
}

.sjc-onboarding .button-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow:
0 16px 36px rgba(49, 199, 255, 0.23);
}

.sjc-onboarding .button-secondary,
.sjc-onboarding .button-ghost {
border: 1px solid var(--sjc-onboarding-border);
color: var(--sjc-onboarding-text);
background: rgba(255, 255, 255, 0.045);
}

.sjc-onboarding .button-secondary:hover:not(:disabled),
.sjc-onboarding .button-ghost:hover:not(:disabled) {
border-color: var(--sjc-onboarding-border-strong);
background: rgba(118, 225, 255, 0.075);
}

.sjc-onboarding .button:disabled,
.sjc-onboarding .button[aria-disabled="true"] {
cursor: not-allowed;
opacity: 0.46;
filter: saturate(0.5);
transform: none;
box-shadow: none;
}

.button__spinner {
display: inline-block;
width: 17px;
height: 17px;
margin-right: 8px;
vertical-align: -3px;
border: 2px solid rgba(4, 16, 30, 0.25);
border-top-color: #04101e;
border-radius: 50%;
animation: sjc-onboarding-spin 700ms linear infinite;
}

/* =====================================================================
FORM STATUS
===================================================================== */

.sjc-form-status {
margin-top: 18px;
padding: 15px 17px;
border: 1px solid var(--sjc-onboarding-border);
border-radius: 14px;
color: var(--sjc-onboarding-text);
background: var(--sjc-onboarding-surface-raised);
font-size: 0.87rem;
font-weight: 720;
line-height: 1.55;
}

.sjc-form-status[data-type="success"] {
border-color: rgba(69, 233, 168, 0.34);
color: var(--sjc-onboarding-success);
background: rgba(69, 233, 168, 0.065);
}

.sjc-form-status[data-type="error"] {
border-color: rgba(255, 109, 145, 0.38);
color: var(--sjc-onboarding-danger);
background: rgba(255, 109, 145, 0.065);
}

.sjc-form-status[data-type="info"] {
border-color: rgba(118, 225, 255, 0.3);
color: var(--sjc-onboarding-accent);
background: rgba(49, 199, 255, 0.06);
}

/* =====================================================================
FOOTER
===================================================================== */

.sjc-onboarding__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
padding: 22px 34px;
border-top: 1px solid var(--sjc-onboarding-border);
color: var(--sjc-onboarding-muted);
background: rgba(3, 9, 24, 0.24);
}

html[data-theme="light"] .sjc-onboarding__footer {
background: rgba(255, 255, 255, 0.4);
}

.sjc-onboarding__footer p {
margin: 0;
font-size: 0.79rem;
line-height: 1.6;
}

.sjc-onboarding__footer a {
color: var(--sjc-onboarding-accent);
font-weight: 750;
}

.sjc-onboarding__sign-out {
flex: 0 0 auto;
padding: 9px 12px;
border: 0;
border-radius: 10px;
color: var(--sjc-onboarding-muted);
background: transparent;
font: inherit;
font-size: 0.8rem;
font-weight: 750;
cursor: pointer;
}

.sjc-onboarding__sign-out:hover,
.sjc-onboarding__sign-out:focus-visible {
color: var(--sjc-onboarding-text);
background: rgba(255, 255, 255, 0.055);
}

/* =====================================================================
ACCESSIBILITY
===================================================================== */

.sjc-onboarding :focus-visible {
outline: 3px solid rgba(118, 225, 255, 0.72);
outline-offset: 3px;
}

.sjc-onboarding [hidden] {
display: none !important;
}

.sjc-onboarding .sr-only,
.sjc-onboarding .visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
border: 0 !important;
white-space: nowrap !important;
}

/* =====================================================================
TABLET
===================================================================== */

@media (max-width: 860px) {
.sjc-onboarding {
padding:
max(18px, env(safe-area-inset-top))
max(14px, env(safe-area-inset-right))
max(24px, env(safe-area-inset-bottom))
max(14px, env(safe-area-inset-left));
}

.sjc-onboarding__shell {
min-height: calc(100dvh - 42px);
border-radius: 25px;
}

.sjc-onboarding__header {
grid-template-columns: 1fr;
gap: 22px;
padding: 22px 24px;
}

.sjc-onboarding__progress {
width: 100%;
}

.sjc-onboarding__main {
padding: 36px 24px 42px;
}

.sjc-onboarding__profile-layout {
grid-template-columns: 1fr;
}

.sjc-onboarding__avatar-section {
position: static;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}

.sjc-avatar-uploader {
min-width: 190px;
}

.sjc-avatar-uploader__preview {
width: 132px;
}
}

/* =====================================================================
MOBILE
===================================================================== */

@media (max-width: 600px) {
.sjc-onboarding {
padding:
max(8px, env(safe-area-inset-top))
max(8px, env(safe-area-inset-right))
max(12px, env(safe-area-inset-bottom))
max(8px, env(safe-area-inset-left));
}

.sjc-onboarding__shell {
min-height: calc(100dvh - 20px);
border-radius: 20px;
}

.sjc-onboarding__header {
padding: 18px;
}

.sjc-onboarding__logo {
width: 58px;
height: 58px;
border-radius: 17px;
}

.sjc-onboarding__brand {
gap: 12px;
}

.sjc-onboarding__brand-copy span {
font-size: 0.76rem;
}

.sjc-onboarding__main {
padding: 30px 14px 34px;
}

.sjc-onboarding__intro {
margin-bottom: 25px;
}

.sjc-onboarding__intro h1 {
font-size: clamp(1.8rem, 10vw, 2.65rem);
}

.sjc-onboarding__intro p {
font-size: 0.94rem;
line-height: 1.65;
}

.sjc-onboarding__step {
padding: 20px 15px;
border-radius: 18px;
}

.sjc-onboarding__step-heading {
gap: 13px;
margin-bottom: 24px;
}

.sjc-onboarding__step-number {
width: 40px;
height: 40px;
flex-basis: 40px;
border-radius: 13px;
}

.sjc-onboarding__step-heading h2 {
font-size: 1.3rem;
}

.sjc-onboarding__profile-layout {
gap: 22px;
}

.sjc-onboarding__avatar-section {
grid-template-columns: 1fr;
justify-items: center;
padding: 18px;
text-align: center;
}

.sjc-avatar-uploader {
min-width: 0;
width: 100%;
}

.sjc-avatar-uploader__preview {
width: 140px;
}

.sjc-onboarding__step-actions {
display: grid;
grid-template-columns: 1fr;
}

.sjc-onboarding__step-actions .button {
width: 100%;
}

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

.sjc-onboarding__footer {
flex-direction: column;
align-items: stretch;
padding: 20px;
text-align: center;
}

.sjc-onboarding__sign-out {
width: 100%;
min-height: 42px;
}

.sjc-form-label-row {
align-items: flex-end;
}
}

/* =====================================================================
SMALL MOBILE
===================================================================== */

@media (max-width: 390px) {
.sjc-onboarding__header {
padding: 15px;
}

.sjc-onboarding__brand-copy span {
display: none;
}

.sjc-onboarding__main {
padding-inline: 10px;
}

.sjc-onboarding__step {
padding-inline: 13px;
}

.sjc-username-field__prefix {
min-width: 44px;
}

.sjc-onboarding input,
.sjc-onboarding select {
min-height: 52px;
}
}

/* =====================================================================
REDUCED MOTION
===================================================================== */

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

/* =====================================================================
HIGH CONTRAST
===================================================================== */

@media (forced-colors: active) {
.sjc-onboarding__shell,
.sjc-onboarding__step,
.sjc-username-field,
.sjc-onboarding input,
.sjc-onboarding select,
.sjc-onboarding textarea {
border: 1px solid CanvasText;
}

.sjc-onboarding .button-primary,
.sjc-onboarding__step-number,
.sjc-onboarding__summary-icon {
color: ButtonText;
background: ButtonFace;
}
}
/* =====================================================================
SMOOTH JAZZ CONNECT
ONBOARDING COMPACT RECTANGLE SIZE OVERRIDE
Version: 3.3.150
Paste at the absolute bottom of /styles.css
===================================================================== */

:root {
--sjc-onboarding-max-width: 900px;
--sjc-onboarding-form-width: 760px;
--sjc-onboarding-radius-xl: 18px;
--sjc-onboarding-radius-lg: 15px;
--sjc-onboarding-radius-md: 13px;
--sjc-onboarding-radius-sm: 10px;
}

/* Remove forced oversized page height */
body.onboarding-route .app-shell,
body.onboarding-route .main-column,
body.onboarding-route .route-outlet {
min-height: 100dvh;
}

.sjc-onboarding {
display: flex;
align-items: flex-start;
justify-content: center;
min-height: 100dvh;
padding:
max(12px, env(safe-area-inset-top))
max(14px, env(safe-area-inset-right))
max(14px, env(safe-area-inset-bottom))
max(14px, env(safe-area-inset-left));
}

/* Main outside rectangle */
.sjc-onboarding__shell {
width: min(100%, var(--sjc-onboarding-max-width));
min-height: 0;
height: auto;
margin: 0 auto;
border-radius: var(--sjc-onboarding-radius-xl);
}

/* Compact top header */
.sjc-onboarding__header {
grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
gap: 24px;
padding: 13px 20px;
}

.sjc-onboarding__brand {
gap: 11px;
}

.sjc-onboarding__logo {
width: 46px;
height: 46px;
flex: 0 0 46px;
border-radius: 12px;
}

.sjc-onboarding__brand-copy {
gap: 2px;
}

.sjc-onboarding__brand-copy strong {
font-size: 0.98rem;
}

.sjc-onboarding__brand-copy span {
font-size: 0.7rem;
}

.sjc-onboarding__progress {
gap: 6px;
}

.sjc-onboarding__progress-heading {
font-size: 0.7rem;
}

.sjc-onboarding__progress-track {
height: 6px;
}

/* Compact overall content */
.sjc-onboarding__main {
padding: 20px 30px 22px;
}

/* Smaller introduction */
.sjc-onboarding__intro {
width: min(100%, 680px);
margin: 0 auto 18px;
}

.sjc-onboarding__intro .sjc-eyebrow,
.sjc-onboarding__intro .eyebrow {
min-height: 23px;
margin-bottom: 7px;
padding: 4px 10px;
font-size: 0.58rem;
}

.sjc-onboarding__intro h1 {
max-width: 650px;
margin: 0 auto 8px;
font-size: clamp(1.75rem, 3.4vw, 2.65rem);
line-height: 1;
letter-spacing: -0.05em;
}

.sjc-onboarding__intro p {
max-width: 620px;
font-size: 0.82rem;
line-height: 1.45;
}

/* Wider, shorter inner rectangle */
.sjc-onboarding__form {
width: min(100%, var(--sjc-onboarding-form-width));
}

.sjc-onboarding__step {
padding: 18px 22px;
border-radius: var(--sjc-onboarding-radius-lg);
}

/* Smaller step heading */
.sjc-onboarding__step-heading {
gap: 11px;
margin-bottom: 14px;
}

.sjc-onboarding__step-number {
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: 10px;
font-size: 0.78rem;
}

.sjc-onboarding__step-heading h2 {
margin-bottom: 3px;
font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.sjc-onboarding__step-heading p {
font-size: 0.73rem;
line-height: 1.4;
}

/* Compact form fields */
.sjc-onboarding .sjc-form-group {
gap: 5px;
}

.sjc-onboarding .sjc-form-group + .sjc-form-group {
margin-top: 12px;
}

.sjc-onboarding .sjc-form-group > label,
.sjc-onboarding .sjc-form-label-row label {
font-size: 0.74rem;
}

.sjc-onboarding input,
.sjc-onboarding select {
min-height: 42px;
padding-inline: 12px;
font-size: 0.82rem;
}

.sjc-onboarding textarea {
min-height: 86px;
padding: 10px 12px;
font-size: 0.82rem;
}

.sjc-field-help,
.sjc-field-status,
.sjc-field-error {
font-size: 0.66rem;
line-height: 1.35;
}

/* Compact username input */
.sjc-username-field {
min-height: 44px;
}

.sjc-username-field__prefix {
min-width: 40px;
min-height: 44px;
font-size: 0.82rem;
}

.sjc-onboarding .sjc-username-field__input {
min-height: 42px;
padding-inline: 11px;
}

.sjc-username-field__icon,
.sjc-username-field__spinner {
width: 19px;
height: 19px;
margin-right: 10px;
}

.sjc-onboarding__username-preview {
gap: 3px;
margin-top: 9px;
padding: 8px 11px;
border-radius: 10px;
}

.sjc-onboarding__username-preview span {
font-size: 0.58rem;
}

.sjc-onboarding__username-preview strong {
font-size: 0.74rem;
}

/* Keep actions visible without scrolling */
.sjc-onboarding__step-actions {
gap: 8px;
margin-top: 13px;
padding-top: 12px;
}

.sjc-onboarding .button {
min-height: 36px;
padding-inline: 14px;
border-radius: 10px;
font-size: 0.72rem;
}

/* Compact Step 2 profile layout */
.sjc-onboarding__profile-layout {
grid-template-columns: minmax(145px, 175px) minmax(0, 1fr);
gap: 18px;
}

.sjc-onboarding__avatar-section {
top: 10px;
gap: 10px;
padding: 12px;
border-radius: 12px;
}

.sjc-onboarding__avatar-copy h3 {
margin-bottom: 3px;
font-size: 0.8rem;
}

.sjc-onboarding__avatar-copy p {
font-size: 0.64rem;
line-height: 1.35;
}

.sjc-avatar-uploader {
gap: 9px;
}

.sjc-avatar-uploader__preview {
width: min(100%, 98px);
padding: 3px;
border-radius: 25%;
}

.sjc-avatar-uploader__preview img {
border-radius: calc(25% - 2px);
}

.sjc-avatar-uploader__controls {
gap: 5px;
}

/* Compact completion summary */
.sjc-onboarding__summary {
gap: 9px;
margin-top: 12px;
padding: 9px 11px;
border-radius: 10px;
}

.sjc-onboarding__summary-icon {
width: 28px;
height: 28px;
flex-basis: 28px;
border-radius: 8px;
font-size: 0.7rem;
}

.sjc-onboarding__summary strong {
margin-bottom: 1px;
font-size: 0.74rem;
}

.sjc-onboarding__summary p {
font-size: 0.64rem;
line-height: 1.35;
}

/* Compact footer */
.sjc-onboarding__footer {
gap: 14px;
padding: 10px 20px;
}

.sjc-onboarding__footer p {
font-size: 0.62rem;
line-height: 1.35;
}

.sjc-onboarding__sign-out {
min-height: 30px;
padding: 5px 8px;
font-size: 0.64rem;
}

/* Desktop screens with limited vertical height */
@media (min-width: 801px) and (max-height: 850px) {
.sjc-onboarding {
padding-top: 7px;
padding-bottom: 7px;
}

.sjc-onboarding__header {
padding-block: 10px;
}

.sjc-onboarding__logo {
width: 40px;
height: 40px;
flex-basis: 40px;
}

.sjc-onboarding__main {
padding-top: 15px;
padding-bottom: 16px;
}

.sjc-onboarding__intro {
margin-bottom: 13px;
}

.sjc-onboarding__intro h1 {
font-size: clamp(1.55rem, 3vw, 2.2rem);
}

.sjc-onboarding__intro p {
font-size: 0.76rem;
}

.sjc-onboarding__step {
padding: 15px 18px;
}

.sjc-onboarding__step-heading {
margin-bottom: 11px;
}

.sjc-onboarding__step-actions {
margin-top: 10px;
padding-top: 9px;
}

.sjc-onboarding__footer {
padding-block: 7px;
}
}

/* Tablet */
@media (max-width: 800px) {
:root {
--sjc-onboarding-max-width: 700px;
--sjc-onboarding-form-width: 100%;
}

.sjc-onboarding__header {
grid-template-columns: 1fr;
gap: 11px;
padding: 13px 16px;
}

.sjc-onboarding__main {
padding: 20px 17px 22px;
}

.sjc-onboarding__profile-layout {
grid-template-columns: 1fr;
}

.sjc-onboarding__avatar-section {
position: static;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}

.sjc-avatar-uploader__preview {
width: 90px;
}
}

/* Mobile */
@media (max-width: 600px) {
.sjc-onboarding {
display: block;
padding:
max(6px, env(safe-area-inset-top))
max(6px, env(safe-area-inset-right))
max(9px, env(safe-area-inset-bottom))
max(6px, env(safe-area-inset-left));
}

.sjc-onboarding__shell {
border-radius: 14px;
}

.sjc-onboarding__main {
padding: 18px 9px 20px;
}

.sjc-onboarding__intro h1 {
font-size: clamp(1.45rem, 8vw, 2rem);
}

.sjc-onboarding__intro p {
font-size: 0.76rem;
}

.sjc-onboarding__step {
padding: 14px 11px;
}
}

/* =====================================================================
   SMOOTH JAZZ CONNECT
   ONBOARDING STEP 2 SCROLL FIX
   Version: 3.3.150
   Paste at the absolute bottom of /styles.css
===================================================================== */

/* Keep the onboarding experience inside the visible browser height */
body.onboarding-route {
  height: 100dvh;
  overflow: hidden;
}

body.onboarding-route .app-shell,
body.onboarding-route .main-column,
body.onboarding-route .route-outlet {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.sjc-onboarding {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.sjc-onboarding__shell {
  display: flex;
  flex-direction: column;
  width: min(100%, var(--sjc-onboarding-max-width));
  height: calc(
    100dvh -
    max(12px, env(safe-area-inset-top)) -
    max(14px, env(safe-area-inset-bottom))
  );
  min-height: 0;
  max-height: calc(
    100dvh -
    max(12px, env(safe-area-inset-top)) -
    max(14px, env(safe-area-inset-bottom))
  );
  overflow: hidden;
}

/* Header remains visible */
.sjc-onboarding__header {
  flex: 0 0 auto;
}

/* Main onboarding area becomes the scroll region */
.sjc-onboarding__main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Footer remains reachable and visible */
.sjc-onboarding__footer {
  flex: 0 0 auto;
}

/* Step 2 receives extra bottom room for the completion buttons */
.sjc-onboarding__step[data-step="2"],
#onboardingStep2,
#onboarding-step-2 {
  padding-bottom: 28px;
}

/* Custom onboarding scrollbar */
.sjc-onboarding__main {
  scrollbar-width: thin;
  scrollbar-color:
    rgba(118, 225, 255, 0.65)
    rgba(255, 255, 255, 0.06);
}

.sjc-onboarding__main::-webkit-scrollbar {
  width: 9px;
}

.sjc-onboarding__main::-webkit-scrollbar-track {
  margin-block: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
}

.sjc-onboarding__main::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      var(--sjc-onboarding-accent),
      var(--sjc-onboarding-secondary)
    )
    padding-box;
}

.sjc-onboarding__main::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      #a6efff,
      #e09aff
    )
    padding-box;
}

/* Keep focused fields visible while tabbing through Step 2 */
.sjc-onboarding input:focus,
.sjc-onboarding select:focus,
.sjc-onboarding textarea:focus,
.sjc-onboarding button:focus {
  scroll-margin-block: 90px;
}

/* Desktop height optimization */
@media (min-width: 801px) {
  .sjc-onboarding__main {
    padding-top: 18px;
    padding-bottom: 24px;
  }

  .sjc-onboarding__step[data-step="2"],
  #onboardingStep2,
  #onboarding-step-2 {
    min-height: max-content;
  }
}

/* Tablet and mobile remain naturally scrollable */
@media (max-width: 800px) {
  body.onboarding-route {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.onboarding-route .app-shell,
  body.onboarding-route .main-column,
  body.onboarding-route .route-outlet {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .sjc-onboarding {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .sjc-onboarding__shell {
    height: auto;
    min-height: calc(100dvh - 18px);
    max-height: none;
    overflow: hidden;
  }

  .sjc-onboarding__main {
    max-height: none;
    overflow: visible;
  }
}
/* =========================================================
   CONTACT FORM HONEYPOT — MUST NEVER BE VISIBLE
   ========================================================= */

.contact-form .contact-honeypot {
  position: absolute !important;
  top: auto !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.contact-form .contact-honeypot label,
.contact-form .contact-honeypot input,
.contact-form #contactWebsite {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* =====================================================================
   LEGACY POST OPTIONS BUTTON COMPATIBILITY
===================================================================== */

.post-menu-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  color: var(--sjc-text-4);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
  transition:
    color var(--sjc-transition-fast),
    background var(--sjc-transition-fast),
    transform var(--sjc-transition-fast);
}

.post-menu-button:hover,
.post-menu-button:focus-visible,
.post-menu-button[aria-expanded="true"] {
  color: var(--sjc-text-1);
  background: var(--sjc-surface-hover);
}

.post-menu-button:active {
  transform: scale(0.94);
}

.post-menu-button:focus-visible {
  outline: 2px solid var(--sjc-cyan);
  outline-offset: 3px;
}

.post-menu-button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
/* =====================================================================
   PROFILE PAGE — PROFESSIONAL DETAILS CARD
   Paste at the bottom of styles.css
===================================================================== */

.profile-details-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(70, 205, 255, 0.2);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(67, 210, 255, 0.13),
      transparent 36%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(126, 82, 255, 0.12),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(13, 31, 62, 0.97),
      rgba(5, 14, 34, 0.98)
    );
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.profile-details-card::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.045),
      transparent 28%,
      transparent 72%,
      rgba(53, 226, 255, 0.035)
    );
}

.profile-details-card::after {
  position: absolute;
  top: -90px;
  right: -90px;
  z-index: -1;
  width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(
      circle,
      rgba(49, 211, 255, 0.16),
      transparent 68%
    );
  filter: blur(10px);
}

.profile-details-card .profile-section-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(102, 204, 255, 0.14);
}

.profile-details-card .profile-section-header::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 86px;
  height: 2px;
  border-radius: 999px;
  content: "";
  background:
    linear-gradient(
      90deg,
      #3cecff,
      #677dff,
      transparent
    );
  box-shadow:
    0 0 16px rgba(60, 236, 255, 0.38);
}

.profile-details-card .profile-section-header > div {
  min-width: 0;
}

.profile-details-card .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 11px;
  color: #4deaff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.profile-details-card .eyebrow::before {
  width: 22px;
  height: 2px;
  border-radius: 999px;
  content: "";
  background:
    linear-gradient(
      90deg,
      #4deaff,
      #8c63ff
    );
  box-shadow:
    0 0 14px rgba(77, 234, 255, 0.58);
}

.profile-details-card .profile-section-header h2 {
  max-width: 100%;
  margin: 0;
  color: #f8fbff;
  font-size: clamp(2rem, 3.1vw, 3.15rem);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.profile-detail-list {
  display: grid;
  gap: 12px;
  width: 100%;
  margin: 0;
}

.profile-detail-row {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(110px, 0.42fr)
    minmax(0, 0.58fr);
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding: 16px 18px;
  border: 1px solid rgba(92, 189, 255, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(19, 42, 78, 0.78),
      rgba(8, 21, 48, 0.84)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.profile-detail-row::before {
  position: absolute;
  top: 17px;
  bottom: 17px;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  content: "";
  opacity: 0;
  background:
    linear-gradient(
      180deg,
      #43ebff,
      #7868ff
    );
  box-shadow:
    0 0 14px rgba(67, 235, 255, 0.35);
  transition: opacity 180ms ease;
}

.profile-detail-row:hover {
  transform: translateY(-2px);
  border-color: rgba(67, 226, 255, 0.32);
  background:
    linear-gradient(
      135deg,
      rgba(24, 51, 93, 0.9),
      rgba(9, 24, 55, 0.94)
    );
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.18),
    0 0 24px rgba(67, 226, 255, 0.04);
}

.profile-detail-row:hover::before {
  opacity: 1;
}

.profile-detail-row dt,
.profile-detail-row dd {
  min-width: 0;
  margin: 0;
}

.profile-detail-row dt {
  color: rgba(236, 244, 255, 0.88);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.profile-detail-row dd {
  justify-self: stretch;
  color: #ffffff;
  font-size: 0.93rem;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-align: right;
}

.profile-detail-row dd:empty::before {
  color: rgba(212, 225, 245, 0.5);
  font-weight: 600;
  content: "Not added";
}

.profile-detail-row dd:is(
  #profileProfession,
  #profileOrganization,
  #profileDetailLocation,
  #profileAvailability
) {
  color: rgba(220, 231, 248, 0.74);
}

.profile-detail-row dd:not(:empty) {
  word-break: normal;
}

html[data-theme="light"] .profile-details-card {
  border-color: rgba(32, 112, 220, 0.15);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(26, 173, 255, 0.1),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(239, 246, 255, 0.98)
    );
  box-shadow:
    0 24px 58px rgba(44, 74, 126, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] .profile-details-card .profile-section-header h2 {
  color: #10213e;
}

html[data-theme="light"] .profile-detail-row {
  border-color: rgba(34, 109, 255, 0.13);
  background:
    linear-gradient(
      135deg,
      rgba(246, 250, 255, 0.98),
      rgba(235, 243, 255, 0.98)
    );
}

html[data-theme="light"] .profile-detail-row dt {
  color: #344865;
}

html[data-theme="light"] .profile-detail-row dd {
  color: #142745;
}

html[data-theme="light"] .profile-detail-row dd:is(
  #profileProfession,
  #profileOrganization,
  #profileDetailLocation,
  #profileAvailability
) {
  color: #65758f;
}

@media (max-width: 1180px) {
  .profile-details-card {
    padding: 26px;
  }

  .profile-detail-row {
    grid-template-columns:
      minmax(100px, 0.4fr)
      minmax(0, 0.6fr);
    gap: 14px;
    padding-inline: 16px;
  }
}

@media (max-width: 760px) {
  .profile-details-card {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .profile-details-card .profile-section-header {
    margin-bottom: 20px;
    padding-bottom: 18px;
  }

  .profile-details-card .profile-section-header h2 {
    font-size: clamp(1.85rem, 9vw, 2.55rem);
  }

  .profile-detail-row {
    grid-template-columns: 1fr;
    gap: 7px;
    min-height: 0;
    padding: 15px 16px;
  }

  .profile-detail-row dd {
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .profile-details-card {
    padding: 21px 16px;
    border-radius: 21px;
  }

  .profile-detail-list {
    gap: 10px;
  }

  .profile-detail-row {
    border-radius: 15px;
  }
}
/* ==========================================================
   SJC EMERGENCY DARK THEME LOCK 3.3.150
   Fixes inverted white/light background after stylesheet restore.
   Surgical override only. Keep at very bottom.
========================================================== */

html,
html[data-theme],
html[data-theme="light"],
html[data-theme="dark"],
:root,
:root[data-theme],
:root[data-theme="light"],
:root[data-theme="dark"] {
  color-scheme: dark !important;

  --bg-primary: #020612 !important;
  --bg-secondary: #050b1b !important;
  --bg-tertiary: #07142b !important;

  --surface: rgba(4, 11, 28, 0.96) !important;
  --surface-soft: rgba(6, 18, 42, 0.92) !important;
  --surface-raised: rgba(8, 24, 52, 0.92) !important;
  --surface-glass: rgba(5, 13, 32, 0.88) !important;

  --card-bg: linear-gradient(145deg, rgba(4, 11, 28, 0.97), rgba(7, 20, 46, 0.94)) !important;
  --card-bg-soft: linear-gradient(145deg, rgba(6, 18, 42, 0.94), rgba(10, 28, 58, 0.88)) !important;

  --text-primary: #ffffff !important;
  --text-secondary: rgba(232, 242, 255, 0.92) !important;
  --text-muted: rgba(187, 207, 232, 0.78) !important;

  --border-soft: rgba(44, 213, 255, 0.18) !important;
  --border-strong: rgba(44, 213, 255, 0.32) !important;
}

html body,
html[data-theme="light"] body,
body[data-theme="light"],
body {
  background:
    radial-gradient(circle at 15% 5%, rgba(34, 216, 255, 0.18), transparent 34%),
    radial-gradient(circle at 85% 8%, rgba(122, 92, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(2, 6, 18, 0.94), rgba(2, 8, 23, 0.98)),
    #020612 !important;
  color: rgba(242, 248, 255, 0.96) !important;
}

html body::before,
html[data-theme="light"] body::before,
body[data-theme="light"]::before {
  opacity: 0.62 !important;
  background:
    linear-gradient(90deg, rgba(2, 6, 18, 0.88), rgba(2, 8, 22, 0.58), rgba(2, 6, 18, 0.92)),
    url("/assets/background.png") center / cover no-repeat !important;
}

html body .app-shell,
html body #appShell,
html[data-theme="light"] body .app-shell,
html[data-theme="light"] body #appShell {
  background: rgba(2, 5, 15, 0.46) !important;
  color: rgba(242, 248, 255, 0.96) !important;
}

html body .sidebar,
html body .sidebar-left,
html body .sidebar-right,
html[data-theme="light"] body .sidebar,
html[data-theme="light"] body .sidebar-left,
html[data-theme="light"] body .sidebar-right {
  background:
    linear-gradient(180deg, rgba(5, 11, 28, 0.94), rgba(2, 6, 18, 0.98)) !important;
  color: rgba(242, 248, 255, 0.96) !important;
  border-color: rgba(44, 213, 255, 0.2) !important;
}

html body .content-card,
html body .side-card,
html body .identity-card,
html body .hero-card,
html body .page-hero,
html body .post-card,
html body article.post-card,
html body article.post-card.content-card,
html body .post-card.content-card,
html body .connect-card,
html body .settings-section-card,
html body .dashboard-management-card,
html body .notification-item,
html body .discover-feature-card,
html[data-theme="light"] body .content-card,
html[data-theme="light"] body .side-card,
html[data-theme="light"] body .identity-card,
html[data-theme="light"] body .hero-card,
html[data-theme="light"] body .page-hero,
html[data-theme="light"] body .post-card,
html[data-theme="light"] body article.post-card,
html[data-theme="light"] body article.post-card.content-card,
html[data-theme="light"] body .post-card.content-card {
  background:
    linear-gradient(145deg, rgba(4, 11, 28, 0.97), rgba(7, 20, 46, 0.94)) !important;
  background-color: rgba(4, 11, 28, 0.97) !important;
  color: rgba(242, 248, 255, 0.96) !important;
  border-color: rgba(44, 213, 255, 0.24) !important;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body .hero-title,
html body .page-title,
html body .section-title,
html body .content-title,
html body .feed-title,
html body .community-feed-title,
html[data-theme="light"] body h1,
html[data-theme="light"] body h2,
html[data-theme="light"] body h3,
html[data-theme="light"] body h4 {
  color: #ffffff !important;
  opacity: 1 !important;
}

html body p,
html body span,
html body label,
html body .hero-copy,
html body .section-subtitle,
html body .page-subtitle,
html body .feed-description,
html body .post-body,
html body .post-text,
html body .post-content,
html[data-theme="light"] body p,
html[data-theme="light"] body span,
html[data-theme="light"] body label {
  color: rgba(224, 237, 255, 0.9) !important;
}

html body .eyebrow,
html body .section-eyebrow,
html body .hero-eyebrow,
html body .page-kicker,
html body .section-kicker,
html[data-theme="light"] body .eyebrow,
html[data-theme="light"] body .section-eyebrow,
html[data-theme="light"] body .hero-eyebrow,
html[data-theme="light"] body .page-kicker,
html[data-theme="light"] body .section-kicker {
  color: #35d6ff !important;
  opacity: 1 !important;
}

html body input,
html body select,
html body textarea,
html[data-theme="light"] body input,
html[data-theme="light"] body select,
html[data-theme="light"] body textarea {
  background: rgba(4, 12, 30, 0.92) !important;
  color: rgba(242, 248, 255, 0.96) !important;
  border-color: rgba(44, 213, 255, 0.24) !important;
}

html body input::placeholder,
html body textarea::placeholder {
  color: rgba(188, 207, 229, 0.58) !important;
}

html body .nav-link,
html[data-theme="light"] body .nav-link {
  color: rgba(224, 237, 255, 0.86) !important;
}

html body .nav-link.is-active,
html body .nav-link[aria-current="page"],
html[data-theme="light"] body .nav-link.is-active,
html[data-theme="light"] body .nav-link[aria-current="page"] {
  color: #ffffff !important;
  background:
    linear-gradient(135deg, rgba(34, 216, 255, 0.2), rgba(122, 92, 255, 0.18)) !important;
}

/* ==========================================================
   SJC CLOUD DRAFT DROPDOWN 3.3.150
   Final hard-wired composer draft selector
========================================================== */

#viewDraftsButton.draft-toggle-button {
  position: relative;
  border-color: rgba(0, 229, 255, 0.30);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(255, 43, 214, 0.10)),
    rgba(7, 16, 35, 0.82);
  color: rgba(255, 255, 255, 0.92);
}

#viewDraftsButton.draft-toggle-button::after {
  content: "▾";
  margin-left: 0.2rem;
  font-size: 0.85em;
  opacity: 0.82;
  transition: transform 180ms ease;
}

#viewDraftsButton.draft-toggle-button.is-active,
#viewDraftsButton.draft-toggle-button:hover,
#viewDraftsButton.draft-toggle-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(0, 229, 255, 0.72);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.22), rgba(255, 43, 214, 0.16)),
    rgba(8, 22, 48, 0.95);
  box-shadow:
    0 0 0 4px rgba(0, 229, 255, 0.12),
    0 18px 42px rgba(0, 229, 255, 0.16);
}

#viewDraftsButton.draft-toggle-button.is-active::after {
  transform: rotate(180deg);
}

.cloud-draft-dropdown[hidden] {
  display: none !important;
}

.cloud-draft-dropdown {
  width: 100%;
  margin-top: 0.9rem;
  animation: cloudDraftDropIn 180ms ease both;
}

@keyframes cloudDraftDropIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.99);
  }

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

.cloud-draft-dropdown-inner {
  border-radius: 26px;
  border: 1px solid rgba(0, 229, 255, 0.24);
  background:
    radial-gradient(circle at 10% 0%, rgba(0, 229, 255, 0.15), transparent 28rem),
    radial-gradient(circle at 100% 20%, rgba(255, 43, 214, 0.12), transparent 24rem),
    linear-gradient(145deg, rgba(9, 20, 44, 0.96), rgba(4, 9, 24, 0.98));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: clamp(0.95rem, 2.5vw, 1.2rem);
}

.cloud-draft-dropdown-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.95rem;
}

.cloud-draft-dropdown-header h3 {
  margin: 0.15rem 0 0.25rem;
  color: var(--text-primary, #ffffff);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.1;
}

.cloud-draft-dropdown-header p {
  margin: 0;
  color: var(--text-muted, rgba(255, 255, 255, 0.70));
  line-height: 1.45;
}

.cloud-draft-dropdown-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.compact-action {
  min-height: 40px;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  font-size: 0.88rem;
}

.cloud-draft-list {
  display: grid;
  gap: 0.75rem;
  max-height: min(420px, 56vh);
  overflow: auto;
  padding-right: 0.15rem;
}

.cloud-draft-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem;
  border-radius: 20px;
  border: 1px solid rgba(0, 229, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.025));
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.cloud-draft-item:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 229, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.09), rgba(255, 255, 255, 0.035));
}

.cloud-draft-select {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cloud-draft-date {
  color: rgba(89, 222, 255, 0.98);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.cloud-draft-select strong {
  display: block;
  color: var(--text-primary, #ffffff);
  font-size: clamp(0.98rem, 2vw, 1.05rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cloud-draft-meta {
  color: var(--text-muted, rgba(255, 255, 255, 0.70));
  font-size: 0.92rem;
}

.cloud-draft-select:hover strong,
.cloud-draft-select:focus-visible strong {
  color: rgba(89, 222, 255, 0.98);
}

.cloud-draft-select:focus-visible {
  outline: 3px solid rgba(0, 229, 255, 0.42);
  outline-offset: 6px;
  border-radius: 14px;
}

.cloud-draft-item-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.danger-action {
  border-color: rgba(255, 92, 122, 0.35) !important;
  color: rgba(255, 214, 222, 0.96) !important;
}

.danger-action:hover,
.danger-action:focus-visible {
  border-color: rgba(255, 92, 122, 0.75) !important;
  background: rgba(255, 92, 122, 0.12) !important;
}

.cloud-draft-empty {
  padding: clamp(1rem, 3vw, 1.25rem);
  text-align: center;
  border-radius: 18px;
  border: 1px dashed rgba(0, 229, 255, 0.22);
  color: var(--text-muted, rgba(255, 255, 255, 0.70));
  background: rgba(255, 255, 255, 0.035);
}

.dashboard-file-preview-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.dashboard-file-preview-single {
  display: grid;
  gap: 0.65rem;
}

.dashboard-file-preview-item {
  margin: 0;
}

.dashboard-file-preview-gallery img,
.dashboard-file-preview-single img,
.dashboard-file-preview-single video {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: 18px;
}

.dashboard-file-preview-single audio {
  width: 100%;
}

@media (max-width: 760px) {
  .cloud-draft-dropdown-header {
    display: grid;
  }

  .cloud-draft-dropdown-actions {
    justify-content: stretch;
  }

  .cloud-draft-dropdown-actions .tool-button {
    flex: 1 1 auto;
  }

  .cloud-draft-item {
    grid-template-columns: 1fr;
  }

  .cloud-draft-item-actions {
    justify-content: stretch;
  }

  .cloud-draft-item-actions .tool-button {
    width: 100%;
  }

  .dashboard-file-preview-gallery {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   SJC CLOUD DRAFT CARDS — FINAL VISUAL POLISH 3.3.150
========================================================== */

#cloudDraftDropdown {
  width: 100%;
  margin-top: 1rem;
}

#cloudDraftDropdown .cloud-draft-dropdown-inner {
  width: 100%;
  padding: clamp(1rem, 2.5vw, 1.35rem);
  border: 1px solid rgba(35, 211, 255, 0.2);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(0, 216, 255, 0.12),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(7, 18, 41, 0.98),
      rgba(3, 10, 27, 0.98)
    );
  box-shadow:
    0 24px 65px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#cloudDraftDropdown .cloud-draft-dropdown-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

#cloudDraftDropdown .cloud-draft-dropdown-header h3 {
  margin: 0.2rem 0 0.35rem;
  color: #ffffff;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.15;
}

#cloudDraftDropdown .cloud-draft-dropdown-header p {
  max-width: 620px;
  margin: 0;
  color: rgba(218, 228, 249, 0.7);
  line-height: 1.55;
}

#cloudDraftDropdown .cloud-draft-dropdown-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.55rem;
}

#cloudDraftDropdown .cloud-draft-list {
  display: grid;
  width: 100%;
  gap: 0.8rem;
  max-height: 440px;
  padding: 0.1rem 0.15rem 0.15rem 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(35, 211, 255, 0.44)
    rgba(255, 255, 255, 0.04);
}

#cloudDraftDropdown .cloud-draft-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(70, 151, 219, 0.2);
  border-radius: 20px;
  background:
    linear-gradient(
      135deg,
      rgba(19, 43, 77, 0.72),
      rgba(7, 18, 40, 0.86)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 30px rgba(0, 0, 0, 0.16);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

#cloudDraftDropdown .cloud-draft-item:hover {
  transform: translateY(-2px);
  border-color: rgba(35, 211, 255, 0.48);
  background:
    linear-gradient(
      135deg,
      rgba(18, 58, 92, 0.88),
      rgba(8, 23, 49, 0.94)
    );
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.24),
    0 0 30px rgba(0, 210, 255, 0.07);
}

/* Override inherited/native global button appearance. */
#cloudDraftDropdown button.cloud-draft-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 0.38rem !important;
  margin: 0 !important;
  padding: 0.15rem 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  outline: 0;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer;
}

#cloudDraftDropdown button.cloud-draft-select:hover,
#cloudDraftDropdown button.cloud-draft-select:active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#cloudDraftDropdown button.cloud-draft-select:focus-visible {
  outline: 3px solid rgba(35, 211, 255, 0.46);
  outline-offset: 6px;
}

#cloudDraftDropdown .cloud-draft-date {
  display: block;
  color: #39d9ff;
  font-size: 0.73rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

#cloudDraftDropdown .cloud-draft-select strong {
  display: block;
  margin: 0;
  color: #ffffff;
  font-size: clamp(0.98rem, 1.7vw, 1.08rem);
  font-weight: 750;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

#cloudDraftDropdown .cloud-draft-meta {
  display: block;
  color: rgba(203, 216, 242, 0.68);
  font-size: 0.88rem;
  line-height: 1.35;
}

#cloudDraftDropdown .cloud-draft-item-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#cloudDraftDropdown .cloud-draft-item-actions .tool-button {
  min-width: 94px;
  min-height: 42px;
  margin: 0;
  padding: 0.65rem 0.9rem;
  border-radius: 14px;
}

#cloudDraftDropdown
  .cloud-draft-item-actions
  [data-load-draft-id] {
  border-color: rgba(35, 211, 255, 0.4);
  background:
    linear-gradient(
      135deg,
      rgba(0, 204, 255, 0.17),
      rgba(20, 91, 163, 0.2)
    );
  color: #ffffff;
}

#cloudDraftDropdown
  .cloud-draft-item-actions
  [data-load-draft-id]:hover,
#cloudDraftDropdown
  .cloud-draft-item-actions
  [data-load-draft-id]:focus-visible {
  border-color: rgba(35, 211, 255, 0.78);
  background:
    linear-gradient(
      135deg,
      rgba(0, 214, 255, 0.27),
      rgba(25, 111, 195, 0.29)
    );
}

#cloudDraftDropdown
  .cloud-draft-item-actions
  [data-delete-draft-id] {
  border-color: rgba(255, 91, 127, 0.28);
  color: rgba(255, 213, 222, 0.94);
}

#cloudDraftDropdown
  .cloud-draft-item-actions
  [data-delete-draft-id]:hover,
#cloudDraftDropdown
  .cloud-draft-item-actions
  [data-delete-draft-id]:focus-visible {
  border-color: rgba(255, 91, 127, 0.68);
  background: rgba(255, 73, 115, 0.12);
  color: #ffffff;
}

#cloudDraftDropdown .cloud-draft-empty {
  padding: 1.3rem;
  border: 1px dashed rgba(35, 211, 255, 0.26);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(213, 225, 247, 0.7);
  text-align: center;
}

@media (max-width: 760px) {
  #cloudDraftDropdown .cloud-draft-dropdown-header {
    display: grid;
  }

  #cloudDraftDropdown .cloud-draft-dropdown-actions {
    width: 100%;
    justify-content: stretch;
  }

  #cloudDraftDropdown .cloud-draft-dropdown-actions .tool-button {
    flex: 1 1 0;
  }

  #cloudDraftDropdown .cloud-draft-item {
    grid-template-columns: minmax(0, 1fr);
  }

  #cloudDraftDropdown .cloud-draft-item-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #cloudDraftDropdown .cloud-draft-item-actions .tool-button {
    width: 100%;
  }
}

@media (max-width: 460px) {
  #cloudDraftDropdown .cloud-draft-item-actions {
    grid-template-columns: 1fr;
  }
}




/* Keep all primary composer tool buttons consistent. */

#postComposerForm #aiAssistButton,
#postComposerForm #saveDraftButton,
#postComposerForm #viewDraftsButton,
#postComposerForm #schedulePostButton {
  -webkit-appearance: none !important;
  appearance: none !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(71, 160, 224, 0.3) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(
      135deg,
      rgba(8, 24, 59, 0.98),
      rgba(12, 39, 89, 0.92)
    ) !important;
  color: #eaf5ff !important;
  font: inherit !important;
  font-weight: 800 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Light theme */

html[data-theme="light"] #postSchedulePanel input[type="datetime-local"],
html[data-theme="light"] #postScheduleDate {
  border-color: rgba(64, 136, 205, 0.3) !important;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.99),
      rgba(236, 246, 255, 0.98)
    ) !important;
  color: #10213d !important;
  color-scheme: light !important;
}

html[data-theme="light"] #postComposerForm #cancelScheduleButton,
html[data-theme="light"] #postSchedulePanel #cancelScheduleButton {
  border-color: rgba(194, 69, 91, 0.32) !important;
  background:
    linear-gradient(
      135deg,
      #fff1f4,
      #ffe3e9
    ) !important;
  color: #8c2940 !important;
}

html[data-theme="light"] #postComposerForm #confirmScheduleButton,
html[data-theme="light"] #postSchedulePanel #confirmScheduleButton {
  border-color: rgba(25, 170, 222, 0.42) !important;
  background:
    linear-gradient(
      135deg,
      #23c6f3,
      #76e4ff
    ) !important;
  color: #052034 !important;
}

/* Mobile */

@media (max-width: 560px) {
  #postSchedulePanel .dashboard-schedule-actions,
  #postSchedulePanel #schedulePanelActions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #postComposerForm #cancelScheduleButton,
  #postComposerForm #confirmScheduleButton,
  #postSchedulePanel #cancelScheduleButton,
  #postSchedulePanel #confirmScheduleButton {
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* ============================================================
   SCHEDULE ACTION BUTTONS
============================================================ */

#schedulePanelActions,
.dashboard-schedule-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
}

#cancelScheduleButton,
#confirmScheduleButton {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 150px;
  min-height: 48px;
  margin: 0;
  padding: 0 20px;
  border-radius: 15px;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  opacity: 1;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

/* Cancel */

#cancelScheduleButton,
.dashboard-schedule-cancel {
  border: 1px solid rgba(255, 112, 137, 0.42);
  background:
    linear-gradient(
      135deg,
      rgba(94, 27, 53, 0.96),
      rgba(55, 20, 45, 0.98)
    );
  color: #ffe1e8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.24);
}

#cancelScheduleButton:hover,
.dashboard-schedule-cancel:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 126, 151, 0.76);
  background:
    linear-gradient(
      135deg,
      rgba(126, 34, 66, 0.98),
      rgba(78, 24, 58, 0.98)
    );
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(255, 82, 127, 0.1);
}

/* Schedule Post */

#confirmScheduleButton,
.dashboard-schedule-confirm {
  border: 1px solid rgba(85, 223, 255, 0.72);
  background:
    linear-gradient(
      135deg,
      #17bce9 0%,
      #35d1f8 48%,
      #68e4ff 100%
    );
  color: #031522;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 12px 28px rgba(22, 190, 238, 0.28);
}

#confirmScheduleButton:hover,
.dashboard-schedule-confirm:hover {
  transform: translateY(-2px);
  border-color: rgba(155, 241, 255, 0.96);
  background:
    linear-gradient(
      135deg,
      #29cef7 0%,
      #62e2ff 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 16px 34px rgba(22, 190, 238, 0.4);
}

/* Icons */

#cancelScheduleButton > span[aria-hidden="true"],
#confirmScheduleButton > span[aria-hidden="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

#cancelScheduleButton > span[aria-hidden="true"] {
  font-size: 1.25rem;
}

#confirmScheduleButton > span[aria-hidden="true"] {
  font-size: 1.05rem;
}

/* Pressed state */

#cancelScheduleButton:active,
#confirmScheduleButton:active {
  transform: translateY(0) scale(0.98);
}

/* Keyboard focus */

#cancelScheduleButton:focus-visible,
#confirmScheduleButton:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(52, 208, 255, 0.22),
    0 14px 30px rgba(0, 0, 0, 0.3);
}

/* Disabled */

#cancelScheduleButton:disabled,
#confirmScheduleButton:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

/* Light mode */

html[data-theme="light"] #cancelScheduleButton,
html[data-theme="light"] .dashboard-schedule-cancel {
  border-color: rgba(197, 65, 91, 0.34);
  background:
    linear-gradient(
      135deg,
      #fff2f5,
      #ffe0e7
    );
  color: #8b2840;
  box-shadow:
    0 10px 22px rgba(84, 27, 44, 0.12);
}

html[data-theme="light"] #confirmScheduleButton,
html[data-theme="light"] .dashboard-schedule-confirm {
  border-color: rgba(22, 167, 215, 0.46);
  background:
    linear-gradient(
      135deg,
      #20c5f1,
      #77e4ff
    );
  color: #062033;
}

/* Mobile */

@media (max-width: 560px) {
  #schedulePanelActions,
  .dashboard-schedule-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  #cancelScheduleButton,
  #confirmScheduleButton {
    width: 100%;
    min-width: 0;
  }
}
/* =========================================================
   PROFILE BANNER — SINGLE IMAGE COVER FIX
   ========================================================= */

.profile-cover.has-profile-cover {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

.profile-edit-banner-preview {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

.profile-cover.has-profile-cover .profile-cover-pattern,
.profile-cover.has-profile-cover .profile-cover-glow {
  opacity: 0;
  visibility: hidden;
}
/* =========================================================
SMOOTH JAZZ CONNECT
ABOUT — EXPERIENCE SHOWCASE
CENTERED 12/10 PREMIUM SYSTEM
========================================================= */

.sjc-experience-showcase {
position: relative;
isolation: isolate;
width: 100%;
overflow: hidden;
padding: clamp(1.5rem, 3.5vw, 3rem);
border: 1px solid rgba(98, 224, 255, 0.24);
border-radius: clamp(1.4rem, 2.6vw, 2.1rem);
background:
radial-gradient(
circle at 50% -10%,
rgba(34, 221, 255, 0.18),
transparent 34%
),
radial-gradient(
circle at 0% 100%,
rgba(77, 205, 255, 0.1),
transparent 32%
),
radial-gradient(
circle at 100% 100%,
rgba(154, 78, 255, 0.15),
transparent 38%
),
linear-gradient(
145deg,
rgba(10, 24, 42, 0.98),
rgba(4, 10, 20, 0.995)
);
box-shadow:
0 32px 90px rgba(0, 0, 0, 0.42),
0 0 65px rgba(43, 216, 255, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 0.065);
}

.sjc-experience-showcase::before {
content: "";
position: absolute;
z-index: -2;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(
rgba(104, 222, 255, 0.027) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(104, 222, 255, 0.027) 1px,
transparent 1px
);
background-size: 44px 44px;
mask-image: radial-gradient(
circle at center,
#000 10%,
transparent 82%
);
}

.sjc-experience-showcase::after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 8%;
width: 84%;
height: 1px;
pointer-events: none;
background: linear-gradient(
90deg,
transparent,
rgba(77, 229, 255, 0.96),
rgba(255, 255, 255, 0.84),
rgba(171, 99, 255, 0.9),
transparent
);
box-shadow:
0 0 16px rgba(77, 229, 255, 0.72),
0 0 30px rgba(171, 99, 255, 0.38);
}

/* =========================================================
CENTERED HEADER
========================================================= */

.sjc-experience-showcase__header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0 0 clamp(1.6rem, 3.5vw, 2.65rem);
padding: 0 0 clamp(1.15rem, 2.2vw, 1.6rem);
border-bottom: 1px solid rgba(130, 220, 255, 0.15);
text-align: center;
}

.sjc-experience-showcase__header::after {
content: "";
position: absolute;
left: 50%;
bottom: -1px;
width: min(240px, 46%);
height: 2px;
border-radius: 999px;
background: linear-gradient(
90deg,
transparent,
rgba(79, 232, 255, 0.9),
rgba(176, 105, 255, 0.86),
transparent
);
transform: translateX(-50%);
box-shadow:
0 0 12px rgba(79, 232, 255, 0.42),
0 0 20px rgba(176, 105, 255, 0.24);
}

.sjc-experience-showcase__heading {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 980px;
margin-inline: auto;
text-align: center;
}

.sjc-experience-showcase__eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.7rem;
margin: 0 0 0.85rem;
color: #83efff;
font-size: 0.77rem;
font-weight: 850;
line-height: 1;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
text-shadow:
0 0 10px rgba(65, 229, 255, 0.78),
0 0 24px rgba(65, 229, 255, 0.32);
}

.sjc-experience-showcase__eyebrow::before,
.sjc-experience-showcase__eyebrow::after {
content: "";
width: clamp(1.7rem, 4vw, 2.75rem);
height: 2px;
flex: 0 0 auto;
border-radius: 999px;
background: linear-gradient(
90deg,
transparent,
#55eaff
);
box-shadow:
0 0 10px rgba(80, 234, 255, 0.72);
}

.sjc-experience-showcase__eyebrow::after {
background: linear-gradient(
90deg,
#af6cff,
transparent
);
box-shadow:
0 0 10px rgba(175, 108, 255, 0.62);
}

.sjc-experience-showcase__title {
max-width: 900px;
margin: 0 auto;
color: #f8fcff;
font-size: clamp(1.85rem, 4.5vw, 3.45rem);
font-weight: 900;
line-height: 1.06;
letter-spacing: -0.05em;
text-align: center;
text-wrap: balance;
text-shadow:
0 6px 26px rgba(0, 0, 0, 0.56),
0 0 34px rgba(72, 221, 255, 0.11);
}

/* =========================================================
CENTERED FEATURE GRID
========================================================= */

.sjc-experience-showcase__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 2.2vw, 1.4rem);
width: 100%;
max-width: 1180px;
margin-inline: auto;
}

.sjc-experience-showcase__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-width: 0;
min-height: 265px;
overflow: hidden;
padding: clamp(1.35rem, 2.7vw, 1.85rem);
border: 1px solid rgba(126, 218, 255, 0.17);
border-radius: 1.35rem;
background:
radial-gradient(
circle at 50% 0%,
rgba(74, 222, 255, 0.08),
transparent 46%
),
linear-gradient(
145deg,
rgba(18, 40, 63, 0.86),
rgba(6, 16, 29, 0.95)
);
box-shadow:
0 18px 42px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
text-align: center;
transition:
transform 240ms ease,
border-color 240ms ease,
background 240ms ease,
box-shadow 240ms ease;
}

.sjc-experience-showcase__item::before {
content: "";
position: absolute;
top: 0;
left: 12%;
width: 76%;
height: 1px;
pointer-events: none;
background: linear-gradient(
90deg,
transparent,
rgba(85, 232, 255, 0.7),
rgba(255, 255, 255, 0.4),
rgba(169, 101, 255, 0.52),
transparent
);
opacity: 0.75;
transition:
left 240ms ease,
width 240ms ease,
opacity 240ms ease;
}

.sjc-experience-showcase__item::after {
content: "";
position: absolute;
z-index: 0;
left: 50%;
bottom: -6.5rem;
width: 14rem;
height: 14rem;
pointer-events: none;
border-radius: 50%;
background: rgba(72, 220, 255, 0.085);
filter: blur(26px);
transform: translateX(-50%);
transition:
transform 280ms ease,
background-color 280ms ease;
}

.sjc-experience-showcase__item:hover {
transform: translateY(-7px);
border-color: rgba(93, 231, 255, 0.44);
background:
radial-gradient(
circle at 50% 0%,
rgba(75, 228, 255, 0.13),
transparent 50%
),
linear-gradient(
145deg,
rgba(24, 48, 73, 0.96),
rgba(7, 18, 33, 0.99)
);
box-shadow:
0 28px 62px rgba(0, 0, 0, 0.38),
0 0 36px rgba(60, 218, 255, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.085);
}

.sjc-experience-showcase__item:hover::before {
left: 4%;
width: 92%;
opacity: 1;
}

.sjc-experience-showcase__item:hover::after {
background: rgba(150, 85, 255, 0.14);
transform: translateX(-50%) scale(1.2);
}

/* =========================================================
CENTERED NUMBER BADGE
========================================================= */

.sjc-experience-showcase__number {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: clamp(3.7rem, 5.5vw, 4.55rem);
height: clamp(3.7rem, 5.5vw, 4.55rem);
margin: 0 auto 1.1rem;
border: 1px solid rgba(103, 231, 255, 0.38);
border-radius: 1.15rem;
background:
linear-gradient(
145deg,
rgba(62, 222, 255, 0.2),
rgba(124, 72, 255, 0.16)
);
color: #a7f3ff;
font-size: clamp(0.98rem, 1.7vw, 1.14rem);
font-weight: 950;
line-height: 1;
letter-spacing: 0.09em;
box-shadow:
0 14px 32px rgba(0, 0, 0, 0.32),
0 0 22px rgba(65, 222, 255, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
text-align: center;
text-shadow:
0 0 12px rgba(83, 231, 255, 0.84);
transition:
transform 240ms ease,
border-color 240ms ease,
box-shadow 240ms ease;
}

.sjc-experience-showcase__item:hover
.sjc-experience-showcase__number {
transform: translateY(-3px) scale(1.06);
border-color: rgba(118, 239, 255, 0.64);
box-shadow:
0 18px 38px rgba(0, 0, 0, 0.38),
0 0 30px rgba(72, 226, 255, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Alternate number accents */

.sjc-experience-showcase__item:nth-child(even)
.sjc-experience-showcase__number {
border-color: rgba(180, 119, 255, 0.4);
background:
linear-gradient(
145deg,
rgba(145, 86, 255, 0.21),
rgba(44, 208, 255, 0.13)
);
color: #dec6ff;
text-shadow:
0 0 12px rgba(179, 116, 255, 0.78);
}

.sjc-experience-showcase__item:nth-child(3n)::after {
background: rgba(154, 87, 255, 0.11);
}

/* =========================================================
CENTERED CONTENT
========================================================= */

.sjc-experience-showcase__content {
position: relative;
z-index: 1;
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-width: 0;
width: 100%;
text-align: center;
}

.sjc-experience-showcase__item-title {
position: relative;
margin: 0 0 0.7rem;
padding: 0 0 0.7rem;
color: #ffffff;
font-size: clamp(1.18rem, 2.1vw, 1.52rem);
font-weight: 880;
line-height: 1.15;
letter-spacing: -0.03em;
text-align: center;
transition:
color 240ms ease,
text-shadow 240ms ease;
}

.sjc-experience-showcase__item-title::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 2.25rem;
height: 2px;
border-radius: 999px;
background: linear-gradient(
90deg,
#54eaff,
#ad6cff
);
transform: translateX(-50%);
box-shadow:
0 0 10px rgba(83, 230, 255, 0.42);
}

.sjc-experience-showcase__description {
max-width: 48ch;
margin: 0 auto;
color: rgba(221, 237, 249, 0.84);
font-size: clamp(0.94rem, 1.55vw, 1.03rem);
font-weight: 450;
line-height: 1.72;
text-align: center;
text-wrap: pretty;
}

.sjc-experience-showcase__item:hover
.sjc-experience-showcase__item-title {
color: #bdf6ff;
text-shadow:
0 0 18px rgba(77, 226, 255, 0.27);
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 920px) {
.sjc-experience-showcase__grid {
grid-template-columns: 1fr;
max-width: 760px;
}

.sjc-experience-showcase__item {
min-height: 235px;
}
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 640px) {
.sjc-experience-showcase {
padding: 1.2rem;
border-radius: 1.3rem;
}

.sjc-experience-showcase__header {
margin-bottom: 1.25rem;
padding-bottom: 1.1rem;
}

.sjc-experience-showcase__eyebrow {
gap: 0.5rem;
font-size: 0.69rem;
letter-spacing: 0.16em;
}

.sjc-experience-showcase__eyebrow::before,
.sjc-experience-showcase__eyebrow::after {
width: 1.4rem;
}

.sjc-experience-showcase__title {
font-size: clamp(1.6rem, 8vw, 2.2rem);
line-height: 1.11;
}

.sjc-experience-showcase__grid {
gap: 0.9rem;
}

.sjc-experience-showcase__item {
min-height: 0;
padding: 1.2rem 1rem;
border-radius: 1.05rem;
}

.sjc-experience-showcase__number {
width: 3.35rem;
height: 3.35rem;
margin-bottom: 0.9rem;
border-radius: 0.9rem;
}

.sjc-experience-showcase__item-title {
margin-bottom: 0.6rem;
padding-bottom: 0.62rem;
}

.sjc-experience-showcase__description {
max-width: 36ch;
line-height: 1.64;
}
}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
.sjc-experience-showcase {
padding: 1rem;
}

.sjc-experience-showcase__item {
padding: 1.05rem 0.9rem;
}

.sjc-experience-showcase__title {
font-size: 1.7rem;
}

.sjc-experience-showcase__description {
font-size: 0.92rem;
}
}

/* =========================================================
KEYBOARD ACCESSIBILITY
========================================================= */

.sjc-experience-showcase__item:focus-within {
outline: 2px solid rgba(102, 232, 255, 0.76);
outline-offset: 3px;
border-color: rgba(102, 232, 255, 0.56);
}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
.sjc-experience-showcase__item,
.sjc-experience-showcase__item::before,
.sjc-experience-showcase__item::after,
.sjc-experience-showcase__number,
.sjc-experience-showcase__item-title {
transition: none !important;
}

.sjc-experience-showcase__item:hover,
.sjc-experience-showcase__item:hover
.sjc-experience-showcase__number {
transform: none;
}
}

/* =====================================================================
   SMOOTH JAZZ CONNECT SOCIAL UI
   File: append to /styles.css
   Version: 3.3.150
===================================================================== */

.sjc-social-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  align-items: center;
  margin-top: 1rem;
}

.sjc-social-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  min-width: 0;
  min-height: 46px;
  padding: .7rem .85rem;
  border: 1px solid rgba(94, 234, 212, .24);
  border-radius: 999px;
  background: rgba(7, 12, 28, .82);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}

.sjc-social-action:hover,
.sjc-social-action:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(94, 234, 212, .75);
  box-shadow: 0 0 24px rgba(34, 211, 238, .18);
}

.sjc-social-action:disabled {
  cursor: wait;
  opacity: .62;
  transform: none;
}

.sjc-social-action.is-active {
  border-color: rgba(168, 85, 247, .85);
  background: rgba(88, 28, 135, .24);
  box-shadow: 0 0 24px rgba(168, 85, 247, .22);
}

.sjc-comments-panel,
.sjc-member-list {
  display: grid;
  gap: 1rem;
}

.sjc-comments-list {
  display: grid;
  gap: .85rem;
  max-height: min(58vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: .25rem;
}

.sjc-comment {
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  background: rgba(15, 23, 42, .72);
}

.sjc-comment-header,
.sjc-member-list-item {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.sjc-comment-header img,
.sjc-member-list-item img {
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.sjc-comment-header > div,
.sjc-member-list-item > span {
  display: grid;
  min-width: 0;
}

.sjc-comment-header span,
.sjc-member-list-item small {
  color: var(--text-muted, #94a3b8);
}

.sjc-comment-actions,
.sjc-comment-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
  justify-content: space-between;
}

.sjc-comment-form {
  display: grid;
  gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(148, 163, 184, .16);
}

.sjc-comment-form textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
}

.sjc-member-list-item {
  padding: .85rem;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  text-decoration: none;
  color: inherit;
  background: rgba(15, 23, 42, .58);
}

.sjc-member-list-item:hover,
.sjc-member-list-item:focus-visible {
  border-color: rgba(94, 234, 212, .65);
}

.profile-follow-button {
  min-width: 132px;
}

.profile-follow-button.is-active {
  border-color: rgba(168, 85, 247, .85);
  box-shadow: 0 0 24px rgba(168, 85, 247, .22);
}

.profile-stat-card[data-profile-stat-action] {
  cursor: pointer;
}

.profile-stat-card[data-profile-stat-action]:hover,
.profile-stat-card[data-profile-stat-action]:focus-visible {
  border-color: rgba(94, 234, 212, .65);
  transform: translateY(-2px);
}

@media (max-width: 720px) {
  .sjc-social-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sjc-social-action {
    min-height: 48px;
  }
}

@media (max-width: 420px) {
  .sjc-social-actions {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
PROFILE DETAILS — FINAL VERTICAL PRODUCTION OVERRIDE
Version: 3.3.150
============================================================ */

#profilePage .profile-details-card .profile-detail-list {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
grid-template-columns: none !important;
gap: 12px !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}

#profilePage .profile-details-card .profile-detail-list > .profile-detail-row {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
gap: 7px !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 16px 18px 16px 21px !important;
box-sizing: border-box !important;
text-align: left !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 14px !important;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.06),
rgba(255, 255, 255, 0.02)
) !important;
}

#profilePage .profile-details-card .profile-detail-list > .profile-detail-row::before {
content: "" !important;
position: absolute !important;
top: 12px !important;
bottom: 12px !important;
left: 0 !important;
width: 3px !important;
border-radius: 0 4px 4px 0 !important;
background:
linear-gradient(
180deg,
#20d9ff,
#9558ff
) !important;
box-shadow: 0 0 12px rgba(32, 217, 255, 0.32) !important;
}

#profilePage .profile-details-card .profile-detail-list > .profile-detail-row > dt,
#profilePage .profile-details-card .profile-detail-list > .profile-detail-row > dd {
display: block !important;
float: none !important;
clear: both !important;
grid-column: auto !important;
grid-row: auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
transform: none !important;
}

#profilePage .profile-details-card .profile-detail-list > .profile-detail-row > dt {
color: rgba(255, 255, 255, 0.64) !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
line-height: 1.3 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
}

#profilePage .profile-details-card .profile-detail-list > .profile-detail-row > dd {
color: #ffffff !important;
font-size: 1rem !important;
font-weight: 700 !important;
line-height: 1.45 !important;
overflow-wrap: anywhere !important;
}

@media (max-width: 700px) {
#profilePage .profile-details-card .profile-detail-list {
gap: 10px !important;
}

#profilePage .profile-details-card .profile-detail-list > .profile-detail-row {
padding: 14px 15px 14px 19px !important;
}
}
/* =====================================================================
   SMOOTH JAZZ CONNECT — HOME + SOCIAL ACTIONS PRODUCTION OVERRIDE
   Append to the absolute bottom of /styles.css
   Version: 3.3.150
===================================================================== */

/* ---------------------------------------------------------------------
   HOME PAGE STRUCTURE
--------------------------------------------------------------------- */

#homePage {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  width: 100%;
  min-width: 0;
}

#homePage .home-composer,
#homePage .home-feed-section,
#homePage .home-community-cta {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#homePage .home-composer {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(49, 212, 255, 0.18);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(13, 25, 47, 0.98), rgba(5, 12, 27, 0.96));
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#homePage .home-composer-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}

#homePage .home-composer-icon {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 1px solid rgba(49, 212, 255, 0.24);
  border-radius: 22px;
  background: rgba(5, 12, 27, 0.76);
  box-shadow:
    0 0 28px rgba(49, 212, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#homePage .home-composer-icon img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

#homePage .home-composer-content {
  display: grid;
  justify-items: start;
  gap: 10px;
  min-width: 0;
}

#homePage .home-composer-content h1,
#homePage .home-composer-content p {
  margin: 0;
}

#homePage .home-composer-content p {
  max-width: 760px;
  color: rgba(219, 230, 246, 0.76);
  line-height: 1.68;
}

#homePage .home-feed-section {
  display: grid;
  gap: 18px;
}

#homePage .home-feed-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  width: 100%;
}

#homePage .home-feed-heading-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

#homePage .home-feed-heading-copy h2,
#homePage .home-feed-heading-copy p {
  margin: 0;
}

#homePage .home-feed-heading-copy p {
  max-width: 780px;
  color: rgba(219, 230, 246, 0.72);
  line-height: 1.62;
}

#homePage .home-feed-controls {
  min-width: min(100%, 210px);
}

#homePage #homeFeedFilter {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 48px;
  padding: 0 46px 0 16px;
  border: 1px solid rgba(49, 212, 255, 0.22);
  border-radius: 14px;
  color: #eef8ff;
  background:
    linear-gradient(145deg, rgba(12, 25, 47, 0.98), rgba(7, 15, 31, 0.98));
  background-image:
    linear-gradient(45deg, transparent 50%, #35dcff 50%),
    linear-gradient(135deg, #35dcff 50%, transparent 50%),
    linear-gradient(145deg, rgba(12, 25, 47, 0.98), rgba(7, 15, 31, 0.98));
  background-position:
    calc(100% - 21px) 20px,
    calc(100% - 15px) 20px,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 22px rgba(0, 0, 0, 0.18);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

#homePage #homeFeedFilter:hover,
#homePage #homeFeedFilter:focus {
  border-color: rgba(49, 212, 255, 0.62);
  outline: none;
  box-shadow:
    0 0 0 3px rgba(49, 212, 255, 0.10),
    0 10px 26px rgba(0, 0, 0, 0.22);
}

#homePage #homeFeedFilter option {
  color: #eef8ff;
  background: #07101f;
}

#homePage .home-feed-list {
  display: grid;
  gap: 20px;
  width: 100%;
  min-width: 0;
}

/* ---------------------------------------------------------------------
   POST CARDS
--------------------------------------------------------------------- */

#homePage .post-card {
  position: relative;
  display: grid;
  gap: 16px;
  width: 100%;
  min-width: 0;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(56, 196, 255, 0.17);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(16, 31, 57, 0.98), rgba(7, 17, 35, 0.97));
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  overflow: visible;
}

#homePage .post-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#homePage .post-author {
  min-width: 0;
}

#homePage .post-body {
  color: rgba(229, 238, 251, 0.86);
  font-size: 1rem;
  line-height: 1.72;
}

#homePage .post-media img,
#homePage .post-media video {
  display: block;
  width: 100%;
  max-height: 620px;
  object-fit: cover;
  border-radius: 18px;
}

/* ---------------------------------------------------------------------
   SOCIAL ACTION BAR — SINGLE CLEAN ROW
--------------------------------------------------------------------- */

#homePage .post-actions,
#homePage .sjc-social-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.085) !important;
  background: transparent !important;
}

#homePage .post-actions > button,
#homePage .sjc-social-action {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(70, 201, 255, 0.18) !important;
  border-radius: 13px !important;
  color: rgba(226, 237, 250, 0.84) !important;
  background:
    linear-gradient(145deg, rgba(17, 34, 61, 0.95), rgba(8, 19, 38, 0.95)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 7px 18px rgba(0, 0, 0, 0.14) !important;
  font: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease !important;
}

#homePage .post-actions > button:hover,
#homePage .post-actions > button:focus-visible,
#homePage .sjc-social-action:hover,
#homePage .sjc-social-action:focus-visible {
  color: #ffffff !important;
  border-color: rgba(48, 216, 255, 0.58) !important;
  background:
    linear-gradient(145deg, rgba(22, 75, 111, 0.90), rgba(31, 34, 82, 0.94)) !important;
  box-shadow:
    0 0 0 3px rgba(48, 216, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.22) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

#homePage .post-actions > button:disabled,
#homePage .sjc-social-action:disabled {
  opacity: 0.58 !important;
  cursor: wait !important;
  transform: none !important;
}

#homePage .post-actions > button > span,
#homePage .sjc-social-action > span {
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

#homePage .post-actions > button > span:first-child,
#homePage .sjc-social-action > span:first-child {
  color: #42dcff !important;
  font-size: 1rem !important;
  text-shadow: 0 0 10px rgba(66, 220, 255, 0.30) !important;
}

#homePage .post-actions > button[aria-pressed="true"],
#homePage .sjc-social-action.is-active {
  border-color: rgba(166, 92, 255, 0.68) !important;
  color: #ffffff !important;
  background:
    linear-gradient(145deg, rgba(91, 42, 137, 0.82), rgba(30, 31, 76, 0.94)) !important;
}

/* ---------------------------------------------------------------------
   POST OPTIONS MENU — NEVER DEFAULT GREY
--------------------------------------------------------------------- */

#homePage .sjc-post-menu-wrap,
#homePage .post-menu-wrap {
  position: relative;
}

#homePage .sjc-post-menu-button,
#homePage .post-menu-button {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(230, 239, 251, 0.78);
  background: transparent;
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}

#homePage .sjc-post-menu-button:hover,
#homePage .sjc-post-menu-button:focus-visible,
#homePage .post-menu-button:hover,
#homePage .post-menu-button:focus-visible {
  color: #ffffff;
  border-color: rgba(48, 216, 255, 0.28);
  background: rgba(25, 55, 91, 0.72);
  outline: none;
}

#homePage .sjc-post-menu,
#homePage .post-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 6px;
  width: min(220px, calc(100vw - 36px));
  padding: 9px;
  border: 1px solid rgba(48, 216, 255, 0.22);
  border-radius: 15px;
  color: #edf7ff;
  background:
    linear-gradient(145deg, rgba(8, 18, 35, 0.99), rgba(5, 12, 27, 0.99));
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px);
}

#homePage .sjc-post-menu[hidden],
#homePage .post-menu[hidden] {
  display: none !important;
}

#homePage .sjc-post-menu button,
#homePage .sjc-post-menu a,
#homePage .post-menu button,
#homePage .post-menu a {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(232, 241, 252, 0.86);
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

#homePage .sjc-post-menu button:hover,
#homePage .sjc-post-menu a:hover,
#homePage .post-menu button:hover,
#homePage .post-menu a:hover {
  color: #ffffff;
  border-color: rgba(48, 216, 255, 0.20);
  background: rgba(31, 69, 109, 0.58);
}

/* ---------------------------------------------------------------------
   CTA
--------------------------------------------------------------------- */

#homePage .home-community-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(80, 198, 255, 0.17);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(16, 31, 57, 0.96), rgba(8, 18, 37, 0.96));
}

#homePage .home-community-cta-copy {
  display: grid;
  gap: 8px;
}

#homePage .home-community-cta-copy h2,
#homePage .home-community-cta-copy p {
  margin: 0;
}

/* ---------------------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------------------- */

@media (max-width: 760px) {
  #homePage .home-composer-layout,
  #homePage .home-feed-heading,
  #homePage .home-community-cta {
    grid-template-columns: 1fr;
  }

  #homePage .home-composer-icon {
    width: 70px;
    height: 70px;
  }

  #homePage .home-feed-controls {
    width: 100%;
  }

  #homePage .post-actions,
  #homePage .sjc-social-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 430px) {
  #homePage .post-card {
    padding: 17px 14px;
    border-radius: 19px;
  }

  #homePage .post-actions > button,
  #homePage .sjc-social-action {
    min-height: 44px !important;
    padding: 9px 8px !important;
    font-size: 0.82rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #homePage .post-actions > button,
  #homePage .sjc-social-action {
    transition: none !important;
  }

  #homePage .post-actions > button:hover,
  #homePage .sjc-social-action:hover {
    transform: none !important;
  }
}
/* =====================================================================
SMOOTH JAZZ CONNECT
CONNECTS PAGE SEARCH TOOLBAR — DEFINITIVE OVERRIDE
Target: /partials/connects.html
Version: 3.3.150
===================================================================== */

#connectsPage .connects-toolbar {
display: grid !important;
grid-template-columns: minmax(280px, 1fr) auto !important;
align-items: end !important;
gap: 20px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 22px !important;
overflow: visible !important;
border: 1px solid rgba(52, 203, 255, 0.22) !important;
border-radius: 22px !important;
background:
linear-gradient(
145deg,
rgba(8, 21, 45, 0.98),
rgba(5, 14, 31, 0.96)
) !important;
box-shadow:
0 18px 42px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#connectsPage .connects-search-field {
display: grid !important;
grid-template-columns: 1fr !important;
align-items: stretch !important;
gap: 10px !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: #ffffff !important;
}

#connectsPage .connects-search-field > span {
display: block !important;
width: 100% !important;
margin: 0 !important;
color: rgba(237, 246, 255, 0.92) !important;
font-family: inherit !important;
font-size: 0.88rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: 0.03em !important;
text-transform: uppercase !important;
}

#connectsPage input#connectsSearch,
#connectsPage .connects-search-field input[type="search"] {
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 54px !important;
min-height: 54px !important;
margin: 0 !important;
padding: 0 18px !important;
overflow: visible !important;

border: 1px solid rgba(48, 205, 255, 0.38) !important;
border-radius: 15px !important;
outline: 0 !important;

background-color: #07172f !important;
background-image:
linear-gradient(
145deg,
rgba(5, 19, 42, 1),
rgba(8, 31, 61, 1)
) !important;

color: #ffffff !important;
caret-color: #35d7ff !important;

font-family: inherit !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
text-align: left !important;

appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;

box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 8px 20px rgba(0, 0, 0, 0.2) !important;

transition:
border-color 180ms ease,
box-shadow 180ms ease,
background-color 180ms ease !important;
}

#connectsPage input#connectsSearch::placeholder {
color: rgba(181, 198, 221, 0.58) !important;
opacity: 1 !important;
}

#connectsPage input#connectsSearch:hover {
border-color: rgba(54, 215, 255, 0.65) !important;
background-color: #0a2141 !important;
}

#connectsPage input#connectsSearch:focus,
#connectsPage input#connectsSearch:focus-visible {
border-color: #38d8ff !important;
outline: 0 !important;
background-color: #0a2448 !important;
box-shadow:
0 0 0 4px rgba(56, 216, 255, 0.14),
0 0 26px rgba(28, 199, 255, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#connectsPage input#connectsSearch:-webkit-autofill,
#connectsPage input#connectsSearch:-webkit-autofill:hover,
#connectsPage input#connectsSearch:-webkit-autofill:focus {
-webkit-text-fill-color: #ffffff !important;
caret-color: #35d7ff !important;
box-shadow:
0 0 0 1000px #07172f inset,
0 0 0 4px rgba(56, 216, 255, 0.12) !important;
transition: background-color 9999s ease-out 0s !important;
}

#connectsPage input#connectsSearch::-webkit-search-decoration,
#connectsPage input#connectsSearch::-webkit-search-results-button,
#connectsPage input#connectsSearch::-webkit-search-results-decoration {
display: none !important;
}

#connectsPage input#connectsSearch::-webkit-search-cancel-button {
width: 18px !important;
height: 18px !important;
margin-left: 10px !important;
cursor: pointer !important;
filter: invert(1) brightness(1.4) !important;
opacity: 0.72 !important;
}

#connectsPage .connects-section-nav {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: wrap !important;
gap: 9px !important;
margin: 0 !important;
padding: 0 !important;
}

#connectsPage .connects-section-nav a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 44px !important;
padding: 10px 15px !important;

border: 1px solid rgba(55, 203, 255, 0.24) !important;
border-radius: 999px !important;

background:
linear-gradient(
145deg,
rgba(13, 37, 70, 0.96),
rgba(8, 25, 50, 0.96)
) !important;

color: rgba(236, 247, 255, 0.94) !important;
font-size: 0.84rem !important;
font-weight: 800 !important;
line-height: 1 !important;
text-decoration: none !important;
white-space: nowrap !important;

box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;

transition:
transform 180ms ease,
border-color 180ms ease,
background 180ms ease,
box-shadow 180ms ease !important;
}

#connectsPage .connects-section-nav a:hover {
transform: translateY(-1px) !important;
border-color: rgba(50, 218, 255, 0.62) !important;
background:
linear-gradient(
145deg,
rgba(17, 66, 108, 0.98),
rgba(10, 42, 78, 0.98)
) !important;
color: #ffffff !important;
box-shadow:
0 10px 22px rgba(0, 183, 255, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#connectsPage .connects-section-nav a:focus-visible {
outline: 0 !important;
border-color: #38d8ff !important;
box-shadow:
0 0 0 4px rgba(56, 216, 255, 0.16) !important;
}

/* Prevent old generic form rules from shrinking the field */
#connectsPage .connects-toolbar label,
#connectsPage .connects-toolbar input,
#connectsPage .connects-toolbar input[type="search"] {
float: none !important;
position: static !important;
inset: auto !important;
transform: none !important;
}

/* Tablet */
@media (max-width: 980px) {
#connectsPage .connects-toolbar {
grid-template-columns: 1fr !important;
align-items: stretch !important;
}

#connectsPage .connects-section-nav {
justify-content: flex-start !important;
}
}

/* Mobile */
@media (max-width: 640px) {
#connectsPage .connects-toolbar {
gap: 16px !important;
padding: 17px !important;
border-radius: 18px !important;
}

#connectsPage input#connectsSearch {
width: 100% !important;
height: 54px !important;
min-height: 54px !important;
}

#connectsPage .connects-section-nav {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
width: 100% !important;
}

#connectsPage .connects-section-nav a {
width: 100% !important;
min-width: 0 !important;
}
}

@media (prefers-reduced-motion: reduce) {
#connectsPage input#connectsSearch,
#connectsPage .connects-section-nav a {
transition: none !important;
}
}
/* =====================================================================
   SMOOTH JAZZ CONNECT
   CHAT REIMAGINED LAYOUT
   Version: 3.3.150
   Paste at bottom of styles.css
===================================================================== */

.chat-page-reimagined {
  --chat-rail-width: 320px;
  --chat-shell-height: min(78vh, 820px);
  width: 100%;
}

.chat-page-reimagined .chat-shell {
  overflow: hidden;
  border: 1px solid rgba(45, 201, 255, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 0, rgba(32, 213, 255, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(4, 15, 36, 0.98), rgba(3, 11, 27, 0.99));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.chat-page-reimagined .chat-shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(45, 201, 255, 0.16);
  background: rgba(5, 18, 42, 0.9);
}

.chat-page-reimagined .chat-shell-heading h1 {
  margin: 3px 0 4px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.chat-page-reimagined .chat-shell-heading p {
  margin: 0;
  color: var(--text-muted, #aebbd2);
}

.chat-page-reimagined .chat-primary-action {
  min-width: 160px;
}

.chat-page-reimagined .chat-app-frame {
  display: grid;
  grid-template-columns: var(--chat-rail-width) minmax(0, 1fr);
  height: var(--chat-shell-height);
  min-height: 620px;
}

.chat-page-reimagined .chat-sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(45, 201, 255, 0.16);
  background: rgba(3, 13, 31, 0.94);
}

.chat-page-reimagined .chat-sidebar-header {
  padding: 20px 20px 14px;
}

.chat-page-reimagined .chat-search {
  margin: 0 16px 14px;
}

.chat-page-reimagined .chat-conversation-list {
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 16px;
}

.chat-page-reimagined .chat-workspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(30, 114, 180, 0.08), transparent 38%),
    rgba(3, 12, 29, 0.96);
}

.chat-page-reimagined .chat-workspace-header {
  min-height: 76px;
  padding: 14px 18px;
}

.chat-page-reimagined .chat-active-copy .eyebrow {
  display: none;
}

.chat-page-reimagined .chat-message-list {
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
}

.chat-page-reimagined .chat-composer {
  position: sticky;
  bottom: 0;
  z-index: 5;
}

.chat-page-reimagined .chat-safety-inline,
.chat-page-reimagined .chat-dialog-safety-note {
  margin: 10px 0 0;
  color: rgba(175, 191, 215, 0.68);
  font-size: 0.72rem;
  line-height: 1.45;
}

.chat-page-reimagined .chat-dialog-safety-note {
  padding-top: 14px;
  border-top: 1px solid rgba(45, 201, 255, 0.12);
}

.chat-page-reimagined .chat-mobile-back-button {
  display: none;
}

.chat-page-reimagined .chat-empty-state .button {
  display: none;
}

@media (max-width: 1100px) {
  .chat-page-reimagined {
    --chat-rail-width: 280px;
  }
}

@media (max-width: 760px) {
  .chat-page-reimagined .chat-shell-header {
    padding: 18px;
  }

  .chat-page-reimagined .chat-shell-heading p {
    display: none;
  }

  .chat-page-reimagined .chat-primary-action {
    min-width: auto;
  }

  .chat-page-reimagined .chat-app-frame {
    display: block;
    height: calc(100dvh - 210px);
    min-height: 560px;
  }

  .chat-page-reimagined .chat-sidebar,
  .chat-page-reimagined .chat-workspace {
    width: 100%;
    height: 100%;
  }

  .chat-page-reimagined .chat-workspace {
    display: none;
  }

  .chat-page-reimagined.is-conversation-open .chat-sidebar {
    display: none;
  }

  .chat-page-reimagined.is-conversation-open .chat-workspace {
    display: grid;
  }

  .chat-page-reimagined.is-conversation-open .chat-mobile-back-button {
    display: grid;
    place-items: center;
  }

  .chat-page-reimagined .chat-composer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}
/* =====================================================================
SMOOTH JAZZ CONNECT
CHAT REIMAGINED — FINAL VISUAL CORRECTION LAYER
Version: 3.3.150
Target: /partials/chat.html + /js/chat.js
Paste at the absolute bottom of /styles.css
===================================================================== */

.chat-page-reimagined {
--chat-final-cyan: #20d9ff;
--chat-final-cyan-bright: #59e8ff;
--chat-final-blue: #1c8cff;
--chat-final-purple: #735bff;
--chat-final-gold: #ffd66f;
--chat-final-white: #f7fbff;
--chat-final-text: #dce8f8;
--chat-final-muted: #98aac4;
--chat-final-panel: #06142d;
--chat-final-panel-soft: #091c3a;
--chat-final-panel-deep: #020a1c;
--chat-final-border: rgba(49, 204, 255, 0.28);
--chat-final-border-strong: rgba(48, 220, 255, 0.72);
--chat-final-glow:
0 0 0 1px rgba(39, 210, 255, 0.08) inset,
0 24px 70px rgba(0, 0, 0, 0.42);
}

/* =====================================================================
GLOBAL CHAT NORMALIZATION
===================================================================== */

.chat-page-reimagined,
.chat-page-reimagined *,
.chat-page-reimagined *::before,
.chat-page-reimagined *::after {
box-sizing: border-box;
}

.chat-page-reimagined button,
.chat-page-reimagined input,
.chat-page-reimagined textarea,
.chat-page-reimagined select {
font: inherit;
}

.chat-page-reimagined button {
appearance: none;
-webkit-appearance: none;
border: 0;
color: inherit;
background: none;
}

.chat-page-reimagined [hidden] {
display: none !important;
}

/* =====================================================================
ACCESSIBLE HIDDEN LABELS
===================================================================== */

.chat-page-reimagined .sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}

/* =====================================================================
MAIN SHELL ALIGNMENT
===================================================================== */

.chat-page-reimagined .chat-shell {
width: 100%;
max-width: none;
}

.chat-page-reimagined .chat-shell-header {
position: relative;
min-height: 112px;
padding:
clamp(20px, 2.8vw, 30px)
clamp(20px, 3.2vw, 34px);
}

.chat-page-reimagined .chat-shell-heading {
min-width: 0;
}

.chat-page-reimagined .chat-shell-heading .eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 0 0 8px;
color: var(--chat-final-cyan);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
}

.chat-page-reimagined .chat-shell-heading .eyebrow::before {
content: "";
width: 22px;
height: 2px;
border-radius: 999px;
background:
linear-gradient(
90deg,
var(--chat-final-cyan),
var(--chat-final-purple)
);
}

.chat-page-reimagined .chat-shell-heading h1 {
color: var(--chat-final-white);
}

.chat-page-reimagined .chat-shell-heading p {
max-width: 680px;
color: var(--chat-final-muted);
line-height: 1.55;
}

/* =====================================================================
PRIMARY NEW MESSAGE BUTTON
===================================================================== */

.chat-page-reimagined .chat-primary-action,
.chat-page-reimagined #newConversationButton {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 170px;
min-height: 52px;
padding: 0 22px !important;
border: 1px solid rgba(113, 232, 255, 0.55) !important;
border-radius: 15px !important;
color: #00101e !important;
font-weight: 850 !important;
line-height: 1 !important;
background:
linear-gradient(
135deg,
#10cfff,
#61d9f5
) !important;
box-shadow:
0 14px 32px rgba(16, 202, 255, 0.23),
0 0 24px rgba(38, 220, 255, 0.13) !important;
cursor: pointer;
transition:
transform 180ms ease,
box-shadow 180ms ease,
filter 180ms ease;
}

.chat-page-reimagined .chat-primary-action:hover,
.chat-page-reimagined #newConversationButton:hover {
transform: translateY(-2px);
filter: brightness(1.07);
box-shadow:
0 18px 42px rgba(16, 202, 255, 0.3),
0 0 32px rgba(38, 220, 255, 0.18) !important;
}

/* =====================================================================
CHAT FRAME
===================================================================== */

.chat-page-reimagined .chat-app-frame {
border-top: 1px solid rgba(46, 204, 255, 0.12);
}

.chat-page-reimagined .chat-sidebar {
background:
radial-gradient(
circle at 15% 0,
rgba(28, 207, 255, 0.07),
transparent 35%
),
linear-gradient(
180deg,
rgba(4, 15, 36, 0.98),
rgba(2, 9, 24, 0.99)
);
}

.chat-page-reimagined .chat-workspace {
background:
radial-gradient(
circle at 50% 10%,
rgba(38, 115, 210, 0.08),
transparent 38%
),
linear-gradient(
180deg,
rgba(4, 15, 35, 0.99),
rgba(2, 9, 24, 0.99)
);
}

/* =====================================================================
SIDEBAR HEADER
===================================================================== */

.chat-page-reimagined .chat-sidebar-header {
min-height: 96px;
padding: 20px 20px 16px;
border-bottom:
1px solid
rgba(41, 198, 255, 0.15);
}

.chat-page-reimagined .chat-sidebar-header > div {
min-width: 0;
}

.chat-page-reimagined .chat-sidebar-header .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--chat-final-cyan);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.17em;
text-transform: uppercase;
}

.chat-page-reimagined .chat-sidebar-header .eyebrow::before {
content: "";
width: 20px;
height: 2px;
border-radius: 999px;
background: var(--chat-final-cyan);
}

.chat-page-reimagined .chat-sidebar-header h2 {
margin: 6px 0 0;
color: var(--chat-final-white);
font-size: clamp(1.35rem, 2vw, 1.75rem);
line-height: 1;
letter-spacing: -0.035em;
}

/* =====================================================================
ALL CHAT ICON BUTTONS
===================================================================== */

.chat-page-reimagined .icon-button,
.chat-page-reimagined .chat-composer-action,
.chat-page-reimagined #chatSidebarNewButton,
.chat-page-reimagined #chatMobileBackButton,
.chat-page-reimagined #chatViewProfileButton,
.chat-page-reimagined #chatConversationMenuButton,
.chat-page-reimagined #chatCloseNewConversationButton,
.chat-page-reimagined #chatCancelReplyButton,
.chat-page-reimagined #chatRemoveAttachmentButton {
display: inline-grid !important;
place-items: center;
flex: 0 0 auto;
width: 46px;
height: 46px;
padding: 0 !important;
border:
1px solid
rgba(50, 205, 255, 0.26) !important;
border-radius: 14px !important;
color: var(--chat-final-cyan) !important;
font-size: 1.12rem;
font-weight: 700;
line-height: 1;
background:
linear-gradient(
145deg,
rgba(14, 57, 96, 0.72),
rgba(7, 28, 61, 0.88)
) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.018),
0 8px 20px rgba(0, 0, 0, 0.2) !important;
cursor: pointer;
transition:
transform 170ms ease,
border-color 170ms ease,
background 170ms ease,
box-shadow 170ms ease;
}

.chat-page-reimagined .icon-button:hover,
.chat-page-reimagined .chat-composer-action:hover:not(:disabled) {
transform: translateY(-2px);
border-color:
rgba(50, 220, 255, 0.72) !important;
background:
linear-gradient(
145deg,
rgba(18, 107, 151, 0.7),
rgba(17, 53, 106, 0.84)
) !important;
box-shadow:
0 12px 28px rgba(0, 167, 229, 0.16),
0 0 22px rgba(31, 218, 255, 0.1) !important;
}

.chat-page-reimagined .icon-button:disabled,
.chat-page-reimagined .chat-composer-action:disabled {
opacity: 0.38 !important;
cursor: not-allowed;
transform: none;
}

/* =====================================================================
SIDEBAR SEARCH — REMOVE WRAPPED LABEL
===================================================================== */

.chat-page-reimagined .chat-search {
position: relative;
display: block !important;
width: auto;
margin: 16px !important;
}

.chat-page-reimagined .chat-search-icon {
position: absolute;
top: 50%;
left: 17px;
z-index: 2;
transform: translateY(-50%);
color: var(--chat-final-cyan);
font-size: 1rem;
pointer-events: none;
}

.chat-page-reimagined #chatSearchInput {
display: block;
width: 100% !important;
min-width: 0;
height: 50px !important;
min-height: 50px !important;
margin: 0 !important;
padding: 0 18px 0 46px !important;
border:
1px solid
rgba(47, 188, 244, 0.3) !important;
border-radius: 15px !important;
outline: none;
color: var(--chat-final-white) !important;
font-size: 0.93rem;
background:
rgba(2, 11, 28, 0.88) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.012) !important;
}

.chat-page-reimagined #chatSearchInput::placeholder {
color:
rgba(161, 178, 202, 0.62) !important;
}

.chat-page-reimagined #chatSearchInput:focus {
border-color:
var(--chat-final-cyan) !important;
box-shadow:
0 0 0 4px rgba(31, 217, 255, 0.1),
0 0 22px rgba(31, 217, 255, 0.08) !important;
}

/* =====================================================================
CONVERSATION LIST ITEMS
===================================================================== */

.chat-page-reimagined .chat-conversation-list {
gap: 9px !important;
}

.chat-page-reimagined .chat-conversation-item {
display: grid !important;
grid-template-columns: 48px minmax(0, 1fr);
align-items: center;
gap: 13px;
width: 100%;
min-height: 74px;
padding: 12px 13px !important;
border:
1px solid
transparent !important;
border-radius: 17px !important;
color: var(--chat-final-white) !important;
text-align: left;
background:
transparent !important;
cursor: pointer;
}

.chat-page-reimagined .chat-conversation-item:hover {
border-color:
rgba(37, 204, 255, 0.24) !important;
background:
rgba(17, 62, 101, 0.34) !important;
}

.chat-page-reimagined .chat-conversation-item.is-active {
border-color:
rgba(43, 215, 255, 0.54) !important;
background:
linear-gradient(
135deg,
rgba(18, 151, 205, 0.2),
rgba(95, 71, 211, 0.16)
) !important;
box-shadow:
inset 3px 0 0
var(--chat-final-cyan),
0 14px 30px rgba(0, 0, 0, 0.2) !important;
}

.chat-page-reimagined .chat-conversation-avatar {
width: 48px !important;
height: 48px !important;
border:
2px solid
rgba(45, 209, 255, 0.3);
border-radius: 50% !important;
object-fit: cover;
}

.chat-page-reimagined .chat-conversation-topline strong {
color: var(--chat-final-white) !important;
font-size: 0.93rem;
}

.chat-page-reimagined .chat-conversation-topline time,
.chat-page-reimagined .chat-conversation-preview {
color: var(--chat-final-muted) !important;
}

.chat-page-reimagined .chat-conversation-preview {
font-size: 0.82rem;
}

/* =====================================================================
WORKSPACE HEADER
===================================================================== */

.chat-page-reimagined .chat-workspace-header {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
min-height: 86px;
padding: 15px 20px !important;
border-bottom:
1px solid
rgba(45, 200, 255, 0.15);
background:
rgba(4, 16, 38, 0.94);
}

.chat-page-reimagined .chat-active-person {
display: flex;
align-items: center;
gap: 13px;
min-width: 0;
}

.chat-page-reimagined .chat-active-avatar {
width: 50px;
height: 50px;
border:
2px solid
rgba(46, 211, 255, 0.4);
border-radius: 50%;
object-fit: cover;
}

.chat-page-reimagined .chat-active-copy h2 {
margin: 0 0 5px;
color: var(--chat-final-white);
font-size: clamp(1.15rem, 2vw, 1.55rem);
line-height: 1.05;
letter-spacing: -0.03em;
}

.chat-page-reimagined .chat-conversation-subtitle {
margin: 0;
color: var(--chat-final-muted);
font-size: 0.82rem;
}

.chat-page-reimagined .chat-workspace-actions {
display: flex;
align-items: center;
gap: 9px;
}

/* =====================================================================
CONVERSATION OPTIONS MENU — REMOVE GRAY BUTTONS
===================================================================== */

.chat-page-reimagined .chat-conversation-menu-wrap {
position: relative;
}

.chat-page-reimagined .chat-conversation-menu {
position: absolute !important;
top: calc(100% + 10px);
right: 0;
z-index: 100;
display: grid !important;
gap: 5px;
min-width: 220px;
padding: 9px !important;
border:
1px solid
rgba(47, 214, 255, 0.36) !important;
border-radius: 16px !important;
background:
linear-gradient(
145deg,
rgba(5, 19, 42, 0.995),
rgba(2, 10, 25, 0.995)
) !important;
box-shadow:
0 24px 58px rgba(0, 0, 0, 0.62),
0 0 32px rgba(18, 206, 255, 0.1) !important;
backdrop-filter: blur(20px);
}

.chat-page-reimagined .chat-conversation-menu[hidden] {
display: none !important;
}

.chat-page-reimagined .chat-conversation-menu button {
display: flex !important;
align-items: center;
width: 100%;
min-height: 42px;
padding: 10px 13px !important;
border:
1px solid
transparent !important;
border-radius: 11px !important;
color: var(--chat-final-text) !important;
font-size: 0.88rem;
font-weight: 650;
text-align: left;
background:
transparent !important;
cursor: pointer;
}

.chat-page-reimagined .chat-conversation-menu button:hover,
.chat-page-reimagined .chat-conversation-menu button:focus-visible {
border-color:
rgba(47, 214, 255, 0.24) !important;
color: var(--chat-final-white) !important;
background:
rgba(21, 106, 151, 0.26) !important;
}

/* =====================================================================
MESSAGE AREA
===================================================================== */

.chat-page-reimagined .chat-message-list {
gap: 14px;
padding: 24px !important;
}

.chat-page-reimagined .chat-message {
display: flex;
width: 100%;
}

.chat-page-reimagined .chat-message.is-own-message {
justify-content: flex-end;
}

.chat-page-reimagined .chat-message.is-received-message {
justify-content: flex-start;
}

.chat-page-reimagined .chat-message-bubble {
max-width: min(74%, 650px);
padding: 13px 15px 11px !important;
border:
1px solid
rgba(49, 183, 255, 0.2) !important;
border-radius:
19px 19px 19px 7px !important;
color: var(--chat-final-text) !important;
background:
linear-gradient(
145deg,
rgba(13, 44, 79, 0.96),
rgba(7, 25, 55, 0.98)
) !important;
box-shadow:
0 10px 26px rgba(0, 0, 0, 0.24) !important;
}

.chat-page-reimagined
.chat-message.is-own-message
.chat-message-bubble {
border-color:
rgba(40, 213, 255, 0.38) !important;
border-radius:
19px 19px 7px 19px !important;
background:
linear-gradient(
135deg,
rgba(15, 147, 204, 0.58),
rgba(55, 66, 165, 0.6)
) !important;
}

.chat-page-reimagined .chat-message-header {
margin-bottom: 7px;
}

.chat-page-reimagined .chat-message-header strong {
color: var(--chat-final-cyan) !important;
font-size: 0.8rem;
}

.chat-page-reimagined
.chat-message.is-own-message
.chat-message-header strong {
color: #ffffff !important;
}

.chat-page-reimagined .chat-message-header time {
color:
rgba(213, 227, 246, 0.7) !important;
font-size: 0.7rem;
}

.chat-page-reimagined .chat-message-bubble p {
color: var(--chat-final-text) !important;
}

/* =====================================================================
REPLY BUTTON — REMOVE GRAY DEFAULT STYLE
===================================================================== */

.chat-page-reimagined .chat-message-reply-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 28px;
margin-top: 9px !important;
padding: 5px 10px !important;
border:
1px solid
rgba(70, 213, 255, 0.24) !important;
border-radius: 8px !important;
color:
rgba(218, 234, 252, 0.82) !important;
font-size: 0.72rem;
font-weight: 700;
background:
rgba(6, 26, 52, 0.42) !important;
cursor: pointer;
}

.chat-page-reimagined .chat-message-reply-button:hover {
border-color:
rgba(47, 219, 255, 0.6) !important;
color: var(--chat-final-cyan) !important;
background:
rgba(13, 79, 114, 0.44) !important;
}

/* =====================================================================
EMPTY STATE
===================================================================== */

.chat-page-reimagined .chat-empty-state {
min-height: 100%;
padding: 36px 26px;
}

.chat-page-reimagined .chat-empty-state h2 {
color: var(--chat-final-white);
}

.chat-page-reimagined .chat-empty-state p {
color: var(--chat-final-muted);
}

.chat-page-reimagined .chat-empty-state .button,
.chat-page-reimagined #chatEmptyStateNewButton {
display: none !important;
}

/* =====================================================================
MESSAGE COMPOSER
===================================================================== */

.chat-page-reimagined .chat-composer {
padding: 14px 18px 12px !important;
border-top:
1px solid
rgba(45, 201, 255, 0.16);
background:
linear-gradient(
180deg,
rgba(5, 18, 41, 0.98),
rgba(2, 10, 25, 0.99)
);
}

.chat-page-reimagined .chat-composer-row {
display: grid;
grid-template-columns:
46px
minmax(0, 1fr)
auto;
align-items: end;
gap: 11px;
}

.chat-page-reimagined .chat-message-field {
min-width: 0;
}

.chat-page-reimagined #chatMessage {
display: block;
width: 100%;
min-height: 50px;
max-height: 180px;
margin: 0 !important;
padding: 13px 15px !important;
resize: none;
border:
1px solid
rgba(47, 188, 244, 0.3) !important;
border-radius: 16px !important;
outline: none;
color: var(--chat-final-white) !important;
line-height: 1.5;
background:
rgba(2, 11, 28, 0.9) !important;
}

.chat-page-reimagined #chatMessage::placeholder {
color:
rgba(160, 177, 201, 0.62) !important;
}

.chat-page-reimagined #chatMessage:focus {
border-color:
var(--chat-final-cyan) !important;
box-shadow:
0 0 0 4px rgba(32, 217, 255, 0.1),
0 0 24px rgba(32, 217, 255, 0.08) !important;
}

.chat-page-reimagined #chatMessage:disabled {
opacity: 0.55;
cursor: not-allowed;
}

.chat-page-reimagined .chat-send-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 108px;
min-height: 50px;
padding: 0 19px !important;
border:
1px solid
rgba(104, 232, 255, 0.54) !important;
border-radius: 15px !important;
color: #00101e !important;
font-weight: 850 !important;
background:
linear-gradient(
135deg,
#11cfff,
#63dbf6
) !important;
box-shadow:
0 10px 26px rgba(20, 201, 255, 0.22) !important;
}

.chat-page-reimagined .chat-send-button:disabled {
opacity: 0.42 !important;
filter: grayscale(0.18);
box-shadow: none !important;
cursor: not-allowed;
}

.chat-page-reimagined .chat-composer-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 7px 2px 0 57px !important;
color:
rgba(161, 179, 204, 0.7) !important;
font-size: 0.71rem;
}

.chat-page-reimagined .chat-safety-inline {
margin: 11px 0 0 0 !important;
padding-top: 10px;
border-top:
1px solid
rgba(45, 201, 255, 0.09);
color:
rgba(164, 183, 208, 0.66) !important;
font-size: 0.71rem;
}

/* =====================================================================
REPLY AND ATTACHMENT PREVIEWS
===================================================================== */

.chat-page-reimagined .chat-reply-preview,
.chat-page-reimagined .chat-attachment-preview {
margin-bottom: 11px;
padding: 11px 13px !important;
border:
1px solid
rgba(47, 202, 255, 0.24) !important;
border-radius: 13px !important;
color: var(--chat-final-text);
background:
rgba(10, 43, 78, 0.48) !important;
}

.chat-page-reimagined .chat-reply-preview strong {
color: var(--chat-final-cyan);
}

.chat-page-reimagined .chat-reply-preview p,
.chat-page-reimagined .chat-attachment-details span {
color: var(--chat-final-muted);
}

/* =====================================================================
DIALOG — FULL RESET OF BROWSER DEFAULTS
===================================================================== */

.chat-page-reimagined
.chat-new-conversation-dialog {
position: fixed;
inset: 50% auto auto 50%;
width: min(92vw, 600px) !important;
max-width: 600px !important;
max-height: min(84vh, 760px);
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
transform: translate(-50%, -50%);
border:
1px solid
rgba(50, 218, 255, 0.5) !important;
border-radius: 26px !important;
outline: 0;
color: var(--chat-final-text) !important;
background:
radial-gradient(
circle at 100% 0,
rgba(39, 213, 255, 0.13),
transparent 38%
),
linear-gradient(
145deg,
rgba(5, 19, 43, 0.998),
rgba(2, 9, 24, 0.998)
) !important;
box-shadow:
0 38px 120px rgba(0, 0, 0, 0.78),
0 0 52px rgba(22, 208, 255, 0.14),
inset 0 0 0 1px rgba(255, 255, 255, 0.018) !important;
}

.chat-page-reimagined
.chat-new-conversation-dialog::backdrop {
background:
rgba(0, 5, 16, 0.84) !important;
backdrop-filter: blur(12px);
}

.chat-page-reimagined
.chat-new-conversation-panel {
display: grid !important;
gap: 18px;
width: 100%;
max-height: min(84vh, 760px);
margin: 0;
padding:
clamp(20px, 4vw, 30px) !important;
overflow-y: auto;
color: var(--chat-final-text);
background: transparent !important;
}

.chat-page-reimagined
.chat-new-conversation-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}

.chat-page-reimagined
.chat-new-conversation-header
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--chat-final-cyan);
font-size: 0.72rem;
font-weight: 850;
letter-spacing: 0.18em;
text-transform: uppercase;
}

.chat-page-reimagined
.chat-new-conversation-header
.eyebrow::before {
content: "";
width: 22px;
height: 2px;
border-radius: 999px;
background:
linear-gradient(
90deg,
var(--chat-final-cyan),
var(--chat-final-purple)
);
}

.chat-page-reimagined
.chat-new-conversation-header h2 {
margin: 7px 0 0;
color: var(--chat-final-white);
font-size:
clamp(1.8rem, 4vw, 2.5rem);
line-height: 1;
letter-spacing: -0.04em;
}

/* =====================================================================
DIALOG SEARCH INPUT
===================================================================== */

.chat-page-reimagined
#chatMemberSearchInput {
display: block;
width: 100% !important;
height: 52px !important;
min-height: 52px !important;
margin: 0 !important;
padding: 0 17px !important;
border:
1px solid
rgba(47, 193, 246, 0.32) !important;
border-radius: 15px !important;
outline: 0;
color: var(--chat-final-white) !important;
font-size: 0.94rem;
background:
rgba(2, 11, 28, 0.92) !important;
box-shadow:
inset 0 0 0 1px
rgba(255, 255, 255, 0.012) !important;
}

.chat-page-reimagined
#chatMemberSearchInput::placeholder {
color:
rgba(158, 176, 201, 0.62) !important;
}

.chat-page-reimagined
#chatMemberSearchInput:focus {
border-color:
var(--chat-final-cyan) !important;
box-shadow:
0 0 0 4px rgba(32, 217, 255, 0.1),
0 0 25px rgba(32, 217, 255, 0.08) !important;
}

/* =====================================================================
MEMBER SEARCH RESULTS — REMOVE GRAY TILE
===================================================================== */

.chat-page-reimagined
.chat-member-search-results {
display: grid !important;
gap: 9px;
width: 100%;
max-height: 420px;
overflow-y: auto;
}

.chat-page-reimagined
.chat-member-result {
display: grid !important;
grid-template-columns:
54px
minmax(0, 1fr);
align-items: center;
gap: 13px;
width: 100% !important;
min-height: 76px;
margin: 0 !important;
padding: 10px 12px !important;
border:
1px solid
rgba(49, 190, 244, 0.2) !important;
border-radius: 16px !important;
color: var(--chat-final-text) !important;
text-align: left;
background:
linear-gradient(
145deg,
rgba(9, 34, 68, 0.78),
rgba(5, 21, 49, 0.88)
) !important;
box-shadow:
inset 0 0 0 1px
rgba(255, 255, 255, 0.01) !important;
cursor: pointer;
}

.chat-page-reimagined
.chat-member-result:hover {
transform: translateY(-2px);
border-color:
rgba(49, 220, 255, 0.58) !important;
background:
linear-gradient(
135deg,
rgba(17, 112, 159, 0.46),
rgba(69, 57, 148, 0.28)
) !important;
box-shadow:
0 14px 32px rgba(0, 0, 0, 0.26),
0 0 22px rgba(33, 210, 255, 0.08) !important;
}

.chat-page-reimagined
.chat-member-result img {
width: 54px !important;
height: 54px !important;
margin: 0 !important;
border:
2px solid
rgba(47, 210, 255, 0.34) !important;
border-radius: 14px !important;
object-fit: cover;
background:
rgba(3, 14, 32, 0.9);
}

.chat-page-reimagined
.chat-member-result > span {
display: block;
min-width: 0;
}

.chat-page-reimagined
.chat-member-result strong {
display: block;
overflow: hidden;
color: var(--chat-final-white) !important;
font-size: 0.96rem;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}

.chat-page-reimagined
.chat-member-result small {
display: block;
margin-top: 4px;
overflow: hidden;
color: var(--chat-final-muted) !important;
font-size: 0.8rem;
text-overflow: ellipsis;
white-space: nowrap;
}

/* =====================================================================
DIALOG SAFETY NOTE
===================================================================== */

.chat-page-reimagined
.chat-dialog-safety-note {
margin: 0 !important;
padding-top: 15px;
border-top:
1px solid
rgba(45, 200, 255, 0.12);
color:
rgba(169, 187, 212, 0.72) !important;
font-size: 0.76rem;
line-height: 1.55;
}

/* =====================================================================
MOBILE
===================================================================== */

@media (max-width: 760px) {
.chat-page-reimagined
.chat-shell-header {
min-height: 88px;
padding: 16px;
}

.chat-page-reimagined
.chat-shell-heading h1 {
font-size: 2rem;
}

.chat-page-reimagined
.chat-primary-action {
min-width: auto !important;
padding-inline: 15px !important;
}

.chat-page-reimagined
.chat-workspace-header {
grid-template-columns:
auto
minmax(0, 1fr)
auto;
padding: 12px 13px !important;
}

.chat-page-reimagined
.chat-message-list {
padding: 16px 12px !important;
}

.chat-page-reimagined
.chat-message-bubble {
max-width: 90%;
}

.chat-page-reimagined
.chat-composer {
padding:
11px
11px
calc(
11px +
env(safe-area-inset-bottom)
) !important;
}

.chat-page-reimagined
.chat-composer-row {
grid-template-columns:
44px
minmax(0, 1fr);
}

.chat-page-reimagined
.chat-send-button {
grid-column: 1 / -1;
width: 100%;
}

.chat-page-reimagined
.chat-composer-footer {
padding-left: 0 !important;
}

.chat-page-reimagined
.chat-new-conversation-dialog {
width:
calc(100vw - 20px) !important;
max-height:
calc(100dvh - 24px);
border-radius: 21px !important;
}

.chat-page-reimagined
.chat-new-conversation-panel {
padding: 20px 15px !important;
}
}

/* =====================================================================
FOCUS + REDUCED MOTION
===================================================================== */

.chat-page-reimagined
button:focus-visible,
.chat-page-reimagined
a:focus-visible,
.chat-page-reimagined
input:focus-visible,
.chat-page-reimagined
textarea:focus-visible {
outline:
3px solid
rgba(48, 220, 255, 0.94) !important;
outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
.chat-page-reimagined *,
.chat-page-reimagined *::before,
.chat-page-reimagined *::after {
animation-duration:
0.001ms !important;
animation-iteration-count:
1 !important;
scroll-behavior:
auto !important;
transition-duration:
0.001ms !important;
}
}
/* =====================================================================
   SMOOTH JAZZ CONNECT
   CHAT REIMAGINED LAYOUT
   Version: 3.3.150
   Paste at bottom of styles.css
===================================================================== */

.chat-page-reimagined {
  --chat-rail-width: 320px;
  --chat-shell-height: min(78vh, 820px);
  width: 100%;
}

.chat-page-reimagined .chat-shell {
  overflow: hidden;
  border: 1px solid rgba(45, 201, 255, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 0, rgba(32, 213, 255, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(4, 15, 36, 0.98), rgba(3, 11, 27, 0.99));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.chat-page-reimagined .chat-shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(45, 201, 255, 0.16);
  background: rgba(5, 18, 42, 0.9);
}

.chat-page-reimagined .chat-shell-heading h1 {
  margin: 3px 0 4px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.chat-page-reimagined .chat-shell-heading p {
  margin: 0;
  color: var(--text-muted, #aebbd2);
}

.chat-page-reimagined .chat-primary-action {
  min-width: 160px;
}

.chat-page-reimagined .chat-app-frame {
  display: grid;
  grid-template-columns: var(--chat-rail-width) minmax(0, 1fr);
  height: var(--chat-shell-height);
  min-height: 620px;
}

.chat-page-reimagined .chat-sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(45, 201, 255, 0.16);
  background: rgba(3, 13, 31, 0.94);
}

.chat-page-reimagined .chat-sidebar-header {
  padding: 20px 20px 14px;
}

.chat-page-reimagined .chat-search {
  margin: 0 16px 14px;
}

.chat-page-reimagined .chat-conversation-list {
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 16px;
}

.chat-page-reimagined .chat-workspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(30, 114, 180, 0.08), transparent 38%),
    rgba(3, 12, 29, 0.96);
}

.chat-page-reimagined .chat-workspace-header {
  min-height: 76px;
  padding: 14px 18px;
}

.chat-page-reimagined .chat-active-copy .eyebrow {
  display: none;
}

.chat-page-reimagined .chat-message-list {
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
}

.chat-page-reimagined .chat-composer {
  position: sticky;
  bottom: 0;
  z-index: 5;
}

.chat-page-reimagined .chat-safety-inline,
.chat-page-reimagined .chat-dialog-safety-note {
  margin: 10px 0 0;
  color: rgba(175, 191, 215, 0.68);
  font-size: 0.72rem;
  line-height: 1.45;
}

.chat-page-reimagined .chat-dialog-safety-note {
  padding-top: 14px;
  border-top: 1px solid rgba(45, 201, 255, 0.12);
}

.chat-page-reimagined .chat-mobile-back-button {
  display: none;
}

.chat-page-reimagined .chat-empty-state .button {
  display: none;
}

@media (max-width: 1100px) {
  .chat-page-reimagined {
    --chat-rail-width: 280px;
  }
}

@media (max-width: 760px) {
  .chat-page-reimagined .chat-shell-header {
    padding: 18px;
  }

  .chat-page-reimagined .chat-shell-heading p {
    display: none;
  }

  .chat-page-reimagined .chat-primary-action {
    min-width: auto;
  }

  .chat-page-reimagined .chat-app-frame {
    display: block;
    height: calc(100dvh - 210px);
    min-height: 560px;
  }

  .chat-page-reimagined .chat-sidebar,
  .chat-page-reimagined .chat-workspace {
    width: 100%;
    height: 100%;
  }

  .chat-page-reimagined .chat-workspace {
    display: none;
  }

  .chat-page-reimagined.is-conversation-open .chat-sidebar {
    display: none;
  }

  .chat-page-reimagined.is-conversation-open .chat-workspace {
    display: grid;
  }

  .chat-page-reimagined.is-conversation-open .chat-mobile-back-button {
    display: grid;
    place-items: center;
  }

  .chat-page-reimagined .chat-composer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}


/* =====================================================================
   CHAT CONVERSATION MANAGEMENT ACTIONS
   Version: 3.3.150
===================================================================== */

.chat-page-reimagined .chat-conversation-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 54px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(45, 201, 255, 0.14);
  background:
    linear-gradient(
      180deg,
      rgba(5, 18, 42, 0.96),
      rgba(3, 13, 31, 0.98)
    );
}

.chat-page-reimagined .chat-conversation-actions[hidden] {
  display: none !important;
}

.chat-page-reimagined .chat-conversation-action-button {
  min-height: 36px;
  padding: 7px 13px !important;
  border: 1px solid rgba(47, 205, 255, 0.24) !important;
  border-radius: 10px !important;
  color: var(--chat-final-text, #dce8f8) !important;
  font-size: 0.78rem;
  font-weight: 750;
  background:
    rgba(10, 39, 74, 0.64) !important;
  cursor: pointer;
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    color 170ms ease,
    background 170ms ease;
}

.chat-page-reimagined .chat-conversation-action-button:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 220, 255, 0.62) !important;
  color: #ffffff !important;
  background:
    rgba(15, 88, 127, 0.52) !important;
}

.chat-page-reimagined .chat-conversation-action-button.is-danger {
  margin-left: auto;
  border-color: rgba(255, 97, 132, 0.34) !important;
  color: #ffc3d0 !important;
  background:
    rgba(91, 20, 43, 0.34) !important;
}

.chat-page-reimagined .chat-conversation-action-button.is-danger:hover {
  border-color: rgba(255, 97, 132, 0.7) !important;
  background:
    rgba(129, 27, 57, 0.46) !important;
}

.chat-page-reimagined .chat-conversation-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 16px 14px;
  padding: 4px;
  border: 1px solid rgba(45, 198, 255, 0.16);
  border-radius: 12px;
  background: rgba(2, 11, 28, 0.72);
}

.chat-page-reimagined .chat-conversation-filter {
  min-height: 34px;
  padding: 6px 10px !important;
  border-radius: 9px !important;
  color: rgba(174, 193, 219, 0.76) !important;
  font-size: 0.76rem;
  font-weight: 750;
  background: transparent !important;
  cursor: pointer;
}

.chat-page-reimagined .chat-conversation-filter.is-active {
  color: #00101e !important;
  background:
    linear-gradient(
      135deg,
      #13cffd,
      #61ddf7
    ) !important;
  box-shadow:
    0 6px 18px rgba(19, 207, 253, 0.18);
}

.chat-page-reimagined .chat-conversation-state-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 3px 7px;
  border: 1px solid rgba(125, 104, 255, 0.35);
  border-radius: 999px;
  color: #cfc7ff;
  font-size: 0.66rem;
  font-weight: 750;
  background: rgba(82, 59, 166, 0.22);
}

@media (max-width: 760px) {
  .chat-page-reimagined .chat-conversation-actions {
    padding: 9px 12px;
  }

  .chat-page-reimagined .chat-conversation-action-button {
    flex: 1 1 auto;
  }

  .chat-page-reimagined .chat-conversation-action-button.is-danger {
    flex-basis: 100%;
    margin-left: 0;
  }
}
/* =====================================================================
CHAT SMALL ACTION BUTTONS
Inbox / Archived / Archive / Close / Delete
===================================================================== */

.chat-page-reimagined .chat-conversation-filters {
display: flex;
align-items: center;
gap: 7px;
margin: 0 16px 14px;
padding: 4px;
border: 1px solid rgba(42, 198, 255, 0.18);
border-radius: 11px;
background: rgba(2, 11, 28, 0.7);
}

.chat-page-reimagined .chat-conversation-filter {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
min-width: 0;
min-height: 31px;
padding: 5px 10px !important;
border: 1px solid transparent !important;
border-radius: 8px !important;
color: rgba(176, 194, 218, 0.78) !important;
font-size: 0.7rem !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0.025em;
background: transparent !important;
cursor: pointer;
transition:
color 160ms ease,
border-color 160ms ease,
background 160ms ease,
box-shadow 160ms ease,
transform 160ms ease;
}

.chat-page-reimagined .chat-conversation-filter:hover {
color: #ffffff !important;
border-color: rgba(45, 211, 255, 0.25) !important;
background: rgba(17, 74, 111, 0.34) !important;
}

.chat-page-reimagined .chat-conversation-filter.is-active {
color: #00131f !important;
border-color: rgba(109, 233, 255, 0.5) !important;
background:
linear-gradient(
135deg,
#19d4ff,
#66def7
) !important;
box-shadow:
0 6px 16px rgba(23, 207, 255, 0.18) !important;
}

.chat-page-reimagined .chat-conversation-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
min-height: 46px;
padding: 7px 16px;
border-bottom: 1px solid rgba(43, 196, 255, 0.13);
background: rgba(3, 14, 32, 0.96);
}

.chat-page-reimagined .chat-conversation-action-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 5px 11px !important;
border: 1px solid rgba(47, 204, 255, 0.23) !important;
border-radius: 8px !important;
color: rgba(217, 232, 249, 0.86) !important;
font-size: 0.69rem !important;
font-weight: 800 !important;
line-height: 1 !important;
white-space: nowrap;
background:
linear-gradient(
145deg,
rgba(14, 57, 96, 0.6),
rgba(6, 28, 60, 0.76)
) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.015);
cursor: pointer;
transition:
color 160ms ease,
border-color 160ms ease,
background 160ms ease,
box-shadow 160ms ease,
transform 160ms ease;
}

.chat-page-reimagined .chat-conversation-action-button:hover {
transform: translateY(-1px);
color: #ffffff !important;
border-color: rgba(47, 219, 255, 0.58) !important;
background:
linear-gradient(
145deg,
rgba(18, 103, 146, 0.62),
rgba(15, 49, 102, 0.74)
) !important;
box-shadow:
0 7px 18px rgba(0, 160, 220, 0.13);
}

.chat-page-reimagined .chat-conversation-action-button.is-danger {
margin-left: auto;
border-color: rgba(255, 96, 128, 0.3) !important;
color: #ffc0ce !important;
background:
linear-gradient(
145deg,
rgba(104, 24, 49, 0.42),
rgba(63, 16, 34, 0.56)
) !important;
}

.chat-page-reimagined .chat-conversation-action-button.is-danger:hover {
color: #ffffff !important;
border-color: rgba(255, 100, 133, 0.68) !important;
background:
linear-gradient(
145deg,
rgba(144, 30, 62, 0.56),
rgba(93, 20, 43, 0.7)
) !important;
box-shadow:
0 7px 18px rgba(255, 48, 96, 0.13);
}

@media (max-width: 640px) {
.chat-page-reimagined .chat-conversation-actions {
gap: 6px;
padding: 7px 10px;
}

.chat-page-reimagined .chat-conversation-action-button {
flex: 1 1 auto;
min-height: 32px;
padding-inline: 8px !important;
font-size: 0.66rem !important;
}

.chat-page-reimagined .chat-conversation-action-button.is-danger {
margin-left: 0;
}
}
/* =====================================================================
   SMOOTH JAZZ CONNECT
   CHAT REIMAGINED LAYOUT
   Version: 3.3.150
   Paste at bottom of styles.css
===================================================================== */

.chat-page-reimagined {
  --chat-rail-width: 320px;
  --chat-shell-height: min(78vh, 820px);
  width: 100%;
}

.chat-page-reimagined .chat-shell {
  overflow: hidden;
  border: 1px solid rgba(45, 201, 255, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 0, rgba(32, 213, 255, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(4, 15, 36, 0.98), rgba(3, 11, 27, 0.99));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.chat-page-reimagined .chat-shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(45, 201, 255, 0.16);
  background: rgba(5, 18, 42, 0.9);
}

.chat-page-reimagined .chat-shell-heading h1 {
  margin: 3px 0 4px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.chat-page-reimagined .chat-shell-heading p {
  margin: 0;
  color: var(--text-muted, #aebbd2);
}

.chat-page-reimagined .chat-primary-action {
  min-width: 160px;
}

.chat-page-reimagined .chat-app-frame {
  display: grid;
  grid-template-columns: var(--chat-rail-width) minmax(0, 1fr);
  height: var(--chat-shell-height);
  min-height: 620px;
}

.chat-page-reimagined .chat-sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(45, 201, 255, 0.16);
  background: rgba(3, 13, 31, 0.94);
}

.chat-page-reimagined .chat-sidebar-header {
  padding: 20px 20px 14px;
}

.chat-page-reimagined .chat-search {
  margin: 0 16px 14px;
}

.chat-page-reimagined .chat-conversation-list {
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 16px;
}

.chat-page-reimagined .chat-workspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(30, 114, 180, 0.08), transparent 38%),
    rgba(3, 12, 29, 0.96);
}

.chat-page-reimagined .chat-workspace-header {
  min-height: 76px;
  padding: 14px 18px;
}

.chat-page-reimagined .chat-active-copy .eyebrow {
  display: none;
}

.chat-page-reimagined .chat-message-list {
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
}

.chat-page-reimagined .chat-composer {
  position: sticky;
  bottom: 0;
  z-index: 5;
}

.chat-page-reimagined .chat-safety-inline,
.chat-page-reimagined .chat-dialog-safety-note {
  margin: 10px 0 0;
  color: rgba(175, 191, 215, 0.68);
  font-size: 0.72rem;
  line-height: 1.45;
}

.chat-page-reimagined .chat-dialog-safety-note {
  padding-top: 14px;
  border-top: 1px solid rgba(45, 201, 255, 0.12);
}

.chat-page-reimagined .chat-mobile-back-button {
  display: none;
}

.chat-page-reimagined .chat-empty-state .button {
  display: none;
}

@media (max-width: 1100px) {
  .chat-page-reimagined {
    --chat-rail-width: 280px;
  }
}

@media (max-width: 760px) {
  .chat-page-reimagined .chat-shell-header {
    padding: 18px;
  }

  .chat-page-reimagined .chat-shell-heading p {
    display: none;
  }

  .chat-page-reimagined .chat-primary-action {
    min-width: auto;
  }

  .chat-page-reimagined .chat-app-frame {
    display: block;
    height: calc(100dvh - 210px);
    min-height: 560px;
  }

  .chat-page-reimagined .chat-sidebar,
  .chat-page-reimagined .chat-workspace {
    width: 100%;
    height: 100%;
  }

  .chat-page-reimagined .chat-workspace {
    display: none;
  }

  .chat-page-reimagined.is-conversation-open .chat-sidebar {
    display: none;
  }

  .chat-page-reimagined.is-conversation-open .chat-workspace {
    display: grid;
  }

  .chat-page-reimagined.is-conversation-open .chat-mobile-back-button {
    display: grid;
    place-items: center;
  }

  .chat-page-reimagined .chat-composer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}


/* =====================================================================
   CHAT CONVERSATION MANAGEMENT ACTIONS
   Version: 3.3.150
===================================================================== */

.chat-page-reimagined .chat-conversation-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 54px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(45, 201, 255, 0.14);
  background:
    linear-gradient(
      180deg,
      rgba(5, 18, 42, 0.96),
      rgba(3, 13, 31, 0.98)
    );
}

.chat-page-reimagined .chat-conversation-actions[hidden] {
  display: none !important;
}

.chat-page-reimagined .chat-conversation-action-button {
  min-height: 36px;
  padding: 7px 13px !important;
  border: 1px solid rgba(47, 205, 255, 0.24) !important;
  border-radius: 10px !important;
  color: var(--chat-final-text, #dce8f8) !important;
  font-size: 0.78rem;
  font-weight: 750;
  background:
    rgba(10, 39, 74, 0.64) !important;
  cursor: pointer;
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    color 170ms ease,
    background 170ms ease;
}

.chat-page-reimagined .chat-conversation-action-button:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 220, 255, 0.62) !important;
  color: #ffffff !important;
  background:
    rgba(15, 88, 127, 0.52) !important;
}

.chat-page-reimagined .chat-conversation-action-button.is-danger {
  margin-left: auto;
  border-color: rgba(255, 97, 132, 0.34) !important;
  color: #ffc3d0 !important;
  background:
    rgba(91, 20, 43, 0.34) !important;
}

.chat-page-reimagined .chat-conversation-action-button.is-danger:hover {
  border-color: rgba(255, 97, 132, 0.7) !important;
  background:
    rgba(129, 27, 57, 0.46) !important;
}

.chat-page-reimagined .chat-conversation-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 16px 14px;
  padding: 4px;
  border: 1px solid rgba(45, 198, 255, 0.16);
  border-radius: 12px;
  background: rgba(2, 11, 28, 0.72);
}

.chat-page-reimagined .chat-conversation-filter {
  min-height: 34px;
  padding: 6px 10px !important;
  border-radius: 9px !important;
  color: rgba(174, 193, 219, 0.76) !important;
  font-size: 0.76rem;
  font-weight: 750;
  background: transparent !important;
  cursor: pointer;
}

.chat-page-reimagined .chat-conversation-filter.is-active {
  color: #00101e !important;
  background:
    linear-gradient(
      135deg,
      #13cffd,
      #61ddf7
    ) !important;
  box-shadow:
    0 6px 18px rgba(19, 207, 253, 0.18);
}

.chat-page-reimagined .chat-conversation-state-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 3px 7px;
  border: 1px solid rgba(125, 104, 255, 0.35);
  border-radius: 999px;
  color: #cfc7ff;
  font-size: 0.66rem;
  font-weight: 750;
  background: rgba(82, 59, 166, 0.22);
}

@media (max-width: 760px) {
  .chat-page-reimagined .chat-conversation-actions {
    padding: 9px 12px;
  }

  .chat-page-reimagined .chat-conversation-action-button {
    flex: 1 1 auto;
  }

  .chat-page-reimagined .chat-conversation-action-button.is-danger {
    flex-basis: 100%;
    margin-left: 0;
  }
}


/* =====================================================================
   CHAT CUSTOM DELETE CONFIRMATION DIALOG
   Version: 3.3.150
===================================================================== */

.chat-page-reimagined .chat-confirm-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  width: min(92vw, 470px);
  max-width: 470px;
  margin: 0;
  padding: 0;
  overflow: visible;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 99, 132, 0.42);
  border-radius: 24px;
  outline: none;
  color: #f7fbff;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255, 91, 129, 0.12),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(7, 18, 39, 0.995),
      rgba(3, 10, 25, 0.995)
    );
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.76),
    0 0 46px rgba(255, 61, 110, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.chat-page-reimagined .chat-confirm-dialog::backdrop {
  background: rgba(0, 5, 16, 0.82);
  backdrop-filter: blur(10px);
}

.chat-page-reimagined .chat-confirm-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: 26px;
}

.chat-page-reimagined .chat-confirm-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 100, 133, 0.4);
  border-radius: 17px;
  color: #ffc1cf;
  font-size: 1.35rem;
  font-weight: 900;
  background: rgba(120, 24, 51, 0.28);
  box-shadow: 0 0 24px rgba(255, 75, 117, 0.08);
}

.chat-page-reimagined .chat-confirm-copy {
  min-width: 0;
}

.chat-page-reimagined .chat-confirm-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: #ff8aa5;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.chat-page-reimagined .chat-confirm-copy .eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6588, #ff9fb4);
}

.chat-page-reimagined .chat-confirm-copy h2 {
  margin: 0 0 9px;
  color: #ffffff;
  font-size: clamp(1.55rem, 4vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.chat-page-reimagined .chat-confirm-copy p {
  margin: 0;
  color: rgba(191, 207, 229, 0.82);
  font-size: 0.92rem;
  line-height: 1.65;
}

.chat-page-reimagined .chat-confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.chat-page-reimagined .chat-confirm-button {
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease;
}

.chat-page-reimagined .chat-confirm-cancel {
  border: 1px solid rgba(47, 204, 255, 0.24);
  color: rgba(220, 234, 251, 0.9);
  background:
    linear-gradient(
      145deg,
      rgba(13, 54, 91, 0.68),
      rgba(6, 27, 58, 0.8)
    );
}

.chat-page-reimagined .chat-confirm-cancel:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 219, 255, 0.56);
  background:
    linear-gradient(
      145deg,
      rgba(16, 91, 130, 0.6),
      rgba(13, 47, 96, 0.74)
    );
}

.chat-page-reimagined .chat-confirm-delete {
  border: 1px solid rgba(255, 104, 135, 0.6);
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #d93663,
      #ff5f7f
    );
  box-shadow:
    0 10px 24px rgba(255, 54, 101, 0.2);
}

.chat-page-reimagined .chat-confirm-delete:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(
      135deg,
      #e43c69,
      #ff718d
    );
  box-shadow:
    0 14px 30px rgba(255, 54, 101, 0.28);
}

@media (max-width: 560px) {
  .chat-page-reimagined .chat-confirm-panel {
    grid-template-columns: 1fr;
    padding: 22px 18px;
  }

  .chat-page-reimagined .chat-confirm-icon {
    width: 46px;
    height: 46px;
  }

  .chat-page-reimagined .chat-confirm-actions {
    grid-column: 1;
  }

  .chat-page-reimagined .chat-confirm-button {
    flex: 1 1 0;
  }
}
/* =====================================================================
   SMOOTH JAZZ CONNECT
   CHAT REIMAGINED LAYOUT
   Version: 3.3.150
   Paste at bottom of styles.css
===================================================================== */

.chat-page-reimagined {
  --chat-rail-width: 320px;
  --chat-shell-height: min(78vh, 820px);
  width: 100%;
}

.chat-page-reimagined .chat-shell {
  overflow: hidden;
  border: 1px solid rgba(45, 201, 255, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 0, rgba(32, 213, 255, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(4, 15, 36, 0.98), rgba(3, 11, 27, 0.99));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.chat-page-reimagined .chat-shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(45, 201, 255, 0.16);
  background: rgba(5, 18, 42, 0.9);
}

.chat-page-reimagined .chat-shell-heading h1 {
  margin: 3px 0 4px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.chat-page-reimagined .chat-shell-heading p {
  margin: 0;
  color: var(--text-muted, #aebbd2);
}

.chat-page-reimagined .chat-primary-action {
  min-width: 160px;
}

.chat-page-reimagined .chat-app-frame {
  display: grid;
  grid-template-columns: var(--chat-rail-width) minmax(0, 1fr);
  height: var(--chat-shell-height);
  min-height: 620px;
}

.chat-page-reimagined .chat-sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(45, 201, 255, 0.16);
  background: rgba(3, 13, 31, 0.94);
}

.chat-page-reimagined .chat-sidebar-header {
  padding: 20px 20px 14px;
}

.chat-page-reimagined .chat-search {
  margin: 0 16px 14px;
}

.chat-page-reimagined .chat-conversation-list {
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 16px;
}

.chat-page-reimagined .chat-workspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(30, 114, 180, 0.08), transparent 38%),
    rgba(3, 12, 29, 0.96);
}

.chat-page-reimagined .chat-workspace-header {
  min-height: 76px;
  padding: 14px 18px;
}

.chat-page-reimagined .chat-active-copy .eyebrow {
  display: none;
}

.chat-page-reimagined .chat-message-list {
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
}

.chat-page-reimagined .chat-composer {
  position: sticky;
  bottom: 0;
  z-index: 5;
}

.chat-page-reimagined .chat-safety-inline,
.chat-page-reimagined .chat-dialog-safety-note {
  margin: 10px 0 0;
  color: rgba(175, 191, 215, 0.68);
  font-size: 0.72rem;
  line-height: 1.45;
}

.chat-page-reimagined .chat-dialog-safety-note {
  padding-top: 14px;
  border-top: 1px solid rgba(45, 201, 255, 0.12);
}

.chat-page-reimagined .chat-mobile-back-button {
  display: none;
}

.chat-page-reimagined .chat-empty-state .button {
  display: none;
}

@media (max-width: 1100px) {
  .chat-page-reimagined {
    --chat-rail-width: 280px;
  }
}

@media (max-width: 760px) {
  .chat-page-reimagined .chat-shell-header {
    padding: 18px;
  }

  .chat-page-reimagined .chat-shell-heading p {
    display: none;
  }

  .chat-page-reimagined .chat-primary-action {
    min-width: auto;
  }

  .chat-page-reimagined .chat-app-frame {
    display: block;
    height: calc(100dvh - 210px);
    min-height: 560px;
  }

  .chat-page-reimagined .chat-sidebar,
  .chat-page-reimagined .chat-workspace {
    width: 100%;
    height: 100%;
  }

  .chat-page-reimagined .chat-workspace {
    display: none;
  }

  .chat-page-reimagined.is-conversation-open .chat-sidebar {
    display: none;
  }

  .chat-page-reimagined.is-conversation-open .chat-workspace {
    display: grid;
  }

  .chat-page-reimagined.is-conversation-open .chat-mobile-back-button {
    display: grid;
    place-items: center;
  }

  .chat-page-reimagined .chat-composer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}


/* =====================================================================
   CHAT CONVERSATION MANAGEMENT ACTIONS
   Version: 3.3.150
===================================================================== */

.chat-page-reimagined .chat-conversation-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 54px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(45, 201, 255, 0.14);
  background:
    linear-gradient(
      180deg,
      rgba(5, 18, 42, 0.96),
      rgba(3, 13, 31, 0.98)
    );
}

.chat-page-reimagined .chat-conversation-actions[hidden] {
  display: none !important;
}

.chat-page-reimagined .chat-conversation-action-button {
  min-height: 36px;
  padding: 7px 13px !important;
  border: 1px solid rgba(47, 205, 255, 0.24) !important;
  border-radius: 10px !important;
  color: var(--chat-final-text, #dce8f8) !important;
  font-size: 0.78rem;
  font-weight: 750;
  background:
    rgba(10, 39, 74, 0.64) !important;
  cursor: pointer;
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    color 170ms ease,
    background 170ms ease;
}

.chat-page-reimagined .chat-conversation-action-button:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 220, 255, 0.62) !important;
  color: #ffffff !important;
  background:
    rgba(15, 88, 127, 0.52) !important;
}

.chat-page-reimagined .chat-conversation-action-button.is-danger {
  margin-left: auto;
  border-color: rgba(255, 97, 132, 0.34) !important;
  color: #ffc3d0 !important;
  background:
    rgba(91, 20, 43, 0.34) !important;
}

.chat-page-reimagined .chat-conversation-action-button.is-danger:hover {
  border-color: rgba(255, 97, 132, 0.7) !important;
  background:
    rgba(129, 27, 57, 0.46) !important;
}

.chat-page-reimagined .chat-conversation-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 16px 14px;
  padding: 4px;
  border: 1px solid rgba(45, 198, 255, 0.16);
  border-radius: 12px;
  background: rgba(2, 11, 28, 0.72);
}

.chat-page-reimagined .chat-conversation-filter {
  min-height: 34px;
  padding: 6px 10px !important;
  border-radius: 9px !important;
  color: rgba(174, 193, 219, 0.76) !important;
  font-size: 0.76rem;
  font-weight: 750;
  background: transparent !important;
  cursor: pointer;
}

.chat-page-reimagined .chat-conversation-filter.is-active {
  color: #00101e !important;
  background:
    linear-gradient(
      135deg,
      #13cffd,
      #61ddf7
    ) !important;
  box-shadow:
    0 6px 18px rgba(19, 207, 253, 0.18);
}

.chat-page-reimagined .chat-conversation-state-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 3px 7px;
  border: 1px solid rgba(125, 104, 255, 0.35);
  border-radius: 999px;
  color: #cfc7ff;
  font-size: 0.66rem;
  font-weight: 750;
  background: rgba(82, 59, 166, 0.22);
}

@media (max-width: 760px) {
  .chat-page-reimagined .chat-conversation-actions {
    padding: 9px 12px;
  }

  .chat-page-reimagined .chat-conversation-action-button {
    flex: 1 1 auto;
  }

  .chat-page-reimagined .chat-conversation-action-button.is-danger {
    flex-basis: 100%;
    margin-left: 0;
  }
}


/* =====================================================================
   CHAT CUSTOM DELETE CONFIRMATION DIALOG
   Version: 3.3.150
===================================================================== */

.chat-page-reimagined .chat-confirm-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  width: min(92vw, 470px);
  max-width: 470px;
  margin: 0;
  padding: 0;
  overflow: visible;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 99, 132, 0.42);
  border-radius: 24px;
  outline: none;
  color: #f7fbff;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255, 91, 129, 0.12),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(7, 18, 39, 0.995),
      rgba(3, 10, 25, 0.995)
    );
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.76),
    0 0 46px rgba(255, 61, 110, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.chat-page-reimagined .chat-confirm-dialog::backdrop {
  background: rgba(0, 5, 16, 0.82);
  backdrop-filter: blur(10px);
}

.chat-page-reimagined .chat-confirm-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: 26px;
}

.chat-page-reimagined .chat-confirm-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 100, 133, 0.4);
  border-radius: 17px;
  color: #ffc1cf;
  font-size: 1.35rem;
  font-weight: 900;
  background: rgba(120, 24, 51, 0.28);
  box-shadow: 0 0 24px rgba(255, 75, 117, 0.08);
}

.chat-page-reimagined .chat-confirm-copy {
  min-width: 0;
}

.chat-page-reimagined .chat-confirm-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: #ff8aa5;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.chat-page-reimagined .chat-confirm-copy .eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6588, #ff9fb4);
}

.chat-page-reimagined .chat-confirm-copy h2 {
  margin: 0 0 9px;
  color: #ffffff;
  font-size: clamp(1.55rem, 4vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.chat-page-reimagined .chat-confirm-copy p {
  margin: 0;
  color: rgba(191, 207, 229, 0.82);
  font-size: 0.92rem;
  line-height: 1.65;
}

.chat-page-reimagined .chat-confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.chat-page-reimagined .chat-confirm-button {
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease;
}

.chat-page-reimagined .chat-confirm-cancel {
  border: 1px solid rgba(47, 204, 255, 0.24);
  color: rgba(220, 234, 251, 0.9);
  background:
    linear-gradient(
      145deg,
      rgba(13, 54, 91, 0.68),
      rgba(6, 27, 58, 0.8)
    );
}

.chat-page-reimagined .chat-confirm-cancel:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 219, 255, 0.56);
  background:
    linear-gradient(
      145deg,
      rgba(16, 91, 130, 0.6),
      rgba(13, 47, 96, 0.74)
    );
}

.chat-page-reimagined .chat-confirm-delete {
  border: 1px solid rgba(255, 104, 135, 0.6);
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #d93663,
      #ff5f7f
    );
  box-shadow:
    0 10px 24px rgba(255, 54, 101, 0.2);
}

.chat-page-reimagined .chat-confirm-delete:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(
      135deg,
      #e43c69,
      #ff718d
    );
  box-shadow:
    0 14px 30px rgba(255, 54, 101, 0.28);
}

@media (max-width: 560px) {
  .chat-page-reimagined .chat-confirm-panel {
    grid-template-columns: 1fr;
    padding: 22px 18px;
  }

  .chat-page-reimagined .chat-confirm-icon {
    width: 46px;
    height: 46px;
  }

  .chat-page-reimagined .chat-confirm-actions {
    grid-column: 1;
  }

  .chat-page-reimagined .chat-confirm-button {
    flex: 1 1 0;
  }
}


/* =====================================================================
   CHAT MEMBER RESULT STARTING STATE
   Version: 3.3.150
===================================================================== */

.chat-page-reimagined .chat-member-result.is-starting,
.chat-page-reimagined .chat-member-result[aria-busy="true"] {
  position: relative;
  pointer-events: none;
  opacity: 0.74;
  border-color: rgba(45, 219, 255, 0.62) !important;
  background:
    linear-gradient(
      135deg,
      rgba(17, 112, 159, 0.48),
      rgba(69, 57, 148, 0.3)
    ) !important;
}

.chat-page-reimagined .chat-member-result.is-starting::after,
.chat-page-reimagined .chat-member-result[aria-busy="true"]::after {
  content: "";
  position: absolute;
  right: 18px;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #39ddff;
  border-radius: 50%;
  animation: chatMemberStartingSpin 700ms linear infinite;
}

@keyframes chatMemberStartingSpin {
  to {
    transform: rotate(360deg);
  }
}
/* =====================================================================
   SMOOTH JAZZ CONNECT
   CHAT REIMAGINED LAYOUT
   Version: 3.3.150
   Paste at bottom of styles.css
===================================================================== */

.chat-page-reimagined {
  --chat-rail-width: 320px;
  --chat-shell-height: min(78vh, 820px);
  width: 100%;
}

.chat-page-reimagined .chat-shell {
  overflow: hidden;
  border: 1px solid rgba(45, 201, 255, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 0, rgba(32, 213, 255, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(4, 15, 36, 0.98), rgba(3, 11, 27, 0.99));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.chat-page-reimagined .chat-shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(45, 201, 255, 0.16);
  background: rgba(5, 18, 42, 0.9);
}

.chat-page-reimagined .chat-shell-heading h1 {
  margin: 3px 0 4px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.chat-page-reimagined .chat-shell-heading p {
  margin: 0;
  color: var(--text-muted, #aebbd2);
}

.chat-page-reimagined .chat-primary-action {
  min-width: 160px;
}

.chat-page-reimagined .chat-app-frame {
  display: grid;
  grid-template-columns: var(--chat-rail-width) minmax(0, 1fr);
  height: var(--chat-shell-height);
  min-height: 620px;
}

.chat-page-reimagined .chat-sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(45, 201, 255, 0.16);
  background: rgba(3, 13, 31, 0.94);
}

.chat-page-reimagined .chat-sidebar-header {
  padding: 20px 20px 14px;
}

.chat-page-reimagined .chat-search {
  margin: 0 16px 14px;
}

.chat-page-reimagined .chat-conversation-list {
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 16px;
}

.chat-page-reimagined .chat-workspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(30, 114, 180, 0.08), transparent 38%),
    rgba(3, 12, 29, 0.96);
}

.chat-page-reimagined .chat-workspace-header {
  min-height: 76px;
  padding: 14px 18px;
}

.chat-page-reimagined .chat-active-copy .eyebrow {
  display: none;
}

.chat-page-reimagined .chat-message-list {
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
}

.chat-page-reimagined .chat-composer {
  position: sticky;
  bottom: 0;
  z-index: 5;
}

.chat-page-reimagined .chat-safety-inline,
.chat-page-reimagined .chat-dialog-safety-note {
  margin: 10px 0 0;
  color: rgba(175, 191, 215, 0.68);
  font-size: 0.72rem;
  line-height: 1.45;
}

.chat-page-reimagined .chat-dialog-safety-note {
  padding-top: 14px;
  border-top: 1px solid rgba(45, 201, 255, 0.12);
}

.chat-page-reimagined .chat-mobile-back-button {
  display: none;
}

.chat-page-reimagined .chat-empty-state .button {
  display: none;
}

@media (max-width: 1100px) {
  .chat-page-reimagined {
    --chat-rail-width: 280px;
  }
}

@media (max-width: 760px) {
  .chat-page-reimagined .chat-shell-header {
    padding: 18px;
  }

  .chat-page-reimagined .chat-shell-heading p {
    display: none;
  }

  .chat-page-reimagined .chat-primary-action {
    min-width: auto;
  }

  .chat-page-reimagined .chat-app-frame {
    display: block;
    height: calc(100dvh - 210px);
    min-height: 560px;
  }

  .chat-page-reimagined .chat-sidebar,
  .chat-page-reimagined .chat-workspace {
    width: 100%;
    height: 100%;
  }

  .chat-page-reimagined .chat-workspace {
    display: none;
  }

  .chat-page-reimagined.is-conversation-open .chat-sidebar {
    display: none;
  }

  .chat-page-reimagined.is-conversation-open .chat-workspace {
    display: grid;
  }

  .chat-page-reimagined.is-conversation-open .chat-mobile-back-button {
    display: grid;
    place-items: center;
  }

  .chat-page-reimagined .chat-composer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}


/* =====================================================================
   CHAT CONVERSATION MANAGEMENT ACTIONS
   Version: 3.3.150
===================================================================== */

.chat-page-reimagined .chat-conversation-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 54px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(45, 201, 255, 0.14);
  background:
    linear-gradient(
      180deg,
      rgba(5, 18, 42, 0.96),
      rgba(3, 13, 31, 0.98)
    );
}

.chat-page-reimagined .chat-conversation-actions[hidden] {
  display: none !important;
}

.chat-page-reimagined .chat-conversation-action-button {
  min-height: 36px;
  padding: 7px 13px !important;
  border: 1px solid rgba(47, 205, 255, 0.24) !important;
  border-radius: 10px !important;
  color: var(--chat-final-text, #dce8f8) !important;
  font-size: 0.78rem;
  font-weight: 750;
  background:
    rgba(10, 39, 74, 0.64) !important;
  cursor: pointer;
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    color 170ms ease,
    background 170ms ease;
}

.chat-page-reimagined .chat-conversation-action-button:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 220, 255, 0.62) !important;
  color: #ffffff !important;
  background:
    rgba(15, 88, 127, 0.52) !important;
}

.chat-page-reimagined .chat-conversation-action-button.is-danger {
  margin-left: auto;
  border-color: rgba(255, 97, 132, 0.34) !important;
  color: #ffc3d0 !important;
  background:
    rgba(91, 20, 43, 0.34) !important;
}

.chat-page-reimagined .chat-conversation-action-button.is-danger:hover {
  border-color: rgba(255, 97, 132, 0.7) !important;
  background:
    rgba(129, 27, 57, 0.46) !important;
}

.chat-page-reimagined .chat-conversation-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 16px 14px;
  padding: 4px;
  border: 1px solid rgba(45, 198, 255, 0.16);
  border-radius: 12px;
  background: rgba(2, 11, 28, 0.72);
}

.chat-page-reimagined .chat-conversation-filter {
  min-height: 34px;
  padding: 6px 10px !important;
  border-radius: 9px !important;
  color: rgba(174, 193, 219, 0.76) !important;
  font-size: 0.76rem;
  font-weight: 750;
  background: transparent !important;
  cursor: pointer;
}

.chat-page-reimagined .chat-conversation-filter.is-active {
  color: #00101e !important;
  background:
    linear-gradient(
      135deg,
      #13cffd,
      #61ddf7
    ) !important;
  box-shadow:
    0 6px 18px rgba(19, 207, 253, 0.18);
}

.chat-page-reimagined .chat-conversation-state-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 3px 7px;
  border: 1px solid rgba(125, 104, 255, 0.35);
  border-radius: 999px;
  color: #cfc7ff;
  font-size: 0.66rem;
  font-weight: 750;
  background: rgba(82, 59, 166, 0.22);
}

@media (max-width: 760px) {
  .chat-page-reimagined .chat-conversation-actions {
    padding: 9px 12px;
  }

  .chat-page-reimagined .chat-conversation-action-button {
    flex: 1 1 auto;
  }

  .chat-page-reimagined .chat-conversation-action-button.is-danger {
    flex-basis: 100%;
    margin-left: 0;
  }
}


/* =====================================================================
   CHAT CUSTOM DELETE CONFIRMATION DIALOG
   Version: 3.3.150
===================================================================== */

.chat-page-reimagined .chat-confirm-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  width: min(92vw, 470px);
  max-width: 470px;
  margin: 0;
  padding: 0;
  overflow: visible;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 99, 132, 0.42);
  border-radius: 24px;
  outline: none;
  color: #f7fbff;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255, 91, 129, 0.12),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(7, 18, 39, 0.995),
      rgba(3, 10, 25, 0.995)
    );
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.76),
    0 0 46px rgba(255, 61, 110, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.chat-page-reimagined .chat-confirm-dialog::backdrop {
  background: rgba(0, 5, 16, 0.82);
  backdrop-filter: blur(10px);
}

.chat-page-reimagined .chat-confirm-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: 26px;
}

.chat-page-reimagined .chat-confirm-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 100, 133, 0.4);
  border-radius: 17px;
  color: #ffc1cf;
  font-size: 1.35rem;
  font-weight: 900;
  background: rgba(120, 24, 51, 0.28);
  box-shadow: 0 0 24px rgba(255, 75, 117, 0.08);
}

.chat-page-reimagined .chat-confirm-copy {
  min-width: 0;
}

.chat-page-reimagined .chat-confirm-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: #ff8aa5;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.chat-page-reimagined .chat-confirm-copy .eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6588, #ff9fb4);
}

.chat-page-reimagined .chat-confirm-copy h2 {
  margin: 0 0 9px;
  color: #ffffff;
  font-size: clamp(1.55rem, 4vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.chat-page-reimagined .chat-confirm-copy p {
  margin: 0;
  color: rgba(191, 207, 229, 0.82);
  font-size: 0.92rem;
  line-height: 1.65;
}

.chat-page-reimagined .chat-confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.chat-page-reimagined .chat-confirm-button {
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease;
}

.chat-page-reimagined .chat-confirm-cancel {
  border: 1px solid rgba(47, 204, 255, 0.24);
  color: rgba(220, 234, 251, 0.9);
  background:
    linear-gradient(
      145deg,
      rgba(13, 54, 91, 0.68),
      rgba(6, 27, 58, 0.8)
    );
}

.chat-page-reimagined .chat-confirm-cancel:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 219, 255, 0.56);
  background:
    linear-gradient(
      145deg,
      rgba(16, 91, 130, 0.6),
      rgba(13, 47, 96, 0.74)
    );
}

.chat-page-reimagined .chat-confirm-delete {
  border: 1px solid rgba(255, 104, 135, 0.6);
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #d93663,
      #ff5f7f
    );
  box-shadow:
    0 10px 24px rgba(255, 54, 101, 0.2);
}

.chat-page-reimagined .chat-confirm-delete:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(
      135deg,
      #e43c69,
      #ff718d
    );
  box-shadow:
    0 14px 30px rgba(255, 54, 101, 0.28);
}

@media (max-width: 560px) {
  .chat-page-reimagined .chat-confirm-panel {
    grid-template-columns: 1fr;
    padding: 22px 18px;
  }

  .chat-page-reimagined .chat-confirm-icon {
    width: 46px;
    height: 46px;
  }

  .chat-page-reimagined .chat-confirm-actions {
    grid-column: 1;
  }

  .chat-page-reimagined .chat-confirm-button {
    flex: 1 1 0;
  }
}


/* =====================================================================
   CHAT MEMBER RESULT STARTING STATE
   Version: 3.3.150
===================================================================== */

.chat-page-reimagined .chat-member-result.is-starting,
.chat-page-reimagined .chat-member-result[aria-busy="true"] {
  position: relative;
  pointer-events: none;
  opacity: 0.74;
  border-color: rgba(45, 219, 255, 0.62) !important;
  background:
    linear-gradient(
      135deg,
      rgba(17, 112, 159, 0.48),
      rgba(69, 57, 148, 0.3)
    ) !important;
}

.chat-page-reimagined .chat-member-result.is-starting::after,
.chat-page-reimagined .chat-member-result[aria-busy="true"]::after {
  content: "";
  position: absolute;
  right: 18px;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #39ddff;
  border-radius: 50%;
  animation: chatMemberStartingSpin 700ms linear infinite;
}

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


/* =====================================================================
   CHAT FILTER-SYNC EMPTY STATE
   Version: 3.3.150
===================================================================== */

.chat-page-reimagined .chat-sidebar-empty {
  min-height: 220px;
}

.chat-page-reimagined .chat-sidebar-empty h3,
.chat-page-reimagined .chat-sidebar-empty p {
  text-align: center;
}

.chat-page-reimagined #chatEmptyNewButton[hidden] {
  display: none !important;
}


/* =====================================================================
   CHAT STANDARD ACTIONS
   Version: 3.3.150
===================================================================== */

.chat-page-reimagined .chat-conversation-filter {
  gap: 7px;
}

.chat-page-reimagined .chat-filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  color: inherit;
  font-size: 0.62rem;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.12);
}

.chat-page-reimagined .chat-conversation-filter.is-active .chat-filter-count {
  background: rgba(0, 18, 31, 0.16);
}

.chat-page-reimagined .chat-conversation-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 5px;
  border-radius: 17px;
}

.chat-page-reimagined .chat-conversation-row.is-active {
  background: rgba(18, 151, 205, 0.08);
}

.chat-page-reimagined .chat-conversation-row .chat-conversation-item {
  min-width: 0;
}

.chat-page-reimagined .chat-row-archive-button {
  display: grid !important;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border: 1px solid rgba(47, 204, 255, 0.22) !important;
  border-radius: 9px !important;
  color: rgba(198, 221, 245, 0.82) !important;
  background: rgba(8, 34, 67, 0.68) !important;
  cursor: pointer;
}

.chat-page-reimagined .chat-row-archive-button:hover {
  border-color: rgba(47, 219, 255, 0.58) !important;
  color: #ffffff !important;
  background: rgba(15, 88, 127, 0.54) !important;
}

.chat-page-reimagined .chat-message-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
}

.chat-page-reimagined .chat-message-actions .chat-message-reply-button,
.chat-page-reimagined .chat-message-delete-button {
  margin-top: 0 !important;
}

.chat-page-reimagined .chat-message-delete-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px !important;
  border: 1px solid rgba(255, 96, 128, 0.3) !important;
  border-radius: 8px !important;
  color: #ffc1cf !important;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(91, 20, 43, 0.28) !important;
  cursor: pointer;
}

.chat-page-reimagined .chat-message-delete-button:hover {
  border-color: rgba(255, 100, 133, 0.68) !important;
  color: #ffffff !important;
  background: rgba(129, 27, 57, 0.44) !important;
}

@media (max-width: 640px) {
  .chat-page-reimagined .chat-conversation-row {
    grid-template-columns: minmax(0, 1fr) 32px;
  }

  .chat-page-reimagined .chat-row-archive-button {
    width: 30px;
    height: 30px;
  }
}
/* =====================================================================
SMOOTH JAZZ CONNECT
PROFILE EDIT MODAL + PROFILE ACTION MENU
FINAL VISUAL CORRECTION LAYER
Paste at the absolute bottom of /styles.css
===================================================================== */

/* =====================================================================
PROFILE ACTION MENU
Copy / Share / Edit / Report / Block
===================================================================== */

.profile-page .profile-action-menu,
.profile-page .profile-overflow-menu,
.profile-page [data-profile-menu] {
position: absolute;
z-index: 120;
display: grid;
gap: 6px;
min-width: 220px;
padding: 9px;
border: 1px solid rgba(45, 211, 255, 0.32);
border-radius: 16px;
background:
radial-gradient(
circle at 100% 0,
rgba(32, 211, 255, 0.09),
transparent 40%
),
linear-gradient(
145deg,
rgba(5, 18, 42, 0.99),
rgba(2, 10, 26, 0.995)
);
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.58),
0 0 30px rgba(22, 209, 255, 0.08);
backdrop-filter: blur(18px);
}

.profile-page .profile-action-menu[hidden],
.profile-page .profile-overflow-menu[hidden],
.profile-page [data-profile-menu][hidden] {
display: none !important;
}

.profile-page .profile-action-menu button,
.profile-page .profile-overflow-menu button,
.profile-page [data-profile-menu] button,
.profile-page [data-profile-action] {
appearance: none;
-webkit-appearance: none;
display: flex;
align-items: center;
width: 100%;
min-height: 42px;
padding: 10px 13px;
border: 1px solid transparent;
border-radius: 11px;
color: rgba(219, 234, 251, 0.9);
font-size: 0.84rem;
font-weight: 750;
line-height: 1.2;
text-align: left;
background: transparent;
cursor: pointer;
transition:
color 170ms ease,
border-color 170ms ease,
background 170ms ease,
transform 170ms ease;
}

.profile-page .profile-action-menu button:hover,
.profile-page .profile-overflow-menu button:hover,
.profile-page [data-profile-menu] button:hover,
.profile-page [data-profile-action]:hover {
transform: translateX(2px);
color: #ffffff;
border-color: rgba(45, 215, 255, 0.24);
background: rgba(18, 93, 136, 0.3);
}

.profile-page
.profile-action-menu
button[data-profile-action="report"],
.profile-page
.profile-action-menu
button[data-profile-action="block"],
.profile-page
.profile-overflow-menu
button[data-profile-action="report"],
.profile-page
.profile-overflow-menu
button[data-profile-action="block"] {
color: #ffc1cf;
}

.profile-page
.profile-action-menu
button[data-profile-action="report"]:hover,
.profile-page
.profile-action-menu
button[data-profile-action="block"]:hover,
.profile-page
.profile-overflow-menu
button[data-profile-action="report"]:hover,
.profile-page
.profile-overflow-menu
button[data-profile-action="block"]:hover {
border-color: rgba(255, 94, 128, 0.34);
background: rgba(111, 23, 49, 0.34);
}

/* =====================================================================
PROFILE EDIT DIALOG
===================================================================== */

.profile-page dialog,
.profile-page .profile-edit-dialog,
.profile-page #profileEditDialog,
.profile-page #editProfileDialog {
width: min(92vw, 620px);
max-width: 620px;
max-height: min(88vh, 820px);
margin: auto;
padding: 0;
overflow: hidden;
border: 1px solid rgba(47, 211, 255, 0.4);
border-radius: 26px;
outline: none;
color: #f7fbff;
background:
radial-gradient(
circle at 100% 0,
rgba(38, 214, 255, 0.12),
transparent 38%
),
linear-gradient(
145deg,
rgba(5, 18, 42, 0.995),
rgba(2, 9, 24, 0.995)
);
box-shadow:
0 36px 110px rgba(0, 0, 0, 0.76),
0 0 46px rgba(24, 207, 255, 0.1),
inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.profile-page dialog::backdrop,
.profile-page .profile-edit-dialog::backdrop,
.profile-page #profileEditDialog::backdrop,
.profile-page #editProfileDialog::backdrop {
background: rgba(0, 5, 16, 0.84);
backdrop-filter: blur(12px);
}

.profile-page .profile-edit-panel,
.profile-page .profile-edit-form,
.profile-page #profileEditForm,
.profile-page #editProfileForm {
display: grid;
gap: 20px;
width: 100%;
max-height: min(88vh, 820px);
padding: clamp(22px, 4vw, 32px);
overflow-y: auto;
color: #f7fbff;
background: transparent;
scrollbar-width: thin;
scrollbar-color:
rgba(43, 205, 255, 0.4)
transparent;
}

/* =====================================================================
EDIT PROFILE HEADER
===================================================================== */

.profile-page .profile-edit-header,
.profile-page .edit-profile-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(44, 201, 255, 0.14);
}

.profile-page .profile-edit-header h2,
.profile-page .edit-profile-header h2,
.profile-page #profileEditDialog h2,
.profile-page #editProfileDialog h2 {
margin: 0;
color: #ffffff;
font-size: clamp(1.7rem, 4vw, 2.3rem);
line-height: 1;
letter-spacing: -0.04em;
}

.profile-page .profile-edit-close,
.profile-page .edit-profile-close,
.profile-page #closeProfileEditButton,
.profile-page #profileEditCloseButton {
appearance: none;
-webkit-appearance: none;
display: grid;
place-items: center;
width: 46px;
height: 46px;
flex: 0 0 46px;
padding: 0;
border: 1px solid rgba(47, 207, 255, 0.3);
border-radius: 14px;
color: #36dcff;
font-size: 1.15rem;
background:
linear-gradient(
145deg,
rgba(14, 57, 96, 0.72),
rgba(7, 28, 61, 0.88)
);
cursor: pointer;
transition:
transform 170ms ease,
border-color 170ms ease,
background 170ms ease;
}

.profile-page .profile-edit-close:hover,
.profile-page .edit-profile-close:hover,
.profile-page #closeProfileEditButton:hover,
.profile-page #profileEditCloseButton:hover {
transform: translateY(-2px);
border-color: rgba(47, 220, 255, 0.7);
background:
linear-gradient(
145deg,
rgba(18, 107, 151, 0.7),
rgba(17, 53, 106, 0.84)
);
}

/* =====================================================================
PROFILE IMAGE + BANNER UPLOAD SECTIONS
===================================================================== */

.profile-page .profile-image-upload-group,
.profile-page .profile-banner-upload-group,
.profile-page .profile-media-field,
.profile-page .profile-upload-field {
display: grid;
gap: 10px;
padding: 16px;
border: 1px solid rgba(44, 195, 255, 0.18);
border-radius: 16px;
background: rgba(6, 26, 56, 0.46);
}

.profile-page .profile-image-preview,
.profile-page .profile-banner-preview,
.profile-page #profileImagePreview,
.profile-page #bannerImagePreview {
overflow: hidden;
border: 1px solid rgba(47, 210, 255, 0.28);
border-radius: 16px;
background: rgba(3, 13, 31, 0.9);
box-shadow:
0 10px 26px rgba(0, 0, 0, 0.22),
0 0 20px rgba(31, 210, 255, 0.06);
}

.profile-page .profile-image-preview,
.profile-page #profileImagePreview {
width: 96px;
height: 96px;
}

.profile-page .profile-image-preview img,
.profile-page #profileImagePreview img {
width: 100%;
height: 100%;
object-fit: cover;
}

.profile-page .profile-banner-preview,
.profile-page #bannerImagePreview {
width: 100%;
min-height: 120px;
aspect-ratio: 3 / 1;
}

.profile-page .profile-banner-preview img,
.profile-page #bannerImagePreview img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* =====================================================================
CUSTOM FILE INPUTS
===================================================================== */

.profile-page input[type="file"] {
width: 100%;
max-width: 100%;
color: rgba(186, 203, 226, 0.82);
font-size: 0.82rem;
cursor: pointer;
}

.profile-page input[type="file"]::file-selector-button {
appearance: none;
-webkit-appearance: none;
min-height: 38px;
margin-right: 12px;
padding: 8px 14px;
border: 1px solid rgba(49, 207, 255, 0.34);
border-radius: 10px;
color: #00121f;
font-size: 0.78rem;
font-weight: 850;
background:
linear-gradient(
135deg,
#17d2ff,
#63ddf7
);
box-shadow:
0 8px 20px rgba(19, 207, 253, 0.16);
cursor: pointer;
transition:
transform 160ms ease,
filter 160ms ease,
box-shadow 160ms ease;
}

.profile-page input[type="file"]::file-selector-button:hover {
transform: translateY(-1px);
filter: brightness(1.08);
box-shadow:
0 11px 26px rgba(19, 207, 253, 0.24);
}

.profile-page input[type="file"]::-webkit-file-upload-button {
appearance: none;
-webkit-appearance: none;
min-height: 38px;
margin-right: 12px;
padding: 8px 14px;
border: 1px solid rgba(49, 207, 255, 0.34);
border-radius: 10px;
color: #00121f;
font-size: 0.78rem;
font-weight: 850;
background:
linear-gradient(
135deg,
#17d2ff,
#63ddf7
);
cursor: pointer;
}

/* =====================================================================
FORM LABELS
===================================================================== */

.profile-page .profile-edit-form label,
.profile-page #profileEditForm label,
.profile-page #editProfileForm label {
display: grid;
gap: 8px;
color: rgba(223, 235, 251, 0.92);
font-size: 0.85rem;
font-weight: 800;
}

.profile-page .profile-edit-form label > span,
.profile-page #profileEditForm label > span,
.profile-page #editProfileForm label > span {
color: rgba(223, 235, 251, 0.92);
}

/* =====================================================================
TEXT INPUTS / SELECTS / TEXTAREAS
===================================================================== */

.profile-page .profile-edit-form input:not([type="file"]),
.profile-page .profile-edit-form textarea,
.profile-page .profile-edit-form select,
.profile-page #profileEditForm input:not([type="file"]),
.profile-page #profileEditForm textarea,
.profile-page #profileEditForm select,
.profile-page #editProfileForm input:not([type="file"]),
.profile-page #editProfileForm textarea,
.profile-page #editProfileForm select {
width: 100%;
min-height: 50px;
padding: 12px 15px;
border: 1px solid rgba(47, 189, 244, 0.3);
border-radius: 14px;
outline: none;
color: #f7fbff;
font: inherit;
background: rgba(2, 11, 28, 0.9);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.012);
transition:
border-color 170ms ease,
background 170ms ease,
box-shadow 170ms ease;
}

.profile-page .profile-edit-form textarea,
.profile-page #profileEditForm textarea,
.profile-page #editProfileForm textarea {
min-height: 150px;
resize: vertical;
line-height: 1.6;
}

.profile-page .profile-edit-form input::placeholder,
.profile-page .profile-edit-form textarea::placeholder,
.profile-page #profileEditForm input::placeholder,
.profile-page #profileEditForm textarea::placeholder,
.profile-page #editProfileForm input::placeholder,
.profile-page #editProfileForm textarea::placeholder {
color: rgba(158, 176, 201, 0.58);
}

.profile-page .profile-edit-form input:focus,
.profile-page .profile-edit-form textarea:focus,
.profile-page .profile-edit-form select:focus,
.profile-page #profileEditForm input:focus,
.profile-page #profileEditForm textarea:focus,
.profile-page #profileEditForm select:focus,
.profile-page #editProfileForm input:focus,
.profile-page #editProfileForm textarea:focus,
.profile-page #editProfileForm select:focus {
border-color: #26d9ff;
background: rgba(4, 20, 45, 0.98);
box-shadow:
0 0 0 4px rgba(38, 217, 255, 0.1),
0 0 24px rgba(38, 217, 255, 0.08);
}

/* =====================================================================
CHARACTER COUNTER
===================================================================== */

.profile-page .character-count,
.profile-page .profile-character-count,
.profile-page #profileBioCount,
.profile-page #biographyCharacterCount {
display: block;
margin-top: -3px;
color: rgba(164, 183, 208, 0.68);
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
text-align: right;
}

/* =====================================================================
EDIT PROFILE ACTION BUTTONS
===================================================================== */

.profile-page .profile-edit-actions,
.profile-page .edit-profile-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding-top: 16px;
border-top: 1px solid rgba(44, 199, 255, 0.12);
}

.profile-page .profile-edit-actions button,
.profile-page .edit-profile-actions button,
.profile-page #saveProfileButton,
.profile-page #cancelProfileEditButton {
appearance: none;
-webkit-appearance: none;
min-height: 44px;
padding: 9px 17px;
border-radius: 12px;
font-size: 0.82rem;
font-weight: 850;
cursor: pointer;
}

.profile-page #saveProfileButton,
.profile-page .profile-edit-save {
border: 1px solid rgba(104, 232, 255, 0.52);
color: #00111d;
background:
linear-gradient(
135deg,
#17d2ff,
#66def7
);
box-shadow:
0 10px 24px rgba(20, 203, 255, 0.2);
}

.profile-page #cancelProfileEditButton,
.profile-page .profile-edit-cancel {
border: 1px solid rgba(49, 202, 255, 0.22);
color: rgba(220, 234, 251, 0.9);
background:
linear-gradient(
145deg,
rgba(13, 54, 91, 0.68),
rgba(6, 27, 58, 0.8)
);
}

/* =====================================================================
RESPONSIVE
===================================================================== */

@media (max-width: 640px) {
.profile-page dialog,
.profile-page .profile-edit-dialog,
.profile-page #profileEditDialog,
.profile-page #editProfileDialog {
width: calc(100vw - 20px);
max-height: calc(100dvh - 24px);
border-radius: 21px;
}

.profile-page .profile-edit-panel,
.profile-page .profile-edit-form,
.profile-page #profileEditForm,
.profile-page #editProfileForm {
padding: 20px 15px;
}

.profile-page .profile-edit-actions,
.profile-page .edit-profile-actions {
flex-direction: column-reverse;
}

.profile-page .profile-edit-actions button,
.profile-page .edit-profile-actions button {
width: 100%;
}

.profile-page input[type="file"]::file-selector-button {
display: block;
width: 100%;
margin: 0 0 8px;
}
}

/* =====================================================================
ACCESSIBILITY
===================================================================== */

.profile-page button:focus-visible,
.profile-page input:focus-visible,
.profile-page textarea:focus-visible,
.profile-page select:focus-visible {
outline: 3px solid rgba(47, 220, 255, 0.92);
outline-offset: 3px;
}
/* =====================================================================
SMOOTH JAZZ CONNECT
PROFILE EDIT MODAL — CORRECT GLOBAL SELECTORS
Applies to:

1. #modalRoot .modal-card.profile-edit-modal
2. #sjcProfileFallbackModal.profile-edit-modal .modal-card
   ===================================================================== */

/* =====================================================================
MODAL BACKDROP
===================================================================== */

#modalRoot.is-active,
#sjcProfileFallbackModal.profile-edit-modal {
position: fixed;
inset: 0;
z-index: 10000;
}

#modalRoot .modal-backdrop,
#sjcProfileFallbackModal.profile-edit-modal {
display: grid;
place-items: center;
padding: 20px;
overflow-y: auto;
background: rgba(0, 5, 16, 0.86);
backdrop-filter: blur(12px);
}

/* =====================================================================
MODAL CARD
===================================================================== */

#modalRoot .modal-card.profile-edit-modal,
#sjcProfileFallbackModal.profile-edit-modal .modal-card {
width: min(94vw, 720px);
max-width: 720px;
max-height: min(90vh, 900px);
margin: auto;
padding: 0;
overflow: hidden;
border: 1px solid rgba(47, 211, 255, 0.42);
border-radius: 28px;
outline: none;
color: #f7fbff;
background:
radial-gradient(
circle at 100% 0,
rgba(38, 214, 255, 0.12),
transparent 38%
),
linear-gradient(
145deg,
rgba(5, 18, 42, 0.995),
rgba(2, 9, 24, 0.995)
);
box-shadow:
0 36px 110px rgba(0, 0, 0, 0.78),
0 0 48px rgba(24, 207, 255, 0.11),
inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

/* =====================================================================
MODAL HEADER
===================================================================== */

#modalRoot .profile-edit-modal .modal-header,
#sjcProfileFallbackModal.profile-edit-modal .modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 82px;
padding: 22px 26px;
border-bottom: 1px solid rgba(44, 201, 255, 0.15);
background: rgba(5, 18, 42, 0.92);
}

#modalRoot .profile-edit-modal .modal-header h2,
#sjcProfileFallbackModal.profile-edit-modal .modal-header h2 {
margin: 0;
color: #ffffff;
font-size: clamp(1.65rem, 4vw, 2.25rem);
line-height: 1;
letter-spacing: -0.04em;
}

#modalRoot .profile-edit-modal .modal-header .icon-button,
#sjcProfileFallbackModal.profile-edit-modal .modal-header .icon-button {
appearance: none;
-webkit-appearance: none;
display: grid;
place-items: center;
width: 46px;
height: 46px;
flex: 0 0 46px;
padding: 0;
border: 1px solid rgba(47, 207, 255, 0.32);
border-radius: 14px;
color: #35dcff;
font-size: 1.15rem;
background:
linear-gradient(
145deg,
rgba(14, 57, 96, 0.72),
rgba(7, 28, 61, 0.88)
);
cursor: pointer;
}

/* =====================================================================
MODAL CONTENT
===================================================================== */

#modalRoot .profile-edit-modal .modal-content,
#sjcProfileFallbackModal.profile-edit-modal .modal-body {
max-height: calc(90vh - 82px);
padding: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color:
rgba(43, 205, 255, 0.42)
transparent;
}

/* =====================================================================
EDIT PROFILE FORM
===================================================================== */

#modalRoot #editProfileForm,
#sjcProfileFallbackModal #editProfileForm {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
width: 100%;
padding: 26px;
color: #f7fbff;
background: transparent;
}

#modalRoot #editProfileForm .form-field-full,
#modalRoot #editProfileForm .profile-edit-media-grid,
#sjcProfileFallbackModal #editProfileForm .form-field-full,
#sjcProfileFallbackModal #editProfileForm .profile-edit-media-grid {
grid-column: 1 / -1;
}

/* =====================================================================
MEDIA GRID
===================================================================== */

#modalRoot .profile-edit-media-grid,
#sjcProfileFallbackModal .profile-edit-media-grid {
display: grid;
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
gap: 18px;
align-items: stretch;
}

#modalRoot .profile-edit-media-card,
#sjcProfileFallbackModal .profile-edit-media-card {
display: grid;
align-content: start;
gap: 12px;
padding: 16px;
border: 1px solid rgba(44, 195, 255, 0.2);
border-radius: 18px;
background:
linear-gradient(
145deg,
rgba(8, 31, 65, 0.72),
rgba(4, 18, 43, 0.82)
);
}

/* =====================================================================
AVATAR PREVIEW
===================================================================== */

#modalRoot #editProfileAvatarPreview,
#sjcProfileFallbackModal #editProfileAvatarPreview {
display: block;
width: 112px;
height: 112px;
margin: 0 auto;
border: 2px solid rgba(47, 210, 255, 0.34);
border-radius: 24px;
object-fit: cover;
background: rgba(3, 13, 31, 0.92);
box-shadow:
0 14px 30px rgba(0, 0, 0, 0.28),
0 0 24px rgba(31, 210, 255, 0.08);
}

/* =====================================================================
BANNER PREVIEW
===================================================================== */

#modalRoot #editProfileBannerPreview,
#sjcProfileFallbackModal #editProfileBannerPreview {
width: 100%;
min-height: 150px;
border: 2px solid rgba(47, 210, 255, 0.28);
border-radius: 16px;
background-color: rgba(3, 13, 31, 0.92);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow:
0 14px 30px rgba(0, 0, 0, 0.24),
0 0 22px rgba(31, 210, 255, 0.06);
}

/* =====================================================================
LABELS
===================================================================== */

#modalRoot #editProfileForm label,
#sjcProfileFallbackModal #editProfileForm label {
display: block;
margin-bottom: 8px;
color: rgba(224, 237, 252, 0.94);
font-size: 0.84rem;
font-weight: 800;
}

/* =====================================================================
FILE INPUTS
===================================================================== */

#modalRoot #editProfileAvatar,
#modalRoot #editProfileBanner,
#sjcProfileFallbackModal #editProfileAvatar,
#sjcProfileFallbackModal #editProfileBanner {
display: block;
width: 100%;
max-width: 100%;
color: rgba(185, 203, 226, 0.86);
font-size: 0.8rem;
background: transparent;
cursor: pointer;
}

#modalRoot #editProfileAvatar::file-selector-button,
#modalRoot #editProfileBanner::file-selector-button,
#sjcProfileFallbackModal #editProfileAvatar::file-selector-button,
#sjcProfileFallbackModal #editProfileBanner::file-selector-button {
appearance: none;
-webkit-appearance: none;
min-height: 38px;
margin-right: 10px;
padding: 8px 13px;
border: 1px solid rgba(92, 229, 255, 0.5);
border-radius: 10px;
color: #00131f;
font-size: 0.76rem;
font-weight: 850;
background:
linear-gradient(
135deg,
#17d2ff,
#65def7
);
box-shadow:
0 8px 20px rgba(19, 207, 253, 0.17);
cursor: pointer;
}

#modalRoot #editProfileAvatar::-webkit-file-upload-button,
#modalRoot #editProfileBanner::-webkit-file-upload-button,
#sjcProfileFallbackModal #editProfileAvatar::-webkit-file-upload-button,
#sjcProfileFallbackModal #editProfileBanner::-webkit-file-upload-button {
appearance: none;
-webkit-appearance: none;
min-height: 38px;
margin-right: 10px;
padding: 8px 13px;
border: 1px solid rgba(92, 229, 255, 0.5);
border-radius: 10px;
color: #00131f;
font-size: 0.76rem;
font-weight: 850;
background:
linear-gradient(
135deg,
#17d2ff,
#65def7
);
cursor: pointer;
}

/* =====================================================================
TEXT INPUTS, TEXTAREAS, SELECTS
===================================================================== */

#modalRoot #editProfileForm input:not([type="file"]),
#modalRoot #editProfileForm textarea,
#modalRoot #editProfileForm select,
#sjcProfileFallbackModal #editProfileForm input:not([type="file"]),
#sjcProfileFallbackModal #editProfileForm textarea,
#sjcProfileFallbackModal #editProfileForm select {
width: 100%;
min-height: 50px;
margin: 0;
padding: 12px 15px;
border: 1px solid rgba(47, 189, 244, 0.32);
border-radius: 14px;
outline: none;
color: #f7fbff;
font: inherit;
background: rgba(2, 11, 28, 0.92);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.012);
transition:
border-color 170ms ease,
background 170ms ease,
box-shadow 170ms ease;
}

#modalRoot #editProfileForm textarea,
#sjcProfileFallbackModal #editProfileForm textarea {
min-height: 170px;
resize: vertical;
line-height: 1.6;
}

#modalRoot #editProfileForm input:focus,
#modalRoot #editProfileForm textarea:focus,
#modalRoot #editProfileForm select:focus,
#sjcProfileFallbackModal #editProfileForm input:focus,
#sjcProfileFallbackModal #editProfileForm textarea:focus,
#sjcProfileFallbackModal #editProfileForm select:focus {
border-color: #27d9ff;
background: rgba(4, 20, 45, 0.99);
box-shadow:
0 0 0 4px rgba(38, 217, 255, 0.1),
0 0 24px rgba(38, 217, 255, 0.08);
}

/* =====================================================================
BIO COUNTER
===================================================================== */

#modalRoot #editProfileBioCount,
#sjcProfileFallbackModal #editProfileBioCount {
display: block;
margin-top: 7px;
color: rgba(164, 183, 208, 0.7);
font-size: 0.72rem;
text-align: right;
font-variant-numeric: tabular-nums;
}

/* =====================================================================
SMALL HELP TEXT
===================================================================== */

#modalRoot #editProfileForm small,
#sjcProfileFallbackModal #editProfileForm small {
color: rgba(164, 183, 208, 0.72);
font-size: 0.72rem;
line-height: 1.45;
}

/* =====================================================================
PROGRESS BARS
===================================================================== */

#modalRoot #editProfileForm progress,
#sjcProfileFallbackModal #editProfileForm progress {
width: 100%;
height: 7px;
overflow: hidden;
border: 0;
border-radius: 999px;
appearance: none;
background: rgba(255, 255, 255, 0.08);
}

#modalRoot #editProfileForm progress::-webkit-progress-bar,
#sjcProfileFallbackModal #editProfileForm progress::-webkit-progress-bar {
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
}

#modalRoot #editProfileForm progress::-webkit-progress-value,
#sjcProfileFallbackModal #editProfileForm progress::-webkit-progress-value {
border-radius: 999px;
background:
linear-gradient(
90deg,
#20d9ff,
#765cff
);
}

/* =====================================================================
FORM ACTIONS
===================================================================== */

#modalRoot #editProfileForm .form-actions,
#modalRoot #editProfileForm .profile-edit-actions,
#sjcProfileFallbackModal #editProfileForm .form-actions,
#sjcProfileFallbackModal #editProfileForm .profile-edit-actions {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding-top: 18px;
border-top: 1px solid rgba(44, 199, 255, 0.13);
}

/* =====================================================================
PROFILE MORE MENU — ACTUAL SELECTOR
===================================================================== */

.profile-page .profile-more-wrap {
position: relative;
}

.profile-page #profileMoreMenu {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 500;
display: grid;
gap: 5px;
min-width: 220px;
padding: 9px;
border: 1px solid rgba(45, 211, 255, 0.32);
border-radius: 16px;
background:
linear-gradient(
145deg,
rgba(5, 18, 42, 0.995),
rgba(2, 10, 26, 0.995)
);
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.58),
0 0 30px rgba(22, 209, 255, 0.08);
}

.profile-page #profileMoreMenu[hidden] {
display: none !important;
}

.profile-page #profileMoreMenu button {
appearance: none;
-webkit-appearance: none;
display: flex;
align-items: center;
width: 100%;
min-height: 40px;
padding: 9px 12px;
border: 1px solid transparent;
border-radius: 10px;
color: rgba(219, 234, 251, 0.9);
font-size: 0.82rem;
font-weight: 750;
text-align: left;
background: transparent;
cursor: pointer;
}

.profile-page #profileMoreMenu button:hover {
color: #ffffff;
border-color: rgba(45, 215, 255, 0.24);
background: rgba(18, 93, 136, 0.3);
}

.profile-page
#profileMoreMenu
button[data-profile-action="report"],
.profile-page
#profileMoreMenu
button[data-profile-action="block"] {
color: #ffc1cf;
}

/* =====================================================================
MOBILE
===================================================================== */

@media (max-width: 680px) {
#modalRoot .modal-card.profile-edit-modal,
#sjcProfileFallbackModal.profile-edit-modal .modal-card {
width: calc(100vw - 18px);
max-height: calc(100dvh - 20px);
border-radius: 22px;
}

#modalRoot #editProfileForm,
#sjcProfileFallbackModal #editProfileForm {
grid-template-columns: 1fr;
padding: 20px 15px;
}

#modalRoot .profile-edit-media-grid,
#sjcProfileFallbackModal .profile-edit-media-grid {
grid-template-columns: 1fr;
}

#modalRoot #editProfileForm .form-field-full,
#modalRoot #editProfileForm .profile-edit-media-grid,
#sjcProfileFallbackModal #editProfileForm .form-field-full,
#sjcProfileFallbackModal #editProfileForm .profile-edit-media-grid {
grid-column: 1;
}
}
/* =========================================================
   PROFILE — THREE-DOT ACTION MENU LAYER FIX
   Keeps the dropdown above all profile cards and sections
   ========================================================= */

[data-profile-root],
.profile-page,
.profile-shell,
.profile-main,
.profile-content,
.profile-hero,
.profile-hero-card,
.profile-header-card,
.profile-identity,
.profile-identity-card,
.profile-actions,
.profile-action-row {
  overflow: visible !important;
}

/* Prevent the profile hero from clipping the action dropdown */
.profile-hero,
.profile-hero-card,
.profile-header-card,
.profile-identity-card {
  position: relative;
  z-index: 20;
}

/* Action row must create the correct positioning context */
.profile-actions,
.profile-action-row,
.profile-header-actions,
.profile-primary-actions {
  position: relative;
  z-index: 1000;
  overflow: visible !important;
}

/* Three-dot button wrapper */
.profile-more-menu,
.profile-actions-menu,
.profile-overflow-menu,
.profile-menu-wrap,
[data-profile-menu],
[data-profile-more-menu] {
  position: relative !important;
  z-index: 10000 !important;
  overflow: visible !important;
  isolation: isolate;
}

/* Three-dot button */
.profile-more-button,
.profile-menu-trigger,
.profile-overflow-trigger,
[data-profile-menu-trigger],
[data-action="profile-menu"] {
  position: relative;
  z-index: 10001;
}

/* Actual dropdown panel */
.profile-more-dropdown,
.profile-actions-dropdown,
.profile-overflow-dropdown,
.profile-menu-dropdown,
.profile-action-menu,
[data-profile-menu-panel],
[data-profile-dropdown] {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  left: auto !important;

  min-width: 220px;
  max-width: min(300px, calc(100vw - 32px));

  z-index: 2147483000 !important;
  overflow: hidden;

  opacity: 1;
  visibility: visible;
  transform: none;

  background: rgba(4, 16, 38, 0.98);
  border: 1px solid rgba(37, 211, 255, 0.42);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(102, 82, 255, 0.12),
    0 0 28px rgba(25, 203, 255, 0.18);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* Preserve hidden state until JavaScript opens the menu */
.profile-more-dropdown[hidden],
.profile-actions-dropdown[hidden],
.profile-overflow-dropdown[hidden],
.profile-menu-dropdown[hidden],
.profile-action-menu[hidden],
[data-profile-menu-panel][hidden],
[data-profile-dropdown][hidden] {
  display: none !important;
}

/* Common open-state support */
.profile-more-menu.is-open .profile-more-dropdown,
.profile-actions-menu.is-open .profile-actions-dropdown,
.profile-overflow-menu.is-open .profile-overflow-dropdown,
.profile-menu-wrap.is-open .profile-menu-dropdown,
[data-profile-menu].is-open [data-profile-menu-panel],
[data-profile-more-menu].is-open [data-profile-dropdown],
.profile-more-dropdown.is-open,
.profile-actions-dropdown.is-open,
.profile-overflow-dropdown.is-open,
.profile-menu-dropdown.is-open,
.profile-action-menu.is-open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Keep lower profile sections behind the dropdown */
.profile-stats,
.profile-stat-grid,
.profile-stat-card,
.profile-tabs,
.profile-posts,
.profile-content-grid {
  position: relative;
  z-index: 1;
}

/* Remove stacking contexts that can trap the dropdown */
.profile-hero-card,
.profile-header-card,
.profile-identity-card,
.profile-actions,
.profile-action-row {
  transform: none !important;
  filter: none !important;
}

/* Mobile positioning */
@media (max-width: 700px) {
  .profile-more-dropdown,
  .profile-actions-dropdown,
  .profile-overflow-dropdown,
  .profile-menu-dropdown,
  .profile-action-menu,
  [data-profile-menu-panel],
  [data-profile-dropdown] {
    right: 0 !important;
    left: auto !important;
    min-width: min(240px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
  }
}

/* =====================================================================
   SMOOTH JAZZ CONNECT
   GLOBAL RENDERING STABILITY + FLICKER PREVENTION
   Version: 3.3.150

   Purpose:
   - Preserve the existing visual system and page layouts
   - Reduce full-screen compositing pressure
   - Prevent fixed blurred glow layers from repainting during scroll
   - Stop decorative perpetual motion that can cause Chrome flicker
   - Keep functional loaders, modals, menus and route transitions intact
===================================================================== */

/* Stable page/background composition. */
.app-background {
  transform: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: auto;
}

/* Full-height blurred sidebars are a primary source of repaint flicker. */
.sidebar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(8, 13, 30, 0.985),
      rgba(5, 10, 24, 0.99)
    ) !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

html[data-theme="light"] .sidebar {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.985),
      rgba(244, 248, 255, 0.99)
    ) !important;
}

/* Keep mobile header readable without a large live blur surface. */
.mobile-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(4, 8, 21, 0.985) !important;
}

html[data-theme="light"] .mobile-header {
  background: rgba(255, 255, 255, 0.985) !important;
}

/* Route content should not inherit stale transforms or opacity states. */
.route-outlet,
[data-partial-root] {
  opacity: 1;
  visibility: visible;
  filter: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.main-column {
  scroll-behavior: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Convert page-wide fixed glow fields into page-contained decoration. */
.chat-page::before,
.chat-page::after,
.dashboard-page::before,
.dashboard-page::after,
.discover-page::before,
.discover-page::after,
.home-page::before,
.home-page::after,
.notifications-page::before,
.notifications-page::after,
.policy-page::before,
.policy-page::after,
.profile-page::before,
.profile-page::after,
.settings-page::before,
.settings-page::after,
.terms-page::before,
.terms-page::after {
  position: absolute !important;
  will-change: auto !important;
  transform: none !important;
  animation: none !important;
}

/* Prevent expensive decorative orbit/float animations from running forever. */
.dashboard-logo,
.dashboard-orbit,
.dashboard-orbit::before,
.dashboard-orbit-two,
.dashboard-orbit-two::before,
.discover-logo,
.discover-orbit,
.discover-orbit::before,
.discover-orbit-two,
.discover-orbit-two::before,
.discover-orbit-three,
.discover-orbit-three::before,
.home-logo,
.home-orbit,
.home-orbit::before,
.home-orbit-two,
.home-orbit-two::before,
.home-orbit-three,
.home-orbit-three::before,
.notifications-bell,
.notifications-orbit,
.notifications-orbit::before,
.notifications-orbit-two,
.notifications-orbit-two::before,
.policy-shield,
.policy-orbit,
.policy-orbit::before,
.policy-orbit-two,
.policy-orbit-two::before,
.settings-control,
.settings-orbit,
.settings-orbit::before,
.settings-orbit-two,
.settings-orbit-two::before,
.terms-agreement,
.terms-orbit,
.terms-orbit::before,
.terms-orbit-two,
.terms-orbit-two::before,
.about-logo-orbit {
  animation: none !important;
  will-change: auto !important;
}

/* Preserve visual depth while avoiding live blur on large page cards. */
.chat-page > .content-card,
.dashboard-page > .content-card,
.discover-page > .content-card,
.home-page > .content-card,
.notifications-page > .content-card,
.policy-page > .content-card,
.profile-page > .content-card,
.settings-page > .content-card,
.terms-page > .content-card,
.chat-sidebar-header,
.chat-workspace-header,
.chat-composer {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Functional modal blur stays subtle and bounded. */
.modal-backdrop,
.sjc-modal-backdrop,
.mobile-backdrop {
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

/* A route progress bar should complete once, not repaint indefinitely. */
.route-progress {
  overflow: hidden;
  animation: sjc-route-progress-once 900ms ease-out 1 both !important;
  transform-origin: left center;
  will-change: transform;
}

.route-progress[hidden],
.route-progress.is-complete,
body:not(.is-routing) .route-progress:not(.is-active) {
  display: none !important;
  animation: none !important;
  will-change: auto;
}

@keyframes sjc-route-progress-once {
  0% {
    opacity: 0;
    transform: scaleX(0.04);
  }

  18% {
    opacity: 1;
  }

  82% {
    opacity: 1;
    transform: scaleX(0.88);
  }

  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

/* Loading animations remain functional but use opacity only. */
.loading-logo {
  animation: sjc-loading-breathe 1.8s ease-in-out infinite !important;
  transform: none !important;
  will-change: opacity;
}

@keyframes sjc-loading-breathe {
  0%,
  100% {
    opacity: 0.76;
  }

  50% {
    opacity: 1;
  }
}

/* Keep true loading indicators animated; stop hidden indicators completely. */
[hidden] .spinner,
[hidden] [class*="spinner"],
[hidden] [class*="loading"],
.spinner[hidden],
[class*="spinner"][hidden],
[class*="loading"][hidden] {
  animation: none !important;
}

/* Media stability prevents image repaint flashes during route updates. */
img,
video,
canvas {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

img:not([src]),
img[src=""] {
  visibility: hidden;
}

/* Avoid animating layout-affecting properties globally. */
.nav-link,
.button,
.icon-button,
.brand-link,
.tool-button,
.post-actions button,
.chat-conversation-item,
.chat-composer-action {
  transition-property:
    color,
    background-color,
    border-color,
    box-shadow,
    opacity,
    transform;
}

/* Chrome/Safari repaint containment for frequently updated feed regions. */
.feed-list,
.chat-conversation-list,
.chat-message-list,
.notifications-list,
.discover-results,
.profile-posts {
  contain: layout style;
}

/* Do not clip menus, dialogs or popovers inside stabilized page roots. */
.profile-page,
.profile-hero,
.profile-hero-card,
.profile-actions,
.profile-action-row,
.profile-more-menu,
.profile-menu-wrap,
[data-profile-menu],
[data-profile-more-menu] {
  overflow: visible;
}

/* Mobile GPUs benefit most from removing large blur/filter surfaces. */
@media (max-width: 980px) {
  .chat-page::before,
  .chat-page::after,
  .dashboard-page::before,
  .dashboard-page::after,
  .discover-page::before,
  .discover-page::after,
  .home-page::before,
  .home-page::after,
  .notifications-page::before,
  .notifications-page::after,
  .policy-page::before,
  .policy-page::after,
  .profile-page::before,
  .profile-page::after,
  .settings-page::before,
  .settings-page::after,
  .terms-page::before,
  .terms-page::after {
    filter: blur(70px) !important;
    opacity: 0.09 !important;
  }

  .content-card,
  .composer,
  .post-card,
  .side-card,
  .identity-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Honor the operating system motion preference comprehensively. */
@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .main-column,
  .chat-message-list,
  .chat-conversation-list {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   CONNECTIONS — SMALL BOTTOM HERO STATS
   Replace the previous Connections hero/stat CSS
   ========================================================= */

.connects-hero {
  position: relative;
  display: block;
  min-height: 440px;
  padding:
    clamp(36px, 4vw, 54px)
    clamp(28px, 4vw, 54px)
    132px;
  overflow: hidden;
}

.connects-hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 620px);
  max-width: 620px;
  margin: 0;
  text-align: left;
}

.connects-hero .eyebrow {
  margin: 0 0 12px;
}

.connects-hero h1 {
  width: 100%;
  max-width: 620px;
  margin: 0 0 18px;
  color: #ffffff;
  font-size: clamp(2.7rem, 4.8vw, 4.7rem);
  font-weight: 950;
  line-height: 0.97;
  letter-spacing: -0.055em;
  text-align: left;
  text-wrap: balance;
}

.connects-hero .page-hero-lead,
.connects-hero-content > p {
  width: 100%;
  max-width: 560px;
  margin: 0;
  color: rgba(225, 236, 255, 0.78);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.65;
  text-align: left;
}

.connects-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  margin-top: 22px;
}

.connects-hero .hero-actions .button {
  min-height: 44px;
  padding: 9px 17px;
  border-radius: 13px;
}

/* =========================================================
   SMALL COUNTERS AT BOTTOM
   ========================================================= */

.connects-hero-stats {
  position: absolute;
  right: clamp(24px, 4vw, 48px);
  bottom: 26px;
  left: auto;
  z-index: 3;

  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 132px));
  gap: 10px;

  width: auto;
  max-width: calc(100% - 48px);
  margin: 0;
}

.connects-stat {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;

  min-width: 0;
  min-height: 78px;
  padding: 12px 10px;

  overflow: hidden;
  border: 1px solid rgba(70, 219, 255, 0.22);
  border-radius: 16px;

  text-align: center;

  background:
    linear-gradient(
      155deg,
      rgba(15, 34, 66, 0.96),
      rgba(5, 14, 31, 0.98)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 12px 26px rgba(0, 0, 0, 0.22);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.connects-stat::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(69, 220, 255, 0.11),
      transparent 62%
    );
}

.connects-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(70, 219, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 16px 30px rgba(0, 0, 0, 0.27);
}

.connects-stat strong {
  position: relative;
  z-index: 1;
  display: block;

  margin: 0 0 5px;

  color: #53e5ff;
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  font-weight: 950;
  line-height: 0.95;
  letter-spacing: -0.045em;

  font-variant-numeric: tabular-nums;
}

.connects-stat span {
  position: relative;
  z-index: 1;
  display: block;

  color: rgba(225, 237, 255, 0.74);
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.connects-stat:nth-child(2) {
  border-color: rgba(145, 112, 255, 0.25);
}

.connects-stat:nth-child(2)::before {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(145, 112, 255, 0.13),
      transparent 62%
    );
}

.connects-stat:nth-child(2) strong {
  color: #aa91ff;
}

.connects-stat:nth-child(3) {
  border-color: rgba(255, 201, 105, 0.25);
}

.connects-stat:nth-child(3)::before {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255, 201, 105, 0.12),
      transparent 62%
    );
}

.connects-stat:nth-child(3) strong {
  color: #ffd477;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {
  .connects-hero {
    min-height: auto;
    padding:
      36px
      28px
      124px;
  }

  .connects-hero-content {
    max-width: 700px;
    margin-inline: auto;
    text-align: center;
  }

  .connects-hero h1,
  .connects-hero .page-hero-lead,
  .connects-hero-content > p {
    margin-inline: auto;
    text-align: center;
  }

  .connects-hero .hero-actions {
    justify-content: center;
  }

  .connects-hero-stats {
    right: 50%;
    bottom: 24px;
    transform: translateX(50%);
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
  .connects-hero {
    padding:
      30px
      18px
      116px;
  }

  .connects-hero h1 {
    font-size: clamp(2.15rem, 10vw, 3.1rem);
    line-height: 1;
  }

  .connects-hero-stats {
    right: 16px;
    bottom: 18px;
    left: 16px;
    transform: none;

    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;

    width: auto;
    max-width: none;
  }

  .connects-stat {
    min-height: 70px;
    padding: 10px 6px;
    border-radius: 14px;
  }

  .connects-stat strong {
    margin-bottom: 4px;
    font-size: 1.45rem;
  }

  .connects-stat span {
    font-size: 0.5rem;
    letter-spacing: 0.07em;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {
  .connects-hero {
    padding:
      26px
      15px
      112px;
  }

  .connects-hero-stats {
    right: 12px;
    bottom: 14px;
    left: 12px;
    gap: 6px;
  }

  .connects-stat {
    min-height: 66px;
    padding: 9px 4px;
  }

  .connects-stat strong {
    font-size: 1.3rem;
  }

  .connects-stat span {
    font-size: 0.46rem;
  }

  .connects-hero .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .connects-hero .hero-actions .button {
    width: 100%;
  }
}
/* =========================================================
   SETTINGS — COMPACT TWO-LINE HERO TITLE
   Your Account.
   Your Preferences.
   ========================================================= */

.sjc-settings-hero-copy #settingsTitle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 16px;
  color: #ffffff;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 950;
  line-height: 0.96;
  letter-spacing: -0.055em;
  text-align: left;
  text-wrap: nowrap;
}

.sjc-settings-hero-copy #settingsTitle span {
  display: block;
  width: 100%;
}

.sjc-settings-hero-copy #settingsTitle span:last-child {
  margin-top: 5px;
  background: linear-gradient(
    100deg,
    #45e8ff 0%,
    #82baff 42%,
    #a884ff 72%,
    #ef73d8 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@media (max-width: 760px) {
  .sjc-settings-hero-copy #settingsTitle {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1;
  }
}

@media (max-width: 430px) {
  .sjc-settings-hero-copy #settingsTitle {
    font-size: clamp(1.8rem, 8.7vw, 2.45rem);
    letter-spacing: -0.04em;
  }
}

/* =========================================================
   ABOUT — COMPACT TWO-LINE HERO TITLE
   One Community.
   Every Connection.
   ========================================================= */

.about-hero h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 20px;
  color: #ffffff;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-align: left;
  text-wrap: nowrap;
}

.about-hero h1 span {
  display: block;
  width: 100%;
}

.about-hero h1 span:last-child {
  margin-top: 5px;
  background:
    linear-gradient(
      100deg,
      #45e8ff 0%,
      #82baff 38%,
      #9d7cff 70%,
      #ef73d8 100%
    );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter:
    drop-shadow(
      0 0 14px rgba(69, 232, 255, 0.14)
    );
}

@media (max-width: 980px) {
  .about-hero h1 {
    align-items: center;
    margin-inline: auto;
    font-size: clamp(2.2rem, 6.8vw, 3.45rem);
    text-align: center;
  }

  .about-hero h1 span {
    text-align: center;
  }
}

@media (max-width: 720px) {
  .about-hero h1 {
    font-size: clamp(2rem, 9.5vw, 2.9rem);
    line-height: 1;
    letter-spacing: -0.045em;
  }
}

@media (max-width: 430px) {
  .about-hero h1 {
    font-size: clamp(1.82rem, 8.9vw, 2.42rem);
  }
}
/* =========================================================
   DISCOVER — COMPACT SINGLE-LINE HERO TITLE
   Explore Smooth Jazz
   ========================================================= */

.discover-hero h1,
.discover-page h1#discoverTitle {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 18px;
  color: #ffffff;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.05em;
  text-align: left;
  white-space: nowrap;
}

.discover-hero h1 span,
.discover-page h1#discoverTitle span {
  display: inline;
  background:
    linear-gradient(
      100deg,
      #45e8ff 0%,
      #83baff 42%,
      #9e7cff 72%,
      #ef73d8 100%
    );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@media (max-width: 980px) {
  .discover-hero h1,
  .discover-page h1#discoverTitle {
    font-size: clamp(2.1rem, 6.8vw, 3.3rem);
    text-align: center;
  }
}

@media (max-width: 620px) {
  .discover-hero h1,
  .discover-page h1#discoverTitle {
    font-size: clamp(1.75rem, 8.2vw, 2.55rem);
    letter-spacing: -0.04em;
  }
}

@media (max-width: 390px) {
  .discover-hero h1,
  .discover-page h1#discoverTitle {
    font-size: clamp(1.55rem, 7.7vw, 2.15rem);
  }
}
/* =========================================================
   NOTIFICATIONS — COMPACT TWO-LINE HERO TITLE
   Your Updates.
   All in One Place.
   ========================================================= */

.notifications-hero h1,
.notifications-page h1#notificationsTitle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 18px;
  color: #ffffff;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: -0.052em;
  text-align: left;
  text-wrap: nowrap;
}

.notifications-hero h1 span,
.notifications-page h1#notificationsTitle span {
  display: block;
  width: 100%;
}

.notifications-hero h1 span:last-child,
.notifications-page h1#notificationsTitle span:last-child {
  margin-top: 5px;
  background:
    linear-gradient(
      100deg,
      #45e8ff 0%,
      #83baff 40%,
      #a27fff 72%,
      #ef73d8 100%
    );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter:
    drop-shadow(
      0 0 14px rgba(69, 232, 255, 0.14)
    );
}

@media (max-width: 980px) {
  .notifications-hero h1,
  .notifications-page h1#notificationsTitle {
    align-items: center;
    margin-inline: auto;
    font-size: clamp(2.1rem, 6.8vw, 3.35rem);
    text-align: center;
  }

  .notifications-hero h1 span,
  .notifications-page h1#notificationsTitle span {
    text-align: center;
  }
}

@media (max-width: 720px) {
  .notifications-hero h1,
  .notifications-page h1#notificationsTitle {
    font-size: clamp(1.95rem, 9.3vw, 2.85rem);
    line-height: 1;
    letter-spacing: -0.044em;
  }
}

@media (max-width: 430px) {
  .notifications-hero h1,
  .notifications-page h1#notificationsTitle {
    font-size: clamp(1.78rem, 8.8vw, 2.38rem);
  }
}

/* =========================================================
   PLATFORM TOUR — TRUE FULL-CARD THUMBNAIL
   Removes platform-card layout and image size restrictions
   ========================================================= */

.sidebar-right .platform-card.platform-tour-card {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.sidebar-right
.platform-tour-card
.platform-tour-card-button {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

/* Override the original .platform-card img 58px × 58px rule */
.sidebar-right
.platform-card.platform-tour-card
img.platform-tour-thumbnail {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(68, 224, 255, 0.26) !important;
  border-radius: 0 !important;

  object-fit: cover !important;
  object-position: center !important;

  background: #030a18;
  box-shadow: none !important;
}

.sidebar-right .platform-tour-card-copy {
  display: grid !important;
  width: 100% !important;
  padding: 17px 18px 19px !important;
  margin: 0 !important;
}

.sidebar-right .platform-tour-card-copy strong {
  display: block;
  margin: 0;
  color: #ffd36a;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.25;
}

.sidebar-right
.platform-tour-card-copy
> span:not(.platform-tour-watch) {
  display: block;
  margin-top: 3px;
  color: rgba(224, 235, 255, 0.78);
  font-size: 0.84rem;
  line-height: 1.4;
}

.sidebar-right .platform-tour-watch {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-top: 13px;
  color: #dce8ff;
  font-size: 0.79rem;
  font-weight: 900;
}

.sidebar-right .platform-tour-play-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  padding-left: 2px;
  border-radius: 50%;
  color: #03111b;
  font-size: 0.72rem;
  background:
    linear-gradient(
      135deg,
      #49eaff,
      #8d79ff
    );
  box-shadow:
    0 0 18px rgba(73, 234, 255, 0.3);
}

.sidebar-right
.platform-tour-card-button:hover
.platform-tour-thumbnail,
.sidebar-right
.platform-tour-card-button:focus-visible
.platform-tour-thumbnail {
  filter: brightness(1.08);
}

.sidebar-right
.platform-tour-card-button:focus-visible {
  outline: 3px solid rgba(68, 224, 255, 0.78);
  outline-offset: -3px;
}
/* =========================================================
   PLATFORM TOUR — CENTERED VIDEO MODAL
   Fixes oversized inline video and full-page layout
   ========================================================= */

html.sjc-platform-tour-open,
body.sjc-platform-tour-open {
  overflow: hidden !important;
}

/* Full-screen modal layer */
.platform-tour-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;

  display: grid !important;
  place-items: center !important;

  width: 100vw !important;
  height: 100dvh !important;
  padding: clamp(14px, 3vw, 34px) !important;

  overflow: hidden !important;
  isolation: isolate;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.platform-tour-modal[hidden] {
  display: none !important;
}

.platform-tour-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Dark full-screen backdrop */
.platform-tour-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: rgba(0, 3, 12, 0.88) !important;
  cursor: pointer;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Centered dialog */
.platform-tour-dialog {
  position: relative !important;
  z-index: 1 !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);

  width: min(100%, 1080px) !important;
  max-width: 1080px !important;
  max-height: min(92dvh, 820px) !important;
  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border: 1px solid rgba(74, 224, 255, 0.34) !important;
  border-radius: clamp(18px, 2vw, 28px) !important;

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(112, 91, 255, 0.18),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(10, 24, 50, 0.99),
      rgba(3, 9, 23, 0.995)
    ) !important;

  box-shadow:
    0 38px 100px rgba(0, 0, 0, 0.72),
    0 0 50px rgba(63, 219, 255, 0.12);

  transform: translateY(18px) scale(0.98);
  opacity: 0;

  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.platform-tour-modal.is-open .platform-tour-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Header */
.platform-tour-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;

  min-height: 92px;
  padding:
    clamp(18px, 2.6vw, 28px)
    clamp(20px, 3vw, 34px) !important;

  border-bottom: 1px solid rgba(74, 224, 255, 0.16);
  background: rgba(5, 13, 30, 0.88);
}

.platform-tour-header > div {
  min-width: 0;
}

.platform-tour-header .eyebrow {
  margin: 0 0 6px;
  color: #4beaff;
}

.platform-tour-header h2 {
  margin: 0 !important;
  color: #ffffff;
  font-size: clamp(1.35rem, 2.5vw, 2.15rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

/* Close button */
.platform-tour-close {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto;

  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;

  border: 1px solid rgba(74, 224, 255, 0.26) !important;
  border-radius: 14px !important;

  color: #ffffff !important;
  font-size: 1.8rem;
  line-height: 1;

  background:
    linear-gradient(
      145deg,
      rgba(74, 224, 255, 0.11),
      rgba(143, 112, 255, 0.09)
    ) !important;

  cursor: pointer;
}

.platform-tour-close:hover,
.platform-tour-close:focus-visible {
  border-color: rgba(74, 224, 255, 0.58) !important;
  background:
    linear-gradient(
      145deg,
      rgba(74, 224, 255, 0.2),
      rgba(143, 112, 255, 0.15)
    ) !important;
}

/* Video area */
.platform-tour-video-frame {
  position: relative !important;
  display: grid !important;
  place-items: center !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(12px, 2vw, 20px) !important;

  overflow: hidden !important;
  background: #000814;
}

/* Video itself */
.platform-tour-video-frame video {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;
  max-height: calc(92dvh - 145px) !important;

  aspect-ratio: 16 / 9;
  margin: 0 !important;

  border: 0 !important;
  border-radius: clamp(12px, 1.5vw, 20px) !important;

  object-fit: contain !important;
  background: #000 !important;

  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.48);
}

/* Tablet */
@media (max-width: 900px) {
  .platform-tour-dialog {
    width: min(100%, 820px) !important;
  }

  .platform-tour-header {
    min-height: 82px;
  }
}

/* Mobile */
@media (max-width: 620px) {
  .platform-tour-modal {
    padding: 10px !important;
  }

  .platform-tour-dialog {
    width: 100% !important;
    max-height: 94dvh !important;
    border-radius: 18px !important;
  }

  .platform-tour-header {
    align-items: flex-start !important;
    min-height: auto;
    padding: 16px !important;
  }

  .platform-tour-header h2 {
    font-size: 1.3rem;
  }

  .platform-tour-close {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  .platform-tour-video-frame {
    padding: 8px !important;
  }

  .platform-tour-video-frame video {
    max-height: calc(94dvh - 110px) !important;
    border-radius: 12px !important;
  }
}
/* =========================================================
   PLATFORM TOUR — PREMIUM SIGNED-IN MEMBER BUTTON
   ========================================================= */

.platform-tour-button-member {
  position: relative;
  isolation: isolate;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  width: 100%;
  min-height: 52px;
  padding: 13px 20px;

  overflow: hidden;

  border: 1px solid rgba(96, 232, 255, 0.58);
  border-radius: 16px;

  color: #ffffff;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.015em;
  text-align: center;
  text-decoration: none;

  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(88, 235, 255, 0.2),
      transparent 38%
    ),
    radial-gradient(
      circle at 88% 100%,
      rgba(163, 112, 255, 0.2),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #0d2b4d 0%,
      #172f63 48%,
      #2c245f 100%
    );

  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.3),
    0 6px 18px rgba(32, 178, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.platform-tour-button-member::before {
  content: "";

  position: absolute;
  z-index: -1;
  inset: 1px;

  border-radius: 14px;

  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.1),
      transparent 34%,
      transparent 68%,
      rgba(123, 96, 255, 0.08)
    );

  pointer-events: none;
}

.platform-tour-button-member::after {
  content: "";

  position: absolute;
  top: -65%;
  left: -40%;

  width: 42%;
  height: 230%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.34),
      transparent
    );

  transform: rotate(18deg) translateX(-220%);
  opacity: 0;

  pointer-events: none;

  transition:
    transform 520ms ease,
    opacity 180ms ease;
}

.platform-tour-button-member > span {
  position: relative;

  display: grid;
  place-items: center;
  flex: 0 0 auto;

  width: 30px;
  height: 30px;
  padding-left: 2px;

  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 999px;

  color: #03141f;
  font-size: 0.72rem;
  line-height: 1;

  background:
    linear-gradient(
      135deg,
      #71f2ff 0%,
      #59d7ff 42%,
      #b48aff 100%
    );

  box-shadow:
    0 0 0 4px rgba(91, 228, 255, 0.08),
    0 0 20px rgba(91, 228, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.platform-tour-button-member:hover {
  transform: translateY(-3px);

  border-color: rgba(112, 241, 255, 0.9);

  filter: brightness(1.08) saturate(1.08);

  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.36),
    0 8px 24px rgba(55, 196, 255, 0.2),
    0 0 30px rgba(113, 236, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.platform-tour-button-member:hover::after {
  transform: rotate(18deg) translateX(420%);
  opacity: 1;
}

.platform-tour-button-member:hover > span {
  transform: scale(1.07) rotate(-4deg);

  box-shadow:
    0 0 0 5px rgba(91, 228, 255, 0.1),
    0 0 26px rgba(91, 228, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.platform-tour-button-member:active {
  transform: translateY(-1px) scale(0.992);

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.3),
    0 4px 14px rgba(55, 196, 255, 0.14),
    inset 0 2px 6px rgba(0, 0, 0, 0.16);
}

.platform-tour-button-member:focus-visible {
  outline: 3px solid rgba(117, 238, 255, 0.95);
  outline-offset: 4px;

  box-shadow:
    0 0 0 7px rgba(82, 232, 255, 0.12),
    0 18px 40px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(82, 232, 255, 0.2);
}

.platform-tour-button-member:disabled,
.platform-tour-button-member[aria-disabled="true"] {
  transform: none;

  opacity: 0.56;
  filter: grayscale(0.15);

  cursor: not-allowed;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.platform-tour-button-member[hidden] {
  display: none !important;
}

/* Prevent older global button rules from overriding the premium design */
.sidebar-right .platform-tour-button-member,
.right-sidebar .platform-tour-button-member,
aside .platform-tour-button-member {
  color: #ffffff !important;

  border-color: rgba(96, 232, 255, 0.58) !important;

  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(88, 235, 255, 0.2),
      transparent 38%
    ),
    radial-gradient(
      circle at 88% 100%,
      rgba(163, 112, 255, 0.2),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #0d2b4d 0%,
      #172f63 48%,
      #2c245f 100%
    ) !important;
}

/* Dark theme refinement */
html[data-theme="dark"] .platform-tour-button-member,
body[data-theme="dark"] .platform-tour-button-member {
  border-color: rgba(109, 239, 255, 0.64);

  background:
    radial-gradient(
      circle at 16% 0%,
      rgba(84, 237, 255, 0.22),
      transparent 40%
    ),
    radial-gradient(
      circle at 92% 100%,
      rgba(162, 108, 255, 0.23),
      transparent 44%
    ),
    linear-gradient(
      135deg,
      #09213e 0%,
      #122850 48%,
      #271f55 100%
    );
}

/* Compact tablet and mobile presentation */
@media (max-width: 980px) {
  .platform-tour-button-member {
    min-height: 48px;
    padding: 12px 17px;

    border-radius: 14px;

    font-size: 0.9rem;
  }

  .platform-tour-button-member::before {
    border-radius: 12px;
  }

  .platform-tour-button-member > span {
    width: 28px;
    height: 28px;
  }
}

/* Touch devices should not retain hover movement */
@media (hover: none) {
  .platform-tour-button-member:hover {
    transform: none;
    filter: none;
  }

  .platform-tour-button-member:hover::after {
    opacity: 0;
    transform: rotate(18deg) translateX(-220%);
  }

  .platform-tour-button-member:hover > span {
    transform: none;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .platform-tour-button-member,
  .platform-tour-button-member::after,
  .platform-tour-button-member > span {
    transition: none;
  }

  .platform-tour-button-member:hover,
  .platform-tour-button-member:active,
  .platform-tour-button-member:hover > span {
    transform: none;
  }

  .platform-tour-button-member::after {
    display: none;
  }
}
/* =========================================================
   MEMBER PLATFORM TOUR — FINAL 12/10 REBUILD
   Paste after all previous platform-tour-button CSS
========================================================= */

#rightSidebar
button.platform-tour-button.platform-tour-button-member.member-only {
  position: relative !important;
  z-index: 2 !important;

  display: grid !important;
  grid-template-columns: 34px auto !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 11px !important;

  box-sizing: border-box !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;

  margin: 18px 0 10px !important;
  padding: 11px 18px !important;

  overflow: hidden !important;
  isolation: isolate !important;

  border: 1px solid rgba(100, 226, 255, 0.62) !important;
  border-radius: 18px !important;

  background:
    linear-gradient(
      135deg,
      #6c5cff 0%,
      #347ff0 46%,
      #22c8dc 100%
    ) !important;

  color: #ffffff !important;

  font-family: inherit !important;
  font-size: 0.94rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.015em !important;
  text-align: center !important;
  text-decoration: none !important;

  cursor: pointer !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  opacity: 1 !important;
  visibility: visible !important;

  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.36),
    0 8px 24px rgba(51, 116, 238, 0.25),
    0 0 24px rgba(34, 200, 220, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;

  transform: none !important;
  filter: none !important;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    filter 180ms ease !important;
}

/* Preserve member-only visibility behavior */
#rightSidebar
button.platform-tour-button.platform-tour-button-member.member-only[hidden] {
  display: none !important;
}

#rightSidebar
button.platform-tour-button.platform-tour-button-member.member-only:not([hidden]) {
  display: grid !important;
}

/* Remove conflicting decorative layers from earlier overrides */
#rightSidebar
button.platform-tour-button.platform-tour-button-member.member-only::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -2 !important;

  border-radius: 16px !important;

  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.04) 42%,
      transparent 68%
    ) !important;

  pointer-events: none !important;
}

#rightSidebar
button.platform-tour-button.platform-tour-button-member.member-only::after {
  content: "" !important;
  position: absolute !important;
  top: -80% !important;
  left: -45% !important;
  z-index: -1 !important;

  width: 38% !important;
  height: 260% !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.34),
      transparent
    ) !important;

  opacity: 0 !important;
  transform: rotate(22deg) !important;
  pointer-events: none !important;

  transition:
    left 500ms ease,
    opacity 180ms ease !important;
}

/* Play icon */
#rightSidebar
button.platform-tour-button.platform-tour-button-member.member-only
  > span:first-child {
  position: static !important;

  display: grid !important;
  place-items: center !important;

  box-sizing: border-box !important;

  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;

  margin: 0 !important;
  padding: 0 0 0 2px !important;

  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  border-radius: 50% !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.30),
      rgba(255, 255, 255, 0.12)
    ) !important;

  color: #ffffff !important;

  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;

  opacity: 1 !important;
  transform: none !important;

  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

/* Button label */
#rightSidebar
button.platform-tour-button.platform-tour-button-member.member-only
  > span:last-child {
  position: static !important;

  display: block !important;

  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-family: inherit !important;
  font-size: 0.94rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.015em !important;
  text-align: left !important;
  white-space: nowrap !important;

  opacity: 1 !important;
  transform: none !important;
}

/* Premium hover */
#rightSidebar
button.platform-tour-button.platform-tour-button-member.member-only:hover {
  transform: translateY(-2px) !important;

  border-color: rgba(184, 249, 255, 0.94) !important;

  filter:
    brightness(1.07)
    saturate(1.08) !important;

  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.42),
    0 10px 30px rgba(60, 116, 245, 0.32),
    0 0 30px rgba(34, 200, 220, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
}

#rightSidebar
button.platform-tour-button.platform-tour-button-member.member-only:hover::after {
  left: 112% !important;
  opacity: 1 !important;
}

/* Pressed state */
#rightSidebar
button.platform-tour-button.platform-tour-button-member.member-only:active {
  transform: translateY(0) scale(0.985) !important;

  box-shadow:
    0 9px 20px rgba(0, 0, 0, 0.30),
    inset 0 2px 5px rgba(0, 0, 0, 0.20) !important;
}

/* Keyboard accessibility */
#rightSidebar
button.platform-tour-button.platform-tour-button-member.member-only:focus-visible {
  outline: 3px solid #9bf5ff !important;
  outline-offset: 4px !important;

  box-shadow:
    0 0 0 6px rgba(64, 213, 235, 0.18),
    0 18px 36px rgba(0, 0, 0, 0.40) !important;
}

/* Keep the button aligned inside the sidebar */
#rightSidebar .sidebar-scroll
  > button.platform-tour-button.platform-tour-button-member.member-only {
  flex: 0 0 auto !important;
  align-self: stretch !important;
}

/* Light theme */
html[data-theme="light"]
  #rightSidebar
  button.platform-tour-button.platform-tour-button-member.member-only {
  border-color: rgba(40, 132, 190, 0.42) !important;

  background:
    linear-gradient(
      135deg,
      #675cff 0%,
      #3684ed 48%,
      #20becf 100%
    ) !important;

  color: #ffffff !important;

  box-shadow:
    0 14px 28px rgba(41, 72, 122, 0.23),
    0 8px 22px rgba(51, 126, 226, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

/* Smaller sidebar widths */
@media (max-width: 1280px) {
  #rightSidebar
  button.platform-tour-button.platform-tour-button-member.member-only {
    grid-template-columns: 32px auto !important;
    column-gap: 9px !important;

    min-height: 54px !important;
    padding: 10px 14px !important;

    border-radius: 16px !important;
  }

  #rightSidebar
  button.platform-tour-button.platform-tour-button-member.member-only
    > span:first-child {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  #rightSidebar
  button.platform-tour-button.platform-tour-button-member.member-only
    > span:last-child {
    font-size: 0.88rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #rightSidebar
  button.platform-tour-button.platform-tour-button-member.member-only,
  #rightSidebar
  button.platform-tour-button.platform-tour-button-member.member-only::after {
    transition: none !important;
  }

  #rightSidebar
  button.platform-tour-button.platform-tour-button-member.member-only:hover {
    transform: none !important;
  }

  #rightSidebar
  button.platform-tour-button.platform-tour-button-member.member-only::after {
    display: none !important;
  }
}
/* =========================================================
   MEMBER PLATFORM TOUR — TEXT CONTAINER FIX ONLY
========================================================= */

#rightSidebar
button.platform-tour-button.platform-tour-button-member.member-only
  > span:last-child {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 34px !important;

  margin: 0 !important;
  padding: 0 2px !important;

  overflow: visible !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  color: #ffffff !important;

  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.015em !important;
  text-align: left !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  word-break: normal !important;

  opacity: 1 !important;
  visibility: visible !important;

  transform: none !important;
  filter: none !important;
}

/* Prevent inherited span rules from centering or stacking the label */
#rightSidebar
button.platform-tour-button.platform-tour-button-member.member-only
  > span:last-child::before,
#rightSidebar
button.platform-tour-button.platform-tour-button-member.member-only
  > span:last-child::after {
  content: none !important;
  display: none !important;
}

/* Keep the label vertically centered beside the play icon */
#rightSidebar
button.platform-tour-button.platform-tour-button-member.member-only {
  align-items: center !important;
}

@media (max-width: 1280px) {
  #rightSidebar
  button.platform-tour-button.platform-tour-button-member.member-only
    > span:last-child {
    min-height: 32px !important;
    font-size: 0.9rem !important;
  }
}
/* =====================================================================
   SMOOTH JAZZ CONNECT
   SUPREME MOBILE + TABLET RESPONSIVE SYSTEM
   Version: 3.3.159

   Purpose:
   - Preserve the approved desktop presentation
   - Convert both sidebars into reliable tablet/mobile drawers
   - Correct iPhone/iPad safe-area, viewport, overflow and alignment issues
   - Keep every route, card, form, modal and media element inside the viewport
   - Provide app-ready structure for future iOS and Android shells
===================================================================== */

/* Accessibility alias used by route partials. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Universal overflow protection for user-generated and route content. */
html {
  min-width: 320px;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
#appShell,
.main-column,
.route-outlet,
[data-partial-root],
.page-stack,
.content-card,
.side-card,
.post-card,
.composer {
  min-width: 0;
  max-width: 100%;
}

p,
li,
blockquote,
pre,
code,
a,
button,
label,
input,
textarea,
select,
strong,
span {
  overflow-wrap: anywhere;
}

input,
textarea,
select,
button {
  max-width: 100%;
}

video,
audio,
iframe,
canvas,
svg,
img {
  max-width: 100%;
}

/* =========================================================
   TABLET / COMPACT DESKTOP DRAWER MODE
========================================================= */

@media (max-width: 1180px) {
  :root {
    --sjc-mobile-header-height: 72px;
    --sjc-page-gutter: clamp(16px, 3vw, 28px);
    --sjc-drawer-width: min(82vw, 420px);
  }

  html,
  body {
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
  }

  body {
    overscroll-behavior: none;
    touch-action: manipulation;
  }

  .app-shell,
  #appShell {
    position: relative;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    margin: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  .main-column,
  #mainContent {
    position: relative;
    z-index: 1;
    width: 100% !important;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: auto;
  }

  .mobile-header {
    position: sticky !important;
    top: 0;
    z-index: 80 !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    width: 100%;
    min-height: var(--sjc-mobile-header-height);
    padding:
      max(10px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      10px
      max(14px, env(safe-area-inset-left));
    background: rgba(3, 8, 22, 0.985) !important;
    border-bottom: 1px solid rgba(68, 212, 255, 0.2) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  }

  .mobile-header .icon-button,
  .mobile-menu-button,
  .mobile-community-button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 15px !important;
  }

  .mobile-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  .mobile-brand img {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain;
  }

  .sidebar,
  #leftSidebar,
  #rightSidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 120 !important;
    width: var(--sjc-drawer-width) !important;
    max-width: calc(100vw - 24px) !important;
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
      visibility 0s linear 240ms !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.56) !important;
  }

  .sidebar-left,
  #leftSidebar {
    left: 0 !important;
    right: auto !important;
    transform: translate3d(-104%, 0, 0) !important;
    border-right: 1px solid rgba(74, 218, 255, 0.26) !important;
  }

  .sidebar-right,
  #rightSidebar {
    right: 0 !important;
    left: auto !important;
    transform: translate3d(104%, 0, 0) !important;
    border-left: 1px solid rgba(74, 218, 255, 0.26) !important;
  }

  .sidebar.is-open,
  #leftSidebar.is-open,
  #rightSidebar.is-open {
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) !important;
    transition-delay: 0s !important;
  }

  /* Right drawer remains above the left drawer if both are accidentally open. */
  #rightSidebar.is-open {
    z-index: 125 !important;
  }

  body:has(#rightSidebar.is-open) #leftSidebar,
  body:has(#leftSidebar.is-open) #rightSidebar {
    pointer-events: none;
  }

  .sidebar-scroll {
    gap: 16px !important;
    width: 100%;
    height: 100%;
    padding:
      max(18px, env(safe-area-inset-top))
      18px
      max(24px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 110 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    border: 0 !important;
    background: rgba(0, 3, 12, 0.82) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  .route-progress {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 200;
  }

  .route-outlet,
  #routeOutlet {
    width: 100% !important;
    max-width: 1120px !important;
    min-height: calc(100dvh - var(--sjc-mobile-header-height));
    margin: 0 auto !important;
    padding:
      clamp(20px, 3vw, 30px)
      var(--sjc-page-gutter)
      calc(88px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  .page-stack,
  [data-partial-root] {
    width: 100% !important;
    gap: clamp(16px, 2.5vw, 24px) !important;
    margin: 0 !important;
    padding-inline: 0 !important;
  }

  .hero-card,
  .page-hero,
  [class*="-hero"].content-card {
    max-width: 100%;
    border-radius: clamp(20px, 3vw, 28px) !important;
  }

  .grid-3,
  .dashboard-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .global-search {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 10px !important;
  }

  .global-search input,
  .global-search button {
    min-height: 48px !important;
  }

  .modal-backdrop,
  .sjc-modal-backdrop {
    align-items: center;
    padding:
      max(18px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left)) !important;
  }

  .modal-card,
  .sjc-modal-dialog,
  .platform-tour-dialog {
    max-width: min(680px, 100%) !important;
    max-height: calc(100dvh - 36px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .toast-region {
    right: max(16px, env(safe-area-inset-right)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    width: min(420px, calc(100vw - 32px)) !important;
  }
}

/* =========================================================
   PHONE / PORTRAIT MOBILE
========================================================= */

@media (max-width: 700px) {
  :root {
    --sjc-mobile-header-height: 68px;
    --sjc-page-gutter: clamp(12px, 4vw, 18px);
  }

  .mobile-header {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    min-height: var(--sjc-mobile-header-height);
    padding:
      max(8px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      8px
      max(12px, env(safe-area-inset-left));
  }

  .mobile-header .icon-button,
  .mobile-menu-button,
  .mobile-community-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .mobile-brand img {
    width: 48px !important;
    height: 48px !important;
  }

  #leftSidebar,
  .sidebar-left {
    width: min(92vw, 360px) !important;
    max-width: calc(100vw - 18px) !important;
  }

  /* The community panel must fully cover the phone viewport. */
  #rightSidebar,
  .sidebar-right {
    width: 100vw !important;
    max-width: 100vw !important;
    border-left: 0 !important;
  }

  #rightSidebar .sidebar-scroll {
    padding:
      max(16px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(28px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left)) !important;
  }

  .route-outlet,
  #routeOutlet {
    padding:
      14px
      var(--sjc-page-gutter)
      calc(82px + env(safe-area-inset-bottom)) !important;
  }

  .page-stack,
  [data-partial-root] {
    gap: 14px !important;
  }

  .content-card,
  .composer,
  .post-card,
  .side-card,
  .identity-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: clamp(16px, 4.4vw, 20px) !important;
    border-radius: 20px !important;
  }

  .hero-card,
  .page-hero,
  [class*="-hero"].content-card {
    min-height: auto !important;
    padding: clamp(22px, 6vw, 30px) clamp(16px, 5vw, 22px) !important;
    text-align: center !important;
  }

  .hero-card h1,
  .page-hero h1,
  [class*="-hero"] h1 {
    max-width: 100% !important;
    margin-inline: auto !important;
    font-size: clamp(1.9rem, 9.2vw, 3rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    text-align: center !important;
    text-wrap: balance !important;
    white-space: normal !important;
  }

  .hero-card p,
  .page-hero p,
  [class*="-hero"] p {
    max-width: 100% !important;
    margin-inline: auto !important;
    font-size: 0.96rem !important;
    line-height: 1.62 !important;
    text-align: center !important;
  }

  .hero-actions,
  [class*="-hero"] .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .hero-actions .button,
  [class*="-hero"] .hero-actions .button {
    width: 100% !important;
  }

  .grid-2,
  .grid-3,
  .dashboard-metrics-grid,
  .dashboard-management-grid,
  .profile-grid,
  .settings-grid,
  .discover-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .section-heading,
  .dashboard-section-heading,
  .dashboard-section-header,
  .notifications-command-header,
  .chat-sidebar-header,
  .chat-workspace-header {
    flex-wrap: wrap;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .section-heading > *,
  .dashboard-section-heading > *,
  .dashboard-section-header > * {
    min-width: 0;
  }

  .profile-card {
    display: grid !important;
    justify-items: center;
    text-align: center;
  }

  .profile-card img {
    width: 88px !important;
    height: 88px !important;
  }

  .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .stat {
    min-width: 0;
    padding: 11px 6px !important;
  }

  .composer-actions,
  .dashboard-composer-actions,
  .post-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .composer-tools,
  .dashboard-composer-tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 9px !important;
  }

  .tool-button,
  .dashboard-upload-button,
  .dashboard-publish-button {
    min-width: 0 !important;
    min-height: 46px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .dashboard-publish-button,
  .composer-actions > .button,
  .dashboard-composer-actions > .button {
    width: 100% !important;
  }

  textarea,
  .composer textarea,
  #postText {
    min-height: 132px;
    padding: 14px !important;
    font-size: 16px !important;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .global-search {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .global-search input {
    min-width: 0 !important;
    padding-inline: 12px !important;
  }

  .global-search button {
    min-width: 88px !important;
    padding-inline: 14px !important;
  }

  .side-card .section-heading {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }

  .side-list,
  #trendingList,
  #suggestionsList {
    width: 100%;
    min-width: 0;
  }

  #trendingList > *,
  #suggestionsList > *,
  .side-list > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .post-header {
    align-items: flex-start !important;
  }

  .post-author {
    min-width: 0;
  }

  .post-author strong,
  .post-author span {
    white-space: normal !important;
  }

  .post-body {
    font-size: 0.96rem;
    line-height: 1.68;
  }

  .post-actions button {
    width: 100% !important;
    flex: none !important;
  }

  .modal-backdrop,
  .sjc-modal-backdrop {
    align-items: end !important;
    padding:
      max(12px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left)) !important;
  }

  .modal-card,
  .sjc-modal-dialog,
  .platform-tour-dialog {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }

  .platform-tour-video-frame video {
    width: 100% !important;
    max-height: 64dvh !important;
  }

  .toast-region {
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    width: auto !important;
  }

  .toast {
    width: 100%;
    padding: 13px 14px !important;
  }

  /* Mobile chat becomes one clean vertical workspace. */
  .chat-page {
    width: 100% !important;
    padding: 0 !important;
    gap: 14px !important;
  }

  .chat-command-center {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  .chat-sidebar {
    width: 100% !important;
    max-height: 360px !important;
    border-right: 0 !important;
  }

  .chat-workspace {
    width: 100% !important;
    min-height: 560px !important;
  }

  .chat-message-list {
    min-height: 340px !important;
    padding: 18px 12px !important;
  }

  .chat-message-bubble {
    max-width: 92% !important;
  }

  .chat-composer-row {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .chat-send-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  /* Dashboard identity and composer stack without clipping. */
  .dashboard-composer-identity {
    width: 100%;
    justify-content: flex-start;
  }

  .dashboard-file-preview-content {
    grid-template-columns: 1fr !important;
  }

  .dashboard-file-preview-media,
  .dashboard-file-preview-gallery,
  .dashboard-file-preview-single {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Notification controls wrap cleanly. */
  .notifications-header-actions,
  .notifications-filter-nav {
    width: 100%;
  }

  .notifications-filter-nav {
    display: flex !important;
    gap: 8px !important;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .notifications-filter-nav::-webkit-scrollbar {
    display: none;
  }

  .notifications-filter-button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* =========================================================
   SMALL PHONE HARDENING
========================================================= */

@media (max-width: 430px) {
  :root {
    --sjc-page-gutter: 12px;
  }

  .route-outlet,
  #routeOutlet {
    padding-top: 12px !important;
  }

  .content-card,
  .composer,
  .post-card,
  .side-card,
  .identity-card {
    padding: 15px !important;
    border-radius: 18px !important;
  }

  .hero-card,
  .page-hero,
  [class*="-hero"].content-card {
    padding: 22px 15px !important;
  }

  .hero-card h1,
  .page-hero h1,
  [class*="-hero"] h1 {
    font-size: clamp(1.72rem, 9vw, 2.45rem) !important;
  }

  .composer-tools,
  .dashboard-composer-tools {
    grid-template-columns: 1fr !important;
  }

  .global-search {
    grid-template-columns: minmax(0, 1fr) 86px !important;
  }

  .global-search button {
    min-width: 0 !important;
    padding-inline: 10px !important;
  }

  .stat-grid {
    grid-template-columns: 1fr !important;
  }

  .post-header img,
  .identity-avatar {
    flex: 0 0 auto;
  }

  .chat-workspace-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .chat-workspace-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* =========================================================
   LANDSCAPE PHONE / SHORT VIEWPORT
========================================================= */

@media (max-width: 900px) and (max-height: 540px) and (orientation: landscape) {
  :root {
    --sjc-mobile-header-height: 58px;
  }

  .mobile-header {
    min-height: 58px;
    padding-block: 5px;
  }

  .mobile-header .icon-button,
  .mobile-menu-button,
  .mobile-community-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  .mobile-brand img {
    width: 44px !important;
    height: 44px !important;
  }

  .sidebar-scroll {
    padding-top: max(10px, env(safe-area-inset-top)) !important;
  }

  .route-outlet,
  #routeOutlet {
    padding-top: 12px !important;
  }
}

/* =========================================================
   TABLET PORTRAIT POLISH
========================================================= */

@media (min-width: 701px) and (max-width: 1180px) {
  .route-outlet,
  #routeOutlet {
    max-width: 980px !important;
  }

  .content-card,
  .composer,
  .post-card {
    border-radius: 24px;
  }

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

  .chat-command-center {
    grid-template-columns: minmax(260px, 0.38fr) minmax(0, 0.62fr) !important;
  }
}

/* =========================================================
   TOUCH + APP-SHELL QUALITY
========================================================= */

@media (hover: none) and (pointer: coarse) {
  a,
  button,
  input,
  select,
  textarea,
  label[for] {
    -webkit-tap-highlight-color: transparent;
  }

  .button,
  .tool-button,
  .nav-link,
  .icon-button,
  .post-actions button {
    min-height: 44px;
  }

  .button:hover,
  .tool-button:hover,
  .nav-link:hover,
  .icon-button:hover,
  .post-actions button:hover {
    transform: none;
  }
}

/* Standalone/PWA safe-area support for future iOS/Android packaging. */
@media (display-mode: standalone) {
  .mobile-header {
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .route-outlet,
  #routeOutlet {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .sidebar-scroll {
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }
}

/* =====================================================================
   SMOOTH JAZZ CONNECT
   MOBILE DRAWER EXIT + ROUTE HEIGHT CORRECTION
   Version: 3.3.159

   Fixes:
   - Keeps the active mobile drawer toggle accessible as a close control
   - Leaves a tappable backdrop edge beside the right community drawer
   - Prevents stale route scroll positions from exposing artificial blank space
   - Removes oversized mobile/tablet route minimum heights and bottom padding
   - Preserves the approved desktop layout above 1180px
===================================================================== */

@media (max-width: 1180px) {
  /* Do not force every route to remain a full viewport tall. Short pages
     now collapse to their actual content height, preventing long blank tails. */
  .route-outlet,
  #routeOutlet {
    min-height: 0 !important;
    height: auto !important;
    align-content: start !important;
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }

  .page-stack,
  [data-partial-root] {
    min-height: 0 !important;
    height: auto !important;
    align-content: start !important;
  }

  .main-column,
  #mainContent {
    scroll-padding-top: calc(var(--sjc-mobile-header-height, 72px) + 12px);
    scroll-padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

  /* Keep the header above open drawers so the same control that opened a
     panel remains available to close it. */
  .mobile-header {
    z-index: 140 !important;
  }

  body:has(#leftSidebar.is-open) #mobileMenuButton,
  body:has(#rightSidebar.is-open) #mobileRightButton {
    position: relative !important;
    z-index: 160 !important;
    border-color: rgba(115, 237, 255, 0.72) !important;
    background:
      linear-gradient(
        145deg,
        rgba(22, 160, 255, 0.36),
        rgba(116, 82, 255, 0.28)
      ) !important;
    color: #ffffff !important;
    box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.34),
      0 0 24px rgba(63, 218, 255, 0.18) !important;
  }

  /* Turn the active drawer button into a clear close affordance without
     requiring HTML or JavaScript changes. */
  body:has(#leftSidebar.is-open) #mobileMenuButton > span,
  body:has(#rightSidebar.is-open) #mobileRightButton > span {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  body:has(#leftSidebar.is-open) #mobileMenuButton > span::before,
  body:has(#rightSidebar.is-open) #mobileRightButton > span::before {
    content: "×" !important;
    color: #ffffff !important;
    font-size: 1.85rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  /* Drawers begin below the persistent mobile header so the close control
     remains visible and the first card is never hidden underneath it. */
  #leftSidebar,
  #rightSidebar,
  .sidebar-left,
  .sidebar-right {
    top: var(--sjc-mobile-header-height, 72px) !important;
    height: calc(100dvh - var(--sjc-mobile-header-height, 72px)) !important;
  }

  .mobile-backdrop:not([hidden]) {
    display: block !important;
    cursor: pointer !important;
  }
}

@media (max-width: 700px) {
  /* Preserve a visible 54px backdrop rail on phones. Tapping this exposed
     area closes the community drawer through the existing backdrop handler. */
  #rightSidebar,
  .sidebar-right {
    width: calc(100vw - 54px) !important;
    max-width: calc(100vw - 54px) !important;
  }

  #rightSidebar .sidebar-scroll,
  .sidebar-right .sidebar-scroll {
    padding-top: max(16px, env(safe-area-inset-top)) !important;
  }

  .route-outlet,
  #routeOutlet {
    padding-bottom: max(22px, env(safe-area-inset-bottom)) !important;
  }

  /* Reduce excessive vertical hero footprint on phones while preserving
     hierarchy and artwork. */
  .hero-card,
  .page-hero,
  [class*="-hero"].content-card {
    min-height: 0 !important;
  }

  .discover-hero,
  .home-hero,
  .dashboard-hero,
  .about-hero,
  .notifications-hero,
  .connects-hero,
  .settings-hero,
  .profile-hero,
  .chat-hero {
    height: auto !important;
    min-height: 0 !important;
    align-content: start !important;
  }

  .discover-hero-visual,
  .dashboard-hero-visual,
  .about-hero-visual,
  .notifications-hero-visual,
  .connects-hero-visual {
    min-height: 190px !important;
  }
}

@media (max-width: 430px) {
  #rightSidebar,
  .sidebar-right {
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
  }

  .route-outlet,
  #routeOutlet {
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }
}

/* Tablet portrait: keep a generous backdrop target and a compact route tail. */
@media (min-width: 701px) and (max-width: 1180px) {
  #rightSidebar,
  .sidebar-right {
    width: min(78vw, 440px) !important;
    max-width: calc(100vw - 72px) !important;
  }

  .route-outlet,
  #routeOutlet {
    padding-bottom: max(30px, env(safe-area-inset-bottom)) !important;
  }
}

/* Future standalone app shells should use content-sized route tails too. */
@media (display-mode: standalone) and (max-width: 1180px) {
  .route-outlet,
  #routeOutlet {
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }
}
/* =====================================================================
   CHAT REIMAGINED — MOBILE/TABLET EMPTY-STATE CLIPPING FIX
   Fixes:
   - "No Conversations Yet"
   - description paragraph
   - "Start a Conversation" button
   - iPhone / Android / iPad / WKWebView clipping
===================================================================== */

@media (max-width: 980px) {
  .chat-page-reimagined {
    --chat-shell-height: auto !important;
  }

  .chat-page-reimagined .chat-shell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .chat-page-reimagined .chat-app-frame {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .chat-page-reimagined .chat-sidebar {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom:
      1px solid
      rgba(45, 201, 255, 0.16) !important;
  }

  .chat-page-reimagined .chat-conversation-list {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding:
      0
      16px
      28px !important;
  }

  .chat-page-reimagined .chat-sidebar-empty {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 340px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding:
      28px
      18px
      36px !important;
    overflow: visible !important;
    text-align: center !important;
  }

  .chat-page-reimagined .chat-sidebar-empty .chat-empty-icon {
    margin:
      0
      auto
      18px !important;
  }

  .chat-page-reimagined .chat-sidebar-empty h3 {
    width: 100% !important;
    margin:
      0
      0
      12px !important;
    font-size:
      clamp(
        1.35rem,
        4.5vw,
        1.8rem
      ) !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  .chat-page-reimagined .chat-sidebar-empty p {
    display: block !important;
    width:
      min(
        100%,
        520px
      ) !important;
    max-width: 520px !important;
    min-height: 0 !important;
    margin:
      0
      auto
      22px !important;
    padding: 0 !important;
    overflow: visible !important;
    color:
      rgba(
        214,
        226,
        248,
        0.72
      ) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .chat-page-reimagined #chatEmptyNewButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width:
      min(
        100%,
        320px
      ) !important;
    min-width: 0 !important;
    min-height: 50px !important;
    margin: 0 auto !important;
    padding:
      12px
      20px !important;
    white-space: nowrap !important;
  }

  .chat-page-reimagined #chatEmptyNewButton[hidden] {
    display: none !important;
  }

  .chat-page-reimagined .chat-workspace {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
}

@media (max-width: 620px) {
  .chat-page-reimagined .chat-conversation-list {
    padding:
      0
      12px
      24px !important;
  }

  .chat-page-reimagined .chat-sidebar-empty {
    min-height: 360px !important;
    padding:
      24px
      14px
      max(
        34px,
        env(safe-area-inset-bottom)
      ) !important;
  }

  .chat-page-reimagined .chat-sidebar-empty p {
    max-width: 340px !important;
    margin-bottom: 20px !important;
    font-size: 0.92rem !important;
  }

  .chat-page-reimagined #chatEmptyNewButton {
    width: 100% !important;
    max-width: 300px !important;
  }
}
/* =====================================================================
   HOME CREATE POST BUTTON — MOBILE / TABLET CENTERING
   Exact target: #homeComposerButton
===================================================================== */

@media (max-width: 980px) {
  #homeComposerButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    gap: 10px !important;

    width: fit-content !important;
    min-width: 220px !important;
    max-width: 100% !important;

    margin:
      24px
      auto
      0 !important;

    text-align: center !important;
  }

  #homeComposerButton > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 700px) {
  #homeComposerButton {
    width: min(100%, 320px) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }
}
/* =====================================================================
   CONNECTS PAGE — MOBILE / TABLET STRUCTURE FIX
   Scope: iPad, Android tablets, iPhone, Android phones, WKWebView
===================================================================== */

@media (max-width: 980px) {
  .connects-page {
    width: 100%;
    min-width: 0;
    gap: 18px;
  }

  .connects-page .connects-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 36px 28px 28px;
    overflow: visible;
  }

  .connects-page .connects-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    text-align: center;
  }

  .connects-page .connects-hero-content .eyebrow {
    margin: 0 auto 16px;
    text-align: center;
  }

  .connects-page #connectsPageTitle {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 20px;
    font-size: clamp(2.4rem, 7vw, 4rem);
    line-height: 0.98;
    text-align: center;
    overflow-wrap: normal;
    word-break: normal;
  }

  .connects-page #connectsPageTitle span {
    display: block;
    width: 100%;
    margin-top: 6px;
  }

  .connects-page .connects-hero-content > p {
    width: min(100%, 680px);
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.65;
    text-align: center;
  }

  .connects-page .connects-hero-actions {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    margin: 26px auto 0;
  }

  .connects-page .connects-hero-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 260px;
    min-width: 210px;
    min-height: 52px;
    margin: 0;
    text-align: center;
    white-space: nowrap;
  }

  .connects-page .connects-hero-stats {
    position: relative;
    inset: auto;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin: 28px 0 0;
    padding: 0;
    transform: none;
  }

  .connects-page .connects-stat {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    min-width: 0;
    min-height: 118px;
    padding: 18px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    background:
      linear-gradient(
        145deg,
        rgba(10, 24, 54, 0.96),
        rgba(5, 12, 30, 0.98)
      );
    box-shadow:
      0 14px 30px rgba(0, 0, 0, 0.24);
    text-align: center;
  }

  .connects-page .connects-stat strong {
    display: block;
    margin: 0 0 6px;
    font-size: clamp(1.7rem, 4vw, 2.25rem);
    line-height: 1;
  }

  .connects-page .connects-stat span {
    display: block;
    width: 100%;
    color: var(--soft);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
  }

  .connects-page .connects-toolbar {
    display: grid;
    gap: 18px;
    width: 100%;
    min-width: 0;
    padding: 24px;
  }

  .connects-page .connects-search-field {
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
  }

  .connects-page .connects-search-field > span {
    display: block;
    width: 100%;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .connects-page #connectsSearch {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 14px 18px;
    border-radius: 18px;
    font-size: 1rem;
  }

  .connects-page .connects-section-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
  }

  .connects-page .connects-section-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 52px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
  }

  .connects-page .connects-section {
    width: 100%;
    min-width: 0;
    padding: 24px;
  }

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

@media (max-width: 640px) {
  .connects-page {
    gap: 14px;
  }

  .connects-page .connects-hero {
    padding: 30px 18px 20px;
    border-radius: 24px;
  }

  .connects-page #connectsPageTitle {
    max-width: 100%;
    margin-bottom: 18px;
    font-size: clamp(2.15rem, 10vw, 3.15rem);
    line-height: 1;
    letter-spacing: -0.045em;
  }

  .connects-page .connects-hero-content > p {
    font-size: 0.96rem;
    line-height: 1.6;
  }

  .connects-page .connects-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: min(100%, 340px);
    margin-top: 24px;
  }

  .connects-page .connects-hero-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 50px;
  }

  .connects-page .connects-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 22px;
  }

  .connects-page .connects-stat {
    min-height: 94px;
    padding: 14px 6px;
    border-radius: 17px;
  }

  .connects-page .connects-stat strong {
    margin-bottom: 5px;
    font-size: 1.65rem;
  }

  .connects-page .connects-stat span {
    font-size: 0.58rem;
    line-height: 1.2;
    letter-spacing: 0.075em;
  }

  .connects-page .connects-toolbar {
    gap: 16px;
    padding: 20px 16px;
    border-radius: 22px;
  }

  .connects-page #connectsSearch {
    min-height: 54px;
    padding: 13px 15px;
    font-size: 0.95rem;
    text-overflow: ellipsis;
  }

  .connects-page .connects-section-nav {
    gap: 10px;
  }

  .connects-page .connects-section-nav a {
    min-height: 48px;
    padding: 9px 8px;
    font-size: 0.86rem;
  }

  .connects-page .connects-section {
    padding: 20px 16px;
    border-radius: 22px;
  }
}

@media (max-width: 390px) {
  .connects-page .connects-hero-stats {
    grid-template-columns: 1fr;
  }

  .connects-page .connects-stat {
    min-height: 82px;
  }

  .connects-page .connects-section-nav {
    grid-template-columns: 1fr;
  }
}
/* =====================================================================
   FEED AUTHOR IDENTITY — ROLE LABELS + VERTICAL STRUCTURE
===================================================================== */

.post-header {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  align-items: start;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.post-avatar-link {
  display: block;
  flex: 0 0 auto;
}

.post-header .post-avatar-link img,
.post-header > img {
  width: 46px;
  height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  object-fit: cover;
}

.post-author {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.post-author-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.post-author-name strong {
  display: block;
  max-width: 100%;
  margin: 0;
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 850;
  line-height: 1.25;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.post-author > span:not(.post-disclosure) {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

.post-disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  margin: 2px 0 0;
  padding: 4px 9px;
  border: 1px solid rgba(102, 214, 255, 0.25);
  border-radius: 999px;
  background: rgba(35, 151, 255, 0.09);
  color: #bfeeff;
  font-size: 0.67rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.post-disclosure--official {
  border-color: rgba(65, 239, 255, 0.36);
  background:
    linear-gradient(
      135deg,
      rgba(65, 239, 255, 0.15),
      rgba(76, 141, 255, 0.12)
    );
  color: #75efff;
}

.post-disclosure--news {
  border-color: rgba(149, 103, 255, 0.38);
  background:
    linear-gradient(
      135deg,
      rgba(149, 103, 255, 0.16),
      rgba(76, 141, 255, 0.1)
    );
  color: #cdbdff;
}

.post-disclosure--brand {
  border-color: rgba(255, 212, 111, 0.34);
  background:
    linear-gradient(
      135deg,
      rgba(255, 212, 111, 0.14),
      rgba(255, 151, 74, 0.08)
    );
  color: #ffd879;
}

.post-menu-button {
  align-self: start;
  flex: 0 0 auto;
}

/* =====================================================================
   FEED AUTHOR IDENTITY — MOBILE / TABLET
===================================================================== */

@media (max-width: 980px) {
  .post-header {
    grid-template-columns:
      50px
      minmax(0, 1fr)
      42px;
    align-items: start;
    gap: 12px;
  }

  .post-header .post-avatar-link img,
  .post-header > img {
    width: 50px;
    height: 50px;
  }

  .post-author {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .post-author-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }

  .post-author-name strong {
    width: auto;
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.2;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  .post-author > span:not(.post-disclosure) {
    width: 100%;
    font-size: 0.78rem;
  }

  .post-disclosure {
    margin-top: 2px;
  }
}

@media (max-width: 620px) {
  .post-header {
    grid-template-columns:
      48px
      minmax(0, 1fr)
      36px;
    gap: 10px;
  }

  .post-header .post-avatar-link img,
  .post-header > img {
    width: 48px;
    height: 48px;
  }

  .post-author-name strong {
    font-size: 0.94rem;
  }

  .post-author > span:not(.post-disclosure) {
    font-size: 0.74rem;
    line-height: 1.35;
  }

  .post-disclosure {
    min-height: 22px;
    padding: 4px 8px;
    font-size: 0.63rem;
  }
}

/* ==========================================================
   SMOOTH JAZZ CONNECT SECURE DATA EXPORT
   Version 3.3.160
========================================================== */

/* =====================================================================
   SETTINGS — SECURE DATA EXPORT
===================================================================== */
.settings-management-item:has(.settings-data-export-panel) {
  align-items: flex-start;
  flex-wrap: wrap;
}

.settings-data-export-panel {
  width: 100%;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid rgba(118, 225, 255, 0.22);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(11, 24, 51, 0.92), rgba(19, 31, 65, 0.8));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 35px rgba(0, 0, 0, 0.2);
}

.settings-data-export-heading {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.settings-data-export-heading p {
  margin: 5px 0 0;
  color: var(--settings-muted, #aebbd2);
}

.settings-data-export-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #071528;
  font-weight: 1000;
  background: linear-gradient(135deg, #76e1ff, #d772ff);
}

.settings-data-export-progress {
  height: 9px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.settings-data-export-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #76e1ff, #d772ff);
  transition: width 260ms ease;
}

.settings-data-export-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  color: var(--settings-muted, #aebbd2);
  font-size: 0.84rem;
}

.settings-data-export-download {
  width: 100%;
  margin-top: 15px;
}

.settings-data-export-panel[data-status="ready"],
.settings-data-export-panel[data-status="completed"] {
  border-color: rgba(69, 233, 168, 0.34);
}

.settings-data-export-panel[data-status="failed"],
.settings-data-export-panel[data-status="expired"] {
  border-color: rgba(255, 109, 145, 0.34);
}

@media (max-width: 700px) {
  .settings-data-export-panel {
    padding: 15px;
  }
}


/* =====================================================================
   RECONNECT — BRANDED REPOST SYSTEM
===================================================================== */

.sjc-reconnect-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.8rem;
  color: var(--color-accent, #64f4d2);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sjc-reconnect-label span {
  font-size: 1.05rem;
}

.sjc-reconnect-original {
  margin-top: 0.9rem;
  overflow: hidden;
  border: 1px solid rgba(132, 246, 225, 0.25);
  border-radius: 18px;
  background: rgba(7, 18, 27, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sjc-reconnect-original-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem 0.6rem;
}

.sjc-reconnect-original-header img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  object-fit: cover;
}

.sjc-reconnect-original-header div {
  display: grid;
  min-width: 0;
}

.sjc-reconnect-original-header strong,
.sjc-reconnect-original-header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sjc-reconnect-original-header span {
  color: var(--color-text-muted, #9db0bd);
  font-size: 0.82rem;
}

.sjc-reconnect-original-text {
  padding: 0.35rem 1rem 1rem;
}

.sjc-reconnect-original > .post-media,
.sjc-reconnect-original > .feed-post-media {
  margin: 0;
  border-radius: 0;
}

.sjc-reconnect-sheet {
  display: grid;
  gap: 1rem;
}

.sjc-reconnect-intro {
  margin: 0;
  color: var(--color-text-muted, #a7b7c2);
  line-height: 1.55;
}

.sjc-reconnect-sheet label {
  display: grid;
  gap: 0.35rem;
  font-weight: 800;
}

.sjc-reconnect-sheet label span {
  color: var(--color-text-muted, #9db0bd);
  font-size: 0.78rem;
  font-weight: 600;
}

.sjc-reconnect-sheet textarea {
  width: 100%;
  min-height: 118px;
  resize: vertical;
}

.sjc-reconnect-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.sjc-reconnect-actions .button-primary {
  grid-column: 1 / -1;
}

[data-post-reconnect].is-active,
[data-social-action="reconnect"].is-active {
  color: var(--color-accent, #64f4d2);
}

@media (max-width: 560px) {
  .sjc-reconnect-actions {
    grid-template-columns: 1fr;
  }

  .sjc-reconnect-actions .button-primary {
    grid-column: auto;
  }
}

/* ==========================================================
   RECONNECT — COMPACT UNDO CONFIRMATION
========================================================== */

.sjc-reconnect-sheet--undo {
  display: flex;
  width: 100%;
  padding: 0;
}

.sjc-reconnect-sheet--undo [data-reconnect-confirm] {
  width: 100%;
  min-height: 52px;
  margin: 0;
}

.sjc-reconnect-modal--undo .modal-body {
  padding-top: 8px;
}


/* ==========================================================
   USERNAME PROFILE AUTH DESTINATION
========================================================== */

.auth-destination-message {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid rgba(54, 236, 255, 0.24);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(11, 25, 44, 0.96),
      rgba(16, 12, 42, 0.96)
    );
  text-align: center;
}

.auth-destination-message strong {
  color: var(--accent, #48e8ff);
  font-size: 1.05rem;
}

.auth-destination-message p {
  margin: 0;
  color: var(--text-muted, #b9c6d8);
  line-height: 1.55;
}

/* =========================================================
   WEBSITE: HIDE APPLE SIGN-IN BUTTON
   Apple authentication code remains unchanged.
========================================================= */

#appleAuthButton,
.auth-provider-button-apple {
  display: none !important;
}
.settings-management-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

.settings-management-copy {
  min-width: 0;
}

.settings-management-copy strong,
.settings-management-copy p {
  overflow-wrap: normal;
  word-break: normal;
}

.settings-account-deletion-link {
  display: inline-flex;
  margin-top: 10px;
  color: var(--color-accent, #55d9ff);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.settings-account-deletion-link:hover,
.settings-account-deletion-link:focus-visible {
  color: #ffffff;
}

.settings-danger-button {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .settings-management-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .settings-danger-button {
    width: 100%;
  }
}
.return-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 18px;
  padding: 12px 18px;
  background: linear-gradient(
    135deg,
    var(--accent),
    var(--accent-secondary)
  );
  color: #02111f;
  border: 0;
  border-radius: 14px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(69, 221, 255, 0.22);
}

.return-home:hover,
.return-home:focus-visible {
  color: #02111f;
  transform: translateY(-1px);
}

.return-home-wrap {
  margin-top: 25px;
  text-align: center;
}
.settings-policy-button {
  min-width: 150px;
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 720px) {
  .settings-policy-button {
    width: 100%;
  }
}

/* =====================================================
   SIDEBAR SOCIAL STACK v3.3.175
===================================================== */

.sidebar-social {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(80, 211, 255, 0.16);
}

.sidebar-social-title {
  color: rgba(222, 232, 255, 0.7);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.3;
  text-transform: uppercase;
}

.sidebar-social-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-social-link {
  position: relative;
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  color: #dfeaff;
  text-decoration: none;
  border: 1px solid rgba(70, 205, 255, 0.28);
  border-radius: 50%;
  background:
    linear-gradient(
      145deg,
      rgba(21, 49, 94, 0.92),
      rgba(8, 17, 42, 0.96)
    );
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.24),
    inset 0 0 14px rgba(48, 197, 255, 0.06);
  transition:
    transform 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.sidebar-social-link svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.sidebar-social-link:hover,
.sidebar-social-link:focus-visible {
  color: #ffffff;
  border-color: rgba(88, 219, 255, 0.9);
  background:
    linear-gradient(
      145deg,
      rgba(31, 111, 190, 0.98),
      rgba(35, 31, 101, 0.98)
    );
  box-shadow:
    0 0 0 3px rgba(38, 206, 255, 0.12),
    0 0 22px rgba(31, 199, 255, 0.28);
  transform: translateY(-2px);
}

.sidebar-social-link:active {
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .sidebar-social-links {
    flex-wrap: wrap;
  }
}

/* =========================================================
   SJC POST OWNER ACTION MODAL v3.3.182
========================================================= */

.sjc-post-action-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding:
    max(20px, env(safe-area-inset-top, 0px))
    max(18px, env(safe-area-inset-right, 0px))
    max(20px, env(safe-area-inset-bottom, 0px))
    max(18px, env(safe-area-inset-left, 0px));
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.sjc-post-action-modal.is-visible {
  opacity: 1;
  visibility: visible;
}

.sjc-post-action-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(32, 101, 184, 0.22),
      transparent 45%
    ),
    rgba(1, 5, 18, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: default;
}

.sjc-post-action-dialog {
  position: relative;
  width: min(620px, 100%);
  overflow: hidden;
  border:
    1px solid
    rgba(75, 207, 255, 0.34);
  border-radius: 26px;
  background:
    linear-gradient(
      155deg,
      rgba(14, 31, 64, 0.98),
      rgba(4, 10, 28, 0.99)
    );
  box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.62),
    0 0 50px rgba(26, 193, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform:
    translateY(16px)
    scale(0.975);
  transition:
    transform 180ms ease;
}

.sjc-post-action-modal.is-visible
.sjc-post-action-dialog {
  transform:
    translateY(0)
    scale(1);
}

.sjc-post-action-dialog::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      #16d9ff,
      #796dff,
      #d674ff
    );
}

.sjc-post-action-dialog.is-delete::before {
  background:
    linear-gradient(
      90deg,
      #ff4478,
      #ff775d,
      #ffb15d
    );
}

.sjc-post-action-header {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: 15px;
  padding: 25px 26px 20px;
  border-bottom:
    1px solid
    rgba(98, 174, 235, 0.14);
}

.sjc-post-action-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  flex: 0 0 48px;
  border:
    1px solid
    rgba(70, 219, 255, 0.38);
  border-radius: 15px;
  color: #83eaff;
  font-size: 1.45rem;
  font-weight: 900;
  background:
    linear-gradient(
      145deg,
      rgba(17, 140, 210, 0.22),
      rgba(74, 48, 174, 0.18)
    );
  box-shadow:
    inset 0 0 18px rgba(51, 209, 255, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.24);
}

.sjc-post-action-dialog.is-delete
.sjc-post-action-icon {
  color: #ff8ca6;
  border-color:
    rgba(255, 92, 128, 0.42);
  background:
    rgba(255, 60, 103, 0.12);
}

.sjc-post-action-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #52dfff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sjc-post-action-dialog.is-delete
.sjc-post-action-eyebrow {
  color: #ff8da5;
}

.sjc-post-action-header h2 {
  margin: 0;
  color: #ffffff;
  font-size:
    clamp(1.28rem, 3vw, 1.68rem);
  line-height: 1.15;
}

.sjc-post-action-close {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border:
    1px solid
    rgba(111, 180, 235, 0.18);
  border-radius: 50%;
  color: #b8c5dc;
  font-size: 1.45rem;
  line-height: 1;
  background:
    rgba(9, 21, 46, 0.7);
  cursor: pointer;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.sjc-post-action-close:hover,
.sjc-post-action-close:focus-visible {
  color: #ffffff;
  border-color:
    rgba(79, 218, 255, 0.7);
  background:
    rgba(23, 85, 132, 0.48);
  transform: rotate(5deg);
}

.sjc-post-action-body {
  display: grid;
  gap: 15px;
  padding: 24px 26px;
}

.sjc-post-action-body > p {
  margin: 0;
  color: #b9c5d9;
  font-size: 0.96rem;
  line-height: 1.65;
}

.sjc-post-edit-label {
  color: #eef7ff;
  font-size: 0.82rem;
  font-weight: 850;
}

.sjc-post-edit-textarea {
  width: 100%;
  min-height: 190px;
  max-height: 52vh;
  resize: vertical;
  padding: 17px 18px;
  border:
    1px solid
    rgba(67, 199, 255, 0.3);
  border-radius: 17px;
  outline: none;
  color: #f6f9ff;
  font: inherit;
  font-size: 1rem;
  line-height: 1.62;
  background:
    rgba(2, 9, 25, 0.86);
  box-shadow:
    inset 0 0 22px rgba(0, 0, 0, 0.25);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.sjc-post-edit-textarea:focus {
  border-color: #49d9ff;
  box-shadow:
    0 0 0 4px rgba(57, 207, 255, 0.11),
    inset 0 0 22px rgba(0, 0, 0, 0.25);
}

.sjc-post-edit-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #8797b3;
  font-size: 0.75rem;
}

.sjc-post-edit-meta strong {
  color: #66dfff;
  white-space: nowrap;
}

.sjc-post-delete-warning {
  display: grid;
  gap: 5px;
  padding: 16px 17px;
  border:
    1px solid
    rgba(255, 80, 119, 0.25);
  border-radius: 15px;
  background:
    rgba(255, 54, 99, 0.08);
}

.sjc-post-delete-warning strong {
  color: #ff9bb0;
}

.sjc-post-delete-warning span {
  color: #c9b6bf;
  font-size: 0.84rem;
  line-height: 1.5;
}

.sjc-post-action-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 26px 25px;
  border-top:
    1px solid
    rgba(98, 174, 235, 0.14);
  background:
    rgba(2, 7, 20, 0.28);
}

.sjc-post-action-footer .button {
  min-width: 132px;
}

.sjc-post-action-delete {
  border:
    1px solid
    rgba(255, 88, 125, 0.58);
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #e82f62,
      #ff5d65
    );
  box-shadow:
    0 12px 28px
    rgba(223, 35, 83, 0.22);
}

.sjc-post-action-delete:hover,
.sjc-post-action-delete:focus-visible {
  background:
    linear-gradient(
      135deg,
      #ff3f72,
      #ff716f
    );
  box-shadow:
    0 15px 34px
    rgba(239, 45, 93, 0.32);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .sjc-post-action-modal {
    align-items: end;
    padding:
      12px
      12px
      max(
        12px,
        env(safe-area-inset-bottom, 0px)
      );
  }

  .sjc-post-action-dialog {
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 24px 24px 18px 18px;
  }

  .sjc-post-action-header {
    padding: 21px 18px 17px;
  }

  .sjc-post-action-body {
    padding: 20px 18px;
  }

  .sjc-post-action-footer {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns:
      1fr
      1fr;
    padding:
      16px
      18px
      max(
        16px,
        env(safe-area-inset-bottom, 0px)
      );
    background:
      rgba(4, 11, 30, 0.98);
  }

  .sjc-post-action-footer .button {
    width: 100%;
    min-width: 0;
  }

  .sjc-post-edit-textarea {
    min-height: 175px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sjc-post-action-modal,
  .sjc-post-action-dialog {
    transition: none;
  }
}
/* =====================================================================
   SMOOTH JAZZ CONNECT
   COMPACT APP STORE PROMO
===================================================================== */

.home-app-store-launch-compact {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.5rem);
  isolation: isolate;
}

.home-app-store-launch-compact .home-app-store-launch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.home-app-store-launch-compact .home-app-store-launch-copy {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
}

.home-app-store-launch-compact .home-app-store-launch-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin: 0;
}

.home-app-store-launch-compact .home-app-store-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
}

.home-app-store-launch-compact .home-app-store-logo {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: contain;
  border-radius: 18px;
}

.home-app-store-launch-compact .home-app-store-brand-copy {
  min-width: 0;
}

.home-app-store-launch-compact .home-app-store-brand-copy .eyebrow {
  display: block;
  margin-bottom: 0.2rem;
}

.home-app-store-launch-compact #homeAppStoreTitle {
  max-width: 720px;
  margin: 0;
  font-size: clamp(1.45rem, 2.8vw, 2.3rem);
  line-height: 1.05;
  text-wrap: balance;
}

.home-app-store-launch-compact .home-app-store-description {
  max-width: 720px;
  margin: 0;
  line-height: 1.55;
}

.home-app-store-feature-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}

.home-app-store-feature-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(103, 210, 255, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(
      135deg,
      rgba(48, 116, 255, 0.12),
      rgba(157, 65, 255, 0.08)
    );
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.home-app-store-feature-row b {
  color: #69e7ff;
  font-size: 0.78rem;
}

.home-app-store-launch-compact .home-app-store-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
}

.home-app-store-launch-compact .home-app-store-badge-link {
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
}

.home-app-store-launch-compact .home-app-store-badge {
  display: block;
  width: min(190px, 100%);
  height: auto;
}

.home-app-store-launch-compact .home-app-store-text-link {
  min-height: 44px;
  padding-inline: 1rem;
}

.home-app-store-launch-compact .home-app-store-qr-column {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-app-store-launch-compact .home-app-store-qr-shell {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  width: clamp(170px, 16vw, 205px);
  padding: 0.8rem;
  border: 1px solid rgba(117, 215, 255, 0.24);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(10, 25, 58, 0.96),
      rgba(21, 16, 54, 0.92)
    );
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.home-app-store-launch-compact .home-app-store-qr-heading {
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  text-align: center;
}

.home-app-store-launch-compact .home-app-store-qr-heading strong {
  font-size: 1rem;
}

.home-app-store-launch-compact .home-app-store-qr-link {
  display: block;
  line-height: 0;
}

.home-app-store-launch-compact .home-app-store-qr-frame {
  display: block;
  padding: 0.45rem;
  border-radius: 15px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 10px 28px rgba(0, 0, 0, 0.26);
}

.home-app-store-launch-compact .home-app-store-qr {
  display: block;
  width: clamp(125px, 13vw, 158px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.home-app-store-launch-compact .home-app-store-qr-shell p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: center;
  opacity: 0.76;
}

@media (max-width: 760px) {
  .home-app-store-launch-compact {
    padding: 1rem;
  }

  .home-app-store-launch-compact .home-app-store-launch-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .home-app-store-launch-compact .home-app-store-brand {
    align-items: flex-start;
  }

  .home-app-store-launch-compact .home-app-store-logo {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    border-radius: 15px;
  }

  .home-app-store-launch-compact #homeAppStoreTitle {
    font-size: clamp(1.4rem, 7vw, 2rem);
  }

  .home-app-store-launch-compact .home-app-store-description {
    font-size: 0.94rem;
  }

  .home-app-store-feature-row {
    gap: 0.35rem;
  }

  .home-app-store-feature-row span {
    min-height: 29px;
    padding: 0.3rem 0.58rem;
    font-size: 0.76rem;
  }

  .home-app-store-launch-compact .home-app-store-actions {
    align-items: stretch;
  }

  .home-app-store-launch-compact .home-app-store-badge-link,
  .home-app-store-launch-compact .home-app-store-text-link {
    flex: 1 1 160px;
  }

  .home-app-store-launch-compact .home-app-store-badge {
    width: 100%;
    max-width: 185px;
  }

  .home-app-store-launch-compact .home-app-store-text-link {
    justify-content: center;
  }

  .home-app-store-launch-compact .home-app-store-qr-shell {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    width: 100%;
    max-width: none;
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .home-app-store-launch-compact .home-app-store-qr-heading {
    grid-column: 2;
    grid-row: 1;
    justify-items: start;
    text-align: left;
  }

  .home-app-store-launch-compact .home-app-store-qr-link {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .home-app-store-launch-compact .home-app-store-qr {
    width: 104px;
  }

  .home-app-store-launch-compact .home-app-store-qr-shell p {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }
}

@media (max-width: 430px) {
  .home-app-store-launch-compact .home-app-store-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-app-store-launch-compact .home-app-store-badge-link {
    justify-content: flex-start;
  }

  .home-app-store-launch-compact .home-app-store-text-link {
    width: 100%;
  }

  .home-app-store-launch-compact .home-app-store-qr {
    width: 92px;
  }
}


/* =====================================================================
   TRUST + SAFETY 3.3.183 — CHAT REPORTING AND BLOCK ENFORCEMENT
===================================================================== */

.chat-message-report-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-text-muted, #9fb2d8);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.45rem;
}

.chat-message-report-button:hover,
.chat-message-report-button:focus-visible {
  color: #ffb7c5;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.is-blocked-member,
.is-muted-member,
.is-locally-hidden {
  display: none !important;
}

[data-app-store-promo] .home-app-store-qr {
  image-rendering: auto;
}