/* Colores base del tema oscuro y tipografía compartida por toda la aplicación. */
    :root {
      color-scheme: dark;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
      background: #101116;
      color: #f5f5f7;
      font-synthesis: none;
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      overflow-x: hidden;
      -webkit-tap-highlight-color: transparent;
    }

    /* Fondo y estructura base optimizada para dispositivos móviles (Mobile-First). */
    body {
      margin: 0;
      min-height: 100vh;
      background: radial-gradient(ellipse at 50% -20%, #34364b 0, #101116 54%);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    button,
    input,
    select {
      font: inherit;
      touch-action: manipulation;
    }

    input, select {
      font-size: 16px; /* Previene el zoom forzado e intrusivo de Safari en iOS */
    }

    /* Contenedor principal: base móvil con soporte para safe-area (notch / home bar) */
    .shell {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      padding: 32px 12px 64px;
      padding-top: max(32px, env(safe-area-inset-top));
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
      padding-bottom: max(64px, env(safe-area-inset-bottom));
    }

    header {
      margin-bottom: 22px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 2px 0 14px;
    }

    .home-logo-button {
      flex: 0 0 auto;
      padding: 0;
      border-radius: 16px;
      line-height: 0;
      color: inherit;
      background: transparent;
      box-shadow: none;
    }

    .brand-logo {
      display: block;
      width: 56px;
      height: 56px;
      flex: 0 0 56px;
      border-radius: 16px;
      box-shadow: 0 8px 24px #7b65eb35;
    }

    .brand-copy {
      min-width: 0;
    }

    .eyebrow {
      color: #aaa8c0;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    h1 {
      margin: 8px 0;
      font-size: clamp(32px, 6vw, 52px);
      letter-spacing: -.05em;
    }

    .subtitle {
      margin: 0;
      color: #aaaab5;
    }

    /* Paneles y controles de entrada: base móvil compacta */
    .panel {
      border: 1px solid #ffffff15;
      border-radius: 16px;
      background: #191a22eF;
      box-shadow: 0 12px 40px #0003;
      padding: 16px;
      margin-top: 14px;
    }

    h2 {
      margin: 0 0 14px;
      font-size: 17px;
      letter-spacing: -.02em;
    }

    .search-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      width: 100%;
    }

    .search-main-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      width: 100%;
    }

    .search-main-row input,
    .search-main-row #query {
      flex: 1 1 100%;
      width: 100%;
      min-width: 0;
      min-height: 44px;
    }

    .search-main-row .search-mode-switch {
      flex: 0 0 auto;
      height: 44px;
      box-sizing: border-box;
    }

    .search-main-row button[type=submit] {
      flex: 1 1 auto;
      min-height: 44px;
      white-space: nowrap;
    }

    input,
    select {
      min-width: 0;
      color: #f8f8fb;
      background: #111219;
      border: 1px solid #ffffff24;
      border-radius: 11px;
      padding: 11px 14px;
      font-size: 15px;
      line-height: 1.4;
      outline: none;
      box-sizing: border-box;
    }

    input::placeholder {
      color: #9390a5;
      opacity: 1;
    }

    input:focus,
    select:focus {
      border-color: #a99afa;
      box-shadow: 0 0 0 3px #8d7cf126;
    }


    button {
      border: 0;
      border-radius: 11px;
      padding: 11px 16px;
      color: #15131b;
      background: #c3b7ff;
      font-weight: 700;
      cursor: pointer;
      transition: filter .15s, transform .15s;
    }

    button:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
    }

    button:disabled {
      opacity: .5;
      cursor: wait;
      transform: none;
    }

    .status {
      min-height: 21px;
      margin: 12px 0 0;
      color: #aaaab5;
      font-size: 13px;
    }

    /* Resultados de YouTube, miniaturas y barra de progreso de descarga. */
    .results {
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }

    .video {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      padding: 12px;
      border: 1px solid #ffffff12;
      border-radius: 13px;
      background: #ffffff05;
    }

    .media-title {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 12px;
      width: 100%;
    }

    .cover {
      display: grid;
      flex: 0 0 64px;
      width: 64px;
      height: 64px;
      place-items: center;
      overflow: hidden;
      border-radius: 10px;
      background: linear-gradient(145deg, #38334c, #21232d);
      color: #c3b7ff;
      font-size: 24px;
    }

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

    .video-title {
      overflow-wrap: anywhere;
      line-height: 1.45;
      font-size: 14px;
    }

    .video button {
      width: 100%;
      min-height: 44px;
      flex: 0 0 auto;
    }

    .progress {
      height: 4px;
      overflow: hidden;
      margin-top: 10px;
      border-radius: 99px;
      background: #ffffff15;
    }

    .progress>span {
      display: block;
      width: 0;
      height: 100%;
      background: #b4a3ff;
      transition: width .2s;
    }

    /* Lista de canciones descargadas para su gesti?n desde el panel. */
    .track-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 12px;
    }

    .admin-track-search {
      width: 100%;
      margin: 14px 0;
    }

    .track-card {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 10px;
      border: 1px solid #ffffff12;
      border-radius: 13px;
      background: #ffffff05;
    }

    .track-card .cover {
      width: 56px;
      height: 56px;
      flex-basis: 56px;
    }

    .track-card-content {
      min-width: 0;
    }

    .track-card-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      flex-wrap: wrap;
    }

    .track-card-actions .icon-button {
      display: inline-grid;
      place-items: center;
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      padding: 0;
      border: 1px solid #ffffff20;
      border-radius: 9px;
      background: #ffffff0a;
      color: #c8c5d9;
      cursor: pointer;
      touch-action: manipulation;
      transition: background .15s, color .15s, transform .14s, border-color .15s;
    }

    .track-card-actions .icon-button svg {
      width: 16px;
      height: 16px;
    }

    .track-card-actions .icon-button:hover {
      color: #fff;
      background: #ffffff22;
      border-color: #ffffff40;
      transform: translateY(-1px);
    }

    [data-theme="light"] .track-card-actions .icon-button {
      border-color: #2924431a;
      background: #2924430a;
      color: #535064;
    }

    [data-theme="light"] .track-card-actions .icon-button:hover {
      color: #1c1833;
      background: #29244318;
      border-color: #29244330;
    }

    .add-playlist-modal {
      width: min(440px, calc(100% - 32px));
      padding: 22px;
      color: #f5f5f7;
      border: 1px solid #ffffff24;
      border-radius: 18px;
      background: #191a22;
      box-shadow: 0 24px 80px #000c;
    }

    .add-playlist-modal::backdrop {
      background: #0009;
      backdrop-filter: blur(4px);
    }

    .add-playlist-modal h3 {
      margin: 0 0 4px;
      font-size: 18px;
    }

    .add-playlist-subtitle {
      margin: 0 0 16px;
      color: #c3b7ff;
      font-size: 13px;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .add-playlist-body {
      display: grid;
      gap: 14px;
      margin-bottom: 20px;
    }

    .dropdown-label {
      font-size: 13px;
      color: #aaaab5;
      font-weight: 500;
    }

    .playlist-dropdown-container {
      display: grid;
      gap: 6px;
    }

    .playlist-dropdown-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 10px 14px;
      border: 1px solid #ffffff24;
      border-radius: 11px;
      background: #ffffff0a;
      color: inherit;
      font-size: 14px;
      cursor: pointer;
      text-align: left;
    }

    .playlist-dropdown-toggle:hover {
      background: #ffffff14;
      border-color: #ffffff36;
    }

    .dropdown-arrow {
      width: 16px;
      height: 16px;
      transition: transform .2s;
    }

    .playlist-dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
      transform: rotate(180deg);
    }

    .playlist-dropdown-menu {
      display: grid;
      gap: 4px;
      max-height: 190px;
      overflow-y: auto;
      padding: 6px;
      border: 1px solid #ffffff18;
      border-radius: 11px;
      background: #15161df8;
    }

    .playlist-dropdown-menu[hidden] {
      display: none;
    }

    .playlist-checkbox-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
      font-size: 13px;
      transition: background .12s;
    }

    .playlist-checkbox-item:hover {
      background: #ffffff12;
    }

    .playlist-checkbox-item.is-disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .playlist-checkbox-item input[type="checkbox"] {
      width: 17px;
      height: 17px;
      margin: 0;
      accent-color: #b4a3ff;
      cursor: pointer;
    }

    .playlist-checkbox-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 500;
    }

    .playlist-checkbox-badge {
      color: #aaaab5;
      font-size: 11px;
      flex: 0 0 auto;
    }

    .add-playlist-new-details {
      border-top: 1px solid #ffffff14;
      padding-top: 10px;
    }

    .add-playlist-new-details summary {
      cursor: pointer;
      color: #c3b7ff;
      font-size: 13px;
      font-weight: 600;
    }

    .add-playlist-new-form {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
    }

    .add-playlist-new-form input[type="text"] {
      flex: 1;
      min-width: 150px;
    }

    .add-playlist-new-form button {
      padding: 8px 14px;
      font-size: 13px;
    }

    [data-theme="light"] .add-playlist-modal {
      color: #272535;
      border-color: #29244324;
      background: #fff;
      box-shadow: 0 24px 80px #29244340;
    }

    [data-theme="light"] .add-playlist-subtitle {
      color: #7c62ee;
    }

    [data-theme="light"] .playlist-dropdown-toggle {
      border-color: #29244324;
      background: #2924430a;
    }

    [data-theme="light"] .playlist-dropdown-menu {
      border-color: #29244318;
      background: #f8f7fcf9;
    }

    [data-theme="light"] .playlist-checkbox-item:hover {
      background: #2924430e;
    }

    [data-theme="light"] .add-playlist-new-details {
      border-color: #29244314;
    }

    [data-theme="light"] .add-playlist-new-details summary {
      color: #7c62ee;
    }

    .track-cover-link,
    .track-title-link {
      min-width: 0;
      padding: 0;
      color: inherit;
      text-align: left;
      background: transparent;
    }

    .track-cover-link {
      overflow: hidden;
      border-radius: 10px;
    }

    .track-title-link:hover {
      text-decoration: underline;
      text-decoration-color: #c3b7ff;
    }

    .track-card-stats {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      min-height: 28px;
      margin-top: 2px;
      color: #aaaab5;
      font-size: 12px;
    }

    .library-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 10px;
    }

    .library-footer .status {
      margin: 0;
    }

    .refresh-tracks {
      display: grid;
      flex: 0 0 48px;
      width: 48px;
      height: 48px;
      place-items: center;
      padding: 10px;
      color: inherit;
      border: 1px solid #ffffff22;
      border-radius: 50%;
      background: #ffffff08;
    }

    .refresh-tracks[hidden] {
      display: none;
    }

    .refresh-tracks svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.8;
      transition: transform .35s;
    }

    .refresh-tracks:hover svg {
      transform: rotate(90deg);
    }

    .track-stat {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .track-stat svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.8;
    }

    .track-like {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 4px;
      color: inherit;
      background: transparent;
      font: inherit;
    }

    .track-like svg {
      transition: fill .16s, color .16s, transform .16s;
    }

    .track-like[aria-pressed="true"] {
      color: #ff6b91;
    }

    .track-like[aria-pressed="true"] svg {
      fill: currentColor;
    }

    .track-like:hover svg {
      transform: scale(1.16);
    }

    .song-page {
      max-width: 860px;
      margin: 20px auto;
      overflow: hidden;
      border: 1px solid #ffffff18;
      border-radius: 20px;
      background: #191a22ef;
      box-shadow: 0 20px 70px #0003;
    }

    .song-page[hidden] {
      display: none;
    }

    .song-page-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 22px;
      border-bottom: 1px solid #ffffff14;
    }

    .song-page-brand {
      font-weight: 750;
    }

    .song-page-hero {
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      justify-items: center;
      text-align: center;
      gap: 16px;
      padding: 16px;
    }

    .song-page-cover {
      display: block;
      width: 100%;
      max-width: 240px;
      margin: 0 auto;
      aspect-ratio: 1;
      border-radius: 15px;
      object-fit: cover;
      background: #343044;
    }

    .song-page-cover[hidden] {
      display: none;
    }

    .song-page-title {
      margin: 0 0 10px;
      overflow-wrap: anywhere;
      font-size: clamp(22px, 4vw, 34px);
    }

    .song-page-like {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: 14px;
      padding: 10px 15px;
    }

    .song-page-like svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.8;
    }

    .song-page-like[aria-pressed="true"] {
      color: #fff;
      background: #cf4771;
    }

    .track-card .video-title {
      overflow: hidden;
      max-height: 2.8em;
      line-height: 1.4;
      font-size: 13px;
    }

    .track-card {
      grid-template-columns: 56px minmax(0, 1fr);
    }

    .track-card-content {
      min-width: 0;
    }

    .player-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      margin: 14px 0 20px;
    }

    .channel-player {
      display: grid;
      min-width: 0;
      overflow: hidden;
      gap: 12px;
      padding: 14px 12px;
      border: 1px solid #ffffff18;
      border-radius: 15px;
      background: #ffffff05;
    }

    /* display:grid del reproductor no debe anular el atributo hidden. */
    .channel-player[hidden] {
      display: none;
    }

    .channel-player-both {
      grid-column: 1 / -1;
    }

    .channel-player h3 {
      margin: 0;
      font-size: 16px;
    }

    .channel-player select {
      width: 100%;
    }

    .song-picker {
      position: relative;
      z-index: 3;
      width: 100%;
      min-width: 0;
    }

    .song-picker-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      width: 100%;
      min-width: 0;
    }

    .song-picker-row .song-search {
      flex: 1 1 100%;
      width: 100%;
      min-width: 0;
      min-height: 46px;
      padding: 11px 14px;
      font-size: 15px;
      box-sizing: border-box;
    }

    .search-mode-switch {
      display: inline-flex;
      align-items: center;
      padding: 3px;
      border: 1px solid #ffffff24;
      border-radius: 12px;
      background: #ffffff0a;
      gap: 2px;
      flex: 0 0 auto;
    }

    .search-mode-btn {
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      padding: 0;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: #a4a2b3;
      cursor: pointer;
      transition: background .18s, color .18s, transform .14s, box-shadow .18s;
    }

    .search-mode-btn svg {
      width: 18px;
      height: 18px;
    }

    .search-mode-btn:hover {
      color: #f2efff;
      background: #ffffff12;
    }

    .search-mode-btn.is-active {
      color: #1f1a35;
      background: #cabaff;
      font-weight: 700;
      box-shadow: 0 2px 8px #cabaff40;
    }

    [data-theme="light"] .search-mode-switch {
      border-color: #29244322;
      background: #2924430a;
    }

    [data-theme="light"] .search-mode-btn {
      color: #6d697f;
    }

    [data-theme="light"] .search-mode-btn:hover {
      color: #272535;
      background: #29244312;
    }

    [data-theme="light"] .search-mode-btn.is-active {
      color: #fff;
      background: #7c62ee;
      box-shadow: 0 2px 8px #7c62ee40;
    }

    .track-search-results {
      position: absolute;
      z-index: 20;
      top: calc(100% + 6px);
      right: 0;
      left: 0;
      display: grid;
      max-height: 260px;
      overflow-y: auto;
      padding: 5px;
      border: 1px solid #ffffff24;
      border-radius: 12px;
      background: #20212b;
      box-shadow: 0 14px 35px #0008;
    }

    .track-search-results[hidden] {
      display: none;
    }

    .track-search-option {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px;
      color: inherit;
      text-align: left;
      background: transparent;
    }

    .track-search-option:hover {
      background: #ffffff12;
    }

    .track-search-option img,
    .search-result-placeholder {
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      border-radius: 7px;
      object-fit: cover;
      background: #343044;
    }

    .track-search-option span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .track-search-empty {
      padding: 12px;
      color: #aaaab5;
      font-size: 13px;
    }

    .player-mode {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 16px;
      border: 1px solid #ffffff18;
      border-radius: 13px;
      background: #ffffff05;
    }

    .player-mode-copy {
      display: grid;
      gap: 3px;
    }

    .player-mode-label {
      color: #aaaab5;
      font-size: 13px;
    }

    .mode-switch {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 58px;
      height: 58px;
      cursor: pointer;
    }

    .mode-switch input {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: 0;
      padding: 0;
      border: 0;
      opacity: 0;
    }

    .mode-switch-track {
      position: relative;
      display: grid;
      width: 54px;
      height: 54px;
      place-items: center;
      overflow: hidden;
      border: 1px solid #ffffff24;
      border-radius: 50%;
      background: #292633;
      color: #c8baff;
      box-shadow: inset 0 0 0 3px #ffffff08, 0 5px 16px #0004;
      transition: background .2s, color .2s, transform .2s, box-shadow .2s;
    }

    .mode-switch-track svg {
      position: absolute;
      width: 29px;
      height: 29px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.9;
      transition: opacity .18s, transform .22s;
    }

    .mode-icon-together {
      opacity: 1;
      transform: scale(1) rotate(0);
    }

    .mode-icon-separate {
      opacity: 0;
      transform: scale(.55) rotate(-35deg);
    }

    .mode-switch input:checked+.mode-switch-track {
      background: #cabaff;
      color: #211a38;
      box-shadow: inset 0 0 0 3px #ffffff45, 0 5px 18px #a58aff55;
    }

    .mode-switch input:checked+.mode-switch-track .mode-icon-together {
      opacity: 0;
      transform: scale(.55) rotate(35deg);
    }

    .mode-switch input:checked+.mode-switch-track .mode-icon-separate {
      opacity: 1;
      transform: scale(1) rotate(0);
    }

    .mode-switch input:focus-visible+.mode-switch-track {
      outline: 3px solid #a99afa;
      outline-offset: 4px;
    }

    .mode-switch:hover .mode-switch-track {
      transform: translateY(-1px);
    }

    .player-widget {
      display: grid;
      gap: 12px;
      margin-top: 4px;
    }

    .player-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
      width: 100%;
      color: #aaaab5;
      font-size: 13px;
    }

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

    button.player-track-label {
      min-width: 0;
      flex: 1;
      padding: 2px 4px;
      color: #f0edf9;
      font-weight: 600;
      font-size: 14px;
      text-align: left;
      background: transparent;
      border-radius: 4px;
    }

    button.player-track-label:not(:disabled):hover {
      text-decoration: underline;
      text-decoration-color: #c3b7ff;
      filter: none;
      transform: none;
    }

    button.player-track-label:disabled {
      opacity: 0.85;
      cursor: default;
    }

    .current-track {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 9px;
      flex: 1;
      overflow: hidden;
    }

    .current-track-cover {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      border-radius: 7px;
      object-fit: cover;
      background: #343044;
    }

    .current-track-cover[hidden] {
      display: none;
    }

    .player-time {
      flex: 0 0 auto;
      font-variant-numeric: tabular-nums;
    }

    .player-seek {
      width: 100%;
      height: 7px;
      margin: 4px 0 8px;
      padding: 0;
      appearance: none;
      border: 0;
      border-radius: 99px;
      background: linear-gradient(to right, #b4a3ff var(--progress, 0%), #ffffff20 var(--progress, 0%));
      cursor: pointer;
      touch-action: manipulation;
    }

    .player-seek:disabled {
      cursor: default;
      opacity: .45;
    }

    .player-seek::-webkit-slider-thumb {
      width: 16px;
      height: 16px;
      appearance: none;
      border: 0;
      border-radius: 50%;
      background: #d7ccff;
      box-shadow: 0 2px 6px #0004;
    }

    .player-seek::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border: 0;
      border-radius: 50%;
      background: #d7ccff;
      box-shadow: 0 2px 6px #0004;
    }

    .player-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(10px, 3.5vw, 20px);
    }

    .player-controls button {
      display: grid;
      flex: 0 0 auto;
      place-items: center;
      padding: 0;
      color: #d6d1e8;
      background: transparent;
      touch-action: manipulation;
    }

    .player-controls .skip-button {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      font-size: 13px;
      font-weight: 600;
      background: #ffffff08;
      border: 1px solid #ffffff12;
    }

    .player-controls .play-button {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      color: #17131f;
      background: #c3b7ff;
      box-shadow: 0 4px 14px #c3b7ff40;
    }

    .player-controls button:disabled {
      opacity: .4;
      cursor: default;
      transform: none;
    }

    .player-controls svg {
      width: 19px;
      height: 19px;
      fill: currentColor;
    }

    .player-controls .play-button svg {
      width: 22px;
      height: 22px;
    }

    .play-button.is-playing .icon-play,
    .play-button:not(.is-playing) .icon-pause {
      display: none;
    }

    .player-audio {
      display: none;
    }

    [data-theme="light"] .player-meta {
      color: #686578;
    }

    [data-theme="light"] .player-seek {
      background: linear-gradient(to right, #7663d5 var(--progress, 0%), #29244320 var(--progress, 0%));
    }

    [data-theme="light"] .player-controls button {
      color: #504866;
    }

    [data-theme="light"] .player-controls .play-button {
      color: #17131f;
    }

    [data-theme="light"] .track-search-results {
      border-color: #29244324;
      background: #fff;
      box-shadow: 0 14px 35px #29244325;
    }

    [data-theme="light"] .track-search-option:hover {
      background: #2924430d;
    }

    [data-theme="light"] .track-search-empty,
    [data-theme="light"] .player-mode-label {
      color: #686578;
    }

    .player-layout[hidden] {
      display: none;
    }

    .track-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin-top: 8px;
    }

    .track-actions button {
      min-width: 0;
      padding: 7px 8px;
      font-size: 11px;
    }

    .track-actions button:first-child {
      grid-column: 1 / -1;
    }

    .empty {
      padding: 18px;
      color: #898996;
      border: 1px dashed #ffffff1d;
      border-radius: 12px;
      text-align: center;
    }

    /* Avisos emergentes y formularios de acceso y administración de cuenta. */
    /* Avisos emergentes y formularios de acceso: base móvil optimizada */
    .toast {
      position: fixed;
      right: max(16px, env(safe-area-inset-right));
      bottom: max(16px, env(safe-area-inset-bottom));
      left: max(16px, env(safe-area-inset-left));
      max-width: 430px;
      margin: 0 auto;
      padding: 13px 16px;
      border: 1px solid #ffffff20;
      border-radius: 12px;
      background: #272833;
      box-shadow: 0 12px 36px #0006;
      z-index: 1000;
    }

    .toast[hidden] {
      display: none;
    }

    .auth-gate {
      width: calc(100% - 24px);
      max-width: 420px;
      margin: clamp(20px, 6vh, 48px) auto;
      padding: 20px 16px;
      border: 1px solid #ffffff20;
      border-radius: 18px;
      background: #191a22;
      box-shadow: 0 16px 50px #0005;
    }

    .auth-brand {
      display: flex;
      align-items: center;
      gap: 13px;
      margin-bottom: 20px;
    }

    .auth-brand .brand-logo {
      width: 54px;
      height: 54px;
      flex-basis: 54px;
      border-radius: 16px;
    }

    .brand-name {
      margin: 0;
      font-size: 20px;
      letter-spacing: -.03em;
    }

    .brand-tagline {
      margin: 3px 0 0;
      color: #aaaab5;
      font-size: 13px;
    }

    .auth-gate form {
      display: grid;
      gap: 12px;
    }

    .auth-gate input {
      width: 100%;
    }

    .auth-email-group {
      display: grid;
      gap: 12px;
    }

    .auth-email-group[hidden] {
      display: none;
    }

    .auth-password-row {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
    }

    .auth-password-row input {
      width: 100%;
      padding-right: 44px;
    }

    button.auth-password-toggle {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      padding: 0;
      color: #a5a4b5;
      background: transparent;
      border: 0;
      border-radius: 8px;
      box-shadow: none;
      font-weight: normal;
      cursor: pointer;
      transition: color .15s, background .15s, transform .15s;
    }

    button.auth-password-toggle:hover {
      color: #c3b7ff;
      background: #ffffff14;
      filter: none;
      transform: translateY(-50%) scale(1.08);
    }

    button.auth-password-toggle:active {
      transform: translateY(-50%) scale(0.95);
    }

    button.auth-password-toggle svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }

    button.auth-password-toggle .eye-open,
    button.auth-password-toggle .eye-closed {
      display: none;
    }

    button.auth-password-toggle[aria-pressed="true"] .eye-open {
      display: block;
    }

    button.auth-password-toggle[aria-pressed="false"] .eye-closed,
    button.auth-password-toggle:not([aria-pressed]) .eye-closed {
      display: block;
    }

    .auth-mode-toggle {
      margin-top: 14px;
      padding: 8px 0;
      color: #c3b7ff;
      background: transparent;
    }

    .remember-user {
      display: flex;
      align-items: center;
      gap: 9px;
      color: #c4c3cf;
      font-size: 14px;
    }

    .remember-user input {
      width: auto;
      margin: 0;
      accent-color: #b4a3ff;
    }

    .auth-toolbar {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      padding-top: 6px;
      color: #aaaab5;
      font-size: 13px;
    }

    .auth-toolbar button {
      padding: 9px 12px;
    }

    .auth-toolbar .theme-toggle {
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      padding: 8px;
      color: inherit;
      border: 1px solid #ffffff26;
      background: transparent;
    }

    .theme-toggle svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    [data-theme="dark"] .theme-icon-moon,
    [data-theme="light"] .theme-icon-sun {
      display: none;
    }

    .account-logout {
      margin-top: 28px;
    }

    .account-form {
      display: grid;
      gap: 10px;
      max-width: 520px;
      margin-top: 28px;
    }

    .account-form h3 {
      margin: 0 0 4px;
      font-size: 16px;
    }

    .account-form .status {
      margin-top: 0;
    }

    /* Bloque de actividad: una columna y zonas táctiles amplias como base móvil. */
    .user-statistics {
      display: grid;
      gap: 12px;
      margin-top: 28px;
    }

    .user-statistics[hidden] {
      display: none;
    }

    .user-statistics h3 {
      margin: 0;
      font-size: 16px;
    }

    .user-statistics-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
    }

    .user-stat-card {
      min-width: 0;
      padding: 16px;
      border: 1px solid #ffffff16;
      border-radius: 15px;
      background: #ffffff05;
    }

    .user-stat-card h4 {
      margin: 0 0 12px;
      font-size: 14px;
    }

    .user-top-list,
    .liked-song-list {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .user-top-list li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 42px;
      padding: 8px 10px;
      border-radius: 10px;
      background: #ffffff08;
    }

    .user-top-title {
      min-width: 0;
      overflow-wrap: anywhere;
      display: inline-flex;
      align-items: center;
      margin: 0;
      padding: 0;
      border: none;
      background: transparent;
      color: inherit;
      font: inherit;
      font-weight: 550;
      text-align: left;
      cursor: pointer;
      transition: color .15s ease, text-decoration .15s ease;
    }

    button.user-top-title:hover,
    .user-top-title-btn:hover {
      color: #c3b7ff;
      text-decoration: underline;
    }

    .user-top-plays {
      flex: 0 0 auto;
      color: #c3b7ff;
      font-size: 12px;
    }

    .user-listening-card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 14px;
      padding: 16px;
    }

    .user-listening-card-header {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .user-listening-card-header h4 {
      margin: 0 0 2px;
      font-size: 14px;
      font-weight: 700;
    }

    .user-listening-sub {
      font-size: 11px;
      color: #aaaab5;
    }

    .user-listening-icon-box {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      border-radius: 11px;
      background: linear-gradient(135deg, #7952f5, #5633cb);
      color: #fff;
      box-shadow: 0 4px 14px #7952f540;
    }

    .user-listening-icon-box svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2.2;
    }

    .user-listening-stat-body {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: auto;
    }

    .user-listening-big {
      font-size: 28px;
      font-weight: 800;
      color: #c3b7ff;
      letter-spacing: -0.02em;
      line-height: 1.1;
    }

    .user-listening-detail-text {
      margin: 0;
      font-size: 12px;
      color: #aaaab5;
    }

    .user-likes-icon-box {
      background: linear-gradient(135deg, #f43f5e, #be123c);
      box-shadow: 0 4px 14px #f43f5e40;
    }

    .user-likes-title-wrap {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }

    .user-stat-mid-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 8px 0;
      flex-grow: 1;
    }

    .user-stat-mid-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: #928fa8;
    }

    .user-compact-track-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .user-compact-track-item {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 6px 10px;
      border-radius: 9px;
      background: #ffffff08;
      border: 1px solid #ffffff0a;
      transition: background .15s ease, border-color .15s ease, transform .15s ease;
    }

    .user-compact-track-item:hover {
      background: #ffffff14;
      border-color: #ffffff20;
      transform: translateX(2px);
    }

    .user-compact-track-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      margin: 0;
      padding: 0;
      border: none;
      background: transparent;
      color: inherit;
      font: inherit;
      font-size: 13px;
      text-align: left;
      cursor: pointer;
      min-width: 0;
    }

    .user-compact-track-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
      flex: 1;
      font-weight: 550;
    }

    .user-compact-track-icon {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
      color: #c3b7ff;
      opacity: .85;
    }

    .user-likes-card .user-compact-track-icon {
      color: #fb7185;
    }

    .user-stats-empty-compact {
      margin: 6px 0;
      padding: 8px 10px;
      font-size: 12px;
    }

    .user-stats-empty {
      margin: 0;
      color: #aaaab5;
      font-size: 13px;
    }

    .admin-panel {
      width: 100%;
      max-width: none;
      margin-top: 20px;
    }

    .pending-accounts {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }

    .pending-account {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 11px 12px;
      border: 1px solid #ffffff18;
      border-radius: 11px;
      background: #ffffff05;
    }

    .pending-account-info {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .pending-account-email {
      color: #aaaab5;
      font-size: 13px;
      overflow-wrap: anywhere;
    }

    .pending-actions {
      display: flex;
      gap: 7px;
    }

    .pending-actions button {
      padding: 7px 10px;
      font-size: 12px;
    }

    .pending-actions .reject-button,
    .track-delete,
    .admin-delete-btn,
    .playlist-actions .danger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #ffffff;
      background: #dc2626;
      border: 1px solid #ef444455;
      border-radius: 9px;
      box-shadow: 0 2px 8px #dc262633;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
    }

    .pending-actions .reject-button:hover,
    .track-delete:hover,
    .admin-delete-btn:hover,
    .playlist-actions .danger:hover {
      background: #b91c1c;
      border-color: #ef4444;
      box-shadow: 0 4px 14px #dc262655;
      color: #ffffff;
    }

    .pending-actions .reject-button:active,
    .track-delete:active,
    .admin-delete-btn:active,
    .playlist-actions .danger:active {
      transform: scale(0.97);
    }

    .track-delete {
      grid-column: 1 / -1;
      width: 100%;
    }

    .track-delete svg,
    .admin-delete-btn svg,
    .trash-icon {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      flex-shrink: 0;
    }

    .admin-section-divider {
      height: 1px;
      margin: 22px 0 16px;
      background: #ffffff14;
    }

    .admin-playlists-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .admin-playlists-header h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
      color: #dedbeb;
    }

    .admin-public-playlists {
      display: grid;
      gap: 10px;
    }

    .admin-playlist-card {
      display: grid;
      gap: 8px;
      padding: 12px 14px;
      border: 1px solid #ffffff18;
      border-radius: 12px;
      background: #ffffff05;
    }

    .admin-playlist-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .admin-playlist-info {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .admin-playlist-title {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .admin-playlist-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: #aaaab5;
    }

    .admin-playlist-owner {
      color: #c3b7ff;
      font-weight: 500;
    }

    .admin-playlist-preview {
      font-size: 12px;
      color: #8e8d9d;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .admin-playlist-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .admin-unpublish-btn {
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 500;
      flex: 0 0 auto;
    }

    .admin-delete-btn {
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 500;
      flex: 0 0 auto;
    }

    .playlist-search-unpublish,
    .playlist-search-delete {
      display: inline-grid;
      place-items: center;
      width: 30px;
      height: 30px;
      padding: 0;
      border: 1px solid #b83c4b60;
      border-radius: 8px;
      background: #b83c4b18;
      color: #ffd9dd;
      cursor: pointer;
      transition: background .15s, color .15s;
    }

    .playlist-search-delete {
      border-color: #ef444470;
      background: #dc262622;
      color: #f87171;
    }

    .playlist-search-unpublish:hover {
      background: #b83c4b;
      color: #fff;
    }

    .playlist-search-delete:hover {
      background: #dc2626;
      border-color: #ef4444;
      color: #fff;
      box-shadow: 0 4px 12px #dc262640;
    }

    .playlist-search-unpublish svg,
    .playlist-search-delete svg {
      width: 15px;
      height: 15px;
    }

    /* Paginación de resultados, acciones de la página de canción y playlists. */
    .pager {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-top: 16px;
      color: #aaaab5;
      font-size: 13px;
    }

    .pager[hidden] {
      display: none;
    }

    .song-page-actions {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    .song-page-actions[hidden] {
      display: none;
    }

    .song-page-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .song-page-row select {
      flex: 1 1 180px;
    }

    .song-page-row input[type=text] {
      flex: 1 1 160px;
    }

    button.icon-button {
      display: inline-grid;
      place-items: center;
      width: 42px;
      height: 42px;
      padding: 0;
    }

    button.icon-button svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.9;
    }

    .song-page-like {
      padding: 10px 14px;
    }

    /* Registro de auditoría de descargas para el administrador en la página de canción */
    .song-page-admin-logs {
      margin-top: 24px;
      padding: 20px;
      border: 1px solid #7c6cf030;
      border-radius: 16px;
      background: linear-gradient(145deg, #1f1d2e90 0%, #17152490 100%);
      box-shadow: 0 10px 30px #00000030;
    }

    .song-page-admin-logs[hidden] {
      display: none;
    }

    .song-page-admin-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 6px;
    }

    .admin-logs-title-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .admin-logs-icon {
      width: 20px;
      height: 20px;
      color: #a394ff;
    }

    .song-page-admin-header h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
      color: #f2efff;
    }

    .admin-logs-badge {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 999px;
      background: #7c6cf025;
      border: 1px solid #7c6cf060;
      color: #c9bfff;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .song-logs-subtitle {
      margin: 0 0 16px;
      font-size: 12px;
      color: #9c99af;
    }

    .song-page-logs-list {
      display: grid;
      gap: 10px;
    }

    .song-log-card {
      padding: 12px 14px;
      border: 1px solid #ffffff12;
      border-radius: 12px;
      background: #ffffff05;
      display: grid;
      gap: 8px;
      transition: background .15s, border-color .15s;
    }

    .song-log-card:hover {
      background: #ffffff0a;
      border-color: #ffffff20;
    }

    .song-log-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .song-log-user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .song-log-avatar {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #7c6cf020;
      border: 1px solid #7c6cf040;
      font-size: 15px;
      flex-shrink: 0;
    }

    .song-log-user-details {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .song-log-username {
      font-size: 13px;
      color: #f5f4fb;
      font-weight: 600;
    }

    .song-log-email {
      font-size: 12px;
      color: #a394ff;
      text-decoration: none;
      word-break: break-all;
    }

    .song-log-time {
      font-size: 12px;
      color: #8c899c;
      font-variant-numeric: tabular-nums;
    }

    .song-log-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .song-log-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      background: #ffffff0a;
      color: #b7b5c8;
      border: 1px solid #ffffff12;
    }

    .song-log-tag svg {
      width: 13px;
      height: 13px;
    }

    .song-log-tag.tag-type {
      background: #2b6cb022;
      border-color: #3182ce40;
      color: #bee3f8;
    }

    .song-log-tag.tag-video code {
      font-family: inherit;
      color: #fbd38d;
      font-weight: 600;
    }

    .playlist-sidebar {
      box-sizing: border-box;
      margin-top: 20px;
      padding: 14px;
      border: 1px solid #ffffff15;
      border-radius: 20px;
      background: #191a22ef;
      box-shadow: 0 20px 70px #0003;
      overflow-x: hidden;
    }

    .playlist-sidebar[hidden] {
      display: none;
    }

    .playlist-sidebar h2 {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
    }

    [data-theme="light"] .playlist-sidebar {
      border-color: #29244318;
      background: #ffffffed;
      box-shadow: 0 20px 70px #29244312;
    }

    /* En pantallas anchas la barra de Tus playlists se fija a la izquierda del contenido central. */
    @media (min-width: 1440px) {
      .playlist-sidebar {
        position: fixed;
        top: 100px;
        left: calc(50% - 480px - 280px);
        width: 260px;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        margin: 0;
      }
    }

    #playlists-section {
      padding: 16px;
      border: 1px solid #ffffff2e;
      border-radius: 16px;
      background: #ffffff04;
    }

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

    .playlists-header h3 {
      margin: 0;
    }

    button.icon-button.small {
      width: 32px;
      height: 32px;
    }

    button.icon-button.small svg {
      width: 18px;
      height: 18px;
    }

    .playlist-dialog {
      width: min(420px, calc(100% - 32px));
      padding: 22px;
      color: #f5f5f7;
      border: 1px solid #ffffff24;
      border-radius: 16px;
      background: #191a22;
      box-shadow: 0 20px 70px #000a;
    }

    .playlist-dialog::backdrop {
      background: #0009;
      backdrop-filter: blur(3px);
    }

    .playlist-dialog .playlist-form {
      padding: 0;
      border: 0;
    }

    .playlist-dialog h3 {
      margin: 0 0 4px;
    }

    .playlist-dialog input[type=text] {
      width: 100%;
    }

    .playlist-dialog-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 6px;
    }

    #playlist-dialog-cancel {
      color: inherit;
      background: #ffffff10;
    }

    [data-theme="light"] #playlists-section {
      border-color: #2924433a;
      background: #29244305;
    }

    [data-theme="light"] .playlist-dialog {
      color: #272535;
      border-color: #29244324;
      background: #fff;
      box-shadow: 0 20px 70px #29244340;
    }

    [data-theme="light"] #playlist-dialog-cancel {
      background: #2924431a;
    }

    .playlist-track .reject-button {
      color: #ffd9dd;
      background: #b83c4b;
    }

    [data-theme="light"] .playlist-track .reject-button {
      color: #fff;
      background: #a92e3e;
    }

    .playlist-track button.icon-button,
    .playlist-actions button.icon-button {
      width: 34px;
      height: 34px;
      padding: 0;
    }

    button.queue-next {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      padding: 0;
      color: inherit;
      border: 1px solid #ffffff22;
      background: #ffffff08;
      border-radius: 50%;
    }

    button.queue-next svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linejoin: round;
      stroke-linecap: round;
    }

    button.queue-next:disabled {
      opacity: .35;
    }

    .player-queue {
      display: grid;
      gap: 6px;
      padding-top: 10px;
      border-top: 1px solid #ffffff14;
    }

    .player-queue[hidden] {
      display: none;
    }

    .player-queue-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
    }

    .player-queue-header button {
      padding: 5px 9px;
      font-size: 12px;
    }

    .player-queue ol {
      display: grid;
      gap: 4px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .player-queue li {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 8px;
      border-radius: 9px;
      background: #ffffff08;
      font-size: 13px;
      min-width: 0;
    }

    .player-queue li .player-queue-item-title,
    .player-queue li span {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
      margin: 0;
      padding: 2px 4px;
      border: none;
      background: transparent;
      color: inherit;
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border-radius: 4px;
      transition: color .15s ease, text-decoration .15s ease;
    }

    .player-queue li .player-queue-item-title:hover {
      color: #c3b7ff;
      text-decoration: underline;
    }

    .player-queue li button.player-queue-item-remove {
      padding: 2px 8px;
      font-size: 12px;
      color: inherit;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      cursor: pointer;
      flex-shrink: 0;
      transition: background .15s ease, border-color .15s ease;
    }

    .player-queue li button.player-queue-item-remove:hover {
      background: #ffffff14;
      border-color: #ffffff20;
    }

    [data-theme="light"] button.queue-next {
      border-color: #29244326;
      background: transparent;
    }

    [data-theme="light"] .player-queue {
      border-color: #29244318;
    }

    [data-theme="light"] .player-queue li {
      background: #2924430a;
    }

    .playlist-form {
      display: grid;
      gap: 10px;
    }

    .playlist-form[hidden] {
      display: none;
    }

    .playlist-form-row {
      display: flex;
      gap: 8px;
    }

    .playlist-form-row input[type=text] {
      flex: 1;
    }

    .playlist-public-option {
      display: flex;
      align-items: center;
      gap: 9px;
      color: #c4c3cf;
      font-size: 14px;
    }

    .playlist-public-option input {
      width: auto;
      margin: 0;
      accent-color: #b4a3ff;
    }

    .playlist-list {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
    }

    .playlist {
      border: 1px solid #ffffff16;
      border-radius: 14px;
      background: #ffffff05;
      box-sizing: border-box;
      max-width: 100%;
      overflow: hidden;
    }

    .playlist summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      min-height: 44px;
      padding: 8px 10px;
      cursor: pointer;
      list-style: none;
      box-sizing: border-box;
      max-width: 100%;
      user-select: none;
    }

    .playlist summary::-webkit-details-marker {
      display: none;
    }

    .playlist summary::after {
      content: "\2304";
      color: #c3b7ff;
      font-size: 14px;
      flex-shrink: 0;
      transition: transform .18s;
      padding: 0 2px;
    }

    .playlist[open] summary::after {
      transform: rotate(180deg);
    }

    .playlist-name-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: transparent;
      border: none;
      padding: 4px 6px;
      margin: 0;
      color: inherit;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      border-radius: 8px;
      min-width: 0;
      flex: 1;
      text-align: left;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .playlist-name-btn:hover {
      background: #ffffff14;
      color: #c3b7ff;
    }

    .playlist-name-btn span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
      display: block;
    }

    .playlist-name-icon {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      color: #c3b7ff;
      transition: transform 0.15s ease;
    }

    .playlist-name-btn:hover .playlist-name-icon {
      transform: scale(1.15);
    }

    .playlist-meta {
      color: #aaaab5;
      font-size: 11px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .playlist-body {
      display: grid;
      gap: 8px;
      padding: 4px 8px 12px;
      box-sizing: border-box;
      max-width: 100%;
      overflow-x: hidden;
    }

    .playlist-tracks {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
      box-sizing: border-box;
      max-width: 100%;
    }

    .playlist-track {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px;
      border-radius: 12px;
      background: #ffffff08;
      box-sizing: border-box;
      max-width: 100%;
      overflow: hidden;
      transition: background 0.15s ease;
    }

    .playlist-track:hover {
      background: #ffffff12;
    }

    .playlist-track .playlist-track-open {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      flex: 1;
      min-width: 0;
      padding: 0;
      margin: 0;
      background: transparent;
      border: none;
      color: inherit;
      text-align: left;
      cursor: pointer;
      overflow: hidden;
    }

    .playlist-track-thumb {
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      overflow: hidden;
      border-radius: 8px;
      background: linear-gradient(145deg, #38334c, #21232d);
      color: #c3b7ff;
      flex-shrink: 0;
      box-shadow: 0 4px 12px #0004;
    }

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

    .playlist-track-name {
      display: block;
      width: 100%;
      max-width: 100%;
      font-size: 12px;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #f0f0f5;
    }

    .playlist-track-actions {
      display: flex;
      flex-direction: column;
      gap: 5px;
      flex-shrink: 0;
      align-items: center;
    }

    .playlist-track-actions button {
      padding: 6px 8px;
      font-size: 12px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .playlist-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      width: 100%;
      box-sizing: border-box;
    }

    .playlist-actions button:not(.playlist-delete-btn) {
      padding: 7px 11px;
      font-size: 12px;
      border-radius: 8px;
    }

    .playlist-actions .playlist-delete-btn {
      margin-left: auto;
      flex: 0 0 32px;
      width: 32px;
      height: 32px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      border-radius: 8px;
      border: 1px solid #ef444455;
      background: #dc2626;
      color: #fff;
      cursor: pointer;
      box-shadow: 0 2px 8px #dc262633;
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
    }

    .playlist-actions .playlist-delete-btn:hover {
      background: #b91c1c;
      border-color: #ef4444;
      box-shadow: 0 4px 14px #dc262655;
    }

    .playlist-actions .playlist-delete-btn:active {
      transform: scale(0.95);
    }

    .playlist-actions .playlist-delete-btn svg {
      width: 15px;
      height: 15px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    .playlist-actions .reject-button {
      color: #ffd9dd;
      background: #b83c4b;
    }

    [data-theme="light"] .playlist {
      border-color: #29244318;
      background: #ffffffcc;
    }

    [data-theme="light"] .playlist-name-btn:hover {
      background: #2924430f;
      color: #6343d8;
    }

    [data-theme="light"] .playlist-name-icon {
      color: #6343d8;
    }

    [data-theme="light"] .playlist summary::after {
      color: #6343d8;
    }

    [data-theme="light"] .playlist-track {
      background: #29244308;
    }

    [data-theme="light"] .playlist-track:hover {
      background: #29244312;
    }

    [data-theme="light"] .playlist-track-thumb {
      background: linear-gradient(145deg, #e2daf8, #cac0e8);
      color: #6343d8;
    }

    [data-theme="light"] .playlist-track-name {
      color: #292443;
    }

    [data-theme="light"] .playlist-meta {
      color: #7a778c;
    }

    .playlist-search-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 4px 8px;
    }

    .playlist-search-play {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
      padding: 6px 4px;
      color: inherit;
      text-align: left;
      background: transparent;
      border: 0;
      cursor: pointer;
    }

    .playlist-search-play span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .playlist-search-save {
      display: inline-grid;
      place-items: center;
      flex: 0 0 32px;
      width: 32px;
      height: 32px;
      padding: 0;
      border-radius: 8px;
      border: 1px solid #ffffff24;
      background: #ffffff10;
      color: inherit;
      cursor: pointer;
    }

    .playlist-search-save svg {
      width: 16px;
      height: 16px;
    }

    .playlist-search-save:hover {
      background: #ffffff20;
    }

    [data-theme="light"] .playlist-search-save {
      border-color: #29244324;
      background: #2924430f;
    }

    [data-theme="light"] .playlist-search-save:hover {
      background: #2924431f;
    }

    [data-theme="light"] .playlist {
      border-color: #29244318;
      background: #29244308;
    }

    [data-theme="light"] .playlist-track .playlist-track-open {
      background: #2924430a;
    }

    [data-theme="light"] .playlist-actions .danger {
      color: #fff;
      background: #a92e3e;
    }

    [data-theme="light"] .playlist-public-option {
      color: #504d61;
    }

    /* Foco de teclado y ajustes visuales para los temas y pantallas pequeñas. */
    button:focus-visible,
    input:focus-visible {
      outline: 3px solid #a99afa;
      outline-offset: 3px;
    }

    [data-theme="light"] {
      color-scheme: light;
      background: #f2f1f8;
      color: #272535;
    }

    [data-theme="light"] body {
      background: radial-gradient(ellipse at 50% -20%, #e0dcf4 0, #f4f3f8 54%);
    }

    [data-theme="light"] .panel,
    [data-theme="light"] .auth-gate {
      border-color: #29244318;
      background: #ffffffed;
      box-shadow: 0 20px 70px #29244312;
    }

    [data-theme="light"] .subtitle,
    [data-theme="light"] .status,
    [data-theme="light"] .eyebrow,
    [data-theme="light"] .brand-tagline,
    [data-theme="light"] .auth-toolbar {
      color: #686578;
    }

    [data-theme="light"] input,
    [data-theme="light"] select {
      color: #272535;
      background: #fff;
      border-color: #29244324;
    }

    [data-theme="light"] .video,
    [data-theme="light"] .track-card {
      border-color: #29244318;
      background: #29244308;
    }

    [data-theme="light"] .channel-player {
      border-color: #29244318;
      background: #29244308;
    }

    [data-theme="light"] .progress {
      background: #29244316;
    }

    [data-theme="light"] .empty {
      color: #686578;
      border-color: #29244336;
    }

    [data-theme="light"] .toast {
      color: #272535;
      border-color: #29244322;
      background: #fff;
      box-shadow: 0 12px 36px #29244320;
    }

    [data-theme="light"] .remember-user {
      color: #504d61;
    }

    [data-theme="light"] button.auth-password-toggle {
      color: #686578;
    }

    [data-theme="light"] button.auth-password-toggle:hover {
      color: #5545a4;
      background: #29244310;
    }

    [data-theme="light"] .auth-mode-toggle {
      color: #5545a4;
    }

    [data-theme="light"] .admin-panel {
      border-color: #29244320;
    }

    [data-theme="light"] .pending-account {
      border-color: #29244320;
      background: #29244308;
    }

    [data-theme="light"] .pending-account-email {
      color: #686578;
    }

    [data-theme="light"] .user-stat-card {
      border-color: #29244318;
      background: #29244308;
    }

    [data-theme="light"] .user-top-list li,
    [data-theme="light"] .liked-track-button {
      background: #2924430a;
    }

    [data-theme="light"] button.user-top-title:hover,
    [data-theme="light"] .user-top-title-btn:hover {
      color: #5b21b6;
    }

    [data-theme="light"] .player-queue li .player-queue-item-title:hover {
      color: #5b21b6;
    }

    [data-theme="light"] .player-queue li button.player-queue-item-remove:hover {
      background: #29244314;
      border-color: #29244326;
    }

    [data-theme="light"] .user-listening-card-header h4 {
      color: #272535;
    }

    [data-theme="light"] .user-listening-sub {
      color: #7a778c;
    }

    [data-theme="light"] .user-listening-big {
      color: #6343d8;
    }

    [data-theme="light"] .user-listening-detail-text {
      color: #686578;
    }

    [data-theme="light"] .user-stat-mid-label {
      color: #686578;
    }

    [data-theme="light"] .user-compact-track-item {
      background: #2924430a;
      border-color: #29244310;
    }

    [data-theme="light"] .user-compact-track-item:hover {
      background: #29244314;
      border-color: #29244320;
    }

    [data-theme="light"] .user-compact-track-icon {
      color: #6343d8;
    }

    [data-theme="light"] .user-likes-card .user-compact-track-icon {
      color: #e11d48;
    }

    [data-theme="light"] .song-page {
      border-color: #29244318;
      background: #ffffffed;
      box-shadow: 0 20px 70px #29244312;
    }

    [data-theme="light"] .pending-actions .reject-button,
    [data-theme="light"] .track-delete,
    [data-theme="light"] .admin-delete-btn,
    [data-theme="light"] .playlist-actions .danger,
    [data-theme="light"] .playlist-actions .playlist-delete-btn {
      color: #fff;
      background: #dc2626;
      border-color: #b91c1c;
      box-shadow: 0 2px 8px #dc262626;
    }

    [data-theme="light"] .pending-actions .reject-button:hover,
    [data-theme="light"] .track-delete:hover,
    [data-theme="light"] .admin-delete-btn:hover,
    [data-theme="light"] .playlist-actions .danger:hover,
    [data-theme="light"] .playlist-actions .playlist-delete-btn:hover {
      background: #b91c1c;
      border-color: #991b1b;
      color: #fff;
    }

    [data-theme="light"] .admin-section-divider {
      background: #29244314;
    }

    [data-theme="light"] .admin-playlists-header h3 {
      color: #272535;
    }

    [data-theme="light"] .admin-playlist-card {
      border-color: #29244320;
      background: #29244308;
    }

    [data-theme="light"] .admin-playlist-owner {
      color: #6952d7;
    }

    [data-theme="light"] .admin-playlist-meta {
      color: #686578;
    }

    [data-theme="light"] .admin-playlist-preview {
      color: #7a778c;
    }

    [data-theme="light"] .playlist-search-unpublish {
      border-color: #b83c4b40;
      background: #b83c4b14;
      color: #a92e3e;
    }

    [data-theme="light"] .playlist-search-delete {
      border-color: #ef444460;
      background: #dc262615;
      color: #dc2626;
    }

    [data-theme="light"] .playlist-search-unpublish:hover {
      background: #b83c4b;
      color: #fff;
    }

    [data-theme="light"] .playlist-search-delete:hover {
      background: #dc2626;
      border-color: #b91c1c;
      color: #fff;
    }



    [data-theme="light"] .song-page-admin-logs {
      border-color: #6952d730;
      background: linear-gradient(145deg, #f7f6fc 0%, #edeafc 100%);
      box-shadow: 0 10px 30px #29244310;
    }

    [data-theme="light"] .song-page-admin-header h3 {
      color: #272535;
    }

    [data-theme="light"] .admin-logs-icon {
      color: #6952d7;
    }

    [data-theme="light"] .admin-logs-badge {
      background: #6952d718;
      border-color: #6952d740;
      color: #553fc4;
    }

    [data-theme="light"] .song-logs-subtitle {
      color: #686578;
    }

    [data-theme="light"] .song-log-card {
      border-color: #29244318;
      background: #ffffff90;
    }

    [data-theme="light"] .song-log-card:hover {
      background: #ffffff;
      border-color: #29244330;
    }

    [data-theme="light"] .song-log-username {
      color: #272535;
    }

    [data-theme="light"] .song-log-email {
      color: #553fc4;
    }

    [data-theme="light"] .song-log-time {
      color: #7a778c;
    }

    [data-theme="light"] .song-log-tag {
      background: #2924430a;
      color: #555266;
      border-color: #29244318;
    }

    [data-theme="light"] .song-log-tag.tag-type {
      background: #ebf8ff;
      border-color: #bee3f8;
      color: #2b6cb0;
    }

    [data-theme="light"] .song-log-tag.tag-video code {
      color: #c05621;
    }

    /* ==========================================================================
       ESCALADO PROGRESIVO: MOBILE-FIRST A TABLET Y ESCRITORIO
       ========================================================================== */

    /* Pantallas medianas / tabletas / móviles en horizontal (min-width: 640px) */
    @media (min-width: 640px) {
      .search-main-row {
        flex-wrap: nowrap;
        gap: 10px;
      }

      .search-main-row input,
      .search-main-row #query {
        flex: 1 1 auto;
        width: auto;
      }

      .search-main-row button[type=submit] {
        flex: 0 0 auto;
      }

      .song-picker-row {
        flex-wrap: nowrap;
      }

      .song-picker-row .song-search {
        flex: 1 1 auto;
        width: auto;
      }

      .video {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 14px;
      }

      .video button {
        width: auto;
      }

      .cover {
        flex: 0 0 76px;
        width: 76px;
        height: 76px;
        font-size: 27px;
      }

      .song-page-hero {
        grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
        align-items: start;
        justify-items: start;
        text-align: left;
        gap: 24px;
      }

      .song-page-cover {
        max-width: 280px;
        margin: 0;
      }

      .song-page-actions {
        justify-content: flex-start;
      }

      .user-statistics-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      }
    }

    /* Pantallas de escritorio (min-width: 768px) */
    @media (min-width: 768px) {
      .shell {
        width: calc(100% - 40px);
        max-width: 960px;
        padding: 48px 0 72px;
      }

      .panel {
        padding: 24px;
        border-radius: 20px;
        margin-top: 20px;
      }

      .brand {
        gap: 14px;
        margin: 4px 0 18px;
      }

      .brand-logo {
        width: 68px;
        height: 68px;
        flex: 0 0 68px;
        border-radius: 19px;
      }

      .player-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .channel-player-both {
        grid-column: 1 / -1;
      }

      .channel-player {
        padding: 18px;
      }

      .track-card {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
      }

      .track-card .cover {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
      }

      .playlist-sidebar {
        margin-top: 20px;
        border-radius: 20px;
      }

      .auth-gate {
        padding: 24px;
        margin: 10vh auto;
      }
    }

    /* Accesibilidad: preferencia de movimiento reducido */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }