/* ============================================================
   Axion Metrics
   Direção: hierarquia por tipografia e espaço, não por bordas e cor.
   Laranja só marca estado ativo e o que exige atenção.
   ============================================================ */

:root{
  /* superfícies */
  --bg:        #08080A;
  --surface:   #0F0F12;
  --surface-2: #16161A;
  --line:      rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.12);

  /* texto */
  --text:  #F5F5F7;
  --dim:   #86868B;
  --dim-2: #5A5A5F;

  /* marca e estado */
  --accent: #FF6A00;
  --good:   #30D158;
  --warn:   #FFD60A;
  --bad:    #FF453A;

  /* forma */
  --r-card: 14px;
  --r-ctl:  10px;
  --gap:    18px;

  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Inter", "Segoe UI", system-ui, sans-serif;
  --jp: "Noto Serif JP", serif;
}

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

html,body{ margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--ui);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
}

button,input,select{ font:inherit; color:inherit; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

/* ── Estrutura ────────────────────────────────────────────── */

.shell{ display:grid; grid-template-columns:236px 1fr; min-height:100vh; }

/* ── Navegação ────────────────────────────────────────────── */

.nav{
  border-right:1px solid var(--line);
  padding:26px 14px 18px;
  display:flex; flex-direction:column; gap:26px;
  position:sticky; top:0; height:100vh;
}

.nav__brand{ padding:0 10px; display:flex; flex-direction:column; gap:1px; }
.nav__mark{
  font-size:19px; font-weight:600; letter-spacing:.14em;
  color:var(--accent);
}
.nav__sub{
  font-size:10px; font-weight:500; letter-spacing:.3em;
  color:var(--dim-2); text-transform:uppercase; padding-left:2px;
}

.nav__list{ display:flex; flex-direction:column; gap:1px; flex:1; }

.nav__item{
  display:flex; align-items:center; gap:11px;
  padding:8px 10px; border-radius:var(--r-ctl);
  color:var(--dim); text-decoration:none;
  font-size:13.5px; font-weight:450;
  transition:background .14s ease, color .14s ease;
}
.nav__item:hover{ background:var(--surface); color:var(--text); }
.nav__item.is-on{ background:var(--surface-2); color:var(--text); font-weight:500; }
.nav__item.is-on .nav__ico{ color:var(--accent); }

.nav__ico{ display:inline-flex; width:16px; height:16px; flex:none; color:var(--dim-2); }
.nav__ico svg{ width:100%; height:100%; }

.nav__foot{ border-top:1px solid var(--line); padding-top:14px; }
.nav__acct{ display:flex; align-items:center; gap:10px; padding:2px 8px; }
.nav__avatar{
  width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:600;
}
.nav__acctxt{ display:flex; flex-direction:column; min-width:0; }
.nav__acctxt b{ font-size:12.5px; font-weight:500; }
.nav__acctxt em{ font-size:11px; font-style:normal; color:var(--dim-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Cabeçalho ────────────────────────────────────────────── */

.main{ min-width:0; padding:0 34px 0; display:flex; flex-direction:column; }

/* Título em cima, faixa do mês na largura toda logo abaixo. Dividir a
   linha com o título espremia os números e ainda abria um vão no meio
   do cabeçalho — a régua do mês é a primeira leitura, ganha a faixa. */
.top{
  display:flex; flex-direction:column; align-items:stretch;
  gap:18px;
  padding:34px 0 24px;
}
.top__title{
  margin:0; font-size:27px; font-weight:600; letter-spacing:-.025em;
}
.top__meta{ margin:3px 0 0; font-size:13px; color:var(--dim); }

.top__right{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }

/* Números do mês no cabeçalho, na largura inteira do conteúdo.
   'container-type' para a tipografia responder ao espaço real do bloco
   e não ao viewport — a mesma faixa vive com e sem a barra lateral. */
.top__month{ width:100%; min-width:0; container-type:inline-size; }
.top__month:empty{ display:none; }

/* Barra abaixo do título: alternador de visão à esquerda, filtros de
   período à direita — as duas decisões de leitura na mesma linha. */
.dashbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-bottom:var(--gap);
}
.dashbar__seg{ min-width:0; }
.dashbar .segrow{ margin-bottom:0; }
.dashbar .top__right{ align-items:center; }

.ctl{ display:flex; flex-direction:column; gap:5px; }
.ctl__lbl{ font-size:11px; color:var(--dim-2); padding-left:2px; }
.ctl__in{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-ctl); padding:7px 11px;
  font-size:13px; color:var(--text);
  transition:border-color .14s ease;
}
.ctl__in:hover{ border-color:var(--line-2); }
select.ctl__in{ appearance:none; padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 15px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size:4px 4px, 4px 4px; background-repeat:no-repeat;
}

.btn{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-ctl); padding:8px;
  display:grid; place-items:center; cursor:pointer;
  transition:background .14s ease, border-color .14s ease;
}
.btn:hover{ background:var(--surface-2); border-color:var(--line-2); }
.btn .nav__ico{ color:var(--dim); }

/* ── Grade ────────────────────────────────────────────────── */

.view{ flex:1; padding-bottom:44px; }

.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); }
.grid + .grid{ margin-top:var(--gap); }

/* Duas fileiras (4 em cima, 3 embaixo): os spans vêm do JS, a grade de
   12 colunas fecha certinho e nenhuma coluna sobra vazia. */
.grid--ratesrow + .grid{ margin-top:var(--gap); }

/* Fileira de taxas: acomoda 5, 6 ou 8 cards sem reescrever spans */
.grid--rates{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:var(--gap);
}
.grid--rates + .grid{ margin-top:var(--gap); }

.span-3{ grid-column:span 3; }
.span-4{ grid-column:span 4; }
.span-5{ grid-column:span 5; }
.span-6{ grid-column:span 6; }
.span-7{ grid-column:span 7; }
.span-8{ grid-column:span 8; }
.span-12{ grid-column:span 12; }

/* ── Card ─────────────────────────────────────────────────── */

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:18px 20px;
  min-width:0;
}
.card--flat{ background:transparent; }
.card__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.card__ttl{ margin:0; font-size:13.5px; font-weight:500; letter-spacing:-.01em; }
.card__note{ font-size:11px; color:var(--dim-2); }

/* Legenda + filtro no canto do card, sem empurrar o título */
.card__ctl{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  justify-content:flex-end;
}

/* ── Filtro próprio do card ───────────────────────────────── */

.cardfil{
  display:inline-flex; align-items:center; gap:2px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:9px; padding:2px;
}
.cardfil__b{
  border:0; background:transparent; cursor:pointer;
  color:var(--dim); font-size:11.5px; font-weight:450;
  padding:5px 9px; border-radius:7px;
  transition:background .14s ease, color .14s ease;
}
.cardfil__b:hover:not(:disabled){ color:var(--text); }
.cardfil__b.is-on{ background:var(--surface); color:var(--text); font-weight:500; }
.cardfil__b:disabled{ opacity:.5; cursor:default; }

/* Botão de data em versão compacta, para caber na barra do card */
.range--sm .range__btn{
  padding:5px 9px; font-size:11.5px;
  background:transparent; border-color:transparent;
}
.range--sm .range__btn:hover{ background:var(--surface); border-color:var(--line); }
.range--sm .range__btn::after{ width:6px; height:6px; }
.card__bd{ margin-top:16px; }

/* ── Card de taxa ─────────────────────────────────────────── */

.rate{ display:flex; flex-direction:column; gap:0; min-height:162px; }
.rate__lbl{ font-size:12.5px; color:var(--dim); font-weight:450; }
.rate__val{
  font-size:30px; font-weight:600; letter-spacing:-.03em;
  line-height:1.15; margin-top:9px;
}
.rate__val.is-ok{ color:var(--text); }
.rate__val.is-warn{ color:var(--warn); }
.rate__val.is-bad{ color:var(--bad); }
.rate__val.is-nodata{ color:var(--dim-2); font-weight:500; }

/* Contagem crua logo abaixo do número — "4 de 10" ancora a porcentagem */
.rate__cnt{ font-size:12px; color:var(--text); opacity:.72; margin-top:4px; }

.rate__exp{ font-size:11.5px; color:var(--dim-2); margin-top:5px; }
.rate__sub{ font-size:11px; color:var(--dim-2); margin-top:auto; padding-top:12px; }

.rate__foot{ display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:auto; padding-top:14px; }

.delta{ font-size:12px; font-weight:500; display:inline-flex; align-items:center; gap:4px; }
.delta.is-up{ color:var(--good); }
.delta.is-down{ color:var(--bad); }
.delta.is-flat{ color:var(--dim-2); }

.spark{ width:74px; height:26px; flex:none; opacity:.85; }

/* ── Selo de fonte ausente ────────────────────────────────── */

.pending{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:500; color:var(--dim-2);
  border:1px dashed var(--line-2); border-radius:999px;
  padding:3px 9px;
}
.pending::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--dim-2);
}

/* ── Funil (elemento de assinatura) ───────────────────────── */

.fun{ display:flex; flex-direction:column; gap:2px; }

.fun__row{ padding:11px 0; border-bottom:1px solid var(--line); }
.fun__row:last-child{ border-bottom:0; padding-bottom:2px; }

.fun__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.fun__name{ font-size:13px; font-weight:450; }
.fun__name em{ font-style:normal; color:var(--dim-2); font-size:11px; margin-left:8px; }
.fun__n{ font-size:15px; font-weight:600; letter-spacing:-.02em; }
.fun__n.is-off{ color:var(--dim-2); font-weight:500; }

.fun__track{
  position:relative; height:9px; margin-top:9px;
  border-radius:5px; overflow:hidden;
  background:rgba(255,255,255,.05);
}
.fun__fill{
  position:absolute; inset:0 auto 0 0;
  border-radius:5px;
  background:var(--accent);
  transition:width .55s cubic-bezier(.22,1,.36,1);
}
.fun__fill--soft{ background:rgba(255,106,0,.42); }

.fun__track--off{
  background:transparent;
  border-top:1px dashed var(--line-2);
  height:1px; border-radius:0; margin-top:14px;
}

.fun__ft{ display:flex; justify-content:space-between; gap:12px; margin-top:7px; }
.fun__conv{ font-size:11.5px; color:var(--dim); }
.fun__loss{ font-size:11.5px; color:var(--dim-2); }
.fun__loss b{ color:var(--bad); font-weight:500; }

/* ── Faixa de saúde ───────────────────────────────────────── */

.health{ display:flex; gap:5px; flex-wrap:wrap; }
.hday{
  flex:1 1 32px; min-width:32px;
  border:1px solid var(--line); border-radius:9px;
  padding:8px 3px 7px; text-align:center;
  background:var(--surface-2);
}
.hday__d{ font-size:10px; color:var(--dim-2); }
.hday__dot{
  width:7px; height:7px; border-radius:50%; margin:6px auto 0;
  background:var(--dim-2);
}
.hday.is-ok    .hday__dot{ background:var(--good); }
.hday.is-warn  .hday__dot{ background:var(--warn); }
.hday.is-bad   .hday__dot{ background:var(--bad); }
.hday.is-sel{ border-color:var(--accent); }

.legend{ display:flex; gap:16px; margin-top:14px; flex-wrap:wrap; }
.legend span{ display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color:var(--dim-2); }
.legend i{ width:6px; height:6px; border-radius:50%; display:inline-block; }

/* ── Resumo ───────────────────────────────────────────────── */

.sum__row{
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--line);
  font-size:12.5px; color:var(--dim);
}
.sum__row:last-child{ border-bottom:0; }
.sum__row b{ color:var(--text); font-weight:600; font-size:14px; min-width:18px; }
.sum__dot{ width:6px; height:6px; border-radius:50%; flex:none; }

.issue{
  border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; margin-bottom:10px; background:var(--surface-2);
}
.issue__t{ font-size:12.5px; font-weight:500; }
.issue__v{ font-size:21px; font-weight:600; letter-spacing:-.02em; margin-top:5px; }
.issue__v.is-bad{ color:var(--bad); }
.issue__v.is-warn{ color:var(--warn); }
.issue__x{ font-size:11px; color:var(--dim-2); margin-top:3px; }

/* ── KPI ──────────────────────────────────────────────────── */

.kpi{ display:flex; flex-direction:column; gap:7px; min-height:104px; }
.kpi__lbl{ font-size:12px; color:var(--dim); }
.kpi__val{ font-size:22px; font-weight:600; letter-spacing:-.025em; }
.kpi__val.is-off{ color:var(--dim-2); font-weight:500; }
/* Lucro e CPA: a cor é o recado. Verde ganhou, vermelho queimou. */
.kpi__val.is-good{ color:var(--good); }
.kpi__val.is-bad{ color:var(--bad); }
.kpi__note{ font-size:11px; color:var(--dim-2); margin-top:6px; }
.kpi__ft{ margin-top:auto; }

/* Card com dois números (faturamento | vendas). O segundo não disputa
   atenção com o primeiro: fonte menor e separado por um traço fino. */
.kpi__duo{ display:flex; align-items:stretch; gap:12px; }
.kpi__cell{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.kpi__cell:first-child{ flex:1 1 auto; }
.kpi__cell--2{
  flex:0 0 auto; margin-left:auto; padding-left:12px;
  border-left:1px solid var(--line);
  /* Encosta rótulo e número na borda direita do card: os dois têm
     larguras diferentes e sem isto ficavam pendurados à esquerda. */
  align-items:flex-end; text-align:right;
}
.kpi__val--2{ font-size:15px; color:var(--dim); }

/* Taxa e o real que ela custou na mesma linha de base */
.kpi__vrow{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.kpi__sfx{ font-size:14px; color:var(--dim-2); font-variant-numeric:tabular-nums; }

/* Quebra do número grande em partes (reembolso por origem). Fica no pé do
   card, no lugar do rodapé de baseline. */
.kpi__brk{ display:flex; flex-direction:column; gap:4px; margin-top:auto; padding-top:12px; }
.kpi__brki{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.kpi__brki i{ font-style:normal; font-size:11.5px; color:var(--dim-2); }
.kpi__brki b{ font-size:11.5px; font-weight:500; color:var(--dim);
              font-variant-numeric:tabular-nums; }

/* ── Tabela ───────────────────────────────────────────────── */

.tbl{ width:100%; border-collapse:collapse; }
.tbl th{
  text-align:left; font-size:11px; font-weight:500; color:var(--dim-2);
  padding:0 14px 10px 0; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl td{
  padding:11px 14px 11px 0; border-bottom:1px solid var(--line);
  font-size:12.5px; white-space:nowrap;
}
.tbl tr:last-child td{ border-bottom:0; }
.tbl td.num, .tbl th.num{ text-align:right; padding-right:0; }
.tbl td.num.is-good{ color:var(--good); }
.tbl td.num.is-bad{ color:var(--bad); }
.tbl__wrap{ overflow-x:auto; }

.tag{
  display:inline-block; font-size:10.5px; font-weight:500;
  padding:3px 8px; border-radius:6px;
  background:var(--surface-2); color:var(--dim); border:1px solid var(--line);
}
.tag.is-ok{ color:var(--good); border-color:rgba(48,209,88,.28); }
.tag.is-bad{ color:var(--bad); border-color:rgba(255,69,58,.28); }
.tag.is-warn{ color:var(--warn); border-color:rgba(255,214,10,.28); }

/* ── Vazio ────────────────────────────────────────────────── */

.empty{
  border:1px dashed var(--line-2); border-radius:var(--r-card);
  padding:52px 30px; text-align:center;
}
.empty__t{ font-size:15px; font-weight:500; }
.empty__d{ font-size:13px; color:var(--dim); margin-top:7px; max-width:44ch;
  margin-left:auto; margin-right:auto; }

/* ── Destaque do mês ──────────────────────────────────────── */

/* Números principais do mês. Peso alto na tipografia, mas a caixa
   encolhe até o conteúdo — esticar na largura toda deixava um vão
   enorme à direita e diluía justamente o que deveria saltar. */
.mstrip__wrap{ display:flex; justify-content:center; margin-bottom:22px; }

.mstrip{
  display:inline-block;
  background:linear-gradient(150deg, rgba(255,106,0,.06), transparent 55%), var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r-card);
  padding:15px 24px 18px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}

.mstrip__hd{ display:flex; justify-content:center; margin-bottom:13px; }
.mstrip__tag{
  font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
  background:rgba(255,106,0,.11);
  border-radius:6px; padding:4px 9px;
  white-space:nowrap;
}

.mstrip__row{ display:flex; align-items:stretch; flex-wrap:wrap; }

/* Filete entre as métricas em vez de caixas: separa sem picotar */
.mstrip__c{
  display:flex; flex-direction:column; gap:5px;
  padding:0 22px; min-width:0; white-space:nowrap;
  border-left:1px solid var(--line);
}
.mstrip__c:first-child{ padding-left:0; border-left:0; }
.mstrip__c:last-child{ padding-right:0; }

.mstrip__l{
  font-size:11px; color:var(--dim); font-weight:450;
  letter-spacing:.01em;
}
.mstrip__v{
  font-size:27px; font-weight:600; letter-spacing:-.035em; line-height:1.1;
}
.mstrip__v.is-good{ color:var(--good); }
.mstrip__v.is-bad{ color:var(--bad); }

/* ── Faixa do mês no cabeçalho ────────────────────────────── */

/* A caixa encolhe até o conteúdo e fica centrada na coluna — esticar
   na largura toda dilui o que deveria saltar, e encostar à esquerda
   deixa um vão morto do lado. O único ajuste aqui é a margem: o
   respiro vertical quem dá é o 'gap' do cabeçalho. */
.top__month .mstrip__wrap{ margin-bottom:0; }
.top__month .mstrip{ max-width:100%; }

/* ── Gráfico ──────────────────────────────────────────────── */

.chartbox{ height:236px; position:relative; }

/* Faturamento x Tráfego: a curva + a fileira de ROAS pedem mais respiro */
.chartbox--perf{ height:330px; }

.chartleg{ display:flex; gap:18px; flex-wrap:wrap; }
.chartleg span{ display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; color:var(--dim); }
.chartleg i{ width:14px; height:2px; border-radius:2px; display:inline-block; }
.card__hd:has(+ .chartbox--perf){ flex-wrap:wrap; }
/* Legenda em traço, do mesmo peso da linha do gráfico */
.card__hd:has(+ .chartbox--perf) .chartleg i{ width:16px; height:2.5px; border-radius:2px; }

.card__sub{ margin:5px 0 0; font-size:11.5px; color:var(--dim-2);
  line-height:1.45; max-width:52ch; }

/* ── Zen ──────────────────────────────────────────────────── */

.zen{
  border-top:1px solid var(--line);
  padding:30px 0 40px; margin-top:auto;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.zen__kanji{ font-family:var(--jp); font-size:40px; line-height:1; color:var(--text); opacity:.92; }
.zen__rule{ width:1px; height:44px; background:var(--line-2); }
.zen__txt{ font-size:13px; color:var(--dim); line-height:1.65; }
.zen__txt em{ font-style:normal; color:var(--dim-2); }
.zen__brand{ margin-left:auto; font-size:11px; color:var(--accent); letter-spacing:.05em; }

/* ── Carregando ───────────────────────────────────────────── */

.skel{
  background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);
  background-size:220% 100%;
  animation:sh 1.3s ease-in-out infinite;
  border-radius:8px; height:14px;
}
@keyframes sh{ to{ background-position:-220% 0; } }

.err{
  border:1px solid rgba(255,69,58,.3); background:rgba(255,69,58,.06);
  border-radius:var(--r-card); padding:20px 22px;
}
.err__t{ font-size:14px; font-weight:500; color:var(--bad); }
.err__d{ font-size:12.5px; color:var(--dim); margin-top:6px; }

/* ── Responsivo ───────────────────────────────────────────── */

@media (max-width:1180px){
  .span-3{ grid-column:span 4; }
  .span-5,.span-7{ grid-column:span 12; }
}

@media (max-width:900px){
  .shell{ grid-template-columns:1fr; }
  .nav{
    position:static; height:auto; flex-direction:row; align-items:center;
    border-right:0; border-bottom:1px solid var(--line);
    padding:14px 18px; gap:18px; overflow-x:auto;
  }
  .nav__list{ flex-direction:row; flex:1; gap:3px; }
  .nav__item{ white-space:nowrap; }
  .nav__foot{ border-top:0; padding-top:0; }
  .nav__acctxt{ display:none; }
  .main{ padding:0 18px; }
  .span-3,.span-4{ grid-column:span 6; }
}

@media (max-width:560px){
  .span-3,.span-4,.span-5,.span-7{ grid-column:span 12; }
  .top{ padding:22px 0 18px; }
  .rate__val{ font-size:29px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ── Entrada ──────────────────────────────────────────────
   Tela cheia, sem navegação: antes de entrar não há painel. */

.login{
  min-height:100vh; display:grid; place-items:center;
  padding:24px; background:var(--bg);
}

.login__box{
  width:100%; max-width:340px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:30px 26px 24px;
  display:flex; flex-direction:column; gap:15px;
}

.login__brand{
  font-size:19px; font-weight:600; letter-spacing:.14em;
  color:var(--accent); margin-bottom:6px;
}
.login__brand span{
  display:block; font-size:10px; font-weight:500; letter-spacing:.3em;
  color:var(--dim-2); text-transform:uppercase; padding-left:2px;
}

.login__f{ display:flex; flex-direction:column; gap:6px; }
.login__f span{ font-size:11.5px; color:var(--dim); padding-left:2px; }
.login__f input{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-ctl); padding:10px 12px;
  font-size:14px; color:var(--text);
  transition:border-color .14s ease;
}
.login__f input:hover{ border-color:var(--line-2); }
.login__f input:focus{ border-color:var(--accent); outline:none; }

.login__btn{
  margin-top:5px; padding:11px;
  background:var(--accent); color:#fff; border:0;
  border-radius:var(--r-ctl);
  font-size:14px; font-weight:500; cursor:pointer;
  transition:opacity .14s ease;
}
.login__btn:hover{ opacity:.9; }
.login__btn:disabled{ opacity:.5; cursor:default; }

.login__err{ margin:0; font-size:12px; color:var(--bad); min-height:16px; }
.login__note{ margin:0; font-size:11px; color:var(--dim-2); }

.nav__logout{
  margin-top:10px; width:100%;
  background:transparent; border:1px solid var(--line);
  border-radius:var(--r-ctl); padding:7px;
  font-size:12px; color:var(--dim); cursor:pointer;
  transition:background .14s ease, color .14s ease;
}
.nav__logout:hover{ background:var(--surface-2); color:var(--text); }

@media (max-width:900px){
  .nav__logout{ width:auto; margin-top:0; padding:7px 12px; }
}

/* ── Alternador de visão ──────────────────────────────────
   Segmentado: as duas opções sempre visíveis, para você saber
   que a outra existe sem precisar abrir menu. */

.segrow{ margin-bottom:var(--gap); }

.seg{
  display:inline-flex; gap:2px; padding:3px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:11px;
}

.seg__b{
  padding:7px 15px; border:0; border-radius:8px;
  background:transparent; color:var(--dim);
  font-size:13px; font-weight:450; letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap;
  transition:background .16s ease, color .16s ease;
}
.seg__b:hover{ color:var(--text); }
.seg__b.is-on{ background:var(--surface-2); color:var(--text); font-weight:500; }

/* Finanças em duas fileiras de três, como as taxas do funil. Enfileirar os
   seis num só corredor espremia cada card a ponto do valor em real encostar
   no número ao lado — três por linha dá largura para os dois respirarem. */
.grid--kpis{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--gap);
}
@media (max-width:1080px){ .grid--kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.grid--kpis .kpi{ min-height:132px; }
.grid--kpis .kpi__val{ font-size:29px; letter-spacing:-.03em; }
/* Valor nunca quebra linha: "R$ -3.926,61" partido no meio do "R$"
   vira dois números na leitura rápida. String longa encolhe a fonte. */
.kpi__val{ white-space:nowrap; }
.grid--kpis .kpi__val.is-long{ font-size:24px; letter-spacing:-.035em; }
.grid--kpis .kpi__lbl{ font-size:12.5px; }
/* O secundário fica fora do salto de corpo do card grande */
.grid--kpis .kpi__val--2{ font-size:16px; letter-spacing:-.01em; }

@media (max-width:560px){
  .seg{ width:100%; }
  .seg__b{ flex:1; text-align:center; padding:8px 10px; }
  .grid--kpis{ grid-template-columns:1fr; }
  .grid--kpis .kpi__val{ font-size:26px; }
  .grid--kpis .kpi__val.is-long{ font-size:22px; }
  .grid--kpis .kpi__val--2{ font-size:15px; }
}

/* ═════════════════════════════════════════════════════════
   RESPONSIVO — passada completa
   Grade automática não basta: o que quebra são os elementos
   de largura mínima fixa (data, faixa de saúde, funil).
   ═════════════════════════════════════════════════════════ */

/* Trava estouro horizontal na raiz. Um filho teimoso não
   deve poder empurrar a página inteira para o lado. */
html, body{ max-width:100%; overflow-x:hidden; }
.view, .grid, .grid--rates, .grid--kpis{ min-width:0; }
.card, .kpi, .rate{ min-width:0; }
.card__hd{ flex-wrap:wrap; row-gap:4px; }

/* Rótulos longos do funil quebram em vez de esticar a linha */
.fun__hd{ flex-wrap:wrap; row-gap:2px; }
.fun__name{ flex:1 1 auto; min-width:0; }
.fun__name em{ display:inline-block; }
.fun__ft{ flex-wrap:wrap; row-gap:3px; }

/* Com a sexta métrica a fila ficou mais larga e estoura antes do que
   estourava com cinco. O passo barato continua o mesmo: fechar o respiro
   entre as métricas antes de quebrar a fila, sem tocar no corpo da letra. */
@container (max-width: 960px){
  .top__month .mstrip{ padding:15px 20px 18px; }
  .top__month .mstrip__c{ padding:0 16px; }
}

/* Aí sim quebra: três em cima, três embaixo, ainda centrada e no mesmo
   corpo de letra — encolher a tipografia seria abrir mão do destaque,
   que é justamente o que a faixa existe para dar. Com seis métricas as
   duas fileiras ficam cheias, e o filete de baixo cai na prumada do de
   cima sem precisar de exceção. A conta é feita sobre o bloco e não
   sobre a janela: aos 900px a barra lateral some e devolve 236px de uma
   vez, e o viewport sozinho não enxerga isso. */
@container (max-width: 800px){
  .top__month .mstrip{ display:block; width:min(100%, 690px); margin:0 auto; }
  .top__month .mstrip__row{
    display:grid; grid-template-columns:repeat(6, 1fr); row-gap:16px;
  }
  /* Todas as células valem o mesmo terço: assim o filete da segunda
     fileira cai exatamente sob o da primeira. */
  .top__month .mstrip__c{ grid-column:span 2; padding:0 20px; }
  /* Quem abre fileira não leva filete nem recuo à esquerda */
  .top__month .mstrip__c:nth-child(1),
  .top__month .mstrip__c:nth-child(4){ border-left:0; padding-left:0; }
  .top__month .mstrip__c:nth-child(3){ padding-right:0; }
}

@container (max-width: 620px){
  .top__month .mstrip{ width:100%; padding:15px 18px 17px; }
  .top__month .mstrip__row{ grid-template-columns:repeat(2, 1fr); row-gap:15px; }
  .top__month .mstrip__c{ grid-column:span 1; padding:0 16px; }
  .top__month .mstrip__c:nth-child(4){ grid-column:span 1; }
  .top__month .mstrip__c:nth-child(odd){ border-left:0; padding-left:0; }
  .top__month .mstrip__c:nth-child(even){ padding-right:0; }
  /* Seis em duas colunas fecham três fileiras cheias. A exceção que
     esticava a quinta para a linha toda existia porque cinco deixava
     uma sobrando — agora ela jogaria a sexta sozinha lá embaixo. */
  .top__month .mstrip__v{ font-size:24px; }
}

@media (max-width:1024px){
  .grid--rates{ grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); }
  .grid--kpis { grid-template-columns:repeat(auto-fit,minmax(184px,1fr)); }
}

@media (max-width:900px){
  :root{ --gap:14px; }

  /* Navegação vira barra rolável no topo */
  .nav{ gap:14px; padding:12px 16px; align-items:center; }
  .nav__brand{ padding:0; flex:none; }
  .nav__mark{ font-size:16px; letter-spacing:.12em; }
  .nav__sub{ display:none; }
  .nav__list{ gap:2px; }
  .nav__foot{ display:flex; align-items:center; gap:8px; flex:none; }

  .top{ gap:14px; padding:20px 0 16px; }
  .top__title{ font-size:23px; }
  .dashbar{ gap:12px; }

  .chartbox{ height:200px; }
  .chartbox--perf{ height:290px; }
}

/* Só no celular os filtros passam a ocupar a linha inteira. Acima
   disso ainda cabe abas à esquerda e período à direita — esticar os
   botões cedo demais abria vãos enormes entre "Hoje" e "30 dias". */
@media (max-width:620px){
  .top__right{ width:100%; align-items:stretch; }
  .dashbar__seg{ width:100%; }
  .ctl{ flex:1 1 132px; min-width:0; }
  .ctl__in{ width:100%; }
  .btn{ flex:none; align-self:flex-end; height:35px; }
}

@media (max-width:640px){
  /* 14 células de saúde não cabem lado a lado — duas fileiras
     de sete lê melhor que quebra irregular */
  .hday{ flex:1 1 calc(14.28% - 5px); min-width:0; padding:7px 2px 6px; }
  .hday__d{ font-size:9px; }
  .legend{ gap:10px; }

  .tbl th, .tbl td{ padding-right:10px; }
}

@media (max-width:480px){
  .main{ padding:0 14px; }
  :root{ --gap:12px; }

  .grid--rates,
  .grid--kpis{ grid-template-columns:1fr; }

  .rate{ min-height:0; }
  .rate__val{ font-size:27px; }
  .rate__foot{ padding-top:12px; }
  .kpi{ min-height:0; }
  .grid--kpis .kpi{ min-height:0; }
  .grid--kpis .kpi__val{ font-size:25px; }
  .mstrip__wrap{ display:block; }
  .mstrip{ display:block; padding:14px 16px 16px; }
  .mstrip__row{ gap:14px 0; }
  /* Tela estreita: duas colunas, filete só entre as vizinhas da linha */
  .mstrip__c{ flex:1 1 50%; padding:0 14px; }
  .mstrip__c:nth-child(odd){ padding-left:0; border-left:0; }
  .mstrip__v{ font-size:22px; }

  .card{ padding:15px 16px; }
  .top__title{ font-size:21px; }
  .chartbox{ height:180px; }
  .chartbox--perf{ height:265px; }

  /* Zen empilha em vez de espremer */
  .zen{ gap:14px; padding:22px 0 30px; }
  .zen__rule{ display:none; }
  .zen__kanji{ font-size:32px; }
  .zen__brand{ margin-left:0; width:100%; }

  .empty{ padding:34px 18px; }
  .login__box{ padding:24px 20px 20px; }
}

/* Espaçamento entre o bloco que alterna e o que vem depois.
   As grades de taxa e de finanças não são .grid, então o seletor
   de irmão adjacente precisa nomear as duas explicitamente. */
.grid--rates + .grid,
.grid--kpis  + .grid{ margin-top:var(--gap); }


/* O espaçamento vive no próprio bloco, não na relação com o vizinho.
   Seletor de irmão adjacente falha em silêncio se a ordem do DOM
   mudar; margem própria não tem como falhar. */
.grid--rates,
.grid--kpis{ margin-bottom:var(--gap); }

/* ── Funil desenhado ──────────────────────────────────────
   Faixa contínua espelhada. A queda vira geometria: você lê
   o estrangulamento antes de ler qualquer número. */

.funsvg{
  display:block; width:100%; height:auto;
  max-height:352px;
  overflow:visible;
}

/* O CSS do funil em barras não é mais usado, mas fica inofensivo
   caso algum cache antigo ainda sirva HTML velho. */

@media (max-width:1180px){
  .span-8, .span-4{ grid-column:span 12; }
}

@media (max-width:480px){
  .funsvg{ max-height:268px; }
}

/* ── Período ──────────────────────────────────────────────
   Atalhos para o que se usa todo dia, campos livres para o
   resto. Quem quer "7 dias" não deveria preencher duas datas. */

.presets{
  display:inline-flex; gap:2px; padding:3px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:10px;
}
.presets__b{
  padding:6px 12px; border:0; border-radius:7px;
  background:transparent; color:var(--dim);
  font-size:12.5px; font-weight:450; cursor:pointer; white-space:nowrap;
  transition:background .16s ease, color .16s ease;
}
.presets__b:hover{ color:var(--text); }
.presets__b.is-on{ background:var(--surface-2); color:var(--text); font-weight:500; }

/* Um botão só abre o calendário de intervalo. O widget nativo de data
   saiu: ele obrigava dois cliques em dois campos separados. */
.range{ position:relative; display:inline-flex; }

.range__btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:8px 13px; cursor:pointer;
  color:var(--text); font-size:12.5px; font-weight:450;
  letter-spacing:-.01em; white-space:nowrap;
  transition:border-color .16s ease, background .16s ease;
}
.range__btn:hover{ border-color:var(--line-2); background:var(--surface-2); }
.range__btn[aria-expanded="true"]{ border-color:var(--accent); }
.range__btn::after{
  content:''; width:7px; height:7px; margin-left:1px;
  border-right:1.5px solid var(--dim-2); border-bottom:1.5px solid var(--dim-2);
  transform:translateY(-2px) rotate(45deg);
}

/* ── Calendário de intervalo ──────────────────────────────── */

.cal{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:14px; padding:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
}
.cal[hidden]{ display:none; }

.cal__ms{ position:relative; display:flex; gap:22px; }

.cal__arw{
  position:absolute; top:-2px; width:26px; height:26px;
  display:grid; place-items:center;
  border:0; border-radius:7px; background:transparent; cursor:pointer;
  color:var(--dim); font-size:16px; line-height:1;
  transition:background .14s ease, color .14s ease;
}
.cal__arw:hover{ background:var(--surface-2); color:var(--text); }
.cal__arw--l{ left:0; }
.cal__arw--r{ right:0; }

.cal__m{ width:210px; }
.cal__mh{
  text-align:center; font-size:12.5px; font-weight:500; color:var(--text);
  text-transform:capitalize; margin-bottom:11px; height:26px; line-height:26px;
}
.cal__wd, .cal__g{ display:grid; grid-template-columns:repeat(7, 1fr); }
.cal__wd{ margin-bottom:4px; }
.cal__wd span{
  text-align:center; font-size:10px; font-weight:500;
  color:var(--dim-2); text-transform:uppercase; letter-spacing:.04em;
}

.cal__d{
  position:relative; height:28px; border:0; background:transparent;
  cursor:pointer; color:var(--text); font-size:11.5px;
  font-variant-numeric:tabular-nums; border-radius:7px;
  transition:background .12s ease, color .12s ease;
}
.cal__d--gap{ pointer-events:none; }
.cal__d:disabled{ color:var(--dim-2); opacity:.28; cursor:default; }
.cal__d:not(:disabled):hover{ background:var(--surface-2); }

/* Miolo do intervalo: faixa contínua, cantos só nas pontas */
.cal__d.is-in{ background:rgba(255,106,0,.14); border-radius:0; }
.cal__d.is-lo, .cal__d.is-hi{
  background:var(--accent); color:#0B0B0D; font-weight:600;
}
.cal__d.is-lo{ border-radius:7px 0 0 7px; }
.cal__d.is-hi{ border-radius:0 7px 7px 0; }
.cal__d.is-solo{ border-radius:7px; }
.cal__d.is-today::after{
  content:''; position:absolute; left:50%; bottom:3px;
  width:3px; height:3px; margin-left:-1.5px;
  border-radius:50%; background:var(--dim);
}
.cal__d.is-lo.is-today::after, .cal__d.is-hi.is-today::after{ background:#0B0B0D; }

.cal__ft{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:12px; padding-top:11px; border-top:1px solid var(--line);
}
.cal__hint{ font-size:11.5px; color:var(--dim); }
.cal__cancel{
  border:0; background:transparent; cursor:pointer;
  color:var(--dim); font-size:11.5px; padding:4px 8px; border-radius:6px;
  transition:background .14s ease, color .14s ease;
}
.cal__cancel:hover{ background:var(--surface-2); color:var(--text); }

.ctl--tight .ctl__in{ padding:7px 30px 7px 11px; font-size:12.5px; }

/* ── Transição ao filtrar ─────────────────────────────────
   Recarregar não deveria piscar. O conteúdo antigo fica na
   tela, esmaecido, e o novo entra por cima com um fade curto. */

.view{ transition:opacity .24s cubic-bezier(.22,1,.36,1); }
.view.is-busy{ opacity:.55; pointer-events:none; }

/* Só opacidade. Deslocamento vertical num swap rápido é lido como
   solavanco, não como transição. */
@keyframes axIn{
  from{ opacity:.35; }
  to  { opacity:1; }
}
.view.is-fresh{ animation:axIn .3s cubic-bezier(.22,1,.36,1) both; }

@media (prefers-reduced-motion:reduce){
  .view.is-fresh{ animation:none; }
}

@media (max-width:900px){
  .top__right{ flex-wrap:wrap; gap:8px; }
  /* Tela estreita: um mês só, o outro fica a um toque na seta */
  .cal{ right:auto; left:0; }
  .cal__m:nth-child(4){ display:none; }
}

@media (max-width:620px){
  .presets{ flex:1 1 100%; justify-content:space-between; }
  .presets__b{ flex:1; text-align:center; padding:7px 4px; }
  .range{ flex:1 1 auto; }
  .range__btn{ width:100%; justify-content:center; }
  .ctl--tight{ flex:0 1 150px; }
}

@media (max-width:480px){
  .range__btn{ font-size:12px; padding:7px 10px; }
  .presets__b{ font-size:12px; }
}