:root{--bg: #11131a;--panel: #1a1d27;--panel-2: #232735;--border: #2a2f40;--text: #e6e8ef;--muted: #8a90a3;--accent: #89b4fa;--accent-2: #f5c2e7;--danger: #f38ba8;--green: #a6e3a1;--yellow: #f9e2af;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{background:var(--bg);color:var(--text);overflow:hidden}#app{display:grid;grid-template-rows:44px 1fr 280px;grid-template-columns:280px 1fr 280px;grid-template-areas:"topbar topbar topbar" "library preview inspector" "timeline timeline timeline";height:100vh}.topbar{grid-area:topbar;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--border)}.topbar h1{font-size:13px;margin:0;font-weight:600;letter-spacing:.5px}.topbar .spacer{flex:1}.topbar .status{color:var(--muted);font-size:12px}button,.btn,select,input[type=file]{background:var(--panel-2);color:var(--text);border:1px solid var(--border);padding:6px 10px;border-radius:6px;font-size:12px;cursor:pointer}button:hover{background:#2c3144}button.primary{background:var(--accent);color:#11131a;border-color:transparent;font-weight:600}button.primary:hover{background:#a4c5fc}button.danger{color:var(--danger)}button:disabled{opacity:.5;cursor:not-allowed}input[type=text],input[type=number],input[type=color],select{background:var(--panel-2);color:var(--text);border:1px solid var(--border);padding:4px 6px;border-radius:4px;font-size:12px;width:100%}input[type=range]{width:100%}.panel{background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.panel h2{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--border)}.panel .body{padding:10px 12px;overflow:auto;flex:1}.library{grid-area:library}.inspector{grid-area:inspector;border-right:0;border-left:1px solid var(--border)}.preview{grid-area:preview;background:#06080d;display:flex;flex-direction:column;overflow:hidden}.preview .canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#0a0c14 0% 25%,#10131c 0% 50%) 50% / 24px 24px}#previewCanvas{max-width:100%;max-height:100%;background:#000;box-shadow:0 0 0 1px var(--border),0 8px 30px #0006}.preview .transport{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel);border-top:1px solid var(--border)}.preview .transport .time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px;min-width:110px}.timeline{grid-area:timeline;background:var(--panel);border-top:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.timeline .toolbar{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--border)}.timeline .ruler{height:22px;position:relative;background:#15182111;border-bottom:1px solid var(--border);overflow:hidden}.timeline .ruler-tick{position:absolute;top:0;bottom:0;border-left:1px solid #2a2f40;color:var(--muted);font-size:10px;padding-left:4px;font-variant-numeric:tabular-nums}.timeline .tracks-scroll{flex:1;overflow:auto;position:relative}.timeline .track{display:flex;align-items:stretch;border-bottom:1px solid var(--border);min-height:56px}.track-header{width:140px;flex:none;background:var(--panel-2);border-right:1px solid var(--border);padding:6px 8px;display:flex;flex-direction:column;justify-content:center;gap:4px;position:sticky;left:0;z-index:2}.track-header .name{font-size:12px;font-weight:600}.track-header .meta{font-size:10px;color:var(--muted);display:flex;gap:6px;align-items:center}.track-header button{padding:2px 6px;font-size:10px}.track-lane{position:relative;flex:1;background:linear-gradient(0deg,#15182188,#15182188),repeating-linear-gradient(90deg,transparent 0 79px,#ffffff08 79px 80px);min-width:100%;cursor:crosshair}.clip{position:absolute;top:6px;bottom:6px;border-radius:4px;background:linear-gradient(180deg,#3c4866,#2a334a);border:1px solid #4a5778;box-shadow:0 1px #ffffff10 inset;color:#e6e8ef;font-size:11px;padding:4px 8px;overflow:hidden;cursor:grab;user-select:none;white-space:nowrap;text-overflow:ellipsis}.clip.audio{background:linear-gradient(180deg,#2f4a3a,#21372b);border-color:#3f6a52}.clip.title{background:linear-gradient(180deg,#5a4470,#3f3050);border-color:#7a5e94}.clip.effect{background:linear-gradient(180deg,#6b4a30,#4a3320);border-color:#8b6a48}.clip.selected{outline:2px solid var(--accent);outline-offset:-2px}.clip .handle{position:absolute;top:0;bottom:0;width:6px;cursor:ew-resize;background:#ffffff14}.clip .handle.left{left:0;border-radius:4px 0 0 4px}.clip .handle.right{right:0;border-radius:0 4px 4px 0}.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--danger);pointer-events:none;z-index:5;box-shadow:0 0 6px var(--danger)}.lib-item{display:flex;align-items:center;gap:8px;padding:6px;border-radius:4px;cursor:grab;border:1px solid transparent;font-size:12px}.lib-item:hover{background:var(--panel-2);border-color:var(--border)}.lib-item .thumb{width:48px;height:28px;background:#000;border-radius:3px;flex:none;background-size:cover;background-position:center}.lib-item .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lib-item .dur{color:var(--muted);font-size:10px}.row{display:flex;gap:6px;align-items:center;margin-bottom:6px}.row label{font-size:11px;color:var(--muted);min-width:70px}.section-title{font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:1px;margin:8px 0 6px}.toast{position:fixed;bottom:16px;left:50%;transform:translate(-50%);background:var(--panel-2);border:1px solid var(--border);padding:8px 14px;border-radius:6px;font-size:12px;z-index:1000;box-shadow:0 6px 20px #0006}.hidden{display:none!important}