/* style.css — Mosaichord Chord Explorer */
  border-collapse: collapse;
  font-size: 0.8rem;
}

.rankings-table thead th {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-weight: 500;
}

.rankings-table tbody tr {
  border-bottom: 1px solid rgba(51, 51, 51, 0.5);
  transition: background 0.1s;
}

.rankings-table tbody tr:hover {
  background: var(--surface2);
}

.ranking-row td {
  padding: 0.4rem 0.5rem;
}

.ranking-row.favourite-row {
  background: rgba(255, 107, 53, 0.05);
}

.ratio-cell {
  font-weight: 500;
}

.preset-tag {
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 600;
}

.preset-tag.tier-1 { background: rgba(255,215,0,0.2); color: var(--tier1); }
.preset-tag.tier-2 { background: rgba(192,192,192,0.15); color: var(--tier2); }
.preset-tag.tier-3 { background: rgba(205,127,50,0.15); color: var(--tier3); }
.preset-tag.tier-4 { background: rgba(102,102,102,0.15); color: var(--tier4); }

.load-btn {
  padding: 0.2rem 0.5rem;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.75rem;
}

.load-btn:hover {
  background: rgba(74, 158, 255, 0.15);
}

/* Footer */
footer {
  text-align: center;
  padding: 1.5rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}

footer a {
  color: var(--accent);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--surface);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}