:root {
  /* LAYER 1 - PRIMITIVES */
  --blue-400:#7ba0ff;  --blue-500:#618dff;  --blue-600:#4d7dff;  --blue-700:#3865f8;  --blue-800:#2f5fff;  --gray-900:#0b0b0f;  --gray-850:#121218;  --gray-800:#1b1b20;  --gray-750:#22222a;
  --gray-700:#6d6d75;  --gray-600:#8a8a93;  --gray-500:#b0b0b8;  --gray-100:#f5f5f7;
  --green-500:#1db954; --green-700:#15803d;
  --red-400:#f87171;   --amber-400:#ffcf6b; --focus-tone:#8ab0ff;
  /* LAYER 2 - SEMANTIC (dark default) */
  --bg: var(--gray-900, #0b0b0f);                      /* alias -> #0b0b0f (unchanged)          */
  --surface: var(--gray-850, #121216);                 /* alias -> #121218 (was #121216)         */
  --surface2: var(--gray-800, #1a1a1f);                /* alias -> #1b1b20 (was #1a1a1f)         */
  --surface-1: var(--gray-850, #121218);               /* NEW page bg -> #121218                  */
  --surface-2: var(--gray-800, #1b1b20);               /* NEW cards/sidebar/bottom bar -> #1b1b20 */
  --surface-3: var(--gray-750, #22222a);               /* NEW inputs/buttons/rows -> #22222a      */
  --surface-4: var(--gray-750, #22222a);               /* NEW hovered rows/knob host (unused T2)  */
  --surface-5: var(--gray-850, #121218);               /* NEW modals/fullscreen (unused T2)       */
  --text: var(--gray-100, #f5f5f7);                    /* NEW (was UNDEFINED; 4 fallback sites)   */
  --on-surface: var(--gray-100, #f5f5f7);              /* NEW primary text                        */
  --on-surface-sub: var(--gray-500, #b0b0b8);          /* NEW secondary text                      */
  --on-surface-faint: var(--gray-600, #8a8a93);        /* NEW 12px labels                         */
  --subtext: var(--on-surface-sub);                    /* alias -> #b0b0b8 (was #a0a0a8)          */
  --faint: var(--on-surface-faint);                    /* alias -> #8a8a93 (was #6b6b73) FIX 4.5:1*/
  --grid: var(--gray-700, #6d6d75);                    /* alias -> #6d6d75 (was #2a2a2a) FIX 3:1  */
  --hover: #24242b;                                    /* alias, LITERAL (proposal slip: gray-800 would resolve #1b1b20) */
  --accent: var(--blue-600, #4d7dff);                  /* alias -> #4d7dff TEXT-only token        */
  --accent-hover: var(--blue-400, #7ba0ff);            /* alias -> #7ba0ff (unused, kept)         */
  --accent-fill: var(--blue-700, #3865f8);             /* NEW filled-button bg (unused T2)        */
  --on-accent: #fff;                                   /* NEW                                    */
  --accent-2: var(--green-500, #1db954);               /* NEW green text (unused T2)              */
  --accent-2-fill: var(--green-700, #15803d);          /* NEW green fill (unused T2)              */
  --outline: var(--gray-700, #6d6d75);                 /* NEW control borders (unused T2)         */
  --focus: var(--focus-tone, #8ab0ff);                 /* NEW focus ring (unused T2)              */
  --danger: var(--red-400, #f87171);                   /* NEW (was UNDEFINED; 1 fallback site)    */
  --warn: var(--amber-400, #ffcf6b);                   /* NEW                                    */
  /* rgba washes (T3) */
  --border-soft: rgba(42, 42, 42, 0.5);
  --scrim: rgba(0, 0, 0, 0.6);
  --overlay-scrim: rgba(8, 8, 12, 0.72);
  --pwa-scrim: rgba(0, 0, 0, 0.55);
  --topbar-glass: rgba(11, 11, 15, 0.95);
  --wash: rgba(255, 255, 255, 0.05);
  --wash-strong: rgba(255, 255, 255, 0.1);
  --wash-soft: rgba(255, 255, 255, 0.04);
  --accent-wash: rgba(29, 185, 84, 0.14);
  --accent-wash-soft: rgba(29, 185, 84, 0.06);
  --warn-wash: rgba(255, 200, 60, 0.16);
  /* typography (§4) */ --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:16px; --fs-lg:18px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:30px;
  /* line-height (§4) */ --lh-ui:1.45; --lh-title:1.2;
  /* spacing (§5) */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; --space-page-bottom:96px;
  /* radius (§5) */ --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-pill:999px; --radius-round:50%;
  /* shadow (§5) */ --shadow-1:0 1px 3px rgba(0,0,0,0.4); --shadow-2:0 10px 15px -3px rgba(0,0,0,0.4); --shadow-3:0 25px 50px -12px rgba(0,0,0,0.8);
  /* motion (§8) */ --dur-fast:0.15s; --dur:0.2s; --dur-slow:0.25s; --ease:cubic-bezier(0.4,0,0.2,1);
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;  /* alias, verbatim */
}

[data-theme="light"] {
  --bg:#f5f5f7; --surface:#ffffff; --surface2:#e9e9ee;
  --surface-1:#f5f5f7; --surface-2:#ffffff; --surface-3:#e9e9ee; --surface-4:#e0e0e6; --surface-5:#ffffff;
  --on-surface:#1a1a1f; --on-surface-sub:#4a4a55; --on-surface-faint:#666670;
  --text:#1a1a1f; --subtext:#4a4a55; --faint:#666670;
  --grid:#6d6d75; --hover:rgba(0,0,0,0.05);
  --accent:#2f5fff; --accent-fill:#2f5fff; --on-accent:#fff; --outline:#6d6d75; --focus:#2a5df2;
  --accent-2:#15803d; /* M4: green-700 no light — #1db954 falha AA (2.59:1) sobre branco; #15803d = 5.02:1 */
  --border-soft:rgba(0,0,0,0.12); --topbar-glass:rgba(255,255,255,0.9);
  --wash:rgba(0,0,0,0.04); --wash-strong:rgba(0,0,0,0.08); --wash-soft:rgba(0,0,0,0.03);
  --accent-wash:rgba(29,185,84,0.12); --accent-wash-soft:rgba(29,185,84,0.06); --warn-wash:rgba(255,200,60,0.25);
}

/* ---------- Focus (global keyboard ring, T4) ---------- */

:focus-visible {
  outline: 2px solid var(--focus, #8ab0ff);
  outline-offset: 2px;
}

/* Older engines: no :focus-visible support — fall back to plain :focus. */
@supports not selector(:focus-visible) {
  :focus {
    outline: 2px solid var(--focus, #8ab0ff);
    outline-offset: 2px;
  }
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
}

/* Dynamic viewport: the URL bar shrinking on mobile must not overflow the app. */
@supports (height: 100dvh) {
  html,
  body,
  #app {
    height: 100dvh;
  }
}

body {
  background: var(--bg);
  color: var(--text, #ffffff);
  font-family: var(--font-sans);
  line-height: var(--lh-ui, 1.45);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--grid);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--outline, #3a3a42);
}

button {
  font-family: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

input {
  font-family: inherit;
}

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

img {
  display: block;
}

/* ---------- Layout ---------- */

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.main-area {
  position: relative;
  flex: 1;
  overflow-y: auto;
  background: linear-gradient(to bottom, rgba(26, 26, 31, 0.6), var(--bg));
}

.page {
  padding-bottom: 96px;
}

/* Mobile bottom bar is taller (now playing + controls + progress). */
@media (max-width: 767px) {
  .page {
    padding-bottom: 196px;
  }
}

/* ---------- Sidebar ---------- */

.sidebar {
  display: flex;
  flex-direction: column;
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-soft, rgba(42, 42, 42, 0.5));
  background: var(--surface-2, #1b1b20);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sidebar-brand svg {
  color: var(--accent);
}

.sidebar-close {
  display: none;
  padding: 4px;
  border-radius: 9999px;
  color: var(--subtext);
}

.sidebar-close:hover {
  color: var(--text, #fff);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--subtext);
  cursor: pointer;
  transition: color 0.15s;
}

.nav-link:hover {
  color: var(--text, #fff);
}

.nav-link.active {
  color: var(--text, #fff);
  background: var(--hover);
}

.sidebar-playlists-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 20px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.sidebar-playlists {
  flex: 1;
  overflow-y: auto;
  margin-top: 4px;
  padding: 0 12px 12px;
}

.playlist-link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--subtext);
  cursor: pointer;
  transition: color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.playlist-link:hover {
  color: var(--text, #fff);
}

.playlist-link.active {
  color: var(--text, #fff);
  background: var(--hover);
}

.playlists-empty {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--faint);
}

.sidebar-footer {
  border-top: 1px solid var(--border-soft, rgba(42, 42, 42, 0.5));
  padding: 12px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
}

.sidebar-user-info {
  min-width: 0;
}

.sidebar-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}

.sidebar-user-handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--faint);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 9999px;
  color: var(--subtext);
  transition: background var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.icon-btn:hover {
  background: var(--hover);
  color: var(--text, #fff);
}

/* ---------- Mobile top bar ---------- */

.mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  background: var(--topbar-glass, rgba(11, 11, 15, 0.95));
  backdrop-filter: blur(8px);
}

.mobile-topbar span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.mobile-topbar span svg {
  color: var(--accent);
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
}

.mobile-overlay.open {
  display: block;
}

.mobile-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim, rgba(0, 0, 0, 0.6));
}

.mobile-sidebar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 288px;
  background: var(--surface-2, #1b1b20);
  box-shadow: var(--shadow-3);
}

/* ---------- Cards / sections ---------- */

.page-padding {
  padding: 24px 24px 0;
}

.page-title {
  margin: 0 0 8px;
  font-size: clamp(30px, 3vw + 1rem, 48px);
  font-weight: 700;
  line-height: var(--lh-title, 1.2);
}

.section {
  padding: 12px 24px;
}

.section-title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
}

.card-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.card {
  width: 144px;
  flex-shrink: 0;
  border-radius: var(--radius-md, 10px);
  background: var(--surface-2, #1b1b20);
  border: 1px solid var(--outline, #6d6d75);
  padding: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.2s;
}

.card:hover {
  background: var(--hover);
  transform: translateY(-2px);
}

.card-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

.card-image-wrap.square {
  aspect-ratio: 1 / 1;
}

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

.card-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: var(--accent-fill, #3865f8);
  color: #fff;
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.15s, transform 0.15s, background 0.15s;
}

.card:hover .card-play {
  opacity: 1;
  transform: translateY(0);
}

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

.card-subtitle {
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--subtext);
}

.genre-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 144px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(97, 141, 255, 0.4), var(--grid));
  box-shadow: inset 0 0 0 1px var(--outline, #6d6d75);
  padding: 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s;
}

.genre-card:hover {
  transform: scale(1.05);
}

.genre-count {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

.empty-state {
  padding: 40px;
  text-align: center;
  color: var(--subtext);
}

.empty-state p:first-child {
  margin: 0;
  font-size: 18px;
}

.empty-state p:last-child {
  margin: 4px 0 0;
  font-size: 14px;
}

/* ---------- Tabs ---------- */

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.tab-btn {
  border-radius: 9999px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  background: var(--surface);
  color: var(--subtext);
  transition: color 0.15s;
}

.tab-btn:hover {
  color: var(--text, #fff);
}

.tab-btn.active {
  background: #fff;
  color: #000;
}

.card-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Track rows ---------- */

.track-list {
  border-radius: 12px;
  background: rgba(18, 18, 22, 0.3);
  padding: 8px;
}

.track-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  padding: 8px 12px;
  transition: background 0.15s;
}

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

.track-number {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--subtext);
}

.track-play-btn {
  display: none;
  color: #fff;
}

.track-row:hover .track-number .track-num-text {
  display: none;
}

.track-row:hover .track-play-btn {
  display: block;
}

/* Linha em reprodução (sincronizada pelo player). */
.track-row.playing .track-title {
  color: var(--accent);
}

.track-row.playing .track-num-text {
  display: none;
}

.track-row.playing .track-number::before {
  content: '▶';
  font-size: 11px;
  color: var(--accent);
}

.track-row.playing:hover .track-number::before {
  display: none;
}

.track-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.track-art {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}

.track-info {
  min-width: 0;
}

.track-title {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
}

.track-artist {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--subtext);
}

.track-album {
  display: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
  font-size: 14px;
  color: var(--subtext);
}

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

.track-like {
  padding: 4px;
  color: var(--subtext);
  opacity: 0;
  transition: opacity var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.track-row:hover .track-like {
  opacity: 1;
}

.track-like.liked {
  color: var(--accent);
  opacity: 1;
}

.track-duration {
  width: 40px;
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--subtext);
}

@media (min-width: 640px) {
  .track-row {
    grid-template-columns: 2.5rem 1fr 1fr auto auto;
  }

  .track-num-text {
    display: inline;
  }

  .track-art {
    display: block;
  }

  .track-album {
    display: block;
  }

  .track-like {
    opacity: 0;
  }

  .track-row:hover .track-like {
    opacity: 1;
  }
}

/* ---------- Detail headers (album/artist/playlist) ---------- */

.detail-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: linear-gradient(to bottom, rgba(42, 42, 42, 0.4), transparent);
  padding: 24px;
}

.detail-header.horizontal {
  flex-direction: row;
  align-items: flex-end;
}

.detail-art {
  width: 176px;
  height: 176px;
  flex-shrink: 0;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: var(--shadow-3);
}

.detail-art.round {
  border-radius: 9999px;
}

.detail-art-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 176px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), rgba(97, 141, 255, 0.4));
  font-size: 60px;
  box-shadow: var(--shadow-3);
}

.detail-info {
  min-width: 0;
  text-align: center;
}

.detail-type {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--subtext);
}

.detail-title {
  margin: 4px 0 0;
  word-break: break-word;
  font-size: clamp(36px, 3.5vw + 1rem, 48px);
  font-weight: 700;
  line-height: var(--lh-title, 1.2);
}

.detail-meta {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--subtext);
}

.detail-meta .link {
  cursor: pointer;
  font-weight: 500;
  color: var(--text, #fff);
}

.detail-meta .link:hover {
  text-decoration: underline;
}

.detail-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 9999px;
  background: var(--accent-fill, #3865f8);
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  transition: transform 0.15s;
}

.btn-accent:hover {
  transform: scale(1.05);
}

.btn-accent:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.btn-accent:disabled:hover {
  transform: none;
}

.btn-icon-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 9999px;
  color: var(--subtext);
  transition: background var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn-icon-lg:hover {
  background: var(--hover);
  color: var(--text, #fff);
}

.btn-icon-lg.liked {
  color: var(--accent);
}

@media (min-width: 640px) {
  .detail-header.horizontal {
    align-items: flex-end;
  }

  .detail-art,
  .detail-art-icon {
    width: 224px;
    height: 224px;
  }

  .detail-info {
    text-align: left;
  }

  .detail-title {
    font-size: clamp(36px, 3.5vw + 1rem, 48px);
  }

  .detail-actions {
    justify-content: flex-start;
  }
}

.detail-content {
  padding: 0 24px;
}

.track-list-header {
  display: none;
  grid-template-columns: 2.5rem 1fr 1fr auto;
  gap: 12px;
  border-bottom: 1px solid var(--border-soft, rgba(42, 42, 42, 0.5));
  padding: 0 12px 8px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}

@media (min-width: 640px) {
  .track-list-header {
    display: grid;
  }
}

.section-block {
  margin-top: 24px;
}

.section-block h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--subtext);
  cursor: pointer;
  transition: color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.back-link:hover {
  color: var(--text, #fff);
}

.playlist-track-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.playlist-track-row > .flex-1 {
  flex: 1;
  min-width: 0;
}

.remove-track-btn {
  padding: 8px;
  color: var(--subtext);
  opacity: 0;
  transition: opacity var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.playlist-track-row:hover .remove-track-btn {
  opacity: 1;
}

.remove-track-btn:hover {
  color: var(--danger, #f87171);
}

/* ---------- Login ---------- */

.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 16px;
  background: linear-gradient(to bottom, rgba(26, 26, 31, 0.6), var(--bg));
}

.login-box {
  width: 100%;
  max-width: 384px;
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.login-brand svg {
  color: var(--accent);
}

.login-brand h1 {
  margin: 0;
  font-size: clamp(30px, 2.5vw + 1rem, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-title, 1.2);
}

.login-brand p {
  margin: 0;
  font-size: 14px;
  color: var(--subtext);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 16px;
  background: var(--surface-2, #1b1b20);
  border: 1px solid var(--outline, #6d6d75);
  padding: 24px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
}

.form-input {
  border-radius: 8px;
  background: var(--surface-3, #22222a);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text, #fff);
  border: none;
  outline: none;
  box-shadow: 0 0 0 1px var(--outline, #6d6d75);
}

.form-input:focus {
  box-shadow: 0 0 0 2px var(--accent);
}

.form-input::placeholder {
  color: var(--faint);
}

.login-error {
  margin: 0;
  font-size: 12px;
  color: var(--danger, #f87171);
}

.login-submit {
  margin-top: 8px;
  border-radius: 9999px;
  background: var(--accent-fill, #3865f8);
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  transition: opacity 0.15s;
}

.login-submit:hover {
  opacity: 0.9;
}

.login-submit:disabled {
  opacity: 0.4;
}

/* ---------- Search ---------- */

.search-bar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.search-input-wrap {
  position: relative;
  max-width: 576px;
  margin-bottom: 24px;
  flex: 1 1 260px;
}

.search-type-select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 9999px;
  background: var(--surface-3, #22222a);
  border: none;
  outline: none;
  padding: 12px 40px 12px 16px;
  font-size: 14px;
  color: var(--text, #fff);
  box-shadow: 0 0 0 1px var(--outline, #6d6d75);
  cursor: pointer;
  min-width: 150px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a0a0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.search-type-select:focus {
  box-shadow: 0 0 0 2px var(--accent);
}

.search-type-select option {
  background: var(--surface-3, #22222a);
  color: var(--text, #fff);
}

.search-input {
  width: 100%;
  border-radius: 9999px;
  background: var(--surface-3, #22222a);
  border: none;
  outline: none;
  padding: 12px 16px 12px 44px;
  font-size: 14px;
  color: var(--text, #fff);
  box-shadow: 0 0 0 1px var(--outline, #6d6d75);
}

.search-input:focus {
  box-shadow: 0 0 0 2px var(--accent);
}

.search-input::placeholder {
  color: var(--faint);
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}

/* ---------- Bottom bar (player) ---------- */

.bottom-bar {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  border-top: 1px solid var(--border-soft, rgba(42, 42, 42, 0.5));
  background: var(--surface-2, #1b1b20);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
  .bottom-bar {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    height: 96px;
    padding: 0 16px;
  }
}

.now-playing {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  cursor: pointer;
  border-radius: 10px;
  padding: 4px;
  transition: background var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

@media (hover: hover) {
  .now-playing:hover {
    background: var(--hover);
  }
}

.now-playing-art {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 6px;
  object-fit: cover;
  cursor: pointer;
}

@media (min-width: 768px) {
  .now-playing-art {
    width: 56px;
    height: 56px;
  }
}

.now-playing-info {
  min-width: 0;
}

.now-playing-title {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
}

.now-playing-artist {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--subtext);
  cursor: pointer;
}

.now-playing-artist:hover {
  color: var(--text, #fff);
  text-decoration: underline;
}

.player-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  order: 2;
}

@media (min-width: 768px) {
  .player-controls {
    order: 0;
  }
}

.player-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.player-btn {
  padding: 4px;
  color: var(--subtext);
  transition: color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.player-btn:hover {
  color: var(--text, #fff);
}

.player-btn.active {
  color: var(--accent);
}

.player-btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #fff;
  color: #000;
  transition: transform var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.player-btn-main:hover {
  transform: scale(1.05);
}

.player-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 576px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--subtext);
}

.progress-time {
  width: 40px;
  text-align: right;
}

.progress-time:first-child {
  text-align: right;
}

.progress-time:last-child {
  text-align: left;
}

.progress-track {
  position: relative;
  height: 20px;
  flex: 1;
  display: flex;
  align-items: center;
  border-radius: 9999px;
  background: var(--grid);
  cursor: pointer;
  touch-action: none;
}

.progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 4px;
  border-radius: 9999px;
  background: var(--accent-fill, #3865f8);
  transform: translateY(-50%);
  pointer-events: none;
}

.progress-fill::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-fill, #3865f8);
  transform: translateY(-50%);
  opacity: 0;
}

.progress-track:hover .progress-fill,
.progress-track.dragging .progress-fill {
  background: var(--accent-fill, #3865f8);
}

.progress-track:hover .progress-fill::after,
.progress-track.dragging .progress-fill::after {
  opacity: 1;
}

.player-volume {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

@media (min-width: 768px) {
  .player-volume {
    display: flex;
  }
}

.volume-slider {
  width: 96px;
  accent-color: var(--accent-fill, #3865f8);
}

.vol-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--subtext);
}

/* ---------- Fullscreen player ---------- */

.fullscreen-player {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, var(--surface2), var(--bg));
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
}

.fullscreen-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fullscreen-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 0;
}

.fullscreen-art {
  width: min(72vw, 384px, 40vh);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: var(--shadow-3);
}

.fullscreen-track-info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  max-width: 384px;
}

.fullscreen-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 24px;
  font-weight: 700;
}

.fullscreen-artist {
  margin: 4px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  color: var(--subtext);
  cursor: pointer;
}

.fullscreen-artist:hover {
  color: var(--text, #fff);
  text-decoration: underline;
}

.fullscreen-buttons {
  display: flex;
  align-items: center;
  gap: 24px;
}

.fullscreen-btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: #fff;
  color: #000;
  transition: transform var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.fullscreen-btn-main:hover {
  transform: scale(1.05);
}

/* ---------- Settings ---------- */

.settings-page {
  max-width: 672px;
  margin: 0 auto;
  padding: 24px 16px;
}

.settings-card {
  margin-bottom: 24px;
  border-radius: 16px;
  background: var(--surface-2, #1b1b20);
  border: 1px solid var(--outline, #6d6d75);
  padding: 24px;
}

.settings-card h2 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}

.settings-text {
  margin: 0;
  font-size: 14px;
  color: var(--subtext);
}

.settings-text strong {
  color: var(--text, #fff);
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.settings-playlists {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.settings-playlist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border-radius: 10px;
  background: var(--surface2);
  border: none;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text, #fff);
  cursor: pointer;
  transition: box-shadow var(--dur, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.settings-playlist-item:hover {
  box-shadow: 0 0 0 1px var(--grid);
}

/* ---------- Upload form (admin) ---------- */

.modal-upload {
  max-width: 480px;
}

.upload-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.upload-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--subtext);
}

.upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

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

.upload-file-input {
  display: none;
}

.upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 120px;
  border: 1.5px dashed var(--outline, #6d6d75);
  border-radius: 14px;
  background: var(--surface2);
  cursor: pointer;
  text-align: center;
  padding: 16px;
  transition: border-color 0.15s, background 0.15s;
}

.upload-dropzone:hover,
.upload-dropzone.drag {
  border-color: var(--accent);
  background: var(--accent-wash-soft, rgba(29, 185, 84, 0.06));
}

.upload-dropzone.error {
  border-color: var(--danger, #f87171);
}

.upload-dropzone-icon {
  font-size: 28px;
  color: var(--accent);
}

.upload-dropzone-title {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #fff);
}

.upload-dropzone-hint {
  margin: 0;
  font-size: 12px;
  color: var(--faint);
}

.upload-photo-drop {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px dashed var(--outline, #6d6d75);
  border-radius: 12px;
  background: var(--surface2);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--subtext);
  cursor: pointer;
}

.upload-photo-drop:hover {
  border-color: var(--accent);
}

.upload-info {
  font-size: 12px;
  color: var(--subtext);
  margin: 8px 0 0;
}

.upload-progress {
  margin: 12px 0 0;
}

.upload-progress-bar {
  height: 8px;
  border-radius: 9999px;
  background: var(--surface2);
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--accent-fill, #3865f8);
  transition: width 0.25s ease;
}

.upload-progress-text {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--subtext);
  overflow-wrap: anywhere;
}

.upload-fails {
  margin: 10px 0 0;
  max-height: 140px;
  overflow-y: auto;
}

.upload-fail {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--danger, #f87171);
  overflow-wrap: anywhere;
}

.upload-fail strong {
  color: var(--text, #fff);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 9999px;
  background: var(--surface2);
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--subtext);
  transition: color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn-secondary:hover {
  color: var(--text, #fff);
}

.settings-message {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--accent);
}

.settings-dl {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  font-size: 14px;
}

.settings-dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.settings-dt {
  color: var(--subtext);
}

.settings-dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.settings-dd.mono {
  font-family: monospace;
  font-size: 12px;
}

/* ---------- Queue ---------- */

.queue-current-marker {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
}

.queue-track-wrap {
  position: relative;
  padding-left: 12px;
}

/* ---------- Spinner ---------- */

.spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--subtext);
}

.spinner {
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border: 3px solid var(--grid);
  border-top-color: var(--accent-fill, #3865f8);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Misc ---------- */

.loading-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--subtext);
}

.mobile-only {
  display: none;
}

@media (max-width: 767px) {
  .sidebar {
    display: none;
  }

  .mobile-topbar {
    display: flex;
  }

  .sidebar-close {
    display: block;
  }

  .fullscreen-buttons {
    gap: 10px;
  }
}

@media (min-width: 768px) {
  .mobile-overlay {
    display: none !important;
  }
}

/* ---------- Touch / mobile-first ---------- */

/* iOS zooms into inputs with font-size < 16px on focus; keep it readable. */
@media (hover: none) and (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}


/* ================= Admin / modals / login toggle ================= */

.login-toggle {
  display: flex;
  gap: 4px;
  background: var(--surface2, #1a1a21);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 16px;
}
.login-toggle-btn {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--subtext, #9a9aa5);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.login-toggle-btn.active {
  background: var(--accent-fill, #3865f8);
  color: var(--on-accent, #fff);
}
.login-toggle-btn:hover:not(.active) { color: var(--text, #f0f0f4); }

.track-add {
  display: none;
  border: none;
  background: transparent;
  color: var(--subtext, #9a9aa5);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), background var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.track-row:hover .track-add,
.track-add:focus-visible { display: inline-flex; }
.track-add:hover { color: var(--accent-2, #1db954); background: var(--wash-soft, rgba(255, 255, 255, 0.06)); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim, rgba(8, 8, 12, 0.72));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal {
  background: var(--surface-5, #1c1c24);
  border: 1px solid var(--outline, #2c2c36);
  border-radius: 14px;
  padding: 20px;
  width: 100%;
  max-width: 420px;
  max-height: 82vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-wide { max-width: 620px; }
.modal h3 { margin: 0; font-size: 18px; }
.modal-sub { margin: 0 0 4px; color: var(--subtext, #9a9aa5); font-size: 13px; }
.modal-empty { color: var(--subtext, #9a9aa5); font-size: 13px; margin: 4px 0; }
.modal-item {
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: var(--wash, rgba(255, 255, 255, 0.05));
  color: var(--text, #f0f0f4);
  cursor: pointer;
  font-size: 14px;
  transition: background var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.modal-item:hover { background: var(--wash-strong, rgba(255, 255, 255, 0.1)); }
.modal-item.new { color: var(--accent-2, #1db954); font-weight: 600; }
.modal-close {
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--subtext, #9a9aa5);
  cursor: pointer;
  font-size: 14px;
  transition: background var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.modal-close:hover { background: var(--wash-soft, rgba(255, 255, 255, 0.06)); color: var(--text, #f0f0f4); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.modal-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtext, #9a9aa5);
  margin-top: 8px;
}
.modal-check { font-size: 14px; color: var(--text, #f0f0f4); cursor: pointer; padding: 4px 0; }
.modal-check input { margin-right: 8px; accent-color: var(--accent-2, #1db954); }
.modal-scroll { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--outline, #2c2c36); border-radius: 8px; padding: 8px; }

.admin-toolbar { display: flex; gap: 8px; margin: 12px 0; }
.admin-table { display: flex; flex-direction: column; gap: 8px; }
.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--wash-soft, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--outline, #26262f);
  border-radius: 10px;
  padding: 10px 14px;
}
.admin-row-main { flex: 1; min-width: 0; }
.admin-row-title { margin: 0; font-size: 15px; font-weight: 600; }
.admin-row-sub { margin: 2px 0 0; font-size: 13px; color: var(--subtext, #9a9aa5); }
.admin-row-actions { display: flex; gap: 6px; align-items: center; }
.admin-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-wash, rgba(29, 185, 84, 0.14));
  color: var(--accent-2, #1db954);
}
.badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--warn-wash, rgba(255, 200, 60, 0.16));
  color: var(--warn, #ffcf6b);
  vertical-align: middle;
}

/* ---------- Touch / mobile-first (kept last so it wins the cascade) ---------- */

/* Touch has no hover: reveal the per-row actions and bigger tap targets. */
@media (hover: none) {
  .track-row .track-play-btn {
    display: block;
  }

  .track-row .track-like {
    opacity: 1;
  }

  .track-row .track-add {
    display: inline-flex;
  }

  /* The play button replaces the row number on touch. */
  .track-row .track-num-text {
    display: none;
  }

  .card-play {
    opacity: 1;
    transform: translateY(0);
  }

  .player-btn {
    padding: 8px;
  }

  .player-btn-main {
    width: 44px;
    height: 44px;
  }

  .icon-btn {
    padding: 10px;
  }
}

/* ---------- PWA install popup ---------- */

.pwa-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--pwa-scrim, rgba(0, 0, 0, 0.55));
  backdrop-filter: blur(2px);
}

.pwa-card {
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface-5, #121218);
  border: 1px solid var(--grid);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

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

.pwa-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-fill, #3865f8);
  color: var(--on-accent, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pwa-header h2 {
  margin: 0;
  font-size: 18px;
}

.pwa-desc {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--subtext);
}

.pwa-tips {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pwa-tips li {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--subtext);
}

.pwa-tips li::before {
  content: '?';
  color: var(--accent);
  flex-shrink: 0;
}

.pwa-steps-title {
  margin: 16px 0 8px;
  font-size: 13px;
  font-weight: 600;
}

.pwa-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pwa-steps li {
  font-size: 13px;
  color: var(--subtext);
}

.pwa-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.pwa-btn {
  flex: 1;
  border-radius: 9999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  background: var(--surface2);
  color: var(--subtext);
  cursor: pointer;
  transition: color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.pwa-btn:hover {
  color: var(--text, #fff);
}

.pwa-btn.primary {
  background: var(--accent-fill, #3865f8);
  color: var(--on-accent, #fff);
}

/* ================= Loja (body.loja — scoped port of loja.html styles) ================= */

body.loja {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

body.loja .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-soft, rgba(42, 42, 42, 0.5));
  background: var(--surface-2, #1b1b20);
  position: sticky;
  top: 0;
  z-index: 10;
}

body.loja .brand { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
body.loja .brand svg { color: var(--accent-2, #1db954); }

body.loja .login-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: auto; max-width: none; }
body.loja .login-box input {
  border-radius: 9999px;
  background: var(--surface-3, #22222a);
  border: none;
  outline: none;
  padding: 9px 14px;
  font-size: 14px;
  color: var(--text, #fff);
  box-shadow: 0 0 0 1px var(--outline, #6d6d75);
  width: 190px;
}

body.loja .login-box button,
body.loja .buy-btn,
body.loja .back-btn {
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 20px;
}

body.loja .login-box button { background: var(--accent-2-fill, #15803d); color: var(--on-accent, #fff); }
body.loja .user-chip { font-size: 13px; color: var(--subtext); }
body.loja .user-chip strong { color: var(--text, #fff); }

body.loja main { max-width: 1080px; margin: 0 auto; padding: 24px; }
body.loja h1 { font-size: clamp(26px, 2.5vw + 0.9rem, 42px); margin: 8px 0 4px; line-height: var(--lh-title, 1.2); }
body.loja .subtitle { color: var(--subtext); margin: 0 0 24px; }
body.loja h2 { font-size: 18px; margin: 28px 0 14px; }

body.loja .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
body.loja .card {
  width: auto;
  flex-shrink: 1;
  background: var(--surface-2, #1b1b20);
  border: 1px solid var(--outline, #6d6d75);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: default;
  transition: none;
  transform: none;
}
body.loja .card:hover {
  background: var(--surface-2, #1b1b20);
  transform: none;
}
body.loja .card .thumb {
  height: 120px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--surface-4, #24242e), var(--surface-1, #101018));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  position: relative;
  overflow: hidden;
}
body.loja .card .thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
body.loja .card h3 { margin: 4px 0 0; font-size: 16px; }
body.loja .card .desc { margin: 0; font-size: 13px; color: var(--subtext); min-height: 18px; }

body.loja .price { font-size: 22px; font-weight: 800; color: var(--accent-2, #1db954); }
body.loja .buy-btn { background: var(--accent-2-fill, #15803d); color: var(--on-accent, #fff); width: 100%; text-align: center; text-decoration: none; padding: 11px 20px; transition: filter var(--dur, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)); }
body.loja .buy-btn:hover { filter: brightness(1.1); }
body.loja .pack-badge {
  align-self: flex-start;
  border-radius: 9999px;
  background: var(--accent-wash, rgba(29, 185, 84, 0.15));
  color: var(--accent-2, #1db954);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
}

body.loja .back-btn { background: var(--surface-3, #22222a); color: var(--subtext); text-decoration: none; display: inline-block; margin-top: 28px; }
body.loja .back-btn:hover { color: var(--text, #fff); }
body.loja .empty { color: var(--faint); font-size: 14px; }
body.loja .msg { font-size: 13px; color: var(--danger, #f87171); min-height: 18px; }
body.loja .ok { color: var(--accent-2, #1db954); }
body.loja footer { text-align: center; color: var(--faint); font-size: 12px; padding: 24px; }

@media (max-width: 560px) {
  body.loja .topbar { flex-direction: column; align-items: stretch; }
  body.loja .login-box input { width: 100%; }
}

/* ================= M4 — Polimento visual profissional (additive, sobre os tokens) ================= */

/* --- Login: ambiente com glow + logo em tile + card elevado + erro em pill --- */

.login-screen {
  background:
    radial-gradient(ellipse 65% 55% at 50% -5%, rgba(77, 125, 255, 0.12), transparent 70%),
    linear-gradient(to bottom, rgba(26, 26, 31, 0.6), var(--bg));
}

.login-brand svg {
  width: 54px;
  height: 54px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent-fill, #3865f8), rgba(97, 141, 255, 0.55));
  color: #fff;
  box-shadow: var(--shadow-2);
}

.login-form {
  transition: box-shadow var(--dur, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
  box-shadow: var(--shadow-3);
}

.login-form:focus-within {
  box-shadow: var(--shadow-3), 0 0 0 1px var(--accent);
}

.login-form:has(.login-error:not(:empty)) {
  border-color: rgba(248, 113, 113, 0.55);
}

.login-error:not(:empty) {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(248, 113, 113, 0.12);
}

.login-toggle {
  box-shadow: inset 0 0 0 1px var(--outline, #6d6d75);
}

.login-toggle-btn.active {
  box-shadow: var(--shadow-1);
}

.login-submit {
  transition: opacity var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
  box-shadow: 0 8px 20px rgba(56, 101, 248, 0.25);
}

.login-submit:hover:not(:disabled) {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(56, 101, 248, 0.35);
}

.login-submit:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

/* --- Player bar: elevação, capa com sombra, controles com hover/active --- */

.bottom-bar {
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
}

.now-playing-art {
  box-shadow: var(--shadow-1);
}

.player-btn {
  transition: color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.player-btn:hover {
  transform: scale(1.12);
}

.player-btn:active {
  transform: scale(0.92);
}

.player-btn-main {
  box-shadow: var(--shadow-1);
}

.player-btn-main:hover {
  box-shadow: 0 0 0 4px var(--wash-strong, rgba(255, 255, 255, 0.1)), var(--shadow-2);
}

.player-btn-main:active {
  transform: scale(0.94);
}

.progress-fill {
  transition: height var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), background var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.progress-track:hover .progress-fill,
.progress-track.dragging .progress-fill {
  height: 6px;
}

.fullscreen-btn-main {
  box-shadow: var(--shadow-2);
}

.fullscreen-btn-main:active {
  transform: scale(0.95);
}

/* --- Cards: hover-lift + sombra + overlay play com feedback --- */

.card {
  transition: background 0.15s, border-color 0.15s, transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--grid);
  box-shadow: var(--shadow-2);
}

.card-play {
  transition: opacity 0.15s, transform 0.15s, background 0.15s, box-shadow 0.15s;
}

.card-play:hover {
  transform: translateY(0) scale(1.08);
}

.card-play:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.genre-card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.genre-card:hover {
  box-shadow: var(--shadow-2);
}

.card-row {
  scrollbar-width: thin;
  scrollbar-color: var(--grid) transparent;
}

.card-row::-webkit-scrollbar {
  height: 8px;
}

.card-row::-webkit-scrollbar-thumb {
  border-radius: 999px;
}

/* --- Sidebar: logo em tile + item ativo com indicador lateral --- */

.sidebar-brand svg {
  padding: 4px;
  border-radius: 8px;
  background: var(--accent-wash, rgba(29, 185, 84, 0.14));
}

.nav-link {
  position: relative;
  transition: color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), background var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.nav-link:hover {
  background: var(--wash-soft, rgba(255, 255, 255, 0.04));
}

.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 999px;
  background: var(--accent);
}

/* --- Admin: tabs, rows, badges, chips e botões com estados --- */

.tab-btn {
  transition: color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), background var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.tab-btn:hover:not(.active) {
  background: var(--wash-soft, rgba(255, 255, 255, 0.04));
}

.tab-btn.active {
  box-shadow: var(--shadow-1);
}

.admin-row {
  transition: background var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), border-color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.admin-row:hover {
  background: var(--surface-3, #22222a);
  border-color: var(--grid, #6d6d75);
  box-shadow: var(--shadow-1);
}

.badge {
  background: rgba(255, 200, 60, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 60, 0.3);
}

.chip {
  box-shadow: inset 0 0 0 1px rgba(29, 185, 84, 0.2);
}

.btn-accent {
  transition: transform var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), background var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
  box-shadow: 0 6px 16px rgba(56, 101, 248, 0.28);
}

.btn-accent:hover:not(:disabled) {
  box-shadow: 0 8px 22px rgba(56, 101, 248, 0.4);
}

.btn-accent:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-secondary {
  transition: color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), background var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn-secondary:hover {
  background: var(--surface-3, #22222a);
}

.btn-secondary:active {
  transform: scale(0.97);
}

.form-input {
  transition: box-shadow var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), background var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.modal {
  box-shadow: var(--shadow-3);
  animation: modal-in var(--dur, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Micro-interações: ícones e toques consistentes --- */

.icon-btn {
  transition: background var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), color var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--dur-fast, 0.15s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.icon-btn:active {
  transform: scale(0.92);
}

/* --- Empty states: card tracejado sutil --- */

.empty-state {
  border: 1.5px dashed var(--outline, #6d6d75);
  border-radius: var(--radius-lg, 14px);
  background: var(--wash-soft, rgba(255, 255, 255, 0.04));
  margin: 8px 0;
}

/* --- Loja: cards com hover-lift, CTA verde com elevação, empty tracejado --- */

body.loja .card {
  transition: transform var(--dur, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--dur, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), border-color var(--dur, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

body.loja .card:hover {
  transform: translateY(-3px);
  border-color: rgba(29, 185, 84, 0.45);
  box-shadow: var(--shadow-2);
}

body.loja .buy-btn {
  transition: filter var(--dur, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--dur, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--dur, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
  box-shadow: 0 6px 16px rgba(21, 128, 61, 0.25);
}

body.loja .buy-btn:hover {
  transform: translateY(-1px);
}

body.loja .buy-btn:active {
  transform: translateY(0) scale(0.98);
}

body.loja .login-box input:focus {
  box-shadow: 0 0 0 2px var(--accent-2, #1db954);
}

body.loja .back-btn:hover {
  background: var(--surface-3, #22222a);
}

body.loja .empty {
  padding: 40px 24px;
  border: 1.5px dashed var(--outline, #6d6d75);
  border-radius: 16px;
  text-align: center;
  background: var(--wash-soft, rgba(255, 255, 255, 0.04));
}

/* ================= Reduced motion (T4 — must stay LAST) ================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Karaoke (video cards + YouTube-style player) ---------- */

.card-image-wrap:not(.square) {
  aspect-ratio: 16 / 9;
}

.karaoke-player {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000;
  color: #fff;
  /* Dynamic viewport height: on mobile browsers 100vh includes the area
     behind the URL bar, overflowing the visible screen. 100dvh (with a vh
     fallback for older engines) makes the player exactly fill the visible
     area, so controls are never pushed off-screen. */
  height: 100vh;
  height: 100dvh;
}

/* Native fullscreen (F11-like): the element becomes the viewport; guarantee
   the black background and full-bleed layout browsers may override. */
.karaoke-player:fullscreen {
  background: #000;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

.karaoke-player:-webkit-full-screen {
  background: #000;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

/* Auto-hide: with the mouse idle while playing, overlays and cursor vanish. */
.karaoke-player.controls-hidden .karaoke-overlay {
  opacity: 0;
  pointer-events: none;
}

.karaoke-player.controls-hidden {
  cursor: none;
}

.karaoke-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.karaoke-stage video {
  /* Cover the whole stage (no letterbox): the video fills the screen and
     adapts between portrait and landscape, cropping the overflow. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  outline: none;
}

/* Overlay layer on top of the video: the layer itself never intercepts
   pointer events, only its children do. */
.karaoke-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.karaoke-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent);
}

.karaoke-top .icon-btn {
  pointer-events: auto;
}

.karaoke-top-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.karaoke-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* Bottom spacing so the controls never touch the screen edge: 20px +
     safe-area (notch/home indicator). On phones without a safe area this
     still leaves a clear gap from the bottom of the screen. */
  padding: 28px 14px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  pointer-events: auto;
}

.karaoke-controls-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 960px;
  margin: 0 auto;
}

.karaoke-controls .player-progress {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.player-side {
  display: flex;
  align-items: center;
  gap: 8px;
}

.karaoke-controls .volume-slider {
  width: 90px;
}

.karaoke-rate {
  min-width: 48px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.karaoke-fs {
  pointer-events: auto;
}

/* ---------- Mobile: controls must never overflow the screen ---------- */

@media (max-width: 768px) {
  /* The video covers the full stage (object-fit: cover) — no height limit,
     it fills the screen like the YouTube player. */
  /* Mobile: zero bottom spacing — the control bar sits flush with the
     screen edge. Only the device safe-area (notch/home indicator) is kept,
     so controls are never hidden behind the system bar on iPhones. */
  .karaoke-controls {
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Let the button rows wrap onto a second line instead of overflowing
     horizontally (the fullscreen button used to fall off-screen). */
  .player-buttons-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  .player-buttons {
    gap: 4px;
  }
  .player-side {
    gap: 6px;
  }
  .player-side .volume-slider {
    width: 60px;
  }
  /* Smaller tap targets so the whole bar fits narrow phones. */
  .karaoke-controls .player-btn {
    width: 32px;
    height: 32px;
  }
  .karaoke-controls .player-btn-main {
    width: 38px;
    height: 38px;
  }
  .karaoke-controls .player-btn svg,
  .karaoke-controls .player-btn-main svg {
    width: 16px;
    height: 16px;
  }
  .karaoke-controls .player-btn .rewind-icon,
  .karaoke-controls .player-btn .forward-icon {
    width: 14px;
    height: 14px;
  }
  .karaoke-controls .icon-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* Very narrow phones: drop the volume slider (mute button keeps volume
   control) so the row always fits — the fullscreen button must stay
   reachable. */
@media (max-width: 420px) {
  .player-side .volume-slider {
    display: none;
  }
  .karaoke-rate {
    min-width: 40px;
  }
  .karaoke-controls .player-btn svg,
  .karaoke-controls .player-btn-main svg {
    width: 15px;
    height: 15px;
  }
}