* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 min-height: 100vh;
 color: #333;
}

.container {
 max-width: 1400px;
 margin: 0 auto;
 padding: 2rem;
}

header {
 text-align: center;
 margin-bottom: 3rem;
 color: white;
}

header h1 {
 font-size: 3rem;
 font-weight: 700;
 margin-bottom: 1rem;
 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

nav {
 display: flex;
 justify-content: center;
 gap: 1rem;
 margin-top: 1rem;
}

nav a {
 color: white;
 text-decoration: none;
 padding: 0.75rem 1.5rem;
 border-radius: 25px;
 transition: all 0.3s ease;
 background: rgba(255, 255, 255, 0.1);
 backdrop-filter: blur(10px);
 border: 1px solid rgba(255, 255, 255, 0.2);
}

nav a:hover,
nav a.active {
 background: rgba(255, 255, 255, 0.2);
 transform: translateY(-2px);
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.stats-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 2rem;
 margin-top: 2rem;
}

.stats-card {
 background: rgba(255, 255, 255, 0.95);
 border-radius: 20px;
 padding: 2rem;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 backdrop-filter: blur(10px);
 border: 1px solid rgba(255, 255, 255, 0.2);
 transition: transform 0.3s ease;
}

.stats-card:hover {
 transform: translateY(-5px);
}

.stats-card h2 {
 margin: 0 0 1.5rem 0;
 color: #333;
 font-size: 1.8rem;
 font-weight: 600;
 text-align: center;
 position: relative;
}

.stats-card h2::after {
 content: '';
 position: absolute;
 bottom: -8px;
 left: 50%;
 transform: translateX(-50%);
 width: 60px;
 height: 3px;
 background: linear-gradient(90deg, #667eea, #764ba2);
 border-radius: 2px;
}

.stats-list {
 display: flex;
 flex-direction: column;
 gap: 1rem;
}

.stats-item {
 background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 border-radius: 15px;
 padding: 1.5rem;
 display: grid;
 grid-template-columns: 60px 1fr auto;
 align-items: center;
 gap: 1.5rem;
 transition: all 0.3s ease;
 border: 1px solid rgba(0, 0, 0, 0.05);
}

.stats-item:hover {
 transform: translateX(5px);
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.rank {
 background: linear-gradient(135deg, #667eea, #764ba2);
 color: white;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.2rem;
 font-weight: bold;
 box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

.name {
 font-weight: 600;
 color: #333;
 font-size: 1.1rem;
}

.count {
 text-align: right;
 color: #666;
 font-size: 0.9rem;
 line-height: 1.4;
}

.count small {
 display: block;
 margin-top: 0.25rem;
 color: #888;
}

.synonyms {
 margin-top: 0.5rem;
 color: #666;
 font-size: 0.8rem;
 font-style: italic;
}

.artists-subsection {
 margin-top: 1.5rem;
 padding: 1.5rem;
 background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 border-radius: 15px;
 border-left: 5px solid #667eea;
 transition: all 0.3s ease;
}

.artists-subsection:hover {
 background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.artists-subsection h4 {
 margin: 0 0 1rem 0;
 color: #333;
 font-size: 1.1rem;
 font-weight: 600;
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.artists-subsection h4::before {
 content: '🎵';
 font-size: 1.2rem;
}

.artists-list {
 padding: 1rem;
 background: white;
 border-radius: 10px;
 font-size: 0.95rem;
 line-height: 1.6;
 color: #555;
 border: 1px solid rgba(0, 0, 0, 0.05);
 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
 grid-column: 1 / 4;
}

.footer {
 text-align: center;
 color: white;
 margin-top: 40px;
 opacity: 0.8;
}

.footer a {
    color: white;
}


@media (max-width: 1024px) {
 .stats-grid {
  grid-template-columns: 1fr;
  gap: 1.5rem;
 }

 .container {
  padding: 1rem;
 }

 header h1 {
  font-size: 2.5rem;
 }
}

@media (max-width: 768px) {
 .stats-item {
  grid-template-columns: 50px 1fr;
  gap: 1rem;
 }

 .count {
  grid-column: 1 / -1;
  text-align: left;
  margin-top: 0.5rem;
 }

 header h1 {
  font-size: 2rem;
 }

 .stats-card {
  padding: 1.5rem;
 }
}

@media (max-width: 480px) {
 .container {
  padding: 0.5rem;
 }

 header h1 {
  font-size: 1.8rem;
 }

 .stats-card {
  padding: 1rem;
 }

 .stats-item {
  padding: 1rem;
 }
}