body { font-family: Arial, Helvetica, Verdana, sans-serif; font-size:16px; background: #fff; color: #222; margin:0; }
.topbar { background:#0e1079; color:#fff; padding:6px 0; }
.brand a{ color:#fff; font-weight:bold; font-size:20px; text-decoration:none; }
.topbar .top-inner { display:flex; justify-content:space-between; align-items:center; max-width:1180px; margin:0 auto; padding:0 10px; }
.topbar a { color:#fff; text-decoration:none; margin-right:12px; }
.container { max-width:1180px; margin:20px auto; padding:0 10px; }
/* top search & nav row */
.top-right { display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.search input { padding:3px 6px; border-radius:2px; border:1px solid #ccc; }
.search button { padding:3px 8px; margin-left:5px; }
.auth-links { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.wallet-btn { background:#ff8c00; color:#fff; border:none; padding:6px 10px; border-radius:4px; cursor:pointer; margin-right:6px; }
.wallet-btn:disabled { opacity:0.6; cursor:default; }
.online-users-counter { color:#fff; font-size:12px; white-space:nowrap; }
.bot-status-widget { color:#fff; font-size:12px; white-space:nowrap; }
.bot-status-widget strong { font-weight:bold; }
.bot-status-widget .bot-online { color:#50ff69; }
.bot-status-widget .bot-offline { color:#ddd; }
.blorg-token-widget { color:#fff; font-size:12px; white-space:nowrap; }
.blorg-ca-copy { font-size:11px; padding:1px 4px; margin-left:3px; cursor:pointer; }
.nav-row { background:#dfeeff; border-top:1px solid #c3def7; border-bottom:1px solid #c3def7; padding:6px 10px; color:#0e1079; }
.nav-row { text-align:center; }
.nav-row a{ color:#0e1079; margin-right:10px; text-decoration:none; font-size:13px; display:inline-block; margin-left:8px; margin-right:8px; }
 .hero { background:#e9f3ff; padding:20px; border:1px solid #9fc7ff; }
.grid { display:flex; flex-wrap:wrap; gap:10px; }
.card { width:120px; text-align:center; }
.card img { width:100%; height:120px; object-fit:cover; border:1px solid #ccc; }
.profile-page { display:flex; gap:20px; }
.left-col { width:260px; }
.pfp { width:220px; height:220px; object-fit:cover; border:0; }
.contact-box, .mail-box, .profile-url { margin-top:10px; padding:10px; border:1px solid #b7d1ef; background:#f7fbff; }
.main-col { flex:1; }
.profile-header { border:2px solid #000; padding:8px; text-align:center; font-weight:bold; background:#fff; }
.profile-blurb { margin:10px 0; }
.friend-grid { display:flex; gap:10px; flex-wrap:wrap; }
.friend-card img { width:80px; height:80px; object-fit:cover; }
.photo-grid { display:flex; gap:8px; flex-wrap:wrap; }
.photo-card img { width:120px; height:120px; object-fit:cover; border:1px solid #ccc; }
.comments textarea, form textarea { width:100%; min-height:80px; }
.error { color:#a00; background:#ffdede; padding:6px; border:1px solid #ffbcbc; }
.footer { max-width:1000px; margin:40px auto; padding:8px 10px; color:#666; }
/* Three-column homepage layout */
.main-grid { display:flex; gap:20px; align-items:flex-start; }
.left-col { width:200px; }
.center-col { flex:1; }
.right-col { width:260px; }
.box { background:#fff; border:1px solid #b7d1ef; padding:10px; margin-bottom:12px; }
.box h2, .box h3 { margin:0 0 8px 0; padding:6px; background:#ffd7b3; border:1px solid #ffcc99; font-size:15px; }

.login-box h3 { text-align:center; }
.thumbs { display:flex; gap:8px; flex-direction:column; }
.thumb { display:flex; gap:8px; align-items:center; }
.thumb img { width:64px; height:64px; object-fit:cover; border:1px solid #ccc; }
.thumb-name { font-size:13px; }
.small-box { background:#f7fbff; }
.copy-profile-url {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: #fff;
  border: 1px solid #9fc7ff;
  color: #003399;
  cursor: pointer;
  font-weight: bold;
  padding: 4px 6px;
  text-align: left;
}

/* 2026-06-25: compact header override after bot status additions. */
@media (min-width: 769px) {
  html body .topbar {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    overflow: hidden !important;
  }

  html body .topbar .top-inner.container {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 4px 12px !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
  }

  html body .topbar .brand,
  html body .topbar .brand a {
    width: 220px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  html body .topbar .brand-logo,
  html body .topbar .brand .brand-logo {
    width: 205px !important;
    max-width: 205px !important;
    max-height: 42px !important;
  }

  html body .topbar .brand-logo.brand-logo-tunes {
    width: 190px !important;
    max-width: 190px !important;
    max-height: 42px !important;
  }

  html body .topbar .top-right {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px 5px !important;
  }

  html body .topbar .search {
    max-width: 390px !important;
    gap: 3px !important;
  }

  html body .topbar .search label {
    font-size: 10px !important;
  }

  html body .topbar .search input[type="text"] {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 20px !important;
    font-size: 11px !important;
  }

  html body .topbar .search button {
    height: 22px !important;
    padding: 1px 7px !important;
    font-size: 11px !important;
  }

  html body .topbar .auth-links {
    max-width: 435px !important;
    font-size: 10px !important;
    gap: 4px !important;
  }

  html body .topbar .online-users-counter {
    max-width: 72px !important;
  }

  html body .topbar .bot-status-widget {
    max-width: 54px !important;
  }

  html body .topbar .blorg-token-widget {
    max-width: 126px !important;
  }

  html body .topbar .ad-banner.container {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 1px 0 !important;
  }

  html body .topbar .ad-banner .ad-slot {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  html body .topbar .nav-row.container {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 3px 8px !important;
  }
}

/* 2026-06-26: final EOF lock after all legacy compact header rules. */
@media (min-width: 769px) {
  html body .topbar {
    height: 138px !important;
    min-height: 138px !important;
    max-height: 138px !important;
    overflow: hidden !important;
  }

  html body .topbar .top-inner.container {
    width: 960px !important;
    max-width: 960px !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    padding: 4px 12px !important;
    grid-template-columns: 270px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: center !important;
  }

  html body .topbar .brand,
  html body .topbar .brand a {
    width: 270px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  html body .topbar .brand-logo,
  html body .topbar .brand .brand-logo {
    width: 270px !important;
    max-width: 270px !important;
    height: 58px !important;
    max-height: 58px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html body .topbar .brand-logo.brand-logo-tunes {
    width: 270px !important;
    max-width: 270px !important;
    height: 58px !important;
    max-height: 58px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html body .topbar .top-right {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: center !important;
    justify-items: end !important;
    gap: 3px !important;
    overflow: visible !important;
  }

  html body .topbar .search,
  html body .topbar .auth-links {
    max-width: 100% !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  html body .topbar .auth-links {
    font-size: 11px !important;
    gap: 5px !important;
  }

  html body .topbar .online-users-counter,
  html body .topbar .bot-status-widget,
  html body .topbar .blorg-token-widget {
    max-width: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  html body .topbar .blorg-ca-copy {
    display: inline-block !important;
    min-width: 28px !important;
    height: 18px !important;
    padding: 0 5px !important;
    line-height: 16px !important;
    vertical-align: middle !important;
  }

  html body .topbar .ad-banner.container {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 2px 0 !important;
  }

  html body .topbar .ad-banner .ad-slot {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  html body .topbar .nav-row.container {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 4px 8px !important;
  }
}

.member-verified,
.member-group-badge {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
}

.member-group-badge {
  left: -5px !important;
  bottom: -5px !important;
}

.member-verified {
  right: -5px !important;
  bottom: -5px !important;
}

.recent-streams-box .stream-player-shell {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.recent-streams-box .stream-player-shell iframe,
.recent-streams-box .stream-placeholder,
.recent-streams-box .stream-player-shell video[data-native-live-video] {
  height: 325px !important;
  min-height: 325px !important;
}

.home-streams .stream-player,
.home-streams .stream-player-shell,
.recent-streams-box .stream-player-shell {
  transform: none !important;
  margin-bottom: 12px !important;
}

body.profile-custom-page .profile-custom-scope {
  width: min(960px, 100%) !important;
  max-width: 960px !important;
}

body.profile-custom-page .profile-table {
  width: 100% !important;
  table-layout: fixed !important;
}

body.profile-custom-page .profile-table .left-col {
  width: 340px !important;
  min-width: 340px !important;
}

body.profile-custom-page .profile-table .center-col {
  width: 620px !important;
  min-width: 0 !important;
}

body.profile-custom-page .profile-header,
body.profile-custom-page .profile-main,
body.profile-custom-page .profile-friend-space {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.profile-custom-page .profile-main > tbody > tr {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.62fr) !important;
}

/* 2026-06-27 stream polish lock */
.stream-player-shell .stream-controls {
  display: none !important;
}

.stream-watermark-link {
  position: absolute !important;
  left: 12px !important;
  bottom: 52px !important;
  z-index: 18 !important;
  display: block !important;
  width: 164px !important;
  max-width: 30% !important;
  line-height: 0 !important;
  pointer-events: auto !important;
}

.stream-watermark-link .stream-watermark,
.stream-watermark {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  opacity: .86 !important;
  pointer-events: auto !important;
}

.stream-player-shell:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: #000 !important;
  transform: none !important;
}

.stream-player-shell:fullscreen iframe,
.stream-player-shell:fullscreen video[data-native-live-video],
.stream-player-shell:fullscreen .stream-placeholder {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

.stream-player-shell:fullscreen .stream-chat-panel,
.stream-player-shell:fullscreen .stream-viewer-controls {
  flex: 0 0 auto !important;
}

.stream-player-shell[data-stream-rotation="0"] iframe,
.stream-player-shell[data-stream-rotation="0"] video[data-native-live-video],
.stream-player-shell[data-stream-rotation="360"] iframe,
.stream-player-shell[data-stream-rotation="360"] video[data-native-live-video] {
  transform: none !important;
}

.stream-player-shell[data-stream-rotation="90"] iframe,
.stream-player-shell[data-stream-rotation="90"] video[data-native-live-video] {
  transform: rotate(90deg) scale(.72) !important;
  transform-origin: center center !important;
}

.stream-player-shell[data-stream-rotation="180"] iframe,
.stream-player-shell[data-stream-rotation="180"] video[data-native-live-video] {
  transform: rotate(180deg) !important;
  transform-origin: center center !important;
}

.stream-player-shell[data-stream-rotation="270"] iframe,
.stream-player-shell[data-stream-rotation="270"] video[data-native-live-video] {
  transform: rotate(270deg) scale(.72) !important;
  transform-origin: center center !important;
}

.stream-light-button {
  height: 24px;
  padding: 1px 6px;
  border: 2px outset #dcdcdc;
  background: #fff7b0;
  color: #111;
  font-size: 11px;
  cursor: pointer;
}

body.profile-custom-page .profile-summary-card .mini-info-table td:first-child {
  width: 58px !important;
}

body.profile-custom-page .profile-summary-card .online-now {
  margin-left: -4px !important;
}

/* Final stream/profile overrides */
.profile-summary-card .online-now {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 94px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.profile-summary-card .online-icon {
  width: 90px !important;
  max-width: 90px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.stream-player-shell {
  overflow: hidden !important;
}

.stream-player-shell iframe,
.stream-player-shell video[data-native-live-video],
.stream-player-shell .stream-placeholder {
  position: relative;
  z-index: 1;
}

.stream-watermark {
  left: 10px !important;
  bottom: 44px !important;
  z-index: 8 !important;
  width: 116px !important;
  max-width: 24% !important;
  opacity: .78 !important;
}

.stream-chat-panel {
  position: relative;
  z-index: 9;
  border-top: 1px solid #5f5f5f;
  background: #101010;
  color: #fff;
  font-size: 12px;
}

.stream-chat-head {
  padding: 4px 7px;
  background: #1d4f93;
  font-weight: bold;
}

.stream-chat-list {
  max-height: 120px;
  overflow-y: auto;
  padding: 5px 7px;
}

.stream-chat-message {
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.stream-chat-name {
  color: #9fd0ff;
  font-weight: bold;
  margin-right: 5px;
}

.stream-chat-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px;
  padding: 5px;
  background: #202020;
}

.stream-chat-form input {
  min-width: 0;
}

.stream-chat-emotes {
  position: absolute;
  right: 46px;
  bottom: 32px;
  z-index: 20;
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid #7da7d9;
  background: #fff;
}

.stream-chat-emotes[hidden] {
  display: none !important;
}

.stream-chat-emotes button {
  width: 28px;
  height: 28px;
  padding: 2px;
}

.stream-chat-emotes img,
.stream-chat-emote {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
}

.stream-floating-comments {
  position: absolute;
  right: 10px;
  bottom: 54px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
  pointer-events: none;
}

.stream-float-comment {
  max-width: min(280px, 44vw);
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  animation: streamFloatUp 4.3s ease forwards;
}

.stream-float-comment strong {
  color: #9fd0ff;
  margin-right: 5px;
}

@keyframes streamFloatUp {
  0% { opacity: 0; transform: translateY(14px); }
  12% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-42px); }
}

.stream-orient-button {
  width: 26px;
  height: 24px;
  border: 2px outset #dcdcdc;
  background: #eee;
  color: #111;
  font-weight: bold;
  cursor: pointer;
}

.stream-player-shell.stream-rotate-portrait iframe,
.stream-player-shell.stream-rotate-portrait video[data-native-live-video] {
  transform: rotate(90deg);
  transform-origin: center;
  width: 56.25% !important;
  min-width: 56.25% !important;
  margin: 0 auto;
  aspect-ratio: 9 / 16 !important;
}

/* 2026-06-27: profile, stream, badge, and comment polish. */
.stream-player-shell {
  overflow: hidden !important;
}

.stream-watermark {
  left: 14px !important;
  bottom: 48px !important;
  width: 150px !important;
  max-width: 32% !important;
  height: 32px !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: .9 !important;
}

.stream-player-shell.stream-theater {
  width: min(1040px, 96vw) !important;
}

.stream-player-shell.stream-theater iframe,
.stream-player-shell.stream-theater .stream-placeholder,
.stream-player-shell.stream-theater video[data-native-live-video] {
  height: min(70vh, 620px) !important;
  min-height: min(70vh, 620px) !important;
}

.stream-player-shell:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  transform: none !important;
  left: 0 !important;
  top: 0 !important;
}

.stream-player-shell:fullscreen iframe,
.stream-player-shell:fullscreen .stream-placeholder,
.stream-player-shell:fullscreen video[data-native-live-video] {
  width: 100vw !important;
  height: calc(100vh - 42px) !important;
  min-height: calc(100vh - 42px) !important;
  object-fit: contain !important;
}

.member-group-badge {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  left: -7px !important;
  bottom: -7px !important;
}

body.profile-custom-page .profile-custom-scope {
  width: 960px !important;
  max-width: 960px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.profile-custom-page .profile-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

body.profile-custom-page .profile-table .left-col {
  width: 340px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
}

body.profile-custom-page .profile-table .center-col {
  width: 620px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
}

body.profile-custom-page .profile-summary-card,
body.profile-custom-page .profile-summary-card table,
body.profile-custom-page .profile-summary-card td {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.profile-custom-page .mini-info,
body.profile-custom-page .mini-info-table,
body.profile-custom-page .mini-info-table td {
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  box-sizing: border-box !important;
}

body.profile-custom-page .mini-info-table td:first-child {
  width: 74px !important;
}

.blog-entry-kudos-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.blog-entry-kudos-row form,
.blog-comment-actions form,
.blog-comment-main form {
  display: inline-block !important;
  margin: 0 4px 4px 0 !important;
}

.blog-comment-form,
.blog-reply-form {
  margin-top: 8px !important;
}

.blog-comment-form textarea,
.blog-reply-form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}

.blog-comment-media-upload {
  display: block !important;
  margin: 4px 0 !important;
  font-size: 12px !important;
}

.blog-comment-media-upload input {
  display: block !important;
  margin-top: 3px !important;
  max-width: 100% !important;
}

.blog-comment-replies {
  margin: 8px 0 0 18px !important;
  border-left: 2px solid #bfd7f0 !important;
  padding-left: 8px !important;
}

.blog-comment-reply {
  margin-bottom: 6px !important;
}

.emote-board {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0;
  padding: 4px;
  border: 1px solid #9ec5f3;
  background: #eef6ff;
}

.emote-board[hidden] {
  display: none;
}

.emote-choice {
  min-width: 28px;
  height: 26px;
  padding: 2px 4px;
  border: 1px solid #6b9bd3;
  background: #fff;
  cursor: pointer;
}

.emote-choice img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
}

/* 2026-06-27: final profile/music/stream containment pass. */
body.profile-custom-page .footer-info-links {
  display: none !important;
}

body.profile-custom-page .pfp-info-wrap {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body.profile-custom-page .pfp-col {
  flex: 0 0 auto !important;
}

body.profile-custom-page .mini-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 176px !important;
}

body.profile-custom-page .mini-info-table {
  table-layout: fixed !important;
  width: 100% !important;
}

body.profile-custom-page .mini-info-table td {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.retro-music-controls {
  display: grid !important;
  grid-template-columns: repeat(5, 26px) minmax(78px, 1fr) 26px !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.retro-music-controls button {
  width: 26px !important;
  height: 24px !important;
  min-width: 26px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  line-height: 1 !important;
  font-size: 12px !important;
}

.retro-music-controls .music-volume {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.retro-music-controls .music-volume input {
  width: 100% !important;
  min-width: 58px !important;
}

.stream-watermark {
  left: 10px !important;
  bottom: 52px !important;
  width: 138px !important;
  height: 30px !important;
  max-width: 30% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.stream-player-shell.compact-stream-player .stream-watermark,
.streams-featured .stream-watermark {
  bottom: 44px !important;
}

/* 2026-06-26: end-of-file visual lock for logo scale, header fit, stream size, badges, and profile alignment. */
@media (min-width: 769px) {
  html body .topbar {
    height: 138px !important;
    min-height: 138px !important;
    max-height: 138px !important;
    overflow: hidden !important;
  }

  html body .topbar .top-inner.container {
    width: 960px !important;
    max-width: 960px !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    padding: 4px 12px !important;
    grid-template-columns: 270px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: center !important;
  }

  html body .topbar .brand,
  html body .topbar .brand a {
    width: 270px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  html body .topbar .brand-logo,
  html body .topbar .brand .brand-logo {
    width: 270px !important;
    max-width: 270px !important;
    height: 58px !important;
    max-height: 58px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html body .topbar .brand-logo.brand-logo-tunes {
    width: 270px !important;
    max-width: 270px !important;
    height: 58px !important;
    max-height: 58px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html body .topbar .top-right {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: center !important;
    justify-items: end !important;
    gap: 3px !important;
    overflow: visible !important;
  }

  html body .topbar .search,
  html body .topbar .auth-links {
    max-width: 100% !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  html body .topbar .auth-links {
    font-size: 11px !important;
    gap: 5px !important;
  }

  html body .topbar .online-users-counter,
  html body .topbar .bot-status-widget,
  html body .topbar .blorg-token-widget {
    max-width: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  html body .topbar .blorg-ca-copy {
    display: inline-block !important;
    min-width: 28px !important;
    height: 18px !important;
    padding: 0 5px !important;
    line-height: 16px !important;
    vertical-align: middle !important;
  }

  html body .topbar .ad-banner.container {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 2px 0 !important;
  }

  html body .topbar .ad-banner .ad-slot {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  html body .topbar .nav-row.container {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 4px 8px !important;
  }
}

.member-verified,
.member-group-badge {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
}

.member-group-badge {
  left: -5px !important;
  bottom: -5px !important;
}

.member-verified {
  right: -5px !important;
  bottom: -5px !important;
}

.recent-streams-box .stream-player-shell {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.recent-streams-box .stream-player-shell iframe,
.recent-streams-box .stream-placeholder,
.recent-streams-box .stream-player-shell video[data-native-live-video] {
  height: 325px !important;
  min-height: 325px !important;
}

.home-streams .stream-player,
.home-streams .stream-player-shell,
.recent-streams-box .stream-player-shell {
  transform: none !important;
  margin-bottom: 12px !important;
}

body.profile-custom-page .profile-custom-scope {
  width: min(960px, 100%) !important;
  max-width: 960px !important;
}

body.profile-custom-page .profile-table {
  width: 100% !important;
  table-layout: fixed !important;
}

body.profile-custom-page .profile-table .left-col {
  width: 340px !important;
  min-width: 340px !important;
}

body.profile-custom-page .profile-table .center-col {
  width: 620px !important;
  min-width: 0 !important;
}

body.profile-custom-page .profile-header,
body.profile-custom-page .profile-main,
body.profile-custom-page .profile-friend-space {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.profile-custom-page .profile-main > tbody > tr {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.62fr) !important;
}

/* 2026-06-26: final quick polish for restored header scale, token fit, badges, and profile ads. */
@media (min-width: 769px) {
  html body .topbar {
    height: 122px !important;
    min-height: 122px !important;
    max-height: 122px !important;
  }

  html body .topbar .top-inner.container {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    grid-template-columns: 245px minmax(0, 1fr) !important;
    padding: 5px 10px !important;
  }

  html body .topbar .brand,
  html body .topbar .brand a {
    width: 245px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }

  html body .topbar .brand-logo,
  html body .topbar .brand .brand-logo {
    width: 230px !important;
    max-width: 230px !important;
    max-height: 52px !important;
  }

  html body .topbar .brand-logo.brand-logo-tunes {
    width: 218px !important;
    max-width: 218px !important;
    max-height: 52px !important;
  }

  html body .topbar .top-right {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    gap: 3px 5px !important;
  }

  html body .topbar .auth-links {
    max-width: 520px !important;
    font-size: 10px !important;
    overflow: visible !important;
  }

  html body .topbar .online-users-counter,
  html body .topbar .bot-status-widget,
  html body .topbar .blorg-token-widget {
    max-width: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  html body .topbar .blorg-ca-copy {
    min-width: 27px !important;
    height: 18px !important;
    padding: 0 4px !important;
    line-height: 16px !important;
  }

  html body .topbar .ad-banner.container {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  html body .topbar .nav-row.container {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
  }
}

.member-pfp-wrap .member-group-badge,
.profile-pfp-wrap .member-group-badge,
.friend-photo-wrap .member-group-badge,
.pfp-badge-wrap .member-group-badge,
.avatar-wrap .member-group-badge,
.caller-avatar-wrap .member-group-badge,
.community-post-avatar .member-group-badge,
.blog-author-avatar .member-group-badge,
.cool-person .member-group-badge {
  left: -4px !important;
  bottom: -4px !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
  background-size: contain !important;
}

.profile-ad-slot,
.horizontal-ad.profile-ad-slot {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 60px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.profile-ad-slot .custom-ad-profile {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 60px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.profile-ad-slot .custom-ad-profile img {
  max-width: 100% !important;
  height: 60px !important;
  object-fit: cover !important;
}

.profile-ad-slot .custom-ad-profile strong {
  font-size: 22px;
  line-height: 1.05;
}

.error-page-box {
  margin-top: 16px;
  min-height: 180px;
}

/* 2026-06-25: final compact header pass after Bot Status and Tunes logo. */
@media (min-width: 769px) {
  html body .topbar {
    width: 960px !important;
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body .topbar .top-inner.container {
    width: 960px !important;
    max-width: 960px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 4px 12px !important;
    display: grid !important;
    grid-template-columns: 210px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body .topbar .brand,
  html body .topbar .brand a {
    width: 210px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  html body .topbar .brand-logo,
  html body .topbar .brand .brand-logo {
    width: 196px !important;
    max-width: 196px !important;
    max-height: 40px !important;
    height: auto !important;
    object-fit: contain !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
  }

  html body .topbar .brand-logo.brand-logo-tunes {
    width: 185px !important;
    max-width: 185px !important;
    max-height: 40px !important;
  }

  html body .topbar .top-right {
    min-width: 0 !important;
    height: 40px !important;
    max-height: 40px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    align-content: center !important;
    gap: 2px 5px !important;
    overflow: hidden !important;
  }

  html body .topbar .search,
  html body .topbar .auth-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  html body .topbar .search label {
    font-size: 10px !important;
  }

  html body .topbar .search input[type="text"] {
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    height: 20px !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
  }

  html body .topbar .search button {
    height: 22px !important;
    padding: 1px 7px !important;
    font-size: 11px !important;
  }

  html body .topbar .auth-links {
    max-width: 438px !important;
    font-size: 10px !important;
  }

  html body .topbar .online-users-counter {
    max-width: 70px !important;
    overflow: hidden !important;
  }

  html body .topbar .bot-status-widget {
    max-width: 50px !important;
    overflow: hidden !important;
  }

  html body .topbar .blorg-token-widget {
    max-width: 126px !important;
    overflow: hidden !important;
  }

  html body .topbar .blorg-ca-copy {
    min-width: 24px !important;
    padding: 0 3px !important;
  }

  html body .topbar .ad-banner.container {
    width: 960px !important;
    max-width: 960px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 auto !important;
    padding: 1px 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body .topbar .ad-banner .ad-slot {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 2px !important;
    box-sizing: border-box !important;
  }

  html body .topbar .nav-row.container {
    width: 960px !important;
    max-width: 960px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin: 0 auto !important;
    padding: 3px 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

.member-pfp-wrap,
.profile-pfp-wrap,
.friend-photo-wrap,
.pfp-badge-wrap,
.avatar-wrap,
.caller-avatar-wrap,
.community-post-avatar,
.blog-author-avatar,
.cool-person .pfp-badge-wrap {
  position: relative !important;
  display: inline-block !important;
  overflow: visible !important;
  line-height: 0 !important;
}

.member-pfp-wrap .member-group-badge,
.profile-pfp-wrap .member-group-badge,
.friend-photo-wrap .member-group-badge,
.pfp-badge-wrap .member-group-badge,
.avatar-wrap .member-group-badge,
.caller-avatar-wrap .member-group-badge,
.community-post-avatar .member-group-badge,
.blog-author-avatar .member-group-badge,
.cool-person .member-group-badge {
  position: absolute !important;
  left: -3px !important;
  bottom: -3px !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  display: block !important;
  z-index: 45 !important;
  pointer-events: none !important;
  background: url('/public/images/BlorgGroupBadge.png') center / contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
}

.member-pfp-wrap .member-verified,
.profile-pfp-wrap .member-verified,
.pfp-badge-wrap .member-verified {
  z-index: 46 !important;
}

/* 2026-06-25: final final compact header override. Keep this after all header guards. */
@media (min-width: 769px) {
  html body .topbar {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    overflow: hidden !important;
  }

  html body .topbar .top-inner.container {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 4px 12px !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
  }

  html body .topbar .brand,
  html body .topbar .brand a {
    width: 220px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  html body .topbar .brand-logo,
  html body .topbar .brand .brand-logo {
    width: 205px !important;
    max-width: 205px !important;
    max-height: 42px !important;
  }

  html body .topbar .brand-logo.brand-logo-tunes {
    width: 190px !important;
    max-width: 190px !important;
    max-height: 42px !important;
  }

  html body .topbar .top-right {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px 5px !important;
  }

  html body .topbar .search {
    max-width: 390px !important;
    gap: 3px !important;
  }

  html body .topbar .search label {
    font-size: 10px !important;
  }

  html body .topbar .search input[type="text"] {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 20px !important;
    font-size: 11px !important;
  }

  html body .topbar .search button {
    height: 22px !important;
    padding: 1px 7px !important;
    font-size: 11px !important;
  }

  html body .topbar .auth-links {
    max-width: 435px !important;
    font-size: 10px !important;
    gap: 4px !important;
  }

  html body .topbar .online-users-counter {
    max-width: 72px !important;
  }

  html body .topbar .bot-status-widget {
    max-width: 54px !important;
  }

  html body .topbar .blorg-token-widget {
    max-width: 126px !important;
  }

  html body .topbar .ad-banner.container {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 1px 0 !important;
  }

  html body .topbar .ad-banner .ad-slot {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  html body .topbar .nav-row.container {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 3px 8px !important;
  }
}
.video-grid { display:flex; gap:8px; flex-wrap:wrap; }
.video-card { width:160px; border:1px solid #ddd; padding:6px; background:#fff; }
.video-card img { width:100%; height:90px; object-fit:cover; }
.video-title { font-size:13px; margin-top:6px; }
.login-box input { width:100%; padding:6px; margin-bottom:6px; box-sizing:border-box; }
.login-actions { display:flex; gap:8px; align-items:center; }
.login-actions button { padding:6px 10px; }
.signup-btn { background:#ff7f00; color:#fff; padding:6px 8px; text-decoration:none; border-radius:3px; }
.ad-box .ad-slot { height:120px; background:#fff6e6; border:1px solid #ffd59a; padding:8px; }
.ad-banner { display:flex; justify-content:center; padding:5px 0; }
.ad-banner .ad-slot { width:728px; height:76px; border:1px solid #ccc; background:#fff; display:flex; align-items:center; justify-content:center; color:#666; font-weight:bold; }
.thumbs-mini img { width:80px; height:80px; margin-right:6px; }
/* Profile table styles */
.profile-table td { vertical-align:top; }
.profile-table .box { margin-bottom:10px; }
.profile-header { border:2px solid #000; padding:8px; text-align:center; font-weight:bold; background:#fff; margin-bottom:10px; }
.info-table { width:100%; border-collapse:collapse; }
.info-table td { border:1px solid #e6eef8; padding:6px; font-size:13px; }
.online-icon { width:auto; height:24px; vertical-align:middle; margin-right:6px; }
.online-now { display:inline-flex; align-items:center; gap:4px; font-size:13px; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.online-text { color:#2c8a28; font-weight:bold; font-size:13px; }
.mini-info-table td,
.profile-summary-card td { overflow-wrap:anywhere; }

/* Notifications / My Mail panel (retro colored lines) */
.notifications-panel { background:#fff; border:1px solid #cfd8e3; margin-top:8px; padding:6px; }
.notifications-panel h4 { background:#0e1079; color:#fff; padding:6px; margin:0 0 6px 0; font-size:14px; }
.my-mail-list { list-style:none; margin:0; padding:0 6px; }
.my-mail-list li { padding:4px 0; font-weight:bold; font-size:13px; }
.my-mail-list li a { color:inherit; text-decoration:none; }
.my-mail-list .nm-red { color:#e60000; }
.my-mail-list .nm-orange { color:#ff6f00; }
.my-mail-list .nm-yellow { color:#ffcf33; }
.my-mail-list .nm-lime { color:#4caf50; }
.my-mail-list .nm-blue { color:#1a73e8; }
.my-mail-list .nm-purple { color:#8e44ad; }
.my-mail-list .nm-pink { color:#ff66b2; }
.my-mail-list .nm-cyan { color:#00bcd4; }
.my-mail-list .nm-teal { color:#00796b; }
.my-mail-list .nm-black { color:#000000; }
.mail-tabs { margin-top:8px; font-size:12px; background:#e9eef9; padding:6px; text-align:center; }

.blocked-note { color:#b00000; font-weight:bold; margin-bottom:8px; }
.no-notifiers { color:#666; padding:8px; }
.orange-header { background:#ffd8b3; padding:6px; border:1px solid #ffcc99; font-weight:bold; margin-bottom:8px; }
.friend-grid { display:flex; gap:8px; flex-wrap:wrap; }
.friend-card img { width:64px; height:64px; object-fit:cover; }
.comment-list .comment-item { border-bottom:1px dashed #ddd; padding:8px 0; }
/* Retro bullet lists */
.box ul { list-style: disc; margin-left:18px; }
.friend-online { margin-top:6px; font-size:12px; color:#2c8a28; }

/* Brand logo */
.brand-logo { height:112px; display:inline-block; background:transparent; width:auto; }
.brand-logo-tunes {
  width: 310px !important;
  max-width: none !important;
}

/* Horizontal ad for left column */
.horizontal-ad { width:468px; height:60px; border:1px solid #ccc; background:#fff6e6; display:flex; align-items:center; justify-content:center; color:#666; font-weight:bold; margin:10px 0; }

/* Interests box styling (blue table) */
.interests-box table { width:100%; border-collapse:collapse; background:#e8f6ff; }
.interests-box td { border:1px solid #cfe8fb; padding:8px; vertical-align:top; }
.interests-box td:first-child { width:120px; background:#c1e3ff; font-weight:bold; }

@media (max-width:800px){ .profile-page{flex-direction:column;} .left-col{width:100%;} }

/* PFP + mini info layout */
.pfp-info-wrap { display:flex; gap:12px; align-items:flex-start; }
.profile-summary-card {
  background: #cfe3f7;
  border: 0;
  padding: 8px;
}

.profile-summary-card .box {
  border-color: #8bb5de;
}

.view-more {
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  margin-top: 3px;
}

.view-more a {
  color: #003399;
  text-decoration: none;
}

.pfp-col .pfp { width:140px; height:140px; object-fit:cover; border:0; }
.mini-info { font-size:13px; }
.mini-info .mini-header { font-size:18px; margin-bottom:6px; }
.mini-info-table td { padding:2px 0; }
.mini-info-table td:first-child { font-weight:normal; width:auto; color:#111; }

/* Comments styling to match retro screenshot */
.comment-list .comment-item { background:#ffd8b3; border:1px solid #ffcc99; padding:10px; margin-bottom:8px; border-radius:4px; }
.comments textarea, form textarea { background:#fff6e6; border:1px solid #ffcc99; }

/* Contact box style similar to screenshot */
.contact-box { border:1px solid #7fa8d6; background:#f2f9ff; padding:10px; margin-top:10px; }
.contact-box form, .contact-box a { display:block; margin:6px 0; color:#0e1079; }

.classic-contact-box {
  padding: 0;
  border: 1px solid #2f6da1;
  background: #fff;
}

.classic-contact-box h4 {
  margin: 0;
  padding: 4px 8px;
  background: #5f9aca;
  color: #fff;
  font-size: 15px;
}

.classic-contact-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 8px;
  padding-bottom: 6px;
}

.classic-contact-box h4,
.classic-contact-box .blocked-note,
.classic-contact-box p {
  grid-column: 1 / -1;
}

.classic-contact-box form,
.classic-contact-box .contact-action {
  display: block;
  margin: 4px 6px;
}

.classic-contact-box button {
  background: transparent;
  border: 0;
  color: #003399;
  cursor: pointer;
  font-weight: bold;
  padding: 0;
  text-align: left;
}

.classic-contact-box img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 5px;
}

.contact-action-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 5px;
  vertical-align: middle;
  border: 1px solid #b8c7da;
  background:
    linear-gradient(135deg, transparent 0 45%, #7aa85b 46% 58%, transparent 59%),
    linear-gradient(#fff, #eaf4ff);
  box-sizing: border-box;
}

.profile-blurbs h3 {
  margin: 0 0 8px;
  padding: 4px 8px;
  background: #ffd7b3;
  color: #ff6f00;
  font-size: 16px;
}

.profile-blurbs h4 {
  margin: 8px 0 2px;
  color: #ff6f00;
  font-size: 15px;
}

.profile-blurbs .bio,
.custom-profile-html {
  font-size: 13px;
  line-height: 1.25;
}

.profile-blurbs iframe,
.comment-rendered iframe {
  max-width: 100%;
  width: 360px;
  height: 203px;
}

.youtube-embed {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  margin: 6px 0 10px;
  background: #ddd;
  border: 1px solid #b7b7b7;
}

.youtube-embed iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

.youtube-embed .youtube-fallback {
  position: absolute;
  left: 6px;
  bottom: 4px;
  z-index: 1;
  background: rgba(255,255,255,.9);
  color: #003399;
  font-size: 11px;
  padding: 2px 4px;
}

.auth-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notifications-page h2 {
  margin-top: 0;
}

.notifications-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.notif {
  display: grid;
  grid-template-columns: 130px 1fr 170px;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid #dbe7f6;
}

.notif.unread {
  background: #fff8e8;
  font-weight: bold;
}

.notif-type {
  color: #003399;
}

.comments-compose {
  margin-bottom: 12px;
}

.comments-compose h3 {
  margin-bottom: 6px;
}

.comments-box {
  border: 1px solid #bbb;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.25);
  background: #fff;
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
}

.comments-title {
  font-weight: bold;
  font-size: 18px;
  color: #000;
  padding: 4px 7px 0;
}

.comments-meta {
  display: flex;
  justify-content: space-between;
  padding: 2px 8px 5px;
  color: #000;
  font-size: 12px;
}

.comments-box .comment-list {
  margin: 0 7px 7px;
}

.comments-box .comment-item {
  display: grid;
  grid-template-columns: 118px 1fr;
  padding: 0;
  margin: 0 0 2px;
  border: 0;
  background: #ffd8b3;
  border-radius: 0;
}

.comments-box .comment-author {
  background: #ff982a;
  text-align: center;
  padding: 6px;
  color: #003399;
  font-weight: bold;
}

.comments-box .comment-author a {
  color: #003399;
  text-decoration: none;
}

.comments-box .comment-author img {
  display: block;
  width: 74px;
  height: 92px;
  object-fit: cover;
  margin: 8px auto 0;
}

.comments-box .comment-body {
  padding: 6px 8px;
  border-left: 2px solid #fff;
  min-height: 104px;
  font-size: 13px;
}

.comments-box .comment-date {
  font-size: 14px;
  font-weight: bold;
  color: #000;
  margin-bottom: 8px;
}

.comments-box .comment-body p {
  margin: 0;
  white-space: pre-wrap;
}

.comment-rendered {
  white-space: pre-wrap;
}

.comment-rendered iframe {
  display: block;
  margin-top: 6px;
}

.delete-comment-form {
  text-align: right;
  margin: 18px 0 0;
}

.delete-comment-form button {
  background: transparent;
  border: 0;
  color: #0000cc;
  cursor: pointer;
  font-weight: bold;
  padding: 0;
}

.friend-space {
  border: 0;
  padding: 0;
}

.friend-space h4 {
  margin: 0;
  padding: 7px 10px;
  background: #ffd7b3;
  color: #d2691e;
  font-size: 16px;
}

.friend-count {
  padding: 10px 8px 8px;
  font-size: 15px;
}

.friend-count span {
  color: #b00000;
  font-weight: bold;
}

.friend-space .friend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 10px;
  padding: 6px 8px 12px;
}

.friend-space .friend-card {
  text-align: center;
}

.friend-space .friend-name a {
  color: #003399;
  font-weight: bold;
  text-decoration: none;
}

.friend-space .friend-card img {
  width: 95px;
  height: 95px;
  object-fit: cover;
  border: 2px solid #003399;
  margin-top: 4px;
}

.friend-photo-wrap {
  position: relative;
  display: inline-block;
}

.friend-online-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 2;
  width: 18px;
  height: 18px;
  overflow: hidden;
  pointer-events: none;
}

.friend-online-badge .online-icon {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  display: block;
}

.friend-space .friend-online {
  min-height: 18px;
  font-weight: bold;
}

.view-all-friends {
  text-align: right;
  padding: 0 10px 10px;
  font-weight: bold;
}

.view-all-friends a {
  color: #c23b22;
}

.home-layout {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 28px;
}

.home-main .box h2,
.home-main .box h3,
.home-side .box h3 {
  background: #cfe4ff;
  border-color: #9fc7ff;
}

.home-videos h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home-videos h2 span {
  color: #003399;
  font-size: 12px;
}

.home-videos .video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.home-videos .video-card {
  position: relative;
  width: auto;
  display: block;
  color: #003399;
  text-decoration: none;
  border: 0;
  padding: 0;
}

.home-videos .video-card img {
  height: 84px;
  border: 1px solid #aaa;
}

.play-badge {
  position: absolute;
  right: 4px;
  top: 62px;
  background: #e9e9e9;
  border: 1px solid #aaa;
  border-radius: 50%;
  font-size: 9px;
  padding: 2px;
  color: #555;
}

.video-source {
  color: #333;
  font-size: 11px;
}

.home-category-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px 16px;
  margin-top: 14px;
  background: #d8c08a;
  border: 1px solid #725F30;
  padding: 8px;
}

.home-category-grid a {
  color: #003399;
  text-decoration: none;
}

.home-category-grid strong {
  color: #e60000;
  font-size: 10px;
}

.nav-new-badge {
  color: #e60000;
  font-size: 9px;
  font-weight: bold;
  line-height: 1;
  vertical-align: super;
}

.nav-new-badge[hidden] {
  display: none !important;
}

.footer-info-links {
  text-align: center;
  margin: 8px 0 4px;
  font-size: 11px;
}

.footer-info-links a {
  color: #003399;
  font-weight: bold;
}

.privacy-page h3 {
  margin: 12px 0 5px;
  color: #003399;
}

.privacy-page ul {
  margin: 6px 0 10px 18px;
  padding: 0;
}

.privacy-page li {
  margin: 3px 0;
  line-height: 1.35;
}

.privacy-updated {
  color: #555;
  font-size: 11px;
}

.home-adsense-slim {
  min-height: 38px;
  margin: 6px 0 10px;
  padding: 3px 6px;
  overflow: hidden;
  text-align: center;
}

.home-adsense-slim ins {
  min-height: 32px;
}

.video-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 220ms ease;
}

.video-lightbox.is-open {
  opacity: 1;
}

.video-lightbox-panel {
  position: relative;
  width: min(760px, 92vw);
  background: #111;
  border: 3px solid #725F30;
  box-shadow: 0 0 28px rgba(0,0,0,.7);
  color: #fff;
  padding: 10px;
  transform: scale(.96);
  transition: transform 220ms ease;
}

.video-lightbox.is-open .video-lightbox-panel {
  transform: scale(1);
}

.video-lightbox-panel h3 {
  margin: 0 32px 8px 0;
  font-size: 15px;
}

.video-lightbox-panel iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

.video-lightbox-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-open-fallback {
  display: block;
  margin-top: 6px;
  color: #fff;
  text-align: center;
  font-size: 12px;
}

.video-lightbox-close {
  position: absolute;
  right: 8px;
  top: 7px;
  width: 24px;
  height: 22px;
  cursor: pointer;
}

.video-lightbox-fallback {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-promo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  border: 3px solid #222;
  margin-bottom: 12px;
  background: #fff;
}

.home-promo div {
  padding: 7px 14px;
  font-size: 22px;
  font-weight: bold;
}

.home-promo strong {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  background: #f00083;
  color: #fff;
  border-radius: 50%;
  margin-right: 8px;
}

.home-promo a {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f00083;
  color: #fff;
  font-weight: bold;
  font-size: 24px;
  text-decoration: none;
}

.music-feature {
  display: flex;
  gap: 12px;
}

.music-feature img {
  width: 96px;
  height: 96px;
  object-fit: cover;
}

.retro-music-player {
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0;
  border: 2px solid #777;
  background: #d8d8d8;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px #fff;
}

.retro-music-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: linear-gradient(#eee, #aaa);
  border-bottom: 1px solid #666;
}

.music-volume {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  font-size: 10px;
}

.music-volume input {
  width: 70px;
}

.retro-music-controls button {
  display: inline-flex;
  width: 25px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid #777;
  border-radius: 4px;
  background: linear-gradient(#fff, #bcbcbc);
  color: #178a22;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
}

.retro-music-screen {
  min-height: 42px;
  padding: 6px 62px 5px 8px;
  position: relative;
  background: #232323;
  color: #fff;
  border-bottom: 1px solid #666;
}

.retro-music-screen strong,
.retro-music-screen span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retro-music-bars {
  position: absolute;
  right: 8px;
  bottom: 7px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 30px;
}

.retro-music-bars i {
  display: block;
  width: 6px;
  background: linear-gradient(#f00 0 25%, #ff0 25% 55%, #21d321 55% 100%);
  border: 1px solid #111;
}

.retro-music-bars i:nth-child(1) { height: 10px; }
.retro-music-bars i:nth-child(2) { height: 8px; }
.retro-music-bars i:nth-child(3) { height: 11px; }
.retro-music-bars i:nth-child(4) { height: 7px; }
.retro-music-bars i:nth-child(5) { height: 9px; }

.retro-music-player.is-playing .retro-music-bars i {
  animation: blorg-eq 520ms infinite alternate ease-in-out;
}

.retro-music-player.is-playing .retro-music-bars i:nth-child(2) { animation-delay: 90ms; }
.retro-music-player.is-playing .retro-music-bars i:nth-child(3) { animation-delay: 180ms; }
.retro-music-player.is-playing .retro-music-bars i:nth-child(4) { animation-delay: 270ms; }
.retro-music-player.is-playing .retro-music-bars i:nth-child(5) { animation-delay: 360ms; }

@keyframes blorg-eq {
  from { transform: scaleY(.45); transform-origin: bottom; }
  to { transform: scaleY(1.2); transform-origin: bottom; }
}

.retro-music-stage iframe {
  display: block;
  width: 100%;
  height: 126px;
  border: 0;
  background: #111;
}

.retro-tracklist {
  background: #f2f2f2;
  max-height: 210px;
  overflow-y: auto;
}

.retro-tracklist > button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  width: 100%;
  gap: 4px;
  border: 0;
  border-bottom: 1px dotted #999;
  background: #fff;
  color: #003399;
  padding: 5px 7px;
  text-align: left;
  cursor: pointer;
}

.retro-tracklist > button.active {
  background: #d8c08a;
  color: #4A3418;
}

.retro-tracklist small {
  color: #555;
}

.retro-track-empty {
  padding: 12px;
  color: #555;
  text-align: center;
}

.retro-music-controls button.active {
  background: #725F30;
  color: #fff;
}

.retro-music-body img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border: 1px solid #aaa;
  background: #fff;
}

.retro-music-body a {
  color: #003399;
  font-weight: bold;
}

.retro-music-body p {
  margin: 3px 0 7px;
  color: #444;
}

.retro-music-body audio {
  width: 100%;
  height: 28px;
}

.soundcloud-player {
  width: 100%;
  height: 166px;
  border: 0;
}

.profile-music-editor {
  grid-column: 1 / -1;
  position: relative;
  border: 1px solid #725F30;
  background: #f8f3e6;
  padding: 10px;
}

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

.music-search-results {
  position: relative;
  z-index: 5;
  border: 1px solid #725F30;
  background: #fff;
  max-height: 240px;
  overflow-y: auto;
}

.music-search-results > button {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #ddd;
  background: #fff;
  padding: 7px;
  text-align: left;
  cursor: pointer;
}

.music-search-results > button:hover { background: #efe7d4; }
.music-search-results strong,
.music-search-results span { display: block; }
.music-result-status { padding: 8px; }

.profile-playlist-editor {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.profile-playlist-editor li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 28px 28px 28px;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border-bottom: 1px solid #ccb985;
  background: #fff;
}

.profile-playlist-editor small { display: block; color: #666; }
.playlist-grip { cursor: grab; font-weight: bold; }
.playlist-empty { display: block !important; color: #666; text-align: center; }

.field-help,
.restart-profile-tutorial {
  border: 1px solid #604822;
  background: #d8c08a;
  color: #4A3418;
  cursor: pointer;
  font-weight: bold;
}

.field-help {
  width: 22px;
  height: 22px;
  margin: 2px 0 4px 5px;
  border-radius: 50%;
}

.restart-profile-tutorial {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 5px 8px;
}

.edit-tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(0,0,0,.75);
}

.tutorial-highlight {
  position: relative !important;
  z-index: 12002 !important;
  box-shadow: 0 0 0 4px #ffd54a, 0 0 22px #fff !important;
}

.edit-tutorial-bubble {
  position: fixed;
  z-index: 12003;
  width: min(390px, calc(100vw - 24px));
  background: #fff8cf;
  border: 2px solid #725F30;
  box-shadow: 5px 5px 0 rgba(0,0,0,.45);
  padding: 10px;
  color: #222;
}

.edit-tutorial-bubble strong { color: #4A3418; font-size: 15px; }
.edit-tutorial-bubble p { white-space: pre-wrap; }
.tutorial-actions { display: flex; justify-content: space-between; align-items: center; }

.retro-music-links,
.retro-music-footer {
  color: #333;
  font-size: 11px;
}

.retro-music-footer {
  padding: 4px 8px;
  text-align: right;
  background: #fff;
  border-top: 1px solid #bbb;
  font-weight: bold;
}

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

.home-people-grid a {
  color: #003399;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  font-size: 12px;
}

.home-people-grid img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  display: block;
  margin: 0 auto 3px;
}

.mail-classic {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
}

.mail-folder-list {
  border: 1px solid #9fc7ff;
  background: #e8f4ff;
}

.mail-folder-list a {
  display: block;
  padding: 5px 8px;
  color: #003399;
  border-bottom: 1px solid #c4ddf6;
  font-weight: bold;
  text-decoration: none;
}

.mail-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.bright-idea {
  font-size: 12px;
  font-weight: bold;
}

.bright-idea span {
  font-weight: normal;
}

.mail-search-row,
.mail-pager,
.mail-bottom-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 1px solid #79a9d8;
  border-right: 1px solid #79a9d8;
  padding: 5px;
}

.mail-search-row input {
  width: 150px;
}

.classic-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #79a9d8;
}

.classic-table th {
  background: #5f9aca;
  color: #fff;
  text-align: left;
  padding: 6px;
  border-right: 2px solid #dbeaf8;
}

.classic-table td {
  background: #e5f0fb;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #edf6ff;
  padding: 7px;
  vertical-align: top;
}

.classic-table .mail-unread td {
  font-weight: bold;
  background: #fff8d8;
}

.mail-check {
  width: 28px;
}

.mail-from-cell img {
  display: block;
  width: 92px;
  height: 72px;
  object-fit: cover;
  border: 1px solid #003399;
  margin-bottom: 4px;
}

.mail-from-cell a {
  color: #003399;
  font-weight: bold;
}

.reply-form textarea {
  width: 100%;
  min-height: 120px;
  box-sizing: border-box;
}

.profile-friend-space {
  margin: 12px 0;
}

.profile-friend-space .friend-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.friend-photo-wrap {
  position: relative;
  display: inline-block;
}

.friend-online-badge {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 2;
  min-width: 16px;
  min-height: 16px;
}

.friend-online-badge .online-icon {
  width: auto;
  height: 15px;
  margin: 0 !important;
  vertical-align: top !important;
}

.profile-main .photo-grid,
.album-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.profile-table .right-col {
  display: none;
}

.profile-table .center-col {
  width: auto;
}

.profile-main {
  width: 100%;
  table-layout: fixed;
}

.profile-main > tbody > tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 430px);
  gap: 16px;
}

.profile-main > tbody > tr > td {
  width: auto !important;
  display: block;
}

.photo-card img {
  cursor: zoom-in;
}

.photo-card {
  width: auto;
  position: relative;
  min-width: 0;
}

.photo-card .profile-photo-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  display: block;
}

.photo-card .profile-video-thumb {
  background: #000;
  cursor: default;
}

.photo-caption {
  font-size: 11px;
  line-height: 1.2;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.photo-caption a {
  color: #003399;
  font-weight: bold;
}

.photo-caption .caption-user-tag {
  color: #d4a600;
  background: #fff8a8;
  padding: 0 2px;
}

.editable-caption {
  cursor: text;
}

.inline-caption-editor {
  width: 100%;
  min-height: 56px;
  box-sizing: border-box;
  font: 11px Arial, Helvetica, sans-serif;
}

.photo-reactions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0;
  font-size: 11px;
}

.caption-edit-button,
.inline-caption-save {
  background: #eef6ff;
  border: 1px solid #7fa8d6;
  color: #003399;
  cursor: pointer;
  font-size: 11px;
  margin-top: 4px;
}

.photo-reactions button,
.remove-tag-form button {
  background: #fff16a;
  border: 1px solid #777;
  color: #003399;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 2px 5px;
}

.photo-reactions button.active {
  background: #ffcc33;
  border-color: #003399;
}

.tag-suggest-box {
  position: absolute;
  z-index: 1000;
  width: 230px;
  max-height: 190px;
  overflow-y: auto;
  background: #fff8c7;
  border: 2px solid #d4a600;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
  font: 11px Arial, Helvetica, sans-serif;
}

.tag-suggest-help {
  padding: 5px 7px;
  color: #775c00;
  border-bottom: 1px solid #ead56a;
}

.tag-suggest-box button {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 5px;
  align-items: center;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #f0dfa0;
  background: #fffbe0;
  padding: 4px;
  cursor: pointer;
}

.tag-suggest-box img {
  width: 26px;
  height: 26px;
  object-fit: cover;
}

.tag-suggest-box small {
  grid-column: 2;
  color: #003399;
}

.caption-edit-form,
.emoji-picker,
.photo-like-form {
  display: none !important;
}

.caption-edit-form textarea {
  width: 100%;
  min-height: 44px;
  max-height: 70px;
  box-sizing: border-box;
  font-size: 11px;
}

.caption-edit-form button {
  font-size: 11px;
}

.photo-like-form {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 3px 0;
  font-size: 11px;
}

.photo-like-form button {
  background: #fff16a;
  border: 1px solid #777;
  color: #003399;
  cursor: pointer;
  font-size: 11px;
}

.emoji-picker {
  position: absolute;
  z-index: 20;
  width: 142px;
  padding: 7px;
  background: #d8d5cf;
  border: 2px outset #fff;
  box-shadow: 2px 2px 3px rgba(0,0,0,0.35);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.emoji-picker button {
  background: #fff16a;
  border: 1px solid #777;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 18px;
  padding: 0;
  font-size: 15px;
  cursor: pointer;
}

.photo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200000;
}

.photo-lightbox.open {
  display: flex;
}

.photo-lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border: 4px solid #fff;
  cursor: zoom-out;
}

.search-user-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.search-user-card {
  display: block;
  color: #003399;
  text-decoration: none;
  border: 1px solid #c3def7;
  padding: 8px;
}

.search-user-card img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  display: block;
  margin-bottom: 5px;
}

.edit-help-box {
  float: left;
  width: 150px;
  background: #d8ecff;
  border: 1px solid #9fc7ff;
  color: #333;
  font-size: 12px;
  line-height: 1.2;
  padding: 8px;
  margin: 0 12px 12px 0;
}

.auth-links {
  font-size: 12px;
}

.ad-banner {
  align-items: center;
  gap: 8px;
}

.ad-banner .ad-slot {
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
}

.ad-banner .ad-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ad-banner .ad-slot small {
  margin-top: 4px;
  color: #777;
  font-weight: normal;
}

.home-banner-ad {
  margin-bottom: 12px;
}

.custom-ad {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  border: 2px dashed #888;
  background: #fff7d6;
  color: #a00000;
  text-decoration: none;
  overflow: hidden;
}

.custom-ad img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-ad strong {
  font-size: 22px;
  padding: 0 16px 4px;
}

.custom-ad span {
  color: #333;
  font-weight: bold;
  padding: 0 16px;
}

.custom-ad-home {
  width: 100%;
  height: 132px;
}

.custom-ad-profile {
  width: 468px;
  height: 60px;
}

.profile-ad-slot {
  position: relative;
}

.ad-edit-link {
  color: #003399 !important;
  background: #fff;
  border: 1px solid #9fc7ff;
  padding: 2px 5px;
  font-size: 11px;
  text-decoration: none;
}

.blorgfeed-box h3 {
  background: #ffd7b3;
  border-color: #ffcc99;
  color: #111;
}

.blorgfeed-list {
  background: #fff34d;
  border: 3px solid #ff3030;
}

.blorgfeed-list a {
  display: block;
  padding: 9px;
  color: #e60000;
  text-decoration: none;
  border-bottom: 3px solid #ff3030;
}

.blorgfeed-list a:last-child {
  border-bottom: 0;
}

.blorgfeed-list strong {
  display: block;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.blorgfeed-list em {
  display: block;
  color: #7a0000;
  font-size: 11px;
  font-style: normal;
  margin-top: 2px;
}

.blorgfeed-list span {
  display: block;
  color: #b07400;
  font-size: 12px;
  margin-top: 2px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ads-manager fieldset {
  border: 1px solid #9fc7ff;
  margin: 12px 0;
  padding: 10px;
}

.ads-manager label {
  display: block;
  font-weight: bold;
  margin-top: 8px;
}

.ads-manager input,
.ads-manager textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Full-width 2000s-style nav band */
.topbar {
  padding-top: 0;
  padding-bottom: 0;
}

.topbar .ad-banner.container {
  margin: 1px auto;
  padding: 1px 0;
}

.topbar .brand-logo {
  height: 96px;
}

.topbar .ad-banner .ad-slot {
  height: 50px;
}

.topbar .nav-row.container {
  max-width: none;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.nav-row {
  background: #6699cc;
  border-top: 1px solid #8bb5de;
  border-bottom: 1px solid #4f83b5;
  color: #fff;
  padding: 3px 10px;
}

.nav-row a {
  color: #fff;
  border-right: 1px solid rgba(255,255,255,0.75);
  padding-right: 8px;
  margin-left: 4px;
  margin-right: 4px;
  font-weight: bold;
}

.nav-row a:last-child {
  border-right: 0;
}

/* Friend cards should only show real friends, not presence placeholders. */
.friend-space .friend-online {
  display: none;
}

.safe-code-note {
  background: #fff8d8;
  border: 1px solid #e7d27a;
  padding: 7px;
  font-size: 12px;
  color: #5a4300;
}

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

.ad-stat-card {
  border: 1px solid #9fc7ff;
  background: #eef6ff;
  padding: 8px;
}

.ad-stat-card strong,
.ad-stat-card span,
.ad-stat-card small {
  display: block;
}

.stat-bar {
  height: 10px;
  background: #fff;
  border: 1px solid #9fc7ff;
  margin: 6px 0;
}

.stat-bar i {
  display: block;
  height: 100%;
  background: #ff8c00;
}

.stats-note {
  font-size: 12px;
  color: #555;
}

.ad-request-page label {
  display: block;
  font-weight: bold;
  margin-top: 8px;
}

.ad-request-page input,
.ad-request-page textarea {
  width: 100%;
  box-sizing: border-box;
}

.payment-card {
  border: 1px solid #ffcc99;
  background: #fff8e8;
  padding: 10px;
}

.copy-wallet {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: #fff;
  border: 1px solid #9fc7ff;
  color: #003399;
  padding: 7px;
  cursor: pointer;
}

.legal-footer {
  border-top: 1px solid #c3def7;
  background: #f7fbff;
  font-size: 11px;
  line-height: 1.35;
}

.legal-footer p {
  margin: 6px 0;
}

.age-gate-box,
.claim-link-box {
  max-width: 420px;
  margin: 60px auto;
}

.age-gate-box label,
.claim-link-box label {
  display: block;
  font-weight: bold;
  margin-top: 8px;
}

.age-gate-box input,
.claim-link-box input {
  width: 100%;
  box-sizing: border-box;
}

.age-confirm input {
  width: auto;
}

.mail-center {
  background: #fff;
  border: 1px solid #7fa8d6;
  box-shadow: 4px 4px 8px rgba(0,0,0,0.28);
  padding: 10px;
}

.mail-center-title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 10px;
}

.mail-center-title h2,
.mail-center-title h3 {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: 18px;
}

.mail-center-title h3 {
  grid-column: 1;
  font-size: 16px;
}

.mail-center-title span {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 12px;
  color: #003399;
}

.mail-center-title img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.mail-listing-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 20px 5px;
  font-size: 12px;
}

.classic-mail-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.classic-mail-table th {
  background: #6699cc;
  color: #fff;
  text-align: left;
  padding: 7px;
  border-right: 2px solid #fff;
}

.classic-mail-table td {
  background: #e8f2fc;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  padding: 8px;
  vertical-align: top;
}

.classic-mail-table .select-col {
  width: 28px;
  text-align: center;
}

.classic-mail-table .date-col {
  width: 115px;
  font-size: 12px;
}

.classic-mail-table .from-col {
  width: 170px;
  text-align: center;
}

.classic-mail-table .from-col img {
  display: block;
  width: 94px;
  height: 118px;
  object-fit: cover;
  border: 2px solid #003399;
  margin: 6px auto;
}

.classic-mail-table .from-col a,
.classic-mail-table .confirm-col a {
  color: #003399;
  font-weight: bold;
  text-decoration: none;
}

.classic-mail-table .confirm-col {
  text-align: center;
}

.classic-mail-table .confirm-col form {
  display: inline-block;
  margin: 4px 8px;
}

.classic-mail-table button,
.bulk-friend-form button {
  background: #eee;
  border: 2px outset #fff;
  padding: 2px 12px;
  cursor: pointer;
}

.bulk-friend-form {
  padding: 8px 20px 0;
  font-size: 12px;
}

.bulk-friend-form div {
  margin-top: 8px;
}

.empty-requests,
.empty-callouts {
  text-align: center;
  font-weight: bold;
  padding: 22px !important;
}

.callouts-page h2 {
  margin-top: 0;
}

.callout-form {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 120px;
  gap: 6px 10px;
  align-items: center;
  margin-bottom: 12px;
}

.callout-form label {
  font-weight: bold;
}

.callout-form input {
  box-sizing: border-box;
  width: 100%;
}

.callout-actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: grid;
  gap: 5px;
  align-self: stretch;
}

.callout-form small {
  grid-column: 2 / span 2;
  color: #666;
}

.token-lookup-preview {
  margin: 8px 0 12px;
  padding: 8px;
  border: 1px solid #e7d27a;
  background: #fff8c7;
  font-size: 12px;
}

.token-lookup-preview strong {
  color: #003399;
}

.token-lookup-preview dl {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 3px 8px;
  margin: 6px 0;
}

.token-lookup-preview dt {
  font-weight: bold;
}

.token-lookup-preview dd {
  margin: 0;
}

.token-lookup-preview p {
  margin: 5px 0;
  color: #8a5a00;
}

.lookup-error {
  color: #a00000 !important;
}

#refresh-callouts-btn {
  font-size: 11px;
  padding: 2px 7px;
}

.callouts-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #555;
  margin-bottom: 6px;
}

.callouts-table-wrap {
  overflow-x: auto;
}

.callouts-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  font-size: 12px;
}

.callouts-table th {
  background: #003399;
  color: #fff;
  padding: 6px;
  text-align: left;
}

.callout-sort-heading {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: bold;
  padding: 0;
  text-align: left;
}

.callout-sort-heading.active,
.callout-sort-heading:hover {
  text-decoration: underline;
}

.callouts-table td {
  border: 1px solid #cfe0f3;
  background: #f2f8ff;
  padding: 6px;
  vertical-align: top;
}

.caller-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #003399;
  font-weight: bold;
  text-decoration: none;
}

.caller-link img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border: 1px solid #003399;
}

.token-cell code {
  display: block;
  max-width: 210px;
  overflow-wrap: anywhere;
  font-size: 10px;
  color: #555;
}

.token-cell em {
  display: block;
  margin-top: 3px;
  color: #333;
}

.up-cell {
  color: #118000;
  font-weight: bold;
}

.down-cell {
  color: #a00000;
  font-weight: bold;
}

.multi-badge {
  display: inline-block;
  margin: 2px;
  padding: 2px 5px;
  border: 1px solid #aaa;
  background: #e1e1e1;
  color: #777;
  font-weight: bold;
}

.multi-badge.hit {
  background: #d8ffd8;
  border-color: #3ca13c;
  color: #118000;
}

.callout-links a {
  display: block;
  color: #003399;
  font-weight: bold;
}

.chain-badge {
  display: inline-block;
  background: #003399;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  padding: 2px 4px;
  margin-right: 3px;
}

.shillboard-clear-form {
  text-align: right;
  margin: -2px 0 8px;
}

.shillboard-clear-form button {
  background: #b00000;
  color: #fff;
  border: 1px solid #5e0000;
  padding: 4px 8px;
  cursor: pointer;
}

.shillboard-pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 6px;
  background: #eef5ff;
  border: 1px solid #c3def7;
  font-size: 12px;
}

.shillboard-pager a,
.shillboard-pager strong {
  margin: 0 3px;
  color: #003399;
  font-weight: bold;
}

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

.home-people-grid a {
  min-width: 0;
  color: #003399;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 11px;
}

.home-people-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid #003399;
}

.home-people-grid span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.home-shillboard-box h3 {
  margin: 6px 0 4px;
  padding: 4px 6px;
  background: #ffd7b3;
  color: #7a0000;
  font-size: 14px;
}

.home-shill-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 8px;
}

.home-shill-table th {
  background: #6699cc;
  color: #fff;
  padding: 4px;
  text-align: left;
}

.home-shill-table td {
  border: 1px solid #d8e8f8;
  background: #f7fbff;
  padding: 4px;
}

.home-shill-table a,
.home-shill-link {
  color: #003399;
  font-weight: bold;
}

.recent-streams-box h3 a { float: right; font-size: 11px; }
.stream-player-shell { position: relative; background: #111; border: 2px solid #725F30; }
.stream-watermark { position:absolute; left:10px; bottom:38px; z-index:5; width:120px; max-width:24%; height:auto; opacity:.68; pointer-events:none; }
.stream-viewer-controls { display:flex; justify-content:flex-end; gap:12px; align-items:center; padding:4px 7px; background:#292929; color:#fff; font-size:11px; }.stream-viewer-controls label { display:flex; align-items:center; gap:4px; }.stream-viewer-controls input { width:90px; }
.stream-sprite { background-image:url('/public/images/StreamPlayerIcons.png'); background-repeat:no-repeat; background-size:768px 288px; border:0; width:58px; height:48px; padding:0; }
.stream-sprite.stream-play { background-position:-37px -27px; }.stream-sprite.stream-pause { background-position:-114px -27px; }.stream-sprite.stream-mute { background-position:-674px -27px; }.stream-sprite.stream-fullscreen { background-position:-674px -95px; }
.stream-viewer-controls .stream-sprite { transform:scale(.58); transform-origin:center; margin:-10px -12px; }.stream-viewer-controls { min-height:36px; }
.compact-stream-player { width:min(760px,100%); margin:auto; }.streams-featured { max-width:820px; margin:0 auto 12px; }.stream-watch-page { max-width:920px; padding-top:18px; }
.stream-slot-preview img { width:100%; height:100%; object-fit:cover; }.stream-slot.live { text-decoration:none; color:#111; }.stream-slot.live span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.streams-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }.streams-toolbar h2 { margin-right:auto; }.streams-toolbar label { display:flex; gap:4px; align-items:center; }
.home-notifiers { display:grid; gap:2px; margin-top:6px; }.home-notifiers a { display:block; padding:2px 4px; font-weight:bold; }
.stream-host-name { font-weight:bold; }
.streams-page { padding-top:18px; }
.stream-slot-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.stream-slot { border:1px solid #c9b67b; padding:5px; min-width:0; }
.stream-slot-preview { aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:#171717; color:#aaa; }
.stream-slot strong,.stream-slot small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stream-access-list form { display:grid; grid-template-columns:1fr 100px 80px; gap:8px; align-items:center; padding:4px; border-bottom:1px solid #ddd; }
@media(max-width:760px){.stream-slot-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.stream-player-shell iframe,
.stream-placeholder { display: flex; width: 100%; aspect-ratio: 16 / 9; min-height: 260px; border: 0; box-sizing: border-box; }
.stream-player-shell iframe[hidden],
.stream-player-shell .stream-placeholder[hidden],
.stream-player-shell video[hidden] { display: none !important; }
.stream-placeholder { align-items: center; justify-content: center; flex-direction: column; gap: 7px; color: #fff; background: #151515; }
.stream-placeholder img { width: 190px; max-width: 60%; height: auto; }
.stream-controls { display: flex; gap: 4px; padding: 5px; background: linear-gradient(#eee,#aaa); }
.stream-controls button { min-width: 34px; }
.stream-lights-dimmer { position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 14990; animation: stream-dim-in 180ms ease-out; }
.stream-lights-dimmer[hidden] { display: none; }
@keyframes stream-dim-in { from { opacity: 0; } to { opacity: 1; } }
.stream-player-shell.stream-theater { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(900px, 92vw); z-index: 15000; box-shadow: 0 0 24px #000; }
.stream-player-shell.stream-theater iframe,
.stream-player-shell.stream-theater .stream-placeholder { min-height: min(506px, 60vh); }
.stream-player-shell.stream-theater { isolation:isolate; background:#111; }
.stream-player-shell.stream-theater > * { position:relative; z-index:15001; }
.stream-player-shell video[data-native-live-video] { width:100%; aspect-ratio:16/9; background:#000; }
.live-stream-pip { position:fixed; left:12px; bottom:12px; width:min(420px,calc(100vw - 24px)); z-index:12000; border:2px solid #725F30; background:#111; color:#fff; box-shadow:0 0 12px #000; }
.live-stream-pip { position:fixed; }
.live-stream-pip > div { display:flex; align-items:center; gap:6px; padding:4px 6px; background:#604822; }
.live-stream-pip > div button { margin-left:auto; }
.live-stream-pip video { display:block; width:100%; aspect-ratio:16/9; background:#000; }
.live-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#d00; box-shadow:0 0 5px #f00; }
.native-live-meta { display:flex; gap:7px; align-items:center; padding:5px; background:#2a2a2a; color:#fff; }
.native-live-meta[hidden] { display:none; }
.native-live-meta [data-live-viewers] { margin-left:auto; }
.stream-studio-page { background:#171717; color:#fff; }
.stream-studio { width:min(900px,calc(100% - 24px)); margin:18px auto; font-family:Arial,Helvetica,sans-serif; }
.stream-studio label { display:block; margin:8px 0; }
.stream-studio input, .stream-studio select { width:100%; min-height:30px; }
.studio-device-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stream-studio .checkbox-label input { width:auto; min-height:0; }
.studio-device-actions { display:flex; gap:8px; margin:8px 0; }
.studio-mic-meter { width:100%; height:10px; border:1px solid #725F30; background:#222; }
.studio-mic-meter span { display:block; width:0; height:100%; background:#66b433; transition:width 80ms linear; }
.studio-device-note { min-height:18px; color:#ddd; }
.studio-share { display:grid; grid-template-columns:1fr 1fr auto auto; gap:6px; align-items:end; margin-top:12px; }
.studio-share label { min-width:0; }.studio-share input { width:100%; }
.stream-embed-page { margin:0; background:#111; }.stream-embed-page h3 { margin:0; }.stream-embed-page [data-stream-panel] { width:100%; }
@media(max-width:760px){.studio-share{grid-template-columns:1fr;}}
.studio-analytics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:14px 0; }.studio-analytics>div { border:1px solid #725F30; background:#242424; padding:10px; display:flex; flex-direction:column; }.studio-analytics strong { font-size:18px; color:#fff; }.studio-analytics span { color:#bbb; font-size:11px; }.studio-viewers { border:1px solid #725F30; padding:9px; margin-top:10px; }.studio-viewers h3 { margin-top:0; }.studio-viewer { display:flex; align-items:center; gap:7px; padding:4px; border-bottom:1px solid #444; }.studio-viewer img { width:30px; height:30px; object-fit:cover; }.studio-viewer span { color:#fff; }
@media(max-width:650px){.studio-analytics{grid-template-columns:repeat(2,minmax(0,1fr));}}
.stream-studio video { width:100%; aspect-ratio:16/9; background:#000; border:2px solid #725F30; }
.studio-status { display:flex; gap:8px; align-items:center; padding:8px 0; }
.studio-status [data-viewers] { margin-left:auto; }
.studio-actions { display:flex; gap:8px; }
.studio-countdown { position:fixed; inset:0; z-index:20000; background:rgba(0,0,0,.75); display:grid; place-items:center; font-size:120px; font-weight:bold; }
.studio-countdown[hidden] { display:none; }

.sponsor-stack .retail-ad {
  display: block;
  padding: 8px;
  margin-bottom: 7px;
  border: 2px solid #d00000;
  background: #fff45a;
  color: #b00000;
  text-decoration: none;
}

.ad-link-disabled { pointer-events: none; cursor: default; }

.sponsor-stack .retail-ad img {
  display: block;
  width: 100%;
  max-height: 74px;
  object-fit: cover;
  margin-bottom: 5px;
  border: 1px solid rgba(0,0,0,.2);
}

.sponsor-stack .adsense-vertical-slot {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.sponsor-stack .adsense-vertical-slot small {
  color: #444;
  margin-top: 8px;
}

.retro-form {
  max-width: 860px;
}

.retro-form fieldset,
.edit-profile-form > h3,
.edit-profile-form > h4,
.edit-profile-form .edit-help-box,
.edit-profile-form .safe-code-note {
  clear: both;
}

.retro-form fieldset {
  border: 1px solid #9fc7ff;
  background: #f7fbff;
  margin: 0 0 12px;
  padding: 10px;
}

.retro-form legend {
  background: #6699cc;
  color: #fff;
  font-weight: bold;
  padding: 3px 8px;
}

.retro-form label {
  display: block;
  font-weight: bold;
  margin: 8px 0 3px;
}

.retro-form label span {
  color: #666;
  font-size: 12px;
  font-weight: normal;
}

.retro-form input[type="text"],
.retro-form input[type="password"],
.retro-form input[type="date"],
.retro-form input[type="number"],
.retro-form input:not([type]),
.retro-form select,
.retro-form textarea {
  width: 100%;
  box-sizing: border-box;
}

.edit-profile-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.edit-profile-workspace {
  display: grid;
  grid-template-columns: minmax(0, 860px) 300px;
  gap: 20px;
  align-items: start;
}

.customization-guide-panel {
  position: sticky;
  top: 12px;
  border: 2px solid #725F30;
  background: #fff;
  box-shadow: 2px 3px 8px rgba(0,0,0,.25);
  max-height: calc(100vh - 24px);
  overflow: auto;
  z-index: 20;
}

.customization-guide-title {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background: #725F30;
  color: #fff;
  z-index: 1;
}

.customization-guide-body { padding: 8px; font-size: 12px; }
.customization-guide-body p { margin: 4px 0 8px; }
.customization-guide-body table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.customization-guide-body th,
.customization-guide-body td { border: 1px solid #d8c08a; padding: 4px; text-align: left; }
.customization-guide-body th { background: #e5d29d; }
.customization-guide-body details { border-top: 1px solid #d8c08a; padding: 6px 0; }
.customization-guide-body summary { color: #4A3418; font-weight: bold; cursor: pointer; }
.customization-guide-body code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; background: #f6f0df; border: 1px solid #d8c08a; padding: 5px; margin-top: 5px; }
.guide-pdf-link { display: block; text-align: center; background: #725F30; color: #fff !important; padding: 7px; font-weight: bold; }
.customization-guide-panel.minimized { width: 220px; overflow: hidden; }
.customization-guide-panel.minimized .customization-guide-body { display: none; }

.customization-guide-panel:not(.minimized) {
  resize: both;
  overflow: auto;
  min-width: 300px;
  min-height: 320px;
  max-width: min(700px, 48vw);
  max-height: 80vh;
}
.top-friends-editor { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.top-friends-editor label { display:flex; align-items:center; gap:6px; border:1px solid #d7c28c; padding:4px; min-width:0; }
.top-friends-editor img { width:36px; height:36px; object-fit:cover; }
.top-friends-editor span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.all-friends-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.top-friend-label { display:block; color:#b40000; font-size:11px; font-weight:bold; }
.retro-music-player { width:100%; max-width:100%; min-width:0; overflow:hidden; }
.retro-music-screen strong, .retro-music-screen span, .retro-tracklist button strong, .retro-tracklist button small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.retro-tracklist button { min-width:0; overflow:hidden; }
.classic-contact-box { min-width:0; }

.topbar .top-inner.container { justify-content:flex-start; gap:18px; }
.topbar .top-right { flex:1; min-width:0; }
.private-profile-note { padding:18px; text-align:center; font-weight:bold; }
@media (max-width: 800px) {
  .all-friends-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .customization-guide-panel:not(.minimized) { max-width:100%; }
}

@media (max-width: 1050px) {
  .edit-profile-workspace { grid-template-columns: 1fr; }
  .customization-guide-panel { position: relative; top: auto; grid-row: 1; max-height: 430px; width: auto !important; }
}

.edit-profile-form h3,
.edit-profile-form h4,
.edit-profile-form .edit-help-box,
.edit-profile-form .safe-code-note,
.edit-profile-form textarea,
.edit-profile-form label:has(+ textarea),
.edit-profile-form div[style],
.edit-profile-form .form-actions {
  grid-column: 1 / -1;
}

.edit-profile-form textarea {
  min-height: 72px;
}

.photo-like-form,
.emoji-picker,
.emoji-toggle {
  display: none !important;
}

.chatrooms-panel {
  position: fixed;
  right: 12px;
  bottom: 0;
  width: 430px;
  max-width: calc(100vw - 24px);
  background: #dceafa;
  border: 2px solid #1f5195;
  z-index: 9999;
  box-shadow: 0 0 8px rgba(0,0,0,.25);
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

.chatrooms-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2f6db6;
  color: #fff;
  padding: 4px 7px;
  border-bottom: 1px solid #153b78;
}

.chatrooms-title button {
  font-size: 11px;
}

.chatrooms-body {
  padding: 0 7px 7px;
}

.chatrooms-menu {
  display: flex;
  gap: 14px;
  padding: 3px 2px 4px;
  color: #111;
  font-size: 11px;
}

.chatrooms-toolbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 5px;
  background: #f6f9ff;
  border: 1px solid #9fb7d5;
}

.chatrooms-toolbar button {
  min-height: 34px;
  border: 1px solid #9fb7d5;
  background: linear-gradient(#fff, #dceafa);
  color: #003399;
  font-weight: bold;
  font-size: 11px;
}

.chatrooms-user {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  background: #fff;
  border-left: 1px solid #9fb7d5;
  border-right: 1px solid #9fb7d5;
}

.chatrooms-user strong {
  color: #003399;
}

.chatrooms-user span {
  color: #008000;
  font-size: 11px;
}

.chatrooms-layout {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  gap: 7px;
  margin-top: 6px;
}

.chatrooms-list {
  background: #f8fbff;
  border: 1px solid #9fb7d5;
  padding: 4px;
  max-height: 246px;
  overflow-y: auto;
}

.chatrooms-list-title {
  color: #111;
  font-weight: bold;
  border-bottom: 1px solid #cad8eb;
  padding: 2px 3px 4px;
  margin-bottom: 3px;
}

.chatrooms-list button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
  color: #003399;
  font-size: 11px;
  padding: 4px 3px;
  cursor: pointer;
  border-bottom: 1px solid #edf3fb;
}

.chatrooms-list button.active {
  background: #d8e8ff;
  font-weight: bold;
}

.chatrooms-list em {
  color: #333;
  font-style: normal;
}

.chatrooms-panel.collapsed .chatrooms-body {
  display: none;
}
.chatrooms-panel.collapsed {
  height: auto !important;
  min-height: 0 !important;
  resize: none !important;
}
.chat-style-tools label { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.chat-style-tools label input { width:auto; }
.account-danger-zone { border:2px solid #9b1c1c; margin-top:18px; padding:10px; }
.voice-room-launch { width:100%; border:0; text-align:left; display:flex; justify-content:space-between; padding:4px; color:#003399; background:#eef5ff; }
.chat-voice-view { position:absolute; inset:28px 0 0; z-index:30; background:#f5f1e8; }.chat-voice-view iframe { width:100%; height:100%; border:0; display:block; }
.chatrooms-panel.showing-voices { width:min(760px,calc(100vw - 28px)); height:min(720px,calc(100vh - 20px)); }
.chat-ui-switch { margin-left:auto; display:inline-flex; gap:2px; }.chat-ui-switch button { padding:2px 5px; }
.chatrooms-panel.chat-mobile-ui { width:360px; max-width:calc(100vw - 16px); height:min(650px,calc(100vh - 16px)); }.chatrooms-panel.chat-mobile-ui .chatrooms-layout { grid-template-columns:105px minmax(0,1fr); }.chatrooms-panel.chat-mobile-ui .chatrooms-ad { transform:scale(.82); transform-origin:center; }.chatrooms-panel.chat-mobile-ui .chat-style-tools { flex-wrap:wrap; }
.voices-page { margin:0; background:#f4f1ea; color:#111; font:14px Arial,sans-serif; }
.voices-shell { width:min(760px,100%); margin:auto; padding:10px; box-sizing:border-box; border:2px solid #725F30; min-height:100vh; }
.voices-shell > header { display:flex; align-items:center; gap:10px; border-bottom:2px solid #725F30; padding:8px; background:linear-gradient(#725F30,#4A3418); color:#fff; }
.voices-shell > header img { width:130px; height:auto; }.voices-shell > header div { display:flex; flex-direction:column; }.voices-shell > header [data-voice-state] { margin-left:auto; }
.voice-device-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }.voice-device-grid label,.voices-shell>label { display:block; }.voice-device-grid select { width:100%; }
.voice-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0; }.voice-actions label { display:flex; align-items:center; gap:4px; }
.voice-meter { height:10px; border:1px solid #725F30; background:#000; margin:4px 0 10px; }.voice-meter span { display:block; width:0; height:100%; background:#46d35c; }
.voice-content { display:grid; grid-template-columns:1fr 1.2fr; gap:10px; margin-top:10px; }.voice-content>div { border:1px solid #b7a98d; padding:8px; min-width:0; background:#faf9f6; }
.voice-person { display:grid; grid-template-columns:38px 1fr 28px auto auto; gap:5px; align-items:center; padding:6px; border-bottom:1px solid #ddd; }.voice-person img { width:38px; height:38px; object-fit:cover; }
.voice-mic-state { width:28px; height:42px; display:block; background-image:url('/public/images/Microphone.png'); background-size:128px 86px; background-position:-17px center; background-repeat:no-repeat; transition:filter .12s ease,transform .12s ease; }.voice-person.speaking .voice-mic-state { background-position:-54px center; filter:drop-shadow(0 0 5px #7cff21); animation:voice-mic-pulse .7s ease-in-out infinite alternate; }.voice-person.muted .voice-mic-state { background-position:-91px center; filter:none; animation:none; }
@keyframes voice-mic-pulse { from { transform:scale(.96); } to { transform:scale(1.08); } }
.voice-chat-history { height:260px; overflow-y:auto; background:#fff; color:#111; padding:6px; }.voice-content form { display:flex; margin-top:5px; }.voice-content form input { flex:1; min-width:0; }
.voices-shell [data-voice-error] { color:#ffdf63; min-height:18px; }
.voice-room-tools { display:flex; gap:7px; align-items:center; padding:8px; border-bottom:1px solid #c8b99b; }.voice-room-tools span { margin-left:auto; color:#655; font-size:11px; }.voice-settings { padding:7px; border-bottom:1px solid #c8b99b; }.voice-settings summary { font-weight:bold; color:#003399; cursor:pointer; }
.voice-room-tools form { display:flex; gap:5px; }.voice-room-tools input,.voice-host-editor input { min-width:160px; }.voice-room-tools button,.voice-host-editor button,.voices-shell header button,.voice-actions button { border:1px solid #8b7959; border-radius:5px; padding:5px 9px; background:linear-gradient(#fff,#ddd4c2); box-shadow:inset 0 1px rgba(255,255,255,.9); cursor:pointer; }
.voice-host-editor { padding:7px 9px; background:linear-gradient(#f6f1e7,#e8deca); border-bottom:1px solid #c8b99b; }.voice-host-editor label { display:flex; gap:6px; align-items:center; }
.voice-discovery { padding:8px; background:linear-gradient(#f9f7f2,#ede7da); border-bottom:1px solid #c8b99b; }.voice-discovery h3 { margin:0 0 6px; color:#003399; }.voice-discovery [data-voice-rooms] { display:flex; gap:6px; overflow-x:auto; padding-bottom:3px; }.voice-discovery-item { flex:0 0 170px; text-align:left; border:1px solid #b8a789; border-radius:6px; background:linear-gradient(#fff,#e9e1d2); padding:6px; }.voice-discovery-item strong,.voice-discovery-item span,.voice-discovery-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.voice-discovery-item span { color:#197d20; }
.voice-person>div { min-width:0; display:flex; flex-direction:column; }.voice-person>div strong,.voice-person>div small,.voice-person>div em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.voice-person>div small { color:#3a2a8f; }.voice-person>div em { color:#a45900; font-size:10px; }
.voices-brand { text-align:center; padding:10px 0 2px; }.voices-brand img { width:min(260px,70%); height:auto; border-radius:7px; opacity:.92; }
.voices-embedded .voices-shell { border:0; width:100%; }
.voice-entry-splash { position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#21190e,#725F30 55%,#1d2835); opacity:1; transition:opacity .55s ease; }.voice-entry-splash[hidden]{display:none}.voice-entry-splash.leaving{opacity:0}.voice-entry-splash img{width:min(82%,620px);height:auto;filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));animation:voice-logo-arrive .55s ease-out both}@keyframes voice-logo-arrive{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@media(max-width:620px){.voice-device-grid,.voice-content{grid-template-columns:1fr;}.voice-chat-history{height:180px;}}

.chatrooms-history {
  height: 150px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #9fb7d5;
  padding: 5px;
  margin: 6px 0;
}

.chat-emoticons {
  background: #eee;
  border: 1px solid #999;
  padding: 4px;
  max-height: 78px;
  overflow-y: auto;
}

.chat-emoticons button {
  width: 23px;
  height: 23px;
  padding: 0;
  margin: 1px;
  border: 1px solid #bbb;
  background: #fff;
  cursor: pointer;
}

.chatroom-message {
  margin-bottom: 4px;
  word-break: break-word;
}

.chatroom-message a {
  color: #003399;
  font-weight: bold;
}

.chatrooms-error {
  min-height: 14px;
  color: #b00000;
  font-weight: bold;
}

.chatrooms-panel form {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 48px;
  gap: 4px;
}

.chatrooms-panel input {
  flex: 1;
}

.chat-admin-actions {
  margin-top: 5px;
  text-align: right;
}

.chat-admin-actions button,
.chat-delete {
  font-size: 10px;
}

.chat-copy-ca {
  display: inline;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  border: 0;
  background: transparent;
  color: #003399;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.chatrooms-foot {
  color: #555;
  font-size: 10px;
  margin-top: 5px;
  text-align: center;
}

.chatrooms-ad {
  margin: 7px auto 0;
  width: 130px;
  height: 74px;
  border: 1px solid #9fb7d5;
  background: #fff;
  color: #6699cc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
}

.chatrooms-ad small {
  color: #1f5195;
  font-size: 10px;
}

.topbar .top-inner.container {
  max-width: 1180px;
  margin: 0 auto;
}

.topbar .top-inner {
  min-height: 58px;
}

.top-right {
  flex: 1;
  min-width: 0;
  gap: 8px;
}

.top-right .search {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 420px;
  min-width: 280px;
  white-space: nowrap;
}

.top-right .search input[type="text"] {
  width: 170px;
}

.auth-links {
  flex: 0 1 auto;
  gap: 7px;
  white-space: nowrap;
}

.auth-links a,
.auth-links span,
.wallet-btn {
  margin-right: 0;
}

.brand-logo {
  max-width: 170px;
  object-fit: contain;
}

.friend-online-badge {
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
}

.search-page-form {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.search-page-form input {
  flex: 1;
}

.search-sort-tabs {
  margin-bottom: 10px;
}

.search-sort-tabs a {
  display: inline-block;
  margin-right: 6px;
  padding: 4px 7px;
  border: 1px solid #9fc7ff;
  color: #003399;
  text-decoration: none;
  background: #f7fbff;
}

.search-sort-tabs a.active {
  background: #6699cc;
  color: #fff;
  font-weight: bold;
}

@media (max-width: 700px) {
  body { font-size: 14px; }
  .container { max-width: 100%; margin: 10px auto; box-sizing: border-box; }
  .topbar .top-inner,
  .top-right,
  .search,
  .auth-links { flex-direction: column; align-items: stretch; width: 100%; }
  .search input { width: 100%; box-sizing: border-box; }
  .home-layout { grid-template-columns: 1fr; }
  .main-grid { flex-direction: column; }
  .left-col,
  .right-col,
  .center-col { width: 100%; }
  .brand-logo { height: 70px; }
  .ad-banner .ad-slot { width: 100%; }
  .profile-table,
  .profile-table > tbody,
  .profile-table > tbody > tr,
  .profile-table > tbody > tr > td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  .pfp-info-wrap { flex-direction: column; }
  .edit-profile-form { grid-template-columns: 1fr; }
  .chatrooms-panel { left: 8px; right: 8px; width: auto; }
}

/* Final responsive/desktop stability overrides */
.topbar .top-inner {
  gap: 12px;
}

.top-right {
  flex-wrap: nowrap !important;
  justify-content: flex-end;
}

.top-right .search {
  flex: 0 0 auto;
  min-width: 0;
}

.top-right .search input[type="text"] {
  width: 150px;
}

.top-right .search button {
  margin-left: 0;
}

.auth-links {
  flex-wrap: nowrap !important;
  align-items: center;
}

.online-users-counter,
.blorg-token-widget {
  line-height: 1;
}

.chatrooms-panel {
  right: 26px;
  left: auto;
  width: 350px;
  max-width: calc(100vw - 52px);
}

.chatrooms-main {
  min-width: 0;
}

.chat-join-row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.chat-join-row button {
  font-size: 11px;
}

.chatroom-empty {
  color: #666;
  font-style: italic;
}

.view-mode-links {
  text-align: center;
  font-weight: bold;
}

.view-mode-choice {
  background: #f7fbff;
  border: 1px solid #9fc7ff;
  padding: 7px;
  margin-bottom: 8px;
}

.view-mode-choice label {
  display: inline-block;
  margin-right: 10px;
}

body.homepage-promo {
  background-color: #050505;
  position: relative;
}

body.homepage-promo::before,
body.homepage-promo::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: max(0px, calc((100vw - 1200px) / 2));
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
}

body.homepage-promo::before {
  left: 0;
  background-image: var(--homepage-promo-left, url("/public/images/homepage_promo_left_20260621"));
}

body.homepage-promo::after {
  right: 0;
  background-image: var(--homepage-promo-right, url("/public/images/homepage_promo_right_20260621"));
}

body.homepage-promo > .topbar,
body.homepage-promo > .home,
body.homepage-promo > .footer {
  position: relative;
  z-index: 1;
}

body.homepage-promo .home,
body.homepage-promo .footer {
  background: #fff;
}

body.homepage-promo .home {
  width: min(1200px, 100%);
  max-width: none;
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
  min-height: calc(100vh - 145px);
  padding-top: 20px;
  padding-bottom: 20px;
}

.classic-contact-box button:disabled {
  opacity: 1;
  color: #003399;
  cursor: default;
}

body.promo-neon-drive {
  background-image:
    linear-gradient(160deg, rgba(255,92,0,.85), rgba(0,0,0,.15) 45%, rgba(255,20,120,.75)),
    linear-gradient(200deg, rgba(255,92,0,.85), rgba(0,0,0,.15) 45%, rgba(255,20,120,.75)),
    radial-gradient(circle at center, #15102a 0%, #080808 60%);
}

body.promo-liminal {
  background-image:
    linear-gradient(160deg, rgba(230,206,89,.9), rgba(40,35,12,.1) 45%, rgba(128,95,12,.75)),
    linear-gradient(200deg, rgba(230,206,89,.9), rgba(40,35,12,.1) 45%, rgba(128,95,12,.75)),
    radial-gradient(circle at center, #28230d 0%, #090806 60%);
}

body.promo-custom {
  background-image: none;
}

.homepage-promo-label {
  position: fixed;
  left: 14px;
  bottom: 16px;
  z-index: 1;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  font-size: 18px;
  font-weight: bold;
  pointer-events: none;
}

.homepage-promo-label span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
}

html.view-mobile body,
body.view-mobile-body {
  font-size: 13px;
  min-width: 0;
}

html.view-mobile .container,
body.view-mobile-body .container {
  width: 100%;
  max-width: 100%;
  margin: 8px auto;
  padding: 0 6px;
  box-sizing: border-box;
}

body.view-mobile-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 8%, rgba(37, 99, 235, 0.28), transparent 18rem),
    linear-gradient(180deg, #0f2853 0%, #061827 34%, #02060d 100%) !important;
  color: #f8fafc;
  font-family: Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body.view-mobile-body .age-gate-box {
  max-width: 390px;
  margin: 18vh auto 0;
  padding: 18px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 24px;
  background: rgba(12, 20, 34, 0.88);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.05);
}

body.view-mobile-body .age-gate-box h2 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 24px;
}

body.view-mobile-body .age-gate-box p {
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.35;
}

body.view-mobile-body .age-gate-box input {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  background: rgba(2, 6, 15, 0.82);
  color: #fff;
  padding: 10px 12px;
  font-size: 16px;
}

body.view-mobile-body .age-gate-box input[type="radio"],
body.view-mobile-body .age-gate-box input[type="checkbox"] {
  width: auto;
  min-height: 0;
  accent-color: #3b82f6;
}

body.view-mobile-body .age-gate-box button {
  margin-top: 10px;
  border: 0;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  padding: 11px 18px;
  font-weight: bold;
}

body.view-mobile-body .view-mode-choice {
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
}

html.view-mobile .topbar {
  padding: 3px 0;
}

html.view-mobile .topbar .top-inner {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 4px;
  min-height: 0;
  align-items: center;
}

html.view-mobile .brand-logo {
  height: 34px !important;
  max-width: 80px;
}

html.view-mobile .top-right {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  justify-items: end;
}

html.view-mobile .top-right .search {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 3px;
  font-size: 10px;
}

html.view-mobile .top-right .search input[type="text"] {
  width: 100%;
  min-width: 0;
}

html.view-mobile .top-right .search button {
  padding: 2px 4px;
  font-size: 10px;
}

html.view-mobile .auth-links {
  width: 100%;
  justify-content: flex-end;
  gap: 5px;
  font-size: 10px;
  white-space: nowrap;
}

html.view-mobile .wallet-btn {
  padding: 4px 6px;
  font-size: 10px;
}

html.view-mobile .blorg-token-widget,
html.view-mobile .online-users-counter {
  font-size: 10px;
}

html.view-mobile .ad-banner .ad-slot {
  width: 78vw;
  height: 44px;
}

html.view-mobile .nav-row {
  padding: 3px 4px;
}

html.view-mobile .nav-row a {
  font-size: 11px;
  padding-right: 5px;
  margin: 0 2px;
}

html.view-mobile .home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 8px;
  align-items: start;
}

html.view-mobile .video-card {
  width: calc(50% - 8px);
}

html.view-mobile .video-card img {
  height: 62px;
}

html.view-mobile .home-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.view-mobile .box,
html.view-mobile .custom-ad {
  padding: 6px;
}

html.view-mobile .right-col,
html.view-mobile .left-col,
html.view-mobile .center-col {
  width: auto;
}

html.view-mobile .chatrooms-panel {
  right: 8px;
  left: auto;
  bottom: 8px;
  width: min(360px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
}

html.view-mobile .chatrooms-layout {
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 4px;
}

html.view-mobile .chatrooms-history {
  height: 150px;
}

html.view-mobile .chatrooms-panel form {
  display: grid;
  grid-template-columns: 34px 1fr 42px;
}

html.view-mobile .chat-copy-ca {
  max-width: 145px;
}

html.view-mobile body.homepage-promo {
  background-image: none;
  background-color: #fff;
}

html.view-mobile body.homepage-promo::before,
html.view-mobile body.homepage-promo::after {
  display: none;
}

html.view-mobile .homepage-promo-label {
  display: none;
}

@media (max-width: 760px) {
  html.view-desktop .chatrooms-panel,
  .chatrooms-panel {
    right: 8px;
    width: min(360px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
  }
}

/* 2026-06-25: final header correction after bot-status additions. */
@media (min-width: 769px) {
  html body .topbar {
    width: 960px !important;
    max-width: 960px !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body .topbar .top-inner.container {
    width: 960px !important;
    max-width: 960px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 auto !important;
    padding: 4px 12px !important;
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 10px !important;
    box-sizing: border-box !important;
  }

  html body .topbar .brand,
  html body .topbar .brand a {
    width: 220px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    overflow: hidden !important;
  }

  html body .topbar .brand-logo,
  html body .topbar .brand .brand-logo {
    width: 205px !important;
    max-width: 205px !important;
    max-height: 42px !important;
    height: auto !important;
    position: static !important;
    object-fit: contain !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body .topbar .brand-logo.brand-logo-tunes {
    width: 190px !important;
    max-width: 190px !important;
    max-height: 42px !important;
  }

  html body .topbar .top-right {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 3px 5px !important;
    overflow: hidden !important;
  }

  html body .topbar .search {
    flex: 0 0 auto !important;
    max-width: 390px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html body .topbar .search label {
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  html body .topbar .search input[type="text"] {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 20px !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
  }

  html body .topbar .search button {
    height: 22px !important;
    font-size: 11px !important;
    padding: 1px 7px !important;
  }

  html body .topbar .auth-links {
    flex: 0 1 auto !important;
    max-width: 435px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  html body .topbar .online-users-counter { max-width: 72px !important; overflow: hidden !important; }
  html body .topbar .bot-status-widget { max-width: 54px !important; overflow: hidden !important; }
  html body .topbar .blorg-token-widget { max-width: 126px !important; overflow: hidden !important; }
  html body .topbar .blorg-ca-copy { min-width: 24px !important; padding: 0 3px !important; }

  html body .topbar .ad-banner.container {
    width: 960px !important;
    max-width: 960px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 auto !important;
    padding: 1px 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body .topbar .ad-banner .ad-slot {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  html body .topbar .nav-row.container {
    width: 960px !important;
    max-width: 960px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 3px 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

/* 2026-06-25: keep the enlarged logos from colliding with search/status widgets. */
.topbar .top-inner.container {
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: start !important;
}

.topbar .brand {
  grid-column: 1 !important;
  width: 240px !important;
  min-width: 0 !important;
  max-width: 240px !important;
  flex: none !important;
  overflow: visible !important;
  z-index: 1 !important;
}

.topbar .brand-logo,
.brand-logo {
  width: 218px !important;
  max-width: 218px !important;
}

.topbar .brand-logo.brand-logo-tunes {
  width: 224px !important;
  max-width: 224px !important;
}

.topbar .top-right {
  grid-column: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  z-index: 2 !important;
}

.topbar .search,
.topbar .auth-links {
  max-width: 100% !important;
  justify-content: flex-end !important;
}

.topbar .search input[type="text"] {
  width: 168px !important;
  min-width: 130px !important;
}

.topbar .auth-links {
  font-size: 11px !important;
  gap: 4px !important;
}

.topbar .bot-status-widget {
  max-width: 72px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.topbar .blorg-token-widget {
  max-width: 205px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.profile-summary-card .mini-info {
  min-width: 172px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.profile-summary-card .mini-info-table {
  table-layout: fixed !important;
  width: 100% !important;
}

.profile-summary-card .mini-info-table td:first-child {
  width: 66px !important;
}

.profile-summary-card .mini-info-table td:last-child {
  min-width: 96px !important;
}

.profile-summary-card .online-now {
  gap: 2px !important;
}

@media (max-width: 1050px) {
  .topbar .top-inner.container {
    grid-template-columns: 192px minmax(0, 1fr) !important;
  }

  .topbar .brand {
    width: 192px !important;
    max-width: 192px !important;
  }

  .topbar .brand-logo,
  .brand-logo {
    width: 180px !important;
    max-width: 180px !important;
  }

  .topbar .brand-logo.brand-logo-tunes {
    width: 188px !important;
    max-width: 188px !important;
  }

  .topbar .search input[type="text"] {
    width: 128px !important;
    min-width: 112px !important;
  }

  .topbar .auth-links {
    font-size: 10px !important;
  }
}

/* 2026-06-25: keep logo, search, bot status, and token widgets in their own lanes */
.topbar .top-inner.container {
  display: grid !important;
  grid-template-columns: 235px minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: start !important;
}

.topbar .brand {
  grid-column: 1 !important;
  width: 235px !important;
  min-width: 0 !important;
  max-width: 235px !important;
  overflow: visible !important;
  z-index: 1 !important;
}

.topbar .brand-logo,
.brand-logo {
  width: 220px !important;
  max-width: 220px !important;
}

.topbar .brand-logo.brand-logo-tunes {
  width: 228px !important;
  max-width: 228px !important;
}

.topbar .top-right {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  z-index: 2 !important;
}

.topbar .search,
.topbar .auth-links {
  max-width: 100% !important;
  justify-content: flex-end !important;
}

.topbar .search input[type="text"] {
  width: 166px !important;
  min-width: 130px !important;
}

.topbar .auth-links {
  font-size: 11px !important;
  gap: 4px !important;
}

.topbar .bot-status-widget {
  max-width: 108px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.profile-summary-card .mini-info {
  min-width: 170px !important;
}

.profile-summary-card .mini-info-table td:first-child {
  width: 66px !important;
}

.profile-summary-card .mini-info-table td:last-child {
  min-width: 95px !important;
}

@media (max-width: 1050px) {
  .topbar .top-inner.container {
    grid-template-columns: 190px minmax(0, 1fr) !important;
  }

  .topbar .brand {
    width: 190px !important;
    max-width: 190px !important;
  }

  .topbar .brand-logo,
  .brand-logo {
    width: 178px !important;
    max-width: 178px !important;
  }

  .topbar .brand-logo.brand-logo-tunes {
    width: 188px !important;
    max-width: 188px !important;
  }

  .topbar .auth-links {
    font-size: 10px !important;
  }
}

/* Classic blue site shell */
:root {
  --classic-navy: #003399;
  --classic-blue: #1655b8;
  --classic-mid: #6699cc;
  --classic-light: #b8d3f6;
  --classic-pale: #edf5ff;
  --classic-line: #8db5e5;
  --classic-page: #e5e5e5;
}

html { background: var(--classic-page); }
body {
  background: var(--classic-page);
  color: #111;
  font: 12px Arial, Helvetica, Verdana, sans-serif;
  line-height: 1.2;
}
a { color: #003399; }

.container {
  width: min(960px, 100%);
  max-width: 960px;
  box-sizing: border-box;
}

main.container {
  background: #fff;
  margin-top: 0;
  margin-bottom: 0;
  padding: 12px 10px 28px;
  min-height: 520px;
}

.topbar {
  width: min(960px, 100%);
  margin: 0 auto;
  background: var(--classic-navy) !important;
  color: #fff;
  overflow: visible;
}

.topbar .top-inner.container {
  width: 100%;
  max-width: none;
  min-height: 62px;
  margin: 0;
  padding: 0 9px;
  gap: 8px;
  align-items: center;
}

.topbar .brand {
  position: relative;
  flex: 0 0 275px;
  width: 275px;
  height: 62px;
  overflow: hidden;
}

.topbar .brand a { display: block; width: 100%; height: 100%; }
.brand-logo,
.topbar .brand-logo {
  position: absolute;
  width: 260px !important;
  max-width: none !important;
  height: auto !important;
  left: 0;
  top: -49px;
}

.topbar .top-right { gap: 7px; }
.top-right .search,
.auth-links { font-size: 11px; gap: 5px; }
.top-right .search input[type="text"] { width: 145px; height: 20px; }
.top-right button,
.top-right input,
.top-right select { font-size: 11px; }
.topbar a { margin-right: 4px; }

.topbar .ad-banner.container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 2px 8px;
  background: var(--classic-navy);
}
.topbar .ad-banner .ad-slot {
  width: 728px;
  max-width: calc(100% - 70px);
  height: 42px;
  background: #fff;
  border-color: #8db5e5;
}

.topbar .nav-row.container,
.nav-row {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 4px 7px;
  background: var(--classic-mid) !important;
  border-top: 1px solid #9bc0e6 !important;
  border-bottom: 1px solid #3d75ad !important;
  color: #fff;
}
.nav-row a {
  color: #fff !important;
  font-size: 11px;
  padding-right: 7px;
  margin: 0 3px;
}

.box {
  padding: 7px;
  margin-bottom: 9px;
  border: 1px solid #b7d1ef;
  background: #fff;
}
.box h2,
.box h3,
.profile-blurbs h3,
.friends-box h4,
.orange-header,
.contact-box h4,
.notifications-panel h4,
.chatrooms-title {
  margin: 0 0 7px;
  padding: 4px 6px;
  border: 0 !important;
  background: linear-gradient(90deg, #dcecff 0%, #a9c9f5 65%, #eef6ff 100%) !important;
  color: #001f64 !important;
  font: bold 12px Arial, Helvetica, sans-serif;
}

.search-sort-tabs,
.mail-tabs,
.retro-form legend,
.callouts-table th,
.home-shill-table th,
.classic-mail-table th {
  background: var(--classic-mid) !important;
  border-color: #3f73ac !important;
  color: #fff !important;
}
.search-sort-tabs a,
.mail-tabs a,
.search-sort-tabs a.active {
  background: var(--classic-mid) !important;
  border-color: #3f73ac !important;
  color: #fff !important;
}
.classic-mail-table td,
.home-shill-table td { background: #f3f8ff !important; }
.mail-center,
.retro-form fieldset { border-color: var(--classic-mid) !important; }
.profile-summary-card,
.interests-box td:first-child,
.chatrooms-panel,
.chatrooms-user { background: #cfe2f7 !important; }

input,
select,
textarea,
button { font: 12px Arial, Helvetica, sans-serif; }
button,
.signup-btn {
  border-radius: 0;
}

.home-layout {
  grid-template-columns: minmax(0, 660px) minmax(0, 260px);
  gap: 10px;
  align-items: start;
}
.home-side {
  border-left: 4px dotted #d2e4fa;
  padding-left: 10px;
}
.home-videos .video-grid { gap: 8px; }
.home-videos .video-card img { height: 74px; }
.play-badge { top: 53px; }
.video-title { font-weight: bold; }
.video-source { font-size: 10px; }
.home-category-grid {
  margin-top: 9px;
  padding: 6px;
  gap: 1px 10px;
  background: #f0f6ff;
  border-color: #bfd5ef;
}
.home-category-grid a { font-size: 12px; }
.home-banner-ad .custom-ad { min-height: 72px; }
.music-feature img { width: 105px; height: 105px; }

.home-bottom-feed {
  clear: both;
  margin: 12px 0 0;
}
.home-bottom-feed .blorgfeed-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #3f73ac;
}
.home-bottom-feed .blorgfeed-list a {
  min-width: 0;
  padding: 7px;
  background: #b9d4f7;
  border: 0;
  border-right: 1px solid #3f73ac;
  color: #003399;
  text-decoration: none;
}
.home-bottom-feed .blorgfeed-list a:last-child { border-right: 0; }
.home-bottom-feed .blorgfeed-list strong { display: block; font-size: 12px; }
.home-bottom-feed .blorgfeed-list em,
.home-bottom-feed .blorgfeed-list span { display: block; color: #333; font-size: 10px; }

.footer.container {
  width: min(960px, 100%);
  max-width: 960px;
  margin: 0 auto 28px;
  padding: 14px 10px;
  background: #d7d7d7 !important;
  color: #333;
  text-align: center;
}

body.homepage-promo::before,
body.homepage-promo::after {
  width: max(0px, calc((100vw - 960px) / 2));
}
body.homepage-promo .home {
  width: min(960px, 100%);
  max-width: 960px;
  padding-top: 12px;
}

.stream-player-shell {
  border: 1px solid #6d8eb5;
}
.stream-controls,
.stream-viewer-controls {
  min-height: 30px;
  padding: 3px 5px;
  gap: 3px;
  background: linear-gradient(#f7f7f7, #b8b8b8);
  border-top: 1px solid #fff;
  align-items: center;
}
.stream-sprite {
  width: 30px;
  height: 25px;
  min-width: 30px !important;
  padding: 0;
  background-size: 384px 138px;
}
.stream-sprite.stream-play { background-position: -18px -14px; }
.stream-sprite.stream-pause { background-position: -57px -14px; }
.stream-sprite.stream-mute { background-position: -300px -14px; }
.stream-sprite.stream-fullscreen { background-position: -338px -47px; }
.stream-viewer-controls .stream-sprite {
  transform: none;
  margin: 0;
}
.stream-viewer-controls input { width: 82px; }
.stream-viewer-controls select { height: 23px; }
.stream-controls [data-stream-lights],
.stream-controls [data-stream-close] {
  height: 25px;
  min-width: 52px;
  padding: 2px 6px;
  font-size: 11px;
}

@media (max-width: 760px) {
  body { font-size: 12px; }
  main.container { padding: 7px 6px 18px; }
  .topbar .brand { flex-basis: 110px; width: 110px; height: 46px; }
  .brand-logo,
  .topbar .brand-logo { width: 140px !important; top: -28px; }
  .topbar .top-inner.container { min-height: 48px; }
  .home-layout,
  html.view-mobile .home-layout { grid-template-columns: 1fr; }
  .home-side { border-left: 0; padding-left: 0; }
  .home-bottom-feed .blorgfeed-list { grid-template-columns: 1fr; }
  .home-bottom-feed .blorgfeed-list a { border-right: 0; border-bottom: 1px solid #3f73ac; }
  .home-bottom-feed .blorgfeed-list a:last-child { border-bottom: 0; }
}

.sponsor-stack .retail-ad strong {
  display: block;
  color: #e60000;
  text-decoration: underline;
}

.sponsor-stack .retail-ad span {
  display: block;
  color: #333;
  font-size: 12px;
  margin-top: 2px;
}

.sponsor-stack .phone-ad {
  background: #fff45a;
}

.sponsor-stack .bestbuy-ad {
  background: #fff7ad;
}

@media (max-width: 900px) {
  .profile-main > tbody > tr {
    grid-template-columns: 1fr;
  }

  .profile-main .photo-grid,
  .album-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .callout-actions,
  .callout-form small {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Blorg brown theme overrides */
:root {
  --blorg-dark: #4A3418;
  --blorg-mid: #604822;
  --blorg-gold: #725F30;
  --blorg-olive: #605020;
  --blorg-blue-lite: #d9ccb0;
}

.topbar {
  background: var(--blorg-dark) !important;
}

.nav-row {
  background: var(--blorg-gold) !important;
  border-top-color: #8a7648 !important;
  border-bottom-color: var(--blorg-dark) !important;
}

.box h2,
.box h3,
.profile-blurbs h3,
.friends-box h4,
.orange-header {
  background: #d8c08a !important;
  border-color: #b39454 !important;
  color: #4A3418 !important;
}

.contact-box h4,
.notifications-panel h4,
.chatrooms-title {
  background: var(--blorg-mid) !important;
}

.search-sort-tabs,
.mail-tabs,
.retro-form legend,
.callouts-table th,
.home-shill-table th {
  background: var(--blorg-gold) !important;
  border-color: var(--blorg-dark) !important;
  color: #fff !important;
}

.search-sort-tabs a,
.mail-tabs a {
  color: #fff !important;
}

.search-sort-tabs a,
.search-sort-tabs a.active,
.classic-mail-table th {
  background: var(--blorg-gold) !important;
  border-color: var(--blorg-dark) !important;
  color: #fff !important;
}

.classic-mail-table td {
  background: #efe7d4 !important;
}

.mail-center {
  border-color: var(--blorg-gold) !important;
}

.friend-online-badge {
  top: auto !important;
  bottom: -21px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  overflow: hidden !important;
}

.friend-photo-wrap { margin-bottom: 22px; }

.friend-online-badge .online-icon {
  display: block !important;
  width: auto !important;
  height: 18px !important;
  max-width: none !important;
  margin: 0 !important;
}

.retro-form fieldset {
  border-color: var(--blorg-gold) !important;
}

.profile-summary-card,
.interests-box td:first-child,
.chatrooms-panel,
.chatrooms-user {
  background: var(--blorg-blue-lite) !important;
}

.brand-logo {
  height: 130px !important;
}

.topbar .brand-logo {
  height: 128px !important;
}

.youtube-embed {
  max-width: 640px;
  min-height: 360px;
}

.profile-blurbs iframe,
.comment-rendered iframe {
  width: 100%;
  min-height: 360px;
}

.chatrooms-panel {
  width: 520px;
  max-width: calc(100vw - 28px);
  overflow: visible;
  color: #111 !important;
  font: 12px Arial, Helvetica, sans-serif !important;
}

.chatrooms-panel *, .chatrooms-panel *::before, .chatrooms-panel *::after {
  box-sizing: border-box;
  letter-spacing: 0 !important;
}
.chatrooms-panel a { color:#003399; }
.chatrooms-body { height:calc(100% - 28px); min-height:0; display:flex; flex-direction:column; }
.chatrooms-layout { flex:1; min-height:0; }
.chatrooms-main { display:flex; flex-direction:column; min-height:0; }
.chatrooms-history { flex:1; height:auto; min-height:150px; }
.chatrooms-resize-top { position:absolute; left:0; right:0; top:-6px; height:10px; cursor:ns-resize; z-index:3; }
.chat-style-tools { display:grid; grid-template-columns:1fr 34px auto; gap:4px; padding:4px 0; }
.chat-style-tools select, .chat-style-tools input, .chat-style-tools button { min-width:0; height:24px; font-size:11px; }
.chat-room-main { display:flex; align-items:center; }
.chat-room-main.active, .chat-sub-room.active { background:#d8e8ff; font-weight:bold; }
.chat-room-main .chat-room-arrow { flex:0 0 20px; padding:3px 1px; }
.chat-room-main .chat-room-select { flex:1; }
.chat-sub-room { padding-left:23px !important; font-size:10px !important; }
.chatroom-message { position:relative; display:flex; align-items:flex-start; gap:5px; padding-top:3px; min-height:28px; }
.chat-message-pfp { width:24px; height:24px; object-fit:cover; flex:0 0 24px; border:1px solid #9fb7d5; }
.chat-message-copy { min-width:0; flex:1; }
.chat-message-name { font-weight:bold; }
.chat-like-count { position:absolute; right:2px; top:-8px; color:#168400; background:#eefbea; border:1px solid #8acb7f; padding:0 3px; font-size:9px; z-index:1; }
.chat-blorg-emote { width:30px; height:30px; object-fit:contain; vertical-align:middle; }
.chat-image-emote-button { width:36px !important; height:36px !important; }
.chat-image-emote-button img { width:30px; height:30px; object-fit:contain; }
.chat-shared-link { overflow-wrap:anywhere; }
.chatrooms-ad { height:auto; min-height:74px; padding:4px; }
.chatrooms-ad img { max-width:112px; max-height:42px; object-fit:contain; }

.chatrooms-resize-left {
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
  z-index: 2;
}

.chatrooms-panel form {
  grid-template-columns: 36px minmax(0, 1fr) 58px !important;
}

.chatrooms-panel textarea[data-chat-input] {
  width: 100%;
  min-height: 42px;
  max-height: 92px;
  resize: vertical;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.chatroom-message {
  overflow-wrap: anywhere;
  word-break: break-word;
}

html.view-mobile .chatrooms-panel {
  resize: none;
}

@media (max-width: 760px) {
  .brand-logo,
  .topbar .brand-logo {
    height: 54px !important;
  }

  body {
    min-width: 0;
  }
}

/* Keep the classic-blue layer last so legacy brown rules cannot win. */
.topbar { background: var(--classic-navy) !important; }
.nav-row { background: var(--classic-mid) !important; border-color: #3d75ad !important; }
.box h2,
.box h3,
.profile-blurbs h3,
.friends-box h4,
.orange-header {
  background: linear-gradient(90deg, #dcecff 0%, #a9c9f5 65%, #eef6ff 100%) !important;
  border-color: var(--classic-line) !important;
  color: #001f64 !important;
}
.contact-box h4,
.notifications-panel h4,
.chatrooms-title,
.live-stream-pip > div { background: var(--classic-blue) !important; color: #fff !important; }
.search-sort-tabs,
.mail-tabs,
.retro-form legend,
.callouts-table th,
.home-shill-table th,
.classic-mail-table th,
.search-sort-tabs a,
.search-sort-tabs a.active,
.mail-tabs a {
  background: var(--classic-mid) !important;
  border-color: #3d75ad !important;
  color: #fff !important;
}
.profile-summary-card,
.interests-box td:first-child,
.chatrooms-panel,
.chatrooms-user { background: #cfe2f7 !important; }
.classic-mail-table td { background: #f3f8ff !important; }
.mail-center,
.retro-form fieldset,
.live-stream-pip,
.stream-studio video,
.studio-mic-meter,
.studio-analytics > div,
.studio-viewers { border-color: var(--classic-mid) !important; }
.home-category-grid { background: #f0f6ff !important; border-color: #bfd5ef !important; }
.retro-tracklist > button.active,
.retro-music-controls button.active,
.customization-guide-title,
.guide-pdf-link {
  background: var(--classic-blue) !important;
  color: #fff !important;
}
.profile-music-editor,
.music-search-results,
.customization-guide-panel {
  border-color: var(--classic-mid) !important;
}
.profile-music-editor { background: #f3f8ff !important; }
.music-search-results > button:hover { background: #e2efff !important; }
.profile-playlist-editor li { border-color: #b7d1ef !important; }
.field-help,
.restart-profile-tutorial {
  border-color: #3d75ad !important;
  background: #b8d3f6 !important;
  color: #001f64 !important;
}
.edit-tutorial-bubble strong,
.customization-guide-body summary { color: #003399 !important; }
.customization-guide-body th { background: #cfe2f7 !important; }
.customization-guide-body td,
.customization-guide-body details,
.customization-guide-body code { border-color: #b7d1ef !important; }
.customization-guide-body code { background: #f3f8ff !important; }
.chat-voice-view,
.voices-page { background: #edf5ff !important; }
.voices-shell { border-color: var(--classic-blue) !important; }
.voices-shell > header {
  border-color: #3d75ad !important;
  background: linear-gradient(#1e63c7, #003399) !important;
}
.voice-meter { border-color: var(--classic-mid) !important; }
.voice-room-tools,
.voice-settings,
.voice-host-editor,
.voice-discovery { border-color: #9fc7ef !important; }
.voice-host-editor,
.voice-discovery { background: linear-gradient(#f8fbff, #dcecff) !important; }
.voice-room-tools button,
.voice-host-editor button,
.voices-shell header button,
.voice-actions button,
.voice-discovery-item {
  border-color: #79a9d8 !important;
  background: linear-gradient(#fff, #d8eaff) !important;
}
.voice-entry-splash { background: linear-gradient(145deg, #001a4d, #1655b8 55%, #6b9bd3) !important; }

.brand-logo,
.topbar .brand-logo {
  width: 260px !important;
  max-width: none !important;
  height: auto !important;
  left: 0;
  top: -49px;
}
.stream-sprite {
  width: 30px;
  height: 25px;
  min-width: 30px !important;
  background-size: 384px 138px;
}
.stream-sprite.stream-play { background-position: -18px -14px; }
.stream-sprite.stream-pause { background-position: -57px -14px; }
.stream-sprite.stream-mute { background-position: -300px -14px; }
.stream-sprite.stream-fullscreen { background-position: -338px -47px; }
.stream-viewer-controls .stream-sprite { transform: none; margin: 0; }

@media (max-width: 760px) {
  .brand-logo,
  .topbar .brand-logo {
    width: 140px !important;
    height: auto !important;
    top: -28px;
  }
}

/* Final layout lock: keep header/logo stable and avoid text collisions. */
.topbar .top-inner.container {
  align-items: flex-start;
  min-height: 70px;
  padding-top: 4px;
}

.topbar .brand {
  flex: 0 0 230px;
  width: 230px;
  height: 64px;
  overflow: hidden;
}

.brand-logo,
.topbar .brand-logo {
  width: 220px !important;
  left: 0;
  top: -33px;
}

.topbar .top-right {
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}

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

.topbar .search label {
  white-space: nowrap;
}

.topbar .search input[type="text"] {
  width: 156px;
}

.blorg-ca-copy {
  min-width: 28px;
  text-align: center;
}

/* Profile pages: remove white backing and give the center content more room. */
body.profile-custom-page main.container {
  background: transparent;
  width: min(1040px, 100%);
  max-width: 1040px;
  padding: 10px;
}

body.profile-custom-page .profile-table .left-col {
  width: 320px;
}

body.profile-custom-page .profile-main > tbody > tr {
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
}

body.profile-custom-page .profile-blurbs iframe,
body.profile-custom-page .comment-rendered iframe {
  width: 100% !important;
  min-height: 240px;
  aspect-ratio: 16 / 9;
  height: auto !important;
}

/* Profile social icons beneath View My Pics. */
.profile-social-links {
  margin-top: 5px;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.social-link {
  width: 16px;
  height: 16px;
  border: 1px solid #7f98b8;
  background-image: url('/public/images/BlorgspaceSocials.png');
  background-repeat: no-repeat;
  background-size: 400% 100%;
  background-color: #e9f2ff;
  display: inline-block;
}

.social-link.social-x { background-position: 0% 0; }
.social-link.social-github { background-position: 33.333% 0; }
.social-link.social-telegram { background-position: 66.666% 0; }
.social-link.social-web { background-position: 100% 0; }

.social-link.is-disabled {
  filter: grayscale(100%);
  opacity: 0.35;
  pointer-events: none;
}

/* Home request notifier colors. */
.home-notifiers .nm-red { color: #b00020; }
.home-notifiers .nm-orange { color: #cc6800; }
.home-notifiers .nm-yellow { color: #8f6800; }
.home-notifiers .nm-lime { color: #2f7f2f; }
.home-notifiers .nm-blue { color: #0050b7; }
.home-notifiers .nm-purple { color: #6c2ca7; }
.home-notifiers .nm-pink { color: #b12d7f; }
.home-notifiers .nm-cyan { color: #007f99; }
.home-notifiers .nm-teal { color: #0a6a66; }

.friend-request-box .nm-purple {
  color: #6c2ca7;
  font-weight: bold;
}

/* Messages pages. */
.messages-table .messages-pfp {
  width: 36px;
  height: 36px;
  border: 1px solid #7da2cf;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 8px;
}

.messages-unread {
  color: #b00020;
  font-weight: bold;
}

.message-thread-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.message-thread-controls form {
  margin: 0;
}

.message-thread-history {
  border: 1px solid #9fc0e7;
  background: #f5f9ff;
  padding: 8px;
  max-height: 430px;
  overflow-y: auto;
}

.thread-row {
  border: 1px solid #c7dcf4;
  background: #fff;
  padding: 6px;
  margin-bottom: 7px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.thread-row.mine {
  border-color: #8fb1dd;
  background: #eef5ff;
  grid-template-columns: minmax(0, 1fr) 44px;
}

.thread-row.mine .thread-pfp-link {
  order: 2;
}

.thread-row.mine .thread-message-main {
  order: 1;
}

.thread-pfp-link {
  display: block;
}

.thread-pfp {
  width: 40px !important;
  height: 40px !important;
  margin-right: 0 !important;
  object-fit: cover;
}

.thread-author {
  color: #003399;
  font-weight: bold;
  margin-bottom: 3px;
}

.thread-body {
  overflow-wrap: anywhere;
}

.thread-time {
  margin-top: 4px;
  color: #555;
  font-size: 11px;
}

.thread-compose textarea {
  min-height: 90px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  margin-bottom: 6px;
}

.thread-media-upload {
  display: inline-block;
  margin-right: 8px;
}

.thread-media-upload input {
  display: block;
  margin-top: 3px;
}

.blog-pasted-video {
  width: 100% !important;
  background: #000 !important;
}

@font-face {
  font-family: "Inter";
  src: url("/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Lightweight public stream watch page for phones. */
.mobile-public-stream-page {
  margin: 0;
  background: #000;
  color: #d3d3d3;
  font-family: "Inter", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.mobile-public-stream-shell {
  min-height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) 10px max(18px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.mobile-public-stream-card,
.mobile-public-stream-list {
  border: 1px solid rgba(113, 118, 122, 0.34);
  background: #000;
  border-radius: 11px;
  overflow: hidden;
  margin: 0 0 10px;
}

.mobile-public-stream-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(113, 118, 122, 0.34);
  color: #8b98a5;
  font-size: 12px;
  font-weight: 500;
}

.mobile-public-stream-head a {
  color: #7cc4ff;
  text-decoration: none;
}

.mobile-public-stream-card h1 {
  margin: 0;
  padding: 10px 12px 8px;
  color: #d3d3d3;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 780;
}

.mobile-public-stream-card .native-live-meta {
  padding: 0 12px 9px;
  color: #8b98a5;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.mobile-public-managed-meta {
  display: flex !important;
}

.mobile-public-stream-player {
  border: 0 !important;
  background: #000 !important;
}

.mobile-public-stream-player iframe,
.mobile-public-stream-player video[data-native-live-video],
.mobile-public-stream-player .stream-placeholder {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  border: 0 !important;
  background: #000 !important;
}

.mobile-public-stream-player .stream-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-public-stream-player .stream-placeholder img {
  width: 150px;
  max-width: 48%;
}

.mobile-public-stream-player .stream-viewer-controls {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 10px;
  background: #050505;
  border-top: 1px solid rgba(113, 118, 122, 0.34);
}

.mobile-public-stream-player .stream-viewer-controls label {
  color: #d3d3d3;
}

.mobile-public-stream-player .mobile-lite-stream-controls button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: #101820;
  color: #d3d3d3;
  padding: 0 14px;
  font-family: "Inter", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
}

.mobile-public-stream-player .stream-chat-panel {
  border-top: 1px solid rgba(113, 118, 122, 0.34);
  background: #000;
}

.mobile-public-stream-player .stream-chat-head {
  background: #050505;
  color: #d3d3d3;
  border-bottom: 1px solid rgba(113, 118, 122, 0.28);
  font: 700 14px/1.2 "Inter", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mobile-public-stream-player .stream-chat-list {
  max-height: 176px;
}

.mobile-public-stream-player .stream-chat-form {
  grid-template-columns: minmax(0, 1fr) 42px 52px;
  gap: 6px;
  background: #050505;
  padding: 9px 10px;
}

.mobile-public-stream-player .stream-chat-form input {
  min-width: 0;
  border: 0;
  border-radius: 999px;
  background: #111820;
  color: #f1f5f9;
  padding: 0 12px;
}

.mobile-public-stream-player .stream-chat-form button {
  border-radius: 999px;
  min-height: 34px;
}

.mobile-public-stream-actions {
  display: flex;
  gap: 8px;
  padding: 11px 12px 12px;
  border-top: 1px solid rgba(113, 118, 122, 0.34);
}

.mobile-public-stream-actions button,
.mobile-public-stream-login button {
  border: 0;
  border-radius: 999px;
  background: #122f64;
  color: #f1f5f9;
  min-height: 36px;
  padding: 0 14px;
  font-weight: 700;
}

.mobile-stream-overlay-open {
  overflow: hidden !important;
}

.mobile-stream-landscape-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background: #000;
  overflow: hidden;
  touch-action: none;
}

.mobile-stream-landscape-frame {
  width: 100dvw;
  height: 100dvh;
  max-width: 100dvw;
  max-height: 100dvh;
  background: #000;
  display: grid;
  place-items: stretch;
}

.mobile-stream-landscape-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.mobile-stream-landscape-close {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 2;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.66);
  color: #f8fafc;
  padding: 0 13px;
  font: 700 12px/1 "Inter", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (orientation: portrait) {
  .mobile-stream-landscape-frame {
    width: 100dvw;
    height: min(100dvh, calc(100dvw * 1.7778));
    transform: none;
  }
}

.mobile-public-stream-page .stream-watermark-link {
  display: none !important;
}

.mobile-public-stream-login {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.mobile-public-stream-login[hidden] {
  display: none;
}

.mobile-public-stream-login input {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: #090d16;
  color: #f1f5f9;
  padding: 0 14px;
  font: inherit;
}

.mobile-public-stream-login small {
  color: #ff6b8a;
}

.mobile-public-stream-list {
  padding: 10px;
}

.mobile-public-stream-list .streams-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.mobile-public-stream-list .stream-slot-grid {
  display: grid;
  gap: 8px;
}

.mobile-public-stream-list .stream-slot {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(113, 118, 122, 0.3);
  border-radius: 8px;
  color: #d3d3d3;
  text-decoration: none;
}

.mobile-public-stream-list .stream-slot-preview img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}

.stream-share-link {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.55);
}

.stream-share-link input {
  width: 100%;
  box-sizing: border-box;
}

/* Blog page styling. */
.blog-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 12px;
}

.blog-sidebar {
  font-size: 12px;
}

.blog-sidebar h4 {
  margin: 10px 0 5px;
  color: #001f64;
}

.blog-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-sidebar li {
  margin: 3px 0;
}

.blog-new-entry {
  display: inline-block;
  border: 1px solid #95afd4;
  background: #ebf4ff;
  padding: 6px 9px;
  margin-bottom: 8px;
  color: #003399;
  font-weight: bold;
  text-decoration: none;
}

.blog-feature-card {
  border: 1px solid #c0d6f1;
  background: #d4e6fb;
  padding: 10px;
  margin-bottom: 12px;
}

.blog-top-title {
  font-size: 32px;
  color: #001f64;
  margin: 0 0 8px;
}

.blog-entry-card {
  border: 1px solid #bfd5ef;
  background: #d5e7fb;
  padding: 10px;
  margin-bottom: 10px;
}

.blog-entry-card h4 {
  margin: 4px 0;
  font-size: 16px;
}

.blog-meta {
  color: #1f3f68;
  font-size: 11px;
}

.blog-category {
  color: #333;
  font-size: 12px;
}

@media (max-width: 760px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }

  body.profile-custom-page main.container {
    width: 100%;
    max-width: 100%;
  }

  body.profile-custom-page .profile-table .left-col {
    width: auto;
  }
}

/* Final UX patch set: header wrapping, messenger, Voices immersion, and blog/profile polish. */
.topbar .top-inner.container {
  align-items: flex-start;
  gap: 10px;
}

.topbar .top-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  row-gap: 2px;
  min-width: 0;
}

.topbar .search {
  flex: 1 1 320px;
  min-width: 260px;
}

.topbar .auth-links {
  flex: 1 1 100%;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px 8px;
  white-space: normal;
}

.topbar .auth-links a,
.topbar .auth-links span,
.topbar .online-users-counter,
.topbar .blorg-token-widget {
  white-space: nowrap;
}

.profile-social-links {
  gap: 6px;
}

.social-link {
  width: 24px;
  height: 24px;
  border: 0;
  background-size: 400% 100%;
  image-rendering: auto;
}

body.profile-custom-page main.container {
  width: min(1120px, 100%);
  max-width: 1120px;
}

body.profile-custom-page .profile-table .left-col {
  width: 300px;
}

body.profile-custom-page .profile-main > tbody > tr {
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
}

body.profile-custom-page .youtube-embed,
body.profile-custom-page .profile-blurbs iframe,
body.profile-custom-page .comment-rendered iframe {
  max-width: 820px;
  min-height: 300px;
}

.friend-online-badge,
.friend-online-badge .online-icon {
  border: 0 !important;
  box-shadow: none !important;
}

.chatrooms-title {
  cursor: pointer;
  user-select: none;
}

.chat-style-tools {
  grid-template-columns: 1fr 34px auto;
}

.chat-ui-switch,
[data-chat-desktop],
[data-chat-mobile],
[data-chat-sounds] {
  display: none !important;
}

html.view-mobile .chatrooms-panel {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) scale(1.05);
  transform-origin: bottom center;
  width: min(390px, calc(100vw - 14px));
  max-width: calc(100vw - 14px);
}

html.view-mobile .chatrooms-layout {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 5px;
}

html.view-mobile .chatrooms-history {
  height: 172px;
}

.voices-page,
.voices-page body {
  overflow: hidden;
}

.voices-shell {
  width: min(760px, 100%);
  margin: 0 auto;
  min-height: 100vh;
  height: 100vh;
  border: 0;
  padding: 8px 10px 10px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 8%, rgba(197,224,255,.55), rgba(237,245,255,.1) 42%, transparent 70%);
}

.voices-shell > header {
  border: 0;
  background: transparent;
  color: #003399;
  padding: 4px 0 8px;
  align-items: center;
  gap: 8px;
}

.voices-shell > header img {
  width: 115px;
}

.voices-shell > header [data-voice-state] {
  margin-left: auto;
  font-weight: bold;
}

.voice-icon-button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  padding: 0;
  display: grid;
  place-items: center;
}

.voice-room-tools,
.voice-host-editor,
.voice-discovery,
.voice-settings,
.voices-brand {
  border: 0 !important;
  background: transparent !important;
  padding-left: 0;
  padding-right: 0;
}

.voice-discovery h3,
.voice-content h3 {
  display: none !important;
}

.voice-settings summary {
  font-size: 26px;
  line-height: 1;
  width: 34px;
}

.voice-content {
  position: relative;
  display: block;
  height: calc(100vh - 195px);
  margin-top: 4px;
}

.voice-canvas {
  position: relative;
  height: calc(100% - 86px);
}

.voice-stage-zone {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, 92%);
  height: 48%;
}

.voice-hosts-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.voice-speaker-arc {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(100% - 56px);
}

.voice-speaker-arc .voice-seat {
  position: absolute;
}

.voice-speaker-arc .voice-seat:nth-child(1) { left: 50%; top: 34%; transform: translate(-50%, -50%); }
.voice-speaker-arc .voice-seat:nth-child(2) { left: 28%; top: 52%; transform: translate(-50%, -50%); }
.voice-speaker-arc .voice-seat:nth-child(3) { left: 72%; top: 52%; transform: translate(-50%, -50%); }
.voice-speaker-arc .voice-seat:nth-child(4) { left: 18%; top: 72%; transform: translate(-50%, -50%); }
.voice-speaker-arc .voice-seat:nth-child(5) { left: 82%; top: 72%; transform: translate(-50%, -50%); }

.voice-audience-grid {
  position: absolute;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  width: min(640px, 92%);
  height: 44%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(44px, auto);
  gap: 5px 10px;
  align-content: start;
}

.voice-seat {
  display: grid;
  grid-template-columns: 34px 1fr 22px auto;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  border: 0 !important;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(1.4px);
  border-radius: 7px;
  min-width: 0;
}

.voice-seat img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.voice-seat > div {
  min-width: 0;
}

.voice-seat strong,
.voice-seat small,
.voice-seat em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-chat-float {
  position: absolute;
  right: 12px;
  top: 10px;
  width: min(250px, 42%);
  max-height: 34%;
  overflow: hidden;
  font-size: 11px;
  pointer-events: none;
}

.voice-chat-line {
  margin-bottom: 4px;
  color: #001f64;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}

.voice-content form[data-chat-form] {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(640px, 92%);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}

.voice-content form[data-chat-form] input {
  border: 1px solid #8db5e5;
  background: rgba(255,255,255,.94);
  height: 36px;
  padding: 0 9px;
}

.voice-content form[data-chat-form] button {
  min-width: 72px;
}

@media (max-width: 760px) {
  .topbar .top-right,
  .topbar .auth-links {
    justify-content: flex-start;
  }

  .social-link {
    width: 26px;
    height: 26px;
  }

  .voice-content {
    height: calc(100vh - 184px);
  }

  .voice-stage-zone {
    width: 96%;
  }

  .voice-audience-grid {
    width: 96%;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .voice-chat-float {
    width: 60%;
    right: 4px;
  }

  .voice-content form[data-chat-form] {
    width: 96%;
  }
}

.blog-entry-split {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
}

.blog-entry-author {
  border: 1px solid #8db5e5;
  background: #cfe2f7;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.blog-entry-author img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border: 1px solid #6f93bf;
}

.blog-entry-main {
  min-width: 0;
}

.blog-kudos {
  margin-top: 10px;
  color: #b00020;
}

.blog-comments-preview {
  margin-top: 8px;
  background: #f0c77e;
  border: 1px solid #d8aa58;
  padding: 8px;
}

@media (max-width: 760px) {
  .blog-entry-split {
    grid-template-columns: 1fr;
  }
}

/* Final pass: local blog entry page + Voices control/header placement + responsive mobile tiers. */
.blog-feature-card p {
  margin: 4px 0 8px;
}

.blog-empty-state {
  text-align: center;
}

.blog-read-more {
  display: inline-block;
  margin-top: 6px;
  font-weight: bold;
}

.blog-entry-page {
  padding-bottom: 20px;
}

.blog-entry-layout {
  display: grid;
  grid-template-columns: 134px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid #97b7de;
  background: #d9d9d9;
  padding: 8px;
}

.blog-entry-left-rail {
  border: 1px solid #7ba5d3;
  background: #c2cfe1;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  align-self: start;
}

.blog-entry-left-rail img {
  width: 100%;
  height: 102px;
  object-fit: cover;
  border: 1px solid #5f7ea8;
}

.blog-entry-right-pane {
  border: 1px solid #b5b5b5;
  background: #eeeeee;
  padding: 10px 14px;
}

.blog-entry-right-pane h1 {
  margin: 0 0 10px;
  font-size: 46px;
  line-height: 1.06;
  color: #000;
}

.blog-entry-right-pane p {
  margin: 10px 0;
  line-height: 1.17;
  color: #111;
}

.blog-inline-emote,
.blog-entry-right-pane .blog-inline-emote,
.blog-entry-main .blog-inline-emote,
.blog-content .blog-inline-emote {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  object-fit: contain;
  vertical-align: middle;
}

.blog-entry-kudos-row {
  margin-top: 16px;
  border-top: 1px solid #b7b7b7;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}

.blog-entry-kudos-row strong {
  color: #bb0000;
}

.blog-entry-comments {
  margin-top: 8px;
  border-top: 1px solid #9f9f9f;
  padding-top: 10px;
}

.blog-entry-comments h3 {
  margin: 0 0 4px;
}

.blog-comments-counter {
  margin: 0 0 8px;
  font-weight: bold;
}

.blog-comment-empty {
  border: 1px solid #d5b37c;
  background: #f2d5a7;
  padding: 8px;
}

.blog-comment-row {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  border: 1px solid #d9b56f;
  background: #f0c57e;
  margin-bottom: 6px;
}

.blog-comment-row.pinned {
  box-shadow: inset 0 0 0 2px rgba(176, 0, 32, 0.24);
}

.blog-comment-author {
  border-right: 1px solid #deb866;
  padding: 8px;
  text-align: center;
  font-size: 12px;
}

.blog-comment-author img {
  width: 86px;
  height: 86px;
  object-fit: cover;
  border: 1px solid #c7aa79;
  margin-bottom: 6px;
}

.blog-comment-main {
  padding: 8px 10px;
}

.blog-comment-meta {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 6px;
}

.blog-comment-meta span {
  color: #8f2e2e;
  font-weight: bold;
}

.blog-comment-report {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
}

.blog-related {
  margin-top: 10px;
  border: 1px solid #9fc1e6;
  background: #dcecff;
  padding: 8px;
}

.blog-related h3 {
  margin: 0 0 6px;
}

.blog-related ul {
  margin: 0;
  padding-left: 16px;
}

.voice-room-hidden {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.voices-shell > header {
  position: relative;
}

.voices-shell > header img {
  width: 168px;
  max-width: 44vw;
}

.voice-header-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
}

.voice-settings-float {
  position: relative;
  margin: 0;
  z-index: 30;
}

.voice-settings-float > summary {
  list-style: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #84a9d4;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.voice-settings-float > summary::-webkit-details-marker {
  display: none;
}

.voice-settings-float > .voice-device-flyout {
  position: absolute;
  top: 34px;
  right: 0;
  width: min(360px, calc(100vw - 22px));
  border: 1px solid #84a9d4;
  background: rgba(238, 247, 255, 0.98);
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(2, 36, 88, 0.24);
}

.voice-settings-float .voice-device-grid {
  margin-top: 0;
}

.voice-room-tools {
  align-items: center;
}

.voice-content {
  height: calc(100vh - 186px);
}

.voice-canvas {
  height: calc(100% - 74px);
}

.voice-stage-zone {
  top: 3px;
  height: 44%;
}

.voice-hosts-row {
  gap: 7px;
}

.voice-audience-grid {
  bottom: 96px;
  width: min(650px, 92%);
  height: 42%;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 6px 10px;
}

.voice-seat {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  padding: 3px 5px 4px;
}

.voice-avatar-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 38px;
}

.voice-avatar-stack img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.voice-seat .voice-mic-state {
  width: 28px;
  height: 42px;
  margin-top: -9px;
  transform: scale(0.58);
  transform-origin: top center;
}

.voice-seat.speaking .voice-mic-state {
  background-position: -54px center;
  filter: drop-shadow(0 0 4px #67f442);
  animation: voice-mic-pulse .7s ease-in-out infinite alternate;
}

.voice-seat.muted .voice-mic-state {
  background-position: -91px center;
  filter: none;
  animation: none;
}

.voice-seat.listener {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: none;
  box-shadow: none;
}

.voice-seat.listener .voice-avatar-stack img {
  border-radius: 4px;
}

.voice-seat button {
  align-self: center;
}

.voice-chat-float {
  top: 4px;
  max-height: 30%;
}

.voice-content form[data-chat-form] {
  width: min(560px, 88%);
  bottom: 14px;
  z-index: 6;
}

.voice-content form[data-chat-form] input {
  height: 34px;
}

.stream-controls [data-stream-lights] {
  min-width: 38px;
  width: 38px;
  padding: 0;
  font-size: 16px;
}

@media (max-width: 860px) {
  .blog-entry-right-pane h1 {
    font-size: 38px;
  }
}

@media (max-width: 760px) {
  .blog-entry-layout {
    grid-template-columns: 1fr;
  }

  .blog-entry-left-rail img {
    width: 130px;
    height: 130px;
  }

  .blog-comment-row {
    grid-template-columns: 1fr;
  }

  .blog-comment-author {
    border-right: 0;
    border-bottom: 1px solid #deb866;
  }

  .voices-shell > header {
    gap: 6px;
    flex-wrap: wrap;
  }

  .voices-shell > header [data-voice-state] {
    margin-left: 0;
    order: 3;
  }
}

@media (max-width: 412px) {
  html.view-mobile .chatrooms-panel {
    left: 6px !important;
    right: 6px !important;
    width: auto !important;
    max-width: none;
    transform: none !important;
    bottom: 6px;
  }

  html.view-mobile .chatrooms-panel:not(.collapsed) {
    height: min(76dvh, 640px) !important;
  }

  html.view-mobile .chatrooms-layout {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 4px;
  }

  html.view-mobile .chatrooms-history {
    min-height: 132px;
  }

  .voices-shell {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    padding: 7px 7px 8px;
  }

  .voices-shell > header img {
    width: 146px;
    max-width: 58vw;
  }

  .voice-room-tools {
    gap: 5px;
    flex-wrap: wrap;
  }

  .voice-room-tools form {
    width: 100%;
  }

  .voice-room-tools form input {
    min-width: 0;
    flex: 1;
  }

  .voice-content {
    height: calc(100dvh - 232px);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .voice-canvas {
    height: auto;
    display: grid;
    gap: 7px;
  }

  .voice-stage-zone,
  .voice-audience-grid {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    height: auto;
  }

  .voice-hosts-row {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .voice-speaker-arc {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    height: auto;
  }

  .voice-speaker-arc .voice-seat {
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100%;
  }

  .voice-audience-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .voice-chat-float {
    position: static;
    width: 100%;
    max-height: none;
    pointer-events: auto;
    margin-top: 1px;
  }

  .voice-content form[data-chat-form] {
    position: static;
    transform: none;
    width: 100%;
    margin: 0;
  }

  .voice-settings-float > .voice-device-flyout {
    right: -6px;
  }
}

@media (max-width: 390px) {
  html.view-mobile .chatrooms-panel:not(.collapsed) {
    height: min(74dvh, 620px) !important;
  }

  html.view-mobile .chatrooms-layout {
    grid-template-columns: 76px minmax(0, 1fr);
  }
}

@media (max-width: 375px) {
  .blog-entry-right-pane h1 {
    font-size: 31px;
  }

  .voices-shell > header img {
    width: 136px;
  }
}

@media (max-width: 360px) {
  html.view-mobile .chatrooms-panel {
    left: 4px !important;
    right: 4px !important;
  }

  html.view-mobile .chatrooms-layout {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .voice-seat {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 2px 4px 3px;
  }

  .voice-avatar-stack {
    width: 34px;
  }

  .voice-avatar-stack img {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 320px) {
  .voice-settings-float > .voice-device-flyout {
    width: calc(100vw - 14px);
    right: -4px;
  }

  .blog-entry-right-pane h1 {
    font-size: 28px;
  }
}

/* Composer + no-size desktop shells + borderless Voices controls. */
.blog-new-page h2 {
  margin: 10px 0 8px;
  color: #001f64;
}

.blog-new-error {
  border: 1px solid #c96161;
  background: #fde7e7;
  color: #7f0c0c;
  padding: 8px;
  margin-bottom: 8px;
  font-weight: bold;
}

.blog-new-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.blog-new-left,
.blog-new-right {
  border: 1px solid #87add9;
  background: #d4e6fb;
  padding: 6px;
  font-size: 12px;
}

.blog-new-left h3,
.blog-new-right h4 {
  margin: 0 0 6px;
  background: #89c4e9;
  color: #002e7a;
  border: 1px solid #77a8cf;
  padding: 4px;
  text-align: center;
}

.blog-new-left a,
.blog-new-right a {
  display: block;
  margin: 3px 0;
}

.blog-new-author-card {
  margin-top: 8px;
  border: 1px solid #9ebbe0;
  background: #edf5ff;
  padding: 6px;
}

.blog-new-author-card img {
  width: 100%;
  height: 142px;
  object-fit: cover;
  border: 1px solid #86a9d2;
  margin: 5px 0;
}

.blog-new-author-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-new-author-card li {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #c3d6ed;
  padding: 2px 0;
}

.blog-new-form {
  border: 1px solid #8eb3dc;
  background: #e7eef7;
  padding: 8px;
}

.blog-new-top-link {
  text-align: right;
  margin-bottom: 6px;
  font-weight: bold;
}

.blog-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  margin-bottom: 8px;
}

.blog-row > span {
  font-weight: bold;
  color: #001f64;
}

.blog-row input,
.blog-row select,
.blog-row textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid #95afd4;
  background: #fff;
  padding: 3px 4px;
  font: 13px Arial, Helvetica, sans-serif;
}

.blog-inline-selects {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.blog-inline-selects select {
  width: auto;
  min-width: 64px;
}

.blog-body-row textarea {
  min-height: 270px;
  line-height: 1.3;
  resize: vertical;
}

.blog-drop-wrap {
  position: relative;
  display: block;
  min-width: 0;
}

.blog-drop-wrap textarea {
  display: block;
  padding-bottom: 24px;
}

.blog-drop-overlay {
  position: absolute;
  inset: 8px;
  display: none;
  place-items: center;
  border: 2px dashed #2c72d8;
  background: rgba(225, 240, 255, 0.9);
  color: #003399;
  font-weight: bold;
  pointer-events: none;
  text-align: center;
}

.blog-drop-wrap.is-dragging-file .blog-drop-overlay,
.blog-new-form.is-dragging-file .blog-drop-overlay {
  display: grid;
}

.blog-character-counter {
  position: absolute;
  right: 8px;
  bottom: 6px;
  color: #586879;
  background: rgba(255, 255, 255, 0.82);
  padding: 1px 4px;
  font-size: 12px;
  pointer-events: none;
}

.blog-character-counter.is-over-limit {
  color: #b00020;
  font-weight: bold;
}

.blog-upload-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 8px 94px;
  flex-wrap: wrap;
}

.blog-upload-button {
  border: 1px solid #8cabd4;
  background: linear-gradient(#ffffff, #dbe9f9);
  color: #003399;
  font-weight: bold;
  padding: 5px 10px;
  cursor: pointer;
}

.blog-upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.blog-upload-hint {
  color: #415875;
  font-size: 12px;
}

.blog-upload-status {
  min-height: 16px;
  margin: -2px 0 6px 94px;
  color: #315c95;
  font-size: 12px;
  font-weight: bold;
}

.blog-upload-status:not(:empty) {
  display: inline-block;
  border: 1px solid #9bb9df;
  background: #f0f6ff;
  padding: 5px 8px;
}

.blog-new-form.is-uploading-media .blog-upload-status {
  color: #003399;
}

.blog-upload-status.is-busy::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border: 2px solid #9ec3ef;
  border-top-color: #003399;
  border-radius: 50%;
  animation: blog-upload-spin 0.7s linear infinite;
  vertical-align: -2px;
}

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

.blog-media-preview {
  display: flex;
  gap: 6px;
  margin: 0 0 8px 94px;
  flex-wrap: wrap;
}

.blog-media-preview[hidden] {
  display: none;
}

.blog-media-preview-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #95afd4;
  background: #f7fbff;
  padding: 3px;
  min-width: 320px;
  min-height: 200px;
}

.blog-media-preview img,
.blog-media-preview video {
  width: 320px;
  height: 200px;
  object-fit: cover;
}

.blog-media-preview-item.is-uploading {
  gap: 8px;
  color: #003399;
  background: repeating-linear-gradient(45deg, rgba(121, 164, 217, 0.16) 0 12px, rgba(180, 206, 239, 0.3) 12px 24px), #eef7ff;
}

.blog-upload-spinner {
  width: 18px;
  height: 18px;
  border: 3px solid #a9c8ed;
  border-top-color: #003399;
  border-radius: 50%;
  animation: blog-upload-spin 0.7s linear infinite;
}

.search-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
}

.search-pagination a,
.search-pagination span {
  border: 1px solid #8cabd4;
  background: #edf5ff;
  padding: 4px 9px;
  font-weight: bold;
}

.search-pagination span {
  color: #667;
}

.blog-new-note {
  border: 1px dashed #ad914e;
  background: #f4eccf;
  color: #514016;
  padding: 6px;
  font-size: 12px;
}

.blog-new-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.blog-new-actions button {
  border: 1px solid #8cabd4;
  background: linear-gradient(#ffffff, #dbe9f9);
  color: #003399;
  font-weight: bold;
  padding: 5px 10px;
  cursor: pointer;
}

.blog-new-actions button:disabled,
.blog-new-form.is-over-limit .blog-new-actions button {
  cursor: not-allowed;
  color: #667;
  background: #d6d9de;
}

.blog-new-right button {
  width: 100%;
  border: 1px solid #93aed0;
  background: #edf5ff;
  padding: 5px;
  margin: 0 0 8px;
}

.blog-new-gallery {
  border: 1px solid #9bb9df;
  min-height: 105px;
  background: repeating-linear-gradient(45deg, rgba(121, 164, 217, 0.2) 0 12px, rgba(180, 206, 239, 0.35) 12px 24px);
  margin-bottom: 8px;
}

.blog-new-article-list {
  border: 1px solid #9bb9df;
  background: #f0f6ff;
  padding: 6px;
}

html.view-desktop .chatrooms-panel {
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 18px);
}

html.view-desktop .chatrooms-body {
  height: auto !important;
}

.chatrooms-resize-left,
.chatrooms-resize-top {
  display: none !important;
}

.voices-shell {
  width: auto !important;
  max-width: none;
  min-height: 0 !important;
  height: auto !important;
  border: 0;
}

.voice-content {
  height: auto !important;
  min-height: 0;
}

.voice-canvas {
  height: auto !important;
  min-height: 390px;
}

.voice-room-tools button,
.voice-host-editor button,
.voices-shell header button,
.voice-actions button,
.voice-content form[data-chat-form] button,
.voice-seat button {
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  background: linear-gradient(180deg, rgba(235, 245, 255, 0.92), rgba(177, 210, 245, 0.92));
  color: #003399;
  border-radius: 8px;
  font-weight: bold;
}

.voice-room-tools button:hover,
.voice-host-editor button:hover,
.voices-shell header button:hover,
.voice-actions button:hover,
.voice-content form[data-chat-form] button:hover,
.voice-seat button:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(195, 221, 249, 0.96));
}

.voice-settings-float > summary {
  border: 0 !important;
  box-shadow: none;
}

.voice-settings-float > .voice-device-flyout {
  border: 0;
  background: linear-gradient(165deg, rgba(240, 248, 255, 0.98), rgba(206, 226, 250, 0.98));
}

.voice-seat.listener {
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 980px) {
  .blog-new-layout {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .blog-new-right {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .blog-new-layout {
    grid-template-columns: 1fr;
  }

  .blog-row {
    grid-template-columns: 1fr;
  }

  .blog-upload-tools,
  .blog-upload-status,
  .blog-media-preview {
    margin-left: 0;
  }

  .blog-body-row textarea {
    min-height: 220px;
  }
}

/* Final visuals: messenger, profile alignment, and immersive Voices stage. */
html.view-desktop .chatrooms-panel {
  left: 22px !important;
  right: auto !important;
  bottom: 0;
  width: min(1080px, calc(100vw - 44px)) !important;
  max-width: calc(100vw - 44px);
  height: min(520px, calc(100vh - 26px)) !important;
}

html.view-desktop .chatrooms-panel.collapsed {
  width: 320px !important;
  height: auto !important;
}

html.view-desktop .chatrooms-body {
  display: flex;
  flex-direction: column;
  height: calc(100% - 28px) !important;
  min-height: 0;
}

html.view-desktop .chatrooms-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 7px;
  flex: 1;
  min-height: 0;
}

html.view-desktop .chatrooms-main {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  gap: 4px;
  min-height: 0;
}

html.view-desktop .chatrooms-history {
  min-height: 0;
  overflow: auto;
}

html.view-desktop .chat-emoticons {
  max-height: 88px;
  overflow-y: auto;
  overflow-x: hidden;
}

html.view-desktop .chatrooms-panel form {
  margin: 0;
}

html.view-desktop .chatrooms-panel textarea[data-chat-input] {
  min-height: 40px;
  max-height: 84px;
  resize: none;
}

html.view-desktop .chatrooms-list {
  max-height: none;
  height: 100%;
}

html.view-desktop .chat-style-tools {
  grid-template-columns: 138px 24px 24px 36px auto;
  align-items: center;
}

html.view-desktop .chat-style-tools [data-style-bold],
html.view-desktop .chat-style-tools [data-style-italic] {
  border: 1px solid #7ea1ca;
  height: 24px;
  padding: 0;
  background: linear-gradient(#f7fbff, #d3e4f9);
}

html.view-desktop .chat-style-tools [data-style-bold].active,
html.view-desktop .chat-style-tools [data-style-italic].active {
  background: linear-gradient(#7fa9e0, #3c74bd);
  color: #fff;
}

html.view-desktop .chatrooms-ad {
  margin-top: 4px;
}

body.profile-custom-page .topbar .top-inner.container,
body.profile-custom-page .topbar .ad-banner.container,
body.profile-custom-page .topbar .nav-row.container,
body.profile-custom-page main.container,
body.profile-custom-page .footer.container {
  width: min(1180px, 100%);
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

body.profile-custom-page main.container {
  padding-top: 12px;
}

body.profile-custom-page .profile-header,
body.profile-custom-page .profile-main,
body.profile-custom-page .friends-box,
body.profile-custom-page .profile-friend-space {
  width: 100%;
  box-sizing: border-box;
}

body.profile-custom-page .profile-main > tbody > tr {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}

body.profile-custom-page .friends-box h4,
body.profile-custom-page .profile-friend-space h4 {
  background: #c8ddf7 !important;
  border: 1px solid #9ebde3 !important;
  color: #0a3470 !important;
  font-weight: bold;
}

.voices-page {
  background: radial-gradient(circle at 50% 0%, #193766 0%, #0b1528 40%, #05070f 100%) !important;
  color: #eaf3ff;
}

.immersive-shell {
  border: 1px solid rgba(129, 165, 220, 0.3);
  background:
    radial-gradient(120% 55% at 50% 105%, rgba(35, 102, 197, 0.24), transparent 58%),
    radial-gradient(90% 55% at 50% -8%, rgba(108, 160, 235, 0.2), transparent 65%),
    linear-gradient(180deg, rgba(13, 21, 40, 0.95), rgba(8, 11, 22, 0.95));
  box-shadow: inset 0 0 64px rgba(2, 8, 22, 0.6), 0 18px 44px rgba(0, 0, 0, 0.55);
  border-radius: 10px;
  padding: 8px 10px 10px;
}

.voices-stage-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'brand controls'
    'tools tools';
  align-items: center;
  gap: 6px 10px;
  padding: 4px 2px 8px;
  border-bottom: 1px solid rgba(130, 171, 230, 0.24);
}

.voices-brandline {
  grid-area: brand;
}

.voices-brandline img {
  width: 178px !important;
  max-width: 44vw;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.voices-stage-connection {
  grid-area: controls;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.voices-stage-tools {
  grid-area: tools;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.voices-stage-tools span {
  margin-left: auto;
  color: #91a8cc;
  font-size: 11px;
}

.voices-stage-tools form {
  display: flex;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.voices-stage-tools form input {
  min-width: 0;
  flex: 1;
  background: rgba(240, 246, 255, 0.95);
  border: 1px solid rgba(126, 157, 214, 0.8);
}

.voice-settings-float {
  position: absolute;
  top: 10px;
  right: 8px;
  z-index: 50;
}

.immersive-content {
  margin-top: 8px;
}

.immersive-canvas {
  min-height: 470px !important;
  padding: 6px 8px 92px;
  border: 1px solid rgba(116, 157, 219, 0.26);
  border-radius: 10px;
  background:
    radial-gradient(110% 80% at 50% 110%, rgba(37, 95, 176, 0.28), rgba(10, 16, 33, 0) 62%),
    linear-gradient(180deg, rgba(8, 13, 27, 0.76), rgba(6, 10, 21, 0.9));
}

.immersive-stage {
  position: relative;
  width: min(740px, 100%);
  margin: 0 auto;
  height: 196px;
}

.voice-hosts-row {
  gap: 26px;
  margin-top: 2px;
}

.voice-hosts-row .voice-seat {
  background: rgba(8, 18, 36, 0.82);
  border: 1px solid rgba(77, 146, 255, 0.65) !important;
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 0 18px rgba(32, 123, 255, 0.3);
}

.voice-speaker-arc {
  margin-top: 14px;
}

.voice-speaker-arc .voice-seat {
  background: rgba(9, 21, 42, 0.75);
  border: 1px solid rgba(90, 154, 255, 0.45) !important;
  border-radius: 12px;
}

.voice-seat strong,
.voice-seat small,
.voice-seat em {
  color: #d3e7ff;
}

.voice-seat small {
  color: #8dc2ff;
}

.voice-seat.listener {
  border-radius: 7px;
  border: 1px solid rgba(96, 138, 201, 0.52) !important;
  background: linear-gradient(180deg, rgba(12, 20, 41, 0.82), rgba(10, 16, 31, 0.9));
  box-shadow: inset 0 0 22px rgba(8, 14, 28, 0.42), 0 0 8px rgba(81, 132, 211, 0.2);
}

.voice-audience-grid {
  position: relative;
  top: auto;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 9px;
  margin-top: 248px;
}

.voice-seat.listener {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  min-height: 78px;
}

.voice-seat.listener > div {
  text-align: center;
  width: 100%;
}

.voice-seat.listener strong,
.voice-seat.listener small,
.voice-seat.listener em {
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.voice-seat.listener .voice-avatar-stack {
  width: auto;
}

.voice-seat.listener .voice-avatar-stack img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(129, 170, 231, 0.78);
}

.voice-seat.listener .voice-mic-state,
.voice-seat.listener button {
  display: none;
}

.voice-chat-float {
  top: auto;
  right: auto;
  left: 8px;
  bottom: 50px;
  width: min(360px, calc(100% - 16px));
  max-height: 86px;
  pointer-events: none;
  font-size: 11px;
}

.voice-chat-line {
  background: rgba(5, 12, 26, 0.74);
  border: 1px solid rgba(109, 156, 228, 0.22);
  border-radius: 7px;
  padding: 3px 6px;
}

.immersive-content form[data-chat-form] {
  margin-top: 8px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}

.immersive-content form[data-chat-form] input {
  background: rgba(238, 246, 255, 0.95);
  border: 1px solid rgba(106, 142, 197, 0.74);
}

.voice-admin {
  position: absolute;
  left: 8px;
  top: 194px;
}

@media (max-width: 760px) {
  .voices-stage-topbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      'brand'
      'controls'
      'tools';
  }

  .voices-stage-connection {
    justify-content: flex-start;
  }

  .voice-settings-float {
    position: static;
    margin: 0 0 6px;
  }

  .immersive-canvas {
    min-height: 400px !important;
    padding-bottom: 80px;
  }

  .immersive-stage {
    height: 170px;
  }

  .voice-audience-grid {
    margin-top: 214px;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 7px;
  }
}

.immersive-canvas,
.voice-seat,
.voice-chat-line,
.voice-discovery-item {
  transition: transform 180ms ease, opacity 180ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.voice-discovery-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(8, 34, 81, 0.35);
}

.voice-seat-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1px;
}

.voice-seat-meta strong,
.voice-seat-meta small,
.voice-seat-meta em {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-seat-meta small {
  font-size: 10px;
  letter-spacing: 0.02em;
}

.voice-room-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(3, 8, 20, 0.62);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.voice-room-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.voice-room-modal-card {
  width: min(330px, calc(100% - 28px));
  border: 1px solid rgba(132, 176, 234, 0.64);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(14, 26, 50, 0.97), rgba(8, 15, 29, 0.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
  padding: 12px 12px 10px;
  color: #e9f3ff;
  position: relative;
}

.voice-room-modal-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.voice-room-modal-card p {
  margin: 0 0 11px;
  color: #98b8e5;
  font-size: 12px;
}

.voice-room-modal-card [data-room-modal-join] {
  min-width: 88px;
}

.voice-create-modal {
  position: fixed;
  inset: 0;
  z-index: 71;
  background: rgba(3, 8, 20, 0.62);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.voice-create-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.voice-create-modal-card {
  width: min(380px, calc(100% - 20px));
  border: 1px solid rgba(132, 176, 234, 0.64);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(14, 26, 50, 0.97), rgba(8, 15, 29, 0.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
  padding: 12px;
  color: #e9f3ff;
  position: relative;
}

.voice-create-modal-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.voice-create-label {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 12px;
}

.voice-create-label input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(243, 248, 255, 0.98);
}

.voice-create-link-actions,
.voice-create-actions {
  display: flex;
  gap: 6px;
}

.voice-create-link-actions {
  margin-bottom: 8px;
}

.voice-settings-note {
  margin-top: 6px;
  font-size: 11px;
  color: #9dc8ff;
}

.voice-discovery {
  border-top: 1px solid rgba(130, 171, 230, 0.22);
  padding-top: 8px;
}

.voice-discovery [data-voice-rooms] {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.voice-discovery-item {
  min-width: 178px;
  text-align: left;
}

.voice-discovery-lobby {
  border-color: rgba(109, 193, 130, 0.78) !important;
  box-shadow: 0 0 0 1px rgba(104, 220, 138, 0.2) inset;
}

.immersive-canvas {
  background:
    radial-gradient(130% 90% at 50% 108%, rgba(28, 94, 182, 0.32), rgba(5, 10, 24, 0) 58%),
    radial-gradient(120% 45% at 50% 3%, rgba(68, 116, 183, 0.18), rgba(8, 16, 35, 0) 65%),
    linear-gradient(180deg, rgba(7, 12, 25, 0.9), rgba(5, 8, 18, 0.98)) !important;
}

.immersive-stage {
  background: radial-gradient(90% 130% at 50% 120%, rgba(43, 98, 181, 0.22), rgba(3, 7, 18, 0) 60%);
  border-radius: 20px;
}

.voice-seat {
  backdrop-filter: blur(2.8px);
}

.voice-avatar-link {
  display: inline-flex;
}

.voices-electron .immersive-shell {
  box-shadow: inset 0 0 90px rgba(2, 8, 22, 0.78), 0 26px 64px rgba(0, 0, 0, 0.62);
}

body.profile-custom-page .profile-blurbs h3,
body.profile-custom-page .friends-box h4,
body.profile-custom-page .profile-friend-space h4 {
  background: linear-gradient(#ffd2a0, #f0b77a) !important;
  border: 1px solid #d6914f !important;
  color: #d45a16 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

body.profile-custom-page .friend-count {
  color: #1f1f1f;
}

body.profile-custom-page .friend-count span {
  color: #c9411a;
  font-weight: bold;
}

.voice-room-modal-close {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(147, 184, 238, 0.72);
  background: rgba(20, 44, 87, 0.85);
  color: #d8ecff;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}

.voices-stage-connection [data-join],
.voices-stage-connection [data-leave] {
  min-width: 90px;
}

@media (max-width: 760px) {
  .voice-room-modal-card {
    width: min(320px, calc(100% - 16px));
  }

  .voice-create-modal-card {
    width: min(330px, calc(100% - 14px));
  }
}

/* Final Voices stage pass */
.voices-page {
  background: #020711 !important;
  overflow-x: hidden;
}

.voices-shell.immersive-shell {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(110% 70% at 50% 105%, rgba(39, 88, 158, 0.36), rgba(3, 7, 17, 0) 58%),
    linear-gradient(180deg, #07111f 0%, #020711 56%, #01040b 100%) !important;
}

.voices-stage-topbar {
  position: relative;
  min-height: 116px;
  display: grid !important;
  grid-template-columns: minmax(140px, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 12px 46px 12px 18px !important;
  border-bottom: 1px solid rgba(58, 100, 171, 0.36);
  background:
    radial-gradient(70% 120% at 46% 112%, rgba(44, 93, 169, 0.18), rgba(5, 14, 31, 0) 65%),
    linear-gradient(180deg, #1b5fbd 0%, #0b3b94 100%) !important;
}

.voices-brandline {
  min-width: 0;
}

.voices-brandline img {
  width: 158px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.65));
}

.voices-stage-connection {
  position: relative;
  z-index: 6;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  max-width: min(680px, calc(100vw - 250px));
}

.voices-stage-connection > strong {
  color: #dbefff;
  font-size: 12px;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.voices-stage-connection > span {
  flex: 0 0 100%;
  color: rgba(219, 237, 255, 0.75);
  font-size: 11px;
  text-align: right;
}

.voices-stage-connection button,
.voice-create-modal-card button,
.voice-room-modal-card button {
  border-radius: 6px;
  border: 1px solid rgba(180, 211, 255, 0.72);
  background: linear-gradient(#f8fbff, #d8e8ff);
  color: #052a6a;
  font-weight: bold;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.voices-stage-connection .voice-icon-button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  font-size: 11px;
}

.voice-settings-float {
  top: 10px !important;
  right: 10px !important;
  z-index: 60 !important;
}

.voice-settings-float > summary {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center;
  border-radius: 999px !important;
  border: 1px solid rgba(218, 235, 255, 0.92) !important;
  background: #f7fbff !important;
  color: #073174 !important;
}

.voice-current-floater {
  position: absolute;
  left: 50%;
  top: 28px;
  z-index: 5;
  width: 76px;
  height: 76px;
  margin-left: -38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: voice-float-idle 3.4s ease-in-out infinite;
}

.voice-current-floater img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 999px;
  border: 2px solid rgba(58, 226, 103, 0.92);
  box-shadow: 0 0 0 7px rgba(26, 193, 73, 0.13), 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 22px rgba(72, 191, 255, 0.34);
}

.voice-is-joined .voice-current-floater,
.voice-solo-creator .voice-current-floater {
  opacity: 0;
  animation-play-state: paused;
}

@keyframes voice-float-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-9px) scale(1.025); }
}

.voice-discovery {
  margin: 8px 10px 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.voice-discovery [data-voice-rooms] {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch;
  overflow-x: auto;
  min-height: 56px;
}

.voice-discovery-item {
  flex: 0 0 178px;
  min-width: 178px;
  max-width: 178px;
  min-height: 54px;
  border-radius: 6px !important;
  border: 1px solid rgba(92, 208, 132, 0.82) !important;
  background: linear-gradient(#f7fbff, #dcecff) !important;
  color: #061b30 !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.44) !important;
}

.voice-discovery-item strong,
.voice-discovery-item span,
.voice-discovery-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-discovery-item span {
  color: #069736 !important;
  font-weight: bold;
}

.voice-discovery-item.active {
  border-color: rgba(74, 149, 255, 0.92) !important;
  box-shadow: 0 0 0 2px rgba(66, 144, 255, 0.22), 0 12px 26px rgba(0, 0, 0, 0.32) !important;
}

.voice-content.immersive-content {
  margin: 58px 10px 0 !important;
}

.voice-canvas.immersive-canvas {
  position: relative;
  min-height: 430px !important;
  padding: 0 12px 116px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(186, 203, 230, 0.62) !important;
  overflow: hidden;
  perspective: 900px;
  background:
    radial-gradient(90% 42% at 50% 96%, rgba(38, 83, 145, 0.34), rgba(3, 8, 18, 0) 64%),
    radial-gradient(80% 35% at 50% 4%, rgba(25, 55, 101, 0.24), rgba(4, 9, 20, 0) 70%),
    linear-gradient(180deg, #081428 0%, #040a17 64%, #01040c 100%) !important;
}

.voice-canvas.immersive-canvas::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 78px;
  height: 210px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-top: 1px solid rgba(105, 137, 187, 0.32);
  background: radial-gradient(85% 100% at 50% 100%, rgba(26, 66, 124, 0.2), rgba(1, 5, 13, 0));
  transform: rotateX(56deg);
  transform-origin: bottom center;
  pointer-events: none;
}

.voice-stage-zone.immersive-stage {
  position: relative;
  z-index: 2;
  width: min(720px, 100%) !important;
  height: 238px !important;
  margin: 0 auto !important;
  background: transparent !important;
}

.voice-hosts-row,
.voice-speaker-arc {
  position: absolute !important;
  inset: 0;
  display: block !important;
}

.voice-hosts-row .voice-seat,
.voice-speaker-arc .voice-seat {
  position: absolute !important;
  width: 92px;
  min-height: 104px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 5px !important;
  border-radius: 999px !important;
  background: rgba(5, 15, 31, 0.76) !important;
  border: 1px solid rgba(67, 140, 255, 0.72) !important;
  box-shadow: 0 0 22px rgba(48, 130, 255, 0.28), inset 0 0 22px rgba(11, 30, 58, 0.72) !important;
}

.voice-hosts-row .voice-seat:nth-child(1) { left: 50%; top: 36%; transform: translate(-50%, -50%); }
.voice-hosts-row .voice-seat:nth-child(2) { left: 32%; top: 56%; transform: translate(-50%, -50%); }
.voice-hosts-row .voice-seat:nth-child(3) { left: 68%; top: 56%; transform: translate(-50%, -50%); }
.voice-hosts-row .voice-seat:nth-child(4) { left: 18%; top: 72%; transform: translate(-50%, -50%); }
.voice-hosts-row .voice-seat:nth-child(5) { left: 82%; top: 72%; transform: translate(-50%, -50%); }

.voice-speaker-arc .voice-seat:nth-child(1) { left: 40%; top: 78%; transform: translate(-50%, -50%); }
.voice-speaker-arc .voice-seat:nth-child(2) { left: 60%; top: 78%; transform: translate(-50%, -50%); }
.voice-speaker-arc .voice-seat:nth-child(3) { left: 26%; top: 84%; transform: translate(-50%, -50%); }
.voice-speaker-arc .voice-seat:nth-child(4) { left: 74%; top: 84%; transform: translate(-50%, -50%); }
.voice-speaker-arc .voice-seat:nth-child(5) { left: 50%; top: 92%; transform: translate(-50%, -50%); }

.voice-solo-creator .voice-hosts-row .voice-seat:nth-child(1) {
  left: 50%;
  top: 52%;
  animation: voice-seat-levitate 3.2s ease-in-out infinite;
}

@keyframes voice-seat-levitate {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-11px); }
}

.voice-avatar-stack img,
.voice-seat img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  object-fit: cover;
  border: 1px solid rgba(139, 190, 255, 0.88) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.voice-seat.host .voice-avatar-stack img {
  border-color: rgba(50, 240, 91, 0.96) !important;
  box-shadow: 0 0 0 6px rgba(30, 210, 78, 0.12), 0 0 24px rgba(28, 226, 85, 0.36) !important;
}

.voice-seat-meta strong,
.voice-seat-meta small,
.voice-seat-meta em {
  color: #d8e9ff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

.voice-seat-meta small {
  color: #8cc7ff !important;
}

.voice-audience-grid {
  position: absolute !important;
  z-index: 3;
  left: 12px !important;
  right: 12px !important;
  bottom: 18px !important;
  top: auto !important;
  width: auto !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)) !important;
  gap: 10px !important;
}

.voice-seat.listener {
  min-height: 58px !important;
  padding: 4px !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(11, 24, 46, 0.88), rgba(5, 12, 25, 0.96)) !important;
  border: 1px solid rgba(82, 129, 194, 0.58) !important;
}

.voice-seat.listener .voice-avatar-stack img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 6px !important;
}

.voice-seat.listener .voice-seat-meta {
  display: none !important;
}

.voice-joining .voice-canvas.immersive-canvas {
  box-shadow: inset 0 0 80px rgba(39, 111, 230, 0.28), 0 0 28px rgba(73, 141, 255, 0.24) !important;
}

.voice-room-modal.open .voice-room-modal-card,
.voice-create-modal.open .voice-create-modal-card {
  transform-origin: center;
}

@media (max-width: 760px) {
  .voices-stage-topbar {
    grid-template-columns: 1fr !important;
    padding-right: 46px !important;
    min-height: 146px;
  }

  .voices-stage-connection {
    justify-content: flex-start;
    max-width: 100%;
  }

  .voices-stage-connection > span {
    text-align: left;
  }

  .voice-current-floater {
    top: 64px;
  }

  .voice-content.immersive-content {
    margin-top: 28px !important;
  }

  .voice-canvas.immersive-canvas {
    min-height: 390px !important;
  }

  .voice-hosts-row .voice-seat,
  .voice-speaker-arc .voice-seat {
    width: 76px;
    min-height: 92px;
  }

  .voice-avatar-stack img,
  .voice-seat img {
    width: 46px !important;
    height: 46px !important;
  }

  .voice-audience-grid {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important;
    gap: 7px !important;
  }
}

/* Final Voices interaction pass */
.voices-page [title],
.chatrooms-panel [title] {
  pointer-events: auto;
}

.voices-stage-topbar {
  min-height: 154px !important;
  border: 0 !important;
  background:
    radial-gradient(60% 115% at 50% 100%, rgba(35, 94, 178, 0.24), rgba(2, 8, 20, 0) 64%),
    linear-gradient(180deg, #071329 0%, #031025 100%) !important;
  box-shadow: inset 0 -18px 38px rgba(0, 0, 0, 0.34), 0 12px 32px rgba(0, 0, 0, 0.24);
}

.voices-stage-connection {
  align-items: flex-start;
  gap: 5px;
}

.voices-stage-connection > strong,
.voices-stage-connection .voice-icon-button,
.voices-stage-connection [data-open-create] {
  display: none !important;
}

.voice-back-button {
  min-width: 0 !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(104, 151, 220, 0.48) !important;
  border-radius: 5px !important;
  background: rgba(8, 20, 43, 0.62) !important;
  color: #cfe5ff !important;
  box-shadow: none !important;
  font-size: 11px !important;
}

.voices-stage-connection > span {
  flex-basis: 100%;
  color: rgba(174, 204, 244, 0.76) !important;
}

.voice-current-floater {
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.voice-current-floater:focus-visible {
  outline: 1px solid rgba(130, 187, 255, 0.72);
  outline-offset: 6px;
}

.voice-is-joined .voice-current-floater,
.voice-solo-creator .voice-current-floater {
  opacity: 1 !important;
  animation-play-state: running !important;
  pointer-events: auto !important;
}

.voice-content.immersive-content {
  margin-top: 92px !important;
}

.voice-canvas.immersive-canvas {
  min-height: 650px !important;
  padding-bottom: 220px !important;
  border-color: rgba(98, 138, 201, 0.42) !important;
}

.voice-stage-zone.immersive-stage {
  height: 330px !important;
}

.voice-hosts-row .voice-seat:nth-child(1) { left: 50%; top: 20%; transform: translate(-50%, -50%); }
.voice-hosts-row .voice-seat:nth-child(2) { left: 33%; top: 39%; transform: translate(-50%, -50%); }
.voice-hosts-row .voice-seat:nth-child(3) { left: 67%; top: 39%; transform: translate(-50%, -50%); }
.voice-hosts-row .voice-seat:nth-child(4) { left: 22%; top: 58%; transform: translate(-50%, -50%); }
.voice-hosts-row .voice-seat:nth-child(5) { left: 78%; top: 58%; transform: translate(-50%, -50%); }

.voice-speaker-arc .voice-seat:nth-child(1) { left: 22%; top: 68%; transform: translate(-50%, -50%) rotate(-8deg); }
.voice-speaker-arc .voice-seat:nth-child(2) { left: 36%; top: 79%; transform: translate(-50%, -50%) rotate(-4deg); }
.voice-speaker-arc .voice-seat:nth-child(3) { left: 50%; top: 84%; transform: translate(-50%, -50%); }
.voice-speaker-arc .voice-seat:nth-child(4) { left: 64%; top: 79%; transform: translate(-50%, -50%) rotate(4deg); }
.voice-speaker-arc .voice-seat:nth-child(5) { left: 78%; top: 68%; transform: translate(-50%, -50%) rotate(8deg); }

.voice-hosts-row .voice-seat,
.voice-speaker-arc .voice-seat {
  width: 106px !important;
  min-height: 122px !important;
  overflow: visible !important;
}

.voice-seat-meta {
  width: 112px !important;
}

.voice-seat-meta strong,
.voice-seat-meta small,
.voice-seat-meta em {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.15;
}

.voice-audience-grid {
  left: 18px !important;
  right: 18px !important;
  bottom: 22px !important;
  max-height: 326px;
  overflow-x: auto;
  overflow-y: hidden;
  grid-template-rows: repeat(4, 72px) !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(66px, 76px);
  grid-template-columns: none !important;
  align-items: start;
  padding: 8px 8px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(6, 14, 29, 0.28), rgba(3, 8, 18, 0.52));
  scrollbar-color: rgba(86, 145, 226, 0.7) rgba(5, 12, 25, 0.6);
}

.voice-seat.listener {
  width: 64px;
  min-height: 64px !important;
}

.voice-seat.listener .voice-seat-meta {
  display: flex !important;
  width: 66px !important;
}

.voice-seat.listener .voice-seat-meta strong,
.voice-seat.listener .voice-seat-meta small {
  display: block;
  font-size: 9px !important;
  line-height: 1.05;
}

.voice-seat.speaking .voice-avatar-stack img {
  border-color: rgba(71, 255, 111, 0.98) !important;
  box-shadow: 0 0 0 7px rgba(31, 226, 83, 0.14), 0 0 28px rgba(38, 235, 96, 0.62), 0 12px 26px rgba(0, 0, 0, 0.48) !important;
  transition: box-shadow 90ms linear, border-color 90ms linear, filter 90ms linear;
  filter: saturate(1.16) brightness(1.08);
}

.voice-seat:not(.speaking) .voice-avatar-stack img {
  transition: box-shadow 260ms ease, border-color 260ms ease, filter 260ms ease;
}

.voice-seat .voice-mic-state {
  transition: opacity 140ms ease, filter 140ms ease, transform 140ms ease;
}

.voice-seat.speaking .voice-mic-state {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(70, 255, 111, 0.9));
}

.voice-discovery-item:hover {
  transform: none !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.44) !important;
}

.voice-control-wheel {
  position: fixed;
  inset: 0;
  z-index: 88;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 44%, rgba(36, 103, 187, 0.3), rgba(0, 0, 0, 0.72) 62%);
  opacity: 0;
  pointer-events: none;
}

.voice-control-wheel.open {
  opacity: 1;
  pointer-events: auto;
}

.voice-wheel-card,
.voice-participant-menu {
  border: 1px solid rgba(103, 164, 247, 0.55);
  border-radius: 14px;
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(32, 83, 156, 0.28), rgba(8, 15, 31, 0) 65%),
    linear-gradient(180deg, rgba(8, 19, 40, 0.98), rgba(3, 8, 18, 0.99));
  color: #e3f1ff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.64), inset 0 0 32px rgba(52, 116, 206, 0.12);
}

.voice-wheel-card {
  position: relative;
  width: min(560px, calc(100vw - 28px));
  padding: 18px;
}

.voice-wheel-orbit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 8px 30px 18px;
}

.voice-wheel-card button,
.voice-participant-menu button {
  border: 1px solid rgba(143, 195, 255, 0.58);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(34, 78, 142, 0.94), rgba(11, 31, 69, 0.96));
  color: #eaf5ff;
  font-weight: bold;
  padding: 7px 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

.voice-wheel-card label,
.voice-wheel-card .voice-actions,
.voice-wheel-card .voice-settings-note {
  color: #dbeeff !important;
}

.voice-wheel-card .voice-device-flyout {
  color: #dbeeff;
}

.voice-wheel-card select,
.voice-wheel-card input[type='range'] {
  color: #07162e;
}

.voice-wheel-card .voice-actions label {
  display: inline-flex;
  color: #dbeeff !important;
}

.voice-participant-menu {
  position: fixed;
  z-index: 95;
  width: 220px;
  padding: 10px;
  display: grid;
  gap: 7px;
}

.voice-participant-menu strong {
  color: #ffffff;
  font-size: 13px;
  text-align: center;
}

.chatrooms-panel {
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-top: 2px solid #1f5195 !important;
  transition: width 220ms ease, height 220ms ease, opacity 180ms ease, transform 220ms ease;
}

.chatrooms-title button[data-chat-minimize] {
  min-width: 24px;
  height: 18px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.16);
  color: #fff;
  line-height: 1;
}

.chatrooms-panel.collapsed {
  width: 252px !important;
  right: 12px;
  bottom: 12px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.chat-style-tools [data-background] {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  padding-left: 4px;
  padding-right: 4px;
}

.chat-voice-view {
  background: #020711 !important;
  opacity: 1;
  transition: opacity 240ms ease;
}

.chatrooms-panel.voice-hiding .chat-voice-view {
  opacity: 0;
}

.chatrooms-panel.showing-voices .chatrooms-body > :not(.chat-voice-view) {
  opacity: 0;
  transition: opacity 220ms ease;
}

.chatrooms-panel:not(.showing-voices) .chatrooms-body > :not(.chat-voice-view) {
  opacity: 1;
  transition: opacity 220ms ease;
}

.chatrooms-panel.showing-voices {
  width: min(980px, calc(100vw - 24px)) !important;
  height: min(920px, calc(100vh - 10px)) !important;
}

@media (max-width: 760px) {
  .voice-canvas.immersive-canvas {
    min-height: 560px !important;
    padding-bottom: 190px !important;
  }

  .voice-stage-zone.immersive-stage {
    height: 280px !important;
  }

  .voice-audience-grid {
    grid-template-rows: repeat(4, 64px) !important;
    grid-auto-columns: minmax(54px, 62px);
    max-height: 292px;
  }

  .voice-wheel-card {
    width: min(420px, calc(100vw - 18px));
    padding: 14px;
  }
}

/* Voices half-wheel and flat stage corrections */
.voice-current-floater {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  appearance: none;
}

.voice-current-floater::before,
.voice-current-floater::after {
  display: none !important;
}

.voice-back-button {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #e4f3ff !important;
  text-shadow: 0 0 8px rgba(88, 166, 255, 0.75), 0 1px 3px rgba(0, 0, 0, 0.92);
  padding: 0 !important;
  font-size: 11px !important;
  opacity: 0.95;
}

.voice-back-button:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

.voice-control-wheel {
  align-items: flex-start !important;
  padding-top: 44px !important;
  background: radial-gradient(ellipse at 50% 4%, rgba(28, 94, 180, 0.32), rgba(0, 0, 0, 0.68) 58%, rgba(0, 0, 0, 0.78) 100%) !important;
}

.voice-wheel-card {
  width: min(690px, calc(100vw - 28px)) !important;
  height: 330px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 0 360px 360px / 0 0 250px 250px !important;
  background:
    radial-gradient(100% 105% at 50% 0%, rgba(42, 126, 229, 0.34), rgba(6, 18, 42, 0.58) 47%, rgba(2, 7, 18, 0) 70%) !important;
  box-shadow: none !important;
  overflow: visible;
}

.voice-wheel-card .voice-room-modal-close {
  right: 44px;
  top: 4px;
}

.voice-wheel-orbit {
  position: relative;
  height: 176px;
  margin: 0 auto !important;
  width: min(560px, calc(100vw - 80px));
}

.voice-wheel-orbit button {
  position: absolute;
  min-width: 88px;
  transform: translate(-50%, -50%);
  border-radius: 999px !important;
}

.voice-wheel-orbit button:nth-child(1) { left: 50%; top: 34px; }
.voice-wheel-orbit button:nth-child(2) { left: 22%; top: 86px; }
.voice-wheel-orbit button:nth-child(3) { left: 38%; top: 124px; }
.voice-wheel-orbit button:nth-child(4) { left: 62%; top: 124px; }
.voice-wheel-orbit button:nth-child(5) { left: 78%; top: 86px; }

.voice-wheel-card .voice-device-flyout {
  width: min(560px, calc(100vw - 90px));
  margin: -18px auto 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.voice-wheel-card .voice-device-grid {
  gap: 10px;
  margin: 0 0 8px !important;
}

.voice-wheel-card .voice-actions {
  justify-content: center;
  gap: 8px;
}

.voice-wheel-card .voice-actions button,
.voice-wheel-card .voice-actions label {
  opacity: 0.98;
}

.voice-create-modal-unused {
  display: none !important;
}

.voice-discovery {
  margin: 6px 18px 0 !important;
}

.voice-discovery [data-voice-rooms] {
  min-height: 44px !important;
  gap: 18px !important;
}

.voice-discovery-item,
.voice-discovery-item.active,
.voice-discovery-lobby {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: 220px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #dceeff !important;
}

.voice-discovery-item strong,
.voice-discovery-item span,
.voice-discovery-item small {
  color: inherit !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.86);
}

.voice-discovery-item span {
  color: #56ff8a !important;
}

.voice-content.immersive-content {
  margin-top: 126px !important;
}

.voice-canvas.immersive-canvas {
  min-height: 760px !important;
  padding-bottom: 330px !important;
  overflow: visible !important;
}

.voice-stage-zone.immersive-stage {
  height: 360px !important;
}

.voice-hosts-row .voice-seat,
.voice-speaker-arc .voice-seat,
.voice-seat.listener {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.voice-hosts-row .voice-seat,
.voice-speaker-arc .voice-seat {
  min-height: 112px !important;
}

.voice-audience-grid {
  position: absolute !important;
  top: 420px !important;
  bottom: auto !important;
  left: 28px !important;
  right: 28px !important;
  max-height: 292px !important;
  grid-template-rows: repeat(4, 66px) !important;
  grid-auto-columns: 68px !important;
  gap: 9px 10px !important;
  padding: 10px 12px 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-items: start !important;
  justify-content: start !important;
  border: 0 !important;
  background: transparent !important;
}

.voice-seat.listener {
  width: 68px !important;
  min-height: 64px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.voice-seat.listener .voice-avatar-stack {
  width: 46px !important;
  height: 46px !important;
  margin: 0 auto 3px !important;
}

.voice-seat.listener .voice-avatar-stack img {
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
}

.voice-seat.listener .voice-seat-meta {
  width: 68px !important;
}

.voice-seat.listener .voice-seat-meta strong,
.voice-seat.listener .voice-seat-meta small {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.voice-seat:not(.speaking):not(.host) .voice-avatar-stack img {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.42) !important;
}

@media (max-width: 760px) {
  .voice-wheel-card {
    width: min(520px, calc(100vw - 18px)) !important;
    height: 350px;
  }

  .voice-wheel-card .voice-device-flyout {
    width: min(430px, calc(100vw - 48px));
  }

  .voice-canvas.immersive-canvas {
    min-height: 650px !important;
    padding-bottom: 280px !important;
  }

  .voice-audience-grid {
    top: 372px !important;
    grid-template-rows: repeat(4, 60px) !important;
    grid-auto-columns: 58px !important;
  }
}

/* Voices viewport fit correction */
.chatrooms-panel.showing-voices {
  height: min(860px, calc(100vh - 4px)) !important;
}

.voices-stage-topbar {
  min-height: 138px !important;
}

.voice-current-floater {
  top: 22px !important;
}

.voice-current-floater img {
  width: 152px !important;
  height: 152px !important;
}

.voice-discovery {
  margin-top: 10px !important;
}

.voice-content.immersive-content {
  margin-top: 46px !important;
}

.voice-canvas.immersive-canvas {
  min-height: 500px !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

.voice-stage-zone.immersive-stage {
  height: 220px !important;
}

.voice-hosts-row .voice-seat:nth-child(1) { top: 26% !important; }
.voice-hosts-row .voice-seat:nth-child(2),
.voice-hosts-row .voice-seat:nth-child(3) { top: 46% !important; }
.voice-speaker-arc .voice-seat:nth-child(1),
.voice-speaker-arc .voice-seat:nth-child(5) { top: 68% !important; }
.voice-speaker-arc .voice-seat:nth-child(2),
.voice-speaker-arc .voice-seat:nth-child(4) { top: 76% !important; }
.voice-speaker-arc .voice-seat:nth-child(3) { top: 82% !important; }

.voice-audience-grid {
  top: 210px !important;
  left: 20px !important;
  right: 20px !important;
  max-height: 270px !important;
  grid-template-rows: repeat(4, 62px) !important;
  grid-auto-columns: 66px !important;
  gap: 6px 10px !important;
  padding: 4px 8px 10px !important;
}

.voice-seat.listener {
  width: 66px !important;
  min-height: 60px !important;
}

.voice-seat.listener .voice-avatar-stack,
.voice-seat.listener .voice-avatar-stack img {
  width: 42px !important;
  height: 42px !important;
}

.voice-seat.listener .voice-seat-meta {
  width: 66px !important;
}

.voice-seat.listener .voice-seat-meta strong,
.voice-seat.listener .voice-seat-meta small {
  font-size: 9px !important;
}

@media (max-width: 760px) {
  .voice-content.immersive-content {
    margin-top: 32px !important;
  }

  .voice-canvas.immersive-canvas {
    min-height: 460px !important;
  }

  .voice-audience-grid {
    top: 190px !important;
    max-height: 246px !important;
    grid-template-rows: repeat(4, 58px) !important;
    grid-auto-columns: 58px !important;
  }
}

/* Latest Voices polish: PFP actions, room info, and straight audience grid */
.voice-current-cluster {
  position: absolute;
  left: 50%;
  top: 12px;
  z-index: 72;
  width: min(420px, calc(100vw - 220px));
  min-width: 300px;
  height: 206px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 166px 1fr;
  grid-template-rows: 166px 32px;
  align-items: center;
  justify-items: center;
  pointer-events: none;
}

.voice-current-floater,
.voice-current-floater:hover,
.voice-current-floater:active,
.voice-current-floater:focus {
  position: static !important;
  grid-column: 2;
  grid-row: 1;
  width: 166px !important;
  height: 166px !important;
  min-width: 166px !important;
  min-height: 166px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  appearance: none !important;
  pointer-events: auto !important;
}

.voice-current-floater img {
  display: block !important;
  width: 152px !important;
  height: 152px !important;
  margin: 7px !important;
  object-fit: cover;
  border-radius: 999px !important;
  background: transparent !important;
}

.voice-pfp-side-action,
.voice-start-pinned,
.voice-intro-stop {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(92, 177, 255, 0.86), 0 2px 5px rgba(0, 0, 0, 0.92);
  pointer-events: auto;
  cursor: pointer;
}

.voice-pfp-side-action {
  align-self: center;
  min-width: 86px;
  padding: 6px 8px !important;
  font-size: 11px;
  opacity: 1;
}

.voice-pfp-close { grid-column: 1; grid-row: 1; justify-self: end; }
.voice-pfp-leave { grid-column: 3; grid-row: 1; justify-self: start; }

.voice-start-pinned {
  grid-column: 2;
  grid-row: 2;
  padding: 0 !important;
  font-size: 12px;
  letter-spacing: 0;
}

.voice-start-pinned:hover,
.voice-pfp-side-action:hover,
.voice-intro-stop:hover {
  color: #f8fdff !important;
  filter: drop-shadow(0 0 8px rgba(125, 205, 255, 0.9));
}

.voice-back-button,
.voice-back-button:hover,
.voice-back-button:focus,
.voice-back-button:active {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  text-shadow: 0 0 8px rgba(96, 176, 255, 0.74), 0 2px 5px rgba(0, 0, 0, 0.95);
}

.voice-intro-stop {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 30;
  transform: translate(-50%, -50%);
  padding: 8px 14px !important;
  font-size: 13px;
  letter-spacing: 0;
  border-radius: 999px;
  animation: voice-soft-glow 1.8s ease-in-out infinite alternate;
}

@keyframes voice-soft-glow {
  from { text-shadow: 0 0 8px rgba(148, 218, 255, 0.62), 0 2px 5px rgba(0, 0, 0, 0.92); }
  to { text-shadow: 0 0 20px rgba(199, 239, 255, 0.96), 0 0 36px rgba(80, 170, 255, 0.72), 0 2px 5px rgba(0, 0, 0, 0.92); }
}

.voice-wheel-orbit:empty,
.voice-wheel-orbit:has([data-request-stage][hidden]) {
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.voice-wheel-card .voice-device-flyout {
  margin-top: 20px !important;
}

.voice-room-info-count {
  margin: 0 0 10px;
  color: #d8ebff;
}

.voice-room-info-people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.voice-room-info-people span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(92, 154, 238, 0.14);
  color: #ffffff;
}

.voice-room-share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.voice-room-share input {
  min-width: 0;
  color: #06152c;
}

.voice-room-share button {
  white-space: nowrap;
}

.voice-audience-grid {
  top: 214px !important;
  left: 22px !important;
  right: auto !important;
  width: min(390px, calc(100% - 44px)) !important;
  max-height: 270px !important;
  display: grid !important;
  grid-template-columns: repeat(5, 66px) !important;
  grid-template-rows: repeat(5, 50px) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: unset !important;
  gap: 4px 8px !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  align-items: start !important;
  justify-content: start !important;
}

.voice-audience-grid .voice-seat,
.voice-audience-grid .voice-seat:hover,
.voice-seat.listener,
.voice-seat.listener:hover {
  width: 66px !important;
  min-height: 50px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

.voice-audience-grid .voice-avatar-stack,
.voice-audience-grid .voice-avatar-stack img,
.voice-seat.listener .voice-avatar-stack,
.voice-seat.listener .voice-avatar-stack img {
  width: 38px !important;
  height: 38px !important;
}

.voice-audience-grid .voice-avatar-stack {
  margin: 0 auto 2px !important;
}

.voice-audience-grid .voice-seat-meta,
.voice-seat.listener .voice-seat-meta {
  width: 66px !important;
}

.voice-audience-grid .voice-seat-meta strong,
.voice-audience-grid .voice-seat-meta small {
  font-size: 8px !important;
}

.voice-discovery-item,
.voice-discovery-item.active,
.voice-discovery-lobby {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: filter 180ms ease, text-shadow 180ms ease, opacity 180ms ease !important;
}

.voice-discovery-item:hover,
.voice-discovery-item:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 10px rgba(135, 209, 255, 0.82));
}

@media (max-width: 760px) {
  .voice-current-cluster {
    top: 14px;
    width: min(330px, calc(100vw - 18px));
    min-width: 0;
    grid-template-columns: 1fr 126px 1fr;
    grid-template-rows: 126px 30px;
    height: 164px;
  }

  .voice-current-floater,
  .voice-current-floater:hover,
  .voice-current-floater:active,
  .voice-current-floater:focus {
    width: 126px !important;
    height: 126px !important;
    min-width: 126px !important;
    min-height: 126px !important;
  }

  .voice-current-floater img {
    width: 116px !important;
    height: 116px !important;
    margin: 5px !important;
  }

  .voice-pfp-side-action {
    min-width: 64px;
    font-size: 9px;
  }

  .voice-audience-grid {
    top: 188px !important;
    width: min(330px, calc(100% - 24px)) !important;
    grid-template-columns: repeat(5, 58px) !important;
    grid-template-rows: repeat(5, 48px) !important;
    gap: 3px 7px !important;
  }
}

/* Voices embed fit and Messenger compact mode */
.chatrooms-panel.showing-voices {
  width: min(1080px, calc(100vw - 20px)) !important;
  height: min(940px, calc(100vh - 6px)) !important;
  max-height: calc(100vh - 6px) !important;
}

.chatrooms-panel.showing-voices .chat-voice-view {
  inset: 24px 0 0 !important;
}

.chatrooms-panel.showing-voices iframe {
  min-height: 100% !important;
}

.chatrooms-panel.compact-mode:not(.showing-voices) {
  width: min(360px, calc(100vw - 20px)) !important;
  height: min(520px, calc(100vh - 20px)) !important;
  overflow: hidden;
  animation: chat-compact-pop 220ms ease both;
}

.chatrooms-panel:not(.compact-mode) {
  animation: chat-expand-pop 220ms ease both;
}

@keyframes chat-compact-pop {
  from { opacity: 0.92; transform: translateY(8px) scale(1.025); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes chat-expand-pop {
  from { opacity: 0.94; transform: translateY(5px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.chatrooms-panel.compact-mode:not(.showing-voices) .chatrooms-body {
  height: calc(100% - 25px);
  padding: 5px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 5px;
}

.chatrooms-panel.compact-mode .chatrooms-user,
.chatrooms-panel.compact-mode .chat-style-tools,
.chatrooms-panel.compact-mode .chatrooms-ad,
.chatrooms-panel.compact-mode .chatrooms-foot,
.chatrooms-panel.compact-mode .chatrooms-list-title {
  display: none !important;
}

.chatrooms-panel.compact-mode .chatrooms-layout {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 5px !important;
  min-height: 0;
  margin: 0 !important;
}

.chatrooms-panel.compact-mode .chatrooms-list {
  max-height: none !important;
  min-height: 0;
  padding: 3px !important;
}

.chatrooms-panel.compact-mode .chatrooms-list button {
  padding: 3px 2px !important;
  font-size: 10px !important;
}

.chatrooms-panel.compact-mode .chatrooms-main {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.chatrooms-panel.compact-mode .chatrooms-history {
  min-height: 0 !important;
  max-height: none !important;
}

.chatrooms-panel.compact-mode [data-form] {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 44px;
  gap: 4px;
  margin-top: 4px !important;
}

.chatrooms-panel.compact-mode [data-input] {
  min-height: 32px !important;
  height: 32px !important;
  resize: none;
}

.voice-is-joined .voice-start-pinned {
  display: none !important;
}

.voice-audience-grid {
  top: 176px !important;
  max-height: 310px !important;
}

.voice-intro-stop {
  top: 34% !important;
}

.voice-back-button,
.voice-back-button:hover,
.voice-back-button:focus,
.voice-back-button:active {
  -webkit-text-fill-color: #ffffff !important;
  filter: none !important;
}

.voice-back-button:hover,
.voice-back-button:focus-visible {
  filter: drop-shadow(0 0 8px rgba(154, 220, 255, 0.9)) !important;
  text-shadow: 0 0 14px rgba(177, 232, 255, 0.88), 0 2px 5px rgba(0, 0, 0, 0.95) !important;
}

@media (max-width: 760px) {
  .chatrooms-panel.showing-voices {
    width: calc(100vw - 8px) !important;
    height: calc(100vh - 4px) !important;
  }

  .voice-audience-grid {
    top: 168px !important;
    max-height: 280px !important;
  }

  .voice-intro-stop {
    top: 36% !important;
  }
}

/* Messenger state separation and generated Voices icon integration */
.chatrooms-panel.collapsed,
.chatrooms-panel.collapsed.compact-mode,
.chatrooms-panel.collapsed:not(.compact-mode) {
  width: 252px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  resize: none !important;
}

.chatrooms-panel.collapsed .chatrooms-body,
.chatrooms-panel.collapsed.compact-mode .chatrooms-body,
.chatrooms-panel.collapsed:not(.compact-mode) .chatrooms-body {
  display: none !important;
}

.chatrooms-panel:not(.collapsed):not(.compact-mode):not(.showing-voices) {
  width: min(880px, calc(100vw - 28px)) !important;
  height: min(520px, calc(100vh - 20px)) !important;
}

.chatrooms-panel:not(.collapsed):not(.compact-mode):not(.showing-voices) .chatrooms-body {
  height: calc(100% - 28px) !important;
}

.chatrooms-panel.compact-mode:not(.collapsed):not(.showing-voices) {
  width: min(300px, calc(100vw - 18px)) !important;
  height: min(410px, calc(100vh - 18px)) !important;
}

.chatrooms-panel.compact-mode:not(.collapsed):not(.showing-voices) .chatrooms-body {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
}

.chatrooms-panel.compact-mode:not(.collapsed) .chatrooms-layout {
  grid-template-columns: 88px minmax(0, 1fr) !important;
}

.chatrooms-panel.compact-mode:not(.collapsed) .chatrooms-history {
  background: #ffffff !important;
  border: 1px solid #9fb7d5 !important;
}

.chatrooms-panel.compact-mode:not(.collapsed) .chatrooms-list {
  overflow-x: hidden !important;
}

.chatrooms-panel.compact-mode:not(.collapsed) .chatrooms-list button,
.chatrooms-panel.compact-mode:not(.collapsed) .chat-room-main,
.chatrooms-panel.compact-mode:not(.collapsed) .chat-sub-room {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.chatrooms-panel.compact-mode:not(.collapsed) .chatrooms-list span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.chatrooms-panel.compact-mode:not(.collapsed) [data-form] {
  grid-template-columns: 26px minmax(0, 1fr) 48px !important;
}

.chatrooms-panel.compact-mode:not(.collapsed) [data-input] {
  min-height: 46px !important;
  height: 46px !important;
  line-height: 1.2 !important;
}

.voice-canvas.immersive-canvas,
.voice-room-modal-card,
.voice-wheel-card {
  background-image:
    linear-gradient(180deg, rgba(2, 8, 20, 0.28), rgba(2, 8, 20, 0.72)),
    url('/public/images/voices-ui/voice_panel_tile.svg') !important;
  background-size: cover !important;
  background-position: center !important;
}

.voice-start-pinned,
.voice-pfp-side-action,
.voice-wheel-card .voice-actions button,
.voice-wheel-card [data-request-stage],
.voice-room-share button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.voice-start-pinned::before,
.voice-pfp-side-action::before,
.voice-wheel-card .voice-actions button::before,
.voice-wheel-card [data-request-stage]::before,
.voice-room-share button::before,
.voice-discovery-item.active::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(104, 204, 255, 0.55));
  flex: 0 0 auto;
}

.voice-start-pinned::before { background-image: url('/public/images/voices-ui/voice_add.svg'); }
.voice-pfp-close::before { background-image: url('/public/images/voices-ui/voice_close.svg'); }
.voice-pfp-leave::before { background-image: url('/public/images/voices-ui/voice_leave.svg'); }
.voice-wheel-card [data-request-stage]::before { background-image: url('/public/images/voices-ui/voice_people.svg'); }
.voice-wheel-card [data-detect]::before,
.voice-wheel-card [data-test]::before { background-image: url('/public/images/voices-ui/voice_settings.svg'); }
.voice-wheel-card [data-unlock-audio]::before { background-image: url('/public/images/voices-ui/voice_activity.svg'); }
.voice-wheel-card [data-mute]::before,
.voice-wheel-card [data-ptt]::before { background-image: url('/public/images/voices-ui/voice_mic_on.svg'); }
.voice-room-share button::before { background-image: url('/public/images/voices-ui/voice_link.svg'); }

.voice-discovery-item.active::after {
  width: 22px;
  height: 22px;
  margin-left: 6px;
  background-image: url('/public/images/voices-ui/voice_activity.svg');
}

.voice-wheel-card .voice-actions button,
.voice-room-share button,
.voice-wheel-card [data-request-stage] {
  border-color: rgba(92, 177, 255, 0.55) !important;
  background:
    linear-gradient(180deg, rgba(24, 63, 128, 0.94), rgba(5, 17, 43, 0.96)) !important;
}

.voices-page [hidden],
.voice-pfp-side-action[hidden],
.voice-start-pinned[hidden],
.voice-intro-stop[hidden],
.voice-wheel-card button[hidden],
.voice-room-modal button[hidden] {
  display: none !important;
}

/* Communities directory */
.communities-page {
  display: grid;
  gap: 10px;
}

.communities-hero p,
.communities-directory p {
  margin: 6px 0;
}

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

.community-form label {
  display: grid;
  gap: 3px;
  font-weight: bold;
  color: #003399;
}

.community-form input,
.community-form textarea,
.community-form select,
.communities-toolbar select {
  width: 100%;
  border: 1px solid #8fb2d9;
  background: #fff;
  color: #111;
  font: 12px Arial, Helvetica, sans-serif;
  padding: 4px;
  box-sizing: border-box;
}

.community-form input.community-autofilled {
  background: #fff79a;
}

.community-description {
  grid-column: 1 / -1;
}

.community-form button {
  width: max-content;
  min-width: 130px;
}

.communities-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

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

.community-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  border: 1px solid #9fb7d5;
  background: #f8fbff;
  padding: 8px;
}

.community-pfp-wrap > img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid #9fb7d5;
  background: #fff;
}

.community-pfp-wrap {
  position: relative;
}

.community-verify-form {
  margin: 4px 0 8px;
}

.community-verify-form button {
  width: 100%;
  font-weight: bold;
}

.community-copy h4 {
  margin: 0 0 4px;
  color: #003399;
}

.community-copy p {
  margin: 0 0 6px;
  line-height: 1.35;
}

.community-chain {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
}

.community-chain-sol { background: #7c3cff; }
.community-chain-eth { background: #2f6db6; }

.community-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 5px 0;
}

.community-ca {
  min-width: 34px;
  padding: 1px 5px;
}

.community-members {
  font-size: 11px;
  color: #333;
  margin-bottom: 4px;
}

.community-verified {
  position: absolute;
  top: -4px;
  right: -4px;
  display: block;
  width: 15px;
  height: 15px;
  border: 0;
  background: transparent url('/public/images/VerifiedCommunity.png') center / contain no-repeat;
  padding: 0;
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

.community-pfp-large .community-verified {
  width: 17px;
  height: 17px;
  top: -5px;
  right: -5px;
}

.community-verified-inline {
  position: static;
  display: inline-block;
  margin-bottom: 4px;
}

.member-pfp-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.member-verified {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: block;
  width: 15px;
  height: 15px;
  border: 0;
  background: transparent url('/public/images/VerifiedMember.png') center / contain no-repeat;
  z-index: 4;
  pointer-events: none;
}

.member-admin-badge {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 3px;
  vertical-align: -2px;
  border: 0;
  border-radius: 3px;
  background: transparent url('/public/images/blorgLogoBlack.png') center / contain no-repeat;
  pointer-events: none;
}

.member-pfp-wrap .member-admin-badge,
.profile-pfp-wrap .member-admin-badge,
.pfp-badge-wrap .member-admin-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  margin-left: 0;
  z-index: 5;
}

.member-group-badge {
  position: absolute;
  left: -3px;
  bottom: -3px;
  display: block;
  width: 15px;
  height: 15px;
  border: 0;
  background: transparent url('/public/images/BlorgGroupBadge.png') center / contain no-repeat;
  z-index: 4;
  pointer-events: none;
}

.member-verify-form {
  margin-top: 3px;
}

.member-verify-form button {
  font-size: 10px;
  padding: 1px 4px;
}

.community-badge-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}

.community-badge-options span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border: 1px solid #9cc2e5;
  background: #eef7ff;
  font-size: 11px;
}

.community-badge-options img {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
}

.community-comment-pfp {
  width: 24px;
  height: 24px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 4px;
}

.topbar .brand-logo.brand-logo-tunes {
  width: 330px !important;
  height: auto !important;
  max-width: none !important;
}

.blog-author-pfp img,
.blog-comment-pfp img {
  display: block;
  object-fit: cover;
}

.blog-author-pfp img {
  width: 56px;
  height: 56px;
}

.blog-comment-pfp img {
  width: 24px;
  height: 24px;
}

.home-shill-caller {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.home-shill-caller .member-pfp-wrap img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: cover;
}

.profile-summary-card .online-now {
  max-width: 100%;
}

.profile-summary-card .online-icon {
  flex: 0 0 auto;
}

.myspace-music-feature {
  align-items: flex-start;
  position: relative;
  min-height: 105px;
}

.myspace-music-feature img {
  width: 105px;
  height: 105px;
  object-fit: contain;
  background: #fff;
  border: 0;
}

.music-feature-copy {
  min-width: 0;
  max-width: 360px;
}

.music-feature-copy strong {
  display: block;
  color: #003399;
  font-size: 16px;
}

.music-feature-copy small {
  display: block;
  line-height: 1.15;
}

.music-feature-copy p {
  margin: 8px 0 2px;
}

.music-exclusive {
  margin-left: auto;
  align-self: center;
  color: #b00000;
  font-weight: bold;
  font-size: 24px;
  transform: rotate(-10deg);
  letter-spacing: 1px;
}

.music-shell {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 245px;
  gap: 8px;
  align-items: start;
}

.music-left,
.music-right {
  min-width: 0;
}

.music-open-player {
  width: 100%;
  padding: 8px 6px;
  margin-bottom: 7px;
  background: #d8ecff;
  border: 1px solid #8fb9df;
  color: #064398;
  font-weight: bold;
}

.music-nav-box,
.music-promo {
  border: 1px solid #b7d1ed;
  background: #f7fbff;
  padding: 7px;
}

.music-nav-box h3,
.music-center h3 {
  margin: 0 0 6px;
}

.music-nav-box a {
  display: block;
  padding: 4px;
}

.music-nav-box a.active,
.music-result.active {
  background: #fff5a5;
}

.music-steps {
  display: flex;
  gap: 14px;
  padding: 7px;
  background: #dff0ff;
  border: 1px solid #b7d1ed;
  color: #16497f;
}

.music-steps strong {
  display: inline-block;
  background: #2d6fae;
  color: #fff;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  line-height: 17px;
  text-align: center;
  margin-right: 3px;
}

.music-search-bar {
  display: flex;
  margin: 8px 0;
}

.music-search-bar input {
  flex: 1;
}

.music-result-list {
  border-top: 1px solid #c6c6c6;
}

.music-result {
  display: grid;
  grid-template-columns: 18px 36px minmax(0, 1fr) 26px;
  gap: 6px;
  align-items: center;
  padding: 5px;
  border-bottom: 1px dotted #aaa;
}

.music-result img {
  width: 34px;
  height: 34px;
  object-fit: cover;
}

.music-result a {
  font-weight: bold;
}

.music-result small {
  display: block;
  color: #555;
}

.music-disc {
  width: 8px;
  height: 8px;
  border: 1px solid #6ca2d7;
  border-radius: 50%;
}

.music-promo {
  min-height: 120px;
  margin-bottom: 8px;
  text-align: center;
  font-weight: bold;
}

.music-promo-dark {
  color: #fff;
  background: #142840;
}

.music-promo-pink {
  color: #fff;
  background: #9c2578;
}

.recent-streams-box .stream-player-shell iframe,
.recent-streams-box .stream-placeholder,
.recent-streams-box .stream-player-shell video[data-native-live-video] {
  aspect-ratio: auto;
  height: 150px;
  min-height: 150px;
}

.recent-streams-box .stream-placeholder img {
  width: 120px;
  max-width: 45%;
}

.recent-streams-box .stream-player-shell {
  width: 25%;
  min-width: 260px;
  max-width: 100%;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .recent-streams-box .stream-player-shell {
    width: 100%;
    min-width: 0;
  }
}

body.profile-custom-page .topbar .top-inner.container,
body.profile-custom-page .topbar .ad-banner.container,
body.profile-custom-page .topbar .nav-row.container,
body.profile-custom-page main.container,
body.profile-custom-page .footer.container {
  width: min(960px, 100%);
  max-width: 960px;
}

body.profile-custom-page .profile-custom-scope {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

body.profile-custom-page .profile-table {
  width: 100%;
  table-layout: fixed;
}

body.profile-custom-page .profile-table .left-col {
  width: 300px;
}

body.profile-custom-page .profile-table .center-col {
  width: 660px;
}

body.profile-custom-page .profile-table .right-col {
  display: none;
}

body.profile-custom-page .profile-header,
body.profile-custom-page .profile-main,
body.profile-custom-page .friends-box,
body.profile-custom-page .profile-friend-space {
  max-width: 100%;
}

body.profile-custom-page .profile-main > tbody > tr {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
}

body.profile-custom-page .youtube-embed,
body.profile-custom-page .profile-blurbs iframe,
body.profile-custom-page .comment-rendered iframe,
body.profile-custom-page .custom-profile-html iframe {
  width: 100% !important;
  max-width: 100% !important;
}

.communities-pager {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 8px;
}

.community-detail-head {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
}

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

.miner-status-page {
  background: #07101f;
  color: #dcecff;
  padding: 10px;
  box-shadow: inset 0 0 80px rgba(0, 119, 255, .1);
}

.miner-status-page .box {
  background: linear-gradient(180deg, #0b172b, #08111f);
  border-color: #203d70;
  box-shadow: inset 0 0 28px rgba(16, 92, 190, .14), 0 0 18px rgba(0, 0, 0, .22);
}

.miner-status-page .box h3 {
  background: linear-gradient(90deg, #10254a, #183c77);
  color: #e8f5ff;
}

.miner-gauge-wrap {
  text-align: center;
}

.miner-mini-gauges {
  display: grid;
  grid-template-columns: repeat(2, 130px);
  justify-content: center;
  gap: 8px;
  margin: -4px 0 8px;
}

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

.miner-table td {
  border-bottom: 1px solid rgba(124, 169, 240, .35);
  padding: 4px;
}

.miner-table td:first-child {
  width: 135px;
  font-weight: bold;
  color: #77b7ff;
}

.miner-bars {
  height: 92px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 6px;
  border: 1px solid #244b86;
  background: #071224;
}

.miner-bars i {
  display: block;
  width: 6px;
  min-height: 3px;
  background: linear-gradient(#29a8ff, #0a52b8);
  box-shadow: 0 0 8px rgba(41, 168, 255, .28);
}

.miner-graph-scale {
  display: flex;
  justify-content: space-between;
  color: #8fb8ff;
  font-size: 11px;
  margin: 4px 0 8px;
}

.miner-ekg {
  display: block;
  width: 100%;
  height: 86px;
  border: 1px solid #7fa8d6;
  background: #06101f;
  image-rendering: auto;
}

.miner-heatmap {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2px;
  margin-top: 8px;
}

.miner-heatmap i {
  display: block;
  aspect-ratio: 1;
  border: 1px solid rgba(115, 178, 255, .25);
  box-shadow: 0 0 8px rgba(0, 98, 255, .22);
}

.miner-admin-panel,
.miner-profit-panel {
  border-color: #8eb4df;
}

@media (max-width: 760px) {
  .miner-status-grid {
    grid-template-columns: 1fr;
  }
}

.community-detail-layout {
  grid-template-columns: 238px minmax(0, 1fr);
  align-items: start;
}

.community-detail-layout .community-private-box {
  grid-column: 1 / -1;
}

.community-side-panel {
  align-self: start;
}

.community-side-panel h2 {
  margin: 6px 0;
  font-size: 16px;
}

.community-side-panel p {
  margin: 6px 0;
}

.community-pfp-form {
  display: grid;
  gap: 4px;
  margin: 6px 0 8px;
}

.community-pfp-form input {
  max-width: 100%;
}

.community-pfp-large img {
  width: 96px;
  height: 96px;
}

.community-detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  margin-top: 10px;
}

.community-join-box,
.community-leave-form,
.community-pending-box {
  margin-top: 10px;
}

.community-feed-panel h3 {
  margin-top: 0;
}

.community-post-form textarea,
.community-comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #8fb2d9;
  background: #fffaf0;
  font: 12px Arial, Helvetica, sans-serif;
  padding: 6px;
  resize: none;
}

.community-post-form textarea {
  height: 150px;
  min-height: 150px;
  max-height: 150px;
  overflow-y: auto;
}

.community-comment-form textarea {
  min-height: 90px;
  overflow-y: auto;
}

.community-post-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

.community-feed {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.community-post-card {
  border: 1px solid #b8cbe3;
  background: #f8fbff;
  padding: 8px;
}

.community-post-card.liked {
  box-shadow: inset 3px 0 0 #16a000;
}

.community-post-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.community-post-author img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid #9fb7d5;
}

.community-post-author small,
.community-comment small {
  display: block;
  color: #555;
  font-size: 10px;
}

.community-post-body {
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.community-post-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.community-post-photos img {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border: 1px solid #9fb7d5;
  background: #fff;
}

.community-post-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  border-top: 1px solid #d8e5f2;
  padding-top: 6px;
}

.community-post-actions form,
.community-members-table form {
  display: inline;
  margin: 0 4px 0 0;
}

.community-post-like {
  cursor: pointer;
}

.community-comment {
  border-top: 1px solid #d8e5f2;
  padding: 7px 0;
}

.community-comment-form {
  margin-top: 10px;
}

.community-members-table {
  width: 100%;
  border-collapse: collapse;
}

.community-members-table th,
.community-members-table td {
  border: 1px solid #b8cbe3;
  padding: 5px;
}

.community-members-table th {
  background: #639bd0;
  color: #fff;
  text-align: left;
}

.community-role-label {
  display: inline-block;
  background: #e7f0ff;
  border: 1px solid #9fb7d5;
  padding: 1px 5px;
  font-size: 11px;
}

.community-online { color: #009000; font-weight: bold; }
.community-offline { color: #555; }
.community-pending-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #d8e5f2;
  padding: 5px 0;
}

.community-pending-row form {
  margin: 0;
}
.rares-coming-soon { font-weight: bold; color: #003399; text-align: center; padding: 20px 0; }

/* Mobile layout editor */
.mobile-editor-page {
  margin: 0;
  background: #07101f;
  color: #eaf4ff;
  font: 12px Arial, Helvetica, sans-serif;
  overflow: hidden;
}

.mobile-editor-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  overflow: hidden;
}

.mobile-editor-tools {
  padding: 12px;
  background: #0b1c38;
  border-right: 1px solid rgba(117, 183, 255, 0.35);
  overflow-y: auto;
}

.mobile-editor-tools h2,
.mobile-editor-tools h3 {
  margin: 0 0 10px;
  color: #fff;
}

.mobile-editor-tools label {
  display: grid;
  gap: 3px;
  margin-bottom: 8px;
  color: #b9d8ff;
  font-weight: bold;
}

.mobile-editor-tools input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #477fbd;
  background: #f7fbff;
  color: #07101f;
  padding: 5px;
}

.mobile-editor-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.mobile-editor-actions button,
.mobile-editor-actions a,
.mobile-rule-panel button,
.mobile-rule-list button {
  border: 1px solid #6aa6e8;
  background: linear-gradient(#1e5da9, #0d2a58);
  color: #fff;
  padding: 5px 8px;
  text-decoration: none;
  cursor: pointer;
}

.mobile-editor-actions button.active {
  border-color: #ffb44d;
  background: linear-gradient(#a75a00, #5d3200);
}

.mobile-rule-panel {
  padding: 8px;
  border: 1px solid rgba(117, 183, 255, 0.35);
  background: rgba(0, 0, 0, 0.18);
  margin-bottom: 10px;
}

.mobile-rule-list {
  display: grid;
  gap: 5px;
}

.mobile-preview-stage {
  min-width: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, #12294f, #020611 72%);
  overflow: hidden;
  padding: 12px;
}

.mobile-phone-frame {
  width: min(390px, calc(100vw - 340px));
  height: min(844px, calc(100vh - 24px));
  aspect-ratio: 390 / 844;
  border: 12px solid #111;
  border-radius: 34px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.62);
}

.mobile-phone-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 760px) {
  .community-form,
  .community-card,
  .mobile-editor-shell {
    grid-template-columns: 1fr;
  }
}

/* Mobile layout runtime pass */
html.view-mobile,
html.view-mobile body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html.view-mobile body {
  padding-bottom: 48px !important;
}

html.view-mobile *,
html.view-mobile *::before,
html.view-mobile *::after {
  box-sizing: border-box;
}

html.view-mobile .container,
html.view-mobile .topbar,
html.view-mobile .top-inner,
html.view-mobile .ad-banner,
html.view-mobile .nav-row,
html.view-mobile .footer,
html.view-mobile .box,
html.view-mobile .custom-ad,
html.view-mobile .home-layout,
html.view-mobile .profile-layout,
html.view-mobile .communities-page,
html.view-mobile .streams-page,
html.view-mobile .voices-shell,
html.view-mobile main {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html.view-mobile .home-layout,
html.view-mobile .profile-layout,
html.view-mobile .community-detail-layout,
html.view-mobile .community-grid,
html.view-mobile .voice-content,
html.view-mobile .voice-device-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

html.view-mobile .community-post-photos {
  grid-template-columns: 1fr;
}

html.view-mobile img,
html.view-mobile video,
html.view-mobile iframe,
html.view-mobile table,
html.view-mobile pre {
  max-width: 100% !important;
}

html.view-mobile table {
  table-layout: fixed;
}

html.view-mobile .video-strip,
html.view-mobile .voice-discovery [data-voice-rooms],
html.view-mobile .nav-row {
  overflow-x: hidden !important;
  flex-wrap: wrap !important;
}

html.view-mobile .chatrooms-panel,
html.view-mobile .chatrooms-panel.compact-mode,
html.view-mobile .chatrooms-panel.showing-voices {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  height: min(86dvh, 720px) !important;
  min-height: min(86dvh, 720px) !important;
  max-height: 100dvh !important;
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden !important;
  z-index: 2147480 !important;
  transform: translate3d(0, var(--chat-sheet-offset, 0px), 0) !important;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), height 220ms ease !important;
  box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.42) !important;
}

html.view-mobile .chatrooms-panel.collapsed {
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: min(86dvh, 720px) !important;
  min-height: min(86dvh, 720px) !important;
  --chat-sheet-offset: calc(100% - 44px);
}

html.view-mobile .chatrooms-panel.sheet-dragging {
  transition: none !important;
}

html.view-mobile .chatrooms-title {
  position: relative;
  height: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 10px 6px !important;
  touch-action: none;
  cursor: ns-resize;
  user-select: none;
}

html.view-mobile .chat-pull-handle {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 54px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 10px rgba(255, 255, 255, 0.22);
}

html.view-mobile .chat-pull-hint {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  display: none;
  width: max-content;
  max-width: calc(100vw - 28px);
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(5, 19, 44, 0.92);
  color: #fff;
  font-size: 11px;
  pointer-events: none;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
}

html.view-mobile .chat-pull-hint::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(5, 19, 44, 0.92);
  transform: translateX(-50%);
}

html.view-mobile .chatrooms-panel.collapsed.show-pull-hint .chat-pull-hint {
  display: block;
  animation: mobile-pull-hint 6s ease-in-out 2 both;
}

@keyframes mobile-pull-hint {
  0%, 100% { opacity: 0; transform: translate(-50%, 6px); }
  14%, 74% { opacity: 1; transform: translate(-50%, 0); }
  44% { opacity: .55; }
  56% { opacity: 1; }
}

html.view-mobile .chatrooms-title button[data-chat-minimize] {
  display: none !important;
}

html.view-mobile .chatrooms-body {
  height: calc(100% - 44px) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

html.view-mobile .chatrooms-layout {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) !important;
  gap: 5px !important;
}

html.view-mobile .chatrooms-main,
html.view-mobile .chatrooms-history {
  min-width: 0 !important;
}

html.view-mobile .chatrooms-history {
  min-height: 0 !important;
  height: auto !important;
}

html.view-mobile .chatrooms-panel [data-form] {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 45px !important;
}

html.view-mobile .chat-voice-view {
  inset: 44px 0 0 !important;
}

html.view-mobile .chat-voice-view iframe {
  width: 100% !important;
  height: 100% !important;
}

.mobile-hover-readout {
  margin: 0 0 8px;
  padding: 6px;
  border: 1px solid rgba(255, 155, 34, 0.56);
  background: rgba(255, 155, 34, 0.12);
  color: #ffe0bd;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mobile-rule-check {
  grid-template-columns: 18px 1fr !important;
  align-items: center;
}

.mobile-rule-check input {
  width: auto;
}

.rares-page {
  padding-top: 10px;
}

.rares-hero-box p,
.rare-detail-copy p,
.rare-create-box p,
.rares-list-box p {
  margin: 5px 0 8px;
  line-height: 1.4;
}

.rares-success,
.rares-error {
  margin-top: 8px;
  padding: 7px;
  border: 1px solid #6699cc;
  background: #f0f7ff;
  font-weight: bold;
}

.rares-error {
  border-color: #cc6666;
  background: #fff1f1;
  color: #990000;
}

.rares-layout,
.rare-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 10px;
  align-items: start;
}

.rares-filter-form,
.rare-status-form {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.rares-filter-form input {
  min-width: 220px;
}

.rares-map-box h3 {
  margin-bottom: 6px;
}

.rares-map-shell {
  position: relative;
}

.rares-map-chart {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  border: 1px solid #8db8e8;
  background: #ffffff;
}

.rares-map-chart .leaflet-container,
.leaflet-container {
  font: 12px Arial, Helvetica, sans-serif;
}

.rares-leaflet-popup {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 6px;
  max-width: 260px;
}

.rares-leaflet-popup img {
  grid-row: span 5;
  width: 62px;
  height: 62px;
  object-fit: cover;
  border: 1px solid #9fb7d5;
}

.rares-leaflet-popup strong,
.rares-leaflet-popup span,
.rares-leaflet-popup p,
.rares-leaflet-popup a {
  display: block;
  margin: 0 0 3px;
  overflow-wrap: anywhere;
}

.rares-leaflet-popup p {
  color: #333;
  font-size: 11px;
}

.rares-map-chart.empty-map::after {
  content: "No plotted listings yet";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  padding: 4px 7px;
  border: 1px solid #c9c9c9;
  background: rgba(255, 255, 255, 0.88);
  color: #555;
  font-size: 11px;
  pointer-events: none;
}

.rares-map-fallback {
  position: relative;
}

.rares-map-zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 8;
  display: grid;
  border: 1px solid #c9c9c9;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.rares-map-zoom button {
  width: 26px;
  height: 24px;
  border: 0;
  border-bottom: 1px solid #d9d9d9;
  background: #ffffff;
  color: #333;
  font: bold 16px Arial, Helvetica, sans-serif;
  line-height: 20px;
  cursor: pointer;
}

.rares-map-zoom button:last-child {
  border-bottom: 0;
}

.rares-map-stage {
  position: relative;
  height: 300px;
  overflow: hidden;
  border: 1px solid #8db8e8;
  background: #ffffff;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.rares-map-stage.dragging {
  cursor: grabbing;
}

.rares-map-world {
  position: absolute;
  inset: 8px;
  min-width: 920px;
  min-height: 280px;
  transform-origin: center;
  transition: transform 80ms linear;
}

.map-continent {
  position: absolute;
  background: #c9ced4;
  border: 1px solid #ffffff;
  box-shadow: inset 0 0 12px rgba(90, 100, 110, 0.14);
  opacity: 0.92;
}

.north-america { left: 7%; top: 16%; width: 26%; height: 34%; border-radius: 48% 42% 36% 50%; transform: rotate(-9deg); }
.south-america { left: 28%; top: 54%; width: 11%; height: 35%; border-radius: 44% 52% 50% 42%; transform: rotate(14deg); }
.europe { left: 45%; top: 23%; width: 12%; height: 17%; border-radius: 45% 48% 40% 42%; transform: rotate(8deg); }
.africa { left: 47%; top: 42%; width: 14%; height: 32%; border-radius: 47% 44% 52% 45%; transform: rotate(-4deg); }
.asia { left: 56%; top: 21%; width: 31%; height: 37%; border-radius: 42% 50% 46% 38%; transform: rotate(4deg); }
.australia { left: 77%; top: 66%; width: 14%; height: 14%; border-radius: 48%; transform: rotate(8deg); }

.map-grid-line {
  position: absolute;
  background: rgba(0, 51, 153, 0.06);
  pointer-events: none;
}

.map-equator { left: 0; right: 0; top: 50%; height: 1px; }
.map-prime { top: 0; bottom: 0; left: 50%; width: 1px; }

.rares-map-world.empty-map::after {
  content: "No plotted listings yet";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 7px;
  border: 1px solid #c9c9c9;
  background: rgba(255, 255, 255, 0.86);
  color: #555;
  font-size: 11px;
  pointer-events: none;
}

.rares-map-pin {
  position: absolute;
  z-index: 3;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #e60000;
  box-shadow: 0 0 0 1px #7a0000, 0 2px 7px rgba(0, 0, 0, 0.36);
  cursor: pointer;
}

.rares-map-pin.active,
.rares-map-pin:focus-visible {
  background: #00a651;
  outline: 2px solid #003399;
  outline-offset: 2px;
}

.rares-map-tip {
  position: absolute;
  z-index: 5;
  width: 230px;
  padding: 6px;
  border: 1px solid #003399;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
}

.rares-map-tip-inner {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 6px;
}

.rares-map-tip img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border: 1px solid #9fb7d5;
}

.rares-map-tip strong,
.rares-map-tip span,
.rares-map-tip p,
.rares-map-tip a {
  display: block;
  margin: 0 0 3px;
  overflow-wrap: anywhere;
}

.rares-map-tip p {
  color: #333;
  font-size: 11px;
}

.rare-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.rares-list-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}

.rares-list-head h3 {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.rares-view-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}

.rares-view-toggle button {
  padding: 2px 6px;
  border: 1px solid #7da7d9;
  background: #eef6ff;
  color: #003399;
  font-size: 11px;
  cursor: pointer;
}

.rares-view-toggle button.active {
  background: #003399;
  color: #ffffff;
}

.rare-listing-grid.rare-view-list,
.rare-listing-grid.rare-view-compact {
  grid-template-columns: 1fr;
}

.rare-listing-grid.rare-view-list .rare-card {
  grid-template-columns: 112px minmax(0, 1.4fr) minmax(0, .8fr) auto auto;
  min-height: 96px;
  align-items: center;
}

.rare-listing-grid.rare-view-list .rare-card img {
  grid-row: span 4;
  height: 82px;
}

.rare-listing-grid.rare-view-compact .rare-card {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto auto;
  min-height: 0;
  align-items: center;
}

.rare-listing-grid.rare-view-compact .rare-card img {
  display: none;
}

.rare-card {
  display: grid;
  gap: 4px;
  min-height: 230px;
  padding: 6px;
  border: 1px solid #b7d4f4;
  background: #f7fbff;
  color: #003399;
  text-decoration: none;
}

.rare-card-shell {
  display: grid;
  gap: 4px;
}

.rare-card-shell .rare-card {
  min-height: 100%;
}

.rare-admin-delete-form {
  margin: 0;
  text-align: right;
}

.rare-admin-delete-form button {
  border: 1px solid #8a0000;
  background: #b00000;
  color: #ffffff;
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
}

.rare-card-map-active {
  border-color: #e60000 !important;
  background: #fff8dc !important;
  box-shadow: 0 0 0 2px rgba(230, 0, 0, 0.2);
}

.callout-admin-cell form {
  margin: 0;
}

.callout-admin-cell button {
  font-size: 11px;
  padding: 2px 6px;
}

.rare-card img,
.rare-photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid #9fb7d5;
  background: #fff;
}

.rare-card strong,
.rare-card span,
.rare-card em,
.rare-card small {
  overflow-wrap: anywhere;
}

.rare-card em,
.rare-price {
  color: #006600;
  font-style: normal;
  font-weight: bold;
}

.rare-photo-grid {
  display: grid;
  gap: 6px;
}

.rare-photo-grid-large {
  grid-template-columns: 1fr;
}

.rare-detail-layout {
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
}

.rare-detail-copy h3 {
  margin-top: 0;
}

.rare-meta,
.rare-quality-list,
.rare-card small {
  color: #555;
  font-size: 11px;
}

.rare-quality-list {
  display: grid;
  gap: 3px;
  margin: 8px 0;
}

.rare-create-form,
.rare-escrow-form {
  display: grid;
  gap: 7px;
}

.rare-create-form label,
.rare-escrow-form label {
  display: grid;
  gap: 3px;
  font-weight: bold;
}

.rare-create-form textarea,
.rare-escrow-form textarea {
  min-height: 70px;
  resize: vertical;
}

.rare-escrow-record {
  margin: 8px 0;
  padding: 7px;
  border: 1px solid #b7d4f4;
  background: #fbfdff;
}

.rare-escrow-record ol {
  margin: 6px 0 8px 20px;
  padding: 0;
}

.rares-back {
  margin: 8px 0 14px;
}

.rares-adsense {
  min-height: 90px;
}

html.view-mobile .rares-layout,
html.view-mobile .rare-detail-layout {
  grid-template-columns: 1fr;
}

html.view-mobile .rares-filter-form,
html.view-mobile .rare-status-form {
  display: grid;
  grid-template-columns: 1fr;
}

html.view-mobile .rares-filter-form input {
  min-width: 0;
}

html.view-mobile .rares-map-stage {
  height: 220px;
}

html.view-mobile .rares-map-chart {
  height: 240px;
}

html.view-mobile .rares-map-world {
  min-width: 560px;
}

/* 2026-06-25: stable header/profile/badge polish */
.topbar .top-inner.container {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 86px !important;
  overflow: visible !important;
}

.topbar .brand {
  flex: 0 0 235px !important;
  width: 235px !important;
  min-width: 235px !important;
  padding: 8px 0 0 10px !important;
  overflow: visible !important;
}

.topbar .brand-logo,
.brand-logo {
  position: static !important;
  display: block !important;
  width: 225px !important;
  max-width: 225px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  transform: none !important;
}

.topbar .brand-logo.brand-logo-tunes {
  width: 250px !important;
  max-width: 250px !important;
}

.topbar .top-right {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  padding-top: 6px !important;
}

.topbar .search,
.topbar .auth-links {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.topbar .search input[type="text"] {
  width: 172px !important;
  min-width: 150px !important;
}

.topbar .auth-links {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.profile-table .left-col {
  width: 340px !important;
  min-width: 340px !important;
}

.profile-summary-card .pfp-info-wrap {
  align-items: flex-start !important;
  gap: 12px !important;
}

.profile-summary-card .mini-info {
  min-width: 155px !important;
  max-width: none !important;
}

.profile-summary-card .mini-info,
.profile-summary-card .mini-info td,
.profile-summary-card .mini-info-table,
.profile-summary-card .mini-info-table td {
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: nowrap !important;
}

.profile-summary-card .online-now {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

.member-pfp-wrap {
  position: relative !important;
  display: inline-block !important;
  line-height: 0 !important;
}

.member-pfp-wrap img {
  display: block !important;
}

.online-text-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  color: #07a82c !important;
  font-weight: bold !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.online-text-badge:before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #23d64b;
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #f07b21;
}

.stream-tagged-users {
  margin: 4px 0 8px;
  font-size: 12px;
  font-weight: bold;
}

.stream-tagged-users a {
  color: #004ec2;
}

.music-play-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  text-decoration: none;
  border: 2px outset #fff;
  background: #eee;
  color: #000;
}

.profile-summary-card .online-now {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 94px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.profile-summary-card .online-icon {
  width: 90px !important;
  max-width: 90px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.stream-player-shell {
  overflow: hidden;
}

.stream-player-shell iframe,
.stream-player-shell video[data-native-live-video],
.stream-player-shell .stream-placeholder {
  position: relative;
  z-index: 1;
}

.stream-watermark {
  left: 10px !important;
  bottom: 44px !important;
  z-index: 8 !important;
  width: 116px !important;
  max-width: 24% !important;
  opacity: .78 !important;
}

.stream-floating-comments {
  position: absolute;
  right: 10px;
  bottom: 54px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
  pointer-events: none;
}

.stream-float-comment {
  max-width: min(280px, 44vw);
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  animation: streamFloatUp 4.3s ease forwards;
}

.stream-float-comment strong {
  color: #9fd0ff;
  margin-right: 5px;
}

@keyframes streamFloatUp {
  0% { opacity: 0; transform: translateY(14px); }
  12% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-42px); }
}

.stream-chat-panel {
  position: relative;
  z-index: 9;
  border-top: 1px solid #5f5f5f;
  background: #101010;
  color: #fff;
  font-size: 12px;
}

.stream-chat-head {
  padding: 4px 7px;
  background: #1d4f93;
  font-weight: bold;
}

.stream-chat-list {
  max-height: 120px;
  overflow-y: auto;
  padding: 5px 7px;
}

.stream-chat-message {
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.stream-chat-name {
  color: #9fd0ff;
  font-weight: bold;
  margin-right: 5px;
}

.stream-chat-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px;
  padding: 5px;
  background: #202020;
}

.stream-chat-form input {
  min-width: 0;
}

.stream-chat-emotes {
  position: absolute;
  right: 46px;
  bottom: 32px;
  z-index: 20;
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid #7da7d9;
  background: #fff;
}

.stream-chat-emotes[hidden] {
  display: none !important;
}

.stream-chat-emotes button {
  width: 28px;
  height: 28px;
  padding: 2px;
}

.stream-chat-emotes img,
.stream-chat-emote {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
}

.stream-orient-button {
  width: 26px;
  height: 24px;
  border: 2px outset #dcdcdc;
  background: #eee;
  color: #111;
  font-weight: bold;
  cursor: pointer;
}

.stream-player-shell.stream-rotate-portrait iframe,
.stream-player-shell.stream-rotate-portrait video[data-native-live-video] {
  transform: rotate(90deg);
  transform-origin: center;
  width: 56.25% !important;
  min-width: 56.25% !important;
  margin: 0 auto;
  aspect-ratio: 9 / 16 !important;
}

.member-verified,
.member-group-badge {
  position: absolute !important;
  width: 16px !important;
  height: 16px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

.member-verified {
  right: -3px !important;
  bottom: -3px !important;
  background-image: url('/public/images/VerifiedMember.png') !important;
}

.member-group-badge {
  left: -3px !important;
  bottom: -3px !important;
  background-image: url('/public/images/BlorgGroupBadge.png') !important;
}

.community-post-form textarea,
.community-comment-form textarea {
  resize: none !important;
}

.community-token-link,
.community-ca-copy {
  font: inherit !important;
  color: #003399 !important;
  text-decoration: underline !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.community-ca-copy {
  color: #005c8a !important;
}

.home-streams .stream-player,
.home-streams .stream-player-shell,
.recent-streams-box .stream-player-shell {
  transform: scale(1.15);
  transform-origin: top center;
  margin-bottom: 28px;
}

.home-bottom-feed,
.daily-blorgfeed {
  margin-top: 4px !important;
}

.miner-test-controls button {
  margin-right: 6px;
}

@media (max-width: 1050px) {
  .topbar .brand {
    flex-basis: 190px !important;
    width: 190px !important;
    min-width: 190px !important;
  }

  .topbar .brand-logo,
  .brand-logo {
    width: 180px !important;
    max-width: 180px !important;
  }

  .topbar .brand-logo.brand-logo-tunes {
    width: 195px !important;
    max-width: 195px !important;
  }

  .topbar .search input[type="text"] {
    width: 135px !important;
    min-width: 120px !important;
  }

  .topbar .auth-links {
    font-size: 11px !important;
  }
}

/* 2026-06-25: final header lock after bot status and Tunes logo */
.topbar .top-inner.container {
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  align-items: start !important;
  min-height: 86px !important;
  overflow: visible !important;
}

.topbar .brand {
  grid-column: 1 !important;
  flex: none !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  padding: 7px 0 0 8px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

.topbar .brand-logo,
.topbar .brand .brand-logo,
.brand-logo {
  width: 218px !important;
  max-width: 218px !important;
}

.topbar .brand-logo.brand-logo-tunes {
  width: 226px !important;
  max-width: 226px !important;
}

.topbar .top-right {
  grid-column: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  align-items: flex-end !important;
  padding-top: 5px !important;
  position: relative !important;
  z-index: 2 !important;
}

.topbar .search,
.topbar .auth-links {
  max-width: 100% !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
}

.topbar .search input[type="text"] {
  width: 152px !important;
  min-width: 132px !important;
}

.topbar .auth-links {
  font-size: 11px !important;
  line-height: 1.15 !important;
  gap: 4px !important;
}

.topbar .bot-status-widget {
  max-width: 92px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.topbar .blorg-token-widget {
  max-width: 202px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.profile-summary-card .mini-info {
  min-width: 185px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.profile-summary-card .mini-info-table {
  table-layout: auto !important;
  width: 100% !important;
}

.profile-summary-card .mini-info-table td:first-child {
  width: 70px !important;
}

.profile-summary-card .mini-info-table td:last-child {
  min-width: 104px !important;
}

.profile-summary-card .online-now {
  max-width: 100% !important;
  gap: 2px !important;
}

@media (max-width: 1050px) {
  .topbar .top-inner.container {
    grid-template-columns: 205px minmax(0, 1fr) !important;
  }

  .topbar .brand {
    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;
  }

  .topbar .brand-logo,
  .topbar .brand .brand-logo,
  .brand-logo {
    width: 190px !important;
    max-width: 190px !important;
  }

  .topbar .brand-logo.brand-logo-tunes {
    width: 198px !important;
    max-width: 198px !important;
  }

  .topbar .search input[type="text"] {
    width: 124px !important;
    min-width: 112px !important;
  }

  .topbar .auth-links {
    font-size: 10px !important;
  }

  .topbar .blorg-token-widget {
    max-width: 160px !important;
  }
}

/* 2026-06-25: compact global header after bot status */
.topbar {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.topbar .top-inner.container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.topbar .brand {
  flex: 0 0 240px !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  height: 74px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
}

.topbar .brand a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
}

.topbar .brand-logo,
.topbar .brand .brand-logo,
.brand-logo {
  position: static !important;
  display: block !important;
  width: 220px !important;
  max-width: 220px !important;
  max-height: 68px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
}

.topbar .brand-logo.brand-logo-tunes {
  width: 228px !important;
  max-width: 228px !important;
  max-height: 68px !important;
}

.topbar .top-right {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: calc(100% - 248px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.topbar .search,
.topbar .auth-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.topbar .search input[type="text"] {
  width: 160px !important;
  min-width: 130px !important;
  height: 22px !important;
  box-sizing: border-box !important;
}

.topbar .auth-links {
  font-size: 11px !important;
  line-height: 1.15 !important;
}

.topbar .online-users-counter,
.topbar .bot-status-widget,
.topbar .blorg-token-widget {
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.topbar .bot-status-widget {
  max-width: 70px !important;
}

.topbar .blorg-token-widget {
  max-width: 205px !important;
}

@media (max-width: 1050px) {
  .topbar .top-inner.container {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    padding: 0 8px !important;
  }

  .topbar .brand {
    flex-basis: 190px !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    height: 68px !important;
  }

  .topbar .brand-logo,
  .topbar .brand .brand-logo,
  .brand-logo {
    width: 178px !important;
    max-width: 178px !important;
    max-height: 62px !important;
  }

  .topbar .brand-logo.brand-logo-tunes {
    width: 186px !important;
    max-width: 186px !important;
  }

  .topbar .top-right {
    max-width: calc(100% - 198px) !important;
  }

  .topbar .search input[type="text"] {
    width: 120px !important;
    min-width: 105px !important;
  }

  .topbar .auth-links {
    font-size: 10px !important;
    gap: 3px !important;
  }

  .topbar .bot-status-widget {
    max-width: 54px !important;
  }

  .topbar .blorg-token-widget {
    max-width: 150px !important;
  }
}

/* 2026-06-25: final compact header pass. Keeps Bot Status without stretching the page. */
.topbar .top-inner.container {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 230px minmax(0, 1fr) !important;
  align-items: center !important;
  height: 82px !important;
  min-height: 82px !important;
  max-height: 82px !important;
  padding: 0 12px !important;
  overflow: hidden !important;
}

.topbar .brand {
  position: static !important;
  grid-column: 1 !important;
  width: 230px !important;
  min-width: 230px !important;
  max-width: 230px !important;
  height: 82px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

.topbar .brand a {
  height: 82px !important;
  display: flex !important;
  align-items: center !important;
}

.topbar .brand-logo,
.topbar .brand .brand-logo,
.brand-logo {
  position: static !important;
  width: 218px !important;
  max-width: 218px !important;
  max-height: 70px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
}

.topbar .brand-logo.brand-logo-tunes {
  width: 224px !important;
  max-width: 224px !important;
  max-height: 72px !important;
}

.topbar .top-right {
  position: static !important;
  grid-column: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 4px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.topbar .search,
.topbar .auth-links {
  position: static !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  white-space: nowrap !important;
  transform: none !important;
}

.topbar .search input[type="text"] {
  width: 175px !important;
  min-width: 145px !important;
  height: 23px !important;
}

.topbar .auth-links {
  font-size: 11px !important;
  line-height: 1.1 !important;
}

.topbar .online-users-counter,
.topbar .bot-status-widget,
.topbar .blorg-token-widget {
  white-space: nowrap !important;
  flex: 0 1 auto !important;
}

.topbar .ad-banner.container,
.topbar + .ad-banner.container {
  margin-top: 0 !important;
}

.profile-summary-card,
.profile-summary-card .pfp-info-wrap,
.profile-summary-card .member-pfp-wrap {
  overflow: visible !important;
}

.profile-summary-card .member-group-badge {
  display: block !important;
  left: -3px !important;
  bottom: -3px !important;
}

@media (max-width: 1050px) {
  .topbar .top-inner.container {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
  }

  .topbar .brand,
  .topbar .brand a {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    height: 74px !important;
  }

  .topbar .brand-logo,
  .topbar .brand .brand-logo,
  .brand-logo {
    width: 176px !important;
    max-width: 176px !important;
    max-height: 64px !important;
  }

  .topbar .brand-logo.brand-logo-tunes {
    width: 182px !important;
    max-width: 182px !important;
  }

  .topbar .search input[type="text"] {
    width: 125px !important;
    min-width: 105px !important;
  }

  .topbar .auth-links {
    font-size: 10px !important;
    gap: 3px !important;
  }
}

/* 2026-06-25: hard cap the header after adding Bot Status, and keep badges pinned to pfps. */
.topbar {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.topbar .top-inner.container {
  grid-template-columns: 220px minmax(0, 1fr) !important;
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  padding: 0 12px !important;
  overflow: hidden !important;
}

.topbar .brand,
.topbar .brand a {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
}

.topbar .brand-logo,
.topbar .brand .brand-logo,
.brand-logo {
  width: 210px !important;
  max-width: 210px !important;
  max-height: 60px !important;
  height: auto !important;
  object-fit: contain !important;
}

.topbar .brand-logo.brand-logo-tunes {
  width: 212px !important;
  max-width: 212px !important;
  max-height: 62px !important;
}

.topbar .top-right {
  grid-column: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.topbar .search,
.topbar .auth-links {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.topbar .search input[type="text"] {
  width: 165px !important;
  min-width: 130px !important;
  height: 22px !important;
}

.topbar .auth-links {
  font-size: 10px !important;
  line-height: 1.1 !important;
}

.topbar .bot-status-widget {
  max-width: 76px !important;
}

.topbar .blorg-token-widget {
  max-width: 170px !important;
}

.topbar .ad-banner.container {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.topbar .ad-banner .ad-slot {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}

.topbar .nav-row.container {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.member-pfp-wrap {
  position: relative !important;
  display: inline-block !important;
  line-height: 0 !important;
  overflow: visible !important;
}

.friend-photo-wrap {
  position: relative !important;
  overflow: visible !important;
}

.member-pfp-wrap .member-group-badge {
  position: absolute !important;
  left: -4px !important;
  bottom: -4px !important;
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  background: url('/public/images/BlorgGroupBadge.png') center / contain no-repeat !important;
  border: 0 !important;
  z-index: 12 !important;
  pointer-events: none !important;
}

.friend-photo-wrap .member-group-badge {
  position: absolute !important;
  left: -4px !important;
  bottom: -4px !important;
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  background: url('/public/images/BlorgGroupBadge.png') center / contain no-repeat !important;
  border: 0 !important;
  z-index: 12 !important;
  pointer-events: none !important;
}

.member-pfp-wrap .member-verified {
  z-index: 13 !important;
}

.friend-photo-wrap .member-verified {
  position: absolute !important;
  right: -4px !important;
  bottom: -4px !important;
  z-index: 13 !important;
}

/* 2026-06-25: keep the global header compact after adding bot status. */
@media (min-width: 769px) {
  html body .topbar {
    display: block !important;
    width: 960px !important;
    max-width: 960px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body .topbar .top-inner.container {
    width: 960px !important;
    max-width: 960px !important;
    min-height: 74px !important;
    height: 74px !important;
    max-height: 74px !important;
    margin: 0 auto !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 230px 1fr !important;
    align-items: center !important;
    column-gap: 10px !important;
    overflow: hidden !important;
  }

  html body .topbar .brand,
  html body .topbar .brand a {
    width: 220px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  html body .topbar .brand-logo,
  html body .topbar .brand .brand-logo {
    width: 215px !important;
    max-width: 215px !important;
    max-height: 60px !important;
    height: auto !important;
    object-fit: contain !important;
    position: static !important;
    transform: none !important;
  }

  html body .topbar .brand-logo.brand-logo-tunes {
    width: 220px !important;
    max-width: 220px !important;
    max-height: 62px !important;
  }

  html body .topbar .top-right {
    grid-column: 2 !important;
    height: 64px !important;
    max-height: 64px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 4px !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }

  html body .topbar .search,
  html body .topbar .auth-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
  }

  html body .topbar .search input[type="text"] {
    width: 170px !important;
    min-width: 140px !important;
    max-width: 170px !important;
    height: 22px !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
  }

  html body .topbar .auth-links {
    font-size: 10px !important;
  }

  html body .topbar .online-users-counter,
  html body .topbar .bot-status-widget,
  html body .topbar .blorg-token-widget {
    overflow: hidden !important;
    white-space: nowrap !important;
    flex: 0 1 auto !important;
  }

  html body .topbar .online-users-counter {
    max-width: 78px !important;
  }

  html body .topbar .bot-status-widget {
    max-width: 58px !important;
  }

  html body .topbar .blorg-token-widget {
    max-width: 165px !important;
  }

  html body .topbar .ad-banner.container {
    width: 960px !important;
    max-width: 960px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 auto !important;
    padding: 2px 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body .topbar .ad-banner .ad-slot {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  html body .topbar .nav-row.container {
    width: 960px !important;
    max-width: 960px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 auto !important;
    padding: 4px 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

/* 2026-06-25: community badge should follow user avatars everywhere. */
.member-pfp-wrap,
.friend-photo-wrap,
.profile-pfp-wrap,
.pfp-badge-wrap,
.avatar-wrap,
.caller-avatar-wrap,
.community-post-avatar,
.blog-author-avatar,
.cool-person {
  position: relative !important;
  display: inline-block !important;
  overflow: visible !important;
}

.member-pfp-wrap .member-group-badge,
.friend-photo-wrap .member-group-badge,
.profile-pfp-wrap .member-group-badge,
.pfp-badge-wrap .member-group-badge,
.avatar-wrap .member-group-badge,
.caller-avatar-wrap .member-group-badge,
.community-post-avatar .member-group-badge,
.blog-author-avatar .member-group-badge,
.cool-person .member-group-badge {
  position: absolute !important;
  left: -4px !important;
  bottom: -5px !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  display: block !important;
  background: url('/public/images/BlorgGroupBadge.png') center / contain no-repeat !important;
  border: 0 !important;
  z-index: 35 !important;
  pointer-events: none !important;
  font-size: 0 !important;
}

/* 2026-06-25: final compact header guard after bot status/tunes variants. */
@media (min-width: 769px) {
  html body .topbar {
    width: 960px !important;
    max-width: 960px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  html body .topbar .top-inner.container {
    width: 960px !important;
    max-width: 960px !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    margin: 0 auto !important;
    padding: 6px 14px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 218px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 8px !important;
    overflow: hidden !important;
  }

  html body .topbar .brand,
  html body .topbar .brand a {
    width: 208px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  html body .topbar .brand-logo,
  html body .topbar .brand .brand-logo,
  html body .topbar .brand-logo.brand-logo-tunes {
    width: 204px !important;
    max-width: 204px !important;
    max-height: 56px !important;
    height: auto !important;
    object-fit: contain !important;
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
  }

  html body .topbar .top-right {
    grid-column: 2 !important;
    height: 60px !important;
    max-height: 60px !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  html body .topbar .search,
  html body .topbar .auth-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
  }

  html body .topbar .search input[type="text"] {
    width: 150px !important;
    min-width: 130px !important;
    max-width: 150px !important;
    height: 22px !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
  }

  html body .topbar .auth-links {
    font-size: 10px !important;
  }

  html body .topbar .online-users-counter {
    max-width: 76px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  html body .topbar .bot-status-widget {
    max-width: 50px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  html body .topbar .blorg-token-widget {
    max-width: 140px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  html body .topbar .ad-banner.container {
    width: 960px !important;
    max-width: 960px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 auto !important;
    padding: 2px 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body .topbar .ad-banner .ad-slot {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  html body .topbar .nav-row.container {
    width: 960px !important;
    max-width: 960px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 auto !important;
    padding: 4px 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .member-pfp-wrap .member-group-badge,
  .profile-pfp-wrap .member-group-badge,
  .friend-photo-wrap .member-group-badge,
  .avatar-wrap .member-group-badge,
  .caller-avatar-wrap .member-group-badge,
  .community-post-avatar .member-group-badge,
  .blog-author-avatar .member-group-badge {
    left: -3px !important;
    bottom: -3px !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }
}

/* 2026-06-25: EOF compact header override after bot status. */
@media (min-width: 769px) {
  html body .topbar {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    overflow: hidden !important;
  }

  html body .topbar .top-inner.container {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 4px 12px !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
  }

  html body .topbar .brand,
  html body .topbar .brand a {
    width: 220px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  html body .topbar .brand-logo,
  html body .topbar .brand .brand-logo {
    width: 205px !important;
    max-width: 205px !important;
    max-height: 42px !important;
  }

  html body .topbar .brand-logo.brand-logo-tunes {
    width: 190px !important;
    max-width: 190px !important;
    max-height: 42px !important;
  }

  html body .topbar .top-right {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px 5px !important;
  }

  html body .topbar .search {
    max-width: 390px !important;
    gap: 3px !important;
  }

  html body .topbar .search label {
    font-size: 10px !important;
  }

  html body .topbar .search input[type="text"] {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 20px !important;
    font-size: 11px !important;
  }

  html body .topbar .search button {
    height: 22px !important;
    padding: 1px 7px !important;
    font-size: 11px !important;
  }

  html body .topbar .auth-links {
    max-width: 435px !important;
    font-size: 10px !important;
    gap: 4px !important;
  }

  html body .topbar .online-users-counter {
    max-width: 72px !important;
  }

  html body .topbar .bot-status-widget {
    max-width: 54px !important;
  }

  html body .topbar .blorg-token-widget {
    max-width: 126px !important;
  }

  html body .topbar .ad-banner.container {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 1px 0 !important;
  }

  html body .topbar .ad-banner .ad-slot {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  html body .topbar .nav-row.container {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 3px 8px !important;
  }
}

/* 2026-06-26: true final lock after legacy compact header rules. */
@media (min-width: 769px) {
  html body .topbar {
    height: 138px !important;
    min-height: 138px !important;
    max-height: 138px !important;
    overflow: hidden !important;
  }

  html body .topbar .top-inner.container {
    width: 960px !important;
    max-width: 960px !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    padding: 4px 12px !important;
    grid-template-columns: 270px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: center !important;
  }

  html body .topbar .brand,
  html body .topbar .brand a {
    width: 270px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  html body .topbar .brand-logo,
  html body .topbar .brand .brand-logo {
    width: 270px !important;
    max-width: 270px !important;
    height: 58px !important;
    max-height: 58px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html body .topbar .brand-logo.brand-logo-tunes {
    width: 270px !important;
    max-width: 270px !important;
    height: 58px !important;
    max-height: 58px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html body .topbar .top-right {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: center !important;
    justify-items: end !important;
    gap: 3px !important;
    overflow: visible !important;
  }

  html body .topbar .search,
  html body .topbar .auth-links {
    max-width: 100% !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  html body .topbar .auth-links {
    font-size: 11px !important;
    gap: 5px !important;
  }

  html body .topbar .online-users-counter,
  html body .topbar .bot-status-widget,
  html body .topbar .blorg-token-widget {
    max-width: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  html body .topbar .blorg-ca-copy {
    display: inline-block !important;
    min-width: 28px !important;
    height: 18px !important;
    padding: 0 5px !important;
    line-height: 16px !important;
    vertical-align: middle !important;
  }

  html body .topbar .ad-banner.container {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 2px 0 !important;
  }

  html body .topbar .ad-banner .ad-slot {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  html body .topbar .nav-row.container {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 4px 8px !important;
  }
}

.member-verified,
.member-group-badge {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
}

.member-group-badge {
  left: -5px !important;
  bottom: -5px !important;
}

.member-verified {
  right: -5px !important;
  bottom: -5px !important;
}

.recent-streams-box .stream-player-shell {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.recent-streams-box .stream-player-shell iframe,
.recent-streams-box .stream-placeholder,
.recent-streams-box .stream-player-shell video[data-native-live-video] {
  height: 325px !important;
  min-height: 325px !important;
}

.home-streams .stream-player,
.home-streams .stream-player-shell,
.recent-streams-box .stream-player-shell {
  transform: none !important;
  margin-bottom: 12px !important;
}

body.profile-custom-page .profile-custom-scope {
  width: min(960px, 100%) !important;
  max-width: 960px !important;
}

body.profile-custom-page .profile-table {
  width: 100% !important;
  table-layout: fixed !important;
}

body.profile-custom-page .profile-table .left-col {
  width: 340px !important;
  min-width: 340px !important;
}

body.profile-custom-page .profile-table .center-col {
  width: 620px !important;
  min-width: 0 !important;
}

body.profile-custom-page .profile-header,
body.profile-custom-page .profile-main,
body.profile-custom-page .profile-friend-space {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.profile-custom-page .profile-main > tbody > tr {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.62fr) !important;
}

/* Final 2026-06-27 stream theater lock */
.stream-theater-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 14990 !important;
  background: rgba(0, 0, 0, .74) !important;
  animation: stream-theater-dim-in 180ms ease-out both !important;
}

@keyframes stream-theater-dim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.stream-player-shell.stream-theater,
.live-stream-pip.stream-theater {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(960px, 88vw) !important;
  max-width: 88vw !important;
  max-height: 88vh !important;
  margin: 0 !important;
  z-index: 15000 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #050505 !important;
  box-shadow: 0 0 0 1px #3b5c8a, 0 0 30px #000 !important;
}

.stream-player-shell.stream-theater iframe,
.stream-player-shell.stream-theater .stream-placeholder,
.stream-player-shell.stream-theater video[data-native-live-video],
.live-stream-pip.stream-theater iframe,
.live-stream-pip.stream-theater .stream-placeholder,
.live-stream-pip.stream-theater video[data-native-live-video] {
  height: min(540px, 56vh) !important;
  min-height: min(360px, 56vh) !important;
  flex: 0 1 auto !important;
}

.stream-player-shell.stream-theater .stream-chat-list,
.live-stream-pip.stream-theater .stream-chat-list {
  max-height: 96px !important;
}

.stream-player-shell .stream-watermark-link,
.live-stream-pip .stream-watermark-link {
  bottom: 118px !important;
  left: 14px !important;
  width: 150px !important;
  max-width: 26% !important;
  z-index: 22 !important;
}

.stream-player-shell.stream-theater .stream-watermark-link,
.live-stream-pip.stream-theater .stream-watermark-link {
  bottom: 116px !important;
}

.stream-orient-button {
  min-width: 28px !important;
  height: 24px !important;
  padding: 1px 6px !important;
  font-size: 17px !important;
  line-height: 18px !important;
  font-family: Arial, sans-serif !important;
}

body.profile-custom-page .profile-summary-card .online-now,
.profile-summary-card .online-now {
  margin-left: -10px !important;
}

/* 2026-06-28: homepage width and Spacehey-like polish pass. */
:root {
  --classic-navy: #1D4ED8;
  --homepage-shell-width: 880px;
}

@media (min-width: 769px) {
  body:not(.profile-custom-page) .container,
  body:not(.profile-custom-page) .topbar,
  body:not(.profile-custom-page) .topbar .top-inner.container,
  body:not(.profile-custom-page) .topbar .ad-banner.container,
  body:not(.profile-custom-page) .topbar .nav-row.container,
  body:not(.profile-custom-page) .footer.container {
    width: var(--homepage-shell-width) !important;
    max-width: var(--homepage-shell-width) !important;
  }

  body:not(.profile-custom-page) .topbar .top-inner.container {
    grid-template-columns: 260px minmax(0, 1fr) !important;
  }

  body:not(.profile-custom-page) .topbar .brand,
  body:not(.profile-custom-page) .topbar .brand a {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
  }

  body:not(.profile-custom-page) .topbar .brand-logo,
  body:not(.profile-custom-page) .topbar .brand .brand-logo {
    width: 248px !important;
    max-width: 248px !important;
  }
}

.topbar {
  background: #1D4ED8 !important;
}

.topbar .ad-banner.container {
  background: #1D4ED8 !important;
}

html body .topbar.no-top-ad,
.topbar.no-top-ad {
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
}

html body .topbar.no-top-ad .top-inner.container,
.topbar.no-top-ad .top-inner.container {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
}

.topbar .search .scope-web {
  width: 12px !important;
  overflow: hidden !important;
}

.nav-row,
.topbar .nav-row.container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0 !important;
  background: #5f9ddd !important;
  border-top-color: #9fc7ff !important;
  border-bottom-color: #3d75ad !important;
}

.nav-row a {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 6px !important;
  border-right: 1px solid rgba(255,255,255,.9) !important;
  line-height: 14px !important;
  text-align: center !important;
}

.nav-row a:last-child {
  border-right: 0 !important;
}

.box h2,
.box h3,
.profile-blurbs h3,
.friends-box h4,
.orange-header,
.home-shillboard-box h3,
.home-side .box h3,
.home-main .box h3 {
  color: #000 !important;
}

.home-videos h2 {
  background: #F9C56C !important;
  color: #000 !important;
}

.home-layout {
  grid-template-columns: minmax(0, 1fr) 245px !important;
  gap: 12px !important;
}

.home-side {
  padding-left: 8px !important;
  align-self: stretch !important;
  min-height: 100% !important;
}

.home-main > .box.home-videos,
.home-main > .box.home-music,
.home-main > .box.home-shillboard-box {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.home-main > .box.home-videos .video-grid,
.home-main > .box.home-videos .home-category-grid,
.home-main > .box.home-music .music-feature,
.home-main > .box.home-shillboard-box .home-shill-section {
  background: #fff !important;
  padding: 7px !important;
  box-sizing: border-box !important;
}

.home-main > .box.home-videos h2 {
  margin-bottom: 0 !important;
  border: 1px solid #F9C56C !important;
  border-bottom: 0 !important;
}

.home-main > .box.home-videos .video-grid {
  border: 1px solid #F9C56C !important;
  border-top: 0 !important;
}

.home-main > .box.home-videos .home-category-grid {
  border: 1px solid #F9C56C !important;
  border-top: 0 !important;
}

.home-main > .box.home-music .music-feature,
.home-main > .box.home-shillboard-box .home-shill-section {
  border: 0 !important;
}

.home-main > .box.home-videos .home-category-grid {
  margin-top: 0 !important;
  border-top: 0 !important;
}

.home-videos .video-grid {
  gap: 6px !important;
}

.home-videos .video-card img {
  height: 72px !important;
}

.home-videos .video-title {
  font-size: 13px !important;
  line-height: 1.08 !important;
}

.home-bottom-feed {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
}

.home-bottom-feed h3 {
  display: none !important;
}

.home-bottom-feed .blorgfeed-list {
  border: 1px solid #3f73ac !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  table-layout: fixed !important;
}

.home-bottom-feed .blorgfeed-list a {
  min-height: 58px !important;
  padding: 6px 8px !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.home-bottom-feed .blorgfeed-list strong,
.home-bottom-feed .blorgfeed-list em,
.home-bottom-feed .blorgfeed-list span {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  white-space: normal !important;
}

.home-bottom-feed .blorgfeed-list strong {
  line-height: 1.12 !important;
}

.login-box h3 {
  background: transparent !important;
  color: #003399 !important;
  text-align: center !important;
  padding: 0 0 5px !important;
}

main.container.home {
  padding-bottom: 10px !important;
  min-height: 0 !important;
}

.footer.container {
  background: transparent !important;
  margin: 10px auto 28px !important;
  padding: 7px 10px !important;
}

.homepage-disclaimer {
  margin: 0 0 9px !important;
  color: #111 !important;
  font-size: 11px !important;
}

.blog-pasted-image {
  display: block !important;
  max-width: 100% !important;
  max-height: 520px !important;
  height: auto !important;
  margin: 8px 0 !important;
  border: 1px solid #b7d1ef !important;
  background: #fff !important;
}

.blog-entry-right-pane img.blog-pasted-image {
  cursor: zoom-in !important;
}

.blog-preview-media {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0 4px;
}

.blog-preview-media-item {
  display: inline-block;
  border: 1px solid #8fb4dd;
  background: #eaf4ff;
  padding: 3px;
}

.blog-preview-media img,
.blog-preview-media video {
  display: block;
  max-width: 180px;
  max-height: 120px;
  object-fit: contain;
  background: #000;
}

body.blog-lightbox-open {
  overflow: hidden;
}

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

.blog-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.86);
}

.blog-lightbox img {
  max-width: min(94vw, 1180px);
  max-height: 90vh;
  object-fit: contain;
  background: #111;
  border: 1px solid #7ba5d3;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

.blog-lightbox-close,
.blog-lightbox-arrow {
  position: fixed;
  z-index: 10001;
  border: 1px solid #bcd7f6;
  background: #d8ecff;
  color: #003399;
  font-weight: bold;
  cursor: pointer;
}

.blog-lightbox-close {
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  font-size: 22px;
  line-height: 24px;
}

.blog-lightbox-arrow {
  top: 50%;
  width: 42px;
  height: 64px;
  margin-top: -32px;
  font-size: 48px;
  line-height: 48px;
}

.blog-lightbox-arrow.is-left {
  left: 18px;
}

.blog-lightbox-arrow.is-right {
  right: 18px;
}

.games-page {
  padding-top: 12px;
}

.games-hero {
  margin-bottom: 10px;
}

.games-hero h2 {
  margin: 0 0 4px;
  color: #003399;
  font-size: 20px;
}

.games-hero p,
.game-setup p,
.game-play-note {
  margin: 4px 0;
}

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

.game-card {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.game-card img {
  width: 190px;
  height: 124px;
  object-fit: cover;
  border: 1px solid #3f73ac;
  background: #000;
}

.game-card h3 {
  margin: 0 0 5px;
  color: #000;
  font-size: 16px;
}

.game-card p {
  margin: 0 0 8px;
  line-height: 1.25;
}

.game-card small {
  display: block;
  margin-top: 8px;
  color: #333;
  line-height: 1.25;
}

.game-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.game-actions a {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #003399;
  background: #e7f1ff;
  color: #003399;
  font-weight: bold;
  text-decoration: none;
}

.game-actions a:first-child {
  background: #1D4ED8;
  color: #fff;
}

.game-setup {
  margin-top: 10px;
}

.game-setup pre {
  margin: 6px 0;
  padding: 8px;
  border: 1px solid #b7d1ef;
  background: #eef6ff;
  overflow-x: auto;
}

.game-play-box h2 {
  margin: 0 0 6px;
}

.game-frame-wrap {
  width: 100%;
  height: 650px;
  border: 1px solid #3f73ac;
  background: #000;
}

.game-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.game-credit {
  margin: 8px 0 0;
  font-size: 11px;
}

.ruffle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 540px;
  border: 1px solid #3f73ac;
  background: #101928;
  color: #fff;
  box-sizing: border-box;
}

.ruffle-player {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 540px;
}

.ruffle-empty {
  display: grid;
  gap: 8px;
  max-width: 520px;
  padding: 18px;
  text-align: center;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.flash-loader-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.flash-loader-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px;
}

.flash-swf-list {
  margin-top: 8px;
  padding: 7px;
  border: 1px solid #b8d2ef;
  background: #eef6ff;
  font-size: 12px;
}

.flash-swf-list strong {
  display: block;
  margin-bottom: 5px;
}

.flash-swf-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flash-swf-list a {
  padding: 3px 7px;
  border: 1px solid #1d4ed8;
  background: #fff;
}

.flash-browser-note {
  font-size: 11px;
  color: #333;
}

@media (max-width: 760px) {
  .games-grid,
  .game-card {
    grid-template-columns: 1fr;
  }

  .game-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .game-frame-wrap {
    height: 520px;
  }
}

body.voices-mobile-embedded {
  margin: 0 !important;
  overflow: hidden;
  background: #02050b !important;
  color: #fff;
}

body.voices-mobile-embedded .voices-shell.immersive-shell {
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 0 !important;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 18% 10%, rgba(37, 99, 235, 0.22), transparent 18rem),
    linear-gradient(180deg, #08172a, #02050b 62%) !important;
}

body.voices-mobile-embedded .voices-stage-topbar {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px;
  border: 1px solid rgba(96, 165, 250, 0.22) !important;
  border-radius: 22px !important;
  background: rgba(9, 18, 32, 0.88) !important;
  color: #fff !important;
  padding: 12px !important;
}

body.voices-mobile-embedded .voices-brandline img {
  width: 168px !important;
  max-width: 74vw;
}

body.voices-mobile-embedded .voices-stage-connection,
body.voices-mobile-embedded .voices-stage-tools {
  flex-wrap: wrap;
  justify-content: flex-start;
}

body.voices-mobile-embedded .voices-stage-connection button,
body.voices-mobile-embedded .voices-stage-tools button,
body.voices-mobile-embedded .voice-actions button {
  border: 1px solid rgba(96, 165, 250, 0.2) !important;
  border-radius: 999px !important;
  background: rgba(37, 99, 235, 0.88) !important;
  color: #fff !important;
}

body.voices-mobile-embedded .voice-content.immersive-content,
body.voices-mobile-embedded .voice-canvas.immersive-canvas {
  border-color: rgba(96, 165, 250, 0.16) !important;
  border-radius: 24px !important;
  background: rgba(3, 8, 19, 0.78) !important;
}

body.voices-mobile-embedded .voice-content.immersive-content {
  min-height: calc(100dvh - 178px);
}

body.voices-mobile-embedded input,
body.voices-mobile-embedded textarea,
body.voices-mobile-embedded select {
  font-size: 16px !important;
}

.blorgpay-mini span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
}

.blorgpay-page .box {
  margin-bottom: 10px;
}

.blorgpay-card h3 {
  margin: 0 0 8px;
  background: #cfe3fb;
  padding: 5px 8px;
  color: #000;
}

.blorgpay-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.blorgpay-table th,
.blorgpay-table td {
  border-bottom: 1px solid #c6ddf7;
  padding: 5px 6px;
  text-align: left;
  vertical-align: top;
}

.blorgpay-table th {
  width: 140px;
  color: #0645ad;
}

.blorgpay-form {
  display: grid;
  gap: 6px;
  max-width: 560px;
}

.blorgpay-form input,
.blorgpay-form textarea {
  border: 1px solid #999;
  padding: 5px;
  font: inherit;
}

.blorgpay-status,
.form-error {
  background: #fff2bf;
  border: 1px solid #d6a34f;
  padding: 7px;
}

.blog-token-pill-host {
  margin: 10px 0;
}

.blog-token-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid #b9c7db;
  background: #eef5ff;
  color: #006b35;
  text-decoration: none;
  font-size: 12px;
}

.blog-token-pill.is-down {
  color: #a11220;
}

.blog-token-pill strong {
  white-space: nowrap;
}

.blog-token-pill small {
  margin-left: 2px;
  color: inherit;
  font-weight: normal;
}

.blog-token-pill span {
  color: #333;
}

.blog-inline-emote,
.stream-chat-emote {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
  vertical-align: -6px;
}

.blog-inline-sticker,
.stream-chat-sticker {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin: 5px 0;
}

.emote-board {
  max-height: 104px;
  overflow: auto;
  flex-wrap: wrap;
  max-width: 100%;
  align-items: center;
}

.emote-board .emote-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 30px;
  line-height: 1;
  overflow: hidden;
}

.emote-board .emote-choice img {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
  display: block;
}

.emote-choice.is-sticker img {
  width: 26px;
  height: 26px;
  max-width: 26px;
  max-height: 26px;
}

.chat-blorg-emote {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
  vertical-align: -6px;
}

.chat-blorg-sticker {
  display: inline-block;
  width: 76px !important;
  height: 76px !important;
  object-fit: contain;
  vertical-align: middle;
  margin: 2px 4px;
}

.chat-emoticons {
  max-height: 96px !important;
  overflow: auto !important;
}

.chat-image-emote-button img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain;
}

.blog-inline-emote,
.stream-chat-emote {
  width: 28px !important;
  height: 28px !important;
}

/* July 16 desktop badge cleanup: SVG verified inline by names, no avatar/group badges. */
.member-group-badge {
  display: none !important;
}

.member-pfp-wrap > .member-verified,
.profile-pfp-wrap > .member-verified,
.friend-photo-wrap > .member-verified,
.pfp-badge-wrap > .member-verified,
.avatar-wrap > .member-verified,
.caller-avatar-wrap > .member-verified,
.community-post-avatar > .member-verified,
.blog-author-avatar > .member-verified,
.cool-person > .member-verified,
.member-pfp-wrap > .member-admin-badge,
.profile-pfp-wrap > .member-admin-badge,
.friend-photo-wrap > .member-admin-badge,
.pfp-badge-wrap > .member-admin-badge,
.avatar-wrap > .member-admin-badge,
.caller-avatar-wrap > .member-admin-badge,
.community-post-avatar > .member-admin-badge,
.blog-author-avatar > .member-admin-badge,
.cool-person > .member-admin-badge {
  display: none !important;
}

.desktop-display-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: baseline;
  line-height: 1.15;
}

.desktop-display-name .member-verified,
.desktop-display-name .member-admin-badge,
:not(.member-pfp-wrap):not(.profile-pfp-wrap):not(.friend-photo-wrap):not(.pfp-badge-wrap):not(.avatar-wrap):not(.caller-avatar-wrap):not(.community-post-avatar):not(.blog-author-avatar):not(.cool-person) > .member-verified,
:not(.member-pfp-wrap):not(.profile-pfp-wrap):not(.friend-photo-wrap):not(.pfp-badge-wrap):not(.avatar-wrap):not(.caller-avatar-wrap):not(.community-post-avatar):not(.blog-author-avatar):not(.cool-person) > .member-admin-badge {
  position: static !important;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  margin-left: 3px !important;
  vertical-align: -0.18em !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.desktop-display-name .member-verified,
:not(.member-pfp-wrap):not(.profile-pfp-wrap):not(.friend-photo-wrap):not(.pfp-badge-wrap):not(.avatar-wrap):not(.caller-avatar-wrap):not(.community-post-avatar):not(.blog-author-avatar):not(.cool-person) > .member-verified {
  background: transparent url('/public/images/VerifiedCheckMark.png') center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.desktop-display-name .member-admin-badge,
:not(.member-pfp-wrap):not(.profile-pfp-wrap):not(.friend-photo-wrap):not(.pfp-badge-wrap):not(.avatar-wrap):not(.caller-avatar-wrap):not(.community-post-avatar):not(.blog-author-avatar):not(.cool-person) > .member-admin-badge {
  background: transparent url('/public/images/blorgLogoBlack.png') center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.blog-entry-main a[href*="x.com"],
.blog-entry-main a[href*="twitter.com"],
.blog-entry-main a[href*="discord.gg"],
.blog-entry-main a[href*="google.com"],
.blog-entry-main a[href*="pagesix.com"],
.blog-entry-card a[href*="x.com"],
.blog-entry-card a[href*="twitter.com"],
.blog-entry-card a[href*="discord.gg"],
.blog-entry-card a[href*="google.com"],
.blog-entry-card a[href*="pagesix.com"],
.blog-comment-main a[href*="x.com"],
.blog-comment-main a[href*="twitter.com"],
.blog-comment-main a[href*="discord.gg"],
.blog-comment-main a[href*="google.com"],
.blog-comment-main a[href*="pagesix.com"] {
  color: #1d9bf0 !important;
  text-decoration: underline !important;
}

/* Desktop profile polish: keep long display names readable and photo cards aligned. */
body.profile-custom-page .profile-summary-card .mini-header strong,
body.profile-custom-page .profile-summary-card .mini-header .desktop-display-name {
  display: inline !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.15 !important;
}

body.profile-custom-page .profile-summary-card .mini-header .member-verified,
body.profile-custom-page .profile-summary-card .mini-header .member-admin-badge {
  display: inline-block !important;
  vertical-align: -0.36em !important;
}

.blog-comment-author .desktop-display-name {
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.15 !important;
}

.blog-comment-author .desktop-display-name .member-verified,
.blog-comment-author .desktop-display-name .member-admin-badge {
  margin-left: 2px !important;
  vertical-align: -0.22em !important;
}

body.profile-custom-page .profile-summary-card .mini-info {
  max-width: 190px !important;
}

body.profile-custom-page .profile-main .photo-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(70px, 76px)) !important;
  justify-content: start !important;
  align-items: start !important;
  gap: 10px 12px !important;
}

body.profile-custom-page .profile-main .photo-card {
  width: 76px !important;
  max-width: 76px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body.profile-custom-page .profile-main .photo-card .profile-photo-thumb {
  width: 58px !important;
  height: 58px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  display: block !important;
}

body.profile-custom-page .profile-main .photo-caption {
  width: 76px !important;
  max-width: 76px !important;
  line-height: 1.12 !important;
  overflow-wrap: break-word !important;
}

body.profile-custom-page .profile-main .photo-reactions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 2px !important;
  white-space: nowrap !important;
}

body.profile-custom-page .profile-main .photo-reactions button {
  flex: 0 0 auto !important;
  min-width: 22px !important;
  padding: 1px 4px !important;
}