:root {
      --bg: #0b1220;
      --panel: #0f1a33;
      --card: rgba(255, 255, 255, .04);
      --line: rgba(255, 255, 255, .10);
      --text: #e7ecff;
      --muted: #a9b4d6;
      --accent: #6ea8ff;
      --accent2: #9b7bff;
      --danger: #ff6ea8;
      /* Main accent color (matches modern dark UI) */
      --plyr-color-main: #6366f1;
      /* soft indigo */

      /* Player background */
      --plyr-audio-controls-background: #0f172a;
      /* dark navy */

      /* Icons */
      --plyr-audio-control-color: #cbd5f5;
      /* light muted text */
      --plyr-audio-control-color-hover: #ffffff;

      /* Progress bar */
      --plyr-range-fill-background: #6366f1;
      --plyr-range-track-background: #1e293b;

      /* Volume bar */
      --plyr-range-thumb-background: #6366f1;
    }

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: radial-gradient(1200px 600px at 20% 0%, #162a5a 0%, transparent 60%), var(--bg);
      color: var(--text);
    }

    a {
      color: inherit;
      text-decoration: none
    }

    .wrap {
      max-width: 920px;
      margin: 0 auto;
      padding: 34px 18px 80px
    }

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      letter-spacing: .2px
    }

    .logo {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 12px 30px rgba(110, 168, 255, .22)
    }

    .nav {
      display: flex;
      gap: 16px;
      color: var(--muted);
      font-weight: 600
    }

    .nav a:hover {
      color: var(--text)
    }

    .hero {
      padding: 44px 0 18px
    }

    h1 {
      font-size: 38px;
      line-height: 1.05;
      margin: 0 0 10px
    }

    .p {
      color: var(--muted);
      font-size: 16px;
      line-height: 1.6;
      margin: 0
    }

    .kicker {
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 18px;
      backdrop-filter: blur(8px)
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 14px
    }

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

    input,
    textarea {
      width: 100%;
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      outline: none;
      font-size: 14px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .03);
      color: var(--text);
      font-weight: 700;
      cursor: pointer;
      user-select: none;
      transition: transform .05s ease;
      white-space: nowrap;
    }

    .btn:hover {
      transform: translateY(-1px)
    }

    .btn.primary {
      border: 0;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #071022
    }

    .btn.danger {
      border: 0;
      background: linear-gradient(135deg, var(--danger), #ffb36e);
      color: #071022
    }

    .small {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5
    }

    .track {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 18px;
      padding: 18px;
    }

    .trackTitle {
      font-weight: 800;
      font-size: 16px;
      margin: 0 0 8px
    }

    .meta {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 10px
    }

    audio {
      width: 100%;
      margin-top: 8px
    }

    .pill {
      font-size: 13px;
      color: var(--muted)
    }

    .notice {
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(255, 255, 255, .03)
    }

    .divider {
      height: 1px;
      background: rgba(255, 255, 255, .08);
      margin: 18px 0
    }

    .plyr {
      border-radius: 14px;
    }

    .plyr {
      border-radius: 14px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      margin-top: 6px;
    }

    /* Make controls blend into your cards */
    .plyr__controls {
      background: linear-gradient(135deg, #0f172a, #020617) !important;
      border-radius: 14px;
    }

    /* Progress bar height */
    .plyr__progress input[type=range] {
      height: 6px;
    }

    /* Hover glow */
    .plyr__control:hover {
      background-color: rgba(99, 102, 241, 0.15) !important;
    }

    /* Time text */
    .plyr__time {
      color: #cbd5f5;
      font-size: 0.85rem;
    }

    /* Volume slider */
    .plyr__volume input[type=range] {
      color: #6366f1;
    }

    /* ===== SoundCloud-ish sticky player ===== */
    .nowPlaying {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 14px;
      background: rgba(8, 12, 18, 0.92);
      backdrop-filter: blur(10px);
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nowPlaying.hidden {
      display: none;
    }

    .npBtn {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: #ff5500;
      /* SoundCloud orange */
      color: #0b0f16;
      font-weight: 800;
      cursor: pointer;
    }

    .npBtn:hover {
      filter: brightness(1.05);
    }

    .npInfo {
      flex: 1;
      min-width: 0;
    }

    .npTitle {
      font-weight: 600;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.92);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 6px;
    }

    .npWave {
      height: 46px;
      border-radius: 10px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.03);
    }

    .npMeta {
      margin-top: 6px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.6);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .npDot {
      opacity: 0.6;
    }

    .npLink {
      color: rgba(255, 255, 255, 0.75);
      text-decoration: none;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.10);
    }

    .npLink:hover {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.18);
    }

    /* Add bottom space so last track isn't hidden behind sticky bar */
    body {
      padding-bottom: 86px;
    }

    /* Optional: make each track card look nicer */
    .track {
      padding: 14px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      margin-bottom: 12px;
    }

    .trackRow {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .playMini {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 85, 0, 0.14);
      color: #ff5500;
      font-weight: 900;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .playMini:hover {
      background: rgba(255, 85, 0, 0.20);
    }

    .trackMain {
      flex: 1;
      min-width: 0;
    }

    .trackBar {
      height: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      overflow: hidden;
      margin-top: 8px;
      cursor: pointer;
      touch-action: none;
    }

    .trackBarFill {
      width: 0%;
      height: 100%;
      background: #ff5500;
      border-radius: 999px;
    }

    .trackMetaRow {
      margin-top: 8px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.62);
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .trackDot {
      opacity: 0.6;
    }

    .titleEdit { flex: 1; min-width: 220px; }

    /* Prevent the page from hijacking horizontal swipes on the waveform */
    #nowPlaying,
    #waveform,
    #waveform * {
      touch-action: none;
      -webkit-user-select: none;
      user-select: none;
    }

    /* Optional: reduce “scroll bounce” interference */
    #nowPlaying {
      overscroll-behavior: contain;
    }

    @media (max-width: 720px) {
      h1 {
        font-size: 32px
      }
    }