video#main-video {
  aspect-ratio: 16/9;
}
.video-player-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 20px;
}

.video-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.video-section {
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.video-thumbnails {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.video-thumbnails img {
  width: 100px;
  height: auto;
  margin: 0 10px;
  cursor: pointer;
  transition: transform 0.3s;
}

.video-thumbnails img:hover {
  transform: scale(1.1);
}
.image-viewer-container, .video-player-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

.image-content, .video-content {
  flex: 1 1 700px;
  max-width: 900px;
}

.main-image-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  background: #f6f7f9;
  aspect-ratio: 9/6;
}

#main-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 9/6;
}

.now-viewing, .now-playing {
  display: flex;
  justify-content: space-between;
  margin: .5rem 0 1rem;
  font-size: .95rem;
}

.image-thumbnails, .video-thumbnails {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.image-thumbnails img, .video-thumbnails img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}


.vr-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display:none; opacity:0; transition: opacity .2s; z-index: 1000; }
.vr-modal-backdrop.vr-open { display:block; opacity:1; }
.vr-modal { position: fixed; inset:0; display:grid; place-items:center; pointer-events:none; z-index:1001; }
.vr-modal.vr-open { pointer-events:auto; }
.vr-modal-dialog { width:min(96vw, 980px); max-height:92vh; overflow:auto; background:#fff; border-radius:16px; box-shadow: 0 30px 80px rgba(0,0,0,.25); transform: translateY(8px); opacity:0; transition: transform .2s, opacity .2s; }
.vr-modal.vr-open .vr-modal-dialog { transform: translateY(0); opacity:1; }
.vr-modal-header, .vr-modal-footer { padding: 16px 20px; }
.vr-modal-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #eee; }
.vr-modal-footer { border-top:1px solid #eee; display:flex; gap:10px; justify-content:flex-end; }
.vr-modal-title { font-size:1.25rem; font-weight:700; }
.vr-modal-close { border:0; background:transparent; font-size:1.25rem; cursor:pointer; padding:8px; margin:-8px; }
.vr-modal-body { padding: 20px; }
.vr-grid-2 { display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:start; }
@media (max-width: 820px){ .vr-grid-2 { grid-template-columns:1fr; } }
.vr-dropzone { border:2px dashed #cfd4dc; border-radius:14px; padding:28px; text-align:center; transition: border-color .2s, background .2s; background:#fafbfc; }
.vr-dropzone.vr-drag { border-color:#111; background:#f2f4f7; }
.vr-actions { display:inline-flex; gap:.5rem; align-items:center; flex-wrap:wrap; justify-content:center; }
.vr-btn { display:inline-block; padding:.65rem 1rem; border-radius:10px; border:1px solid #111; background:#111; color:#fff; text-decoration:none; font-weight:600; cursor:pointer; }
.vr-btn.vr-secondary { background:#fff; color:#111; }
.vr-btn[disabled] { opacity:.5; cursor:not-allowed; }
.vr-file-list { margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.vr-file-item { border:1px solid #eee; border-radius:12px; padding:10px 12px; display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.vr-file-name { font-weight:600; word-break:break-all; }
.vr-file-meta { font-size:.9rem; color:#555; }
.vr-file-remove { border:0; background:#fff; color:#d00; font-weight:700; cursor:pointer; }
.vr-progress-wrap { grid-column:1/-1; background:#f1f3f5; border-radius:999px; height:8px; overflow:hidden; }
.vr-progress { height:100%; width:0%; background:#111; transition: width .15s linear; }
.vr-note { font-size:.92rem; color:#555; }
.vr-note.vr-error { color:#b00020; font-weight:600; }
.vr-note.vr-good { color:#127b12; font-weight:600; }
.use-case-section {
  margin: 1rem 0;
}