:root{
  --accent:#FFB347; --sel-bg:#2D2D2D; --sel-fg:#FFD700;
  --composer:#888; --page:#555; --ok:#00CC88; --err:#FF5555;
  --mode:#88AAFF; --divider:#333; --bg:#141414; --fg:#ddd;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--fg);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px; display:flex; flex-direction:column; height:100vh;
}
header{
  display:flex; align-items:baseline; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--divider);
}
.brand{color:var(--accent); font-weight:700}
.count{color:var(--page)}
.search{padding:10px 16px; border-bottom:1px solid var(--divider)}
#search{
  width:100%; background:#1c1c1c; border:1px solid var(--divider);
  color:var(--fg); padding:8px 10px; border-radius:6px; font:inherit;
}
#search:focus{outline:none; border-color:var(--accent)}

main{flex:1; display:flex; min-height:0}
.list{
  list-style:none; margin:0; padding:0; overflow:auto;
  width:44%; min-width:280px; border-right:1px solid var(--divider);
}
.row{
  display:flex; gap:10px; padding:6px 12px; cursor:pointer;
  white-space:nowrap; overflow:hidden;
}
.row:hover{background:#1c1c1c}
.row.sel{background:var(--sel-bg); color:var(--sel-fg)}
.row .t{flex:1; overflow:hidden; text-overflow:ellipsis}
.row .c{color:var(--composer); overflow:hidden; text-overflow:ellipsis; max-width:34%}
.row.sel .c{color:var(--sel-fg); opacity:.8}
.row .p{color:var(--page)}
.row.noaudio .t::after{content:" (sin audio)"; color:var(--err); font-size:11px}

.detail{flex:1; min-height:0; overflow:hidden; padding:16px; display:flex; flex-direction:column; gap:12px}
.detail.hidden,.hidden{display:none}
/* Title + transpose + audio stay pinned; only the sheets scroll, so loading the
   sheet images can never push the player out of view. */
.detail-top{flex:0 0 auto; display:flex; flex-direction:column; gap:12px}
.detail-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.d-title{color:var(--accent); font-weight:700; font-size:16px}
.d-composer{color:var(--composer)}
.tono{display:flex; align-items:center; gap:6px}
.tono button{
  background:#1c1c1c; color:var(--fg); border:1px solid var(--divider);
  width:30px; height:30px; border-radius:6px; cursor:pointer; font:inherit;
}
.tono button:hover{border-color:var(--mode)}
.tono-label{color:var(--mode); min-width:96px; text-align:center}
.spin{color:var(--ok)}
audio{width:100%}
.no-audio{color:var(--err)}
.sheets{flex:1; min-height:0; overflow-y:auto}
.sheets img{width:100%; display:block; margin:8px 0; background:#fff; border-radius:4px}

footer{
  padding:8px 16px; border-top:1px solid var(--divider);
  color:var(--page); font-size:12px;
}