:root{
    --bg:#141418; --panel:#1c1c22; --panel2:#232330; --head:#26262f; --line:#33333f; --line2:#3d3d4a;
    --ink:#e7e7ee; --muted:#9a9aab; --faint:#6d6d7c;
    --accent:#5b8cff; --accent2:#8b6cff; --sel:#6f8cff; --danger:#ff6b6b; --ok:#41c98a; --warn:#f2b04a;
    --vclip:#3a5a9a; --vclip2:#46689f; --aclip:#2f7d5b; --aclip2:#38916a; --tclip:#8a5aad; --tclip2:#9a6abf;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; }
  body{ background:var(--bg); color:var(--ink); font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; font-size:13px; overflow:hidden; user-select:none; -webkit-user-select:none; }
  button{ font:inherit; color:inherit; cursor:pointer; }
  .ve-app{ display:flex; flex-direction:column; height:100vh; }
  /* topbar */
  .ve-top{ display:flex; align-items:center; gap:10px; padding:7px 12px; background:linear-gradient(180deg,#202028,#1a1a20); border-bottom:1px solid var(--line); flex:none; }
  .ve-logo{ font-weight:800; letter-spacing:.3px; display:flex; align-items:center; gap:8px; }
  .ve-logo b{ background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .ve-proj{ background:#15151b; border:1px solid var(--line); border-radius:6px; color:var(--ink); padding:4px 9px; font-size:12.5px; width:200px; }
  .ve-spacer{ flex:1; }
  .ve-btn{ background:var(--panel2); border:1px solid var(--line2); border-radius:7px; padding:6px 12px; color:var(--ink); display:inline-flex; align-items:center; gap:6px; font-size:12.5px; white-space:nowrap; }
  .ve-btn:hover{ background:#2c2c3a; }
  .ve-btn.pri{ background:linear-gradient(180deg,var(--accent),#4574e6); border-color:#4b78e0; color:#fff; font-weight:700; }
  .ve-btn.pri:hover{ filter:brightness(1.08); }
  .ve-btn svg{ width:15px; height:15px; }
  .ve-btn.icon{ padding:6px 8px; }
  /* main grid */
  .ve-main{ flex:1; display:grid; grid-template-columns:250px 1fr 268px; grid-template-rows:minmax(0,1fr); min-height:0; }
  .ve-panel{ background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
  .ve-panel:last-child{ border-right:0; border-left:1px solid var(--line); }
  .ve-ph{ padding:7px 11px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); background:var(--head); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; flex:none; }
  .ve-ph .sp{ flex:1; }
  .ve-ph button{ background:none; border:0; color:var(--muted); font-size:11px; padding:2px 4px; border-radius:4px; }
  .ve-ph button:hover{ color:var(--ink); background:#ffffff12; }
  /* media bin */
  .ve-binbody{ flex:1; overflow:auto; padding:8px; }
  .ve-drop{ border:1.5px dashed var(--line2); border-radius:9px; padding:16px 10px; text-align:center; color:var(--muted); font-size:12px; margin-bottom:8px; transition:.15s; }
  .ve-drop.hot{ border-color:var(--accent); background:#5b8cff18; color:var(--ink); }
  .ve-asset{ display:flex; gap:8px; align-items:center; padding:6px; border-radius:8px; margin-bottom:5px; background:#00000022; border:1px solid transparent; cursor:grab; }
  .ve-asset:hover{ background:#ffffff0e; border-color:var(--line); }
  .ve-asset canvas,.ve-asset .noth{ width:52px; height:32px; border-radius:5px; background:#0c0c11; object-fit:cover; flex:none; display:flex; align-items:center; justify-content:center; color:var(--faint); }
  .ve-asset .am{ min-width:0; flex:1; }
  .ve-asset .an{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ve-asset .as{ font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
  .ve-badge{ font-size:9px; text-transform:uppercase; letter-spacing:.04em; padding:1px 4px; border-radius:3px; background:#ffffff18; color:var(--muted); }
  /* monitor */
  .ve-mon{ background:#0d0d11; display:flex; flex-direction:column; min-height:0; min-width:0; }
  .ve-stage{ position:relative; flex:1; display:flex; align-items:center; justify-content:center; min-height:0; min-width:0; padding:12px; background:#08080b; overflow:hidden; }
  .ve-montab{ background:none; border:0; color:var(--faint); font:inherit; font-size:11px; cursor:pointer; padding:2px 9px; border-radius:5px; }
  .ve-montab.on{ background:var(--accent); color:#fff; }
  .ve-src-stage{ position:absolute; inset:0; display:none; flex-direction:column; background:#000; z-index:6; }
  .ve-src-view{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .ve-src-view video, .ve-src-view img{ max-width:100%; max-height:100%; object-fit:contain; }
  .ve-src-bar{ flex:none; background:var(--panel); border-top:1px solid var(--line); padding:6px 9px; display:flex; flex-direction:column; gap:6px; }
  .ve-src-band{ position:relative; height:6px; background:#0c0c12; border-radius:4px; }
  .ve-src-band i{ position:absolute; top:0; bottom:0; background:rgba(91,140,255,.35); border-left:2px solid #5b8cff; border-right:2px solid #5b8cff; }
  .ve-src-row{ display:flex; align-items:center; gap:6px; }
  .ve-src-row .mini{ background:#1a1a22; border:1px solid var(--line2); color:var(--ink); font:inherit; font-size:11px; border-radius:5px; padding:3px 8px; cursor:pointer; }
  .ve-src-row .mini:hover{ border-color:var(--accent); }
  .ve-src-row .mini.pri{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .ve-lane-hd .lc button.tgt-on{ color:var(--accent2,#e08a2b); }
  .ve-canvas-wrap{ position:relative; width:100%; height:100%; min-height:0; display:flex; align-items:center; justify-content:center; }
  #veCanvas{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; background:#000; box-shadow:0 4px 24px #000a; }
  .ve-transport{ flex:none; background:var(--panel); border-top:1px solid var(--line); padding:7px 10px; display:flex; flex-direction:column; gap:6px; }
  .ve-scrub{ position:relative; height:10px; }
  .ve-scrub input{ position:absolute; inset:0; width:100%; margin:0; accent-color:var(--accent); }
  .ve-tr-row{ display:flex; align-items:center; gap:8px; }
  .ve-tc{ font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--ink); background:#0c0c11; border:1px solid var(--line); border-radius:5px; padding:2px 8px; }
  .ve-tc .tot{ color:var(--muted); }
  .ve-tbtn{ background:none; border:0; color:var(--ink); padding:4px; border-radius:6px; display:inline-flex; }
  .ve-tbtn:hover{ background:#ffffff12; }
  .ve-tbtn.on{ color:var(--accent); }
  .ve-tbtn svg{ width:17px; height:17px; }
  .ve-tbtn.play svg{ width:22px; height:22px; }
  /* inspector */
  .ve-insp{ flex:1; overflow:auto; padding:10px; }
  .ve-none{ color:var(--faint); font-size:12px; text-align:center; padding:26px 8px; line-height:1.5; }
  .ve-grp{ margin-bottom:12px; }
  .ve-grp-h{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); margin:0 0 6px; border-bottom:1px solid var(--line); padding-bottom:4px; }
  .ve-row{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
  .ve-row label{ flex:0 0 84px; color:var(--muted); font-size:11.5px; }
  .ve-row input[type=range]{ flex:1; accent-color:var(--accent); min-width:0; }
  .ve-row input[type=number],.ve-row input[type=text],.ve-row select{ flex:1; min-width:0; background:#111117; border:1px solid var(--line); border-radius:5px; color:var(--ink); padding:4px 7px; font:inherit; font-size:12px; }
  .ve-row input[type=color]{ width:34px; height:26px; padding:0; border:1px solid var(--line); border-radius:5px; background:#111117; }
  .ve-row .val{ flex:0 0 46px; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); font-size:11.5px; }
  .ve-kf{ flex:0 0 auto; background:none; border:1px solid var(--line2); border-radius:4px; color:var(--faint); font-size:10px; padding:1px 4px; line-height:1; }
  .ve-kf.on{ color:var(--accent); border-color:var(--accent); background:#5b8cff22; }
  #veMeter{ width:60px; height:12px; background:#0c0c11; border:1px solid var(--line); border-radius:3px; }
  #veCurIn{ width:96px; background:#0c0c11; border:1px solid var(--line); border-radius:5px; color:var(--ink); font:inherit; font-size:12px; font-variant-numeric:tabular-nums; padding:2px 6px; text-align:center; }
  /* timeline */
  .ve-tl{ flex:none; height:246px; background:var(--panel); border-top:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
  .ve-tlbar{ display:flex; align-items:center; gap:6px; padding:5px 9px; border-bottom:1px solid var(--line); background:var(--head); flex:none; }
  .ve-tool{ background:var(--panel2); border:1px solid var(--line2); border-radius:6px; padding:4px 8px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; font-size:12px; }
  .ve-tool.on{ background:#2d4373; border-color:var(--accent); color:#fff; }
  .ve-tool svg{ width:14px; height:14px; }
  .ve-tl-scroll{ flex:1; overflow:auto; position:relative; }
  .ve-ruler{ position:sticky; top:0; height:22px; background:#191921; border-bottom:1px solid var(--line); z-index:6; font-size:9.5px; color:var(--muted); }
  .ve-ruler .tick{ position:absolute; top:0; height:100%; border-left:1px solid var(--line2); padding-left:3px; font-variant-numeric:tabular-nums; }
  .ve-lanes{ position:relative; }
  .ve-lane{ position:relative; border-bottom:1px solid var(--line); height:52px; }
  .ve-lane.audio{ height:44px; }
  .ve-lane-hd{ position:sticky; left:0; z-index:5; width:74px; height:100%; background:#20202a; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; padding:0 8px; float:left; }
  .ve-lane-hd .ln{ font-weight:700; font-size:12px; }
  .ve-lane-hd .lc{ display:flex; gap:5px; margin-top:2px; }
  .ve-lane-hd .lc button{ background:none; border:0; color:var(--faint); padding:1px; }
  .ve-lane-hd .lc button.on{ color:var(--accent); }
  .ve-lane-hd .lc button.mute-on{ color:var(--danger); }
  .ve-lane-area{ position:absolute; left:74px; top:0; right:0; height:100%; }
  .ve-clip{ position:absolute; top:3px; bottom:3px; border-radius:6px; overflow:hidden; border:1px solid #0006; cursor:grab; display:flex; flex-direction:column; box-shadow:0 1px 3px #0006; }
  .ve-clip .cl-t{ font-size:10.5px; padding:2px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; text-shadow:0 1px 2px #0008; }
  .ve-clip .cl-wave{ flex:1; opacity:.5; }
  .ve-clip.sel{ border-color:#fff; box-shadow:0 0 0 2px var(--sel); z-index:3; }
  .ve-clip .cl-h{ position:absolute; top:0; bottom:0; width:7px; cursor:ew-resize; z-index:2; }
  .ve-clip .cl-h.l{ left:0; } .ve-clip .cl-h.r{ right:0; }
  .ve-clip .cl-fade{ position:absolute; top:0; width:0; height:0; border-style:solid; opacity:.55; }
  .ve-video-c{ background:linear-gradient(180deg,var(--vclip2),var(--vclip)); }
  .ve-audio-c{ background:linear-gradient(180deg,var(--aclip2),var(--aclip)); }
  .ve-text-c{ background:linear-gradient(180deg,var(--tclip2),var(--tclip)); }
  .ve-playhead{ position:absolute; top:0; bottom:0; width:0; border-left:2px solid var(--danger); z-index:8; pointer-events:none; }
  .ve-playhead::before{ content:""; position:absolute; top:-1px; left:-6px; border:6px solid transparent; border-top-color:var(--danger); border-bottom:0; }
  /* toasts / overlays */
  .ve-toasts{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:6px; align-items:center; }
  .ve-toast{ background:#0f0f16ee; border:1px solid var(--line2); border-radius:8px; padding:8px 14px; font-size:12.5px; box-shadow:0 6px 20px #0008; }
  .ve-modal{ position:fixed; inset:0; background:#000a; z-index:300; display:none; align-items:center; justify-content:center; }
  .ve-modal.open{ display:flex; }
  .ve-dlg{ background:var(--panel); border:1px solid var(--line2); border-radius:12px; width:min(560px,92vw); max-height:88vh; overflow:auto; box-shadow:0 20px 60px #000b; }
  .ve-dlg-h{ padding:12px 16px; border-bottom:1px solid var(--line); font-weight:700; display:flex; align-items:center; }
  .ve-dlg-b{ padding:14px 16px; }
  .ve-dlg-f{ padding:12px 16px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; }
  .ve-sc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 22px; }
  .ve-sc{ display:flex; justify-content:space-between; font-size:12px; padding:2px 0; }
  .ve-sc kbd{ background:#0c0c12; border:1px solid var(--line2); border-radius:4px; padding:1px 6px; font-family:inherit; font-size:11px; color:var(--muted); }
  .ve-prog{ height:8px; background:#0c0c12; border-radius:5px; overflow:hidden; margin-top:8px; }
  .ve-prog i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent2)); }
  input[type=file]{ display:none; }
  @media (max-width:1100px){ .ve-main{ grid-template-columns:200px 1fr 220px; } }