/* =========================================================
   MASTER CONVERTER SUITE — Script to Video styles (.s2v-*)
   Accent: rose #f43f5e
   ========================================================= */

.s2v-workspace { max-width: 1100px; margin: 0 auto; padding: var(--space-4, 16px); display: flex; flex-direction: column; gap: var(--space-4, 16px); }

.s2v-back {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    background: transparent; border: none; color: var(--color-text-secondary, #94a3b8);
    cursor: pointer; font-size: 14px; padding: 4px 0;
}
.s2v-back:hover { color: var(--color-text-primary, #f1f5f9); }

.s2v-head { display: flex; align-items: center; gap: 10px; }
.s2v-head svg { color: #f43f5e; }
.s2v-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--color-text-primary, #f1f5f9); }
.s2v-head p { margin: 0; font-size: 13px; color: var(--color-text-secondary, #94a3b8); }

.s2v-input-card, .s2v-scene, .s2v-review {
    background: var(--glass-bg, rgba(15,22,40,0.75));
    border: var(--glass-border, 1px solid rgba(255,255,255,0.07));
    border-radius: var(--radius-lg, 16px); padding: var(--space-4, 16px);
}

.s2v-topic {
    width: 100%; min-height: 80px; resize: vertical; padding: 12px 14px; font-size: 15px;
    font-family: 'Inter', sans-serif; color: var(--color-text-primary, #f1f5f9);
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; outline: none;
}
.s2v-topic:focus { border-color: #f43f5e; }

.s2v-promo-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(168,85,247,0.16), rgba(244,63,94,0.16));
    border: 1px solid rgba(168,85,247,0.32); border-radius: 14px; padding: 12px 16px;
}
.s2v-promo-bar span { font-size: 13.5px; color: var(--color-text-primary, #f1f5f9); font-weight: 500; }
.s2v-promo-bar .s2v-btn { white-space: nowrap; }

.s2v-opts { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); margin-top: var(--space-3, 12px); align-items: flex-end; }
.s2v-opt { display: flex; flex-direction: column; gap: 4px; }
.s2v-opt label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary, #94a3b8); }
.s2v-opt select, .s2v-opt input {
    background-color: #1a2236; color: #f1f5f9; border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px; padding: 8px 10px; font-size: 14px; outline: none; min-width: 130px;
}
.s2v-opt select option { background-color: #1a2236; color: #f1f5f9; }
.s2v-opt input[type=number] { min-width: 80px; }

.s2v-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #f43f5e, #a855f7); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(244,63,94,0.3);
}
.s2v-btn:hover:not(:disabled) { transform: translateY(-1px); }
.s2v-btn:disabled { opacity: 0.5; cursor: default; }
.s2v-btn-ghost { background: rgba(255,255,255,0.06); box-shadow: none; border: 1px solid rgba(255,255,255,0.12); color: var(--color-text-primary, #f1f5f9); }

.s2v-status { font-size: 13px; color: var(--color-text-secondary, #94a3b8); min-height: 18px; }

.s2v-scenes { display: flex; flex-direction: column; gap: var(--space-3, 12px); }

.s2v-scene { display: flex; align-items: stretch; gap: var(--space-3, 12px); position: relative; padding: var(--space-3, 12px); }
.s2v-scene-num { font-weight: 700; color: #f43f5e; font-size: 13px; min-width: 20px; padding-top: 2px; }
.s2v-scene-visual {
    position: relative;
    width: 120px; height: 68px; flex-shrink: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
}
.s2v-scene-visual img { width: 100%; height: 100%; object-fit: cover; }
.s2v-vbadge {
    position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 5px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.02em; color: #fff;
    background: rgba(244,63,94,0.92); box-shadow: 0 1px 4px rgba(0,0,0,0.4); pointer-events: none;
}
.s2v-scene-visual:hover { border-color: #f43f5e; }
.s2v-visual-empty { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 4px; }
.s2v-visual-empty span { font-size: 12px; color: #f43f5e; font-weight: 600; }
.s2v-visual-empty small { font-size: 9px; color: var(--color-text-secondary, #94a3b8); line-height: 1.1; max-height: 22px; overflow: hidden; }

.s2v-scene-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.s2v-narration, .s2v-caption {
    width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 7px 10px; color: var(--color-text-primary, #f1f5f9); font-size: 13px; font-family: inherit; outline: none; resize: vertical;
}
.s2v-narration:focus, .s2v-caption:focus { border-color: #f43f5e; }
.s2v-scene-del {
    position: absolute; top: 6px; right: 8px; background: transparent; border: none; color: var(--color-text-secondary, #94a3b8);
    font-size: 20px; line-height: 1; cursor: pointer;
}
.s2v-scene-del:hover { color: #ef4444; }

.s2v-preview {
    align-self: flex-start; margin-top: 2px; padding: 4px 11px; border-radius: 7px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: var(--color-text-secondary, #94a3b8); font-size: 11.5px; cursor: pointer;
}
.s2v-preview:hover:not(:disabled) { background: color-mix(in srgb, #f43f5e 16%, transparent); color: #fff; border-color: rgba(244,63,94,0.4); }
.s2v-preview:disabled { opacity: 0.6; cursor: default; }

.s2v-tools { display: flex; flex-wrap: wrap; gap: var(--space-4, 16px); justify-content: space-between; align-items: center; padding: var(--space-2, 8px) 0; }
.s2v-tool-group { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; }
.s2v-tools .s2v-btn { padding: 7px 12px; font-size: 13px; box-shadow: none; }
.s2v-music-label { font-size: 12px; color: var(--color-text-secondary, #94a3b8); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s2v-music-clear { background: transparent; border: none; color: #ef4444; font-size: 18px; line-height: 1; cursor: pointer; }

.s2v-actions { display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap; }
.s2v-progress { display: none; align-items: center; gap: var(--space-3, 12px); flex: 1; }
.s2v-progress .progress-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.s2v-progress .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #f43f5e, #a855f7); transition: width 0.2s; }
.s2v-progress .progress-text { font-size: 12px; color: var(--color-text-secondary, #94a3b8); white-space: nowrap; }

/* ---- YouTube Package output ---- */
.s2v-pkg-out {
    background: var(--glass-bg, rgba(15,22,40,0.75));
    border: var(--glass-border, 1px solid rgba(255,255,255,0.07));
    border-radius: var(--radius-lg, 16px); padding: var(--space-4, 16px);
}
.s2v-pkg-grid { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: var(--space-4, 16px); }
@media (max-width: 760px) { .s2v-pkg-grid { grid-template-columns: 1fr; } }
.s2v-pkg-col { min-width: 0; display: flex; flex-direction: column; }
.s2v-pkg-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary, #94a3b8); margin: var(--space-3, 12px) 0 6px; }
.s2v-pkg-col:first-child .s2v-pkg-label:first-child { margin-top: 0; }
.s2v-pkg-thumb { width: 100%; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); display: block; }
.s2v-pkg-title {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    padding: 8px 10px; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: #f1f5f9; cursor: pointer; transition: all 0.15s;
}
.s2v-pkg-title:hover { background: color-mix(in srgb, #f43f5e 16%, transparent); border-color: rgba(244,63,94,0.4); }
.s2v-pkg-hook { font-size: 13px; font-style: italic; color: #fca5a5; }
.s2v-pkg-desc {
    width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    padding: 8px 10px; color: #f1f5f9; font-size: 13px; font-family: inherit; resize: vertical; outline: none;
}
.s2v-pkg-tags { font-size: 12.5px; color: var(--color-text-secondary, #94a3b8); background: rgba(255,255,255,0.04); border-radius: 8px; padding: 8px 10px; line-height: 1.5; }

@media (max-width: 640px) {
    .s2v-scene { flex-wrap: wrap; }
    .s2v-scene-visual { width: 100%; height: 120px; }
}