/* Sparklines (owner) */

/* Onboarding progress */
.onboarding-progress { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 20px }
.onboarding-progress h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px }
.onboard-steps { display: grid; gap: 8px }
.onboard-step { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line) }
.onboard-step.ob-done { border-color: var(--green); background: rgba(52,200,138,.04) }
.onboard-step.ob-done .ob-check { background: var(--green); color: #fff }
.onboard-step.ob-active { border-color: var(--accent); background: rgba(91,163,245,.04) }
.ob-check { width: 28px; height: 28px; border-radius: 50%; background: var(--line2); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0 }

/* Next Action Box */
.next-action-box { background: var(--panel); border: 2px solid var(--accent); border-radius: 14px; padding: 18px; margin-bottom: 20px }
.next-action-title { font-size: 16px; font-weight: 700; color: var(--accent); margin-bottom: 6px; display: flex; align-items: center; gap: 8px }
.next-action-desc { font-size: 15px; line-height: 1.5; margin-bottom: 12px }
.next-action-btn { padding: 10px 20px; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; border: none; background: var(--accent); color: #fff }
.next-action-btn:hover { opacity: .9 }

/* Footer */
.app-footer { text-align: center; padding: 20px; margin-top: 40px; font-size: 13px; color: var(--muted) }
.app-footer a { color: var(--muted); text-decoration: none }
.app-footer a:hover { color: var(--accent); text-decoration: underline }
.app-footer span { margin: 0 8px }

/* Empty States */
.empty-state { text-align: center; padding: 60px 20px }
.empty-state-icon { font-size: 48px; margin-bottom: 12px }
.empty-state h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px }
.empty-state p { font-size: 15px; color: var(--muted); line-height: 1.6; max-width: 400px; margin: 0 auto 16px }

/* Demo Mode */
.btn-demo-signup { width: 100%; padding: 12px 20px; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; border: none; background: var(--green); color: #fff }
.btn-demo-signup:hover { opacity: .9 }
.demo-signup-features { display: grid; gap: 6px; text-align: left; margin: 0 auto; max-width: 300px }
.demo-feat { font-size: 14px; color: var(--green); padding: 4px 0 }

.demo-image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; background: linear-gradient(135deg, #1a2230, #2a3648); border-radius: 10px; cursor: pointer; transition: background .2s }
.demo-image-placeholder:hover { background: linear-gradient(135deg, #1e2838, #344458) }
.demo-img-icon { font-size: 48px; margin-bottom: 10px; opacity: .5 }
.demo-img-text { font-size: 15px; font-weight: 600; color: var(--accent) }

/* Auth (client login) modal — moved out of owner.css when the admin panel was separated */
.auth-modal { width: 380px }
.auth-modal h2 { text-align: center }

/* Results tab — Meta connection + performance feedback loop */
.perf-card { background: var(--panel, #1a2230); border: 1px solid var(--line, #2a3648); border-radius: 14px; padding: 22px 24px; margin-bottom: 16px; }
.perf-card h3 { margin: 0 0 4px; font-size: 17px; }
.perf-muted { color: var(--muted, #8899aa); font-size: 14px; line-height: 1.5; }
.perf-flex { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.perf-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.perf-chip { background: rgba(34,200,138,.12); color: #34c88a; border: 1px solid rgba(34,200,138,.3); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.perf-ad { border: 1px solid var(--line, #2a3648); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.perf-ad-head { margin-bottom: 6px; }
.perf-rec { display: inline-block; font-size: 12.5px; color: #34c88a; margin-bottom: 8px; }
.perf-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.perf-form input { flex: 1 1 130px; min-width: 0; background: var(--bg, #0f1419); border: 1px solid var(--line, #2a3648); color: var(--text, #e0e6ed); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.perf-form input:focus { outline: none; border-color: #5ba3f5; }
.perf-form .btn-generate { flex: 0 0 auto; }