/* 彩剪 COLORCUT v77 · 03-timeline.css */
#tl{height:236px;flex:none;border-top:1px solid var(--line);display:flex;flex-direction:column;background:var(--bg2)}
#toolbar{height:42px;flex:none;display:flex;align-items:center;gap:4px;padding:0 6px;border-bottom:1px solid var(--line);position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
#toolbar::-webkit-scrollbar{display:none}
#toolbar::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,162,74,.15),transparent)}
.tbtn{flex:none;height:28px;padding:0 8px;border:1px solid transparent;background:none;color:var(--ink2);display:inline-flex;gap:4px;align-items:center;font-size:12px;white-space:nowrap;transition:.15s}
.tbtn:hover{color:var(--gold);border-color:var(--line2)}
.tbtn.on{color:var(--gold);border-color:var(--gold)}
.tsep{flex:none;width:1px;height:18px;background:linear-gradient(180deg,transparent,var(--line2),transparent);margin:0 3px}
#toolbar .sp{flex:1}
#zoomLbl{flex:none;font-family:var(--mono);font-size:10px;color:var(--ink3);min-width:52px;text-align:center;white-space:nowrap}
#tlBody{flex:1;display:flex;min-height:0}
#trackHeads{width:56px;flex:none;border-right:1px solid var(--line);background:var(--panel)}
#trackHeads div{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--gold-dim);border-bottom:1px solid var(--line)}
#trackHeads .hr{height:28px}
#trackHeads .hv{height:84px;color:var(--gold)}
#trackHeads .ht{height:36px}
#trackHeads .ha{height:46px;border-bottom:none}
#tlScroll{flex:1;overflow-x:auto;overflow-y:hidden;position:relative}
#tlContent{position:relative;height:100%;min-width:100%}
#ruler{display:block;height:28px;cursor:ew-resize}
.track{position:relative;border-bottom:1px solid var(--line);background:repeating-linear-gradient(90deg,transparent 0,transparent 59px,rgba(212,162,74,.04) 59px,rgba(212,162,74,.04) 60px)}
#trackV{height:84px}
#trackT{height:36px}
#trackA{height:46px;border-bottom:none}
.track.dropping{background-color:rgba(212,162,74,.08)}
.clip{position:absolute;top:4px;bottom:4px;background:linear-gradient(180deg,#221e14,#1a1710);border:1px solid #4a3d20;overflow:hidden;cursor:grab;user-select:none;border-radius:3px;transition:box-shadow .15s,border-color .15s}
.clip:active{cursor:grabbing}
.clip.sel{border-color:var(--gold-hi);box-shadow:0 0 0 1px var(--gold-hi),0 0 18px rgba(212,162,74,.22)}
.clip.bad{border-color:#b53a2e}
.clip .thumb{position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:repeat-x;background-size:auto 100%;opacity:.9}
.clip .lab{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(8,7,5,.85) 30%);color:#d8cba6;font-size:10px;font-family:var(--mono);padding:4px 6px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip .lab b{color:var(--gold-hi)}
.clip.bad .lab b{color:#e06a5e}
.clip.txt{background:linear-gradient(180deg,#2a2210,#1e1a0c);border-color:#6a5220}
.clip.txt .lab{position:static;background:none;padding:0 8px;line-height:26px;font-family:var(--serif);font-size:12px;color:var(--gold-hi)}
.clip.aud{background:linear-gradient(180deg,#161c14,#10150e);border-color:#3a4a34}
.clip.aud .wave{position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:repeat-x;background-size:auto 100%;opacity:.85}
.clip .hd{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize;z-index:3}
.clip .hd.l{left:0}.clip .hd.r{right:0}
.clip.sel .hd::after{content:'';position:absolute;top:20%;bottom:20%;width:2px;background:var(--gold-hi)}
.clip.sel .hd.l::after{left:2px}.clip.sel .hd.r::after{right:2px}
.clip .spd{position:absolute;right:3px;top:2px;background:rgba(8,7,5,.8);color:var(--gold);font-family:var(--mono);font-size:9px;padding:1px 4px;border-radius:2px}
#ph{position:absolute;top:28px;bottom:0;width:1px;background:linear-gradient(180deg,#f6da8e 0%,#ff5fa8 35%,#c06aff 65%,#4ad0ff 90%,rgba(74,208,255,.08) 100%);z-index:8;pointer-events:none;box-shadow:0 0 8px rgba(255,95,168,.45),0 0 16px rgba(122,92,255,.3)}
#ph::before{content:'';position:absolute;top:-8px;left:-5px;border:5.5px solid transparent;border-top:8px solid var(--gold-hi)}