/* ==========================================================================
   LUXURIA - BLACK & WHITE / GRAYSCALE STYLESHEET
   ========================================================================== */

/* Dark mode = default */
:root,
html[data-theme="dark"] {
  --bg-page: #141414;
  --bg-dark-header: #0e0e0e;
  --bg-header-border: #000000;
  --bg-box: #1f1f1f;
  --bg-box-header: #2a2a2a;
  --bg-subtle: #252525;

  --text-primary: #f2f2f2;
  --text-secondary: #c8c8c8;
  --text-muted: #b0b0b0;
  --text-link: #ffffff;
  --text-link-hover: #ffffff;

  --border-dark: #111111;
  --border-medium: #444444;
  --border-light: #333333;

  --btn-primary-bg: #292929;
  --btn-primary-border: #0f0f0f;
  --btn-primary-text: #ffffff;

  --btn-secondary-bg: #2a2a2a;
  --btn-secondary-border: #555555;
  --btn-secondary-text: #e8e8e8;

  --input-bg: #111111;
  --input-text: #eeeeee;
  --box-header-from: #2c2c2c;
  --box-header-to: #1f1f1f;
  --box-header-text: #eeeeee;
  --secondary-btn-from: #333333;
  --secondary-btn-to: #222222;

  --font-retro: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
  --font-mono: "Courier New", Courier, monospace;
  --player-dock: 86px;
}

html[data-theme="light"] {
  --bg-page: #e8e8e8;
  --bg-dark-header: #141414;
  --bg-header-border: #000000;
  --bg-box: #ffffff;
  --bg-box-header: #f2f2f2;
  --bg-subtle: #f8f8f8;

  --text-primary: #111111;
  --text-secondary: #555555;
  --text-muted: #777777;
  --text-link: #222222;
  --text-link-hover: #000000;

  --border-dark: #222222;
  --border-medium: #b3b3b3;
  --border-light: #d8d8d8;

  --btn-primary-bg: #292929;
  --btn-primary-border: #0f0f0f;
  --btn-primary-text: #ffffff;

  --btn-secondary-bg: #ececec;
  --btn-secondary-border: #999999;
  --btn-secondary-text: #222222;

  --input-bg: #ffffff;
  --input-text: #111111;
  --box-header-from: #fafafa;
  --box-header-to: #ebebeb;
  --box-header-text: #111111;
  --secondary-btn-from: #ffffff;
  --secondary-btn-to: #e2e2e2;
  --player-dock: 86px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.theme-bw {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-retro);
  font-size: 11.5px;
  line-height: 1.4;
  -webkit-font-smoothing: subpixel-antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 86px; /* Room for global player */
  zoom: 1.14;
}

a {
  color: var(--text-link);
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
  color: var(--text-link-hover);
}

img, video {
  max-width: 100%;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Block browser media download UI where supported (NOT in chat messages) */
img.no-save,
video.no-save,
.protected-media img,
.protected-media video,
.post-card img,
.post-card video,
.lightbox-media-slot img,
.lightbox-media-slot video,
.song-detail-cover,
.album-detail-cover,
.playlist-cover-large {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: auto;
}

/* Chat media: downloads allowed */
.chat-downloadable img,
.chat-downloadable video,
.chat-bubble .chat-bubble-media img,
.chat-bubble .chat-bubble-media video {
  -webkit-user-drag: auto;
  user-select: auto;
  pointer-events: auto;
}

.chat-media-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.chat-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.chat-download-btn {
  font-size: 10px !important;
  padding: 2px 8px !important;
}

.chat-file-card {
  padding: 8px 10px;
  border: 1px solid var(--border-medium, #444);
  background: rgba(0, 0, 0, 0.2);
  min-width: 140px;
}

.chat-file-label {
  font-size: 11px;
  margin-bottom: 6px;
  word-break: break-all;
}

video::-webkit-media-controls-enclosure {
  overflow: hidden;
}

/* Custom SVG Icons */
.custom-svg-icon {
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
}

/* ==========================================================================
   USER ACCOUNT DROPDOWN (perfil en header)
   ========================================================================== */
.user-account-menu-wrap {
  height: auto;
  position: relative;
}
.user-account-menu-wrap .user-pill-link {
  margin-left: 0;
  border: 0;
  border-left: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  padding: 0 4px;
  height: auto;
}
@media (min-width: 769px) {
  .user-account-menu-wrap .user-pill-link {
    border-left: 1px solid #444444;
    padding: 0 10px;
    height: 100%;
    min-height: 42px;
  }
}
.user-pill-caret {
  font-size: 10px;
  opacity: 0.75;
  margin-left: 2px;
}
.user-account-dropdown {
  width: min(300px, calc(100vw - 24px));
  min-width: 260px;
  border: 1px solid #3a3a3a;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  background: #1a1a1a;
  overflow: hidden;
}
.user-account-dropdown-body {
  padding: 0;
  max-height: min(78vh, 640px);
  overflow: auto;
}
.account-menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 70%),
    #151515;
  border-bottom: 1px solid #2c2c2c;
}
.account-menu-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #555;
  background: #222;
  flex-shrink: 0;
}
.account-menu-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.account-menu-identity strong {
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-menu-identity .subtle-text {
  font-size: 12px;
  opacity: 0.75;
}
.account-menu-group {
  padding: 6px;
  border-bottom: 1px solid #262626;
}
.account-menu-group:last-of-type {
  border-bottom: 0;
}
.account-menu-label {
  margin: 4px 8px 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}
.user-account-dropdown .retro-dropdown-item-btn,
.user-account-dropdown .account-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 10px;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  box-sizing: border-box;
}
.account-menu-ico {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #3d3d3d;
  border-radius: 6px;
  background: #222;
  color: #ddd;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
.account-menu-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.account-menu-copy strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.account-menu-copy em {
  font-style: normal;
  font-size: 11px;
  opacity: 0.62;
  line-height: 1.25;
}
.user-account-dropdown .retro-dropdown-item-btn:hover,
.user-account-dropdown .account-menu-item:hover {
  background: #262626;
}
.account-menu-legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 4px 4px;
}
.account-menu-chip {
  display: block;
  padding: 8px 10px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #1f1f1f;
  color: #ddd;
  text-decoration: none;
  font-size: 12px;
  text-align: center;
}
.account-menu-chip:hover {
  border-color: #666;
  background: #292929;
  color: #fff;
}
.user-account-dropdown .user-account-logout {
  border-top: 1px solid #2c2c2c;
  margin: 0;
  border-radius: 0;
  padding: 12px 14px;
  color: #e08888;
  justify-content: center;
  font-weight: 600;
}
.user-account-dropdown .user-account-logout:hover {
  background: rgba(180, 60, 60, 0.12);
}
html[data-theme="light"] .user-account-dropdown {
  background: #fff;
  border-color: #d8d8d8;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .account-menu-head {
  background: linear-gradient(180deg, #f7f7f7, #fff);
  border-bottom-color: #e6e6e6;
}
html[data-theme="light"] .account-menu-group {
  border-bottom-color: #ececec;
}
html[data-theme="light"] .account-menu-ico {
  background: #f3f3f3;
  border-color: #ddd;
  color: #333;
}
html[data-theme="light"] .user-account-dropdown .account-menu-item:hover {
  background: #f2f2f2;
}
html[data-theme="light"] .account-menu-chip {
  background: #fafafa;
  border-color: #ddd;
  color: #222;
}
html[data-theme="light"] .user-account-dropdown .user-account-logout {
  color: #a33;
  border-top-color: #e6e6e6;
}

.help-ticket-box {
  max-width: 480px;
  width: min(480px, calc(100vw - 28px));
}
.accessibility-box {
  max-width: 440px;
  width: min(440px, calc(100vw - 28px));
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
}
.help-ticket-box {
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
}
.help-ticket-body,
.accessibility-body {
  padding: 14px 16px 16px;
}
.accessibility-body {
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.help-ticket-body {
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.help-ticket-body label {
  font-size: 11px;
  font-weight: bold;
  display: block;
  margin-bottom: 4px;
}
.help-ticket-body .retro-input,
.help-ticket-body .retro-textarea {
  width: 100%;
}
.help-ticket-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.help-ticket-back-btn {
  border: 0;
  background: transparent;
  color: var(--text-link, #9ecfff);
  font-size: 12px;
  padding: 0 0 10px;
  cursor: pointer;
  text-align: left;
}
.help-ticket-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.help-ticket-list-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border-medium, #444);
  background: var(--bg-subtle, #1a1a1a);
  color: var(--text-primary, #eee);
  cursor: pointer;
}
.help-ticket-list-item:hover {
  border-color: var(--text-link, #888);
}
.help-ticket-list-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}
.help-ticket-list-top strong {
  font-size: 13px;
  line-height: 1.3;
}
.help-ticket-list-preview {
  font-size: 11px;
  color: var(--text-muted, #aaa);
  line-height: 1.35;
}
.help-ticket-list-date {
  font-size: 10px;
  color: var(--text-muted, #888);
}
.help-ticket-status-pill {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--border-medium, #555);
  white-space: nowrap;
  flex-shrink: 0;
}
.help-ticket-status-pill.status-open,
.help-ticket-status-pill.status-pending,
.help-ticket-status-pill.status-in_progress {
  border-color: #c9a227;
  color: #e6c35c;
}
.help-ticket-status-pill.status-resolved {
  border-color: #3a8f5c;
  color: #7dcea0;
}
.help-ticket-status-pill.status-closed {
  border-color: #777;
  color: #aaa;
}
.help-ticket-chat-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.help-ticket-chat-meta strong {
  font-size: 14px;
  line-height: 1.3;
}
.help-ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(42vh, 340px);
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--border-medium, #444);
  background: var(--bg-subtle, #141414);
  margin-bottom: 12px;
}
.help-ticket-msg {
  max-width: 92%;
  padding: 8px 10px;
  border: 1px solid var(--border-medium, #444);
  background: var(--bg-box, #1e1e1e);
}
.help-ticket-msg.is-admin {
  align-self: flex-end;
  background: #243044;
  border-color: #3a5070;
}
.help-ticket-msg.is-user {
  align-self: flex-start;
}
.help-ticket-msg-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  color: var(--text-muted, #aaa);
  margin-bottom: 4px;
}
.help-ticket-msg-body {
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 12px;
}
.help-ticket-msg-atts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.help-ticket-msg-atts img {
  max-width: 140px;
  max-height: 100px;
  display: block;
  border: 1px solid var(--border-medium, #555);
}
.help-ticket-file-link {
  color: var(--text-link, #9ecfff);
  font-size: 11px;
}
.help-ticket-reply-box label {
  margin-bottom: 4px;
}
html[data-theme="light"] .help-ticket-list-item,
html[data-theme="light"] .help-ticket-thread,
html[data-theme="light"] .help-ticket-msg {
  background: #f7f7f7;
  border-color: #ccc;
  color: #111;
}
html[data-theme="light"] .help-ticket-msg.is-admin {
  background: #e8eef8;
  border-color: #b8c8e0;
}
html[data-theme="light"] .help-ticket-status-pill.status-open,
html[data-theme="light"] .help-ticket-status-pill.status-pending,
html[data-theme="light"] .help-ticket-status-pill.status-in_progress {
  color: #8a6a00;
  border-color: #c9a227;
}
html[data-theme="light"] .help-ticket-back-btn {
  color: #1a4a8a;
}
.accessibility-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(128,128,128,0.25);
}
.accessibility-option:last-of-type {
  border-bottom: 0;
}

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html.a11y-large-text body.theme-bw {
  zoom: 1.22;
}
/* High contrast via variables only — never filter on body (breaks position:fixed modals). */
html.a11y-high-contrast[data-theme="dark"] {
  --bg-page: #000000;
  --bg-box: #0a0a0a;
  --bg-box-header: #111111;
  --bg-subtle: #121212;
  --text-primary: #ffffff;
  --text-link: #ffffff;
  --text-secondary: #f5f5f5;
  --text-muted: #e0e0e0;
  --border-medium: #888888;
  --border-light: #666666;
  --input-bg: #000000;
  --input-text: #ffffff;
  --btn-secondary-bg: #1a1a1a;
  --btn-secondary-border: #aaaaaa;
  --btn-secondary-text: #ffffff;
}
html.a11y-high-contrast[data-theme="light"] {
  --bg-page: #ffffff;
  --bg-box: #ffffff;
  --bg-box-header: #f0f0f0;
  --bg-subtle: #f7f7f7;
  --text-primary: #000000;
  --text-link: #000000;
  --text-secondary: #111111;
  --text-muted: #222222;
  --border-medium: #333333;
  --border-light: #666666;
  --input-bg: #ffffff;
  --input-text: #000000;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-border: #000000;
  --btn-secondary-text: #000000;
}

html.a11y-high-contrast #accessibility-modal .accessibility-box,
html.a11y-high-contrast .a11y-settings-panel {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}
html.a11y-high-contrast[data-theme="dark"] #accessibility-modal .accessibility-box,
html.a11y-high-contrast[data-theme="dark"] .a11y-settings-panel,
html.a11y-high-contrast[data-theme="dark"] #a11y-dropdown {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}
html.a11y-high-contrast[data-theme="dark"] #accessibility-modal .lightbox-header,
html.a11y-high-contrast[data-theme="dark"] .a11y-settings-panel .retro-box-header {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}
html.a11y-high-contrast[data-theme="dark"] .accessibility-option,
html.a11y-high-contrast[data-theme="dark"] .a11y-label,
html.a11y-high-contrast[data-theme="dark"] .accessibility-body .subtle-text,
html.a11y-high-contrast[data-theme="dark"] .a11y-hint {
  color: #ffffff !important;
  border-color: #666666 !important;
}
html.a11y-high-contrast[data-theme="light"] #accessibility-modal .accessibility-box,
html.a11y-high-contrast[data-theme="light"] .a11y-settings-panel,
html.a11y-high-contrast[data-theme="light"] #a11y-dropdown {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
html.a11y-high-contrast[data-theme="light"] #accessibility-modal .lightbox-header,
html.a11y-high-contrast[data-theme="light"] .a11y-settings-panel .retro-box-header {
  background: #f0f0f0 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
html.a11y-high-contrast[data-theme="light"] .accessibility-option,
html.a11y-high-contrast[data-theme="light"] .a11y-label,
html.a11y-high-contrast[data-theme="light"] .accessibility-body .subtle-text,
html.a11y-high-contrast[data-theme="light"] .a11y-hint {
  color: #000000 !important;
  border-color: #333333 !important;
}

.feed-suggested-accounts {
  margin-top: 10px;
}
.feed-suggested-accounts .feed-empty-suggestions {
  padding: 6px 0;
}

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.retro-header {
  background: linear-gradient(to bottom, #2b2b2b 0%, #151515 100%);
  border-bottom: 1px solid var(--bg-header-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0 16px;
  height: 42px;
}

.header-container {
  max-width: 1040px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.header-container > .header-quick-actions {
  margin-left: 6px;
  margin-right: 0;
  order: 3;
  display: none; /* solo con sesión; JS le pone .is-visible */
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.header-container > .header-quick-actions.is-visible {
  display: flex;
}

.header-quick-actions .header-icon-slot,
.header-quick-actions .notif-dropdown-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.header-quick-actions #nav-btn-messages,
.header-quick-actions #nav-btn-notifications {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  margin: 0;
  border: none;
  border-bottom: none;
  background: transparent;
  position: relative;
  gap: 0;
  line-height: 0;
  color: #ffffff;
}

.header-quick-actions #nav-btn-messages:hover,
.header-quick-actions #nav-btn-notifications:hover {
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.header-quick-actions #nav-btn-messages .nav-item-label {
  display: none;
}

.header-quick-actions #nav-btn-messages.active,
.header-quick-actions #nav-btn-notifications.active {
  background: #2a2a2a;
  border-bottom: none;
}

.header-quick-actions #header-msg-badge,
.header-quick-actions #header-notif-badge {
  position: absolute;
  top: 4px;
  right: 2px;
  margin: 0;
}

.header-container > .header-nav {
  order: 2;
  margin-left: auto;
}

.header-container > .header-guest {
  order: 3;
  margin-left: auto;
}

.header-container > .header-left {
  order: 1;
}

.a11y-settings-panel {
  margin: 10px 12px 0;
}

.a11y-settings-panel .a11y-dropdown-body {
  display: block !important;
  position: static !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 10px 12px !important;
}

/* Light mode: Accesibilidad legible (panel Editar perfil + modal) */
html[data-theme="light"] .a11y-settings-panel,
html[data-theme="light"] .a11y-settings-panel .a11y-dropdown-body,
html[data-theme="light"] #a11y-dropdown {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #c8c8c8 !important;
}
html[data-theme="light"] .a11y-settings-panel .retro-box-header {
  background: #f2f2f2 !important;
  color: #111111 !important;
  border-color: #cccccc !important;
}
html[data-theme="light"] .a11y-label,
html[data-theme="light"] .a11y-tone-name,
html[data-theme="light"] .accessibility-option,
html[data-theme="light"] .accessibility-box,
html[data-theme="light"] .accessibility-body {
  color: #111111 !important;
}
html[data-theme="light"] .a11y-hint,
html[data-theme="light"] .a11y-settings-panel .subtle-text,
html[data-theme="light"] .accessibility-body .subtle-text {
  color: #555555 !important;
}
html[data-theme="light"] .a11y-tone-btn {
  background: #f5f5f5 !important;
  border-color: #bbbbbb !important;
  color: #111111 !important;
}
html[data-theme="light"] .a11y-tone-btn:hover {
  border-color: #666666 !important;
  background: #ececec !important;
}
html[data-theme="light"] .a11y-section {
  border-top-color: #dddddd !important;
}
html[data-theme="light"] .accessibility-box {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #cccccc !important;
}
html[data-theme="light"] .accessibility-box .lightbox-header {
  background: #f2f2f2 !important;
  color: #111111 !important;
  border-bottom-color: #cccccc !important;
}
html[data-theme="light"] .accessibility-option {
  border-bottom-color: #e0e0e0 !important;
}

/* Help ticket modal: dark lightbox + light theme body color = unreadable */
html[data-theme="light"] .help-ticket-box.lightbox-content-box,
html[data-theme="light"] .help-ticket-box {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #cccccc !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18) !important;
}
html[data-theme="light"] .help-ticket-box .lightbox-header {
  background: #f2f2f2 !important;
  color: #111111 !important;
  border-bottom-color: #cccccc !important;
}
html[data-theme="light"] .help-ticket-box .lightbox-close-btn {
  color: #111111 !important;
}
html[data-theme="light"] .help-ticket-body,
html[data-theme="light"] .help-ticket-body label {
  color: #111111 !important;
}
html[data-theme="light"] .help-ticket-body .subtle-text,
html[data-theme="light"] .help-ticket-box .subtle-text {
  color: #555555 !important;
}
html[data-theme="light"] .help-ticket-body .retro-input,
html[data-theme="light"] .help-ticket-body .retro-textarea,
html[data-theme="light"] .help-ticket-box .retro-input,
html[data-theme="light"] .help-ticket-box .retro-textarea {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #999999 !important;
}
html[data-theme="light"] .help-ticket-body .retro-input::placeholder,
html[data-theme="light"] .help-ticket-body .retro-textarea::placeholder {
  color: #666666 !important;
}
html[data-theme="light"] .help-ticket-actions .retro-btn-accent {
  background: linear-gradient(to bottom, #333 0%, #111 100%) !important;
  color: #ffffff !important;
  border-color: #000 !important;
}

/* Chat / messenger readability in light mode */
html[data-theme="light"] .chat-main-panel,
html[data-theme="light"] .chat-header-bar,
html[data-theme="light"] .chat-composer-wrapper,
html[data-theme="light"] .conversation-sidebar {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #cccccc !important;
}
html[data-theme="light"] .chat-messages-scroll {
  background: #f0f0f0 !important;
  color: #111111 !important;
}
html[data-theme="light"] .chat-header-bar,
html[data-theme="light"] .chat-partner-info,
html[data-theme="light"] .chat-partner-info *,
html[data-theme="light"] .partner-meta-box h4,
html[data-theme="light"] .chat-partner-status,
html[data-theme="light"] .chat-partner-now-playing {
  color: #111111 !important;
}
html[data-theme="light"] .chat-partner-status,
html[data-theme="light"] .chat-partner-now-playing,
html[data-theme="light"] .no-chat-selected,
html[data-theme="light"] .online-users-header {
  color: #555555 !important;
}
html[data-theme="light"] .chat-bubble.bubble-received {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #cccccc !important;
}
html[data-theme="light"] .chat-bubble.bubble-sent {
  background: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #555555 !important;
}
html[data-theme="light"] .chat-bubble.bubble-received .bubble-text,
html[data-theme="light"] .chat-bubble.bubble-received .bubble-meta {
  color: #111111 !important;
}
html[data-theme="light"] .chat-bubble.bubble-sent .bubble-text,
html[data-theme="light"] .chat-bubble.bubble-sent .bubble-meta {
  color: #ffffff !important;
}
html[data-theme="light"] .chat-composer-bar input[type="text"],
html[data-theme="light"] .conv-search input,
html[data-theme="light"] #conv-search-input,
html[data-theme="light"] #chat-input-text {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #999999 !important;
}
html[data-theme="light"] .conv-item-name,
html[data-theme="light"] .conv-item-meta,
html[data-theme="light"] .conv-item-header {
  color: #111111 !important;
}
html[data-theme="light"] .conv-item-preview,
html[data-theme="light"] .conv-item-time {
  color: #555555 !important;
}
html[data-theme="light"] .notif-dropdown,
html[data-theme="light"] #notif-dropdown {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #cccccc !important;
}
html[data-theme="light"] .notif-item,
html[data-theme="light"] .notif-text,
html[data-theme="light"] .notif-content {
  color: #111111 !important;
}
html[data-theme="light"] .notif-time {
  color: #666666 !important;
}
.accessibility-theme-row {
  margin-bottom: 4px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-brand-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
}

/* Desktop: cuenta a la derecha del header (junto a nav), no bajo el logo */
@media (min-width: 769px) {
  .header-container {
    display: flex;
    align-items: center;
  }
  .header-left {
    display: contents;
  }
  .header-brand-stack {
    display: contents;
  }
  .logo {
    order: 1;
  }
  .search-box-wrapper {
    order: 2;
  }
  .header-quick-actions {
    order: 3;
  }
  .header-nav {
    order: 4;
  }
  .user-account-menu-wrap {
    order: 5;
    margin-left: 10px;
  }
  .header-guest {
    order: 6;
  }
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #ffffff;
  text-decoration: none;
  font-family: Tahoma, "Lucida Grande", sans-serif;
}

.logo-text {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -1px;
  color: #ffffff;
  text-transform: lowercase;
}

/* Real Search Box */
.search-box-wrapper {
  position: relative;
}

.search-box {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #000000;
  padding: 1px 4px;
}

.search-box input {
  border: none;
  outline: none;
  font-size: 11px;
  font-family: inherit;
  width: 170px;
  padding: 2px 4px;
}

.search-box button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  color: #222;
}

.search-results-dropdown {
  position: absolute;
  top: 28px;
  left: 0;
  width: 280px;
  background: #ffffff;
  border: 1px solid #000000;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  z-index: 2100;
  max-height: 320px;
  overflow-y: auto;
}

.search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px solid #eeeeee;
}

.search-result-item:hover {
  background-color: #f2f2f2;
}

.search-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
}

.search-user-avatar {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border: 1px solid #777777;
}

/* Header Navigation */
.header-nav {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 4px;
}

.nav-item {
  background: transparent;
  border: none;
  color: #e0e0e0;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  height: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.15s ease;
  text-decoration: none;
}

.nav-item:hover {
  background-color: #383838;
  color: #ffffff;
  text-decoration: none;
}

.nav-item.active {
  background-color: #0d0d0d;
  color: #ffffff;
  border-bottom: 3px solid #ffffff;
}

.icon-only-nav-item {
  padding: 0 8px;
}

.badge {
  background: #ffffff;
  color: #000000;
  border-radius: 9px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: bold;
}

#header-msg-badge,
#header-notif-badge {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  line-height: 1;
  font-size: 9px;
  font-weight: 700;
  box-sizing: border-box;
}

#nav-btn-messages {
  position: relative;
  gap: 6px;
}

#nav-btn-messages .nav-item-label {
  display: inline;
}

#header-msg-badge {
  margin-left: 4px;
}

/* Compact feed profile-completion nudge (left sidebar, under avatar) */
.left-sidebar .feed-profile-completion {
  margin-bottom: 0;
}
.feed-profile-completion {
  margin-bottom: 10px;
  background: #1a1a1a;
  border: 1px solid #3a3a3a;
}
.feed-profile-completion-inner {
  padding: 10px 12px;
}
.feed-profile-completion-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.feed-profile-completion-title {
  flex: 1;
  font-size: 12px;
  color: #eee;
}
.feed-profile-completion-title strong {
  color: #fff;
  font-weight: 700;
}
.feed-profile-completion-copy {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.35;
  color: #aaa;
}
.feed-profile-completion .profile-completion-bar {
  margin-bottom: 8px;
  background: #2a2a2a;
  border-color: #555;
}
.feed-profile-completion .profile-completion-fill {
  background: #e8e8e8;
}
.feed-profile-completion #feed-completion-cta {
  width: 100%;
}

html[data-theme="light"] .feed-profile-completion {
  background: #ffffff !important;
  border-color: #c8c8c8 !important;
  color: #111111 !important;
}
html[data-theme="light"] .feed-profile-completion-title,
html[data-theme="light"] .feed-profile-completion-title strong,
html[data-theme="light"] .feed-profile-completion #feed-completion-pct {
  color: #111111 !important;
}
html[data-theme="light"] .feed-profile-completion-title strong,
html[data-theme="light"] .feed-profile-completion #feed-completion-pct {
  color: #000000 !important;
  font-weight: 700;
}
html[data-theme="light"] .feed-profile-completion-copy,
html[data-theme="light"] .feed-profile-completion .subtle-text {
  color: #555555 !important;
}
html[data-theme="light"] .feed-profile-completion .profile-completion-bar {
  background: #e6e6e6 !important;
  border-color: #bbb !important;
}
html[data-theme="light"] .feed-profile-completion .profile-completion-fill {
  background: #222222 !important;
}
html[data-theme="light"] .feed-profile-completion .feed-completion-dismiss,
html[data-theme="light"] .feed-profile-completion .retro-link-btn {
  color: #444 !important;
}
html[data-theme="light"] .feed-profile-completion #feed-completion-cta,
html[data-theme="light"] .feed-profile-completion .retro-btn-secondary {
  color: #222 !important;
  background: #ececec !important;
  border-color: #999 !important;
}
.profile-completion-copy {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.35;
}

html[data-theme="light"] .profile-completion-box {
  background: #ffffff !important;
  border-color: #c8c8c8 !important;
  color: #111 !important;
}
html[data-theme="light"] .profile-completion-copy {
  color: #555555 !important;
}
html[data-theme="light"] .profile-completion-item {
  background: #f5f5f5;
  border-color: #d0d0d0;
}
html[data-theme="light"] .profile-completion-label {
  color: #222;
}
html[data-theme="light"] .profile-completion-bar {
  background: #e6e6e6;
  border-color: #bbb;
}
html[data-theme="light"] .profile-completion-fill {
  background: #222;
}

/* User Pill clickable as profile link */
.user-pill-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  padding: 0 10px;
  border-left: 1px solid #444444;
  color: #ffffff;
  font-weight: bold;
  height: 100%;
  text-decoration: none;
}

.user-pill-link:hover {
  background-color: #2b2b2b;
  text-decoration: none;
}

.mini-avatar {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  object-fit: cover;
  border: 1px solid #777777;
}

.header-guest {
  color: #cccccc;
  font-size: 11px;
}

/* ==========================================================================
   NOTIFICATIONS DROPDOWN
   ========================================================================== */
.notif-dropdown-wrapper {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.retro-dropdown-menu {
  position: absolute;
  top: 42px;
  right: 0;
  width: 320px;
  background-color: var(--bg-box);
  border: 1px solid var(--border-dark);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 2000;
  color: var(--text-primary);
}

.dropdown-header {
  background: #242424;
  color: #ffffff;
  padding: 6px 10px;
  font-weight: bold;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-header button {
  color: #ffffff;
  font-size: 10px;
}

.dropdown-body {
  max-height: 350px;
  overflow-y: auto;
  background: var(--bg-box);
  color: var(--text-primary);
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  background-color: var(--bg-box);
  color: var(--text-primary);
}

.notif-item.unread {
  background-color: var(--bg-subtle);
  font-weight: bold;
}

.notif-item:hover {
  background-color: var(--bg-box-header);
}

.notif-avatar {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 1px solid var(--border-medium);
}

.notif-content {
  flex: 1;
  color: var(--text-primary);
}

.notif-text {
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.3;
}

.notif-time {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ==========================================================================
   PAGE BODY & CONTAINERS
   ========================================================================== */
.page-body {
  max-width: 1040px;
  width: 100%;
  margin: 14px auto 30px auto;
  padding: 0 10px;
  flex: 1;
}

.view-panel {
  display: block;
}

/* Page / view enter transitions */
.view-panel.view-enter,
#auth-view.view-enter,
#reset-password-view.view-enter,
#terms-view.view-enter,
#vip-view.view-enter,
#tickets-view.view-enter {
  animation: luxViewEnter 0.28s ease both;
}

@keyframes luxViewEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.badge-pulse,
#header-msg-badge.badge-pulse,
#header-notif-badge.badge-pulse {
  animation: luxBadgePulse 0.65s ease;
}

@keyframes luxBadgePulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  65% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.conv-item.is-new-unread {
  animation: luxConvFlash 0.85s ease;
}

@keyframes luxConvFlash {
  0% { background: rgba(255, 255, 255, 0.22); }
  100% { background: rgba(255, 255, 255, 0.08); }
}

html[data-theme="light"] .conv-item.is-new-unread {
  animation-name: luxConvFlashLight;
}

@keyframes luxConvFlashLight {
  0% { background: #d8d8d8; }
  100% { background: #ececec; }
}

.chat-bubble.is-appearing {
  animation: fbBubbleIn 0.18s ease both;
}

.chat-bubble.bubble-sent.is-appearing {
  animation-name: luxChatBubbleSentIn;
}

.chat-bubble.bubble-received.is-appearing {
  animation-name: luxChatBubbleReceivedIn;
}

@keyframes luxChatBubbleSentIn {
  from { opacity: 0; transform: translateY(8px) translateX(6px); }
  to { opacity: 1; transform: translateY(0) translateX(0); }
}

@keyframes luxChatBubbleReceivedIn {
  from { opacity: 0; transform: translateY(8px) translateX(-6px); }
  to { opacity: 1; transform: translateY(0) translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .view-panel.view-enter,
  #auth-view.view-enter,
  #reset-password-view.view-enter,
  #terms-view.view-enter,
  #vip-view.view-enter,
  #tickets-view.view-enter,
  .badge-pulse,
  #header-msg-badge.badge-pulse,
  #header-notif-badge.badge-pulse,
  .conv-item.is-new-unread,
  .chat-bubble.is-appearing,
  .fb-popup-bubble.is-appearing,
  .library-hero-disc,
  .library-archive-hero::after,
  .lib-np-cover.is-spinning,
  .now-playing-pill,
  .lib-np-status-dot,
  .library-now-playing-banner::before,
  #library-view .library-song-card.is-playing .library-song-cover {
    animation: none !important;
  }
}

.retro-box {
  background-color: var(--bg-box);
  border: 1px solid var(--border-medium);
  box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
  margin-bottom: 12px;
}

.retro-box-header {
  background: linear-gradient(to bottom, var(--box-header-from) 0%, var(--box-header-to) 100%);
  border-bottom: 1px solid var(--border-light);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 11px;
  color: var(--box-header-text);
}

.retro-box-header h2,
.retro-box-header h3 {
  font-size: 12px;
  font-weight: bold;
  margin: 0;
}

.retro-box-content {
  padding: 12px;
}

.retro-box-content.no-padding {
  padding: 0;
}

/* Buttons */
.retro-btn-primary {
  background: linear-gradient(to bottom, #444444 0%, #1f1f1f 100%);
  color: #ffffff;
  border: 1px solid #000000;
  border-top-color: #666666;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 12px;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.retro-btn-primary:hover {
  background: linear-gradient(to bottom, #555555 0%, #292929 100%);
}

.retro-btn-secondary {
  background: linear-gradient(to bottom, var(--secondary-btn-from) 0%, var(--secondary-btn-to) 100%);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 9px;
  cursor: pointer;
}

.retro-btn-secondary:hover {
  background: linear-gradient(to bottom, #f0f0f0 0%, #d4d4d4 100%);
}

.retro-btn-accent {
  background: linear-gradient(to bottom, #242424 0%, #000000 100%);
  color: #ffffff;
  border: 1px solid #000000;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 16px;
  cursor: pointer;
}

.retro-btn-accent:hover {
  background: linear-gradient(to bottom, #3b3b3b 0%, #111111 100%);
}

.mini-btn {
  font-size: 10px;
  padding: 2px 7px;
}

.retro-link-btn {
  background: none;
  border: none;
  color: var(--text-link);
  font-weight: bold;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}

.retro-link-btn:hover {
  text-decoration: underline;
}

/* Inputs */
.retro-input,
.retro-textarea,
.retro-select {
  border: 1px solid var(--border-medium);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 6px;
  background-color: var(--input-bg);
  color: var(--input-text);
  width: 100%;
}

.retro-input:focus,
.retro-textarea:focus,
.retro-select:focus {
  outline: none;
  border-color: var(--border-dark);
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* Accessibility menu */
.a11y-dropdown-wrapper {
  margin-left: 8px;
  margin-right: 4px;
}

.a11y-nav-btn {
  color: #ffffff !important;
}

.a11y-dropdown {
  min-width: 220px;
  right: 0;
  left: auto;
}

.a11y-dropdown-body {
  padding: 10px 12px !important;
}

.a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.a11y-label {
  font-size: 11px;
  color: var(--text-primary);
  font-weight: bold;
}

.a11y-hint {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.35;
}

.a11y-theme-btn,
.a11y-mute-btn {
  white-space: nowrap;
}

.a11y-mute-btn.is-muted {
  border-color: #888;
  opacity: 0.9;
}

.a11y-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light, #333);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.a11y-tone-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(42vh, 280px);
  overflow-y: auto;
}

.a11y-tone-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-medium, #444);
  background: var(--bg-subtle, #1a1a1a);
  color: var(--text-primary, #eee);
  font-size: 11px;
  cursor: pointer;
  text-align: left;
}

.a11y-tone-btn:hover {
  border-color: var(--text-secondary, #aaa);
}

.a11y-tone-btn.is-active {
  border-color: #fff;
  background: #2a2a2a;
  font-weight: bold;
}

.a11y-tone-name {
  flex: 1;
}

.a11y-tone-preview {
  opacity: 0.7;
  font-size: 10px;
}

.a11y-dropdown {
  min-width: 240px;
}

/* Hide download UI globally */
.media-download-row,
.media-download-btn {
  display: none !important;
}

html[data-theme="dark"] .entity-options-menu,
html[data-theme="dark"] .post-options-menu {
  background: #1e1e1e;
  border-color: #555;
  color: #eee;
}

html[data-theme="dark"] .entity-options-menu button,
html[data-theme="dark"] .post-options-menu button {
  color: #ddd;
}

html[data-theme="dark"] .post-card,
html[data-theme="dark"] .post-body {
  color: var(--text-primary);
}

.mini-input {
  font-size: 10px;
  padding: 2px 4px;
}

.mini-textarea {
  font-size: 11px;
  padding: 4px;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 3px;
  color: #222222;
}

.form-row {
  display: flex;
  gap: 12px;
}

.form-row .form-group {
  flex: 1;
}

.form-actions {
  margin-top: 12px;
}

.form-actions.right-align {
  text-align: right;
}

.field-hint {
  font-size: 10px;
  color: #777777;
  display: block;
  margin-top: 2px;
}

.subtle-text {
  color: var(--text-muted);
  font-size: 10px;
}

/* ==========================================================================
   AUTH SCREEN (LOGIN / REGISTER)
   ========================================================================== */
.auth-hero-banner {
  background: linear-gradient(135deg, #1b1b1b 0%, #303030 100%);
  color: #ffffff;
  padding: 24px;
  margin-bottom: 16px;
  border: 1px solid #000000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.banner-content h1 {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
  margin-bottom: 6px;
  text-transform: lowercase;
}

.banner-content .tagline {
  font-size: 13px;
  color: #d0d0d0;
  max-width: 650px;
}

.auth-split-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 16px;
}

.demo-quick-login {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-light);
}

.demo-buttons {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}

/* ==========================================================================
   FEED LAYOUT & LEFT SIDEBAR RECENT POSTS
   ========================================================================== */
.feed-layout-clean {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
}

.left-sidebar .mini-profile-card {
  padding: 10px;
  text-align: center;
}

.sidebar-avatar {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border: 1px solid var(--border-medium);
  padding: 2px;
  background: #ffffff;
  margin: 0 auto 8px auto;
}

.sidebar-info h4 {
  font-size: 13px;
  font-weight: bold;
}

/* Left Sidebar: Mis Publicaciones Recientes */
.sidebar-posts-list {
  display: flex;
  flex-direction: column;
}

.sidebar-post-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.sidebar-post-item:hover {
  background-color: #f7f7f7;
}

.sidebar-post-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 1px solid #777;
  flex-shrink: 0;
}

.sidebar-post-meta {
  flex: 1;
  min-width: 0;
}

.sidebar-post-snippet {
  font-size: 10px;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-post-time {
  font-size: 8px;
  color: #888;
}

/* Center Content & Unified Composer */
.center-content {
  min-width: 0;
}

.composer-box {
  border: 1px solid #b3b3b3;
}

.composer-body {
  padding: 10px;
}

.retro-textarea {
  resize: vertical;
}

.unified-media-selector {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #dddddd;
}

.media-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.file-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.file-limits-info {
  font-size: 9px;
  color: #666;
}

/* Audio Metadata Box in Composer */
.composer-audio-meta-box {
  background: #f5f5f5;
  border: 1px solid #cccccc;
  padding: 8px 10px;
  margin-top: 8px;
}

.audio-meta-header {
  font-size: 10px;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: #333;
}

.audio-cover-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.square-cover-preview {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid #000;
}

/* Upload Progress */
.upload-progress-wrapper {
  margin-top: 8px;
}

.progress-bar-bg {
  width: 100%;
  height: 8px;
  background: #dddddd;
  border: 1px solid #999999;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 3px;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: #111111;
  transition: width 0.2s ease;
}

.progress-bar-fill.is-indeterminate {
  width: 35% !important;
  transition: none;
  animation: lux-progress-indeterminate 1.1s ease-in-out infinite;
}

@keyframes lux-progress-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* Lock form while publishing / commenting */
.form-is-busy {
  position: relative;
  pointer-events: none;
  user-select: none;
  cursor: wait;
  filter: grayscale(0.55);
  opacity: 0.72;
  background: rgba(160, 160, 160, 0.18);
  border-radius: 2px;
  transition: opacity 0.15s ease, filter 0.15s ease, background 0.15s ease;
}

.form-is-busy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(180, 180, 180, 0.22);
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

.form-is-busy .upload-progress-wrapper,
.form-is-busy .comment-submit-progress {
  position: relative;
  z-index: 3;
  filter: none;
  opacity: 1;
  background: transparent;
}

.form-is-busy button,
.form-is-busy textarea,
.form-is-busy input,
.form-is-busy select,
.form-is-busy label {
  cursor: wait !important;
}

html[data-theme="dark"] .form-is-busy {
  background: rgba(40, 40, 40, 0.45);
  opacity: 0.68;
}

html[data-theme="dark"] .form-is-busy::after {
  background: rgba(20, 20, 20, 0.35);
}

.comment-submit-progress {
  flex-basis: 100%;
  width: 100%;
  margin-top: 6px;
  margin-bottom: 2px;
}

.media-preview {
  margin-top: 10px;
  padding: 8px;
  background-color: #f7f7f7;
  border: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-render-slot img,
.preview-render-slot video {
  max-height: 180px;
  width: auto;
  max-width: 100%;
  border: 1px solid #000000;
}

.preview-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.composer-footer {
  background-color: #1c1c1c;
  border-top: 1px solid #333333;
  color: #cccccc;
  padding: 8px 10px;
  text-align: right;
}

.composer-collapsed {
  display: none;
}

/* New posts pill (feed live update) */
.feed-new-posts-wrap {
  position: sticky;
  top: 52px;
  z-index: 40;
  display: flex;
  justify-content: center;
  pointer-events: none;
  margin: 0 0 10px;
  min-height: 0;
}

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

.feed-role-announcements {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
}

.feed-role-announcements[hidden] {
  display: none !important;
}

.feed-role-announcement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ann-border, #8a1f1f);
  background: var(--ann-bg, #c62828);
  color: var(--ann-text, #fff);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

.feed-role-announcement-body {
  flex: 1;
  min-width: 0;
}

.feed-role-announcement-title {
  display: block;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.92;
}

.feed-role-announcement-text {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.feed-role-announcement-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
  color: inherit;
  text-decoration: underline;
}

.feed-role-announcement-link:hover {
  opacity: 0.88;
}

.feed-role-announcement-dismiss {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: -4px -4px 0 0;
  border: 1px solid color-mix(in srgb, var(--ann-text, #fff) 45%, transparent);
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.feed-role-announcement-dismiss:hover {
  background: rgba(0, 0, 0, 0.32);
  border-color: currentColor;
}

.feed-new-posts-btn {
  pointer-events: auto;
  appearance: none;
  border: 1px solid var(--border-medium);
  background: var(--bg-box);
  color: var(--text-primary);
  font-family: var(--font-retro);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transition: background 0.15s ease, transform 0.15s ease;
  animation: feedNewPostsIn 0.22s ease-out;
}

.feed-new-posts-btn:hover {
  background: var(--bg-box-header);
  transform: translateY(-1px);
}

.feed-new-posts-btn:active {
  transform: translateY(0);
}

@keyframes feedNewPostsIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Posts Stream & Post Card */
.posts-stream {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-card {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.06);
  position: relative;
}

.post-card-header {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #f2f2f2;
}

.post-author-avatar {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border: 1px solid #999999;
  cursor: pointer;
}

.post-meta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.post-author-name {
  font-weight: bold;
  font-size: 12px;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  max-width: min(100%, 220px);
  vertical-align: bottom;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-author-name:hover {
  text-decoration: underline;
}

.post-time {
  position: relative;
  display: inline-block;
  font-size: 10px;
  color: #777777;
  cursor: help;
}

.post-time[data-exact-time]:hover::after {
  content: attr(data-exact-time);
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  padding: 4px 8px;
  background: #000000;
  color: #ffffff;
  border: 1px solid #666666;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
  font-size: 9px;
  white-space: nowrap;
  z-index: 999;
  pointer-events: none;
  font-family: inherit;
  letter-spacing: 0.2px;
  border-radius: 2px;
}

/* 3-dots Menu on Post */
.post-options-dropdown-wrapper {
  position: relative;
}

.post-dots-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #666;
  border-radius: 3px;
}

.post-dots-btn:hover {
  background: #eee;
  color: #000;
}

.post-options-menu {
  position: absolute;
  top: 24px;
  right: 0;
  background: #ffffff;
  border: 1px solid #000000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index: 50;
  min-width: 110px;
  display: flex;
  flex-direction: column;
}

.post-options-menu button {
  background: none;
  border: none;
  text-align: left;
  padding: 6px 10px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}

.post-options-menu button:hover {
  background: #222;
  color: #fff;
}

.post-options-menu .opt-report-btn {
  color: #aa5500;
}

.post-options-menu .opt-report-btn:hover {
  background: #442200;
  color: #ffcc88;
}

.post-pinned-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border: 1px solid #666;
  background: #2a2a2a;
  color: #ddd;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.post-card-pinned {
  box-shadow: inset 3px 0 0 #c8a84a;
}

html[data-theme="light"] .post-pinned-badge {
  border-color: #b8a15a;
  background: #fff8e6;
  color: #6a5410;
}

html[data-theme="light"] .post-card-pinned {
  box-shadow: inset 3px 0 0 #c8a84a;
}

/* Entity ⋮ menus (song / album / playlist / profile) */
.entity-dots-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.entity-dots-btn {
  min-width: 32px;
  font-weight: bold;
  letter-spacing: 1px;
}

.entity-options-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #ffffff;
  border: 1px solid #000000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index: 60;
  min-width: 140px;
  display: flex;
  flex-direction: column;
}

.entity-options-menu button {
  background: none;
  border: none;
  text-align: left;
  padding: 7px 12px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  color: #222;
  white-space: nowrap;
}

.entity-options-menu button:hover {
  background: #222;
  color: #fff;
}

.entity-options-menu .entity-opt-report-btn {
  color: #aa5500;
}

.entity-options-menu .entity-opt-report-btn:hover {
  background: #442200;
  color: #ffcc88;
}

.entity-options-menu .entity-opt-delete-song-btn {
  color: #cc4444;
}

.entity-options-menu .entity-opt-delete-song-btn:hover {
  background: #3a1111;
  color: #ff8888;
}

.profile-dots-wrapper {
  margin-left: 2px;
}

.post-body {
  padding: 10px;
}

.post-text-content {
  font-size: 12px;
  line-height: 1.5;
  color: #222222;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Compact Multimedia Summary & Lightbox Trigger */
.post-media-summary-card {
  margin-top: 8px;
  border: 1px solid #333333;
  background-color: #111111;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  max-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-media-summary-card:hover .media-zoom-overlay {
  opacity: 1;
}

.post-video-hover-card.is-hover-playing .media-zoom-overlay {
  opacity: 0;
}

.post-video-hover-card .media-summary-thumbnail {
  transition: opacity 0.15s ease;
}

.post-video-hover-card.is-hover-playing .media-summary-thumbnail {
  object-fit: contain;
}

.media-summary-thumbnail {
  max-height: 280px;
  width: auto;
  max-width: 100%;
  object-fit: cover;
}

.media-zoom-overlay {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.8);
  color: #ffffff;
  padding: 3px 8px;
  font-size: 10px;
  border-radius: 2px;
  border: 1px solid #ffffff;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

/* CUSTOM AUDIO CARD (NOT DEFAULT HTML5 CONTROLS) */
.custom-audio-card {
  margin-top: 8px;
  background: linear-gradient(to right, #1f1f1f 0%, #2c2c2c 100%);
  border: 1px solid #000000;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
}

.audio-square-cover {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border: 1px solid #444;
  flex-shrink: 0;
  background: #111;
}

.audio-meta-content {
  flex: 1;
  min-width: 0;
}

.audio-track-name {
  font-weight: bold;
  font-size: 12px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-artist-name {
  font-size: 10px;
  color: #cccccc;
  margin-top: 2px;
}

.audio-custom-play-btn {
  background: #ffffff;
  border: 1px solid #000;
  color: #000;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 2px;
}

.audio-custom-play-btn:hover {
  background: #dddddd;
}

.post-actions-bar {
  background-color: var(--bg-subtle);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.action-link {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-direction: row;
  white-space: nowrap;
  position: relative;
}

.likers-tooltip {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 80;
  min-width: 120px;
  max-width: 220px;
  max-height: 180px;
  overflow-y: auto;
  padding: 6px 8px;
  background: #1a1a1a;
  color: #f2f2f2 !important;
  border: 1px solid #555;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  font-size: 11px;
  font-weight: normal;
  line-height: 1.45;
  white-space: pre !important;
  text-align: left;
  text-decoration: none !important;
  pointer-events: none;
}

.action-link.has-likers-tip:hover .likers-tooltip {
  display: block;
}

.action-link svg {
  stroke: currentColor;
  color: inherit;
  flex-shrink: 0;
}

.action-link-count::before {
  content: '(';
}

.action-link-count::after {
  content: ')';
}

/* Twitter-style multi-photo collage */
.post-media-collage {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
  border: 1px solid #333;
  background: #000;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 16 / 10;
  max-height: 320px;
}

.post-media-collage.tw-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.post-media-collage.tw-3 {
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.post-media-collage.tw-3 .tile-1 {
  grid-row: 1 / span 2;
}

.post-media-collage.tw-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.post-media-collage-tile {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  background: #111;
  cursor: pointer;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.post-media-collage-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-media-collage-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.lightbox-gallery-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.lightbox-gallery-frame img,
.lightbox-gallery-frame .lightbox-zoom-img {
  max-width: 100%;
  max-height: min(75vh, 720px);
  object-fit: contain;
}

.lightbox-zoom-stage {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 85vw;
  max-height: 75vh;
  touch-action: none;
  cursor: zoom-in;
  user-select: none;
}

.lightbox-zoom-stage .lightbox-zoom-img,
.lightbox-zoom-stage img {
  max-height: 75vh;
  max-width: 85vw;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.05s linear;
  pointer-events: none;
  will-change: transform;
}

.lightbox-zoom-stage.is-zoomed .lightbox-zoom-img,
.lightbox-zoom-stage.is-zoomed img {
  transition: none;
}

.lightbox-zoom-hint {
  margin-top: 8px;
  text-align: center;
  font-size: 10px;
  color: #888;
  letter-spacing: 0.02em;
}

.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 1px solid #fff;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

.lightbox-prev { left: 6px; }
.lightbox-next { right: 6px; }

.comment-photo-thumb {
  display: block;
  margin-top: 6px;
  padding: 0;
  border: 1px solid #555;
  background: #111;
  cursor: pointer;
  max-width: 180px;
}

.comment-photo-thumb img {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: cover;
}

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

.comment-photo-btn,
.comment-gif-btn {
  flex-shrink: 0;
  cursor: pointer;
}

.comment-gif-btn {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-width: 34px;
  justify-content: center;
}

.gif-picker-modal-box {
  width: min(520px, 96vw);
  max-height: min(80vh, 640px);
}

.gif-picker-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.gif-picker-tab {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #555;
  background: #1a1a1a;
  color: #ccc;
  font-size: 11px;
  cursor: pointer;
}

.gif-picker-tab.active,
.gif-picker-tab[aria-selected="true"] {
  background: #2a2a2a;
  border-color: #999;
  color: #fff;
}

.stickers-picker-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.gif-picker-item.is-sticker img {
  object-fit: contain;
  background: repeating-conic-gradient(#1a1a1a 0% 25%, #222 0% 50%) 50% / 12px 12px;
}

.gif-picker-item .sticker-save-btn {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  padding: 2px 6px;
  font-size: 9px;
  line-height: 1.2;
  opacity: 0.92;
}

.stickers-manage-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.stickers-manage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.stickers-manage-item {
  position: relative;
  border: 1px solid #444;
  background: #111;
  aspect-ratio: 1;
  overflow: hidden;
}

.stickers-manage-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: repeating-conic-gradient(#1a1a1a 0% 25%, #222 0% 50%) 50% / 12px 12px;
}

.stickers-manage-item .sticker-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1;
}

.chat-media-img.is-sticker,
.comment-photo-thumb img.is-sticker,
.post-media-gallery img.is-sticker {
  object-fit: contain;
  background: transparent;
}

.gif-picker-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.gif-picker-search-row .retro-input {
  flex: 1;
  min-width: 0;
}

.gif-picker-status {
  margin-bottom: 8px;
  font-size: 11px;
}

.gif-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding: 2px;
}

.gif-picker-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid #444;
  background: #111;
  cursor: pointer;
  aspect-ratio: 1;
  overflow: hidden;
}

.gif-picker-item:hover,
.gif-picker-item:focus-visible {
  border-color: #aaa;
  outline: none;
}

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

.gif-picker-attribution {
  margin-top: 10px;
  font-size: 10px;
}

.comment-photo-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.comment-photo-preview img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid #555;
}

.comment-photo-clear {
  background: none;
  border: 1px solid #666;
  color: inherit;
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
}

.comment-reply-form {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.composer-media-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 6px;
}

.composer-media-preview-item {
  position: relative;
  border: 1px solid #444;
  background: #111;
  min-height: 80px;
}

.composer-media-preview-item img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
}

.composer-media-remove-one {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border: 1px solid #fff;
  background: #000;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.entity-comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  max-height: 420px;
  overflow-y: auto;
}

.entity-comment-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.entity-comment-avatar {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border: 1px solid #555;
  flex-shrink: 0;
}

.entity-comment-body {
  flex: 1;
  min-width: 0;
}

.entity-comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin-bottom: 2px;
  font-size: 11px;
}

.entity-comment-text {
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
}

.entity-comment-form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.entity-comment-form .retro-input {
  flex: 1;
  min-width: 0;
}

.entity-comment-hint {
  margin-top: 6px;
  font-size: 10px;
}

.song-comment-ts-btn {
  background: #222;
  border: 1px solid #555;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 6px;
  cursor: pointer;
}

.song-comment-ts-btn:hover {
  background: #333;
}

.action-link:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

.action-link.liked,
.action-link.reposted {
  color: var(--text-link-hover);
  text-decoration: underline;
}

.post-comments-section {
  background-color: var(--bg-subtle);
  padding: 8px 10px;
  color: var(--text-primary);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.comment-item {
  position: relative;
  display: flex;
  gap: 8px;
  background: var(--bg-box);
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.comment-item.comment-highlight,
.entity-comment-item.comment-highlight {
  animation: commentHighlightPulseDark 3.5s ease-out;
  border-color: #c8c8c8;
  background: #2e2e2e;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

html[data-theme="light"] .comment-item.comment-highlight,
html[data-theme="light"] .entity-comment-item.comment-highlight {
  animation-name: commentHighlightPulseLight;
  background: #fff7d6;
  border-color: #c9a227;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25);
}

.post-internal-link {
  color: var(--text-link, #cfcfcf);
  text-decoration: underline;
  word-break: break-all;
}

.post-internal-link:hover {
  color: var(--text-link-hover, #ffffff);
}

.chat-link-card[data-card-type="comment"] .chat-link-card-cover,
.chat-link-card[data-card-type="reply"] .chat-link-card-cover,
.chat-link-card[data-card-type="profile"] .chat-link-card-cover,
.lux-embed-art.is-avatar .lux-embed-cover {
  border-radius: 50%;
}

a.post-internal-link.is-embed-hidden {
  display: none !important;
}

.post-text-content.is-embed-text-empty,
.bubble-text.is-embed-text-empty {
  display: none;
}

.entity-comment-share-btn {
  margin-left: auto;
}

@keyframes commentHighlightPulseDark {
  0% {
    background: #4a4a2a;
    border-color: #e6d37a;
    box-shadow: 0 0 0 3px rgba(230, 211, 122, 0.45);
  }
  35% {
    background: #3a3a28;
    border-color: #d4c46a;
    box-shadow: 0 0 0 2px rgba(230, 211, 122, 0.28);
  }
  100% {
    background: var(--bg-box);
    border-color: var(--border-light);
    box-shadow: none;
  }
}

@keyframes commentHighlightPulseLight {
  0% {
    background: #ffe566;
    border-color: #c9a227;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.4);
  }
  35% {
    background: #fff0a8;
    border-color: #c9a227;
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25);
  }
  100% {
    background: var(--bg-box);
    border-color: var(--border-light);
    box-shadow: none;
  }
}

.comment-avatar {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border: 1px solid var(--border-medium);
}

.comment-content {
  flex: 1;
}

.comment-author {
  font-weight: bold;
  color: var(--text-primary);
  margin-right: 5px;
  display: inline-block;
  max-width: 12em;
  vertical-align: bottom;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-text {
  font-size: 11px;
  color: var(--text-primary);
}

.comment-time {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 2px;
}

.comment-form {
  display: flex;
  gap: 6px;
}

.comment-form input {
  flex: 1;
}

/* ==========================================================================
   PROFILE VIEW (CON FONDO BLURREADO)
   ========================================================================== */
#profile-view {
  --fl-bg-page: #121212;
  --fl-bg-box: #1e1e1e;
  --fl-text: #e0e0e0;
  --fl-link: #ffffff;
  --fl-border: #444444;
  --fl-font: Tahoma, sans-serif;
  --fl-border-style: solid;
  position: relative;
  z-index: 1;
}

/* Full-viewport profile wallpaper (direct child of body) */
#profile-bg-layer {
  position: fixed !important;
  /* Bleed past edges so blur/parallax never leave empty bands */
  top: -48px !important;
  left: -48px !important;
  right: -48px !important;
  bottom: -48px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  z-index: 0 !important;
  /* Critical: never intercept touches (iOS + filter/transform bugs) */
  pointer-events: none !important;
  touch-action: none !important;
  overflow: hidden !important;
  background-color: transparent !important;
  background-image: none !important;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  display: none;
}

/* Paint lives on an inner node so filter/blur never sits on the hit-tested layer */
#profile-bg-layer .profile-bg-paint {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  touch-action: none !important;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#profile-bg-layer.is-visible {
  display: block !important;
}

/* Nunca mostrar wallpaper fuera de la vista de perfil */
body:not(.view-profile) #profile-bg-layer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Real <img> wallpaper — required for animated GIFs on mobile WebKit */
#profile-bg-layer .profile-bg-img {
  display: none;
  position: absolute !important;
  inset: auto;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none !important;
  touch-action: none !important;
  object-fit: cover;
  object-position: center center;
  user-select: none;
  -webkit-user-drag: none;
}

#profile-bg-layer.uses-bg-img .profile-bg-img {
  display: block !important;
}

#profile-bg-layer.uses-bg-img .profile-bg-paint {
  background-image: none !important;
  filter: none !important;
  transform: none !important;
}

/* Animated wallpaper: avoid GPU promotion that freezes GIFs on Safari */
#profile-bg-layer.is-animated-bg,
#profile-bg-layer.is-animated-bg .profile-bg-paint {
  transform: none !important;
  will-change: auto !important;
  filter: none !important;
}

#profile-bg-layer.is-animated-bg .profile-bg-img {
  will-change: auto !important;
  filter: none !important;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

#profile-bg-layer.is-animated-bg:not([data-bg-mode="maintain"]) .profile-bg-img {
  transform: none !important;
}

body.view-profile.has-profile-wallpaper {
  background-color: transparent !important;
  background-image: none !important;
}

body.view-profile .retro-header {
  position: relative;
  z-index: 40 !important;
}

body.view-profile .page-body {
  position: relative;
  z-index: 2 !important;
  background: transparent !important;
}

body.view-profile #profile-view .profile-page-canvas,
body.view-profile #user-beats-view .profile-page-canvas {
  position: relative;
  z-index: 2;
}

/* Profile-themed scrollbars (vars set on html/body in applyProfileStyles) */
html:has(body.view-profile),
body.view-profile {
  scrollbar-width: thin;
  scrollbar-color: var(--fl-border, #666) var(--fl-bg-page, #1a1a1a);
}
html:has(body.view-profile)::-webkit-scrollbar,
body.view-profile::-webkit-scrollbar,
body.view-profile *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html:has(body.view-profile)::-webkit-scrollbar-track,
body.view-profile::-webkit-scrollbar-track,
body.view-profile *::-webkit-scrollbar-track {
  background: var(--fl-bg-page, #1a1a1a);
  border-left: 1px solid var(--fl-border, #444);
}
html:has(body.view-profile)::-webkit-scrollbar-thumb,
body.view-profile::-webkit-scrollbar-thumb,
body.view-profile *::-webkit-scrollbar-thumb {
  background: var(--fl-border, #666);
  border: 2px solid var(--fl-bg-box, #222);
  border-radius: 2px;
}
html:has(body.view-profile)::-webkit-scrollbar-thumb:hover,
body.view-profile::-webkit-scrollbar-thumb:hover,
body.view-profile *::-webkit-scrollbar-thumb:hover {
  background: var(--fl-link, #aaa);
}

.profile-page-canvas {
  position: relative;
  /* Let the full-page wallpaper show through around boxes */
  background-color: color-mix(in srgb, var(--fl-bg-page) 78%, transparent);
  color: var(--fl-text);
  font-family: var(--fl-font);
  border: 2px var(--fl-border-style) var(--fl-border);
  padding: 18px 18px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  /* Clip horizontal bleed without creating a Y scrollport that traps mobile touch */
  overflow-x: clip;
  overflow-y: visible;
  z-index: 1;
}

body.has-profile-wallpaper .profile-page-canvas {
  background-color: color-mix(in srgb, var(--fl-bg-page) 62%, transparent) !important;
}

@supports not (background-color: color-mix(in srgb, #000 50%, transparent)) {
  .profile-page-canvas {
    background-color: rgba(18, 18, 18, 0.82);
  }
  body.has-profile-wallpaper .profile-page-canvas {
    background-color: rgba(18, 18, 18, 0.62) !important;
  }
}

/* Profile skins (subtle extras on top of color vars) */
.profile-page-canvas[data-skin="scrapbook"] {
  box-shadow: 0 6px 0 rgba(0,0,0,0.15), 0 8px 18px rgba(0,0,0,0.25);
}
.profile-page-canvas[data-skin="scrapbook"] .fotolog-image-frame {
  transform: rotate(-0.6deg);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.18);
}
.profile-page-canvas[data-skin="pixel"] {
  image-rendering: pixelated;
}
.profile-page-canvas[data-skin="pixel"] .retro-box-header {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}
.profile-page-canvas[data-skin="polaroid"] .fotolog-image-frame {
  background: #f4f0e6;
  padding: 10px 10px 28px;
  border: 1px solid #d4cbb8;
}
.profile-page-canvas[data-skin="polaroid"] #profile-main-photo {
  border: none;
  box-shadow: none;
}
.profile-page-canvas[data-skin="noche"] .profile-hero {
  background: linear-gradient(135deg, rgba(8, 24, 48, 0.85), rgba(0, 0, 0, 0.55));
}
.profile-page-canvas[data-skin="metal"] .retro-box {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%);
}
.profile-page-canvas[data-skin="soft"] .retro-box {
  border-radius: 8px;
}
.profile-page-canvas[data-skin="soft"] .profile-hero {
  border-radius: 10px;
}

/* Avatar frames */
.profile-hero-avatar.fl-frame-round,
.profile-page-canvas .profile-hero-avatar.fl-frame-round {
  border-radius: 50%;
}
.profile-hero-avatar.fl-frame-square,
.profile-page-canvas .profile-hero-avatar.fl-frame-square {
  border-radius: 2px;
}
.profile-hero-avatar.fl-frame-thick,
.profile-page-canvas .profile-hero-avatar.fl-frame-thick {
  border-width: 4px;
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
}
.profile-hero-avatar.fl-frame-polaroid,
.profile-page-canvas .profile-hero-avatar.fl-frame-polaroid {
  border: 3px solid #f2efe6;
  border-bottom-width: 14px;
  border-radius: 1px;
  box-shadow: 2px 3px 0 rgba(0,0,0,0.25);
  background: #f2efe6;
}

.fotolog-quote-text {
  margin: 8px 0 0;
  font-style: italic;
  opacity: 0.9;
  font-size: 13px;
}

.profile-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: start;
}
.profile-gallery-item {
  /* Square via padding-top (not aspect-ratio + img height:%):
     iOS Safari otherwise lets intrinsic image height stretch the grid forever.
     Must stay content-box: border-box + height:0 collapses the padding square. */
  position: relative;
  width: 100%;
  min-width: 0;
  height: 0;
  padding: 100% 0 0;
  overflow: visible;
  border: 1px solid var(--fl-border);
  background: rgba(0,0,0,0.25);
  box-sizing: content-box;
}
.profile-gallery-thumb {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}
.profile-gallery-item img,
.profile-gallery-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}
.profile-gallery-thumb:hover img {
  transform: scale(1.04);
}

.profile-gallery-dots-wrap {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
}

.profile-gallery-dots-btn {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.profile-gallery-dots-btn:hover {
  background: rgba(0,0,0,0.75);
}

.profile-gallery-dots-menu {
  position: absolute;
  top: 26px;
  right: 0;
  min-width: 150px;
  display: none;
  flex-direction: column;
  background: #1a1a1a;
  border: 1px solid #555;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  z-index: 5;
}

.profile-gallery-dots-menu.open {
  display: flex;
}

.profile-gallery-dots-menu button {
  background: none;
  border: 0;
  color: #eee;
  text-align: left;
  padding: 7px 10px;
  font-size: 11px;
  cursor: pointer;
}

.profile-gallery-dots-menu button:hover {
  background: #333;
}

.profile-gallery-more-btn {
  margin-top: 8px;
}

.composer-gallery-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.composer-gallery-opt input {
  margin: 0;
}

.profile-side-music {
  margin-top: 2px;
}
.profile-side-music-track {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-side-music-cover {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 1px solid var(--fl-border, #444);
  flex-shrink: 0;
}
.profile-side-music-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.profile-side-music-title,
.profile-side-music .song-title-link {
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-side-music-artist {
  font-size: 10px;
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-side-music-mute {
  flex-shrink: 0;
  font-size: 10px !important;
  padding: 2px 6px !important;
}

.profile-song-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile-song-cover {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--fl-border);
  flex-shrink: 0;
}
.profile-song-meta {
  min-width: 0;
  flex: 1;
}
.profile-song-title {
  font-weight: 700;
  font-size: 13px;
}
.profile-song-artist {
  font-size: 11px;
  opacity: 0.75;
}
.profile-song-play-btn {
  flex-shrink: 0;
}

.profile-guestbook-form {
  margin-bottom: 12px;
}
.profile-guestbook-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.profile-guestbook-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.profile-guestbook-entry {
  display: flex;
  gap: 10px;
  padding: 8px;
  border: 1px dashed var(--fl-border);
  background: rgba(0,0,0,0.12);
}
.profile-guestbook-avatar {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 1px solid var(--fl-border);
  flex-shrink: 0;
}
.profile-guestbook-body {
  min-width: 0;
  flex: 1;
}
.profile-guestbook-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 2px;
}
.profile-guestbook-name {
  font-weight: 700;
  font-size: 12px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-guestbook-text {
  font-size: 12px;
  margin: 0;
  word-break: break-word;
}
.profile-guestbook-del {
  margin-left: auto;
  color: #c66 !important;
}

.profile-skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.profile-skin-btn {
  border: 1px solid #555;
  background: #1a1a1a;
  color: #ddd;
  padding: 10px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.profile-skin-btn:hover {
  border-color: #aaa;
}
.profile-skin-btn.active {
  border-color: #c8a84a;
  box-shadow: inset 0 0 0 1px #c8a84a;
  color: #fff;
}
.profile-skin-btn[data-skin="scrapbook"] { background: #3a2a1a; color: #f0e0c8; }
.profile-skin-btn[data-skin="pixel"] { background: #0d1f0d; color: #6f6; font-family: monospace; }
.profile-skin-btn[data-skin="polaroid"] { background: #e8e0d0; color: #222; }
.profile-skin-btn[data-skin="noche"] { background: #0a1a30; color: #9ecfff; }
.profile-skin-btn[data-skin="metal"] { background: linear-gradient(180deg, #555, #222); color: #eee; }
.profile-skin-btn[data-skin="soft"] { background: #2a322c; color: #d8ecd0; }

.prev-quote {
  font-style: italic;
  font-size: 12px;
  opacity: 0.85;
  margin: 6px 0;
}
.prev-avatar-frame.fl-frame-round { border-radius: 50%; }
.prev-avatar-frame.fl-frame-polaroid {
  border: 3px solid #f2efe6;
  border-bottom-width: 12px;
  background: #f2efe6;
}
.prev-avatar-frame.fl-frame-thick { border-width: 4px; }

@media (max-width: 700px) {
  .profile-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .profile-gallery-item {
    border-left-width: 0;
  }
  .profile-gallery-item:first-child {
    border-left-width: 1px;
  }
}

.profile-inner-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-page-canvas a {
  color: var(--fl-link);
}

.profile-page-canvas .retro-box {
  background-color: var(--fl-bg-box);
  border: 1px var(--fl-border-style) var(--fl-border);
  color: var(--fl-text);
  margin: 0;
}

.profile-page-canvas .retro-box-header {
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px var(--fl-border-style) var(--fl-border);
  color: var(--fl-link);
}

.profile-page-canvas .post-card {
  background-color: var(--fl-bg-box);
  border: 1px var(--fl-border-style) var(--fl-border);
}

.profile-page-canvas .post-text-content {
  color: var(--fl-text);
}

/* ===== Profile hero (identity) ===== */
.profile-hero,
.profile-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  margin: 0;
  background: rgba(0, 0, 0, 0.48);
  border: 1px var(--fl-border-style) var(--fl-border);
  box-sizing: border-box;
  color: #f2f2f2;
}

/* Hero always sits on a dark scrim — keep identity text readable */
.profile-hero .profile-hero-title-row h2,
.profile-hero .profile-handle,
.profile-hero .profile-stat,
.profile-hero .profile-stat-btn {
  color: #ffffff !important;
  opacity: 1 !important;
}

.profile-hero .profile-handle {
  color: rgba(255, 255, 255, 0.88) !important;
}

.profile-hero .profile-stat,
.profile-hero .profile-stat-btn {
  color: rgba(255, 255, 255, 0.92) !important;
}

.profile-hero .profile-stat-btn:hover {
  color: #ffffff !important;
}

.profile-hero-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}

.profile-hero-avatar,
.profile-page-canvas .profile-hero-avatar {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 2px solid var(--fl-border);
  background: #0a0a0a;
  flex-shrink: 0;
  display: block;
}

/* Animated avatar GIFs: avoid compositing quirks that freeze frames on mobile Safari */
.profile-hero-avatar.is-animated-media,
.profile-page-canvas .profile-hero-avatar.is-animated-media {
  transform: none;
  will-change: auto;
  -webkit-transform: none;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

.profile-hero-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-hero-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
}

.profile-hero-title-row h2,
.profile-header-info h2 {
  font-size: 22px;
  font-weight: 900;
  color: var(--fl-link);
  margin: 0;
  line-height: 1.15;
  word-break: break-word;
}

.profile-handle {
  font-size: 12px;
  opacity: 0.75;
  line-height: 1.2;
}

.profile-hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
}

.profile-stat {
  font-size: 11px;
  color: var(--fl-text);
  opacity: 0.92;
  line-height: 1.2;
  white-space: nowrap;
}

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

.profile-stat-btn:hover {
  color: var(--fl-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.profile-stat-sep {
  width: 3px;
  height: 3px;
  margin: 0 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  flex-shrink: 0;
}

.profile-header-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  flex: 0 1 auto;
  max-width: 420px;
}

.profile-header-actions .mini-btn,
.profile-header-actions button {
  white-space: nowrap;
}

/* Sub-panels (Analytics & Archived Posts) */
.profile-sub-panel {
  margin: 0;
  background: #181818;
  border: 2px solid #555;
}

/* Profile completion checklist (owner only) */
.profile-completion-box .retro-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-completion-box .retro-box-header #profile-completion-pct {
  margin-left: auto;
}
.profile-completion-bar {
  width: 100%;
  height: 8px;
  background: #2a2a2a;
  border: 1px solid #444;
  overflow: hidden;
  margin-bottom: 12px;
}
.profile-completion-fill {
  height: 100%;
  width: 0%;
  background: #e8e8e8;
  transition: width 0.35s ease;
}
.profile-completion-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-completion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #222;
  border: 1px solid #3a3a3a;
}
.profile-completion-item.done {
  opacity: 0.55;
}
.profile-completion-check {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1px solid #666;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #111;
  background: transparent;
}
.profile-completion-item.done .profile-completion-check {
  background: #ddd;
  border-color: #ddd;
}
.profile-completion-label {
  flex: 1;
  font-size: 12px;
  color: #ddd;
}
.profile-completion-cta {
  flex-shrink: 0;
}
.header-guest {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.header-guest-hint {
  font-size: 11px;
  color: #999;
}
.header-guest.is-hidden {
  display: none !important;
}

/* Mobile bottom navigation */
.mobile-bottom-nav {
  display: none;
}
.mobile-bottom-nav[hidden] {
  display: none !important;
}

.analytics-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.metric-card {
  background: #242424;
  border: 1px solid #444;
  padding: 10px;
  text-align: center;
}

.metric-number {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 2px;
}

.metric-label {
  font-size: 9px;
  color: #aaa;
  text-transform: uppercase;
}

.fotolog-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr);
  gap: 14px;
  align-items: start;
}

@media (max-width: 1100px) and (min-width: 801px) {
  .fotolog-layout-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr);
  }

  .profile-header-actions {
    max-width: 280px;
  }
}

.fotolog-main-column,
.fotolog-side-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

@media (min-width: 901px) {
  .fotolog-side-column {
    position: sticky;
    top: 10px;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    padding-right: 2px;
  }
}

.fotolog-card {
  margin: 0;
  overflow: hidden;
}

.fotolog-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: bold;
}

.fotolog-date {
  font-size: 10px;
  opacity: 0.75;
  font-weight: normal;
  white-space: nowrap;
}

.fotolog-image-frame {
  background: #0a0a0a;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border-top: 1px var(--fl-border-style) var(--fl-border);
  border-bottom: 1px var(--fl-border-style) var(--fl-border);
}

.fotolog-image-frame img {
  display: block;
  max-height: 460px;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--fl-border);
  object-fit: contain;
}

.fotolog-caption-box {
  padding: 12px 14px;
}

.fotolog-caption-text {
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
  word-break: break-word;
}

.profile-featured-box .fotolog-image-frame {
  background: color-mix(in srgb, var(--fl-bg-page, #121212) 40%, #0a0a0a);
}
.edit-featured-card {
  grid-column: 1 / -1;
}
.edit-featured-card .retro-textarea {
  width: 100%;
  margin-top: 4px;
}

.fotolog-info-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fotolog-info-content .info-row {
  margin: 0;
  font-size: 11px;
  color: var(--fl-text, #e8e8e8);
  min-width: 0;
}

.fotolog-info-content .info-row strong {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 3px;
  color: var(--fl-link, #ffffff);
  opacity: 1;
}

/* Profile: "Escuchando ahora" live row */
.profile-now-playing-row {
  display: flex;
  flex-direction: column;
  gap: 6px !important;
  margin-top: 4px;
  padding: 8px 9px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-np-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: rgba(80, 200, 120, 0.14);
  border: 1px solid rgba(80, 200, 120, 0.35);
}

.profile-np-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4fd18a;
  box-shadow: 0 0 0 0 rgba(79, 209, 138, 0.55);
  animation: profile-np-pulse 1.6s ease-out infinite;
  flex-shrink: 0;
}

@keyframes profile-np-pulse {
  0% { box-shadow: 0 0 0 0 rgba(79, 209, 138, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(79, 209, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 209, 138, 0); }
}

.profile-np-label {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #7ddea8 !important;
  line-height: 1.2;
}

.profile-now-playing-text {
  display: block;
  min-width: 0;
}

.profile-np-track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.profile-np-title {
  font-size: 12px;
  font-weight: bold;
  color: var(--fl-text, #f2f2f2);
  line-height: 1.3;
  word-break: break-word;
}

.profile-np-artist {
  font-size: 10px;
  color: var(--fl-text, #c0c0c0);
  opacity: 0.85;
  line-height: 1.3;
  word-break: break-word;
}

.profile-np-track:hover .profile-np-title {
  text-decoration: underline;
  text-underline-offset: 2px;
}

html[data-theme="light"] .profile-now-playing-row,
html[data-theme="light"] .profile-page-canvas .profile-now-playing-row {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] .profile-np-badge,
html[data-theme="light"] .profile-page-canvas .profile-np-badge {
  background: rgba(46, 140, 84, 0.12) !important;
  border-color: rgba(46, 140, 84, 0.35) !important;
}

html[data-theme="light"] .profile-np-label,
html[data-theme="light"] .profile-page-canvas .profile-np-label,
html[data-theme="light"] .profile-page-canvas .fotolog-info-content .profile-np-label {
  color: #2a8a52 !important;
}

html[data-theme="light"] .profile-np-title,
html[data-theme="light"] .profile-page-canvas .profile-np-title,
html[data-theme="light"] .profile-page-canvas .fotolog-info-content .profile-np-title {
  color: var(--fl-text, #111111) !important;
}

html[data-theme="light"] .profile-np-artist,
html[data-theme="light"] .profile-page-canvas .profile-np-artist,
html[data-theme="light"] .profile-page-canvas .fotolog-info-content .profile-np-artist {
  color: #555555 !important;
  opacity: 1 !important;
}

.fotolog-info-content .bio-text,
.fotolog-info-content span {
  color: var(--fl-text, #e8e8e8);
  margin: 0;
  word-break: break-word;
  opacity: 1;
}

.profile-page-canvas .fotolog-info-content .info-row,
.profile-page-canvas .fotolog-info-content .bio-text,
.profile-page-canvas .fotolog-info-content span,
.profile-page-canvas .fotolog-info-content a {
  color: var(--fl-text, #e8e8e8) !important;
  opacity: 1 !important;
}

.profile-page-canvas .fotolog-info-content .info-row strong {
  color: var(--fl-link, #ffffff) !important;
}

.profile-page-canvas .fotolog-info-content .profile-website-link {
  color: var(--fl-link, #ffffff) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.profile-page-canvas .profile-liked-song-title,
.profile-page-canvas .profile-created-pl-name,
.profile-page-canvas .profile-pinned-pl-title {
  color: var(--fl-link, #ffffff) !important;
  opacity: 1 !important;
}

.profile-page-canvas .profile-liked-song-artist,
.profile-page-canvas .profile-created-pl-meta,
.profile-page-canvas .profile-pinned-pl-author,
.profile-page-canvas .profile-pinned-pl-badge {
  color: var(--fl-text, #cfcfcf) !important;
  opacity: 1 !important;
}

.profile-page-canvas .retro-box-header,
.profile-page-canvas .retro-box-header h3,
.profile-page-canvas .retro-box-header span {
  color: var(--fl-link, #ffffff) !important;
  opacity: 1 !important;
}

.mini-profile-pic {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border: 1px solid var(--fl-border);
}

.profile-wall-box .profile-posts-stream {
  padding: 0;
}

.profile-page-canvas .profile-posts-stream > .post-card {
  border-left: none;
  border-right: none;
  border-radius: 0;
}

.profile-page-canvas .profile-posts-stream > .post-card:last-child {
  border-bottom: none;
}

/* Etiquetas de rol (perfil / posts) */
.role-tags-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 4px;
}

.role-tag-option {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}

.beat-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  margin-right: 2px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  vertical-align: middle;
}

.sample-badge {
  border-style: dashed;
}

html[data-theme="light"] .beat-badge {
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   PROFILE CUSTOMIZER VIEW
   ========================================================================== */
.edit-profile-tabs {
  flex-wrap: wrap;
  gap: 4px;
  position: sticky;
  top: 42px;
  z-index: 20;
  background: var(--bg-box, #1a1a1a);
  padding-top: 4px;
}

.edit-profile-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 920px;
}

#edit-profile-view .customizer-container {
  padding-bottom: 8px;
}

#edit-profile-view .retro-fieldset {
  margin-bottom: 0;
}

#edit-profile-view .retro-tab-pane {
  min-height: 200px;
}

@media (max-width: 720px) {
  .edit-media-grid {
    grid-template-columns: 1fr;
  }
  .edit-profile-tabs {
    top: 0;
  }
}

.edit-profile-stack .form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.edit-profile-stack .form-row > .retro-fieldset,
.edit-profile-stack .form-row > .form-group {
  flex: 1 1 240px;
  min-width: 0;
}

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

.edit-media-card {
  border: 1px solid var(--border-medium, #555);
  padding: 10px;
  background: rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-media-card-title {
  font-size: 11px;
  font-weight: 700;
}

.edit-media-thumb {
  width: 100% !important;
  height: 110px !important;
  object-fit: cover;
}

.edit-media-thumb.edit-bg-thumb,
.edit-media-thumb.edit-banner-preview {
  height: 72px !important;
}

.edit-media-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.edit-profile-sticky-save {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 12px;
  border-top: 1px solid #444;
  background: rgba(18, 18, 18, 0.94);
  backdrop-filter: blur(6px);
}

html[data-theme="light"] .edit-profile-sticky-save {
  background: rgba(245, 245, 245, 0.96);
  border-top-color: #ccc;
}

html[data-theme="light"] .edit-profile-tabs {
  background: var(--bg-box, #f5f5f5);
}

.lux-color-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.lux-color-field label {
  display: block;
  font-size: 10px;
  font-weight: bold;
  margin-bottom: 4px;
}

.lux-color-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lux-color-row input[type="color"] {
  width: 42px;
  height: 32px;
  padding: 0;
  border: 1px solid #777;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.lux-color-row .lux-hex-input {
  flex: 1;
  min-width: 0;
  font-family: 'Share Tech Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.image-adjust-box {
  max-width: 620px;
  width: calc(100vw - 24px);
}

.image-adjust-body {
  padding: 12px;
}

.image-adjust-stage {
  position: relative;
  width: 100%;
  background: #0a0a0a;
  border: 1px solid #444;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
}

.image-adjust-stage:active {
  cursor: grabbing;
}

.image-adjust-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 50vh;
}

.image-adjust-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(200, 168, 74, 0.85);
}

.image-adjust-stage[data-aspect="1"] .image-adjust-frame,
.image-adjust-stage[data-aspect="3"] .image-adjust-frame,
.image-adjust-stage[data-aspect="custom"] .image-adjust-frame {
  /* Position set in JS via LuxImageAdjuster._syncFrame */
  box-shadow:
    0 0 0 999px rgba(0,0,0,0.55),
    inset 0 0 0 2px rgba(200, 168, 74, 0.9);
}

.image-adjust-controls {
  margin-top: 10px;
}

.image-adjust-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 800px) {
  .edit-media-grid {
    grid-template-columns: 1fr;
  }
}

.customizer-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  align-items: start;
}

.retro-fieldset {
  border: 1px solid var(--border-medium);
  padding: 12px;
  margin-bottom: 14px;
}

.retro-fieldset legend {
  font-weight: bold;
  padding: 0 6px;
  font-size: 12px;
  color: #111111;
}

.color-pickers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.color-picker-item label {
  display: block;
  font-size: 10px;
  font-weight: bold;
  margin-bottom: 2px;
}

.color-picker-item input[type="color"] {
  width: 100%;
  height: 28px;
  border: 1px solid #777777;
  cursor: pointer;
  background: none;
}

.avatar-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-medium-preview {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 1px solid #555555;
  background: #eee;
}

.avatar-inputs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.customizer-preview-box {
  background: #2b2b2b;
  padding: 12px;
  border: 1px solid #111111;
  position: sticky;
  top: 72px;
  z-index: 6;
  max-height: calc(100vh - 88px);
  overflow: auto;
  transition: background-color 0.15s ease;
}

.preview-bg-layer {
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.customizer-preview-box h4 {
  color: #ffffff;
  margin-bottom: 10px;
  font-size: 12px;
  position: relative;
  z-index: 2;
}

.live-preview-card {
  padding: 12px;
  border: 2px solid #555;
  background: #111;
  color: #eee;
  position: relative;
  z-index: 2;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.preview-header {
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.preview-body {
  display: flex;
  gap: 10px;
}

.preview-img-box img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border: 1px solid #555;
}

.preview-bio-box {
  flex: 1;
  font-size: 10px;
}

/* ==========================================================================
   MESSAGING SYSTEM
   ========================================================================== */
/*
  Body uses zoom:1.14 — layout heights must use (100dvh / 1.14).
  CRITICAL: override min-height:100vh from body.theme-bw, otherwise
  min-height wins over max-height and the composer is pushed off-screen.
  Chat panel: flex column; only the middle messages row scrolls.
*/
body.theme-bw.view-messages {
  height: calc(100dvh / 1.14) !important;
  max-height: calc(100dvh / 1.14) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-bottom: 86px !important; /* player bar, included via border-box */
}

body.view-messages .retro-header {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

body.view-messages .page-body {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  padding: 8px 10px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  width: 100%;
  max-width: 1040px;
}

body.view-messages #app-workspace {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#messages-view {
  overflow: hidden;
  flex-direction: column;
  min-height: 0;
}

body.view-messages #messages-view {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  height: auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.messenger-box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 0 !important;
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

body.view-messages .messenger-box {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.messenger-box > .retro-box-header {
  flex: 0 0 auto;
}

.messenger-container {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  border-top: 1px solid var(--border-medium);
  overflow: hidden;
}

.messenger-container > * {
  min-height: 0;
  min-width: 0;
  max-height: 100%;
  overflow: hidden;
}

.conversation-sidebar {
  border-right: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.conversation-sidebar-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.conv-search {
  padding: 6px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  background: var(--bg-box);
  display: flex;
  gap: 6px;
  align-items: center;
}

.conv-search .retro-input {
  flex: 1;
  min-width: 0;
}

.conv-create-group-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.create-group-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 0;
}

.create-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-medium);
  padding: 3px 8px;
  font-size: 10px;
  color: var(--text-primary);
}

.create-group-chip button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0 2px;
}

.create-group-candidates {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  background: var(--bg-subtle);
}

.create-group-candidate {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  min-width: 0;
  color: var(--text-primary);
}

.create-group-candidate:hover {
  background: var(--bg-box-header);
}

.create-group-candidate img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border: 1px solid var(--border-medium);
  flex-shrink: 0;
}

.create-group-candidate-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.user-name-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.chat-delete-btn {
  color: #c44 !important;
}

.manage-group-modal-box .playlist-modal-body {
  max-height: min(70vh, 640px);
  overflow-y: auto;
}

.manage-group-avatar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.manage-group-avatar-preview {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--border-medium, #444);
  background: #111;
}

.manage-group-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.manage-group-name-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.manage-group-name-row .retro-input {
  flex: 1;
}

.manage-group-members-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border-light, #333);
  padding: 6px;
  background: var(--bg-subtle, #1a1a1a);
}

.manage-group-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
}

.manage-group-member-meta {
  flex: 1;
  min-width: 0;
  font-size: 11px;
}

.manage-group-footer {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.manage-group-add-row button {
  margin-left: auto;
}

.chat-bubble-sender {
  font-size: 10px;
  font-weight: bold;
  margin-bottom: 2px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.conv-item-name .group-tag {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: normal;
  margin-left: 4px;
}

.conversation-list {
  list-style: none;
  overflow: visible;
  flex: 0 0 auto;
  min-height: 0;
  background: var(--bg-subtle);
  margin: 0;
  padding: 0;
}

.conv-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  color: var(--text-primary);
  background: transparent;
  border-left: 3px solid transparent;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.conv-item > .badge {
  flex-shrink: 0;
  margin-left: 2px;
}

.conv-item-menu-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted, #888);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  opacity: 0.55;
}

.conv-item:hover .conv-item-menu-btn,
.conv-item.active .conv-item-menu-btn,
.conv-item-menu-btn:focus-visible {
  opacity: 1;
  border-color: var(--border-light, #333);
  background: var(--bg-box, #1f1f1f);
}

.conv-item-menu-btn:hover {
  color: var(--text-primary, #fff);
}

@media (hover: none) and (pointer: coarse) {
  .conv-item-menu-btn {
    display: none;
  }
}

.conv-context-menu {
  position: fixed;
  z-index: 11500;
  min-width: 170px;
  max-width: min(260px, calc(100vw - 16px));
  display: none;
  flex-direction: column;
  background: var(--bg-box, #1a1a1a);
  border: 1px solid var(--border-medium, #444);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  border-radius: 3px;
  padding: 4px 0;
}

.conv-context-menu .conv-context-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text-primary, #eee);
  font: inherit;
  font-size: 12px;
  padding: 9px 12px;
  cursor: pointer;
}

.conv-context-menu .conv-context-item:hover,
.conv-context-menu .conv-context-item:focus-visible {
  background: var(--bg-box-header, #2a2a2a);
  outline: none;
}

.conv-context-menu .chat-delete-btn {
  color: #c66;
}

html[data-theme="light"] .conv-context-menu {
  background: #fff;
  border-color: #bbb;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .conv-context-menu .conv-context-item:hover,
html[data-theme="light"] .conv-context-menu .conv-context-item:focus-visible {
  background: #f0f0f0;
}

.conv-item:hover {
  background-color: var(--bg-box-header);
}

.conv-item.active {
  background-color: var(--bg-box);
  border-left-color: var(--text-primary);
}

.conv-item.is-unread {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: #ffffff;
}

.conv-item.is-unread:hover {
  background: rgba(255, 255, 255, 0.12);
}

.conv-item.is-unread.active {
  background: rgba(255, 255, 255, 0.1);
  border-left-color: #ffffff;
}

html[data-theme="light"] .conv-item.is-unread {
  background: #ececec;
  border-left-color: #111111;
}

html[data-theme="light"] .conv-item.is-unread:hover {
  background: #e2e2e2;
}

html[data-theme="light"] .conv-item.is-unread.active {
  background: #e8e8e8;
  border-left-color: #111111;
}

.conv-item-meta {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
}

.conv-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.conv-item-name {
  font-weight: 500;
  font-size: 11px;
  color: var(--text-primary);
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-item.is-unread .conv-item-name {
  font-weight: 800;
}

.conv-item.is-unread .conv-item-preview {
  font-weight: 700;
  color: var(--text-primary);
}

.conv-item.is-unread .conv-item-time {
  font-weight: 700;
  color: var(--text-primary);
}

.conv-item-time {
  font-size: 9px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.conv-item-preview {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-main-panel {
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-box);
  color: var(--text-primary);
  height: 100%;
  max-height: 100%;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative;
}

.chat-header-bar {
  flex: 0 0 auto !important;
  background: var(--bg-subtle);
  color: var(--text-primary);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
}

.chat-partner-info,
button.chat-partner-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  min-width: 0;
  flex: 1;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  padding: 0;
  cursor: default;
}

button.chat-partner-info.is-profile-link {
  cursor: pointer;
}

button.chat-partner-info.is-profile-link:hover #chat-partner-name,
button.chat-partner-info.is-profile-link:focus-visible #chat-partner-name {
  text-decoration: underline;
}

button.chat-partner-info.is-profile-link:focus-visible {
  outline: 1px solid var(--text-primary, #fff);
  outline-offset: 2px;
}

.chat-header-actions {
  display: none;
}

.chat-dots-wrapper {
  flex-shrink: 0;
}

.chat-dots-menu {
  min-width: 160px;
  z-index: 80;
}

.chat-dots-menu .chat-delete-btn {
  color: #b33 !important;
}

.chat-dots-menu .chat-delete-btn:hover {
  background: #3a1515 !important;
  color: #ffb0b0 !important;
}

.chat-back-btn {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-right: 4px;
  border: 1px solid var(--border-medium, #555);
  background: var(--bg-box, #1f1f1f);
  color: var(--text-primary, #fff);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
}

.chat-back-btn:active {
  background: #333;
}

.chat-messages-scroll {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 12px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: #666 #1a1a1a;
}

.chat-messages-scroll > .chat-bubble.bubble-sent {
  align-self: flex-end;
  width: fit-content;
  max-width: 70%;
}

.chat-messages-scroll > .chat-bubble.bubble-received {
  align-self: flex-start;
  width: fit-content;
  max-width: 70%;
}

/* Custom scrollbars — messenger */
.chat-messages-scroll::-webkit-scrollbar,
.conversation-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.chat-messages-scroll::-webkit-scrollbar-track,
.conversation-list::-webkit-scrollbar-track {
  background: #141414;
  border-left: 1px solid #333;
}

.chat-messages-scroll::-webkit-scrollbar-thumb,
.conversation-list::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #555 0%, #333 100%);
  border: 1px solid #777;
  border-radius: 0;
  min-height: 32px;
}

.chat-messages-scroll::-webkit-scrollbar-thumb:hover,
.conversation-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #777 0%, #444 100%);
  border-color: #999;
}

.chat-messages-scroll::-webkit-scrollbar-corner,
.conversation-list::-webkit-scrollbar-corner {
  background: #141414;
}

.conversation-list {
  scrollbar-width: thin;
  scrollbar-color: #666 #1a1a1a;
}

html[data-theme="light"] .chat-messages-scroll,
html[data-theme="light"] .conversation-list {
  scrollbar-color: #999 #e8e8e8;
}

html[data-theme="light"] .chat-messages-scroll::-webkit-scrollbar-track,
html[data-theme="light"] .conversation-list::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-left-color: #ccc;
}

html[data-theme="light"] .chat-messages-scroll::-webkit-scrollbar-thumb,
html[data-theme="light"] .conversation-list::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #ddd 0%, #bbb 100%);
  border-color: #999;
}

html[data-theme="light"] .chat-messages-scroll::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .conversation-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #ccc 0%, #999 100%);
}

.no-chat-selected {
  text-align: center;
  color: var(--text-muted);
  margin: 40px auto;
  font-size: 12px;
  padding: 20px;
  width: 100%;
}

.chat-thread-loading,
.profile-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 180px;
  width: 100%;
  padding: 28px 16px;
  color: var(--text-muted, #888);
  font-size: 12px;
  text-align: center;
}

.chat-thread-loading p,
.profile-loading-state p {
  margin: 0;
}

.chat-thread-spinner,
.app-boot-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid #444;
  border-top-color: #ddd;
  border-radius: 50%;
  animation: chat-spin 0.7s linear infinite;
}

html[data-theme="light"] .chat-thread-spinner,
html[data-theme="light"] .app-boot-spinner {
  border-color: #ccc;
  border-top-color: #222;
}

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

#app-boot-loading[hidden] {
  display: none !important;
}

.profile-view.is-profile-loading .profile-hero-avatar {
  opacity: 0.35;
  filter: grayscale(0.4);
}

.profile-view.is-profile-loading #profile-actions-bar,
.profile-view.is-profile-loading #profile-featured-box,
.profile-view.is-profile-loading #profile-gallery-box,
.profile-view.is-profile-loading #profile-pinned-playlist-box,
.profile-view.is-profile-loading #profile-created-songs-box,
.profile-view.is-profile-loading #profile-created-beats-box,
.profile-view.is-profile-loading #profile-created-albums-box,
.profile-view.is-profile-loading #profile-completion-box,
.profile-view.is-profile-loading #profile-analytics-panel,
.profile-view.is-profile-loading #profile-archived-panel {
  display: none !important;
}

.conversations-list.is-chat-loading {
  pointer-events: none;
  opacity: 0.55;
}

body.chat-is-loading .conversation-sidebar {
  cursor: wait;
}

html[data-theme="light"] .chat-thread-spinner {
  border-color: #ccc;
  border-top-color: #333;
}

.chat-bubble {
  position: relative;
  max-width: 70%;
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.4;
  word-break: break-word;
  flex-shrink: 0;
  will-change: transform;
  touch-action: pan-y;
}

.chat-like-msg-btn,
.fb-popup-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
  padding: 0 2px;
  font: inherit;
  font-size: 10px;
}

.chat-like-msg-btn:hover,
.fb-popup-like-btn:hover {
  opacity: 1;
}

.chat-like-msg-btn.liked {
  opacity: 1;
  color: #e25555;
}

.fb-popup-like-btn.liked {
  opacity: 1;
  color: #fff;
}

.chat-like-count[hidden] {
  display: none !important;
}

.like-heart-burst {
  position: fixed;
  left: 0;
  top: 0;
  width: 28px;
  height: 26px;
  transform: translate(-50%, -50%) scale(0.75);
  pointer-events: none;
  z-index: 2147483000;
  opacity: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  will-change: transform, opacity;
}

.like-heart-burst.is-visible {
  animation: pixel-heart-pop 0.6s steps(5, end) forwards;
}

.pixel-heart {
  display: block;
  width: 26px;
  height: 24px;
  overflow: visible;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Se queda centrado en el click; solo escala (sin subir y cortarse) */
@keyframes pixel-heart-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.92);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

.chat-swipe-reply-icon {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%) scale(0.6);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  color: #cfcfcf;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.chat-bubble.is-swiping .chat-swipe-reply-icon {
  opacity: 0.55;
}

.chat-bubble.swipe-armed .chat-swipe-reply-icon {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  color: #ffffff;
}

.chat-reply-quote {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 5px 7px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 3px solid #c9a227;
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
}

.chat-bubble.bubble-received .chat-reply-quote {
  border-color: rgba(0, 0, 0, 0.15);
  border-left-color: #8a7020;
  background: rgba(0, 0, 0, 0.06);
}

.chat-reply-quote-name {
  display: block;
  font-size: 9px;
  font-weight: bold;
  margin-bottom: 2px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-reply-quote-text {
  display: block;
  font-size: 10px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-reply-quote:hover {
  filter: brightness(1.08);
}

.chat-reply-msg-btn,
.chat-report-msg-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 9px;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
  text-decoration: underline;
}

.chat-reply-msg-btn:hover,
.chat-report-msg-btn:hover {
  opacity: 1;
}

.chat-reply-preview {
  display: none;
  align-items: stretch;
  gap: 8px;
  margin: 0 8px 6px;
  padding: 7px 8px;
  border: 1px solid #444;
  background: #1c1c1c;
  border-radius: 2px;
}

.chat-reply-preview-bar {
  width: 3px;
  background: #c9a227;
  flex-shrink: 0;
  border-radius: 1px;
}

.chat-reply-preview-body {
  flex: 1;
  min-width: 0;
}

.chat-reply-preview-label {
  font-size: 10px;
  color: #ddd;
  margin-bottom: 2px;
}

.chat-reply-preview-text {
  font-size: 10px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-reply-cancel-btn {
  align-self: center;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}

.chat-bubble-flash {
  animation: chat-bubble-flash 1.2s ease;
}

@keyframes chat-bubble-flash {
  0% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.0); }
  20% { box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.0); }
}

html[data-theme="light"] .chat-reply-preview {
  background: #f3f3f3;
  border-color: #bbb;
}

html[data-theme="light"] .chat-reply-preview-label {
  color: #222;
}

html[data-theme="light"] .chat-reply-preview-text {
  color: #666;
}

html[data-theme="light"] .chat-swipe-reply-icon {
  color: #444;
}

html[data-theme="light"] .chat-bubble.swipe-armed .chat-swipe-reply-icon {
  color: #111;
}

.chat-bubble.bubble-sent {
  align-self: flex-end;
  background-color: #2a2a2a;
  color: #ffffff;
  border: 1px solid #555555;
}

.chat-bubble.bubble-received {
  align-self: flex-start;
  background-color: var(--bg-subtle);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
}

.chat-bubble-media {
  margin-top: 6px;
}

.chat-bubble-media img {
  max-height: 180px;
  border: 1px solid #444;
}

.chat-bubble-media audio {
  width: 220px;
}

.bubble-meta {
  font-size: 9px;
  margin-top: 3px;
  opacity: 0.7;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.chat-composer-wrapper {
  flex: 0 0 auto !important;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-medium);
  color: var(--text-primary);
  position: relative;
  z-index: 5;
  box-shadow: 0 -1px 0 var(--border-light);
  min-height: 0;
}

.chat-attached-preview {
  padding: 4px 8px;
  background: var(--bg-box-header);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-primary);
}

.chat-voice-recording-bar {
  padding: 6px 10px;
  background: #222222;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.recording-dot {
  color: #ff3333;
  animation: pulseDot 1s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.chat-composer-bar {
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-composer-bar input[type="text"] {
  flex: 1;
}

/* ==========================================================================
   POST ANALYTICS VIEW
   ========================================================================== */
.analytics-post-preview {
  margin-bottom: 16px;
}

.analytics-section {
  margin-top: 16px;
  border-top: 1px solid #ddd;
  padding-top: 12px;
}

.analytics-section h4 {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 8px;
}

.analytics-users-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.analytics-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  background: #f9f9f9;
  border: 1px solid #e0e0e0;
  min-width: 0;
}

.analytics-user-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.analytics-user-info {
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.analytics-user-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.analytics-user-handle {
  flex-shrink: 0;
  white-space: nowrap;
}

.analytics-user-time {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ==========================================================================
   TOP OYENTES (canción / beat / álbum)
   ========================================================================== */
.top-listeners-box {
  background: #141414;
  border: 1px solid #2e2e2e;
}

.top-listeners-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.top-listener-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  min-width: 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.top-listener-row:hover {
  background: #222222;
  border-color: #3a3a3a;
}

.top-listener-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.top-listener-rank {
  flex-shrink: 0;
  width: 18px;
  font-size: 11px;
  font-weight: bold;
  color: #888888;
  text-align: center;
}

.top-listener-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #444444;
  background: #111111;
  flex-shrink: 0;
}

.top-listener-info {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.top-listener-name {
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-listener-handle {
  font-size: 10px;
  color: #888888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-listener-plays {
  flex-shrink: 0;
  font-size: 11px;
  color: #aaaaaa;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

html[data-theme="light"] .top-listeners-box {
  background: #ffffff !important;
  border-color: #c8c8c8 !important;
}

html[data-theme="light"] .top-listener-row {
  background: #f7f7f7;
  border-color: #e0e0e0;
}

html[data-theme="light"] .top-listener-row:hover {
  background: #eeeeee;
  border-color: #cccccc;
}

html[data-theme="light"] .top-listener-name {
  color: #111111;
}

html[data-theme="light"] .top-listener-avatar {
  border-color: #c8c8c8;
  background: #f0f0f0;
}

html[data-theme="light"] .top-listener-plays {
  color: #555555;
}

/* ==========================================================================
   GLOBAL AUDIO PLAYER (PERSISTENTE EN EL BOTTOM)
   ========================================================================== */
/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.luxuria-player-bar,
#luxuria-global-player.luxuria-player-bar {
  --seek: 0%;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 78px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 28%),
    linear-gradient(to bottom, #2a2a2a 0%, #141414 100%);
  border-top: 2px solid #000000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 -10px 28px rgba(0, 0, 0, 0.5);
  z-index: 9500;
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 8px 16px 6px;
  color: #ffffff;
  font-family: var(--font-retro);
  box-sizing: border-box;
  overflow: visible;
}

.luxuria-player-bar::before,
#luxuria-global-player.luxuria-player-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: var(--seek);
  background: linear-gradient(90deg, #8a8a8a, #ffffff);
  pointer-events: none;
  z-index: 4;
  transition: width 0.15s linear;
}

.luxuria-player-bar.is-open,
#luxuria-global-player.luxuria-player-bar.is-open {
  display: grid !important;
}

.luxuria-player-bar.is-live::before {
  width: 100%;
  opacity: 0.85;
  animation: player-live-rail 1.6s ease-in-out infinite;
}

@keyframes player-live-rail {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.35; }
}

.player-info-section,
#luxuria-global-player .player-info-section {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.player-cover-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.player-cover-art {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 1px solid #666666;
  border-radius: 2px;
  flex-shrink: 0;
  background: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.player-eq {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 14px;
  display: none;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.luxuria-player-bar.is-playing .player-eq {
  display: flex;
}

.player-eq i {
  display: block;
  width: 3px;
  height: 30%;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  transform-origin: bottom;
  animation: player-eq 0.85s ease-in-out infinite;
}

.player-eq i:nth-child(2) { animation-delay: 0.12s; }
.player-eq i:nth-child(3) { animation-delay: 0.28s; }
.player-eq i:nth-child(4) { animation-delay: 0.05s; }

@keyframes player-eq {
  0%, 100% { height: 25%; }
  50% { height: 100%; }
}

.player-live-badge {
  display: none;
  align-items: center;
  gap: 5px;
  width: fit-content;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #111111;
  background: #f2f2f2;
  padding: 1px 5px;
  margin-bottom: 1px;
}

.player-live-badge:not([hidden]) {
  display: inline-flex;
}

.player-live-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #111;
  animation: player-live-rail 1.2s ease-in-out infinite;
}

.player-artist-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.player-queue-pos {
  flex-shrink: 0;
  font-size: 9px;
  color: #888888;
  font-variant-numeric: tabular-nums;
}

.player-meta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  gap: 1px;
  flex: 1;
}

.player-track-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.player-track-actions .player-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  color: #bbbbbb;
}

.player-track-actions .player-btn:hover {
  color: #ffffff;
  background: #333333;
  border: none;
}

.player-dots-wrapper {
  position: relative;
  display: inline-flex;
  z-index: 5;
  overflow: visible;
}

.song-title-link {
  cursor: pointer;
  color: inherit;
}

.song-title-link:hover {
  text-decoration: underline;
  color: var(--text-link-hover);
}

.player-track-title {
  font-weight: bold;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffffff;
  cursor: pointer;
  line-height: 1.3;
}

.player-track-title:hover {
  text-decoration: underline;
}

.player-track-artist {
  font-size: 10px;
  color: #aaaaaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.player-track-time {
  font-size: 10px;
  color: #888888;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 36px;
  flex-shrink: 0;
  line-height: 1;
}

#player-time-current {
  text-align: right;
}

#player-time-duration {
  text-align: left;
}

.player-controls-section,
#luxuria-global-player .player-controls-section {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  z-index: 1;
  pointer-events: auto;
  box-sizing: border-box;
}

.player-controls-section > *,
#luxuria-global-player .player-controls-section > * {
  pointer-events: auto;
}

.player-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.player-seek-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.player-seek-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 16px;
  display: flex;
  align-items: center;
}

.player-seek-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: #333333;
  border: 1px solid #111111;
  pointer-events: none;
  overflow: hidden;
}

.player-seek-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #c8c8c8, #ffffff);
}

.player-btn {
  background: #2a2a2a;
  border: 1px solid #555555;
  color: #eeeeee;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: inherit;
}

.player-btn:hover {
  background: #3a3a3a;
  border-color: #777777;
  color: #ffffff;
}

.player-btn:active {
  background: #222222;
}

.player-btn-skip {
  width: 30px;
  height: 28px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: #cccccc;
}

.player-btn-skip:hover {
  background: #2e2e2e;
  border-color: #2e2e2e;
  color: #ffffff;
}

.player-btn-main {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: #f3f3f3;
  border: 1px solid #ffffff;
  color: #111111;
  box-shadow: 0 1px 0 #000000, 0 4px 12px rgba(0, 0, 0, 0.4);
}

.player-btn-main:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

.player-btn-main:active {
  transform: scale(0.96);
}

.player-btn.is-on,
#player-btn-shuffle.is-on,
#player-btn-repeat.is-on,
#player-btn-video.is-active,
#player-btn-queue[aria-expanded="true"] {
  color: #111111 !important;
  background: #f2f2f2 !important;
  border-color: #f2f2f2 !important;
}

.player-seek,
.player-volume {
  flex: 1;
  min-width: 0;
  height: 16px;
  cursor: pointer;
  accent-color: #ffffff;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  margin: 0;
  position: relative;
  z-index: 1;
}

.player-seek::-webkit-slider-runnable-track,
.player-volume::-webkit-slider-runnable-track {
  height: 3px;
  background: transparent;
  border: none;
}

.player-volume::-webkit-slider-runnable-track {
  background: #333333;
  border: 1px solid #111111;
}

.player-seek::-webkit-slider-thumb,
.player-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  margin-top: -4.5px;
  border-radius: 1px;
  background: linear-gradient(to bottom, #f0f0f0 0%, #c8c8c8 100%);
  border: 1px solid #888888;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.player-seek::-moz-range-track,
.player-volume::-moz-range-track {
  height: 3px;
  background: transparent;
  border: none;
}

.player-volume::-moz-range-track {
  background: #333333;
  border: 1px solid #111111;
}

.player-seek::-moz-range-thumb,
.player-volume::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 1px;
  background: linear-gradient(to bottom, #f0f0f0 0%, #c8c8c8 100%);
  border: 1px solid #888888;
}

.player-volume-section,
#luxuria-global-player .player-volume-section {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  margin-left: 0;
  position: relative;
  z-index: 2;
}

/* Queue panel must never participate in flex layout */
#luxuria-global-player #player-queue-panel,
#luxuria-global-player .player-queue-panel {
  position: absolute !important;
  flex: none !important;
}

.player-volume-cluster {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.player-volume {
  flex: 0 0 78px;
  width: 78px;
}

.player-btn-close {
  background: none;
  border: none;
  color: #888888;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  font-family: inherit;
}

.player-btn-close:hover {
  color: #ffffff;
}

#player-btn-fullscreen {
  padding: 3px 7px;
  font-size: 13px;
  background: transparent;
  border-color: transparent;
  color: #bbbbbb;
}

#player-btn-fullscreen:hover,
#player-btn-queue:hover,
#player-btn-video:hover {
  color: #ffffff;
}

#player-btn-queue,
#player-btn-video {
  background: transparent;
  border-color: transparent;
  color: #bbbbbb;
  padding: 3px 7px;
}

#player-btn-video.is-active {
  color: #ffffff;
}

/* ==========================================================================
   LIGHTBOX MODAL
   ========================================================================== */
.lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
}

.lightbox-content-box {
  position: relative;
  background: #111111;
  border: 2px solid #555555;
  box-shadow: 0 4px 20px rgba(0,0,0,0.8);
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  z-index: 10001;
}

.lightbox-header {
  background: #222222;
  color: #ffffff;
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  border-bottom: 1px solid #444;
}

.lightbox-close-btn {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
}

.lightbox-media-slot {
  padding: 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lightbox-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 12px 12px;
  border-top: 1px solid #333;
  padding-top: 10px;
}

.lightbox-media-slot img {
  max-height: 75vh;
  max-width: 85vw;
  object-fit: contain;
}

.lightbox-media-slot video {
  max-height: 75vh;
  max-width: 85vw;
}

.lightbox-media-slot .lightbox-zoom-stage {
  width: 100%;
}

/* ==========================================================================
   FLOATING MESSAGE POPUP (chat cuadrado estilo 2000s)
   ========================================================================== */
.retro-fb-popup {
  position: fixed;
  bottom: 76px;
  right: 20px;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: #1a1a1a;
  color: #f2f2f2;
  border: 2px solid #000;
  outline: 1px solid #666;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  z-index: 9600;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0;
}

.retro-fb-popup.is-entering {
  animation: fbPopupEnter 0.18s steps(4, end) both;
}

@keyframes fbPopupEnter {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

.retro-fb-popup.is-minimized {
  width: 250px;
}

.retro-fb-popup.is-minimized .fb-popup-body {
  display: none;
}

.fb-popup-header {
  background: linear-gradient(to bottom, #3a3a3a 0%, #222 55%, #1a1a1a 100%);
  color: #fff;
  padding: 6px 6px 6px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  cursor: default;
  user-select: none;
}

.fb-popup-partner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.fb-popup-partner:hover .fb-popup-sender-name {
  text-decoration: underline;
}

.fb-popup-avatar {
  width: 28px;
  height: 28px;
  border-radius: 0;
  object-fit: cover;
  border: 1px solid #888;
  background: #111;
  flex-shrink: 0;
  image-rendering: auto;
}

.fb-popup-partner-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0;
}

.fb-popup-sender-name {
  font-weight: bold;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb-popup-sender-handle {
  font-size: 9px;
  color: #bdbdbd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb-popup-header-controls {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.fb-popup-ctrl {
  background: linear-gradient(to bottom, #4a4a4a, #2a2a2a);
  border: 1px solid #111;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.18), inset -1px -1px 0 rgba(0,0,0,0.35);
  color: #fff;
  width: 22px;
  height: 20px;
  border-radius: 0;
  font-size: 12px;
  font-family: Tahoma, Verdana, sans-serif;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.fb-popup-ctrl:hover {
  background: linear-gradient(to bottom, #5a5a5a, #333);
}

.fb-popup-ctrl:active {
  background: #222;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.5);
}

.fb-popup-ctrl-close:hover {
  background: linear-gradient(to bottom, #666, #333);
  border-color: #111;
}

.fb-popup-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.fb-popup-scrollable-body {
  height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  background: #121212;
  border-top: 1px solid #333;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: #666 #1a1a1a;
  touch-action: pan-y;
}

.fb-popup-scrollable-body::-webkit-scrollbar {
  width: 12px;
}

.fb-popup-scrollable-body::-webkit-scrollbar-track {
  background: #1a1a1a;
  border-left: 1px solid #333;
}

.fb-popup-scrollable-body::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #555, #333);
  border: 1px solid #777;
}

.fb-popup-empty {
  margin: auto;
  text-align: center;
  color: #999;
  font-size: 11px;
  padding: 20px 12px;
}

.fb-popup-bubble {
  position: relative;
  padding: 6px 8px;
  border-radius: 0;
  font-size: 11px;
  line-height: 1.4;
  max-width: 86%;
  word-break: break-word;
  flex-shrink: 0;
  will-change: transform;
  touch-action: pan-y;
}

.fb-popup-bubble.is-appearing {
  animation: fbBubbleIn 0.14s steps(3, end) both;
}

@keyframes fbBubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.fb-popup-bubble.sent {
  align-self: flex-end;
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #555;
}

.fb-popup-bubble.received {
  align-self: flex-start;
  background: #242424;
  color: #f2f2f2;
  border: 1px solid #3d3d3d;
}

.fb-popup-bubble .meta {
  font-size: 8px;
  opacity: 0.7;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.fb-popup-bubble .bubble-text a,
.fb-popup-bubble .post-mention-tag {
  color: #ddd;
  text-decoration: underline;
}

.fb-popup-reply-quote {
  display: block;
  width: 100%;
  margin: 0 0 5px;
  padding: 4px 6px;
  text-align: left;
  border: 1px solid #555;
  border-left: 3px solid #aaa;
  background: #111;
  color: inherit;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
}

.fb-popup-reply-quote-name {
  display: block;
  font-size: 9px;
  font-weight: bold;
  margin-bottom: 1px;
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb-popup-reply-quote-text {
  display: block;
  font-size: 10px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb-popup-reply-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 8px;
  color: inherit;
  opacity: 0.8;
  cursor: pointer;
  text-decoration: underline;
}

.fb-popup-media-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 2px 5px;
  border: 1px solid #555;
  background: #111;
  font-size: 10px;
  border-radius: 0;
}

.fb-popup-media-thumb {
  display: block;
  max-width: 160px;
  max-height: 110px;
  margin-top: 4px;
  border: 1px solid #555;
  border-radius: 0;
  cursor: pointer;
  object-fit: cover;
}

.fb-popup-swipe-icon {
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%) scale(0.7);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  color: #ddd;
  pointer-events: none;
  transition: opacity 0.1s linear;
}

.fb-popup-bubble.is-swiping .fb-popup-swipe-icon {
  opacity: 0.55;
}

.fb-popup-bubble.swipe-armed .fb-popup-swipe-icon {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  color: #fff;
}

.fb-popup-bubble-flash {
  animation: chat-bubble-flash 1.2s ease;
}

.fb-popup-reply-preview {
  display: none;
  align-items: stretch;
  gap: 8px;
  padding: 6px 8px;
  border-top: 1px solid #3a3a3a;
  background: #1f1f1f;
}

.fb-popup-reply-preview-bar {
  width: 3px;
  background: #888;
  border-radius: 0;
  flex-shrink: 0;
}

.fb-popup-reply-preview-body {
  flex: 1;
  min-width: 0;
}

.fb-popup-reply-preview-label {
  font-size: 10px;
  color: #ddd;
  margin-bottom: 2px;
}

.fb-popup-reply-preview-text {
  font-size: 10px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb-popup-reply-cancel {
  align-self: center;
  background: #2a2a2a;
  border: 1px solid #555;
  color: #ccc;
  width: 20px;
  height: 20px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
}

.fb-popup-footer {
  padding: 7px;
  background: #1c1c1c;
  border-top: 1px solid #3a3a3a;
  display: flex;
  gap: 6px;
  align-items: center;
}

.fb-popup-footer input {
  flex: 1;
  min-width: 0;
  border: 1px solid #555;
  background: #0e0e0e;
  color: #f2f2f2;
  padding: 6px 7px;
  font-size: 11px;
  border-radius: 0;
  box-shadow: inset 1px 1px 0 #000;
}

.fb-popup-footer input:focus {
  outline: none;
  border-color: #888;
  background: #111;
}

.fb-popup-send-btn {
  border: 1px solid #111;
  background: linear-gradient(to bottom, #4a4a4a, #222);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.15), inset -1px -1px 0 rgba(0,0,0,0.4);
}

.fb-popup-send-btn:hover {
  background: linear-gradient(to bottom, #5a5a5a, #2e2e2e);
}

.fb-popup-send-btn:active {
  background: #222;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.5);
}

.fb-popup-send-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

html[data-theme="light"] .retro-fb-popup {
  background: #f2f2f2;
  color: #111;
  border-color: #000;
  outline-color: #bbb;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.22);
}

html[data-theme="light"] .fb-popup-header {
  background: linear-gradient(to bottom, #3a3a3a 0%, #222 55%, #1a1a1a 100%);
  color: #fff;
  border-bottom-color: #000;
}

html[data-theme="light"] .fb-popup-ctrl {
  background: linear-gradient(to bottom, #4a4a4a, #2a2a2a);
  border-color: #111;
}

html[data-theme="light"] .fb-popup-scrollable-body {
  background: #fff;
  border-top-color: #999;
}

html[data-theme="light"] .fb-popup-bubble.sent {
  background: #e8e8e8;
  color: #111;
  border-color: #999;
}

html[data-theme="light"] .fb-popup-bubble.received {
  background: #f5f5f5;
  color: #111;
  border-color: #bbb;
}

html[data-theme="light"] .fb-popup-bubble .bubble-text a,
html[data-theme="light"] .fb-popup-bubble .post-mention-tag {
  color: #111;
}

html[data-theme="light"] .fb-popup-reply-preview,
html[data-theme="light"] .fb-popup-footer {
  background: #ececec;
  border-top-color: #999;
}

html[data-theme="light"] .fb-popup-footer input {
  background: #fff;
  color: #111;
  border-color: #999;
  box-shadow: inset 1px 1px 0 #ccc;
}

html[data-theme="light"] .fb-popup-send-btn {
  background: linear-gradient(to bottom, #fff, #ddd);
  color: #111;
  border-color: #777;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #aaa;
}

html[data-theme="light"] .fb-popup-reply-preview-label {
  color: #222;
}

html[data-theme="light"] .fb-popup-reply-preview-text {
  color: #666;
}

html[data-theme="light"] .fb-popup-empty {
  color: #666;
}

html[data-theme="light"] .fb-popup-reply-quote {
  background: #f0f0f0;
  border-color: #bbb;
  border-left-color: #666;
}

html[data-theme="light"] .fb-popup-reply-quote-name {
  color: #222;
}

html[data-theme="light"] .fb-popup-reply-preview-bar {
  background: #666;
}

html[data-theme="light"] .fb-popup-like-btn.liked {
  color: #111;
}

@media (prefers-reduced-motion: reduce) {
  .player-eq i,
  .fs-visualizer .vbar,
  .luxuria-player-bar.is-live::before,
  .player-live-badge::before {
    animation: none !important;
  }
}

html.a11y-reduce-motion .player-eq i,
html.a11y-reduce-motion .fs-visualizer .vbar,
html.a11y-reduce-motion .luxuria-player-bar.is-live::before,
html.a11y-reduce-motion .player-live-badge::before {
  animation: none !important;
}

/* Responsive base */
@media (max-width: 800px) {
  .feed-layout-clean {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .left-sidebar {
    display: none; /* Avoid dead vertical space under the feed on narrow screens */
  }
  /* Keep "completar perfil" visible above the feed when the rest of the sidebar is hidden */
  .left-sidebar:has(#feed-profile-completion:not([hidden])) {
    display: flex;
    flex-direction: column;
    width: 100%;
    order: 0;
  }
  .left-sidebar:has(#feed-profile-completion:not([hidden])) > *:not(#feed-profile-completion) {
    display: none !important;
  }
  .center-feed {
    order: 1;
    width: 100%;
  }
  .fotolog-layout-grid {
    grid-template-columns: 1fr;
  }
  .customizer-split {
    grid-template-columns: 1fr;
  }
  .auth-split-wrapper {
    grid-template-columns: 1fr;
  }
  /* Messenger stacking for narrow tablets is handled in the ≤768 block
     (list OR chat). Do not force a 120px sidebar + chat here. */

  body.theme-bw.view-messages {
    /* zoom still 1.14 until 768px */
    height: calc(100dvh / 1.14) !important;
    max-height: calc(100dvh / 1.14) !important;
    min-height: 0 !important;
    padding-bottom: 74px !important;
  }

  body.view-messages .page-body {
    margin: 0 auto !important;
    padding-top: 6px !important;
  }
  .luxuria-player-bar {
    height: auto;
    min-height: 78px;
    padding: 8px 12px;
  }

  #luxuria-global-player .player-controls-section {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #luxuria-global-player .player-info-section,
  #luxuria-global-player .player-volume-section {
    min-width: 0;
  }
}

/* =============================================================================
   NEW FEATURES: TABS, PRIVACY, LIBRARY, ONLINE, CUSTOM VOICE PLAYER & MODAL
   ============================================================================= */

/* Edit Profile Tabs */
.retro-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 2px solid #333333;
  margin-bottom: 14px;
}

.retro-tab-btn {
  background: #1a1a1a;
  border: 1px solid #333333;
  border-bottom: none;
  color: #888888;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  transition: all 0.2s ease;
}

.retro-tab-btn:hover {
  background: #252525;
  color: #ffffff;
}

.retro-tab-btn.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* Privacy Settings */
.privacy-settings-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .privacy-settings-split {
    grid-template-columns: 1fr;
  }
}

.privacy-radio-card {
  background: #1a1a1a;
  border: 1px solid #333333;
  padding: 10px 12px;
  border-radius: 3px;
  color: #ffffff;
}

.privacy-radio-card strong {
  display: block;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: bold;
}

.privacy-radio-card .subtle-text {
  color: #b5b5b5 !important;
  font-size: 10px;
  line-height: 1.4;
}

.privacy-radio-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  color: #ffffff;
}

.privacy-radio-label input[type="radio"] {
  margin-top: 3px;
  accent-color: #ffffff;
}

.privacy-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Security Settings */
.security-settings-layout {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.security-intro {
  margin: 0 0 12px 0;
  font-size: 11px;
  line-height: 1.45;
}

.security-cooldown-msg {
  color: #c9a227;
  font-weight: bold;
}

.security-form .form-group input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.security-form .retro-btn-accent:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.retro-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  cursor: pointer;
  color: #222222;
  font-weight: 500;
}

.retro-check-label input[type="checkbox"] {
  accent-color: #000000;
}

/* Pending Follow Requests List */
.pending-requests-list {
  max-height: 280px;
  overflow-y: auto;
  background: #ffffff;
}

.pending-request-item,
.pending-req-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e2e2;
  gap: 8px;
  background: #ffffff;
  color: #111111;
}

.pending-request-user,
.pending-req-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.pending-request-avatar,
.pending-req-avatar {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid #999999;
}

.pending-request-name,
.pending-req-name {
  font-size: 11px;
  font-weight: bold;
  color: #111111 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pending-request-handle,
.pending-req-username {
  font-size: 10px;
  color: #666666 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pending-request-actions,
.pending-req-actions {
  display: flex;
  gap: 4px;
}

/* Banner variant on profile page */
.pending-requests-profile-banner {
  background: #181818 !important;
  border: 1px solid #444444 !important;
}

.pending-requests-profile-banner .pending-requests-list {
  background: #181818 !important;
}

.pending-requests-profile-banner .pending-request-item {
  background: #1c1c1c !important;
  border-bottom: 1px solid #333333 !important;
  color: #ffffff !important;
}

.pending-requests-profile-banner .pending-request-name {
  color: #ffffff !important;
}

.pending-requests-profile-banner .pending-request-handle {
  color: #aaaaaa !important;
}

/* Profile Header Followers & Following Badges */
.profile-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-stats-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.stat-badge-link,
.stat-badge-static {
  background: #252525;
  border: 1px solid #444444;
  color: #cccccc;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.stat-badge-link {
  cursor: pointer;
}

.stat-badge-static {
  cursor: default;
  display: inline-block;
}

.stat-badge-link:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.profile-wall-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.profile-wall-header h3 {
  margin: 0;
  line-height: 1.2;
}

.profile-post-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: auto;
}

.profile-post-filter-btn {
  background: linear-gradient(to bottom, #333 0%, #222 100%);
  border: 1px solid #555;
  color: #ddd;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: inherit;
}

.profile-post-filter-btn:hover {
  border-color: #888;
  color: #fff;
}

.profile-post-filter-btn.active {
  background: linear-gradient(to bottom, #555 0%, #333 100%);
  border-color: #aaa;
  color: #fff;
}

.stat-dot-sep {
  color: #666666;
  font-size: 10px;
}

/* Private Profile Lock Card */
.private-account-lock-box {
  padding: 30px 20px;
  text-align: center;
  background: #141414;
  border: 1px dashed #444444;
}

.private-lock-inner svg {
  margin-bottom: 8px;
  color: #888888;
}

.private-lock-inner h3 {
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 6px;
}

.private-lock-inner p {
  font-size: 11px;
  color: #888888;
  max-width: 320px;
  margin: 0 auto;
}

/* ==========================================================================
   RADIO LUXURIA (FEED SIDEBAR) — compacto
   ========================================================================== */
.upload-cover-terms {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 12px;
  padding: 8px 10px;
  border: 1px solid #333;
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px;
  line-height: 1.35;
  color: #bbb;
  cursor: pointer;
}

.upload-cover-terms input {
  margin-top: 2px;
  flex-shrink: 0;
}

.upload-cover-terms a {
  color: #ddd;
  text-decoration: underline;
}

.terms-page-wrap {
  max-width: 720px;
  margin: 16px auto 40px;
  padding: 0 12px;
}

.terms-box .terms-content {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary, #ccc);
}

.terms-box .terms-content h4 {
  margin: 18px 0 8px;
  font-size: 13px;
  color: var(--text-primary, #fff);
}

.terms-box .terms-content p,
.terms-box .terms-content ul {
  margin: 0 0 10px;
  color: inherit;
}

.terms-box .terms-content ul {
  padding-left: 1.2em;
}

.terms-box .terms-content li {
  margin-bottom: 4px;
}

.terms-box .terms-content a {
  color: var(--text-link, #eee);
  text-decoration: underline;
}

.terms-box .terms-content strong {
  color: var(--text-primary, #fff);
}

.terms-back-row {
  margin-top: 20px !important;
}

html[data-theme="light"] #terms-view .terms-box {
  background: #ffffff;
  border-color: #222;
  color: #111;
}

html[data-theme="light"] #terms-view .terms-box .retro-box-header {
  background: #f2f2f2;
  color: #111;
  border-bottom: 1px solid #ccc;
}

html[data-theme="light"] #terms-view .terms-box .retro-box-header h3,
html[data-theme="light"] #terms-view .terms-box .retro-box-header .subtle-text {
  color: #111;
}

html[data-theme="light"] #terms-view .terms-box .terms-content,
html[data-theme="light"] #terms-view .terms-box .terms-content p,
html[data-theme="light"] #terms-view .terms-box .terms-content li {
  color: #222;
}

html[data-theme="light"] #terms-view .terms-box .terms-content h4,
html[data-theme="light"] #terms-view .terms-box .terms-content strong {
  color: #111;
}

html[data-theme="light"] #terms-view .terms-box .terms-content a {
  color: #111;
}

html[data-theme="light"] #terms-view .auth-hero-banner {
  background: linear-gradient(135deg, #222 0%, #444 100%);
  color: #fff;
}

html[data-theme="light"] #terms-view .auth-hero-banner .tagline {
  color: #e6e6e6;
}

/* Controles de cola / skip ocultos durante transmisión en vivo */
body.radio-live-playing #player-btn-rw,
body.radio-live-playing #player-btn-ff,
body.radio-live-playing #player-btn-shuffle,
body.radio-live-playing #player-btn-repeat,
body.radio-live-playing #player-btn-queue,
body.radio-live-playing #player-queue-pos,
body.radio-live-playing #fs-btn-prev,
body.radio-live-playing #fs-btn-next,
body.radio-live-playing #fs-btn-shuffle,
body.radio-live-playing #fs-btn-repeat {
  display: none !important;
}

body.radio-live-playing #player-queue-panel {
  display: none !important;
}

body.radio-live-playing #player-seek-slider.is-radio-locked,
body.radio-live-playing #fs-seek-slider.is-radio-locked {
  pointer-events: none;
  opacity: 0.85;
  cursor: default;
}

.featured-events-box {
  margin-bottom: 10px;
  background: #141414;
  border: 1px solid #2e2e2e;
}

.featured-events-list {
  display: flex;
  flex-direction: column;
}

.featured-event-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #202020;
  text-decoration: none;
  color: inherit;
  min-height: 52px;
}

.featured-event-item:last-child {
  border-bottom: none;
}

.featured-event-item:hover {
  background: #1e1e1e;
}

.featured-event-thumb {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: #1a1a1a center / cover no-repeat;
  border: 1px solid #333;
}

.featured-event-thumb-empty {
  background: transparent;
  border-style: dashed;
  border-color: #555;
}

.featured-event-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.featured-event-title {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-event-sub,
.featured-event-when {
  font-size: 10px;
  color: #9a9a9a;
  line-height: 1.3;
}

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

.featured-event-when {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.featured-event-empty .featured-event-title {
  font-weight: 600;
  color: #c8c8c8;
}

.radio-luxuria-box {
  margin-top: 10px;
  background: #141414;
  border: 1px solid #2e2e2e;
}

.radio-header-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.radio-header-ico {
  display: inline-flex;
  width: 11px;
  height: 11px;
  color: #aaaaaa;
}

.radio-header-ico .lux-ico {
  display: block;
}

.radio-live-badge {
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.06em;
  color: #888888;
}

.radio-luxuria-box.is-live:not(.is-paused) .radio-live-badge {
  color: #dddddd;
  animation: radio-live-pulse 1.4s ease-in-out infinite;
}

@keyframes radio-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.radio-luxuria-body {
  padding: 8px 10px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.radio-luxuria-body--play-only {
  justify-content: center;
  padding: 10px !important;
}

.radio-luxuria-body--play-only .radio-controls {
  justify-content: center;
}

.radio-luxuria-body--play-only .radio-play-btn {
  width: 36px;
  height: 36px;
}

.radio-cover-wrap {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.radio-cover {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 1px solid #444444;
  background: #0d0d0d;
  border-radius: 2px;
  display: block;
}

.radio-luxuria-box.is-live:not(.is-paused) .radio-cover {
  border-radius: 50%;
  animation: radio-spin 12s linear infinite;
}

.radio-luxuria-box.is-live.is-paused .radio-cover {
  border-radius: 50%;
}

@keyframes radio-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.radio-eq {
  position: absolute;
  bottom: 2px;
  right: 2px;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 9px;
  background: rgba(0, 0, 0, 0.75);
  padding: 1px 2px;
  border-radius: 1px;
}

.radio-eq span {
  width: 2px;
  background: #ffffff;
  animation: eq-pulse 0.7s infinite alternate ease-in-out;
}

.radio-eq span:nth-child(1) { height: 3px; animation-delay: 0.1s; }
.radio-eq span:nth-child(2) { height: 7px; animation-delay: 0.3s; }
.radio-eq span:nth-child(3) { height: 5px; animation-delay: 0.2s; }

.radio-meta {
  flex: 1;
  min-width: 0;
}

.radio-title {
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radio-artist {
  font-size: 9px;
  color: #888888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.radio-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.radio-ctrl-btn {
  background: #222222;
  border: 1px solid #444444;
  color: #ffffff;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.radio-ctrl-btn:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.radio-play-btn {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   MINI BIBLIOTECA (FEED SIDEBAR) - RETRO CASSETTE & VINYL DESIGN
   ========================================================================== */
.mini-library-box {
  margin-top: 10px;
  background: #141414;
  border: 1px solid #2e2e2e;
}

.mini-library-list {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mini-library-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid #202020;
  transition: all 0.15s ease;
  position: relative;
}

.mini-library-item:hover {
  background: #1e1e1e;
}

.mini-library-item.active-track {
  background: #252525;
  border-left: 3px solid #ffffff;
}

.mini-lib-cover-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.mini-lib-cover {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border: 1px solid #444444;
  background: #0d0d0d;
  border-radius: 2px;
  display: block;
}

.mini-lib-eq {
  position: absolute;
  bottom: 2px;
  right: 2px;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 10px;
  background: rgba(0, 0, 0, 0.75);
  padding: 1px 2px;
  border-radius: 1px;
}

.mini-lib-eq span {
  width: 2px;
  background: #ffffff;
  animation: eq-pulse 0.7s infinite alternate ease-in-out;
}

.mini-lib-eq span:nth-child(1) { height: 4px; animation-delay: 0.1s; }
.mini-lib-eq span:nth-child(2) { height: 8px; animation-delay: 0.3s; }
.mini-lib-eq span:nth-child(3) { height: 6px; animation-delay: 0.2s; }

@keyframes eq-pulse {
  0% { height: 2px; }
  100% { height: 9px; }
}

.mini-lib-info {
  flex: 1;
  min-width: 0;
}

.mini-lib-title {
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-lib-artist {
  font-size: 9px;
  color: #888888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.mini-lib-play-btn {
  background: #222222;
  border: 1px solid #444444;
  color: #ffffff;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  font-size: 9px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.mini-lib-play-btn:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  transform: scale(1.08);
}

.sidebar-library-footer {
  padding: 7px 10px;
  background: #111111;
  border-top: 1px solid #242424;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-lib-link {
  font-size: 10px;
  font-weight: bold;
  color: #cccccc;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sidebar-lib-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

.suggestions-box {
  margin-top: 12px;
}

.sidebar-ads-box {
  margin-top: 12px;
}

.sidebar-ads-body {
  min-height: 90px;
  overflow: hidden;
}

.sidebar-ads-body .adsbygoogle {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.suggestions-box-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.suggestions-hint {
  font-size: 10px;
  margin: 0;
}

.suggestions-box-body .retro-textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  font-size: 11px;
}

.suggestions-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.post-official-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #111;
  background: linear-gradient(to bottom, #e8e8e8, #cfcfcf);
  border: 1px solid #888;
  vertical-align: middle;
}

.admin-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f2a2a;
  background: linear-gradient(to bottom, #c8e8e6, #8fc4bf);
  border: 1px solid #4a7a75;
  vertical-align: middle;
  line-height: 1.3;
}

html[data-theme="dark"] .admin-badge {
  color: #d8f4f1;
  background: linear-gradient(to bottom, #3a5c58, #243e3b);
  border-color: #6a9a94;
}

.opt-admin-delete-btn,
.entity-opt-admin-delete-btn,
.entity-opt-admin-ban-btn,
.comment-admin-delete-btn {
  font-weight: 600;
}

html[data-theme="dark"] .post-official-badge {
  color: #f5f5f5;
  background: linear-gradient(to bottom, #444, #2a2a2a);
  border-color: #777;
}

.post-announce-badge {
  color: #2a2208;
  background: linear-gradient(to bottom, #f3e2a4, #d4b44a);
  border-color: #8a7020;
}

html[data-theme="dark"] .post-announce-badge {
  color: #2a2208;
  background: linear-gradient(to bottom, #f3e2a4, #d4b44a);
  border-color: #c9a227;
}

.post-everyone-tag {
  display: inline-block;
  background: #3a3010;
  color: #ffe7a3 !important;
  font-weight: bold;
  padding: 0 4px;
  border-radius: 2px;
  border: 1px solid #c9a227;
  text-decoration: none;
  margin: 0 2px;
  cursor: default;
}

.mention-everyone-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  color: #ffe7a3;
  background: #3a3010;
  border-color: #c9a227;
}

.post-role-tag {
  display: inline-block;
  background: #1e2a38;
  color: #a8d4ff !important;
  font-weight: bold;
  padding: 0 4px;
  border-radius: 2px;
  border: 1px solid #4a7aa8;
  text-decoration: none;
  margin: 0 2px;
  cursor: default;
}

.mention-role-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  color: #a8d4ff;
  background: #1e2a38;
  border-color: #4a7aa8;
}

.post-external-link {
  color: #5b9fd4;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px dotted rgba(91, 159, 212, 0.55);
  word-break: break-all;
}

.post-external-link:hover {
  color: #8ec8f0;
  text-decoration: none;
  border-bottom-color: #8ec8f0;
}

html[data-theme="light"] .post-external-link {
  color: #1a6fb5;
  border-bottom-color: rgba(26, 111, 181, 0.45);
}

html[data-theme="light"] .post-external-link:hover {
  color: #0d4f88;
  border-bottom-color: #0d4f88;
}

html[data-theme="dark"] .suggestions-box,
html[data-theme="dark"] .suggestions-box .retro-box-content {
  background: #1f1f1f;
  color: #f2f2f2;
}

/* ==========================================================================
   LIBRARY VIEW (/biblioteca) - RETRO VINYL ARCHIVE
   ========================================================================== */
.library-archive-box {
  position: relative;
  overflow: hidden;
  border-color: #3a3a3a;
  box-shadow:
    0 0 0 1px #0a0a0a,
    2px 2px 0 rgba(0, 0, 0, 0.35);
}

.library-archive-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image:
    repeating-linear-gradient(
      0deg,
      #fff 0,
      #fff 1px,
      transparent 1px,
      transparent 3px
    );
}

.library-archive-header {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid #1a1a1a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.library-archive-title-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.library-archive-eyebrow {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.18em;
  color: #888888;
  text-transform: uppercase;
}

.library-archive-header h2 {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.library-archive-content {
  position: relative;
  z-index: 1;
  padding: 0;
  background:
    linear-gradient(180deg, #1a1a1a 0%, #161616 40%, #141414 100%);
}

.library-archive-hero {
  position: relative;
  padding: 16px 14px 14px;
  border-bottom: 1px solid #2a2a2a;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 6px,
      rgba(255, 255, 255, 0.015) 6px,
      rgba(255, 255, 255, 0.015) 7px
    ),
    linear-gradient(135deg, #222 0%, #151515 55%, #101010 100%);
  overflow: hidden;
}

.library-archive-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 48%,
    transparent 100%
  );
  animation: lib-hero-sweep 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lib-hero-sweep {
  0%, 100% { transform: translateX(-40%); opacity: 0; }
  40% { opacity: 1; }
  70% { transform: translateX(40%); opacity: 0; }
}

.library-archive-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.library-hero-disc {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #1a1a1a 0 18%, transparent 19%),
    repeating-radial-gradient(
      circle at center,
      #2a2a2a 0 1px,
      #111 1px 3px
    );
  border: 1px solid #555;
  box-shadow:
    inset 0 0 0 1px #0a0a0a,
    0 0 0 3px #1c1c1c;
  animation: lib-disc-idle 14s linear infinite;
}

@keyframes lib-disc-idle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.library-hero-copy {
  min-width: 0;
}

.library-hero-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.22em;
  color: #aaaaaa;
  margin-bottom: 4px;
}

.library-hero-line {
  margin: 0;
  font-size: 12px;
  color: #d0d0d0;
  line-height: 1.35;
  max-width: 42em;
}

.library-playlists-container,
.library-songs-container {
  padding: 16px 14px 18px;
}

.library-playlists-container {
  border-bottom: 1px dashed #333;
}

.library-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a2a2a;
}

.library-section-label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0;
}

.library-section-bracket {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #666;
  font-weight: bold;
}

.library-section-label h3 {
  margin: 0;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #f0f0f0;
}

.library-section-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  color: #777;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 4px;
}

.library-songs-stream {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #2e2e2e;
  background: #121212;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.library-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background:
    linear-gradient(180deg, #262626 0%, #1a1a1a 100%);
  border: none;
  border-bottom: 1px solid #333;
  padding: 10px 12px;
  border-radius: 0;
  margin-bottom: 0;
}

.library-stats-info {
  font-size: 11px;
  color: #cccccc;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
}

.library-stats-info strong {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: #ffffff;
}

.library-song-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #181818;
  border: 1px solid #2a2a2a;
  padding: 10px 12px;
  border-radius: 2px;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.library-song-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: #ffffff;
  transition: width 0.15s ease;
}

.library-song-card:hover {
  background: #1c1c1c;
  border-color: #444444;
}

.library-song-card:hover::before {
  width: 2px;
}

.library-song-card.is-playing {
  background: #222222;
  border-color: #666;
  box-shadow: none;
}

.library-song-card.is-playing::before {
  width: 3px;
  background: #ffffff;
}

/* Catalog strip layout — biblioteca only */
#library-view .library-songs-stream .library-song-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid #222;
  border-radius: 0;
}

#library-view .library-songs-stream .library-song-card:last-child {
  border-bottom: none;
}

#library-view .library-songs-stream .library-song-card.is-playing {
  background: #222222;
  border-color: #333;
}

#library-view .library-song-cover {
  filter: grayscale(1) contrast(1.05);
}

#library-view .library-song-card:hover .library-song-cover,
#library-view .library-song-card.is-playing .library-song-cover {
  filter: grayscale(0.35) contrast(1.08);
}

.lib-track-index {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  color: #555555;
  width: 22px;
  text-align: right;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.library-song-card.is-playing .lib-track-index {
  color: #ffffff;
}

.library-song-cover-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.library-song-cover {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid #444444;
  background: #0d0d0d;
  border-radius: 2px;
  display: block;
  transition: filter 0.2s ease, border-color 0.15s ease;
}

.library-song-card:hover .library-song-cover,
.library-song-card.is-playing .library-song-cover {
  border-color: #888;
}

#library-view .library-song-card.is-playing .library-song-cover {
  animation: lib-cover-pulse 2.4s ease-in-out infinite;
}

@keyframes lib-cover-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  50% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }
}

/* EQ overlay — ONLY inside cover thumbnails (never page-wide) */
.library-song-cover-wrap .lib-eq-animation {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

.library-song-cover-wrap .lib-eq-animation span {
  width: 3px;
  background: #ffffff;
  animation: eq-pulse 0.6s infinite alternate ease-in-out;
}

.library-song-cover-wrap .lib-eq-animation span:nth-child(1) { height: 8px; animation-delay: 0.1s; }
.library-song-cover-wrap .lib-eq-animation span:nth-child(2) { height: 18px; animation-delay: 0.3s; }
.library-song-cover-wrap .lib-eq-animation span:nth-child(3) { height: 12px; animation-delay: 0.2s; }

/* Tiny inline EQ for now-playing banner / status text */
.lib-eq-inline {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  margin-left: 6px;
  vertical-align: middle;
  position: static !important;
  inset: auto !important;
  background: none !important;
  pointer-events: none;
}

.lib-eq-inline span {
  width: 2px;
  background: #ffffff;
  display: block;
  animation: eq-pulse 0.6s infinite alternate ease-in-out;
}

.lib-eq-inline span:nth-child(1) { height: 5px; animation-delay: 0.1s; }
.lib-eq-inline span:nth-child(2) { height: 11px; animation-delay: 0.3s; }
.lib-eq-inline span:nth-child(3) { height: 7px; animation-delay: 0.2s; }

.library-loading-state {
  padding: 36px 16px;
  text-align: center;
  color: #888;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

.library-empty-state {
  padding: 28px 18px;
  text-align: center;
  color: #888;
  border: 1px dashed #333;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(255, 255, 255, 0.02) 8px,
      rgba(255, 255, 255, 0.02) 9px
    ),
    #161616;
}

.library-empty-state p {
  margin: 0;
}

.library-empty-state .subtle-text {
  margin-top: 6px;
}

/* .conv-item muted icon: see lux-ico / mask rule at end of stylesheet */

.chat-mute-btn.is-muted {
  border-color: #888;
  color: #ddd;
}

.library-song-info {
  flex: 1;
  min-width: 0;
}

.library-song-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.library-song-title {
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.library-song-title:hover {
  text-decoration: underline;
}

.now-playing-pill {
  font-size: 8px;
  font-weight: bold;
  background: #ffffff;
  color: #000000;
  padding: 2px 6px;
  border-radius: 0;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  font-family: var(--font-mono);
  animation: lib-pill-blink 1.6s steps(2, end) infinite;
}

@keyframes lib-pill-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.library-song-artist {
  font-size: 11px;
  color: #999999;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.library-song-date {
  font-size: 9px;
  color: #666666;
  margin-top: 3px;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}

.library-song-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.lib-play-btn {
  font-weight: bold;
  min-width: 92px;
}

.lib-remove-btn {
  color: #888888;
}

.lib-remove-btn:hover {
  color: #ffffff;
  border-color: #888888;
  background: #2a2a2a;
}

/* Pending Requests Profile Banner */
.pending-requests-profile-banner {
  border: 1px solid #555555;
  background: #181818;
}

/* Global Player Favorite Button */
.player-btn-fav {
  color: #888888;
}

.player-btn-fav:hover {
  color: #ffffff;
}

.player-btn-fav.favorited {
  color: #ffffff !important;
}

.player-btn-fav.favorited svg {
  fill: #ffffff;
}

/* Partner Online & Now Playing in Messages */
.partner-meta-box {
  min-width: 0;
  overflow: hidden;
  flex: 1;
}

.partner-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.partner-meta-box h4,
#chat-partner-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}

#chat-partner-status {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.chat-online-badge {
  font-size: 9px;
  color: #00ff66;
  font-weight: bold;
  background: rgba(0, 255, 102, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(0, 255, 102, 0.3);
}

.chat-partner-now-playing {
  font-size: 10px;
  color: #aaaaaa;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Online Users Placeholder in Messages */
.online-users-wrapper {
  padding: 14px;
}

.online-users-header {
  font-size: 11px;
  font-weight: bold;
  color: #888888;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.online-users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.online-user-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #181818;
  border: 1px solid #2e2e2e;
  padding: 6px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.online-user-card:hover {
  background: #242424;
  border-color: #555555;
}

.online-user-avatar-wrap {
  position: relative;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.online-user-avatar {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid #444;
}

.online-status-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #00ff66;
  border-radius: 50%;
  border: 1px solid #111;
}

.online-user-info {
  flex: 1;
  min-width: 0;
}

.online-user-name {
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.online-user-music {
  font-size: 9px;
  color: #777777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Custom Voice Note Player in Chat (No default HTML5) */
.custom-voice-player {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1c1c1c;
  border: 1px solid #333333;
  padding: 8px 10px;
  border-radius: 12px;
  min-width: 200px;
  max-width: 280px;
  user-select: none;
}

.custom-voice-player.is-playing {
  border-color: #888;
}

.voice-play-toggle {
  background: #ffffff;
  color: #000000;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
}

.voice-play-toggle:disabled {
  opacity: 0.5;
  cursor: wait;
}

.voice-wave-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  cursor: pointer;
  min-width: 0;
  position: relative;
}

.voice-wave-bar {
  flex: 1;
  background: #555555;
  border-radius: 1px;
  height: 4px;
  min-width: 2px;
  transition: background 0.1s linear, height 0.1s linear;
}

.voice-wave-bar.active {
  background: #ffffff;
  height: 12px;
}

.voice-duration-label {
  font-size: 10px;
  color: #aaaaaa;
  font-family: monospace;
  flex-shrink: 0;
  min-width: 34px;
  text-align: right;
}

.chat-audio-file-player {
  min-width: 220px;
}

.chat-audio-filename {
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 11px;
  word-break: break-word;
}

/* ==========================================================================
   LUXURIA EMBED CARDS (links in posts & messages)
   ========================================================================== */
.lux-embed-card,
.chat-link-card {
  --lux-embed-accent: #c9a227;
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a 0%, #141414 55%, #1c1a14 100%);
  border: 1px solid #3a3a3a;
  border-left: 3px solid var(--lux-embed-accent);
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 8px;
  cursor: pointer;
  max-width: 360px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  isolation: isolate;
}

.lux-embed-card:hover,
.chat-link-card:hover {
  border-color: #6a5a2a;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.lux-embed-card:focus-visible {
  outline: 2px solid var(--lux-embed-accent);
  outline-offset: 2px;
}

.lux-embed-glow {
  position: absolute;
  inset: -20% -10%;
  background-size: cover;
  background-position: center;
  filter: blur(28px) saturate(1.2);
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
  transform: scale(1.05);
}

.lux-embed-art,
.lux-embed-body,
.lux-embed-actions,
.chat-link-card-body,
.chat-link-card-actions {
  position: relative;
  z-index: 1;
}

.lux-embed-art {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.lux-embed-cover,
.chat-link-card-cover {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0d0d0d;
  flex-shrink: 0;
  border-radius: 6px;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.lux-embed-art.is-avatar .lux-embed-cover {
  border-radius: 50%;
}

.lux-embed-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 231, 163, 0.85);
  background: rgba(0, 0, 0, 0.72);
  color: #ffe7a3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0.92;
  transform: scale(1);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .lux-embed-play {
    opacity: 0;
    transform: scale(0.92);
  }

  .lux-embed-art.is-playable:hover .lux-embed-play,
  .lux-embed-card:hover .lux-embed-play,
  .lux-embed-play:focus-visible {
    opacity: 1;
    transform: scale(1);
  }
}

.lux-embed-play:hover {
  background: rgba(30, 24, 8, 0.92);
}

.lux-embed-body,
.chat-link-card-body {
  min-width: 0;
  flex: 1;
}

.lux-embed-badge,
.chat-link-card-badge {
  display: inline-block;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffe7a3;
  background: rgba(58, 48, 16, 0.85);
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 999px;
  padding: 1px 7px;
  margin-bottom: 4px;
}

.lux-embed-title,
.chat-link-card-title {
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.lux-embed-sub,
.chat-link-card-sub {
  font-size: 11px;
  color: #c0c0c0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.lux-embed-meta {
  font-size: 10px;
  color: #8f8f8f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}

.lux-embed-actions,
.chat-link-card-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.lux-embed--beat {
  --lux-embed-accent: #3db8a0;
  background: linear-gradient(135deg, #141a19 0%, #121212 55%, #16201e 100%);
}

.lux-embed--beat .lux-embed-badge {
  color: #b8ffe8;
  background: rgba(20, 56, 48, 0.9);
  border-color: rgba(61, 184, 160, 0.55);
}

.lux-embed--beat .lux-embed-play {
  border-color: rgba(184, 255, 232, 0.85);
  color: #b8ffe8;
}

.lux-embed--album {
  --lux-embed-accent: #d0d0d0;
}

.lux-embed--playlist,
.chat-link-card.is-playlist {
  --lux-embed-accent: #e6d37a;
}

.lux-embed--post {
  --lux-embed-accent: #8ab4ff;
}

.lux-embed--post .lux-embed-badge {
  color: #d6e6ff;
  background: rgba(24, 40, 72, 0.9);
  border-color: rgba(138, 180, 255, 0.5);
}

.lux-embed--profile,
.lux-embed--comment,
.lux-embed--reply {
  --lux-embed-accent: #bbb;
}

.lux-embed--event,
.lux-embed-event-card {
  --lux-embed-accent: #888;
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--bg-box);
  border: 1px solid var(--border-medium);
  border-left: 3px solid #888;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.12);
}
.lux-embed-event-banner {
  height: 72px;
  background: #222 center/cover no-repeat;
  border-bottom: 1px solid var(--border-light);
  filter: grayscale(1);
}
.lux-embed-event-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  z-index: 1;
}
.lux-embed-event-card .lux-embed-art {
  width: 56px;
  height: 72px;
  flex-shrink: 0;
  margin-top: -28px;
  border: 1px solid var(--border-medium);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  background: #111;
  border-radius: 0;
}
.lux-embed-event-card .lux-embed-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  filter: grayscale(0.35);
}
.lux-embed-event-card .lux-embed-badge {
  color: var(--text-primary);
  background: var(--bg-box-header);
  border-color: var(--border-medium);
  font-size: 9px;
  letter-spacing: 0.06em;
}
.lux-embed-event-card .lux-embed-title {
  font-size: 13px;
  font-weight: bold;
}
.lux-embed-event-card .lux-embed-glow { display: none; }
.lux-embed--event:hover,
.lux-embed-event-card:hover {
  border-color: var(--border-medium);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.18);
  transform: none;
}
html[data-theme="light"] .lux-embed--event,
html[data-theme="light"] .lux-embed-event-card {
  background: var(--bg-box);
  border-color: var(--border-medium);
}
html[data-theme="light"] .lux-embed-event-banner {
  border-bottom-color: var(--border-light);
}
html[data-theme="light"] .lux-embed-event-card .lux-embed-art {
  background: #fff;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.08);
}

.lux-embed-in-post {
  max-width: 420px;
  margin-top: 10px;
}

.bubble-sent .lux-embed-card,
.bubble-sent .chat-link-card {
  background: linear-gradient(135deg, #1f1c14 0%, #1a1812 60%, #221e16 100%);
}

.fb-popup-bubble .lux-embed-card,
.fb-popup-bubble .chat-link-card {
  max-width: 100%;
}

html[data-theme="light"] .lux-embed-card,
html[data-theme="light"] .chat-link-card {
  background: linear-gradient(135deg, #fffdf6 0%, #f7f4ea 55%, #fff 100%);
  border-color: #d8d0b4;
  box-shadow: 0 2px 8px rgba(40, 30, 0, 0.06);
}

html[data-theme="light"] .lux-embed-card:hover,
html[data-theme="light"] .chat-link-card:hover {
  border-color: #c9a227;
  box-shadow: 0 6px 16px rgba(40, 30, 0, 0.1);
}

html[data-theme="light"] .lux-embed-glow {
  opacity: 0.12;
}

html[data-theme="light"] .lux-embed-title,
html[data-theme="light"] .chat-link-card-title {
  color: #1a1a1a;
}

html[data-theme="light"] .lux-embed-sub,
html[data-theme="light"] .chat-link-card-sub {
  color: #555;
}

html[data-theme="light"] .lux-embed-meta {
  color: #777;
}

html[data-theme="light"] .lux-embed-cover,
html[data-theme="light"] .chat-link-card-cover {
  border-color: #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

@media (max-width: 480px) {
  .lux-embed-card,
  .chat-link-card {
    max-width: 100%;
    padding: 9px 10px;
    gap: 10px;
  }

  .lux-embed-art,
  .lux-embed-cover,
  .chat-link-card-cover {
    width: 56px;
    height: 56px;
  }
}

.share-to-chat-list {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border-light, #333);
  background: var(--bg-subtle, #1a1a1a);
}

.share-to-chat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid #2a2a2a;
}

.share-to-chat-item:hover {
  background: #242424;
}

.share-to-chat-item img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 1px solid #555;
}

.share-to-chat-item .meta {
  min-width: 0;
  flex: 1;
}

.share-to-chat-item .name {
  font-size: 12px;
  font-weight: bold;
  color: #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-to-chat-item .sub {
  font-size: 10px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-website-link {
  color: var(--text-link, #fff);
  word-break: break-all;
  font-size: 12px;
}

.profile-website-link:hover {
  text-decoration: underline;
}

/* Media Download Button */
.media-download-row {
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
}

.media-download-btn {
  background: transparent;
  border: 1px solid #444444;
  color: #aaaaaa;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 2px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}

.media-download-btn:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* Users List Modal */
.users-modal-box {
  width: 360px;
  max-width: 90vw;
}

.users-modal-body {
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
}

.modal-user-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid #222222;
  cursor: pointer;
  min-width: 0;
}

.modal-user-item:hover {
  background: #1c1c1c;
}

.modal-user-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.modal-user-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.modal-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 2px;
  border: 1px solid #444;
  object-fit: cover;
  flex-shrink: 0;
}

.modal-user-name {
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-user-username {
  font-size: 10px;
  color: #777777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-user-action,
.modal-user-item .mini-btn {
  flex-shrink: 0;
  white-space: nowrap;
  align-self: center;
}

/* Profile Liked Songs Side List */
.profile-liked-songs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-liked-song-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.profile-liked-song-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

.profile-liked-song-cover {
  width: 26px;
  height: 26px;
  border-radius: 2px;
  object-fit: cover;
  border: 1px solid #444;
  background: #111;
  flex-shrink: 0;
}

.profile-liked-song-text {
  flex: 1;
  min-width: 0;
}

.profile-liked-song-title {
  font-size: 10px;
  font-weight: bold;
  color: var(--fl-text, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.profile-liked-song-artist {
  font-size: 9px;
  color: var(--fl-text, #c8c8c8);
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pinned Playlist Side Card (Above Liked Songs) */
.profile-pinned-pl-wrapper {
  display: flex;
  flex-direction: column;
}

.profile-pinned-pl-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px var(--fl-border-style, solid) var(--fl-border, #444);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.profile-pinned-pl-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #777;
}

.profile-pinned-pl-cover {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid #555;
  background: #111;
  flex-shrink: 0;
}

.profile-pinned-pl-info {
  flex: 1;
  min-width: 0;
}

.profile-pinned-pl-title {
  font-size: 11px;
  font-weight: bold;
  color: var(--fl-link, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-pinned-pl-author {
  font-size: 9px;
  color: var(--fl-text, #b0b0b0);
  margin-top: 1px;
}

.profile-pinned-pl-badge {
  font-size: 9px;
  color: var(--fl-text, #888888);
  margin-top: 2px;
}

/* Profile Created Playlists List (Below Liked Songs) */
.profile-created-pl-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-created-pl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 2px;
}

.profile-created-pl-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.profile-created-pl-cover {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border: 1px solid #444;
  background: #111;
  flex-shrink: 0;
}

.profile-created-pl-info {
  flex: 1;
  min-width: 0;
}

.profile-created-pl-name {
  font-size: 10px;
  font-weight: bold;
  color: var(--fl-text, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-created-pl-meta {
  font-size: 9px;
  color: var(--fl-text, #aaaaaa);
  opacity: 0.8;
}

.profile-created-pl-play {
  background: #242424;
  border: 1px solid #444;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.profile-created-pl-play:hover {
  background: #fff;
  color: #000;
}

/* Post Attached Playlist Header with Follow Button */
.post-playlist-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.pl-attach-follow-btn {
  padding: 2px 8px !important;
  font-size: 9px !important;
  border-radius: 2px;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}

/* ==========================================================================
   MENTIONS SYSTEM (@username)
   ========================================================================== */
.composer-text-wrapper {
  position: relative;
  width: 100%;
}

.mention-suggestions-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 280px;
  max-width: 100%;
  max-height: 190px;
  overflow-y: auto;
  background: #1e1e1e;
  border: 1px solid #444;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  z-index: 1200;
  border-radius: 3px;
  margin-top: 2px;
}

.mention-suggestions-floating {
  position: fixed !important;
  top: auto;
  left: auto;
  margin-top: 0;
  z-index: 50000 !important;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.mention-field-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.comment-mention-wrap {
  flex: 1;
}

.comment-reply-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.comment-reply-form .mention-field-wrap {
  flex: 1;
  min-width: 140px;
}

.comment-reply-form .comment-reply-input {
  width: 100%;
}

.repost-caption-box .post-mention-tag,
.comment-text .post-mention-tag {
  font-size: inherit;
}

.mention-suggestion-header {
  padding: 4px 8px;
  font-size: 9px;
  text-transform: uppercase;
  color: #888;
  background: #141414;
  border-bottom: 1px solid #2a2a2a;
  letter-spacing: 0.5px;
}

.mention-suggestion-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  border-bottom: 1px solid #282828;
  transition: background 0.12s;
}

.mention-suggestion-item:last-child {
  border-bottom: none;
}

.mention-suggestion-item:hover,
.mention-suggestion-item.active {
  background: #2e2e2e;
}

.mention-suggestion-avatar {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  object-fit: cover;
  border: 1px solid #555;
  background: #111;
  flex-shrink: 0;
}

.mention-suggestion-info {
  flex: 1;
  min-width: 0;
}

.mention-suggestion-name {
  font-size: 11px;
  font-weight: bold;
  color: #eeeeee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mention-suggestion-handle {
  font-size: 10px;
  color: #999999;
}

/* Clickable @username → profile (credits, authors, lists) */
.username-link {
  color: inherit;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}
.username-link:hover {
  text-decoration: underline;
  color: var(--text-link-hover, #ffffff);
}

.credit-val .username-link,
.album-detail-sub .username-link,
.playlist-author-row .username-link,
#playlist-author-info .username-link {
  color: #ffffff;
}

.post-mention-tag {
  display: inline-block;
  background: #262626;
  color: #ffffff !important;
  font-weight: bold;
  padding: 0 4px;
  border-radius: 2px;
  border: 1px solid #444;
  text-decoration: none;
  margin: 0 2px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.post-mention-tag:hover {
  background: #ffffff;
  color: #000000 !important;
  border-color: #ffffff;
  text-decoration: none;
}

.post-hashtag-tag {
  color: #9ecbff !important;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.post-hashtag-tag:hover {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hashtag-meta {
  margin: 0 0 10px;
  font-size: 11px;
}

.hashtag-posts-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hashtag-feed-box {
  max-width: 640px;
  margin: 0 auto;
}

/* Character counter */
.composer-char-counter {
  font-size: 11px;
  color: #777;
  font-family: monospace;
}

.composer-char-counter.near-limit {
  color: #e6a23c;
}

.composer-char-counter.at-limit {
  color: #ff4d4f;
  font-weight: bold;
}

/* ==========================================================================
   LIBRARY LIVE NOW PLAYING BANNER
   ========================================================================== */
.library-now-playing-banner {
  position: relative;
  background:
    linear-gradient(180deg, #2a2a2a 0%, #181818 100%);
  border: none;
  border-bottom: 1px solid #3a3a3a;
  border-radius: 0;
  padding: 12px 14px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.library-now-playing-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #ffffff;
  animation: lib-np-bar 1.8s ease-in-out infinite;
}

@keyframes lib-np-bar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.lib-np-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
  position: relative;
  z-index: 1;
}

.lib-np-cover-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.lib-np-cover {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid #666;
  background: #111;
  flex-shrink: 0;
  border-radius: 50%;
  filter: grayscale(0.4);
  box-shadow:
    0 0 0 3px #1a1a1a,
    0 0 0 4px #444;
}

.lib-np-cover.is-spinning {
  animation: lib-disc-idle 3.2s linear infinite;
}

.lib-np-meta {
  min-width: 0;
  flex: 1;
}

.lib-np-status {
  font-size: 9px;
  text-transform: uppercase;
  color: #aaa;
  letter-spacing: 0.12em;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
}

.lib-np-status-dot {
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 0;
  display: inline-block;
  box-shadow: none;
  animation: lib-pill-blink 1.2s steps(2, end) infinite;
}

.lib-np-title {
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.lib-np-title:hover {
  text-decoration: underline;
}

.lib-np-artist {
  font-size: 10px;
  color: #888888;
  margin-top: 1px;
}

.lib-np-right {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* ==========================================================================
   CUSTOM DROPDOWN MENUS (COMPOSER, AUDIO DOTS, PLAYER DOTS)
   ========================================================================== */
.retro-custom-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1050;
  min-width: 160px;
  background: #1e1e1e;
  border: 1px solid #444444;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
  border-radius: 2px;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}

.player-dots-dropdown {
  bottom: calc(100% + 6px);
  top: auto !important;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 9600;
  min-width: 180px;
}

.dropdown-item-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  background: transparent;
  border: none;
  color: #e0e0e0;
  font-size: 11px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.dropdown-item-btn:hover {
  background: #333333;
  color: #ffffff;
}

.dropdown-divider {
  height: 1px;
  background: #333333;
  margin: 4px 0;
}

/* COMPOSER ATTACHED PLAYLIST BOX */
.composer-attached-playlist-box {
  margin-top: 8px;
  background: #181818;
  border: 1px solid #3a3a3a;
  border-radius: 3px;
  padding: 8px;
}

.attach-kind-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.attach-kind-chip {
  appearance: none;
  border: 1px solid #444;
  background: #1a1a1a;
  color: #ccc;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

.attach-kind-chip:hover {
  border-color: #777;
  color: #fff;
}

.attach-kind-chip.active {
  background: #ececec;
  border-color: #ececec;
  color: #111;
}

.modal-pl-item-kind {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  margin-right: 4px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  vertical-align: middle;
}

html[data-theme="light"] .attach-kind-chip {
  background: #f4f4f4;
  border-color: #ccc;
  color: #333;
}

html[data-theme="light"] .attach-kind-chip.active {
  background: #222;
  border-color: #222;
  color: #fff;
}

html[data-theme="light"] .modal-pl-item-kind {
  border-color: rgba(0, 0, 0, 0.2);
}

.attached-playlist-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.attached-playlist-cover {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid #555;
  background: #111;
  flex-shrink: 0;
}

.attached-playlist-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.attached-playlist-info strong {
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attached-playlist-info .subtle-text {
  font-size: 10px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Composer + post polls */
.composer-poll-box {
  margin-top: 8px;
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  padding: 8px 10px;
}

.composer-poll-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.composer-poll-option {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.composer-poll-option input {
  flex: 1;
  min-width: 0;
}

.composer-poll-flags {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.composer-poll-flag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
}

.composer-poll-hint {
  margin: 8px 0 0;
  font-size: 10px;
}

.post-poll {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.post-poll-option-wrap {
  position: relative;
}

.post-poll-option {
  position: relative;
  width: 100%;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  color: var(--text-primary);
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.post-poll-voters {
  display: none;
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 100%;
  padding-top: 4px;
}

.post-poll-option-wrap:hover .post-poll-voters,
.post-poll-option-wrap:focus-within .post-poll-voters {
  display: block;
}

.post-poll-voters-card {
  background: var(--bg-box);
  border: 1px solid var(--border-medium);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  padding: 8px;
  max-height: 180px;
  overflow: auto;
}

.post-poll-voters-title {
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.post-poll-voter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--text-primary);
  text-decoration: none;
}

.post-poll-voter:hover {
  text-decoration: none;
}

.post-poll-voter img {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border: 1px solid var(--border-medium);
  flex-shrink: 0;
}

.post-poll-voter-name {
  min-width: 0;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-poll-voters-empty {
  font-size: 11px;
  color: var(--text-muted);
}

.post-poll-option:hover:not(:disabled) {
  border-color: var(--text-primary);
}

.post-poll-option.is-results,
.post-poll-option:disabled {
  cursor: default;
}

.post-poll-option.is-mine {
  border-color: var(--text-primary);
}

.post-poll-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

html[data-theme="light"] .post-poll-bar {
  background: rgba(0, 0, 0, 0.1);
}

.post-poll-option-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.post-poll-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.post-poll-mine {
  font-size: 10px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.post-poll-count {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.post-poll-meta {
  font-size: 10px;
  color: var(--text-muted);
}

/* POST ATTACHED PLAYLIST CARD */
.post-playlist-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1c1c1c;
  border: 1px solid #383838;
  border-radius: 4px;
  padding: 10px;
  margin-top: 8px;
  text-decoration: none !important;
  color: #e0e0e0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.post-playlist-card:hover {
  background: #242424;
  border-color: #666;
  text-decoration: none !important;
}

.post-playlist-cover {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 1px solid #555;
  background: #000;
  flex-shrink: 0;
}

.post-playlist-body {
  flex: 1;
  min-width: 0;
}

.post-playlist-badge {
  font-size: 9px;
  text-transform: uppercase;
  color: #888;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
  display: block;
}

.post-playlist-title {
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-playlist-desc {
  font-size: 11px;
  color: #aaa;
  margin: 3px 0 6px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-playlist-footer {
  font-size: 10px;
  color: #777;
}

/* ==========================================================================
   RETRO VIDEO PLAYER (NO DOWNLOAD OPTION, CUSTOM RETRO CONTROLS)
   ========================================================================== */
.retro-video-wrapper {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: #000000;
  border: 1px solid #383838;
  border-radius: 3px;
  overflow: hidden;
  user-select: none;
  font-family: var(--font-retro);
}

.retro-video-element {
  width: 100%;
  height: auto;
  max-height: 480px;
  display: block;
  background: #000;
  cursor: pointer;
}

.retro-video-overlay-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  pointer-events: auto;
  z-index: 2;
}

.retro-video-wrapper.is-playing .retro-video-overlay-play {
  opacity: 0;
  pointer-events: none;
}

.retro-video-wrapper.retro-video-compact {
  max-width: min(320px, 100%);
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.retro-video-wrapper.retro-video-compact .retro-video-element {
  max-height: 220px;
  width: 100%;
  object-fit: contain;
  background: #000;
}

.retro-video-wrapper.retro-video-compact .retro-video-overlay-play {
  width: 40px;
  height: 40px;
}

.retro-video-wrapper.retro-video-compact .retro-video-overlay-play svg {
  width: 18px;
  height: 18px;
}

.retro-video-wrapper.retro-video-compact .retro-video-controls {
  gap: 4px;
  padding: 6px 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

.retro-video-wrapper.retro-video-compact .rv-seek-bar {
  min-width: 48px;
}

.retro-video-wrapper.retro-video-compact .rv-time-display {
  font-size: 9px;
  min-width: 0;
}

.retro-video-wrapper.retro-video-compact .rv-vol-slider {
  display: none;
}

.retro-video-wrapper.retro-video-compact .rv-fs-btn {
  display: none;
}

.rv-expand-btn {
  flex-shrink: 0;
}

.chat-retro-video-slot,
.fb-popup-video-slot {
  width: 100%;
  max-width: min(320px, 100%);
  min-width: 0;
}

.chat-video-block {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.chat-messages-scroll > .chat-bubble.bubble-sent:has(.chat-retro-video-slot),
.chat-messages-scroll > .chat-bubble.bubble-received:has(.chat-retro-video-slot),
.chat-bubble:has(.chat-retro-video-slot) {
  max-width: min(360px, 88%) !important;
  width: min(360px, 88%);
  box-sizing: border-box;
}

.chat-bubble:has(.chat-retro-video-slot) .chat-bubble-media,
.chat-bubble:has(.chat-retro-video-slot) .chat-video-block {
  width: 100%;
}

.chat-bubble .retro-video-wrapper.chat-retro-video,
.fb-popup-bubble .retro-video-wrapper.chat-retro-video {
  width: 100%;
  max-width: min(320px, 100%);
}

.fb-popup-bubble .chat-retro-video-slot,
.fb-popup-bubble .retro-video-wrapper.chat-retro-video {
  max-width: 100%;
}

.retro-video-overlay-play svg {
  fill: #ffffff;
  margin-left: 3px;
}

.retro-video-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(to top, rgba(15, 15, 15, 0.95), rgba(30, 30, 30, 0.9));
  border-top: 1px solid #2a2a2a;
  padding: 6px 10px;
}

.rv-btn {
  background: transparent;
  border: 1px solid #444;
  color: #fff;
  border-radius: 2px;
  padding: 4px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.rv-btn:hover {
  background: #333;
}

.rv-seek-bar {
  flex: 1;
  accent-color: #ffffff;
  cursor: pointer;
  height: 5px;
}

.rv-time-display {
  font-size: 10px;
  font-family: monospace;
  color: #ccc;
  white-space: nowrap;
}

.rv-vol-slider {
  width: 60px;
  accent-color: #ffffff;
  cursor: pointer;
  height: 4px;
}

/* ==========================================================================
   PLAYLIST VIEW (/playlist/:id)
   ========================================================================== */
.playlist-page-canvas {
  position: relative;
  min-height: calc(100vh - 120px);
  padding: 16px;
  border-radius: 4px;
  overflow: hidden;
}

.playlist-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  filter: blur(5px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}

.playlist-inner-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
}

.playlist-header-box {
  padding: 20px;
  background: #181818;
  border: 1px solid #333;
}

.playlist-header-flex {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.playlist-cover-large {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border: 2px solid #555;
  background: #111;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.playlist-info-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.playlist-badge-label {
  font-size: 9px;
  text-transform: uppercase;
  color: #888;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

#playlist-title-display {
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 6px;
  word-break: break-word;
}

.playlist-desc-text {
  font-size: 12px;
  color: #b5b5b5;
  margin-bottom: 12px;
  line-height: 1.4;
  word-break: break-word;
}

.playlist-author-row {
  font-size: 11px;
  color: #888;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.playlist-action-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Tracklist */
.playlist-songs-list {
  display: flex;
  flex-direction: column;
}

.playlist-track-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #282828;
  transition: background 0.15s;
}

.playlist-track-row:hover {
  background: #222222;
}

.pl-track-num {
  font-size: 11px;
  color: #666;
  width: 20px;
  text-align: center;
}

.pl-track-play-btn {
  background: #2a2a2a;
  border: 1px solid #444;
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.pl-track-play-btn:hover {
  background: #fff;
  color: #000;
}

.pl-track-cover {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 1px solid #444;
  background: #000;
  flex-shrink: 0;
}

.pl-track-info {
  flex: 1;
  min-width: 0;
}

.pl-track-title {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-track-artist {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-track-remove-btn {
  background: transparent;
  border: none;
  color: #777;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
}

.pl-track-remove-btn:hover {
  color: #ff5555;
}

/* ==========================================================================
   LIBRARY PLAYLISTS GRID
   ========================================================================== */
.library-playlists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}

.playlist-grid-card {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
  box-shadow: 1px 1px 0 #0a0a0a;
  overflow: hidden;
}

.playlist-grid-card:hover {
  background: #202020;
  border-color: #888;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 #0a0a0a;
}

.pl-grid-cover-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0d0d0d;
  border: none;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 0;
}

.pl-grid-cover-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 28%, rgba(0, 0, 0, 0.15) 29%, transparent 32%),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.12) 43%, transparent 46%),
    radial-gradient(circle at 50% 50%, transparent 56%, rgba(0, 0, 0, 0.1) 57%, transparent 60%);
  opacity: 0.85;
  mix-blend-mode: multiply;
}

.pl-grid-cover-frame::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background:
    radial-gradient(circle at center, #111 0 35%, transparent 36%),
    repeating-radial-gradient(circle at center, #333 0 1px, #151515 1px 2px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0.9;
}

.pl-grid-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.08);
  transition: filter 0.25s ease, transform 0.35s ease;
}

.playlist-grid-card:hover .pl-grid-cover-img {
  filter: grayscale(0.15) contrast(1.1);
  transform: scale(1.04);
}

.pl-grid-play-overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 3;
  background: #000000;
  border: 1px solid #ffffff;
  color: #fff;
  border-radius: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: transform 0.18s, opacity 0.18s, background 0.15s, color 0.15s;
}

.playlist-grid-card:hover .pl-grid-play-overlay,
.playlist-grid-card:focus-within .pl-grid-play-overlay {
  opacity: 1;
  transform: translateY(0);
}

.pl-grid-play-overlay:hover {
  background: #ffffff;
  color: #000000;
}

.pl-grid-meta {
  padding: 10px 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pl-grid-title {
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
  letter-spacing: 0.02em;
}

.pl-grid-author {
  font-size: 10px;
  color: #888;
  margin-bottom: 0;
}

.pl-grid-badge {
  font-size: 9px;
  color: #777;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  margin-top: 4px;
  text-transform: uppercase;
}

.library-playlists-empty {
  grid-column: 1 / -1;
  padding: 28px 16px;
  text-align: center;
  color: #777;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(255, 255, 255, 0.02) 8px,
      rgba(255, 255, 255, 0.02) 9px
    ),
    #161616;
  border: 1px dashed #333;
}

/* Modals Playlist Styles */
.playlist-modal-box {
  width: 90%;
  max-width: 480px;
  background: #1e1e1e;
  border: 1px solid #444;
  color: #fff;
  border-radius: 4px;
}

.playlist-modal-body {
  padding: 16px;
  max-height: 78vh;
  overflow-y: auto;
  color: #eeeeee;
}

/* Explicit high-contrast text and labels in song & album metadata modals */
.playlist-modal-box .form-group label,
.lightbox-content-box .form-group label,
#upload-song-modal .form-group label,
#upload-album-modal .form-group label,
#add-album-song-modal .form-group label,
#edit-album-design-modal .form-group label {
  display: block;
  font-weight: bold !important;
  font-size: 11px !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.playlist-modal-box .form-group label span.required-star,
.lightbox-content-box .form-group label span.required-star {
  color: #ff5555 !important;
}

.playlist-modal-box .field-hint,
.lightbox-content-box .field-hint,
.playlist-modal-box .subtle-text,
.lightbox-content-box .subtle-text,
#upload-song-modal .subtle-text,
#upload-album-modal .subtle-text {
  color: #b8b8b8 !important;
  font-size: 10px !important;
}

.playlist-modal-box .modal-section-title,
.lightbox-content-box .modal-section-title {
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: bold !important;
}

.playlist-modal-box .retro-input,
.lightbox-content-box .retro-input,
.playlist-modal-box .retro-textarea,
.lightbox-content-box .retro-textarea,
.playlist-modal-box .retro-select,
.lightbox-content-box .retro-select,
#upload-song-modal .retro-input,
#upload-album-modal .retro-input,
#add-album-song-modal .retro-input {
  background-color: #111111 !important;
  color: #ffffff !important;
  border: 1px solid #555555 !important;
  border-radius: 2px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
}

.playlist-modal-box .retro-input:focus,
.lightbox-content-box .retro-input:focus,
.playlist-modal-box .retro-textarea:focus,
.lightbox-content-box .retro-textarea:focus,
.playlist-modal-box .retro-select:focus,
.lightbox-content-box .retro-select:focus {
  border-color: #888888 !important;
  outline: none !important;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.2) !important;
}

.playlist-modal-box .retro-input::placeholder,
.lightbox-content-box .retro-input::placeholder,
.playlist-modal-box .retro-textarea::placeholder,
.lightbox-content-box .retro-textarea::placeholder {
  color: #777777 !important;
}

.playlist-modal-box input[type="file"],
.lightbox-content-box input[type="file"] {
  background-color: #161616 !important;
  color: #cccccc !important;
  border: 1px solid #444444 !important;
  padding: 4px 6px !important;
}

.song-meta-pill-box {
  background: #141414;
  border: 1px solid #333;
  padding: 8px 12px;
  border-radius: 3px;
  margin-bottom: 12px;
}

.modal-section-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 16px 0;
  color: #666;
  font-size: 10px;
  letter-spacing: 0.8px;
}

.modal-section-divider::before,
.modal-section-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #333;
}

.modal-section-divider:not(:empty)::before {
  margin-right: .5em;
}

.modal-section-divider:not(:empty)::after {
  margin-left: .5em;
}

.modal-pl-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}

.modal-pl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: #252525;
  border: 1px solid #3a3a3a;
  border-radius: 2px;
}

.modal-pl-item img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 1px solid #555;
  flex-shrink: 0;
}

.modal-pl-item-info {
  flex: 1;
  min-width: 0;
}

.modal-pl-item-title {
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-pl-item-desc {
  font-size: 10px;
  color: #888;
}

/* Audio card 3 dots button in post */
.custom-audio-card .audio-card-dots {
  position: relative;
  margin-left: 6px;
}

.audio-dots-btn {
  background: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 14px;
  line-height: 1;
}

.audio-dots-btn:hover {
  color: #fff;
}

/* ==========================================================================
   CUSTOM RETRO TOAST NOTIFICATIONS (ZERO NATIVE ALERTS)
   ========================================================================== */
.luxuria-toast-container {
  position: fixed;
  top: 48px;
  right: 16px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}

.luxuria-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #181818;
  color: #eeeeee;
  border: 1px solid #444444;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  padding: 10px 14px;
  min-width: 260px;
  max-width: 380px;
  font-family: var(--font-retro);
  font-size: 11px;
  line-height: 1.45;
  animation: toastRetroSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.luxuria-toast.toast-hiding {
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
}

@keyframes toastRetroSlideIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.luxuria-toast.toast-success {
  border-left: 4px solid #ffffff;
}

.luxuria-toast.toast-error {
  border-left: 4px solid #ff4444;
}

.luxuria-toast.toast-warning {
  border-left: 4px solid #e0e0e0;
}

.luxuria-toast.toast-info {
  border-left: 4px solid #888888;
}

.toast-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.toast-content {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.toast-close-btn {
  background: none;
  border: none;
  color: #888888;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  margin-left: 6px;
  flex-shrink: 0;
}

.toast-close-btn:hover {
  color: #ffffff;
}

/* ==========================================================================
   CUSTOM CONFIRM MODAL (ZERO NATIVE CONFIRM)
   ========================================================================== */
.confirm-modal-box {
  width: 90%;
  max-width: 380px;
  background: #181818;
  border: 1px solid #444444;
  border-radius: 3px;
  color: #ffffff;
}

.confirm-modal-body {
  padding: 16px;
}

.confirm-modal-msg {
  font-size: 12px;
  line-height: 1.5;
  color: #dddddd;
  margin-bottom: 18px;
  word-break: break-word;
}

.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Mute duration picker (chats + notification sound) — above accessibility modal */
#mute-duration-modal.mute-duration-modal,
#mute-duration-modal {
  z-index: 12050 !important;
}

.mute-duration-box {
  width: 92%;
  max-width: 340px;
  max-height: min(85vh, 520px);
  background: var(--bg-box, #1a1a1a);
  border: 1px solid var(--border-medium, #444);
  border-radius: 3px;
  color: var(--text-primary, #fff);
  overflow: hidden;
}

.mute-duration-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(85vh - 48px);
  overflow: hidden;
}

.mute-duration-msg {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.4;
  flex-shrink: 0;
}

.mute-duration-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(48vh, 280px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.mute-duration-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid var(--border-light, #333);
  background: var(--bg-subtle, #222);
  color: inherit;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  border-radius: 2px;
}

.mute-duration-opt:hover,
.mute-duration-opt:focus-visible {
  border-color: var(--text-primary, #fff);
  outline: none;
}

.mute-duration-opt-permanent {
  font-weight: 700;
  margin-top: 2px;
}

.mute-duration-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  flex-shrink: 0;
}

html[data-theme="light"] .mute-duration-box {
  background: #fff;
  border-color: #bbb;
  color: #111;
}

html[data-theme="light"] .mute-duration-opt {
  background: #f4f4f4;
  border-color: #ccc;
}

/* ==========================================================================
   SHARE MODAL & SINGLE POST VIEW
   ========================================================================== */
.share-modal-box {
  width: 92%;
  max-width: 440px;
  background: #1a1a1a;
  border: 1px solid #444444;
  border-radius: 3px;
  color: #ffffff;
}

.share-modal-body {
  padding: 16px;
}

.share-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.share-option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: #141414;
  border: 1px solid #3a3a3a;
  border-radius: 3px;
  color: #f0f0f0;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}

.share-option-btn:hover:not(:disabled) {
  border-color: #666666;
  background: #1c1c1c;
}

.share-option-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.share-option-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #444444;
  border-radius: 3px;
  background: #222222;
  color: #eeeeee;
}

.share-option-icon-ig {
  background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
  border-color: transparent;
  color: #ffffff;
}

.share-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.share-option-label {
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
}

.share-option-sub {
  font-size: 10px;
  color: #888888;
  line-height: 1.3;
}

.share-link-section {
  border-top: 1px solid #333333;
  padding-top: 12px;
}

.share-link-section #share-modal-desc {
  margin-bottom: 8px;
}

/* ==========================================================================
   REPORT MODAL
   ========================================================================== */
.report-modal-box {
  width: 92%;
  max-width: 460px;
  background: #1a1a1a;
  border: 1px solid #444444;
  border-radius: 3px;
  color: #ffffff;
}

.report-modal-body {
  padding: 16px;
}

.report-modal-body .form-group {
  margin-bottom: 12px;
}

.report-modal-body .form-group label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  color: #cccccc;
}

.report-modal-body .retro-select,
.report-modal-body .retro-textarea,
.report-modal-body .retro-file-input {
  width: 100%;
  box-sizing: border-box;
}

.report-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.report-evidence-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
}

.report-evidence-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: #111111;
  border: 1px solid #333333;
  font-size: 10px;
}

.report-evidence-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #dddddd;
}

.report-evidence-size {
  color: #888888;
  flex-shrink: 0;
}

.report-evidence-remove {
  background: none;
  border: none;
  color: #ff6666;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}

.report-evidence-remove:hover {
  color: #ffaaaa;
}

#luxuria-report-modal {
  z-index: 10020;
}

.share-input-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.share-input-row input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  background: #111111;
  color: #ffffff;
  border: 1px solid #444444;
  padding: 6px 8px;
  user-select: all;
  min-width: 0;
}

.share-hint-text {
  font-size: 10px;
  color: #888888;
  margin-top: 8px;
}

.playlist-badge-vis {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 2px;
  background: #2b2b2b;
  border: 1px solid #555555;
  color: #dddddd;
  font-weight: bold;
}

.single-post-box {
  max-width: 680px;
  margin: 0 auto;
}

/* ==========================================================================
   DIMENSIONS & TEXT CLIPPING / ELLIPSIS GUARDS
   ========================================================================== */
.player-track-title,
.player-track-artist,
.player-meta,
.pl-grid-title,
.pl-grid-author,
.modal-pl-item-title,
.modal-pl-item-desc,
.audio-title,
.audio-artist,
.custom-audio-title,
.custom-audio-artist,
.mini-lib-track-title,
.mini-lib-track-artist,
.library-track-title,
.library-track-artist,
.post-author-name,
.post-author-username,
.chat-partner-now-playing,
.modal-user-name,
.modal-user-username,
.conv-item-name,
.share-to-chat-item .name,
.share-to-chat-item .sub,
.chat-reply-quote-name,
.fb-popup-reply-quote-name,
.chat-bubble-sender,
.explore-profile-username,
.pending-request-handle,
.pending-req-username,
.analytics-user-name,
.user-name-ellipsis,
#chat-partner-name,
#chat-partner-status {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.player-info-section {
  min-width: 0;
}

.player-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.post-card,
.post-text-content,
.comment-item,
.message-bubble {
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.45;
}

/* Ensure descenders (g, p, y, j, q) are never clipped vertically */
body, input, textarea, select, button, p, span, h1, h2, h3, h4, h5, h6 {
  line-height: 1.4;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS OVERHAUL (< 768px and < 480px)
   ========================================================================== */
@media (max-width: 768px) {
  body.theme-bw {
    zoom: 1;
    padding-bottom: 74px; /* Room for responsive player */
  }

  body.theme-bw.view-messages {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    padding-bottom: 74px !important;
  }

  .retro-header {
    height: auto;
    padding: 6px 10px;
  }

  .header-container {
    flex-wrap: wrap;
    gap: 8px;
  }

  .header-left {
    gap: 8px;
    flex: 1;
  }

  .search-box input {
    width: 120px;
  }

  .header-nav {
    gap: 6px;
  }

  /* Nombre del pill: visible bajo el logo cuando hay bottom nav (ver bloque has-mobile-nav) */

  .luxuria-player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    min-height: 78px;
    padding: 8px 12px 10px;
    background: #181818;
    border-top: 1px solid #333333;
    z-index: 10000;
  }

  .luxuria-player-bar.is-open {
    display: grid !important;
  }

  .player-info-section {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
  }

  .player-controls-section,
  #luxuria-global-player .player-controls-section {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    pointer-events: auto;
  }

  .player-info-section,
  #luxuria-global-player .player-info-section,
  .player-volume-section,
  #luxuria-global-player .player-volume-section {
    max-width: none !important;
  }

  .player-seek {
    flex: 1;
    min-width: 80px;
  }

  .player-volume-section {
    display: none; /* El volumen del sistema manda; cola y cierre siguen en la barra */
  }

  .chat-composer-bar {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .chat-composer-bar input[type="text"] {
    min-width: 0;
    flex: 1;
  }

  .lightbox-content-box {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 10px;
  }

  .retro-fb-popup {
    width: min(360px, calc(100vw - 20px));
    right: 10px;
    bottom: 75px;
  }

  .fb-popup-scrollable-body {
    height: min(46vh, 280px);
  }

  .post-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .playlist-header-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .playlist-cover-large {
    width: 130px;
    height: 130px;
  }

  .playlist-action-btns {
    justify-content: center;
    flex-wrap: wrap;
  }

  .playlist-badges-row {
    justify-content: center;
  }

  .playlist-author-row {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .logo-text {
    font-size: 17px;
  }

  .search-box input {
    width: 100%;
    min-width: 0;
  }

  .nav-item span:not(.badge) {
    display: none; /* Show only icons on narrow phones */
  }

  .composer-attachment-dropdown {
    width: 160px;
  }

  .post-actions button,
  .post-actions a {
    font-size: 10px;
    padding: 3px 5px;
  }

  .luxuria-toast-container {
    right: 8px;
    left: 8px;
    max-width: calc(100vw - 16px);
  }

  .luxuria-toast {
    min-width: 0;
    width: 100%;
  }
}

/* ==========================================================================
   GLOBAL HIGH-CONTRAST & TEXT VISIBILITY GUARDS
   ========================================================================== */
.profile-page-canvas .subtle-text,
.playlist-page-canvas .subtle-text,
.mini-library-box .subtle-text,
.library-now-playing-banner .subtle-text,
.composer-attached-playlist-box .subtle-text,
.post-playlist-card .subtle-text,
.pending-requests-profile-banner .subtle-text,
.dark-box .subtle-text,
.retro-box-header .subtle-text {
  color: #b5b5b5 !important;
}

.profile-page-canvas p,
.profile-page-canvas .fotolog-caption-text,
.profile-page-canvas .bio-text {
  color: var(--fl-text, #e8e8e8) !important;
}

.profile-page-canvas strong,
.profile-page-canvas b,
.profile-page-canvas h2,
.profile-page-canvas h3,
.profile-page-canvas h4 {
  color: var(--fl-link, #ffffff) !important;
}

.profile-page-canvas .retro-box-header span {
  color: var(--fl-link, #ffffff) !important;
}

.profile-page-canvas .post-comments-section {
  background-color: rgba(0, 0, 0, 0.35) !important;
  border-top: 1px var(--fl-border-style, solid) var(--fl-border, #333) !important;
}

.profile-page-canvas .comment-item {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px var(--fl-border-style, solid) var(--fl-border, #333) !important;
  color: var(--fl-text, #ffffff) !important;
}

.profile-page-canvas .comment-author {
  color: var(--fl-link, #ffffff) !important;
}

.profile-page-canvas .comment-text {
  color: var(--fl-text, #e8e8e8) !important;
}

.profile-page-canvas .comment-time {
  color: var(--fl-text, #aaaaaa) !important;
  opacity: 0.85;
}

.profile-page-canvas .action-link {
  color: var(--fl-link, #ffffff) !important;
}

.profile-page-canvas .post-actions-bar {
  border-top: 1px var(--fl-border-style, solid) var(--fl-border, #333) !important;
  color: var(--fl-text, #cccccc) !important;
}

.profile-page-canvas .post-date {
  color: var(--fl-text, #aaaaaa) !important;
  opacity: 0.85;
}

.online-user-music {
  color: #aaaaaa !important;
}

/* ==========================================================================
   MINIMALIST SCRUBBABLE POST AUDIO PLAYER (NO NAME, NO ARTIST)
   ========================================================================== */
.retro-post-audio-player {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #141414;
  border: 1px solid #333333;
  padding: 8px 12px;
  border-radius: 4px;
  margin-top: 8px;
  width: 100%;
  max-width: 520px;
}

.post-audio-play-btn {
  background: #242424;
  border: 1px solid #4a4a4a;
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.post-audio-play-btn:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.post-audio-scrubber {
  flex: 1;
  min-width: 60px;
  accent-color: #ffffff;
  cursor: pointer;
  height: 4px;
}

.post-audio-time {
  font-family: monospace;
  font-size: 11px;
  color: #b5b5b5;
  white-space: nowrap;
  flex-shrink: 0;
}

.post-audio-volume-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-left: 6px;
  border-left: 1px solid #333;
}

.post-audio-mute-btn {
  background: none;
  border: none;
  color: #ddd;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-audio-mute-btn:hover {
  color: #fff;
}

.post-audio-volume {
  width: 64px;
  height: 4px;
  cursor: pointer;
  accent-color: #ffffff;
}

@media (max-width: 520px) {
  .post-audio-volume {
    width: 44px;
  }
  .post-audio-time {
    font-size: 10px;
  }
}

/* ==========================================================================
   REPOST FRAME BANNER & REPOST CARDS
   ========================================================================== */
.post-card.repost-post-card {
  position: relative;
  border-left: 3px solid #666666;
}

.repost-frame-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #1c1c1c;
  border-bottom: 1px solid #333333;
  font-size: 11px;
  color: #cccccc;
}

.repost-caption-box {
  padding: 8px 12px 4px;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.repost-caption-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.repost-modal-box .retro-textarea {
  width: 100%;
  resize: vertical;
  min-height: 64px;
}

html[data-theme="light"] .repost-frame-banner {
  background: #f2f2f2;
  border-bottom-color: #ddd;
  color: #444;
}

html[data-theme="light"] .repost-frame-banner .repost-user-link {
  color: #111;
}

.repost-frame-banner .repost-icon {
  font-size: 13px;
  line-height: 1;
}

.repost-frame-banner .repost-user-link {
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
}

.repost-frame-banner .repost-user-link:hover {
  text-decoration: underline;
}

.profile-page-canvas .post-card.repost-post-card {
  border-left: 3px var(--fl-border-style) var(--fl-link);
}

.profile-page-canvas .repost-frame-banner {
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px var(--fl-border-style) var(--fl-border);
  color: var(--fl-text);
}

.profile-page-canvas .repost-frame-banner .repost-user-link {
  color: var(--fl-link);
}

/* ==========================================================================
   ATTACHED SONG CARDS (POSTS & COMPOSER)
   ========================================================================== */
.post-song-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #161616;
  border: 1px solid #333333;
  padding: 10px 14px;
  border-radius: 4px;
  margin-top: 8px;
  transition: border-color 0.15s ease;
}

.post-song-card:hover {
  border-color: #666666;
}

.post-song-cover-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.post-song-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #444;
  border-radius: 2px;
  flex-shrink: 0;
  background: #222;
  display: block;
}
.post-song-play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border: 1px solid #cfcfcf;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.post-song-byline,
.post-song-stats {
  font-size: 12px;
  color: #c6c6c6;
  line-height: 1.35;
}
.post-song-stats {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.post-song-wave {
  height: 2px;
  margin-top: 6px;
  background: #2a2a2a;
  box-shadow: inset 0 0 0 1px #3a3a3a;
}

.post-music-card {
  cursor: pointer;
  background: linear-gradient(135deg, #1a1812 0%, #161616 55%, #1c1a14 100%);
  border-color: #6a5a2a;
}

.post-music-card:hover {
  border-color: #c9a227;
}

.post-music-card.is-playing {
  border-color: #e0c35a;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.25);
}

.post-music-cover-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.post-music-cover-wrap .post-music-cover {
  width: 52px;
  height: 52px;
}

.post-music-card.is-playing .post-music-cover {
  animation: post-music-spin 8s linear infinite;
}

@keyframes post-music-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.post-music-play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #c9a227;
  background: rgba(0, 0, 0, 0.72);
  color: #ffe7a3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.post-music-play-btn:hover {
  background: rgba(30, 24, 8, 0.9);
}

.post-music-badge {
  background: #3a3010 !important;
  color: #ffe7a3 !important;
  border-color: #c9a227 !important;
}

.post-music-progress {
  height: 3px;
  margin-top: 5px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

.post-music-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #c9a227, #f0d878);
  transition: width 0.15s linear;
}

html[data-theme="light"] .post-music-card {
  background: linear-gradient(135deg, #fff8e8 0%, #f4f4f4 60%, #fff3d6 100%);
  border-color: #c9a227;
}

html[data-theme="light"] .post-music-play-btn {
  background: rgba(255, 255, 255, 0.88);
  color: #6a5208;
}

.post-song-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.post-song-title {
  font-weight: bold;
  font-size: 13px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-song-title:hover {
  text-decoration: underline;
}

.post-song-artist {
  font-size: 11px;
  color: #aaaaaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-song-card .subtle-text a.username-link,
.post-album-card .subtle-text a.username-link,
.post-playlist-card a.username-link {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-song-card .subtle-text a.username-link:hover,
.post-album-card .subtle-text a.username-link:hover,
.post-playlist-card a.username-link:hover {
  color: #d0d0d0;
}

.post-song-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ==========================================================================
   SONG VIEW (/cancion/:id)
   ========================================================================== */
.song-page-container {
  max-width: 800px;
  margin: 0 auto;
}

.song-hero-box {
  background: #181818;
  border: 1px solid #333333;
}

.song-hero-content {
  display: flex;
  gap: 24px;
  padding: 20px;
}

@media (max-width: 640px) {
  .song-hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.song-detail-cover {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border: 1px solid #444444;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  background: #222;
}

.song-hero-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.song-meta-badge {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #888888;
  text-transform: uppercase;
}

.song-detail-title {
  font-size: 24px;
  margin: 4px 0 2px 0;
  color: #ffffff;
  word-break: break-word;
}

.song-detail-artists {
  font-size: 14px;
  color: #cccccc;
  margin-bottom: 12px;
}

.song-feat-inline {
  color: #aaaaaa;
  font-weight: normal;
}

.song-feat-badge {
  color: #b8a06a;
  font-size: 0.95em;
}

.song-detail-featuring {
  font-size: 12px;
  color: #aaaaaa;
  margin: -6px 0 12px;
}

.song-credits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  background: #111111;
  border: 1px solid #282828;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 11px;
  margin-bottom: 14px;
}

.credit-item {
  display: flex;
  flex-direction: column;
}

.credit-label {
  color: #888888;
  font-size: 10px;
}

.credit-val {
  color: #e0e0e0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* ==========================================================================
   ALBUM VIEW (/album/:id)
   ========================================================================== */
.album-page-canvas {
  max-width: 850px;
  margin: 0 auto;
}

.album-hero-box {
  background: var(--alb-box, #181818);
  border: 1px var(--alb-border-style, solid) var(--alb-border, #333333);
}

.album-hero-content {
  display: flex;
  gap: 24px;
  padding: 20px;
}

@media (max-width: 640px) {
  .album-hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.album-detail-cover {
  width: 190px;
  height: 190px;
  object-fit: cover;
  border: 1px solid #444444;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.7);
  background: #222;
}

.album-detail-title {
  font-size: 26px;
  margin: 4px 0 2px 0;
  color: var(--alb-text, #ffffff);
  word-break: break-word;
}

.album-detail-sub {
  font-size: 13px;
  color: #aaaaaa;
  margin-bottom: 4px;
}

.album-detail-label {
  font-size: 11px;
  color: #888888;
  margin-bottom: 14px;
}

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

.album-tracklist-box {
  background: var(--alb-box, #181818);
  border: 1px var(--alb-border-style, solid) var(--alb-border, #333333);
}

.album-song-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease;
}

.album-song-row:last-child {
  border-bottom: none;
}

.album-song-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.album-song-row.draggable-row {
  cursor: default;
}

.album-song-drag-handle {
  cursor: grab;
  color: #666666;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  margin-right: 2px;
  user-select: none;
  transition: color 0.15s, transform 0.15s;
}

.album-song-drag-handle:hover {
  color: #ffffff;
  transform: scale(1.15);
}

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

.album-song-row.is-dragging {
  opacity: 0.35 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.album-song-row.drag-over-above {
  border-top: 2px solid #ffffff !important;
}

.album-song-row.drag-over-below {
  border-bottom: 2px solid #ffffff !important;
}

.album-song-num {
  font-family: monospace;
  font-size: 12px;
  color: #777777;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.album-song-info {
  flex: 1;
  min-width: 0;
}

.album-song-title {
  font-weight: 500;
  font-size: 13px;
  color: var(--alb-text, #ffffff);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.album-song-title:hover {
  text-decoration: underline;
}

.album-song-artists {
  font-size: 11px;
  color: #888888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.album-song-likes {
  font-size: 11px;
  color: #aaaaaa;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.album-song-like-btn {
  background: none;
  border: 1px solid #333;
  color: #ccc;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.album-song-like-btn:hover {
  background: #333;
  color: #fff;
}

.album-song-like-btn.liked {
  color: #ffffff;
  border-color: #888;
  background: #2a2a2a;
}

/* ==========================================================================
   MINI FLOATING VIDEO PIP WIDGET (DRAGGABLE & RESIZABLE)
   ========================================================================== */
.retro-pip-video-box {
  position: fixed;
  left: 16px;
  bottom: 65px;
  width: 260px;
  height: 180px;
  min-width: 160px;
  max-width: 92vw;
  min-height: 110px;
  max-height: 85vh;
  background: #111111;
  border: 1px solid #555555;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.9);
  z-index: 9999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  resize: both; /* Native resize support */
  user-select: none;
}

.pip-video-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: #1c1c1c;
  border-bottom: 1px solid #333333;
  font-size: 10px;
  font-weight: bold;
  color: #cccccc;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}

.pip-video-header:active {
  cursor: grabbing;
}

.pip-video-title {
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pip-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pip-action-btn,
.pip-close-btn {
  background: none;
  border: none;
  color: #aaaaaa;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 2px;
}

.pip-action-btn:hover,
.pip-close-btn:hover {
  color: #ffffff;
  background: #333333;
}

.pip-video-body {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: calc(100% - 24px);
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#pip-video-element {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000000;
  pointer-events: auto;
}

.pip-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 3px;
  opacity: 0.7;
  transition: opacity 0.15s ease;
  user-select: none;
}

.pip-resize-handle:hover {
  opacity: 1;
}

.retro-dropdown-item-btn:hover {
  background: #2a2a2a !important;
  color: #ffffff !important;
}

/* ===================================================
 * PROFILE SONGS & ALBUMS SHOWCASE (MINI LISTS)
 * =================================================== */
.profile-songs-mini-list,
.profile-albums-mini-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
}

.profile-empty-media-msg {
  padding: 10px 8px;
  text-align: center;
}

.profile-created-song-item,
.profile-created-album-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.profile-created-song-item:hover,
.profile-created-album-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateX(2px);
}

.profile-created-song-cover-wrap,
.profile-created-album-cover-wrap {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  background: #111111;
}

.profile-created-song-cover,
.profile-created-album-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-created-song-info,
.profile-created-album-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-created-song-name,
.profile-created-album-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--fl-text, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.profile-created-song-meta,
.profile-created-album-meta {
  font-size: 9.5px;
  color: var(--fl-text, #aaaaaa);
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}

.profile-meta-sep {
  opacity: 0.5;
  font-size: 8px;
}

.profile-album-badge {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 1px 4px;
  background: #2b2b2b;
  border: 1px solid #555555;
  border-radius: 2px;
  color: #eeeeee;
  text-transform: uppercase;
  flex-shrink: 0;
}

.profile-created-song-play-btn,
.profile-created-album-view-btn {
  background: #222222;
  border: 1px solid #444444;
  color: #ffffff;
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 9px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-created-song-play-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 0;
  font-size: 9px;
}

.profile-created-song-play-btn:hover,
.profile-created-album-view-btn:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  transform: scale(1.08);
}

/* Custom Profile Canvas Overrides */
.profile-page-canvas .profile-created-song-item,
.profile-page-canvas .profile-created-album-item {
  background: rgba(0, 0, 0, 0.3);
  border: 1px var(--fl-border-style, solid) var(--fl-border, rgba(255, 255, 255, 0.15));
}

.profile-page-canvas .profile-created-song-item:hover,
.profile-page-canvas .profile-created-album-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--fl-link, #ffffff);
}

.profile-page-canvas .profile-created-song-name,
.profile-page-canvas .profile-created-album-name {
  color: var(--fl-link, #ffffff);
}

.profile-page-canvas .profile-created-song-meta,
.profile-page-canvas .profile-created-album-meta {
  color: var(--fl-text, #cccccc);
}

/* ===================================================
 * USER ALL ITEMS STREAM (Songs & Albums full views)
 * =================================================== */
.user-all-items-stream {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-full-item-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #191919;
  border: 1px solid #333333;
  transition: border-color 0.15s, background 0.15s;
}

.user-full-item-card:hover {
  border-color: #666666;
  background: #202020;
}

.user-full-item-cover {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid #444444;
  flex-shrink: 0;
}

.user-full-item-body {
  flex: 1;
  min-width: 0;
}

.user-full-item-title {
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
}

.user-full-item-title:hover {
  text-decoration: underline;
}

.user-full-item-meta {
  font-size: 10px;
  color: #888888;
  margin-top: 2px;
}

.user-full-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ===================================================
 * PROFILE BEATS + BEAT CATALOG (/perfil/:user/beats)
 * =================================================== */
.profile-beats-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.profile-beats-mini-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
}

.profile-beat-meta {
  gap: 3px !important;
}

.profile-beat-chip {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

#user-beats-view {
  width: 100%;
}

#user-beats-view .profile-inner-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#user-beats-view .beat-catalog-hero {
  margin-bottom: 0;
}

/* Superficie oscura fija para el listado (legible en cualquier skin/tema) */
.profile-page-canvas .beat-catalog-box {
  background: #161616 !important;
  border-color: color-mix(in srgb, var(--fl-border, #333) 80%, #222) !important;
  color: #f0f0f0 !important;
}

.profile-page-canvas .beat-catalog-box .retro-box-header {
  background: rgba(255, 255, 255, 0.06) !important;
  border-bottom-color: #333333 !important;
  color: #ffffff !important;
}

.profile-page-canvas .beat-catalog-box .retro-box-header span,
.profile-page-canvas .beat-catalog-box .retro-box-header h2,
.profile-page-canvas .beat-catalog-box .retro-box-header a {
  color: #ffffff !important;
}

.beat-catalog-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.beat-catalog-colhead,
.beat-catalog-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
}

.beat-catalog-colhead {
  border-bottom: 1px var(--fl-border-style, solid) color-mix(in srgb, var(--fl-border, #444) 70%, transparent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--fl-text, #888888);
  opacity: 0.75;
}

.beat-catalog-stats {
  display: grid;
  grid-template-columns: 72px 64px 56px;
  align-items: center;
  justify-items: center;
  gap: 8px;
}

.beat-catalog-stream {
  padding: 0;
  gap: 0;
}

.beat-catalog-row {
  border-bottom: 1px solid color-mix(in srgb, var(--fl-border, #444) 45%, transparent);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.beat-catalog-row:hover {
  background: color-mix(in srgb, var(--fl-link, #fff) 8%, transparent);
}

.beat-catalog-row:last-child {
  border-bottom: none;
}

.beat-col-track {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.beat-catalog-cover-wrap {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 3px;
  overflow: hidden;
  border: 1px var(--fl-border-style, solid) var(--fl-border, rgba(255, 255, 255, 0.14));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  background: color-mix(in srgb, var(--fl-bg-page, #111) 80%, #000);
}

.beat-catalog-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.beat-catalog-track-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.beat-catalog-title {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.beat-catalog-title:hover {
  text-decoration: underline;
}

.beat-catalog-artist {
  font-size: 10px;
  color: #c8c8c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.beat-col-dur,
.beat-col-key,
.beat-col-bpm {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #d0d0d0;
  text-align: center;
  white-space: nowrap;
}

.beat-col-key {
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #eeeeee;
}

.beat-col-bpm {
  font-weight: 700;
  color: #ffffff;
}

.beat-col-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.profile-page-canvas .profile-created-beat-item {
  background: rgba(0, 0, 0, 0.3);
  border: 1px var(--fl-border-style, solid) var(--fl-border, rgba(255, 255, 255, 0.15));
}

.profile-page-canvas .beat-catalog-box .retro-btn-secondary,
.profile-page-canvas .beat-catalog-hero .retro-btn-secondary {
  background: color-mix(in srgb, var(--fl-bg-box, #222) 70%, transparent);
  border: 1px var(--fl-border-style, solid) var(--fl-border, #555);
  color: var(--fl-text, #eee);
}

.profile-page-canvas .beat-catalog-box .retro-btn-primary,
.profile-page-canvas .beat-catalog-row .retro-btn-primary {
  background: var(--fl-link, #fff);
  border: 1px solid var(--fl-link, #fff);
  color: var(--fl-bg-page, #000);
}

/* Catálogo: alto contraste fijo (como tarjetas de música en modo claro) */
html[data-theme="light"] .profile-page-canvas .beat-catalog-box {
  background: #161616 !important;
  border-color: #333333 !important;
  color: #f0f0f0 !important;
}

html[data-theme="light"] .profile-page-canvas .beat-catalog-box .retro-box-header {
  background: rgba(255, 255, 255, 0.06) !important;
  border-bottom-color: #333333 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .profile-page-canvas .beat-catalog-box .retro-box-header span,
html[data-theme="light"] .profile-page-canvas .beat-catalog-box .retro-box-header h2 {
  color: #ffffff !important;
}

html[data-theme="light"] .profile-page-canvas .beat-catalog-colhead {
  color: #b0b0b0 !important;
  border-bottom-color: #333333 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .profile-page-canvas .beat-catalog-row {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="light"] .profile-page-canvas .beat-catalog-row:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="light"] .profile-page-canvas .beat-catalog-title,
html[data-theme="light"] .profile-page-canvas .beat-catalog-box a.beat-catalog-title,
html[data-theme="light"] .profile-page-canvas .beat-col-bpm,
html[data-theme="light"] .profile-page-canvas .beat-col-key {
  color: #ffffff !important;
  opacity: 1 !important;
}

html[data-theme="light"] .profile-page-canvas .beat-catalog-artist,
html[data-theme="light"] .profile-page-canvas .beat-col-dur,
html[data-theme="light"] .profile-page-canvas .beat-catalog-box .subtle-text {
  color: #c4c4c4 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .profile-page-canvas .beat-catalog-cover-wrap {
  border-color: #444444 !important;
  background: #111111 !important;
}

html[data-theme="light"] .profile-page-canvas .beat-catalog-hero .retro-btn-secondary {
  background: #ffffff !important;
  border: 1px solid #bbbbbb !important;
  color: #111111 !important;
}

html[data-theme="light"] .profile-page-canvas .beat-catalog-box .retro-btn-primary {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #111111 !important;
}

html[data-theme="light"] .profile-page-canvas .beat-catalog-box .retro-btn-secondary {
  background: #222222 !important;
  border-color: #555555 !important;
  color: #f0f0f0 !important;
}

@media (max-width: 640px) {
  .beat-catalog-colhead {
    display: none;
  }

  .beat-catalog-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 12px;
  }

  .beat-catalog-stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: start;
    margin-left: 58px;
    gap: 6px;
  }

  .beat-col-dur,
  .beat-col-key,
  .beat-col-bpm {
    text-align: left;
    font-size: 10px;
  }

  .profile-beats-header-actions,
  .beat-catalog-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  #user-beats-view .beat-catalog-hero {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===================================================
 * CATEGORIZED SEARCH RESULTS DROPDOWN
 * =================================================== */
.search-results-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background: #111111;
  border: 1px solid #444444;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
  z-index: 1000;
  margin-top: 4px;
}

.search-category-header {
  padding: 4px 8px;
  background: #222222;
  color: #aaaaaa;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #282828;
}

.search-category-header:first-child {
  border-top: none;
}

.search-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid #222222;
  cursor: pointer;
  transition: background 0.15s;
}

.search-hashtag-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #9ecbff;
  font-weight: 700;
  font-size: 14px;
}

html[data-theme="light"] .search-hashtag-icon {
  border-color: #c8c8c8;
  background: #f2f6fc;
  color: #1565c0;
}

.search-result-row:hover {
  background: #1e1e1e;
}

.search-row-thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border: 1px solid #444444;
  flex-shrink: 0;
}

.search-row-info {
  flex: 1;
  min-width: 0;
}

.search-row-title {
  font-size: 11px;
  font-weight: bold;
  color: #eeeeee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-row-sub {
  font-size: 9px;
  color: #888888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-lib-badge {
  display: inline-block;
  padding: 1px 4px;
  font-size: 7px;
  font-weight: bold;
  background: #333333;
  color: #cccccc;
  border: 1px solid #555555;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ==========================================================================
   POST REPOST BUTTON & STATE
   ========================================================================== */
.repost-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}

.repost-action-btn:hover {
  color: var(--text-link-hover, #000000);
}

.repost-action-btn.reposted {
  color: var(--text-primary, #111111) !important;
  font-weight: bold;
}

.repost-action-btn.reposted svg {
  stroke: currentColor;
  fill: rgba(128, 128, 128, 0.18);
}

/* Album Song Removal Button */
.album-song-delete-btn {
  padding: 1px 6px;
  font-size: 13px;
  line-height: 1;
  color: #ff6666 !important;
  border-color: #552222;
}

.album-song-delete-btn:hover {
  background: #441111 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   ESTÉTICO REPRODUCTOR DE PANTALLA COMPLETA (FULLSCREEN PLAYER)
   ========================================================================== */
.fullscreen-player-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  background: #090909;
  color: #efefef;
  overflow: hidden;
  font-family: var(--font-retro);
  user-select: none;
}

/* Hide competing chrome while the large player is open */
body.fs-player-open {
  overflow: hidden;
}

body.fs-player-open #luxuria-global-player,
body.fs-player-open .retro-fb-popup,
body.fs-player-open .retro-pip-video-box,
body.fs-player-open .radio-chat-pip,
body.fs-player-open .mobile-bottom-nav,
body.fs-player-open .luxuria-toast-container {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Dynamic blurred backdrop glow */
.fs-backdrop-blur {
  position: absolute;
  inset: -60px;
  background-position: center;
  background-size: cover;
  filter: blur(80px) brightness(0.24) contrast(1.15);
  opacity: 0.85;
  transform: scale(1.1);
  transition: background-image 0.5s ease-out;
  pointer-events: none;
}

.fs-backdrop-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(12, 12, 12, 0.6) 0%, rgba(5, 5, 5, 0.94) 85%);
  pointer-events: none;
}

/* Scanlines retro subtle texture */
.fullscreen-player-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  opacity: 0.35;
}

/* Top bar */
.fs-top-bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.fs-badge-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fs-stereo-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  background: #1c1c1c;
  color: #e5e5e5;
  border: 1px solid #444;
  border-radius: 2px;
  text-transform: uppercase;
}

.fs-context-badge {
  font-size: 10px;
  color: #888888;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.fs-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fs-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #dcdcdc;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fs-icon-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border-color: #ffffff;
  transform: translateY(-1px);
}

/* Main stage */
.fs-main-stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 60px);
  padding: clamp(12px, 2.5vh, 28px) clamp(20px, 4vw, 48px);
  flex: 1 1 auto;
  min-height: 0;
  width: min(1200px, 100%);
  max-width: 1200px;
  align-self: center;
  box-sizing: border-box;
}

/* Visual Stage: Large album cover (Apple Music / Spotify style) */
.fs-visual-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  max-width: 560px;
  min-width: 0;
}

.fs-cover-stage {
  position: relative;
  width: min(420px, 38vw, 58vh);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.fs-cover-art-frame {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
  background: #141414;
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.72),
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: scale(0.985);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.fs-cover-stage.is-playing .fs-cover-art-frame {
  transform: scale(1);
  box-shadow:
    0 36px 80px rgba(0, 0, 0, 0.78),
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.fs-cover-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Stage Video */
.fs-video-stage {
  width: min(560px, 90vw);
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.85);
}

.fs-video-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Info Wrapper */
.fs-info-wrapper {
  flex: 1 1 280px;
  max-width: 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fs-track-pill {
  display: inline-block;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.1);
  color: #cfcfcf;
  border-radius: 2px;
  width: fit-content;
  margin-bottom: 10px;
}

.fs-track-title {
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin: 0 0 8px 0;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fs-track-artist {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 600;
  color: #d0d0d0;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-track-album {
  font-size: 13px;
  color: #8c8c8c;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  margin: 4px 0 14px;
}

.fs-visualizer .vbar {
  width: 3px;
  height: 18%;
  background: #d8d8d8;
  transform-origin: bottom;
}

.fullscreen-player-overlay.is-playing .fs-visualizer .vbar {
  animation: player-eq 0.9s ease-in-out infinite;
}

.fullscreen-player-overlay.is-playing .fs-visualizer .vbar:nth-child(odd) { animation-duration: 0.7s; }
.fullscreen-player-overlay.is-playing .fs-visualizer .vbar:nth-child(3n) { animation-duration: 1.05s; animation-delay: 0.12s; }
.fullscreen-player-overlay.is-playing .fs-visualizer .vbar:nth-child(4n) { animation-delay: 0.22s; }
.fullscreen-player-overlay.is-playing .fs-visualizer .vbar:nth-child(5n) { height: 40%; animation-duration: 0.8s; }

/* Aesthetic Pill Buttons */
.fs-track-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.fs-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f0f0f0;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fs-pill-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-1px);
}

.fs-pill-btn.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* Bottom dock — full bleed so it never drifts off-center */
.fs-bottom-dock {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px clamp(20px, 4vw, 48px) calc(22px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 8, 8, 0.88);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fs-progress-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  width: 100%;
  max-width: 720px;
}

.fs-time-display {
  font-size: 11px;
  font-family: monospace;
  color: #a0a0a0;
  width: 42px;
  flex-shrink: 0;
  text-align: center;
}

.fs-seek-wrap {
  flex: 1;
  height: 18px;
}

.fs-seek-wrap .player-seek-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border: none;
}

.fs-seek-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  background: transparent;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  margin: 0;
}

.fs-seek-slider:hover {
  background: transparent;
}

.fs-seek-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

/* Controls cluster */
.fs-controls-cluster {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 720px;
  gap: 12px;
}

.fs-cluster-left,
.fs-cluster-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.fs-cluster-left {
  justify-content: flex-start;
}

.fs-cluster-right {
  justify-content: flex-end;
}

.fs-cluster-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-shrink: 0;
}

.fs-ctrl-btn {
  background: none;
  border: none;
  color: #a5a5a5;
  font-size: 18px;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.fs-ctrl-btn:hover {
  color: #ffffff;
  transform: scale(1.12);
}

.fs-ctrl-btn.active {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.fs-ctrl-arrow {
  color: #d0d0d0;
}

.fs-ctrl-btn-play {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffffff;
  color: #000000;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}

.fs-ctrl-btn-play:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(255, 255, 255, 0.5);
}

.fs-ctrl-btn-play:active {
  transform: scale(0.96);
}

.fs-volume-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fs-volume-slider {
  width: 85px;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.fs-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}

/* Mid-width: keep two columns readable before stacking */
@media (max-width: 960px) {
  .fs-main-stage {
    gap: 24px;
    padding: 14px 22px;
  }
  .fs-cover-stage {
    width: min(300px, 34vw, 48vh);
  }
  .fs-video-stage {
    width: min(420px, 88vw);
  }
}

/* Responsive Fullscreen */
@media (max-width: 768px) {
  .fs-top-bar {
    padding: 12px 14px;
  }
  .fs-action-label {
    display: none;
  }
  .fs-main-stage {
    flex-direction: column;
    gap: 16px;
    padding: 10px 16px 8px;
    overflow-y: auto;
    width: 100%;
    justify-content: flex-start;
  }
  .fs-visual-wrapper {
    max-width: 100%;
    width: 100%;
  }
  .fs-cover-stage {
    width: min(260px, 68vw, 42vh);
  }
  .fs-cover-art-frame {
    border-radius: 2px;
  }
  .fs-info-wrapper {
    max-width: 100%;
    width: 100%;
    text-align: center;
    align-items: center;
    flex: 0 0 auto;
  }
  .fs-track-actions {
    justify-content: center;
  }
  .fs-track-title {
    font-size: 22px;
    -webkit-line-clamp: 2;
  }
  .fs-track-artist {
    font-size: 15px;
    white-space: normal;
  }
  .fs-bottom-dock {
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .fs-progress-wrapper,
  .fs-controls-cluster {
    max-width: none;
  }
  .fs-volume-slider {
    width: 48px;
  }
  .fs-cluster-center {
    gap: 12px;
  }
  .fs-ctrl-btn-play {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 420px) {
  .fs-controls-cluster {
    grid-template-columns: auto 1fr auto;
  }
  .fs-volume-wrap .fs-volume-slider {
    display: none;
  }
}

/* ==========================================================================
   MODAL Z-INDEX OVERRIDES (ABOVE FULLSCREEN PLAYER)
   ========================================================================== */
#luxuria-share-modal {
  z-index: 200000 !important;
}
#luxuria-confirm-modal {
  z-index: 210000 !important;
}
.luxuria-toast-container {
  z-index: 250000 !important;
}

/* ==========================================================================
   COMMENT LIKES & REPLIES STYLING
   ========================================================================== */
.comment-item {
  position: relative;
  margin-bottom: 8px;
}

.comment-actions-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 3px;
  font-size: 10px;
  color: #777777;
}

.comment-action-btn {
  background: none;
  border: none;
  color: var(--text-muted, #888888);
  cursor: pointer;
  padding: 0;
  font-size: 10px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color 0.15s;
}

.comment-action-btn:hover {
  color: var(--text-primary, #111111);
}

.comment-delete-btn:hover {
  color: #c44;
}

.comment-like-btn.liked {
  color: var(--text-primary, #111111);
  font-weight: bold;
}

.comment-like-btn.liked svg {
  fill: currentColor;
}

.comment-replies-list {
  margin-left: 26px;
  margin-top: 6px;
  border-left: 2px solid #333333;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comments-expand-btn,
.comment-expand-replies-btn {
  align-self: flex-start;
  margin: 2px 0 4px;
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--text-muted, #888);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.comments-expand-btn:hover,
.comment-expand-replies-btn:hover {
  color: var(--text-primary, #eee);
  text-decoration: underline;
}

.comment-expand-replies-btn {
  margin-left: 30px;
  font-weight: 600;
}

html[data-theme="light"] .comments-expand-btn,
html[data-theme="light"] .comment-expand-replies-btn {
  color: #555;
}

html[data-theme="light"] .comments-expand-btn:hover,
html[data-theme="light"] .comment-expand-replies-btn:hover {
  color: #111;
}

.comment-reply-item {
  background: transparent;
  border-color: transparent;
  padding: 4px 0;
  margin-bottom: 0;
}

.comment-reply-item .comment-avatar {
  width: 22px;
  height: 22px;
}

.comment-reply-to {
  font-size: 10px;
  color: var(--text-muted, #888888);
  margin-bottom: 2px;
}

.comment-reply-to-user {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--text-primary, #dddddd);
  cursor: pointer;
  font-weight: 600;
}

.comment-reply-to-user:hover {
  text-decoration: underline;
}

.comment-inline-reply-box {
  width: 100%;
  margin-top: 6px;
}

.comment-reply-form {
  margin-top: 0;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  width: 100%;
}

.comment-reply-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  width: 100%;
}

.comment-reply-form-row .mention-field-wrap {
  flex: 1;
  min-width: 120px;
}

.comment-reply-input {
  flex: 1;
  width: 100%;
  font-size: 11px;
  padding: 4px 8px;
  background: var(--input-bg, #111111);
  border: 1px solid var(--border-medium, #444444);
  color: var(--input-text, #eeeeee);
  border-radius: 2px;
}

.comment-reply-input:focus {
  border-color: var(--border-dark, #888888);
  outline: none;
}

.comment-reply-form .comment-photo-preview {
  margin-left: 0;
  width: 100%;
}

/* ==========================================================================
   DARK THEME — high-contrast readable UI
   ========================================================================== */
html[data-theme="dark"] body.theme-bw {
  color: #f0f0f0;
  background-color: #141414;
}

/* Surfaces */
html[data-theme="dark"] .retro-box,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .auth-box,
html[data-theme="dark"] .composer-box,
html[data-theme="dark"] .chat-panel,
html[data-theme="dark"] .messages-layout,
html[data-theme="dark"] .library-panel,
html[data-theme="dark"] .search-results-dropdown,
html[data-theme="dark"] .retro-dropdown-menu,
html[data-theme="dark"] .notif-item,
html[data-theme="dark"] .conversation-item,
html[data-theme="dark"] .playlist-track-row,
html[data-theme="dark"] .album-song-row,
html[data-theme="dark"] .pending-request-item,
html[data-theme="dark"] .post-media-summary-card,
html[data-theme="dark"] .post-playlist-card,
html[data-theme="dark"] .post-song-card,
html[data-theme="dark"] .post-album-card,
html[data-theme="dark"] .lightbox-content-box,
html[data-theme="dark"] .playlist-modal-box,
html[data-theme="dark"] .confirm-modal-box,
html[data-theme="dark"] .share-modal-box,
html[data-theme="dark"] .share-option-btn,
html[data-theme="dark"] .report-modal-box,
html[data-theme="dark"] .comment-item {
  background-color: #1f1f1f !important;
  background: #1f1f1f !important;
  border-color: #4a4a4a !important;
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .retro-box-header,
html[data-theme="dark"] .post-card-header,
html[data-theme="dark"] .dropdown-header,
html[data-theme="dark"] .lightbox-header {
  background: linear-gradient(to bottom, #303030 0%, #242424 100%) !important;
  border-color: #3f3f3f !important;
  color: #f5f5f5 !important;
}

/* Post action bar (Me gusta / Comentarios / Repost / Compartir) — was #333 on dark */
html[data-theme="dark"] .post-actions-bar {
  background-color: #252525 !important;
  border-top-color: #3a3a3a !important;
  border-bottom-color: #3a3a3a !important;
}

html[data-theme="dark"] .action-link,
html[data-theme="dark"] .action-link span,
html[data-theme="dark"] button.action-link {
  color: #eaeaea !important;
}

html[data-theme="dark"] .likers-tooltip {
  background: #1a1a1a;
  color: #f2f2f2 !important;
  border-color: #555;
}

html[data-theme="dark"] .action-link:hover,
html[data-theme="dark"] .action-link.liked,
html[data-theme="dark"] .action-link.reposted,
html[data-theme="dark"] .repost-action-btn.reposted,
html[data-theme="dark"] .repost-action-btn.reposted span {
  color: #ffffff !important;
}

html[data-theme="dark"] .repost-action-btn.reposted svg {
  stroke: #ffffff;
  fill: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .comment-action-btn {
  color: #b0b0b0 !important;
}

html[data-theme="dark"] .comment-action-btn:hover,
html[data-theme="dark"] .comment-like-btn.liked {
  color: #ffffff !important;
}

html[data-theme="dark"] .comment-like-btn.liked svg {
  fill: #ffffff !important;
}

html[data-theme="dark"] .comment-reply-input {
  background: #111111 !important;
  border-color: #555555 !important;
  color: #f0f0f0 !important;
}

/* Comments block */
html[data-theme="dark"] .post-comments-section {
  background-color: #1a1a1a !important;
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .comment-author,
html[data-theme="dark"] .comment-text,
html[data-theme="dark"] .comment-content {
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .comment-time {
  color: #b0b0b0 !important;
}

html[data-theme="dark"] .comment-form input,
html[data-theme="dark"] .comment-form .retro-input {
  background: #111 !important;
  color: #f0f0f0 !important;
  border-color: #555 !important;
}

/* Text & links */
html[data-theme="dark"] .page-body,
html[data-theme="dark"] .page-body p,
html[data-theme="dark"] .page-body label,
html[data-theme="dark"] .page-body h1,
html[data-theme="dark"] .page-body h2,
html[data-theme="dark"] .page-body h3,
html[data-theme="dark"] .page-body li,
html[data-theme="dark"] .post-body,
html[data-theme="dark"] .post-text-content,
html[data-theme="dark"] .post-author-name,
html[data-theme="dark"] .post-meta,
html[data-theme="dark"] .song-detail-title,
html[data-theme="dark"] .album-detail-title,
html[data-theme="dark"] #playlist-title-display,
html[data-theme="dark"] .credit-val,
html[data-theme="dark"] .auth-box,
html[data-theme="dark"] .auth-box label,
html[data-theme="dark"] .auth-box p {
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .page-body a,
html[data-theme="dark"] .retro-box a,
html[data-theme="dark"] .post-card a,
html[data-theme="dark"] .auth-box a,
html[data-theme="dark"] .repost-user-link {
  color: #ffffff !important;
}

html[data-theme="dark"] .subtle-text,
html[data-theme="dark"] .post-time,
html[data-theme="dark"] .credit-label,
html[data-theme="dark"] .notif-time,
html[data-theme="dark"] .bubble-meta,
html[data-theme="dark"] .file-limits-info,
html[data-theme="dark"] .field-hint,
html[data-theme="dark"] .mini-lib-artist,
html[data-theme="dark"] .repost-frame-banner {
  color: #b8b8b8 !important;
}

html[data-theme="dark"] .repost-frame-banner {
  background: #222 !important;
  border-color: #444 !important;
}

/* Inputs */
html[data-theme="dark"] .retro-input,
html[data-theme="dark"] .retro-textarea,
html[data-theme="dark"] .retro-select,
html[data-theme="dark"] .composer-textarea,
html[data-theme="dark"] .chat-input,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea {
  background-color: #111111 !important;
  color: #f5f5f5 !important;
  border-color: #666666 !important;
}

html[data-theme="dark"] .retro-input::placeholder,
html[data-theme="dark"] .retro-textarea::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] input::placeholder {
  color: #9a9a9a !important;
  opacity: 1 !important;
}

/* Buttons — include secondary + accent used in feed */
html[data-theme="dark"] .retro-btn-secondary,
html[data-theme="dark"] .retro-btn-secondary span,
html[data-theme="dark"] button.retro-btn-secondary {
  background: linear-gradient(to bottom, #404040 0%, #2a2a2a 100%) !important;
  color: #f5f5f5 !important;
  border-color: #777777 !important;
}

html[data-theme="dark"] .retro-btn-primary,
html[data-theme="dark"] .retro-btn-primary span,
html[data-theme="dark"] .retro-btn-accent,
html[data-theme="dark"] .retro-btn-accent span {
  color: #ffffff !important;
}

html[data-theme="dark"] .post-options-menu,
html[data-theme="dark"] .entity-options-menu {
  background: #262626 !important;
  border-color: #666666 !important;
}

html[data-theme="dark"] .post-options-menu button,
html[data-theme="dark"] .entity-options-menu button,
html[data-theme="dark"] .dropdown-item-btn,
html[data-theme="dark"] .retro-dropdown-item-btn {
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .post-options-menu button:hover,
html[data-theme="dark"] .entity-options-menu button:hover,
html[data-theme="dark"] .dropdown-item-btn:hover,
html[data-theme="dark"] .retro-dropdown-item-btn:hover {
  background: #3a3a3a !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .post-dots-btn {
  color: #dddddd !important;
}

html[data-theme="dark"] .post-dots-btn:hover {
  background: #333 !important;
  color: #fff !important;
}

html[data-theme="dark"] .chat-bubble,
html[data-theme="dark"] .bubble-text {
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .header-guest,
html[data-theme="dark"] .nav-item:not(.active) {
  color: #dddddd !important;
}

html[data-theme="dark"] .mini-lib-title {
  color: #ffffff !important;
}

html[data-theme="dark"] .mini-lib-artist {
  color: #b0b0b0 !important;
}

html[data-theme="dark"] .composer-char-counter {
  color: #b0b0b0 !important;
}

html[data-theme="dark"] .media-zoom-overlay {
  color: #ffffff !important;
}

/* Nested/quoted repost cards inside a post */
html[data-theme="dark"] .post-card .post-card,
html[data-theme="dark"] .repost-inner-card,
html[data-theme="dark"] .quoted-post {
  background: #2a2a2a !important;
  border-color: #555 !important;
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .search-results-dropdown,
html[data-theme="dark"] .search-result-item {
  background: #222 !important;
  color: #f0f0f0 !important;
  border-color: #444 !important;
}

html[data-theme="dark"] .search-result-item:hover {
  background: #333 !important;
}

html[data-theme="dark"] .post-author-name,
html[data-theme="dark"] .post-meta .subtle-text,
html[data-theme="dark"] .post-meta a {
  color: #ffffff !important;
}

html[data-theme="dark"] .post-body,
html[data-theme="dark"] .post-text-content {
  color: #f2f2f2 !important;
}

/* Ensure SVGs in action bar inherit light color */
html[data-theme="dark"] .action-link svg,
html[data-theme="dark"] .action-link svg * {
  stroke: currentColor !important;
  color: #eaeaea !important;
}

html[data-theme="dark"] .action-link.liked svg,
html[data-theme="dark"] .action-link.liked svg * {
  fill: currentColor;
  color: #ffffff !important;
}

/* ---- Notifications dropdown ---- */
html[data-theme="dark"] .retro-dropdown-menu,
html[data-theme="dark"] #notif-dropdown,
html[data-theme="dark"] #a11y-dropdown,
html[data-theme="dark"] #upload-dropdown {
  background: #1f1f1f !important;
  border-color: #555 !important;
  color: #f2f2f2 !important;
}

html[data-theme="dark"] .dropdown-body,
html[data-theme="dark"] #notif-list-container {
  background: #1f1f1f !important;
  color: #f2f2f2 !important;
}

html[data-theme="dark"] .notif-item,
html[data-theme="dark"] .notif-item.unread {
  background: #1f1f1f !important;
  border-bottom-color: #3a3a3a !important;
  color: #f2f2f2 !important;
}

html[data-theme="dark"] .notif-item.unread {
  background: #2a2a2a !important;
}

html[data-theme="dark"] .notif-item:hover {
  background: #333333 !important;
}

html[data-theme="dark"] .notif-content,
html[data-theme="dark"] .notif-text,
html[data-theme="dark"] .notif-text strong,
html[data-theme="dark"] .notif-text span,
html[data-theme="dark"] .notif-item * {
  color: #f2f2f2 !important;
}

html[data-theme="dark"] .notif-time {
  color: #b8b8b8 !important;
}

html[data-theme="dark"] .notif-admin-warning .notif-text,
html[data-theme="dark"] .notif-admin-warning .notif-text strong {
  color: #ffd97a !important;
}

html[data-theme="dark"] .dropdown-header,
html[data-theme="dark"] .dropdown-header span,
html[data-theme="dark"] .dropdown-header button,
html[data-theme="dark"] #mark-notifs-read-btn {
  color: #ffffff !important;
}

/* ---- Messages / messenger ---- */
html[data-theme="dark"] #messages-view,
html[data-theme="dark"] .messenger-box,
html[data-theme="dark"] .messenger-container {
  background: #1a1a1a !important;
  color: #f2f2f2 !important;
}

html[data-theme="dark"] .conversation-sidebar,
html[data-theme="dark"] .conversation-list,
html[data-theme="dark"] .conv-search {
  background: #1a1a1a !important;
  color: #f2f2f2 !important;
  border-color: #444 !important;
}

html[data-theme="dark"] .conv-item {
  background: transparent !important;
  border-bottom-color: #333 !important;
  color: #f2f2f2 !important;
}

html[data-theme="dark"] .conv-item:hover {
  background: #2a2a2a !important;
}

html[data-theme="dark"] .conv-item.active {
  background: #2e2e2e !important;
  border-left-color: #ffffff !important;
}

html[data-theme="dark"] .conv-item.is-unread {
  background: #2c2c2c !important;
  border-left-color: #ffffff !important;
}

html[data-theme="dark"] .conv-item.is-unread:hover {
  background: #343434 !important;
}

html[data-theme="dark"] .conv-item.is-unread.active {
  background: #323232 !important;
  border-left-color: #ffffff !important;
}

html[data-theme="dark"] .conv-item-meta,
html[data-theme="dark"] .conv-item-name,
html[data-theme="dark"] .conv-item-header,
html[data-theme="dark"] .conv-item-preview,
html[data-theme="dark"] .conv-item-time {
  color: #f2f2f2 !important;
}

html[data-theme="dark"] .conv-item-preview,
html[data-theme="dark"] .conv-item-time {
  color: #b8b8b8 !important;
}

html[data-theme="dark"] .conv-item.is-unread .conv-item-name,
html[data-theme="dark"] .conv-item.is-unread .conv-item-preview,
html[data-theme="dark"] .conv-item.is-unread .conv-item-time {
  color: #ffffff !important;
}

html[data-theme="dark"] .chat-main-panel,
html[data-theme="dark"] .chat-messages-scroll,
html[data-theme="dark"] .chat-header-bar,
html[data-theme="dark"] .chat-composer-wrapper {
  background: #1a1a1a !important;
  color: #f2f2f2 !important;
  border-color: #444 !important;
}

html[data-theme="dark"] .chat-messages-scroll {
  background: #141414 !important;
}

html[data-theme="dark"] .chat-header-bar,
html[data-theme="dark"] .chat-partner-info,
html[data-theme="dark"] .chat-partner-info *,
html[data-theme="dark"] .chat-partner-now-playing {
  color: #f2f2f2 !important;
}

html[data-theme="dark"] .no-chat-selected,
html[data-theme="dark"] .online-users-header {
  color: #b8b8b8 !important;
}

html[data-theme="dark"] .chat-bubble.bubble-received {
  background: #2a2a2a !important;
  color: #f2f2f2 !important;
  border-color: #555 !important;
}

html[data-theme="dark"] .chat-bubble.bubble-sent {
  background: #3a3a3a !important;
  color: #ffffff !important;
  border-color: #666 !important;
}

html[data-theme="dark"] .chat-bubble .bubble-text,
html[data-theme="dark"] .chat-bubble .bubble-meta {
  color: inherit !important;
}

html[data-theme="dark"] .chat-composer-bar input[type="text"],
html[data-theme="dark"] .conv-search input,
html[data-theme="dark"] #conv-search-input {
  background: #111 !important;
  color: #f2f2f2 !important;
  border-color: #555 !important;
}

html[data-theme="dark"] .chat-composer-wrapper .retro-btn-secondary,
html[data-theme="dark"] .chat-composer-wrapper .retro-btn-primary,
html[data-theme="dark"] .chat-composer-wrapper label.retro-btn-secondary {
  background: linear-gradient(to bottom, #404040 0%, #2a2a2a 100%) !important;
  color: #f5f5f5 !important;
  border: 1px solid #777 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-theme="dark"] .chat-composer-wrapper .retro-btn-primary {
  background: linear-gradient(to bottom, #555 0%, #333 100%) !important;
  color: #fff !important;
}

html[data-theme="dark"] .online-users-wrapper {
  color: #f2f2f2 !important;
}

html[data-theme="dark"] .online-user-card {
  background: #222 !important;
  border-color: #444 !important;
  color: #f2f2f2 !important;
}

html[data-theme="dark"] .online-user-card * {
  color: #f2f2f2 !important;
}


/* ==========================================================================
   HOME — Para ti / Siguiendo
   ========================================================================== */
.feed-mode-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 10px;
  border: 1px solid var(--border-medium);
  background: var(--bg-box);
  overflow: hidden;
}

.feed-mode-tab {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 10px 12px;
  cursor: pointer;
  border-right: 1px solid var(--border-light);
}

.feed-mode-tab:last-child {
  border-right: none;
}

.feed-mode-tab:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
}

.feed-mode-tab.active {
  color: var(--text-primary);
  background: var(--bg-box-header);
  box-shadow: inset 0 -2px 0 #111;
}

html[data-theme="light"] .feed-mode-tab.active {
  box-shadow: inset 0 -2px 0 #222;
}

.composer-box.is-collapsed-newuser .composer-body {
  display: none;
}

.composer-box.is-collapsed-newuser .retro-box-header {
  cursor: pointer;
}

.composer-box.is-collapsed-newuser .retro-box-header::after {
  content: ' · toca para abrir';
  font-weight: normal;
  color: var(--text-muted);
  font-size: 10px;
}

.feed-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feed-skeleton-card,
.explore-skeleton-card {
  height: 88px;
  border: 1px solid var(--border-light);
  background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-box-header) 50%, var(--bg-subtle) 100%);
  background-size: 200% 100%;
  animation: lux-shimmer 1.2s ease-in-out infinite;
}

.explore-skeleton-card {
  height: 120px;
  min-width: 110px;
  flex: 0 0 110px;
}

@keyframes lux-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.feed-empty-suggestions {
  margin-top: 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.feed-empty-rich .profile-suggestion-item {
  border: 1px solid var(--border-light);
  background: var(--bg-subtle);
  padding: 8px;
}

.explore-retry-box {
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* ==========================================================================
   EXPLORAR (/explorar)
   ========================================================================== */
.explore-radio {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid #2e2e2e;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 42%),
    linear-gradient(180deg, #1a1a1a 0%, #101010 100%);
}

.explore-radio-glow {
  position: absolute;
  inset: auto -20% -60% 40%;
  height: 120%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 68%);
  pointer-events: none;
}

.explore-radio .explore-radio-cover-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  z-index: 1;
}

.explore-radio .explore-radio-cover {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid #444444;
  background: #0d0d0d;
  border-radius: 2px;
  display: block;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.explore-radio.is-live:not(.is-paused) .explore-radio-cover {
  border-radius: 50%;
  animation: radio-spin 12s linear infinite;
}

.explore-radio.is-live.is-paused .explore-radio-cover {
  border-radius: 50%;
}

.explore-radio-eq {
  bottom: 4px;
  right: 4px;
  height: 12px;
  gap: 2px;
  padding: 2px 3px;
}

.explore-radio-eq span {
  width: 3px;
}

.explore-radio-body {
  min-width: 0;
  z-index: 1;
}

.explore-radio-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: #aaaaaa;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.explore-radio-brand {
  color: #dddddd;
}

.explore-radio .radio-live-badge {
  margin-left: 2px;
  padding: 1px 5px;
  border: 1px solid #3a3a3a;
  border-radius: 2px;
  font-size: 8px;
}

.explore-radio.is-live:not(.is-paused) .radio-live-badge {
  border-color: #666666;
}

.explore-radio-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explore-radio-artist {
  margin-top: 2px;
  font-size: 12px;
  color: #999999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explore-radio-desc {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: #777777;
  max-width: 42ch;
}

.explore-radio-actions {
  z-index: 1;
  flex-shrink: 0;
}

.explore-radio-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 122px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.explore-radio-play:hover {
  background: transparent;
  color: #ffffff;
  transform: translateY(-1px);
}

.explore-radio-play:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

.explore-radio-play-ico {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
}

.explore-radio-play-ico .lux-ico {
  display: block;
}

.explore-radio.is-live:not(.is-paused) .explore-radio-play {
  background: transparent;
  color: #ffffff;
  border-color: #888888;
}

.explore-radio.is-live:not(.is-paused) .explore-radio-play:hover {
  border-color: #ffffff;
  background: #ffffff;
  color: #111111;
}

html[data-theme="light"] .explore-radio {
  border-color: #c8c8c8;
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0%, transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
}

html[data-theme="light"] .explore-radio-brand,
html[data-theme="light"] .explore-radio-title {
  color: #111111;
}

html[data-theme="light"] .explore-radio-kicker,
html[data-theme="light"] .explore-radio-artist {
  color: #666666;
}

html[data-theme="light"] .explore-radio-desc {
  color: #777777;
}

html[data-theme="light"] .explore-radio-cover {
  border-color: #c8c8c8;
  background: #f0f0f0;
}

html[data-theme="light"] .explore-radio .radio-live-badge {
  border-color: #c8c8c8;
}

html[data-theme="light"] .explore-radio-play {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
}

html[data-theme="light"] .explore-radio-play:hover {
  background: transparent;
  color: #111111;
}

html[data-theme="light"] .explore-radio.is-live:not(.is-paused) .explore-radio-play {
  background: transparent;
  color: #111111;
  border-color: #888888;
}

html[data-theme="light"] .explore-radio.is-live:not(.is-paused) .explore-radio-play:hover {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
}

.explore-hero {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-medium);
}

.explore-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.explore-hero-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.explore-hero-sub {
  margin: 2px 0 0;
  font-size: 11px;
}

.explore-hero-covers {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.explore-hero-card {
  position: relative;
  flex: 0 0 132px;
  width: 132px;
  border: 1px solid var(--border-medium);
  background: #111;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: #fff;
  overflow: hidden;
}

.explore-hero-cover {
  display: block;
  width: 132px;
  height: 132px;
  object-fit: cover;
}

.explore-hero-play {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.explore-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.55));
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.explore-hero-meta strong {
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explore-hero-subrow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 10px;
  color: #ccc;
}

.explore-hero-artist {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explore-hero-plays {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  cursor: help;
  outline: none;
}

.explore-hero-plays svg {
  flex-shrink: 0;
  opacity: 0.9;
}

.explore-hero-tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  z-index: 5;
  min-width: 118px;
  max-width: 150px;
  padding: 5px 7px;
  background: #111;
  border: 1px solid #888;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  color: #f2f2f2;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  pointer-events: none;
}

.explore-hero-tip::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 100%;
  border: 5px solid transparent;
  border-top-color: #888;
}

.explore-hero-plays:hover .explore-hero-tip,
.explore-hero-plays:focus-visible .explore-hero-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

html[data-theme="light"] .explore-hero-tip {
  background: #fff;
  border-color: #333;
  color: #111;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .explore-hero-tip::after {
  border-top-color: #333;
}

.explore-hero-card:hover {
  border-color: #aaa;
}

.explore-genre-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -6px 0 14px;
}

.explore-genre-chip {
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
}

.explore-genre-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-dark);
}

.explore-genre-chip.active {
  background: #222;
  color: #fff;
  border-color: #111;
}

html[data-theme="light"] .explore-genre-chip.active {
  background: #222;
  color: #fff;
}

html[data-theme="light"] .explore-hero-card {
  background: #1a1a1a;
  border-color: #bbb;
}

.explore-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-medium);
  padding-bottom: 12px;
}

.explore-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

.explore-discover {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.explore-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 560px;
}

.explore-search-ico {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
  line-height: 1;
}

.explore-search-input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 8px 34px 8px 30px;
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  color: var(--text-primary);
  outline: none;
}

.explore-search-input:focus {
  border-color: var(--border-dark);
  background: var(--bg-primary, var(--bg-subtle));
}

.explore-search-input::-webkit-search-cancel-button {
  display: none;
}

.explore-search-clear {
  position: absolute;
  right: 6px;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
}

.explore-search-clear:hover {
  color: var(--text-primary);
  background: var(--bg-hover, rgba(127, 127, 127, 0.15));
}

.explore-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  width: 100%;
}

.explore-control {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.explore-control-check {
  justify-content: flex-end;
  padding-bottom: 2px;
}

.explore-check-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.explore-check-label input {
  margin: 0;
  accent-color: #333;
}

.explore-filter-input {
  font: inherit;
  font-size: 11px;
  padding: 5px 8px;
  min-width: 100px;
  max-width: 140px;
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.explore-bpm-range {
  display: flex;
  align-items: center;
  gap: 4px;
}

.explore-bpm-input {
  width: 64px;
  min-width: 0;
  max-width: 72px;
}

.explore-bpm-sep {
  color: var(--text-muted);
  font-size: 12px;
}

.explore-clear-filters {
  align-self: flex-end;
  margin-left: auto;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border: 1px solid var(--border-medium);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.explore-clear-filters:hover {
  border-color: var(--border-dark);
  color: var(--text-primary);
}

.explore-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.explore-active-chip {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.explore-active-chip:hover {
  border-color: var(--border-dark);
  color: var(--text-primary);
}

.explore-results-meta {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.explore-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.explore-sort-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: bold;
  white-space: nowrap;
}

.explore-sort-select {
  min-width: 140px;
  font-size: 11px;
  padding: 5px 8px;
}

html[data-theme="light"] .explore-search-input,
html[data-theme="light"] .explore-filter-input,
html[data-theme="light"] .explore-sort-select {
  background: #fff;
  border-color: #ccc;
}

html[data-theme="light"] .explore-active-chip,
html[data-theme="light"] .explore-clear-filters {
  background: #f4f4f4;
}

@media (max-width: 640px) {
  .explore-search-wrap {
    max-width: 100%;
  }

  .explore-controls-row {
    gap: 8px;
  }

  .explore-control[data-explore-control="sort"] .explore-sort-select,
  .explore-control[data-explore-control="genre"] .explore-sort-select,
  .explore-control[data-explore-control="key"] .explore-sort-select {
    min-width: 120px;
  }

  .explore-clear-filters {
    margin-left: 0;
    width: 100%;
  }
}

.explore-filter-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  background: linear-gradient(to bottom, #333 0%, #222 100%);
  border: 1px solid #555;
  color: #ddd;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.explore-filter-btn:hover {
  border-color: #888;
  color: #fff;
}

.explore-filter-btn.active {
  background: linear-gradient(to bottom, #555 0%, #333 100%);
  border-color: #aaa;
  color: #fff;
}

.explore-songs-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.explore-song-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.explore-song-card:hover {
  border-color: var(--border-medium);
  background: var(--bg-box-header);
}

.explore-song-cover {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--border-medium);
  flex-shrink: 0;
  background: #111;
}

.explore-song-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.explore-song-title {
  font-weight: bold;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explore-song-title:hover {
  text-decoration: underline;
}

.explore-song-artists {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explore-song-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.explore-song-author {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: bold;
}

.explore-song-author:hover {
  text-decoration: underline;
  color: var(--text-primary);
}

.explore-song-actions {
  flex-shrink: 0;
}

.explore-profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.explore-profile-card {
  background: var(--bg-box);
  border: 1px solid var(--border-medium);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.explore-profile-banner {
  height: 88px;
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}

.explore-profile-banner.is-empty {
  background-image: linear-gradient(135deg, #2a2a2a 0%, #151515 55%, #222 100%);
}

.explore-profile-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px 12px;
  position: relative;
}

.explore-profile-avatar {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 2px solid var(--border-medium);
  margin-top: -28px;
  background: #111;
  cursor: pointer;
  flex-shrink: 0;
}

.explore-profile-info {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.explore-profile-name {
  font-weight: bold;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explore-profile-name:hover,
.explore-profile-username:hover {
  text-decoration: underline;
}

.explore-profile-username {
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explore-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 10px;
  color: var(--text-secondary);
}

.explore-profile-stats strong {
  color: var(--text-primary);
}

.explore-profile-actions {
  flex-shrink: 0;
  padding-top: 2px;
}

.explore-follow-btn.is-following {
  opacity: 0.95;
}

.explore-empty {
  padding: 20px 8px;
}

/* ----- Explore Beats marketplace ----- */
.explore-beats-intro {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 0;
  border: none;
  background: none;
  animation: none;
}
.explore-beats-kicker {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #999;
}
.explore-beats-heading {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #f2f2f2;
}
.explore-beats-lede {
  margin: 6px 0 0;
  font-size: 12px;
  color: #9a9a9a;
}
.explore-beats-intro-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.explore-beats-cart-link,
.explore-beats-lib-link {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid #555;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.explore-beats-cart-link {
  background: #111;
  border-color: #222;
  color: #fff;
}
.explore-beats-cart-link:hover {
  background: #222;
  border-color: #444;
  color: #fff;
  text-decoration: none;
}
.explore-beats-lib-link {
  background: transparent;
  color: #ddd;
}
.explore-beats-lib-link:hover {
  border-color: #888;
  background: rgba(255,255,255,0.06);
  color: #fff;
  text-decoration: none;
}

.explore-beats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}
.explore-beat-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #3f3f3f;
  background: linear-gradient(180deg, #1e1e1e 0%, #151515 100%);
  overflow: hidden;
  animation: beatMarketIn 0.4s ease both;
  animation-delay: calc(var(--i, 0) * 35ms);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.explore-beat-card:hover,
.explore-beat-card.is-hover {
  border-color: #666;
  transform: translateY(-2px);
}
.explore-beat-cover-wrap {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: #111;
  text-decoration: none;
}
.explore-beat-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.explore-beat-card:hover .explore-beat-cover {
  transform: scale(1.04);
}
.explore-beat-cover-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.72) 100%);
  pointer-events: none;
}
.explore-beat-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.45);
  color: #fff;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.explore-beat-card:hover .explore-beat-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.explore-beat-chips {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 1;
  pointer-events: none;
}
.explore-beat-chip {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.55);
  color: #eee;
}
.explore-beat-chip-live {
  border-color: #5a8a5a;
  color: #c8ecc8;
  background: rgba(30,70,30,0.7);
}
.explore-beat-chip-hot {
  border-color: #a55;
  color: #f0c0c0;
  background: rgba(90,30,30,0.7);
}
.explore-beat-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 10px 11px;
  min-width: 0;
}
.explore-beat-title {
  font-size: 13px;
  font-weight: 700;
  color: #f2f2f2;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.explore-beat-title:hover {
  text-decoration: underline;
  color: #fff;
}
.explore-beat-artist {
  font-size: 11px;
  color: #9a9a9a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.explore-beat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 10px;
  color: #777;
  margin-top: 2px;
}
.explore-beat-author {
  color: #bbb;
  text-decoration: none;
  font-weight: 700;
}
.explore-beat-author:hover {
  color: #fff;
  text-decoration: underline;
}
.explore-beat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #333;
}
.explore-beat-price {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 11px;
  color: #bbb;
  min-width: 0;
  line-height: 1.15;
}
.explore-beat-price strong {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #fff;
  font-weight: 700;
}
.explore-beat-price em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #777;
}
.explore-beat-price.is-soldout {
  color: #d08080;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.explore-beat-price.is-preview {
  color: #888;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.explore-beat-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.explore-beat-play-btn,
.explore-beat-buy-btn,
.explore-beat-soldout-btn,
.explore-beat-view-btn {
  appearance: none;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.explore-beat-play-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #555;
  background: rgba(0,0,0,0.3);
  color: #eee;
  padding: 0;
}
.explore-beat-play-btn:hover {
  border-color: #888;
  background: rgba(255,255,255,0.08);
}
.explore-beat-buy-btn {
  border: 1px solid #1a1a1a !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 9px;
  height: 28px;
  animation: none !important;
}
.explore-beat-buy-btn:hover {
  background: #242424 !important;
  border-color: #444 !important;
  color: #fff !important;
}
.explore-beat-soldout-btn {
  border: 1px solid #a33;
  background: #c0392b;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 8px;
  height: 28px;
  cursor: not-allowed;
  opacity: 0.9;
  pointer-events: none;
}
.explore-beat-view-btn {
  border: 1px solid #555;
  background: transparent;
  color: #ddd;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 9px;
  height: 28px;
}
.explore-beat-view-btn:hover {
  border-color: #888;
  background: rgba(255,255,255,0.06);
  color: #fff;
  text-decoration: none;
}

.explore-beats-empty {
  text-align: center;
  padding: 48px 20px;
  border: 1px dashed #555;
  background: rgba(0,0,0,0.18);
  margin-top: 4px;
}
.explore-beats-empty-visual {
  width: 84px;
  height: 84px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border: 1px solid #4a4a4a;
  background: #1a1a1a;
}
.explore-beats-empty-disc {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #666;
  background:
    radial-gradient(circle at 50% 50%, #222 0 10px, transparent 11px),
    repeating-radial-gradient(circle at 50% 50%, #333 0 2px, #1a1a1a 3px 5px);
}
.explore-beats-empty h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #f2f2f2;
}
.explore-beats-empty p {
  margin: 0;
  font-size: 13px;
  color: #999;
}

html[data-theme="light"] .explore-beats-intro {
  background: none;
  border: none;
}
html[data-theme="light"] .explore-beats-kicker,
html[data-theme="light"] .explore-beats-lede,
html[data-theme="light"] .explore-beat-artist,
html[data-theme="light"] .explore-beat-meta {
  color: #666;
}
html[data-theme="light"] .explore-beats-heading,
html[data-theme="light"] .explore-beat-title,
html[data-theme="light"] .explore-beats-empty h3 {
  color: #111;
}
html[data-theme="light"] .explore-beats-cart-link {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
html[data-theme="light"] .explore-beats-lib-link {
  background: #fff;
  border-color: #c4c4c4;
  color: #222;
}
html[data-theme="light"] .explore-beats-lib-link:hover {
  background: #f2f2f2;
  border-color: #999;
  color: #111;
}
html[data-theme="light"] .explore-beat-card {
  background: #fff;
  border-color: #d0d0d0;
}
html[data-theme="light"] .explore-beat-card:hover {
  border-color: #999;
}
html[data-theme="light"] .explore-beat-cover {
  background: #ececec;
}
html[data-theme="light"] .explore-beat-author {
  color: #333;
}
html[data-theme="light"] .explore-beat-author:hover {
  color: #000;
}
html[data-theme="light"] .explore-beat-footer {
  border-top-color: #e0e0e0;
}
html[data-theme="light"] .explore-beat-price {
  color: #666;
}
html[data-theme="light"] .explore-beat-price strong {
  color: #111;
}
html[data-theme="light"] .explore-beat-price.is-soldout {
  color: #a04040;
}
html[data-theme="light"] .explore-beat-play-btn,
html[data-theme="light"] .explore-beat-view-btn {
  background: #fff;
  border-color: #c4c4c4;
  color: #222;
}
html[data-theme="light"] .explore-beat-play-btn:hover,
html[data-theme="light"] .explore-beat-view-btn:hover {
  background: #f2f2f2;
  border-color: #999;
  color: #111;
}
html[data-theme="light"] .explore-beat-buy-btn {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
html[data-theme="light"] .explore-beats-empty {
  background: #fff;
  border-color: #c4c4c4;
}
html[data-theme="light"] .explore-beats-empty-visual {
  background: #f3f3f3;
  border-color: #d0d0d0;
}
html[data-theme="light"] .explore-beats-empty-disc {
  border-color: #999;
  background:
    radial-gradient(circle at 50% 50%, #ddd 0 10px, transparent 11px),
    repeating-radial-gradient(circle at 50% 50%, #ccc 0 2px, #f0f0f0 3px 5px);
}
html[data-theme="light"] .explore-beats-empty p {
  color: #666;
}

@media (max-width: 560px) {
  .explore-beats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .explore-beats-heading { font-size: 18px; }
  .explore-beat-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .explore-beat-actions {
    justify-content: space-between;
  }
  .explore-beat-buy-btn,
  .explore-beat-soldout-btn,
  .explore-beat-view-btn {
    flex: 1;
  }
}

.explore-pager {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #333;
}

.explore-pager-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.explore-pager-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.explore-pager-num {
  min-width: 28px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid #555;
  background: linear-gradient(to bottom, #333, #1e1e1e);
  color: #eee;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 0;
}

.explore-pager-num:hover {
  border-color: #888;
  background: linear-gradient(to bottom, #444, #2a2a2a);
}

.explore-pager-num.is-active {
  background: linear-gradient(to bottom, #555, #333);
  border-color: #c9a227;
  color: #fff;
  cursor: default;
}

.explore-pager-ellipsis {
  color: #888;
  font-size: 11px;
  padding: 0 2px;
}

.explore-pager-status {
  font-size: 10px;
  color: #999;
  white-space: nowrap;
}

.explore-pager-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

html[data-theme="light"] .explore-pager {
  border-top-color: #ccc;
}

html[data-theme="light"] .explore-pager-num {
  background: linear-gradient(to bottom, #fff, #e8e8e8);
  border-color: #999;
  color: #111;
}

html[data-theme="light"] .explore-pager-num.is-active {
  border-color: #8a6d12;
  background: linear-gradient(to bottom, #fff8d8, #f0e2a0);
}

html[data-theme="light"] .explore-pager-status {
  color: #666;
}

.edit-banner-preview {
  border: 1px solid var(--border-medium);
  background: #111;
}

@media (max-width: 600px) {
  .explore-profiles-grid {
    grid-template-columns: 1fr;
  }
  .explore-song-cover {
    width: 48px;
    height: 48px;
  }
}

/* ==========================================================================
   MOBILE EXPERIENCE POLISH (phones / small tablets)
   ========================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 768px) {
  :root {
    --mobile-player-h: 108px;
    --mobile-nav-h: 56px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --player-dock: calc(var(--mobile-player-h) + var(--safe-bottom));
  }

  html, body, body.theme-bw {
    overflow-x: hidden !important;
    overflow-x: clip !important;
    max-width: 100vw !important;
    overscroll-behavior-x: none;
  }

  /* Explorar: Radio Luxuria destacada en móvil */
  .explore-radio {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "cover body"
      "actions actions";
    gap: 12px;
    padding: 14px;
    margin-bottom: 16px;
  }

  .explore-radio .explore-radio-cover-wrap {
    grid-area: cover;
    width: 64px;
    height: 64px;
  }

  .explore-radio .explore-radio-cover {
    width: 64px;
    height: 64px;
  }

  .explore-radio-body {
    grid-area: body;
  }

  .explore-radio-desc {
    display: none;
  }

  .explore-radio-actions {
    grid-area: actions;
  }

  .explore-radio-play {
    width: 100%;
    min-width: 0;
    height: 42px;
    font-size: 13px;
  }

  .explore-radio-title {
    font-size: 14px;
  }

  /* Explorar: todas las categorías visibles en móvil */
  .explore-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .explore-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .explore-filter-btn {
    width: 100%;
    text-align: center;
    padding: 8px 6px;
    font-size: 10px;
    letter-spacing: 0.2px;
  }

  .explore-sort-wrap {
    width: 100%;
  }

  .explore-sort-select {
    min-width: 0;
    flex: 1 1 120px;
  }

  .explore-genre-chips {
    max-width: 100%;
  }

  body.theme-bw {
    zoom: 1 !important;
    font-size: 13px;
    padding-bottom: calc(var(--mobile-player-h) + var(--safe-bottom) + 8px) !important;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.08);
  }

  body.theme-bw.has-mobile-nav {
    --mobile-nav-h: 56px;
    --player-dock: calc(var(--mobile-nav-h) + var(--mobile-player-h) + var(--safe-bottom));
    padding-bottom: calc(var(--mobile-nav-h) + var(--mobile-player-h) + var(--safe-bottom) + 8px) !important;
  }

  body.theme-bw.has-mobile-nav:not(.has-player-open) {
    padding-bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 8px) !important;
  }

  #app-workspace,
  .page-body,
  .feed-layout-clean,
  .center-feed {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .retro-header,
  .header-container {
    max-width: 100% !important;
    box-sizing: border-box;
    /* no overflow clip here — would crop fixed dropdowns */
  }

  .header-nav {
    max-width: 100%;
  }

  body.theme-bw.view-messages {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    padding-bottom: calc(var(--mobile-player-h) + var(--safe-bottom)) !important;
    overflow: hidden !important;
  }

  /* Player docks above bottom nav — reserve both so the composer isn't clipped */
  body.theme-bw.view-messages.has-mobile-nav {
    padding-bottom: calc(var(--mobile-nav-h) + var(--mobile-player-h) + var(--safe-bottom)) !important;
  }

  body.theme-bw.view-messages.has-mobile-nav:not(.has-player-open) {
    padding-bottom: calc(var(--mobile-nav-h) + var(--safe-bottom)) !important;
  }

  /* ----- Header: compact + searchable ----- */
  .retro-header {
    height: auto !important;
    min-height: 44px;
    padding: 6px 10px !important;
    padding-top: calc(6px + var(--safe-top)) !important;
    position: sticky;
    top: 0;
  }

  .header-container {
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
  }

  .header-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    align-items: center;
  }

  .header-brand-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
    max-width: none;
  }

  /* Autenticado en móvil: sin logo, solo avatar + buscar + notifs */
  body.has-mobile-nav .header-brand-stack > .logo,
  body.has-mobile-nav #header-logo {
    display: none !important;
  }

  body.has-mobile-nav .user-account-menu-wrap {
    display: block !important;
  }

  body.has-mobile-nav .user-account-menu-wrap .user-pill-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    max-width: none;
  }

  body.has-mobile-nav .user-pill-link #nav-user-name,
  body.has-mobile-nav .user-pill-link .user-pill-caret {
    display: none !important;
  }

  body.has-mobile-nav .user-pill-link .mini-avatar {
    width: 32px;
    height: 32px;
    border-radius: 2px;
  }

  .logo-text {
    font-size: 18px !important;
    letter-spacing: -0.5px;
  }

  .search-box-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
  }

  .search-box {
    width: 100%;
  }

  .search-box input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important; /* prevents iOS input zoom */
  }

  .header-container > .header-quick-actions {
    margin-left: auto;
    margin-right: 0;
    order: 2;
  }

  .header-nav {
    order: 3;
    margin-left: 0;
    width: 100%;
    height: auto !important;
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Con bottom nav: sin segunda fila vacía en el header */
  body.has-mobile-nav .header-nav {
    display: none !important;
  }

  /* Do NOT force-show guest strip when logged in (inline display:none must win) */
  .header-guest {
    order: 3;
    width: 100%;
    height: auto !important;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding: 6px 0 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .header-guest[style*="display: none"],
  .header-guest[style*="display:none"],
  .header-guest.is-hidden,
  .header-guest[hidden] {
    display: none !important;
  }

  .header-nav::-webkit-scrollbar {
    display: none;
  }

  .header-nav .nav-item,
  .header-nav .icon-only-nav-item,
  .a11y-nav-btn,
  .header-nav .user-pill-link {
    height: auto !important;
    min-width: 40px;
    min-height: 40px;
    max-height: 44px;
    padding: 6px 6px !important;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
  }

  .header-nav .nav-item .custom-svg-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .header-nav .nav-item.active {
    background-color: #2a2a2a;
    border-bottom: 3px solid #fff;
  }

  /* Prevent active nav from stretching into content */
  .header-nav,
  .header-nav .nav-item,
  .header-nav .icon-only-nav-item,
  .header-nav .user-pill-link {
    max-height: 48px !important;
    overflow: visible;
  }

  .notif-dropdown-wrapper {
    height: auto !important;
  }

  .nav-item span:not(.badge) {
    display: none !important;
  }

  /* Sin bottom nav (guest): ocultar pill de cuenta */
  body:not(.has-mobile-nav) .header-brand-stack .user-account-menu-wrap {
    display: none;
  }

  /* Fixed to viewport — absolute 320px menus were escaping left and enabling sideways scroll */
  .retro-dropdown-menu,
  #notif-dropdown,
  #upload-dropdown,
  #user-account-dropdown {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    top: calc(var(--safe-top) + 96px) !important;
    z-index: 5000 !important;
    box-sizing: border-box;
  }

  /* Subir se abre desde el bottom nav: anclar arriba de la barra, no bajo el header */
  body.has-mobile-nav #upload-dropdown {
    top: auto !important;
    bottom: calc(var(--mobile-nav-h, 56px) + var(--safe-bottom, 0px) + 8px) !important;
    z-index: 9700 !important;
  }

  #notif-dropdown .dropdown-body {
    max-height: min(52dvh, 360px);
  }

  #notif-dropdown .notif-text {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  #notif-dropdown .notif-content {
    min-width: 0;
  }

  .search-box-wrapper {
    position: relative;
    z-index: 5100;
  }

  .search-results-dropdown,
  #search-results-dropdown {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    top: calc(var(--safe-top, 0px) + 52px) !important;
    max-width: none !important;
    width: auto !important;
    max-height: min(60dvh, 420px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 5200 !important;
    margin-top: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  }

  .search-result-row {
    min-height: 44px;
    padding: 10px 12px;
    gap: 10px;
  }

  .search-row-thumb {
    width: 36px;
    height: 36px;
  }

  .search-row-title {
    font-size: 13px;
  }

  .search-row-sub {
    font-size: 11px;
  }

  .search-result-row .mini-btn {
    min-height: 36px;
    padding: 6px 10px;
  }

  /* ----- Page body: edge-to-edge, less dead space ----- */
  .page-body {
    margin: 6px auto 8px auto !important;
    padding: 0 6px 8px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.view-messages .page-body {
    margin: 0 auto !important;
    padding: 2px 4px 0 !important;
  }

  .feed-layout-clean {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .center-feed,
  .center-content {
    width: 100% !important;
    max-width: 100% !important;
    order: 1;
  }

  /* Hide bulky left sidebar on phones — it only added empty vertical space */
  .left-sidebar {
    display: none !important;
  }
  .left-sidebar:has(#feed-profile-completion:not([hidden])) {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    order: 0;
  }
  .left-sidebar:has(#feed-profile-completion:not([hidden])) > *:not(#feed-profile-completion) {
    display: none !important;
  }

  .retro-box {
    border-radius: 2px;
    margin-bottom: 8px !important;
  }

  .posts-stream {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .posts-stream > .post-card,
  .posts-stream > .retro-box {
    margin-bottom: 0 !important;
  }

  .composer-box {
    margin-bottom: 0 !important;
  }

  .composer-body {
    padding: 8px !important;
  }

  .composer-body .retro-textarea,
  #composer-text {
    min-height: 64px !important;
    max-height: 140px;
  }

  .composer-footer {
    gap: 6px !important;
    flex-wrap: wrap;
  }

  .post-card,
  .post-card-header,
  .post-actions-bar,
  .post-comments-section {
    max-width: 100%;
  }

  .post-card-header {
    padding: 8px !important;
    gap: 8px !important;
  }

  .post-card .post-body,
  .post-card .post-text {
    padding: 8px !important;
  }

  .post-actions-bar,
  .post-actions {
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: center;
    gap: 2px !important;
    padding: 6px 4px !important;
  }

  .action-link,
  .post-actions button,
  .post-actions a {
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    max-width: none;
    padding: 6px 2px !important;
    font-size: 0 !important; /* hide leftover raw text nodes */
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    gap: 3px !important;
  }

  .action-link svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }

  /* Icon + count only — avoid wrapping "Ya no me gusta" / "Compartir" */
  .action-link .action-link-label {
    display: none !important;
  }

  .action-link .action-link-count {
    display: inline !important;
    font-size: 11px !important;
    font-weight: bold;
  }

  .post-comments-section {
    padding: 6px 8px !important;
  }

  .comment-form {
    gap: 4px !important;
  }

  .comment-form .mini-btn {
    flex-shrink: 0;
    padding: 6px 8px !important;
  }

  /* iOS Safari auto-zooms focused fields under 16px — cover every text field */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
  textarea,
  select,
  .retro-input,
  .retro-textarea,
  .retro-select,
  .mini-input,
  .mini-textarea,
  .comment-form input,
  .entity-comment-form .retro-input,
  .chat-composer-bar input[type="text"],
  .conv-search .retro-input,
  .playlist-modal-box .retro-input,
  .lightbox-content-box .retro-input,
  .playlist-modal-box .retro-textarea,
  .lightbox-content-box .retro-textarea,
  .playlist-modal-box .retro-select,
  .lightbox-content-box .retro-select,
  #upload-song-modal .retro-input,
  #upload-album-modal .retro-input,
  #add-album-song-modal .retro-input,
  #composer-text,
  #chat-input-text,
  #global-search-input,
  #song-comment-input,
  #conv-search-input,
  #create-group-name,
  #create-group-search,
  #manage-group-name,
  #manage-group-search,
  #suggestion-text {
    font-size: 16px !important;
  }

  .composer-attachment-dropdown {
    left: 0 !important;
    right: auto !important;
    max-width: calc(100vw - 24px);
  }

  /* ----- Bottom nav (auth only) ----- */
  .mobile-bottom-nav:not([hidden]) {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9600;
    height: calc(56px + var(--safe-bottom));
    padding: 4px 4px calc(4px + var(--safe-bottom));
    background: #141414;
    border-top: 1px solid #333;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    box-sizing: border-box;
  }

  .mobile-nav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 4px 2px;
    color: #999;
    text-decoration: none;
    background: none;
    border: none;
    font: inherit;
    font-size: 9px;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-item svg {
    display: block;
    flex-shrink: 0;
  }

  .mobile-nav-item.active {
    color: #fff;
  }

  .mobile-nav-item.mobile-nav-upload .mobile-nav-upload-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eee;
    color: #111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: -10px;
    border: 2px solid #141414;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  }

  .mobile-nav-item.mobile-nav-upload span:not(.mobile-nav-upload-icon) {
    margin-top: -2px;
  }

  /* Notificaciones arriba a la derecha; Mensajes va en la bottom nav */
  body.has-mobile-nav .header-quick-actions.is-visible {
    display: flex !important;
    align-items: center;
    gap: 0;
    align-self: center;
    margin-top: 0;
  }

  body.has-mobile-nav #messages-nav-slot {
    display: none !important;
  }

  body.has-mobile-nav .header-quick-actions .header-icon-slot,
  body.has-mobile-nav .header-quick-actions .notif-dropdown-wrapper {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  body.has-mobile-nav .header-quick-actions #nav-btn-notifications {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }

  body.has-mobile-nav .header-quick-actions #nav-btn-notifications .custom-svg-icon {
    width: 18px !important;
    height: 18px !important;
  }

  html[data-theme="light"] .header-quick-actions #nav-btn-notifications.active {
    background: rgba(0, 0, 0, 0.08) !important;
  }

  .mobile-nav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-nav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
    line-height: 16px;
    border-radius: 8px;
    background: #c44;
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
  }

  /* ----- Player: pista + controles, barra de avance debajo, encima del nav ----- */
  .luxuria-player-bar,
  #luxuria-global-player.luxuria-player-bar {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas:
      "info transport tools"
      "seek seek seek" !important;
    align-items: center !important;
    gap: 6px 8px !important;
    height: auto !important;
    min-height: var(--mobile-player-h);
    padding: 8px 10px 8px !important;
    z-index: 10000 !important;
  }

  body.has-mobile-nav .luxuria-player-bar,
  body.has-mobile-nav #luxuria-global-player.luxuria-player-bar {
    bottom: calc(var(--mobile-nav-h, 56px) + var(--safe-bottom)) !important;
  }

  .luxuria-player-bar.is-open,
  #luxuria-global-player.luxuria-player-bar.is-open {
    display: grid !important;
  }

  .player-info-section {
    grid-area: info;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 8px;
  }

  .player-controls-section,
  #luxuria-global-player .player-controls-section {
    display: contents !important;
  }

  .player-transport {
    grid-area: transport;
    gap: 2px;
  }

  .player-seek-row {
    grid-area: seek;
    display: flex !important;
    width: 100%;
  }

  .player-track-time {
    display: none !important;
  }

  .player-cover-wrap,
  .player-cover-art {
    width: 44px !important;
    height: 44px !important;
  }

  .player-track-title {
    font-size: 12px !important;
  }

  .player-track-artist {
    font-size: 10px !important;
  }

  .player-volume-section,
  #luxuria-global-player .player-volume-section {
    display: flex !important;
    grid-area: tools;
    max-width: none !important;
    margin: 0;
    gap: 0;
  }

  .player-track-actions .player-btn:not(#player-dots-btn) {
    display: none !important;
  }

  #player-btn-fullscreen {
    display: none !important;
  }

  .player-volume-cluster,
  #player-btn-share,
  #player-btn-shuffle,
  #player-btn-repeat {
    display: none !important;
  }

  .player-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 6px !important;
  }

  .player-btn-main {
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
  }

  /* ----- Messenger: vertical only, no sideways scroll ----- */
  body.view-messages,
  body.view-messages #app-workspace,
  body.view-messages .page-body,
  body.view-messages #messages-view,
  body.view-messages .messenger-box,
  body.view-messages .messenger-container,
  body.view-messages .conversation-sidebar,
  body.view-messages .conversation-sidebar-scroll,
  body.view-messages .conversation-list,
  body.view-messages .chat-main-panel {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body.view-messages .page-body {
    margin: 0 !important;
    padding: 0 !important;
  }

  .messenger-box {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .messenger-box > .retro-box-header {
    display: none !important;
  }

  .messenger-container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    min-height: 0 !important;
    height: 100% !important;
    border-top: none !important;
  }

  .conversation-sidebar,
  .chat-main-panel {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
  }

  body.view-messages:not(.mobile-chat-open) .chat-main-panel {
    display: none !important;
  }

  body.view-messages:not(.mobile-chat-open) .conversation-sidebar {
    display: flex !important;
    flex-direction: column !important;
  }

  body.view-messages.mobile-chat-open .conversation-sidebar {
    display: none !important;
  }

  body.view-messages.mobile-chat-open .chat-main-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  body.view-messages:not(.mobile-chat-open) .chat-composer-wrapper {
    display: none !important;
  }

  body.view-messages.mobile-chat-open .chat-composer-wrapper {
    display: block !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    position: relative;
    z-index: 8;
    background: var(--bg-subtle, #1a1a1a);
  }

  .conversation-sidebar {
    border-right: none !important;
  }

  .conversation-sidebar-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }

  .conversation-list {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    width: 100%;
  }

  .conv-search {
    flex-shrink: 0;
    z-index: 1;
    background: var(--bg-box, #1a1a1a);
    padding: 8px !important;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }

  .conv-search .retro-input {
    font-size: 16px !important;
    min-width: 0;
    flex: 1;
  }

  .conv-item {
    min-height: 56px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .conv-item > img,
  .conv-item .mini-avatar {
    flex-shrink: 0;
  }

  .conv-item-meta {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .conv-item-header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
    min-width: 0;
  }

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

  .conv-item-time {
    flex-shrink: 0;
    font-size: 10px;
    opacity: 0.75;
  }

  .conv-item-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.8;
    font-size: 11px;
    max-width: 100%;
  }

  body.view-messages .retro-header {
    z-index: 50;
  }

  body.view-messages #messages-view {
    position: relative;
    z-index: 1;
  }

  .mobile-online-users-mount {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
  }

  .mobile-online-users-block {
    margin: 0 !important;
    padding: 10px 8px 16px !important;
    text-align: left;
    border-top: 1px solid var(--border-light, #333);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .mobile-online-users-block .online-users-header {
    margin: 0 4px 8px;
  }

  /* Single column — 2-col grid was causing sideways scroll */
  .mobile-online-users-block .online-users-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .mobile-online-users-block .online-user-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    min-width: 0;
  }

  .mobile-online-users-block .online-user-name,
  .mobile-online-users-block .online-user-music {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  .chat-header-bar {
    gap: 6px;
    padding: 8px !important;
    flex-wrap: nowrap;
    align-items: center;
  }

  .chat-back-btn {
    display: inline-flex !important;
  }

  body:not(.mobile-chat-open) .chat-back-btn {
    display: none !important;
  }

  .chat-partner-info {
    flex: 1 1 auto;
    min-width: 0;
  }

  .partner-meta-box h4 {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chat-header-actions {
    gap: 4px;
  }

  .chat-header-actions .mini-btn {
    font-size: 10px !important;
    padding: 5px 7px !important;
    white-space: nowrap;
  }

  #chat-view-profile-btn {
    font-size: 10px !important;
  }

  .chat-messages-scroll {
    padding: 10px 8px !important;
  }

  .chat-messages-scroll > .chat-bubble.bubble-sent,
  .chat-messages-scroll > .chat-bubble.bubble-received,
  .chat-bubble {
    max-width: 88% !important;
  }

  .no-chat-selected {
    margin: 12px auto !important;
    padding: 8px !important;
  }

  .chat-composer-wrapper {
    /* Safe area is already on the bottom nav / player — don't double-pad here */
    padding-bottom: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .chat-composer-bar {
    gap: 4px !important;
    padding: 8px !important;
    width: 100%;
    box-sizing: border-box;
  }

  .chat-composer-bar input[type="text"] {
    min-width: 0;
    flex: 1 1 auto;
  }

  .chat-composer-bar .mini-btn,
  .chat-composer-bar label.mini-btn {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px !important;
    flex-shrink: 0;
  }

  /* ----- Modals ----- */
  .lightbox-modal {
    padding: 8px !important;
    align-items: flex-end !important;
  }

  .lightbox-content-box,
  .playlist-modal-box,
  .report-modal-box,
  .manage-group-modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(92dvh, 920px) !important;
    margin: 0 !important;
    border-radius: 8px 8px 0 0;
  }

  .retro-fb-popup {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    right: 8px !important;
    left: 8px !important;
    bottom: calc(var(--mobile-player-h) + var(--safe-bottom) + 8px) !important;
  }

  .retro-fb-popup.is-minimized {
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    left: auto !important;
    border-radius: 0 !important;
  }

  .fb-popup-scrollable-body {
    height: min(42vh, 260px);
  }

  .luxuria-toast-container {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(var(--mobile-player-h) + var(--safe-bottom) + 10px) !important;
    max-width: none !important;
  }

  /* ----- Profiles / media pages ----- */
  /* After messages (overflow:hidden + 100dvh), force document scroll again */
  html:has(body.view-profile),
  body.theme-bw.view-profile,
  body.view-profile {
    height: auto !important;
    max-height: none !important;
    min-height: 100dvh !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    touch-action: pan-y pinch-zoom;
  }

  body.view-profile .page-body,
  body.view-profile #app-workspace,
  body.view-profile #profile-view {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y pinch-zoom;
  }

  body.view-profile .page-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* Static wallpaper on phones — animated filter/transform blocks scroll on WebKit */
  body.view-profile #profile-bg-layer,
  body.view-profile #profile-bg-layer .profile-bg-paint,
  body.view-profile #profile-bg-layer .profile-bg-img {
    will-change: auto !important;
    transform: none !important;
    filter: none !important;
  }

  /* maintain-mode img uses translate for positioning; keep that one exception */
  body.view-profile #profile-bg-layer.uses-bg-img[data-bg-mode="maintain"] .profile-bg-img {
    transform: translate(-50%, -50%) !important;
  }

  .profile-page-canvas {
    padding: 10px 8px 14px !important;
    margin: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  .profile-inner-content {
    width: 100%;
    max-width: 100%;
    gap: 10px;
  }

  .profile-hero,
  .profile-top-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 14px 12px !important;
  }

  .profile-hero-identity {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .profile-hero-avatar,
  .profile-page-canvas .profile-hero-avatar {
    width: 84px !important;
    height: 84px !important;
  }

  .profile-hero-text {
    align-items: center;
    width: 100%;
  }

  .profile-hero-title-row {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .profile-hero-title-row h2,
  .profile-header-info h2 {
    font-size: 20px !important;
    text-align: center;
    width: 100%;
    margin: 0;
  }

  .profile-handle {
    text-align: center;
    display: block;
  }

  .profile-hero-stats {
    justify-content: center;
  }

  .profile-wall-header {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-post-filters {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .profile-header-actions {
    width: 100%;
    max-width: none;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .profile-header-actions .retro-btn-secondary,
  .profile-header-actions .retro-btn-primary,
  .profile-header-actions .mini-btn,
  .profile-header-actions button,
  .profile-header-actions a {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
  }

  .fotolog-layout-grid,
  .customizer-split,
  .auth-split-wrapper,
  .privacy-settings-split {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Mobile profile: surface "Información" before posts; keep featured photo visible */
  #profile-view .fotolog-layout-grid {
    display: flex !important;
    flex-direction: column;
  }

  #profile-view .fotolog-main-column,
  #profile-view .fotolog-side-column {
    display: contents;
  }

  #profile-view #profile-private-lock-box { order: 0; }
  #profile-view #profile-pending-requests-banner { order: 1; }
  #profile-view #profile-info-box { order: 2; }
  #profile-view #profile-featured-box { order: 3; }
  #profile-view #profile-gallery-box { order: 4; }
  #profile-view #profile-guestbook-box { order: 5; }
  #profile-view #profile-wall-box { order: 6; }
  #profile-view #profile-pinned-playlist-box { order: 8; }
  #profile-view #profile-created-songs-box { order: 9; }
  #profile-view #profile-created-beats-box { order: 10; }
  #profile-view #profile-created-albums-box { order: 11; }
  #profile-view #profile-liked-songs-box { order: 12; }
  #profile-view #profile-created-playlists-box { order: 13; }
  #profile-view #profile-views-box { order: 14; }

  .fotolog-side-column {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .fotolog-card,
  .profile-page-canvas .retro-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .fotolog-image-frame {
    padding: 8px !important;
    min-height: 160px;
  }

  .fotolog-image-frame img {
    max-height: min(70vh, 420px) !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .playlist-header-flex,
  .song-detail-hero,
  .song-hero-content,
  .album-hero-content,
  .album-hero-box {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
  }

  .playlist-cover-large,
  .song-detail-cover,
  .album-detail-cover {
    width: min(180px, 56vw) !important;
    height: min(180px, 56vw) !important;
  }

  .playlist-action-btns,
  .song-actions-row,
  .album-action-btns {
    justify-content: center;
    flex-wrap: wrap;
  }

  .library-song-card,
  .user-song-card,
  .explore-song-card {
    flex-wrap: wrap;
  }

  .library-song-actions,
  .explore-song-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }

  /* Library view: readable header + playlists on phones */
  #library-view .retro-box-header,
  #library-view .library-archive-header {
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  #library-view .retro-box-header h2,
  #library-view .library-archive-header h2 {
    font-size: 13px;
    flex: 1 1 auto;
    min-width: 0;
  }

  #library-view .library-archive-hero {
    padding: 12px;
  }

  #library-view .library-hero-disc {
    width: 36px;
    height: 36px;
  }

  #library-view .library-hero-line {
    font-size: 11px;
  }

  #library-view .library-playlists-container,
  #library-view .library-songs-container {
    padding: 12px 10px 14px;
  }

  #library-view .library-section-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  #library-view .library-section-label h3 {
    font-size: 11px !important;
    letter-spacing: 0.1em;
    line-height: 1.3;
  }

  #library-view .library-section-sub {
    width: 100%;
    margin-left: 0;
  }

  #library-view .library-top-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  #library-view .lib-np-cover,
  #library-view .lib-np-cover-wrap {
    width: 38px;
    height: 38px;
  }

  .library-playlists-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
    gap: 10px !important;
  }

  .pl-grid-play-overlay {
    opacity: 1 !important;
    transform: none !important;
    width: 30px;
    height: 30px;
  }

  .online-users-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }

  .fs-main-stage {
    padding-top: calc(12px + var(--safe-top));
  }

  .fs-bottom-dock {
    padding-bottom: calc(16px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
  }

  /* Mention dropdown stays on screen */
  .mention-suggestions-dropdown,
  .mention-suggestions-floating {
    max-width: min(92vw, 320px) !important;
  }

  /* Final safeguard: cover workspace, auth, and modals outside #app-workspace */
  #app-workspace input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
  #app-workspace textarea,
  #app-workspace select,
  #auth-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #auth-view textarea,
  #auth-view select,
  .retro-fb-popup input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .retro-fb-popup textarea,
  .retro-fb-popup select,
  .lightbox-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .lightbox-modal textarea,
  .lightbox-modal select {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .logo-text {
    font-size: 16px !important;
  }

  .chat-header-actions #chat-group-members-btn {
    font-size: 9px !important;
    padding: 5px 6px !important;
  }

  .chat-header-actions #chat-delete-btn {
    font-size: 9px !important;
  }

  .post-song-card,
  .post-playlist-card {
    flex-wrap: wrap;
  }

  .post-song-actions {
    width: 100%;
    margin-top: 6px;
  }
}

/* Desktop: never show mobile chat back; always show both panes */
@media (min-width: 769px) {
  .chat-back-btn {
    display: none !important;
  }

  body.view-messages .messenger-container {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    flex-direction: unset !important;
  }

  body.view-messages .conversation-sidebar,
  body.view-messages.mobile-chat-open .conversation-sidebar,
  body.view-messages:not(.mobile-chat-open) .conversation-sidebar {
    display: flex !important;
    width: auto !important;
    flex: unset !important;
  }

  body.view-messages .chat-main-panel,
  body.view-messages.mobile-chat-open .chat-main-panel,
  body.view-messages:not(.mobile-chat-open) .chat-main-panel {
    display: flex !important;
    width: auto !important;
    flex: unset !important;
  }

  body.view-messages:not(.mobile-chat-open) .chat-composer-wrapper {
    display: block !important;
  }
}

/* PWA install tutorial (mobile) */
.pwa-install-modal .pwa-install-box {
  width: min(420px, 92vw);
  max-height: min(85vh, 560px);
}

.pwa-install-body {
  padding: 16px 18px 18px;
  color: #ddd;
  overflow-y: auto;
}

.pwa-install-lead {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #ccc;
}

.pwa-install-steps {
  margin: 0 0 14px;
  padding-left: 1.25em;
  font-size: 13px;
  line-height: 1.55;
  color: #eee;
}

.pwa-install-steps li {
  margin-bottom: 8px;
}

.pwa-install-steps strong {
  color: #fff;
  font-weight: 700;
}

.pwa-install-note {
  margin: 0 0 14px;
  font-size: 11px;
  line-height: 1.4;
  color: #999;
  border-left: 2px solid #555;
  padding-left: 10px;
}

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

.pwa-install-actions .retro-btn-primary,
.pwa-install-actions .retro-btn-secondary {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 12px;
}

/* ===== Feature pack: genres, queue, history, onboarding, lyrics ===== */
.sidebar-history-box,
.profile-suggestions-box,
.listening-activity-box {
  margin-top: 10px;
}

.listening-activity-box {
  position: relative;
  margin-bottom: 10px;
}

.listening-activity-box .listening-activity-header {
  padding: 5px 8px;
  font-size: 11px;
}

.listening-activity-box .retro-box-content {
  padding: 0;
}

.profile-suggestions-list,
.listening-activity-list {
  display: flex;
  flex-direction: column;
}

/* ~3 filas visibles; el resto con scroll */
.listening-activity-list {
  max-height: 102px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.profile-suggestion-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.listening-activity-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  min-height: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.profile-suggestion-avatar {
  width: 28px;
  height: 28px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}

.listening-activity-avatar {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}

.profile-suggestion-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
}

.profile-suggestion-name {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listening-activity-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 10px;
  line-height: 1.25;
}

.listening-activity-main {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listening-activity-ago {
  font-size: 9px;
  opacity: 0.6;
  flex-shrink: 0;
}

.listening-activity-track {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.listening-song-hover-card {
  position: absolute;
  z-index: 40;
  left: 12px;
  top: 100%;
  margin-top: 4px;
  width: min(260px, calc(100% - 16px));
  display: none;
  gap: 10px;
  padding: 10px;
  background: #161616;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 22px rgba(0,0,0,0.55);
  pointer-events: none;
}

.listening-song-hover-card.is-visible {
  display: flex !important;
}

.listening-hover-cover {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
  background: #0a0a0a;
}

.listening-hover-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
}

.listening-hover-title {
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listening-hover-artist,
.listening-hover-album,
.listening-hover-by {
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="light"] .listening-song-hover-card {
  background: #f7f7f7;
  border-color: #ccc;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

/* ===== Profile hover summary card ===== */
.profile-hover-card {
  position: fixed;
  z-index: 60000;
  width: min(300px, calc(100vw - 16px));
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  color: #eee;
  font-size: 12px;
  pointer-events: auto;
  overflow: hidden;
}

.profile-hover-loading {
  padding: 18px 14px;
  text-align: center;
  color: #999;
  font-size: 11px;
}

.profile-hover-banner {
  height: 54px;
  background: linear-gradient(135deg, #2a2a2a 0%, #111 100%);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-hover-banner.is-empty {
  background-image: none;
}

.profile-hover-main {
  display: flex;
  gap: 10px;
  padding: 0 12px 12px;
  margin-top: -22px;
}

.profile-hover-avatar {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 2px solid #161616;
  background: #0a0a0a;
  flex-shrink: 0;
  cursor: pointer;
}

.profile-hover-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 24px;
}

.profile-hover-name {
  font-weight: bold;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-hover-name:hover {
  text-decoration: underline;
}

.profile-hover-username {
  font-size: 11px;
  color: #aaa;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-hover-username:hover {
  color: #ddd;
  text-decoration: underline;
}

.profile-hover-bio {
  margin: 4px 0 2px;
  font-size: 11px;
  line-height: 1.35;
  color: #ccc;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.profile-hover-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 10px;
  color: #999;
  margin-top: 2px;
}

.profile-hover-stats strong {
  color: #eee;
  font-weight: bold;
}

.profile-hover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}

.profile-hover-actions .mini-btn {
  font-size: 10px;
}

a.comment-author {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  margin-right: 0;
}

a.comment-author:hover {
  text-decoration: underline;
}

.comment-author-colon {
  font-weight: bold;
  margin-right: 4px;
}

html[data-theme="light"] .profile-hover-card {
  background: #f7f7f7;
  border-color: #ccc;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  color: #222;
}

html[data-theme="light"] .profile-hover-loading {
  color: #666;
}

html[data-theme="light"] .profile-hover-banner {
  background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
  border-bottom-color: #ddd;
}

html[data-theme="light"] .profile-hover-avatar {
  border-color: #f7f7f7;
  background: #eee;
}

html[data-theme="light"] .profile-hover-name {
  color: #111;
}

html[data-theme="light"] .profile-hover-username {
  color: #555;
}

html[data-theme="light"] .profile-hover-username:hover {
  color: #111;
}

html[data-theme="light"] .profile-hover-bio {
  color: #333;
}

html[data-theme="light"] .profile-hover-stats {
  color: #666;
}

html[data-theme="light"] .profile-hover-stats strong {
  color: #111;
}

.tag-chip,
.genre-chip {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.18);
  margin: 0 4px 4px 0;
  opacity: 0.9;
}

.song-genres-tags-row {
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.song-waveform-wrap {
  position: relative;
  margin-top: 12px;
  height: 56px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  overflow: hidden;
}

.song-waveform-canvas {
  width: 100%;
  height: 56px;
  display: block;
}

.song-waveform-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
  border-right: 1px solid rgba(255,255,255,0.45);
}

.song-lyrics-display {
  max-height: 320px;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.65;
  text-align: center;
  scroll-behavior: smooth;
  padding: 12px 8px;
}

.song-lyrics-display.lyrics-karaoke .lyrics-line {
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.28;
  transform: scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease, font-size 0.2s ease;
  font-weight: 500;
}

.song-lyrics-display.lyrics-karaoke .lyrics-line.is-past {
  opacity: 0.35;
}

.song-lyrics-display.lyrics-karaoke .lyrics-line.is-upcoming {
  opacity: 0.28;
}

.song-lyrics-display.lyrics-karaoke .lyrics-line.is-active {
  opacity: 1;
  font-weight: 700;
  font-size: 1.15em;
  transform: scale(1);
  color: #fff;
  background: transparent;
}

.song-lyrics-display.lyrics-karaoke .lyrics-line:hover {
  opacity: 0.7;
}

.lyrics-ts {
  display: none !important;
}

.lyrics-plain {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
}

.player-queue-panel {
  position: absolute;
  right: 8px;
  bottom: calc(100% + 6px);
  width: min(360px, calc(100vw - 24px));
  max-height: 280px;
  display: none;
  flex-direction: column;
  background: var(--fl-box-bg, #1a1a1a);
  border: 1px solid rgba(255,255,255,0.18);
  z-index: 9600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

/* Mantener el reproductor fijo; fixed ya contiene hijos absolute */
.luxuria-player-bar {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9500;
}

html[data-theme="light"] .luxuria-player-bar,
html[data-theme="light"] #luxuria-global-player.luxuria-player-bar {
  background: linear-gradient(to bottom, #1f1f1f 0%, #121212 100%) !important;
  border-top: 2px solid #000000 !important;
  color: #ffffff !important;
  box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="light"] .player-track-title,
html[data-theme="light"] #luxuria-global-player .player-track-title {
  color: #ffffff !important;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

html[data-theme="light"] .player-track-artist,
html[data-theme="light"] .player-track-time,
html[data-theme="light"] .player-volume-icon,
html[data-theme="light"] #luxuria-global-player .player-track-artist,
html[data-theme="light"] #luxuria-global-player .player-track-time {
  color: #c8c8c8 !important;
}

html[data-theme="light"] .player-cover-art {
  border-color: #999999;
}

html[data-theme="light"] .player-btn,
html[data-theme="light"] #luxuria-global-player .player-btn {
  color: #eeeeee !important;
  background: #2a2a2a !important;
  border-color: #555555 !important;
}

html[data-theme="light"] .player-btn:hover,
html[data-theme="light"] #luxuria-global-player .player-btn:hover {
  background: #3a3a3a !important;
  border-color: #777777 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .player-track-actions .player-btn,
html[data-theme="light"] .player-btn-skip,
html[data-theme="light"] #player-btn-queue,
html[data-theme="light"] #player-btn-video,
html[data-theme="light"] #player-btn-fullscreen {
  background: transparent !important;
  border-color: transparent !important;
  color: #dddddd !important;
}

html[data-theme="light"] .player-track-actions .player-btn:hover,
html[data-theme="light"] .player-btn-skip:hover,
html[data-theme="light"] #player-btn-queue:hover,
html[data-theme="light"] #player-btn-video:hover,
html[data-theme="light"] #player-btn-fullscreen:hover {
  background: #333333 !important;
  color: #ffffff !important;
}

html[data-theme="light"] #player-btn-video.is-active {
  color: #ffffff !important;
}

html[data-theme="light"] .player-btn-main,
html[data-theme="light"] #luxuria-global-player .player-btn-main {
  background: #f4f4f4 !important;
  color: #111111 !important;
  border-color: #ffffff !important;
  box-shadow: 0 1px 0 #000000, 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="light"] #luxuria-global-player .player-btn-main:hover {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

html[data-theme="light"] #luxuria-global-player .player-btn.is-on,
html[data-theme="light"] #player-btn-shuffle.is-on,
html[data-theme="light"] #player-btn-repeat.is-on,
html[data-theme="light"] #player-btn-video.is-active,
html[data-theme="light"] #player-btn-queue[aria-expanded="true"] {
  color: #111111 !important;
  background: #f2f2f2 !important;
  border-color: #ffffff !important;
}

html[data-theme="light"] .player-btn-close {
  color: #aaaaaa !important;
}

html[data-theme="light"] .player-btn-close:hover {
  color: #ffffff !important;
}

html[data-theme="light"] .player-seek::-webkit-slider-runnable-track,
html[data-theme="light"] .player-volume::-webkit-slider-runnable-track {
  background: #cccccc;
  border-color: #999999;
}

html[data-theme="light"] .player-seek::-webkit-slider-thumb,
html[data-theme="light"] .player-volume::-webkit-slider-thumb {
  background: linear-gradient(to bottom, #555555 0%, #222222 100%);
  border-color: #111111;
}

.player-queue-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
}

.player-queue-header strong {
  flex: 1;
}

.player-queue-list {
  overflow-y: auto;
  flex: 1;
}

.player-queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 11px;
}

.player-queue-item.is-current {
  background: rgba(255,255,255,0.06);
}

.player-queue-cover {
  width: 28px;
  height: 28px;
  object-fit: cover;
}

.player-queue-meta {
  flex: 1;
  min-width: 0;
}

.player-queue-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.player-queue-artist {
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-queue-idx {
  width: 16px;
  opacity: 0.5;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.player-queue-item {
  cursor: default;
}

.player-queue-item.is-current {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 2px 0 0 #ffffff;
}

.player-queue-item.is-current .player-queue-title {
  color: #ffffff;
}

.player-queue-play,
.player-queue-remove {
  background: transparent;
  border: 1px solid transparent;
  color: #bbbbbb;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

.player-queue-play:hover,
.player-queue-remove:hover {
  color: #ffffff;
  background: #333333;
  border-color: #555555;
}

.player-queue-cover {
  border: 1px solid #444;
  background: #111;
}

.onboarding-box {
  max-width: 520px;
}

.onboarding-steps {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.onboarding-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}

.onboarding-step-dot.active {
  background: #fff;
}

.onboarding-lead {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
}

.onboarding-cta-row,
.empty-state-actions,
.invite-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.onboarding-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.invite-link-row .retro-input {
  flex: 1;
  min-width: 140px;
}

.playlist-collaborators-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.playlist-collaborators-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.collab-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 2px 6px;
}

.collab-remove-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  padding: 0 2px;
}

.empty-state-box {
  padding: 20px;
  text-align: center;
}

.explore-sort-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lyrics-lrc-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.lyrics-lrc-upload-row .retro-input {
  flex: 1;
  min-width: 160px;
}

/* Chat en vivo de la radio */
.player-btn-radio-chat {
  color: #ccc;
}

.player-btn-radio-chat[hidden] {
  display: none !important;
}

.radio-chat-pip {
  left: auto;
  right: 16px;
  bottom: 72px;
  width: 300px;
  height: 340px;
  min-width: 220px;
  min-height: 200px;
  max-width: 94vw;
  max-height: 80vh;
  z-index: 10020;
  user-select: text;
}

.radio-chat-pip .pip-video-header {
  user-select: none;
}

.radio-chat-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e74c3c;
  margin-right: 2px;
  animation: radio-live-pulse 1.4s ease-in-out infinite;
}

.radio-chat-body {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: #0d0d0d;
  padding: 0;
  min-height: 0;
}

.radio-chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px;
  -webkit-overflow-scrolling: touch;
}

.radio-chat-empty {
  margin: 12px 0;
  text-align: center;
}

.radio-chat-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.radio-chat-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #222;
  border: 1px solid #333;
}

.radio-chat-msg-body {
  min-width: 0;
  flex: 1;
}

.radio-chat-msg-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 1px;
}

.radio-chat-user {
  font-size: 11px;
  font-weight: 700;
  color: #eee;
  text-decoration: none;
}

.radio-chat-user:hover {
  text-decoration: underline;
}

.radio-chat-time {
  font-size: 9px;
  color: #666;
}

.radio-chat-text {
  font-size: 12px;
  line-height: 1.35;
  color: #ccc;
  word-break: break-word;
  white-space: pre-wrap;
}

.radio-chat-vote-bar {
  flex-shrink: 0;
  padding: 8px 10px;
  border-bottom: 1px solid #333;
  background: #1a1a1a;
}

.radio-chat-vote-bar[hidden] {
  display: none !important;
}

.radio-chat-vote-title {
  font-size: 11px;
  font-weight: 700;
  color: #eee;
  margin-bottom: 2px;
}

.radio-chat-vote-meta {
  font-size: 10px;
  color: #999;
  margin-bottom: 6px;
}

.radio-chat-vote-actions {
  display: flex;
  gap: 6px;
}

.radio-chat-msg.is-system {
  display: block;
  margin: 6px 0 8px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid #666;
  border-radius: 2px;
}

.radio-chat-msg.is-system .radio-chat-text {
  font-size: 11px;
  color: #bbb;
  font-style: italic;
}

.radio-chat-form {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid #2a2a2a;
  flex-shrink: 0;
  background: #141414;
  position: relative;
}

.radio-chat-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

.radio-chat-play-suggest {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  max-height: 180px;
  overflow-y: auto;
  background: #1c1c1c;
  border: 1px solid #444;
  border-radius: 3px;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
  z-index: 30;
}

.radio-chat-play-suggest[hidden] {
  display: none !important;
}

.radio-chat-play-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.radio-chat-play-item:hover,
.radio-chat-play-item.is-active {
  background: rgba(255, 255, 255, 0.08);
}

.radio-chat-play-item img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  background: #111;
}

.radio-chat-play-item-meta {
  min-width: 0;
  flex: 1;
}

.radio-chat-play-item-title {
  font-size: 12px;
  font-weight: 600;
  color: #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radio-chat-play-item-artist {
  font-size: 10px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radio-chat-play-empty {
  padding: 8px 10px;
  font-size: 11px;
  color: #888;
}

html[data-theme="light"] .radio-chat-play-suggest {
  background: #fff;
  border-color: #bbb;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .radio-chat-play-item:hover,
html[data-theme="light"] .radio-chat-play-item.is-active {
  background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .radio-chat-play-item-title {
  color: #111;
}

html[data-theme="light"] .radio-chat-play-item-artist {
  color: #666;
}

html[data-theme="light"] .radio-chat-vote-bar {
  background: #f2f2f2;
  border-bottom-color: #ccc;
}

html[data-theme="light"] .radio-chat-vote-title {
  color: #111;
}

html[data-theme="light"] .radio-chat-msg.is-system {
  background: rgba(0, 0, 0, 0.04);
  border-left-color: #888;
}

html[data-theme="light"] .radio-chat-msg.is-system .radio-chat-text {
  color: #444;
}

.radio-chat-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  font-size: 12px !important;
}

.radio-chat-form .mini-btn {
  flex-shrink: 0;
}

html[data-theme="light"] .radio-chat-pip {
  background: #f4f4f4;
  border-color: #bbb;
}

html[data-theme="light"] .radio-chat-body {
  background: #fff;
}

html[data-theme="light"] .radio-chat-form {
  background: #f0f0f0;
  border-top-color: #ddd;
}

html[data-theme="light"] .radio-chat-user {
  color: #111;
}

html[data-theme="light"] .radio-chat-text {
  color: #333;
}

/* Lyrics PIP — opposite corner from video so both can stay open */
.retro-pip-lyrics-box {
  left: auto;
  right: 16px;
  bottom: 65px;
  width: 280px;
  height: 220px;
  min-width: 180px;
  min-height: 140px;
  z-index: 9998;
}

.pip-lyrics-body {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: #0d0d0d;
  padding: 0;
}

.lyrics-pip-track-meta {
  flex-shrink: 0;
  padding: 6px 10px 4px;
  font-size: 10px;
  color: #999;
  border-bottom: 1px solid #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lyrics-pip-display {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  -webkit-overflow-scrolling: touch;
}

.lyrics-pip-display .lyrics-line {
  padding: 6px 4px;
  opacity: 0.3;
  transition: opacity 0.18s ease, transform 0.18s ease, font-size 0.18s ease;
  cursor: pointer;
  transform: scale(0.96);
}

.lyrics-pip-display .lyrics-line.is-past {
  opacity: 0.38;
}

.lyrics-pip-display .lyrics-line.is-upcoming {
  opacity: 0.28;
}

.lyrics-pip-display .lyrics-line.is-active {
  opacity: 1;
  font-weight: 700;
  font-size: 1.08em;
  color: #fff;
  background: transparent;
  transform: scale(1);
}

.lyrics-pip-display .lyrics-ts {
  display: none !important;
}

.lyrics-pip-display .lyrics-plain {
  text-align: left;
  font-size: 12px;
  opacity: 0.9;
}

html[data-theme="light"] .retro-pip-lyrics-box {
  background: #f4f4f4;
  border-color: #bbb;
}

html[data-theme="light"] .pip-lyrics-body {
  background: #fff;
}

html[data-theme="light"] .lyrics-pip-display .lyrics-line.is-active {
  color: #111;
  background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .song-waveform-wrap {
  background: #f2f2f2;
  border-color: #ccc;
}

/* Player menus stay dark (match mini-player) so labels stay readable */
html[data-theme="light"] .player-dots-dropdown,
html[data-theme="light"] #player-dots-menu.player-dots-dropdown {
  background: #1e1e1e !important;
  border-color: #666666 !important;
  color: #f2f2f2 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="light"] .player-dots-dropdown .dropdown-item-btn,
html[data-theme="light"] #player-dots-menu .dropdown-item-btn,
html[data-theme="light"] .player-dots-dropdown .dropdown-item-btn span {
  color: #f2f2f2 !important;
}

html[data-theme="light"] .player-dots-dropdown .dropdown-item-btn:hover,
html[data-theme="light"] #player-dots-menu .dropdown-item-btn:hover,
html[data-theme="light"] .player-dots-dropdown .dropdown-item-btn:hover span {
  background: #333333 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .player-dots-dropdown .dropdown-item-btn svg {
  stroke: #f2f2f2 !important;
  color: #f2f2f2 !important;
}

html[data-theme="light"] .player-queue-panel,
html[data-theme="light"] #luxuria-global-player .player-queue-panel,
html[data-theme="light"] #player-queue-panel {
  background: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #f2f2f2 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="light"] .player-queue-header,
html[data-theme="light"] .player-queue-header strong,
html[data-theme="light"] .player-queue-title,
html[data-theme="light"] .player-queue-header .retro-link-btn,
html[data-theme="light"] #player-queue-clear-btn,
html[data-theme="light"] #player-queue-close-btn {
  color: #ffffff !important;
}

html[data-theme="light"] .player-queue-header .subtle-text,
html[data-theme="light"] #player-queue-count,
html[data-theme="light"] .player-queue-artist,
html[data-theme="light"] .player-queue-idx {
  color: #b8b8b8 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .player-queue-item.is-current {
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="light"] .player-queue-header {
  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="light"] .player-queue-item {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: #f2f2f2 !important;
}

html[data-theme="light"] .tag-chip {
  border-color: #bbb;
}

.explore-ranking-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.explore-ranking-title {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.85;
}

.explore-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.explore-rank-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: background 0.12s ease;
}

.explore-rank-card:hover {
  background: rgba(255,255,255,0.04);
}

.explore-rank-pos {
  width: 18px;
  text-align: right;
  font-size: 11px;
  opacity: 0.55;
  flex-shrink: 0;
}

.explore-rank-cover {
  width: 36px;
  height: 36px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
}

.explore-rank-body {
  flex: 1;
  min-width: 0;
}

.explore-rank-text {
  display: block;
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explore-rank-text:hover {
  text-decoration: underline;
}

.explore-rank-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: 10px;
  opacity: 0.7;
  margin-top: 2px;
}

html[data-theme="light"] .explore-rank-card {
  border-color: #ccc;
}

html[data-theme="light"] .song-lyrics-display.lyrics-karaoke .lyrics-line.is-active {
  color: #111;
}

/* ==========================================================================
   LIGHT THEME — readable contrast (feed, comments, buttons, inputs)
   ========================================================================== */
html[data-theme="light"] body.theme-bw {
  color: #111111;
  background-color: #e8e8e8;
}

html[data-theme="light"] .retro-box,
html[data-theme="light"] .post-card,
html[data-theme="light"] .auth-box,
html[data-theme="light"] .composer-box,
html[data-theme="light"] .comment-item {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #c8c8c8 !important;
  color: #111111 !important;
}

html[data-theme="light"] .post-actions-bar {
  background-color: #f3f3f3 !important;
  border-top-color: #d0d0d0 !important;
  border-bottom-color: #d0d0d0 !important;
}

html[data-theme="light"] .action-link,
html[data-theme="light"] .action-link span,
html[data-theme="light"] button.action-link,
html[data-theme="light"] .action-link-label,
html[data-theme="light"] .action-link-count {
  color: #111111 !important;
}

html[data-theme="light"] .likers-tooltip {
  background: #ffffff;
  color: #111111 !important;
  border-color: #bbb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .action-link:hover,
html[data-theme="light"] .action-link.liked,
html[data-theme="light"] .action-link.reposted,
html[data-theme="light"] .repost-action-btn:hover,
html[data-theme="light"] .repost-action-btn.reposted,
html[data-theme="light"] .repost-action-btn.reposted span {
  color: #000000 !important;
}

html[data-theme="light"] .action-link svg,
html[data-theme="light"] .action-link svg *,
html[data-theme="light"] .repost-action-btn.reposted svg {
  stroke: currentColor !important;
  color: #111111 !important;
}

html[data-theme="light"] .action-link.liked svg,
html[data-theme="light"] .action-link.liked svg * {
  fill: currentColor;
  color: #000000 !important;
}

html[data-theme="light"] .post-comments-section {
  background-color: #f6f6f6 !important;
  color: #111111 !important;
}

html[data-theme="light"] .comment-author,
html[data-theme="light"] .comment-text,
html[data-theme="light"] .comment-content,
html[data-theme="light"] .post-body,
html[data-theme="light"] .post-text-content,
html[data-theme="light"] .post-author-name {
  color: #111111 !important;
}

html[data-theme="light"] .comment-time,
html[data-theme="light"] .post-time,
html[data-theme="light"] .subtle-text,
html[data-theme="light"] .file-limits-info,
html[data-theme="light"] .composer-char-counter {
  color: #555555 !important;
}

html[data-theme="light"] .comment-actions-bar {
  color: #555555;
}

html[data-theme="light"] .comment-action-btn {
  color: #444444 !important;
}

html[data-theme="light"] .comment-action-btn:hover {
  color: #000000 !important;
}

html[data-theme="light"] .comment-like-btn.liked,
html[data-theme="light"] .comment-like-btn.liked svg {
  color: #111111 !important;
  fill: #111111 !important;
}

html[data-theme="light"] .comment-delete-btn:hover {
  color: #b33333 !important;
}

html[data-theme="light"] .comment-replies-list {
  border-left-color: #cccccc;
}

html[data-theme="light"] .comment-reply-to-user {
  color: #222222;
}

html[data-theme="light"] .retro-btn-secondary,
html[data-theme="light"] .retro-btn-secondary span,
html[data-theme="light"] button.retro-btn-secondary,
html[data-theme="light"] label.retro-btn-secondary {
  background: linear-gradient(to bottom, #ffffff 0%, #e2e2e2 100%) !important;
  color: #111111 !important;
  border-color: #888888 !important;
}

html[data-theme="light"] .retro-btn-secondary:hover {
  background: linear-gradient(to bottom, #f7f7f7 0%, #d8d8d8 100%) !important;
  color: #000000 !important;
}

html[data-theme="light"] .retro-input,
html[data-theme="light"] .retro-textarea,
html[data-theme="light"] .retro-select,
html[data-theme="light"] .composer-textarea,
html[data-theme="light"] .comment-form input,
html[data-theme="light"] .comment-form .retro-input,
html[data-theme="light"] .comment-reply-input,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] textarea {
  background-color: #ffffff !important;
  color: #111111 !important;
  border-color: #999999 !important;
}

html[data-theme="light"] .retro-input::placeholder,
html[data-theme="light"] .retro-textarea::placeholder,
html[data-theme="light"] .composer-textarea::placeholder,
html[data-theme="light"] .comment-form input::placeholder,
html[data-theme="light"] .comment-reply-input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] input::placeholder {
  color: #666666 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .composer-footer {
  background-color: #f0f0f0 !important;
  border-top-color: #d5d5d5 !important;
}

html[data-theme="light"] .post-options-menu,
html[data-theme="light"] .entity-options-menu {
  background: #ffffff !important;
  border-color: #333333 !important;
  color: #111111 !important;
}

/* Composer "Adjuntar..." and similar menus: light surface in white mode */
html[data-theme="light"] .retro-custom-dropdown:not(.player-dots-dropdown) {
  background: #ffffff !important;
  border-color: #cccccc !important;
  color: #111111 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] .retro-custom-dropdown:not(.player-dots-dropdown) .dropdown-divider {
  background: #e0e0e0 !important;
}

html[data-theme="light"] .post-options-menu button,
html[data-theme="light"] .entity-options-menu button,
html[data-theme="light"] .dropdown-item-btn,
html[data-theme="light"] .retro-dropdown-item-btn {
  color: #111111 !important;
}

html[data-theme="light"] .retro-custom-dropdown:not(.player-dots-dropdown) .dropdown-item-btn svg {
  stroke: #333333 !important;
  color: #333333 !important;
}

html[data-theme="light"] .post-options-menu button:hover,
html[data-theme="light"] .entity-options-menu button:hover,
html[data-theme="light"] .dropdown-item-btn:hover,
html[data-theme="light"] .retro-dropdown-item-btn:hover {
  background: #f0f0f0 !important;
  color: #111111 !important;
}

html[data-theme="light"] .retro-custom-dropdown:not(.player-dots-dropdown) .dropdown-item-btn:hover svg {
  stroke: #111111 !important;
  color: #111111 !important;
}

html[data-theme="light"] .post-dots-btn {
  color: #444444 !important;
}

html[data-theme="light"] .post-dots-btn:hover {
  background: #eaeaea !important;
  color: #000000 !important;
}

html[data-theme="light"] .a11y-tone-btn.is-active {
  border-color: #111111;
  background: #e8e8e8;
  color: #111111;
}

html[data-theme="light"] .page-body a:not(.post-mention-tag):not(.post-hashtag-tag):not(.post-song-title):not(.post-playlist-title):not(.retro-btn-accent):not(.vip-upsell-cta),
html[data-theme="light"] .retro-box a:not(.post-mention-tag):not(.post-hashtag-tag):not(.post-song-title):not(.post-playlist-title):not(.retro-btn-accent):not(.vip-upsell-cta),
html[data-theme="light"] .post-card a:not(.post-mention-tag):not(.post-hashtag-tag):not(.post-song-title):not(.post-playlist-title):not(.retro-btn-accent):not(.vip-upsell-cta),
html[data-theme="light"] .repost-user-link {
  color: #111111 !important;
}

html[data-theme="light"] .post-hashtag-tag,
html[data-theme="light"] a.post-hashtag-tag,
html[data-theme="light"] .post-card .post-hashtag-tag,
html[data-theme="light"] .post-text-content .post-hashtag-tag,
html[data-theme="light"] .comment-text .post-hashtag-tag {
  color: #1565c0 !important;
}

html[data-theme="light"] .post-hashtag-tag:hover,
html[data-theme="light"] a.post-hashtag-tag:hover {
  color: #0d47a1 !important;
}

html[data-theme="light"] .post-mention-tag,
html[data-theme="light"] a.post-mention-tag,
html[data-theme="light"] .post-card .post-mention-tag,
html[data-theme="light"] .post-text-content .post-mention-tag,
html[data-theme="light"] .comment-text .post-mention-tag,
html[data-theme="light"] .repost-caption-box .post-mention-tag {
  background: #222222 !important;
  color: #ffffff !important;
  border-color: #555555 !important;
}

html[data-theme="light"] .post-role-tag,
html[data-theme="light"] .post-card .post-role-tag,
html[data-theme="light"] .post-text-content .post-role-tag,
html[data-theme="light"] .comment-text .post-role-tag {
  background: #e8f1fa;
  color: #1565c0 !important;
  border-color: #90caf9;
}

html[data-theme="light"] .post-everyone-tag,
html[data-theme="light"] .post-card .post-everyone-tag,
html[data-theme="light"] .post-text-content .post-everyone-tag,
html[data-theme="light"] .comment-text .post-everyone-tag {
  background: #3a3010 !important;
  color: #ffe7a3 !important;
  border-color: #c9a227 !important;
}

html[data-theme="light"] .post-mention-tag:hover,
html[data-theme="light"] a.post-mention-tag:hover {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}

html[data-theme="light"] .repost-frame-banner {
  background: #f0f0f0 !important;
  border-color: #cccccc !important;
  color: #333333 !important;
}

/* Dark media cards stay dark in light mode — keep titles/meta readable */
html[data-theme="light"] .post-song-card,
html[data-theme="light"] .post-album-card,
html[data-theme="light"] .post-playlist-card,
html[data-theme="light"] .composer-attached-playlist-box,
html[data-theme="light"] .retro-post-audio-player {
  background: #161616 !important;
  border-color: #333333 !important;
  color: #f0f0f0 !important;
}

html[data-theme="light"] .post-song-title,
html[data-theme="light"] .post-playlist-title,
html[data-theme="light"] .post-card .post-song-title,
html[data-theme="light"] .post-card .post-playlist-title,
html[data-theme="light"] .post-song-card a,
html[data-theme="light"] .post-album-card a,
html[data-theme="light"] .post-playlist-card a,
html[data-theme="light"] .attached-playlist-info strong,
html[data-theme="light"] .audio-track-name {
  color: #ffffff !important;
}

html[data-theme="light"] .post-song-artist,
html[data-theme="light"] .post-song-card .subtle-text,
html[data-theme="light"] .post-album-card .subtle-text,
html[data-theme="light"] .post-playlist-card .subtle-text,
html[data-theme="light"] .attached-playlist-info .subtle-text,
html[data-theme="light"] .post-audio-time {
  color: #b0b0b0 !important;
}

/* Username / links inside dark media cards must stay light (beat global light-mode a { #111 }) */
html[data-theme="light"] .post-song-card a.username-link,
html[data-theme="light"] .post-album-card a.username-link,
html[data-theme="light"] .post-playlist-card a.username-link,
html[data-theme="light"] .post-song-card .subtle-text a,
html[data-theme="light"] .post-album-card .subtle-text a,
html[data-theme="light"] .post-playlist-card .subtle-text a,
html[data-theme="light"] .post-card .post-song-card a.username-link,
html[data-theme="light"] .post-card .post-album-card a.username-link,
html[data-theme="light"] .post-card .post-playlist-card a.username-link,
html[data-theme="light"] .page-body .post-song-card a.username-link,
html[data-theme="light"] .retro-box .post-song-card a.username-link {
  color: #ffffff !important;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 2px;
}

html[data-theme="light"] .post-song-card a.username-link:hover,
html[data-theme="light"] .post-album-card a.username-link:hover,
html[data-theme="light"] .post-playlist-card a.username-link:hover,
html[data-theme="light"] .post-card .post-song-card a.username-link:hover {
  color: #d8d8d8 !important;
}

/* Mini biblioteca + Escuchado recientemente + Radio (sidebar) */
html[data-theme="light"] .mini-library-box,
html[data-theme="light"] .sidebar-history-box,
html[data-theme="light"] .radio-luxuria-box,
html[data-theme="light"] .featured-events-box {
  background: #ffffff !important;
  border-color: #c8c8c8 !important;
  color: #111111 !important;
}

html[data-theme="light"] .mini-library-box .retro-box-header,
html[data-theme="light"] .sidebar-history-box .retro-box-header,
html[data-theme="light"] .radio-luxuria-box .retro-box-header,
html[data-theme="light"] .featured-events-box .retro-box-header {
  background: linear-gradient(to bottom, #fafafa 0%, #ebebeb 100%) !important;
  border-bottom-color: #d8d8d8 !important;
  color: #111111 !important;
}

html[data-theme="light"] .radio-header-ico {
  color: #666666 !important;
}

html[data-theme="light"] .radio-live-badge {
  color: #888888 !important;
  background: transparent !important;
}

html[data-theme="light"] .radio-luxuria-box.is-live:not(.is-paused) .radio-live-badge {
  color: #333333 !important;
}

html[data-theme="light"] .radio-title {
  color: #111111 !important;
}

html[data-theme="light"] .radio-artist {
  color: #666666 !important;
}

html[data-theme="light"] .radio-cover {
  border-color: #c8c8c8 !important;
  background: #f0f0f0 !important;
}

html[data-theme="light"] .radio-ctrl-btn {
  background: #f3f3f3 !important;
  border-color: #c8c8c8 !important;
  color: #222222 !important;
}

html[data-theme="light"] .radio-ctrl-btn:hover {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .radio-eq {
  background: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="light"] .radio-eq span {
  background: #222222 !important;
}

html[data-theme="light"] .featured-event-item {
  border-bottom-color: #e6e6e6 !important;
  color: #111111 !important;
}

html[data-theme="light"] .featured-event-item:hover {
  background: #f3f3f3 !important;
}

html[data-theme="light"] .featured-event-thumb {
  border-color: #c8c8c8 !important;
  background-color: #f0f0f0;
}

html[data-theme="light"] .featured-event-sub,
html[data-theme="light"] .featured-event-when,
html[data-theme="light"] .featured-event-empty .featured-event-title {
  color: #555555 !important;
}

html[data-theme="light"] .mini-library-item {
  border-bottom-color: #e6e6e6 !important;
  background: transparent !important;
}

html[data-theme="light"] .mini-library-item:hover {
  background: #f3f3f3 !important;
}

html[data-theme="light"] .mini-library-item.active-track {
  background: #eeeeee !important;
  border-left-color: #111111 !important;
}

html[data-theme="light"] .mini-lib-title,
html[data-theme="light"] .mini-lib-track-title,
html[data-theme="light"] .mini-library-box .mini-lib-title,
html[data-theme="light"] .sidebar-history-box .mini-lib-title {
  color: #111111 !important;
}

html[data-theme="light"] .mini-lib-artist,
html[data-theme="light"] .mini-lib-track-artist,
html[data-theme="light"] .mini-library-box .mini-lib-artist,
html[data-theme="light"] .sidebar-history-box .mini-lib-artist,
html[data-theme="light"] .mini-library-box .subtle-text,
html[data-theme="light"] .sidebar-history-box .subtle-text {
  color: #555555 !important;
}

html[data-theme="light"] .mini-lib-play-btn {
  background: #222222 !important;
  border-color: #444444 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .mini-lib-play-btn:hover {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .sidebar-library-footer {
  background: #f5f5f5 !important;
  border-top-color: #d8d8d8 !important;
}

html[data-theme="light"] .sidebar-lib-link {
  color: #222222 !important;
}

html[data-theme="light"] .sidebar-lib-link:hover {
  color: #000000 !important;
}

html[data-theme="light"] .mini-lib-cover {
  border-color: #bbbbbb !important;
  background: #eeeeee !important;
}

html[data-theme="light"] .mini-lib-badge {
  background: #eeeeee !important;
  color: #333333 !important;
  border-color: #999999 !important;
}

/* ==========================================================================
   LIGHT THEME — profiles, songs, albums, playlists
   ========================================================================== */

/* Profile: restore custom --fl-* surfaces under DARK theme.
   Global dark rules force .retro-box to #1f1f1f while many profiles
   keep dark textColor/linkColor meant for light custom boxes — unreadable. */
html[data-theme="dark"] .profile-page-canvas {
  background-color: var(--fl-bg-page, #121212) !important;
  color: var(--fl-text, #e0e0e0) !important;
  border-color: var(--fl-border, #444444) !important;
}
html[data-theme="dark"] body.has-profile-wallpaper .profile-page-canvas {
  background-color: color-mix(in srgb, var(--fl-bg-page, #121212) 62%, transparent) !important;
}

html[data-theme="dark"] .profile-page-canvas .retro-box,
html[data-theme="dark"] .profile-page-canvas .post-card,
html[data-theme="dark"] .profile-page-canvas .comment-item {
  background-color: var(--fl-bg-box, #1e1e1e) !important;
  background: var(--fl-bg-box, #1e1e1e) !important;
  border-color: var(--fl-border, #444444) !important;
  color: var(--fl-text, #e0e0e0) !important;
}

html[data-theme="dark"] .profile-page-canvas .retro-box-header,
html[data-theme="dark"] .profile-page-canvas .fotolog-card-header,
html[data-theme="dark"] .profile-page-canvas .post-card-header {
  background: rgba(0, 0, 0, 0.14) !important;
  border-bottom-color: var(--fl-border, #444444) !important;
  border-color: var(--fl-border, #444444) !important;
  color: var(--fl-link, #ffffff) !important;
}

html[data-theme="dark"] .profile-page-canvas .retro-box-header h2,
html[data-theme="dark"] .profile-page-canvas .retro-box-header h3,
html[data-theme="dark"] .profile-page-canvas .retro-box-header span,
html[data-theme="dark"] .profile-page-canvas .fotolog-card-header span,
html[data-theme="dark"] .profile-page-canvas .fotolog-date {
  color: var(--fl-link, #ffffff) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .profile-page-canvas,
html[data-theme="dark"] .profile-page-canvas p,
html[data-theme="dark"] .profile-page-canvas .fotolog-caption-text,
html[data-theme="dark"] .profile-page-canvas .bio-text,
html[data-theme="dark"] .profile-page-canvas .post-text-content,
html[data-theme="dark"] .profile-page-canvas .post-body,
html[data-theme="dark"] .profile-page-canvas .comment-text,
html[data-theme="dark"] .profile-page-canvas .fotolog-info-content .info-row,
html[data-theme="dark"] .profile-page-canvas .fotolog-info-content span,
html[data-theme="dark"] .profile-page-canvas .profile-created-song-meta,
html[data-theme="dark"] .profile-page-canvas .profile-created-album-meta,
html[data-theme="dark"] .profile-page-canvas .profile-liked-song-artist,
html[data-theme="dark"] .profile-page-canvas .profile-created-pl-meta,
html[data-theme="dark"] .profile-page-canvas .profile-pinned-pl-author,
html[data-theme="dark"] .profile-page-canvas .profile-pinned-pl-badge {
  color: var(--fl-text, #e0e0e0) !important;
}

html[data-theme="dark"] .profile-page-canvas a,
html[data-theme="dark"] .profile-page-canvas .post-author-name,
html[data-theme="dark"] .profile-page-canvas .comment-author,
html[data-theme="dark"] .profile-page-canvas .action-link,
html[data-theme="dark"] .profile-page-canvas .action-link span,
html[data-theme="dark"] .profile-page-canvas .profile-created-song-name,
html[data-theme="dark"] .profile-page-canvas .profile-created-album-name,
html[data-theme="dark"] .profile-page-canvas .profile-liked-song-title,
html[data-theme="dark"] .profile-page-canvas .profile-created-pl-name,
html[data-theme="dark"] .profile-page-canvas .profile-pinned-pl-title,
html[data-theme="dark"] .profile-page-canvas .profile-website-link,
html[data-theme="dark"] .profile-page-canvas .song-title-link,
html[data-theme="dark"] .profile-page-canvas strong,
html[data-theme="dark"] .profile-page-canvas b,
html[data-theme="dark"] .profile-page-canvas h2,
html[data-theme="dark"] .profile-page-canvas h3,
html[data-theme="dark"] .profile-page-canvas h4 {
  color: var(--fl-link, #ffffff) !important;
}

html[data-theme="dark"] .profile-page-canvas .subtle-text,
html[data-theme="dark"] .profile-page-canvas .post-time,
html[data-theme="dark"] .profile-page-canvas .comment-time,
html[data-theme="dark"] .profile-page-canvas .profile-handle {
  color: var(--fl-text, #e0e0e0) !important;
  opacity: 0.78 !important;
}

html[data-theme="dark"] .profile-page-canvas .fotolog-info-content .info-row strong {
  color: var(--fl-link, #ffffff) !important;
  opacity: 1 !important;
}

/* Hero keeps dark scrim + light type for contrast over custom page backgrounds */
html[data-theme="dark"] .profile-page-canvas .profile-hero,
html[data-theme="dark"] .profile-page-canvas .profile-top-bar {
  background: rgba(0, 0, 0, 0.52) !important;
  border-color: var(--fl-border, #444444) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .profile-page-canvas .profile-hero .profile-hero-title-row h2,
html[data-theme="dark"] .profile-page-canvas .profile-hero .profile-handle,
html[data-theme="dark"] .profile-page-canvas .profile-hero .profile-stat,
html[data-theme="dark"] .profile-page-canvas .profile-hero .profile-stat-btn {
  color: #ffffff !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .profile-page-canvas .profile-hero .profile-handle {
  color: rgba(255, 255, 255, 0.88) !important;
}

html[data-theme="dark"] .profile-page-canvas .profile-post-filter-btn {
  background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.4) 100%);
  border-color: var(--fl-border, #555);
  color: var(--fl-text, #e0e0e0);
}

html[data-theme="dark"] .profile-page-canvas .profile-post-filter-btn.active {
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 100%);
  border-color: var(--fl-link, #111);
  color: var(--fl-link, #fff);
}

/* Profile: restore custom --fl-* surfaces (global light rules force white) */
html[data-theme="light"] .profile-page-canvas {
  background-color: var(--fl-bg-page, #ebebeb) !important;
  color: var(--fl-text, #111111) !important;
  border-color: var(--fl-border, #bbbbbb) !important;
}
html[data-theme="light"] body.has-profile-wallpaper .profile-page-canvas {
  background-color: color-mix(in srgb, var(--fl-bg-page, #ebebeb) 68%, transparent) !important;
}

html[data-theme="light"] .profile-page-canvas .retro-box,
html[data-theme="light"] .profile-page-canvas .post-card,
html[data-theme="light"] .profile-page-canvas .comment-item {
  background-color: var(--fl-bg-box, #ffffff) !important;
  background: var(--fl-bg-box, #ffffff) !important;
  border-color: var(--fl-border, #bbbbbb) !important;
  color: var(--fl-text, #111111) !important;
}

html[data-theme="light"] .profile-page-canvas .retro-box-header {
  background: rgba(0, 0, 0, 0.06) !important;
  border-bottom-color: var(--fl-border, #bbbbbb) !important;
  color: var(--fl-link, #111111) !important;
}

html[data-theme="light"] .profile-page-canvas .profile-hero,
html[data-theme="light"] .profile-page-canvas .profile-top-bar {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: var(--fl-border, #bbbbbb) !important;
  color: #111111 !important;
}

html[data-theme="light"] .profile-page-canvas .profile-hero-avatar {
  border-color: var(--fl-border, #bbbbbb) !important;
  background: #eeeeee !important;
}

/* Hero claro: nunca heredar --fl-link blanco de skins oscuras */
html[data-theme="light"] .profile-page-canvas .profile-hero .profile-hero-title-row h2,
html[data-theme="light"] .profile-page-canvas .profile-hero .profile-handle,
html[data-theme="light"] .profile-page-canvas .profile-hero .profile-stat,
html[data-theme="light"] .profile-page-canvas .profile-hero .profile-stat-btn {
  color: #111111 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .profile-page-canvas .profile-hero .profile-handle {
  color: #444444 !important;
}

html[data-theme="light"] .profile-page-canvas .profile-stat,
html[data-theme="light"] .profile-page-canvas .profile-stat-btn {
  color: #222222 !important;
}

html[data-theme="light"] .profile-page-canvas .profile-stat-btn:hover {
  color: #000000 !important;
}

html[data-theme="light"] .profile-page-canvas .fotolog-image-frame {
  background: #f0f0f0 !important;
}

html[data-theme="light"] .profile-page-canvas,
html[data-theme="light"] .profile-page-canvas p,
html[data-theme="light"] .profile-page-canvas .fotolog-caption-text,
html[data-theme="light"] .profile-page-canvas .bio-text,
html[data-theme="light"] .profile-page-canvas .post-text-content,
html[data-theme="light"] .profile-page-canvas .post-body,
html[data-theme="light"] .profile-page-canvas .comment-text,
html[data-theme="light"] .profile-page-canvas .comment-content,
html[data-theme="light"] .profile-page-canvas .fotolog-info-content .info-row,
html[data-theme="light"] .profile-page-canvas .fotolog-info-content span {
  color: var(--fl-text, #111111) !important;
}

html[data-theme="light"] .profile-page-canvas a,
html[data-theme="light"] .profile-page-canvas .post-author-name,
html[data-theme="light"] .profile-page-canvas .comment-author,
html[data-theme="light"] .profile-page-canvas .action-link,
html[data-theme="light"] .profile-page-canvas .action-link span,
html[data-theme="light"] .profile-page-canvas .visitor-name,
html[data-theme="light"] .profile-page-canvas strong,
html[data-theme="light"] .profile-page-canvas b,
html[data-theme="light"] .profile-page-canvas h2,
html[data-theme="light"] .profile-page-canvas h3,
html[data-theme="light"] .profile-page-canvas h4,
html[data-theme="light"] .profile-page-canvas .retro-box-header span,
html[data-theme="light"] .profile-page-canvas .profile-header-info h2,
html[data-theme="light"] .profile-page-canvas .profile-hero-title-row h2 {
  color: var(--fl-link, #111111) !important;
}

html[data-theme="light"] .profile-page-canvas .subtle-text,
html[data-theme="light"] .profile-page-canvas .post-time,
html[data-theme="light"] .profile-page-canvas .comment-time,
html[data-theme="light"] .profile-page-canvas .view-timestamp,
html[data-theme="light"] .profile-page-canvas .fotolog-date,
html[data-theme="light"] .profile-page-canvas .profile-handle {
  color: #555555 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .profile-page-canvas .post-actions-bar {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border-top-color: var(--fl-border, #cccccc) !important;
  border-bottom-color: var(--fl-border, #cccccc) !important;
  color: var(--fl-text, #333333) !important;
}

html[data-theme="light"] .profile-page-canvas .post-comments-section {
  background-color: rgba(0, 0, 0, 0.03) !important;
  color: var(--fl-text, #111111) !important;
}

html[data-theme="light"] .profile-page-canvas .comment-item {
  background: rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] .profile-sub-panel,
html[data-theme="light"] .metric-card {
  background: #ffffff !important;
  border-color: #cccccc !important;
  color: #111111 !important;
}

html[data-theme="light"] .metric-number {
  color: #111111 !important;
}

html[data-theme="light"] .metric-label {
  color: #666666 !important;
}

html[data-theme="light"] .profile-view-item {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: var(--fl-border, #cccccc) !important;
}

html[data-theme="light"] .pending-requests-profile-banner .pending-request-item {
  background: #f5f5f5 !important;
  border-bottom-color: #dddddd !important;
  color: #111111 !important;
}

html[data-theme="light"] .pending-requests-profile-banner .pending-request-name {
  color: #111111 !important;
}

html[data-theme="light"] .pending-requests-profile-banner .pending-request-handle {
  color: #555555 !important;
}

html[data-theme="light"] .private-lock-inner h3 {
  color: #111111 !important;
}

html[data-theme="light"] .private-lock-inner p,
html[data-theme="light"] .private-lock-inner svg {
  color: #555555 !important;
}

html[data-theme="light"] .library-archive-box {
  border-color: #b8b8b8 !important;
  box-shadow: 0 0 0 1px #ddd, 2px 2px 0 rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .library-archive-content {
  background: linear-gradient(180deg, #fafafa 0%, #f2f2f2 100%) !important;
}

html[data-theme="light"] .library-archive-hero {
  border-bottom-color: #d0d0d0 !important;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 6px,
      rgba(0, 0, 0, 0.02) 6px,
      rgba(0, 0, 0, 0.02) 7px
    ),
    linear-gradient(135deg, #ffffff 0%, #ececec 100%) !important;
}

html[data-theme="light"] .library-archive-eyebrow,
html[data-theme="light"] .library-hero-kicker,
html[data-theme="light"] .library-section-sub,
html[data-theme="light"] .library-section-bracket {
  color: #777777 !important;
}

html[data-theme="light"] .library-hero-line,
html[data-theme="light"] .library-section-label h3 {
  color: #111111 !important;
}

html[data-theme="light"] .library-hero-disc {
  border-color: #888 !important;
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 3px #e8e8e8 !important;
  background:
    radial-gradient(circle at center, #f5f5f5 0 18%, transparent 19%),
    repeating-radial-gradient(circle at center, #ccc 0 1px, #eee 1px 3px) !important;
}

html[data-theme="light"] .library-playlists-container {
  border-bottom-color: #d0d0d0 !important;
}

html[data-theme="light"] .library-section-header {
  border-bottom-color: #d8d8d8 !important;
}

html[data-theme="light"] .library-songs-stream {
  background: #ffffff !important;
  border-color: #cccccc !important;
  box-shadow: none !important;
}

html[data-theme="light"] .library-song-card,
html[data-theme="light"] .profile-page-canvas .library-song-card {
  background: transparent !important;
  border-bottom-color: #e4e4e4 !important;
  color: #111111 !important;
}

html[data-theme="light"] .library-song-card:hover,
html[data-theme="light"] .profile-page-canvas .library-song-card:hover {
  background: #f3f3f3 !important;
}

html[data-theme="light"] .library-song-card.is-playing {
  background: #ebebeb !important;
  box-shadow: none !important;
}

html[data-theme="light"] .library-song-card::before,
html[data-theme="light"] .library-song-card.is-playing::before {
  background: #111111 !important;
}

html[data-theme="light"] .library-top-bar {
  background: linear-gradient(180deg, #fafafa 0%, #ececec 100%) !important;
  border-bottom-color: #cccccc !important;
  color: #111111 !important;
}

html[data-theme="light"] .library-stats-info strong {
  color: #111111 !important;
}

html[data-theme="light"] .library-song-title,
html[data-theme="light"] .profile-page-canvas .library-song-title,
html[data-theme="light"] .library-song-card a {
  color: #111111 !important;
}

html[data-theme="light"] .library-song-artist,
html[data-theme="light"] .library-stats-info,
html[data-theme="light"] .profile-page-canvas .library-song-artist,
html[data-theme="light"] .library-song-card .subtle-text {
  color: #555555 !important;
}

html[data-theme="light"] .library-song-cover {
  border-color: #bbbbbb !important;
  filter: grayscale(0.2) !important;
}

html[data-theme="light"] .now-playing-pill {
  background: #111111 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .library-now-playing-banner {
  background: linear-gradient(180deg, #f7f7f7 0%, #eaeaea 100%) !important;
  border-bottom-color: #cccccc !important;
}

html[data-theme="light"] .library-now-playing-banner::before {
  background: #111111 !important;
}

html[data-theme="light"] .lib-np-status {
  color: #666666 !important;
}

html[data-theme="light"] .lib-np-status-dot {
  background: #111111 !important;
}

html[data-theme="light"] .lib-np-title {
  color: #111111 !important;
}

html[data-theme="light"] .lib-np-cover {
  border-color: #888 !important;
  box-shadow: 0 0 0 3px #eee, 0 0 0 4px #bbb !important;
}

html[data-theme="light"] .playlist-grid-card {
  background: #ffffff !important;
  border-color: #c8c8c8 !important;
  box-shadow: 1px 1px 0 #ddd !important;
}

html[data-theme="light"] .playlist-grid-card:hover {
  background: #f8f8f8 !important;
  border-color: #888 !important;
  box-shadow: 2px 2px 0 #ccc !important;
}

html[data-theme="light"] .pl-grid-cover-frame {
  border-bottom-color: #ddd !important;
  background: #eee !important;
}

html[data-theme="light"] .pl-grid-title {
  color: #111111 !important;
}

html[data-theme="light"] .pl-grid-author,
html[data-theme="light"] .pl-grid-badge {
  color: #666666 !important;
}

html[data-theme="light"] .library-empty-state,
html[data-theme="light"] .library-playlists-empty {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(0, 0, 0, 0.02) 8px,
      rgba(0, 0, 0, 0.02) 9px
    ),
    #f7f7f7 !important;
  border-color: #cccccc !important;
  color: #666666 !important;
}

html[data-theme="light"] .lib-remove-btn:hover {
  color: #111111 !important;
  border-color: #888 !important;
  background: #e8e8e8 !important;
}

/* Song / album / playlist detail pages */
html[data-theme="light"] .song-hero-box,
html[data-theme="light"] .album-hero-box,
html[data-theme="light"] .playlist-header-box,
html[data-theme="light"] .album-tracks-box,
html[data-theme="light"] .entity-comments-box {
  background: #ffffff !important;
  border-color: #c8c8c8 !important;
  color: #111111 !important;
}

html[data-theme="light"] .song-hero-box .retro-box-header,
html[data-theme="light"] .album-hero-box .retro-box-header,
html[data-theme="light"] .entity-comments-box .retro-box-header,
html[data-theme="light"] #song-lyrics-box .retro-box-header,
html[data-theme="light"] #song-videoclip-box .retro-box-header {
  background: linear-gradient(to bottom, #fafafa 0%, #ebebeb 100%) !important;
  border-bottom-color: #d8d8d8 !important;
  color: #111111 !important;
}

html[data-theme="light"] .song-detail-title,
html[data-theme="light"] .album-detail-title,
html[data-theme="light"] #playlist-title-display,
html[data-theme="light"] .song-page-container h1,
html[data-theme="light"] .song-page-container h2,
html[data-theme="light"] .song-page-container h3,
html[data-theme="light"] .album-page-canvas h1,
html[data-theme="light"] .album-page-canvas h2,
html[data-theme="light"] .album-page-canvas h3,
html[data-theme="light"] .playlist-page-canvas h1,
html[data-theme="light"] .playlist-page-canvas h2,
html[data-theme="light"] .playlist-page-canvas h3 {
  color: #111111 !important;
}

html[data-theme="light"] .song-detail-artists,
html[data-theme="light"] .album-detail-sub,
html[data-theme="light"] .album-detail-label,
html[data-theme="light"] .song-meta-badge,
html[data-theme="light"] .playlist-badge-label,
html[data-theme="light"] .credit-label,
html[data-theme="light"] .entity-comment-hint,
html[data-theme="light"] .entity-comment-meta,
html[data-theme="light"] .album-song-artists,
html[data-theme="light"] .album-song-likes,
html[data-theme="light"] .album-song-num,
html[data-theme="light"] .playlist-page-canvas .subtle-text {
  color: #555555 !important;
}

html[data-theme="light"] .credit-val,
html[data-theme="light"] .credit-val .username-link,
html[data-theme="light"] .album-detail-sub .username-link,
html[data-theme="light"] .playlist-author-row .username-link,
html[data-theme="light"] #playlist-author-info .username-link,
html[data-theme="light"] .entity-comment-text,
html[data-theme="light"] .entity-comment-body,
html[data-theme="light"] .entity-comment-meta a,
html[data-theme="light"] .album-song-title,
html[data-theme="light"] .pl-track-title,
html[data-theme="light"] .playlist-page-canvas a:not(.post-mention-tag) {
  color: #111111 !important;
}

html[data-theme="light"] .song-credits-grid {
  background: #f4f4f4 !important;
  border-color: #d0d0d0 !important;
  color: #111111 !important;
}

html[data-theme="light"] .album-song-row,
html[data-theme="light"] .playlist-track-row {
  border-bottom-color: #e6e6e6 !important;
  color: #111111 !important;
}

html[data-theme="light"] .album-song-row:hover,
html[data-theme="light"] .playlist-track-row:hover {
  background: #f3f3f3 !important;
}

html[data-theme="light"] .album-song-drag-handle {
  color: #777777 !important;
}

html[data-theme="light"] .album-song-drag-handle:hover {
  color: #111111 !important;
}

html[data-theme="light"] .album-song-row.drag-over-above {
  border-top-color: #111111 !important;
}

html[data-theme="light"] .album-song-row.drag-over-below {
  border-bottom-color: #111111 !important;
}

html[data-theme="light"] .song-comment-ts-btn {
  background: #eeeeee !important;
  border-color: #999999 !important;
  color: #111111 !important;
}

html[data-theme="light"] .song-lyrics-display,
html[data-theme="light"] .song-lyrics-display .lyrics-line {
  color: #222222 !important;
}

html[data-theme="light"] .song-waveform-wrap {
  background: #f0f0f0 !important;
  border-color: #cccccc !important;
}

html[data-theme="light"] .stat-badge-link,
html[data-theme="light"] .stat-badge-static {
  background: #f0f0f0 !important;
  border-color: #bbbbbb !important;
  color: #222222 !important;
}

html[data-theme="light"] .stat-badge-link:hover {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .profile-post-filter-btn {
  background: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
  border-color: #bbbbbb;
  color: #222222;
}

html[data-theme="light"] .profile-post-filter-btn:hover {
  border-color: #888888;
  color: #000000;
}

html[data-theme="light"] .profile-post-filter-btn.active {
  background: linear-gradient(to bottom, #333333 0%, #111111 100%);
  border-color: #111111;
  color: #ffffff;
}

/* ===== Email verification / unverified locks ===== */
.verify-banner {
  background: #1c1c1c;
  border-bottom: 1px solid #444;
  color: #eaeaea;
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 1200;
}
.verify-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.verify-banner-lock {
  display: inline-flex;
  color: #bbb;
}
.lux-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lux-modal[hidden] { display: none !important; }
.lux-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
}
.lux-modal-card {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 28px));
  background: #1a1a1a;
  border: 1px solid #444;
  padding: 22px 20px;
  color: #eee;
}
.verify-email-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
}
.verify-code-input {
  letter-spacing: .35em;
  font-size: 1.35rem;
  text-align: center;
  font-family: Consolas, monospace;
}
.auth-forgot-wrap {
  margin-top: 12px;
  text-align: center;
}
.link-btn {
  background: none;
  border: none;
  color: #ccc;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.link-btn:hover { color: #fff; }
.auth-alt-form { margin-top: 8px; }

body.email-unverified .action-requires-verified,
body.email-unverified .composer-form,
body.email-unverified #composer-form,
body.email-unverified .chat-composer-wrapper,
body.email-unverified .follow-btn,
body.email-unverified [data-like-post-id],
body.email-unverified .post-like-btn,
body.email-unverified .repost-btn,
body.email-unverified .comment-submit-btn {
  position: relative;
}
body.email-unverified .locked-action {
  opacity: .55;
  cursor: not-allowed !important;
  filter: grayscale(.3);
}
body.email-unverified .locked-action::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbbbbb' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10' rx='1'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}
body.email-unverified #composer-form,
body.email-unverified .chat-composer-wrapper {
  pointer-events: none;
  opacity: .55;
}
body.email-unverified #composer-form::before,
body.email-unverified .chat-composer-wrapper::before {
  content: 'Verifica tu correo para publicar o escribir';
  display: block;
  font-size: 12px;
  color: #aaa;
  margin-bottom: 6px;
}


/* ==========================================================================
   CUSTOM ICONS + VINTAGE EMOJI (UGC)
   ========================================================================== */
.lux-ico {
  display: inline-block;
  vertical-align: -0.2em;
  flex-shrink: 0;
  stroke: currentColor;
  pointer-events: none;
}
.lux-ico.is-filled {
  fill: currentColor;
}
button .lux-ico,
a .lux-ico,
.lux-ico-inline {
  vertical-align: middle;
}
.lux-ico-label {
  vertical-align: middle;
}
img.lux-emoji {
  height: 1.2em;
  width: 1.2em;
  margin: 0 0.05em;
  vertical-align: -0.2em;
  display: inline-block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
}
.conv-item.is-muted .conv-item-name::after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 4px;
  vertical-align: -1px;
  opacity: 0.85;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ===== Luxuria VIP ===== */
.desktop-only { display: block; }
@media (max-width: 900px) {
  .desktop-only { display: none !important; }
}

.vip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  vertical-align: middle;
  line-height: 0;
  border: none;
  padding: 0;
  background: none;
  opacity: 1;
}
.vip-badge-img {
  width: 14px;
  height: 18px;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  flex-shrink: 0;
}

.vip-name {
  font-weight: 700;
  --vip-name-c1: #f0f0f0;
  --vip-name-c2: #9a9a9a;
  --vip-name-glow-rgba: rgba(255,255,255,0);
  --vip-name-glow-px: 0px;
}
.vip-name.vip-name-solid {
  color: var(--vip-name-c1);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--vip-name-c1);
  text-shadow:
    0 0 calc(var(--vip-name-glow-px) * 0.4) var(--vip-name-glow-rgba),
    0 0 var(--vip-name-glow-px) var(--vip-name-glow-rgba);
}
.vip-name.vip-name-gradient {
  background-image: linear-gradient(90deg, var(--vip-name-c1), var(--vip-name-c2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 calc(var(--vip-name-glow-px) * 0.55) var(--vip-name-glow-rgba));
}
/* Solo texto/nombre del autor del post — NO heredar a comentarios ajenos */
.vip-post-font .post-card-header .post-author-name,
.vip-post-font .post-card-header .post-meta,
.vip-post-font .post-text-content {
  font-family: var(--vip-post-font, inherit) !important;
}
.vip-post-font .comments-list {
  font-family: Tahoma, sans-serif;
}
.vip-post-font .comments-list .comment-item:not(.vip-comment-font),
.vip-post-font .comments-list .comment-item:not(.vip-comment-font) .comment-text,
.vip-post-font .comments-list .comment-item:not(.vip-comment-font) .comment-author,
.vip-post-font .comments-list .comment-item:not(.vip-comment-font) .comment-actions-bar {
  font-family: Tahoma, sans-serif !important;
}
.comment-item.vip-comment-font .comment-text,
.comment-item.vip-comment-font .comment-author {
  font-family: var(--vip-post-font, inherit) !important;
}
.vip-inner-fieldset {
  margin-top: 8px;
  margin-bottom: 10px;
}
@media (max-width: 900px) {
  .customizer-preview-box {
    position: relative;
    top: auto;
    max-height: none;
  }
}

.vip-avatar-wrap,
.vip-upsell-avatar-wrap {
  display: inline-flex;
  border-radius: 50%;
  padding: 2px;
  line-height: 0;
}
.vip-frame-silver {
  background: linear-gradient(135deg, #ddd, #777, #eee);
  box-shadow: 0 0 0 1px #555;
}
.vip-frame-double {
  background: #222;
  box-shadow: 0 0 0 2px #aaa, 0 0 0 4px #333;
}
.vip-frame-pulse {
  background: linear-gradient(135deg, #bbb, #444);
  animation: vip-pulse 2.4s ease-in-out infinite;
}
@keyframes vip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,200,200,0.35); }
  50% { box-shadow: 0 0 0 4px rgba(200,200,200,0.05); }
}
.vip-avatar-wrap img,
.vip-upsell-avatar-wrap img {
  border-radius: 50%;
  display: block;
}
.vip-upsell-avatar {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.vip-upsell-box {
  position: relative;
  padding: 12px 12px 14px;
  margin-bottom: 10px;
}
.vip-upsell-dismiss {
  position: absolute;
  top: 4px;
  right: 6px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.vip-upsell-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 2px;
  background: #1a1a1a;
  border: 1px solid #333;
}
.vip-upsell-name-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.vip-upsell-copy {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
}
.vip-upsell-price {
  margin: 0 0 10px;
  font-size: 10px;
}
.vip-upsell-cta {
  display: inline-block;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  color: #ffffff !important;
}
.vip-upsell-cta:hover {
  color: #ffffff !important;
}
html[data-theme="light"] .vip-upsell-box {
  background: #ffffff;
  border-color: #bbbbbb;
}
html[data-theme="light"] .vip-upsell-preview {
  background: #121212;
  border-color: #333;
}
html[data-theme="light"] .vip-upsell-copy {
  color: #111111;
}
html[data-theme="light"] .vip-upsell-cta.retro-btn-accent {
  background: linear-gradient(to bottom, #2a2a2a 0%, #0a0a0a 100%);
  color: #ffffff !important;
  border-color: #000000;
}
html[data-theme="light"] .vip-demo-card {
  border: 1px solid #ccc;
}
html[data-theme="light"] .vip-hero-preview {
  padding: 10px 12px;
  background: #121212;
  border: 1px solid #333;
}
html[data-theme="light"] .vip-hero-preview .subtle-text {
  color: #ddd;
}
html[data-theme="light"] #vip-checkout-btn.retro-btn-accent {
  color: #ffffff !important;
}

.vip-page-box { max-width: 640px; margin: 0 auto; }
.vip-hero-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.vip-page-lead { font-size: 13px; margin: 0 0 10px; }
.vip-page-status { font-size: 12px; margin: 0 0 12px; opacity: 0.85; }
.vip-page-status.is-active { opacity: 1; font-weight: 600; }
.vip-benefits-list {
  margin: 16px 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
}
.vip-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.vip-demo-section {
  margin: 18px 0 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
html[data-theme="light"] .vip-demo-section {
  border-top-color: rgba(0,0,0,0.1);
}
.vip-demo-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.vip-demo-sub {
  margin: 0 0 12px;
  font-size: 11px;
}
.vip-demo-posts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vip-demo-card {
  pointer-events: none;
  user-select: none;
  margin: 0 !important;
}
.vip-demo-card-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 8px;
}
.vip-demo-card .post-author-avatar {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
}
.vip-demo-card .vip-avatar-wrap {
  flex-shrink: 0;
}

.vip-post {
  background: var(--vip-post-bg, #2a2a2a) !important;
  position: relative;
  overflow: hidden;
}
.vip-post.vip-post-has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--vip-post-image);
  background-size: cover;
  background-position: center;
  opacity: var(--vip-post-image-opacity, 0.35);
  pointer-events: none;
  z-index: 0;
}
.vip-post > * {
  position: relative;
  z-index: 1;
}

.vip-bubble-ink.bubble-sent {
  background: #1a1a1a !important;
  border: 1px solid #888 !important;
}
.vip-bubble-contrast.bubble-sent {
  background: #f2f2f2 !important;
  color: #111 !important;
  border: 1px solid #111 !important;
}
.vip-bubble-contrast.bubble-sent .bubble-text,
.vip-bubble-contrast.bubble-sent .bubble-meta { color: #111 !important; }
.vip-bubble-soft.bubble-sent {
  background: #333 !important;
  border-radius: 14px 14px 4px 14px !important;
}

.vip-theme-noir {
  --fl-bg-page: #0a0a0a;
  --fl-bg-box: #141414;
  --fl-border: #555;
}
.vip-theme-paper {
  --fl-bg-page: #e8e4dc;
  --fl-bg-box: #f7f4ee;
  --fl-text: #1a1a1a;
  --fl-link: #111;
  --fl-border: #b8b0a4;
}
.vip-theme-chrome {
  --fl-bg-page: #1c1c1e;
  --fl-bg-box: #2a2a2e;
  --fl-border: #9aa0a6;
  --fl-link: #e8e8ea;
}

.vip-controls-dimmed { opacity: 0.72; }

/* ==========================================================================
   LANDING (visitantes sin sesión)
   ========================================================================== */
#auth-view.landing {
  --landing-ink: #f4f4f4;
  --landing-ink-soft: #bdbdbd;
  --landing-hero-bg: radial-gradient(120% 140% at 0% 0%, #2e2e2e 0%, #151515 55%, #0b0b0b 100%);
}

.landing-hero {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) minmax(280px, 340px);
  grid-template-areas: "cover copy form";
  gap: 28px;
  align-items: start;
  padding: 28px;
  background: var(--landing-hero-bg);
  border: 1px solid #000;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.landing-hero::after {
  content: "";
  position: absolute;
  inset: auto -60px -80px auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255,255,255,0.05) 0 1px, transparent 1px 7px);
  pointer-events: none;
}

.landing-hero-copy,
.landing-stage-copy {
  grid-area: copy;
  color: var(--landing-ink);
  padding-top: 2px;
  position: relative;
  z-index: 1;
  min-width: 0;
  align-self: start;
}

.landing-stage-cover {
  grid-area: cover;
  position: relative;
  display: block;
  width: 220px;
  height: 220px;
  padding: 0;
  border: 1px solid #3a3a3a;
  background: #111;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}

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

.landing-stage-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-stage-now {
  margin: 10px 0 0;
  font-weight: 700;
  color: #fff;
  font-size: 15px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.landing-pulse,
.landing-now,
.landing-lead {
  display: none !important;
}

.explore-loading-line {
  margin: 0;
  padding: 16px 8px;
  color: var(--text-muted, #aaa);
  font-size: 13px;
}

.share-card-preview-wrap {
  margin: 0 0 12px;
  text-align: center;
}

.share-card-preview {
  width: 112px;
  height: 198px;
  object-fit: cover;
  object-position: top;
  border: 1px solid #444;
  background: #111;
  display: block;
  margin: 0 auto;
}

.share-card-preview-wrap figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: #aaa;
  line-height: 1.4;
}

.landing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--landing-ink-soft) !important;
  border: 1px solid #3a3a3a;
  padding: 4px 9px;
  background: rgba(255,255,255,0.03);
}

.landing-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
  animation: landing-pulse 2s infinite;
}

@keyframes landing-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.landing-title {
  font-size: 34px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -1px;
  margin: 12px 0 0;
  color: #fff;
}

.landing-lead {
  font-size: 13.5px;
  line-height: 1.6;
  color: #d4d4d4 !important;
  max-width: 520px;
}

.landing-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

#auth-view .landing-btn-main {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #fff !important;
  font-size: 13px;
  padding: 10px 20px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#auth-view .landing-btn-main:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255,255,255,0.18);
}

#auth-view .landing-btn-alt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: bold;
  padding: 10px 18px;
  text-decoration: none;
  background: transparent !important;
  border: 1px solid #5a5a5a !important;
  color: #fff !important;
}

#auth-view .landing-btn-alt:hover { border-color: #fff !important; }

.landing-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 26px 0 0;
  padding: 0;
  max-width: 520px;
  background: #2f2f2f;
  border: 1px solid #2f2f2f;
}

.landing-stats li {
  background: #121212;
  padding: 10px 8px;
  text-align: center;
}

.landing-stats strong {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.landing-stats span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #9a9a9a;
}

/* Tarjeta de acceso */
.landing-auth {
  position: relative;
  z-index: 1;
  margin: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.landing-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border-medium);
}

.landing-auth-tab {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: bold;
  padding: 11px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: var(--bg-box-header);
  color: var(--text-muted);
  cursor: pointer;
}

.landing-auth-tab.is-active {
  background: var(--bg-box);
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

.landing-auth-tab:focus-visible,
.landing-pass-toggle:focus-visible,
.landing-track-cover:focus-visible,
.landing-artist:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.landing-auth .retro-box-content { padding: 16px; }
.landing-auth .form-group { margin-bottom: 11px; }
.landing-auth label { font-weight: bold; }
.landing-auth .retro-input { width: 100%; padding: 8px 9px; font-size: 12px; }
.landing-auth { grid-area: form; align-self: start; margin: 0; }
.landing-auth .form-row { display: grid; grid-template-columns: 1fr; gap: 0; }
.landing-auth .form-row .form-group { min-width: 0; }

.landing-submit {
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
}

.auth-oauth {
  margin-top: 12px;
}

.auth-oauth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 11px;
}

.auth-oauth-divider::before,
.auth-oauth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-medium);
}

.auth-oauth-divider span {
  text-transform: lowercase;
}

.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: bold;
  text-decoration: none;
  color: var(--text-primary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-medium);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.auth-google-btn:hover {
  background: var(--bg-box);
  border-color: var(--text-muted);
}

.auth-google-btn:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.auth-google-icon {
  flex-shrink: 0;
}

.landing-pass-wrap { position: relative; }
.landing-pass-wrap .retro-input { padding-right: 62px; }

.landing-pass-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: inherit;
  font-size: 10.5px;
  padding: 3px 8px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-medium);
  cursor: pointer;
}

.landing-pass-meter {
  height: 3px;
  margin-top: 6px;
  background: var(--border-light);
  overflow: hidden;
}

.landing-pass-meter span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--text-primary);
  transition: width 0.2s ease, opacity 0.2s ease;
}

.landing-pass-meter[data-level="1"] span { width: 25%; opacity: 0.45; }
.landing-pass-meter[data-level="2"] span { width: 50%; opacity: 0.65; }
.landing-pass-meter[data-level="3"] span { width: 75%; opacity: 0.85; }
.landing-pass-meter[data-level="4"] span { width: 100%; opacity: 1; }

.landing-optional { font-weight: normal; color: var(--text-muted); }

.landing-auth .role-tags-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.landing-auth .role-tag-option {
  border: 1px solid var(--border-medium);
  padding: 4px 9px;
  font-weight: normal;
  background: var(--bg-subtle);
  transition: background 0.12s ease, color 0.12s ease;
}

.landing-auth .role-tag-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.landing-auth .role-tag-option:has(input:checked) {
  background: var(--text-primary);
  color: var(--bg-box) !important;
  border-color: var(--text-primary);
}

.landing-auth .role-tag-option:has(input:focus-visible) {
  outline: 2px solid var(--text-primary);
  outline-offset: 1px;
}

.landing-switch,
.landing-legal {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted) !important;
  margin-top: 10px;
}

.landing-legal a { text-decoration: underline; }

/* Secciones */
.landing-section {
  margin-top: 26px;
}

.landing-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border-medium);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.landing-section h2 {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}

.landing-section-sub {
  color: var(--text-muted) !important;
  font-size: 11.5px;
  margin: -4px 0 12px;
}

.landing-more {
  font-size: 11.5px;
  font-weight: bold;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-link);
}

.landing-more:hover { text-decoration: underline; }

.landing-empty {
  grid-column: 1 / -1;
  padding: 18px;
  text-align: center;
  color: var(--text-muted) !important;
  border: 1px dashed var(--border-medium);
}

.landing-empty a { text-decoration: underline; }

/* Tendencias */
.landing-trending {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.landing-track { min-width: 0; }

.landing-track-cover {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--border-dark);
  background: var(--bg-subtle);
  cursor: pointer;
  overflow: hidden;
}

.landing-track-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.15);
  transition: transform 0.35s ease, filter 0.35s ease;
}

.landing-track-cover:hover img,
.landing-track-cover:focus-visible img {
  transform: scale(1.05);
  filter: grayscale(0) brightness(0.8);
}

.landing-track-rank {
  position: absolute;
  top: 6px;
  left: 6px;
  min-width: 22px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
}

.landing-track-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #000;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.landing-track-cover:hover .landing-track-play,
.landing-track-cover:focus-visible .landing-track-play {
  opacity: 1;
  transform: none;
}

.landing-track-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 7px;
  min-width: 0;
}

.landing-track-meta > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-track-title {
  font-weight: bold;
  font-size: 12.5px;
  color: var(--text-primary) !important;
  text-decoration: none;
}

.landing-track-title:hover,
.landing-track-artist a:hover { text-decoration: underline; }

.landing-track-artist,
.landing-track-artist a {
  color: var(--text-secondary) !important;
  font-size: 11.5px;
  text-decoration: none;
}

.landing-track-plays {
  font-size: 10px;
  color: var(--text-muted);
}

.landing-track.is-skeleton .landing-track-cover,
.landing-track.is-skeleton .landing-track-meta span {
  background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--border-light) 50%, var(--bg-subtle) 100%);
  background-size: 200% 100%;
  animation: landing-shimmer 1.4s infinite linear;
  cursor: default;
}

.landing-track.is-skeleton .landing-track-meta span {
  display: block;
  height: 10px;
  margin-top: 4px;
}

.landing-track.is-skeleton .landing-track-meta span:last-child { width: 60%; }

@keyframes landing-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Funciones */
.landing-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-medium);
  border: 1px solid var(--border-medium);
}

.landing-feature {
  background: var(--bg-box);
  padding: 18px 16px;
  transition: background 0.15s ease;
}

.landing-feature:hover { background: var(--bg-subtle); }

.landing-feature-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  margin-bottom: 10px;
}

.landing-feature-icon svg { width: 17px; height: 17px; }

.landing-feature h3 {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.landing-feature p {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-secondary) !important;
}

/* Pasos */
.landing-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.landing-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  background: var(--bg-box);
  border: 1px solid var(--border-medium);
}

.landing-step-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px;
  background: var(--text-primary);
  color: var(--bg-box);
}

.landing-steps h3 {
  font-size: 13px;
  margin-bottom: 3px;
  color: var(--text-primary);
}

.landing-steps p {
  font-size: 11.5px;
  color: var(--text-secondary) !important;
}

/* Artistas */
.landing-artists {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}

.landing-artist {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 12px 6px;
  min-width: 0;
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.landing-artist:hover {
  border-color: var(--border-medium);
  background: var(--bg-box);
}

.landing-artist img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-medium);
  margin-bottom: 6px;
  background: var(--bg-subtle);
}

.landing-artist strong,
.landing-artist span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-artist strong {
  font-size: 12px;
  color: var(--text-primary) !important;
}

.landing-artist-handle {
  font-size: 10.5px;
  color: var(--text-secondary) !important;
}

.landing-artist-meta {
  font-size: 10px;
  color: var(--text-muted) !important;
}

/* Roles */
.landing-roles {
  text-align: center;
  padding: 22px 10px 4px;
}

.landing-roles h2 { margin-bottom: 14px; }

.landing-role-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.landing-role-list li {
  padding: 6px 13px;
  border: 1px solid var(--border-medium);
  background: var(--bg-box);
  color: var(--text-secondary);
  font-size: 12px;
}

/* CTA final + footer */
.landing-final-cta {
  margin-top: 30px;
  padding: 34px 20px;
  text-align: center;
  background: var(--landing-hero-bg);
  border: 1px solid #000;
  color: #fff;
}

.landing-final-cta h2 {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.6px;
  color: #fff;
}

.landing-final-cta p {
  margin: 6px 0 16px;
  color: #c8c8c8 !important;
  font-size: 13px;
}

.landing-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 2px 4px;
  border-top: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: 11px;
}

.landing-footer nav {
  display: flex;
  gap: 14px;
  align-items: center;
}

.landing-footer a,
.landing-footer .link-btn {
  color: var(--text-secondary) !important;
  font-size: 11px;
  text-decoration: none;
}

.landing-footer a:hover,
.landing-footer .link-btn:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 900px) {
  .landing-hero {
    grid-template-columns: 148px minmax(0, 1fr);
    grid-template-areas:
      "cover copy"
      "form form";
    gap: 14px 16px;
    padding: 18px;
  }
  .landing-stage-cover { width: 148px; height: 148px; }
  .landing-stage-copy { align-self: center; }
  .landing-title { font-size: 28px; margin: 8px 0; }
  .landing-eyebrow,
  .landing-explore-link,
  .landing-lead,
  .landing-pulse,
  .landing-now { display: none !important; }
  .landing-trending { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .landing-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-steps { grid-template-columns: 1fr; }
  .landing-artists { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .header-guest-hint { display: none; }
  .landing-hero {
    grid-template-columns: 104px minmax(0, 1fr);
    padding: 14px;
    gap: 12px;
  }
  .landing-stage-cover { width: 104px; height: 104px; }
  .landing-title { font-size: 22px; letter-spacing: -0.4px; margin: 0 0 6px; line-height: 1.1; }
  .landing-stage-now { font-size: 13px; margin-top: 0; font-weight: 600; }
  .landing-stage-play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .landing-unmute-btn { margin-top: 8px; }
}

@media (max-width: 520px) {
  .landing-hero { padding: 18px 14px; }
  .landing-title { font-size: 22px; letter-spacing: -0.6px; }
  .landing-lead { font-size: 12.5px; }
  .landing-cta-row > * { flex: 1 1 100%; justify-content: center; text-align: center; }
  .landing-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-features { grid-template-columns: 1fr; }
  .landing-trending { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-auth .form-row { grid-template-columns: 1fr; gap: 0; }
  .landing-artists { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .landing-section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .landing-track-play { opacity: 1; transform: none; width: 32px; height: 32px; }
}

@media (hover: none) {
  .landing-track-play { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-live-dot,
  .landing-track.is-skeleton .landing-track-cover,
  .landing-track.is-skeleton .landing-track-meta span { animation: none; }
  .landing-track-cover img,
  .landing-btn-main,
  .landing-track-play { transition: none; }
}

#auth-view .landing-btn-main,
#auth-view .landing-btn-main span { color: #000 !important; }
#auth-view .landing-btn-alt,
#auth-view .landing-btn-alt:hover { color: #fff !important; }
#auth-view .landing-hero-copy .landing-eyebrow { color: #bdbdbd !important; }

/* La barra de usuario logueado nunca se muestra a visitantes (en móvil había un display:flex !important). */
#header-nav-auth[style*="display: none"],
#header-nav-guest[hidden] {
  display: none !important;
}

#auth-view .landing-auth .link-btn {
  color: var(--text-link, #4b7bd8) !important;
  text-decoration: underline;
}
html[data-theme="light"] #auth-view .landing-auth .link-btn {
  color: #1f4fa8 !important;
}
html[data-theme="light"] #auth-view .landing-switch {
  color: #555;
}

/* ===== Verificación de correo ===== */
.verify-email-card { width: min(440px, calc(100vw - 28px)); padding: 24px 22px 18px; }
.verify-close-x {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0; color: #999; font-size: 22px; line-height: 1; cursor: pointer;
}
.verify-close-x:hover { color: #fff; }
.verify-steps { display: flex; gap: 6px; margin-bottom: 14px; }
.verify-steps span {
  flex: 1; font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: #777; padding-top: 6px; border-top: 3px solid #333;
}
.verify-steps .is-done { color: #aaa; border-top-color: #888; }
.verify-steps .is-current { color: #fff; border-top-color: #fff; }
.verify-lead { margin: 0 0 14px; line-height: 1.5; }
.verify-lead strong { color: #fff; word-break: break-all; }
.verify-label { display: block; font-size: 12px; font-weight: 700; margin: 10px 0 6px; color: #ddd; }
.verify-code-input { width: 100%; box-sizing: border-box; padding: 12px 10px; font-size: 1.6rem; letter-spacing: .5em; }
.verify-code-input.is-wrong { animation: verify-shake .4s; border-color: #c55 !important; }
@keyframes verify-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.verify-status { min-height: 18px; margin: 8px 0 0; font-size: 12px; color: #aaa; }
.verify-status[data-tone="error"] { color: #ff7a7a; }
.verify-status[data-tone="warn"] { color: #e0b450; }
.verify-status[data-tone="ok"] { color: #7ddf9a; }
.verify-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.verify-actions > button { flex: 1 1 140px; padding: 9px 12px; }
.verify-open-inbox { display: inline-block; margin-top: 12px; font-size: 12px; color: #fff; text-decoration: underline; }
.verify-help { margin-top: 14px; font-size: 12px; color: #bbb; border-top: 1px solid #333; padding-top: 10px; }
.verify-help summary { cursor: pointer; color: #ddd; }
.verify-help ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; }
.verify-change-form .retro-input { width: 100%; box-sizing: border-box; }
.verify-suggest { margin: 6px 0 0; font-size: 12px; color: #e0b450; }
.verify-suggest .link-btn { color: #fff; font-weight: 700; }
.verify-footnote { margin: 14px 0 6px; font-size: 11px; color: #888; }
html[data-theme="light"] .verify-email-card { background: #fff; color: #222; border-color: #ccc; }
html[data-theme="light"] .verify-lead strong,
html[data-theme="light"] .verify-open-inbox,
html[data-theme="light"] .verify-suggest .link-btn { color: #111; }
html[data-theme="light"] .verify-steps .is-current { color: #111; border-top-color: #111; }
html[data-theme="light"] .verify-label,
html[data-theme="light"] .verify-help summary { color: #333; }
html[data-theme="light"] .verify-help { color: #555; border-top-color: #ddd; }

/* ===== Vista previa para visitantes ===== */
.lx-preview-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  border: 1px solid currentColor; opacity: .75; vertical-align: middle; white-space: nowrap;
  flex-shrink: 0;
}
.player-meta > .lx-preview-badge,
.player-artist-row .lx-preview-badge {
  margin-left: 0;
  font-size: 8px;
  letter-spacing: 0.04em;
  color: #c8c8c8;
  border-color: #777;
}
.lx-preview-card {
  position: fixed; right: 16px; bottom: calc(var(--player-dock, 86px) + 16px); z-index: 4500;
  width: min(340px, calc(100vw - 32px)); padding: 16px 16px 14px;
  background: #151515; color: #eee; border: 1px solid #555; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; font-size: 13px; box-sizing: border-box;
  transform: translateY(12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.lx-preview-card.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.lx-preview-card-title { display: block; font-size: 14px; margin-bottom: 6px; color: #fff; }
.lx-preview-card-text { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: #ccc; }
.lx-preview-card-actions { display: flex; gap: 8px; }
.lx-preview-card-actions button { flex: 1; padding: 8px 10px; }
.lx-preview-card-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: #999; font-size: 18px; cursor: pointer; }
html[data-theme="light"] .lx-preview-card { background: #fff; color: #222; border-color: #bbb; }
html[data-theme="light"] .lx-preview-card-title { color: #111; }
html[data-theme="light"] .lx-preview-card-text { color: #444; }
@media (prefers-reduced-motion: reduce) { .lx-preview-card { transition: none; } }

/* ===== Notificaciones de moderación ===== */
.notif-moderation .notif-text { white-space: pre-line; }
html[data-theme] #verify-email-modal #verify-submit-btn { background: #f2f2f2; border-color: #f2f2f2; color: #000 !important; font-weight: 700; }
html[data-theme] #verify-email-modal #verify-submit-btn:disabled { opacity: .6; }
html[data-theme="light"] #verify-email-modal #verify-submit-btn { background: #111; border-color: #111; color: #fff !important; }

/* ===== Ticketera / Eventos (estilo monocromático retro) ===== */
.tickets-app,
#explore-eventos-panel,
#explore-mis-entradas-panel {
  color: var(--text-primary);
  font-family: var(--font-retro);
  font-size: 12px;
}

.explore-eventos-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#explore-eventos-panel .tickets-grid { margin-top: 4px; }

.tickets-app {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 10px 72px;
}
.tickets-app:has(.event-page) {
  max-width: 980px;
}
.tickets-shell { margin: 0; }
.tickets-shell > .retro-box-header {
  gap: 10px;
  flex-wrap: wrap;
}
.tickets-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  font-weight: bold;
}
.tickets-nav a {
  color: var(--text-secondary);
  text-decoration: none;
}
.tickets-nav a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.tickets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.tickets-card {
  display: block;
  text-decoration: none;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  background: var(--bg-subtle);
  overflow: hidden;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.08);
  transition: border-color .15s, background .15s;
}
.tickets-card:hover {
  border-color: var(--border-medium);
  background: var(--bg-box-header);
}
.tickets-card-img {
  height: 120px;
  background: #181818 center/cover no-repeat;
  border-bottom: 1px solid var(--border-light);
  filter: grayscale(0.25);
}
.tickets-card-img-empty {
  background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
  filter: none;
}
.tickets-card-body { padding: 10px 12px; }
.tickets-card-body h3 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: bold;
  color: var(--text-primary);
  font-family: var(--font-retro);
}
.tickets-meta {
  margin: 0 0 2px;
  color: var(--text-muted);
  font-size: 11px;
}
.tickets-meta strong { color: var(--text-primary); }
.tickets-price {
  margin: 8px 0 0;
  color: var(--text-primary);
  font-weight: bold;
  font-size: 12px;
}

.tickets-section-title {
  margin: 14px 0 8px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 4px;
}
.tickets-mine-list { display: grid; gap: 8px; margin-bottom: 16px; }
.tickets-mine-card {
  display: flex;
  gap: 10px;
  align-items: stretch;
  padding: 8px;
  border: 1px solid var(--border-light);
  background: var(--bg-subtle);
  color: var(--text-primary);
  text-decoration: none;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.06);
}
.tickets-mine-card:hover {
  border-color: var(--border-medium);
  background: var(--bg-box-header);
}
.tickets-mine-card h3,
.tickets-mine-card strong {
  margin: 0 0 2px;
  color: var(--text-primary);
  font-size: 13px;
  display: block;
  font-weight: bold;
}
.tickets-mine-thumb {
  width: 72px;
  min-height: 64px;
  flex: 0 0 72px;
  background: #181818 center/cover no-repeat;
  border: 1px solid var(--border-medium);
  filter: grayscale(0.2);
}
.tickets-qty-max { color: var(--text-muted); font-size: 11px; }

.tickets-poster { margin: 12px 0 8px; padding: 0; }
.tickets-poster img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  object-fit: contain;
  filter: grayscale(0.15);
}

.tickets-muted,
.tickets-fineprint {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}
.tickets-fineprint { margin: 4px 0 0; }
.tickets-error { color: #ccc; font-weight: bold; }
.tickets-empty {
  padding: 28px 10px;
  text-align: center;
  color: var(--text-secondary);
}
.tickets-empty h2 {
  color: var(--text-primary);
  margin-bottom: 6px;
  font-size: 14px;
}

.tickets-detail h1,
.tickets-detail h2,
.tickets-detail h3,
.tickets-form h3 {
  color: var(--text-primary);
  font-family: var(--font-retro);
}
.tickets-detail h1 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 6px;
}
.tickets-detail h2,
.tickets-detail h3,
.tickets-form h3 {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0 8px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 4px;
}
.tickets-hero {
  height: 180px;
  background: #181818 center/cover no-repeat;
  border: 1px solid var(--border-medium);
  margin-bottom: 10px;
  filter: grayscale(0.2);
}
.tickets-desc {
  margin: 12px 0 18px;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
  font-size: 12px;
}
.tickets-type-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}
.tickets-type-row strong { color: var(--text-primary); font-size: 12px; }
.tickets-qty { display: flex; align-items: center; gap: 6px; }
.tickets-qty-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--btn-secondary-border);
  background: linear-gradient(to bottom, var(--secondary-btn-from), var(--secondary-btn-to));
  color: var(--btn-secondary-text);
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}
.tickets-qty-val {
  min-width: 1.5em;
  text-align: center;
  font-weight: bold;
  color: var(--text-primary);
}
.tickets-summary {
  margin: 14px 0;
  padding: 10px;
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  line-height: 1.6;
  color: var(--text-primary);
  font-size: 12px;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.06);
}
.tickets-total {
  font-size: 13px;
  color: var(--text-primary);
  margin-top: 6px;
  font-weight: bold;
}

.tickets-buy-form,
.tickets-form {
  display: grid;
  gap: 10px;
  max-width: 480px;
}
.tickets-buy-form label,
.tickets-form label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  font-weight: bold;
  color: var(--text-secondary);
}
.tickets-buy-form input,
.tickets-form input,
.tickets-form textarea,
.tickets-form select {
  background: var(--input-bg);
  border: 1px solid var(--border-medium);
  color: var(--input-text);
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
  font-weight: normal;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.15);
}
.tickets-buy-form input:focus,
.tickets-form input:focus,
.tickets-form textarea:focus,
.tickets-form select:focus {
  outline: 1px solid var(--border-medium);
  border-color: var(--text-muted);
}
.tickets-buy-form input::placeholder,
.tickets-form input::placeholder,
.tickets-form textarea::placeholder {
  color: var(--text-muted);
  opacity: .9;
}
.tickets-pay-methods {
  border: 1px solid var(--border-medium);
  padding: 10px;
  display: grid;
  gap: 6px;
  background: var(--bg-subtle);
}
.tickets-radio {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-weight: normal;
}

.tickets-app .retro-btn-accent,
.tickets-app .retro-btn-secondary,
#explore-eventos-panel .retro-btn-accent,
#explore-eventos-panel .retro-btn-secondary,
#explore-mis-entradas-panel .retro-btn-accent,
#explore-mis-entradas-panel .retro-btn-secondary {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  width: auto;
}
.tickets-btn-danger {
  color: #ddd !important;
  border-color: #666 !important;
}
.retro-btn-accent:disabled { opacity: .55; cursor: wait; }
.tickets-file-btn { cursor: pointer; margin: 0; }

.tickets-image-field { display: grid; gap: 6px; }
.tickets-image-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: bold;
}
.tickets-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.tickets-image-preview {
  min-height: 90px;
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.12);
}
.tickets-image-preview.is-empty {
  color: var(--text-muted);
  font-size: 11px;
}
.tickets-image-preview img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  filter: grayscale(0.2);
}
.tickets-image-preview-poster img {
  height: auto;
  max-height: 240px;
  object-fit: contain;
  background: var(--bg-box);
}
.tickets-upload-status {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
}

.tickets-pass {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
  padding: 14px;
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  color: var(--text-primary);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.08);
}
.tickets-pass h1 {
  font-size: 16px;
  color: var(--text-primary);
  font-weight: bold;
}
.tickets-pass p { color: var(--text-secondary); font-size: 12px; }
.tickets-qr-wrap {
  margin: 14px auto;
  width: 220px;
  height: 220px;
  background: #fff;
  border: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tickets-qr-wrap img { display: block; width: 200px; height: 200px; }
.tickets-code {
  font-family: var(--font-mono);
  font-size: 11px;
  word-break: break-all;
  color: var(--text-muted);
}
.tickets-status-valid { color: #bbb; font-weight: bold; }
.tickets-status-used { color: #888; font-weight: bold; }
.tickets-status-cancelled { color: #666; font-weight: bold; }

.tickets-pass-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 12px 0 8px;
  flex-wrap: wrap;
}
.tickets-pass-actions .retro-btn-secondary,
.tickets-pass-actions a {
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tickets-hold-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface-2, #181818);
  border: 1px solid var(--border-medium, #444);
  color: var(--text-primary, #ccc);
  padding: 6px 10px;
  font-size: 11px;
  margin: 10px 0;
  line-height: 1.3;
  border-radius: 0;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.15);
}
.tickets-hold-timer strong {
  color: var(--text-primary, #ffffff);
  font-weight: bold;
}
.tickets-hold-timer svg {
  flex-shrink: 0;
  color: var(--text-secondary, #aaa);
}

.event-fact-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.event-fact-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-surface-2, #181818);
  border: 1px solid var(--border-medium, #444);
  color: var(--text-secondary, #ccc);
  padding: 2px 7px;
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.15);
  font-family: inherit;
  transition: none;
}
.event-fact-btn:hover {
  background: var(--bg-hover, #282828);
  color: var(--text-primary, #ffffff);
  border-color: #666;
}
.event-fact-btn svg {
  flex-shrink: 0;
}

html[data-theme="light"] .event-fact-btn {
  background: #f0f0f0;
  border-color: #bbbbbb;
  color: #222222;
}
html[data-theme="light"] .event-fact-btn:hover {
  background: #e2e2e2;
  color: #000000;
  border-color: #888888;
}
html[data-theme="light"] .tickets-hold-timer {
  background: #f4f4f4;
  border-color: #bbbbbb;
  color: #333333;
}
html[data-theme="light"] .tickets-hold-timer strong {
  color: #000000;
}

.tickets-artist-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.tickets-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  text-decoration: none;
}
.tickets-list-item:hover { background: var(--bg-subtle); }
.tickets-list-item strong {
  color: var(--text-primary);
  font-size: 12px;
}
.tickets-chevron { color: var(--text-muted); font-size: 16px; }
.tickets-type-edit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-medium);
  margin-bottom: 8px;
  background: var(--bg-subtle);
}
.tickets-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-weight: normal;
}
.tickets-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.tickets-stats > div {
  border: 1px solid var(--border-medium);
  padding: 10px;
  background: var(--bg-subtle);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.06);
}
.tickets-stats span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.tickets-stats strong {
  font-size: 18px;
  color: var(--text-primary);
}
.tickets-table-wrap { overflow-x: auto; color: var(--text-primary); }
.tickets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  color: var(--text-primary);
}
.tickets-table th {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tickets-table th,
.tickets-table td {
  border-bottom: 1px solid var(--border-light);
  padding: 6px 4px;
  text-align: left;
  vertical-align: top;
  color: var(--text-primary);
}
.tickets-checkin-result {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid var(--border-medium);
  min-height: 40px;
  color: var(--text-primary);
  background: var(--bg-subtle);
  font-size: 12px;
}
.tickets-checkin-result.ok { border-color: #888; background: #1a1a1a; }
.tickets-checkin-result.warn { border-color: #777; }
.tickets-checkin-result.bad { border-color: #555; color: #bbb; }
html[data-theme="light"] .tickets-checkin-result.ok { background: #f0f0f0; }

.tickets-video { width: 100%; max-width: 420px; background: #000; margin: 12px 0; }
.tickets-soldout { color: var(--text-muted); font-size: 11px; }
.tickets-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.tickets-scan-wrap {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  max-width: 360px;
}
.tickets-scan-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 380px;
  overflow: hidden;
  border: 1px solid var(--border-medium);
  background: #000;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.15);
}
.tickets-scan-video { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.4); }
.tickets-scan-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.tickets-scan-reticle {
  position: absolute;
  inset: 18% 14%;
  border: 2px solid rgba(255,255,255,0.75);
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.tickets-scan-reticle::before,
.tickets-scan-reticle::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
}
.tickets-scan-reticle::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.tickets-scan-reticle::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }

/* Phase 2: Staff Check-in, Search & Courtesy Styles */
.checkin-stats-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface-2, #181818);
  border: 1px solid var(--border-medium, #444);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 11px;
}
.checkin-stats-bar strong {
  color: var(--text-primary);
  font-size: 13px;
}
.checkin-stats-counter {
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--text-primary);
}
.checkin-search-card {
  margin: 16px 0 12px;
  padding: 12px;
  border: 1px solid var(--border-medium, #444);
  background: var(--bg-subtle, #1a1a1a);
}
.checkin-search-card h3 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}
.checkin-attendees-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 11px;
}
.checkin-attendees-table th,
.checkin-attendees-table td {
  border-bottom: 1px solid var(--border-light, #333);
  padding: 6px 4px;
  text-align: left;
  vertical-align: middle;
}
.checkin-status-tag {
  display: inline-block;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: bold;
  border: 1px solid #444;
  border-radius: 0;
}
.checkin-status-tag.valid {
  background: #192419;
  color: #ddd;
  border-color: #555;
}
.checkin-status-tag.used {
  background: #181818;
  color: #777;
  border-color: #333;
}
.tickets-staff-box,
.tickets-courtesy-box {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--border-medium, #444);
  background: var(--bg-subtle, #1a1a1a);
}
.tickets-staff-box h4,
.tickets-courtesy-box h4 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}
.tickets-staff-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.tickets-staff-input {
  flex: 1;
  min-width: 220px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--input-bg, #111);
  color: var(--input-text, #eee);
  border: 1px solid var(--border-medium, #444);
  padding: 5px 8px;
  border-radius: 0;
}

.venue-suggestions-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  z-index: 1000;
  background: var(--bg-box, #1a1a1a);
  border: 1px solid var(--border-medium, #444);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  margin-top: 2px;
}
.venue-suggestion-item {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light, #333);
  font-size: 11px;
  color: var(--text-primary, #eee);
}
.venue-suggestion-item:last-child {
  border-bottom: 0;
}
.venue-suggestion-item:hover {
  background: var(--bg-hover, #282828);
}
html[data-theme="light"] .venue-suggestions-dropdown {
  background: #ffffff;
  border-color: #bbbbbb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
html[data-theme="light"] .venue-suggestion-item {
  color: #111111;
  border-bottom-color: #eeeeee;
}
html[data-theme="light"] .venue-suggestion-item:hover {
  background: #f2f2f2;
}

/* Venue container & map preview */
.event-venue-container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 12px;
}
@media (max-width: 680px) {
  .event-venue-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.event-venue-map-preview {
  height: 220px;
  border: 1px solid var(--border-medium, #444);
  background: var(--bg-subtle, #141414);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.venue-map-iframe {
  width: 100%;
  height: 275px;
  border: 0;
  display: block;
  margin-bottom: -55px; /* Oculta la barra de créditos que tapaba el mapa */
  filter: grayscale(0.15) contrast(1.05);
}
.venue-map-placeholder {
  width: 100%;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-muted, #888);
  font-size: 11px;
  text-align: center;
  padding: 14px;
  box-sizing: border-box;
}
.venue-map-placeholder em {
  font-style: normal;
  font-size: 10px;
  opacity: 0.75;
}
.venue-manual-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  color: #81c784;
  font-size: 11px;
  height: 100%;
  text-align: center;
  box-sizing: border-box;
}
.venue-manual-badge em {
  color: var(--text-muted, #888);
  font-style: normal;
  font-size: 10px;
}
.btn-manual-venue-toggle {
  display: inline-block;
  margin-top: 6px;
  background: transparent;
  border: 0;
  color: var(--text-secondary, #aaa);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.btn-manual-venue-toggle:hover {
  color: #fff;
}
.venue-suggestion-manual {
  border-top: 1px solid var(--border-medium, #444);
  color: #81c784 !important;
  font-weight: bold;
}

/* Date preview badge */
.tickets-date-preview {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--bg-subtle, #181818);
  border: 1px solid var(--border-light, #333);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary, #aaa);
}
.tickets-date-preview.is-valid {
  border-color: #2e7d32;
  background: rgba(46, 125, 50, 0.1);
  color: #81c784;
}
.tickets-date-preview.is-empty {
  color: var(--text-muted, #777);
}

/* Inline form validation errors */
.form-field-group.has-error input,
.form-field-group.has-error textarea,
input.is-invalid,
textarea.is-invalid {
  border-color: #ff4d4f !important;
  outline: 1px solid #ff4d4f !important;
  background: rgba(255, 77, 79, 0.05) !important;
}
.field-error-msg {
  display: block;
  margin-top: 4px;
  color: #ff4d4f;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.02em;
}

/* Cancel event retro modal */
#cancel-event-modal.retro-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#cancel-event-modal .retro-modal-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-box, #1b1b1b);
  border: 1px solid var(--border-medium, #444);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}
#cancel-event-modal .retro-modal-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cancel-modal-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 77, 79, 0.1);
  border: 1px solid rgba(255, 77, 79, 0.4);
  color: #ff6b6b;
  font-size: 12px;
}
.cancel-modal-warning strong {
  display: block;
  font-size: 12px;
  margin-bottom: 2px;
}
.cancel-modal-warning p {
  margin: 0;
  color: var(--text-secondary, #ccc);
  font-size: 11px;
  line-height: 1.4;
}
.cancel-modal-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-primary, #eee);
  font-size: 12px;
  font-weight: bold;
}
.cancel-modal-label textarea {
  width: 100%;
  background: var(--bg-input, #111);
  border: 1px solid var(--border-medium, #444);
  color: var(--text-primary, #eee);
  padding: 8px;
  font-size: 12px;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}
.cancel-modal-label textarea:focus {
  border-color: #888;
  outline: none;
}
#cancel-event-modal .retro-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
#cancel-event-modal .retro-modal-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
#cancel-event-modal .retro-modal-close:hover {
  color: var(--text-primary);
}


.event-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.event-head { min-width: 0; width: 100%; }
.event-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.event-story { min-width: 0; }
.event-buy {
  min-width: 0;
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  padding: 14px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.18);
}
.event-banner {
  height: 168px;
  margin: 0 0 12px;
  background: #141414 center/cover no-repeat;
  border: 1px solid var(--border-medium);
  filter: grayscale(0.35);
}
.event-kicker {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.event-page h1 {
  margin: 0 0 10px;
  color: var(--text-primary);
  font-family: var(--font-retro);
  font-size: 22px;
  line-height: 1.2;
  font-weight: bold;
}
.event-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.event-facts li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.event-facts span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.event-facts strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.3;
}
.event-facts em {
  grid-column: 2;
  color: var(--text-secondary);
  font-style: normal;
  font-size: 12px;
}
.event-buy h2 {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  font-family: var(--font-retro);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.event-tier {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.event-tier-copy { flex: 1; min-width: 0; overflow: hidden; }
.event-buy .tickets-qty { flex: 0 0 auto; position: relative; z-index: 1; }
.event-tier-copy strong {
  display: block;
  color: var(--text-primary);
  font-size: 13px;
}
.event-buy .tickets-buy-form { max-width: none; margin-top: 10px; }
.event-buy .tickets-qty-btn {
  width: 36px;
  height: 36px;
}
.event-buy .tickets-summary { margin: 10px 0 0; }
.event-paybar {
  display: grid;
}
.event-paybar #tickets-pay-btn {
  width: 100%;
  min-height: 44px;
  font-size: 13px;
}
.event-paybar #tickets-pay-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tickets-radio-locked {
  color: var(--text-muted);
  cursor: not-allowed;
  user-select: none;
}
.tickets-radio-locked,
.tickets-radio-locked * {
  pointer-events: none;
}
.tickets-pay-warn {
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
}
.tickets-pay-soon {
  margin-left: auto;
  color: #f5c400;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.event-story .tickets-desc { margin-top: 0; }
.event-story .tickets-poster img {
  max-height: 720px;
  object-fit: contain;
  background: #101010;
}

@media (max-width: 800px) {
  .tickets-app:has(.event-page) {
    max-width: none;
    padding: 0 0 12px;
  }
  .tickets-app:has(.event-page) .retro-box {
    border-left: 0;
    border-right: 0;
    margin-bottom: 0;
    box-shadow: none;
  }
  .tickets-app:has(.event-page) .retro-box-header {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 12px;
  }
  .tickets-app:has(.event-page) .tickets-nav {
    flex: 1;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    font-size: 12px;
  }
  .tickets-app:has(.event-page) .retro-box-content { padding: 0 0 8px; }
  .event-page {
    gap: 0;
  }
  .event-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .event-head { padding: 0 14px 4px; }
  .event-buy {
    position: static;
    margin: 12px 14px 0;
  }
  .event-story { padding: 14px 14px 0; }
  .event-banner {
    height: 148px;
    margin: 0 -14px 10px;
    border-left: 0;
    border-right: 0;
  }
  .event-page h1 { font-size: 18px; margin-bottom: 8px; }
  .event-facts { gap: 6px; }
  .event-facts li { padding-bottom: 6px; }
  .event-tier {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .event-buy .tickets-qty { width: 100%; }
  .event-buy .tickets-qty-btn {
    width: 44px;
    height: 44px;
  }
  .event-buy .tickets-buy-form input {
    min-height: 44px;
    font-size: 16px;
  }
  .tickets-radio { min-height: 32px; }
  .event-paybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    z-index: 50;
    margin: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-box, #1c1c1c);
    border: 0;
    border-top: 1px solid var(--border-medium);
    box-shadow: 0 -8px 16px rgba(0,0,0,0.35);
  }
  body.has-mobile-nav .event-paybar {
    bottom: calc(var(--mobile-nav-h, 56px) + env(safe-area-inset-bottom, 0px));
  }
  body.has-player-open .event-paybar {
    bottom: var(--player-dock, 128px);
  }
  .tickets-app:has(.event-page) {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  body.has-mobile-nav .tickets-app:has(.event-page) {
    padding-bottom: calc(var(--mobile-nav-h, 56px) + 76px + env(safe-area-inset-bottom, 0px));
  }
  .event-buy input,
  .tickets-pay-methods,
  .tickets-fineprint {
    scroll-margin-bottom: 96px;
  }
}
@media (max-width: 640px) {
  .tickets-type-row { flex-direction: column; align-items: flex-start; }
  .tickets-type-edit { grid-template-columns: 1fr; }
  .tickets-app { padding: 8px 6px 72px; }
}
html[data-theme="light"] .event-buy,
html[data-theme="light"] .event-paybar {
  background: #ffffff;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.06);
}
html[data-theme="light"] .event-story .tickets-poster img {
  background: #f3f3f3;
}

/* ===================================================
 * BEAT MARKETPLACE
 * =================================================== */
.beats-market-view {
  max-width: 980px;
  margin: 0 auto;
  padding: 12px 10px 80px;
  animation: beatMarketIn 0.35s ease;
}
@keyframes beatMarketIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.beats-market-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.beats-market-header-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.beat-col-price {
  min-width: 72px;
  text-align: right;
  font-size: 11px;
  color: var(--text-muted);
}
.beat-catalog-price-wrap {
  display: flex;
  align-items: center;
  margin-right: 4px;
}
.beat-price-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border: 1px solid var(--border-medium);
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  color: #eee;
  white-space: nowrap;
}
html[data-theme="light"] .beat-price-chip {
  background: linear-gradient(180deg, #f2f2f2, #e4e4e4);
  color: #111;
  border-color: #999;
}
.beat-price-chip.soldout {
  color: #c44;
  border-color: #844;
  text-decoration: line-through;
}
.beat-catalog-buy-btn {
  letter-spacing: 0.06em;
  font-weight: 700;
  animation: beatBuyPulse 2.4s ease-in-out infinite;
}
@keyframes beatBuyPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
.beat-buy-box.playlist-modal-box,
.beat-buy-box.lightbox-content-box {
  background: #1a1a1a !important;
  color: #f2f2f2 !important;
  border: 1px solid #555 !important;
  max-width: 560px !important;
}
.beat-buy-box .lightbox-header {
  background: linear-gradient(to bottom, #333 0%, #222 100%) !important;
  color: #f5f5f5 !important;
  border-bottom: 1px solid #444 !important;
}
.beat-buy-box .playlist-modal-body {
  background: #1a1a1a !important;
  color: #f0f0f0 !important;
}
.beat-buy-hint {
  margin: 0 0 12px;
  font-size: 11px;
  color: #b8b8b8 !important;
}
.beat-buy-box .beat-license-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.beat-license-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 12px 12px 10px;
  border: 1px solid #555;
  background: #242424 !important;
  color: #f2f2f2 !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  margin: 0;
  font-weight: normal !important;
  text-shadow: none !important;
}
.beat-license-row:hover {
  border-color: #888;
  background: #2c2c2c !important;
}
.beat-license-row.is-selected {
  border-color: #ddd;
  background: #303030 !important;
  box-shadow: inset 3px 0 0 #fff;
}
.beat-license-row > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.beat-license-radio {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: 2px solid #999;
  border-radius: 50%;
  background: #111;
  box-shadow: inset 0 0 0 2px #242424;
}
.beat-license-row.is-selected .beat-license-radio {
  border-color: #fff;
  background: #fff;
  box-shadow: inset 0 0 0 3px #303030;
}
.beat-license-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #f2f2f2 !important;
}
.beat-license-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.beat-license-name {
  font-weight: 700 !important;
  font-size: 13px;
  color: #ffffff !important;
  text-shadow: none !important;
}
.beat-license-price {
  font-family: var(--font-mono);
  font-weight: 700 !important;
  font-size: 13px;
  color: #ffffff !important;
  white-space: nowrap;
}
.beat-license-price small {
  font-size: 10px;
  color: #bbbbbb !important;
  font-weight: 600;
}
.beat-license-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  color: #c8c8c8 !important;
  font-size: 11px;
}
.beat-term-meta {
  color: #b0b0b0 !important;
  font-size: 11px;
}
.beat-license-notes {
  font-size: 10px;
  color: #a8a8a8 !important;
  line-height: 1.35;
}
.beat-buy-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}
.beat-chip {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid #666;
  background: #1a1a1a;
  color: #e0e0e0 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.beat-chip.exclusive {
  border-color: #ccc;
  color: #fff !important;
  font-weight: 700;
}
.beat-chip.promo { background: #222; color: #ddd !important; }

/* Light theme: same monochrome cards, inverted */
html[data-theme="light"] .beat-buy-box.playlist-modal-box,
html[data-theme="light"] .beat-buy-box.lightbox-content-box {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #999 !important;
}
html[data-theme="light"] .beat-buy-box .lightbox-header {
  background: linear-gradient(to bottom, #f4f4f4 0%, #e6e6e6 100%) !important;
  color: #111 !important;
  border-bottom-color: #ccc !important;
}
html[data-theme="light"] .beat-buy-box .playlist-modal-body {
  background: #ffffff !important;
  color: #111 !important;
}
html[data-theme="light"] .beat-buy-hint { color: #555 !important; }
html[data-theme="light"] .beat-license-row {
  background: #f3f3f3 !important;
  border-color: #aaa;
  color: #111 !important;
}
html[data-theme="light"] .beat-license-row:hover,
html[data-theme="light"] .beat-license-row.is-selected {
  background: #eaeaea !important;
  border-color: #333;
}
html[data-theme="light"] .beat-license-row.is-selected {
  box-shadow: inset 3px 0 0 #111;
}
html[data-theme="light"] .beat-license-radio {
  border-color: #555;
  background: #fff;
  box-shadow: inset 0 0 0 2px #f3f3f3;
}
html[data-theme="light"] .beat-license-row.is-selected .beat-license-radio {
  border-color: #111;
  background: #111;
  box-shadow: inset 0 0 0 3px #eaeaea;
}
html[data-theme="light"] .beat-license-name,
html[data-theme="light"] .beat-license-price,
html[data-theme="light"] .beat-license-info {
  color: #111111 !important;
}
html[data-theme="light"] .beat-license-price small,
html[data-theme="light"] .beat-term-meta,
html[data-theme="light"] .beat-license-notes,
html[data-theme="light"] .beat-license-terms {
  color: #444444 !important;
}
html[data-theme="light"] .beat-chip {
  background: #fff;
  border-color: #888;
  color: #222 !important;
}
.beat-sold-out-banner {
  text-align: center;
  font-size: 18px;
  letter-spacing: 0.12em;
  padding: 24px;
  border: 2px solid #666;
  font-weight: 700;
}
/* ----- Cart ----- */
#beats-market-root[data-beats-page="cart"] {
  max-width: 1040px;
}
#beats-market-root[data-beats-page="cart"] .beats-market-shell {
  border-color: #4a4a4a;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 40%),
    linear-gradient(180deg, #1d1d1d 0%, #141414 100%);
  overflow: visible;
}
#beats-market-root[data-beats-page="cart"] .retro-box-content {
  padding: 18px 18px 22px;
}
.beats-market-header-actions [data-beats-nav].is-active {
  background: #111;
  color: #fff;
  border-color: #333;
}
html[data-theme="light"] .beats-market-header-actions [data-beats-nav].is-active {
  background: #111;
  color: #fff;
  border-color: #111;
}

.beat-cart-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: beatMarketIn 0.4s ease;
}
.beat-cart-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.beat-cart-kicker {
  margin: 0 0 4px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #999;
  font-weight: 700;
}
.beat-cart-title {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #f2f2f2;
}
.beat-cart-sub {
  margin: 6px 0 0;
  font-size: 12px;
  color: #9a9a9a;
}
.beat-cart-keep {
  font-size: 12px;
  color: #ccc;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.beat-cart-keep:hover { color: #fff; }

.beat-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}
.beat-cart-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.beat-cart-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #3f3f3f;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 45%),
    linear-gradient(180deg, #222 0%, #181818 100%);
  animation: beatMarketIn 0.4s ease both;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.beat-cart-item:hover {
  border-color: #666;
  transform: translateY(-1px);
}
.beat-cart-cover-link {
  display: block;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.beat-cart-cover {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid #555;
  background: #111;
  display: block;
  transition: transform 0.25s ease;
}
.beat-cart-item:hover .beat-cart-cover {
  transform: scale(1.03);
}
.beat-cart-meta { min-width: 0; }
.beat-cart-song {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #f2f2f2;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.beat-cart-song:hover { text-decoration: underline; color: #fff; }
.beat-cart-artist {
  margin-top: 2px;
  font-size: 12px;
  color: #9a9a9a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.beat-cart-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.beat-cart-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid #555;
  background: rgba(0,0,0,0.28);
  color: #ddd;
}
.beat-cart-tag-hot {
  border-color: #a55;
  color: #f0c0c0;
  background: rgba(120,40,40,0.28);
}
.beat-cart-tag-promo {
  border-color: #5a8a5a;
  color: #c8ecc8;
  background: rgba(40,90,40,0.28);
}
.beat-cart-price {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-align: right;
  white-space: nowrap;
  line-height: 1.2;
}
.beat-cart-price small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.55;
  letter-spacing: 0.06em;
}
.beat-cart-price.is-free {
  color: #9dca9d;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.beat-cart-remove {
  appearance: none;
  width: 32px;
  height: 32px;
  border: 1px solid #555;
  background: rgba(0,0,0,0.25);
  color: #ccc;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.beat-cart-remove:hover {
  border-color: #a55;
  color: #fcc;
  background: rgba(120,40,40,0.25);
}

.beat-cart-summary {
  position: sticky;
  top: 12px;
  border: 1px solid #4a4a4a;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.05) 0%, transparent 40%),
    linear-gradient(180deg, #242424 0%, #171717 100%);
  padding: 0;
  animation: beatMarketIn 0.45s ease;
}
.beat-cart-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #3a3a3a;
  background: linear-gradient(180deg, #2e2e2e 0%, #222 100%);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #eee;
}
.beat-cart-summary-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #666;
  background: #111;
  font-family: var(--font-mono);
  font-size: 11px;
}
.beat-cart-totals,
.beat-cart-summary > .beat-cart-block,
.beat-cart-summary > .beat-cart-terms,
.beat-cart-summary > .beat-cart-checkout,
.beat-cart-summary > .beat-cart-footnote,
.beat-cart-summary > .beat-free-banner,
.beat-cart-summary > .beat-cart-error,
.beat-cart-summary > .beat-cart-coupon-ok,
.beat-cart-summary > .beat-cart-promos {
  margin-left: 14px;
  margin-right: 14px;
}
.beat-cart-totals {
  padding: 12px 0 4px;
}
.beat-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: 12px;
  color: #bdbdbd;
}
.beat-sum-row span:last-child {
  font-family: var(--font-mono);
  color: #eee;
}
.beat-sum-row.is-discount span:last-child { color: #9dca9d; }
.beat-sum-row.total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #444;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}
.beat-sum-row.total strong {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: -0.02em;
}
.beat-sum-row.total small {
  font-size: 11px;
  opacity: 0.6;
  font-weight: 600;
}
.beat-cart-block { margin-top: 12px; }
.beat-cart-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
}
.beat-cart-coupon-row {
  display: flex;
  gap: 6px;
}
.beat-cart-coupon-row .retro-input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.beat-cart-ghost-btn {
  appearance: none;
  border: 1px solid #666;
  background: rgba(255,255,255,0.04);
  color: #eee;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.beat-cart-ghost-btn:hover {
  border-color: #999;
  background: rgba(255,255,255,0.08);
}
.beat-cart-hint {
  margin: 5px 0 0;
  font-size: 11px;
  color: #888;
  line-height: 1.35;
}
.beat-cart-terms {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 14px;
  font-size: 11px;
  color: #b5b5b5;
  line-height: 1.4;
  cursor: pointer;
}
.beat-cart-terms input { margin-top: 2px; }
.beat-cart-pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.beat-cart-pay {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border: 1px solid #4a4a4a;
  background: rgba(0,0,0,0.22);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  position: relative;
}
.beat-cart-pay input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.beat-cart-pay-name {
  font-size: 12px;
  font-weight: 700;
  color: #eee;
}
.beat-cart-pay-meta {
  font-size: 10px;
  color: #888;
}
.beat-cart-pay.is-enabled:hover,
.beat-cart-pay:has(input:checked) {
  border-color: #999;
  background: rgba(255,255,255,0.06);
}
.beat-cart-pay:has(input:checked) {
  box-shadow: inset 0 0 0 1px #888;
}
.beat-cart-pay.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.beat-cart-checkout {
  display: block;
  width: calc(100% - 28px);
  margin: 4px 14px 0;
  appearance: none;
  border: 1px solid #222;
  background: #111;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.beat-cart-checkout:hover:not(:disabled) {
  background: #222;
  border-color: #444;
  transform: translateY(-1px);
}
.beat-cart-checkout:disabled {
  opacity: 0.65;
  cursor: wait;
}
.beat-cart-footnote {
  margin: 10px 14px 14px;
  font-size: 11px;
  color: #888;
  line-height: 1.4;
}
.beat-cart-error {
  margin: 8px 14px 0;
  padding: 8px 10px;
  border: 1px solid #844;
  background: rgba(120,40,40,0.2);
  color: #f0b0b0;
  font-size: 11px;
}
.beat-cart-coupon-ok {
  margin: 8px 14px 0;
  font-size: 11px;
  color: #9dca9d;
}
.beat-cart-promos { margin-top: 10px; }
.beat-promo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  margin-top: 6px;
  border: 1px dashed #666;
  background: rgba(0,0,0,0.18);
}
.beat-promo-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.beat-promo-card-text strong {
  font-size: 12px;
  color: #eee;
}
.beat-promo-card-text span {
  font-size: 11px;
  color: #999;
}
.beat-promo-picker {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #3a3a3a;
}
.beat-promo-pick-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
  max-height: 160px;
  overflow: auto;
}
.beat-promo-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #444;
  background: rgba(0,0,0,0.2);
  font-size: 12px;
  cursor: pointer;
}
.beat-promo-pick span { flex: 1; min-width: 0; }
.beat-promo-pick em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #aaa;
}
.beat-cart-page.is-empty {
  gap: 16px;
}
.beat-cart-empty {
  text-align: center;
  padding: 56px 24px 48px;
  border: 1px dashed #555;
  background: rgba(0,0,0,0.18);
  animation: beatMarketIn 0.4s ease;
}
.beat-cart-empty-visual {
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border: 1px solid #4a4a4a;
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
}
.beat-cart-empty-bag {
  position: relative;
  width: 36px;
  height: 28px;
  border: 2px solid #bbb;
  border-radius: 2px 2px 4px 4px;
  margin-top: 8px;
}
.beat-cart-empty-bag::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: -12px;
  height: 12px;
  border: 2px solid #bbb;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.beat-cart-empty-bag::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  background: #666;
  transform: translate(-50%, -50%);
}
.beat-cart-empty h3 {
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #f2f2f2;
  font-weight: 700;
}
.beat-cart-empty p {
  margin: 0 auto 20px;
  max-width: 340px;
  font-size: 13px;
  color: #9a9a9a;
  line-height: 1.5;
}
.beat-cart-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.beat-cart-cta,
.beat-cart-cta-secondary {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.beat-cart-cta {
  border: 1px solid #222;
  background: #111;
  color: #fff;
}
.beat-cart-cta:hover {
  background: #222;
  border-color: #444;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.beat-cart-cta-secondary {
  border: 1px solid #666;
  background: transparent;
  color: #ddd;
}
.beat-cart-cta-secondary:hover {
  border-color: #999;
  background: rgba(255,255,255,0.06);
  color: #fff;
  text-decoration: none;
}

@media (max-width: 860px) {
  .beat-cart-layout { grid-template-columns: 1fr; }
  .beat-cart-summary { position: static; }
}
@media (max-width: 560px) {
  .beat-cart-item {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas:
      "cover meta remove"
      "cover price remove";
    gap: 8px 10px;
  }
  .beat-cart-cover-link,
  .beat-cart-cover { width: 56px; height: 56px; }
  .beat-cart-cover-link { grid-area: cover; }
  .beat-cart-meta { grid-area: meta; }
  .beat-cart-price { grid-area: price; text-align: left; }
  .beat-cart-remove { grid-area: remove; align-self: start; }
  .beat-cart-title { font-size: 22px; }
  .beat-cart-pay-grid { grid-template-columns: 1fr; }
}

/* Light cart — scoped so dark hardcoded colors never leak */
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] {
  color: #1a1a1a;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beats-market-shell {
  background: #fff;
  border-color: #c8c8c8;
  color: #1a1a1a;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beats-market-header {
  background: #f6f6f6;
  border-bottom: 1px solid #d0d0d0;
  color: #111;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .retro-box-content {
  background: #f7f7f7;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-hero {
  border-bottom-color: #d8d8d8;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-kicker,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-sub,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-artist,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-hint,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-footnote,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-label,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-pay-meta {
  color: #666;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-title,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-song,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-empty h3,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-pay-name,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-promo-card-text strong {
  color: #111;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-song:hover {
  color: #000;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-keep {
  color: #333;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-keep:hover {
  color: #000;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-item {
  background: #fff;
  border-color: #d0d0d0;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-item:hover {
  border-color: #999;
  background: #fff;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-cover {
  border-color: #c4c4c4;
  background: #ececec;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-tag {
  background: #f0f0f0;
  border-color: #c8c8c8;
  color: #333;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-tag-hot {
  background: #f7eaea;
  border-color: #d0a0a0;
  color: #8a3030;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-tag-promo {
  background: #e8f3e8;
  border-color: #8aaa8a;
  color: #245424;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-price {
  color: #111;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-price small {
  color: #777;
  opacity: 1;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-price.is-free {
  color: #2a6a2a;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-remove {
  background: #fff;
  border-color: #c8c8c8;
  color: #555;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-remove:hover {
  border-color: #c06060;
  color: #a03030;
  background: #f8eeee;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-summary {
  background: #fff;
  border-color: #c8c8c8;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-summary-head {
  background: #f3f3f3;
  border-bottom-color: #d0d0d0;
  color: #111;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-summary-count {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-sum-row {
  color: #555;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-sum-row span:last-child {
  color: #111;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-sum-row.is-discount span:last-child {
  color: #2a6a2a;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-sum-row.total {
  color: #111;
  border-top-color: #d5d5d5;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-sum-row.total strong {
  color: #111;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-ghost-btn {
  background: #f4f4f4;
  border-color: #c4c4c4;
  color: #222;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-ghost-btn:hover {
  background: #ebebeb;
  border-color: #999;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-terms {
  color: #444;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-pay {
  background: #fafafa;
  border-color: #cfcfcf;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-pay.is-enabled:hover,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-pay:has(input:checked) {
  background: #f0f0f0;
  border-color: #888;
  box-shadow: inset 0 0 0 1px #888;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-checkout,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-cta {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-checkout:hover:not(:disabled),
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-cta:hover {
  background: #333;
  border-color: #333;
  color: #fff;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-promo-card {
  background: #fafafa;
  border-color: #c4c4c4;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-promo-card-text span {
  color: #666;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-promo-picker {
  border-top-color: #ddd;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-promo-pick {
  background: #fff;
  border-color: #d0d0d0;
  color: #222;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-promo-pick em {
  color: #666;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-empty {
  background: #fff;
  border: 1px dashed #c4c4c4;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-empty-visual {
  background: #f3f3f3;
  border-color: #d0d0d0;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-empty-bag,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-empty-bag::before {
  border-color: #555;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-empty-bag::after {
  background: #999;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-empty h3 {
  color: #111;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-empty p {
  color: #666;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-cta-secondary {
  border-color: #bbb;
  background: #fff;
  color: #333;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-cta-secondary:hover {
  border-color: #888;
  background: #f4f4f4;
  color: #111;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-error {
  background: #f8ecec;
  border-color: #d0a0a0;
  color: #8a3030;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-coupon-ok {
  color: #2a6a2a;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-free-banner {
  background: #eaf4ea;
  border-color: #8aaa8a;
  color: #1f4f1f;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .retro-input,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] input.retro-input,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .mini-input {
  background: #fff !important;
  border-color: #c4c4c4 !important;
  color: #111 !important;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .retro-input::placeholder,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .mini-input::placeholder {
  color: #999 !important;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .retro-input:focus,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .mini-input:focus {
  border-color: #888 !important;
  outline: none;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beats-market-header-actions .retro-btn-secondary {
  background: #fff;
  border-color: #c4c4c4;
  color: #222;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beats-market-header-actions .retro-btn-secondary:hover {
  background: #f0f0f0;
  border-color: #999;
  color: #111;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beats-market-header-actions [data-beats-nav].is-active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
html[data-theme="light"] body.view-beats-market #beats-market-root[data-beats-page="cart"] {
  color: #1a1a1a;
}
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .beat-cart-loading,
html[data-theme="light"] #beats-market-root[data-beats-page="cart"] .subtle-text {
  color: #666;
}
.beat-wallet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  .beat-wallet-grid { grid-template-columns: 1fr; }
}
.beat-wallet-card {
  border: 1px solid var(--border-medium);
  background: linear-gradient(160deg, var(--bg-box) 0%, var(--bg-subtle) 100%);
  padding: 12px;
}
.beat-wallet-amount {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  margin-top: 4px;
}
.beat-withdraw-bar {
  height: 10px;
  border: 1px solid var(--border-medium);
  background: #111;
  overflow: hidden;
  margin: 8px 0;
}
.beat-withdraw-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #555, #ddd);
  transition: width 0.5s ease;
}
.beat-seller-tabs,
.bsp-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-medium);
  padding-bottom: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.beat-seller-tab,
.bsp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  font-size: 11px;
  text-decoration: none;
  color: var(--text-secondary);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.beat-seller-tab.active,
.beat-seller-tab:hover,
.bsp-tab.active,
.bsp-tab:hover {
  color: var(--text-primary);
  border-color: var(--border-medium);
  background: var(--bg-subtle);
}
.bsp-tab.active {
  border-bottom-color: #fff;
  transform: translateY(-1px);
}
.bsp-tab-icon {
  opacity: 0.7;
  font-size: 10px;
}

/* ===== Seller panel (bsp) ===== */
.bsp-shell { animation: beatMarketIn 0.35s ease; }
.bsp-body { min-height: 180px; }
.bsp-loading { padding: 24px 0; }
.bsp-kicker {
  margin: 0 0 4px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #999;
  font-weight: 700;
}
.bsp-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px 18px;
  margin-bottom: 14px;
  border: 1px solid var(--border-medium);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 50%),
    linear-gradient(180deg, #242424 0%, #171717 100%);
}
.bsp-hero h2 {
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.bsp-hero-sub { margin: 0; color: #aaa; font-size: 12px; max-width: 420px; }
.bsp-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.bsp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.bsp-kpi {
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  padding: 12px 14px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.bsp-kpi:hover {
  border-color: #777;
  transform: translateY(-1px);
}
.bsp-kpi-accent {
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  border-color: #666;
}
.bsp-kpi-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #999;
  font-weight: 700;
}
.bsp-kpi-value {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.bsp-kpi-hint { display: block; margin-top: 4px; font-size: 11px; color: #888; }

.bsp-progress-card,
.bsp-panel {
  border: 1px solid var(--border-medium);
  background: var(--bg-box, #1a1a1a);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.bsp-progress-head,
.bsp-panel-head,
.bsp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.bsp-progress-pct {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
}
.bsp-progress-track { margin: 8px 0 10px; }
.bsp-progress-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.bsp-alert {
  color: #c66;
  font-size: 11px;
  font-weight: 700;
}
.bsp-section-title {
  margin: 0;
  font-size: 16px;
}
.bsp-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.bsp-filter { min-width: 160px; }

.bsp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.bsp-two-col-form { align-items: start; }
.bsp-panel-head h3 { margin: 0; font-size: 14px; }
.bsp-link {
  font-size: 11px;
  color: #ccc;
  text-decoration: underline;
}
.bsp-link:hover { color: #fff; }

.bsp-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bsp-check-list li {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.bsp-check-list li:last-child { border-bottom: 0; }
.bsp-check-list strong { font-size: 12px; }
.bsp-check-list p { margin: 2px 0 0; font-size: 11px; color: #888; }
.bsp-check-dot {
  width: 14px;
  height: 14px;
  border: 1px solid #666;
  border-radius: 2px;
  background: transparent;
}
.bsp-check-list li.is-done .bsp-check-dot {
  background: #ddd;
  border-color: #ddd;
  box-shadow: inset 0 0 0 2px #1a1a1a;
}
.bsp-fee-note { margin: 12px 0 0; font-size: 11px; color: #888; }

.bsp-sale-list { display: flex; flex-direction: column; gap: 2px; }
.bsp-sale-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  animation: beatMarketIn 0.35s ease both;
}
.bsp-sale-amt { text-align: right; }
.bsp-sale-amt strong {
  display: block;
  font-family: var(--font-mono);
}
.bsp-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}
.bsp-mini-stats span { display: block; font-size: 10px; color: #888; text-transform: uppercase; }
.bsp-mini-stats strong { font-family: var(--font-mono); font-size: 14px; }

.bsp-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.bsp-quick-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.bsp-quick-card:hover {
  border-color: #888;
  background: #222;
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.bsp-quick-card span { font-weight: 700; font-size: 13px; }
.bsp-quick-card small { color: #888; font-size: 11px; line-height: 1.3; }

.bsp-listings { display: flex; flex-direction: column; gap: 10px; }
.bsp-listing {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  animation: beatMarketIn 0.4s ease both;
  animation-delay: calc(var(--i, 0) * 40ms);
  transition: border-color 0.15s ease;
}
.bsp-listing:hover { border-color: #777; }
.bsp-listing-cover {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--border-medium);
  background: #111;
}
.bsp-listing-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.bsp-listing-top h4 { margin: 0; font-size: 14px; }
.bsp-listing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.bsp-pill {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid #555;
  color: #ccc;
  font-weight: 700;
}
.bsp-pill-live { border-color: #8a8; color: #cfc; background: rgba(80,120,80,0.2); }
.bsp-pill-draft { border-color: #666; color: #aaa; }
.bsp-pill-paused { border-color: #864; color: #eca; }
.bsp-pill-sold { border-color: #844; color: #eaa; }

.bsp-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid #555;
  background: #1a1a1a;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.bsp-switch-knob {
  width: 28px;
  height: 16px;
  border: 1px solid #666;
  background: #333;
  position: relative;
  flex-shrink: 0;
}
.bsp-switch-knob::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  background: #999;
  transition: transform 0.18s ease, background 0.18s ease;
}
.bsp-switch.is-on {
  border-color: #8a8;
  background: rgba(60,90,60,0.25);
}
.bsp-switch.is-on .bsp-switch-knob {
  border-color: #9b9;
  background: #2a3a2a;
}
.bsp-switch.is-on .bsp-switch-knob::after {
  transform: translateX(12px);
  background: #dfd;
}
.bsp-switch.is-busy { opacity: 0.6; cursor: wait; }
.bsp-switch:disabled { opacity: 0.45; cursor: not-allowed; }

.bsp-empty {
  text-align: center;
  padding: 36px 16px;
  border: 1px dashed var(--border-medium);
  background: rgba(255,255,255,0.02);
}
.bsp-empty-mark {
  font-size: 28px;
  opacity: 0.35;
  margin-bottom: 8px;
}
.bsp-empty h3 { margin: 0 0 6px; font-size: 15px; }
.bsp-empty p { margin: 0 0 14px; color: #999; font-size: 12px; max-width: 360px; margin-left: auto; margin-right: auto; }

.bsp-table-wrap { overflow-x: auto; border: 1px solid var(--border-medium); }
.bsp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.bsp-table th,
.bsp-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}
.bsp-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
  background: #1f1f1f;
}
.bsp-table tr:hover td { background: rgba(255,255,255,0.03); }

.bsp-templates { display: flex; flex-direction: column; gap: 10px; }
.bsp-template {
  border: 1px solid var(--border-medium);
  padding: 12px 14px;
  background: var(--bg-subtle);
  transition: border-color 0.15s ease;
}
.bsp-template:focus-within { border-color: #888; }
.bsp-template-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.bsp-template-idx { font-family: var(--font-mono); color: #888; font-size: 11px; }
.bsp-check { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 10px; font-size: 12px; }

.bsp-form { display: flex; flex-direction: column; gap: 10px; }
.bsp-live-preview {
  padding: 8px 10px;
  border: 1px dashed #555;
  font-size: 11px;
  color: #bbb;
  background: #141414;
}
.bsp-coupon-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.bsp-code {
  display: inline-block;
  padding: 2px 6px;
  background: #111;
  border: 1px solid #444;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.bsp-bars { display: flex; flex-direction: column; gap: 12px; }
.bsp-bar-row { display: flex; flex-direction: column; gap: 4px; }
.bsp-bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.bsp-bar-track {
  height: 8px;
  background: #111;
  border: 1px solid #333;
  overflow: hidden;
}
.bsp-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #555, #ddd);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.bsp-withdraw-hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  padding: 18px;
  margin-bottom: 10px;
  border: 1px solid var(--border-medium);
  background: linear-gradient(180deg, #242424 0%, #171717 100%);
}
.bsp-withdraw-amount {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 4px 0;
}

/* ----- Light mode: seller panel + beats market ----- */
html[data-theme="light"] .beats-market-view .retro-box,
html[data-theme="light"] .beats-market-shell {
  background: #fff;
  border-color: #bbb;
  color: #1a1a1a;
}
html[data-theme="light"] .beats-market-header {
  background: linear-gradient(180deg, #f3f3f3 0%, #e6e6e6 100%);
  color: #111;
  border-bottom-color: #bbb;
}
html[data-theme="light"] .beats-market-header span,
html[data-theme="light"] #beats-market-title {
  color: #111;
}
html[data-theme="light"] .bsp-kicker { color: #666; }
html[data-theme="light"] .bsp-hero {
  background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
  border-color: #bbb;
  color: #111;
}
html[data-theme="light"] .bsp-hero h2 { color: #111; }
html[data-theme="light"] .bsp-hero-sub { color: #555; }
html[data-theme="light"] .bsp-kpi,
html[data-theme="light"] .bsp-panel,
html[data-theme="light"] .bsp-listing,
html[data-theme="light"] .bsp-quick-card,
html[data-theme="light"] .bsp-template,
html[data-theme="light"] .bsp-progress-card,
html[data-theme="light"] .beat-wallet-card,
html[data-theme="light"] .beat-template-card {
  background: #f7f7f7;
  border-color: #c8c8c8;
  color: #1a1a1a;
}
html[data-theme="light"] .bsp-kpi-accent {
  background: #fff;
  border-color: #aaa;
}
html[data-theme="light"] .bsp-kpi-label,
html[data-theme="light"] .bsp-kpi-hint,
html[data-theme="light"] .bsp-fee-note,
html[data-theme="light"] .bsp-check-list p,
html[data-theme="light"] .bsp-quick-card small,
html[data-theme="light"] .bsp-mini-stats span {
  color: #666;
}
html[data-theme="light"] .bsp-kpi-value,
html[data-theme="light"] .bsp-progress-pct,
html[data-theme="light"] .bsp-withdraw-amount,
html[data-theme="light"] .bsp-section-title,
html[data-theme="light"] .bsp-panel-head h3,
html[data-theme="light"] .bsp-listing-top h4,
html[data-theme="light"] .bsp-sale-amt strong,
html[data-theme="light"] .bsp-mini-stats strong,
html[data-theme="light"] .beat-wallet-amount {
  color: #111;
}
html[data-theme="light"] .bsp-tabs {
  border-bottom-color: #ccc;
}
html[data-theme="light"] .bsp-tab {
  color: #555;
}
html[data-theme="light"] .bsp-tab:hover,
html[data-theme="light"] .bsp-tab.active {
  color: #111;
  background: #eee;
  border-color: #bbb;
}
html[data-theme="light"] .bsp-tab.active { border-bottom-color: #111; }
html[data-theme="light"] .bsp-check-list li,
html[data-theme="light"] .bsp-sale-row,
html[data-theme="light"] .bsp-coupon-card,
html[data-theme="light"] .beat-seller-listing-row,
html[data-theme="light"] .beat-coupon-row {
  border-bottom-color: #ddd;
}
html[data-theme="light"] .bsp-check-dot {
  border-color: #999;
  background: #fff;
}
html[data-theme="light"] .bsp-check-list li.is-done .bsp-check-dot {
  background: #222;
  border-color: #222;
  box-shadow: inset 0 0 0 2px #f7f7f7;
}
html[data-theme="light"] .bsp-link { color: #333; }
html[data-theme="light"] .bsp-link:hover { color: #000; }
html[data-theme="light"] .bsp-quick-card:hover {
  background: #fff;
  border-color: #999;
  color: #111;
}
html[data-theme="light"] .bsp-pill {
  border-color: #999;
  color: #444;
  background: #fff;
}
html[data-theme="light"] .bsp-pill-live {
  border-color: #5a8a5a;
  color: #1f5a1f;
  background: #e8f3e8;
}
html[data-theme="light"] .bsp-pill-sold {
  border-color: #a55;
  color: #822;
  background: #f7e8e8;
}
html[data-theme="light"] .bsp-pill-draft,
html[data-theme="light"] .bsp-pill-paused {
  border-color: #aaa;
  color: #555;
  background: #f0f0f0;
}
html[data-theme="light"] .bsp-switch {
  background: #fff;
  border-color: #aaa;
  color: #222;
}
html[data-theme="light"] .bsp-switch-knob {
  background: #ddd;
  border-color: #999;
}
html[data-theme="light"] .bsp-switch-knob::after { background: #666; }
html[data-theme="light"] .bsp-switch.is-on {
  border-color: #5a8a5a;
  background: #eaf5ea;
}
html[data-theme="light"] .bsp-switch.is-on .bsp-switch-knob {
  background: #cfe5cf;
  border-color: #5a8a5a;
}
html[data-theme="light"] .bsp-switch.is-on .bsp-switch-knob::after { background: #1f5a1f; }
html[data-theme="light"] .bsp-empty {
  border-color: #bbb;
  background: #fafafa;
  color: #222;
}
html[data-theme="light"] .bsp-empty p { color: #666; }
html[data-theme="light"] .bsp-table-wrap { border-color: #ccc; }
html[data-theme="light"] .bsp-table th {
  background: #eee;
  color: #555;
  border-bottom-color: #ccc;
}
html[data-theme="light"] .bsp-table td {
  border-bottom-color: #e2e2e2;
  color: #222;
}
html[data-theme="light"] .bsp-table tr:hover td { background: #f3f3f3; }
html[data-theme="light"] .bsp-live-preview {
  background: #fff;
  border-color: #bbb;
  color: #444;
}
html[data-theme="light"] .bsp-code {
  background: #fff;
  border-color: #bbb;
  color: #111;
}
html[data-theme="light"] .bsp-bar-track {
  background: #eee;
  border-color: #ccc;
}
html[data-theme="light"] .bsp-bar-fill {
  background: linear-gradient(90deg, #888, #222);
}
html[data-theme="light"] .bsp-withdraw-hero {
  background: linear-gradient(180deg, #fff 0%, #f0f0f0 100%);
  border-color: #bbb;
  color: #111;
}
html[data-theme="light"] .beat-withdraw-bar {
  background: #eee;
  border-color: #bbb;
}
html[data-theme="light"] .beat-withdraw-bar-fill {
  background: linear-gradient(90deg, #777, #222);
}
html[data-theme="light"] .bsp-listing-cover {
  border-color: #aaa;
  background: #eee;
  filter: none;
}
html[data-theme="light"] .beat-terms-pre {
  background: #fff;
  border-color: #ccc;
  color: #333;
}
html[data-theme="light"] .bsp-alert { color: #a33; }
html[data-theme="light"] .beats-market-view .subtle-text { color: #666; }

@media (max-width: 900px) {
  .bsp-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bsp-two-col,
  .bsp-quick { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bsp-hero { padding: 14px; }
  .bsp-hero h2 { font-size: 18px; }
  .bsp-kpi-value { font-size: 17px; }
  .bsp-listing { grid-template-columns: 56px 1fr; }
  .bsp-listing-cover { width: 56px; height: 56px; }
  .bsp-withdraw-amount { font-size: 26px; }
  .bsp-filter { min-width: 0; width: 100%; }
  .bsp-toolbar-actions { width: 100%; }
}
/* ----- Mis beats library ----- */
#beats-market-root[data-beats-page="library"] {
  max-width: 920px;
}
#beats-market-root[data-beats-page="library"] .beats-market-shell {
  border-color: #4a4a4a;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 40%),
    linear-gradient(180deg, #1d1d1d 0%, #141414 100%);
}
#beats-market-root[data-beats-page="library"] .retro-box-content {
  padding: 12px 12px 16px;
}
.beat-lib-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: beatMarketIn 0.35s ease;
}
.beat-lib-hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.beat-lib-kicker {
  margin: 0 0 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
}
.beat-lib-title {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #f2f2f2;
}
.beat-lib-sub {
  margin: 3px 0 0;
  font-size: 11px;
  color: #8a8a8a;
}
.beat-lib-hero-actions {
  display: flex;
  gap: 10px;
}
.beat-lib-keep {
  font-size: 11px;
  color: #bbb;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.beat-lib-keep:hover { color: #fff; }

.beat-lib-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.beat-lib-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #3a3a3a;
  background: #1a1a1a;
  animation: beatMarketIn 0.3s ease both;
  animation-delay: calc(var(--i, 0) * 25ms);
  transition: border-color 0.15s ease;
}
.beat-lib-card:hover { border-color: #5a5a5a; background: #1e1e1e; }
.beat-lib-card.is-highlight {
  border-color: #777;
  box-shadow: inset 0 0 0 1px #555;
}
.beat-lib-cover-link {
  display: block;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.beat-lib-cover {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid #4a4a4a;
  background: #111;
  display: block;
}
.beat-lib-body { min-width: 0; }
.beat-lib-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.beat-lib-meta { min-width: 0; flex: 1; }
.beat-lib-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.beat-lib-song {
  font-size: 13px;
  font-weight: 700;
  color: #f0f0f0;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.beat-lib-song:hover { color: #fff; text-decoration: underline; }
.beat-lib-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 5px;
  border: 1px solid #4a4a4a;
  background: rgba(0,0,0,0.25);
  color: #c8c8c8;
  white-space: nowrap;
}
.beat-lib-tag-free {
  border-color: #5a8a5a;
  color: #b8e0b8;
  background: rgba(40,90,40,0.25);
}
.beat-lib-subline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 11px;
  color: #888;
  line-height: 1.3;
}
.beat-lib-dot { color: #555; }
.beat-lib-date { font-family: var(--font-mono); font-size: 10px; color: #777; }
.beat-lib-paid { font-family: var(--font-mono); color: #ddd; font-weight: 700; }
.beat-lib-seller {
  color: #aaa;
  font-weight: 700;
  text-decoration: none;
}
.beat-lib-seller:hover { color: #fff; text-decoration: underline; }

.beat-lib-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.beat-lib-doc-btn,
.beat-lib-dl-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #4a4a4a;
  background: #141414;
  color: #e8e8e8;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.beat-lib-dl-btn {
  background: #111;
  border-color: #2a2a2a;
  color: #fff;
}
.beat-lib-doc-btn:hover,
.beat-lib-dl-btn:hover:not(:disabled) {
  border-color: #777;
  background: #242424;
  color: #fff;
  text-decoration: none;
}
.beat-lib-dl-btn:disabled,
.beat-lib-dl-btn.is-busy {
  opacity: 0.6;
  cursor: wait;
}
.beat-lib-nofiles {
  font-size: 10px;
  color: #777;
  padding: 0 4px;
}
.beat-lib-terms {
  position: relative;
}
.beat-lib-terms summary {
  cursor: pointer;
  list-style: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #4a4a4a;
  background: #141414;
  color: #aaa;
  font-size: 12px;
  line-height: 1;
}
.beat-lib-terms summary::-webkit-details-marker { display: none; }
.beat-lib-terms summary:hover,
.beat-lib-terms[open] summary {
  color: #fff;
  border-color: #777;
}
.beat-lib-terms-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  width: min(320px, 70vw);
  border: 1px solid #555;
  background: #1a1a1a;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  padding: 8px;
}
.beat-terms-pre {
  font-size: 10px;
  white-space: pre-wrap;
  background: #111;
  border: 1px solid #333;
  padding: 8px;
  max-height: 140px;
  overflow: auto;
  color: #bbb;
  margin: 0;
}

.beat-lib-empty {
  text-align: center;
  padding: 36px 16px 32px;
  border: 1px dashed #4a4a4a;
  background: rgba(0,0,0,0.15);
}
.beat-lib-empty-visual {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border: 1px solid #444;
  background: #1a1a1a;
}
.beat-lib-empty-mark {
  width: 28px;
  height: 28px;
  border: 2px solid #888;
  border-radius: 2px;
  position: relative;
}
.beat-lib-empty-mark::before,
.beat-lib-empty-mark::after {
  content: '';
  position: absolute;
  background: #555;
}
.beat-lib-empty-mark::before {
  left: 5px; right: 5px; top: 8px; height: 2px;
}
.beat-lib-empty-mark::after {
  left: 5px; right: 11px; top: 14px; height: 2px;
}
.beat-lib-empty h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: #f0f0f0;
}
.beat-lib-empty p {
  margin: 0 auto 14px;
  max-width: 300px;
  font-size: 12px;
  color: #888;
  line-height: 1.4;
}
.beat-lib-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.beat-lib-cta,
.beat-lib-cta-secondary {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 12px;
}
.beat-lib-cta {
  border: 1px solid #222;
  background: #111;
  color: #fff;
}
.beat-lib-cta:hover {
  background: #222;
  color: #fff;
  text-decoration: none;
}
.beat-lib-cta-secondary {
  border: 1px solid #555;
  background: transparent;
  color: #ccc;
}
.beat-lib-cta-secondary:hover {
  border-color: #888;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 720px) {
  .beat-lib-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .beat-lib-toolbar {
    justify-content: flex-start;
  }
  .beat-lib-title { font-size: 18px; }
}

html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beats-market-shell {
  background: #fff;
  border-color: #c8c8c8;
  color: #1a1a1a;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beats-market-header {
  background: #f6f6f6;
  border-bottom: 1px solid #d0d0d0;
  color: #111;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .retro-box-content {
  background: #f7f7f7;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-hero {
  border-bottom-color: #d8d8d8;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-kicker,
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-sub,
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-subline,
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-date,
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-nofiles {
  color: #666;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-title,
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-song,
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-empty h3 {
  color: #111;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-keep { color: #333; }
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-keep:hover { color: #000; }
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-card {
  background: #fff;
  border-color: #d0d0d0;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-card:hover {
  border-color: #999;
  background: #fafafa;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-cover {
  border-color: #c4c4c4;
  background: #ececec;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-tag {
  background: #f0f0f0;
  border-color: #c8c8c8;
  color: #333;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-tag-free {
  background: #e8f3e8;
  border-color: #8aaa8a;
  color: #245424;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-seller { color: #333; }
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-seller:hover { color: #000; }
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-paid { color: #111; }
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-dot { color: #bbb; }
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-doc-btn,
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-terms summary {
  background: #fff;
  border-color: #c4c4c4;
  color: #333;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-doc-btn:hover,
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-terms summary:hover,
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-terms[open] summary {
  background: #f2f2f2;
  border-color: #999;
  color: #111;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-dl-btn {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-dl-btn:hover:not(:disabled) {
  background: #333;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-terms-pop {
  background: #fff;
  border-color: #ccc;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-terms-pre {
  background: #f5f5f5;
  border-color: #ddd;
  color: #333;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-empty {
  background: #fff;
  border-color: #c4c4c4;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-empty-visual {
  background: #f3f3f3;
  border-color: #d0d0d0;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-empty-mark { border-color: #666; }
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-empty-mark::before,
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-empty-mark::after { background: #999; }
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-empty p { color: #666; }
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-cta {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-cta-secondary {
  background: #fff;
  border-color: #bbb;
  color: #333;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beat-lib-cta-secondary:hover {
  background: #f2f2f2;
  border-color: #999;
  color: #111;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beats-market-header-actions .retro-btn-secondary {
  background: #fff;
  border-color: #c4c4c4;
  color: #222;
}
html[data-theme="light"] #beats-market-root[data-beats-page="library"] .beats-market-header-actions [data-beats-nav].is-active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
.beat-song-buy-bar,
.beat-page-top-actions {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}
#song-view.is-beat-page .song-hero-right {
  position: relative;
  padding-right: 52px;
  min-height: 44px;
}
#song-view.is-beat-page .song-hero-right:has(.beat-page-top-actions.has-market-cta) {
  padding-right: 148px;
}
.beat-page-buy-btn {
  appearance: none;
  border: 1px solid #222;
  background: #111;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.beat-page-buy-btn:hover {
  background: #222;
  border-color: #444;
  transform: translateY(-1px);
}
.beat-page-soldout-btn {
  appearance: none;
  border: 1px solid #a33;
  background: #c0392b;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  line-height: 1.2;
  cursor: not-allowed;
  opacity: 0.95;
  pointer-events: none;
}
.beat-page-more-wrap {
  position: relative;
}
.beat-page-more-btn {
  appearance: none;
  width: 34px;
  height: 34px;
  border: 1px solid #555;
  background: rgba(0,0,0,0.35);
  color: #eee;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.beat-page-more-btn:hover,
.beat-page-more-btn[aria-expanded="true"] {
  border-color: #888;
  background: rgba(255,255,255,0.08);
}
.beat-page-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  border: 1px solid #555;
  background: #1a1a1a;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  padding: 4px;
  z-index: 20;
}
.beat-page-more-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: #e8e8e8;
  font: inherit;
  font-size: 12px;
  padding: 8px 10px;
  cursor: pointer;
  text-decoration: none;
}
.beat-page-more-item:hover {
  background: rgba(255,255,255,0.08);
  text-decoration: none;
  color: #fff;
}
.beat-page-more-danger {
  color: #e88;
}
.beat-page-more-danger:hover {
  color: #fcc;
  background: rgba(160,40,40,0.25);
}

/* ===== Beat page redesign ===== */
#song-view.is-beat-page {
  position: relative;
}
#song-view.is-beat-page .song-page-container {
  max-width: 920px;
  position: relative;
  z-index: 1;
}
#song-view.is-beat-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.92) 55%, var(--bg-main, #0e0e0e) 100%),
    var(--beat-cover) center/cover no-repeat;
  filter: saturate(0.85);
  opacity: 0.55;
}
#song-view.is-beat-page .song-hero-box {
  border-color: #4a4a4a;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 42%),
    linear-gradient(180deg, #222 0%, #141414 100%);
  overflow: hidden;
  animation: beatMarketIn 0.4s ease;
}
#song-view.is-beat-page .song-hero-box .retro-box-header {
  background: linear-gradient(180deg, #333 0%, #222 100%);
  letter-spacing: 0.06em;
}
#song-view.is-beat-page .song-hero-content {
  gap: 28px;
  padding: 22px;
  align-items: stretch;
}
#song-view.is-beat-page .song-detail-cover {
  width: 220px;
  height: 220px;
  border: 1px solid #666;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
#song-view.is-beat-page .song-hero-left:hover .song-detail-cover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 36px rgba(0,0,0,0.65);
}
#song-view.is-beat-page .song-meta-badge {
  color: #ddd;
  letter-spacing: 0.16em;
}
#song-view.is-beat-page .song-detail-title {
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 6px 0 4px;
  line-height: 1.15;
}
#song-view.is-beat-page .song-detail-artists {
  font-size: 14px;
  color: #cfcfcf;
  margin-bottom: 8px;
}

.beat-page-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 4px;
}
.beat-page-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid #555;
  background: rgba(0,0,0,0.25);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #eee;
}
.beat-page-chip em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #999;
  font-weight: 700;
}
.beat-page-chip-live {
  border-color: #6a9a6a;
  color: #dff5df;
  background: rgba(60,100,60,0.25);
}
.beat-page-chip-hot {
  border-color: #a55;
  color: #f0c0c0;
  background: rgba(120,40,40,0.3);
}

.beat-page-extras {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
  margin-top: 14px;
  animation: beatMarketIn 0.45s ease;
}
.beat-page-seller-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.beat-page-seller-card {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.beat-page-seller-card:hover { text-decoration: none; color: inherit; }
.beat-page-seller-avatar {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid #555;
  background: #222;
}
.beat-page-seller-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.beat-page-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.beat-page-related-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid #3a3a3a;
  background: rgba(255,255,255,0.02);
  text-decoration: none;
  color: inherit;
  animation: beatMarketIn 0.4s ease both;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.beat-page-related-card:hover {
  border-color: #777;
  background: rgba(255,255,255,0.05);
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}
.beat-page-related-card img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 1px solid #444;
  background: #111;
}
.beat-page-related-card strong {
  display: block;
  font-size: 12px;
  margin-bottom: 2px;
}

html[data-theme="light"] #song-view.is-beat-page::before {
  background:
    linear-gradient(180deg, rgba(245,245,245,0.78) 0%, rgba(245,245,245,0.94) 55%, #f5f5f5 100%),
    var(--beat-cover) center/cover no-repeat;
  opacity: 0.7;
}
html[data-theme="light"] #song-view.is-beat-page .song-hero-box {
  background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
  border-color: #bbb;
}
html[data-theme="light"] #song-view.is-beat-page .song-hero-box .retro-box-header {
  background: linear-gradient(180deg, #f4f4f4 0%, #e8e8e8 100%);
  color: #111;
}
html[data-theme="light"] #song-view.is-beat-page .song-detail-title,
html[data-theme="light"] #song-view.is-beat-page .song-detail-artists {
  color: #111;
}
html[data-theme="light"] .beat-page-chip {
  background: #fff;
  border-color: #bbb;
  color: #222;
}
html[data-theme="light"] .beat-page-chip em { color: #666; }
html[data-theme="light"] .beat-page-chip-live {
  background: #e8f3e8;
  border-color: #6a9a6a;
  color: #1f5a1f;
}
html[data-theme="light"] .beat-page-chip-hot {
  background: #f7e8e8;
  border-color: #a55;
  color: #822;
}
html[data-theme="light"] .beat-page-buy-btn {
  background: #111;
  border-color: #111;
  color: #fff;
}
html[data-theme="light"] .beat-page-buy-btn:hover {
  background: #222;
}
html[data-theme="light"] .beat-page-soldout-btn {
  background: #d64535;
  border-color: #b53628;
  color: #fff;
}
html[data-theme="light"] .beat-page-more-btn {
  background: #fff;
  border-color: #ccc;
  color: #222;
}
html[data-theme="light"] .beat-page-more-menu {
  background: #fff;
  border-color: #ccc;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
html[data-theme="light"] .beat-page-more-item {
  color: #222;
}
html[data-theme="light"] .beat-page-more-item:hover {
  background: #f2f2f2;
  color: #111;
}
html[data-theme="light"] .beat-page-more-danger {
  color: #b33;
}
html[data-theme="light"] .beat-page-more-danger:hover {
  color: #a22;
  background: #f8eaea;
}
html[data-theme="light"] .beat-page-related-card {
  background: #fff;
  border-color: #ccc;
  color: #222;
}
html[data-theme="light"] .beat-page-related-card:hover {
  border-color: #999;
  background: #f7f7f7;
}
html[data-theme="light"] .beat-page-seller-avatar,
html[data-theme="light"] .beat-page-related-card img {
  border-color: #aaa;
  background: #eee;
}

@media (max-width: 820px) {
  .beat-page-extras { grid-template-columns: 1fr; }
  .beat-page-license-preview { grid-template-columns: 1fr; }
  .beat-page-related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #song-view.is-beat-page .song-detail-cover {
    width: min(220px, 70vw);
    height: min(220px, 70vw);
  }
  #song-view.is-beat-page .song-detail-title { font-size: 22px; }
  #song-view.is-beat-page .song-hero-content {
    text-align: left;
    align-items: stretch;
  }
  #song-view.is-beat-page .song-hero-left {
    display: flex;
    justify-content: center;
  }
  #song-view.is-beat-page .song-hero-right {
    padding-right: 0;
    padding-top: 44px;
  }
  .beat-page-chips { justify-content: flex-start; }
}
.beat-seller-listing-row,
.beat-coupon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.beat-form-block {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-medium);
}
.beat-template-card {
  border: 1px solid var(--border-medium);
  padding: 10px;
  margin-bottom: 8px;
  background: var(--bg-subtle);
}
.beats-empty {
  text-align: center;
  padding: 40px 16px;
}
.beat-market-upload-fields {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
}
.beat-free-banner {
  margin: 10px 14px 0;
  padding: 9px 11px;
  border: 1px dashed #6a8a6a;
  background: rgba(40,90,40,0.22);
  color: #d4ecd4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
html[data-theme="light"] .beat-free-banner {
  background: #eaf5ea;
  color: #1f4f1f;
  border-color: #7a9a7a;
}

/* Beat report modal */
.beat-report-box.playlist-modal-box {
  background: #1a1a1a !important;
  color: #f2f2f2 !important;
  border: 1px solid #555 !important;
}
.beat-report-box .lightbox-header {
  background: linear-gradient(to bottom, #333 0%, #222 100%) !important;
  color: #f5f5f5 !important;
}
.beat-report-box .playlist-modal-body {
  background: #1a1a1a !important;
  color: #f0f0f0 !important;
}
.beat-report-sub {
  margin: 0 0 12px;
  font-size: 12px;
  color: #c0c0c0 !important;
}
.beat-report-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.beat-report-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid #555;
  background: #242424 !important;
  color: #f2f2f2 !important;
  cursor: pointer;
  margin: 0;
  font-weight: normal !important;
  text-shadow: none !important;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.beat-report-option:hover {
  border-color: #888;
  background: #2c2c2c !important;
}
.beat-report-option.is-selected {
  border-color: #ddd;
  background: #303030 !important;
  box-shadow: inset 3px 0 0 #fff;
}
.beat-report-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.beat-report-option-mark {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border: 2px solid #999;
  border-radius: 50%;
  background: #111;
  box-shadow: inset 0 0 0 2px #242424;
}
.beat-report-option.is-selected .beat-report-option-mark {
  border-color: #fff;
  background: #fff;
  box-shadow: inset 0 0 0 3px #303030;
}
.beat-report-option-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.beat-report-option-text strong {
  color: #fff !important;
  font-size: 13px;
  text-shadow: none !important;
}
.beat-report-option-text span {
  color: #b0b0b0 !important;
  font-size: 11px;
  line-height: 1.35;
  font-weight: normal !important;
}
.beat-report-box .form-group label {
  color: #ddd !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}
.beat-report-box .retro-textarea {
  background: #111 !important;
  color: #eee !important;
  border-color: #555 !important;
}
.beat-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
html[data-theme="light"] .beat-report-box.playlist-modal-box {
  background: #fff !important;
  color: #111 !important;
  border-color: #999 !important;
}
html[data-theme="light"] .beat-report-box .lightbox-header {
  background: linear-gradient(to bottom, #f4f4f4, #e6e6e6) !important;
  color: #111 !important;
}
html[data-theme="light"] .beat-report-box .playlist-modal-body {
  background: #fff !important;
  color: #111 !important;
}
html[data-theme="light"] .beat-report-sub { color: #555 !important; }
html[data-theme="light"] .beat-report-option {
  background: #f3f3f3 !important;
  border-color: #aaa;
  color: #111 !important;
}
html[data-theme="light"] .beat-report-option.is-selected {
  background: #eaeaea !important;
  border-color: #333;
  box-shadow: inset 3px 0 0 #111;
}
html[data-theme="light"] .beat-report-option-text strong { color: #111 !important; }
html[data-theme="light"] .beat-report-option-text span { color: #444 !important; }
html[data-theme="light"] .beat-report-option-mark {
  border-color: #555;
  background: #fff;
  box-shadow: inset 0 0 0 2px #f3f3f3;
}
html[data-theme="light"] .beat-report-option.is-selected .beat-report-option-mark {
  border-color: #111;
  background: #111;
  box-shadow: inset 0 0 0 3px #eaeaea;
}
html[data-theme="light"] .beat-report-box .form-group label { color: #111 !important; }
html[data-theme="light"] .beat-report-box .retro-textarea {
  background: #fff !important;
  color: #111 !important;
  border-color: #aaa !important;
}

/* —— Retention: landing listen / weekly / social / collabs / listen-together —— */
.landing-unmute-btn {
  margin-top: 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: inherit;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
}
.landing-explore-link {
  align-self: center;
  font-size: 12px;
  opacity: 0.75;
  text-decoration: none;
  color: inherit;
}
.landing-explore-link:hover { opacity: 1; text-decoration: underline; }
.landing-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 14px;
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.35;
}
.landing-now-sep { opacity: 0.4; }
.landing-now-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: -6px;
  border: 1px solid rgba(128,128,128,0.5);
  vertical-align: middle;
}
.landing-now-people { display: inline-flex; align-items: center; gap: 8px; }
.landing-now-people em { font-style: normal; font-weight: 600; }
.landing-now-radio { display: inline-flex; align-items: center; gap: 6px; }
.landing-weekly-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 9px;
  letter-spacing: 0.06em;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 2px 5px;
}
.landing-weekly-track .landing-track-cover { position: relative; }
.explore-ranking-period {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.explore-songs-rank-section { margin-bottom: 18px; }
.explore-collabs-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.explore-collabs-list { display: flex; flex-direction: column; gap: 10px; }
.collab-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(128,128,128,0.35);
}
.collab-avatar { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.collab-seeking { display: block; font-weight: 600; margin-top: 2px; }
.collab-body p { margin: 6px 0 0; font-size: 13px; }
.onboarding-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.onboarding-checklist { list-style: none; padding: 0; margin: 10px 0 16px; }
.onboarding-checklist li {
  padding: 8px 10px;
  border: 1px solid rgba(128,128,128,0.3);
  margin-bottom: 6px;
  position: relative;
  padding-left: 32px;
}
.onboarding-checklist li::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 1px solid rgba(128,128,128,0.6);
}
.onboarding-checklist li.is-done::before {
  background: currentColor;
}
.onboarding-follow-check {
  display: block;
  margin-top: 6px;
  font-size: 12px;
}
.lt-members { display: flex; flex-wrap: wrap; gap: 8px; }
.lt-member {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.lt-member img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

/* —— Legal pages (derechos / privacidad) —— */
.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2e2e2e;
  font-size: 13px;
}
.legal-toc a { color: #ccc; text-decoration: none; }
.legal-toc a:hover { color: #fff; text-decoration: underline; }
.legal-form { margin: 16px 0 28px; display: flex; flex-direction: column; gap: 10px; }
.catalog-import-legal-warn {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid #555;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  line-height: 1.45;
  color: #ddd;
}
html[data-theme="light"] .catalog-import-legal-warn {
  border-color: #ccc;
  background: #f6f6f6;
  color: #222;
}
html[data-theme="light"] .legal-toc { border-bottom-color: #ddd; }
html[data-theme="light"] .legal-toc a { color: #444; }

/* —— Normas page —— */
.normas-hero .banner-content {
  max-width: 640px;
}
.normas-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}
.normas-page-wrap {
  max-width: 760px;
}
.normas-box .retro-box-header {
  align-items: baseline;
}
.normas-lead {
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.92;
}
.normas-toc {
  gap: 8px;
}
.normas-toc a {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #3a3a3a;
  border-radius: 999px;
  background: #1c1c1c;
  font-size: 12px;
}
.normas-toc a:hover {
  border-color: #777;
  text-decoration: none;
  background: #262626;
}
.normas-section {
  margin: 22px 0 0;
  padding-top: 4px;
}
.normas-section h4 {
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: 0.01em;
}
.normas-pillars {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.normas-pillars li {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #333;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.normas-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.normas-col-title {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
.normas-two-col > div {
  padding: 12px;
  border: 1px solid #333;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}
.normas-two-col ul {
  margin: 0;
}
.normas-steps {
  margin: 0 0 12px;
  padding-left: 20px;
}
.normas-steps li {
  margin: 0 0 8px;
}
.normas-footnote {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid #666;
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
}
.contact-cards {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #353535;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  color: inherit;
  text-decoration: none;
}
.contact-card:hover {
  border-color: #6a6a6a;
  background: #222;
}
.contact-card-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}
.contact-card strong {
  font-size: 15px;
}
.contact-card-inline {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .normas-two-col { grid-template-columns: 1fr; }
}
html[data-theme="light"] .normas-toc a {
  background: #f7f7f7;
  border-color: #ddd;
  color: #333;
}
html[data-theme="light"] .normas-pillars li,
html[data-theme="light"] .normas-two-col > div,
html[data-theme="light"] .normas-footnote,
html[data-theme="light"] .contact-card {
  background: #fafafa;
  border-color: #ddd;
}
html[data-theme="light"] .contact-card:hover {
  background: #f0f0f0;
}

/* —— Radio sidebar + Weekly chart + hero period —— */
.explore-radio-listeners {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 2px;
}
.explore-hero-period {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.explore-hero-period .explore-filter-btn {
  padding: 4px 10px;
  font-size: 12px;
}

.radio-sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, transparent 48%),
    linear-gradient(180deg, #1a1a1a 0%, #101010 100%);
}
.radio-sidebar-now {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.radio-sidebar-cover-wrap.radio-cover-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.radio-sidebar-cover.radio-cover {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid #444;
  background: #0d0d0d;
  border-radius: 2px;
  display: block;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.radio-luxuria-box.is-live:not(.is-paused) .radio-sidebar-cover.radio-cover,
.radio-luxuria-box.is-live.is-paused .radio-sidebar-cover.radio-cover {
  border-radius: 50%;
}
.radio-sidebar-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.radio-sidebar-title {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  color: #eeeeee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.radio-sidebar-artist,
.radio-sidebar-listeners {
  font-size: 11px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.radio-sidebar-listeners {
  color: #777;
}
.radio-sidebar-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 14px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.radio-sidebar-play:hover {
  background: transparent;
  color: #fff;
}
.radio-luxuria-box.is-live:not(.is-paused) .radio-sidebar-play {
  background: transparent;
  color: #fff;
  border-color: #888;
}
.radio-luxuria-box.is-live:not(.is-paused) .radio-sidebar-play:hover {
  border-color: #fff;
  background: #fff;
  color: #111;
}
html[data-theme="light"] .radio-sidebar-body {
  background:
    linear-gradient(145deg, rgba(0, 0, 0, 0.03) 0%, transparent 48%),
    linear-gradient(180deg, #f7f7f7 0%, #efefef 100%);
}
html[data-theme="light"] .radio-sidebar-title {
  color: #111;
}
html[data-theme="light"] .radio-sidebar-artist,
html[data-theme="light"] .radio-sidebar-listeners {
  color: #666;
}
html[data-theme="light"] .radio-sidebar-play {
  background: #111;
  color: #fff;
  border-color: #111;
}
html[data-theme="light"] .radio-sidebar-play:hover {
  background: transparent;
  color: #111;
}
html[data-theme="light"] .radio-luxuria-box.is-live:not(.is-paused) .radio-sidebar-play {
  background: transparent;
  color: #111;
  border-color: #999;
}
html[data-theme="light"] .radio-luxuria-box.is-live:not(.is-paused) .radio-sidebar-play:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}

.landing-weekly-chart {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #2e2e2e;
  background: #141414;
}
.landing-weekly-row {
  display: grid;
  grid-template-columns: 36px 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid #222;
  min-width: 0;
  transition: background 0.15s ease;
}
.landing-weekly-row:last-child {
  border-bottom: none;
}
.landing-weekly-row:hover {
  background: rgba(255, 255, 255, 0.035);
}
.landing-weekly-row.is-top {
  grid-template-columns: 40px 64px minmax(0, 1fr) auto;
  padding: 12px 14px;
  border-left: 2px solid #fff;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
}
.landing-weekly-row.is-top .landing-weekly-pos {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}
.landing-weekly-row.is-top .landing-weekly-cover {
  width: 64px;
  height: 64px;
}
.landing-weekly-row.is-top .landing-weekly-title {
  font-size: 15px;
}
.landing-weekly-pos {
  font-size: 15px;
  font-weight: 800;
  color: #888;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.landing-weekly-cover {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--border-dark, #2e2e2e);
  background: #111;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
}
.landing-weekly-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease, filter 0.25s ease;
  filter: grayscale(0.12);
}
.landing-weekly-cover:hover img,
.landing-weekly-cover:focus-visible img {
  transform: scale(1.06);
  filter: grayscale(0) brightness(0.78);
}
.landing-weekly-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.landing-weekly-cover:hover .landing-weekly-play,
.landing-weekly-cover:focus-visible .landing-weekly-play {
  opacity: 1;
}
.landing-weekly-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.landing-weekly-title {
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  color: var(--text-primary, #eee);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.landing-weekly-title:hover {
  text-decoration: underline;
}
.landing-weekly-artist {
  font-size: 11.5px;
  color: var(--text-secondary, #999);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.landing-weekly-plays {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #777);
  white-space: nowrap;
  padding-left: 8px;
}
html[data-theme="light"] .landing-weekly-chart {
  background: #fafafa;
  border-color: #ddd;
}
html[data-theme="light"] .landing-weekly-row:hover {
  background: rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .landing-weekly-row.is-top {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0%, transparent 55%),
    transparent;
}
html[data-theme="light"] .landing-weekly-row.is-top .landing-weekly-pos {
  color: #111;
}
@media (max-width: 520px) {
  .landing-weekly-row,
  .landing-weekly-row.is-top {
    grid-template-columns: 28px 44px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
  }
  .landing-weekly-row.is-top .landing-weekly-cover {
    width: 48px;
    height: 48px;
  }
  .landing-weekly-row.is-top {
    grid-template-columns: 28px 48px minmax(0, 1fr);
  }
  .landing-weekly-plays {
    display: none;
  }
  .landing-weekly-row.is-top .landing-weekly-pos {
    font-size: 18px;
  }
}

/* Kits de samples */
.kit-sample-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #282828;
}
.kit-sample-row:hover { background: #222; }
.kit-sample-pos {
  width: 22px;
  text-align: center;
  font-size: 11px;
  color: #666;
  flex-shrink: 0;
}
.kit-sample-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  padding: 0;
}
.kit-sample-cover {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid #444;
  background: #111;
  flex-shrink: 0;
}
.kit-sample-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kit-sample-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.kit-sample-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.explore-kit-card { cursor: pointer; }
#kit-owner-actions { display: flex; align-items: center; }

/* ===== Feed móvil: jerarquía, sin cambiar la estética ===== */
@media (max-width: 768px) {
  .retro-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
    transition: transform 0.18s ease;
  }
  body {
    padding-top: var(--mobile-header-h, 72px);
  }
  body.header-is-hidden {
    padding-top: 0;
  }
  body.header-is-hidden .retro-header {
    transform: translateY(-100%);
  }

  .composer-box:not(.is-open) > .retro-box-header,
  .composer-box:not(.is-open) > #composer-form {
    display: none;
  }
  .composer-collapsed {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    color: #d0d0d0;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .composer-box.is-open .composer-collapsed { display: none; }
  .composer-collapsed-avatar {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border: 1px solid #555;
    background: #222;
    flex-shrink: 0;
  }
  .composer-collapsed-prompt {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #bdbdbd;
  }
  .composer-collapsed-clip {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #555;
    color: #eee;
    flex-shrink: 0;
  }
  .file-limits-info { display: none !important; }
  .composer-footer #publish-submit-btn { min-height: 44px; }

  .listening-activity-box .listening-activity-header .subtle-text { display: none; }
  .listening-activity-list {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .listening-activity-item {
    flex: 0 0 auto;
    max-width: 240px;
    min-height: 44px;
    border-bottom: 0;
    border-right: 1px solid rgba(255,255,255,0.08);
  }
  .listening-activity-text,
  .listening-activity-ago { font-size: 12px; }
  .listening-activity-avatar { width: 28px; height: 28px; }

  .post-card .post-song-card {
    border: 0;
    border-top: 1px solid #333;
    background: transparent;
    border-radius: 0;
    margin-top: 8px;
    padding: 10px 0 2px;
    align-items: flex-start;
  }
  .post-song-cover-wrap,
  .post-song-cover-wrap .post-song-cover {
    width: 104px;
    height: 104px;
  }
  .post-song-play-btn {
    width: 44px;
    height: 44px;
  }
  .post-song-title {
    font-size: 15px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .post-song-artist,
  .posts-stream .subtle-text,
  .post-time,
  .post-song-byline,
  .post-song-stats {
    font-size: 12px;
    color: #c8c8c8;
  }
  .repost-frame-banner .post-time { display: none; }
  .post-dots-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .action-link {
    min-height: 44px;
  }

  .comment-form .comment-extra,
  .comment-reply-form .comment-extra {
    display: none;
  }
  .comment-form:focus-within .comment-extra,
  .comment-reply-form:focus-within .comment-extra {
    display: inline-flex;
  }
  .comment-photo-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .mobile-nav-item { position: relative; }
  .mobile-nav-item.active {
    color: #fff;
    background: #242424;
  }
  .mobile-nav-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16%;
    right: 16%;
    height: 2px;
    background: #f2f2f2;
  }
  body.has-mobile-nav #nav-btn-notifications {
    position: relative;
    overflow: visible;
  }
  body.has-mobile-nav #header-notif-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    background: #f2f2f2;
    color: #111;
    z-index: 2;
  }

  :root { --mobile-player-h: 58px; }
  .luxuria-player-bar,
  #luxuria-global-player.luxuria-player-bar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "info transport" !important;
    min-height: 56px !important;
    height: auto !important;
    padding: 6px 8px !important;
  }
  .player-seek-row,
  .player-volume-section,
  #luxuria-global-player .player-volume-section,
  #player-btn-rw,
  #player-btn-ff,
  #player-btn-queue,
  #player-dots-btn {
    display: none !important;
  }
}