/* Competitor Intelligence — operations-first visual system.
   Unslop approach by Damir Sokolovsky (@heydamir), CC BY 4.0. */
:root {
  --bg: #e9e8e4;
  --canvas: #f3f2ef;
  --surface: #fff;
  --surface-2: #f4f3f0;
  --surface-3: #e9e8e4;
  --sidebar: #202823;
  --text: #202622;
  --muted: #5f6861;
  --line: #d8dcd6;
  --accent: #245e49;
  --accent-dark: #174a38;
  --sage: #33684f;
  --sage-soft: #e7f0e9;
  --danger: #a13e39;
  --shadow: 0 1px 3px rgba(23, 30, 26, .06);
}

html, body { background: var(--canvas); }
body { color: var(--text); font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 14px; line-height: 1.55; }
button, input, select { font: inherit; }
button { transition: background-color .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { cursor: not-allowed; }
.app-shell { grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { background: var(--sidebar); padding: 24px 16px; border-left: 1px solid rgba(255,255,255,.08); }
.brand-block { padding: 0 8px 24px; gap: 12px; }
.brand-mark { width: 40px; height: 40px; border-radius: 10px; background: #dde9dd; color: #1d4231; font-size: 14px; font-weight: 600; }
.brand-block strong { font-size: 15px; font-weight: 600; line-height: 1.25; }
.brand-block span, .side-foot { color: #aebdb1; }
.brand-block span { font-size: 12px; }
.side-nav { gap: 4px; margin-top: 24px; }
.side-link { min-height: 40px; padding: 8px 12px; gap: 10px; border-radius: 8px; color: #c8d4ca; font-size: 14px; font-weight: 400; }
.side-link.active { background: #344239; color: #fff; box-shadow: inset 3px 0 0 #86b395; }
.side-link:hover { background: #2b382f; }
.nav-icon { width: 24px; height: 24px; border: 0; border-radius: 6px; color: #9eaea1; font-size: 12px; font-variant-numeric: tabular-nums; }
.side-link.active .nav-icon { color: #dce9de; }
.side-foot span { font-size: 12px; }.side-foot small { font-size: 11px; }
.content-shell { max-width: 1680px; width: 100%; margin-inline: auto; background: var(--canvas); padding: 32px 32px 64px; }
.topbar { align-items: center; padding: 0 0 24px; border-bottom-color: var(--line); }
.eyebrow, .section-label { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
h1, h2, h3 { color: var(--text); font-weight: 600; letter-spacing: 0; }
h1 { margin: 4px 0; font-size: clamp(28px, 2.4vw, 36px); line-height: 1.2; }
h2 { font-size: 22px; line-height: 1.3; }
p { color: var(--muted); }
.topbar p { font-size: 13px; }
.topbar-actions { gap: 8px; }
.primary-action, .secondary-action, .back-action, .pager button { min-height: 40px; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; box-shadow: none; }
.primary-action { background: var(--accent); color: #fff; }.primary-action:hover { background: var(--accent-dark); }
.secondary-action, .back-action, .pager button { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.secondary-action:hover, .back-action:hover, .pager button:hover:not(:disabled) { background: var(--surface-2); }
input, select { min-height: 44px; border-radius: 8px; background: var(--surface); border-color: var(--line); font-size: 14px; }
.section-block { margin-top: 32px; }.section-head { margin-bottom: 16px; }.section-head p { font-size: 14px; }

/* Status is an instrument panel: flat, legible, and state-led. */
.operations-panel { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; margin-bottom: 16px; padding: 20px 24px; border: 1px solid #354238; border-radius: 16px; background: #26332b; box-shadow: none; }
.operations-copy h2 { color: #f5f7f4; font-size: 21px; font-weight: 500; }
.operations-copy p, .operations-copy .section-label { color: #c1d0c3; font-size: 12px; }
.service-status-grid { gap: 8px; }
.service-status { min-height: 64px; padding: 12px; gap: 10px; border-radius: 9px; background: #304036; border-color: #435147; }
.service-status strong { color: #f6f7f5; font-size: 13px; font-weight: 500; }
.service-status small { margin-top: 4px; color: #c5d1c7; font-size: 11px; line-height: 1.4; }
.service-dot, .service-status.online .service-dot, .service-status.attention .service-dot { width: 8px; height: 8px; box-shadow: none; }
.service-status.online .service-dot { background: #80c39b; }.service-status.attention .service-dot { background: #e2ae5b; }

/* Live pipeline is the main visual moment. Color indicates real state only. */
.pipeline-monitor, .insights-panel { margin-bottom: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.pipeline-monitor-head, .insights-head { margin-bottom: 16px; }
.pipeline-monitor-head h2, .insights-head h2 { margin: 4px 0 0; font-size: 22px; }
.live-refresh { color: var(--muted); font-size: 12px; font-weight: 400; }
.live-refresh i { box-shadow: none; animation: none; }
.pipeline-overall-state { margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.pipeline-overall-state i, .pipeline-overall-state.active i { box-shadow: none; animation: none; }
.pipeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pipeline-card.market { grid-column: 1 / -1; }
.pipeline-card, .pipeline-card.running, .pipeline-card.failed { padding: 20px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.pipeline-card.failed { border-color: #d8b7b2; background: #fbf3f2; }
.pipeline-card:after, .pipeline-card.ads:after, .pipeline-card.market:after { width: 3px; background: var(--accent); }
.pipeline-card.ads:after { background: #47749b; }.pipeline-card.market:after { background: #a47742; }
.pipeline-icon, .pipeline-card.ads .pipeline-icon, .pipeline-card.market .pipeline-icon { width: 36px; height: 36px; background: #e4eae5; color: var(--accent); border-radius: 8px; font-size: 11px; font-weight: 600; }
.pipeline-card.ads .pipeline-icon { color: #365e83; background: #e6edf3; }.pipeline-card.market .pipeline-icon { color: #765632; background: #eee9e0; }
.pipeline-card-top strong { font-size: 15px; font-weight: 600; }.pipeline-card-top small { font-size: 12px; line-height: 1.4; }
.pipeline-score small { font-size: 11px; }.pipeline-percent { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pipeline-progress { height: 7px; margin: 16px 0 12px; background: #dfe3dc; }
.pipeline-progress span, .pipeline-card.running .pipeline-progress span, .pipeline-card.ads .pipeline-progress span, .pipeline-card.market .pipeline-progress span { background-image: none; animation: none; }
.pipeline-meta { gap: 8px; font-size: 12px; line-height: 1.5; }.pipeline-meta b { font-size: 14px; font-weight: 600; }
.pipeline-results { gap: 6px; }.pipeline-results span { font-size: 12px; }
.pipeline-history-note { padding: 8px 10px; border-radius: 8px; font-size: 11px; font-weight: 400; }
.pipeline-foot { gap: 12px; margin-top: 12px; padding-top: 12px; }.pipeline-foot span { font-size: 11px; }.pipeline-foot strong { font-size: 13px; font-weight: 600; }
.pipeline-next span { font-size: 11px; }.pipeline-next strong { font-size: 13px; font-weight: 600; }
.pipeline-attention { font-size: 12px; font-weight: 500; }
.pipeline-actions { gap: 8px; margin-top: 16px; }.pipeline-control { min-height: 40px; margin-top: 0; border-radius: 8px; font-size: 13px; font-weight: 500; }
.pipeline-card .instant-scan-notice { font-size: 12px; }

/* Figures have one hierarchy; ornamental index tiles are removed. */
.insights-head > span { font-size: 12px; }.premium-summary { gap: 12px; }
.premium-summary .summary-card { min-height: 116px; padding: 16px; border-radius: 11px; background: var(--surface-2); box-shadow: none; }
.premium-summary .summary-card:before { display: none; }.premium-summary .summary-card .summary-card-top i { display: none; }
.premium-summary .summary-card small { white-space: normal; font-size: 12px; line-height: 1.4; }
.premium-summary .summary-card strong { margin: 8px 0 4px; font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.premium-summary .summary-card span { white-space: normal; font-size: 11px; line-height: 1.45; }
.premium-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.premium-summary .summary-card { min-height: 136px; display: flex; flex-direction: column; justify-content: space-between; }
.premium-summary .summary-card.posts { grid-column: span 2; background: #e8f0ea; border-color: #bdd0c1; }
.premium-summary .summary-card.posts strong { font-size: 48px; line-height: 1; }
.premium-summary .summary-card.attention { grid-column: span 2; background: #f2eee8; }
.premium-summary .summary-card.attention strong { color: var(--danger); }
.activity-strip { margin-top: 12px; background: var(--surface-2); }.activity-strip > div { padding: 12px 16px; }
.activity-strip span { font-size: 11px; }.activity-strip strong { font-size: 13px; font-weight: 500; }

/* Competitor cards keep every action, but privilege name, status and figures. */
.competitor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }.competitor-profile-card, .competitor-profile-card.scan-error, .competitor-profile-card.scan-partial { border: 1px solid #aebdb2; border-radius: 14px; box-shadow: 0 3px 14px rgba(23, 30, 26, .12); background: var(--surface); }
.competitor-profile-card.scan-error { border-color: #d9b5b1; box-shadow: inset 0 3px 0 var(--danger); }.competitor-profile-card.scan-partial { border-color: #dfd1b8; box-shadow: inset 0 3px 0 #ab7a36; }
.competitor-card-head { padding: 16px; gap: 12px; background: #f4f7f3; }.competitor-avatar.compact { width: 40px; height: 40px; background: #e2eae3; color: var(--accent); border-radius: 9px; font-size: 17px; }
.competitor-card-head .competitor-open h3 { font-size: 15px; font-weight: 600; line-height: 1.5; }.competitor-card-head .competitor-handle { max-width: 100%; margin-top: 4px; font-size: 11px; }
.active-pill { font-size: 11px; }.competitor-head-control { gap: 8px; }
.competitor-scan-summary { padding: 12px 16px 0; }.competitor-scan-summary > small { margin-top: 8px; font-size: 11px; line-height: 1.5; }.scan-health-row { gap: 8px; }.scan-health-row span { font-size: 11px; }
.competitor-alerts { gap: 8px; margin-top: 12px; }.competitor-alert { padding: 10px 12px; font-size: 12px; }.competitor-alert button { font-size: 11px; }
.competitor-profile-card .competitor-activity-grid { gap: 8px; margin: 12px 16px 0; }.competitor-profile-card .activity-metric { padding: 12px; background: var(--surface-2); }
.activity-metric strong { font-variant-numeric: tabular-nums; }.competitor-profile-card .activity-metric strong { font-size: 27px; font-weight: 600; }
.competitor-profile-card .activity-metric small, .activity-mini small { font-size: 11px; font-weight: 400; }.competitor-profile-card .activity-metric span { font-size: 11px; white-space: normal; line-height: 1.45; }
.competitor-profile-card .activity-mini { padding: 10px 12px; background: var(--surface-2); }.activity-mini b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.competitor-delta { margin: 12px 16px 0; padding: 10px 12px; background: #edf2ee; }.competitor-delta > span { font-size: 11px; }.competitor-delta b { font-size: 11px; font-weight: 500; }.competitor-delta strong { font-size: 12px; }
.competitor-profile-card .competitor-card-actions { gap: 8px; margin: 12px 16px; }.competitor-profile-card .card-open-action, .competitor-profile-card .card-ads-action, .competitor-profile-card .card-edit-action, .competitor-profile-card .card-facebook-action { min-height: 40px; padding: 8px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; }
.instant-scan-actions { gap: 8px; margin: 0 16px 16px; padding-top: 12px; }.instant-scan-actions span { font-size: 11px; font-weight: 500; }.instant-scan-actions button { min-height: 40px; border-radius: 8px; font-size: 12px; font-weight: 500; }
.instant-scan-status { margin: 12px 16px 0; padding: 12px; }.instant-scan-status span { font-size: 11px; }.instant-scan-status strong { font-size: 13px; }.instant-scan-status > b { font-size: 13px; }
.period-activity { padding: 10px 12px; font-size: 12px; }.period-activity strong { font-size: 13px; font-weight: 600; }
.date-range-filter { padding: 16px; border-color: var(--line); background: var(--surface); color: var(--text); }.date-range-filter > span, .date-range-filter label { font-weight: 500; }.date-range-filter input { border-color: var(--line); color: var(--text); }.date-range-filter button { background: var(--surface-2); border-color: var(--line); color: var(--text); font-weight: 500; }

/* The feeds show the real creative at review size. No forced crop or blank video tile. */
.feed-column { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ads-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.facebook-post, .meta-ad-card { min-width: 0; border-radius: 14px; box-shadow: var(--shadow); }
.facebook-post { background: var(--surface); border-color: var(--line); }
.fb-post-head { padding: 16px 18px 8px; }
.post-author strong { font-size: 15px; font-weight: 600; }.post-author div { font-size: 12px; }
.caption-wrap, .ad-copy .caption-wrap { padding: 8px 18px 16px; }.caption, .ad-copy .caption { font-size: 14px; line-height: 1.7; }
.media-preview, .ad-creative-frame .media-preview { min-height: 0; max-height: none; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: #e7eae7; }
.media-preview img, .media-preview video, .ad-creative-frame .media-preview img, .ad-creative-frame .media-preview video { width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: contain; background: transparent; }
.ad-creative-frame { background: #e7eae7; border-color: var(--line); }
.media-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(23, 31, 26, .82); border: 1px solid rgba(255,255,255,.75); }
.media-play:after { content: ""; position: absolute; top: 16px; left: 21px; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 13px solid #fff; }
.media-badge { left: 12px; bottom: 12px; padding: 6px 10px; font-size: 12px; border-radius: 6px; backdrop-filter: none; }
.media-unavailable { padding: 16px; color: var(--muted); font-size: 13px; text-align: center; }
.media-preview.is-unavailable { aspect-ratio: auto; min-height: 148px; max-height: 180px; padding: 20px; background: #e9eeea; border-top: 1px solid #cbd6cd; border-bottom: 1px solid #cbd6cd; }
.media-preview.is-unavailable .media-unavailable { align-self: start; font-size: 14px; }
.media-fallback-action { align-self: end; justify-self: center; padding: 8px 12px; border-radius: 7px; background: #d8e7dc; color: #245b3c; font-size: 13px; font-weight: 650; }
.media-facebook-embed { display: block; max-width: 100%; margin: 0 auto; border: 0; border-radius: 8px; background: #fff; }
.media-preview-player video { width: 100%; height: 100%; object-fit: contain; }
.media-gallery-open { position: absolute; top: 12px; left: 12px; min-height: 32px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.7); border-radius: 6px; background: rgba(23,31,26,.86); color: #fff; font-size: 12px; }
.media-gallery-open:hover { background: #263a30; }
.media-dialog { width: min(1000px, 96vw); max-height: 96vh; background: #1f2521; }.gallery-grid img, .gallery-grid video { width: 100%; height: auto; max-height: 74vh; object-fit: contain; background: #161b18; }
.media-source-link { display: inline-block; margin: 12px 4px 4px; color: #e5eee7; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.fb-post-footer { padding: 12px 18px 16px; }.post-actions { font-size: 12px; }
.meta-ad-card { border-color: var(--line); }.ad-library-topline { padding: 12px 16px; background: #f4f6f3; }
.ad-page-head { padding: 16px 16px 8px; }.ad-page-head strong { font-size: 15px; }.ad-page-head small { font-size: 12px; }
.ad-destination-panel { background: #f1f3f0; }.creative-usage-callout { background: #edf3ef; border-color: #c7d9cc; }

/* Market analysis gets readable evidence and charts, not decorative gloss. */
.command-center { background: transparent; }.command-brief { background: #263a30; box-shadow: none; border-radius: 14px; }.command-brief:after { display: none; }.command-kicker { letter-spacing: 0; font-weight: 500; }
.command-status { background: var(--line); border-color: var(--line); }.command-status > div { background: #2a3c32; }.command-status i { box-shadow: none; }
.command-kpis > div, .command-panel, .radar-card { background: var(--surface); border-color: var(--line); box-shadow: none; }
.command-kpis > div:before { width: 2px; }.command-panel > header span { font-weight: 600; }.command-panel > header small { font-size: 11px; }
.leader-bar em, .chart-row i { background: var(--accent); }.chart-row.blue i { background: #4f7899; }.evidence-center a { background: var(--surface); border-color: var(--line); transition: border-color .16s ease, background-color .16s ease; }.evidence-center a:hover { transform: none; border-color: #9cad9f; background: var(--surface-2); }
.format-legend > div, .chart-row, .signal-item p, .decision-item small { font-size: 12px; }.signal-item strong, .decision-item strong { font-size: 14px; }

/* Keep the mobile control room legible and easy to tap. */
@media (max-width: 1580px) { .competitor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1250px) { .competitor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1450px) { .feed-column { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1180px) { .operations-panel { grid-template-columns: 1fr; } .ads-library-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .feed-column { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .app-shell { display: block; }.sidebar { height: auto; padding: 16px; }.brand-block { padding-bottom: 16px; }.side-nav { margin-top: 12px; gap: 4px; }.side-link { min-height: 40px; padding: 8px 12px; font-size: 13px; }
  .content-shell { padding: 24px 16px 48px; }.topbar { align-items: flex-start; }.topbar-actions { width: 100%; }
  .operations-panel, .pipeline-monitor, .insights-panel { padding: 20px; }.service-status-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.pipeline-grid { grid-template-columns: 1fr; }.pipeline-card.market { grid-column: auto; }
  .premium-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }.activity-strip { grid-template-columns: 1fr; }.activity-strip > div { border-inline-start: 0; border-top: 1px solid var(--line); }
  .activity-strip > div:first-child { border-top: 0; }.competitor-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .content-shell { padding: 20px 12px 40px; }.topbar h1 { font-size: 27px; }.topbar p { font-size: 12px; }.topbar-actions button { min-height: 44px; }
  .operations-panel, .pipeline-monitor, .insights-panel { padding: 16px; border-radius: 12px; }.operations-copy p, .operations-copy .section-label { font-size: 12px; }
  .service-status-grid { gap: 8px; }.service-status { min-height: 72px; padding: 10px; }.service-status:last-child:nth-child(odd) { grid-column: 1 / -1; }.service-status strong { font-size: 12px; }.service-status small { font-size: 12px; }.service-dot { width: 8px; height: 8px; }
  .pipeline-monitor-head h2, .insights-head h2 { font-size: 21px; }.live-refresh { font-size: 11px; }.pipeline-card { padding: 16px; }.pipeline-percent { font-size: 24px; }.pipeline-meta { flex-direction: column; align-items: flex-start; }
  .pipeline-actions button, .instant-scan-actions button { min-height: 44px; }.premium-summary .summary-card { min-height: 120px; padding: 14px; }.premium-summary .summary-card strong { font-size: 27px; }.premium-summary .summary-card span { font-size: 11px; }
  .competitor-delta { align-items: flex-start; flex-direction: column; }.competitor-card-head .competitor-open h3 { font-size: 15px; }.competitor-profile-card .card-open-action, .competitor-profile-card .card-ads-action, .competitor-profile-card .card-edit-action, .competitor-profile-card .card-facebook-action { min-height: 44px; }
  .premium-summary { grid-template-columns: 1fr; }.premium-summary .summary-card.posts, .premium-summary .summary-card.attention { grid-column: auto; }.premium-summary .summary-card { min-height: 112px; }.premium-summary .summary-card.posts strong { font-size: 40px; }
  .media-preview, .ad-creative-frame .media-preview { aspect-ratio: 4 / 3; min-height: 0; max-height: none; }.media-preview img, .media-preview video, .ad-creative-frame .media-preview img, .ad-creative-frame .media-preview video { width: 100%; height: 100%; max-height: none; object-fit: contain; }
  .fb-post-head { padding: 14px 14px 8px; }.caption-wrap, .ad-copy .caption-wrap { padding: 8px 14px 14px; }.fb-post-footer { padding: 12px 14px 14px; }
  .command-brief h3 { font-size: 21px; }.command-panel { padding: 16px; }.command-status span { font-size: 12px; }.command-status strong { font-size: 13px; }
}
@media (max-width: 380px) { .premium-summary, .service-status-grid { grid-template-columns: 1fr; } .instant-scan-actions { grid-template-columns: 1fr 1fr; } .instant-scan-actions span { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }