/* Music Tools — tuner, metronome, drum pad, synth */
.music-app{display:grid;gap:1.25rem;min-width:0}
.music-panel{padding:1.15rem 1.2rem 1.25rem;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,#101018,#07070A);box-shadow:inset 0 0 80px rgba(0,0,0,.45);min-width:0}
.music-kicker{margin:0 0 .35rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.music-help{margin:0 0 1rem;color:#D6D3CC;font-size:.92rem}
.music-row{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center}
.music-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;min-width:0}
.music-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:.85rem 0}
.music-actions .btn,.music-row .btn{min-height:48px}
.music-status{margin:.4rem 0 0;font-size:.9rem;color:#D6D3CC}
.music-status.is-ok{color:#7BD88F;font-weight:600}
.music-status.is-warn{color:var(--amber)}
.music-status.is-err{color:#ffc9c9}
.music-hint{margin:.5rem 0 0;font-size:.85rem;color:var(--muted)}
.music-panel .unit-field{margin-bottom:.75rem}
.music-panel .unit-field input[type=range]{padding:0;min-height:44px;accent-color:#FFB400;width:100%}
.music-seg{display:flex;flex-wrap:wrap;gap:.45rem}
.music-seg button,.music-chip{
  min-height:44px;padding:.55rem .8rem;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:#DCD9D2;font:600 .85rem/1.2 var(--body);
  cursor:pointer;-webkit-tap-highlight-color:transparent
}
.music-seg button.is-on,.music-chip.is-on{border-color:rgba(255,180,0,.55);background:rgba(255,180,0,.1);color:var(--amber)}
.music-seg button:focus-visible,.music-chip:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* Tuner */
.tuner-readout{display:flex;flex-direction:column;align-items:center;text-align:center;padding:.4rem 0 1rem;min-width:0}
.tuner-note{font:700 clamp(4.5rem,22vw,7.5rem)/.9 var(--head);letter-spacing:.02em;color:#fff;margin:0}
.tuner-note .tuner-oct{font-size:.38em;color:var(--muted);margin-left:.08em;vertical-align:super}
.tuner-freq{margin:.35rem 0 0;font:600 1.05rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:#D6D3CC}
.tuner-cents{margin:.2rem 0 0;font:700 1.15rem/1.2 var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tuner-cents.is-in{color:#7BD88F}
.tuner-cents.is-off{color:var(--amber)}
.tuner-badge{margin:.65rem 0 0;padding:.35rem .75rem;border-radius:999px;font:700 .78rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.06);color:var(--muted)}
.tuner-badge.is-in{background:rgba(123,216,143,.16);color:#7BD88F;box-shadow:0 0 22px rgba(123,216,143,.2)}
.tuner-meter{width:min(100%,420px);height:140px;display:block;margin:.4rem auto 0}
.tuner-strings{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:.5rem;margin-top:.4rem}
.tuner-string{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:64px;padding:.5rem .4rem;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#DCD9D2;cursor:pointer;font:700 1.05rem/1.1 var(--head)}
.tuner-string small{font:600 .68rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tuner-string.is-on{border-color:rgba(255,180,0,.55);background:rgba(255,180,0,.1);color:var(--amber)}
.tuner-string.is-on small{color:var(--amber)}
.tuner-string.is-match{border-color:rgba(123,216,143,.55);background:rgba(123,216,143,.1);color:#7BD88F}
.tuner-perm{padding:.85rem 1rem;border-radius:14px;border:1px solid rgba(0,212,255,.35);background:rgba(0,212,255,.08);color:#c9f3ff;font-size:.92rem;margin:0 0 1rem}

/* Metronome */
.metro-viz{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.5rem 0 1rem}
.metro-beats{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:center;width:100%}
.metro-beat{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:#15151E;transition:background .08s,border-color .08s,transform .08s,box-shadow .08s}
.metro-beat.is-accent{border-color:rgba(255,180,0,.55)}
.metro-beat.is-now{background:var(--amber);border-color:var(--amber);transform:scale(1.08);box-shadow:0 0 22px rgba(255,180,0,.4)}
.metro-beat.is-now-sub{background:#00D4FF;border-color:#00D4FF;box-shadow:0 0 16px rgba(0,212,255,.35)}
.metro-bpm{font:700 clamp(3.2rem,16vw,5.2rem)/.9 var(--head);color:#fff;margin:0;letter-spacing:.02em}
.metro-bpm span{font-size:.28em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:.35rem;vertical-align:middle}
.metro-pulse{width:min(180px,46vw);height:min(180px,46vw);border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#1a1a24,#07070A)}
.metro-pulse.is-on{border-color:var(--amber);box-shadow:0 0 40px rgba(255,180,0,.28)}

/* Drum pad */
.drum-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;touch-action:manipulation}
.drum-pad{position:relative;min-height:72px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#F5F3EE;font:700 .82rem/1.15 var(--head);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;padding:.45rem .35rem .35rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.drum-pad kbd{font:600 .65rem/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.drum-pad.is-down,.drum-pad:active{background:rgba(255,180,0,.22);border-color:var(--amber);transform:scale(.97)}
.drum-seq{margin-top:1rem;overflow:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.drum-seq-grid{display:grid;grid-template-columns:72px repeat(16,minmax(22px,1fr));gap:3px;min-width:0}
.drum-seq-label{font:600 .68rem/1.1 var(--body);color:var(--muted);display:flex;align-items:center;padding-right:.25rem;min-width:0}
.drum-step{min-height:28px;min-width:0;border-radius:5px;border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer;padding:0}
.drum-step.is-on{background:rgba(255,180,0,.7);border-color:var(--amber)}
.drum-step.is-play{box-shadow:inset 0 0 0 2px #00D4FF}
.drum-step.is-bar{border-left-color:rgba(245,243,238,.28)}

/* Synth */
.synth-keys-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;padding:.4rem 0 1rem;touch-action:pan-x}
.synth-keys{position:relative;height:168px;display:flex;width:max-content}
.synth-wkey{width:36px;height:168px;flex:0 0 36px;border-radius:0 0 8px 8px;border:1px solid #1a1a22;background:linear-gradient(#f7f4ee,#d8d4cc);color:#111;font:700 .68rem/1 var(--body);display:flex;align-items:flex-end;justify-content:center;padding-bottom:.45rem;cursor:pointer;user-select:none;z-index:1;-webkit-tap-highlight-color:transparent}
.synth-wkey.is-down{background:linear-gradient(#ffe08a,#e0b000)}
.synth-bkey{position:absolute;top:0;width:22px;height:102px;border-radius:0 0 6px 6px;background:linear-gradient(#2a2a33,#0a0a10);border:1px solid #000;z-index:2;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.synth-bkey.is-down{background:linear-gradient(#FFB400,#9a6c00)}
.synth-midi{margin:0;font-size:.85rem;color:var(--muted)}
.synth-midi.is-ok{color:#7BD88F}

@media (max-width:700px){
  .music-grid-2{grid-template-columns:1fr}
  .drum-pad{min-height:68px;font-size:.72rem}
  .drum-seq-grid{grid-template-columns:56px repeat(16,22px);min-width:430px}
  .tuner-strings{grid-template-columns:repeat(3,minmax(0,1fr))}
  .music-actions .btn{flex:1 1 calc(50% - .6rem)}
}
@media (prefers-reduced-motion:reduce){
  .metro-beat,.tuner-badge{transition:none}
}
.music-check{display:flex;align-items:center;gap:.6rem;min-height:44px;font-weight:600;color:#DCD9D2;cursor:pointer}
.music-check input{width:20px;height:20px;accent-color:#FFB400;flex:0 0 auto}