:root {
  --bg: #111113;
  --surface: #1a1a1e;
  --surface2: #232328;
  --line: #2e2e35;
  --text: #ece8e1;
  --muted: #8c8880;
  --accent: #ff9f43;
  --accent-soft: rgba(255, 159, 67, .16);
  --good: #4ade80;
  --mid: #facc15;
  --r: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font: 15px/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
a { color: var(--muted); }
[hidden] { display: none !important; }
.muted { color: var(--muted); font-size: 13px; }
.center { text-align: center; }

.top { padding: 18px 24px 6px; max-width: 640px; width: 100%; margin: 0 auto; }
.brand { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.brand span { color: var(--accent); }

main { flex: 1; max-width: 640px; width: 100%; margin: 0 auto; padding: 8px 24px 32px; display: flex; flex-direction: column; gap: 18px; }
footer { padding: 16px; }

/* пошук */
.search { position: relative; }
#q {
  width: 100%; font: inherit; font-size: 17px; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; outline: none;
}
#q:focus { border-color: var(--accent); }
.results {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); max-height: 60vh; overflow: auto;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.results li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.results li:hover, .results li.sel { background: var(--surface2); }
.results img { width: 40px; height: 40px; border-radius: 6px; flex: none; background: var(--surface2); }
.results .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results .d { margin-left: auto; flex: none; }
.results .empty { color: var(--muted); cursor: default; }

.recent { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -8px; }
.recent button { border: 0; background: var(--surface); color: var(--muted); padding: 5px 11px; border-radius: 999px; font-size: 13px; }
.recent button:hover { color: var(--text); }

/* пісня */
.song { display: flex; align-items: center; gap: 14px; }
.song img { width: 64px; height: 64px; border-radius: 10px; background: var(--surface); }
.title { font-size: 18px; font-weight: 600; }

/* темп */
.tempo { display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--surface); border-radius: var(--r); padding: 18px; }
.status { min-height: 20px; }
.bpm-row { display: flex; align-items: center; gap: 18px; }
.bpm { display: flex; flex-direction: column; align-items: center; }
.bpm input {
  width: 4.6ch; font: 700 64px/1 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; letter-spacing: -.03em;
  text-align: center; color: var(--text); background: none; border: 0; outline: none; -moz-appearance: textfield;
}
.bpm input::-webkit-inner-spin-button, .bpm input::-webkit-outer-spin-button { -webkit-appearance: none; }
.bpm small { color: var(--muted); letter-spacing: .1em; font-size: 11px; }
.round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface2); font-size: 22px; }
.round:hover { border-color: var(--accent); }
.sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 0; }
.sources button { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 4px 11px; font-size: 13px; color: var(--muted); }
.sources button.on { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.sources .tag { font-size: 12px; color: var(--good); align-self: center; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 0; background: var(--surface2); padding: 7px 14px; border-radius: 999px; min-width: 44px; }
.chips button:hover { background: var(--line); }
.chips button.on { background: var(--accent); color: #1a1208; font-weight: 600; }
#tap.flash { background: var(--accent-soft); }

/* метроном */
.metro { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.dots { display: flex; gap: 10px; min-height: 22px; }
.dots i { width: 18px; height: 18px; border-radius: 50%; background: var(--surface2); cursor: pointer; transition: background .06s, transform .06s; }
.dots i.acc { box-shadow: inset 0 0 0 2px var(--line); }
.dots i.one { box-shadow: inset 0 0 0 2px var(--accent); }
.dots i.hit { background: var(--accent); transform: scale(1.25); }
.play {
  width: 88px; height: 88px; border-radius: 50%; border: 0; background: var(--accent); color: #1a1208;
  font-size: 34px; padding-left: 6px; box-shadow: 0 8px 28px rgba(255,159,67,.25);
}
.play.on { padding-left: 0; background: var(--text); }
.opts { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.group { display: flex; align-items: center; gap: 12px; }
.label { width: 80px; flex: none; color: var(--muted); font-size: 13px; }
#vol { flex: 1; accent-color: var(--accent); }
.check { border: 1px solid var(--line); background: none; padding: 10px 18px; border-radius: 999px; }
.check:not(:disabled):hover { border-color: var(--accent); }
.check.on { background: var(--accent-soft); border-color: var(--accent); }

@media (max-width: 480px) {
  .bpm input { font-size: 52px; }
  .label { width: 64px; }
}