/* Piano Arranger — dark editor theme */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #14161c; color: #e6e9f0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #7db1ff; text-decoration: none; }
.muted { color: #8b93a7; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

button, select, input {
  font: inherit; color: inherit;
  background: #232838; border: 1px solid #343b52; border-radius: 8px;
  padding: 5px 10px;
}
button { cursor: pointer; }
button:hover { background: #2c3348; }
button.active { background: #3457a8; border-color: #4a71cc; }
input:focus, select:focus { outline: 2px solid #4a71cc55; }

/* ---------- landing / list page ---------- */
.page { max-width: 860px; margin: 0 auto; padding: 32px 20px 80px; }
.page-head h1 { margin: 0 0 4px; font-size: 28px; }
.page-head p { margin: 0 0 24px; }
.new-form { display: flex; gap: 10px; margin-bottom: 28px; }
.new-form input { flex: 1; padding: 10px 14px; }
.new-form button { background: #3457a8; border-color: #4a71cc; font-weight: 600; padding: 10px 18px; }
.new-form button:hover { background: #3f66c2; }

.cards { display: flex; flex-direction: column; gap: 12px; }
.card {
  background: #1d2129; border: 1px solid #2b3143; border-radius: 12px;
  display: flex; align-items: stretch; overflow: hidden;
}
.card-main { flex: 1; display: block; padding: 14px 18px; color: inherit; }
.card-main:hover { background: #222736; }
.card-title { font-size: 17px; font-weight: 650; }
.card-composer { color: #8b93a7; font-size: 13px; }
.card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chip {
  background: #262c3d; border: 1px solid #333b52; border-radius: 20px;
  padding: 1px 10px; font-size: 12px; color: #aeb6ca;
}
.card-updated { margin-top: 6px; font-size: 12px; color: #6b7288; }
.card-actions {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 10px 14px; border-left: 1px solid #2b3143; background: #191d26;
}
.card-actions a, .card-actions button {
  font-size: 12.5px; padding: 4px 10px; white-space: nowrap;
  background: transparent; border: 1px solid #343b52; border-radius: 7px;
  color: #aeb6ca; text-align: center; width: 100%;
}
.card-actions a:hover, .card-actions button:hover { background: #262c3d; }
.card-actions .danger:hover { background: #4a2430; border-color: #7a3346; color: #ff9aa8; }
.card-actions form { margin: 0; }
.empty { text-align: center; padding: 60px 0; }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; }
.login-card {
  background: #1d2129; border: 1px solid #2b3143; border-radius: 16px;
  padding: 36px 44px; text-align: center; display: flex; flex-direction: column; gap: 10px;
}
.login-logo { font-size: 42px; }
.login-card h1 { margin: 0; font-size: 22px; }
.login-card input { text-align: center; font-size: 18px; letter-spacing: 3px; }
.login-card button { background: #3457a8; border-color: #4a71cc; font-weight: 600; }
.login-error { color: #ff9aa8; margin: 0; }

/* ---------- editor shell ---------- */
.editor-body { overflow: hidden; }
#editor-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

#toolbar {
  background: #1a1e28; border-bottom: 1px solid #2b3143;
  padding: 6px 10px; display: flex; flex-direction: column; gap: 6px;
  flex: 0 0 auto; user-select: none; -webkit-user-select: none;
}
.tb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-back { font-size: 18px; padding: 2px 8px; border-radius: 8px; }
.tb-back:hover { background: #262c3d; }
.tb-spacer { flex: 1; }
.tb-group { display: flex; align-items: center; gap: 4px; }
.tb-group label { font-size: 12.5px; color: #8b93a7; }
.tb-link { font-size: 13.5px; padding: 5px 10px; border: 1px solid #343b52; border-radius: 8px; }
.tb-link:hover { background: #262c3d; }

#title-input {
  width: 220px; font-weight: 650; background: transparent; border-color: transparent;
}
#title-input:hover, #title-input:focus { background: #232838; border-color: #343b52; }

#transport button { font-size: 14px; padding: 5px 11px; }
#btn-play.playing { background: #2c7a4b; border-color: #3da368; }
#pos-display { min-width: 52px; text-align: center; color: #aeb6ca; font-size: 13.5px; }

.seg { gap: 0; }
.seg button {
  border-radius: 0; border-right-width: 0; padding: 5px 10px; font-size: 13.5px;
}
.seg button:first-child { border-radius: 8px 0 0 8px; }
.seg button:last-child { border-radius: 0 8px 8px 0; border-right-width: 1px; }

#hand-seg .hand-r.active { background: #2a4b8f; border-color: #4a71cc; }
#hand-seg .hand-l.active { background: #8f5a1e; border-color: #c98a3a; }
#dur-seg button { font-size: 12.5px; min-width: 36px; }

#tempo-input { width: 60px; }

#save-status { font-size: 12.5px; padding: 3px 10px; border-radius: 20px; }
.save-ok { color: #6fce93; background: #1d3227; }
.save-dirty { color: #e8c268; background: #33291a; }
.save-err { color: #ff9aa8; background: #3a1f27; }

/* ---------- piano roll ---------- */
#roll-wrap {
  flex: 1 1 auto; display: flex; min-height: 0; position: relative;
  background: #101218;
}
#keys { flex: 0 0 56px; width: 56px; display: block; }
#roll { flex: 1 1 auto; display: block; cursor: crosshair; touch-action: none; }

/* ---------- notation panel ---------- */
#notation-panel {
  flex: 0 0 auto; max-height: 42%; border-top: 1px solid #2b3143;
  background: #f7f4ec;
}
#notation-scroll { overflow: auto; max-height: 100%; }
#notation { display: block; }

/* ---------- status bar ---------- */
#statusbar {
  flex: 0 0 auto; display: flex; gap: 10px; align-items: center;
  background: #1a1e28; border-top: 1px solid #2b3143;
  padding: 4px 12px; font-size: 12px; color: #6b7288;
}

/* ---------- help overlay ---------- */
#help-overlay {
  position: fixed; inset: 0; background: #000a; z-index: 50;
  display: grid; place-items: center;
}
#help-overlay[hidden] { display: none; }
.help-card {
  background: #1d2129; border: 1px solid #2b3143; border-radius: 14px;
  padding: 24px 30px; max-width: 420px;
}
.help-card h2 { margin: 0 0 12px; font-size: 17px; }
.help-card table { border-collapse: collapse; width: 100%; }
.help-card td { padding: 3px 14px 3px 0; font-size: 13.5px; color: #c6cdde; }
.help-card td.mono { color: #7db1ff; white-space: nowrap; }
.help-card button { margin-top: 14px; width: 100%; }

/* ---------- practice mode ---------- */
.practice-body { overflow: hidden; touch-action: manipulation; }
#practice-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
#practice-bar {
  display: flex; align-items: center; gap: 10px;
  background: #1a1e28; border-bottom: 1px solid #2b3143;
  padding: 8px 12px; flex: 0 0 auto; user-select: none; -webkit-user-select: none;
}
#practice-title { font-weight: 650; }
#practice-acc { color: #6fce93; min-width: 44px; text-align: right; }
#practice-measure { color: #8b93a7; }
#mic-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #3a4258; transition: background 120ms;
}
#mic-dot.hot { background: #6fce93; box-shadow: 0 0 8px #6fce93aa; }
#practice-scroll { flex: 1 1 auto; overflow: auto; background: #f7f4ec; }
#practice-canvas { display: block; margin: 0 auto; }
#practice-foot {
  display: flex; align-items: center; gap: 10px;
  background: #1a1e28; border-top: 1px solid #2b3143;
  padding: 8px 12px; flex: 0 0 auto;
}
#practice-status { font-size: 14px; color: #c6cdde; }
#practice-status b { color: #7db1ff; }

#cal-overlay, #summary-overlay {
  position: fixed; inset: 0; background: #14161cf2; z-index: 60;
  display: grid; place-items: center; padding: 20px;
}
#cal-overlay[hidden], #summary-overlay[hidden] { display: none; }
.cal-card {
  background: #1d2129; border: 1px solid #2b3143; border-radius: 16px;
  padding: 30px 36px; text-align: center; max-width: 440px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.cal-card h1 { margin: 0; font-size: 20px; }
.cal-card p { margin: 0; }
#cal-step b { color: #7db1ff; }
#cal-meter { border-radius: 5px; }
#cal-start, .sum-btns button {
  background: #3457a8; border-color: #4a71cc; font-weight: 600; padding: 10px 22px;
}
.sum-btns { display: flex; gap: 10px; }
.sum-acc { font-size: 54px; font-weight: 700; color: #6fce93; line-height: 1; }
.sum-acc span { font-size: 26px; color: #6fce93aa; }
.sum-line { font-size: 14.5px; }

#debug-panel {
  position: fixed; bottom: 64px; right: 12px; z-index: 40;
  background: #1d2129; border: 1px solid #2b3143; border-radius: 10px;
  padding: 8px 10px; display: flex; gap: 8px; align-items: center;
}
#debug-panel[hidden] { display: none; }

@media (max-width: 760px) {
  #title-input { width: 130px; }
  .tb-row { gap: 5px; }
}