.gfvr { border: 1px solid #ddd; padding: 12px; border-radius: 8px; }

/* Responsive 16:9 frame */
.gfvr-video-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;     /* modern browsers */
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}
/* Fallback for older browsers */
.gfvr-video-wrap::before{
  content:"";
  display:block;
  padding-top:56.25%;
}
.gfvr-preview,
.gfvr-overlay,
.gfvr-poster,
.gfvr-countdown{
  position:absolute;
  inset:0;
}
.gfvr-preview{ width:100%; height:100%; object-fit: contain; }

/* Controls shelf */
.gfvr-overlay{ pointer-events:none; }
.gfvr-controls{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  pointer-events:auto;
}
.gfvr-btn{
  position:relative;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:999px;
  cursor:pointer;
  background:#f2f2f2;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.gfvr-btn::after{
  content: attr(data-label);
  position:absolute;
  bottom:-18px;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  line-height:1;
  color:#fff;
  opacity:.95;
  pointer-events:none;
}
.gfvr-btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* Icon colors */
.gfvr-record{ background:#e60000; box-shadow:0 2px 0 #9a0000; }
.gfvr-record .gfvr-icon-record circle{ fill:#fff; }
.is-recording .gfvr-record{ background:#b00000; pointer-events:none; }

.gfvr-stop{ background:#ffffff; }
.gfvr-stop .gfvr-icon-stop rect{ fill:#111; }

.gfvr-reset{ background:#ffffff; }

/* Timer */
.gfvr-timer-top{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.55); color:#fff; padding:4px 8px; border-radius:12px;
  font-weight:600; font-size:12px; pointer-events:auto;
}

/* Poster overlay */
.gfvr-poster{
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  color:#fff; background:rgba(0,0,0,0.35); cursor:pointer;
}
.gfvr-poster .gfvr-icon-dot circle { fill:#e60000; }

/* Steps/hints */
.gfvr-steps { margin-top:10px; }
.gfvr-steps ol { margin:0; padding-left:18px; }
.gfvr-hint { font-size:12px; color:#555; margin-top:6px; }
.gfvr-msg { margin-top:6px; font-size:13px; }
.gfvr-progress { margin-top:6px; font-size:13px; }

/* Mobile sizing */
@media (max-width: 480px){
  .gfvr-btn{ width:58px; height:58px; }
  .gfvr-btn::after{ bottom:-20px; font-size:13px; }
}