/* SM Reels – Public Styles */

/* ── Split layout ── */
.smr-result-layout { display: flex; gap: 32px; align-items: flex-start; }
.smr-result-left  { flex: 1; min-width: 0; }
.smr-result-right { width: 280px; flex-shrink: 0; position: sticky; top: 20px; }
@media (max-width: 768px) {
    .smr-result-layout { flex-direction: column; }
    .smr-result-right  { width: 100%; position: static; }
}

/* ── Vibe images ── */
.smr-images-loading { text-align: center; padding: 40px 20px; background: #f8fafc; border-radius: 12px; border: 1px dashed #cbd5e1; }
.smr-images-loading p { color: #64748b; font-size: .9em; margin: 12px 0 0; }
.smr-spinner { width: 32px; height: 32px; border: 3px solid #e2e8f0; border-top-color: #2563eb; border-radius: 50%; animation: smr-spin 0.8s linear infinite; margin: 0 auto; }
@keyframes smr-spin { to { transform: rotate(360deg); } }
.smr-images-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.smr-images-grid img:first-child:nth-last-child(3),
.smr-images-grid img:first-child:nth-last-child(3) ~ img { grid-column: span 1; }
.smr-images-grid img:first-child:nth-last-child(3):last-child { grid-column: span 2; }
.smr-images-grid img { width: 100%; border-radius: 8px; cursor: pointer; transition: transform .2s; border: 2px solid transparent; }
.smr-images-grid img:hover { transform: scale(1.03); border-color: #2563eb; }
.smr-images-error { color: #94a3b8; font-size: .85em; text-align: center; padding: 20px; }

/* ── Pricing ── */
.smr-pricing { max-width: 480px; margin: 40px auto; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.smr-pricing-card { background: #fff; border: 2px solid #2563eb; border-radius: 16px; padding: 40px 32px; box-shadow: 0 8px 32px rgba(37,99,235,.12); }
.smr-badge { display: inline-block; background: #fef3c7; color: #92400e; font-size: .8em; font-weight: 700; padding: 4px 14px; border-radius: 20px; margin-bottom: 20px; }
.smr-price { font-size: 3.5em; font-weight: 800; color: #1e40af; line-height: 1; }
.smr-price span { font-size: .4em; color: #64748b; font-weight: 500; }
.smr-price-note { color: #64748b; font-size: .9em; margin: 6px 0 24px; }
.smr-features { list-style: none; padding: 0; margin: 0 0 28px; text-align: left; }
.smr-features li { padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: .95em; }
.smr-features li:last-child { border: none; }
.smr-guarantee { color: #94a3b8; font-size: .82em; margin-top: 16px; }
.smr-login-note { font-size: .85em; color: #64748b; margin-top: 12px; }

/* ── Buttons ── */
.smr-btn { display: inline-block; background: #2563eb; color: #fff !important; border: none; border-radius: 8px; padding: 14px 28px; font-size: 1em; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .2s; }
.smr-btn:hover { background: #1d4ed8; }
.smr-btn-secondary { background: #0f172a; margin-right: 8px; }
.smr-btn-secondary:hover { background: #1e293b; }
.smr-btn-ghost { background: transparent; color: #64748b !important; border: 1px solid #cbd5e1; }
.smr-btn-ghost:hover { background: #f8fafc; }

/* ── Dashboard ── */
.smr-dashboard { max-width: 760px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.smr-notice { padding: 14px 20px; border-radius: 8px; margin-bottom: 24px; font-weight: 500; }
.smr-notice-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.smr-dashboard-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; }
.smr-dashboard-title { font-size: 1.6em; font-weight: 700; margin: 0; color: #0f172a; }
.smr-dashboard-sub { color: #64748b; margin: 4px 0 0; font-size: .9em; }
.smr-usage-badge { text-align: center; background: #eff6ff; border: 2px solid #bfdbfe; border-radius: 12px; padding: 12px 20px; }
.smr-usage-count { display: block; font-size: 2.2em; font-weight: 800; color: #1d4ed8; line-height: 1; }
.smr-usage-label { font-size: .78em; color: #3b82f6; font-weight: 500; }

/* ── Generator ── */
.smr-generator { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; margin-bottom: 28px; }
.smr-label { display: block; font-weight: 600; color: #374151; margin-bottom: 10px; }
.smr-input-row { display: flex; gap: 10px; flex-wrap: wrap; }
.smr-input { flex: 1; min-width: 200px; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 1em; outline: none; transition: border-color .2s; }
.smr-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.smr-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 8px; padding: 12px 16px; margin-top: 12px; }

/* ── Script Result ── */
.smr-result { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 28px; }
.smr-result h3 { margin: 0 0 20px; font-size: 1.2em; color: #0f172a; }
.smr-script-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #f1f5f9; }
.smr-script-section:last-of-type { border: none; }
.smr-script-label { font-weight: 700; font-size: .85em; color: #374151; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.smr-tip { font-weight: 400; color: #94a3b8; text-transform: none; letter-spacing: 0; }
.smr-script-text { color: #1e293b; line-height: 1.65; font-size: .97em; }
.smr-caption-text { background: #f8fafc; border-radius: 8px; padding: 14px; white-space: pre-wrap; }
.smr-cues-list { margin: 0; padding-left: 20px; color: #1e293b; line-height: 1.8; font-size: .97em; }