.cswvp-instance {
  --cswvp-accent: #1e73be;
  --cswvp-radius: 18px;
  --cswvp-text: #1f2937;
  --cswvp-muted: #6b7280;
  --cswvp-border: #dbe3eb;
  --cswvp-surface: #ffffff;
  --cswvp-surface-alt: #f8fafc;
  position: relative;
}
.cswvp-filter-grid,
.cswvp-grid { display: grid; gap: 16px; }
.cswvp-filter-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 16px; }
.cswvp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cswvp-columns-1 .cswvp-grid { grid-template-columns: 1fr; }
.cswvp-columns-2 .cswvp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cswvp-columns-3 .cswvp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cswvp-columns-4 .cswvp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cswvp-filters label { display:block; }
.cswvp-filters span { display:block; margin-bottom:6px; font-weight:600; color:var(--cswvp-text); }
.cswvp-filters input[type="search"],
.cswvp-filters input[type="date"],
.cswvp-filters select {
  width:100%; box-sizing:border-box; border:1px solid var(--cswvp-border); border-radius:10px;
  padding:12px 14px; background:#fff; min-height:44px;
}
.cswvp-chip-row { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px; }
.cswvp-chip {
  border:1px solid var(--cswvp-border); background:#fff; color:var(--cswvp-text);
  border-radius:999px; padding:9px 14px; cursor:pointer; transition:.2s ease;
}
.cswvp-chip.is-active, .cswvp-chip:hover { background:var(--cswvp-accent); color:#fff; border-color:var(--cswvp-accent); }
.cswvp-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.cswvp-button, .cswvp-reset {
  border:none; border-radius:12px; padding:11px 16px; text-decoration:none; cursor:pointer;
  background:var(--cswvp-accent); color:#fff; font-weight:600; display:inline-flex; align-items:center; justify-content:center;
}
.cswvp-button.is-secondary { background:transparent; color:var(--cswvp-accent); border:1px solid var(--cswvp-accent); }
.cswvp-reset { background:#eef2f7; color:var(--cswvp-text); }
.cswvp-status { color:var(--cswvp-muted); min-height:1.2em; }
.cswvp-card { perspective: 1200px; }
.cswvp-flip { height:100%; }
.cswvp-flip-inner { position:relative; min-height:480px; transform-style:preserve-3d; transition:transform .55s ease; }
.cswvp-flip.is-flipped .cswvp-flip-inner { transform: rotateY(180deg); }
.cswvp-face {
  position:absolute; inset:0; backface-visibility:hidden; background:var(--cswvp-surface);
  border:1px solid var(--cswvp-border); border-radius:var(--cswvp-radius); overflow:hidden;
  box-shadow:0 10px 24px rgba(15,23,42,.08); display:flex; flex-direction:column;
}
.cswvp-back { transform:rotateY(180deg); background:var(--cswvp-surface-alt); }
.cswvp-thumb-button { position:relative; border:none; padding:0; background:none; cursor:pointer; display:block; width:100%; }
.cswvp-thumb { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.cswvp-play-icon {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background:rgba(0,0,0,.62); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.cswvp-duration {
  position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.8); color:#fff;
  padding:4px 8px; border-radius:8px; font-size:12px;
}
.cswvp-content { padding:18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.cswvp-title { margin:0; font-size:1.15rem; line-height:1.3; color:var(--cswvp-text); }
.cswvp-meta { margin:0; color:var(--cswvp-muted); font-size:.95rem; }
.cswvp-front-text, .cswvp-back-text { color:var(--cswvp-text); line-height:1.6; }
.cswvp-toggle { align-self:flex-start; border:none; background:none; padding:0; color:var(--cswvp-accent); font-weight:700; cursor:pointer; }
.cswvp-tags { display:flex; flex-wrap:wrap; gap:8px; }
.cswvp-tag { font-size:.85rem; border-radius:999px; padding:6px 10px; background:#eef5ff; color:var(--cswvp-accent); }
.cswvp-card-actions { margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; }
.cswvp-pagination { display:flex; gap:8px; justify-content:center; margin-top:18px; }
.cswvp-pagination a {
  text-decoration:none; min-width:40px; height:40px; border-radius:10px; border:1px solid var(--cswvp-border);
  display:inline-flex; align-items:center; justify-content:center; color:var(--cswvp-text); background:#fff;
}
.cswvp-pagination a.is-current, .cswvp-pagination a:hover { background:var(--cswvp-accent); color:#fff; border-color:var(--cswvp-accent); }
.cswvp-empty, .cswvp-note { padding:18px; border:1px solid var(--cswvp-border); border-radius:var(--cswvp-radius); background:#fff; }
.cswvp-modal[hidden] { display:none; }
.cswvp-modal {
  position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
}
.cswvp-modal-overlay { position:absolute; inset:0; background:rgba(15,23,42,.78); }
.cswvp-modal-dialog {
  position:relative; z-index:1; width:min(1000px, calc(100vw - 32px)); background:#000; border-radius:18px;
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.cswvp-modal-header {
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; background:#111827; color:#fff;
}
.cswvp-modal-title { margin:0; font-size:1rem; }
.cswvp-modal-close { border:none; background:none; color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.cswvp-modal-body { position:relative; aspect-ratio:16/9; }
.cswvp-modal-body iframe { width:100%; height:100%; border:0; display:block; }
@media (max-width: 1024px) {
  .cswvp-columns-4 .cswvp-grid, .cswvp-columns-3 .cswvp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .cswvp-grid, .cswvp-columns-4 .cswvp-grid, .cswvp-columns-3 .cswvp-grid, .cswvp-columns-2 .cswvp-grid { grid-template-columns: 1fr; }
  .cswvp-flip-inner { min-height: 440px; }
}


.cswvp-card { display:block; }
.cswvp-flip { position:relative; width:100%; }
.cswvp-flip-inner { width:100%; }
.cswvp-front { transform:rotateY(0deg); z-index:2; }
.cswvp-face { -webkit-backface-visibility:hidden; backface-visibility:hidden; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; }
.cswvp-back { -webkit-transform:rotateY(180deg); transform:rotateY(180deg); }
.cswvp-flip:not(.is-flipped) .cswvp-back { visibility:hidden; }
.cswvp-flip.is-flipped .cswvp-front { visibility:hidden; }