:root {
  --bg: #11131a;
  --panel: #191d27;
  --panel-2: #202633;
  --text: #f4f6fb;
  --muted: #99a3b3;
  --line: #303847;
  --accent: #7c6cff;
  --accent-2: #22d3a6;
  --danger: #ff5b6f;
  --shadow: 0 14px 38px rgba(0,0,0,.28);
  --radius: 18px;
  --soft: #151924;
}

body[data-theme="light"] {
  --bg: #f4f5f8;
  --panel: #ffffff;
  --panel-2: #edf0f5;
  --text: #1d2430;
  --muted: #687385;
  --line: #d8dde7;
  --accent: #6b5cff;
  --accent-2: #00a884;
  --danger: #e34f63;
  --shadow: 0 14px 30px rgba(31, 41, 55, .10);
  --soft: #f8f9fb;
}

body[data-theme="midnight"] {
  --bg: #070b14;
  --panel: #101827;
  --panel-2: #111f32;
  --text: #f3f9ff;
  --muted: #82a0bd;
  --line: #223a52;
  --accent: #8d68ff;
  --accent-2: #00e0d0;
  --danger: #ff4f87;
  --shadow: 0 16px 45px rgba(0, 8, 20, .48);
  --soft: #0b1320;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% -10%, rgba(124,108,255,.18), transparent 25%),
    radial-gradient(circle at 90% 0%, rgba(34,211,166,.08), transparent 22%),
    var(--bg);
  color: var(--text);
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-header {
  height: 74px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white; font-size: 24px; font-weight: 800;
  box-shadow: var(--shadow);
}
.brand h1 { font-size: 17px; margin: 0; }
.brand span { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); letter-spacing: .04em; }

.header-actions, .transport-left, .transport-center, .transport-right {
  display: flex; align-items: center; gap: 10px;
}

.profile-btn, .ghost-btn, .icon-btn, .primary-small, .add-track-btn {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 12px;
  min-height: 38px;
  padding: 0 14px;
}
.icon-btn { min-width: 38px; padding: 0; display: grid; place-items: center; }
.ghost-btn:hover, .icon-btn:hover { border-color: var(--accent); }

main { max-width: 1500px; margin: 0 auto; padding: 28px; }
.view { display: none; }
.view.active { display: block; }

.hero-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: end;
  padding: 26px 0 34px;
}

.eyebrow { color: var(--accent-2); font-size: 11px; font-weight: 800; letter-spacing: .18em; margin: 0 0 8px; }
.hero-row h2 { font-size: clamp(34px, 4vw, 58px); line-height: 1.02; margin: 0; max-width: 760px; }
.subtext { color: var(--muted); font-size: 17px; max-width: 700px; }

.hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.primary-action, .ai-action {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: white;
  padding: 22px;
  display: flex;
  gap: 14px;
  align-items: center;
  text-align: left;
  min-height: 112px;
  box-shadow: var(--shadow);
}
.primary-action { background: linear-gradient(135deg, #6456ff, #8e6cff); }
.ai-action { background: linear-gradient(135deg, #13a884, #20c7a7); }
.big-icon { font-size: 32px; line-height: 1; }
.primary-action strong, .ai-action strong { display: block; font-size: 17px; }
.primary-action small, .ai-action small { display: block; opacity: .82; margin-top: 5px; }

.song-section { margin-top: 8px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; }
.section-heading h3 { font-size: 24px; margin: 0; }
.section-heading p { margin: 5px 0 0; color: var(--muted); }

.category-tabs { display: flex; gap: 8px; margin: 22px 0; }
.category-tab {
  border: 1px solid var(--line); color: var(--muted); background: transparent;
  border-radius: 999px; padding: 9px 14px;
}
.category-tab.active { background: var(--panel-2); color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.song-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.song-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, transparent), var(--soft));
  border-radius: 18px;
  padding: 18px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow);
}
.song-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.song-card-icon {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  font-size: 25px; background: var(--card-color); color: white;
}
.song-card h4 { margin: 14px 0 3px; font-size: 17px; }
.song-card .date { color: var(--muted); font-size: 13px; }
.song-card .tag { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }

.editor-shell {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 20px;
  overflow: hidden;
  min-height: calc(100vh - 130px);
  box-shadow: var(--shadow);
}

.transport-bar {
  min-height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.transport-right { justify-content: flex-end; }

.song-title-wrap { display: flex; flex-direction: column; }
.song-title-wrap input {
  border: 0; background: transparent; color: var(--text); font-weight: 750; width: 200px; outline: none;
}
.save-state { color: var(--muted); font-size: 10px; margin-top: 2px; }

.record-btn, .play-btn {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); color: white;
}
.record-btn { background: color-mix(in srgb, var(--danger) 85%, #000); font-size: 18px; }
.record-btn.active { box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 20%, transparent); }
.play-btn { background: var(--accent); }

.tempo-control {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 12px; padding: 0 9px; height: 40px;
}
.tempo-control label { font-size: 10px; color: var(--muted); font-weight: 800; }
.tempo-control input {
  width: 52px; background: transparent; border: 0; color: var(--text); outline: none; font-weight: 700;
}

.editor-main {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 470px;
}

.track-sidebar {
  background: var(--soft);
  border-right: 1px solid var(--line);
}
.sidebar-head {
  padding: 14px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.sidebar-head h3 { margin: 0; font-size: 15px; }
.sidebar-head span { color: var(--muted); font-size: 11px; }
.add-track-btn { font-size: 22px; width: 40px; padding: 0; }

.track-list { padding-bottom: 12px; }
.track-item {
  border-bottom: 1px solid var(--line);
  padding: 12px 12px 13px;
  position: relative;
  cursor: pointer;
  background: transparent;
}
.track-item.selected { background: color-mix(in srgb, var(--track-color) 12%, var(--panel-2)); }
.track-item.selected::before {
  content:""; position: absolute; left:0; top:0; bottom:0; width:4px; background: var(--track-color);
}
.track-top { display: flex; align-items: center; gap: 9px; }
.track-color {
  width: 13px; height: 13px; border-radius: 4px; background: var(--track-color); border: 1px solid rgba(255,255,255,.22);
}
.track-name { flex: 1; font-weight: 700; font-size: 13px; }
.track-tools { display: flex; gap: 4px; }
.track-tools button {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; color: var(--muted); background: transparent;
}
.track-tools button:hover { color: var(--text); background: var(--panel-2); }
.track-controls {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 10px; align-items: center;
}
.volume-wrap { display: flex; align-items: center; gap: 8px; }
.volume-wrap input { width: 100%; accent-color: var(--track-color); }

.pan-knob-wrap { text-align: center; }
.pan-knob {
  --pan-angle: 0deg;
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at center, var(--panel-2) 0 51%, transparent 52%),
    conic-gradient(from 205deg, var(--track-color) 0 130deg, var(--line) 130deg 260deg, transparent 260deg);
  position: relative;
}
.pan-knob::after {
  content:""; position:absolute; width:2px; height:11px; border-radius:2px;
  background: var(--text); left:50%; top:5px; transform-origin: 50% 14px;
  transform: translateX(-50%) rotate(var(--pan-angle));
}
.pan-knob-wrap small { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }

.arrangement-panel { min-width: 0; overflow: hidden; background: var(--panel); }
.timeline-ruler {
  height: 34px;
  display: grid; grid-template-columns: repeat(16, minmax(56px, 1fr));
  border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px;
}
.timeline-ruler span { padding: 10px 0 0 8px; border-right: 1px solid var(--line); }

.arrangement-area {
  min-height: 436px;
  position: relative;
  overflow: auto;
  background-image:
    linear-gradient(to right, transparent calc(100% - 1px), var(--line) calc(100% - 1px)),
    linear-gradient(to bottom, transparent calc(100% - 1px), var(--line) calc(100% - 1px));
  background-size: 72px 100%, 100% 94px;
}
.empty-state {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center; text-align: center;
  padding: 20px;
}
.empty-icon { font-size: 50px; color: var(--accent); }
.empty-state h3 { margin: 12px 0 2px; }
.empty-state p { margin: 0 0 16px; color: var(--muted); }

.arrangement-track {
  height: 94px; border-bottom: 1px solid var(--line); position: relative;
}
.arrangement-track.selected { background: color-mix(in srgb, var(--track-color) 4%, transparent); }
.clip {
  position: absolute; top: 18px; height: 56px; border-radius: 8px;
  background: color-mix(in srgb, var(--track-color) 70%, #000);
  border: 1px solid color-mix(in srgb, var(--track-color) 90%, white);
  opacity: .92; overflow: hidden;
}
.clip.notes::before {
  content:"";
  position:absolute; inset:7px;
  background:
    linear-gradient(var(--text),var(--text)) 5% 20%/16% 2px no-repeat,
    linear-gradient(var(--text),var(--text)) 30% 55%/12% 2px no-repeat,
    linear-gradient(var(--text),var(--text)) 54% 34%/20% 2px no-repeat,
    linear-gradient(var(--text),var(--text)) 80% 68%/10% 2px no-repeat;
  opacity:.65;
}
.clip.wave::before {
  content:""; position:absolute; left:8px; right:8px; top:50%; height:26px; transform:translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 2px, transparent 2px 6px);
  clip-path: polygon(0 50%,4% 20%,8% 70%,12% 30%,16% 80%,20% 15%,24% 65%,28% 35%,32% 75%,36% 25%,40% 60%,44% 40%,48% 85%,52% 18%,56% 70%,60% 30%,64% 78%,68% 22%,72% 58%,76% 42%,80% 72%,84% 34%,88% 66%,92% 25%,96% 54%,100% 50%,100% 50%,0 50%);
}

.instrument-dock {
  border-top: 1px solid var(--line);
  background: var(--soft);
  min-height: 260px;
}
.instrument-dock.collapsed { min-height: 52px; }
.instrument-dock.collapsed .instrument-panel { display: none; }
.instrument-dock.collapsed .instrument-dock-head { border-bottom: 0; }

.instrument-dock-head {
  min-height: 52px; display:flex; align-items:center; justify-content:space-between;
  padding: 8px 14px; border-bottom:1px solid var(--line);
}
.dock-kicker { display:block; color:var(--muted); font-size:9px; letter-spacing:.16em; margin-bottom:2px; }
.instrument-panel { min-height: 205px; padding: 18px; }
.instrument-placeholder { color: var(--muted); display:grid; place-items:center; min-height:170px; }

.piano-ui { overflow-x:auto; padding-bottom: 8px; }
.piano-toolbar, .guitar-toolbar {
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.range-badge { border:1px solid var(--line); border-radius:10px; padding:8px 12px; color:var(--muted); }
.piano-keys {
  height: 155px; min-width: 850px; display:flex; position:relative; user-select:none;
}
.white-key {
  flex:1; border:1px solid #a7adba; background:#f8f8fa; border-radius:0 0 7px 7px;
  position:relative; color:#2b3140; display:flex; align-items:flex-end; justify-content:center; padding-bottom:7px;
}
.white-key.active { background:#d7d4ff; }
.white-key small { font-weight:800; opacity:.7; }
.black-key {
  position:absolute; width:3.2%; height:98px; background:#252934; border:1px solid #05070b;
  border-radius:0 0 5px 5px; z-index:2; color:white; display:flex; align-items:flex-end; justify-content:center; padding-bottom:5px;
}
.black-key.active { background:#6658d9; }

.drum-grid {
  min-height:170px; display:grid; grid-template-columns:repeat(4,minmax(110px,1fr)); gap:14px; align-items:center;
}
.drum-pad {
  height:92px; border-radius:22px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--text); font-weight:800; box-shadow: inset 0 -8px 18px rgba(0,0,0,.12);
}
.drum-pad.active { transform:translateY(2px) scale(.98); background:color-mix(in srgb, var(--accent) 45%, var(--panel-2)); }

.guitar-ui { display:grid; grid-template-columns:1fr 220px; gap:20px; }
.fretboard { background:#392b24; border-radius:12px; padding:10px; overflow:auto; min-height:155px; }
.guitar-string {
  height:24px; position:relative; display:grid; grid-template-columns:repeat(13, minmax(38px,1fr));
}
.fret {
  border-left:1px solid rgba(255,255,255,.3); position:relative;
}
.fret::after {
  content:""; position:absolute; left:0; right:0; top:50%; height:2px; transform:translateY(-50%);
  background:#d8c7a3;
}
.fret.hit::before {
  content:""; position:absolute; width:14px; height:14px; border-radius:50%; background:var(--accent-2); z-index:2;
  left:50%; top:50%; transform:translate(-50%,-50%);
}
.chord-wheel {
  width:190px; height:190px; border-radius:50%; border:1px solid var(--line); margin:auto; position:relative;
  background:conic-gradient(from -22.5deg,
    #6e61ff 0 45deg,#2ea88a 45deg 90deg,#d96b72 90deg 135deg,#d3a642 135deg 180deg,
    #a165d6 180deg 225deg,#3c8fc8 225deg 270deg,#dc7e4b 270deg 315deg,#708b56 315deg 360deg);
}
.chord-wheel button {
  position:absolute; width:44px; height:44px; border-radius:50%; border:0; background:rgba(10,12,18,.72); color:white; font-weight:800;
}
.chord-wheel button:nth-child(1){left:73px;top:6px}
.chord-wheel button:nth-child(2){right:18px;top:34px}
.chord-wheel button:nth-child(3){right:8px;bottom:42px}
.chord-wheel button:nth-child(4){left:73px;bottom:6px}
.chord-wheel button:nth-child(5){left:18px;bottom:42px}
.chord-wheel button:nth-child(6){left:8px;top:34px}

.modal-backdrop {
  position:fixed; inset:0; background:rgba(2,5,10,.68); display:grid; place-items:center; z-index:100; padding:24px;
  backdrop-filter: blur(8px);
}
.hidden { display:none; }
.modal {
  width:min(680px, 100%); border:1px solid var(--line); background:var(--panel); border-radius:22px; box-shadow:var(--shadow); padding:20px;
}
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.modal h3 { margin:0; font-size:23px; }
.instrument-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.instrument-picker button {
  min-height:110px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); border-radius:16px; font-size:30px;
}
.instrument-picker button span { display:block; font-size:12px; font-weight:800; margin-top:8px; }

.ai-options { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.ai-options button {
  min-height:115px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); border-radius:15px; padding:12px; text-align:left;
}
.ai-options button.selected { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.ai-options button span { font-size:23px; display:block; margin-bottom:8px; }
.ai-options strong { display:block; }
.ai-options small { color:var(--muted); display:block; margin-top:5px; }

.prompt-label { display:block; margin:18px 0 7px; font-size:12px; font-weight:800; }
textarea {
  width:100%; min-height:120px; resize:vertical; border:1px solid var(--line); background:var(--soft);
  color:var(--text); border-radius:14px; padding:12px; outline:none;
}
.modal-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; color:var(--muted); font-size:12px; }
.primary-small { background:var(--accent); color:white; border-color:transparent; font-weight:800; }

.setting-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.setting-row p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.setting-row select {
  border:1px solid var(--line); background:var(--panel-2); color:var(--text); border-radius:12px; padding:10px 12px;
}

@media (max-width: 980px) {
  main { padding: 18px; }
  .hero-row { grid-template-columns: 1fr; }
  .song-grid { grid-template-columns: repeat(2,1fr); }
  .transport-bar { grid-template-columns: 1fr; }
  .transport-left, .transport-center, .transport-right { justify-content:center; flex-wrap:wrap; }
  .editor-main { grid-template-columns: 240px 1fr; }
  .guitar-ui { grid-template-columns:1fr; }
}

@media (max-width: 720px) {
  .song-grid, .hero-actions { grid-template-columns:1fr; }
  .editor-main { grid-template-columns:1fr; }
  .track-sidebar { border-right:0; border-bottom:1px solid var(--line); }
  .instrument-picker, .ai-options { grid-template-columns:repeat(2,1fr); }
}


/* v0.2 keyboard + chord controls */
.keyboard-help {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:8px 0 14px;
}
.keyboard-chip {
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--muted);
  border-radius:9px;
  padding:5px 8px;
  font-size:10px;
  font-weight:700;
}
.keyboard-chip strong { color:var(--text); }

.guitar-ui.no-chords {
  grid-template-columns:1fr;
}

.chord-panel {
  border:1px solid var(--line);
  background:var(--panel-2);
  border-radius:16px;
  padding:14px;
  min-width:220px;
}
.chord-panel h4 {
  margin:0 0 10px;
  font-size:13px;
}
.chord-controls {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:10px;
}
.chord-controls select {
  width:100%;
  border:1px solid var(--line);
  background:var(--soft);
  color:var(--text);
  border-radius:10px;
  padding:8px;
}
.chord-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  max-height:160px;
  overflow:auto;
}
.chord-grid button {
  border:1px solid var(--line);
  background:var(--soft);
  color:var(--text);
  border-radius:9px;
  padding:7px 5px;
  font-size:10px;
}
.chord-grid button.active {
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 22%, var(--soft));
}


/* v0.3 instrument polish */
.piano-keys {
  min-width: 1180px;
}
.piano-key-label {
  font-size: 9px;
  opacity: .72;
}
.bass-keyboard-help {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
.bass-keyboard-help .keyboard-chip {
  text-align:center;
}
.instrument-note {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
}


/* v0.4 piano octave switcher + bass row labels */
.piano-keys {
  min-width: 760px;
}
.octave-display {
  min-width: 190px;
  text-align: center;
}
.bass-row-map {
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  margin:8px 0 12px;
}
.bass-row-map .keyboard-chip {
  display:flex;
  justify-content:space-between;
  gap:14px;
}


/* v0.5 drum kit visual */
.drum-kit {
  position: relative;
  min-height: 340px;
  max-width: 900px;
  margin: 0 auto;
}
.drum-piece {
  position: absolute;
  border: 1px solid var(--line);
  color: var(--text);
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--panel-2) 80%, white 10%), var(--panel-2));
  box-shadow: inset 0 -12px 22px rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.10);
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 800;
  user-select: none;
}
.drum-piece small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:4px;
}
.drum-piece.active {
  transform: scale(.96);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 -12px 22px rgba(0,0,0,.12);
}
.drum-kick {
  width: 180px; height: 150px; border-radius: 50%;
  left: 50%; bottom: 10px; transform: translateX(-50%);
}
.drum-snare {
  width: 135px; height: 82px; border-radius: 50%;
  left: 25%; bottom: 74px;
}
.drum-tom1 {
  width: 118px; height: 74px; border-radius: 50%;
  left: 39%; top: 90px;
}
.drum-tom2 {
  width: 118px; height: 74px; border-radius: 50%;
  right: 31%; top: 90px;
}
.drum-floor {
  width: 145px; height: 92px; border-radius: 50%;
  right: 18%; bottom: 58px;
}
.drum-hihat {
  width: 132px; height: 34px; border-radius: 50%;
  left: 8%; top: 80px;
  background: linear-gradient(180deg, #cbb66b, #8f7d3d);
  color:#17130a;
}
.drum-crash {
  width: 150px; height: 36px; border-radius: 50%;
  right: 8%; top: 42px;
  background: linear-gradient(180deg, #d7c16e, #8e7834);
  color:#17130a;
}
.drum-ride {
  width: 160px; height: 38px; border-radius: 50%;
  right: 22%; top: 10px;
  background: linear-gradient(180deg, #d8c476, #8c7838);
  color:#17130a;
}
.drum-clap {
  width: 110px; height: 58px; border-radius: 16px;
  left: 8%; bottom: 22px;
}
.drum-kit-legend {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
  margin:10px 0 14px;
}


/* v0.6 expanded realistic drum kit */
.drum-kit {
  min-height: 430px;
  max-width: 980px;
}
.drum-piece {
  transition: transform .06s ease, box-shadow .08s ease, border-color .08s ease, filter .08s ease;
}
.drum-piece.active {
  filter: brightness(1.35);
  border-color: #fff;
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--accent) 26%, transparent),
    0 0 24px color-mix(in srgb, var(--accent) 42%, transparent),
    inset 0 -12px 22px rgba(0,0,0,.10);
}
.drum-kick {
  width: 205px; height: 170px;
  left: 50%; bottom: 8px;
}
.drum-snare {
  width: 145px; height: 88px;
  left: 25%; bottom: 98px;
}
.drum-tom1 {
  width: 116px; height: 72px;
  left: 37%; top: 120px;
}
.drum-tom2 {
  width: 124px; height: 76px;
  right: 35%; top: 112px;
}
.drum-tom3 {
  width: 132px; height: 82px; border-radius: 50%;
  right: 22%; top: 150px;
}
.drum-floor {
  width: 158px; height: 100px;
  right: 16%; bottom: 82px;
}
.drum-hihat {
  left: 8%; top: 128px;
}
.drum-crash {
  left: 14%; top: 34px;
  right: auto;
}
.drum-crash2 {
  width: 150px; height: 36px; border-radius: 50%;
  right: 8%; top: 54px;
  background: linear-gradient(180deg, #d7c16e, #8e7834);
  color:#17130a;
}
.drum-ride {
  right: 24%; top: 14px;
}
.drum-splash {
  width: 104px; height: 28px; border-radius: 50%;
  left: 46%; top: 46px;
  background: linear-gradient(180deg, #ead681, #9a843b);
  color:#17130a;
}
.drum-cowbell {
  width: 88px; height: 52px; border-radius: 10px 10px 18px 18px;
  left: 15%; bottom: 44px;
  background: linear-gradient(180deg, #444, #161616);
}
.drum-clap {
  left: 4%; bottom: 10px;
}
.drum-piece .drum-name {
  font-size: 12px;
}
.drum-piece .drum-key {
  font-size: 10px;
  opacity: .8;
  margin-top: 3px;
}


/* v0.7 drag instruments + audible song playback */
.instrument-picker button[draggable="true"] {
  cursor: grab;
}
.instrument-picker button[draggable="true"]:active {
  cursor: grabbing;
}
.instrument-picker button.dragging {
  opacity: .55;
  transform: scale(.97);
}
.track-sidebar.drag-target,
.arrangement-panel.drag-target {
  outline: 3px dashed var(--accent);
  outline-offset: -6px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
.drop-hint {
  display:none;
  margin:10px 14px;
  padding:10px 12px;
  border:1px dashed var(--accent);
  border-radius:12px;
  color:var(--muted);
  font-size:11px;
  text-align:center;
}
.track-sidebar.drag-target .drop-hint {
  display:block;
}
.playhead-line {
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:var(--accent);
  box-shadow:0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
  z-index:5;
  pointer-events:none;
  left:0%;
}
.song-playing-indicator {
  color:var(--accent-2);
  font-size:10px;
  font-weight:800;
  margin-left:6px;
}


/* v0.8 recording + draggable/deletable clips */
.clip {
  cursor: grab;
}
.clip:active {
  cursor: grabbing;
}
.clip.selected {
  outline: 2px solid #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
}
.clip.dragging {
  opacity: .55;
}
.clip-delete {
  position:absolute;
  top:4px;
  right:4px;
  width:24px;
  height:24px;
  border:0;
  border-radius:8px;
  background:rgba(0,0,0,.58);
  color:white;
  display:grid;
  place-items:center;
  z-index:3;
}
.clip-delete:hover {
  background:var(--danger);
}
.recording-banner {
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:8;
  border:1px solid color-mix(in srgb, var(--danger) 70%, var(--line));
  background:color-mix(in srgb, var(--danger) 16%, var(--panel));
  color:var(--text);
  border-radius:999px;
  padding:7px 12px;
  font-size:11px;
  font-weight:800;
  box-shadow:var(--shadow);
}
.recording-banner.hidden {
  display:none;
}


/* v0.9 transport, track mixer, realistic instruments, persistence */
.position-readout {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-width: 104px;
  text-align: right;
}
.publish-btn {
  border: 1px solid color-mix(in srgb, var(--accent-2) 55%, var(--line));
  background: color-mix(in srgb, var(--accent-2) 17%, var(--panel-2));
  color: var(--text);
  border-radius: 12px;
  min-height: 38px;
  padding: 0 14px;
  font-weight: 800;
}
.publish-btn:hover { border-color: var(--accent-2); }

.track-tools .mute-btn {
  width: 30px;
  font-size: 10px;
  font-weight: 900;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.track-tools .mute-btn.muted {
  background: color-mix(in srgb, var(--danger) 24%, var(--panel-2));
  color: var(--danger);
  border-color: var(--danger);
}
.track-item.muted-track {
  opacity: .62;
}
.volume-value {
  color: var(--muted);
  font-size: 9px;
  min-width: 26px;
  text-align: right;
}

.playhead-line {
  width: 3px;
}
.playhead-marker {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  z-index: 9;
  pointer-events: none;
  background: var(--accent);
  color: white;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  white-space: nowrap;
}
.arrangement-area {
  cursor: crosshair;
}

/* Larger 3-octave piano */
.piano-keys {
  min-width: 1040px;
  height: 170px;
}
.white-key { min-width: 46px; }
.black-key {
  width: 3%;
  height: 108px;
  background: linear-gradient(90deg, #151820, #3b404b 48%, #101217);
  box-shadow: inset 0 -8px 10px rgba(255,255,255,.04), 0 4px 5px rgba(0,0,0,.35);
}
.white-key {
  background: linear-gradient(90deg, #e6e6e8, #fff 35%, #f8f8fa 75%, #d8d9dc);
  box-shadow: inset 0 -8px 10px rgba(0,0,0,.05);
}

/* More realistic guitar and bass */
.fretboard {
  position: relative;
  background:
    radial-gradient(circle at 25% 35%, rgba(255,255,255,.05) 0 1px, transparent 1.5px),
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 20%, rgba(0,0,0,.08) 70%),
    repeating-linear-gradient(0deg, #493226 0 7px, #3e2a21 7px 14px);
  border: 4px solid #241812;
  box-shadow: inset 0 0 18px rgba(0,0,0,.55);
}
.guitar-string {
  position: relative;
  height: 28px;
}
.fret {
  border-left: 2px solid rgba(205,210,215,.72);
  position: relative;
}
.fret:first-child {
  border-left: 5px solid #ded8c8;
}
.fret::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height: var(--string-thickness, 2px);
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    #fff 0%,
    #b7bbc0 25%,
    #5f6469 50%,
    #d6dadd 75%,
    #74797d 100%
  );
  box-shadow: 0 1px 1px rgba(0,0,0,.55);
}
.fret:nth-child(4)::before,
.fret:nth-child(6)::before,
.fret:nth-child(8)::before,
.fret:nth-child(10)::before {
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d9d1bc;
  opacity:.7;
  left:50%;
  top:4px;
  transform:translateX(-50%);
}
.guitar-ui.no-chords .fret::after {
  background: linear-gradient(180deg,#e9c98d,#9e763d 35%,#5d411e 55%,#c69a57 78%,#64451f);
}

/* More realistic drum kit depth and hardware */
.drum-kit {
  min-height: 460px;
  perspective: 900px;
}
.drum-kit::before {
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  bottom:0;
  height:75px;
  border-radius:50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.32), transparent 68%);
  pointer-events:none;
}
.drum-piece {
  border: 4px solid #7f858b;
  background:
    radial-gradient(ellipse at 38% 26%, rgba(255,255,255,.48), rgba(255,255,255,.08) 28%, transparent 29%),
    radial-gradient(ellipse at center, #e7e9eb 0 48%, #aeb4b9 50% 58%, #343b43 60% 66%, #171b20 69%);
  box-shadow:
    inset 0 -12px 20px rgba(0,0,0,.22),
    inset 0 5px 8px rgba(255,255,255,.3),
    0 10px 18px rgba(0,0,0,.24);
}
.drum-kick {
  background:
    radial-gradient(circle at 50% 50%, #242830 0 12%, #eceff1 13% 48%, #727981 49% 55%, #252a31 57% 64%, #13161b 66%);
  border-width: 6px;
}
.drum-snare {
  background:
    radial-gradient(ellipse, #f5f5f2 0 46%, #bfc5c9 48% 54%, #7f3237 56% 67%, #25292e 69%);
}
.drum-tom1,.drum-tom2,.drum-tom3,.drum-floor {
  background:
    radial-gradient(ellipse, #efefec 0 45%, #aeb3b8 47% 54%, #384f72 56% 68%, #1d252f 70%);
}
.drum-hihat,.drum-crash,.drum-crash2,.drum-ride,.drum-splash {
  border: 2px solid #77631f;
  background:
    repeating-radial-gradient(ellipse at center,#d8bd59 0 5px,#f2d979 6px 8px,#aa8a2e 9px 11px);
  box-shadow: inset 0 0 10px rgba(255,255,255,.35), 0 8px 12px rgba(0,0,0,.22);
}
.drum-hihat::after,.drum-crash::after,.drum-crash2::after,.drum-ride::after,.drum-splash::after {
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  width:4px;
  height:95px;
  transform:translateX(-50%);
  background: linear-gradient(90deg,#50565b,#d4d7da,#575d62);
  z-index:-1;
}
.drum-cowbell {
  background: linear-gradient(180deg,#6a6d70,#202326 58%,#090a0b);
  border:2px solid #92979b;
}

/* Persistent project badges */
.song-card .project-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.song-card .saved-badge {
  font-size:9px;
  color:var(--accent-2);
  font-weight:800;
}


/* v0.10 save/publish dialog */
.save-project-modal {
  width: min(620px, 100%);
}
.save-form {
  display: grid;
  gap: 14px;
}
.save-form label {
  display: grid;
  gap: 7px;
}
.save-form label > span {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.save-form input,
.save-form select,
.save-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--text);
  border-radius: 12px;
  padding: 11px 12px;
  outline: none;
}
.save-form textarea {
  min-height: 110px;
}
.save-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}


/* v0.11 autosave + audio export */
.export-panel {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
  display: grid;
  gap: 10px;
}
.export-panel strong {
  display: block;
  font-size: 13px;
}
.export-panel small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}
.export-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.export-status {
  min-height: 16px;
  color: var(--muted);
  font-size: 11px;
}
.autosave-badge {
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 800;
}


/* v0.12 reusable saved instruments */
.dock-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.saved-instruments-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.saved-library-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  margin-bottom: 10px;
}
.saved-library-head h4 {
  margin: 0;
  font-size: 15px;
}
.saved-library-head small {
  color: var(--muted);
  text-align: right;
}
.saved-instrument-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.saved-instrument-card {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 13px;
  padding: 11px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  text-align: left;
  cursor: grab;
}
.saved-instrument-card:active {
  cursor: grabbing;
}
.saved-instrument-card:hover {
  border-color: var(--accent);
}
.saved-instrument-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--saved-color);
  color: white;
  font-size: 19px;
}
.saved-instrument-meta strong {
  display: block;
  font-size: 12px;
}
.saved-instrument-meta small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  font-size: 10px;
}
.saved-instrument-delete {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}
.saved-instrument-delete:hover {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger);
}
.saved-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  font-size: 11px;
}
@media (max-width: 720px) {
  .saved-instrument-list { grid-template-columns: 1fr; }
  .saved-library-head { align-items: flex-start; flex-direction: column; }
  .saved-library-head small { text-align: left; }
}


/* v0.13 additional instruments, variants, microphone/audio tracks */
.instrument-picker {
  grid-template-columns: repeat(3, 1fr);
}
.instrument-variant-bar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-bottom:12px;
}
.instrument-variant-bar label {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.instrument-variant-bar select {
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--text);
  border-radius:10px;
  padding:8px 10px;
}
.simple-instrument {
  display:grid;
  gap:12px;
}
.note-pad-grid {
  display:grid;
  grid-template-columns:repeat(8,minmax(58px,1fr));
  gap:8px;
}
.note-pad {
  min-height:64px;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--text);
  border-radius:12px;
  font-weight:800;
}
.note-pad.active {
  background:color-mix(in srgb, var(--accent) 28%, var(--panel-2));
  border-color:var(--accent);
}
.string-instrument {
  border:4px solid #2d1e14;
  border-radius:16px;
  padding:16px;
  background:
    radial-gradient(circle at 72% 50%, #24150e 0 7%, #b87a42 7.5% 15%, transparent 15.5%),
    linear-gradient(90deg,#c98a4d 0 33%,#4b3023 33% 100%);
}
.string-row {
  position:relative;
  height:34px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.string-row::after {
  content:"";
  position:absolute;
  left:2%;
  right:2%;
  top:50%;
  height:var(--string-width,2px);
  transform:translateY(-50%);
  background:linear-gradient(180deg,#f5e7bd,#987246,#ebd7a4);
  border-radius:999px;
  box-shadow:0 1px 2px rgba(0,0,0,.55);
}
.audio-panel {
  display:grid;
  gap:14px;
  max-width:760px;
}
.audio-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.audio-file-input {
  border:1px dashed var(--line);
  padding:14px;
  border-radius:12px;
  background:var(--panel-2);
}
.audio-info {
  color:var(--muted);
  font-size:11px;
}
.audio-track-player {
  width:100%;
}
.mic-status {
  font-size:12px;
  color:var(--muted);
}
.mic-status.recording {
  color:var(--danger);
  font-weight:800;
}
@media (max-width:720px) {
  .instrument-picker { grid-template-columns:repeat(2,1fr); }
  .note-pad-grid { grid-template-columns:repeat(4,1fr); }
}


/* v0.15 synthesizer */
.synth-ui {
  display: grid;
  gap: 14px;
}
.synth-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(135px, 1fr));
  gap: 10px;
}
.synth-control {
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 7px;
}
.synth-control label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.synth-control select,
.synth-control input[type="range"] {
  width: 100%;
}
.synth-value {
  font-size: 10px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.synth-preset-row {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.synth-preset {
  border:1px solid var(--line);
  background:var(--soft);
  color:var(--text);
  border-radius:10px;
  padding:8px 10px;
  font-size:11px;
  font-weight:800;
}
.synth-preset:hover {
  border-color:var(--accent);
}
.synth-keyboard {
  overflow-x:auto;
  padding-bottom:5px;
}
.synth-keyboard-inner {
  min-width:880px;
  display:grid;
  grid-template-columns:repeat(24,minmax(34px,1fr));
  gap:4px;
}
.synth-key {
  min-height:92px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#f4f4f5,#d9dade);
  color:#17191d;
  border-radius:7px 7px 10px 10px;
  font-weight:900;
  position:relative;
}
.synth-key.blackish {
  background:linear-gradient(180deg,#30333b,#0f1116);
  color:white;
  min-height:72px;
}
.synth-key.active {
  outline:3px solid var(--accent);
  transform:translateY(2px);
}
.synth-key small {
  display:block;
  font-size:9px;
  opacity:.72;
  margin-top:4px;
}
@media (max-width: 850px) {
  .synth-controls { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .synth-controls { grid-template-columns: 1fr; }
}


/* v0.16 church organ */
.organ-ui {
  display:grid;
  gap:14px;
}
.organ-console {
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 18%),
    repeating-linear-gradient(90deg,#4e3222 0 14px,#573827 14px 28px);
  border-radius:16px;
  padding:14px;
  box-shadow:inset 0 0 22px rgba(0,0,0,.25);
}
.organ-stops {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
.organ-stop {
  border:1px solid #8d755f;
  background:#efe5d4;
  color:#2a211a;
  border-radius:999px;
  padding:9px 8px;
  font-size:10px;
  font-weight:900;
}
.organ-stop.active {
  background:var(--accent);
  color:white;
  border-color:var(--accent);
}
.organ-manual {
  overflow-x:auto;
}
.organ-keys {
  min-width:980px;
  display:grid;
  grid-template-columns:repeat(24,minmax(36px,1fr));
  gap:4px;
}
.organ-key {
  min-height:105px;
  border:1px solid #bbb;
  background:linear-gradient(180deg,#fff,#ddd);
  color:#181818;
  border-radius:5px 5px 9px 9px;
  font-weight:900;
}
.organ-key.blackish {
  min-height:76px;
  background:linear-gradient(180deg,#333,#080808);
  color:white;
}
.organ-key.active {
  outline:3px solid var(--accent);
  transform:translateY(2px);
}
.organ-controls {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.organ-controls label {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.organ-controls select {
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
}


/* v0.17 looping */
.loop-btn.active {
  background: color-mix(in srgb, var(--accent) 28%, var(--panel-2));
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
}
.track-item.looping-track {
  box-shadow: inset 3px 0 0 var(--accent);
}
.loop-indicator {
  font-size: 9px;
  font-weight: 900;
  color: var(--accent);
  margin-left: 5px;
}