/* ══════════════════════════════════════════════════════════════════════════
   Utmify-style theme — loaded AFTER tokens/layout/components.
   • Layout (collapsible icon sidebar + floating header) applies to both themes.
   • Light palette applies when <html data-theme="light"> (default).
   • <html data-theme="dark"> keeps the original dark tokens from tokens.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Light palette ───────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --bg:       #f8f8f8;
  --surface:  #ffffff;
  --surface2: #f6f6f9;
  --surface3: #efeff4;

  --border:   #ebe9f1;
  --border2:  #d8d6de;

  --text-1:   #5e5873;
  --text-2:   #6e6b7b;
  --text-3:   #a8a6b3;
  --text-4:   #c9c7d1;

  --blue:       #005ae3;
  --blue-dim:   rgba(0, 90, 227, 0.10);
  --blue-glow:  rgba(0, 90, 227, 0.40);
  --accent:     #005ae3;

  --green:      #28c76f;
  --green-dim:  rgba(40, 199, 111, 0.12);
  --green-glow: rgba(40, 199, 111, 0.40);
  --red:        #ea5455;
  --red-dim:    rgba(234, 84, 85, 0.12);
  --yellow:     #ff9f43;
  --yellow-dim: rgba(255, 159, 67, 0.12);
  --purple:     #7367f0;

  --shadow-card: 0 4px 24px 0 rgba(34, 41, 47, 0.10);
  color-scheme: light;
}
html[data-theme="dark"] { --shadow-card: 0 4px 24px 0 rgba(0, 0, 0, 0.35); color-scheme: dark; }

:root {
  --r:    6px;
  --r-sm: 5px;
  --r-lg: 8px;
  --sidebar-w:      80px;
  --sidebar-w-open: 260px;
  --topbar-h:       62px;
  --font-ui: 'Montserrat', 'Inter', Helvetica, Arial, sans-serif;
}

body { font-family: var(--font-ui); font-size: 14px; }
html[data-theme="light"] body { color: var(--text-2); }

/* ── Sidebar: 80px icon rail, expands over content on hover ─────────────── */
.app { display: block; }
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 1000;
  width: var(--sidebar-w);
  border-right: none;
  box-shadow: 0 0 15px 0 rgba(34, 41, 47, 0.05);
  overflow-x: hidden;
  transition: width .25s ease, box-shadow .25s ease;
}
.sidebar:hover {
  width: var(--sidebar-w-open);
  box-shadow: 0 0 15px 0 rgba(34, 41, 47, 0.12);
}
.sidebar-logo {
  border-bottom: none;
  padding: 22px 0 18px 26px;
  white-space: nowrap;
}
.sidebar-logo-icon { width: 30px; height: 30px; }
.sidebar-logo > div,
.proj-switcher,
.nav-label,
.user-pill-info,
.logout-btn { opacity: 0; transition: opacity .2s ease; }
.sidebar:hover .sidebar-logo > div,
.sidebar:hover .proj-switcher,
.sidebar:hover .nav-label,
.sidebar:hover .user-pill-info,
.sidebar:hover .logout-btn { opacity: 1; }
.proj-switcher { pointer-events: none; min-width: calc(var(--sidebar-w-open) - 32px); }
.sidebar:hover .proj-switcher { pointer-events: auto; }

.sidebar-nav { padding: 6px 15px; gap: 3px; }
.nav-label { white-space: nowrap; padding: 14px 8px 6px; }
.nav-item {
  height: 42px;
  padding: 10px 15px;
  gap: 20px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  transition: background .15s, color .15s, padding .15s;
}
.nav-item svg { width: 20px; height: 20px; opacity: .85; }
.sidebar:hover .nav-item:hover { background: transparent; color: var(--text-1); padding-left: 20px; }
.nav-item:hover { background: transparent; color: var(--text-1); }
.nav-item.active,
.nav-item.active:hover,
.sidebar:hover .nav-item.active:hover {
  color: #fff;
  font-weight: 400;
  padding-left: 15px;
  background: linear-gradient(118deg, var(--accent), color-mix(in srgb, var(--accent) 70%, transparent));
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 70%, transparent);
}
.nav-item.active svg { color: #fff; opacity: 1; }
.nav-ai-badge { margin-left: auto; }

.sidebar-footer { border-top: none; padding: 14px 18px; white-space: nowrap; }

/* ── Main + floating header ─────────────────────────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  overflow: visible;
  padding: 0 28px;
}
.topbar {
  position: sticky; top: 18px; z-index: 900;
  height: var(--topbar-h);
  margin: 18px 0 0;
  padding: 0 18px 0 22px;
  border: none;
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
/* Opaque strip above the floating header so content doesn't show through on scroll */
.main::before {
  content: ''; position: fixed; top: 0; left: var(--sidebar-w); right: 0; height: 18px;
  background: linear-gradient(var(--bg) 60%, transparent); z-index: 899; pointer-events: none;
}
.topbar-title { font-size: 19.6px; font-weight: 500; color: var(--text-1); }
.topbar-crumb { font-size: 19.6px; color: var(--text-4); }
.topbar-sub   { font-size: 15px; color: var(--text-2); }
.content { padding: 28px 0 56px; overflow: visible; }

.progress-bar { top: 0; left: var(--sidebar-w); }

/* Theme toggle button (topbar) */
.theme-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-2);
  transition: background .15s, color .15s;
}
.theme-btn:hover { background: var(--surface2); color: var(--text-1); }
.theme-btn svg { width: 20px; height: 20px; }
html[data-theme="light"] .theme-btn .ic-sun  { display: none; }
html[data-theme="dark"]  .theme-btn .ic-moon { display: none; }

/* ── Cards: borderless with soft shadow (Utmify/Vuexy look) ─────────────── */
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .fin-card,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .hub-header {
  border: none;
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .kpi-card:hover { box-shadow: 0 6px 28px rgba(34, 41, 47, .14); }
html[data-theme="light"] .kpi-grid-4 .kpi-card { border-top: none; }
html[data-theme="light"] .kpi-card--spend { background: var(--surface); }
.kpi-value { letter-spacing: -0.02em; font-weight: 600; font-size: 26px; }
.section-title { color: var(--text-1); font-size: 13px; letter-spacing: .04em; }

/* Tables */
html[data-theme="light"] thead,
html[data-theme="light"] thead th:first-child { background: #f3f2f7; }
html[data-theme="light"] th { color: var(--text-1); font-weight: 600; }

/* Period tabs */
html[data-theme="light"] .period-tabs { background: var(--surface2); border-color: transparent; }
html[data-theme="light"] .tab-indicator {
  background: var(--accent); border: none;
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 50%, transparent);
}
html[data-theme="light"] .tab.active { color: #fff; }

/* Primary button look used across pages */
.btn-primary-u {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 5px; padding: 10px 21px; font-size: 14px; font-weight: 500;
  transition: box-shadow .15s, opacity .15s;
}
.btn-primary-u:hover { box-shadow: 0 8px 25px -8px var(--accent); }
.btn-primary-u:disabled { opacity: .6; cursor: default; box-shadow: none; }

/* Auth overlay in light mode */
html[data-theme="light"] .auth-overlay { background: var(--bg); }
html[data-theme="light"] .auth-box { background: var(--surface); box-shadow: var(--shadow-card); border-color: transparent; }
html[data-theme="light"] .auth-input { background: #fff; border-color: var(--border2); color: var(--text-1); }
html[data-theme="light"] .auth-submit { background: var(--accent); }

/* ── Responsive: hide the rail on small screens ─────────────────────────── */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: none; width: var(--sidebar-w-open); }
  .sidebar.open .sidebar-logo > div, .sidebar.open .proj-switcher,
  .sidebar.open .nav-label, .sidebar.open .user-pill-info, .sidebar.open .logout-btn { opacity: 1; pointer-events: auto; }
  .main { margin-left: 0; padding: 0 14px; }
  .main::before, .progress-bar { left: 0; }
  .menu-toggle { display: inline-flex !important; }
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; }
}
.menu-toggle { display: none; }

@media (max-width: 900px) {
  .topbar-right { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .topbar-right::-webkit-scrollbar { display: none; }
  .period-tabs { flex-shrink: 0; }
}

/* ── Conjuntos: Segmentação ── */
.td-targeting { max-width: 280px; }
.tg-toggle { display:flex; align-items:center; gap:6px; max-width:100%; background:none; border:0; padding:4px 6px; margin:-4px -6px; border-radius:6px; cursor:pointer; color:inherit; font:inherit; text-align:left; }
.tg-toggle:hover { background: var(--surface2); }
.tg-caret { flex:none; font-size:11px; opacity:.6; transition: transform .15s; }
.tg-toggle.open .tg-caret { transform: rotate(90deg); }
.tg-sum { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color: var(--text-2); }
.tg-detail-row > td { background: var(--surface2); padding: 14px 18px !important; white-space: normal; }
.tg-detail { display:grid; gap:10px; max-width: 1100px; }
.tg-row { display:grid; grid-template-columns: 190px 1fr; gap:12px; align-items:start; font-size:13px; }
.tg-label { color: var(--text-2); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; padding-top:3px; }
.tg-val { color: var(--text-1); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tg-group { display:flex; flex-wrap:wrap; gap:6px; width:100%; }
.tg-and { width:100%; font-size:11px; font-weight:700; color: var(--accent); text-transform:uppercase; }
.tg-chip { display:inline-block; padding:3px 9px; border-radius:999px; background: var(--surface); border:1px solid var(--border2); font-size:12px; }
.tg-chip--x { text-decoration: line-through; opacity:.75; }
.tg-none { color: var(--text-4); }
.tg-on { color: #16a34a; font-weight:600; }
.tg-empty { color: var(--text-2); font-size:13px; }
@media (max-width: 700px) { .tg-row { grid-template-columns: 1fr; gap:4px; } }

/* ── Conjuntos: editor ── */
.ase-edit-btn { margin-left:6px; background:none; border:1px solid var(--border2); border-radius:5px; padding:1px 6px; cursor:pointer; color: var(--text-2); font-size:12px; }
.ase-edit-btn:hover { color: var(--accent); border-color: var(--accent); }
.tg-edit-bar { margin-bottom:12px; }
.ase-overlay { position:fixed; inset:0; background:rgba(15,20,30,.45); display:none; align-items:flex-start; justify-content:center; z-index:2000; padding:40px 16px; overflow:auto; }
.ase-overlay.open { display:flex; }
.ase-modal { background: var(--surface); color: var(--text-1); width:100%; max-width:760px; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.3); display:flex; flex-direction:column; max-height: calc(100vh - 80px); }
.ase-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:18px 22px; border-bottom:1px solid var(--border2); }
.ase-title { font-size:17px; font-weight:600; }
.ase-sub { font-size:12.5px; color: var(--text-2); margin-top:2px; }
.ase-close { background:none; border:0; font-size:24px; line-height:1; cursor:pointer; color: var(--text-2); }
.ase-body { padding:6px 22px 16px; overflow:auto; }
.ase-body section { padding:14px 0; border-bottom:1px solid var(--border2); display:flex; flex-direction:column; gap:8px; }
.ase-body section:last-child { border-bottom:0; }
.ase-body h4 { margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color: var(--text-2); }
.ase-h4-sub { margin-top:8px !important; }
.ase-row2 { display:grid !important; grid-template-columns: 1fr 1fr; gap:16px; }
.ase-row2 > div { display:flex; flex-direction:column; gap:8px; }
.ase-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ase-chips .tg-chip { display:inline-flex; align-items:center; gap:4px; padding-right:4px; }
.ase-x { background:none; border:0; cursor:pointer; color: var(--text-2); font-size:15px; line-height:1; padding:0 3px; }
.ase-x:hover { color:#ea5455; }
.ase-input, .ase-select { border:1px solid var(--border2); background: var(--surface); color: var(--text-1); border-radius:6px; padding:7px 10px; font:inherit; font-size:13px; max-width:100%; }
.ase-input { width:100%; }
.ase-budget { width:140px; }
.ase-inline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.ase-radio, .ase-check { display:inline-flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; }
.ase-plat { margin:4px 0 4px 2px; }
.ase-check--plat { font-weight:600; }
.ase-pos { display:flex; flex-wrap:wrap; gap:6px 14px; margin:6px 0 4px 22px; }
.ase-adv { margin-top:6px; }
.ase-hint { font-size:12px; color: var(--text-2); }
.ase-err { color:#ea5455; }
.ase-results { display:flex; flex-direction:column; gap:4px; max-height:200px; overflow:auto; }
.ase-results:empty { display:none; }
.ase-result { display:flex; flex-direction:column; align-items:flex-start; text-align:left; background: var(--surface2); border:1px solid var(--border2); border-radius:6px; padding:6px 10px; cursor:pointer; color: var(--text-1); font:inherit; font-size:13px; }
.ase-result small { color: var(--text-2); font-size:11px; }
.ase-result:hover:not(:disabled) { border-color: var(--accent); }
.ase-result:disabled { opacity:.45; cursor:default; }
.ase-foot { padding:14px 22px; border-top:1px solid var(--border2); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ase-warn { font-size:12px; color:#b7791f; max-width:420px; }
.ase-actions { display:flex; gap:8px; margin-left:auto; }
.ase-save { background: var(--accent); color:#fff; border:0; border-radius:6px; padding:8px 16px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.ase-save:disabled { opacity:.6; cursor:default; }
.ase-save--sm { padding:6px 12px; font-size:12.5px; }
@media (max-width: 640px) { .ase-row2 { grid-template-columns: 1fr; } .ase-overlay { padding:0; } .ase-modal { max-height:100vh; border-radius:0; } }

/* ── Métricas de criativo: seletor ── */
.cm-picker { position:absolute; z-index:1500; background: var(--surface); border:1px solid var(--border2); border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.15); padding:10px 12px; min-width:220px; max-width:280px; }
.cm-picker-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--text-2); margin-bottom:6px; }
.cm-picker-item { display:flex; align-items:center; gap:8px; padding:5px 2px; font-size:13px; cursor:pointer; color: var(--text-1); }
.cm-picker-note { margin-top:6px; font-size:11px; color: var(--text-2); line-height:1.4; }

/* ── Seleção em massa ── */
.hub-sel { width:15px; height:15px; margin:0 8px 0 0; flex:none; cursor:pointer; accent-color: var(--accent); vertical-align:middle; }
.hub-sel-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 10px; min-height:30px; }
.hub-sel-all { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color: var(--text-2); cursor:pointer; margin-right:4px; }
.hub-sel-all input { accent-color: var(--accent); width:15px; height:15px; }
.hub-sel-count { font-size:12.5px; font-weight:600; color: var(--accent); padding:0 4px; }
.hub-sel-hint { font-size:11.5px; color: var(--text-2); }
.hub-chain-chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; background: rgba(0,90,227,.08); color: var(--accent); border:1px solid rgba(0,90,227,.25); border-radius:999px; padding:3px 4px 3px 12px; }
.hub-chain-chip button { background:none; border:0; color:inherit; font-size:16px; line-height:1; cursor:pointer; padding:0 6px; }

/* ── Histórico de alterações ── */
.hi-table td { vertical-align: top; }
.hi-when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-2); }
.hi-who { font-size: 13px; color: var(--text-1); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-via { display:inline-block; margin-top:3px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:1px 7px; border-radius:999px; }
.hi-via--painel { background: rgba(0,90,227,.10); color: var(--accent); }
.hi-via--meta { background: rgba(124,58,237,.12); color: #7c3aed; }
.hi-via--ia { background: rgba(22,163,74,.12); color: #16a34a; }
.hi-level { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }
.hi-name { font-size: 13px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-change { font-size: 13px; line-height: 1.6; white-space: normal; min-width: 280px; }
.hi-arrow { color: var(--text-2); padding: 0 2px; }
.hi-muted { color: var(--text-2); }
.hi-up { color: #16a34a; font-weight: 600; font-size: 12px; }
.hi-down { color: #ea5455; font-weight: 600; font-size: 12px; }
.hi-pause { color: #ea5455; }
.hi-on { color: #16a34a; }
.hi-snap { font-size: 12px; color: var(--text-2); white-space: normal; display:inline-block; min-width: 180px; }
.hi-warn { margin: 0 0 10px; padding: 8px 12px; border-radius: 6px; background: rgba(255,159,67,.12); color: #b7791f; font-size: 12.5px; }

/* ── UTMs: diagnóstico ── */
.ut-diag { padding: 20px 22px; }
.ut-diag-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.ut-diag-head h3 { margin:0 0 4px; font-size:16px; }
.ut-diag-head p { margin:0; font-size:13px; color: var(--text-2); max-width: 720px; line-height:1.5; }
.ut-diag-loading { margin-top:16px; font-size:13px; color: var(--text-2); }
.ut-diag-sum { display:flex; align-items:center; gap:18px; margin:18px 0 12px; flex-wrap:wrap; }
.ut-diag-big { font-size:30px; font-weight:700; display:flex; flex-direction:column; line-height:1.1; }
.ut-diag-big span { font-size:11px; font-weight:500; color: var(--text-2); text-transform:uppercase; letter-spacing:.03em; margin-top:4px; }
.ut-diag-big.is-ok { color:#16a34a; } .ut-diag-big.is-bad { color:#ea5455; }
.ut-diag-text { font-size:13.5px; color: var(--text-1); max-width: 640px; line-height:1.5; }
.ut-diag-chips { margin-bottom:10px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ut-diag-table td { vertical-align: top; }
.ut-diag-issue { font-size:12.5px; line-height:1.55; min-width:260px; white-space:normal; }
.ut-dg { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.ut-dg--ok { background: rgba(22,163,74,.12); color:#16a34a; }
.ut-dg--warn { background: rgba(255,159,67,.15); color:#b7791f; }
.ut-dg--bad { background: rgba(234,84,85,.12); color:#ea5455; }
.ut-dg--na { background: var(--surface2); color: var(--text-2); }
.ut-diag-foot { margin-top:10px; font-size:12px; color: var(--text-2); }
.ut-sub { font-size:11.5px; color: var(--text-2); max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── UTMs: integração WhatsApp ── */
.wa-int-block { margin-top:16px; }
.wa-int-block .ut-code { margin-top:6px; }
.wa-newkey { margin-top:16px; padding:12px 14px; border-radius:8px; background: rgba(22,163,74,.10); border:1px solid rgba(22,163,74,.35); font-size:13px; }
.wa-newkey .ut-code { margin-top:8px; }
.wa-int-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 900px) { .wa-int-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ── Países (hub) ─────────────────────────────────────────────────────────── */
.ct-target { display:flex; align-items:center; gap:6px; margin-left:auto; font-size:12px; color:var(--text-2); white-space:nowrap; }
.ct-target input { width:64px; padding:5px 8px; border:1px solid var(--border, #e5e7eb); border-radius:6px; font:inherit; color:inherit; background:transparent; }
.ct-flag { font-size:15px; margin-right:2px; }
.ct-code { font-size:11px; color:var(--text-2); margin-left:4px; }
.ct-note { font-size:12px; color:var(--text-2); margin-left:10px; }
.ct-badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; }
.ct-badge--good   { background:#16a34a1f; color:#15803d; }
.ct-badge--warn   { background:#f59e0b24; color:#b45309; }
.ct-badge--bad    { background:#dc26261f; color:#b91c1c; }
.ct-badge--nodata { background:#6b72801a; color:#6b7280; }
.ct-share { display:inline-block; width:48px; height:6px; border-radius:3px; background:#6b72801f; margin-right:6px; vertical-align:middle; overflow:hidden; }
.ct-share span { display:block; height:100%; background:#005ae3; }
.ct-sim { margin:8px 0 10px; padding:10px 12px; border-radius:8px; background:#005ae312; border:1px solid #005ae330; font-size:13px; line-height:1.45; }
@media (max-width: 640px) { .ct-target { margin-left:0; } .ct-note { display:block; margin:4px 0 0; } }

/* ── Contas em mais de um projeto (Configurações → Escolher contas) ───────── */
.mt-overlap { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:11px; font-weight:600; background:#f59e0b24; color:#b45309; vertical-align:middle; }
.mt-overlap-alert { margin:0 0 10px; padding:9px 12px; border-radius:8px; background:#f59e0b18; border:1px solid #f59e0b55; color:#92400e; font-size:13px; line-height:1.4; }
html[data-theme="dark"] .mt-overlap { color:#fbbf24; }
html[data-theme="dark"] .mt-overlap-alert { color:#fcd34d; }

/* ── Criativos (hub) + visualizador de criativo ───────────────────────────── */
.cr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:8px; }
.cr-card { text-align:left; font:inherit; color:inherit; cursor:pointer; background:var(--surface, #fff); border:1px solid var(--border, #e5e7eb); border-left:4px solid #9ca3af; border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:10px; transition:box-shadow .15s, transform .15s; }
.cr-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.08); transform:translateY(-1px); }
.cr-card--validated { border-left-color:#16a34a; } .cr-card--promising { border-left-color:#22c55e; }
.cr-card--fatigue { border-left-color:#f59e0b; } .cr-card--burning { border-left-color:#dc2626; } .cr-card--above { border-left-color:#f97316; }
.cr-card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.cr-card-name { font-size:16px; font-weight:700; }
.cr-accts { font-size:11px; color:var(--text-2); white-space:nowrap; }
.cr-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cr-kpis div { display:flex; flex-direction:column; gap:2px; } .cr-kpis span { font-size:10px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-2); }
.cr-kpis b { font-size:13px; }
.cr-red { color:#dc2626; }
.cr-trend { font-size:11px; color:var(--text-2); } .cr-trend--bad { color:#dc2626; } .cr-trend--good { color:#16a34a; }
.cr-badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; background:#6b72801a; color:#4b5563; }
.cr-badge--validated, .cr-badge--promising { background:#16a34a1f; color:#15803d; }
.cr-badge--fatigue { background:#f59e0b24; color:#b45309; } .cr-badge--burning { background:#dc26261f; color:#b91c1c; } .cr-badge--above { background:#f9731620; color:#c2410c; }
.cr-modal-ov { position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:3000; display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; }
.cr-modal { position:relative; background:var(--surface, #fff); color:inherit; border-radius:12px; width:100%; max-width:640px; padding:22px 24px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.cr-modal--wide { max-width:1080px; }
.cr-modal-x { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:8px; border:1px solid var(--border, #e5e7eb); background:transparent; color:inherit; font-size:18px; cursor:pointer; }
.cr-modal h2 { font-size:20px; margin:6px 0 4px; } .cr-modal h3 { font-size:14px; margin:20px 0 8px; }
.cr-d-head p { margin:0; font-size:13px; color:var(--text-2); }
.cr-d-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:14px; }
.cr-kpi { border:1px solid var(--border, #e5e7eb); border-radius:8px; padding:10px; display:flex; flex-direction:column; gap:2px; }
.cr-kpi span { font-size:10px; text-transform:uppercase; color:var(--text-2); } .cr-kpi b { font-size:16px; } .cr-kpi i { font-size:11px; font-style:normal; color:var(--text-2); }
.cr-sugg { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px; font-size:13px; line-height:1.5; }
.cr-help { font-size:12px; color:var(--text-2); margin:4px 0; }
.cr-note { font-size:12px; color:#b45309; margin:6px 0 0; }
.cr-dead { font-size:10px; padding:1px 6px; border-radius:999px; background:#dc26261f; color:#b91c1c; margin-left:4px; }
.cr-merge { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.cr-merge select { max-width:100%; padding:6px 8px; border:1px solid var(--border, #e5e7eb); border-radius:6px; background:transparent; color:inherit; font:inherit; }
.cr-media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:14px; }
.cr-media { border:1px solid var(--border, #e5e7eb); border-radius:10px; overflow:hidden; }
.cr-media img, .cr-media video { width:100%; max-height:480px; object-fit:contain; background:#000; display:block; }
.cr-media-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 12px; font-size:12px; }
.cr-preview { width:100%; max-width:420px; height:640px; border:1px solid var(--border, #e5e7eb); border-radius:10px; background:#fff; margin-top:8px; }
html[data-theme="dark"] .cr-badge--validated, html[data-theme="dark"] .cr-badge--promising { color:#4ade80; }
html[data-theme="dark"] .cr-badge--fatigue, html[data-theme="dark"] .cr-note { color:#fbbf24; }
html[data-theme="dark"] .cr-badge--burning, html[data-theme="dark"] .cr-red, html[data-theme="dark"] .cr-trend--bad { color:#f87171; }
@media (max-width:640px) { .cr-modal { padding:18px 16px; } .cr-kpis { grid-template-columns:repeat(2,1fr); } }

/* Criativos — validação por etapas (tons) */
.cr-card--good { border-left-color:#16a34a; } .cr-card--warn { border-left-color:#f59e0b; }
.cr-card--bad { border-left-color:#dc2626; } .cr-card--info { border-left-color:#3b82f6; } .cr-card--idle { border-left-color:#9ca3af; }
.cr-badge--good { background:#16a34a1f; color:#15803d; } .cr-badge--warn { background:#f59e0b24; color:#b45309; }
.cr-badge--bad { background:#dc26261f; color:#b91c1c; } .cr-badge--info { background:#3b82f61f; color:#1d4ed8; } .cr-badge--idle { background:#6b72801a; color:#4b5563; }
.cr-stages { display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:11px; }
.cr-stage { padding:2px 7px; border-radius:999px; background:#6b728014; color:var(--text-2); white-space:nowrap; }
.cr-stage--pass { background:#16a34a1f; color:#15803d; font-weight:600; }
.cr-stage--fail { background:#dc26261f; color:#b91c1c; font-weight:600; }
.cr-stage--wait { background:#f59e0b24; color:#b45309; }
.cr-stage--none { opacity:.6; }
.cr-stage-sep { color:var(--text-3, #a8a6b3); }
html[data-theme="dark"] .cr-badge--good, html[data-theme="dark"] .cr-stage--pass { color:#4ade80; }
html[data-theme="dark"] .cr-badge--warn, html[data-theme="dark"] .cr-stage--wait { color:#fbbf24; }
html[data-theme="dark"] .cr-badge--bad, html[data-theme="dark"] .cr-stage--fail { color:#f87171; }
html[data-theme="dark"] .cr-badge--info { color:#93c5fd; }