.tl-root{--tl-row-h:48px;--tl-gap:6px;--tl-event-h:22px;--tl-bg:#0f172a;--tl-panel:#0b1220;--tl-grid:#1f2937;--tl-text:#e5e7eb;--tl-accent:#3b82f6;--tl-sel:#22c55e;--tl-now:#ef4444; font:13px/1.3 system-ui, -apple-system, Segoe UI, Roboto; color:var(--tl-text);}
.tl-root, .tl-root *{box-sizing:border-box}
.tl-container{display:flex; border:1px solid #111827; border-radius:10px; overflow:hidden; background:linear-gradient(120deg,#0b1220,#111827)}
.tl-sidebar{min-width:220px; border-right:1px solid #111827; background:rgba(255,255,255,.03)}
.tl-sidebar .tl-row-label{height:var(--tl-row-h); display:flex; align-items:center; padding:0 10px; border-bottom:1px solid rgba(255,255,255,.06); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tl-main{position:relative; overflow:auto; width:100%}
.tl-header{position:sticky; top:0; background:rgba(255,255,255,.04); backdrop-filter: blur(6px); border-bottom:1px solid rgba(255,255,255,.08); z-index:3}
.tl-scale{position:relative; height:32px;}
.tl-scale .tl-tick{position:absolute; top:0; height:100%; border-left:1px solid var(--tl-grid); padding-left:4px; font-size:12px; display:flex; align-items:center; background:transparent}
.tl-body{position:relative;}
.tl-grid{position:absolute; inset:0; pointer-events:none}
.tl-grid .tl-v{position:absolute; top:0; bottom:0; border-left:1px dashed rgba(255,255,255,.08)}
.tl-grid .tl-h{position:absolute; left:0; right:0; border-top:1px solid rgba(255,255,255,.06)}
.tl-row{position:relative; height:var(--tl-row-h);}
.tl-row .tl-track{position:relative; height:100%}
.tl-event{position:absolute; height:var(--tl-event-h); border-radius:8px; background:rgba(59,130,246,.25); border:1px solid rgba(59,130,246,.6); backdrop-filter: blur(4px); padding:2px 8px; display:flex; align-items:center; gap:6px; cursor:grab; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tl-event.selected{outline:2px solid var(--tl-sel)}
.tl-grip{width:6px; cursor:ew-resize; background:rgba(255,255,255,.15); height:100%; border-radius:6px}
.tl-grip.left{margin-right:6px}
.tl-grip.right{margin-left:6px}
.tl-now{position:absolute; top:0; bottom:0; width:2px; background:var(--tl-now); z-index:2}
.tl-ghost{position:absolute; opacity:.6; pointer-events:none}
.tl-create-range{position:absolute; height:calc(var(--tl-event-h) + 4px); background:rgba(34,197,94,.18); border:1px solid rgba(34,197,94,.6); border-radius:8px}
.tl-toolbar{display:flex; gap:8px; padding:8px; border-bottom:1px solid rgba(255,255,255,.06)}
.tl-btn{border:1px solid rgba(255,255,255,.14); border-radius:8px; background:transparent; color:inherit; padding:6px 10px; cursor:pointer}
.tl-badge{display:inline-block; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.08); font-size:12px}