/* MixLab Studio Theme
   Premium near-black + metallic gold.
   Shared visual language for the entire MixLab platform.
*/

:root {
  --ml-bg: #08090b;
  --ml-bg-soft: #0d0f12;
  --ml-surface: #12151a;
  --ml-surface-elevated: #191d23;
  --ml-surface-glass: rgba(18, 21, 26, 0.88);
  --ml-border: #292e36;
  --ml-border-soft: rgba(212, 176, 58, 0.18);
  --ml-gold: #d4b03a;
  --ml-gold-bright: #e4c65c;
  --ml-gold-soft: #b89529;
  --ml-text: #f5f3ed;
  --ml-text-muted: #aaa79d;
  --ml-text-dim: #77766f;
  --ml-focus: #f0dc91;
  --ml-danger: #e07070;
  --ml-success: #6cbf6c;
  --ml-radius: 10px;
  --ml-radius-small: 7px;
  --ml-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --ml-glow: 0 0 28px rgba(212, 176, 58, 0.10);
  --ml-font-display: 'Cinzel', Georgia, serif;
  --ml-font-body: 'Space Grotesk', system-ui, sans-serif;
  --ml-nav-height: 3.5rem;
}

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

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 50% -10%, rgba(212, 176, 58, 0.06), transparent 35%),
    var(--ml-bg);
  color: var(--ml-text);
  font-family: var(--ml-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: rgba(212, 176, 58, 0.28);
  color: var(--ml-text);
}

.studio-ambient-bg {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(201, 162, 39, 0.075), transparent 42%),
    radial-gradient(ellipse at 85% 100%, rgba(201, 162, 39, 0.045), transparent 40%),
    linear-gradient(180deg, #090a0c 0%, #08090b 100%);
}

/* ── Shared scene chrome ─────────────────────────────────── */

.studio-scene {
  display: none;
  min-height: calc(100vh - var(--ml-nav-height));
  padding: 2rem 1.25rem 3rem;
}

.studio-scene.active {
  display: block;
  opacity: 1;
}

.studio-scene.hidden {
  display: none;
}

.studio-scene > h1,
.studio-scene > h2,
.studio-scene > .scene-heading {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.studio-scene h1,
.studio-scene h2,
.studio-scene h3 {
  line-height: 1.2;
}

.studio-scene h1 {
  font-family: var(--ml-font-display);
  color: var(--ml-text);
  letter-spacing: 0.025em;
}

.studio-scene h2,
.studio-scene h3 {
  color: var(--ml-gold);
}

.studio-scene p {
  color: var(--ml-text-muted);
}

.hidden {
  display: none !important;
}

/* ── Front Door ──────────────────────────────────────────── */

.door-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  text-align: center;
  gap: 0.6rem;
}

.door-hero h1 {
  font-family: var(--ml-font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 4rem);
  letter-spacing: 0.12em;
  color: var(--ml-gold);
  margin: 0.5rem 0 0;
}

.door-hero p {
  margin: 0;
  color: var(--ml-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.brand-logo-img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(212, 176, 58, 0.18));
}

#btn-open-door,
#btn-generate-pass,
#btn-enter-green-room,
#btn-chat-send,
#btn-onair-send,
#btn-audio-play,
#btn-audio-pause {
  min-height: 44px;
  font-family: var(--ml-font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    rgba(212, 176, 58, 0.06),
    rgba(212, 176, 58, 0.02)
  );
  color: var(--ml-gold-bright);
  border: 1px solid var(--ml-gold-soft);
  border-radius: var(--ml-radius-small);
  padding: 0.75rem 1.35rem;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

#btn-open-door:hover,
#btn-generate-pass:hover,
#btn-enter-green-room:hover,
#btn-chat-send:hover,
#btn-onair-send:hover,
#btn-audio-play:hover,
#btn-audio-pause:hover {
  background: var(--ml-gold);
  color: var(--ml-bg);
  border-color: var(--ml-gold-bright);
  box-shadow: 0 0 24px rgba(212, 176, 58, 0.18);
  transform: translateY(-1px);
}

#btn-open-door:active,
#btn-generate-pass:active,
#btn-enter-green-room:active,
#btn-chat-send:active,
#btn-onair-send:active,
#btn-audio-play:active,
#btn-audio-pause:active {
  transform: translateY(0);
}

#btn-open-door:focus-visible,
#btn-generate-pass:focus-visible,
#btn-enter-green-room:focus-visible,
#btn-chat-send:focus-visible,
#btn-onair-send:focus-visible,
#btn-audio-play:focus-visible,
#btn-audio-pause:focus-visible,
.studio-nav-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ml-focus);
  outline-offset: 3px;
}

/* ── MixLab Pass ─────────────────────────────────────────── */

#scene-card {
  max-width: 480px;
  margin: 2rem auto;
  background: linear-gradient(
    145deg,
    rgba(25, 29, 35, 0.96),
    rgba(13, 15, 18, 0.96)
  );
  border: 1px solid var(--ml-border);
  border-radius: 14px;
  padding: 2rem;
  box-shadow: var(--ml-shadow);
}

#scene-card h2 {
  font-family: var(--ml-font-display);
  color: var(--ml-gold);
  text-align: center;
  letter-spacing: 0.04em;
}

#form-member-pass label {
  display: block;
  margin: 1rem 0 0.4rem;
  color: var(--ml-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

#form-member-pass input,
#form-member-pass select,
#input-chat-message,
#input-onair-message {
  width: 100%;
  padding: 0.78rem 0.9rem;
  background: var(--ml-bg-soft);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-small);
  color: var(--ml-text);
  font-family: var(--ml-font-body);
  font-size: 1rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

#form-member-pass input:hover,
#form-member-pass select:hover,
#input-chat-message:hover,
#input-onair-message:hover {
  border-color: #3a3f48;
}

#form-member-pass input:focus,
#form-member-pass select:focus,
#input-chat-message:focus,
#input-onair-message:focus {
  border-color: var(--ml-gold-soft);
  background: #0f1115;
  box-shadow: 0 0 0 3px rgba(212, 176, 58, 0.08);
  outline: none;
}

#member-card {
  background:
    linear-gradient(
      145deg,
      rgba(212, 176, 58, 0.08),
      rgba(25, 29, 35, 0.96)
    );
  border: 1px solid var(--ml-gold-soft);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  text-align: center;
  box-shadow: var(--ml-glow);
}

#member-card img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

/* ── Green Room / ON AIR ───────────────────────────────── */

.room-grid,
.on-air-grid {
  display: grid;
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 800px) {
  .room-grid {
    grid-template-columns: 280px 1fr;
  }

  .on-air-grid {
    grid-template-columns: 1fr 320px;
  }
}

.studio-rack-panel,
.studio-chat-panel,
.stream-container,
.on-air-chat-panel {
  background:
    linear-gradient(
      145deg,
      rgba(20, 23, 29, 0.96),
      rgba(13, 15, 18, 0.96)
    );
  border: 1px solid var(--ml-border);
  border-radius: 12px;
  padding: 1.2rem 1.25rem;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}

.studio-rack-panel:hover,
.studio-chat-panel:hover,
.stream-container:hover,
.on-air-chat-panel:hover {
  border-color: var(--ml-border-soft);
}

.studio-rack-panel h3,
.studio-chat-panel h3,
.stream-container h3 {
  font-family: var(--ml-font-display);
  color: var(--ml-gold);
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  letter-spacing: 0.035em;
}

#chat-stream-container,
#onair-chat-stream {
  height: 300px;
  overflow-y: auto;
  margin-bottom: 0.8rem;
  padding: 0.7rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 176, 58, 0.035), transparent 45%),
    var(--ml-bg);
  border-radius: var(--ml-radius-small);
  border: 1px solid var(--ml-border);
  scrollbar-width: thin;
  scrollbar-color: var(--ml-border) transparent;
}

.chat-message {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  padding: 0.55rem 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  font-size: 0.95rem;
}

.chat-message:last-child {
  border-bottom: 0;
}

.chat-author {
  color: var(--ml-gold-bright);
  font-weight: 600;
}

.chat-body {
  color: var(--ml-text);
  flex: 1 1 auto;
}

.chat-time {
  color: var(--ml-text-dim);
  font-size: 0.72rem;
}

/*
 * Chat identity (avatar + author name), reusing the same
 * verified LIVE Profile/avatar architecture used elsewhere on the
 * site (profiles.avatar via the safe member_profiles_public
 * projection) - no separate identity system. Grouped in its own
 * flex wrapper so avatar+name move together as one unit whether
 * they sit inline with the rest of the message (desktop, below) or
 * stack above it (mobile, in the responsive block further down).
 */
.chat-identity {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.chat-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--ml-border-soft);
  background: var(--ml-surface);
}

.chat-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ml-gold-bright);
}

#form-chat-send,
#form-onair-chat-send {
  display: flex;
  gap: 0.5rem;
}

#form-chat-send input,
#form-onair-chat-send input {
  flex: 1;
  min-width: 0;
}

#presence-roster-list,
#onair-presence-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.presence-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  font-size: 0.9rem;
}

.presence-name {
  color: var(--ml-text);
  font-weight: 500;
}

.presence-role {
  color: var(--ml-text-muted);
  font-size: 0.78rem;
}

/* ── Studio Navigation ─────────────────────────────────── */

#nav-mount {
  position: sticky;
  top: 0;
  z-index: 100;
}

.studio-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1.25rem;
  min-height: var(--ml-nav-height);
  padding: 0.55rem 1rem;
  background: rgba(8, 9, 11, 0.90);
  border-bottom: 1px solid rgba(212, 176, 58, 0.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

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

.studio-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.studio-nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-family: var(--ml-font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--ml-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ml-radius-small);
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.studio-nav-btn:hover:not(:disabled) {
  color: var(--ml-text);
  border-color: var(--ml-border);
  background: rgba(255, 255, 255, 0.025);
}

.studio-nav-btn.is-active {
  color: var(--ml-gold-bright);
  border-color: var(--ml-gold-soft);
  background: rgba(201, 162, 39, 0.09);
  box-shadow: inset 0 0 18px rgba(212, 176, 58, 0.035);
}

.studio-nav-btn.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.studio-nav-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}

.studio-nav-btn.is-active .studio-nav-indicator {
  background: var(--ml-gold);
  box-shadow: 0 0 7px var(--ml-gold);
}

.studio-nav-status {
  font-size: 0.78rem;
  color: var(--ml-text-muted);
}

.studio-nav-status-room {
  color: var(--ml-gold);
  font-weight: 600;
  margin-left: 0.35rem;
  letter-spacing: 0.04em;
}

/* ── Generic shared layouts ─────────────────────────────── */

.operations-layout,
.membership-layout,
.learning-layout,
.booking-layout,
.community-layout,
.recognition-layout,
.notifications-layout,
.experience-layout,
.wallet-layout,
.events-layout,
.showcase-layout,
.studio-ops-layout {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.operations-layout section,
.membership-layout section,
.learning-layout section,
.booking-panel,
.community-layout section,
.community-report-form,
.recognition-layout section,
.notifications-layout section,
.notifications-toolbar,
.experience-layout section,
.wallet-layout section,
.events-layout section,
.events-layout li,
.showcase-layout section,
.studio-ops-layout section {
  background:
    linear-gradient(
      145deg,
      rgba(20, 23, 29, 0.96),
      rgba(13, 15, 18, 0.96)
    );
  border: 1px solid var(--ml-border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
}

.operations-layout section:hover,
.membership-layout section:hover,
.learning-layout section:hover,
.booking-panel:hover,
.community-layout section:hover,
.community-report-form:hover,
.recognition-layout section:hover,
.notifications-layout section:hover,
.notifications-toolbar:hover,
.experience-layout section:hover,
.wallet-layout section:hover,
.events-layout section:hover,
.events-layout li:hover,
.showcase-layout section:hover,
.studio-ops-layout section:hover {
  border-color: var(--ml-border-soft);
}

.operations-layout h1,
.membership-layout h1,
.recognition-layout h1,
.notifications-layout h1,
.community-layout h1,
.experience-layout h1,
.wallet-layout h1,
.events-layout h1 {
  color: var(--ml-text);
  font-family: var(--ml-font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0 0 0.5rem;
}

.operations-layout h2,
.membership-layout h2,
.learning-layout h2,
.recognition-layout h2,
.notifications-layout h2,
.community-layout h2,
.experience-layout h2,
.wallet-layout h2,
.events-layout h2,
.showcase-layout h2,
.studio-ops-layout h2,
.forum-layout h2 {
  color: var(--ml-gold);
  font-family: var(--ml-font-display);
  font-size: clamp(1.35rem, 3vw, 2rem);
  margin: 0 0 0.85rem;
}

/* ── Shared forms ───────────────────────────────────────── */

.operations-layout input,
.operations-layout select,
.membership-layout input,
.membership-layout select,
.community-layout input,
.community-layout select,
.community-layout textarea,
.forum-layout input,
.forum-layout select,
.forum-layout textarea {
  width: 100%;
  background: var(--ml-bg);
  color: var(--ml-text);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-small);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.operations-layout input:focus,
.operations-layout select:focus,
.membership-layout input:focus,
.membership-layout select:focus,
.community-layout input:focus,
.community-layout select:focus,
.community-layout textarea:focus,
.forum-layout input:focus,
.forum-layout select:focus,
.forum-layout textarea:focus {
  outline: none;
  border-color: var(--ml-gold-soft);
  box-shadow: 0 0 0 3px rgba(212, 176, 58, 0.07);
}

.operations-layout button,
.membership-layout button,
.learning-layout button,
.learning-layout li button,
.showcase-layout button,
.studio-ops-layout button,
.notifications-layout button,
.community-layout button,
.experience-layout button,
.wallet-layout button,
.events-layout button,
.forum-layout button {
  min-height: 44px;
  background: transparent;
  color: var(--ml-gold-bright);
  border: 1px solid var(--ml-gold-soft);
  border-radius: var(--ml-radius-small);
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

.operations-layout button:hover,
.membership-layout button:hover,
.learning-layout button:hover,
.learning-layout li button:hover,
.showcase-layout button:hover,
.studio-ops-layout button:hover,
.notifications-layout button:hover,
.community-layout button:hover,
.experience-layout button:hover,
.wallet-layout button:hover,
.events-layout button:hover,
.forum-layout button:hover {
  background: var(--ml-gold);
  color: var(--ml-bg);
  border-color: var(--ml-gold);
  transform: translateY(-1px);
}

/* ── Booking ────────────────────────────────────────────── */

.booking-header h2 {
  font-family: var(--ml-font-display);
  color: var(--ml-gold);
  margin: 0 0 0.35rem;
}

.booking-status,
.booking-empty,
.booking-empty-item {
  color: var(--ml-text-muted);
  margin: 0;
  font-size: 0.9rem;
}

.booking-services-list,
.booking-slots-list,
.booking-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.booking-service-btn,
.booking-slot-btn,
.booking-cancel-btn {
  font-family: var(--ml-font-body);
  background: var(--ml-bg);
  color: var(--ml-text);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-small);
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.booking-service-btn:hover,
.booking-slot-btn:hover {
  border-color: var(--ml-gold-soft);
  background: rgba(212, 176, 58, 0.04);
}

.booking-service-item.is-selected .booking-service-btn {
  border-color: var(--ml-gold);
  background: rgba(201, 162, 39, 0.08);
}

.booking-service-name {
  display: block;
  font-weight: 600;
  color: var(--ml-gold);
}

.booking-service-meta,
.booking-service-desc {
  display: block;
  font-size: 0.85rem;
  color: var(--ml-text-muted);
}

.booking-history-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  font-size: 0.9rem;
}

.booking-history-title {
  font-weight: 600;
  color: var(--ml-text);
}

.booking-history-when,
.booking-history-status {
  color: var(--ml-text-muted);
}

.booking-cancel-btn {
  width: auto;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  color: var(--ml-gold);
  border-color: var(--ml-gold-soft);
}

.booking-feedback {
  padding: 0.65rem 1rem;
  background: var(--ml-surface-elevated);
  border: 1px solid var(--ml-gold-soft);
  border-radius: var(--ml-radius-small);
  font-size: 0.9rem;
}

.booking-feedback.hidden {
  display: none;
}

/* ── Learning / Lists ───────────────────────────────────── */

.learning-layout ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.learning-layout li {
  background: var(--ml-surface);
  border: 1px solid var(--ml-border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

/* ── Recognition / Notifications / Community ────────────── */

.recognition-layout,
.notifications-layout,
.experience-layout,
.wallet-layout,
.events-layout,
.showcase-layout,
.studio-ops-layout {
  gap: 1.25rem;
}

.community-report-list,
.community-notes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.community-report-list li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Stream Player ──────────────────────────────────────── */

.stream-player-root {
  width: 100%;
  min-height: 240px;
  background: #000;
  border-radius: var(--ml-radius);
  overflow: hidden;
}

.stream-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(212, 176, 58, 0.05), transparent 45%),
    var(--ml-bg);
  border: 1px dashed var(--ml-border);
  border-radius: var(--ml-radius);
  text-align: center;
}

.stream-placeholder-title {
  font-family: var(--ml-font-display);
  color: var(--ml-gold);
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem;
}

.stream-placeholder-body {
  color: var(--ml-text-muted);
  margin: 0;
  font-size: 0.9rem;
}

/* ── Network Toast ──────────────────────────────────────── */

.network-toast {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: rgba(25, 29, 35, 0.95);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-small);
  font-size: 0.85rem;
  z-index: 200;
  box-shadow: var(--ml-shadow);
  backdrop-filter: blur(10px);
}

.network-toast.hidden {
  display: none;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ml-gold);
}

.network-toast.is-offline .status-dot {
  background: var(--ml-danger);
}

.network-toast.is-online .status-dot {
  background: var(--ml-success);
}

.network-toast.is-reconnecting .status-dot {
  background: var(--ml-gold);
}

/* ── Feedback ───────────────────────────────────────────── */

.ui-feedback {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90vw;
  padding: 0.7rem 1.1rem;
  background: rgba(25, 29, 35, 0.97);
  border: 1px solid var(--ml-gold-soft);
  border-radius: var(--ml-radius-small);
  color: var(--ml-text);
  z-index: 300;
  font-size: 0.9rem;
  box-shadow: var(--ml-shadow);
  backdrop-filter: blur(10px);
}

/* ── Accessibility ─────────────────────────────────────── */

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 1000;
  padding: 0.6rem 1rem;
  background: var(--ml-gold);
  color: var(--ml-bg);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--ml-radius-small);
}

.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--ml-focus);
  outline-offset: 3px;
}

.form-field {
  margin-bottom: 0.75rem;
}

.field-error {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: #f0a0a0;
}

.field-error[hidden] {
  display: none;
}

input.is-invalid,
select.is-invalid {
  border-color: #c44;
}

/* ── Front Door Video ───────────────────────────────────── */

.front-door-wrapper {
  position: fixed;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 1000;
}

.front-door-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.front-door-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 3rem 1.5rem 4rem;
  background:
    radial-gradient(
      circle at center,
      rgba(10, 10, 12, 0.30) 0%,
      rgba(10, 10, 12, 0.78) 100%
    );
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: auto;
  cursor: pointer;
}

.front-door-overlay.fade-to-black {
  opacity: 0;
  pointer-events: none;
}

.front-door-door-hitbox {
  position: absolute;
  left: 170px;
  top: 420px;
  width: 28px;
  height: 38px;
  cursor: pointer;
  z-index: 100;
  background: transparent;
}

.front-door-branding {
  display: none;
}

/*
 * Emergency fallback only - shown by frontDoor.js when the intro
 * video genuinely fails to play (handleVideoError). The video is
 * normally the Front Door's only visual content; this rule exists
 * so a video failure never leaves the viewport fully blank. Reuses
 * the same logo/title/tagline markup that already sits in the DOM,
 * styled to match the site's existing dark/gold language rather
 * than falling back to unstyled browser defaults.
 */
.front-door-branding.video-failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  text-align: center;
  color: var(--ml-gold);
}

.front-door-branding.video-failed .front-door-logo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--ml-border-soft);
}

.front-door-branding.video-failed .front-door-title {
  margin: 0;
  font-size: 2rem;
  letter-spacing: 0.18em;
  color: var(--ml-gold-bright);
}

.front-door-branding.video-failed .front-door-subtitle {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ── Forum Intro Video ──────────────────────────────────── */
/*
 * Scoped to the Forum scene only (not a full-viewport takeover like
 * Front Door) - it fills the scene's own content area and is the
 * single click/tap/Enter activation surface. No Skip/Enter button.
 */

.forum-intro-overlay {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: min(70vh, 560px);
  overflow: hidden;
  border-radius: var(--ml-radius);
  border: 1px solid var(--ml-border-soft);
  background-color: #000;
  cursor: pointer;
  opacity: 1;
  padding-bottom: 1.25rem;
  transition: opacity 0.4s ease;
}

.forum-intro-overlay.is-complete {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  height: 0;
  min-height: 0;
  overflow: hidden;
}

.forum-intro-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.forum-intro-hint {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0.5rem 1.1rem;
  color: var(--ml-text);
  background: rgba(10, 10, 12, 0.55);
  border: 1px solid var(--ml-border-soft);
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  pointer-events: none;
}

/* ── Chat wrapping ──────────────────────────────────────── */

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

.chat-author,
.chat-body {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-body {
  min-width: 0;
}

/* ── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ── Responsive ─────────────────────────────────────────── */

@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .studio-nav {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

@media (max-width: 768px) {
  .studio-nav-list {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
  }

  .studio-nav-btn {
    flex: 0 0 auto !important;
  }

  /*
   * The Profile hub subnav (Profile/Membership/MixLab Pass/
   * Experience/Recognition/Community/Studio - see profile.js's
   * ensureSubNav()) previously had no CSS of its own at any
   * viewport width, so its seven text buttons fell back to
   * default inline-block wrapping with no scroll affordance -
   * unlike the primary .studio-nav-list above, which already
   * uses this exact horizontal-scroll treatment on mobile.
   * Mirrors that established pattern; desktop is unaffected
   * since this lives inside the existing max-width: 768px block.
   */
  .profile-hub-subnav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .profile-hub-subnav-btn {
    flex: 0 0 auto;
  }

  .studio-scene {
    padding: 1.25rem 0.85rem 2rem;
  }

  .operations-layout section,
  .membership-layout section,
  .learning-layout section,
  .booking-panel,
  .community-layout section,
  .community-report-form,
  .recognition-layout section,
  .notifications-layout section,
  .notifications-toolbar,
  .experience-layout section,
  .wallet-layout section,
  .events-layout section,
  .events-layout li,
  .showcase-layout section,
  .studio-ops-layout section,
  .forum-layout section {
    padding: 1.15rem;
  }

  .community-layout {
    padding: 0.25rem;
    gap: 1rem;
  }

  .community-layout form {
    gap: 0.65rem;
  }

  .community-layout button {
    width: 100%;
    align-self: stretch;
  }

  .community-report-list li {
    flex-direction: column;
    align-items: stretch;
  }

  .community-participation-form {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .studio-nav-label {
    font-size: 0.72rem;
  }

  .studio-nav-status {
    width: 100%;
  }

  #chat-stream-container,
  #onair-chat-stream {
    height: 220px;
  }

  /*
   * Chat identity on mobile: the base desktop layout puts avatar,
   * name, message and time inline in one wrapping flex row. On a
   * narrow phone viewport that reads as cramped, so this switches
   * each message to a compact stacked layout instead:
   *   [avatar] Name
   *   message text
   *   time
   * Only the layout direction changes here - same DOM, same avatar
   * resolution, same send/receive/delete behaviour. Desktop is
   * unaffected; this lives inside the existing max-width: 480px
   * block.
   */
  .chat-message {
    flex-direction: column;
    align-items: flex-start;
  }

  .chat-avatar {
    width: 22px;
    height: 22px;
  }

  .chat-avatar-placeholder {
    font-size: 0.6rem;
  }

  .chat-body {
    width: 100%;
  }

  .front-door-overlay {
    padding: 2.5rem 1rem 3rem;
  }

  /*
   * Front Door video: real iPhone 13 evidence showed the base
   * object-fit: cover rule cropping most of the frame's width
   * away in a narrow portrait viewport - the wrapper is a true
   * fullscreen (100dvh) takeover, so a landscape 16:9 video
   * scaled to cover a tall/narrow box loses the vast majority of
   * its width. Switching to object-fit: contain on mobile shows
   * the full 1280x720 frame with no crop and no distortion; the
   * wrapper's existing solid #000 background (unchanged) provides
   * the letterboxing with no visible seam. Desktop is unaffected -
   * this rule only applies inside the existing max-width: 480px
   * block. No other Front Door rule, no JS behaviour, no
   * activation/audio/navigation logic, and no video asset is
   * touched.
   */
  .front-door-media {
    object-fit: contain;
  }

  /*
   * Front Door letterbox polish: switching to object-fit: contain
   * (above) removed the crop, but a 16:9 frame fit into a true
   * 100dvh portrait box leaves large empty bands above and below
   * the video. Real iPhone evidence (both the original report and
   * a follow-up physical screenshot) showed these bands still
   * reading as plain black voids rather than an intentional
   * cinematic frame, even with the original single centered glow.
   *
   * Reverting to object-fit: cover was investigated and rejected
   * again here: the video's branding content (neon sign + MIXLAB
   * wordmark) occupies roughly two-thirds of the frame's width and
   * sits off-centre (a wide margin on the left, almost none on the
   * right) - measured directly from the letterboxed frame. Cropping
   * enough to fill a narrow portrait viewport under `cover` would
   * cut straight through that branding on the tight side, not just
   * the empty brick-wall background, which is worse than the
   * current letterboxing. No source video is touched.
   *
   * Instead this widens the existing centered glow and adds a soft
   * gold "stage light" gradient fading in from the very top and
   * bottom edges of the viewport, independent of exactly where the
   * video's letterbox bands land on a given device. This does not
   * add any new element, does not change the video itself, and does
   * not touch object-fit/crop - it only makes the space around the
   * video read as a deliberate dark-stage backdrop instead of a
   * rendering gap. Mobile-only - this rule lives inside the
   * existing max-width: 480px block and does not affect desktop,
   * which still uses object-fit: cover with a flat #000 wrapper as
   * before.
   */
  .front-door-wrapper {
    background:
      linear-gradient(
        to bottom,
        rgba(212, 176, 58, 0.16),
        transparent 24%
      ),
      linear-gradient(
        to top,
        rgba(212, 176, 58, 0.16),
        transparent 24%
      ),
      radial-gradient(
        circle at 50% 50%,
        rgba(212, 176, 58, 0.18),
        transparent 65%
      ),
      #000;
  }

  /*
   * Forum intro video: the base rule uses a viewport-height-driven
   * box (min-height: min(70vh, 560px)) sized for desktop, where a
   * 16:9 source under object-fit: cover only needs a modest side
   * crop. On a narrow phone viewport that same tall box forces a
   * ~60%+ horizontal crop of the video, cutting the intro's text
   * off at both edges. Source video is confirmed 1280x720 (16:9).
   * Switching the box to that same 16:9 aspect ratio (instead of a
   * tall vh-based height) lets object-fit: contain render the full
   * frame with no cropping and no distortion - the box now matches
   * the video's native ratio, so this is effectively letterbox-free
   * on portrait phones. Front Door is intentionally left unchanged:
   * it's a true fullscreen (100dvh) cover takeover, and introducing
   * letterboxing there would break the intended edge-to-edge
   * cinematic full-bleed presentation. Desktop is unaffected - this
   * rule only applies inside the existing max-width: 480px block.
   */
  .forum-intro-overlay {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .forum-intro-media {
    object-fit: contain;
  }

  #scene-card {
    padding: 1.35rem;
    margin-top: 1rem;
  }
}

/* Minimum touch targets */
.studio-nav-btn,
.booking-slot-btn,
.booking-cancel-btn,
#btn-chat-send,
#btn-onair-send {
  min-height: 44px;
}

/* =========================================================
   MIXLAB VISUAL UPGRADE
   Green Room - premium broadcast environment
   ========================================================= */

/* ── Core atmosphere ───────────────────────────────────── */

body {
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(212, 176, 58, 0.12),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 55%,
      rgba(212, 176, 58, 0.035),
      transparent 35%
    ),
    #060708;
}

/* ── Scene framing ────────────────────────────────────── */

.studio-scene {
  position: relative;
  min-height: calc(100vh - 120px);
  padding: 3.5rem clamp(1.25rem, 4vw, 4rem) 5rem;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.012),
      transparent 22%
    );
}

.studio-scene::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 50%;
  width: min(1100px, 82%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 176, 58, 0.5),
    transparent
  );
  opacity: 0.7;
  pointer-events: none;
}

/* Subtle MixLab watermark */

.studio-scene::after {
  content: "";
  position: absolute;
  top: 2rem;
  right: 4vw;
  width: 120px;
  height: 55px;
  background: url("../brand/mixlab-logo.jpg") center / contain no-repeat;
  opacity: 0.055;
  filter: grayscale(1);
  pointer-events: none;
}

/* ── Navigation ────────────────────────────────────────── */

.studio-nav {
  position: relative;
  z-index: 5;
  min-height: 4.5rem;
  padding: 0.65rem 1.5rem;
  background:
    linear-gradient(
      180deg,
      rgba(8, 9, 10, 0.99),
      rgba(5, 6, 7, 0.97)
    );
  border-bottom: 1px solid rgba(212, 176, 58, 0.18);
  box-shadow:
    0 12px 45px rgba(0, 0, 0, 0.55);
}

.studio-nav-list {
  gap: 0.15rem;
}

.studio-nav-btn {
  position: relative;
  min-height: 42px;
  padding: 0.55rem 0.9rem;
  border-radius: 5px;
  letter-spacing: 0.10em;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.studio-nav-btn:hover:not(:disabled) {
  color: var(--ml-gold-bright);
  background: rgba(212, 176, 58, 0.035);
  border-color: rgba(212, 176, 58, 0.18);
}

.studio-nav-btn.is-active {
  background:
    linear-gradient(
      180deg,
      rgba(212, 176, 58, 0.14),
      rgba(212, 176, 58, 0.035)
    );
  border-color: rgba(212, 176, 58, 0.55);
  box-shadow:
    inset 0 0 24px rgba(212, 176, 58, 0.035);
}

.studio-nav-btn.is-active::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -0.66rem;
  height: 2px;
  background: var(--ml-gold);
  box-shadow: 0 0 12px rgba(212, 176, 58, 0.65);
}

/* ── Room introduction line ───────────────────────────── */

.studio-scene > .scene-breadcrumb,
.studio-scene > .room-location,
.studio-scene > p:first-of-type {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Green Room composition ───────────────────────────── */

.room-grid {
  position: relative;
  z-index: 1;
  width: min(1220px, 100%);
  max-width: none;
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: minmax(250px, 0.34fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: stretch;
}

/* ── Shared panel architecture ───────────────────────── */

.studio-rack-panel,
.studio-chat-panel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      rgba(19, 21, 25, 0.99),
      rgba(7, 8, 10, 0.99)
    );
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255,255,255,0.025);
}

.studio-rack-panel::before,
.studio-chat-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(212, 176, 58, 0.8) 50%,
      transparent 100%
    );
}

.studio-rack-panel::after,
.studio-chat-panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 11px;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.025),
      transparent 28%
    );
}

/* ── Audio rack becomes the control panel ─────────────── */

.studio-rack-panel {
  min-height: 480px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}

.studio-rack-panel h3,
.studio-chat-panel h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 1.5rem;
  font-family: var(--ml-font-body);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ml-text);
}

.studio-rack-panel h3::before,
.studio-chat-panel h3::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.65rem;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--ml-gold);
  box-shadow: 0 0 10px rgba(212, 176, 58, 0.65);
}

.studio-rack-panel h3::after,
.studio-chat-panel h3::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-top: 0.7rem;
  background: var(--ml-gold);
  opacity: 0.7;
}

/* ── Radio identity ───────────────────────────────────── */

.studio-rack-panel .radio-title,
.studio-rack-panel .stream-title {
  position: relative;
  z-index: 2;
  font-family: var(--ml-font-display);
  color: var(--ml-gold-bright);
  letter-spacing: 0.025em;
}

.studio-rack-panel .radio-title::after,
.studio-rack-panel .stream-title::after {
  content: "LIVE AUDIO";
  display: block;
  margin-top: 0.4rem;
  font-family: var(--ml-font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #77766e;
}

/* ── Broadcast button ─────────────────────────────────── */

.studio-rack-panel button {
  position: relative;
  z-index: 2;
  border-radius: 6px;
  box-shadow:
    0 8px 25px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.studio-rack-panel button:hover {
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    0 0 18px rgba(212,176,58,0.12);
}

/* ── In the room indicator ────────────────────────────── */

.studio-rack-panel .presence-heading,
.studio-rack-panel .room-presence-title {
  position: relative;
  z-index: 2;
}

/* ── Chat becomes the hero panel ──────────────────────── */

.studio-chat-panel {
  min-height: 480px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}

.studio-chat-panel h3 {
  font-size: 1.65rem;
}

/* ── Chat stream ───────────────────────────────────────── */

#chat-stream-container {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 330px;
  height: auto;
  margin-bottom: 1rem;
  padding: 0.65rem 1rem;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(212,176,58,0.045),
      transparent 50%
    ),
    #050607;
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 8px;
  box-shadow:
    inset 0 15px 35px rgba(0,0,0,0.25),
    inset 0 -15px 35px rgba(0,0,0,0.3);
}

/* ── Messages ─────────────────────────────────────────── */

.chat-message {
  position: relative;
  padding: 0.72rem 0.45rem;
  border-bottom: 1px solid rgba(255,255,255,0.045);
  transition: background 0.15s ease;
}

.chat-message:hover {
  background: rgba(212,176,58,0.025);
}

.chat-author {
  color: var(--ml-gold-bright);
  font-weight: 700;
}

.chat-body {
  color: #ebe9e2;
}

.chat-time {
  color: #686760;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

/* ── Chat composer ────────────────────────────────────── */

#form-chat-send {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.65rem;
}

#input-chat-message {
  min-height: 52px;
  padding: 0.85rem 1rem;
  background: #08090a;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 7px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#input-chat-message::placeholder {
  color: #5d5c56;
}

#input-chat-message:focus {
  border-color: rgba(212,176,58,0.65);
  box-shadow:
    0 0 0 3px rgba(212,176,58,0.055),
    0 0 25px rgba(212,176,58,0.035);
}

#btn-chat-send {
  min-width: 92px;
  min-height: 52px;
  border-radius: 7px;
  background:
    linear-gradient(
      180deg,
      rgba(212,176,58,0.16),
      rgba(212,176,58,0.055)
    );
}

/* ── Presence ─────────────────────────────────────────── */

#presence-roster-list {
  position: relative;
  z-index: 2;
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.presence-entry {
  padding: 0.65rem 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.presence-name {
  font-weight: 600;
}

/*
 * Used on <button> elements that render an interactive member name
 * inline within otherwise plain text (Green Room presence roster,
 * Forum author names) - resets native button chrome so it reads as
 * plain text with just a hover/focus affordance, not a default
 * browser button. Applied alongside the element's existing semantic
 * class (e.g. presence-name, forum-author-link), never alone.
 */
.mixlab-name-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.mixlab-name-link:hover,
.mixlab-name-link:focus-visible {
  color: var(--ml-gold-bright);
  text-decoration: underline;
}

.presence-role {
  padding: 0.18rem 0.5rem;
  border: 1px solid rgba(212,176,58,0.18);
  border-radius: 999px;
  color: var(--ml-gold-soft);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

/*
 * ── Green Room chat: bounded panel, internal scroll ──────
 *
 * #chat-stream-container had `height: auto` (see "Chat stream"
 * above) with nothing above it in the ancestor chain ever
 * establishing a definite height: .studio-scene and .studio-chat-panel
 * both only ever declare min-height, so the panel - and the whole
 * page - simply grew to fit however many messages were in the
 * history, pushing the composer far below the fold.
 *
 * Fixed by giving .room-grid itself a definite height, derived from
 * the exact chain already in this file rather than a guessed
 * number: .studio-nav's own min-height (4.5rem) + .studio-scene's
 * top+bottom padding (3.5rem + 5rem) + .room-grid's top margin
 * (2.5rem) = 15.5rem of chrome above/around the grid. With that in
 * place, .room-grid's existing `align-items: stretch` gives both
 * panels a real height to work with, and min-height: 0 on the grid
 * items (and on #chat-stream-container as a flex child of the chat
 * panel) lets them actually shrink to that height instead of being
 * held open by their own content - the flexbox/grid "auto min-size"
 * default that was the other half of this bug. #chat-stream-container
 * keeps its existing overflow-y: auto (see "Chat stream" above), so
 * it becomes the one scrolling element; the composer, as a normal
 * non-flexed child after it, stays put at the bottom of the panel.
 *
 * Scoped to the same desktop breakpoint the two-column .room-grid
 * already uses (min-width: 901px, inverse of the max-width: 900px
 * stacked-mobile block below) - on a stacked mobile layout the page
 * itself scrolling through video-then-chat is the expected pattern,
 * and .studio-rack-panel/.studio-chat-panel already relax back to
 * min-height: auto there, so this rule intentionally does not apply.
 */
@media (min-width: 901px) {
  .room-grid {
    height: calc(100vh - 15.5rem);
    min-height: 420px;
  }

  .studio-rack-panel,
  .studio-chat-panel {
    min-height: 0;
  }

  #chat-stream-container {
    min-height: 0;
  }
}

/* ── Platform-wide card language ──────────────────────── */

.operations-layout section,
.membership-layout section,
.learning-layout section,
.booking-panel,
.community-layout section,
.community-report-form,
.recognition-layout section,
.notifications-layout section,
.notifications-toolbar,
.experience-layout section,
.wallet-layout section,
.events-layout section,
.events-layout li,
.showcase-layout section,
.studio-ops-layout section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      rgba(19,21,25,0.98),
      rgba(7,8,10,0.98)
    );
  border-color: rgba(255,255,255,0.065);
  border-radius: 12px;
  box-shadow:
    0 20px 55px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.025);
}

.operations-layout section::before,
.membership-layout section::before,
.learning-layout section::before,
.booking-panel::before,
.community-layout section::before,
.recognition-layout section::before,
.notifications-layout section::before,
.experience-layout section::before,
.wallet-layout section::before,
.events-layout section::before,
.showcase-layout section::before,
.studio-ops-layout section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212,176,58,0.32),
      transparent
    );
}

/* ── Headings ─────────────────────────────────────────── */

.operations-layout h1,
.membership-layout h1,
.recognition-layout h1,
.notifications-layout h1,
.community-layout h1,
.experience-layout h1,
.wallet-layout h1,
.events-layout h1 {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  letter-spacing: -0.035em;
}

.operations-layout h2,
.membership-layout h2,
.learning-layout h2,
.recognition-layout h2,
.notifications-layout h2,
.community-layout h2,
.experience-layout h2,
.wallet-layout h2,
.events-layout h2,
.showcase-layout h2,
.studio-ops-layout h2,
.forum-layout h2 {
  color: var(--ml-gold-bright);
  letter-spacing: 0.015em;
}

/* ── Buttons ───────────────────────────────────────────── */

.operations-layout button,
.membership-layout button,
.learning-layout button,
.learning-layout li button,
.showcase-layout button,
.studio-ops-layout button,
.notifications-layout button,
.community-layout button,
.experience-layout button,
.wallet-layout button,
.events-layout button,
.forum-layout button {
  border-radius: 7px;
  font-weight: 600;
  letter-spacing: 0.045em;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.operations-layout button:hover,
.membership-layout button:hover,
.learning-layout button:hover,
.learning-layout li button:hover,
.showcase-layout button:hover,
.studio-ops-layout button:hover,
.notifications-layout button:hover,
.community-layout button:hover,
.experience-layout button:hover,
.wallet-layout button:hover,
.events-layout button:hover,
.forum-layout button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 9px 25px rgba(0,0,0,0.3),
    0 0 18px rgba(212,176,58,0.10);
}

/* ── Scrollbars ───────────────────────────────────────── */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(212,176,58,0.3) transparent;
}

*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(212,176,58,0.3);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(212,176,58,0.5);
}

/* ── Responsive ───────────────────────────────────────── */

/*
 * ── Mobile Green Room: bounded chat, player untouched ────
 *
 * REVERTED: a later attempt here tried to cap .room-grid itself to
 * calc(100vh - Xrem) with grid-template-rows: auto minmax(0, 1fr),
 * mirroring the desktop technique, so the rack panel (video +
 * roster) and chat panel would share one viewport-bounded height on
 * mobile with no page scroll at all. FACT, confirmed by a real
 * phone screenshot after deploying that version: it made things
 * worse, not better. CSS Grid sizes an `auto` track to its content's
 * natural height first (up to the space available), and only gives
 * the `1fr` track whatever is left over - on an actual phone the
 * rack panel's natural content (heading + full-width 16:9 video +
 * roster heading + roster entries) consumed nearly the entire
 * calc(100vh...) budget by itself, leaving the chat panel's 1fr row
 * squeezed to a sliver with the composer not visible at all. That
 * is a worse failure than the page scroll it was meant to remove.
 *
 * Reverted .room-grid, .studio-rack-panel and .studio-chat-panel
 * below back to their pre-existing behaviour: no imposed height on
 * .room-grid, grid-template-columns: 1fr only, and both panels
 * relaxing to min-height: auto so the video keeps its normal
 * responsive/aspect-ratio sizing and the page is free to scroll the
 * short, fixed distance from the player down to the chat panel -
 * exactly the "video-then-chat" stacked pattern already documented
 * as the accepted mobile behaviour in the desktop fix comment above.
 *
 * What stays fixed: #chat-stream-container gets a flat, bounded
 * height (not the flex/min-height: 0 approach, and not tied to any
 * ancestor height) so the message list itself can never grow with
 * chat history - overflow-y: auto (already on its base rule, never
 * overridden) makes it the one scrolling element, and the
 * composer/SEND - a normal non-flexed sibling directly after it in
 * the DOM - sits immediately beneath it, not pushed away by message
 * count. This satisfies "no endless scrolling caused by chat
 * history" and "composer immediately below the chat area".
 *
 * ── Compact mobile player ────────────────────────────────
 *
 * Still not enough on its own: real getBoundingClientRect/
 * getComputedStyle measurements taken directly against this page
 * (mobile-width rack panel, forced to the actual ~358px content
 * width a stacked .room-grid gives it at a 390px viewport) show the
 * rack panel alone - heading, the 16:9 video at that width (169px),
 * "In The Room" heading and one roster row - already totals ~437px,
 * and the chat panel (heading + a 300px stream + a stacked mobile
 * composer, which measures ~113px once #form-chat-send switches to
 * its single-column mobile layout, not the ~53px it is side-by-side
 * on desktop) adds ~600px more. FACT: nav + scene padding + both
 * panels put the composer's top edge at roughly 1000px down the
 * page - several phone-screens' worth of content, matching the
 * "~5 swipes" report, and confirming a compact video alone will not
 * get there. Two changes, both scoped to mobile only:
 *
 * 1) #green-room-stream's aspect-ratio is set inline in HTML
 *    (aspect-ratio: 16 / 9), which normal external CSS specificity
 *    cannot override - only !important can, hence its use here
 *    (CSS-only per the constraint; HTML/JS untouched). 10 / 3 keeps
 *    the video full-width and clearly visible, just shorter (~90px
 *    at this width instead of ~169px) - a "sensible compact mobile
 *    height", not a desktop-style 16:9 block.
 * 2) #chat-stream-container's flat mobile height drops from 300px
 *    to 150px - still several message lines with its own internal
 *    scrollbar (overflow-y: auto, untouched), just not needing as
 *    much of the screen. This is exactly the "existing 300px chat
 *    bound" being adjusted, as the task explicitly allowed "if
 *    necessary" - it was necessary; the video change alone only
 *    brings the composer to roughly ~925px down the page.
 *
 * Together these bring the composer's top edge to roughly 780-800px
 * down the page - one continuous scroll gesture on an iPhone
 * (Safari's toolbar collapses as the gesture starts, growing the
 * visible viewport from ~660px to ~750-780px within that same
 * swipe), versus the ~1000px+ before this change. Player, chat
 * send/receive, Realtime and Redact logic are untouched - this is
 * sizing only. No .room-grid height, no grid-template-rows, no
 * min-height: 0 chain - none of the desktop-mirroring techniques
 * that previously made things worse.
 */
@media (max-width: 900px) {
  .room-grid {
    grid-template-columns: 1fr;
  }

  .studio-rack-panel {
    min-height: auto;
  }

  .studio-chat-panel {
    min-height: auto;
  }

  #chat-stream-container {
    height: 150px;
    flex: none;
  }
}

@media (max-width: 768px) {
  .studio-scene {
    padding: 2rem 1rem 3rem;
  }

  .room-grid {
    margin-top: 1.5rem;
    gap: 1rem;
  }

  .studio-rack-panel,
  .studio-chat-panel {
    border-radius: 10px;
  }

  /*
   * Was min-height: 300px, a floor from before the "Compact mobile
   * player" change above dropped the flat mobile height to 150px.
   * Left as min-height: 300px here, this would have silently forced
   * the effective height back up to 300px on every real phone (any
   * viewport this narrow always also matches the 900px block above)
   * - the exact kind of dead/overridden mobile override already
   * found once before in this file (the old max-width: 480px block
   * further up). Matched to the new value instead.
   */
  #chat-stream-container {
    height: 150px;
  }

  #form-chat-send {
    grid-template-columns: 1fr;
  }

  #btn-chat-send {
    width: 100%;
  }
}

/* =========================================================
   MIXLAB PASS - VISUAL POLISH
   Presentation only. Pass logic and architecture unchanged.
   ========================================================= */

#scene-card {
  align-items: center;
}

#scene-card > * {
  width: min(100%, 520px);
}

#scene-card #pass-form-heading {
  margin: 0 0 8px;
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#scene-card .studio-subtitle {
  text-align: center;
  margin-bottom: 28px;
}

#form-member-pass {
  width: 100%;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(10, 10, 10, 0.88);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#form-member-pass .form-field {
  margin-bottom: 20px;
}

#form-member-pass label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#form-member-pass input,
#form-member-pass select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
}

#form-member-pass input:focus,
#form-member-pass select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

#btn-generate-pass {
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* Generated Pass */

#pass-card-preview {
  width: 100%;
  margin-top: 24px;
}

#member-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 250px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.09), transparent 32%),
    linear-gradient(145deg, rgba(35, 35, 35, 0.98), rgba(8, 8, 8, 0.98));
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#member-card::before {
  content: "MIXLAB PASS";
  display: block;
  margin-bottom: 24px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  opacity: 0.65;
}

#member-card img {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 10px;
}

#card-name-display {
  margin: 34px 80px 8px 0;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  line-height: 1.05;
}

#card-role-display {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
}

#card-taste-display {
  margin: 0;
  font-size: 1rem;
  opacity: 0.9;
}

#btn-enter-green-room {
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

@media (max-width: 600px) {
  #form-member-pass {
    padding: 20px;
    border-radius: 14px;
  }

  #member-card {
    min-height: 220px;
    padding: 22px;
    border-radius: 18px;
  }

  #member-card img {
    top: 18px;
    right: 18px;
    width: 50px;
    height: 50px;
  }

  #card-name-display {
    margin-top: 30px;
    font-size: 1.55rem;
  }
}

/* Forum thread hierarchy */

#forum-thread-article {
  padding-bottom: 1.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--ml-border);
}

#forum-thread-title {
  font-family: var(--ml-font-display);
  font-size: clamp(1.45rem, 3.2vw, 1.9rem);
  color: var(--ml-gold);
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin: 0 0 0.45rem;
}

#forum-thread-meta.forum-meta {
  color: var(--ml-text-dim);
  font-size: 0.82rem;
  margin: 0 0 1rem;
  letter-spacing: 0.02em;
}

#forum-thread-body.forum-body {
  color: var(--ml-text);
  font-size: 1.05rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

#forum-reply-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.forum-reply {
  padding: 0.95rem 0 0.95rem 1.1rem;
  margin: 0;
  border-left: 2px solid rgba(212, 176, 58, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.forum-reply:last-child {
  border-bottom: none;
}

.forum-reply .forum-meta {
  color: var(--ml-gold-soft);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 0.3rem;
}

.forum-reply p:not(.forum-meta) {
  color: var(--ml-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  white-space: pre-wrap;
}

#form-forum-reply.forum-compose {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ml-border);
}

/* ══════════════════════════════════════════════════════════
   Forum — MixLab Community Board
   Bespoke composition, not the generic room-card treatment
   used by Operations/Membership/etc: identity -> search ->
   boards -> latest discussions -> thread. Every major element
   below has a considered relationship to its neighbour rather
   than sitting in an isolated bordered box. Thread-detail/reply
   styling above (#forum-thread-title, .forum-reply, etc.) is
   untouched - only the landing composition changes here.
   ══════════════════════════════════════════════════════════ */

.forum-layout {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Identity ───────────────────────────────────────────── */
/*
 * Search now reads as part of the identity block rather than a
 * separate boxed component: no filled background, no heavy border,
 * an underline that only asserts itself on focus. It sits directly
 * beneath the tagline with tighter rhythm, so "who we are" and
 * "find something" feel like one continuous thought.
 */

.forum-identity {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.forum-eyebrow {
  margin: 0 0 0.4rem;
  color: var(--ml-gold-soft);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.forum-identity h1 {
  margin: 0 0 0.5rem;
}

.forum-identity .forum-tagline {
  margin: 0 0 1.1rem;
  color: var(--ml-text-muted);
  font-size: 1rem;
}

.forum-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  max-width: 440px;
  margin: 0 auto;
}

.forum-search input {
  margin-bottom: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ml-border-soft);
  border-radius: 0;
  padding-left: 0.1rem;
  transition: border-color 0.2s ease;
}

.forum-search input:focus {
  border-bottom-color: var(--ml-gold-soft);
  box-shadow: none;
}

.forum-search button {
  margin-bottom: 0;
  white-space: nowrap;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--ml-gold-soft);
  padding-left: 0.85rem;
}

.forum-search button:hover {
  color: var(--ml-gold-bright);
  background: transparent;
  border-bottom-color: var(--ml-gold-soft);
}

.forum-status {
  color: var(--ml-text-dim);
  font-size: 0.85rem;
  margin: 0;
  min-height: 1.2em;
  text-align: center;
}

/* ── Boards ─────────────────────────────────────────────── */
/*
 * Real categories from ForumService.listCategories(), rendered
 * as compact discovery tiles rather than a sidebar list - a
 * horizontal row of "these are our community spaces", not an
 * isolated widget beside unrelated content. Populated by
 * forum.js; #forum-category-list li below is a fallback for
 * the (currently unused) case where markup ships without JS
 * having rendered tiles yet.
 */

.forum-boards {
  width: 100%;
  padding: 0.9rem 0;
  border-top: 1px solid var(--ml-border);
  border-bottom: 1px solid var(--ml-border);
}

#forum-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

#forum-category-list li {
  list-style: none;
}

/*
 * Boards read as a single flowing shelf (bounded by the .forum-boards
 * top/bottom rule above), not four separate outlined cards. Each tile
 * carries no border of its own - only a soft background wash and a
 * bottom accent that appears on hover/active, in the same restrained
 * language as a tab strip rather than a dashboard widget grid.
 */

.forum-board-tile {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.forum-board-tile:hover {
  background: rgba(212, 176, 58, 0.035);
}

.forum-board-tile.is-active {
  background: rgba(212, 176, 58, 0.06);
  border-bottom-color: var(--ml-gold-soft);
}

.forum-board-name {
  display: block;
  font-family: var(--ml-font-display);
  color: var(--ml-text);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  margin: 0 0 0.25rem;
}

.forum-board-tile.is-active .forum-board-name {
  color: var(--ml-gold-bright);
}

.forum-board-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ml-text-muted);
  font-size: 0.79rem;
  line-height: 1.4;
  margin: 0 0 0.45rem;
}

.forum-board-count {
  color: var(--ml-text-dim);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Latest Discussions ─────────────────────────────────── */

.forum-discussions {
  width: 100%;
}

.forum-discussions-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ml-border);
}

.forum-discussions-header h2 {
  margin: 0;
}

#forum-thread-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

#forum-thread-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

#forum-thread-list li:last-child {
  border-bottom: none;
}

#forum-thread-list .forum-thread-link {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-height: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.9rem 0.25rem;
  color: var(--ml-text);
  text-align: left;
}

#forum-thread-list .forum-thread-link:hover {
  background: rgba(212, 176, 58, 0.04);
  color: var(--ml-text);
  transform: none;
}

#forum-thread-list .forum-thread-link .forum-thread-title {
  font-family: var(--ml-font-display);
  color: var(--ml-text);
  font-size: 1rem;
  letter-spacing: 0.01em;
}

#forum-thread-list .forum-thread-link .forum-meta {
  flex: none;
  color: var(--ml-text-dim);
  font-size: 0.78rem;
  white-space: nowrap;
}

/* ── Start a Thread (secondary, disclosed) ─────────────────
 * A native <details>/<summary> disclosure - no JS required,
 * full keyboard/screen-reader support built in. Collapsed by
 * default so the landing page reads as "discover discussions"
 * first, "start one" second, rather than opening on a form.
 */

.forum-compose-disclosure {
  flex: none;
}

.forum-compose-disclosure summary {
  list-style: none;
  cursor: pointer;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  color: var(--ml-gold-bright);
  border: 1px solid var(--ml-gold-soft);
  border-radius: var(--ml-radius-small);
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.forum-compose-disclosure summary::-webkit-details-marker {
  display: none;
}

.forum-compose-disclosure summary::before {
  content: "+ ";
}

.forum-compose-disclosure[open] summary::before {
  content: "\2212 ";
}

.forum-compose-disclosure summary:hover {
  background: var(--ml-gold);
  color: var(--ml-bg);
}

.forum-compose-disclosure .forum-compose {
  margin-top: 1rem;
  padding: 1.25rem;
  background: var(--ml-surface);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);
}

#form-forum-new-thread.forum-compose h3 {
  display: none;
}

#btn-forum-back {
  margin-bottom: 1.25rem;
  background: transparent;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 900px) {
  #forum-category-list {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

@media (max-width: 640px) {
  .forum-identity {
    max-width: none;
    text-align: left;
  }

  .forum-search {
    grid-template-columns: 1fr;
    max-width: none;
  }

  #forum-category-list {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .forum-discussions-header {
    flex-direction: column;
    align-items: stretch;
  }

  .forum-compose-disclosure summary {
    width: 100%;
    justify-content: center;
  }

  #forum-thread-list .forum-thread-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

/* ══════════════════════════════════════════════════════════
   MixLab Pass - Digital Credential
   Premium physical-card presentation.
   Wallet presentation only.
   Pass logic, QR behaviour and binder architecture unchanged.
   ══════════════════════════════════════════════════════════ */

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

.wallet-layout--pass {
  max-width: 780px;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0;
}

/*
 * The Wallet page's hero content is the physical credential card
 * itself, matching the approved render (which is the card alone,
 * no page chrome). The generic large scene heading is scaled down
 * and tightened here so the card sits high on the page rather than
 * being pushed down by an oversized heading block.
 */
#scene-wallet.studio-scene {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  min-height: 0;
}

.wallet-layout--pass .wallet-header {
  text-align: center;
  margin: 0;
}

.wallet-layout--pass h1 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: 0;
}

.wallet-layout--pass .wallet-tagline {
  margin: 0.2rem 0 0;
  font-size: clamp(0.72rem, 1.6vw, 0.85rem);
}

.wallet-status {
  min-height: 1.2em;
  color: var(--ml-text-muted);
  font-size: 0.8rem;
  text-align: center;
}

.mixlab-pass-stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0.2rem 0 1.25rem;
}

.mixlab-pass-stage .mixlab-pass__hint {
  margin: 0;
  color: #77756d;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ── Card geometry ─────────────────────────────────────── */

.mixlab-pass {
  --mx: 50%;
  --my: 38%;

  position: relative;
  width: min(100%, 680px);
  aspect-ratio: 1.586 / 1;
  /* Tighter perspective than before (was 2400px) so the
     rotation reads as a physical card turning over, not a
     flat crossfade - the horizontal foreshortening becomes
     genuinely visible mid-flip. */
  perspective: 1150px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;

  filter:
    drop-shadow(0 35px 45px rgba(0, 0, 0, 0.45))
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}

.mixlab-pass__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;

  border-radius: 22px;

  /*
   * The previous easing (0.22, 0.61, 0.14, 1) reaches ~90deg
   * (the edge-on/depth moment - the one visual cue that reads
   * as a physical rotation rather than a swap) in roughly the
   * first 15% of the duration, then spends the remaining 85%
   * settling a back face that already looks nearly complete.
   * A human eye never gets to see the part that looks like a
   * turn. This curve is symmetric (point-mirrored about
   * 0.5, 0.5), so the edge-on crossing lands at the temporal
   * midpoint of the transition instead, where it's actually
   * visible.
   */
  /*
   * box-shadow duration is deliberately half the transform
   * duration (0.45s of 0.9s): wallet.js adds .is-turning at
   * the same instant the rotation starts (ramping the glint
   * up to peak brightness exactly as the card reaches its
   * edge-on midpoint), then removes it at that same midpoint
   * (ramping back down over the second half, finishing exactly
   * as the rotation completes). See applyRotation() in
   * wallet.js.
   */
  transition:
    transform 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    box-shadow 0.45s ease-in-out;

  box-shadow:
    0 42px 100px rgba(0, 0, 0, 0.72),
    0 12px 30px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(212, 176, 58, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mixlab-pass:hover .mixlab-pass__inner {
  box-shadow:
    0 48px 110px rgba(0, 0, 0, 0.78),
    0 14px 34px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(228, 198, 92, 0.65),
    0 0 38px rgba(212, 176, 58, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.mixlab-pass:focus-visible .mixlab-pass__inner {
  box-shadow:
    0 0 0 3px var(--ml-focus),
    0 42px 100px rgba(0, 0, 0, 0.72);
}

.mixlab-pass.is-flipped .mixlab-pass__inner {
  /* Fallback only - the actual rotation angle (including
     accumulated direction/side) is set as an inline style by
     wallet.js so it always wins over this class rule. This
     stays in place purely so the card still lands on the
     correct face if JS hasn't run yet. */
  transform: rotateY(180deg);
}

/*
 * Rim-light glint, timed by wallet.js to peak at the edge-on
 * midpoint of the turn (see applyRotation()). A thin, edge-on
 * sliver of a dark matte card barely registers against the
 * page's own dark background on foreshortening alone; a brief
 * brighter gold rim at that instant is what a real card
 * catching studio light would show, and is what actually
 * sells the rotation as physical depth rather than a swap.
 * Placed after :hover/:focus-visible so it wins while active.
 */
.mixlab-pass__inner.is-turning {
  box-shadow:
    0 42px 100px rgba(0, 0, 0, 0.72),
    0 12px 30px rgba(0, 0, 0, 0.55),
    0 0 0 1.5px rgba(255, 227, 156, 0.95),
    0 0 55px rgba(255, 210, 110, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Card face ─────────────────────────────────────────── */

.mixlab-pass__face {
  position: absolute;
  inset: 0;
  overflow: hidden;

  border-radius: 22px;

  padding:
    clamp(1.35rem, 4vw, 2.15rem)
    clamp(1.5rem, 4.5vw, 2.45rem);

  display: flex;
  flex-direction: column;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  color: var(--ml-text);

  background:
    radial-gradient(
      100% 160% at var(--mx) var(--my),
      rgba(255, 255, 255, 0.075),
      transparent 30%
    ),
    radial-gradient(
      75% 100% at 100% 0%,
      rgba(212, 176, 58, 0.13),
      transparent 48%
    ),
    radial-gradient(
      70% 100% at 0% 100%,
      rgba(255, 255, 255, 0.028),
      transparent 55%
    ),
    linear-gradient(
      145deg,
      #202124 0%,
      #151619 24%,
      #0d0e10 52%,
      #070809 78%,
      #030405 100%
    );

  border: 1px solid rgba(228, 198, 92, 0.68);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.085),
    inset 0 -25px 55px rgba(0, 0, 0, 0.28);
}

.mixlab-pass__face::before {
  content: "";
  position: absolute;
  inset: 6px;

  border-radius: 16px;
  pointer-events: none;

  border: 1px solid rgba(212, 176, 58, 0.18);

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.018),
    inset 0 0 45px rgba(0, 0, 0, 0.38);
}

.mixlab-pass__face::after {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: 22px;
  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.065) 0%,
      rgba(255, 255, 255, 0.012) 13%,
      transparent 29%,
      transparent 70%,
      rgba(255, 255, 255, 0.025) 100%
    ),
    repeating-linear-gradient(
      104deg,
      transparent 0,
      transparent 5px,
      rgba(255, 255, 255, 0.005) 6px,
      transparent 7px
    );
}

/* ── Security microprint borders ──────────────────────────
   Repeating fine-print bands along all four edges of each
   face - the premium-card security-print cue from the locked
   design reference. Purely decorative (aria-hidden static
   text), positioned inside the existing face padding so no
   other element's layout shifts, and z-indexed below the
   z-index:3 content columns so it never competes with real
   card data. ── */

.mixlab-pass__band {
  position: absolute;
  left: 22px;
  right: 22px;
  height: 9px;

  overflow: hidden;
  white-space: nowrap;

  display: flex;
  z-index: 2;
  pointer-events: none;

  color: rgba(212, 176, 58, 0.4);
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mixlab-pass__band--top {
  top: 9px;
}

.mixlab-pass__band--bottom {
  bottom: 9px;
}

.mixlab-pass__band span {
  flex: none;
  padding-right: 1.6em;
}

.mixlab-pass__edge {
  position: absolute;
  top: 26px;
  bottom: 26px;
  width: 9px;

  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  pointer-events: none;

  writing-mode: vertical-rl;
  text-orientation: mixed;

  color: rgba(212, 176, 58, 0.3);
  font-size: 6px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mixlab-pass__edge--left {
  left: 7px;
}

.mixlab-pass__edge--right {
  right: 7px;
}

.mixlab-pass__edge span {
  flex: none;
  padding-bottom: 1.6em;
}

/* ── Holographic foil ─────────────────────────────────── */

.mixlab-pass__foil {
  position: absolute;
  inset: 0;
  pointer-events: none;

  opacity: 0.30;

  background:
    radial-gradient(
      420px 190px at var(--mx) var(--my),
      rgba(212, 176, 58, 0.24),
      rgba(184, 150, 48, 0.07) 42%,
      transparent 74%
    );

  mix-blend-mode: screen;

  transition:
    opacity 0.25s ease,
    background 0.25s ease;
}

.mixlab-pass.is-pointer-active .mixlab-pass__foil {
  opacity: 0.72;

  background:
    radial-gradient(
      430px 200px at var(--mx) var(--my),
      rgba(255, 235, 150, 0.23),
      rgba(145, 185, 255, 0.12) 34%,
      rgba(175, 120, 225, 0.07) 55%,
      transparent 76%
    );
}

/* ── Front two-column layout ──────────────────────────────
   Left column: title, wordmark, tagline, dividers, member
   fields. Right column: Active Member + crest (top), QR
   (bottom) - matches the approved reference composition. ── */

.mixlab-pass__face--front {
  flex-direction: row;
  align-items: stretch;
  gap: clamp(1rem, 3vw, 1.75rem);
}

.mixlab-pass__left {
  position: relative;
  z-index: 3;

  flex: 1 1 auto;
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.mixlab-pass__right {
  position: relative;
  z-index: 3;

  flex: none;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(1.25rem, 5vw, 2.5rem);
}

.mixlab-pass__divider {
  height: 1px;
  margin: clamp(0.6rem, 2vw, 0.9rem) 0;

  background: linear-gradient(
    90deg,
    rgba(212, 176, 58, 0.42),
    rgba(212, 176, 58, 0.08)
  );
}

/* ── Front top ─────────────────────────────────────────── */

.mixlab-pass__top {
  position: relative;
  z-index: 3;
}

.mixlab-pass .mixlab-pass__title {
  margin: 0;

  font-family: var(--ml-font-display);
  font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  font-weight: 600;

  color: #e4c65c;
  letter-spacing: 0.025em;

  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16),
    0 4px 10px rgba(0, 0, 0, 0.72);
}

.mixlab-pass .mixlab-pass__subtitle {
  margin: 0.25rem 0 0;

  color: #8f8c83;

  font-size: clamp(0.58rem, 1.6vw, 0.7rem);
  letter-spacing: 0.035em;
  line-height: 1.35;
  text-transform: uppercase;
}

.mixlab-pass__top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: clamp(0.5rem, 2vw, 0.75rem);

  flex: none;
}

.mixlab-pass .mixlab-pass__status {
  margin: 0;
  flex: none;

  color: #e4c65c;

  font-size: clamp(0.85rem, 2.3vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;

  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14),
    0 3px 8px rgba(0, 0, 0, 0.6);
}

/* ── Brand mark ────────────────────────────────────────── */

.mixlab-pass__mark-row {
  position: relative;
  z-index: 3;

  margin-top: clamp(0.5rem, 1.6vw, 0.85rem);
  padding-bottom: clamp(0.5rem, 1.6vw, 0.8rem);

  border-bottom: 1px solid rgba(212, 176, 58, 0.34);
}

.mixlab-pass .mixlab-pass__wordmark {
  margin: 0;

  font-family: var(--ml-font-display);

  font-size: clamp(2.6rem, 8vw, 4.4rem);
  font-weight: 700;

  letter-spacing: 0.05em;
  line-height: 0.9;

  background:
    linear-gradient(
      180deg,
      #fff6d0 0%,
      #f4dfa0 12%,
      #d4af37 28%,
      #8a6415 44%,
      #5c4009 52%,
      #8a6415 60%,
      #eecf8a 78%,
      #fff3c4 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.28))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.12))
    drop-shadow(0 1.5px 1px rgba(0, 0, 0, 0.55))
    drop-shadow(0 5px 11px rgba(0, 0, 0, 0.62));
}

/*
 * mixlab-logo-engraved.png is a luminance-keyed derivative of
 * the real mixlab-logo.jpg seal (background pixels made
 * transparent, gold linework left untouched) so the mark sits
 * directly on the card's matte-black surface with no visible
 * disc/plate, rather than being screen-blended against it.
 */
.mixlab-pass__seal {
  flex: none;

  width: clamp(4.8rem, 12vw, 6.4rem);
  height: clamp(4.8rem, 12vw, 6.4rem);

  border-radius: 50%;
  object-fit: contain;

  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 10px rgba(212, 176, 58, 0.16));
}

/* ── Tagline ──────────────────────────────────────────── */

.mixlab-pass .mixlab-pass__tagline {
  position: relative;
  z-index: 3;

  margin: clamp(0.4rem, 1.2vw, 0.6rem) 0 0;
  padding: 0;

  font-size: clamp(1.2rem, 3.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.08em;

  background:
    linear-gradient(
      90deg,
      #e2c17e 0%,
      #dcb877 22%,
      #d2b3d4 40%,
      #bcb8da 55%,
      #a9c3dc 72%,
      #9fc0de 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow: 0 0 10px rgba(212, 176, 58, 0.16);
}

.mixlab-pass.is-pointer-active .mixlab-pass__tagline {
  background:
    linear-gradient(
      100deg,
      #e4c65c 0%,
      #c8b8ff 24%,
      #9fd0e8 45%,
      #fff0a8 62%,
      #c8b8ff 82%,
      #e4c65c 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Credential details ───────────────────────────────── */

.mixlab-pass__fields {
  position: relative;
  z-index: 3;

  min-width: 0;
  margin-top: clamp(0.9rem, 3vw, 1.5rem);

  display: flex;
  flex-direction: column;

  gap: 0.65rem;
}

.mixlab-pass__field-row {
  display: flex;
  gap: 0;
}

.mixlab-pass__field {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  flex: none;

  padding: 0 clamp(0.9rem, 2.6vw, 1.4rem);
}

.mixlab-pass__field:first-child {
  flex: 1 1 auto;
  padding-left: 0;
}

.mixlab-pass__field:not(:first-child) {
  border-left: 1px solid rgba(212, 176, 58, 0.28);
}

.mixlab-pass__label {
  color: rgba(212, 176, 58, 0.62);

  font-size: clamp(0.56rem, 1.5vw, 0.66rem);
  font-weight: 700;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mixlab-pass .mixlab-pass__value {
  margin: 0;

  color: #e2c07c;

  font-size: clamp(0.95rem, 2.7vw, 1.15rem);
  font-weight: 500;

  letter-spacing: 0.02em;
  line-height: 1.2;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  max-width: min(26vw, 220px);

  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 228, 170, 0.12);
}

.mixlab-pass .mixlab-pass__value--mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  font-size: clamp(0.78rem, 2.2vw, 0.96rem);
  color: #dcb877;
}

/* ── QR thumbnail ─────────────────────────────────────── */

#wallet-show-qr.mixlab-pass__qr-trigger {
  position: relative;
  z-index: 4;

  flex: none;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 0.32rem;

  min-height: 0;
  padding: 0;

  background: transparent;
  border: none;
  border-radius: 0;

  cursor: pointer;
}

#wallet-show-qr.mixlab-pass__qr-trigger:hover {
  background: transparent;
  border-color: transparent;
  transform: none;
  box-shadow: none;
}

/*
 * Corner-bracket frame (four gold L-shaped corners on a
 * near-black tile) instead of a plain bordered box - matches
 * the "scan target" framing on the locked design reference.
 * Shared by the front QR trigger and the rear QR mark.
 */
.mixlab-pass__qr-thumb,
.mixlab-pass__rear-qr {
  display: block;
  box-sizing: border-box;

  padding: 0.32rem;

  border-radius: 6px;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M4 20 V9 A5 5 0 0 1 9 4 H20' fill='none' stroke='%23d4b03a' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M80 4 H91 A5 5 0 0 1 96 9 V20' fill='none' stroke='%23d4b03a' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M96 80 V91 A5 5 0 0 1 91 96 H80' fill='none' stroke='%23d4b03a' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M20 96 H9 A5 5 0 0 1 4 91 V80' fill='none' stroke='%23d4b03a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")
      center / 100% 100% no-repeat,
    #050607;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.mixlab-pass__qr-thumb {
  width: clamp(5.5rem, 14vw, 7.5rem);
  height: clamp(5.5rem, 14vw, 7.5rem);
}

.mixlab-pass__qr-thumb svg,
.mixlab-pass__rear-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mixlab-pass__qr-label {
  color: #a98a2c;

  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mixlab-pass__qr-trigger:hover .mixlab-pass__qr-label,
.mixlab-pass__qr-trigger:focus-visible .mixlab-pass__qr-label {
  color: #f0dc91;
}

.mixlab-qr-bg {
  fill: transparent;
}

.mixlab-qr-fg {
  fill: #d4b03a;
}

.mixlab-pass__face--rear .mixlab-qr-fg {
  fill: #b89529;
}

/* ── Rear face ─────────────────────────────────────────── */

.mixlab-pass__face--rear {
  transform: rotateY(180deg);

  align-items: stretch;
  text-align: left;
  justify-content: center;

  gap: clamp(0.9rem, 3vw, 1.4rem);

  padding-top: clamp(1.3rem, 4vw, 2.15rem);
  padding-bottom: clamp(1.3rem, 4vw, 2.15rem);
}

/*
 * Rear body: large seal (left column) beside the info column
 * (heading + tagline, divider, benefits + QR) - matches the
 * locked reference's asymmetric card-back composition, where
 * the seal is the dominant left-hand visual anchor rather than
 * a small corner mark.
 */
.mixlab-pass__rear-body {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;

  gap: clamp(1.25rem, 4.5vw, 2.25rem);
}

.mixlab-pass__rear-seal-col {
  flex: none;

  display: flex;
  align-items: center;
  justify-content: center;
}

.mixlab-pass__rear-seal {
  flex: none;

  width: clamp(6.5rem, 19vw, 9.5rem);
  height: clamp(6.5rem, 19vw, 9.5rem);

  border-radius: 50%;
  object-fit: contain;

  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 16px rgba(212, 176, 58, 0.16));
}

.mixlab-pass__rear-info {
  flex: 1 1 auto;
  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: clamp(0.75rem, 2.5vw, 1.1rem);
}

.mixlab-pass__rear-heading-block {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1.2vw, 0.55rem);
  text-align: left;
}

.mixlab-pass .mixlab-pass__rear-access {
  margin: 0;

  color: #e4c65c;

  font-size: clamp(0.95rem, 2.6vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14),
    0 3px 8px rgba(0, 0, 0, 0.6);
}

.mixlab-pass .mixlab-pass__rear-tagline {
  margin: 0;
  text-align: left;

  font-size: clamp(1.3rem, 4.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.07em;

  background:
    linear-gradient(
      90deg,
      #e2c17e 0%,
      #dcb877 22%,
      #d2b3d4 40%,
      #bcb8da 55%,
      #a9c3dc 72%,
      #9fc0de 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow: 0 0 10px rgba(212, 176, 58, 0.16);
}

/*
 * Lower row: the three-benefit column, a vertical divider,
 * then the QR mark - matches the reference's right-column
 * composition beneath the heading/tagline.
 */
.mixlab-pass__rear-lower {
  display: flex;
  align-items: center;

  gap: clamp(1rem, 3.5vw, 1.6rem);
}

.mixlab-pass__rear-qr {
  flex: none;

  width: clamp(5.5rem, 15vw, 7.5rem);
  height: clamp(5.5rem, 15vw, 7.5rem);

  margin: 0;
}

.mixlab-pass__vdivider {
  flex: none;
  align-self: stretch;

  width: 1px;

  background: linear-gradient(
    180deg,
    transparent,
    rgba(212, 176, 58, 0.32) 15%,
    rgba(212, 176, 58, 0.32) 85%,
    transparent
  );
}

/*
 * Benefits as a horizontal row of three columns (icon above
 * label, vertical divider between columns) - matches the
 * locked reference artwork exactly. (Corrects an earlier,
 * incorrect vertical-stack revision.)
 */
.mixlab-pass__rear-benefits {
  list-style: none;

  flex: 1 1 auto;
  min-width: 0;

  display: flex;
  align-items: stretch;
  justify-content: flex-start;

  gap: 0;

  margin: 0;
  padding: 0;

  color: #a89060;

  font-size: clamp(0.5rem, 1.5vw, 0.6rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mixlab-pass__rear-benefits li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  gap: 0.35rem;

  padding: 0 clamp(0.7rem, 2.2vw, 1.1rem);
}

.mixlab-pass__rear-benefits li:first-child {
  padding-left: 0;
}

.mixlab-pass__rear-benefits li:not(:first-child) {
  border-left: 1px solid rgba(212, 176, 58, 0.28);
}

/*
 * Plain gold line-icon, no badge/button chrome - reads as an
 * engraved mark on the card rather than an app UI element.
 */
.mixlab-pass__rear-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;

  color: #c9a769;

  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

.mixlab-pass__rear-benefit-icon svg {
  display: block;
  width: 17px;
  height: 17px;
}

.mixlab-pass .mixlab-pass__rear-legal {
  position: relative;
  z-index: 3;

  margin: 0;

  text-align: center;

  color: #8a8780;

  font-size: clamp(0.5rem, 1.4vw, 0.6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ── QR dialog ─────────────────────────────────────────── */

.mixlab-qr-dialog {
  border: 1px solid rgba(212, 176, 58, 0.42);
  border-radius: 16px;
  padding: 0;

  background: transparent;
  color: var(--ml-text);

  max-width: min(92vw, 390px);
}

.mixlab-qr-dialog::backdrop {
  background: rgba(2, 3, 4, 0.84);
}

.mixlab-qr-dialog__panel {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(212, 176, 58, 0.08),
      transparent 45%
    ),
    linear-gradient(
      155deg,
      #1a1b1e 0%,
      #0c0d0f 62%,
      #050607 100%
    );

  border-radius: 16px;

  padding: 1.6rem;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 0.9rem;

  text-align: center;

  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.68);
}

.mixlab-qr-dialog__panel h2 {
  margin: 0;

  color: #e4c65c;

  font-family: var(--ml-font-display);

  font-size: 1.15rem;
  letter-spacing: 0.04em;
}

.mixlab-qr-dialog__graphic {
  width: min(70vw, 250px);
  height: min(70vw, 250px);

  padding: 0.25rem;

  border-radius: 7px;

  background: #050607;

  border: 1px solid rgba(228, 198, 92, 0.5);
}

.mixlab-qr-dialog__graphic svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mixlab-qr-dialog__graphic .mixlab-qr-fg {
  fill: #e4c65c;
}

.mixlab-qr-dialog__payload {
  margin: 0;

  max-width: 100%;

  color: #66645e;

  font-size: 0.62rem;

  word-break: break-all;

  font-variant-numeric: tabular-nums;
}

#wallet-close-qr.mixlab-qr-dialog__close {
  min-height: 40px;
  margin-top: 0.15rem;
}

/* ── Pass responsive ───────────────────────────────────── */

@media (max-width: 720px) {
  .wallet-layout--pass {
    max-width: 100%;
  }

  .mixlab-pass {
    width: min(100%, 680px);
  }
}

@media (max-width: 600px) {
  .mixlab-pass__face {
    border-radius: 16px;
    padding: 1rem 1.05rem;
  }

  .mixlab-pass__face::before,
  .mixlab-pass__face::after {
    border-radius: 11px;
  }

  .mixlab-pass__inner {
    border-radius: 16px;
  }

  .mixlab-pass__title {
    font-size: 0.98rem;
  }

  .mixlab-pass__subtitle {
    font-size: 0.5rem;
  }

  .mixlab-pass__status {
    font-size: 0.42rem;
  }

  .mixlab-pass__wordmark {
    font-size: clamp(1.6rem, 9vw, 2.2rem);
  }

  .mixlab-pass__seal {
    width: 3.4rem;
    height: 3.4rem;
  }

  .mixlab-pass__tagline {
    font-size: 0.72rem;
  }

  .mixlab-pass__face--front {
    gap: 0.65rem;
  }

  .mixlab-pass__top-right {
    gap: 0.4rem;
  }

  .mixlab-pass__field-row {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 0.6rem;
  }

  .mixlab-pass__field {
    flex: none;
    padding: 0 0.5rem;
  }

  .mixlab-pass__field:first-child {
    flex: 1 1 100%;
    padding-left: 0;
    border-left: none;
  }

  .mixlab-pass__field:nth-child(2) {
    padding-left: 0;
    border-left: none;
  }

  .mixlab-pass__label {
    font-size: 0.42rem;
  }

  .mixlab-pass__value {
    font-size: 0.65rem;
    max-width: 22vw;
  }

  .mixlab-pass__value--mono {
    font-size: 0.54rem;
  }

  .mixlab-pass__qr-thumb {
    width: 2.85rem;
    height: 2.85rem;
  }

  .mixlab-pass__qr-label {
    font-size: 0.4rem;
  }

  .mixlab-pass__face--rear {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .mixlab-pass__rear-body {
    gap: 0.85rem;
  }

  .mixlab-pass__rear-seal {
    width: 3.2rem;
    height: 3.2rem;
  }

  .mixlab-pass__rear-info {
    gap: 0.45rem;
  }

  .mixlab-pass__rear-heading-block {
    gap: 0.2rem;
  }

  .mixlab-pass__rear-lower {
    gap: 0.6rem;
  }

  .mixlab-pass__rear-access {
    font-size: 0.42rem;
  }

  .mixlab-pass__rear-tagline {
    font-size: 0.82rem;
  }

  .mixlab-pass__rear-benefits {
    font-size: 0.4rem;
  }

  .mixlab-pass__rear-benefits li {
    padding: 0 0.4rem;
    gap: 0.25rem;
  }

  .mixlab-pass__rear-benefits li:first-child {
    padding-left: 0;
  }

  .mixlab-pass__rear-benefit-icon svg {
    width: 12px;
    height: 12px;
  }

  .mixlab-pass__rear-qr {
    width: 2.85rem;
    height: 2.85rem;
  }

  .mixlab-pass__rear-legal {
    font-size: 0.4rem;
  }
}

/* ── Reduced motion ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .mixlab-pass__inner {
    transition: none;
  }

  .mixlab-pass__foil,
  .mixlab-pass.is-pointer-active .mixlab-pass__foil {
    opacity: 0.22;
  }

  .mixlab-pass.is-pointer-active .mixlab-pass__tagline {
    background:
      linear-gradient(
        100deg,
        #b89529 0%,
        #e4c65c 40%,
        #fff0a8 55%,
        #e4c65c 75%,
        #d4b03a 100%
      );

    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* ── Profile ────────────────────────────────────────────── */

.profile-layout {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.profile-avatar-wrap {
  position: relative;
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
}

.profile-avatar-img,
.profile-avatar-placeholder {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ml-border-soft);
  background: var(--ml-surface-elevated);
}

.profile-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ml-text-dim);
  font-family: var(--ml-font-display);
  font-size: 1.6rem;
}

/*
 * The [hidden] attribute must win over the class's `display: flex`.
 * Equal-specificity author rules cascade by source order, and the
 * later rule (this one) wins - without it, the hidden placeholder
 * stays visible behind the avatar image once one has been uploaded.
 */
.profile-avatar-img[hidden],
.profile-avatar-placeholder[hidden] {
  display: none;
}

.profile-avatar-wrap {
  position: relative;
}

.profile-avatar-img,
.profile-avatar-placeholder {
  position: absolute;
  top: 0;
  left: 0;
}

.profile-avatar-upload {
  position: absolute;
  inset: auto 0 -0.4rem 0;
  margin: 0 auto;
  width: fit-content;
  padding: 0.2rem 0.55rem;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--ml-bg);
  background: var(--ml-gold);
  border-radius: var(--ml-radius-small);
  cursor: pointer;
  white-space: nowrap;
}

.profile-avatar-upload:hover,
.profile-avatar-upload:focus-visible {
  background: var(--ml-gold-bright);
  outline: 2px solid var(--ml-focus);
  outline-offset: 2px;
}

.profile-identity h1 {
  margin: 0;
}

.profile-membership-line {
  margin: 0.2rem 0 0;
  color: var(--ml-text-muted);
  font-size: 0.9rem;
}

.profile-status {
  min-height: 1.2rem;
  font-size: 0.9rem;
  color: var(--ml-success);
}

.profile-status[data-state="error"] {
  color: var(--ml-danger);
}

.profile-status:empty {
  display: none;
}

#profile-form textarea {
  width: 100%;
  resize: vertical;
}

.profile-visibility-note {
  color: var(--ml-text-dim);
  font-size: 0.85rem;
}

.profile-back-btn {
  margin-top: 0.5rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ml-gold);
  background: transparent;
  border: 1px solid var(--ml-border-soft);
  border-radius: var(--ml-radius-small);
  cursor: pointer;
}

.profile-back-btn:hover,
.profile-back-btn:focus-visible {
  color: var(--ml-bg);
  background: var(--ml-gold);
  outline: 2px solid var(--ml-focus);
  outline-offset: 2px;
}

.profile-readonly-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.profile-readonly-view[hidden] {
  display: none;
}

.profile-readonly-label {
  display: block;
  color: var(--ml-text-muted);
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.profile-readonly-value {
  margin: 0;
  color: var(--ml-text);
  white-space: pre-wrap;
}
/* ── MixLab Recordings (Records room) ────────────────────────
   Alpha 6 catalogue addition. Records previously had zero
   dedicated styling anywhere in this file - this is why the
   admin release <select> rendered as an unstyled, near-invisible
   "tiny square": no rule anywhere set its width/height. Uses only
   existing tokens from :root above; introduces no new colours. */

.records-layout {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.records-header {
  text-align: center;
}

.records-tagline {
  color: var(--ml-text-muted);
}

.records-status {
  color: var(--ml-gold-bright);
  min-height: 1.2em;
}

.records-demo-note {
  color: var(--ml-text-muted);
  font-size: 0.95rem;
  text-align: center;
}

.records-catalogue-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.records-catalogue-section > h2 {
  font-family: var(--ml-font-display);
  color: var(--ml-gold-bright);
  letter-spacing: 0.02em;
}

#records-catalogue-status {
  color: var(--ml-text-muted);
}

.records-catalogue-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.records-catalogue-card {
  background: var(--ml-surface);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);
  box-shadow: var(--ml-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.records-catalogue-artwork {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--ml-bg-soft);
}

.records-catalogue-info {
  padding: 0.9rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.records-catalogue-number {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ml-gold);
}

.records-catalogue-title {
  margin: 0;
  font-family: var(--ml-font-display);
  font-size: 1.1rem;
  color: var(--ml-text);
}

.records-catalogue-artist {
  margin: 0;
  color: var(--ml-text-muted);
  font-size: 0.9rem;
}

.records-catalogue-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

.records-catalogue-btn {
  flex: 1 1 auto;
  text-align: center;
  padding: 0.55rem 0.9rem;
  border-radius: var(--ml-radius-small);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--ml-border-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.records-catalogue-btn-stream {
  background: var(--ml-gold);
  color: var(--ml-bg);
}

.records-catalogue-btn-buy {
  background: transparent;
  color: var(--ml-gold-bright);
  border-color: var(--ml-gold-soft);
}

.records-catalogue-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--ml-glow);
}

.records-catalogue-coming-soon {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--ml-text-dim);
  font-style: italic;
}

/*
 * "Releases" draft-creation form (Title/Notes/Create draft -
 * #records-release-form in index.html). Confirmed no rule
 * anywhere in this file targeted it: its input/textarea/button
 * rendered as unstyled browser defaults (native fixed-width
 * text input, tiny textarea, unstyled button) inside an
 * otherwise fully dark-themed section, most visibly broken on
 * narrow/mobile viewports. Matches the existing width:100%/
 * min-height:44px pattern already used for the admin links
 * panel above rather than introducing a new one. Same rule at
 * all viewport widths - the stacked label/field/button layout
 * this produces is already correct at any width, so no separate
 * mobile-only block is needed.
 */
#records-release-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#records-release-form label {
  font-size: 0.85rem;
  color: var(--ml-text-muted);
}

#records-release-form input,
#records-release-form textarea {
  width: 100%;
  min-height: 44px;
  background: var(--ml-bg-soft);
  color: var(--ml-text);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-small);
  padding: 0.6rem 0.75rem;
  font: inherit;
}

#records-release-form textarea {
  min-height: 88px;
  resize: vertical;
}

#records-release-form button[type="submit"] {
  align-self: flex-start;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  background: var(--ml-gold);
  color: var(--ml-bg);
  border: none;
  border-radius: var(--ml-radius-small);
  font-weight: 600;
  cursor: pointer;
}

.records-admin-links-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.25rem;
  background: var(--ml-surface-elevated);
  border: 1px solid var(--ml-border-soft);
  border-radius: var(--ml-radius);
  max-width: 480px;
}

.records-admin-links-panel > h2 {
  margin: 0;
  font-family: var(--ml-font-display);
  font-size: 1rem;
  color: var(--ml-gold-bright);
}

/* The actual "tiny square" fix: previously this <select> had no
   width/min-height rule anywhere in the stylesheet at all. */
.records-admin-select {
  width: 100%;
  min-height: 44px;
  background: var(--ml-bg-soft);
  color: var(--ml-text);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-small);
  padding: 0.4rem 0.6rem;
}

.records-admin-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--ml-text-muted);
}

.records-admin-field input {
  width: 100%;
  min-height: 44px;
  background: var(--ml-bg-soft);
  color: var(--ml-text);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-small);
  padding: 0.4rem 0.6rem;
}

.records-admin-save {
  align-self: flex-start;
  padding: 0.6rem 1.2rem;
  background: var(--ml-gold);
  color: var(--ml-bg);
  border: none;
  border-radius: var(--ml-radius-small);
  font-weight: 600;
  cursor: pointer;
}

#records-admin-links-status {
  min-height: 1.1em;
  font-size: 0.85rem;
  color: var(--ml-text-muted);
}

@media (max-width: 768px) {
  .records-catalogue-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.85rem;
  }

  .records-admin-links-panel {
    max-width: 100%;
  }
}

/*
 * Moderator UI additions: chat redact control + forum thread/reply
 * moderation controls. .forum-layout button/input already covers the
 * new Forum buttons generically, so these two blocks are the only
 * new CSS actually required.
 */
.chat-redact-btn {
  margin-left: 0.5rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--ml-gold-soft);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0 0.35rem;
}

.chat-redact-btn:hover {
  color: var(--ml-gold-bright);
  border-bottom-color: var(--ml-gold-soft);
}

.chat-message.redacted {
  opacity: 0.6;
  font-style: italic;
}

#forum-thread-actions.forum-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.forum-reply-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.35rem;
}