.hidden { display: none; }

/* Player Overlay */
#player-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.player-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}
.player-box {
  position: relative;
  max-width: 1080px;
  margin: 5vh auto;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}
.player-box iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
}

/* Clips grid */
.container {
  display: flex;
  gap: 20px;
  padding: 20px;
}
.clips-section { flex: 2; }
.clips-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 15px;
}

/* Clip Card */
.clip { cursor: pointer; position: relative; }
.thumb { position: relative; background:#000; border-radius:14px; overflow:hidden; aspect-ratio:16/9; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .25s ease; }
.clip:hover .thumb img { transform: scale(1.05); box-shadow:0 12px 28px rgba(0,0,0,.15); }

.play-btn {
  position:absolute; bottom:5px; left:5px;
  background: rgba(0,0,0,0.6); color:#fff; border:none; border-radius:50%; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.clip:hover .play-btn { transform: scale(1.1); background: rgba(0,0,0,0.8); }

.duration {
  position:absolute; bottom:5px; right:5px; background: rgba(0,0,0,0.6);
  color:#fff; padding:2px 6px; border-radius:4px; font-size:12px;
}

.title { margin:10px 4px 0; font-size:18px; font-weight:500; line-height:1.4; color:#fff; }

.delete-btn {
  position:absolute; top:5px; right:5px; background: rgba(0,0,0,0.7); color:#fff;
  border:none; border-radius:50%; width:24px; height:24px; font-weight:bold; display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0.8; transition:opacity .2s, transform .2s; z-index:10;
}
.delete-btn:hover { opacity:1; transform:scale(1.2); }

/* Offcanvas Add Form */
.open-form-btn {
  position: fixed; bottom:20px; right:20px; background:#007BFF; color:#fff;
  width:50px; height:50px; border:none; border-radius:50%; font-size:24px; cursor:pointer; z-index:100;
}
.offcanvas {
  position:fixed; top:0; right:0; width:100%; height:100%; display:flex; justify-content:flex-end; z-index:200; visibility:hidden;
}
.offcanvas.show { visibility: visible; }
.offcanvas-backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.5); }
.offcanvas-content {
  position:relative; width:320px; max-width:90%; height:100%; background:#212121; color:#fff;
  padding:20px; transform:translateX(100%); transition: transform .3s ease; display:flex; flex-direction:column; overflow-y:auto;
  border-left:2px solid #333;
}
.offcanvas.show .offcanvas-content { transform:translateX(0); }
.close-btn {
  position:absolute; top:10px; right:10px; background:transparent; border:none; color:#fff; font-size:20px; cursor:pointer;
}
.offcanvas-content form label { margin-top:10px; font-weight:600; color:#ccc; display:block; }
.offcanvas-content form input { width:100%; margin-top:4px; padding:6px 8px; border-radius:4px; border:1px solid #555; background:#333; color:#fff; }
.offcanvas-content