/* =============================================
   Arqamme — Campaign Analytics UI
   Dark is the default palette; [data-theme="light"]
   further down overrides the same variable names.
   Every colour used anywhere in the app — including
   the ones scripts write into inline styles and the
   ones inline SVGs use for gradient stops — must be
   declared here, or theming leaks.
   ============================================= */

:root {
  --bg:        #0a0a0f;
  --bg2:       #111118;
  --bg3:       #1a1a25;
  --border:    #2a2a3a;
  --border2:   #3a3a4a;
  --text:      #e8e8f0;
  --text2:     #9090aa;
  --text3:     #5a5a72;
  --accent1:   #833ab4;
  --accent2:   #fd1d1d;
  --accent3:   #fcb045;
  --green:     #22c55e;
  --red:       #ef4444;
  --blue:      #3b82f6;
  --amber:     #fbbf24;
  --grad:      linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 4px 24px rgba(0,0,0,0.5);

  /* Foreground that sits on top of a saturated accent fill. */
  --on-accent:      #fff;

  /* Tinted surfaces */
  --accent-soft:    rgba(131,58,180,.15);
  --row-selected:   rgba(131,58,180,.08);
  --danger-bg:      rgba(239,68,68,.12);
  --danger-bg-hover:rgba(239,68,68,.22);
  --danger-border:  rgba(239,68,68,.25);
  --danger-soft:    rgba(239,68,68,.10);
  --danger-soft-br: rgba(239,68,68,.30);

  /* Content-type badges */
  --type-reel-bg:      rgba(131,58,180,.2);
  --type-reel-fg:      #c084fc;
  --type-video-bg:     rgba(59,130,246,.2);
  --type-video-fg:     #60a5fa;
  --type-image-bg:     rgba(34,197,94,.2);
  --type-image-fg:     #4ade80;
  --type-carousel-bg:  rgba(251,191,36,.2);
  --type-carousel-fg:  #fbbf24;

  /* Status badges */
  --status-neutral-bg: rgba(90,90,114,.15);
  --status-info-bg:    rgba(59,130,246,.15);
  --status-warn-bg:    rgba(251,191,36,.15);
  --status-ok-bg:      rgba(34,197,94,.15);
  --status-bad-bg:     rgba(239,68,68,.15);

  /* Overlays */
  --overlay:        rgba(0,0,0,.65);
  --overlay-text:   #fff;
  --modal-backdrop: rgba(10,10,15,.85);

  /* Warning banner (anonymous-scraping notice) */
  --warn-bg:      #fff8e6;
  --warn-border:  #f0c36d;
  --warn-accent:  #e6a817;
  --warn-text:    #6b4e00;
  --warn-code-bg: rgba(0,0,0,.07);

  /* Chart surfaces, read by scripts through cssVar() */
  --chart-grid:    #2a2a3a;
  --chart-tick:    #5a5a72;
  --chart-tooltip-bg: #1a1a25;
  --chart-tooltip-br: #3a3a4a;
}

/* Light palette. Same variable names, so nothing downstream
   needs to know which theme is active. */
[data-theme="light"] {
  --bg:        #f6f6fa;
  --bg2:       #ffffff;
  --bg3:       #eeeef4;
  --border:    #e0e0ea;
  --border2:   #cdcdda;
  --text:      #17171f;
  --text2:     #5c5c72;
  --text3:     #8a8a9e;
  --accent1:   #7128a0;
  --accent2:   #d81616;
  --accent3:   #d8891f;
  --green:     #16a34a;
  --red:       #dc2626;
  --blue:      #2563eb;
  --amber:     #b45309;
  --grad:      linear-gradient(135deg, #7128a0, #d81616, #e39a2c);
  --shadow:    0 4px 20px rgba(23,23,31,0.10);

  --on-accent:      #fff;

  --accent-soft:    rgba(113,40,160,.10);
  --row-selected:   rgba(113,40,160,.07);
  --danger-bg:      rgba(220,38,38,.09);
  --danger-bg-hover:rgba(220,38,38,.17);
  --danger-border:  rgba(220,38,38,.28);
  --danger-soft:    rgba(220,38,38,.08);
  --danger-soft-br: rgba(220,38,38,.28);

  --type-reel-bg:      rgba(113,40,160,.12);
  --type-reel-fg:      #7128a0;
  --type-video-bg:     rgba(37,99,235,.12);
  --type-video-fg:     #1d4ed8;
  --type-image-bg:     rgba(22,163,74,.12);
  --type-image-fg:     #15803d;
  --type-carousel-bg:  rgba(180,83,9,.12);
  --type-carousel-fg:  #b45309;

  --status-neutral-bg: rgba(138,138,158,.16);
  --status-info-bg:    rgba(37,99,235,.12);
  --status-warn-bg:    rgba(180,83,9,.12);
  --status-ok-bg:      rgba(22,163,74,.12);
  --status-bad-bg:     rgba(220,38,38,.12);

  --overlay:        rgba(23,23,31,.62);
  --overlay-text:   #fff;
  --modal-backdrop: rgba(23,23,31,.45);

  --warn-bg:      #fff8e6;
  --warn-border:  #e6c073;
  --warn-accent:  #b45309;
  --warn-text:    #6b4e00;
  --warn-code-bg: rgba(0,0,0,.07);

  --chart-grid:    #e0e0ea;
  --chart-tick:    #8a8a9e;
  --chart-tooltip-bg: #ffffff;
  --chart-tooltip-br: #cdcdda;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- Header ---- */
.header {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  position: relative;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.back-link {
  color: var(--text2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  -webkit-text-fill-color: var(--text2);
  margin-inline-end: 4px;
  transition: color .2s;
}
.back-link:hover { color: var(--text); -webkit-text-fill-color: var(--text); }

/* ---- Input Section ---- */
.input-section { padding: 32px 0 20px; }

.input-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.input-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text);
}
.input-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--text3);
}
.url-textarea {
  width: 100%;
  min-height: 120px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 13px;
  padding: 12px;
  resize: vertical;
  outline: none;
  transition: border-color .2s;
}
.url-textarea:focus { border-color: var(--accent1); }
.input-meta {
  font-size: 12px;
  color: var(--text3);
  margin: 6px 0 16px;
  min-height: 18px;
}
.input-meta .ok { color: var(--green); }
.input-meta .warn { color: var(--accent3); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.btn-spacer { flex: 1; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all .18s;
  white-space: nowrap;
}
.btn-icon { font-size: 14px; }
.btn-primary {
  background: var(--grad);
  color: var(--on-accent);
}
.btn-primary:hover { opacity: .88; transform: translateY(-1px); }
.btn-secondary {
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border2);
}
.btn-secondary:hover { border-color: var(--text3); }
.btn-danger {
  background: var(--danger-bg);
  color: var(--red);
  border: 1px solid var(--danger-border);
}
.btn-danger:hover { background: var(--danger-bg-hover); }
.btn-outline {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border2);
}
.btn-outline:hover { border-color: var(--text2); color: var(--text); }
.btn-ghost {
  background: transparent;
  color: var(--text3);
  border: none;
}
.btn-ghost:hover { color: var(--text2); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- Progress Panel ---- */
.progress-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 16px;
  overflow: hidden;
}
.progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
}
.progress-close {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
}
.progress-close:hover { color: var(--text); }
.progress-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 8px 0;
}
.progress-item {
  display: grid;
  grid-template-columns: 1fr 120px 200px;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: 12px;
}
.progress-item:last-child { border-bottom: none; }
.progress-url {
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.progress-status { font-weight: 600; text-align: center; }
.status-waiting { color: var(--text3); }
.status-processing { color: var(--blue); animation: pulse 1.5s infinite; }
.status-completed { color: var(--green); }
.status-failed { color: var(--red); }
.progress-step { color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }

/* ---- Stats ---- */
.stats-section { padding: 20px 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text3);
  margin-bottom: 6px;
}
.stat-card-with-info .stat-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
}
.stat-info-button {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text3);
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 auto;
  font: 700 10px/14px Arial, sans-serif;
  height: 15px;
  padding: 0;
  text-align: center;
  width: 15px;
}
.stat-info-button:hover,
.stat-info-button:focus-visible {
  border-color: var(--accent1);
  color: var(--accent1);
  outline: none;
}
.stat-info-button:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent1) 35%, transparent);
}
.stat-info-tooltip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  color: var(--text);
  direction: inherit;
  font-size: 12px;
  font-weight: 400;
  inset-block-start: calc(100% + 7px);
  inset-inline: 0;
  letter-spacing: normal;
  line-height: 1.45;
  padding: 9px 10px;
  position: absolute;
  text-align: start;
  text-transform: none;
  width: max-content;
  max-width: min(300px, calc(100vw - 32px));
  z-index: 10;
}
.stat-info-tooltip[hidden] { display: none; }
.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  cursor: default;
}
.stat-value.gradient {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Headline figures on the client-facing report run to seven digits and their
   labels to three words, so these cards need more room than the compact grid
   and must be free to wrap rather than spill past their borders. */
.stats-grid.report {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.stats-grid.report .stat-card {
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.stats-grid.report .stat-label {
  font-size: 11px;
  margin-bottom: 0;
  overflow-wrap: anywhere;
}
.stats-grid.report .stat-value {
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.15;
  overflow-wrap: anywhere;
  min-width: 0;
}

.best-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.best-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color .2s;
  text-decoration: none;
}
.best-card:hover { border-color: var(--border2); }
.best-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg3);
  flex-shrink: 0;
}
.media-open.media-has-ratio > .best-thumb {
  width: auto;
  height: 48px;
  max-width: 96px;
  aspect-ratio: auto;
}
.best-thumb-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: var(--bg3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.best-info { overflow: hidden; }
.best-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text3);
}
.best-user {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.best-val {
  font-size: 12px;
  color: var(--text2);
}

/* ---- Filters ---- */
.table-section { padding: 0 0 40px; }
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.filter-input, .filter-select {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px 12px;
  font-size: 13px;
  outline: none;
  transition: border-color .2s;
}
.filter-input:focus, .filter-select:focus { border-color: var(--accent1); }
.filter-input { min-width: 200px; }
.filter-input.filter-short { min-width: 110px; }
.filter-select { min-width: 110px; }

/* ---- Table ---- */
.table-wrapper { overflow-x: auto; }
.posts-table {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
}
.posts-table th {
  background: var(--bg2);
  border-bottom: 2px solid var(--border);
  padding: 10px 12px;
  text-align: start;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text3);
  white-space: nowrap;
}
.posts-table th.sortable { cursor: pointer; user-select: none; }
.posts-table th.sortable:hover { color: var(--text2); }
.posts-table th.sort-asc .sort-icon::after { content: '▲'; }
.posts-table th.sort-desc .sort-icon::after { content: '▼'; }
.posts-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.posts-table tr:hover td { background: var(--bg2); }
.posts-table tr.selected td { background: var(--row-selected); }

.post-selection-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -4px 0 14px;
  padding: 8px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text2);
  font-size: 13px;
}
.post-load-more {
  display: block;
  margin: 16px auto 0;
}

.col-check { width: 48px; }
.col-check input[type="checkbox"],
.row-check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  cursor: pointer;
  accent-color: var(--accent);
  vertical-align: middle;
}
.col-thumb { width: 64px; }
.col-user { min-width: 120px; }
.col-type { width: 80px; }
.col-date { width: 100px; }
.col-num { width: 96px; text-align: end; }
.col-link { width: 60px; text-align: center; }

.thumb-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg3);
  cursor: pointer;
  transition: transform .15s;
}
.thumb-img:hover { transform: scale(1.08); }
.media-open.media-has-ratio > .thumb-img {
  width: auto;
  height: 48px;
  max-width: 96px;
  aspect-ratio: auto;
}
.thumb-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}

.username-cell {
  display: flex;
  flex-direction: column;
}
.username-link {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.username-link:hover { color: var(--accent3); }
.username-caption {
  font-size: 11px;
  color: var(--text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.type-Reel { background: var(--type-reel-bg); color: var(--type-reel-fg); }
.type-Video { background: var(--type-video-bg); color: var(--type-video-fg); }
.type-Image { background: var(--type-image-bg); color: var(--type-image-fg); }
.type-Carousel { background: var(--type-carousel-bg); color: var(--type-carousel-fg); }
.platform-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-inline-end: 5px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  vertical-align: -1px;
}
.platform-instagram { color: #fff; background: linear-gradient(135deg, #833ab4, #fd1d1d 62%, #fcb045); }
.platform-tiktok { color: #fff; background: #111; box-shadow: 1px 1px 0 #25f4ee, -1px -1px 0 #fe2c55; }

.metric-cell {
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.metric-na { color: var(--text3); font-style: italic; }
.metric-val { color: var(--text); cursor: pointer; }
.metric-val:hover { color: var(--accent3); }

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.status-completed { background: var(--status-ok-bg); color: var(--green); }
.status-failed { background: rgba(239,68,68,.15); color: var(--red); }
.status-processing { background: rgba(59,130,246,.15); color: var(--blue); }
.status-pending { background: rgba(90,90,114,.15); color: var(--text3); }

.post-link {
  color: var(--text3);
  text-decoration: none;
  font-size: 16px;
}
.post-link:hover { color: var(--accent3); }

/* ---- Empty state ---- */
.empty-state {
  text-align: center;
  padding: 64px 20px;
}
.empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.empty-desc { color: var(--text3); font-size: 14px; }

/* ---- Tooltip ---- */
.tooltip {
  position: fixed;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  pointer-events: none;
  z-index: 9999;
  display: none;
  white-space: nowrap;
  box-shadow: var(--shadow);
}

/* ---- Detail Page ---- */
.detail-container { padding: 32px 20px; }
.detail-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 24px;
}
.detail-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg3);
}
.detail-thumb-placeholder {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}
.detail-meta { display: flex; flex-direction: column; gap: 12px; }
.detail-username {
  font-size: 24px;
  font-weight: 700;
}
.detail-type-date {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--text2);
  font-size: 13px;
}
.detail-caption {
  color: var(--text2);
  font-size: 13px;
  line-height: 1.7;
  max-height: 100px;
  overflow-y: auto;
}
.detail-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.hashtag {
  background: var(--accent-soft);
  color: var(--accent1);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
}
.detail-link {
  color: var(--text3);
  font-size: 13px;
  text-decoration: none;
}
.detail-link:hover { color: var(--text2); }

.metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.metric-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.metric-card-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text3);
  margin-bottom: 6px;
}
.metric-card-value {
  font-size: 26px;
  font-weight: 700;
}
.metric-card-growth {
  font-size: 12px;
  color: var(--green);
  margin-top: 4px;
}
.metric-card-growth.negative { color: var(--red); }
.metric-card-growth.neutral { color: var(--text3); }

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.chart-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 16px;
}
.chart-canvas { max-height: 220px; }

.history-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}
.history-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
}
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.history-table th {
  padding: 10px 16px;
  text-align: start;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text3);
  background: var(--bg3);
}
.history-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.history-table tr:last-child td { border-bottom: none; }

/* ---- Loading ---- */
.loading-spinner {
  text-align: center;
  padding: 64px;
  color: var(--text3);
  font-size: 16px;
}
.loading-message {
  display: inline-flex;
  align-items: baseline;
  min-width: 10ch;
  justify-content: center;
  animation: loading-message-pulse 1.4s ease-in-out infinite;
}
.loading-message::after {
  content: "…";
  display: inline-block;
  width: 1.4em;
  text-align: start;
  animation: loading-dots 1.2s steps(4, end) infinite;
}
#campRetry[hidden] { display: none !important; }
@keyframes loading-message-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@keyframes loading-dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "…"; }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Campaign search ---------------------------------------------- */
.campaign-search {
  position: relative;
  margin-bottom: 18px;
}
.campaign-search-input {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .18s, box-shadow .18s;
}
.campaign-search-input:focus-within {
  border-color: var(--accent1);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.campaign-search-icon {
  color: var(--text3);
  font-size: 22px;
  line-height: 1;
}
#campaignSearch {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font: inherit;
}
#campaignSearch::-webkit-search-cancel-button { display: none; }
.campaign-search-clear {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg3);
  color: var(--text2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.campaign-search-clear:hover { color: var(--text); background: var(--border); }
.campaign-search-results {
  margin-top: 8px;
  padding: 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.campaign-search-summary {
  margin-bottom: 8px;
  color: var(--text2);
  font-size: 12px;
}
.campaign-search-group + .campaign-search-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.campaign-search-group-title {
  margin-bottom: 5px;
  color: var(--text3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.campaign-search-result {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-align: start;
  cursor: pointer;
}
.campaign-search-result:hover,
.campaign-search-result:focus-visible { background: var(--bg3); }
.campaign-search-result-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg3);
  color: var(--text2);
  font-size: 14px;
}
.campaign-search-result-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.campaign-search-result-copy {
  min-width: 0;
  overflow: hidden;
}
.campaign-search-result-title {
  display: block;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campaign-search-result-meta {
  display: block;
  overflow: hidden;
  color: var(--text2);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campaign-search-empty,
.campaign-search-loading {
  padding: 8px 2px;
  color: var(--text2);
  font-size: 13px;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .detail-hero { grid-template-columns: 1fr; }
  .detail-thumb, .detail-thumb-placeholder { width: 100%; max-width: 200px; }
  .btn-spacer { display: none; }
  .filter-input { min-width: 140px; }
}

/* ---- Input Tabs ---- */
.input-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.input-tab {
  padding: 10px 22px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text3);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -1px;
  transition: all .2s;
  letter-spacing: .2px;
}
.input-tab.active {
  border-bottom-color: var(--accent1);
  color: var(--text);
}
.input-tab:hover:not(.active) { color: var(--text2); }

/* ---- Account Browser Panel ---- */
.account-browse-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.account-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.account-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  transition: border-color .2s;
}
.account-input:focus { border-color: var(--accent1); }
.account-input::placeholder { color: var(--text3); }

.account-status {
  font-size: 13px;
  color: var(--text3);
  min-height: 20px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.account-status.error { color: var(--red); }
.account-status.success { color: var(--green); }

.profile-performance {
  margin-bottom: 22px;
  padding: 18px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.profile-performance-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.profile-performance .section-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
.profile-performance .section-subtitle,
.profile-performance-sample {
  color: var(--text3);
  font-size: 12px;
  line-height: 1.5;
}
.profile-performance-sample {
  white-space: nowrap;
}
.profile-performance .stats-grid {
  margin-bottom: 0;
}

/* ---- Account Posts Grid ---- */
.account-posts-grid {
  display: grid;
  /* Profile browse media is deliberately 30% smaller than the original
     110px tile. This keeps a dense Instagram-like scan surface without
     pretending that every Reel is a square photo. */
  grid-template-columns: repeat(auto-fill, 77px);
  gap: 10px;
  justify-content: start;
  max-height: 500px;
  overflow-y: auto;
  margin-bottom: 16px;
}
.account-post-item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s, transform .12s;
  background: var(--bg3);
  width: 77px;
  aspect-ratio: 4 / 5;
}
.account-post-item:hover { border-color: var(--border2); transform: scale(1.02); }
/* When the provider supplies dimensions, the account-browser renderers set
   the exact inline ratio. These are deliberately type-appropriate visual
   fallbacks only: photos use the common 4:5 feed shape, videos/reels 9:16. */
.account-post-item.is-video { aspect-ratio: 9 / 16; }
.account-post-item.selected { border-color: var(--accent1); }
.account-post-item.selected::after {
  content: '✓';
  position: absolute;
  bottom: 6px;
  inset-inline-end: 6px;
  width: 20px;
  height: 20px;
  background: var(--accent1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--on-accent);
  line-height: 20px;
  text-align: center;
}
.account-post-item .account-media-trigger {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  border-radius: inherit;
}
.account-post-item img,
.account-post-item .media-hover-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.account-post-item img { pointer-events: none; }
.media-hover-video {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
}
.account-post-item .media-hovering img { opacity: 0; }
.account-post-item .mv-play-badge { font-size: 18px; }
.post-no-thumb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.account-post-cb {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent1);
  cursor: pointer;
  z-index: 2;
}
.account-post-type {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  background: var(--overlay);
  color: var(--overlay-text);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .4px;
  backdrop-filter: blur(2px);
  pointer-events: none;
}

/* ---- Account Actions Row ---- */
.account-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.account-select-count {
  font-size: 13px;
  color: var(--text3);
}

/* Anonymous-scraping warning banner */
.auth-banner {
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--warn-border);
  border-inline-start: 4px solid var(--warn-accent);
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: 14px;
  line-height: 1.5;
}
.auth-banner code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--warn-code-bg);
  font-size: 13px;
}
/* =============================================
   Campaigns additions
   ============================================= */

/* Grids */
.campaign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.campaign-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  color: var(--text);
  transition: transform .15s, border-color .15s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.campaign-card:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
}
.campaign-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.campaign-settings-menu-wrap {
  position: relative;
}
.campaign-settings-menu {
  position: absolute;
  z-index: 20;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  min-width: 170px;
  padding: 6px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}
.campaign-settings-menu[hidden] { display: none; }
.campaign-settings-menu-item {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text);
  text-align: start;
  cursor: pointer;
}
.campaign-settings-menu-item:hover,
.campaign-settings-menu-item:focus-visible {
  background: var(--bg3);
}
.campaign-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.campaign-dates {
  font-size: 13px;
  color: var(--text2);
}
.campaign-stats-row {
  display: flex;
  gap: 24px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.camp-stat {
  display: flex;
  flex-direction: column;
}
.camp-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.camp-stat-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text3);
}

/* Modals */
.modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-content {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-title {
  font-size: 16px;
  font-weight: 600;
}
.modal-close {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { color: var(--text); }
.modal-body {
  padding: 20px;
  overflow-y: auto;
}
.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: var(--bg3);
}

/* Forms */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.inline-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  cursor: pointer;
}
.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
}
.form-input {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
  resize: vertical;
}
.form-input:focus { border-color: var(--accent1); }
.form-row {
  display: flex;
  gap: 16px;
}

/* Layouts for Campaign Detail */
.page-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  overflow-x: auto;
}
.page-tab {
  padding: 12px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text3);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -1px;
  white-space: nowrap;
}
.page-tab:hover { color: var(--text2); }
.page-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent1);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Secondary tabs (sub-navigation within a tab panel) */
.page-tabs-secondary {
  gap: 16px;
  border-bottom-color: var(--border);
  margin-bottom: 16px;
}
.page-tabs-secondary .page-tab {
  font-size: 13px;
  padding: 8px 0;
}

/* Campaign card action buttons — sit inside the card but prevent navigation */
.campaign-card-action {
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: auto;
}
.campaign-card:hover .campaign-card-action,
.campaign-card:focus-within .campaign-card-action { opacity: 1; }

/* Import preview status badges */
.status-warn { background: var(--status-warn-bg); color: var(--amber); }
.status-ok   { background: var(--status-ok-bg);   color: var(--green); }

/* Statuses */
.status-draft { background: var(--status-neutral-bg); color: var(--text3); }
.status-live { background: var(--status-info-bg); color: var(--blue); }
.status-paused { background: var(--status-warn-bg); color: var(--amber); }
.status-completed { background: rgba(34,197,94,.15); color: var(--green); }

.status-approved { background: var(--status-ok-bg); color: var(--green); }
.status-rejected { background: var(--status-bad-bg); color: var(--red); }
.status-submitted { background: var(--status-info-bg); color: var(--blue); }

.influencer-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.influencer-card-main {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  font: inherit;
}
.influencer-select { display: inline-flex; align-self: flex-start; padding-top: 3px; }
.inf-thumb {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg3);
}
.inf-thumb-ph {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.inf-info { flex: 1; min-width: 0; }
.inf-name { font-size: 16px; font-weight: 600; }
.inf-handle { font-size: 13px; color: var(--text3); }
.inf-profile-link { color: inherit; text-decoration: none; }
.inf-profile-link:hover { color: var(--accent2); text-decoration: underline; }
.inf-profile-link:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; border-radius: 2px; }
.inf-stats { min-width:0; font-size: 13px; color: var(--text2); margin-top: 4px; display: flex; flex-wrap:wrap; gap:4px 12px; }
.inf-performance-context {
  margin-top: 12px;
  color: var(--text2);
  font-size: 11px;
  font-weight: 700;
}
.inf-performance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
  min-width: 0;
}
.inf-performance-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.inf-performance-label {
  color: var(--text3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.inf-actions { display: flex; gap: 8px; }
.shared-creators-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap:16px;
}
.shared-creators-grid .influencer-card { margin-bottom:0; min-width:0; align-items:flex-start; }
.report-section-subtitle { color:var(--text2); font-size:13px; margin:-8px 0 16px; }

/* Share UI */
.share-box {
  background: var(--bg3);
  border: 1px solid var(--border2);
  padding: 16px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.share-url {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: monospace;
  font-size: 13px;
  user-select: all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-sections {
  margin: 20px 0 0;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}
.share-sections legend {
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}
.share-sections-help {
  margin: 6px 0 12px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.45;
}
.share-sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 16px;
}
.share-section-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 0;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.share-section-toggle input {
  flex: none;
}
@media (max-width: 640px) {
  .share-sections-grid { grid-template-columns: 1fr; }
}

/* =============================================
   Brand mark & header controls
   ============================================= */

.brand-mark { flex: none; display: block; }

/* An uploaded site logo replaces the built-in mark. It is bounded rather
   than trusted: a tall or enormous image must not stretch the header. */
.brand-logo {
  flex: none;
  display: block;
  height: 28px;
  max-width: 140px;
  object-fit: contain;
}

/* The Arqamme wordmark itself includes both Arabic and English, so it replaces
   the old icon-and-text pairing. Both supplied files are present in the DOM;
   the active document theme selects the contrasting variant instantly. */
.site-logo {
  flex: none;
  display: block;
  width: min(180px, 42vw);
}
.site-logo-image {
  display: block;
  width: 100%;
  height: auto;
}
.site-logo-image-light { display: none; }
[data-theme="light"] .site-logo-image-dark { display: none; }
[data-theme="light"] .site-logo-image-light { display: block; }
.shared-report-heading {
  white-space: nowrap;
}
@media (max-width: 520px) {
  .site-logo { width: min(132px, 40vw); }
  .shared-report-heading { display: none; }
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 12px;
}
.header-page-title {
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  max-width: min(48vw, 620px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  pointer-events: none;
}
[dir="rtl"] .header-page-title { transform: translateX(50%); }
.header-page-title .brand-mark,
.header-page-title .site-logo { display: none; }
.header-page-title .back-link { pointer-events: auto; }
.header-back-link {
  flex: none;
  margin-inline-start: 14px;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text2);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.icon-btn:hover { color: var(--text); border-color: var(--text2); }
.icon-btn:focus-visible { outline: 2px solid var(--accent1); outline-offset: 2px; }
#btnTheme {
  width: 38px;
  min-width: 38px;
  padding: 0;
}
.sign-out-btn {
  width: 46px;
  height: 42px;
  margin-inline-start: 6px;
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--red);
  font-size: 23px;
}
.sign-out-btn:hover {
  border-color: var(--red);
  background: var(--danger-bg-hover);
  color: var(--red);
}
.sign-out-btn:focus-visible { outline-color: var(--red); }

/* The theme button shows the theme you would switch *to*, so only one
   of the two glyphs is ever visible. */
.theme-icon-light, .theme-icon-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 15px;
}
[data-theme="dark"] .theme-icon-dark { display: none; }
[data-theme="light"] .theme-icon-light { display: none; }
.header-status-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.header-status-label {
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .header-status-label { display: none; }
  .header-back-link { display: none; }
  .sign-out-btn { width: 42px; }
}

/* =============================================
   RTL
   Flex, grid and logical properties flip on their own.
   What follows is only the handful of things that do not:
   directional glyphs, tabular numerals, and code/URL runs
   that must stay left-to-right inside Arabic text.
   ============================================= */

[dir="rtl"] .back-arrow { transform: scaleX(-1); display: inline-block; }

/* Numbers, dates, handles, URLs and monospace payloads keep LTR ordering
   even in Arabic — "1.2K" must not render as "K1.2". */
[dir="rtl"] .metric-cell,
[dir="rtl"] .col-num,
[dir="rtl"] .stat-value,
[dir="rtl"] .best-val,
[dir="rtl"] .inf-handle,
[dir="rtl"] .best-user,
[dir="rtl"] .share-url,
[dir="rtl"] .auth-banner code,
[dir="rtl"] .detail-link,
[dir="rtl"] .username-link,
[dir="rtl"] .detail-username,
[dir="rtl"] .ltr-run {
  direction: ltr;
  text-align: end;
  unicode-bidi: isolate;
}
[dir="rtl"] .inf-handle,
[dir="rtl"] .best-user,
[dir="rtl"] .share-url,
[dir="rtl"] .detail-link,
[dir="rtl"] .username-link,
[dir="rtl"] .detail-username,
[dir="rtl"] .ltr-run { text-align: start; }

/* An @handle is a Latin token: the sigil belongs on its left however the
   surrounding paragraph runs. Without isolation "@adhamsfood" renders as
   "adhamsfood@" the moment it sits in an RTL cell. */
[dir="rtl"] #filterUsername,
[dir="rtl"] #infUsername {
  direction: ltr;
  text-align: start;
}

/* Latin-glyph inputs (usernames, URLs, numbers) read wrong when the caret
   starts on the right. */
[dir="rtl"] .url-textarea,
[dir="rtl"] .account-input,
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="url"] {
  direction: ltr;
  text-align: start;
}

[dir="rtl"] body {
  font-family: 'Segoe UI', Tahoma, 'Noto Naskh Arabic', 'Geeza Pro', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Uppercasing and wide letter-spacing are meaningless for Arabic script
   and actively break letter joining. */
[dir="rtl"] .posts-table th,
[dir="rtl"] .history-table th,
[dir="rtl"] .stat-label,
[dir="rtl"] .account-post-type,
[dir="rtl"] .status-badge,
[dir="rtl"] .type-badge {
  text-transform: none;
  letter-spacing: 0;
}

/* Shared-report section headings. These were five copies of the same
   inline style block in the template. */
.report-section-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

/* =============================================
   Campaign logo
   ============================================= */

/* A client's mark is whatever shape they gave us — a wide wordmark, a
   square glyph. `contain` inside a fixed box keeps the settings preview
   and the report header aligned without distorting either. */
.campaign-logo-preview {
  width: 96px;
  height: 96px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  flex-shrink: 0;
}
.campaign-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* On the shared report the logo is the client's, not ours, so it gets
   room to breathe above the campaign name. */
.report-logo {
  max-height: 96px;
  max-width: 260px;
  object-fit: contain;
  margin: 0 auto 20px;
  display: block;
}

/* =============================================
   Report password gate
   ============================================= */

.report-gate {
  max-width: 380px;
  margin: 0 auto;
  padding: 32px 28px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  text-align: center;
}
.report-gate-icon { font-size: 40px; margin-bottom: 12px; }
.report-gate-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.report-gate-desc { font-size: 14px; color: var(--text2); margin-bottom: 20px; }
.report-gate-error {
  font-size: 13px;
  color: var(--danger, #e5484d);
  margin-top: 12px;
  min-height: 18px;
}

/* =============================================
   Media viewer
   =============================================

   The overlay a thumbnail opens into: a playing video, or a larger still for
   a post that has none. Sized to the viewport rather than the media, so a
   portrait reel and a landscape photo both sit comfortably.
*/

.mv-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;              /* above the campaign modals */
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.mv-overlay[hidden] { display: none; }

/* The page behind must not scroll while the viewer is open. */
body.mv-open { overflow: hidden; }

.mv-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: min(920px, 100%);
  max-height: 100%;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  overflow: hidden;
}

.mv-close {
  position: absolute;
  top: 8px;
  inset-inline-end: 10px;     /* follows the reading direction in Arabic */
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--overlay);
  color: var(--overlay-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.mv-close:hover { opacity: .85; }
.mv-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 38px;
  height: 52px;
  border: 0;
  border-radius: 6px;
  transform: translateY(-50%);
  background: rgba(0,0,0,.52);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
.mv-nav:hover { background: rgba(0,0,0,.75); }
.mv-nav[hidden] { display: none; }
.mv-prev { inset-inline-start: 10px; }
.mv-next { inset-inline-end: 10px; }

.mv-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  min-width: min(320px, 70vw);
  background: #000;
}

.mv-video,
.mv-image {
  display: block;
  max-width: 100%;
  /* Leaves room for the caption bar without the dialog overflowing. */
  max-height: calc(100vh - 160px);
  object-fit: contain;
}

.mv-loading {
  position: absolute;
  color: var(--overlay-text);
  font-size: 13px;
  opacity: .8;
}

.mv-message {
  padding: 44px 28px;
  text-align: center;
  color: var(--overlay-text);
}
.mv-message-icon { font-size: 34px; margin-bottom: 10px; }
.mv-message-text { font-size: 14px; opacity: .85; max-width: 34ch; margin: 0 auto; }
.mv-retry { margin-top: 16px; }

.mv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--border2);
}
.mv-title { font-size: 14px; font-weight: 600; }
.mv-subtitle { font-size: 12px; color: var(--text3); margin-top: 2px; }
.mv-subtitle[hidden] { display: none; }
.mv-link { font-size: 13px; color: var(--accent, #833ab4); text-decoration: none; white-space: nowrap; }
.mv-link:hover { text-decoration: underline; }
.mv-link[hidden] { display: none; }

/* --- The thumbnails that open it ------------------------------------- */

.media-open {
  position: relative;
  display: inline-flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
  border-radius: 6px;
}
.media-open.media-has-ratio > .detail-thumb {
  height: auto;
  aspect-ratio: auto;
}
.media-open:focus-visible { outline: 2px solid var(--accent, #833ab4); outline-offset: 2px; }

/* Marks a thumbnail as playable, so a viewer knows there is something behind
   it before clicking. */
.mv-play-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
  pointer-events: none;
  opacity: .92;
}

/* Campaign organization controls: compact enough to leave the roster readable. */
.influencer-groups-bar { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.group-filter-wrap { display:inline-flex; align-items:center; }
.group-filter { border:1px solid var(--border); background:var(--bg2); color:var(--text2); border-radius:999px; padding:4px 10px; font-size:12px; cursor:pointer; }
.group-filter.active { background:var(--accent1); color:var(--on-accent); border-color:var(--accent1); font-weight:700; box-shadow:0 0 0 1px var(--accent1); }
.group-filter:focus-visible { outline:3px solid var(--accent3); outline-offset:2px; }
.group-manage-button { width:22px; height:22px; margin-inline-start:2px; border:1px solid var(--border); border-radius:50%; background:var(--bg2); color:var(--text2); cursor:pointer; font-weight:700; line-height:1; }
.group-manage-button:hover, .group-manage-button:focus-visible { color:var(--text); border-color:var(--accent1); outline:none; }
.influencer-selection-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px; padding:10px 12px; background:var(--accent-soft); border:1px solid var(--border2); border-radius:var(--radius-sm); color:var(--text); }
.influencer-selection-toolbar[hidden] { display:none; }
#btnExportInfluencerGroup[hidden] { display:none; }
.influencer-selection-toolbar > span { font-size:12px; font-weight:600; }
.influencer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr)); gap:12px; }
.influencer-grid .influencer-card { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; margin:0; min-height:150px; cursor:pointer; }
.influencer-grid .influencer-card-main { cursor:pointer; min-width:0; }
.influencer-grid .inf-actions { display:none; grid-column:1 / -1; border-top:1px solid var(--border); margin-top:12px; padding-top:12px; flex-wrap:wrap; }
.influencer-grid .influencer-card.is-expanded .inf-actions { display:flex; }
.copy-link-control { display:inline-flex; opacity:0; margin-inline-start:6px; border:0; background:transparent; color:var(--text3); cursor:pointer; font-size:13px; padding:2px; }
tr:hover .copy-link-control, .influencer-card:hover .copy-link-control, .copy-link-control:focus-visible { opacity:1; }
.posts-table th[draggable="true"] { cursor:grab; user-select:none; position:relative; }
.posts-table th.column-drop-before { box-shadow:inset 3px 0 0 var(--accent1); }
.posts-table th.column-drop-after { box-shadow:inset -3px 0 0 var(--accent1); }
.posts-table .column-resize { position:absolute; inset-inline-end:-4px; top:0; z-index:2; width:10px; height:100%; cursor:col-resize; border-inline-end:2px solid transparent; touch-action:none; }
.posts-table th:hover .column-resize, .posts-table .column-resize:focus-visible { border-color:var(--accent1); }
.media-open:hover .mv-play-badge { opacity: 1; }

/* On the large hero and card thumbnails the badge should read as a play
   button rather than a small glyph. */
.detail-thumb-wrap .mv-play-badge,
.best-card .mv-play-badge { font-size: 26px; }

/* =============================================
   Sign-in
   =============================================

   Centred in the viewport rather than at the top of the page: this is a
   one-purpose screen with nothing below the fold, and a card floating
   under the header with 400px of empty space beneath it looks unfinished.
*/

.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 80px;
  min-height: 60vh;
}
.login-card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.login-head { display: flex; flex-direction: column; gap: 6px; }
.login-title { font-size: 20px; font-weight: 700; }
.login-sub { font-size: 13px; color: var(--text3); line-height: 1.5; }
.login-submit { width: 100%; justify-content: center; }

/* Also used for the in-modal error in the admin panel: one error box
   treatment across the app is one thing to get right. */
.login-error {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--status-bad-bg);
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-line;
}

/* =============================================
   Admin panel
   ============================================= */

.admin-page { padding-top: 28px; padding-bottom: 72px; }

.admin-section { margin-bottom: 40px; }
.admin-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.admin-section-title { font-size: 16px; font-weight: 700; margin: 0; }

.admin-help {
  display: block;
  margin-top: 6px;
  color: var(--text3);
  font-size: 12px;
  line-height: 1.5;
}
.input-card > .admin-help:first-child { margin: 0 0 16px; }

.admin-note {
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  background: var(--status-warn-bg);
  color: var(--amber);
  font-size: 13px;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.stat-sub { margin-top: 4px; color: var(--text3); font-size: 11px; }

/* --- Agency cards --- */

.agency-list { display: flex; flex-direction: column; gap: 10px; }

.agency-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* A suspended agency is still listed — it has to be, to be reactivated —
   but must not read as one of the working ones at a glance. */
.agency-card.is-suspended { opacity: .72; }

.agency-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.agency-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
}
.agency-logins { color: var(--text2); font-size: 13px; word-break: break-all; }
.agency-usage { color: var(--text3); font-size: 12px; }
.agency-note { color: var(--text3); font-size: 12px; font-style: italic; }
.agency-actions { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }

@media (max-width: 640px) {
  .agency-card { flex-direction: column; }
}

/* --- Cross-agency campaign table --- */

.form-input-sm { padding: 5px 8px; font-size: 12px; height: auto; }
/* An unowned campaign is the one row on this table worth finding quickly. */
.row-unassigned td { background: var(--status-warn-bg); }

/* --- Instagram session --- */

.ig-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.ig-source { font-size: 13px; font-weight: 600; }
.ig-meta { color: var(--text3); font-size: 12px; }
.ig-verdict { font-size: 13px; font-weight: 600; }
.ig-verdict.is-ok { color: var(--green); }
.ig-verdict.is-bad { color: var(--red); }

/* --- Branding --- */

.admin-logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-logo-preview {
  height: 40px;
  max-width: 160px;
  object-fit: contain;
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Present for the browser's implicit form submission, invisible to everyone
   else. Not display:none — a hidden button is not always treated as a form's
   default button, and the whole point of it is to be one. */
.offscreen-submit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Impersonation banner                                                */
/* ------------------------------------------------------------------ */
.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--accent2);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 200;
}
.impersonation-return {
  background: rgba(255,255,255,.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.impersonation-return:hover { background: rgba(255,255,255,.35); }

/* ------------------------------------------------------------------ */
/* Agency logo on the card                                             */
/* ------------------------------------------------------------------ */
.agency-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.agency-logo-area {
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.agency-logo-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: var(--bg-card);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s;
}
.agency-logo-label:hover { border-color: var(--accent2); }
.agency-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.agency-logo-placeholder {
  font-size: 22px;
  opacity: .4;
}
.agency-logo-remove {
  margin-top: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
}
.agency-logo-remove:hover { color: var(--danger); }