:root{
  --bg:#0f172a; --fg:#e5e7eb; --muted:#94a3b8; --accent:#60a5fa;
  --playing:#22c55e;
  --current-border:#ffeb3b;
  --current-halo:#f59e0b;
  --line:#1f2937;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif; background:var(--bg); color:#e5e7eb;}
.wrap{max-width:1100px; margin:auto; padding:16px; display:grid; gap:14px}
h1{font-size:clamp(18px,3.5vw,24px); margin:0; color:#e2e8f0}
.headerbar{display:flex; align-items:center; justify-content:space-between; gap:10px}
.controls{display:grid; gap:10px; grid-template-columns: repeat(12, minmax(90px,1fr)); align-items:end}
.controls .full{grid-column:1/-1}
label{font-size:12px; color:#cbd5e1; display:block; margin-bottom:4px}
select,input,button{width:100%; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:#0b1220; color:#e5e7eb}
button{cursor:pointer; font-weight:600}
.btn{font-size:12px; padding:6px 10px; background:transparent; border:1px solid #233046; color:#cbd5e1; border-radius:10px}
.btn:hover{background:#0d1526}
.btn.primary{background:var(--accent); color:#051427; border:none}
.toolbar{display:flex; gap:8px; justify-content:flex-end; align-items:center}
.toolbar .btn{padding:6px 8px}

.dropdown{position:relative; display:inline-block}
.dropdown-menu{
  position:absolute; top:110%; right:0; background:#0b1220; border:1px solid var(--line); border-radius:10px; padding:10px; display:none; min-width:280px; z-index:1000;
  box-shadow:0 10px 20px rgba(0,0,0,.35);
}
.dropdown.open .dropdown-menu{ display:block; }
.slider-row{display:flex; gap:8px; align-items:center; margin:6px 0}
.slider-row span{width:92px; color:#94a3b8; font-size:12px}

.paper{ background:#ffffff; color:#111827; border-radius:14px; padding:14px; border:1px solid #e5e7eb; }
.title-row{display:flex; gap:10px; align-items:center; margin-bottom:6px}
.title-row input{background:#fff; color:#111827; border:1px solid #cbd5e1}
.print-meta{font-size:12px; color:#475569}

.transport{display:flex; gap:8px; align-items:center; justify-content:flex-start; margin:2px 0 6px}
.status{font-size:12px; color:#e5e7eb; background:#111827; border:1px solid var(--line); border-radius:10px; padding:6px 10px}

.grid{display:grid; gap:6px; grid-template-columns: repeat(4, 1fr);}
.cell{
  border:2px solid #111827; border-radius:10px; padding:8px 8px 10px; position:relative; background:#fff; transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.cell.current{ border-color: var(--current-border); box-shadow: 0 0 0 3px var(--current-halo) inset; }
.cell.playing{ border-color: var(--playing); box-shadow: 0 0 0 3px #22c55e33 inset; }
.cell.selected{ border-color:#60a5fa; box-shadow:0 0 0 3px #60a5fa33 inset; }
.mhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:8px; min-height:26px}
.mnum{font-size:11px; color:#64748b; cursor:pointer}
.mnum::after{content:"  •  cliquer = départ"; color:#94a3b8; font-weight:500; font-size:10px}
.repeat{display:flex; align-items:center; gap:6px; min-width:120px; justify-content:flex-end}
.rep-btn, .rep-count{font-size:11px; padding:2px 6px; border-radius:999px; background:#f8fafc; color:#0f172a; cursor:pointer}
.rep-btn{ border:1px dashed #94a3b8; min-width:40px; text-align:center}
.rep-btn.on{ border:1px solid #eab308; background:#ffeb3b; }
.rep-count{ border:1px solid #94a3b8; min-width:70px; text-align:center; }
.rep-count.off{opacity:.6}
.rep-count:not(.off){ border-color:#eab308; background:#ffeb3b; }

.beats{display:grid; gap:6px; grid-auto-flow:column; grid-auto-columns:1fr}
.beat{display:grid; gap:4px}
.chord{font-size:16px; font-weight:800; line-height:1; text-align:center; min-height:28px; padding:6px 6px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#111827; cursor:text}
.chord:focus{outline:2px solid #60a5fa77}
.beat.current .chord{box-shadow:0 0 0 3px #fde68a; border-color:#f59e0b}

.footer{display:flex; justify-content:space-between; align-items:center; margin-top:6px; color:#64748b; font-size:12px}
.kbd-hint{color:#94a3b8}

@page{ size:A4; margin:12mm }
@media print{
  body{ background:#fff }
  .controls, .toolbar, h1, .note, .status { display:none !important }
  .paper{ border:none; padding:0 }
  .wrap{ max-width:none; padding:0 }
}

.inline-row{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.inline-row .group{display:grid; gap:4px}
.error{background:#7f1d1d;color:#fecaca;border:1px solid #fecaca;padding:6px 10px;border-radius:10px;display:none}
.error.show{display:block}
.transport-wrap{margin-left:auto}