/* Subtitle Styles Presets & Live Preview
   Uses existing design tokens: --surface, --surface-hover, --ink, --muted, --line,
   --btn-primary-bg, --btn-primary-fg, --radius-md, --radius-card, --radius-tag, --font-ui */

/* Subtitle Preset Picker Container */
.subtitle-picker-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.subtitle-picker-title {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: var(--text-sm, 13px);
  font-weight: 700;
  color: var(--ink);
}

.subtitle-presets-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 640px) {
  .subtitle-presets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Preset Card Button */
.subtitle-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease);
}

.subtitle-preset-btn:hover {
  background: var(--surface-hover);
}

.subtitle-preset-btn.is-selected {
  border-color: var(--btn-primary-border);
  background: var(--state-active-bg);
  outline: none;
  outline-offset: -2px;
}

.subtitle-preset-name {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.subtitle-preset-desc {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Live Preview Stage */
.subtitle-preview-stage {
  position: relative;
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card, 12px);
  background: var(--preview-stage);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  padding: 16px;
  box-sizing: border-box;
}

.subtitle-preview-stage-bg {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image: radial-gradient(circle at 50% 50%, var(--media-line) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
}

.subtitle-preview-box {
  position: relative;
  z-index: var(--layer-stack-2);
  max-width: 90%;
  transition: transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease);
}

/* 1. Classroom Clean */
.sub-style-classroom {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(24, 24, 27, 0.75);
  border-radius: var(--radius-md, 8px);
  padding: 6px 14px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
  text-align: center;
  display: inline-block;
}

/* 2. Social Punch */
.sub-style-social-punch {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 20px;
  font-weight: 900;
  color: #ffe600;
  text-shadow: 0 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
  background: transparent;
  padding: 4px 10px;
  text-align: center;
  display: inline-block;
  letter-spacing: 0.04em;
}

/* 3. Bilingual Stacked */
.sub-style-bilingual {
  font-family: var(--font-ui, system-ui, sans-serif);
  background: rgba(24, 24, 27, 0.85);
  border-radius: var(--radius-md, 8px);
  padding: 8px 16px;
  text-align: center;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.sub-style-bilingual .sub-primary {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.sub-style-bilingual .sub-secondary {
  font-size: 12px;
  font-weight: 400;
  color: var(--media-muted, #D4D4D8);
}

/* 4. Karaoke Highlight */
.sub-style-karaoke {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 17px;
  font-weight: 700;
  background: rgba(16, 25, 22, 0.85);
  border-radius: var(--radius-tag, 999px);
  padding: 6px 18px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: rgba(255, 255, 255, 0.5);
}

.sub-style-karaoke .k-active {
  color: var(--accent-mint, currentColor);
  font-weight: 800;
}

/* 5. Bottom Bar */
.sub-style-bottom-bar {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: #f5f5f4;
  background: rgba(15, 23, 42, 0.92);
  width: 100%;
  padding: 8px 16px;
  text-align: center;
  box-sizing: border-box;
}

/* 6. None */
.sub-style-none {
  display: none !important;
}

.sub-style-none-placeholder {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 12px;
  color: var(--media-muted, #D4D4D8);
  font-style: italic;
  padding: 8px 14px;
}