/* ════════════════════════════════════════════════════════════════════
   BRANDSEARCH UI KIT — base.css (compartilhado por todas as telas)
   Extraído de app.brandsearch.co em 2026-06-12 (estilos computados reais).

   Edite os tokens abaixo e TODAS as páginas mudam juntas.
   Estilos específicos de cada tela ficam no <style> de cada .html.
   ════════════════════════════════════════════════════════════════════ */

/* ══════════════ DESIGN TOKENS ══════════════ */
:root{
  /* superfícies */
  --bg-app:        #0F0807;   /* fundo escuro atrás de tudo (rail + moldura) */
  --panel:         #FFFFFF;   /* painel principal de conteúdo */
  --surface-2:     #F6F5F4;   /* inputs, botões secundários, caixas internas */
  --surface-3:     #ECEAE8;   /* thumbnails / placeholders / hover */

  /* texto */
  --text:          #1D1C1B;   /* primário */
  --text-2:        #302E2C;   /* botões/filtros */
  --text-muted:    #696663;   /* labels secundários */
  --text-faint:    #9C9894;   /* ícones apagados, eixos de gráfico */

  /* linhas */
  --border:        #EAE8E6;
  --border-card:   rgba(0,0,0,.05);

  /* acentos */
  --accent:        #CC785C;   /* terracota — botão "Ask Claude" */
  --accent-2:      #D97757;
  --brand-red:     #E2382B;   /* vermelho do logo Brandsearch */
  --green:         #2F9E5A;   /* linhas de gráfico de receita/trends */
  --green-text:    #16A34A;   /* ▲ variação positiva */
  --red:           #DC2626;   /* ▼ variação negativa */
  --blue-meta:     #1877F2;   /* Meta/Facebook */
  --blue-link:     #2D7FF9;   /* CTAs azuis (Shopify etc) */
  --purple:        #8B5CF6;   /* previsão (forecast) nos trends */
  --orange:        #F59E0B;   /* competition "Medium" */
  --tag-bg:        #DBEAFE;   /* pill de nicho */
  --tag-text:      #1D4ED8;

  /* raios */
  --r-panel: 20px;
  --r-card:  12px;
  --r-btn:   12px;
  --r-ctrl:  10px;
  --r-chip:  8px;
  --r-tag:   6px;

  /* sombras */
  --shadow-panel: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  --shadow-btn:   inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.08);
  --shadow-float: 0 8px 24px rgba(0,0,0,.18);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family:var(--font);
  font-size:16px;
  color:var(--text);
  background:var(--bg-app);
  display:flex;
  overflow:hidden;
}
button{ font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
a{ color:inherit; text-decoration:none; }
svg{ display:block; flex:none; }

/* ══════════════ RAIL — barra lateral escura 64px ══════════════ */
.rail{
  width:64px; flex:none;
  height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding:14px 0 12px;
  gap:6px;
  color:#fff;
  background:linear-gradient(180deg, #170B09 0%, #0F0807 40%, #14100D 100%);
}
.rail-logo{ margin-bottom:14px; }
.rail-spacer{ flex:1; }

.tile{
  width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  margin:2px 0;
  transition:transform .12s ease;
}
.tile:hover{ transform:scale(1.06); }
.tile.active{ box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 0 18px rgba(226,56,43,.45); }
.tile-red   { background:linear-gradient(145deg,#3A1210,#200B09); }
.tile-blue  { background:linear-gradient(145deg,#16213C,#0D1322); }
.tile-purple{ background:linear-gradient(145deg,#2B1640,#190B28); }
.tile-green { background:linear-gradient(145deg,#0F2B18,#081A0E); }
.tile-gold  { background:linear-gradient(145deg,#33250C,#1F1607); }
.tile-plain { background:rgba(255,255,255,.06); }
.tile-blue.active  { box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 0 18px rgba(59,111,245,.45); }
.tile-purple.active{ box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 0 18px rgba(168,85,247,.45); }
.tile-green.active { box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 0 18px rgba(52,211,153,.45); }
.tile-gold.active  { box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 0 18px rgba(215,165,60,.45); }
.tile-plain.active { box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 0 14px rgba(255,255,255,.25); }

.api-chip{
  font-size:11px; font-weight:700; letter-spacing:.04em;
  color:#E8E5E2;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  padding:5px 8px;
  margin:4px 0;
  display:block;
}
.api-chip.active{ box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 0 14px rgba(255,255,255,.25); }

.rail-util{
  width:36px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color:#B5B0AB;
}
.rail-util:hover{ background:rgba(255,255,255,.07); color:#fff; }
.rail-util.active{ background:rgba(255,255,255,.10); color:#fff; }
.avatar{
  width:32px; height:32px; border-radius:9px;
  background:#2A2522;
  border:1px solid rgba(255,255,255,.12);
  color:#fff; font-size:13px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  margin-top:4px;
}

/* ══════════════ PALCO + PAINEL ══════════════ */
.stage{
  flex:1; height:100vh;
  padding:8px 8px 8px 0;
  display:flex;
  min-width:0;
}
.panel{
  position:relative;
  flex:1; min-width:0;
  background:var(--panel);
  border-radius:var(--r-panel);
  box-shadow:var(--shadow-panel);
  display:flex; flex-direction:column;
  overflow:hidden;
}

/* ══════════════ TOPBAR ══════════════ */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  flex:none;
}
.app-badge{
  width:26px; height:26px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 1px 3px rgba(0,0,0,.25);
}
.app-badge.red   { background:linear-gradient(160deg,#F04438 0%, #B11226 100%); }
.app-badge.blue  { background:linear-gradient(160deg,#5B8DF8 0%, #2B55D4 100%); }
.app-badge.purple{ background:linear-gradient(160deg,#C95CF0 0%, #7C3AED 100%); }
.app-badge.green { background:linear-gradient(160deg,#34D399 0%, #15803D 100%); }
.app-badge.gold  { background:linear-gradient(160deg,#E8B94E 0%, #A87716 100%); }
.app-badge.plain { background:var(--surface-2); box-shadow:none; color:var(--text-2); }
.topbar h1{ font-size:15px; font-weight:600; letter-spacing:-.01em; }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.btn-claude{
  display:flex; align-items:center; gap:8px;
  height:32px; padding:0 12px;
  background:var(--accent);
  color:#fff;
  font-size:14px; font-weight:600;
  border-radius:var(--r-ctrl);
  box-shadow:var(--shadow-btn);
}
.btn-claude:hover{ background:#C26B4F; }

.btn-new{
  display:flex; align-items:center; gap:6px;
  height:32px; padding:0 12px;
  background:rgba(246,245,244,.9);
  color:var(--text-2);
  font-size:14px; font-weight:600;
  border-radius:var(--r-chip);
  border:1px solid var(--border);
}
.btn-new:hover{ background:var(--surface-2); }

/* ══════════════ TOOLBAR + FILTROS ══════════════ */
.toolbar{
  display:flex; align-items:center; gap:14px;
  padding:12px 20px 10px;
  flex:none;
}
.platforms{ display:flex; align-items:center; gap:12px; color:var(--text-faint); }
.platforms svg:hover{ color:var(--text-2); cursor:pointer; }

.search{
  display:flex; align-items:center; gap:8px;
  width:480px; max-width:42vw;
  height:36px; padding:0 10px 0 12px;
  background:var(--surface-2);
  border-radius:var(--r-ctrl);
  color:var(--text-muted);
  font-size:14px;
}
.search .ph{ flex:1; white-space:nowrap; overflow:hidden; }
.kbd{
  font-size:11px; font-weight:500;
  color:var(--text-muted);
  background:#fff;
  border:1px solid var(--border);
  border-radius:5px;
  padding:2px 5px;
}
.toolbar-right{ margin-left:auto; display:flex; align-items:center; gap:6px; }

.btn-ghost{
  display:flex; align-items:center; gap:7px;
  height:32px; padding:0 10px;
  font-size:14px; font-weight:500;
  color:var(--text-2);
  border-radius:var(--r-chip);
  white-space:nowrap;
}
.btn-ghost:hover{ background:var(--surface-2); }
.btn-ghost .muted{ color:var(--text-muted); font-weight:500; }
.btn-ghost .chev{ color:var(--text-faint); }

.filterbar{
  display:flex; align-items:center; gap:2px;
  padding:4px 14px 12px;
  border-bottom:1px solid var(--border);
  flex:none;
}
.ai-badge{
  font-size:11px; font-weight:600;
  color:var(--text-2);
  background:var(--surface-3);
  border-radius:5px;
  padding:1px 5px;
}

/* chip de plataforma selecionada (Discovery/Swipe) */
.platform-pill{
  display:flex; align-items:center; gap:6px;
  height:32px; padding:0 12px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-chip);
  font-size:14px; font-weight:500;
  color:var(--text-2);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* ══════════════ COMPONENTES COMPARTILHADOS ══════════════ */

/* estado vazio / limite (capturado no plano free) */
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top:64px; gap:10px;
  text-align:center;
}
.empty-state h2{ font-size:18px; font-weight:600; }
.empty-state p{ font-size:14px; font-weight:500; color:var(--text-muted); }
.btn-dark-pill{
  margin-top:8px;
  height:36px; padding:0 18px;
  background:#000; color:#fff;
  font-size:14px; font-weight:600;
  border-radius:999px;
}
.btn-dark-pill:hover{ background:#1D1C1B; }

/* skeleton loading (Alerts) */
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.skel{
  background:#F0EEEC;
  border-radius:6px;
  animation:pulse 1.6s ease-in-out infinite;
}

/* flutuantes */
.floatbar{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  z-index:10;
}
.float-pill{
  display:flex; align-items:center; gap:8px;
  height:38px; padding:0 16px;
  border-radius:12px;
  background:rgba(22,18,15,.88);
  backdrop-filter:blur(8px);
  color:rgba(255,255,255,.85);
  font-size:13px; font-weight:600;
  box-shadow:var(--shadow-float);
}
.pager{ display:flex; gap:5px; align-items:center; }
.pager i{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.35); }
.pager i.on{ background:#fff; }
.btn-export{
  display:flex; align-items:center; gap:8px;
  height:38px; padding:0 16px;
  border-radius:12px;
  background:rgba(22,18,15,.88);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:13px; font-weight:600;
  box-shadow:var(--shadow-float);
}
.btn-export:hover{ background:rgba(40,34,30,.92); }

.btn-help{
  position:absolute; bottom:18px; right:20px;
  display:flex; align-items:center; gap:7px;
  height:36px; padding:0 14px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:13px; font-weight:600; color:var(--text-2);
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  z-index:10;
}

/* área rolável genérica */
.scroll-area{ flex:1; overflow-y:auto; min-height:0; }
.scroll-area::-webkit-scrollbar{ width:10px; }
.scroll-area::-webkit-scrollbar-thumb{ background:#DDDAD7; border-radius:6px; border:3px solid #fff; }

/* tag de nicho (pill azul) */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--tag-bg);
  color:var(--tag-text);
  font-size:13px; font-weight:500;
  border-radius:var(--r-tag);
  padding:2px 8px;
}

/* ══════════════ AD CARD (Discovery / Swipe — compartilhado) ══════════════ */
.feed{ background:var(--surface-2); padding:16px 20px 60px; }
.masonry{ columns:4 270px; column-gap:16px; }
@media (max-width:1100px){ .masonry{ columns:3 260px; } }
.ad-card{ break-inside:avoid; margin-bottom:16px; background:#fff; border:1px solid var(--border-card); border-radius:var(--r-card); overflow:hidden; }
.ad-head{ display:flex; align-items:center; gap:9px; padding:11px 12px; }
.ad-head .favicon{ width:28px; height:28px; border-radius:8px; flex:none; }
.ad-head .who{ min-width:0; }
.ad-head .who b{ display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ad-head .who span{ font-size:12px; color:var(--text-muted); font-weight:500; }
.ad-head .who .live{ color:var(--green-text); }
.ad-head .who .dead{ color:var(--text-faint); }
.ad-head .win{ margin-left:auto; flex:none; font-size:11px; font-weight:700; color:#fff; background:var(--accent); border-radius:6px; padding:2px 6px; }
.ad-media{ width:100%; height:300px; object-fit:cover; display:block; background:var(--surface-3); }
.ad-media.ph{ height:170px; object-fit:initial; background:linear-gradient(150deg,#EEE9E5,#DCD6D1); display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:12px; }
.ad-copy{ padding:10px 12px 0; font-size:13px; color:var(--text-2); line-height:1.45; }
.ad-cta{ display:flex; align-items:center; gap:8px; margin:10px 12px 12px; background:var(--surface-2); border-radius:9px; padding:8px 10px; font-size:12.5px; font-weight:500; color:var(--text-muted); }
.ad-cta .dom{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ad-cta .btn{ margin-left:auto; font-size:12px; font-weight:600; color:var(--text-2); background:#fff; border:1px solid var(--border); border-radius:7px; padding:4px 10px; white-space:nowrap; }
.ad-foot{ display:flex; align-items:center; gap:12px; border-top:1px solid var(--border); padding:9px 12px; font-size:12px; font-weight:600; color:var(--text-muted); }
.ad-foot .fmt{ text-transform:capitalize; }

/* botão salvar (swipe) */
.save-btn{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; color:var(--text-faint); background:transparent; }
.save-btn:hover{ background:var(--surface-2); color:var(--text-2); }
.save-btn.on{ color:var(--accent); }

/* ---------- Trends ---------- */
.trend-meta{ font-size:12.5px; font-weight:500; color:var(--text-muted); }
.t-search{ flex:1; max-width:520px; }
.t-search input{ border:none; outline:none; background:transparent; font:inherit; font-size:14px; color:var(--text-1); width:100%; padding:2px 0; }
.t-search input::placeholder{ color:var(--text-faint); }
.t-spin{ color:var(--text-faint); font-weight:700; }
.htmx-indicator{ opacity:0; transition:opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator{ opacity:1; }
.t-select{ font:inherit; font-size:13px; font-weight:500; color:var(--text-2); background:#fff; border:1px solid var(--border); border-radius:8px; padding:7px 10px; cursor:pointer; }
.t-select:hover{ background:var(--surface-2); }

.trend-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(345px, 1fr)); gap:16px; padding:16px 20px 40px; }
.trend-card{ background:#fff; border:1px solid var(--border-card); border-radius:var(--r-card); overflow:hidden; }
.t-head{ display:flex; align-items:center; gap:8px; padding:13px 14px 10px; }
.t-head .ticon{ color:var(--green); flex:none; }
.t-head b{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t-head .niche{ margin-left:auto; font-size:12.5px; font-weight:500; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42%; flex:none; }

.t-toggle{ display:grid; grid-template-columns:1fr 1fr; margin:0 14px; border-radius:9px; overflow:hidden; background:#fff; border:1px solid var(--border); }
.t-toggle .opt{ text-align:center; padding:7px 0 8px; }
.t-toggle .opt.on{ background:var(--surface-2); }
.t-toggle .opt .p{ font-size:11.5px; font-weight:500; color:var(--text-muted); }
.t-toggle .opt .v{ font-size:13px; font-weight:700; color:var(--green-text); }
.t-toggle .opt .v.neg{ color:var(--red); }
.t-toggle .opt .v.zero{ color:var(--text-2); }

.t-chart{ padding:10px 8px 0; }
.t-chart svg{ width:100%; height:120px; display:block; }
.t-axis{ display:flex; justify-content:space-between; padding:2px 14px 8px; font-size:10px; color:var(--text-faint); }
.t-legend{ display:flex; align-items:center; gap:7px; padding:0 14px 10px; font-size:12px; font-weight:500; color:var(--text-muted); }
.t-legend .dash{ width:18px; border-top:2px dashed #8B5CF6; }

.t-foot{ display:grid; grid-template-columns:1fr 1fr 1fr; border-top:1px solid var(--border); }
.t-foot .cell{ padding:10px 14px 13px; border-right:1px solid var(--border); }
.t-foot .cell:last-child{ border-right:none; }
.t-foot .lbl{ font-size:12px; font-weight:500; color:var(--text-muted); margin-bottom:3px; }
.t-foot .val{ font-size:17px; font-weight:600; letter-spacing:-.01em; }
.comp{ display:flex; align-items:center; gap:5px; font-size:14px; font-weight:600; color:var(--green-text); }
.comp.medium{ color:var(--orange); }
.comp.high{ color:var(--red); }
.comp.low{ color:var(--green-text); }
.comp .bars{ display:flex; align-items:flex-end; gap:1.5px; height:13px; }
.comp .bars i{ width:3px; border-radius:1px; background:currentColor; }
.comp .bars i:nth-child(1){ height:5px; }
.comp .bars i:nth-child(2){ height:9px; }
.comp .bars i:nth-child(3){ height:13px; opacity:.3; }
.comp.high .bars i:nth-child(3){ opacity:1; }
.comp.low .bars i:nth-child(2){ opacity:.45; }
.comp.low .bars i:nth-child(3){ opacity:.2; }