:root {
    --bg: #0d0818;
    --bg2: #120f20;
    --card: #1e1830;
    --card2: #271f3a;
    --border: rgba(200,180,255,0.18);
    --border-strong: rgba(200,180,255,0.42);
    --purple: #7B2FFF;
    --pink: #E91E8C;
    --green: #00E676;
    --grad: linear-gradient(135deg, #E91E8C, #7B2FFF);
    --text: #f0f0f5;
    --muted: #cfc2e0;
    --font-head: 'Epilogue', sans-serif;
    --font-body: 'Epilogue', sans-serif;

    /* ── 3D CARD LIGHT SYSTEM ── */
    --card-border:       rgba(123,47,255,0.30);
    --card-border-hover: rgba(160,80,255,0.55);
    --card-shadow:       0 0 0 1px rgba(123,47,255,0.18), 0 4px 24px rgba(80,20,180,0.22), 0 1px 0 rgba(200,160,255,0.12) inset;
    --card-shadow-hover: 0 0 0 1px rgba(160,80,255,0.40), 0 8px 36px rgba(100,30,220,0.35), 0 1px 0 rgba(220,180,255,0.18) inset;

    /*
     * Design tokens. New styles use these; existing inline styles are
     * translated only where a section is being reworked anyway. Values
     * are the ones already most used across the project, so switching a
     * rule to a token changes nothing visually.
     */
    /* Spacing — 4px scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    /* Font sizes */
    --fs-micro: 0.66rem;
    --fs-label: 0.72rem;
    --fs-sm: 0.8rem;
    --fs-body: 0.88rem;
    --fs-md: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.5rem;
    /* Widths */
    --width-page: min(1400px, 94vw);
    --width-narrow: 900px;
    --width-text: 800px;
    --width-form: 720px;
    --width-modal: 540px;
    --width-gate: 440px;
    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 999px;
  }

  /* Page shell width — one token for the whole platform */
  .fm-page-width {
    max-width: var(--width-page);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /*
   * Unified scrollbars (in-block + document).
   * Fixed 8px width always — thumb color only changes on hover (no layout jump).
   * Touch / coarse pointers: thumb stays transparent (system overlay as before).
   */
  * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }
  *::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 4px;
    border: none;
    box-shadow: none;
    transition: background-color 0.2s ease;
  }
  *::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
  *::-webkit-scrollbar-corner {
    background: transparent;
  }
  @media (hover: hover) and (pointer: fine) {
    *:hover {
      scrollbar-color: var(--border-strong) transparent;
    }
    *:hover::-webkit-scrollbar-thumb {
      background-color: var(--border-strong);
    }
  }

  /* Document scroll locked while a full-page overlay owns scrolling */
  html.fm-scroll-locked,
  html.fm-scroll-locked body {
    overflow: hidden !important;
  }

  /* ── Shared profile UI: edit bar, buttons, empty states ── */
  .fm-edit-bar {
    display: none;
    background: rgba(123, 47, 255, 0.15);
    border: 1px solid rgba(123, 47, 255, 0.4);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-5);
    margin-bottom: var(--space-6);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    position: sticky;
    top: var(--cs-chrome-top, var(--fx-nav-chrome, 60px));
    z-index: 40;
    box-sizing: border-box;
    backdrop-filter: blur(8px);
  }
  .fm-edit-bar-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--t1, #fff);
    font-family: var(--font-body);
  }
  .fm-edit-bar-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--pink);
    flex-shrink: 0;
  }
  .fm-edit-bar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .fm-btn {
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
  }
  .fm-btn:active {
    transform: scale(0.98);
  }
  .fm-btn-primary {
    color: var(--t1, #fff);
    background: linear-gradient(135deg, #e91e8c, #7b2fff);
    box-shadow: 0 6px 22px rgba(123, 47, 255, 0.35);
  }
  .fm-btn-secondary {
    color: var(--t2, rgba(200, 180, 255, 0.85));
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border);
  }
  .fm-btn-ghost {
    color: var(--muted);
    background: transparent;
    border-color: var(--border);
  }
  .fm-btn-danger {
    color: var(--t1, #fff);
    background: #8b1a1a;
    border: 2px solid #c62828;
    font-weight: 800;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
  }
  .fm-btn-danger:hover {
    background: #a32020;
  }
  .fm-btn-sm {
    font-size: 0.72rem;
    padding: 6px 12px;
  }
  .fm-btn-block {
    width: 100%;
  }
  .fm-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .fm-empty {
    padding: var(--space-5);
    text-align: center;
    color: var(--muted);
    font-size: 0.84rem;
    font-family: var(--font-body);
    line-height: 1.55;
  }

  /* ── Shared profile header / banner / stats / tabs ── */
  .fm-profile-header {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 28px;
    margin-bottom: var(--space-6);
  }
  .fm-profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
  }
  .fm-profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: var(--card2);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 2.4rem;
    color: #9B6FFF;
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  .fm-profile-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--purple);
    border: 2px solid var(--bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fm-profile-header-info {
    flex: 1;
    min-width: 200px;
  }
  .fm-profile-header-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: var(--space-1);
  }
  .fm-profile-header-name {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--text);
  }
  .fm-profile-header-meta {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 300;
  }
  .fm-profile-header-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: flex-start;
  }
  .fm-profile-banner {
    width: 100%;
    aspect-ratio: 4 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    margin-bottom: var(--space-6);
    background: linear-gradient(135deg, #1a0035, #0d0818);
    border: 1px solid var(--card-border);
  }
  .fm-profile-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 1;
    z-index: 0;
  }
  .fm-profile-banner-bg.fm-banner-layer-b {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
  }
  .fm-profile-banner.is-banner-dragging .fm-profile-banner-bg {
    transition: none;
    cursor: grab;
  }
  .fm-profile-banner.is-banner-dragging {
    cursor: grabbing;
  }
  .fm-profile-banner-edit {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 3;
  }
  .fm-banner-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 7px;
    pointer-events: auto;
  }
  .fm-banner-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(240, 240, 245, 0.35);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .fm-banner-dot.is-active {
    background: var(--text);
    transform: scale(1.15);
  }
  .fm-banner-strip {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    margin: 12px 0 var(--space-6);
  }
  .fm-banner-strip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .fm-banner-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    font-family: var(--font-body);
    letter-spacing: 0.04em;
  }
  .fm-banner-strip-close {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    font-family: var(--font-body);
  }
  .fm-banner-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
  }
  .fm-banner-thumb {
    position: relative;
    aspect-ratio: 4 / 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    background: var(--card);
    flex: 1 1 0;
  }
  .fm-banner-thumb.is-active {
    border-color: var(--card-border-hover);
    box-shadow: var(--card-shadow);
  }
  .fm-banner-thumb-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
  }
  .fm-banner-thumb-del {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: rgba(13, 8, 24, 0.8);
    color: var(--text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-body);
  }
  .fm-banner-thumb-ops {
    position: absolute;
    left: 3px;
    bottom: 3px;
    display: flex;
    gap: 6px;
  }
  .fm-banner-thumb-ops button {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: rgba(13, 8, 24, 0.8);
    color: var(--text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-body);
  }
  .fm-banner-add-btn {
    aspect-ratio: 4 / 1;
    border-radius: 8px;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    font-family: var(--font-body);
    flex: 1 1 0;
  }
  .fm-banner-add-btn:disabled {
    opacity: 0.4;
    cursor: default;
  }
  .fm-banner-drag-hint {
    font-size: 0.72rem;
    color: var(--muted);
    width: 100%;
  }
  .fm-profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }
  .fm-profile-stat {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
  }
  .fm-profile-stat-value {
    font-size: 1.8rem;
    font-weight: 800;
    font-family: var(--font-head);
    letter-spacing: -0.02em;
    color: var(--text);
  }
  .fm-profile-stat-label {
    font-size: var(--fs-micro);
    color: var(--muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: var(--space-1);
  }
  .fm-profile-tabs {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 28px;
  }
  .fm-profile-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--t2, rgba(200, 180, 255, 0.62));
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin-bottom: -1px;
    font-family: var(--font-body);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .fm-profile-tab.is-active {
    border-bottom-color: #C8A97E;
    color: var(--t1, #fff);
    font-weight: 600;
  }
  @media (max-width: 768px) {
    .fm-profile-tab {
      min-height: 44px;
    }
  }

  /* Shared Demo / Sample labels — discrete, consistent across surfaces */
  .fm-demo-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 2px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
    vertical-align: middle;
  }
  .fm-demo-note {
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: 0.02em;
  }
  .fm-demo-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  /* ══════════════════════════════════════════
     GLOBAL 3D CARD EFFECT
     Simulates light hitting the card from top-left.
     Applied automatically to all main card classes.
  ══════════════════════════════════════════ */

  .stat-card,
  .now-card,
  .now-drop-card,
  .now-jukebox-card,
  .now-live-room-card,
  .about-team-card,
  .about-value,
  .jb-player-card,
  .jb-vote-card,
  .jb-chat-card,
  .jb-donate-card,
  .jb-tod-card,
  .gs-store-card,
  .gs-product-item,
  .gs-profile-about,
  .gs-reviews,
  .cs-daw,
  .cs-splits,
  .cs-chat,
  .now-feed-card,
  .prot-card,
  .modal,
  .gate-box,
  .fm-artist-card,
  .fm-path-card,
  .fm-about-card,
  .about-video-box,
  .dr-artist-card,
  .jb-genre-tile,
  .gear-card {
    box-shadow: var(--card-shadow);
    position: relative;
  }

  /* Top-edge light line — the "3D rim" */
  .stat-card::before,
  .now-card::before,
  .now-drop-card::before,
  .now-jukebox-card::before,
  .now-live-room-card::before,
  .about-team-card::before,
  .about-value::before,
  .jb-player-card::before,
  .jb-vote-card::before,
  .jb-chat-card::before,
  .jb-donate-card::before,
  .jb-tod-card::before,
  .gs-store-card::before,
  .gs-profile-about::before,
  .gs-reviews::before,
  .cs-daw::before,
  .cs-splits::before,
  .cs-chat::before,
  .prot-card::before,
  .modal::before,
  .gate-box::before,
  .fm-artist-card::before,
  .fm-path-card::before,
  .about-video-box::before,
  .gear-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
      145deg,
      rgba(160,100,255,0.12) 0%,
      rgba(130,80,220,0.05) 35%,
      transparent 65%
    );
    z-index: 0;
  }

  /* Ensure card content stays above the pseudo-element */
  .stat-card > *,
  .now-card > *,
  .now-drop-card > *,
  .now-jukebox-card > *,
  .now-live-room-card > *,
  .about-team-card > *,
  .about-value > *,
  .jb-player-card > *,
  .jb-vote-card > *,
  .jb-chat-card > *,
  .jb-donate-card > *,
  .jb-tod-card > *,
  .gs-store-card > *,
  .gs-profile-about > *,
  .gs-reviews > *,
  .cs-daw > *,
  .cs-splits > *,
  .cs-chat > *,
  .prot-card > *,
  .modal > *,
  .gate-box > *,
  .fm-artist-card > *,
  .fm-path-card > *,
  .about-video-box > *,
  .gear-card > * {
    position: relative;
    z-index: 1;
  }

  /* Hover lift — all cards */
  .stat-card:hover,
  .now-card:hover,
  .now-jukebox-card:hover,
  .now-live-room-card:hover,
  .about-team-card:hover,
  .about-value:hover,
  .jb-player-card:hover,
  .jb-vote-card:hover,
  .gs-store-card:hover,
  .fm-artist-card:hover,
  .fm-path-card:hover,
  .gear-card:hover,
  .artist-card:hover,
  .feature-card:hover,
  .music-card:hover,
  .discover-card:hover,
  .club-card:hover,
  .trending-item:hover,
  .fm-event-card:hover,
  .fm-event-featured:hover,
  .fm-flow-step:hover,
  .now-drop-room-card:hover,
  .dr-featured:hover,
  .dr-vinyl-card:hover,
  .dr-artist-card:hover,
  .lr-card:hover,
  .lr-now-playing:hover,
  .lr-donate-box:hover,
  .lr-guest-box:hover,
  .jb-genre-tile:hover,
  .jb-genre-card:hover,
  .about-mission:hover,
  .protected-item:hover,
  .cert-preview:hover,
  .gs-product-item:hover,
  .prot-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
    border-color: var(--card-border-hover) !important;
  }

  /* Back buttons hover */
  .now-sub-back:hover,
  .jb-room-back:hover,
  .lr-room-back:hover,
  .lr-player-back:hover,
  .gs-profile-back:hover,
  .dr-stage-back:hover {
    box-shadow: 0 0 0 1px rgba(160,80,255,0.38), 0 4px 18px rgba(100,30,220,0.28) !important;
    transform: translateX(-2px);
    border-color: rgba(160,80,255,0.45) !important;
  }
  /* ── ARTIST & FAN PAGE CARDS ── */
  #page-artist [style*="border:1px solid"],
  #page-fan [style*="border:1px solid"],
  #page-detect [style*="border:1px solid"],
  #page-studio [style*="border:1px solid"],
  #page-dj [style*="border:1px solid"],
  #page-clubs [style*="border:1px solid"],
  #page-dance [style*="border:1px solid"],
  #page-events [style*="border:1px solid"] {
    box-shadow: var(--card-shadow) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  }

  #page-artist [style*="border:1px solid"]:hover,
  #page-fan [style*="border:1px solid"]:hover,
  #page-detect [style*="border:1px solid"]:hover,
  #page-studio [style*="border:1px solid"]:hover,
  #page-dj [style*="border:1px solid"]:hover,
  #page-clubs [style*="border:1px solid"]:hover,
  #page-dance [style*="border:1px solid"]:hover,
  #page-events [style*="border:1px solid"]:hover {
    box-shadow: var(--card-shadow-hover) !important;
    transform: translateY(-2px) !important;
  }

  /* Profile sub-pages */
  #now-sub-jukebox [style*="border:1px solid"],
  #now-sub-droproom [style*="border:1px solid"],
  #now-sub-dropstage [style*="border:1px solid"],
  #now-sub-lrevents [style*="border:1px solid"],
  #now-sub-lrclubs [style*="border:1px solid"],
  #now-sub-collab [style*="border:1px solid"],
  #gssProfile [style*="border:1px solid"] {
    box-shadow: var(--card-shadow) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  }


  /* JS-rendered card wrappers (Clubs, Events, Dance, Studio, Discover) */
  #clubsGrid > div,
  #eventsGrid > div,
  #danceGrid > div,
  #studioGrid > div,
  #discoverGrid > div,
  #gearGrid .gs-store-card {
    box-shadow: var(--card-shadow) !important;
    border-color: rgba(123,47,255,0.28) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
  }

  #clubsGrid > div:hover,
  #eventsGrid > div:hover,
  #danceGrid > div:hover,
  #studioGrid > div:hover,
  #discoverGrid > div:hover {
    box-shadow: var(--card-shadow-hover) !important;
    transform: translateY(-2px) !important;
    border-color: var(--card-border-hover) !important;
  }

  /* ── COLLAB TIPS BAR ── */
  .cs-tips-bar {
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
    background:rgba(255,255,255,0.03); border:1px solid rgba(200,180,255,0.13);
    border-radius:14px; padding:16px 24px; margin-bottom:18px;
  }
  .cs-tips-earned { display:flex; flex-direction:column; }
  .cs-tips-earned-label { font-size:0.6rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(0,230,118,0.6); margin-bottom:3px; }
  .cs-tips-earned-amount { font-size:2rem; font-weight:800; color:#00E676; font-family:var(--font-head); line-height:1; }
  .cs-tips-earned-sub { font-size:0.68rem; color:var(--muted); margin-top:3px; }
  .cs-tips-center { text-align:center; }
  .cs-tips-center-label { font-size:0.6rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
  .cs-tips-amounts { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
  .cs-tip-btn { padding:7px 13px; border-radius:8px; border:1px solid rgba(0,230,118,0.2); background:rgba(0,230,118,0.07); color:#00E676; font-size:0.75rem; font-weight:700; cursor:pointer; transition:all 0.2s; font-family:var(--font-body); }
  .cs-tip-btn:hover { background:rgba(0,230,118,0.16); border-color:rgba(0,230,118,0.4); }
  .cs-tip-btn.active { background:rgba(0,230,118,0.2); border-color:rgba(0,230,118,0.5); }
  .cs-tip-send { width:100%; margin-top:8px; padding:9px; background:linear-gradient(135deg,#00E676,#009688); color:#000; border:none; border-radius:8px; font-size:0.8rem; font-weight:800; cursor:pointer; font-family:var(--font-body); }
  .cs-tips-splits { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
  .cs-tips-splits-label { font-size:0.6rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
  .cs-tips-split-row { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
  .cs-tips-split-av { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.55rem; font-weight:800; color:var(--t1, #fff); flex-shrink:0; }
  .cs-tips-split-name { font-size:0.72rem; color:var(--muted); }
  .cs-tips-split-pct { font-size:0.72rem; font-weight:700; color:var(--text); min-width:32px; text-align:right; }
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    background-color: #080612;
    background-image: url('../assets/bg.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text);
    font-family: 'Epilogue', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
  }
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 6, 18, 0.72);
    z-index: 0;
    pointer-events: none;
  }
  /* Platform ambient — above dark veil, below .page (z-index:1) / chrome.
     Always present (no remount on page change → no glow flash). */
  body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--fx-ambient-height, min(72vh, 720px));
    pointer-events: none;
    z-index: 0;
    background: var(--fx-ambient-bg);
    -webkit-mask-image: var(--fx-ambient-mask);
    mask-image: var(--fx-ambient-mask);
  }

  select {
    background: rgba(13, 8, 30, 0.92);
    color: var(--t1, #fff);
    border: 1px solid rgba(123, 47, 255, 0.4);
    border-radius: 20px;
    padding: 8px 16px;
    font-family: 'Epilogue', sans-serif;
    font-size: 0.84rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: border-color 0.2s;
  }
  select:focus {
    border-color: rgba(123, 47, 255, 0.8);
    box-shadow: 0 0 0 2px rgba(123, 47, 255, 0.2);
  }
  select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  select option {
    background: #130d2a;
    color: var(--t1, #fff);
    padding: 8px;
    font-family: 'Epilogue', sans-serif;
  }

  /* ── VIDEO COLLAB GRID (adaptive by active panel count) ── */
  .cv-grid-wrap {
    display:grid; gap:10px;
    margin-bottom:20px; padding:16px;
    background:rgba(0,0,0,0.3); border:1px solid rgba(123,47,255,0.28);
    border-radius:14px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    align-items:stretch;
  }
  /* Collab video fills stage column (no legacy ±24px bleed past capped inner) */
  #now-sub-collab #csVideoGrid.cv-grid-wrap {
    width:100%;
    margin-left:0;
    margin-right:0;
    box-sizing:border-box;
  }
  .cv-grid-wrap[data-count="1"] {
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  .cv-grid-wrap[data-count="2"] {
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }
  .cv-grid-wrap[data-count="3"] {
    grid-template-columns:1fr 1.4fr;
    grid-template-rows:auto auto;
    grid-template-areas:
      "m0 host"
      "m1 host";
  }
  .cv-grid-wrap[data-count="3"] .cv-area-m0 { grid-area:m0; }
  .cv-grid-wrap[data-count="3"] .cv-area-m1 { grid-area:m1; }
  .cv-grid-wrap[data-count="3"] .cv-area-host { grid-area:host; }
  .cv-grid-wrap[data-count="4"] {
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
  }
  .cv-grid-wrap[data-count="5"] {
    grid-template-columns:1fr 1.4fr 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:
      "m0 host m2"
      "m1 host m3";
  }
  .cv-grid-wrap[data-count="5"] .cv-area-m0 { grid-area:m0; }
  .cv-grid-wrap[data-count="5"] .cv-area-m1 { grid-area:m1; }
  .cv-grid-wrap[data-count="5"] .cv-area-host { grid-area:host; }
  .cv-grid-wrap[data-count="5"] .cv-area-m2 { grid-area:m2; }
  .cv-grid-wrap[data-count="5"] .cv-area-m3 { grid-area:m3; }
  .cv-grid-wrap .cv-grid-panel {
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    height:100%;
  }
  .cv-grid-wrap[data-count="3"] .cv-area-host,
  .cv-grid-wrap[data-count="5"] .cv-area-host {
    height:100%;
  }
  /* Odd counts: host feed fills span-2 height (= stacked musicians). Even: all stay 16:9. */
  .cv-grid-wrap[data-count="3"] .cv-area-host .cv-cam-feed,
  .cv-grid-wrap[data-count="5"] .cv-area-host .cv-cam-feed {
    flex:1;
    aspect-ratio:auto;
    min-height:0;
  }
  /* Even counts: equal panels — no host size/border emphasis */
  .cv-grid-wrap[data-count="2"] .cv-cam-host,
  .cv-grid-wrap[data-count="4"] .cv-cam-host {
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    box-shadow:none;
  }
  .cv-cam { display:flex; flex-direction:column; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); height:100%; }
  .cv-grid-wrap .cv-cam-sm { flex:1 1 auto; min-height:0; height:100%; }
  .cv-cam-sm { flex:none; }
  .cv-cam-host { border:2px solid rgba(233,30,140,0.5); border-radius:12px; position:relative; box-shadow:0 0 24px rgba(233,30,140,0.15); }
  .cv-host-badge {
    position:absolute; top:10px; left:10px; z-index:3;
    background:var(--grad); color:var(--t1, #fff); font-size:0.6rem; font-weight:800;
    padding:3px 8px; border-radius:16px; letter-spacing:0.1em;
    display:flex; align-items:center; gap:4px;
  }
  .cv-host-live {
    position:absolute; top:10px; right:10px; z-index:3;
    background:rgba(0,0,0,0.7); color:#ff3b3b; font-size:0.62rem; font-weight:700;
    padding:3px 8px; border-radius:16px; letter-spacing:0.08em;
    display:flex; align-items:center; gap:5px;
  }
  .cv-grid-wrap .cv-cam-feed {
    width:100%;
    aspect-ratio:16 / 9;
    flex:none;
    min-height:unset;
    position:relative;
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    overflow:hidden;
  }
  .cv-cam-feed {
    flex:1; min-height:120px; position:relative;
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    overflow:hidden;
  }
  .cv-host-feed { min-height:160px; }
  .cv-cam-avatar {
    width:50px; height:50px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1.1rem; color:var(--t1, #fff); z-index:1;
    box-shadow:0 4px 16px rgba(0,0,0,0.4);
  }
  .cv-host-avatar { width:72px; height:72px; font-size:1.5rem; box-shadow:0 0 30px rgba(123,47,255,0.4); }
  .cv-host-glow {
    position:absolute; inset:0;
    background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(123,47,255,0.12), transparent);
    pointer-events:none;
  }
  .cv-cam-wave {
    position:absolute; bottom:0; left:0; right:0; height:28px; overflow:hidden; opacity:0.5;
    display:flex; align-items:flex-end; gap:2px; justify-content:center; padding:0 8px;
  }
  .cv-host-wave { height:36px; opacity:0.6; }
  .cv-wave-bar {
    width:3px; border-radius:2px 2px 0 0;
    background:linear-gradient(to top, rgba(123,47,255,0.4), rgba(233,30,140,0.6));
    animation:cvWaveAnim 0.6s ease-in-out infinite alternate;
  }
  @keyframes cvWaveAnim { from { height:4px; } to { height:var(--h,18px); } }
  @keyframes cvBlink { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
  .cv-cam-bar {
    display:flex; align-items:center; gap:6px; padding:7px 10px;
    background:rgba(0,0,0,0.5); border-top:1px solid rgba(200,180,255,0.11);
  }
  .cv-host-bar { padding:10px 14px; background:rgba(0,0,0,0.6); }
  .cv-cam-name { font-size:0.78rem; font-weight:600; flex:1; }
  .cv-cam-role { font-size:0.65rem; color:var(--muted); }
  .cv-cam-mic { font-size:0.72rem; margin-left:auto; opacity:0.7; }
  .cv-join-btn {
    margin-left: auto;
  }
  .cv-join-btn:hover { opacity:0.8; }
  /* Join entry sits BELOW adaptive grid — does not affect data-count / panel geometry */
  #now-sub-collab .cs-join-bar {
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin:0 0 16px;
    padding:12px 14px;
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:12px;
    box-shadow:var(--card-shadow);
    font-family:var(--font-body);
  }
  #now-sub-collab .cs-join-bar-slots {
    font-size:0.8rem;
    color:var(--muted);
  }
  #now-sub-collab .cs-join-bar-btn:hover {
    opacity: 0.92;
  }

  .cv-stream-slot { position:absolute; inset:0; width:100%; height:100%; }
  .cv-stream-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; }
  .cv-stream-wrap { position:absolute; inset:0; z-index:2; overflow:hidden; }
  .cv-stream-wrap:empty { display:none; }
  .cv-stream-iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
  .cv-stream-btn {
    margin-left: 4px;
    white-space: nowrap;
  }

  .cs-recap-section { margin-bottom: 20px; }
  .cs-recap-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
  }
  .cs-recap-title {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
  }
  .cs-recap-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .cs-recap-wrap {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: 14px; overflow: hidden; background: var(--card2);
    border: 1px solid var(--border);
  }
  .cs-recap-wrap:empty { display: none; }
  .cs-recap-wrap .cv-recap-iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
  }
  .cs-recap-placeholder {
    margin: 0; padding: 28px 20px; text-align: center; color: var(--muted);
    font-size: 0.9rem; background: var(--card2); border: 1px dashed var(--border);
    border-radius: 14px;
  }
  #csVideoGrid.cv-grid-wrap--finalized-recap { margin-top: 4px; }

  /* ── NAVBAR — floating Night glass ── */
  nav {
    position:fixed;
    top: var(--fx-nav-top, 8px);
    left: var(--fx-nav-inset-x, 14px);
    right: var(--fx-nav-inset-x, 14px);
    z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 var(--fx-nav-pad-x, 22px);
    height: var(--fx-nav-h, 52px);
    box-sizing: border-box;
    border-radius: var(--fx-nav-radius, 16px);
    background: var(--fx-nav-bg, rgba(10, 4, 24, 0.50));
    -webkit-backdrop-filter: blur(var(--fx-nav-blur, 18px)) saturate(var(--fx-nav-sat, 140%));
    backdrop-filter: blur(var(--fx-nav-blur, 18px)) saturate(var(--fx-nav-sat, 140%));
    border: 0;
    border-bottom: none;
    box-shadow:
      inset 0 1px 0 var(--fx-nav-rim, rgba(255, 255, 255, 0.14)),
      0 0 0 1px var(--fx-nav-edge, rgba(255, 255, 255, 0.08)),
      var(--fx-nav-shadow, 0 14px 30px -14px rgba(0, 0, 0, 0.7));
  }
  .nav-logo { display:flex; align-items:center; gap:10px; cursor:pointer; flex-shrink:0; transform-origin:center center; }
  .nav-logo svg { width:32px; height:32px; }
  .nav-logo span { font-family:var(--font-head); font-weight:800; font-size:1.2rem; letter-spacing:0.04em; }
  .nav-logo-mark, .nav-logo-word { display:inline-block; transform-origin:center center; }

  /* Nav logo motion — one-shot ~1s, never loops; restart by class swap + reflow */
  @keyframes fm-logo-thrust {
    0%, 100% { transform: perspective(420px) translateZ(0) scale(1); }
    40% { transform: perspective(420px) translateZ(36px) scale(1.14); }
  }
  @keyframes fm-logo-seesaw {
    0%, 100% { transform: rotate(0deg); }
    22% { transform: rotate(-11deg); }
    48% { transform: rotate(0deg); }
    72% { transform: rotate(11deg); }
  }
  @keyframes fm-logo-hop {
    0%, 100% { transform: translateY(0); }
    35% { transform: translateY(-16px); }
    55% { transform: translateY(-4px); }
  }
  @keyframes fm-logo-flag {
    0%, 100% { transform: translateY(0) skewX(0deg) rotate(0deg); }
    20% { transform: translateY(-9px) skewX(-12deg) rotate(-4deg); }
    45% { transform: translateY(4px) skewX(11deg) rotate(3deg); }
    70% { transform: translateY(-6px) skewX(-7deg) rotate(-2deg); }
  }
  .nav-logo--thrust {
    animation: fm-logo-thrust 1s ease-in-out 1 both;
  }
  .nav-logo--seesaw {
    animation: fm-logo-seesaw 1s ease-in-out 1 both;
  }
  .nav-logo--hop {
    animation: fm-logo-hop 1s ease-in-out 1 both;
  }
  .nav-logo--flag .nav-logo-mark,
  .nav-logo--flag .nav-logo-word {
    animation: fm-logo-flag 0.88s ease-in-out 1 both;
  }
  .nav-logo--flag .nav-logo-word--fortis { animation-delay: 0.12s; }
  .nav-logo--flag .nav-logo-word--music { animation-delay: 0.24s; }
  @media (prefers-reduced-motion: reduce) {
    .nav-logo--thrust,
    .nav-logo--seesaw,
    .nav-logo--hop {
      animation: none !important;
    }
    .nav-logo--flag .nav-logo-mark,
    .nav-logo--flag .nav-logo-word {
      animation: none !important;
    }
  }
  .nav-links { display:flex; gap:4px; align-items:center; }
  /* Desktop nav labels — sole size rule (token). Do not set font-size on stacks/spans separately. */
  .nav-links a,
  .nav-links a.nav-link-stack,
  .nav-links a.nav-now-live,
  .nav-links a span {
    font-size: var(--fx-nav-fs, 12.5px);
  }
  .nav-links a {
    padding:6px 14px; border-radius:8px; font-weight:var(--fx-nav-fw, 500);
    color:var(--t1, rgba(255,255,255,0.9)); text-decoration:none; cursor:pointer; transition:all 0.2s;
    display:flex; align-items:center; gap:6px; white-space:nowrap;
  }
  .nav-links a:hover { color:var(--t1, rgba(255,255,255,0.9)); background:transparent; }
  .nav-links a.active { color:var(--t1, #fff); font-weight:600; }
  /* Stacked nav labels (Dance, Music Studio, Clubs Bars, Gear Store) — same vertical rhythm */
  .nav-links a.nav-link-stack {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    line-height: 1.22;
    text-align: center;
    white-space: normal;
    min-height: 0;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .nav-links a.nav-link-stack span {
    font-weight: var(--fx-nav-fw, 500);
    color: var(--t1, rgba(255, 255, 255, 0.92));
    letter-spacing: 0.01em;
  }
  .nav-links a.nav-link-stack:hover span {
    color: var(--t1, #fff);
  }
  .nav-links a.nav-now-live,
  .nav-links a.nav-now-live span {
    font-weight: var(--fx-nav-fw, 500);
  }
  /* Ghost secondary — white outline to match header (brand is pink/purple gradient elsewhere) */
  .fm-btn-public-profile {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 22px;
    padding: 15px 22px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.88);
    color: var(--t1, #fff);
    border-radius: 14px;
    font-family: var(--font-body), 'Epilogue', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    line-height: 1.35;
    transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s, opacity 0.2s;
    box-shadow: 0 0 0 1px rgba(233, 30, 140, 0.12);
  }
  .fm-btn-public-profile:hover {
    color: var(--t1, #fff);
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(123, 47, 255, 0.25);
  }
  .nav-btn {
    padding:8px 18px; border-radius:10px; font-size:0.88rem; font-weight:600;
    background:var(--grad); color:var(--t1, #fff); border:none; cursor:pointer;
    display:flex; align-items:center; gap:8px; transition:opacity 0.2s;
  }
  .nav-btn:hover { opacity:0.88; }

  /* ── PAGES ── */
  .page { display:none; padding-top:var(--cs-chrome-top, var(--fx-nav-chrome, 60px)); min-height:100vh; animation:fadeIn 0.3s ease; position:relative; z-index:1; background:transparent; }
  .page.active { display:block; }
  @keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

  /* ── HOME HERO ── */
  .hero {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:80px 24px 60px; text-align:center; position:relative;
  }
  .hero::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 60% 50% at 50% 40%, rgba(123,47,255,0.18), transparent);
    pointer-events:none;
  }
  .hero-icon {
    width:90px; height:90px; border-radius:20px; background:transparent;
    display:flex; align-items:center; justify-content:center; margin-bottom:20px;
    box-shadow:0 0 40px rgba(123,47,255,0.4);
  }
  .hero-icon img { width:90px; height:90px; border-radius:20px; object-fit:cover; display:block; }
  .hero h1 { font-family:var(--font-head); font-size:2rem; font-weight:800; margin-bottom:8px; }
  .hero h1 span { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  .hero p { color:var(--muted); max-width:500px; line-height:1.6; margin-bottom:28px; font-size:0.95rem; }
  .hero-search {
    width:100%; max-width:480px; display:flex; align-items:center;
    background:var(--card2); border:1px solid var(--card-border); border-radius:12px;
    padding:10px 16px; gap:10px; margin-bottom:24px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .hero-search input { flex:1; background:none; border:none; outline:none; color:var(--text); font-size:0.9rem; font-family:var(--font-body); }
  .hero-search input::placeholder { color:var(--muted); }
  .hero-btns { display:flex; gap:12px; }
  .btn-primary { padding:10px 22px; background:var(--grad); color:var(--t1, #fff); border:none; border-radius:10px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:8px; font-size:0.9rem; transition:opacity 0.2s; }
  .btn-primary:hover { opacity:0.88; }
  .btn-outline { padding:10px 22px; background:transparent; color:var(--text); border:1.5px solid rgba(255,255,255,0.2); border-radius:10px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:8px; font-size:0.9rem; transition:all 0.2s; }
  .btn-outline:hover { border-color:rgba(255,255,255,0.4); background:rgba(200,180,255,0.07); }

  /* ── SECTION ── */
  .section { padding:32px 24px; max-width:1100px; margin:0 auto; }
  .section-title { font-family:var(--font-head); font-size:1.15rem; font-weight:700; margin-bottom:18px; display:flex; align-items:center; gap:8px; }
  .section-title span { color:var(--pink); }

  /* ── ARTIST CARDS ── */
  .artists-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
  .artist-card {
    background:var(--card); border:1px solid var(--card-border); border-radius:16px;
    overflow:hidden; transition:transform 0.2s, box-shadow 0.2s; cursor:pointer;
  }
  .artist-card:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(123,47,255,0.15); }
  .artist-card-img { width:100%; height:160px; object-fit:cover; background:linear-gradient(135deg,#1a1a2e,#2d1b4e); position:relative; display:flex; align-items:center; justify-content:center; }
  .artist-card-img .shield { position:absolute; bottom:10px; right:10px; opacity:0.9; }
  .artist-card-img .play-overlay {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.4); opacity:0; transition:opacity 0.2s;
  }
  .artist-card:hover .play-overlay { opacity:1; }
  .artist-card-body { padding:16px; }
  .artist-card-body h3 { font-family:var(--font-head); font-weight:700; font-size:1rem; margin-bottom:3px; }
  .artist-card-body .genre { color:var(--muted); font-size:0.82rem; margin-bottom:12px; }
  .artist-card-footer { display:flex; align-items:center; justify-content:space-between; }
  .followers { font-size:0.8rem; color:var(--muted); }
  .btn-sm { padding:6px 14px; background:var(--grad); color:var(--t1, #fff); border:none; border-radius:8px; font-size:0.8rem; font-weight:600; cursor:pointer; }

  /* ── TRENDING ── */
  .trending-list { display:flex; flex-direction:column; gap:10px; }
  .trending-item {
    background:var(--card); border:1px solid var(--card-border); border-radius:12px;
    padding:14px 18px; display:flex; align-items:center; gap:16px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .trend-rank { font-family:var(--font-head); font-size:1.1rem; font-weight:800; color:var(--muted); min-width:32px; }
  .trend-info { flex:1; }
  .trend-info h4 { font-weight:600; font-size:0.95rem; }
  .trend-info span { font-size:0.8rem; color:var(--muted); }
  .trend-streams { text-align:right; }
  .trend-streams strong { display:block; color:var(--pink); font-weight:700; font-size:0.95rem; }
  .trend-streams small { color:var(--muted); font-size:0.75rem; }

  /* ── FEATURES ── */
  .features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .feature-card {
    background:linear-gradient(135deg,rgba(123,47,255,0.1),rgba(233,30,140,0.05));
    border:1px solid rgba(123,47,255,0.2); border-radius:16px; padding:24px;
    text-align:center;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .feature-icon { width:52px; height:52px; border-radius:14px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
  .feature-card h3 { font-family:var(--font-head); font-weight:700; margin-bottom:8px; font-size:0.95rem; }
  .feature-card p { color:var(--muted); font-size:0.82rem; line-height:1.5; }

  /* ── MUSIC CARDS ── */
  .music-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
  .music-card {
    background:var(--card); border:1px solid var(--card-border); border-radius:14px;
    overflow:hidden; transition:transform 0.2s;
    box-shadow: var(--card-shadow);
  }
  .music-card:hover { transform:translateY(-2px); }
  .music-img { width:100%; height:180px; background:linear-gradient(135deg,#1a0a2e,#3d1060); display:flex; align-items:center; justify-content:center; position:relative; }
  .music-img .play-btn {
    width:48px; height:48px; background:var(--purple); border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:transform 0.2s; box-shadow:0 4px 20px rgba(123,47,255,0.5);
  }
  .music-img .play-btn:hover { transform:scale(1.1); }
  .music-card-body { padding:14px; }
  .music-card-body h3 { font-weight:700; font-size:0.9rem; margin-bottom:6px; }
  .music-meta { display:flex; justify-content:space-between; align-items:center; }
  .music-tag { background:rgba(255,255,255,0.08); border-radius:6px; padding:3px 8px; font-size:0.75rem; color:var(--muted); }
  .music-year { font-size:0.78rem; color:var(--muted); }

  /* ── UPLOAD PAGE ── */
  .upload-container { max-width:var(--width-page); margin:0 auto; padding:48px 24px; }
  .upload-header { margin-bottom:40px; }
  .upload-header h1 { font-family:var(--font-head); font-size:2rem; font-weight:800; margin-bottom:10px; letter-spacing:-0.03em; }
  .upload-header p { color:var(--t3, rgba(255,255,255,0.36)); font-size:0.88rem; line-height:1.7; font-weight:300; }
  .form-card { background:rgba(255,255,255,0.025); border:1px solid rgba(123,47,255,0.28); border-radius:16px; padding:28px; margin-bottom:16px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .form-card h2 { font-family:var(--font-head); font-weight:700; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
  .form-group { margin-bottom:16px; }
  .form-group label { display:block; font-size:0.72rem; color:var(--muted); margin-bottom:8px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; }
  .form-group input, .form-group select, .form-group textarea {
    width:100%; padding:11px 14px; background:rgba(200,180,255,0.07); border:1px solid rgba(255,255,255,0.09);
    border-radius:16px; color:var(--text); font-family:var(--font-body); font-size:0.9rem; outline:none;
    transition:border-color 0.2s;
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:rgba(200,169,126,0.5); }
  .form-group select option { background:#1a1428; }
  .form-group textarea { resize:vertical; min-height:84px; }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

  /* Checkbox / radio rows — the generic input rule above stretches every input
     to full width, which would push the adjacent text to the far edge. */
  .form-group input[type=checkbox],
  .form-group input[type=radio] {
    width:auto; padding:0; margin:0; border:none; border-radius:0;
    background:transparent; flex:0 0 auto;
    accent-color:var(--purple); cursor:pointer;
  }
  .form-group label.form-check {
    display:flex; align-items:flex-start; gap:10px; margin:0;
    font-size:0.88rem; font-weight:400; letter-spacing:normal;
    text-transform:none; color:var(--text); line-height:1.5; cursor:pointer;
  }
  /* keeps the box on the first text line when the label wraps */
  .form-group label.form-check > input { margin-top:0.28em; }
  .form-group label.form-check > span { min-width:0; }
  .form-check-options { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:8px; }
  .form-req { color:var(--t2, #C8A97E); }
  .drop-zone {
    border:1px dashed rgba(255,255,255,0.12); border-radius:16px; padding:40px 32px;
    text-align:center; cursor:pointer; transition:all 0.2s; background:transparent;
    box-shadow: var(--card-shadow);
  }
  .drop-zone:hover { border-color:rgba(200,169,126,0.4); background:rgba(200,169,126,0.03); }
  .drop-zone .icon { font-size:1.4rem; margin-bottom:12px; opacity:0.4; }
  .drop-zone p { color:var(--muted); font-size:0.84rem; }
  .drop-zone strong { color:var(--t2, rgba(255,255,255,0.7)); font-weight:500; }
  .drop-zone input[type=file] { display:none; }

  /* Protected track cover art */
  .fm-protect-cover-pick {
    display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;
  }
  .fm-protect-cover-actions { flex:1; min-width:160px; }
  .fm-protect-cover-actions input[type=file] { display:none; }
  .fm-track-cover-tile {
    width:88px; height:88px; border-radius:10px; flex-shrink:0;
    background:var(--card2) center/cover no-repeat;
    border:1px solid var(--border); box-sizing:border-box;
  }
  .fm-track-cover-tile--sm { width:56px; height:56px; border-radius:8px; }
  .fm-track-cover-tile--empty {
    background:
      linear-gradient(135deg, rgba(123,47,255,0.18), rgba(233,30,140,0.12)),
      var(--card2);
  }
  .fm-track-cover-row {
    display:flex; align-items:center; gap:12px; min-width:0;
  }
  .fm-track-cover-row > .fm-track-cover-meta { flex:1; min-width:0; }

  .file-selected { background:rgba(0,230,118,0.04); border-color:rgba(0,230,118,0.2); }
  .file-selected p { color:rgba(0,230,118,0.7); }

  /* ── PROGRESS / STATUS ── */
  .status-box { background:rgba(255,255,255,0.02); border:1px solid rgba(123,47,255,0.28); border-radius:16px; padding:24px; margin-top:16px; display:none;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .status-box.show { display:block; }
  .status-step { display:flex; align-items:center; gap:14px; padding:10px 0; font-size:0.84rem; border-bottom:1px solid rgba(200,180,255,0.07); }
  .status-step:last-child { border-bottom:none; }
  .step-icon { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.7rem; flex-shrink:0; font-weight:700; }
  .step-done { background:rgba(0,230,118,0.12); color:#00E676; }
  .step-pending { background:rgba(200,180,255,0.07); color:var(--t3, rgba(255,255,255,0.2)); }
  .step-active { background:rgba(200,169,126,0.15); color:var(--t2, #C8A97E); animation:pulse 1.4s ease-in-out infinite; }

  /* ── DASHBOARD ── */
  .dashboard-container { max-width:900px; margin:0 auto; padding:32px 24px; }
  .dash-header { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
  .dash-avatar { width:64px; height:64px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-family:var(--font-head); font-weight:800; }
  .dash-info h1 { font-family:var(--font-head); font-size:1.3rem; font-weight:800; }
  .dash-info p { color:var(--muted); font-size:0.85rem; margin-top:3px; }
  .dash-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(0,230,118,0.1); border:1px solid rgba(0,230,118,0.3); border-radius:20px; padding:3px 10px; font-size:0.75rem; color:var(--green); margin-top:6px; }
  .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
  .stat-card { background:var(--card); border:1px solid var(--card-border); border-radius:14px; padding:16px; text-align:center;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .stat-card .num { font-family:var(--font-head); font-size:1.5rem; font-weight:800; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  .stat-card .lbl { font-size:0.75rem; color:var(--muted); margin-top:3px; }
  .protected-list { display:flex; flex-direction:column; gap:12px; }
  .protected-item {
    background:var(--card); border:1px solid var(--card-border); border-radius:14px;
    padding:16px 20px; display:flex; align-items:center; gap:16px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .prot-icon { width:44px; height:44px; border-radius:10px; background:rgba(123,47,255,0.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .prot-info { flex:1; }
  .prot-info h4 { font-weight:600; font-size:0.92rem; margin-bottom:3px; }
  .prot-info .hash { font-size:0.72rem; color:var(--muted); font-family:monospace; }
  .prot-date { font-size:0.78rem; color:var(--muted); text-align:right; }
  .prot-date .verified { color:var(--green); font-size:0.75rem; display:flex; align-items:center; gap:4px; justify-content:flex-end; margin-bottom:4px; }
  .prot-actions { display:flex; gap:8px; margin-left:12px; }
  .btn-dl { padding:7px 14px; background:rgba(123,47,255,0.15); border:1px solid rgba(123,47,255,0.3); color:var(--purple); border-radius:8px; font-size:0.8rem; font-weight:600; cursor:pointer; transition:all 0.2s; }
  .btn-dl:hover { background:var(--purple); color:var(--t1, #fff); }

  /* ── CERTIFICATE MODAL ── */
  .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:200; align-items:center; justify-content:center; padding:20px; }
  .modal-overlay.show { display:flex; }
  .modal { background:var(--card); border:1px solid var(--card-border); border-radius:20px; padding:32px; max-width:540px; width:100%; animation:fadeIn 0.2s ease;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .modal h2 { font-family:var(--font-head); font-size:1.2rem; font-weight:800; margin-bottom:6px; }
  .modal p { color:var(--muted); font-size:0.85rem; margin-bottom:20px; }
  .cert-preview {
    background:linear-gradient(135deg,#0d0d1a,#1a0a2e); border:1px solid rgba(123,47,255,0.3);
    border-radius:14px; padding:24px; margin-bottom:20px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .cert-preview .cert-logo { font-family:var(--font-head); font-size:1rem; font-weight:800; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
  .cert-preview h3 { font-size:0.9rem; color:var(--t2, rgba(200,180,255,0.72)); margin-bottom:4px; }
  .cert-preview .cert-title { font-family:var(--font-head); font-size:1.1rem; font-weight:700; margin-bottom:16px; }
  .cert-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(200,180,255,0.09); font-size:0.8rem; }
  .cert-row:last-child { border:none; }
  .cert-row span:first-child { color:var(--muted); }
  .cert-row span:last-child { font-family:monospace; font-size:0.75rem; color:var(--green); }
  .modal-actions { display:flex; gap:12px; }
  .btn-close { padding:10px 20px; background:rgba(200,180,255,0.11); border:1px solid var(--border); color:var(--text); border-radius:10px; cursor:pointer; font-weight:600; font-size:0.88rem; }

  /* ── TOAST ── */
  .toast {
    position:fixed; bottom:80px; left:50%; right:auto; background:var(--card2); border:1px solid var(--border);
    border-radius:12px; padding:14px 20px; font-size:0.88rem; z-index:1200;
    transform:translate(-50%, 80px); opacity:0; transition:all 0.3s; max-width:min(420px, calc(100vw - 32px));
    display:flex; align-items:center; gap:10px; text-align:center; justify-content:center;
    pointer-events:none; box-sizing:border-box;
  }
  .toast.show { transform:translate(-50%, 0); opacity:1; }
  .toast.success {
    border-color: rgba(0, 230, 118, 0.55);
    box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.2), 0 8px 28px rgba(0, 230, 118, 0.18);
  }
  .toast.success .toast-icon { color: var(--green); }
  .toast.error {
    border-color: rgba(233, 30, 140, 0.55);
    box-shadow: 0 0 0 1px rgba(233, 30, 140, 0.22), 0 8px 28px rgba(123, 47, 255, 0.22);
  }

  /* ── RESPONSIVE ── */
  @media(max-width:640px) {
    .features-grid { grid-template-columns:1fr; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .form-row { grid-template-columns:1fr; row-gap:0; }
    .nav-links { display:none; }
  }

  /* ══════════════════════════════════════════════
     MOBILE OVERRIDES — ALL PAGES & SUB-PAGES
  ══════════════════════════════════════════════ */

  #mob-nav { display:none; }
  #mob-drawer-overlay { display:none; }
  #mob-drawer { display:none; }

  @media(max-width:768px) {

    .page { padding-bottom: calc(var(--fx-nav-top, 8px) + 62px + 20px + env(safe-area-inset-bottom, 0px)) !important; }
    .toast { bottom: calc(var(--fx-nav-top, 8px) + 62px + 24px + env(safe-area-inset-bottom, 0px)) !important; max-width: min(420px, calc(100vw - 24px)) !important; }

    /* ════════════════════════════════════════════
       NOW PAGE — main grid: 1 col
       NOTE: original CSS has @media(max-width:960px){1fr 1fr}
       which overrides the 700px rule — must use !important
    ════════════════════════════════════════════ */

    .now-grid {
      grid-template-columns: 1fr !important;
      padding: 0 14px 40px !important;
      gap: 12px !important;
    }

    .now-drop-card,
    .now-feed-card {
      grid-column: auto !important;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }

    .now-live-room-card {
      grid-column: auto !important;
      width: 100% !important;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }

    #nowFeedList {
      grid-template-columns: 1fr !important;
    }

    .now-room {
      padding: 12px 14px !important;
      gap: 14px !important;
      margin-bottom: 6px !important;
    }
    .now-room-cover { width: 46px !important; height: 46px !important; }
    .now-room-name  { font-size: 0.92rem !important; }
    .now-room-genre { font-size: 0.76rem !important; }

    /* ════════════════════════════════════════════
       COLLAB — Tips bar: 3-col grid → stacked col
    ════════════════════════════════════════════ */

    .cs-tips-bar {
      display: flex !important;
      flex-direction: column !important;
      gap: 20px !important;
      padding: 18px !important;
      align-items: stretch !important;
    }

    .cs-tips-center { width: 100% !important; }

    .cs-tips-amounts {
      display: grid !important;
      grid-template-columns: 1fr 1fr 1fr !important;
      gap: 8px !important;
    }

    .cs-tip-btn {
      width: 100% !important;
      padding: 10px 8px !important;
      font-size: 0.82rem !important;
    }

    .cs-tip-send {
      margin-top: 10px !important;
      padding: 12px !important;
      font-size: 0.88rem !important;
    }

    .cs-tips-earned-amount { font-size: 2.4rem !important; }

    .cs-tips-splits { align-items: flex-start !important; width: 100% !important; }
    .cs-tips-split-row { justify-content: flex-start !important; gap: 10px !important; }
    .cs-tips-split-pct { min-width: 40px !important; text-align: left !important; }

    /* ════════════════════════════════════════════
       COLLAB — Adaptive video grid → single column stack
    ════════════════════════════════════════════ */

    #now-sub-collab #csVideoGrid.cv-grid-wrap {
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: auto !important;
      grid-template-areas: none !important;
      padding: 12px !important;
      gap: 10px !important;
    }
    #now-sub-collab .cv-grid-wrap .cv-grid-panel {
      grid-area: auto !important;
      height: auto !important;
    }
    #now-sub-collab .cv-grid-wrap .cv-cam-host .cv-cam-feed {
      aspect-ratio: 16 / 9 !important;
      flex: none !important;
      min-height: unset !important;
    }
    /* cv-join-btn sizing now comes from .fm-btn-sm */

    /* ════════════════════════════════════════════
       JUKEBOX ROOM — 3-col layout → 1-col stack
    ════════════════════════════════════════════ */

    .jb-room-layout {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
    }
    .jb-room-wrap { padding: 0 14px 80px !important; }

    /* Hero bar: grid → flex column */
    .jb-room-hero-bar {
      display: flex !important;
      flex-direction: column !important;
      gap: 14px !important;
      padding: 16px !important;
    }

    /* Prize section */
    .jb-prize-section { align-items: flex-start !important; width: 100% !important; }
    .jb-prize-big { font-size: 1.8rem !important; }
    .jb-prize-boost-btns { grid-template-columns: repeat(3,1fr) !important; }
    .jb-boost-btn { font-size: 0.82rem !important; padding: 9px 6px !important; }
    .jb-boost-contribute-btn { padding: 13px !important; font-size: 0.9rem !important; }

    /* Timer section */
    .jb-timer-section { width: 100% !important; text-align: center !important; }
    .jb-timer-big { font-size: 2.4rem !important; }

    /* Tokens / Predict section */
    .jb-tokens-section {
      align-items: flex-start !important;
      width: 100% !important;
    }
    .jb-tokens-desc { text-align: left !important; }
    .jb-propose-btn { width: 100% !important; padding: 12px !important; }

    /* Room header */
    .jb-room-header {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 8px !important;
    }
    .jb-room-title { font-size: 1.15rem !important; }

    .jb-chat { max-height: 300px !important;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
    .jb-vote-list { max-height: 260px !important; }

    /* ════════════════════════════════════════════
       DROP STAGE — side-by-side → stacked
    ════════════════════════════════════════════ */

    .dr-stage-main { flex-direction: column !important; padding: 14px !important; }
    .dr-chat-side { width: 100% !important;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
    .dr-wait-grid { grid-template-columns: 1fr !important; }

    /* ════════════════════════════════════════════
       LIVE ROOM — grid → 1-col
    ════════════════════════════════════════════ */

    .lr-grid { grid-template-columns: 1fr !important; }
    .lr-stage-main { flex-direction: column !important; }
    .lr-chat-panel { max-height: 320px !important;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }

    /* ════════════════════════════════════════════
       MUSIC STUDIO page — detail grid & card grid
    ════════════════════════════════════════════ */

    .studio-detail-grid {
      grid-template-columns: 1fr !important;
    }

    #danceGrid,
    #studioGrid {
      grid-template-columns: 1fr !important;
    }

    /* ════════════════════════════════════════════
       DANCE detail — 1fr 300px → 1 col
    ════════════════════════════════════════════ */

    #danceDetail > div[style*="grid-template-columns:1fr 300px"] {
      display: flex !important;
      flex-direction: column !important;
    }

    /* ════════════════════════════════════════════
       ALL detail pages — shared 2-col grid class
    ════════════════════════════════════════════ */

    .detail-grid-2col {
      grid-template-columns: 1fr !important;
    }

    /* ════════════════════════════════════════════
       EVENTS detail — 1fr 1fr → 1 col
    ════════════════════════════════════════════ */

    #eventDetail > div[style*="grid-template-columns:1fr 1fr"] {
      display: flex !important;
      flex-direction: column !important;
    }

    /* ════════════════════════════════════════════
       ARTIST page — inline grids → 1 col
    ════════════════════════════════════════════ */

    #page-artist [style*="grid-template-columns:1fr 1fr"][style*="gap:16px"],
    #page-artist [style*="grid-template-columns:1fr 1fr"][style*="gap:8px"] {
      display: flex !important;
      flex-direction: column !important;
    }

    /* Artist stats grid: 4-col → 2x2 */
    #page-artist [style*="grid-template-columns:repeat(4,1fr)"] {
      grid-template-columns: 1fr 1fr !important;
    }

    .stats-grid-4col {
      grid-template-columns: 1fr 1fr !important;
    }

    /* ════════════════════════════════════════════
       FAN page — inline grids → 1 col
    ════════════════════════════════════════════ */

    #page-fan [style*="grid-template-columns:1fr 1fr"][style*="gap:16px"] {
      display: flex !important;
      flex-direction: column !important;
    }

    /* ════════════════════════════════════════════
       DJ page — cards grid → 1 col
    ════════════════════════════════════════════ */

    #page-dj [style*="grid-template-columns"],
    #page-dj-profile [style*="grid-template-columns"],
    #page-beatmaker-profile [style*="grid-template-columns"] {
      grid-template-columns: 1fr !important;
    }

    /* ════════════════════════════════════════════
       DISCOVER — card grid → 1 col
    ════════════════════════════════════════════ */

    #page-discover [style*="grid-template-columns"] {
      grid-template-columns: 1fr !important;
    }

    /* ════════════════════════════════════════════
       LIVE ROOM player grid → 1 col
    ════════════════════════════════════════════ */

    .lr-player-grid {
      grid-template-columns: 1fr !important;
    }

    .lr-room-layout {
      grid-template-columns: 1fr !important;
    }

    .artists-grid    { grid-template-columns: 1fr !important; }
    .features-grid   { grid-template-columns: 1fr !important; }
    .fm-paths        { grid-template-columns: 1fr !important; }
    .fm-artists-scroll { grid-template-columns: 1fr 1fr !important; }
    .fm-events-grid  { grid-template-columns: 1fr !important; }

    /* ════════════════════════════════════════════
       DASHBOARD
    ════════════════════════════════════════════ */

    .stats-grid { grid-template-columns: 1fr 1fr !important; }
    .form-row   { grid-template-columns: 1fr !important; row-gap: 0 !important; }
    .prot-actions { flex-wrap: wrap !important; }

    /* ════════════════════════════════════════════
       NOW-SUB inner padding & misc
    ════════════════════════════════════════════ */

    .now-sub-inner { padding: 16px 14px 80px !important; }
    .now-drop-room-stats { flex-wrap: wrap !important; }

    /* ════════════════════════════════════════════
       NAV LOGO — left side of bottom bar
    ════════════════════════════════════════════ */

    .mob-nav-logo {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 4px 0 8px;
      background: transparent;
      border: none;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      flex-shrink: 0;
    }

    .mob-nav-logo:active { opacity: 0.75; }

    .mob-nav-logo-img {
      width: 28px;
      height: 28px;
      object-fit: contain;
      flex-shrink: 0;
      border-radius: 6px;
    }

    .mob-nav-logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1;
      color: var(--t1, #fff);
      font-family: var(--font-body);
      font-weight: 800;
      font-size: 0.74rem;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    .mob-nav-logo-text span {
      display: block;
      font-size: 0.43rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      opacity: 0.8;
      margin-top: 2px;
    }

    /* Remove separator */
    .mob-nav-sep { display: none; }

    /* Nav items — even flex, all 5 fit */
    .mob-nav-item {
      flex: 1;
      min-width: 0;
      padding: 5px 2px 4px;
    }

    .mob-nav-icon {
      width: 22px !important;
      height: 22px !important;
    }

    .mob-nav-icon svg {
      width: 17px !important;
      height: 17px !important;
    }

    .mob-nav-item span {
      font-size: 0.41rem !important;
      letter-spacing: 0.08em !important;
    }

    /* ════════════════════════════════
       BOTTOM NAV BAR
    ════════════════════════════════ */


    #mob-nav {
      display: flex;
      position: fixed;
      bottom: var(--fx-nav-top, 8px);
      left: var(--fx-nav-inset-x, 14px);
      right: var(--fx-nav-inset-x, 14px);
      z-index: 10000;
      height: 62px;
      box-sizing: border-box;
      border-radius: var(--fx-nav-radius, 16px);
      background: var(--fx-nav-bg, rgba(10, 4, 24, 0.50));
      -webkit-backdrop-filter: blur(var(--fx-nav-blur, 18px)) saturate(var(--fx-nav-sat, 140%));
      backdrop-filter: blur(var(--fx-nav-blur, 18px)) saturate(var(--fx-nav-sat, 140%));
      border: 0;
      border-top: none;
      align-items: stretch;
      padding-bottom: env(safe-area-inset-bottom, 0px);
      padding-left: 4px;
      padding-right: 4px;
      box-shadow:
        inset 0 1px 0 var(--fx-nav-rim, rgba(255, 255, 255, 0.14)),
        0 0 0 1px var(--fx-nav-edge, rgba(255, 255, 255, 0.08)),
        0 -14px 30px -14px rgba(0, 0, 0, 0.7);
    }

    #mob-nav::before { display: none; }

    .mob-nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      cursor: pointer;
      border: none;
      background: transparent;
      color: var(--t2, rgba(200,180,255,0.72));
      font-family: var(--font-body);
      font-size: 0.48rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 6px 2px 5px;
      transition: color 0.15s;
      -webkit-tap-highlight-color: transparent;
      position: relative;
    }

    .mob-nav-item.active { color: var(--t1, #fff); }

    .mob-nav-item.active::after {
      content: '';
      position: absolute;
      bottom: 0; left: 50%;
      transform: translateX(-50%);
      width: 20px; height: 2px;
      background: rgba(255,255,255,0.9);
    }

    .mob-nav-item:active { opacity: 0.75; }

    .mob-nav-icon {
      width: 26px; height: 26px;
      display: flex; align-items: center; justify-content: center;
      position: relative;
      transition: transform 0.15s;
    }

    .mob-nav-icon svg {
      width: 20px; height: 20px;
      stroke: currentColor;
      fill: none !important;
      stroke-width: 1.8;
      stroke-linecap: square;
      stroke-linejoin: miter;
    }

    .mob-nav-item.active .mob-nav-icon svg {
      stroke: #fff;
      filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
    }

    .mob-nav-item:active .mob-nav-icon { transform: scale(0.88); }

    .mob-nav-live-dot {
      position: absolute;
      top: -2px; right: -2px;
      width: 6px; height: 6px;
      background: #fff;
      border-radius: 50%;
      border: 1px solid rgba(233,30,140,0.6);
      animation: mobLivePulse 1.4s ease-in-out infinite;
    }

    @keyframes mobLivePulse {
      0%,100% { opacity:1; box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
      50%      { opacity:0.7; box-shadow: 0 0 0 4px rgba(255,255,255,0); }
    }

    #mob-btn-more .mob-nav-icon svg { stroke: currentColor; }
    #mob-btn-more.active .mob-nav-icon svg {
      stroke: #fff;
      filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
    }

    /* ════════════════════════════════
       DRAWER OVERLAY + PANEL
    ════════════════════════════════ */

    #mob-drawer-overlay {
      display: block;
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.75);
      z-index: 10001;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.28s ease;
    }
    #mob-drawer-overlay.open { opacity: 1; pointer-events: all; }

    #mob-drawer {
      display: block;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 10002;
      background: #111120;
      border-top: 1px solid rgba(255,255,255,0.1);
      padding: 0 0 env(safe-area-inset-bottom, 16px);
      transform: translateY(100%);
      transition: transform 0.36s cubic-bezier(0.22, 0.9, 0.36, 1);
      max-height: 90vh;
      overflow-y: auto;
    }
    #mob-drawer.open { transform: translateY(0); }

    #mob-drawer::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, #E91E8C 0%, #9B27AF 30%, #5B2FD9 60%, #4B26FF 100%);
    }

    .mob-drawer-handle {
      width: 32px; height: 3px;
      background: rgba(255,255,255,0.12);
      margin: 12px auto 0;
    }

    .mob-drawer-header {
      padding: 14px 18px 10px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid rgba(200,180,255,0.09);
    }

    .mob-drawer-title { display: flex; align-items: center; gap: 10px; }

    .mob-drawer-title-text {
      font-size: 0.55rem; font-weight: 800;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--t3, rgba(255,255,255,0.25));
    }

    .mob-drawer-title-badge {
      font-size: 0.5rem; font-weight: 800;
      letter-spacing: 0.08em; padding: 2px 6px;
      background: linear-gradient(135deg, #E91E8C, #7B2FFF);
      color: var(--t1, #fff);
    }

    .mob-drawer-close {
      width: 26px; height: 26px;
      background: rgba(200,180,255,0.07);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--t3, rgba(255,255,255,0.4));
      display: flex; align-items: center; justify-content: center;
      font-size: 0.9rem; cursor: pointer; line-height: 1;
      font-family: var(--font-body);
    }
    .mob-drawer-close:active { background: rgba(255,255,255,0.08); }

    .mob-drawer-section { padding: 16px 16px 8px; }

    .mob-drawer-section-label {
      display: flex; align-items: center; gap: 10px;
      font-size: 0.5rem; font-weight: 800;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--t3, rgba(255,255,255,0.18));
      margin-bottom: 10px; padding-left: 2px;
    }

    .mob-drawer-section-label::before {
      content: '';
      display: inline-block;
      width: 14px; height: 1px;
      background: currentColor; opacity: 0.5;
    }

    .mob-drawer-grid { display: flex; flex-direction: column; gap: 6px; }

    .mob-drawer-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .mob-drawer-row.row-2-1 { grid-template-columns: 2fr 1fr; }
    .mob-drawer-row.row-1-2 { grid-template-columns: 1fr 2fr; }

    .mob-drawer-btn {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 14px;
      background: rgba(200,180,255,0.09);
      border: 1px solid rgba(255,255,255,0.09);
      cursor: pointer; transition: all 0.14s;
      -webkit-tap-highlight-color: transparent;
      position: relative; overflow: hidden; min-height: 50px;
    }

    .mob-drawer-btn::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
      background: var(--mob-accent, rgba(255,255,255,0.1));
      opacity: 0; transition: opacity 0.15s;
    }

    .mob-drawer-btn:active { background: rgba(255,255,255,0.08); transform: scale(0.98); }
    .mob-drawer-btn:active::before { opacity: 1; }

    .mob-drawer-btn.active-page {
      background: rgba(123,47,255,0.1);
      border-color: rgba(123,47,255,0.25);
    }
    .mob-drawer-btn.active-page::before { opacity: 1; --mob-accent: #7B2FFF; }

    .mob-drawer-btn-icon {
      flex-shrink: 0; width: 18px; height: 18px;
      display: flex; align-items: center; justify-content: center;
      color: var(--mob-icon-color, var(--t3, rgba(255,255,255,0.35)));
    }

    .mob-drawer-btn-icon svg {
      width: 16px; height: 16px;
      stroke: currentColor; fill: none !important;
      stroke-width: 1.6; stroke-linecap: square; overflow: visible;
    }

    /* Universal fill:none for all SVGs in nav & drawer */
    #mob-nav svg, #mob-nav svg *,
    #mob-drawer svg, #mob-drawer svg * { fill: none !important; }

    .mob-drawer-btn-text {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 1px;
    }

    .mob-drawer-btn-label {
      font-family: var(--font-body);
      font-size: 0.72rem; font-weight: 700;
      color: var(--t1, rgba(255,255,255,0.85));
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      letter-spacing: 0.01em;
    }

    .mob-drawer-btn-sub {
      font-size: 0.52rem; font-weight: 500;
      color: var(--t3, rgba(255,255,255,0.22));
      letter-spacing: 0.06em; text-transform: uppercase;
    }

    .mob-drawer-btn.active-page .mob-drawer-btn-label { color: var(--t1, #fff); }
    .mob-drawer-btn.active-page .mob-drawer-btn-icon  { color: #A06EFF; }

    .mob-drawer-live {
      position: absolute; top: 8px; right: 8px;
      width: 5px; height: 5px;
      background: #E91E8C; border-radius: 50%;
      animation: mobLivePulse 1.4s infinite;
    }

    .mob-drawer-stat {
      font-size: 0.5rem; font-weight: 800; letter-spacing: 0.06em;
      padding: 1px 5px;
      color: rgba(0,230,118,0.8);
      border: 1px solid rgba(0,230,118,0.2);
      background: rgba(0,230,118,0.06);
      white-space: nowrap; margin-left: auto;
    }

    .mob-swipe-hint {
      height: 1px; background: rgba(200,180,255,0.07);
      margin: 4px 0 2px;
    }

    .mob-drawer-actions {
      padding: 14px 16px 20px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    }

    .mob-drawer-action-btn {
      padding: 13px 10px; border: none;
      font-family: var(--font-body);
      font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      transition: opacity 0.15s, transform 0.1s;
    }
    .mob-drawer-action-btn:active { opacity: 0.75; transform: scale(0.97); }

    .mob-drawer-action-primary {
      background: linear-gradient(135deg, #E91E8C 0%, #7B2FFF 100%);
      color: var(--t1, #fff); grid-column: span 2;
    }

    .mob-drawer-action-secondary {
      background: rgba(200,180,255,0.07);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--t2, rgba(255,255,255,0.5));
    }

    /* ── Artist profile header — vertical stack on mobile ── */
    .artist-hdr { flex-direction:column; align-items:stretch; text-align:center; }
    #artistPageAvatar { align-self:center; }
    .artist-hdr-info { min-width:0; }
    .artist-hdr-info > div:first-child { justify-content:center; }
    .artist-hdr-stats { justify-content:center; }
    #artistSocialRow { justify-content:center; }
    .artist-hdr-actions { flex-direction:row; flex-wrap:wrap; justify-content:center; }
    .artist-hdr-actions button { flex:1 1 auto; min-height:44px; }
    #artist-tab-nav button { min-height:44px; }

  } /* end @media(max-width:768px) */

  /* ── WAVEFORM ANIMATION ── */
  .waveform { display:flex; align-items:center; gap:3px; height:40px; }
  .wave-bar { width:4px; background:var(--grad); border-radius:2px; animation:wave 1.2s ease-in-out infinite; }
  .wave-bar:nth-child(2) { animation-delay:0.1s; }
  .wave-bar:nth-child(3) { animation-delay:0.2s; }
  .wave-bar:nth-child(4) { animation-delay:0.3s; }
  .wave-bar:nth-child(5) { animation-delay:0.4s; }
  @keyframes wave { 0%,100% { height:8px; } 50% { height:32px; } }

  .artist-bg-1 { background:linear-gradient(135deg,#1a0a2e,#3d0060); }
  .artist-bg-2 { background:linear-gradient(135deg,#0a1a2e,#001560); }
  .artist-bg-3 { background:linear-gradient(135deg,#1a0a0a,#600020); }

  /* ── PLATFORM BUTTONS ── */
  .platform-btn {
    padding: 8px 16px; border-radius: 4px; font-size: 0.78rem; font-weight: 600;
    background: transparent; border: 1px solid rgba(255,255,255,0.1); color: var(--t3, rgba(255,255,255,0.4));
    cursor: pointer; transition: all 0.15s; letter-spacing: 0.04em;
  }
  .platform-btn:hover { border-color: rgba(255,255,255,0.25); color: var(--t2, rgba(255,255,255,0.7)); }
  .platform-btn.active-platform { background: rgba(200,169,126,0.08); border-color: rgba(200,169,126,0.3); color: var(--t2, #C8A97E); }

  /* ── ALERT ITEMS ── */
  .alert-item {
    font-size: 0.84rem; font-weight: 400;
  }
  .alert-blocked { }
  .alert-allowed { }

  /* ── SIM RESULT ── */
  .sim-result-blocked {
    background: rgba(233,30,140,0.04); border: 1px solid rgba(233,30,140,0.15);
    border-radius: 4px; padding: 18px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .sim-result-allowed {
    background: rgba(0,230,118,0.04); border: 1px solid rgba(0,230,118,0.15);
    border-radius: 4px; padding: 18px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }

  /* ── FAN / ARTIST PAGE COMPONENTS ── */
  .fan-artist-row {
    display:flex; align-items:center; gap:12px;
    padding:10px 0; cursor:pointer;
  }
  .fm-fan-panel {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--card-shadow);
  }
  .fm-fan-panel-head {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 18px;
  }

  /* Jukebox badges (all profile roles) */
  .fm-jb-picks {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 22px;
    margin: 16px 0 28px;
    box-shadow: var(--card-shadow);
    font-family: 'Epilogue', sans-serif;
  }
  .fm-jb-picks-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .fm-jb-picks-title {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .fm-jb-picks-sub {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
  }
  .fm-jb-picks-empty {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--muted);
  }
  .fm-jb-picks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
  }
  .fm-jb-pick-card {
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg2);
    padding: 14px 14px 12px;
    min-width: 0;
  }
  .fm-jb-pick-card.is-all-way {
    border-color: rgba(0, 230, 118, 0.35);
    background: linear-gradient(165deg, rgba(0, 230, 118, 0.08), var(--bg2));
    box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.12);
  }
  .fm-jb-pick-kind {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
  }
  .fm-jb-pick-card.is-all-way .fm-jb-pick-kind {
    color: var(--green);
  }
  .fm-jb-pick-ico {
    display: inline-flex;
    flex: none;
    color: inherit;
  }
  .fm-jb-pick-final {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .fm-jb-pick-when {
    font-size: 0.7rem;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .fm-jb-pick-track {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.25;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fm-jb-pick-artist {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font-family: 'Epilogue', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #A06EFF;
    cursor: pointer;
    text-align: left;
  }
  .fm-jb-pick-artist.is-static {
    cursor: default;
    color: var(--muted);
  }
  .fm-jb-pick-artist:hover:not(.is-static) {
    color: var(--text);
  }
  .fm-fan-empty {
    color: var(--muted);
    font-size: 0.84rem;
    grid-column: 1 / -1;
  }
  .fm-fan-tip-total {
    font-size: 0.84rem;
    color: var(--muted);
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .fm-fan-showcase {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 8px 0 28px;
  }
  .fm-fan-showcase-slot {
    position: relative;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    min-height: 0;
  }
  .fm-fan-showcase-card {
    width: 100%;
    height: 100%;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: var(--card-shadow);
    transition: transform 0.15s ease, border-color 0.15s ease;
  }
  .fm-fan-showcase-card:hover {
    transform: translateY(-2px);
    border-color: var(--card-border-hover);
  }
  .fm-fan-showcase-empty {
    width: 100%;
    height: 100%;
    border: 1px dashed var(--border);
    border-radius: 14px;
    background: transparent;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.72rem;
    font-family: 'Epilogue', sans-serif;
    cursor: default;
  }
  .fm-fan-showcase-empty.is-actionable {
    cursor: pointer;
  }
  .fm-fan-showcase-empty.is-actionable:hover {
    border-color: var(--card-border);
    color: var(--text);
  }
  .fm-fan-showcase-plus {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    color: var(--purple);
  }
  .fm-fan-sc-badge {
    align-self: flex-start;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(200, 180, 255, 0.25);
    color: var(--t1, #f0f0f5);
  }
  .fm-fan-sc-badge.is-cert {
    color: var(--green);
    border-color: rgba(0, 230, 118, 0.35);
  }
  .fm-fan-sc-foot {
    min-width: 0;
  }
  .fm-fan-sc-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--t1, #fff);
    font-family: 'Epilogue', sans-serif;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .fm-fan-sc-host {
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--t2, rgba(240, 240, 245, 0.75));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fm-fan-sc-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: var(--t1, #fff);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
  }
  .fm-fan-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .fm-fan-session-card,
  .fm-fan-listen-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .fm-fan-session-band {
    position: relative;
    height: 72px;
  }
  .fm-fan-live-flag {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--pink);
    color: var(--t1, #fff);
  }
  .fm-fan-session-body,
  .fm-fan-listen-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }
  .fm-fan-card-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    font-family: 'Epilogue', sans-serif;
    line-height: 1.3;
  }
  .fm-fan-card-meta {
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.4;
  }
  .fm-fan-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: auto;
  }
  .fm-fan-pill {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    background: transparent;
    font-family: 'Epilogue', sans-serif;
  }
  .fm-fan-pill.is-finalized {
    color: var(--green);
    border-color: rgba(0, 230, 118, 0.35);
    background: rgba(0, 230, 118, 0.08);
  }
  .fm-fan-pill.is-live {
    color: var(--t1, #fff);
    border-color: rgba(233, 30, 140, 0.45);
    background: rgba(233, 30, 140, 0.2);
    cursor: pointer;
  }
  .fm-fan-pill.is-cert {
    color: var(--t2, #C8B4FF);
    border-color: var(--card-border);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
  }
  .fm-fan-add-sc {
    margin-top: 4px;
    align-self: flex-start;
  }
  .fm-fan-avatar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 16px;
  }
  .fm-fan-artist-chip {
    width: 88px;
    text-align: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: 'Epilogue', sans-serif;
  }
  .fm-fan-artist-av {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--card2);
    border: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--t2, #C8A97E);
  }
  .fm-fan-artist-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fm-fan-artist-sess {
    margin-top: 2px;
    font-size: 0.64rem;
    color: var(--muted);
  }
  .fm-fan-listen-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: auto;
  }
  .fm-fan-activity-feed {
    display: flex;
    flex-direction: column;
  }
  .fm-fan-act-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .fm-fan-act-row:last-child {
    border-bottom: none;
  }
  .fm-fan-act-tag {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid var(--border);
    color: var(--muted);
    min-width: 64px;
    text-align: center;
  }
  .fm-fan-act-tag.is-present { color: var(--t2, #C8A97E); border-color: rgba(200,169,126,0.35); }
  .fm-fan-act-tag.is-support { color: var(--purple); border-color: var(--card-border); }
  .fm-fan-act-tag.is-listen { color: var(--pink); border-color: rgba(233,30,140,0.35); }
  .fm-fan-act-tag.is-follow { color: var(--t2, #C8B4FF); border-color: var(--card-border); }
  .fm-fan-act-body {
    min-width: 0;
    flex: 1;
  }
  .fm-fan-act-text {
    font-size: 0.86rem;
    color: var(--text);
    line-height: 1.35;
  }
  .fm-fan-act-date {
    margin-top: 2px;
    font-size: 0.7rem;
    color: var(--muted);
  }
  @media (max-width: 900px) {
    .fm-fan-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fm-fan-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    .fm-fan-showcase { grid-template-columns: 1fr 1fr; }
    .fm-fan-card-grid { grid-template-columns: 1fr; }
  }
  .artist-track-row {
    display:flex; align-items:center; gap:12px;
    padding:10px 0; cursor:pointer;
  }
  .tx-row {
    display:flex; align-items:center; gap:12px;
    padding:8px 0; border-bottom:1px solid rgba(200,180,255,0.07);
  }
  .tip-amt-btn {
    padding:10px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1);
    color:var(--t3, rgba(255,255,255,0.4)); border-radius:16px; cursor:pointer; font-size:0.9rem;
    font-weight:600; transition:all 0.15s;
  }
  .tip-amt-btn:hover { border-color:rgba(200,169,126,0.3); color:var(--t1, #fff); }
  .tip-amt-btn.active-tip { background:rgba(200,169,126,0.08); border-color:rgba(200,169,126,0.4); color:var(--t2, #C8A97E); }

  /* ── GEAR CATEGORY PILLS ── */
  .gear-cat-pill {
    padding:6px 14px; border-radius:2px; white-space:nowrap;
    background:transparent; border:1px solid rgba(255,255,255,0.1);
    color:var(--t2, rgba(200,180,255,0.62)); cursor:pointer; font-size:0.76rem; font-weight:500;
    transition:all 0.15s; flex-shrink:0; letter-spacing:0.04em;
  }
  .gear-cat-pill:hover, .gear-cat-pill.active {
    background:rgba(200,169,126,0.08); border-color:rgba(200,169,126,0.3); color:var(--t2, #C8A97E);
  }
  /* ── DISCOVER / GEAR CARDS ── */
  .discover-card {
    background:rgba(255,255,255,0.025); border:1px solid rgba(123,47,255,0.28);
    border-radius:16px; overflow:hidden; cursor:pointer; transition:border-color 0.2s;
    box-shadow: var(--card-shadow);
  }
  .discover-card:hover { border-color:rgba(200,169,126,0.25); }
  .gear-card {
    background:#1a1428; border:1px solid rgba(123,47,255,0.28);
    border-radius:14px; overflow:hidden; cursor:pointer; transition:all 0.2s;
    box-shadow: var(--card-shadow);
  }
  .gear-card:hover { border-color:rgba(233,30,140,0.3); transform:translateY(-2px); }

  /* ── CLUB CARDS ── */
  .club-card {
    background:#1a1428; border:1px solid rgba(123,47,255,0.28);
    border-radius:16px; overflow:hidden; cursor:pointer; transition:all 0.25s;
    box-shadow: var(--card-shadow);
  }
  .club-card:hover { border-color:rgba(233,30,140,0.35); transform:translateY(-3px); box-shadow:0 8px 30px rgba(233,30,140,0.12); }
  .club-card-banner {
    height:130px; display:flex; align-items:center; justify-content:center;
    font-size:3.5rem; position:relative; overflow:hidden;
  }
  .giveaway-badge {
    position:absolute; top:10px; right:10px;
    background:linear-gradient(135deg,#FFD700,#E91E8C);
    color:var(--t1, #fff); padding:4px 10px; border-radius:20px;
    font-size:0.7rem; font-weight:800; letter-spacing:0.04em;
  }
  .club-genre-tag {
    display:inline-block; padding:2px 9px; border-radius:10px;
    font-size:0.68rem; font-weight:600;
    background:rgba(123,47,255,0.12); color:#A06EFF;
    border:1px solid rgba(123,47,255,0.2);
  }
  /* ── CLUB DETAIL ── */
  .review-item {
    background:#0d0818; border-radius:10px; padding:12px;
    border-left:3px solid rgba(123,47,255,0.3);
  }

  .evt-tab { padding:7px 14px;border-radius:16px;border:1px solid rgba(255,255,255,0.1);background:transparent;color:var(--t2, rgba(200,180,255,0.62));cursor:pointer;font-size:0.76rem;font-weight:500;transition:all 0.15s;white-space:nowrap;letter-spacing:0.04em; }
  .evt-tab:hover { border-color:rgba(200,180,255,0.52);color:var(--t2, rgba(255,255,255,0.7)); }
  .evt-tab.active-tab { background:rgba(200,169,126,0.08);border-color:rgba(200,169,126,0.3);color:var(--t2, #C8A97E); }
  .evt-main-tab { padding:10px 22px;border-radius:16px;border:1px solid var(--card-border);background:transparent;color:var(--muted);cursor:pointer;font-size:0.84rem;font-weight:600;transition:all 0.15s;white-space:nowrap;letter-spacing:0.04em;font-family:'Epilogue',sans-serif; }
  .evt-main-tab:hover { border-color:var(--card-border-hover);color:var(--text); }
  .evt-main-tab.active-tab { background:rgba(200,169,126,0.1);border-color:rgba(200,169,126,0.35);color:var(--t2, #C8A97E); }
  .org-card { background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:border-color 0.15s,transform 0.15s; }
  .org-card:not([data-preview="1"]):hover { border-color:var(--card-border-hover);transform:translateY(-2px); }
  .evt-card:hover { border-color:rgba(233,30,140,0.35) !important;transform:translateY(-3px);box-shadow:0 8px 30px rgba(233,30,140,0.1); }

  .artist-tab-btn { transition:all 0.2s; }

  /* ════════════════════════════════════
     HOME PAGE — FORTIS REDESIGN
  ════════════════════════════════════ */

  /* ── Ambient background ── */
  .fm-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; overflow: hidden;
  }
  .fm-orb {
    position: absolute; border-radius: 50%;
    filter: blur(100px); opacity: 0.12;
    z-index: 1;
  }
  .fm-orb1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, #7B2FFF, transparent);
    top: -200px; left: -100px;
    animation: orbFloat1 18s ease-in-out infinite;
  }
  .fm-orb2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #E91E8C, transparent);
    top: 20%; right: -150px;
    animation: orbFloat2 22s ease-in-out infinite;
  }
  .fm-orb3 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #00E676, transparent);
    bottom: 10%; left: 30%;
    animation: orbFloat3 26s ease-in-out infinite;
  }
  @keyframes orbFloat1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,80px)} }
  @keyframes orbFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-80px,60px)} }
  @keyframes orbFloat3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-60px)} }

  #fm-waveCanvas {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 200px;
    opacity: 0.06;
  }

  /* ── Page wrapper — same chrome clearance as other pages (platform bg under glass nav) ── */
  #page-home {
    position: relative;
  }
  #page-home > *:not(.fm-bg) { position: relative; z-index: 1; }
  /* Ambient layer must stay fixed full-bleed; exclude from .page > div padding */
  #page-home > .fm-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    max-width: none;
    margin: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  /* ── Reveal animation ── */
  .fm-reveal {
    opacity: 0; transform: translateY(24px);
    animation: fmReveal 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  @keyframes fmReveal {
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── Hero ── */
  .fm-hero {
    min-height: 100vh; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    /* Was 120px from viewport with padding-top:0; keep content at ~120px under chrome pad */
    padding: max(24px, calc(120px - var(--cs-chrome-top, var(--fx-nav-chrome, 60px)))) 24px 100px;
    text-align: center; position: relative;
    overflow: hidden;
  }

  /* Ambient is platform body::after — do not paint a second glow on .fm-hero
     (that created the ~85px hard edge at chrome padding). */
  .fm-hero::before {
    content: none;
  }

  /* Waveform canvas behind content */
  #hero-wave {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 180px; opacity: 0.18; pointer-events: none;
  }

  .fm-hero-inner { max-width: 860px; width: 100%; position: relative; z-index: 1; }

  /* Status pill — minimal, not badge-y */
  .fm-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--t3, rgba(255,255,255,0.38));
    margin-bottom: 40px;
  }
  .fm-dot {
    width: 5px; height: 5px; border-radius: 50%; background: #00E676;
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

  /* Main headline — editorial, tight */
  .fm-h1 {
    font-family: 'Epilogue', sans-serif; font-weight: 800;
    font-size: clamp(3.2rem, 9vw, 6.8rem); line-height: 0.95;
    letter-spacing: -0.04em; margin-bottom: 32px;
    color: var(--t1, #f0f0f5);
  }
  .fm-line { display: block; }

  /* Single word in accent — gold, not rainbow */
  .fm-line-grad {
    color: var(--t2, #C8A97E);
  }
  .fm-line-grad-simple {
    color: var(--t2, #C8A97E);
  }

  /* Subtext — stripped back */
  .fm-sub {
    font-size: 1.05rem; color: var(--t3, rgba(255,255,255,0.38)); line-height: 1.75;
    margin-bottom: 48px; max-width: 500px; margin-left: auto; margin-right: auto;
    font-weight: 300; letter-spacing: 0.01em;
  }

  .fm-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 64px; }

  /* ── Buttons (shared .fm-btn* system defined near :root) ── */
  .fm-btn-large { padding: 17px 40px; font-size: 0.96rem; }

  .fm-link-btn {
    background: none; border: none; color: var(--t3, rgba(255,255,255,0.38)); font-size: 0.88rem;
    font-weight: 500; cursor: pointer; transition: color 0.2s;
    font-family: 'Epilogue', sans-serif; letter-spacing: 0.02em;
  }
  .fm-link-btn:hover { color: var(--t1, #fff); }

  /* ── Live activity strip — horizontal ticker, not card ── */
  .fm-live-feed {
    display: flex; align-items: center; gap: 0;
    border-top: 1px solid rgba(200,180,255,0.11);
    border-bottom: 1px solid rgba(200,180,255,0.11);
    max-width: 680px; margin: 0 auto;
    overflow: hidden; position: relative; height: 40px;
  }
  .fm-live-label {
    flex-shrink: 0; padding: 0 16px 0 0;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--t3, rgba(255,255,255,0.22));
    border-right: 1px solid rgba(255,255,255,0.08);
    margin-right: 16px; white-space: nowrap;
  }
  .fm-feed-track {
    display: flex; gap: 48px; white-space: nowrap;
    animation: ticker 28s linear infinite;
  }
  @keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .fm-feed-item {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.78rem; color: var(--t3, rgba(255,255,255,0.32));
    padding: 0; border: none; background: none;
    transition: none;
  }
  .fm-feed-item.fm-feed-active { color: var(--t3, rgba(255,255,255,0.32)); background: none; }
  .fm-feed-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
  .fm-feed-text { }
  .fm-feed-text strong { color: var(--t2, rgba(200,180,255,0.72)); font-weight: 500; }
  .fm-feed-time { display: none; }

  /* ── Scroll hint ── */
  .fm-scroll-hint {
    position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: #333344; animation: fmReveal 1s 1.2s forwards; opacity: 0;
  }
  .fm-scroll-line {
    width: 1px; height: 40px;
    background: linear-gradient(to bottom, #333344, transparent);
    animation: scrollPulse 2s ease-in-out infinite;
  }
  @keyframes scrollPulse { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(0.5)} }

  /* ── Stats bar ── */
  .fm-stats-bar {
    border-top: 1px solid rgba(200,180,255,0.11);
    border-bottom: 1px solid rgba(200,180,255,0.11);
    background: rgba(255,255,255,0.02);
    padding: 32px 24px;
  }
  .fm-stats-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-evenly;
    gap: 0; flex-wrap: nowrap;
  }
  .fm-stat-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 16px 20px; flex: 1;
    min-width: 0;
  }
  .fm-stat-num {
    font-family: 'Epilogue', sans-serif; font-size: 1.6rem; font-weight: 800;
    background: linear-gradient(135deg, #fff, #888899);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    display: block;
    text-align: center;
  }
  .fm-stat-lbl { font-size: 0.68rem; color: #555566; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; text-align: center; }
  .fm-stat-divider { width: 1px; height: 40px; background: rgba(200,180,255,0.13); flex-shrink: 0; align-self: center; }
  @media (max-width: 700px) {
    .fm-stats-inner { flex-wrap: wrap; justify-content: center; gap: 8px; }
    .fm-stat-divider { display: none; }
    .fm-stat-item { min-width: 140px; flex: none; padding: 12px 16px; }
  }

  /* ── Sections ── */
  .fm-section { padding: 100px 24px; }
  .fm-section-dark { background: rgba(255,255,255,0.015); }
  .fm-section-inner { max-width: 1000px; margin: 0 auto; }
  .fm-section-label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: #E91E8C; margin-bottom: 12px;
  }
  .fm-section-title {
    font-family: 'Epilogue', sans-serif; font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1;
    letter-spacing: -0.02em; margin-bottom: 56px;
  }

  /* ── Path cards ── */
  .fm-paths { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
  @media (max-width: 768px) { .fm-paths { grid-template-columns: 1fr; } }

  .fm-path-card {
    position: relative; padding: 32px 28px;
    border: 1px solid rgba(200,180,255,0.13);
    border-radius: 20px; background: rgba(255,255,255,0.02);
    cursor: pointer; transition: all 0.3s; overflow: hidden;
    box-shadow: var(--card-shadow);
  }
  .fm-path-card::before {
    content: ''; position: absolute; inset: 0; opacity: 0;
    transition: opacity 0.3s; border-radius: 20px;
  }
  .fm-path-artist::before { background: linear-gradient(135deg,rgba(233,30,140,0.08),transparent); }
  .fm-path-fan::before { background: linear-gradient(135deg,rgba(123,47,255,0.08),transparent); }
  .fm-path-partner::before { background: linear-gradient(135deg,rgba(0,230,118,0.08),transparent); }
  .fm-path-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.14); }
  .fm-path-card:hover::before { opacity: 1; }

  .fm-path-num {
    font-family: 'Epilogue', sans-serif; font-size: 0.7rem; font-weight: 800;
    letter-spacing: 0.1em; color: #333344; margin-bottom: 20px;
  }
  .fm-path-icon {
    width: 48px; height: 48px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px; color: var(--t2, #a090b8);
  }
  .fm-path-artist .fm-path-icon { border-color: rgba(233,30,140,0.2); color: #E91E8C; background: rgba(233,30,140,0.06); }
  .fm-path-fan .fm-path-icon { border-color: rgba(123,47,255,0.2); color: #A06EFF; background: rgba(123,47,255,0.06); }
  .fm-path-partner .fm-path-icon { border-color: rgba(0,230,118,0.2); color: #00E676; background: rgba(0,230,118,0.06); }

  .fm-path-title { font-family: 'Epilogue', sans-serif; font-weight: 800; font-size: 1.2rem; margin-bottom: 12px; }
  .fm-path-desc { font-size: 0.85rem; color: var(--t2, #a090b8); line-height: 1.65; margin-bottom: 20px; }
  .fm-path-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
  .fm-path-tags span {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em;
    padding: 3px 9px; border-radius: 8px;
    background: rgba(200,180,255,0.09); border: 1px solid rgba(255,255,255,0.08);
    color: #666677;
  }
  .fm-path-arrow { font-size: 1.2rem; color: #333344; transition: all 0.3s; }
  .fm-path-card:hover .fm-path-arrow { color: var(--t1, #fff); transform: translateX(4px); }

  /* ── Protection flow ── */
  .fm-flow {
    display: flex; align-items: stretch; justify-content: center;
    flex-wrap: wrap; gap: 0;
    max-width: 1000px; margin: 0 auto; padding: 0;
  }
  .fm-flow-step {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 14px; flex: 1; min-width: 120px; max-width: 180px;
    padding-top: 28px; padding-bottom: 28px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .fm-flow-icon {
    width: 56px; height: 56px; border-radius: 14px;
    border: 1px solid; display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s;
  }
  .fm-flow-step:hover .fm-flow-icon { transform: scale(1.08); }
  .fm-flow-text { flex: 1; width: 100%; }
  .fm-flow-title { font-family: 'Epilogue', sans-serif; font-weight: 700; font-size: 0.85rem; }
  .fm-flow-desc { font-size: 0.72rem; color: var(--muted); line-height: 1.5; margin-top: 1.1em; }
  .fm-flow-connector {
    flex-shrink: 0; align-self: center; width: 24px; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.15), rgba(255,255,255,0.08));
    margin-top: 0;
  }
  @media (max-width: 640px) {
    .fm-flow { flex-direction: column; align-items: flex-start; }
    .fm-flow-step { flex-direction: row; text-align: left; max-width: 100%; min-width: unset; width: 100%;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
    .fm-flow-connector { width: 1px; height: 20px; margin: 0 27px; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.15), rgba(255,255,255,0.08)); }
  }

  .fm-protect-points {
    max-width: 1000px; margin: 40px auto 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  }
  .fm-protect-point { text-align: left; }
  .fm-protect-point-title {
    font-family: 'Epilogue', sans-serif; font-weight: 700; font-size: 0.85rem;
    color: var(--text); margin-bottom: 8px;
  }
  .fm-protect-point-desc {
    font-size: 0.72rem; color: var(--muted); line-height: 1.5;
  }
  @media (max-width: 640px) {
    .fm-protect-points { grid-template-columns: 1fr; gap: 20px; }
  }

  /* ── Artist cards ── */
  .fm-artists-scroll {
    display: grid; grid-template-columns: repeat(5,1fr); gap: 14px;
  }
  @media (max-width: 900px) { .fm-artists-scroll { grid-template-columns: repeat(3,1fr); } }
  @media (max-width: 560px) { .fm-artists-scroll { grid-template-columns: repeat(2,1fr); } }

  .fm-artist-card {
    border: 1px solid rgba(200,180,255,0.13);
    border-radius: 16px; overflow: hidden; cursor: pointer;
    transition: all 0.25s; background: rgba(255,255,255,0.02);
    box-shadow: var(--card-shadow);
  }
  .fm-artist-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.15); }
  .fm-artist-visual {
    position: relative; aspect-ratio: 1; display: flex;
    align-items: center; justify-content: center;
  }
  .fm-artist-initial {
    font-family: 'Epilogue', sans-serif; font-size: 2.4rem; font-weight: 800;
    color: var(--t3, rgba(255,255,255,0.15));
  }
  .fm-artist-badge {
    position: absolute; top: 10px; right: 10px;
    font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em;
    padding: 3px 7px; border-radius: 6px;
    background: rgba(0,230,118,0.15); color: #00E676;
    border: 1px solid rgba(0,230,118,0.25);
  }
  .fm-artist-info { padding: 14px; }
  .fm-artist-name { font-family: 'Epilogue', sans-serif; font-weight: 700; font-size: 0.88rem; margin-bottom: 3px; }
  .fm-artist-meta { font-size: 0.72rem; color: #666677; margin-bottom: 8px; }
  .fm-artist-stats { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; color: #555566; }

  /* ── Events ── */
  .fm-events-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  @media (max-width: 768px) { .fm-events-grid { grid-template-columns: 1fr; } }

  .fm-event-card {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px; padding: 28px 24px;
    cursor: pointer; transition: all 0.25s; position: relative; overflow: hidden;
    box-shadow: var(--card-shadow);
  }
  .fm-event-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.16); }
  .fm-event-featured { border-color: rgba(123,47,255,0.3);
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .fm-event-cat {
    display: inline-block; font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px;
    border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
    background: rgba(200,180,255,0.11); color: var(--t2, #a090b8);
    margin-bottom: 20px;
  }
  .fm-event-date {
    font-family: 'Epilogue', sans-serif; font-size: 2.2rem; font-weight: 800;
    color: var(--t3, rgba(255,255,255,0.15)); margin-bottom: 8px; line-height: 1;
  }
  .fm-event-name { font-family: 'Epilogue', sans-serif; font-weight: 800; font-size: 1.1rem; margin-bottom: 6px; line-height: 1.2; }
  .fm-event-loc { font-size: 0.78rem; color: #666677; margin-bottom: 20px; }
  .fm-event-price { font-size: 1rem; font-weight: 800; color: #00E676; }

  /* ── CTA section ── */
  .fm-cta-section {
    padding: 120px 24px; text-align: center;
    background: radial-gradient(ellipse at center, rgba(123,47,255,0.08) 0%, transparent 70%);
    border-top: 1px solid rgba(200,180,255,0.09);
  }
  .fm-cta-inner { max-width: 680px; margin: 0 auto; }
  .fm-cta-label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: #A06EFF; margin-bottom: 20px;
  }
  .fm-cta-title {
    font-family: 'Epilogue', sans-serif; font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.1;
    letter-spacing: -0.02em; margin-bottom: 20px;
  }
  .fm-cta-sub { font-size: 1rem; color: var(--t2, #a090b8); line-height: 1.7; margin-bottom: 40px; }
  .fm-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

  @keyframes nowPulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
  @keyframes waveBar { 0%,100%{height:4px;} 50%{height:20px;} }
  @keyframes tipScroll { 0%{transform:translateX(100%);} 100%{transform:translateX(-120%);} }
  .now-live-dot { width:7px;height:7px;background:#E91E8C;border-radius:50%;display:inline-block;animation:nowPulse 1.5s infinite; }
  #page-now { background:transparent; }
  .now-header { padding:28px 24px 8px;max-width:var(--width-page);margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px; }
  .now-header h1 { font-family:var(--font-head);font-size:1.5rem;font-weight:800;display:flex;align-items:center;gap:10px; }
  .now-live-badge { display:flex;align-items:center;gap:6px;background:rgba(233,30,140,0.1);border:1px solid rgba(233,30,140,0.2);padding:4px 12px;border-radius:20px;font-size:0.72rem;font-weight:700;color:#E91E8C;letter-spacing:0.08em; }
  .now-stats { display:flex;gap:20px; }
  .now-stat strong { display:block;font-family:var(--font-head);font-size:1.1rem;font-weight:800; }
  .now-stat span { font-size:0.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em; }
  .now-ticker { max-width:var(--width-page);margin:12px auto 0;padding:0 24px; }
  .now-ticker-inner { background:rgba(255,255,255,0.025);border:1px solid var(--border);border-radius:10px;padding:8px 14px;display:flex;align-items:center;gap:10px;overflow:hidden; }
  .now-ticker-label { font-size:0.62rem;font-weight:700;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase;white-space:nowrap;background:rgba(200,180,255,0.11);padding:2px 8px;border-radius:16px; }
  .now-ticker-scroll { flex:1;overflow:hidden;position:relative;height:18px; }
  .now-ticker-text { position:absolute;white-space:nowrap;font-size:0.78rem;color:var(--muted);animation:tipScroll 20s linear infinite; }
  .now-grid { max-width:var(--width-page);margin:16px auto 0;padding:0 24px 40px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:14px; }
  @media(max-width:700px){.now-grid{grid-template-columns:1fr;}}
  @media(min-width:769px) and (max-width:960px){.now-grid{grid-template-columns:1fr 1fr;}}
  /* Mobile override — must come AFTER the 960px rule to win */
  @media(max-width:768px){.now-grid{grid-template-columns:1fr !important;}}
  .now-card { background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:22px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .now-card-label { font-size:0.65rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin-bottom:12px; }
  .now-card-title { font-family:var(--font-head);font-size:1rem;font-weight:700;margin-bottom:3px; }
  .now-card-sub { color:var(--muted);font-size:0.78rem;margin-bottom:14px; }
  .now-drop-card { grid-column:1/3;background:linear-gradient(135deg,#0e0820,#1a0030,#0c0820);border:1px solid rgba(233,30,140,0.2);border-radius:20px;padding:24px 28px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .now-countdown { display:flex;gap:10px;margin:16px 0; }
  .now-cd-unit { text-align:center;background:rgba(200,180,255,0.09);border:1px solid rgba(200,180,255,0.13);border-radius:10px;padding:8px 14px;min-width:56px; }
  .now-cd-num { font-family:var(--font-head);font-size:1.5rem;font-weight:800;line-height:1; }
  .now-cd-lbl { font-size:0.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;margin-top:2px; }
  .now-cd-sep { font-family:var(--font-head);font-size:1.5rem;font-weight:800;color:var(--t3, rgba(255,255,255,0.2));align-self:center;padding-bottom:8px; }
  .now-drop-actions { display:flex;gap:10px;align-items:center;flex-wrap:wrap; }
  .now-btn { padding:9px 20px;border-radius:10px;font-size:0.84rem;font-weight:600;cursor:pointer;border:none;transition:all 0.2s;font-family:var(--font-body); }
  .now-btn.primary { background:var(--grad);color:var(--t1, #fff); }
  .now-btn.primary:hover { opacity:0.85; }
  .now-btn.ghost { background:rgba(200,180,255,0.11);color:var(--text);border:1px solid rgba(255,255,255,0.1); }
  .now-btn.ghost:hover { background:rgba(255,255,255,0.1); }
  .now-drop-reg { font-size:0.72rem;color:var(--muted); }
  .now-waveform { display:flex;align-items:flex-end;gap:3px;height:28px;margin:12px 0; }
  .now-wave-bar { width:3px;border-radius:2px;animation:waveBar 0.5s ease infinite; }
  .now-wave-bar:nth-child(2n){animation-delay:0.1s;}
  .now-wave-bar:nth-child(3n){animation-delay:0.2s;}
  .now-wave-bar:nth-child(4n){animation-delay:0.3s;}
  .now-layers { display:flex;flex-direction:column;gap:5px;margin-bottom:14px; }
  .now-layer { display:flex;align-items:center;gap:8px;font-size:0.75rem;color:var(--muted); }
  .now-layer-track { flex:1;height:3px;background:rgba(200,180,255,0.09);border-radius:2px;overflow:hidden; }
  .now-layer-fill { height:100%;border-radius:2px; }
  .now-collab-av { display:flex;margin-bottom:12px; }
  .now-av { width:34px;height:34px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;border:2px solid var(--card);margin-right:-8px; }
  .now-av.more { background:rgba(200,180,255,0.13);color:var(--muted);font-size:0.68rem; }
  .now-cta { width:100%;padding:9px;background:rgba(123,47,255,0.12);border:1px solid rgba(123,47,255,0.25);color:#A06EFF;border-radius:10px;font-size:0.83rem;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:var(--font-body); }
  .now-cta:hover { background:rgba(123,47,255,0.22); }
  .now-feed-card { display:flex;flex-direction:column;max-height:420px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .now-feed-head { font-family:var(--font-head);font-size:0.88rem;font-weight:700;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between; }
  .now-feed-list { flex:1;overflow-y:auto;display:flex;flex-direction:column; }
  .now-feed-item { display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.035); }
  .now-feed-icon { width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--t2, rgba(200,180,255,0.75)); }
  .now-feed-body { flex:1;font-size:0.78rem;line-height:1.4; }
  .now-feed-body span { color:var(--muted);font-size:0.7rem;display:block;margin-top:1px; }
  .now-feed-time { font-size:0.66rem;color:var(--muted);white-space:nowrap;margin-top:2px; }
  .now-rooms-head { font-family:var(--font-head);font-size:0.88rem;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px; }
  .now-room { display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;cursor:pointer;transition:background 0.2s;margin-bottom:4px; }
  .now-room:hover { background:rgba(200,180,255,0.07); }
  .now-room-cover { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0; }
  .now-room-count { position:absolute;bottom:-3px;right:-3px;background:#E91E8C;color:var(--t1, #fff);font-size:0.52rem;font-weight:700;padding:1px 4px;border-radius:5px; }
  .now-room-info { flex:1; }
  .now-room-name { font-size:0.83rem;font-weight:600;margin-bottom:1px; }
  .now-room-genre { font-size:0.7rem;color:var(--muted); }
  .now-room-btn { padding:4px 10px;border-radius:7px;font-size:0.7rem;font-weight:600;background:rgba(200,180,255,0.11);border:1px solid rgba(255,255,255,0.09);color:var(--text);cursor:pointer;transition:all 0.2s;white-space:nowrap; }
  .now-room-btn:hover { background:var(--grad);border-color:transparent; }

  .now-sub { display:none; position:fixed; inset:0; top:var(--cs-chrome-top, var(--fx-nav-chrome, 60px)); background:var(--bg); z-index:50; overflow-y:auto; }
  .now-sub.open { display:block; animation:fadeIn 0.25s ease both; }
  .now-sub-inner { max-width:var(--width-page); margin:0 auto; padding:48px 24px 60px; }
  .now-sub-back { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:rgba(200,180,255,0.09); border:1px solid rgba(123,47,255,0.25); color:var(--muted); border-radius:10px; cursor:pointer; font-size:0.85rem; margin-bottom:24px; transition:all 0.2s; font-family:var(--font-body); box-shadow: 0 0 0 1px rgba(123,47,255,0.22), 0 2px 14px rgba(80,20,180,0.20);
    box-shadow: 0 0 0 1px rgba(123,47,255,0.20), 0 2px 12px rgba(80,20,180,0.18);
    transition: all 0.2s;
  }
  .now-sub-back:hover { background:rgba(255,255,255,0.09); color:var(--text); }
  .cs-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
  .cs-head h2 { font-family:var(--font-head); font-size:1.3rem; font-weight:800; }
  .cs-head .sub { color:var(--muted); font-size:0.85rem; margin-top:3px; }
  .cs-daw { background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:20px; margin-bottom:14px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .cs-daw-head { font-family:var(--font-head); font-size:0.88rem; font-weight:700; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
  .cs-live { font-size:0.7rem; color:#00E676; font-weight:400; display:flex; align-items:center; gap:5px; }
  .cs-track { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .cs-track-lbl { width:56px; font-size:0.78rem; color:var(--muted); flex-shrink:0; }
  .cs-track-vis { flex:1; height:36px; border-radius:6px; overflow:hidden; cursor:pointer; transition:opacity 0.2s; }
  .cs-track-vis:hover { opacity:0.8; }
  .cs-track-bars { display:flex; align-items:center; gap:2px; height:100%; padding:0 8px; }
  .cs-bar { border-radius:1px; animation:waveBar 0.5s ease infinite; }
  .cs-track-av { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:700; flex-shrink:0; }
  .cs-add { background:rgba(255,255,255,0.03); border:1px dashed rgba(255,255,255,0.1); border-radius:8px; padding:13px; text-align:center; font-size:0.8rem; color:var(--muted); cursor:pointer; transition:all 0.2s; margin-top:8px;
    box-shadow: var(--card-shadow);
  }
  .cs-add:hover { background:rgba(123,47,255,0.08); border-color:rgba(123,47,255,0.3); color:#A06EFF; }
  .cs-splits { background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:20px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .cs-splits-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
  .cs-splits h4 { font-family:var(--font-head); font-size:0.88rem; font-weight:700; margin:0; }
  .cs-cert-panel {
    margin: 0 0 16px; padding: 14px 16px; background: var(--card); border: 1px solid var(--card-border);
    border-radius: 16px; box-shadow: var(--card-shadow);
  }
  .cs-cert-panel-label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 8px; font-family: var(--font-body);
  }
  .cs-cert-code {
    font-family: monospace; font-size: 0.95rem; font-weight: 700; color: var(--text);
    letter-spacing: 0.04em;
  }
  .cs-cert-link { font-size: 0.78rem; color: #A06EFF; text-decoration: none; font-family: var(--font-body); }
  .cs-split-history-btn {
    flex-shrink:0; padding:5px 12px; font-size:0.68rem; font-weight:600; font-family:var(--font-body);
    border-radius:6px; cursor:pointer; border:1px solid var(--border); background:var(--card); color:var(--muted);
  }
  .cs-split-history-btn:hover { color:var(--text); border-color:var(--card-border-hover); }
  .cs-split-history-btn.is-open { color:#A06EFF; border-color:rgba(123,47,255,0.45); background:rgba(123,47,255,0.12); }
  .cs-split-history-panel {
    margin-bottom:12px; padding:10px 12px; background:var(--card2); border:1px solid var(--border);
    border-radius:10px; max-height:220px; overflow-y:auto;
  }
  .cs-split-history-list { display:flex; flex-direction:column; gap:10px; }
  .cs-split-history-item { font-size:0.74rem; line-height:1.45; color:var(--text); }
  .cs-split-history-time { display:block; font-size:0.65rem; color:var(--muted); margin-bottom:2px; font-variant-numeric:tabular-nums; }
  .cs-split-history-empty { font-size:0.74rem; color:var(--muted); padding:4px 0; }
  .cs-split-accepted-at { display:inline-block; margin-left:6px; font-size:0.62rem; font-weight:500; color:var(--muted); }
  .cs-contrib { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:0.82rem; }
  .cs-av { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; flex-shrink:0; }
  .cs-contrib-name { font-weight:600; font-size:0.82rem; }
  .cs-contrib-role { font-size:0.7rem; color:var(--muted); }
  .cs-pct { margin-left:auto; font-size:0.78rem; font-weight:700; color:var(--green); }
  .cs-chat { background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:20px; display:flex; flex-direction:column; height:380px; min-height:0;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .cs-chat h4 { font-family:var(--font-head); font-size:0.88rem; font-weight:700; margin-bottom:12px; }
  .cs-msgs { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
  .cs-msg { font-size:0.8rem; line-height:1.4; }
  .cs-msg .n { font-weight:600; margin-right:5px; }
  .cs-input { display:flex; gap:8px; }
  .cs-input input { flex:1; background:rgba(200,180,255,0.09); border:1px solid var(--border); border-radius:8px; padding:8px 12px; color:var(--text); font-size:0.82rem; outline:none; font-family:var(--font-body); }
  .cs-input input:focus { border-color:rgba(123,47,255,0.4); }
  .cs-input button { padding:8px 16px; background:var(--grad); border:none; border-radius:8px; color:var(--t1, #fff); font-size:0.82rem; font-weight:600; cursor:pointer; font-family:var(--font-body); }

  /* ACCESS GATE */
  #gateOverlay { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.92); z-index:99999; overflow-y:auto; }
  #gateOverlay.show { display:block; }
  #fmLegalModal { display:none; position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,0.55); align-items:center; justify-content:center; padding:24px; }
  #fmLegalModal.show { display:flex; }
  .fm-legal-modal-box { display:flex; flex-direction:column; width:100%; max-width:700px; max-height:85vh; background:var(--card); border:1px solid var(--card-border); border-radius:16px; box-shadow:var(--card-shadow); overflow:hidden; }
  .fm-legal-modal-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
  .fm-legal-modal-header h2 { font-family:var(--font-head); font-size:1.05rem; font-weight:700; margin:0; color:var(--text); }
  .fm-legal-modal-close { background:none; border:none; color:var(--muted); font-size:1.5rem; line-height:1; cursor:pointer; padding:0 4px; font-family:var(--font-body); }
  .fm-legal-modal-close:hover { color:var(--text); }
  .fm-legal-modal-body { overflow-y:auto; padding:20px 24px 28px; flex:1; min-height:0; font-family:var(--font-body); color:var(--text); }
  .fm-legal-modal-body h2 { font-family:var(--font-head); font-size:1.05rem; font-weight:700; margin:28px 0 12px; line-height:1.35; color:var(--text); }
  .fm-legal-modal-body h2:first-child { margin-top:0; }
  .fm-legal-modal-body p { font-size:0.92rem; line-height:1.75; color:var(--muted); margin:0 0 16px; }
  .gate-box { background:#1a1428; border:1px solid rgba(123,47,255,0.28); border-radius:20px; padding:32px 28px; max-width:440px; width:calc(100% - 40px); margin:50px auto 40px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .gate-logo { display:flex; align-items:center; gap:10px; margin-bottom:22px; font-family:var(--font-head); font-size:1.1rem; font-weight:800; }
  .gate-box h2 { font-family:var(--font-head); font-size:1.25rem; font-weight:800; margin-bottom:6px; }
  .gate-box p { color:var(--muted); font-size:0.84rem; margin-bottom:22px; line-height:1.5; }
  .gate-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
  .gate-row.full { grid-template-columns:1fr; }
  .gate-field { display:flex; flex-direction:column; gap:4px; }
  .gate-field label { font-size:0.7rem; font-weight:700; color:var(--muted); letter-spacing:0.07em; text-transform:uppercase; }
  .gate-field input, .gate-field select { background:rgba(200,180,255,0.09); border:1px solid var(--border); border-radius:10px; padding:10px 13px; color:var(--text); font-size:0.87rem; outline:none; font-family:var(--font-body); transition:border-color 0.2s; width:100%; box-sizing:border-box; }
  .gate-field input:focus, .gate-field select:focus { border-color:rgba(123,47,255,0.5); }
  .gate-field select option { background:#1a1428; }
  .gate-role-row { display:flex; gap:8px; margin:12px 0 18px; }
  .gate-role-opt { flex:1; padding:9px 4px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,0.03); color:var(--muted); font-size:0.78rem; font-weight:600; cursor:pointer; transition:all 0.2s; font-family:var(--font-body); text-align:center; }
  .gate-role-opt.sel { background:rgba(123,47,255,0.15); border-color:rgba(123,47,255,0.4); color:#A06EFF; }
  @media(max-width:480px) { .gate-role-opt { flex:0 0 calc(50% - 5px) !important; } }
  .gate-submit { width:100%; padding:13px; background:var(--grad); border:none; border-radius:12px; color:var(--t1, #fff); font-size:0.95rem; font-weight:700; cursor:pointer; font-family:var(--font-body); transition:opacity 0.2s; margin-top:6px; }
  .gate-submit:hover { opacity:0.88; }
  .gate-err { font-size:0.78rem; color:#E91E8C; margin-top:8px; display:none; }
  .gate-terms-row { display:flex; align-items:flex-start; gap:10px; margin-top:14px; }
  .gate-terms-row input[type="checkbox"] { margin-top:3px; flex-shrink:0; width:15px; height:15px; accent-color:var(--purple); cursor:pointer; }
  .gate-terms-text { font-size:0.8rem; line-height:1.55; color:var(--muted); }
  .gate-terms-link { color:#A06EFF; text-decoration:underline; text-underline-offset:2px; }
  .gate-terms-link:hover { color:var(--text); }
  .gate-footer { text-align:center; margin-top:14px; font-size:0.73rem; color:var(--muted); }
  .gate-footer strong { color:var(--text); }

  /* ABOUT PAGE */
  #page-about { background:transparent; min-height:100vh; padding-top:var(--cs-chrome-top, var(--fx-nav-chrome, 60px)); }
  .about-hero { max-width:900px; margin:0 auto; padding:60px 24px 40px; text-align:center; }
  .about-hero h1 { font-family:var(--font-head); font-size:clamp(2rem,5vw,3.2rem); font-weight:800; line-height:1.1; margin-bottom:20px; }
  .about-hero p { color:var(--muted); font-size:1rem; line-height:1.7; max-width:620px; margin:0 auto 40px; }
  .about-video-wrap { max-width:900px; margin:0 auto 60px; padding:0 24px; }
  .about-video-box { width:100%; aspect-ratio:16/9; background:#0d0d15; border:1px solid var(--card-border); border-radius:20px; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .about-video-placeholder { text-align:center; color:var(--muted); }
  .about-video-placeholder svg { opacity:0.3; margin-bottom:14px; }
  .about-video-placeholder p { font-size:0.88rem; line-height:1.5; }
  .about-video-placeholder strong { color:var(--text); display:block; font-family:var(--font-head); font-size:1rem; margin-bottom:6px; }
  .about-video-box iframe { width:100%; height:100%; border:none; }
  .about-section { max-width:900px; margin:0 auto; padding:0 24px 60px; }
  .about-section-title { font-family:var(--font-head); font-size:1.4rem; font-weight:800; margin-bottom:32px; display:flex; align-items:center; gap:12px; }
  .about-section-title::after { content:''; flex:1; height:1px; background:var(--border); }
  .about-team { display:grid; grid-template-columns:minmax(260px,400px); justify-content:center; gap:20px; margin-bottom:60px; }
  .about-team-card { background:var(--card); border:1px solid var(--card-border); border-radius:20px; padding:28px 24px; text-align:center; transition:border-color 0.2s;
    box-shadow: var(--card-shadow);
  }
  .about-team-card:hover { border-color:rgba(123,47,255,0.3); }
  .about-team-avatar { width:80px; height:80px; border-radius:50%; background:var(--grad); margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:1.6rem; font-weight:800; color:var(--t1, #fff); }
  .about-team-name { font-family:var(--font-head); font-size:1.1rem; font-weight:800; margin-bottom:4px; }
  .about-team-role { color:var(--purple); font-size:0.8rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; }
  .about-team-bio { color:var(--muted); font-size:0.82rem; line-height:1.6; }
  .about-mission { background:linear-gradient(135deg,#0e0820,#1a0030); border:1px solid rgba(123,47,255,0.2); border-radius:20px; padding:40px; margin-bottom:60px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .about-mission h3 { font-family:var(--font-head); font-size:1.2rem; font-weight:800; margin-bottom:14px; }
  .about-mission p { color:var(--muted); line-height:1.8; font-size:0.92rem; }
  .about-values { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:60px; }
  .about-value { background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:22px 20px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .about-value-icon { width:36px; height:36px; border-radius:10px; background:rgba(123,47,255,0.15); display:flex; align-items:center; justify-content:center; margin-bottom:12px; color:var(--purple); }
  .about-value h4 { font-family:var(--font-head); font-size:0.9rem; font-weight:700; margin-bottom:6px; }
  .about-value p { color:var(--muted); font-size:0.78rem; line-height:1.5; }
  .about-cta { text-align:center; padding:40px 24px 80px; }
  .about-cta h3 { font-family:var(--font-head); font-size:1.5rem; font-weight:800; margin-bottom:12px; }
  .about-cta p { color:var(--muted); margin-bottom:24px; font-size:0.9rem; }
  .about-cta-btn { display:inline-block; padding:14px 36px; background:var(--grad); border:none; border-radius:12px; color:var(--t1, #fff); font-size:0.95rem; font-weight:700; cursor:pointer; font-family:var(--font-body); transition:opacity 0.2s; }
  .about-cta-btn:hover { opacity:0.88; }

  .now-jukebox-card { background:linear-gradient(135deg,#0c0820,#150030,#0d0818);border:1px solid rgba(123,47,255,0.25);border-radius:20px;padding:22px 24px;cursor:pointer;transition:border-color 0.2s;display:flex;flex-direction:column;gap:14px;
    box-shadow: var(--card-shadow);
  }
  .now-jukebox-card:hover { border-color:rgba(123,47,255,0.45); }
  .now-jukebox-top { display:flex;align-items:center;gap:12px; }
  .now-jukebox-icon { width:44px;height:44px;border-radius:12px;background:var(--grad);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
  .now-jukebox-info h3 { font-family:var(--font-head);font-size:0.95rem;font-weight:800;margin-bottom:2px; }
  .now-jukebox-info p { font-size:0.75rem;color:var(--muted); }
  .now-jukebox-stats { display:flex;gap:0;border-top:1px solid rgba(200,180,255,0.11);padding-top:12px; }
  .now-jukebox-stat { flex:1;text-align:center; }
  .now-jukebox-stat strong { display:block;font-family:var(--font-head);font-size:1rem;font-weight:800;color:var(--text); }
  .now-jukebox-stat span { font-size:0.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em; }
  .now-jukebox-stat + .now-jukebox-stat { border-left:1px solid rgba(200,180,255,0.11); }
  .now-jukebox-enter { display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;background:rgba(123,47,255,0.15);border:1px solid rgba(123,47,255,0.25);border-radius:10px;font-size:0.82rem;font-weight:600;color:#A06EFF; }

  .jb-hero-sub { margin-bottom:24px; }
  .jb-hero-sub h2 { font-family:var(--font-head);font-size:1.4rem;font-weight:800;margin-bottom:4px; }
  .jb-hero-sub p { color:var(--muted);font-size:0.85rem; }
  .jb-genres { display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:28px; }
  .jb-genre-card { background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:18px 16px;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden;
    box-shadow: var(--card-shadow);
  }
  .jb-genre-card:hover { border-color:rgba(123,47,255,0.4);transform:translateY(-2px); }
  .jb-genre-card.active { border-color:rgba(123,47,255,0.5);background:rgba(123,47,255,0.08); }
  .jb-genre-icon { width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:10px; }
  .jb-genre-name { font-family:var(--font-head);font-size:0.85rem;font-weight:700;margin-bottom:2px; }
  .jb-genre-count { font-size:0.7rem;color:var(--muted); }
  .jb-genre-live { position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:4px;font-size:0.6rem;font-weight:700;color:#E91E8C;letter-spacing:0.06em; }
  .jb-tod { background:rgba(255,193,7,0.07);border:1px solid rgba(255,193,7,0.18);border-radius:14px;padding:12px 18px;margin-bottom:16px;display:none;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px; }
  .jb-tod.show { display:flex; }
  .jb-tod-label { font-size:0.63rem;font-weight:700;color:#B8860B;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:2px; }
  .jb-tod-text { font-size:0.8rem;color:var(--text); }
  .jb-tod-timer { font-size:0.76rem;color:var(--muted); }
  .jb-tod-btn { padding:6px 14px;background:rgba(255,193,7,0.12);border:1px solid rgba(255,193,7,0.28);color:#B8860B;border-radius:8px;font-size:0.73rem;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:all 0.2s; }
  .jb-tod-btn:hover { background:rgba(255,193,7,0.22); }
  .jb-tod-prize { font-size:0.8rem;color:#00E676;font-weight:700; }
  .jb-room { display:none; }
  .jb-room.show { display:grid;grid-template-columns:1fr 1fr 300px;gap:14px; }
  @media(max-width:900px){ .jb-room.show { grid-template-columns:1fr 1fr; } }
  @media(max-width:600px){ .jb-room.show { grid-template-columns:1fr; } }
  .jb-player { background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:26px;display:flex;flex-direction:column;align-items:center;gap:16px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .jb-cover { width:140px;height:140px;border-radius:14px;background:linear-gradient(135deg,#1a0030,#3d0066);display:flex;align-items:center;justify-content:center; }
  .jb-track-name { font-family:var(--font-head);font-size:1.05rem;font-weight:800;text-align:center;margin-bottom:3px; }
  .jb-track-artist { font-size:0.8rem;color:var(--muted);text-align:center;margin-bottom:8px; }
  .jb-track-tags { display:flex;gap:5px;justify-content:center;flex-wrap:wrap; }
  .jb-tag { font-size:0.66rem;padding:2px 9px;border-radius:5px;font-weight:600; }
  .jb-tag.genre { background:rgba(123,47,255,0.15);color:#9B6FFF; }
  .jb-tag.country { background:rgba(0,230,118,0.1);color:#00C876; }
  .jb-tag.listeners { background:rgba(200,180,255,0.11);color:var(--muted); }
  .jb-prog-bar { width:100%;height:3px;background:rgba(200,180,255,0.13);border-radius:2px;overflow:hidden;margin-bottom:5px; }
  .jb-prog-fill { height:100%;background:var(--grad);border-radius:2px;transition:width 1s linear; }
  .jb-prog-times { display:flex;justify-content:space-between;font-size:0.67rem;color:var(--muted);width:100%; }
  .jb-queue { background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:0;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .jb-queue-head { font-family:var(--font-head);font-size:0.88rem;font-weight:700;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between; }
  .jb-queue-propose { font-size:0.7rem;font-weight:600;color:var(--purple);cursor:pointer;background:rgba(123,47,255,0.1);border:1px solid rgba(123,47,255,0.2);padding:3px 9px;border-radius:6px; }

  /* ── VOTING SYSTEM ── */
  .jb-vote-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px; }
  .jb-vote-title { font-size:0.88rem;font-weight:700; }
  .jb-vote-timer-wrap { display:flex;align-items:center;gap:8px; }
  .jb-vote-timer { font-size:1.1rem;font-weight:800;color:var(--pink);font-family:var(--font-head);min-width:52px;text-align:right; }
  .jb-vote-timer-lbl { font-size:0.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em; }
  .jb-vote-timer.urgent { color:#ff3b3b;animation:cvBlink 0.8s infinite; }

  .jb-prize-bar { display:flex;align-items:center;justify-content:space-between;background:rgba(0,230,118,0.06);border:1px solid rgba(0,230,118,0.15);border-radius:10px;padding:10px 14px;margin-bottom:14px; }
  .jb-prize-pool { display:flex;align-items:baseline;gap:6px; }
  .jb-prize-amount { font-size:1.4rem;font-weight:800;color:#00E676;font-family:var(--font-head); }
  .jb-prize-lbl { font-size:0.62rem;color:rgba(0,230,118,0.6);text-transform:uppercase;letter-spacing:0.06em; }
  .jb-prize-btns { display:flex;gap:6px; }
  .jb-boost-btn { padding:5px 10px;border-radius:6px;border:1px solid rgba(0,230,118,0.2);background:rgba(0,230,118,0.08);color:#00E676;font-size:0.7rem;font-weight:700;cursor:pointer;transition:all 0.2s; }
  .jb-boost-btn:hover { background:rgba(0,230,118,0.15); }

  .jb-tokens { display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px 12px;background:rgba(123,47,255,0.07);border:1px solid rgba(123,47,255,0.15);border-radius:8px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .jb-tokens-dots { display:flex;gap:4px; }
  .jb-token-dot { width:10px;height:10px;border-radius:50%;background:var(--purple); }
  .jb-token-dot.used { background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.1); }
  .jb-tokens-lbl { font-size:0.72rem;color:var(--t2, rgba(200,180,255,0.72));flex:1; }
  .jb-propose-btn { padding:4px 10px;background:rgba(123,47,255,0.15);border:1px solid rgba(123,47,255,0.3);color:#9B6FFF;border-radius:6px;font-size:0.7rem;font-weight:700;cursor:pointer;white-space:nowrap; }

  .jb-vote-list { display:flex;flex-direction:column;gap:0;overflow-y:auto;max-height:340px; }
  .jb-vote-item { display:grid;grid-template-columns:24px 1fr auto auto;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid rgba(200,180,255,0.07);cursor:pointer;transition:background 0.15s;border-radius:6px; }
  .jb-vote-item:last-child { border-bottom:none; }
  .jb-vote-item:hover { background:rgba(255,255,255,0.03); }
  .jb-vote-item.voted { background:rgba(123,47,255,0.06); }
  .jb-vote-rank { font-size:0.7rem;font-weight:700;color:var(--muted);text-align:center;width:20px; }
  .jb-vote-rank.top1 { color:var(--t2, #FFD700); }
  .jb-vote-rank.top2 { color:var(--t2, #C0C0C0); }
  .jb-vote-rank.top3 { color:#CD7F32; }
  .jb-vote-info { min-width:0; }
  .jb-vote-track { font-size:0.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px; }
  .jb-vote-meta { font-size:0.65rem;color:var(--muted); }
  .jb-vote-bar-wrap { width:90px;flex-shrink:0; }
  .jb-vote-bar-bg { height:4px;background:rgba(200,180,255,0.13);border-radius:2px;overflow:hidden;margin-bottom:2px; }
  .jb-vote-bar-fill { height:100%;border-radius:2px;transition:width 0.8s ease; }
  .jb-vote-pct { font-size:0.6rem;color:var(--muted);text-align:right; }
  .jb-vote-btn { width:28px;height:28px;border-radius:50%;border:1px solid rgba(123,47,255,0.3);background:rgba(123,47,255,0.08);color:#9B6FFF;font-size:0.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0; }
  .jb-vote-btn:hover { background:rgba(123,47,255,0.2);border-color:rgba(123,47,255,0.5); }
  .jb-vote-btn.voted { background:var(--grad);border-color:transparent;color:var(--t1, #fff); }
  @keyframes jbVotePop { 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
  .jb-vote-pop { animation:jbVotePop 0.3s ease; }

  .jb-vote-winner-banner { display:none;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,rgba(255,215,0,0.12),rgba(123,47,255,0.12));border:1px solid rgba(255,215,0,0.25);border-radius:12px;margin-top:14px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .jb-vote-winner-banner.show { display:flex; }
  .jb-vote-winner-icon { font-size:1.4rem;flex-shrink:0; }
  .jb-vote-winner-text { flex:1; }
  .jb-vote-winner-label { font-size:0.62rem;font-weight:700;color:#B8860B;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:2px; }
  .jb-vote-winner-track { font-size:0.9rem;font-weight:800; }
  .jb-vote-winner-sub { font-size:0.7rem;color:var(--muted); }

  .jb-queue-item { display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid rgba(200,180,255,0.07);cursor:pointer;border-radius:8px;transition:background 0.15s; }
  .jb-queue-item:last-child { border-bottom:none; }
  .jb-queue-item:hover { background:rgba(255,255,255,0.03); }
  .jb-queue-cover { width:36px;height:36px;border-radius:8px;background:rgba(200,180,255,0.11);flex-shrink:0;display:flex;align-items:center;justify-content:center; }
  .jb-queue-info { flex:1;min-width:0; }
  .jb-queue-title { font-size:0.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px; }
  .jb-queue-sub { font-size:0.68rem;color:var(--muted); }
  .jb-queue-votes { text-align:center;flex-shrink:0;min-width:36px; }
  .jb-queue-num { font-family:var(--font-head);font-size:0.92rem;font-weight:700;color:var(--purple);line-height:1; }
  .jb-queue-lbl { font-size:0.58rem;color:var(--muted); }
  .jb-vote-flash { color:var(--green) !important; }
  .jb-chat { background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:20px;grid-row:1/3;display:flex;flex-direction:column;max-height:500px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .jb-chat-head { font-family:var(--font-head);font-size:0.88rem;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px; }
  .jb-chat-msgs { flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:7px;margin-bottom:12px; }
  .jb-chat-msg { font-size:0.78rem;line-height:1.4; }
  .jb-chat-msg .jbn { font-weight:600;color:var(--purple);margin-right:4px; }
  .jb-chat-row { display:flex;gap:8px; }
  .jb-chat-row input { flex:1;background:rgba(200,180,255,0.09);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-size:0.82rem;outline:none;font-family:var(--font-body); }
  .jb-chat-row input:focus { border-color:rgba(123,47,255,0.4); }
  .jb-chat-row button { padding:8px 14px;background:var(--grad);border:none;border-radius:8px;color:var(--t1, #fff);font-size:0.82rem;font-weight:600;cursor:pointer;font-family:var(--font-body); }

  @keyframes dropPulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.06);opacity:0.7;} }
  @keyframes playerReveal { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} }

  .now-drop-room-card { background:linear-gradient(135deg,#0e0820,#1a0030,#0c0820);border:1px solid rgba(233,30,140,0.2);border-radius:20px;padding:22px 24px;cursor:pointer;transition:border-color 0.2s;display:flex;flex-direction:column;gap:14px;
    box-shadow: var(--card-shadow);
  }
  .now-drop-room-card:hover { border-color:rgba(233,30,140,0.4); }
  .now-drop-room-top { display:flex;align-items:center;gap:12px; }
  .now-drop-room-icon { width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#E91E8C,#FF4081);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
  .now-drop-room-info h3 { font-family:var(--font-head);font-size:0.95rem;font-weight:800;margin-bottom:2px; }
  .now-drop-room-info p { font-size:0.75rem;color:var(--muted); }
  .now-drop-room-stats { display:flex;border-top:1px solid rgba(200,180,255,0.11);padding-top:12px; }
  .now-drop-room-stat { flex:1;text-align:center; }
  .now-drop-room-stat strong { display:block;font-family:var(--font-head);font-size:1rem;font-weight:800; }
  .now-drop-room-stat span { font-size:0.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em; }
  .now-drop-room-stat + .now-drop-room-stat { border-left:1px solid rgba(200,180,255,0.11); }
  .now-drop-room-enter { display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;background:rgba(233,30,140,0.12);border:1px solid rgba(233,30,140,0.22);border-radius:10px;font-size:0.82rem;font-weight:600;color:#E91E8C; }

  .dr-featured { position:relative;border-radius:20px;overflow:hidden;margin-bottom:24px;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;background:linear-gradient(135deg,#0a0015,#1a0030,#0d0008);border:1px solid rgba(233,30,140,0.2);cursor:pointer;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .dr-featured-bg { position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(233,30,140,0.12),transparent 60%),radial-gradient(ellipse at 20% 80%,rgba(123,47,255,0.1),transparent 50%);pointer-events:none; }
  .dr-featured-status { display:inline-flex;align-items:center;gap:6px;font-size:0.63rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#E91E8C;margin-bottom:10px; }
  .dr-featured-title { font-family:var(--font-head);font-size:clamp(1.3rem,3vw,1.9rem);font-weight:800;margin-bottom:4px;line-height:1.1; }
  .dr-featured-artist { font-size:0.85rem;color:var(--t2, rgba(200,180,255,0.75));margin-bottom:18px; }
  .dr-featured-bottom { display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px; }
  .dr-cd-row { display:flex;gap:8px; }
  .dr-cd-unit { text-align:center;background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.1);border-radius:9px;padding:7px 12px;min-width:48px; }
  .dr-cd-num { font-family:var(--font-head);font-size:1.4rem;font-weight:800;line-height:1;color:var(--t1, #fff); }
  .dr-cd-lbl { font-size:0.54rem;color:var(--t2, rgba(200,180,255,0.62));text-transform:uppercase;letter-spacing:0.06em;margin-top:2px; }
  .dr-cd-sep { font-family:var(--font-head);font-size:1.4rem;font-weight:800;color:var(--t3, rgba(255,255,255,0.18));align-self:center;padding-bottom:6px; }
  .dr-featured-right { display:flex;flex-direction:column;align-items:flex-end;gap:8px; }
  .dr-featured-fans strong { display:block;font-family:var(--font-head);font-size:1.1rem;font-weight:800;color:var(--t1, #fff);text-align:right; }
  .dr-featured-fans span { font-size:0.72rem;color:var(--t3, rgba(255,255,255,0.4)); }
  .dr-featured-btn { padding:9px 20px;background:var(--grad);border:none;border-radius:10px;color:var(--t1, #fff);font-size:0.84rem;font-weight:700;cursor:pointer;font-family:var(--font-body); }

  .dr-filters { display:flex;gap:7px;margin-bottom:18px;flex-wrap:wrap; }
  .dr-filter-btn { padding:5px 13px;border-radius:20px;font-size:0.73rem;font-weight:600;cursor:pointer;border:1px solid var(--border);background:rgba(200,180,255,0.07);color:var(--muted);transition:all 0.2s;font-family:var(--font-body); }
  .dr-filter-btn.active { background:rgba(123,47,255,0.15);border-color:rgba(123,47,255,0.4);color:#A06EFF; }
  .dr-filter-btn:hover { background:rgba(200,180,255,0.13);color:var(--text); }
  .dr-section-lbl { font-size:0.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px; }
  .dr-vinyl-scroll { display:flex;gap:12px;overflow-x:auto;padding-bottom:10px; }
  .dr-vinyl-card { flex-shrink:0;width:190px;background:var(--card);border:1px solid var(--card-border);border-radius:16px;overflow:hidden;cursor:pointer;transition:all 0.2s;
    box-shadow: var(--card-shadow);
  }
  .dr-vinyl-card:hover { border-color:rgba(123,47,255,0.35);transform:translateY(-3px); }
  .dr-vinyl-cover { width:100%;height:130px;display:flex;align-items:center;justify-content:center;position:relative; }
  .dr-vinyl-disc { width:80px;height:80px;border-radius:50%;border:3px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center; }
  .dr-vinyl-disc::before { content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,0.12); }
  .dr-vinyl-body { padding:11px; }
  .dr-vinyl-name { font-family:var(--font-head);font-size:0.82rem;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .dr-vinyl-artist { font-size:0.7rem;color:var(--muted);margin-bottom:7px; }
  .dr-vinyl-bottom { display:flex;align-items:center;justify-content:space-between; }
  .dr-vinyl-cd { font-size:0.68rem;font-weight:700;color:var(--purple); }
  .dr-vinyl-fans { font-size:0.66rem;color:var(--muted); }
  .dr-vinyl-badge { position:absolute;top:7px;right:7px;font-size:0.56rem;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:0.05em; }
  .dr-badge-live { background:rgba(233,30,140,0.2);color:#E91E8C;border:1px solid rgba(233,30,140,0.3); }
  .dr-badge-upcoming { background:rgba(123,47,255,0.15);color:#9B6FFF;border:1px solid rgba(123,47,255,0.25); }

  .dr-stage { min-height:calc(100vh - 60px);display:flex;flex-direction:column;background:linear-gradient(180deg,#04000f 0%,#0a0020 60%,#04000f 100%); }
  .dr-stage-back { display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(200,180,255,0.09);border:1px solid rgba(123,47,255,0.25);color:var(--muted);border-radius:10px;cursor:pointer;font-size:0.85rem;margin:24px 24px 0;width:fit-content;transition:all 0.2s;font-family:var(--font-body); box-shadow: 0 0 0 1px rgba(123,47,255,0.22), 0 2px 14px rgba(80,20,180,0.20);
    box-shadow: 0 0 0 1px rgba(123,47,255,0.20), 0 2px 12px rgba(80,20,180,0.18);
    transition: all 0.2s;
  }
  .dr-stage-back:hover { color:var(--text);background:rgba(255,255,255,0.09); }
  .dr-stage-main { flex:1;display:flex;gap:20px;padding:20px 24px;max-width:var(--width-page);margin:0 auto;width:100%;box-sizing:border-box; }
  @media(max-width:800px){ .dr-stage-main{flex-direction:column;} }
  .dr-stage-center { flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 0; }
  .dr-stage-genre { font-size:0.63rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--purple);margin-bottom:14px; }
  .dr-stage-title { font-family:var(--font-head);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:800;line-height:1.1;margin-bottom:4px; }
  .dr-stage-artist { font-size:0.88rem;color:var(--t2, rgba(200,180,255,0.68));margin-bottom:18px; }
  .dr-stage-ring { width:120px;height:120px;border-radius:50%;border:1.5px solid rgba(233,30,140,0.2);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;position:relative; }
  .dr-stage-ring::before { content:'';position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(123,47,255,0.1); }
  .dr-stage-ring::after { content:'';position:absolute;inset:-20px;border-radius:50%;border:1px solid rgba(233,30,140,0.05); }
  .dr-stage-cd { display:flex;gap:8px;justify-content:center;margin-bottom:20px; }
  .dr-stage-cd-unit { text-align:center;background:rgba(200,180,255,0.07);border:1px solid rgba(200,180,255,0.13);border-radius:11px;padding:10px 14px;min-width:56px; }
  .dr-stage-cd-num { font-family:var(--font-head);font-size:1.7rem;font-weight:800;line-height:1;color:var(--t1, #fff);animation:dropPulse 2s ease infinite; }
  .dr-stage-cd-lbl { font-size:0.56rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;margin-top:3px; }
  .dr-stage-cd-sep { font-family:var(--font-head);font-size:1.7rem;font-weight:800;color:var(--t3, rgba(255,255,255,0.12));align-self:center;padding-bottom:8px; }
  .dr-stage-status { font-size:0.8rem;color:var(--t2, rgba(200,180,255,0.62));margin-bottom:18px; }
  .dr-fan-bubbles { display:flex;justify-content:center;margin-bottom:14px;position:relative;height:34px; }
  .dr-fan-bubble { width:30px;height:30px;border-radius:50%;border:2px solid #04000f;display:flex;align-items:center;justify-content:center;font-size:0.62rem;font-weight:700;position:absolute; }
  .dr-stage-reg-btn { padding:10px 26px;background:var(--grad);border:none;border-radius:13px;color:var(--t1, #fff);font-size:0.88rem;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:opacity 0.2s;margin-bottom:8px; }
  .dr-stage-reg-btn:hover { opacity:0.88; }
  .dr-stage-reg-btn.registered { background:rgba(0,230,118,0.12);color:#00E676;border:1px solid rgba(0,230,118,0.25);cursor:default; }
  .dr-stage-reg-count { font-size:0.75rem;color:var(--muted);margin-bottom:10px; }
  .dr-early-badge { display:inline-flex;align-items:center;gap:6px;background:rgba(255,215,0,0.07);border:1px solid rgba(255,215,0,0.14);padding:5px 12px;border-radius:7px;font-size:0.72rem;color:var(--t2, rgba(255,215,0,0.65));margin-top:6px; }
  .dr-player-wrap { display:none;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:360px;margin-top:20px;animation:playerReveal 0.5s ease both; }
  .dr-player-wrap.show { display:flex; }
  .dr-player-lockbar { width:100%;background:rgba(255,215,0,0.07);border:1px solid rgba(255,215,0,0.14);border-radius:9px;padding:9px 14px;font-size:0.75rem;color:var(--t2, rgba(255,215,0,0.65));text-align:center; }
  .dr-player-prog { width:100%;height:3px;background:rgba(200,180,255,0.13);border-radius:2px;overflow:hidden; }
  .dr-player-fill { height:100%;background:var(--grad);border-radius:2px;transition:width 0.5s linear; }
  .dr-player-times { display:flex;justify-content:space-between;font-size:0.67rem;color:var(--muted);width:100%;margin-top:4px; }
  .dr-player-ctrls { display:flex;align-items:center;gap:14px;margin-top:6px; }
  .dr-player-btn { background:none;border:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;transition:all 0.2s; }
  .dr-player-btn:hover { color:var(--text);background:rgba(200,180,255,0.09); }
  .dr-player-btn.locked { opacity:0.2;cursor:not-allowed; }
  .dr-player-play { width:46px;height:46px;border-radius:50%;background:var(--grad);color:var(--t1, #fff);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer; }

  .dr-chat-side { width:290px;flex-shrink:0;background:rgba(255,255,255,0.02);border:1px solid rgba(123,47,255,0.28);border-radius:20px;padding:18px;display:flex;flex-direction:column;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  @media(max-width:800px){ .dr-chat-side{width:100%;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  } }
  .dr-chat-head { font-family:var(--font-head);font-size:0.86rem;font-weight:700;margin-bottom:11px;display:flex;align-items:center;gap:6px; }
  .dr-chat-msgs { flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:7px;margin-bottom:11px;min-height:260px;max-height:380px; }
  .dr-chat-msg { font-size:0.77rem;line-height:1.4; }
  .dr-chat-msg .n { font-weight:600;color:var(--purple);margin-right:4px; }
  .dr-chat-row { display:flex;gap:7px; }
  .dr-chat-row input { flex:1;background:rgba(200,180,255,0.07);border:1px solid rgba(200,180,255,0.13);border-radius:8px;padding:7px 11px;color:var(--text);font-size:0.8rem;outline:none;font-family:var(--font-body); }
  .dr-chat-row input:focus { border-color:rgba(123,47,255,0.4); }
  .dr-chat-row button { padding:7px 13px;background:var(--grad);border:none;border-radius:8px;color:var(--t1, #fff);font-size:0.8rem;font-weight:600;cursor:pointer;font-family:var(--font-body); }

  .dr-wait-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; width:100%; }
  @media(max-width:500px){ .dr-wait-grid { grid-template-columns:1fr; } }

  .dr-ambient { background:rgba(255,255,255,0.03); border:1px solid rgba(200,180,255,0.13); border-radius:14px; padding:14px; }
  .dr-ambient-head { font-size:0.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px; }
  .dr-ambient-now { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .dr-ambient-cover { width:36px; height:36px; border-radius:8px; background:linear-gradient(135deg,#1a0030,#3d0066); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .dr-ambient-info { flex:1; min-width:0; }
  .dr-ambient-name { font-size:0.78rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:1px; }
  .dr-ambient-artist { font-size:0.68rem; color:var(--muted); }
  .dr-ambient-prog { height:2px; background:rgba(200,180,255,0.13); border-radius:2px; overflow:hidden; margin-bottom:5px; }
  .dr-ambient-fill { height:100%; background:var(--grad); border-radius:2px; animation:ambientProg 180s linear infinite; }
  @keyframes ambientProg { from{width:0%;} to{width:100%;} }
  .dr-ambient-controls { display:flex; align-items:center; justify-content:center; gap:12px; }
  .dr-ambient-btn { background:none; border:none; color:var(--muted); cursor:pointer; padding:4px; font-size:0.7rem; font-family:var(--font-body); transition:color 0.2s; }
  .dr-ambient-btn:hover { color:var(--text); }
  .dr-ambient-btn.active { color:var(--pink); }

  .dr-artist-card { background:rgba(255,255,255,0.03); border:1px solid rgba(123,47,255,0.28); border-radius:14px; padding:14px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .dr-artist-head { font-size:0.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px; }
  .dr-artist-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .dr-artist-avatar { width:40px; height:40px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:0.9rem; font-weight:800; flex-shrink:0; }
  .dr-artist-name { font-size:0.88rem; font-weight:700; margin-bottom:1px; }
  .dr-artist-genre { font-size:0.68rem; color:var(--muted); }
  .dr-artist-stats { display:flex; gap:10px; margin-bottom:10px; }
  .dr-artist-stat { text-align:center; flex:1; }
  .dr-artist-stat strong { display:block; font-family:var(--font-head); font-size:0.88rem; font-weight:800; }
  .dr-artist-stat span { font-size:0.6rem; color:var(--muted); }
  .dr-artist-link { width:100%; padding:6px; background:rgba(123,47,255,0.12); border:1px solid rgba(123,47,255,0.22); color:#A06EFF; border-radius:8px; font-size:0.73rem; font-weight:600; cursor:pointer; font-family:var(--font-body); transition:all 0.2s; }
  .dr-artist-link:hover { background:rgba(123,47,255,0.22); }

  .dr-discog { background:rgba(255,255,255,0.03); border:1px solid rgba(123,47,255,0.28); border-radius:14px; padding:14px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .dr-discog-head { font-size:0.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px; }
  .dr-discog-item { display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid rgba(200,180,255,0.07); cursor:pointer; transition:background 0.15s; border-radius:7px; }
  .dr-discog-item:last-child { border-bottom:none; }
  .dr-discog-item:hover { background:rgba(255,255,255,0.03); }
  .dr-discog-num { font-size:0.68rem; color:var(--muted); width:14px; text-align:center; flex-shrink:0; }
  .dr-discog-cover { width:30px; height:30px; border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .dr-discog-info { flex:1; min-width:0; }
  .dr-discog-name { font-size:0.78rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dr-discog-meta { font-size:0.65rem; color:var(--muted); }
  .dr-discog-streams { font-size:0.65rem; color:var(--muted); flex-shrink:0; }

  .dr-live-stat { background:rgba(233,30,140,0.06); border:1px solid rgba(233,30,140,0.12); border-radius:14px; padding:14px; text-align:center; }
  .dr-live-stat-num { font-family:var(--font-head); font-size:1.4rem; font-weight:800; color:#E91E8C; margin-bottom:3px; }
  .dr-live-stat-lbl { font-size:0.68rem; color:var(--muted); }
  .dr-live-stat-sub { font-size:0.62rem; color:rgba(233,30,140,0.5); margin-top:6px; }

  .now-live-room-card { border-radius:20px;padding:22px 24px;cursor:pointer;transition:all 0.2s;display:flex;flex-direction:column;gap:14px;
    box-shadow: var(--card-shadow);
  }
  .now-live-room-card.events { background:linear-gradient(135deg,#0a1500,#1a2800,#0a1000);border:1px solid rgba(0,230,118,0.2); }
  .now-live-room-card.clubs  { background:linear-gradient(135deg,#001520,#002540,#001020);border:1px solid rgba(0,188,212,0.2); }
  .now-live-room-card.events:hover { border-color:rgba(0,230,118,0.4); }
  .now-live-room-card.clubs:hover  { border-color:rgba(0,188,212,0.4); }
  .now-live-room-top { display:flex;align-items:center;gap:12px; }
  .now-live-room-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
  .now-live-room-icon.events { background:linear-gradient(135deg,#00E676,#009688); }
  .now-live-room-icon.clubs  { background:linear-gradient(135deg,#00BCD4,#0097A7); }
  .now-live-room-info h3 { font-family:var(--font-head);font-size:0.95rem;font-weight:800;margin-bottom:2px; }
  .now-live-room-info p { font-size:0.75rem;color:var(--muted); }
  .now-live-room-stats { display:flex;border-top:1px solid rgba(200,180,255,0.11);padding-top:12px; }
  .now-live-room-stat { flex:1;text-align:center; }
  .now-live-room-stat strong { display:block;font-family:var(--font-head);font-size:1rem;font-weight:800; }
  .now-live-room-stat span { font-size:0.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em; }
  .now-live-room-stat+.now-live-room-stat { border-left:1px solid rgba(200,180,255,0.11); }
  .now-live-room-enter { display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:10px;font-size:0.82rem;font-weight:600; }
  .now-live-room-enter.events { background:rgba(0,230,118,0.1);border:1px solid rgba(0,230,118,0.2);color:#00E676; }
  .now-live-room-enter.clubs  { background:rgba(0,188,212,0.1);border:1px solid rgba(0,188,212,0.2);color:#00BCD4; }
  .lr-sub-inner { max-width:var(--width-page);margin:0 auto;padding:48px 24px 60px; }
  .lr-hero { margin-bottom:24px; }
  .lr-hero h2 { font-family:var(--font-head);font-size:1.4rem;font-weight:800;margin-bottom:4px; }
  .lr-hero p  { color:var(--muted);font-size:0.85rem; }
  .lr-filters { display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap; }
  .lr-filter-btn { padding:5px 14px;border-radius:20px;font-size:0.73rem;font-weight:600;cursor:pointer;border:1px solid var(--border);background:rgba(200,180,255,0.07);color:var(--muted);transition:all 0.2s;font-family:var(--font-body); }
  .lr-filter-btn.active { background:rgba(0,230,118,0.12);border-color:rgba(0,230,118,0.3);color:#00E676; }
  .lr-filter-btn:hover { background:rgba(200,180,255,0.13);color:var(--text); }
  .lr-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:28px; }
  .lr-card { background:var(--card);border:1px solid var(--card-border);border-radius:18px;overflow:hidden;cursor:pointer;transition:all 0.2s;
    box-shadow: var(--card-shadow);
  }
  .lr-card:hover { border-color:rgba(0,230,118,0.3);transform:translateY(-2px); }
  .lr-card.clubs:hover { border-color:rgba(0,188,212,0.3); }
  .lr-card-thumb { width:100%;height:160px;position:relative;display:flex;align-items:center;justify-content:center; }
  .lr-card-live-badge { position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:5px;background:rgba(233,30,140,0.85);padding:3px 9px;border-radius:6px;font-size:0.62rem;font-weight:700;letter-spacing:0.08em; }
  .lr-card-viewers { position:absolute;top:10px;right:10px;background:rgba(0,0,0,0.6);padding:3px 9px;border-radius:6px;font-size:0.68rem;color:var(--t2, rgba(220,210,255,0.90)); }
  .lr-card-play { width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center; }
  .lr-card-body { padding:14px; }
  .lr-card-title { font-family:var(--font-head);font-size:0.9rem;font-weight:700;margin-bottom:3px; }
  .lr-card-sub { font-size:0.75rem;color:var(--muted);margin-bottom:8px; }
  .lr-card-tags { display:flex;gap:6px;flex-wrap:wrap; }
  .lr-tag { font-size:0.64rem;padding:2px 8px;border-radius:5px;font-weight:600; }
  .lr-tag.genre  { background:rgba(123,47,255,0.15);color:#9B6FFF; }
  .lr-tag.city   { background:rgba(0,230,118,0.1);color:#00C876; }
  .lr-tag.free   { background:rgba(0,188,212,0.1);color:#00BCD4; }
  .lr-tag.ticket { background:rgba(255,193,7,0.1);color:#C49A00; }
  .lr-player-page { display:none;position:fixed;inset:0;top:var(--cs-chrome-top, var(--fx-nav-chrome, 60px));background:var(--bg);z-index:60;overflow-y:auto; }
  .lr-player-page.open { display:block;animation:fadeIn 0.2s ease both; }
  .lr-player-wrap { max-width:var(--width-page);margin:0 auto;padding:48px 24px; }
  .lr-player-back { display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(200,180,255,0.09);border:1px solid rgba(123,47,255,0.25);color:var(--muted);border-radius:10px;cursor:pointer;font-size:0.85rem;margin-bottom:20px;transition:all 0.2s;font-family:var(--font-body); box-shadow: 0 0 0 1px rgba(123,47,255,0.22), 0 2px 14px rgba(80,20,180,0.20);
    box-shadow: 0 0 0 1px rgba(123,47,255,0.20), 0 2px 12px rgba(80,20,180,0.18);
    transition: all 0.2s;
  }
  .lr-player-back:hover { color:var(--text);background:rgba(255,255,255,0.09); }
  .lr-player-grid { display:grid;grid-template-columns:1fr 300px;gap:16px; }
  @media(max-width:800px){ .lr-player-grid{grid-template-columns:1fr;} }
  .lr-player-screen { background:#000;border-radius:16px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; }
  .lr-player-screen-bg { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px; }
  .lr-player-live-dot { display:flex;align-items:center;gap:6px;background:rgba(233,30,140,0.2);border:1px solid rgba(233,30,140,0.3);padding:5px 14px;border-radius:20px;font-size:0.72rem;font-weight:700;color:#E91E8C;letter-spacing:0.06em; }
  .lr-player-title { font-family:var(--font-head);font-size:1.1rem;font-weight:800;text-align:center; }
  .lr-player-sub { font-size:0.8rem;color:var(--muted);text-align:center; }
  .lr-player-info { padding:16px 0; }
  .lr-player-info h3 { font-family:var(--font-head);font-size:1.1rem;font-weight:800;margin-bottom:4px; }
  .lr-player-info p  { font-size:0.82rem;color:var(--muted);margin-bottom:12px; }
  .lr-player-meta { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px; }
  .lr-player-actions { display:flex;gap:10px;flex-wrap:wrap; }
  .lr-player-btn { padding:9px 20px;border-radius:10px;font-size:0.82rem;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:all 0.2s; }
  .lr-player-btn.primary { background:var(--grad);border:none;color:var(--t1, #fff); }
  .lr-player-btn.ghost   { background:rgba(200,180,255,0.09);border:1px solid var(--border);color:var(--text); }
  .lr-player-btn.ghost:hover { background:rgba(255,255,255,0.09); }
  .lr-chat-panel { background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:18px;display:flex;flex-direction:column;max-height:520px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .lr-chat-head { font-family:var(--font-head);font-size:0.86rem;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px; }
  .lr-chat-msgs { flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:7px;margin-bottom:12px;min-height:280px; }
  .lr-chat-msg { font-size:0.77rem;line-height:1.4; }
  .lr-chat-msg .n { font-weight:600;color:var(--purple);margin-right:4px; }
  .lr-chat-row { display:flex;gap:7px; }
  .lr-chat-row input { flex:1;background:rgba(200,180,255,0.07);border:1px solid var(--border);border-radius:8px;padding:7px 11px;color:var(--text);font-size:0.8rem;outline:none;font-family:var(--font-body); }
  .lr-chat-row input:focus { border-color:rgba(123,47,255,0.4); }
  .lr-chat-row button { padding:7px 13px;background:var(--grad);border:none;border-radius:8px;color:var(--t1, #fff);font-size:0.8rem;font-weight:600;cursor:pointer;font-family:var(--font-body); }
footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:0;display:flex;flex-direction:column;align-items:stretch;gap:0;color:var(--text);background:linear-gradient(180deg,rgba(13,8,24,0.55) 0%,rgba(8,6,18,0.92) 100%);}
.footer-main{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:26px 40px 16px;box-sizing:border-box;width:100%;}
.footer-logo{display:flex;align-items:center;gap:8px;font-size:0.86rem;font-weight:600;color:var(--text);}
.footer-legal-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.footer-legal-links a{font-size:0.72rem;color:var(--text);text-decoration:none;font-family:var(--font-body);opacity:0.92;transition:opacity 0.15s ease,text-decoration-color 0.15s ease;}
.footer-legal-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;}
.footer-main > p{font-size:0.72rem;color:var(--text);opacity:0.82;margin:0;}
.footer-attr-row{width:100%;box-sizing:border-box;text-align:center;padding:12px 24px 18px;border-top:1px solid rgba(200,180,255,0.10);}
.footer-attr{font-size:0.7rem;color:var(--muted);opacity:0.78;line-height:1.5;margin:0 auto;max-width:100%;overflow-wrap:anywhere;word-break:break-word;}
.footer-attr a{color:var(--muted);text-decoration:none;}
.footer-attr a:hover{text-decoration:underline;text-underline-offset:2px;color:var(--muted);}
#chatMinimizedTab{
  transition:transform 0.22s ease,opacity 0.22s ease;
  will-change:transform;
}
#chatMinimizedTab.fm-above-footer{
  transform:translateY(calc(-1 * var(--fm-footer-lift, 96px)));
}
@media(max-width:600px){
  .footer-main{padding:20px 20px 12px;}
  .footer-attr-row{padding:10px 16px 16px;}
}
#page-terms,#page-privacy,#page-guidelines{background:transparent;min-height:100vh;padding-top:var(--cs-chrome-top, var(--fx-nav-chrome, 60px));}
.fm-legal-page{max-width:800px;margin:0 auto;padding:48px 32px 80px;font-family:var(--font-body);color:var(--text);}
.fm-legal-page h1{font-family:var(--font-head);font-size:clamp(1.75rem,4vw,2.25rem);font-weight:800;margin:0 0 8px;line-height:1.2;}
.fm-legal-updated{font-size:0.85rem;color:var(--muted);margin:0 0 32px;}
.fm-legal-page h2{font-family:var(--font-head);font-size:1.05rem;font-weight:700;margin:28px 0 12px;line-height:1.35;}
.fm-legal-page p{font-size:0.92rem;line-height:1.75;color:var(--muted);margin:0 0 16px;}

  /* FLOATING JOIN PANEL */
  #floatPanel {
    position:fixed;right:0;top:50%;
    transform:translateY(-50%);
    z-index:9000;
    width:160px;
    background:linear-gradient(180deg,#1a0035,#0d0020);
    border:1px solid rgba(123,47,255,0.35);
    border-right:none;
    border-radius:12px 0 0 12px;
    padding:18px 16px 14px 16px;
    box-shadow:-4px 0 32px rgba(123,47,255,0.2);
    transition:opacity 0.4s ease, width 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease;
    opacity:0;
    pointer-events:none;
  }
  #floatPanel.visible {
    opacity:1;
    pointer-events:all;
  }
  #floatPanel.visible:hover {
    width:220px;
    box-shadow:-6px 0 40px rgba(123,47,255,0.3);
  }
  #floatPanel.hidden {
    opacity:0;
    pointer-events:none;
  }
  .fp-collapsed { display:none; }
  .fp-expanded {
    display:block;
    opacity:1;
    pointer-events:all;
    transform-origin:right center;
  }
  #floatPanel.visible:hover .fp-expanded {
    /* content naturally expands with panel width */
  }
  .fp-logo {
    display:flex;align-items:center;gap:8px;margin-bottom:12px;
  }
  .fp-logo img { width:26px;height:26px;object-fit:contain; }
  .fp-logo-text { display:flex;flex-direction:column;line-height:1; }
  .fp-logo-text span:first-child { font-size:0.88rem;font-weight:800;letter-spacing:0.02em;color:var(--t1, #fff); }
  .fp-logo-text span:last-child { font-size:0.55rem;font-weight:400;letter-spacing:0.12em;color:var(--t2, rgba(200,180,255,0.72));margin-top:1px; }
  .fp-title { font-size:0.88rem;font-weight:700;color:var(--t1, #fff);margin-bottom:4px;line-height:1.3; }
  .fp-sub { font-size:0.7rem;color:var(--t2, rgba(200,180,255,0.72));margin-bottom:14px;line-height:1.55; }
  .fp-btn {
    width:100%;padding:8px;background:linear-gradient(135deg,#E91E8C,#7B2FFF);
    border:none;border-radius:8px;color:var(--t1, #fff);font-size:0.78rem;font-weight:600;
    cursor:pointer;font-family:'Epilogue',sans-serif;transition:opacity 0.2s;
  }
  .fp-btn:hover { opacity:0.88; }
  .fp-note { font-size:0.62rem;color:var(--muted);text-align:center;margin-top:7px; }
  .fp-close {
    position:absolute;top:8px;right:10px;background:none;border:none;
    color:var(--muted);cursor:pointer;font-size:0.9rem;
    padding:2px 4px;transition:color 0.2s;
  }
  .fp-close:hover { color:var(--t2, rgba(255,255,255,0.7)); }
  #floatTab { display:none !important; }


/* ================================================================
   SECTION BREAK
   ================================================================ */


  /* ── JUKEBOX DASHBOARD (3-col) ── */
  .jb-dash {
    display:grid;
    grid-template-columns:230px minmax(0,1fr) 316px;
    gap:20px;
    align-items:start;
    padding:20px 20px 48px;
    box-sizing:border-box;
    width:100%;
  }
  .jb-dash.hidden { display:none; }
  .jb-page-room { display:none; }
  .jb-page-room.open { display:block; }
  .jb-page-results { display:none; }
  .jb-page-results.open { display:block; }
  .jb-empty {
    text-align:center; color:var(--muted); font-size:0.88rem; line-height:1.55;
    padding:28px 16px; max-width:520px; margin:16px auto 24px;
  }
  .jb-col-left, .jb-col-right {
    position:sticky;
    top:16px;
    align-self:start;
    flex-shrink:0;
    box-sizing:border-box;
  }
  .jb-col-left {
    width:230px;
    max-width:230px;
  }
  .jb-col-right {
    width:316px;
    max-width:316px;
  }
  .jb-col-center {
    min-width:0;
  }
  .jb-col-left-head,
  .jb-rail-title,
  .jb-waiting-head {
    font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--muted); margin-bottom:10px;
  }
  .jb-genre-nav {
    display:flex; flex-direction:column; gap:2px;
    max-height:calc(100vh - 80px); overflow-y:auto;
  }
  .jb-genre-row {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; padding:10px 12px; border-radius:10px; cursor:pointer;
    border:1px solid transparent; background:transparent;
    color:var(--text); font-family:var(--font-body); font-size:0.84rem; text-align:left;
    transition:background 0.15s, border-color 0.15s;
  }
  .jb-genre-row:hover { background:var(--card); border-color:var(--border); }
  .jb-genre-row.active {
    background:rgba(123,47,255,0.12); border-color:var(--card-border);
  }
  .jb-genre-row-name { font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .jb-genre-row-count {
    flex-shrink:0; min-width:1.6em; text-align:right;
    font-size:0.75rem; font-weight:700; color:var(--muted);
  }
  .jb-genre-row.active .jb-genre-row-count { color:var(--pink); }
  .jb-center-toolbar {
    display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
    gap:14px; margin-bottom:18px;
  }
  .jb-center-titles h1 {
    font-family:var(--font-head); font-size:1.45rem; font-weight:800;
    letter-spacing:-0.02em; margin:0 0 4px;
  }
  .jb-center-sub { margin:0; color:var(--muted); font-size:0.82rem; }
  .jb-center-filters { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
  .jb-sub-search {
    min-width:180px; padding:10px 14px; border-radius:10px;
    border:1px solid var(--border); background:var(--card2); color:var(--text);
    font-family:var(--font-body); font-size:0.88rem; outline:none;
  }
  .jb-sub-search:focus { border-color:var(--card-border-hover); }
  .jb-sub-live-only {
    display:inline-flex; align-items:center; gap:8px; font-size:0.82rem;
    color:var(--muted); cursor:pointer; user-select:none; white-space:nowrap;
  }
  .jb-sub-live-only input { accent-color:var(--purple); }
  .jb-live-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(452px, 1fr));
    gap:16px;
    margin-bottom:28px;
    justify-items:start;
  }
  .jb-live-card {
    background:var(--card); border:1px solid var(--card-border); border-radius:16px;
    padding:18px 18px 16px; display:flex; flex-direction:column; gap:14px;
    cursor:pointer; box-shadow:var(--card-shadow);
    transition:border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    width:100%;
    max-width:560px;
    box-sizing:border-box;
  }
  .jb-live-card:hover {
    border-color:var(--card-border-hover); transform:translateY(-2px);
    box-shadow:var(--card-shadow-hover);
  }
  .jb-live-card-top { display:flex; flex-direction:column; gap:6px; }
  .jb-live-pill {
    display:inline-flex; align-items:center; gap:6px; width:fit-content;
    font-size:0.6rem; font-weight:800; letter-spacing:0.1em; color:var(--pink);
  }
  .jb-live-name {
    font-family:var(--font-head); font-size:1.15rem; font-weight:800;
    letter-spacing:-0.02em; margin:0;
  }
  .jb-live-whole-lbl {
    font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--pink); margin-top:2px;
  }
  .jb-live-card--whole {
    border-color:rgba(233,30,140,0.35);
  }
  .jb-live-flip { display:flex; justify-content:flex-start; }
  .jb-live-stats {
    display:grid; grid-template-columns:repeat(3,1fr); gap:0;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    padding:10px 0;
  }
  .jb-live-stats > div { text-align:center; }
  .jb-live-stats strong {
    display:block; font-family:var(--font-head); font-size:0.95rem; font-weight:800;
  }
  .jb-live-stats span {
    font-size:0.58rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em;
  }
  .jb-live-stats > div + div { border-left:1px solid var(--border); }
  .jb-live-now {
    display:flex; flex-direction:column; gap:2px; min-height:3.2em;
  }
  .jb-live-now-lbl {
    font-size:0.58rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--muted);
  }
  .jb-live-now-title { font-size:0.88rem; font-weight:700; }
  .jb-live-now-artist { font-size:0.75rem; color:var(--muted); }
  .jb-live-now-note {
    font-size:0.62rem; color:var(--muted); opacity:0.85; margin-top:2px;
  }
  .jb-live-now--empty { font-size:0.8rem; color:var(--muted); }
  .jb-live-enter {
    margin-top:auto; padding:10px 14px; border-radius:10px; cursor:pointer;
    border:1px solid var(--card-border); background:rgba(123,47,255,0.15);
    color:#A06EFF; font-family:var(--font-body); font-size:0.84rem; font-weight:700;
    transition:background 0.15s, border-color 0.15s;
  }
  .jb-live-enter:hover {
    background:rgba(123,47,255,0.25); border-color:var(--card-border-hover);
  }
  .jb-waiting-block { margin-top:8px; padding-bottom:12px; }
  .jb-waiting-chips {
    display:flex; flex-wrap:wrap; gap:6px;
  }
  .jb-wait-chip {
    padding:5px 10px; border-radius:999px; font-size:0.72rem; font-weight:600;
    font-family:var(--font-body); cursor:pointer; border:1px solid var(--border);
    background:rgba(200,180,255,0.06); color:var(--muted);
    transition:border-color 0.15s, color 0.15s, background 0.15s;
  }
  .jb-wait-chip.has-tracks {
    background:rgba(123,47,255,0.12); border-color:var(--card-border); color:var(--text);
  }
  .jb-wait-chip.empty { opacity:0.55; }
  .jb-wait-chip:hover { border-color:var(--card-border-hover); color:var(--text); }
  .jb-waiting-more {
    margin-top:10px; padding:6px 12px; border-radius:8px; cursor:pointer;
    border:1px solid var(--border); background:transparent; color:var(--muted);
    font-family:var(--font-body); font-size:0.75rem; font-weight:600;
  }
  .jb-waiting-more:hover { color:var(--text); border-color:var(--card-border); }
  .jb-rail-card {
    background:var(--card); border:1px solid var(--card-border); border-radius:14px;
    padding:14px 14px 12px; margin-bottom:14px; box-shadow:var(--card-shadow);
  }
  .jb-rail-wait { font-size:0.8rem; color:var(--muted); line-height:1.45; }
  .jb-winner-period { margin-bottom:12px; }
  .jb-winner-period:last-child { margin-bottom:0; }
  .jb-winner-period-lbl {
    font-size:0.62rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--muted); margin-bottom:6px;
  }
  .jb-winner-row { padding:6px 0; border-bottom:1px solid var(--border); }
  .jb-winner-row:last-child { border-bottom:none; }
  .jb-winner-title { font-size:0.82rem; font-weight:700; }
  .jb-winner-meta { font-size:0.7rem; color:var(--muted); }
  .jb-my-vote { font-size:0.82rem; color:var(--text); line-height:1.45; }
  .jb-my-vote strong { font-weight:700; }
  .jb-room-hero-bar--simple { grid-template-columns:1fr 1fr; }
  .jb-room-flip-mount { margin-top:6px; }
  .jb-vote-list { overflow-y:auto; max-height:min(60vh, 560px); }
  .jb-play-btn:disabled, .jb-vote-btn:disabled {
    opacity:0.45; cursor:not-allowed; pointer-events:none;
  }
  @media (max-width:1100px) {
    .jb-dash {
      grid-template-columns:1fr;
      padding:16px 14px 48px;
    }
    .jb-col-left, .jb-col-right {
      position:static;
      width:auto;
      max-width:none;
    }
    /* Genre list above cards — horizontal scroll */
    .jb-col-left {
      order:-1;
    }
    .jb-genre-nav {
      max-height:none;
      flex-direction:row;
      flex-wrap:nowrap;
      gap:6px;
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      padding-bottom:4px;
    }
    .jb-genre-row {
      width:auto;
      flex:none;
      white-space:nowrap;
    }
    .jb-col-right {
      order:2;
    }
    .jb-col-center {
      order:1;
    }
    .jb-live-grid { grid-template-columns:1fr; }
  }
  @media (max-width:700px) {
    .jb-room-hero-bar--simple { grid-template-columns:1fr; }
  }

  /* ── AIRPORT FLIP CLOCK ── */
  .fm-flip-clock {
    display:inline-flex; align-items:center; gap:4px;
    perspective:600px; font-family:var(--font-head);
  }
  .fm-flip-group { display:inline-flex; gap:3px; }
  .fm-flip-sep {
    font-size:1.35rem; font-weight:800; color:var(--muted);
    padding:0 2px; line-height:1; align-self:center;
  }
  .fm-flip-digit {
    position:relative; width:28px; height:40px;
    font-size:1.35rem; font-weight:800; line-height:40px;
    color:var(--text);
  }
  .fm-flip-card {
    position:relative; width:100%; height:100%;
    border-radius:6px; background:var(--card2);
    border:1px solid var(--card-border);
    box-shadow:var(--card-shadow);
    overflow:hidden;
  }
  .fm-flip-top, .fm-flip-bottom,
  .fm-flip-top-flip, .fm-flip-bottom-flip {
    position:absolute; left:0; width:100%; height:50%;
    overflow:hidden; backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .fm-flip-top, .fm-flip-top-flip {
    top:0; border-radius:6px 6px 0 0;
    background:var(--card2);
  }
  .fm-flip-bottom, .fm-flip-bottom-flip {
    bottom:0; border-radius:0 0 6px 6px;
    background:var(--bg2);
  }
  .fm-flip-ink {
    display:block; width:100%; text-align:center;
    color:var(--text);
  }
  .fm-flip-top .fm-flip-ink,
  .fm-flip-top-flip .fm-flip-ink {
    line-height:40px;
  }
  .fm-flip-bottom .fm-flip-ink,
  .fm-flip-bottom-flip .fm-flip-ink {
    line-height:0; margin-top:0;
    transform:translateY(-20px);
  }
  .fm-flip-card::after {
    content:''; position:absolute; left:0; right:0; top:50%;
    height:1px; background:rgba(200,180,255,0.22); z-index:5; pointer-events:none;
  }
  .fm-flip-top-flip, .fm-flip-bottom-flip {
    z-index:4; visibility:hidden;
    transform-style:preserve-3d;
  }
  .fm-flip-top-flip {
    transform-origin:bottom center;
  }
  .fm-flip-bottom-flip {
    transform-origin:top center;
    transform:rotateX(90deg);
  }
  .fm-flip-digit.fm-flip-play .fm-flip-top-flip {
    visibility:visible;
    animation:fmFlipTop 0.5s ease-in forwards;
  }
  .fm-flip-digit.fm-flip-play .fm-flip-bottom-flip {
    visibility:visible;
    animation:fmFlipBottom 0.5s ease-out forwards;
  }
  @keyframes fmFlipTop {
    from { transform:rotateX(0deg); }
    to { transform:rotateX(-90deg); }
  }
  @keyframes fmFlipBottom {
    from { transform:rotateX(90deg); }
    to { transform:rotateX(0deg); }
  }
  .fm-flip-zero .fm-flip-ink { color:var(--muted); }

  /* ── JUKEBOX ROOM ── */
  .jb-room-wrap { max-width:100%; margin:0 auto; padding:0 24px 60px; }
  .jb-room-back { display:inline-flex; align-items:center; gap:6px; margin-bottom:24px; padding:8px 16px; background:transparent; border:1px solid rgba(123,47,255,0.25); color:var(--t2, rgba(200,180,255,0.72)); border-radius:8px; cursor:pointer; font-size:0.82rem; font-family:var(--font-body); transition:all 0.2s; box-shadow: 0 0 0 1px rgba(123,47,255,0.22), 0 2px 14px rgba(80,20,180,0.20);
    box-shadow: 0 0 0 1px rgba(123,47,255,0.20), 0 2px 12px rgba(80,20,180,0.18);
    transition: all 0.2s;
  }
  .jb-room-back:hover { border-color:rgba(200,180,255,0.58); color:var(--text); }

  /* Room header bar */
  .jb-room-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
  .jb-room-title { font-size:1.4rem; font-weight:800; letter-spacing:-0.02em; }
  .jb-room-meta { display:flex; align-items:center; gap:16px; }
  .jb-room-listeners { display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--muted); }
  .jb-room-live-badge { display:flex; align-items:center; gap:5px; font-size:0.62rem; font-weight:800; letter-spacing:0.1em; color:#E91E8C; background:rgba(233,30,140,0.1); border:1px solid rgba(233,30,140,0.2); padding:4px 10px; border-radius:6px; }

  /* Prize + Timer hero bar */
  .jb-room-hero-bar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; background:rgba(255,255,255,0.03); border:1px solid rgba(200,180,255,0.13); border-radius:16px; padding:20px 28px; margin-bottom:24px; }
  .jb-prize-section { display:flex; flex-direction:column; }
  .jb-prize-label { font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(0,230,118,0.6); margin-bottom:4px; }
  .jb-prize-big { font-size:2.2rem; font-weight:800; color:#00E676; font-family:var(--font-head); line-height:1; margin-bottom:8px; }
  .jb-prize-boost-btns { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:10px; }
  .jb-boost-btn { padding:9px 6px; border-radius:9px; border:1px solid rgba(0,230,118,0.2); background:rgba(0,230,118,0.07); color:#00E676; font-size:0.82rem; font-weight:700; cursor:pointer; transition:all 0.2s; font-family:var(--font-body); text-align:center; }
  .jb-boost-btn:hover, .jb-boost-btn.active { background:rgba(0,230,118,0.18); border-color:rgba(0,230,118,0.45); }
  .jb-boost-other { color:var(--t2, rgba(255,255,255,0.6)); border-color:rgba(255,255,255,0.12); background:rgba(200,180,255,0.07); }
  .jb-boost-other:hover, .jb-boost-other.active { background:rgba(255,255,255,0.1); border-color:rgba(200,180,255,0.58); color:var(--t1, #fff); }
  .jb-boost-custom-input { width:100%; padding:9px 12px; background:rgba(200,180,255,0.11); border:1px solid rgba(0,230,118,0.25); border-radius:9px; color:#00E676; font-size:0.88rem; font-weight:600; font-family:var(--font-body); outline:none; margin-bottom:10px; }
  .jb-boost-custom-input:focus { border-color:rgba(0,230,118,0.5); }
  .jb-boost-contribute-btn { width:100%; padding:12px; background:linear-gradient(135deg,#00E676,#009688); color:#000; border:none; border-radius:10px; font-size:0.88rem; font-weight:800; cursor:pointer; font-family:var(--font-body); letter-spacing:0.01em; transition:opacity 0.2s; }
  .jb-boost-contribute-btn:hover { opacity:0.88; }
  .jb-timer-section { text-align:center; }
  .jb-timer-label { font-size:0.6rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
  .jb-timer-big { font-size:2.8rem; font-weight:800; font-family:var(--font-head); letter-spacing:-0.02em; line-height:1; }
  .jb-timer-sub { font-size:0.65rem; color:var(--muted); margin-top:4px; }
  .jb-timer-big.urgent { color:#ff3b3b; animation:cvBlink 0.8s infinite; }
  .jb-tokens-section { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
  .jb-tokens-label { font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(123,47,255,0.7); }
  .jb-tokens-row { display:flex; gap:6px; }
  .jb-token-dot { width:14px; height:14px; border-radius:50%; background:var(--purple); transition:all 0.3s; }
  .jb-token-dot.used { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); }
  .jb-tokens-desc { font-size:0.7rem; color:var(--muted); text-align:right; }
  .jb-propose-btn { padding:8px 16px; background:rgba(123,47,255,0.12); border:1px solid rgba(123,47,255,0.3); color:#9B6FFF; border-radius:8px; font-size:0.75rem; font-weight:700; cursor:pointer; transition:all 0.2s; font-family:var(--font-body); }
  .jb-propose-btn:hover { background:rgba(123,47,255,0.22); }

  /* Room layout */
  .jb-room-layout { display:grid; grid-template-columns:minmax(280px,340px) minmax(0,1fr) minmax(260px,320px); gap:18px; align-items:stretch; }
  @media(max-width:1100px){
    .jb-room-layout { grid-template-columns:1fr; }
  }

  /* Now Playing column */
  .jb-now-col { display:flex; flex-direction:column; gap:14px; min-width:0; }
  .jb-player-card { background:var(--card); border:1px solid var(--card-border); border-radius:18px; padding:24px; display:flex; flex-direction:column; align-items:center; gap:14px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .jb-cover-stack {
    position:relative; width:200px; height:200px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .jb-vinyl {
    position:absolute; right:-10px; top:50%;
    width:170px; height:170px; border-radius:50%;
    background:
      radial-gradient(circle at center, #2a2244 0 14%, transparent 15%),
      repeating-radial-gradient(circle at center, rgba(0,0,0,0.35) 0 2px, rgba(40,30,60,0.9) 2px 4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
    z-index:0;
    transform: translateY(-50%) translateX(0) rotate(0deg);
    transition: transform 0.35s ease;
  }
  .jb-cover-stack:hover .jb-vinyl {
    transform: translateY(-50%) translateX(22px) rotate(18deg);
  }
  .jb-cover-art {
    position:relative; z-index:1;
    width:180px; height:180px; border-radius:14px; overflow:hidden;
    background:linear-gradient(135deg,#1a0030,#3d0066);
    display:flex; align-items:center; justify-content:center;
  }
  .jb-cover-art img { width:100%; height:100%; object-fit:cover; display:block; }
  .jb-cover-neutral {
    width:100%; height:100%;
    background:linear-gradient(145deg, var(--card2), #2a1f45);
  }
  .jb-vote-cover {
    width:48px; height:48px; border-radius:10px; flex-shrink:0; overflow:hidden;
    background:linear-gradient(135deg,#1a0030,#3d0066);
  }
  .jb-vote-cover img { width:100%; height:100%; object-fit:cover; display:block; }
  .jb-vote-cover.jb-cover-neutral { background:linear-gradient(145deg, var(--card2), #2a1f45); }

  .jb-now-info { width:100%; text-align:center; }
  .jb-now-playing-lbl { font-size:0.6rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--pink); margin-bottom:8px; display:flex; align-items:center; justify-content:center; gap:5px; }
  .jb-track-name {
    font-size:1.15rem; font-weight:800; margin-bottom:4px; letter-spacing:-0.01em; color:var(--text);
    max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .jb-track-artist {
    font-size:0.82rem; color:var(--muted); margin-bottom:4px;
    max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .jb-wave {
    width:100%; height:52px; display:flex; align-items:center; justify-content:center; gap:2.5px;
    padding:8px 12px; border-radius:12px; cursor:pointer;
    box-sizing:border-box; overflow:hidden;
    background:#160f28;
  }
  .jb-wave-bar {
    width:1.5px; border-radius:1px; background:rgba(179,166,214,.34); flex-shrink:0;
  }
  .jb-wave-bar.played {
    background:linear-gradient(180deg, #00E39A, #31C8FF);
  }
  .jb-wave-bar.head {
    background:#fff;
    box-shadow:0 0 8px rgba(255,255,255,0.85), 0 0 2px #fff;
    width:2px;
  }
  .jb-player-controls { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
  .jb-ctrl-btn {
    width:52px; height:52px; border-radius:50%; border:1px solid var(--card-border);
    background:var(--card2); color:var(--text); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-body);
  }
  .jb-ctrl-btn:disabled { opacity:0.45; cursor:not-allowed; }
  .jb-ctrl-btn:not(:disabled):hover { border-color:var(--card-border-hover); }
  .jb-play-gate {
    font-size:0.78rem; color:var(--muted); text-align:center; line-height:1.45; width:100%;
  }
  .jb-vol {
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:999px;
    background:var(--jb-surf-hi, #332a52); color:var(--t1, #f4f0ff);
  }
  .jb-vol-range {
    width:88px; height:4px; cursor:pointer; accent-color:#E91E8C;
    background:transparent;
  }
  .jb-vote-item.playing,
  .jb-vote-item.jb-current {
    background:rgba(233,30,140,0.12);
    box-shadow: inset 3px 0 0 #E91E8C, var(--jb-up-sm, none);
    outline:1px solid rgba(233,30,140,0.35);
  }
  .jb-vote-item.playing .jb-vote-track,
  .jb-vote-item.jb-current .jb-vote-track {
    color:var(--t1, #fff);
  }
  .jb-round-ended {
    margin-bottom:16px; padding:14px 16px; border-radius:12px;
    color:var(--text); font-size:0.85rem; line-height:1.45;
  }
  .jb-round-ended-lbl {
    font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--pink); margin-bottom:6px;
  }
  .jb-round-ended-body { color:var(--muted); margin-bottom:10px; }
  .jb-round-winner-lbl {
    font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    color:#B8860B; margin-bottom:4px;
  }
  .jb-round-winner-title {
    font-size:1rem; font-weight:800; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .jb-round-winner-sub { font-size:0.75rem; color:var(--muted); margin-top:2px; }
  .jb-side-col {
    display:flex; flex-direction:column; gap:14px; min-width:0;
    min-height:420px; max-height:calc(100vh - 220px);
  }
  .jb-chat-card {
    background:var(--card); border:1px solid var(--card-border); border-radius:18px; padding:20px;
    display:flex; flex-direction:column; flex:1; min-height:0;
    box-shadow: var(--card-shadow);
  }
  .jb-chat-msgs {
    flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
    margin-bottom:12px; min-height:0; max-height:none;
  }
  .jb-chat-row { flex-shrink:0; display:flex; gap:8px; }
  .jb-tip-note {
    margin:8px 0 0; font-size:0.72rem; color:var(--muted); line-height:1.45; text-align:center;
  }
  .jb-tip-custom {
    width:100%; margin-top:8px; padding:8px 12px; box-sizing:border-box;
    background:var(--card2); border:1px solid rgba(0,230,118,0.3); border-radius:8px;
    color:var(--text); font-size:0.82rem; outline:none; font-family:var(--font-body);
  }
  .jb-donate-card.jb-disabled { opacity:0.55; pointer-events:none; }
  .jb-chat-empty { font-size:0.78rem; color:var(--muted); padding:12px 4px; }
  .jb-activity-row {
    display:flex; flex-direction:column; gap:2px;
    padding:8px 0; border-bottom:1px solid rgba(200,180,255,0.08);
  }
  .jb-activity-row:last-child { border-bottom:none; }
  .jb-activity-text { font-size:0.78rem; color:var(--text); line-height:1.4; }
  .jb-activity-text b { font-weight:700; }
  .jb-activity-time { font-size:0.65rem; color:var(--muted); }

  /* Tactile shadows — jukebox only */
  #now-sub-jukebox .jb-raised {
    box-shadow: var(--jb-up);
    transform: translateY(0);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  #now-sub-jukebox .jb-raised:not(:disabled):hover {
    box-shadow: var(--jb-up-lg);
  }
  #now-sub-jukebox .jb-raised:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: var(--jb-in);
  }
  #now-sub-jukebox .jb-inset {
    background: var(--jb-bg-deep);
    border: none;
    box-shadow: var(--jb-in);
  }
  #now-sub-jukebox .jb-vote-item.jb-raised,
  #now-sub-jukebox .jb-vote-cover.jb-raised {
    box-shadow: var(--jb-up-sm);
  }
  #now-sub-jukebox .jb-page-room .jb-prize-big,
  #now-sub-jukebox .jb-page-room .jb-vote-counts,
  #now-sub-jukebox .jb-page-room .jb-track-name {
    color: var(--t1, #f4f0ff);
  }

  /* Flip clock readability — only inside jukebox */
  #now-sub-jukebox .fm-flip-digit {
    width: 62px;
    height: 76px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 38px;
    font-weight: 700;
    line-height: 76px;
    color: var(--t1, #f4f0ff);
  }
  #now-sub-jukebox .fm-flip-card {
    border-radius: 12px;
    background: #160f28;
    border: none;
    box-shadow: var(--jb-in);
  }
  #now-sub-jukebox .fm-flip-top,
  #now-sub-jukebox .fm-flip-top-flip {
    border-radius: 12px 12px 0 0;
    background: #160f28;
  }
  #now-sub-jukebox .fm-flip-bottom,
  #now-sub-jukebox .fm-flip-bottom-flip {
    border-radius: 0 0 12px 12px;
    background: #160f28;
  }
  #now-sub-jukebox .fm-flip-ink { color: var(--t1, #f4f0ff); }
  #now-sub-jukebox .fm-flip-top .fm-flip-ink,
  #now-sub-jukebox .fm-flip-top-flip .fm-flip-ink {
    line-height: 76px;
  }
  #now-sub-jukebox .fm-flip-bottom .fm-flip-ink,
  #now-sub-jukebox .fm-flip-bottom-flip .fm-flip-ink {
    transform: translateY(-38px);
  }
  #now-sub-jukebox .fm-flip-card::after {
    height: 1px;
    background: rgba(0,0,0,.55);
    box-shadow: 0 1px 0 rgba(255,255,255,.05);
  }
  #now-sub-jukebox .fm-flip-sep {
    font-size: 1.6rem;
    color: var(--t1, #f4f0ff);
  }
  #now-sub-jukebox .fm-flip-zero .fm-flip-ink { color: var(--t2, rgba(244,240,255,0.45)); }

  .jb-now-info { width:100%; text-align:center; }
  .jb-now-playing-lbl { font-size:0.6rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--pink); margin-bottom:8px; display:flex; align-items:center; justify-content:center; gap:5px; }
  .jb-track-name { font-size:1.15rem; font-weight:800; margin-bottom:4px; letter-spacing:-0.01em; }
  .jb-track-artist { font-size:0.82rem; color:var(--muted); margin-bottom:12px; }
  .jb-track-tags { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
  .jb-tag { font-size:0.65rem; padding:3px 10px; border-radius:5px; font-weight:600; }
  .jb-tag.genre { background:rgba(123,47,255,0.15); color:#9B6FFF; }
  .jb-tag.country { background:rgba(0,230,118,0.1); color:#00C876; }
  .jb-tag.listeners { background:rgba(200,180,255,0.11); color:var(--muted); }
  .jb-prog-bar { width:100%; height:3px; background:rgba(200,180,255,0.13); border-radius:2px; overflow:hidden; margin-bottom:5px; }
  .jb-prog-fill { height:100%; background:var(--grad); border-radius:2px; transition:width 1s linear; }
  .jb-prog-times { display:flex; justify-content:space-between; font-size:0.67rem; color:var(--muted); width:100%; }

  /* Track of Day card */
  .jb-tod-card { background:rgba(255,193,7,0.06); border:1px solid rgba(255,193,7,0.2); border-radius:16px; padding:18px 20px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .jb-tod-card-label { font-size:0.6rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#B8860B; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
  .jb-tod-card-track { font-size:0.9rem; font-weight:700; margin-bottom:2px; }
  .jb-tod-card-sub { font-size:0.72rem; color:var(--muted); margin-bottom:12px; }
  .jb-tod-card-votes { font-size:0.78rem; color:var(--text); margin-bottom:12px; }
  .jb-tod-card-btn { width:100%; padding:9px; background:rgba(255,193,7,0.1); border:1px solid rgba(255,193,7,0.25); color:#B8860B; border-radius:8px; font-size:0.78rem; font-weight:700; cursor:pointer; font-family:var(--font-body); }

  /* Voting column */
  .jb-vote-col { display:flex; flex-direction:column; gap:14px; min-width:0; }
  .jb-vote-card { background:var(--card); border:1px solid var(--card-border); border-radius:18px; padding:22px; flex:1;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .jb-vote-col-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; gap:10px; flex-wrap:wrap; }
  .jb-vote-col-title { font-size:1rem; font-weight:800; color:var(--text); }
  .jb-vote-col-sub { font-size:0.72rem; color:var(--muted); }

  .jb-vote-item { display:flex; align-items:center; gap:12px; padding:13px 8px; border-bottom:1px solid rgba(200,180,255,0.07); cursor:pointer; border-radius:8px; transition:background 0.15s; }
  .jb-vote-item:last-child { border-bottom:none; }
  .jb-vote-item:hover { background:rgba(255,255,255,0.03); }
  .jb-vote-item.voted { background:rgba(123,47,255,0.05); }
  .jb-vote-item.playing,
  .jb-vote-item.jb-current {
    background:rgba(233,30,140,0.12);
    box-shadow: inset 3px 0 0 #E91E8C;
    outline:1px solid rgba(233,30,140,0.35);
  }
  .jb-vote-info { flex:1; min-width:0; }
  .jb-vote-track { font-size:0.88rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; color:var(--text); }
  .jb-vote-meta { font-size:0.68rem; color:var(--muted); }
  .jb-play-btn { width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,0.12); background:rgba(200,180,255,0.11); color:var(--t2, rgba(255,255,255,0.6)); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; flex-shrink:0; }
  .jb-play-btn:hover { background:rgba(255,255,255,0.14); border-color:rgba(200,180,255,0.58); color:var(--t1, #fff); }
  .jb-vote-btn { min-width:52px; height:30px; padding:0 10px; border-radius:16px; border:1px solid rgba(123,47,255,0.3); background:rgba(123,47,255,0.08); color:#9B6FFF; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; flex-shrink:0; font-size:0.68rem; font-weight:700; font-family:var(--font-body); }
  .jb-vote-btn:hover { background:rgba(123,47,255,0.2); border-color:rgba(123,47,255,0.5); }
  .jb-vote-btn.voted { background:var(--grad); border-color:transparent; color:var(--t1, #fff); }
  .jb-vote-btn:disabled { opacity:0.5; cursor:not-allowed; }
  @keyframes jbVotePop { 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
  .jb-vote-pop { animation:jbVotePop 0.3s ease; }

  .jb-vote-winner-banner { display:none; align-items:center; gap:14px; padding:16px 20px; background:linear-gradient(135deg,rgba(255,215,0,0.1),rgba(123,47,255,0.1)); border:1px solid rgba(255,215,0,0.2); border-radius:14px; margin-top:16px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .jb-vote-winner-banner.show { display:flex; }
  .jb-vote-winner-label { font-size:0.6rem; font-weight:700; color:#B8860B; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:3px; }
  .jb-vote-winner-track { font-size:1rem; font-weight:800; }
  .jb-vote-winner-sub { font-size:0.72rem; color:var(--muted); margin-top:2px; }

  /* Chat + Donate column */
  .jb-side-col {
    display:flex; flex-direction:column; gap:14px; min-width:0;
    min-height:420px; max-height:calc(100vh - 220px);
  }
  .jb-chat-card {
    background:var(--card); border:1px solid var(--card-border); border-radius:18px; padding:20px;
    display:flex; flex-direction:column; flex:1; min-height:0;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .jb-chat-head { font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:6px; color:var(--text); }
  .jb-chat-msgs {
    flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
    margin-bottom:12px; min-height:0;
  }
  .jb-chat-msg { font-size:0.78rem; line-height:1.45; color:var(--text); }
  .jb-chat-msg .jbn { font-weight:600; color:var(--purple); margin-right:5px; }
  .jb-chat-msg .jb-tip-badge { font-size:0.62rem; background:rgba(0,230,118,0.1); border:1px solid rgba(0,230,118,0.2); color:#00E676; padding:1px 6px; border-radius:16px; margin-left:4px; }
  .jb-chat-row { flex-shrink:0; display:flex; gap:8px; }
  .jb-chat-row input { flex:1; background:rgba(200,180,255,0.09); border:1px solid var(--border); border-radius:8px; padding:9px 12px; color:var(--text); font-size:0.82rem; outline:none; font-family:var(--font-body); }
  .jb-chat-row input:focus { border-color:rgba(123,47,255,0.4); }
  .jb-chat-row input:disabled { opacity:0.55; }
  .jb-chat-row button { padding:9px 16px; background:var(--grad); border:none; border-radius:8px; color:var(--t1, #fff); font-size:0.82rem; font-weight:600; cursor:pointer; font-family:var(--font-body); }

  .jb-donate-card { background:var(--card); border:1px solid rgba(0,230,118,0.15); border-radius:18px; padding:20px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .jb-donate-head { font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#00E676; margin-bottom:6px; }
  .jb-donate-desc { font-size:0.72rem; color:var(--muted); margin-bottom:14px; line-height:1.5; }
  .jb-donate-amounts { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:10px; }
  .jb-donate-amt { padding:8px 4px; background:var(--card2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:0.82rem; font-weight:700; text-align:center; cursor:pointer; transition:all 0.2s; font-family:var(--font-body); }
  .jb-donate-amt:hover, .jb-donate-amt.active { border-color:rgba(0,230,118,0.4); background:rgba(0,230,118,0.08); color:#00E676; }
  .jb-donate-btn { width:100%; padding:10px; background:linear-gradient(135deg,#00E676,#009688); color:#000; border:none; border-radius:8px; font-size:0.82rem; font-weight:800; cursor:pointer; font-family:var(--font-body); }
  .jb-donate-btn:disabled { opacity:0.5; cursor:not-allowed; }


/* ================================================================
   SECTION BREAK
   ================================================================ */


  /* ── LIVE ROOM BROWSE ── */
  .lr-wrap { max-width:var(--width-page); margin:0 auto; padding:48px 24px; }
  .lr-hero { text-align:center; margin-bottom:40px; }
  .lr-hero h1 { font-size:1.8rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:8px; }
  .lr-hero h1 span { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  .lr-hero p { color:var(--muted); font-size:0.9rem; max-width:480px; margin:0 auto; }

  .lr-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; align-items:center; }
  .lr-filter-input { flex:1; min-width:200px; background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:9px 14px; color:var(--text); font-size:0.85rem; outline:none; font-family:var(--font-body); }
  .lr-filter-select { background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:9px 14px; color:var(--text); font-size:0.85rem; outline:none; font-family:var(--font-body); cursor:pointer; }
  .lr-filter-tag { padding:6px 14px; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:0.78rem; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
  .lr-filter-tag.active, .lr-filter-tag:hover { border-color:var(--pink); color:var(--pink); background:rgba(233,30,140,0.07); }

  .lr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:18px; }
  .lr-card {
    background:var(--card); border:1px solid var(--card-border); border-radius:16px;
    overflow:hidden; cursor:pointer; transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  }
  .lr-card:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(123,47,255,0.15); border-color:rgba(233,30,140,0.3); }
  .lr-card-banner {
    height:110px; position:relative; display:flex; align-items:center; justify-content:center;
    font-size:3rem; overflow:hidden;
  }
  .lr-card-live-badge {
    position:absolute; top:10px; left:10px;
    background:rgba(255,59,59,0.9); color:var(--t1, #fff); font-size:0.6rem; font-weight:800;
    padding:3px 8px; border-radius:16px; letter-spacing:0.1em;
    display:flex; align-items:center; gap:4px;
  }
  .lr-card-live-dot { width:5px; height:5px; border-radius:50%; background:#fff; animation:cvBlink 1s infinite; }
  .lr-card-viewers { position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.6); color:var(--t1, #fff); font-size:0.7rem; font-weight:600; padding:3px 8px; border-radius:16px; display:flex; align-items:center; gap:4px; }
  .lr-card-type { position:absolute; bottom:10px; left:10px; background:rgba(0,0,0,0.6); color:var(--t2, rgba(255,255,255,0.6)); font-size:0.62rem; padding:2px 8px; border-radius:16px; letter-spacing:0.06em; }
  .lr-card-body { padding:16px; }
  .lr-card-artist { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .lr-card-av { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.82rem; color:var(--t1, #fff); flex-shrink:0; }
  .lr-card-name { font-weight:700; font-size:0.95rem; }
  .lr-card-sub { font-size:0.72rem; color:var(--muted); margin-top:1px; }
  .lr-card-desc { font-size:0.78rem; color:var(--muted); line-height:1.5; margin-bottom:12px; }
  .lr-card-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
  .lr-card-tag { padding:2px 8px; border-radius:16px; font-size:0.65rem; border:1px solid rgba(255,255,255,0.08); color:var(--t3, rgba(255,255,255,0.4)); }
  .lr-card-footer { display:flex; align-items:center; justify-content:space-between; }
  .lr-card-stats { font-size:0.72rem; color:var(--muted); display:flex; gap:12px; }
  .lr-card-stat strong { color:var(--text); }

  /* ── ROOM VIEW ── */
  .lr-room-wrap { display:none; max-width:var(--width-page); margin:0 auto; padding:48px 24px; }
  .lr-room-wrap.open { display:block; }
  .lr-browse-wrap { display:block; }
  .lr-browse-wrap.hidden { display:none; }

  .lr-room-back { display:flex; align-items:center; gap:6px; margin-bottom:20px; padding:8px 16px; background:transparent; border:1px solid rgba(123,47,255,0.25); color:var(--t2, rgba(200,180,255,0.72)); border-radius:8px; cursor:pointer; font-size:0.82rem; font-family:var(--font-body);
    box-shadow: 0 0 0 1px rgba(123,47,255,0.20), 0 2px 12px rgba(80,20,180,0.18);
    transition: all 0.2s;
  }
  .lr-room-back:hover { border-color:rgba(200,180,255,0.52); color:var(--text); }

  .lr-room-layout { display:grid; grid-template-columns:1fr 320px; gap:20px; }

  /* video area */
  .lr-video-area { display:flex; flex-direction:column; gap:16px; }
  .lr-video-grid { display:flex; gap:10px; align-items:stretch; background:rgba(0,0,0,0.35); border:1px solid rgba(123,47,255,0.28); border-radius:14px; padding:14px; min-height:260px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .lr-vid-main { flex:1; display:flex; flex-direction:column; border-radius:10px; overflow:hidden; border:2px solid rgba(233,30,140,0.4); box-shadow:0 0 24px rgba(233,30,140,0.12); position:relative; }
  .lr-vid-feed { flex:1; min-height:200px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; position:relative; overflow:hidden; }
  .lr-vid-av { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.8rem; color:var(--t1, #fff); box-shadow:0 0 30px rgba(123,47,255,0.4); z-index:1; }
  .lr-vid-name-bar { display:flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(0,0,0,0.65); border-top:1px solid rgba(200,180,255,0.11); }
  .lr-vid-name { font-weight:700; font-size:0.92rem; flex:1; }
  .lr-vid-role { font-size:0.68rem; color:var(--pink); }
  .lr-vid-host-badge { position:absolute; top:10px; left:10px; z-index:3; background:var(--grad); color:var(--t1, #fff); font-size:0.58rem; font-weight:800; padding:3px 8px; border-radius:16px; letter-spacing:0.1em; display:flex; align-items:center; gap:4px; }
  .lr-vid-live { position:absolute; top:10px; right:10px; z-index:3; background:rgba(0,0,0,0.7); color:#ff3b3b; font-size:0.6rem; font-weight:700; padding:3px 8px; border-radius:16px; display:flex; align-items:center; gap:4px; }
  .lr-vid-glow { position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(123,47,255,0.1), transparent); pointer-events:none; }

  .lr-vid-side { display:flex; flex-direction:column; gap:10px; flex:0 0 150px; }
  .lr-vid-sm { flex:1; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; min-height:0; }
  .lr-vid-sm-feed { flex:1; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .lr-vid-sm-av { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem; color:var(--t1, #fff); z-index:1; }
  .lr-vid-sm-bar { display:flex; align-items:center; gap:6px; padding:6px 8px; background:rgba(0,0,0,0.6); border-top:1px solid rgba(200,180,255,0.09); }
  .lr-vid-sm-name { font-size:0.7rem; font-weight:600; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lr-vid-sm-role { font-size:0.58rem; color:var(--muted); }
  .lr-timer-badge { position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,0.75); color:var(--t2, #FFD700); font-size:0.62rem; font-weight:700; padding:2px 6px; border-radius:16px; z-index:2; }

  /* now playing */
  .lr-now-playing { background:var(--card); border:1px solid var(--card-border); border-radius:12px; padding:16px; display:flex; align-items:center; gap:14px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .lr-np-art { width:52px; height:52px; border-radius:8px; background:linear-gradient(135deg,#1a0030,#3d0066); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
  .lr-np-info { flex:1; }
  .lr-np-track { font-weight:700; font-size:0.9rem; margin-bottom:2px; }
  .lr-np-artist { font-size:0.75rem; color:var(--muted); }
  .lr-np-label { font-size:0.62rem; color:var(--pink); text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; font-weight:700; }
  .lr-np-bar { margin-top:10px; height:3px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden; }
  .lr-np-progress { height:100%; width:35%; background:var(--grad); border-radius:2px; animation:lrProgress 90s linear infinite; }
  @keyframes lrProgress { from{width:35%} to{width:100%} }

  /* fan queue */
  .lr-queue { background:var(--card); border:1px solid var(--card-border); border-radius:12px; padding:16px; margin-top:16px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .lr-queue-head { font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
  .lr-queue-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(200,180,255,0.07); }
  .lr-queue-item:last-child { border-bottom:none; }
  .lr-queue-av { width:30px; height:30px; border-radius:50%; background:rgba(200,180,255,0.11); display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; color:var(--muted); flex-shrink:0; }
  .lr-queue-name { font-size:0.8rem; flex:1; }
  .lr-queue-wait { font-size:0.68rem; color:var(--muted); }
  .lr-raise-hand { width:100%; margin-top:12px; padding:9px; background:var(--grad); color:var(--t1, #fff); border:none; border-radius:8px; font-size:0.82rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }

  /* right sidebar */
  .lr-sidebar { display:flex; flex-direction:column; gap:16px; }
  .lr-chat-box { background:var(--card); border:1px solid var(--card-border); border-radius:12px; padding:16px; display:flex; flex-direction:column; flex:1; min-height:340px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .lr-chat-head { font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
  .lr-chat-msgs { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:12px; max-height:240px; }
  .lr-chat-msg { font-size:0.78rem; line-height:1.4; }
  .lr-chat-msg .lr-chat-user { font-weight:700; color:var(--pink); margin-right:6px; }
  .lr-chat-msg .lr-chat-tip { font-size:0.65rem; background:rgba(0,230,118,0.1); border:1px solid rgba(0,230,118,0.2); color:#00E676; padding:1px 6px; border-radius:16px; margin-left:4px; }
  .lr-chat-input { display:flex; gap:8px; }
  .lr-chat-input input { flex:1; background:var(--card2); border:1px solid var(--border); border-radius:8px; padding:8px 12px; color:var(--text); font-size:0.82rem; outline:none; font-family:var(--font-body); }
  .lr-chat-input button { padding:8px 14px; background:var(--grad); color:var(--t1, #fff); border:none; border-radius:8px; font-size:0.78rem; font-weight:600; cursor:pointer; }

  .lr-donate-box { background:var(--card); border:1px solid rgba(0,230,118,0.15); border-radius:12px; padding:16px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .lr-donate-head { font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#00E676; margin-bottom:12px; }
  .lr-donate-amounts { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px; }
  .lr-donate-amt { padding:7px; background:var(--card2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:0.8rem; font-weight:600; text-align:center; cursor:pointer; transition:all 0.2s; }
  .lr-donate-amt:hover, .lr-donate-amt.active { border-color:rgba(0,230,118,0.4); background:rgba(0,230,118,0.08); color:#00E676; }
  .lr-donate-btn { width:100%; padding:9px; background:linear-gradient(135deg,#00E676,#009688); color:#000; border:none; border-radius:8px; font-size:0.82rem; font-weight:800; cursor:pointer; }

  .lr-guest-box { background:var(--card); border:1px solid rgba(123,47,255,0.2); border-radius:12px; padding:16px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .lr-guest-head { font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#9B6FFF; margin-bottom:10px; }
  .lr-guest-item { display:flex; align-items:center; gap:10px; }
  .lr-guest-av { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.82rem; color:var(--t1, #fff); }
  .lr-guest-info { flex:1; }
  .lr-guest-name { font-size:0.85rem; font-weight:700; }
  .lr-guest-role { font-size:0.68rem; color:#9B6FFF; }


/* ================================================================
   SECTION BREAK
   ================================================================ */


  /* ── GEAR STORE ── */
  .gs-wrap { max-width:var(--width-page); margin:0 auto; padding:48px 24px 80px; }
  .gs-hero { margin-bottom:36px; }
  .gs-hero h1 { font-size:2rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:8px; }
  .gs-hero h1 span { color:var(--t2, #C8A97E); }
  .gs-hero p { color:var(--muted); font-size:0.88rem; }

  /* Filters */
  .gs-filters { background:rgba(255,255,255,0.025); border:1px solid rgba(123,47,255,0.28); border-radius:12px; padding:18px; margin-bottom:20px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .gs-search-row { display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
  .gs-search-box { flex:1; min-width:180px; display:flex; align-items:center; gap:10px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:0 14px; }
  .gs-search-box input { flex:1; padding:10px 0; background:transparent; border:none; color:var(--t1, #fff); font-size:0.88rem; outline:none; }
  .gs-search-btn { padding:10px 20px; background:#f0f0f5; border:none; color:#0d0818; border-radius:8px; font-size:0.82rem; font-weight:700; cursor:pointer; }
  .gs-select-row { display:flex; gap:8px; flex-wrap:wrap; }
  .gs-select { font-size: 0.84rem; }
  .gs-pills { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:18px; }
  .gs-pill { padding:6px 14px; border-radius:20px; border:1px solid rgba(255,255,255,0.1); background:rgba(200,180,255,0.07); color:var(--t2, rgba(200,180,255,0.72)); font-size:0.75rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:all 0.2s; flex-shrink:0; }
  .gs-pill:hover, .gs-pill.active { background:rgba(200,169,126,0.15); border-color:rgba(200,169,126,0.4); color:var(--t2, #C8A97E); }

  /* Store count */
  .gs-count { font-size:0.8rem; color:var(--muted); margin-bottom:16px; }
  .gs-count span { color:var(--t2, rgba(255,255,255,0.7)); font-weight:500; }

  /* Store grid */
  .gs-store-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
  @media(max-width:600px){ .gs-store-grid { grid-template-columns:1fr; } }

  /* Store card */
  .gs-store-card { background:var(--card); border:1px solid var(--card-border); border-radius:16px; overflow:hidden; cursor:pointer; transition:border-color 0.2s, transform 0.2s;
    box-shadow: var(--card-shadow);
  }
  .gs-store-card:hover { border-color:rgba(200,169,126,0.35); transform:translateY(-2px); }
  .gs-store-cover { height:140px; position:relative; display:flex; align-items:center; justify-content:center; font-size:3.5rem; overflow:hidden; }
  .gs-store-cover-badge { position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.12); border-radius:6px; padding:3px 9px; font-size:0.62rem; font-weight:700; color:var(--t2, rgba(255,255,255,0.7)); letter-spacing:0.08em; text-transform:uppercase; }
  .gs-store-cover-verified { position:absolute; top:10px; left:10px; background:rgba(0,230,118,0.15); border:1px solid rgba(0,230,118,0.3); border-radius:6px; padding:3px 9px; font-size:0.62rem; font-weight:700; color:#00E676; letter-spacing:0.06em; }
  .gs-store-body { padding:16px; }
  .gs-store-name { font-size:1rem; font-weight:800; margin-bottom:3px; }
  .gs-store-loc { font-size:0.72rem; color:var(--muted); margin-bottom:10px; }
  .gs-store-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
  .gs-store-tag { background:rgba(200,180,255,0.09); color:var(--t3, rgba(255,255,255,0.4)); padding:3px 9px; border-radius:5px; font-size:0.65rem; font-weight:600; }
  .gs-store-footer { display:flex; align-items:center; justify-content:space-between; }
  .gs-store-rating { font-size:0.78rem; color:var(--t2, rgba(200,180,255,0.72)); }
  .gs-store-rating strong { color:var(--t2, #C8A97E); font-size:0.9rem; }
  .gs-store-items { font-size:0.72rem; color:var(--muted); }
  .gs-store-enter { padding:7px 14px; background:rgba(200,169,126,0.12); border:1px solid rgba(200,169,126,0.25); color:var(--t2, #C8A97E); border-radius:8px; font-size:0.75rem; font-weight:700; cursor:pointer; transition:all 0.2s; }
  .gs-store-enter:hover { background:rgba(200,169,126,0.22); }

  /* ── STORE PROFILE PAGE ── */
  .gs-profile { display:none; position:fixed; inset:0; top:var(--cs-chrome-top, var(--fx-nav-chrome, 60px)); background:transparent; z-index:50; overflow-y:auto; }
  .gs-profile.open { display:block; animation:fadeIn 0.25s ease both; }
  .gs-profile-wrap { max-width:var(--width-page); margin:0 auto; padding:48px 20px 100px; }
  .gs-profile-back { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:rgba(200,180,255,0.09); border:1px solid rgba(123,47,255,0.25); color:var(--muted); border-radius:10px; cursor:pointer; font-size:0.85rem; margin-bottom:24px; transition:all 0.2s; font-family:var(--font-body); box-shadow: 0 0 0 1px rgba(123,47,255,0.22), 0 2px 14px rgba(80,20,180,0.20);
    box-shadow: 0 0 0 1px rgba(123,47,255,0.20), 0 2px 12px rgba(80,20,180,0.18);
    transition: all 0.2s;
  }
  .gs-profile-back:hover { background:rgba(255,255,255,0.09); color:var(--text); }

  /* Hero banner */
  .gs-profile-hero { border-radius:18px; overflow:hidden; margin-bottom:24px; position:relative; min-height:200px; display:flex; align-items:flex-end; }
  .gs-profile-hero-bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:6rem; }
  .gs-profile-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.2)); }
  .gs-profile-hero-info { position:relative; z-index:1; padding:24px; width:100%; }
  .gs-profile-hero-name { font-size:1.8rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:4px; }
  .gs-profile-hero-sub { font-size:0.85rem; color:var(--t2, rgba(255,255,255,0.6)); margin-bottom:12px; }
  .gs-profile-hero-badges { display:flex; gap:8px; flex-wrap:wrap; }
  .gs-profile-badge { padding:4px 12px; border-radius:6px; font-size:0.65rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
  .gs-profile-badge.verified { background:rgba(0,230,118,0.15); border:1px solid rgba(0,230,118,0.3); color:#00E676; }
  .gs-profile-badge.cat { background:rgba(200,169,126,0.12); border:1px solid rgba(200,169,126,0.25); color:var(--t2, #C8A97E); }
  .gs-profile-badge.country { background:rgba(200,180,255,0.11); border:1px solid rgba(255,255,255,0.12); color:var(--t2, rgba(255,255,255,0.6)); }

  /* Contact bar */
  .gs-profile-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
  .gs-action-btn { flex:1; min-width:140px; padding:12px 16px; border-radius:10px; font-size:0.82rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all 0.2s; font-family:var(--font-body); border:none; }
  .gs-action-primary { background:linear-gradient(135deg,#C8A97E,#a07850); color:#000; }
  .gs-action-primary:hover { opacity:0.88; }
  .gs-action-secondary { background:rgba(200,180,255,0.11); border:1px solid rgba(255,255,255,0.12) !important; color:var(--t2, rgba(220,210,255,0.88)); }
  .gs-action-secondary:hover { background:rgba(255,255,255,0.1); }
  .gs-action-call { background:rgba(0,230,118,0.1); border:1px solid rgba(0,230,118,0.25) !important; color:#00E676; }
  .gs-action-call:hover { background:rgba(0,230,118,0.18); }

  /* About */
  .gs-profile-about { background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:20px; margin-bottom:20px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .gs-profile-section-title { font-size:0.65rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
  .gs-profile-desc { font-size:0.88rem; color:var(--t2, rgba(255,255,255,0.7)); line-height:1.65; }
  .gs-profile-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(200,180,255,0.09); border-radius:12px; overflow:hidden; margin-top:16px; }
  .gs-profile-stat { padding:14px 10px; text-align:center; background:var(--card); }
  .gs-profile-stat strong { display:block; font-size:1.1rem; font-weight:800; color:var(--t2, #C8A97E); }
  .gs-profile-stat span { font-size:0.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }

  /* Photo gallery */
  .gs-gallery { margin-bottom:20px; }
  .gs-gallery-title { font-size:0.65rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
  .gs-gallery-grid { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:120px 120px; gap:8px; border-radius:14px; overflow:hidden; }
  @media(max-width:500px){ .gs-gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:100px 100px 100px; } }
  .gs-gallery-item { background:var(--card2); display:flex; align-items:center; justify-content:center; font-size:2.5rem; position:relative; overflow:hidden; cursor:pointer; transition:filter 0.2s; }
  .gs-gallery-item:hover { filter:brightness(1.15); }
  .gs-gallery-item.main { grid-row:1/3; font-size:4rem; }
  .gs-gallery-item.video::after {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    background-color: rgba(0, 0, 0, 0.65);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.5);
  }
  .gs-gallery-more { position:absolute; inset:0; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:800; color:var(--t1, #fff); }

  /* Product listing */
  .gs-products { margin-bottom:20px; }
  .gs-products-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .gs-products-title { font-size:0.65rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
  .gs-products-filter { display:flex; gap:6px; }
  .gs-pf-btn { padding:5px 12px; border-radius:6px; border:1px solid rgba(255,255,255,0.1); background:transparent; color:var(--t3, rgba(255,255,255,0.4)); font-size:0.72rem; cursor:pointer; transition:all 0.2s; }
  .gs-pf-btn.active { border-color:rgba(200,169,126,0.4); color:var(--t2, #C8A97E); background:rgba(200,169,126,0.08); }
  .gs-product-list { display:flex; flex-direction:column; gap:10px; }
  .gs-product-item { background:var(--card); border:1px solid var(--card-border); border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:14px; transition:border-color 0.2s;
    box-shadow: var(--card-shadow);
  }
  .gs-product-item:hover { border-color:rgba(200,169,126,0.25); }
  .gs-product-icon { width:48px; height:48px; border-radius:10px; background:var(--card2); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
  .gs-product-info { flex:1; min-width:0; }
  .gs-product-cat { font-size:0.6rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
  .gs-product-name { font-size:0.88rem; font-weight:700; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .gs-product-meta { font-size:0.7rem; color:var(--muted); }
  .gs-product-right { text-align:right; flex-shrink:0; }
  .gs-product-price { font-size:1rem; font-weight:800; color:var(--t2, #C8A97E); margin-bottom:5px; }
  .gs-product-cta { padding:6px 12px; background:rgba(200,169,126,0.1); border:1px solid rgba(200,169,126,0.2); color:var(--t2, #C8A97E); border-radius:7px; font-size:0.7rem; font-weight:700; cursor:pointer; white-space:nowrap; transition:all 0.2s; font-family:var(--font-body); }
  .gs-product-cta:hover { background:rgba(200,169,126,0.2); }
  .gs-product-cta.call { background:rgba(0,230,118,0.08); border-color:rgba(0,230,118,0.2); color:#00E676; }
  .gs-product-cta.call:hover { background:rgba(0,230,118,0.16); }

  /* Reviews */
  .gs-reviews { background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:20px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  .gs-review-item { padding:14px 0; border-bottom:1px solid rgba(200,180,255,0.09); }
  .gs-review-item:last-child { border-bottom:none; padding-bottom:0; }
  .gs-review-head { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
  .gs-review-av { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:700; color:var(--t1, #fff); flex-shrink:0; }
  .gs-review-name { font-size:0.82rem; font-weight:600; flex:1; }
  .gs-review-stars { font-size:0.72rem; color:var(--t2, #C8A97E); }
  .gs-review-text { font-size:0.78rem; color:var(--t2, rgba(200,180,255,0.75)); line-height:1.5; }


/* ═══════════════════════════════════════════════════════════════
   SUPABASE AUTH — AVATAR · DROPDOWN · AUTH TABS · LOCKED MODAL
   ═══════════════════════════════════════════════════════════════ */

.nav-auth-area {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--fx-nav-notif-gap, 18px);
  flex-shrink: 0;
}
#navAvatarWrap { align-items:center; }

.fm-avatar-btn {
  width: var(--fx-nav-avatar, 34px);
  height: var(--fx-nav-avatar, 34px);
  border-radius:50%;
  background:linear-gradient(135deg,#E91E8C,#7B2FFF);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-size:0.85rem; font-weight:700; color:var(--t1, #fff);
  transition:opacity 0.18s, box-shadow 0.18s; flex-shrink:0;
}
.fm-avatar-btn:hover { opacity:0.88; box-shadow:0 0 0 2px rgba(123,47,255,0.45); }
#navAvatarInitials { pointer-events:none; line-height:1; }

.fm-avatar-dropdown {
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  min-width:164px; background:#1a1428;
  border:1px solid rgba(123,47,255,0.3); border-radius:12px; padding:6px;
  z-index:99998;
  box-shadow:0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(123,47,255,0.14);
}
.fm-avatar-dropdown.open { display:block; }

.fm-avatar-dd-item {
  display:block; width:100%; padding:9px 13px;
  border:none; background:none; color:var(--text);
  font-family:var(--font-body); font-size:0.83rem; font-weight:500;
  text-align:left; cursor:pointer; border-radius:8px; transition:background 0.15s;
}
.fm-avatar-dd-item:hover { background:rgba(123,47,255,0.12); }
.fm-avatar-dd-sep { height:1px; background:rgba(200,180,255,0.1); margin:4px 0; }
.fm-avatar-dd-logout { color:#E91E8C; }
.fm-avatar-dd-logout:hover { background:rgba(233,30,140,0.1); }

.fm-auth-tabs {
  display:flex;
  border-bottom:1px solid rgba(200,180,255,0.13);
  margin-bottom:20px;
}
.fm-auth-tab {
  flex:1; padding:9px 0; border:none; background:none;
  color:var(--muted); font-family:var(--font-body);
  font-size:0.88rem; font-weight:600; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color 0.18s, border-color 0.18s;
}
.fm-auth-tab.active { color:var(--text); border-bottom-color:#7B2FFF; }

#lockedOverlay {
  display:none; position:fixed; top:0; left:0;
  width:100vw; height:100vh; background:rgba(0,0,0,0.92);
  z-index:99999; overflow-y:auto;
}
#lockedOverlay.show { display:block; }


/* ═══════════════════════════════════════════════════════════════════════════
   FORTIS — PROFILE SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── PUBLIC PROFILE ────────────────────────────────────────────────────────── */
.fm-pub-header {
  display:flex; align-items:flex-start; gap:18px;
  background:rgba(255,255,255,0.025); border:1px solid var(--border);
  border-radius:16px; padding:20px; margin-bottom:20px;
}
.fm-pub-avatar {
  width:80px; height:80px; border-radius:50%; flex-shrink:0;
  background:rgba(123,47,255,0.18); border:2px solid rgba(123,47,255,0.3);
}
.fm-pub-avatar-letter {
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; font-weight:700; color:#A06EFF;
}
.fm-pub-name-block { display:flex; flex-direction:column; gap:4px; }
.fm-pub-name   { font-size:1.4rem; font-weight:800; font-family:var(--font-head); }
.fm-pub-role-badge {
  display:inline-block; padding:2px 10px; border-radius:20px;
  background:rgba(123,47,255,0.15); border:1px solid rgba(123,47,255,0.3);
  color:#A06EFF; font-size:0.72rem; font-weight:700; letter-spacing:0.05em; width:fit-content;
}
.fm-pub-location { display:flex; align-items:center; gap:4px; font-size:0.82rem; color:var(--muted); }
.fm-pub-bio { font-size:0.88rem; color:var(--t2, rgba(200,180,255,0.75)); line-height:1.65; margin-bottom:18px; }
.fm-pub-section-label { font-size:0.68rem; font-weight:700; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; margin:16px 0 8px; }
.fm-pub-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.fm-pub-chip { padding:5px 12px; border-radius:20px; border:1px solid rgba(123,47,255,0.25); background:rgba(123,47,255,0.08); color:#A06EFF; font-size:0.76rem; }
.fm-pub-detail { font-size:0.84rem; color:var(--text); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.fm-pub-text-block { font-size:0.84rem; color:var(--t2, rgba(200,180,255,0.7)); line-height:1.65; background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.fm-pub-contact { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.fm-pub-contact-btn { max-width:260px !important; }
.fm-pub-contact-link { font-size:0.84rem; color:var(--text); text-decoration:none; display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,0.025); transition:border-color 0.18s; }
.fm-pub-contact-link:hover { border-color:rgba(123,47,255,0.4); }
.fm-pub-socials { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.fm-pub-social-btn { padding:7px 16px; border-radius:20px; border:1px solid var(--border); background:rgba(255,255,255,0.025); color:var(--text); font-size:0.78rem; font-weight:600; text-decoration:none; transition:all 0.18s; }
.fm-pub-social-btn:hover { border-color:rgba(123,47,255,0.4); background:rgba(123,47,255,0.08); }
.fm-pub-url { font-size:0.72rem; color:var(--muted); text-align:center; margin-top:20px; padding-top:16px; border-top:1px solid rgba(200,180,255,0.08); }

/* ── CHAT EMOJI PICKER ───────────────────────────────────────────────────── */
.fm-chat-compose-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 8px;
  flex: 1;
  min-width: 0;
}
.fm-chat-compose-input-wrap textarea,
.fm-chat-compose-input-wrap input {
  flex: 1;
  width: auto !important;
  min-width: 0;
}
.cs-input .fm-chat-compose-input-wrap {
  margin-bottom: 0;
}
.fm-chat-emoji-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: 'Epilogue', sans-serif;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.fm-chat-emoji-btn:hover,
.fm-chat-emoji-btn.fm-chat-emoji-btn--active {
  border-color: var(--card-border-hover);
  color: var(--text);
  background: var(--card);
}
#fmEmojiPickerRoot {
  position: fixed;
  z-index: 14000;
  display: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--card-shadow-hover);
  border: 1px solid var(--card-border);
  background: var(--card);
  pointer-events: auto;
  box-sizing: border-box;
}
#fmEmojiPickerRoot.fm-open {
  display: block;
}
.fm-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.fm-emoji-cell {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Epilogue', sans-serif;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.fm-emoji-cell:hover,
.fm-emoji-cell:focus-visible {
  background: rgba(123, 47, 255, 0.16);
  border-color: var(--card-border);
  outline: none;
}
.fm-chat-compose-zone {
  position: relative;
  z-index: 1;
}
@media (max-width: 480px) {
  .fm-emoji-grid {
    grid-template-columns: repeat(7, 1fr);
  }
  .fm-emoji-cell {
    font-size: 1.15rem;
    padding: 5px 0;
  }
}

/* ── MOBILE FIXES — 480px ── */
@media(max-width:480px) {
  /* Chat panel: full-width bottom sheet */
  #artistChatPanel { bottom:0 !important; left:0 !important; right:0 !important; width:100% !important; border-radius:16px 16px 0 0 !important; }
  #chatMsgInput { max-height:25vh; }
  /* Profile card: fill grid cell */
  .fm-artists-scroll > div, .fm-artists-scroll > a { width:auto !important; }
}

/* ── ADMIN DASHBOARD ───────────────────────────────────────────────────────── */
.admin-dashboard {
  min-height: 100vh;
  padding: 20px 20px 48px;
  background: radial-gradient(1200px 600px at 12% -10%, rgba(255, 107, 107, 0.12), transparent 55%),
    radial-gradient(900px 500px at 88% 0%, rgba(123, 47, 255, 0.14), transparent 50%),
    transparent;
}
.admin-dash-inner {
  max-width: var(--width-page);
  margin: 0 auto;
}
.admin-dash-hero {
  margin-bottom: 28px;
}
.admin-dash-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff6b6b;
  border: 1px solid rgba(255, 107, 107, 0.35);
  background: rgba(255, 107, 107, 0.08);
  margin-bottom: 12px;
}
.admin-dash-title {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
  color: var(--text);
}
.admin-dash-gradient {
  background: linear-gradient(135deg, #ff6b6b, #e91e8c, #7b2fff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.admin-dash-lead {
  max-width: 720px;
  color: var(--t2, rgba(200, 180, 255, 0.62));
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 16px;
}
.admin-dash-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.admin-dash-hint {
  font-size: 0.78rem;
  color:var(--muted);
}
.admin-data-banner {
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 107, 107, 0.35);
  background: rgba(255, 107, 107, 0.08);
  color: var(--t2, #ffb4b4);
  font-size: 0.86rem;
}
.admin-section {
  margin-bottom: 36px;
}
.admin-section-muted .admin-section-sub {
  color:var(--muted);
}
.admin-section-head {
  margin-bottom: 16px;
}
.admin-section-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.admin-section-sub {
  margin: 0;
  font-size: 0.82rem;
  color:var(--muted);
}
.admin-prize-form {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--card-shadow);
}
.admin-prize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 14px;
}
.admin-prize-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  font-family: 'Epilogue', sans-serif;
}
.admin-prize-field--wide {
  grid-column: 1 / -1;
}
.admin-prize-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-top: 22px;
}
.admin-prize-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  font-family: 'Epilogue', sans-serif;
  font-size: 0.86rem;
  font-weight: 500;
  outline: none;
}
.admin-prize-input:focus {
  border-color: var(--card-border-hover);
}
.admin-prize-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.admin-stat-card {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--card-shadow);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.admin-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(123, 47, 255, 0.35);
}
button.admin-stat-card.admin-stat-filterable {
  width: 100%;
  display: block;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  margin: 0;
}
button.admin-stat-filterable:focus-visible {
  outline: 2px solid rgba(233, 30, 140, 0.55);
  outline-offset: 2px;
}
.admin-stat-card--active {
  border-color: rgba(233, 30, 140, 0.55);
  box-shadow:
    0 0 0 1px rgba(233, 30, 140, 0.28),
    0 8px 28px rgba(123, 47, 255, 0.22);
}
.admin-stat-readonly {
  cursor: default;
}
.admin-stat-readonly:hover {
  transform: none;
  border-color: var(--border);
}
.admin-stat-accent {
  border-color: rgba(255, 107, 107, 0.28);
  background: linear-gradient(145deg, rgba(255, 107, 107, 0.08), rgba(26, 20, 40, 0.9));
}
.admin-stat-pulse {
  border-color: rgba(0, 230, 118, 0.25);
  background: linear-gradient(145deg, rgba(0, 230, 118, 0.06), rgba(26, 20, 40, 0.92));
}
.admin-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:var(--muted);
  margin-bottom: 8px;
}
.admin-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--t1, #fff);
  letter-spacing: -0.02em;
}
.admin-stat-foot {
  margin-top: 8px;
  font-size: 0.72rem;
  color:var(--muted);
}
.admin-btn {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.admin-btn:active {
  transform: scale(0.98);
}
.admin-btn-primary {
  color: var(--t1, #fff);
  background: linear-gradient(135deg, #e91e8c, #7b2fff);
  box-shadow: 0 6px 22px rgba(123, 47, 255, 0.35);
}
.admin-btn-ghost {
  color: var(--t2, rgba(200, 180, 255, 0.85));
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}
.admin-btn-ghost:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.admin-table-wrap {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: var(--card-shadow);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  font-size: 0.82rem;
}
.admin-table th,
.admin-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(200, 180, 255, 0.08);
}
.admin-table th {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t2, rgba(200, 180, 255, 0.5));
  background: rgba(0, 0, 0, 0.2);
}
.admin-table tbody tr:hover {
  background: rgba(123, 47, 255, 0.06);
}
.admin-user-profile-link {
  color: var(--t2, #c4b5ff);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(164, 140, 255, 0.35);
  cursor: pointer;
}
.admin-user-profile-link:hover {
  color: var(--t1, #fff);
  border-bottom-color: rgba(233, 30, 140, 0.55);
}
.admin-role-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(123, 47, 255, 0.12);
  border: 1px solid rgba(123, 47, 255, 0.28);
  color: var(--t2, #c4b5ff);
}
.admin-mod-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 120px;
}
.admin-mod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-mod-status {
  font-size: 0.72rem;
  font-weight: 700;
}
.admin-mod-status--active {
  color: var(--green);
  font-weight: 600;
}
.admin-mod-status--suspended {
  color: #ffb74d;
}
.admin-mod-status--banned {
  color: #ff6b6b;
}
.admin-row-action {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(255, 107, 107, 0.35);
  color: var(--t2, #ff8f8f);
  background: rgba(255, 107, 107, 0.08);
}
.admin-row-action-neutral {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}
.admin-row-action-delete {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid #c62828;
  color: var(--t1, #fff);
  background: #8b1a1a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
}
.admin-row-action-delete:hover {
  background: #a32020;
}
.admin-pagination {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.admin-mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.admin-mod-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 16px;
  border: 1px dashed rgba(200, 180, 255, 0.22);
  background: rgba(255, 255, 255, 0.02);
}
.admin-mod-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #e91e8c;
  background: rgba(233, 30, 140, 0.12);
  border: 1px solid rgba(233, 30, 140, 0.25);
}
.admin-mod-title {
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--text);
}
.admin-mod-copy {
  margin: 0;
  font-size: 0.82rem;
  color:var(--muted);
  line-height: 1.55;
}
.admin-reports-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.admin-reports-filter-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}
.admin-reports-filter-btn--active {
  border-color: var(--card-border-hover);
  color: var(--text);
}
.admin-report-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: capitalize;
  border: 1px solid var(--border);
  color: var(--muted);
}
.admin-report-status--open {
  color: #ffb74d;
  border-color: rgba(255, 183, 77, 0.35);
}
.admin-report-status--reviewed {
  color: #9b6fff;
  border-color: rgba(155, 111, 255, 0.35);
}
.admin-report-status--dismissed {
  color: var(--muted);
}
.admin-report-status--actioned {
  color: var(--t2, #ff8f8f);
  border-color: rgba(255, 143, 143, 0.35);
}
.admin-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-report-details {
  max-width: 220px;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
  word-break: break-word;
}

/* ── PROFILE MORE MENU (⋯) + REPORT MODAL ───────────────────────────────── */
.fm-profile-more-menu-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.fm-profile-more-menu-btn {
  padding: 10px 16px;
  min-width: 44px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 16px;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  font-family: 'Epilogue', sans-serif;
  letter-spacing: 0.12em;
}
.fm-profile-more-menu-btn:hover {
  border-color: var(--card-border-hover);
  color: var(--text);
}
.fm-profile-more-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  z-index: 120;
}
.fm-profile-more-menu-wrap.is-open .fm-profile-more-menu-dropdown {
  display: block;
}
.fm-profile-more-menu-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: 'Epilogue', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.fm-profile-more-menu-item:hover:not(:disabled) {
  background: rgba(123, 47, 255, 0.12);
}
.fm-profile-more-menu-item:disabled {
  opacity: 0.55;
  cursor: default;
}
.fm-report-modal-lead {
  margin-bottom: 16px;
}
.fm-report-reasons {
  border: none;
  margin: 0 0 16px;
  padding: 0;
}
.fm-report-reasons-legend {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.fm-report-reason-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
}
.fm-report-reason-label input {
  accent-color: var(--purple);
}
.fm-report-details-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.fm-report-details {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  font-family: 'Epilogue', sans-serif;
  font-size: 0.86rem;
  resize: vertical;
  min-height: 96px;
}
.fm-report-details:focus {
  outline: none;
  border-color: var(--card-border-hover);
}
.fm-report-cancel-btn {
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: 'Epilogue', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.fm-report-cancel-btn:hover {
  border-color: var(--card-border-hover);
  color: var(--text);
}
.fm-report-submit-btn {
  flex: 1;
  margin-top: 0;
}

/* ── SETTINGS (ACCOUNT) VIEW ─────────────────────────────────────────────── */
.settings-view {
  min-height: 100vh;
  padding: 24px 20px 56px;
  background: radial-gradient(1000px 520px at 8% 0%, rgba(123, 47, 255, 0.16), transparent 55%),
    radial-gradient(800px 420px at 100% 10%, rgba(233, 30, 140, 0.1), transparent 45%),
    transparent;
}
.settings-inner {
  max-width: var(--width-page);
  margin: 0 auto;
}
.settings-hero {
  margin-bottom: 28px;
}
.settings-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a06eff;
  border: 1px solid rgba(123, 47, 255, 0.35);
  background: rgba(123, 47, 255, 0.1);
  margin-bottom: 12px;
}
.settings-title {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
  color: var(--text);
}
.settings-gradient {
  background: linear-gradient(135deg, #e91e8c, #7b2fff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.settings-lead {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--t2, rgba(200, 180, 255, 0.62));
}
.settings-guest-hint {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(233, 30, 140, 0.25);
  background: rgba(233, 30, 140, 0.08);
  color: var(--t2, #ffb8df);
  font-size: 0.86rem;
  margin-bottom: 20px;
}
.settings-panel {
  margin-bottom: 20px;
  padding: 22px 22px 20px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--card-shadow);
}
.settings-panel-accent {
  border-color: rgba(123, 47, 255, 0.35);
  background: linear-gradient(160deg, rgba(123, 47, 255, 0.1), rgba(26, 20, 40, 0.95));
}
.settings-panel-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}
.settings-panel-desc {
  margin: 0 0 16px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}
.settings-panel-note {
  margin: -8px 0 16px;
  font-size: 0.76rem;
  color: var(--muted);
  opacity: 0.88;
  line-height: 1.55;
}
.settings-notif-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Epilogue', sans-serif;
  font-size: 0.84rem;
}
.settings-notif-table th,
.settings-notif-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(200, 180, 255, 0.1);
  vertical-align: middle;
}
.settings-notif-table th {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.settings-notif-table td:not(:first-child),
.settings-notif-table th:not(:first-child) {
  text-align: center;
  width: 88px;
}
.settings-notif-type {
  color: var(--text);
  font-weight: 600;
}
.settings-notif-hint {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--muted);
}
.settings-notif-switch {
  width: 18px;
  height: 18px;
  accent-color: var(--purple);
  cursor: pointer;
}
.settings-notif-switch:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.settings-notif-soon {
  font-size: 0.68rem;
  color: var(--muted);
}
.settings-dl {
  margin: 0 0 16px;
}
.settings-dl > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(200, 180, 255, 0.08);
  font-size: 0.86rem;
}
.settings-dl dt {
  margin: 0;
  color:var(--muted);
  font-weight: 600;
}
.settings-dl dd {
  margin: 0;
  color: var(--text);
  word-break: break-all;
}
.settings-mono {
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--t2, rgba(200, 180, 255, 0.85));
}
.settings-actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-btn {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  width: fit-content;
  transition: border-color 0.18s ease, transform 0.15s ease;
}
.settings-btn:hover {
  border-color: rgba(123, 47, 255, 0.45);
}
.settings-btn:active {
  transform: scale(0.98);
}
.settings-btn-primary {
  border: none;
  color: var(--t1, #fff);
  background: linear-gradient(135deg, #e91e8c, #7b2fff);
  box-shadow: 0 6px 22px rgba(123, 47, 255, 0.35);
}
.settings-panel-danger {
  border-color: rgba(233, 30, 140, 0.35);
  background: rgba(233, 30, 140, 0.06);
}
.settings-btn-danger {
  border: none;
  color: var(--t1, #fff);
  background: var(--pink);
  box-shadow: 0 6px 22px rgba(233, 30, 140, 0.28);
}
.settings-btn-danger:hover:not(:disabled) {
  border-color: transparent;
  filter: brightness(1.08);
}
.settings-btn-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.settings-btn-ghost {
  background: transparent;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  max-width: 400px;
}
.settings-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--t2, rgba(200, 180, 255, 0.75));
  letter-spacing: 0.04em;
}
.settings-input {
  font-family: inherit;
  font-size: 0.88rem;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(123, 47, 255, 0.28);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  outline: none;
}
.settings-input:focus {
  border-color: rgba(0, 230, 118, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.15);
}
.settings-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.settings-field-err {
  font-size: 0.8rem;
  color: var(--t2, #ff8da1);
  margin: 0;
}
.settings-toggle-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(123, 47, 255, 0.28);
  border-radius: 12px;
}
.settings-toggle-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.settings-toggle-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}
.settings-toggle-hint {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}
.settings-inline-code {
  font-size: 0.72rem;
  font-family: ui-monospace, monospace;
  background: rgba(123, 47, 255, 0.14);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--t2, rgba(200, 180, 255, 0.9));
}
.settings-toggle-input {
  width: 48px;
  height: 26px;
  accent-color: var(--green);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}
.settings-toggle-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Discover / home trending — Supabase loading (no demo cards) */
.fm-discover-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(123, 47, 255, 0.22);
  border-top-color: #c8a97e;
  animation: fm-discover-spin 0.75s linear infinite;
}
@keyframes fm-discover-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Artist Media upload placeholder — pulse only, no fake progress bar */
@keyframes fm-media-upload-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1); }
}
.fm-media-upload-pulse {
  animation: fm-media-upload-pulse 1.4s ease-in-out infinite;
}

/* Spotlight — 8 tiles in one row; below 768px horizontal scroll (all media prefixes) */
.fm-media-spotlight-scroll {
  position: relative;
  width: 100%;
}
.fm-media-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 767px) {
  .fm-media-spotlight-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    cursor: grab;
  }
  .fm-media-spotlight-scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
  }
  .fm-media-spotlight-scroll.is-dragging a,
  .fm-media-spotlight-scroll.is-dragging button {
    pointer-events: none;
  }
  .fm-media-spotlight-grid {
    grid-template-columns: repeat(8, 132px);
    width: max-content;
    max-width: none;
  }
}

/* Global page shell padding (width comes from .fm-page-width / component rules + --width-page) */
.page > div {
  padding: 48px 32px;
  box-sizing: border-box;
}

#page-liveroom {
  padding-top: var(--cs-chrome-top, var(--fx-nav-chrome, 60px));
}

@media (min-width: 2560px) {
  :root {
    --width-page: min(1600px, 94vw);
  }
  .page > div,
  .now-header,
  .now-ticker,
  .now-grid,
  .now-sub-inner,
  .lr-sub-inner,
  .lr-player-wrap,
  .lr-wrap,
  .lr-room-wrap,
  .gs-wrap,
  .jb-genre-grid,
  .jb-room-wrap,
  .dr-stage-main,
  .upload-container,
  .admin-dash-inner,
  .settings-inner,
  .gs-profile-wrap {
    font-size: 108%;
  }
  .page > div {
    font-size: 108%;
  }
  .stats-grid-4col div {
    padding: 28px;
  }
  .stats-grid-4col div > div:first-child {
    font-size: 2rem;
  }
}

@media (min-width: 3840px) {
  :root {
    --width-page: min(2000px, 94vw);
  }
  .page > div {
    font-size: 118%;
  }
}

/* ── COLLAB ROOM: full-bleed shell — page scrolls; chat sticky 340px ─────────
   .now-sub-inner is capped via --width-page; collab opts out below.
   top + --cs-chrome-top set in JS from measured nav + admin chrome. */
#now-sub-collab.now-sub {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
#now-sub-collab .now-sub-inner {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 100%;
  box-sizing: border-box;
  display: block;
  overflow: visible;
}

/* Jukebox: full-bleed + neumorphic palette (scoped) */
#now-sub-jukebox {
  --jb-bg: #241d3a;
  --jb-bg-deep: #1c1630;
  --jb-surf: #2a2244;
  --jb-surf-hi: #332a52;
  --jb-lite: rgba(255,255,255,.075);
  --jb-dark: rgba(8,5,18,.62);
  --jb-up: -6px -6px 14px var(--jb-lite), 6px 6px 16px var(--jb-dark);
  --jb-up-sm: -3px -3px 7px var(--jb-lite), 3px 3px 9px var(--jb-dark);
  --jb-up-lg: -10px -10px 24px var(--jb-lite), 12px 12px 30px var(--jb-dark);
  --jb-in: inset -4px -4px 10px var(--jb-lite), inset 5px 5px 12px var(--jb-dark);
  --jb-in-sm: inset -2px -2px 5px var(--jb-lite), inset 3px 3px 7px var(--jb-dark);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--jb-bg) !important;
}
#now-sub-jukebox .now-sub-inner {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 100%;
  box-sizing: border-box;
  display: block;
  overflow: visible;
  background: var(--jb-bg);
}
#now-sub-jukebox .jb-dash,
#now-sub-jukebox .jb-page-room,
#now-sub-jukebox .jb-room-wrap {
  background: transparent;
}
#now-sub-jukebox .jb-player-card,
#now-sub-jukebox .jb-vote-card,
#now-sub-jukebox .jb-donate-card,
#now-sub-jukebox .jb-rail-card {
  background: var(--jb-surf);
  border-color: transparent;
  box-shadow: var(--jb-up);
}
#now-sub-jukebox .jb-chat-card.jb-inset {
  background: var(--jb-bg-deep);
  border: none;
  box-shadow: var(--jb-in);
}
#now-sub-jukebox .jb-room-hero-bar.jb-inset {
  background: var(--jb-bg-deep);
  border: none;
  box-shadow: var(--jb-in);
}
#now-sub-jukebox .jb-vote-item {
  background: var(--jb-surf-hi);
  border-bottom: none;
  margin-bottom: 8px;
  padding: 12px 10px;
  border-radius: 12px;
}
#now-sub-jukebox .jb-ctrl-btn,
#now-sub-jukebox .jb-vol {
  background: var(--jb-surf-hi);
  border: none;
  color: var(--t1, #f4f0ff);
}
#now-sub-collab .cs-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 0;
  align-items: start;
  overflow: visible;
  min-height: 100%;
}
#now-sub-collab .cs-col-main {
  min-width: 0;
  overflow: visible;
  padding: 20px 16px 48px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#now-sub-collab .cs-top {
  flex-shrink: 0;
  padding: 0;
  box-sizing: border-box;
}
#now-sub-collab .cs-head {
  margin-bottom: 14px;
}
#now-sub-collab .cs-tips-bar {
  margin-bottom: 12px;
}
#now-sub-collab .cs-cert-panel,
#now-sub-collab .cs-recap-section {
  margin-bottom: 12px;
}
#now-sub-collab .cs-col-stage {
  min-width: 0;
}
#now-sub-collab .cs-session-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  min-width: 0;
}
#now-sub-collab .cs-session-row .cs-daw,
#now-sub-collab .cs-session-row .cs-splits {
  min-width: 0;
  margin-bottom: 0;
}
#now-sub-collab .cs-col-chat {
  position: sticky;
  top: 0;
  align-self: start;
  width: 340px;
  height: calc(100vh - var(--cs-chrome-top, 60px));
  max-height: calc(100vh - var(--cs-chrome-top, 60px));
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 12px;
  border-left: 1px solid var(--border);
  box-sizing: border-box;
  overflow: hidden;
  z-index: 2;
}
#now-sub-collab .cs-col-chat .cs-chat {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  margin: 0;
}
#now-sub-collab .cs-col-chat .cs-msgs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#now-sub-collab .cs-col-chat .cs-input {
  flex-shrink: 0;
}

@media (max-width: 900px) {
  #now-sub-collab .cs-col-main {
    padding: 16px 14px 12px;
  }
  #now-sub-collab .cs-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  #now-sub-collab .cs-col-main {
    order: 1;
  }
  #now-sub-collab .cs-session-row {
    grid-template-columns: 1fr;
  }
  #now-sub-collab .cs-col-chat {
    order: 2;
    position: static;
    width: auto;
    height: auto;
    max-height: none;
    border-left: none;
    padding: 0 14px 80px;
    overflow: visible;
  }
  #now-sub-collab .cs-col-chat .cs-chat {
    flex: none;
    height: 380px;
  }
}

@media (max-width: 768px) {
  .page > div {
    padding: 24px 16px;
  }
  .detail-grid-2col {
    grid-template-columns: 1fr !important;
  }
  .stats-grid-4col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .stats-grid-4col {
    grid-template-columns: 1fr 1fr !important;
  }
}

.fm-toggle-wrap {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.fm-toggle-wrap input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.fm-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(200,180,255,0.15);
  border-radius: 24px;
  transition: 0.3s;
  border: 1px solid rgba(200,180,255,0.2);
}
.fm-toggle-slider:before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  background: rgba(200,180,255,0.5);
  border-radius: 50%;
  transition: 0.3s;
}
.fm-toggle-wrap input:checked + .fm-toggle-slider {
  background: rgba(123,47,255,0.5);
  border-color: rgba(123,47,255,0.8);
}
.fm-toggle-wrap input:checked + .fm-toggle-slider:before {
  transform: translateX(20px);
  background: #C8B4FF;
}

/* Flatpickr — Fortis dark theme */
.flatpickr-calendar {
  font-family: 'Epilogue', sans-serif;
  border: 1px solid var(--card-border);
  background: var(--card);
}
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
.flatpickr-days {
  background: var(--card);
}
span.flatpickr-weekday,
.flatpickr-current-month,
.flatpickr-time input,
.flatpickr-day {
  font-family: 'Epilogue', sans-serif;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: #C8A97E;
  border-color: #C8A97E;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #C8A97E;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #C8A97E;
}

/* Location picker — city autocomplete */
.fm-loc-ac-wrap {
  position: relative;
  width: 100%;
}
.fm-loc-ac-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 120;
  max-height: 220px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
}
.fm-loc-ac-item {
  padding: 10px 14px;
  font-family: 'Epilogue', sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
}
.fm-loc-ac-item:hover,
.fm-loc-ac-item.is-active {
  background: rgba(200, 169, 126, 0.22);
  color: var(--text);
}

/* ── Creator Dashboard (reuses admin card language; layout-only rhythm) ── */
.dash-dashboard .admin-dash-inner {
  padding-bottom: var(--space-16);
}
.dash-dashboard .dash-block {
  margin-bottom: var(--space-12);
}
.dash-dashboard .dash-block-note {
  margin-bottom: var(--space-6);
}
.dash-dashboard .admin-section-head {
  margin-bottom: var(--space-5);
}
.dash-auth-gate {
  max-width: 720px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--card-shadow);
  margin-top: var(--space-6);
}
.dash-auth-title {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--text);
}
.dash-auth-copy {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 22px;
}
.dash-skel {
  pointer-events: none;
  min-height: 108px;
}
.dash-skel-line {
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  margin-top: 10px;
}
.dash-skel-num {
  width: 42%;
  height: 28px;
  margin-top: 4px;
}
.dash-sec-error {
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* Block 1 — hero + stacked side cards */
.dash-b1 {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
.dash-b1--solo-left {
  grid-template-columns: 1fr;
}
.dash-b1--solo-right {
  grid-template-columns: 1fr;
}
.dash-b1-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
}
.dash-b1-side--fill > .dash-side-card {
  flex: 1;
}
.dash-hero-card {
  padding: 28px 26px;
  border-radius: 16px;
  border: 1px solid var(--card-border);
  background: linear-gradient(145deg, rgba(123, 47, 255, 0.14), rgba(233, 30, 140, 0.05) 55%, rgba(30, 24, 48, 0.92));
  box-shadow: var(--card-shadow);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dash-hero-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-4);
}
.dash-hero-metric {
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
  margin: 0 0 var(--space-5);
}
.dash-hero-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dash-hero-lines li {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.dash-side-card {
  padding: 18px 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--card-shadow);
}
.dash-side-card--action {
  border-color: rgba(233, 30, 140, 0.45);
  background: linear-gradient(145deg, rgba(233, 30, 140, 0.12), rgba(30, 24, 48, 0.92));
}
.dash-side-value {
  font-family: var(--font-head);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}
.dash-side-foot {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}

/* Block 2 — music list */
.dash-list {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.dash-list-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.dash-list-row:last-child {
  border-bottom: none;
}
.dash-list-num {
  flex: 0 0 60px;
  width: 60px;
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.dash-list-text {
  flex: 1;
  min-width: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Block 3 — three equal columns */
.dash-b3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.dash-b3--cols-1 { grid-template-columns: 1fr; }
.dash-b3--cols-2 { grid-template-columns: 1fr 1fr; }
.dash-b3--cols-3 { grid-template-columns: repeat(3, 1fr); }
.dash-b3-col {
  padding: 18px 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--card-shadow);
  min-width: 0;
}
.dash-b3-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
.dash-b3-label--pink { color: var(--pink); }
.dash-b3-label--purple { color: var(--purple); }
.dash-b3-label--muted { color: var(--muted); }
.dash-b3-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dash-b3-rows li {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}
.dash-b3-rows strong {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-right: 0.35em;
}

/* Block 4 — split strip */
.dash-b4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.dash-b4--solo {
  grid-template-columns: 1fr;
}
.dash-b4-pane {
  padding: var(--space-5) var(--space-6);
  min-width: 0;
}
.dash-b4-pane + .dash-b4-pane {
  border-left: 1px solid var(--border);
}
.dash-b4-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-3);
}
.dash-b4-value {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 0;
}
.dash-b4-sub {
  margin: var(--space-2) 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

.dash-eur {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
}
.dash-eur-sym {
  font-size: 0.55em;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0;
}
.dash-eur-amt {
  font-weight: 800;
}
.dash-note {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 768px) {
  .dash-b1,
  .dash-b1--solo-left,
  .dash-b1--solo-right {
    grid-template-columns: 1fr;
  }
  .dash-b3,
  .dash-b3--cols-1,
  .dash-b3--cols-2,
  .dash-b3--cols-3 {
    grid-template-columns: 1fr;
  }
  .dash-b4,
  .dash-b4--solo {
    grid-template-columns: 1fr;
  }
  .dash-b4-pane + .dash-b4-pane {
    border-left: none;
    border-top: 1px solid var(--border);
}
}

/* Members-only profile: anonymous visitors see header + banner only */
.fm-profile-restricted-view .fm-profile-stats,
.fm-profile-restricted-view .fm-media-spotlight,
.fm-profile-restricted-view .fm-profile-tabs,
.fm-profile-restricted-view [id$="-tab-nav"],
.fm-profile-restricted-view [id^="artist-tab-"],
.fm-profile-restricted-view [id^="dj-tab-"],
.fm-profile-restricted-view [id^="bm-tab-"],
.fm-profile-restricted-view [id^="dance-tab-"],
.fm-profile-restricted-view [id^="studio-tab-"],
.fm-profile-restricted-view [id^="clubs-tab-"],
.fm-profile-restricted-view [id^="gear-tab-"],
.fm-profile-restricted-view [id^="events-tab-"],
.fm-profile-restricted-view #fan-profile-sections,
.fm-profile-restricted-view #fanSocialSection,
.fm-profile-restricted-view .fm-fan-showcase,
.fm-profile-restricted-view [id$="-donate-section"],
.fm-profile-restricted-view .artist-public-only,
.fm-profile-restricted-view .dj-public-only,
.fm-profile-restricted-view .bm-public-only,
.fm-profile-restricted-view .dance-public-only,
.fm-profile-restricted-view .studio-public-only,
.fm-profile-restricted-view .clubs-public-only,
.fm-profile-restricted-view .gear-public-only,
.fm-profile-restricted-view .events-public-only,
.fm-profile-restricted-view .fan-public-only,
.fm-profile-restricted-view #artist-latest-videos-wrap,
.fm-profile-restricted-view #artist-public-showcase,
.fm-profile-restricted-view #artistTypeChips,
.fm-profile-restricted-view #djTypeChips,
.fm-profile-restricted-view #djBookBtn,
.fm-profile-restricted-view #dj-hero-genres,
.fm-profile-restricted-view #bm-hero-genres,
.fm-profile-restricted-view #dance-hero-genres,
.fm-profile-restricted-view #studio-hero-genres {
  display: none !important;
}

.fm-profile-members-gate-host {
  margin: 24px 0 8px;
}

.fm-profile-members-gate .fm-profile-members-gate-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: var(--card-shadow);
}

/* ── Notifications bell (in floating nav) + panel ── */
.fm-notif-rail {
  position: relative;
  display: none;
  flex: none;
  align-items: center;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  overflow: visible;
  font-family: 'Epilogue', sans-serif;
}
.fm-notif-rail-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fx-nav-notif-size, 34px);
  height: var(--fx-nav-notif-size, 34px);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(18, 15, 32, 0.88);
  color: var(--text);
  cursor: pointer;
  font-family: 'Epilogue', sans-serif;
  box-sizing: border-box;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}
.fm-notif-rail-btn:hover,
.fm-notif-rail-btn[aria-expanded="true"] {
  background: rgba(30, 24, 48, 0.95);
}
.fm-notif-rail-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.fm-notif-rail-btn:hover .fm-notif-rail-icon,
.fm-notif-rail-btn[aria-expanded="true"] .fm-notif-rail-icon {
  color: var(--text);
}
.fm-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--pink);
  color: var(--t1, #fff);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.fm-notif-panel {
  position: fixed;
  top: 78px; /* JS positions below bell */
  left: auto;
  right: var(--fx-nav-inset-x, 14px);
  bottom: auto;
  width: min(360px, calc(100vw - 24px));
  max-height: min(480px, calc(100vh - 90px));
  z-index: var(--fx-nav-notif-z, 110);
  display: none;
  flex-direction: column;
  background: rgba(18, 15, 32, 0.98);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--card-shadow-hover);
  font-family: 'Epilogue', sans-serif;
  box-sizing: border-box;
  overflow: hidden;
}
.fm-notif-panel.is-open {
  display: flex;
}
.fm-notif-panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--border);
}
.fm-notif-panel-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.fm-notif-panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fm-notif-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  font-family: 'Epilogue', sans-serif;
}
.fm-notif-close:hover {
  color: var(--text);
  background: rgba(123, 47, 255, 0.14);
}
.fm-notif-empty {
  padding: 20px 16px;
  font-size: 0.86rem;
  color: var(--muted);
  text-align: center;
}
.fm-notif-list {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  padding: 8px;
}
.fm-notif-row {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: flex-start;
  text-align: left;
  padding: 10px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: 'Epilogue', sans-serif;
  box-sizing: border-box;
}
.fm-notif-row:hover {
  background: rgba(123, 47, 255, 0.1);
  border-color: var(--border);
}
.fm-notif-row.is-unread {
  background: rgba(123, 47, 255, 0.14);
  border-color: rgba(123, 47, 255, 0.28);
}
.fm-notif-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--card2);
  border: 1px solid var(--border);
}
.fm-notif-av--ini {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--t1, #fff);
  background: linear-gradient(135deg, #E91E8C, #7B2FFF);
  border: none;
}
.fm-notif-av--jb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #E91E8C, #7B2FFF);
  border: none;
}
.fm-notif-av--jb img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.fm-notif-row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fm-notif-row-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.fm-notif-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
}
.fm-notif-room {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(123, 47, 255, 0.28);
  color: var(--t2, #C8B4FF);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.fm-notif-age {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--muted);
}
.fm-notif-action {
  font-size: 0.78rem;
  color: var(--muted);
}
.fm-notif-snippet {
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 900px) {
  .fm-notif-panel {
    width: min(360px, calc(100vw - 16px));
  }
}

/* ── Media lightbox (two-column on wide screens) ── */
.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 13000;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  padding: 48px 56px;
  box-sizing: border-box;
  font-family: 'Epilogue', sans-serif;
}
.media-lightbox-chrome-btn {
  position: fixed;
  z-index: 13002;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--t1, #fff);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  font-family: 'Epilogue', sans-serif;
}
.media-lightbox-close {
  top: 16px;
  right: 16px;
  font-size: 1.6rem;
}
.media-lightbox-prev {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.media-lightbox-next {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.media-lightbox-counter {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 13002;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--t2, rgba(255, 255, 255, 0.75));
  letter-spacing: 0.06em;
}
.media-lightbox-body {
  position: relative;
  z-index: 13001;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  height: min(90vh, calc(100vh - 96px));
  max-height: min(90vh, calc(100vh - 96px));
  width: auto;
  max-width: calc(100vw - 112px);
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
}
.media-lightbox-stage {
  flex: 0 0 auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.media-lightbox-media {
  display: block;
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
  background: transparent;
}
#media-lightbox-video.media-lightbox-media {
  background: #000;
}
.media-lightbox-embed {
  width: 100%;
  max-width: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
}
.media-lightbox-comments {
  flex: 0 0 340px;
  width: 340px;
  height: 100%;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(18, 15, 32, 0.92);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  box-sizing: border-box;
  min-height: 0;
}
.media-lightbox-comments-head {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
#media-lightbox-comments-list {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  max-height: none;
}
.media-lightbox-composer {
  flex: 0 0 auto;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(200, 180, 255, 0.1);
}
.fm-mention-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 40;
  display: none;
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  padding: 4px;
  box-sizing: border-box;
}
.fm-mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: 'Epilogue', sans-serif;
  font-size: 0.84rem;
  cursor: pointer;
  box-sizing: border-box;
}
.fm-mention-item:hover,
.fm-mention-item.is-active {
  background: var(--card2);
}
.fm-mention-item-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--card2);
  border: 1px solid var(--border);
}
.fm-mention-item-avatar--empty {
  display: inline-block;
}
.fm-mention-item-meta {
  min-width: 0;
  flex: 1;
}
.fm-mention-item-name {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fm-mention-item-sub {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fm-mention-empty {
  padding: 10px 12px;
  font-size: 0.78rem;
  color: var(--muted);
  font-family: 'Epilogue', sans-serif;
}
a.fm-comment-mention {
  color: var(--t2, #C8B4FF);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
a.fm-comment-mention:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 900px) {
  .media-lightbox {
    padding: 40px 20px;
  }
  .media-lightbox-body {
    flex-direction: column;
    width: min(960px, 90vw);
    max-width: min(960px, 90vw);
    height: auto;
    max-height: 92vh;
  }
  .media-lightbox-stage {
    width: 100% !important;
    height: auto !important;
    max-height: min(58vh, 520px);
    flex: 1 1 auto;
  }
  .media-lightbox-media {
    max-width: 100%;
    max-height: min(58vh, 520px);
    width: auto !important;
    height: auto !important;
  }
  .media-lightbox-embed {
    width: 100% !important;
    max-width: 900px;
  }
  .media-lightbox-comments {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    max-height: min(34vh, 280px);
  }
}