/* ═══════════════════════════════════════════
   Script Forge — Content to Reels
   ═══════════════════════════════════════════ */

.sf-header { margin-bottom: 24px; }
.sf-header h2 { margin-bottom: 4px; }

/* ── Form ── */
.sf-form { max-width: 800px; }
.sf-content-input { margin-bottom: 20px; position: relative; }
.sf-textarea { font-size: var(--font-size-sm); line-height: 1.6; resize: vertical; min-height: 200px; }
.sf-char-count { text-align: right; margin-top: 4px; }

.sf-config { margin-bottom: 24px; }
.sf-config-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 600px) { .sf-config-row { grid-template-columns: 1fr; } }

/* ── Reel Length Pills ── */
.sf-reel-length { margin-bottom: 20px; }
.sf-pill-group { display: flex; gap: 8px; }
.sf-pill {
    padding: 8px 20px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-surface);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.sf-pill:hover { border-color: var(--color-primary-light); color: var(--color-primary); }
.sf-pill.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* ── Quick-Start Presets ── */
.sf-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
@media (max-width: 700px) { .sf-presets { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .sf-presets { grid-template-columns: 1fr; } }

.sf-preset {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 8px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.sf-preset:hover { border-color: var(--color-primary-light); transform: translateY(-1px); }
.sf-preset-highlight {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}
.sf-preset-icon { font-size: 18px; line-height: 1; }
.sf-preset-label { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text); }
.sf-preset-math { font-size: 10px; color: var(--color-text-light); font-family: monospace; }
.sf-preset-result { font-size: var(--font-size-sm); font-weight: 800; color: var(--color-primary); }
.sf-preset-time { font-size: 10px; color: var(--color-text-light); }

/* ── Sliders + Number Inputs ── */
.sf-sliders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 600px) { .sf-sliders { grid-template-columns: 1fr; } }
.sf-slider-group {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
}
.sf-slider-group .form-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.sf-num-input {
    width: 52px;
    padding: 2px 4px;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    -moz-appearance: textfield;
}
.sf-num-input::-webkit-outer-spin-button,
.sf-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sf-num-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-bg); }
.sf-range { width: 100%; accent-color: var(--color-primary); cursor: pointer; }

/* ── Reel Multiplier Math ── */
.sf-math {
    margin-top: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-primary-light);
    border-radius: 12px;
    padding: 24px;
}

.sf-math-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.sf-math-factor { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sf-math-factor .sf-math-num { font-size: 28px; font-weight: 800; color: var(--color-text); line-height: 1; }
.sf-math-factor .sf-math-label,
.sf-math-result .sf-math-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.sf-math-factor .sf-math-label { color: var(--color-text-light); }
.sf-math-op { font-size: 20px; font-weight: 300; color: var(--color-text-light); }
.sf-math-eq { font-size: 24px; font-weight: 300; color: var(--color-text-light); margin: 0 4px; }
.sf-math-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--color-primary);
    color: white;
    border-radius: 10px;
    padding: 8px 20px;
}
.sf-math-result .sf-math-total { font-size: 36px; font-weight: 900; line-height: 1; }
.sf-math-result .sf-math-label { color: rgba(255,255,255,0.85); }

/* ── Recording Time Section ── */
.sf-time-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); }
.sf-time-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.sf-time-title { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-light); }
.sf-time-total { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text); }
.sf-time-bars { display: flex; flex-direction: column; gap: 8px; }
.sf-time-row { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 10px; }
.sf-time-label { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-secondary); }
.sf-time-track { height: 8px; background: var(--color-border); border-radius: 4px; overflow: hidden; }
.sf-time-fill { height: 100%; border-radius: 4px; transition: width 0.2s ease; }
.sf-fill-hooks { background: var(--color-primary); }
.sf-fill-stories { background: var(--color-warning, #f59e0b); }
.sf-fill-ctas { background: var(--color-success, #22c55e); }
.sf-time-val { font-size: var(--font-size-xs); color: var(--color-text-light); text-align: right; }

/* ── 5-Minute Progress Bar ── */
.sf-5min { margin-top: 14px; }
.sf-5min-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sf-5min-label { font-size: var(--font-size-xs); color: var(--color-text-light); }
.sf-5min-status { font-size: var(--font-size-xs); font-weight: 700; }
.sf-5min-yes { color: var(--color-success, #22c55e); }
.sf-5min-track {
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    overflow: visible;
    position: relative;
}
.sf-5min-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--color-text-light);
    transition: width 0.2s ease;
}
.sf-5min-fill-yes { background: var(--color-success, #22c55e); }
.sf-5min-mark {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    background: var(--color-error, #ef4444);
    border-radius: 1px;
}

/* ── Payoff / Hero Stat ── */
.sf-payoff { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sf-payoff-hero { display: flex; align-items: baseline; gap: 8px; }
.sf-payoff-num { font-size: 42px; font-weight: 900; color: var(--color-primary); line-height: 1; }
.sf-payoff-unit { font-size: var(--font-size-xs); color: var(--color-text-light); line-height: 1.3; font-weight: 500; }
.sf-payoff-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}
.sf-payoff-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-text-light); flex-shrink: 0; }
.sf-badge {
    font-size: 10px; font-weight: 700;
    color: var(--color-success, #22c55e);
    background: rgba(34, 197, 94, 0.1);
    padding: 2px 10px; border-radius: 20px; white-space: nowrap;
}
.sf-badge-fire { color: var(--color-warning, #f59e0b); background: rgba(245, 158, 11, 0.1); }

/* ── Generate Button ── */
.sf-generate-btn { width: 100%; max-width: 300px; padding: 14px 32px; font-size: var(--font-size-lg); }

/* ── Loading ── */
.sf-loading { text-align: center; padding: 48px 24px; }
.sf-spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: sf-spin 0.8s linear infinite;
    margin: 0 auto 16px;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* ── Error ── */
.sf-error { text-align: center; padding: 32px; color: var(--color-error); }
.sf-error .btn { margin-top: 12px; }

/* ── Results Summary ── */
.sf-results-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 32px 0 16px;
    padding: 16px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-primary-light);
    border-radius: 10px;
}
.sf-results-summary-left { display: flex; flex-direction: column; gap: 4px; }
.sf-results-formula { font-size: var(--font-size-sm); color: var(--color-text); }
.sf-results-formula strong { color: var(--color-primary); font-weight: 800; }
.sf-results-meta { font-size: var(--font-size-xs); color: var(--color-text-light); }
.sf-results-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sf-create-all-btn { white-space: nowrap; }
.sf-copy-btn { white-space: nowrap; }

/* ── Tabs ── */
.sf-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 0;
}
.sf-tab {
    padding: 10px 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all 0.15s;
}
.sf-tab:hover { color: var(--color-primary); }
.sf-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* ── Tab Content ── */
.sf-tab-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0 48px;
}

/* ── Pool Items ── */
.sf-pool-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    transition: border-color 0.15s;
    position: relative;
}
.sf-pool-item:hover { border-color: var(--color-primary-light); }

.sf-pool-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 700;
    margin-top: 2px;
}

.sf-pool-pair { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.sf-pool-field { display: flex; flex-direction: column; gap: 4px; }

.sf-pool-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
}

.sf-pool-angle {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    font-style: italic;
    margin-bottom: 4px;
}

/* ── Editable Fields ── */
.sf-editable {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    cursor: text;
}
.sf-editable:hover {
    border-color: var(--color-border);
    background: var(--color-bg);
}
.sf-editable:focus {
    border-color: var(--color-primary-light);
    background: var(--color-bg);
    box-shadow: 0 0 0 2px var(--color-primary-bg);
}
.sf-editable-angle {
    font-weight: 600;
    font-style: italic;
    color: var(--color-text-secondary);
}

/* Overlay field — plain text, just bold */
.sf-pool-field .sf-editable[data-field="overlay"] {
    font-weight: 700;
}

/* ── Pool Actions (Pump it up button) ── */
.sf-pool-actions {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    margin-top: 2px;
    gap: 4px;
}

.sf-pump-btn {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-light);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.sf-pump-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary-light);
    background: var(--color-primary-bg);
}

/* ── Pump It Up Row ── */
.sf-pump-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 0 0 44px;
    grid-column: 1 / -1;
    width: 100%;
}
.sf-pump-input {
    flex: 1;
    font-size: var(--font-size-xs);
    padding: 6px 10px;
}
.sf-pump-row .btn { flex-shrink: 0; }

/* ── Body Parts (Stories) ── */
.sf-body { display: flex; flex-direction: column; gap: 8px; }
.sf-body-part {
    font-size: var(--font-size-sm); line-height: 1.6;
    padding: 8px 12px; background: var(--color-bg);
    border-radius: 6px; border-left: 3px solid var(--color-primary-light);
}
.sf-body-part .sf-editable { padding: 2px 4px; }

/* ── Remove & Add Item Buttons ── */
.sf-remove-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    margin-left: 4px;
}
.sf-remove-btn:hover {
    color: var(--color-error);
    background: rgba(239, 68, 68, 0.1);
}

.sf-add-btn {
    margin-top: 12px;
}

@media (max-width: 600px) {
    .sf-pool-item { flex-wrap: wrap; }
    .sf-pool-actions { width: 100%; justify-content: flex-end; }
    .sf-pump-row { padding-left: 0; }
}

/* ── Script Forge Modal ── */
.scriptforge-modal-content {
    max-width: 900px;
    max-height: 90vh;
}
.scriptforge-modal-content .modal-body {
    max-height: calc(90vh - 80px);
    overflow-y: auto;
}

/* ── Modal Config (pre-filled mode) ── */
.sf-modal-config {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 16px;
    margin-bottom: 16px;
}
.sf-config-compact .sf-config-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}
.sf-counts-row {
    display: flex;
    gap: 16px;
}
.sf-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sf-stepper-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-right: 2px;
    white-space: nowrap;
}
.sf-stepper .sf-num-input {
    width: 44px;
    text-align: center;
    -moz-appearance: textfield;
}
.sf-stepper .sf-num-input::-webkit-inner-spin-button,
.sf-stepper .sf-num-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sf-stepper-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition: all 0.15s;
}
.sf-stepper-btn:hover {
    background: var(--color-primary-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.sf-pump-all-btn {
    width: 100%;
    margin-top: 4px;
}
/* ── Sticky Nav (Before/After + Tabs) ── */
.sf-sticky-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-surface);
    padding-top: 4px;
}

/* ── Before / After Toggle ── */
.sf-before-after {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.sf-ba-pill {
    padding: 6px 16px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-surface);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.sf-ba-pill.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.sf-ba-pill:not(.active):hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (max-width: 600px) {
    .sf-config-compact .sf-config-row { grid-template-columns: 1fr; }
    .sf-counts-row { flex-wrap: wrap; }
}