:root {
  color-scheme: dark;
  --bg: #1a1410;
  --fg: #f3ece4;
  --muted: #b9a994;
  --line: #3a2f26;
  --accent: #e0a45a;
  --surface: #241c16;
  --transport-h: 7.25rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--fg);
  min-height: 100dvh;
  padding-bottom: calc(var(--transport-h) + env(safe-area-inset-bottom, 0px));
}

body.no-transport {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 1.5rem;
}

h1 {
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 1.35rem;
  margin: 0 0 0.75rem;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
  background: var(--surface);
  padding: 0.3rem;
  border-radius: 0.75rem;
}

.tab {
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 0.55rem;
  min-height: 2.75rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.tab[aria-selected="true"] {
  background: var(--accent);
  color: #1a1410;
}

label, .file-label {
  display: block;
  margin: 0.75rem 0;
}

input[type="password"], input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  font: inherit;
}

input[type="password"] {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.75rem 0.85rem;
  min-height: 2.85rem;
}

button {
  -webkit-appearance: none;
  appearance: none;
  background: var(--accent);
  color: #1a1410;
  border: 0;
  padding: 0.75rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 2.75rem;
  border-radius: 0.55rem;
}

.btn-secondary {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.admin-header h1 { margin: 0; }

#login-error, #login-offline, #sync-status, #upload-status, #install-status, #library-empty, .hint {
  color: var(--muted);
}

#upload-status { white-space: pre-wrap; }
#upload-btn { margin-top: 0.75rem; width: 100%; }
#login-form button[type="submit"] { width: 100%; margin-top: 0.5rem; }

.install-card {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0.85rem 1rem;
  margin: 0 0 1rem;
  border-radius: 0.65rem;
}

.install-compact {
  margin: 0 0 0.55rem;
  color: var(--muted);
  font-size: 0.95rem;
}

#install-app-main {
  display: block;
  width: 100%;
}

.filters {
  border: 1px solid var(--line);
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.85rem 0.85rem;
  border-radius: 0.65rem;
}

.filters legend {
  padding: 0 0.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.filters label {
  margin: 0.45rem 0;
  font-size: 1rem;
}

.mode {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
}

.mode-chip {
  flex: 1;
  margin: 0;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.65rem 0.5rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  cursor: pointer;
}

.mode-chip:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent);
}

.mode-chip input {
  margin: 0;
}

#queue {
  list-style: none;
  padding: 0;
  margin: 0;
}

#queue li {
  padding: 0.9rem 0.75rem;
  min-height: 3rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}

#queue li.active {
  background: #2a241c;
  color: var(--accent);
  font-weight: 600;
}

#queue li.missing, #queue li.unsupported {
  color: var(--muted);
}

#player {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.transport {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #120e0b;
  border-top: 1px solid var(--line);
  padding: 0.55rem 1rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
  z-index: 20;
}

.now-playing {
  max-width: 40rem;
  margin: 0 auto 0.35rem;
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.2em;
}

.progress-row {
  max-width: 40rem;
  margin: 0 auto 0.55rem;
  display: grid;
  grid-template-columns: 2.6rem 1fr 2.6rem;
  gap: 0.45rem;
  align-items: center;
}

.time {
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.75rem;
  background: transparent;
  cursor: pointer;
  margin: 0;
}

.seek::-webkit-slider-runnable-track {
  height: 0.35rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent) 0 var(--seek-pct, 0%),
    var(--line) var(--seek-pct, 0%) 100%
  );
}

.seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: -0.375rem;
  border-radius: 50%;
  background: var(--fg);
  border: 2px solid var(--accent);
}

.seek::-moz-range-track {
  height: 0.35rem;
  border-radius: 999px;
  background: var(--line);
}

.seek::-moz-range-progress {
  height: 0.35rem;
  border-radius: 999px;
  background: var(--accent);
}

.seek::-moz-range-thumb {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--fg);
  border: 2px solid var(--accent);
}

.transport-buttons {
  max-width: 40rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: 0.55rem;
}

.transport-btn {
  min-height: 3.5rem;
  font-size: 1.35rem;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
}

.transport-play {
  background: var(--accent);
  color: #1a1410;
  border: 0;
  font-size: 1.5rem;
}

.hint {
  margin-top: 1rem;
  font-size: 0.95rem;
}

.admin-box {
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  padding: 0.85rem 1rem 1rem;
  margin: 1rem 0;
}

.admin-box h2 {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
}

.admin-box select,
.admin-box input[type="text"],
.admin-box input[type="url"] {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.65rem 0.75rem;
  font: inherit;
  min-height: 2.75rem;
}

#admin-playlists,
#admin-tracks {
  list-style: none;
  padding: 0;
  margin: 0;
}

#admin-playlists li,
#admin-tracks li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

#admin-playlists .row-main,
#admin-tracks .row-main {
  flex: 1;
  min-width: 0;
}

.btn-danger {
  background: transparent;
  color: #e8a090;
  border: 1px solid #5a342c;
  min-height: 2.4rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.9rem;
}

#youtube-status, #youtube-import {
  margin-top: 0.65rem;
}
#youtube-import { width: 100%; }