* { box-sizing: border-box; }
:root { --bg:#0f1220; --panel:#171a2b; --accent:#6ee7b7; --text:#e5e7eb; --muted:#9aa0a6; --danger:#ef4444; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
button, input, select { font:inherit; }
a { color: var(--accent); text-decoration: none; }

.app-header { position:sticky; top:0; z-index:5; display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:0.75rem 1rem; background:linear-gradient(180deg, rgba(23,26,43,.95), rgba(23,26,43,.85)); backdrop-filter: blur(6px); border-bottom:1px solid #22263d; }
.app-header h1 { margin:0; font-size:1.15rem; letter-spacing:.3px; }
.toolbar-toggle { display:none; background:#1e223a; color:var(--text); border:1px solid #2a2f4c; border-radius:.5rem; padding:.35rem .6rem; }
.controls { display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center; }
.control { display:flex; gap:.5rem; align-items:center; background: #121427; padding:.4rem .6rem; border-radius:.6rem; border:1px solid #20243b; }
.control label { color:var(--muted); font-size:.85rem; }
.control input[type="number"], .control input[type="text"], .control select { background:#0f1224; color:var(--text); border:1px solid #20243b; border-radius:.45rem; padding:.35rem .5rem; min-width:4rem; }
.control button { background:#1e223a; color:var(--text); border:1px solid #2a2f4c; border-radius:.5rem; padding:.4rem .7rem; cursor:pointer; }
.control button:hover { border-color:#3a4065; }
.control #play { background:#0e7a5f; border-color:#0e7a5f; }
.control #stop[disabled] { opacity:.6; }
.control #deleteSong { background:#3a1620; border-color:#5a1e2c; }

/* Accordion for song actions */
details.songs-menu { padding:.2rem .4rem; }
details.songs-menu > summary { list-style:none; cursor:pointer; user-select:none; padding:.35rem .6rem; border-radius:.5rem; background:#1e223a; border:1px solid #2a2f4c; color:var(--text); }
details.songs-menu[open] > summary { border-bottom-left-radius:.3rem; border-bottom-right-radius:.3rem; }
details.songs-menu .control-body { display:flex; gap:.5rem; align-items:center; margin-top:.45rem; }
details.songs-menu[open] { background:#121427; border:1px solid #20243b; border-radius:.6rem; }

main { padding:1rem; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:.75rem; }
.measure { background: var(--panel); border:1px solid #22263d; border-radius:.6rem; padding:.6rem; display:flex; flex-direction:column; gap:.4rem; cursor:pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, outline-color 0.15s ease; }
.measure:hover { transform: translateY(-1px); }
.measure .top { display:flex; align-items:center; justify-content:space-between; }
.measure .title { font-weight:600; font-size:.95rem; }
.measure .meta { color:var(--muted); font-size:.8rem; }
.measure .cue { color: var(--accent); font-size:.85rem; }
.measure.playing { outline:2px solid var(--accent); box-shadow:0 0 0 2px rgba(110,231,183,.2) inset; }
.measure.selected { outline:2px solid var(--accent); box-shadow:0 0 0 2px rgba(110,231,183,.2) inset; background: #151a2d; }

.dialog-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.5rem; }
.field { display:flex; flex-direction:column; gap:.25rem; margin:.4rem 0; }

.app-footer { position:sticky; bottom:0; background:#0f1224; border-top:1px solid #22263d; padding:.5rem 1rem; color:var(--muted); font-size:.9rem; }

/* Visual metronome overlay */
#beatFlash { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(60% 60% at 50% 50%, rgba(110,231,183,0.25), rgba(110,231,183,0) 60%); opacity: 0; transition: opacity 80ms ease; z-index: 4; }
#beatFlash.show { opacity: 0.5; }
#beatFlash.downbeat { background: radial-gradient(60% 60% at 50% 50%, rgba(250,204,21,0.35), rgba(250,204,21,0) 60%); }

@media (max-width: 640px) {
  .controls { gap:.5rem; }
  .control { flex-wrap:wrap; }
  /* Make toolbar more compact */
  .control input[type="text"] { min-width: 8rem; }
  .control label { display:none; }
  /* Accordion closed by default on small screens; summary acts as compact entry point */
  details.songs-menu { padding:0; border:none; }
  details.songs-menu .control-body { padding:.4rem; flex-wrap:wrap; }
  /* Reduce grid column width for small screens */
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* Show toolbar toggle only on small screens */
  .toolbar-toggle { display:inline-flex; align-items:center; justify-content:center; }

  /* Collapsed toolbar: hide all controls except Play/Stop buttons */
  .app-header.collapsed .controls > * { display:none; }
  .app-header.collapsed #transportControl { display:flex; }
  .app-header.collapsed #transportControl label,
  .app-header.collapsed #transportControl input,
  .app-header.collapsed #transportControl select,
  .app-header.collapsed #transportControl #timeSig,
  .app-header.collapsed #transportControl #bpm { display:none; }
  .app-header.collapsed #transportControl #play,
  .app-header.collapsed #transportControl #stop { display:inline-flex; }
}