.loop-browser{font-size:11px;color:#dce0e6;min-width:0}
.loop-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 10px}.loop-heading strong{display:block;font-size:18px;font-weight:650;letter-spacing:-.3px}.loop-heading small{display:block;margin-top:4px;color:#a9aeb8;font-size:10px}.loop-heading button{flex:none}
.loop-guide{color:#b4bac5;line-height:1.6;margin:0 0 13px!important;font-size:11px!important}.loop-filters{display:grid;grid-template-columns:1fr 1.15fr;gap:7px}.loop-filters label{display:grid;gap:5px;color:#aeb7c4;font-size:10px}.loop-filters select{width:100%;min-width:0;height:29px;padding:4px 5px;border:1px solid #161a22;background:#252b35;color:#e4e7ef;box-shadow:inset 0 1px 3px #0005;border-radius:4px;font-size:11px}
.loop-options{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:12px 0 8px}.loop-options label{display:flex;align-items:center;gap:5px;font-size:10px;white-space:nowrap}.loop-options input{accent-color:#b0a4f5;width:13px;height:13px}.loop-options button{font-size:10px!important;padding:4px 6px!important}.loop-options button[aria-pressed=true]{color:#eee9ff;background:#51496e}.loop-list-status{display:flex;justify-content:space-between;gap:8px;color:#a5acb9;font-size:9px;line-height:1.4;margin:7px 0 10px}.loop-list-status span:last-child{text-align:right}
.loop-rows{display:grid;gap:8px}.loop-card{border:1px solid #171c25;border-left:3px solid var(--loop-color);border-radius:5px;padding:9px 9px 8px;background:linear-gradient(#303641,#252b35);box-shadow:0 2px 3px #0004,inset 0 1px #ffffff0b;cursor:grab;overflow:hidden}.loop-card:active{cursor:grabbing}.loop-card:focus-visible{outline:2px solid #b6a8ff;outline-offset:2px}.loop-card.is-playing{border-color:var(--loop-color);box-shadow:inset 0 0 0 1px #ffffff12,0 2px 5px #0005}.loop-row-title{display:flex;align-items:center;justify-content:space-between;gap:6px}.loop-row-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600}.loop-row-title button{flex:none;padding:0 4px!important;font-size:17px!important;min-height:22px!important;line-height:20px!important;background:none!important;box-shadow:none!important;border:0!important;color:#b0b4bf}.loop-row-title button[aria-pressed=true]{color:#efc66c}.loop-meta{display:flex;flex-wrap:wrap;gap:4px 9px;margin:3px 0 7px;color:#aeb9c9;font-size:9px}.loop-meta span:first-child{color:var(--loop-color);font-weight:650}.loop-waveform{width:100%;height:32px;display:block;margin-bottom:6px;background:#151b2470;border-radius:2px}.loop-waveform path{stroke:var(--loop-color);stroke-width:1.8;fill:none;opacity:.75}.is-playing .loop-waveform path{opacity:1}.loop-row-foot{display:flex;justify-content:space-between;align-items:center;gap:4px;flex-wrap:wrap}.loop-row-foot small{color:#98a4b6;font-size:9px}.loop-row-foot>div{display:flex;gap:4px;margin-left:auto}.loop-row-foot button{min-height:24px!important;padding:3px 6px!important;font-size:10px!important;line-height:16px!important;border-radius:3px!important}.loop-row-foot button[aria-pressed=true]{background:#51496e;color:#fff}.loop-row-foot button:disabled{cursor:wait;opacity:.55}.loop-empty{padding:20px 9px;text-align:center;color:#b7c0ce}.loop-empty strong{color:#edf0f5}.loop-credits{font-size:10px!important;line-height:1.6;color:#a7adba;margin:15px 0 3px!important}.loop-credits a{display:block;color:#c3b7fa;text-decoration:underline;margin-top:4px}.loop-drop-target{box-shadow:inset 0 0 0 2px #b4a4f4!important;background-color:#b4a4f422!important}
@media(max-width:600px){.loop-row-foot button{min-height:32px!important}.loop-filters select{height:34px}.loop-options label{min-height:30px}.loop-row-title button{min-height:30px!important}}