/* IMusic Player — original styles, redesigned round 2. No framework, no copied theme.
   The old demo look (dark cluttered panels) was NOT copied: this is a light,
   simple layout with one dark transport bar, a slide-in settings panel, and
   an in-flow instrument rack that never covers the score. */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #1f2937; background: #f6f7f5; }
header.app-header { background: #14251f; color: #fff; padding: 20px 24px; }
header.app-header h1 { margin: 0 0 4px; font-size: 26px; }
header.app-header .slogan { margin: 0; font-size: 17px; color: #a7e8c8; font-weight: 600; }
header.app-header .note { margin: 6px 0 0; font-size: 13px; color: #cbd5d1; }
main { max-width: 980px; margin: 0 auto; padding: 20px 16px 40px; }
.controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; background: #fff; border: 1px solid #dde3df; border-radius: 10px; padding: 14px 16px; }
.controls button { font-size: 15px; padding: 8px 18px; border-radius: 8px; border: 1px solid #14532d; background: #166534; color: #fff; cursor: pointer; }
.controls button:hover { background: #15803d; }
.controls label { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.controls input[type=range] { width: 140px; }
.controls input#progress { width: 220px; }
.controls select { font-size: 14px; padding: 4px 6px; }
.controls button:disabled { opacity: 0.45; cursor: default; }
.controls button:disabled:hover { background: #166534; }
.controls button.active { background: #0f766e; border-color: #0f766e; }
.controls button.mini { font-size: 13px; padding: 5px 10px; }
/* Dark transport bar: the primary action row, visually distinct. */
.controls.transport { background: #14251f; border-color: #14251f; color: #e7f0ea; }
.controls.transport button { border-color: #22c55e; }
.controls.transport input[type=range] { accent-color: #22c55e; }
.song-info { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid #dde3df; border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: 16px; }
.song-info #song-artist { color: #4b5563; margin-left: 6px; }
.cover { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; background: linear-gradient(135deg, #1e293b, #0f172a); color: #fff; font-size: 34px; display: flex; align-items: center; justify-content: center; }
.file-row input[type=url] { width: 260px; font-size: 14px; padding: 5px 8px; border: 1px solid #cbd5d1; border-radius: 6px; }
.file-note { margin: 8px 0 0; font-size: 13px; color: #92400e; }
.region-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.region-group input[type=number] { width: 64px; font-size: 14px; padding: 4px 6px; }
.tracks { background: #fff; border: 1px solid #dde3df; border-radius: 10px; padding: 12px 16px; margin-top: 14px; }
.tracks h2 { margin: 0 0 8px; font-size: 15px; }
.track-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 0; border-top: 1px solid #eef1ee; font-size: 14px; }
.track-row:first-child { border-top: none; }
.track-row.focused { background: #ecfdf5; border-left: 4px solid #166534; padding-left: 8px; }
.track-row .track-icon { font-size: 18px; }
.track-row .track-name { font-weight: 600; min-width: 120px; background: none; border: none; color: #14532d; cursor: pointer; font-size: 14px; padding: 4px 2px; text-align: left; }
.track-row .track-name:hover { text-decoration: underline; }
.track-row .mini-label { font-size: 13px; color: #4b5563; }
.track-row input[type=range] { width: 110px; }
.track-row select { font-size: 13px; padding: 4px 6px; }
/* Settings panel: slide-in from the right on desktop, full overlay on phones.
   It is opened on demand only, so it never covers the score uninvited. */
.settings-panel { position: fixed; top: 0; right: 0; width: 340px; max-width: 92vw; height: 100vh; overflow-y: auto; background: #fff; border-left: 1px solid #dde3df; box-shadow: -4px 0 24px rgba(0,0,0,.18); padding: 16px; z-index: 1000; transform: translateX(105%); transition: transform .18s ease; }
.settings-panel.open { transform: translateX(0); }
.settings-head { display: flex; justify-content: space-between; align-items: center; }
.settings-head h2 { margin: 0; font-size: 18px; }
.settings-head button { font-size: 16px; padding: 6px 12px; border-radius: 8px; border: 1px solid #14532d; background: #166534; color: #fff; cursor: pointer; }
.settings-panel h3 { font-size: 14px; margin: 18px 0 8px; color: #14532d; text-transform: uppercase; letter-spacing: .04em; }
.settings-rows { display: flex; flex-direction: column; gap: 10px; }
.settings-rows label { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.settings-rows input[type=number] { width: 64px; font-size: 14px; padding: 4px 6px; }
.settings-rows input[type=range] { width: 110px; }
.settings-rows input[type=color] { width: 40px; height: 30px; padding: 2px; }
.settings-rows .rgba { font-size: 12px; color: #4b5563; font-family: ui-monospace, monospace; }
.settings-note { font-size: 12px; color: #6b7280; }
/* Instrument rack: in-flow BELOW the score, never an overlay. */
.rack-section { background: #fff; border: 1px solid #dde3df; border-radius: 10px; padding: 12px 16px; margin-top: 14px; }
.rack-head { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.rack-note { font-size: 12px; color: #6b7280; margin: 10px 0 0; }
.rack-piano { position: relative; display: flex; overflow-x: auto; height: 120px; border: 1px solid #374151; border-radius: 6px; background: #111827; padding: 0; }
.rack-key.white { flex: 1 0 0; min-width: 22px; background: #f9fafb; border-right: 1px solid #9ca3af; }
.rack-key.black { position: absolute; top: 0; width: 1.8%; height: 62%; background: #111827; border: 1px solid #000; border-radius: 0 0 4px 4px; z-index: 2; }
.rack-key.lit { background: #22c55e !important; }
.rack-fretboard { overflow-x: auto; border: 1px solid #374151; border-radius: 6px; background: #1f2937; padding: 8px; }
.rack-fret-row { display: flex; align-items: center; gap: 0; min-width: 720px; }
.rack-fret-label { flex: 0 0 52px; font-size: 12px; color: #d1d5db; }
.rack-fret-num { flex: 1; text-align: center; font-size: 11px; color: #9ca3af; padding: 2px 0; }
.rack-fret-cell { flex: 1; height: 26px; border-right: 1px solid #6b7280; border-bottom: 1px solid #4b5563; }
.rack-fret-cell.lit { background: #f97316 !important; }
.rack-kit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rack-pad { border: 2px solid #374151; border-radius: 10px; padding: 18px 6px; text-align: center; font-weight: 600; background: #f3f4f6; }
.rack-pad.lit { background: #f97316; color: #fff; border-color: #ea580c; }
#imusic-score.drag-over { outline: 3px dashed #166534; outline-offset: 2px; }
main.css-fullscreen { position: fixed; inset: 0; z-index: 9999; max-width: none; overflow: auto; background: #f6f7f5; }
#imusic-score { background: #fff; border: 1px solid #dde3df; border-radius: 10px; margin-top: 14px; padding: 12px; min-height: 240px; overflow-x: auto; }
#status { margin-top: 12px; font-size: 13px; color: #4b5563; }
footer { margin-top: 24px; font-size: 12px; color: #6b7280; }
@media (max-width: 640px) {
  /* Mobile must be REALLY good: the transport sticks to the top so play /
     stop / speed are always one tap away, buttons are finger-sized, and no
     panel ever covers the score except the settings sheet the user opened. */
  .controls.transport { position: sticky; top: 0; z-index: 900; border-radius: 0 0 10px 10px; }
  .controls button { min-height: 44px; padding: 10px 14px; }
  .controls input[type=range], .controls input#progress { width: 100%; height: 32px; }
  .file-row input[type=url] { width: 100%; }
  .track-row { flex-direction: column; align-items: stretch; }
  .track-row .track-name { min-width: 0; }
  .track-row input[type=range] { width: 100%; }
  .settings-panel { width: 100vw; max-width: 100vw; }
  .rack-kit { grid-template-columns: repeat(2, 1fr); }
  .cover { flex-basis: 52px; width: 52px; height: 52px; font-size: 28px; }
}