:root {
  color-scheme: light dark;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #101418;
  color: #edf2f6;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
a { color: #87c8ff; }
button, input, textarea, select { font: inherit; }
button {
  border: 0;
  border-radius: .4rem;
  padding: .65rem 1rem;
  background: #287ac0;
  color: white;
  cursor: pointer;
}
button:hover { filter: brightness(1.13); }
button.secondary { background: #35414c; }
button.danger { background: #a43c3c; }
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .8rem max(1rem, calc((100% - 1100px) / 2));
  background: #19212a;
  border-bottom: 1px solid #35414c;
}
.brand { font-size: 1.15rem; font-weight: 700; text-decoration: none; }
nav, nav form { display: flex; gap: 1rem; align-items: center; }
.link-button { padding: 0; background: transparent; text-decoration: underline; }
.container { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }
footer { color: #a9b6c2; text-align: center; padding: 2rem 1rem; }
.panel, .track-card {
  border: 1px solid #35414c;
  background: #19212a;
  border-radius: .7rem;
  padding: 1rem 1.2rem;
  margin: 1rem 0;
}
.narrow { max-width: 520px; margin: 3rem auto; }
.stack { display: grid; gap: 1rem; }
label { display: grid; gap: .35rem; font-weight: 600; }
input, textarea, select {
  width: 100%;
  min-width: 0;
  padding: .6rem .7rem;
  border: 1px solid #576675;
  border-radius: .35rem;
  background: #0f151b;
  color: inherit;
}
input[type="checkbox"], input[type="file"] { width: auto; }
.filters, .toolbar, .track-heading, .account-row, .actions, .form-grid {
  display: flex;
  gap: 1rem;
  align-items: end;
  flex-wrap: wrap;
}
.filters { margin: 1.2rem 0; }
.filters > label:first-child { flex: 1 1 280px; }
.checkbox { display: flex; align-items: center; }
.toolbar { align-items: center; padding: .8rem 0; }
.toolbar span, .muted { color: #afbac4; }
.track-heading { justify-content: space-between; align-items: start; }
.track-heading h2 { margin: 0; }
.track-heading p { margin: .2rem 0 .7rem; overflow-wrap: anywhere; }
.track-summary-actions { display: flex; align-items: center; gap: .8rem; }
.track-summary-actions .own-score { margin: 0; white-space: nowrap; }
audio { display: block; width: 100%; margin: .8rem 0; }
.metadata {
  display: grid;
  grid-template-columns: minmax(6rem, .25fr) 1fr;
  gap: .3rem .8rem;
}
.metadata dt { font-weight: 700; }
.metadata dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.metadata .lyrics { max-height: 14rem; overflow: auto; }
.compact { max-width: 720px; }
details { margin: .8rem 0; }
summary { cursor: pointer; }
.track-details { border-top: 1px solid #35414c; margin-top: .8rem; padding-top: .3rem; }
.rating-form { margin: 1rem 0; }
.rating-form h3 { margin: 0; }
.seed-list ul { list-style: none; padding: 0; }
.seed-list li { overflow-wrap: anywhere; }
.part-ratings, .shared-results { border-top: 1px solid #35414c; margin-top: 1rem; padding-top: .3rem; }
.part-ratings h3, .shared-results h3 { margin-bottom: .4rem; }
.part-entry, .new-part { border-bottom: 1px solid #35414c; padding: .6rem 0; }
.part-entry summary, .new-part summary { font-weight: 700; }
.part-entry > form:last-child { margin-top: .5rem; }
.timestamp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.timestamp-fields label { align-content: start; }
.timestamp-fields button { margin-top: .25rem; }
.results-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.results { border-top: 1px solid #35414c; margin-top: 1rem; padding-top: .3rem; }
.aggregate { margin-bottom: .5rem; }
.rating-list { list-style: none; padding: 0; margin: 0; max-width: 500px; }
.rating-list li { border-bottom: 1px solid #35414c; padding: .5rem 0; }
.rating-note { margin: .2rem 0 0; color: #afbac4; white-space: pre-wrap; overflow-wrap: anywhere; }
.notice { border-radius: .4rem; margin: .8rem 0; padding: .8rem 1rem; background: #243647; }
.notice-error { background: #512a2a; }
.notice-warning { background: #51452a; }
.notice-success { background: #244434; }
.secret { display: block; overflow-wrap: anywhere; padding: .8rem; margin: .5rem 0; background: #0e1318; }
.break-all { overflow-wrap: anywhere; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.stats > div { display: grid; gap: .2rem; background: #19212a; padding: 1rem; border-radius: .6rem; }
.stats strong { font-size: 1.6rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; }
.account-row { justify-content: space-between; align-items: center; border-top: 1px solid #35414c; padding: .9rem 0; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.title-row > div { min-width: 12rem; overflow-wrap: anywhere; }
.title-form { display: flex; align-items: end; gap: .7rem; flex: 1 1 24rem; }
.actions { align-items: center; }
.actions form { margin: 0; }
.empty { padding: 2rem 0; color: #afbac4; }
[hidden] { display: none !important; }
@media (max-width: 650px) {
  .site-header { align-items: start; flex-direction: column; }
  nav { flex-wrap: wrap; }
  .track-heading { align-items: start; flex-direction: column; }
  .track-summary-actions { width: 100%; justify-content: space-between; }
  .timestamp-fields { grid-template-columns: 1fr; }
}