* { box-sizing: border-box; }
:root{
	--bg: #faf7ff;
	--card: #fff;
	--muted: #7c6f8b;
	--accent: #7b61ff;
	--accent-2: #ff7b9c;
}
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: linear-gradient(180deg,var(--bg), #fff 60%); color: #231942; margin: 0; padding: 28px; }
.container { max-width: 920px; margin: 0 auto; }
h1 { font-size: 20px; margin: 0 0 12px; }
.viewer { background: linear-gradient(180deg, rgba(123,97,255,0.06), rgba(255,123,156,0.03)); height: 360px; display: flex; align-items: center; justify-content: center; border-radius: 14px; overflow: hidden; border: 1px solid rgba(36,28,60,0.04); box-shadow: 0 6px 30px rgba(36,28,60,0.06); }
video { width: 100%; max-width: 700px; height: auto; transform: scaleX(-1); border-radius: 8px; }
.controls { display: flex; gap: 12px; margin: 14px 0; align-items: center; flex-wrap: wrap; }
.filters { display: flex; gap: 8px; align-items: center; background: rgba(255,255,255,0.7); padding: 6px; border-radius: 999px; box-shadow: 0 6px 18px rgba(36,28,60,0.04); backdrop-filter: blur(4px); z-index: 2; }
.filters { overflow: visible; }
.filter-btn { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(36,28,60,0.06); background: rgba(255,255,255,0.98); cursor: pointer; font-size: 13px; color: var(--muted); min-width:64px; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; }
.filter-btn.active { background: linear-gradient(90deg,var(--accent),var(--accent-2)); color: white; border: none; box-shadow: 0 6px 18px rgba(123,97,255,0.12); }
.controls .button, .controls button, .controls a { padding: 10px 14px; border-radius: 10px; border: none; background: var(--card); cursor: pointer; text-decoration: none; color: #231942; box-shadow: 0 4px 14px rgba(36,28,60,0.06); }
.controls button[disabled] { opacity: 0.6; cursor: default; }
.thumbnails { display: flex; gap: 12px; margin-top: 12px; }
.thumbnails .thumb { width: 160px; height: 120px; object-fit: cover; background: #fff; border-radius: 10px; border: 8px solid #fff; box-shadow: 0 10px 30px rgba(36,28,60,0.08); transform: rotate(-1deg); }
.thumbnails .thumb:nth-child(2){ transform: rotate(2deg); }
.thumbnails .thumb:nth-child(3){ transform: rotate(-3deg); }
.primary { background: linear-gradient(90deg,var(--accent),var(--accent-2)); color: #fff; border: none; }
button, a { font-size: 14px; }
@media (max-width:920px){
	.viewer{ height:320px }
}

@media (max-width:720px){
	.viewer{ height:260px }
	.thumbnails .thumb { width:120px; height:90px }
	.controls{ flex-direction:column; align-items:stretch; gap:10px }
	.filters{ overflow-x:auto; -webkit-overflow-scrolling: touch; padding-bottom:6px; padding-top:6px; margin-bottom:4px }
	.filters::-webkit-scrollbar{ height:8px }
	.filters{ scrollbar-width: thin }
	.filter-btn{ flex:0 0 auto }
	.controls button, .controls a{ width:100% }
	.thumbnails{ justify-content:center; flex-wrap:wrap }
}

@media (max-width:420px){
	body{ padding:18px }
	.viewer{ border-radius:10px }
	.filters{ gap:6px }
	.filter-btn{ padding:8px 10px; font-size:13px }
	.preview-card{ padding:12px }
	.preview-area{ padding:8px }
	.preview-actions{ flex-direction:column }
	.preview-actions .button, .preview-actions a{ width:100% }
}

.preview-card{ background: var(--card); padding:18px; border-radius:12px; box-shadow: 0 10px 30px rgba(36,28,60,0.06); margin-top:10px }
.preview-card h1{ font-size:18px; margin:0 0 8px }
.preview-area{ min-height:140px; display:flex; align-items:center; justify-content:center; border-radius:8px; background: linear-gradient(180deg, #fff, rgba(123,97,255,0.03)); padding:12px }
.preview-area img{ max-width:100%; height:auto; border-radius:8px; box-shadow: 0 8px 24px rgba(36,28,60,0.08) }
.preview-actions{ margin-top:12px; display:flex; gap:8px }
.back-link{ color:var(--muted); text-decoration:none; display:inline-block; margin-bottom:8px }