:root {
  color-scheme: light dark;
  font-family: Arial, sans-serif;
  background: #f4f2ee;
  color: #202124;
}

body {
  margin: 0;
}

.topbar {
  align-items: center;
  background: #263238;
  color: #fff;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 22px clamp(16px, 4vw, 48px);
}

h1, h2, p {
  margin: 0;
}

.topbar p {
  color: #cfd8dc;
  margin-top: 4px;
}

main {
  margin: 0 auto;
  max-width: 1040px;
  padding: 24px 16px 48px;
}

.search, .edit-form, .header-actions, .profile-form {
  display: flex;
  gap: 10px;
}

.upload-panel form {
  display: grid;
  gap: 12px;
}

input, select {
  border: 1px solid #b0bec5;
  border-radius: 6px;
  font: inherit;
  min-height: 40px;
  padding: 0 12px;
}

button {
  background: #00695c;
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  min-height: 40px;
  padding: 0 16px;
}

.button-link {
  align-items: center;
  background: #455a64;
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  min-height: 40px;
  padding: 0 16px;
  text-decoration: none;
}

button.danger {
  background: #a32626;
  margin-top: 10px;
}

.panel {
  background: #fff;
  border: 1px solid #dde3e6;
  border-radius: 8px;
  margin-bottom: 18px;
  padding: 18px;
}

.upload-panel h2 {
  margin-bottom: 14px;
}

.drop-zone {
  align-items: center;
  border: 2px dashed #78909c;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 6px;
  min-height: 150px;
  padding: 22px;
  place-items: center;
  text-align: center;
  transition: background 120ms ease, border-color 120ms ease;
}

.drop-zone.is-dragging {
  background: #e1f3ef;
  border-color: #00695c;
}

.drop-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.drop-subtitle {
  color: #546e7a;
}

.upload-status {
  color: #546e7a;
  margin-top: 10px;
  min-height: 22px;
}

.upload-progress {
  accent-color: #00695c;
  height: 16px;
  margin-top: 12px;
  width: 100%;
}

.upload-status[data-tone="error"] {
  color: #a32626;
}

.upload-status[data-tone="success"] {
  color: #00695c;
}

.upload-results {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.upload-result {
  background: #eef4f6;
  border: 1px solid #cfd8dc;
  border-radius: 6px;
  padding: 8px 10px;
}

.upload-result[data-tone="success"] {
  background: #e7f4ef;
  border-color: #93cbb7;
  color: #155b43;
}

.upload-result[data-tone="warning"] {
  background: #fff5d9;
  border-color: #e5c46a;
  color: #6d5200;
}

.upload-result[data-tone="error"] {
  background: #fde7e7;
  border-color: #e5a3a3;
  color: #8a1f1f;
}

.library {
  display: grid;
  gap: 12px;
}

.track {
  background: #fff;
  border: 1px solid #dde3e6;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.track-main {
  display: grid;
  gap: 4px;
}

.track-main span {
  color: #546e7a;
}

audio {
  width: 100%;
}

.edit-form {
  flex-wrap: wrap;
  margin-top: 12px;
}

.empty {
  color: #546e7a;
  padding: 32px 8px;
  text-align: center;
}

.auth-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
}

.auth-panel {
  display: grid;
  gap: 14px;
  max-width: 420px;
  width: min(420px, calc(100vw - 32px));
}

.auth-panel form {
  display: grid;
  gap: 10px;
}

.error {
  background: #fde7e7;
  border: 1px solid #e5a3a3;
  border-radius: 6px;
  color: #8a1f1f;
  padding: 10px 12px;
}

.token-box {
  background: #e7f4ef;
  border: 1px solid #93cbb7;
  border-radius: 6px;
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding: 12px;
}

.token-box code {
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .topbar, .search, .header-actions, .profile-form {
    align-items: stretch;
    flex-direction: column;
  }

  .edit-form input {
    width: 100%;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    background: #111817;
    color: #eef5f3;
  }

  .panel, .track {
    background: #1a2423;
    border-color: #30413f;
  }

  input, select {
    background: #101615;
    border-color: #455a64;
    color: #eef5f3;
  }

  .error {
    background: #3a1b1b;
    border-color: #704040;
    color: #ffd6d6;
  }

  .token-box {
    background: #172b25;
    border-color: #356b58;
  }

  .track-main span, .empty {
    color: #a7b7b4;
  }

  .drop-zone.is-dragging {
    background: #17342d;
  }

  .upload-result {
    background: #172124;
    border-color: #405158;
  }

  .upload-result[data-tone="success"] {
    background: #172b25;
    border-color: #356b58;
    color: #bce7d8;
  }

  .upload-result[data-tone="warning"] {
    background: #332b14;
    border-color: #6b5c25;
    color: #ffe29c;
  }

  .upload-result[data-tone="error"] {
    background: #3a1b1b;
    border-color: #704040;
    color: #ffd6d6;
  }
}