.clipping-mode-switcher { display:flex; gap:4px; width:fit-content; margin:0 auto; padding:4px; border:1px solid var(--border-color,#30303e); border-radius:12px; }
.clipping-mode-switcher button { padding:10px 18px; border:0; border-radius:8px; color:var(--text-muted,#aaa); background:transparent; font:inherit; cursor:pointer; }
.clipping-mode-switcher [aria-selected="true"] { background:var(--accent-primary,#1014ef); color:#fff; }
.recreate-clip-view { width:100%; max-width:1200px; margin:0 auto 28px; }
.recreate-clip-view [hidden], .clipping-mode-switcher[hidden] { display:none !important; }
.recreate-view-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; }
.recreate-view-header h1 { font-family:'Outfit',system-ui,sans-serif; font-size:clamp(1.75rem,3vw,2.2rem); font-weight:800; line-height:1.1; margin:0 0 8px; letter-spacing:-.03em; }
.recreate-view-header p { color:var(--text-main,#eee); max-width:720px; margin:0; font-size:1rem; line-height:1.65; }
.recreate-view-header a { color:var(--accent-primary,#818cf8); white-space:nowrap; }
.recreate-header-actions { display:flex; align-items:center; gap:18px; }
.recreate-help-button { min-height:40px; padding:8px 14px; border:1px solid var(--border-color,#30303e); border-radius:10px; background:var(--v2-fill,rgba(255,255,255,.035)); color:var(--text-main,#eee); font:inherit; font-weight:700; cursor:pointer; white-space:nowrap; }
.recreate-help-button:hover { border-color:var(--v2-blue-light,#93acff); }
.recreate-how-to { position:fixed; inset:0; width:min(94vw,800px); max-height:min(90dvh,760px); margin:auto; padding:28px; border:1px solid var(--border-color,#30303e); border-radius:20px; background:var(--v2-slate,#121620); color:var(--text-main,#e6eaf2); box-shadow:0 24px 80px rgba(0,0,0,.58); overflow:auto; }
.recreate-how-to::backdrop { background:var(--v2-scrim,rgba(2,4,12,.8)); }
.recreate-how-to-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.recreate-how-to-kicker { color:var(--v2-blue-light,#93acff); font-size:.75rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.recreate-how-to-close { width:40px; height:40px; border:0; border-radius:10px; background:var(--v2-fill-hover,rgba(255,255,255,.06)); color:inherit; font-size:1.5rem; cursor:pointer; }
.recreate-how-to h2 { max-width:560px; margin:12px 0 22px; font-size:clamp(1.25rem,3vw,1.75rem); line-height:1.25; }
.recreate-how-to-visual { display:grid; grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr); align-items:center; gap:8px; padding:20px 0; }
.recreate-how-to-video { display:flex; flex-direction:column; gap:16px; min-width:0; min-height:145px; box-sizing:border-box; padding:16px 12px; border:1px solid var(--border-color,#30303e); border-radius:10px; background:var(--bg-color,#0a0f1c); color:var(--text-main,#eee); font-size:.95rem; font-weight:700; line-height:1.4; }
.recreate-how-to-video svg { flex:none; width:28px; height:28px; color:var(--text-main,#eee); }
.recreate-how-to-video small { display:block; margin-top:6px; color:var(--text-main,#eee); font-size:.85rem; font-weight:400; line-height:1.5; }
.recreate-how-to-short { border-color:var(--accent-primary,#1014ef); border-width:2px; }
.recreate-how-to-short small { font-weight:700; }
.recreate-how-to-result svg { color:var(--v2-blue-light,#93acff); }
.recreate-how-to-arrow { color:var(--text-main,#eee); font-size:1.2rem; font-weight:700; text-align:center; }
.recreate-how-to-steps { display:grid; gap:16px; margin:20px 0 24px; padding-left:24px; color:var(--text-main,#eee); font-size:1rem; line-height:1.65; }
.recreate-how-to-steps li::marker { color:var(--v2-blue-light,#93acff); font-weight:700; }
.recreate-how-to-use-cases { border-top:1px solid var(--border-color,#30303e); padding-top:20px; }
.recreate-how-to-use-cases summary { cursor:pointer; min-height:40px; font-size:1rem; font-weight:700; }
.recreate-how-to-use-cases ul { margin:0 0 20px; padding-left:22px; font-size:.95rem; line-height:1.65; }
.recreate-how-to-use-cases li + li { margin-top:8px; }
.recreate-how-to-note { color:var(--text-main,#eee); font-size:.9375rem; line-height:1.65; }
.recreate-how-to > .btn-primary { margin-top:8px; }
.recreate-steps { display:flex; gap:16px; border-bottom:1px solid var(--border-color,#30303e); margin-bottom:24px; padding-bottom:16px; }
.recreate-steps button { background:transparent; color:var(--text-muted,#aaa); border:0; font:inherit; text-align:left; padding:8px 0; cursor:pointer; }
.recreate-steps [aria-current="step"] { color:var(--text-main,#eee); font-weight:700; }
.recreate-steps span { display:inline-grid; place-items:center; width:28px; height:28px; border:1px solid currentColor; border-radius:50%; margin-right:8px; }
.recreate-source-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }
.recreate-source-grid > section { min-width:0; }
.recreate-source-grid h3 { font-size:1rem; margin:0 0 3px; }
.recreate-card-subtitle { min-height:3.1rem; margin:0 0 16px; color:var(--text-main,#eee); font-size:.95rem; line-height:1.6; }
.recreate-clip-view h2 { font-size:1.25rem; margin:0 0 20px; }
.recreate-clip-view h2 { scroll-margin-top:120px; }
.recreate-clip-view h2:focus { outline:none; }
.recreate-clip-view :is(button,a,input):focus-visible { outline:2px solid #818cf8; outline-offset:4px; }
.recreate-clip-view #clipping-intake { width:100%; margin:0; padding:0; max-width:none; }
.recreate-clip-view .sp-intake-header, .recreate-clip-view .sp-intake-preview-heading { display:none; }
.recreate-clip-view .sp-intake-body { display:block; }
.recreate-clip-view .source-intake-dropzone { height:260px; min-height:260px; box-sizing:border-box; padding:24px; gap:12px; }
.recreate-clip-view #clipping-intake-dropzone { margin-top:0; }
.recreate-clip-view .source-intake-divider { margin:20px 0 16px; }
.recreate-clip-view .recreate-source-card label { min-height:1.25rem; }
.recreate-clip-view .recreate-source-card > label,
.recreate-clip-view .recreate-source-card .sp-intake-source-group > label { color:var(--text-main,#eee); font-size:.9375rem; font-weight:500; letter-spacing:normal; text-transform:none; }
.recreate-clip-view .recreate-reference-url-row,
.recreate-clip-view .sp-intake-source-row { grid-template-columns:minmax(0,1fr); }
.recreate-clip-view #clipping-intake-choose,
.recreate-clip-view #recreate-reference-choose { min-height:46px; margin-top:0; padding:10px 16px; border:1px solid rgba(99,121,255,.72); line-height:1.25; }
.recreate-clip-view #clipping-intake-link,
.recreate-clip-view #inspiration-url { width:100%; box-sizing:border-box; min-width:0; height:48px; min-height:48px; padding:12px 16px; border:1px solid var(--border-color,#30303e); border-radius:12px; background:var(--v2-slate,#181d21); color:var(--text-main,#eee); font:inherit; line-height:1.4; margin:0; }
.recreate-clip-view .sp-intake-source-group { display:block; margin-bottom:0; gap:0; }
.recreate-clip-view :is(#clipping-intake-link,#inspiration-url):focus { border-color:var(--v2-blue-light,#93acff); box-shadow:0 0 0 3px rgba(16,20,239,.18); }
.recreate-clip-view #recreate-reference-status { margin-top:10px; }
.recreate-clip-view #recreate-reference-status.is-success { color:var(--v2-green,#27c58b); }
.recreate-clip-view input[type="url"] { width:100%; box-sizing:border-box; min-height:48px; padding:12px; border:1px solid var(--border-color,#30303e); border-radius:10px; background:var(--v2-slate,#19191f); color:var(--text-main,#eee); font:inherit; }
.recreate-clip-view label { display:block; margin-bottom:10px; color:var(--text-main,#eee); font-size:.9375rem; }
.recreate-clip-view .recreate-status { min-height:24px; font-size:.9375rem; color:var(--text-main,#eee); margin:16px 0; line-height:1.65; }
.recreate-clip-view .is-error { color:var(--v2-red,#f87171); }
.recreate-transcript-status { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0 20px; }
.recreate-transcript-status > div { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:12px 14px; border:1px solid var(--border-color); border-radius:10px; background:var(--v2-fill); color:var(--text-main); font-size:14px; }
.recreate-transcript-status dt { color:var(--text-muted); }
.recreate-transcript-status dd { margin:0; font-weight:700; }
.recreate-transcript-status dd[data-state="needs_attention"] { color:var(--v2-red); }
.recreate-upload-progress button { min-height:44px; }
@media(max-width:640px) { .recreate-transcript-status { grid-template-columns:minmax(0,1fr); } }
.recreate-clip-view video { width:100%; max-height:280px; background:#08080d; border-radius:10px; margin-top:12px; }
.recreate-upload-progress { display:flex; align-items:center; gap:12px; }
.recreate-upload-progress progress { flex:1; min-width:0; }
.recreate-view-actions { display:flex; align-items:center; justify-content:flex-end; margin-top:22px; }
.recreate-style-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.recreate-style-heading h2 { margin:0; }
.recreate-source-card:has(#clipping-intake-ready:not([hidden])) :is(#clipping-intake-dropzone, #clipping-intake-divider, .sp-intake-source-group) { display:none; }
.recreate-source-card:has(#recreate-reference-preview:not([hidden])) :is(#recreate-reference-dropzone, #recreate-reference-divider, .recreate-reference-url-row, label[for="inspiration-url"]) { display:none; }
.recreate-clip-view #clipping-intake-ready { margin-top:0; }
.recreate-clip-view .sp-intake-nojs { margin:0; }
.recreate-clip-view :is(#recreate-source-preview,#recreate-reference-preview) { height:300px; max-height:300px; object-fit:contain; margin-top:14px; }
.recreate-clip-view #recreate-reference-remove { flex:none; margin-top:0; min-height:42px; }
.recreate-source-card:has(#recreate-reference-preview:not([hidden])) .recreate-reference-ready { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:14px 16px; border:1px solid rgba(39,197,139,.35); border-radius:12px; }
.recreate-source-card:has(#recreate-reference-preview:not([hidden])) #recreate-reference-status { flex:1; min-width:0; margin:0; font-size:.85rem; line-height:1.5; overflow-wrap:anywhere; }
.recreate-submit-actions { display:flex; align-items:center; justify-content:flex-end; gap:18px; flex-wrap:wrap; }
.recreate-submit-actions .sp-rights-confirm { margin:0; }
.recreate-hosted-status { padding:12px 16px; border:1px solid var(--border-color,#30303e); border-radius:10px; margin-bottom:24px; color:var(--text-main,#eee); font-size:.9375rem; line-height:1.65; }
.recreate-clip-view :is(input,button):disabled { cursor:not-allowed; }
.sp-rights-confirm, .recreate-clip-view .sp-rights-confirm { display:flex; align-items:flex-start; gap:10px; width:fit-content; max-width:100%; margin:0 0 18px; color:var(--text-muted,#aaa); font-size:.85rem; line-height:1.5; cursor:pointer; }
.sp-rights-confirm[hidden] { display:none; }
#recreate-clip-view #clipping-rights-attestation { display:none; }
.sp-rights-confirm input { flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--accent-primary,#1014ef); }
.sp-rights-confirm:focus-within { outline:2px solid #818cf8; outline-offset:4px; border-radius:4px; }
.recreate-style-panel { border:0 !important; padding:0 !important; background:transparent !important; }
.recreate-style-panel > .panel-title,
.recreate-style-panel .sp-setup-source-control,
.recreate-style-panel .sp-setup-selection,
.recreate-style-panel .recreate-controlled { display:none !important; }
.recreate-style-panel .panel-left, .recreate-style-panel .panel-right { min-width:0 !important; flex:1 1 300px !important; }
.recreate-style-panel .panel-columns { gap:28px !important; }
.recreate-style-panel.recreate-cloud-style .panel-left,
.recreate-style-panel.recreate-cloud-style #btn-launch,
.recreate-style-panel.recreate-cloud-style .custom-caption-actions,
.recreate-style-panel.recreate-cloud-style .input-group:has(#hook-enabled) { display:none !important; }
#recreate-mode-slot { margin:28px 0 24px; width:100%; max-width:440px; }
#recreate-mode-slot .control-hint, .recreate-style-panel .control-hint { color:var(--text-main,#eee); font-size:.9375rem; line-height:1.6; margin-top:12px; }
.recreate-clip-view .source-intake-dropzone > span:not(.source-intake-icon) { color:var(--text-main,#eee); font-size:.9375rem; line-height:1.5; }
#recreate-cloud-export { margin-top:24px; }
#recreate-cloud-export { padding:20px; border:1px solid var(--border-color,#30303e); border-radius:12px; }
#recreate-export-allowance { margin-top:0; }
#recreate-cloud-export :is(button,a) { min-height:44px; }
#recreate-export-progress { width:100%; }
#recreate-export-video { max-height:600px; }
.recreate-clip-view select:focus-visible { outline:2px solid #818cf8; outline-offset:4px; }
@media(max-width:760px) {
    .recreate-how-to-visual { display:none; }
    .recreate-how-to-video { flex-direction:row; align-items:center; gap:16px; min-height:0; padding:14px 16px; font-size:1rem; }
    .recreate-how-to-video small { margin-top:3px; font-size:.9rem; }
    .recreate-how-to-arrow { font-size:1.2rem; line-height:1; }
    .recreate-clip-view h2 { scroll-margin-top:180px; }
    .recreate-source-grid { grid-template-columns:1fr; gap:28px; }
    .recreate-card-subtitle { min-height:0; }
    #recreate-mode-slot { max-width:none; }
    .recreate-view-header { flex-direction:column; gap:12px; }
    .recreate-header-actions { width:100%; justify-content:space-between; }
    .recreate-view-header h1 { font-size:1.65rem; }
    .recreate-steps { gap:18px; }
    .recreate-steps button { font-size:.85rem; }
    .recreate-view-actions { align-items:stretch; flex-direction:column; }
    .recreate-submit-actions { align-items:stretch; flex-direction:column; gap:12px; }
    .recreate-submit-actions button { width:100%; }
    .recreate-how-to > .btn-primary { position:sticky; bottom:0; min-height:44px; }
    #recreate-cloud-export { padding:16px; }
    #recreate-cloud-export :is(button,a) { margin-top:8px; }
}
@media(max-width:520px) {
    .recreate-how-to { padding:20px; }
    .recreate-clip-view .recreate-reference-url-row,
    .recreate-clip-view .sp-intake-source-row { grid-template-columns:minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) {
    .recreate-help-button, .recreate-how-to-close { transition:none; }
}

/* This is a caption style sample, not the reconstructed clip timeline. */
.recreate-style-panel.recreate-cloud-style #dashboard-framing-preview-canvas,
.recreate-style-panel.recreate-cloud-style #dashboard-framing-preview-phase,
.recreate-style-panel.recreate-cloud-style .dashboard-preview-controls { display:none !important; }

/* Both link columns share the same field and status rhythm. */
.recreate-clip-view :is(#clipping-intake-link, #inspiration-url) { font-size:16px; font-weight:500; line-height:1.5; }
.recreate-clip-view :is(#clipping-intake-message, #recreate-reference-status) {
    margin:8px 0 0; padding:0; min-height:24px;
    font-size:15px; font-weight:500; line-height:1.5; color:var(--text-muted);
    overflow-wrap:anywhere;
}
.recreate-clip-view :is(#clipping-intake-message, #recreate-reference-status).is-error { color:var(--v2-red); }
.recreate-clip-view :is(#clipping-intake-message, #recreate-reference-status).is-success { color:var(--v2-green); }