feat: implement video site per README spec

- Express + EJS + express-session stack (auth/navbar ported from minecraft_launcher)
- Public: main folder list, folder video grid, internal popup player (/player/:videoId)
- Admin (/op): login, folder CRUD with right-click context menu + add-folder modal
- Admin folder: video grid with right-click edit/rename/delete, "영상 추가" -> editor
- Video editor: drag-drop upload, file picker, YouTube URL probe (ETA + 5분 경고),
  background yt-dlp download with progress polling, navbar title edit, trim controls,
  save runs ffmpeg trim (original preserved)
- Filesystem storage under data/folders/<name>/<videoId>/{meta.json, original.<ext>, edited.<ext>}

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

public/dashboard.js

@@ -0,0 +1,80 @@
+(function () {
+  var ctxMenu = document.getElementById('ctxMenu')
+  var targetName = null
+
+  function showCtx(x, y) {
+    ctxMenu.style.left = x + 'px'
+    ctxMenu.style.top = y + 'px'
+    ctxMenu.hidden = false
+  }
+  function hideCtx() { ctxMenu.hidden = true; targetName = null }
+
+  document.querySelectorAll('.adminFolder').forEach(function (card) {
+    card.addEventListener('contextmenu', function (e) {
+      e.preventDefault()
+      targetName = card.getAttribute('data-name')
+      showCtx(e.clientX, e.clientY)
+    })
+  })
+
+  document.addEventListener('click', function (e) {
+    if (!ctxMenu.contains(e.target)) hideCtx()
+  })
+
+  ctxMenu.addEventListener('click', function (e) {
+    var btn = e.target.closest('button')
+    if (!btn) return
+    var action = btn.getAttribute('data-action')
+    if (action === 'rename') {
+      var newName = window.prompt('새 폴더 이름', targetName)
+      if (newName && newName !== targetName) {
+        fetch('/op/folders/rename', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ oldName: targetName, newName: newName })
+        }).then(function (r) { return r.json() }).then(function (j) {
+          if (j.ok) location.reload()
+          else alert(j.message || '이름 변경 실패')
+        })
+      }
+    } else if (action === 'delete') {
+      if (window.confirm('"' + targetName + '" 폴더를 정말 삭제할까요? 안의 영상이 모두 사라집니다.')) {
+        fetch('/op/folders/delete', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ name: targetName })
+        }).then(function (r) { return r.json() }).then(function (j) {
+          if (j.ok) location.reload()
+          else alert(j.message || '삭제 실패')
+        })
+      }
+    }
+    hideCtx()
+  })
+
+  // 폴더 추가 모달
+  var addBtn = document.getElementById('addFolderBtn')
+  var modal = document.getElementById('addFolderModal')
+  var input = document.getElementById('addFolderInput')
+  var cancelBtn = document.getElementById('addFolderCancel')
+  var confirmBtn = document.getElementById('addFolderConfirm')
+
+  function openModal() { modal.hidden = false; input.value = ''; setTimeout(function () { input.focus() }, 0) }
+  function closeModal() { modal.hidden = true }
+  addBtn.addEventListener('click', openModal)
+  cancelBtn.addEventListener('click', closeModal)
+  modal.addEventListener('click', function (e) { if (e.target === modal) closeModal() })
+  input.addEventListener('keydown', function (e) { if (e.key === 'Enter') confirmBtn.click() })
+  confirmBtn.addEventListener('click', function () {
+    var name = input.value.trim()
+    if (!name) return
+    fetch('/op/folders', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ name: name })
+    }).then(function (r) { return r.json() }).then(function (j) {
+      if (j.ok) location.reload()
+      else alert(j.message || '폴더 생성 실패')
+    })
+  })
+})()

public/editor.js

@@ -0,0 +1,197 @@
+(function () {
+  var ctx = window.__EDITOR__ || { folder: '', video: null }
+  var folder = ctx.folder
+  var video = ctx.video
+
+  var dropZone = document.getElementById('dropZone')
+  var fileInput = document.getElementById('fileInput')
+  var ytUrl = document.getElementById('ytUrl')
+  var ytProbeBtn = document.getElementById('ytProbeBtn')
+  var ytStartBtn = document.getElementById('ytStartBtn')
+  var probeInfo = document.getElementById('probeInfo')
+  var dlProgress = document.getElementById('downloadProgress')
+  var uploadStatus = document.getElementById('uploadStatus')
+
+  var videoPanel = document.getElementById('videoPanel')
+  var editVideo = document.getElementById('editVideo')
+  var titleInput = document.getElementById('titleInput')
+  var startSec = document.getElementById('startSec')
+  var endSec = document.getElementById('endSec')
+  var saveBtn = document.getElementById('saveBtn')
+
+  // 드래그&드롭
+  ;['dragenter', 'dragover'].forEach(function (evt) {
+    dropZone.addEventListener(evt, function (e) {
+      e.preventDefault(); e.stopPropagation()
+      dropZone.classList.add('dragOver')
+    })
+  })
+  ;['dragleave', 'drop'].forEach(function (evt) {
+    dropZone.addEventListener(evt, function (e) {
+      e.preventDefault(); e.stopPropagation()
+      dropZone.classList.remove('dragOver')
+    })
+  })
+  dropZone.addEventListener('drop', function (e) {
+    var files = e.dataTransfer && e.dataTransfer.files
+    if (files && files.length > 0) uploadFile(files[0])
+  })
+  fileInput.addEventListener('change', function () {
+    if (fileInput.files && fileInput.files[0]) uploadFile(fileInput.files[0])
+  })
+
+  function uploadFile(file) {
+    var form = new FormData()
+    form.append('file', file)
+    form.append('title', titleInput.value || file.name)
+    uploadStatus.textContent = '업로드 중...'
+    var xhr = new XMLHttpRequest()
+    xhr.open('POST', '/op/folder/' + encodeURIComponent(folder) + '/video/upload')
+    xhr.upload.addEventListener('progress', function (e) {
+      if (e.lengthComputable) {
+        var pct = Math.round((e.loaded / e.total) * 100)
+        uploadStatus.textContent = '업로드 ' + pct + '%'
+      }
+    })
+    xhr.onload = function () {
+      try {
+        var res = JSON.parse(xhr.responseText)
+        if (res.ok) {
+          location.href = '/op/folder/' + encodeURIComponent(folder) + '/video/editor?id=' + encodeURIComponent(res.videoId)
+        } else {
+          uploadStatus.textContent = '업로드 실패: ' + (res.message || '')
+        }
+      } catch (err) {
+        uploadStatus.textContent = '업로드 실패'
+      }
+    }
+    xhr.onerror = function () { uploadStatus.textContent = '업로드 실패 (네트워크)' }
+    xhr.send(form)
+  }
+
+  // YouTube probe
+  ytProbeBtn.addEventListener('click', function () {
+    var url = ytUrl.value.trim()
+    if (!url) return
+    probeInfo.textContent = '확인 중...'
+    ytStartBtn.disabled = true
+    fetch('/op/folder/' + encodeURIComponent(folder) + '/video/youtube/probe', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ url: url })
+    }).then(function (r) { return r.json() }).then(function (j) {
+      if (!j.ok) {
+        probeInfo.textContent = j.message || '확인 실패'
+        return
+      }
+      var p = j.probe
+      var parts = [
+        '제목: ' + p.title,
+        '길이: ' + formatDuration(p.durationSec)
+      ]
+      if (p.filesizeApprox) parts.push('대략 ' + formatSize(p.filesizeApprox))
+      if (p.etaSec) parts.push('예상 다운로드: ' + formatDuration(p.etaSec))
+      probeInfo.textContent = parts.join(' · ')
+      if (p.warnOver5min) {
+        if (!window.confirm('가져오는 데 5분 이상 걸릴 수 있습니다. 진행할까요?\n(다른 페이지에서 작업해도 백그라운드로 계속 진행됩니다.)')) {
+          return
+        }
+      }
+      if (!titleInput.value) titleInput.value = p.title
+      ytStartBtn.disabled = false
+    }).catch(function (e) {
+      probeInfo.textContent = '확인 실패: ' + e.message
+    })
+  })
+
+  ytStartBtn.addEventListener('click', function () {
+    var url = ytUrl.value.trim()
+    if (!url) return
+    fetch('/op/folder/' + encodeURIComponent(folder) + '/video/youtube/start', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ url: url, title: titleInput.value })
+    }).then(function (r) { return r.json() }).then(function (j) {
+      if (!j.ok) {
+        probeInfo.textContent = j.message || '시작 실패'
+        return
+      }
+      dlProgress.hidden = false
+      probeInfo.textContent = '백그라운드 다운로드 시작...'
+      pollJob(j.jobId, j.videoId)
+    })
+  })
+
+  function pollJob(jobId, videoId) {
+    fetch('/op/job/' + encodeURIComponent(jobId)).then(function (r) { return r.json() }).then(function (j) {
+      if (!j.ok) {
+        probeInfo.textContent = j.message || '작업을 찾을 수 없음'
+        return
+      }
+      var job = j.job
+      dlProgress.value = job.progress
+      probeInfo.textContent = job.message
+      if (job.status === 'done') {
+        location.href = '/op/folder/' + encodeURIComponent(folder) + '/video/editor?id=' + encodeURIComponent(videoId)
+      } else if (job.status === 'error') {
+        probeInfo.textContent = '실패: ' + (job.error || '')
+      } else {
+        setTimeout(function () { pollJob(jobId, videoId) }, 1500)
+      }
+    })
+  }
+
+  // 트림 컨트롤 - "현재 시점" 버튼
+  document.querySelectorAll('[data-set-current]').forEach(function (btn) {
+    btn.addEventListener('click', function () {
+      if (!editVideo) return
+      var which = btn.getAttribute('data-set-current')
+      var t = editVideo.currentTime.toFixed(2)
+      if (which === 'start') startSec.value = t
+      else endSec.value = t
+    })
+  })
+
+  // 저장
+  saveBtn.addEventListener('click', function () {
+    if (!video) { alert('먼저 영상을 추가하세요.'); return }
+    var payload = {
+      id: video.id,
+      title: titleInput.value,
+      startSec: Number(startSec.value || 0),
+      endSec: endSec.value === '' ? null : Number(endSec.value)
+    }
+    saveBtn.disabled = true
+    saveBtn.textContent = '저장 중...'
+    fetch('/op/folder/' + encodeURIComponent(folder) + '/video/save', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload)
+    }).then(function (r) { return r.json() }).then(function (j) {
+      saveBtn.disabled = false
+      saveBtn.textContent = '저장'
+      if (j.ok) {
+        alert(j.note || '저장 완료')
+        location.href = '/op/folder/' + encodeURIComponent(folder)
+      } else {
+        alert(j.message || '저장 실패')
+      }
+    })
+  })
+
+  function formatDuration(sec) {
+    if (!sec || sec <= 0) return '0초'
+    var s = Math.round(sec)
+    var h = Math.floor(s / 3600); s = s % 3600
+    var m = Math.floor(s / 60); s = s % 60
+    if (h > 0) return h + '시간 ' + m + '분 ' + s + '초'
+    if (m > 0) return m + '분 ' + s + '초'
+    return s + '초'
+  }
+  function formatSize(bytes) {
+    if (bytes < 1024) return bytes + ' B'
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+    if (bytes < 1024 * 1024 * 1024) return (bytes / 1024 / 1024).toFixed(1) + ' MB'
+    return (bytes / 1024 / 1024 / 1024).toFixed(2) + ' GB'
+  }
+})()

public/folder.js

@@ -0,0 +1,59 @@
+(function () {
+  var folder = (window.__OP__ || {}).folder
+  var ctxMenu = document.getElementById('ctxMenu')
+  var targetId = null
+  var targetTitle = null
+
+  function showCtx(x, y) {
+    ctxMenu.style.left = x + 'px'
+    ctxMenu.style.top = y + 'px'
+    ctxMenu.hidden = false
+  }
+  function hideCtx() { ctxMenu.hidden = true }
+
+  document.querySelectorAll('.adminVideo').forEach(function (card) {
+    card.addEventListener('contextmenu', function (e) {
+      e.preventDefault()
+      targetId = card.getAttribute('data-id')
+      targetTitle = card.getAttribute('data-title')
+      showCtx(e.clientX, e.clientY)
+    })
+  })
+
+  document.addEventListener('click', function (e) {
+    if (!ctxMenu.contains(e.target)) hideCtx()
+  })
+
+  ctxMenu.addEventListener('click', function (e) {
+    var btn = e.target.closest('button')
+    if (!btn) return
+    var action = btn.getAttribute('data-action')
+    if (action === 'edit') {
+      location.href = '/op/folder/' + encodeURIComponent(folder) + '/video/editor?id=' + encodeURIComponent(targetId)
+    } else if (action === 'rename') {
+      var t = window.prompt('새 영상 제목', targetTitle)
+      if (t && t !== targetTitle) {
+        fetch('/op/folder/' + encodeURIComponent(folder) + '/video/rename', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ id: targetId, title: t })
+        }).then(function (r) { return r.json() }).then(function (j) {
+          if (j.ok) location.reload()
+          else alert(j.message || '이름 변경 실패')
+        })
+      }
+    } else if (action === 'delete') {
+      if (window.confirm('"' + targetTitle + '" 영상을 정말 삭제할까요?')) {
+        fetch('/op/folder/' + encodeURIComponent(folder) + '/video/delete', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ id: targetId })
+        }).then(function (r) { return r.json() }).then(function (j) {
+          if (j.ok) location.reload()
+          else alert(j.message || '삭제 실패')
+        })
+      }
+    }
+    hideCtx()
+  })
+})()

public/player.js

@@ -0,0 +1,51 @@
+(function () {
+  var overlay = document.getElementById('playerOverlay')
+  var closeBtn = document.getElementById('playerClose')
+  var video = document.getElementById('playerVideo')
+  var titleEl = document.getElementById('playerTitle')
+
+  function openPlayer(videoId, title) {
+    // 스펙: /player/:videoId 로 이동한 것처럼 동작하면서 내부 팝업으로 띄운다.
+    // pushState 로 URL 만 바꿔, 새로고침/직접접근 시 player.ejs 가 응답한다.
+    history.pushState({ player: true, videoId: videoId }, '', '/player/' + encodeURIComponent(videoId))
+    titleEl.textContent = title || ''
+    video.src = '/api/video/' + encodeURIComponent(videoId) + '/file'
+    overlay.hidden = false
+    video.play().catch(function () { /* 자동재생 막힘 무시 */ })
+  }
+
+  function closePlayer() {
+    overlay.hidden = true
+    video.pause()
+    video.removeAttribute('src')
+    video.load()
+    // 폴더 페이지로 되돌리기
+    if (history.state && history.state.player) {
+      history.back()
+    }
+  }
+
+  document.querySelectorAll('.videoCard').forEach(function (card) {
+    card.addEventListener('click', function () {
+      var id = card.getAttribute('data-video-id')
+      var title = card.querySelector('.videoTitle')
+      openPlayer(id, title ? title.textContent : '')
+    })
+  })
+
+  if (closeBtn) closeBtn.addEventListener('click', closePlayer)
+  if (overlay) overlay.addEventListener('click', function (e) {
+    if (e.target === overlay) closePlayer()
+  })
+  window.addEventListener('popstate', function () {
+    if (!overlay.hidden) {
+      overlay.hidden = true
+      video.pause()
+      video.removeAttribute('src')
+      video.load()
+    }
+  })
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && !overlay.hidden) closePlayer()
+  })
+})()

public/styles.css

@@ -0,0 +1,234 @@
+:root {
+  color-scheme: dark;
+  --bg: #0d1117;
+  --bg-alt: #161b22;
+  --bg-card: #1f242c;
+  --border: #30363d;
+  --text: #e6edf3;
+  --text-muted: #8b949e;
+  --accent: #2f81f7;
+  --accent-hover: #1f6feb;
+  --danger: #f85149;
+  --success: #3fb950;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+
+body.siteBody {
+  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+}
+body.siteBody.centerLayout { display: flex; align-items: center; justify-content: center; }
+
+.pageWrap { max-width: 1200px; margin: 0 auto; padding: 32px 24px 80px; }
+
+/* nav */
+.topNav, .publicNav {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 32px; background: var(--bg-alt);
+  border-bottom: 1px solid var(--border);
+}
+.navBrand {
+  display: inline-flex; align-items: center; gap: 10px;
+  text-decoration: none; color: inherit; font-weight: 600;
+}
+.navLogo { font-size: 22px; }
+.navTitle { font-size: 16px; }
+.navUser { position: relative; }
+.navUserButton {
+  background: transparent; border: 1px solid var(--border); color: var(--text);
+  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 14px;
+}
+.navUserButton:hover { background: var(--bg-card); }
+.navUserMenu {
+  position: absolute; right: 0; top: calc(100% + 6px);
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 10px; padding: 8px; min-width: 160px;
+  box-shadow: 0 12px 24px rgba(0,0,0,0.4); z-index: 50;
+}
+.navUserMenu form { margin: 0; }
+.dangerLink {
+  background: transparent; border: none; color: var(--danger); cursor: pointer;
+  padding: 6px 8px; font-size: 14px; width: 100%; text-align: left;
+}
+.dangerLink:hover { background: rgba(248,81,73,0.1); border-radius: 6px; }
+
+/* generic */
+.hero h1 { margin: 8px 0 8px; font-size: 30px; }
+.hero p { color: var(--text-muted); margin: 0 0 24px; }
+.muted { color: var(--text-muted); font-size: 13px; text-decoration: none; }
+
+.primaryButton, .secondaryButton, .dangerButton {
+  border-radius: 8px; padding: 9px 16px; font-size: 14px; cursor: pointer;
+  border: 1px solid transparent; text-decoration: none; display: inline-block;
+}
+.primaryButton { background: var(--accent); color: white; }
+.primaryButton:hover { background: var(--accent-hover); }
+.secondaryButton { background: var(--bg-card); color: var(--text); border-color: var(--border); }
+.secondaryButton:hover { background: var(--bg-alt); }
+.dangerButton { background: var(--danger); color: white; }
+
+.dashboardHeader {
+  display: flex; justify-content: space-between; align-items: flex-end;
+  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
+}
+.dashboardActions { display: flex; gap: 8px; flex-wrap: wrap; }
+
+/* folder grid */
+.folderGrid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 16px;
+}
+.folderCard {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 12px; padding: 18px; text-decoration: none; color: var(--text);
+  display: flex; flex-direction: column; align-items: center; gap: 8px;
+  cursor: pointer; transition: transform .08s ease;
+}
+.folderCard:hover { transform: translateY(-2px); border-color: var(--accent); }
+.folderCardLink {
+  display: flex; flex-direction: column; align-items: center; gap: 8px;
+  text-decoration: none; color: inherit;
+}
+.folderIcon { font-size: 40px; }
+.folderName { font-size: 15px; word-break: break-all; text-align: center; }
+
+/* video grid */
+.videoGrid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 18px;
+}
+.videoCard {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 10px; overflow: hidden; cursor: pointer; color: var(--text);
+  display: flex; flex-direction: column; padding: 0; text-align: left;
+  font: inherit;
+}
+.videoCard:hover { border-color: var(--accent); }
+.videoThumb {
+  aspect-ratio: 16/9; background: linear-gradient(135deg, #1f242c, #0d1117);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 36px; color: var(--accent);
+}
+.videoTitle { padding: 10px 12px; font-size: 14px; }
+
+/* login */
+.loginCard {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 14px; padding: 32px; min-width: 320px;
+}
+.loginForm { display: flex; flex-direction: column; gap: 14px; }
+.loginForm label { display: flex; flex-direction: column; gap: 6px; }
+.loginForm input {
+  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
+  color: var(--text); padding: 10px 12px; font-size: 14px;
+}
+.errorBanner {
+  background: rgba(248,81,73,0.15); border: 1px solid var(--danger);
+  color: #ffb1ab; padding: 10px 12px; border-radius: 8px; font-size: 13px;
+}
+
+/* context menu */
+.ctxMenu {
+  position: fixed; z-index: 100; background: var(--bg-card);
+  border: 1px solid var(--border); border-radius: 8px; padding: 6px;
+  box-shadow: 0 12px 24px rgba(0,0,0,0.4); min-width: 160px;
+}
+.ctxMenu button {
+  display: block; width: 100%; text-align: left; background: transparent;
+  border: none; color: var(--text); padding: 8px 10px; font-size: 13px;
+  border-radius: 6px; cursor: pointer;
+}
+.ctxMenu button:hover { background: var(--bg-alt); }
+
+/* modal */
+.modalOverlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
+  display: flex; align-items: center; justify-content: center; z-index: 200;
+}
+.modalCard {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 14px; padding: 24px; min-width: 320px;
+}
+.modalCard h2 { margin: 0 0 16px; font-size: 18px; }
+.modalCard label { display: flex; flex-direction: column; gap: 6px; }
+.modalCard input[type="text"] {
+  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
+  color: var(--text); padding: 10px 12px; font-size: 14px;
+}
+.modalActions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
+
+/* player modal */
+.playerOverlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
+  display: flex; align-items: center; justify-content: center; z-index: 300;
+}
+.playerModal {
+  position: relative; background: #000; border-radius: 12px;
+  width: min(960px, 92vw); max-height: 92vh; padding: 16px;
+  display: flex; flex-direction: column; gap: 10px;
+}
+.playerClose {
+  position: absolute; top: 8px; right: 12px; background: transparent;
+  border: none; color: white; font-size: 22px; cursor: pointer; z-index: 1;
+}
+.playerTitle { color: white; font-size: 16px; margin-right: 36px; }
+.playerModal video { width: 100%; max-height: 80vh; background: #000; }
+
+.standalonePlayer { background: #000; border-radius: 10px; padding: 12px; }
+.standalonePlayer video { width: 100%; max-height: 80vh; }
+
+/* editor */
+.editorNav {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 12px 24px; background: var(--bg-alt);
+  border-bottom: 1px solid var(--border); gap: 12px;
+}
+.editorNavLeft { display: flex; align-items: center; gap: 16px; flex: 1; }
+.editorNavRight { display: flex; gap: 8px; }
+.titleInput {
+  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
+  color: var(--text); padding: 8px 12px; font-size: 15px; min-width: 280px;
+  flex: 1; max-width: 480px;
+}
+.editorMain { padding: 24px; }
+.editorStage { max-width: 1200px; margin: 0 auto; }
+.dropZone {
+  background: var(--bg-card); border: 2px dashed var(--border);
+  border-radius: 12px; padding: 40px; text-align: center;
+  display: flex; flex-direction: column; gap: 14px; align-items: center;
+}
+.dropZone.dragOver { border-color: var(--accent); background: rgba(47,129,247,0.08); }
+.dropTitle { font-size: 18px; margin: 0; }
+.ytRow {
+  display: flex; gap: 8px; width: 100%; max-width: 640px; flex-wrap: wrap;
+}
+.ytRow input {
+  flex: 1; background: var(--bg); border: 1px solid var(--border);
+  border-radius: 8px; color: var(--text); padding: 10px 12px; font-size: 14px;
+  min-width: 240px;
+}
+#downloadProgress { width: 100%; max-width: 640px; height: 8px; }
+
+.videoPanel { display: flex; flex-direction: column; gap: 16px; }
+.videoPanel video {
+  width: 100%; max-height: 60vh; background: #000; border-radius: 10px;
+}
+.trimControls {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 10px; padding: 16px;
+  display: flex; flex-wrap: wrap; gap: 18px;
+}
+.trimControls label {
+  display: flex; flex-direction: column; gap: 6px; font-size: 13px;
+  color: var(--text-muted);
+}
+.trimControls input {
+  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
+  color: var(--text); padding: 8px 10px; font-size: 14px; width: 180px;
+}
+.adminFolder { position: relative; }
+.adminVideo { position: relative; }