.ml-shell { --ml-line: var(--line); padding: 0 0 28px; color: var(--ink); }
.ml-eyebrow { font: 600 10px/1.4 'JetBrains Mono', monospace; letter-spacing: .14em; color: var(--muted); }
.ml-clip-form p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0; }
.ml-upload { position: relative; cursor: pointer; white-space: nowrap; }
.ml-upload.is-busy { opacity: .6; cursor: wait; }
.ml-permission { font-size: 11px; line-height: 1.6; color: var(--muted); margin: 0 0 28px; max-width: 730px; }
.ml-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); border: 1px solid var(--ml-line); border-radius: 15px; overflow: hidden; min-height: 480px; background: var(--surface); }
.ml-catalog { min-width: 0; }
.ml-toolbar { padding: 22px; border-bottom: 1px solid var(--ml-line); }
.ml-tabs { display: flex; gap: 5px; margin-bottom: 16px; }
.ml-tabs button { border: 0; background: transparent; border-radius: 6px; padding: 7px 10px; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.ml-tabs button[aria-pressed=true] { background: #f1ede6; color: var(--ink); font-weight: 600; }
.ml-search { width: 100%; }
.ml-list { padding: 10px; max-height: 620px; overflow-y: auto; }
.ml-song { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 15px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: inherit; cursor: pointer; }
.ml-song:hover { background: var(--bg); }
.ml-song.is-selected { background: #f1ede6; border-color: var(--line-2); }
.ml-art { display: grid; place-items: center; width: 43px; height: 43px; flex-shrink: 0; background: var(--accent-soft); color: var(--accent); font-size: 24px; border-radius: 8px; }
.ml-song-info { flex: 1; min-width: 0; }
.ml-song-info strong, .ml-song-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-song-info strong { font-size: 13px; font-weight: 600; }
.ml-song-info small { margin-top: 5px; font-size: 10px; color: var(--muted); }
.ml-duration { font: 11px 'JetBrains Mono', monospace; color: var(--muted); }
.ml-inspector { padding: 28px; border-left: 1px solid var(--ml-line); background: var(--bg); min-width: 0; }
.ml-inspector h2 { font: var(--title-lg); letter-spacing: -.02em; margin: 10px 0 7px; overflow-wrap: anywhere; }
.ml-origin { font-size: 11px; color: var(--muted); line-height: 1.6; margin-bottom: 22px; }
.ml-inspector audio { width: 100%; height: 40px; margin-bottom: 16px; }
.ml-use { width: 100%; margin-bottom: 24px; }
.ml-clip-form { padding-top: 22px; border-top: 1px solid var(--ml-line); }
.ml-section-label { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.ml-section-label h3 { margin: 0; font-size: 13px; font-weight: 600; }
.ml-section-label span { font: 10px 'JetBrains Mono', monospace; color: var(--muted); }
.ml-range { display: grid; gap: 7px; padding: 20px 0 12px; }
.ml-range label { display: grid; grid-template-columns: 34px 1fr; align-items: center; font-size: 10px; color: var(--muted); gap: 8px; }
.ml-range input { width: 100%; accent-color: var(--accent); }
.ml-bounds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ml-bounds label { display: grid; gap: 6px; font-size: 11px; color: var(--muted); }
.ml-bounds input { width: 100%; }
.ml-selection { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 14px 0 20px; flex-wrap: wrap; }
.ml-selection span { font: 10px 'JetBrains Mono', monospace; color: var(--muted); }
.ml-selection button { font-size: 11px; }
.ml-clip-form .field-label { display: grid; gap: 8px; }
.ml-save { margin-top: 16px; width: 100%; }
.ml-manage { display: flex; justify-content: space-between; margin-top: 25px; }
.ml-manage button { font-size: 11px; color: var(--muted); }
.ml-footer { display: flex; justify-content: space-between; gap: 14px; margin-top: 18px; font-size: 11px; color: var(--muted); }
.ml-empty, .ml-wait { padding: 65px 25px; text-align: center; color: var(--muted); }
.ml-empty > span, .ml-wait > span { font-size: 42px; color: var(--faint); }
.ml-empty h3 { font: var(--title-md); letter-spacing: -.02em; color: var(--ink); }
.ml-empty p, .ml-wait p { font-size: 12px; line-height: 1.7; max-width: 270px; margin: auto; }
.ml-error { color: var(--red); font-size: 12px; padding: 12px; background: var(--red-soft); border-radius: 8px; }
.ml-error[hidden] { display: none; }
.ml-status { padding: 50px 0; color: var(--muted); }
.ml-dialog { border: 1px solid var(--line-2); border-radius: 18px; padding: 26px; width: min(1000px, 94vw); max-height: 90dvh; background: var(--surface); box-shadow: 0 25px 90px rgba(29, 27, 24, .25); }
.ml-dialog::backdrop { background: rgba(29, 27, 24, .4); backdrop-filter: blur(4px); }
.ml-dialog .ml-shell { padding-top: 14px; }
.ml-close { position: absolute; right: 12px; top: 10px; z-index: 1; }
.composer-music { border: 1px solid var(--line-2); border-radius: 10px; padding: 14px; margin-top: 16px; background: var(--bg); }
.composer-music[hidden] { display: none; }
.composer-music-row { display: flex; align-items: center; gap: 12px; }
.composer-music-row span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
.composer-music p { font-size: 11px; color: var(--muted); line-height: 1.6; margin: 9px 0 0; }
.composer-music label { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11px; }
.composer-music input { width: 75px; }
@media (max-width: 750px) {
  
  .ml-upload { font-size: 11px; padding: 10px; }.ml-layout { grid-template-columns: 1fr; }.ml-inspector { border-left: 0; border-top: 1px solid var(--ml-line); padding: 22px; }.ml-list { max-height: 270px; }.ml-footer { flex-direction: column; }.ml-dialog { padding: 18px; }.ml-dialog .ml-head { flex-direction: column; }
}