/**
 * Subtitle style previews (video-like frame + per-style visuals).
 * Used by subtitle-styles.html and each style detail page in styles/.
 */
:root {
  --color-primary: #159967;
}

.style-preview {
  background: #1a1a1a;
  border-radius: 8px;
  padding: 1rem;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  position: relative;
}
.preview-text {
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  max-width: 100%;
  padding: 0 4px;
}

.preview-regular .preview-text { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

.preview-rounded-box .preview-text {
  color: #fff;
  background: rgba(0,0,0,0.75);
  padding: 6px 12px;
  border-radius: 12px;
}

.preview-message-box .preview-text {
  color: #fff;
  background: rgba(0,0,0,0.8);
  padding: 8px 14px;
  border-radius: 16px 16px 16px 4px;
}

.preview-karaoke .preview-text { color: #888; }
.preview-karaoke .preview-text .hi { color: #fff; background: var(--color-primary); padding: 2px 4px; border-radius: 4px; }

.preview-karaoke-popup .preview-text { color: #888; }
.preview-karaoke-popup .preview-text .hi { color: #fff; background: var(--color-primary); padding: 2px 6px; border-radius: 4px; transform: scale(1.1); display: inline-block; }

.preview-rect-per-word .preview-text { color: #fff; }
.preview-rect-per-word .preview-text span { background: rgba(21,153,103,0.9); padding: 2px 6px; margin: 0 1px; }

.preview-rect-popup .preview-text { color: #fff; }
.preview-rect-popup .preview-text span.pop { background: var(--color-primary); padding: 3px 8px; margin: 0 2px; transform: scale(1.08); display: inline-block; }

.preview-deep-diver .preview-text {
  color: #fff;
  background: linear-gradient(180deg, #4a9eff 0%, #1a5fb4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.preview-deep-diver .preview-text { -webkit-text-fill-color: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }

.preview-gradient-text .preview-text {
  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.preview-3d-shadow .preview-text {
  color: #fff;
  text-shadow: 1px 1px 0 #333, 2px 2px 0 #333, 3px 3px 0 #333, 4px 4px 0 #222;
}

.preview-glitch .preview-text {
  color: #fff;
  text-shadow: -2px 0 #f0f, 2px 0 #0ff;
  transform: skew(-2deg);
  animation: glitch 2s infinite;
}
@keyframes glitch {
  0%, 90% { transform: skew(-2deg); }
  92% { transform: skew(2deg) translate(-2px, 1px); }
  94% { transform: skew(-2deg) translate(2px, -1px); }
  96% { transform: skew(2deg); }
  98% { transform: skew(-2deg); }
}

.preview-minimalist .preview-text { color: rgba(255,255,255,0.95); font-weight: 400; letter-spacing: 0.02em; }

.preview-bounce .preview-text { color: #fff; animation: bounce 1.5s ease-in-out infinite; }
@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.preview-wave .preview-text { color: #fff; display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; }
.preview-wave .preview-text span { display: inline-block; animation: wave 1.2s ease-in-out infinite; }
.preview-wave .preview-text span:nth-child(2n) { animation-delay: 0.15s; }
.preview-wave .preview-text span:nth-child(3n) { animation-delay: 0.3s; }
@keyframes wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.preview-cinematic .preview-text { color: #f5e6a3; text-shadow: 0 0 20px rgba(0,0,0,0.8), 0 2px 4px #000; font-family: Georgia, serif; }

.preview-bold-outline .preview-text {
  color: #fff;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
}

.preview-emoji .preview-text { color: #fff; }
.preview-emoji .preview-text .e { font-style: normal; }

.preview-fade .preview-text { color: #fff; animation: fade 2.5s ease-in-out infinite; }
@keyframes fade {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.preview-typewriter .preview-text { color: #fff; border-right: 3px solid #fff; animation: blink 0.8s step-end infinite; }
@keyframes blink { 50% { border-color: transparent; } }

.preview-neon .preview-text {
  color: #fff;
  text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff;
}

.preview-slide .preview-text { color: #fff; animation: slideIn 2s ease-out infinite; }
@keyframes slideIn {
  0% { transform: translateX(-30px); opacity: 0; }
  30%, 100% { transform: translateX(0); opacity: 1; }
}

.preview-spotlight .preview-text {
  color: #fff;
  background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255,255,255,0.25), transparent);
  padding: 6px 12px;
}

.preview-retro .preview-text {
  color: #0f0;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 4px #0f0;
  letter-spacing: 2px;
}

.preview-comic .preview-text {
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  -webkit-text-stroke: 1px #000;
  text-shadow: 2px 2px 0 #000;
}

.preview-color-shadow .preview-text {
  color: #fff;
  text-shadow: 2px 2px 0 #f0f, 4px 4px 0 #0ff;
}

.preview-pulse .preview-text { color: #fff; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.preview-split .preview-text { color: #fff; }
.preview-split .preview-text .a { color: #48dbfb; }
.preview-split .preview-text .b { color: #ff6b6b; }

.preview-underline .preview-text { color: #fff; }
.preview-underline .preview-text .hi { text-decoration: underline; text-decoration-color: var(--color-primary); text-underline-offset: 4px; text-decoration-thickness: 3px; }

/* ── Enriched style detail page components ── */

.style-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 0.5rem;
  position: relative;
  top: -2px;
}
.badge-animated { background: #ede9fe; color: #6d28d9; }
.badge-static { background: #e0f2fe; color: #0369a1; }
.badge-interactive { background: #fef3c7; color: #92400e; }

.quick-facts {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  background: #f9fafb;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin: 1.5rem 0;
}
.quick-facts .qf-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 100px;
}
.quick-facts .qf-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-muted);
}
.quick-facts .qf-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.tag-pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.feature-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.fh-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1rem;
}
.fh-card .fh-icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.4rem;
}
.fh-card h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.fh-card p {
  font-size: 0.8rem;
  color: var(--color-muted);
  line-height: 1.45;
}

.tips-list {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.tip-item .tip-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.tip-item p {
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.5;
  margin: 0;
}

.similar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}
.similar-card {
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.15s;
}
.similar-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.similar-card .style-preview {
  margin-bottom: 0;
  min-height: 48px;
  border-radius: 0;
}
.similar-card .similar-name {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

.style-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border);
}
.style-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: background 0.15s;
}
.style-nav-link:hover {
  background: #ecfdf5;
}

@media (max-width: 600px) {
  .quick-facts { gap: 1rem; }
  .similar-grid { grid-template-columns: 1fr; }
  .feature-highlights { grid-template-columns: 1fr; }
}