/* ================================================================
   MUSIC STUDIO V2 — Enhanced Styles
   ================================================================ */

/* ---- Layout ---- */
.music-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 5px;
}

/* ---- Top Toolbar ---- */
.music-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px 12px;
  background: rgba(12, 10, 30, .94);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.06);
}

.music-toolbar .mt-title {
  font-weight: 900;
  font-size: 1rem;
  color: #fff;
  text-shadow: 0 0 16px rgba(108,92,231,.7);
  letter-spacing: .5px;
}

.mt-group { display: flex; align-items: center; gap: 4px; }

.mt-btn {
  padding: 5px 10px;
  border: 2px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 8px;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  font-family: var(--font);
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.mt-btn:hover {
  border-color: var(--secondary);
  background: rgba(162,155,254,.2);
  transform: scale(1.04);
}
.mt-btn.active {
  border-color: #a29bfe;
  background: rgba(108,92,231,.4);
  box-shadow: 0 0 10px rgba(108,92,231,.3);
}
.mt-btn.mt-play { border-color: #00b894; background: rgba(0,184,148,.2); }
.mt-btn.mt-play:hover { background: rgba(0,184,148,.35); }
.mt-btn.mt-play.playing { border-color: #e17055; background: rgba(225,112,85,.25); animation: pulse-glow 1.5s infinite; }
.mt-btn.mt-save-btn { border-color: #fdcb6e; background: rgba(253,203,110,.15); }
.mt-btn.mt-export-btn { border-color: #74b9ff; background: rgba(116,185,255,.15); }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 8px rgba(225,112,85,.2); } 50% { box-shadow: 0 0 18px rgba(225,112,85,.5); } }

.mt-sep { width: 1px; height: 26px; background: rgba(255,255,255,.08); margin: 0 1px; }

/* BPM, Volume, Swing groups */
.mt-bpm-group { display: flex; align-items: center; gap: 3px; }
.mt-bpm-group label { color: rgba(255,255,255,.6); font-size: .7rem; font-weight: 700; }
.mt-bpm-group input[type=range] { width: 55px; accent-color: #a29bfe; }
.mt-bpm-val { color: #fff; font-size: .76rem; font-weight: 800; min-width: 28px; text-align: center; }
.mt-vol { width: 45px; accent-color: #fdcb6e; }

/* ---- Panels Container ---- */
.music-panels {
  flex: 1;
  display: flex;
  gap: 5px;
  min-height: 0;
  overflow: hidden;
}

.music-panel {
  background: rgba(12, 10, 30, .9);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.05);
}

.music-panel-header {
  padding: 7px 12px;
  font-weight: 800;
  color: #fff;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  background: rgba(255,255,255,.02);
}

.music-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
}
.music-panel-body::-webkit-scrollbar { width: 5px; }
.music-panel-body::-webkit-scrollbar-track { background: transparent; }
.music-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

/* ---- Category Tabs ---- */
.m2-cat-tabs {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  padding: 4px 6px;
  background: rgba(0,0,0,.15);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.m2-cat-tab {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: .68rem;
  font-weight: 800;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: all .12s;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font);
}
.m2-cat-tab:hover { color: #fff; background: rgba(255,255,255,.08); }
.m2-cat-tab.active { color: #fff; background: rgba(108,92,231,.35); border-color: rgba(108,92,231,.5); }

/* ---- Loop Pad (Step Sequencer) ---- */
.lp-panel { flex: 2.5; min-width: 0; }

.lp-grid {
  display: grid;
  gap: 2px;
  width: 100%;
}

.lp-row { display: contents; }

.lp-label {
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 6px;
  gap: 4px;
  white-space: nowrap;
  min-width: 80px;
  cursor: pointer;
  transition: all .15s;
  border-radius: 4px;
}
.lp-label:hover { color: #fff; background: rgba(255,255,255,.04); }

.lp-icon {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  opacity: .8; flex-shrink: 0;
}
.lp-icon svg { width: 100%; height: 100%; fill: currentColor; }

.lp-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  cursor: pointer;
  transition: all .06s;
  border: 1px solid rgba(255,255,255,.04);
  min-width: 0;
  position: relative;
}
.lp-cell:hover {
  border-color: rgba(255,255,255,.3);
  transform: scale(1.15);
  z-index: 2;
}
.lp-cell.on { transform: scale(1.05); }
.lp-cell.beat-marker { border-left: 2px solid rgba(255,255,255,.12); }
.lp-cell.current-beat { box-shadow: 0 0 10px rgba(255,255,255,.5); }

.lp-playhead {
  width: 100%; height: 3px;
  border-radius: 2px; margin-top: 2px;
  background: rgba(255,255,255,.04);
}
.lp-playhead .lp-ph-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #00b894, #55efc4);
  transition: width .04s linear;
  box-shadow: 0 0 6px rgba(0,184,148,.4);
}

/* ---- Mixer Panel ---- */
.mx-panel { flex: 0.8; min-width: 140px; }

.mx-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 6px;
  margin-bottom: 2px;
  transition: background .1s;
}
.mx-strip:hover { background: rgba(255,255,255,.04); }

.mx-name {
  font-size: .65rem; font-weight: 700;
  color: rgba(255,255,255,.6);
  min-width: 46px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.mx-vol {
  flex: 1; height: 4px; -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.1); border-radius: 3px; outline: none;
  cursor: pointer;
}
.mx-vol::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px;
  border-radius: 50%; cursor: pointer;
}
.mx-mute, .mx-solo {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.4);
  font-size: .55rem; font-weight: 900;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: all .1s; font-family: var(--font);
}
.mx-mute:hover, .mx-solo:hover { background: rgba(255,255,255,.12); color: #fff; }
.mx-mute.active { background: rgba(255,77,77,.3); border-color: #ff4d4d; color: #ff4d4d; }
.mx-solo.active { background: rgba(253,203,110,.3); border-color: #fdcb6e; color: #fdcb6e; }

/* ---- Effects Panel ---- */
.fx-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: rgba(0,0,0,.15);
  border-radius: 8px;
  margin-top: 4px;
}
.fx-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fx-label {
  font-size: .68rem; font-weight: 700;
  color: rgba(255,255,255,.5); min-width: 50px;
}
.fx-slider {
  flex: 1; height: 4px; accent-color: #a29bfe;
}
.fx-val {
  font-size: .65rem; font-weight: 800;
  color: rgba(255,255,255,.7); min-width: 24px; text-align: right;
}

/* ---- Song Arranger ---- */
.sa-panel { flex: 1; min-width: 170px; }

.sa-loop-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
}

.sa-loop-chip {
  padding: 5px 8px;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 2px solid transparent;
  transition: all .12s;
}
.sa-loop-chip:hover { border-color: rgba(255,255,255,.25); transform: scale(1.02); }
.sa-loop-chip .sa-lc-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-loop-chip .sa-lc-btn {
  cursor: pointer; opacity: .45; transition: opacity .12s; font-size: .85rem;
}
.sa-loop-chip .sa-lc-btn:hover { opacity: 1; }

.sa-timeline-label {
  font-size: .72rem; font-weight: 800;
  color: rgba(255,255,255,.5); margin: 6px 0 3px;
  display: flex; align-items: center; gap: 5px;
}

.sa-timeline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 50px;
  padding: 5px;
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  border: 2px dashed rgba(255,255,255,.08);
}

.sa-slot {
  padding: 5px 8px; border-radius: 7px;
  font-size: .7rem; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 5px;
  cursor: pointer; transition: all .1s;
}
.sa-slot:hover { filter: brightness(1.2); }
.sa-slot .sa-slot-del { cursor: pointer; opacity: .4; font-size: .8rem; }
.sa-slot .sa-slot-del:hover { opacity: 1; }
.sa-slot .sa-repeat-ctl {
  display: flex; align-items: center; gap: 2px;
  font-size: .6rem; opacity: .7;
}
.sa-slot .sa-repeat-ctl button {
  background: rgba(255,255,255,.1); border: none; color: #fff;
  width: 14px; height: 14px; border-radius: 3px; cursor: pointer;
  font-size: .6rem; font-weight: 900; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--font);
}
.sa-slot .sa-repeat-ctl button:hover { background: rgba(255,255,255,.25); }

.sa-slot-empty {
  padding: 8px; text-align: center;
  font-size: .7rem; color: rgba(255,255,255,.25);
  font-style: italic;
}

/* ---- Keyboard Shortcuts Hint ---- */
.m2-shortcuts {
  padding: 4px 8px;
  font-size: .6rem;
  color: rgba(255,255,255,.25);
  text-align: center;
}
.m2-shortcuts kbd {
  background: rgba(255,255,255,.08);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 800;
  font-family: var(--mono);
  margin: 0 1px;
}

/* ---- Note Bar (Pitch Selector) ---- */
.m2-note-bar {
  padding: 3px 6px;
  background: rgba(0,0,0,.2);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.note-bar-inner {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
}
.note-btn {
  padding: 3px 0;
  min-width: 30px;
  border-radius: 5px;
  font-size: .62rem;
  font-weight: 800;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: all .1s;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  font-family: var(--font);
  text-align: center;
}
.note-btn.black {
  background: rgba(40,30,70,.9);
  color: rgba(255,255,255,.5);
  border-color: rgba(255,255,255,.08);
}
.note-btn:hover { background: rgba(108,92,231,.3); color: #fff; }
.note-btn.active {
  background: rgba(108,92,231,.6);
  border-color: #a29bfe;
  color: #fff;
  box-shadow: 0 0 8px rgba(108,92,231,.4);
  transform: scale(1.1);
}
.note-oct-btn {
  padding: 3px 6px;
  border-radius: 5px;
  font-size: .7rem;
  font-weight: 900;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  font-family: var(--font);
  transition: all .1s;
}
.note-oct-btn:hover { color: #fff; background: rgba(255,255,255,.1); }

/* ---- Cell Note Labels ---- */
.cell-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .48rem;
  font-weight: 900;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  pointer-events: none;
  line-height: 1;
}
.lp-cell { position: relative; }

/* ---- Stylophone Section ---- */
.stylo-section {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.15);
}
.stylo-header {
  padding: 5px 10px;
  font-weight: 800;
  color: #fff;
  font-size: .78rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  background: rgba(255,255,255,.02);
}
/* Make all music-studio dropdowns readable (native <option> defaults to white-on-white) */
.stylo-header select,
.mt-group select,
.music-toolbar select {
  color: #fff;
  background: rgba(255,255,255,.10);
}
.stylo-header select option,
.mt-group select option,
.music-toolbar select option {
  background: #1a1530;
  color: #fff;
}
#styloInst { min-width: 110px; max-width: 160px; }
.lp-sublabel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 18px;
  font-size: .68rem;
  font-weight: 700;
  opacity: .85;
  background: rgba(255,255,255,.015);
}
.lp-subcell { min-height: 18px; }
.lp-subcell.on { opacity: .9; }
.stylo-keys {
  display: flex;
  padding: 6px;
  gap: 2px;
  overflow-x: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: linear-gradient(180deg, rgba(20,15,40,.95), rgba(10,8,25,.98));
  cursor: pointer;
}
.stylo-key {
  flex: 1;
  min-width: 32px;
  height: 70px;
  border-radius: 4px 4px 8px 8px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  font-size: .58rem;
  font-weight: 800;
  color: rgba(80,70,120,.8);
  cursor: pointer;
  transition: all .06s;
  background: linear-gradient(180deg, #d4d0e8, #b8b3d0);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 3px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4);
  touch-action: none;
  position: relative;
}
.stylo-key.black {
  background: linear-gradient(180deg, #2d2545, #1a1530);
  color: rgba(255,255,255,.3);
  height: 50px;
  margin: 0 -8px;
  z-index: 2;
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  min-width: 24px;
  flex: 0.6;
}
.stylo-key:active, .stylo-key.playing {
  background: linear-gradient(180deg, #a29bfe, #6c5ce7) !important;
  color: #fff !important;
  box-shadow: 0 0 15px rgba(108,92,231,.6), inset 0 1px 0 rgba(255,255,255,.3) !important;
  transform: translateY(2px);
}
.stylo-key.black:active, .stylo-key.black.playing {
  background: linear-gradient(180deg, #7c6af0, #5a48d0) !important;
}
.stylo-key span {
  pointer-events: none;
}

/* ---- Responsive ---- */
@media(max-width:700px) {
  .music-panels { flex-direction: column; }
  .mx-panel { min-height: 100px; }
  .sa-panel { min-height: 160px; }
  .lp-label { min-width: 60px; font-size: .6rem; }
  .lp-label span { display: none; }
  .stylo-key { min-width: 28px; height: 60px; }
  .stylo-key.black { height: 42px; }
  .note-btn { min-width: 24px; font-size: .55rem; }
}

/* iPad touch optimization */
@media(pointer: coarse) {
  .stylo-key { min-width: 36px; height: 80px; }
  .stylo-key.black { height: 56px; min-width: 28px; }
  .lp-cell { min-height: 28px; }
  .note-btn { min-width: 34px; padding: 5px 0; font-size: .65rem; }
  .note-oct-btn { padding: 5px 10px; }
}