:root {
  --bg: #0a0b0a;
  --panel: #0d0f0d;
  --panel-border: #1b1f1b;
  --surface: #0f110f;
  --surface-border: #1e221e;
  --surface-active: #1a1f19;
  --mid: #4c5349;
  --text: #e6e8e4;
  --text-dim: #8b918a;
  --green: #6fe38f;
  --green-soft: #9cf0b4;
  --amber: #e8c15b;
  --red: #e2635b;
  --scale-line: #2a2f28;
  --scale-line-dim: #1e221e;
  --scale-line-mid: #3f453d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  height: 100%;
}

body {
  color: var(--text);
  font-family: Archivo, Helvetica, sans-serif;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

button {
  font-family: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  outline: none;
}
button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

a { color: var(--green); }
a:hover { color: var(--green-soft); }

.app {
  width: 100%;
  max-width: 460px;
  padding: max(14px, env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 2px solid transparent;
  border-radius: 2px;
  transition: border-color 90ms linear;
  z-index: 5;
}
.flash.on { border-color: var(--green); }

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.brand-name {
  font: 600 12.5px/1 Archivo, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.header-note {
  font: 500 11px/1 'JetBrains Mono', monospace;
  letter-spacing: .14em;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Tabs */
.tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 4px;
  height: 56px;
}
.tab-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: var(--surface-active);
  border-radius: 11px;
  transition: transform 260ms cubic-bezier(.32,.72,0,1);
}
.tabs.on-tuner .tab-indicator { transform: translateX(100%); }
.tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 14px/1 Archivo, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color 200ms;
  color: var(--text-dim);
}
.tab[aria-selected="true"] { color: var(--green); }

.view { display: flex; flex-direction: column; gap: 12px; }
.view.hidden { display: none; }

/* Beat row */
.beat-row { display: flex; gap: 7px; height: 40px; align-items: stretch; }
.beat-cell {
  flex: 1;
  border-radius: 6px;
  background: var(--surface-border);
  transform: scaleY(.3);
  transform-origin: center;
  transition: transform 110ms cubic-bezier(.2,.9,.3,1), background 110ms linear, opacity 110ms;
}
.beat-cell.downbeat { background: var(--green); transform: scaleY(.44); opacity: .85; }
.beat-cell.mid { background: var(--mid); }
.beat-cell.hit { transform: scaleY(1); opacity: 1; }
.beat-cell.hit.downbeat { background: var(--green); }
.beat-cell.hit:not(.downbeat) { background: var(--text); }

/* BPM block */
.bpm-block { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bpm-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
.round-btn {
  width: 72px; height: 72px; flex: none;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  font: 400 30px/1 Archivo, sans-serif;
  color: #c3c8c0;
  display: flex; align-items: center; justify-content: center;
  transition: background 90ms;
}
.round-btn:active { background: var(--surface-active); }
.round-btn.small { width: 54px; height: 54px; font-size: 24px; border-radius: 14px; }

.bpm-display { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.bpm-number {
  font: 600 84px/.9 'JetBrains Mono', monospace;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  transition: color 70ms linear;
  color: var(--text);
  width: 3.3ch;
  text-align: center;
  border: 0;
  background: transparent;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.bpm-number.on-beat { color: var(--green); }
.bpm-number:focus, .ref-value:focus { outline: none; }
.bpm-number:focus-visible, .ref-value:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
  border-radius: 4px;
}
.bpm-unit { font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .3em; color: var(--text-dim); }
.tempo-name {
  font: 500 12px/1 Archivo, sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim); margin-top: 8px;
}

/* Signature row */
.sig-row { display: flex; gap: 8px; }
.sig-btn {
  flex: 1; height: 58px; border-radius: 14px;
  font: 600 17px/1 'JetBrains Mono', monospace;
  background: var(--surface); color: var(--text-dim);
  border: 1px solid var(--surface-border);
}
.sig-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Transport */
.transport { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.play-btn {
  width: 100%; height: 84px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font: 700 17px/1 Archivo, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  transition: background 160ms, color 160ms;
  background: var(--green); color: var(--bg); border: 1px solid var(--green);
}
.play-btn.playing { background: var(--surface-active); color: var(--text); border-color: #2a2f28; }

.tap-btn {
  width: 152px; height: 152px; flex: none;
  border-radius: 50%; padding: 6px;
  background: var(--bg); border: 1px dashed #2a3a2c;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 140ms;
}
.tap-btn:active { border-color: var(--green); }
.tap-inner {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--surface-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  transition: border-color 160ms, background 160ms;
}
.tap-btn:active .tap-inner { background: var(--surface-active); border-color: var(--green); }
.tap-label { font: 700 26px/1 Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.tap-hint { font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: .16em; color: var(--text-dim); }

/* Panels */
.panel {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 16px; padding: 14px 16px;
}
.panel-row { display: flex; align-items: baseline; justify-content: space-between; }
.panel-label { font: 500 11px/1 Archivo, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.panel-value { font: 500 11px/1 'JetBrains Mono', monospace; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.slider { height: 34px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.slider-track { position: relative; width: 100%; height: 6px; border-radius: 3px; background: var(--surface-border); }
.slider-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--text); }
.slider-fill.accent { background: var(--green); }
.slider-knob {
  position: absolute; top: 50%; width: 26px; height: 26px; margin-left: -13px; margin-top: -13px;
  border-radius: 50%; background: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.slider-knob.accent { background: var(--green); }

.sound-panel { gap: 10px; }
.sound-row { display: flex; gap: 8px; }
.sound-btn {
  flex: 1; height: 44px; border-radius: 12px;
  font: 600 12px/1 Archivo, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  background: var(--surface); color: var(--text-dim); border: 1px solid var(--surface-border);
}
.sound-btn.active { background: var(--surface-active); color: var(--green); border-color: var(--green); }
.switch-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; cursor: pointer; }
.switch { width: 42px; height: 24px; border-radius: 12px; background: var(--surface); border: 1px solid var(--surface-border); position: relative; transition: background 140ms, border-color 140ms; }
.switch.on { background: rgba(111,227,143,.18); border-color: var(--green); }
.switch-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-dim); transition: transform 160ms, background 160ms; }
.switch.on .switch-knob { transform: translateX(18px); background: var(--green); }

/* Tuner */
.note-block { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 0 6px; }
.note-name {
  font: 600 108px/.86 Archivo, sans-serif; letter-spacing: -.04em;
  display: flex; align-items: flex-start; transition: color 120ms linear;
  color: #242a23;
}
.note-name.active { color: var(--text); }
.note-name.in-tune { color: var(--green); }
.note-octave { font: 500 34px/1 'JetBrains Mono', monospace; letter-spacing: -.02em; padding-top: 14px; opacity: .5; }
.hz-label { font: 500 14px/1 'JetBrains Mono', monospace; letter-spacing: .12em; color: var(--text-dim); margin-top: 6px; font-variant-numeric: tabular-nums; }

.meter-frame {
  border-radius: 22px; padding: 6px; background: var(--bg);
  border: 1px dashed #2a3a2c; transition: border-color 200ms linear;
}
.meter-frame.in-tune { border-color: var(--green); }
.meter {
  display: flex; flex-direction: column; gap: 12px;
  border-radius: 16px; padding: 20px 18px 16px;
  background: var(--panel); border: 2px solid var(--panel-border);
  transition: background 160ms linear, border-color 160ms linear;
}
.meter.in-tune { background: rgba(111,227,143,.16); border-color: var(--green); }
.meter-scale { position: relative; height: 44px; display: flex; justify-content: space-between; align-items: flex-start; }
.tick { width: 1px; background: var(--scale-line); }
.tick.sm { height: 16px; background: var(--scale-line); }
.tick.xs { height: 10px; background: var(--scale-line-dim); }
.tick.lg { height: 28px; background: var(--scale-line-mid); }
.meter-bar { position: relative; height: 3px; border-radius: 2px; background: var(--panel-border); margin-top: -14px; }
.meter-band {
  position: absolute; top: 44px; height: 3px; border-radius: 2px;
  transition: left 90ms linear, width 90ms linear, background 140ms linear, opacity 200ms;
  left: 50%; width: 0; opacity: 0;
}
.meter-needle {
  position: absolute; top: -2px; width: 4px; height: 56px; border-radius: 2px; margin-left: -2px;
  transition: left 90ms linear, background 140ms linear, box-shadow 200ms, opacity 200ms;
  left: 50%; opacity: .25; background: var(--text-dim);
}
.meter { position: relative; }
.meter-labels {
  position: relative; display: flex; justify-content: space-between;
  font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: .1em; color: var(--text-dim);
}
.meter-status { display: flex; align-items: center; justify-content: center; gap: 10px; height: 26px; }
.status-text { font: 600 12px/1 Archivo, sans-serif; letter-spacing: .22em; text-transform: uppercase; transition: color 140ms; color: var(--text-dim); }
.cents-label { font: 500 12px/1 'JetBrains Mono', monospace; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.mic-card {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 44px 14px 34px; background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 18px; text-align: center;
}
.mic-card.hidden { display: none; }
.mic-icon { width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--scale-line); display: flex; align-items: center; justify-content: center; background: var(--surface); }
.mic-icon span { width: 16px; height: 28px; border-radius: 8px; border: 2px solid var(--green); }
.mic-copy { display: flex; flex-direction: column; gap: 8px; max-width: 280px; }
.mic-title { font: 600 20px/1.25 Archivo, sans-serif; color: var(--text); }
.mic-body { font: 400 14px/1.5 Archivo, sans-serif; color: var(--text-dim); }
.mic-cta {
  height: 62px; padding: 0 34px; border-radius: 16px;
  background: var(--green); color: var(--bg);
  font: 700 15px/1 Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
.mic-cta:active { background: var(--green-soft); }
.mic-cta:disabled { opacity: .6; pointer-events: none; }

.ref-panel { gap: 10px; }
.ref-labels { display: flex; flex-direction: column; gap: 5px; }
.ref-controls { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.ref-value {
  width: 92px; text-align: center;
  font: 600 24px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--text);
  border: 0;
  background: transparent;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}