/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SolutionGigs – Shorts Caption Page Styles
   Extends converter-dark.css (loaded first)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.sc-hero {
  background: linear-gradient(135deg, rgba(60,20,80,0.55) 0%, rgba(7,6,26,0) 80%);
  border-bottom: 1px solid var(--cv-border);
  padding: 42px 0 36px;
}
.sc-hero-inner {
  display: flex;
  align-items: center;
  gap: 22px;
}
.sc-hero-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: rgba(212,184,204,0.1);
  border: 1px solid var(--cv-border-mid);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cv-lavender);
}
.sc-hero h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 6px; letter-spacing: -.02em; line-height: 1.2; }
.sc-hero p  { color: var(--cv-text-mid); font-size: .95rem; margin: 0; line-height: 1.5; }

@media (max-width: 600px) {
  .sc-hero { padding: 28px 0 24px; }
  .sc-hero h1 { font-size: 1.3rem; }
  .sc-hero-icon { width: 50px; height: 50px; border-radius: 12px; }
  .sc-hero-inner { gap: 14px; }
}

/* ── Content wrap ─────────────────────────────────────────────────────── */
.sc-content-wrap { flex: 1; padding: 32px 0 48px; position: relative; z-index: 10; }

/* ── Formats note ─────────────────────────────────────────────────────── */
.sc-formats-note {
  font-size: .82rem;
  color: var(--cv-text-dim);
  text-align: center;
  margin: 0 0 22px;
  line-height: 1.6;
}
.sc-formats-note strong { color: var(--cv-text-mid); font-weight: 500; }

/* ── Section label ────────────────────────────────────────────────────── */
.sc-section-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cv-lavender);
  opacity: .75;
  margin-bottom: 12px;
}

/* ── CSS keyframe animations for card previews ───────────────────────── */

/* Sports: elastic spring pop (mirrors the ASS elastic easing) */
@keyframes sc-kf-sports {
  0%   { transform: scale(0.05); filter: blur(5px); opacity: 0; }
  58%  { transform: scale(1.32); filter: blur(0);   opacity: 1; }
  76%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

@keyframes sc-kf-karaoke {
  0%,100% { background-size: 0% 100%; }
  50%      { background-size: 100% 100%; }
}
@keyframes sc-kf-pop {
  0%   { transform: scale(0.05); opacity: 0; }
  65%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes sc-kf-zoom {
  0%   { transform: scale(1.9); opacity: .6; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes sc-kf-bounce {
  0%   { transform: translateY(16px) scaleY(.7); opacity: 0; }
  55%  { transform: translateY(-4px) scaleY(1.08) scaleX(.94); opacity: 1; }
  75%  { transform: translateY(2px) scaleY(.96); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes sc-kf-slide {
  0%   { transform: translateY(18px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes sc-kf-blur {
  0%   { filter: blur(10px); opacity: .3; }
  100% { filter: blur(0); opacity: 1; }
}
@keyframes sc-kf-typewriter {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes sc-kf-neon {
  0%,100% { text-shadow: 0 0 4px #FF00FF, 0 0 10px #FF00FF; }
  50%      { text-shadow: 0 0 12px #FF00FF, 0 0 24px #FF00FF, 0 0 40px #FF00FF; }
}
@keyframes sc-kf-stomp {
  0%   { transform: translateY(-20px) scaleY(1.4) scaleX(.7); opacity: .5; }
  60%  { transform: scaleX(1.18) scaleY(.78); }
  80%  { transform: scaleX(.96) scaleY(1.04); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes sc-kf-shake {
  0%   { transform: scaleX(1.4) scaleY(.65); }
  30%  { transform: scaleX(.8) scaleY(1.2); }
  60%  { transform: scaleX(1.08) scaleY(.94); }
  100% { transform: scale(1); }
}
@keyframes sc-kf-highlight-pulse {
  0%,100% { opacity: .9; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.08); }
}

/* ── Preset grid ─────────────────────────────────────────────────────── */
.sc-presets-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}

.sc-preset-card {
  background: rgba(255,255,255,0.04);
  border: 2px solid var(--cv-border);
  border-radius: 12px;
  padding: 10px 8px 8px;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.sc-preset-card:hover {
  border-color: var(--cv-border-mid);
  background: rgba(255,255,255,0.07);
}
.sc-preset-card.sc-preset-active {
  border-color: var(--cv-lavender);
  background: rgba(212,184,204,0.1);
}

/* ── Preview area inside each card ──────────────────────────────────── */
.sc-preset-preview {
  width: 100%;
  height: 56px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: .73rem;
  font-weight: 800;
  flex-wrap: wrap;
  padding: 4px 6px;
  background: #070614;
  overflow: hidden;
}

.sc-pv-word { color: #fff; white-space: nowrap; font-weight: 700; }

/* ── Sports: viral football/sports edit ─────────────────────────────── */
.sc-prev-sports { background: #050510; }
.sc-prev-sports .sc-pv-word {
  color: #fff;
  font-weight: 900;
  letter-spacing: .04em;
  font-size: .67rem;
}
.sc-prev-sports .sc-pv-active {
  color: #FFFF00;
  font-size: .88rem;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255,255,0,.55), 0 3px 0 rgba(0,0,0,.9);
  animation: sc-kf-sports 1.15s cubic-bezier(.17,1.35,.5,1) infinite;
}

/* ── Karaoke: yellow kf-fill effect ─────────────────────────────────── */
.sc-prev-karaoke .sc-pv-word { color: #fff; }
.sc-prev-karaoke .sc-pv-active {
  color: #FFFF00;
  animation: sc-kf-highlight-pulse 1.2s ease-in-out infinite;
}

/* ── Hormozi: green active word on white ─────────────────────────────── */
.sc-prev-hormozi .sc-pv-word  { color: #fff; font-weight: 900; letter-spacing: .02em; }
.sc-prev-hormozi .sc-pv-active {
  color: #00FF00;
  animation: sc-kf-highlight-pulse 1.2s ease-in-out infinite;
}

/* ── Popline: orange active word ─────────────────────────────────────── */
.sc-prev-popline .sc-pv-word  { color: #fff; font-weight: 900; }
.sc-prev-popline .sc-pv-active {
  color: #FF8800;
  animation: sc-kf-highlight-pulse 1.2s ease-in-out infinite;
}

/* ── Minimal: gray + cyan ─────────────────────────────────────────────── */
.sc-prev-minimal .sc-pv-word  { color: #888; font-weight: 400; }
.sc-prev-minimal .sc-pv-active {
  color: #00FFFF;
  animation: sc-kf-highlight-pulse 1.2s ease-in-out infinite;
}

/* ── Luxury: silver + gold ───────────────────────────────────────────── */
.sc-prev-luxury { background: #0a0808; }
.sc-prev-luxury .sc-pv-word  { color: #BBBBBB; font-weight: 700; letter-spacing: .05em; }
.sc-prev-luxury .sc-pv-active {
  color: #FFD700;
  animation: sc-kf-highlight-pulse 1.2s ease-in-out infinite;
}

/* ── Shadow Box: white text, white outline, dark opaque box ─────────── */
@keyframes sc-kf-shadow {
  0%,100% { text-shadow: 0 0 0 rgba(255,255,255,0); }
  50%      { text-shadow: 0 0 8px rgba(255,255,255,.7), 0 0 16px rgba(255,255,255,.3); }
}
.sc-prev-shadow { background: #050505; }
.sc-prev-shadow .sc-pv-word  {
  color: #fff;
  font-weight: 900;
  text-shadow: 0 0 4px rgba(255,255,255,.25);
}
.sc-prev-shadow .sc-pv-active {
  color: #FFFF00;
  font-weight: 900;
  animation: sc-kf-shadow 1.3s ease-in-out infinite;
}

/* ── Pop In ──────────────────────────────────────────────────────────── */
.sc-prev-pop .sc-pv-active {
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  animation: sc-kf-pop 1.1s cubic-bezier(.36,1.56,.64,1) infinite;
}

/* ── Zoom Punch ──────────────────────────────────────────────────────── */
.sc-prev-zoom .sc-pv-active {
  color: #FFFF00;
  font-size: 1rem;
  font-weight: 900;
  animation: sc-kf-zoom .9s ease-out infinite;
}

/* ── Bounce ──────────────────────────────────────────────────────────── */
.sc-prev-bounce .sc-pv-active {
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  animation: sc-kf-bounce .95s cubic-bezier(.36,1.4,.64,1) infinite;
}

/* ── Slide Up ─────────────────────────────────────────────────────────── */
.sc-prev-slide .sc-pv-active {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  animation: sc-kf-slide .7s ease-out infinite;
}

/* ── Blur In ──────────────────────────────────────────────────────────── */
.sc-prev-blur .sc-pv-active {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  animation: sc-kf-blur .8s ease-out infinite;
}

/* ── Typewriter ──────────────────────────────────────────────────────── */
.sc-prev-typewriter {
  font-family: monospace;
}
.sc-prev-typewriter .sc-pv-active {
  color: #ddd;
  font-size: .95rem;
  font-weight: 400;
  animation: sc-kf-typewriter .6s ease-in infinite;
}

/* ── Neon ─────────────────────────────────────────────────────────────── */
.sc-prev-neon { background: #030209; }
.sc-prev-neon .sc-pv-active {
  color: #FF00FF;
  font-size: 1rem;
  font-weight: 900;
  animation: sc-kf-neon 1.4s ease-in-out infinite;
}

/* ── Stomp ───────────────────────────────────────────────────────────── */
.sc-prev-stomp .sc-pv-active {
  color: #FFFF00;
  font-size: 1.05rem;
  font-weight: 900;
  text-shadow: 0 3px 0 rgba(0,0,0,.7);
  animation: sc-kf-stomp .85s cubic-bezier(.36,1.4,.64,1) infinite;
}

/* ── Shake ───────────────────────────────────────────────────────────── */
.sc-prev-shake .sc-pv-active {
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  text-shadow: 0 0 0 #00ff00;
  animation: sc-kf-shake .75s ease-out infinite;
}

.sc-preset-name {
  font-size: .73rem;
  font-weight: 600;
  color: var(--cv-text-mid);
  line-height: 1;
}
.sc-preset-card.sc-preset-active .sc-preset-name { color: var(--cv-lavender); }

/* ── Aspect ratio selector ────────────────────────────────────────────── */
.sc-ratio-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.sc-ratio-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--cv-border);
  color: var(--cv-text-mid);
  font-size: .83rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.sc-ratio-btn:hover {
  border-color: var(--cv-border-mid);
  background: rgba(255,255,255,0.07);
  color: var(--cv-text);
}
.sc-ratio-btn.sc-ratio-active {
  border-color: var(--cv-lavender);
  background: rgba(212,184,204,0.1);
  color: var(--cv-lavender);
}

/* ── Edit layout ──────────────────────────────────────────────────────── */
.sc-edit-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

/* Left panel */
.sc-edit-info-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--cv-border);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
}
.sc-edit-info-icon {
  width: 52px;
  height: 52px;
  background: rgba(212,184,204,0.1);
  border: 1px solid var(--cv-border-mid);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cv-lavender);
  margin: 0 auto 12px;
}
.sc-edit-filename {
  font-size: .85rem;
  font-weight: 600;
  color: var(--cv-text);
  margin: 0 0 4px;
  word-break: break-all;
}
.sc-edit-duration {
  font-size: .78rem;
  color: var(--cv-text-dim);
  margin: 0 0 14px;
}
.sc-edit-hint {
  font-size: .78rem;
  color: var(--cv-text-dim);
  line-height: 1.5;
  margin: 0;
}
.sc-edit-legend {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .77rem;
  color: var(--cv-text-dim);
}
.sc-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Right panel – scene analysis */
.sc-edit-right {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--cv-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 520px;
}
.sc-scene-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cv-border);
  font-size: .84rem;
  font-weight: 600;
  color: var(--cv-text);
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}
.sc-scene-header svg { color: var(--cv-lavender); }
.sc-seg-count {
  margin-left: auto;
  font-size: .75rem;
  font-weight: 400;
  color: var(--cv-text-dim);
}

.sc-segments-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,184,204,0.2) transparent;
}
.sc-segments-list::-webkit-scrollbar { width: 5px; }
.sc-segments-list::-webkit-scrollbar-track { background: transparent; }
.sc-segments-list::-webkit-scrollbar-thumb { background: rgba(212,184,204,0.2); border-radius: 4px; }

/* Individual segment row */
.sc-seg {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sc-seg:last-child { border-bottom: none; }

.sc-seg-time {
  font-size: .73rem;
  font-weight: 600;
  color: var(--cv-lavender);
  opacity: .75;
  padding-top: 6px;
  white-space: nowrap;
}

.sc-seg-text {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--cv-border);
  border-radius: 7px;
  color: var(--cv-text);
  font-size: .85rem;
  line-height: 1.55;
  padding: 6px 10px;
  resize: vertical;
  min-height: 40px;
  font-family: inherit;
  transition: border-color .15s;
}
.sc-seg-text:focus {
  outline: none;
  border-color: var(--cv-border-mid);
}
.sc-seg-text.sc-seg-edited {
  border-color: rgba(212,184,204,0.4);
}

/* ── Generate button row ──────────────────────────────────────────────── */
.sc-generate-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.sc-btn-generate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(100,60,160,0.6), rgba(60,20,100,0.8));
  border: 1px solid rgba(212,184,204,0.3);
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  padding: 11px 26px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  letter-spacing: .01em;
}
.sc-btn-generate:hover {
  background: linear-gradient(135deg, rgba(120,70,180,0.75), rgba(80,30,130,0.9));
  border-color: rgba(212,184,204,0.5);
}

.sc-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--cv-border);
  color: var(--cv-text-dim);
  font-size: .83rem;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.sc-btn-back:hover {
  border-color: var(--cv-border-mid);
  color: var(--cv-text-mid);
}

/* ── Result header ────────────────────────────────────────────────────── */
.sc-result-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.sc-result-badge {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: rgba(15,181,125,0.18);
  border: 1px solid rgba(15,181,125,0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cv-green);
  margin-top: 2px;
}
.sc-result-title { font-weight: 600; font-size: 1rem; margin: 0 0 3px; color: var(--cv-text); }
.sc-result-meta  { font-size: .83rem; color: var(--cv-text-mid); margin: 0; }

/* ── Inline video preview ─────────────────────────────────────────────── */
.sc-video-wrap {
  margin: 0 auto 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 340px;
}
.sc-preview-video {
  width: 100%;
  border-radius: 12px;
  background: #000;
  display: block;
  /* Respect aspect ratio — browser sizes height automatically */
  max-height: 560px;
  box-shadow: 0 4px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);
}
.sc-video-hint {
  font-size: .75rem;
  color: var(--cv-text-dim, #888);
  margin: 0;
  text-align: center;
}

/* ── Result action buttons ────────────────────────────────────────────── */
.sc-result-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sc-result-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sc-btn-dl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(15,181,125,0.12);
  border: 1px solid rgba(15,181,125,0.3);
  color: var(--cv-green);
  font-size: .88rem;
  font-weight: 600;
  padding: 10px 28px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, border-color .18s;
}
.sc-btn-dl:hover { background: rgba(15,181,125,0.22); border-color: rgba(15,181,125,0.5); }

.sc-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cv-lav-glow);
  border: 1px solid var(--cv-border-mid);
  color: var(--cv-lavender);
  font-size: .84rem;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.sc-btn-secondary:hover {
  background: rgba(212,184,204,0.18);
  border-color: var(--cv-border-hi);
  color: #fff;
}
.sc-btn-result-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--cv-border);
  color: var(--cv-text-mid);
  font-size: .82rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.sc-btn-result-edit:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--cv-border-mid);
  color: var(--cv-text);
}

/* ── How it works ─────────────────────────────────────────────────────── */
.sc-how-section { margin-top: 48px; }
.sc-how-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 24px;
  text-align: center;
  letter-spacing: -.01em;
  color: var(--cv-text);
}
.sc-how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.sc-how-step {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--cv-border);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
}
.sc-how-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(212,184,204,0.12);
  border: 1px solid var(--cv-border-mid);
  color: var(--cv-lavender);
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.sc-how-step h3 { font-size: .88rem; font-weight: 600; margin: 0 0 6px; color: var(--cv-text); }
.sc-how-step p  { font-size: .8rem; color: var(--cv-text-dim); margin: 0; line-height: 1.5; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .sc-presets-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 700px) {
  .sc-presets-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 540px) {
  .sc-presets-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .sc-edit-layout { grid-template-columns: 1fr; }
  .sc-edit-right  { max-height: 380px; }
  .sc-how-steps   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .sc-how-steps           { grid-template-columns: 1fr; }
  .sc-result-actions      { flex-direction: column; align-items: stretch; }
  .sc-result-secondary    { flex-direction: column; align-items: stretch; }
  .sc-btn-dl,
  .sc-btn-secondary,
  .sc-btn-result-edit,
  .sc-btn-generate,
  .sc-btn-back            { justify-content: center; }
  .sc-generate-row        { flex-direction: column; align-items: stretch; }
  .sc-ratio-row           { gap: 6px; }
  .sc-video-wrap          { max-width: 100%; }
}