.mask-editor-box {
  margin: 14px 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #0d1115;
}
.mask-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:11px; font-weight:700; }
.mask-heading small { color:var(--amber); }
.mask-edit-button { width:100%; padding:7px; }
.mask-edit-button.active { color:#171006; border-color:var(--amber); background:var(--amber); font-weight:700; }
.mask-actions { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:6px; }
.mask-actions button { padding:5px; font-size:9px; }
.mask-actions button:last-child { grid-column:1/-1; }
.mask-editor-box p { margin:8px 0 0; color:#68747d; font-size:9px; line-height:1.5; }
.source-item { cursor:grab; }
.source-item:active { cursor:grabbing; }
.source-item.dragging { opacity:.45; }
.video-thumb { display:grid; place-items:center; color:var(--cyan); background:#0a2623; font-style:normal; }
.source-menu { position:fixed; z-index:100; width:220px; padding:7px; border:1px solid #3a4650; border-radius:7px; background:#151a20; box-shadow:0 14px 40px #000a; }
.source-menu[hidden] { display:none; }
.source-menu-header { display:flex; flex-direction:column; gap:3px; padding:8px 9px 10px; border-bottom:1px solid var(--line); }
.source-menu-header strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.source-menu-header small { color:var(--muted); text-transform:uppercase; }
.source-menu button { width:100%; margin-top:5px; padding:8px; text-align:left; }
.source-menu .source-menu-danger { color:#ff7481; }
.layer-hint { margin-left:5px; color:var(--muted); font-size:9px; font-weight:400; }
.surface-item { cursor:grab; }
.surface-item.dragging { opacity:.4; }
.surface-item.drop-before { box-shadow:inset 0 2px 0 var(--cyan); }
.surface-item.drop-after { box-shadow:inset 0 -2px 0 var(--cyan); }
.field-help { color:#68747d; font-size:9px; line-height:1.4; }
.media-transform-box { margin:14px 0; padding:11px; border:1px solid var(--line); border-radius:5px; background:#0d1115; }
.media-edit-button { width:100%; padding:7px; margin-bottom:9px; }
.media-edit-button.active { color:#04110e; border-color:var(--cyan); background:var(--cyan); font-weight:700; }
.media-transform-box label { margin-bottom:6px; }
.media-transform-box p { margin:8px 0 0; color:#68747d; font-size:9px; line-height:1.5; }
.media-transform-actions button { width:100%; padding:6px; font-size:9px; }
.scene-card { padding:0; overflow:hidden; }
.scene-card .scene-fire { width:100%; height:100%; padding:10px; border:0; background:transparent; color:inherit; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; text-align:left; }
.scene-card .scene-delete { right:5px; bottom:5px; padding:3px 6px; border:1px solid #5d3037; border-radius:4px; background:#24151a; color:#ff7481; opacity:.7; }
.scene-card:hover .scene-delete { opacity:1; }
.stage-wrap.panning { cursor:grabbing; }
.curve-editor-box { margin:14px 0; padding:11px; border:1px solid #254c63; border-radius:5px; background:#0b1218; }
.curve-edit-button,.curve-reset-button { width:100%; padding:7px; }
.curve-reset-button { margin-top:6px; font-size:9px; }
.curve-edit-button.active { color:#041018; border-color:#58a6ff; background:#58a6ff; font-weight:700; }
.curve-editor-box p { margin:8px 0 0; color:#68747d; font-size:9px; line-height:1.5; }