:root{
  --accent-pink:#e88697;
  --accent-turquoise:#00b4ce;
  --play-yellow:#ffd54f;
}

/* Base */
body{
  background:#f8f9fa;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Buttons */
.btn-outline-primary{color:var(--accent-turquoise);border-color:var(--accent-turquoise)}
.btn-outline-primary:hover{background:var(--accent-turquoise);color:#fff}
.btn-success{background:var(--accent-turquoise)!important;border-color:var(--accent-turquoise)!important}
.btn-success:hover{background:#00a4bc!important}
.btn-secondary{background:var(--accent-pink)!important;border-color:var(--accent-pink)!important}
.btn-secondary:hover{background:#d37686!important}

/* Composer (sticky under navbar) */
.composer{
  position: sticky;
  top: 56px;
  z-index: 1030;
  background: #ffffffc9;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e9ecef;
}
@media (min-width: 992px){
  .composer{ top: 64px; }
}

/* Composer title */
.composer-title{ font-weight:700; letter-spacing:.02em; }
@media (max-width: 767.98px){
  .composer-title{ font-size:1rem; }
}

/* Mobile compaction */
@media (max-width: 767.98px){
  .composer .container{ padding-top:.4rem; padding-bottom:.4rem; }
  .composer .form-label{ display:none; }
  .composer .btn, .composer .form-select, .composer .form-control{
    padding:.3rem .5rem; font-size:.9rem;
  }
  #composerFilters{ margin-top:.35rem; }
}

/* Suggestions chips */
#suggestions .chip{
  background:#fff;border:1px solid #dee2e6;border-radius:999px;
  padding:.25rem .75rem;font-size:.9rem;cursor:pointer;white-space:nowrap;
}
#suggestions .chip.active{background:var(--accent-turquoise);color:#fff;border-color:var(--accent-turquoise)}
#suggestions .chip:hover{background:#f1f3f5}
.scroller{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Panels */
.panel-col{ transition: box-shadow .15s ease, opacity .15s ease; }

/* Collapse chevron rotate */
.collapse-toggle .chev{ display:inline-block; transition: transform .15s ease; }
.collapse-toggle.collapsed .chev{ transform: rotate(-90deg); }

/* SVG containers */
.svg-wrapper{width:100%;margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
.fretboard-container svg{width:100%;height:auto;display:block}
.keyboard-container svg,
.notation-container svg{width:100%;height:auto;display:block}
.notation-container{max-width:100%;overflow-x:hidden}

/* Hide any svguitar title if it sneaks in */
.fretboard-container .title, .fretboard-container .svguitar__title { display:none !important; }

/* Mini player */
.mini-player{
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e9ecef;
  padding: .5rem 0;
  z-index: 1030;
}

/* Dropdown menus should float above sticky bars */
.card .dropdown-menu{
  z-index: 1055; /* higher than navbar(1031) & composer(1030) */
}

/* Offcanvas already high, but nudge to be safe */
.offcanvas{ z-index: 1060; }

/* Dropdown menu controls */
.dropdown-menu .form-check{ line-height: 1.1; }
.dropdown-menu .form-select{ margin-top:.25rem; }

/* Range sliders */
.form-range{ height: 1.5rem; }

/* Reorder list */
#reorderList .list-group-item{
  display:flex; align-items:center; gap:.5rem;
}
.reorder-name{ flex:1; }
.reorder-btns .btn{ padding:.2rem .45rem; }
.reorder-switch{ display:flex; align-items:center; gap:.4rem; }

/* --- Tablet overlap fix (md: 768–991px) --- */
@media (min-width: 768px) and (max-width: 991.98px){
  /* give the row a bit more vertical room */
  .composer .row.g-2.align-items-end { row-gap: .4rem; }

  /* put the Mode group on its own line */
  .composer .row.g-2.align-items-end > .col-md-2:first-child{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* put the right-side utility buttons on their own line too */
  .composer .row.g-2.align-items-end > .col-md-5{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
  }

  /* compact controls slightly on tablets */
  .composer .btn,
  .composer .form-select,
  .composer .form-control{
    padding: .35rem .55rem;
    font-size: .95rem;
  }

  /* ensure the two mode buttons share width nicely */
  .composer .btn-group.w-100 > .btn{
    flex: 1 1 0;
  }
}