/* tema claro em tons de areia (sem branco puro) */
:root {
  --bg: #efe9e1; --card: #f8f4ee; --card2: #f2ece4; --txt: #2a2420; --muted: #7a6f66; --linha: #e0d6ca;
  --c1: #b0306a; --c2: #2f7d72; --ok: #2e7d4f; --wait: #a86f12; --bad: #b83a3a; --off: #8f857c;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--txt); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 1200px; margin: 0 auto; padding: 16px; }
a { color: var(--c1); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 8px 0 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }
.muted { color: var(--muted); }
.pequeno { font-size: .82rem; font-weight: 400; }
small { color: var(--muted); font-size: .75rem; }

.topo { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
        background: var(--card); border-bottom: 1px solid var(--linha); }
.marca { color: var(--txt); font-size: 1.1rem; }
.marca b, .login h1 b { color: var(--c1); }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; }

.btn { display: inline-block; background: var(--c1); color: #fff; border: 0; border-radius: 8px;
       padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.btn.sec { background: var(--card); color: var(--txt); border: 1px solid var(--linha); font-weight: 500; }
select, input { font: inherit; color: var(--txt); background: var(--card); border: 1px solid var(--linha);
                border-radius: 8px; padding: 8px 10px; }

.login { max-width: 340px; margin: 12vh auto; background: var(--card); padding: 28px; border-radius: 14px;
         border: 1px solid var(--linha); display: grid; gap: 14px; }
.login h1 { margin: 0; justify-content: center; }
.login .sub { margin: -10px 0 4px; text-align: center; color: var(--muted); }
.login label { display: grid; gap: 4px; font-size: .9rem; color: var(--muted); }
.erro { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); padding: 8px 12px; border-radius: 8px; margin: 0; }

.barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.kpi span { color: var(--muted); font-size: .8rem; }
.kpi b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.kpi.destaque { border-color: color-mix(in srgb, var(--c1) 45%, var(--linha)); }
.kpi.destaque b { color: var(--c1); }

.card { background: var(--card); border: 1px solid var(--linha); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.grafico { position: relative; height: 240px; }

.tabela { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: 9px 8px; border-bottom: 1px solid var(--linha); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-weight: 500; font-size: .8rem; }
td:first-child { white-space: normal; min-width: 200px; }
.n { text-align: right; font-variant-numeric: tabular-nums; }

.st { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap;
      background: color-mix(in srgb, var(--off) 15%, transparent); color: var(--off); }
.st.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.st.wait { background: color-mix(in srgb, var(--wait) 18%, transparent); color: var(--wait); }
.st.bad { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }

.anuncios { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.anuncio { display: flex; gap: 12px; border: 1px solid var(--linha); border-radius: 10px; padding: 10px; }
.anuncio img, .sem-img { width: 84px; height: 120px; object-fit: cover; border-radius: 8px; background: var(--linha); flex: none; }
.anuncio .info { display: grid; gap: 4px; align-content: start; min-width: 0; }
.anuncio .info .st { justify-self: start; }
dl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 6px 0 0; font-size: .8rem; }
dt { color: var(--muted); }
dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.acoes { display: flex; gap: 14px; align-items: center; }
.acoes form { margin: 0; }
a.link { font-size: inherit; }

/* menu */
.topo { gap: 16px; }
.menu { display: flex; gap: 4px; margin-right: auto; margin-left: 12px; }
.menu a { color: var(--muted); padding: 6px 12px; border-radius: 8px; font-weight: 500; }
.menu a.atual, .menu a:hover { background: var(--card2); color: var(--txt); text-decoration: none; }
@media (max-width: 640px) {
  .topo { flex-wrap: wrap; }
  .menu { order: 3; width: 100%; margin: 0; }
  .acoes .muted { display: none; }
}

/* chamada para o cálculo na visão geral */
.card.chamada { display: grid; gap: 4px; color: var(--txt);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c1) 10%, var(--card)), var(--card));
  border-color: color-mix(in srgb, var(--c1) 35%, var(--linha)); }
.card.chamada:hover { text-decoration: none; border-color: var(--c1); }
.card.chamada b { font-size: 1.1rem; color: var(--c1); }
.card.chamada span { color: var(--muted); }

/* página quanto investir */
.intro { margin-top: -4px; max-width: 720px; }
h3 { font-size: .95rem; margin: 18px 0 8px; }
.passo { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--c1); color: #fff; font-size: .8rem; margin-right: 6px; vertical-align: 1px; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: end; }
.numeros label { display: grid; gap: 6px; }
.numeros label > span { font-weight: 600; font-size: .9rem; }
.campo { display: flex; align-items: center; border: 1px solid var(--linha); border-radius: 8px; background: var(--card2); }
.campo i { font-style: normal; color: var(--muted); padding: 0 10px; white-space: nowrap; }
.campo input { border: 0; background: transparent; width: 100%; min-width: 0; font-size: 1.05rem; font-weight: 600; }
.campo input:focus { outline: none; }
.campo:focus-within { border-color: var(--c1); }
.numeros select { width: 100%; }
.numeros .btn { justify-self: start; }

.aviso { padding: 10px 14px; border-radius: 10px; margin: 0 0 16px; }
.aviso.ok { background: color-mix(in srgb, var(--ok) 12%, var(--card)); color: var(--ok); }
.aviso.bad { background: color-mix(in srgb, var(--bad) 12%, var(--card)); color: var(--bad); }
.aviso.info { background: color-mix(in srgb, var(--c2) 12%, var(--card)); color: var(--txt); margin: 14px 0 0; }

.fluxo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 4px 0 12px; }
.fluxo div { display: grid; gap: 2px; text-align: center; padding: 14px 8px; background: var(--card2); position: relative; }
.fluxo div:first-child { border-radius: 10px 0 0 10px; }
.fluxo div:last-child { border-radius: 0 10px 10px 0; }
.fluxo div + div::before { content: "→"; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.fluxo b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.fluxo span { color: var(--muted); font-size: .8rem; }
.fluxo .pos b, td.pos { color: var(--ok); }
.fluxo .neg b, td.neg { color: var(--bad); }
@media (max-width: 640px) {
  .fluxo { grid-template-columns: 1fr; gap: 6px; }
  .fluxo div { border-radius: 10px !important; }
  .fluxo div + div::before { content: "↓"; left: 50%; top: -12px; transform: translateX(-50%); }
}

.recomendacao.boa { border-color: color-mix(in srgb, var(--ok) 45%, var(--linha)); }
.recomendacao.ruim { border-color: color-mix(in srgb, var(--bad) 45%, var(--linha)); }
.grande { font-size: 1.25rem; margin: 4px 0 10px; }
.recomendacao.boa .grande b { color: var(--ok); }
.recomendacao.ruim .grande b { color: var(--bad); }
.plano { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.plano li { display: grid; background: var(--card2); border-radius: 10px; padding: 8px 14px; }
.plano li span { font-size: .75rem; color: var(--muted); }
.plano li:last-child { background: color-mix(in srgb, var(--ok) 14%, var(--card)); }

table.comparar td:first-child { min-width: 170px; }
table.comparar .destaque { background: color-mix(in srgb, var(--ok) 10%, transparent); }
table.comparar tr.lucro td { font-weight: 700; border-bottom: 0; }

/* comparação com período anterior */
.delta { font-style: normal; font-size: .75rem; font-weight: 600; color: var(--muted); }
.delta.bom { color: var(--ok); }
.delta.ruim { color: var(--bad); }
.legenda-delta { margin: -8px 0 16px; }

/* ranking de vídeos */
.ranking { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ranking li { display: grid; grid-template-columns: 28px 54px 1fr auto; gap: 12px; align-items: center;
  padding: 8px 10px; border-radius: 10px; background: var(--card2); border: 1px solid transparent; }
.ranking li.melhor { border-color: color-mix(in srgb, var(--ok) 45%, var(--linha)); }
.ranking li.trocar { border-color: color-mix(in srgb, var(--bad) 45%, var(--linha)); }
.ranking img, .ranking .sem-img { width: 54px; height: 76px; object-fit: cover; border-radius: 6px; background: var(--linha); }
.ranking .pos-num { font-weight: 700; color: var(--muted); text-align: center; }
.ranking .info { display: grid; gap: 2px; min-width: 0; }
.ranking .nums { display: grid; grid-template-columns: repeat(4, minmax(80px, auto)); gap: 4px 16px; text-align: right; }
.ranking .nums div { display: grid; }
.ranking .nums span { font-size: .72rem; color: var(--muted); }
.ranking .nums b { font-variant-numeric: tabular-nums; }
.selo { font-size: .78rem; font-weight: 600; }
.selo.melhor { color: var(--ok); }
.selo.trocar { color: var(--bad); }
@media (max-width: 760px) {
  .ranking li { grid-template-columns: 22px 46px 1fr; }
  .ranking .nums { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); text-align: left; }
}

/* análises */
.destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 16px; }
.card.mini { margin: 0; display: grid; gap: 2px; }
.card.mini span { color: var(--muted); font-size: .8rem; }
.card.mini b { font-size: 1.2rem; }
.card.mini.alerta { border-color: color-mix(in srgb, var(--wait) 55%, var(--linha)); }
.card.mini.alerta b { color: var(--wait); }
.duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 16px; }
.grafico.baixo { height: 220px; }
table.calor { border-collapse: separate; border-spacing: 2px; font-size: .68rem; }
table.calor th { padding: 2px 4px; text-align: center; font-weight: 500; }
table.calor td { width: 30px; min-width: 30px; height: 26px; padding: 0; text-align: center; border-radius: 4px; border: 1px solid transparent;
  background: color-mix(in srgb, var(--c1) calc(var(--n) * 85%), var(--card2)); color: var(--txt); white-space: nowrap; }
table.calor td.fechado { border: 1px dashed var(--muted); }
.barra-pct { display: inline-block; min-width: 64px; padding: 1px 6px; border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c2) 30%, transparent) var(--p), transparent var(--p)); }

/* meta da semana */
.metas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 24px; }
.meta-item { display: grid; gap: 6px; }
.meta-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.meta-topo span { font-weight: 600; font-size: .9rem; }
.meta-topo em { font-style: normal; font-weight: 400; font-size: .75rem; }
.meta-topo b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.progresso { position: relative; height: 12px; border-radius: 99px; background: var(--card2); border: 1px solid var(--linha); }
.progresso i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--c1); }
.progresso u { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--txt); opacity: .55; }
.meta-item small.ok { color: var(--ok); }
.meta-item small.bad { color: var(--bad); }