/* StarsMix premium layer — inspired by mature music surfaces, not a clone. */
:root {
  --bg-base: #070a12;
  --bg-surface: #0d1322;
  --bg-elevated: rgba(18, 25, 42, .78);
  --bg-highlight: rgba(255, 255, 255, .075);
  --bg-press: rgba(255, 255, 255, .12);
  --color-primary: #6ee7f9;
  --color-primary-hover: #9ff3ff;
  --color-primary-dim: rgba(110, 231, 249, .14);
  --color-accent: #ff7a18;
  --color-accent-hover: #ff9a3d;
  --color-accent-dim: rgba(255, 122, 24, .16);
  --text-primary: #f8fbff;
  --text-secondary: rgba(248, 251, 255, .72);
  --text-tertiary: rgba(248, 251, 255, .48);
  --border-subtle: rgba(255, 255, 255, .08);
  --border-default: rgba(255, 255, 255, .13);
  --border-strong: rgba(110, 231, 249, .28);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 18px 42px rgba(0, 0, 0, .34);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, .42);
  --shadow-xl: 0 40px 120px rgba(0, 0, 0, .55);
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
}

[data-theme="light"] {
  --bg-base: #f4f7fb;
  --bg-surface: #ffffff;
  --bg-elevated: rgba(255, 255, 255, .86);
  --bg-highlight: rgba(7, 10, 18, .055);
  --bg-press: rgba(7, 10, 18, .09);
  --color-primary: #0f83a3;
  --color-primary-hover: #075e78;
  --color-primary-dim: rgba(15, 131, 163, .12);
  --color-accent: #df650a;
  --text-primary: #07101f;
  --text-secondary: rgba(7, 16, 31, .68);
  --text-tertiary: rgba(7, 16, 31, .46);
  --border-subtle: rgba(7, 16, 31, .08);
  --border-default: rgba(7, 16, 31, .13);
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(110, 231, 249, .24), transparent 30vw),
    radial-gradient(circle at 88% 18%, rgba(139, 92, 246, .25), transparent 34vw),
    radial-gradient(circle at 62% 92%, rgba(255, 122, 24, .18), transparent 36vw),
    linear-gradient(145deg, #070a12 0%, #0b1020 45%, #070a12 100%);
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 78%);
  z-index: 0;
}
.index-page, .list-page, .player-page { position: relative; z-index: 1; }

.bg-layer { opacity: .62; }
.bg-vignette { background: radial-gradient(circle at center, transparent 0%, rgba(7,10,18,.08) 42%, rgba(7,10,18,.86) 100%); }
.top-bar, .list-header, .player-header {
  background: linear-gradient(180deg, rgba(7, 10, 18, .78), rgba(7, 10, 18, .18));
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}
.version-tag, .api-badge, .player-source-tag, .fav-count-badge {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.api-badge.online, .status-dot.online, .status-bar.online .status-dot { background: #34d399; color: #052e23; }
.icon-btn, .back-btn, .ctrl-btn, .footer-btn, .mini-prev, .mini-next {
  min-width: 44px; min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.icon-btn:hover, .back-btn:hover, .ctrl-btn:hover, .footer-btn:hover { transform: translateY(-1px); border-color: rgba(110,231,249,.28); }

.index-content { max-width: 960px; padding-inline: clamp(18px, 4vw, 48px); }
.logo-area { margin-top: clamp(12px, 3.5vh, 42px); }
.brand-logo {
  width: clamp(104px, 16vw, 148px);
  height: clamp(104px, 16vw, 148px);
  margin-inline: auto;
  border-radius: 34%;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  box-shadow: 0 34px 92px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.10), 0 0 70px rgba(110,231,249,.18);
  transform: translateZ(0);
}
.logo-svg { width: 100%; height: 100%; filter: drop-shadow(0 20px 34px rgba(0,0,0,.25)); }
.app-title {
  margin-top: 22px;
  font-size: clamp(3rem, 9vw, 6.6rem);
  line-height: .86;
  letter-spacing: -.075em;
  font-weight: 950;
  background: linear-gradient(100deg, #fff 0%, #d9fbff 35%, #c4b5fd 68%, #ffb06b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.app-subtitle {
  margin-top: 18px;
  font-size: clamp(1rem, 2.3vw, 1.35rem);
  color: rgba(248,251,255,.68);
  letter-spacing: .04em;
}
.stats-grid { gap: clamp(10px, 2vw, 18px); }
.stat-card, .settings-panel, .modal-content, .song-card, .search-bar, .mini-player, .player-page {
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}
.stat-card { border-radius: 24px; padding: 20px 18px; }
.stat-card:hover, .song-card:hover { border-color: rgba(110, 231, 249, .26); transform: translateY(-2px); }
.stat-num { font-size: clamp(1.7rem, 5vw, 2.7rem); letter-spacing: -.04em; }
.stat-lbl { letter-spacing: .08em; text-transform: uppercase; }

.action-buttons { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); gap: 14px; }
.btn-primary, .btn-secondary, .btn-goto-list {
  min-height: 58px;
  border-radius: 999px;
  letter-spacing: .01em;
  box-shadow: 0 18px 42px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-primary {
  background: linear-gradient(135deg, #6ee7f9 0%, #8b5cf6 52%, #ff7a18 100%);
  color: #06101e;
  font-weight: 900;
}
.btn-secondary {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text-primary);
}
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-2px) scale(1.01); }
.status-bar {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}
.bottom-bar { color: rgba(248,251,255,.50); }

.list-page { max-width: 1180px; }
.list-title { font-size: clamp(1.45rem, 4vw, 2.4rem); letter-spacing: -.035em; }
.search-bar { border-radius: 999px; min-height: 54px; }
.song-list { gap: 10px; }
.song-card { border-radius: 18px; padding: 12px 14px; }
.song-card.playing {
  border-color: rgba(110, 231, 249, .42);
  box-shadow: 0 20px 56px rgba(0,0,0,.38), 0 0 0 1px rgba(110,231,249,.22) inset;
}
.song-title { font-weight: 780; letter-spacing: -.01em; }
.badge-source, .badge-duration { border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.play-btn, .fav-btn, .mini-play {
  background: linear-gradient(135deg, #6ee7f9, #8b5cf6 58%, #ff7a18);
  color: #06101e;
  box-shadow: 0 10px 30px rgba(110,231,249,.16);
}

.player-page {
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100vh - 24px);
  border-radius: 34px;
  padding: clamp(16px, 3vh, 26px);
}
.player-cover-wrap { filter: drop-shadow(0 30px 60px rgba(0,0,0,.42)); }
.player-cover {
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(circle at 35% 25%, rgba(110,231,249,.18), transparent 38%), radial-gradient(circle at 70% 75%, rgba(255,122,24,.16), transparent 40%), rgba(255,255,255,.05);
}
.player-title { font-size: clamp(1.25rem, 4vw, 2rem); letter-spacing: -.035em; }
.ctrl-play {
  width: clamp(70px, 13vh, 90px);
  height: clamp(70px, 13vh, 90px);
  background: linear-gradient(135deg, #6ee7f9, #8b5cf6 54%, #ff7a18);
  color: #06101e;
  box-shadow: 0 20px 62px rgba(110,231,249,.18), 0 12px 38px rgba(255,122,24,.14);
}
.progress-bar-bg, .volume-slider { background: rgba(255,255,255,.10); }
.progress-bar-fill { background: linear-gradient(90deg, #6ee7f9, #8b5cf6, #ff7a18); }

.loading-toast, .error-toast {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(7, 10, 18, .86);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@media (orientation: landscape) and (max-height: 720px) {
  .index-content { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 22px; padding-top: 72px; }
  .logo-area { margin-top: 0; text-align: left; }
  .brand-logo { margin-inline: 0; width: 112px; height: 112px; }
  .app-title { font-size: clamp(3.7rem, 9vw, 6.3rem); }
  .app-subtitle { max-width: 520px; }
  .stats-grid, .action-buttons, .status-bar { grid-column: 2; }
  .bottom-bar { display: none; }
  .player-page { width: min(820px, calc(100vw - 34px)); display: grid; grid-template-columns: 320px 1fr; column-gap: 26px; align-items: center; }
  .player-header, .player-cover-wrap { grid-column: 1; }
  .player-info, .progress-area, .player-controls, .volume-area, .player-footer { grid-column: 2; }
  .player-cover { width: min(300px, 48vh); height: min(300px, 48vh); }
  .player-controls button { min-width: 58px; min-height: 58px; }
}

@media (max-width: 640px) {
  .action-buttons { grid-template-columns: 1fr; }
  .btn-primary, .btn-secondary { min-height: 56px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-bar { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .stat-card:hover, .song-card:hover, .btn-primary:hover, .btn-secondary:hover { transform: none; }
}