:root {
      --bg: #ffffff;
      --fg: #000000;
      --muted: #666666;
      --text-subtle: #000000;
      --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: #661919;

      --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: #661919;
      --btn-danger-fg: #ffffff;
      --btn-danger-border: #661919;

      --gap: 16px;
      --radius: 12px;
      --mono: var(--theme-font-transfer-base, 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);
      --pool-editor-bg-image: none;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #000000;
        --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: #110e0e;
        --danger: #661919;

        --header-bg: rgba(255, 255, 255, 0.00);
        --overlay-bg: #000000;
        --panel-bg:#110e0e;
        --card-bg:#110e0e;
        --panel-strong-bg: #110e0e;
        --panel-shadow: transparent;
        --log-bg: #110e0e;
        --toast-bg: #110e0e;
        --thumb-bg: #110e0e;
        --cover-btn-bg: #110e0e;
        --cover-indicator-bg: #110e0e;

        --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: #000000;
        --btn-border: #c9c7b3;
        --btn-disabled-bg: #191515;
        --btn-disabled-fg: #c9c7b3;
        --btn-disabled-border: #191515;
        --btn-ghost-bg: transparent;
        --btn-ghost-fg: #c9c7b3;
        --btn-ghost-border: #c9c7b3;
        --btn-danger-bg: #892323;
        --btn-danger-fg: #ffffff;
        --btn-danger-border: #661919;

        --footer-bg: #000000;
        --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;
    }

    body[data-header-surface="transfer"] header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: transparent;
      backdrop-filter: none;
    }

    body[data-header-surface="transfer"] 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: var(--theme-text-size-md, 12px);
      font-weight: 400;
      letter-spacing: .2px;
    }

    body[data-header-surface="transfer"] .brand-link {
      color: inherit;
      text-decoration: none;
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-caps, 0.04em);
      font-size: var(--theme-text-size-md, 12px);
      font-weight: 400;
      padding: 7px 12px;
      border: 0px solid var(--border);
      border-radius: 999px;
      background: var(--panel-strong-bg);
      color: inherit;
      text-decoration: none;
      line-height: var(--theme-line-height-flat, 1);
      transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;

    }

    body[data-header-surface="transfer"] .header-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      padding: 7px 12px;
      border: 0px solid var(--border);
      border-radius: 999px;
      background: var(--panel-strong-bg);
      color: inherit;
      text-decoration: none;
      line-height: var(--theme-line-height-flat, 1);
      transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
    }

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

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

    body[data-header-surface="transfer"] .header-link:hover,
    body[data-header-surface="transfer"] .header-link:focus-visible {
      background: var(--hover);
      border-color: var(--fg);
      transform: translateY(-1px);
      outline: none;
    }

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

    .dashboard-back {
      display: inline-block;
      text-decoration: none;
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-label-wide, 0.03em);
      font-size: var(--theme-text-size-sm, 11px);
      line-height: var(--theme-line-height-flat, 1);
      color: inherit;
      opacity: 0.84;
      transition: opacity 120ms ease;
    }

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

    body[data-header-surface="transfer"] .admin-nav-links {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    body[data-header-surface="transfer"] .admin-nav-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      padding: 7px 12px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--panel-strong-bg);
      color: inherit;
      text-decoration: none;
      line-height: var(--theme-line-height-flat, 1);
      transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
    }

    body[data-header-surface="transfer"] .admin-nav-links a:hover,
    body[data-header-surface="transfer"] .admin-nav-links a:focus-visible {
      background: var(--hover);
      border-color: var(--fg);
      transform: translateY(-1px);
      outline: none;
    }

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

    .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: var(--theme-text-size-sm, 11px);
    }

    .scramble-warning-card {
      width: min(460px, 92vw);
      display: grid;
      gap: 8px;
    }

    .scramble-warning-note {
      margin: 0;
      max-width: 44ch;
      line-height: var(--theme-line-height-body, 1.35);
    }

    .scramble-warning-card .inline-actions {
      margin-top: 4px;
    }

    .scramble-warning-card .mini-pill {
      white-space: normal;
      max-width: 100%;
    }

    .pool-background-picker {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 6px;
    }

    .pool-background-picker #poolBackgroundClearBtn[disabled] {
      opacity: 0.5;
      cursor: default;
    }

    .pool-background-preview {
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 10px;
      border: 1px solid var(--border2);
      background: var(--thumb-bg);
      margin-top: 8px;
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    .pool-background-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      background: var(--panel-bg);
    }

    .pool-background-preview-empty {
      color: var(--muted);
      font-size: var(--theme-text-size-sm, 11px);
    }

    .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;
    }

    /* ── Pricing gate card ─────────────────────────────────────── */

    .pricing-gate-card {
      width: min(560px, 94vw);
      max-height: min(88vh, 860px);
      overflow-y: auto;
      display: grid;
      gap: 14px;
    }

    .pricing-gate-plans {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .pricing-gate-plan {
      border: 1px solid var(--border2);
      border-radius: 12px;
      padding: 14px 12px;
      display: grid;
      gap: 8px;
    }

    .pricing-gate-plan--featured {
      border-color: var(--border);
      background: color-mix(in srgb, var(--fg, #111) 4%, transparent);
    }

    .pricing-gate-plan__name {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 600;
      opacity: 0.55;
    }

    .pricing-gate-plan__price {
      display: flex;
      align-items: baseline;
      gap: 5px;
    }

    .pricing-gate-plan__amount {
      font-size: clamp(20px, 3vw, 28px);
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 1;
    }

    .pricing-gate-plan__period {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      opacity: 0.5;
    }

    .pricing-gate-plan__features {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 4px;
      font-size: 11px;
      line-height: 1.4;
      letter-spacing: 0.02em;
    }

    .pricing-gate-plan__features li {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }

    .pricing-gate-plan__features li::before {
      content: "";
      flex-shrink: 0;
      width: 4px;
      height: 4px;
      border: 1px solid currentColor;
      opacity: 0.35;
    }

    .pricing-gate-plan__actions {
      margin-top: 4px;
    }

    .pricing-gate-plan__actions .publish-btn {
      width: 100%;
      justify-content: center;
    }

    .pricing-gate-details {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .pricing-gate-detail-block {
      border: 1px solid var(--border2);
      border-radius: 10px;
      padding: 10px 12px;
      display: grid;
      gap: 8px;
    }

    .pricing-gate-detail-block h3 {
      margin: 0;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      opacity: 0.55;
    }

    .pricing-gate-steps {
      margin: 0;
      padding: 0 0 0 14px;
      display: grid;
      gap: 4px;
      font-size: 11px;
      line-height: 1.4;
      letter-spacing: 0.02em;
      color: var(--text-subtle);
    }

    .pricing-gate-rates {
      display: grid;
      gap: 3px;
      font-size: 10px;
      font-family: var(--font-mono, monospace);
    }

    .pricing-gate-rates > div {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      padding: 2px 0;
      border-bottom: 1px solid var(--border2);
    }

    .pricing-gate-rates > div:last-child {
      border-bottom: none;
    }

    .pricing-gate-examples {
      display: flex;
      gap: 8px;
      margin-top: 6px;
    }

    .pricing-gate-examples > div {
      flex: 1;
      border: 1px solid var(--border2);
      border-radius: 8px;
      padding: 6px 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .pricing-gate-example__label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      opacity: 0.55;
    }

    .pricing-gate-example__amount {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.01em;
    }

    @media (max-width: 480px) {
      .pricing-gate-plans,
      .pricing-gate-details {
        grid-template-columns: 1fr;
      }
    }

    /* Terms gate — iframe panel */
    .terms-card {
      width: min(840px, 94vw);
      height: min(86vh, 860px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .terms-gate-iframe {
      flex: 1;
      border: 1px solid var(--border2);
      border-radius: 10px;
      min-height: 0;
      background: var(--panel-strong-bg);
    }

    .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: var(--theme-text-size-sm, 11px);
      font-weight: 600;
    }

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

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

    .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(--transfer-publish-log-border, var(--border2));
      border-radius: 8px;
      min-height: 160px;
      max-height: 320px;
      overflow: auto;
      background: var(--transfer-publish-log-bg, var(--log-bg));
      color: var(--transfer-publish-log-fg, inherit);
      font-family: var(--mono);
      font-size: var(--theme-text-size-sm, 11px);
      white-space: pre-wrap;
    }

    .publish-progress {
      margin-top: 10px;
      display: grid;
      gap: 7px;
    }

    .publish-progress-meta {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-size: var(--theme-text-size-xs, 10px);
      letter-spacing: var(--theme-tracking-caps-xl, 0.06em);
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      color: var(--fg);
      opacity: 0.82;
      font-family: var(--mono);
    }

    .publish-progress-track {
      position: relative;
      height: 12px;
      border-radius: 0;
      border: 1px solid var(--transfer-publish-progress-track-border, var(--border));
      background:
        var(
          --transfer-publish-progress-track-bg,
          linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--log-bg) 80%, #ffffff) 100%)
        );
      box-shadow: var(
        --transfer-publish-progress-track-shadow,
        inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent)
      );
      overflow: hidden;
    }

    .publish-progress-track::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(
        --transfer-publish-progress-track-overlay,
        linear-gradient(180deg, color-mix(in srgb, var(--fg) 9%, transparent), transparent 65%)
      );
      pointer-events: none;
    }

    .publish-progress-bar {
      position: relative;
      height: 100%;
      width: 0%;
      background: var(
        --transfer-publish-progress-bar-bg,
        repeating-linear-gradient(
          90deg,
          color-mix(in srgb, #ffffff 14%, transparent) 0 5px,
          transparent 5px 10px
        ),
        linear-gradient(90deg, var(--fg) 0%, color-mix(in srgb, var(--fg) 76%, #1f1f1f) 100%)
      );
      transition: width 210ms steps(24, end);
    }

    .publish-progress-bar::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 100%;
      background: var(
        --transfer-publish-progress-bar-glint,
        linear-gradient(90deg, transparent, color-mix(in srgb, #ffffff 55%, transparent))
      );
      opacity: 0.8;
    }

    .publish-gate.is-busy .publish-progress-bar::after {
      animation: publish-progress-pulse 1.1s ease-in-out infinite;
    }

    .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; }
    }

    @keyframes publish-progress-pulse {
      0%, 100% { opacity: 0.35; }
      50% { opacity: 0.92; }
    }

    .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;
    }

    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);
    }

    .dashboard-sidebar-column,
    .dashboard-main-column {
      display: grid;
      gap: var(--gap);
      align-content: start;
    }

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

      .dashboard-primary-actions-panel {
        align-self: start;
      }

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

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

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

    .transfer-editor-shell,
    .transfer-editor-shell__body {
      width: 100%;
    }

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

    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-transfer-view="editor"] .dashboard-primary-actions-panel {
      display: none;
    }

    body[data-transfer-view="editor"] .playlists-panel {
      background: transparent;
      border: none;
      padding: 0;
    }

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

    body[data-transfer-view="editor"] .playlists-panel > .body {
      padding: 0;
    }

    body[data-transfer-view="editor"] .playlists-panel > .body {
      padding-bottom: calc(240px + env(safe-area-inset-bottom, 0px));
    }

    body[data-transfer-view="editor"][data-pool-editor-mode="true"] {
      background-image: var(--pool-editor-bg-image);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }

    body[data-transfer-view="editor"][data-pool-editor-mode="true"] main .wrap.grid {
      max-width: min(980px, calc(100vw - (var(--gap) * 2)));
      margin-left: 0;
      margin-right: auto;
    }

    body[data-transfer-view="editor"][data-pool-editor-mode="true"][data-pool-guest-mode="true"] main .wrap.grid {
      margin-left: auto;
      margin-right: auto;
    }

    body[data-pool-guest-mode="true"] .dashboard-back-wrap {
      display: none !important;
    }

    body[data-pool-guest-mode="true"] #footerPlayer {
      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: var(--theme-text-size-xl, 14px);
      font-weight: 1000;
      color: var(--text-subtle);
      border-bottom: 0px solid var(--border2);
    }

    .dashboard-panel-tabs {
      margin: 0;
      padding: 12px 12px 10px;
      display: flex;
      align-items: center;
      gap: 14px;
      border-bottom: 1px solid var(--border2);
    }

    .dashboard-panel-tab {
      appearance: none;
      border: 0;
      margin: 0;
      padding: 0;
      background: transparent;
      color: var(--text-subtle);
      font: inherit;
      font-size: var(--theme-text-size-xl, 14px);
      font-weight: 700;
      letter-spacing: var(--theme-tracking-label, 0.02em);
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.14s ease;
    }

    .dashboard-panel-tab:hover,
    .dashboard-panel-tab:focus-visible {
      opacity: 1;
      outline: none;
    }

    .dashboard-panel-tab.is-active {
      opacity: 1;
      color: var(--fg);
      text-decoration: none;
    }

    .dashboard-panel-view {
      display: none;
      gap: 16px;
      min-width: 0;
    }

    .dashboard-panel-view.is-active {
      display: grid;
    }

    .dashboard-window-drop-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      background: rgba(17, 17, 17, 0.12);
      background: color-mix(in srgb, var(--theme-page-backdrop, var(--bg, #ffffff)) 14%, transparent);
      -webkit-backdrop-filter: blur(0px) saturate(var(--popup-backdrop-saturate, 1.06));
      backdrop-filter: blur(0px) saturate(var(--popup-backdrop-saturate, 1.06));
      transition:
        opacity var(--popup-backdrop-transition-ms, 220ms) ease,
        -webkit-backdrop-filter var(--popup-backdrop-transition-ms, 220ms) ease,
        backdrop-filter var(--popup-backdrop-transition-ms, 220ms) ease,
        visibility 0s linear var(--popup-backdrop-transition-ms, 220ms);
    }

    .dashboard-window-drop-overlay__message {
      width: min(560px, calc(100vw - 48px));
      padding: 24px 28px;
      border: 1px solid color-mix(in srgb, var(--fg, #111111) 20%, transparent);
      border-radius: 20px;
      background: color-mix(in srgb, var(--panel-bg, var(--bg, #ffffff)) 82%, transparent);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
      color: var(--fg, #111111);
      font-size: clamp(18px, 2vw, 28px);
      font-weight: 700;
      letter-spacing: var(--theme-tracking-label, 0.02em);
      line-height: 1.15;
      text-align: center;
      text-wrap: balance;
    }

    body.dashboard-window-file-drag-active .dashboard-window-drop-overlay {
      opacity: 1;
      visibility: visible;
      -webkit-backdrop-filter: blur(var(--popup-backdrop-blur, 10px)) saturate(var(--popup-backdrop-saturate, 1.06));
      backdrop-filter: blur(var(--popup-backdrop-blur, 10px)) saturate(var(--popup-backdrop-saturate, 1.06));
      transition-delay: 0s, 0s, 0s, 0s;
    }

    @media (min-width: 481px) {
      .dashboard-window-drop-overlay {
        padding-left: calc(220px + 24px);
      }
    }

    @media (max-width: 480px) {
      .dashboard-window-drop-overlay {
        padding:
          calc(env(safe-area-inset-top, 0px) + 24px)
          20px
          calc(env(safe-area-inset-bottom, 0px) + 24px);
      }

      .dashboard-window-drop-overlay__message {
        padding: 20px 18px;
        border-radius: 18px;
        font-size: clamp(16px, 5vw, 22px);
      }
    }

    .dashboard-account-view {
      align-content: start;
    }

    .dashboard-account-intro h3 {
      margin: 0;
      font-size: var(--theme-text-size-md, 12px);
      font-weight: 700;
      letter-spacing: var(--theme-tracking-label, 0.02em);
      text-transform: var(--theme-text-transform-uppercase, uppercase);
    }

    .dashboard-account-intro p {
      margin: 0;
      font-size: var(--theme-text-size-sm, 11px);
      color: var(--text-subtle);
      line-height: var(--theme-line-height-body, 1.35);
    }

    .dashboard-account-view .form-block {
      border: 1px solid var(--border2);
      border-radius: 12px;
      padding: 12px;
      display: grid;
      gap: 8px;
      background: var(--panel-bg);
    }

    .dashboard-account-view .form-block h3 {
      margin: 0;
      font-size: var(--theme-text-size-sm, 11px);
      font-weight: 700;
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-label, 0.02em);
      color: var(--text-subtle);
    }

    .dashboard-account-view .form-stack {
      display: grid;
      gap: 8px;
    }

    .dashboard-account-view .form-field {
      display: grid;
      gap: 4px;
      font-size: var(--theme-text-size-sm, 11px);
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-label, 0.02em);
      color: var(--text-subtle);
    }

    .dashboard-account-view .form-field input,
    .dashboard-account-view .form-field textarea,
    .dashboard-account-view .form-field select {
      width: 100%;
      font: inherit;
      border: 1px solid var(--border2);
      background: var(--panel-bg);
      color: var(--fg);
      border-radius: 10px;
      padding: 7px 10px;
    }

    .dashboard-account-view .form-field textarea {
      min-height: 140px;
      resize: vertical;
    }

    .dashboard-account-view .form-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    .dashboard-account-view .btn {
      font: inherit;
      text-decoration: none;
      border: 1px solid var(--btn-border);
      background: var(--btn-bg);
      color: var(--btn-fg);
      border-radius: 250px;
      padding: 6px 12px;
      cursor: pointer;
      font-weight: 700;
      letter-spacing: var(--theme-tracking-label, 0.02em);
      font-size: var(--theme-text-size-sm, 11px);
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
      transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
    }

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

    .dashboard-account-view .btn:active:not(:disabled) {
      transform: translateY(0) scale(1);
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
    }

    .dashboard-account-view .btn:disabled {
      background: var(--btn-disabled-bg);
      color: var(--btn-disabled-fg);
      border-color: var(--btn-disabled-border);
      opacity: 0.7;
      cursor: not-allowed;
      box-shadow: none;
    }

    .dashboard-account-view .btn--ghost {
      background: var(--btn-ghost-bg, transparent);
      color: var(--btn-ghost-fg);
      border-color: var(--btn-ghost-border);
      box-shadow: none;
      font-weight: 400;
    }

    .dashboard-account-view .btn--ghost:hover:not(:disabled) {
      transform: none;
      box-shadow: none;
      filter: none;
      border-color: var(--fg);
      color: var(--fg);
    }

    .dashboard-account-view .btn--danger {
      background: #661919;
      border-color: #661919;
      color: #ffffff;
    }

    .dashboard-account-view .status-text {
      font-size: var(--theme-text-size-sm, 11px);
      letter-spacing: var(--theme-tracking-label, 0.02em);
      color: var(--text-subtle);
    }

    .dashboard-account-view .profile-photo {
      display: grid;
      grid-template-columns: 140px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
    }

    .dashboard-account-view .profile-photo__preview-wrap {
      width: 140px;
      height: 140px;
      border: 1px solid var(--border2);
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      background: var(--thumb-bg);
    }

    .dashboard-account-view .profile-photo__preview {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
    }

    .dashboard-account-view .profile-photo__placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-label-wide, 0.03em);
      font-size: var(--theme-text-size-5xl, 28px);
      font-weight: 700;
      color: var(--fg);
    }

    .dashboard-account-view .profile-photo__controls {
      display: grid;
      gap: 8px;
    }

    .dashboard-account-view .billing-readonly {
      border: 1px solid var(--border2);
      border-radius: 10px;
      display: grid;
      overflow: hidden;
      background: var(--panel-strong-bg);
    }

    .dashboard-account-view .billing-readonly-row {
      display: grid;
      grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
      gap: 10px;
      padding: 6px 8px;
      border-top: 1px solid var(--border2);
      font-size: var(--theme-text-size-sm, 11px);
      letter-spacing: var(--theme-tracking-label, 0.02em);
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      color: var(--text-subtle);
    }

    .dashboard-account-view .billing-readonly-row:first-child {
      border-top: 0;
    }

    .dashboard-account-view .billing-readonly-row strong {
      font-weight: 700;
      text-transform: var(--theme-text-transform-none, none);
      letter-spacing: var(--theme-tracking-base, 0);
      word-break: break-word;
      color: var(--fg);
    }

    .account-modal {
      --popup-z-index: 20;
    }

    .account-modal__box {
      --popup-card-width: min(640px, 100%);
      --popup-card-max-height: calc(100vh - 32px);
      --popup-card-bg: var(--panel-bg);
      --popup-card-fg: var(--fg);
      --popup-card-border: var(--border2);
      --popup-title-size: var(--theme-text-size-md, 12px);
      --popup-title-weight: 700;
      --popup-title-margin: 0;
      --popup-title-transform: var(--theme-text-transform-uppercase, uppercase);
      --popup-title-tracking: var(--theme-tracking-label, 0.02em);
      --popup-title-color: var(--fg);
    }

    .account-modal .form-stack {
      display: grid;
      gap: 8px;
    }

    .account-modal .form-field {
      display: grid;
      gap: 4px;
      font-size: var(--theme-text-size-sm, 11px);
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-label, 0.02em);
      color: var(--text-subtle);
    }

    .account-modal .form-actions {
      margin-top: 10px;
    }

    .account-modal .btn--ghost {
      background: var(--btn-ghost-bg, transparent);
      color: var(--btn-ghost-fg);
      border-color: var(--btn-ghost-border);
      box-shadow: none;
      font-weight: 400;
    }

    .account-modal .btn--ghost:hover:not(:disabled) {
      transform: none;
      box-shadow: none;
      filter: none;
      border-color: var(--fg);
      color: var(--fg);
    }

    .account-modal .btn--danger {
      background:  #661919;
      border-color: #661919;
      color: #ffffff;
    }

    /* ── Accordion sections ── */

    .dashboard-account-view .account-section__toggle {
      appearance: none;
      background: none;
      border: none;
      padding: 0;
      font: inherit;
      color: inherit;
      text-align: left;
      width: 100%;
      cursor: pointer;
      user-select: none;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .dashboard-account-view .account-section__toggle::before {
      content: "";
      display: inline-block;
      width: 0;
      height: 0;
      border-left: 5px solid var(--text-subtle);
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      transition: transform 0.15s ease;
      flex-shrink: 0;
    }

    .dashboard-account-view .account-section.is-open .account-section__toggle::before {
      transform: rotate(90deg);
    }

    .dashboard-account-view .account-section__body {
      display: none;
    }

    .dashboard-account-view .account-section.is-open > .account-section__body {
      display: grid;
    }

    .dashboard-account-view .account-section.is-open > .form-actions.account-section__body {
      display: flex;
    }

    /* ── Danger zone ── */

    .dashboard-account-view .account-section--danger {
      border-color: #661919;
    }

    .dashboard-account-view .account-section--danger .account-section__toggle {
      color: #661919;
    }

    .dashboard-account-view .account-section--danger .account-section__toggle::before {
      border-left-color: #661919;
    }

    /* ── Password strength ── */

    .password-strength {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 16px;
    }

    .password-strength__bar {
      flex: 1;
      height: 4px;
      border-radius: 2px;
      background: var(--border2);
      position: relative;
      overflow: hidden;
    }

    .password-strength__bar::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 2px;
      width: var(--strength-pct, 0%);
      background: var(--strength-color, var(--border2));
      transition: width 0.2s ease, background 0.2s ease;
    }

    .password-strength__label {
      font-size: var(--theme-text-size-xs, 10px);
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-label-wide, 0.03em);
      color: var(--text-subtle);
      white-space: nowrap;
      min-width: 50px;
    }

    /* ── Billing readonly hide-empty ── */

    .dashboard-account-view .billing-readonly-row[hidden] {
      display: none;
    }

    @media (max-width: 700px) {
      .dashboard-account-view .billing-readonly-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
      }

      .dashboard-account-view .profile-photo {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .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: 0px 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: var(--theme-text-size-2xl, 16px);
    }

    .remote-meta {
      color: var(--muted);
      font-size: var(--theme-text-size-sm, 11px);
    }

    .remote-meta-expiry {
      font-weight: 700;
      color: var(--text-faint);
  
    }

    .remote-preview {
      font-size: var(--theme-text-size-sm, 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: var(--theme-text-size-xs, 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-item--placeholder {
      user-select: none;
      cursor: pointer;
      border-color: transparent;
    }

    .remote-item--placeholder .remote-title,
    .remote-item--placeholder .remote-preview-tracks,
    .remote-item--placeholder .remote-actions {
      filter: blur(3px);
      opacity: 0.78;
    }

    .remote-item--placeholder .remote-preview-cover {
      color: transparent;
      border: 0;
      background: linear-gradient(130deg, #e0d2bb 0%, #b8c8d2 52%, #8fa1b8 100%);
      background-size: 220% 220%;
      background-position: 0% 50%;
      transition: background-position 320ms ease;
    }

    .remote-item--placeholder .remote-actions button {
      cursor: default;
    }

    .remote-item--placeholder .remote-actions {
      pointer-events: none;
    }

    .remote-item--placeholder:hover .remote-preview-cover,
    .remote-item--placeholder:focus-visible .remote-preview-cover {
      animation: remote-placeholder-gradient-shift 2.8s ease-in-out infinite alternate;
    }

    .remote-item--placeholder:focus-visible {
      outline: 1px solid var(--fg);
      outline-offset: 2px;
    }

    @keyframes remote-placeholder-gradient-shift {
      0% {
        background-position: 0% 50%;
      }
      100% {
        background-position: 100% 50%;
      }
    }

    .remote-preview-tracks {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 14px;
      font-size: var(--theme-text-size-sm, 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: #000000;
      color: #ffffff;
    }

    @media (prefers-color-scheme: dark) {
      .remote-preview-tracks > a:hover {
        background: #c9c7b3;
        color: #000000;
      }

      .remote-item--placeholder .remote-preview-cover {
        background: linear-gradient(130deg, #3d3527 0%, #2e3c46 52%, #30384a 100%);
      }
    }

    .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:not([hidden]) {
        display: inline-flex;
        align-items: center;
        width: 100%;
        text-align: center;
        justify-content: center;
      }

      .remote-actions .remote-action-scramble:not([hidden]) {
        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;
      }

    }

    @media (max-width: 480px) {
      .remote-item {
        gap: 8px;
      }

      .remote-preview-cover {
        aspect-ratio: 1 / 1;
        border-radius: 6px;
      }

      .remote-left {
        gap: 4px;
      }

      .remote-title {
        font-size: var(--theme-text-size-xl, 14px);
        font-weight: 600;
      }

      .remote-meta {
        font-size: var(--theme-text-size-xs, 10px);
      }

      .remote-preview {
        font-size: var(--theme-text-size-xs, 10px);
      }

      .remote-preview-tracks {
        grid-template-columns: 1fr;
        gap: 0 8px;
      }

      .remote-preview-tracks > div,
      .remote-preview-tracks > a {
        height: 18px;
        line-height: 16px;
        font-size: var(--theme-text-size-xs, 10px);
      }

      .remote-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
      }

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

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

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

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

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

      .remote-actions .btn-label {
        display: none;
      }

      .remote-actions button {
        padding: 8px 6px;
        font-size: var(--theme-text-size-xs, 10px);
      }

      .remote-actions .icon {
        width: 16px;
        height: 16px;
      }

    }

    .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;
    }

    /* ── Dashboard notifications panel ── */
    .dashboard-notifications-panel .body {
      display: grid;
      gap: 10px;
    }

    .dashboard-notifications-head {
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 2px;
    }

    .dashboard-notifications-open-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--fg);
      font-size: var(--theme-text-size-xs, 10px);
      font-weight: 700;
      text-decoration: none;
      border: 1px solid var(--border2);
      border-radius: 999px;
      padding: 4px 10px;
      white-space: nowrap;
      transition: border-color 120ms ease, background 120ms ease;
    }

    .dashboard-notifications-open-link:hover,
    .dashboard-notifications-open-link:focus-visible {
      border-color: var(--fg);
      background: rgba(255, 255, 255, 0.04);
      outline: none;
    }

    .dashboard-notifications-open-link svg {
      flex-shrink: 0;
    }

    .dashboard-notifications-list {
      display: grid;
      gap: 0;
      border-top: 1px solid var(--border2);
    }

    .dashboard-notification-item {
      border: none;
      border-bottom: 1px solid var(--border2);
      border-radius: 0;
      padding: 12px 4px 12px 0;
      display: grid;
      gap: 6px;
      background: transparent;
      text-decoration: none;
      color: inherit;
      transition: background 120ms ease;
    }

    button.dashboard-notification-item {
      width: 100%;
      appearance: none;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    a.dashboard-notification-item:hover,
    button.dashboard-notification-item:hover,
    button.dashboard-notification-item:focus-visible {
      background: rgba(255, 255, 255, 0.04);
    }

    .dashboard-notification-item.is-unread {
      background: rgba(255, 255, 255, 0.025);
    }

    .dashboard-notification-header {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .dashboard-notification-dot {
      flex-shrink: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #5ba4f5;
    }

    .dashboard-notification-title {
      margin: 0;
      font-size: var(--theme-text-size-sm, 11px);
      line-height: var(--theme-line-height-compact, 1.2);
      color: var(--fg);
      min-width: 0;
    }

    .dashboard-notification-date {
      flex-shrink: 0;
      font-size: var(--theme-text-size-2xs, 9px);
      color: var(--muted);
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-label-wide, 0.03em);
    }

    .dashboard-notification-dot + .dashboard-notification-date + .dashboard-notification-title,
    .dashboard-notification-date + .dashboard-notification-title {
      flex: 1;
    }

    .dashboard-notification-body {
      margin: 0;
      font-size: var(--theme-text-size-xs, 10px);
      line-height: var(--theme-line-height-body, 1.35);
      color: var(--text-subtle);
      white-space: pre-wrap;
      word-break: break-word;
    }

    .dashboard-notifications-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 12px 8px;
      text-align: center;
      font-size: var(--theme-text-size-xs, 10px);
      color: var(--muted);
    }

    .dashboard-notifications-empty__icon::before {
      content: "\1F514";
      font-size: var(--theme-text-size-4xl, 20px);
      display: block;
      opacity: 0.4;
    }

    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: var(--theme-text-size-sm, 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: var(--theme-text-size-sm, 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;
      flex-wrap: nowrap;
      gap: 10px;
      border: 1px solid var(--border2);
      border-radius: 6px;
      background: var(--panel-bg);
      padding: 4px;
      height: 30px;
      backdrop-filter: blur(4px);
      transition: all 200ms ease;
    }

    .playlist-type-tabs:hover {
      border-color: var(--border);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    @media (prefers-color-scheme: dark) {
      .playlist-type-tabs:hover {
        box-shadow: 0 2px 8px rgba(201, 199, 179, 0.08);
      }
    }

    .playlist-type-tab {
      display: inline-flex;
      margin: -1;
      cursor: pointer;
      position: relative;
    }

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

    .playlist-type-tab span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 80px;
      padding: 5px 5px;
      border-radius: 4px;
      color: var(--text-subtle);
      font-size: var(--theme-text-size-sm, 11px);
      font-weight: 500;
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-ui, 0.01em);
      line-height: var(--theme-line-height-flat, 1);
      transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
      user-select: none;
      background: transparent;
      position: relative;
      white-space: nowrap;
    }

    .playlist-type-tab span:hover {
      background: var(--hover);
      color: var(--fg);
    }

    .playlist-type-tab input[type="radio"]:checked + span {
      background: var(--btn-bg);
      color: var(--btn-fg);
      font-weight: 600;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    @media (prefers-color-scheme: dark) {
      .playlist-type-tab input[type="radio"]:checked + span {
        box-shadow: 0 2px 4px rgba(201, 199, 179, 0.15);
      }
    }

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

    @media (max-width: 640px) {
      .playlist-type-tab span {
        min-width: 70px;
        padding: 5px 10px;
        font-size: var(--theme-text-size-xs, 10px);
      }
    }

    .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: var(--theme-text-size-sm, 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: 400;
      letter-spacing: var(--theme-tracking-label, 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: var(--theme-text-size-sm, 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: var(--theme-text-size-sm, 11px);
    }

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

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

    .pool-no-expiry-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 6px 0 10px;
      font-size: var(--theme-text-size-md, 12px);
      color: var(--muted);
      cursor: pointer;
      user-select: none;
    }

    .expiry-no-expiry-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 8px 0 2px;
      font-size: var(--theme-text-size-md, 12px);
      color: var(--muted);
      cursor: pointer;
      user-select: none;
    }

    #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);
    }

    body[data-transfer-view="editor"][data-pool-editor-mode="true"] .plist.plist--pool {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(3px);
    }

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

      .plist.plist--pool {
        grid-template-columns: 360px 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;
    }

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

    @media (min-width: 901px) {
      .plist-settings-grid {
        grid-template-columns: minmax(180px, 1fr) 160px 160px;
      }
    }

    .plist-title {
      font: inherit;
      font-size: var(--theme-text-size-3xl, 18px);
      font-weight: 700;
      line-height: var(--theme-line-height-snug, 1.15);
      display: inline-flex;
      align-items: baseline;
      gap: 8px;
      flex: 1 1 auto;
      min-width: 0;
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      text-align: left;
      cursor: pointer;
      text-decoration: none;
      overflow: hidden;
    }

    .plist-title-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .plist-title-type {
      flex: 0 0 auto;
      font-size: var(--theme-text-size-sm, 11px);
      font-weight: 600;
      letter-spacing: var(--theme-tracking-caps-wide, 0.05em);
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      opacity: 0.7;
    }

    .plist-title:hover,
    .plist-title:focus-visible {
      opacity: 0.75;
      outline: none;
    }

    .plist-title:disabled {
      opacity: 1;
      cursor: default;
    }

    .plist-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      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;
      text-decoration: none;
      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: var(--theme-text-size-md, 12px);
      text-decoration: none;
    }

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

    .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-panel--pool {
      min-height: calc(var(--cover-panel-size) + 70px);
    }

    .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;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .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;
      animation: track-enter .3s ease-out both;
    }

    .plist-cover-empty {
      color: var(--muted);
      font-size: var(--theme-text-size-sm, 11px);
    }
    .plist-cover-actions {
      position: static;
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: flex-end;
      font-size: var(--theme-text-size-sm, 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: var(--theme-text-transform-lowercase, lowercase);
    }
    .plist-cover-action:hover {
      opacity: .8;
    }

    /* ── Auto-generated cover (editor panel) ── */
    .plist-auto-cover {
      width: 100%;
      height: 100%;
      border-radius: inherit;
      display: flex;
      align-items: flex-end;
      padding: 14px;
      box-sizing: border-box;
      overflow: hidden;
      cursor: pointer;
    }

    .plist-auto-cover-title {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
      text-align: left;
      word-break: break-word;
      max-width: 100%;
    }

    /* ── Auto-generated cover (remote list) ── */
    .remote-auto-cover {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-end;
      padding: 14px;
      box-sizing: border-box;
      overflow: hidden;
    }

    .remote-auto-cover-title {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
      text-align: left;
      word-break: break-word;
      max-width: 100%;
    }

    @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;
      }

      .plist-cover-panel--pool .plist-cover-inner {
        min-height: 320px;
      }
    }

    @media (prefers-color-scheme: dark) {
      body[data-transfer-view="editor"][data-pool-editor-mode="true"] .plist.plist--pool {
        background: rgba(26, 24, 25, 0.9);
      }
    }

    @keyframes track-enter {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

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

    .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 {
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

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

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

    .track-set-cover {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--panel-strong-bg);
      font-size: var(--theme-text-size-sm, 11px);
      color: var(--text-subtle);
      cursor: pointer;
      user-select: none;
    }

    .track-set-cover input[type="checkbox"] {
      margin: 0;
      cursor: pointer;
    }

    .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: var(--theme-text-size-sm, 11px);
    }

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

    .dashboard-page-footer {
      max-width: 1100px;
      margin: 20px auto calc(var(--footer-buffer) + 34px);
      padding: 6px var(--gap) 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px 20px;
      font-size: var(--theme-text-size-lg, 13px);
      line-height: var(--theme-line-height-body, 1.35);
      opacity: 0.72;
    }

    .dashboard-page-footer a {
      color: inherit;
      text-decoration: none;
      padding: 2px 4px;
    }

    .dashboard-page-footer a:hover {
      text-decoration: underline;
    }

    .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: var(--theme-text-size-sm, 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 .footer-hide-btn {
      width: auto;
      min-width: 52px;
      height: 28px;
      padding: 0 10px;
      border: 1px solid var(--footer-border);
      border-radius: 999px;
      text-decoration: none;
      font-size: var(--theme-text-size-xs, 10px);
      letter-spacing: var(--theme-tracking-label-wide, 0.03em);
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      color: var(--footer-fg);
      background: transparent;
    }

    .footer-actions .footer-hide-label {
      display: inline;
      line-height: var(--theme-line-height-flat, 1);
      white-space: nowrap;
    }

    .footer-show-btn {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 16;
      min-width: 96px;
      height: 30px;
      border-radius: 999px;
      border: 1px solid var(--footer-border);
      background: var(--footer-bg);
      color: var(--footer-fg);
      font: inherit;
      font-size: var(--theme-text-size-xs, 10px);
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-label-wide, 0.03em);
      text-decoration: none;
      padding: 0 12px;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
    }

    .footer-show-btn[hidden] {
      display: none !important;
    }

    .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) {
      .dashboard-page-footer {
        margin: 18px auto 24px;
        gap: 10px 16px;
        font-size: var(--theme-text-size-md, 12px);
      }

      body[data-transfer-view="editor"] .playlists-panel > .body {
        padding-bottom: 14px;
      }

      .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-actions .footer-hide-btn,
      .footer-show-btn {
        display: none !important;
      }

      .footer-wave {
        display: none;
      }

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

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

    @keyframes toast-slide-in {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .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;
      animation: toast-slide-in .2s ease-out;
    }

    .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,
    .remote-action-collab-copy,
    .remote-action-collab-enable,
    .remote-action-collab-disable,
    .remote-action-pool-link {
      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,
    .remote-action-collab-copy .icon,
    .remote-action-collab-enable .icon,
    .remote-action-collab-disable .icon,
    .remote-action-pool-link .icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 0px;
      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");
    }

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

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

    .icon-collaboration-disable {
      -webkit-mask-image: url("/apps/web/public/assets/collaboration-disable-icon.svg");
      mask-image: url("/apps/web/public/assets/collaboration-disable-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: var(--theme-tracking-caps-wide, 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");
    }

    /* ═══════════════════════════════════════════
       Plist head action icons
       ═══════════════════════════════════════════ */

    .plist-head .publish-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .plist-head .remote-actions {
      flex-wrap: nowrap;
      flex-shrink: 0;
    }

    .plist-head .remote-actions .btn-label {
      display: none;
    }

    .plist-head .remote-actions .publish-btn--with-label .btn-label {
      display: inline;
    }

    .plist-head .remote-actions .publish-btn {
      padding: 6px 8px;
    }

    .plist-head .icon {
      display: inline-block;
      flex-shrink: 0;
      width: 14px;
      height: 14px;
      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-publish {
      -webkit-mask-image: url("/apps/web/public/assets/upload-svgrepo-com.svg");
      mask-image: url("/apps/web/public/assets/upload-svgrepo-com.svg");
    }

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

    .icon-settings {
      -webkit-mask-image: url("/apps/web/public/assets/settings-cog-gear-svgrepo-com.svg");
      mask-image: url("/apps/web/public/assets/settings-cog-gear-svgrepo-com.svg");
    }

    /* ═══════════════════════════════════════════
       Settings popup
       ═══════════════════════════════════════════ */

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

    /* 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: var(--theme-text-size-xs, 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: var(--theme-text-size-xs, 10px);
      color: var(--muted);
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-label-wide, 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: var(--theme-text-size-2xl, 16px);
      font-weight: 1000;
    }

    .subscribe-panel label {
      display: grid;
      gap: 3px;
      font-size: var(--theme-text-size-sm, 11px);
      color: var(--text-subtle);
      margin: 8px 0 0;
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-label, 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: var(--theme-text-size-sm, 11px);
      line-height: var(--theme-line-height-copy, 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: var(--theme-text-size-sm, 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: var(--theme-text-size-sm, 11px);
      line-height: var(--theme-line-height-copy-relaxed, 1.55);
      background: var(--panel-strong-bg);
    }

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

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

    /* ── Setup modal (account onboarding) ── */

    .setup-steps {
      display: flex;
      align-items: center;
      gap: 0;
      margin-bottom: 6px;
    }

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

    .setup-step-num {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      font-size: var(--theme-text-size-xs, 10px);
      font-weight: 700;
      border: 1.5px solid var(--border2);
      color: var(--muted);
      background: transparent;
    }

    .setup-step-label {
      font-size: var(--theme-text-size-xs, 10px);
      color: var(--muted);
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-caps, 0.04em);
    }

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

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

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

    .setup-step-connector {
      flex: 1;
      height: 1px;
      background: var(--border2);
      margin: 0 6px;
      align-self: flex-start;
      margin-top: 11px;
    }

    .setup-panel h2 {
      margin: 0 0 6px;
      font-size: var(--theme-text-size-2xl, 16px);
      font-weight: 1000;
    }

    .setup-panel label {
      display: grid;
      gap: 3px;
      font-size: var(--theme-text-size-sm, 11px);
      font-weight: 600;
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-label-wide, 0.03em);
    }

    .setup-panel label input[type="text"],
    .setup-panel label input[type="email"] {
      width: 100%;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid var(--border2);
      background: var(--input-bg, var(--bg));
      color: var(--fg);
      font-size: var(--theme-text-size-md, 12px);
    }

    .setup-panel label input[type="text"]:focus,
    .setup-panel label input[type="email"]:focus {
      outline: none;
      border-color: var(--fg);
    }

    /* Profile photo area inside setup */
    .setup-profile-photo {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    .setup-profile-photo__preview-wrap {
      width: 56px;
      height: 56px;
      border-radius: 999px;
      border: 1.5px solid var(--border2);
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
    }

    .setup-profile-photo__preview {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
    }

    .setup-profile-photo__placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--theme-text-size-3xl, 18px);
      font-weight: 700;
      color: var(--muted);
      background: var(--panel-strong-bg);
    }

    .setup-profile-photo__controls {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: var(--theme-text-size-sm, 11px);
    }

    .setup-profile-photo__controls label {
      font-size: var(--theme-text-size-sm, 11px);
      font-weight: 600;
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-label-wide, 0.03em);
    }

    /* Plan cards */
    .plan-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin: 6px 0;
    }

    .plan-card {
      position: relative;
      border: 1.5px solid var(--border2);
      border-radius: 12px;
      padding: 16px 14px;
      cursor: pointer;
      transition: border-color 0.15s;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .plan-card:hover {
      border-color: var(--fg);
    }

    .plan-card.is-selected {
      border-color: var(--fg);
      background: var(--panel-strong-bg);
    }

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

    .plan-card__name {
      font-size: var(--theme-text-size-lg, 13px);
      font-weight: 800;
      text-transform: var(--theme-text-transform-uppercase, uppercase);
      letter-spacing: var(--theme-tracking-caps, 0.04em);
    }

    .plan-card__price {
      font-size: var(--theme-text-size-sm, 11px);
      color: var(--muted);
      font-weight: 600;
    }

    .plan-card__features {
      list-style: none;
      padding: 0;
      margin: 6px 0 0;
      font-size: var(--theme-text-size-sm, 11px);
      line-height: var(--theme-line-height-copy-loose, 1.6);
      color: var(--muted);
    }

    .plan-card__features li::before {
      content: "— ";
    }

    /* Welcome box */
    .setup-welcome-box {
      border: 1px solid var(--border2);
      border-radius: 10px;
      padding: 14px;
      margin: 6px 0;
      font-size: var(--theme-text-size-sm, 11px);
      line-height: var(--theme-line-height-copy-relaxed, 1.55);
      background: var(--panel-strong-bg);
    }

    .setup-welcome-box p {
      margin: 0;
    }

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

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

      .plan-cards {
        grid-template-columns: 1fr;
      }
    }

    /* ── End setup modal ── */

    /* 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;
      }

      .auto-drop {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
        margin-top: 8px;
        text-align: center;
      }

      .auto-drop span {
        font-size: var(--theme-text-size-xs, 10px);
      }

      .auto-drop .publish-btn {
        width: 100%;
        font-size: var(--theme-text-size-xs, 10px);
        padding: 5px 10px;
      }

      .dashboard-primary-actions {
        gap: 10px;
      }

      .dashboard-primary-actions .inline-actions {
        flex-direction: column;
      }

      .dashboard-primary-actions .inline-actions button,
      .dashboard-primary-actions .inline-actions .primary-btn {
        width: 100%;
      }

      .quota-meter {
        margin-top: 10px;
      }

      .quota-label {
        font-size: var(--theme-text-size-xs, 10px);
      }

      .quota-hint {
        font-size: var(--theme-text-size-2xs, 9px);
      }

      .mini-pill {
        font-size: var(--theme-text-size-xs, 10px);
        padding: 3px 6px;
      }

      .key-gate-card {
        --popup-title-size: var(--theme-text-size-md, 12px);
        --popup-title-margin: 0 0 12px;
      }

      .key-gate-card .muted {
        font-size: var(--theme-text-size-sm, 11px);
        margin-bottom: 12px;
      }

      .key-gate-card input,
      .key-gate-card label {
        margin-bottom: 10px;
        font-size: var(--theme-text-size-xs, 10px);
      }

      .key-gate-card input {
        padding: 7px 10px;
      }

      .key-gate-card input[type="checkbox"] {
        margin-bottom: 0;
        padding: 0;
      }

      label {
        margin: 8px 0 4px;
        font-size: var(--theme-text-size-xs, 10px);
      }

      input[type="text"],
      input[type="password"],
      input[type="email"],
      select,
      textarea {
        font-size: var(--theme-text-size-xl, 14px);
        padding: 7px 8px;
      }

      .inline-actions button,
      .inline-actions .primary-btn {
        font-size: var(--theme-text-size-xs, 10px);
        padding: 5px 10px;
      }
    }