:root {
  color-scheme: light;
  --sidebar-bg: rgba(255, 252, 248, 0.92);
  --border-color: rgba(33, 28, 24, 0.12);
  --block-hover: rgba(33, 28, 24, 0.045);
  --block-bg: rgba(255, 253, 250, 0.94);
  --text-secondary: rgba(33, 28, 24, 0.64);
  --text-primary: #111111;
  --accent-color: #111111;
  --accent-gradient: linear-gradient(135deg, #111111 0%, #3f3a35 100%);
  --bg-gradient: radial-gradient(circle at top, #ffffff 0%, #f8f4ee 48%, #efe7db 100%);
}

.animated-bg {
  background: var(--bg-gradient);
  background-attachment: fixed;
  animation: none;
}

.titlebar,
.sidebar,
.main-content,
.player-bar,
.mini-window,
.pitch-window,
.cookie-box,
.setting-group,
.track-card,
.theme-card,
.user-info,
.eq-button {
  background: rgba(255, 252, 248, 0.92);
  border-color: rgba(33, 28, 24, 0.12);
  color: #111111;
  box-shadow: 0 14px 36px rgba(33, 28, 24, 0.08);
}

.titlebar {
  background: rgba(255, 252, 248, 0.96);
  border-color: rgba(33, 28, 24, 0.08);
}

.logo,
.titlebar .logo {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #111111;
  color: #111111;
  text-shadow: none;
}

.window-buttons button {
  color: #111111;
}

.window-buttons button:hover {
  background: rgba(0, 0, 0, 0.08);
}

.sidebar {
  backdrop-filter: blur(18px);
}

.avatar {
  background: linear-gradient(135deg, #ffffff, #ece6db);
  border-color: rgba(18, 18, 18, 0.15);
  color: rgba(17, 17, 17, 0.36);
}

.username,
.content-title,
.content-subtitle2,
.track-info,
.track-title,
.track-artist,
.player-title,
.player-artist,
.setting-label,
.mini-window-title,
.pitch-track-label,
.cookie-title,
.cookie-text,
.theme-card span,
.eq-button,
.author-link {
  color: #111111;
}

.nav-item {
  color: rgba(17, 17, 17, 0.72);
}

.nav-item:hover,
.nav-item.active {
  background: rgba(0, 0, 0, 0.08);
  color: #111111;
  border-color: rgba(0, 0, 0, 0.12);
}

.main-content {
  backdrop-filter: blur(18px);
}

.content-subtitle {
  color: rgba(17, 17, 17, 0.64);
}

.setting-group {
  background: rgba(255, 255, 255, 0.9);
}

.setting-input {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(18, 18, 18, 0.12);
  color: #111111;
}

.setting-input::placeholder {
  color: rgba(17, 17, 17, 0.42);
}

.btn-primary {
  background: linear-gradient(135deg, #111111 0%, #4f4f4f 100%);
  color: white;
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.18);
}

.btn-primary:hover {
  box-shadow: 0 14px 28px rgba(17, 17, 17, 0.22);
}

.track-card,
.theme-card {
  background: rgba(255, 255, 255, 0.92);
}

.track-card:hover,
.theme-card:hover,
.track-card.playing {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(18, 18, 18, 0.18);
}

.track-card.playing::before {
  background: rgba(0, 0, 0, 0.03);
}

.track-card.playing::after {
  background: linear-gradient(120deg,
      rgba(17, 17, 17, 0.05),
      rgba(17, 17, 17, 0.09),
      rgba(17, 17, 17, 0.05),
      rgba(17, 17, 17, 0.03));
}

.track-cover {
  background: linear-gradient(135deg, #f8f2e8 0%, #dfd6c8 100%);
}

.play-overlay {
  background: rgba(255, 255, 255, 0.3);
}

.play-btn {
  background: linear-gradient(135deg, #ffffff 0%, #dedede 100%);
  border-color: rgba(18, 18, 18, 0.18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  color: #111111;
}

.play-btn::after {
  border-color: transparent transparent transparent #111111;
}

.track-card.playing .play-overlay {
  background: rgba(255, 255, 255, 0.18);
}

.track-menu-btn,
.track-remove-btn,
.playlist-back-btn,
.playlist-delete-btn {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(18, 18, 18, 0.12);
  color: #111111;
}

.track-menu-btn:hover,
.track-remove-btn:hover,
.playlist-back-btn:hover,
.playlist-delete-btn:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(18, 18, 18, 0.18);
}

.copy-btn {
  color: #111111;
}

.player-bar {
  backdrop-filter: blur(28px);
}

.player-info:hover .player-title {
  color: rgba(17, 17, 17, 0.72);
}

.player-cover {
  background: linear-gradient(135deg, #ffffff 0%, #e7e0d5 100%);
}

.player-artist,
#currentTime,
#totalTime {
  color: rgba(17, 17, 17, 0.62);
}

.like-btn,
.control-btn,
.player-action-btn {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(18, 18, 18, 0.12);
  color: #111111;
}

.like-btn:hover,
.control-btn:hover,
.player-action-btn:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(18, 18, 18, 0.18);
}

.player-action-btn.pitch-action {
  background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%);
  color: #111111;
  border-color: rgba(18, 18, 18, 0.12);
}

.player-action-btn.pitch-action:hover {
  background: #ffffff;
}

.control-btn.prev::after,
.control-btn.next::after {
  border-color: transparent rgba(17, 17, 17, 0.82) transparent transparent;
}

.control-btn.next::after {
  border-color: transparent transparent transparent rgba(17, 17, 17, 0.82);
}

.control-btn.play-pause:not(.playing)::after {
  border-color: transparent transparent transparent #111111;
}

.control-btn.play-pause.playing::before,
.control-btn.play-pause.playing::after {
  background: #111111;
}

.progress-bar {
  background: rgba(0, 0, 0, 0.12);
}

.progress-fill {
  background: linear-gradient(90deg, #111111 0%, #6a6a6a 100%);
}

.volume-control svg,
.volume-control path {
  fill: #111111 !important;
}

.mini-window,
.pitch-window {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(18, 18, 18, 0.1);
  color: #111111;
}

.mini-window-subtitle {
  color: rgba(17, 17, 17, 0.62);
}

.mini-error {
  color: rgba(180, 34, 34, 0.9);
}

.mini-close-btn,
.pitch-close-btn {
  background: rgba(0, 0, 0, 0.07);
  color: #111111;
}

.mini-close-btn:hover,
.pitch-close-btn:hover {
  background: rgba(0, 0, 0, 0.12);
}

.add-track-window .file-upload-label {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(18, 18, 18, 0.12);
  color: rgba(17, 17, 17, 0.72);
}

.profile-avatar-upload .file-upload-label {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(18, 18, 18, 0.12);
  color: rgba(17, 17, 17, 0.74);
}

.profile-avatar-slot {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(18, 18, 18, 0.12);
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.08);
}

.profile-avatar-text,
.profile-avatar-label.has-file .profile-avatar-text {
  color: rgba(17, 17, 17, 0.74);
}

.add-track-window .file-upload-label.has-file {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(18, 18, 18, 0.18);
}

.playlist-pick-item,
.playlist-create-panel,
.playlist-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(18, 18, 18, 0.12);
  color: #111111;
}

.playlist-pick-item:hover,
.playlist-card:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(18, 18, 18, 0.18);
}

.playlist-pick-item small,
.playlist-card-count {
  color: rgba(17, 17, 17, 0.6);
}

.playlist-card-name {
  color: #111111;
}

.playlist-card-cover {
  background: linear-gradient(135deg, #f7efe4 0%, #dfd4c5 100%);
  color: #111111;
}

.playlist-empty {
  border-color: rgba(18, 18, 18, 0.14);
  color: rgba(17, 17, 17, 0.56);
}

.together-note,
.together-room-line span,
.together-status-row span,
.together-member-role,
.together-empty {
  color: rgba(17, 17, 17, 0.62);
}

.together-address-pill,
.together-secondary-btn,
.together-room-card,
.together-member,
.together-empty {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(18, 18, 18, 0.12);
  color: #111111;
}

.together-address-pill.preferred {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(18, 18, 18, 0.2);
}

.together-room-code {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(18, 18, 18, 0.14);
  color: #111111;
}

.together-room-line strong,
.together-status-row strong {
  color: #111111;
}

.search-local-add {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(18, 18, 18, 0.12);
}

.search-local-subtitle {
  color: rgba(17, 17, 17, 0.64);
}

.theme-card span {
  color: #111111;
}

.theme-card:hover .theme-preview {
  box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.08);
}

.pitch-dial {
  background: radial-gradient(circle at 50% 50%, #ffffff 0 45%, #f0ebe3 46% 68%, #dbd3c5 69% 100%);
  box-shadow:
      inset 0 2px 10px rgba(255, 255, 255, 0.72),
      inset 0 -6px 16px rgba(0, 0, 0, 0.08),
      0 16px 35px rgba(0, 0, 0, 0.16);
}

.pitch-dial-ring {
  background: conic-gradient(from -135deg, #111111 0deg var(--pitch-progress), rgba(0, 0, 0, 0.12) var(--pitch-progress) 270deg, transparent 270deg 360deg);
}

.pitch-dial-pointer {
  background: #111111;
}

.pitch-dial-value {
  color: #111111;
}

.cookie-box {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(18, 18, 18, 0.1);
}

.cookie-text {
  color: rgba(17, 17, 17, 0.68);
}

.cookie-btn {
  background: linear-gradient(135deg, #111111 0%, #464646 100%);
  color: white;
}

.eq-button {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(18, 18, 18, 0.12);
}

.eq-button:hover {
  background: rgba(255, 255, 255, 0.98);
}

.main-content [style*="color: rgba(255,255,255"],
.main-content [style*="color: rgba(255, 255, 255"],
.main-content [style*="color: rgb(255, 255, 255"],
.main-content [style*="color: white"],
.main-content [style*="color:white"] {
  color: rgba(17, 17, 17, 0.72) !important;
}

.main-content [style*="background: rgba(255,255,255"],
.main-content [style*="background: rgba(255, 255, 255"],
.main-content [style*="background:rgba(255,255,255"] {
  background: rgba(0, 0, 0, 0.04) !important;
}

.main-content [style*="border: 1px solid rgba(255,255,255"],
.main-content [style*="border: 1px solid rgba(255, 255, 255"],
.main-content [style*="border:1px solid rgba(255,255,255"] {
  border-color: rgba(18, 18, 18, 0.08) !important;
}