:root {
  --vpod-highlight-bg: linear-gradient(180deg, #3d98e6 0%, #1e6fbe 100%);
  --vpod-highlight-fg: #ffffff;
  --vpod-menu-row-padding-top: 10px;
  --vpod-menu-row-padding-right: 10px;
  --vpod-menu-row-padding-bottom: 10px;
  --vpod-menu-row-padding-left: 14px;
  --vpod-menu-row-min-height: 19px;
  --vpod-menu-row-font-size: 0.92em;
  --vpod-menu-row-line-height: 1.15;
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #fcfcfc;
  color: #f4f4f4;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

body, html {
  overscroll-behavior-y: contain;
}

#vmusic-page-buttons {
  position: fixed;
  top: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
}

#vmusic-page-buttons button {
  background: none;
  border: none;
  color: #838383;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.5em;
}

#fileInput {
  display: block;
  margin: 20px auto 30px auto;
}

.vpod-container {
  background: linear-gradient(160deg, #f6f6f8 0%, #e2e2e4 60%, #cfcfd2 100%);
  border-radius: 38px;
  width: 440px;
  height: 520px;
  margin: 20px auto;
  box-shadow:
    0 8px 32px 0 rgba(0,0,0,0.13),
    0 1px 4px 0 rgba(0,0,0,0.06),
    0 0 0 4px #e0e0e0 inset,
    0 1px 0 0 #c0c0c0 inset;
  padding: 24px 0 32px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2.5px solid #d4d4d8;
  position: relative;
  overflow: visible;
  overscroll-behavior: contain;
}

.vpod-container::before {
  content: "";
  position: absolute;
  top: 12px; left: 32px; right: 32px;
  height: 28px;
  border-radius: 32px 32px 24px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.04) 100%);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 1px 8px 1px rgba(255,255,255,0.10);
}

.vpod-container::after {
  content: "";
  position: absolute;
  left: 36px; right: 36px; bottom: 14px;
  height: 18px;
  border-radius: 0 0 32px 32px;
  background: linear-gradient(0deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.01) 100%);
  pointer-events: none;
  z-index: 2;
}

.vpod-container {
  background-image:
    linear-gradient(160deg, #f6f6f8 0%, #e2e2e4 60%, #cfcfd2 100%),
    repeating-linear-gradient(120deg, rgba(255,255,255,0.02) 0 2px, rgba(0,0,0,0.01) 2px 4px);
}

.vpod-screen {
  background: linear-gradient(180deg, #f9f9f9 0%, #eaeaea 100%);
  color: #222;
  border-radius: 18px;
  width: 380px;
  height: 320px;
  margin-bottom: 30px;
  overflow: hidden;
  position: relative;
  border: 3px solid #c0c0c0;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.13),
    0 0 0 2px #e0e0e0,       
    0 2px 8px 2px #b0b0b0 inset; 
  font-family: 'Segoe UI', Arial, sans-serif;
  transition: background 0.3s;
}

.screen-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 22px;
  left: 0; 
  height: calc(100% - 22px);
  transition: transform 0.35s cubic-bezier(.4,1.3,.6,1);
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
}

.screen-slide-in {
  transform: translateX(100%);
}
.screen-slide-out {
  transform: translateX(-100%);
}
.screen-active {
  transform: translateX(0);
  
}
.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-list li {
  display: flex;
  align-items: center;
  padding: var(--vpod-menu-row-padding-top) var(--vpod-menu-row-padding-right) var(--vpod-menu-row-padding-bottom) var(--vpod-menu-row-padding-left);
  min-height: var(--vpod-menu-row-min-height);
  border-bottom: 1px solid #eee;
  cursor: pointer;
  font-size: var(--vpod-menu-row-font-size);
  line-height: var(--vpod-menu-row-line-height);
  transition: background 0.2s;
}
.menu-list li:hover,
.menu-list li.active {
  background: var(--vpod-highlight-bg);
  color: var(--vpod-highlight-fg);
}

.liked-playlist-row {
  color: #0074d9;
  font-weight: bold;
}

.liked-playlist-row:hover,
.liked-playlist-row.active {
  color: var(--vpod-highlight-fg);
}

.liked-playlist-row i {
  color: currentColor;
}
.menu-back {
  margin-top: auto;
  padding: 12px 0;
  text-align: center;
  color: #0074d9;
  font-weight: bold;
  cursor: pointer;
  border-top: 1px solid #eee;
  background: #f8f8f8;
  border-radius: 0 0 18px 18px;
}
#hotBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  z-index: 100;
  background: rgba(245,245,245,0.95);
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hotBarTime {
  flex: 1;
  text-align: center;
  font-weight: bold;
  max-width: 68%;
  padding: 0 42px;        /* leave room for battery/play icons */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* --- load music screen --- */

.ipod-utility-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 14px 14px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(238,241,245,0.98));
  color: #111;
}

.ipod-utility-header {
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 12px;
}

.ipod-utility-kicker {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f7782;
}

.ipod-utility-title {
  font-size: 1.16rem;
  line-height: 1.1;
  font-weight: 700;
}

.ipod-utility-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  min-height: 0;
  text-align: center;
}

.ipod-utility-glyph {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: #2c3d55;
  background: linear-gradient(180deg, #f7f8fa 0%, #d9dee5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 6px 14px rgba(0,0,0,0.08);
}

.ipod-utility-copy {
  max-width: 250px;
  font-size: 0.84rem;
  line-height: 1.33;
  color: #3d4652;
}

.load-music-actions {
  width: 100%;
  max-width: 248px;
  margin-top: 2px;
}

.load-music-actions li {
  text-align: left;
}

.load-music-screen--import .ipod-utility-copy {
  max-width: 255px;
}

.load-music-screen--meta .ipod-utility-body {
  gap: 9px;
}

.load-music-screen--meta .ipod-utility-copy {
  max-width: 232px;
}

.load-music-screen--loading .ipod-utility-body {
  gap: 11px;
}

.ipod-utility-glyph--loading {
  background: linear-gradient(180deg, #f4f6f9 0%, #d5dbe3 100%);
}

.load-music-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(54, 79, 112, 0.18);
  border-top-color: #58769a;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.load-music-status-copy {
  max-width: 220px;
}

.load-music-status-card {
  width: 100%;
  max-width: 236px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(210,216,224,0.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}

.load-music-counter {
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
  color: #2b486d;
}

.load-music-status-note {
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #5b6573;
}

/* --- Main Menu --- */
.classic-main-menu {
  display: flex;
  height: 100%;
  background: #fff;
}

.classic-main-list {
  width: 52%;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid #dfdfdf;
  background: #ffffff;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.classic-main-preview {
  width: 48%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #e9e9e9;
}

.classic-main-menu .menu-list {
  margin: 0;
  padding: 0;
}

.classic-main-menu .menu-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--vpod-menu-row-padding-top) var(--vpod-menu-row-padding-right) var(--vpod-menu-row-padding-bottom) var(--vpod-menu-row-padding-left);
  min-height: var(--vpod-menu-row-min-height);
  border-bottom: 1px solid #ececec;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--vpod-menu-row-font-size);
  font-weight: 500;
  line-height: var(--vpod-menu-row-line-height);
  letter-spacing: -0.01em;
  color: #222;
  background: #fff;
}

.classic-main-menu .menu-list li:hover,
.classic-main-menu .menu-list li.active {
  background: var(--vpod-highlight-bg);
  color: var(--vpod-highlight-fg);
}

.classic-main-menu .menu-list li.active .main-menu-arrow,
.classic-main-menu .menu-list li:hover .main-menu-arrow {
  color: var(--vpod-highlight-fg);
}

.main-menu-label {
  display: block;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.main-menu-arrow {
  margin-left: 10px;
  color: #8c8c8c;
  font-size: 0.9em;
}

.main-menu-preview-fill {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #efefef 0%, #e3e3e3 100%);
}

.main-menu-preview-image--fill {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  background: #dedede;
}

.main-menu-preview-collage--fill {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
}

.main-menu-preview-collage--fill img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  object-fit: cover;
  box-shadow: none;
  background: #dedede;
}

.main-menu-preview-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 10px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.20) 28%, rgba(0,0,0,0.62) 100%);
  color: #fff;
  text-align: center;
}

.main-menu-preview-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.95em;
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.28);
}

.main-menu-preview-subtitle {
  margin-top: 3px;
  font-size: 0.78em;
  line-height: 1.2;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 1px 2px rgba(0,0,0,0.24);
}

.main-menu-preview-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  margin-top: 6px;
  padding: 0 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-weight: 700;
  font-size: 0.82em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.main-menu-preview-glyph {
  position: relative;
  width: 94px;
  height: 94px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 1px 4px rgba(0,0,0,0.10);
  border: 1px solid rgba(255,255,255,0.65);
  overflow: hidden;
}

.main-menu-preview-glyph::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.03) 45%, rgba(0,0,0,0.02) 100%);
  pointer-events: none;
}

.main-menu-preview-glyph::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  pointer-events: none;
}

.main-menu-preview-glyph--fill {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.main-menu-preview-glyph--fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 38%, rgba(0,0,0,0.04) 100%);
  pointer-events: none;
}

.main-menu-preview-glyph--fill::after {
  display: none;
}

.main-menu-preview-glyph i {
  position: relative;
  z-index: 1;
  font-size: 2rem;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 1px 1px rgba(0,0,0,0.10);
}

.main-menu-preview-glyph--fill i {
  font-size: 4.3rem;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 1px rgba(0,0,0,0.08);
}

.main-menu-preview-accent {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
}

.main-menu-preview-accent i {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.86);
  text-shadow: none;
}

.main-menu-preview-glyph--load {
  background: linear-gradient(180deg, #d8bf78 0%, #b79646 100%);
}

.main-menu-preview-glyph--playlists {
  background: linear-gradient(180deg, #7aa8d1 0%, #4f7ea8 100%);
}

.main-menu-preview-glyph--songs {
  background: linear-gradient(180deg, #86aed3 0%, #5d87b0 100%);
}

.main-menu-preview-glyph--suggested {
  background: linear-gradient(180deg, #d9c37a 0%, #b89c42 100%);
}

.main-menu-preview-glyph--smartmix {
  background: linear-gradient(180deg, #7eb2a7 0%, #4e8579 100%);
}

.main-menu-preview-glyph--games {
  background: linear-gradient(180deg, #9ba5b1 0%, #6d7886 100%);
}

.main-menu-preview-glyph--settings {
  background: linear-gradient(180deg, #c1c8cf 0%, #8b949d 100%);
}

.main-menu-preview-glyph--recap {
  background: linear-gradient(180deg, #8fa8c9 0%, #5d79a0 100%);
}

/* --- Album List --- */

.album-list {
  display: flex;
  flex-direction: row;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.album-list-left {
  width: 50%;
  min-width: 0;
  border-right: 1px solid #eee;
  overflow: hidden;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  background-color: #fff;
  box-shadow: inset -4px 0 8px rgba(0,0,0,0.08);
}
.album-list-right {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  position: absolute;     
  right: 0;
  top: 0;
  height: 100%;
  z-index: 0;
}
.album-cover {
  width: 280px;
  height: 280px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

.menu-list-song {
  display: flex;
  align-items: center;
  padding: var(--vpod-menu-row-padding-top) var(--vpod-menu-row-padding-right) var(--vpod-menu-row-padding-bottom) var(--vpod-menu-row-padding-left);
  min-height: var(--vpod-menu-row-min-height);
  border-bottom: 1px solid #eee;
  cursor: pointer;
  font-size: var(--vpod-menu-row-font-size);
  line-height: var(--vpod-menu-row-line-height);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.2s;
  position: relative;
}

.menu-list-song:hover,
.menu-list-song.active {
  background: var(--vpod-highlight-bg);
  color: var(--vpod-highlight-fg);
}

.menu-list-song span {
  display: inline-block;
  white-space: nowrap;
}

#songsListContainer,
#playlistSongsSelectContainer,
#allSongsListContainer {
  background: #fff;
}

#songsList,
#playlistSongsSelectList,
#suggestedList {
  min-height: 100%;
  background: #fff;
}

.suggested-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.suggested-pane-header {
  flex: 0 0 auto;
  padding: 8px 8px 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(246,246,247,0.98) 100%);
  border-bottom: 1px solid #e2e2e6;
  box-shadow: 0 1px 0 rgba(255,255,255,0.75);
}

.suggested-pane-heading {
  margin-bottom: 6px;
}

.suggested-pane-title {
  font-size: 1.08em;
  font-weight: 700;
  color: #1e1e1f;
}

.suggested-pane-subtitle {
  margin-top: 3px;
  font-size: 0.82em;
  line-height: 1.35;
  color: #666;
}

.suggested-pane-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.suggested-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(62, 125, 184, 0.18);
  background: linear-gradient(180deg, #78abd8 0%, #4f82b0 100%);
  color: #fff;
  font-size: 0.78em;
  font-weight: 600;
  cursor: pointer;
}

#suggestedList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
}

.suggested-action-btn--secondary {
  background: linear-gradient(180deg, #fdfdfd 0%, #ececef 100%);
  color: #3a5164;
  border-color: rgba(140, 152, 165, 0.35);
}

.suggested-song-row {
  align-items: flex-start;
  white-space: normal;
}

.suggested-song-copy {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.suggested-song-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.suggested-song-title {
  font-weight: 700;
  color: inherit;
}

.suggested-tier-pill {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(80, 121, 162, 0.12);
  color: #4f6f8f;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.suggested-song-meta,
.suggested-song-reason {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggested-song-meta {
  font-size: 0.78em;
  color: #666;
}

.suggested-song-reason {
  font-size: 0.72em;
  color: #6a7582;
}

.menu-list-song.active .suggested-tier-pill,
.menu-list-song:hover .suggested-tier-pill {
  background: rgba(255,255,255,0.2);
  color: inherit;
}

.menu-list-song.active .suggested-song-meta,
.menu-list-song.active .suggested-song-reason,
.menu-list-song:hover .suggested-song-meta,
.menu-list-song:hover .suggested-song-reason {
  color: rgba(255,255,255,0.9);
}

.suggested-art-pane {
  flex-direction: column;
}

.suggested-empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.suggested-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #d9c37a 0%, #b89c42 100%);
  color: rgba(255,255,255,0.96);
  font-size: 1.7em;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  margin-bottom: 14px;
}

.suggested-empty-title {
  font-size: 1.18em;
  font-weight: 700;
  color: #1f1f22;
  margin-bottom: 8px;
}

.suggested-empty-copy {
  font-size: 0.94em;
  line-height: 1.5;
  color: #555;
  margin-bottom: 12px;
}

.suggested-empty-steps {
  font-size: 0.82em;
  line-height: 1.6;
  color: #6a6a73;
  margin-bottom: 14px;
}

#smartMixList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
}

.smartmix-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.smartmix-pane--full {
  height: 100%;
  background: #fff;
}

.smartmix-pane-header {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 80px;
  max-height: 80px;
  padding: 8px 8px 8px 8px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(244,247,246,0.98) 100%);
  border-bottom: 1px solid #dfe5e1;
  box-shadow: 0 1px 0 rgba(255,255,255,0.78);
}

.smartmix-pane-heading {
  margin-bottom: 6px;
}

.smartmix-pane-title {
  font-size: 1.08em;
  font-weight: 700;
  color: #1e1f20;
}

.smartmix-pane-subtitle {
  margin-top: 3px;
  font-size: 0.82em;
  line-height: 1.35;
  color: #5d6863;
  min-height: 2.6em;
  max-height: 2.6em;
  overflow: hidden;
  line-clamp: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.smartmix-session-badge {
  display: none;
}

.smartmix-action-row,
.smartmix-song-row {
  align-items: flex-start;
  white-space: normal;
}

.smartmix-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.smartmix-action-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.smartmix-action-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 24px;
  background: rgba(91, 134, 123, 0.12);
  color: #527a70;
  font-size: 0.82em;
}

.smartmix-action-copy {
  min-width: 0;
}

.smartmix-action-title {
  font-weight: 700;
  color: inherit;
}

.smartmix-action-note {
  margin-top: 2px;
  font-size: 0.74em;
  line-height: 1.3;
  color: #67726c;
}

.smartmix-action-value {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(92, 135, 124, 0.12);
  color: #4e786e;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.smartmix-song-copy {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smartmix-song-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.smartmix-song-title {
  font-weight: 700;
  color: inherit;
}

.smartmix-lane-pill,
.smartmix-chapter-pill {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(89, 126, 116, 0.12);
  color: #4f766d;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.smartmix-chapter-pill {
  margin-left: 8px;
}

.smartmix-song-meta,
.smartmix-song-reason {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.smartmix-song-meta {
  font-size: 0.78em;
  color: #5f6766;
  line-height: 1.32;
}

.smartmix-song-reason {
  font-size: 0.72em;
  color: #67756f;
  line-height: 1.34;
}

.menu-list-song.active .smartmix-action-icon,
.menu-list-song:hover .smartmix-action-icon,
.menu-list-song.active .smartmix-action-value,
.menu-list-song:hover .smartmix-action-value,
.menu-list-song.active .smartmix-lane-pill,
.menu-list-song:hover .smartmix-lane-pill,
.menu-list-song.active .smartmix-chapter-pill,
.menu-list-song:hover .smartmix-chapter-pill {
  background: rgba(255,255,255,0.22);
  color: inherit;
}

.menu-list-song.active .smartmix-action-note,
.menu-list-song:hover .smartmix-action-note,
.menu-list-song.active .smartmix-song-meta,
.menu-list-song:hover .smartmix-song-meta,
.menu-list-song.active .smartmix-song-reason,
.menu-list-song:hover .smartmix-song-reason {
  color: rgba(255,255,255,0.9);
}

.smartmix-art-pane {
  flex-direction: column;
}

.smartmix-art-card {
  margin-top: 14px;
  width: 84%;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(223, 228, 225, 0.98);
  text-align: center;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

.smartmix-art-kicker {
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #587a72;
}

.smartmix-art-title {
  margin-top: 5px;
  font-size: 0.94em;
  font-weight: 700;
  color: #222;
}

.smartmix-art-meta {
  margin-top: 4px;
  font-size: 0.78em;
  line-height: 1.35;
  color: #5f6665;
}

.smartmix-empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.smartmix-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #89b7ab 0%, #557f75 100%);
  color: rgba(255,255,255,0.96);
  font-size: 1.7em;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  margin-bottom: 14px;
}

.smartmix-empty-title {
  font-size: 1.18em;
  font-weight: 700;
  color: #1f1f22;
  margin-bottom: 8px;
}

.smartmix-empty-copy {
  font-size: 0.94em;
  line-height: 1.5;
  color: #555;
  margin-bottom: 12px;
}

.smartmix-empty-steps {
  font-size: 0.82em;
  line-height: 1.6;
  color: #67706c;
}

.all-songs-pane {
  display: flex;
  flex-direction: column;
}

.all-songs-pane-header {
  flex: 0 0 auto;
  padding: 6px 8px 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,248,248,0.98) 100%);
  border-bottom: 1px solid #e6e6e6;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

.all-songs-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-bottom: 6px;
}

.all-songs-title {
  display: block;
  margin: 0 auto;
  font-size: 1.1em;
  font-weight: bold;
}

.all-songs-sort-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  background: none;
  border: none;
  color: #0074d9;
  cursor: pointer;
}

.all-songs-search-wrap {
  position: relative;
}

.album-carousel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: center;
  overflow-x: hidden
}

.album-carousel {
  position: relative;
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  margin-bottom: 1px;
  overflow: visible;
}

.carousel-album {
  position: absolute;
  top: 50%;
  left: 50%;
  transition:
    transform 0.18s ease-out,
    opacity 0.18s ease-out,
    filter 0.18s ease-out;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 1;
  filter: brightness(0.85);
  opacity: 0.7;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.carousel-cover {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.18);
  background: #e7e7e7;
  object-fit: cover;
  display: block;
  z-index: 2;
}

.carousel-album:not(.carousel-album-loaded) .carousel-cover,
.carousel-album:not(.carousel-album-loaded) .reflection {
  opacity: 0;
}

.carousel-album.carousel-album-loaded .carousel-cover,
.carousel-album.carousel-album-loaded .reflection {
  opacity: 1;
  transition: opacity 0.14s ease-out;
}

/* Reflection effect */
.carousel-cover-reflect {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 0;
}

.carousel-cover-reflect img.reflection {
  width: 120px;
  height: 45px;
  border-radius: 2px 2px 18px 18px;
  object-fit: cover;
  transform: scaleY(-1);
  opacity: 0.6 !important;
  filter: blur(2px);
  margin-top: -2px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.01) 80%);
}

.carousel-cover-reflect::after {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 40px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.01) 80%);
  /* Reflection image */
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 0;
}

.game-screen-shell {
  box-sizing: border-box;
  min-height: 100%;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.game-screen-shell--compact {
  padding-top: 6px;
  gap: 6px;
}

.game-screen-shell--tight {
  padding-top: 6px;
  gap: 6px;
}

.game-screen-shell--form {
  justify-content: center;
  gap: 12px;
}

.carousel-album-center {
  z-index: 10;
  filter: brightness(1) blur(0px);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.25) rotateY(0deg);
}

.carousel-album-left {
  z-index: 5;
}

.carousel-album-right {
  z-index: 5;
}

.album-title {
  font-size: 1.3em;
  font-weight: bold;
  color: #222;
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.02em;
}

#donePlaylistBtn {
  background: #4fc3f7;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.4em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.2s;
}

#donePlaylistBtn:hover {
  background: #0074d9;
}


/* --- Now Playing Screen --- */

.nowplaying-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 20px 10px 0 10px;
}
#resetTrackRatings {
  position: absolute;
  top: 14px;
  right: 4px;
  height: 0;          /* remove its own flow height */
  min-height: 0;
  padding: 0;
  margin: 0;
  overflow: visible; 
}
#resetTrackRatingsBtn {
  position: relative;
  right: 0;
}
.nowplaying-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; 
  margin-bottom: 32px;
  gap: 32px; 
}
.nowplaying-cover img {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.18);
  transform: rotateY(18deg) scale(1.05);
  background: #eee;
  object-fit: cover;
  margin-left: 12px; 
}
.nowplaying-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  min-width: 180px;
}
.nowplaying-title {
  font-size: 1.3em;
  font-weight: bold;
  color: #222;
  margin-bottom: 2px;
}
.nowplaying-artist, .nowplaying-album {
  font-size: 1em;
  color: #444;
}
.nowplaying-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 0 18px 18px 18px;
}
.nowplaying-bar-bg {
  flex: 1;
  height: 12px;
  background: #e0eaff;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.nowplaying-bar {
  height: 100%;
  background: linear-gradient(90deg, #0074d9 60%, #4fc3f7 100%);
  border-radius: 6px;
  width: 0%;
  transition: width 0.2s linear;
}
.nowplaying-pill {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95em;
  color: #0074d9;
  pointer-events: none;
}
.shuffle-btn {
  font-size: 1.6em;
  padding: 6px 8px;
  border-radius: 8px;
  border: none;
  background: none;
  color: #888;
  margin-top:4px;
  margin-right: 1px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent; 
  outline: none;                            
  user-select: none;                       
  -webkit-user-select: none;                
  -moz-user-select: none;                   
  -ms-user-select: none;  
}
.shuffle-btn.shuffle-on {
  color: #0074d9;
}
.shuffle-btn:active {
  background: #e0eaff;
}
.rating-count {
  font-size: 0.8em;
  color: #777;       
  min-width: 1.6em;
  text-align: center;
}
.rating-like {
  color: #0074d9;      
}
.rating-dislike {
  color: #d90429;   
}
.rating-like-weekly,
.rating-dislike-weekly {
  position: relative;
}
.rating-like-weekly::after {
  content: "•";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
  line-height: 1;
  color: #0074d9;
  pointer-events: none;
}
.rating-dislike-weekly::after {
  content: "•";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
  line-height: 1;
  color: #d90429;
  pointer-events: none;
}
.np-viz-panel {
  margin: 6px 8px 0 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: #f6f8ff;
  box-shadow: 0 1px 4px #0001;
}
.np-viz-panel canvas {
  width: 100%;
  height: 48px;
  display: block;
}
.nowplaying-container {
  padding: 14px 10px 0 10px; 
}

/* --- Disk  Controls --- */

.vpod-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 380px;
  height: 180px;
  margin: 0 auto;
  background: none;
  box-shadow: none;
}

.vpod-disk {
  position: relative;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at 60% 40%, #f7f7f7 60%, #e4e4e4 100%);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid #d0d0d0;
  overflow: visible;
}

.vpod-disk:before {
  content: "";
  position: absolute;
  left: 20px; top: 20px;
  width: 160px; height: 60px;
  background: linear-gradient(120deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.05) 100%);
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  pointer-events: none;
  z-index: 1;
}

.vpod-disk-btn {
  position: absolute;
  background: none;
  border: none;
  color: #444;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  z-index: 2;
  user-select: none;
  transition: background 0.2s, color 0.2s;
  padding: 0;
  text-shadow: 0 1px 2px #fff, 0 -1px 2px #bbb;
}

.vpod-disk-menu   { top: 18px; left: 50%; transform: translateX(-50%); }
.vpod-disk-play   { bottom: 18px; left: 50%; transform: translateX(-50%); }
.vpod-disk-prev   { left: 18px; top: 50%; transform: translateY(-50%); }
.vpod-disk-next   { right: 18px; top: 50%; transform: translateY(-50%); }

.vpod-disk-menu::after,
.vpod-disk-play::after,
.vpod-disk-prev::after,
.vpod-disk-next::after {
  content: "";
  position: absolute;
  inset: -12px; 
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
}

.vpod-disk-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  background: linear-gradient(160deg, #f6f6f8 0%, #e2e2e4 60%, #cfcfd2 100%);
  border: 2.5px solid #d4d4d8;
  border-radius: 50%;
  box-shadow: 0 1px 4px #fff inset;
  cursor: pointer;
  z-index: 3;
  transition: box-shadow 0.2s;
}

.vpod-disk-center:active {
  box-shadow: 0 0 0 1px #bbb inset;
}

.vpod-disk-btn, .vpod-disk-center {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.vpod-disk-touch {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 200px; height: 200px;
  border-radius: 50%;
  z-index: 1;
}

.vpod-disk:active {
  box-shadow: 0 0 12px 2px #c0c0c08e, 0 0 6px rgba(0, 0, 0, 0.041);
}

.load-music-btn {
  background: radial-gradient(circle at 60% 40%, #e0eaff 70%, #0074d9 100%);
  color: #222;
  border: 0;
  border-radius: 24px;
  padding: 20px 48px;
  font-size: 1.25em;
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 24px;
  box-shadow:
    0 4px 18px rgba(0,0,0,0.13),
    0 1px 4px rgba(0,0,0,0.08);
  transition: background 0.22s, transform 0.15s;
  outline: none;
  letter-spacing: 0.04em;
  position: relative;
  overflow: hidden;
}

.load-music-btn .btn-icon {
  display: inline-block;
  font-size: 1.5em;
  margin-right: 16px;
  vertical-align: middle;
  animation: btnPulse 1.2s infinite alternate;
}

@keyframes btnPulse {
  0% { transform: scale(1);}
  100% { transform: scale(1.18);}
}

.load-music-btn .btn-text {
  display: inline-block;
  vertical-align: middle;
  font-weight: bold;
  letter-spacing: 0.06em;
}

.load-music-btn:hover,
.load-music-btn:focus {
  background: radial-gradient(circle at 60% 40%, #0074d9 80%, #4fc3f7 100%);
  color: #fff;
  transform: scale(1.04);
  box-shadow: 0 8px 28px rgba(0,0,0,0.16);
}

.load-music-btn:active {
  background: #0074d9;
  color: #fff;
  transform: scale(0.98);
}

.stats-screen {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 12px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

.stats-hero-card,
.user-stats-box {
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfbfb 0%, #f1f1f3 100%);
  border: 1px solid #d9d9de;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 20px rgba(0,0,0,0.05);
}

.stats-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.user-stats-title {
  font-size: 1.18em;
  font-weight: 700;
  color: #1e1e1e;
  letter-spacing: -0.01em;
}

.user-stats-subtitle {
  margin-top: 3px;
  font-size: 0.84em;
  line-height: 1.35;
  color: #666;
  max-width: 220px;
}

.stats-danger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(180, 24, 43, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(247,239,241,0.92) 100%);
  color: #b4182b;
  font-size: 0.8em;
  font-weight: 600;
  cursor: pointer;
}

.stats-danger-btn i {
  font-size: 0.95em;
}

.stats-device-grid,
.stats-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stats-device-item,
.stats-metric-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(217,217,222,0.9);
}

.stats-device-label,
.stats-metric-label,
.stats-spotlight-label {
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a7a82;
}

.stats-device-item strong,
.stats-metric-value,
.stats-spotlight-value,
.stats-row-item strong {
  color: #1f1f23;
  font-weight: 700;
}

.stats-device-item strong {
  font-size: 0.94em;
  word-break: break-word;
}

.stats-section-title {
  margin-bottom: 10px;
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4f5660;
}

.stats-metric-value {
  font-size: 1.08em;
}

.stats-spotlight-list,
.stats-row-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.stats-spotlight-item,
.stats-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(220,220,226,0.88);
}

.stats-spotlight-item {
  align-items: flex-start;
  flex-direction: column;
}

.stats-spotlight-value {
  font-size: 0.93em;
  line-height: 1.35;
  word-break: break-word;
}

.stats-row-item span {
  color: #555c66;
  font-size: 0.92em;
}

.stats-note {
  color: #666;
  font-size: 0.92em;
  padding: 4px 2px;
}

.user-stats-box--compact {
  padding-top: 12px;
}

.songSearchInput {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 0.95em;
}

#allSongsList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
}

.recap-slide {
  transition: transform 0.4s cubic-bezier(.4,1.3,.6,1), opacity 0.3s;
  will-change: transform, opacity;
}

/* Hide scrollbars */
body, html, .vpod-screen, .screen-content, .album-list-left, .album-list-right, .album-list, #songsList, #suggestedList, #smartMixList, #allSongsList, #playlistSongsList, #playlistSongsSelectList, #albumCarousel, .stats-screen {
  scrollbar-width: none; 
  -ms-overflow-style: none;  
}

body::-webkit-scrollbar,
.vpod-screen::-webkit-scrollbar,
.screen-content::-webkit-scrollbar,
.album-list-left::-webkit-scrollbar,
.album-list-right::-webkit-scrollbar,
.album-list::-webkit-scrollbar,
#songsList::-webkit-scrollbar,
#suggestedList::-webkit-scrollbar,
#smartMixList::-webkit-scrollbar,
#allSongsList::-webkit-scrollbar,
#playlistSongsList::-webkit-scrollbar,
#playlistSongsSelectList::-webkit-scrollbar,
#albumCarousel::-webkit-scrollbar,
.classic-main-list::-webkit-scrollbar,
.stats-screen::-webkit-scrollbar {
  display: none;                
}

.screen-fade-in {
  opacity: 0;
  animation: fadeIn 0.35s forwards;
}
.screen-fade-out {
  opacity: 1;
  animation: fadeOut 0.35s forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes fadeOut {
  to { opacity: 0; }
}

@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

/* --- Responsive vpod for Mobile --- */
@media (max-width: 600px) {
  .ipod-utility-screen {
    padding: 3vw 3vw 3.5vw;
  }

  .ipod-utility-header {
    padding-bottom: 2vw;
    margin-bottom: 3vw;
  }

  .ipod-utility-title {
    font-size: 1rem;
  }

  .ipod-utility-body {
    gap: 2.4vw;
  }

  .ipod-utility-glyph {
    width: 14vw;
    height: 14vw;
    border-radius: 3.4vw;
    font-size: 1.2rem;
  }

  .ipod-utility-copy {
    max-width: 70vw;
    font-size: 0.75rem;
    line-height: 1.28;
  }

  .load-music-actions {
    max-width: 68vw;
  }

  .load-music-status-copy {
    max-width: 62vw;
  }

  .load-music-status-card {
    max-width: 64vw;
    padding: 2.4vw 2.8vw;
    border-radius: 3.6vw;
  }

  .load-music-counter {
    font-size: 0.74rem;
  }

  .load-music-status-note {
    margin-top: 1.2vw;
    font-size: 0.68rem;
  }

  :root {
    --vpod-menu-row-padding-top: 3vw;
    --vpod-menu-row-padding-right: 2vw;
    --vpod-menu-row-padding-bottom: 3vw;
    --vpod-menu-row-padding-left: 3.5vw;
    --vpod-menu-row-font-size: 0.95em;
  }

  #vmusic-page-buttons {
    top: 18px;
    right: 8px;
    gap: 12px;
  }

  #vmusic-page-buttons button {
    width: 18px;
    height: 18px;
    font-size: 1.1em;
  }

  .vpod-container {
    width: 85vw;
    height: 80vh;
    min-width: 0;
    min-height: 0;
    border-radius: 7vw;
    margin: 1vw auto;
    padding: 5vw 0 8vw 0;
  }

  .vpod-screen {
    width: 75vw;
    height: 120vw;
    min-width: 0;
    min-height: 0;
    border-radius: 4vw;
    margin-bottom: 8vw;
    font-size: 0.9em;
    border-width: 0.7vw;
    box-shadow:
      0 0.5vw 0.5vw rgba(0,0,0,0.13),
      0 0 0 1vw #e0e0e0,
      0 1vw 4vw 1vw #b0b0b0 inset;
  }

  .vpod-controls {
    width: 88vw;
    height: 88vw;
    min-width: 0;
    min-height: 0;
  }

  .vpod-disk {
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    border-width: 0.7vw;
  }
  .vpod-disk:before {
    content: "";
    position: absolute;
    left: 20px; top: 20px;
    width: 160px; height: 60px;
    background: linear-gradient(140deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.05) 100%);
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    pointer-events: none;
    z-index: 1;
  }
  .vpod-disk-center {
    width: 18vw;
    height: 18vw;
    border-width: 0.7vw;
  }
  .vpod-disk-btn {
    font-size: 1.3em;
  }
  .vpod-disk-menu   { top: 3vw; left: 50%; transform: translateX(-50%); }
  .vpod-disk-play   { bottom: 3vw; left: 50%; transform: translateX(-50%); }
  .vpod-disk-prev   { left: 3vw; top: 50%; transform: translateY(-50%); }
  .vpod-disk-next   { right: 3vw; top: 50%; transform: translateY(-50%); }
  .vpod-disk-touch {
    width: 60vw;
    height: 60vw;
  }

  #hotBarTime {
    max-width: 60%;
  }

  .custom-file-btn {
    font-size: 1.1em;
    padding: 4vw 8vw;
    border-radius: 4vw;
    margin-bottom: 4vw;
  }

  /* --- Main Menu --- */

  .classic-main-list {
    width: 52%;
  }

  .classic-main-preview {
    width: 48%;
  }

  .main-menu-preview-overlay {
    padding: 3vw 2vw 2.5vw;
  }

  .main-menu-preview-title {
    font-size: 0.82em;
  }

  .main-menu-preview-subtitle {
    font-size: 0.66em;
  }

  .main-menu-preview-glyph--fill i {
    font-size: 2.6rem;
  }

  .main-menu-preview-accent {
    right: 3vw;
    bottom: 3vw;
  }

  .main-menu-preview-accent i {
    font-size: 0.82rem;
  }

  /* --- Album Carousel --- */

  .album-cover {
    width: 58vw;
    height: 58vw;
  }

  .album-list-left, .album-list-right {
    width: 50%;
  }

  .suggested-pane-header {
    padding: 2.2vw 2.2vw 2.8vw;
  }

  .smartmix-pane-header {
    padding: 2.2vw 2.2vw 2.8vw;
    min-height: 20vw;
    max-height: 20vw;
  }

  .suggested-pane-actions {
    flex-wrap: nowrap;
  }

  .smartmix-pane-subtitle,
  .smartmix-action-note,
  .smartmix-song-reason {
    font-size: 0.7em;
  }

  .smartmix-song-meta {
    font-size: 0.72em;
  }

  .smartmix-action-icon {
    width: 24px;
    height: 24px;
  }

  .smartmix-art-card {
    width: 86%;
    padding: 2.4vw 2.8vw;
    border-radius: 4vw;
  }

  .smartmix-art-kicker {
    font-size: 0.62em;
  }

  .smartmix-art-title {
    font-size: 0.86em;
  }

  .smartmix-art-meta {
    font-size: 0.7em;
  }

  .smartmix-empty-state {
    padding: 0 6vw;
  }

  .smartmix-empty-icon {
    width: 15vw;
    height: 15vw;
    border-radius: 4vw;
    font-size: 1.35em;
  }

  .suggested-action-btn {
    min-height: 28px;
    font-size: 0.74em;
    padding: 0 8px;
  }

  .suggested-song-meta,
  .suggested-song-reason {
    font-size: 0.72em;
  }

  .suggested-art-caption {
    width: 84%;
    padding: 2.6vw 2.8vw;
    border-radius: 4vw;
  }

  .suggested-empty-state {
    padding: 0 6vw;
  }

  .suggested-empty-icon {
    width: 15vw;
    height: 15vw;
    border-radius: 4vw;
    font-size: 1.35em;
  }

  .album-carousel-container {
    height: auto;
    min-height: 0;
    padding-top: 0;
  }

  .album-carousel {
    height: 38vw;
    margin-bottom: 10vw;
  }

  .carousel-album {
    width: 22vw;
    height: 20vw;
  }

  .carousel-cover {
    width: 24vw;
    height: 24vw;
    border-radius: 3vw;
  }

  .carousel-cover-reflect img.reflection {
    width: 24vw;
    height: 8vw;
    border-radius: 2px 2px 24px 24px;
    transform: scaleY(-1);
    opacity: 0.10;
    filter: blur(2px);
    margin-top: -2vw;
  }

  .carousel-cover-reflect::after {
    top: 100%;
    height: 8vw;
    border-radius: 0 0 12px 12px;
  }

  .carousel-album-center {
    transform: translate(-50%, -50%) scale(1.18) rotateY(0deg);
  }

  .album-title {
    font-size: 1.2em;
    margin-top: 2vw;
  }

  /* --- Mobile Now Playing --- */
  .nowplaying-container {
    padding: 1.5vw 1vw 0 1vw;
    min-height: 0;
  }

  #resetTrackRatings {
    right: 0;
  }

  #resetTrackRatingsBtn {
    top: 2px; 
  }

  .nowplaying-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; 
    margin-bottom: 18px;
    gap: 14px;
  }

  .nowplaying-cover img {
    width: 28vw;
    height: 28vw;
    border-radius: 3vw;
    margin-top: 2vw;
    transform: rotateY(14deg) scale(1.04);
  }

  .nowplaying-meta {
    min-width: 0;
    align-items: center;
    text-align: center;
  }

  .nowplaying-title {
    font-size: 1.15em;
  }

  .nowplaying-artist, .nowplaying-album {
    font-size: 0.9em;
  }

  .nowplaying-progress {
    gap: 3vw;
    padding: 0 4vw 2vw 4vw;
  }

  .nowplaying-bar-bg {
    height: 3vw;
    border-radius: 2vw;
  }

  #likeBtn, #dislikeBtn {
    font-size: 1.1em;
    margin-left: 1px;
    padding-left: 0;
    gap: 1px;
  }
  #likeBtn i, #dislikeBtn i {
    font-size: 0.9em;
  }
  #likeCountLabel, #dislikeCountLabel {
    font-size: 0.75em;
    min-width: 0;
  }

  .rating-like-weekly,
  .rating-dislike-weekly {
    padding-right: 12px; /* add space for the dot */
  }

  .rating-like-weekly::after {
    right: 2px;         /* was -2px */
  }

  .rating-dislike-weekly::after {
    right: 2px;         /* was -2px */
  }

  #addToPlaylistBtn,
  #queueBtn,
  #vizToggleBtn {
    font-size: 1em;
    padding: 4px 6px;
  }
  .shuffle-btn {
    font-size: 1.3em;
    padding: 4px 6px;
    margin-top: 2px;
  }

  .nowplaying-progress {
    gap: 2.4vw;
    padding: 0 3vw 2vw 3vw;
  }
  .nowplaying-bar-bg {
    height: 2.6vw;
    border-radius: 1.6vw;
  }

  .about-userinfo,
  .user-stats-box {
    padding: 4vw 3vw;
    border-radius: 5vw;
    box-shadow: 0 1vw 4vw #0001;
    margin-bottom: 4vw;
    background: #f6f6f8;
    width: 80vw;
    max-width: 80vw;
    font-size: 1em;
  }
  .about-title,
  .user-stats-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 3vw;
    text-align: center;
  }
  .about-details,
  .user-stats-details {
    font-size: 1em;
    color: #444;
    text-align: center;
    margin-bottom: 3vw;
    max-width: 80vw;
  }
  .about-serial {
    font-size: 1em;
    color: #222;
    word-break: break-all;
  }
  .user-stats-box b {
    font-size: 1em;
    color: #0074d9;
  }

  .stats-screen {
    padding: 3vw 3vw 4vw;
    gap: 3vw;
  }

  .stats-hero-card,
  .user-stats-box {
    max-width: 80vw;
    padding: 4vw 3vw;
  }

  .stats-hero-top {
    flex-direction: column;
    align-items: stretch;
  }

  .stats-danger-btn {
    align-self: flex-end;
    font-size: 0.82em;
  }

  .stats-device-grid,
  .stats-metric-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.2vw;
  }

  .stats-device-item,
  .stats-metric-tile,
  .stats-spotlight-item,
  .stats-row-item {
    border-radius: 4vw;
    padding: 3vw;
  }

  .user-stats-title {
    font-size: 1.15em;
  }

  .user-stats-subtitle,
  .stats-spotlight-value,
  .stats-row-item span,
  .stats-row-item strong {
    font-size: 0.9em;
  }

  .songSearchInput {
    margin-left: 0;
    padding: 4px 10px;
  }
}