/* CutFlow — Panels & Controls */
/* PROPERTY GROUPS */
.prop-group{margin-bottom:18px;}
.prop-group-title{
  font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:8px;display:flex;align-items:center;gap:6px;font-family:var(--mono);
}
.prop-group-title::after{content:'';flex:1;height:1px;background:var(--border);}
.prop-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.prop-label{font-size:11px;color:var(--text2);min-width:72px;font-weight:600;}
.prop-input{
  flex:1;padding:5px 8px;background:var(--bg3);border:1px solid var(--border);
  border-radius:5px;color:var(--text);font-size:12px;font-family:var(--mono);
  outline:none;transition:border-color .2s;
}
.prop-input:focus{border-color:var(--accent);}
.prop-slider{flex:1;accent-color:var(--accent);cursor:pointer;}
.prop-value{font-family:var(--mono);font-size:11px;color:var(--text2);min-width:36px;text-align:right;}
.prop-checkbox{accent-color:var(--accent);}
.prop-select{
  flex:1;padding:5px 8px;background:var(--bg3);border:1px solid var(--border);
  border-radius:5px;color:var(--text);font-size:12px;font-family:var(--sans);
  outline:none;cursor:pointer;
}
.prop-color{width:36px;height:26px;padding:2px;background:var(--bg3);border:1px solid var(--border);border-radius:5px;cursor:pointer;}

/* FILTER GRID */
.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.filter-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  padding:8px;cursor:pointer;transition:all .15s;text-align:center;
  font-size:11px;color:var(--text2);font-weight:600;
}
.filter-card:hover{border-color:var(--border2);color:var(--text);}
.filter-card.active{border-color:var(--accent);color:var(--accent);background:rgba(124,106,247,.1);}
.filter-preview{height:40px;border-radius:4px;margin-bottom:5px;background:#333;overflow:hidden;}
.filter-preview video,.filter-preview img{width:100%;height:100%;object-fit:cover;}

/* TEXT OVERLAY ITEMS */
.text-item{
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  padding:8px 10px;margin-bottom:6px;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;
}
.text-item:hover{border-color:var(--border2);}
.text-item.active{border-color:var(--accent);}

/* TRANSITIONS GRID */
.trans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.trans-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  padding:6px 4px;cursor:pointer;text-align:center;
  font-size:10px;color:var(--text2);font-weight:600;transition:all .15s;
}
.trans-card:hover{border-color:var(--border2);color:var(--text);}
.trans-card.active{border-color:var(--accent);color:var(--accent);background:rgba(124,106,247,.08);}
.trans-icon{font-size:20px;margin-bottom:3px;}

/* EXPORT MODAL */
.modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
}
.modal{
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:14px;padding:28px;width:420px;
  position:relative;
}
.modal-title{font-size:18px;font-weight:800;margin-bottom:4px;}
.modal-sub{font-size:13px;color:var(--text2);margin-bottom:22px;}
.modal-close{
  position:absolute;top:16px;right:16px;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  width:28px;height:28px;cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;color:var(--text2);
}
.modal-close:hover{background:var(--surface2);color:var(--text);}
.export-formats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px;}
.export-fmt{
  background:var(--bg3);border:1px solid var(--border);border-radius:8px;
  padding:12px;cursor:pointer;transition:all .15s;text-align:center;
}
.export-fmt:hover{border-color:var(--border2);}
.export-fmt.active{border-color:var(--accent);background:rgba(124,106,247,.1);}
.export-fmt-icon{font-size:22px;margin-bottom:4px;}
.export-fmt-name{font-size:12px;font-weight:700;}
.export-fmt-desc{font-size:10px;color:var(--text3);margin-top:2px;}
.export-progress{
  height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;margin:12px 0;
  display:none;
}
.export-progress.visible{display:block;}
.export-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent3),var(--cyan));border-radius:3px;width:0%;transition:width .3s;}
.big-btn{
  width:100%;padding:12px;background:linear-gradient(135deg,var(--accent3),var(--accent));
  border:none;border-radius:var(--r);color:#fff;font-size:14px;font-weight:700;
  font-family:var(--sans);cursor:pointer;transition:all .2s;
}
.big-btn:hover{opacity:.9;}
.big-btn:disabled{opacity:.4;cursor:not-allowed;}

/* MEDIA LIBRARY */
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.media-thumb{
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  aspect-ratio:16/9;overflow:hidden;cursor:pointer;position:relative;
  transition:border-color .15s;
}
.media-thumb:hover{border-color:var(--border2);}
.media-thumb video,.media-thumb img{width:100%;height:100%;object-fit:cover;}
.media-thumb-label{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
  padding:8px 4px 4px;font-size:9px;color:#fff;font-family:var(--mono);font-weight:700;
}
.media-add-btn{
  aspect-ratio:16/9;background:var(--bg3);border:2px dashed var(--border);
  border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:6px;color:var(--text3);font-size:11px;font-weight:600;
  transition:all .15s;
}
.media-add-btn:hover{border-color:var(--accent);color:var(--accent);}

/* CONTEXT MENU */
.ctx-menu{
  position:fixed;z-index:500;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:8px;padding:4px;min-width:150px;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  display:none;
}
.ctx-item{
  padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer;
  border-radius:5px;transition:all .12s;display:flex;align-items:center;gap:8px;
  color:var(--text2);
}
.ctx-item:hover{background:var(--surface);color:var(--text);}
.ctx-item.danger{color:var(--red);}
.ctx-item.danger:hover{background:rgba(248,113,113,.1);}
.ctx-sep{height:1px;background:var(--border);margin:3px 0;}

/* KEYBOARD SHORTCUT CHIP */
.shortcut-overlay{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  background:var(--surface2);border:1px solid var(--border2);border-radius:8px;
  padding:8px 16px;font-size:12px;font-family:var(--mono);color:var(--text2);
  display:none;z-index:100;
}

/* NOTIFICATION */
.notif{
  position:fixed;top:70px;right:16px;z-index:300;
  background:var(--surface2);border:1px solid var(--border2);border-radius:8px;
  padding:10px 16px;font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:8px;
  transform:translateX(120%);transition:transform .3s;
  max-width:280px;
}
.notif.show{transform:translateX(0);}
.notif.success{border-color:rgba(52,211,153,.3);}
.notif.error{border-color:rgba(248,113,113,.3);}

/* FILE INPUT hidden */
#file-input{display:none;}
#audio-input{display:none;}
#image-input{display:none;}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}

/* CANVAS TEXT OVERLAY (rendered on top of video in preview) */
.overlay-text{
  position:absolute;cursor:move;user-select:none;
  padding:4px 8px;border-radius:3px;
  font-weight:700;white-space:nowrap;
}
.overlay-text.selected{outline:2px dashed var(--accent);outline-offset:2px;}

/* WAVEFORM */
#waveform-canvas{width:100%;height:32px;display:block;}