:root {
      --bg: #ffffff;
      --fg: #000000;
      --muted: #666666;
      --text-subtle: #333333;
      --text-faint: #333333;
      --pill-fg: #000000;
      --text-drag: #444444;
      --toast-fg: #000000;

      --border: #000000;
      --border2: rgba(0, 0, 0, .25);
      --hover: rgba(0, 0, 0, .04);
      --pill: transparent;
      --danger: #c00000;

      --header-bg: #ffffff;
      --overlay-bg: #ffffff;
      --panel-bg: #ffffff;
      --card-bg: transparent;
      --panel-strong-bg: #ffffff;
      --panel-shadow: transparent;
      --log-bg: #ffffff;
      --toast-bg: #ffffff;
      --thumb-bg: #ffffff;
      --cover-btn-bg: #ffffff;
      --cover-indicator-bg: #ffffff;

      --drop-border: #000000;
      --drop-shadow: transparent;
      --drop-outline: #000000;
      --drop-hint-bg: rgba(0, 0, 0, .04);
      --drop-marker-bg: #000000;
      --btn-bg: #000000;
      --btn-fg: #ffffff;
      --btn-border: #000000;
      --btn-disabled-bg: #111111;
      --btn-disabled-fg: #999999;
      --btn-disabled-border: #111111;
      --btn-ghost-bg: #ffffff;
      --btn-ghost-fg: #111111;
      --btn-ghost-border: #000000;
      --btn-danger-bg: #c00000;
      --btn-danger-fg: #ffffff;
      --btn-danger-border: #c00000;

      --gap: 16px;
      --radius: 12px;
      --mono: Helvetica, Arial, sans-serif;
      --size: 12px;
      --sidebar-width: 240px;
      --cover-panel-size: 220px;
      --footer-buffer: 140px;
      --footer-bg: #000000;
      --footer-fg: #ffffff;
      --footer-muted: rgba(255, 255, 255, .7);
      --footer-border: rgba(255, 255, 255, .2);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #111111;
        --fg: #c9c7b3;
        --muted: #c9c7b3;
        --text-subtle: #c9c7b3;
        --text-faint: #c9c7b3;
        --pill-fg: #c9c7b3;
        --text-drag: #c9c7b3;
        --toast-fg: #c9c7b3;

        --border: #c9c7b3;
        --border2: rgba(201, 199, 179, .3);
        --hover: rgba(201, 199, 179, .08);
        --pill: #1a1819;
        --danger: #c00000;

        --header-bg: #111111;
        --overlay-bg: #111111;
        --panel-bg: #1a1819;
        --card-bg: #1a1819;
        --panel-strong-bg: #1a1819;
        --panel-shadow: transparent;
        --log-bg: #1a1819;
        --toast-bg: #1a1819;
        --thumb-bg: #1a1819;
        --cover-btn-bg: #1a1819;
        --cover-indicator-bg: #1a1819;

        --drop-border: #c9c7b3;
        --drop-shadow: rgba(201, 199, 179, .2);
        --drop-outline: #c9c7b3;
        --drop-hint-bg: rgba(26, 24, 25, .8);
        --drop-marker-bg: #c9c7b3;
        --btn-bg: #c9c7b3;
        --btn-fg: #111111;
        --btn-border: #c9c7b3;
        --btn-disabled-bg: #1a1819;
        --btn-disabled-fg: #c9c7b3;
        --btn-disabled-border: #1a1819;
        --btn-ghost-bg: transparent;
        --btn-ghost-fg: #c9c7b3;
        --btn-ghost-border: #c9c7b3;
        --btn-danger-bg: #c00000;
        --btn-danger-fg: #ffffff;
        --btn-danger-border: #c00000;

        --footer-bg: #111111;
        --footer-fg: #ffffff;
        --footer-muted: rgba(255, 255, 255, .7);
        --footer-border: rgba(255, 255, 255, .2);
      }

      .remote-action-scramble {
        background: #1a1819;
        color: #c9c7b3;
        border-color: #c9c7b3;
      }
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--fg);
      font-family: var(--mono);
      font-size: var(--size);
      line-height: 1.45;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--header-bg);
      backdrop-filter: none;
      border-bottom: 1px solid var(--border);
    }

    header .wrap {
      max-width: none;
    }

    .wrap {
      max-width: 1100px;
      margin: 0 auto;
      padding: 14px var(--gap);
    }

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

    h1 {
      margin: 0;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: .2px;
    }

    .brand-link {
      color: inherit;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 12px;
      font-weight: 400;
    }

    .header-link {
      color: inherit;
      text-decoration: underline;
    }

    .auth-back-link {
      display: inline-block;
      margin-bottom: 8px;
      color: inherit;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      font-size: 10px;
      opacity: 0.84;
      transition: opacity 120ms ease;
    }

    .auth-back-link:hover {
      opacity: 1;
    }

    .header-link:hover {
      opacity: .7;
    }

    .dashboard-back-wrap {
      padding-top: 10px;
      padding-bottom: 0;
    }

    .dashboard-back {
      display: inline-block;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      font-size: 11px;
      line-height: 1;
      color: inherit;
      opacity: 0.84;
      transition: opacity 120ms ease;
    }

    .dashboard-back:hover {
      opacity: 1;
    }

    .admin-nav-links {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .pill {
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--pill);
      color: var(--pill-fg);
      white-space: nowrap;
    }

    .key-gate {
      position: fixed;
      inset: 0;
      background: var(--overlay-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 50;
    }

    .key-gate[aria-hidden="true"] {
      display: none;
    }

    .key-gate-card {
      width: min(420px, 92vw);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px;
      background: var(--panel-bg);
      box-shadow: 0 12px 32px var(--panel-shadow);
    }

    .cover-crop-card {
      width: min(460px, 92vw);
      display: grid;
      gap: 10px;
    }
    .cover-crop-stage {
      position: relative;
      width: min(360px, 72vw);
      aspect-ratio: 1 / 1;
      border-radius: 12px;
      border: 1px solid var(--border2);
      background: var(--thumb-bg);
      overflow: hidden;
      margin: 0 auto;
      touch-action: none;
    }
    .cover-crop-stage img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform-origin: center;
      max-width: none;
      user-select: none;
      pointer-events: none;
      will-change: transform;
    }
    .cover-crop-controls {
      display: grid;
      gap: 6px;
      font-size: 11px;
    }

    .key-gate-card h2 {
      margin: 0 0 8px;
      font-size: 13px;
      font-weight: 500;
    }

    .text-link {
      margin-top: 10px;
      font: inherit;
      color: inherit;
      background: transparent;
      border: 0;
      padding: 0;
      text-decoration: underline;
      cursor: pointer;
    }

    .help-steps {
      margin: 10px 0 0;
      padding-left: 18px;
    }

    .help-steps li {
      margin: 4px 0;
    }

    .help-card {
      width: min(840px, 94vw);
      max-height: min(86vh, 860px);
      overflow: auto;
    }

    .help-sections {
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .help-section {
      border: 1px solid var(--border2);
      border-radius: 10px;
      padding: 10px;
      background: var(--panel-strong-bg);
      min-width: 0;
    }

    .help-section h3 {
      margin: 0 0 6px;
      font-size: 11px;
      font-weight: 600;
    }

    .help-section p {
      margin: 0;
      color: var(--text-subtle);
      line-height: 1.35;
    }

    .help-section p + p {
      margin-top: 5px;
    }

    .publish-gate {
      position: fixed;
      inset: 0;
      background: var(--overlay-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 60;
    }

    .publish-gate[aria-hidden="true"] {
      display: none;
    }

    .publish-gate-card {
      width: min(520px, 92vw);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px;
      background: var(--panel-bg);
      box-shadow: 0 12px 32px var(--panel-shadow);
    }

    .publish-gate-card h2 {
      margin: 0;
      font-size: 13px;
      font-weight: 500;
    }

    .publish-spinner {
      width: 12px;
      height: 12px;
      border: 2px solid var(--border);
      border-top-color: transparent;
      border-radius: 999px;
      opacity: 0;
    }

    .publish-gate.is-busy .publish-spinner {
      opacity: 0.8;
      animation: publish-spin 0.9s linear infinite;
    }

    .publish-log {
      margin: 10px 0 0;
      padding: 10px;
      border: 1px solid var(--border2);
      border-radius: 8px;
      min-height: 160px;
      max-height: 320px;
      overflow: auto;
      background: var(--log-bg);
      font-family: var(--mono);
      font-size: 11px;
      white-space: pre-wrap;
    }

    .publish-gate.is-busy .publish-log::after {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-left: 6px;
      border-radius: 999px;
      background: var(--fg);
      animation: publish-blink 1s steps(2, end) infinite;
    }

    @keyframes publish-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes publish-blink {
      0%, 49% { opacity: 0; }
      50%, 100% { opacity: 1; }
    }

    .now-cover {
      position: relative;
      width: 100%;
      max-width: 320px;
      margin-bottom: 10px;
    }

    .now-cover img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 10px;
      border: 1px solid var(--border2);
    }

    .cover-remove {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1px solid var(--border2);
      background: var(--cover-btn-bg);
      text-decoration: none;
      font-weight: 600;
      line-height: 22px;
      text-align: center;
    }

    .cover-indicator {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      border: 1px solid var(--border2);
      background: var(--cover-indicator-bg);
      text-decoration: none;
      font-weight: 600;
      line-height: 18px;
      text-align: center;
      padding: 0;
    }

    /* DARK MODE DISABLED (kept for later) */
    /* @media (prefers-color-scheme: dark) {
      :root {
        --bg: #000000;
        --fg: #F1EFD2;
        --muted: #A7A7A7;
        --text-subtle: #A7A7A7;
        --text-faint: #A7A7A7;
        --pill-fg: #A7A7A7;
        --text-drag: #A7A7A7;
        --toast-fg: #F1EFD2;

        --border: #3E261C;
        --border2: #3E261C;
        --hover: #291F1C;
        --pill: #291F1C;
        --danger: #9F0000;

        --header-bg: #291F1C;
        --overlay-bg: rgba(0, 0, 0, .92);
        --panel-bg: #291F1C;
        --card-bg: #291F1C;
        --panel-strong-bg: #291F1C;
        --panel-shadow: rgba(0, 0, 0, .45);
        --log-bg: #291F1C;
        --toast-bg: #291F1C;
        --thumb-bg: #291F1C;
        --cover-btn-bg: #291F1C;
        --cover-indicator-bg: #291F1C;

        --drop-border: #3E261C;
        --drop-shadow: rgba(62, 38, 28, .45);
        --drop-outline: #3E261C;
        --drop-hint-bg: #291F1C;
        --drop-marker-bg: #3E261C;
      }
    } */

    button {
      font: inherit;
      color: inherit;
      background: transparent;
      border: 0;
      padding: 0;
      text-decoration: underline;
      cursor: pointer;
    }

    button:hover {
      opacity: .7;
    }

    button:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    main .wrap {
      padding: var(--gap);
    }

    .grid {
      display: grid;
      gap: var(--gap);
    }

    @media (min-width: 901px) {
      .grid {
        grid-template-columns: var(--sidebar-width) 1fr;
      }

      .admin-panel {
        position: sticky;
        top: 70px;
        align-self: start;
      }
    }

    @media (max-width: 900px) {
      .grid {
        grid-template-columns: 1fr;
      }

      .help-sections {
        grid-template-columns: 1fr;
      }
    }

    body[data-transfer-view="dashboard"] #playlists {
      display: none;
    }

    body[data-transfer-view="editor"] .grid {
      grid-template-columns: 1fr;
    }

    body[data-transfer-view="editor"] .admin-panel {
      display: none;
    }

    body[data-transfer-view="editor"] .remote-section {
      display: none;
    }

    body[data-transfer-view="editor"] #dashboardPrimaryActions {
      display: none;
    }

    body[data-pool-guest-mode="true"] .dashboard-back-wrap,
    body[data-pool-guest-mode="true"] #helpBtn,
    body[data-pool-guest-mode="true"] .header-link,
    body[data-pool-guest-mode="true"] #logoutBtn,
    body[data-pool-guest-mode="true"] #wipeBtn,
    body[data-pool-guest-mode="true"] #adminNavLinks {
      display: none !important;
    }

    .card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--card-bg);
      overflow: hidden;
    }

    .card h2 {
      margin: 0;
      padding: 12px 12px 10px;
      font-size: 12px;
      font-weight: 400;
      color: var(--text-subtle);
      border-bottom: 1px solid var(--border2);
    }

    .remote-section {
      margin-top: 18px;
      padding-top: 12px;
      border-top: 0;
    }

    .pool-section {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border2);
    }

    .dashboard-primary-actions {
      display: grid;
      gap: 10px;
      margin-bottom: 12px;
    }

    .remote-list {
      margin-top: 8px;
      display: grid;
      gap: 8px;
    }

    .remote-item {
      border: 1px solid var(--border2);
      border-radius: 10px;
      padding: 8px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 190px;
      gap: 10px;
      align-items: stretch;
    }

    .remote-left {
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 6px;
      min-width: 0;
      height: 100%;
    }

    .remote-actions {
      margin-top: 0;
    }

    .remote-right {
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      align-self: stretch;
    }

    .remote-title {
      font-weight: 700;
      font-size: 12px;
    }

    .remote-meta {
      color: var(--text-subtle);
      font-size: 11px;
    }

    .remote-preview {
      font-size: 11px;
      color: var(--text-subtle);
      align-self: stretch;
    }

    .remote-preview-cover {
      width: 178px;
      height: 178px;
      border: 1px solid var(--border2);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      color: var(--text-faint);
      background: var(--panel-bg);
      overflow: hidden;
    }

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

    .remote-preview-tracks {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 14px;
      font-size: 11px;
      color: var(--fg);
    }

    .remote-preview-tracks > div,
    .remote-preview-tracks > a {
      height: 20px;
      line-height: 18px;
      padding: 0;
      border-bottom: 1px solid var(--border2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 1.2em;
    }

    .remote-preview-tracks > a {
      color: var(--fg);
      text-decoration: none;
      transition: background-color 120ms ease, color 120ms ease;
    }

    .remote-preview-tracks > a:hover {
      background: var(--hover);
    }

    .remote-preview-tracks > a:focus-visible {
      outline: 1px solid var(--fg);
      outline-offset: 1px;
      border-radius: 2px;
    }

    .remote-preview-tracks > div.is-placeholder {
      color: var(--text-faint);
    }

    @media (max-width: 700px) {
      .remote-item {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .remote-right {
        order: 1;
        width: 100%;
        justify-content: stretch;
      }

      .remote-preview-cover {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
      }

      .remote-left {
        order: 2;
      }

      .remote-preview-tracks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .remote-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        align-items: stretch;
      }

      .remote-actions .publish-btn {
        display: inline-flex;
        align-items: center;
        width: 100%;
        text-align: center;
        justify-content: center;
      }

      .remote-actions .remote-action-scramble {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font: inherit;
        padding: 6px 12px;
        border-radius: 999px;
        border: 1px solid var(--fg);
        background: #ffffff;
        color: #111111;
        cursor: pointer;
      }

      .remote-action-copy {
        grid-column: 1;
        grid-row: 1;
      }

      .remote-action-open {
        grid-column: 2;
        grid-row: 1;
      }

      .remote-action-edit {
        grid-column: 3;
        grid-row: 1;
      }

      .remote-action-delete {
        grid-column: 1;
        grid-row: 2;
      }

      .remote-action-scramble {
        grid-column: 2 / 4;
        grid-row: 2;
      }

    }

    .file-input {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      opacity: 0;
    }

    .plist.file-drop {
      border-color: var(--drop-border);
      box-shadow: 0 0 0 2px var(--drop-shadow);
    }

    .card .body {
      padding: 12px;
    }

    label {
      display: block;
      margin: 10px 0 6px;
      color: var(--text-subtle);
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    select,
    textarea {
      width: 100%;
      padding: 9px 10px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: transparent;
      color: inherit;
      outline: none;
      font-family: inherit;
      font-size: inherit;
    }

    input[type="file"] {
      width: 100%;
      padding: 9px 10px;
      border-radius: 10px;
      border: 1px dashed var(--border);
      background: transparent;
      color: var(--text-subtle);
      font-family: inherit;
      font-size: inherit;
    }

    .muted {
      color: var(--muted);
    }

    .hr {
      border: 0;
      border-top: 1px solid var(--border2);
      margin: 12px 0;
    }

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

    .playlist-type-group {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      align-items: center;
    }

    .playlist-type-label {
      color: var(--text-subtle);
      font-size: 11px;
      min-width: 28px;
    }

    .playlist-type-option {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      padding: 5px 10px;
      border: 1px solid var(--border2);
      border-radius: 999px;
      background: var(--panel-bg);
      color: var(--fg);
      font-size: 11px;
      cursor: pointer;
      user-select: none;
    }

    .playlist-type-option input[type="checkbox"] {
      margin: 0;
    }

    .playlist-type-group .pill-button {
      margin-top: 2px;
    }

    .playlist-type-tabs {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid var(--border2);
      border-radius: 999px;
      background: var(--panel-bg);
      padding: 3px;
    }

    .playlist-type-tab {
      display: inline-flex;
      margin: 0;
      cursor: pointer;
    }

    .playlist-type-tab input[type="radio"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .playlist-type-tab span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 92px;
      padding: 5px 10px;
      border-radius: 999px;
      color: var(--text-subtle);
      font-size: 11px;
      line-height: 1.2;
      transition: background-color 140ms ease, color 140ms ease;
      user-select: none;
    }

    .playlist-type-tab input[type="radio"]:checked + span {
      background: #a7aaa6;
      color: var(--fg);
      font-weight: 600;
    }

    .playlist-type-tab input[type="radio"]:focus-visible + span {
      outline: 1px solid var(--fg);
      outline-offset: 1px;
    }

    .inline-actions a,
    .inline-actions button {
      text-decoration: none;
    }

    .publish-btn.publish-btn--ghost {
      background: var(--btn-ghost-bg);
      color: var(--btn-ghost-fg);
      border-color: var(--btn-ghost-border);
    }

    .publish-btn.publish-btn--danger {
      background: var(--btn-danger-bg);
      border-color: var(--btn-danger-border);
      color: var(--btn-danger-fg);
    }

    .auto-drop {
      margin-top: 10px;
      padding: 12px;
      border: 1px dashed var(--border2);
      border-radius: 12px;
      font-size: 11px;
      color: var(--text-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      cursor: default;
      background: var(--panel-bg);
    }

    .auto-drop.is-dragover {
      border-color: var(--fg);
      color: var(--fg);
    }

    .publish-btn,
    .primary-btn {
      text-decoration: none;
      padding: 6px 12px;
      border-radius: 250px;
      border: 1px solid var(--btn-border);
      background: var(--btn-bg);
      color: var(--btn-fg);
    }

    .primary-btn {
      font-weight: 700;
      letter-spacing: 0.02em;
      box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
      transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
    }

    .primary-btn:hover:not(:disabled) {
      transform: translateY(-1px) scale(1.03);
      box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
      filter: saturate(1.08);
    }

    .primary-btn:active:not(:disabled) {
      transform: translateY(0) scale(1);
      box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
    }

    .publish-btn:disabled,
    .primary-btn:disabled {
      background: var(--btn-disabled-bg);
      color: var(--btn-disabled-fg);
      border-color: var(--btn-disabled-border);
      opacity: 0.7;
      cursor: not-allowed;
    }

    .quota-meter {
      margin-top: 12px;
      display: grid;
      gap: 6px;
    }
    .quota-label {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 11px;
      color: var(--text-subtle);
    }
    .quota-bar {
      height: 4px;
      border-radius: 999px;
      background: var(--border2);
      overflow: hidden;
    }
    .quota-fill {
      height: 100%;
      width: 0%;
      background: var(--fg);
      transition: width 180ms ease;
    }
    .quota-meter.is-over .quota-fill {
      background: var(--danger);
    }
    .quota-hint {
      font-size: 11px;
    }

    .mini-pill {
      padding: 4px 8px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--pill);
      color: var(--text-faint);
      font-size: 11px;
      white-space: nowrap;
    }

    .mini-pill--status {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
    }

    #sessionStatusPill {
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .playlists {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .plist {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--panel-strong-bg);
    }

    @media (min-width: 901px) {
      .plist {
        display: grid;
        grid-template-columns: calc(var(--cover-panel-size) + 24px) 1fr;
      }
    }

    .plist-head {
      padding: 10px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid var(--border2);
    }

    .plist-editor {
      min-width: 0;
    }

    .plist-meta {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) 160px;
      gap: 12px;
      padding: 10px;
      border-bottom: 1px solid var(--border2);
      background: var(--panel-bg);
      align-items: end;
    }

    .plist-meta label {
      margin: 0 0 6px;
      font-size: 11px;
      color: var(--text-subtle);
    }

    .plist-meta-field input[type="text"] {
      margin: 0;
    }

    .plist-meta-toggle {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: flex-start;
      align-self: end;
    }

    .plist-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--panel-strong-bg);
      font-size: 11px;
      white-space: nowrap;
    }

    .plist-toggle input[type="checkbox"] {
      flex-shrink: 0;
    }

    .plist-comment {
      padding: 10px;
      border-bottom: 1px solid var(--border2);
      background: var(--panel-bg);
      display: grid;
      gap: 8px;
    }

    .plist-comment-toggle {
      font: inherit;
      border: 0;
      background: transparent;
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      text-align: left;
    }

    .plist-comment-toggle:hover {
      opacity: 0.75;
    }

    .plist-comment-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.18s ease;
    }

    .plist-comment.is-open .plist-comment-arrow {
      transform: rotate(90deg);
    }

    .plist-comment-body {
      display: grid;
      gap: 8px;
    }

    .plist-comment-body[hidden] {
      display: none;
    }

    .plist-comment label {
      margin: 0;
      font-size: 11px;
      color: var(--text-subtle);
    }

    .plist-comment textarea {
      resize: vertical;
      min-height: 70px;
    }

    .plist-doc-row {
      display: grid;
      gap: 6px;
    }

    .plist-doc-label {
      font-size: 11px;
      color: var(--text-subtle);
    }

    .plist-doc-status {
      font-size: 11px;
      color: var(--fg);
    }

    .plist-doc-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: baseline;
      font-size: 12px;
    }

    .plist-doc-actions button {
      font: inherit;
      background: transparent;
      border: 0;
      padding: 0;
      text-decoration: underline;
      cursor: pointer;
    }

    .plist-doc-actions button[disabled] {
      opacity: 0.4;
      cursor: default;
    }

    @media (max-width: 900px) {
      .plist-meta {
        grid-template-columns: 1fr;
      }
    }

    .plist-title {
      font-weight: 400;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .plist-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
      white-space: nowrap;
    }

    .plist-actions button:not(.publish-btn) {
      font: inherit;
      background: transparent;
      border: 0;
      padding: 0;
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.15s ease, opacity 0.15s ease;
    }

    .plist-actions button:not(.publish-btn):hover {
      opacity: 0.7;
      transform: translateY(-1px);
    }

    .playlists-panel .body {
      padding-bottom: var(--footer-buffer);
    }

    .plist-add-tracks {
      font: inherit;
      border: 1px dashed var(--border);
      background: var(--panel-bg);
      color: var(--fg);
      width: calc(100% - 20px);
      margin: 10px 10px 0;
      border-radius: 12px;
      padding: 10px 12px;
      display: grid;
      gap: 3px;
      text-align: left;
      cursor: pointer;
      transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
    }

    .plist-add-tracks-title {
      font-size: 12px;
    }

    .plist-add-tracks-sub {
      font-size: 11px;
      color: var(--text-subtle);
    }

    .plist-add-tracks:hover,
    .plist-add-tracks:focus-visible,
    .plist-add-tracks.is-drop {
      border-color: var(--drop-border);
      box-shadow: 0 0 0 2px var(--drop-shadow);
      background: var(--panel-strong-bg);
      transform: translateY(-1px);
      outline: none;
    }

    .tracklist {
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 44px;
    }

    .plist-cover-panel {
      position: relative;
      padding: 10px;
      border-bottom: 1px solid var(--border2);
      background: var(--panel-bg);
      min-height: var(--cover-panel-size);
      display: grid;
      align-content: start;
    }

    .plist-cover-inner {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 12px;
      border: 1px solid var(--border2);
      background: var(--thumb-bg);
      display: grid;
      place-items: center;
      overflow: hidden;
      box-sizing: border-box;
      align-self: start;
      justify-self: start;
    }
    .plist-cover-inner.is-empty {
      cursor: pointer;
    }
    .plist-cover-inner.is-drop {
      border-color: var(--drop-border);
      box-shadow: 0 0 0 2px var(--drop-shadow);
    }

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

    .plist-cover-empty {
      color: var(--muted);
      font-size: 11px;
    }
    .plist-cover-actions {
      position: static;
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: flex-end;
      font-size: 11px;
      margin-top: 8px;
    }
    .plist-cover-action {
      font: inherit;
      color: var(--danger);
      background: transparent;
      border: 0;
      padding: 0;
      text-decoration: none;
      cursor: pointer;
      text-transform: lowercase;
    }
    .plist-cover-action:hover {
      opacity: .8;
    }

    @media (min-width: 901px) {
      .plist-cover-panel {
        border-bottom: 0;
        border-right: 1px solid var(--border2);
      }

      .plist-cover-inner {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
      }
    }

    .track {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border-radius: 10px;
      border: 1px solid var(--border2);
      background: transparent;
      user-select: none;
    }

    .track:hover {
      background: var(--hover);
    }

    .drag-handle {
      width: 20px;
      height: 20px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      border: 1px solid var(--border);
      color: var(--text-drag);
      flex: 0 0 auto;
      cursor: grab;
    }

    .track.dragging {
      opacity: .5;
    }

    .track-meta {
      flex: 1 1 auto;
      min-width: 0;
    }

    .track-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .track-sub {
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .track-actions {
      display: flex;
      gap: 10px;
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .danger {
      color: var(--danger);
    }

    .drop-hint {
      outline: 1px dashed var(--drop-outline);
      outline-offset: 3px;
      background: var(--drop-hint-bg);
    }

    .drop-marker {
      height: 6px;
      border-radius: 999px;
      background: var(--drop-marker-bg);
      margin: -2px 0;
    }

    .now {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px;
      background: var(--panel-strong-bg);
    }

    .now .title {
      font-style: italic;
      margin-bottom: 4px;
    }

    .now .info {
      color: var(--muted);
      font-size: 11px;
    }

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

    .footer-player {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      width: min(980px, calc(100% - 48px));
      display: grid;
      grid-template-columns: 1fr auto auto;
      grid-template-rows: auto auto;
      gap: 6px 12px;
      padding: 8px 12px;
      border-radius: 16px;
      border: 1px solid var(--footer-border);
      background: var(--footer-bg);
      color: var(--footer-fg);
      box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
      z-index: 15;
    }

    .footer-player[aria-hidden="true"] {
      display: none;
    }

    .footer-player .title {
      font-style: italic;
      margin-bottom: 2px;
    }

    .footer-player .info {
      color: var(--footer-muted);
      font-size: 11px;
    }

    .footer-meta {
      min-width: 0;
    }

    .footer-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
    }

    .footer-cover {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--footer-border);
      background: rgba(255, 255, 255, .08);
      justify-self: end;
      align-self: center;
      display: none;
    }

    .footer-cover[aria-hidden="false"] {
      display: block;
    }

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

    .footer-actions button {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 0;
      padding: 0;
      text-decoration: none;
      background: transparent;
      box-shadow: none;
      color: var(--footer-fg);
      -webkit-appearance: none;
      appearance: none;
    }

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

    .footer-actions .icon {
      display: block;
      width: 20px;
      height: 20px;
      background: currentColor;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }

    .footer-actions .icon-prev {
      -webkit-mask-image: url("/apps/web/public/assets/prev-icon.svg");
      mask-image: url("/apps/web/public/assets/prev-icon.svg");
    }

    .footer-actions .icon-next {
      -webkit-mask-image: url("/apps/web/public/assets/next-icon.svg");
      mask-image: url("/apps/web/public/assets/next-icon.svg");
    }

    .footer-actions .icon-play {
      position: relative;
      width: 18px;
      height: 18px;
      background: transparent;
      -webkit-mask-image: none;
      mask-image: none;
    }

    .footer-actions .icon-play::before,
    .footer-actions .icon-play::after {
      content: "";
      position: absolute;
      inset: 0;
      transition: opacity 120ms ease;
    }

    .footer-actions .icon-play::before {
      width: 0;
      height: 0;
      margin: auto;
      border-left: 12px solid currentColor;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      transform: translateX(1px);
    }

    .footer-actions .icon-play::after {
      opacity: 0;
      width: 12px;
      height: 14px;
      margin: auto;
      background:
        linear-gradient(to right,
          currentColor 0 4px,
          transparent 4px 8px,
          currentColor 8px 12px);
    }

    .footer-actions #playToggleBtn.is-playing .icon-play::before {
      opacity: 0;
    }

    .footer-actions #playToggleBtn.is-playing .icon-play::after {
      opacity: 1;
    }

    .footer-wave {
      grid-column: 1 / -1;
      position: relative;
      height: 24px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .08);
      overflow: hidden;
    }

    .footer-wave img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .8;
      pointer-events: none;
    }

    .footer-wave input[type="range"] {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      background: transparent;
      appearance: none;
      cursor: pointer;
    }

    .footer-wave input[type="range"]::-webkit-slider-runnable-track {
      background: transparent;
    }

    .footer-wave input[type="range"]::-webkit-slider-thumb {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #ffffff;
      border: 0;
      appearance: none;
    }

    .footer-wave input[type="range"]::-moz-range-track {
      background: transparent;
    }

    .footer-wave input[type="range"]::-moz-range-thumb {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #ffffff;
      border: 0;
    }

    .footer-player audio {
      display: none;
    }

    @media (max-width: 900px) {
      .footer-player {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 10px;
        background: var(--panel-strong-bg);
        color: var(--fg);
        border: 1px solid var(--border);
        box-shadow: none;
      }

      .footer-actions button {
        color: inherit;
        width: 34px;
        height: 34px;
      }

      .footer-actions #prevBtn,
      .footer-actions #nextBtn,
      .footer-actions #playToggleBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .footer-wave {
        display: none;
      }

      .footer-cover {
        display: none !important;
      }

      .footer-player audio {
        display: block;
        width: 100%;
        margin-top: 8px;
      }
    }

    .toast {
      margin-top: 10px;
      border: 1px solid var(--border);
      background: var(--toast-bg);
      padding: 10px 10px;
      border-radius: 10px;
      display: none;
      white-space: pre-wrap;
      color: var(--toast-fg);
    }

    .toast.show {
      display: block;
    }

    .toast.toast-floating {
      position: fixed;
      right: var(--gap);
      bottom: var(--gap);
      width: min(460px, calc(100vw - (2 * var(--gap))));
      z-index: 80;
      box-shadow: 0 8px 20px var(--panel-shadow);
      pointer-events: none;
    }

    .thumb {
      width: 100%;
      border: 1px solid var(--border2);
      border-radius: 10px;
      overflow: hidden;
      background: var(--thumb-bg);
    }

    .thumb img {
      width: 100%;
      display: block;
      max-height: 180px;
      object-fit: cover;
    }

    .remote-action-copy,
    .remote-action-open,
    .remote-action-edit,
    .remote-action-delete {
      transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .remote-action-copy .icon,
    .remote-action-open .icon,
    .remote-action-edit .icon,
    .remote-action-delete .icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 6px;
      vertical-align: middle;
      background: currentColor;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }

    .icon-copy {
      -webkit-mask-image: url("/apps/web/public/assets/copy-icon.svg");
      mask-image: url("/apps/web/public/assets/copy-icon.svg");
    }

    .icon-open {
      -webkit-mask-image: url("/apps/web/public/assets/open-icon.svg");
      mask-image: url("/apps/web/public/assets/open-icon.svg");
    }

    .icon-edit {
      -webkit-mask-image: url("/apps/web/public/assets/edit-icon.svg");
      mask-image: url("/apps/web/public/assets/edit-icon.svg");
    }

    .icon-delete {
      -webkit-mask-image: url("/apps/web/public/assets/delete-icon.svg");
      mask-image: url("/apps/web/public/assets/delete-icon.svg");
    }

    .btn-label {
      display: inline-block;
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease;
      white-space: nowrap;
      letter-spacing: 0.05em;
      vertical-align: middle;
    }

    button:hover .btn-label,
    button:focus-visible .btn-label {
      max-width: 200px;
      opacity: 1;
    }

    .track-actions button {
      transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .track-actions .icon {
      display: inline-block;
      width: 14px;
      height: 14px;
      margin-right: 4px;
      vertical-align: middle;
      background: currentColor;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }

    .icon-play {
      -webkit-mask-image: url("/apps/web/public/assets/play-icon.svg");
      mask-image: url("/apps/web/public/assets/play-icon.svg");
    }

    .icon-comment {
      -webkit-mask-image: url("/apps/web/public/assets/comment-icon.svg");
      mask-image: url("/apps/web/public/assets/comment-icon.svg");
    }

    .icon-remove {
      -webkit-mask-image: url("/apps/web/public/assets/remove-icon.svg");
      mask-image: url("/apps/web/public/assets/remove-icon.svg");
    }

    #addPlaylistBtn,
    #playlistCreateBtn {
      transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    #addPlaylistBtn .icon,
    #playlistCreateBtn .icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 6px;
      vertical-align: middle;
      background: currentColor;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }

    .icon-plus {
      -webkit-mask-image: url("/apps/web/public/assets/plus-icon.svg");
      mask-image: url("/apps/web/public/assets/plus-icon.svg");
    }

    .remote-action-scramble {
      transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .remote-action-scramble .icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 6px;
      vertical-align: middle;
      background: currentColor;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }

    .icon-dice {
      -webkit-mask-image: url("/apps/web/public/assets/dice-icon.svg");
      mask-image: url("/apps/web/public/assets/dice-icon.svg");
    }

    /* ═══════════════════════════════════════════
       Subscribe Modal (multi-step billing flow)
       ═══════════════════════════════════════════ */

    /* Wider card than standard .key-gate-card */
    .subscribe-modal-card {
      position: relative;
      z-index: 1;
      width: min(540px, 94vw);
      max-height: min(90vh, 860px);
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      background: var(--panel-bg);
      box-shadow: 0 12px 32px var(--panel-shadow);
    }

    /* Step indicator */
    .subscribe-steps {
      display: flex;
      align-items: center;
      gap: 0;
      margin-bottom: 18px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border2);
    }

    .subscribe-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      flex: 0 0 auto;
    }

    .subscribe-step-num {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      font-size: 10px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    }

    .subscribe-step-label {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      transition: color 180ms ease;
    }

    .subscribe-step.is-active .subscribe-step-num {
      background: var(--fg);
      color: var(--bg);
      border-color: var(--fg);
    }

    .subscribe-step.is-active .subscribe-step-label {
      color: var(--fg);
    }

    .subscribe-step.is-completed .subscribe-step-num {
      background: var(--border2);
      color: var(--fg);
      border-color: var(--border2);
    }

    .subscribe-step-connector {
      flex: 1;
      height: 1px;
      background: var(--border2);
      margin: 0 4px;
      margin-bottom: 14px;
    }

    /* Each step content panel */
    .subscribe-panel h2 {
      margin: 0 0 6px;
      font-size: 13px;
      font-weight: 500;
    }

    .subscribe-panel label {
      display: grid;
      gap: 3px;
      font-size: 11px;
      color: var(--text-subtle);
      margin: 8px 0 0;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .subscribe-panel label input {
      width: 100%;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: transparent;
      color: inherit;
      font: inherit;
      outline: none;
    }

    .subscribe-panel label input:focus {
      border-color: var(--fg);
    }

    /* Terms box */
    .subscribe-terms-box {
      border: 1px solid var(--border2);
      border-radius: 10px;
      padding: 12px;
      margin: 10px 0;
      font-size: 11px;
      line-height: 1.5;
      max-height: 180px;
      overflow-y: auto;
      background: var(--panel-strong-bg);
      color: var(--text-subtle);
    }

    .subscribe-terms-box p {
      margin: 0 0 8px;
    }

    .subscribe-terms-box p:last-child {
      margin: 0;
    }

    .subscribe-terms-box a {
      color: var(--fg);
    }

    .subscribe-terms-check {
      display: flex !important;
      flex-direction: row !important;
      align-items: flex-start;
      gap: 8px;
      margin: 10px 0 0;
      text-transform: none !important;
      letter-spacing: normal !important;
      font-size: 11px;
      color: var(--fg) !important;
      cursor: pointer;
    }

    .subscribe-terms-check input[type="checkbox"] {
      width: auto;
      margin-top: 1px;
      flex-shrink: 0;
    }

    /* Stripe Payment Element host */
    .subscribe-payment-element {
      margin: 14px 0 0;
      min-height: 120px;
    }

    /* Receipt box */
    .subscribe-receipt-box {
      border: 1px solid var(--border2);
      border-radius: 10px;
      padding: 14px;
      margin: 12px 0;
      font-size: 11px;
      line-height: 1.55;
      background: var(--panel-strong-bg);
    }

    .subscribe-receipt-box p {
      margin: 0 0 6px;
    }

    .subscribe-receipt-box p:last-child {
      margin: 0;
    }

    /* Mobile: full-width card */
    @media (max-width: 580px) {
      .subscribe-modal-card {
        width: 96vw;
        padding: 14px;
        max-height: 96vh;
      }

      .subscribe-steps {
        gap: 0;
      }

      .subscribe-step-label {
        display: none;
      }
    }