html,
body {
      margin: 0;
    }

    body {
      padding-bottom: 104px;
      overflow-x: hidden;
    }
    .site {
      width: 100%;
      margin: 0 auto;
      padding: 0 0 34px;
      position: relative;
      z-index: 1;
    }

    .hero {
      height: clamp(205px, 21vw, 275px);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 0;
      border-bottom: 1px solid rgba(36, 200, 255, .24);
      border-radius: 0;
      background:
        url("/assets/dropdeck-header.png") center / 100% auto no-repeat,
        radial-gradient(circle at 22% 35%, rgba(123, 53, 255, .28), transparent 34rem),
        radial-gradient(circle at 78% 45%, rgba(36, 200, 255, .22), transparent 31rem),
        linear-gradient(135deg, #020309 0%, #070a16 46%, #02040a 100%);
      box-shadow: 0 36px 110px rgba(0,0,0,.58);
      position: relative;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(2,4,9,.62) 0%, rgba(2,4,9,.20) 28%, rgba(2,4,9,.16) 68%, rgba(2,4,9,.58) 100%),
        linear-gradient(180deg, rgba(2,4,9,.10), rgba(2,4,9,.76));
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 42%;
      background: linear-gradient(180deg, transparent, rgba(1,2,7,.78));
      pointer-events: none;
    }

    .hero-divider {
      width: 100%;
      height: 3px;
      margin-top: -1px;
      background: linear-gradient(90deg, transparent, var(--violet), var(--blue), var(--gold), var(--magenta), transparent);
      opacity: .85;
    }

    .hero-content {
      width: min(860px, calc(100% - 32px));
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 9px;
      padding: clamp(18px, 3vw, 34px) clamp(18px, 4vw, 44px) clamp(16px, 2.4vw, 28px);
      position: relative;
      z-index: 1;
      text-align: center;
      filter: drop-shadow(0 18px 42px rgba(0,0,0,.64));
    }

    .badge-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      padding: 6px 8px;
      border: 1px solid rgba(36, 200, 255, .16);
      border-radius: 999px;
      background: rgba(3, 6, 16, .42);
      backdrop-filter: blur(16px);
    }

    .badge {
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(8, 10, 15, .58);
      color: var(--muted);
      font-size: .72rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .08em;
      backdrop-filter: blur(14px);
    }

    .badge.live {
      border-color: rgba(36, 200, 255, .62);
      color: #1d1006;
      background: linear-gradient(135deg, #e8fbff, #24c8ff 54%, #7a35ff);
      box-shadow: 0 12px 30px rgba(36, 200, 255, .24), inset 0 1px 0 rgba(255,255,255,.38);
    }

    .badge.auto {
      border-color: rgba(46, 216, 255, .58);
      color: #07161b;
      background: linear-gradient(135deg, #d8f8ff, #2ed8ff 58%, #0f87a4);
      box-shadow: 0 12px 30px rgba(46, 216, 255, .2), inset 0 1px 0 rgba(255,255,255,.36);
    }

    .badge.paused {
      border-color: rgba(184, 196, 214, .36);
      color: rgba(248, 251, 255, .9);
      background: rgba(20, 29, 42, .86);
      box-shadow: none;
    }

    .badge i,
    .panel-title i,
    .label i,
    .history-dj i {
      opacity: .9;
    }

    .panel-title i,
    .label i {
      margin-right: 7px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 7px rgba(56, 217, 131, .12), 0 0 24px rgba(56, 217, 131, .58);
    }

    .dot.auto {
      background: var(--blue);
      box-shadow: 0 0 0 7px rgba(123, 53, 255, .13), 0 0 24px rgba(123, 53, 255, .52);
    }

    .dot.paused {
      background: #8d99aa;
      box-shadow: 0 0 0 7px rgba(141, 153, 170, .1);
    }

    h1 {
      max-width: 760px;
      margin: 0;
      font-family: "Space Grotesk", Inter, sans-serif;
      font-size: clamp(1.55rem, 2.75vw, 2.45rem);
      line-height: 1;
      letter-spacing: 0;
      text-wrap: balance;
      text-shadow: 0 0 28px rgba(36, 200, 255, .34), 0 20px 58px rgba(0,0,0,.78);
    }

    .subcopy {
      max-width: 610px;
      margin: 0;
      color: #d9e1ff;
      font-size: clamp(.82rem, 1.05vw, .94rem);
      line-height: 1.42;
      font-weight: 750;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }

    .request-launch,
    .discord-launch {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 1px solid rgba(36, 200, 255, .42);
      border-radius: 999px;
      padding: 0 18px;
      color: #f7fbff;
      font-weight: 950;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 16px 38px rgba(36, 200, 255, .22);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .dj-apply-launch {
      border-color: rgba(var(--accent-2-rgb), .34);
      background: linear-gradient(135deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-2-rgb), .18));
    }

    .application-trap {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .request-launch {
      background: linear-gradient(135deg, var(--violet), var(--blue));
    }

    .discord-launch {
      background:
        linear-gradient(135deg, rgba(88, 101, 242, .92), rgba(36, 200, 255, .82)),
        rgba(5, 8, 16, .78);
    }

    .request-launch:hover,
    .discord-launch:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 46px rgba(123, 53, 255, .30);
    }

    .request-launch[hidden] {
      display: none;
    }

    .sticky-player {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 20;
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 18px;
      padding: 10px 14px;
      border-top: 1px solid rgba(255, 255, 255, .16);
      border-right: 0;
      border-bottom: 0;
      border-left: 0;
      border-radius: 0;
      background:
        linear-gradient(135deg, rgba(123, 53, 255, .14), rgba(46, 216, 255, .055)),
        rgba(9, 11, 17, .9);
      backdrop-filter: blur(24px);
      box-shadow: 0 20px 70px rgba(0,0,0,.46);
    }

    .player-now {
      min-width: 0;
      display: grid;
      grid-template-columns: auto auto minmax(0, 720px);
      align-items: center;
      justify-content: start;
      gap: 14px;
    }

    .sticky-player-main {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .sticky-title {
      color: var(--ink);
      font-size: clamp(.98rem, 1.4vw, 1.16rem);
      line-height: 1.15;
      font-weight: 950;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sticky-artists {
      min-width: 0;
      color: var(--muted);
      font-size: .8rem;
      line-height: 1.25;
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sticky-player .play {
      width: 48px;
      height: 48px;
      box-shadow: 0 14px 34px rgba(36, 200, 255, .28);
    }

    .sticky-cover {
      width: 50px;
      height: 50px;
      border: 2px solid rgba(123, 53, 255, .42);
      border-radius: 10px;
      overflow: hidden;
      background: linear-gradient(145deg, #e8fbff, #24c8ff 54%, #7a35ff);
      box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
    }

    .sticky-cover img,
    .history-cover img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .sticky-player .volume-control {
      width: 220px;
      justify-self: end;
    }

    .player-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      min-width: 0;
    }

    .popout-button {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line-soft);
      border-radius: 50%;
      background: rgba(255,255,255,.055);
      color: var(--ink);
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, color .18s ease;
    }

    .popout-button:hover {
      transform: translateY(-1px);
      border-color: rgba(123, 53, 255, .55);
      color: var(--gold);
    }

    .label {
      color: var(--dim);
      font-size: .75rem;
      font-weight: 950;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .play {
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 50%;
      color: #17100a;
      cursor: pointer;
      background: linear-gradient(145deg, #e8fbff, #24c8ff 54%, #7a35ff);
      box-shadow: 0 20px 48px rgba(36, 200, 255, .30);
      transition: transform .18s ease, filter .18s ease;
    }

    .play:hover { transform: translateY(-1px) scale(1.02); filter: brightness(1.04); }
    .pause-icon,
    .playing .play-icon { display: none; }
    .playing .pause-icon { display: inline-block; }

    .play-state {
      color: var(--muted);
      font-size: .86rem;
      font-weight: 750;
    }

    .volume-control {
      width: 220px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      background: rgba(255,255,255,.045);
    }

    .volume-control i {
      color: var(--gold);
      font-size: .84rem;
    }

    .request-modal,
    .profile-modal {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: none;
      place-items: center;
      padding: 18px;
      background: rgba(0, 0, 0, .72);
      backdrop-filter: blur(12px);
    }

    .request-modal.open,
    .profile-modal.open {
      display: grid;
    }

    .profile-modal {
      z-index: 34;
    }

    body.profile-modal-open {
      overflow: hidden;
    }

    .profile-dialog {
      position: relative;
      width: min(780px, 100%);
      height: min(88vh, 760px);
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: linear-gradient(145deg, rgba(123, 53, 255, .13), rgba(11, 16, 27, .98) 35%, rgba(4, 7, 13, .99));
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
    }

    .profile-dialog-head {
      display: flex;
      justify-content: flex-end;
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 4;
    }

    .profile-close {
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255, 216, 140, .24);
      border-radius: 50%;
      background: rgba(5, 7, 6, .76);
      color: var(--text);
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 14px 34px rgba(0,0,0,.34);
      backdrop-filter: blur(14px);
    }

    .profile-close:hover {
      color: var(--gold);
      border-color: rgba(255, 153, 38, .5);
    }

    .profile-content {
      height: 100%;
      display: flex;
      flex-direction: column;
      background:
        radial-gradient(circle at 12% 10%, rgba(123, 53, 255, .24), transparent 18rem),
        radial-gradient(circle at 88% 8%, rgba(53, 212, 255, .1), transparent 18rem),
        linear-gradient(145deg, rgba(24, 29, 26, .98), rgba(8, 10, 10, .99));
    }

    .profile-top {
      display: grid;
      grid-template-columns: 124px minmax(0, 1fr);
      gap: 22px;
      align-items: center;
      padding: 34px 34px 26px;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .profile-avatar {
      width: 124px;
      height: 124px;
      border-radius: 50%;
      border: 4px solid var(--ginger);
      background: linear-gradient(145deg, #e8fbff, #24c8ff 54%, #7a35ff);
      display: grid;
      place-items: center;
      overflow: hidden;
      font-size: 2.35rem;
      color: #140701;
      box-shadow: 0 0 0 8px rgba(36, 200, 255, .12), 0 24px 60px rgba(123, 53, 255, .2);
    }

    .profile-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .profile-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: .78rem;
      font-weight: 900;
    }

    .profile-title {
      max-width: calc(100% - 54px);
      margin: 8px 0 0;
      color: var(--text);
      font-size: clamp(2.2rem, 8vw, 4.35rem);
      line-height: .96;
      font-weight: 950;
      letter-spacing: 0;
    }

    .profile-show {
      margin-top: 14px;
      color: var(--gold);
      font-size: 1.25rem;
      font-weight: 900;
    }

    .profile-line {
      margin-top: 8px;
      color: var(--muted);
      font-size: 1.03rem;
      font-weight: 750;
    }

    .profile-socials {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 16px;
    }

    .profile-socials a {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(36, 200, 255, .24);
      border-radius: 50%;
      color: #e9faff;
      background:
        linear-gradient(135deg, rgba(123, 53, 255, .26), rgba(36, 200, 255, .13)),
        rgba(5, 7, 11, .42);
      text-decoration: none;
      box-shadow: 0 12px 28px rgba(123, 53, 255, .16);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .profile-socials a:hover {
      transform: translateY(-2px);
      border-color: rgba(36, 200, 255, .56);
      box-shadow: 0 16px 38px rgba(36, 200, 255, .18);
    }

    .profile-bio {
      min-height: 0;
      overflow: auto;
      padding: 28px 34px 38px;
      color: #eee3d9;
      font-size: 1.05rem;
      line-height: 1.75;
      scrollbar-width: thin;
      scrollbar-color: var(--ginger) rgba(255,255,255,.06);
    }

    .profile-bio :first-child { margin-top: 0; }
    .profile-bio :last-child { margin-bottom: 0; }
    .profile-bio a { color: var(--cyan); font-weight: 850; }

    .profile-bio::-webkit-scrollbar {
      width: 10px;
    }

    .profile-bio::-webkit-scrollbar-track {
      background: rgba(255,255,255,.045);
      border-radius: 999px;
    }

    .profile-bio::-webkit-scrollbar-thumb {
      border: 2px solid rgba(8, 10, 10, .96);
      border-radius: 999px;
      background: linear-gradient(180deg, var(--gold), var(--ginger));
    }

    .profile-bio::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #e8fbff, #24c8ff);
    }

    .profile-loading {
      height: 100%;
      display: grid;
      place-items: center;
      color: var(--muted);
      font-weight: 900;
    }

    @media (max-width: 640px) {
      .profile-dialog { height: min(88vh, 720px); }
      .profile-top {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
        padding: 52px 22px 24px;
      }
      .profile-title { max-width: 100%; }
      .profile-bio { padding: 24px 22px 34px; }
    }

    .station-modal {
      position: fixed;
      inset: 0;
      z-index: 35;
      display: none;
      place-items: center;
      padding: 18px;
      background: rgba(0, 0, 0, .74);
      backdrop-filter: blur(14px);
    }

    .station-modal.open {
      display: grid;
    }

    .station-dialog {
      width: min(460px, 100%);
      border: 1px solid var(--line);
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(24, 28, 25, .98), rgba(8, 10, 10, .98));
      box-shadow: var(--shadow);
      padding: 24px;
      text-align: center;
    }

    .station-dialog-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      margin: 0 auto 14px;
      border-radius: 50%;
      color: #170b02;
      background: linear-gradient(145deg, var(--ginger), var(--gold));
      box-shadow: 0 16px 34px rgba(123, 53, 255, .22);
    }

    .station-dialog h2 {
      margin: 0;
      color: var(--ink);
      font-size: 1.25rem;
      font-weight: 950;
    }

    .station-dialog p {
      margin: 10px 0 0;
      color: var(--muted);
      font-weight: 750;
      line-height: 1.55;
    }

    .station-actions {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 18px;
    }

    .station-actions button {
      min-height: 42px;
      border: 0;
      border-radius: 12px;
      padding: 0 15px;
      font-weight: 950;
      cursor: pointer;
    }

    .station-resume {
      color: #170b02;
      background: linear-gradient(135deg, var(--ginger), var(--gold));
    }

    .station-dismiss {
      color: var(--ink);
      background: rgba(255,255,255,.06);
      border: 1px solid var(--line-soft) !important;
    }

    .request-dialog {
      width: min(520px, 100%);
      border: 1px solid var(--line);
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(20, 24, 22, .98), rgba(7, 10, 10, .98));
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .request-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 20px;
      border-bottom: 1px solid var(--line-soft);
    }

    .request-head h2 {
      margin: 0;
      color: var(--ink);
      font-size: 1.1rem;
      font-weight: 950;
    }

    .request-close {
      width: 36px;
      height: 36px;
      border: 1px solid var(--line-soft);
      border-radius: 50%;
      background: rgba(255,255,255,.05);
      color: var(--ink);
      cursor: pointer;
    }

    .request-body {
      display: grid;
      gap: 13px;
      padding: 20px;
    }

    .request-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 4px;
      border-radius: 14px;
      background: rgba(0,0,0,.22);
      border: 1px solid var(--line-soft);
    }

    .request-tab {
      min-height: 38px;
      border: 0;
      border-radius: 11px;
      background: transparent;
      color: var(--muted);
      font-weight: 950;
      cursor: pointer;
    }

    .request-tab.active {
      background: linear-gradient(135deg, var(--ginger), var(--gold));
      color: #170b02;
    }

    .request-body label {
      display: grid;
      gap: 7px;
      color: var(--dim);
      font-size: .78rem;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .request-body input,
    .request-body textarea {
      width: 100%;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: rgba(0,0,0,.26);
      color: var(--ink);
      padding: 12px 13px;
      outline: none;
      resize: vertical;
    }

    .request-body textarea {
      min-height: 94px;
    }

    .request-section {
      display: grid;
      gap: 13px;
    }

    .request-section[hidden] {
      display: none;
    }

    .request-body input:focus,
    .request-body textarea:focus {
      border-color: rgba(123, 53, 255, .7);
      box-shadow: 0 0 0 4px rgba(123, 53, 255, .11);
    }

    .request-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 4px;
    }

    .request-submit {
      min-height: 42px;
      border: 0;
      border-radius: 12px;
      padding: 0 15px;
      background: linear-gradient(135deg, var(--ginger), var(--gold));
      color: #170b02;
      font-weight: 950;
      cursor: pointer;
    }

    .request-status {
      color: var(--muted);
      font-weight: 800;
      line-height: 1.4;
    }

    .volume-value {
      min-width: 34px;
      color: var(--muted);
      font-size: .76rem;
      font-weight: 900;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .volume {
      width: 100%;
      height: 18px;
      margin: 0;
      appearance: none;
      background: transparent;
      cursor: pointer;
      --volume: 50%;
    }

    .volume::-webkit-slider-runnable-track {
      height: 7px;
      border-radius: 999px;
      background:
        linear-gradient(90deg, var(--gold), var(--amber)) 0 / var(--volume) 100% no-repeat,
        rgba(255,255,255,.14);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.35);
    }

    .volume::-webkit-slider-thumb {
      appearance: none;
      width: 18px;
      height: 18px;
      margin-top: -5.5px;
      border: 2px solid #f1fbff;
      border-radius: 50%;
      background: linear-gradient(145deg, #e8fbff, #24c8ff 54%, #7a35ff);
      box-shadow: 0 8px 18px rgba(0,0,0,.34), 0 0 0 5px rgba(244,201,108,.1);
    }

    .volume::-moz-range-track {
      height: 7px;
      border-radius: 999px;
      background:
        linear-gradient(90deg, var(--gold), var(--amber)) 0 / var(--volume) 100% no-repeat,
        rgba(255,255,255,.14);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.35);
    }

    .volume::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border: 2px solid #f1fbff;
      border-radius: 50%;
      background: linear-gradient(145deg, #e8fbff, #24c8ff 54%, #7a35ff);
      box-shadow: 0 8px 18px rgba(0,0,0,.34), 0 0 0 5px rgba(244,201,108,.1);
    }

    .section-grid {
      width: min(1240px, calc(100% - 32px));
      margin-right: auto;
      margin-left: auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      margin-top: 24px;
    }

    .host-stack {
      display: grid;
      gap: 24px;
      align-content: start;
      align-self: start;
    }

    .panel {
      border: 1px solid rgba(123, 53, 255, .19);
      border-radius: 16px;
      background:
        linear-gradient(145deg, rgba(123, 53, 255, .045), rgba(46, 216, 255, .018)),
        rgba(12, 15, 16, .84);
      backdrop-filter: blur(22px);
      box-shadow: 0 28px 82px rgba(0, 0, 0, .32);
      overflow: hidden;
      position: relative;
    }

    .panel::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
    }

    .panel-head {
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 0 18px;
      border-bottom: 1px solid rgba(123, 53, 255, .12);
      background: linear-gradient(90deg, rgba(123,53,255,.055), transparent);
    }

    .panel-title {
      margin: 0;
      color: var(--ink);
      font-size: 1rem;
      font-weight: 950;
    }

    .panel-note {
      color: var(--dim);
      font-size: .8rem;
      font-weight: 800;
    }

    .history {
      display: grid;
      padding: 8px;
      gap: 8px;
    }

    .history-row {
      display: grid;
      grid-template-columns: 42px 54px minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      padding: 13px 14px;
      border: 1px solid rgba(123, 53, 255, .10);
      border-radius: 13px;
      background: rgba(0,0,0,.18);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    .history-row:hover {
      transform: translateY(-1px);
      border-color: rgba(123, 53, 255, .25);
      background:
        linear-gradient(135deg, rgba(123, 53, 255, .07), rgba(46, 216, 255, .025)),
        rgba(0,0,0,.22);
    }

    .index {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(123, 53, 255, .22);
      border-radius: 12px;
      color: var(--gold);
      background: linear-gradient(145deg, rgba(123, 53, 255, .15), rgba(36, 200, 255, .05));
      font-family: "Space Grotesk", Inter, sans-serif;
      font-weight: 800;
    }

    .history-cover {
      width: 54px;
      height: 54px;
      border: 1px solid rgba(123, 53, 255, .24);
      border-radius: 12px;
      overflow: hidden;
      background: linear-gradient(145deg, #e8fbff, #24c8ff 54%, #7a35ff);
      box-shadow: 0 14px 28px rgba(0,0,0,.25);
    }

    .history-title {
      color: var(--ink);
      font-weight: 950;
      line-height: 1.22;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .history-artist,
    .history-time {
      margin-top: 5px;
      color: var(--dim);
      font-size: .82rem;
      font-weight: 750;
    }

    .history-dj {
      align-self: center;
      padding: 6px 9px;
      border: 1px solid rgba(56, 217, 131, .24);
      border-radius: 999px;
      color: #c9ffdf;
      background: linear-gradient(135deg, rgba(56, 217, 131, .14), rgba(56, 217, 131, .055));
      font-size: .72rem;
      font-weight: 950;
      white-space: nowrap;
      text-decoration: none;
    }

    .history-dj.auto {
      border-color: rgba(46, 216, 255, .26);
      color: #d8f8ff;
      background: linear-gradient(135deg, rgba(46, 216, 255, .13), rgba(46, 216, 255, .045));
    }

    .history-stack {
      display: grid;
      gap: 24px;
      align-content: start;
      align-self: start;
    }

    .radio-lower-grid {
      display: grid;
      grid-template-columns: minmax(0, 6fr) minmax(320px, 4fr);
      gap: 24px;
      align-items: stretch;
    }

    .chat-stack {
      display: grid;
      gap: 18px;
      align-content: start;
      align-self: start;
      min-width: 0;
    }

    .current-poll-panel {
      margin-bottom: 24px;
    }

    .current-poll-panel[hidden] { display: none; }

    .chat-panel {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      min-height: 0;
      align-self: start;
    }

    .chat-panel .panel-head {
      min-height: 54px;
      padding: 0 14px;
    }

    .chat-panel .panel-title {
      font-size: .92rem;
    }

    .chat-status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--dim);
      font-size: .75rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .chat-status::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #8c7f72;
      box-shadow: 0 0 0 4px rgba(255,255,255,.045);
    }

    .chat-status.online::before {
      background: #35d07f;
      box-shadow: 0 0 0 4px rgba(56, 217, 131, .12);
    }

    .chat-poll {
      margin: 0;
      padding: 12px;
      border-top: 1px solid var(--line-soft);
    }

    .chat-poll:empty { display: none; }
    .chat-poll-kicker { color: var(--gold); font-size: .72rem; font-weight: 950; text-transform: uppercase; letter-spacing: .09em; display: flex; align-items: center; gap: 7px; }
    .chat-poll-question { color: var(--text); font-weight: 950; line-height: 1.3; margin: 7px 0 10px; }
    .chat-poll-options { display: grid; gap: 7px; }
    .chat-poll-option {
      position: relative;
      min-height: 38px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 11px;
      background: rgba(0,0,0,.26);
      color: var(--text);
      padding: 8px 10px;
      font-weight: 900;
      text-align: left;
      cursor: pointer;
    }
    .chat-poll-option span,
    .chat-poll-option strong { position: relative; z-index: 1; }
    .chat-poll-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, rgba(123,53,255,.48), rgba(36,200,255,.34)); transition: width .25s ease; }
    .chat-poll-option.selected { border-color: rgba(36,200,255,.7); box-shadow: 0 0 18px rgba(123,53,255,.16); }
    .chat-poll-option:disabled { cursor: default; opacity: .95; }
    .chat-poll-total { color: var(--dim); font-size: .76rem; font-weight: 850; margin-top: 8px; }

    .chat-log {
      min-height: 0;
      height: 520px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 14px;
      overflow: auto;
      scrollbar-width: thin;
    }

    .chat-log::-webkit-scrollbar { width: 5px; }
    .chat-log::-webkit-scrollbar-track { background: rgba(255,255,255,.035); border-radius: 999px; }
    .chat-log::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--ginger), var(--blue)); border-radius: 999px; }

    .chat-empty {
      margin: auto 0;
      padding: 12px;
      border: 1px dashed rgba(123, 53, 255, .2);
      border-radius: 12px;
      color: var(--dim);
      background: rgba(5, 7, 11, .18);
      font-size: .86rem;
      font-weight: 800;
      line-height: 1.5;
    }

    .chat-message {
      display: grid;
      gap: 4px;
      padding: 9px 10px;
      border: 1px solid rgba(123, 53, 255, .13);
      border-radius: 13px;
      background:
        linear-gradient(135deg, rgba(123, 53, 255, .045), transparent),
        rgba(5, 7, 11, .28);
    }

    .chat-message.listener {
      cursor: default;
    }

    .chat-message.dj {
      border-color: rgba(123, 53, 255, .3);
      background:
        linear-gradient(135deg, rgba(123, 53, 255, .12), rgba(46, 216, 255, .04)),
        rgba(5, 7, 11, .34);
    }

    .chat-message-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 4px;
    }

    .chat-message.has-avatar .chat-message-inner {
      grid-template-columns: 30px minmax(0, 1fr);
      column-gap: 8px;
      align-items: start;
    }

    .chat-message.has-avatar .chat-avatar {
      grid-row: 1 / 3;
    }

    .chat-message.has-avatar .chat-text {
      grid-column: 2;
    }

    .chat-avatar {
      width: 30px;
      height: 30px;
      border: 2px solid var(--amber);
      border-radius: 50%;
      background: linear-gradient(145deg, #e8fbff, #24c8ff 54%, #7a35ff);
      overflow: hidden;
      box-shadow: 0 8px 18px rgba(123, 53, 255, .16);
    }

    .chat-avatar img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .chat-avatar.fallback {
      display: grid;
      place-items: center;
      color: #061019;
      font-size: .72rem;
      font-weight: 950;
      line-height: 1;
      text-transform: uppercase;
    }

    .chat-meta {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--dim);
      font-size: .72rem;
      font-weight: 850;
    }

    .chat-name {
      color: var(--gold);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .chat-role {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-left: 6px;
      padding: 2px 6px;
      border: 1px solid rgba(123, 53, 255, .26);
      border-radius: 999px;
      color: #050505;
      background: linear-gradient(135deg, var(--ginger), var(--gold));
      font-size: .62rem;
      font-weight: 950;
      text-transform: uppercase;
      vertical-align: middle;
    }

    .chat-meta .chat-role,
    .chat-meta .chat-role i {
      color: #050505;
    }

    .chat-meta span:last-child {
      flex: 0 0 auto;
    }

    .chat-text {
      grid-column: 1 / -1;
      color: var(--ink);
      font-size: .84rem;
      font-weight: 750;
      line-height: 1.42;
      overflow-wrap: anywhere;
    }

    .chat-form {
      display: grid;
      gap: 7px;
      padding: 12px;
      border-top: 1px solid var(--line-soft);
    }

    .chat-auth-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .chat-discord-link,
    .chat-auth-name,
    .chat-logout {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 10px;
      border: 1px solid rgba(88, 101, 242, .38);
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(88, 101, 242, .2), rgba(46, 216, 255, .08));
      color: var(--ink);
      font-size: .74rem;
      font-weight: 950;
      text-decoration: none;
    }

    .chat-logout {
      margin-left: auto;
      cursor: pointer;
      border-color: rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .04);
      color: rgba(239, 246, 255, .82);
    }

    .chat-logout:hover {
      color: #fff;
      border-color: rgba(46, 216, 255, .42);
      background: rgba(46, 216, 255, .1);
    }

    .chat-auth-name {
      color: var(--gold);
      border-color: rgba(46, 216, 255, .28);
    }

    .chat-discord-link[hidden],
    .chat-auth-name[hidden],
    .chat-logout[hidden] {
      display: none;
    }

    .chat-fields {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
    }

    .chat-input,
    .chat-name-input {
      width: 100%;
      border: 1px solid rgba(123, 53, 255, .18);
      border-radius: 10px;
      background: rgba(5, 7, 11, .36);
      color: var(--ink);
      font: inherit;
      font-size: .88rem;
      font-weight: 800;
      outline: none;
    }

    .chat-name-input {
      padding: 9px 10px;
      font-size: .82rem;
    }

    .chat-name-input[hidden] {
      display: none;
    }

    .chat-input {
      min-width: 0;
      padding: 10px 11px;
      font-size: .84rem;
    }

    .chat-input:focus,
    .chat-name-input:focus {
      border-color: rgba(123, 53, 255, .5);
      box-shadow: 0 0 0 4px rgba(123, 53, 255, .09);
    }

    .chat-name-input.locked {
      color: var(--gold);
      border-color: rgba(123, 53, 255, .28);
      background:
        linear-gradient(135deg, rgba(123, 53, 255, .08), rgba(46, 216, 255, .035)),
        rgba(5, 7, 11, .36);
      cursor: not-allowed;
    }

    .chat-send {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 10px;
      color: #170901;
      background: linear-gradient(135deg, var(--ginger), var(--gold));
      box-shadow: 0 12px 26px rgba(123, 53, 255, .18);
    }

    .chat-mod-menu {
      position: fixed;
      z-index: 80;
      width: 178px;
      padding: 7px;
      border: 1px solid rgba(46, 216, 255, .22);
      border-radius: 12px;
      background:
        linear-gradient(135deg, rgba(123, 53, 255, .16), rgba(46, 216, 255, .08)),
        rgba(4, 7, 15, .96);
      box-shadow: 0 20px 48px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.035) inset;
      backdrop-filter: blur(16px);
    }

    .chat-mod-menu[hidden] {
      display: none;
    }

    .chat-mod-menu button {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 10px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: var(--ink);
      font: inherit;
      font-size: .78rem;
      font-weight: 900;
      text-align: left;
      cursor: pointer;
    }

    .chat-mod-menu button:hover {
      background: rgba(46, 216, 255, .12);
      color: #ffffff;
    }

    .chat-mod-menu button[data-chat-mod-action="ban"] {
      color: #ffd4df;
    }

    .chat-mod-menu button[data-chat-mod-action="ban"]:hover {
      background: rgba(255, 61, 126, .16);
    }

    .chat-mod-menu.dj-target button[data-chat-mod-action="timeout"],
    .chat-mod-menu.dj-target button[data-chat-mod-action="ban"] {
      display: none;
    }

    .chat-mod-menu button[data-chat-mod-action="clear"] {
      color: #dff9ff;
      border-top: 1px solid rgba(255,255,255,.08);
      margin-top: 4px;
    }

    .status-card {
      padding: 20px;
      display: grid;
      gap: 18px;
    }

    .dj-card {
      min-height: 170px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 20px;
      padding: 22px;
      border: 1px solid rgba(123, 53, 255, .24);
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(3, 4, 11, .82), rgba(11, 9, 32, .7) 44%, rgba(3, 18, 30, .82)),
        radial-gradient(circle at 12% 0%, rgba(123, 53, 255, .34), transparent 16rem),
        radial-gradient(circle at 92% 10%, rgba(46, 216, 255, .18), transparent 18rem),
        linear-gradient(135deg, rgba(123, 53, 255, .17), rgba(46, 216, 255, .07)),
        url("/assets/dropdeck-login-bg.png") center / cover no-repeat,
        rgba(255,255,255,.032);
      background-blend-mode: normal, screen, screen, normal, normal, normal;
      backdrop-filter: blur(4px) saturate(108%);
      -webkit-backdrop-filter: blur(4px) saturate(108%);
      position: relative;
      overflow: hidden;
    }

    .dj-card::after {
      content: "";
      position: absolute;
      inset: auto 20px 0 20px;
      height: 3px;
      border-radius: 999px 999px 0 0;
      background: linear-gradient(90deg, var(--ginger), var(--gold), var(--blue));
      opacity: .9;
    }

    .avatar {
      width: clamp(50px, 12vw, 128px);
      height: clamp(50px, 12vw, 128px);
      display: grid;
      place-items: center;
      border: 3px solid var(--amber);
      border-radius: 50%;
      overflow: visible;
      color: #17100a;
      background: linear-gradient(145deg, #e8fbff, #24c8ff 54%, #7a35ff);
      font-family: "Space Grotesk", Inter, sans-serif;
      font-size: 1.35rem;
      font-weight: 800;
      box-shadow: 0 18px 42px rgba(36, 200, 255, .22), 0 0 0 5px rgba(123, 53, 255, .12);
      position: relative;
      z-index: 1;
    }

    .avatar::before,
    .avatar::after {
      content: "";
      position: absolute;
      inset: -7px;
      border: 2px solid rgba(123, 53, 255, .55);
      border-radius: inherit;
      opacity: 0;
      transform: scale(.96);
      pointer-events: none;
      z-index: -1;
    }

    .avatar.live::before {
      animation: avatar-ripple 2.15s ease-out infinite;
    }

    .avatar.live::after {
      animation: avatar-ripple 2.15s ease-out .9s infinite;
      border-color: rgba(46, 216, 255, .38);
    }

    @keyframes avatar-ripple {
      0% {
        opacity: .82;
        transform: scale(.96);
      }
      70%, 100% {
        opacity: 0;
        transform: scale(1.22);
      }
    }

    .avatar img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      border-radius: inherit;
      position: relative;
      z-index: 1;
    }

    .dj-card-main {
      min-width: 0;
      display: grid;
      gap: 8px;
      position: relative;
      z-index: 1;
    }

    .dj-card-top {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      position: absolute;
      top: 22px;
      right: 22px;
      z-index: 2;
    }

    .dj-badge {
      min-height: 27px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 9px;
      border: 1px solid rgba(56, 217, 131, .28);
      border-radius: 999px;
      color: #c9ffdf;
      background: linear-gradient(135deg, rgba(56, 217, 131, .16), rgba(56, 217, 131, .06));
      font-size: .7rem;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .dj-badge.auto {
      border-color: rgba(46, 216, 255, .28);
      color: #d8f8ff;
      background: linear-gradient(135deg, rgba(46, 216, 255, .14), rgba(46, 216, 255, .05));
    }

    .dj-badge.paused {
      border-color: rgba(184, 196, 214, .28);
      color: rgba(232, 238, 247, .88);
      background: rgba(22, 31, 44, .78);
    }

    .dj-card-name {
      color: var(--ink);
      font-size: 1.5rem;
      line-height: 1.1;
      font-weight: 950;
      overflow-wrap: anywhere;
      text-decoration: none;
      width: fit-content;
    }

    a.dj-card-name[href]:hover,
    a.history-dj[href]:hover {
      color: var(--gold);
      text-decoration: none;
    }

    .dj-card-show {
      color: var(--orange);
      font-size: 1rem;
      line-height: 1.35;
      font-weight: 900;
      margin-top: 0;
      overflow-wrap: anywhere;
    }

    .dj-card-sub {
      color: var(--muted);
      line-height: 1.55;
      font-size: .95rem;
      font-weight: 650;
    }

    .dj-card-meta {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      position: relative;
      z-index: 1;
    }

    .dj-meta-item {
      min-height: 60px;
      display: grid;
      align-content: center;
      gap: 4px;
      padding: 10px 12px;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: rgba(2, 5, 12, .80);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    }

    .dj-meta-item span {
      color: var(--dim);
      font-size: .7rem;
      font-weight: 950;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .dj-meta-item strong {
      min-width: 0;
      color: var(--ink);
      font-size: .88rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .shows-panel {
      padding: 18px;
    }

    .shows-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }

    .shows-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      color: var(--ink);
      font-family: "Space Grotesk", Inter, sans-serif;
      font-size: 1.05rem;
      font-weight: 950;
      letter-spacing: .02em;
    }

    .shows-note {
      color: var(--dim);
      font-size: .82rem;
      font-weight: 850;
    }

    .shows-list {
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      padding: 0 2px 10px;
      position: relative;
      scrollbar-width: thin;
      scrollbar-color: var(--amber) rgba(255,255,255,.035);
    }

    .shows-list::-webkit-scrollbar { height: 8px; }
    .shows-list::-webkit-scrollbar-track { background: rgba(255,255,255,.035); border-radius: 999px; }
    .shows-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--ginger), var(--blue)); border-radius: 999px; }

    .show-epg {
      --minute-width: 7.2px;
      --timeline-minutes: 1440;
      width: calc(var(--timeline-minutes) * var(--minute-width));
      min-width: 100%;
      position: relative;
      padding: 42px 0 14px;
    }

    .show-epg-times {
      position: absolute;
      inset: 0 0 auto;
      height: 38px;
      border: 1px solid rgba(123,53,255,.12);
      border-bottom: 0;
      border-radius: 14px 14px 0 0;
      background:
        linear-gradient(90deg, rgba(123,53,255,.16) 1px, transparent 1px) 0 100% / calc(30 * var(--minute-width)) 13px repeat-x,
        linear-gradient(180deg, rgba(123,53,255,.08), rgba(123,53,255,.025)),
        rgba(0,0,0,.16);
    }

    .show-epg-tick {
      position: absolute;
      top: 0;
      width: 1px;
      height: 38px;
      background: rgba(123,53,255,.12);
    }

    .show-epg-tick span {
      position: absolute;
      top: 8px;
      left: 6px;
      color: #c9a98e;
      font-size: .7rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .show-epg-tick.end span {
      left: auto;
      right: 6px;
    }

    .show-epg-now {
      position: absolute;
      top: 30px;
      bottom: 8px;
      width: 2px;
      background: linear-gradient(180deg, var(--gold), var(--ginger));
      box-shadow: 0 0 18px rgba(123,53,255,.48);
      z-index: 4;
    }

    .show-epg-now::before {
      content: "Now";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -100%);
      padding: 4px 7px;
      border-radius: 999px;
      color: #170901;
      background: linear-gradient(135deg, var(--gold), var(--amber));
      font-size: .65rem;
      font-weight: 950;
      text-transform: uppercase;
      box-shadow: 0 10px 24px rgba(123,53,255,.18);
    }

    .show-epg-lane {
      position: relative;
      min-height: 106px;
      border: 1px solid rgba(123,53,255,.14);
      border-radius: 0 0 16px 16px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / calc(30 * var(--minute-width)) 100% repeat-x,
        radial-gradient(circle at 8% 0%, rgba(123,53,255,.12), transparent 18rem),
        linear-gradient(135deg, rgba(123,53,255,.07), rgba(46,216,255,.022)),
        rgba(5, 7, 11, .34);
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    }

    .show-item {
      appearance: none;
      border: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto minmax(0, 1fr);
      align-items: stretch;
      gap: 8px;
      min-width: 178px;
      min-height: 76px;
      padding: 12px;
      color: inherit;
      background:
        linear-gradient(135deg, rgba(123, 53, 255, .18), rgba(46, 216, 255, .055)),
        rgba(5, 7, 11, .76);
      text-align: left;
      position: absolute;
      top: 12px;
      bottom: 12px;
      border: 1px solid rgba(123, 53, 255, .24);
      border-radius: 14px;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 0 16px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    .show-item.now {
      border-color: rgba(56, 217, 131, .38);
      background:
        linear-gradient(135deg, rgba(56, 217, 131, .16), rgba(123, 53, 255, .08)),
        rgba(5, 7, 11, .78);
    }

    .show-time {
      width: fit-content;
      padding: 4px 7px;
      border: 1px solid rgba(36,200,255,.2);
      border-radius: 999px;
      color: var(--gold);
      background: rgba(0,0,0,.22);
      font-size: .68rem;
      font-weight: 950;
      white-space: nowrap;
      align-self: start;
      text-align: left;
      grid-column: 1;
    }

    .show-meta {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      grid-column: 1;
      grid-row: 1;
    }

    .show-meta .show-time,
    .show-meta .show-dj {
      flex: 0 1 auto;
    }

    .show-line {
      display: none;
    }

    .show-dot {
      width: 14px;
      height: 14px;
      border: 2px solid rgba(255, 215, 138, .9);
      border-radius: 50%;
      background: #0b0f10;
      box-shadow: 0 0 0 5px rgba(123, 53, 255, .10);
      position: relative;
      z-index: 1;
    }

    .show-item.now .show-dot {
      border-color: rgba(56, 217, 131, .95);
      background: #35d07f;
      box-shadow: 0 0 0 6px rgba(56, 217, 131, .13), 0 0 24px rgba(56, 217, 131, .36);
    }

    .show-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      align-content: end;
      grid-column: 1 / -1;
      grid-row: 2;
    }

    .show-merged-badge {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 8px;
      border: 1px solid rgba(36, 200, 255, .42);
      border-radius: 999px;
      color: #cfefff;
      background: rgba(123, 53, 255, .12);
      font-size: .62rem;
      font-weight: 950;
      letter-spacing: .02em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .show-item:hover,
    .show-item:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(123, 53, 255, .34);
      background: linear-gradient(135deg, rgba(123, 53, 255, .11), rgba(46, 216, 255, .045));
    }

    .show-name {
      color: var(--ink);
      font-weight: 950;
      line-height: 1.15;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .show-dj {
      width: fit-content;
      color: var(--dim);
      font-size: .82rem;
      font-weight: 850;
      text-decoration: none;
    }

    .show-dj[href]:hover {
      color: var(--gold);
      text-decoration: none;
    }

    .show-stack {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      min-width: 0;
      margin-top: 2px;
    }

    .show-stack span {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 3px 6px;
      border: 1px solid rgba(36, 200, 255, .16);
      border-radius: 999px;
      color: rgba(255, 226, 188, .86);
      background: rgba(123, 53, 255, .09);
      font-size: .65rem;
      font-weight: 900;
    }

    .show-detail-stack {
      display: grid;
      gap: 6px;
    }

    .show-detail-stack span {
      width: fit-content;
      max-width: 100%;
      padding: 6px 9px;
      border: 1px solid rgba(36, 200, 255, .18);
      border-radius: 999px;
      color: #d9e1ff;
      background: rgba(123, 53, 255, .1);
      font-size: .82rem;
      font-weight: 900;
    }

    .show-live {
      align-self: start;
      justify-self: end;
      margin-left: 0;
      padding: 5px 8px;
      border: 1px solid rgba(56, 217, 131, .25);
      border-radius: 999px;
      color: #c9ffdf;
      background: rgba(56, 217, 131, .12);
      font-size: .66rem;
      font-weight: 950;
      text-transform: uppercase;
      grid-column: 2;
      grid-row: 1;
    }

    .show-chevron {
      position: absolute;
      right: 10px;
      bottom: 9px;
      align-self: end;
      justify-self: end;
      margin-left: 0;
      color: rgba(255, 248, 236, .5);
      font-size: .82rem;
    }

    .shows-empty {
      padding: 16px;
      border: 1px dashed rgba(123, 53, 255, .2);
      border-radius: 12px;
      color: var(--dim);
      background: rgba(5, 7, 11, .18);
      font-weight: 800;
      line-height: 1.5;
    }

    .show-detail-modal {
      position: fixed;
      inset: 0;
      display: none;
      place-items: center;
      padding: 22px;
      background: rgba(0,0,0,.72);
      backdrop-filter: blur(12px);
      z-index: 80;
    }

    .show-detail-modal.open {
      display: grid;
    }

    .show-detail-dialog {
      width: min(560px, 100%);
      border: 1px solid rgba(123, 53, 255, .24);
      border-radius: 18px;
      background:
        radial-gradient(circle at 10% 0%, rgba(123, 53, 255, .18), transparent 18rem),
        linear-gradient(135deg, rgba(19, 24, 24, .98), rgba(8, 12, 13, .98));
      box-shadow: 0 30px 90px rgba(0,0,0,.58);
      overflow: hidden;
    }

    .show-detail-top {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 16px;
      align-items: start;
      padding: 20px;
      border-bottom: 1px solid rgba(123, 53, 255, .14);
    }

    .show-detail-avatar {
      width: 82px;
      height: 82px;
      display: grid;
      place-items: center;
      border: 3px solid var(--amber);
      border-radius: 50%;
      background: linear-gradient(145deg, #e8fbff, #24c8ff 54%, #7a35ff);
      overflow: hidden;
      box-shadow: 0 16px 38px rgba(36, 200, 255, .22);
    }

    .show-detail-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .show-detail-avatar i {
      color: #17100a;
      font-size: 1.35rem;
    }

    .show-detail-close {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(123, 53, 255, .28);
      border-radius: 50%;
      color: var(--ink);
      background: rgba(0,0,0,.2);
    }

    .show-detail-kicker {
      color: var(--gold);
      font-size: .75rem;
      font-weight: 950;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .show-detail-title {
      margin: 5px 0 0;
      color: var(--ink);
      font-family: "Space Grotesk", Inter, sans-serif;
      font-size: clamp(1.55rem, 6vw, 2.3rem);
      line-height: 1;
      font-weight: 950;
    }

    .show-detail-dj {
      margin-top: 8px;
      color: var(--orange);
      font-weight: 950;
    }

    .show-detail-body {
      display: grid;
      gap: 12px;
      padding: 20px;
    }

    .show-detail-row {
      display: grid;
      grid-template-columns: 118px minmax(0, 1fr);
      gap: 12px;
      padding: 12px;
      border: 1px solid rgba(123, 53, 255, .12);
      border-radius: 12px;
      background: rgba(0,0,0,.18);
    }

    .show-detail-label {
      color: var(--dim);
      font-size: .72rem;
      font-weight: 950;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .show-detail-value {
      color: var(--ink);
      font-weight: 850;
      line-height: 1.45;
    }

    audio { display: none; }

    @media (max-width: 1040px) {
      .section-grid { grid-template-columns: 1fr; }
      .radio-lower-grid { grid-template-columns: 1fr; }
      .chat-log { height: 480px; }
    }

    @media (max-width: 720px) {
      .site { width: 100%; padding-top: 0; }
      .hero {
        height: clamp(190px, 48vw, 220px);
        background-size: auto 100%, auto, auto, auto;
      }
      .hero-content {
        width: min(100%, calc(100% - 24px));
        min-height: 100%;
        justify-content: center;
        gap: 7px;
        padding: 10px 12px 12px;
        transform: translateY(-12px);
      }
      .hero::before { background: linear-gradient(180deg, rgba(6,7,14,.72) 0%, rgba(6,7,14,.42) 38%, rgba(6,7,14,.86) 100%); }
      .badge-row { gap: 7px; padding: 6px 7px; border-radius: 14px; }
      .badge { min-height: 30px; padding: 0 9px; font-size: .66rem; }
      h1 { font-size: clamp(1.45rem, 7vw, 2rem); }
      .subcopy { max-width: 340px; font-size: .74rem; line-height: 1.3; }
      .hero-actions { gap: 7px; }
      .request-launch,
      .discord-launch { min-height: 36px; padding: 0 12px; font-size: .78rem; }
      .hero-divider { height: 2px; }
      .section-grid {
        padding: 18px 16px 124px;
        gap: 14px;
      }
      .panel {
        border-radius: 14px;
      }
      .status-card {
        padding: 16px;
      }
      .dj-card {
        min-height: 0;
        gap: 13px;
        padding: 16px;
        border-radius: 14px;
      }
      .dj-card .avatar {
        width: 74px;
        height: 74px;
        border-width: 2px;
      }
      .dj-card-main {
        gap: 5px;
      }
      .dj-card-top {
        top: 14px;
        right: 14px;
      }
      .dj-card-name {
        font-size: 1.38rem;
      }
      .dj-card-show {
        margin-top: 0;
        font-size: .92rem;
        line-height: 1.2;
      }
      .dj-card-sub {
        font-size: .82rem;
        line-height: 1.35;
      }
      .dj-card-meta {
        gap: 8px;
      }
      .dj-meta-item {
        min-height: 50px;
        padding: 8px 10px;
      }
      .history-panel .panel-head {
        padding: 16px 18px;
      }
      .history-list {
        padding: 8px;
      }
      .volume-control { grid-column: 1 / -1; width: 100%; }
      .sticky-player {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 9px 10px 10px;
      }
      .player-now {
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 9px;
      }
      .sticky-player .volume-control {
        width: 100%;
      }
      .player-actions {
        grid-column: 1 / -1;
        width: 100%;
      }
      .popout-button {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
      }
      .sticky-player .play,
      .sticky-cover { width: 42px; height: 42px; border-radius: 9px; }
      .sticky-title { font-size: .9rem; }
      .sticky-artists { font-size: .72rem; }
      .history-row { grid-template-columns: 34px 44px minmax(0, 1fr); align-items: start; }
      .show-epg { --minute-width: 5.5px; }
      .show-item { min-width: 145px; }
      .show-time { font-size: .68rem; }
      .show-live { width: fit-content; }
      .show-chevron { display: none; }
      .show-detail-top { grid-template-columns: auto minmax(0, 1fr); }
      .show-detail-close { position: absolute; top: 16px; right: 16px; }
      .show-detail-dialog { position: relative; }
      .show-detail-row { grid-template-columns: 1fr; }
      .index { width: 34px; height: 34px; border-radius: 8px; }
      .history-cover { width: 44px; height: 44px; border-radius: 8px; }
      .history-dj { grid-column: 3; justify-self: start; }
    }
.dj-apply-launch[hidden],
.discord-launch.dj-apply-launch[hidden] {
  display: none !important;
}

/* Public navigation and listener profiles */
.site-nav { min-height:60px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:24px; padding:0 clamp(16px,4vw,52px); background:rgba(3,5,13,.92); border-bottom:1px solid rgba(123,53,255,.16); position:relative; z-index:8; }
.site-nav-brand,.site-nav-links,.site-nav-actions{display:flex;align-items:center}.site-nav-brand{gap:9px;color:var(--ink);text-decoration:none;font-weight:950}.site-nav-brand img{width:28px;height:28px;border-radius:9px}.site-nav-links{justify-content:center;gap:20px}.site-nav-links a{color:var(--muted);font-size:.8rem;font-weight:850;text-decoration:none}.site-nav-links a:hover,.site-nav-links a.active,.site-nav-links a.site-nav-profile{color:var(--blue)}.site-nav-actions{justify-content:flex-end}.site-nav-button{min-height:34px;border:1px solid rgba(46,216,255,.32);border-radius:9px;padding:0 12px;background:linear-gradient(135deg,rgba(123,53,255,.58),rgba(36,200,255,.56));color:#fff;font:inherit;font-size:.76rem;font-weight:900;cursor:pointer}.site-nav-button.ghost{background:rgba(255,255,255,.04);color:var(--muted)}
.about-strip,.resident-section{width:min(1220px,calc(100% - 48px));margin:26px auto 0}.about-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.7fr);gap:36px;align-items:center;padding:24px 28px;border:1px solid rgba(46,216,255,.16);border-radius:16px;background:linear-gradient(135deg,rgba(123,53,255,.09),rgba(36,200,255,.05),rgba(0,0,0,.2))}.about-kicker{color:var(--blue);font-size:.72rem;font-weight:950;letter-spacing:.09em;text-transform:uppercase}.about-strip h2,.resident-head h2{margin:6px 0 0;color:var(--ink);font-size:1.3rem}.about-strip p,.resident-head>span{margin:0;color:var(--muted);font-weight:700;line-height:1.5}.resident-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:26px 0 12px}.resident-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.resident-card{min-width:0;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border:1px solid rgba(123,53,255,.18);border-radius:12px;background:rgba(3,7,16,.62);color:var(--ink);text-decoration:none}.resident-card:hover{border-color:rgba(36,216,255,.5);transform:translateY(-1px)}.resident-card>i{color:var(--blue);font-size:.75rem}.resident-avatar{width:40px;height:40px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--blue);border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--blue))}.resident-avatar img{width:100%;height:100%;object-fit:cover}.resident-card span:nth-child(2){min-width:0;display:grid;gap:3px}.resident-card strong,.resident-card small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.resident-card small{color:var(--muted);font-size:.68rem;font-weight:750}.history-like{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(123,53,255,.2);border-radius:50%;background:rgba(4,8,17,.52);color:var(--muted);cursor:pointer}.history-like:hover,.history-like.liked{color:#ff6fa7;border-color:rgba(255,111,167,.52);background:rgba(255,111,167,.1)}
@media(max-width:720px){.site-nav{grid-template-columns:auto 1fr;gap:12px;padding:10px 14px}.site-nav-links{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:14px;overflow-x:auto;padding-bottom:2px}.site-nav-actions{justify-content:flex-end}.site-nav-button{font-size:.7rem}.about-strip,.resident-section{width:min(100% - 32px,1220px)}.about-strip{grid-template-columns:1fr;gap:10px;padding:19px}.resident-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.resident-head{align-items:start;flex-direction:column}.history-like{grid-column:3;justify-self:end;margin-top:-34px}}
/* Chat upgrades */
.chat-message.system {
  border-color: rgba(36, 200, 255, .34) !important;
  background:
    linear-gradient(135deg, rgba(36, 200, 255, .14), rgba(123, 53, 255, .08)),
    rgba(5, 7, 11, .38) !important;
}

.chat-message-inner {
  position: relative;
  padding-right: 28px;
}

.chat-text {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(36, 200, 255, .7) transparent;
}

.chat-text::-webkit-scrollbar,
.chat-pinned-text::-webkit-scrollbar {
  height: 4px;
}

.chat-text::-webkit-scrollbar-thumb,
.chat-pinned-text::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(90deg, #7b35ff, #24c8ff);
}

.chat-pin-button {
  position: absolute;
  top: -1px;
  right: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(36, 200, 255, .34);
  border-radius: 999px;
  color: rgba(218, 226, 242, .74);
  background: rgba(8, 13, 24, .88);
  cursor: pointer;
  font-size: .72rem;
  line-height: 1;
}

.chat-pin-button:hover,
.chat-pin-button.active {
  color: #fff;
  border-color: rgba(36, 200, 255, .72);
  background: linear-gradient(135deg, #7b35ff, #24c8ff);
}

.chat-pinned {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin: 0 0 12px;
  padding: 9px;
  border: 1px solid rgba(36, 200, 255, .36);
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(123, 53, 255, .18), rgba(36, 200, 255, .1)),
    rgba(8, 13, 24, .74);
  box-shadow: none;
}

.chat-pinned-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.chat-pinned-icon,
.chat-pinned-action {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(36, 200, 255, .26);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #7b35ff, #24c8ff);
  font-size: .76rem;
}

.chat-pinned-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.chat-pinned-label {
  color: #24c8ff;
  font-size: .63rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.chat-pinned-text {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  color: #f8fbff;
  font-size: .86rem;
  font-weight: 850;
  scrollbar-width: thin;
  scrollbar-color: rgba(36, 200, 255, .7) transparent;
}

.chat-pinned.expanded .chat-pinned-text {
  white-space: normal;
  overflow: visible;
}

.chat-pinned.minimized .chat-pinned-text {
  display: none;
}

.chat-pinned.minimized .chat-pinned-label {
  color: #f8fbff;
}

.chat-pinned-actions {
  display: flex;
  gap: 5px;
}

.chat-pinned-action {
  cursor: pointer;
  background: rgba(8, 13, 24, .9);
}

.chat-pinned-action:hover,
.chat-pinned-action.unpin {
  border-color: rgba(36, 200, 255, .7);
  background: linear-gradient(135deg, #7b35ff, #24c8ff);
}

.chat-auth-name a { color: inherit; text-decoration: none; }
.chat-profile-link { color: inherit; text-decoration: none; }
.chat-profile-link:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.profile-listener-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.profile-listener-stats span { padding: 6px 9px; border: 1px solid rgba(46,216,255,.2); border-radius: 999px; color: var(--muted); font-size: .72rem; font-weight: 850; }
.profile-listener-stats strong { color: var(--blue); }
.profile-listener-stats a { padding: 6px 9px; border: 1px solid rgba(123,53,255,.35); border-radius: 999px; color: var(--ink); background: rgba(123,53,255,.12); font-size: .72rem; font-weight: 900; text-decoration: none; }
.profile-top-editor { padding-bottom: 18px; border-bottom: 1px solid rgba(46,216,255,.15); }
.profile-listener-editor-shell { margin-top: 18px; overflow: hidden; border: 1px solid rgba(46,216,255,.2); border-radius: 14px; background: linear-gradient(145deg, rgba(123,53,255,.12), rgba(36,200,255,.055) 45%, rgba(3,8,17,.74)); }
.profile-listener-editor-intro { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(46,216,255,.16); }
.profile-editor-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--violet), var(--blue)); box-shadow: 0 7px 18px rgba(36,200,255,.18); }
.profile-listener-editor-intro span:not(.profile-editor-icon) { color: var(--blue); font-size: .68rem; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.profile-listener-editor-intro h3 { margin: 3px 0 2px; color: var(--ink); font-size: 1.05rem; }
.profile-listener-editor-intro p { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 650; }
.profile-listener-editor { display: grid; gap: 15px; padding: 18px; }
.profile-listener-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .72fr); gap: 12px; }
.profile-listener-editor label { display: grid; gap: 7px; color: var(--muted); font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.profile-listener-editor input:not([type="file"]),.profile-listener-editor textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(46,216,255,.2); border-radius: 10px; padding: 11px 12px; outline: none; background: rgba(2,6,13,.74); color: var(--ink); font: inherit; transition: border-color .16s ease, box-shadow .16s ease; }
.profile-listener-editor input:not([type="file"]):focus,.profile-listener-editor textarea:focus { border-color: rgba(46,216,255,.62); box-shadow: 0 0 0 3px rgba(46,216,255,.1); }
.profile-listener-editor textarea { min-height: 112px; resize: vertical; }
.profile-listener-editor small { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.profile-listener-editor-avatar input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.profile-listener-editor-avatar span { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 8px; border: 1px dashed rgba(46,216,255,.35); border-radius: 10px; color: var(--ink); background: rgba(3,9,18,.5); font-size: .74rem; font-weight: 850; letter-spacing: 0; text-transform: none; cursor: pointer; }
.profile-listener-editor-avatar:hover span { border-color: var(--blue); background: rgba(46,216,255,.08); }
.profile-listener-editor-avatar span i { color: var(--blue); }
.profile-listener-editor-help { display: flex; gap: 8px; align-items: flex-start; padding: 10px 11px; border-radius: 10px; color: var(--muted); background: rgba(2,6,13,.42); font-size: .72rem; font-weight: 700; line-height: 1.4; }
.profile-listener-editor-help i { margin-top: 1px; color: var(--blue); }
.profile-listener-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; }
.profile-listener-editor-actions span { color: var(--blue); font-size: .75rem; font-weight: 800; }
.profile-listener-editor-actions button { border: 0; border-radius: 10px; min-height: 39px; padding: 0 15px; background: linear-gradient(135deg, var(--violet), var(--blue)); color: #fff; font: inherit; font-size: .76rem; font-weight: 900; cursor: pointer; box-shadow: 0 8px 18px rgba(36,200,255,.15); }
.profile-listener-editor-actions button:disabled { cursor: wait; opacity: .7; }
@media (max-width: 560px) { .profile-listener-editor-grid { grid-template-columns: 1fr; }.profile-listener-editor-actions { align-items: stretch; flex-direction: column; }.profile-listener-editor-actions button { width: 100%; } }
.history-row:has(.history-like) { grid-template-columns: 42px 54px minmax(0, 1fr) auto 30px; }
.history-like { width: 30px; height: 30px; margin: 0; display: inline-grid; place-items: center; border: 1px solid rgba(152,126,255,.28); border-radius: 9px; background: rgba(8,12,26,.72); color: rgba(190,199,224,.78); cursor: pointer; transition: transform .16s ease, color .16s ease, border-color .16s ease, background .16s ease; }
.history-like:hover { color: #ff8bb6; border-color: rgba(255,111,167,.55); background: rgba(255,111,167,.12); transform: translateY(-1px); }
.history-like.liked { color: #ff77aa; border-color: rgba(255,111,167,.56); background: linear-gradient(135deg, rgba(255,111,167,.22), rgba(123,53,255,.16)); }
.history-like:disabled { cursor: wait; opacity: .58; transform: none; }
.profile-favorites { margin: 0 24px 24px; overflow: hidden; border: 1px solid rgba(152,126,255,.2); border-radius: 13px; background: rgba(4,8,17,.58); }
.profile-favorites-head { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 13px; border-bottom: 1px solid rgba(152,126,255,.15); color: var(--ink); font-size: .72rem; font-weight: 950; letter-spacing: .065em; text-transform: uppercase; }
.profile-favorites-head > i { color: #ff77aa; }.profile-favorites-head small { margin-left: auto; color: var(--blue); font-size: .7rem; }
.profile-favorites-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(152,126,255,.11); }
.profile-favorite-track { display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 55px; padding: 9px 11px; background: rgba(5,8,17,.9); }
.profile-favorite-track img { width: 35px; height: 35px; border-radius: 8px; object-fit: cover; }.profile-favorite-track div { min-width: 0; display: grid; gap: 2px; }.profile-favorite-track strong,.profile-favorite-track span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.profile-favorite-track strong { color: var(--ink); font-size: .76rem; }.profile-favorite-track span,.profile-favorites-empty p { color: var(--muted); font-size: .68rem; font-weight: 700; }.profile-favorites-empty p { margin: 0; padding: 13px; }
.profile-featured-recordings { margin: 0 24px 24px; overflow: hidden; border: 1px solid rgba(46,216,255,.24); border-radius: 13px; background: linear-gradient(135deg, rgba(123,53,255,.1), rgba(36,200,255,.04) 55%, rgba(4,8,17,.68)); }
.profile-featured-recordings-head { display:flex; align-items:center; gap:8px; min-height:42px; padding:0 13px; border-bottom:1px solid rgba(46,216,255,.16); color:var(--ink); font-size:.72rem; font-weight:950; letter-spacing:.065em; text-transform:uppercase; }.profile-featured-recordings-head>i { color:var(--blue); }.profile-featured-recordings-head small { margin-left:auto; color:var(--blue); font-size:.7rem; }
.profile-featured-recordings-list { display:grid; gap:1px; background:rgba(46,216,255,.11); }.profile-featured-recording { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.95fr); gap:12px; align-items:center; min-height:66px; padding:11px 12px; background:rgba(5,8,17,.91); }.profile-featured-recording-title { min-width:0; display:flex; align-items:center; gap:9px; color:var(--ink); }.profile-featured-recording-title i { width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(46,216,255,.28); border-radius:9px; color:var(--blue); background:rgba(36,200,255,.08); }.profile-featured-recording-title strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; }.profile-recording-player { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; min-width:0; padding:7px 9px; border:1px solid rgba(46,216,255,.2); border-radius:13px; background:rgba(2,6,13,.68); }.profile-recording-player audio { display:none; }.profile-recording-play { width:30px; height:30px; display:grid; place-items:center; padding:0; border:1px solid rgba(46,216,255,.42); border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--violet),var(--blue)); cursor:pointer; box-shadow:0 8px 18px rgba(36,200,255,.16); }.profile-recording-play:hover { transform:translateY(-1px); border-color:rgba(226,248,255,.82); }.profile-recording-player.is-playing .profile-recording-play { box-shadow:0 0 0 5px rgba(36,200,255,.11),0 9px 22px rgba(36,200,255,.28); }.profile-recording-wave { position:relative; height:10px; min-width:0; overflow:hidden; border-radius:999px; outline:0; cursor:pointer; background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 3px,transparent 3px 8px),rgba(0,0,0,.42); }.profile-recording-wave:focus-visible { box-shadow:0 0 0 3px rgba(36,200,255,.22); }.profile-recording-buffer,.profile-recording-progress { position:absolute; inset:0 auto 0 0; width:0; border-radius:inherit; pointer-events:none; }.profile-recording-buffer { z-index:1; background:rgba(148,163,184,.28); }.profile-recording-progress { z-index:2; background:linear-gradient(90deg,var(--violet),var(--blue)); }.profile-recording-time { display:flex; gap:4px; color:var(--muted); font-size:.67rem; font-weight:850; font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width: 720px) { .history-row:has(.history-like) { grid-template-columns: 34px 44px minmax(0, 1fr) 30px; gap: 10px; }.history-row:has(.history-like) .history-like { grid-column: 4; grid-row: 1; align-self: start; }.history-row:has(.history-like) .history-dj { grid-column: 3; grid-row: 2; }.profile-favorites,.profile-featured-recordings { margin: 0 16px 16px; }.profile-favorites-list { grid-template-columns: 1fr; }.profile-featured-recording { grid-template-columns:1fr; gap:9px; } }
.route-content[aria-busy="true"] { opacity: .55; transition: opacity .16s ease; }
.route-content .page-shell { width: min(1220px, calc(100% - 48px)); padding: 36px 0 146px; }
.route-content .page-hero { padding-bottom: 24px; }
@media (max-width:720px) { .route-content .page-shell { width: min(100% - 32px, 1220px); padding-top: 24px; } }
.public-profile-page { padding-bottom: 146px; }.public-profile-back { display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;color:var(--muted);font-weight:850;text-decoration:none; }.public-profile-hero,.public-profile-bio { border:1px solid rgba(46,216,255,.22);background:linear-gradient(135deg,rgba(123,53,255,.15),rgba(36,200,255,.06),rgba(4,7,16,.8)); }.public-profile-hero{display:grid;grid-template-columns:112px minmax(0,1fr);gap:22px;align-items:center;padding:26px;border-radius:18px}.public-profile-avatar{width:112px;height:112px;display:grid;place-items:center;overflow:hidden;border:3px solid var(--blue);border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--blue));font-size:2rem}.public-profile-avatar img{width:100%;height:100%;object-fit:cover}.public-profile-hero h1{margin:8px 0;font-size:clamp(2rem,5vw,3.8rem);line-height:1}.public-profile-meta{display:flex;flex-wrap:wrap;gap:8px}.public-profile-meta span{padding:7px 10px;border:1px solid rgba(123,53,255,.25);border-radius:999px;color:var(--muted);font-size:.78rem;font-weight:800}.public-profile-meta strong{color:var(--blue)}.public-profile-manage{display:inline-flex;margin-top:15px;color:var(--ink);font-size:.78rem;font-weight:900;text-decoration:none}.public-profile-bio{margin-top:16px;padding:25px 28px;border-radius:15px;color:#d7dfed;font-weight:650;line-height:1.65}.public-profile-bio :first-child{margin-top:0}.public-profile-bio :last-child{margin-bottom:0}@media(max-width:720px){.public-profile-hero{grid-template-columns:74px minmax(0,1fr);gap:15px;padding:18px}.public-profile-avatar{width:74px;height:74px}.public-profile-bio{padding:20px}.public-profile-meta{gap:5px}}

/* Give featured recordings room to breathe inside DJ profile modals. */
.profile-featured-recordings {
  margin: 18px 24px 28px;
}

.profile-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--violet) rgba(255,255,255,.05);
}

.profile-body::-webkit-scrollbar {
  width: 8px;
}

.profile-body::-webkit-scrollbar-track {
  background: rgba(255,255,255,.04);
}

.profile-body::-webkit-scrollbar-thumb {
  border: 2px solid rgba(8, 10, 10, .96);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--violet), var(--blue));
}

.profile-body .profile-bio {
  min-height: auto;
  overflow: visible;
  padding-bottom: 0;
}

.profile-featured-recordings-list {
  gap: 8px;
  padding: 9px;
  background: transparent;
}

.profile-featured-recording {
  gap: 14px;
  min-height: 70px;
  padding: 13px;
  border: 1px solid rgba(46, 216, 255, .12);
  border-radius: 12px;
}

.live-video-panel {
  overflow: hidden;
  border-color: rgba(36, 200, 255, .32);
}

.live-video-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 17px;
  border-bottom: 1px solid rgba(36, 200, 255, .18);
  background: linear-gradient(90deg, rgba(123, 53, 255, .15), rgba(36, 200, 255, .05));
  color: var(--ink);
  font-size: .8rem;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.live-video-head > div { display: flex; align-items: center; gap: 9px; }
.live-video-head > div i { color: var(--blue); }
.live-video-head > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .66rem; }
.live-video-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; padding: 14px; }
.live-video-dj { appearance: none; width: 100%; min-width: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px; border: 1px solid rgba(36, 200, 255, .23); border-radius: 13px; background: linear-gradient(118deg, rgba(123, 53, 255, .16), rgba(7, 19, 31, .82)); color: var(--text); text-align: left; cursor: pointer; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.live-video-dj:hover, .live-video-dj:focus-visible { border-color: rgba(36, 200, 255, .7); background: linear-gradient(118deg, rgba(123, 53, 255, .28), rgba(7, 26, 42, .92)); transform: translateY(-1px); outline: none; }
.live-video-avatar { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border: 2px solid rgba(36, 200, 255, .72); border-radius: 50%; background: #0a1421; color: var(--blue); }
.live-video-avatar img { width: 100%; height: 100%; object-fit: cover; }
.live-video-copy { min-width: 0; display: grid; gap: 3px; }
.live-video-copy strong, .live-video-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-video-copy strong { font-size: .94rem; }
.live-video-copy small { color: var(--muted); font-size: .72rem; font-weight: 700; }
.live-video-watch { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; padding: 8px 10px; border-radius: 9px; background: linear-gradient(90deg, var(--purple), var(--blue)); color: #fff; font-size: .7rem; font-weight: 900; }

@media (max-width: 720px) {
  .live-video-list { grid-template-columns: 1fr; padding: 10px; }
  .live-video-dj { grid-template-columns: 42px minmax(0, 1fr) auto; padding: 9px; }
  .live-video-avatar { width: 42px; height: 42px; }
  .live-video-watch { padding: 7px 8px; font-size: .65rem; }
  .profile-featured-recordings {
    margin: 18px 16px 22px;
  }
}