/* ========== BASE ========== */
body {
  background-color: #050505;
  color: #d9e7d0;
  overflow-x: hidden;
  padding-bottom: 5rem;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/* ========== GLASS CARD ========== */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
  transform-origin: center center;
  position: relative;
}
.glass-card:hover {
  border-color: #00ff00;
  background: rgba(0, 255, 0, 0.05);
  transform: translateY(-4px);
  z-index: 10;
}
/* ========== ON AIR CARD ========== */
.on-air-card {
  border: 1px solid rgba(0, 255, 0, 0.55) !important;
  box-shadow: 0 0 18px rgba(0, 255, 0, 0.35);
}
.on-air-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 28px rgba(0, 255, 0, 0.25);
  pointer-events: none;
  z-index: -1;
}
/* ========== NEON / GLOW ========== */
.neon-text-glow {
  text-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
}
.glow-pulse {
  animation: pulse-glow 2s infinite ease-in-out;
}
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
  }
  50% {
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.5);
  }
}
/* ========== HERO EQ CANVAS ========== */
.hero-eq-canvas {
  width: 72%;
  height: 48%;
  max-width: 280px;
  display: block;
  opacity: 0.78;
}
/* ========== MODAL ========== */
.modal-overlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(20px);
  z-index: 300;
  justify-content: center;
  align-items: center;
  padding: 20px;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}
.modal-overlay.open {
  display: flex !important;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
.modal-content {
  background: #0c1609;
  border: 1px solid rgba(0, 255, 0, 0.15);
  border-radius: 2rem;
  max-width: 1000px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
}
/* ========== CAROUSEL ========== */
.snap-x-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 24px;
  scroll-behavior: smooth;
  padding: 20px 8px 24px;
}
.snap-x-container::-webkit-scrollbar {
  display: none;
}
.snap-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
/* ========== INFO BAR / WEATHER / TICKER ========== */
#weather-display {
  min-width: 260px;
  white-space: nowrap;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem;
  line-height: 1;
}
#weather-display i,
#weather-display .fa-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 11px;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
#weather-text {
  display: inline-flex;
  align-items: center;
  min-width: 220px;
  line-height: 1;
  margin: 0;
  padding: 0;
}
/* Clock row: icon + time vertically centered */
#info-bar .flex.items-center.gap-2,
#info-bar .flex.items-center.gap-4 {
  display: flex !important;
  align-items: center !important;
  line-height: 1;
}
#info-bar .fa-clock,
#info-bar #clock,
#info-bar .text-electric-green {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#info-bar .fa-clock {
  font-size: 11px;
  width: 1em;
  height: 1em;
  justify-content: center;
}
.ticker-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 520px;
  mask-image: linear-gradient(
    to right,
    transparent,
    black 8%,
    black 92%,
    transparent
  );
}
.ticker-content {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  will-change: transform;
}
@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* ========== LOADING ========== */
.is-loading .material-symbols-outlined {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* ========== VINYL ========== */
.vinyl-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.4s ease;
  transform: translateX(0) scale(0.92);
  opacity: 0;
}
.vinyl-wrapper.active {
  transform: translateX(28%) scale(1);
  opacity: 1;
}
.vinyl-disc {
  width: 92%;
  height: 92%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
  transition: transform 0.3s linear;
}
.vinyl-disc.spinning {
  animation: vinyl-spin 2.2s linear infinite;
}
@keyframes vinyl-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.hero-cover-wrap {
  position: relative;
  z-index: 10;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  width: 100%;
  aspect-ratio: 1 / 1;
}
#hero-cover-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
#player-cover {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}
.nav-link {
  transition: color 0.2s ease;
}
.nav-link:hover {
  color: #00ff00 !important;
}
.nav-link.active-nav {
  color: #00ff00 !important;
}
/* ========== OFFLINE STATE ========== */
.on-air-badge.offline {
  background: rgba(180, 40, 40, 0.15) !important;
  border-color: rgba(220, 80, 80, 0.35) !important;
}
.on-air-badge.offline .pulse-dot {
  background: #ff5555 !important;
  animation: none;
}
.on-air-badge.offline .badge-text {
  color: #ff8888 !important;
}
/* ========== TOOLTIPS ========== */
.vibe-tooltip {
  position: relative;
}
.vibe-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: #0c1609;
  border: 1px solid rgba(0, 255, 0, 0.25);
  color: #00ff00;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 9999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 50;
}
.vibe-tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.vibe-tooltip.tip-below::after {
  bottom: auto;
  top: calc(100% + 10px);
}
/* ========== ICON ACTIVE ========== */
.player-icon-active {
  color: #00ff00 !important;
  text-shadow: 0 0 12px rgba(0, 255, 0, 0.5);
}
/* ========== MODAL STICKY HEADER ========== */
.modal-content {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  max-height: 85vh;
}
.modal-sticky-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #0c1609;
  padding-bottom: 1rem;
  padding-right: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}
.modal-close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 30 !important;
  color: #b9ccaf;
}
.modal-close-btn:hover {
  color: #00ff00;
}
.schedule-past {
  opacity: 0.4;
  filter: grayscale(0.4);
}
.schedule-onair {
  border: 1px solid rgba(0, 255, 0, 0.45) !important;
  box-shadow: 0 0 16px rgba(0, 255, 0, 0.25);
  background: rgba(0, 255, 0, 0.06) !important;
}
.modal-scroll-body {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
}
.modal-scroll-body::-webkit-scrollbar {
  width: 6px;
}
.modal-scroll-body::-webkit-scrollbar-track {
  background: transparent;
}
.modal-scroll-body::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 0, 0.25);
  border-radius: 3px;
}
.modal-scroll-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 0, 0.45);
}
/* ========== NEW TRACKS OVERLAY ========== */
#newtracks-overlay {
  /* positioning via Tailwind classes on element */
}
#playlist-overlay {
  /* desktop position via Tailwind bottom-24 */
}
/* ========== LEGAL CONTENT IN MODAL ========== */
.legal-content {
  color: #b9ccaf;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}
.legal-content h2 {
  font-family: "Sora", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #eaffde;
  margin: 2rem 0 1rem;
}
.legal-content h3 {
  font-family: "Sora", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #00ff00;
  margin: 1.75rem 0 0.75rem;
  letter-spacing: -0.01em;
}
.legal-content h4 {
  font-family: "Sora", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #eaffde;
  margin: 1.25rem 0 0.5rem;
}
.legal-content p {
  margin: 0 0 1rem;
  color: #b9ccaf;
}
.legal-content strong {
  color: #eaffde;
  font-weight: 600;
}
.legal-content ul,
.legal-content ol {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}
.legal-content li {
  margin-bottom: 0.4rem;
  color: #b9ccaf;
}
.legal-content hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 2rem 0;
}
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.legal-content td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #b9ccaf;
  vertical-align: top;
}
.legal-content td:first-child {
  color: #00ff00;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  width: 40%;
}
.legal-content a {
  color: #00ff00;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dj-horario b,
.dj-horario strong {
  color: #00ff00;
  font-weight: 700;
}
.dj-horario small {
  opacity: 0.6;
  font-size: 0.85em;
}
#vibe-player-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}
/* Horizontal alignment of player-bar action icons */
#vibe-player-bar .player-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: 0.35rem !important; /* same rhythm between volume group and every action icon */
}
#vibe-player-bar .volume-wrap {
  display: flex;
  align-items: center;
  height: 2.5rem;
  gap: 0.15rem;
  margin-right: 0.15rem; /* optical balance before Mix Archive */
}
#vibe-player-bar .volume-wrap .player-action-btn {
  margin: 0;
}
#vibe-player-bar .vibe-vol-slider,
#vibe-player-bar #vibe-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 5.5rem;
  height: 4px;
  margin: 0 0.25rem 0 0;
  align-self: center;
  background: rgba(185, 204, 175, 0.22);
  border-radius: 9999px;
  outline: none;
  cursor: pointer;
  /* neutral track — no electric-green chrome */
  accent-color: #b9ccaf;
}
@media (min-width: 1024px) {
  #vibe-player-bar .vibe-vol-slider,
  #vibe-player-bar #vibe-volume-slider {
    width: 6.5rem;
  }
}
#vibe-player-bar .vibe-vol-slider::-webkit-slider-runnable-track,
#vibe-player-bar #vibe-volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(185, 204, 175, 0.22);
  border-radius: 9999px;
  border: none;
}
#vibe-player-bar .vibe-vol-slider::-webkit-slider-thumb,
#vibe-player-bar #vibe-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border-radius: 50%;
  background: #d9e7d0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
#vibe-player-bar .vibe-vol-slider::-moz-range-track,
#vibe-player-bar #vibe-volume-slider::-moz-range-track {
  height: 4px;
  background: rgba(185, 204, 175, 0.22);
  border-radius: 9999px;
  border: none;
}
#vibe-player-bar .vibe-vol-slider::-moz-range-thumb,
#vibe-player-bar #vibe-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d9e7d0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
}
/* Keyboard focus: electric-green ring (same as rest of site) */
#vibe-player-bar .vibe-vol-slider:focus-visible,
#vibe-player-bar #vibe-volume-slider:focus-visible {
  outline: 2px solid #00ff00 !important;
  outline-offset: 4px;
  border-radius: 9999px;
}
#vibe-player-bar .vibe-vol-slider:focus:not(:focus-visible),
#vibe-player-bar #vibe-volume-slider:focus:not(:focus-visible) {
  outline: none;
}
#vibe-player-bar .player-actions > button,
#vibe-player-bar .player-actions .icon-badge-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2.5rem;
  width: 2.5rem;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
#vibe-player-bar .player-actions .material-symbols-outlined {
  font-size: 1.5rem !important;
  line-height: 1 !important;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Volume tip above the slider (same visual language as icon hints) */
.vibe-tooltip.tip-above::after {
  bottom: calc(100% + 10px);
  top: auto;
}

/* Header Just Played / Fresh Drops / Hamburger = same size & gap as player-action-btn */
.header-icon-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important; /* match #vibe-player-bar .player-actions */
}
.header-icon-row .icon-badge-wrap {
  width: 2.5rem !important;
  height: 2.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}
.header-action-icon,
.header-icon-row .material-symbols-outlined,
.header-icon-row .mobile-menu-btn .material-symbols-outlined {
  font-size: 1.5rem !important;
  line-height: 1 !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Hit target box (same as .player-action-btn) */
.header-icon-row .header-action-icon {
  width: 2.5rem !important;
  height: 2.5rem !important;
}
.header-icon-row .mobile-menu-btn {
  /* size when visible (mobile only — visibility controlled by max-width media query) */
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}
.header-icon-row .mobile-menu-btn .material-symbols-outlined {
  font-size: 1.5rem !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
}
/* ========== FRESH DROPS / HISTORY ATTENTION ========== */
.icon-has-update {
  position: relative;
  color: #00ff00 !important;
  animation: icon-pulse-glow 1.8s ease-in-out infinite;
}
.icon-has-update::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  background: #00ff00;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 255, 0, 0.85);
  animation: dot-blink 1.2s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
@keyframes icon-pulse-glow {
  0%,
  100% {
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.3);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 14px rgba(0, 255, 0, 0.85);
    transform: scale(1.08);
  }
}
@keyframes dot-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.85);
  }
}
.history-plus-one {
  position: absolute;
  top: 2px;
  right: 2px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #00ff00;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.7);
  pointer-events: none;
  z-index: 5;
  animation: plus-one-rise 1.5s ease-out forwards;
}
@keyframes plus-one-rise {
  0% { opacity: 0; transform: translateY(4px) scale(0.85); }
  18% { opacity: 1; transform: translateY(0) scale(1.1); }
  70% { opacity: 1; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(0.95); }
}
.icon-badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* ========== MOBILE / RESPONSIVE ========== */
@media (max-width: 767px) {
  .px-margin-desktop {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #info-bar {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 9px;
  }
  #weather-display {
    min-width: 0;
  }
  #weather-text {
    min-width: 0;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  header {
    padding-left: 16px !important;
    padding-right: 16px !important;
    height: 3.5rem !important;
  }
  header .font-headline-lg {
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
  }
  #section-live {
    padding-top: 7.5rem !important;
    padding-bottom: 2.5rem !important;
    min-height: auto !important;
  }
  #section-live .font-display-xl,
  #section-live #hero-program-name {
    font-size: 2.15rem !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em !important;
  }
  #section-live .font-body-lg {
    font-size: 0.95rem !important;
  }
  #section-live .flex.flex-wrap.gap-6 {
    flex-direction: column;
    width: 100%;
  }
  #section-live .flex.flex-wrap.gap-6 > button {
    width: 100%;
    justify-content: center;
  }
  #hero-visualizer-container {
    max-width: 260px !important;
    margin: 1.75rem auto 0;
  }
  section.py-20 {
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
  }
  section h2.font-headline-lg {
    font-size: 1.65rem !important;
  }
  #hitlist-scroll .glass-card {
    padding: 0.6rem !important;
  }
  #hitlist-scroll .font-headline-md {
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
  }
  #hitlist-scroll .font-body-md {
    font-size: 0.72rem !important;
  }
  #djs-scroll .snap-item {
    width: 70vw !important;
    max-width: 260px !important;
  }
  #shows-scroll .snap-item {
    width: 84vw !important;
    max-width: 320px !important;
  }
  footer {
    padding-bottom: 6.5rem !important;
  }
  footer .w-14 {
    width: 2.75rem !important;
    height: 2.75rem !important;
  }
  #vibe-player-bar {
    height: auto !important;
    min-height: 0 !important;
    padding: 0.55rem 0.65rem !important;
    padding-bottom: max(0.55rem, env(safe-area-inset-bottom)) !important;
    gap: 0.35rem !important;
    align-items: center !important;
  }
  #vibe-player-bar .player-meta {
    width: auto !important;
    flex: 1 1 0;
    min-width: 0;
    gap: 0.5rem !important;
  }
  #vibe-player-bar .player-cover-wrap {
    width: 2.6rem !important;
    height: 2.6rem !important;
  }
  #vibe-player-bar .player-text {
    display: block !important;
    min-width: 0;
    overflow: hidden;
  }
  #vibe-player-bar #player-title {
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
  }
  #vibe-player-bar #player-artist {
    font-size: 0.62rem !important;
  }
  #vibe-player-bar .player-controls {
    width: auto !important;
    flex: 0 0 auto;
  }
  #vibe-player-bar .player-controls .flex.items-center {
    gap: 0.15rem !important;
  }
  #vibe-player-bar #player-play-btn {
    width: 2.6rem !important;
    height: 2.6rem !important;
  }
  #vibe-player-bar #player-play-btn .material-symbols-outlined {
    font-size: 1.4rem !important;
  }
  #vibe-player-bar .skip-btn {
    display: none !important;
  }
  #vibe-player-bar.mix-mode .skip-btn {
    display: inline-flex !important;
  }
  #vibe-player-bar .player-progress-row {
    display: none !important;
  }
  #vibe-player-bar.mix-mode .player-progress-row {
    display: flex !important;
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    top: 0;
    transform: translateY(-100%);
    background: rgba(5, 5, 5, 0.95);
    padding: 0.3rem 0.5rem;
    border-radius: 9999px 9999px 0 0;
    gap: 0.35rem;
    align-items: center;
    max-width: none;
  }
  #vibe-player-bar .player-actions {
    width: auto !important;
    flex: 0 0 auto;
    gap: 0.25rem !important;
  }
  #vibe-player-bar .volume-wrap {
    display: none !important;
  }
  #vibe-player-bar #history-btn,
  #vibe-player-bar #pip-btn,
  #vibe-player-bar #fs-btn {
    display: none !important;
  }
  #playlist-overlay,
  #newtracks-overlay {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 1.5rem) !important;
    max-width: 22rem !important;
    max-height: 68vh !important;
    margin: 0 !important;
    border-radius: 1.15rem !important;
    z-index: 210 !important;
    padding: 1rem !important;
  }
  #playlist-overlay .max-h-96,
  #newtracks-overlay .max-h-96 {
    max-height: 48vh !important;
  }
  .modal-overlay.open {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .hero-eq-canvas {
    width: 78% !important;
    height: 44% !important;
    max-width: 200px !important;
    opacity: 0.72 !important;
  }
  .modal-content {
    max-height: 90vh !important;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    padding: 1.15rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .modal-close-btn {
    top: 0.65rem !important;
    right: 0.65rem !important;
  }
  .modal-sticky-header h2 {
    font-size: 1.4rem !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .px-margin-desktop {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  #djs-scroll .snap-item {
    width: 240px !important;
  }
  #shows-scroll .snap-item {
    width: 340px !important;
  }
}
/* Hitlist modal mobile density */
@media (max-width: 767px) {
  .hitlist-modal-title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }
  .hitlist-row {
    gap: 0.65rem !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  .hitlist-rank {
    font-size: 0.95rem !important;
    width: 1.75rem !important;
  }
  .hitlist-cover {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  .hitlist-title {
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
  }
  .hitlist-artist {
    font-size: 0.7rem !important;
  }
  .hitlist-trend .material-symbols-outlined {
    font-size: 1rem !important;
  }
  .hitlist-trend .font-label-caps {
    display: none !important;
  }
}
@media (hover: none) {
  .glass-card:hover {
    transform: none;
  }
}

/* ========== MIGRATED FROM index.php / core.js (static only) ========== */
.material-symbols-outlined.icon-fill,
.vibe-play-icon,
.icon-fill {
  font-variation-settings: "FILL" 1;
}
.material-symbols-outlined.icon-outline,
.icon-outline {
  font-variation-settings: "FILL" 0;
}
.cursor-pointer-link {
  cursor: pointer;
}
.progress-fill {
  height: 100%;
  background: #00ff00;
  transition: width 1s linear;
  box-shadow: 0 0 10px #00ff00;
  width: 0%;
}

/* ========== WEEKLY SCHEDULE MODAL CARDS ========== */
.schedule-card-base,
.schedule-card {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1rem !important;
  border-radius: 1rem !important;
  min-height: 5.5rem; /* fixed visual row height */
  height: 5.5rem;
  overflow: hidden;
  box-sizing: border-box;
}
.schedule-card-img {
  width: 3.5rem !important;
  height: 3.5rem !important;
  border-radius: 0.75rem !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
.schedule-card-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  overflow: hidden;
}
.schedule-card-slot {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #00ff00;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schedule-card-title {
  font-weight: 700;
  color: #eaffde;
  font-size: 0.92rem;
  line-height: 1.25;
  margin: 0;
  /* max 2 lines — keeps every card the same height */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 767px) {
  .schedule-card-base,
  .schedule-card {
    min-height: 5rem;
    height: 5rem;
    padding: 0.75rem !important;
  }
  .schedule-card-img {
    width: 3rem !important;
    height: 3rem !important;
  }
  .schedule-card-title {
    font-size: 0.82rem;
  }
}


/* ========== WEEKLY PULSE — original pill grid (1 / 2 / 3 cols) ========== */
.schedule-day-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.5rem; /* gap-6 */
}
@media (min-width: 768px) {
  .schedule-day-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px) {
  .schedule-day-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
.schedule-day-grid > .schedule-card,
.schedule-day-grid > .schedule-card-base {
  width: 100%;
  max-width: 100%;
}
.schedule-day-empty {
  grid-column: 1 / -1;
}


/* ========== DJs FULL PAGE GRID ========== */
.djs-page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
  width: 100%;
}
@media (min-width: 640px) {
  .djs-page-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .djs-page-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }
}
.djs-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  min-width: 0;
  width: 100%;
}
.djs-card-img-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* 1:1 square */
  border-radius: 1rem;
  overflow: hidden;
  background: #182214;
  margin-bottom: 0.85rem;
}
.djs-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.djs-card:hover .djs-card-img {
  transform: scale(1.08);
  filter: none;
}
.djs-card-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,0.55), transparent 55%);
  pointer-events: none;
}
.djs-card-name {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #eaffde;
  line-height: 1.25;
  margin: 0 0 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.djs-card-flag {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: rgba(185, 204, 175, 0.55);
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.djs-card-cta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: #00ff00;
  margin: 0;
}
@media (max-width: 639px) {
  .djs-card-name { font-size: 0.92rem; }
}

/* ========== MOBILE HAMBURGER MENU ========== */
.mobile-menu-btn {
  display: none; /* desktop default — only show on small screens */
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #b9ccaf;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
}
.mobile-menu-btn:hover,
.mobile-menu-btn[aria-expanded="true"] {
  color: #00ff00;
}
/* Mobile / tablet-narrow only */
@media (max-width: 767px) {
  .mobile-menu-btn,
  .header-icon-row .mobile-menu-btn,
  #mobile-menu-btn {
    display: inline-flex !important;
  }
}
@media (min-width: 768px) {
  .mobile-menu-btn,
  .header-icon-row .mobile-menu-btn,
  #mobile-menu-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  #mobile-menu { display: none !important; }
}
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 220;
  pointer-events: none;
  visibility: hidden;
}
.mobile-menu.open {
  pointer-events: auto;
  visibility: visible;
}
.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.mobile-menu.open .mobile-menu-backdrop {
  opacity: 1;
}
.mobile-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(22rem, 88vw);
  height: 100%;
  height: 100dvh;
  background: #0c1609;
  border-left: 1px solid rgba(0, 255, 0, 0.12);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  transform: translateX(104%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-menu.open .mobile-menu-panel {
  transform: translateX(0);
}
.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.15rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.mobile-menu-brand {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: #00ff00;
}
.mobile-menu-close {
  background: transparent;
  border: none;
  color: #b9ccaf;
  cursor: pointer;
  padding: 0.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu-close:hover { color: #00ff00; }
.mobile-menu-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0.85rem 1rem;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00ff00;
  margin: 1.15rem 0.65rem 0.45rem;
  opacity: 0.9;
}
.mobile-menu-label:first-child {
  margin-top: 0.35rem;
}
.mobile-menu-link {
  display: block;
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: #eaffde;
  text-decoration: none;
  padding: 0.7rem 0.75rem;
  border-radius: 0.65rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.mobile-menu-link:hover,
.mobile-menu-link:active {
  background: rgba(0, 255, 0, 0.08);
  color: #00ff00;
}
.mobile-menu-social {
  flex-shrink: 0;
  padding: 0.85rem 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(5, 5, 5, 0.55);
}
.mobile-menu-social .mobile-menu-label {
  margin: 0 0 0.65rem 0.15rem;
}
.mobile-menu-social-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.mobile-menu-social-grid a {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #b9ccaf;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.2s ease;
}
.mobile-menu-social-grid a:hover {
  background: #00ff00;
  color: #050505;
  border-color: #00ff00;
}
body.mobile-menu-open {
  overflow: hidden !important;
}


/* ========== NEWS FEATURED TIMESTAMP BADGE ========== */
.news-stamp-badge {
  background: #8B5CF6 !important;
  color: #ffffff !important;
  font-weight: 500;
  letter-spacing: 0.1em;
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.45);
}

/* ========== SECTION SCROLL ANCHORS (fixed header) ========== */
/* Section top pins under fixed chrome via JS. min-height fills the band
   so short sections don't reveal the next one below the player. */
#section-live,
#section-hitlist,
#section-djs,
#section-shows,
#section-news {
  scroll-margin-top: 0;
}
#section-hitlist,
#section-djs,
#section-shows,
#section-news {
  /* fallback until JS measures exact chrome heights */
  min-height: calc(100vh - 7.5rem - 5rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* tight top — title sits near header after scroll */
  padding-top: 1.75rem !important;
  padding-bottom: 3rem !important;
}
@media (max-width: 767px) {
  #section-hitlist,
  #section-djs,
  #section-shows,
  #section-news {
    min-height: calc(100vh - 6rem - 4.5rem);
    padding-top: 1.25rem !important;
    padding-bottom: 2.5rem !important;
  }
}


/* header icons unified above with player icons */


/* ========== PLAYER ACTION ICONS (Mix Archive / PiP / FS) ========== */
#vibe-player-bar .player-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  padding: 0 !important;
  flex-shrink: 0;
  line-height: 1;
  background: transparent;
  border: none;
  cursor: pointer;
}
#vibe-player-bar .player-action-btn .material-symbols-outlined {
  font-size: 1.5rem !important;
  line-height: 1 !important;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== MIX ARCHIVE LIST ========== */
.mix-archive-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.75rem;
  border-radius: 0.75rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: #eaffde;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mix-archive-item:hover {
  background: rgba(0,255,0,0.06);
  border-color: rgba(0,255,0,0.2);
}
.mix-archive-item.is-playing {
  background: rgba(0,255,0,0.1);
  border-color: rgba(0,255,0,0.4);
  box-shadow: 0 0 14px rgba(0,255,0,0.12);
}
.mix-archive-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: #00ff00;
  min-width: 1.5rem;
  text-align: center;
  opacity: 0.85;
}
.mix-archive-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mix-archive-title {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mix-archive-sub {
  font-size: 0.72rem;
  color: #b9ccaf;
  opacity: 0.85;
}
.mix-archive-eq,
.mix-archive-play {
  font-size: 1.25rem !important;
  color: #00ff00;
  flex-shrink: 0;
}
.mix-archive-item:not(.is-playing) .mix-archive-play {
  color: #b9ccaf;
  opacity: 0.6;
}

/* ========== GET IN TOUCH PAGE ========== */
.git-page { color: #d9e7d0; }
.git-alert {
  display: none;
  margin-top: 1rem;
  margin-bottom: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.95rem;
}
.git-alert.show { display: block; }
.git-alert-ok {
  background: rgba(0,255,0,0.08);
  border: 1px solid rgba(0,255,0,0.3);
  color: #00ff00;
}
.git-alert-error {
  background: rgba(220,60,60,0.1);
  border: 1px solid rgba(220,80,80,0.35);
  color: #ff8888;
}
.git-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.git-pills-sm { justify-content: flex-start; margin-bottom: 1rem; }
.git-pill {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1.1rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: #b9ccaf;
  cursor: pointer;
  transition: all 0.2s ease;
}
.git-pill:hover { color: #00ff00; border-color: rgba(0,255,0,0.35); }
.git-pill.active {
  background: rgba(0,255,0,0.12);
  border-color: rgba(0,255,0,0.45);
  color: #00ff00;
  box-shadow: 0 0 14px rgba(0,255,0,0.15);
}
.git-form {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.25rem;
  padding: 1.5rem 1.35rem 1.75rem;
}
.git-panel { display: none; }
.git-panel.active { display: block; }
.git-field { margin-bottom: 1rem; }
.git-field label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00ff00;
  margin-bottom: 0.4rem;
}
.git-field input,
.git-field textarea,
.git-field select {
  width: 100%;
  background: rgba(5,5,5,0.55);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.65rem;
  padding: 0.7rem 0.85rem;
  color: #eaffde;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 1rem;
}
.git-field input:focus,
.git-field textarea:focus {
  outline: none;
  border-color: rgba(0,255,0,0.45);
  box-shadow: 0 0 0 2px rgba(0,255,0,0.12);
}
.git-hint {
  font-size: 0.88rem;
  color: #b9ccaf;
  opacity: 0.85;
  margin: 0 0 0.85rem;
}
.git-drop {
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 0.85rem;
  padding: 1.25rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  color: #b9ccaf;
}
.git-drop:hover,
.git-drop.dragover {
  border-color: rgba(0,255,0,0.4);
  background: rgba(0,255,0,0.04);
}
.git-drop .material-symbols-outlined {
  font-size: 2rem;
  color: #00ff00;
  margin-bottom: 0.35rem;
}
.git-file-list { margin-top: 0.75rem; text-align: left; }
.git-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.45rem;
  background: rgba(0,0,0,0.25);
  font-size: 0.82rem;
  margin-bottom: 0.35rem;
}
.git-item button {
  background: transparent;
  border: none;
  color: #ff8888;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.git-progress {
  display: none;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 9999px;
  margin: 0.75rem 0 1rem;
  overflow: hidden;
}
.git-progress.show { display: block; }
.git-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: #00ff00;
  box-shadow: 0 0 10px #00ff00;
  transition: width 0.15s linear;
}
.git-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem 1.25rem;
  border-radius: 9999px;
  border: none;
  background: #00ff00;
  color: #050505;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 0 18px rgba(0,255,0,0.25);
}
.git-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(0,255,0,0.4);
}
.git-btn:disabled { opacity: 0.55; cursor: not-allowed; }



/* ========== DJ UPCOMING GIGS ========== */
.dj-profile-gigs .glass-card {
  background: rgba(0, 255, 0, 0.04);
}


/* ========== RADIO FOCUS MODE (hero only) ========== */
body.vibe-radio-focus {
  overflow: hidden !important;
}
body.vibe-radio-focus #info-bar {
  display: none !important;
}
body.vibe-radio-focus header {
  top: 0 !important;
}
/* Keep Just Played + Fresh Drops; hide only main nav + hamburger */
body.vibe-radio-focus header nav,
body.vibe-radio-focus #mobile-menu-btn {
  display: none !important;
}
body.vibe-radio-focus #section-hitlist,
body.vibe-radio-focus #section-djs,
body.vibe-radio-focus #section-shows,
body.vibe-radio-focus #section-news,
body.vibe-radio-focus footer,
body.vibe-radio-focus #mobile-menu {
  display: none !important;
}
/* Hide View Schedule in focus mode */
body.vibe-radio-focus #hero-view-schedule {
  display: none !important;
}
body.vibe-radio-focus #section-live {
  min-height: calc(100vh - 5rem) !important;
  min-height: calc(100dvh - 5rem) !important;
  padding-top: 5.5rem !important;
  padding-bottom: 6rem !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
/* Overlays MUST remain openable in Radio Focus (Just Played / Fresh Drops / Mix Archive).
   JS already closes them when entering focus; do not force-hide here. */
body.vibe-radio-focus #playlist-overlay:not(.hidden),
body.vibe-radio-focus #newtracks-overlay:not(.hidden),
body.vibe-radio-focus #mix-archive-overlay:not(.hidden) {
  display: block !important;
  z-index: 120 !important;
}

/* PiP visibility: see reinforced rules below Radio Focus */


/* Radio Focus — tablet + desktop only (never phones)
   Must beat #vibe-player-bar .player-action-btn { display:inline-flex !important } */
@media (max-width: 767px) {
  #vibe-player-bar #focus-btn,
  #focus-btn {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
  }
}
/* Also guard landscape phones that report width slightly over 767 via DPR quirks */
@media (max-width: 900px) and (pointer: coarse) and (hover: none) {
  #vibe-player-bar #focus-btn,
  #focus-btn {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}
/* PiP already desktop-only; reinforce over player-action-btn */
@media (max-width: 1279px), (hover: none), (pointer: coarse) {
  #vibe-player-bar #pip-btn,
  #pip-btn {
    display: none !important;
  }
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  #vibe-player-bar #pip-btn,
  #pip-btn {
    display: inline-flex !important;
  }
}

/* Fullscreen control: hide on very small phones if desired — keep from sm up via default flex */
#fs-btn {
  display: inline-flex !important;
}
@media (max-width: 379px) {
  #fs-btn {
    display: none !important;
  }
}

/* ============================================================
   ACCESSIBILITY – 2026
   ============================================================ */

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: #00ff00;
  color: #050505;
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 9999px;
  text-decoration: none;
  z-index: 9999;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 16px;
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

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

  .vinyl-disc.spinning,
  .glow-pulse,
  .ticker-content,
  .icon-has-update,
  .history-plus-one {
    animation: none !important;
  }
}

/* Focus visível e consistente */
:focus-visible {
  outline: 2px solid #00ff00;
  outline-offset: 3px;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #00ff00;
  outline-offset: 3px;
}

/* Melhor contraste para texto secundário em ecrãs de baixa qualidade */
@media (prefers-contrast: more) {
  .text-on-surface-variant {
    color: #d0e0c8 !important;
  }
}

/* Garantir que elementos interativos têm tamanho mínimo de toque */
@media (pointer: coarse) {
  .header-action-icon,
  .player-action-btn,
  .mobile-menu-btn,
  .mobile-menu-close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Volume slider thumb: electric green on hover / active drag */
#vibe-player-bar #vibe-volume-slider::-webkit-slider-thumb:hover,
#vibe-player-bar #vibe-volume-slider::-webkit-slider-thumb:active,
#vibe-player-bar .vibe-vol-slider::-webkit-slider-thumb:hover,
#vibe-player-bar .vibe-vol-slider::-webkit-slider-thumb:active {
  background: #00ff00 !important;
  border-color: rgba(0, 255, 0, 0.55);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.55);
}
#vibe-player-bar #vibe-volume-slider::-moz-range-thumb:hover,
#vibe-player-bar #vibe-volume-slider::-moz-range-thumb:active,
#vibe-player-bar .vibe-vol-slider::-moz-range-thumb:hover,
#vibe-player-bar .vibe-vol-slider::-moz-range-thumb:active {
  background: #00ff00 !important;
  border-color: rgba(0, 255, 0, 0.55);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.55);
}


/* Floating Lounge chat FAB — vertical center, right edge */
.share-fab {
  position: fixed;
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 95;
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 9999px;
  border: 1px solid rgba(0, 255, 0, 0.35);
  background: rgba(12, 22, 9, 0.92);
  color: #00ff00;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(0, 255, 0, 0.22), 0 8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.share-fab:hover {
  background: #00ff00;
  color: #050505;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 0 22px rgba(0, 255, 0, 0.45);
}
.share-fab .material-symbols-outlined {
  font-size: 1.45rem;
  line-height: 1;
}
/* share fab stays visible on lounge */

@media (max-width: 640px) {
  .share-fab {
    width: 2.75rem;
    height: 2.75rem;
    right: max(0.5rem, env(safe-area-inset-right, 0px));
  }
  .share-fab .material-symbols-outlined {
    font-size: 1.25rem;
  }
}


/* Lounge: never show site footer under the fixed chat shell */
body.lounge-page footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Tooltip to the left (right-edge FAB) — same language as Just Played / Fresh Drops */
.vibe-tooltip.tip-left::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 12px);
  transform: translateY(-50%) scale(0.9);
}
.vibe-tooltip.tip-left:hover::after {
  transform: translateY(-50%) scale(1);
}

/* ========== LOUNGE (migrated from lounge.php) ========== */

:root{
  --lounge-header-offset: 7rem;
  --lounge-player-offset: 5.5rem;
}
@media (min-width: 768px){
  :root{
    --lounge-header-offset: 7.5rem;
    --lounge-player-offset: 6rem;
  }
}
body.lounge-page{
  overflow: hidden !important;
  height: 100dvh;
  padding-bottom: 0 !important;
  background: #050505;
}
/* Soft-nav keeps site footer outside #app-content — hide it on lounge */
body.lounge-page footer,
body.lounge-page #site-footer,
body.lounge-page .site-footer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}
.lounge-shell{
  position: fixed;
  top: var(--lounge-header-offset);
  bottom: var(--lounge-player-offset);
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  padding: 0.4rem clamp(0.45rem, 1.5vw, 1.5rem) 0.45rem;
  z-index: 20;
  min-height: 0;
  background: #050505; /* solid so nothing peeks through sides */
}
.lounge-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  height: 100%;
  min-height: 0;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 1024px){
  .lounge-grid{ grid-template-columns: minmax(200px, 270px) 1fr; gap: 0.85rem; }
}
.lounge-panel{
  background: rgba(12, 22, 9, 0.94);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem;
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  box-shadow: 0 10px 36px rgba(0,0,0,0.5);
}
.lounge-side{ display: none; }
@media (min-width: 1024px){ .lounge-side{ display: flex; } }

.lounge-panel-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0; gap: 0.45rem; flex-wrap: wrap;
}
.lounge-panel-head h2{
  font-family: "Sora", system-ui, sans-serif; font-weight: 700; font-size: 0.88rem;
  color: #eaffde; display: flex; align-items: center; gap: 0.35rem; margin: 0;
}
.lounge-status-pill{
  font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #00ff00; background: rgba(0,255,0,0.1);
  border: 1px solid rgba(0,255,0,0.25); padding: 0.18rem 0.42rem; border-radius: 9999px;
  white-space: nowrap;
}
.lounge-status-pill.warn{ color:#ffcc66; background:rgba(255,180,40,0.1); border-color:rgba(255,180,40,0.3); }

.lounge-pin{
  display: none; padding: 0.45rem 0.8rem; background: rgba(139,92,246,0.12);
  border-bottom: 1px solid rgba(139,92,246,0.25); font-size: 0.78rem; color: #e0d4ff;
  flex-shrink: 0; gap: 0.35rem; align-items: flex-start;
}
.lounge-pin.show{ display: flex; }
.lounge-pin .material-symbols-outlined{ color: #a78bfa; font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

.lounge-messages{
  flex: 1; overflow-y: auto; padding: 0.6rem 0.7rem; display: flex; flex-direction: column;
  align-items: stretch; gap: 0.45rem; min-height: 0; -webkit-overflow-scrolling: touch;
}
.lounge-msg{
  display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.5rem 0.65rem;
  border-radius: 0.85rem; background: rgba(5,5,5,0.45); border: 1px solid rgba(255,255,255,0.05);
  transition: border-color 0.15s;
  max-width: 52%;
  width: fit-content;
  margin: 0.2rem 0;
}
.lounge-msg:hover{ border-color: rgba(255,255,255,0.12); }
/* Others: left half */
.lounge-msg.is-other{
  align-self: flex-start;
  margin-right: auto;
}
/* Own messages: right half */
.lounge-msg.is-mine{
  align-self: flex-end;
  margin-left: auto;
  flex-direction: row-reverse;
  background: rgba(0,255,0,0.07);
  border-color: rgba(0,255,0,0.18);
  text-align: right;
}
.lounge-msg.is-mine .lounge-msg-meta{
  flex-direction: row-reverse;
}
.lounge-msg.is-mine .lounge-msg-text{
  text-align: right;
}
.lounge-avatar{
  width: 1.9rem; height: 1.9rem; border-radius: 9999px; background: rgba(0,255,0,0.1);
  border: 1px solid rgba(0,255,0,0.25); display: inline-flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0; color: #00ff00; line-height: 0; overflow: hidden;
}
.lounge-avatar .material-symbols-outlined{
  font-size: 1rem !important; line-height: 1 !important; width: 1em; height: 1em;
  display: flex !important; align-items: center; justify-content: center;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  margin: 0; padding: 0;
}
.lounge-msg.is-admin .lounge-avatar{ background: rgba(0,255,0,0.18); box-shadow: 0 0 10px rgba(0,255,0,0.22); }
.lounge-msg-body{ min-width: 0; flex: 1; }
.lounge-msg-meta{ display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.12rem; }
.lounge-msg-nick{ font-family: "Sora", system-ui, sans-serif; font-weight: 700; font-size: 0.76rem; color: #00ff00; }
.lounge-msg-time{ font-family: "JetBrains Mono", monospace; font-size: 9px; color: rgba(185,204,175,0.6); margin-left: auto; }
.lounge-msg-text{ font-size: 0.86rem; color: #eaffde; line-height: 1.4; word-break: break-word; }
.lounge-msg-edited{ font-size: 9px; color: rgba(185,204,175,0.45); margin-left: 0.2rem; }
.admin-badge{
  background: #00FF00; color: #050505; font-size: 8px; font-weight: 800;
  padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em;
}
.msg-actions{ display: none; gap: 0.1rem; }
.lounge-msg:hover .msg-actions, .lounge-msg:focus-within .msg-actions{ display: inline-flex; }
.msg-actions button{
  background: transparent; border: none; color: rgba(185,204,175,0.55); cursor: pointer;
  padding: 0.08rem; line-height: 1; border-radius: 4px;
}
.msg-actions button:hover{ color: #00ff00; background: rgba(0,255,0,0.08); }
.msg-actions button.danger:hover{ color: #ff6666; background: rgba(255,80,80,0.1); }

.lounge-composer{
  border-top: 1px solid rgba(255,255,255,0.08); padding: 0.5rem 0.65rem; flex-shrink: 0;
  background: rgba(0,0,0,0.28);
}
.lounge-composer form{ display: flex; gap: 0.4rem; align-items: center; }
.lounge-composer .lounge-avatar-composer{
  width: 2.35rem; height: 2.35rem; cursor: pointer; flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.lounge-composer .lounge-avatar-composer:hover{
  border-color: #00ff00; background: rgba(0,255,0,0.18);
}
.lounge-composer .lounge-avatar-composer .material-symbols-outlined{ font-size: 1.15rem !important; }
.lounge-emoji-btn{
  background: transparent; border: 1px solid rgba(255,255,255,0.12); border-radius: 0.55rem;
  width: 2.35rem; height: 2.35rem; min-width: 2.35rem; color: #b9ccaf; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lounge-emoji-btn:hover, .lounge-emoji-btn.active{
  color: #00ff00; border-color: rgba(0,255,0,0.4); background: rgba(0,255,0,0.08);
}
.lounge-emoji-btn .material-symbols-outlined{ font-size: 1.25rem; line-height: 1; }
.lounge-emoji-panel{
  display: none; flex-wrap: wrap; gap: 0.2rem; max-height: 9.5rem; overflow-y: auto;
  padding: 0.45rem; margin-top: 0.4rem; border-radius: 0.65rem;
  background: rgba(5,5,5,0.9); border: 1px solid rgba(255,255,255,0.1);
}
.lounge-emoji-panel.open{ display: flex; }
.lounge-emoji-panel button{
  width: 2rem; height: 2rem; border: none; background: transparent; border-radius: 0.35rem;
  font-size: 1.15rem; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.lounge-emoji-panel button:hover{ background: rgba(0,255,0,0.12); }
.verified-badge{
  display: inline-flex; align-items: center; justify-content: center;
  color: #00ff00; vertical-align: middle; margin-left: 0.12rem;
}
.verified-badge .material-symbols-outlined{
  font-size: 0.95rem !important; line-height: 1 !important;
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20;
  filter: drop-shadow(0 0 4px rgba(0,255,0,0.45));
}

.lounge-composer input[type="text"]{
  flex: 1; min-width: 0; background: rgba(5,5,5,0.75); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.65rem; padding: 0.6rem 0.75rem; color: #eaffde; font-size: 0.88rem;
}
.lounge-composer input:focus{ outline: none; border-color: rgba(0,255,0,0.45); box-shadow: 0 0 0 2px rgba(0,255,0,0.1); }
.lounge-send-btn{
  background: #00ff00; color: #050505; border: none; border-radius: 0.65rem;
  padding: 0 0.9rem; min-height: 2.55rem; height: 2.55rem;
  font-family: "Sora", system-ui, sans-serif; font-weight: 700; font-size: 0.82rem;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; flex-shrink: 0;
  box-shadow: 0 0 14px rgba(0,255,0,0.22); transition: transform 0.15s; line-height: 1;
}
.lounge-send-btn .material-symbols-outlined{
  font-size: 1.15rem !important; line-height: 1 !important; width: 1.15rem; height: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.lounge-send-btn .send-label{
  display: inline-flex; align-items: center; line-height: 1; letter-spacing: 0.02em;
}
.lounge-send-btn:hover:not(:disabled){ transform: translateY(-1px); }
.lounge-send-btn:disabled{ opacity: 0.5; cursor: not-allowed; }

.lounge-user-list{ flex: 1; overflow-y: auto; padding: 0.35rem 0.55rem 0.65rem; min-height: 0; }
.lounge-user-section{
  font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(0,255,0,0.7); padding: 0.45rem 0.25rem 0.2rem; margin-top: 0.2rem;
}
.lounge-user-section:first-child{ margin-top: 0; }
.lounge-user-row{
  display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.28rem; border-radius: 0.45rem;
}
.lounge-user-row:hover{ background: rgba(255,255,255,0.03); }
.lounge-user-row.is-offline{ opacity: 0.45; }
.lounge-user-name{ font-size: 0.76rem; font-weight: 600; color: #eaffde; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lounge-online-dot{ width: 6px; height: 6px; border-radius: 50%; background: #00ff00; box-shadow: 0 0 5px rgba(0,255,0,0.7); flex-shrink: 0; }
.lounge-offline-dot{ width: 6px; height: 6px; border-radius: 50%; background: rgba(185,204,175,0.35); flex-shrink: 0; }

.lounge-mob-online{
  display: flex; flex-direction: column; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
@media (min-width: 1024px){ .lounge-mob-online{ display: none !important; } }
.lounge-mob-online-head{
  display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.7rem 0.1rem;
}
.lounge-mob-online-list{
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0.3rem; overflow-x: auto;
  padding: 0.2rem 0.6rem 0.45rem; -webkit-overflow-scrolling: touch;
}
.lounge-mob-chip{
  display: inline-flex; align-items: center; gap: 0.25rem; font-size: 11px; color: #b9ccaf;
  padding: 0.22rem 0.45rem; border-radius: 9999px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); white-space: nowrap; flex-shrink: 0;
}

.lounge-gate{
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.1rem 0.9rem; gap: 0.6rem; min-height: 0; overflow-y: auto;
}
.lounge-gate.hidden,
#gate-register.hidden,
#gate-welcome.hidden,
#gate-active.hidden {
  display: none !important;
}
.lounge-gate h3{ font-family: "Sora", system-ui, sans-serif; font-weight: 800; font-size: clamp(1.1rem, 4vw, 1.35rem); color: #eaffde; margin: 0; }
.lounge-gate p{ color: #b9ccaf; font-size: 0.86rem; max-width: 26rem; margin: 0; line-height: 1.45; }
.lounge-gate input{
  width: 100%; max-width: 17rem; background: rgba(5,5,5,0.75); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.65rem; padding: 0.65rem 0.85rem; color: #eaffde; text-align: center; font-size: 0.9rem;
}
.lounge-gate input:focus{ outline: none; border-color: rgba(0,255,0,0.5); }
.lounge-gate-actions{ display: flex; flex-direction: column; gap: 0.4rem; width: 100%; max-width: 17rem; }
.lounge-btn-primary{
  background: #00ff00; color: #050505; border: none; border-radius: 0.65rem; padding: 0.65rem 1rem;
  font-family: "Sora", system-ui, sans-serif; font-weight: 700; cursor: pointer;
}
.lounge-btn-primary:hover{ filter: brightness(1.05); }
.lounge-btn-ghost{
  background: transparent; color: #b9ccaf; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.65rem; padding: 0.55rem 1rem; font-size: 0.84rem; cursor: pointer;
}
.lounge-btn-ghost:hover{ color: #eaffde; }
.lounge-error{ color: #ff8888; font-size: 0.78rem; min-height: 1.1em; }
.lounge-empty{
  text-align: center; color: rgba(185,204,175,0.4); font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.07em; padding: 1.4rem 0.7rem;
}

.lounge-me-bar{ display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: #b9ccaf; flex-wrap: wrap; }
.lounge-me-bar strong{ color: #00ff00; }
.lounge-logoff, .lounge-mod-btn{
  background: transparent; border: none; color: rgba(185,204,175,0.7); font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.06em; cursor: pointer; text-transform: uppercase; padding: 0.18rem 0.28rem;
}
.lounge-logoff:hover{ color: #ff8888; }
.lounge-mod-btn:hover{ color: #00ff00; }

.avatar-grid{
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.18rem;
  max-width: 100%;
  width: 100%;
  margin: 0.25rem 0;
}
@media (min-width: 420px){
  .avatar-grid{ grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
.avatar-grid.hidden {
  display: none !important;
}
.avatar-grid button{
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  max-height: 2.35rem;
  padding: 0;
  border-radius: 0.35rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,255,0,0.06);
  color: #00ff00;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-grid button.active, .avatar-grid button:hover{ border-color: #00ff00; background: rgba(0,255,0,0.15); }
.avatar-grid .material-symbols-outlined{ font-size: 1.35rem; line-height: 1; }

.mod-overlay{
  position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,0.72); backdrop-filter: blur(8px);
  display: none; align-items: flex-end; justify-content: center; padding: 0;
}
.mod-overlay.open{ display: flex; }
@media (min-width: 768px){
  .mod-overlay{ align-items: center; padding: 1rem; }
}
.mod-panel{
  background: #0c1609; border: 1px solid rgba(0,255,0,0.15); border-radius: 1rem 1rem 0 0;
  width: 100%; max-width: 540px; max-height: min(90dvh, 740px); display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
@media (min-width: 768px){
  .mod-panel{ border-radius: 1rem; max-height: min(86vh, 720px); }
}
.mod-panel-head{
  display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
}
.mod-panel-head h3{ margin: 0; font-family: "Sora", sans-serif; font-size: 1rem; color: #eaffde; }
.mod-tabs{ display: flex; gap: 0.2rem; padding: 0.45rem 0.7rem; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; overflow-x: auto; }
.mod-tab{
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.35rem 0.6rem; border-radius: 9999px; border: 1px solid transparent; background: transparent;
  color: #b9ccaf; cursor: pointer; white-space: nowrap;
}
.mod-tab.active{ color: #00ff00; border-color: rgba(0,255,0,0.35); background: rgba(0,255,0,0.08); }
.mod-body{ flex: 1; overflow-y: auto; padding: 0.8rem 1rem; min-height: 0; }
.mod-field{ margin-bottom: 0.7rem; }
.mod-field label{
  display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; color: #00ff00; margin-bottom: 0.28rem;
}
.mod-field input, .mod-field select, .mod-field textarea{
  width: 100%; background: rgba(5,5,5,0.7); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.5rem; padding: 0.5rem 0.65rem; color: #eaffde; font-size: 0.86rem;
}
.mod-field textarea{ min-height: 3.5rem; resize: vertical; }
.mod-actions{ display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.mod-actions button, .mod-danger-btn{
  font-family: "Sora", sans-serif; font-weight: 600; font-size: 0.78rem; padding: 0.45rem 0.8rem;
  border-radius: 0.5rem; border: none; cursor: pointer;
}
.mod-actions .primary{ background: #00ff00; color: #050505; }
.mod-actions .ghost{ background: rgba(255,255,255,0.06); color: #b9ccaf; border: 1px solid rgba(255,255,255,0.1); }
.mod-danger-btn{ background: rgba(220,60,60,0.15); color: #ff8888; border: 1px solid rgba(220,80,80,0.3); }
.mod-list-item{
  display: flex; flex-direction: column; gap: 0.18rem; padding: 0.5rem 0.55rem; border-radius: 0.5rem;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); margin-bottom: 0.35rem; font-size: 0.78rem;
}
.mod-list-item .row{ display: flex; justify-content: space-between; gap: 0.45rem; align-items: center; flex-wrap: wrap; }
.mod-list-item button{
  font-size: 10px; padding: 0.22rem 0.4rem; border-radius: 4px; border: 1px solid rgba(255,255,255,0.12);
  background: transparent; color: #b9ccaf; cursor: pointer;
}
.mod-list-item button:hover{ color: #ff8888; }
.mod-list-item button.danger{ color: #ff8888; border-color: rgba(220,80,80,0.35); }
.mod-list-item button.danger:hover{ background: rgba(220,60,60,0.15); }

#chat-overlay{ display: none !important; }

@media (max-width: 380px){
  .lounge-panel-head{ padding: 0.45rem 0.55rem; }
  .lounge-composer{ padding: 0.4rem 0.45rem; }
  .lounge-send-btn span.sm-hide{ display: none; }
  .lounge-me-bar strong{ max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-height: 560px){
  .lounge-gate{ padding: 0.75rem 0.75rem; gap: 0.4rem; justify-content: flex-start; padding-top: 1rem; }
  .lounge-gate .material-symbols-outlined.text-5xl{ font-size: 2rem !important; }
}


/* User list / me-bar small avatars — same optical center */
.lounge-user-row .lounge-avatar,
.lounge-me-bar .lounge-avatar{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.lounge-user-row .lounge-avatar .material-symbols-outlined{
  font-size: 0.8rem !important;
}


/* ========== AD KIT (readme.html) when soft-nav embedded ==========
   The standalone page loads its own Tailwind config + fonts.
   Inside #app-content those utilities would otherwise be missing. */
.adkit-embed-body {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  color: #eaffde;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.adkit-embed-body .bg-surface-dark { background-color: #0c1609 !important; }
.adkit-embed-body .bg-deep-obsidian { background-color: #050505 !important; }
.adkit-embed-body .text-primary-light { color: #eaffde !important; }
.adkit-embed-body .text-electric-green { color: #00ff00 !important; }
.adkit-embed-body .text-white\/70 { color: rgba(255,255,255,0.7) !important; }
.adkit-embed-body .text-white\/60 { color: rgba(255,255,255,0.6) !important; }
.adkit-embed-body .text-white\/40 { color: rgba(255,255,255,0.4) !important; }
.adkit-embed-body .border-white\/10 { border-color: rgba(255,255,255,0.1) !important; }
.adkit-embed-body .border-electric-green\/30 { border-color: rgba(0,255,0,0.3) !important; }
.adkit-embed-body .bg-electric-green { background-color: #00ff00 !important; }
.adkit-embed-body .bg-electric-green\/10 { background-color: rgba(0,255,0,0.1) !important; }
.adkit-embed-body .text-deep-obsidian { color: #050505 !important; }
.adkit-embed-body .font-sora {
  font-family: "Sora", system-ui, sans-serif !important;
}
.adkit-embed-body .font-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
}
.adkit-embed-body .font-hanken {
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
}
.adkit-embed-body .font-extrabold { font-weight: 800 !important; }
.adkit-embed-body .font-bold { font-weight: 700 !important; }
.adkit-embed-body .uppercase { text-transform: uppercase !important; }
.adkit-embed-body .tracking-tight { letter-spacing: -0.02em !important; }
.adkit-embed-body .tracking-widest { letter-spacing: 0.1em !important; }
.adkit-embed-body .tracking-wider { letter-spacing: 0.05em !important; }
.adkit-embed-body .leading-none { line-height: 1 !important; }
.adkit-embed-body .leading-relaxed { line-height: 1.625 !important; }
.adkit-embed-body .neon-glow {
  text-shadow: 0 0 12px rgba(0, 255, 0, 0.6);
}
.adkit-embed-body .box-glow {
  box-shadow: 0 0 25px rgba(0, 255, 0, 0.15);
}
.adkit-embed-body .pulse-dot {
  animation: pulse-animation 1.5s infinite;
}
/* Layout helpers the CDN would normally emit */
.adkit-embed-body .rounded-2xl { border-radius: 1rem !important; }
.adkit-embed-body .rounded-xl { border-radius: 0.75rem !important; }
.adkit-embed-body .rounded-lg { border-radius: 0.5rem !important; }
.adkit-embed-body .rounded-full { border-radius: 9999px !important; }
.adkit-embed-body .border { border-width: 1px !important; border-style: solid !important; }
.adkit-embed-body .border-t { border-top-width: 1px !important; border-top-style: solid !important; }
.adkit-embed-body .overflow-hidden { overflow: hidden !important; }
.adkit-embed-body .overflow-x-auto { overflow-x: auto !important; }
.adkit-embed-body .w-full { width: 100% !important; }
.adkit-embed-body .max-w-3xl { max-width: 48rem !important; }
.adkit-embed-body .h-16 { height: 4rem !important; }
.adkit-embed-body .p-8 { padding: 2rem !important; }
.adkit-embed-body .p-6 { padding: 1.5rem !important; }
.adkit-embed-body .p-5 { padding: 1.25rem !important; }
.adkit-embed-body .p-3 { padding: 0.75rem !important; }
.adkit-embed-body .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.adkit-embed-body .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.adkit-embed-body .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.adkit-embed-body .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.adkit-embed-body .mb-12 { margin-bottom: 3rem !important; }
.adkit-embed-body .mb-6 { margin-bottom: 1.5rem !important; }
.adkit-embed-body .mb-4 { margin-bottom: 1rem !important; }
.adkit-embed-body .mb-3 { margin-bottom: 0.75rem !important; }
.adkit-embed-body .mb-2 { margin-bottom: 0.5rem !important; }
.adkit-embed-body .mt-1 { margin-top: 0.25rem !important; }
.adkit-embed-body .mt-10 { margin-top: 2.5rem !important; }
.adkit-embed-body .pt-4 { padding-top: 1rem !important; }
.adkit-embed-body .space-y-8 > * + * { margin-top: 2rem !important; }
.adkit-embed-body .grid { display: grid !important; }
.adkit-embed-body .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
@media (min-width: 768px) {
  .adkit-embed-body .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
  .adkit-embed-body .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
.adkit-embed-body .gap-4 { gap: 1rem !important; }
.adkit-embed-body .gap-2 { gap: 0.5rem !important; }
.adkit-embed-body .flex { display: flex !important; }
.adkit-embed-body .inline-flex { display: inline-flex !important; }
.adkit-embed-body .inline-block { display: inline-block !important; }
.adkit-embed-body .block { display: block !important; }
.adkit-embed-body .items-center { align-items: center !important; }
.adkit-embed-body .justify-between { justify-content: space-between !important; }
.adkit-embed-body .relative { position: relative !important; }
.adkit-embed-body .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
.adkit-embed-body .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
.adkit-embed-body .text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.adkit-embed-body .text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
.adkit-embed-body .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.adkit-embed-body .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
.adkit-embed-body .text-\[10px\] { font-size: 10px !important; }
.adkit-embed-body textarea {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  color: #00ff00 !important;
  background: #050505 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  width: 100% !important;
  resize: none !important;
}
.adkit-embed-body iframe {
  max-width: 100%;
  background: #0c1609;
  border: 0;
  display: block;
}
/* Keep banner preview cards from collapsing into a messy stack */
.adkit-embed-body .space-y-8 > div {
  background-color: #0c1609;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 0 25px rgba(0, 255, 0, 0.12);
}
@media (max-width: 640px) {
  .adkit-embed-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .adkit-embed-body .text-3xl,
  .adkit-embed-body .sm\:text-4xl {
    font-size: 1.5rem !important;
    line-height: 1.9rem !important;
  }
}



/* Programme detail — upcoming + history/mix side-by-side (no inner scroll boxes) */
.show-dual-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 900px) {
  .show-dual-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    align-items: start;
  }
}

/* Share modal */
.share-overlay {
  position: fixed; inset: 0; z-index: 280;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.share-overlay.open { display: flex; }
.share-panel {
  background: #0c1609; border: 1px solid rgba(0,255,0,0.2);
  border-radius: 1rem; width: 100%; max-width: 22rem;
  padding: 1.1rem 1.15rem 1.25rem;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
}
.share-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.share-panel-head h3 {
  margin: 0; font-family: "Sora", sans-serif; font-size: 1.05rem; color: #eaffde;
}
.share-close {
  background: transparent; border: none; color: #b9ccaf; font-size: 1.5rem;
  line-height: 1; cursor: pointer; padding: 0 0.25rem;
}
.share-close:hover { color: #00ff00; }
.share-url {
  font-family: "JetBrains Mono", monospace; font-size: 10px; color: #b9ccaf;
  word-break: break-all; margin: 0 0 0.85rem; opacity: 0.85;
}
.share-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem;
}
.share-net-btn {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 0.65rem; border-radius: 0.55rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: #eaffde;
  text-decoration: none; font-size: 0.8rem; cursor: pointer;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.share-net-btn:hover {
  border-color: rgba(0,255,0,0.45); background: rgba(0,255,0,0.08); color: #00ff00;
}
.share-net-btn i { width: 1.1rem; text-align: center; }
.vibe-tooltip.tip-left::after {
  left: auto; right: calc(100% + 10px);
  top: 50%; bottom: auto;
  transform: translateY(-50%) scale(0.9);
}
.vibe-tooltip.tip-left:hover::after {
  transform: translateY(-50%) scale(1);
}

.share-panel { max-width: 26rem !important; }
.share-grid { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; }
.share-net-btn .share-net-icon,
.share-net-btn .material-symbols-outlined {
  font-size: 1.15rem !important;
  line-height: 1 !important;
  color: #00ff00;
  width: 1.25rem;
  text-align: center;
}
.share-native-btn {
  margin-top: 0.75rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(0,255,0,0.25);
  background: rgba(0,255,0,0.08);
  color: #00ff00;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.share-native-btn:hover { background: rgba(0,255,0,0.15); }


/* ========== RESPONSIVE PAGE GUTTERS ========== */
@media (max-width: 1024px) {
  .px-margin-desktop {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}
@media (max-width: 640px) {
  .px-margin-desktop {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  #vibe-player-bar .player-actions { gap: 0.15rem !important; }
  #vibe-player-bar .volume-wrap { display: none; }
}
@media (max-width: 380px) {
  #vibe-player-bar .player-actions > button,
  #vibe-player-bar .player-actions .icon-badge-wrap {
    width: 2.15rem !important;
    height: 2.15rem !important;
  }
}


/* ========== LIKES (DJ + Programme detail) ========== */
.vibe-like-row {
  display: flex;
  align-items: center;
  margin-top: 0.15rem;
}
.vibe-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem 0.4rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #b9ccaf;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}
.vibe-like-btn:hover {
  border-color: rgba(0, 255, 0, 0.45);
  color: #00ff00;
  background: rgba(0, 255, 0, 0.08);
}
.vibe-like-btn.is-liked {
  border-color: rgba(0, 255, 0, 0.55);
  color: #00ff00;
  background: rgba(0, 255, 0, 0.12);
  box-shadow: 0 0 14px rgba(0, 255, 0, 0.2);
}
.vibe-like-btn .vibe-like-icon {
  font-size: 1.15rem !important;
  line-height: 1 !important;
  color: inherit;
}
.vibe-like-btn.is-liked .vibe-like-icon {
  color: #00ff00;
}
.vibe-like-btn .vibe-like-count {
  min-width: 1ch;
  font-variant-numeric: tabular-nums;
}
.vibe-like-btn:disabled,
.vibe-like-btn[data-busy="1"] {
  opacity: 0.7;
  pointer-events: none;
}

/* ========== NEWS PAGE (full list + infinite scroll) ========== */
.news-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.15rem;
}
.news-meta-left {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  min-width: 0;
}
.news-source {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 14rem;
}
.news-source-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
}
.news-source-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #b9ccaf;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-time {
  white-space: nowrap;
}
.news-meta-right {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b9ccaf;
  opacity: 0.9;
  text-align: right;
  max-width: 50%;
}
.news-teaser {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-scroll-sentinel {
  display: flex;
  justify-content: center;
  padding: 2rem 0 3rem;
}
@media (max-width: 640px) {
  .news-meta-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .news-meta-right {
    max-width: 100%;
    text-align: left;
  }
}


/* ========== OPTICAL CENTERING — buttons, pills, icons ========== */
/* Force icons + labels to sit dead-centre in every interactive chrome piece */
.player-action-btn,
.header-action-icon,
.header-icon-row .icon-badge-wrap,
.header-icon-row .mobile-menu-btn,
#vibe-player-bar .player-actions > button,
#vibe-player-bar .player-actions .icon-badge-wrap,
.vibe-like-btn,
.share-fab,
.lounge-send-btn,
.lounge-emoji-btn,
.lounge-avatar,
.lounge-avatar-composer,
.lounge-mod-btn,
.lounge-logoff,
.lounge-btn-primary,
.lounge-btn-ghost,
.git-pill,
.git-btn,
.share-net-btn,
.mod-tab,
.mod-actions button,
.on-air-badge,
.chip,
.nav-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle;
}

.player-action-btn .material-symbols-outlined,
.header-action-icon.material-symbols-outlined,
.header-icon-row .material-symbols-outlined,
#vibe-player-bar .player-actions .material-symbols-outlined,
.vibe-like-btn .material-symbols-outlined,
.vibe-like-btn .vibe-like-icon,
.share-fab .material-symbols-outlined,
.lounge-send-btn .material-symbols-outlined,
.lounge-emoji-btn .material-symbols-outlined,
.lounge-avatar .material-symbols-outlined,
.git-btn .material-symbols-outlined,
.share-net-btn .material-symbols-outlined,
.share-net-btn i,
.verified-badge .material-symbols-outlined {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
}

/* Text + icon pairs (Send, Listen, pills) */
.lounge-send-btn,
.git-btn,
.share-native-btn {
  gap: 0.35rem;
}

/* Info-bar weather / clock already partially fixed — reinforce */
#info-bar,
#info-bar .flex,
#weather-display,
#weather-text {
  align-items: center !important;
}

/* Status pills (ON AIR / LIVE) */
.on-air-badge,
.lounge-status-pill,
.admin-badge,
.tv-live-badge,
.tv-card-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Mobile menu links — left-aligned text but vertically centred row */
.mobile-menu-link {
  display: flex !important;
  align-items: center !important;
}

/* Hitlist trend icons */
.hitlist-trend {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.hitlist-trend .material-symbols-outlined {
  line-height: 1 !important;
}


/* ========== DJ DETAIL — dual column + bio clamp + mix years ========== */
.dj-detail-page .dj-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
  align-items: start;
}
@media (min-width: 900px) {
  .dj-detail-page .dj-content-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
    gap: 2rem 2.5rem;
  }
}

/* Hero upcoming (under LIKE) — compact programme-style slots */
.dj-hero-upcoming {
  width: 100%;
  max-width: 22rem;
}
.dj-hero-upcoming .space-y-2 > div {
  transition: border-color 0.2s, background 0.2s;
}

/* Bio column — clamp on mobile, full on desktop */
.dj-bio-block {
  position: relative;
}
.dj-bio-text {
  transition: max-height 0.35s ease;
}
.dj-bio-more {
  display: none;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.65rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #00ff00;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.dj-bio-more:hover {
  color: #eaffde;
}
.dj-bio-more .material-symbols-outlined {
  font-size: 1.1rem !important;
  line-height: 1 !important;
}

/* Mobile / narrow: clamp body text + show Read more */
@media (max-width: 899px) {
  .dj-bio-block:not(.is-expanded) .dj-bio-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    max-height: 8.5em;
  }
  .dj-bio-block .dj-bio-more {
    display: inline-flex;
  }
  .dj-bio-block.is-expanded .dj-bio-text {
    display: block;
    -webkit-line-clamp: unset;
    max-height: none;
    overflow: visible;
  }
}
@media (min-width: 900px) {
  .dj-bio-block .dj-bio-more {
    display: none !important;
  }
  .dj-bio-block .dj-bio-text {
    display: block;
    -webkit-line-clamp: unset;
    max-height: none;
    overflow: visible;
  }
}

/* Mix archive year groups */
.dj-mix-year {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.dj-mix-year-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  background: transparent;
  border: none;
  color: #eaffde;
  cursor: pointer;
  font-family: "Sora", system-ui, sans-serif;
  text-align: left;
}
.dj-mix-year-toggle:hover {
  background: rgba(0, 255, 0, 0.05);
  color: #00ff00;
}
.dj-mix-year-label {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  flex: 1;
}
.dj-mix-year-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #b9ccaf;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 0.15rem 0.55rem;
}
.dj-mix-year-chevron {
  font-size: 1.25rem !important;
  line-height: 1 !important;
  color: #b9ccaf;
  transition: transform 0.25s ease;
}
.dj-mix-year.is-open .dj-mix-year-chevron {
  transform: rotate(180deg);
  color: #00ff00;
}
.dj-mix-year-body {
  padding: 0 0.65rem 0.75rem;
}
.dj-mix-year-body[hidden] {
  display: none !important;
}

.dj-col-bio .legal-content p {
  margin-bottom: 0.85rem;
}
.dj-col-side .dj-gigs-block + .dj-mix-archive {
  margin-top: 0.25rem;
}


/* ========== PAGE COMMENTS (Lounge-shared identity) ========== */
.vibe-comments {
  margin-top: 2.75rem;
  margin-bottom: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.vibe-cmt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.vibe-cmt-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #b9ccaf;
}
.vibe-cmt-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
  max-height: 28rem;
  overflow-y: auto;
  padding-right: 2px;
}
.vibe-cmt-list::-webkit-scrollbar { width: 5px; }
.vibe-cmt-list::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 0, 0.25);
  border-radius: 3px;
}
.vibe-cmt-empty {
  font-size: 0.9rem;
  color: rgba(185, 204, 175, 0.55);
  padding: 1.25rem 0.5rem;
  text-align: center;
}
.vibe-cmt-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 0.85rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}
.vibe-cmt-av {
  width: 2.15rem !important;
  height: 2.15rem !important;
  flex-shrink: 0;
}
.vibe-cmt-av .material-symbols-outlined {
  font-size: 1.1rem !important;
}
.vibe-cmt-body { min-width: 0; flex: 1; }
.vibe-cmt-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}
.vibe-cmt-nick {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: #00ff00;
}
.vibe-cmt-time {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: rgba(185, 204, 175, 0.55);
  margin-left: auto;
}
.vibe-cmt-text {
  font-size: 0.92rem;
  color: #eaffde;
  line-height: 1.45;
  word-break: break-word;
}
.vibe-cmt-del {
  border: none;
  background: transparent;
  color: rgba(255, 100, 100, 0.7);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 0.2rem;
}
.vibe-cmt-del:hover { color: #ff6666; }

.vibe-cmt-composer {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.03);
  padding: 0.85rem;
}
.vibe-cmt-gate {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.vibe-cmt-gate.is-known [data-role="nick"] {
  border-color: rgba(0, 255, 0, 0.25);
}
.vibe-cmt-gate input[type="text"],
.vibe-cmt-gate input[type="password"],
.vibe-cmt-row input[type="text"] {
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.55rem;
  color: #eaffde;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem;
  outline: none;
}
.vibe-cmt-gate input:focus,
.vibe-cmt-row input:focus {
  border-color: rgba(0, 255, 0, 0.45);
}
.vibe-cmt-gate input[data-role="nick"] { flex: 1; min-width: 10rem; }
.vibe-cmt-admin-wrap { flex: 1; min-width: 10rem; }
.vibe-cmt-admin-wrap input { width: 100%; }
.vibe-cmt-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.vibe-cmt-row input[data-role="msg"] {
  flex: 1;
  min-width: 0;
}
.vibe-cmt-av-btn {
  width: 2.4rem !important;
  height: 2.4rem !important;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.vibe-cmt-emoji {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding: 0.45rem;
  background: #050505;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.vibe-cmt-emoji button {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.2rem;
  line-height: 1;
  border-radius: 0.35rem;
}
.vibe-cmt-emoji button:hover { background: rgba(0, 255, 0, 0.1); }
.vibe-cmt-av-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr));
  gap: 0.35rem;
  margin-top: 0.5rem;
  max-height: 10rem;
  overflow-y: auto;
  padding: 0.45rem;
  background: #050505;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.vibe-cmt-av-grid button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: #b9ccaf;
  cursor: pointer;
}
.vibe-cmt-av-grid button:hover,
.vibe-cmt-av-grid button.active {
  border-color: rgba(0, 255, 0, 0.45);
  color: #00ff00;
  background: rgba(0, 255, 0, 0.08);
}
.vibe-cmt-av-grid .material-symbols-outlined {
  font-size: 1.15rem !important;
  line-height: 1 !important;
}
.vibe-cmt-err {
  color: #ff8888;
  font-size: 0.8rem;
  margin-top: 0.45rem;
  min-height: 1.1em;
}
.vibe-cmt-hint {
  margin: 0.55rem 0 0;
  font-size: 11px;
  color: rgba(185, 204, 175, 0.5);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.02em;
}
@media (max-width: 640px) {
  .vibe-cmt-row .send-label { display: none !important; }
}


/* ========== MOD DESK (internal) ========== */
.mod-desk-page { padding-bottom: 2rem; }
.mod-desk-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: rgba(5,5,5,0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mod-desk-row {
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 0.75rem;
  padding: 0.75rem 0.85rem; border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.025);
}
.mod-desk-tab.active {
  color: #00ff00; border-color: rgba(0,255,0,0.35); background: rgba(0,255,0,0.08);
}


/* ========== MIX TRACKLIST (DJ / programme / player overlay) ========== */
.mix-with-tl {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.mix-tl-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  margin-left: 0.25rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid rgba(0, 255, 0, 0.25);
  background: rgba(0, 255, 0, 0.06);
  color: #00ff00;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.mix-tl-toggle:hover,
.mix-tl-toggle.is-open {
  background: rgba(0, 255, 0, 0.12);
  border-color: rgba(0, 255, 0, 0.45);
}
.mix-tl-toggle .material-symbols-outlined {
  font-size: 1rem !important;
  line-height: 1 !important;
}
.mix-tracklist-body {
  margin: 0.15rem 0 0.35rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.35);
  max-height: 14rem;
  overflow-y: auto;
}
.mix-tracklist-ol {
  margin: 0;
  padding-left: 1.15rem;
  list-style: decimal;
}
.mix-tracklist-ol li {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #b9ccaf;
  padding: 0.15rem 0;
}
.mix-tracklist-ol li::marker {
  color: #00ff00;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
}

.mix-archive-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.7rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #eaffde;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.mix-archive-item:hover {
  border-color: rgba(0, 255, 0, 0.35);
  background: rgba(0, 255, 0, 0.05);
}
.mix-archive-item.is-playing {
  border-color: rgba(0, 255, 0, 0.5);
  background: rgba(0, 255, 0, 0.1);
}
.mix-archive-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: #00ff00;
  min-width: 1.5rem;
}
.mix-archive-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mix-archive-title {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mix-archive-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #b9ccaf;
  text-transform: uppercase;
}
.mix-archive-tl-badge {
  display: inline-flex;
  align-self: flex-start;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #00ff00;
  border: 1px solid rgba(0, 255, 0, 0.3);
  border-radius: 9999px;
  padding: 0.05rem 0.4rem;
}
.mix-archive-eq,
.mix-archive-play {
  font-size: 1.25rem !important;
  color: #00ff00;
  opacity: 0.85;
}
.mix-archive-now-tl {
  margin: 0.15rem 0 0.55rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 255, 0, 0.2);
  background: rgba(0, 255, 0, 0.05);
  max-height: 12rem;
  overflow-y: auto;
}
.mix-archive-now-tl-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00ff00;
  margin-bottom: 0.45rem;
}
.mix-archive-now-tl-head .material-symbols-outlined {
  font-size: 1rem !important;
}
.archive-edit-list textarea,
.arch-tracklist {
  width: 100%;
  box-sizing: border-box;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  color: #eaffde;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 0.55rem 0.65rem;
  resize: vertical;
  min-height: 5rem;
}