:root { --dfvm-primary: #25b9d7; --dfvm-bg: #f6f9fa; --dfvm-radius: 8px; }
.dfvm-library, .dfvm-watch { max-width: 1180px; margin: 0 auto; padding: 24px 15px; }
.dfvm-hero { margin-bottom: 20px; }
.dfvm-hero h1, .dfvm-watch h1 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; }
.dfvm-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dfvm-pill { display: inline-block; padding: 8px 13px; border-radius: 999px; background: var(--dfvm-bg); color: #40535a; text-decoration: none; }
.dfvm-pill.is-active, .dfvm-pill:hover { background: var(--dfvm-primary); color: #fff; text-decoration: none; }
.dfvm-search { display: flex; gap: 8px; margin-bottom: 22px; }
.dfvm-search input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #d9e1e5; border-radius: var(--dfvm-radius); }
.dfvm-search button, .dfvm-product-link, .dfvm-copy { border: 0; background: var(--dfvm-primary); color: #fff; padding: 10px 14px; border-radius: var(--dfvm-radius); text-decoration: none; }
.dfvm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.dfvm-card { background: #fff; border: 1px solid #e3e9ec; border-radius: var(--dfvm-radius); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.dfvm-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.dfvm-card-media { position: relative; display: block; background: #1a1a1a; overflow: hidden; }
.dfvm-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dfvm-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; line-height: 54px; text-align: center; border-radius: 50%; background: rgba(37,185,215,.9); color: #fff; }
.dfvm-card-body { padding: 14px; }
.dfvm-card-body h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
.dfvm-badge { display: inline-block; margin-bottom: 10px; padding: 4px 8px; border-radius: 999px; background: #edf6f8; color: #40717b; font-size: 12px; }
.dfvm-product-link { display: inline-block; font-size: 13px; padding: 7px 10px; }
.dfvm-pagination { margin-top: 24px; text-align: center; }
.dfvm-pagination a { display: inline-block; min-width: 34px; padding: 8px; margin: 0 3px; border-radius: 4px; background: var(--dfvm-bg); }
.dfvm-pagination a.is-active { background: var(--dfvm-primary); color: #fff; }
.dfvm-breadcrumb { margin-bottom: 14px; color: #718189; }
.dfvm-player { position: relative; width: 100%; background: #1a1a1a; border-radius: var(--dfvm-radius); overflow: hidden; }
.dfvm-player video, .dfvm-player-error { position: absolute; inset: 0; width: 100%; height: 100%; }
.dfvm-player video { object-fit: contain; background: #1a1a1a; }
.dfvm-player video,
.dfvm-player:fullscreen video,
.dfvm-player:-webkit-full-screen video {
  object-fit: contain !important;
}
.dfvm-player.is-fullscreen,
.dfvm-player:fullscreen,
.dfvm-player:-webkit-full-screen,
.dfvm-player:-moz-full-screen,
.dfvm-player:-ms-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  padding-top: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
}
.dfvm-player.is-fullscreen video,
.dfvm-player:fullscreen video,
.dfvm-player:-webkit-full-screen video,
.dfvm-player:-moz-full-screen video,
.dfvm-player:-ms-fullscreen video {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  background: #000 !important;
}
.dfvm-video:fullscreen,
.dfvm-video:-webkit-full-screen,
.dfvm-video:-moz-full-screen,
.dfvm-video:-ms-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: contain !important;
  background: #000 !important;
}

.dfvm-big-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #000; font-size: 34px; line-height: 76px; text-align: center; z-index: 3; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.dfvm-big-play.is-hidden { opacity: 0; pointer-events: none; }
.dfvm-controls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px 14px; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.32), transparent); color: #fff; z-index: 4; }
.dfvm-controls button { min-width: 34px; height: 34px; border: 0; border-radius: 4px; color: #fff; background: transparent; font-size: 13px; }
.dfvm-controls input[type=range] { accent-color: var(--dfvm-primary); }
.dfvm-controls [data-progress] { flex: 1; min-width: 60px; }
.dfvm-controls [data-time] { min-width: 80px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.dfvm-menu { position: absolute; right: 8px; bottom: 48px; min-width: 150px; padding: 6px; border-radius: 6px; background: rgba(20,20,20,.96); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.dfvm-menu button, .dfvm-menu a { display: block; width: 100%; padding: 8px 10px; color: #fff; text-align: left; text-decoration: none; background: transparent; border: 0; font-size: 13px; }
.dfvm-menu button:hover, .dfvm-menu a:hover { background: rgba(255,255,255,.12); color: #fff; }
.dfvm-player-error { display: flex; align-items: center; justify-content: center; background: #1a1a1a; color: #fff; padding: 20px; text-align: center; }
.hidden { display: none !important; }
.dfvm-watch-head { margin-top: 18px; }
.dfvm-description { font-size: 15px; line-height: 1.6; }
.dfvm-related-product, .dfvm-share { margin-top: 20px; padding: 16px 0; border-top: 1px solid #e3e9ec; }
.dfvm-share { display: flex; gap: 8px; }
.dfvm-share input { flex: 1; padding: 10px; border: 1px solid #d9e1e5; border-radius: var(--dfvm-radius); }
@media (max-width: 767px) {
  .dfvm-library, .dfvm-watch { padding: 16px 10px; }
  .dfvm-grid { grid-template-columns: 1fr; }
  .dfvm-search, .dfvm-share { flex-direction: column; }
  .dfvm-big-play { width: 66px; height: 66px; line-height: 66px; font-size: 30px; }
  .dfvm-controls { gap: 5px; padding: 6px 8px 10px; }
  .dfvm-controls button { min-width: 32px; height: 32px; padding: 0 4px; }
  .dfvm-controls [data-time] { display: inline-block; min-width: 74px; font-size: 13px; }
  .dfvm-controls [data-volume] { display: none; }
  .dfvm-controls [data-mute] { min-width: 38px; }
  .dfvm-controls [data-progress] { height: 20px; }
}