.clip-editors{display:grid;gap:16px;margin-top:18px}.clip-editor{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.clip-editor h3{margin:0 0 12px}.clip-fragment{padding:12px 0;border-top:1px solid var(--line)}.clip-fragment:first-of-type{border-top:0}.clip-fragment-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.clip-fragment-head b{margin-right:auto}.clip-time{font-variant-numeric:tabular-nums;color:var(--muted)}.clip-wave{position:relative;height:92px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#091119;touch-action:none;transition:border-color .18s,box-shadow .18s,height .18s}.clip-wave canvas{display:block;width:100%;height:100%}.clip-selection{position:absolute;top:0;bottom:0;background:#08d9e62a;border-top:1px solid #08d9e6;border-bottom:1px solid #08d9e6;pointer-events:none}.clip-marker{position:absolute;top:0;bottom:0;width:30px;margin-left:-15px;padding:0;border:0;background:transparent;cursor:ew-resize;touch-action:none}.clip-centering .clip-marker{transition:left .24s cubic-bezier(.22,.61,.36,1)}.clip-marker::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:2px;background:#08d9e6}.clip-marker::after{content:"";position:absolute;left:8px;top:3px;width:14px;height:14px;border-radius:50%;background:#08d9e6;box-shadow:0 0 0 2px #071015}.clip-zoom-label{display:none;position:absolute;right:8px;bottom:6px;padding:3px 7px;border-radius:6px;background:#071015d9;color:#bafaff;font-size:12px;pointer-events:none}.clip-zooming .clip-wave{height:132px;border-color:#08d9e6;box-shadow:0 0 0 2px #08d9e62f}.clip-zooming .clip-zoom-label{display:block}.clip-zooming .clip-marker::before{width:3px;box-shadow:0 0 10px #08d9e6}.clip-zooming .clip-marker::after{width:18px;height:18px;left:7px}.clip-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.clip-actions [data-save].saving{opacity:.72;cursor:wait}.clip-actions [data-save].saved{border-color:#08d9e6;color:#bafaff;background:#0d2730;opacity:1}.clip-help{margin:6px 0 0;color:var(--muted);font-size:13px}@media(max-width:600px){.clip-editor{padding:12px}.clip-wave{height:82px}.clip-zooming .clip-wave{height:124px}.clip-fragment-head{align-items:flex-start;flex-wrap:wrap}.clip-fragment-head b{width:100%}}
.clip-overview{position:fixed;z-index:50;width:min(520px,calc(100vw - 24px));padding:8px;border:1px solid #31505e;border-radius:10px;background:#0a141bf5;box-shadow:0 12px 35px #000a;opacity:0;visibility:hidden;transform:translate(-50%,calc(-100% - 4px)) scale(.98);transform-origin:center bottom;transition:opacity .16s ease,transform .18s ease,visibility 0s linear .18s;pointer-events:none;backdrop-filter:blur(10px)}.clip-zooming .clip-overview{opacity:1;visibility:visible;transform:translate(-50%,calc(-100% - 4px)) scale(1);transition:opacity .16s ease,transform .18s ease}.clip-overview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:6px;color:var(--muted);font-size:12px}.clip-overview-time{color:#bafaff;font-variant-numeric:tabular-nums}.clip-overview-wave{position:relative;height:48px;overflow:hidden;border-radius:7px;background:#071015}.clip-overview-wave canvas{display:block;width:100%;height:100%}.clip-overview-selection{position:absolute;inset-block:0;background:#08d9e61f;border-inline:1px solid #08d9e6;pointer-events:none}.clip-overview-wave i{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#667b86;pointer-events:none}.clip-overview-wave i.active{width:3px;background:#08d9e6;box-shadow:0 0 8px #08d9e6}
.clip-wave{height:176px}.clip-zooming .clip-wave{height:176px}@media(max-width:600px){.clip-wave,.clip-zooming .clip-wave{height:164px}}
.clip-playhead{position:absolute;z-index:5;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 7px #08d9e6;opacity:0;pointer-events:none;transition:opacity .1s}.clip-playhead.visible{opacity:1}.clip-playhead::after{content:"";position:absolute;top:35px;left:50%;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #08d9e6;transform:translate(-50%,-50%)}
.clip-marker{z-index:6}.clip-marker::after{content:"🔓";display:grid;place-items:center;left:3px;top:3px;width:24px;height:24px;border:1px solid #08d9e6;border-radius:7px;background:#071015;color:#bafaff;font-size:13px;line-height:1;box-shadow:0 0 0 2px #071015}.clip-marker[data-locked="true"]::after{content:"🔒";background:#08d9e6;color:#041317}.clip-marker[data-locked="true"]::before{background:#5d747e}
.clip-move-handle{position:absolute;z-index:8;top:0;left:50%;width:76px;height:38px;padding:0;border:0;background:transparent;transform:translate(-50%,-15px);cursor:grab;touch-action:none;pointer-events:auto!important}.clip-move-handle::before{content:"";position:absolute;top:11px;left:50%;width:58px;height:8px;border-radius:999px;background:#bafaff;box-shadow:0 0 0 2px #071015,0 0 10px #08d9e699;transform:translateX(-50%)}.clip-moving .clip-move-handle{cursor:grabbing}.clip-moving .clip-move-handle::before{background:#fff;box-shadow:0 0 0 2px #071015,0 0 14px #08d9e6}