:root {
  --bg: #000;
  --bg-secondary: #080808;
  --surface: #181818;
  --surface-hover: #16181c;
  --card: #181818;
  --border: #2f3336;
  --border2: #536471;
  --foreground: #e7e9ea;
  --muted-foreground: #71767b;
  --accent: #1d9bf0;
  --accent-hover: #1a8cd8;
  --btn-primary-bg: #fff;
  --btn-primary-color: #000;
  --btn-primary-spinner-border: rgba(0, 0, 0, 0.2);
  --btn-secondary-color: #fff;
  --btn-secondary-spinner-border: rgba(255, 255, 255, 0.25);
  --btn-ghost-hover-bg: #0d0d0d;
  --logo-invert: none;
  --col-header-bg: rgba(0, 0, 0, 0.65);
  --sticky-bar-bg: rgba(0, 0, 0, 0.82);
  --composer-bar-bg: rgba(0, 0, 0, 0.92);
  --input-filled-bg: #202327;
  --input-focus-border: #fff;
  --message-mine-bg: #eff3f4;
  --message-mine-color: #0f1419;
}

[data-theme="light"] {
  --bg: #ffffff;
  --bg-secondary: #f7f7f7;
  --surface: #f7f7f7;
  --surface-hover: #ebebeb;
  --card: #ffffff;
  --border: #e1e1e1;
  --border2: #d0d0d0;
  --foreground: #0f0f0f;
  --muted-foreground: #536471;
  --accent: #1d9bf0;
  --accent-hover: #1a8cd8;
  --btn-primary-bg: #0f0f0f;
  --btn-primary-color: #fff;
  --btn-primary-spinner-border: rgba(255, 255, 255, 0.25);
  --btn-secondary-color: #0f0f0f;
  --btn-secondary-spinner-border: rgba(0, 0, 0, 0.2);
  --btn-ghost-hover-bg: var(--surface-hover);
  --logo-invert: invert(1);
  --col-header-bg: rgba(255, 255, 255, 0.85);
  --sticky-bar-bg: rgba(255, 255, 255, 0.88);
  --composer-bar-bg: rgba(255, 255, 255, 0.92);
  --input-filled-bg: #f0f0f0;
  --input-focus-border: #0f0f0f;
  --message-mine-bg: var(--accent);
  --message-mine-color: #fff;
}

[data-theme="dim"] {
  --bg: #15202b;
  --bg-secondary: #1a2836;
  --surface: #1e2d3d;
  --surface-hover: #253341;
  --card: #1e2d3d;
  --border: #38444d;
  --border2: #536471;
  --foreground: #f7f9f9;
  --muted-foreground: #8b98a5;
  --accent: #1d9bf0;
  --accent-hover: #1a8cd8;
  --btn-primary-bg: #1d9bf0;
  --btn-primary-color: #fff;
  --btn-primary-spinner-border: rgba(255, 255, 255, 0.2);
  --btn-secondary-color: #f7f9f9;
  --btn-secondary-spinner-border: rgba(255, 255, 255, 0.25);
  --btn-ghost-hover-bg: #1e2d3d;
  --logo-invert: none;
  --col-header-bg: rgba(21, 32, 43, 0.65);
  --sticky-bar-bg: rgba(21, 32, 43, 0.82);
  --composer-bar-bg: rgba(21, 32, 43, 0.92);
  --input-filled-bg: #253341;
  --input-focus-border: #1d9bf0;
  --message-mine-bg: #1d9bf0;
  --message-mine-color: #fff;
}

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--foreground);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.35;
}

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

a:hover {
  text-decoration: underline;
}

.app {
  min-height: 100%;
}

.shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 600px) 380px;
  max-width: 1320px;
  margin: 0 auto;
  min-height: 100vh;
}

.shell--auth {
  grid-template-columns: minmax(0, 420px);
  max-width: 480px;
  width: 100%;
  box-sizing: border-box;
}

.shell--wide-main {
  grid-template-columns: 260px minmax(0, 980px);
  max-width: 1320px;
}

body.app:has(.messages-shell) .shell--wide-main {
  max-width: 1320px;
}

.col {
  border-right: 1px solid var(--border);
}

.col--right {
  border-right: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  box-sizing: border-box;
  min-width: 0;
}

.col--left {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: 12px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.col--center {
  min-height: 100vh;
  border-right: 1px solid var(--border);
}

.col--single {
  border-right: 0;
  width: 100%;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

.brand {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 4px 0 0;
  margin-bottom: -1px;
}

.brand__link {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.brand__link:hover {
  text-decoration: none;
  opacity: 0.92;
}

.brand__img {
  display: block;
  max-width: 130px;
  width: 100%;
  height: auto;
  filter: var(--logo-invert);
}

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

.nav__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.05rem;
}

.nav__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 26px;
  justify-content: center;
  align-items: center;
  color: inherit;
}

.nav__icon svg {
  display: block;
}

.nav__premium-badge {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

@media (min-width: 701px) {
  .col--left {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .col--left::-webkit-scrollbar {
    display: none;
  }

  .col--left .nav__icon {
    width: 30px;
  }

  .col--left .nav__icon svg {
    width: 26px;
    height: 26px;
  }

  .col--left .nav__premium-badge {
    width: 26px;
    height: 26px;
  }
}

@media (min-width: 1101px) {
  .col--left .nav__link {
    font-size: 1.2rem;
  }
}

.nav__link--notif-unread .nav__icon,
.nav__link--has-unread .nav__icon {
  position: relative;
}

.nav__link--notif-unread .nav__icon::after,
.nav__link--has-unread .nav__icon::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd400;
  box-shadow: 0 0 0 2px #000;
  pointer-events: none;
}

.nav__link--active .nav__icon--explore svg path,
.nav__link--active .nav__icon--catalog svg path {
  paint-order: stroke fill;
  stroke: currentColor;
  stroke-width: 0.55;
  stroke-linejoin: round;
}

.nav__link:hover {
  background: var(--surface);
  text-decoration: none;
}

.nav__link--active {
  font-weight: 800;
}

.nav__link--quiet {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--muted-foreground);
}

.btn-post {
  width: 100%;
  text-align: center;
  margin-top: 8px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.nav-user {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  position: relative;
}

.nav-user__summary {
  list-style: none;
  cursor: pointer;
  border-radius: 999px;
}

.nav-user__summary::-webkit-details-marker {
  display: none;
}

.nav-user__summary::marker {
  display: none;
}

.nav-user__summary-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
}

.nav-user__summary:hover .nav-user__summary-inner,
.nav-user[open] .nav-user__summary-inner {
  background: var(--surface);
}

.nav-user__menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}

.nav-user__menu-item {
  display: block;
  padding: 14px 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.nav-user__menu-item:last-child {
  border-bottom: 0;
}

.nav-user__menu-item:hover {
  background: var(--surface);
  text-decoration: none;
}

.nav-user__logout-form {
  margin: 0;
}

button.nav-user__menu-item {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.nav-user__menu-item:last-child {
  border-bottom: 0;
}

.nav-user__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nav-user__name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-user__handle {
  color: var(--muted-foreground);
  font-size: 0.9rem;
}

.display-name-with-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  vertical-align: middle;
}

.display-name-with-badge__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.premium-admin-badge {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
}

.nav-guest {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
}

.btn.btn-post {
  font-weight: 700;
}

.btn-primary:hover {
  filter: brightness(0.92);
}

.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary.is-loading:disabled {
  opacity: 1;
  cursor: wait;
  filter: none;
}

.btn .btn__spinner {
  display: none;
  width: 15px;
  height: 15px;
  margin-right: 0;
  border: 2px solid var(--btn-primary-spinner-border);
  border-top-color: currentColor;
  border-radius: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
  animation: btn-spin 0.65s linear infinite;
}

.btn.is-loading .btn__spinner {
  display: block;
  margin-right: 8px;
}

.btn-outline .btn__spinner,
.btn-ghost .btn__spinner {
  border-color: var(--btn-secondary-spinner-border);
  border-top-color: currentColor;
}

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

.btn-outline {
  background: transparent;
  color: var(--btn-secondary-color);
  border-color: var(--border2);
}

.btn-outline:hover {
  background: var(--surface);
}

.btn-ghost {
  background: transparent;
  color: var(--btn-secondary-color);
  border-color: var(--border);
}

.btn-ghost:hover {
  background: var(--btn-ghost-hover-bg);
}

.btn-danger {
  background: #400;
  color: #fff;
  border-color: #600;
}

.col-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--col-header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
}

.col-header__title {
  margin: 0;
  font-size: 1.1rem;
  flex: 1;
  min-width: 0;
}

.col-header__badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: #acd628;
  white-space: nowrap;
}

a.col-header__badge:hover {
  text-decoration: none;
}

.col-header__back {
  display: flex;
  align-items: center;
  color: var(--foreground);
  text-decoration: none;
  padding: 4px;
  margin-right: 8px;
  border-radius: 50%;
}

.col-header__back:hover {
  background: var(--surface-hover);
}

.catalog-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.catalog-sync-badge--checking::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: catalog-sync-spin 0.75s linear infinite;
}

.catalog-sync-badge--updated {
  color: #acd628;
}

.catalog-sync-badge--stale {
  color: #ffd166;
}

.catalog-sync-badge--error {
  color: #ff7a7a;
}

.catalog-sync-badge--disabled {
  color: var(--muted-foreground);
}

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

/* Episode search (search.php / Explore "Search Episodes" tab): extra space above sticky title and before the form. Not For You — that uses the default col-header padding. */
.col--center:has(.search-page):not(:has(.explore-tabs)) > .col-header {
  padding-top: 22px;
  padding-bottom: 16px;
}

.thread-header-bar {
  display: flex;
  align-items: center;
  gap: 2px;
}

.thread-header__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 8px;
  margin: -4px 0 -4px -6px;
  border-radius: 999px;
  color: inherit;
}

.thread-header__back:hover {
  background: var(--surface);
  text-decoration: none;
}

.thread-header__back svg {
  display: block;
}

.thread-header__title {
  flex: 1;
  min-width: 0;
}

.episode-header__actions {
  flex-shrink: 0;
  margin-left: auto;
}

.episode-header__thumb-btn {
  white-space: nowrap;
}

.episode-header__thumb-btn[aria-busy="true"] {
  opacity: 0.85;
}

.watch-party-header-share {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.86rem;
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.home-tabs {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg);
  backdrop-filter: blur(12px);
}

.home-timeline-header {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.home-timeline-header:has(.home-timeline-header__jingle.jingle-toggle--active) {
  border-bottom-color: transparent;
}

.home-timeline-header__row {
  display: flex;
  align-items: stretch;
}

.home-timeline-header__row .home-tabs {
  position: static;
  flex: 1;
  min-width: 0;
  border-bottom: none;
  background: transparent;
  backdrop-filter: none;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.home-timeline-header__row .home-tabs::-webkit-scrollbar {
  display: none;
}

.home-timeline-header__row .home-tabs > .tabs__link,
.home-timeline-header__row .home-tabs > .community-tab-wrap {
  flex: 1 0 auto;
  white-space: nowrap;
}

.home-timeline-header__row .home-tabs .tabs__link {
  white-space: nowrap;
  padding-left: 12px;
  padding-right: 12px;
}

button.tabs__link.home-tabs__foryou-filter {
  appearance: none;
  margin: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-width: 0 0 2px;
  border-style: solid;
  border-color: transparent;
}

button.tabs__link.home-tabs__foryou-filter.tabs__link--active {
  border-bottom-color: var(--accent);
}

.home-tabs__foryou-filter-icon {
  flex: 0 0 auto;
  opacity: 0.65;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.home-tabs__foryou-filter--active-filters .home-tabs__foryou-filter-icon {
  opacity: 1;
  color: var(--accent);
}

.feed--updating {
  min-height: 220px;
}

.feed-updating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 220px;
  padding: 40px 16px;
  color: var(--muted-foreground);
}

.feed-updating__spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: catalogLoadSpin 0.8s linear infinite;
}

.feed-updating__label {
  font-size: 0.95rem;
  font-weight: 600;
}

.foryou-topics-modal__panel {
  width: min(440px, calc(100vw - 24px));
  max-height: min(85vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.foryou-topics-modal__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 20px 20px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.foryou-topics-modal__scroll {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  max-height: min(52vh, 420px);
  margin: 0 -4px;
}

.foryou-topics-modal__scroll::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 36px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to top, var(--bg) 12%, transparent);
  transition: opacity 0.15s ease;
}

.foryou-topics-modal__scroll.is-fade-bottom::after {
  opacity: 1;
}

.foryou-topics-modal__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.foryou-topics-modal__row {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 12px 4px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.98rem;
  text-align: left;
  cursor: pointer;
}

.foryou-topics-modal__row:last-child {
  border-bottom: 0;
}

.foryou-topics-modal__row:hover {
  background: var(--bg-secondary);
}

.foryou-topics-modal__row-label {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.foryou-topics-modal__row.is-off .foryou-topics-modal__row-label {
  color: var(--muted-foreground);
}

.foryou-topics-modal__switch {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--border);
  transition: background 0.15s ease;
}

.foryou-topics-modal__switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.foryou-topics-modal__row.is-on .foryou-topics-modal__switch {
  background: var(--accent);
}

.foryou-topics-modal__row.is-on .foryou-topics-modal__switch-thumb {
  transform: translateX(18px);
}

.foryou-topics-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
  flex-shrink: 0;
}

.home-timeline-header__actions {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 0 10px;
  border-bottom: 2px solid transparent;
}

.home-timeline-header__notifications,
.home-timeline-header__jingle,
.jingle-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: var(--foreground);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}

.home-timeline-header__notifications:hover,
.home-timeline-header__notifications:focus-visible,
.home-timeline-header__jingle:hover,
.home-timeline-header__jingle:focus-visible,
.jingle-toggle:hover,
.jingle-toggle:focus-visible {
  background: var(--surface);
  text-decoration: none;
  outline: none;
}

.jingle-toggle--active,
.jingle-toggle--active .nav__icon,
.jingle-toggle--active .nav__icon svg {
  color: #ffd400;
}

.home-timeline-header__notifications.nav__link--notif-unread .nav__icon,
.mobile-top-bar__notifications.nav__link--notif-unread .nav__icon {
  position: relative;
}

.home-timeline-header__notifications.nav__link--notif-unread .nav__icon::after,
.mobile-top-bar__notifications.nav__link--notif-unread .nav__icon::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd400;
  box-shadow: 0 0 0 2px var(--bg);
  pointer-events: none;
}

.jingle-player-mount--mobile {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 1079;
  padding: 8px 12px 0;
  pointer-events: none;
}

.jingle-player-mount--mobile:not([hidden]) {
  pointer-events: auto;
}

.jingle-player-mount--mobile[hidden] {
  display: none;
}

.jingle-player--toolbar {
  padding: 10px 14px 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .jingle-player--toolbar {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
}

.jingle-player--sidebar {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.widget--jingle {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .widget--jingle {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}

.widget__title--jingle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.widget__title--jingle .nav__icon svg {
  width: 16px;
  height: 16px;
}

.jingle-player {
  width: 100%;
  box-sizing: border-box;
}

.jingle-player[hidden] {
  display: none;
}

.jingle-player__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.jingle-player__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.jingle-player__plays {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.jingle-player__plays-icon {
  display: inline-flex;
  line-height: 0;
}

.jingle-player__plays-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

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

.jingle-player__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: var(--accent);
  color: #000;
  cursor: pointer;
}

.jingle-player__play:hover,
.jingle-player__play:focus-visible {
  filter: brightness(1.08);
  outline: none;
}

.jingle-player__play-icon {
  display: inline-flex;
}

.jingle-player__play-icon--stop {
  display: none;
}

.jingle-player--playing .jingle-player__play-icon--play {
  display: none;
}

.jingle-player--playing .jingle-player__play-icon--stop {
  display: inline-flex;
}

.jingle-player__track {
  flex: 1;
  min-width: 0;
}

.jingle-player__progress-wrap {
  cursor: pointer;
  padding: 6px 0;
}

.jingle-player__progress {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.jingle-player__progress-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.1s linear;
}

.jingle-player--toolbar .jingle-player__play,
.jingle-player--sidebar .jingle-player__play {
  background: #fff;
  color: #000;
}

.jingle-player--toolbar .jingle-player__progress,
.jingle-player--sidebar .jingle-player__progress {
  background: rgba(255, 255, 255, 0.28);
}

.jingle-player--toolbar .jingle-player__progress-bar,
.jingle-player--sidebar .jingle-player__progress-bar {
  background: #fff;
}

[data-theme="light"] .jingle-player--toolbar .jingle-player__play,
[data-theme="light"] .jingle-player--sidebar .jingle-player__play {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.jingle-player__times {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.jingle-player__credits {
  margin: 6px 0 0;
  line-height: 1.35;
  font-style: italic;
}

.jingle-player--sidebar .jingle-player__credits {
  font-size: 0.78rem;
}

.jingle-player--toolbar .jingle-player__credits {
  text-align: center;
}

.jingle-player__audio {
  display: none;
}

.weather-widget-mount--mobile {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 1079;
  padding: 8px 12px 0;
  pointer-events: none;
}

.weather-widget-mount--mobile:not([hidden]) {
  pointer-events: auto;
}

.weather-widget-mount--mobile[hidden] {
  display: none;
}

.weather-widget--toolbar {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .weather-widget--toolbar {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
}

#weather-widget[hidden] {
  display: none;
}

.weather-toggle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
}

.weather-toggle:hover,
.weather-toggle:focus-visible {
  background: var(--surface);
  outline: none;
}

.weather-toggle--active,
.weather-toggle--active .nav__icon,
.weather-toggle--active .nav__icon svg {
  color: var(--accent);
}

.weather-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.weather-toggle__icon-fallback {
  display: inline-flex;
}

.weather-toggle__icon-fallback svg {
  width: 22px;
  height: 22px;
}

.weather-toggle__icon-fallback[hidden] {
  display: none;
}

.weather-toggle__icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.weather-toggle__icon-img[hidden] {
  display: none;
}

.mobile-top-bar__actions {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

@media (min-width: 701px) {
  .home-timeline-header__actions {
    display: inline-flex;
  }
}

@media (max-width: 700px) {
  .home-timeline-header__jingle {
    display: none !important;
  }
}

@media (min-width: 1101px) {
  .jingle-player-mount--mobile {
    display: none !important;
  }

  .weather-widget-mount--mobile,
  .mobile-top-bar__weather,
  .weather-toggle.mobile-top-bar__weather {
    display: none !important;
  }

  .home-timeline-header__actions,
  .home-timeline-header__jingle,
  .mobile-top-bar__jingle,
  .jingle-toggle.mobile-top-bar__jingle {
    display: none !important;
  }
}

.feed-new-posts {
  display: block;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

.feed-new-posts[hidden] {
  display: none;
}

.feed-new-posts:not([hidden]) {
  animation: feed-new-posts-drop 0.2s ease-out;
}

.feed-new-posts--fade-out {
  animation: feed-new-posts-fade-out 0.35s ease forwards;
}

@keyframes feed-new-posts-drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes feed-new-posts-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.feed-new-posts__line {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 10px 16px;
  border: none;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #ffd400;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.feed-new-posts__line::before,
.feed-new-posts__line::after {
  content: '';
  flex: 1;
  height: 0;
  border-top: 2px dashed #ffd400;
  transition: border-color 0.15s ease;
}

.feed-new-posts__text {
  flex-shrink: 0;
  white-space: nowrap;
}

.feed-new-posts__line:hover,
.feed-new-posts__line:focus-visible {
  background: rgba(255, 212, 0, 0.04);
  color: #ffe34d;
  outline: none;
}

.feed-new-posts__line:hover::before,
.feed-new-posts__line:hover::after,
.feed-new-posts__line:focus-visible::before,
.feed-new-posts__line:focus-visible::after {
  border-top-color: #ffe34d;
}

.feed-new-posts__line:disabled {
  opacity: 0.7;
  cursor: wait;
}

.feed-add-sleeper {
  display: flex;
  justify-content: center;
  padding: 20px 16px 12px;
  margin-top: 8px;
}

.feed-add-sleeper__btn {
  border: 2px dashed #71767b;
  border-radius: 999px;
  padding: 8px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #71767b;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.feed-add-sleeper__btn:hover,
.feed-add-sleeper__btn:focus-visible {
  background: rgba(113, 118, 123, 0.08);
  border-color: #8b9198;
  color: #8b9198;
  outline: none;
}

.feed-add-sleeper__btn:active {
  transform: scale(0.98);
}

.feed-add-sleeper__btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.sleeper-compose-modal__panel {
  max-width: 520px;
}

.sleeper-compose-modal__body {
  padding: 0 20px 20px;
}

.sleeper-compose-modal__gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 0 1.5rem;
}

.sleeper-compose-modal__gate-message {
  margin: 0;
  max-width: 18rem;
}

.sleeper-compose-modal__gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: center;
}

.sleeper-compose-modal__preview-view {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.sleeper-compose-modal__preview-view[hidden],
.sleeper-compose-modal__gate[hidden],
.sleeper-compose-modal__search-view[hidden] {
  display: none !important;
}

.sleeper-compose-preview-notice {
  margin: 0;
  text-align: center;
}

.sleeper-compose-preview-notice a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sleeper-compose-modal__body:not(.sleeper-compose-modal__body--has-selection) [data-sleeper-post] {
  display: none !important;
}

.sleeper-compose-modal__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffd400;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.sleeper-compose-modal__back:hover,
.sleeper-compose-modal__back:focus-visible {
  color: #ffe34d;
  outline: none;
}

.tweet__sleeper {
  margin-top: 8px;
}

.tweet__sleeper .profile-song-card {
  margin: 0;
  position: relative;
  z-index: 1;
}

.tweet__sleeper .profile-song-card__play {
  position: relative;
  z-index: 2;
}

.tweet__quoted .tweet__sleeper {
  margin-top: 8px;
}

.tweet__quoted .tweet__sleeper .profile-song-card {
  margin: 0;
  padding: 10px;
}

.tweet-repost-entry__banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 4px 52px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

.stations-bar {
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.stations-bar::-webkit-scrollbar { display: none; }
.stations-bar[hidden] { display: none; }

@media (min-width: 701px) {
  .stations-bar {
    display: none !important;
  }
}

.stations-bar__track {
  display: flex;
  gap: 8px;
  width: max-content;
}
.stations-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  height: 44px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  min-width: 200px;
  max-width: 300px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at top left, rgba(124, 58, 237, 0.58), transparent 36%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.34), transparent 30%),
    #050505;
  border: 1px solid rgba(167, 139, 250, 0.435);
  box-shadow: rgba(238, 39, 144, 0.137) 0px 0px 0px 1px inset, rgba(124, 58, 237, 0.247) 0px 0px 18px 0px, rgba(0, 0, 0, 0.28) 0px 6px 18px 0px;
  animation: spaceStartButtonPulse 3.6s ease-in-out infinite;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.stations-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 100%, rgba(167, 139, 250, 0.16), transparent 52%);
  opacity: 0.7;
  transition: opacity 160ms ease;
}
.stations-pill:hover {
  border-color: rgba(167, 139, 250, 0.72);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2) inset, 0 0 28px rgba(124, 58, 237, 0.3), 0 12px 30px rgba(0,0,0,0.36);
}
.stations-pill:hover::before { opacity: 1; }
.stations-pill-card {
  flex-shrink: 0;
  min-width: 180px;
  max-width: 240px;
  position: relative;
  cursor: pointer;
}
.stations-pill-card .stations-pill__close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  color: var(--muted-foreground);
  font-size: 14px;
  cursor: pointer;
  z-index: 1;
}
/* Pulsing live dot, same treatment as the community live card, scaled down. */
.stations-pill__dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: livePulse 1.5s ease-in-out infinite;
}
.stations-pill__avatar,
.stations-pill__avatar-fallback {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  object-fit: cover;
  flex-shrink: 0;
}
/* Fixed height: the speakers stack on top of each other so the cross-fade has
   nothing to reflow, which means the track can't jitter as names change width. */
.stations-pill__speakers {
  position: relative;
  flex: 1;
  height: 32px;
  overflow: hidden;
  min-width: 0;
}
.stations-pill__speaker {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  inset: 0;
  min-width: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.stations-pill__speaker--active {
  opacity: 1;
  transform: translateY(0);
}
/* Fills the speaker track so the name centres against the avatar rather than
   sitting on a 20px line box pinned near the top of it. */
.stations-pill__text-slot {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
/* Optical centring. `line-height` is no use here: the name is flex-centred, so
   a taller line box just grows symmetrically and the baseline stays put. What
   pulls the glyphs up is an asymmetric box — system-ui's ascent/descent is
   lopsided (Segoe UI 1.079/0.251em), dropping the baseline ~0.8px below the
   pill's centre line, and 1px of bottom padding lifts it back by half that.
   Padding rather than translateY because --scrolling below owns the transform. */
.stations-pill__name {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
  line-height: 1;
  padding-bottom: 1px;
}
/* Long "Name · Station Title" strings marquee instead of truncating. The
   distance is measured in JS and handed over as a custom property. */
.stations-pill__name--scrolling {
  animation: pillTextScroll 8s linear infinite;
}
@keyframes pillTextScroll {
  0% { transform: translateX(0); }
  10% { transform: translateX(0); }
  90% { transform: translateX(var(--scroll-distance, 0)); }
  100% { transform: translateX(var(--scroll-distance, 0)); }
}

@media (prefers-reduced-motion: reduce) {
  .stations-pill { animation: none; }
  .stations-pill__dot { animation: none; }
  .stations-pill__speaker {
    transition: none;
    transform: none;
  }
  .stations-pill__name--scrolling {
    animation: none;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}
.stations-pill__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  display: none;
}
/* The bigger offender of the two: U+00D7 is drawn on the font's math axis,
   ~0.26em above the baseline, not on the cap block the dot and avatar read
   against — so a perfectly centred box still lands the glyph ~2px low. transform
   is safe here (nothing animates this button) and leaves the hit box untouched. */
.stations-pill__close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 15px;
  cursor: pointer;
  padding: 0 0 0 2px;
  line-height: 1;
  flex-shrink: 0;
  transform: translateY(-2px);
}
.stations-pill__close:hover { color: #fff; }

.tabs__link {
  flex: 1;
  text-align: center;
  padding: 14px 8px;
  font-weight: 700;
  color: var(--muted-foreground);
  border-bottom: 2px solid transparent;
}

.tabs__link:hover {
  background: var(--bg-secondary);
  text-decoration: none;
}

.tabs__link--active {
  color: var(--foreground);
  border-bottom-color: var(--accent);
}

.composer {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
}

.composer__main {
  flex: 1;
  min-width: 0;
}

.textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  background: var(--bg);
  color: var(--foreground);
  border: 0;
  font: inherit;
  outline: none;
}

.composer .textarea {
  font-size: 20px;
  overflow-y: hidden;
  resize: none;
  field-sizing: content;
}

.composer:not(.composer--modal) .textarea {
  min-height: unset;
}

.reply-composer .textarea {
  overflow-y: hidden;
  resize: none;
  field-sizing: content;
}

.mention-compose-field {
  position: relative;
}

.mention-compose-highlight {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--foreground);
  pointer-events: none;
}

.mention-compose__mention {
  color: var(--accent);
  font-weight: 600;
}

.mention-compose__url {
  color: var(--accent);
}

.mention-compose-field > .textarea {
  position: relative;
  z-index: 1;
  display: block;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--foreground);
}

.mention-compose-field > .textarea:placeholder-shown {
  color: var(--muted-foreground);
  -webkit-text-fill-color: var(--muted-foreground);
}

.mention-compose-field > .textarea::placeholder {
  color: var(--muted-foreground);
  -webkit-text-fill-color: var(--muted-foreground);
  opacity: 1;
}

.mention-compose-field > .textarea::selection {
  color: var(--foreground);
  -webkit-text-fill-color: var(--foreground);
  background: rgba(29, 155, 240, 0.35);
}

.mention-suggest {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.mention-suggest[hidden] {
  display: none !important;
}

.mention-suggest__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mention-suggest__item:last-child {
  border-bottom: 0;
}

.mention-suggest__item:hover,
.mention-suggest__item--active {
  background: var(--surface-hover);
}

.mention-suggest__name {
  font-weight: 800;
}

.mention-suggest__handle {
  color: var(--muted-foreground);
  font-size: 0.92rem;
}

.composer__preview-wrap {
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  max-height: 280px;
  position: relative;
}

.composer__preview-img {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  background: var(--surface-hover);
}

.composer__preview-video {
  display: block;
  width: 100%;
  max-height: 280px;
  background: var(--surface-hover);
}

.composer__preview-wrap[hidden] {
  display: none !important;
}

.composer__preview-video[hidden],
.composer__preview-img[hidden],
.composer__preview-carousel[hidden],
.composer__preview-carousel-img[hidden] {
  display: none !important;
}

.composer__preview-wrap--stream-ready {
  position: relative;
}

.composer__preview-wrap--stream-ready::after {
  content: 'Ready to post';
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  pointer-events: none;
}

.composer__preview-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.composer__preview-remove:hover {
  background: rgba(39, 44, 48, 0.9);
}

.composer__preview-remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.composer__edit-photo-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.composer__edit-photo-btn:hover {
  background: rgba(0, 0, 0, 0.88);
}

.composer-image-editor-modal__panel {
  max-width: 480px;
}

.composer-image-editor-modal__canvas {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 0;
}

.composer-image-editor-modal__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.composer-image-editor-modal__nav-btn {
  min-width: 40px;
  padding: 6px 10px;
  font-size: 1.1rem;
  line-height: 1;
}

.composer-image-editor-modal__counter {
  font-size: 0.875rem;
  color: var(--muted, #71767b);
  min-width: 4.5rem;
  text-align: center;
}

.composer__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(239, 243, 244, 0.12);
}

.composer__filename {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer__toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

@media (min-width: 701px) {
  .composer__toolbar-right {
    margin-left: auto;
  }
}

.composer__toolbar .btn-primary {
  padding-top: 4px;
  padding-bottom: 4px;
  font-weight: 800;
}

.composer__media-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  padding: 0;
  background: transparent;
  border-radius: 999px;
  color: var(--muted-foreground);
  cursor: pointer;
  flex-shrink: 0;
}

.composer__media-btn:hover {
  background: var(--surface);
  color: var(--muted-foreground);
}

.composer__media-btn svg {
  display: block;
}

.composer__media-btn:focus-visible {
  outline: 2px solid var(--border2);
  outline-offset: 2px;
}


.composer__media-btn--active,
.composer__media-btn--active:hover {
  color: var(--accent);
}

.composer__media-btn--disabled,
.composer__media-btn--disabled:hover,
label.composer__media-btn--disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

.composer__poll {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
}

.composer__poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.composer__poll-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.composer__poll-option-row[hidden] {
  display: none !important;
}

.composer__poll-option-photo {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

.composer__poll-option-photo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}

.composer__poll-option-photo-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.composer__poll-option-photo--filled .composer__poll-option-photo-btn {
  opacity: 0;
  pointer-events: none;
}

.composer__poll-option-photo-preview {
  position: absolute;
  inset: 0;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.composer__poll-option-photo-clear {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(15, 20, 25, 0.75);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.composer__poll-input {
  width: 100%;
  flex: 1;
  min-width: 0;
}

.composer__poll-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.composer__poll-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.composer__poll-length {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.composer__poll-length-label {
  color: var(--muted-foreground);
  font-size: 0.9rem;
}

.composer__poll-expires {
  min-width: 110px;
}

.composer__poll-remove {
  margin-left: auto;
  border: none;
  background: transparent;
  color: #f4212e;
  cursor: pointer;
  font-size: 0.9rem;
}

.tweet__poll {
  margin-top: 12px;
  max-width: 100%;
}

.tweet__poll-meta {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.tweet__poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tweet__poll-option {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  text-align: left;
  overflow: hidden;
}

.tweet__poll-option--vote {
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
}

.tweet__poll-option--vote:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.tweet__poll-option--vote:disabled {
  opacity: 0.6;
  cursor: wait;
}

.tweet__poll--results .tweet__poll-option--result {
  border-radius: 10px;
  border-color: transparent;
  background: var(--input-filled-bg);
}

.tweet__poll-option--result {
  border-color: var(--border);
}

.tweet__poll-option--chosen {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.tweet__poll-option-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(29, 155, 240, 0.22);
  border-radius: 10px;
  z-index: 0;
  transition: width 0.35s ease;
}

.tweet__poll-option-bar--chosen {
  background: rgba(29, 155, 240, 0.42);
}

.tweet__poll-option-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
}

.tweet__poll-option-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.tweet__poll-option-text {
  min-width: 0;
}

.tweet__poll-option-check {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--accent);
}

.tweet__poll-option-check svg {
  display: block;
}

.tweet__poll-option--chosen .tweet__poll-option-label,
.tweet__poll-option--chosen .tweet__poll-option-stat {
  font-weight: 700;
}

.tweet__poll-option-stat {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.tweet__poll-option--chosen .tweet__poll-option-stat {
  color: var(--accent);
}

.tweet__poll-login {
  margin: 8px 0 0;
}

.tweet__poll--media .tweet__poll-carousel {
  position: relative;
}

.tweet__poll--media .tweet__poll-options--carousel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  gap: 8px;
  padding: 0;
  background: transparent;
}

.tweet__poll--media .tweet__poll-options--carousel::-webkit-scrollbar {
  display: none;
}

.tweet__poll--media .tweet__poll-slide {
  flex: 0 0 68%;
  width: 68%;
  max-width: 68%;
  scroll-snap-align: start;
  min-width: 68%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.tweet__poll--media .tweet__poll-carousel[data-poll-gallery-count="1"] .tweet__poll-slide {
  flex-basis: 100%;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
}

.tweet__poll--media .tweet__poll-slide-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: var(--input-filled-bg, var(--bg));
}

.tweet__poll--media .tweet__poll-slide-media img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.tweet__poll--media .tweet__poll-slide-placeholder {
  width: 100%;
  height: 100%;
  background: var(--input-filled-bg, var(--bg));
  border-radius: 12px;
}

.tweet__poll--media .tweet__poll-option {
  border-radius: 999px;
}

.tweet__poll--media.tweet__poll--results .tweet__poll-option--result {
  border-radius: 10px;
}

.tweet__poll-carousel-btn {
  position: absolute;
  top: 22%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.tweet__poll-carousel-btn--prev {
  left: 6px;
}

.tweet__poll-carousel-btn--next {
  right: 6px;
}

.tweet__poll-carousel-btn[hidden],
.tweet__poll-carousel-btn:disabled {
  display: none !important;
}

.tweet__quoted .tweet__poll--media .tweet__poll-slide {
  flex-basis: 72%;
  width: 72%;
  max-width: 72%;
  min-width: 72%;
}

.tweet__quoted .tweet__poll--media .tweet__poll-slide-media img {
  max-height: 180px;
}

.composer__emoji-wrap {
  position: relative;
}

.emoji-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  width: min(288px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.composer:not(.composer--modal) .emoji-picker {
  bottom: auto;
  top: calc(100% + 8px);
}

.emoji-picker[hidden] {
  display: none !important;
}

.emoji-picker__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.emoji-picker__btn:hover {
  background: var(--surface);
}

.composer__gif-wrap {
  position: relative;
}

.composer__gif-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

.composer__gif-wrap[data-gif-selected="1"] .composer__gif-btn {
  color: var(--accent);
}

.composer__gif-preview-wrap {
  position: relative;
  width: min(100%, 520px);
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-hover);
}

.composer__gif-preview-wrap[hidden] {
  display: none !important;
}

.composer__gif-preview-img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.composer__gif-preview-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.composer__gif-preview-remove:hover {
  background: rgba(39, 44, 48, 0.9);
}

.composer__gif-preview-remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.gif-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 100;
  width: min(336px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.composer:not(.composer--modal) .gif-picker {
  bottom: auto;
  top: calc(100% + 8px);
}

.gif-picker[hidden] {
  display: none !important;
}

.gif-picker__search {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--bg);
  color: var(--foreground);
}

.gif-picker__search:focus {
  outline: none;
  border-color: var(--accent);
}

.gif-picker__status {
  min-height: 18px;
  margin: 8px 2px;
}

.gif-picker__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.gif-picker__item {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-hover);
  cursor: pointer;
}

.gif-picker__item:hover {
  border-color: var(--muted-foreground);
}

.gif-picker__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.gif-picker__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.gif-picker-modal-open {
  overflow: hidden;
}

.gif-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

.gif-picker-modal[hidden] {
  display: none !important;
}

.gif-picker-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.72);
  cursor: pointer;
}

.gif-picker-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  height: min(75dvh, 520px);
  margin-top: 8vh;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.gif-picker-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.gif-picker-modal__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.gif-picker-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.gif-picker-modal__close:hover,
.gif-picker-modal__close:focus-visible {
  background: transparent;
}

.gif-picker-modal__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 12px 16px 16px;
}

.gif-picker.gif-picker--mobile {
  position: static;
  inset: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gif-picker.gif-picker--mobile .gif-picker__search {
  flex-shrink: 0;
}

.gif-picker.gif-picker--mobile .gif-picker__status {
  flex-shrink: 0;
}

.gif-picker.gif-picker--mobile .gif-picker__grid {
  --gif-cell-size: calc((min(420px, 100vw - 32px) - 40px) / 2);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--gif-cell-size);
  align-content: start;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.gif-picker.gif-picker--mobile .gif-picker__item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-hover);
  cursor: pointer;
  box-sizing: border-box;
  aspect-ratio: auto;
  min-height: 0;
  min-width: 0;
}

.gif-picker.gif-picker--mobile .gif-picker__item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav-user__summary:focus {
  outline: none;
}

.nav-user__summary:focus-visible .nav-user__summary-inner {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.input,
.input[type="file"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--foreground);
  font: inherit;
}

.handle-field {
  position: relative;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  box-sizing: border-box;
}

.handle-field:focus-within {
  border-color: var(--border2);
  box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.45);
}

.handle-field__at,
.handle-field__prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  color: var(--muted-foreground);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
}

.handle-field__prefix svg {
  display: block;
}

.handle-field[data-login-type="handle"] .handle-field__prefix--email {
  display: none;
}

.handle-field[data-login-type="email"] .handle-field__prefix--handle {
  display: none;
}

.handle-field__input.input {
  position: relative;
  width: 100%;
  border: none;
  border-radius: 8px;
  background: transparent;
  padding: 12px 14px 12px 32px;
  box-sizing: border-box;
}

.handle-field--with-status .handle-field__input.input {
  padding-right: 48px;
}

.handle-field__input.input:focus {
  outline: none;
}

.input-status-field {
  position: relative;
  width: 100%;
}

.input-status-field__input.input {
  padding-right: 48px;
}

.availability-icon {
  display: none;
  position: absolute;
  right: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  box-sizing: border-box;
  z-index: 2;
}

.availability-icon--checking,
.availability-icon--success,
.availability-icon--error {
  display: block;
}

.availability-icon--checking {
  border: 2px solid rgba(255, 212, 0, 0.35);
  border-top-color: #ffd400;
  border-radius: 999px;
  animation: availability-spin 0.75s linear infinite;
}

.availability-icon--success,
.availability-icon--error {
  border-radius: 999px;
}

.availability-icon--success {
  border: 1px solid rgba(0, 186, 124, 0.55);
  background: rgba(0, 186, 124, 0.14);
}

.availability-icon--success::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid #00ba7c;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.availability-icon--error {
  border: 1px solid rgba(244, 33, 46, 0.55);
  background: rgba(244, 33, 46, 0.14);
}

.availability-icon--error::before,
.availability-icon--error::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 8px;
  height: 2px;
  background: #f4212e;
  border-radius: 2px;
}

.availability-icon--error::before {
  transform: rotate(45deg);
}

.availability-icon--error::after {
  transform: rotate(-45deg);
}

@keyframes availability-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

.label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 6px 0 2px;
  color: var(--foreground);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tweet {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.tweet > .tweet__avatar .avatar--md {
  width: 40px;
  height: 40px;
  font-size: 0.95rem;
}

.tweet-avatar-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  border-radius: 50%;
}

.tweet__avatar-wrap {
  cursor: pointer;
  line-height: 0;
  border-radius: 50%;
}

.tweet-avatar-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tweet:hover {
  background: var(--bg-secondary);
}

.tweet--clickable {
  cursor: pointer;
}

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

.tweet__hidden-label {
  flex: 1;
  min-width: 0;
}

.tweet__body {
  flex: 1;
  min-width: 0;
}

.tweet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.tweet__header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.tweet__identity {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.tweet__name {
  font-weight: 800;
}

.tweet__menu-wrap {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}

.tweet__menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
}

.tweet__menu-trigger:hover {
  background: rgba(239, 243, 244, 0.1);
  color: var(--foreground);
}

.tweet__menu-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tweet__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 220px;
  padding: 6px 0;
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
  z-index: 100;
}

.tweet__menu-follow-form {
  margin: 0;
}

.tweet__menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

a.tweet__menu-item:hover,
button.tweet__menu-item:hover:not(:disabled) {
  background: var(--surface);
}

.tweet__menu-item--submit {
  border-radius: 0;
}

.tweet__menu-item--inactive {
  color: var(--muted-foreground);
  cursor: default;
}

.tweet__menu-item--danger {
  color: #f4212e;
}

.tweet__menu-item--danger:hover {
  background: rgba(244, 33, 46, 0.1);
}

.tweet__menu-item--danger .tweet__menu-icon {
  color: inherit;
}

.tweet__menu-item--disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

.tweet__menu-item--checking {
  opacity: 0.8;
  pointer-events: none;
  cursor: wait;
}

.tweet__menu-download-label {
  flex: 1;
  min-width: 0;
}

.tweet__menu-download-spinner {
  width: 12px;
  height: 12px;
  margin-left: auto;
  border: 2px solid rgba(167, 139, 250, 0.25);
  border-top-color: rgba(249, 24, 128, 0.9);
  border-radius: 999px;
  animation: catalogLoadSpin 0.8s linear infinite;
  flex-shrink: 0;
}

.tweet__menu-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--foreground);
}

.tweet__menu-item--inactive .tweet__menu-icon {
  color: var(--muted-foreground);
}

.tweet__menu-item--unfollow,
.tweet__menu-item--unfollow .tweet__menu-icon {
  color: #fff;
}

button.tweet__menu-item--unfollow:hover:not(:disabled) {
  background: var(--surface);
  color: #fff;
}

button.tweet__menu-item--unfollow:hover:not(:disabled) .tweet__menu-icon {
  color: #fff;
}

body.tweet-dialog-open {
  overflow: hidden;
}

.tweet-dialog {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

.tweet-dialog[hidden] {
  display: none !important;
}

.tweet-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.tweet-dialog__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  padding: 20px 20px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}

.tweet-dialog__panel--compact {
  max-width: 720px;
}

.tweet-dialog__title {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 800;
}

.tweet-dialog__text {
  margin: 0 0 18px;
  line-height: 1.45;
}

.tweet-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.tweet-dialog__actions--single {
  justify-content: stretch;
}

.tweet-dialog__actions--single .btn {
  width: 100%;
}

.tweet-dialog__delete-form {
  display: inline-flex;
  margin: 0;
  gap: 10px;
  align-items: center;
}

.tweet-dialog__panel--edit {
  width: min(100%, 32rem);
}

.report-categories {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 12px 0;
}

.report-category-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s;
}

.report-category-btn:hover { background: var(--surface-hover); }
.report-category-btn:last-child { border-bottom: none; }
.report-category-btn:disabled { cursor: default; opacity: 0.6; }

.report-category-btn__label { font-weight: 700; font-size: 0.95rem; color: var(--foreground); }
.report-category-btn__desc { font-size: 0.8rem; }

.tweet-edit__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tweet-edit__label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

.tweet-edit__textarea {
  min-height: 96px;
}

.tweet-edit__thumb-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tweet-edit__downloads-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tweet-edit__download-input {
  width: 100%;
}

.tweet-edit__preview-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
  background: var(--bg);
}

.tweet-edit__preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tweet-edit__mode-tabs {
  display: flex;
  gap: 8px;
}

.tweet-edit__mode-btn {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--foreground);
  font-size: 0.8125rem;
  cursor: pointer;
}

.tweet-edit__mode-btn--active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.tweet-edit__slider {
  width: 100%;
}

.tweet-edit__slider-label {
  margin: 6px 0 0;
}

.tweet-edit__hint {
  margin: 0;
}

.tweet-edit__file-btn {
  align-self: flex-start;
}

.tweet-edit__error {
  margin: 0;
}

.tweet__meta,
.tweet__time {
  color: var(--muted-foreground);
  font-size: 0.9rem;
}

/* Keep relative times like "just now" on one line; without this, a tight
   header (long name/handle + community badge) can shrink the <time> and wrap. */
.tweet__time {
  flex: 0 0 auto;
  white-space: nowrap;
}

.tweet__text {
  margin-top: 4px;
  line-height: 1.4;
  word-break: break-word;
}

.tweet__mention {
  color: var(--accent);
  font-weight: 600;
}

.tweet__hashtag {
  color: var(--accent);
  text-decoration: none;
}
.tweet__hashtag:hover {
  text-decoration: underline;
}

.tweet__space {
  margin-top: 10px;
}

.tweet__space .space-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.34), transparent 34%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.16), transparent 28%),
    var(--surface);
  box-shadow: 0 0 28px rgba(124, 58, 237, 0.12);
}

.tweet__space .space-card__link {
  align-items: center;
  padding: 14px;
}

.tweet__space .space-card__link:hover {
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.4), transparent 34%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.2), transparent 28%),
    var(--bg-secondary);
}

.space-card__cta {
  display: none;
}

.tweet__space .space-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  margin-top: 14px;
  padding: 0 14px;
  border: 1px solid rgba(247, 249, 249, 0.9);
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1;
  box-sizing: border-box;
}

.tweet__space .space-card--ended .space-card__cta {
  border-color: rgb(247 249 249 / 45%);
  color: var(--muted-foreground);
}

@media (hover: hover) and (pointer: fine) {
  .tweet__space .watch-party-card .space-card__cta:hover {
    border-color: rgba(167, 139, 250, 0.75);
    background: rgba(124, 58, 237, 0.18);
    color: #fff;
    transform: translateY(-1px);
  }
}

/* Timeline livestream embeds: landscape video on top, details below (like YouTube cards) */
.tweet__space .watch-party-card .space-card__link {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.tweet__space .watch-party-card__thumb {
  flex: none;
  width: 100%;
  border-radius: 0;
  aspect-ratio: 16 / 9;
}

.tweet__space .watch-party-card .space-card__body {
  padding: 14px;
}

.tweet__space .watch-party-card__episode {
  margin-top: 6px;
}

.tweet__media {
  margin-top: 10px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.tweet__media img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  touch-action: manipulation;
  -webkit-user-drag: none;
}

/* Multi-image gallery: horizontal swipe carousel */
.tweet__media-group--gallery {
  margin-top: 10px;
}

.tweet__media-group--gallery .tweet__media--gallery {
  margin-top: 0;
}

.tweet__media--gallery {
  position: relative;
  overflow: visible;
  border: none;
  background: transparent;
}

.tweet__media--gallery .tweet__media-gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  gap: 8px;
  padding: 0;
  background: transparent;
}

.tweet__media--gallery .tweet__media-gallery::-webkit-scrollbar {
  display: none;
}

.tweet__media--gallery .tweet__media-gallery__item {
  flex: 0 0 68%;
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.tweet__media--gallery[data-gallery-count="1"] .tweet__media-gallery__item {
  flex-basis: 100%;
}

.tweet__media--gallery .tweet__media-gallery__item img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 12px;
}

/* Quoted galleries: keep the same height budget as regular feed media so
   images aren't half-cropped by a tighter max-height inside the 4:3 frame. */
.tweet__media--gallery .tweet__media-gallery--quoted .tweet__media-gallery__item {
  max-height: 360px;
}

.tweet__media-gallery--quoted .tweet__media-gallery__item img {
  max-height: 360px;
}

.tweet__media-gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.tweet__media-gallery-btn--prev {
  left: 6px;
}

.tweet__media-gallery-btn--next {
  right: 6px;
}

.tweet__media-gallery-btn[hidden],
.tweet__media-gallery-btn:disabled {
  display: none !important;
}

.notif-row__media .tweet__media-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  width: 100%;
  height: 100%;
}

.notif-row__media .tweet__media-gallery__item {
  aspect-ratio: auto;
  overflow: hidden;
}

.notif-row__media .tweet__media-gallery__item img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
}

.composer__preview-wrap--multi {
  border: none;
  border-radius: 0;
  overflow: visible;
  max-height: none;
  padding: 0;
}

.composer__preview-wrap--multi .composer__preview-carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
}

.composer__preview-wrap--multi .composer__preview-carousel-track::-webkit-scrollbar {
  display: none;
}

.composer__preview-wrap--multi .composer__preview-carousel-slide {
  position: relative;
  flex: 0 0 68%;
  scroll-snap-align: start;
}

.composer__preview-wrap--multi.composer__preview-carousel--single .composer__preview-carousel-slide {
  flex-basis: 100%;
}

.composer__preview-wrap--multi .composer__preview-carousel-img {
  display: block;
  width: 100%;
  max-height: min(420px, 52vh);
  object-fit: cover;
  border-radius: 12px;
}

.composer__preview-wrap--multi .composer__preview-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.composer__preview-wrap--multi .composer__preview-carousel-btn--prev {
  left: 8px;
}

.composer__preview-wrap--multi .composer__preview-carousel-btn--next {
  right: 8px;
}

.composer__preview-wrap--multi .composer__preview-carousel-btn:hover {
  background: rgba(0, 0, 0, 0.82);
}

.composer__preview-wrap--multi .composer__preview-carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.composer__preview-wrap--multi .composer__preview-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: 8px;
}

.composer__preview-wrap--multi .composer__preview-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-foreground);
  opacity: 0.4;
  border: none;
  padding: 0;
  cursor: pointer;
}

.composer__preview-wrap--multi .composer__preview-carousel-dot--active {
  opacity: 1;
  transform: scale(1.2);
}

.composer__preview-wrap--multi .composer__preview-carousel-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.composer__preview-wrap--multi .composer__preview-carousel-edit {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
}

.composer__preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 4px;
}

.composer__preview-grid__item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-hover);
}

.composer__preview-grid__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.composer__preview-grid__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.composer__preview-grid__edit {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 2px 8px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}

.tweet__media video {
  display: block;
  width: 100%;
  max-height: 420px;
  background: var(--bg);
  touch-action: manipulation;
}

.tweet__media-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg);
}

/* Feed Stream videos: full content width; center video; preserve aspect (no crop). */
.tweet__media--stream {
  background: #000;
}

.tweet__media--stream .tweet__media-player,
.tweet__media--stream .tweet__clip-player {
  --stream-max-h: 520px;
  aspect-ratio: var(--stream-aspect, 16 / 9);
  width: 100%;
  max-height: var(--stream-max-h);
  min-height: 0;
  background: #000;
}

.tweet__media--stream.tweet__media--quoted .tweet__media-player,
.tweet__media--stream.tweet__media--quoted .tweet__clip-player {
  --stream-max-h: 420px;
}

.tweet__video-facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--bg);
  cursor: pointer;
  touch-action: manipulation;
}

.tweet__media--stream .tweet__video-facade {
  background: #000;
}

.tweet__video-facade img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tweet__media--stream .tweet__video-facade img {
  object-fit: contain;
  object-position: center;
}

.tweet__video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.tweet__video-play::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 17px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}

.tweet__stream-iframe,
.tweet__media--stream iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tweet__video-processing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

.tweet__video-processing img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.tweet__media--stream .tweet__video-processing img {
  object-fit: contain;
}

.tweet__video-processing-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.875rem;
}

.tweet__media--stream:not([data-stream-status="error"]) .tweet__video-processing-label::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: jbp-stream-spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .tweet__media--stream:not([data-stream-status="error"]) .tweet__video-processing-label::before {
    animation: none;
  }
}

.composer__stream-progress {
  margin-top: 10px;
}

.composer__stream-progress-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
}

.composer__stream-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  transition: width 0.2s ease;
}

.composer__stream-progress-label {
  margin: 6px 0 0;
}

.feed .tweet__media > img,
.feed .tweet__media-gallery__item > img[data-feed-lightbox],
article.tweet .tweet__media > img[data-feed-lightbox],
article.tweet .tweet__media-gallery__item > img[data-feed-lightbox],
article.tweet .tweet__poll-slide-media > img[data-feed-lightbox] {
  cursor: zoom-in;
}

.tweet__clip {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
}

.tweet__clip-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg);
}

.tweet__clip-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tweet__clip-body {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-hover);
}

.tweet__clip-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  min-width: 0;
}

.tweet__clip-label {
  color: #acd628;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tweet__clip-time {
  font-size: 0.85rem;
}

.tweet__clip-snippet-wrap {
  position: relative;
  max-height: calc(1.45em * 2);
  overflow: hidden;
  cursor: pointer;
}

.tweet__clip-snippet-wrap::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.8em;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(22, 24, 28, 0), var(--surface-hover));
}

.tweet__clip-snippet-wrap:hover .tweet__clip-snippet,
.tweet__clip-snippet-wrap:focus-visible .tweet__clip-snippet {
  color: #fff;
}

.tweet__clip-snippet-wrap:focus-visible {
  outline: 2px solid var(--border2);
  outline-offset: 3px;
  border-radius: 6px;
}

.tweet__clip-snippet-wrap--expanded {
  max-height: none;
}

.tweet__clip-snippet-wrap--expanded::after {
  display: none;
}

.tweet__clip-snippet {
  margin: 0;
  color: var(--foreground);
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
}

.tweet__clip-snippet-wrap--expanded .tweet__clip-snippet {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.tweet__clip-link {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.tweet__link-card {
  margin-top: 10px;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  min-height: 96px;
}

.tweet__link-card-player {
  position: relative;
  flex: 0 0 130px;
  width: 130px;
  min-height: 96px;
  background: #000;
}

.tweet__link-card-facade .tweet__video-play {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
}

.tweet__link-card-facade .tweet__video-play::after {
  left: 15px;
  top: 11px;
  border-width: 9px 0 9px 14px;
}

.tweet__link-card-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tweet__link-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--foreground);
}

.tweet__link-card-body:hover {
  text-decoration: none;
}

.tweet__link-card-body:hover .tweet__link-card-title {
  text-decoration: none;
}

.tweet__link-card-domain {
  font-size: 13px;
  color: var(--muted-foreground);
}

.tweet__link-card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tweet__link-card-desc {
  font-size: 13px;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tweet--clickable .tweet__link-card {
  position: relative;
  z-index: 1;
}

@media (max-width: 520px) {
  .tweet__link-card {
    flex-direction: column;
  }

  .tweet__link-card-player {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}

.tweet__link-card-facade--plain {
  background: #000;
}

.tweet__link-card--youtube {
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 0;
}

.tweet__link-card--youtube .tweet__link-card-player,
.tweet__link-card--youtube .tweet__link-card-player--youtube {
  position: relative;
  flex: none;
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.tweet__link-card--youtube .tweet__link-card-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.tweet__link-card--youtube .tweet__link-card-facade .tweet__video-play {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
}

.tweet__link-card--youtube .tweet__link-card-facade .tweet__video-play::after {
  left: 24px;
  top: 18px;
  border-width: 14px 0 14px 22px;
}

@media (max-width: 520px) {
  .tweet__link-card--youtube .tweet__link-card-player,
  .tweet__link-card--youtube .tweet__link-card-player--youtube {
    aspect-ratio: 16 / 9;
    width: 100%;
    min-height: 0;
  }
}

.tweet__link-card--instagram,
.tweet__link-card--tiktok,
.tweet__link-card--snapchat {
  flex-direction: column;
  max-width: 320px;
  width: min(100%, 320px);
  margin-left: auto;
  margin-right: auto;
}

.tweet__link-card--twitter {
  flex-direction: column;
  max-width: 550px;
  width: min(100%, 550px);
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
  background: transparent;
}

.tweet__link-card--twitter .twitter-tweet,
.tweet__link-card--twitter .twitter-timeline {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.tweet__link-card--twitter iframe {
  max-width: 100% !important;
}

.tweet__link-card--twitter .tweet__link-card-body {
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.tweet__link-card--instagram .tweet__instagram-embed,
.tweet__link-card--tiktok .tweet__link-card-player,
.tweet__link-card--tiktok .tweet__link-card-player--tiktok,
.tweet__link-card--snapchat .tweet__snapchat-embed,
.tweet__link-card--snapchat .tweet__link-card-player {
  position: relative;
  flex: none;
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 9 / 16;
  background: #000;
  overflow: hidden;
}

.tweet__instagram-iframe,
.tweet__snapchat-iframe,
.tweet__snapchat-video,
.tweet__link-card--tiktok .tweet__link-card-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.tweet__snapchat-embed--image {
  display: block;
}

.tweet__snapchat-embed--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.tweet__snapchat-video {
  object-fit: contain;
}

@media (max-width: 520px) {
  .tweet__link-card--instagram .tweet__instagram-embed,
  .tweet__link-card--tiktok .tweet__link-card-player,
  .tweet__link-card--tiktok .tweet__link-card-player--tiktok,
  .tweet__link-card--snapchat .tweet__snapchat-embed,
  .tweet__link-card--snapchat .tweet__link-card-player {
    aspect-ratio: 9 / 16;
    width: 100%;
    min-height: 0;
  }
}

.tweet__url {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.tweet__url:hover {
  text-decoration: none;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.image-lightbox[hidden] {
  display: none !important;
}

.image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.image-lightbox__frame {
  position: relative;
  z-index: 1;
  max-width: min(96vw, 1200px);
  max-height: 92vh;
  overflow: visible;
}

.image-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  touch-action: none;
  transform-origin: center center;
  -webkit-user-select: none;
  user-select: none;
}

.image-lightbox__close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.image-lightbox__close:hover {
  opacity: 0.8;
}

.image-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.image-lightbox__nav:hover {
  background: rgba(0, 0, 0, 0.75);
}

.image-lightbox__nav--prev {
  left: 8px;
}

.image-lightbox__nav--next {
  right: 8px;
}

.image-lightbox__nav[hidden],
.image-lightbox__nav:disabled {
  display: none !important;
}

.tweet__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 12px;
  color: var(--muted-foreground);
  font-size: 0.85rem;
}

.tweet__bar-form {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  flex: 0 0 auto;
}

.tweet__bar > a.tweet__bar-item,
.tweet__bar > span.tweet__bar-item,
.tweet__bar > button.tweet__bar-item,
.tweet__bar > .tweet__repost-wrap {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  width: auto;
}

.tweet__bar > a.tweet__bar-item,
.tweet__bar > span.tweet__bar-item,
.tweet__bar > button.tweet__bar-item {
  justify-content: flex-start;
}

.tweet__bar-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 36px;
  width: auto;
  max-width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

.tweet__bar-item:hover {
  color: var(--accent);
  background: transparent;
}

.tweet__bar-item--reply:hover {
  color: var(--accent);
  background: transparent;
}

.tweet__bar-item--repost:hover,
.tweet__bar-item--reposted {
  color: #00ba7c;
  background: transparent;
}

.tweet__bar-item--like:hover {
  color: #f91880;
  background: transparent;
}

.tweet__bar-item--liked,
.tweet__bar-item--liked:hover {
  color: #f91880;
  background: transparent;
}

.tweet__bar-item--sleeper-like:hover {
  color: #f97316;
  background: transparent;
}

.tweet__bar-item--sleeper-like:not(.tweet__bar-item--liked) .tweet__bar-icon {
  opacity: 0.62;
}

.tweet__bar-item--sleeper-like:not(.tweet__bar-item--liked):hover .tweet__bar-icon {
  opacity: 1;
}

.tweet__bar-item--sleeper-like.tweet__bar-item--liked,
.tweet__bar-item--sleeper-like.tweet__bar-item--liked:hover {
  color: #f97316;
  background: transparent;
}

.tweet__bar-item--views {
  cursor: default;
  margin-right: 10px;
}

.tweet__bar-item--views:hover {
  color: inherit;
  background: transparent;
}

.tweet__bar-item--reply-restricted {
  cursor: default;
}

.tweet__bar-item--reply-restricted:hover {
  color: inherit;
  background: transparent;
}

.tweet__bar-count-label {
  font-size: 0.85rem;
}

.tweet__bar-icon {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.tweet__bar-icon svg {
  display: block;
  width: 19px;
  height: 19px;
}

.tweet__bar-count {
  font-variant-numeric: tabular-nums;
  min-width: 0;
}

/* Repost dropdown menu */
.tweet__repost-wrap {
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  min-width: 0;
}

.tweet__repost-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e6e8eb);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  min-width: 160px;
  z-index: 200;
  overflow: hidden;
}

.tweet__repost-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .95rem;
  text-align: left;
  color: inherit;
}

.tweet__repost-menu-item:hover {
  background: var(--hover-bg, #f7f9fa);
}

/* Quoted tweet card — inside a tweet */
.tweet__quoted {
  position: relative;
  display: block;
  margin-top: 10px;
  border: 1px solid var(--border, #e6e8eb);
  border-radius: 12px;
  padding: 12px;
  color: inherit;
  overflow: hidden;
}

.tweet__quoted--unavailable {
  color: var(--muted-foreground);
  font-style: italic;
}

.tweet__quoted__link {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  text-decoration: none;
}

.tweet__quoted:hover {
  background: var(--surface-hover);
}

.tweet__quoted:hover,
.tweet__quoted:hover a {
  text-decoration: none;
}

.tweet__quoted-header,
.tweet__quoted-text,
.tweet__quoted .tweet__media {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.tweet__quoted .tweet__sleeper,
.tweet__quoted .tweet__space,
.tweet__quoted .tweet__poll {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.tweet__quoted .tweet__poll {
  margin-top: 8px;
}

.tweet__quoted-text a {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.tweet__quoted--compose {
  margin-top: 10px;
  border: 1px solid var(--border, #e6e8eb);
  border-radius: 12px;
  padding: 12px;
  pointer-events: none;
}

#compose-modal-quote-preview[hidden],
#compose-modal-quote-preview:not(.tweet__quoted--compose) {
  display: none !important;
  margin: 0;
  padding: 0;
  border: 0;
}

.tweet__quoted-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
  margin-bottom: 4px;
}

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

.tweet__quoted-name {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tweet__quoted-handle {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted, #536471);
  font-size: .88rem;
  white-space: nowrap;
}

.tweet__quoted-time {
  flex: 0 0 auto;
  color: var(--muted, #536471);
  font-size: .88rem;
  white-space: nowrap;
}

.tweet__quoted-time::before {
  content: '·';
  margin-right: 4px;
}

.tweet__quoted-text {
  font-size: .95rem;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: break-word;
}

.tweet__media--quoted {
  margin-top: 8px;
  border-radius: 12px;
}

.tweet__media--quoted img,
.tweet__media--quoted video {
  max-height: 420px;
}

.tweet__media--quoted .tweet__media-player {
  max-height: 420px;
}

.tweet__video-facade--static {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: inherit;
  background: transparent;
}

.tweet__video-facade--static video {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  pointer-events: none;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  overflow: hidden;
  background: #333;
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar--sm {
  width: 40px;
  height: 40px;
  font-size: 0.92rem;
}

.avatar--md {
  width: 48px;
  height: 48px;
  font-size: 1.1rem;
}

.avatar--lg {
  width: 72px;
  height: 72px;
  font-size: 1.4rem;
}

.avatar--xl {
  width: 96px;
  height: 96px;
  font-size: 1.75rem;
}

.avatar__icon {
  display: none;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  line-height: 0;
}

.avatar--fallback .avatar__icon {
  display: inline-flex;
}

.avatar--fallback img {
  display: none;
}

.avatar--sm .avatar__icon svg {
  width: 18px;
  height: 18px;
}

.avatar--md .avatar__icon svg {
  width: 22px;
  height: 22px;
}

.avatar--lg .avatar__icon svg {
  width: 34px;
  height: 34px;
}

.avatar--xl .avatar__icon svg {
  width: 44px;
  height: 44px;
}

.avatar--fallback {
  color: rgba(255, 255, 255, 0.92);
}

.profile-cover {
  width: 100%;
  min-height: 150px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 -42px 38px -20px rgba(0, 0, 0, 0.88);
}

.profile-hero {
  position: relative;
}

.profile-back-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 20, 25, 0.65);
  backdrop-filter: blur(8px);
  color: #fff;
}

.profile-back-btn:hover,
.profile-back-btn:focus-visible {
  background: rgba(15, 20, 25, 0.85);
  text-decoration: none;
}

.profile-back-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.profile-back-btn svg {
  display: block;
}

.profile-cover--empty {
  background: linear-gradient(135deg, #1a1d21 0%, #0d0d0d 100%);
}

.profile-founder-banner {
  --founder-gold: #f5d76e;
  --founder-gold-deep: #c9a227;
  --founder-gold-bright: #ffe9a0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 34px;
  padding: 7px 16px;
  isolation: isolate;
  background:
    linear-gradient(90deg, transparent 0%, rgba(201, 162, 39, 0.18) 12%, rgba(201, 162, 39, 0.18) 88%, transparent 100%),
    linear-gradient(180deg, #2a2110 0%, #1a150c 50%, #120e08 100%);
  border-bottom: 1px solid rgba(245, 215, 110, 0.35);
  box-shadow:
    0 0 18px rgba(245, 215, 110, 0.22),
    inset 0 1px 0 rgba(255, 233, 160, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  animation: profile-founder-pulse 2.8s ease-in-out infinite;
}

.profile-founder-banner__glow {
  position: absolute;
  inset: -40% -20%;
  z-index: 0;
  background: radial-gradient(ellipse at center, rgba(245, 215, 110, 0.35) 0%, rgba(245, 215, 110, 0.08) 42%, transparent 68%);
  pointer-events: none;
  animation: profile-founder-glow 3.2s ease-in-out infinite;
}

.profile-founder-banner__shine {
  position: absolute;
  top: 0;
  left: -40%;
  z-index: 1;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 35%,
    rgba(255, 233, 160, 0.35) 50%,
    rgba(255, 255, 255, 0.04) 65%,
    transparent 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  animation: profile-founder-shine 4.5s ease-in-out infinite;
}

.profile-founder-banner__inner {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-shadow:
    0 0 12px rgba(245, 215, 110, 0.65),
    0 1px 2px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.profile-founder-banner__text {
  color: #fff;
}

.profile-founder-banner__icon {
  flex-shrink: 0;
  color: #fff;
  filter: drop-shadow(0 0 5px rgba(245, 215, 110, 0.7));
  animation: profile-founder-star 2.8s ease-in-out infinite;
}

.profile-founder-banner__icon:last-child {
  animation-delay: 1.4s;
}

@keyframes profile-founder-pulse {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(245, 215, 110, 0.32),
      0 0 36px rgba(201, 162, 39, 0.12),
      inset 0 1px 0 rgba(255, 233, 160, 0.28),
      inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  }
  50% {
    box-shadow:
      0 0 28px rgba(245, 215, 110, 0.48),
      0 0 52px rgba(201, 162, 39, 0.2),
      inset 0 1px 0 rgba(255, 233, 160, 0.4),
      inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  }
}

@keyframes profile-founder-glow {
  0%, 100% { opacity: 0.82; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.03); }
}

@keyframes profile-founder-shine {
  0% { left: -45%; opacity: 0; }
  15% { opacity: 1; }
  45% { left: 110%; opacity: 0.85; }
  50%, 100% { left: 110%; opacity: 0; }
}

@keyframes profile-founder-star {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.18); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-founder-banner,
  .profile-founder-banner__glow,
  .profile-founder-banner__shine,
  .profile-founder-banner__icon {
    animation: none;
  }
}

.profile-head {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
  grid-template-areas:
    "avatar identity"
    "avatar stats"
    "avatar followed"
    "avatar bio";
}

.profile-head:has(.profile-actions) {
  grid-template-areas:
    "avatar identity"
    "avatar stats"
    "avatar followed"
    "avatar bio"
    ". actions";
}

.profile-head__avatar {
  grid-area: avatar;
}

.profile-identity {
  grid-area: identity;
  min-width: 0;
}

.profile-identity__name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0 0 4px;
}

.profile-identity__name-row h2 {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.profile-identity__tools {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}

.profile-identity__menu {
  display: block;
  margin-left: 0;
}

.profile-identity__menu-trigger {
  margin: 0;
  flex-shrink: 0;
}

.profile-identity__menu-panel {
  right: 0;
  left: auto;
  top: calc(100% + 4px);
}

.profile-identity h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}

.profile-identity .handle {
  color: var(--muted-foreground);
}

.profile-stats {
  grid-area: stats;
  display: flex;
  gap: 16px;
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--muted-foreground);
}

.profile-stats strong {
  color: var(--foreground);
}

.profile-stat-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.profile-stat-btn:hover strong,
.profile-stat-btn:focus-visible strong {
  text-decoration: underline;
}

.profile-stat-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.profile-follows-you-badge {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--muted-foreground);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

.profile-followed-by {
  grid-area: followed;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}

.profile-followed-by__avatars {
  display: flex;
  flex-shrink: 0;
}

.profile-followed-by__avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  margin-left: -6px;
  object-fit: cover;
  display: block;
}

.profile-followed-by__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333;
  color: #fff;
  font-weight: 700;
  font-size: 0.6rem;
  box-sizing: border-box;
}

.profile-followed-by__avatars a:first-child .profile-followed-by__avatar { margin-left: 0; }

.profile-followed-by__text { color: var(--muted-foreground); }
.profile-followed-by__text strong { color: var(--foreground); }

.profile-followed-by:hover .profile-followed-by__text,
.profile-followed-by:focus-visible .profile-followed-by__text {
  text-decoration: underline;
}

.profile-followed-by:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.profile-bio {
  grid-area: bio;
  margin-top: 10px;
  white-space: pre-wrap;
}

.profile-bio-block {
  grid-area: bio;
  margin-top: 10px;
  min-width: 0;
}

.profile-bio-block .profile-bio {
  margin-top: 0;
}

.profile-bio-link-wrap {
  margin-top: 6px;
}

.profile-bio-link {
  display: inline-block;
  max-width: 100%;
  color: var(--accent, #ffd400);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-bio-link:hover,
.profile-bio-link:focus-visible {
  text-decoration: underline;
}

.profile-pinned-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px 0;
}

.profile-song-card {
  margin: 12px 16px 0;
  padding: 12px;
  border: 1px solid var(--border, var(--border));
  border-radius: 14px;
  background: var(--card, var(--background));
}

.profile-song-placeholder {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 32px);
  margin: 12px 16px 0;
  padding: 12px;
  border: 2px dashed var(--border, #444);
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.profile-song-placeholder:hover,
.profile-song-placeholder:focus-visible {
  border-color: var(--accent, #ffd400);
  background: rgba(255, 212, 0, 0.06);
  outline: none;
}

.profile-song-placeholder__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: var(--border, #333);
  color: var(--muted-foreground);
}

.profile-song-placeholder__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-song-placeholder__label {
  font-weight: 700;
  line-height: 1.25;
}

.profile-song-placeholder__hint {
  line-height: 1.3;
}

.sleeper-compose-modal__body:not(.sleeper-compose-modal__body--has-selection) [data-profile-song-compose-save] {
  display: none !important;
}

.profile-song-card__main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-song-card__artwork {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 72px;
  background: var(--border, #333);
}

.profile-song-card__artwork--empty {
  display: block;
}

.profile-song-card__meta {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.profile-song-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted-foreground);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-song-card__badge-link {
  text-decoration: none;
}

.profile-song-card__badge-link:hover,
.profile-song-card__badge-link:focus-visible {
  color: var(--accent);
}

.profile-song-card__title {
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-song-card__artist,
.profile-song-card__album {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-song-card__play {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border, var(--border));
  background: transparent;
  color: var(--foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  cursor: pointer;
}

.profile-song-card__play:hover,
.profile-song-card__play:focus-visible {
  border-color: var(--accent);
}

.profile-song-card__play.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.profile-song-card__play .profile-song-card__pause-icon {
  display: none;
}

.profile-song-card__play.is-playing .profile-song-card__play-icon {
  display: none;
}

.profile-song-card__play.is-playing .profile-song-card__pause-icon {
  display: block;
}

.profile-song-card__controls {
  margin-top: 10px;
}

.profile-song-card__progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.profile-song-card__progress-track {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 999px;
  background: var(--border, #333);
  overflow: hidden;
}

.profile-song-card__progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.2s linear;
}

.profile-song-card__time {
  flex: 0 0 auto;
  min-width: 72px;
  text-align: right;
}

.profile-song-card__state {
  margin: 0 0 8px;
  font-size: 0.85rem;
}

.profile-song-card__state--warning {
  color: #c47a00;
}

.profile-song-card__state--error {
  color: #d64545;
}

.profile-song-card__external {
  margin-top: 4px;
}

@media (max-width: 480px) {
  .profile-song-card__main {
    flex-wrap: nowrap;
  }

  .profile-song-card__play {
    flex-shrink: 0;
  }
}

.profile-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}

.profile-actions form {
  display: flex;
  margin: 0;
  min-width: 0;
}

.profile-actions__error {
  grid-column: 1 / -1;
  margin: 0;
}

.profile-actions > .profile-action-btn,
.profile-actions > form .profile-action-btn {
  width: 100%;
}

.profile-actions > .profile-action-btn:only-child {
  grid-column: 1 / -1;
}

.profile-actions .btn:hover {
  text-decoration: none;
}

.profile-action-btn {
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 0.86rem;
  border-radius: 6px;
}

.profile-notify-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
  flex-shrink: 0;
}

.profile-notify-btn:hover,
.profile-notify-btn:active,
.profile-notify-btn:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}

.profile-notify-btn:hover {
  background: rgba(239, 243, 244, 0.1);
  color: var(--foreground);
}

.profile-notify-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.profile-notify-btn--on {
  color: var(--accent);
}

.profile-notify-btn--on:hover {
  color: var(--accent);
}

.profile-notify-btn__icon {
  display: none;
  line-height: 0;
}

.profile-notify-btn__icon svg {
  display: block;
}

.profile-notify-btn:not(.profile-notify-btn--on) .profile-notify-btn__icon--off,
.profile-notify-btn.profile-notify-btn--on .profile-notify-btn__icon--on {
  display: inline-flex;
}

@media (max-width: 700px) {
  .profile-head {
    grid-template-areas:
      "avatar identity"
      "stats stats"
      "followed followed"
      "bio bio"
      "actions actions";
    row-gap: 8px;
  }

  .profile-head:not(:has(.profile-actions)) {
    grid-template-areas:
      "avatar identity"
      "stats stats"
      "followed followed"
      "bio bio";
  }

  .profile-head .profile-stats,
  .profile-head .profile-bio,
  .profile-head .profile-bio-block,
  .profile-head .profile-followed-by,
  .profile-head .profile-actions {
    grid-column: 1 / -1;
  }

  .profile-head:has(.profile-actions) .profile-identity__name-row {
    margin-bottom: 0;
  }

  .profile-identity {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .profile-identity h2 {
    margin: 0;
  }

  .profile-stats {
    margin-top: 0;
  }

  .profile-bio,
  .profile-bio-block {
    margin-top: 0;
  }
}

@media (min-width: 701px) {
  .profile-head {
    align-items: center;
    row-gap: 4px;
    grid-template-areas:
      "avatar identity"
      "avatar stats"
      ". followed"
      ". bio";
  }

  .profile-head:has(.profile-actions) {
    grid-template-areas:
      "avatar identity"
      "avatar stats"
      ". followed"
      ". bio"
      ". actions";
  }

  .profile-identity {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-self: end;
  }

  .profile-identity__name-row {
    margin-bottom: 0;
  }

  .profile-identity h2 {
    margin: 0;
    line-height: 1.2;
  }

  .profile-identity .handle {
    line-height: 1.25;
  }

  .profile-stats {
    margin-top: 0;
    align-self: start;
  }

  .profile-bio,
  .profile-bio-block {
    margin-top: -5px;
  }

  .profile-bio-link-wrap {
    margin-top: 4px;
  }

  .profile-actions {
    margin-top: 6px;
  }
}

.edit-profile-error {
  margin: 12px 16px 0;
}

.edit-profile-form {
  padding: 16px;
  border-top: 1px solid var(--border);
}

.edit-profile-bio {
  min-height: 100px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
}

.edit-profile-avatar-trigger {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 999px;
}

.edit-profile-avatar-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.edit-profile-avatar-field {
  display: grid;
  gap: 8px;
}

.edit-profile-avatar-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.edit-profile-avatar-picker:hover,
.edit-profile-avatar-picker:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.edit-profile-avatar-picker__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.avatar-editor-modal__panel {
  max-width: 420px;
}

.avatar-editor-modal__body {
  padding: 16px;
  display: grid;
  gap: 16px;
}

.avatar-editor-modal__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
}

.avatar-editor-modal__canvas {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 999px;
}

.avatar-editor-modal__empty {
  margin: 0;
  text-align: center;
}

.avatar-editor-modal__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.avatar-editor-modal__tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.avatar-editor-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.avatar-editor-modal__error {
  flex: 1 1 100%;
  margin: 0;
}

.edit-profile-cover-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.edit-profile-cover-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.edit-profile-cover-trigger__label {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(15, 20, 25, 0.72);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
}

.edit-profile-cover-field {
  display: grid;
  gap: 8px;
}

.edit-profile-cover-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.edit-profile-cover-picker:hover,
.edit-profile-cover-picker:focus-visible {
  border-color: var(--accent, #ffd400);
  outline: none;
}

.edit-profile-cover-picker__preview {
  flex: 0 0 96px;
  width: 96px;
  height: 54px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--border, #333);
}

.edit-profile-cover-picker__preview--empty {
  background-image: linear-gradient(135deg, #1a1d21 0%, #0d0d0d 100%) !important;
}

.edit-profile-cover-picker__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cover-editor-modal__panel {
  max-width: 560px;
}

.cover-editor-modal__body {
  padding: 16px;
  display: grid;
  gap: 16px;
}

.cover-editor-modal__hint {
  margin: 0;
}

.cover-editor-modal__stage {
  display: grid;
  gap: 8px;
}

.cover-editor-modal__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 1;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #000;
  touch-action: none;
  cursor: grab;
  box-shadow: inset 0 -42px 38px -20px rgba(0, 0, 0, 0.45);
}

.cover-editor-modal__viewport.is-dragging {
  cursor: grabbing;
}

.cover-editor-modal__image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

.cover-editor-modal__empty {
  margin: 0;
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.cover-editor-modal__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cover-editor-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.cover-editor-modal__error {
  flex: 1 1 100%;
  margin: 0;
}

.widget {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
}

.widget--sidebar-search {
  position: sticky;
  top: 12px;
  z-index: 3;
}

.widget--whats-happening {
  border-color: var(--border);
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.34), transparent 34%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.16), transparent 28%),
    var(--surface);
  box-shadow: 0 0 28px rgba(124, 58, 237, 0.12);
}

.widget--weather {
  padding: 10px 14px 12px;
}

.weather-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
}

.weather-widget__title {
  margin-bottom: 0;
  line-height: 1.2;
}

.weather-widget__settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}

.weather-widget__settings:hover,
.weather-widget__settings:focus-visible {
  color: var(--text);
  background: var(--surface-2);
}

.weather-widget__body--empty {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 0 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.weather-widget__body--empty[hidden] {
  display: none;
}

.weather-widget__body--empty:hover,
.weather-widget__body--empty:focus-visible {
  color: var(--text);
}

.weather-widget__body--loaded {
  padding-top: 2px;
}

.weather-widget__body--loaded[hidden] {
  display: none;
}

.weather-widget__settings[hidden] {
  display: none;
}

.weather-widget__main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.weather-widget__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.weather-widget__details {
  min-width: 0;
}

.weather-widget__temp {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
}

.weather-widget__desc {
  margin-top: 2px;
}

.weather-widget__city {
  margin-top: 2px;
}

.weather-widget__loading,
.weather-widget__error {
  margin: 8px 0 0;
}

.weather-location-modal__panel {
  max-width: 420px;
}

.weather-location-modal__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 16px;
}

.weather-location-modal__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.weather-location-modal__label {
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0;
}

.weather-location-modal__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.weather-location-modal__input:focus {
  outline: 2px solid rgba(124, 58, 237, 0.45);
  outline-offset: 1px;
}

.weather-location-modal__error {
  margin: 0;
}

.weather-location-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.weather-location-suggest {
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  max-height: 220px;
  overflow-y: auto;
}

.weather-location-suggest[hidden] {
  display: none !important;
}

.weather-location-suggest__item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.weather-location-suggest__item:last-child {
  border-bottom: 0;
}

.weather-location-suggest__item:hover,
.weather-location-suggest__item--active {
  background: var(--surface-hover);
}

.weather-location-suggest__label {
  font-weight: 600;
}

.right-sticky-stack {
  position: sticky;
  top: 100px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.right-sticky-stack::-webkit-scrollbar {
  display: none;
}

.widget__title {
  font-weight: 800;
  margin-bottom: 8px;
}

.widget__title--live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #a78bfa;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.widget__title--live .space-live-dot {
  flex: 0 0 auto;
}

.whos-live-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.whos-live-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 -6px;
  padding: 10px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 14px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.whos-live-item:hover {
  border-color: rgba(167, 139, 250, 0.42);
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.2), transparent 34%),
    var(--surface-hover);
  text-decoration: none;
}

.whos-live-item__avatar {
  flex: 0 0 auto;
  margin-top: 2px;
}

.whos-live-item__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.whos-live-item__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  color: #a78bfa;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.whos-live-item__eyebrow .space-live-dot {
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 4px rgba(249, 24, 128, 0.13);
}

.whos-live-item__title {
  overflow: hidden;
  color: var(--foreground);
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whos-live-item__meta {
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whos-live-item__action {
  display: none;
}

.whos-live-empty {
  padding: 2px 0 0;
}

.whos-live-empty__title {
  margin: 0 0 4px;
  color: var(--foreground);
  font-weight: 800;
}

.whos-live-empty p:last-child {
  margin-bottom: 0;
}

.trending-hashtags {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trending-hashtags__card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 -6px;
  padding: 10px 12px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 14px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.trending-hashtags__card:hover {
  border-color: rgba(167, 139, 250, 0.42);
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.16), transparent 34%),
    var(--surface-hover);
  text-decoration: none;
}

.trending-hashtags__rank {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.18);
  color: #a78bfa;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.trending-hashtags__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.trending-hashtags__tag {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trending-hashtags__count {
  font-size: 0.78rem;
  line-height: 1.3;
}

.who-follow {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.who-follow__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  margin: 0 -4px;
  border-radius: 8px;
  min-width: 0;
}

.who-follow__row:hover {
  background: var(--surface-hover);
}

.who-follow__link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.who-follow__link:hover,
.who-follow__link:visited {
  text-decoration: none;
  color: inherit;
}

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

.who-follow__form {
  margin: 0;
  padding: 0;
}

.who-follow__follow {
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.who-follow__follow:hover {
  text-decoration: none;
}

.who-follow__state {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: #acd628;
}

.who-follow__avatar {
  flex-shrink: 0;
  line-height: 0;
}

.who-follow__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.who-follow__name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.who-follow__handle {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-follow-modal__panel {
  display: flex;
  flex-direction: column;
  max-height: min(80vh, 640px);
}

.profile-follow-modal__body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 4px 12px 12px;
}

.profile-follow-modal__list {
  padding: 0;
}

.profile-follow-modal__row {
  text-decoration: none;
  color: inherit;
}

.profile-follow-modal__row:hover,
.profile-follow-modal__row:visited {
  text-decoration: none;
  color: inherit;
}

.profile-follow-modal__empty {
  padding: 24px 16px;
  margin: 0;
  text-align: center;
}

.tweet-activity-modal__panel {
  display: flex;
  flex-direction: column;
  max-height: min(85vh, 720px);
}

.tweet-activity-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin: 0 12px;
}

.tweet-activity-tabs__tab {
  flex: 1;
  padding: 12px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.tweet-activity-tabs__tab:hover,
.tweet-activity-tabs__tab:focus-visible {
  color: var(--foreground);
  outline: none;
}

.tweet-activity-tabs__tab--active {
  color: var(--foreground);
  border-bottom-color: var(--accent, #ffd400);
}

.tweet-activity-tabs__tab--disabled,
.tweet-activity-tabs__tab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.tweet-activity-modal__body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 4px 12px 12px;
}

.tweet-activity-modal__body:has(.tweet-activity-modal__feed) {
  padding: 0;
}

.tweet-activity-modal__list {
  padding: 0;
}

.tweet-activity-modal__row {
  text-decoration: none;
  color: inherit;
}

.tweet-activity-modal__row:hover,
.tweet-activity-modal__row:visited {
  text-decoration: none;
  color: inherit;
}

.tweet-activity-modal__empty {
  padding: 24px 16px;
  margin: 0;
  text-align: center;
}

.tweet-activity-modal__empty-state {
  padding: 28px 16px 24px;
}

.tweet-activity-modal__empty-title {
  margin: 0 0 8px;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
}

.tweet-activity-modal__empty-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 22rem;
}

.tweet-activity-modal__feed .tweet:last-child {
  border-bottom: 0;
}

.notif-feed {
  min-height: 120px;
}

.notif-feed a:hover {
  text-decoration: none;
}

.notif-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  cursor: pointer;
}

.notif-row__type-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  line-height: 0;
}

.notif-row__type-icon--follow {
  color: var(--foreground);
}

.notif-row__type-icon--like {
  color: #f91880;
}

.notif-row__type-icon--reply {
  color: var(--accent);
}

.notif-row__type-icon--repost {
  color: #00ba7c;
}

.notif-row__type-icon--mention {
  color: var(--accent);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.notif-row__type-icon--post {
  color: var(--accent);
}

.notif-row:hover {
  background: var(--bg-secondary);
}

.notif-row--with-bar {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.notif-row--with-bar:hover {
  background: var(--bg-secondary);
}

.notif-row__primary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  box-sizing: border-box;
}

.notif-row__bar-wrap {
  margin-top: 8px;
  padding-left: 98px;
  min-width: 0;
}

.notif-row__bar-wrap .tweet__bar {
  margin-top: 0;
}

.notif-row__avatar {
  flex-shrink: 0;
  line-height: 0;
}

.notif-row__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.notif-row__text {
  display: block;
  line-height: 1.35;
  color: var(--muted-foreground);
}

.notif-row__text strong {
  font-weight: 800;
  color: var(--foreground);
}

.notif-actor-link {
  color: var(--foreground);
  font-weight: 700;
  text-decoration: none;
}
.notif-actor-link:hover {
  text-decoration: underline;
}

.notif-row__snippet {
  display: block;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  margin-top: 2px;
  line-height: 1.4;
  word-break: break-word;
}

.notif-row__time {
  color: var(--muted-foreground);
  font-size: 0.9rem;
}

.notif-row__media {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  margin-left: auto;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}

.notif-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.notif-row__media--video .notif-row__media-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.notif-row__media--video .notif-row__media-play::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
  margin-left: 2px;
}

.notif-tabs .tabs__link {
  padding: 12px 6px;
  font-size: 0.85rem;
}

.messages-shell {
  display: grid;
  grid-template-columns: 380px minmax(0, 600px);
  height: 100vh;
  min-height: 640px;
  background: var(--bg);
}

.messages-sidebar {
  min-width: 0;
  border-right: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.messages-pane-header,
.messages-conversation__header {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--sticky-bar-bg);
  backdrop-filter: blur(12px);
}

.messages-conversation__header {
  justify-content: flex-start;
}

.messages-pane-header h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
}

.messages-settings-toggle {
  margin-left: auto;
}

.messages-settings-toggle[aria-expanded="true"] {
  color: var(--foreground);
  background: var(--surface);
}

.dm-settings-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--foreground);
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dm-settings-btn svg {
  fill: none;
  stroke: var(--foreground);
  stroke-width: 1.5;
}

.dm-settings-btn:hover {
  background: var(--surface-hover);
}

.dm-settings-btn--open {
  transform: rotate(90deg);
}

.messages-settings-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.messages-settings-panel__inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px;
  transition: padding 0.35s ease;
}

.messages-settings-panel--open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.messages-settings-panel--open .messages-settings-panel__inner {
  padding: 12px 16px;
}

.messages-settings-panel__label {
  margin: 4px 0 0;
}

.messages-settings-panel__select {
  width: 100%;
  min-height: 42px;
}

.notif-settings-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.notif-settings-panel--open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.notif-settings-panel__inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 16px;
  transition: padding 0.3s ease;
}

.notif-settings-panel--open .notif-settings-panel__inner {
  padding: 12px 16px;
}

.notif-settings-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.9rem;
  cursor: pointer;
}

.notif-settings-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.message-composer__block-notice {
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 1px solid #5a2500;
  border-radius: 12px;
  color: #ffd6a8;
  background: #180900;
  font-size: 0.9rem;
}

.messages-thread-row--request {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.messages-thread-row__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.messages-thread-row__link:hover {
  text-decoration: none;
}

.messages-thread-row__request-actions {
  display: flex;
  gap: 8px;
  padding-left: 52px;
}

.messages-search {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.messages-search__field {
  background: var(--input-filled-bg);
}

.messages-search__input {
  min-height: 42px;
}

.messages-alert {
  margin: 12px;
  padding: 10px 12px;
  border: 1px solid #5a2500;
  border-radius: 12px;
  color: #ffd6a8;
  background: #180900;
}

.messages-thread-list {
  min-height: 0;
  overflow-y: auto;
}

.messages-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--border);
}

.messages-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.messages-tab:hover {
  color: var(--foreground);
}

.messages-tab--active {
  border-bottom-color: var(--accent);
  color: var(--foreground);
}

.messages-tab__count {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--input-filled-bg);
  color: var(--muted-foreground);
  font-size: 0.75rem;
}

.messages-empty--search {
  border-top: 1px solid var(--border);
}

/* DM Stories tab — the author's own active stories with view counts */
.dm-stories-list {
  padding: 0;
}
.dm-story-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.dm-story-item:hover {
  background: var(--surface-hover);
}
.dm-story-item__preview {
  width: 60px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  margin-right: 12px;
}
.dm-story-item__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dm-story-item__text-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 600;
  text-align: center;
  padding: 4px;
}
.dm-story-item__info {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  vertical-align: top;
}
.dm-story-item__views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--muted-foreground);
}
.dm-story-viewers {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.dm-story-viewers[hidden] {
  display: none !important;
}
.dm-story-viewers__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 8px;
  font-size: 0.85rem;
}
.dm-story-viewers__list {
  max-height: 250px;
  overflow-y: auto;
}
.dm-story-viewer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.dm-story-viewer__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.dm-story-viewer__avatar--empty {
  background: var(--surface);
}
.dm-story-viewer__info {
  display: flex;
  flex-direction: column;
}
.dm-story-viewer__name {
  font-size: 0.85rem;
}
.dm-story-viewer__time {
  font-size: 0.75rem;
}

.messages-thread-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

/* Swipeable (non-request) rows: padding + background move onto the sliding
   __link content layer so the archive/delete buttons stay fully hidden
   underneath it until the row is swiped. */
.messages-thread-row:not(.messages-thread-row--request) {
  padding: 0;
}

.messages-thread-row:not(.messages-thread-row--request) > .messages-thread-row__link {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  padding: 14px 16px;
  background: var(--bg);
  transition: transform 0.2s ease;
}

.messages-thread-row:not(.messages-thread-row--request):hover > .messages-thread-row__link,
.messages-thread-row:not(.messages-thread-row--request).messages-thread-row--active > .messages-thread-row__link {
  background: var(--bg-secondary);
}

.messages-thread-row:not(.messages-thread-row--request).messages-thread-row--active > .messages-thread-row__link {
  box-shadow: inset 4px 0 0 var(--foreground);
}

.messages-thread-row__archive,
.messages-thread-row__delete {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  z-index: 0;
}

.messages-thread-row__archive {
  left: 0;
  background: var(--muted-foreground);
}

.messages-thread-row__delete {
  right: 0;
  background: #ef4444;
}

.messages-thread-row:hover,
.messages-thread-row--active {
  background: var(--bg-secondary);
  text-decoration: none;
}

.messages-thread-row--active {
  box-shadow: inset 4px 0 0 var(--foreground);
}

.messages-thread-row__avatar {
  flex-shrink: 0;
  line-height: 0;
}

.messages-thread-row__main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.messages-thread-row__top {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.messages-thread-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}

.messages-thread-row__name .display-name-with-badge {
  min-width: 0;
}

.messages-thread-row__name .display-name-with-badge__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-thread-row__handle,
.messages-thread-row__time,
.messages-thread-row__snippet {
  color: var(--muted-foreground);
}

.messages-thread-row__handle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-thread-row__time {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.85rem;
}

.messages-thread-row__snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}

.messages-thread-row--unread .messages-thread-row__name,
.messages-thread-row--unread .messages-thread-row__snippet {
  color: var(--foreground);
}

.messages-thread-row__unread {
  align-self: center;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffd400;
  flex-shrink: 0;
}

.dm-unread-badge {
  align-self: center;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
}

.messages-conversation {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.messages-conversation__back {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  flex-shrink: 0;
}

.messages-conversation__back:hover {
  background: var(--surface);
  text-decoration: none;
}

.messages-conversation__identity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}

.messages-conversation__identity:hover {
  text-decoration: none;
}

.messages-conversation__identity-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}

.messages-conversation__identity-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  font-weight: 800;
}

.messages-conversation__identity-name .display-name-with-badge {
  min-width: 0;
}

.messages-conversation__identity-name .display-name-with-badge__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-conversation__identity-handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1101px) {
  .messages-conversation__identity-meta {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .messages-conversation__identity-handle {
    flex-shrink: 0;
  }
}

.messages-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dm-typing-indicator {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dm-typing-indicator[hidden] { display: none !important; }
.dm-typing-indicator__text {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  font-style: italic;
}
.dm-typing-indicator__dots {
  display: flex;
  gap: 3px;
  align-items: center;
}
.dm-typing-indicator__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-foreground);
  animation: typingBounce 1.4s ease-in-out infinite;
}
.dm-typing-indicator__dots span:nth-child(2) { animation-delay: 0.2s; }
.dm-typing-indicator__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.message-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.message-row--mine {
  justify-content: flex-end;
}

.message-row--theirs {
  justify-content: flex-start;
}

.message-row__avatar {
  flex-shrink: 0;
  line-height: 0;
}

.message-row__stack {
  display: flex;
  max-width: min(430px, 76%);
  flex-direction: column;
  gap: 4px;
}

.message-row--mine .message-row__stack {
  align-items: flex-end;
}

.message-row--theirs .message-row__stack {
  align-items: flex-start;
}

.message-bubble {
  padding: 10px 14px;
  border-radius: 20px;
  background: var(--input-filled-bg);
  color: var(--foreground);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-row--mine .message-bubble {
  border-bottom-right-radius: 6px;
  background: var(--message-mine-bg);
  color: var(--message-mine-color);
}

.message-row--theirs .message-bubble {
  border-bottom-left-radius: 6px;
}

.message-bubble--deleted {
  font-style: italic;
  background: transparent;
  border: 1px solid var(--border);
}

.message-row--mine .message-bubble--deleted,
.message-row--theirs .message-bubble--deleted {
  background: transparent;
  color: var(--muted-foreground);
}

.message-row__time {
  padding: 0 4px;
  color: var(--muted-foreground);
  font-size: 0.78rem;
}

.message-row__meta {
  display: flex;
  align-items: center;
  gap: 4px;
}

.message-row__receipt {
  padding: 0 4px;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  letter-spacing: -1px;
}

.message-row__receipt--read {
  color: #1d9bf0;
}

.message-row__edited-label {
  padding: 0 4px;
  font-size: 0.78rem;
}

.message-edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 220px;
}

.message-edit-form__textarea {
  width: 100%;
  min-height: 60px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--input-filled-bg);
  color: var(--foreground);
  font: inherit;
  resize: vertical;
}

.message-edit-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.message-reply-quote {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: 100%;
  padding: 6px 12px;
  border-left: 3px solid var(--border);
  border-radius: 10px;
  background: var(--input-filled-bg);
  font-size: 0.82rem;
}

.message-reply-quote__name {
  color: var(--accent);
  font-weight: 700;
}

.message-reply-quote__body {
  overflow: hidden;
  color: var(--muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-reply-quote--missing .message-reply-quote__body {
  font-style: italic;
}

.message-composer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--composer-bar-bg);
  backdrop-filter: blur(12px);
}

.message-composer__field {
  flex: 1;
  min-width: 0;
}

.message-composer__error {
  margin: 0 0 8px;
}

.message-composer__textarea {
  display: block;
  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 160px;
  resize: none;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  outline: none;
  background: var(--input-filled-bg);
  color: var(--foreground);
  font: inherit;
  font-size: 16px;
  box-sizing: border-box;
  overflow-y: auto;
}

.message-composer__textarea:focus {
  border-color: var(--input-focus-border);
}

.message-composer__send {
  min-height: 44px;
}

.message-composer__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-height: 40px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
}

.message-composer__icon-btn:hover {
  background: var(--surface);
  color: var(--foreground);
}

.message-composer__icon-btn.is-active {
  color: var(--accent);
}

.message-composer__games-wrap {
  position: relative;
  flex-shrink: 0;
}

.message-composer__games-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  min-width: 160px;
  padding: 6px 0;
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
  z-index: 100;
}

.message-composer__games-menu[hidden] {
  display: none;
}

.message-composer__games-menu-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.message-composer__games-menu-item:hover {
  background: var(--surface);
}

.message-composer__games-menu-item--danger {
  color: #ef4444;
}

.message-composer__games-menu-item--danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.message-composer__mobile-actions {
  display: none;
  position: relative;
  flex-shrink: 0;
}

.message-composer__mobile-add-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  min-width: 168px;
  padding: 6px 0;
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
  z-index: 100;
}

.message-composer__mobile-add-menu[hidden] {
  display: none;
}

.message-composer__mobile-add-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.message-composer__mobile-add-menu-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--muted-foreground);
}

.message-composer__mobile-add-menu-item:hover {
  background: var(--surface);
}

.message-composer-games-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.message-composer-games-modal[hidden] {
  display: none !important;
}

.message-composer-games-modal__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.message-composer-games-modal__panel {
  position: relative;
  width: min(100%, 360px);
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.message-composer-games-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.message-composer-games-modal__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.message-composer-games-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.message-composer-games-modal__close:hover {
  background: var(--surface);
  color: var(--foreground);
}

.message-composer-games-modal__library {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message-composer-games-modal__game {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--foreground);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.message-composer-games-modal__game:hover {
  border-color: var(--accent);
}

.message-composer-games-modal__game-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--muted-foreground);
}

.message-composer-games-modal__game-name {
  font-size: 0.95rem;
  font-weight: 700;
}

.dm-game-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dm-game-status-badge--your-turn {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.dm-game-status-badge--waiting {
  background: rgba(148, 163, 184, 0.15);
  color: var(--muted-foreground);
}

.dm-game-status-badge--won {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.dm-game-status-badge--lost {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.dm-game-status-badge--draw {
  background: rgba(148, 163, 184, 0.15);
  color: var(--muted-foreground);
}

.message-composer-game-turn {
  flex-shrink: 0;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  background: var(--composer-bar-bg);
}

.message-composer-game-turn[hidden] {
  display: none !important;
}

.message-composer-game-turn__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.message-composer-game-turn .dm-game-status-badge {
  margin-bottom: 8px;
}

.dm-tic-tac-toe__play-card .dm-game-status-badge {
  margin-bottom: 0;
}

.dm-tic-tac-toe__play-hint {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
}

.dm-game-widget > .dm-game-status-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 4px;
  line-height: normal;
}

.message-composer-game-turn__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  line-height: 1;
  cursor: pointer;
}

.message-composer-game-turn__close:hover {
  background: var(--surface);
  color: var(--foreground);
}

#message-composer-game-turn-board .dm-game-widget {
  margin: 0 auto;
}

.dm-tic-tac-toe__play-card {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 0;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

.dm-tic-tac-toe__play-card > .dm-tic-tac-toe__board,
.dm-tic-tac-toe__play-card > .dm-tic-tac-toe__play-overlay {
  grid-area: 1 / 1;
}

.dm-tic-tac-toe__play-card > .dm-tic-tac-toe__board {
  position: relative;
  width: 100%;
  line-height: normal;
}

.dm-tic-tac-toe__play-card > .dm-tic-tac-toe__play-overlay {
  position: absolute;
  inset: 0;
}

.dm-tic-tac-toe__play-card:hover .dm-tic-tac-toe__play-overlay {
  background: rgba(0, 0, 0, 0.62);
}

.dm-tic-tac-toe__play-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  line-height: normal;
}

.dm-tic-tac-toe__play-overlay .dm-game-status-badge--your-turn {
  background: rgba(34, 197, 94, 0.25);
  color: #86efac;
}

.dm-tic-tac-toe__result-card {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}

.dm-tic-tac-toe__result-card > .dm-tic-tac-toe__board,
.dm-tic-tac-toe__result-card > .dm-tic-tac-toe__result-overlay {
  grid-area: 1 / 1;
}

.dm-tic-tac-toe__result-card > .dm-tic-tac-toe__board {
  position: relative;
  width: 100%;
  line-height: normal;
}

.dm-tic-tac-toe__result-card > .dm-tic-tac-toe__result-overlay {
  position: absolute;
  inset: 0;
}

.dm-tic-tac-toe__result-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  line-height: normal;
}

.dm-tic-tac-toe__result-overlay .dm-game-status-badge {
  line-height: 1.2;
  flex-shrink: 0;
}

.dm-tic-tac-toe__result-overlay .dm-game-status-badge--won {
  background: #22c55e;
  color: #fff;
}

.dm-tic-tac-toe__result-overlay .dm-game-status-badge--lost {
  background: #ef4444;
  color: #fff;
}

.dm-tic-tac-toe__result-overlay .dm-game-status-badge--draw {
  background: #64748b;
  color: #fff;
}

.dm-tic-tac-toe__result-overlay .dm-game-status-badge--waiting {
  background: rgba(148, 163, 184, 0.35);
  color: #f1f5f9;
  line-height: 1.2;
  flex-shrink: 0;
}

.dm-tic-tac-toe__board--preview .dm-tic-tac-toe__cell {
  cursor: default;
  pointer-events: none;
}

.message-bubble.message-bubble--game,
.message-row--mine .message-bubble.message-bubble--game,
.message-row--theirs .message-bubble.message-bubble--game {
  padding: 0;
  background: transparent;
  color: inherit;
}

.message-row--theirs:has(.message-bubble--game) {
  display: grid;
  grid-template-columns: auto max-content;
  column-gap: 8px;
  row-gap: 2px;
  align-items: end;
  justify-content: start;
}

.message-row--theirs:has(.message-bubble--game) .message-row__stack {
  display: contents;
}

.message-row--theirs:has(.message-bubble--game) .message-row__avatar {
  align-self: end;
}

.message-row--theirs:has(.message-bubble--game):not(:has(.message-reply-quote)) .message-row__avatar {
  grid-column: 1;
  grid-row: 1;
}

.message-row--theirs:has(.message-bubble--game):has(.message-reply-quote) .message-row__avatar {
  grid-column: 1;
  grid-row: 2;
}

.message-row--theirs:has(.message-bubble--game) .message-reply-quote,
.message-row--theirs:has(.message-bubble--game) .message-row__bubble-row,
.message-row--theirs:has(.message-bubble--game) .message-reactions,
.message-row--theirs:has(.message-bubble--game) .message-row__meta {
  grid-column: 2;
}

.message-row--theirs:has(.message-bubble--game) .message-row__bubble-row {
  align-items: flex-end;
}

.message-row--mine:has(.message-bubble--game) .message-row__bubble-row {
  align-items: flex-end;
}

.message-row:has(.message-bubble--game) .message-row__stack {
  gap: 2px;
}

.message-bubble--game .dm-game-widget {
  line-height: normal;
  flex-shrink: 0;
}

.message-row__bubble-content:has(.message-bubble--game) {
  min-width: auto;
  max-width: 100%;
}

.message-bubble--game .dm-game-widget.dm-connect-four {
  width: 240px;
  max-width: 100%;
}

.message-bubble--game .dm-connect-four__board {
  gap: 4px;
  padding: 8px 6px;
}

.message-bubble--game .dm-connect-four__cell {
  min-height: 26px;
}

.message-bubble--game .dm-connect-four__play-card,
.message-bubble--game .dm-connect-four__overlay-card {
  position: relative;
  display: grid;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  border-radius: 14px;
}

.message-bubble--game .dm-connect-four__play-card > .dm-connect-four__board,
.message-bubble--game .dm-connect-four__play-card > .dm-connect-four__play-overlay,
.message-bubble--game .dm-connect-four__overlay-card > .dm-connect-four__board,
.message-bubble--game .dm-connect-four__overlay-card > .dm-connect-four__status-overlay {
  grid-area: 1 / 1;
}

.message-bubble--game .dm-connect-four__play-card > .dm-connect-four__board,
.message-bubble--game .dm-connect-four__overlay-card > .dm-connect-four__board {
  position: relative;
  width: 100%;
  line-height: normal;
}

.message-bubble--game .dm-connect-four__play-card > .dm-connect-four__play-overlay,
.message-bubble--game .dm-connect-four__overlay-card > .dm-connect-four__status-overlay {
  position: absolute;
  inset: 0;
  line-height: normal;
}

.dm-game-widget {
  display: block;
  width: min(100%, 200px);
}

.dm-game-widget.dm-connect-four {
  width: min(100%, 280px);
}

.dm-tic-tac-toe__board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.dm-tic-tac-toe__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-filled-bg);
  color: var(--foreground);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
}

.dm-tic-tac-toe__cell:disabled {
  cursor: default;
}

.dm-tic-tac-toe__cell:not(:disabled):hover {
  border-color: var(--accent);
  background: var(--surface);
}

.dm-tic-tac-toe__cell--x {
  color: #60a5fa;
}

.dm-tic-tac-toe__cell--o {
  color: #f472b6;
}

#message-composer-game-turn .dm-tic-tac-toe__cell:not(:disabled) {
  position: relative;
}

#message-composer-game-turn .dm-tic-tac-toe[data-player-symbol="X"] .dm-tic-tac-toe__cell:not(:disabled):not(.dm-tic-tac-toe__cell--x):not(.dm-tic-tac-toe__cell--o):hover::after,
#message-composer-game-turn .dm-tic-tac-toe[data-player-symbol="X"] .dm-tic-tac-toe__cell:not(:disabled):not(.dm-tic-tac-toe__cell--x):not(.dm-tic-tac-toe__cell--o):focus-visible::after {
  content: 'X';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 700;
  color: #60a5fa;
  opacity: 0.48;
  pointer-events: none;
}

#message-composer-game-turn .dm-tic-tac-toe[data-player-symbol="O"] .dm-tic-tac-toe__cell:not(:disabled):not(.dm-tic-tac-toe__cell--x):not(.dm-tic-tac-toe__cell--o):hover::after,
#message-composer-game-turn .dm-tic-tac-toe[data-player-symbol="O"] .dm-tic-tac-toe__cell:not(:disabled):not(.dm-tic-tac-toe__cell--x):not(.dm-tic-tac-toe__cell--o):focus-visible::after {
  content: 'O';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 700;
  color: #f472b6;
  opacity: 0.48;
  pointer-events: none;
}

/* Connect 4 */
.dm-connect-four__board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  padding: 10px 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.28);
  width: 100%;
  box-sizing: border-box;
}

.dm-connect-four__board--preview,
.dm-connect-four__play-card .dm-connect-four__board,
.dm-connect-four__overlay-card .dm-connect-four__board {
  overflow: hidden;
}

#message-composer-game-turn .dm-connect-four__board {
  min-height: 168px;
  overflow: visible;
}

.dm-connect-four__board--preview .dm-connect-four__cell {
  pointer-events: none;
}

.dm-connect-four__cell {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.55);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

#message-composer-game-turn .dm-connect-four__cell {
  min-height: 24px;
  overflow: visible;
}

.dm-connect-four__cell--drop-target {
  z-index: 2;
}

.dm-connect-four__chip {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.dm-connect-four__chip--red {
  background: radial-gradient(circle at 35% 28%, #fca5a5 0%, #ef4444 42%, #b91c1c 100%);
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dm-connect-four__chip--yellow {
  background: radial-gradient(circle at 35% 28%, #fde047 0%, #eab308 42%, #ca8a04 100%);
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dm-connect-four__chip--preview {
  opacity: 0.52;
  pointer-events: none;
}

.dm-connect-four__cell--preview-target {
  z-index: 1;
}

.dm-connect-four__chip--dropping {
  will-change: transform;
}

.dm-connect-four--animating .dm-connect-four__columns {
  pointer-events: none;
  opacity: 0.55;
}

.dm-connect-four__columns {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-top: 8px;
  padding: 0 8px;
}

.dm-connect-four__col-btn {
  aspect-ratio: 1;
  min-height: 28px;
  padding: 0;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.dm-connect-four__col-btn:not(:disabled):hover {
  border-color: var(--accent);
  background: var(--surface);
}

.dm-connect-four__col-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

.dm-connect-four__col-btn--red,
.dm-connect-four__col-btn--yellow {
  border-style: solid;
  border-color: transparent;
  position: relative;
}

.dm-connect-four__col-btn--red::after,
.dm-connect-four__col-btn--yellow::after {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
}

.dm-connect-four__col-btn--red::after {
  background: radial-gradient(circle at 35% 28%, #fca5a5 0%, #ef4444 42%, #b91c1c 100%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}

.dm-connect-four__col-btn--yellow::after {
  background: radial-gradient(circle at 35% 28%, #fde047 0%, #eab308 42%, #ca8a04 100%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}

.dm-connect-four__play-card {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 0;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

.dm-connect-four__play-card > .dm-connect-four__board,
.dm-connect-four__play-card > .dm-connect-four__play-overlay {
  grid-area: 1 / 1;
}

.dm-connect-four__play-card > .dm-connect-four__board {
  position: relative;
  width: 100%;
  line-height: normal;
}

.dm-connect-four__play-card > .dm-connect-four__play-overlay {
  position: absolute;
  inset: 0;
  line-height: normal;
}

.dm-connect-four__play-card:hover .dm-connect-four__play-overlay {
  background: rgba(0, 0, 0, 0.62);
}

.dm-connect-four__play-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  line-height: normal;
}

.dm-connect-four__play-overlay .dm-game-status-badge--your-turn {
  background: rgba(34, 197, 94, 0.25);
  color: #86efac;
}

.dm-connect-four__play-hint {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
}

.dm-connect-four__overlay-card {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}

.dm-connect-four__overlay-card > .dm-connect-four__board,
.dm-connect-four__overlay-card > .dm-connect-four__status-overlay {
  grid-area: 1 / 1;
}

.dm-connect-four__overlay-card > .dm-connect-four__board {
  position: relative;
  width: 100%;
  line-height: normal;
}

.dm-connect-four__overlay-card > .dm-connect-four__status-overlay {
  position: absolute;
  inset: 0;
  line-height: normal;
}

.dm-connect-four__status-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  line-height: normal;
}

.dm-connect-four__status-overlay .dm-game-status-badge {
  line-height: 1.2;
  flex-shrink: 0;
}

.dm-connect-four__status-overlay .dm-game-status-badge--won {
  background: #22c55e;
  color: #fff;
}

.dm-connect-four__status-overlay .dm-game-status-badge--lost {
  background: #ef4444;
  color: #fff;
}

.dm-connect-four__status-overlay .dm-game-status-badge--draw {
  background: #64748b;
  color: #fff;
}

.dm-connect-four__status-overlay .dm-game-status-badge--waiting {
  background: rgba(148, 163, 184, 0.35);
  color: #f1f5f9;
}

.message-composer-games-modal__game-icon--connect-four {
  position: relative;
  width: 20px;
  height: 20px;
}

.message-composer-games-modal__game-icon--connect-four::before,
.message-composer-games-modal__game-icon--connect-four::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.message-composer-games-modal__game-icon--connect-four::before {
  left: 0;
  bottom: 1px;
  background: #ef4444;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.25);
}

.message-composer-games-modal__game-icon--connect-four::after {
  right: 0;
  top: 1px;
  background: #eab308;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.25);
}

.message-composer__attach-preview {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 36px 8px 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.message-composer__attach-preview[hidden] {
  display: none !important;
}

.message-composer__attach-preview-media {
  display: flex;
  align-items: center;
  min-width: 0;
}

.message-composer__attach-preview-img,
.message-composer__attach-preview-video {
  max-width: 96px;
  max-height: 72px;
  border-radius: 8px;
  object-fit: cover;
}

.message-composer__attach-preview-audio {
  max-width: 220px;
  height: 32px;
}

.message-composer__attach-preview-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-composer__attach-preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.message-composer__attach-preview-remove:hover {
  background: rgba(0, 0, 0, 0.7);
}

.message-composer__reply-preview {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 36px 8px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--surface);
}

.message-composer__reply-preview[hidden] {
  display: none !important;
}

.message-composer__reply-preview-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}

.message-composer__reply-preview-label {
  overflow: hidden;
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-composer__reply-preview-body {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-composer__reply-preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.message-composer__reply-preview-remove:hover {
  background: rgba(239, 243, 244, 0.1);
  color: var(--foreground);
}

.message-composer__record-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}

.message-composer__record-indicator[hidden] {
  display: none !important;
}

.message-composer__record-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f4212e;
  animation: messageRecordPulse 1.1s ease-in-out infinite;
}

@keyframes messageRecordPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.message-composer__record-stop {
  margin-left: auto;
  padding: 4px 12px;
  border: none;
  border-radius: 999px;
  background: #f4212e;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* ---- Message attachments ---- */

.message-attachment {
  margin-top: 4px;
}

.message-attachment__image {
  display: block;
  max-width: 280px;
  max-height: 320px;
  border-radius: 16px;
  object-fit: cover;
  touch-action: pinch-zoom;
  cursor: pointer;
}

.message-attachment__video {
  display: block;
  max-width: 280px;
  max-height: 320px;
  border-radius: 16px;
  background: #000;
}

.message-attachment__audio {
  display: block;
  width: 240px;
  max-width: 100%;
  height: 40px;
}

/* ---- Message row bubble + hover controls ---- */

.message-row__bubble-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.message-row--mine .message-row__bubble-row {
  flex-direction: row-reverse;
}

.message-row__bubble-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.message-row__controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.message-row:hover .message-row__controls,
.message-row__controls:focus-within {
  opacity: 1;
}

.message-row__menu-wrap {
  margin-left: 0;
}

/* Keep the DM message action menu within the viewport instead of overflowing off-screen */
.message-row__menu-wrap .tweet__menu {
  max-width: calc(100vw - 32px);
}

.message-row--mine .message-row__menu-wrap .tweet__menu {
  left: auto;
  right: 0;
}

.message-row:not(.message-row--mine) .message-row__menu-wrap .tweet__menu {
  left: 0;
  right: auto;
}

@media (max-width: 700px) {
  /* .tweet__menu-wrap is position:relative and only ~24px wide, so the left/right
     offsets above are anchored to that tiny wrap, not the screen. On mobile the
     "mine" bubble row is flex-reversed and the trigger sits near the bubble's left
     edge, so right:0 still lets the menu extend past the left edge of the viewport.
     Break out of that positioning context and anchor to the viewport instead. */
  .message-row__menu-wrap .tweet__menu {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%);
    width: calc(100vw - 32px);
    max-width: 280px;
  }
}

.message-row__reply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
}

.message-row__reply-btn:hover {
  background: rgba(239, 243, 244, 0.1);
  color: var(--foreground);
}

.message-row__reply-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Message reactions ---- */

.dm-reaction-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.dm-reaction-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}

.dm-reaction-trigger:hover {
  background: var(--surface);
  color: var(--foreground);
}

.dm-reaction-tray {
  position: fixed;
  z-index: 5000;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.36);
}

.dm-reaction-tray[hidden] {
  display: none !important;
}

.dm-reaction-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 1.05rem;
}

.dm-reaction-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dm-tone-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.dm-tone-tray {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%);
  white-space: nowrap;
}

.dm-tone-tray[hidden] {
  display: none !important;
}

.dm-tone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 1.05rem;
}

.dm-tone-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 4px;
}

.message-reactions[hidden] {
  display: none !important;
}

.message-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--foreground);
  font-size: 0.8rem;
  cursor: pointer;
}

.message-reaction-pill:hover {
  background: var(--input-filled-bg);
}

.message-reaction-pill--mine {
  border-color: var(--accent);
  background: rgba(29, 155, 240, 0.12);
}

.message-reaction-pill__count {
  font-variant-numeric: tabular-nums;
}

.messages-empty,
.messages-select-empty {
  padding: 28px 24px;
  color: var(--foreground);
}

.messages-empty h2,
.messages-select-empty h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
}

.messages-empty p,
.messages-select-empty p {
  margin: 0;
}

.messages-select-empty {
  margin: auto;
  max-width: 720px;
  text-align: center;
}

.messages-select-empty__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted-foreground);
}

/* ---- Group DMs ---- */

.messages-groups-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 16px;
}

.messages-groups-header__create {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.messages-groups-header__create:hover {
  background: var(--surface-hover);
}

.group-avatar-stack {
  position: relative;
  height: 36px;
  width: 72px;
  flex-shrink: 0;
}

.group-avatar-stack__img,
.group-avatar-stack__fallback {
  position: absolute;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  object-fit: cover;
}

.group-avatar-stack__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
}

.group-avatar-stack__more {
  position: absolute;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--surface);
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.messages-conversation__identity--group {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  padding: 0;
  color: inherit;
}

.group-members-panel {
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  background: var(--bg);
}

.group-members-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.group-members-panel__header h3 {
  margin: 0;
  font-size: 1rem;
}

.group-members-panel__list {
  max-height: 260px;
  overflow-y: auto;
}

.group-members-panel__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(47, 51, 54, 0.3);
}

.group-members-panel__row:last-child {
  border-bottom: 0;
}

.group-members-panel__link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}

.group-members-panel__link:hover .group-members-panel__name {
  text-decoration: underline;
}

.group-members-panel__avatar {
  flex-shrink: 0;
}

.group-members-panel__info {
  flex: 1;
  min-width: 0;
}

.group-members-panel__name {
  font-weight: 700;
  display: block;
  font-size: 0.9rem;
}

.group-members-panel__handle {
  font-size: 0.8rem;
}

.group-members-panel__kick {
  flex-shrink: 0;
}

.group-members-panel__leave {
  width: 100%;
  margin-top: 12px;
}

.group-message-sender {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 2px;
}

.message-row--mine .group-message-sender {
  text-align: right;
}

/* Group rows carry a sender name (and often a reply quote / reactions) above
   the bubble, so bottom-aligning the avatar like 1:1 DMs do leaves it stranded
   below a tall stack. Keep it pinned next to the name instead. */
[data-conversation-mode="group"] .message-row--theirs {
  align-items: flex-start;
}

.group-settings-panel .messages-settings-panel__inner {
  gap: 10px;
}

.group-settings-name-row {
  display: flex;
  gap: 8px;
}

.group-settings-name-row .input {
  flex: 1;
}

.group-settings-members {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.group-settings-member {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.group-settings-member__avatar {
  flex-shrink: 0;
}

.group-settings-member__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.group-settings-member__name {
  font-weight: 600;
  font-size: 0.92rem;
}

.group-settings-member__handle {
  font-size: 0.82rem;
}

.group-settings-member__remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 16px;
  cursor: pointer;
}

.group-settings-member__remove:hover {
  background: var(--surface);
  color: var(--foreground);
}

.group-settings-leave-btn {
  align-self: flex-start;
}

.group-create-modal__panel {
  width: min(100%, 420px);
}

.group-create-modal__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 20px 16px;
}

.group-create-modal__body .label {
  margin-top: 10px;
}

.group-create-modal__footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

.group-create-members {
  position: relative;
}

.group-create-member-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.group-create-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
}

.group-create-member-chip__remove {
  background: none;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.86rem;
}

.spaces-page {
  padding-bottom: 32px;
}

.spaces-page.is-space-audio-connecting [data-space-end-button] {
  display: none;
}

.spaces-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 20px 16px;
  border-bottom: 1px solid var(--border);
}

.spaces-header h2 {
  margin: 0 0 6px;
  font-size: 1.8rem;
  line-height: 1.1;
}

.spaces-header__eyebrow,
.space-card__eyebrow,
.space-room__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: #a78bfa;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

.space-live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f91880;
  box-shadow: 0 0 0 5px rgba(249, 24, 128, 0.16);
}

.space-scheduled-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f97316;
  margin-right: 4px;
  vertical-align: middle;
}

.space-ended-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted-foreground);
  box-shadow: 0 0 0 5px rgba(113, 118, 123, 0.16);
}

.space-ended-stats {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 16px;
}

.space-ended-stats__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted-foreground);
}

.space-go-live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.16);
}

.space-start-button .space-go-live-dot {
  flex: 0 0 auto;
  animation: space-go-live-dot-pulse 1.45s ease-in-out infinite;
}

@keyframes space-go-live-dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    transform: scale(1.18);
  }
}

.spaces-alert,
.spaces-status {
  margin: 14px 20px 0;
}

.spaces-alert {
  padding: 12px 14px;
  border: 1px solid #3a2d12;
  border-radius: 16px;
  background: rgba(255, 212, 0, 0.08);
  color: #f4d86a;
}

.spaces-alert code {
  color: inherit;
}

.spaces-status--error {
  color: #ff7a7a;
}

.spaces-connection-debug {
  margin: 14px 20px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15, 20, 25, 0.72);
  color: #8b98a5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-x: auto;
}

.spaces-connection-debug--error {
  border-color: #5c2b2b;
  background: rgba(40, 16, 16, 0.72);
}

.spaces-connection-debug__error {
  color: #ff7a7a;
}

.spaces-connection-debug[hidden] {
  display: none;
}

.space-create-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.space-create-card--launcher {
  display: flex;
  justify-content: flex-end;
}

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

.space-create-card p {
  margin: 0;
}

.space-start-button {
  position: relative;
  isolation: isolate;
  gap: 8px;
  overflow: hidden;
  border-color: rgba(167, 139, 250, 0.42);
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.58), transparent 36%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.34), transparent 30%),
    #050505;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.12) inset, 0 0 22px rgba(124, 58, 237, 0.2), 0 10px 26px rgba(0, 0, 0, 0.32);
  animation: spaceStartButtonPulse 3.6s ease-in-out infinite;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.space-start-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(167, 139, 250, 0.16), transparent 52%);
  opacity: 0.7;
  transition: opacity 160ms ease;
}

.space-start-button:hover {
  border-color: rgba(167, 139, 250, 0.72);
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2) inset, 0 0 28px rgba(124, 58, 237, 0.3), 0 12px 30px rgba(0, 0, 0, 0.36);
}

.space-start-button:hover::before {
  opacity: 1;
}

.space-start-button--premium {
  border-color: rgba(226, 232, 240, 0.68);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.86), transparent 34%),
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.22), transparent 30%),
    linear-gradient(135deg, #f8fafc 0%, #c7ccd4 48%, #111318 100%);
  color: #050505;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset, 0 0 24px rgba(226, 232, 240, 0.22), 0 10px 26px rgba(0, 0, 0, 0.32);
}

.space-start-button--premium::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(15, 23, 42, 0.18), transparent 52%);
}

.space-start-button--premium:hover {
  border-color: rgba(248, 250, 252, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.32) inset, 0 0 30px rgba(226, 232, 240, 0.28), 0 12px 30px rgba(0, 0, 0, 0.36);
}

.space-start-button:active {
  transform: translateY(0) scale(0.98);
}

.space-start-button:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

@keyframes spaceStartButtonPulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.12) inset, 0 0 20px rgba(124, 58, 237, 0.18), 0 10px 26px rgba(0, 0, 0, 0.32);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(249, 24, 128, 0.14) inset, 0 0 27px rgba(124, 58, 237, 0.26), 0 10px 26px rgba(0, 0, 0, 0.32);
  }
}

@media (prefers-reduced-motion: reduce) {
  .space-start-button {
    animation: none;
  }
}

.space-create-modal__panel {
  overflow: hidden;
  max-width: 460px;
  border-color: rgba(124, 58, 237, 0.5);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.3), transparent 36%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.14), transparent 30%),
    rgba(5, 5, 5, 0.96);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.62), 0 0 36px rgba(124, 58, 237, 0.2);
  backdrop-filter: blur(16px);
}

.space-create-modal .compose-modal__backdrop {
  background:
    radial-gradient(circle at 50% 20%, rgba(124, 58, 237, 0.18), transparent 34%),
    rgba(0, 0, 0, 0.74);
}

.space-create-modal__head {
  align-items: flex-start;
  padding: 18px 20px 16px;
  border-bottom-color: rgba(167, 139, 250, 0.16);
}

.space-create-modal__head .compose-modal__title {
  font-size: 1.32rem;
}

.space-create-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: #c4b5fd;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.space-create-modal .compose-modal__close {
  color: #c4b5fd;
}

.space-create-modal .compose-modal__close:hover {
  background: rgba(124, 58, 237, 0.18);
  color: #fff;
}

.space-create-modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px 20px;
}

.space-create-modal__form .label {
  margin: 0;
  color: #e9d5ff;
  font-weight: 800;
}

.space-create-modal__form .input {
  border-color: rgba(167, 139, 250, 0.28);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.46);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.08) inset;
}

.space-create-modal__form .input:focus {
  border-color: rgba(167, 139, 250, 0.78);
  outline: none;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.24), 0 0 22px rgba(124, 58, 237, 0.18);
}

.space-create-modal__form .input::placeholder {
  color: #8b98a5;
}

.space-create-modal__form .space-start-button {
  align-self: flex-end;
  min-width: 120px;
}

.space-start-button .space-live-dot {
  flex: 0 0 auto;
  animation: space-live-dot-pulse 1.45s ease-in-out infinite;
}

@keyframes space-live-dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(249, 24, 128, 0.14);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(249, 24, 128, 0);
    transform: scale(1.18);
  }
}

.spaces-list {
  display: flex;
  flex-direction: column;
}

.spaces-list--live {
  gap: 12px;
  padding: 16px 16px 16px;
}

.spaces-recent-section {
  border-top: 1px solid var(--border);
}

.spaces-section-header {
  padding: 20px 20px 8px;
}

.spaces-section-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.space-card {
  border-bottom: 1px solid var(--border);
}

.spaces-list--live .space-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.34), transparent 34%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.16), transparent 28%),
    var(--surface);
  box-shadow: 0 0 28px rgba(124, 58, 237, 0.12);
}

.space-card__link {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  text-decoration: none;
}

.spaces-list--live .space-card__link {
  align-items: center;
  padding: 14px;
}

.space-card--ended .space-card__link {
  cursor: pointer;
}

.space-card__link:hover {
  background: var(--bg-secondary);
  text-decoration: none;
}

.spaces-list--live .space-card__link:hover {
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.4), transparent 34%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.2), transparent 28%),
    var(--bg-secondary);
}

.space-card__host {
  flex: 0 0 auto;
}

.space-card__body {
  min-width: 0;
  flex: 1 1 auto;
}

.space-card__title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  line-height: 1.2;
}

.space-card__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.space-card__title-row .space-card__title {
  margin: 0;
}

.space-card__title-main {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.space-card__title-link {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.space-card__title-link:hover {
  text-decoration: underline;
}

.space-card__title-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin-left: auto;
}

.space-card__eyebrow--inline {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.space-card__menu-wrap {
  margin-left: 0;
}

.space-card__menu-trigger {
  margin: -7px -8px -7px 0;
}

.space-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  color: var(--muted-foreground);
}

.space-card__avatars {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding-left: 6px;
}

.space-card__avatar {
  display: inline-flex;
  margin-left: -6px;
}

.space-card__avatar .avatar {
  border: 2px solid var(--bg);
}

.space-card--ended .space-card__eyebrow {
  color: var(--muted-foreground);
}

.spaces-list--live .space-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 34px;
  margin-top: 14px;
  padding: 0 14px;
  border: 1px solid rgba(231, 233, 234, 0.72);
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1;
}

.space-card--scheduled {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 190px;
  padding: 18px 20px;
}

.space-card__link-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.space-card__scheduled-host {
  display: flex;
  align-items: center;
  gap: 10px;
}

.space-card__host-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--foreground);
}

.space-card__title--scheduled {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
}

.space-card__eyebrow--scheduled {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.space-card--scheduled .space-start-button {
  position: relative;
  z-index: 2;
  margin-top: auto;
}

.space-prelobby {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.space-prelobby__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.space-prelobby__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  margin-top: 6px;
}

.space-prelobby__host {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
}

.space-prelobby__waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.space-prelobby__avatars {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

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

.space-prelobby__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.spaces-empty {
  padding: 56px 22px;
  text-align: center;
}

.spaces-empty--live {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at bottom left, rgba(167, 139, 250, 0.16), transparent 40%),
    radial-gradient(circle at bottom right, rgba(249, 24, 128, 0.1), transparent 36%);
}

.spaces-empty--live::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(167, 139, 250, 0.34), transparent 72%) left bottom / 1px 100% no-repeat,
    linear-gradient(to top, rgba(249, 24, 128, 0.24), transparent 72%) right bottom / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(167, 139, 250, 0.34), rgba(249, 24, 128, 0.24)) left bottom / 100% 1px no-repeat;
}

.spaces-empty--compact {
  padding: 28px 22px 36px;
}

.spaces-empty--live-condensed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background:
    radial-gradient(circle at bottom left, rgba(167, 139, 250, 0.16), transparent 40%),
    radial-gradient(circle at bottom right, rgba(249, 24, 128, 0.18), transparent 44%),
    linear-gradient(90deg, transparent 58%, rgba(249, 24, 128, 0.08));
  text-align: left;
}

.spaces-empty--live-condensed::after {
  background:
    linear-gradient(to top, rgba(167, 139, 250, 0.34), transparent 72%) left bottom / 1px 100% no-repeat,
    linear-gradient(to top, rgba(249, 24, 128, 0.18), transparent 72%) right bottom / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(167, 139, 250, 0.34), rgba(249, 24, 128, 0.18)) left bottom / 100% 1px no-repeat;
}

.spaces-empty--live-condensed .spaces-empty__copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.spaces-empty--live-condensed h2 {
  margin: 0 0 4px;
  font-size: 1.02rem;
}

.spaces-empty--live-condensed p {
  margin: 0;
}

.spaces-empty--live-condensed .btn {
  position: relative;
  z-index: 1;
  align-self: center;
  flex: 0 0 auto;
  margin-top: 0;
  white-space: nowrap;
}

.spaces-empty h2 {
  margin: 0 0 8px;
}

.spaces-empty .btn {
  margin-top: 18px;
}

.spaces-empty.spaces-empty--live-condensed .btn {
  align-self: center;
  margin-top: 0;
}

.spaces-room-shell {
  min-height: 100vh;
}

body.has-space-dock {
  padding-bottom: 96px;
}

body.has-space-dock-expanded {
  padding-bottom: 220px;
}

/* .messages-shell is a fixed-height (100vh) layout with its own internal
   scroll, so body padding-bottom alone doesn't move its sticky composer —
   the shell itself has to shrink to leave room above the dock. */
body.has-space-dock .messages-shell {
  height: calc(100vh - 96px);
}

body.has-space-dock-expanded .messages-shell {
  height: calc(100vh - 220px);
}

.space-global-dock {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1800;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: min(560px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid #3f4650;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.28), transparent 34%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.12), transparent 28%),
    rgba(5, 5, 5, 0.94);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42), 0 0 24px rgba(124, 58, 237, 0.2);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition: width 180ms ease, padding 180ms ease, border-radius 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.space-global-dock[hidden] {
  display: none !important;
}

#spaces-mini-dock[hidden] {
  display: none !important;
}

@media (min-width: 701px) {
  #spaces-mini-dock {
    display: none !important;
  }
}

.space-global-dock:not(.space-global-dock--expanded) {
  overflow: hidden;
}

.space-global-dock--expanded {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 44px);
  padding: 22px;
  border-color: #4b3c67;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.34), transparent 34%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.16), transparent 28%),
    rgba(5, 5, 5, 0.96);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.52), 0 0 34px rgba(124, 58, 237, 0.18);
}

.space-global-dock--expanded.space-global-dock--watch-party {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.space-global-dock__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.space-global-dock__pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(249, 24, 128, 0.12);
  overflow: visible;
}

.space-global-dock__pulse:has(.space-dock-speaker) {
  background: transparent;
}

.space-global-dock--expanded .space-global-dock__pulse {
  display: inline-flex;
  width: 48px;
  height: 48px;
}

.space-dock-speaker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
}

.space-global-dock__pulse .avatar {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  aspect-ratio: 1;
  overflow: hidden;
}

.space-global-dock__pulse .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.space-global-dock__main {
  flex: 1 1 auto;
  min-width: 0;
}

.space-global-dock__header-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.space-global-dock__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #3f4650;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  cursor: pointer;
}

.space-global-dock__icon-btn:hover {
  border-color: #a78bfa;
  background: rgba(255, 255, 255, 0.08);
}

.space-global-dock__icon-btn svg {
  display: block;
}

.space-global-dock__icon-btn .space-global-dock__chevron--down,
.space-global-dock--expanded .space-global-dock__icon-btn .space-global-dock__chevron--up {
  display: none;
}

.space-global-dock--expanded .space-global-dock__icon-btn .space-global-dock__chevron--down {
  display: block;
}

.space-global-dock__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #a78bfa;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.space-global-dock__title {
  display: block;
  overflow: hidden;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-global-dock--expanded .space-global-dock__title {
  margin-top: 2px;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.08;
  white-space: normal;
}

.space-global-dock__title:hover {
  text-decoration: underline;
}

.space-global-dock__participants {
  display: none;
}

.space-global-dock--expanded .space-global-dock__participants {
  display: block;
  width: 100%;
}

.space-global-dock__watch-preview {
  display: none;
}

.space-global-dock--expanded.space-global-dock--watch-party .space-global-dock__watch-preview {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 18px;
  background: var(--bg);
  aspect-ratio: 16 / 9;
}

.space-global-dock__watch-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg);
}

.space-global-dock__watch-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background:
    radial-gradient(circle at top, rgba(124, 58, 237, 0.28), transparent 42%),
    rgba(0, 0, 0, 0.86);
  color: #d1d5db;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
}

.space-global-dock__watch-preview--sharing .space-global-dock__watch-empty {
  pointer-events: none;
  opacity: 0;
}

.space-global-dock__participants .space-stage,
.space-global-dock__participants .space-listeners {
  padding: 10px 0 0;
}

.space-global-dock__participants .space-stage h3,
.space-global-dock__participants .space-listeners h3 {
  margin-bottom: 10px;
}

.space-global-dock__participants .space-stage + .space-listeners {
  margin-top: 8px;
}

.space-global-dock__participants .space-participant-grid--speakers {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

.space-global-dock__participants .space-participant-grid--listeners {
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
}

.space-global-dock__participants .space-participant-grid {
  gap: 18px 14px;
}

.space-global-dock__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.space-global-dock__action-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.space-global-dock:not(.space-global-dock--expanded) .space-global-dock__actions:has([data-space-dock-join].is-loading) {
  justify-content: center;
}

.space-global-dock:not(.space-global-dock--expanded) [data-space-dock-join].is-loading {
  min-width: 180px;
  margin-inline: auto;
  border-color: transparent;
  background: var(--bg);
  color: var(--muted-foreground);
}

.space-global-dock:not(.space-global-dock--expanded) [data-space-dock-join]:not([hidden]):not(.is-loading) {
  width: 100%;
}

.space-global-dock:not(.space-global-dock--expanded) [data-space-dock-join].is-loading .btn__spinner {
  border-color: rgba(113, 118, 123, 0.32);
  border-top-color: currentColor;
}

.space-global-dock [data-space-dock-leave] {
  margin-left: auto;
}

[data-space-dock-leave] {
  border-color: rgba(255, 122, 122, 0.45);
  background: rgba(244, 33, 46, 0.1);
  color: #ff9a9a;
}

[data-space-dock-leave]:hover {
  background: rgba(244, 33, 46, 0.16);
}

.space-global-dock .space-reaction-trigger,
.space-global-dock .space-soundboard__trigger,
.space-global-dock .space-volume__trigger {
  width: auto;
  height: 32px;
  min-height: 0;
  padding: 6px 12px;
  border-radius: 999px;
  box-sizing: border-box;
  font-size: 0.86rem;
  line-height: 1;
}

.space-global-dock__request-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  padding: 0;
  border: 1px solid #3f4650;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted-foreground);
  cursor: pointer;
  flex-shrink: 0;
}

.space-global-dock__icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  padding: 0;
  border: 1px solid #3f4650;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  cursor: pointer;
  flex-shrink: 0;
}

.space-global-dock__icon-action:hover {
  background: rgba(255, 255, 255, 0.1);
}

.space-global-dock__request-bell:hover {
  background: rgba(255, 255, 255, 0.1);
}

.space-global-dock__request-bell--active {
  border-color: rgba(124, 58, 237, 0.9);
  background: rgba(124, 58, 237, 0.2);
  color: #c4b5fd;
  animation: spaceRequestBellPulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
}

@keyframes spaceRequestBellPulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16), 0 0 0 0 rgba(124, 58, 237, 0.34);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22), 0 0 0 7px rgba(124, 58, 237, 0);
  }
}

.space-global-dock--expanded .space-global-dock__actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 6px;
}

.space-global-dock__mic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid #7c3aed;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.16);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
}

.space-global-dock__mic svg {
  display: block;
}

.space-global-dock__mic--on {
  background: #7c3aed;
}

.space-global-dock__mic.is-loading {
  opacity: 0.65;
  cursor: wait;
  pointer-events: none;
}

.space-global-dock__request.is-loading {
  opacity: 0.65;
  cursor: wait;
  pointer-events: none;
}

.space-global-dock__request {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.16);
  color: #fff;
  font-weight: 800;
}

.space-global-dock__request:hover {
  background: rgba(124, 58, 237, 0.24);
}

.space-global-dock__request:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.spaces-back-link {
  display: inline-flex;
  margin: 14px 20px 0;
  color: #a78bfa;
  font-weight: 700;
}

.space-room {
  position: relative;
  margin: 14px 20px 24px;
  border: 1px solid var(--border);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.34), transparent 34%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.16), transparent 28%),
    #050505;
  box-shadow: 0 0 34px rgba(124, 58, 237, 0.12);
}

.space-room__hero {
  padding: 26px 26px 10px;
}

.space-room__hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.space-room__hero-main {
  min-width: 0;
}

.space-room__hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.space-room__collapse {
  width: 44px;
  padding: 0;
}

.space-room__hero h2 {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.space-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #3f4650;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
}

.space-share-button:hover {
  border-color: #a78bfa;
  background: rgba(255, 255, 255, 0.08);
}

.space-share-button svg {
  display: block;
  width: 18px;
  height: 18px;
}

.space-stage,
.space-listeners,
.space-requests {
  padding: 16px 26px 4px;
}

.space-stage h3,
.space-listeners h3,
.space-requests h3 {
  margin: 0 0 14px;
  font-size: 0.98rem;
  color: var(--foreground);
}

.space-anon-label {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  text-align: center;
  padding: 4px 0;
}

.space-guest-count[hidden] {
  display: none !important;
}

.guest-listen-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guest-listen-overlay[hidden] {
  display: none !important;
}

.guest-listen-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.guest-listen-overlay__modal {
  position: relative;
  z-index: 1;
  background: var(--bg, #000);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 24px;
  max-width: 420px;
  width: 90%;
  text-align: center;
}

.guest-listen-overlay__modal h2 {
  margin: 0 0 8px;
}

.guest-listen-banner__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

.guest-listen-name {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.guest-listen-name[hidden] {
  display: none !important;
}

.guest-listen-banner__error {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--danger, #e0245e);
}

.guest-listen-banner__error[hidden] {
  display: none !important;
}

.guest-listening-pill {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface, #1e1e1e);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 0.85rem;
  color: var(--foreground);
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.guest-listening-pill a {
  color: var(--accent);
  text-decoration: none;
}

.guest-listening-pill a:hover {
  text-decoration: underline;
}

.space-participant-grid {
  display: grid;
  gap: 18px 14px;
}

.space-participant-grid--speakers {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

.space-participant-grid--listeners {
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
}

.space-participant {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.space-participant__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.space-participant__profile:hover .space-participant__name {
  text-decoration: underline;
}

.space-participant__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  min-width: 0;
}

.space-participant__avatar-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
}

.space-participant__avatar-wrap .avatar {
  position: relative;
  z-index: 1;
}

.space-participant--speaking .space-participant__avatar-wrap::before,
.space-dock-speaker--speaking::before {
  content: '';
  position: absolute;
  inset: -5px;
  z-index: 0;
  border-radius: 999px;
  background:
    conic-gradient(from 120deg, rgba(124, 58, 237, 0.95), rgba(249, 24, 128, 0.72), rgba(124, 58, 237, 0.95));
  animation: spaceSpeakingPulse 1.25s ease-in-out infinite;
  pointer-events: none;
}

@keyframes spaceSpeakingPulse {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.space-participant__mic {
  position: absolute;
  right: -2px;
  bottom: 2px;
  z-index: 2;
  width: 18px;
  height: 18px;
  border: 2px solid #050505;
  border-radius: 50%;
  background: var(--muted-foreground);
}

.space-participant__mic::before {
  content: '';
  position: absolute;
  inset: 4px 6px 5px;
  border-radius: 999px;
  background: #050505;
}

.space-participant__mic--on {
  background: #7c3aed;
}

.space-participant__hand {
  position: absolute;
  top: -8px;
  right: -4px;
  z-index: 3;
  font-size: 1.15rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  animation: spaceHandWave 1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes spaceHandWave {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
}

.space-inline-action--accept-hand {
  border-color: rgba(124, 58, 237, 0.75);
  background: rgba(124, 58, 237, 0.18);
  color: #ddd6fe;
}

.space-participant__name {
  display: block;
  max-width: 100%;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.space-stage .space-participant__name {
  font-size: 0.94rem;
}

.space-listeners .space-participant__name {
  font-size: 0.88rem;
}

.space-participant__handle {
  display: none;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-participant__role {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-inline-action {
  margin-top: 8px;
  padding: 5px 9px;
  border: 1px solid #3f4650;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}

.space-inline-action:hover {
  border-color: #a78bfa;
}

.space-inline-action.is-loading {
  opacity: 0.65;
  cursor: wait;
  pointer-events: none;
}

.space-inline-action.is-loading:disabled {
  opacity: 0.65;
}

.space-participant__menu-wrap {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  margin-top: 0;
  z-index: 3;
}

.space-participant__menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
}

.space-participant__menu-trigger:hover {
  background: rgba(239, 243, 244, 0.1);
  color: var(--foreground);
}

.space-participant__menu-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.space-participant__menu {
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + 4px);
  min-width: 180px;
  padding: 6px 0;
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
  z-index: 100;
}

.space-mic-button.is-loading {
  opacity: 0.65;
  cursor: wait;
  pointer-events: none;
}

.space-mic-button.is-loading:disabled {
  opacity: 0.65;
}

.space-reactions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.space-reactions__float {
  position: absolute;
  right: 18px;
  bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.space-global-dock .space-reactions__float {
  right: 18px;
  bottom: 76px;
}

.space-global-dock--expanded .space-reactions__float {
  bottom: 108px;
}

.space-reaction-burst {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  font-size: 1.35rem;
  animation: spaceReactionRise 3.2s ease-out both;
}

.space-reaction-burst--from-tile {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  animation: spaceReactionRise 2.0s ease-out both;
}

.space-room--js-reactions .space-reactions__float {
  display: none;
}

/* ---- Space Chat toggle button ---- */

.space-chat-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.space-chat-toggle-btn:hover {
  background: var(--surface-hover);
}

.space-chat-toggle-btn--active,
.space-chat-toggle-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---- Space volume control ---- */

.space-volume {
  position: relative;
  display: inline-flex;
}

.space-volume[hidden],
.space-volume__panel[hidden] {
  display: none !important;
}

.space-volume__panel {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 30;
  display: none;
  align-items: flex-end;
  gap: 18px;
  padding: 12px 16px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transform: translateX(-50%);
}

.space-volume__panel.space-volume__panel--open {
  display: flex;
}

.space-volume__panel.space-volume__panel--portal {
  position: fixed;
  right: auto;
  bottom: auto;
  z-index: 5000;
  transform: none;
}

.space-volume__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.space-volume__row + .space-volume__row {
  margin-top: 0;
}

.space-volume__icon {
  display: inline-flex;
  color: var(--muted-foreground);
}

.space-volume__row input[type="range"] {
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  width: 28px;
  height: 108px;
  margin: 0;
  writing-mode: vertical-lr;
  direction: rtl;
}

.space-volume__trigger svg {
  width: 20px;
  height: 20px;
}

.account-spaces-audio {
  display: grid;
  gap: 14px;
  max-width: 420px;
}

.account-spaces-audio__row {
  display: grid;
  grid-template-columns: 24px 88px 1fr 48px;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.account-spaces-audio__icon {
  display: inline-flex;
  color: var(--muted-foreground);
}

.account-spaces-audio__label {
  font-size: 0.9rem;
}

.account-spaces-audio__slider {
  width: 100%;
  margin: 0;
}

.account-spaces-audio__value {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  text-align: right;
}

/* ---- Space Chat panel ---- */

@keyframes chatOverlayIn {
  from { transform: scale(0.98); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes chatSheetUp {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.space-chat {
  display: none;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  flex-direction: column;
  overflow: hidden;
}

.space-chat.space-chat--open {
  display: flex;
}

@media (min-width: 701px) {
  .spaces-page:not(.watch-party-page) [data-space-chat-panel].space-chat--open {
    position: fixed;
    left: var(--space-chat-fixed-left, 14px);
    right: var(--space-chat-fixed-right, 14px);
    top: var(--space-chat-fixed-top, 7.5rem);
    bottom: var(--space-chat-fixed-bottom, 4.5rem);
    z-index: 50;
    margin: 0;
    max-height: none;
    border: 1px solid #3f4650;
    border-radius: 18px;
    background:
      radial-gradient(circle at top left, rgba(124, 58, 237, 0.22), transparent 34%),
      radial-gradient(circle at top right, rgba(249, 24, 128, 0.1), transparent 28%),
      rgba(5, 5, 5, 0.97);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(124, 58, 237, 0.12);
    animation: chatOverlayIn 0.22s ease;
    animation-fill-mode: both;
  }

  .spaces-page:not(.watch-party-page) [data-space-chat-panel].space-chat--open.space-chat--no-anim {
    animation: none;
  }

  .spaces-page:not(.watch-party-page) [data-space-chat-panel].space-chat--open .space-chat__messages {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .spaces-page:not(.watch-party-page) [data-space-chat-panel].space-chat--open .space-chat__messages::-webkit-scrollbar {
    display: none;
  }

  .spaces-page:not(.watch-party-page) [data-space-chat-panel][hidden] {
    display: none !important;
  }
}

.space-chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
}

.space-chat__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--muted-foreground);
  line-height: 1;
  padding: 0 2px;
}

.space-chat__close:hover {
  color: var(--foreground);
}

.space-chat__messages {
  flex: 1;
  overflow-y: auto;
  min-height: 180px;
  max-height: 280px;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
  background: var(--bg);
}

.space-chat__messages:empty::after {
  content: 'No messages yet.';
  color: var(--muted-foreground);
  font-size: 0.85rem;
  padding: 16px;
  display: block;
  text-align: center;
}

.space-chat__message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.space-chat__message:last-child {
  border-bottom: none;
}

.space-chat__message:hover {
  background: var(--surface-hover);
}

.space-chat__message-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 700;
  flex-shrink: 0;
  color: #fff;
}

.space-chat__message-avatar--img {
  object-fit: cover;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}

.space-chat__message-avatar--0 { background: #6366f1; }
.space-chat__message-avatar--1 { background: #f59e0b; }
.space-chat__message-avatar--2 { background: #10b981; }
.space-chat__message-avatar--3 { background: #ef4444; }
.space-chat__message-avatar--4 { background: #3b82f6; }
.space-chat__message-avatar--5 { background: #ec4899; }
.space-chat__message-avatar--6 { background: #8b5cf6; }
.space-chat__message-avatar--7 { background: #14b8a6; }

.space-chat__message-content {
  flex: 1;
  min-width: 0;
}

.space-chat__message-meta {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.space-chat__message-identity {
  min-width: 0;
}

.space-chat__message-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--foreground);
}

.space-chat__message-handle {
  font-size: 0.9rem;
  color: var(--muted-foreground);
}

.space-chat__message-time {
  font-size: 0.9rem;
  color: var(--muted-foreground);
}

@media (max-width: 700px) {
  .space-chat__message-meta {
    flex-wrap: nowrap;
    align-items: center;
  }

  .space-chat__message-identity {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .space-chat__message-time {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .space-chat__message-actions {
    flex-shrink: 0;
  }
}

.space-chat__message-body {
  font-size: 0.9375rem;
  color: var(--foreground);
  word-break: break-word;
  line-height: 1.5;
  margin-top: 4px;
}

.space-chat__mention {
  color: var(--accent);
}

/* Message action buttons (reply, like) — always visible */

.space-chat__message-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.space-chat__reply-btn,
.space-chat__like-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  color: var(--muted-foreground);
  padding: 3px 6px;
  border-radius: 4px;
  line-height: 1;
}

.space-chat__reply-btn:hover {
  color: var(--accent);
  background: var(--surface-hover);
}

.space-chat__like-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.space-chat__like-btn--liked {
  color: #ef4444;
}

.space-chat__like-btn--liked svg {
  fill: #ef4444;
}

/* Quoted reply block */

.space-chat__quoted {
  margin-bottom: 5px;
  padding: 5px 10px;
  border-left: 3px solid var(--accent);
  background: var(--bg);
  border-radius: 0 6px 6px 0;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.space-chat__quoted-author {
  font-weight: 600;
  color: var(--accent);
  margin-right: 4px;
}

/* Reply bar above input */

.space-chat__reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--muted-foreground);
  min-width: 0;
}

.space-chat__reply-label {
  white-space: nowrap;
}

.space-chat__reply-label strong {
  color: var(--foreground);
}

.space-chat__reply-preview {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted-foreground);
}

.space-chat__reply-clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--muted-foreground);
  flex-shrink: 0;
  line-height: 1;
  padding: 0 2px;
}

.space-chat__reply-clear:hover {
  color: var(--foreground);
}

/* Threaded reply indicator above input */

.space-chat__reply-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--muted-foreground);
  min-width: 0;
}

/* Expand/collapse reply thread toggle */

.space-chat__reply-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  color: var(--muted-foreground);
  padding: 3px 6px;
  border-radius: 4px;
  line-height: 1;
}

.space-chat__reply-toggle:hover {
  color: var(--accent);
  background: var(--surface-hover);
}

/* Collapsible replies thread */

.space-chat__replies {
  margin-left: 36px;
  border-left: 2px solid var(--accent);
  padding-left: 10px;
  margin-top: 2px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
}

.space-chat__replies .space-chat__message {
  padding: 5px 0;
}

/* Form area */

.space-chat__form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  position: relative;
}

.space-chat__input-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.space-chat__input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: 20px;
  padding: 7px 12px;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.space-chat__input:focus {
  border-color: var(--accent);
}

.space-chat__input::placeholder {
  color: var(--muted-foreground);
}

.space-chat__counter {
  font-size: 0.72rem;
  color: var(--muted-foreground);
  flex-shrink: 0;
  min-width: 2.2ch;
  text-align: right;
}

.space-chat__counter--warn {
  color: #ef4444;
}

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

.space-chat__login-prompt {
  padding: 10px 16px;
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
}

@media (max-width: 700px) {
  body.space-chat-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
  }

  .spaces-page:not(.watch-party-page) .space-chat.space-chat--open {
    position: fixed;
    right: 12px;
    bottom: calc(144px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    z-index: 1050;
    margin: 0;
    max-height: min(58dvh, 480px);
    border-radius: 20px;
    background: var(--bg);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border);
    animation: chatSheetUp 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .spaces-page:not(.watch-party-page) .space-chat.space-chat--open .space-chat__messages {
    flex: 1;
    min-height: 120px;
    max-height: none;
  }

  .spaces-page:not(.watch-party-page) .space-chat.space-chat--open .space-chat__form {
    position: sticky;
    bottom: 0;
    z-index: 1;
    flex-shrink: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
  }
}

/* @mention dropdown */

.space-chat__mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 12px;
  right: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.space-chat__mention-dropdown li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.85rem;
}

.space-chat__mention-dropdown li:hover {
  background: var(--surface-hover);
}

.space-chat__mention-name {
  font-weight: 600;
  color: var(--foreground);
}

.space-chat__mention-handle {
  color: var(--muted-foreground);
  font-size: 0.8rem;
}

.space-reaction-picker,
.space-soundboard {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.space-reaction-trigger,
.space-reaction-btn,
.space-soundboard__trigger,
.space-soundboard__pad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 1.1rem;
}

.space-reaction-trigger,
.space-soundboard__trigger {
  width: 44px;
  height: 44px;
  border: 1px solid #3f4650;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted-foreground);
}

.space-reaction-btn {
  width: 34px;
  height: 34px;
}

.space-reaction-trigger:hover,
.space-reaction-btn:hover,
.space-soundboard__trigger:hover,
.space-soundboard__pad:hover {
  background: rgba(255, 255, 255, 0.1);
}

.space-reaction-trigger svg,
.space-soundboard__trigger svg {
  display: block;
}

.space-soundboard__panel {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 5;
  width: 178px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(5, 5, 5, 0.96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.36);
  transform: translateX(-50%);
}

.space-soundboard__panel[hidden] {
  display: none !important;
}

.space-soundboard__panel.space-soundboard__panel--portal {
  position: fixed;
  right: auto;
  bottom: auto;
  z-index: 5000;
  transform: none;
}

.space-soundboard__panel.space-soundboard__panel--portal::after {
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.space-soundboard__panel::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(5, 5, 5, 0.96);
  transform: translateX(-50%) rotate(45deg);
}

.space-soundboard__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.space-soundboard__pad {
  width: 50px;
  height: 50px;
  border: 1px solid #3f4650;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 900;
}

.space-soundboard__pad--custom {
  border-color: rgba(124, 58, 237, 0.75);
  background: rgba(124, 58, 237, 0.18);
  color: #ddd6fe;
}

.space-soundboard__pad--playing {
  transform: scale(0.94);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22);
}

.space-music {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.space-music[hidden] {
  display: none !important;
}

.space-music__trigger svg {
  display: block;
}

.space-music-modal.compose-modal {
  z-index: 5200;
}

.space-music-modal[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.space-music-modal .space-music-modal__backdrop {
  z-index: 0;
}

.space-music-modal .space-music-modal__panel {
  position: relative;
  z-index: 1;
}

.space-music-modal .compose-modal__close {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}

.space-music-modal__panel.compose-modal__panel {
  width: min(920px, calc(100vw - 24px));
  max-width: min(920px, calc(100vw - 24px));
  height: min(85vh, 760px);
  min-height: min(85vh, 760px);
  max-height: min(85vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  margin-top: min(6vh, 40px);
}

.space-music-modal__head {
  flex: 0 0 auto;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}

.space-music__connect {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.space-music__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.space-music-modal__columns {
  flex: 1 1 auto;
  min-height: 320px;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.space-music-modal__col {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 0;
}

.space-music-modal__col--search {
  border-right: 1px solid var(--border);
}

.space-music-modal__col-heading {
  flex: 0 0 auto;
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.space-music-modal__col-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

.space-music-modal__footer {
  flex: 0 0 auto;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  background: rgba(5, 5, 5, 0.96);
}

.space-music__meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  min-height: 1.2em;
}

.space-music__mute-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  font-size: 0.82rem;
  color: var(--muted-foreground);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.space-music__mute-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #ef4444;
  cursor: pointer;
}

.space-music__mute-toggle span {
  line-height: 1.3;
}

body.space-music-modal-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .space-music-modal__columns {
    grid-template-columns: 1fr;
  }

  .space-music-modal__col--search {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    max-height: 42%;
  }

  .space-music-modal__panel.compose-modal__panel {
    height: min(90vh, 760px);
    min-height: min(90vh, 760px);
    max-height: min(90vh, 760px);
  }
}

.space-music__connect-copy {
  margin: 0 0 10px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--muted-foreground);
}

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

.space-music__provider {
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.space-music__search {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex: 0 0 auto;
}

.space-music__search-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #3f4650;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  font: inherit;
  font-size: 0.9rem;
}

.space-music__results {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.space-music__results[hidden],
.space-music__body[hidden],
.space-music__connect[hidden],
.space-music__now[hidden],
.space-music__empty[hidden],
.space-music__status[hidden],
.space-music-modal__footer[hidden] {
  display: none !important;
}

.space-music__result,
.space-music__queue-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  width: 100%;
  cursor: pointer;
}

.space-music__queue-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

button.space-music__result {
  cursor: pointer;
}

button.space-music__result:hover,
.space-music__queue-item--active {
  background: rgba(255, 255, 255, 0.08);
}

.space-music__art {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
}

.space-music__meta {
  min-width: 0;
}

.space-music__title {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.space-music__artist {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.space-music__transport {
  display: flex;
  align-items: center;
  gap: 6px;
}

.space-music__transport-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #3f4650;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  cursor: pointer;
}

.space-music__transport-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.space-music__transport-btn--play-ready {
  border-color: rgba(34, 197, 94, 0.7);
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}

.space-music__transport-btn--play-ready:hover {
  background: rgba(34, 197, 94, 0.28);
  color: #86efac;
}

.space-music__transport-btn--stop-active {
  border-color: rgba(239, 68, 68, 0.75);
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.space-music__transport-btn--stop-active:hover {
  background: rgba(239, 68, 68, 0.32);
  color: #fca5a5;
}

.space-music__volume {
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: 6px;
}

.space-music__volume input[type="range"] {
  width: 100%;
}

.space-music__now {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.space-music__queue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.space-music__queue-actions {
  display: flex;
  gap: 2px;
}

.space-music__queue-actions button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 0.85rem;
}

.space-music__queue-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--foreground);
}

.space-music__empty {
  margin: 4px 0 0;
}

.space-music__status {
  margin: 8px 0 0;
}

.space-music-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.86rem;
}

.space-music-notice[hidden] {
  display: none !important;
}

.space-music-notice a {
  color: var(--foreground);
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

.space-music-notice button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

.space-global-dock .space-music__trigger {
  width: 44px;
  height: 44px;
}

.space-reaction-tray {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.36);
  transform: translateX(-50%);
}

.space-reaction-tray--portal {
  position: fixed;
  right: auto;
  bottom: auto;
  z-index: 5000;
  transform: none;
}

.space-reaction-tray--portal::after {
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.space-reaction-tray[hidden] {
  display: none !important;
}

.space-reaction-tray::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(5, 5, 5, 0.94);
  transform: translateX(-50%) rotate(45deg);
}

@keyframes spaceReactionRise {
  0%   { opacity: 0; transform: translateY(0)     scale(0);    }
  22%  { opacity: 1; transform: translateY(-6px)  scale(1.35); }
  38%  { opacity: 1; transform: translateY(-6px)  scale(1);    }
  80%  { opacity: 1; transform: translateY(-72px) scale(1);    }
  100% { opacity: 0; transform: translateY(-110px) scale(0.8); }
}

/* ---- Space create modal error ---- */

.space-create-modal__error {
  margin: 6px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  font-size: 0.85rem;
}

.space-create-modal__error[hidden] {
  display: none;
}

/* ---- Hand skin-tone picker ---- */

.space-hand-tone-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.space-hand-tone-tray {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%);
  white-space: nowrap;
}

.space-hand-tone-tray[hidden] {
  display: none !important;
}

.space-hand-tone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 1.1rem;
}

.space-hand-tone-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ---- Raise hand ---- */

.space-reaction-divider {
  width: 1px;
  height: 24px;
  margin: 0 2px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.space-raise-hand__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 1.1rem;
  transition: background 0.15s, transform 0.15s;
}

.space-raise-hand__btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.space-raise-hand__btn--active {
  background: rgba(255, 193, 7, 0.2);
  animation: spaceRaiseHandBounce 0.4s ease;
}

@keyframes spaceRaiseHandBounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}

.space-requests {
  margin: 10px 26px 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
}

.space-request-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
}

.space-request-row + .space-request-row {
  border-top: 1px solid var(--border);
}

.space-controls {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding: 18px 20px 22px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
}

.space-controls__action-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.space-controls__action-group:has([data-space-join-audio]:not([hidden])):has([data-space-join-anonymous]:not([hidden])) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.space-controls__action-group:has([data-space-join-audio]:not([hidden])) {
  width: 100%;
}

.space-controls [data-space-join-audio]:not([hidden]) {
  width: 100%;
}

.space-controls__action-group:has([data-space-join-anonymous]:not([hidden])) [data-space-join-audio]:not([hidden]),
.space-controls__action-group:has([data-space-join-anonymous]:not([hidden])) [data-space-join-anonymous]:not([hidden]) {
  width: auto;
  min-width: 0;
}

.space-controls > .btn-danger,
.space-controls > .space-controls__leave,
.space-controls > [data-space-action="leave"] {
  margin-left: auto;
}

.space-controls__leave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 122, 122, 0.45);
  border-radius: 50%;
  background: rgba(244, 33, 46, 0.1);
  color: #ff9a9a;
  cursor: pointer;
  font: inherit;
}

.space-controls__leave:hover {
  background: rgba(244, 33, 46, 0.16);
}

.space-controls__leave svg {
  display: block;
}

[data-space-connected-only][hidden] {
  display: none !important;
}

[data-space-join-audio][hidden],
[data-space-join-anonymous][hidden],
[data-space-dock-join][hidden] {
  display: none !important;
}

.space-controls .btn {
  min-height: 44px;
  padding: 0 16px;
  font-size: 0.95rem;
  font-weight: 800;
}

.space-replay-player {
  width: 100%;
}

.space-replay-player__download {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.space-replay-player__download:hover,
.space-replay-player__download:focus-visible {
  color: var(--foreground);
  border-color: var(--muted-foreground);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
}

.space-replay-player__host-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.space-replay-player__host-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 calc(50% - 4px);
  min-width: 140px;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.space-replay-player__host-btn:hover,
.space-replay-player__host-btn:focus-visible {
  color: var(--foreground);
  border-color: var(--muted-foreground);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
}

.space-replay-player__host-btn[data-space-replay-disable] {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.45);
}

.space-replay-player__host-btn[data-space-replay-disable]:hover,
.space-replay-player__host-btn[data-space-replay-disable]:focus-visible {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.75);
  background: rgba(239, 68, 68, 0.08);
}

.space-replay-player__host-btn[data-space-replay-enable] {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.45);
}

.space-replay-player__host-btn[data-space-replay-enable]:hover,
.space-replay-player__host-btn[data-space-replay-enable]:focus-visible {
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.75);
  background: rgba(34, 197, 94, 0.08);
}

.space-replay-player__host-btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.space-replay-player__disabled,
.space-replay-player__moved {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
}

.space-replay-player__disabled-message,
.space-replay-player__moved-banner {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: center;
}

.space-replay-player__moved-banner {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed var(--border);
}

.space-replay-player__listen,
.space-replay-player__listen:hover,
.space-replay-player__listen:focus-visible {
  width: 100%;
  justify-content: center;
  text-decoration: none;
}

[data-space-replay-redirect-modal] .label {
  display: block;
  margin: 12px 0 6px;
}

[data-space-replay-redirect-modal] .input {
  width: 100%;
  margin-bottom: 8px;
}

[data-space-replay-redirect-modal] [data-space-replay-redirect-error]:not([hidden]) {
  color: var(--danger, #ef4444);
  margin: 0 0 8px;
}

[data-space-replay-redirect-modal] [data-space-replay-redirect-remove] {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.45);
}

[data-space-replay-redirect-modal] [data-space-replay-redirect-remove][hidden] {
  display: none !important;
}

[data-space-replay-redirect-modal] [data-space-replay-redirect-remove]:hover,
[data-space-replay-redirect-modal] [data-space-replay-redirect-remove]:focus-visible {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.75);
  background: rgba(239, 68, 68, 0.08);
}

.space-replay-player__main {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
}

.space-replay-player__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(167, 139, 250, 0.5);
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.2);
  color: var(--foreground);
  cursor: pointer;
}

.space-replay-player__play:disabled {
  cursor: wait;
  opacity: 0.85;
}

.space-replay-player--ready .space-replay-player__play:hover {
  background: rgba(124, 58, 237, 0.34);
}

.space-replay-player__play span {
  display: inline-flex;
}

.space-replay-player__play span[hidden] {
  display: none;
}

.space-replay-player__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: space-replay-spin 0.75s linear infinite;
}

.space-replay-player--loading .space-replay-player__play {
  cursor: wait;
}

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

.space-replay-player__body {
  min-width: 0;
  flex: 1 1 auto;
}

.space-replay-player__head,
.space-replay-player__times {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.space-replay-player__title {
  font-weight: 900;
}

.space-replay-player__status,
.space-replay-player__times {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 700;
}

.space-replay-player__timeline {
  position: relative;
  height: 6px;
  margin: 10px 0 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}

.space-replay-player--ready .space-replay-player__timeline {
  cursor: pointer;
}

.space-replay-player__progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #f91880);
}

.space-mic-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #7c3aed;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.18);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
}

.space-mic-button--on {
  background: #7c3aed;
}

.space-mic-button svg {
  display: block;
  width: 16px;
  height: 16px;
}

.space-mic-button__icon {
  position: relative;
  width: 16px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.space-mic-button__icon::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 12px;
  height: 7px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 0 0 10px 10px;
  transform: translateX(-50%);
}

.spaces-rtk-elements {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 700px) {
  .avatar--xl {
    width: 50px;
    height: 50px;
    font-size: 1.1rem;
  }

  .spaces-header,
  .space-create-card {
    padding-left: 14px;
    padding-right: 14px;
  }

  .space-create-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .space-create-card--guest {
    align-items: stretch;
    flex-direction: column;
  }

  .spaces-back-link,
  .spaces-alert,
  .spaces-status {
    margin-left: 14px;
    margin-right: 14px;
  }

  #space-room-fragment {
    box-sizing: border-box;
    display: flex;
    min-height: 0;
  }

  .space-room {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin: 12px 10px 20px;
    max-height: min(56dvh, 460px);
    min-height: 300px;
    border-radius: 22px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .spaces-page:not(.watch-party-page) #space-room-fragment {
    display: block;
  }

  .spaces-page:not(.watch-party-page) .space-room {
    display: block;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  .space-room__hero,
  .space-stage,
  .space-listeners {
    padding-left: 16px;
    padding-right: 16px;
  }

  .space-requests {
    margin-left: 16px;
    margin-right: 16px;
  }

  .space-participant-grid--speakers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .space-participant-grid--listeners {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .space-listeners {
    min-height: 0;
    padding-bottom: 86px;
  }

  .space-controls {
    bottom: 0;
    flex-shrink: 0;
    padding: 14px 12px;
  }

  .spaces-page:not(.watch-party-page) .space-controls {
    position: fixed;
    z-index: 1040;
    right: 12px;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.92);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  }

  .spaces-page:not(.watch-party-page) .space-controls .space-controls__action-group {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    width: auto;
  }

  .spaces-page:not(.watch-party-page) .space-controls .space-controls__action-group:has([data-space-join-audio]:not([hidden])):has([data-space-join-anonymous]:not([hidden])) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .spaces-page:not(.watch-party-page) .space-controls .space-controls__action-group:has([data-space-join-anonymous]:not([hidden])) [data-space-join-audio]:not([hidden]),
  .spaces-page:not(.watch-party-page) .space-controls .space-controls__action-group:has([data-space-join-anonymous]:not([hidden])) [data-space-join-anonymous]:not([hidden]) {
    width: auto;
    min-width: 0;
    padding: 0 10px;
    font-size: 0.82rem;
  }

  .spaces-page:not(.watch-party-page) .space-controls:has([data-space-join-audio]:not([hidden])):not(:has([data-space-join-anonymous]:not([hidden]))) .space-controls__action-group,
  .spaces-page:not(.watch-party-page) .space-controls:has([data-space-join-audio]:not([hidden])):not(:has([data-space-join-anonymous]:not([hidden]))) [data-space-join-audio]:not([hidden]) {
    width: 100%;
  }

  .spaces-page:not(.watch-party-page) .space-controls .space-mic-button,
  .spaces-page:not(.watch-party-page) .space-controls .space-reaction-trigger,
  .spaces-page:not(.watch-party-page) .space-controls .space-chat-toggle-btn,
  .spaces-page:not(.watch-party-page) .space-controls .space-volume__trigger,
  .spaces-page:not(.watch-party-page) .space-controls .space-soundboard__trigger,
  .spaces-page:not(.watch-party-page) .space-controls > .space-controls__leave,
  .spaces-page:not(.watch-party-page) .space-controls > [data-space-action="leave"],
  .spaces-page:not(.watch-party-page) .space-controls > [data-space-action="end"] {
    flex: 0 0 auto;
    min-height: 38px;
    height: 38px;
  }

  .spaces-page:not(.watch-party-page) .space-controls .space-mic-button {
    padding: 0 10px;
    font-size: 0.8rem;
  }

  .spaces-page:not(.watch-party-page) .space-controls .space-reaction-trigger,
  .spaces-page:not(.watch-party-page) .space-controls .space-chat-toggle-btn,
  .spaces-page:not(.watch-party-page) .space-controls .space-volume__trigger,
  .spaces-page:not(.watch-party-page) .space-controls .space-soundboard__trigger {
    width: 38px;
    padding: 0;
    border-radius: 50%;
  }

  .spaces-page:not(.watch-party-page) .space-controls > .space-controls__leave,
  .spaces-page:not(.watch-party-page) .space-controls > [data-space-action="leave"] {
    margin-left: auto;
    width: 38px;
    padding: 0;
  }

  .spaces-page:not(.watch-party-page) .space-controls > [data-space-action="end"] {
    margin-left: auto;
    padding: 0 12px;
    font-size: 0.82rem;
  }

  .spaces-page .space-controls [data-space-action="request_speaker"]:not(:disabled) [data-space-request-label] {
    font-size: 0;
  }

  .spaces-page .space-controls [data-space-action="request_speaker"]:not(:disabled) [data-space-request-label]::after {
    content: 'Request';
    font-size: 0.82rem;
  }

  .spaces-page:not(.watch-party-page) .space-room {
    margin-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }

  .space-global-dock {
    right: 10px;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
    width: calc(100vw - 20px);
    padding: 12px;
  }

  .space-global-dock--expanded {
    box-sizing: border-box;
    max-height: calc(100dvh - 94px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .space-global-dock__actions {
    flex-wrap: wrap;
  }

  .space-global-dock--expanded .space-global-dock__actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 -12px -12px;
    padding: 12px;
    background: rgba(5, 5, 5, 0.96);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
  }

  .space-reaction-picker {
    order: 10;
  }

  .space-soundboard {
    order: 11;
  }

  .space-reaction-tray {
    left: 0;
    transform: none;
  }

  .space-soundboard__panel {
    left: 0;
    transform: none;
  }

  .space-reaction-tray::after {
    left: 17px;
    transform: rotate(45deg);
  }

  .space-soundboard__panel::after {
    left: 17px;
    transform: rotate(45deg);
  }

  .space-controls .space-reaction-tray {
    left: 50%;
    transform: translateX(-50%);
  }

  .space-controls .space-reaction-tray::after {
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }

  .space-controls .space-soundboard__panel {
    left: 50%;
    transform: translateX(-50%);
  }

  .space-controls .space-soundboard__panel::after {
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }

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

  .space-request-row .btn {
    grid-column: span 1;
  }

  .admin-settings-form {
    padding: 14px;
  }

  .admin-settings-form__grid-2 {
    grid-template-columns: 1fr;
  }

  .admin-settings-form__section-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-settings-form__row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-soundboard-grid {
    grid-template-columns: 1fr;
  }

  .account-soundboard-grid {
    grid-template-columns: 1fr;
  }
}

.admin-page {
  padding: 16px;
}

.admin-tabs-scroll {
  position: relative;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  max-width: 100%;
}

.admin-tabs-scroll__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--foreground);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.15s ease, background 0.15s ease;
}

.admin-tabs-scroll__arrow:hover {
  background: var(--muted, rgba(0, 0, 0, 0.04));
}

.admin-tabs-scroll__arrow:focus-visible {
  outline: 2px solid rgba(29, 155, 240, 0.55);
  outline-offset: 2px;
}

.admin-tabs-scroll__arrow--left {
  left: 6px;
}

.admin-tabs-scroll__arrow--right {
  right: 6px;
}

.admin-tabs-scroll__arrow[hidden] {
  display: none;
}

.admin-tabs-scroll::before,
.admin-tabs-scroll::after {
  content: '';
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 52px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.admin-tabs-scroll::before {
  left: 1px;
  border-radius: 15px 0 0 15px;
  background: linear-gradient(to right, var(--bg) 20%, transparent);
}

.admin-tabs-scroll::after {
  right: 1px;
  border-radius: 0 15px 15px 0;
  background: linear-gradient(to left, var(--bg) 20%, transparent);
}

.admin-tabs-scroll.is-fade-left::before,
.admin-tabs-scroll.is-fade-right::after {
  opacity: 1;
}

.admin-tabs {
  display: flex;
  flex-wrap: nowrap;
  border: 0;
  border-radius: 16px;
  background: transparent;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.admin-tabs::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.admin-tabs__button {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: max-content;
  padding: 14px 20px;
  white-space: nowrap;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.admin-tabs__badge {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
}

.admin-tab-panel[hidden] {
  display: none;
}

.admin-placeholder-panel {
  min-height: 160px;
}

.admin-alert {
  margin: 0 0 12px;
}

.admin-notice {
  padding: 10px 12px;
  border: 1px solid #164b22;
  border-radius: 12px;
  background: rgba(22, 75, 34, 0.22);
  color: #d7ffd9;
}

.admin-chart {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  margin-bottom: 18px;
}

.admin-chart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.admin-chart__head h2,
.admin-chart__head p {
  margin: 0;
}

.admin-chart__head p {
  margin-top: 4px;
}

.admin-chart__canvas-wrap {
  position: relative;
  height: 220px;
  width: 100%;
}

.admin-chart__bars {
  display: grid;
  grid-template-columns: repeat(14, minmax(34px, 1fr));
  gap: 8px;
  align-items: end;
  min-height: 220px;
}

.admin-chart__bar-wrap {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 6px;
  min-width: 0;
  height: 220px;
}

.admin-chart__bar-value,
.admin-chart__bar-label {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.admin-chart__bar-track {
  display: flex;
  align-items: end;
  height: 160px;
  min-height: 160px;
  border-radius: 999px;
  background: var(--bg-secondary);
  overflow: hidden;
}

.admin-chart__bar {
  width: 100%;
  height: var(--admin-bar-height, 4%);
  min-height: 4px;
  border-radius: 999px 999px 0 0;
  background: var(--foreground);
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.admin-stat {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-secondary);
}

.admin-stat__label {
  margin-bottom: 8px;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 700;
}

.admin-stat__value {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}

.admin-stat__value--rate {
  font-size: 1.55rem;
}

.admin-stat__hint {
  margin-top: 8px;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 600;
}

.admin-stats--live .admin-stat--live {
  border-color: color-mix(in srgb, var(--foreground) 18%, var(--border));
  background: color-mix(in srgb, var(--foreground) 4%, var(--bg-secondary));
}

.admin-stats--rates {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-stats--stations {
  margin-top: 4px;
  margin-bottom: 22px;
}

.admin-stats--subscriptions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
  padding: 16px 16px 0;
}

.admin-subscriptions-member {
  display: grid;
  gap: 2px;
}

.admin-subscriptions-member a {
  color: inherit;
  text-decoration: none;
}

.admin-subscriptions-member a:hover,
.admin-subscriptions-member a:focus-visible {
  text-decoration: underline;
}

.admin-subscriptions-renewal {
  font-weight: 700;
  font-size: 0.86rem;
}

.admin-subscriptions-renewal--renew {
  color: color-mix(in srgb, #16a34a 78%, var(--foreground));
}

.admin-subscriptions-renewal--cancel {
  color: color-mix(in srgb, #dc2626 78%, var(--foreground));
}

.admin-analytics-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.admin-analytics-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 48px 24px;
}

.admin-analytics-loader[hidden] {
  display: none;
}

.admin-analytics-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.admin-analytics-loader__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: catalogLoadSpin 0.8s linear infinite;
}

.admin-analytics-loader__label {
  font-size: 14px;
}

.admin-analytics-content[hidden] {
  display: none;
}

.admin-analytics-range {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.admin-analytics-range__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-analytics-range__select {
  min-width: 140px;
}

.admin-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.admin-analytics-grid .admin-chart {
  margin-bottom: 0;
}

.admin-chart--wide {
  margin-bottom: 18px;
}

.admin-chart--wide .admin-chart__canvas-wrap--bars {
  height: 280px;
}

.admin-chart__bars--hourly {
  grid-template-columns: repeat(24, minmax(28px, 1fr));
}

.admin-chart__bar--accent {
  background: color-mix(in srgb, var(--foreground) 72%, transparent);
}

.admin-chart__bar--signup {
  background: color-mix(in srgb, #7dd3fc 72%, var(--foreground));
}

.admin-leaderboards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.admin-leaderboard {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
}

.admin-section {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
}

.admin-section__title {
  margin: 0 0 12px;
}

.dict-admin-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(47,51,54,0.3); }
.dict-admin-row__icon { font-size: 1.5rem; }
.dict-admin-row__info { flex: 1; display: flex; flex-direction: column; }
.dict-admin-row__status { font-size: 0.75rem; padding: 2px 8px; border-radius: 4px; background: var(--muted-foreground); color: #fff; white-space: nowrap; }
.dict-admin-row__status--active { background: #22c55e; }
.dict-admin-form,
.dict-admin-edit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dict-admin-edit-form {
  padding: 12px;
  margin: 4px 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.dict-admin-edit-form[hidden] { display: none; }
.dict-admin-create summary { cursor: pointer; list-style: none; display: inline-flex; }
.dict-admin-create summary::-webkit-details-marker { display: none; }

.admin-community-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(47,51,54,0.3);
  transition: background 0.15s;
}
.admin-community-row:hover { background: var(--surface-hover); }
.admin-community-row:last-child { border-bottom: 0; }
.admin-community-row__thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.admin-community-row__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-size: 1.2rem;
  font-weight: 700;
}
.admin-community-row__info { flex: 1; display: flex; flex-direction: column; }
.admin-community-detail__back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 8px 0;
}
.admin-community-detail__back:hover { text-decoration: underline; }
.admin-community-detail__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.admin-community-detail__title {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.admin-community-detail__title-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
.admin-community-detail-tabs {
  margin: 4px 0 12px;
}
.admin-community-panel[hidden] {
  display: none;
}
.admin-community-profile-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.admin-community-profile-row--media {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.admin-community-profile-row__main {
  flex: 1 1 280px;
  min-width: 0;
  max-width: 420px;
}
.admin-community-profile-row__side {
  flex: 0 0 auto;
  margin-left: auto;
}
.admin-community-accent-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-community-accent-swatch {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.admin-community-accent-swatch::-webkit-color-swatch-wrapper {
  padding: 0;
}
.admin-community-accent-swatch::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}
.admin-community-accent-swatch::-moz-color-swatch {
  border: none;
  border-radius: 3px;
}
.admin-community-accent-field .input {
  width: 120px;
}
.admin-community-profile-thumbs {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.admin-community-profile-thumbs .admin-community-media-field {
  margin-top: 0;
}
.admin-community-media-field {
  margin-top: 12px;
}
.admin-community-profile-row--media .admin-community-media-field {
  margin-top: 0;
}
.admin-community-media-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.admin-community-media {
  margin-top: 6px;
}
.admin-community-media__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface, #16181c);
}
.admin-community-media--banner .admin-community-media__frame {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 1;
}
.admin-community-media--thumb .admin-community-media__frame {
  width: 120px;
  height: 68px;
}
.admin-community-media__preview {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1d21 0%, #0d0d0d 100%);
  background-size: cover;
  background-position: center;
}
.admin-community-media__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-community-media__actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.28);
  transition: background 0.15s ease;
}
.admin-community-media__frame:hover .admin-community-media__actions,
.admin-community-media__frame:focus-within .admin-community-media__actions {
  background: rgba(0, 0, 0, 0.4);
}
.admin-community-media__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.admin-community-media--thumb .admin-community-media__action {
  width: 28px;
  height: 28px;
}
.admin-community-media__action:hover,
.admin-community-media__action:focus-visible {
  background: rgba(0, 0, 0, 0.7);
  outline: none;
  transform: scale(1.05);
}
.admin-community-media__action--danger:hover,
.admin-community-media__action--danger:focus-visible {
  background: rgba(180, 35, 24, 0.9);
}
.admin-community-media__action:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}
.admin-community-media__action svg {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.admin-community-user-lookup .label {
  display: block;
  font-weight: 600;
  margin-bottom: 0;
}
.admin-community-owner-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, rgba(255,255,255,0.03));
}
.admin-community-owner-selected[hidden] {
  display: none;
}
.admin-community-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.admin-community-person__avatar,
.admin-community-person__avatar .avatar {
  flex-shrink: 0;
}
.admin-community-person__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.admin-community-person__name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-community-person__handle {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-community-manager-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.admin-community-manager-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface, rgba(255,255,255,0.03));
  font-size: 0.85rem;
  max-width: 100%;
}
.admin-community-manager-chip__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  line-height: 1.2;
}
.admin-community-manager-chip__name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-community-manager-chip__handle {
  font-size: 0.72rem;
  font-weight: 600;
}
.admin-community-manager-chip__remove {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.7;
}
.admin-community-manager-chip__remove:hover,
.admin-community-manager-chip__remove:focus-visible {
  opacity: 1;
}
.admin-community-user-result {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-community-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.admin-community-block:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.admin-community-block--flush {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.admin-community-feature-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 720px) {
  .admin-community-feature-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.admin-community-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 92px;
  padding: 14px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface, rgba(255, 255, 255, 0.03));
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.admin-community-feature-card:hover {
  border-color: var(--accent, #1d9bf0);
}
.admin-community-feature-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.admin-community-feature-card__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-community-feature-card:has(input:checked) {
  border-color: var(--accent, #1d9bf0);
  background: rgba(29, 155, 240, 0.12);
  box-shadow: inset 0 0 0 1px rgba(29, 155, 240, 0.35);
}
.admin-community-feature-card:has(input:checked) .admin-community-feature-card__check {
  border-color: var(--accent, #1d9bf0);
  background: var(--accent, #1d9bf0);
  color: #fff;
}
.admin-community-feature-card__icon {
  font-size: 1.35rem;
  line-height: 1;
}
.admin-community-feature-card__name {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
  padding-right: 18px;
}
.admin-community-active-tools-empty {
  margin: 4px 0 0;
  font-size: 0.85rem;
}
.admin-community-block--last {
  padding-bottom: 4px;
}
.admin-community-block__title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
}
.admin-community-block__hint {
  margin: 0 0 10px;
  font-size: 0.8rem;
}
.admin-community-block__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.admin-community-block__field-label {
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 0.8rem;
}
.admin-community-inline-field {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 560px;
}
.admin-community-inline-field .input {
  flex: 1;
  min-width: 0;
}
.admin-community-inline-field > .btn,
.admin-community-pull-menu {
  flex-shrink: 0;
}
.admin-community-inline-field > .btn.btn-sm,
.admin-community-pull-menu__trigger.btn-sm {
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: inherit;
  line-height: 1.2;
  height: auto;
  align-self: stretch;
}
.admin-community-inline-status {
  margin: 8px 0 0;
  font-size: 0.8rem;
  min-height: 1.2em;
}
.admin-community-pull-menu {
  position: relative;
  display: flex;
  align-items: stretch;
}
.admin-community-pull-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  height: 100%;
}
.admin-community-pull-menu__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface, var(--bg-secondary));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.admin-community-pull-menu__dropdown[hidden] {
  display: none !important;
}
.admin-community-pull-menu__item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.admin-community-pull-menu__item:hover:not(:disabled),
.admin-community-pull-menu__item:focus-visible:not(:disabled) {
  background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
  border-color: var(--border);
}
.admin-community-pull-menu__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-community-pull-menu__item[hidden] {
  display: none;
}
@media (max-width: 640px) {
  .admin-community-inline-field {
    flex-wrap: wrap;
    max-width: none;
  }
  .admin-community-inline-field > .btn,
  .admin-community-pull-menu {
    width: 100%;
  }
  .admin-community-inline-field > .btn,
  .admin-community-pull-menu__trigger {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  .admin-community-pull-menu__dropdown {
    left: 0;
    right: 0;
    min-width: 0;
  }
}
.admin-community-catalog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.admin-community-catalog-footer__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-community-catalog-footer__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
.admin-community-catalog-footer__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-community-catalog-footer__actions[hidden] {
  display: none;
}
.admin-community-muted-btn,
.admin-community-danger-btn {
  border-style: dashed;
  color: var(--muted, #8b98a5);
  border-color: rgba(139, 152, 165, 0.55);
  background: transparent;
}
.admin-community-muted-btn:hover:not(:disabled),
.admin-community-muted-btn:focus-visible:not(:disabled),
.admin-community-danger-btn:hover:not(:disabled),
.admin-community-danger-btn:focus-visible:not(:disabled) {
  color: var(--foreground, #e7e9ea);
  border-color: rgba(139, 152, 165, 0.85);
  background: rgba(139, 152, 165, 0.08);
}
.admin-community-muted-btn:disabled,
.admin-community-danger-btn:disabled {
  color: rgba(139, 152, 165, 0.45);
  border-color: rgba(139, 152, 165, 0.28);
  background: transparent;
  opacity: 1;
}
.admin-community-danger-btn--delete {
  color: rgba(239, 68, 68, 0.72);
  border-color: rgba(239, 68, 68, 0.4);
}
.admin-community-danger-btn--delete:hover:not(:disabled),
.admin-community-danger-btn--delete:focus-visible:not(:disabled) {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.75);
  background: rgba(239, 68, 68, 0.08);
}
.admin-community-catalog-footer__right [data-community-catalog-actions][hidden] {
  display: none;
}
.admin-community-members-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-community-members-head h4 {
  margin: 0;
}
.admin-community-members-head__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-community-members-list {
  margin-top: 12px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 8px;
  background: var(--surface);
}
.admin-community-members {
  list-style: none;
  margin: 0;
  padding: 0;
}
.admin-community-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(47, 51, 54, 0.3);
  font-size: 0.9rem;
}
.admin-community-member:last-child {
  border-bottom: 0;
}
.admin-community-member .admin-community-person__meta {
  flex: 1;
}
.admin-community-member__name {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-community-auto-join-modal__panel {
  max-width: 440px;
  width: calc(100% - 32px);
}
.admin-community-auto-join-modal__body {
  padding: 0 20px 8px;
}
.admin-community-auto-join-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.admin-community-auto-join-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.admin-community-auto-join-stat strong {
  font-size: 1.5rem;
  line-height: 1.1;
}
.admin-community-auto-join-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px 20px;
}
.admin-community-move-posts-modal__panel {
  max-width: 560px;
  width: calc(100% - 32px);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
}
.admin-community-move-posts-modal__body {
  padding: 0 20px 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.admin-community-move-posts-days {
  overflow-y: auto;
  max-height: min(56vh, 480px);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.admin-community-move-posts-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(47, 51, 54, 0.3);
}
.admin-community-move-posts-day:last-child {
  border-bottom: 0;
}
.admin-community-move-posts-day__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.admin-community-move-posts-day__info strong {
  font-size: 0.95rem;
}
.admin-community-tool {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(47,51,54,0.3);
}
.admin-community-tool[hidden] {
  display: none;
}
.admin-community-tool span:first-child { flex: 1; font-weight: 600; }

.admin-leaderboard__head h2,
.admin-leaderboard__head p {
  margin: 0;
}

.admin-leaderboard__head p {
  margin-top: 4px;
}

.admin-leaderboard__empty {
  margin: 12px 0 0;
}

.admin-leaderboard__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.admin-leaderboard__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.admin-leaderboard__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.admin-leaderboard__rank {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
}

.admin-leaderboard__user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-leaderboard__names {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-leaderboard__display,
.admin-leaderboard__username {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-leaderboard__display {
  font-size: 0.92rem;
  font-weight: 700;
}

.admin-leaderboard__username {
  color: var(--muted-foreground);
  font-size: 0.78rem;
}

.admin-leaderboard__metric {
  display: grid;
  justify-items: end;
  gap: 2px;
  font-size: 0.92rem;
  font-weight: 800;
  white-space: nowrap;
}

.admin-leaderboard__metric-value {
  white-space: nowrap;
}

.admin-leaderboard__metric-detail {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
  white-space: pre-line;
  max-width: 12rem;
}

.admin-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg);
}

.admin-panel__head {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.admin-panel__head h2,
.admin-panel__head p {
  margin: 0;
}

.admin-panel__head p {
  margin-top: 4px;
}

.admin-empty-state {
  padding: 20px;
}

.admin-patreon-thumbs {
  display: grid;
  gap: 20px;
  padding: 16px;
}

.admin-patreon-thumbs__dropzone {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 20px;
  border: 2px dashed var(--border);
  border-radius: 18px;
  background: var(--bg-secondary);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.admin-patreon-thumbs__dropzone:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

.admin-patreon-thumbs__dropzone--active,
.admin-patreon-thumbs__dropzone:hover {
  border-color: #7c3aed;
  background: color-mix(in srgb, #7c3aed 8%, var(--bg-secondary));
}

.admin-patreon-thumbs__dropzone-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: color-mix(in srgb, #7c3aed 14%, transparent);
  color: #a78bfa;
}

.admin-patreon-thumbs__dropzone-title {
  margin: 0;
  font-weight: 700;
}

.admin-patreon-thumbs__dropzone-copy {
  margin: 0;
  max-width: 36rem;
}

.admin-patreon-thumbs__summary,
.admin-patreon-thumbs__queue {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-patreon-thumbs__summary-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

.admin-patreon-thumbs__progress-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
}

.admin-patreon-thumbs__progress-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  transition: width 0.2s ease;
}

.admin-patreon-thumbs__queue {
  display: grid;
  gap: 10px;
}

.admin-patreon-thumbs__queue-item {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
}

.admin-patreon-thumbs__queue-item--done {
  border-color: color-mix(in srgb, #22c55e 40%, var(--border));
}

.admin-patreon-thumbs__queue-item--error {
  border-color: color-mix(in srgb, #ef4444 40%, var(--border));
}

.admin-patreon-thumbs__queue-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.admin-patreon-thumbs__queue-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.admin-patreon-thumbs__library-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-patreon-thumbs__library-title {
  margin: 0;
  font-size: 1rem;
}

.admin-patreon-thumbs__empty {
  margin: 0 0 12px;
}

.admin-patreon-thumbs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.admin-patreon-thumbs__loading {
  margin: 0;
  grid-column: 1 / -1;
}

.admin-patreon-thumbs-pagination {
  margin-top: 16px;
}

.admin-patreon-thumbs__card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
}

.admin-patreon-thumbs__card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg);
}

.admin-patreon-thumbs__card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-patreon-thumbs__card-meta {
  padding: 10px;
}

.admin-patreon-thumbs__card-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
}

.admin-patreon-thumbs__card-size {
  margin-top: 4px;
}

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

.admin-premium-summary-card {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-secondary);
}

.admin-premium-summary-card .admin-subscription-badge {
  width: auto;
  max-width: max-content;
}

.admin-premium-summary-card strong {
  font-size: 1.8rem;
  line-height: 1;
}

.admin-premium-summary-card p {
  margin: 0;
}

.admin-premium-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 16px;
}

.admin-premium-feature-form {
  border-top: 1px solid var(--border);
}

.admin-premium-feature-form__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}

.admin-premium-feature-form__head h3,
.admin-premium-feature-form__head p {
  margin: 0;
}

.admin-premium-feature-form__head p {
  margin-top: 4px;
}

.admin-premium-feature-form__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.admin-premium-feature-form__actions .btn[hidden],
.admin-premium-feature-cancel[hidden],
.admin-premium-feature-save[hidden] {
  display: none !important;
}

.admin-premium-feature-matrix {
  display: grid;
  border-top: 1px solid var(--border);
}

.admin-premium-feature-matrix__head,
.admin-premium-feature-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(90px, 120px));
  gap: 0;
}

.admin-premium-feature-matrix__head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-secondary);
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-premium-feature-matrix__head > div,
.admin-premium-feature-row > div {
  min-width: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.admin-premium-feature-matrix__head > div:not(:first-child),
.admin-premium-feature-row > div:not(:first-child) {
  text-align: center;
}

.admin-premium-feature-row strong {
  display: block;
}

.admin-premium-feature-row .muted {
  display: block;
  margin-top: 3px;
}

.admin-premium-feature-access {
  color: var(--border2);
  font-size: 1rem;
  font-weight: 800;
}

.admin-premium-feature-access--yes {
  color: #9ff2b4;
}

.admin-premium-feature-save.btn-primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
}

.admin-premium-feature-save.btn-primary:hover,
.admin-premium-feature-save.btn-primary:focus-visible {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  filter: brightness(0.92);
}

.admin-premium-feature-cancel.btn-outline {
  border-color: rgba(239, 68, 68, 0.72);
  color: #ff8a8a;
}

.admin-premium-feature-cancel.btn-outline:hover,
.admin-premium-feature-cancel.btn-outline:focus-visible {
  background: rgba(239, 68, 68, 0.12);
  color: #ffb4b4;
}

.admin-premium-feature-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.admin-premium-feature-form--editing .admin-premium-feature-toggle {
  display: inline-flex;
}

.admin-premium-feature-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.admin-premium-note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px;
  background: rgba(29, 155, 240, 0.08);
}

.admin-panel__head--with-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-panel__head--trending > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-settings-panel {
  margin-bottom: 18px;
}

.admin-settings-form {
  max-width: 900px;
  padding: 18px;
}

.admin-settings-form > .label {
  display: block;
  margin-bottom: 8px;
}

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

.admin-settings-form__field > .label {
  display: block;
  margin-bottom: 8px;
}

.admin-settings-form__field > .input {
  width: 100%;
}

.admin-settings-form__field > .muted {
  margin: 8px 0 0;
}

.admin-settings-form__divider {
  margin: 22px 0;
  border-top: 1px solid var(--border);
}

.admin-settings-form__divider--section {
  margin-top: 0;
}

.admin-settings-form__section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.admin-settings-form__section-copy {
  min-width: 0;
}

.admin-settings-form__section-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
}

.admin-settings-form__section-copy > .muted {
  margin: 0;
}

.admin-settings-form__section-row > .admin-settings-toggle {
  flex-shrink: 0;
}

.admin-settings-form__row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) auto;
  gap: 12px;
  align-items: center;
}

.admin-settings-form__row + .muted {
  margin: 8px 0 0;
}

.admin-settings-form__row--toggle {
  grid-template-columns: 1fr;
}

.admin-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.admin-settings-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.admin-settings-toggle__track {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #3d4144;
  transition: background 0.15s ease;
}

.admin-settings-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

.admin-settings-toggle input:checked + .admin-settings-toggle__track {
  background: var(--accent);
}

.admin-settings-toggle input:checked + .admin-settings-toggle__track .admin-settings-toggle__thumb {
  transform: translateX(20px);
}

.admin-settings-toggle input:focus-visible + .admin-settings-toggle__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.admin-settings-toggle__text {
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 600;
}

.admin-settings-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 10px;
}

.admin-settings-form__actions[hidden] {
  display: none;
}

.admin-timeline-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}

.admin-timeline-slot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

#admin-timeline-settings-form .admin-settings-form__divider {
  margin-top: 28px;
  margin-bottom: 22px;
}

.admin-timeline-slot__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-timeline-slot__head > div:first-child {
  min-width: 0;
}

.admin-timeline-slot__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.admin-timeline-slot__current {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-timeline-slot__source {
  margin: 0;
}

.admin-timeline-slot__empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  text-align: center;
}

.admin-timeline-slot__card {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.admin-timeline-slot__card .tweet {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.admin-timeline-slot__card--catalog .widget {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.admin-timeline-slot__card--episode-tweet {
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

.admin-spaces-rooms-modal .compose-modal__backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.admin-spaces-rooms-modal__panel {
  width: min(640px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
}

.admin-spaces-rooms-modal__head {
  align-items: flex-start;
}

.admin-spaces-rooms-modal__head-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
}

/* Solid fill, unlike the per-row outline End room button — this one ends everything. */
.admin-spaces-rooms-modal__kill-all {
  background: #ff4d4f;
  border-color: #ff4d4f;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.admin-spaces-rooms-modal__kill-all:hover,
.admin-spaces-rooms-modal__kill-all:focus-visible {
  background: #ff6b6b;
  border-color: #ff6b6b;
  color: #fff;
}

.admin-spaces-rooms-modal__kill-all[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-spaces-rooms-modal__body {
  overflow: auto;
  padding: 0 18px 18px;
}

.admin-spaces-rooms-modal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.admin-spaces-rooms-modal__row:first-child {
  border-top: 0;
}

.admin-spaces-rooms-modal__row-main {
  min-width: 0;
  flex: 1;
}

.admin-spaces-rooms-modal__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-spaces-rooms-modal__title {
  font-size: 1rem;
}

.admin-spaces-rooms-modal__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #ff4d4f;
}

.admin-spaces-rooms-modal__meta {
  margin: 6px 0 0;
}

.admin-spaces-rooms-modal__handle {
  color: var(--muted-foreground);
}

.admin-spaces-rooms-modal__row-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

.admin-spaces-rooms-modal__end {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.45);
}

.admin-spaces-rooms-modal__end:hover,
.admin-spaces-rooms-modal__end:focus-visible {
  color: #ff8787;
  border-color: rgba(255, 135, 135, 0.65);
  background: rgba(255, 107, 107, 0.08);
}

.admin-spaces-rooms-modal__loading,
.admin-spaces-rooms-modal__empty {
  padding: 24px 0;
}

@media (max-width: 640px) {
  .admin-spaces-rooms-modal__row {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-spaces-rooms-modal__row-actions {
    justify-content: flex-end;
  }
}

.admin-timeline-modal .compose-modal__backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.admin-timeline-modal__panel {
  width: min(720px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
}

.admin-timeline-modal__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 20px 20px;
  overflow: hidden;
}

.admin-timeline-modal__step-label {
  margin: 0 0 8px;
  font-weight: 600;
}

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

.admin-timeline-modal__source-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
}

.admin-timeline-modal__source-option:hover,
.admin-timeline-modal__source-option:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}

.admin-timeline-modal__user-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--background);
}

.admin-timeline-modal__user-results[hidden] {
  display: none;
}

.admin-timeline-modal__user-item {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
}

.admin-timeline-modal__user-item:hover,
.admin-timeline-modal__user-item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.admin-timeline-modal__posts-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-timeline-modal__posts-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(52vh, 520px);
  overflow: auto;
  padding-right: 4px;
}

.admin-timeline-modal__post-item {
  display: block;
  flex-shrink: 0;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
}

.admin-timeline-modal__post-item:hover,
.admin-timeline-modal__post-item:focus-visible {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.admin-timeline-modal__post-item .tweet {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  pointer-events: none;
}

.admin-timeline-modal__post-item .tweet:hover {
  background: transparent;
}

.admin-timeline-modal__post-item .tweet__body {
  flex: 1;
  min-width: 0;
}

.admin-timeline-modal__post-item .tweet__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.admin-timeline-modal__catalog-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
}

.admin-timeline-modal__catalog-item:hover,
.admin-timeline-modal__catalog-item:focus-visible {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.admin-timeline-modal__catalog-thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
}

.admin-timeline-modal__catalog-thumb--empty {
  display: block;
}

.admin-timeline-modal__catalog-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.admin-timeline-modal__catalog-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.3;
}

.admin-timeline-modal__loading,
.admin-timeline-modal__empty {
  margin: 0;
  padding: 16px 4px;
}

.admin-podding-head {
  align-items: flex-start;
}

.admin-podding-head__layout {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 6px 16px;
  align-items: center;
  width: 100%;
}

.admin-podding-head__layout > h2 {
  margin: 0;
}

.admin-podding-head__subtext {
  margin: 0;
  grid-column: 1;
  grid-row: 2;
}

.admin-podding-head__top-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  grid-column: 2;
  grid-row: 1;
}

.admin-podding-head__top-actions .admin-settings-form__actions {
  margin: 0;
}

.admin-podding-head__top-actions .admin-settings-form__actions[hidden] {
  display: none;
}

.admin-podding-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  text-align: right;
  grid-column: 2;
  grid-row: 2;
}

.admin-podding-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1.3;
  white-space: nowrap;
}

.admin-podding-stat-badge strong {
  font-weight: 700;
}

.admin-podding-stat-badge--included {
  background: rgba(76, 175, 80, 0.15);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.32);
}

.admin-podding-stat-badge--pending {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.admin-podding-stat-badge--rejected {
  background: rgba(244, 67, 54, 0.15);
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
}

button.admin-podding-stat-badge {
  margin: 0;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.admin-podding-stat-badge--clickable:hover,
.admin-podding-stat-badge--clickable:focus-visible {
  filter: brightness(1.08);
  outline: none;
}

.admin-podding-stat-badge--clickable:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12), 0 0 0 4px currentColor;
}

.admin-podding-auto-analysis-hint {
  margin: 0 0 16px;
}

.admin-podding-name-field {
  margin-bottom: 20px;
}

.admin-podding-name-field .input {
  max-width: 320px;
}

.admin-podding-keywords {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-podding-keywords__add {
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-podding-keywords__add .input {
  flex: 1;
  min-width: 0;
}

.admin-podding-keywords__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-podding-keyword-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  font-size: 0.92rem;
}

.admin-podding-keyword-chip__remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

.admin-podding-topics {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.admin-podding-topics__add {
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-podding-topics__add .input {
  flex: 1;
  min-width: 0;
}

.admin-podding-topics__list,
.admin-podding-analyze__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-podding-topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(29, 155, 240, 0.12);
  border: 1px solid rgba(29, 155, 240, 0.35);
  color: var(--foreground);
  font-size: 0.92rem;
}

.admin-podding-topic-chip--readonly {
  padding: 4px 9px;
  font-size: 0.8rem;
}

.admin-podding-topic-chip__remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

.admin-podding-preview-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.admin-podding-preview-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-podding-preview-filters__head .label {
  margin: 0;
}

.admin-podding-preview-filter-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-podding-preview-filter-chip:hover {
  border-color: rgba(29, 155, 240, 0.45);
  color: var(--foreground);
}

.admin-podding-preview-filter-chip--include {
  background: rgba(29, 155, 240, 0.14);
  border-color: rgba(29, 155, 240, 0.5);
  color: var(--foreground);
}

.admin-podding-preview-filter-chip--exclude {
  background: rgba(244, 33, 46, 0.1);
  border-color: rgba(244, 33, 46, 0.45);
  color: var(--foreground);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.admin-podding-preview-filter-chip__count {
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.admin-podding-preview-filter-chip--include .admin-podding-preview-filter-chip__count,
.admin-podding-preview-filter-chip--exclude .admin-podding-preview-filter-chip__count {
  color: inherit;
  opacity: 0.75;
}

.admin-podding-preview-filters__summary {
  margin: 0;
}

.admin-podding-analyze__topics {
  margin: 0 0 6px;
}

.admin-podding-review__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-podding-review__item {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.admin-podding-review__keyword {
  margin: 0 0 10px;
}

.admin-podding-review__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.admin-podding-preview__list {
  margin-top: 12px;
}

.admin-podding-review__card .tweet {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.admin-podding-review__card {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.admin-podding-analyze__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.admin-podding-analyze__intro {
  margin: 0;
  flex: 1;
  min-width: min(100%, 280px);
}

.admin-podding-analyze__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

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

.admin-podding-analyze__feed .tweet {
  margin: 0;
}

.admin-podding-analyze__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  cursor: pointer;
  border-radius: 14px;
  transition: background 0.15s ease, outline-color 0.15s ease;
}

.admin-podding-analyze__item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.admin-podding-analyze__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.admin-podding-analyze__status {
  margin: 0;
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.3;
}

.admin-podding-analyze__reason {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.35;
}

.admin-podding-analyze__card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  flex: 1;
  min-width: 0;
}

.admin-podding-analyze__card .tweet {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  font-size: 0.85rem;
}

.admin-podding-analyze__card .tweet:hover {
  background: transparent;
}

.admin-podding-analyze__card .tweet > .tweet__avatar .avatar--md {
  width: 28px;
  height: 28px;
  font-size: 0.7rem;
}

.admin-podding-analyze__card .tweet__header {
  gap: 4px;
}

.admin-podding-analyze__card .tweet__header-text {
  gap: 4px;
}

.admin-podding-analyze__card .tweet__identity {
  gap: 3px;
}

.admin-podding-analyze__card .tweet__name,
.admin-podding-analyze__card .tweet__meta,
.admin-podding-analyze__card .tweet__time {
  font-size: 0.78rem;
}

.admin-podding-analyze__card .tweet__text {
  font-size: 0.82rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.admin-podding-analyze__card .tweet__menu-trigger {
  width: 24px;
  height: 24px;
  margin: -2px -4px -2px 0;
}

.admin-podding-analyze__card .tweet__bar {
  display: none;
}

.admin-podding-analyze__card .tweet__media img,
.admin-podding-analyze__card .tweet__media-gallery__item img {
  max-height: 110px;
  object-fit: cover;
}

.admin-podding-analyze__card .tweet__clip-iframe {
  max-height: 110px;
}

.admin-podding-analyze__card .tweet__quoted .tweet {
  padding: 8px 10px;
  font-size: 0.8rem;
}

.admin-podding-analyze__card .tweet__quoted .tweet__text {
  -webkit-line-clamp: 2;
}

.admin-podding-analyze__load-more {
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .admin-podding-analyze__feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .admin-podding-analyze__feed {
    grid-template-columns: 1fr;
  }
}

.admin-podding-tag-modal__panel {
  max-width: 420px;
  max-height: min(85vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-podding-tag-modal__body {
  display: flex;
  flex-direction: column;
  padding: 0 20px 20px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.admin-podding-tag-modal__list {
  flex: 1;
  min-height: 0;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 12px;
}

.admin-podding-tag-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  flex-shrink: 0;
}

.admin-podding-tag-success-modal__panel {
  max-width: 340px;
}

.admin-podding-tag-success-modal__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 36px 44px;
  gap: 18px;
}

.admin-podding-tag-success-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(0, 186, 124, 0.14);
  color: #00ba7c;
}

.admin-podding-tag-success-modal__icon svg {
  width: 34px;
  height: 34px;
}

.admin-podding-tag-success-modal__message {
  margin: 0;
  color: var(--foreground);
  font-size: 0.98rem;
  line-height: 1.5;
  max-width: 260px;
}

.admin-podding-tag-success-modal__countdown {
  margin: 0;
}

.admin-podding-tag-success-modal__close-btn {
  margin-top: 4px;
  background: transparent;
  color: var(--muted-foreground);
  border: 1px dashed var(--border);
  min-width: 120px;
}

.admin-podding-tag-success-modal__close-btn:hover,
.admin-podding-tag-success-modal__close-btn:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted-foreground);
  border-color: rgba(255, 255, 255, 0.24);
}

.admin-podding-analysis-modal__panel {
  max-width: 460px;
}

.admin-podding-analysis-modal__body {
  padding: 0 20px 20px;
}

.admin-podding-analysis-modal__outcome {
  margin: 0 0 18px;
  font-size: 1rem;
  font-weight: 700;
}

.admin-podding-analysis-modal__section + .admin-podding-analysis-modal__section {
  margin-top: 16px;
}

.admin-podding-analysis-modal__label {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.admin-podding-analysis-modal__reason {
  margin: 0;
  line-height: 1.5;
}

.admin-podding-analyze-scan-modal .compose-modal__backdrop {
  background: rgba(0, 0, 0, 0.78);
}

.admin-podding-analyze-scan-modal__panel {
  width: min(920px, calc(100vw - 24px));
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-podding-analyze-scan-modal__head {
  align-items: flex-start;
  gap: 12px;
}

.admin-podding-analyze-scan-modal__heading {
  min-width: 0;
  flex: 1;
}

.admin-podding-analyze-scan-modal__status {
  margin: 4px 0 0;
}

.admin-podding-analyze-scan-modal__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.admin-podding-analyze-scan-modal__stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.admin-podding-analyze-scan-modal__stat-line {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.95rem;
}

.admin-podding-analyze-scan-modal__topic-counts {
  margin: 0;
  min-height: 1.5rem;
}

.admin-podding-analyze-scan-modal__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 0 16px;
  -webkit-overflow-scrolling: touch;
}

.admin-podding-analyze-scan-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.admin-podding-analyze-scan-table th,
.admin-podding-analyze-scan-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.admin-podding-analyze-scan-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.admin-podding-analyze-scan-table th:last-child,
.admin-podding-analyze-scan-table td:last-child {
  width: 38%;
}

.admin-podding-analyze-scan-table__author {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.admin-podding-analyze-scan-table__post {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}

.admin-podding-analyze-scan-table__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
}

.admin-podding-analyze-scan-table__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-podding-analyze-scan-table__avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--muted-foreground);
  font-size: 0.85rem;
  font-weight: 600;
}

.admin-podding-analyze-scan-table__content {
  min-width: 0;
  flex: 1;
}

.admin-podding-analyze-scan-table__name {
  font-weight: 600;
}

.admin-podding-analyze-scan-table__handle,
.admin-podding-analyze-scan-table__meta {
  color: var(--muted-foreground);
  font-size: 0.85rem;
}

.admin-podding-analyze-scan-table__body {
  margin: 0;
  color: var(--foreground);
  font-size: 0.92rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-podding-analyze-scan-table__row.is-scanning {
  background: rgba(29, 155, 240, 0.06);
}

.admin-podding-analyze-scan-table__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 1.5rem;
}

.admin-podding-analyze-scan-table__pending {
  color: var(--muted-foreground);
  font-size: 0.85rem;
}

.admin-podding-analyze-scan-modal__load-more {
  margin: 8px 16px 0;
}

.admin-podding-analyze-scan-modal__empty {
  margin: 24px 16px;
  text-align: center;
}

.admin-podding-status-browser-modal .compose-modal__backdrop {
  background: rgba(0, 0, 0, 0.78);
}

.admin-podding-status-browser-modal__panel {
  width: min(720px, calc(100vw - 24px));
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-podding-status-browser-modal__head {
  align-items: flex-start;
  gap: 12px;
}

.admin-podding-status-browser-modal__heading {
  min-width: 0;
  flex: 1;
}

.admin-podding-status-browser-modal__status {
  margin: 4px 0 0;
}

.admin-podding-status-browser-modal__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 16px 20px;
  -webkit-overflow-scrolling: touch;
}

.admin-podding-status-browser-modal__load-more {
  margin: 8px 0 0;
}

.admin-podding-status-browser__reason {
  margin: 0 0 8px;
}

.admin-podding-analyze-detail-modal .compose-modal__backdrop {
  background: rgba(0, 0, 0, 0.78);
}

.admin-podding-analyze-detail-modal__panel {
  display: flex;
  flex-direction: column;
  width: min(1400px, calc(100vw - 24px));
  max-width: none;
  max-height: min(94vh, 980px);
  margin-top: 1.5vh;
  overflow: hidden;
}

.admin-podding-analyze-detail-modal__split {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.2fr);
  gap: 0;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.admin-podding-analyze-detail-modal__analysis {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px 24px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.02);
}

.admin-podding-analyze-detail-modal__outcome {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}

.admin-podding-analyze-detail-modal__section {
  min-width: 0;
}

.admin-podding-analyze-detail-modal__label {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.admin-podding-analyze-detail-modal__text {
  margin: 0;
  line-height: 1.5;
  word-break: break-word;
}

.admin-podding-analyze-detail-modal__post {
  min-width: 0;
  overflow-y: auto;
  padding: 18px 20px 24px;
  background: var(--bg);
}

.admin-podding-analyze-detail-modal__post-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.admin-podding-analyze-detail-modal__post-card .tweet {
  border: 0;
  max-width: none;
}

.admin-podding-analyze-detail-modal__post-card .tweet:hover {
  background: transparent;
}

.admin-podding-analyze-detail-modal__post-card .tweet__menu-trigger,
.admin-podding-analyze-detail-modal__post-card .tweet__bar {
  display: none;
}

@media (max-width: 860px) {
  .admin-podding-analyze-detail-modal__panel {
    width: min(100vw - 16px, 720px);
    max-height: min(94vh, 960px);
    margin-top: 1vh;
  }

  .admin-podding-analyze-detail-modal__split {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .admin-podding-analyze-detail-modal__analysis {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    max-height: 42vh;
  }
}

.admin-podding-analysis-modal__detail {
  margin: 0;
  line-height: 1.45;
}

.admin-podding-analysis-modal__body .btn {
  margin-top: 20px;
}

.admin-trending-head__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.admin-trending-head__title-row h2 {
  margin: 0;
}

.admin-timeline-head__layout {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-timeline-head__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.admin-timeline-head__title-row h2 {
  margin: 0;
}

.admin-timeline-gif-default {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.admin-timeline-gif-default__row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.admin-timeline-gif-default__label {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.admin-timeline-gif-default__select {
  width: auto;
  min-width: 110px;
}

.admin-timeline-gif-default__status {
  margin: 0;
  min-height: 1.1em;
  text-align: right;
}

.admin-trending-window-start {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.admin-trending-window-input {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.admin-trending-window-input__value {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-trending-window-input__unit {
  flex: 0 0 110px;
}

.admin-trending-metrics__head {
  margin-bottom: 12px;
}

.admin-trending-metrics__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-trending-metrics__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.admin-trending-metrics__order {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-trending-metrics__enable {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.admin-trending-metrics__weight {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 88px;
}

.admin-trending-metrics__weight .input {
  width: 88px;
}

.admin-trending-preview {
  margin-top: 4px;
}

.admin-trending-preview__content {
  margin-top: 12px;
  transition: opacity 0.15s ease;
}

.admin-trending-preview__content--loading {
  opacity: 0.55;
  pointer-events: none;
}

.admin-trending-preview__cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.admin-trending-preview__card {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.admin-trending-preview__card .tweet {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.admin-trending-reset {
  max-width: 900px;
  padding: 0 18px 18px;
}

.admin-trending-reset__divider {
  max-width: 900px;
  margin-left: 18px;
  margin-right: 18px;
}

.admin-trending-reset__form {
  margin: 0;
}

.admin-trending-reset__panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.admin-trending-reset__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-trending-reset__copy > .admin-settings-form__section-title {
  margin-bottom: 6px;
}

.admin-trending-reset__copy > .muted {
  margin: 0;
}

.admin-trending-reset__controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 min(100%, 240px);
  width: min(100%, 240px);
}

.admin-trending-reset__controls .admin-settings-form__field {
  margin: 0;
}

.admin-trending-reset__controls .admin-settings-form__field > .label {
  margin-bottom: 8px;
}

.admin-trending-reset__controls .admin-settings-form__field > .input {
  width: 100%;
}

.admin-trending-reset__button {
  width: 100%;
  justify-content: center;
}

@media (max-width: 760px) {
  .admin-trending-metrics__row {
    grid-template-columns: 1fr;
  }

  .admin-trending-metrics__order {
    flex-direction: row;
  }

  .admin-trending-reset__panel {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-trending-reset__controls {
    width: 100%;
    flex-basis: auto;
  }
}

@media (max-width: 900px) {
  .admin-timeline-slots {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .admin-timeline-slot__head {
    flex-direction: column;
  }

  .admin-timeline-modal__source-options {
    grid-template-columns: 1fr;
  }
}

.widget--episode-tweet .tweet,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet {
  margin: 0;
  border-bottom: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
}

.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet {
  padding-top: 14px;
}

.widget--episode-tweet .tweet__avatar,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__avatar {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.widget--episode-tweet .tweet__body,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__body {
  display: contents;
}

.widget--episode-tweet .tweet__pin-badge,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__pin-badge {
  grid-column: 1 / -1;
}

.widget--episode-tweet .tweet:has(.tweet__pin-badge) .tweet__avatar,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet:has(.tweet__pin-badge) .tweet__avatar,
.widget--episode-tweet .tweet:has(.tweet__pin-badge) .tweet__header,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet:has(.tweet__pin-badge) .tweet__header {
  grid-row: 2;
}

.widget--episode-tweet .tweet__header,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__header {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  align-self: center;
  align-items: center;
}

.widget--episode-tweet .tweet__header-text,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__header-text {
  align-items: center;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.widget--episode-tweet .tweet__identity,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  max-width: 100%;
}

.widget--episode-tweet .tweet__name,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.widget--episode-tweet .tweet__meta,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__meta {
  display: block;
  margin-left: 0;
  line-height: 1.2;
}

.widget--episode-tweet .tweet__name .display-name-with-badge,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__name .display-name-with-badge {
  display: inline-flex;
  vertical-align: middle;
  max-width: 100%;
}

.widget--episode-tweet .tweet__name .display-name-with-badge__text,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__name .display-name-with-badge__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget--episode-tweet .tweet__menu-trigger,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__menu-trigger {
  margin-top: 0;
  margin-bottom: 0;
}

.widget--episode-tweet .tweet__body > :not(.tweet__header):not(.tweet__pin-badge),
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__body > :not(.tweet__header):not(.tweet__pin-badge) {
  grid-column: 1 / -1;
}

.widget--episode-tweet .tweet__text,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__text {
  margin-top: 0;
}

.widget--episode-tweet .tweet__media,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__media {
  width: 100%;
  margin-top: 4px;
}

.widget--episode-tweet .tweet__bar,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__bar {
  display: none;
}

.widget--episode-tweet .tweet__separator,
.widget--episode-tweet .tweet__time,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__separator,
.admin-timeline-slot__current[data-admin-timeline-current="sidebar"] .tweet__time {
  display: none;
}

.admin-soundboard-settings {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.admin-soundboard-settings__head {
  margin-bottom: 16px;
}

.admin-soundboard-settings__head h3,
.admin-soundboard-settings__head p {
  margin: 0;
}

.admin-soundboard-settings__head p {
  margin-top: 6px;
}

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

.admin-soundboard-slot {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.admin-soundboard-slot .label {
  margin: 0;
}

.admin-soundboard-slot__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-soundboard-slot__head .label {
  min-width: 0;
}

.admin-soundboard-slot__play {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--foreground);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-soundboard-slot__play:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border2);
}

.admin-soundboard-slot__play:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.admin-soundboard-slot__play--playing {
  color: #f4212e;
  border-color: rgba(244, 33, 46, 0.45);
  background: rgba(244, 33, 46, 0.12);
}

.admin-soundboard-slot .muted {
  margin: 0;
}

.admin-soundboard-slot__remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-soundboard-slot input[type="file"] {
  width: 100%;
  margin-top: auto;
}

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

.account-soundboard-slot {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.account-soundboard-slot__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-soundboard-slot__number {
  font-weight: 700;
  flex: 1;
}

.account-soundboard-slot__play,
.account-soundboard-slot__remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--foreground);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.account-soundboard-slot__play:hover,
.account-soundboard-slot__remove:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border2);
}

.account-soundboard-slot__play--playing {
  color: #f4212e;
  border-color: rgba(244, 33, 46, 0.45);
  background: rgba(244, 33, 46, 0.12);
}

.account-soundboard-slot__remove {
  font-size: 1rem;
  line-height: 1;
}

.account-soundboard-slot__status,
.account-soundboard-slot__current {
  margin: 0;
}

.account-soundboard-slot__label-input,
.account-soundboard-slot__file {
  width: 100%;
}

.account-soundboard-slot__error {
  margin: 0;
  color: #f4212e;
  font-size: 0.82rem;
}

.admin-badges-panel .admin-badges-form {
  max-width: none;
}

.admin-badges-form .admin-settings-form__divider {
  margin-left: 0;
  margin-right: 0;
}

.admin-badges-section {
  margin-bottom: 0;
}

.admin-badges-section + .admin-settings-form__divider {
  margin-top: 22px;
}

.admin-badges-section__head {
  margin-bottom: 16px;
}

.admin-badges-section__head .admin-settings-form__section-title {
  margin-bottom: 6px;
}

.admin-badges-section__head .muted {
  margin: 0;
}

.admin-badges-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.admin-badge-tier-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}

.admin-badge-tier-card__head h4 {
  margin: 0 0 4px;
}

.admin-badge-tier-card__previews {
  display: flex;
  gap: 20px;
  align-items: center;
}

.admin-badge-tier-card__preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-badge-tier-card__preview-label {
  font-size: 0.78rem;
  color: var(--muted-foreground);
}

.admin-badge-tier-card__icon {
  display: block;
  object-fit: contain;
  border-radius: 4px;
}

.admin-badge-tier-card__icon--lg {
  border-radius: 10px;
}

.admin-badge-tier-card__sample {
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-weight: inherit;
}

.admin-badge-preview-wrap {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.admin-badge-preview.tweet {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.admin-badge-preview .tweet__avatar {
  margin: 0;
}

.admin-badge-preview .tweet__body {
  min-width: 0;
}

.admin-badge-preview .tweet__header {
  margin: 0;
}

.admin-badge-preview .tweet__header-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}

.admin-badge-preview .tweet__identity {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.admin-badge-preview .tweet__name {
  font-weight: 700;
}

.admin-badge-preview .tweet__meta {
  color: var(--muted-foreground);
  font-size: 0.92rem;
}

.admin-badge-tier-card__reset {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
}

.admin-branding-form {
  max-width: 720px;
}

.admin-branding-previews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 8px 0 16px;
}

.admin-branding-preview__label {
  display: block;
  margin-bottom: 8px;
}

.admin-branding-preview__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #000;
}

.admin-branding-preview--light .admin-branding-preview__stage {
  background: #ffffff;
}

.admin-branding-preview__img {
  display: block;
  max-width: min(220px, 100%);
  width: auto;
  height: auto;
  max-height: 72px;
  filter: none;
}

.admin-branding-preview--light .admin-branding-preview__img {
  filter: invert(1);
}

.admin-branding-schema-preview {
  margin: 8px 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  max-width: 480px;
}

.admin-branding-schema-preview__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

.admin-branding-reset {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
  font-size: 0.92rem;
}

.admin-branding-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 16px;
  font-size: 0.95rem;
  font-weight: 600;
}

.admin-branding-jingle-preview {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 12px 0 4px;
}

.admin-badges-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-top: 12px;
}

.admin-badges-inline-form .admin-settings-form__field {
  flex: 1 1 180px;
  min-width: 0;
}

.admin-badges-empty {
  margin-top: 12px;
}

.admin-badges-category-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.admin-badges-category-list__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.admin-badge-category-card {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}

.admin-badge-category-card__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
}

.admin-badge-category-card:not(.admin-badge-category-card--collapsed) {
  overflow: visible;
}

.admin-badge-category-card__toggle:hover {
  background: rgba(255, 255, 255, 0.03);
}

.admin-badge-category-card__toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.admin-badge-category-card__summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.admin-badge-category-card__name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.admin-badge-category-card__meta {
  margin: 0;
}

.admin-badge-category-card__chevron {
  flex-shrink: 0;
  color: var(--muted-foreground);
  transition: transform 0.18s ease;
}

.admin-badge-category-card:not(.admin-badge-category-card--collapsed) .admin-badge-category-card__chevron {
  transform: rotate(180deg);
}

.admin-badge-category-card__body {
  padding: 16px;
  border-top: 1px solid var(--border);
}

.admin-badge-category-card__head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.admin-badge-category-card__head h4,
.admin-badge-category-card__head p {
  margin: 0;
}

.admin-badge-category-card__icon {
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 6px;
}

.admin-badge-category-delete {
  margin-top: 8px;
}

.admin-badge-category-members {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.admin-badge-category-members__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.admin-badge-category-members__head h5 {
  margin: 0;
}

.admin-badge-category-members__search {
  width: 100%;
}

.admin-badge-category-members__results,
.admin-badge-special__results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  margin: 8px 0 12px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--background);
  -webkit-overflow-scrolling: touch;
}

.admin-badge-category-members__results[hidden],
.admin-badge-special__results[hidden] {
  display: none;
}

.admin-badge-user-result {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
}

.admin-badge-user-result:hover {
  border-color: var(--primary);
}

.admin-badge-category-members__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-badge-category-members__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.admin-badge-category-members__item:last-child {
  border-bottom: 0;
}

.admin-badge-special__selected {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}

.admin-badge-special__preview {
  margin: 12px 0 16px;
}

.admin-badge-special-remove {
  margin-top: 12px;
}

.admin-badge-special-list {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.admin-badge-special-list__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-badge-special-list__title {
  margin: 0;
  font-size: 1rem;
}

.admin-badge-special-list__empty {
  margin: 0 0 12px;
}

.admin-badge-special-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.admin-badge-special-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.admin-badge-special-list__item:last-child {
  border-bottom: 0;
}

.admin-badge-special-list__badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bg);
}

.admin-badge-special-list__badge img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
}

.admin-badge-special-list__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-badge-special-list__user {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.admin-badge-special-list__user:hover {
  color: #a78bfa;
}

.admin-badge-special-list__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.admin-table th {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.admin-table__sort::after {
  content: '↕';
  font-size: 0.72rem;
  opacity: 0.35;
}

.admin-table__sort--active {
  color: var(--foreground);
}

.admin-table__sort--active.admin-table__sort--asc::after {
  content: '↑';
  opacity: 1;
}

.admin-table__sort--active.admin-table__sort--desc::after {
  content: '↓';
  opacity: 1;
}

.admin-table__sort:hover,
.admin-table__sort:focus-visible {
  color: var(--foreground);
}

.admin-table__toolbar-row th {
  padding-bottom: 8px;
  border-bottom: 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.admin-table__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-users-search__input {
  width: min(100%, 280px);
}

.admin-users-view-toggle {
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 55%, var(--bg));
}

.admin-users-view-toggle__btn {
  padding: 6px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground, #9ca3af);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.admin-users-view-toggle__btn:hover {
  color: var(--foreground, #f5f5f5);
}

.admin-users-view-toggle__btn--active {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(124, 58, 237, 0.9);
}

.admin-users-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
  padding: 18px 16px 16px;
  border-top: 1px solid var(--border);
}

.admin-users-pagination .btn {
  min-width: 108px;
  flex-shrink: 0;
}

.admin-users-pagination__status {
  margin: 0;
  text-align: center;
  flex: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
}

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

.admin-users-table th:nth-child(5),
.admin-users-table th:nth-child(6),
.admin-users-table th:nth-child(7),
.admin-users-table th:nth-child(8),
.admin-users-table td:nth-child(5),
.admin-users-table td:nth-child(6),
.admin-users-table td:nth-child(7),
.admin-users-table td:nth-child(8) {
  text-align: center;
}

.admin-users-table th:nth-child(5) .admin-table__sort,
.admin-users-table th:nth-child(6) .admin-table__sort,
.admin-users-table th:nth-child(7) .admin-table__sort,
.admin-users-table th:nth-child(8) .admin-table__sort {
  justify-content: center;
  width: 100%;
}

.admin-user-row {
  cursor: pointer;
}

.admin-user-row:hover td,
.admin-user-row:focus-visible td {
  background: var(--bg-secondary);
}

.admin-user-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.admin-request-row {
  cursor: pointer;
}

.admin-request-row:hover td,
.admin-request-row:focus-visible td {
  background: var(--bg-secondary);
}

.admin-request-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.admin-user-row__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px;
  color: var(--foreground);
}

.admin-user-row__handle {
  font-weight: 700;
}

.admin-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
  font-size: 0.9rem;
  font-weight: 700;
}

.admin-role-badge--standard {
  border-color: rgba(113, 118, 123, 0.48);
  background: rgba(113, 118, 123, 0.12);
  color: #cfd9de;
}

.admin-role-badge--admin {
  border-color: rgba(29, 155, 240, 0.45);
  background: rgba(29, 155, 240, 0.14);
  color: #8ecdf8;
}

.admin-role-badge--super {
  border-color: rgba(255, 212, 0, 0.45);
  background: rgba(255, 212, 0, 0.1);
  color: #ffe57a;
}

.admin-subscription-badge,
.admin-subscription-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
}

.admin-subscription-badge + .admin-subscription-status {
  margin-left: 6px;
}

.admin-subscription-badge--free {
  border-color: rgba(113, 118, 123, 0.48);
  background: rgba(113, 118, 123, 0.12);
  color: #cfd9de;
}

.admin-subscription-badge--premium {
  border-color: rgba(29, 155, 240, 0.54);
  background: rgba(29, 155, 240, 0.14);
  color: #9bd5ff;
}

.admin-subscription-badge--clipper {
  border-color: rgba(255, 212, 0, 0.38);
  background: rgba(255, 212, 0, 0.1);
  color: #ffe57a;
}

.admin-subscription-status--active,
.admin-subscription-status--trialing {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.1);
  color: #9ff2b4;
}

.admin-subscription-status--past_due {
  border-color: rgba(255, 212, 0, 0.3);
  background: rgba(255, 212, 0, 0.08);
  color: #ffe57a;
}

.admin-subscription-status--canceled,
.admin-subscription-status--inactive {
  border-color: rgba(239, 68, 68, 0.38);
  background: rgba(239, 68, 68, 0.1);
  color: #ffb4b4;
}

.admin-request-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 800;
}

.admin-request-status--pending {
  border-color: rgba(255, 212, 0, 0.3);
  background: rgba(255, 212, 0, 0.08);
  color: #ffe57a;
}

.admin-request-status--approved {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.1);
  color: #9ff2b4;
}

.admin-request-status--rejected {
  border-color: rgba(239, 68, 68, 0.38);
  background: rgba(239, 68, 68, 0.1);
  color: #ffb4b4;
}

.admin-user-modal[hidden] {
  display: none;
}

.admin-user-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.admin-user-modal-open {
  overflow: hidden;
}

.admin-user-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: radial-gradient(120% 120% at 50% 0%, rgba(124, 58, 237, 0.18), rgba(0, 0, 0, 0.78) 60%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.admin-user-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, var(--border));
  border-radius: 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, var(--bg)) 0%, var(--bg) 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 32px 80px -24px rgba(0, 0, 0, 0.78),
    0 0 60px -30px rgba(124, 58, 237, 0.55);
}

.admin-user-modal__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7c3aed, #a855f7 45%, #ec4899);
  border-radius: 24px 24px 0 0;
  z-index: 3;
}

.admin-user-modal__panel--wide {
  display: flex;
  flex-direction: column;
  width: min(100%, 820px);
  overflow: hidden;
}

.admin-user-modal__panel--full {
  width: min(100% - 32px, 1200px);
}

.admin-user-analytics,
.admin-user-interests {
  display: block;
  padding: 18px;
}

.admin-user-analytics__layout,
.admin-user-interests__layout {
  display: grid;
  grid-template-columns: minmax(300px, 344px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-user-analytics__main,
.admin-user-interests__main {
  min-width: 0;
}

.admin-stats--user {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .admin-user-analytics__layout,
  .admin-user-interests__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-stats--user .admin-stat {
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--surface) 60%, var(--bg)), var(--bg));
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.admin-stats--user .admin-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 12px 26px -16px rgba(124, 58, 237, 0.7);
}

.admin-stats--user .admin-stat__label {
  margin-bottom: 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-stats--user .admin-stat__value {
  font-size: 1.55rem;
}

.admin-user-analytics__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.admin-user-chart-range {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 55%, var(--bg));
}

.admin-user-chart-range__btn {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground, #9ca3af);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s ease;
}

.admin-user-chart-range__btn:hover {
  color: var(--foreground);
}

.admin-user-chart-range__btn--active {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(124, 58, 237, 0.9);
}

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

@media (max-width: 720px) {
  .admin-user-analytics__grid,
  .admin-user-interests__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-user-chart {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--surface) 55%, var(--bg)), var(--bg));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.admin-user-chart__title {
  margin-bottom: 12px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground, #9ca3af);
}

.admin-user-chart__canvas-wrap {
  position: relative;
  height: 200px;
  width: 100%;
}

.admin-user-chart--tall .admin-user-chart__canvas-wrap {
  height: 320px;
}

/* See Connections button + bubble map */
.admin-users-connections-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border: 0;
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(124, 58, 237, 0.95);
}

.admin-users-connections-btn:hover,
.admin-users-connections-btn:focus-visible {
  filter: brightness(1.08);
  color: #fff;
}

.admin-connections {
  position: relative;
  padding: 16px 18px 18px;
}

.admin-connections__stage {
  position: relative;
  width: 100%;
  height: min(72vh, 660px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  cursor: grab;
  touch-action: none;
  background:
    radial-gradient(80% 80% at 50% 30%, rgba(124, 58, 237, 0.12), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 40%, var(--bg)), var(--bg));
}

.admin-connections__stage.is-panning {
  cursor: grabbing;
}

.admin-connections__viewport {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.admin-connections__controls {
  position: absolute;
  top: 50%;
  right: 32px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
}

.admin-connections__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 84%, var(--bg));
  color: var(--foreground);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.85);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.admin-connections__ctrl:hover,
.admin-connections__ctrl:focus-visible {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(124, 58, 237, 0.6);
  outline: none;
}

.admin-connections__ctrl:active {
  transform: scale(0.94);
}

.admin-connections__ctrl--reset {
  font-size: 1.05rem;
}

.admin-connections__ctrl svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.admin-connections__ctrl--active {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(124, 58, 237, 0.9);
}

.admin-connections__ctrl--active:hover,
.admin-connections__ctrl--active:focus-visible {
  background: linear-gradient(135deg, #6d28d9, #9333ea);
  border-color: transparent;
}

/* Member count toggle (top-right) */
.admin-connections__count {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.85);
  z-index: 6;
}

.admin-connections__count-btn {
  border: 0;
  border-radius: 8px;
  padding: 7px 12px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-connections__count-btn:hover {
  color: var(--foreground);
}

.admin-connections__count-btn--active {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(124, 58, 237, 0.9);
}

/* Rank key legend (bottom-left) */
.admin-connections__legend {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 232px;
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.9);
  z-index: 6;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.admin-connections__legend--hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.admin-connections__legend-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.admin-connections__legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.admin-connections__legend-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-connections__legend-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.6);
}

.admin-connections__legend-badge svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.admin-connections__legend-badge--gold {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.admin-connections__legend-badge--violet {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.admin-connections__legend-badge--blue {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
}

.admin-connections__legend-badge--green {
  background: linear-gradient(135deg, #059669, #34d399);
}

.admin-connections__legend-badge--muted {
  background: linear-gradient(135deg, #64748b, #94a3b8);
}

.admin-connections__legend-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.admin-connections__legend-text strong {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--foreground);
}

.admin-connections__legend-text span {
  font-size: 0.72rem;
  color: var(--muted);
}

.admin-connections__status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
}

.admin-connections__links {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.admin-conn-node {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  will-change: transform;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.8);
}

.admin-conn-node:hover,
.admin-conn-node:focus-visible {
  outline: none;
  z-index: 4;
  border-color: rgba(168, 139, 250, 0.9);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.28), 0 10px 22px -8px rgba(0, 0, 0, 0.9);
}

.admin-conn-node--hub {
  border-color: rgba(236, 72, 153, 0.85);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.3), 0 10px 22px -8px rgba(0, 0, 0, 0.9);
}

.admin-conn-node__avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

.admin-conn-node .avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
}

.admin-conn-node .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-conn-node--brand {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.18);
}

.admin-conn-node--brand:hover,
.admin-conn-node--brand:focus-visible {
  border-color: rgba(124, 58, 237, 0.75);
}

.admin-conn-node--brand.admin-conn-node--hub {
  border-color: rgba(236, 72, 153, 0.85);
}

.admin-conn-node__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
  box-sizing: border-box;
  background: #fff;
  pointer-events: none;
}

.admin-conn-node__label {
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  max-width: 130px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.66);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.admin-conn-node:hover .admin-conn-node__label,
.admin-conn-node--hub .admin-conn-node__label {
  opacity: 1;
}

.admin-conn-popover {
  position: absolute;
  z-index: 6;
  width: 240px;
  transform: translate(-50%, calc(-100% - 14px));
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, var(--border));
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, var(--bg)), var(--bg));
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.85), 0 0 40px -24px rgba(124, 58, 237, 0.7);
}

.admin-conn-popover--below {
  transform: translate(-50%, 14px);
}

.admin-conn-popover__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-conn-popover__avatar .avatar {
  width: 44px !important;
  height: 44px !important;
}

.admin-conn-popover__id {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.admin-conn-popover__id strong {
  font-size: 0.95rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.admin-conn-popover__id .muted {
  font-size: 0.8rem;
}

.admin-conn-popover__rank {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
}

.admin-conn-popover__rank-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.admin-conn-popover__rank-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.admin-conn-popover__rank-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.admin-conn-popover__rank-num {
  font-weight: 900;
  opacity: 0.9;
}

.admin-conn-popover__rank--gold {
  background: linear-gradient(135deg, #b8860b, #f4c430);
  color: #241a00;
}

.admin-conn-popover__rank--violet {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.admin-conn-popover__rank--blue {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
}

.admin-conn-popover__rank--green {
  background: linear-gradient(135deg, #059669, #34d399);
}

.admin-conn-popover__rank--muted {
  background: linear-gradient(135deg, #3a3a3a, #565656);
}

.admin-conn-popover__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.admin-conn-popover__stats div {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 45%, var(--bg));
}

.admin-conn-popover__stats span {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1;
}

.admin-conn-popover__stats label {
  display: block;
  margin-top: 4px;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-user-modal__tabs {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  padding: 6px 12px 0;
  border-bottom: 1px solid var(--border);
}

.admin-user-modal__tab {
  position: relative;
  flex: 1;
  padding: 13px 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.admin-user-modal__tab:hover,
.admin-user-modal__tab:focus-visible {
  color: var(--foreground);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  outline: none;
}

.admin-user-modal__tab--active {
  color: var(--foreground);
  border-bottom-color: transparent;
}

.admin-user-modal__tab--active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #7c3aed, #a855f7);
}

.admin-user-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.admin-user-modal__tab-panel[hidden] {
  display: none !important;
}

.admin-user-modal__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.12), transparent 90%);
}

.admin-user-modal__identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.admin-user-modal__identity .avatar {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px rgba(124, 58, 237, 0.55),
    0 6px 18px -6px rgba(124, 58, 237, 0.6);
}

.admin-user-modal__identity h3,
.admin-user-modal__identity p {
  margin: 0;
}

.admin-user-modal__identity h3 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.admin-user-modal__identity p {
  margin-top: 3px;
  color: var(--muted-foreground);
  font-weight: 600;
}

.admin-user-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.admin-user-modal__close:hover,
.admin-user-modal__close:focus-visible {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.55);
  transform: rotate(90deg);
  outline: none;
}

.admin-user-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.admin-user-details div {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--surface) 55%, var(--bg)), var(--bg));
}

.admin-user-details dt {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-user-details dd {
  margin: 6px 0 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.admin-user-billing {
  padding: 16px 18px 18px;
}

.admin-user-billing__head h4,
.admin-user-billing__history h5 {
  margin: 0 0 12px;
  font-size: 0.95rem;
}

.admin-user-billing__stored-id {
  margin: 4px 0 0;
}

.admin-user-billing__stored-id code {
  font-size: 0.82rem;
}

.admin-user-billing__content {
  display: grid;
  gap: 14px;
}

.admin-user-billing__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0;
}

.admin-user-billing__summary dt {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 700;
}

.admin-user-billing__summary dd {
  margin: 4px 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  word-break: break-word;
}

.admin-user-billing__summary code {
  font-size: 0.82rem;
}

.admin-user-billing__summary a {
  color: #c4b5fd;
  text-decoration: none;
}

.admin-user-billing__summary a:hover {
  text-decoration: underline;
}

.admin-stripe-subscription-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: capitalize;
}

.admin-stripe-subscription-status--active,
.admin-stripe-subscription-status--trialing {
  background: rgba(34, 197, 94, 0.14);
  color: #bbf7d0;
}

.admin-stripe-subscription-status--past_due,
.admin-stripe-subscription-status--unpaid,
.admin-stripe-subscription-status--incomplete {
  background: rgba(245, 158, 11, 0.16);
  color: #fde68a;
}

.admin-stripe-subscription-status--canceled,
.admin-stripe-subscription-status--incomplete_expired {
  background: rgba(239, 68, 68, 0.14);
  color: #fecaca;
}

.admin-stripe-invoice-list {
  display: grid;
  gap: 10px;
}

.admin-stripe-invoice-row {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.admin-stripe-invoice-row__main,
.admin-stripe-invoice-row__meta,
.admin-stripe-invoice-row__links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-stripe-invoice-row__main strong {
  font-size: 0.92rem;
}

.admin-stripe-invoice-row__meta {
  color: #a1a1aa;
  font-size: 0.84rem;
}

.admin-stripe-invoice-row__links {
  gap: 12px;
  justify-content: flex-start;
}

.admin-stripe-invoice-row__links a {
  color: #c4b5fd;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

.admin-stripe-invoice-row__links a:hover {
  text-decoration: underline;
}

.admin-stripe-invoice-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.admin-stripe-invoice-status--paid {
  background: rgba(34, 197, 94, 0.14);
  color: #bbf7d0;
}

.admin-stripe-invoice-status--open {
  background: rgba(59, 130, 246, 0.14);
  color: #bfdbfe;
}

.admin-stripe-invoice-status--failed {
  background: rgba(239, 68, 68, 0.14);
  color: #fecaca;
}

.admin-stripe-invoice-status--default {
  background: rgba(161, 161, 170, 0.14);
  color: #d4d4d8;
}

.admin-user-edit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  padding: 18px;
}

.admin-user-edit__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.admin-user-edit__field .label {
  margin: 0;
}

.admin-user-edit__full {
  grid-column: 1 / -1;
}

.admin-user-edit__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  padding: 0 18px 18px;
}

.admin-user-edit__delete-form {
  margin: 0;
  min-width: 0;
}

.admin-user-edit__self-note {
  margin: 0;
}

.btn-outline-danger {
  background: transparent;
  color: #f87171;
  border-color: #ef4444;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border-color: #f87171;
}

.admin-role-desc {
  margin: 0;
}

.btn-warning {
  background: rgba(255, 212, 0, 0.1);
  color: #ffe57a;
  border-color: rgba(255, 212, 0, 0.38);
}

.btn-warning:hover {
  background: rgba(255, 212, 0, 0.18);
}

.admin-request-modal__panel {
  width: min(100%, 720px);
}

.admin-request-reviewed {
  margin: 0;
  padding: 0 18px 14px;
  border-bottom: 1px solid var(--border);
}

.admin-request-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
}

.admin-request-section {
  min-width: 0;
}

.admin-request-section h4,
.admin-request-section p {
  margin: 0;
}

.admin-request-section h4 {
  margin-bottom: 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-request-channel-list {
  display: grid;
  gap: 10px;
}

.admin-request-channel {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
}

.admin-request-channel div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-request-channel a {
  overflow-wrap: anywhere;
}

.admin-request-status-form {
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.admin-request-delete-form {
  padding-top: 12px;
}

.explore-tabs .tabs__link {
  padding: 12px 4px;
  font-size: 0.78rem;
}

.explore-tabs .tabs__link-text--mobile {
  display: none;
}

@media (max-width: 700px) {
  .explore-tabs .tabs__link-text--desktop {
    display: none;
  }

  .explore-tabs .tabs__link-text--mobile {
    display: inline;
  }

  .admin-page {
    padding: 12px;
  }

  .admin-premium-summary {
    grid-template-columns: 1fr;
  }

  .admin-premium-feature-matrix {
    overflow-x: auto;
  }

  .admin-premium-feature-matrix__head,
  .admin-premium-feature-row {
    min-width: 620px;
  }

  .admin-chart {
    padding: 14px;
  }

  .admin-chart__canvas-wrap {
    height: 200px;
  }

  .admin-chart__bars {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .admin-chart__bar-wrap {
    min-width: 42px;
  }

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

  .admin-stats--rates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-stats--subscriptions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-analytics-grid,
  .admin-leaderboards {
    grid-template-columns: 1fr;
  }

  .admin-chart__bars--hourly {
    grid-template-columns: repeat(24, minmax(34px, 1fr));
  }

  .admin-stat {
    padding: 14px;
  }

  .admin-stat__value {
    font-size: 1.45rem;
  }

  .admin-panel__head--with-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-panel__head--with-actions .admin-settings-form__actions {
    width: 100%;
  }

  .admin-panel__head--with-actions .admin-settings-form__actions .btn {
    width: 100%;
  }

  .admin-podding-head__layout {
    grid-template-columns: 1fr;
  }

  .admin-podding-head__subtext {
    grid-column: 1;
    grid-row: auto;
  }

  .admin-podding-head__top-actions {
    grid-row: auto;
    grid-column: 1;
    align-items: stretch;
    width: 100%;
  }

  .admin-podding-head__top-actions .admin-settings-form__actions .btn {
    width: 100%;
  }

  .admin-podding-stats {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    text-align: left;
  }

  .admin-trending-head__title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .admin-timeline-head__title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .admin-trending-window-start {
    text-align: left;
    white-space: normal;
  }

  .admin-user-modal {
    align-items: stretch;
    padding: 0;
  }

  .admin-user-modal__panel {
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .admin-user-modal__panel--wide {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .admin-user-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-request-body {
    padding: 16px;
  }
}

.catalog-tabs {
  position: sticky;
  top: 58px;
  z-index: 9;
  background: var(--sticky-bar-bg);
  backdrop-filter: blur(10px);
}

.catalog-tabs .tabs__link {
  padding: 12px 6px;
  font-size: 0.78rem;
}

.catalog-header-actions {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.catalog-search-toggle,
.catalog-refresh-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
}

.catalog-search-toggle:focus-visible,
.catalog-refresh-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.catalog-search-toggle svg,
.catalog-refresh-toggle svg {
  display: block;
}

.catalog-refresh-toggle:disabled {
  opacity: 0.6;
  cursor: wait;
}

.catalog-refresh-toggle.is-spinning svg {
  animation: catalog-refresh-spin 0.8s linear infinite;
}

@keyframes catalog-refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.catalog-search-toolbar {
  position: sticky;
  top: 58px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--sticky-bar-bg);
  backdrop-filter: blur(10px);
}

.catalog-search-toolbar[hidden] {
  display: none;
}

.catalog-search-toolbar__field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.catalog-search-toolbar__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  line-height: 0;
  pointer-events: none;
}

.catalog-search-toolbar__icon svg {
  display: block;
}

.catalog-search-toolbar__input {
  display: block;
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--input-filled-bg);
  color: var(--foreground);
  padding: 8px 14px 8px 38px;
  font: inherit;
  outline: none;
}

.catalog-search-toolbar__input:focus {
  border-color: var(--border2);
}

.catalog-search-toolbar__input::placeholder {
  color: var(--muted-foreground);
}

.catalog-search-toolbar__clear {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 0;
}

.catalog-search-toolbar__clear[hidden] {
  display: none;
}

.catalog-search-toolbar.is-open + .catalog-tabs {
  top: 115px;
}

.catalog-page {
  padding: 12px 16px 24px;
}

.catalog-page__empty {
  margin: 16px 0 0;
}

.catalog-load-more,
.feed-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  color: var(--muted-foreground);
  font-size: 0.9rem;
}

.catalog-load-more[hidden],
.feed-load-more[hidden] {
  display: none;
}

.catalog-load-more__spinner,
.feed-load-more__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: catalogLoadSpin 0.8s linear infinite;
}

.catalog-load-more.is-loading .catalog-load-more__spinner,
.feed-load-more.is-loading .feed-load-more__spinner {
  display: inline-block;
}

.catalog-load-more:not(.is-loading) .catalog-load-more__spinner,
.feed-load-more:not(.is-loading) .feed-load-more__spinner {
  display: none;
}

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

.catalog-page--grid .search-hit-list.catalog-episode-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

.catalog-page--months .search-hit-list.catalog-episode-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}

.catalog-episode-month {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--foreground);
}

.catalog-page--grid .catalog-episode-month {
  grid-column: 1 / span 2;
  justify-self: stretch;
  margin: 10px 0 0;
}

.catalog-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.catalog-month-header .catalog-episode-month {
  min-width: 0;
  margin: 0;
}

.catalog-month-controls {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.catalog-month-controls[hidden] {
  display: none;
}

.catalog-month-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.catalog-month-nav:hover:not(:disabled),
.catalog-month-nav:focus-visible {
  border-color: var(--accent);
  background: rgba(29, 155, 240, 0.16);
  color: var(--foreground);
}

.catalog-month-nav:disabled {
  cursor: default;
  opacity: 0.35;
}

.catalog-month-section {
  min-width: 0;
}

.catalog-month-section + .catalog-month-section {
  border-top: 1px solid rgba(47, 51, 54, 0.72);
  padding-top: 20px;
}

.catalog-month-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 16px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 16px 4px;
}

.catalog-month-row::-webkit-scrollbar {
  display: none;
}

.catalog-month-row {
  scrollbar-width: none;
}

.catalog-page--months .catalog-episode-card-wrap {
  flex: 0 0 min(72vw, 340px);
  max-width: 340px;
  scroll-snap-align: start;
}

.catalog-episode-card-wrap {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  overflow: hidden;
  transition: background-color 0.15s ease;
}

.catalog-episode-card-wrap > .search-hit-card.catalog-episode-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.catalog-episode-card-wrap > .search-hit-card.catalog-episode-card .search-hit-card__thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}

.catalog-episode-card-wrap > .search-hit-card.catalog-episode-card .search-hit-card__thumb {
  aspect-ratio: 16 / 9;
}

.catalog-episode-card__duration-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  pointer-events: none;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.catalog-episode-card-wrap > .search-hit-card.catalog-episode-card .catalog-episode-card__content {
  flex: 1;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0 0;
}

.catalog-episode-card-wrap > .search-hit-card.catalog-episode-card .search-hit-card__body,
.catalog-episode-card-wrap > .search-hit-card.catalog-episode-card .catalog-episode-card__body {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 0;
  gap: 0;
}

.search-hit-card.catalog-episode-card .catalog-episode-card__title {
  margin: 0;
  display: -webkit-box;
  min-width: 0;
  min-height: 2.5em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1rem;
  line-height: 1.25;
}

.catalog-episode-card__title-text {
  display: inline;
}

.catalog-episode-card__title-date {
  display: inline;
  color: var(--muted-foreground);
  font-weight: 500;
}

.catalog-episode-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0;
}

.catalog-episode-card-wrap:hover,
.catalog-episode-card-wrap:focus-within {
  background: transparent;
}

@media (max-width: 700px) {
  .catalog-tabs {
    top: 110px;
  }

  .catalog-search-toolbar {
    top: 110px;
    padding: 8px 12px;
  }

  .catalog-search-toolbar__input {
    font-size: 16px;
  }

  .catalog-search-toolbar.is-open + .catalog-tabs {
    top: 165px;
  }

  .catalog-page--grid .search-hit-list.catalog-episode-list {
    column-gap: 8px;
    row-gap: 12px;
  }

  .catalog-episode-month {
    font-size: 0.98rem;
  }

  .catalog-month-header {
    gap: 10px;
  }

  .catalog-month-controls {
    gap: 6px;
  }

  .catalog-month-nav {
    width: 30px;
    height: 30px;
  }

  .catalog-page--grid .catalog-episode-month {
    grid-column: 1 / span 2;
  }

  .catalog-month-row {
    gap: 8px;
    scroll-padding-inline: 12px;
    margin: 0 -12px;
    padding: 0 12px 4px;
  }

  .catalog-page--months .catalog-episode-card-wrap {
    flex-basis: 72vw;
    max-width: 340px;
  }

  .search-hit-card.catalog-episode-card .catalog-episode-card__title {
    font-size: 0.82rem;
  }

}

.episode-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.episode-media__thumb {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.episode-media__thumb--empty {
  background: linear-gradient(135deg, #1a1d21 0%, #0d0d0d 100%);
}

.episode-media__player {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 2;
}

.episode-media__player[hidden] {
  display: none;
}

.episode-media__player--audio {
  display: flex;
  align-items: flex-end;
  padding: 22px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, #000 100%);
}

.episode-media__player--audio[hidden] {
  display: none;
}

.episode-media__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.episode-media__audio {
  display: block;
  width: min(100%, 720px);
  margin: 0 auto;
  background: #fff;
  border-radius: 999px;
  filter: invert(1) hue-rotate(180deg);
}

.episode-media__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.episode-media__player--video {
  background: #000;
}

.episode-media--audio-playing .episode-media__thumb {
  opacity: 1;
}

.episode-media--playing .episode-media__thumb {
  opacity: 0;
  pointer-events: none;
}

.episode-media--playing .episode-media__player {
  opacity: 1;
  pointer-events: auto;
}

.episode-head {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.episode-meta {
  flex: 1;
  min-width: 0;
}

.episode-meta h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  line-height: 1.3;
  word-break: break-word;
}

.episode-details {
  font-size: 0.9rem;
  line-height: 1.4;
}

.episode-stats {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--muted-foreground);
}

.episode-stats strong {
  color: var(--foreground);
}

.episode-actions {
  margin-left: auto;
  flex-shrink: 0;
}

.episode-watch-btn__text--mobile {
  display: none;
}

@media (max-width: 700px) {
  .episode-watch-btn__text--desktop {
    display: none;
  }

  .episode-watch-btn__text--mobile {
    display: inline;
  }

  .episode-watch-btn--youtube {
    display: none;
  }
}

.episode-watch-btn:hover,
.episode-watch-btn:focus,
.episode-watch-btn:visited {
  text-decoration: none;
}

.episode-watch-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.episode-tabs .tabs__link {
  appearance: none;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

.episode-tab-panel[hidden] {
  display: none;
}

.episode-transcript-panel {
  padding: 0;
}

.episode-transcript-list {
  max-height: 500px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}

.episode-transcript-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
}

.episode-transcript-row--clickable {
  cursor: pointer;
}

.episode-transcript-row--clickable:hover,
.episode-transcript-row--clickable:focus {
  background: var(--bg-secondary);
  outline: none;
}

.episode-transcript-row--active {
  background: #0f1419;
}

.episode-transcript-row__time {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.episode-transcript-row__text {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.episode-transcript-empty {
  margin: 0;
  padding: 16px;
}

@media (max-width: 700px) {
  .episode-transcript-row {
    grid-template-columns: 56px 1fr;
    gap: 10px;
    padding: 12px 16px;
  }
}

.episode-snippet-banner-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
  border-bottom: 1px solid transparent;
}

.episode-snippet-banner-wrap--open {
  grid-template-rows: 1fr;
  border-bottom-color: var(--border);
}

.episode-snippet-banner {
  overflow: hidden;
  min-height: 0;
  background: var(--surface-hover);
}

.episode-snippet-banner__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 0;
}

.episode-snippet-banner__title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.episode-snippet-banner__actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.episode-snippet-banner__post {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid rgba(172, 214, 40, 0.55);
  border-radius: 999px;
  background: rgba(172, 214, 40, 0.12);
  color: #acd628;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.episode-snippet-banner__post:hover,
.episode-snippet-banner__post:focus-visible {
  background: rgba(172, 214, 40, 0.2);
  color: #d8f46d;
}

.episode-snippet-banner__times {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.episode-snippet-banner__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #acd628;
}

.episode-snippet-banner__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -4px -8px -4px 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.episode-snippet-banner__close:hover,
.episode-snippet-banner__close:focus-visible {
  color: var(--foreground);
  background: rgba(231, 233, 234, 0.1);
}

.episode-snippet-banner__text {
  margin: 0;
  padding: 8px 16px 14px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--foreground);
  word-break: break-word;
}

.feed + .episode-login-prompt {
  border-top: 1px solid var(--border);
}

.episode-login-prompt {
  margin: 0;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.episode-login-prompt a {
  color: var(--accent);
  text-decoration: none;
}

.episode-login-prompt a:hover {
  text-decoration: underline;
}

.widget--episode .episode-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.episode-card__thumb-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  line-height: 0;
}

.episode-card__thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.episode-card__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.episode-card__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--foreground);
}

.episode-card__desc {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}

.episode-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.episode-card__meta {
  margin: 0;
  min-width: 0;
  font-size: 0.85rem;
  line-height: 1.35;
}

.episode-card__cta {
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  background: #fff;
  color: #000;
}

.episode-card__cta:hover,
.episode-card__cta:focus,
.episode-card__cta:visited {
  text-decoration: none;
}

.search-pill {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #202327;
  color: var(--muted-foreground);
  padding: 12px 16px;
  width: 100%;
  box-sizing: border-box;
}

.search-pill-form {
  margin: 0;
  width: 100%;
}

.search-pill-field {
  position: relative;
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--input-filled-bg);
  box-sizing: border-box;
}

.search-pill-field:focus-within {
  border-color: var(--border2);
}

.search-pill-field__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  color: var(--muted-foreground);
  display: inline-flex;
  line-height: 0;
}

.search-pill-field__icon svg {
  display: block;
}

.search-pill-form__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.95rem;
  padding: 12px 14px 12px 38px;
  outline: none;
}

.search-pill-form__input::placeholder {
  color: var(--muted-foreground);
}

.mobile-top-bar__notifications,
.mobile-top-bar__compose,
.mobile-top-bar__jingle,
.mobile-top-bar__weather {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 999px;
  color: var(--foreground);
  text-decoration: none;
}

.mobile-top-bar__notifications {
  margin-left: 0;
}

.mobile-top-bar__compose {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.mobile-top-bar__notifications:hover,
.mobile-top-bar__notifications:focus-visible,
.mobile-top-bar__compose:hover,
.mobile-top-bar__compose:focus-visible,
.mobile-top-bar__jingle:hover,
.mobile-top-bar__jingle:focus-visible,
.mobile-top-bar__weather:hover,
.mobile-top-bar__weather:focus-visible {
  background: var(--surface);
  text-decoration: none;
}

.pwa-install-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pwa-install-menu-item__icon {
  flex-shrink: 0;
  opacity: 0.85;
}

.pwa-install__hint {
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.pwa-install__hint-text {
  margin: 0 0 10px;
  font-size: 0.85rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--muted-foreground);
}

.pwa-install__ios-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  width: 100%;
}

.pwa-install__ios-close:hover {
  background: var(--surface-hover);
}

body.is-pwa-app .pwa-install-menu-item,
body.is-pwa-app .pwa-install__hint {
  display: none !important;
}

.search-page {
  padding: 20px 16px 24px;
  max-width: 600px;
  margin: 0 auto;
  box-sizing: border-box;
}

.search-coming-soon-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 16px 0 24px;
  padding: 28px 20px;
  box-sizing: border-box;
  text-align: center;
  border-block: 1px solid var(--border);
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 10%, transparent) 50%, transparent 100%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg-secondary) 100%);
}

.search-creator-nav {
  padding: 10px 16px 4px;
}

.search-creator-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.search-creator-nav__back:hover,
.search-creator-nav__back:focus-visible {
  text-decoration: underline;
}

.search-coming-soon-banner__inner {
  max-width: 420px;
  margin: 0 auto;
}

.search-coming-soon-banner__label {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.search-coming-soon-banner__text {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--foreground);
}

.search-page__form {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 16px;
}

.search-page__input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--input-filled-bg);
  color: var(--foreground);
  font: inherit;
  font-size: 1rem;
  padding: 12px 16px;
  outline: none;
}

.search-page__input::placeholder {
  color: var(--muted-foreground);
}

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

.search-page__hint {
  margin: 0 0 20px;
  font-size: 0.95rem;
  line-height: 1.45;
}

.search-page__results {
  min-height: 80px;
}

.search-premium-gate {
  display: grid;
  grid-template-areas:
    "copy button"
    "description description";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 640px;
  margin: 20px auto 24px;
  padding: 18px 20px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.22), transparent 38%),
    radial-gradient(circle at bottom right, rgba(249, 24, 128, 0.12), transparent 34%),
    #050505;
  box-shadow: 0 0 28px rgba(124, 58, 237, 0.1);
}

.search-premium-gate__copy {
  grid-area: copy;
  min-width: 0;
}

.search-premium-gate__copy h2 {
  margin: 0;
  font-size: 1.18rem;
}

.search-premium-gate__description {
  grid-area: description;
  margin: 0;
  line-height: 1.45;
}

.search-premium-gate__button {
  grid-area: button;
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .search-premium-gate {
    grid-template-areas:
      "copy"
      "description"
      "button";
    grid-template-columns: 1fr;
    row-gap: 4px;
    text-align: center;
    width: auto;
    margin: 16px 14px 22px;
  }

  .search-premium-gate__button {
    align-self: stretch;
    width: 100%;
  }

  .search-premium-gate__description {
    text-align: center;
  }
}

.search-page__loading,
.search-page__empty,
.search-page__error {
  margin: 12px 0 0;
}

.tweet-search-results {
  display: flex;
  flex-direction: column;
}

.tweet-search-tweets {
  display: flex;
  flex-direction: column;
}

.explore-tweet-search__feed {
  max-width: none;
  margin: 0;
  padding: 0;
}

.explore-tweet-search__feed .tweet-search-results {
  width: 100%;
}

.explore-tweet-search__feed .tweet-search-tweets > .tweet {
  width: 100%;
  box-sizing: border-box;
}

.explore-tweet-search__feed .tweet__link-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.explore-tweet-search__feed .tweet__clip,
.explore-tweet-search__feed .tweet__space,
.explore-tweet-search__feed .tweet__media {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.tweet-search-user-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.tweet-search-user-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.tweet-search-user-card:last-child {
  border-bottom: none;
}

.tweet-search-user-card:hover {
  background: var(--bg-secondary);
}

.tweet-search-user-card__link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.tweet-search-user-card__link:hover,
.tweet-search-user-card__link:visited {
  text-decoration: none;
  color: inherit;
}

.tweet-search-user-card__avatar {
  flex-shrink: 0;
  line-height: 0;
}

.tweet-search-user-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tweet-search-user-card__name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tweet-search-user-card__handle {
  font-size: 0.9rem;
}

.search-hit-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-hit-card {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  box-sizing: border-box;
}

a.search-hit-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.search-hit-card--link:hover,
a.search-hit-card--link:focus,
a.search-hit-card--link:visited {
  text-decoration: none;
  color: inherit;
  background: var(--bg-secondary);
}

.search-hit-card__thumb-wrap {
  flex-shrink: 0;
  width: 120px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  aspect-ratio: 16 / 9;
  line-height: 0;
}

.search-hit-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 67px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.search-hit-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  min-height: 67px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border2);
}

.search-hit-card__thumb-icon {
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  opacity: 0.9;
}

.search-hit-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-hit-card__headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.search-hit-card__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--foreground);
}

.catalog-episode-card .catalog-episode-card__title {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  display: block;
  line-height: 1.35;
}

.search-hit-card__title-full {
  display: none;
}

.search-hit-card__title-short {
  display: inline;
}

.search-hit-card__snippet {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #c4c7c5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  word-break: break-word;
}

.search-hit-card__score {
  flex-shrink: 0;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .search-hit-card__score {
    display: none;
  }

  .search-hit-card__title-short {
    display: none;
  }

  .search-hit-card__title-full {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-weight: 800;
    line-height: 1.35;
    word-break: break-word;
  }

  .search-hit-card__title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    flex: 1 1 auto;
  }

  .search-hit-card__snippet {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

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

.small {
  font-size: 0.9rem;
}

.error {
  color: #f4212e;
  margin: 0 0 10px;
}

.shell--auth .col--single {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

.auth-wrap {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.auth-wrap--wide {
  max-width: 560px;
}

.auth-brand {
  display: block;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}

.auth-brand:hover {
  opacity: 0.92;
  text-decoration: none;
}

.auth-brand__img {
  display: block;
  width: 100%;
  max-width: 148px;
  height: auto;
  filter: var(--logo-invert);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 22px 20px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  box-sizing: border-box;
}

.auth-card--wide {
  max-width: 560px;
}

.auth-card .stack {
  gap: 12px;
}

.auth-card .stack > .label {
  margin: 0;
}

.auth-card .stack > .label + .input-status-field,
.auth-card .stack > .label + .password-field,
.auth-card .stack > .label + .handle-field,
.auth-card .stack > .label + .input {
  margin-top: -8px;
}

.auth-card .stack > .btn-block {
  margin-top: 10px;
}

.auth-card .stack > .auth-login-options {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  gap: 12px;
  margin-top: 2px;
}

.auth-login-options .remember-me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  cursor: pointer;
}

.auth-login-options .remember-me input {
  margin: 0;
}

.auth-login-options__forgot {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  text-decoration: none;
  white-space: nowrap;
}

.auth-login-options__forgot:hover {
  text-decoration: underline;
}

.auth-passkey-or {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  text-align: center;
}

.auth-passkey-or::before,
.auth-passkey-or::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border);
}

.auth-card #passkey-signin-btn {
  border-style: dashed;
  color: color-mix(in srgb, var(--foreground) 45%, var(--border2));
}

.auth-card__skip-button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
}

.auth-card .stack > .btn-primary.btn-block + .auth-card__skip-button {
  margin-top: -2px;
}

.auth-card .stack > .btn-primary.btn-block + .auth-card__back-link {
  margin-top: -2px;
}

.auth-card .stack > .auth-card__skip-button + .auth-card__back-link {
  margin-top: -2px;
}

.auth-card__skip-button:hover {
  background: transparent;
  border-color: var(--border2);
  color: var(--foreground);
}

.auth-card__back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  box-sizing: border-box;
}

.auth-card__back-link:hover {
  color: var(--foreground);
  text-decoration: none;
}

.auth-card__back-link svg {
  display: block;
  flex-shrink: 0;
}

.register-progress {
  margin-bottom: 18px;
}

.register-progress__track {
  display: flex;
  align-items: center;
  gap: 0;
}

.register-progress__step {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: 0;
}

.register-progress__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: #0a0a0a;
  color: var(--muted-foreground);
  box-sizing: border-box;
}

.register-progress__icon svg {
  display: block;
}

.register-progress__line {
  flex: 1 1 auto;
  height: 3px;
  margin: 0 6px;
  border-radius: 999px;
  background: var(--border);
}

.register-progress__line--progress {
  background: linear-gradient(to right, #00ba7c 0%, var(--border) 100%);
}

.register-progress__line--filled {
  background: #00ba7c;
}

.register-progress__step--current .register-progress__icon {
  border-color: var(--foreground);
  background: var(--border);
  color: var(--foreground);
}

.register-progress__step--complete .register-progress__icon {
  border-color: rgba(0, 186, 124, 0.55);
  background: rgba(0, 186, 124, 0.14);
  color: #00ba7c;
}

.register-progress__step--pending .register-progress__icon {
  border-color: var(--border);
  background: #0a0a0a;
  color: var(--border2);
}

.register-creators {
  gap: 14px;
}

.register-creators__title {
  margin: 4px 0 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.register-creators__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 2px;
}

.register-creator-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: center;
  cursor: pointer;
}

.register-creator-card:has(.register-creator-card__check:focus-visible) .register-creator-card__media {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.register-creator-card:has(.register-creator-card__check:checked) .register-creator-card__media {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

.register-creator-card__check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.register-creator-card__media {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  transition: box-shadow 0.15s ease;
}

.register-creator-card__media::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #00ba7c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  z-index: 1;
}

.register-creator-card:has(.register-creator-card__check:checked) .register-creator-card__media::after {
  opacity: 1;
  transform: scale(1);
}

.register-creator-card__media img,
.register-creator-card__fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.register-creator-card__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.register-creator-card__name {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 88px;
}

@media (min-width: 520px) {
  .register-creators__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.auth-card__foot {
  margin: 18px 0 0;
  text-align: center;
}

.auth-card__link {
  color: #ffd400;
  font-weight: 700;
  text-decoration: none;
}

.auth-card__link:hover {
  color: #ffe14d;
  text-decoration: underline;
}

.auth-title {
  margin: 0 0 16px;
  font-size: 1.35rem;
}

.auth-login-type {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #0a0a0a;
}

.auth-login-type__btn {
  flex: 1 1 0;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
}

.auth-login-type__btn:hover {
  color: var(--foreground);
}

.auth-login-type__btn--active {
  background: var(--border);
  color: var(--foreground);
}

.auth-login-type__btn--active:hover {
  color: var(--foreground);
}

.auth-card .btn.is-loading .btn__label {
  display: none;
}

.auth-card .btn.is-loading .btn__spinner {
  margin-right: 0;
}

.handle-field--error {
  border-color: #f4212e;
  box-shadow: 0 0 0 1px rgba(244, 33, 46, 0.45);
}

.auth-field-error {
  margin: 6px 0 0;
}

.password-field--error .password-field__input {
  border-color: #f4212e;
  box-shadow: 0 0 0 1px rgba(244, 33, 46, 0.45);
}

.app--minimal {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
}

@media (min-width: 480px) {
  .app--minimal {
    align-items: center;
    padding-top: max(40px, env(safe-area-inset-top, 0px));
  }

  .shell--auth .col--single {
    padding-top: max(32px, env(safe-area-inset-top, 0px));
    justify-content: center;
    min-height: calc(100dvh - 24px);
  }

  .auth-card {
    padding: 24px;
  }
}

.thread {
  border-bottom: 1px solid var(--border);
}

.feed + .reply-composer {
  border-top: 1px solid var(--border);
}

.reply-composer {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
}

.feed + .reply-composer-restricted,
.reply-composer-restricted {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.tweet-reply-restricted {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.tweet-reply-restricted__input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
  opacity: 0.5;
}

.tweet-reply-restricted__text {
  font-size: 0.9rem;
}

.tweet-reply-restricted__msg {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  padding: 8px 0 0;
  animation: tweetReplyRestrictedFadeIn 0.2s ease;
}

@keyframes tweetReplyRestrictedFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.reply-composer .composer__main {
  flex: 1;
  min-width: 0;
}

.reply-composer .composer__preview-wrap--multi {
  max-height: 240px;
}

.reply-composer .composer__preview-video,
.reply-composer .composer__preview-wrap--multi .composer__preview-carousel-img {
  max-height: 220px;
}

body.compose-modal-open {
  overflow: hidden;
}

.compose-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

.compose-modal[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.compose-modal__backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.65);
  cursor: pointer;
}

.compose-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  margin-top: 5vh;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}

.compose-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.compose-modal__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.compose-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.compose-modal__close:hover {
  background: #202327;
}

.compose-modal__head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.compose-header__menu-wrap {
  position: relative;
}

.compose-header__dots {
  background: none;
  border: none;
  color: var(--foreground);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.compose-header__dots:hover {
  background: var(--surface-hover);
}

.compose-header__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 200px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 20;
}

@media (min-width: 701px) {
  .compose-header__dropdown {
    right: 0;
    left: auto;
    min-width: 240px;
  }
}

@media (max-width: 700px) {
  .compose-header__dropdown {
    left: auto;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
  }
}

.compose-header__dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  color: var(--foreground);
  padding: 10px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 8px;
}

.compose-header__dropdown-item:hover:not(:disabled) {
  background: var(--surface-hover);
}

.compose-header__dropdown-item:disabled {
  opacity: 0.5;
  cursor: default;
}

.compose-reply-sub {
  padding: 2px 4px;
  border-top: 1px solid var(--border);
}

.composer__input-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding-bottom: 10px;
}

.composer__input-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.composer__input-main .composer__community-badge {
  margin: 8px 0 0;
  align-self: flex-start;
}

.composer__header-actions {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  margin-bottom: 0;
  padding-top: 2px;
}

.compose-reply-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--foreground);
  padding: 10px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 8px;
}

.compose-reply-option:hover {
  background: var(--surface-hover);
}

.compose-reply-option--active {
  color: var(--accent);
  font-weight: 600;
}

.draft-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 9999;
  animation: toastFade 2s ease forwards;
}

@keyframes toastFade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

.compose-drafts-panel {
  border-top: 1px solid var(--border);
  max-height: 250px;
  overflow-y: auto;
}

.compose-draft-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.compose-draft-item:last-child {
  border-bottom: 0;
}

.compose-draft-item__text {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 6px;
  word-break: break-word;
}

.compose-draft-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.compose-draft-item__actions {
  display: flex;
  gap: 6px;
}

#compose-modal .compose-modal__backdrop {
  background:
    radial-gradient(circle at 50% 20%, rgba(124, 58, 237, 0.18), transparent 34%),
    rgba(0, 0, 0, 0.74);
}

#compose-modal .compose-modal__panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: min(92dvh, 880px);
  border-color: rgba(124, 58, 237, 0.5);
  border-radius: 24px;
  background: rgba(5, 5, 5, 0.96);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.62), 0 0 36px rgba(124, 58, 237, 0.2);
  backdrop-filter: blur(16px);
}

#compose-modal .compose-modal__head {
  flex-shrink: 0;
  padding: 18px 20px 16px;
  border-bottom-color: rgba(167, 139, 250, 0.16);
}

#compose-modal .compose-modal__title {
  font-size: 1.32rem;
}

#compose-modal .compose-modal__close {
  color: #c4b5fd;
}

#compose-modal .compose-modal__close:hover {
  background: rgba(124, 58, 237, 0.18);
  color: #fff;
}

.premium-invite-modal .compose-modal__backdrop {
  background:
    radial-gradient(circle at 50% 20%, rgba(124, 58, 237, 0.18), transparent 34%),
    rgba(0, 0, 0, 0.74);
}

.premium-invite-modal__panel {
  overflow: hidden;
  max-width: 640px;
  border-color: rgba(124, 58, 237, 0.5);
  border-radius: 24px;
  background: rgba(5, 5, 5, 0.96);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.62), 0 0 36px rgba(124, 58, 237, 0.2);
  backdrop-filter: blur(16px);
}

.premium-invite-modal__head {
  padding: 18px 20px 16px;
  border-bottom-color: rgba(167, 139, 250, 0.16);
}

.premium-invite-modal__head .compose-modal__title {
  font-size: 1.32rem;
}

.premium-invite-modal__head .compose-modal__close {
  color: #c4b5fd;
}

.premium-invite-modal__head .compose-modal__close:hover,
.premium-invite-modal__head .compose-modal__close:focus-visible {
  background: rgba(124, 58, 237, 0.18);
  color: #fff;
}

.premium-invite-modal__eyebrow {
  margin: 0 0 4px;
  color: #c4b5fd;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.premium-invite-modal__body {
  max-height: min(72vh, 720px);
  overflow-y: auto;
  padding: 18px 20px 20px;
}

.premium-invite-modal__empty {
  padding: 0;
}

.premium-invite-modal__alert {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.94rem;
  font-weight: 800;
}

.premium-invite-modal__alert--error {
  border: 1px solid rgba(244, 33, 46, 0.5);
  background: rgba(244, 33, 46, 0.13);
  color: #ffd7dc;
}

.premium-invite-modal__alert--success {
  border: 1px solid rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.14);
  color: #d7ffd9;
}

.premium-invite-form,
.premium-redeem-form {
  display: grid;
  gap: 16px;
}

.premium-redeem-form {
  padding: 18px 20px 20px;
}

.premium-invite-form__field .label,
.premium-redeem-form .label {
  display: block;
  margin-bottom: 8px;
}

.premium-invite-code-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.premium-invite-options {
  display: grid;
  grid-template-columns: repeat(2, max-content) minmax(120px, 1fr);
  align-items: center;
  gap: 10px 14px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
}

.premium-invite-options legend {
  padding: 0 4px;
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 800;
}

.premium-invite-options label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.premium-invite-options input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.premium-invite-form__small-input:disabled {
  opacity: 0.5;
}

.premium-invite-list {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(167, 139, 250, 0.16);
}

.premium-invite-list__head {
  margin-bottom: 12px;
}

.premium-invite-list__head h3,
.premium-invite-list__head p,
.premium-invite-list__empty {
  margin: 0;
}

.premium-invite-list__head p {
  margin-top: 4px;
}

.premium-invite-code-list {
  display: grid;
  gap: 10px;
}

.premium-invite-code-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(22, 24, 28, 0.86);
}

.premium-invite-code-card__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.premium-invite-code-card code {
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
}

.premium-invite-code-card__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted-foreground);
  font-size: 0.82rem;
}

.premium-invite-code-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.premium-invite-code-card__actions form {
  margin: 0;
}

.premium-invite-code-card__copy,
.premium-invite-code-card__actions .btn {
  justify-self: end;
}

.premium-invite-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #9ff2b4;
  font-size: 0.74rem;
  font-weight: 800;
}

.premium-invite-status--expired,
.premium-invite-status--exhausted {
  background: rgba(239, 68, 68, 0.12);
  color: #ffb4b4;
}

.premium-redeem-form__error {
  margin: 0;
}

.premium-redeem-form__back-to-checkout {
  margin-top: 0;
}

.premium-checkout-modal.compose-modal {
  align-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
}

.premium-checkout-modal .premium-invite-modal__panel,
.premium-checkout-modal__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: min(92dvh, 680px);
  margin-top: 0;
  overflow: hidden;
}

.premium-checkout-modal__panel > .compose-modal__head {
  flex: 0 0 auto;
}

.premium-checkout-modal__head--clipper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.premium-checkout-modal__head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.premium-checkout-modal__head-note {
  margin: 0;
  padding-top: 2px;
  border-top: 1px solid rgba(167, 139, 250, 0.12);
}

.premium-checkout-modal__head-note em {
  font-style: italic;
}

.premium-checkout-modal__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.premium-checkout-modal__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 auto;
  overflow: visible;
  padding: 18px 20px 12px;
}

.premium-checkout-modal__actions {
  display: grid;
  gap: 10px;
  flex: 0 0 auto;
  padding: 0 20px 20px;
  background: rgba(5, 5, 5, 0.98);
}

.premium-checkout-summary {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 16px;
  background: rgba(124, 58, 237, 0.08);
}

.premium-checkout-summary__plan {
  margin: 0;
  color: #c4b5fd;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.premium-checkout-summary__price {
  margin: 0;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.1;
}

.premium-checkout-summary__price span {
  color: #a1a1aa;
  font-size: 0.95rem;
  font-weight: 600;
}

.premium-checkout-payment-element {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 0;
  overflow: visible;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
}

.premium-checkout-payment-element .__PrivateStripeElement,
.premium-checkout-payment-element iframe {
  width: 100% !important;
  max-width: 100% !important;
}

.premium-checkout-modal__error {
  margin: 0;
}

.premium-checkout-invite-toggle {
  margin-top: 0;
}

.premium-manage-modal.compose-modal {
  z-index: 1200;
}

.premium-manage-modal__panel {
  max-width: 520px;
}

.premium-manage-modal__body {
  display: grid;
  gap: 18px;
  padding: 18px 22px 22px;
}

.premium-manage-modal__loading,
.premium-manage-modal__empty,
.premium-manage-modal__error,
.premium-manage-modal__notice {
  margin: 0;
}

.premium-manage-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.premium-manage-section[hidden] {
  display: none !important;
}

.premium-manage-section__head h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.premium-manage-section__head p {
  margin: 0;
}

.premium-manage-summary {
  display: grid;
  gap: 10px;
  margin: 0;
}

.premium-manage-summary > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: baseline;
}

.premium-manage-summary dt {
  margin: 0;
  color: #8b949e;
  font-size: 0.85rem;
}

.premium-manage-summary dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}

.premium-manage-patreon-status {
  margin: 0;
  font-weight: 600;
}

.premium-manage-patreon-campaigns {
  display: grid;
  gap: 8px;
}

.premium-manage-patreon-campaigns[hidden] {
  display: none !important;
}

.premium-manage-patreon-campaigns__label {
  margin: 0;
}

.premium-manage-patreon-campaigns__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.premium-manage-patreon-campaigns__item {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.premium-manage-patreon-campaigns__item strong {
  font-size: 0.95rem;
}

.premium-manage-section__action {
  margin-top: 0;
}

.premium-manage-section__action--danger {
  border-color: rgba(248, 81, 73, 0.45);
  color: #ffaba8;
}

.premium-manage-section__action--danger:hover {
  border-color: rgba(248, 81, 73, 0.75);
  color: #fff;
  background: rgba(248, 81, 73, 0.12);
}

.premium-manage-section__note {
  margin: 0;
}

.premium-patreon-disconnect-modal.compose-modal {
  z-index: 1300;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.premium-patreon-disconnect-modal .compose-modal__backdrop {
  background: rgba(0, 0, 0, 0.78);
}

.premium-patreon-disconnect-modal__panel {
  max-width: 420px;
  margin: 0;
  overflow: hidden;
  border-color: rgba(248, 81, 73, 0.45);
  border-radius: 20px;
  background: rgba(8, 8, 8, 0.98);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.premium-patreon-disconnect-modal__body {
  display: grid;
  gap: 16px;
  padding: 28px 24px 24px;
  text-align: center;
}

.premium-patreon-disconnect-modal__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffaba8;
}

.premium-patreon-disconnect-modal__message {
  margin: 0;
  color: #c9d1d9;
  line-height: 1.55;
}

.premium-patreon-disconnect-modal__error {
  margin: 0;
}

.premium-patreon-disconnect-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.premium-patreon-disconnect-modal__submit {
  border-color: rgba(248, 81, 73, 0.55);
  background: rgba(248, 81, 73, 0.18);
  color: #fff;
}

.premium-patreon-disconnect-modal__submit:hover,
.premium-patreon-disconnect-modal__submit:focus-visible {
  border-color: rgba(248, 81, 73, 0.85);
  background: rgba(248, 81, 73, 0.28);
  color: #fff;
}

.premium-patreon-success-modal.compose-modal {
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.premium-patreon-success-modal .compose-modal__backdrop {
  background:
    radial-gradient(circle at 50% 42%, rgba(124, 58, 237, 0.22), transparent 42%),
    rgba(0, 0, 0, 0.72);
}

.premium-patreon-success-modal__panel {
  position: relative;
  max-width: 420px;
  margin: 0;
  overflow: hidden;
  border-color: rgba(124, 58, 237, 0.5);
  border-radius: 24px;
  background: rgba(5, 5, 5, 0.98);
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.12),
    0 24px 64px rgba(0, 0, 0, 0.55);
}

.premium-patreon-success-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.premium-patreon-success-modal__body {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 36px 28px 28px;
  text-align: center;
}

.premium-patreon-success-modal__badge {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(124, 58, 237, 0.5));
}

.premium-patreon-success-modal__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #f5f3ff;
}

.premium-patreon-success-modal__message {
  max-width: 320px;
  margin: 0;
  color: #c9d1d9;
  line-height: 1.55;
}

.premium-patreon-success-modal__cta {
  width: 100%;
  margin-top: 4px;
}

.spaces-premium-modal__panel {
  max-width: 520px;
}

.spaces-premium-modal__body {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 24px 22px 22px;
  text-align: center;
}

.spaces-premium-modal__badge {
  display: block;
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(124, 58, 237, 0.42));
}

.spaces-premium-modal__body p {
  max-width: 420px;
  margin: 0;
  color: #c9d1d9;
  line-height: 1.5;
}

.spaces-premium-modal__actions {
  display: grid;
  gap: 10px;
  width: 100%;
}

.spaces-premium-modal__actions[hidden],
.spaces-premium-modal--invite-open .spaces-premium-modal__actions {
  display: none !important;
}

.spaces-premium-modal__actions .btn:hover,
.spaces-premium-modal__actions .btn:focus-visible,
.spaces-premium-invite-form .btn:hover,
.spaces-premium-invite-form .btn:focus-visible {
  text-decoration: none;
}

.spaces-premium-invite-form {
  display: grid;
  gap: 10px;
  width: 100%;
  text-align: left;
}

.spaces-premium-invite-form[hidden] {
  display: none;
}

.spaces-premium-invite-form .label {
  margin: 0;
  color: #e9d5ff;
  font-weight: 800;
}

.spaces-premium-invite-form__error {
  margin: 0;
}

#compose-modal-form.composer--modal {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "avatar main"
    "toolbar toolbar"
    "error error";
  padding: 18px 20px 20px;
  background: transparent;
  align-items: stretch;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#compose-modal .tweet__avatar {
  grid-area: avatar;
  flex-shrink: 0;
}

#compose-modal .tweet__avatar .avatar--md {
  width: 40px;
  height: 40px;
  font-size: 0.95rem;
}

#compose-modal .composer__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-top: 2px;
}

#compose-modal .compose-modal__author {
  margin-bottom: 6px;
}

#compose-modal .mention-compose-field {
  flex-shrink: 0;
}

#compose-modal #compose-modal-error {
  grid-area: error;
  flex-shrink: 0;
  width: 100%;
}

#compose-modal .compose-modal__author-name {
  color: var(--foreground);
}

#compose-modal .compose-modal__author-meta {
  font-size: 0.95rem;
}

#compose-modal .textarea {
  min-height: calc(1.35em + 12px);
  max-height: min(38dvh, 320px);
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 1.35;
  resize: none;
  field-sizing: content;
  overflow-y: auto;
}

#compose-modal .textarea:focus {
  box-shadow: none;
}

#compose-modal .textarea::placeholder {
  color: #8b98a5;
}

#compose-modal .composer__toolbar,
#compose-modal .composer__toolbar--modal {
  grid-area: toolbar;
  width: 100%;
  min-width: 0;
  position: static;
  z-index: 2;
  flex-shrink: 0;
  margin-top: 0;
  padding-top: 14px;
  padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
  border-top-color: rgba(167, 139, 250, 0.16);
  background: rgba(5, 5, 5, 0.98);
}

.composer__filename:empty {
  display: none;
}

#compose-modal .composer__media-btn {
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.08);
}

#compose-modal .composer__media-btn:hover,
#compose-modal .composer__media-btn:focus-visible {
  background: rgba(124, 58, 237, 0.18);
  color: #fff;
}

#compose-modal .composer__gif-wrap[data-gif-selected="1"] .composer__gif-btn {
  color: #f0abfc;
}

#compose-modal-submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(167, 139, 250, 0.42);
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.58), transparent 36%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.34), transparent 30%),
    #050505;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.12) inset, 0 0 22px rgba(124, 58, 237, 0.2), 0 10px 26px rgba(0, 0, 0, 0.32);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

#compose-modal-submit:hover {
  border-color: rgba(167, 139, 250, 0.72);
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2) inset, 0 0 28px rgba(124, 58, 237, 0.3), 0 12px 30px rgba(0, 0, 0, 0.36);
}

#compose-modal-submit:active {
  transform: translateY(0) scale(0.98);
}

#compose-modal-submit .btn__spinner {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: currentColor;
}

#clip-search-modal .compose-modal__backdrop {
  background:
    radial-gradient(circle at 50% 20%, rgba(124, 58, 237, 0.18), transparent 34%),
    rgba(0, 0, 0, 0.74);
}

#clip-search-modal .compose-modal__panel {
  border-color: rgba(124, 58, 237, 0.5);
  border-radius: 24px;
  background: rgba(5, 5, 5, 0.96);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.62), 0 0 36px rgba(124, 58, 237, 0.2);
  backdrop-filter: blur(16px);
}

#clip-search-modal .compose-modal__head {
  padding: 18px 20px 16px;
  border-bottom-color: rgba(167, 139, 250, 0.16);
}

#clip-search-modal .compose-modal__title {
  font-size: 1.32rem;
}

#clip-search-modal .compose-modal__close {
  color: #c4b5fd;
}

#clip-search-modal .compose-modal__close:hover {
  background: rgba(124, 58, 237, 0.18);
  color: #fff;
}

#clip-search-modal .tweet__avatar {
  flex-shrink: 0;
}

#clip-search-modal .tweet__avatar .avatar--md {
  width: 40px;
  height: 40px;
  font-size: 0.95rem;
}

#clip-search-modal .composer__main {
  padding-top: 2px;
}

#clip-search-modal .compose-modal__author {
  margin-bottom: 6px;
}

#clip-search-modal .compose-modal__author-name {
  color: var(--foreground);
}

#clip-search-modal .compose-modal__author-meta {
  font-size: 0.95rem;
}

#clip-search-modal .textarea {
  min-height: 118px;
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 1.35;
}

#clip-search-modal .textarea:focus {
  box-shadow: none;
}

#clip-search-modal .textarea::placeholder {
  color: #8b98a5;
}

#clip-search-modal .composer__toolbar {
  margin-top: 14px;
  padding-top: 14px;
  border-top-color: rgba(167, 139, 250, 0.16);
}

#clip-search-modal #clip-download-btn,
#clip-search-modal .clip-buffer-controls {
  display: none !important;
}

#clip-compose-submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(167, 139, 250, 0.42);
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.58), transparent 36%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.34), transparent 30%),
    #050505;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.12) inset, 0 0 22px rgba(124, 58, 237, 0.2), 0 10px 26px rgba(0, 0, 0, 0.32);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

#clip-compose-submit:hover {
  border-color: rgba(167, 139, 250, 0.72);
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2) inset, 0 0 28px rgba(124, 58, 237, 0.3), 0 12px 30px rgba(0, 0, 0, 0.36);
}

#clip-compose-submit:active {
  transform: translateY(0) scale(0.98);
}

#clip-compose-submit .btn__spinner {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: currentColor;
}

.composer--modal {
  border-bottom: none;
  padding: 14px 16px 18px;
}

.episode-clip-compose__preview {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
}

.episode-clip-compose__player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg);
}

.episode-clip-compose__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.episode-clip-compose__iframe[hidden] {
  display: none;
}

.episode-clip-compose__snippet {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-hover);
}

.episode-clip-compose__snippet-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  color: #acd628;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.episode-clip-compose__snippet-head .muted {
  color: var(--muted-foreground);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.episode-clip-compose__snippet p {
  margin: 0;
  color: var(--foreground);
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
}

.episode-clip-compose__toolbar {
  margin-top: 12px;
}

.clip-search-modal {
  padding: 18px 16px;
}

.clip-search-modal__panel {
  max-width: 860px;
  max-height: calc(100vh - 36px);
  margin-top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.clip-search-modal__body {
  padding: 18px 20px 20px;
  overflow-y: auto;
}

.clip-search-modal__search-form {
  margin-bottom: 12px;
}

.clip-search-modal__search-form .search-page__input {
  border-color: rgba(167, 139, 250, 0.22);
  background: rgba(22, 24, 28, 0.92);
}

.clip-search-modal__search-form .search-page__input:focus {
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.22), 0 0 20px rgba(124, 58, 237, 0.16);
}

.clip-search-modal__hint {
  margin-bottom: 16px;
}

.clip-search-modal__results {
  min-height: 180px;
}

.clip-search-modal__loading {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted-foreground);
  font-weight: 700;
}

.clip-search-modal__loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}

.clip-search-modal__result {
  width: 100%;
  cursor: pointer;
}

.clip-search-modal__result:hover,
.clip-search-modal__result:focus-visible {
  background: rgba(124, 58, 237, 0.08);
}

.clip-search-modal__result:focus-visible {
  outline: 2px solid rgba(167, 139, 250, 0.72);
  outline-offset: 2px;
}

.clip-search-modal__result--disabled {
  opacity: 0.68;
}

.clip-search-modal__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #c4b5fd;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.clip-search-modal__back:hover,
.clip-search-modal__back:focus-visible {
  background: rgba(124, 58, 237, 0.18);
  color: #fff;
}

.clip-search-modal__back:focus-visible {
  outline: 2px solid rgba(167, 139, 250, 0.72);
  outline-offset: 2px;
}

.clip-search-modal__compose.composer--modal {
  padding: 0;
}

.clip-search-modal__compose {
  align-items: flex-start;
  gap: 12px;
  border-bottom: 0;
  background: transparent;
}

.clip-search-modal__compose #clip-compose-body {
  min-height: 118px;
}

.clip-search-modal__preview {
  max-width: 720px;
  border-color: rgba(167, 139, 250, 0.22);
}

.clip-search-modal__snippet-wrap {
  max-height: calc(1.45em * 3);
}

.clip-search-modal__error {
  margin: 0 0 12px;
}

.premium-page {
  padding: 0 18px 32px;
}

.premium-alert {
  margin: 16px 0 0;
}

.premium-notice {
  padding: 10px 12px;
  border: 1px solid #164b22;
  border-radius: 12px;
  background: rgba(22, 75, 34, 0.22);
  color: #d7ffd9;
}

.premium-hero {
  position: relative;
  overflow: hidden;
  margin: 16px 0 18px;
  padding: 42px 32px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(29, 155, 240, 0.22), transparent 30%),
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(22, 24, 28, 0.98), rgba(0, 0, 0, 0.98));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
}

.premium-hero--benefits {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-color: rgba(167, 139, 250, 0.42);
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.58), transparent 36%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.34), transparent 30%),
    #050505;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.12) inset, 0 0 34px rgba(124, 58, 237, 0.18), 0 18px 48px rgba(0, 0, 0, 0.3);
}

.premium-hero__content {
  min-width: 0;
}

.premium-hero__manage {
  flex: 0 0 auto;
}

.premium-hero__eyebrow,
.premium-note__eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.premium-hero--benefits .premium-hero__eyebrow {
  color: #ffe57a;
}

.premium-hero__title {
  max-width: 680px;
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.premium-hero--benefits .premium-hero__title {
  font-size: clamp(2rem, 6vw, 4.35rem);
}

.premium-hero__copy {
  max-width: 600px;
  margin: 18px 0 0;
  color: #c9d1d9;
  font-size: 1.12rem;
  line-height: 1.5;
}

.premium-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

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

.premium-benefit-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface-hover);
}

.premium-benefit-card--spaces {
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.18), transparent 34%),
    var(--surface-hover);
}

.premium-benefit-card--search {
  background:
    radial-gradient(circle at top right, rgba(255, 212, 0, 0.16), transparent 34%),
    var(--surface-hover);
}

.premium-benefit-card__head {
  margin-bottom: 16px;
}

.premium-benefit-card__head h2,
.premium-benefit-card__head p {
  margin: 0;
}

.premium-benefit-card__head h2 {
  font-size: 1.65rem;
}

.premium-benefit-card__head .muted {
  margin-top: 10px;
  line-height: 1.5;
}

.premium-benefit-card .premium-note__eyebrow {
  color: #ffe57a;
}

.premium-benefit-card__callout {
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid rgba(167, 139, 250, 0.24);
  border-radius: 16px;
  background: rgba(124, 58, 237, 0.08);
  color: var(--foreground);
  line-height: 1.45;
}

.premium-benefit-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: auto 0 18px;
}

.premium-benefit-stats div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-secondary);
}

.premium-benefit-stats dt {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.premium-benefit-stats dd {
  margin: 7px 0 0;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
}

.premium-benefit-card__cta {
  align-self: stretch;
  width: 100%;
}

.premium-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.premium-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface-hover);
}

.premium-tier--featured {
  border-color: rgba(29, 155, 240, 0.82);
  background:
    radial-gradient(circle at top right, rgba(29, 155, 240, 0.24), transparent 34%),
    var(--surface-hover);
  box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.16), 0 18px 38px rgba(29, 155, 240, 0.12);
}

.premium-tier--clipper {
  background:
    radial-gradient(circle at top right, rgba(255, 212, 0, 0.12), transparent 34%),
    var(--surface-hover);
}

.premium-tier__badge {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.premium-tier__badge--placeholder {
  visibility: hidden;
}

.premium-tier__head {
  margin-bottom: 18px;
}

.premium-tier__name {
  margin: 0;
  font-size: 1.38rem;
  line-height: 1.1;
}

.premium-tier__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 14px 0 0;
  color: #fff;
}

.premium-tier__price span {
  font-size: 2.45rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.premium-tier__price-value--blurred {
  filter: blur(5px);
  user-select: none;
}

.premium-tier__price small {
  color: var(--muted-foreground);
  font-size: 0.95rem;
  font-weight: 600;
}

.premium-tier__summary {
  margin: 12px 0 0;
  min-height: 62px;
  color: #8b98a5;
  line-height: 1.45;
}

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

.premium-tier__cta-group {
  display: grid;
  gap: 10px;
}

.premium-tier__cta-group .premium-tier__cta--patreon {
  border-style: dashed;
}

.premium-tier__cta-group .premium-tier__cta:first-child {
  margin-top: 0;
}

.premium-tier__cta:hover,
.premium-tier__cta:focus-visible {
  text-decoration: none;
}

.premium-tier__cta:disabled {
  opacity: 0.62;
  cursor: default;
}

.premium-tier__cta:disabled:hover {
  background: transparent;
  filter: none;
}

.premium-tier__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.premium-tier__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--foreground);
  line-height: 1.35;
}

.premium-tier__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  margin-top: -1px;
  border-radius: 50%;
  background: rgba(29, 155, 240, 0.14);
  color: var(--accent);
  flex: 0 0 auto;
}

.premium-note {
  margin-top: 16px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg);
}

.premium-note h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

.premium-note p:last-child {
  margin-bottom: 0;
}

.premium-note--clipper {
  border-color: rgba(255, 212, 0, 0.22);
}

.clipper-request-modal[hidden] {
  display: none;
}

.clipper-request-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.clipper-request-modal-open {
  overflow: hidden;
}

.clipper-request-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.74);
  cursor: pointer;
}

.clipper-request-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.58);
}

.clipper-request-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.clipper-request-modal__head h2,
.clipper-request-modal__eyebrow {
  margin: 0;
}

.clipper-request-modal__eyebrow {
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clipper-request-modal__close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
}

.clipper-request-modal__close:hover,
.clipper-request-modal__close:focus-visible {
  background: var(--surface);
  outline: none;
}

.clipper-request-form {
  padding: 20px;
}

.clipper-request-form__error {
  margin: 0 0 16px;
}

.clipper-request-overview {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.clipper-request-overview__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-secondary);
}

.clipper-request-overview__status p {
  margin: 0;
}

.clipper-request-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 800;
}

.clipper-request-status--pending {
  border-color: rgba(255, 212, 0, 0.3);
  background: rgba(255, 212, 0, 0.08);
  color: #ffe57a;
}

.clipper-request-status--approved {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.1);
  color: #9ff2b4;
}

.clipper-request-status--rejected {
  border-color: rgba(239, 68, 68, 0.38);
  background: rgba(239, 68, 68, 0.1);
  color: #ffb4b4;
}

.clipper-request-overview__stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.clipper-request-overview__stats div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
}

.clipper-request-overview__stats dt {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.clipper-request-overview__stats dd {
  margin: 5px 0 0;
  font-weight: 800;
}

.clipper-request-overview__section {
  min-width: 0;
}

.clipper-request-overview__section h3,
.clipper-request-overview__section p {
  margin: 0;
}

.clipper-request-overview__section h3 {
  margin-bottom: 8px;
  font-size: 0.94rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.clipper-request-overview__channels {
  display: grid;
  gap: 10px;
}

.clipper-request-overview__channel {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
}

.clipper-request-overview__channel div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clipper-request-overview__channel a {
  overflow-wrap: anywhere;
}

.clipper-progress {
  margin-bottom: 20px;
}

.clipper-progress__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #8b98a5;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.clipper-progress__track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-hover);
  overflow: hidden;
}

.clipper-progress__bar {
  width: 33.333%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #7c3aed);
  transition: width 0.18s ease;
}

.clipper-step[hidden] {
  display: none;
}

.clipper-step h3,
.clipper-step p {
  margin: 0;
}

.clipper-step > .label {
  display: block;
  margin-bottom: 8px;
}

.clipper-step > .muted {
  margin-top: 8px;
}

.clipper-request-form__textarea {
  min-height: 112px;
}

.clipper-step__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.clipper-step__head p {
  margin-top: 4px;
}

.clipper-channel-list {
  display: grid;
  gap: 12px;
}

.clipper-channel-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(140px, 1fr) minmax(180px, 1.2fr) minmax(120px, 0.8fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-secondary);
}

.clipper-channel-row label {
  min-width: 0;
}

.clipper-channel-row .label {
  display: block;
  margin-bottom: 6px;
}

.clipper-channel-row__remove {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
}

.clipper-channel-row__remove:hover,
.clipper-channel-row__remove:focus-visible {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
  outline: none;
}

.clipper-channel-row__remove[hidden] {
  display: none;
}

.clipper-review {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.clipper-review__incomplete {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 212, 0, 0.28);
  border-radius: 12px;
  background: rgba(255, 212, 0, 0.08);
  color: #ffe57a;
  font-size: 0.9rem;
  font-weight: 700;
}

.clipper-review__incomplete[hidden] {
  display: none;
}

.clipper-review__block {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-secondary);
}

.clipper-review__block h4,
.clipper-review__block p {
  margin: 0;
}

.clipper-review__block h4 {
  margin-bottom: 8px;
}

.clipper-review__channels {
  display: grid;
  gap: 8px;
}

.clipper-request-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.clipper-request-form__actions .btn[hidden] {
  display: none !important;
}

@media (max-width: 960px) {
  .premium-tier-grid {
    grid-template-columns: 1fr;
  }

  .premium-tier__summary {
    min-height: 0;
  }
}

@media (max-width: 700px) {
  .premium-page {
    padding: 0 12px 24px;
  }

  .premium-hero {
    margin-top: 12px;
    padding: 30px 20px;
    border-radius: 22px;
  }

  .premium-hero--benefits {
    flex-direction: column;
  }

  .premium-hero__manage {
    width: 100%;
  }

  .premium-hero__actions {
    flex-direction: column;
  }

  .premium-benefit-grid {
    grid-template-columns: 1fr;
  }

  .premium-benefit-card {
    padding: 20px;
  }

  .premium-benefit-stats {
    grid-template-columns: 1fr;
  }

  .premium-tier {
    padding: 20px;
  }

  .premium-invite-modal {
    align-items: stretch;
    padding: 0;
  }

  .premium-invite-modal__panel {
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    margin-top: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .premium-invite-modal__body {
    max-height: calc(100vh - 73px);
    max-height: calc(100dvh - 73px);
  }

  .premium-checkout-modal.compose-modal {
    align-items: stretch;
    padding: 0;
  }

  .premium-checkout-modal .premium-invite-modal__panel,
  .premium-checkout-modal__panel {
    height: 100dvh;
    max-height: 100dvh;
    margin-top: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .premium-invite-modal.spaces-premium-modal {
    align-items: flex-start;
    padding: max(16px, env(safe-area-inset-top, 0px)) 14px max(16px, env(safe-area-inset-bottom, 0px));
  }

  .premium-invite-modal.spaces-premium-modal .premium-invite-modal__panel {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin-top: 4vh;
    border-right: 1px solid rgba(124, 58, 237, 0.5);
    border-left: 1px solid rgba(124, 58, 237, 0.5);
    border-radius: 24px;
  }

  .premium-invite-modal.spaces-premium-modal .spaces-premium-modal__body {
    max-height: calc(100vh - 122px);
    max-height: calc(100dvh - 122px);
    overflow-y: auto;
  }

  .premium-invite-code-field,
  .premium-invite-options,
  .premium-invite-code-card {
    grid-template-columns: 1fr;
  }

  .premium-invite-code-card__actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-self: stretch;
  }

  .premium-invite-code-card__copy,
  .premium-invite-code-card__actions .btn,
  .premium-invite-code-card__actions form {
    width: 100%;
  }

  .clipper-request-modal {
    align-items: flex-start;
    padding: max(16px, env(safe-area-inset-top, 0px)) 14px max(16px, env(safe-area-inset-bottom, 0px));
  }

  .clipper-request-modal__panel {
    width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin-top: 4vh;
    border-radius: 24px;
    border-right: 1px solid var(--border);
    border-left: 1px solid var(--border);
  }

  .clipper-request-modal__head,
  .clipper-request-form,
  .clipper-request-overview {
    padding: 16px;
  }

  .clipper-request-overview__status {
    align-items: flex-start;
    flex-direction: column;
  }

  .clipper-request-overview__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clipper-step__head,
  .clipper-request-form__actions {
    flex-direction: column;
  }

  .clipper-step__head .btn,
  .clipper-request-form__actions .btn {
    width: 100%;
  }

  .clipper-channel-row {
    grid-template-columns: 1fr;
  }

  .clipper-channel-row__remove {
    width: 100%;
    border-radius: 12px;
  }
}

@media (max-width: 1100px) {
  .shell {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .col--right {
    display: none;
  }

  .col--left {
    padding: 12px 8px;
  }

  .brand__link {
    justify-content: center;
  }

  .brand__img {
    max-width: 56px;
  }

  .nav__link .nav__label {
    display: none;
  }

  .nav-user__meta,
  .nav-user__handle,
  .nav-user__name {
    display: none;
  }
}

.mobile-top-bar,
.mobile-footer-nav {
  display: none;
}

.mobile-top-bar {
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 8px;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
}

.mobile-top-bar__menu-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
}

.mobile-top-bar__menu-btn:hover {
  background: var(--surface);
}

.mobile-top-bar__menu-btn .avatar {
  pointer-events: none;
}

.mobile-top-bar__menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-top-bar__brand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}

.mobile-top-bar__brand:hover {
  text-decoration: none;
  opacity: 0.9;
}

.mobile-top-bar__brand-img {
  display: block;
  height: 30px;
  width: auto;
  max-width: min(160px, 42vw);
  filter: var(--logo-invert);
}

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0, 0, 0, 0.55);
}

.mobile-footer-nav {
  box-sizing: border-box;
  align-items: stretch;
}

.mobile-footer-nav__link {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  border-radius: 14px;
  color: var(--muted-foreground);
  text-decoration: none;
}

.mobile-footer-nav__link:hover,
.mobile-footer-nav__link:focus-visible {
  background: var(--surface);
  color: var(--foreground);
  text-decoration: none;
}

.mobile-footer-nav__link.nav__link--active {
  color: var(--foreground);
  font-weight: 800;
}

.mobile-footer-nav__icon {
  width: auto;
}

@media (max-width: 700px) {
  .shell {
    display: block;
    grid-template-columns: 1fr;
  }

  .mobile-top-bar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1080;
    height: 52px;
  }

  .mobile-footer-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    min-height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding: 5px max(8px, env(safe-area-inset-right, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  .col--left {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 88vw);
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 16px 16px 24px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    border-right: 1px solid var(--border);
    border-bottom: none;
    background: var(--bg);
    z-index: 1060;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: none;
  }

  body.mobile-nav-open .col--left {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.55);
  }

  .col--left .brand {
    display: none;
  }

  .col--left .nav {
    flex-direction: column;
    flex-wrap: nowrap;
    margin-top: 40px;
  }

  .col--left .btn-post {
    display: none;
  }

  .col--left .nav-user {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }

  #mobile-nav-drawer .nav__label {
    display: inline;
  }

  #mobile-nav-drawer .nav-user__meta,
  #mobile-nav-drawer .nav-user__name,
  #mobile-nav-drawer .nav-user__handle {
    display: block;
  }

  #mobile-nav-drawer .nav-user__meta {
    display: flex;
    flex-direction: column;
  }

  .col--center {
    border-right: 0;
    padding-top: 52px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  body.app:has(.messages-shell) .col--center {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding-bottom: 0;
  }

  body.app:has(.messages-shell) {
    overflow: hidden;
  }

  /* Home feed: hide inline composer; post via the header compose button */
  .col--center > form.composer:not(.composer--modal) {
    display: none;
  }

  .col-header {
    top: 52px;
  }

  .home-tabs {
    top: 52px;
  }

  .home-timeline-header {
    top: 52px;
  }

  .feed .tweet {
    padding-left: 12px;
    padding-right: 12px;
  }

  .tweet .tweet__header-text {
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
  }

  .tweet .tweet__identity {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 4px;
    min-width: 0;
    max-width: calc(100% - 5.75rem);
    overflow: hidden;
  }

  .tweet .tweet__name {
    display: inline-flex;
    align-items: baseline;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
  }

  .tweet .tweet__name .display-name-with-badge {
    min-width: 0;
    overflow: hidden;
  }

  .tweet .tweet__name .display-name-with-badge__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tweet .tweet__meta {
    display: inline-flex;
    align-items: baseline;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.82rem;
  }

  .tweet .tweet__handle {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tweet .tweet__separator {
    flex: 0 0 auto;
  }

  .tweet .tweet__time {
    display: inline-flex;
    flex: 0 0 auto;
    flex-shrink: 0;
    align-items: baseline;
    white-space: nowrap;
    font-size: 0.82rem;
  }

  .tweet__quoted-header {
    gap: 4px;
  }

  .tweet__quoted-name {
    font-size: 0.92rem;
  }

  .tweet__quoted-handle,
  .tweet__quoted-time {
    font-size: 0.82rem;
  }

  .messages-shell {
    display: block;
    position: fixed;
    top: 52px;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    left: 0;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  body.has-space-dock .messages-shell {
    bottom: calc(64px + 150px + env(safe-area-inset-bottom, 0px));
  }

  body.has-space-dock-expanded .messages-shell {
    bottom: calc(64px + 280px + env(safe-area-inset-bottom, 0px));
  }

  .messages-sidebar,
  .messages-conversation {
    height: 100%;
    min-height: 0;
    border-right: 0;
    overflow: hidden;
  }

  .messages-shell--has-thread .messages-sidebar {
    display: none;
  }

  .messages-shell:not(.messages-shell--has-thread) .messages-conversation {
    display: none;
  }

  .messages-pane-header,
  .messages-conversation__header {
    top: 0;
  }

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

  .messages-thread-row {
    padding: 14px;
  }

  .messages-thread-row:not(.messages-thread-row--request) {
    padding: 0;
  }

  .messages-thread-row:not(.messages-thread-row--request) > .messages-thread-row__link {
    padding: 14px;
  }

  .messages-list {
    padding: 16px 12px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .message-row__stack {
    max-width: 84%;
  }

  .message-composer {
    flex-shrink: 0;
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .message-composer .message-composer__send {
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.95rem;
  }

  .message-composer__desktop-action {
    display: none !important;
  }

  .message-composer__mobile-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .message-composer__textarea {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .message-composer__textarea::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .clip-search-modal {
    padding: 0;
  }

  .clip-search-modal__panel {
    max-width: none;
    max-height: 100vh;
    max-height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .clip-search-modal__body {
    padding: 12px;
  }

  .clip-search-modal__search-form {
    align-items: stretch;
  }

  .clip-search-modal__compose.composer--modal {
    gap: 10px;
  }

  #compose-modal.compose-modal {
    align-items: flex-start;
    padding: max(16px, env(safe-area-inset-top, 0px)) 12px max(16px, env(safe-area-inset-bottom, 0px));
  }

  #compose-modal .compose-modal__panel {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(88dvh, calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    margin-top: 4vh;
    border-radius: 24px;
    border-left: 1px solid rgba(124, 58, 237, 0.5);
    border-right: 1px solid rgba(124, 58, 237, 0.5);
  }

  #compose-modal-form.composer--modal {
    padding-bottom: 16px;
  }

  /* Avatar is enough for normal posts; only show name row when quoting. */
  #compose-modal:not(:has(#compose-modal-quote-preview.tweet__quoted--compose)) .compose-modal__author {
    display: none;
  }

  #compose-modal .compose-modal__author {
    margin-bottom: 2px;
    gap: 4px;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
  }

  #compose-modal .compose-modal__author-name {
    font-size: 0.9rem;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #compose-modal .compose-modal__author-meta {
    font-size: 0.8rem;
    line-height: 1.2;
    flex-shrink: 0;
    white-space: nowrap;
  }

  #compose-modal .compose-modal__author-name .display-name-with-badge__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #compose-modal .tweet__avatar .avatar--md {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  #compose-modal .composer__toolbar,
  #compose-modal .composer__toolbar--modal {
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 0;
  }

  #compose-modal .composer__toolbar--modal .composer__toolbar-right {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 2px;
    min-width: 0;
  }

  #compose-modal .composer__toolbar--modal .composer__media-btn {
    width: 36px;
    height: 36px;
  }

  #compose-modal .composer__toolbar--modal .composer__media-btn svg {
    width: 17px;
    height: 17px;
  }

  #compose-modal-submit {
    flex-shrink: 0;
    margin-left: 2px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .col--left .nav-guest {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
}

.watch-party-room-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.watch-party-summary {
  margin: 14px 20px -2px;
  padding: 4px 2px 0;
}

.watch-party-summary__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 3px;
}

.watch-party-summary__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #a78bfa;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.watch-party-summary h2 {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.05;
}

.watch-party-summary__counts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: 14px;
}

.watch-party-summary__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 750;
}

.watch-party-summary__count svg {
  width: 16px;
  height: 16px;
}

.watch-party-player {
  margin: 0 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.18), transparent 36%),
    var(--bg-secondary);
}

.watch-party-player__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg);
}

.watch-party-player__iframe,
.watch-party-player__fallback,
.watch-party-player__screen {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.watch-party-player__screen {
  position: relative;
  z-index: 2;
  display: none;
  background: var(--bg);
}

.watch-party-player--sharing .watch-party-player__screen {
  display: block;
}

.watch-party-player--sharing .watch-party-player__fallback {
  display: none;
}

.watch-party-player__empty {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.56);
  color: #fff;
  text-align: center;
}

.watch-party-player__empty-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.watch-party-player__empty strong {
  font-size: 1.12rem;
}

.watch-party-player__empty span {
  max-width: 420px;
  color: #cfd9de;
}

.watch-party-player--sharing .watch-party-player__empty {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 16px;
  background: transparent;
  pointer-events: none;
}

.watch-party-player--sharing .watch-party-player__empty-copy {
  display: none;
}

.watch-party-player--sharing .watch-party-player__host-actions {
  pointer-events: auto;
}

.watch-party-player__viewer-shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: default;
}

.watch-party-player__start {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
}

.watch-party-player__start:hover {
  background: rgba(29, 155, 240, 0.88);
  text-decoration: none;
}

.watch-party-player__start[hidden] {
  display: none;
}

.watch-party-player__replay {
  display: none;
}

.watch-party-player__meta {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px 18px;
}

.watch-party-player__meta h2 {
  margin: 0 0 4px;
  font-size: 1.35rem;
  line-height: 1.15;
}

.watch-party-player__meta p {
  margin: 0;
}

.watch-party-player__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: #c4b5fd;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.watch-party-player__badge {
  align-self: flex-end;
  flex: 0 0 auto;
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 999px;
  padding: 8px 12px;
  color: #e9d5ff;
  font-size: 0.86rem;
  font-weight: 700;
}

.watch-party-player__empty .watch-party-player__badge--overlay {
  align-self: center;
  padding: 5px 9px;
  color: #e9d5ff;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
}

.watch-party-player__host-actions {
  display: flex;
  align-self: center;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.watch-party-player__host-actions [data-watch-party-share-screen] {
  color: #000;
}

.watch-party-player__host-actions [data-watch-party-share-label] {
  color: #000;
}

.watch-party-player__iframe {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.watch-party-player--youtube .watch-party-player__screen {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  width: 30%;
  max-width: 220px;
  aspect-ratio: 16 / 9;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  object-fit: cover;
}

.watch-party-player__webcam-toggle {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
}

.watch-party-cam-menu {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
}
.watch-party-cam-menu__trigger {
  background: rgba(0,0,0,0.6);
  border: none;
  color: rgba(255,255,255,0.8);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.watch-party-cam-menu__trigger:hover { background: rgba(0,0,0,0.8); color: #fff; }
.watch-party-cam-menu__panel {
  position: absolute;
  top: 32px;
  right: 0;
  background: var(--surface, #181818);
  border: 1px solid var(--border, #2f3336);
  border-radius: 10px;
  padding: 10px;
  min-width: 140px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.watch-party-cam-menu__section { margin-bottom: 8px; }
.watch-party-cam-menu__section:last-child { margin-bottom: 0; }
.watch-party-cam-menu__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 4px; }
.watch-party-cam-menu__row { display: flex; gap: 4px; }
.watch-party-cam-controls__btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.watch-party-cam-controls__btn:hover { color: #fff; border-color: rgba(255,255,255,0.5); }
.watch-party-cam-controls__btn--active { color: #fff; background: rgba(139,92,246,0.5); border-color: rgba(139,92,246,0.7); }

/* Webcam PiP sizes */
.watch-party-player__screen--pip {
  position: absolute;
  z-index: 5;
  border-radius: 10px;
  border: 2px solid rgba(139, 92, 246, 0.7);
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.3), 0 4px 12px rgba(0,0,0,0.4);
  bottom: 12px;
  right: 12px;
  resize: both;
  overflow: hidden;
  min-width: 120px;
  min-height: 90px;
  max-width: 80%;
  max-height: 80%;
  cursor: nwse-resize;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.watch-party-player__screen--pip:hover {
  border-color: rgba(167, 139, 250, 0.9);
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.5), 0 4px 16px rgba(0,0,0,0.5);
}
/* Resize handle indicator in bottom-right corner */
.watch-party-player__screen--pip::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, transparent 50%, rgba(139, 92, 246, 0.6) 50%);
  border-radius: 0 0 8px 0;
  pointer-events: none;
}
.watch-party-player--youtube .watch-party-player__screen--pip-small { width: 160px !important; max-width: 160px !important; height: auto; }
.watch-party-player--youtube .watch-party-player__screen--pip-medium { width: 280px !important; max-width: 280px !important; height: auto; }

.watch-party-player--youtube .watch-party-player__screen--pip-top-left { top: 12px; left: 12px; bottom: auto; right: auto; }
.watch-party-player--youtube .watch-party-player__screen--pip-top-right { top: 12px; right: 12px; bottom: auto; left: auto; }
.watch-party-player--youtube .watch-party-player__screen--pip-bottom-right { bottom: 12px; right: 12px; top: auto; left: auto; }
.watch-party-player--youtube .watch-party-player__screen--pip-bottom-left { bottom: 12px; left: 12px; top: auto; right: auto; }

.watch-party-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 18px;
}

.watch-party-controls__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text);
  cursor: pointer;
}

.watch-party-controls__btn:hover {
  background: var(--bg);
}

.watch-party-controls__btn--play,
.watch-party-controls__btn--pause {
  width: 48px;
  height: 48px;
  border-color: rgba(124, 58, 237, 0.45);
  background: #7c3aed;
  color: #fff;
}

.watch-party-controls__btn--play:hover,
.watch-party-controls__btn--pause:hover {
  background: #6d28d9;
}

.watch-party-controls__label {
  font-size: 0.7rem;
  font-weight: 700;
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
}

.watch-party-tabs {
  margin: 0 20px 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #050505;
  box-shadow: 0 0 34px rgba(124, 58, 237, 0.1);
}

.watch-party-main-comments {
  margin: 0 20px 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #050505;
  box-shadow: 0 0 34px rgba(124, 58, 237, 0.1);
}

.watch-party-live-rail {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.34), transparent 34%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.16), transparent 28%),
    #050505;
  box-shadow: 0 0 34px rgba(124, 58, 237, 0.12);
}

.watch-party-right-stack {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.watch-party-right-stack .widget--sidebar-search,
.watch-party-right-stack .watch-party-live-rail {
  position: static;
}

.watch-party-live-rail__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 14px;
  color: #a78bfa;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.watch-party-live-rail .space-room {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.watch-party-live-rail .space-room__hero {
  display: none;
}

.watch-party-live-rail .space-stage,
.watch-party-live-rail .space-listeners {
  padding: 0 0 14px;
}

.watch-party-live-rail .space-listeners {
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(47, 51, 54, 0.9);
}

.watch-party-live-rail .space-stage + .space-listeners {
  margin-top: 2px;
  border-top: 1px solid rgba(47, 51, 54, 0.9);
  padding-top: 14px;
}

.watch-party-live-rail .space-stage h3,
.watch-party-live-rail .space-listeners h3 {
  margin-bottom: 10px;
}

.watch-party-live-rail .space-stage h3 {
  font-size: 1.05rem;
}

.watch-party-live-rail .space-participant-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.watch-party-live-rail .space-participant {
  align-items: center;
  flex-direction: row;
  gap: 10px;
  text-align: left;
}

.watch-party-live-rail .space-participant__profile {
  align-items: center;
  flex: 1 1 auto;
  flex-direction: row;
  gap: 10px;
  min-width: 0;
}

.watch-party-live-rail .space-participant__meta {
  align-items: flex-start;
  flex: 1 1 auto;
}

.watch-party-live-rail .space-participant__avatar-wrap .avatar {
  width: 48px;
  height: 48px;
  font-size: 0.95rem;
}

.watch-party-live-rail .space-participant__name {
  margin-top: 0;
}

.watch-party-live-rail .space-participant__handle {
  display: block;
}

.watch-party-live-rail .space-participant__role {
  flex: 0 0 auto;
}

.watch-party-live-rail .space-participant__menu-wrap {
  position: relative;
  top: auto;
  right: auto;
  margin-top: 0;
}

.watch-party-voice-share {
  display: none;
}

.watch-party-live-rail .watch-party-voice-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  margin: 0 0 14px;
  border-color: #3f4650;
  color: var(--foreground);
}

.watch-party-live-rail .watch-party-voice-share:hover {
  border-color: #a78bfa;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.watch-party-live-rail .watch-party-voice-share svg {
  flex: 0 0 auto;
}

.watch-party-live-rail .space-controls {
  margin-top: 0;
  border-top: 0;
  background: transparent;
  backdrop-filter: none;
}

.watch-party-page .space-room--ended .space-controls {
  display: none;
}

.watch-party-live-rail .watch-party-end-button,
.watch-party-live-rail .space-controls > [data-space-action="leave"] {
  width: 100%;
  border-color: rgba(244, 63, 94, 0.55);
  background: rgba(244, 63, 94, 0.08);
  color: #f87171;
}

.watch-party-live-rail .watch-party-end-button:hover,
.watch-party-live-rail .space-controls > [data-space-action="leave"]:hover {
  border-color: rgba(248, 113, 113, 0.72);
  background: rgba(244, 63, 94, 0.14);
  text-decoration: none;
}

.watch-party-comments__desktop-title {
  display: none;
}

@media (min-width: 701px) {
  .watch-party-header-title,
  .watch-party-header-share {
    display: none;
  }

  .watch-party-tabs {
    margin: 0 20px 24px;
  }

  .watch-party-tabs__nav,
  .watch-party-tabs [data-watch-party-panel="live"] {
    display: none;
  }

  .watch-party-tabs [data-watch-party-panel="comments"][hidden] {
    display: block;
  }

  .watch-party-player__replay {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .watch-party-player__replay .space-replay-player--overlay-head {
    position: relative;
    height: 100%;
  }

  .watch-party-player__replay .space-replay-player--overlay-head > .space-replay-player__head {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 16px;
    left: 16px;
    pointer-events: none;
  }

  .watch-party-player__replay .space-replay-player--overlay-head > .space-replay-player__head .space-replay-player__title,
  .watch-party-player__replay .space-replay-player--overlay-head > .space-replay-player__head .space-replay-player__status {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(12px);
  }

  .watch-party-player__replay .space-replay-player--overlay-head .space-replay-player__main {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    pointer-events: auto;
  }

  .watch-party-player__replay .space-replay-player__main {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(12px);
  }

  .watch-party-live-rail .space-replay-player {
    display: none;
  }

  .watch-party-comments__desktop-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 2px 20px 4px;
    padding: 16px 2px 0;
    border-top: 1px solid var(--border);
    color: #a78bfa;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .watch-party-tabs {
    border-radius: 16px;
  }

  .watch-party-tabs .watch-party-comments__list {
    max-height: none;
    overflow: visible;
  }

  .watch-party-tabs .watch-party-comment__handle {
    display: none;
  }

  .watch-party-tabs .watch-party-comments {
    display: flex;
    flex-direction: column;
  }

  .watch-party-tabs .watch-party-comments__form {
    order: -1;
    border-top: 0;
    border-bottom: 1px solid var(--border);
    padding: 14px 16px;
  }

  .watch-party-tabs .watch-party-comments__form .btn {
    border-radius: 12px;
    padding-left: 32px;
    padding-right: 24px;
  }
}

.watch-party-tabs .space-room__hero {
  display: none;
}

.watch-party-tabs__nav {
  display: flex;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.34);
}

.watch-party-tabs__tab {
  flex: 1 1 0;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.watch-party-tabs__tab:hover,
.watch-party-tabs__tab--active {
  background: rgba(124, 58, 237, 0.18);
  color: #f7f9f9;
}

.watch-party-tabs__panel[hidden] {
  display: none;
}

@media (min-width: 701px) {
  .watch-party-tabs__nav,
  .watch-party-tabs [data-watch-party-panel="live"] {
    display: none;
  }

  .watch-party-tabs [data-watch-party-panel="comments"][hidden] {
    display: block;
  }
}

.watch-party-tabs #space-room-fragment {
  display: block;
}

.watch-party-tabs .space-room {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.watch-party-comments {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.watch-party-comments__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.watch-party-comments__header h3 {
  margin: 0;
  font-size: 1rem;
}

.watch-party-comments__list {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
}

.watch-party-comments__empty,
.watch-party-comments__hint {
  margin: 0;
  padding: 14px 16px;
}

.watch-party-comment {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(47, 51, 54, 0.7);
}

.watch-party-comment--own {
  text-align: left;
}

.watch-party-comment:last-child {
  border-bottom: 0;
}

.watch-party-comment__user {
  display: flex;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.watch-party-comment__body {
  min-width: 0;
  flex: 1 1 auto;
}

.watch-party-comment__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.watch-party-comment__name {
  min-width: 0;
  font-weight: 800;
}

.watch-party-comment p {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.watch-party-comment__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  max-width: 100%;
}

.watch-party-comment__time {
  align-self: flex-start;
  flex: 0 0 auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1;
}

.watch-party-comment__reply-quote {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: 100%;
  background: var(--surface);
  border-left: 2px solid var(--accent);
  padding: 4px 8px;
  margin-bottom: 4px;
  border-radius: 4px;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-party-comment__reply-name {
  color: var(--accent);
  font-weight: 700;
}

.watch-party-comment__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
  flex-shrink: 0;
}

.watch-party-comment__action-btn:hover {
  color: var(--foreground);
}

.watch-party-comment__like {
  background: none;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  flex-shrink: 0;
}

.watch-party-comment__like:hover {
  color: #ef4444;
}

.watch-party-comment__like--active {
  color: #ef4444;
}

.watch-party-comment__like--active .watch-party-comment__like-icon {
  fill: #ef4444;
}

.watch-party-comment__like-count {
  font-size: 0.8rem;
}

.watch-party-comments__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--border);
}

.watch-party-comments__form .input {
  flex: 1 1 auto;
  min-width: 0;
}

.watch-party-comments__reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1 1 100%;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface);
  border-left: 2px solid var(--accent);
}

.watch-party-comments__reply-preview[hidden] {
  display: none !important;
}

.watch-party-comments__reply-preview-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.watch-party-comments__reply-preview-label {
  font-size: 0.8rem;
}

.watch-party-comments__reply-preview-body {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-party-comments__reply-preview-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--muted-foreground);
}

.watch-party-comments__reply-preview-remove:hover {
  color: var(--foreground);
}

.watch-party-card .space-card__link {
  align-items: center;
}

.watch-party-card__thumb {
  position: relative;
  flex: 0 0 148px;
  overflow: hidden;
  border-radius: 16px;
  background: #111;
  aspect-ratio: 16 / 9;
}

.watch-party-card__thumb img,
.watch-party-card__thumb-empty {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.watch-party-card__thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, rgba(124, 58, 237, 0.32), transparent 42%),
    linear-gradient(135deg, #1a1d21 0%, #0d0d0d 100%);
  color: rgba(231, 233, 234, 0.78);
}

.watch-party-card__thumb-empty svg {
  filter: drop-shadow(0 0 16px rgba(124, 58, 237, 0.42));
}

.watch-party-card__episode {
  margin: 8px 0 8px;
  color: #cfd9de;
  font-weight: 650;
}

.watch-party-create-modal__panel {
  display: flex;
  overflow: hidden;
  max-height: min(88vh, 820px);
  flex-direction: column;
  max-width: 620px;
}

.watch-party-create-modal__form {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  gap: 0;
  padding: 0;
}

.watch-party-create-modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px;
}

.watch-party-create-modal__footer {
  position: sticky;
  z-index: 2;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(167, 139, 250, 0.16);
  background:
    linear-gradient(to top, rgba(5, 5, 5, 0.98), rgba(5, 5, 5, 0.94)),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.12), transparent 34%);
  box-shadow: 0 -12px 26px rgba(0, 0, 0, 0.28);
}

.watch-party-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.watch-party-type-card {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #090909;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.watch-party-type-card:hover,
.watch-party-type-card--selected {
  border-color: rgba(167, 139, 250, 0.72);
  background: rgba(124, 58, 237, 0.14);
}

.watch-party-type-card--disabled,
.watch-party-type-card--disabled:hover {
  cursor: not-allowed;
  opacity: 0.58;
  border-color: var(--border);
  background: #090909;
  color: var(--muted-foreground, inherit);
}

.watch-party-type-card--disabled .watch-party-type-card__icon {
  color: var(--muted-foreground, #a1a1aa);
  background: rgba(255, 255, 255, 0.04);
}

.watch-party-type-card__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.watch-party-type-card__badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface, rgba(255, 255, 255, 0.06));
  color: var(--muted-foreground, #a1a1aa);
}

.watch-party-type-card__icon {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  background: rgba(124, 58, 237, 0.16);
  color: #a78bfa;
}

.watch-party-type-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.watch-party-type-card__title {
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.15;
}

.watch-party-type-card__meta {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.25;
}

.watch-party-picker__episodes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.watch-party-picker__episodes[hidden] {
  display: none;
}

.watch-party-picker__search {
  margin-bottom: 2px;
}

.watch-party-picker__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
}

.watch-party-picker__episode {
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #090909;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.watch-party-picker__episode:hover,
.watch-party-picker__episode--selected {
  border-color: rgba(167, 139, 250, 0.72);
  background: rgba(124, 58, 237, 0.14);
}

.watch-party-picker__episode--general {
  border-style: dashed;
}

.watch-party-picker__thumb {
  flex: 0 0 74px;
  overflow: hidden;
  border-radius: 10px;
  background: #111;
  aspect-ratio: 16 / 9;
}

.watch-party-picker__thumb--general {
  display: grid;
  place-items: center;
  color: #a78bfa;
  font-size: 1.35rem;
  font-weight: 900;
}

.watch-party-picker__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.watch-party-picker__body {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
}

.watch-party-picker__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.watch-party-picker__meta {
  color: var(--muted-foreground);
  font-size: 0.8rem;
}

@media (max-width: 700px) {
  .watch-party-summary {
    margin-left: 12px;
    margin-right: 12px;
  }

  .watch-party-player,
  .watch-party-comments,
  .watch-party-tabs,
  .watch-party-main-comments {
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 18px;
  }

  .watch-party-card .space-card__link {
    align-items: stretch;
    flex-direction: column;
  }

  .watch-party-player__host-actions {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  .watch-party-player__host-actions .btn {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.76rem;
  }

  .watch-party-player--youtube .watch-party-player__screen {
    width: 110px !important;
    max-width: 35%;
  }

  .watch-party-player__screen--pip {
    max-width: 40% !important;
    max-height: 35% !important;
    min-width: 0;
    min-height: 0;
  }

  .watch-party-player__screen--pip-small { width: 160px !important; max-width: 160px !important; }
  .watch-party-player__screen--pip-medium { width: 200px !important; max-width: 200px !important; }

  .watch-party-player--youtube .watch-party-player__screen--pip-small { width: 160px !important; max-width: 160px !important; }
  .watch-party-player--youtube .watch-party-player__screen--pip-medium { width: 200px !important; max-width: 200px !important; }

  .watch-party-card__thumb {
    flex-basis: auto;
    width: 100%;
  }

  .watch-party-type-grid {
    grid-template-columns: 1fr;
  }

  .watch-party-picker__list {
    grid-template-columns: 1fr;
  }

  .watch-party-comments__form {
    position: fixed;
    z-index: 1040;
    right: 12px;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    align-items: center;
    flex-direction: row;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.92);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  }

  .watch-party-comments__form .btn {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
  }

  .watch-party-comment__handle {
    display: none;
  }

  .watch-party-tabs [data-watch-party-panel="comments"]:not([hidden]) {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .watch-party-tabs [data-watch-party-panel="comments"]:not([hidden]) .watch-party-comments__list {
    max-height: min(52dvh, 420px);
  }

  .watch-party-tabs #space-room-fragment {
    display: block;
    min-height: 0;
  }

  .watch-party-tabs .space-room {
    max-height: min(56dvh, 460px);
    min-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .watch-party-tabs .space-stage,
  .watch-party-tabs .space-listeners {
    padding-top: 14px;
    padding-bottom: 12px;
  }

  .watch-party-tabs .space-listeners {
    min-height: 0;
    padding-bottom: 86px;
  }

  .watch-party-tabs .space-participant-grid {
    gap: 14px 10px;
  }

  .watch-party-page .watch-party-tabs .space-controls {
    position: fixed;
    z-index: 1040;
    right: 12px;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    margin-top: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.92);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  }

  .watch-party-page .watch-party-tabs .space-controls {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .watch-party-page .watch-party-tabs .space-controls .space-controls__action-group {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    width: auto;
  }

  .watch-party-page .watch-party-tabs .space-controls:has([data-space-join-audio]:not([hidden])) .space-controls__action-group,
  .watch-party-page .watch-party-tabs .space-controls [data-space-join-audio]:not([hidden]) {
    width: 100%;
  }

  .watch-party-page .watch-party-tabs .space-controls .space-mic-button,
  .watch-party-page .watch-party-tabs .space-controls .space-reaction-trigger,
  .watch-party-page .watch-party-tabs .space-controls .space-volume__trigger,
  .watch-party-page .watch-party-tabs .space-controls .space-soundboard__trigger,
  .watch-party-page .watch-party-tabs .space-controls > [data-space-action="leave"] {
    flex: 0 0 auto;
    min-height: 38px;
    height: 38px;
  }

  .watch-party-page .watch-party-tabs .space-controls .space-mic-button {
    padding: 0 10px;
    font-size: 0.8rem;
  }

  .watch-party-page .watch-party-tabs .space-controls .space-reaction-trigger,
  .watch-party-page .watch-party-tabs .space-controls .space-volume__trigger,
  .watch-party-page .watch-party-tabs .space-controls .space-soundboard__trigger {
    width: 38px;
  }

  .watch-party-page .watch-party-tabs .space-controls > [data-space-action="leave"] {
    margin-left: 0;
    padding: 0 12px;
    font-size: 0.82rem;
  }

  .watch-party-page .watch-party-tabs {
    margin-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

}
/* ---- Password field (show/hide toggle) ---- */
.password-field {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field__input {
  flex: 1;
  padding-right: 44px;
}

.auth-card .stack > .label:has(+ .password-field) {
  color: rgba(231, 233, 234, 0.6);
}

.password-field__toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  transition: opacity 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-field__toggle:hover,
.password-field__toggle:focus {
  opacity: 1;
  outline: none;
}

.password-field__eye {
  display: block;
}

.password-field__slash {
  stroke: currentColor;
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
  transition: stroke-dashoffset 0.2s ease;
}

.password-field__toggle--visible .password-field__slash {
  stroke-dashoffset: 0;
}

.edit-profile-section-heading {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.edit-profile-notice {
  color: #1a8a3a;
  background: rgba(26, 138, 58, 0.1);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* ---- Account settings ---- */
.account-settings {
  max-width: 540px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
}

.account-settings__header {
  margin-bottom: 1.5rem;
}

.account-settings__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.account-settings__error {
  margin-bottom: 1rem;
}

.account-settings__notice {
  color: #1a8a3a;
  background: rgba(26, 138, 58, 0.1);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.account-settings__notice a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.account-settings__section {
  border-top: 1px solid var(--border, var(--border));
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

.account-settings__section:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.account-settings__section-heading {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.settings-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  margin: -8px 0 0;
  color: var(--foreground);
  text-align: left;
}

.settings-section__header:hover {
  background: var(--surface-hover);
}

.settings-section__header .settings-section__title {
  margin: 0;
}

.settings-section__chevron {
  transition: transform 0.25s ease;
  color: var(--muted-foreground);
  flex-shrink: 0;
  margin-left: 12px;
}

.settings-section--open .settings-section__chevron {
  transform: rotate(180deg);
}

.settings-section__body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
}

.settings-section--open .settings-section__body {
  max-height: 3000px;
  opacity: 1;
  margin-top: 0.75rem;
}

.account-settings__form {
  margin-top: 1rem;
}

.account-settings__form.stack > .btn-block {
  margin-top: 1rem;
}

.account-settings__dm-privacy-label {
  margin-top: 1rem;
}

.appearance-themes {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.appearance-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.account-music-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.account-music-tabs__tab {
  flex: 1;
  padding: 12px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.account-music-tabs__tab:hover,
.account-music-tabs__tab:focus-visible {
  color: var(--foreground);
  outline: none;
}

.account-music-tabs__tab--active {
  color: var(--foreground);
  border-bottom-color: var(--accent, #ffd400);
}

.account-music-tabs__tab--disabled,
.account-music-tabs__tab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.account-music-tabs__tab--disabled:hover,
.account-music-tabs__tab--disabled:focus-visible,
.account-music-tabs__tab:disabled:hover,
.account-music-tabs__tab:disabled:focus-visible {
  color: var(--muted-foreground);
}

.account-music-panel {
  margin-bottom: 20px;
}

.account-music-panel[hidden] {
  display: none !important;
}

.account-settings__profile-song-block {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.account-settings__profile-song-block .account-settings__subsection-heading {
  margin-top: 0;
}

.account-settings__music-heading {
  margin-top: 0;
}

.account-settings__profile-song-display {
  margin-bottom: 16px;
}

.account-settings__profile-song-display .profile-song-placeholder,
.account-settings__profile-song-display .profile-song-card {
  margin: 0;
  width: 100%;
}

.account-settings__profile-song-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.account-settings__profile-song-actions .btn {
  flex: 1 1 0;
  min-width: 0;
}

.account-settings__profile-song-actions [data-account-profile-song-remove] {
  border-style: dashed;
  border-width: 2px;
}

.account-settings__profile-song-display--modal {
  margin-top: 0.75rem;
}

.account-settings__profile-song-display--modal .profile-song-card {
  margin: 0;
  width: 100%;
}

.sleeper-compose-modal__body:not(.sleeper-compose-modal__body--has-selection) [data-account-profile-song-save] {
  display: none !important;
}

.account-music-connect-section {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

.apple-music-connect {
  margin-top: 0.75rem;
}

.apple-music-connect__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.75rem;
}

.apple-music-connect__label {
  font-weight: 600;
}

.apple-music-connect__status--connected {
  color: #1a8a3a;
}

.apple-music-connect__status--disconnected,
.spotify-connect__status--disconnected {
  color: var(--muted-foreground);
}

.apple-music-connect__actions,
.spotify-connect__actions {
  display: block;
  width: 100%;
}

.music-connect-toggle {
  width: 100%;
}

.music-connect-coming-soon {
  border-style: dashed;
}

.music-connect-toggle--disconnect,
.music-connect-toggle[data-connected="true"] {
  border: 2px dashed #e55353;
  background: transparent;
  color: #e55353;
}

.music-connect-toggle--disconnect:hover,
.music-connect-toggle--disconnect:focus-visible,
.music-connect-toggle[data-connected="true"]:hover,
.music-connect-toggle[data-connected="true"]:focus-visible {
  background: rgba(229, 83, 83, 0.08);
  border-color: #f87171;
  color: #f87171;
  outline: none;
}

.spotify-connect {
  margin-top: 0.75rem;
}

.spotify-connect__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.75rem;
}

.spotify-connect__label {
  font-weight: 600;
}

.spotify-connect__status--connected {
  color: #1a8a3a;
}

.spotify-connect__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-song-card__badge--spotify {
  color: #1db954;
}

.account-settings__subsection-heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
}

.account-settings__subsection {
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.account-settings__subsection:first-child {
  padding-top: 0;
  border-top: 0;
}

.account-settings__subsection:first-child .account-settings__subsection-heading {
  margin-top: 0;
}

.account-settings__profile-song-block.is-locked .account-settings__profile-song-results,
.account-settings__profile-song-block.is-locked .account-settings__profile-song-preview,
.account-settings__profile-song-block.is-locked [data-profile-song-save] {
  opacity: 0.55;
  pointer-events: none;
}

.account-settings__profile-song-gate {
  margin: 0.5rem 0 1rem;
}

.account-settings__profile-song-empty {
  margin: 0.5rem 0 1rem;
}

.account-settings__profile-song-current {
  margin: 0.75rem 0 1rem;
}

.account-settings__profile-song-current .profile-song-card {
  margin: 0 0 0.75rem;
}

.account-settings__profile-song-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0.75rem 0;
  max-height: 320px;
  overflow: auto;
}

.account-settings__profile-song-result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px;
  border: 1px solid var(--border, var(--border));
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.account-settings__profile-song-result:hover,
.account-settings__profile-song-result:focus-visible {
  border-color: var(--accent);
}

.account-settings__profile-song-artwork {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 48px;
  background: var(--border, #333);
}

.account-settings__profile-song-artwork--empty {
  display: block;
}

.account-settings__profile-song-result-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-settings__profile-song-result-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-settings__profile-song-preview {
  margin: 0.75rem 0;
}

.account-settings__profile-song-preview-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border, var(--border));
  border-radius: 10px;
}

.account-settings__profile-song-preview-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Blocked accounts list */

.blocked-accounts-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.blocked-accounts-list__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}

.blocked-accounts-list__item:last-child {
  border-bottom: 0;
}

.blocked-accounts-list__avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent, #7c3aed);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

.blocked-accounts-list__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.blocked-accounts-list__name {
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blocked-accounts-list__handle {
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blocked-accounts-list__unblock {
  flex-shrink: 0;
  margin-left: auto;
}

/* Muted accounts list */

.muted-accounts-list__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}

.muted-accounts-list__item:last-child {
  border-bottom: 0;
}

.muted-accounts-list__avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent, #7c3aed);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

.muted-accounts-list__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.muted-accounts-list__name {
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muted-accounts-list__handle {
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muted-accounts-list__unmute {
  flex-shrink: 0;
  margin-left: auto;
}

/* Muted words list */

.muted-words-page {
  padding: 0 1rem 1.5rem;
}

.muted-words-add {
  padding: 1.25rem 0 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
}

.muted-words-add__label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.muted-words-add__row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.muted-words-add__input {
  flex: 1;
  min-width: 0;
}

.muted-words-add__input.input {
  width: auto;
}

.muted-words-add__submit {
  flex-shrink: 0;
  align-self: stretch;
}

.muted-words-add__hint {
  margin: 0.5rem 0 0;
}

.muted-words-add__error {
  margin: 0.5rem 0 0;
  color: var(--danger, #b91c1c);
  font-size: 0.875rem;
}

.muted-words-list__empty {
  padding: 1.5rem 0;
}

.muted-words-list__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}

.muted-words-list__item:last-child {
  border-bottom: 0;
}

.muted-words-list__word {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muted-words-list__unmute {
  flex-shrink: 0;
  margin-left: auto;
}

/* Password strength meter */

.pw-strength {
  margin-top: 6px;
}

.pw-strength[hidden] {
  display: none !important;
}

.pw-strength__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pw-strength__bar {
  display: flex;
  gap: 4px;
  flex: 1;
  max-width: 200px;
}

.pw-strength__seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.2s;
}

.pw-strength--weak .pw-strength__seg--active {
  background: #f4212e;
}

.pw-strength--medium .pw-strength__seg--active {
  background: #ffd400;
}

.pw-strength--strong .pw-strength__seg--active {
  background: #acd628;
}

.pw-strength--very-strong .pw-strength__seg--active {
  background: #00ba7c;
}

.pw-strength__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.pw-strength--weak .pw-strength__label {
  color: #f4212e;
}

.pw-strength--medium .pw-strength__label {
  color: #ffd400;
}

.pw-strength--strong .pw-strength__label {
  color: #acd628;
}

.pw-strength--very-strong .pw-strength__label {
  color: #00ba7c;
}

.pw-strength__checklist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  font-size: 0.78rem;
  color: var(--muted-foreground);
}

.pw-strength__checklist li::before {
  content: "\2013\00a0";
}

.pw-strength__checklist li.pw-strength__rule--met {
  color: #00ba7c;
}

.pw-strength__checklist li.pw-strength__rule--met::before {
  content: "\2713\00a0";
}

.pw-match {
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 600;
}

.auth-card .stack > .pw-match {
  margin-top: -6px;
}

.auth-card .stack > .pw-strength {
  margin-top: -6px;
}

.pw-match[hidden] {
  display: none !important;
}

.pw-match--ok {
  color: #00ba7c;
}

.pw-match--bad {
  color: #f4212e;
}

/* Moderation */
.tweet__moderation-notice {
  padding: 4px 0 2px;
}
.tweet__moderation-badge {
  display: inline-block;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.tweet__moderation-badge--pending {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.3);
}
.tweet__moderation-badge--rejected {
  background: rgba(244, 67, 54, 0.15);
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
}
.tweet__edited-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 4px;
}
.tweet__edit-textarea {
  width: 100%;
  min-height: 80px;
  background: var(--bg);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  font-size: 1rem;
  resize: vertical;
  box-sizing: border-box;
  margin-top: 4px;
}
.tweet__edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.tweet__edit-error {
  font-size: 0.8rem;
  color: #f44336;
  margin-bottom: 6px;
}
.admin-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #ffd400;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  margin-left: 6px;
}
.admin-table__cell--wide {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-table__cell--nowrap {
  white-space: nowrap;
}

/* Moderation review modal */
.mod-review-row {
  cursor: pointer;
}
.mod-review-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.mod-review-panel {
  max-width: 480px;
}
.mod-review__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.mod-review__name {
  font-weight: 700;
  font-size: 1rem;
}
.mod-review__handle {
  font-size: 0.9rem;
}
.mod-review__body {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  margin-bottom: 12px;
  max-height: 300px;
  overflow-y: auto;
}
.mod-review__meta {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.mod-review__actions {
  flex-wrap: wrap;
  gap: 8px;
}
.mod-review__confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.mod-post-link {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 600;
}

.mod-post-link:hover {
  color: var(--accent-hover);
}

.mod-reports-filter .input {
  width: auto;
  min-width: 180px;
}

.mod-report-post {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mod-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.report-category-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.report-category-badge--low {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.report-category-badge--medium {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.report-category-badge--high {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

.report-category-badge--critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.mod-word-form {
  display: grid;
  gap: 12px;
}

.mod-word-form .label {
  margin: 0;
}

.mod-word-dialog__error {
  margin: 0 0 12px;
}

.mod-ban-dialog__empty {
  margin: 0 0 12px;
}

.mod-ban-dialog {
  max-width: 480px;
}

.mod-ban-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mod-ban-dialog__search {
  width: 100%;
}

.mod-ban-user-list {
  display: flex;
  flex-direction: column;
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}

.mod-ban-user-list__empty {
  margin: 0;
  padding: 16px;
  text-align: center;
}

.mod-ban-user-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.mod-ban-user-option + .mod-ban-user-option {
  border-top: 1px solid var(--border);
}

.mod-ban-user-option:hover {
  background: var(--surface-hover);
}

.mod-ban-user-option.is-selected {
  background: rgba(29, 155, 240, 0.12);
}

.mod-ban-user-option[hidden] {
  display: none;
}

.mod-ban-user-option__avatar {
  flex-shrink: 0;
  line-height: 0;
}

.mod-ban-user-option__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mod-ban-user-option__name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mod-ban-user-option__handle {
  font-size: 0.9rem;
}

.mod-word-form code {
  background: var(--surface-hover);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Download Clip button */
.btn-danger {
  background: #e0245e;
  color: #fff;
}
.btn-danger:hover { filter: brightness(0.88); }
.btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-danger.is-loading:disabled { opacity: 1; cursor: wait; filter: none; }

/* Clip buffer controls */
.clip-buffer-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0 2px;
}
.clip-buffer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--muted-foreground);
}
.clip-buffer-row__label { flex-shrink: 0; }
.clip-buffer-btn {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #3d4144;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.clip-buffer-btn:hover { background: rgba(255,255,255,0.08); }
.clip-buffer-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
/* --- Landing page --- */
.app--landing {
  overflow-x: hidden;
}

.shell--landing {
  display: block;
  max-width: 1140px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 16px 96px;
  box-sizing: border-box;
}

.landing-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -16px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(47, 51, 54, 0.85);
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
}

.landing-header__brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.landing-header__logo {
  display: block;
  width: auto;
  height: 34px;
  filter: var(--logo-invert);
}

.landing-header__nav {
  display: none;
  align-items: center;
  gap: 20px;
}

.landing-header__link {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}

.landing-header__link:hover {
  color: var(--accent);
}

.landing-header__link--active {
  color: var(--accent);
}

.landing-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.landing-main {
  width: 100%;
  min-width: 0;
}

.landing-page {
  position: relative;
  width: 100%;
  min-width: 0;
}

.landing-page > :not(.landing-page__glows) {
  position: relative;
  z-index: 1;
}

.landing-page__glows {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.landing-page__glow {
  position: absolute;
  width: min(520px, 62vw);
  height: min(520px, 62vw);
}

.landing-page__glow--left {
  left: 0;
  bottom: 0;
  transform: translate(-32%, 38%);
  background: radial-gradient(circle, rgba(249, 24, 128, 0.16) 0%, transparent 68%);
}

.landing-page__glow--right {
  right: 0;
  bottom: 0;
  transform: translate(32%, 38%);
  background: radial-gradient(circle, rgba(124, 58, 237, 0.34) 0%, transparent 68%);
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin-top: 20px;
}

.landing-hero__content {
  max-width: 760px;
}

.landing-hero__stream {
  position: relative;
  min-height: 320px;
  max-height: 46vh;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.landing-hero__stream-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  animation: landing-hero-stream 36s linear infinite;
  will-change: transform;
}

.landing-hero-tweet {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #050505;
  flex-shrink: 0;
}

.landing-hero-tweet__avatar {
  flex: 0 0 auto;
}

.landing-hero-tweet__body {
  min-width: 0;
  flex: 1;
}

.landing-hero-tweet__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
  margin-bottom: 4px;
  line-height: 1.25;
}

.landing-hero-tweet__name {
  font-weight: 700;
  font-size: 0.92rem;
}

.landing-hero-tweet__meta {
  font-size: 0.82rem;
}

.landing-hero-tweet__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--foreground);
}

@keyframes landing-hero-stream {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.landing-premium-section {
  margin-top: 56px;
}

.landing-premium-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  margin: 0;
  padding: 36px 28px;
  border-radius: 24px;
}

.landing-premium-card__intro {
  min-width: 0;
}

.landing-premium-tier-grid {
  width: 100%;
  margin: 0;
}

.landing-premium-tier-grid .premium-tier__head {
  margin-bottom: 0;
}

.landing-premium-tier-grid .premium-tier__summary {
  min-height: 0;
}

.landing-premium-tier-grid .premium-tier__features {
  margin-top: 12px;
}

.landing-premium-tier-grid .premium-tier--featured {
  border-color: var(--border);
  background: var(--surface-hover);
  box-shadow: none;
}

.landing-premium-hero__title {
  margin: 0 0 10px;
}

.landing-premium-hero__actions {
  margin-top: 20px;
}

.landing-premium-hero__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 20px;
  background: rgba(124, 58, 237, 0.08);
  text-align: center;
}

.landing-premium-hero__badge {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.landing-premium-hero__price-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.landing-premium-hero__price-value {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.landing-premium-hero__price-period {
  font-size: 1rem;
  font-weight: 600;
}

.landing-premium-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 4px;
}

.landing-premium-grid .landing-feature-card h3 {
  margin: 0 0 8px;
  font-size: 1.12rem;
}

.landing-hero__title {
  max-width: 720px;
  font-size: clamp(1.95rem, 5.8vw, 4.1rem);
}

.landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.landing-hero__actions .btn {
  min-height: 52px;
  padding: 14px 32px;
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.landing-hero__actions .btn:active {
  transform: translateY(1px);
}

.landing-hero__actions .btn-primary {
  border-color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 12px 28px rgba(255, 255, 255, 0.16),
    0 4px 12px rgba(0, 0, 0, 0.35);
}

.landing-hero__actions .btn-primary:hover {
  filter: none;
  background: #f3f3f3;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 16px 34px rgba(255, 255, 255, 0.22),
    0 6px 16px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.landing-hero__actions .btn-outline {
  border-width: 2px;
  border-color: var(--foreground);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.landing-hero__actions .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  transform: translateY(-1px);
}

.landing-section {
  margin-top: 56px;
}

.landing-section__head {
  max-width: 640px;
  margin-bottom: 22px;
}

.landing-section__head--peek {
  max-width: none;
}

.landing-section__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.landing-section__head-row .premium-note__eyebrow {
  margin-bottom: 0;
}

.landing-section__head--live .widget__title--live {
  margin-bottom: 10px;
}

.landing-section__head--catalog-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 24px;
  align-items: center;
  max-width: none;
  margin-bottom: 32px;
}

.landing-section__head-main {
  min-width: 0;
}

.landing-section__head-stats.landing-search-showcase__stats {
  margin-bottom: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.landing-section__title {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.landing-section__copy {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
}

.landing-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.landing-preview {
  position: relative;
}

.landing-preview__badge {
  display: inline-block;
  flex-shrink: 0;
  margin-bottom: 0;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #0a0a0a;
}

.landing-preview__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  box-shadow:
    0 0 0 1px rgba(29, 155, 240, 0.08) inset,
    0 18px 48px rgba(0, 0, 0, 0.45);
}

.landing-preview__frame--app {
  height: min(570px, 68vh);
  min-height: 470px;
}

.landing-preview__frame--hero {
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

.landing-search-showcase {
  position: relative;
}

.landing-catalog-search-showcase {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.landing-catalog-search-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.landing-catalog-search-split__search,
.landing-catalog-search-split__catalog {
  min-width: 0;
}

.landing-catalog-search-split__search .landing-search-showcase__panel {
  height: 100%;
  box-sizing: border-box;
}

.landing-catalog-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.landing-catalog-preview__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 20px;
  pointer-events: auto;
}

.landing-catalog-preview__head,
.landing-search-showcase__head {
  margin-bottom: 20px;
}

.landing-catalog-preview__head .premium-note__eyebrow,
.landing-search-showcase__head .premium-note__eyebrow {
  margin-bottom: 6px;
}

.landing-catalog-preview__copy,
.landing-search-showcase__copy {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.landing-catalog-preview__tabs {
  margin-bottom: 12px;
}

.landing-catalog-preview__tabs .tabs__link {
  cursor: pointer;
  border: 0;
  background: transparent;
  font: inherit;
}

.landing-catalog-preview__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.landing-catalog-preview__row-tease {
  position: relative;
  margin-top: 10px;
  max-height: 168px;
  overflow: hidden;
}

.landing-catalog-preview__row-tease-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-catalog-preview__row-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 58%, rgba(0, 0, 0, 0.82) 100%);
  pointer-events: none;
}

.landing-catalog-preview__page .catalog-episode-card__title-date {
  display: none;
}

.landing-catalog-preview__page {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.landing-catalog-preview__page .catalog-month-section {
  margin: 0;
}

.landing-catalog-preview__page .catalog-month-header {
  margin-bottom: 10px;
}

.landing-catalog-preview__page .catalog-episode-month {
  font-size: 1rem;
  margin: 0;
}

.landing-catalog-preview__page .catalog-month-row {
  display: flex;
  gap: 10px;
  overflow: hidden;
}

.landing-catalog-preview__page .catalog-episode-card-wrap {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

.landing-catalog-preview__page .catalog-episode-card__title-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.28;
}

.landing-catalog-preview__meta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.landing-search-showcase__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.landing-search-stat {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(29, 155, 240, 0.14), transparent 42%),
    #050505;
}

.landing-search-stat--premium {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.landing-search-stat__content {
  min-width: 0;
  flex: 1;
}

.landing-search-stat__badge {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

.landing-search-stat__value {
  display: block;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.landing-search-stat__label {
  display: block;
  margin-top: 6px;
  font-size: 0.88rem;
  line-height: 1.35;
}

.landing-search-showcase__panel {
  pointer-events: none;
  padding: 18px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  box-shadow:
    0 0 0 1px rgba(29, 155, 240, 0.08) inset,
    0 18px 48px rgba(0, 0, 0, 0.45);
}

.landing-search-showcase__form .search-page__submit {
  pointer-events: none;
}

.landing-search-showcase__results {
  margin-top: 4px;
}

.landing-search-showcase__hits {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.landing-search-hit {
  margin-bottom: 0;
}

.landing-search-showcase__hit-tease {
  position: relative;
  margin-top: 0;
  max-height: 88px;
  overflow: hidden;
}

.landing-search-showcase__hit-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 42%, #000 100%);
  pointer-events: none;
}

.landing-section__copy a.auth-card__link {
  text-decoration: underline;
}

.landing-episode-wrap {
  display: grid;
  gap: 16px;
}

.landing-episode-wrap .landing-episode-widget {
  margin: 0;
}

.landing-episode-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.landing-preview__shell {
  display: grid;
  grid-template-columns: minmax(118px, 1.6fr) minmax(0, 5fr) minmax(0, 3fr);
  height: 100%;
  min-height: 0;
  background: var(--bg);
}

.landing-preview__shell:not(.landing-preview__shell--compact) {
  grid-template-columns: minmax(118px, 1.6fr) minmax(0, 5fr) minmax(0, 3fr);
}

.landing-preview__shell--compact {
  grid-template-columns: 48px minmax(0, 1fr) 160px;
  min-height: 280px;
}

.landing-preview__mobile-top,
.landing-preview__mobile-footer {
  display: none;
}

.landing-preview__sidebar-nav {
  padding: 10px 8px 12px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.landing-preview__sidebar-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 0 6px;
}

.landing-preview__sidebar-brand-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: var(--logo-invert);
}

.landing-preview__sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.landing-preview__sidebar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 999px;
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

.landing-preview__sidebar-link--active {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.landing-preview__sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.landing-preview__sidebar-icon .nav__premium-badge {
  width: 16px;
  height: 16px;
}

.landing-preview__sidebar-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.landing-preview__sidebar-post {
  align-self: stretch;
  margin-top: 8px;
  padding: 7px 10px;
  font-size: 0.72rem;
}

.landing-preview__sidebar-user {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.landing-preview__sidebar-user .nav-user__summary-inner {
  gap: 8px;
  padding: 6px 8px;
}

.landing-preview__sidebar-user .avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 0.72rem;
}

.landing-preview__sidebar-user .nav-user__name {
  font-size: 0.72rem;
  font-weight: 700;
}

.landing-preview__sidebar-user .nav-user__handle {
  font-size: 0.65rem;
}

.landing-preview__nav {
  padding: 12px 8px;
  border-right: 1px solid var(--border);
  background: var(--bg);
}

.landing-preview__brand {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.landing-preview__brand-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: var(--logo-invert);
}

.landing-preview__nav-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.landing-preview__nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: var(--foreground);
}

.landing-preview__nav-icon--active {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.landing-preview__nav-icon .nav__premium-badge {
  width: 20px;
  height: 20px;
}

.landing-preview__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
}

.landing-preview__tabs {
  flex-shrink: 0;
  pointer-events: none;
  position: relative;
  top: auto;
}

.landing-preview__tabs .tabs__link {
  padding: 10px 8px;
  font-size: 0.78rem;
}

.landing-preview__composer {
  flex-shrink: 0;
  padding: 10px 12px;
  gap: 8px;
  pointer-events: none;
}

.landing-preview__composer .tweet__avatar .avatar {
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
}

.landing-preview__composer .textarea {
  min-height: 34px;
  font-size: 0.82rem;
  line-height: 1.35;
  resize: none;
}

.landing-preview__composer .composer__toolbar {
  margin-top: 4px;
}

.landing-preview__composer .composer__media-btn {
  width: 28px;
  height: 28px;
}

.landing-preview__composer .composer__media-btn svg {
  width: 14px;
  height: 14px;
}

.landing-preview__composer .composer__gif-label {
  font-size: 0.62rem;
}

.landing-preview__composer .btn-primary {
  padding: 6px 14px;
  font-size: 0.78rem;
}

.landing-preview__feed {
  min-width: 0;
  max-width: 100%;
}

.landing-preview__feed-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
  border-right: 0;
}

.landing-preview__shell--compact .landing-preview__feed {
  border-right: 1px solid var(--border);
  pointer-events: none;
  overflow: hidden;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__feed .tweet {
  padding: 10px 12px;
  font-size: 0.82rem;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__feed .tweet__avatar .avatar {
  width: 36px;
  height: 36px;
  font-size: 0.85rem;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__feed .tweet__name,
.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__feed .tweet__handle,
.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__feed .tweet__time {
  font-size: 0.82rem;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__feed .tweet__text {
  font-size: 0.84rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__feed .tweet__bar {
  margin-top: 6px;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__feed .tweet__bar-icon svg {
  width: 18px;
  height: 18px;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__feed .tweet__bar-count {
  font-size: 0.78rem;
}

.landing-preview__feed .tweet {
  padding: 12px 14px;
  font-size: 0.88rem;
}

.landing-preview__feed .tweet__text {
  font-size: 0.92rem;
  line-height: 1.35;
}

.landing-preview__tweet-slot {
  display: none;
}

.landing-preview__tweet-slot--active {
  display: block;
  animation: landing-tweet-in 0.45s ease;
}

.landing-preview__sidebar {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  overflow: hidden;
  min-width: 0;
}

.landing-preview__sidebar-right {
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
}

.landing-preview__search.widget {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  position: static;
}

.landing-preview__search .search-pill-field {
  min-height: 34px;
}

.landing-preview__search .search-pill-field__icon {
  left: 10px;
}

.landing-preview__search .search-pill-field__icon svg {
  width: 14px;
  height: 14px;
}

.landing-preview__search .search-pill-form__input {
  padding: 8px 12px 8px 34px;
  font-size: 0.78rem;
}

.landing-preview__spacer {
  min-width: 0;
  background: var(--bg);
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__sidebar .widget {
  padding: 12px 14px;
  font-size: 0.82rem;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__sidebar .widget__title {
  font-size: 0.82rem;
  margin-bottom: 6px;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__sidebar .widget__title--live {
  font-size: 0.9rem;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__sidebar .whos-live-item__title {
  font-size: 0.88rem;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__sidebar .whos-live-item__meta,
.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__sidebar .whos-live-item__eyebrow {
  font-size: 0.72rem;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__sidebar .who-follow__name {
  font-size: 0.82rem;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__sidebar .who-follow__handle {
  font-size: 0.72rem;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__sidebar .who-follow__row {
  padding: 6px 0;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__sidebar .who-follow__follow {
  padding: 4px 10px;
  font-size: 0.72rem;
}

.landing-preview__shell:not(.landing-preview__shell--compact) .landing-preview__sidebar .who-follow__avatar .avatar {
  width: 32px;
  height: 32px;
  font-size: 0.78rem;
}

.landing-preview__sidebar .widget {
  padding: 10px 12px;
  font-size: 0.82rem;
}

.landing-preview__sidebar .widget__title {
  font-size: 0.78rem;
  margin-bottom: 6px;
}

.landing-preview__sidebar .who-follow__row {
  padding: 6px 0;
}

.landing-preview__sidebar .who-follow__follow {
  padding: 4px 10px;
  font-size: 0.72rem;
}

.landing-preview__sidebar--compact .widget--who-follow {
  display: none;
}

.landing-preview-whos-live {
  pointer-events: none;
  cursor: default;
}

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

.landing-feature-card h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

.landing-feature-grid .landing-feature-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-hover);
  border-color: var(--border);
  cursor: pointer;
  transition: border-color 0.35s ease;
}

.landing-feature-grid .landing-feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at top left, rgba(29, 155, 240, 0.18), transparent 38%),
    #050505;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

.landing-feature-grid .landing-feature-card:hover {
  border-color: rgba(29, 155, 240, 0.35);
}

.landing-feature-grid .landing-feature-card:hover::before {
  opacity: 1;
}

.landing-feature-grid .landing-feature-card > * {
  position: relative;
  z-index: 1;
}

.landing-live-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-live-list .space-card {
  margin: 0;
}

.landing-live-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
}

.landing-live-split__room,
.landing-live-split__list {
  min-width: 0;
}

.landing-live-split__room {
  overflow: hidden;
}

.landing-space-room-preview {
  pointer-events: none;
  overflow: hidden;
}

.landing-space-room-preview__shell {
  min-height: 0;
  overflow: hidden;
}

.landing-space-room-preview__room {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.landing-space-room-preview .space-room__hero {
  padding: 22px 22px 8px;
}

.landing-space-room-preview .space-room__hero h2 {
  font-size: clamp(1.35rem, 3vw, 2.1rem);
}

.landing-space-room-preview .space-stage {
  padding: 12px 22px 4px;
  flex-shrink: 0;
}

.landing-space-room-preview .space-listeners {
  padding: 12px 22px 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.landing-space-room-preview .space-reactions {
  display: none;
}

.landing-space-room-preview .space-reactions__float {
  bottom: 72px;
}

.landing-space-room-preview .space-controls {
  position: relative;
  bottom: auto;
  padding: 14px 22px 22px;
  pointer-events: auto;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: auto;
  flex-shrink: 0;
  z-index: 1;
}

.landing-space-room-preview .space-controls .btn {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
}

.landing-space-room-preview .space-participant-grid--speakers {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 14px 10px;
}

.landing-space-room-preview .space-participant-grid--listeners {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 12px 10px;
}

.landing-cta-band {
  margin-top: 56px;
  padding: 28px 24px;
  border-radius: 24px;
  text-align: left;
}

.landing-cta-band__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.landing-cta-band__content {
  max-width: 520px;
}

.landing-cta-band__stream.landing-hero__stream {
  min-height: 180px;
  max-height: 260px;
}

.landing-cta-band__title {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  letter-spacing: -0.04em;
}

.landing-cta-band__copy {
  margin: 0;
  line-height: 1.5;
}

.landing-cta-band__actions {
  margin-top: 20px;
}

.landing-cta-band__eyebrow {
  margin-bottom: 8px;
}

.landing-cta-band--footer {
  margin-top: 48px;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.landing-spaces-stream-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid #4b3c67;
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.34), transparent 34%),
    radial-gradient(circle at top right, rgba(249, 24, 128, 0.16), transparent 28%),
    #050505;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.1);
  flex-shrink: 0;
}

.landing-spaces-stream-card--ended {
  border-color: var(--border);
  background: #050505;
  box-shadow: none;
}

.landing-spaces-stream-card__host {
  flex: 0 0 auto;
}

.landing-spaces-stream-card__body {
  min-width: 0;
  flex: 1;
}

.landing-spaces-stream-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--foreground);
}

.landing-spaces-stream-card__title {
  margin: 0 0 4px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
}

.landing-spaces-stream-card__meta {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.3;
}

.landing-footer {
  margin-top: 32px;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.landing-footer__logo {
  height: 44px;
  width: auto;
  filter: var(--logo-invert);
}

.landing-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 18px;
}

.landing-footer__nav a {
  color: var(--foreground);
  font-size: 0.9rem;
  text-decoration: none;
}

.landing-footer__nav a:hover {
  color: var(--accent);
}

.landing-footer__copy {
  margin: 0;
}

.landing-mobile-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px);
}

@keyframes landing-tweet-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes landing-like-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.landing-preview [data-landing-like-bar].landing-like-pop {
  animation: landing-like-pop 0.35s ease;
}

@media (min-width: 900px) {
  .landing-header__nav {
    display: flex;
  }

  .landing-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .landing-cta-band__shell {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 28px;
  }
}

@media (max-width: 1100px) {
  .landing-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-preview__shell:not(.landing-preview__shell--compact) {
    grid-template-columns: minmax(108px, 1.6fr) minmax(0, 5fr) minmax(0, 3fr);
  }
}

@media (max-width: 900px) {
  .landing-catalog-search-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-section__head--catalog-search {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .landing-live-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-catalog-preview__page .catalog-month-row {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }

  .landing-catalog-preview__page .catalog-episode-card-wrap {
    flex: 0 0 min(62vw, 240px);
  }
}

@media (max-width: 700px) {
  .landing-search-showcase__stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-section__head--catalog-search .landing-section__head-stats {
    display: none;
  }

  .landing-catalog-preview__tabs.catalog-tabs {
    position: sticky;
    top: 57px;
    z-index: 8;
    margin: 0 -2px;
    padding: 0 2px 2px;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .landing-hero .premium-hero__actions.landing-hero__actions,
  .landing-hero .landing-hero__actions {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .landing-hero .premium-hero__actions.landing-hero__actions .btn,
  .landing-hero .landing-hero__actions .btn {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 14px 16px;
    font-size: 0.98rem;
  }

  .landing-hero__actions .btn {
    width: 100%;
    max-width: 320px;
  }

  .landing-cta-band__actions.landing-hero__actions {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .landing-cta-band__actions.landing-hero__actions .btn {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    min-height: 46px;
    padding: 12px 14px;
    font-size: 0.92rem;
  }

  .landing-space-room-preview .space-room {
    display: flex;
    flex-direction: column;
    flex: none;
    margin: 0;
    height: min(62dvh, 500px);
    max-height: min(62dvh, 500px);
    min-height: 0;
    overflow: hidden;
    border-radius: 22px;
  }

  .landing-space-room-preview__shell,
  .landing-space-room-preview__room {
    overflow: hidden;
    max-height: min(62dvh, 500px);
  }

  .landing-space-room-preview .space-room__hero {
    flex-shrink: 0;
    padding: 18px 16px 8px;
  }

  .landing-space-room-preview .space-stage {
    flex-shrink: 0;
    padding: 10px 16px 4px;
  }

  .landing-space-room-preview .space-listeners {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 10px 16px 12px;
  }

  .landing-space-room-preview .space-listeners::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(5, 5, 5, 0) 0%, rgba(5, 5, 5, 0.55) 45%, rgba(5, 5, 5, 0.98) 100%);
  }

  .landing-space-room-preview .space-controls {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    margin-top: 0;
    flex-shrink: 0;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.94);
    box-shadow: none;
    z-index: 1;
  }

  .landing-space-room-preview .space-participant-grid--speakers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .landing-space-room-preview .space-participant-grid--listeners {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 8px;
  }

  .landing-space-room-preview .space-participant--listener .avatar--md {
    width: 44px;
    height: 44px;
    font-size: 0.82rem;
  }

  .landing-space-room-preview .space-participant--listener .space-participant__name {
    font-size: 0.72rem;
  }

  .landing-space-room-preview .space-participant--listener .space-participant__handle {
    font-size: 0.66rem;
  }

  .landing-live-split__list {
    display: none;
  }

  .shell--landing {
    padding-bottom: 88px;
  }

  .landing-header__nav {
    display: none;
  }

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

  .landing-preview__shell:not(.landing-preview__shell--compact) {
    display: flex;
    flex-direction: column;
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
  }

  .landing-preview__shell--compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-preview__shell,
  .landing-preview__shell--compact {
    min-height: 260px;
  }

  .landing-preview__frame--app {
    height: min(620px, 72vh);
    min-height: 500px;
  }

  .landing-preview__sidebar,
  .landing-preview__sidebar-nav {
    display: none;
  }

  .landing-preview__nav {
    display: none;
  }

  .landing-preview__mobile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
    height: 48px;
    padding: 0 10px;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.94);
  }

  .landing-preview__mobile-top-menu .avatar {
    width: 32px;
    height: 32px;
    font-size: 0.78rem;
  }

  .landing-preview__mobile-top-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .landing-preview__mobile-top-brand img {
    display: block;
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    filter: var(--logo-invert);
  }

  .landing-preview__mobile-top-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
  }

  .landing-preview__mobile-top-notify,
  .landing-preview__mobile-top-compose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--foreground);
  }

  .landing-preview__mobile-top-notify .nav__icon svg,
  .landing-preview__mobile-top-compose .nav__icon svg {
    width: 20px;
    height: 20px;
  }

  .landing-preview__mobile-footer {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.94);
    padding: 4px 4px 6px;
  }

  .landing-preview__mobile-footer-link {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    color: var(--muted-foreground);
  }

  .landing-preview__mobile-footer-link--active {
    color: var(--foreground);
  }

  .landing-preview__mobile-footer-icon svg {
    width: 22px;
    height: 22px;
  }

  .landing-preview__main {
    flex: 1;
    min-height: 0;
    border-right: 0;
    justify-content: flex-start;
  }

  .landing-preview__composer {
    display: none;
    margin: 0;
    padding: 0;
    min-height: 0;
    height: 0;
    overflow: hidden;
  }

  .landing-preview__tabs.home-tabs {
    position: relative;
    top: auto;
    flex-shrink: 0;
    margin: 0;
    background: var(--bg);
  }

  .landing-preview__tabs.home-tabs .tabs__link {
    padding: 10px 8px;
  }

  .landing-preview__feed {
    border-right: 0;
  }

  .landing-mobile-cta {
    display: block;
  }

  .landing-hero__stream {
    min-height: 240px;
    max-height: 46vh;
  }

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

  .landing-hero {
    margin-top: 12px;
  }

  .landing-hero .premium-hero__copy {
    font-size: 0.96rem;
    line-height: 1.45;
  }

  .landing-section {
    margin-top: 40px;
  }

  .landing-cta-band {
    padding: 22px 18px;
  }

  .landing-cta-band__shell {
    justify-items: start;
  }

  .landing-cta-band__content,
  .landing-cta-band__stream.landing-hero__stream {
    width: 100%;
    max-width: 520px;
  }

  .landing-premium-card {
    padding: 28px 18px;
  }

  .landing-cta-band__stream.landing-hero__stream {
    min-height: 160px;
    max-height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-preview__tweet-slot--active {
    animation: none;
  }

  .landing-preview [data-landing-like-bar].landing-like-pop {
    animation: none;
  }

  .landing-hero__stream-track {
    animation: none;
  }

  .landing-feature-grid .landing-feature-card,
  .landing-feature-grid .landing-feature-card::before {
    transition: none;
  }
}

/* Pod Dictionary */
.pod-dictionary { padding: 0; }

.pod-dict-alpha-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  padding: 16px;
}
.pod-dict-alpha-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--foreground);
  transition: background 0.15s;
}
.pod-dict-alpha-card:hover { background: var(--surface-hover); }
.pod-dict-alpha-card__letter { font-size: 1.5rem; font-weight: 800; }
.pod-dict-alpha-card__count { font-size: 0.75rem; }

.pod-dict-leaderboard {
  padding: 16px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}
.pod-dict-leaderboard__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 12px;
}
.pod-dict-leaderboard__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pod-dict-leaderboard__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--foreground);
  transition: background 0.15s;
}
.pod-dict-leaderboard__row:hover { background: var(--surface-hover); }
.pod-dict-leaderboard__rank {
  width: 24px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted-foreground);
  flex-shrink: 0;
}
.pod-dict-leaderboard__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.pod-dict-leaderboard__contributor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.pod-dict-leaderboard__name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.9rem;
}
.pod-dict-leaderboard__count {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(29, 155, 240, 0.1);
  padding: 3px 10px;
  border-radius: 999px;
}

.pod-dict-letter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 5;
}
.pod-dict-letter-nav__btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--foreground);
  font-weight: 700;
  font-size: 0.8rem;
  border: 1px solid var(--border);
}
.pod-dict-letter-nav__btn:hover { background: var(--surface-hover); }
.pod-dict-letter-nav__btn--active { background: var(--accent); color: #fff; border-color: var(--accent); }

.pod-dict-letter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}
.pod-dict-letter-header__letter {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--accent);
  margin: 0;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 8px;
}

.pod-dict-word { padding: 12px 16px; border-bottom: 1px solid rgba(47,51,54,0.5); scroll-margin-top: 72px; }
.pod-dict-word:last-child { border-bottom: 0; }
.pod-dict-word__term { font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; }
.pod-dict-word__def { font-size: 0.9rem; line-height: 1.5; margin: 0 0 4px; }
.pod-dict-word__example { font-style: italic; color: var(--muted-foreground); font-size: 0.85rem; margin: 0; }

/* Dictionary compose / timeline embed */
.compose-modal__dict-preview { margin-top: 8px; }
.tweet__dict,
.tweet__dict:hover,
.tweet__dict:focus {
  display: block;
  position: relative;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.tweet__dict-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 4px;
}
.tweet__dict-term {
  display: block;
  margin-bottom: 4px;
}
.tweet__dict-def,
.tweet__dict-example {
  margin: 0;
}
.tweet__dict-def { margin-bottom: 4px; }
.tweet__dict-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.tweet__dict-remove:hover { background: rgba(0, 0, 0, 0.55); }
.composer-dict-modal__panel {
  width: min(480px, calc(100vw - 24px));
  max-height: min(72vh, 640px);
  display: flex;
  flex-direction: column;
}
.composer-dict-modal__body {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.composer-dict-modal__search {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--background);
  color: var(--foreground);
  font-size: 0.95rem;
}
.composer-dict-modal__status {
  margin: 10px 0 6px;
}
.composer-dict-modal__results {
  overflow: auto;
  min-height: 180px;
  max-height: 48vh;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.composer-dict-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--foreground);
  cursor: pointer;
}
.composer-dict-result:hover {
  border-color: var(--accent);
  background: var(--surface-hover, rgba(127, 127, 127, 0.08));
}
.composer-dict-result__term {
  font-size: 1rem;
  font-weight: 700;
}
.composer-dict-result__def {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.composer-dict-result__example {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.composer-dict-modal-open { overflow: hidden; }

.pod-dictionary__admin-btn {
  background: none;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 2px 6px;
  margin-top: 6px;
}
.pod-dictionary__admin-btn:hover { color: var(--foreground); }
.pod-dictionary__admin-btn--delete:hover { color: #ef4444; }

.pod-dict-submissions-section { border-top: 1px solid var(--border); margin-top: 16px; }
.pod-dict-submissions-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 16px;
}
.pod-dict-submissions-toggle:hover { text-decoration: underline; }
.pod-dict-submissions-toggle__chevron {
  transition: transform 0.2s;
}
.pod-dict-submissions-toggle--open .pod-dict-submissions-toggle__chevron {
  transform: rotate(180deg);
}
.pod-dict-submissions-list {
  padding: 0 16px 16px;
}

.pod-dict-submission {
  padding: 10px 12px;
  margin: 0 0 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  opacity: 0.9;
}
.pod-dict-submission:last-child { margin-bottom: 0; }
.pod-dict-submission__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(29,155,240,0.1);
  border-radius: 999px;
  padding: 2px 8px;
  margin-bottom: 6px;
}
.pod-dict-submission__word { font-weight: 700; font-size: 1rem; margin-bottom: 4px; color: var(--muted-foreground); }
.pod-dict-submission__def { font-size: 0.9rem; line-height: 1.4; margin-bottom: 4px; }
.pod-dict-submission__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.pod-dict-submission__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pod-dict-submission__votes {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pod-dict-submission__approve {
  flex-shrink: 0;
  margin-left: 8px;
}
.pod-dict-submission__admin-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.pod-dict-admin-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.pod-dict-admin-btn--approve {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}
.pod-dict-admin-btn--approve:hover {
  background: rgba(34, 197, 94, 0.3);
}
.pod-dict-admin-btn--deny {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.pod-dict-admin-btn--deny:hover {
  background: rgba(239, 68, 68, 0.3);
}
.pod-dict-vote-btn {
  background: none;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  padding: 4px;
}
.pod-dict-vote-btn:hover { color: var(--foreground); }
.pod-dict-vote-btn--up.pod-dict-vote-btn--active { color: #22c55e; }
.pod-dict-vote-btn--down.pod-dict-vote-btn--active { color: #ef4444; }
.pod-dict-submission__count { font-weight: 700; font-size: 0.9rem; min-width: 24px; text-align: center; }

.pod-dict-all-submissions {
  border-top: 1px solid var(--border);
  padding: 8px 16px;
}
.pod-dict-all-submissions__letter-heading {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--accent);
  padding: 12px 0 4px;
  border-bottom: 1px solid var(--accent);
  margin-bottom: 8px;
  margin-top: 8px;
}

.pod-dict-submit-section { padding: 16px; border-top: 1px solid var(--border); }
.pod-dict-submit-toggle { align-self: flex-start; }
.pod-dict-submit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.pod-dict-submit-form[hidden] {
  display: none;
}
.pod-dict-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #22c55e;
  color: #fff;
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 9999;
  animation: toastFade 2s ease forwards;
}
@keyframes toastFade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

/* Pod hub */
.pod-hub,
.dict-listing {
  padding: 16px 0;
}
.pod-hub__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--foreground);
  transition: background 0.15s;
  margin: 0 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  background: var(--surface);
}
a.pod-hub__card:hover {
  background: var(--surface-hover);
  text-decoration: none;
}
.pod-hub__card--soon {
  opacity: 0.5;
  cursor: default;
}
.pod-hub__icon {
  color: var(--accent);
  flex-shrink: 0;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pod-hub__info {
  flex: 1;
  min-width: 0;
}
.pod-hub__title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.pod-hub__desc {
  font-size: 0.85rem;
}
.pod-hub__arrow {
  flex-shrink: 0;
  color: var(--muted-foreground);
}
.pod-hub__badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
}

/* Podder of the Month */
.podder-header-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.podder-header-menu {
  margin-left: auto;
  overflow: visible;
}
.podder-header-menu .tweet__menu {
  right: 0;
  left: auto;
  z-index: 30;
}
.col-header:has(.podder-header-menu) {
  overflow: visible;
}
.podder-nominees {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 16px;
}
.podder-nominee-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: none;
  color: var(--foreground);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.podder-nominee-card:hover:not(:disabled) { border-color: var(--accent); background: var(--surface-hover); transform: translateY(-2px); }
.podder-nominee-card:disabled { opacity: 0.6; cursor: default; }
.podder-nominee-card--selected { border-color: #22c55e; background: rgba(34, 197, 94, 0.1); }
.podder-nominee-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}
.podder-nominee-card__avatar-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}
.podder-nominee-card__name { font-weight: 700; font-size: 0.95rem; }
.podder-nominee-card__handle { font-size: 0.8rem; }
.podder-nominee-card__check { color: #22c55e; font-size: 1.2rem; }

/* Results bars */
.podder-results { padding: 16px; border-top: 1px solid var(--border); }
.podder-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.podder-result-row__name { width: 80px; font-weight: 600; font-size: 0.9rem; }
.podder-result-row__bar {
  flex: 1;
  height: 20px;
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
}
.podder-result-row__fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  border-radius: 10px;
  transition: width 0.4s ease;
  min-width: 2px;
}
.podder-result-row__count { font-weight: 700; font-size: 0.85rem; width: 32px; text-align: right; }

/* Past winners */
.podder-past { padding: 16px; border-top: 1px solid var(--border); }
.podder-past-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(47,51,54,0.3);
}
.podder-past-row:last-child { border-bottom: 0; }
.podder-past-row__month { color: var(--muted-foreground); font-size: 0.9rem; }
.podder-past-row__winner { font-weight: 700; font-size: 0.95rem; }

/* Voted state */
.podder-voted {
  text-align: center;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.podder-voted__avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
}
.podder-voted__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  display: block;
}
.podder-voted__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 800;
  border: 0;
}
.podder-voted__text { font-size: 1.1rem; font-weight: 600; }
.podder-voted__nominee { color: var(--accent); }
.podder-voted .btn { margin-top: 4px; }
.podder-voted__check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
  border: 2px solid var(--surface, var(--background, #000));
  box-sizing: border-box;
}

/* No active round */
.podder-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted-foreground);
}
.podder-empty__icon { font-size: 3rem; margin-bottom: 12px; }

/* Timeline / compose Podder widget */
.tweet__podder,
.compose-modal__podder-preview .tweet__podder {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.compose-modal__podder-preview {
  margin-top: 8px;
}
.tweet__podder-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}
.tweet__podder-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.tweet__podder-month {
  font-size: 1.05rem;
  font-weight: 800;
}
.tweet__podder-carousel {
  position: relative;
  margin-bottom: 12px;
}
.tweet__podder-carousel-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.tweet__podder-carousel-page {
  display: contents;
}
.tweet__podder-carousel-btn {
  display: none;
}
.tweet__podder-nominee {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 12px;
  background: rgba(127, 127, 127, 0.08);
  text-align: center;
}
.tweet__podder-nominee__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.tweet__podder-nominee__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  border: 0;
}
.tweet__podder-nominee__name {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}
.tweet__podder-nominee__handle {
  font-size: 0.68rem;
  color: var(--muted-foreground);
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tweet__podder-cta,
.tweet__podder-cta:hover,
.tweet__podder-cta:focus {
  display: flex;
  width: 100%;
  justify-content: center;
  text-decoration: none;
}
.tweet__podder-closed {
  text-align: center;
  padding: 8px 0 0;
}
.tweet__podder-closed__label {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--muted-foreground);
}
.tweet__podder-closed__winner {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 800;
}
.tweet__podder-head--centered {
  align-items: center;
  text-align: center;
  margin-bottom: 16px;
}
.tweet__podder-vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  margin-bottom: 4px;
  padding: 8px 4px 4px;
}
.tweet__podder-vote__avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
}
.tweet__podder-vote__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  display: block;
}
.tweet__podder-vote__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  font-weight: 800;
  font-size: 1.75rem;
  border: 0;
}
.tweet__podder-vote__check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
  border: 2px solid var(--surface, var(--background, #000));
  box-sizing: border-box;
}
.tweet__podder-vote__text {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.tweet__podder-vote__nominee {
  color: var(--accent);
}
.tweet__podder-vote__meta {
  margin: -6px 0 0;
  font-size: 0.85rem;
  color: var(--muted-foreground);
}
.tweet__podder--vote .tweet__podder-cta {
  width: 100%;
  margin-top: 8px;
}
@media (max-width: 520px) {
  .tweet__podder-carousel-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
    gap: 8px;
  }
  .tweet__podder-carousel-track::-webkit-scrollbar {
    display: none;
  }
  .tweet__podder-carousel-page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 8px;
    flex: 0 0 88%;
    width: 88%;
    min-width: 88%;
    max-width: 88%;
    scroll-snap-align: start;
    box-sizing: border-box;
  }
  .tweet__podder-carousel[data-podder-page-count="1"] .tweet__podder-carousel-page {
    flex-basis: 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
  .tweet__podder-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }
  .tweet__podder-carousel-btn--prev {
    left: 4px;
  }
  .tweet__podder-carousel-btn--next {
    right: 4px;
  }
  .tweet__podder-carousel-btn[hidden],
  .tweet__podder-carousel-btn:disabled {
    opacity: 0.35;
    pointer-events: none;
  }
}

/* Admin open button */
.podder-admin { padding: 16px; border-bottom: 1px solid var(--border); }

/* Pod Seasons grid */
.pod-seasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px;
}
.pod-season-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 16px;
  text-decoration: none;
  color: var(--foreground);
  background: var(--surface);
  transition: background 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pod-season-card:hover { background: var(--surface-hover); transform: translateY(-2px); }
.pod-season-card__number { font-size: 1.2rem; font-weight: 800; }
.pod-season-card__range { font-size: 0.85rem; }
.pod-season-card__rating { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pod-season-card__score { font-size: 1.5rem; font-weight: 800; }
.pod-season-card__votes { font-size: 0.8rem; }

/* Rating colors */
.rating--green { color: #22c55e; }
.rating--orange { color: #f59e0b; }
.rating--red { color: #ef4444; }

/* Season summary */
.pod-season-summary {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
}
.pod-season-summary__score {
  font-size: 2.5rem;
  font-weight: 800;
  min-width: 72px;
}
.pod-season-summary__score--empty {
  color: var(--muted-foreground);
}
.pod-season-summary__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Episode list */
.pod-episode-list {
  display: flex;
  flex-direction: column;
}
.pod-episode-row {
  border-bottom: 1px solid var(--border);
}
.pod-episode-row:last-child { border-bottom: 0; }
.pod-episode-row__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 0;
  background: none;
  color: var(--foreground);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pod-episode-row__toggle:hover { background: var(--surface-hover); }
.pod-episode-row__number { font-weight: 700; width: 48px; flex-shrink: 0; color: var(--muted-foreground); }
.pod-episode-row__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
.pod-episode-row__title:hover { text-decoration: underline; }
.pod-episode-row__youtube { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.pod-episode-row__rating { font-size: 1.1rem; font-weight: 800; width: 36px; text-align: center; flex-shrink: 0; }
.pod-episode-row__votes { font-size: 0.8rem; width: 70px; text-align: right; flex-shrink: 0; }

/* Rating buttons */
.pod-episode-row__rate {
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 16px 12px;
}
.pod-episode-row__rate.is-open { display: flex; }
.pod-episode-row__rate--locked {
  padding: 0 16px 12px;
  font-size: 0.85rem;
}
.pod-rate-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: none;
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.pod-rate-btn:hover { background: var(--surface-hover); border-color: var(--accent); }
.pod-rate-btn:disabled { opacity: 0.5; cursor: default; }
.pod-rate-btn--selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.pod-episode-row__user-rating {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Newsletter listing */
.newsletter-listing {
  background: transparent;
}
.newsletter-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 16px;
  padding: 16px;
}
.newsletter-grid .newsletter-cover {
  display: block !important;
  width: 100% !important;
}
.newsletter-cover {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  text-decoration: none;
  color: var(--foreground);
  display: block;
}
.newsletter-cover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.newsletter-cover__img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}
.newsletter-cover__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: var(--surface);
}
.newsletter-cover__info {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}
.newsletter-cover__title { font-weight: 700; font-size: 0.95rem; }
.newsletter-cover__date { font-size: 0.8rem; color: var(--muted-foreground); margin-top: 2px; }
.newsletter-cover__badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
}
.newsletter-cover__badge--draft { background: rgba(239,68,68,0.15); color: #ef4444; }
.newsletter-cover__badge--published { background: rgba(34,197,94,0.15); color: #22c55e; }

/* Newsletter reader */
.newsletter-reader {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: #0a0a0a;
}
.newsletter-reader__header {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.newsletter-reader__back {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.newsletter-reader__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.newsletter-reader__page-indicator {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  flex-shrink: 0;
}
.newsletter-reader__manage-btn {
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}
.newsletter-reader__manage-btn:hover { background: var(--surface-hover); }
.newsletter-reader__viewport {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.newsletter-reader__book {
  margin: 0 auto;
  touch-action: none;
}
.newsletter-reader__viewport.is-zoomed {
  touch-action: none;
}
.newsletter-page {
  background: #fff;
  overflow: hidden;
}
.newsletter-page__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.newsletter-reader__empty {
  padding: 40px 20px;
  text-align: center;
}
.newsletter-reader__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  border: none;
  color: #fff;
  font-size: 2rem;
  padding: 20px 14px;
  cursor: pointer;
  z-index: 10;
  border-radius: 8px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.newsletter-reader__nav:hover { opacity: 1; background: rgba(0,0,0,0.8); }
.newsletter-reader__nav--prev { left: 12px; }
.newsletter-reader__nav--next { right: 12px; }
.newsletter-reader__nav[disabled] { opacity: 0.15; cursor: default; }
.newsletter-reader__thumbnails {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.newsletter-reader__thumbnails::-webkit-scrollbar { display: none; }
.newsletter-reader__thumb {
  width: 48px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.6;
}
.newsletter-reader__thumb--active {
  border-color: var(--accent);
  opacity: 1;
}

/* Newsletter admin management panel */
.newsletter-manage-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.newsletter-manage-panel[hidden] {
  display: none !important;
}
.newsletter-manage-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}
.newsletter-manage-panel__body {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
}
.newsletter-manage-panel__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.newsletter-manage-panel__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  flex: 1;
}
.newsletter-manage-panel__upload-btn {
  display: inline-block;
  margin-bottom: 12px;
  cursor: pointer;
}
.newsletter-manage-panel__pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.newsletter-manage-panel__page {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.newsletter-manage-panel__page img {
  width: 40px;
  height: 54px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.newsletter-manage-panel__page span {
  flex: 1;
  font-size: 0.85rem;
}
.newsletter-manage-panel__page-delete {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 0.8rem;
}

.photo-album-manage-panel {
  align-items: center;
  padding: 24px 16px;
  box-sizing: border-box;
  z-index: 2100;
}
.photo-album-delete-dialog {
  z-index: 2200;
}
.photo-album-manage-panel .photo-album-manage-panel__body {
  width: min(1100px, 100%);
  max-width: none;
  max-height: min(90vh, 860px);
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.photo-album-manage-panel__layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  align-items: stretch;
  flex: 1;
  min-height: 0;
  max-height: min(90vh, 860px);
}
.photo-album-manage-panel__sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  height: fit-content;
  max-height: min(90vh, 860px);
  overflow-y: auto;
}
.photo-album-manage-panel__sidebar-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.photo-album-manage-panel__sidebar-head .newsletter-manage-panel__title {
  margin: 0;
  flex: 1;
}
.photo-album-manage-panel__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.photo-album-manage-panel__form-status {
  margin: 0;
  min-height: 1.2em;
}
.photo-album-manage-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.photo-album-manage-panel__actions .btn {
  width: 100%;
  justify-content: center;
}
.photo-album-manage-panel__actions-divider {
  width: 100%;
  margin: 4px 0;
  border: none;
  border-top: 1px solid var(--border);
}
.photo-album-manage-panel__delete {
  border-style: dashed;
  color: color-mix(in srgb, #ef4444 65%, var(--muted-foreground));
  border-color: color-mix(in srgb, #ef4444 45%, var(--border));
}
.photo-album-manage-panel__delete:hover,
.photo-album-manage-panel__delete:focus-visible {
  color: color-mix(in srgb, #ef4444 80%, var(--foreground));
  border-color: color-mix(in srgb, #ef4444 60%, var(--border));
  background: color-mix(in srgb, #ef4444 8%, transparent);
}
.photo-album-manage-panel__photos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 0;
  min-height: 100%;
  max-height: 100%;
  padding: 20px;
  overflow: hidden;
  background: var(--bg-secondary, var(--surface));
  box-sizing: border-box;
}
.photo-album-manage-panel__photos-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.photo-album-manage-panel__photos-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  flex: 1;
}
.photo-album-manage-panel__publish {
  margin-left: auto;
  flex-shrink: 0;
  height: 36px;
  padding: 0 14px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 8px;
  box-sizing: border-box;
  background: color-mix(in srgb, #22c55e 16%, transparent);
  color: #4ade80;
  border-color: color-mix(in srgb, #22c55e 55%, var(--border));
}
.photo-album-manage-panel__publish:hover,
.photo-album-manage-panel__publish:focus-visible {
  background: color-mix(in srgb, #22c55e 24%, transparent);
  color: #86efac;
  border-color: #22c55e;
}
.photo-album-manage-panel__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--foreground);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-album-manage-panel__close:hover {
  background: var(--surface-hover, var(--surface));
}
.photo-album-manage-panel__upload-status {
  margin: 0 0 10px;
  min-height: 1.2em;
}
.photo-album-manage-photos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  overflow-y: hidden;
  flex: 1;
  min-height: 0;
  align-content: start;
}
.photo-album-manage-photos:has([data-photo-id]) {
  overflow-y: auto;
}
.photo-album-manage-photo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
}
.photo-album-manage-photo__thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
}
.photo-album-manage-photo__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-album-manage-photo__thumb--empty,
.photo-album-manage-photo__thumb--add {
  border: 2px dashed var(--border);
  background: transparent;
  opacity: 1;
}
.photo-album-manage-photo__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  opacity: 0.55;
}
.photo-album-manage-photo__thumb--empty svg {
  width: 28px;
  height: 28px;
}
.photo-album-manage-photo__thumb--add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: var(--muted-foreground);
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.photo-album-manage-photo__thumb--add:hover {
  border-color: var(--foreground);
  color: var(--foreground);
}
.photo-album-manage-photo__add-icon {
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
}
.photo-album-manage-photo__add-label {
  font-size: 0.8rem;
  font-weight: 600;
}
.photo-album-manage-photo__delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-album-manage-photo__delete:hover {
  background: rgba(239, 68, 68, 0.9);
}
.photo-album-manage-photo__caption {
  font-size: 0.8rem;
  padding: 8px 10px;
  min-height: 0;
  transition: border-color 0.45s ease, box-shadow 0.45s ease;
}
.photo-album-manage-photo__caption--ok {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #22c55e 35%, transparent);
  transition: none;
}
.photo-album-manage-photo__caption--error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #ef4444 35%, transparent);
  transition: none;
}
.photo-album-manage-photo--placeholder {
  pointer-events: none;
}
.photo-album-manage-photo--add {
  pointer-events: auto;
}
@media (max-width: 800px) {
  .photo-album-manage-panel__layout {
    grid-template-columns: 1fr;
    max-height: min(90vh, 860px);
    overflow-y: auto;
  }
  .photo-album-manage-panel__sidebar {
    height: auto;
    max-height: none;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .photo-album-manage-panel__photos {
    height: auto;
    min-height: 280px;
    max-height: none;
  }
}

/* Coming soon overlay */
.newsletter-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}
.newsletter-coming-soon__icon { font-size: 3rem; margin-bottom: 16px; }
.newsletter-coming-soon__title { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.newsletter-coming-soon__desc { color: var(--muted-foreground); font-size: 0.95rem; max-width: 400px; }

/* Poetography: create album dialog */
.photo-album-create-form__field {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.photo-album-create-form__field .tweet-edit__label {
  margin-bottom: 6px;
}
.photo-album-create-form .input {
  box-sizing: border-box;
  min-height: 44px;
}
.photo-album-create-form__date {
  cursor: pointer;
  color-scheme: dark light;
}
.photo-album-create-form__date::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
}
.photo-album-create-form__date::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
.photo-album-create-form__description {
  min-height: 88px;
  resize: vertical;
  line-height: 1.4;
}
.photo-album-create-form .error {
  margin: 0;
}

/* Poetography: album listing */
.photo-albums-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px;
}
.photo-album-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--foreground);
  transition: transform 0.15s, box-shadow 0.15s;
  display: block;
}
.photo-album-card:hover,
.photo-album-card:focus {
  text-decoration: none;
  color: var(--foreground);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.photo-album-card__cover { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.photo-album-card__cover--empty { display: flex; align-items: center; justify-content: center; background: var(--surface); font-size: 2rem; }
.photo-album-card__info { padding: 10px 12px; }
.photo-album-card__title { font-size: 0.9rem; display: block; text-decoration: none; }
.photo-album-card__meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.photo-album-card__meta {
  font-size: 0.8rem;
  min-width: 0;
  flex: 1;
}
.photo-album-card__meta-row .newsletter-cover__badge {
  margin-left: auto;
  flex-shrink: 0;
}

/* Poetography: single album view */
.photo-album-meta {
  padding: 0;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 1;
  min-width: 0;
  justify-content: flex-end;
}
.col-header .photo-album-meta {
  margin-left: auto;
}
.photo-album-description {
  padding: 8px 16px 0;
  font-size: 0.9rem;
}
.photo-album-empty {
  padding: 40px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.photo-album-empty__text {
  margin: 0;
}
.photo-album-empty__dropzone {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  max-width: 36rem;
  box-sizing: border-box;
  padding: 28px 20px;
  border: 2px dashed var(--border);
  border-radius: 18px;
  background: var(--bg-secondary, var(--surface));
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.photo-album-empty__dropzone:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}
.photo-album-empty__dropzone--active,
.photo-album-empty__dropzone:hover {
  border-color: #7c3aed;
  background: color-mix(in srgb, #7c3aed 8%, var(--bg-secondary, var(--surface)));
}
.photo-album-empty__dropzone-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: color-mix(in srgb, #7c3aed 14%, transparent);
  color: #a78bfa;
}
.photo-album-empty__dropzone-title {
  margin: 0;
  font-weight: 700;
}
.photo-album-empty__dropzone-copy {
  margin: 0;
  max-width: 28rem;
}
.photo-album-empty__queue {
  width: 100%;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.photo-album-empty__queue[hidden] {
  display: none !important;
}
.photo-album-empty__queue-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.photo-album-empty__queue-summary {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.photo-album-empty__queue-toolbar .btn[hidden] {
  display: none !important;
}
.photo-album-empty__queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}
.photo-album-empty__queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.photo-album-empty__queue-item--uploading {
  border-color: color-mix(in srgb, var(--accent, #7c3aed) 45%, var(--border));
}
.photo-album-empty__queue-item--done {
  border-color: color-mix(in srgb, #22c55e 40%, var(--border));
}
.photo-album-empty__queue-item--error {
  border-color: color-mix(in srgb, #ef4444 40%, var(--border));
}
.photo-album-empty__queue-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
}
.photo-album-empty__queue-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.photo-album-empty__queue-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btn-spin 0.65s linear infinite;
}
.photo-album-empty__queue-status {
  white-space: nowrap;
}

/* Poetography: photo gallery masonry columns */
.photo-gallery {
  column-width: 250px;
  column-gap: 8px;
  padding: 16px;
}
.photo-gallery__item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 8px;
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
  display: inline-block;
  vertical-align: top;
}
.photo-gallery__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.2s;
}
.photo-gallery__item:hover .photo-gallery__img { transform: scale(1.02); }
.photo-gallery__caption { padding: 6px 8px; font-size: 0.8rem; margin: 0; }

/* Poetography: lightbox */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-lightbox[hidden] { display: none !important; }
.photo-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.9); }
.photo-lightbox__content { position: relative; z-index: 1; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; }
.photo-lightbox__img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 4px; }
.photo-lightbox__caption { color: #fff; font-size: 0.9rem; margin-top: 8px; text-align: center; max-width: 600px; }
.photo-lightbox__rights {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  font-style: italic;
  margin: 6px 0 0;
  text-align: center;
  max-width: 520px;
  line-height: 1.4;
}
.photo-lightbox__counter { color: rgba(255,255,255,0.6); font-size: 0.8rem; margin-top: 4px; }
.photo-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  font-size: 2.5rem;
  padding: 16px;
  cursor: pointer;
  z-index: 2;
  border-radius: 8px;
}
.photo-lightbox__nav:hover { background: rgba(0,0,0,0.8); }
.photo-lightbox__nav--prev { left: 12px; }
.photo-lightbox__nav--next { right: 12px; }
.photo-lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-lightbox__close:hover { background: rgba(0,0,0,0.8); }
.photo-lightbox__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  background: #fff;
  border: none;
  color: #000;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 2;
  white-space: nowrap;
}
.photo-lightbox__share:hover { background: rgba(255,255,255,0.85); }

/* Photo album embed card (posted timeline card + composer preview) */
.tweet__photo-album { margin-top: 10px; }
.compose-modal__album-preview { margin-top: 10px; }
.compose-modal__album-preview[hidden] { display: none; }
.photo-album-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
a.photo-album-card:hover { background: var(--surface-hover); }
.photo-album-card__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
}
.photo-album-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-album-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  min-width: 0;
}
.photo-album-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
}
.photo-album-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-album-card__caption {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-album-card__meta {
  font-size: 0.8rem;
  color: var(--muted-foreground);
}

/* Poetography: admin manage panel photo grid (styles live under .photo-album-manage-panel) */
@media (max-width: 700px) {
  .photo-gallery { column-width: 160px; column-gap: 4px; padding: 4px; }
  .photo-gallery__item { margin-bottom: 4px; }
  .photo-lightbox__nav { font-size: 1.5rem; padding: 10px; }
}

.video-catalog-modal__panel {
  display: flex;
  overflow: hidden;
  max-height: min(88vh, 820px);
  flex-direction: column;
  max-width: 620px;
}

.video-catalog-modal__body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  padding: 18px 20px;
}

.video-catalog-modal__intro {
  margin: 0;
}

.video-catalog-modal__view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.video-catalog-modal__view[hidden] {
  display: none !important;
}

.video-catalog-modal__view--upload {
  flex: 1;
  min-height: 0;
}

.video-catalog-modal__upload-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.video-catalog-modal__dropzone {
  display: grid;
  flex: 1;
  min-height: 220px;
  justify-items: center;
  align-content: center;
  gap: 10px;
  padding: 32px 24px;
  border: 2px dashed rgba(167, 139, 250, 0.45);
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(249, 24, 128, 0.08), transparent 55%),
    rgba(255, 255, 255, 0.03);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.video-catalog-modal__dropzone[hidden] {
  display: none !important;
}

.video-catalog-modal__dropzone:focus-visible {
  outline: 2px solid rgba(249, 24, 128, 0.75);
  outline-offset: 2px;
}

.video-catalog-modal__dropzone:hover,
.video-catalog-modal__dropzone--active {
  border-color: rgba(249, 24, 128, 0.75);
  background:
    radial-gradient(circle at top, rgba(249, 24, 128, 0.14), transparent 58%),
    rgba(167, 139, 250, 0.08);
  transform: translateY(-1px);
}

.video-catalog-modal__dropzone-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(249, 24, 128, 0.12);
  color: #f91880;
}

.video-catalog-modal__dropzone-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #eff3f4;
}

.video-catalog-modal__dropzone-copy {
  margin: 0;
  max-width: 20rem;
  line-height: 1.45;
}

.video-catalog-modal__staging {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.video-catalog-modal__staging[hidden] {
  display: none !important;
}

.video-catalog-modal__staging-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #eff3f4;
}

.video-catalog-modal__staging-name {
  margin: 0;
  font-weight: 650;
  word-break: break-word;
}

.video-catalog-modal__staging-meta,
.video-catalog-modal__staging-status {
  margin: 0;
}

.video-catalog-modal__staging-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.video-catalog-modal__cancel-upload {
  align-self: flex-start;
}

.video-catalog-modal__cancel-upload[hidden] {
  display: none !important;
}

.video-catalog-modal__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  color: rgba(167, 139, 250, 0.75);
  border-color: rgba(167, 139, 250, 0.75);
}

.video-catalog-modal__back:hover,
.video-catalog-modal__back:focus-visible {
  color: rgba(249, 24, 128, 0.9);
  border-color: rgba(249, 24, 128, 0.75);
  background: rgba(167, 139, 250, 0.08);
}

.video-catalog-modal__back svg {
  flex-shrink: 0;
}

.video-catalog-modal__back--upload,
.video-catalog-modal__back--catalog {
  width: 100%;
  align-self: stretch;
}

.video-catalog-modal__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  flex-shrink: 0;
  margin-top: 16px;
}

.video-catalog-modal__actions--two-col {
  grid-template-columns: 1fr 1fr;
}

.video-catalog-modal__actions--with-later > [data-video-catalog-use-later]:not([hidden]) {
  grid-column: 1 / -1;
}

.video-catalog-modal__actions .video-catalog-modal__back,
.video-catalog-modal__actions .btn {
  width: 100%;
}

.video-catalog-modal__actions [hidden] {
  display: none !important;
}

.video-catalog-modal__file-name {
  margin: 0;
  word-break: break-word;
}

.video-catalog-modal__view--catalog {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.video-catalog-modal__catalog-panel {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.video-catalog-modal__loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 24px 0 8px;
  text-align: center;
}

.video-catalog-modal__loading-state[hidden] {
  display: none !important;
}

.video-catalog-modal__loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(167, 139, 250, 0.25);
  border-top-color: rgba(249, 24, 128, 0.9);
  border-radius: 999px;
  animation: catalogLoadSpin 0.8s linear infinite;
}

.video-catalog-modal__loading-text {
  margin: 0;
}

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

.video-catalog-modal__card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 14px;
  background: #090909;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.video-catalog-modal__card:hover {
  border-color: rgba(167, 139, 250, 0.55);
  background: rgba(124, 58, 237, 0.1);
}

.video-catalog-modal__card--selected {
  border-color: rgba(249, 24, 128, 0.75);
  background: rgba(124, 58, 237, 0.16);
  box-shadow: inset 0 0 0 1px rgba(249, 24, 128, 0.35);
}

.video-catalog-modal__card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.video-catalog-modal__card-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111;
}

.video-catalog-modal__card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-catalog-modal__card-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
}

.video-catalog-modal__card-title {
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-catalog-modal__card-meta {
  font-size: 0.72rem;
  line-height: 1.35;
}

.video-catalog-modal__card-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.video-catalog-modal__download-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.32);
  cursor: help;
}

.video-catalog-modal__download-badge svg {
  display: block;
  flex-shrink: 0;
}

.video-catalog-modal__download-badge--ready {
  color: rgba(167, 139, 250, 0.95);
  background: rgba(124, 58, 237, 0.22);
}

.video-catalog-modal__download-badge--pending {
  color: rgba(251, 191, 36, 0.9);
  background: rgba(251, 191, 36, 0.12);
}

.video-catalog-modal__download-badge--loading {
  color: rgba(167, 139, 250, 0.85);
  background: rgba(124, 58, 237, 0.16);
  cursor: wait;
}

.video-catalog-modal__download-badge-spinner {
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(167, 139, 250, 0.25);
  border-top-color: rgba(249, 24, 128, 0.9);
  border-radius: 999px;
  animation: catalogLoadSpin 0.8s linear infinite;
}

.video-catalog-modal__empty {
  margin: 0;
}

.video-catalog-modal__error {
  margin: 0;
}

/* Two-factor authentication */
.two-factor-setup { padding: 16px 0; }
.two-factor-qr { text-align: center; margin: 16px 0; }
.two-factor-qr img, .two-factor-qr canvas, .two-factor-qr svg { max-width: 200px; border-radius: 8px; }
.two-factor-secret {
  font-family: monospace;
  font-size: 1rem;
  letter-spacing: 2px;
  background: var(--surface);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  text-align: center;
  word-break: break-all;
  user-select: all;
  margin: 8px 0;
}
.two-factor-backup-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  font-family: monospace;
  font-size: 0.95rem;
  background: var(--surface);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin: 12px 0;
}
.two-factor-backup-code { padding: 4px 8px; }
.two-factor-backup-code--used { text-decoration: line-through; color: var(--muted-foreground); }
.two-factor-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
}
.two-factor-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.two-factor-status__dot--on { background: #22c55e; }
.two-factor-status__dot--off { background: var(--muted-foreground); }

/* 2FA login challenge page */
.login-2fa {
  max-width: 400px;
  margin: 60px auto;
  padding: 32px 24px;
  text-align: center;
}
.login-2fa__input {
  font-size: 2rem;
  letter-spacing: 8px;
  text-align: center;
  padding: 12px;
  width: 100%;
  max-width: 260px;
  margin: 16px auto;
  font-family: monospace;
}
.login-2fa__error {
  color: #ef4444;
  font-size: 0.9rem;
  margin-top: 8px;
}
.login-2fa__info {
  color: var(--muted-foreground);
  font-size: 0.85rem;
  margin-top: 12px;
}

/* Account reactivation page */
.reactivate-account { text-align: center; }
.reactivate-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 20px auto;
  padding: 16px 24px;
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 10px;
  background: rgba(239,68,68,0.05);
}
.reactivate-days {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ef4444;
  line-height: 1;
}

.two-factor-method-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.two-factor-method-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.two-factor-method-option:hover { background: var(--surface-hover); }
.two-factor-method-option input[type="radio"]:checked ~ .two-factor-method-option__label { }
.two-factor-method-option__label { display: flex; flex-direction: column; gap: 2px; }
.two-factor-method-option__label strong { font-size: 0.95rem; }
.two-factor-method-option__label .muted { font-size: 0.8rem; }
.login-2fa__resend {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.85rem;
  margin-top: 8px;
}
.login-2fa__resend:disabled { color: var(--muted-foreground); cursor: default; }

/* Station slim bar — mobile-only replacement for the floating dock on the Messages page */
.station-slim-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(135deg, #1a0533 0%, #0d0d1a 60%, #110822 100%);
  border-top: 1px solid rgba(167, 139, 250, 0.3);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 1020;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
}

.station-slim-bar__info {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.station-slim-bar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: station-slim-pulse 1.5s ease-in-out infinite;
}

@keyframes station-slim-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.station-slim-bar__name {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.station-slim-bar__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.station-slim-bar__btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.station-slim-bar__btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.station-slim-bar__btn--close { color: rgba(255, 255, 255, 0.5); }
.station-slim-bar__btn--close:hover { color: #ef4444; }
.station-slim-bar__btn--mic-on { color: #22c55e; }
.station-slim-bar__btn--mic-off { color: #ef4444; }

body.has-station-slim-bar .messages-shell {
  height: calc(100vh - 48px);
}

@media (max-width: 700px) {
  body.has-station-slim-bar.messages-page .station-slim-bar {
    display: flex;
  }

  body.has-station-slim-bar.messages-page .space-global-dock {
    display: none; /* hide floating island on mobile messages */
  }

  body.has-station-slim-bar.messages-page {
    padding-bottom: 48px;
  }

  /* Push the bottom nav up so it sits above the slim bar instead of behind it. */
  body.has-station-slim-bar .mobile-footer-nav {
    bottom: 48px;
  }

  body.has-station-slim-bar .messages-shell {
    height: auto;
    bottom: calc(64px + 48px + env(safe-area-inset-bottom, 0px));
  }
}
.login-2fa__email-hint { color: var(--muted-foreground); font-size: 0.85rem; margin: 8px 0; }

/* System updates changelog */
.system-updates { padding: 0; }
.system-update {
  padding: 20px 16px;
  border-bottom: 1px solid var(--border);
}
.system-update--unread {
  background: rgba(29, 155, 240, 0.05);
  border-left: 3px solid var(--accent);
}
.system-update__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.system-update__version {
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.system-update__new-badge {
  background: #22c55e;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.system-update__date { font-size: 0.8rem; margin-left: auto; }
.system-update__title { font-size: 1.2rem; font-weight: 700; margin: 0 0 12px; }
.system-update__body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--foreground);
}
.system-update__body p { margin: 0 0 8px; }
.system-update__body ul {
  padding-left: 20px;
  margin: 8px 0;
}
.system-update__body li {
  margin-bottom: 6px;
}
.system-update__body strong { font-weight: 700; }

/* Global replay island (persistent mini player for Station replays) */
.replay-island {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: linear-gradient(135deg, #1a0533 0%, #0d0d1a 60%, #110822 100%);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1150;
  min-width: 280px;
  max-width: 360px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.replay-island[hidden] {
  display: none !important;
}
.replay-island__info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.replay-island__dot {
  color: var(--accent);
  font-size: 0.8rem;
}
.replay-island__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.replay-island__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.replay-island__btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.replay-island__btn:hover { color: #fff; }
.replay-island__btn--close { color: rgba(255, 255, 255, 0.4); }
.replay-island__btn--close:hover { color: #ef4444; }
.replay-island__transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.replay-island__transport-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.replay-island__transport-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.replay-island__transport-btn--play,
.replay-island__transport-btn--pause {
  background: rgba(139, 92, 246, 0.3);
  padding: 8px;
}
.replay-island__transport-btn--play:hover,
.replay-island__transport-btn--pause:hover {
  background: rgba(139, 92, 246, 0.5);
}
.replay-island__transport-label {
  font-size: 0.6rem;
  font-weight: 700;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.6);
}
.replay-island__progress {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
}
.replay-island__progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0;
  transition: width 0.2s linear;
}
.replay-island__time {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}
.replay-speakers {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.replay-speakers:empty {
  display: none;
}
.replay-speaker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  width: 40px;
  transition: opacity 0.3s;
}
.replay-speaker[hidden] {
  display: none;
}
.replay-speaker--active {
  animation: replaySpeakerPulse 1.5s ease-in-out infinite;
}
@keyframes replaySpeakerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.replay-speaker__avatar-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: replayRingPulse 1s ease-in-out infinite;
}
@keyframes replayRingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0); }
}
.replay-speaker__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0d0d1a;
}
.replay-speaker__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
}
.replay-speaker__name {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
body.has-replay-island {
  padding-bottom: 80px;
}
@media (max-width: 700px) {
  .replay-island {
    right: 10px;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 20px);
    max-width: none;
    min-width: 0;
  }
  body.has-replay-island.has-station-slim-bar .replay-island {
    display: none;
  }
}
.notif-row__type-icon--system-update { color: var(--accent); }

/* Bot account admin panel */
.bot-admin { padding: 16px 0; }
.bot-admin__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 16px;
}
.bot-admin__avatar-wrap { position: relative; }
.bot-admin__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.bot-admin__avatar--fallback {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
}
.bot-admin__status {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--muted-foreground);
  color: #fff;
  font-weight: 700;
}
.bot-admin__status--active { background: #22c55e; }
.bot-admin__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 16px;
  flex-wrap: wrap;
}
.bot-admin__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}
.bot-admin__section {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
}
.bot-admin__section summary {
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
}
.bot-admin__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.user-badge--bot {
  font-size: 0.75rem;
  margin-left: 2px;
}
.notif-row__type-icon--podder { font-size: 1.1em; }

/* Games Night */
.games-hub {
  padding: 16px 0;
}
.games-hub__stats {
  display: block;
  font-size: 0.8rem;
  margin-top: 2px;
}

/* Wordle */
.wordle-game { padding: 16px; max-width: 500px; margin: 0 auto; }
.wordle-board { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.wordle-row { display: flex; gap: 6px; justify-content: center; }
.wordle-tile {
  width: 52px; height: 52px;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 800; text-transform: uppercase;
  border-radius: 4px;
  transition: background 0.3s, border-color 0.3s;
}
.wordle-tile--correct { background: #538d4e; border-color: #538d4e; color: #fff; }
.wordle-tile--present { background: #b59f3b; border-color: #b59f3b; color: #fff; }
.wordle-tile--absent { background: #3a3a3c; border-color: #3a3a3c; color: #fff; }
.wordle-keyboard { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.wordle-keyboard__row { display: flex; gap: 4px; }
.wordle-key {
  min-width: 32px; height: 48px;
  border: none; border-radius: 6px;
  background: var(--surface); color: var(--foreground);
  font-size: 0.85rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.wordle-key:hover { background: var(--surface-hover); }
.wordle-key--wide { min-width: 56px; font-size: 0.75rem; }
.wordle-key--correct { background: #538d4e; color: #fff; }
.wordle-key--present { background: #b59f3b; color: #fff; }
.wordle-key--absent { background: #3a3a3c; color: #666; }
.wordle-result { text-align: center; padding: 20px 0; }
.wordle-result__msg { font-size: 1.2rem; font-weight: 700; margin: 0 0 8px; }
.wordle-result__def { font-size: 0.9rem; margin: 0 0 16px; }
.wordle-stats { text-align: center; font-size: 0.85rem; margin-top: 16px; }
.wordle-hint-btn { margin: 8px auto; display: block; }
.wordle-hint { text-align: center; padding: 8px 16px; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 8px; margin: 8px 0; }
.wordle-hint__text { font-size: 0.9rem; margin: 0 0 4px; }
.wordle-hint__penalty { font-size: 0.8rem; margin: 0; }

/* Scramble */
.scramble-game { padding: 16px; max-width: 500px; margin: 0 auto; text-align: center; }
.scramble-letters {
  display: flex; gap: 8px; justify-content: center; margin: 24px 0;
  flex-wrap: wrap;
}
.scramble-letter {
  width: 48px; height: 48px;
  background: var(--surface); border: 2px solid var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; text-transform: uppercase;
}
.scramble-input {
  font-size: 1.5rem; text-align: center; letter-spacing: 4px;
  text-transform: uppercase; padding: 12px;
  max-width: 300px; margin: 0 auto 16px;
  display: block;
}
.scramble-actions { display: flex; gap: 10px; justify-content: center; }
.scramble-timer { font-size: 1.2rem; font-weight: 700; color: var(--muted-foreground); margin: 8px 0; }
.scramble-result { margin-top: 16px; min-height: 1.4em; font-weight: 600; }
.scramble-result--correct { color: #22c55e; }
.scramble-result--wrong { color: #ef4444; }

@media (max-width: 700px) {
  .wordle-tile { width: 44px; height: 44px; font-size: 1.3rem; }
  .wordle-key { min-width: 26px; height: 42px; font-size: 0.75rem; }
  .wordle-key--wide { min-width: 44px; }
}

/* ---------------------------------------------------------------------- */
/* Stories                                                                 */
/* ---------------------------------------------------------------------- */

.avatar-ring--story {
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899, #f59e0b);
  display: inline-block;
  cursor: pointer;
  border: none;
  line-height: 0;
}
.avatar-ring--story .avatar { border: 2px solid var(--bg, #000); border-radius: 50%; display: block; }

/* Story create modal */
.story-create-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.story-create-modal[hidden] { display: none !important; }
.story-create-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.8); border: none; padding: 0; }
.story-create-modal__content { position: relative; z-index: 1; width: 90%; max-width: 400px; background: var(--bg, #000); border-radius: 16px; overflow: hidden; }
.story-create-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.story-create-modal__header h2 { margin: 0; font-size: 1.1rem; }
.story-create-modal__header button { background: none; border: none; color: var(--foreground); font-size: 1.5rem; cursor: pointer; }
.story-create-modal__preview { aspect-ratio: 9/16; max-height: 50vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; touch-action: none; user-select: none; }
.story-create-modal__preview--has-image { background: #000; }
.story-create-modal__image-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-create-modal__text-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: left 0.05s, top 0.05s;
}
.story-create-modal__text {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  resize: none;
  width: 90%;
  min-height: 60px;
  outline: none;
  font-weight: 600;
  word-break: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.story-create-modal__text--small { font-size: 0.9rem; }
.story-create-modal__text--medium { font-size: 1.2rem; }
.story-create-modal__text--large { font-size: 1.8rem; }
.story-create-modal__preview--has-image .story-create-modal__text {
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 8px 12px;
}
.story-text-display {
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 8px 12px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  word-break: break-word;
  white-space: pre-wrap;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.story-text-display:active { cursor: grabbing; }
.story-create-modal__preview--has-image .story-text-display {
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 8px 12px;
}
.story-create-modal__controls { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
.story-create-modal__colors { display: flex; gap: 6px; }
.story-color-btn { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.story-color-btn--active { border-color: #fff; }
.story-create-modal__font-sizes { display: flex; gap: 4px; }
.story-font-btn { background: none; border: 1px solid var(--border); color: var(--foreground); border-radius: 6px; padding: 4px 8px; cursor: pointer; }
.story-font-btn[data-story-font="small"] { font-size: 0.7rem; }
.story-font-btn[data-story-font="medium"] { font-size: 0.9rem; }
.story-font-btn[data-story-font="large"] { font-size: 1.1rem; }
.story-font-btn--active { border-color: var(--accent); color: var(--accent); }
.story-create-modal__image-btn { cursor: pointer; color: var(--foreground); display: flex; align-items: center; margin-left: auto; }
.story-create-modal__text-colors,
.story-create-modal__fonts {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
}
.story-text-color-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.story-text-color-btn--active { border-color: var(--accent); }
.story-font-family-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.9rem;
}
.story-font-family-btn--active { border-color: var(--accent); color: var(--accent); }
.story-create-modal__post { width: calc(100% - 32px); margin: 0 16px 16px; }
#story-create-error { margin: 0 16px 8px; }

/* Story viewer */
.story-viewer { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.story-viewer[hidden] { display: none !important; }
.story-viewer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.95); border: none; padding: 0; }
.story-viewer__container { position: relative; z-index: 1; width: 100%; max-width: 420px; height: 90vh; max-height: 750px; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; background: #000; }
.story-viewer__progress { display: flex; gap: 3px; padding: 8px 12px 4px; }
.story-progress-seg { flex: 1; height: 3px; background: rgba(255,255,255,0.3); border-radius: 2px; overflow: hidden; }
.story-progress-seg--done { background: #fff; }
.story-progress-seg--active { background: rgba(255,255,255,0.3); }
.story-progress-seg--active::after { content: ''; display: block; height: 100%; background: #fff; animation: storyProgress 5s linear forwards; }
@keyframes storyProgress { from { width: 0; } to { width: 100%; } }
.story-viewer__header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; position: relative; z-index: 2; }
.story-viewer__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.story-viewer__username { font-weight: 600; font-size: 0.85rem; color: #fff; }
a.story-viewer__username { text-decoration: none; }
a.story-viewer__username:hover { text-decoration: underline; }
.story-viewer__time { font-size: 0.75rem; }
.story-viewer__delete,
.story-viewer__close { margin-left: 0; background: none; border: none; color: #fff; cursor: pointer; }
.story-viewer__delete { margin-left: auto; display: flex; align-items: center; }
.story-viewer__close { margin-left: 8px; font-size: 1.5rem; }
.story-viewer__content { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.story-viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.story-viewer__text-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.story-viewer__text {
  color: #fff;
  padding: 20px;
  text-align: center;
  font-weight: 600;
  word-break: normal;
  white-space: pre-wrap;
  width: 100%;
  max-width: 100%;
}
.story-viewer__text--small { font-size: 1rem; }
.story-viewer__text--medium { font-size: 1.4rem; }
.story-viewer__text--large { font-size: 2rem; }
.story-viewer__nav { position: absolute; inset: 0; display: flex; pointer-events: none; }
.story-viewer__nav-left, .story-viewer__nav-right { flex: 1; pointer-events: all; cursor: pointer; }
.story-viewer__footer { display: flex; justify-content: center; gap: 8px; padding: 12px; position: relative; z-index: 2; }
.story-react-btn { background: rgba(255,255,255,0.1); border: none; font-size: 1.3rem; padding: 8px 12px; border-radius: 999px; cursor: pointer; transition: transform 0.2s, background 0.2s; }
.story-react-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
.story-react-btn--sent { animation: reactPop 0.3s ease; }
@keyframes reactPop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }

.story-avatar-popup {
  background: var(--surface, #1e1e1e);
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  overflow: hidden;
  min-width: 160px;
}
.story-avatar-popup__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--foreground);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
}
.story-avatar-popup__opt:hover { background: var(--surface-hover); }
.story-avatar-popup__opt + .story-avatar-popup__opt { border-top: 1px solid var(--border); }

@media (max-width: 700px) {
  .story-viewer__container { max-width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }
}

/* Following-tab stories bar (Instagram-style row of active story authors) */
.stories-bar {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.stories-bar::-webkit-scrollbar { display: none; }
.stories-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
button.stories-bar__item--add {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}
.stories-bar__ring {
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899, #f59e0b);
}
.stories-bar__ring--add {
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stories-bar__add-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--bg, #000);
  background: var(--surface);
  color: var(--foreground);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stories-bar__item--add:hover .stories-bar__add-icon {
  background: var(--surface-hover, var(--surface));
}
.stories-bar__item--viewed .stories-bar__ring {
  background: var(--muted-foreground);
}
.stories-bar__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg, #000);
  display: block;
}
.stories-bar__name {
  font-size: 0.7rem;
  color: var(--foreground);
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* Compose header "Create Story" button */
.compose-header__story-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
}
.compose-header__story-btn:hover { background: var(--surface-hover); }

/* Story reply card in DMs */
.dm-story-reply {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 4px 0;
}
.dm-story-reply__preview {
  width: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.dm-story-reply__img { width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; }
.dm-story-reply__text-preview {
  width: 100%;
  aspect-ratio: 9/16;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 600;
  text-align: center;
}

/* Podding creator directory */
.podding-creators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  padding: 16px;
}
.podding-creator-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--foreground);
  transition: transform 0.15s, box-shadow 0.15s;
  display: block;
  background: var(--surface);
}
.podding-creator-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  text-decoration: none;
}
.podding-creator-card__thumb-wrap { aspect-ratio: 16/9; overflow: hidden; }
.podding-creator-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.podding-creator-card__thumb--empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 800; color: rgba(255,255,255,0.3);
}
.podding-creator-card__info { padding: 12px 14px; }
.podding-creator-card__name { font-size: 1rem; display: block; }
.podding-creator-card__desc { font-size: 0.85rem; display: block; margin-top: 2px; }
.podding-creator-card__join { padding: 0 14px 10px; }
.podding-creator-card__joined { font-size: 0.8rem; }
.podding-hub__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 3/1;
  overflow: hidden;
}
.podding-hub__banner--empty {
  background: linear-gradient(135deg, #1a1d21 0%, #0d0d0d 100%);
}
.podding-hub__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.podding-hub__banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 85% at 50% 100%, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 42%, transparent 72%),
    linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.65) 35%, rgba(0, 0, 0, 0.25) 65%, transparent 100%);
}
.podding-hub__banner-title {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: clamp(1.15rem, 4vw, 1.6rem);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75), 0 0 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.compose-community-context {
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent, #1d9bf0);
}
.compose-community-context[hidden] {
  display: none;
}
.compose-community-badge-wrap {
  position: relative;
  display: inline-flex;
  margin: 5px 0 10px;
  z-index: 5;
}
.compose-community-badge {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--badge-color, #7c3aed) 18%, transparent);
  color: var(--badge-color, #7c3aed);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  max-width: 100%;
}
.compose-community-badge--everyone {
  --badge-color: var(--muted-foreground);
  background: var(--surface);
  color: var(--muted-foreground);
  box-shadow: inset 0 0 0 1px var(--border);
}
.compose-community-badge__caret {
  flex: 0 0 auto;
  opacity: 0.75;
}
.compose-community-menu {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 180px;
  max-width: min(280px, calc(100vw - 16px));
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 2200;
}
.compose-community-menu[hidden] {
  display: none !important;
}
.compose-community-menu__option {
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.compose-community-menu__option:hover,
.compose-community-menu__option:focus-visible {
  background: var(--surface-hover);
  outline: none;
}
.compose-community-menu__option--active {
  color: var(--badge-color, var(--accent));
  font-weight: 700;
}
.compose-community-menu__join-more {
  display: block;
  width: 100%;
  margin: 4px 0 0;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.compose-community-menu__join-more:hover,
.compose-community-menu__join-more:focus-visible {
  background: var(--surface-hover);
  color: var(--foreground);
  outline: none;
  text-decoration: none;
}
.podding-hub__membership-btn {
  flex-shrink: 0;
  margin-left: auto;
  min-width: 72px;
}
.podding-hub-header-menu {
  margin-left: auto;
  overflow: visible;
}
.podding-hub-header-menu .tweet__menu {
  right: 0;
  left: auto;
  z-index: 30;
}
.col-header:has(.podding-hub-header-menu) {
  overflow: visible;
}

/* Community share card (timeline embed + compose preview) */
.tweet__community-share { margin-top: 10px; }
.compose-modal__album-preview .tweet__community-share { margin-top: 0; }
.community-share-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
a.community-share-card:hover { background: var(--surface-hover); }
.community-share-card__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.community-share-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.community-share-card__cover--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--community-accent, #7c3aed);
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
}
.community-share-card__body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-width: 0;
}
.community-share-card__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
.community-share-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-share-card__desc {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-share-card__cta {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  white-space: nowrap;
  text-decoration: none;
}
a.community-share-card,
a.community-share-card:hover,
a.community-share-card:focus,
a.community-share-card:focus-visible {
  text-decoration: none;
}
.podding-hub-tabs {
  background: var(--bg);
}
.podding-hub-feed .tweet-community-badge,
.podding-hub-feed .tweet-community-badge-row {
  display: none;
}
.community-manage {
  padding: 12px 16px 32px;
}
.community-manage__intro {
  margin: 0 0 16px;
  font-size: 0.9rem;
}
.community-manage__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.community-manage__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.community-manage__media {
  display: flex;
  align-items: center;
  gap: 14px;
}
.community-manage__avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: var(--surface, #16181c);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border, rgba(47, 51, 54, 0.6));
  flex-shrink: 0;
}
.community-manage__banner-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface, #16181c);
  border: 1px solid var(--border, rgba(47, 51, 54, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
}
.community-manage__banner-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.community-manage__media-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.community-manage__media-actions--row {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.community-manage__media-actions .btn,
.community-manage__media-actions label.btn {
  cursor: pointer;
}
.community-manage__hint {
  font-size: 0.75rem;
}
.community-manage__error {
  margin: 0;
}
.community-manage__success {
  margin: 0;
}
.community-manage__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}
.community-analytics {
  padding: 0 0 32px;
}
.community-analytics__tabs {
  margin: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}
.community-analytics__tabs .tabs__link {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.community-analytics__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 24px 16px;
}
.community-analytics__loader[hidden] {
  display: none;
}
.community-analytics__error {
  margin: 16px;
}
.community-analytics__content {
  padding: 16px;
}
.community-analytics__content[hidden] {
  display: none;
}
.community-analytics__panel .admin-stats {
  margin-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.community-analytics__grid {
  margin-top: 8px;
  grid-template-columns: minmax(0, 1fr);
}
.community-analytics .admin-leaderboards {
  grid-template-columns: minmax(0, 1fr);
}
.community-analytics .admin-stat__value--text {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: normal;
}
@media (max-width: 720px) {
  .community-analytics__panel .admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .community-analytics__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.podding-hub-header-menu a.tweet__menu-item {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.community-join-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(29, 155, 240, 0.1);
  border-bottom: 1px solid var(--border);
}
.community-join-banner p { margin: 0; font-size: 0.9rem; }

.podding-creator-card--request {
  border: 2px dashed var(--border);
  cursor: pointer;
  transition: border-color 0.2s;
  background: none;
}
.podding-creator-card--request:hover {
  border-color: var(--accent);
}
.podding-creator-card__thumb--request {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.podding-creator-card__plus {
  font-size: 3rem;
  font-weight: 300;
  color: var(--muted-foreground);
}
.podding-creator-card--request:hover .podding-creator-card__plus {
  color: var(--accent);
}

/* Single dashed Create / Request card + its popup menu */
.community-action-wrap {
  position: relative;
}
.community-action-wrap .podding-creator-card--request {
  height: 100%;
}
.community-action-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.community-action-popup[hidden] { display: none !important; }
.community-action-popup__backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: rgba(0,0,0,0.8);
  cursor: pointer;
}
.community-action-popup__panel {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 320px;
  background: var(--surface, #1e1e1e);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  overflow: hidden;
}
.community-action-popup__opt {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.community-action-popup__opt:hover,
.community-action-popup__opt:focus,
.community-action-popup__opt:focus-visible { text-decoration: none; }
.community-action-popup__opt:hover { background: var(--surface-hover); }
.community-action-popup__opt + .community-action-popup__opt { border-top: 1px solid var(--border); }

.podding-request-modal__panel { max-width: 420px; }
.podding-request-modal__form { display: flex; flex-direction: column; gap: 8px; padding: 16px; }

/* Podding creators admin */
.podding-feature-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 8px 0;
}
.podding-feature-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}
.podding-image-uploads {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.podding-image-upload {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Self-delete account */
.settings-danger-zone {
  margin-top: 32px;
  padding: 16px;
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 12px;
  background: rgba(239,68,68,0.05);
}
.settings-danger-zone h3 { color: #ef4444; margin: 0 0 8px; }
.delete-account-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.delete-account-modal[hidden] { display: none !important; }
.delete-account-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.8); }
.delete-account-modal__content {
  position: relative; z-index: 1; width: 90%; max-width: 480px;
  background: var(--bg, #000); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px; max-height: 90vh; overflow-y: auto;
}
.delete-account-modal__content h2 { margin: 0 0 8px; }
.delete-account-survey { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.delete-account-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: background 0.15s;
}
.delete-account-option:hover { background: var(--surface-hover); }
.delete-account-option input[type=radio] { accent-color: #ef4444; }
.delete-account-confirm { margin: 16px 0; }
.delete-account-benefits {
  margin: 16px 0;
  padding: 12px 16px;
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 10px;
  background: rgba(239,68,68,0.05);
}
.delete-account-benefits__list {
  padding-left: 20px;
  margin: 8px 0;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--foreground);
}
.delete-account-benefits__list li { margin-bottom: 2px; }
.delete-account-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.delete-account-agree input[type=checkbox] { accent-color: #ef4444; margin-top: 3px; }
.delete-account-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.delete-entry { padding: 12px 0; border-bottom: 1px solid rgba(47,51,54,0.3); }
.delete-entry__header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.delete-entry__tag {
  display: inline-block; font-size: 0.75rem; font-weight: 600;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(239,68,68,0.15); color: #ef4444;
}
.delete-entry__text { font-size: 0.9rem; font-style: italic; margin: 6px 0 0; }
.delete-entry__status {
  display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 2px 8px; border-radius: 4px; margin-left: auto;
  background: var(--surface); color: var(--muted-foreground);
}
.delete-entry__status--pending { background: rgba(234,179,8,0.15); color: #eab308; }
.delete-entry__status--completed { background: rgba(148,163,184,0.15); color: var(--muted-foreground); }
.delete-entry__status--reactivated { background: rgba(34,197,94,0.15); color: #22c55e; }
.delete-entry__countdown { font-size: 0.8rem; color: var(--muted-foreground); }
.delete-entry__purge-form { margin-top: 8px; }
.delete-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.delete-stat { font-size: 0.85rem; padding: 4px 10px; background: var(--surface); border-radius: 6px; }
.dm-story-reply__emoji { font-size: 1.5rem; }

/* Community timelines */
.community-tab-wrap { position: relative; display: inline-flex; flex: 1 0 auto; z-index: 5; }
.community-tab-wrap > .tabs__link { width: 100%; }
.tabs__link--dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--muted-foreground);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.tabs__link--dropdown:hover {
  background: var(--bg-secondary);
  text-decoration: none;
  color: var(--muted-foreground);
}
.tabs__link--dropdown.tabs__link--active {
  border-bottom-color: var(--accent);
  color: var(--foreground);
}
.community-tab-caret {
  flex: 0 0 auto;
  opacity: 0.7;
}
.community-tab-dropdown {
  position: fixed;
  left: 0;
  top: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 200px;
  max-width: min(280px, calc(100vw - 16px));
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  z-index: 12000;
  pointer-events: auto;
}
.community-tab-dropdown[hidden] { display: none !important; }
.community-tab-dropdown a.community-tab-option {
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.community-tab-dropdown__divider {
  border-top: 1px solid var(--border);
  margin: 4px 0;
}
.community-tab-dropdown__empty {
  margin: 0;
  padding: 12px 14px 6px;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--muted-foreground);
}
.community-tab-option {
  display: block; padding: 10px 14px; text-decoration: none;
  color: var(--foreground); font-size: 0.9rem; border-radius: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.community-tab-option__hint {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted-foreground);
}
.community-tab-option:hover,
.community-tab-option:focus,
.community-tab-option:active {
  background: var(--surface-hover);
  text-decoration: none;
}
.community-tab-option--active { color: var(--accent); font-weight: 600; }
.community-tab-option--join-more {
  color: var(--muted-foreground);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
}
.community-tab-option--join-more:hover,
.community-tab-option--join-more:focus,
.community-tab-option--join-more:active {
  text-decoration: none;
}

.tweet-community-badge-row {
  display: inline-flex;
  align-items: baseline;
  flex: 0 1 auto;
  width: auto;
  max-width: min(40%, 14rem);
  min-width: 0;
  margin: 0;
  line-height: 1.2;
  gap: 6px;
}
.tweet-community-badge-row::before {
  content: '·';
  flex: 0 0 auto;
  color: var(--muted-foreground);
  font-weight: 400;
}
.tweet-community-badge {
  display: inline-block;
  width: auto;
  max-width: 100%;
  min-width: 0;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(124, 58, 237, 0.15);
  color: var(--badge-color, #7c3aed);
  margin: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.tweet__header-text:has(> .tweet-community-badge-row) {
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start;
  min-width: 0;
  overflow: hidden;
}
.tweet__header-text:has(> .tweet-community-badge-row) > .tweet__identity {
  display: inline-flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.tweet__header-text:has(> .tweet-community-badge-row) > .tweet__identity .tweet__name {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.tweet__header-text:has(> .tweet-community-badge-row) > .tweet__identity .tweet__name .display-name-with-badge {
  min-width: 0;
  overflow: hidden;
}
.tweet__header-text:has(> .tweet-community-badge-row) > .tweet__identity .tweet__name .display-name-with-badge__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tweet__header-text:has(> .tweet-community-badge-row) > .tweet__identity .tweet__meta {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.tweet__header-text:has(> .tweet-community-badge-row) > .tweet__identity .tweet__handle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tweet__header-text:has(> .tweet-community-badge-row) > .tweet__time {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .tweet .tweet__header-text:has(> .tweet-community-badge-row) {
    flex-wrap: wrap;
    align-items: baseline;
  }

  /* Leave room for longer times like "just now" so they stay on the name row. */
  .tweet .tweet__header-text:has(> .tweet-community-badge-row) > .tweet__identity {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 5.75rem);
  }

  .tweet .tweet__header-text:has(> .tweet-community-badge-row) > .tweet__time {
    flex: 0 0 auto;
  }

  .tweet .tweet-community-badge-row {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 4px 0 0;
    overflow: hidden;
    gap: 0;
  }

  .tweet .tweet-community-badge-row::before {
    content: none;
  }

  .tweet .tweet-community-badge {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
  }
}

.compose-community-picker { padding: 0 12px 8px; display: flex; align-items: center; gap: 8px; }
.compose-community-picker select { max-width: 200px; }
.input--sm { padding: 6px 10px; font-size: 0.85rem; max-width: 200px; }

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(47,51,54,0.3);
  gap: 12px;
}
.settings-row__label {
  font-size: 0.9rem;
  font-weight: 600;
}

.onboarding-communities {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; padding: 16px;
}
.onboarding-community-card {
  border: 2px solid var(--border); border-radius: 12px;
  padding: 16px; text-align: center; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.onboarding-community-card:has(input:checked) { border-color: var(--accent); background: rgba(29,155,240,0.05); }
.onboarding-community-card__check { display: none; }
.onboarding-community-card img { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; margin-bottom: 8px; }
.onboarding-community-card__thumb--empty {
  width: 80px; height: 80px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; color: rgba(255,255,255,0.3);
  margin: 0 auto 8px;
}

.settings-community-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(47,51,54,0.3);
  cursor: pointer;
}

/* My Community — owner-facing moderation controls in account settings */
.settings-community-owner { padding-bottom: 12px; }
.settings-community-owner + .settings-community-owner {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.settings-community-owner > h4 { margin: 0 0 8px; font-size: 1rem; }

.settings-subsection { padding: 8px 0; }
.settings-subsection h5 { margin: 0 0 8px; font-size: 0.9rem; }
.settings-subsection p.muted { margin: 0 0 8px; }

.settings-mod-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid rgba(47,51,54,0.3);
}
.settings-mod-row:last-child { border-bottom: 0; }
.settings-mod-row__avatar {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
.settings-mod-row__avatar--empty { background: rgba(255,255,255,0.1); }
.settings-mod-row__remove { margin-left: auto; color: #ef4444; border-color: #ef4444; }

.settings-kicked-row__who { display: flex; flex-direction: column; min-width: 0; }
.settings-kicked-row__reason { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-kicked-row__unkick { margin-left: auto; flex: 0 0 auto; }

.settings-mod-add { display: flex; gap: 8px; margin-top: 8px; }
.settings-mod-add .input { max-width: 200px; }
.settings-mod-dms { display: flex; flex-wrap: wrap; gap: 6px; }

/* Community-pinned posts, rendered above the community timeline */
.community-pinned-feed { border-bottom: 1px solid var(--border); }
.community-pinned-feed__label {
  padding: 10px 16px 4px; font-size: 0.8rem; font-weight: 700;
  color: var(--muted-foreground);
}

/* Stub left behind by a community moderator's soft delete */
.tweet--removed {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}

/* Create a Community — premium application modal + admin review rows */
.community-apply-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.community-apply-modal[hidden] { display: none !important; }
.community-apply-modal__backdrop { position: absolute; inset: 0; padding: 0; border: 0; background: rgba(0,0,0,0.8); cursor: pointer; }
.community-apply-modal__content {
  position: relative; z-index: 1; width: 90%; max-width: 480px;
  background: var(--bg, #000); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; max-height: 90vh; overflow-y: auto;
}
.community-apply-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.community-apply-modal__header h2 { margin: 0; font-size: 1.1rem; }
.community-apply-modal__header button { background: none; border: none; color: var(--foreground); font-size: 1.5rem; cursor: pointer; }

.admin-app-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(47,51,54,0.3);
}
.admin-app-row:last-child { border-bottom: 0; }
.admin-app-row__info { flex: 1; min-width: 0; }
.admin-app-row__info strong { display: block; }
.admin-app-row__actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Station catalog — Station history rendered as a community's catalog */
.station-catalog { padding: 0; }
.station-catalog__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--foreground);
  transition: background 0.15s;
}
.station-catalog__item:hover,
.station-catalog__item:focus,
.station-catalog__item:focus-visible {
  background: var(--surface-hover);
  text-decoration: none;
  color: var(--foreground);
}
.station-catalog__avatar-wrap { flex-shrink: 0; }
.station-catalog__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.station-catalog__avatar--empty {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
}
.station-catalog__info { flex: 1; min-width: 0; }
.station-catalog__title {
  font-size: 0.95rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.station-catalog__meta { font-size: 0.8rem; margin-top: 2px; display: flex; gap: 4px; flex-wrap: wrap; }
.station-catalog__replay-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(29,155,240,0.1);
  flex-shrink: 0;
}
.station-catalog__pager { display: flex; gap: 8px; justify-content: space-between; padding: 16px; }

/* ---------------------------------------------------------------------------
   Community-private Stations — creation controls, gate modal, list badges
   --------------------------------------------------------------------------- */
.station-create-community { display: block; }
.station-create-privacy { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.station-create-privacy__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.station-create-privacy__hint { font-size: 0.75rem; }

.community-gate-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}
.community-gate-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
}
.community-gate-modal__content {
  position: relative;
  z-index: 1;
  background: var(--bg, #000);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 24px;
  max-width: 420px;
  width: 90%;
  text-align: center;
}
.community-gate-modal__content h2 { margin: 0 0 8px; }
.community-gate-modal__hint { font-size: 0.85rem; }
.community-gate-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

.space-card__community { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; }
.station-community-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(124, 58, 237, 0.15);
  color: #7c3aed;
}
.station-private-badge { font-size: 0.75rem; }

/* ---------------------------------------------------------------------------
   Community live Station card — gradient card above the timeline that cycles
   through the speakers currently on stage
   --------------------------------------------------------------------------- */
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}
.community-live-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 16px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(236, 72, 153, 0.08) 100%);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 12px;
  text-decoration: none;
  color: var(--foreground);
  transition: background 0.2s;
}
.community-live-card:hover,
.community-live-card:focus,
.community-live-card:focus-visible {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(236, 72, 153, 0.15) 100%);
  text-decoration: none;
  color: var(--foreground);
}
.community-live-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: livePulse 1.5s ease-in-out infinite;
}
.community-live-card__title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.community-live-card__speakers {
  position: relative;
  height: 36px;
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.community-live-card__speaker {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.community-live-card__speaker--active {
  opacity: 1;
  transform: translateY(0);
}
.community-live-card__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(124, 58, 237, 0.3);
  flex-shrink: 0;
}
.community-live-card__name {
  font-weight: 600;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-live-card__lock {
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* Respect a reduced-motion preference — the card still reads, it just sits still. */
@media (prefers-reduced-motion: reduce) {
  .community-live-card,
  .community-live-card__speaker { transition: none; }
  .community-live-card__dot { animation: none; }
  .community-live-card__speaker { transform: none; }
}

/* -------------------------------------------------------------------------
   OBS / Streamlabs stream key panel (livestream.php, Premium only)
   ------------------------------------------------------------------------- */
.obs-stream-section {
  padding: 16px;
  border-top: 1px solid var(--border);
}
.obs-stream-credentials { margin-top: 12px; }
.obs-stream-field { margin-bottom: 12px; }
.obs-stream-field__label { font-size: 0.8rem; display: block; margin-bottom: 4px; }
.obs-stream-field__value {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.obs-stream-field__value code {
  flex: 1;
  font-size: 0.85rem;
  word-break: break-all;
  color: var(--foreground);
}
.obs-stream-key--hidden { letter-spacing: 2px; }
.obs-stream-actions { display: flex; gap: 8px; }
.obs-copy-btn--success {
  color: #22c55e !important;
  border-color: #22c55e !important;
}
.obs-connection-status { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 0.85rem; font-weight: 600; }
.obs-connection-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.obs-connection-status--connected { background: rgba(34,197,94,0.1); color: #22c55e; }
.obs-connection-status--connected .obs-connection-dot { background: #22c55e; }
.obs-connection-status--disconnected { background: rgba(239,68,68,0.1); color: #ef4444; }
.obs-connection-status--disconnected .obs-connection-dot { background: #ef4444; }