/* assets/css/style.css */

body { background: #f7f7f9; }

.card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

.mono { font-variant-numeric: tabular-nums; }
.small-help { color: rgba(0,0,0,.55); font-size: .9rem; }
.chip-group .btn { border-radius: 999px; }

.result-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:6px 0;
  border-bottom:1px dashed rgba(0,0,0,.10);
}
.result-row:last-child{ border-bottom:0; }

/* KPI padrão (vai herdar cores do tema do card) */
.kpi-box{
  border-radius:16px;
  padding:14px;
  border: 1px solid var(--kpi-border, rgba(13,110,253,.18));
  background: var(--kpi-bg, rgba(13,110,253,.06));
}
.kpi-label{
  font-weight:600;
  color: rgba(0,0,0,.70);
  margin-bottom:2px;
}
.kpi-value{
  font-size:1.8rem;
  font-weight:800;
}
.kpi-sub{
  margin-top:4px;
  color: rgba(0,0,0,.65);
}

/* =========================
   THEMES DOS CARDS
   ========================= */

/* Base: um detalhe no topo do card */
.card-themed{
  position: relative;
  overflow: hidden;
}
.card-themed::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:6px;
  background: var(--accent, rgba(0,0,0,.08));
}

/* Shopee vermelho leve #1 */
.theme-shopee-a{
  --accent: rgba(220, 53, 69, .35);
  --kpi-bg: rgba(220, 53, 69, .08);
  --kpi-border: rgba(220, 53, 69, .20);
}

/* Shopee vermelho leve #2 (um pouco diferente) */
.theme-shopee-b{
  --accent: rgba(200, 35, 51, .28);
  --kpi-bg: rgba(200, 35, 51, .07);
  --kpi-border: rgba(200, 35, 51, .18);
}

/* Mercado Livre amarelo clarinho #1 */
.theme-ml-a{
  --accent: rgba(255, 193, 7, .45);
  --kpi-bg: rgba(255, 193, 7, .10);
  --kpi-border: rgba(255, 193, 7, .22);
}

/* Mercado Livre amarelo clarinho #2 */
.theme-ml-b{
  --accent: rgba(255, 193, 7, .33);
  --kpi-bg: rgba(255, 193, 7, .08);
  --kpi-border: rgba(255, 193, 7, .20);
}

/* end of assets/css/style.css */