.mg-db{max-width:960px;margin:0 auto;font-family:inherit}
.mg-db-intro{margin-bottom:1.5rem}
.mg-db-intro h2{margin-bottom:.4rem}
.mg-db-empty{padding:2rem;text-align:center;color:#646970}

.mg-db-toolbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 1rem}
.mg-db-toolbar label{font-weight:600}
.mg-db-toolbar select,.mg-db-toolbar input[type=search]{padding:.35rem .5rem;border:1px solid #c3c7cc;border-radius:4px}

.mg-db-button{display:inline-block;padding:.45rem .9rem;border-radius:4px;border:1px solid #1d2327;background:#1d2327;color:#fff;cursor:pointer;font-size:.95em;text-decoration:none}
.mg-db-button:hover{background:#2c3338}
.mg-db-button-secondary{background:#fff;color:#1d2327}
.mg-db-button-secondary:hover{background:#f0f0f1}
.mg-db-button:disabled{opacity:.5;cursor:default}

.mg-db-hint{color:#646970;font-size:.92em;margin:.3rem 0}

.mg-db-pagination{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:.8rem 0}
.mg-db-pagination a,.mg-db-pagination-current{padding:.25rem .6rem;border:1px solid #c3c7cc;border-radius:3px;text-decoration:none;color:inherit}
.mg-db-pagination-current{background:#1d2327;color:#fff;border-color:#1d2327}
.mg-db-pagination-gap{padding:0 .3rem;color:#787c82}

.mg-db-list{list-style:none;margin:1rem 0;padding:0;border:1px solid #dcdcde;border-radius:8px;overflow:hidden;background:#fff}
.mg-db-list-row{border-bottom:1px solid #ececec}
.mg-db-list-row:last-child{border-bottom:none}
.mg-db-list-row .mg-db-preview{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:.7rem 1rem;border:none;background:none;cursor:pointer;text-align:left;font:inherit;color:#1d2327;transition:background .1s}
.mg-db-list-row .mg-db-preview:hover,.mg-db-list-row .mg-db-preview:focus-visible{background:#f6f7f7;outline:none}
.mg-db-list-title{font-weight:600;color:#1d2327}
.mg-db-list-action{font-size:.85em;color:#646970;white-space:nowrap}
li.mg-db-hint{list-style:none;padding:.9rem 1rem}

.mg-db-modal[hidden]{display:none}
.mg-db-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px;padding:4svh 16px}
.mg-db-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.mg-db-modal-dialog{position:relative;background:#fff;max-width:720px;width:100%;max-height:92vh;max-height:92svh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,.3);padding:1.5rem}
.mg-db-modal-close{position:absolute;top:.5rem;right:.6rem;background:none;border:none;font-size:1.8rem;line-height:1;cursor:pointer;color:#555}
.mg-db-modal-close:hover{color:#000}

.mg-db-status{margin:.4rem 0;font-weight:600}
.mg-db-audio-controls{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.6rem 0}
.mg-db-playback-progress{width:140px;height:8px;vertical-align:middle}
.mg-db-notation-box{background:#fff;border:1px solid #ddd;border-radius:6px;min-height:120px;padding:.6rem;overflow:visible}

.mg-db-additional{margin-top:1rem;border-top:1px solid #dcdcde;padding-top:.8rem}
.mg-db-additional-tune{border:1px solid #dcdcde;border-radius:6px;padding:.5rem .7rem;margin-bottom:.5rem}
.mg-db-additional-tune summary{cursor:pointer;font-weight:600}
.mg-db-additional-tune .mg-db-notation-box{margin-top:.5rem}

body.mg-db-modal-open{overflow:hidden}

@media(max-width:600px){
  .mg-db-list-row .mg-db-preview{flex-direction:column;align-items:flex-start;gap:.2rem}
  .mg-db-modal-dialog{padding:1rem}
}