color:#ccc; font:12px/1.5 Arial,sans-serif;
[hidden] { display:none!important; }
.reference { padding:14px 0; }
.drop-area { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:100px; padding:14px; border:1px dashed #393939; border-radius:8px; text-align:center; cursor:pointer; }
.drop-area[data-over=true] { border-color:#ddd; background:#0d0d0d; }
[data-file-name] { overflow-wrap:anywhere; }
.help,.reference-status { color:#999; font:11px/1.6 ui-monospace,monospace; margin:5px 0; }
.reference-status:empty { display:none; }
button,summary { min-height:44px; padding:8px 10px; color:#ccc; background:none; border:0; font:12px ui-monospace,monospace; cursor:pointer; }
button:disabled { opacity:.45; cursor:not-allowed; }
.reference-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; }
[data-remove] { margin-left:auto; }
.reference-player { display:flex; align-items:center; gap:12px; font:11px ui-monospace,monospace; }
.reference-player button { min-width:65px; text-align:left; padding-left:0; }
input[type=range] { flex:1; width:100%; min-width:30px; height:44px; accent-color:#eee; }
summary { padding-left:0; color:#aaa; }
.trim-controls { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.trim-controls label { display:flex; align-items:center; gap:8px; }
input[type=number] { width:72px; min-height:44px; background:#0d0d0d; color:#eee; border:0; border-bottom:1px solid #555; padding:8px; font:16px ui-monospace,monospace; }
:focus-visible { outline:2px solid #ddd; outline-offset:3px; }
@media(max-width:400px) { .reference-player { gap:8px; } }