:root {
  --bg: #0e0e0e;
  --panel: #1a1a1a;
  --panel-2: #232323;
  --text: #e6e6e6;
  --muted: #8a8a8a;
  --accent: #e67e22;
  --scale: #4a90c2;
  --line: #2a2a2a;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
a { color: inherit; text-decoration: none; }

.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 600; letter-spacing: 0.04em; }
.tabs { display: flex; gap: 1rem; margin-left: 1rem; }
.tabs a { color: var(--muted); padding: 0.25rem 0.5rem; border-radius: 4px; }
.tabs a.active { color: var(--text); background: var(--panel-2); }

.view { padding: 1rem; max-width: 1200px; margin: 0 auto; }
.loading { color: var(--muted); }
.error { color: #c0392b; }

.track-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.track-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 0.75rem; cursor: pointer;
}
.track-card:hover { border-color: var(--accent); }
.track-card .key { color: var(--accent); font-family: ui-monospace, monospace; }
.track-card .meta { color: var(--muted); font-size: 0.85rem; }

.scale-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; }
.scale-cell {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 0.5rem; text-align: center; font-family: ui-monospace, monospace; cursor: pointer;
}
.scale-cell:hover { border-color: var(--accent); }
.scale-cell .count { color: var(--muted); font-size: 0.8rem; }

@media (max-width: 640px) {
  .topbar { padding: 0.5rem 0.75rem; }
  .scale-grid { grid-template-columns: repeat(4, 1fr); }
  .track-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
}

.fb-wrap { background: var(--panel); padding: 14px 8px 8px; border-radius: 6px; }
.fb-label { color: var(--muted); font-size: 11px; font-family: ui-monospace, monospace; margin-bottom: 6px; text-align: center; }
.fb {
  display: grid; grid-template-columns: 28px repeat(var(--frets, 12), 1fr);
  grid-template-rows: repeat(6, 24px); background: #2a1c10; border: 2px solid #3a2818;
  border-radius: 3px; position: relative;
}
.fb .open { background: #1a1a1a; border-right: 3px solid #ddd; display:flex; align-items:center; justify-content:center; }
.fb .fret { border-right: 1px solid #5a4530; display: flex; align-items: center; justify-content: center; position: relative; }
.fb .fret::before { content: ''; position: absolute; left:0; right:0; top:50%; height:1px; background:#8a7556; opacity:0.5; }
.fb .note {
  width: 18px; height: 18px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  font-size: 9px; font-weight: 600; color: #fff; font-family: ui-monospace, monospace; z-index: 2;
}
.fb .note.scale { background: var(--scale); }
.fb .note.root { background: var(--accent); }
.fb .note.ghost { opacity: 0.25; }
.fb-focus-box {
  background: rgba(230,126,34,0.12); border: 1px solid rgba(230,126,34,0.5);
  pointer-events: none; z-index: 1;
}

.jam { display: grid; gap: 1rem; }
.jam-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.jam-head .back { color: var(--muted); }
.jam-title { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.jam-title .key { color: var(--accent); font-family: ui-monospace, monospace; }
.jam-title .meta { color: var(--muted); font-size: 0.85rem; }
.pin-btn { margin-left: auto; background: var(--panel); color: var(--text); border: 1px solid var(--line); padding: 0.4rem 0.75rem; border-radius: 4px; cursor: pointer; }
.pin-btn[data-pinned="true"] { border-color: var(--accent); color: var(--accent); }
.fb-controls { color: var(--muted); font-size: 0.85rem; }
.chord-ticker { display: flex; gap: 1rem; align-items: baseline; padding: 0.5rem 0; }
.chord-current { font-size: 2rem; font-family: ui-monospace, monospace; color: var(--accent); }
.chord-next { color: var(--muted); font-family: ui-monospace, monospace; }
.transport { display: flex; align-items: center; gap: 1rem; padding: 0.5rem; background: var(--panel); border-radius: 6px; }
.play-btn { background: var(--accent); border: 0; color: #000; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-size: 1rem; }
.transport .time { color: var(--muted); font-family: ui-monospace, monospace; }
.transport .seek { flex: 1; }
@media (max-width: 640px) {
  .chord-current { font-size: 1.5rem; }
  .pin-btn { margin-left: 0; }
}

.upload { max-width: 560px; }
.up-form { display: grid; gap: 0.75rem; }
.up-drop { display:block; border:1px dashed var(--line); border-radius:6px; padding:1.5rem; text-align:center; color:var(--muted); cursor:pointer; }
.up-drop:hover { border-color: var(--accent); }
.up-slug, .up-genre { background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:4px; padding:0.5rem; font-family:ui-monospace,monospace; }
.up-go { background:var(--accent); color:#000; border:0; border-radius:4px; padding:0.6rem; font-weight:600; cursor:pointer; }
.up-go:disabled { opacity:0.5; cursor:default; }
.up-status { margin-top:1rem; }
.up-bar { height:6px; background:#333; border-radius:3px; overflow:hidden; }
.up-bar-fill { height:100%; background:var(--accent); transition:width .3s; }

.mixer { display:flex; flex-direction:column; gap:5px; margin:0.5rem 0; }
.ch { display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:5px 8px; }
.ch-name { width:54px; font-size:0.66rem; color:#bbb; font-family:ui-monospace,monospace; text-transform:uppercase; }
.ch-mute { font-size:0.6rem; border:1px solid #444; background:transparent; color:#888; border-radius:3px; padding:2px 8px; cursor:pointer; }
.ch-mute.on { background:#c0392b; color:#fff; border-color:#c0392b; }
.ch-vol { flex:1; }
.ch.guitar { border-color: var(--accent); }
.ch.guitar .ch-name { color: var(--accent); }
.ch.muted { opacity:0.6; }
.ch-dl { color: var(--muted); text-decoration: none; font-size: 0.95rem; padding: 0 4px; border-radius: 3px; }
.ch-dl:hover { color: var(--accent); }
.ch-solo { font-size: 0.6rem; border: 1px solid #444; background: transparent; color: #888; border-radius: 3px; padding: 2px 8px; cursor: pointer; }
.ch-solo.on { background: #e6c84a; color: #000; border-color: #e6c84a; }