/* Saved */
.saved-panel h2 { font-size: 22px; font-weight: 700; margin-bottom: 4px }
.saved-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap }
.saved-sort { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.saved-sort label { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em }
.saved-sort select {
  padding: 6px 10px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; color: var(--text); font-size: 13px; cursor: pointer;
}
.saved-sort select:focus { outline: none; border-color: var(--accent) }
#saved-search {
  padding: 6px 12px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; color: var(--text); font-size: 13px; width: 180px;
}
#saved-search:focus { outline: none; border-color: var(--accent) }
.saved-empty { color: var(--muted); padding: 40px; text-align: center }

/* Saved ad card with thumbnail layout */
.saved-card {
  display: flex; gap: 16px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px; margin-bottom: 12px;
}
.saved-card-num {
  font-size: 13px; font-weight: 800; color: var(--muted); min-width: 28px;
  display: flex; align-items: flex-start; padding-top: 2px;
}
.saved-card-thumb {
  width: 80px; height: 80px; border-radius: 10px; overflow: hidden;
  background: var(--bg); flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.saved-card-thumb img { width: 100%; height: 100%; object-fit: cover }
.saved-card-thumb .no-img { font-size: 24px; color: var(--line2) }
.saved-card-body { flex: 1; min-width: 0 }
.saved-card-top { display: flex; justify-content: space-between; align-items: start; margin-bottom: 6px }
.saved-card-name { font-weight: 700; font-size: 14px }
.saved-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px }
.saved-card-tag {
  font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}
.saved-tag-format { background: rgba(91,163,245,.12); color: var(--accent) }
.saved-tag-angle { background: rgba(224,168,50,.12); color: var(--amber) }
.saved-tag-industry { background: rgba(52,200,138,.12); color: var(--green) }
/* Saved platform sub-tabs */
.saved-platform-tabs { display: flex; gap: 6px; margin-bottom: 16px }
.saved-plat-tab { padding: 8px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--muted) }
.saved-plat-tab:hover { background: rgba(91,163,245,.06); color: var(--text) }
.saved-plat-tab.active { border-color: rgba(91,163,245,.2); background: rgba(91,163,245,.1); color: var(--accent) }
.saved-plat-tab-fb.active { border-color: rgba(24,119,242,.25); background: rgba(24,119,242,.1); color: #1877f2 }
.saved-plat-tab-ig.active { border-color: rgba(225,48,108,.25); background: rgba(225,48,108,.1); color: #e1306c }

/* Per-location "Predict Winners" on the Saved tab */
.saved-predict-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px }
.saved-predict-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 0 2px 10px rgba(91,163,245,.35); transition: transform .1s, filter .15s; white-space: nowrap }
.saved-predict-btn:hover { transform: translateY(-1px); filter: brightness(1.06) }
.saved-predict-btn:disabled { opacity: .6; cursor: default; transform: none }
.saved-predict-hint { font-size: 13px; color: var(--muted); line-height: 1.4 }
.saved-predict-result { margin-bottom: 18px }

/* Location tabs — sort saved ads by target city/ZIP. Shown only when 2+ locations exist. */
.saved-location-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 16px; padding-top: 14px; border-top: 1px solid var(--line) }
.saved-loc-tabs-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 6px }
.saved-loc-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--text) }
.saved-loc-tab:hover { border-color: var(--accent); color: var(--accent) }
.saved-loc-tab.active { border-color: var(--accent); background: rgba(91,163,245,.12); color: var(--accent) }
.saved-loc-tab .slt-count { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(127,127,127,.18); color: var(--muted) }
.saved-loc-tab.active .slt-count { background: rgba(91,163,245,.22); color: var(--accent) }

/* Messages tab */
.messages-badge { font-size: 11px; background: var(--red); color: #fff; padding: 1px 7px; border-radius: 10px; margin-left: 4px }
.messages-badge:empty { display: none }
.msg-biz-section { margin-bottom: 24px }
.msg-biz-header { font-size: 16px; font-weight: 700; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--line); display: flex; align-items: center; gap: 8px }
.msg-biz-count { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: auto }
.msg-item { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; align-items: flex-start; border-left: 4px solid var(--amber); border-top: 3px solid var(--amber) }
.msg-item.msg-critical { border-left-color: var(--red); border-top-color: var(--red) }
.msg-item.msg-low { border-left-color: var(--accent); border-top-color: var(--accent) }
.msg-item.msg-info { border-left-color: var(--green); border-top-color: var(--green) }
.msg-item.msg-win { border-left-color: var(--green); border-top-color: var(--green); background: rgba(52,200,138,.04) }
.msg-item.msg-win .msg-title { color: var(--green) }
.msg-body { flex: 1 }
.msg-title { font-weight: 700; margin-bottom: 4px }
.msg-desc { font-size: 14px; color: var(--muted); line-height: 1.5; margin-bottom: 6px }
.msg-fix-btn { padding: 6px 16px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid var(--accent); background: rgba(91,163,245,.1); color: var(--accent) }
.msg-fix-btn:hover { background: rgba(91,163,245,.2) }
/* Read items swap their action button for a "Highlight" (undo) button */
.msg-highlight-btn { display: none; border-color: var(--line2); background: transparent; color: var(--muted) }
.msg-highlight-btn:hover { background: rgba(255,255,255,.05); color: var(--text) }
.msg-item.msg-read .msg-action-btn { display: none }
.msg-item.msg-read .msg-highlight-btn { display: inline-block }
.msg-category { margin-bottom: 20px }
.msg-category-header { display: flex; align-items: center; gap: 8px; padding: 8px 0; margin-bottom: 8px; border-bottom: 1px solid var(--line) }
.msg-category-icon { font-size: 18px }
.msg-category-label { font-size: 15px; font-weight: 700 }
.msg-category-count { font-size: 13px; color: var(--muted); margin-left: auto }

/* Action Center — category tabs across the top, each collapsible */
.ac-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px }
/* Setup sub-tabs: big, equal-width segmented control at the top of the Setup view */
.setup-tabs { margin-bottom: 22px }
.setup-tabs .ac-tab { flex: 1; justify-content: center; font-size: 16px; padding: 14px 18px }
.ac-tab { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--ac-color, var(--line)); border-radius: 10px; padding: 10px 16px; cursor: pointer; color: var(--text); font-weight: 700; font-size: 15px }
.ac-tab:hover { background: var(--panel2) }
.ac-tab.active { box-shadow: 0 0 0 1px var(--ac-color) inset; background: var(--panel2) }
.ac-tab.active .ac-tab-label { color: var(--ac-color) }
.ac-tab-icon { font-size: 16px }
.ac-tab-count { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px }
.ac-tab-chevron { color: var(--muted); font-size: 11px; transition: transform .15s ease }
.ac-tab.active .ac-tab-chevron { transform: rotate(180deg); color: var(--ac-color) }
.ac-panel { display: none }
.ac-panel.open { display: block; margin-bottom: 8px }
.msg-item { cursor: pointer; transition: border-width .12s ease, border-color .12s ease }
/* Read = a bigger, darker accent that wraps the top-left corner (text & buttons stay fully readable) */
.msg-item.msg-read { opacity: 1; border-left-width: 9px; border-top-width: 6px }
.msg-item.msg-read.msg-critical { border-left-color: #7a3030; border-top-color: #7a3030 }
.msg-item.msg-read.msg-low { border-left-color: #2f5c8a; border-top-color: #2f5c8a }
.msg-item.msg-read.msg-win,
.msg-item.msg-read.msg-info { border-left-color: #1f7a54; border-top-color: #1f7a54 }
.ac-empty { color: var(--muted); font-size: 14px; padding: 8px 4px }

/* "Do Not Fix" — a quiet, dismissive button next to Fix on Needs-attention items */
.msg-donotfix-btn { border-color: var(--line2); background: transparent; color: var(--muted); margin-left: 8px }
.msg-donotfix-btn:hover { background: rgba(224,88,88,.10); border-color: var(--red); color: var(--red) }
.msg-item.msg-read .msg-donotfix-btn { display: none }

/* Recently Resolved — muted, collapsed log that the server clears after 24h */
.ac-resolved { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px }
.ac-resolved-head { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: none; cursor: pointer; color: var(--muted); font-weight: 700; font-size: 14px; padding: 6px 2px }
.ac-resolved-head:hover { color: var(--text) }
.ac-resolved-count { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px }
.ac-resolved-chevron { font-size: 11px; transition: transform .15s ease; margin-left: auto }
.ac-resolved.open .ac-resolved-chevron { transform: rotate(180deg) }
.ac-resolved-body { display: none; margin-top: 8px }
.ac-resolved.open .ac-resolved-body { display: block }
.msg-resolved-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); opacity: .85 }
.msg-resolved-check { font-weight: 800; flex-shrink: 0; margin-top: 1px }
.msg-resolved-check.mark-resolved { color: var(--green) }      /* you fixed it */
.msg-resolved-check.mark-dismissed { color: var(--muted) }     /* you skipped it — not solved */
.msg-resolved-title { font-size: 14px; color: var(--text); font-weight: 600 }
.msg-resolved-meta { font-size: 12px; color: var(--muted); margin-top: 2px }

/* Meta connect walkthrough */
.meta-connect-section { margin-bottom: 8px }
.btn-walkthrough { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 8px; background: rgba(91,163,245,.1); border: 1px solid rgba(91,163,245,.25); color: var(--accent); cursor: pointer }
.btn-walkthrough:hover { background: rgba(91,163,245,.2) }
.meta-walkthrough { margin-top: 14px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px }
.meta-walkthrough h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px }
.walkthrough-steps { display: grid; gap: 12px; margin-bottom: 16px }
.wt-step { display: flex; gap: 12px; align-items: flex-start }
.wt-num { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0 }
.wt-content { flex: 1 }
.wt-title { font-size: 15px; font-weight: 700; margin-bottom: 2px }
.wt-desc { font-size: 14px; color: var(--muted); line-height: 1.5 }
.wt-help { padding: 14px; background: rgba(224,168,50,.06); border: 1px solid rgba(224,168,50,.15); border-radius: 10px; font-size: 14px; line-height: 1.6 }
.wt-help p { font-weight: 700; margin-bottom: 8px; color: var(--amber) }
.wt-help ul { padding-left: 18px; color: var(--muted) }
.wt-help li { margin-bottom: 6px }

.saved-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start }
.saved-col { min-width: 0 }
@media (max-width: 900px) { .saved-two-col { grid-template-columns: 1fr } }
.saved-platform-section { margin-bottom: 24px }
.saved-platform-header { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; padding: 12px 0; margin-bottom: 12px; border-bottom: 2px solid var(--line) }
.saved-platform-fb { color: #1877f2; border-bottom-color: #1877f2 }
.saved-platform-ig { color: #e1306c; border-bottom-color: #e1306c }
.saved-platform-icon { font-size: 22px }
.saved-platform-count { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: auto }
.saved-card-hook { font-size: 14px; color: var(--green); font-weight: 600; margin-bottom: 8px; line-height: 1.4 }
.saved-card-meta { font-size: 13px; color: var(--muted) }
.saved-card-actions { display: flex; gap: 8px; margin-bottom: 4px }
.btn-expand {
  padding: 8px 20px; border-radius: 10px; font-size: 13px; font-weight: 700;
  cursor: pointer; border: 1px solid var(--accent); background: rgba(91,163,245,.1);
  color: var(--accent); letter-spacing: .01em;
}
.btn-expand:hover { background: rgba(91,163,245,.2) }
.btn-popout {
  padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--muted);
}
.btn-popout:hover { border-color: var(--line2); color: var(--text) }
.btn-golive-from-saved { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--green); background: rgba(52,200,138,.1); color: var(--green) }
.btn-golive-from-saved:hover { background: rgba(52,200,138,.2) }
/* Delete sits to the far right, muted until hovered so it's not clicked by accident */
.btn-delete-saved { margin-left: auto; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--muted) }
.btn-delete-saved:hover { border-color: var(--red); color: var(--red); background: rgba(224,88,88,.1) }
.saved-card-detail { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line) }
.saved-card-detail.open { display: block }

/* Keep the expanded saved-ad image compact (portrait Stories images were huge) so the whole
   ad is visible without long scrolling. The wrapper hugs the image (width: fit-content) and is
   centered, so there are no dark letterbox bars beside it. Scoped to Saved. */
.saved-card-detail .ad-image-wrap { display: block; width: fit-content; max-width: 100%; margin: 0 auto; background: none; min-height: 0; border-radius: 10px; overflow: hidden }
.saved-card-detail .ad-image-wrap img { display: block; width: auto; max-width: 100%; max-height: 300px; object-fit: contain }

/* Pop-out uses real browser window — no CSS needed here */

.saved-card-mini-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px }
.saved-card-mini-tags .saved-card-tag { font-size: 10px; padding: 1px 6px }