/* ============================================
   MIXER 模块样式
   从 index.html 提取
   ============================================ */
/* 引入主题变量 */
@import url('/common/frontend/styles/theme.css');

.bg-color-chip.ratio-active, .ratio-chip.ratio-active { }
.pexels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}
.pexels-item {
  position: relative;
  aspect-ratio: 9/16;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
}
.pexels-item:hover { border-color: var(--accent-start); }
.pexels-item.selected { border-color: var(--accent-start); }
.pexels-item img { width: 100%; height: 100%; object-fit: cover; }
.pexels-item .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  font-size:12px;
  color: white;
}