* { box-sizing: border-box; margin:0; padding:0; }
:root {
  --primary:#6366f1;
  --secondary:#f43f5e;
  --dark:#0f172a;
  --light:#f1f5f9;
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --track-bg: rgba(255,255,255,0.03);
  --glass-bg: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.1);
  --shadow-color: rgba(0,0,0,0.2);
  --search-bg: #1e293b;
  --scrollbar-color: #475569;
  --tg-safe-top: env(safe-area-inset-top);
}

html, body, #root { height:100%; width:100%; }
body {
  font-family:'Segoe UI',sans-serif;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.min-h-0 {
  min-height: 0;
}

.h-full {
  height: 100%;
}

.overflow-y-auto {
  overflow-y: auto;
}

/* Стили скроллбара */
.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.5);
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.7);
}

.glass-effect {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border:1px solid var(--glass-border);
  border-radius:16px;
  box-shadow:0 4px 24px var(--shadow-color);
  transition: all 0.3s ease;
}

#tracks {
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding: 6px 8px 16px 8px;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color) transparent;
  transition: all 0.3s ease;
}
#tracks::-webkit-scrollbar{width:8px}
#tracks::-webkit-scrollbar-thumb{background:var(--scrollbar-color);border-radius:8px}

.progress-bar{
  -webkit-appearance:none; appearance:none;
  height:10px; border-radius:10px;
  background:linear-gradient(to right,var(--primary) 0%,var(--secondary) 0%,rgba(0,0,0,0.1) 0%);
  outline:none;
  transition: all 0.3s ease;
}
.progress-bar::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--text-primary);border:2px solid var(--primary);
  cursor:pointer;
  box-shadow:0 0 10px rgba(99,102,241,0.6);
  transition: all 0.2s ease;
}
.progress-bar::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--text-primary);border:2px solid var(--primary);
  cursor:pointer;
  box-shadow:0 0 10px rgba(99,102,241,0.6);
  transition: all 0.2s ease;
}

.control-btn{ transition:all .2s; }
.control-btn:hover{ transform:scale(1.05); }
.control-btn:active{ transform:scale(0.95); }
.play-btn{ box-shadow:0 4px 20px rgba(99,102,241,0.3); }

.track-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:0.75rem;
  border-radius:1rem;
  background:var(--track-bg);
  backdrop-filter:blur(6px);
  transition:all 0.3s ease;
  box-shadow:0 2px 8px var(--shadow-color);
  opacity: 1;
  transform: translateY(0);
}
.track-item.hiding {
  opacity: 0;
  transform: translateY(20px);
}
.track-item:hover{ background:rgba(0,0,0,0.08); transform:translateY(-2px); }
.track-item.highlight{ outline:2px solid rgba(99,102,241,.45); background:rgba(99,102,241,.12); }

.track-cover, .player-cover {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  pointer-events: none;
}

.track-cover{
  width:56px; height:56px; border-radius:.75rem; object-fit:cover; flex-shrink:0;
  box-shadow:0 2px 6px var(--shadow-color);
  transition: all 0.3s ease;
}

.player-cover {
  transition: all 0.5s ease;
  opacity: 1;
  transform: scale(1);
}
.player-cover.hiding {
  opacity: 0;
  transform: scale(0.9);
}

.fade-transition {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.cover-container { position: relative; display: inline-block; }
.cover-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.01); pointer-events: all; cursor: default; border-radius: 1rem; }

@media (max-width:640px){.player-cover{width:240px;height:240px;} }
@media (min-width:641px) and (max-width:1024px){.player-cover{width:300px;height:300px;} }
@media (min-width:1025px){.player-cover{width:380px;height:380px;} }