/* fb-creative.css - m203 builder 8. Paid > Creative pipeline, generator queue (fb-gen.js) and the creative loop parts (fb-loop.js).
   Replaces the inline <style> blocks that used undefined variables (--border-color, --card-bg), 10px radii, dark-green media wells
   and green buttons. Values follow the live FF admin (computed styles, 5 Oct; 1-creative-spec s8). Tokens only: admin-tokens.css. */

/* ---- FF pill shape (FF .ffc-pill): 2px 9px, radius 999, 11px/500, sentence case ---- */
.cr-pill, .lp-pill { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:500; line-height:1.5; white-space:nowrap; background:#f1f5f9; color:#334155; vertical-align:middle }
.cr-pill + .cr-pill { margin-left:4px }
.cr-pill.s-new { background:#f1f5f9; color:#334155 }
.cr-pill.s-concept { background:#e0f2fe; color:#075985 }
.cr-pill.s-generating { background:#e0e7ff; color:#3730a3 }
.cr-pill.s-in-review { background:#f3e8ff; color:#7c3aed }
.cr-pill.s-held, .lp-pill.a { background:#fef3c7; color:#92400e }
.cr-pill.s-approved, .lp-pill.g { background:#dcfce7; color:#166534 }
.cr-pill.s-ready-to-launch, .lp-pill.b { background:#dbeafe; color:#1e40af }
.cr-pill.s-live { background:#dcfce7; color:#166534 }
.cr-pill.s-live::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:#16a34a; margin-right:5px; vertical-align:1px }
.cr-pill.s-winner { background:#065f46; color:#d1fae5 }
.cr-pill.s-killed, .lp-pill.r { background:#fee2e2; color:#991b1b }
.cr-pill.s-iterate { background:#fef3c7; color:#92400e }
.cr-pill.o-human_ugc { background:#e0f2fe; color:#075985 }
:root.dark .cr-pill, :root.dark .lp-pill { background:rgba(148,163,184,.15); color:#cbd5e1 }
:root.dark .cr-pill.s-concept, :root.dark .cr-pill.o-human_ugc { background:rgba(14,165,233,.15); color:#7dd3fc }
:root.dark .cr-pill.s-generating { background:rgba(99,102,241,.15); color:#a5b4fc }
:root.dark .cr-pill.s-in-review { background:rgba(168,85,247,.15); color:#d8b4fe }
:root.dark .cr-pill.s-held, :root.dark .cr-pill.s-iterate, :root.dark .lp-pill.a { background:rgba(245,158,11,.15); color:#fcd34d }
:root.dark .cr-pill.s-approved, :root.dark .cr-pill.s-live, :root.dark .lp-pill.g { background:rgba(16,185,129,.15); color:#6ee7b7 }
:root.dark .cr-pill.s-ready-to-launch, :root.dark .lp-pill.b { background:rgba(59,130,246,.15); color:#93c5fd }
:root.dark .cr-pill.s-winner { background:rgba(16,185,129,.35); color:#d1fae5 }
:root.dark .cr-pill.s-killed, :root.dark .lp-pill.r { background:rgba(239,68,68,.15); color:#fca5a5 }

/* ---- layout ---- */
.cr-kpis { grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-bottom:16px }
.cr-kpis .card h3 { margin-bottom:12px }
.cr-kpis .metric-label { margin-bottom:0 }
.cr-sub { display:flex; gap:0; border-bottom:1px solid var(--border); margin:0 0 16px; overflow-x:auto }
.cr-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 16px }
.cr-bar .cr-sp { flex:1 }
.cr-bar select, .cr-bar input[type=search] { border-radius:999px; border:1px solid var(--border); padding:8px 14px; font-size:13px; min-height:36px; background:var(--bg-card); color:var(--text-primary); font-family:inherit; box-sizing:border-box }
.cr-bar select { padding-right:30px; max-width:200px; text-overflow:ellipsis }
.cr-bar input[type=search] { min-width:220px; flex:0 1 280px }
.cr-count { font-size:13px; color:var(--text-muted) }
.cr-toggle { display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden }
.cr-toggle button { background:var(--bg-card); color:var(--text-secondary); border:0; padding:8px 14px; font-size:12px; font-weight:500; cursor:pointer; font-family:inherit }
.cr-toggle button.on { background:#1d1d1d; color:#fff }
:root.dark .cr-toggle button.on { background:#fff; color:#111 }
.cr-note { font-size:12px; color:var(--text-muted); margin:0 0 16px; line-height:1.5 }
.cr-attn { padding:16px 24px; margin-bottom:16px }
.cr-attn h3 { font-size:13px; font-weight:500; color:var(--text-muted); margin:0 0 4px }
.cr-attn .row { display:flex; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--border); font-size:13.5px }
.cr-attn .row:first-of-type { border-top:0 }
.cr-attn .row .sp { flex:1 }

/* ---- board ---- */
.cr-board { display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; align-items:flex-start }
.cr-col { flex:0 0 272px; background:var(--bg-secondary); border-radius:12px; padding:12px; min-height:120px }
.cr-col h4 { font-size:13px; font-weight:500; color:var(--text-secondary); margin:0 0 12px; display:flex; align-items:center; gap:8px }
.cr-col h4 .n { color:var(--text-muted); font-weight:400 }
.cr-col .cr-more { font-size:12px; color:var(--text-muted); text-align:center; padding:6px 0 0 }
.cr-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:0 0 12px; cursor:pointer; box-shadow:var(--shadow); transition:box-shadow .15s ease }
.cr-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.08) }
.cr-card:focus-visible { outline:2px solid #1a1a1a; outline-offset:2px }
.cr-media { aspect-ratio:4/5; background:var(--bg-secondary); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden }
.cr-media.noimg { aspect-ratio:auto; height:72px }
.cr-media img { width:100%; height:100%; object-fit:contain; display:block }
.cr-media .play { position:absolute; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center }
.cr-media .play::after { content:''; border-left:12px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:3px }
.cr-media .ph { font-size:12px; color:var(--text-muted); padding:12px; text-align:center }
.cr-cb { padding:12px; display:flex; flex-direction:column; gap:6px }
.cr-pills { display:flex; flex-wrap:wrap; gap:4px }
.cr-id { font-size:13px; font-weight:700; color:var(--text-primary) }
.cr-id .p { font-weight:400; color:var(--text-muted); margin-left:6px }
.cr-hook { font-size:13px; color:var(--text-primary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4 }
.cr-chips { display:flex; flex-wrap:wrap; gap:4px }
.cr-chip { font-size:11px; padding:2px 8px; border-radius:999px; border:1px solid var(--border); color:var(--text-secondary); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cr-foot { display:flex; gap:10px; font-size:12px; color:var(--text-muted); border-top:1px solid var(--border); padding-top:6px; flex-wrap:wrap }
.cr-foot b { color:var(--text-primary); font-weight:600 }

.cr-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:16px }
.cr-grid .cr-card { margin:0 }
/* ---- table ---- */
.cr-thumb { width:40px; height:50px; object-fit:cover; border-radius:6px; background:var(--bg-secondary); display:block }
.cr-tr { cursor:pointer }
.cr-num { text-align:right; font-variant-numeric:tabular-nums }

/* ---- lightbox (FF .modal) ---- */
.cr-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999; display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:40px 16px }
.cr-overlay .modal { max-width:960px; max-height:none; overflow:visible }
.cr-mh { display:flex; align-items:center; gap:8px; margin:0 0 16px }
.cr-mh h2 { font-size:22px; font-weight:700; margin:0 8px 0 0; color:var(--text-primary) }
.cr-mh .sp { flex:1 }
.cr-x { background:transparent; border:0; font-size:22px; line-height:1; cursor:pointer; color:var(--text-muted); padding:4px 8px }
.cr-split { display:grid; grid-template-columns:3fr 2fr; gap:24px }
.cr-asset { background:var(--bg-secondary); border-radius:12px; display:flex; align-items:center; justify-content:center; min-height:320px; position:relative; overflow:hidden }
.cr-asset img, .cr-asset video { max-width:100%; max-height:640px; display:block }
.cr-asset .nav { position:absolute; top:50%; transform:translateY(-50%); border:1px solid var(--border); background:var(--bg-card); border-radius:999px; width:32px; height:32px; cursor:pointer; color:var(--text-primary) }
.cr-asset .nav.l { left:8px } .cr-asset .nav.r { right:8px }
.cr-asset-cap { font-size:12px; color:var(--text-muted); margin:8px 0 0; display:flex; gap:12px; align-items:center }
.cr-asset-cap a { color:var(--text-secondary); text-decoration:none; border-bottom:1px solid var(--border) }
.cr-fields { display:flex; flex-direction:column; gap:12px; min-width:0 }
.cr-f .l { font-size:12px; color:#6b7280; margin:0 0 2px }
.cr-f .v { font-size:13.5px; color:var(--text-primary); line-height:1.45; white-space:pre-wrap; word-break:break-word }
.cr-f .v.sub { color:var(--text-muted); font-size:12.5px }
:root.dark .cr-f .l { color:var(--text-muted) }
.cr-sec { margin:24px 0 0; padding:24px 0 0; border-top:1px solid var(--border) }
.cr-sec h3 { font-size:13px; font-weight:500; color:var(--text-secondary); margin:0 0 12px }
.cr-acts { display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.cr-hist { font-size:12.5px; color:var(--text-secondary) }
.cr-hist div { padding:6px 0; border-top:1px solid var(--border) }
.cr-qa { margin:0; padding-left:16px; font-size:12.5px; line-height:1.6 }
.cr-input, .cr-overlay textarea, .cr-overlay select, .cr-overlay input[type=text] { width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:10px; padding:10px 12px; font:inherit; font-size:13.5px; background:var(--bg-card); color:var(--text-primary) }
.cr-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.cr-charts { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin:0 0 16px }
.cr-charts .card { min-height:240px }
.cr-charts canvas { max-height:200px }
.cr-gate { font-size:12px; color:var(--text-muted) }
.cr-settings .row { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border); font-size:13.5px }
.cr-settings .row:first-of-type { border-top:0 }
.cr-settings .row .d { flex:1; color:var(--text-muted); font-size:12.5px }
.cr-settings .row .k { width:200px; font-weight:500; color:var(--text-primary) }

@media (max-width: 900px) {
  .cr-kpis { grid-template-columns:repeat(2, minmax(0,1fr)) }
  .cr-split, .cr-charts { grid-template-columns:1fr }
}

/* ---- creative loop parts (fb-loop.js) and generator queue (fb-gen.js), restyled with tokens ---- */
.lp-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 16px }
.lp-bar .sp { flex:1 }
.lp-banner { border:1px solid var(--border); border-left:4px solid #f59e0b; border-radius:12px; padding:12px 16px; margin:0 0 16px; font-size:13px; background:var(--bg-card); color:var(--text-secondary) }
.lp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px }
.lp-card { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--bg-card); display:flex; flex-direction:column; box-shadow:var(--shadow) }
.lp-media, .gn-media { background:var(--bg-secondary); display:flex; justify-content:center; align-items:center; min-height:120px }
.lp-media { height:300px }
.lp-media img, .lp-media video { max-width:100%; max-height:300px; display:block }
.gn-media { gap:6px; overflow-x:auto }
.gn-media img, .gn-media video { max-height:320px; max-width:100%; display:block }
.lp-body { padding:12px; font-size:13px; display:flex; flex-direction:column; gap:6px; flex:1 }
.lp-body b { font-size:13px }
.lp-copy { color:var(--text-muted); max-height:72px; overflow:auto; white-space:pre-wrap }
.lp-qa { font-size:12px } .lp-qa li { margin:2px 0 }
.lp-act { display:flex; gap:8px; margin-top:auto } .lp-act button { flex:1 }
.lp-modal { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999; display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:40px 16px }
.lp-box { background:var(--bg-card); color:var(--text-primary); border-radius:12px; max-width:760px; width:100%; padding:25px; box-shadow:0 20px 60px rgba(0,0,0,.15) }
.lp-box label { display:block; font-size:12px; font-weight:500; color:var(--text-secondary); margin:12px 0 4px }
.lp-box input, .lp-box select, .lp-box textarea, .gn-form select, .gn-form input, .gn-form textarea { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font:inherit; font-size:13.5px; background:var(--bg-card); color:var(--text-primary) }
.lp-types { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px }
.lp-types button, .gn-kinds button { padding:10px 12px; border:1px solid var(--border); border-radius:999px; background:var(--bg-card); color:var(--text-primary); cursor:pointer; font-size:12.5px; font-family:inherit }
.lp-types button.on, .gn-kinds button.on { background:#1d1d1d; border-color:#1d1d1d; color:#fff; font-weight:500 }
:root.dark .lp-types button.on, :root.dark .gn-kinds button.on { background:#fff; border-color:#fff; color:#111 }
.lp-rec { margin-top:16px; border-radius:12px; padding:12px 16px; background:var(--bg-secondary); font-size:12.5px }
.lp-rec.bad { background:#fee2e2; color:#991b1b }
.lp-t { width:100%; border-collapse:collapse; font-size:13.5px }
.lp-t th { background:var(--bg-secondary); color:var(--text-secondary); font-weight:500; padding:6px 14px; text-align:left; border-bottom:1px solid var(--border) }
.lp-t td { padding:12px 14px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; color:var(--text-primary) }
.lp-t .n, .lp-t th.n { text-align:right }
.gn-form { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px 16px; align-items:end; margin:0 0 12px }
.gn-form label { display:block; font-size:12px; font-weight:500; color:var(--text-secondary); margin:0 0 4px }
.gn-kinds { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px }
.gn-cap { white-space:pre-wrap; font-size:12px; color:var(--text-muted); max-height:120px; overflow:auto; border-left:3px solid var(--border); padding-left:8px; margin:2px 0 }
.gn-cap b { color:inherit }
.gn-copy { white-space:pre-wrap; font-size:12.5px; max-height:220px; overflow:auto; background:var(--bg-secondary); border-radius:10px; padding:8px 12px }