body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; padding: 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; }
main { max-width: 720px; margin: 0 auto; }
h1 { color: white; text-align: center; }
.btn { display:inline-block; padding:8px 12px; margin-right:8px; text-decoration:none; color: #fff; border-radius:4px; border: none; cursor: pointer; }
.btn.spotify { background: #1DB954; }
.btn.tidal { background: #000000; }
.btn.google { background: #4285F4; }
.auth { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
#auth-prompt { margin: 0 0 10px 0; font-weight: 600; }
#userArea { margin-top: 10px; }
.banner { background: #4CAF50; color: white; padding: 10px; border-radius: 4px; margin-bottom: 20px; }
.setlist { margin-top: 18px; background: white; padding: 20px; border-radius: 8px; }
.setlist label { font-weight: 600; display: block; margin-bottom: 8px; }
#setlist-input { width: 100%; padding:8px; margin-top:6px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
.suggestions { list-style:none; padding:0; margin:6px 0; border:1px solid #eee; max-height:160px; overflow:auto; background: white; }
.suggestions li { padding:8px; cursor:pointer; border-bottom: 1px solid #f0f0f0; }
.suggestions li:hover { background:#f3f3f3; }
.suggestions li:last-child { border-bottom: none; }
.artist-result-item { display: flex; flex-direction: column; }
.artist-result-name { font-size: 0.95em; color: #333; font-weight: 500; }
.artist-result-disambiguation { font-size: 0.8em; color: #666; margin-top: 2px; font-style: italic; }
.artist-result-mbid { font-size: 0.75em; color: #999; margin-top: 2px; font-family: monospace; }
.setlist-item { display: flex; flex-direction: column; }
.setlist-item-date { font-size: 0.85em; color: #666; }
.setlist-item-venue { font-size: 0.9em; color: #444; margin-top: 2px; }
.search-context { font-size: 0.9em; color: #666; margin: 8px 0; font-style: italic; }
.result { margin-top: 12px; padding:12px; background:#fafafa; border:1px solid #eee; border-radius: 4px; }
.result.success { background: #e8f5e9; border-color: #4caf50; }
.result a { color: #1DB954; text-decoration: none; font-weight: 600; }
.result a:hover { text-decoration: underline; }

/* Vinyl Record Styles */
.vinyl-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  padding: 40px 20px;
}

.vinyl {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2a2a 0%, #0a0a0a 100%);
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease;
}

.vinyl:hover {
  transform: scale(1.02);
}

.vinyl.spinning {
  animation: spin 3s linear infinite;
}

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

/* Vinyl grooves - concentric circles */
.vinyl-grooves {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: 
    repeating-radial-gradient(
      circle at center,
      transparent 0px,
      transparent 1.5px,
      rgba(255, 255, 255, 0.08) 1.5px,
      rgba(255, 255, 255, 0.08) 2px,
      transparent 2px,
      transparent 3px,
      rgba(0, 0, 0, 0.15) 3px,
      rgba(0, 0, 0, 0.15) 3.5px
    );
}

/* Vinyl label in the center */
.vinyl-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45%;
  height: 45%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #f5f5dc 0%, #d4c5a9 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 2px 5px rgba(255, 255, 255, 0.3);
  border: 2px solid #8b7355;
  font-size: clamp(10px, 2.5vw, 18px);
}

.label-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 10%;
}

.artist-name {
  font-size: 1em;
  font-weight: bold;
  color: #2c2c2c;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.1;
  text-align: center;
  width: 85%;
  max-height: 35%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  position: absolute;
  top:  25%;
  left: 42%;
  transform: translate(-50%, -50%);
}

.venue-name {
  font-size: 0.8em;
  color: #555;
  font-style: italic;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.1;
  text-align: center;
  width: 85%;
  max-height: 35%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  position: absolute;
  bottom: 35%;
  left: 42%;
  transform: translate(-50%, 50%);
}

/* Responsive font sizes for vinyl label */
@media (min-width: 768px) {
  .vinyl-label {
    font-size: 18px;
  }
}

/* Center hole */
.vinyl-center-hole {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #1a1a1a 0%, #000 100%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
}

/* Event UI Styles */
.event-ui {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
  border: 2px solid #667eea;
}

.event-info {
  margin-bottom: 20px;
}

.event-info h3 {
  margin-top: 0;
  color: #667eea;
  font-size: 1.2em;
}

.event-info p {
  margin: 8px 0;
  color: #333;
}

.event-info strong {
  color: #555;
}

.artist-list {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  border: 1px solid #eee;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  position: relative;
}

/* Fade effect at the bottom to indicate scrollability */
.artist-list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.85));
  border-radius: 0 0 4px 4px;
}

/* Optional: Fade effect at the top when scrolled */
.artist-list::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,0.7));
  border-radius: 4px 4px 0 0;
}
.artist-list li {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.artist-list li:last-child {
  border-bottom: none;
}

.playlist-options {
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.playlist-options h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 1em;
}

.playlist-options button {
  margin: 5px 5px 5px 0;
  background: #667eea;
  padding: 10px 16px;
  font-size: 0.95em;
}

.playlist-options button:hover {
  background: #5568d3;
}

.playlist-options button.btn-primary {
  background: #1DB954;
  font-weight: 600;
}

.playlist-options button.btn-primary:hover {
  background: #1aa34a;
}