:root{
  --accent-from:#0037ff;
  --accent-to:#333;
  --bg:#0f0f10;
  --muted:#cfcfcf;
  --overlay-grad: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
}

/* page layout */
.cuts-main{ height: calc(100vh - 72px); margin: 12px auto; max-width:900px; position:relative; }
.reels-container{
  height:100%;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px 0;
  align-items:center;
}

/* each slide */
.reel-slide{
  position:relative;
  width: min(720px, 98%);
  height: calc(100vh - 120px);
  background: #000;
  border-radius: 14px;
  overflow:hidden;
  scroll-snap-align:center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
}
.reel-video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }

/* overlay (title, actions) */
.reel-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:18px;
  background: var(--overlay-grad);
  gap:12px;
}
.reel-info{ color:#fff; max-width:65%; }
.reel-title{ margin:0 0 6px; font-size:1.05rem; text-shadow:0 2px 8px rgba(0,0,0,0.6); }
.reel-desc{ margin:0; color:rgba(255,255,255,0.85); font-size:0.9rem; opacity:0.92; }

/* right side actions */
.reel-actions{
  position:absolute; right:14px; bottom:10px; display:flex; flex-direction:column; gap:12px;
}
.action{
  background:linear-gradient(180deg,var(--accent-from), #ffb347);
  border:none; color:#fff; width:52px; height:52px; border-radius:12px; font-size:18px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,0.35); cursor:pointer;
  transition: transform .18s ease, filter .18s ease;
}
.action .count{ display:block; font-size:0.75rem; margin-left:6px; }
.action:active{ transform:scale(.96); filter:brightness(.95); }

/* UI arrows */
.reels-ui{ position:fixed; right:20px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:8px; z-index:60; }
.ui-btn{ background:rgba(0,0,0,0.5); color:#fff; border:0; width:44px; height:44px; border-radius:10px; font-size:18px; cursor:pointer; }

/* small-screen tweaks */
@media (max-width:700px){
  .reel-slide{ width:100%; height:100vh; border-radius:0; }
  .reel-info{ max-width:78%; }
  .reel-actions{ right:10px; bottom:80px; }
  .action{ width:48px; height:48px; }
  .reels-ui{ right:10px; }
}

/* hint & skeleton */
.reel-placeholder{ display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:600; font-size:1rem; }